*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0f14;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#f4f1e8;
  overscroll-behavior:none;touch-action:none;user-select:none}
#stage,#stage canvas{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;display:grid;place-items:center;z-index:50;
  background:radial-gradient(120% 90% at 50% 30%,#232838,#0d0f14 70%);transition:opacity .5s}
#boot.gone{opacity:0;pointer-events:none}
.bootcard{text-align:center;padding:2rem}
.bootcard h1{margin:0;font-size:clamp(2.6rem,11vw,5rem);letter-spacing:.06em;line-height:1;
  color:#f4f1e8;text-shadow:0 4px 0 #e2762a,0 8px 22px #000}
.bootcard h1 span{color:#e2762a;text-shadow:0 4px 0 #7a3a10,0 8px 22px #000}
.tag{margin:.6rem 0 1.6rem;opacity:.72;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem}
#bootbar{width:min(280px,60vw);height:8px;border-radius:99px;background:#2a3040;overflow:hidden;margin:0 auto}
#bootbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e2762a,#f2c14e);transition:width .25s}
#bootmsg{margin-top:.8rem;font-size:.76rem;opacity:.55;min-height:1.2em}

/* ---------- hud ---------- */
#ui{position:fixed;inset:0;z-index:20;pointer-events:none}
#ui[hidden]{display:none}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.8rem;
  padding:calc(env(safe-area-inset-top,0px) + .7rem) 1rem .7rem;
  background:linear-gradient(#0d0f14cc,#0d0f1400)}
#roomname{font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scoreline{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #000}
#scoreline span{opacity:.35;font-size:1rem}
#scoreUs{color:#f2c14e}#scoreThem{color:#7fb2e5}
#chips{display:flex;align-items:center;gap:.35rem;font-weight:700;font-variant-numeric:tabular-nums}
#chips i{width:14px;height:14px;border-radius:50%;background:#f2c14e;box-shadow:inset 0 -3px 0 #b8871f}

#toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);text-align:center;
  font-size:clamp(1.1rem,4.4vw,1.9rem);font-weight:700;letter-spacing:.02em;
  text-shadow:0 3px 0 #000,0 0 26px #000;opacity:0;transition:opacity .25s,transform .25s;
  padding:0 1rem;max-width:92vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
#toast small{display:block;font-size:.5em;font-weight:400;opacity:.75;letter-spacing:.1em;
  text-transform:uppercase;margin-top:.3em}

#prompt{position:absolute;left:50%;bottom:31%;transform:translateX(-50%);
  background:#0d0f14dd;border:2px solid #e2762a;border-radius:12px;padding:.55rem 1rem;
  font-size:.85rem;letter-spacing:.06em;white-space:nowrap;box-shadow:0 6px 0 #00000055}
#prompt[hidden]{display:none}
#prompt b{color:#f2c14e}

/* ---------- controls ---------- */
#stick{position:absolute;left:0;bottom:0;width:50%;height:58%;pointer-events:auto}
#stick i{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:3px solid #ffffff2e;background:#ffffff12;opacity:0;transition:opacity .15s;
  display:grid;place-items:center}
#stick i::after{content:"";width:46px;height:46px;border-radius:50%;background:#f4f1e8bb;
  transform:translate(var(--dx,0px),var(--dy,0px))}
#stick.on i{opacity:1}

#cues{position:absolute;right:calc(env(safe-area-inset-right,0px) + .9rem);
  bottom:calc(env(safe-area-inset-bottom,0px) + 1.1rem);
  display:grid;grid-template-columns:repeat(2,84px);grid-auto-rows:84px;gap:10px;pointer-events:none}
.cue{pointer-events:auto;border:none;border-radius:50%;background:#1b2130ee;color:#f4f1e8;
  border:3px solid #ffffff26;box-shadow:0 5px 0 #00000066;display:grid;place-items:center;
  font:700 .68rem/1.1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:2px;
  transition:transform .08s,background .12s,border-color .12s;position:relative;overflow:hidden}
