@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  --acid: #a6ff1e;
  --acid-dim: #6fbf12;
  --violet: #3b0a5c;
  --violet-deep: #1c0530;
  --ink: #0a0710;
  --blood: #d1263a;
  --warn: #ffce33;
  --chrome: #cdd3d8;
  --chrome-dark: #6b7278;
  --font-display: 'Creepster', 'Rajdhani', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--ink);
  font-family: var(--font-body);
  color: #eae6f0;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

#fogCanvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}

.app{
  position:relative; z-index:1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display:flex; flex-direction:column;
  padding: 14px 12px 20px;
}

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.brand{
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--acid);
  text-shadow: 0 0 6px rgba(166,255,30,0.65), 0 0 18px rgba(166,255,30,0.35), 2px 2px 0 #000;
  line-height:1;
}
.brand small{
  display:block; font-family: var(--font-body); font-size:10px; letter-spacing:3px;
  color: var(--chrome); font-weight:600; text-shadow:none; margin-top:2px;
}
.stars-pill{
  display:flex; align-items:center; gap:6px;
  background: linear-gradient(180deg, #241033, #150822);
  border: 1px solid #5c2a86;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight:700; font-size:15px;
  box-shadow: inset 0 0 8px rgba(166,255,30,0.08), 0 2px 4px rgba(0,0,0,0.5);
}
.stars-pill span.icon{ color: var(--warn); font-size:15px; }
.stars-pill span.val{ color:#fff; }

/* ---------- SCENE (full hero background art) ---------- */
.cabinet{
  position:relative;
  padding: 0;
  border: none;
  box-shadow: none;
  overflow:visible;
  background:none;
}
.scene{
  position:relative;
  width:100%;
  aspect-ratio: 1080 / 1920;
  background-image: var(--scene-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,0.65);
}
.hud-overlay{
  position:absolute; top:2.5%; right:3%; z-index:6;
  display:flex; align-items:center; gap:8px;
}
.reels-slot{
  position:absolute;
  top: 18.5%; left: 9%; right: 11%; bottom: 60%;
}
.plank-bet{
  position:absolute;
  left:4%; right:4%; top:71%; bottom:2%;
  display:flex; align-items:center; justify-content:center;
  z-index:6;
}
.plank-row{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; height:100%;
  padding: 8px 20px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #2b2f33 0%, #1c1f22 45%, #131517 100%);
  border-radius: 12px;
  border: 1px solid #0a0b0c;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.12),
    inset 0 -4px 10px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.5);
}
/* corner bolts, pure CSS — no extra markup */
.plank-row::before, .plank-row::after{
  content:''; position:absolute; top:7px; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd3d6, #6b6f72 55%, #2a2c2e);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.4);
}
.plank-row::before{ left:9px; }
.plank-row::after{ right:9px; }
.plank-bolt-bl, .plank-bolt-br{
  position:absolute; bottom:7px; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd3d6, #6b6f72 55%, #2a2c2e);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.4);
}
.plank-bolt-bl{ left:9px; } .plank-bolt-br{ right:9px; }

.bet-arrow{
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  background: linear-gradient(180deg,#565b60 0%, #34373a 50%, #1c1e20 100%);
  border: 1px solid #0d0e0f;
  color: var(--acid); font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -3px 4px rgba(0,0,0,0.5),
    0 2px 3px rgba(0,0,0,0.5),
    0 0 7px rgba(166,255,30,0.35);
  text-shadow: 0 0 6px rgba(166,255,30,0.8);
}
.bet-arrow:active{
  transform: translateY(1px) scale(0.96);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(255,255,255,0.1);
}

.bet-display{
  cursor:pointer; text-align:center; min-width:76px;
  padding: 5px 10px 6px;
  background: linear-gradient(180deg, #060a05, #0d150a 60%, #060a05);
  border-radius: 7px;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.85),
    inset 0 0 10px rgba(166,255,30,0.08),
    0 0 0 1px #000,
    0 0 0 2px #35383b,
    0 1px 1px rgba(255,255,255,0.15);
}
.bet-display .label{
  font-size:8px; letter-spacing:1.5px; color:rgba(166,255,30,0.55); font-weight:700;
  font-family: var(--font-body);
}
.bet-display .value{
  font-family: var(--font-display); font-size:24px; color: var(--acid);
  text-shadow: 0 0 8px rgba(166,255,30,0.85), 0 0 2px rgba(166,255,30,0.6);
  line-height:1.15;
}
.bet-display .star{ font-family: var(--font-body); font-size:15px; }

/* ---------- REEL GRID ---------- */
.reels-wrap{
  position:relative;
  display:flex;
  gap: 6px;
  height:100%;
  background: rgba(5,3,10,0.52);
  border-radius: 8px;
  padding: 5px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.06);
}
.reel{
  position:relative;
  flex:1;
  height: 100%;
  overflow:hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(166,255,30,0.04), rgba(0,0,0,0.22));
}
.reel-strip{
  position:absolute; top:0; left:0; width:100%;
  will-change: transform;
}
.cell{
  height: calc(100% / var(--visible-units, 3.5));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cell img{
  width: 68%; height:68%; object-fit:contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
}
.cell.win img{
  animation: winPulse 0.6s ease-in-out infinite alternate;
}
@keyframes winPulse{
  from{ filter: drop-shadow(0 0 6px rgba(166,255,30,0.9)) drop-shadow(0 2px 5px rgba(0,0,0,0.7)); transform: scale(1); }
  to{ filter: drop-shadow(0 0 16px rgba(166,255,30,1)) drop-shadow(0 2px 5px rgba(0,0,0,0.7)); transform: scale(1.08); }
}
.reel-shade{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,0.65) 100%);
}

