/* DGN Reels — 5x3, 20 fixed lines, free spins.
   Tokens, header and footer come from league.css; the account bar, buttons and
   modals come from rewards.css. This file builds the cabinet: a control rail
   on the left and the reels on the right, the way a real slot client is laid
   out, rather than a column of controls under the board. */

.rw-slots{--gold:var(--orange);--gold-lit:var(--orange-bright)}
/* The reels take the width they are given. --cell is resolved from the board
   width below, so the machine grows with the page instead of sitting small in
   the middle of it. */
.rw-slots .rw-machine{
  margin-top:1.25rem;padding:clamp(.8rem,2vw,1.4rem);
  border:1px solid var(--line);border-radius:1rem;background:var(--surface)
}

.rl{display:grid;grid-template-columns:clamp(15rem,22vw,19rem) minmax(0,1fr);gap:clamp(.8rem,2vw,1.4rem);align-items:start}

/* --- Control rail --------------------------------------------------------- */
.rl-rail{
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(.8rem,1.6vw,1.1rem);border:1px solid var(--line);border-radius:.9rem;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.006)),var(--inset)
}
.rl-modes{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.28rem;border:1px solid var(--line);border-radius:.6rem;background:#070807}
.rl-mode{
  min-height:2.5rem;border:0;border-radius:.45rem;background:transparent;color:var(--muted);
  font:800 .72rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer
}
.rl-mode:hover:not(:disabled){color:var(--ink)}
.rl-mode.is-on{background:rgba(255,255,255,.07);color:var(--ink)}
.rl-mode:disabled{opacity:.45;cursor:not-allowed}

.rl-go{
  width:100%;min-height:3.6rem;border:0;border-radius:.6rem;
  background:linear-gradient(var(--accent-bright),var(--accent));color:var(--accent-ink);
  font:900 1.05rem var(--font-display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 0 0 1px var(--accent-deep),0 12px 30px -16px var(--accent-glow);
  transition:filter .18s var(--ease),transform .18s var(--ease)
}
.rl-go:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.rl-go:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
/* During free spins the button is gold, so the screen never implies a spin is
   costing points when it is not. */
.rl-go.free{background:linear-gradient(var(--gold-lit),var(--gold));color:#1a1200;box-shadow:0 0 0 1px #a86c10,0 12px 30px -16px rgba(240,163,42,.6)}

.rl-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}
.rl-field-head label{color:var(--subtle);font:800 .58rem var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.rl-field-head span{font:900 1rem var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.rl-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.rl-chip{
  min-height:2.7rem;padding:.5rem .3rem;border:1px solid var(--line-2);border-radius:.5rem;
  background:#070807;color:var(--ink);font:900 .9rem var(--font-display);cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)
}
.rl-chip:hover:not(:disabled){border-color:var(--accent)}
.rl-chip.is-on{border-color:transparent;background:linear-gradient(var(--accent-bright),var(--accent));color:var(--accent-ink)}
.rl-chip:disabled{opacity:.4;cursor:not-allowed}

.rl-readout{display:grid;gap:.4rem}
.rl-readout>div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:.5rem;background:#070807}
.rl-readout dt{color:var(--subtle);font:800 .56rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.rl-readout dd{margin:0;font:800 .88rem var(--font-display);font-variant-numeric:tabular-nums}
#rwLastWin{color:var(--gold-lit)}

.rl-tools{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:auto;padding-top:.3rem}
.rl-tools button{
  display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.5rem;
  border:1px solid transparent;border-radius:.5rem;background:transparent;color:var(--muted);
  font:700 .64rem var(--font-display);letter-spacing:.07em;text-transform:uppercase;cursor:pointer
}
.rl-tools button:hover{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.rl-tools span{color:var(--subtle);font-size:.85rem}

/* Every control here is a preset, so repeated taps must not fire the iOS
   double-tap zoom. */
.rw-slots button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* --- Stage ---------------------------------------------------------------- */
.rl-stage{display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0}

.rl-board{
  --gutter:2.1rem;
  display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);
  align-items:stretch;gap:.35rem;width:100%;
  padding:clamp(.5rem,1.4vw,.9rem);border:1px solid var(--line-2);border-radius:1rem;
  background:
    radial-gradient(120% 80% at 50% 0,rgba(240,163,42,.09),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.005)),
    var(--inset);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
/* The cabinet changes colour for the duration of the feature. */
.rl-board.feature{
  border-color:var(--gold);
  background:
    radial-gradient(120% 80% at 50% 0,rgba(240,163,42,.22),transparent 64%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.008)),
    var(--inset)
}
.rl-board.feature .rw-reels{border-color:var(--gold-lit);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 34px -10px rgba(240,163,42,.55)}

/* Payline numbers, grouped by the row each line starts and ends on, exactly
   as the lines themselves are defined. */
.rl-nums{display:grid;grid-template-rows:repeat(3,1fr);gap:.3rem;margin:0;padding:0;list-style:none}
.rl-nums li{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.05rem;
  color:var(--subtle);font:700 .62rem var(--font-display);font-variant-numeric:tabular-nums;line-height:1.15
}
.rl-nums.right li{align-items:flex-start}
.rl-nums li b{font-weight:700;color:var(--subtle)}
/* A line that just paid lights its number on both rails. */
.rl-nums li b.lit{color:var(--gold-lit)}

.rw-reels{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;
  min-width:0;padding:.4rem;border:1px solid rgba(240,163,42,.28);border-radius:.7rem;
  background:#060706;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 45px -22px #000
}
/* Each reel is exactly three cells tall; --cell is set from the measured cell
   width in script so the window is always square-celled. */
.rw-reel{height:calc(var(--cell,4rem)*3);overflow:hidden;border-radius:.45rem;background:rgba(255,255,255,.018)}
.rw-strip{display:flex;flex-direction:column;will-change:transform;transform:translateY(0)}
/* Both the free roll and the settle travel upwards, so a reel never changes
   direction as it stops. */
.rw-strip.settle{transition:transform var(--settle,540ms) cubic-bezier(.2,1.18,.36,1)}
.rw-strip.rolling{animation:rw-roll var(--roll,420ms) linear infinite}
@keyframes rw-roll{from{transform:translateY(0)}to{transform:translateY(var(--roll-to))}}
.rw-strip.rolling .g,.rw-strip.rolling img{filter:blur(1px) drop-shadow(0 2px 6px rgba(0,0,0,.6))}

.rw-cell{
  display:grid;place-items:center;height:var(--cell,4rem);
  border-radius:.35rem;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.rw-cell .g{font-size:calc(var(--cell,4rem)*.52);line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
/* The symbol art is square with its own margin, so it is contained rather than
   stretched and never reaches the cell edge. */
.rw-cell img{width:calc(var(--cell,4rem)*.84);height:calc(var(--cell,4rem)*.84);object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

.rw-cell.win{
  background:linear-gradient(180deg,rgba(240,163,42,.32),rgba(240,163,42,.1));
  box-shadow:inset 0 0 0 1px var(--gold-lit),0 0 18px -2px rgba(240,163,42,.55);
  animation:rw-pulse 1s ease-in-out infinite
}
.rw-cell.win.wild{
  background:linear-gradient(180deg,rgba(180,247,36,.3),rgba(180,247,36,.08));
  box-shadow:inset 0 0 0 1px var(--accent-bright),0 0 20px -2px var(--accent-glow)
}
@keyframes rw-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@media(prefers-reduced-motion:reduce){
  .rw-cell.win{animation:none}
  .rw-strip.rolling{animation:none}
  .rw-strip.settle{transition:none}
}

/* --- Free spins banner ---------------------------------------------------- */
.rw-feature{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;
  width:100%;padding:.55rem .9rem;border:1px solid var(--gold);border-radius:.6rem;
  background:linear-gradient(180deg,rgba(240,163,42,.2),rgba(240,163,42,.05));
  color:var(--ink);font:800 .68rem var(--font-display);letter-spacing:.12em;text-transform:uppercase
}
.rw-feature[hidden]{display:none !important}
.rw-feature>b:first-child{color:var(--gold-lit)}
.rw-feature b{font-variant-numeric:tabular-nums}

/* --- Win readout ---------------------------------------------------------- */
.rw-win{min-height:2.8rem;display:grid;place-items:center;text-align:center}
.rw-win b{display:block;font:900 clamp(1.5rem,4vw,2.3rem) var(--font-display);letter-spacing:-.02em;color:var(--gold-lit);font-variant-numeric:tabular-nums}
.rw-win span{display:block;margin-top:.15rem;color:var(--subtle);font:800 .6rem var(--font-display);letter-spacing:.15em;text-transform:uppercase}
.rw-win.zero b{color:var(--subtle);font-size:clamp(1rem,3vw,1.25rem)}
.rw-win.big b{animation:rw-pop .5s var(--ease)}
@keyframes rw-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

.rw-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin:0;padding:0}
.rw-lines li{
  list-style:none;padding:.25rem .5rem;border:1px solid var(--line);border-radius:.4rem;
  background:rgba(240,163,42,.06);color:var(--muted);font:700 .66rem var(--font-body)
}
.rw-lines li b{color:var(--gold-lit);font-family:var(--font-display)}

.rw-slots .rw-msg{min-height:0;margin:0;text-align:left;font-size:.78rem}
.rw-slots .rw-msg:empty{display:none}

/* --- Modals --------------------------------------------------------------- */
.rw-modal{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1rem;background:rgba(3,4,3,.78);backdrop-filter:blur(4px)
}
.rw-modal[hidden]{display:none !important}
.rw-modal-card{
  width:min(100%,36rem);max-height:min(84vh,46rem);overflow:auto;
  padding:1.3rem;border:1px solid var(--line-2);border-radius:.9rem;background:var(--surface)
}
.rw-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.rw-modal-head h2{font:900 1.05rem var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.rw-modal-close{border:1px solid var(--line-2);border-radius:.5rem;background:var(--inset);color:var(--ink);width:2rem;height:2rem;font-size:1.1rem;line-height:1;cursor:pointer}
.rw-modal-close:hover{border-color:var(--accent);color:var(--accent)}
.rw-modal-card p{color:var(--muted);font-size:.85rem;margin-bottom:.7rem}
.rw-modal-card ul{margin:0 0 .8rem 1.1rem;color:var(--muted);font-size:.85rem}
.rw-modal-card li{margin-bottom:.3rem}

.rw-pay{width:100%;border-collapse:collapse}
.rw-pay th,.rw-pay td{padding:.5rem .55rem;border-bottom:1px solid var(--line);font-size:.78rem;text-align:right}
.rw-pay th:first-child,.rw-pay td:first-child{text-align:left}
.rw-pay th{color:var(--subtle);font:800 .56rem var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.rw-pay td.sym{display:flex;align-items:center;gap:.5rem;font-weight:700}
.rw-pay td.sym .g{font-size:1.15rem}
.rw-pay td.sym img{width:1.4rem;height:1.4rem;object-fit:contain}
.rw-pay td.n{color:var(--gold-lit);font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums}
.rw-pay-note{margin-top:.8rem;color:var(--subtle);font-size:.76rem}

.rw-hist{display:grid;gap:.45rem}
.rw-hist-row{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.5rem;background:var(--inset);font-size:.78rem}
.rw-hist-row .when{color:var(--subtle);font-size:.72rem}
.rw-hist-row .bet{color:var(--muted);font-variant-numeric:tabular-nums}
.rw-hist-row .won{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums;color:var(--subtle)}
.rw-hist-row.hit .won{color:var(--gold-lit)}
.rw-hist-row.free .when::after{content:" · free spin";color:var(--gold)}

/* --- Narrow screens ------------------------------------------------------- */
@media(max-width:900px){
  /* The rail goes under the reels: on a phone the board is the thing you want
     at the top of the screen, not the controls. */
  .rl{grid-template-columns:minmax(0,1fr)}
  .rl-rail{order:2}
  .rl-stage{order:1}
  .rl-tools{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  .rl-board{--gutter:1.5rem;gap:.2rem}
  .rl-nums li{font-size:.55rem}
  .rw-reels{gap:.22rem;padding:.25rem}
  .rl-tools{grid-template-columns:1fr 1fr}
}

/* --- Held wilds ----------------------------------------------------------- */
/* A wild carried over from an earlier free spin. Marked in the lime accent so
   a held skull is never mistaken for one that has just landed. */
.rw-cell{position:relative}
.rw-cell.held{
  background:linear-gradient(180deg,rgba(180,247,36,.22),rgba(180,247,36,.06));
  box-shadow:inset 0 0 0 2px var(--accent),0 0 16px -4px var(--accent-glow)
}
.rw-cell.held::after{
  content:"";position:absolute;inset:auto .18rem .18rem auto;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent)
}

/* --- Big win: Father Fingers ---------------------------------------------- */
.rw-bigwin{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:rgba(2,3,2,.86);backdrop-filter:blur(3px);cursor:pointer;
  animation:rw-fade .28s var(--ease)
}
@keyframes rw-fade{from{opacity:0}to{opacity:1}}
.rw-bigwin video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.rw-bigwin-card{
  position:relative;text-align:center;padding:1.4rem 2rem;
  border:1px solid var(--orange);border-radius:1rem;
  background:linear-gradient(180deg,rgba(240,163,42,.16),rgba(0,0,0,.6));
  box-shadow:0 0 60px -10px rgba(240,163,42,.5);
  animation:rw-pop .45s var(--ease)
}
.rw-bigwin-card .who{margin:0;color:var(--accent);font:900 .7rem var(--font-display);letter-spacing:.28em;text-transform:uppercase}
.rw-bigwin-card .x{margin:.3rem 0 0;color:var(--orange-bright);font:900 clamp(3rem,12vw,6rem)/1 var(--font-display);letter-spacing:-.04em}
.rw-bigwin-card .amt{margin:.2rem 0 0;color:var(--ink);font:900 clamp(1.1rem,4vw,1.7rem) var(--font-display);font-variant-numeric:tabular-nums}
.rw-bigwin-card .lbl{margin:.4rem 0 0;color:var(--subtle);font:800 .6rem var(--font-display);letter-spacing:.18em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.rw-bigwin,.rw-bigwin-card{animation:none}}