.cue:active,.cue.held{transform:translateY(4px);box-shadow:0 1px 0 #00000066}
.cue.hot{background:#e2762aee;border-color:#f7d38a}
.cue .ico{font-size:1.5rem;line-height:1;margin-bottom:2px}
.cue .chg{position:absolute;left:0;bottom:0;width:100%;height:0;background:#f2c14e66;pointer-events:none}
.cue[data-slot="1"]{grid-column:2;grid-row:2}
.cue[data-slot="2"]{grid-column:2;grid-row:1}
.cue[data-slot="3"]{grid-column:1;grid-row:2}
.cue[data-slot="4"]{grid-column:1;grid-row:1}

#menuBtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + .55rem);right:.7rem;
  pointer-events:auto;width:38px;height:38px;border-radius:10px;border:2px solid #ffffff22;
  background:#1b2130cc;color:#f4f1e8;font-size:1.05rem;line-height:1}

/* ---------- panel ---------- */
#panel{position:absolute;inset:0;background:#080a0ed9;display:grid;place-items:center;
  pointer-events:auto;padding:1rem;z-index:30;overflow:auto}
#panel[hidden]{display:none}
.panelinner{position:relative;background:#171b26;border:3px solid #2f3852;border-radius:16px;
  width:min(560px,100%);max-height:86vh;overflow:auto;padding:1.4rem;box-shadow:0 18px 0 #00000055}
.panelinner .close{position:absolute;top:.5rem;right:.7rem;background:none;border:none;
  color:#f4f1e8;font-size:1.7rem;line-height:1;opacity:.6}
.panelinner h2{margin:.1rem 0 .2rem;font-size:1.25rem;letter-spacing:.04em}
.panelinner h3{margin:1.2rem 0 .5rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.55;border-bottom:1px solid #ffffff14;padding-bottom:.35rem}
.panelinner p{margin:.4rem 0;font-size:.86rem;line-height:1.5;opacity:.82}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.6rem}
.item{background:#1f2534;border:2px solid #313b54;border-radius:12px;padding:.5rem .3rem;
  text-align:center;font-size:.66rem;letter-spacing:.04em;cursor:pointer;position:relative}
.item.on{border-color:#e2762a;background:#2a2318}
.item.locked{opacity:.5}
.item canvas{width:52px;height:52px;display:block;margin:0 auto .3rem;image-rendering:auto}
.item .cost{display:block;color:#f2c14e;font-weight:700;margin-top:.15rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.btn{flex:1;min-width:120px;background:#e2762a;color:#1a1206;border:none;border-radius:10px;
  padding:.7rem .9rem;font:700 .82rem inherit;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 0 #8b4413;cursor:pointer}
.btn.ghost{background:#232a3a;color:#f4f1e8;box-shadow:0 4px 0 #131824}
.btn:disabled{opacity:.45;box-shadow:none}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid #313b54;cursor:pointer}
.sw.on{border-color:#f4f1e8}
table.stats{width:100%;border-collapse:collapse;font-size:.78rem}
table.stats td{padding:.22rem 0;opacity:.85}
table.stats td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#f2c14e}
.pips{letter-spacing:2px;color:#e2762a}
.dim{opacity:.5}

/* ---------- roster strip: who is on which team, at a glance ---------- */
#roster{position:absolute;top:calc(env(safe-area-inset-top,0px) + 3rem);left:50%;
  transform:translateX(-50%);display:flex;align-items:center;gap:.55rem;
  background:#0d0f14b8;border:1px solid #ffffff18;border-radius:99px;padding:.3rem .6rem;
  backdrop-filter:blur(3px);max-width:96vw}
#roster .side{display:flex;gap:.3rem;align-items:center}
#roster .vs{font-size:.6rem;letter-spacing:.14em;opacity:.45;padding:0 .15rem}
#roster .who{position:relative;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--tc,#888);overflow:hidden;background:#1b2130;
  transition:transform .15s,box-shadow .15s;flex:none}
#roster .who canvas{width:100%;height:100%;display:block}
#roster .who.you{border-width:3px;border-color:#f2c14e;transform:scale(1.14)}
#roster .who.ball{box-shadow:0 0 0 3px #fff0c0,0 0 12px #f2c14e}
#roster .who.out{opacity:.28;filter:grayscale(1)}
#roster .who i{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font-style:normal;
  font-size:8px;letter-spacing:.04em;background:#0d0f14cc;color:#f4f1e8;line-height:10px}
.tc{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
#scoreline{gap:.4rem}

/* ---------- cue buttons: bigger, and keyed on desktop ---------- */
.cue kbd{position:absolute;top:4px;right:6px;font:600 9px/1 monospace;opacity:.5;
  background:#0006;border-radius:3px;padding:1px 3px}
body.touch .cue kbd{display:none}
#cues{grid-template-columns:repeat(2,88px);grid-auto-rows:88px}
.cue{font-size:.66rem}
.cue .ico{font-size:1.7rem}

/* ---------- first-run hint ---------- */
#hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);
  transform:translateX(-50%);display:flex;gap:1.4rem;align-items:center;
  background:#0d0f14cc;border:1px solid #ffffff18;border-radius:12px;padding:.5rem .9rem;
  font-size:.7rem;letter-spacing:.06em;opacity:.9;transition:opacity .6s;pointer-events:none}
#hint[hidden]{display:none}
#hint.fade{opacity:0}
#hint b{color:#f2c14e}