.particles-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:5;
}

/* placeholder scatter frame */
.cell.is-scatter img{ filter: drop-shadow(0 0 5px rgba(255,206,51,0.7)); }

/* ---------- WIN BANNER (real art) ---------- */
.win-banner{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) scale(0.7);
  text-align:center; z-index:10;
  opacity:0; pointer-events:none;
}
.win-banner.show{
  animation: bannerPop 1.8s ease forwards;
}
.win-banner img{
  width: 62%; max-width:230px; display:block; margin:0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7));
}
.win-banner .amount{
  font-family: var(--font-body); font-weight:700; font-size:18px; color:#fff;
  text-shadow: 1px 1px 0 #000; margin-top:2px;
}
@keyframes bannerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-4deg); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(1deg); }
  25%{ transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
}

/* ---------- SPIN / AUTO (chunky console buttons on the metal plate) ---------- */
.spin-btn{
  width: 62px; height:62px; border-radius:50%; flex-shrink:0;
  position:relative; cursor:pointer;
  background: linear-gradient(180deg,#5a5f63, #2c2f31 55%, #17181a);
  box-shadow:
    0 5px 0 #0a0b0c,
    0 6px 10px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.3);
}
.spin-btn::before{
  content:'';
  position:absolute; inset:5px; border-radius:50%;
  background: radial-gradient(circle at 35% 28%, #d5ffa0, var(--acid) 45%, var(--acid-dim) 88%);
  box-shadow:
    0 3px 0 #2e5c05,
    inset 0 -5px 8px rgba(0,0,0,0.35),
    inset 0 3px 5px rgba(255,255,255,0.55),
    0 0 14px rgba(166,255,30,0.65);
}
.spin-btn::after{
  content:'';
  position:absolute; inset:0; margin:auto; width:0; height:0; z-index:1;
  border-left: 15px solid #10230a; border-top:9px solid transparent; border-bottom:9px solid transparent;
  left:2px; top:0; bottom:0;
}
.spin-btn:active{ transform: translateY(3px); }
.spin-btn:active::before{ box-shadow: inset 0 3px 6px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.2); }
.spin-btn.spinning::after{
  border:none; width:20px; height:20px; border-radius:50%;
  border: 3px solid #10230a; border-top-color: transparent;
  animation: spinIcon 0.7s linear infinite;
  left:0;
}
@keyframes spinIcon{ to{ transform: rotate(360deg); } }
.spin-btn.disabled{ filter: grayscale(0.6) brightness(0.7); pointer-events:none; }

