:root{
  --gold:#e2b85a; --gold-hi:#fbe39a; --gold-lo:#8a6424;
  --lapis:#0b1a33; --ink:#04060b; --carnelian:#b5321e;
  --line:rgba(226,184,90,.42);
  --font:"Cinzel",Georgia,"Times New Roman",serif;
  --pad-t:max(10px,env(safe-area-inset-top));
  --pad-r:max(14px,env(safe-area-inset-right));
  --pad-b:max(10px,env(safe-area-inset-bottom));
  --pad-l:max(14px,env(safe-area-inset-left));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:#fff;font-family:var(--font)}
body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
img{-webkit-user-drag:none;user-select:none}

#game{position:fixed;inset:0;overflow:hidden;isolation:isolate;--bt:30%;--bb:70%;
  background:linear-gradient(180deg,#070c18 0,#2b3550 calc(var(--bt) - 18vh),#838da0 calc(var(--bt) + 2%),#7b6448 calc(var(--bb) - 2%),#2c2216 calc(var(--bb) + 14vh),#06050a 100%);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Ambient fill behind the board – same art, blurred, so there are never empty bars */
#backdrop{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
  filter:blur(18px) brightness(.48) saturate(1.2);z-index:0;pointer-events:none}

/* The board: positioned + scaled by JS. Everything inside uses original image pixels × --s */
#board{position:absolute;left:0;top:0;z-index:1;--s:1;visibility:hidden}
#board.ready{visibility:visible}
#boardImg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);
  mask-composite:intersect}

.reel{position:absolute;overflow:hidden;
  left:calc(var(--x)*var(--s)*1px);width:calc(var(--w)*var(--s)*1px);
  top:calc(244px*var(--s));height:calc(515px*var(--s));
  /* hide symbols while they pass over the gold cross-bars between rows */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30.3%,transparent 30.6%,transparent 34.6%,#000 34.9%,#000 65.1%,transparent 65.4%,transparent 69.4%,#000 69.7%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 30.3%,transparent 30.6%,transparent 34.6%,#000 34.9%,#000 65.1%,transparent 65.4%,transparent 69.4%,#000 69.7%,#000 100%)}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.sym{position:absolute;left:0;right:0;display:grid;place-items:center;
  top:calc(var(--i)*179px*var(--s));height:calc(157px*var(--s))}
.sym img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 calc(5px*var(--s)) calc(8px*var(--s)) rgba(40,20,0,.55));transition:opacity .25s}
.spinning .sym img{filter:none}
#board.showing .sym:not(.win) img{opacity:.38}
.sym.win img{animation:winPulse .9s ease-in-out infinite}
.sym.win::before{content:"";position:absolute;inset:6%;border-radius:12%;
  background:radial-gradient(circle,rgba(255,232,150,.55),rgba(255,200,80,.12) 55%,transparent 72%);animation:winHalo .9s ease-in-out infinite}
@keyframes winPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes winHalo{0%,100%{opacity:.55}50%{opacity:1}}

#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#lines polyline{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,230,150,.9));stroke-dasharray:2400;stroke-dashoffset:2400;animation:drawLine .45s ease-out forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}

#toast{position:absolute;left:calc(843px*var(--s));top:calc(800px*var(--s));transform:translate(-50%,-50%) scale(.9);
  white-space:nowrap;padding:.42em 1.2em;border-radius:999px;border:1px solid var(--gold);
  background:rgba(6,9,16,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:clamp(12px,calc(30px*var(--s)),22px);font-weight:700;letter-spacing:.12em;color:var(--gold-hi);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:3}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

#vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,0,.55) 100%),
             linear-gradient(0deg,rgba(2,4,10,.82) 0,rgba(2,4,10,.35) 14%,transparent 26%),
             linear-gradient(180deg,rgba(2,4,10,.6) 0,transparent 12%)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:5;display:grid;pointer-events:none;
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head head head head head" "stage stage stage stage stage" "bal bet spin win auto";
  column-gap:clamp(10px,1.4vw,22px);row-gap:6px;align-items:center}
#hud > *{pointer-events:auto}
#stage{grid-area:stage;pointer-events:none!important;align-self:stretch;min-height:0}

