/* The same look as the app's lobby: Party Board's N64 Party lettering, navy panels, gold trim. */
@font-face { font-family: "N64 Party"; src: url("/assets/N64Party-Monochromatic.otf") format("opentype"); font-display: swap; }
:root {
  color-scheme: dark;
  --navy:rgba(37,59,156,.92); --navy-deep:#141c57; --cream:#e0dbc8; --gold:#c2a42d; --gold-bright:#ffd84a;
  --red:#e52521; --blue:#2873f2; --green:#36b83a; --yellow:#fbd000; --ok:#5dff8f; --bad:#ff6b6b;
  --head:"N64 Party","Arial Rounded MT Bold","Segoe UI",sans-serif;
  --body:"Fredoka","Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
  margin:0; color:var(--cream); font:16px/1.5 var(--body);
  background:
    linear-gradient(90deg, rgba(8,4,28,.75), rgba(8,4,28,.35)),
    repeating-linear-gradient(-55deg, #3b1f7a 0 70px, #2a1458 70px 140px) fixed;
}
header { display:flex; align-items:center; gap:22px; padding:22px 28px 4px; flex-wrap:wrap; }
header .sp { flex:1; }
.center { min-height:100vh; display:grid; place-items:center; align-content:center; gap:28px; padding:24px; }
.wordmark { font:400 50px/1 var(--head); letter-spacing:2px; text-transform:uppercase; -webkit-text-stroke:3px #fff; paint-order:stroke fill; filter:drop-shadow(4px 5px 0 #000); }
.wordmark span { display:inline-block; transform:rotate(-3deg); }
.wordmark span:nth-child(2n) { transform:rotate(3deg) translateY(2px); }
.wordmark .c1 { color:#39c54a; } .wordmark .c2 { color:#ffd21f; } .wordmark .c3 { color:#2f8dff; } .wordmark .c4 { color:#ff3b30; } .wordmark .c5 { color:#ff7bc8; } .wordmark .w { color:#f4fbff; }
.wordmark .gap { width:18px; }
.powered { display:flex; align-items:center; gap:10px; font:600 13px var(--body); }
.powered img { height:30px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.track { display:flex; align-items:center; padding:4px 28px 14px; flex-wrap:wrap; }
.trail { width:22px; height:0; border-top:4px dotted rgba(255,255,255,.7); }
.space { width:28px; height:28px; border-radius:50%; border:3px solid #fff; box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 -5px 0 rgba(0,0,0,.2); display:grid; place-items:center; color:#fff; font:400 15px var(--head); }
.space.b { background:var(--blue); } .space.r { background:var(--red); } .space.g { background:var(--green); } .space.q { background:var(--yellow); color:#7a4b00; }
.space.s { width:38px; height:38px; background:url("/assets/icon.png") center / contain no-repeat; border:0; box-shadow:none; }
main { max-width:960px; margin:0 auto; padding:8px 24px 48px; display:grid; gap:34px; }
.panel { background:var(--navy); border:3px solid var(--gold); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.45); padding:22px 24px 24px; display:grid; gap:16px; }
.panel.narrow { width:min(520px, 100%); }
.panel > h2 { margin:-40px auto 0; justify-self:center; padding:6px 28px 8px; border-radius:30px; background:linear-gradient(180deg,#2e4bc2,var(--navy-deep)); border:3px solid var(--gold); color:#fff; font:400 22px/1.1 var(--head); letter-spacing:2px; text-transform:uppercase; text-shadow:2px 3px 0 #000; }
.msg { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.msg .who { width:60px; height:60px; background:url("/assets/icon.png") center / contain no-repeat; filter:drop-shadow(0 4px 0 rgba(0,0,0,.5)); animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-6px) rotate(6deg); } }
.msgbox { background:linear-gradient(180deg,#1f2a7a,#0f1546); color:#fff; border:4px solid var(--gold-bright); border-radius:14px; padding:12px 18px; font:600 17px/1.4 var(--body); box-shadow:0 0 0 2px #fff inset, 0 6px 0 rgba(0,0,0,.45); display:flex; align-items:center; gap:12px; }
.msgbox .cursor { margin-left:auto; color:var(--ok); font-size:22px; animation:blink 1.1s steps(2) infinite; flex:none; }
@keyframes blink { to { opacity:0; } }
.msgbox.bad { border-color:var(--bad); }
label { display:grid; gap:5px; font:700 13px var(--body); }
input { font:600 18px var(--body); padding:10px 14px; border-radius:10px; border:2px solid rgba(224,219,200,.45); background:rgba(17,16,10,.35); color:#fff; width:100%; outline:none; }
input:focus { border-color:var(--gold-bright); }
.row { display:flex; gap:12px; align-items:end; flex-wrap:wrap; } .row > label { flex:1; min-width:200px; }
button, .button { font:400 18px var(--head); letter-spacing:1px; padding:10px 22px; border-radius:30px; border:2px solid rgba(224,219,200,.7); color:#fff; cursor:pointer; text-decoration:none;
  background:rgba(224,219,200,.25); text-shadow:1px 2px 0 rgba(0,0,0,.6); box-shadow:0 4px 0 rgba(0,0,0,.45); display:inline-flex; align-items:center; gap:10px; transition:transform .06s, box-shadow .06s; }
button:hover, .button:hover { transform:translateY(-1px); } button:active, .button:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.primary { background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a1f00; text-shadow:0 1px 0 rgba(255,255,255,.5); border-color:#fff; }
.start { font-size:28px; padding:14px 40px; background:linear-gradient(180deg,#ff6a5c,#d41f1f); border:3px solid #fff; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.5); box-shadow:0 0 0 3px var(--gold), 0 7px 0 #7d1010, 0 12px 16px rgba(0,0,0,.4); }
.start.disabled { opacity:.45; pointer-events:none; }
.btn-icon { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff; color:#1a2050; font:400 13px var(--head); }
.btn-icon.a { background:#3ec85a; color:#fff; }
.die { display:inline-block; width:26px; height:26px; border-radius:7px; background:#fff; border:2px solid #d0d5ee; box-shadow:inset -3px -3px 0 #dfe3f5, 0 2px 0 rgba(0,0,0,.35); position:relative; }
.die::before, .die::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#1a2050; }
.die::before { top:4px; left:4px; box-shadow:10px 10px 0 #1a2050; } .die::after { top:4px; right:4px; box-shadow:-10px 10px 0 #1a2050; }
.dl { display:grid; gap:10px; justify-items:center; padding:8px 0 4px; }
.meta { font:600 14px var(--body); opacity:.9; }
.pill { font:400 14px var(--head); letter-spacing:1px; padding:7px 16px; border-radius:20px; background:rgba(0,0,0,.35); border:2px solid rgba(224,219,200,.6); color:#fff; text-decoration:none; }
.steps { margin:0; padding-left:22px; display:grid; gap:10px; }
.steps b { color:#fff; } .steps code { background:rgba(0,0,0,.35); padding:2px 8px; border-radius:6px; font:400 15px var(--head); letter-spacing:2px; }
.hint { font-size:13px; opacity:.85; }