/* Fruit Machine landing. Phone first: the cabinet fills the screen, the chapter list sits below. */

.room {
  position: relative; z-index: 1;
  padding: 8px 32px 0 6px;
}
.room::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255,150,60,.24), rgba(255,120,40,0) 70%);
}

.cab {
  --cell: 84px; --p: 14px; --br: 4px; --pad: 8px; --g: 8px; --bz: 10px; --rg: 5px; --card: 68px;
  position: relative;
  width: 100%; max-width: 560px;
  margin: 0 auto;
}

/* Upper cabinet */
.upper {
  position: relative;
  display: flex; flex-direction: column; gap: var(--g);
  min-height: var(--uh, 0px);
  padding: calc(var(--p) + var(--pad));
  border: 3px solid #000;
  border-radius: 22px 22px 8px 8px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 62%, rgba(40,90,255,.28), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #2b2036, #130d1a 38%, #0c0911);
  box-shadow:
    inset 0 0 0 2px #c9ced6, inset 0 0 0 var(--p) #0d0a11, inset 0 0 0 calc(var(--p) + 2px) #9aa1ad,
    0 0 60px rgba(255,150,40,.25), 0 20px 40px rgba(0,0,0,.6);
}

/* Topper */
.topper {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0; padding: 7px 6px 7px;
  text-align: center;
  border: 3px solid #000;
  border-radius: 14px 14px 6px 6px;
  background: #c2121b;
  box-shadow: inset 0 0 0 3px #ffd54a;
}
.burst {
  position: absolute; z-index: -1;
  left: 50%; top: 100%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(#ff3b2f 0 9deg, #ffae1e 9deg 18deg);
  animation: fm-turn 90s linear infinite;
}
.topper::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 50% 70%, rgba(0,0,0,0) 30%, rgba(60,0,0,.55) 100%);
}
@keyframes fm-turn { to { transform: rotate(360deg); } }
.marquee {
  margin: 0;
  font: 900 clamp(30px, 9.4vw, 46px)/1.02 var(--f-mark);
  color: #ffe14d;
  -webkit-text-stroke: 2px var(--k);
  text-shadow: 0 2px 0 #f08c00, 0 3px 0 #b43c00, 0 5px 0 var(--k), 0 8px 14px rgba(0,0,0,.6);
  transform: rotate(-3deg);
  white-space: nowrap;
}
.strap {
  display: inline-block;
  margin: 5px 0 0; padding: 2px 10px 3px;
  font: 600 14px/1.15 var(--f-cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-l);
  background: var(--k);
  border-radius: 4px;
  box-shadow: 0 0 0 2px #ffd54a;
}

