/* IntuitionHall CodeGames: clean, bright, team-colored. Self-hosted fonts only. */
@font-face{font-family:"Fredoka";src:url(/fonts/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{
  --bg:#0f1324;--bg2:#1b2240;--card:#1a2140;--card2:#232c52;--line:rgba(255,255,255,.12);--text:#f6f7ff;--muted:#aab3d9;
  --red:#ff4d5e;--red2:#ffd6da;--blue:#3d8bff;--blue2:#d5e6ff;--neutral:#e9dfc8;--assassin:#15131a;--accent:#ffd23f;--ok:#7dffb0;
  --tile:#fbf7ee;--tileText:#1a1b26;--ink:#111;
  --display:"Fredoka",ui-rounded,system-ui,sans-serif;--body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:20px;--tap:48px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.5 var(--body);
  background:radial-gradient(60% 40% at 0% 0%,rgba(255,77,94,.22),transparent 60%),radial-gradient(60% 40% at 100% 0%,rgba(61,139,255,.25),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg));background-attachment:fixed}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .4em}
a{color:var(--accent)} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}
.skip{position:absolute;left:12px;top:-80px;background:var(--accent);color:var(--ink);padding:8px 12px;border-radius:999px;font-weight:800;z-index:50}.skip:focus{top:10px}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font:600 16px var(--display)}
.brand em{font-style:normal;background:linear-gradient(90deg,var(--red),var(--blue));color:#fff;padding:2px 10px;border-radius:999px;font-size:13px}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{font:600 13px var(--display);padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);white-space:nowrap;color:var(--text)}
.pill.red{background:var(--red);border-color:transparent;color:#fff}.pill.blue{background:var(--blue);border-color:transparent;color:#fff}
button.pill{cursor:pointer}
@media (max-width:480px){.brand span{display:none}}
main{max-width:1280px;margin:0 auto;padding:4px 14px 48px;outline:none}
.btn{appearance:none;border:0;min-height:var(--tap);padding:0 22px;border-radius:999px;font:700 17px var(--display);background:var(--accent);color:var(--ink);cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.35);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--text);box-shadow:none;border:1px solid var(--line)}
.btn.red{background:var(--red);color:#fff}.btn.blue{background:var(--blue);color:#fff}.btn.ok{background:var(--ok)}
.btn.small{min-height:36px;padding:0 14px;font-size:14px}.btn.wide{width:100%}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.form{max-width:540px;margin:10px auto;display:grid;gap:14px}
label{font:600 14px var(--display);display:block;margin-bottom:5px;color:var(--muted)}
input[type=text],select{width:100%;font:700 18px var(--body);color:var(--text);background:rgba(0,0,0,.25);border:2px solid var(--line);border-radius:14px;padding:11px 14px}
input[type=text]:focus,select:focus{border-color:var(--accent);outline:none}
select option{color:#111}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 130px}
.avatars{display:flex;flex-wrap:wrap;gap:6px}
.avatars button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:rgba(255,255,255,.08);font-size:22px;cursor:pointer}
.avatars button[aria-pressed=true]{border-color:var(--accent);background:rgba(255,210,63,.18)}
.seg{display:flex;border-radius:999px;background:rgba(0,0,0,.25);padding:4px;gap:4px}
.seg button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;color:var(--text);font:700 15px var(--display);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--ink)}
.seg button.red[aria-pressed=true]{background:var(--red);color:#fff}.seg button.blue[aria-pressed=true]{background:var(--blue);color:#fff}
.check{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}.check input{width:22px;height:22px;accent-color:var(--accent)}
.hero{text-align:center;margin:16px auto 4px;max-width:640px}.hero h1{font-size:clamp(32px,7vw,52px)}
.hero h1 .r{color:var(--red)}.hero h1 .b{color:var(--blue)}.hero p{color:var(--muted);margin:0}
.err{background:rgba(255,77,94,.2);border:2px solid var(--red);border-radius:12px;padding:8px 12px;font-weight:700}
.howto{max-width:540px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:13px;color:var(--muted);text-align:center}
.howto b{display:block;font:700 22px var(--display);color:var(--text)}
.invite{display:flex;gap:8px}.invite input{font-size:14px}
.deadline{font:700 15px var(--display)}.deadline .rel{color:var(--accent)}
/* lobby */
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.seat{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.seat .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:var(--c)}
.seat .nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seat .sub{font-size:12px;color:var(--muted)}
.seat.me{outline:2px solid var(--accent)}.seat.ready{border-color:var(--ok)}.seat.empty{border-style:dashed;color:var(--muted);justify-content:center}
.chip{font:700 11px var(--display);padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.4px}
.chip.red{background:var(--red);color:#fff}.chip.blue{background:var(--blue);color:#fff}.chip.ok{background:var(--ok);color:var(--ink)}.chip.ai{background:#c9b6ff;color:var(--ink)}
/* game layout */
.game{display:grid;gap:14px}
@media (min-width:1000px){.game{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.scorebar{display:flex;gap:10px;align-items:stretch}
.team{flex:1;border-radius:16px;padding:10px 12px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}
.team.red{background:linear-gradient(135deg,var(--red),#c2253a)}.team.blue{background:linear-gradient(135deg,var(--blue),#1f5fd1)}
.team .n{font:700 30px var(--display);line-height:1}.team .lbl{font:600 13px var(--display);opacity:.9}
.team.active{box-shadow:0 0 0 3px var(--accent),0 10px 30px rgba(0,0,0,.35)}
.team .who{font-size:12px;opacity:.95;max-width:65%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,1.1vw,10px);margin-top:12px}
.tile{position:relative;aspect-ratio:1.55;border:0;border-radius:clamp(8px,1.4vw,14px);background:var(--tile);color:var(--tileText);
  font:700 clamp(11px,1.65vw,19px)/1.05 var(--display);letter-spacing:.3px;text-transform:uppercase;display:grid;place-items:center;padding:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.28);cursor:default;word-break:break-word;hyphens:auto;text-align:center;transition:transform .12s}
.tile.can{cursor:pointer}.tile.can:hover{transform:translateY(-2px)}
.tile.mine{box-shadow:0 0 0 3px var(--accent),0 4px 0 rgba(0,0,0,.28)}
.tile .votes{position:absolute;top:3px;right:4px;font:700 10px var(--display);background:var(--accent);color:var(--ink);border-radius:999px;padding:1px 6px}
/* spymaster key: tinted unrevealed tiles */
.board.key .tile.k-red:not(.rev){background:var(--red2);box-shadow:inset 0 0 0 3px var(--red),0 4px 0 rgba(0,0,0,.28)}
.board.key .tile.k-blue:not(.rev){background:var(--blue2);box-shadow:inset 0 0 0 3px var(--blue),0 4px 0 rgba(0,0,0,.28)}
.board.key .tile.k-assassin:not(.rev){background:#3a3542;color:#fff;box-shadow:inset 0 0 0 3px #000,0 4px 0 rgba(0,0,0,.28)}
.board.key .tile.k-neutral:not(.rev){background:#efe8d8;color:#6d6655}
.tile.rev{color:#fff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.tile.rev.k-red{background:var(--red)}.tile.rev.k-blue{background:var(--blue)}.tile.rev.k-neutral{background:#b9ad92}.tile.rev.k-assassin{background:var(--assassin)}
.tile.rev span{opacity:.72;text-decoration:line-through;text-decoration-thickness:2px}
.tile.rev.k-assassin span{opacity:1;text-decoration:none}
.tile.rev::after{content:attr(data-icon);position:absolute;bottom:3px;left:5px;font-size:clamp(10px,1.4vw,16px);opacity:.9}
.side{display:grid;gap:12px}
.turncard h2{font-size:20px}.clue{font:700 30px var(--display);letter-spacing:1px}.clue small{font-size:18px;color:var(--muted);margin-left:8px}
.tally{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px;font-size:14px}.tally li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.06)}
.tally b{font-family:var(--display)}
.roster{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14px}.roster h3{font-size:14px;margin:0 0 4px}
.roster ul{list-style:none;padding:0;margin:0}.roster li{display:flex;align-items:center;gap:6px;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log{list-style:none;padding:0;margin:0;max-height:220px;overflow:auto;display:grid;gap:4px;font-size:14px}
.log li{padding:4px 8px;border-left:3px solid var(--line)}.log li.lclue{border-color:var(--accent);font-weight:800}.log li.reveal.k-assassin{border-color:#000}
.log li.r{border-color:var(--red)}.log li.b{border-color:var(--blue)}.log time{color:var(--muted);font-size:12px;margin-right:6px}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;min-height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:700 14px var(--display);cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.msgs{list-style:none;padding:0;margin:0 0 8px;height:220px;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:14px}
.msgs li{padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06);max-width:92%}.msgs li.mine{align-self:flex-end;background:rgba(255,210,63,.15)}
.msgs .who{font-weight:800;margin-right:6px}
.chatform{display:flex;gap:6px}.chatform input{font-size:15px;padding:9px 12px}
.banner{text-align:center;padding:16px;border-radius:18px;color:#fff;font:700 24px var(--display)}.banner.red{background:var(--red)}.banner.blue{background:var(--blue)}.banner.none{background:#444}
details.host summary{cursor:pointer;font:700 15px var(--display)}details.host .row{margin-top:8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:16px}
.modal-card{max-width:420px;width:100%}.qr{background:#fff;border-radius:14px;padding:8px;width:200px;margin:8px auto}.code{font:700 34px var(--display);letter-spacing:6px;text-align:center}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none;z-index:60}
#toast.on{opacity:1}
/* theme skins */
html[data-theme=neon]{--bg:#06021a;--bg2:#160642;--card:#140b38;--card2:#21104f;--accent:#f5ff3b;--red:#ff2bd6;--blue:#00e0ff;--red2:#ffd0f6;--blue2:#c9faff;--muted:#a99fe0}
html[data-theme=neon] body{background:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(255,43,214,.06) 1px,transparent 1px) 0 0/32px 100%,radial-gradient(1200px 700px at 50% -10%,var(--bg2),var(--bg)) fixed}
html[data-theme=neon] h1,html[data-theme=neon] h2{text-shadow:0 0 12px rgba(0,224,255,.55)}
html[data-theme=haunted]{--bg:#0c0911;--bg2:#2a1636;--card:#21172b;--card2:#30223d;--accent:#ffb347;--red:#ff6a1a;--blue:#8a5cff;--red2:#ffe0cc;--blue2:#e4d9ff;--muted:#b9a8c9;--tile:#f3ead8}
html[data-theme=haunted] body{background:radial-gradient(900px 500px at 80% -10%,rgba(163,255,122,.12),transparent 60%),radial-gradient(1200px 700px at 20% 110%,rgba(255,122,26,.16),transparent 60%),linear-gradient(var(--bg2),var(--bg)) fixed}
html[data-theme=beach]{--bg:#05395a;--bg2:#0a7aa1;--card:#0c5577;--card2:#11698f;--accent:#ffd166;--red:#ff6b57;--blue:#1fb5c9;--red2:#ffe1db;--blue2:#d2f6fa;--muted:#c8eef5;--tile:#fff6e0}
html[data-theme=beach] body{background:radial-gradient(500px 300px at 85% 0,rgba(255,209,102,.45),transparent 70%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 70%,#04263d 100%) fixed}
html[data-theme=space]{--bg:#03040d;--bg2:#0d1438;--card:#0e1433;--card2:#17204a;--accent:#9ef0ff;--red:#ff5f7e;--blue:#6c7bff;--red2:#ffdbe3;--blue2:#dde0ff;--muted:#9fa9d6}
html[data-theme=space] body{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#cfe,transparent),radial-gradient(1px 1px at 85% 15%,#fff,transparent),radial-gradient(900px 600px at 50% -10%,var(--bg2),var(--bg)) fixed}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:600px){.tile{aspect-ratio:1.15;letter-spacing:0;padding:3px}.board{gap:5px}}

/* back to the hall: footer under every screen, in normal flow so it never covers the board */
.hall-foot{display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;padding:6px 16px calc(28px + env(safe-area-inset-bottom));max-width:1280px;margin:0 auto}
.back-hall{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:700 18px var(--display);letter-spacing:.3px;text-decoration:none;color:var(--text);
  background:linear-gradient(90deg,color-mix(in srgb,var(--red) 85%,#000),color-mix(in srgb,var(--blue) 85%,#000));
  border:2px solid rgba(255,255,255,.22);box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s}
.back-hall span{font-size:22px;line-height:1}
.back-hall:hover{transform:translateY(-2px)}
.back-hall:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.back-hall:focus-visible{outline:4px solid var(--accent);outline-offset:4px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.back-hall{transition:none}.back-hall:hover,.back-hall:active{transform:none}}

/* PHONE-FIT: board, score bar and panels fit 320-390px with no sideways scroll */
.game>*,.side>*{min-width:0}
.board{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{min-width:0;container-type:inline-size;overflow:hidden;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}
/* each word scales to its tile: --n is the longest piece of the word (app.js wordSpan); 9+ letter words carry one soft hyphen and may take two lines, never a mid-letter break */
.tile span{display:block;max-width:100%;font-size:clamp(8px,calc((100cqw - 4px) / (var(--n) * .66)),clamp(12px,3.3vw,19px));line-height:1.1;
  overflow-wrap:normal;word-break:normal;hyphens:manual;-webkit-hyphens:manual;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.scorebar{min-width:0}.team{min-width:0}.team>div:first-child{min-width:0}
@media (max-width:420px){
  main{padding-left:10px;padding-right:10px}
  .board{gap:4px}
  .tile{aspect-ratio:1.15;padding:3px 1px;letter-spacing:0;border-radius:8px}
  .team{padding:8px 10px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}.team .n{font-size:26px}.team .lbl{font-size:12px}.team .who{max-width:100%;text-align:left}
  .roster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .card{padding:14px}
}
@media (max-width:360px){.roster{grid-template-columns:minmax(0,1fr)}}