/* The slot machine (slot.js): linked only on pages that draw a slot.
   The cabinet is an object on the table, the same in either theme: brass
   on red lacquer, reels of white paper behind dark glass, lit readouts.
   Every colour that carries text is solid, so its contrast is the one
   the UI gate measures. */
.slot-machine {
  --cell: 4.25rem;
  --brass: #d9a441;
  --lacquer: #5a0b16;
  --paper: #fbf7ee;
  --cream: #fff3d6;
  --led: #ffd166;
  --won: #7dffb0;
  position: relative;
  display: grid;
  gap: .6rem;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: .55rem .75rem .65rem;
  box-sizing: border-box;
  color: var(--cream);
  background-color: var(--lacquer);
  background-image: linear-gradient(160deg, #8a1424 0%, #5a0b16 45%, #3d060f 100%);
  border: 3px solid var(--brass);
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #2b0207, inset 0 2px 0 4px #b8323f55, 0 10px 28px #0008;
}
.sm-defs { position: absolute; width: 0; height: 0; }

/* Marquee lights: steady at rest, chasing on a win. */
.sm-lights { display: flex; justify-content: space-between; padding: 0 .4rem; }
.sm-lights .bulb { width: .55rem; height: .55rem; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 6px #ffcf4d; opacity: .9; }
.sm-lights .bulb:nth-child(odd) { opacity: .5; }

/* The jackpot meter. */
.sm-meter {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1rem .6rem;
  padding: .35rem .6rem; text-align: center;
  background-color: #140306; border: 2px solid var(--brass); border-radius: 10px;
  box-shadow: inset 0 0 12px #000;
}
.sm-meter-k { font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffcf5a; }
.sm-meter-v { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: #ff7a59; text-shadow: 0 0 10px #ff3d2e88; overflow-wrap: anywhere; }
.sm-meter-note { font-size: .75rem; color: #ecdcb8; }

/* The reels behind the glass, and the one pay line across the middle row. */
.sm-glass { position: relative; padding: .5rem .2rem; background-color: #19191e; border: 3px solid #2c2c35; border-radius: 12px; box-shadow: inset 0 3px 10px #000c; }
.sm-window { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: 0 .55rem; }
.sm-reel { position: relative; height: calc(var(--cell) * 3); overflow: hidden; background-color: var(--paper); border-radius: 6px; }
.sm-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#000a, #0000 30%, #0000 70%, #000a); }
.sm-strip { display: flex; flex-direction: column; will-change: transform; }
.sm-reel.spin .sm-strip { filter: url(#sm-vblur); }
.sm-cell { flex: none; height: var(--cell); display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.sm-cell svg { width: 76%; height: 76%; }
.sm-line {
  position: absolute; left: 0; right: 0; top: calc(50% - var(--cell) / 2); height: var(--cell);
  pointer-events: none; z-index: 1; box-sizing: border-box;
  border-top: 2px solid #d9a441cc; border-bottom: 2px solid #d9a441cc;
}
.sm-arrow { position: absolute; top: 50%; width: 0; height: 0; margin-top: -.45rem; border: .45rem solid transparent; }
.sm-arrow.l { left: 0; border-left-color: var(--brass); }
.sm-arrow.r { right: 0; border-right-color: var(--brass); }

/* The readout: the bet, the win, what the line was. */
.sm-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.sm-led { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; padding: .3rem .6rem; background-color: #0b0b0e; border: 1px solid #3a3a44; border-radius: 8px; }
.sm-k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #cfc4ab; }
.sm-bet, .sm-win { font-family: var(--font-mono); font-size: .95rem; text-align: right; overflow-wrap: anywhere; min-width: 0; color: var(--led); }
.sm-win { color: #d8d2c4; }
.sm-says { grid-column: 1 / -1; margin: 0; text-align: center; font-weight: 700; color: var(--cream); }
.sm-round { margin: 0; text-align: center; font-size: .8rem; color: #ecdcb8; }
.sm-round:empty { display: none; }

/* The pay table printed on the machine. */
.sm-pays { padding: .5rem .6rem .55rem; background-color: #170408; border: 1px solid #d9a44166; border-radius: 10px; }
.sm-pays-k { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ebc66c; }
.sm-pays ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: .15rem .8rem; }
.sm-pays li { display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .12rem .3rem; border-radius: 5px; }
.sm-icons { display: inline-flex; gap: 2px; flex: none; color: #8a7a5a; }
.sm-icons svg { width: 1.2rem; height: 1.2rem; background-color: var(--paper); border-radius: 3px; }
.sm-mix { font-size: .68rem; color: #ecdcb8; }
.sm-x { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; color: var(--cream); white-space: nowrap; }

/* A win: the line lights, the paying symbols flash, the win counts up. */
.slot-machine.done:not(.lose) .sm-line { border-color: #ffe066; background-color: #ffe06622; box-shadow: 0 0 14px #ffd84daa, inset 0 0 10px #ffd84d66; }
.sm-cell.pay { background-color: #fff0a8; box-shadow: inset 0 0 0 3px #e8a900; }
.slot-machine.done:not(.lose) .sm-win { color: var(--won); }
.slot-machine.big .sm-win, .slot-machine.jackpot .sm-win { font-size: 1.15rem; font-weight: 700; }
.sm-pays li.hit { background-color: #f2c14e; color: #1a1206; }
.sm-pays li.hit .sm-x, .sm-pays li.hit .sm-mix { color: #1a1206; }
.slot-machine.lose .sm-says { color: #d8cdb6; font-weight: 600; }
.slot-machine.done:not(.lose) .sm-lights .bulb { opacity: 1; }
.slot-machine.jackpot { border-color: #ffe066; }
.slot-machine.jackpot .sm-meter { border-color: #ffe066; box-shadow: 0 0 16px #ffd84d99, inset 0 0 12px #000; }

/* Celebrations: a ribbon over the glass, and coins (slot.js). */
.sm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: 10px; }
.sm-banner {
  position: absolute; left: 50%; top: .2rem; transform: translateX(-50%) rotate(-3deg);
  padding: .15rem .9rem; border-radius: 6px; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase;
  color: #2a1600; background-color: #ffd84d; box-shadow: 0 0 0 2px #7a4b00, 0 4px 14px #000a;
}
.sm-banner:empty { display: none; }
.slot-machine.jackpot .sm-banner { font-size: 1.4rem; background-color: #ffe98a; }
.sm-fx .coin { position: absolute; left: calc(50% - 9px); bottom: 12%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c2, #e8b100 55%, #a37200); box-shadow: 0 0 0 1px #7a5600; }

@media (prefers-reduced-motion: no-preference) {
  .slot-machine.done.win .sm-lights .bulb, .slot-machine.done.big .sm-lights .bulb, .slot-machine.done.jackpot .sm-lights .bulb { animation: sm-chase .6s linear infinite; }
  .sm-lights .bulb:nth-child(3n + 1) { animation-delay: -.2s !important; }
  .sm-lights .bulb:nth-child(3n + 2) { animation-delay: -.4s !important; }
  .slot-machine.big .sm-lights .bulb { animation-duration: .35s; }
  .slot-machine.jackpot .sm-lights .bulb { animation-duration: .25s; }
  .sm-cell.pay svg { animation: sm-pulse .45s ease-in-out 6; }
  .slot-machine.done:not(.lose) .sm-line { animation: sm-glow .5s ease-in-out 6 alternate; }
  .sm-banner { animation: sm-pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
  .slot-machine.jackpot { animation: sm-flash .4s ease-in-out 10 alternate; }
  .slot-machine.jackpot .sm-meter-v { animation: sm-blink .3s steps(2) 14; }
}
@keyframes sm-chase { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes sm-pulse { 50% { transform: scale(1.14); } }
@keyframes sm-glow { to { box-shadow: 0 0 26px #ffd84d, inset 0 0 18px #ffd84d99; } }
@keyframes sm-pop { 0% { transform: translateX(-50%) rotate(-3deg) scale(.3); opacity: 0; } 100% { transform: translateX(-50%) rotate(-3deg) scale(1); opacity: 1; } }
@keyframes sm-flash { to { box-shadow: 0 0 34px #ffd84d, inset 0 0 0 2px #2b0207; } }
@keyframes sm-blink { 50% { color: #fff3d6; } }

/* Phones: smaller reels, the pay table tighter. */
@media (max-width: 480px) {
  .slot-machine { --cell: 3.6rem; padding: .5rem .5rem .6rem; border-radius: 16px; }
  .sm-glass { padding: .4rem .1rem; }
  .sm-window { padding: 0 .45rem; }
  .sm-window { gap: .3rem; }
  .sm-pays { padding: .45rem .4rem; }
  .sm-pays ul { gap: .1rem .4rem; }
  .sm-pays li { gap: .2rem; padding: .1rem .15rem; }
  .sm-icons svg { width: 1rem; height: 1rem; }
  .sm-x { font-size: .72rem; }
  .sm-meter-v { font-size: 1.15rem; }
  .sm-led { padding: .25rem .4rem; gap: .3rem; }
  .sm-bet, .sm-win, .slot-machine.big .sm-win, .slot-machine.jackpot .sm-win { font-size: .82rem; }
}

/* Full screen: the reels grow with the height the table has, and the
   machine with them; the pay table moves beside the reels when there
   is room. */
.panel.is-full .slot-machine { --cell: clamp(4.25rem, (100cqh - 23rem) / 3, 10rem); max-width: min(100%, calc(var(--cell) * 4.6 + 3rem)); }
@container (min-width: 900px) and (min-height: 520px) {
  .panel.is-full .slot-machine { --cell: clamp(4.25rem, (100cqh - 15rem) / 3, 11rem); max-width: min(100%, calc(var(--cell) * 7.2 + 4rem)); grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr); align-items: start; }
  .panel.is-full .slot-machine > .sm-lights, .panel.is-full .slot-machine > .sm-meter, .panel.is-full .slot-machine > .sm-round { grid-column: 1 / -1; }
  .panel.is-full .slot-machine > .sm-glass, .panel.is-full .slot-machine > .sm-readout { grid-column: 1; }
  .panel.is-full .slot-machine > .sm-pays { grid-column: 2; grid-row: 3 / span 2; }
  .panel.is-full .sm-pays ul { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .panel.is-full .sm-icons svg { width: 1.5rem; height: 1.5rem; }
  .panel.is-full .sm-x { font-size: .95rem; }
  .panel.is-full .sm-meter-v { font-size: 2rem; }
  .panel.is-full .sm-bet, .panel.is-full .sm-win { font-size: 1.2rem; }
}