/* ═══════════════════════════════════════════════════
   ARCANJO VS DEMÔNIOS — Arcade 1280x720
   ═══════════════════════════════════════════════════ */
:root {
  --gold:   #ffd166;
  --gold2:  #c8922a;
  --gold3:  #7a4800;
  --purple: #7b4dff;
  --deep:   #06030e;
  --text:   #f0e6ff;
  --dim:    #8a76b8;
  --T: 54px;
  --S: 72px;  /* spin area height */
  --B: 62px;  /* controls bar */
  --RS: min(14.8vh, 9.8vw, 118px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;height:100dvh;overflow:hidden;
  background:var(--deep);color:var(--text);
  font-family:"Segoe UI",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
}

/* ═══ MÁQUINA ═════════════════════════════════════ */
.machine{
  position:relative;
  width:100vw;height:100dvh;
  display:grid;
  grid-template-rows: var(--T) 1fr var(--S) var(--B);
  overflow:hidden;
}

/* ═══ FUNDO ═══════════════════════════════════════ */
.bg-layer{position:absolute;inset:0;z-index:0;pointer-events:none;}
.bg-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 18%;
  display:block;
  filter:brightness(0.2) saturate(0.4);
}
.bg-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%,
      rgba(15,5,40,0.5) 0%,rgba(3,1,10,0.75) 70%,rgba(2,0,8,0.95) 100%),
    linear-gradient(180deg,rgba(2,0,8,0.6) 0%,transparent 15%,transparent 80%,rgba(2,0,8,0.6) 100%);
}

/* ═══ TOPBAR ══════════════════════════════════════ */
.topbar{
  position:relative;z-index:10;
  display:flex;align-items:center;
  gap:0;
  background:rgba(2,0,8,0.95);
  border-bottom:1px solid rgba(200,146,42,0.45);
  padding:0 0.6rem;
}

.topbar-left,.topbar-right{
  display:flex;align-items:center;gap:0.3rem;
  flex-shrink:0;
}

.tb-menu-btn,.tb-icon-btn{
  width:2rem;height:2rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  color:#ccc;font-size:0.9rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;
}
.tb-menu-btn:hover,.tb-icon-btn:hover{background:rgba(255,255,255,0.12);}

.jk-group{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  gap:0.3rem;
  overflow:hidden;
}

