/* ============================================================
   The Casino — the machine
   ============================================================ */
:root{
  --cell:134px;          /* reel cell height — JS reads this */
  --gold:#d8b976;
  --gold-hot:#ffe9b8;
}

.casino-page{background:#080706}

/* deep floor light behind everything */
.floor{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 50% -8%, rgba(184,152,92,.16) 0%, transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(120,26,26,.10) 0%, transparent 60%);
}

.casino{padding:clamp(5rem,9vh,6.5rem) clamp(.9rem,3vw,2.5rem) 0;max-width:1180px;margin:0 auto}

.casino-head{text-align:center;max-width:42rem;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.casino-title{font-family:var(--display);font-weight:300;letter-spacing:.01em;
  font-size:clamp(2.6rem,7.5vw,5rem);line-height:.98;margin:.35rem 0 .9rem}
.casino-title em{font-style:italic;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 55%,#8c6f3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.casino-lede{color:var(--dim);line-height:1.7;font-size:.96rem}

/* ============================================================
   Cabinet
   ============================================================ */
.cabinet{
  position:relative;max-width:940px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:clamp(.8rem,2vw,1.6rem);
  align-items:stretch;
}

.machine{
  position:relative;min-width:0;
  background:linear-gradient(168deg,#1c160e 0%,#0c0a08 55%,#141009 100%);
  border:1px solid rgba(184,152,92,.34);
  border-radius:6px;
  box-shadow:
    0 60px 130px -50px #000,
    0 0 90px -30px rgba(184,152,92,.28),
    inset 0 1px 0 rgba(255,235,190,.10);
  padding:clamp(.9rem,2.2vw,1.5rem);
}
/* brass bevel */
.machine::before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(184,152,92,.18);
  border-radius:3px;pointer-events:none;
}

/* ---------- Readouts ---------- */
.machine-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:.2rem .3rem 1rem;margin-bottom:.9rem;
  border-bottom:1px solid rgba(184,152,92,.2);
}
.meter{text-align:center}
.meter:first-child{text-align:left}
.meter:last-child{text-align:right}
.meter-label{display:block;font-size:.54rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dimmer);margin-bottom:.25rem}
.meter-value{
  display:block;font-family:var(--display);font-weight:400;line-height:1.1;
  font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.jackpot{
  text-align:center;padding:.35rem 1.3rem;
  border:1px solid rgba(184,152,92,.4);border-radius:3px;
  background:radial-gradient(120% 180% at 50% 0%, rgba(184,152,92,.18), transparent 70%);
}
.jackpot .meter-value{
  color:var(--gold);text-shadow:0 0 22px rgba(216,185,118,.45);
  font-size:clamp(1.7rem,3.8vw,2.7rem);
}
.jackpot.hot{animation:jackHot .55s ease infinite}
@keyframes jackHot{
  0%,100%{border-color:rgba(184,152,92,.4);box-shadow:none}
  50%{border-color:var(--gold-hot);box-shadow:0 0 40px rgba(255,233,184,.5)}
}
.jackpot.hot .meter-value{color:var(--gold-hot);text-shadow:0 0 34px rgba(255,233,184,.9)}

.bet-row{display:flex;align-items:center;gap:.45rem;justify-content:flex-end}
.bet-row .meter-value{font-size:1.45rem;min-width:3ch;text-align:center}
.bet-btn{
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
  background:rgba(184,152,92,.07);border:1px solid rgba(184,152,92,.32);color:var(--gold);
  font:inherit;font-size:1.05rem;line-height:1;border-radius:3px;
  transition:background .25s,border-color .25s,color .25s,transform .2s;
}
.bet-btn:hover:not(:disabled){background:rgba(184,152,92,.2);border-color:var(--gold);transform:translateY(-1px)}
.bet-btn:disabled{opacity:.25;cursor:not-allowed}

/* ---------- Reel window ---------- */
.reels{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:#050403;padding:6px;border-radius:4px;
  border:1px solid rgba(184,152,92,.22);
  box-shadow:inset 0 0 70px rgba(0,0,0,.95);
}
.reel{
  position:relative;overflow:hidden;background:#0a0806;border-radius:2px;
  height:calc(var(--cell) * 3);
}
/* curved-glass shading */
.reel::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(5,4,3,.96) 0%, rgba(5,4,3,.5) 12%,
      transparent 30%, transparent 70%, rgba(5,4,3,.5) 88%, rgba(5,4,3,.96) 100%),
    linear-gradient(105deg, transparent 38%, rgba(255,240,205,.05) 48%, transparent 56%);
}
.reel-strip{will-change:transform}
.reel-strip.blur{filter:blur(5px)}

