@font-face { font-family: "Square"; src: url("/fonts/future-square.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Grot"; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Grot"; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; }

:root {
  --ground: #012f33; --deep: #00262a; --tile: #04494f; --ink: #eafffd; --dim: #8fd5d4;
  --hot: #ff5a1f; --hot-ink: #ffffff; --hot-edge: #b83400;
  --cool: #0b7d86; --cool-ink: #eafffd; --cool-edge: #04535a;
  --me: #ff3b4f;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font-family: "Grot", system-ui, sans-serif; overflow: hidden; }
body { position: fixed; inset: 0; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 2; }
[hidden] { display: none !important; }

/* the name: one square letter per player colour */
.mark { font-family: "Square", sans-serif; font-weight: 400; margin: 0; display: flex; gap: 0.04em; letter-spacing: 0; line-height: 1;
  font-size: clamp(56px, 15vw, 190px); }
.mark span { display: inline-block; color: var(--c); text-shadow: 0 0.06em 0 rgba(0,0,0,0.35), 0 0 0.35em color-mix(in srgb, var(--c) 45%, transparent); animation: hop 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
.mark span:nth-child(1) { --c: #ff3b4f; --i: 0 } .mark span:nth-child(2) { --c: #ff9419; --i: 1 } .mark span:nth-child(3) { --c: #ffe23d; --i: 2 }
.mark span:nth-child(4) { --c: #62f25a; --i: 3 } .mark span:nth-child(5) { --c: #3ee8ff; --i: 4 } .mark span:nth-child(6) { --c: #5a83ff; --i: 5 } .mark span:nth-child(7) { --c: #ff4fd8; --i: 6 }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) } 80% { transform: translateY(-0.08em) } }
.mark.small { font-size: clamp(36px, 5vw, 72px); }

/* buttons: flat slabs with a hard edge underneath, level, label only */
.btn { font-family: "Square", sans-serif; font-size: 22px; border: 0; border-radius: 0; padding: 14px 22px; min-height: 52px; cursor: pointer; color: var(--hot-ink); background: var(--hot); box-shadow: 0 6px 0 var(--hot-edge); text-transform: uppercase; letter-spacing: 0.03em; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--hot-edge); }
.btn.cool { background: var(--cool); color: var(--cool-ink); box-shadow: 0 6px 0 var(--cool-edge); }
.btn.cool:active { box-shadow: 0 2px 0 var(--cool-edge); }
.btn.big { font-size: 26px; min-height: 64px; padding: 16px 28px; }
.btn:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.btn kbd { font-family: "Grot", sans-serif; font-size: 0.55em; font-weight: 700; border: 2px solid currentColor; padding: 2px 6px; margin-right: 8px; vertical-align: 0.2em; }
body.touch .btn kbd { display: none; }
.textlink { background: none; border: 0; color: var(--dim); font: 500 16px "Grot", sans-serif; text-decoration: underline; cursor: pointer; padding: 12px; }
.why { min-height: 1.4em; margin: 8px 0 0; color: #ffd2c0; font-weight: 700; text-align: center; }
.wait { color: var(--dim); font-weight: 700; font-size: 18px; text-align: center; margin: 10px 0 0; }

/* home */
#home { justify-content: center; gap: 18px; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); background: radial-gradient(ellipse at center, rgba(1,47,51,0.15) 0%, rgba(1,38,42,0.72) 75%); }
.lede { margin: 0; font-size: clamp(17px, 2.2vw, 26px); font-weight: 700; text-align: center; color: var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.door { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: min(420px, 100%); margin-top: 8px; }
.join { display: flex; gap: 10px; }
.join input { flex: 1; min-width: 0; font: 400 28px "Square", sans-serif; text-transform: uppercase; text-align: center; letter-spacing: 0.2em; padding: 10px; border: 0; border-radius: 0; background: var(--deep); color: var(--ink); box-shadow: inset 0 0 0 3px var(--cool); }
.join input::placeholder { color: #3f8f92; }
#creditsOpen { position: absolute; bottom: calc(6px + var(--safe-b)); }

/* lobby, big screen */
#lobbyTv { flex-direction: row; justify-content: center; align-items: center; gap: 6vw; padding: 4vh 5vw; background: rgba(1,38,42,0.82); }
.tv-join { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.qr { background: #fff; padding: 14px; line-height: 0; }
.qr canvas, .qr img { width: min(30vh, 300px); height: auto; image-rendering: pixelated; }
.scan { font: 400 clamp(22px, 2.4vw, 36px) "Square", sans-serif; }
.code-line { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.where { color: var(--dim); font-weight: 700; font-size: clamp(16px, 1.4vw, 22px); }
.code { font: 400 clamp(40px, 5vw, 84px) "Square", sans-serif; letter-spacing: 0.12em; color: #fff; }
.tv-seats { display: flex; flex-direction: column; gap: 3vh; align-items: center; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.seat { width: clamp(72px, 8vw, 120px); aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 700 15px "Grot", sans-serif; color: rgba(0,0,0,0.65); background: var(--c); animation: seatIn 0.35s cubic-bezier(.2,1.6,.4,1) both; }
.seat.empty { background: transparent; box-shadow: inset 0 0 0 3px #0b6a72; animation: none; }
.seat.bot { background: color-mix(in srgb, var(--c) 55%, #012f33); color: rgba(255,255,255,0.8); }
.seat.away { opacity: 0.4; }
@keyframes seatIn { from { transform: scale(0.2) rotate(-90deg) } to { transform: none } }
.host-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper .btn { width: 56px; padding: 0; font-size: 30px; }
.bots { min-width: 6.5em; text-align: center; font: 400 20px "Square", sans-serif; }

/* lobby, phone */
.bar { position: absolute; top: 0; left: 0; right: 0; height: calc(8px + var(--safe-t)); background: var(--me); z-index: 3; }
#lobbyPhone { padding: calc(22px + var(--safe-t)) 16px calc(14px + var(--safe-b)); gap: 14px; justify-content: flex-start; background: rgba(1,38,42,0.88); overflow-y: auto; }
.phone-top { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; }
.room { font: 400 20px "Square", sans-serif; color: var(--dim); }
.room .code { font-size: 32px; margin-left: 6px; }
.you { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.you-sq { width: 96px; height: 96px; background: var(--me); box-shadow: 0 0 40px color-mix(in srgb, var(--me) 60%, transparent); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06) } }
.you-name { font: 400 28px "Square", sans-serif; color: var(--me); }
.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; }
.sw { aspect-ratio: 1; border: 0; border-radius: 0; background: var(--c); cursor: pointer; min-height: 40px; padding: 0; }
.sw.taken { opacity: 0.22; }
.sw.mine { box-shadow: 0 0 0 3px #fff; }
.seats.mini { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; }
.seats.mini .seat { width: auto; font-size: 10px; padding-bottom: 2px; }
.tvline { color: var(--dim); font-size: 15px; text-align: center; margin: 4px 0 0; }
#lobbyPhone .host-row { margin-top: 4px; width: 100%; max-width: 420px; flex-direction: column; align-items: stretch; }
#lobbyPhone .host-row .stepper { justify-content: center; }

.sheet { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; background: var(--deep); }
.sheet .btn { width: min(360px, 100%); }

/* play */
#play { pointer-events: none; }
#play .bar { height: calc(6px + var(--safe-t)); }
.hud { position: absolute; display: flex; gap: 18px; pointer-events: none; }
.hud-cell { display: flex; flex-direction: column; align-items: flex-start; }
.hud-cell b { font: 400 30px "Square", sans-serif; color: #fff; line-height: 1; }
.hud-cell i { font-style: normal; font-weight: 700; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
body.tv .hud { left: 3vw; top: 4vh; flex-direction: column; gap: 3vh; }
body.tv .hud-cell b { font-size: clamp(30px, 4vw, 64px); }
body.tv .hud-cell i { font-size: clamp(13px, 1.1vw, 18px); }
body.phone .hud { top: calc(10px + var(--safe-t)); left: 16px; right: 16px; justify-content: space-between; }
.roster { position: absolute; display: flex; gap: 8px; pointer-events: none; }
body.tv .roster { right: 3vw; top: 4vh; flex-direction: column; gap: 1.6vh; align-items: flex-end; }
body.tv #play .bar { display: none; }
body.phone .roster { left: 16px; right: 16px; bottom: calc(14px + var(--safe-b)); justify-content: center; }
body.phone .ro { width: 34px; }
body.phone .ro b { display: none; }
body.pad-on .count { color: rgba(0,0,0,0.6); text-shadow: none; }
.ro { width: clamp(28px, 3vw, 52px); aspect-ratio: 1; background: var(--c); position: relative; transition: filter 0.3s, opacity 0.3s; }
.ro.out { filter: grayscale(1) brightness(0.45); }
.ro b { position: absolute; right: 120%; top: 50%; transform: translateY(-50%); font: 400 clamp(14px, 1.4vw, 24px) "Square", sans-serif; color: #fff; white-space: nowrap; }
.pad { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--me); pointer-events: auto; touch-action: none; }
body.pad-on .pad { display: flex; }
.pad-arrow { width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 110px solid rgba(0,0,0,0.28); transition: transform 0.12s; }
.pad-state { font: 400 44px "Square", sans-serif; color: rgba(0,0,0,0.7); }
.pad-hint { font-weight: 700; font-size: 18px; color: rgba(0,0,0,0.55); }
.pad.out { background: #22494c; }
.pad.out .pad-state { color: #fff; }
.count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 min(40vw, 40vh) "Square", sans-serif; color: #fff; text-shadow: 0 0.05em 0 rgba(0,0,0,0.5); pointer-events: none; }
.count.pop { animation: pop 0.9s ease-out both; }
@keyframes pop { from { transform: scale(1.8); opacity: 0 } 20% { transform: scale(1); opacity: 1 } to { transform: scale(0.85); opacity: 0 } }
.banner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 clamp(48px, 11vw, 160px) "Square", sans-serif; color: var(--c, #fff); text-shadow: 0 0.06em 0 rgba(0,0,0,0.55), 0 0 0.4em color-mix(in srgb, var(--c, #fff) 50%, transparent); pointer-events: none; opacity: 0; }
.banner.show { animation: slam 0.5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes slam { from { transform: translateY(-50%) scale(2.4); opacity: 0 } to { transform: translateY(-50%) scale(1); opacity: 1 } }

/* results */
#results { justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); background: rgba(0,32,35,0.86); }
.res { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(640px, 100%); }
.res-head { font: 400 clamp(36px, 7vw, 80px) "Square", sans-serif; margin: 0; color: var(--c, #fff); text-align: center; }
.rows { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.rows li { display: grid; grid-template-columns: 2.4em 2.2em 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(4,73,79,0.85); animation: rowIn 0.35s both; animation-delay: calc(var(--i) * 0.06s); }
@keyframes rowIn { from { transform: translateX(-30px); opacity: 0 } }
.rows .pl { font: 400 24px "Square", sans-serif; color: var(--dim); }
.rows .sq { width: 1.6em; height: 1.6em; background: var(--c); }
.rows .nm { font-weight: 700; font-size: 18px; }
.rows .nm small { display: block; color: var(--dim); font-weight: 500; font-size: 14px; }
.rows .k { font: 400 20px "Square", sans-serif; }
.rows li.me { box-shadow: inset 0 0 0 3px #fff; }
.res-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.credits-box { margin: auto; width: min(640px, 100%); padding: 24px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow-y: auto; }
#credits { background: var(--deep); }
.credits-box h2 { font: 400 40px "Square", sans-serif; margin: 0 0 8px; }
.credit { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 2px solid #0b5d64; }
.credit i { font-style: normal; color: var(--dim); font-size: 14px; font-weight: 700; }
.credit b { font-size: 18px; }
.credit a { color: #ffd2c0; }

.toast { position: fixed; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); background: #fff; color: #012f33; font-weight: 700; padding: 10px 16px; z-index: 9; opacity: 0; transition: opacity 0.2s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; }
.mute { position: fixed; right: 10px; bottom: calc(8px + var(--safe-b)); z-index: 8; width: 44px; height: 44px; border: 0; background: rgba(0,0,0,0.25); color: #fff; font-size: 20px; cursor: pointer; }
body[data-screen="play"] .mute { display: none; }

@media (max-width: 700px) {
  #lobbyTv { flex-direction: column; gap: 3vh; overflow-y: auto; }
}
body.phone[data-screen="lobbyPhone"] .mute, body.phone[data-screen="results"] .mute { display: none; }
@media (max-height: 700px) {
  #lobbyPhone { gap: 10px; padding-top: calc(18px + var(--safe-t)); }
  .you-sq { width: 60px; height: 60px; }
  .you-name { font-size: 22px; }
  .tvline { font-size: 14px; }
  #lobbyPhone .btn.big { min-height: 56px; font-size: 22px; padding: 12px 20px; }
}