:root {
  --felt: #0f3b2e;
  --felt-deep: #08241c;
  --cherry: #b5172f;
  --cherry-deep: #6f0c1b;
  --mustard: #f2b632;
  --ivory: #fff9ec;
  --ink: #1c1712;
  --paper: #fbf8f0;
  --led: #ffb000;
  --chrome: linear-gradient(180deg, #f6f8fa 0%, #b9c0c8 38%, #eef1f4 52%, #8a939d 100%);
  --sym-h: 96px;
  --display: "Bungee", "Arial Black", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --receipt: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  color: var(--ivory);
  background:
    radial-gradient(ellipse at 50% 0%, #1a5a45 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    var(--felt-deep);
  background-color: var(--felt-deep);
}

button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

.floor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  display: grid;
  gap: 32px;
}

/* ---------- account ---------- */

.account {
  max-width: 760px;
  width: 100%;
  margin: 0 auto -12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.account[hidden], .account [hidden] { display: none; }
.account-pic { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px var(--mustard); }
.account-text { flex: 1 1 240px; margin: 0; font-size: 14px; line-height: 1.4; color: #f6dfb0; }
.account-text b { color: var(--ivory); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 2px solid var(--mustard);
  border-radius: 20px;
  background: transparent;
  color: var(--mustard);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.account-btn:hover { background: var(--mustard); color: var(--ink); }

/* ---------- cabinet ---------- */

.cabinet {
  position: relative;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(90deg, var(--cherry-deep), var(--cherry) 12%, var(--cherry) 88%, var(--cherry-deep));
  border-radius: 36px 36px 18px 18px;
  box-shadow:
    0 0 0 6px #c9cfd6,
    0 0 0 8px #6b737c,
    0 30px 60px rgba(0,0,0,.55);
}

.marquee {
  position: relative;
  margin: 0 -28px 22px;
  padding: 30px 24px 26px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #3a0a12, #16060a 75%);
  border-radius: 36px 36px 0 0;
  border-bottom: 6px solid #c9cfd6;
  overflow: hidden;
}

.marquee h1 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 84px);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--mustard);
  text-shadow: 0 2px 0 #c2410c, 0 4px 0 #9a1d1d, 0 6px 0 #5c0f14, 0 0 28px rgba(242,182,50,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .22em;
  text-align: left;
}
/* sized to span both lines of the wrapped title */
.marquee h1 .logo {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  filter: drop-shadow(0 4px 0 #5c0f14) drop-shadow(0 0 14px rgba(242,182,50,.35));
}

.tagline {
  position: relative;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  font-stretch: 85%;
  color: #f6dfb0;
}

.bulbs {
  position: absolute;
  inset: 9px 18px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  align-content: space-between;
  justify-items: center;
  pointer-events: none;
}
.bulbs i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffe7a3;
  box-shadow: 0 0 8px 2px rgba(255,200,80,.8);
  animation: chase 2.2s linear infinite;
  animation-delay: calc(var(--i) * -0.16s);
}
.win .bulbs i { animation-duration: .5s; }
@keyframes chase {
  0%, 60% { opacity: 1; }
  70%, 100% { opacity: .25; box-shadow: none; }
}

/* ---------- reels ---------- */

.machine { position: relative; }

.glass {
  position: relative;
  padding: 14px;
  background: #1a0b0e;
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px #c9cfd6, inset 0 6px 18px rgba(0,0,0,.7);
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.reel { display: grid; gap: 8px; min-width: 0; }

.window {
  position: relative;
  height: calc(var(--sym-h) * 3);
  overflow: hidden;
  border-radius: 8px;
  background: var(--ivory);
}
.window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(28,23,18,.62) 0%, rgba(28,23,18,.12) 26%, transparent 38%,
    transparent 62%, rgba(28,23,18,.12) 74%, rgba(28,23,18,.62) 100%);
}

