:root { --ink:#1e1a17; --paper:#fffaf0; --yellow:#ffcf3f; --pink:#ff5d73; --blue:#5ab8ff; --green:#3cc48a; --muted:#6d6259; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#a9dcff; font-family:Fredoka,system-ui,sans-serif; color:var(--ink); }
[hidden] { display:none !important; }
#c { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#paper { position:fixed; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .38  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.chip, .card, .panel { background:var(--paper); border:2.5px solid var(--ink); border-radius:16px; box-shadow:3px 4px 0 var(--ink); }
.chip { padding:7px 13px; }
.logo { font-weight:700; letter-spacing:.5px; }
.logo b { color:var(--pink); -webkit-text-stroke:1.5px var(--ink); }
.logo.big { font-size:clamp(44px, 11vw, 72px); transform:rotate(-3deg); margin:4px 0 2px; line-height:1; }
.logo.big b { -webkit-text-stroke:2.5px var(--ink); }
.logo.small { font-size:20px; transform:rotate(-2deg); }

.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; z-index:20; }
.screen.dim { background:rgba(30,26,23,.35); backdrop-filter:blur(2px); }
.card { padding:22px; width:min(440px, 100%); max-height:calc(100% - 8px); overflow:auto; }
.card.center { text-align:center; }
.card.hero { text-align:center; transform:rotate(-.5deg); }
.card h2 { margin:0 0 12px; font-size:26px; }
.tag { font-family:"Patrick Hand",cursive; font-size:21px; margin:6px 0 18px; }
.hint { font-family:"Patrick Hand",cursive; font-size:17px; color:var(--muted); margin:10px 0; line-height:1.25; }
.hint.small { font-size:15px; margin:6px 0; }
.err { color:#d22f45; font-weight:600; min-height:1em; margin:8px 0; }
.col { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; gap:10px; align-items:center; margin-top:12px; }
.row.end { justify-content:flex-end; } .row.between { justify-content:space-between; margin-top:0; } .row.wrap { flex-wrap:wrap; }
.grow { flex:1; }
.or { text-align:center; font-family:"Patrick Hand"; font-size:17px; color:var(--muted); margin:14px 0 0; }

.btn { font:inherit; font-weight:600; font-size:16px; color:var(--ink); background:#fff; border:2.5px solid var(--ink); border-radius:12px; padding:9px 16px; cursor:pointer; box-shadow:2px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
.btn:active { transform:translate(2px,3px); box-shadow:0 0 0 var(--ink); }
.btn:disabled { opacity:.45; pointer-events:none; }
.btn.big { font-size:20px; padding:13px 20px; border-radius:14px; }
.btn.big small { display:block; font-family:"Patrick Hand"; font-weight:400; font-size:15px; opacity:.8; }
.btn.tiny { font-size:14px; padding:5px 10px; border-radius:9px; box-shadow:1.5px 2px 0 var(--ink); }
.btn.wide { width:100%; }
.btn.yellow { background:var(--yellow); } .btn.pink { background:#ff9db0; } .btn.blue { background:#a9dcff; } .btn.ghost { background:transparent; box-shadow:none; }
.btn.on, .btn.tool.on { background:var(--ink); color:var(--paper); }

input, select { font:inherit; font-size:16px; border:2.5px solid var(--ink); border-radius:10px; padding:8px 10px; background:#fff; color:var(--ink); min-width:0; }
input.code { text-transform:uppercase; letter-spacing:6px; font-weight:700; width:130px; text-align:center; }
.field { display:flex; align-items:center; gap:10px; margin:8px 0; font-weight:600; font-size:15px; }
.field.col { flex-direction:column; align-items:stretch; }
.field input[type=range] { flex:1; padding:0; border:none; accent-color:var(--pink); background:transparent; }
.field b { min-width:56px; text-align:right; font-family:"Patrick Hand"; font-size:18px; font-weight:400; color:var(--ink); }
.field select { flex:1; padding:5px 8px; }
#partyAdd input { flex:1; }

.plist { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.pl { display:flex; align-items:center; gap:10px; padding:6px 8px; border:2px solid var(--ink); border-radius:12px; background:#fff; font-weight:600; }
.pl .x { margin-left:auto; }
.av { width:26px; height:26px; border-radius:50%; border:2.5px solid var(--ink); flex:none; }
.avatar { width:70px; height:70px; border-radius:50%; border:3px solid var(--ink); margin:0 auto 10px; box-shadow:2px 3px 0 var(--ink); }
.codebig { font-size:30px; letter-spacing:5px; background:var(--yellow); border:2.5px solid var(--ink); border-radius:10px; padding:0 10px; }

#hud { position:fixed; left:12px; right:12px; top:max(12px, env(safe-area-inset-top)); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; pointer-events:none; z-index:5; }
.hud-left { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.round { font-family:"Patrick Hand"; font-size:17px; }
.board { display:flex; flex-direction:column; gap:3px; font-size:14px; font-weight:600; max-height:40vh; overflow:hidden; }
.board .bp { display:flex; align-items:center; gap:7px; }
.board .bp .av { width:16px; height:16px; border-width:2px; }
.board .bp .s { margin-left:auto; padding-left:12px; font-family:"Patrick Hand"; font-size:16px; }
.board .bp.off { opacity:.45; }
#banner { position:fixed; left:50%; top:max(14px, env(safe-area-inset-top)); transform:translateX(-50%); font-weight:600; z-index:6; pointer-events:none; text-align:center; max-width:calc(100% - 300px); }

.panel { position:fixed; right:12px; top:50%; transform:translateY(-50%); width:320px; max-height:calc(100% - 140px); display:flex; flex-direction:column; padding:12px; gap:8px; z-index:10; }
.panel.small { width:300px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; font-size:18px; }
.panel-body { overflow:auto; flex:1; padding-right:4px; }
.group { border-top:2px dashed rgba(30,26,23,.25); margin-top:10px; padding-top:8px; }
.gtitle { font-weight:700; font-size:15px; margin-bottom:4px; }
.props { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.props .btn { padding:6px 2px; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.props .btn span { font-size:20px; line-height:1; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fact { background:#fff; border:2px solid var(--ink); border-radius:10px; padding:6px 8px; font-size:13px; }
.fact b { display:block; font-size:16px; }
.reslist { display:flex; flex-direction:column; gap:6px; margin:6px 0; overflow:auto; }
.rr { display:flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--ink); border-radius:10px; padding:6px 10px; font-weight:600; }
.rr .pts { margin-left:auto; color:#1d9a62; }
.rr .tot { font-family:"Patrick Hand"; font-size:16px; color:var(--muted); min-width:44px; text-align:right; }
.rr small { font-family:"Patrick Hand"; font-weight:400; color:var(--muted); font-size:14px; }
.rr.first { background:#fff1b8; }
.crown { font-size:54px; line-height:1; }

#toast { position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:40; font-weight:600; max-width:calc(100% - 32px); text-align:center; }
#pops { position:fixed; inset:0; pointer-events:none; z-index:4; }
.pop { position:absolute; transform:translate(-50%,-100%); font-weight:700; font-size:24px; -webkit-text-stroke:1.2px var(--ink); color:#fff; text-shadow:2px 3px 0 var(--ink); white-space:nowrap; animation:popin .45s cubic-bezier(.3,1.6,.5,1); }
.pop span { font-family:"Patrick Hand"; font-size:14px; -webkit-text-stroke:0; color:var(--ink); text-shadow:none; background:var(--paper); border:2px solid var(--ink); border-radius:8px; padding:0 6px; margin-left:4px; vertical-align:middle; }
@keyframes popin { from { transform:translate(-50%,-60%) scale(.3); opacity:0; } }

.pad { width:min(520px, 100%); }
.pad canvas { display:block; width:100%; aspect-ratio:1; margin:10px 0; border:2.5px solid var(--ink); border-radius:12px; touch-action:none; cursor:crosshair;
  background:#fffdf6 repeating-linear-gradient(0deg, transparent 0 31px, rgba(90,184,255,.25) 31px 32px); }
.tools { margin-top:6px; gap:6px; }
.lbl { font-weight:700; font-size:14px; }
.sw { display:flex; gap:5px; flex-wrap:wrap; }
.swatch { width:26px; height:26px; border-radius:50%; border:2.5px solid var(--ink); cursor:pointer; padding:0; }
.swatch.on { outline:3px solid var(--ink); outline-offset:2px; }

@media (max-width: 720px) {
  .panel, .panel.small { left:8px; right:8px; width:auto; top:auto; bottom:8px; transform:none; max-height:48%; }
  .panel.folded .panel-body { display:none; }
  #toast { bottom:auto; top:calc(max(12px, env(safe-area-inset-top)) + 96px); }
  #banner { top:auto; bottom:calc(48% + 18px); max-width:calc(100% - 24px); font-size:14px; }
  .board { font-size:12px; } .logo.small { font-size:16px; }
  .round { font-size:15px; }
}

/* timers, live sketch, materials, name tags */
.timer { font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.timer.low { background:#ffd0d7; animation:tick 1s steps(2) infinite; }
@keyframes tick { 50% { transform:scale(1.06); } }
#watch { position:fixed; left:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:6; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; pointer-events:none; }
#watch img { width:150px; height:150px; border:2px solid var(--ink); border-radius:10px; background:#fffdf6 repeating-linear-gradient(0deg, transparent 0 14px, rgba(90,184,255,.25) 14px 15px); }
#watch span { font-family:"Patrick Hand"; font-size:16px; }
.mats { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:4px; }
.mats .btn { padding:6px 2px; font-size:13px; }
.pintag { position:absolute; transform:translate(-50%,-100%); font-weight:600; font-size:13px; background:var(--paper); border:2px solid var(--ink); border-radius:8px; padding:0 6px; white-space:nowrap; }
.pintag.ghost { opacity:.65; border-style:dashed; }
@media (max-width: 720px) {
  #watch { left:auto; right:8px; bottom:auto; top:calc(max(12px, env(safe-area-inset-top)) + 96px); padding:5px; }
  #watch img { width:96px; height:96px; }
  #watch span { font-size:13px; }
}
.padtimer { padding:2px 8px; font-size:15px; box-shadow:none; margin-left:auto; } .padtimer:empty { display:none; }

/* ---------- sticker-book polish ---------- */
#vignette { position:fixed; inset:0; pointer-events:none; z-index:3; background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(30,60,110,.18) 100%); }
.screen:not([hidden]) > .card { animation:cardin .28s cubic-bezier(.3,1.4,.5,1); }
@keyframes cardin { from { transform:translateY(14px) scale(.96) rotate(-1deg); opacity:0; } }

/* home: logo + mode tiles sit low so the island stays in view */
.screen.home { align-items:flex-end; padding-bottom:max(28px, env(safe-area-inset-bottom)); }
.hero { width:min(720px, 100%); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.logo.sticker { background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:6px 22px 10px; box-shadow:5px 6px 0 var(--ink); position:relative; animation:logoin .6s cubic-bezier(.3,1.5,.5,1); }
.logo.sticker::before, .logo.sticker::after { content:""; position:absolute; top:-12px; width:64px; height:22px; background:rgba(255,207,63,.75); border:2px solid rgba(30,26,23,.25); }
.logo.sticker::before { left:14px; transform:rotate(-8deg); } .logo.sticker::after { right:14px; transform:rotate(7deg); }
@keyframes logoin { from { transform:rotate(-12deg) scale(.4); opacity:0; } }
.home .tag { background:var(--paper); border:2.5px solid var(--ink); border-radius:999px; padding:2px 14px; margin:4px 0 6px; box-shadow:2px 3px 0 var(--ink); }
.modes { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; width:100%; }
.mode { font:inherit; color:var(--ink); border:3px solid var(--ink); border-radius:18px; padding:14px 10px 12px; cursor:pointer; box-shadow:4px 5px 0 var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .1s, box-shadow .1s; }
.mode:nth-child(1) { transform:rotate(-1.5deg); } .mode:nth-child(3) { transform:rotate(1.5deg); }
.mode:hover { transform:translateY(-3px) rotate(0); box-shadow:5px 8px 0 var(--ink); }
.mode:active { transform:translate(3px,4px); box-shadow:0 0 0 var(--ink); }
.mode:focus-visible, .btn:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.mode .mi { font-size:38px; line-height:1.1; }
.mode b { font-size:21px; }
.mode small { font-family:"Patrick Hand"; font-size:15.5px; opacity:.85; }
.mode.yellow { background:var(--yellow); } .mode.pink { background:#ff9db0; } .mode.blue { background:#a9dcff; }
.homefoot { display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; }
.homefoot .hint { margin:0; background:var(--paper); border-radius:8px; padding:0 8px; }
.homefoot .hint:empty { display:none; }

/* how to play */
.steps { list-style:none; padding:0; margin:6px 0; display:flex; flex-direction:column; gap:12px; counter-reset:s; }
.steps li { display:flex; gap:12px; align-items:flex-start; background:#fff; border:2.5px solid var(--ink); border-radius:14px; padding:10px 12px; counter-increment:s; position:relative; }
.steps li::after { content:counter(s); position:absolute; top:-10px; left:-8px; width:24px; height:24px; border-radius:50%; background:var(--pink); color:#fff; font-weight:700; font-size:14px; display:grid; place-items:center; border:2px solid var(--ink); }
.steps .si { font-size:30px; line-height:1; }
.steps b { font-size:17px; } .steps p { margin:2px 0 0; font-family:"Patrick Hand"; font-size:17px; color:var(--muted); line-height:1.2; }

/* lobby */
.share { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:"Patrick Hand"; font-size:16px; color:var(--muted); background:#fff7d6; border:2px dashed rgba(30,26,23,.35); border-radius:12px; padding:6px 10px; }
.share b { color:var(--ink); word-break:break-all; }
.listhead { margin-top:12px; } .listhead .hint { margin:0; }
.avgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; margin:8px 0; }
.avgrid .pl { flex-direction:column; gap:4px; padding:10px 6px 8px; text-align:center; font-size:15px; position:relative; animation:cardin .3s cubic-bezier(.3,1.4,.5,1); }
.ini { width:44px; height:44px; border-radius:50%; border:2.5px solid var(--ink); display:grid; place-items:center; color:#fff; font-weight:700; font-size:19px; -webkit-text-stroke:1px var(--ink); box-shadow:1.5px 2px 0 var(--ink); flex:none; }
.pl .ini { width:30px; height:30px; font-size:14px; }
.avgrid .pl .ini { width:44px; height:44px; font-size:19px; }
.pl .badge { position:absolute; top:-9px; right:-6px; font-size:18px; }
.avgrid .pl.empty { border-style:dashed; color:var(--muted); background:transparent; font-family:"Patrick Hand"; font-weight:400; justify-content:center; animation:none; }

/* round intro + countdown */
#intro { position:fixed; inset:0; display:grid; place-items:center; z-index:30; pointer-events:none; }
#intro .sticker { background:var(--paper); border:3px solid var(--ink); border-radius:22px; box-shadow:6px 7px 0 var(--ink); padding:14px 28px 16px; text-align:center; display:flex; flex-direction:column; gap:2px; max-width:calc(100% - 32px);
  animation:slap 1.9s cubic-bezier(.3,1.4,.5,1) forwards; }
#intro small { font-family:"Patrick Hand"; font-size:20px; color:var(--muted); }
#intro b { font-size:clamp(28px, 7vw, 46px); line-height:1.05; text-wrap:balance; }
@keyframes slap { 0% { transform:scale(2.2) rotate(8deg); opacity:0; } 14% { transform:scale(1) rotate(-3deg); opacity:1; } 80% { transform:scale(1) rotate(-3deg); opacity:1; } 100% { transform:scale(.9) rotate(-3deg) translateY(-30px); opacity:0; } }
#count { position:fixed; inset:0; display:grid; place-items:center; z-index:25; pointer-events:none; font-weight:700; font-size:clamp(90px, 22vw, 180px); color:var(--yellow); -webkit-text-stroke:5px var(--ink); text-shadow:6px 8px 0 var(--ink); }
#count.go { color:var(--pink); font-size:clamp(70px, 16vw, 140px); }
#count span { animation:countin .34s cubic-bezier(.3,1.6,.5,1); display:block; }
@keyframes countin { from { transform:scale(2.4) rotate(-10deg); opacity:0; } }
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:24; }

/* guess facts: compact chips grouped by what they describe */
.facts { display:flex; flex-direction:column; gap:6px; }
.fg { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.fgl { font-family:"Patrick Hand"; font-size:15px; color:var(--muted); width:52px; flex:none; }
.fc { display:inline-flex; align-items:center; gap:4px; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:2px 9px 2px 6px; font-size:14px; font-weight:600; white-space:nowrap; }
.fc i { font-style:normal; font-size:15px; }
.fc small { font-family:"Patrick Hand"; font-weight:400; font-size:14px; color:var(--muted); }
.fc.warn { background:#ffe1e6; }

/* results */
.rr { position:relative; overflow:hidden; }
.rr .bar { position:absolute; left:0; bottom:0; height:4px; background:var(--green); border-radius:0 3px 0 0; }
.rr .medal { font-size:20px; width:24px; text-align:center; flex:none; }
.rr .ini { width:28px; height:28px; font-size:13px; }

/* game over podium */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:10px 0 6px; min-height:150px; }
.pod { display:flex; flex-direction:column; align-items:center; gap:4px; width:31%; max-width:120px; animation:podup .6s cubic-bezier(.3,1.4,.5,1) backwards; }
.pod:nth-child(1) { animation-delay:.25s; } .pod:nth-child(2) { animation-delay:.05s; } .pod:nth-child(3) { animation-delay:.4s; }
.pod .nm { font-weight:700; font-size:15px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod .step { width:100%; border:3px solid var(--ink); border-radius:12px 12px 4px 4px; box-shadow:3px 4px 0 var(--ink); display:grid; place-items:start center; padding-top:6px; font-weight:700; font-size:22px; }
.pod .pts { font-family:"Patrick Hand"; font-size:16px; color:var(--muted); }
@keyframes podup { from { transform:translateY(40px); opacity:0; } }

@media (max-width: 720px) {
  .modes { grid-template-columns:1fr; gap:10px; }
  .mode { display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:0; padding:10px 14px; text-align:left; justify-items:start; }
  .mode .mi { grid-row:1 / span 2; align-self:center; font-size:30px; }
  .mode b { font-size:19px; }
  .mode:nth-child(1), .mode:nth-child(3) { transform:none; }
  .logo.big { font-size:clamp(40px, 13vw, 60px); }
  /* guess panel stays short: chips scroll sideways, lock button always visible */
  #guess .facts { flex-direction:row; overflow-x:auto; gap:5px; padding-bottom:4px; scrollbar-width:none; }
  #guess .fg { flex-wrap:nowrap; } #guess .fgl { display:none; }
  #guess .ghint { display:none; }
  .podium { min-height:120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}