/* Super Slot Pro v10 - robust publish-ready
   Frame/glow inspired by slotbuffalo, implemented safely. */
:root{
  --sym: 200px;
  --gap: clamp(8px, 1.2vw, 14px);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --gold: rgba(255,210,110,.95);
  --glass: rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%
  padding-bottom: 150px;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(255,210,110,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(255,60,60,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(91,184,255,.10), transparent 60%),
    linear-gradient(180deg, #0b0b12, #06060a);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  overflow:hidden;
}

@keyframes neonSpin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes neonPulse{ 0%,100%{opacity:.55; filter:blur(14px)} 50%{opacity:.9; filter:blur(18px)} }

.app{
  width:min(1160px, 96vw);
  
  display:flex;
  flex-direction:column;
  gap: 12px;
max-width: 100%;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  flex-wrap: wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 950;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.92;
}
.brand .dot{opacity:.6}
.topActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

 .frame{
  border-image: conic-gradient(from 180deg,
    rgba(255,210,110,1),
    rgba(255,60,60,.95),
    rgba(91,184,255,.95),
    rgba(255,210,110,1)
  ) 1;
  box-shadow:
    0 40px 120px rgba(0,0,0,.62),
    0 0 22px rgba(255,210,110,.22),
    0 0 36px rgba(255,60,60,.12),
    0 0 36px rgba(91,184,255,.12);

  position:relative;
  border-radius: 26px;
  padding: 14px;
  background: rgba(0,0,0,.22);
  border: 3px solid transparent;
  box-shadow: 0 40px 120px rgba(0,0,0,.62);
  overflow:hidden;
  isolation:isolate;
}
.frame::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px rgba(255,210,110,.16), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;
  z-index:-1;
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 14px;
  position:relative;
}

.hud{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.card{
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.card .k{
  font-size: 11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.card .v{
  margin-top:6px;
  font-size: 24px;
  font-weight: 900;
}
.card.bonus{
  border-color: rgba(91,184,255,.22);
  background: linear-gradient(180deg, rgba(91,184,255,.12), rgba(0,0,0,.24));
}

.window{
  border: 3px solid transparent;
  border-image: conic-gradient(from 90deg,
    rgba(255,210,110,1),
    rgba(91,184,255,.95),
    rgba(255,60,60,.90),
    rgba(255,210,110,1)
  ) 1;
  box-shadow:
    0 0 18px rgba(255,210,110,.18),
    inset 0 0 0 1px rgba(255,255,255,.10);

  position:relative;
  border-radius: 22px;
  padding: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  isolation:isolate;
}
.window::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 2px rgba(255,210,110,.14),
              inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
  z-index:-1;
}

.scan{display:none}

.reelGrid{
  display:flex;
  gap: var(--gap);
  justify-content:center;
  align-items:stretch;
  position:relative;
  z-index:2;
}
.reel{
  width: var(--sym);
  height: calc(var(--sym) * 3);
  border-radius: 18px;
  overflow:hidden;
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(28,28,38,.62) 45%, rgba(0,0,0,.72));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 10px 28px rgba(0,0,0,.55);
}
.strip{ position:absolute; left:0; top:0; will-change: transform; }
.cell{
  width: var(--sym);
  height: var(--sym);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cell img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.13);
  filter:
    brightness(1.10)
    saturate(1.22)
    contrast(1.04)
    drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.reel.spinning .cell img{
  /* no blur: keep crisp symbols while spinning */
  filter: brightness(1.10) saturate(1.22) contrast(1.04) drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.paylines{
  position:absolute; inset: 12px;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
  z-index:3;
}
.paylines.show{opacity:1}
.paylines polyline{
  vector-effect: non-scaling-stroke;
  fill:none;
  stroke: rgba(255,210,110,.95);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255,210,110,.45));
}

.winCell::after{
  content:"";
  position:absolute; inset:10px;
  border-radius: 18px;
  border: 2px solid rgba(255,210,110,.95);
  box-shadow: 0 0 18px rgba(255,210,110,.55), inset 0 0 16px rgba(255,210,110,.25);
  pointer-events:none;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
}

.btn{
  border:none;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor:pointer;
  color: var(--text);
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
  display:flex; align-items:center; gap:10px;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.main{
  background: linear-gradient(180deg, #ff5252, #b10000);
  border: 1px solid rgba(255,255,255,.18);
  padding: 14px 18px;
  min-width: 210px;
  justify-content:center;
  font-size: 18px;
}
.btn.ghost{background: rgba(0,0,0,.22);}

.betbox{
  display:flex; align-items:center; gap:10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 10px;
}
.betbox .mid{min-width: 140px; text-align:center}
.betbox .lab{font-size:11px; color: var(--muted); letter-spacing:.12em; text-transform:uppercase}
.betbox .val{font-weight: 950; font-size: 20px; margin-top:4px}

.hint{
  margin-top: 10px;
  opacity:.72;
  font-size: 13px;
  text-align:center;
}

/* Fullscreen */
.fsExit{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  display:none;
  width: 46px; height:46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
body.isFullscreen .fsExit{display:block}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:80;}
.modal.show{display:flex}
.modal .back{position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter: blur(6px);}
.modal .card{position:relative; width:min(560px,92vw); border-radius:22px; padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 35px 120px rgba(0,0,0,.6);}
.modal .close{position:absolute; right:12px; top:12px; border:none; background: rgba(0,0,0,.25);
  color: var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px; cursor:pointer;}
.modal .title{font-weight:950; font-size:22px; letter-spacing:.10em; text-transform:uppercase;}
.modal .body{margin-top:10px; color: rgba(255,255,255,.86); line-height:1.45;}
.modal .actions{margin-top:14px; display:flex; justify-content:flex-end;}

@media (max-width: 980px){
  .hud{grid-template-columns: repeat(2, 1fr);}
  .btn.main{min-width: 170px;}
}
@media (max-height: 760px){
  :root{ --sym: 200px; }
}

/* No scrollbars anywhere */
.reel, .window, .panel, .frame, .app { overflow:hidden !important; }
.reel * { scrollbar-width: none; }
.reel *::-webkit-scrollbar { width:0; height:0; }

/* FX canvas overlay */
.fx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 78;
}

/* Reel drum highlight */
.reel::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120px 240px at 50% 35%, rgba(255,255,255,.08), transparent 70%);
  pointer-events:none;
}