.strip { will-change: transform; }
.spinning .strip { filter: blur(.6px); }

.sym {
  height: var(--sym-h);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0 6px;
  text-align: center;
  color: var(--ink);
  border-bottom: 1px dashed rgba(28,23,18,.14);
}
.sym-emoji { font-size: 40px; line-height: 1; }
.sym-name {
  font-weight: 800;
  font-stretch: 78%;
  font-size: 14px;
  line-height: 1.1;
  max-width: 100%;
}

.reel-label {
  font-family: var(--display);
  font-size: 14px;
  text-align: center;
  color: var(--mustard);
}

.reel-controls {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 6px;
}
.reel-controls button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
  background: var(--chrome);
  box-shadow: 0 2px 0 #4b525a;
  font-size: 13px;
  font-weight: 700;
}
.reel-controls button:active { transform: translateY(2px); box-shadow: none; }
.reel-controls .hold { font-family: var(--display); font-weight: 400; }
.reel.held .hold {
  background: var(--mustard);
  box-shadow: 0 2px 0 #8a5a00, 0 0 14px rgba(242,182,50,.7);
}
.reel.held .window { box-shadow: 0 0 0 3px var(--mustard); }

.payline {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(14px + var(--sym-h) * 1.5);
  height: 3px;
  margin-top: -1.5px;
  background: rgba(181,23,47,.85);
  pointer-events: none;
}
.payline::before, .payline::after {
  content: "";
  position: absolute;
  top: -7px;
  border: 8px solid transparent;
}
.payline::before { left: -6px; border-left-color: var(--mustard); }
.payline::after { right: -6px; border-right-color: var(--mustard); }
.win .payline { background: var(--mustard); box-shadow: 0 0 12px var(--mustard); }

/* grain-cherries chip that flips up over the reels on a Jackpot spin */
.jackpot-chip {
  position: absolute;
  left: 50%;
  top: calc(14px + var(--sym-h) * 1.5);
  width: min(46%, 220px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(242,182,50,.55));
  pointer-events: none;
}
/* short, so the grain reel underneath is readable again quickly */
.jackpot-chip.show { animation: chip-pop 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes chip-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotateY(0); }
  12% { opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.1) rotateY(720deg); }
  50%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(720deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.9) rotateY(720deg); }
}
@keyframes chip-fade {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  20%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- lever ---------- */

.lever {
  position: absolute;
  right: -78px;
  top: 30px;
  width: 50px;
  height: 230px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lever-arm {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 12px;
  height: 180px;
  margin-left: -6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #7d8690, #f6f8fa 45%, #8a939d);
  transform-origin: 50% 100%;
}
.lever-knob {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--cherry) 45%, var(--cherry-deep));
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.lever-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 60px;
  border-radius: 10px;
  background: var(--chrome);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.lever.pulled .lever-arm { animation: pull .7s cubic-bezier(.3,.6,.3,1); }
@keyframes pull {
  0% { transform: perspective(500px) rotateX(0); }
  35% { transform: perspective(500px) rotateX(-70deg); }
  100% { transform: perspective(500px) rotateX(0); }
}

/* ---------- meter + deck ---------- */

.meter {
  margin: 18px 0 16px;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: 8px;
  background: #140906;
  box-shadow: inset 0 0 0 2px #3b1a10, inset 0 4px 12px rgba(0,0,0,.8);
  color: var(--led);
  text-shadow: 0 0 8px rgba(255,176,0,.6);
  font-weight: 700;
  font-stretch: 85%;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
}

.rating {
  margin: 0 0 18px;
  padding: 12px 16px 14px;
  border-radius: 8px;
  background: #140906;
  box-shadow: inset 0 0 0 2px #3b1a10;
}
.rating-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rating-tier {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--ivory);
}
.rating[data-tier="jackpot"] .rating-tier { color: var(--mustard); text-shadow: 0 0 18px rgba(242,182,50,.8); }
.rating[data-tier="big-win"] .rating-tier { color: var(--mustard); }
.rating[data-tier="push"] .rating-tier { color: #b9a99a; }
.rating[data-tier="bust"] .rating-tier { color: #e2475d; }
.rating-score { color: #d9c6a6; font-size: 14px; }
.rating-score b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--led); }
.rating-parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #d9c6a6;
}
.rating-parts b { color: var(--ivory); }
.rating-parts i {
  display: block;
  height: 6px;
  margin-top: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mustard) calc(var(--fill) * 100%), #3b1a10 0);
}
.rating-tip {
  margin-top: 12px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--chrome);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 0 #4b525a;
}
.rating-tip[hidden] { display: none; }

