@font-face { font-family: "Space Grotesk"; font-weight: 500; src: url(/fonts/sg-500.woff2) format("woff2"); font-display: swap }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url(/fonts/sg-700.woff2) format("woff2"); font-display: swap }

/* each look paints the page; the canvas fills it */
:root { --bg: #06041a; --bg2: #120a3a; --ink: #f1ecff; --dim: #8d80c9; --edge: #8a6bff; --hot: #ff2bd6; --act: #ffe14d; --btn: #1b1250; --btn-ink: #ffffff }
:root[data-look="flat"] { --bg: #111111; --bg2: #1c1c1c; --ink: #f4efe4; --dim: #8a8a8a; --edge: #f4efe4; --hot: #ffd400; --act: #ffd400; --btn: #f4efe4; --btn-ink: #111111 }
:root[data-look="paper"] { --bg: #2340ff; --bg2: #0c1a7a; --ink: #f4efe4; --dim: #b8c2ff; --edge: #0c1a7a; --hot: #ffffff; --act: #ffd23d; --btn: #0c1a7a; --btn-ink: #f4efe4 }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; overscroll-behavior: none }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
button { font: inherit; color: inherit }
[hidden] { display: none !important }

/* ---- the stage: a canvas that fills the window -------------------------------------------- */
.stage { position: fixed; inset: 0; overflow: hidden }

/* ---- the wordmark: the O is the orb ------------------------------------------------------- */
.mark { margin: 0; font-weight: 700; letter-spacing: 0.02em; line-height: 0.92; text-transform: uppercase; display: flex; flex-direction: column; align-items: flex-start }
.mark .row { display: flex; align-items: center; gap: 0.06em; white-space: nowrap }
.mark .o { display: inline-block; width: 0.78em; height: 0.78em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.09em var(--bg), 0 0 0 0.16em var(--edge), 0 0 0.6em var(--edge); position: relative; margin-right: 0.04em }
.mark .o::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.16em; height: 0.16em; margin: -0.08em; border-radius: 50%; background: var(--edge) }
:root[data-look="flat"] .mark .o { box-shadow: 0 0 0 0.09em var(--bg), 0 0 0 0.16em var(--hot) }
:root[data-look="paper"] .mark .o { box-shadow: 0.06em 0.09em 0 rgba(4,8,50,0.55) }
.mark .sub { font-size: 0.42em; letter-spacing: 0.3em; color: var(--dim) }

/* ---- buttons: chunky, level, squish ------------------------------------------------------- */
.btn { appearance: none; border: 0; border-radius: 14px; padding: 16px 22px; min-height: 58px; background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 5px 0 rgba(0,0,0,0.35); transition: transform 0.06s, box-shadow 0.06s; text-decoration: none }
.btn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 1px 0 rgba(0,0,0,0.35) }
.btn:focus-visible { outline: 3px solid var(--act); outline-offset: 3px }
.btn.go { background: var(--act); color: #111 }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--dim) }
:root[data-look="neon"] .btn { box-shadow: inset 0 0 0 2px var(--edge), 0 0 18px rgba(138,107,255,0.35) }
:root[data-look="neon"] .btn.go { box-shadow: 0 0 24px rgba(255,225,77,0.5) }
:root[data-look="neon"] .btn:active { box-shadow: inset 0 0 0 2px var(--edge) }

/* ---- the door ----------------------------------------------------------------------------- */
.door { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column }
.door .top { flex: 1 0 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left)); position: relative; z-index: 1 }
.door .mark { font-size: clamp(40px, min(13vw, 17vh), 120px); padding-left: 0.1em }
.door .acts { display: flex; flex-direction: column; gap: 14px; max-width: 520px; width: 100% }
.door .today { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left }
.door .today .lbl { display: flex; flex-direction: column; gap: 2px }
.door .today small { font-size: 14px; font-weight: 500; opacity: 0.75 }
.kit { display: flex; gap: 6px }
.kit .k { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; position: relative; background: rgba(0,0,0,0.18) }
.kit .k i { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px }
.kit .k i b { width: 4px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.9 }
.joinrow { display: flex; gap: 10px }
.joinrow input { flex: 1; min-width: 0; height: 58px; border-radius: 14px; border: 0; padding: 0 16px; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; background: rgba(255,255,255,0.1); color: var(--ink); box-shadow: inset 0 0 0 2px var(--dim) }
:root[data-look="flat"] .joinrow input { background: #222 }
.joinrow input::placeholder { color: var(--dim); letter-spacing: 0.12em; font-weight: 500; font-size: 18px }
.door .cap { margin: -6px 0 0; color: var(--dim); font-size: 15px }
.links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px }
.links a, .links button { color: var(--dim); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.shelfwrap { position: relative; z-index: 1; padding: 8px 12px 28px; background: var(--bg) }

/* ---- full-page sheets (credits) ------------------------------------------------------------ */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 22px 40px }
.sheet h2 { font-size: 34px; margin: 0 0 18px }
.sheet ul { list-style: none; padding: 0; margin: 0 0 18px }
.sheet li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); line-height: 1.35 }
.sheet li b { display: block }
.sheet li span { color: var(--dim); font-size: 15px }
.sheet a { color: var(--ink) }

