/* Capobi Keno – star board under the moonlit meadow */
.hint{color:var(--muted);font-weight:400;font-size:.85em;text-transform:none;letter-spacing:0}
.top-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
/* the star machine: a glass moon globe with tumbling balls and the unicorn */
.machine{position:relative;width:200px;height:200px;justify-self:center}
.globe{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#fff9 0,#fff2 18%,transparent 40%),radial-gradient(circle at 50% 60%,#3b2a86,#140b38 72%);
  border:4px solid #e8c26a;box-shadow:0 0 0 6px #6b441155,0 0 40px #ffe08355,inset 0 -18px 30px #0008}
.globe .unicorn{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:44px;filter:drop-shadow(0 0 10px #ff9ad5)}
.gb{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:inset -4px -5px 8px #0006,0 2px 6px #0007}
.gb.b1{background:#ff5fa2;left:30px;top:40px}.gb.b2{background:#ffc83d;left:120px;top:30px}.gb.b3{background:#35d399;left:70px;top:95px}
.gb.b4{background:#a78bfa;left:135px;top:100px}.gb.b5{background:#60a5fa;left:40px;top:120px}.gb.b6{background:#ffc83d;left:95px;top:50px}
.machine.running .gb{animation:tumble .9s ease-in-out infinite alternate}
.machine.running .gb.b2,.machine.running .gb.b4,.machine.running .gb.b6{animation-duration:.7s;animation-direction:alternate-reverse}
@keyframes tumble{0%{transform:translate(0,0)}25%{transform:translate(28px,-30px)}50%{transform:translate(-22px,24px)}75%{transform:translate(18px,34px)}100%{transform:translate(-30px,-18px)}}
.big-ball{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;font-weight:900;color:#1b1140;z-index:3;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8 45%,var(--bc,#ffc83d));box-shadow:0 0 0 4px #fff8,0 0 30px var(--bc,#ffc83d),inset 0 -8px 14px #0003}
.big-ball.pop{animation:ballpop .32s cubic-bezier(.2,1.6,.4,1)}
.big-ball.hit::after{content:'★';position:absolute;top:-12px;right:-10px;font-size:1.6rem;color:#ffe083;text-shadow:0 0 10px #ff5fa2}
@keyframes ballpop{0%{transform:translateY(60px) scale(.2);opacity:0}100%{transform:none;opacity:1}}
.status-line{font-size:1.35rem;font-weight:800;font-style:italic;color:var(--accent);letter-spacing:.02em}
.counters{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}
.counter{display:flex;flex-direction:column;background:#0e0828aa;border:1px solid var(--panel-b);border-radius:12px;padding:6px 12px;min-width:92px}
.counter strong{font-size:1.2rem}
.counter.hits strong{color:var(--accent)}
.tube{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;background:#0e082899;border:1px solid var(--panel-b);border-radius:14px;padding:8px}
.tslot{aspect-ratio:1;border-radius:50%;border:2px dashed #ffffff22;display:grid;place-items:center;font-weight:900;font-size:clamp(.7rem,1.4vw,1rem)}
.tslot.on{border:none;color:#1b1140;background:radial-gradient(circle at 35% 30%,#fff,var(--bc,#ffc83d));box-shadow:inset -2px -3px 5px #0004;animation:ballpop .3s}
.tslot.hit{box-shadow:0 0 0 3px #ffe083,0 0 12px #ffc83d}
.win-bar{margin:14px auto 8px;text-align:center;min-height:2.6em;font-size:1.05rem;display:flex;align-items:center;justify-content:center;flex-direction:column}
.win-bar .big{font-size:1.5rem;font-weight:900;color:var(--accent);text-shadow:0 0 18px #ffc83d88}
.win-bar .sub{font-size:.85rem;color:var(--muted)}
/* the board: 8 rows x 10, split after 40 */
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;padding:12px;border-radius:18px;max-width:760px;margin:0 auto;
  background:radial-gradient(600px 300px at 50% 0,#4b2c9a55,transparent),linear-gradient(160deg,#20124d,#140b38);border:1px solid #e8c26a66;box-shadow:inset 0 0 40px #0007}
.board .split{grid-column:1/-1;height:2px;margin:2px 0;background:linear-gradient(90deg,transparent,#e8c26a99,transparent)}
.cell{position:relative;aspect-ratio:1;border-radius:12px;border:1px solid #ffffff26;background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-weight:800;
  font-size:clamp(.8rem,1.8vw,1.15rem);cursor:pointer;display:grid;place-items:center;transition:transform .1s,background .2s,box-shadow .2s;padding:0}
.cell:hover:not(:disabled){background:rgba(255,255,255,.14)}
.cell:active:not(:disabled){transform:scale(.94)}
.cell.picked{background:radial-gradient(circle at 50% 40%,#ffe083,#ffb020 70%);color:#2a1600;border-color:#fff8;box-shadow:0 0 14px #ffc83d88}
.cell.picked::before{content:'★';position:absolute;top:1px;left:4px;font-size:.6em;opacity:.7}
.cell.drawn{background:radial-gradient(circle at 50% 40%,#8b6cf0,#4c2fa8 75%);border-color:#c4b5fd88}
.cell.drawn.picked{background:radial-gradient(circle at 50% 40%,#fff3c4,#ff5fa2 80%);color:#2a0016;box-shadow:0 0 0 3px #ffe083,0 0 22px #ff5fa2;animation:hitburst .5s}
.cell.drawn.picked::after{content:'';position:absolute;inset:-6px;border-radius:14px;border:2px solid #ffe083;animation:ring .7s ease-out forwards}
@keyframes hitburst{40%{transform:scale(1.18)}}
@keyframes ring{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.35)}}
.cell.dim{opacity:.55}
body.busy .cell{cursor:wait}
/* controls */
.controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;justify-content:center;margin-top:16px}
.ctrl{display:flex;flex-direction:column;gap:5px}
.picks-ctrl strong{font-size:1.2rem;color:var(--accent)}
.qp{display:flex;gap:6px;align-items:center}
.qp select{padding:9px 8px}
.entry-row{display:flex;gap:6px;align-items:center}
.btn.step{width:38px;height:38px;padding:0;font-size:1.2rem;border-radius:50%}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{width:44px;height:44px;border-radius:50%;border:4px dashed #fffc;color:#fff;font:inherit;font-weight:900;font-size:.85rem;cursor:pointer;box-shadow:0 4px 10px #0008;transition:transform .12s;padding:0}
.chip[aria-checked=true]{transform:translateY(-5px) scale(1.08);box-shadow:0 0 0 3px var(--accent),0 8px 18px #000a}
.chip.custom{outline:2px dashed var(--accent)}
.c2{background:#8b8b9e}.c10{background:#2563eb}.c20{background:#16a34a}.c50{background:#d97706}.c100{background:#111;color:#ffe083}.c200{background:#9d174d;color:#ffe083}
.total strong{font-size:1.2rem;color:var(--accent)}
.play-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.fast{font-size:.8rem;color:var(--muted);display:flex;gap:5px;align-items:center;cursor:pointer}
.limits{text-align:center;margin:8px 0 0}
/* side */
.ptable{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:6px}
.ptable th,.ptable td{padding:5px 6px;border-bottom:1px solid #ffffff14;text-align:right;white-space:nowrap}
.ptable th:first-child,.ptable td:first-child{text-align:left}
.ptable th{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.ptable td.m{color:var(--accent);font-weight:800}
.ptable tr.lit td{background:#ffc83d26}
.ptable tr.lit td:first-child{box-shadow:inset 3px 0 var(--accent)}
.ptable .v{display:block;font-size:.7rem;color:var(--muted);font-weight:400}
.hotcold{display:grid;gap:6px}
.nums{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:.78rem}
.nums .lbl{width:44px;color:var(--muted)}
.mini{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.72rem;color:#1b1140;background:radial-gradient(circle at 35% 30%,#fff,var(--bc,#ffc83d))}
.mini.cold{filter:saturate(.3) brightness(.85)}
table.matrix{width:100%;border-collapse:collapse;font-size:.8rem}
table.matrix th,table.matrix td{padding:4px 6px;border-bottom:1px solid #ffffff14;text-align:right;white-space:nowrap}
table.matrix th:first-child,table.matrix td:first-child{text-align:left}
table.matrix td.ret{color:var(--accent);font-weight:800}
.matrix-wrap{overflow:auto}
@media (max-width:760px){
  .top-row{grid-template-columns:120px minmax(0,1fr);gap:10px}
  .machine{width:120px;height:120px}
  .globe .unicorn{font-size:28px;bottom:4px}
  .gb{width:16px;height:16px}
  .gb.b1{left:18px;top:24px}.gb.b2{left:72px;top:18px}.gb.b3{left:42px;top:56px}.gb.b4{left:82px;top:60px}.gb.b5{left:22px;top:70px}.gb.b6{left:56px;top:30px}
  .big-ball{width:62px;height:62px;margin:-31px 0 0 -31px;font-size:1.6rem}
  .status-line{font-size:1.05rem}
  .counter{min-width:0;padding:4px 8px}.counter strong{font-size:1rem}
  .tube{gap:3px;padding:5px}
  .board{gap:4px;padding:8px;border-radius:14px}
  .cell{border-radius:9px}
  .controls{gap:12px}
  .chip{width:38px;height:38px;font-size:.78rem;border-width:3px}
}
/* result banner over the draw machine (js/result-banner.js + css/result-banner.css) */
.top-row{position:relative}
.top-row .rb-live{width:min(96%,460px)}

/* PLAY next to the draw machine (like Roulette's SPIN beside the wheel) + docked PLAY bar on phones */
.top-row{grid-template-columns:200px minmax(0,1fr) auto}
.play-top{display:flex;flex-direction:column;align-items:center;gap:6px;justify-self:center}
.play-top .btn.spin{width:118px;height:118px;font-size:1.6rem}
.play-top .btn.spin.stop{font-size:1.25rem}
.play-cost{font-size:.8rem;color:var(--muted);font-weight:700;white-space:nowrap}
.play-dock{display:none}
@media (max-width:760px){
  .top-row{grid-template-columns:120px minmax(0,1fr)}
  .play-top{grid-column:1/-1;flex-direction:row;gap:12px;width:100%;justify-content:center}
  .play-top .btn.spin{width:auto;height:52px;min-width:190px;border-radius:26px;font-size:1.3rem}
  body.play-docked .play-dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:12px;align-items:center;justify-content:center;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#140b38f2;border-top:1px solid #e8c26a66;box-shadow:0 -8px 24px #0009}
  .play-dock .btn.spin{width:auto;height:50px;min-width:180px;border-radius:25px;font-size:1.25rem}
  body.play-docked{padding-bottom:72px}
}