.deck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.egg-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
}
.egg-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.egg-box {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  font-size: 26px;
  background: #3a0a12;
  box-shadow: inset 0 0 0 3px #c9cfd6, 0 3px 0 #2a050b;
  filter: grayscale(1) brightness(.6);
  transition: filter .15s, background .15s;
}
.egg-toggle input:checked + .egg-box {
  background: #fff1c2;
  filter: none;
  box-shadow: inset 0 0 0 3px var(--mustard), 0 0 18px rgba(242,182,50,.75);
}
.egg-toggle input:focus-visible + .egg-box { outline: 3px solid var(--mustard); outline-offset: 3px; }

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.stepper b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--mustard); }
.stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--chrome);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 2px 0 #4b525a;
}

.spin {
  width: 120px;
  height: 120px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--display);
  font-size: 26px;
  color: #fff4d6;
  background: radial-gradient(circle at 40% 32%, #ffd36b, var(--mustard) 40%, #c2410c 100%);
  box-shadow: 0 0 0 6px #c9cfd6, 0 0 0 8px #6b737c, 0 8px 0 8px #3b2a10;
  text-shadow: 0 2px 0 #7a2d07;
  transition: transform .08s;
}
.spin:active, .spinning .spin { transform: translateY(5px); box-shadow: 0 0 0 6px #c9cfd6, 0 0 0 8px #6b737c, 0 3px 0 8px #3b2a10; }

/* ---------- results ---------- */

.results {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.nutrition {
  background: #fff;
  color: #000;
  padding: 10px 12px 12px;
  border: 1px solid #000;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  font-size: 15px;
}
.nutrition h2 {
  margin: 0;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.01em;
}
.nf-serving { margin: 6px 0 0; font-size: 16px; }
.nf-size { display: flex; justify-content: space-between; margin-top: 0; font-weight: 800; font-size: 18px; }
.nf-rule { background: #000; margin: 6px 0; }
.nf-rule.thick { height: 10px; }
.nf-rule.mid { height: 5px; }
.nf-small { margin: 0; font-size: 13px; font-weight: 700; }
.nf-cal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 900;
  font-stretch: 80%;
}
.nf-cal span { font-size: 30px; }
.nf-cal b { font-size: 44px; line-height: 1; }
.nf-rows { margin: 0; }
.nf-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid #000;
}
.nf-rows > div:first-child { border-top: 0; }
.nf-rows dt, .nf-rows dd { margin: 0; }
.nf-rows dd { font-weight: 800; }
.nf-rows .nf-head { justify-content: flex-end; font-size: 12px; font-weight: 700; }
.nf-rows .indent { padding-left: 18px; }
.nf-sub { margin: 4px 0 2px; font-size: 15px; font-weight: 900; }
.nf-portions { margin: 0; padding: 0; list-style: none; }
.nf-portions li { padding: 3px 0; border-top: 1px solid #000; }
.nf-portions li:first-child { border-top: 0; }
.nf-portions span { color: #444; }
.nf-batch { font-size: 14px; }

.ticket {
  position: relative;
  padding: 26px 22px 30px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--receipt);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.ticket-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  background: linear-gradient(-45deg, var(--paper) 5px, transparent 0) 0 0 / 14px 10px repeat-x,
              linear-gradient(45deg, var(--paper) 5px, transparent 0) 0 0 / 14px 10px repeat-x;
}
.ticket-edge.bottom { top: auto; bottom: -10px; transform: rotate(180deg); }
.ticket h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  text-align: center;
}

.stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  margin-bottom: 14px;
}
.stores button {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 0;
  cursor: pointer;
  font-family: var(--receipt);
  background: transparent;
  color: var(--ink);
}
.stores button + button { border-left: 2px solid var(--ink); }
.stores button span { font-size: 14px; }
.stores button b { font-size: 20px; }
.stores button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

