/* TEST build — v2 design standard applied to the Olympus Gates client.
   Icon adherence: deep purple starfield, golden gates + marble + lightning,
   laurel and coin gold. Scene art: assets/scene.jpg (painted gates). */
:root{
  --bg:#160f2e; --bg2:#241647; --card:rgba(30,17,66,.92); --line:#4b3485;
  --gold:#f5b921; --gold2:#ffd964; --ink:#f6efff; --dim:#c9b8f2;
  --good:#3ddc84; --bad:#ff6b6b; --bolt:#7df9ff;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);min-height:100vh;
  font-family:system-ui,"Segoe UI",Roboto,"Noto Sans Ethiopic",sans-serif;
  background:#160f2e url("assets/scene.jpg") center top / cover fixed no-repeat}
#app{max-width:560px;margin:0 auto;padding:6px 12px 30px;
  background:linear-gradient(180deg,rgba(22,13,48,0) 0,rgba(22,13,48,.18) 340px,rgba(22,13,48,.55) 640px,rgba(22,13,48,.82))}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 0 4px}
.brand{display:flex;gap:9px;align-items:center}
.logo{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 2px #f5b92188,0 2px 8px #0009}
h1{font-size:19px;margin:0;line-height:1.05}
.gname{display:block;font-size:10.5px;letter-spacing:.8px;color:var(--dim);font-weight:700}color:var(--gold2);letter-spacing:.4px;text-shadow:0 2px 6px #000c}
.sub{font-size:10.5px;white-space:nowrap;color:var(--dim);text-shadow:0 1px 4px #000c}
.tagline-row{text-align:right;padding:0 2px 3px;margin-top:-2px}
.head-right{display:flex;gap:6px;align-items:center;flex-shrink:0}
.balance-box{background:rgba(24,13,54,.88);border:1px solid var(--gold);border-radius:10px;padding:4px 8px;text-align:right;box-shadow:0 2px 10px #0008}
.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:#5b21b6;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}
.ghost{background:rgba(23,11,54,.85);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:10px 14px;margin-top:8px}
.card h2{margin:0 0 10px;font-size:15px;color:var(--gold2)}

/* ---- stage: gates scene + banner + framed grid ---- */
.stage-card{position:relative;border:1px solid #6d54b8;border-radius:16px;padding:6px 8px 8px;margin-top:2px;overflow:hidden;
  background:linear-gradient(180deg,rgba(46,26,94,.34),rgba(29,17,64,.78) 55%,rgba(23,11,54,.92));
  box-shadow:0 6px 24px #000a, inset 0 0 0 1px #ffd96422}
.top-banner{min-height:19px;font-size:13px;text-align:center;font-weight:900;letter-spacing:1.6px;font-size:14px;color:var(--gold2);
  text-shadow:0 0 12px #f5b92166,0 2px 4px #000;transition:opacity .35s;padding:0 0 3px}
.top-banner.fade{opacity:0}
.fs-banner{display:flex;gap:10px;align-items:center;justify-content:center;border-radius:10px;padding:6px 10px;font-weight:800;margin-bottom:8px;
  background:linear-gradient(180deg,#7c3aed,#5b21b6);border:1px solid var(--gold);color:#fff;box-shadow:0 0 16px #7c3aed88}
.fs-banner.hidden{display:none}
.fs-mult{color:var(--gold2)}
.keystrip{height:7px;border-radius:4px;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M1 8 V1 H13 V5 H5 V8' fill='none' stroke='%23f5b921' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:18px 9px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:6px;border-radius:12px;position:relative;overflow:hidden}
  background:linear-gradient(180deg,#2b1660,#1a0c40);
  border:3px solid #d9a92c;
  box-shadow:0 0 0 2px #7a5200,0 0 0 5px #ffe9a8,0 0 0 7px #8a5f00,0 10px 30px #000c, inset 0 0 26px #00000088}
.cell{aspect-ratio:1/1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:clamp(20px,6vw,30px);position:relative;
  background:radial-gradient(120% 90% at 50% 0%,#3a2276,#1c0d44 70%);
  border:1px solid #523a96;box-shadow:inset 0 2px 3px #ffffff2b, inset 0 -6px 10px #00000055;
  transition:transform .12s, box-shadow .12s;will-change:transform}
.cell .orbval{position:absolute;bottom:1px;right:2px;font-size:11px;font-weight:900;color:#ffe9a8;background:#3b1470d9;
  border:1px solid var(--gold);border-radius:6px;padding:0 4px}
.cell.win{box-shadow:0 0 0 2px var(--gold),0 0 18px #f5b921cc, inset 0 0 12px #f5b92155;background:radial-gradient(120% 90% at 50% 0%,#5a34a8,#2c1666 70%);
  animation:winpop .5s ease}
@keyframes winpop{0%{transform:scale(1)}35%{transform:scale(1.13)}100%{transform:scale(1.05)}}
.cell.scatter{background:radial-gradient(120% 90% at 50% 0%,#274b8f,#12234d 70%);box-shadow:0 0 12px #4db8ff77, inset 0 2px 3px #ffffff2b}
.cell.orb{background:radial-gradient(120% 90% at 50% 0%,#3d2a7a,#170b36 70%)}
.cell.orb .tile-art{animation:orbpulse 1.6s ease-in-out infinite}
@keyframes orbpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.tile-art{width:86%;height:86%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px #000a)}
.win-banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:#000d;
  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}
.orb-tray{min-height:13px;margin-top:3px;font-size:14px;text-align:center;color:var(--bolt);font-weight:800;font-size:15px;text-shadow:0 0 10px #22d3ee88}
/* lightning reaction overlay */
.boltfx{position:absolute;top:2%;right:5%;width:64px;height:150px;pointer-events:none;opacity:0;z-index:4;
  background:linear-gradient(180deg,#f2fdff,#6fd3ff 55%,#0f7fe0);
  clip-path:polygon(58% 0,14% 46%,40% 46%,26% 100%,84% 38%,56% 38%,78% 0);
  filter:drop-shadow(0 0 14px #6fd3ff) drop-shadow(0 0 34px #4db8ff)}
.stage-card.flash .boltfx{animation:boltflash .55s ease-out}
.stage-card.flash{animation:stagepulse .55s ease-out}
@keyframes boltflash{0%{opacity:0}12%{opacity:1}30%{opacity:.15}48%{opacity:.95}100%{opacity:0}}
@keyframes stagepulse{0%{filter:brightness(1)}18%{filter:brightness(1.22)}100%{filter:brightness(1)}}

/* ---- controls: dossier-style action row ---- */
.controls .bet-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between}
.chips{display:flex;gap:5px;flex-wrap:nowrap;order:3;flex:1 1 100%;justify-content:space-between}
.chip{background:#170b36;border:1px solid var(--line);color:var(--ink);padding:5px 9px;font-size:13.5px;border-radius:999px;font-weight:700}
.chip.on{border-color:var(--gold);color:var(--gold2);background:#2c1660}
.bet-input{display:flex;gap:4px;align-items:center}
.bet-input button{width:32px;height:32px;background:#170b36;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:#170b36;color:var(--ink);text-align:center;font-weight:700}
.spin-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:7px}
.spin-btn{width:80px;height:80px;border-radius:50%;flex:0 0 auto;color:#3a2400;
  background:radial-gradient(120% 120% at 50% 18%,#fff3b0,#ffd964 45%,#f5a623 80%,#d98200);
  border:3px solid #fff0b3;box-shadow:0 0 0 3px #8a5f00,0 6px 0 #7a5200,0 12px 26px #000b, inset 0 -8px 14px #b96a0088;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}
.spin-btn .spin-ico{font-size:25px;font-weight:900;transform:translateY(2px)}
.spin-btn .spin-txt{font-size:14px;font-weight:900;letter-spacing:1.5px}
.spin-btn:active{transform:translateY(3px);box-shadow:0 0 0 3px #8a5f00,0 3px 0 #7a5200,0 8px 18px #000b}
.spin-btn:disabled{opacity:.55;box-shadow:0 0 0 3px #8a5f00}
.round-btn{width:50px;height:50px;font-size:11px;border-radius:50%;flex:0 0 auto;font-size:12px;font-weight:800;line-height:1.15;
  background:rgba(23,11,54,.9);border:2px solid var(--line);color:var(--ink)}
.round-btn.on{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 12px #f5b92166}
.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:#170b36;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 #3d2577}
.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:var(--bolt);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:#170b36;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:#170b36;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:20px} h1{font-size:16px} }

/* ---- attract / how-to overlay (from the benchmark's splash loop) ---- */
.attract{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  background:#160f2e url("assets/scene.jpg") center top / cover no-repeat}
.attract.hidden{display:none}
.attract-inner{width:100%;max-width:560px;min-height:100%;display:flex;flex-direction:column;align-items:center;
  padding:26px 18px 20px;background:linear-gradient(180deg,rgba(22,13,48,.25),rgba(22,13,48,.55) 60%,rgba(22,13,48,.88))}
.attract-icon{width:104px;height:104px;border-radius:24px;box-shadow:0 0 0 3px var(--gold),0 10px 30px #000c;margin-top:8px}
.attract-title{margin-top:12px;font-size:24px;font-weight:900;letter-spacing:1px;color:var(--gold2);text-shadow:0 3px 10px #000}
.attract-msg{margin-top:16px;min-height:56px;display:flex;align-items:center;text-align:center;font-size:19px;font-weight:900;
  letter-spacing:1.2px;color:#fff;text-shadow:0 0 14px #f5b92188,0 2px 6px #000;transition:opacity .3s;padding:0 8px}
.attract-msg.fade{opacity:0}
.attract-start{margin-top:14px;width:86px;height:86px;border-radius:50%;color:#fff;font-size:40px;line-height:1;
  background:radial-gradient(120% 120% at 50% 20%,#3a2276,#170b36 75%);border:3px solid var(--gold);
  box-shadow:0 0 0 3px #7a5200,0 10px 26px #000c,0 0 22px #f5b92155}
.attract-start:active{transform:scale(.96)}
.attract-hide{margin-top:16px;display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:1.4px;color:var(--ink);
  background:rgba(10,5,28,.55);padding:6px 10px;border-radius:8px}
.attract-hide input{width:17px;height:17px;accent-color:var(--gold)}
.attract-chip{margin-top:auto;font-size:11px;letter-spacing:2px;color:var(--gold2);border:1px solid var(--gold);
  border-radius:999px;padding:4px 12px;background:rgba(10,5,28,.6)}

/* rolling reel strips (spin-in) */
.roll-strip{position:absolute;z-index:3;pointer-events:none;will-change:transform}
.roll-tile{aspect-ratio:auto}