.auto-btn{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  position:relative; cursor:pointer;
  background: linear-gradient(180deg,#4a4f54, #26282a 55%, #141516);
  box-shadow:
    0 4px 0 #0a0b0c,
    0 5px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.25);
}
.auto-btn::before{
  content:'';
  position:absolute; inset:4px; border-radius:50%;
  background: linear-gradient(180deg,#2e1a48,#160a24);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 2px rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
}
.auto-btn span{
  position:relative; z-index:1;
  font-size:8.5px; font-weight:700; letter-spacing:0.3px; color:#b8a4d8;
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}
.auto-btn .led{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; z-index:2;
  background: #4a2a68; box-shadow: none;
}
.auto-btn:active{ transform: translateY(2px); }
.auto-btn.active::before{ background: linear-gradient(180deg,#4a3a00,#2a2000); }
.auto-btn.active .led{
  background: var(--warn);
  box-shadow: 0 0 6px 2px rgba(255,206,51,0.9);
}
.auto-btn.active span{ color: var(--warn); }

/* ---------- ROADMAP PANEL ---------- */
.roadmap{
  margin-top:16px; background: rgba(20,10,30,0.5); border:1px solid #2c1640; border-radius:12px; padding:10px 12px;
}
.roadmap h4{
  margin:0 0 8px; font-size:11px; letter-spacing:2px; color:#9a8bb0; font-weight:700; text-transform:uppercase;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-size:11px; padding:4px 9px; border-radius:20px; border:1px dashed #5c3a7a;
  color:#c9b8e0; background: rgba(92,58,122,0.15);
}
.chip.win-chip{ border-color: #7a5c1a; color:#e0cf9a; background: rgba(122,92,26,0.15); }

.footnote{
  margin-top:12px; font-size:11px; color:#665a78; text-align:center; line-height:1.5;
}

/* ---------- SCENE / BACKGROUND ---------- */
.bg-scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-scene svg{ position:absolute; }
.bg-vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 100% at 50% 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.scanlines{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.06;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.beacon{
  position:fixed; top:-120px; right:-120px; width:340px; height:340px; z-index:0; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(209,38,58,0.35) 0deg 12deg, transparent 12deg 360deg);
  animation: beaconSpin 3.4s linear infinite;
  filter: blur(2px);
}
@keyframes beaconSpin{ to{ transform: rotate(360deg); } }

.drip{
  position:fixed; top:0; width:3px; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(166,255,30,0.9), rgba(166,255,30,0.1));
  border-radius: 2px;
  filter: drop-shadow(0 0 3px rgba(166,255,30,0.7));
}

.flash-overlay{
  position:fixed; inset:0; z-index:15; pointer-events:none;
  background: rgba(166,255,30,0.35); opacity:0;
}
.flash-overlay.go{ animation: flashPop 0.35s ease-out; }
@keyframes flashPop{ 0%{opacity:0.9;} 100%{opacity:0;} }

.cabinet.shake{ animation: shakeCab 0.45s ease; }
@keyframes shakeCab{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-4px,2px) rotate(-0.4deg); }
  40%{ transform: translate(4px,-2px) rotate(0.4deg); }
  60%{ transform: translate(-3px,1px) rotate(-0.3deg); }
  80%{ transform: translate(3px,-1px) rotate(0.3deg); }
}

.cell{ transform: translateY(0); }
.cell.bob{ animation: bobY 2.6s ease-in-out infinite; }
@keyframes bobY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.win-banner img{ filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7)) url(#melt); }

/* ---------- PLACEHOLDER GALLERY ---------- */
.gallery{ margin-top:14px; }
.gallery h4{ margin:0 0 8px; font-size:11px; letter-spacing:2px; color:#9a8bb0; font-weight:700; text-transform:uppercase; }
.gallery-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.ghost-card{
  position:relative; flex:0 0 auto; width:78px; height:78px; border-radius:12px;
  background: linear-gradient(160deg, #1c0e2a, #100819);
  border: 1.5px dashed #5c3a7a;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ghost-card svg{ width:60%; height:60%; opacity:0.55; }
.ghost-card .ribbon{
  position:absolute; top:8px; left:-22px; width:110px; text-align:center;
  background: var(--blood); color:#fff; font-size:8px; font-weight:700; letter-spacing:0.5px;
  transform: rotate(-38deg); padding:2px 0; box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ghost-card.banner-card{ width:110px; }
.ghost-card.banner-card .mock{ font-family: var(--font-display); font-size:15px; opacity:0.6; letter-spacing:1px; }

/* ---------- CONFIG PANEL ---------- */
.gear-btn{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(180deg,#241033,#150822); border:1px solid #5c2a86;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:#c9b8e0;
  cursor:pointer;
}
.gear-btn:active{ transform:scale(0.92); }
.config-panel{
  display:none;
  background: linear-gradient(160deg,#1a0d28,#0e0716);
  border:1px solid #3a1a52; border-radius:14px; padding:14px; margin-bottom:12px;
}
.config-panel.open{ display:block; }
.config-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:2px; color:#c9b8e0; font-weight:700; margin-bottom:10px;
}
.config-close{ cursor:pointer; color:#a98cd6; padding:2px 6px; }
.config-row{ margin-bottom:12px; }
.config-row label{ display:flex; justify-content:space-between; font-size:12px; color:#b7a8cc; margin-bottom:6px; }
.config-row label b{ color: var(--acid); }
.config-row input[type=range]{ width:100%; accent-color: var(--acid); }
.seg{ display:flex; gap:6px; }
.seg button{
  flex:1; padding:7px 4px; font-size:11px; border-radius:8px; border:1px solid #3a1a52;
  background:#170c24; color:#a98cd6; cursor:pointer; font-family:var(--font-body); font-weight:600;
}
.seg button.active{ background: var(--acid); color:#0a0710; border-color: var(--acid); }
.config-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0;
  font-size:11px;
}
.config-stats div{ background:rgba(255,255,255,0.03); border-radius:8px; padding:7px 9px; }
.config-stats span{ display:block; color:#8a7aa0; margin-bottom:2px; }
.config-stats b{ color:#fff; font-size:14px; }
.sim-btn{
  width:100%; padding:10px; border-radius:10px; border:1px solid var(--acid-dim);
  background: rgba(166,255,30,0.1); color: var(--acid); font-weight:700; font-size:12px;
  cursor:pointer; font-family:var(--font-body);
}
.sim-result{ font-size:12px; color:#d5c8e8; margin-top:8px; min-height:16px; }
.config-note{ font-size:10.5px; color:#6a5c80; margin-top:10px; line-height:1.5; }

/* ---------- BET MODAL ---------- */
.bet-display{ cursor:pointer; }

.bet-modal-backdrop{
  display:none; position:fixed; inset:0; z-index:50;
  background: rgba(5,2,10,0.72); backdrop-filter: blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.bet-modal-backdrop.open{ display:flex; }
.bet-modal{
  width:100%; max-width:400px;
  background: linear-gradient(180deg,#1c0e2a,#0d0714);
  border:1px solid #3a1a52; border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(166,255,30,0.08);
  animation: modalPop 0.28s ease;
}
@keyframes modalPop{
  from{ opacity:0; transform: scale(0.92) translateY(10px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
.bet-modal-art{
  position:relative;
  width:100%; aspect-ratio: 400/150;
  background:
    repeating-linear-gradient(45deg, rgba(166,255,30,0.05) 0 10px, rgba(166,255,30,0.02) 10px 20px),
    radial-gradient(120% 160% at 50% 0%, #2a1440 0%, #14081f 70%);
  border-bottom:1px dashed #4a2568;
  display:flex; align-items:center; justify-content:center;
}
.art-placeholder-tag{
  font-size:10.5px; letter-spacing:1px; color:#8a76a8;
  border:1px dashed #5c3a7a; border-radius:20px; padding:5px 14px;
  background: rgba(0,0,0,0.25);
}
.bet-modal-body{ padding:16px 18px 20px; }
.bet-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:2px; color:#c9b8e0; font-weight:700; margin-bottom:14px;
}
.bet-big-display{
  text-align:center; font-family:var(--font-display); font-size:42px; color:var(--acid);
  text-shadow: 0 0 12px rgba(166,255,30,0.6); letter-spacing:1px; margin-bottom:14px;
}
.bet-big-display .star{ font-family: var(--font-body); font-size:26px; }
.chip-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:14px;
}
.bet-chip{
  padding:11px 0; border-radius:10px; border:1px solid #3a1a52;
  background:#170c24; color:#d5c8e8; font-weight:700; font-size:14px;
  font-family:var(--font-body); cursor:pointer;
}
.bet-chip.active{ background: var(--acid); color:#0a0710; border-color: var(--acid); box-shadow:0 0 12px rgba(166,255,30,0.5); }
#betSlider{ width:100%; accent-color: var(--acid); margin-bottom:16px; }
.bet-modal-actions{ display:flex; gap:10px; }
.bet-max-btn, .bet-confirm-btn{
  flex:1; padding:12px 0; border-radius:10px; font-weight:700; font-size:13px;
  font-family:var(--font-body); cursor:pointer; border:1px solid #3a1a52;
}
.bet-max-btn{ background:#170c24; color:#a98cd6; }
.bet-confirm-btn{ background: var(--acid); color:#0a0710; border-color:var(--acid); }