.cell{
  height:var(--cell);display:grid;place-items:center;padding:9px;
}
.cell img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;
  border:1px solid rgba(184,152,92,.28);
  filter:grayscale(.12) contrast(1.06) brightness(1.04);
  transition:filter .4s ease,border-color .4s ease,box-shadow .4s ease;
}

/* ---------- Paylines ---------- */
.lines{position:absolute;inset:6px;z-index:4;pointer-events:none}
.line{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(184,152,92,.35),transparent);
  opacity:.35;transition:opacity .35s ease,box-shadow .35s ease,background .35s ease;
}
.line.l0{top:calc(var(--cell) * .5)}
.line.l1{top:calc(var(--cell) * 1.5)}
.line.l2{top:calc(var(--cell) * 2.5)}
.line.hit{
  opacity:1;background:linear-gradient(90deg,transparent,var(--gold-hot),transparent);
  box-shadow:0 0 26px 5px rgba(255,233,184,.6);
}
/* winning cells glow */
.cell.hit img{
  filter:grayscale(0) contrast(1.12) brightness(1.12);
  border-color:var(--gold-hot);
  box-shadow:0 0 28px rgba(255,233,184,.55), inset 0 0 30px rgba(255,233,184,.18);
}
.reels.win{animation:winPulse .8s ease}
@keyframes winPulse{
  0%,100%{box-shadow:inset 0 0 70px rgba(0,0,0,.95)}
  45%{box-shadow:inset 0 0 70px rgba(0,0,0,.95), 0 0 70px rgba(255,233,184,.42)}
}

/* ---------- Verdict + controls ---------- */
.verdict{
  text-align:center;margin:1rem 0 .9rem;min-height:1.5em;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer);
  transition:color .3s ease;
}
.verdict.good{color:var(--gold-hot);text-shadow:0 0 20px rgba(255,233,184,.4)}
.verdict.bad{color:var(--dim)}

.machine-controls{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap}
.spin{
  cursor:pointer;font:inherit;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 48%,#9c7c42);
  color:#1a1206;border:1px solid rgba(255,233,184,.6);
  padding:.9rem 3.4rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  box-shadow:0 10px 30px -12px rgba(216,185,118,.7), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s var(--ease),box-shadow .3s,filter .3s,opacity .3s;
}
.spin-label{font-size:.86rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.spin-sub{font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;opacity:.62}
.spin:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(216,185,118,.85)}
.spin:active:not(:disabled){transform:translateY(1px)}
.spin:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.3)}

.reset{
  background:transparent;border:1px solid rgba(184,152,92,.3);color:var(--dim);cursor:pointer;font:inherit;
  padding:.9rem 1.3rem;border-radius:3px;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;transition:all .3s ease;
}
.reset:hover:not(:disabled){border-color:var(--gold);color:var(--ink)}
.reset:disabled{opacity:.3;cursor:not-allowed}