.ticket-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px dashed var(--ink);
}
.ticket-lines li {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(28,23,18,.35);
}
.qty { font-weight: 700; font-size: 17px; }
.line-name { display: grid; color: var(--ink); font-weight: 700; text-decoration: none; }
.line-name span { text-decoration: underline; text-underline-offset: 3px; }
.line-name small { font-weight: 400; font-size: 13px; color: #5b5248; }
.line-price { font-weight: 700; }
.pin {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  font-family: var(--receipt);
  font-size: 13px;
}
.pin.is-pinned { background: var(--cherry); border-color: var(--cherry); color: #fff; }

.ticket-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  font-size: 20px;
}
.ticket-note { margin: 10px 0 14px; font-size: 14px; line-height: 1.45; color: #4a4239; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cart-btn, .copy-btn {
  display: inline-block;
  padding: 11px 16px;
  border: 2px solid var(--ink);
  font-family: var(--receipt);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.cart-btn { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.cart-btn[hidden], .copy-btn[hidden] { display: none; }
.copy-btn { background: transparent; color: var(--ink); }

.batch select { padding: 6px 8px; border: 0; border-radius: 6px; background: var(--ivory); color: var(--ink); }

/* ---------- settings ---------- */

.settings {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
.settings summary {
  cursor: pointer;
  font-weight: 700;
  color: #f6dfb0;
  padding: 10px 0;
}
.settings-body {
  display: grid;
  gap: 20px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.settings fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 6px;
}
.settings legend { font-family: var(--display); color: var(--mustard); margin-bottom: 6px; padding: 0; }
.batch { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.batch label { display: flex; align-items: center; gap: 8px; }
.batch input[type="number"] {
  width: 72px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--ivory);
  color: var(--ink);
}
.pools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pools label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pools input, .sound input { accent-color: var(--mustard); width: 18px; height: 18px; }

/* ---------- pin dialog ---------- */

.pin-dialog {
  width: min(460px, calc(100vw - 32px));
  border: 0;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--receipt);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.pin-dialog::backdrop { background: rgba(8,36,28,.7); }
.pin-dialog h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 20px; }
.pin-dialog p { margin: 0 0 14px; line-height: 1.45; font-size: 14px; }
.pin-dialog label { display: grid; gap: 4px; margin-bottom: 12px; font-weight: 700; font-size: 14px; }
.pin-dialog input {
  padding: 9px 10px;
  border: 2px solid var(--ink);
  background: #fff;
  font-family: var(--receipt);
}
.pin-error { color: var(--cherry); font-weight: 700; min-height: 1em; }
.pin-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.pin-actions button {
  padding: 9px 14px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--receipt);
  font-weight: 700;
  cursor: pointer;
}
.pin-actions .primary { background: var(--ink); color: var(--paper); }
.pin-actions .link-btn { margin-right: auto; border: 0; text-decoration: underline; padding-left: 0; }
.pin-actions .link-btn[hidden], .pin-dialog label[hidden] { display: none; }

.food-dialog { width: min(560px, calc(100vw - 32px)); }
.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.food-grid .wide { grid-column: span 3; }
.food-grid input, .food-grid select { width: 100%; min-width: 0; }
.pin-dialog select { padding: 9px 10px; border: 2px solid var(--ink); background: #fff; font-family: var(--receipt); }
.add-food {
  justify-self: start;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1.5px dashed var(--mustard);
  border-radius: 999px;
  background: transparent;
  color: var(--mustard);
  cursor: pointer;
  font-weight: 700;
}
.pools .remove {
  margin-left: auto;
  border: 0;
  background: none;
  color: #f6dfb0;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}

/* ---------- past orders ---------- */

.orders {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 24px 18px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--receipt);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.orders h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 24px; }
.order-list { margin: 0; padding: 0; list-style: none; }
.order-list > li { padding: 14px 0; border-bottom: 1px dashed rgba(28,23,18,.35); }
.order-list > li.empty { border: 0; line-height: 1.45; color: #4a4239; }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.order-date { font-weight: 700; }
.order-store { color: #4a4239; }
.order-total { margin-left: auto; font-size: 18px; }
.order-what { margin: 4px 0 6px; font-size: 14px; line-height: 1.4; color: #4a4239; }
.order-lines summary { cursor: pointer; font-size: 14px; text-decoration: underline; }
.order-lines ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.order-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.order-lines small { color: #7d7468; }
.order-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.reorder-btn {
  padding: 9px 16px;
  border: 2px solid var(--cherry);
  background: var(--cherry);
  color: #fff;
  font-family: var(--receipt);
  font-weight: 700;
  cursor: pointer;
}
.orders .link-btn { padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--receipt); text-decoration: underline; cursor: pointer; }
.orders-more { margin-top: 12px; }
.orders-more[hidden] { display: none; }

/* ---------- footer and privacy page ---------- */

.site-foot { text-align: center; font-size: 14px; }
.site-foot a, .policy-back a { color: #f6dfb0; }

.policy {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 28px 32px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.policy-back { margin: 0 0 12px; font-size: 14px; }
.policy-back a { color: var(--cherry); }
.policy h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 34px; }
.policy h2 { margin: 24px 0 6px; font-size: 18px; font-weight: 800; }
.policy-date { margin: 4px 0 18px; font-family: var(--receipt); color: #4a4239; }
.policy ul { padding-left: 20px; }
.policy li { margin-bottom: 6px; }
.policy a { color: var(--cherry); }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .lever { display: none; }
}

@media (max-width: 760px) {
  :root { --sym-h: 82px; }
  .floor { padding-top: 20px; gap: 24px; }
  .cabinet { padding: 0 12px 18px; border-radius: 24px 24px 14px 14px; }
  .marquee { margin: 0 -12px 16px; border-radius: 24px 24px 0 0; padding: 26px 12px 22px; }
  .bulbs { grid-template-columns: repeat(10, 1fr); }
  .bulbs i:nth-child(n+21) { display: none; }
  .glass { padding: 8px; }
  .payline, .jackpot-chip { top: calc(8px + var(--sym-h) * 1.5); }
  .reels { gap: 6px; }
  .sym-emoji { font-size: 32px; }
  .sym-name { font-size: 12px; }
  .reel-label { font-size: 12px; }
  .reel-controls { grid-template-columns: 28px 1fr 28px; gap: 4px; }
  .reel-controls .hold { font-size: 11px; }
  .deck { justify-content: center; }
  .rating-parts { grid-template-columns: 1fr 1fr; }
  .rating-tier { font-size: 24px; }
  .spin { width: 100px; height: 100px; font-size: 22px; }
  .results { grid-template-columns: 1fr; }
  .nutrition { max-width: 380px; width: 100%; margin: 0 auto; }
  .pools { grid-template-columns: 1fr; }
  .food-grid { grid-template-columns: 1fr 1fr; }
  .food-grid .wide { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .bulbs i { animation: none; }
  .lever.pulled .lever-arm { animation: none; }
  .jackpot-chip.show { animation-name: chip-fade; }
}