/* The phone screens. One thumb, a dim room, and a screen that's always your bracket's color. */
body[data-field='none'] { color-scheme: dark; --ground: #161b1a; --ink: #f1eee6; --muted: #b6bdb8; --rule: #303a37; --surface: #1f2624; --raised: #303a37; --alert: #f2a58e; }
body { --tabs: calc(52px + env(safe-area-inset-bottom, 0px)); --panel: rgba(0, 0, 0, 0.18); --ladder: rgba(241, 238, 230, 0.3); }
body[data-field='beginner'] { --panel: rgba(30, 36, 35, 0.12); --ladder: rgba(30, 36, 35, 0.32); }

.p-shell { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px 18px calc(var(--tabs) + 12px); }
.p-shell.no-tabs { padding-bottom: 20px; }
.p-shell.wide { max-width: 1280px; }
.p-scr { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p-scr > .tent-meta { flex: none; }
.p-spacer { flex: 1; min-height: 8px; }
.p-scr .tent-fold { margin-inline: -18px; }
.p-scr .tent-num { font-size: min(54vw, 28vh); }
.p-scr .tent-num.long { font-size: min(40vw, 22vh); }
.p-note { font-size: 0.9375rem; }
.p-link { min-height: 44px; padding: 6px 0; border: 0; background: none; font-weight: 700; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.p-stack-tight { display: grid; gap: 4px; }
.p-signup-head { display: grid; gap: 4px; justify-items: center; text-align: center; }
.p-signup-head .logo { width: min(132px, 17vh); }
.p-signup-head .tent-call { font-size: 2.6rem; }
.choice span { border-color: var(--ink); }
.choice input:checked + span, .choice input[value='beginner']:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* Tabs live at the bottom, where a thumb is. */
.p-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; background: var(--ground); border-top: 1px solid var(--ladder); padding-bottom: env(safe-area-inset-bottom, 0px); }
.p-tabs button { min-height: 52px; border: 0; background: none; font-weight: 600; font-size: 0.9375rem; opacity: 0.75; border-radius: 0; }
.p-tabs button[aria-pressed='true'] { opacity: 1; font-weight: 800; box-shadow: inset 0 3px 0 var(--ink); }
.p-dock { position: sticky; bottom: var(--tabs); z-index: 5; display: grid; gap: 2px; background: var(--ground); margin-inline: -18px; padding: 10px 18px 2px; }
.p-dock button.primary, .p-big { min-height: 56px; font-size: 1.125rem; font-weight: 800; }

/* Where you are, in plain words. */
.p-togo { font-weight: 700; }
.p-road { display: flex; gap: 4px; }
.p-road span { flex: 1; min-width: 0; height: 36px; display: grid; place-items: center; font-size: 0.875rem; font-weight: 800; font-stretch: 75%; border: 1px solid var(--ladder); }
.p-road span.past { background: var(--ladder); }
.p-road span.now { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* Dice and the cube, drawn flat. They're the only pictures on the phone. */
.p-dice { display: flex; gap: 16px; justify-content: center; padding-block: 10px; }
.p-die { width: 74px; height: 74px; background: var(--ink); border-radius: 12px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 10px; box-shadow: 5px 5px 0 var(--ladder); }
.p-die i { width: 12px; height: 12px; border-radius: 50%; place-self: center; }
.p-die i.on { background: var(--ground); }
.p-cube { align-self: center; width: 150px; height: 150px; margin-block: 8px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-size: 3.9rem; font-weight: 900; font-stretch: 62%; line-height: 1; border-radius: 14px; box-shadow: 8px 8px 0 var(--ladder); text-transform: uppercase; flex: none; }
.p-cube.lg { width: min(52vw, 190px); height: min(52vw, 190px); font-size: min(30vw, 7.4rem); box-shadow: 10px 10px 0 var(--ladder); }
.p-score { font-size: 4.5rem; line-height: 1; font-weight: 900; font-stretch: 62%; }
.p-second { font-size: min(44vw, 11rem); line-height: 0.82; font-weight: 900; font-stretch: 62%; letter-spacing: -0.02em; }

.p-card { background: var(--panel); padding: 10px 12px; display: grid; gap: 3px; }
.p-card.on { background: var(--ink); color: var(--ground); }
.p-card span { font-size: 0.9375rem; }
.p-stub { background: var(--panel); padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.p-stub-left { display: flex; align-items: center; gap: 12px; }
.p-stub .logo { width: 66px; flex: none; }
.p-stub b { font-size: 1.375rem; letter-spacing: 0.08em; font-stretch: 85%; }

/* Reporting a score, all on one screen. */
.p-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-two button { min-height: 72px; font-size: 1.0625rem; line-height: 1.1; padding: 6px; }
.p-two button[aria-pressed='true'], .p-pad button[aria-pressed='true'] { background: var(--ink); color: var(--ground); }
.p-pad { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; }
.p-pad button { min-height: 64px; font-size: 1.625rem; font-weight: 800; padding: 4px; }

/* Full-screen moments. They sit outside the page, so new data can't restart them. */
#moment:empty { display: none; }
.p-moment { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: var(--ground); color: var(--ink); padding: max(20px, env(safe-area-inset-top, 0px)) 18px max(16px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.p-moment-in { max-width: 444px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.up-alert { overflow-y: auto; }
.up-alert .tent-vs, .up-alert p { color: var(--adv-ink); }
.up-alert .p-spacer { flex: 1; }
.up-alert .primary { min-height: 56px; font-size: 1.125rem; }

#netbar { position: sticky; top: 0; z-index: 15; background: var(--alert); color: var(--ground); padding: 8px 18px; font-weight: 700; font-size: 0.9375rem; }
body[data-field='advanced'] #netbar, body[data-field='beginner'] #netbar { background: var(--ink); }

.p-shell .chip-swatch { outline: 1px solid var(--ink); margin-left: 1px; }
.p-shell .mcard { border-color: var(--ink); }
.p-shell .mrow + .mrow, .p-shell .mrow .sc { border-color: var(--ladder); }
.p-shell .mcard.done { border-color: var(--ladder); }
/* Every box is the same solid light field with dark text, on any bracket's color. */
.p-shell input:not([type='radio']):not([type='checkbox']) { background: #f1eee6; color: #1e2423; border-color: #f1eee6; caret-color: #1e2423; -webkit-text-fill-color: #1e2423; opacity: 1; }
.p-shell input:not([type='radio']):not([type='checkbox']):focus { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 1px; }
.p-shell input::placeholder { color: #56605c; -webkit-text-fill-color: #56605c; opacity: 1; }
.p-shell input:-webkit-autofill, .p-shell input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100px #f1eee6; -webkit-text-fill-color: #1e2423; }

body[data-field='beginner'] .p-shell input:not([type='radio']):not([type='checkbox']) { background: #fff; border-color: #1e2423; }

.p-help-link { align-self: center; }
.p-help-list { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }

/* Sign-up: the two brackets fill the screen, in full color, with quiet board points. */
.p-shell.on-join { padding-block: 12px 6px; }
.p-join { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p-join-head { display: flex; align-items: center; gap: 12px; flex: none; }
.p-join-head .logo { width: 68px; flex: none; }
.p-join-head h1 { font-size: 2.75rem; font-weight: 900; font-stretch: 62%; line-height: 0.95; text-transform: uppercase; }
.p-join-head p { font-size: 0.9375rem; }
.p-sides { flex: 1; min-height: 200px; display: grid; grid-template-rows: 1fr 1fr; margin: 6px -18px 2px; transition: grid-template-rows 0.25s; }
body[data-field='beginner'] .p-sides { grid-template-rows: 1.5fr 0.75fr; }
body[data-field='advanced'] .p-sides { grid-template-rows: 0.75fr 1.5fr; }
.choice.p-side { display: block; min-height: 0; overflow: hidden; }
.p-side input { position: absolute; opacity: 0; width: 1px; min-height: 0; }
.choice.p-side span, .choice.p-side input:checked + span, .choice.p-side input[value='beginner']:checked + span { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; padding: 8px 18px; border: 0; position: relative; overflow: hidden; }
.p-side.beginner span, .p-side.beginner input:checked + span { background: var(--beg) !important; color: var(--beg-ink) !important; }
.p-side.advanced span, .p-side.advanced input:checked + span { background: var(--adv) !important; color: var(--adv-ink) !important; }
.choice.p-side input:checked + span { box-shadow: inset 0 0 0 3px currentColor; }
.choice.p-side input:focus-visible + span { outline: 3px solid currentColor; outline-offset: -6px; }
.choice.p-side b { font-size: 2.875rem; font-weight: 900; font-stretch: 62%; line-height: 1; text-transform: uppercase; position: relative; }
.choice.p-side small { font-size: 0.875rem; line-height: 1.25; max-width: 26ch; color: inherit; margin: 0; position: relative; }
.p-points { position: absolute; top: 0; right: 0; width: 46%; height: 62%; display: flex; pointer-events: none; }
.p-points i { flex: 1; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0.05; }
.p-points i:nth-child(odd) { opacity: 0.13; }
.p-rsvp { text-align: center; }
@media (max-height: 620px) {
  .p-join-head .logo { width: 52px; }
  .p-join-head h1 { font-size: 2.25rem; }
  .choice.p-side b { font-size: 2.25rem; }
  .p-rsvp { display: none; }
  .p-shell.on-join .p-big { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .p-sides { transition: none; } }