.jk-item{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.25rem 0.6rem;
  background:linear-gradient(180deg,#100820,#060310);
  border:1px solid rgba(200,146,42,0.25);
  border-radius:8px;
  min-width:0;
}

.jk-saldo{
  background:linear-gradient(180deg,#271200,#120800) !important;
  border-left:2px solid var(--gold) !important;
  border-right:2px solid var(--gold) !important;
  position:relative;overflow:hidden;
}
.jk-saldo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,209,102,0.1),transparent);
  animation:saldoSweep 2s ease-in-out infinite;
}
@keyframes saldoSweep{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.jk-val-saldo{font-size:1.25rem !important;color:var(--gold) !important;}

.jk-grand{
  background:linear-gradient(180deg,#1a0c00,#0a0500) !important;
  border-color:var(--gold) !important;
  transform:scaleY(1.08);
  box-shadow:0 0 12px rgba(255,209,102,0.2);
}

.jk-badge{height:28px;width:auto;flex-shrink:0;}
.jk-badge-grand{height:34px;}

.jk-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.jk-label{font-size:0.44rem;letter-spacing:0.12em;color:var(--dim);text-transform:uppercase;white-space:nowrap;}
.jk-val{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold);line-height:1;animation:goldBeat 2.5s ease-in-out infinite;}
.jk-grand .jk-val{font-size:1.2rem;}
.jk-delta{font-size:0.48rem;color:#4ade80;font-weight:600;}
.jk-delta.up::before{content:"▲ ";}

@keyframes goldBeat{
  0%,100%{text-shadow:0 0 6px rgba(255,209,102,0.3);}
  50%{text-shadow:0 0 18px rgba(255,209,102,0.9),0 0 4px #ffd166;}
}

/* ═══ ARENA ═══════════════════════════════════════ */
.arena{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns: clamp(200px,24vw,290px) 1fr clamp(175px,21vw,250px);
  min-height:0;overflow:hidden;
}

/* ─── HERÓI ───────────────────────────────────── */
.hero-col{
  position:relative;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

/* Imagem real do personagem — recorte da epic_full.jpg
   1920x1280: personagem está no terço esquerdo, ~x=0-640
   background-size 380%: mostra ~505px da largura => cobre o personagem
   background-position 7% 6%: ancora cabeça no topo, pés na base */
.hero-img{
  position:absolute;
  inset:0;
  background-image:url('/assets/bg/epic_full.jpg');
  background-size:380% auto;
  background-position:7% 6%;
  background-repeat:no-repeat;
  transform-origin:50% 88%;
  animation:heroBreath 5s ease-in-out infinite;
  will-change:transform,filter;
  z-index:1;
}
@keyframes heroBreath{
  0%,100%{transform:scale(1) translateY(0);
    filter:brightness(0.92) saturate(1.12) contrast(1.02);}
  50%{transform:scale(1.014) translateY(-5px);
    filter:brightness(1.02) saturate(1.28) contrast(1.05);}
}

/* Aura dourada atrás do herói */
.hero-aura-ring{
  position:absolute;
  left:50%;top:5%;
  transform:translateX(-50%);
  width:90%;padding-top:90%;
  background:radial-gradient(circle,
    rgba(255,200,50,0.2) 0%,
    rgba(255,140,0,0.1) 40%,
    transparent 70%);
  border-radius:50%;
  animation:auraRing 5s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes auraRing{
  0%,100%{transform:translateX(-50%) scale(1);opacity:0.55;}
  50%{transform:translateX(-50%) scale(1.1);opacity:1;}
}

/* Vinheta: funde herói com o centro e escurece base */
.hero-fade{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 52%,
      rgba(4,1,12,0.5) 72%,
      rgba(4,1,12,0.97) 100%),
    linear-gradient(180deg,
      rgba(4,1,12,0.6) 0%,
      transparent 14%,
      transparent 65%,
      rgba(4,1,12,0.45) 100%);
  pointer-events:none;
}

.hero-info{
  position:relative;z-index:5;
  padding:0 1rem 0.8rem;
}
.hero-name{
  font-size:clamp(1.1rem,2.2vw,1.55rem);
  font-weight:900;letter-spacing:0.22em;
  color:var(--gold);text-transform:uppercase;
  text-shadow:0 0 20px rgba(255,209,102,0.7),0 2px 6px #000;
  animation:namePulse 5s ease-in-out infinite;
}
.hero-sub{
  font-size:clamp(0.52rem,0.9vw,0.7rem);
  font-weight:700;letter-spacing:0.18em;
  color:#b8a4e0;text-transform:uppercase;
  text-shadow:0 1px 5px #000;margin-top:0.1rem;
}
.hero-quote{
  font-size:clamp(0.5rem,0.82vw,0.65rem);
  color:rgba(180,160,220,0.72);
  font-style:italic;margin-top:0.3rem;
  text-shadow:0 1px 4px #000;line-height:1.4;
}
@keyframes namePulse{
  0%,100%{text-shadow:0 0 14px rgba(255,209,102,0.5),0 2px 6px #000;}
  50%{text-shadow:0 0 28px rgba(255,209,102,1),0 0 8px #ffd166,0 2px 6px #000;}
}

.table-btn-hero{
  margin-top:0.5rem;
  width:100%;
  padding:0.4rem 0;
  background:linear-gradient(180deg,#3a1010,#1e0808);
  border:1px solid rgba(255,100,100,0.4);
  border-radius:6px;
  color:#ffb0b0;
  font-size:clamp(0.5rem,0.8vw,0.65rem);
  font-weight:700;letter-spacing:0.1em;
  cursor:pointer;
  transition:filter 0.2s,box-shadow 0.2s;
}
.table-btn-hero:hover{filter:brightness(1.2);box-shadow:0 0 10px rgba(255,100,100,0.3);}

/* ─── ROLOS ───────────────────────────────────── */
.reels-col{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.35rem;
  padding:0.5rem 0.4rem 0.2rem;
}

.reel-badge-top{
  display:flex;align-items:center;gap:0.3rem;
  background:rgba(4,2,14,0.85);
  border:1px solid rgba(200,146,42,0.4);
  border-radius:20px;
  padding:0.2rem 0.8rem;
}
.rbd-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,209,102,0.25);
  border:1px solid rgba(200,146,42,0.4);
}
.rbd-dot.active{background:var(--gold);box-shadow:0 0 6px rgba(255,209,102,0.7);}
.rbd-diamond{color:var(--gold);font-size:0.7rem;animation:diamondPulse 2s ease-in-out infinite;}
@keyframes diamondPulse{0%,100%{opacity:0.6;}50%{opacity:1;text-shadow:0 0 8px var(--gold);}}
.lines-text{
  font-size:0.62rem;font-weight:700;
  letter-spacing:0.15em;color:var(--gold);
  margin-left:0.2rem;
}

.reels-frame{
  position:relative;
  border:2px solid var(--gold2);
  border-radius:12px;
  overflow:hidden;
  background:rgba(2,0,8,0.82);
  box-shadow:
    0 0 0 1px rgba(123,77,255,0.15),
    0 0 40px rgba(0,0,0,0.9),
    inset 0 0 22px rgba(0,0,0,0.7);
  animation:frameGlow 4s ease-in-out infinite;
}
@keyframes frameGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(123,77,255,0.12),0 0 40px rgba(0,0,0,0.9),inset 0 0 22px rgba(0,0,0,0.7);}
  50%{box-shadow:0 0 0 2px rgba(123,77,255,0.25),0 0 45px rgba(0,0,0,0.9),inset 0 0 18px rgba(0,0,0,0.6),0 0 18px rgba(123,77,255,0.12);}
}

.reels{
  display:flex;justify-content:center;align-items:stretch;
  gap:0.1rem;padding:0.22rem;
  pointer-events:auto;
}

.reel-column{width:var(--RS);flex-shrink:0;}

.reel-viewport{
  position:relative;width:100%;
  height:calc(var(--RS)*3);
  overflow:hidden;border-radius:4px;
  border:1px solid rgba(60,40,100,0.45);
  background:linear-gradient(180deg,#050210 0%,#0e0620 50%,#050210 100%);
  box-shadow:inset 0 0 18px rgba(0,0,0,0.85);
}
.reel-viewport::before,.reel-viewport::after{
  content:"";position:absolute;
  left:0;right:0;height:18%;
  z-index:2;pointer-events:none;
}
.reel-viewport::before{top:0;background:linear-gradient(180deg,rgba(2,0,8,0.85),transparent);}
.reel-viewport::after{bottom:0;background:linear-gradient(0deg,rgba(2,0,8,0.85),transparent);}

.reel-strip{display:flex;flex-direction:column;}

.reel-viewport.is-spinning{
  animation:reelGlow 0.4s ease-in-out infinite;
  box-shadow:inset 0 0 22px rgba(123,77,255,0.4),inset 0 0 8px rgba(255,209,102,0.15),0 0 10px rgba(123,77,255,0.25);
}
@keyframes reelGlow{0%,100%{filter:brightness(0.92);}50%{filter:brightness(1.1) saturate(1.1);}}
.reel-strip.reel-blur{filter:brightness(1.04) saturate(1.03);}

.cell{
  width:100%;height:var(--RS);min-height:var(--RS);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
}
.cell+.cell{border-top:1px solid rgba(60,40,100,0.25);}

.cell img.symbol-icon{
  width:100%;height:100%;
  max-width:var(--RS);max-height:var(--RS);
  object-fit:contain;display:block;
  pointer-events:none;user-select:none;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}

.cell.win{
  background:rgba(255,209,102,0.15) !important;
  box-shadow:inset 0 0 18px rgba(255,209,102,0.6),0 0 10px rgba(255,209,102,0.4) !important;
  animation:winCell 0.45s ease-in-out infinite alternate !important;
}
@keyframes winCell{from{filter:brightness(1) saturate(0.9);}to{filter:brightness(1.45) saturate(1.3);}}
.cell.lose{background:rgba(160,20,20,0.14) !important;box-shadow:inset 0 0 10px rgba(160,20,20,0.3) !important;}

#lines-overlay{position:absolute;inset:0;pointer-events:none;z-index:10;}
@keyframes drawLine{to{stroke-dashoffset:0;}}

/* ─── BÔNUS ───────────────────────────────────── */
.bonus-col{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  justify-content:center;gap:0.4rem;
  padding:0.6rem 0.7rem;
  border-left:1px solid rgba(200,146,42,0.3);
  background:rgba(2,0,8,0.55);
}
.bonus-col::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(2,0,8,0.8) 0%,rgba(2,0,8,0.2) 100%);
  pointer-events:none;
}

.bonus-title{
  position:relative;
  font-size:clamp(0.65rem,1.05vw,0.82rem);
  font-weight:900;letter-spacing:0.14em;
  color:var(--gold);text-align:center;
  text-shadow:0 0 10px rgba(255,209,102,0.45);
  text-transform:uppercase;
  padding-bottom:0.4rem;
  border-bottom:1px solid rgba(200,146,42,0.35);
}

.bcard{
  position:relative;
  display:flex;align-items:center;gap:0.45rem;
  padding:0.4rem 0.55rem;
  border:1px solid rgba(200,146,42,0.22);
  border-radius:8px;
  background:rgba(5,2,16,0.8);
  box-shadow:inset 0 0 8px rgba(123,77,255,0.08);
  transition:border-color 0.2s,box-shadow 0.2s;
}
.bcard:hover{border-color:rgba(255,209,102,0.5);box-shadow:inset 0 0 12px rgba(123,77,255,0.18),0 0 8px rgba(255,209,102,0.1);}
.bcard-cauldron{border-color:rgba(180,80,255,0.25);}
.bcard-cauldron:hover{border-color:rgba(232,121,249,0.55);}

.bcard-ico{
  width:clamp(26px,2.8vw,36px);height:clamp(26px,2.8vw,36px);
  object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 4px rgba(255,209,102,0.45));
}
.bcard-cauldron .bcard-ico{filter:drop-shadow(0 0 5px rgba(200,80,255,0.55));}

.bcard-txt b{
  display:block;
  font-size:clamp(0.58rem,0.88vw,0.72rem);
  font-weight:700;color:#e0d0ff;letter-spacing:0.05em;
}
.bcard-txt span{
  display:block;
  font-size:clamp(0.5rem,0.75vw,0.62rem);
  color:var(--gold);margin-top:0.06rem;
}

.cauldron-mults{
  display:flex;align-items:center;gap:0.3rem;
  margin-top:0.1rem;
}
.cm{font-size:0.75rem;font-weight:700;color:rgba(232,121,249,0.6);}
.cm.active{color:#e879f9;text-shadow:0 0 8px rgba(232,121,249,0.7);}
.cm-sep{font-size:0.45rem;color:rgba(200,146,42,0.4);}

.bcard-separator{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,146,42,0.3),transparent);
  margin:0.1rem 0;
}