/* ---------- Cabinet ticker ---------- */
.cab-ticker{
  margin-top:1rem;padding:.55rem 0;overflow:hidden;
  border-top:1px solid rgba(184,152,92,.18);
}
.cab-ticker-row{
  display:flex;gap:2.4rem;white-space:nowrap;width:max-content;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(184,152,92,.42);
  animation:drift 52s linear infinite;
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   The lever
   ============================================================ */
.lever{
  width:80px;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
}
.lever:disabled{cursor:not-allowed;opacity:.4}

/* the housing the arm actually travels in */
.lever-well{
  position:relative;width:34px;height:300px;border-radius:17px;
  background:linear-gradient(90deg,#080706,#241d13 46%,#080706);
  border:1px solid rgba(184,152,92,.22);
  box-shadow:inset 0 0 26px rgba(0,0,0,.95);
}
.lever-arm{
  position:absolute;top:-28px;left:50%;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  transform:translateX(-50%) translateY(0);
  transition:transform .17s cubic-bezier(.4,0,.6,1);
}
.lever.pulled .lever-arm{transform:translateX(-50%) translateY(186px)}
.lever:hover:not(:disabled) .lever-arm{transform:translateX(-50%) translateY(14px)}
.lever-ball{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #fff6e2, var(--gold) 46%, #6b4f20 100%);
  box-shadow:0 10px 26px -6px rgba(0,0,0,.9), 0 0 30px -6px rgba(216,185,118,.6),
             inset 0 -6px 14px rgba(0,0,0,.45);
}
.lever-rod{
  width:11px;height:150px;margin-top:-8px;border-radius:6px;
  background:linear-gradient(90deg,#4a3a20,#e8d3a1 42%,#8a6d3c 72%,#3d3019);
  box-shadow:0 0 16px -4px rgba(0,0,0,.95);
}
.lever-hint{
  font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer);white-space:nowrap;
}

/* ============================================================
   Paytable + stream
   ============================================================ */
.paytable,.stream{max-width:960px;margin:clamp(4rem,8vw,6.5rem) auto 0;text-align:center}
.pt-title{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:.9rem}
.pt-note{color:var(--dim);font-size:.96rem;line-height:1.7;max-width:40rem;margin:0 auto 2.2rem;font-style:italic}

.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;text-align:left}
.pt-row{
  display:flex;align-items:center;gap:.85rem;padding:.65rem;
  border:1px solid var(--line-soft);background:var(--card);border-radius:3px;
  transition:border-color .35s ease,transform .35s var(--ease);
}
.pt-row:hover{border-color:rgba(184,152,92,.45);transform:translateY(-2px)}
.pt-row img{width:52px;height:52px;flex:0 0 auto;object-fit:cover;border-radius:2px;
  border:1px solid rgba(184,152,92,.3);filter:grayscale(.3)}
.pt-meta{min-width:0;flex:1}
.pt-name{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.pt-sub{display:block;font-size:.62rem;color:var(--dimmer);line-height:1.45;margin-top:.22rem}
.pt-pay{font-family:var(--display);font-size:1.2rem;color:var(--gold);flex:0 0 auto}

.stream-text{
  border-left:1px solid rgba(184,152,92,.3);padding:.4rem 0 .4rem 1.5rem;text-align:left;
  max-width:44rem;margin:0 auto;color:var(--dim);font-style:italic;line-height:1.85;
}
.stream-text p + p{margin-top:1rem}
.stream-foot{
  margin:2.4rem auto 0;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);max-width:36rem;line-height:1.9;
}
.casino + .footer,.footer{margin-top:clamp(4rem,8vw,6rem)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:820px){
  :root{--cell:124px}
  .cabinet{grid-template-columns:1fr}
  .lever{width:100%;height:74px;padding-top:0;flex-direction:row;justify-content:center;gap:1rem}
  .lever-hint{display:none}
  .lever-well{width:190px;height:26px;border-radius:13px}
  .lever-arm{position:absolute;top:50%;left:0;transform:translate(0,-50%);flex-direction:row;align-items:center;gap:0}
  .lever:hover:not(:disabled) .lever-arm{transform:translate(10px,-50%)}
  .lever.pulled .lever-arm{transform:translate(126px,-50%)}
  .lever-rod{width:120px;height:11px;margin:0 0 0 -8px;order:2}
  .lever-ball{width:38px;height:38px}
  .lever::after{content:"Pull";font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer)}
}
@media (max-width:560px){
  :root{--cell:96px}
  .machine-top{grid-template-columns:1fr 1fr;gap:.7rem .4rem}
  .jackpot{grid-column:1/-1;order:-1}
  .meter:last-child{text-align:right}
  .spin{flex:1;padding:.9rem 1.6rem}
}
@media (max-width:380px){
  :root{--cell:82px}
}

@media (prefers-reduced-motion:reduce){
  .cab-ticker-row{animation:none}
  .reels.win,.jackpot.hot{animation:none}
  .reel-strip.blur{filter:none}
  .lever.pulled .lever-arm{transform:translateY(60px)}
}