@keyframes winGlow{
  0%,100%{ box-shadow: 0 0 0 rgba(255,210,110,0); }
  50%{ box-shadow: 0 0 26px rgba(255,210,110,.35); }
}
.winCell{
  animation: winGlow 1.1s ease-in-out infinite;
}

/* Glossy reflection (slot LED feel) */
.cell{ position:relative; }
.cell::before{
  content:"";
  position:absolute;
  inset: 10% 10% 55% 10%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: skewX(-12deg);
  opacity: .55;
  pointer-events:none;
  filter: blur(0.2px);
}
.cell::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 18px;
  background: radial-gradient(120px 80px at 50% 35%, rgba(255,255,255,.10), transparent 70%);
  opacity:.55;
  pointer-events:none;
}

/* Per-symbol LED halos */
.cell[data-sym="citron"] img{
  filter: brightness(1.12) saturate(1.28) contrast(1.05)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(255,235,110,.28))
    drop-shadow(0 0 26px rgba(255,235,110,.18));
}
.cell[data-sym="cerise"] img{
  filter: brightness(1.10) saturate(1.25) contrast(1.05)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(255,70,90,.26))
    drop-shadow(0 0 26px rgba(255,70,90,.16));
}
.cell[data-sym="raisin"] img{
  filter: brightness(1.10) saturate(1.28) contrast(1.05)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(210,120,255,.24))
    drop-shadow(0 0 26px rgba(210,120,255,.14));
}
.cell[data-sym="prune"] img{
  filter: brightness(1.10) saturate(1.26) contrast(1.05)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(140,120,255,.22))
    drop-shadow(0 0 26px rgba(140,120,255,.13));
}
.cell[data-sym="pasteque"] img{
  filter: brightness(1.10) saturate(1.22) contrast(1.05)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(120,255,160,.20))
    drop-shadow(0 0 26px rgba(255,80,110,.12));
}
.cell[data-sym="cloche"] img{
  filter: brightness(1.12) saturate(1.18) contrast(1.06)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(255,210,110,.28))
    drop-shadow(0 0 30px rgba(255,210,110,.18));
}
.cell[data-sym="sept"] img{
  filter: brightness(1.12) saturate(1.18) contrast(1.08)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(255,80,80,.26))
    drop-shadow(0 0 30px rgba(255,80,80,.16));
}
.cell[data-sym="diamant"] img{
  filter: brightness(1.14) saturate(1.12) contrast(1.10)
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(140,210,255,.28))
    drop-shadow(0 0 34px rgba(140,210,255,.18));
}

/* Slight aura on the cell itself for depth */
.cell[data-sym="diamant"], .cell[data-sym="sept"], .cell[data-sym="cloche"]{
  filter: drop-shadow(0 0 10px rgba(255,255,255,.05));
}


