:root{--gold:#f5c542;--gold2:#a87a12;--cell:min(17vw,104px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#4a0a1c,#12040a 70%) fixed;color:#fff;font-family:Georgia,"Times New Roman",serif;user-select:none}
body{display:flex;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom))}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.machine{width:min(100%,640px);padding:14px;border-radius:26px;border:3px solid var(--gold);height:fit-content;
  background:linear-gradient(160deg,#5b0f22,#2a0610 60%,#4a0c1c);box-shadow:0 0 40px #0009,inset 0 0 30px #000a,inset 0 2px 0 #fff4}
header{text-align:center}
h1{margin:4px 0;font-size:clamp(24px,6vw,40px);letter-spacing:.2em;background:linear-gradient(#fff2b0,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.jackpot{font-size:12px;letter-spacing:.15em;color:#ffd}.jackpot b{display:block;font-size:26px;color:var(--gold);text-shadow:0 0 12px #f5c54288}
.lights{display:flex;justify-content:space-between;margin:8px 4px}
.lights i{width:10px;height:10px;border-radius:50%;background:#5a4a1a;box-shadow:inset 0 -2px 3px #0008}
.machine.win .lights i{animation:blink .35s infinite alternate}
.machine.win .lights i:nth-child(odd){animation-delay:.17s}
@keyframes blink{to{background:#ffe27a;box-shadow:0 0 12px 3px #ffd34d}}
.reels{display:flex;gap:6px;justify-content:center;padding:10px;border-radius:16px;background:#000;border:3px solid var(--gold2);box-shadow:inset 0 0 20px #000}
.reel{width:var(--cell);height:calc(var(--cell)*3);overflow:hidden;position:relative;border-radius:8px;background:#fff}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000a,transparent 25%,transparent 75%,#000a),linear-gradient(100deg,#fff6 0,transparent 22%)}
.strip{will-change:transform}
.cell{height:var(--cell);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell)*.58);color:#111}
.cell.bar{font:900 calc(var(--cell)*.24)/1 Georgia,serif;color:#fff;letter-spacing:.05em}
.cell.bar span{background:#222;border:3px double var(--gold);padding:6px 6px;border-radius:4px}
.cell.seven{color:#d00;font:900 calc(var(--cell)*.7)/1 Georgia,serif;text-shadow:2px 2px 0 #600}
.cell.win{animation:pulse .5s infinite alternate;background:#ffe27a88}
@keyframes pulse{to{transform:scale(1.12);background:#ffd34daa}}
.msg{text-align:center;margin:12px 0 8px;min-height:24px;color:var(--gold);font-size:clamp(14px,3.6vw,18px)}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.box{background:#0008;border:1px solid var(--gold2);border-radius:12px;padding:6px;text-align:center}
.box span{display:block;font-size:10px;letter-spacing:.15em;color:#cba}.box b{font-size:22px;color:var(--gold)}
.bet div{display:flex;justify-content:center;align-items:center;gap:10px}
button{font-family:inherit;cursor:pointer;color:#fff}
.sm{background:linear-gradient(#8a1a30,#4a0a18);border:1px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:13px;box-shadow:0 3px 0 #200;transition:transform .08s}
.sm.wide{flex:1}.sm:active{transform:translateY(3px);box-shadow:none}
.spin{grid-column:1/-1;order:-1;height:76px;border-radius:40px;border:3px solid #fff8;font-size:30px;font-weight:700;letter-spacing:.2em;
  background:radial-gradient(circle at 50% 20%,#ff6b6b,#c0102a 60%,#7a0010);box-shadow:0 6px 0 #4a0010,0 0 22px #ff3b5c66,inset 0 3px 6px #fff6;transition:transform .08s,box-shadow .08s}
.spin:active{transform:translateY(6px);box-shadow:0 0 0 #4a0010,0 0 22px #ff3b5c66}
.spin:disabled{filter:grayscale(.7);cursor:default}
footer{display:flex;gap:8px;margin-top:10px}
.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:100;padding:12px}
.modal.open{display:flex}
.card{background:#2a0610;border:2px solid var(--gold);border-radius:18px;padding:18px;width:min(100%,460px);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;color:var(--gold);text-align:center}.note{font-size:12px;color:#dcb}
.card label{display:flex;gap:10px;font-size:16px}
table{width:100%;border-collapse:collapse;text-align:center}td,th{padding:5px;border-bottom:1px solid #fff2}th{color:var(--gold);font-size:12px}
@media(max-width:420px){.machine{padding:8px}.reels{gap:3px;padding:6px}}

.cell{padding:0;font-size:0}
.cell img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;box-shadow:inset 0 0 0 2px #f5c542}
td.pt img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--gold2)}

.cell{position:relative}
.amt{position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);text-align:center;font:900 calc(var(--cell)*.25)/1 Georgia,serif;color:#fff;text-shadow:0 0 4px #7a1a00,0 2px 0 #7a1a00,0 0 10px #ff9a1a}
.cell.fire img{animation:flick .6s infinite alternate}
@keyframes flick{to{filter:brightness(1.25) saturate(1.2)}}
.ann{text-align:center;gap:14px}.ann h2{font-size:clamp(26px,7vw,38px);text-shadow:0 0 18px #f5c542}.ann p{margin:0;font-size:18px}
.ann .spin{grid-column:auto;order:0;height:64px;font-size:22px;animation:glow 1s infinite alternate}
@keyframes glow{to{box-shadow:0 6px 0 #4a0010,0 0 40px #ffb02e}}
.card.fire{background:radial-gradient(circle at 50% 0,#6a1a05,#1c0504 75%);border-color:#ff8a1a;width:min(100%,560px)}
.card.fire h2{color:#ffb02e;text-shadow:0 0 18px #ff5a00}
.fstats{display:flex;justify-content:space-around;font-size:12px;letter-spacing:.12em;color:#fdb}.fstats b{display:block;font-size:24px;color:#ffd34d}
.fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fcell{aspect-ratio:1;border-radius:10px;position:relative;overflow:hidden;background:#000a;border:2px solid #5a2a10;--cell:min(14vw,90px)}
.fcell img{width:100%;height:100%;object-fit:cover;display:none}
.fcell.on{border-color:#ffb02e}.fcell.on img{display:block}
.fcell .amt{display:none}.fcell.on .amt{display:block}
.fcell.spinning::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ff7a1a66,transparent 70%);animation:ember .25s infinite alternate}
@keyframes ember{to{opacity:.2}}
.fcell.land{animation:land .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes land{from{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}
.fmsg{margin:0;min-height:22px;text-align:center;color:#ffd34d;font-size:17px}
.card.fire .spin{grid-column:auto;order:0;height:60px;font-size:22px}

.jps{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:5px;margin:4px 0}
.jp{border-radius:10px;padding:4px 2px;text-align:center;border:1px solid #fff6;box-shadow:inset 0 2px 0 #fff4}
.jp span{display:block;font-size:10px;letter-spacing:.14em;color:#fff}.jp b{font-size:clamp(14px,3.8vw,20px);color:#fff;text-shadow:0 1px 2px #000a}
.jp.grand{background:linear-gradient(#e0a800,#7a5600)}.jp.grand b{font-size:clamp(17px,4.6vw,24px)}
.jp.major{background:linear-gradient(#d12a3a,#6a0a18)}.jp.minor{background:linear-gradient(#8a3fd0,#3d1070)}.jp.mini{background:linear-gradient(#2a9d5c,#0d4a2a)}
.jps.small .jp b{font-size:14px}.jps.small .jp span{font-size:9px}.jp.hit{animation:jphit .4s infinite alternate}
@keyframes jphit{to{transform:scale(1.1);box-shadow:0 0 18px 4px #ffd34d}}
.amt.tier{font-size:calc(var(--cell)*.17);letter-spacing:.03em;transform:translateY(-30%)}

.machine.freemode{border-color:#ffe27a;box-shadow:0 0 40px #ffd34d88,inset 0 0 30px #000a,inset 0 2px 0 #fff4;animation:freeglow 1.2s infinite alternate}
@keyframes freeglow{to{box-shadow:0 0 70px #ffd34dcc,inset 0 0 30px #000a,inset 0 2px 0 #fff4}}

.lines{display:block;margin-top:4px;font-size:10px;letter-spacing:.08em;color:#fdc;text-align:center}
.bet{display:flex;flex-direction:column;justify-content:center}
.bet .sm.wide{flex:none;align-self:center;padding:6px 22px;margin-top:4px}