.head{grid-area:head;display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{font-weight:700;font-size:clamp(16px,2vw,30px);letter-spacing:.16em;white-space:nowrap;
  background:linear-gradient(180deg,#fff4c4,#e9bf5c 55%,#a87a2c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.logo span{display:block;font-size:.38em;letter-spacing:.42em;color:#d9c28a;-webkit-text-fill-color:#d9c28a;margin-top:2px}
.actions{display:flex;gap:8px}
.iconBtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid var(--line);background:rgba(6,10,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--gold-hi);transition:background .15s,transform .15s}
.iconBtn svg{width:20px;height:20px}
.iconBtn:hover{background:rgba(30,36,50,.7)}
.iconBtn:active{transform:scale(.93)}
.iconBtn[hidden]{display:none}

.box{min-width:clamp(104px,10vw,168px);padding:.5rem .8rem .55rem;border-radius:14px;text-align:center;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,24,44,.88),rgba(5,9,18,.92));
  box-shadow:inset 0 1px 0 rgba(255,230,160,.12),0 8px 24px rgba(0,0,0,.35)}
.box small{display:block;font-size:clamp(9px,.75vw,12px);letter-spacing:.2em;color:#cdb06a}
.box b{display:block;margin-top:2px;font-size:clamp(16px,1.5vw,26px);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
#balBox{grid-area:bal;justify-self:end}
#winBox{grid-area:win}
#winBox b{color:var(--gold-hi)}
#winBox.hot{border-color:var(--gold);box-shadow:0 0 22px rgba(226,184,90,.45),inset 0 0 18px rgba(226,184,90,.15)}
#betBox{grid-area:bet}
.betRow{display:flex;align-items:center;justify-content:center;gap:.5rem}
.betBtn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:rgba(226,184,90,.12);color:var(--gold-hi);
  cursor:pointer;display:grid;place-items:center;padding:0;font-size:18px;line-height:1}
.betBtn:disabled{opacity:.35;cursor:default}

#spin{grid-area:spin;width:clamp(150px,14vw,230px);aspect-ratio:520/344;border:0;padding:0;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));transition:transform .12s,filter .2s;justify-self:center}
#spin img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
#spin:hover{filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,190,80,.35))}
#spin:active{transform:scale(.95)}
#spin.busy{filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) brightness(.8) saturate(.7)}

#autoBtn{grid-area:auto;justify-self:start;cursor:pointer;min-width:clamp(80px,7vw,120px)}
#autoBtn.on{border-color:var(--gold);box-shadow:0 0 18px rgba(226,184,90,.4)}

/* Phones / narrow portrait */
@media (max-aspect-ratio:1/1){
  #hud{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"head head head" "stage stage stage" "bal spin win" "bet spin auto";
    column-gap:10px;row-gap:8px}
  #balBox,#betBox,#winBox,#autoBtn{width:100%;max-width:220px;min-width:0}
  #balBox,#betBox{justify-self:end}
  #winBox,#autoBtn{justify-self:start}
  #spin{width:min(38vw,190px)}
  .box{padding:.42rem .4rem .46rem}
  .box small{font-size:clamp(9px,2.4vw,12px)}
  .box b{font-size:clamp(15px,4.4vw,24px)}
  #backdrop{display:none}
  #boardImg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
  .head{flex-direction:column-reverse;align-items:stretch;gap:2vh}
  .actions{justify-content:flex-end;gap:6px}
  .logo{text-align:center;font-size:clamp(22px,7.4vw,46px);letter-spacing:.12em;margin-bottom:1vh}
  .logo span{margin-top:6px}
  .iconBtn{width:38px;height:38px}
  #vignette{background:linear-gradient(0deg,rgba(2,4,10,.75) 0,transparent 22%),linear-gradient(180deg,rgba(2,4,10,.55) 0,transparent 18%)}
}
/* Phones in landscape: controls move to the sides so the board gets full height */
@media (min-aspect-ratio:1/1) and (max-height:540px){
  #hud{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto repeat(3,minmax(0,1fr));
    grid-template-areas:"head head head" "bal stage spin" "bet stage spin" "win stage auto";
    column-gap:8px;row-gap:6px}
  #balBox,#betBox,#winBox,#autoBtn{min-width:clamp(96px,14vw,130px);justify-self:stretch}
  #spin{width:clamp(110px,17vw,150px);align-self:center}
  .box{padding:.32rem .5rem .38rem;border-radius:12px}
  .box b{font-size:clamp(14px,3.6vh,20px)}
  .logo{font-size:clamp(13px,3.6vh,20px)}
  .logo span{display:none}
  .iconBtn{width:34px;height:34px}.iconBtn svg{width:17px;height:17px}
  #vignette{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.6) 100%)}
}

