:root{
  --bg:#274d1d; --bg2:#1d3a15; --card:#2f5622; --line:#5d8a43;
  --gold:#f5b921; --gold2:#ffd964; --ink:#fdf6e3; --dim:#d9e2b8;
  --good:#3ddc84; --bad:#ff6b6b; --rock:#8d99a6;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#4e8f2f,var(--bg));color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,"Noto Sans Ethiopic",sans-serif;min-height:100vh}
#app{max-width:560px;margin:0 auto;padding:10px 12px 30px}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0 10px}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:46px;height:46px}
h1{font-size:21px;margin:0;color:var(--gold2);letter-spacing:.3px}
.sub{font-size:12px;color:var(--dim)}
.thousand-badge{display:inline-block;margin:2px 0;font-size:13px;font-weight:900;letter-spacing:3px;color:#241300;
  background:linear-gradient(180deg,var(--gold2),var(--gold));border-radius:6px;padding:1px 10px;box-shadow:0 0 12px #f5b92188}
.head-right{display:flex;gap:8px;align-items:center}
.balance-box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;text-align:right}
.bal-label{display:block;font-size:10px;color:var(--dim)}
#balance{font-weight:800;font-size:16px;color:var(--gold2)}
.badge{display:inline-block;font-size:10px;background:#4e8f2f;color:#fff;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.badge.real{background:#0f766e}
button{font:inherit;cursor:pointer;border:0;border-radius:10px}
button:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding:6px 10px;font-size:13px}
.ghost.on{border-color:var(--gold);color:var(--gold2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.card h2{margin:0 0 10px;font-size:15px;color:var(--gold2)}
/* Stage: cartoon gold-mine scene behind the board */
.stage-card{position:relative;border:2px solid #6b4a1f;border-radius:16px;padding:12px;margin-top:4px;overflow:hidden;
  background:linear-gradient(180deg,#87c5eb 0 12%,#79b34a 12% 20%,#8d99a6 20% 100%);box-shadow:inset 0 0 40px #00000044}
.scene{position:absolute;inset:0;pointer-events:none;opacity:.55}
.scene .hill{position:absolute;left:0;right:0;top:9%;height:12%;background:#4e8f2f;border-radius:0 0 50% 50%}
.scene .rock{position:absolute;left:0;right:0;top:20%;bottom:0;background:
  linear-gradient(115deg,transparent 46%,#f5b92155 47%,transparent 49%),
  linear-gradient(65deg,transparent 60%,#f5b92144 61%,transparent 63%),#8d99a6}
.scene .mine{position:absolute;left:50%;top:56%;width:64px;height:74px;transform:translateX(-50%);
  background:#2b2b2b;border:5px solid #6b4a1f;border-bottom:0;border-radius:34px 34px 0 0}
.scene .hut{position:absolute;left:6%;top:26%;width:44px;height:32px;background:#a9805a;border:2px solid #6b4a1f}
.scene .hut::after{content:"";position:absolute;left:16px;top:10px;width:12px;height:12px;background:#ffd964;box-shadow:0 0 12px #ffd964}
.scene .fall{position:absolute;right:0;top:20%;width:16px;bottom:0;background:linear-gradient(180deg,#bfe8ff,#5aa7d6);opacity:.8}
.fs-banner{position:relative;display:flex;gap:10px;align-items:center;justify-content:center;background:#7a4d00;border:1px solid var(--gold);
  border-radius:10px;padding:6px 10px;font-weight:700;margin-bottom:10px;z-index:2}
.fs-banner.hidden{display:none}
.fs-mult{color:var(--gold2)}
.ways-plaque{position:relative;z-index:2;margin:0 auto 8px;width:fit-content;background:#111;color:var(--gold2);
  border:2px solid var(--gold);border-radius:10px;padding:4px 18px;font-weight:900;letter-spacing:2px;text-align:center}
.ways-plaque span{display:block;font-size:10px;color:#eee;letter-spacing:3px}
.ways-plaque b{font-size:19px}
.board-wrap{position:relative;z-index:2;background:#00000033;border-radius:12px;padding:6px}
.cart-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:5px}
.cart-empty{aspect-ratio:1/1.05}
.grid{display:flex;gap:5px;align-items:flex-start}
.col{flex:1;display:flex;flex-direction:column;gap:5px;background:#5b667066;border:1px solid #6b4a1f;border-radius:10px;padding:4px;min-height:52px}
.cell{aspect-ratio:1/1.05;background:#eef2f5;border:1px solid #9aa7b1;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:clamp(16px,5.2vw,26px);font-weight:800;color:#274b73;
  transition:transform .12s, box-shadow .12s}
.cell.win{box-shadow:0 0 0 2px var(--gold),0 0 14px #f5b921aa;transform:scale(1.06);background:#fff3c4}
.cell.scatter{background:linear-gradient(180deg,#ffd964,#d99a00);border-color:#fff0b0;color:#5c3d00;text-shadow:0 1px 0 #fff8}
.cell.wild{background:#fde8e0;border-color:#e74c3c}
.cart-row .cell{background:#f6d9c8;border-color:#b03a2e}
.bottom-bar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#111;color:#fff;border-radius:10px;padding:7px 12px;margin-top:8px;font-size:14px}
.bb-cell b{color:var(--gold2)}
.bb-label{display:block;font-size:9px;letter-spacing:2px;color:#bbb}
.bb-mid{font-weight:900;letter-spacing:1px;color:#fff;text-align:center}
.win-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:#000c;
  border:2px solid var(--gold);color:var(--gold2);font-weight:900;font-size:26px;border-radius:14px;
  padding:12px 22px;text-align:center;z-index:5;pointer-events:none}
.win-banner.hidden{display:none}
.win-banner small{display:block;font-size:13px;color:var(--ink)}
.win-banner .tier-head{font-size:15px;letter-spacing:2px;color:#fff;margin-bottom:2px}
.win-banner.tier-big{box-shadow:0 0 22px #f5b92166}
.win-banner.tier-mega{border-color:#ff9f1c;font-size:30px;box-shadow:0 0 30px #ff9f1c88}
.win-banner.tier-epic{border-color:#ff4ecd;font-size:34px;box-shadow:0 0 38px #ff4ecd99}
.win-lines{position:relative;z-index:2;min-height:20px;margin-top:8px;text-align:center}
.win-line{color:#3d2b00;font-weight:700;font-size:13.5px;letter-spacing:.4px;padding:1px 0;text-shadow:0 1px 0 #fff7}
.controls .bet-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--bg2);border:1px solid var(--line);color:var(--ink);padding:6px 10px;border-radius:999px;font-weight:700}
.chip.on{border-color:var(--gold);color:var(--gold2)}
.bet-input{display:flex;gap:4px;align-items:center}
.bet-input button{width:32px;height:32px;background:var(--bg2);color:var(--ink);border:1px solid var(--line);font-size:18px}
.bet-input input{width:70px;padding:7px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);text-align:center;font-weight:700}
.spin-btn{width:100%;margin-top:12px;padding:15px;font-size:19px;font-weight:900;color:#241300;
  background:linear-gradient(180deg,var(--gold2),var(--gold));border-radius:12px;box-shadow:0 4px 0 #9a6b00}
.spin-btn:disabled{opacity:.55;box-shadow:none}
.quick-row{display:flex;gap:8px;margin-top:10px;justify-content:space-between}
.msg{min-height:20px;margin-top:8px;font-size:14px;color:var(--gold2);text-align:center}
.msg.err{color:var(--bad)}
.paytable{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;font-size:13px}
.paytable .prow{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.paytable .prow b{font-size:16px}
.note{color:var(--dim);font-size:12.5px;line-height:1.5}
.history{list-style:none;margin:0;padding:0;font-size:13.5px}
.history li{display:flex;justify-content:space-between;padding:5px 2px;border-bottom:1px solid var(--line)}
.history .win{color:var(--good);font-weight:700}
.fair-grid{display:grid;gap:8px;font-size:13px}
.fair-grid code{word-break:break-all;color:#a5e88a;font-size:11.5px;display:block}
.seed-edit{display:flex;gap:6px}
.seed-edit input{flex:1;padding:6px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.fair-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.fair-actions input{width:110px;padding:6px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.verify-out{white-space:pre-wrap;font-size:11.5px;color:var(--dim);max-height:180px;overflow:auto}
footer{text-align:center;color:var(--dim);font-size:12px;margin-top:14px}
.hidden{display:none!important}
@media (max-width:420px){ .cell{font-size:15px} h1{font-size:18px} .ways-plaque b{font-size:16px} }