.bonus-promo{
  position:relative;
  padding:0.4rem 0.55rem;
  border:1px solid rgba(200,146,42,0.2);
  border-radius:8px;
  background:rgba(5,2,16,0.7);
  text-align:center;
}
.bp-text{font-size:clamp(0.55rem,0.85vw,0.68rem);font-weight:700;color:#c8b4f0;letter-spacing:0.08em;}
.bp-gold{color:var(--gold);text-shadow:0 0 8px rgba(255,209,102,0.4);}

/* ═══ SPIN AREA ═══════════════════════════════════ */
.spin-area{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  background:linear-gradient(180deg,rgba(2,0,8,0) 0%,rgba(2,0,8,0.6) 100%);
}

.spin-wrap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}

.spin-wings{
  position:absolute;
  width:clamp(280px,30vw,380px);height:auto;
  top:50%;left:50%;
  transform:translate(-50%,-56%);
  pointer-events:none;z-index:0;
  animation:wingsBreath 2.5s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,209,102,0.45));
}
@keyframes wingsBreath{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,209,102,0.4));transform:translate(-50%,-56%) scale(1);}
  50%{filter:drop-shadow(0 0 16px rgba(255,209,102,0.8));transform:translate(-50%,-56%) scale(1.02);}
}

.spin-base-wrap{
  position:relative;z-index:1;
  width:clamp(72px,9vw,108px);
  height:clamp(72px,9vw,108px);
  display:flex;align-items:center;justify-content:center;
}
.spin-base{
  position:absolute;inset:0;
  width:100%;height:100%;
  animation:baseRotate 12s linear infinite;
}
@keyframes baseRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.spin-btn{
  position:relative;z-index:2;
  width:78%;height:78%;
  border-radius:50%;
  border:none;
  background:radial-gradient(circle at 38% 30%,#2a1a00,#0a0500);
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  overflow:hidden;
  transition:filter 0.12s,transform 0.1s;
  animation:spinPulse 2s ease-in-out infinite;
}
.spin-shine{
  position:absolute;top:-50%;left:-50%;
  width:200%;height:200%;
  background:conic-gradient(transparent 0deg,rgba(255,255,255,0.08) 55deg,transparent 110deg);
  animation:spinRotate 3s linear infinite;border-radius:50%;
}
.spin-label{
  position:relative;z-index:1;
  font-size:clamp(0.8rem,1.4vw,1rem);
  font-weight:900;letter-spacing:0.12em;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,0.8);
  pointer-events:none;
}
.spin-sub{
  position:relative;z-index:1;
  font-size:clamp(0.38rem,0.58vw,0.48rem);
  font-weight:600;letter-spacing:0.1em;
  color:rgba(255,209,102,0.6);
  pointer-events:none;margin-top:0.1rem;
  display:none;
}
.spin-btn:hover{filter:brightness(1.2);transform:scale(1.05);}
.spin-btn:active{transform:scale(0.95);}
.spin-btn:disabled{opacity:0.38;cursor:not-allowed;animation:none;transform:none;}
@keyframes spinPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,209,102,0.2),inset 0 0 20px rgba(255,150,0,0.15);}
  50%{box-shadow:0 0 0 4px rgba(255,209,102,0.45),0 0 20px rgba(255,150,0,0.25),inset 0 0 25px rgba(255,180,0,0.22);}
}
@keyframes spinRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ═══ CONTROLS BAR ═════════════════════════════════ */
.controls{
  position:relative;z-index:10;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  align-items:center;
  height:var(--B);
  background:linear-gradient(0deg,#000 0%,#080318 100%);
  border-top:1px solid rgba(200,146,42,0.4);
  padding:0 0.5rem;
}
.controls>*{padding:0 0.7rem;}
.controls>*+*{border-left:1px solid rgba(200,146,42,0.15);}

.ctrl-block{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.12rem;height:100%;
}
.ctrl-spacer{border-left:none !important;}

.ctrl-lbl{
  font-size:0.48rem;letter-spacing:0.14em;
  color:var(--dim);text-transform:uppercase;
}
.ctrl-row{display:flex;align-items:center;gap:0.3rem;}

.c-btn{
  width:1.7rem;height:1.7rem;
  border-radius:6px;
  border:1px solid var(--gold2);
  background:#180b30;
  color:var(--gold);font-size:1.1rem;font-weight:700;
  cursor:pointer;line-height:1;
  transition:background 0.12s;
}
.c-btn:hover{background:#2c1555;}

.c-val{
  font-size:clamp(0.9rem,1.5vw,1.1rem);
  font-weight:800;font-variant-numeric:tabular-nums;
  color:#fff;min-width:2.8rem;text-align:center;
}
.c-gold{
  color:var(--gold) !important;
  font-size:clamp(1rem,1.7vw,1.25rem) !important;
  animation:goldBeat 2.5s ease-in-out infinite;
}

.c-select{
  padding:0.22rem 0.4rem;
  border-radius:5px;border:1px solid #3a2560;
  background:#130a24;color:var(--text);
  font-weight:700;font-size:0.85rem;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.c-chevron{color:var(--gold2);font-size:0.7rem;pointer-events:none;}

.ctrl-ico{width:20px;height:20px;object-fit:contain;flex-shrink:0;}

.ctrl-tagline{
  position:absolute;
  bottom:0;left:0;right:0;
  text-align:center;
  font-size:clamp(0.42rem,0.65vw,0.52rem);
  font-weight:600;letter-spacing:0.16em;
  color:rgba(200,160,80,0.55);
  padding-bottom:0.18rem;
  pointer-events:none;
}

/* ═══ BOTÃO SACAR ════════════════════════════════════ */
.redeem-btn{
  position:relative;
  z-index:40;
  padding:0.4rem 1.2rem;
  font-size:0.75rem;
  font-weight:700;
  color:#fff;
  background:#1d9e75;
  border:1px solid #1d9e75;
  border-radius:20px;
  cursor:pointer;
  white-space:nowrap;
  letter-spacing:0.04em;
}
.redeem-btn:hover{background:#22b584;}


.status-pill{
  position:fixed;
  left:50%;bottom:calc(var(--B) + 0.35rem);
  transform:translateX(-50%);
  z-index:30;margin:0;
  padding:0.26rem 1rem;
  background:rgba(0,0,0,0.8);
  border:1px solid rgba(200,146,42,0.38);
  border-radius:20px;
  font-size:clamp(0.7rem,1.2vw,0.86rem);
  font-weight:700;color:var(--gold);
  pointer-events:none;white-space:nowrap;
  backdrop-filter:blur(3px);
}

/* ═══ EFEITOS JS ════════════════════════════════════ */
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes glitchDistort{
  0%,100%{clip-path:inset(0)}
  20%{clip-path:inset(0 0 85% 0);transform:translate(2px,2px)}
  40%{clip-path:inset(80% 0 0 0);transform:translate(-2px,-2px)}
  60%{clip-path:inset(50% 0 30% 0);transform:translate(1px,-1px)}
  80%{clip-path:inset(10% 0 60% 0);transform:translate(-1px,2px)}
}
.glitch-effect{animation:glitchDistort 0.4s ease-in-out !important;}

/* ═══ PAYTABLE ══════════════════════════════════════ */
.pt-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;}
.pt-modal.hidden{display:none;}
.pt-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.88);}
.pt-panel{
  position:relative;z-index:1;
  width:min(720px,100%);max-height:90vh;overflow:auto;
  background:#080414;border:2px solid #3a2060;
  border-radius:12px;padding:1.2rem 1.5rem 1.5rem;
}
.pt-panel h2{margin:0 0 0.2rem;text-align:center;color:var(--gold);font-size:1.3rem;}
.pt-sub{text-align:center;margin:0 0 1rem;color:#8a76b8;font-size:0.82rem;}
.pt-close{position:absolute;top:0.4rem;right:0.65rem;background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer;line-height:1;}
.paytable-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid #2a1a40;padding-top:1rem;}
.paytable-col:first-child{border-right:1px solid #2a1a40;padding-right:1rem;}
.paytable-symbol-head img.paytable-mini,.paytable-symbol-head .paytable-mini{width:44px;height:44px;}
.paytable-rules{list-style:none;}
.paytable-rules li{display:flex;justify-content:space-between;gap:0.5rem;padding:0.16rem 0;font-size:0.86rem;border-bottom:1px solid #180e28;}
.rule-value.bonus{color:var(--gold);}
.rule-value.payout{color:#ff9f43;}

/* ═══ MOBILE ════════════════════════════════════════ */
@media(max-width:720px){
  :root{--T:auto;--S:auto;--B:auto;--RS:min(16vw,4.3rem);}
  html,body{overflow:auto;height:auto;}
  .machine{display:flex;flex-direction:column;height:auto;min-height:100dvh;}
  .topbar{flex-wrap:wrap;gap:0.3rem;padding:0.3rem;height:auto;}
  .jk-group{flex-wrap:wrap;gap:0.2rem;}
  .jk-item{flex:1 1 45%;padding:0.2rem 0.4rem;}
  .arena{grid-template-columns:1fr;min-height:auto;}
  .hero-col{height:6rem;flex:0 0 6rem;}
  .hero-svg{height:95%;bottom:3.5rem;}
  .bonus-col{flex-direction:row;flex-wrap:wrap;border-left:none;border-top:1px solid rgba(200,146,42,0.3);}
  .bonus-title{width:100%;}
  .bcard{flex:1 1 45%;padding:0.25rem 0.35rem;}
  .spin-area{padding:0.4rem 0;}
  .spin-wings{width:200px;}
  .controls{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto;padding:0.3rem 0.4rem;}
  .ctrl-spacer{display:none;}
  .ctrl-tagline{position:static;padding:0.2rem;font-size:0.42rem;}
  .status-pill{position:static;transform:none;border-radius:0;}
  .paytable-grid{grid-template-columns:1fr;}
  .paytable-col:first-child{border-right:none;border-bottom:1px solid #2a1a40;padding-bottom:1rem;padding-right:0;}
}

@media(max-width:520px){
  html,body{height:100%;overflow:hidden;}
  .machine{height:100vh;min-height:100vh;overflow:hidden;}
  .topbar{min-height:118px;padding:5px 6px 3px;}
  .jk-group{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;}
  .jk-item{min-height:36px;padding:4px 7px;}
  .jk-badge{max-width:78px;max-height:26px;}
  .jk-label{font-size:7px;}
  .jk-val{font-size:18px;line-height:1;}
  .jk-delta{font-size:8px;}
  .topbar-left,.topbar-right{top:48px;}
  .arena{display:block;padding:0 8px;}
  .hero-col{
    height:42px;min-height:42px;margin:0 -8px 4px;border-radius:0;overflow:hidden;
    background-image:linear-gradient(90deg,rgba(5,2,10,.25),rgba(5,2,10,.92)),url("/assets/bg/epic_full.jpg");
    background-position:left center;background-size:auto 145%;
  }
  .hero-img,.hero-aura-ring,.hero-fade,.hero-svg{display:none;}
  .hero-info{inset:6px 10px auto 10px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;}
  .hero-name{font-size:15px;line-height:1;}
  .hero-sub{font-size:8px;}
  .hero-quote{display:none;}
  .table-btn-hero{grid-row:1/span 2;grid-column:2;min-width:118px;height:28px;padding:0 10px;font-size:9px;}
  .reel-badge-top{margin:2px auto 4px;transform:scale(.84);}
  .reels-frame{max-width:392px;margin:0 auto;}
  .bonus-col{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px;border-top:none;}
  .bonus-title{grid-column:1/-1;font-size:11px;margin-bottom:1px;}
  .bcard{min-height:31px;padding:3px 6px;}
  .bcard-ico{width:22px;height:22px;}
  .bcard-txt b{font-size:8px;}
  .bcard-txt span,.cauldron-mults{font-size:7px;}
  .bcard-separator,.bonus-promo{display:none;}
  .spin-area{margin-top:-2px;height:70px;padding:0;}
  .spin-wrap{transform:scale(.68);transform-origin:center top;}
  .controls{min-height:92px;padding:12px 8px 5px;}
  .redeem-btn{position:fixed;top:auto;bottom:100px;left:50%;transform:translateX(-50%);padding:0.42rem 0.85rem;font-size:9px;}
  .ctrl-lbl{font-size:8px;}
  .c-val{font-size:18px;}
  .c-btn{width:32px;height:32px;}
  .status{min-height:24px;font-size:12px;}
}