/* ---------- Overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);background:rgba(0,0,0,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay.open{display:flex}
.modal{position:relative;width:min(860px,100%);max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(160deg,#122038,#060a12 70%);border:1px solid var(--gold);border-radius:18px;
  padding:clamp(16px,3vw,32px);box-shadow:0 30px 90px #000;font-family:Georgia,serif}
.modal h2{font-family:var(--font);margin:0 0 .4rem;color:var(--gold-hi);letter-spacing:.14em;font-size:clamp(18px,2.6vw,28px)}
.modal h3{font-family:var(--font);color:var(--gold);letter-spacing:.12em;font-size:15px;margin:1.4rem 0 .6rem}
.modal p{color:#e5dcc4;line-height:1.6;margin:.4rem 0}
.close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.payGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pay{display:flex;align-items:center;gap:10px;border:1px solid rgba(226,184,90,.28);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.03)}
.pay img{width:52px;height:52px;object-fit:contain;flex:none}
.pay div{font-size:13px;line-height:1.45;color:#e9e1cb}
.pay b{font-family:var(--font);color:#fff;font-size:13px}
.lineGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.lineCard{border:1px solid rgba(226,184,90,.25);border-radius:10px;padding:6px;text-align:center;font-size:11px;color:#cdb06a}
.lineCard .g{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:4px}
.lineCard i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.08)}
.lineCard i.on{background:var(--gold)}
.primary{font-family:var(--font);font-weight:700;letter-spacing:.12em;cursor:pointer;border:1px solid var(--gold);border-radius:999px;
  padding:.7rem 1.6rem;background:linear-gradient(180deg,#f2cf74,#b5862f);color:#1c1204;margin-top:1rem}
.center{text-align:center}

#bigWin{position:absolute;inset:0;z-index:15;display:none;place-items:center;pointer-events:auto;cursor:pointer;
  background:radial-gradient(circle,rgba(40,24,0,.55),rgba(0,0,0,.7) 70%)}
#bigWin.open{display:grid}
#bigWin .inner{text-align:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
#bigWin .t{font-weight:700;font-size:clamp(40px,9vmin,110px);letter-spacing:.08em;
  background:linear-gradient(180deg,#fff7cf,#f0c457 50%,#9c6b1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,180,60,.55))}
#bigWin .a{font-size:clamp(28px,6vmin,64px);font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,200,90,.8);font-variant-numeric:tabular-nums}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Intro ---------- */
#intro{position:absolute;inset:0;z-index:50;background:#010204;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:opacity .45s}
#intro.hide{opacity:0;pointer-events:none}
#lightningSvg{position:absolute;inset:0;width:100%;height:100%}
.boltMain,.boltBranch{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #dff4ff) drop-shadow(0 0 28px rgba(146,196,255,.72));stroke-dasharray:300;stroke-dashoffset:300}
.boltMain{stroke-width:1.25;animation:boltDraw .62s cubic-bezier(.18,.8,.15,1) .18s forwards}
.boltBranch{stroke-width:.62;animation:boltDraw .34s ease-out .43s forwards}
#flash{position:absolute;inset:-5%;background:#fff;opacity:0;mix-blend-mode:screen;animation:flash .9s ease-out .68s forwards}
#introText{position:relative;z-index:2;opacity:0;text-align:center;font-weight:700;letter-spacing:.28em;font-size:clamp(20px,4.4vw,56px);
  background:linear-gradient(180deg,#fff4c4,#e9bf5c 55%,#a87a2c);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:introTitle .7s ease-out 1s forwards;padding:0 4vw}
#introText small{display:block;margin-top:1.4em;font-size:.26em;letter-spacing:.4em;-webkit-text-fill-color:#9fb3c9;opacity:.8}
@keyframes boltDraw{to{stroke-dashoffset:0}}
@keyframes flash{0%,60%{opacity:0}64%{opacity:.96}70%{opacity:.25}100%{opacity:0}}
@keyframes introTitle{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}