/* ---- join / lobby on the phone ------------------------------------------------------------ */
.pane { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); text-align: center; overflow-y: auto }
.pane .mark { font-size: clamp(36px, 10vw, 64px); align-items: center }
.pane h2 { margin: 0; font-size: 30px }
.pane p { margin: 0; color: var(--dim); font-size: 17px; max-width: 30em }
.pane .stack { display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%) }
input.name { height: 58px; border-radius: 14px; border: 0; padding: 0 16px; font: inherit; font-size: 22px; font-weight: 700; text-align: center; background: rgba(255,255,255,0.1); color: var(--ink); box-shadow: inset 0 0 0 2px var(--dim) }
.me-orb { width: 86px; height: 86px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px var(--seat, #3fe0ff), 0 0 40px var(--seat, #3fe0ff); flex: none }
.roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.roster .p { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); font-weight: 700 }
.roster .p i { width: 14px; height: 14px; border-radius: 50%; background: var(--c) }
.big { font-size: 120px; font-weight: 700; line-height: 1 }

/* ---- the command centre ------------------------------------------------------------------- */
.cc { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 8px; touch-action: none }
.cc .bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 17px; min-height: 30px }
.cc .bar .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--seat) }
.cc .bar .grow { flex: 1 }
.cc .bar .st { color: var(--dim) }
.cc .bar .st.down { color: var(--hot) }
.cc .pad { position: relative; border-radius: 18px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.07); overflow: hidden; touch-action: none }
:root[data-look="flat"] .cc .pad { background: #181818 }
:root[data-look="paper"] .cc .pad { background: rgba(12,26,122,0.35) }
.cc .pad .hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 16px; pointer-events: none; text-align: center; padding: 10px }
.cc .pad .base, .cc .pad .knob { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) }
.cc .pad .base { width: 128px; height: 128px; box-shadow: inset 0 0 0 3px var(--seat); opacity: 0.55 }
.cc .pad .knob { width: 58px; height: 58px; background: #fff; box-shadow: 0 0 0 5px var(--seat) }
.cc .pows { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px; touch-action: none }
.pw { position: relative; border: 0; border-radius: 14px; background: rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; padding: 6px 10px; text-align: left; font-weight: 700; font-size: 16px; color: var(--ink); min-height: 0; overflow: hidden; touch-action: none; transition: transform 0.06s }
.pw:active { transform: scale(0.96) }
.pw.empty { background: transparent; box-shadow: none; border: 2px dashed rgba(255,255,255,0.12); pointer-events: none }
.pw.empty > * { opacity: 0.18 }
.pw .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,0,0,0.25) }
.pw .nm { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.pw .pips { display: flex; gap: 4px }
.pw .pips b { width: 12px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15) }
.pw .pips b.on { background: var(--hue) }
.pw.on { background: var(--hue); color: #111; box-shadow: 0 0 0 3px #fff inset }
.pw.on .pips b { background: rgba(0,0,0,0.2) }
.pw.on .pips b.on { background: #111 }
.pw.on .ic { background: rgba(0,0,0,0.15) }
.pw.flash { animation: flash 0.5s }
@keyframes flash { 0% { box-shadow: 0 0 0 6px #fff } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0) } }
.pw .key { position: absolute; top: 6px; right: 8px; font-size: 12px; opacity: 0.6 }
@media (orientation: portrait) {
  .cc { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto }
  .cc .pows { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 38vh }
  .pw { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; font-size: 13px; text-align: center }
  .pw .nm { align-items: center }
  .pw .pips { gap: 3px } .pw .pips b { width: 7px }
}

/* ---- the daily on the phone --------------------------------------------------------------- */
.daily { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr auto; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 8px; touch-action: none }
.daily .field { position: relative; touch-action: none; min-width: 0; min-height: 0 }
.daily .side { display: flex; flex-direction: column; gap: 8px; width: clamp(130px, 19vw, 230px); min-height: 0 }
.daily .side .dist { font-weight: 700; font-size: 28px; line-height: 1; padding: 6px 4px 2px }
.daily .side .dist small { display: block; font-size: 13px; color: var(--dim); font-weight: 500; margin-top: 4px }
.daily .side .pows { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 8px; min-height: 0 }
.daily .keys { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 14px; font-size: 13px; color: var(--dim); pointer-events: none }
.daily .keys kbd { font: inherit; font-weight: 700; color: var(--ink); padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--dim) }
.daily .stickview { position: absolute; inset: 0; pointer-events: none }
/* the daily is a landscape game: portrait shows only "turn your phone" */
.daily .turn { display: none }
@media (orientation: portrait) and (pointer: coarse) {
  .daily { display: block }
  .daily .field, .daily .side { display: none }
  .daily .turn { display: flex; position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding: 24px }
  .daily .turn h2 { margin: 0; font-size: 28px }
  .daily .phoneicon { width: 64px; height: 110px; border-radius: 14px; box-shadow: inset 0 0 0 5px var(--ink); animation: turn 1.6s ease-in-out infinite }
}
@keyframes turn { 0%, 30% { transform: rotate(0) } 60%, 100% { transform: rotate(-90deg) } }
/* desktop: the loadout is a compact list with its keys, not a column of big touch buttons */
.daily.desk .side .pows { flex: none; grid-auto-rows: 60px }
.daily.desk .side .pw { font-size: 15px }

/* ---- result ------------------------------------------------------------------------------- */
.result { position: fixed; inset: 0; overflow-y: auto; z-index: 20; background: var(--bg) }
.result .in { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: max(24px, env(safe-area-inset-top)) 20px 20px; text-align: center }
.result .num { font-size: clamp(64px, 18vw, 140px); font-weight: 700; line-height: 0.9 }
.result .num small { font-size: 0.32em; color: var(--dim) }
.result .rank { font-size: 20px; font-weight: 700 }
.result .rank span { color: var(--dim); font-weight: 500 }
.result .board { width: min(420px, 100%); list-style: none; padding: 0; margin: 0; text-align: left }
.result .board li { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,0.08) }
.result .board li.me { color: var(--act); font-weight: 700 }
.result .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(420px, 100%) }
.result .row .btn { flex: 1 }
.result input.name { width: min(420px, 100%) }
.result .why { color: var(--dim); font-size: 16px }

/* ---- how to (first run) ------------------------------------------------------------------- */
.howto { position: fixed; inset: 0; z-index: 25; background: var(--bg); overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 22px; padding: 20px; text-align: center }
.howto .three { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center }
.howto h2 { margin: 0 } .howto p { margin: 0; max-width: 34em; color: var(--dim) }
@media (orientation: portrait) { .howto .card { width: 140px; font-size: 15px } .howto .three { gap: 12px } }
.howto .card { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; font-size: 18px }
.howto .card canvas { border-radius: 14px; background: rgba(255,255,255,0.05) }
@media (max-height: 460px) { .howto { gap: 12px } .howto .card { width: 150px; font-size: 15px } .howto .card canvas { width: 120px !important; height: 80px !important } }

/* ---- the TV ------------------------------------------------------------------------------- */
.tvover { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none }
.lobby { position: fixed; inset: 0; z-index: 6; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 4vw; padding: 5vh 6vw; background: linear-gradient(90deg, var(--bg) 35%, rgba(0,0,0,0) 100%) }
:root[data-look="flat"] .lobby, :root[data-look="paper"] .lobby { background: linear-gradient(90deg, var(--bg) 40%, rgba(0,0,0,0) 100%) }
.lobby .mark { font-size: 9vw }
.lobby .how { font-size: 2.2vw; color: var(--dim); margin: 5vh 0 0; line-height: 1.35 }
.lobby .how b { color: var(--ink) }
.lobby .seats { display: flex; gap: 1.2vw; margin-top: 4vh; flex-wrap: wrap }
.lobby .seats .s { display: flex; align-items: center; gap: 0.8vw; font-size: 2vw; font-weight: 700; padding: 0.8vw 1.4vw; border-radius: 999px; background: rgba(255,255,255,0.08) }
.lobby .seats .s i { width: 1.6vw; height: 1.6vw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.35vw var(--c) }
.lobby .seats .s.empty { opacity: 0.35; font-weight: 500 }
.lobby .right { display: flex; flex-direction: column; align-items: center; gap: 2vh }
.join { display: flex; flex-direction: column; align-items: center; gap: 1.5vh; text-decoration: none; color: var(--ink) }
.join .qr { width: 30vw; max-width: 56vh; height: auto; border-radius: 1.2vw; display: block }
.join .addr { font-size: 2.6vw; font-weight: 500; letter-spacing: 0.02em }
.join .addr b { font-weight: 700; letter-spacing: 0.12em }
.lobby .wait { font-size: 1.8vw; color: var(--dim) }
.cornerqr { position: fixed; z-index: 7; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg) }
.cornerqr .join { flex-direction: row; gap: 10px }
.cornerqr .qr { width: auto; height: 100%; border-radius: 6px }
.cornerqr .addr { font-size: 15px }
.count { font-size: 22vh; font-weight: 700; text-shadow: 0 0 40px var(--edge) }
.over { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3vh; background: rgba(0,0,0,0.55) }
:root[data-look="flat"] .over { background: rgba(17,17,17,0.8) }
:root[data-look="paper"] .over { background: rgba(12,26,122,0.75) }
.over h1 { font-size: 11vw; margin: 0; line-height: 0.9 }
.over .sub { font-size: 2.4vw; color: var(--dim) }
.over .rows { display: flex; gap: 2vw }
.over .pc { min-width: 15vw; padding: 2vh 1.6vw; border-radius: 1.4vw; background: rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 0.6vh; align-items: center }
.over .pc i { width: 3vw; height: 3vw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.6vw var(--c) }
.over .pc b { font-size: 2.4vw }
.over .pc span { color: var(--dim); font-size: 1.5vw }
.sound { position: fixed; z-index: 8; right: 2vw; top: 2vh; pointer-events: auto; font-size: 18px }
.netmark { position: fixed; z-index: 9; top: 10px; right: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--hot); opacity: 0.8 }

/* ---- ?tweaks ------------------------------------------------------------------------------ */
.tweaks { position: fixed; z-index: 40; left: 10px; top: 10px; font-size: 14px }
.tweaks .pill { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer }
.tweaks .panel { margin-top: 6px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.8); color: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 240px }
.tweaks .panel .r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.tweaks .panel .r span { width: 54px; opacity: 0.7 }
.tweaks .panel button { border: 0; border-radius: 8px; padding: 5px 9px; background: #333; color: #fff; cursor: pointer }
.tweaks .panel button.on { background: #fff; color: #111 }