/* Study Games kit — shared look for Arcade Academic, Monarch Methodology and Fib (site tokens). */
:root{--bg:#0d0f14;--bg2:#12151c;--surface:#171b24;--border:#252b38;--text:#e8eaf0;--muted:#8b93a7;--accent:#f6a62b;--accent2:#4fc3f7;--accent3:#a78bfa;--good:#4ade80;--bad:#f87171}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline:2px solid var(--accent2);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;width:100%;font-size:1.05rem}
a{color:var(--accent2)}
.btn{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.65rem 1rem;font-weight:700}
.btn:hover{border-color:#3a4254}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#1a1205;border-color:var(--accent)}
.btn-good{background:var(--good);color:#06240f;border-color:var(--good)}
.btn-bad{background:var(--bad);color:#2a0606;border-color:var(--bad)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--bad);min-height:1.3em;font-size:.95rem}
h1{font-family:'Syne',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.01em;line-height:1.15}
h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem}

/* ---------- host bar ---------- */
.bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;flex-wrap:wrap}
.bar .brand{font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.bar .brand small{font-family:'DM Sans';font-weight:400;color:var(--muted);font-size:.85rem;margin-left:.5rem}
.bar .spacer{flex:1}
.pill{font-family:'DM Mono',monospace;font-size:.85rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:.25rem .7rem;white-space:nowrap}
.pill b{color:var(--accent);font-weight:500}
.pill.on{color:var(--good);border-color:rgba(74,222,128,.45)}

/* ---------- host lobby ---------- */
.lobby{flex:1;display:grid;grid-template-columns:minmax(240px,320px) minmax(300px,1fr) minmax(280px,1fr);gap:1.3rem;padding:1.6rem;overflow:auto}
@media (max-width:980px){.lobby{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.3rem;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.joinbox{text-align:center;container-type:inline-size}
.joinbox .qr{width:100%;max-width:240px;aspect-ratio:1;margin:0 auto;background:#fff;border-radius:12px;padding:8px}
.joinbox .qr img{width:100%;height:100%;display:block}
.joinbox .code{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:.08em;margin-right:-.08em;white-space:nowrap;overflow:hidden;font-size:3rem;line-height:1.1;color:var(--accent)}
.joinbox .url{font-family:'DM Mono',monospace;font-size:.78rem;color:var(--muted);word-break:break-all}
.drop{border:2px dashed var(--border);border-radius:14px;padding:1.2rem;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s;display:block}
.drop.over{border-color:var(--accent2);background:rgba(79,195,247,.06)}
.drop strong{color:var(--text)}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label,.lbl{font-size:.85rem;color:var(--muted)}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;flex-wrap:wrap}
.seg button{flex:1;background:var(--bg2);border:0;padding:.55rem .6rem;font-size:.92rem;border-right:1px solid var(--border)}
.seg button:last-child{border-right:0}
.seg button.on{background:rgba(246,166,43,.15);color:var(--accent);font-weight:700}
.hint{font-size:.85rem;color:var(--muted);line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:flex;align-items:center;gap:.4rem;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:.3rem .45rem .3rem .7rem;font-size:.92rem}
.chip.off{opacity:.5}
.chip .x{background:none;border:0;color:var(--muted);font-size:1rem;line-height:1;padding:0 .25rem}
.chip .x:hover{color:var(--bad)}

/* ---------- timer bar ---------- */
.timer{height:6px;background:var(--border);border-radius:99px;overflow:hidden;flex-shrink:0}
.timer i{display:block;height:100%;background:var(--accent);transform-origin:left;width:100%}

/* ---------- remote pairing modal (host) ---------- */
.kit-modal{position:fixed;inset:0;background:rgba(5,7,10,.78);display:grid;place-items:center;z-index:500;padding:1rem}
.kit-modal .box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.5rem;max-width:380px;width:100%;text-align:center;display:flex;flex-direction:column;gap:.8rem}
.kit-modal .qr{background:#fff;border-radius:12px;padding:8px;width:240px;height:240px;margin:0 auto}
.kit-modal .qr img{width:100%;height:100%;display:block}

/* ---------- phone screens ---------- */
.screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto;padding:1rem 1.1rem 1.3rem;gap:.8rem}
.center{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.big{font-family:'Syne',sans-serif;font-weight:800;font-size:3.2rem;line-height:1}
.mebar{display:flex;align-items:center;gap:.55rem;padding:.45rem .9rem;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;padding-top:calc(.45rem + env(safe-area-inset-top))}
.mebar .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.mebar .stats{margin-left:auto;display:flex;gap:.4rem;align-items:center}
.st{font-family:'DM Mono',monospace;font-size:.85rem;border:1px solid var(--border);border-radius:999px;padding:.12rem .5rem;white-space:nowrap}
.pickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.pick{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.4rem 0;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.6rem;gap:.1rem}
.pick small{font-size:.68rem;color:var(--muted)}
.pick.on{border-color:var(--accent);background:rgba(246,166,43,.1)}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:.4rem}
.sw{border-radius:50%;aspect-ratio:1;border:3px solid transparent}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--bg) inset}

/* ---------- dice (same look + feel as the Study Gameboard die) ---------- */
.arena{position:relative;flex:1;min-height:180px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at 50% 60%,#1a2130,#10141c);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.die{position:absolute;left:0;top:0;width:var(--ds,84px);height:var(--ds,84px);border-radius:18px;background:#f7f3e8;color:#12151c;box-shadow:0 6px 0 #cfc7b2,0 10px 22px rgba(0,0,0,.45);display:grid;place-items:center;font-family:'Syne',sans-serif;font-weight:800;font-size:calc(var(--ds,84px) * .4);user-select:none;will-change:transform;transition:box-shadow .15s}
.die .sides{position:absolute;right:7px;bottom:4px;font-family:'DM Mono',monospace;font-size:.66rem;font-weight:500;color:#6b6f7a}
.die.held{box-shadow:0 6px 0 #b7791f,0 0 0 4px var(--accent),0 10px 22px rgba(0,0,0,.45)}
.die.held::after{content:'KEEP';position:absolute;top:-1.35rem;left:50%;transform:translateX(-50%);font:700 .7rem 'DM Mono',monospace;color:var(--accent)}
.pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:70%;height:70%;gap:6%}
.pips i{border-radius:50%;background:transparent}
.pips i.on{background:#12151c}
.arena-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:var(--muted);font-size:.92rem;pointer-events:none}
.result-line{text-align:center;font-size:1.1rem;min-height:1.5em}
.result-line b{color:var(--accent);font-family:'Syne',sans-serif;font-size:1.35rem}

/* ---------- rotate prompt ---------- */
.rotate{position:fixed;inset:0;background:var(--bg);z-index:400;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem}
.rotate .ph{width:70px;height:112px;border:4px solid var(--text);border-radius:14px;animation:rot 1.8s ease-in-out infinite}
@keyframes rot{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotate .ph{animation:none;transform:rotate(-90deg)}}