/* Display row */
.panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px;
  height: 42px;
}
.dmd, .nudges {
  background: #120806;
  border: 2px solid #000; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #3b2414, inset 0 3px 8px rgba(0,0,0,.8);
}
.dmd { padding: 4px 6px; min-width: 0; }
.dmd canvas { display: block; width: 100%; height: 100%; }
.nudges { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 7px; }
.nudges .lbl { font: 400 9px/1 var(--f-sign); color: #ffcf6a; letter-spacing: .04em; }
.nudges canvas { display: block; width: 26px; height: 18px; }
.sound {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 52px; padding: 2px 6px;
  font: 400 9px/1 var(--f-sign); color: #c9ced6;
  background: linear-gradient(180deg, #3a3f48, #1c1f25);
  border: 2px solid #000; border-radius: 6px;
  cursor: pointer;
}
.sound .led { width: 8px; height: 8px; border-radius: 50%; background: #3a1a12; border: 1px solid #000; }
.sound .s-state { font-size: 10px; color: #8a8f98; }
.sound[aria-pressed="true"] .led { background: #6dff7a; box-shadow: 0 0 8px #6dff7a; }
.sound[aria-pressed="true"] .s-state { color: #b8ffbf; }

/* Reels and side */
.play { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--g); }
.glass { min-width: 0; }
.window {
  position: relative;
  padding: var(--bz);
  border: 2px solid #000; border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe 0%, #c9cfd8 22%, #8a929e 48%, #e9edf2 52%, #a2a9b4 78%, #5e6570 100%);
  box-shadow: 0 0 0 3px #ffc531, 0 0 0 5px #000, 0 6px 18px rgba(0,0,0,.6);
}
.reels {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg);
  background: #07070b;
  border: 2px solid #000; border-radius: 4px;
  overflow: hidden;
}
.reel {
  position: relative; overflow: hidden;
  height: calc(var(--cell) * 3);
  background: linear-gradient(90deg, #ddd6c4, var(--cream) 18%, #fffdf6 50%, var(--cream) 82%, #ddd6c4);
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0) 30%, rgba(255,255,255,.14) 42%, rgba(0,0,0,0) 52%, rgba(0,0,0,0) 70%, rgba(0,0,0,.62));
}
.strip { position: absolute; inset: 0; }
.strip.fast { filter: url(#fm-vblur); }
.cell {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.cell svg { width: min(84%, calc(var(--cell) * .84)); height: calc(var(--cell) * .84); overflow: visible; }
.reel.flash .strip { animation: fm-fade .25s ease-out; }
@keyframes fm-fade { from { opacity: .2; } to { opacity: 1; } }
.held-tab {
  position: absolute; left: 50%; top: 4px; z-index: 2;
  transform: translateX(-50%);
  padding: 3px 7px 2px;
  font: 400 10px/1 var(--f-sign); color: var(--k);
  background: #ffe04d; border: 2px solid #000; border-radius: 4px;
  box-shadow: 0 0 10px rgba(255,214,60,.8);
  display: none;
}
.reel.held .held-tab { display: block; }
.reel.held { box-shadow: inset 0 0 0 3px #ffd23a; }
.line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 2;
  background: rgba(227,38,46,.9); box-shadow: 0 0 6px rgba(255,60,60,.8);
}
.party .line { background: #fff4b0; box-shadow: 0 0 10px 2px #ffd23a; }
.arr {
  position: absolute; top: 50%; width: 0; height: 0; margin-top: -8px; z-index: 3;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.arr-l { left: -1px; border-left: 10px solid var(--red); }
.arr-r { right: -1px; border-right: 10px solid var(--red); }

.deck {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rg);
  margin-top: 10px; padding: 0 calc(var(--bz) + 2px);
}
.deck .col { display: grid; gap: 7px; }
.deck .btn { width: 100%; min-height: 36px; padding: 4px 2px; font-size: 12px; }
.hold[aria-pressed="true"] {
  --c1: #fffdf0; --c2: #ffe04d; --c3: #c98f00; --glow: rgba(255,214,60,.9);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 1px 0 #000, 0 0 20px 5px var(--glow);
  transform: translateY(3px);
}
.hold.suggest { animation: fm-blink .6s steps(2) infinite; }
@keyframes fm-blink { 50% { filter: brightness(.55); } }

.side { display: flex; flex-direction: column; gap: var(--g); min-width: 0; }
.readout {
  position: relative;
  padding: 5px;
  border: 2px solid #000; border-radius: 10px;
  background: linear-gradient(180deg, #102a86, var(--navy-d));
  box-shadow: inset 0 0 0 2px #d9a520, 0 4px 14px rgba(0,0,0,.5);
}
.ro-h {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ro-body {
  display: flex; flex-direction: column; gap: 5px;
  min-height: calc(var(--card) * 3 + 10px);
  transition: opacity .2s;
}
.spinning .ro-body { opacity: .45; }
.ro-card {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "no title" "no tag";
  column-gap: 8px; align-content: start;
  height: var(--card); overflow: hidden;
  padding: 5px 8px 4px 6px;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,214,90,.28); border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.ro-card:hover { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); }
.ro-card:hover .ro-title { color: var(--gold-l); }
.ro-sym { display: none; }
.ro-no { grid-area: no; margin-top: 2px; }
.ro-title {
  grid-area: title;
  font: 600 17px/1.12 var(--f-cond);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ro-tag {
  grid-area: tag;
  font: 400 16px/1.18 var(--f-body); color: #d4ddff;
  display: -webkit-box; -webkit-line-clamp: var(--tl, 2); -webkit-box-orient: vertical; overflow: hidden;
}
.ro-kind {
  font: 400 10px/1 var(--f-sign); letter-spacing: .04em; color: var(--gold);
  margin-right: 4px; vertical-align: 1px;
}
.ro-x {
  position: absolute; right: 6px; top: 6px;
  font: 400 11px/1 var(--f-sign); color: var(--k);
  background: var(--gold); border-radius: 4px; padding: 3px 4px 2px;
}

/* Three of the same */
.ro-win {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "sym no" "sym title" "sym tag" "act act";
  column-gap: 10px; align-content: start;
  height: calc(var(--card) * 3 + 10px);
  padding: 8px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 20% 20%, rgba(255,214,60,.25), rgba(255,214,60,0) 60%);
}
.win-sym { grid-area: sym; width: 70px; height: 70px; }
.win-no { grid-area: no; margin: 0; font: 400 12px/1.3 var(--f-sign); color: var(--gold); }
.win-title { grid-area: title; margin: 2px 0 4px; font: 900 24px/1.05 var(--f-mark); color: #fff; text-shadow: 0 2px 0 #000; }
.win-tag {
  grid-area: tag; margin: 0; font: 400 16px/1.2 var(--f-body); color: #d4ddff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.win-lede { display: none; }
.win-act { grid-area: act; display: flex; gap: 8px; margin-top: 12px; align-self: end; }
.win-act .open { flex: 1 1 auto; min-height: 46px; font-size: 18px; overflow: hidden; }
.win-act .stay { flex: 0 0 auto; min-height: 46px; padding: 4px 16px; }
.open .bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 5px;
  background: rgba(255,255,255,.9);
  transform: scaleX(0); transform-origin: 0 50%;
}
.counting .open .bar { animation: fm-fill var(--wait, 3.6s) linear forwards; }
@keyframes fm-fill { to { transform: scaleX(1); } }

.spin {
  min-height: 56px; width: 100%;
  font-size: 24px; letter-spacing: .08em;
  border-radius: 14px;
}
.spin.busy { filter: brightness(.7); }

/* Handle */
.handle {
  position: absolute; z-index: 4;
  left: 100%;
  top: calc(var(--hy, 300px) - var(--L, 50px) - var(--bd, 24px));
  width: var(--hw, 30px);
  height: calc(var(--L, 50px) * 2 + var(--bd, 24px) * 2);
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.handle:active { cursor: grabbing; }
.handle:focus-visible { outline-offset: 0; border-radius: 8px; }
.h-mount {
  position: absolute; left: -3px; top: 50%;
  width: calc(var(--hw, 30px) * .62); height: 26px; margin-top: -13px;
  border: 2px solid #000; border-left: 0; border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #fbfcfe, #9aa1ad 45%, #e9edf2 55%, #5e6570);
}
.h-rod {
  position: absolute; top: 0; left: calc(var(--hw, 30px) * .42 - 4px);
  width: 8px; height: 1px; transform-origin: 0 0;
  background: linear-gradient(90deg, #4a515c, #f4f6fa 40%, #9aa1ad 70%, #3a4049);
}
.h-ball {
  position: absolute; top: 0; left: calc(var(--hw, 30px) * .42);
  width: var(--bd, 24px); height: var(--bd, 24px);
  margin: calc(var(--bd, 24px) / -2) 0 0 calc(var(--bd, 24px) / -2);
  border: 2px solid #000; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0dc 0, #ff4a3d 22%, #c4121b 60%, #5d0509 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,.5);
}

/* Chapter list on the belly glass */
.belly {
  position: relative;
  margin-top: 12px; padding: 18px 12px 14px;
  border: 3px solid #000; border-radius: 12px;
  background:
    radial-gradient(ellipse 90% 30% at 50% 0, rgba(255,60,50,.25), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #17101f, #0b0a10 40%);
  box-shadow: inset 0 0 0 2px #d9a520, inset 0 0 0 5px #0b0a10, inset 0 0 0 6px rgba(217,165,32,.55), 0 12px 30px rgba(0,0,0,.6);
}
.pt-h {
  margin: 2px 0 10px; text-align: center;
  font: 400 28px/1 var(--f-sign); letter-spacing: .05em; color: var(--gold);
  text-shadow: 0 3px 0 #8f0f16, 0 0 18px rgba(255,190,40,.45);
}
.pt { list-style: none; margin: 0; padding: 0; }
.pt li + li { border-top: 1px solid rgba(217,165,32,.3); }
.pt-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "no syms" "title title" "tag tag";
  column-gap: 10px; row-gap: 5px; align-items: center;
  padding: 12px 6px;
  color: #fff; text-decoration: none;
  border-radius: 6px;
}
.pt-row:hover { background: rgba(255,214,90,.08); }
.pt-row:hover .pt-title { color: var(--gold-l); }
.pt-no { grid-area: no; }
.pt-syms { grid-area: syms; display: flex; gap: 3px; }
.pt-syms svg { width: 30px; height: 30px; }
.pt-title { grid-area: title; font: 600 22px/1.1 var(--f-cond); }
.pt-tag { grid-area: tag; font: 400 16px/1.3 var(--f-body); color: #cfc7d8; }
.pt-tag .ro-kind { color: var(--gold); }
.pt-go { display: none; }
.pt-row.won { animation: fm-row .36s steps(2) 8; }
@keyframes fm-row { 50% { background: rgba(255,214,60,.3); } }

.plinth {
  height: 44px; margin: 0 10px;
  border: 3px solid #000; border-top: 0; border-radius: 0 0 12px 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, rgba(0,0,0,0) 2px 14px),
    linear-gradient(180deg, #5e6570, #e9edf2 18%, #8a929e 50%, #c9cfd8 70%, #4a515c);
  box-shadow: 0 18px 30px rgba(0,0,0,.7);
}

.carpet {
  position: relative; z-index: 0;
  height: 150px; margin-top: -30px;
  background:
    linear-gradient(180deg, #2a1608 0, #4a2a12 14px, #1a0d05 20px, rgba(0,0,0,.6) 20px, rgba(0,0,0,0) 90px),
    radial-gradient(circle at 50% 50%, #d4a23a 0 3px, rgba(0,0,0,0) 4px) 0 0 / 36px 36px,
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 9px, #1d6b6b 10px 12px, rgba(0,0,0,0) 13px) 18px 18px / 36px 36px,
    conic-gradient(from 45deg, #4a0f1c 25%, #380a15 0 50%, #4a0f1c 0 75%, #380a15 0) 0 0 / 36px 36px;
}

/* Wide screens: reels and the line side by side, chapter list on the belly glass below. */
@media (min-width: 960px) and (min-height: 600px) {
  .room { padding: 22px 64px 0; }
  .cab {
    --p: 20px; --br: 5px; --pad: 20px; --g: 14px; --bz: 14px; --rg: 8px;
    --reelw: calc(var(--cell) * 1.36); --rw: 330px; --gap: 26px;
    max-width: none;
    width: calc(var(--reelw) * 3 + var(--rg) * 2 + var(--bz) * 2 + 8px + var(--gap) + var(--rw) + (var(--p) + var(--pad)) * 2 + 6px);
  }
  .upper { border-radius: 30px 30px 10px 10px; }
  .topper { padding: 14px 10px 12px; border-radius: 20px 20px 8px 8px; }
  .marquee { font-size: 84px; -webkit-text-stroke-width: 3px; text-shadow: 0 3px 0 #f08c00, 0 6px 0 #b43c00, 0 9px 0 var(--k), 0 14px 22px rgba(0,0,0,.6); }
  .strap { margin-top: 12px; font-size: 17px; padding: 4px 14px 5px; }
  .panel { height: 56px; gap: 10px; }
  .nudges { padding: 4px 12px; }
  .nudges .lbl { font-size: 11px; }
  .nudges canvas { width: 34px; height: 24px; }
  .sound { min-width: 72px; font-size: 11px; }
  .sound .s-state { font-size: 12px; }
  .play { flex-direction: row; align-items: stretch; justify-content: center; gap: var(--gap); }
  .glass { flex: none; }
  .reels { grid-template-columns: repeat(3, var(--reelw)); }
  .deck { margin-top: 14px; }
  .deck .col { grid-template-columns: 1fr 1fr; gap: 6px; }
  .deck .btn { min-height: 44px; font-size: 13px; }
  .side { flex: none; width: var(--rw); contain: size; }
  .readout { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px; }
  .ro-h {
    position: static !important; width: auto; height: auto; margin: 0 0 6px 4px; overflow: visible; clip: auto;
    font: 400 12px/1 var(--f-sign); letter-spacing: .06em; color: var(--gold);
  }
  .ro-body { flex: 1 1 auto; min-height: 0; gap: 6px; }
  .ro-card {
    flex: 1 1 0; height: auto; min-height: 0;
    grid-template-columns: 50px 30px minmax(0, 1fr); grid-template-areas: "sym no title" "sym tag tag";
    row-gap: 3px; padding: 8px 10px 8px 6px;
  }
  .ro-sym { display: block; grid-area: sym; width: 50px; height: 50px; align-self: center; }
  .ro-no { margin-top: 0; }
  .ro-title { font-size: 21px; align-self: center; }
  .ro-tag { font-size: 15px; line-height: 1.25; }
  .ro-win {
    flex: 1 1 auto; height: auto;
    grid-template-columns: 1fr; grid-template-areas: "sym" "no" "title" "tag" "lede" "act";
    justify-items: start; padding: 10px 12px;
  }
  .win-sym { width: 104px; height: 104px; margin: -4px 0 4px -6px; }
  .win-title { font-size: 34px; margin: 4px 0 6px; }
  .win-tag { -webkit-line-clamp: 3; }
  .win-lede {
    display: -webkit-box; grid-area: lede; margin: 8px 0 0;
    font: 400 16px/1.3 var(--f-body); color: #fff;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .win-act { width: 100%; }
  .spin { flex: none; min-height: 72px; font-size: 30px; }
  .belly { margin-top: 16px; padding: 26px 34px 22px; }
  .pt-h { font-size: 38px; margin-bottom: 16px; }
  .pt-row {
    grid-template-columns: 40px 122px minmax(0, 1fr) 28px;
    grid-template-areas: "no syms title go" "no syms tag go";
    column-gap: 18px; row-gap: 3px; padding: 14px 10px;
  }
  .pt-row .lamp { width: 36px; height: 36px; font-size: 13px; }
  .pt-syms svg { width: 38px; height: 38px; }
  .pt-title { font-size: 26px; }
  .pt-go { display: block; grid-area: go; width: 14px; height: 14px; border-top: 3px solid var(--gold); border-right: 3px solid var(--gold); transform: rotate(45deg); }
  .plinth { height: 56px; margin: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; }
  .hold.suggest { animation: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 4px 0 #000, 0 0 0 3px #fff; }
  .pt-row.won { animation: none; background: rgba(255,214,60,.25); }
  .ro-body { transition: none; }
}