/* Fruit Machine: shared look for the landing and the fallback chapter page. */

:root {
  --k: #1b1210;
  --wall: #34101a;
  --gold: #ffc531;
  --gold-l: #ffe58a;
  --gold-d: #a36f08;
  --red: #e3262e;
  --red-d: #7d0d13;
  --navy: #0b1d5e;
  --navy-d: #061038;
  --cream: #f6f1e4;
  --f-mark: "Sansita Swashed", "Cooper Black", Georgia, serif;
  --f-sign: "Bungee", Impact, "Arial Black", sans-serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

body.pub {
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.35;
  background-color: var(--wall);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.6)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'%3E%3Cg fill='%23501521'%3E%3Cpath d='M40 42c8 7 8 16 0 23c-8-7-8-16 0-23z'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='80' cy='0' r='7'/%3E%3Ccircle cx='0' cy='120' r='7'/%3E%3Ccircle cx='80' cy='120' r='7'/%3E%3Ccircle cx='40' cy='77' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23501521' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M40 0Q72 20 80 60Q72 100 40 120Q8 100 0 60Q8 20 40 0Z'/%3E%3Cpath d='M40 64c-4 8-12 10-18 6M40 64c4 8 12 10 18 6M33 50c-7-3-12 2-11 8M47 50c7-3 12 2 11 8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 80px 120px;
}

a { color: inherit; }
:focus-visible { outline: 3px solid #7fd8ff; outline-offset: 3px; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Chasing bulbs: four strips round a box. The lit layer moves one bulb per step. */
.bulbs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bulbs i { position: absolute; display: block; }
.bulbs .bt, .bulbs .bb { left: var(--p); right: var(--p); height: var(--p); }
.bulbs .bt { top: 0; }
.bulbs .bb { bottom: 0; }
.bulbs .bl, .bulbs .br { top: 0; bottom: 0; width: var(--p); }
.bulbs .bl { left: 0; }
.bulbs .br { right: 0; }
.bulbs .bt, .bulbs .bb {
  background-image:
    radial-gradient(circle at calc(var(--p) / 2) 50%, #fffef2 0, #ffe46b calc(var(--br) * .55), #ffb31f var(--br), rgba(255,170,30,.45) calc(var(--br) * 1.3), rgba(255,140,0,0) calc(var(--br) * 2.1)),
    radial-gradient(circle at calc(var(--p) / 2) 50%, #8a6a35 0, #5a3f18 calc(var(--br) * .8), #2b1c08 var(--br), rgba(0,0,0,0) calc(var(--br) * 1.12));
  background-size: calc(var(--p) * 3) var(--p), var(--p) var(--p);
  background-repeat: repeat-x;
}
.bulbs .bl, .bulbs .br {
  background-image:
    radial-gradient(circle at 50% calc(var(--p) / 2), #fffef2 0, #ffe46b calc(var(--br) * .55), #ffb31f var(--br), rgba(255,170,30,.45) calc(var(--br) * 1.3), rgba(255,140,0,0) calc(var(--br) * 2.1)),
    radial-gradient(circle at 50% calc(var(--p) / 2), #8a6a35 0, #5a3f18 calc(var(--br) * .8), #2b1c08 var(--br), rgba(0,0,0,0) calc(var(--br) * 1.12));
  background-size: var(--p) calc(var(--p) * 3), var(--p) var(--p);
  background-repeat: repeat-y;
}
.bulbs .bt { animation: fm-chase-r .5s steps(3) infinite; }
.bulbs .br { animation: fm-chase-d .5s steps(3) infinite; }
.bulbs .bb { animation: fm-chase-l .5s steps(3) infinite; }
.bulbs .bl { animation: fm-chase-u .5s steps(3) infinite; }
@keyframes fm-chase-r { from { background-position: 0 0, 0 0; } to { background-position: calc(var(--p) * 3) 0, 0 0; } }
@keyframes fm-chase-l { from { background-position: 0 0, 0 0; } to { background-position: calc(var(--p) * -3) 0, 0 0; } }
@keyframes fm-chase-d { from { background-position: 0 0, 0 0; } to { background-position: 0 calc(var(--p) * 3), 0 0; } }
@keyframes fm-chase-u { from { background-position: 0 0, 0 0; } to { background-position: 0 calc(var(--p) * -3), 0 0; } }

/* All bulbs flashing, alternate pairs. */
.party .bulbs .bt, .party .bulbs .bb { background-size: calc(var(--p) * 2) var(--p), var(--p) var(--p); animation: fm-flash-x .22s steps(2) infinite; }
.party .bulbs .bl, .party .bulbs .br { background-size: var(--p) calc(var(--p) * 2), var(--p) var(--p); animation: fm-flash-y .22s steps(2) infinite; }
@keyframes fm-flash-x { from { background-position: 0 0, 0 0; } to { background-position: calc(var(--p) * 2) 0, 0 0; } }
@keyframes fm-flash-y { from { background-position: 0 0, 0 0; } to { background-position: 0 calc(var(--p) * 2), 0 0; } }

/* Lit plastic buttons. */
.btn {
  --c1: #fff2a6; --c2: #ffc107; --c3: #8a5a00; --glow: rgba(255,200,40,.45);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 4px 10px;
  font: 400 13px/1 var(--f-sign); letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  color: var(--k);
  background: linear-gradient(180deg, var(--c1), var(--c2) 58%, var(--c3));
  border: 2px solid #000; border-radius: 9px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 0 #000, 0 0 16px 1px var(--glow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: transform .06s, box-shadow .06s, filter .2s;
}
.btn:active:not(.off) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.18), 0 1px 0 #000, 0 0 10px 1px var(--glow); }
.btn.off {
  --c1: #5d5850; --c2: #3e3a34; --c3: #24221f; --glow: rgba(0,0,0,0);
  color: #91897b; cursor: default;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 4px 0 #000;
}
.btn.red { --c1: #ff9a8c; --c2: #e3262e; --c3: #6e0a10; --glow: rgba(255,60,50,.45); color: #fff; text-shadow: 0 2px 0 #000; }
.btn.green { --c1: #c4ffba; --c2: #27b84f; --c3: #0a5220; --glow: rgba(60,230,110,.4); }

/* Number lamp. */
.lamp {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font: 400 12px/1 var(--f-sign); color: #ffd9d9;
  background: radial-gradient(circle at 35% 30%, #b12a32, #4d070c 75%);
  border: 2px solid #000;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.5);
  flex: none;
}
.lit .lamp, .lamp.lit {
  color: var(--k);
  background: radial-gradient(circle at 35% 30%, #fffdf0, #ffd23a 52%, #c98500);
  box-shadow: 0 0 12px 3px rgba(255,200,40,.75);
}

@media (prefers-reduced-motion: reduce) {
  .bulbs i, .party .bulbs i { animation: none !important; }
  .btn { transition: none; }
}