/* Footer fixed bottom */
.siteFooter{
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 14px;
  font-size: 12px;
  opacity:.75;
  z-index: 80;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.siteFooter .homeBtn{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  text-decoration:none;
  font-size: 16px;
}
.siteFooter .homeBtn:hover{
  opacity:1;
  box-shadow: 0 0 14px rgba(255,210,110,.35);
}

/* Near-miss subtle flash */
.reel.nearMiss{
  box-shadow: inset 0 0 0 2px rgba(255,235,110,.18), 0 0 18px rgba(255,235,110,.18);
}
.reel.nearMiss::after{
  opacity:.9;
}

/* Held reel visual */
.reel.held{
  outline: 2px solid rgba(140,210,255,.22);
  box-shadow: inset 0 0 0 2px rgba(140,210,255,.18), 0 0 22px rgba(140,210,255,.18);
}
.reel.held::after{ opacity:.85; }

/* Tap friendly */
.reelGrid{ cursor:pointer; touch-action: manipulation; }

/* Paylines overlay */
.paylinesOverlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;}
.paylinesOverlay.show{display:flex;}
.paylinesOverlay .back{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);}
.paylinesOverlay .panel{position:relative;width:min(820px,94vw);border-radius:22px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.40));border:1px solid rgba(255,255,255,.14);box-shadow:0 35px 120px rgba(0,0,0,.65);}
.paylinesOverlay .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.paylinesOverlay .title{font-weight:950;letter-spacing:.12em;text-transform:uppercase;opacity:.92;}
.paylinesOverlay .sub{font-size:12px;opacity:.72;margin-top:4px;}
.paylinesOverlay .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.paylinesOverlay .iconBtn{width:44px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:rgba(255,255,255,.92);cursor:pointer;font-weight:900;}
.paylinesOverlay .gridWrap{margin-top:10px;border-radius:18px;padding:12px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;}
.paylinesOverlay .miniGrid{width:100%;height:360px;display:block;}
.paylinesOverlay .hint{margin-top:10px;font-size:12px;opacity:.72;text-align:center;}
.paylinesOverlay .close{position:absolute;right:12px;top:12px;width:44px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:rgba(255,255,255,.92);cursor:pointer;font-weight:900;}
.paylinesOverlay svg .cellBox{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.10);stroke-width:2;}
.paylinesOverlay svg .line{fill:none;stroke:rgba(255,210,110,.95);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(255,210,110,.30));}
.paylinesOverlay svg .dot{fill:rgba(255,210,110,.95);filter:drop-shadow(0 0 10px rgba(255,210,110,.30));}

/* Audio controls */
.volWrap{
  display:flex;
  align-items:center;
  padding: 0 6px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
}
.vol{
  width: 110px;
  accent-color: rgba(255,210,110,.95);
}
.hudItem .s{
  font-size: 11px;
  opacity:.7;
  margin-top: 3px;
}

/* Win history */
.historyBar{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  transform: translateX(-50%);
  z-index: 79;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  font-size: 12px;
  opacity:.78;
  max-width: min(920px, 96vw);
  line-height: 1.2;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.historyBar .hTitle{ font-weight: 800; opacity:.8; }
.historyBar .hItems{ opacity:.85; }

/* Bonus tease flash */
.reel.tease{
  box-shadow: inset 0 0 0 2px rgba(140,210,255,.20), 0 0 22px rgba(140,210,255,.18);
}
.reel.tease::after{ opacity:.95; }

/* Paytable table */
.pt{ width:100%; border-collapse: collapse; font-size: 13px; }
.pt th, .pt td{ padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.10); text-align:center; }
.pt th{ text-transform: uppercase; letter-spacing:.08em; font-size: 12px; opacity:.85; }
.pt .ptSym{ text-align:left; font-weight: 900; }


/* Responsive: avoid overlaps on small screens */
@media (max-width: 560px){
  .topActions{ gap:8px; }
  .vol{ width: 84px; }
  .btn.ghost span:last-child{ display:none; } /* keep icon, hide label */
  .btn.ghost{ padding: 10px 12px; }
}
@media (max-width: 420px){
  .volWrap{ display:none; } /* hide volume slider, keep mute */
  body{ padding-bottom: 170px; }
  .historyBar{ font-size: 11px; padding: 7px 12px; }
}

/* Controls: keep Spin/Reset on the right */
.controls{ align-items: center; }
.rightBtns{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
}
@media (max-width: 560px){
  .controls{ justify-content: flex-start; }
  .rightBtns{ width: 100%; justify-content: flex-end; }
}

/* Line tease (near alignment) */
.reel.teaseLine{
  box-shadow: inset 0 0 0 2px rgba(255,210,110,.16), 0 0 22px rgba(255,210,110,.14);
}
.reel.teaseLine::after{ opacity:.95; }

@keyframes glossSweep{
  0%{ transform: translateX(-120%) skewX(-12deg); opacity:0; }
  15%{ opacity:.35; }
  60%{ opacity:.28; }
  100%{ transform: translateX(140%) skewX(-12deg); opacity:0; }
}

/* Gloss sweep element (inserted on wins) */
.winSweep{
  position:absolute;
  top: 8%;
  left: -60%;
  width: 90%;
  height: 44%;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none;
  animation: glossSweep 1.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Color-coded halos for WIN cells */
.winCell[data-sym="citron"]{ box-shadow: 0 0 0 2px rgba(255,235,110,.14), 0 0 26px rgba(255,235,110,.18); }
.winCell[data-sym="cerise"]{ box-shadow: 0 0 0 2px rgba(255,80,90,.14), 0 0 26px rgba(255,80,90,.18); }
.winCell[data-sym="diamant"]{ box-shadow: 0 0 0 2px rgba(140,210,255,.14), 0 0 28px rgba(140,210,255,.18); }