:root {
  /* Boundless Brand Book 2.1. Brand: Line Blue leads, Charcoal speaks. Consumer grade adds the Gen Z accents
     (max two per screen: here Lime for highlights/calls to action and Hot pink for energy). */
  --line-blue: #72CBCD; --deep-teal: #16687E; --charcoal: #131F21;
  --bone: #F8F4EC; --white: #FFFFFF; --graphite: #2E3B3D; --slate: #5B6A6C; --mist: #D9DEDC;
  --lime: #DDF86D; --hot-pink: #FF3D9A;
  --ink: var(--charcoal); --muted: var(--slate); --card: var(--bone); --line: var(--mist);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  /* Font: Fredoka, chosen by the founder for the game (2026-11-08) over the brand book's Cera.
     Colours stay on the brand book. Arial is the fallback. */
  --font: 'Fredoka', Arial, sans-serif;
  --sticker: 3px solid var(--charcoal);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font); font-weight: 500; color: var(--ink);
  background: linear-gradient(180deg, #72CBCD 0%, #A6DEDF 50%, #F8F4EC 100%); }
b, strong, th { font-weight: 600; } h1, h2, h3 { font-weight: 700; }
body { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: var(--deep-teal); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui, #hud { position: fixed; inset: 0; pointer-events: none; }
#ui > *, #hud > * { pointer-events: auto; }
body[data-screen="game"] #ui { display: none; }

/* ---------- menus ---------- */
.logo { margin: 0; font-size: clamp(48px, 14vw, 80px); font-weight: 700; letter-spacing: .02em; color: var(--white); text-align: center; line-height: 1.05;
  -webkit-text-stroke: 3px var(--charcoal); paint-order: stroke fill; text-shadow: 0 6px 0 var(--charcoal); transform: rotate(-3deg); }
.tag { text-align: center; margin: 6px 0 0; color: var(--muted); }
.home { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(12px + var(--safe-t)) 16px calc(18px + var(--safe-b)); pointer-events: none; }
.home > * { pointer-events: auto; }
.home .tag { color: var(--charcoal); font-size: 18px; }
.home .tag { text-shadow: 0 0 2px var(--bone), 0 0 14px #F8F4ECcc; }
.hero { margin-top: 2vh; pointer-events: none; }
.menu { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* on narrow phones the player name gives way so the points chip and sound button always fit */
.topline > .chip.me { min-width: 0; flex: 0 1 auto; }
.topline > .chip.me .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topline > .row { flex: none; }
.row { display: flex; gap: 8px; align-items: center; }
.row2 { display: flex; gap: 10px; } .row2 > * { flex: 1; }
.row3 { display: flex; justify-content: space-between; gap: 4px; }
.between { justify-content: space-between; } .sp { width: 64px; }
.col { display: flex; flex-direction: column; gap: 10px; }

.btn { display: block; width: 100%; padding: 14px 16px; border-radius: 999px; font-size: 18px; font-weight: 700; background: var(--white); color: var(--charcoal);
  border: var(--sticker); box-shadow: 0 5px 0 var(--charcoal); transition: transform .07s, box-shadow .07s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--charcoal); }
.btn.big { font-size: 22px; padding: 16px; }
.btn[disabled] { opacity: .55; box-shadow: none; transform: none; }
.btn.yellow { background: var(--lime); }            /* Lime: primary call to action, charcoal text only */
.btn.pink { background: var(--hot-pink); }          /* Hot pink: energy */
.btn.blue { background: var(--line-blue); }         /* Line Blue: charcoal text (8.9:1) */
.link { color: var(--charcoal); padding: 6px; text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--white); font-size: 15px; border: 2px solid var(--charcoal); box-shadow: 0 3px 0 var(--charcoal); white-space: nowrap; color: var(--charcoal); }
.sheet-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b)); background: #131F2140; overflow: auto; }
.card { width: 100%; max-width: 420px; background: var(--card); border-radius: 26px; padding: 20px 18px; border: var(--sticker); box-shadow: 0 8px 0 var(--charcoal); display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow: auto; }
.card .logo { font-size: 52px; }
.card .tag { margin-top: 0; }
.card h2 { margin: 0; text-align: center; font-size: 24px; letter-spacing: 0; }
.card h3 { margin: 4px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } /* labels: caps, wide tracking */
.or { text-align: center; color: var(--muted); font-size: 14px; }
.tabs { display: flex; background: var(--mist); border-radius: 14px; padding: 4px; }
.tabs button { flex: 1; padding: 9px; border-radius: 11px; color: var(--slate); }
.tabs button.on { background: var(--white); color: var(--charcoal); }
input[type=email], input[type=password], .code-in { width: 100%; padding: 13px 14px; border-radius: 14px; border: 2px solid var(--charcoal); background: var(--white); font: inherit; font-size: 17px; color: var(--charcoal); }
.code-in { text-align: center; letter-spacing: .3em; font-size: 26px; text-transform: uppercase; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { width: 20px; height: 20px; accent-color: var(--deep-teal); flex: none; }
.err { color: var(--charcoal); font-size: 14px; min-height: 1em; }
.err:not(:empty) { background: var(--hot-pink); border-radius: 12px; padding: 6px 10px; }
.fine { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }
.code { text-align: center; font-size: 44px; letter-spacing: .25em; color: var(--charcoal); background: var(--lime); border: var(--sticker); border-radius: 999px; padding: 4px 0; }
.players { display: flex; flex-direction: column; gap: 6px; }
.pl { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--white); border-radius: 14px; }
.howto p { margin: 0; line-height: 1.45; } .howto ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stats div { background: var(--white); border-radius: 14px; padding: 8px 4px; text-align: center; font-size: 12px; color: var(--muted); }
.stats b { display: block; font-size: 22px; color: var(--charcoal); }
.lbrow { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--white); border-radius: 12px; }
.lbrow.me { background: var(--lime); }

/* blob preview (menus) */
.mini { position: relative; display: inline-block; flex: none; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, #ffffff88, transparent 45%), var(--c);
  box-shadow: inset 0 -4px 0 #0002; }
.mini .eyes::before, .mini .eyes::after { content: ''; position: absolute; top: 34%; width: 18%; height: 24%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #131F21 38%, #fff 40%); }
.mini .eyes::before { left: 26%; } .mini .eyes::after { right: 26%; }
.mini .hat { position: absolute; left: 50%; transform: translateX(-50%); }
.h-crown { top: -22%; width: 56%; height: 30%; background: #D19C0F; clip-path: polygon(0 100%, 0 20%, 20% 60%, 35% 0, 50% 55%, 65% 0, 80% 60%, 100% 20%, 100% 100%); }
.h-cap { top: -6%; width: 76%; height: 34%; background: #72CBCD; border-radius: 50% 50% 10% 10%; box-shadow: 10px 6px 0 -4px #16687E; }
.h-leaf { top: -24%; width: 34%; height: 30%; background: #6ABE4E; border-radius: 0 100% 0 100%; }
.h-horns { top: -16%; width: 70%; height: 26%; background: radial-gradient(circle at 10% 100%, #F8F4EC 30%, transparent 32%), radial-gradient(circle at 90% 100%, #F8F4EC 30%, transparent 32%); }
.h-halo { top: -24%; width: 60%; height: 18%; border: 3px solid #DDF86D; border-radius: 50%; }
.h-bow { top: -8%; left: 70% !important; width: 40%; height: 24%; background: radial-gradient(circle at 50% 50%, #FF3D9A 20%, transparent 22%), linear-gradient(90deg, #FF3D9A 0 40%, transparent 40% 60%, #FF3D9A 60%); border-radius: 40%; }
.h-antenna { top: -30%; width: 4px; height: 34%; background: #2E3B3D; }
.h-antenna::after { content: ''; position: absolute; top: -4px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: #FF3D9A; }
.preview { display: flex; justify-content: center; padding: 18px 0 4px; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.sw { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.sw.on { box-shadow: 0 0 0 3px var(--charcoal); }
.hats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hatb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 4px 6px; border-radius: 14px; background: var(--white); font-size: 12px; }
.hatb.on { outline: 3px solid var(--charcoal); background: var(--lime); }

/* ---------- in-game HUD ---------- */
#hud-top { position: absolute; top: calc(8px + var(--safe-t)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.timer { padding: 6px 16px; border-radius: 99px; background: var(--white); font-size: 22px; border: var(--sticker); box-shadow: 0 4px 0 var(--charcoal); min-width: 90px; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.timer.hurry { background: var(--hot-pink); color: var(--charcoal); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.board { background: var(--bone); border-radius: 14px; padding: 6px 10px; font-size: 13px; min-width: 112px; border: 2px solid var(--charcoal); box-shadow: 0 3px 0 var(--charcoal); font-variant-numeric: lining-nums tabular-nums; }
.board div { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.board div.me { background: var(--lime); border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
#feed { position: absolute; top: calc(132px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; width: 92%; }
#feed div { background: #131F21d9; color: var(--bone); padding: 4px 12px; border-radius: 99px; font-size: 13px; animation: fadein .2s; text-shadow: 0 1px 2px #000; }
#feed .tag { padding: 0 7px; border-radius: 8px; text-shadow: none; }
#pow { position: absolute; left: 12px; bottom: calc(118px + var(--safe-b)); display: flex; flex-direction: column; pointer-events: none; color: var(--charcoal); }
#pow b { font-size: 18px; background: var(--charcoal); padding: 2px 10px; border-radius: 999px; } #pow span { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
#stickzone { position: absolute; left: 0; top: 70px; bottom: 0; width: 62%; touch-action: none; }
#stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: #F8F4EC40; border: 3px solid #131F2199; display: none; pointer-events: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--bone); border: var(--sticker); }
#hint { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); background: #131F21cc; color: var(--bone); padding: 8px 14px; border-radius: 99px; font-size: 15px; pointer-events: none; white-space: nowrap; }
#dashbtn { position: absolute; right: 22px; bottom: calc(28px + var(--safe-b)); width: 96px; height: 96px; border-radius: 50%; background: var(--lime); border: var(--sticker); box-shadow: 0 6px 0 var(--charcoal); font-size: 18px; letter-spacing: .12em; overflow: hidden; touch-action: none; color: var(--charcoal); }
#dashbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--charcoal); }
#dashbtn span { position: relative; }
#dashbtn i { position: absolute; inset: 0; background: conic-gradient(#131F2166 calc(var(--k, 0) * 360deg), transparent 0); }
#dashbtn.ready { animation: ready 1s infinite alternate; }
@keyframes ready { to { box-shadow: 0 6px 0 var(--charcoal), 0 0 24px #DDF86D; } }
#emotebtn { position: absolute; right: 132px; bottom: calc(40px + var(--safe-b)); width: 58px; height: 58px; border-radius: 50%; background: var(--white); font-size: 28px; border: var(--sticker); box-shadow: 0 4px 0 var(--charcoal); }
#emotes { position: absolute; right: 12px; left: 12px; bottom: calc(140px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; background: var(--bone); border-radius: 18px; padding: 8px; border: var(--sticker); box-shadow: 0 6px 0 var(--charcoal); }
#emotes.hidden { display: none; }
#emotes button { background: var(--white); border: 2px solid var(--charcoal); border-radius: 999px; padding: 6px 12px; font-size: 18px; }
.bubble { position: absolute; transform: translate(-50%, -100%); background: var(--white); padding: 4px 10px; border-radius: 999px; font-size: 18px; border: 2px solid var(--charcoal); box-shadow: 0 3px 0 var(--charcoal); animation: rise 2s forwards; pointer-events: none; }
@keyframes rise { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%); } }
.pop { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font-size: 64px; letter-spacing: -0.03em; color: var(--charcoal); text-shadow: 0 0 2px #F4F2FAF2, 0 0 14px #F4F2FAD9; animation: popin 1.2s forwards; pointer-events: none; white-space: nowrap; }
.pop.power { font-size: 30px; top: 26%; background: var(--lime); border: var(--sticker); border-radius: 999px; padding: 6px 20px; box-shadow: 0 5px 0 var(--charcoal); text-shadow: none; }
.pop.ko { font-size: 64px; background: var(--hot-pink); border: var(--sticker); border-radius: 999px; padding: 4px 26px; box-shadow: 0 6px 0 var(--charcoal); text-shadow: none; }
.pop.out { font-size: 28px; top: 44%; }
.pop.go { font-size: 96px; }
.pop.count { font-size: 110px; }
@keyframes popin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
#bigmsg { position: absolute; left: 50%; top: 48%; transform: translateX(-50%); color: var(--charcoal); font-size: 26px; text-shadow: 0 0 2px #F4F2FAF2, 0 0 14px #F4F2FAD9; pointer-events: none; }
#results { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 14px; background: #131F2155; }
#results.show { display: flex; animation: fadein .3s; }
.results .podium { display: flex; flex-direction: column; gap: 6px; }
.pr { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--white); border-radius: 14px; }
.pr.me { background: var(--lime); outline: 2px solid var(--charcoal); }
.pr .place { width: 30px; text-align: center; font-size: 20px; } .pr .nm { flex: 1; } .pr i { color: var(--muted); font-style: normal; font-size: 12px; }
.toast { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); background: var(--charcoal); color: var(--bone); padding: 10px 16px; border-radius: 999px; z-index: 50; max-width: 90%; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }

/* Line Points */
.perk { margin: 0; text-align: center; background: var(--lime); border: var(--sticker); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 var(--charcoal); }
.chip.pts { background: var(--lime); }
.balance { display: flex; flex-direction: column; align-items: center; background: var(--lime); border: var(--sticker); border-radius: 22px; padding: 14px; box-shadow: 0 6px 0 var(--charcoal); }
.balance span { font-size: 12px; letter-spacing: .12em; }
.balance b { font-size: 56px; line-height: 1.1; font-weight: 700; }
.balance small { font-size: 13px; color: var(--graphite); }
.rules { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; font-size: 15px; }
.rules th, .rules td { padding: 8px; text-align: center; border-bottom: 1px solid var(--mist); }
.rules td:first-child { text-align: left; }
.earned { text-align: center; background: var(--lime); border: var(--sticker); border-radius: 999px; padding: 8px 12px; font-size: 20px; font-weight: 700; box-shadow: 0 4px 0 var(--charcoal); }
.earned small { display: block; font-size: 12px; font-weight: 500; }
.list small { color: var(--slate); font-size: 12px; }