/* ═══════════════════════════════════════════════════════════   RETRO VEGAS — 8BIT.PIZZA FRUIT MACHINE   Deep velvet, neon glow, gold chrome, marquee bulbs═══════════════════════════════════════════════════════════ */:root {  --felt:      #0a1a0f;  --felt2:     #0d2214;  --cab:       #1a0808;  --cab2:      #120606;  --mahog:     #2d0f0f;  --red:       #cc1122;  --red2:      #ff2233;  --gold:      #d4a843;  --gold2:     #f5c842;  --gold3:     #fff0a0;  --gold-dark: #7a5a10;  --neon-r:    #ff1a4a;  --neon-g:    #39ff88;  --neon-b:    #00c8ff;  --neon-y:    #ffe033;  --cream:     #fef6e0;  --cream2:    #f5e8c0;  --ink:       #1a0c08;  --text:      #fef0d0;  --muted:     #c8a878;  --reel-bg:   #fdf5e0;  --reel-line: #d4b870;}* { box-sizing: border-box; margin: 0; padding: 0; }body {  font-family: 'Oswald', sans-serif;  background: var(--felt);  background-image:    repeating-linear-gradient(0deg,   transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px),    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px);  color: var(--text);  min-height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  padding: 28px 16px 60px;}/* ── NEON SIGN HEADER ─────────────────────────────────── */.neon-header {  text-align: center;  margin-bottom: 22px;  position: relative;}.neon-eyebrow {  font-family: 'Special Elite', serif;  font-size: .82rem;  letter-spacing: .35em;  color: var(--neon-g);  text-shadow: 0 0 8px var(--neon-g), 0 0 20px var(--neon-g);  text-transform: uppercase;  margin-bottom: 6px;  animation: flicker 8s infinite;}.neon-title {  font-family: 'Playfair Display', serif;  font-size: clamp(2.2rem, 8vw, 5rem);  font-weight: 900;  line-height: .95;  letter-spacing: -.02em;  color: var(--neon-y);  text-shadow:    0 0 10px var(--neon-y),    0 0 30px rgba(255,224,51,.6),    0 0 60px rgba(255,224,51,.3);  animation: flicker2 12s infinite;}.neon-title .amp {  color: var(--neon-r);  text-shadow: 0 0 10px var(--neon-r), 0 0 30px rgba(255,26,74,.6);  font-style: italic;}.neon-sub {  font-family: 'Special Elite', serif;  font-size: .9rem;  color: var(--muted);  letter-spacing: .12em;  margin-top: 8px;  text-transform: uppercase;}@keyframes flicker {  0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }  20%,24%,55% { opacity: .4; }}@keyframes flicker2 {  0%,18%,20%,52%,54%,100% { opacity: 1; }  19%,53% { opacity: .85; text-shadow: 0 0 6px var(--neon-y); }}/* ── SELECTOR BAR ─────────────────────────────────────── */.selector-bar {  width: min(860px, 100%);  display: flex;  gap: 12px;  align-items: flex-end;  margin-bottom: 20px;}.selector-field {  flex: 1;}.selector-field label {  display: block;  font-family: 'Special Elite', serif;  font-size: .72rem;  letter-spacing: .2em;  color: var(--gold);  text-transform: uppercase;  margin-bottom: 6px;}select {  width: 100%;  padding: 11px 14px;  background: var(--cab2);  border: 1px solid var(--gold-dark);  border-radius: 4px;  color: var(--cream);  font-family: 'Oswald', sans-serif;  font-size: .95rem;  cursor: pointer;  outline: none;  appearance: none;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4a843' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");  background-repeat: no-repeat;  background-position: right 12px center;  padding-right: 32px;  box-shadow: inset 0 2px 8px rgba(0,0,0,.4);  transition: border-color .15s;}select:focus { border-color: var(--gold2); box-shadow: inset 0 2px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(212,168,67,.2); }.random-btn {  padding: 11px 22px;  background: var(--mahog);  border: 1px solid var(--gold-dark);  border-radius: 4px;  color: var(--gold2);  font-family: 'Oswald', sans-serif;  font-size: .85rem;  font-weight: 700;  letter-spacing: .12em;  text-transform: uppercase;  cursor: pointer;  white-space: nowrap;  box-shadow: 0 3px 0 #0a0404, inset 0 1px 0 rgba(255,255,255,.06);  transition: transform .08s, box-shadow .08s;}.random-btn:hover  { box-shadow: 0 4px 0 #0a0404, inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(212,168,67,.2); transform: translateY(-1px); }.random-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0404; }/* ── DIET TOGGLE ──────────────────────────────────────── */.diet-toggle {  display: flex;  gap: 0;  border: 1px solid var(--gold-dark);  border-radius: 4px;  overflow: hidden;  flex-shrink: 0;  background: var(--cab2);}.diet-btn {  padding: 11px 16px;  border: 0;  border-right: 1px solid var(--gold-dark);  background: transparent;  color: var(--muted);  font-family: 'Oswald', sans-serif;  font-size: .78rem;  font-weight: 700;  letter-spacing: .1em;  text-transform: uppercase;  cursor: pointer;  transition: background .12s, color .12s;  white-space: nowrap;}.diet-btn:last-child { border-right: 0; }.diet-btn:hover { background: rgba(212,168,67,.08); color: var(--gold); }.diet-btn.active-meat {  background: linear-gradient(180deg, #3a0808, #280606);  color: var(--neon-r);  text-shadow: 0 0 8px rgba(255,26,74,.5);  box-shadow: inset 0 -2px 0 rgba(255,26,74,.4);}.diet-btn.active-veggie {  background: linear-gradient(180deg, #0d2a0d, #081808);  color: var(--neon-g);  text-shadow: 0 0 8px rgba(57,255,136,.4);  box-shadow: inset 0 -2px 0 rgba(57,255,136,.4);}.diet-btn.active-vegan {  background: linear-gradient(180deg, #1a2a08, #101808);  color: #a8ff50;  text-shadow: 0 0 8px rgba(168,255,80,.4);  box-shadow: inset 0 -2px 0 rgba(168,255,80,.4);}/* ── CABINET ──────────────────────────────────────────── */.machine-wrap {  width: min(860px, 100%);  position: relative;  margin-bottom: 22px;}.cabinet {  background: linear-gradient(180deg, #200808 0%, #160606 40%, #100505 100%);  border-radius: 8px 8px 4px 4px;  border: 2px solid var(--gold-dark);  box-shadow:    0 0 0 1px #3a1a08,    inset 0 0 60px rgba(0,0,0,.5),    0 0 40px rgba(0,0,0,.8),    0 40px 80px rgba(0,0,0,.9);  overflow: hidden;  position: relative;}/* top chrome rail with bulbs */.bulb-rail {  background: linear-gradient(180deg, #2a1a08 0%, #1a0f05 100%);  border-bottom: 2px solid var(--gold-dark);  padding: 10px 16px 8px;  display: flex;  align-items: center;  justify-content: space-between;  gap: 8px;  position: relative;}.bulb-rail::before {  content: '';  position: absolute;  top: 0; left: 0; right: 0;  height: 3px;  background: linear-gradient(90deg, var(--gold-dark), var(--gold2), var(--gold3), var(--gold2), var(--gold-dark));}.bulbs {  display: flex;  gap: 8px;  flex: 1;  justify-content: center;}.bulb {  width: 14px; height: 14px;  border-radius: 50%;  border: 1px solid rgba(0,0,0,.3);  position: relative;  flex-shrink: 0;}.bulb::after {  content: '';  position: absolute;  top: 2px; left: 2px;  width: 4px; height: 4px;  border-radius: 50%;  background: rgba(255,255,255,.5);}.bulb.r  { background: #cc0000; animation: bulbBlink 1.8s ease-in-out infinite; box-shadow: 0 0 6px #cc0000, 0 0 14px rgba(204,0,0,.5); }.bulb.y  { background: #d4a000; animation: bulbBlink 1.8s ease-in-out infinite .3s; box-shadow: 0 0 6px #d4a000, 0 0 14px rgba(212,160,0,.5); }.bulb.g  { background: #007700; animation: bulbBlink 1.8s ease-in-out infinite .6s; box-shadow: 0 0 6px #007700, 0 0 14px rgba(0,119,0,.5); }.bulb.b  { background: #0055cc; animation: bulbBlink 1.8s ease-in-out infinite .9s; box-shadow: 0 0 6px #0055cc, 0 0 14px rgba(0,85,204,.5); }.bulb.w  { background: #ddccaa; animation: bulbBlink 1.8s ease-in-out infinite 1.2s; box-shadow: 0 0 6px #ddccaa, 0 0 14px rgba(221,204,170,.4); }@keyframes bulbBlink {  0%,100% { opacity: 1; }  45%,55% { opacity: .15; }}/* ── REEL BULBS ───────────────────────────────────────── */.reel-bulbs {  display: flex;  justify-content: space-around;  align-items: center;  width: 100%;  padding: 0 2px;  margin-bottom: 4px;  height: 10px;}.rb {  width: 8px; height: 8px;  border-radius: 50%;  border: 1px solid rgba(0,0,0,.4);  flex-shrink: 0;  position: relative;  transition: opacity .1s;}.rb::after {  content: '';  position: absolute;  top: 1px; left: 1px;  width: 3px; height: 3px;  border-radius: 50%;  background: rgba(255,255,255,.45);}/* at-rest: slow idle blink, dim */.rb.rb-r { background: #990000; box-shadow: 0 0 4px #660000; animation: reelBulbIdle 2.4s ease-in-out infinite; }.rb.rb-y { background: #886600; box-shadow: 0 0 4px #553300; animation: reelBulbIdle 2.4s ease-in-out infinite .4s; }.rb.rb-g { background: #005500; box-shadow: 0 0 4px #003300; animation: reelBulbIdle 2.4s ease-in-out infinite .8s; }.rb.rb-w { background: #887755; box-shadow: 0 0 4px #554433; animation: reelBulbIdle 2.4s ease-in-out infinite 1.2s; }@keyframes reelBulbIdle {  0%,100% { opacity: .35; }  50%      { opacity: .7; }}/* spinning state — added to reels-surround by JS */.reels-surround.is-spinning .rb.rb-r { animation: reelBulbSpin 0.22s linear infinite; }.reels-surround.is-spinning .rb.rb-y { animation: reelBulbSpin 0.22s linear infinite .055s; }.reels-surround.is-spinning .rb.rb-g { animation: reelBulbSpin 0.22s linear infinite .11s; }.reels-surround.is-spinning .rb.rb-w { animation: reelBulbSpin 0.22s linear infinite .165s; }/* each reel gets a slightly different phase so they don't all fire together */#reelWrap-base    .rb { animation-delay-offset: 0s; }#reelWrap-topping3 .rb.rb-r { animation-delay: 0.04s !important; }#reelWrap-topping3 .rb.rb-y { animation-delay: 0.095s !important; }#reelWrap-topping3 .rb.rb-g { animation-delay: 0.15s !important; }#reelWrap-topping3 .rb.rb-w { animation-delay: 0.205s !important; }#reelWrap-main    .rb.rb-r { animation-delay: 0.08s !important; }#reelWrap-main    .rb.rb-y { animation-delay: 0.135s !important; }#reelWrap-main    .rb.rb-g { animation-delay: 0.19s !important; }#reelWrap-main    .rb.rb-w { animation-delay: 0.245s !important; }#reelWrap-support .rb.rb-r { animation-delay: 0.12s !important; }#reelWrap-support .rb.rb-y { animation-delay: 0.175s !important; }#reelWrap-support .rb.rb-g { animation-delay: 0.23s !important; }#reelWrap-support .rb.rb-w { animation-delay: 0.285s !important; }#reelWrap-finish  .rb.rb-r { animation-delay: 0.16s !important; }#reelWrap-finish  .rb.rb-y { animation-delay: 0.215s !important; }#reelWrap-finish  .rb.rb-g { animation-delay: 0.27s !important; }#reelWrap-finish  .rb.rb-w { animation-delay: 0.325s !important; }#reelWrap-topping2 .rb.rb-r { animation-delay: 0.02s !important; }#reelWrap-topping2 .rb.rb-y { animation-delay: 0.075s !important; }#reelWrap-topping2 .rb.rb-g { animation-delay: 0.13s !important; }#reelWrap-topping2 .rb.rb-w { animation-delay: 0.185s !important; }@keyframes reelBulbSpin {  0%,100% { opacity: 1; filter: brightness(1.8); }  49%,51% { opacity: .08; filter: brightness(.4); }}/* rail brand text */.rail-brand {  font-family: 'Playfair Display', serif;  font-size: 1rem;  font-weight: 700;  color: var(--gold2);  letter-spacing: .08em;  white-space: nowrap;  text-shadow: 0 0 8px rgba(245,200,66,.4);  flex-shrink: 0;}/* ── MARQUEE PANEL ────────────────────────────────────── */.marquee-panel {  text-align: center;  padding: 16px 24px 10px;  background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 100%);  border-bottom: 1px solid rgba(212,168,67,.15);  position: relative;}.marquee-main {  font-family: 'Playfair Display', serif;  font-size: clamp(1.6rem, 4.5vw, 3rem);  font-weight: 900;  letter-spacing: .04em;  line-height: 1;  color: var(--gold3);  text-shadow: 0 0 20px rgba(255,240,160,.4), 0 2px 0 rgba(0,0,0,.6);}.marquee-main em {  font-style: italic;  color: var(--neon-r);  text-shadow: 0 0 12px rgba(255,26,74,.5);}.marquee-rule {  width: 120px; height: 1px;  background: linear-gradient(90deg, transparent, var(--gold), transparent);  margin: 8px auto;}.marquee-tagline {  font-family: 'Special Elite', serif;  font-size: .72rem;  letter-spacing: .18em;  color: var(--muted);  text-transform: uppercase;  text-align: center;  margin-top: 10px;}/* ── PRESET BUTTONS ───────────────────────────────────── */.preset-row {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 8px;  padding: 0 4px;}.preset-btn {  display: flex;  flex-direction: column;  align-items: center;  gap: 3px;  padding: 10px 8px 10px;  background: rgba(0,0,0,.35);  border: 1px solid rgba(212,168,67,.2);  border-radius: 6px;  cursor: pointer;  color: var(--muted);  font-family: 'Oswald', sans-serif;  transition: background .15s, border-color .15s, transform .08s;  position: relative;  overflow: hidden;}.preset-btn::before {  content: '';  position: absolute;  inset: 0;  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%);  pointer-events: none;}.preset-btn:hover {  background: rgba(212,168,67,.08);  border-color: rgba(212,168,67,.4);  transform: translateY(-1px);}.preset-btn.active {  background: rgba(212,168,67,.12);  border-color: var(--gold);  color: var(--gold2);  box-shadow: 0 0 16px rgba(212,168,67,.2), inset 0 -2px 0 rgba(212,168,67,.3);}.preset-btn.active .preset-name {  color: var(--gold3);  text-shadow: 0 0 8px rgba(255,240,160,.4);}.preset-icon {  font-size: 1.4rem;  line-height: 1;  display: block;}.preset-name {  font-family: 'Playfair Display', serif;  font-size: clamp(.75rem, 1.5vw, .95rem);  font-weight: 700;  color: var(--cream2);  letter-spacing: .04em;  display: block;}.preset-desc {  font-family: 'Special Elite', serif;  font-size: clamp(.55rem, 1vw, .65rem);  color: var(--muted);  letter-spacing: .04em;  display: block;  line-height: 1.3;  text-align: center;}@media (max-width: 660px) {  .preset-row { grid-template-columns: repeat(2, 1fr); }  .preset-desc { display: none; }}/* ── REELS SURROUND ───────────────────────────────────── */.reels-surround {  margin: 14px 18px 8px;  background: #050304;  border-radius: 6px;  border: 2px solid var(--gold-dark);  box-shadow:    inset 0 0 30px rgba(0,0,0,.8),    0 0 0 1px rgba(0,0,0,.5),    0 0 20px rgba(0,0,0,.6);  padding: 12px 10px 14px;  position: relative;}/* payline — sits behind cell content so it doesn't obscure text */.payline {  position: absolute;  top: 50%; left: 0; right: 0;  height: 1px;  transform: translateY(-50%);  background: linear-gradient(90deg, transparent 0%, rgba(255,200,50,.35) 20%, rgba(255,200,50,.55) 50%, rgba(255,200,50,.35) 80%, transparent 100%);  z-index: 1;  pointer-events: none;}.payline::before, .payline::after {  content: '';  position: absolute;  top: 50%;  width: 7px; height: 7px;  border-radius: 50%;  background: var(--gold);  box-shadow: 0 0 5px var(--gold);  transform: translateY(-50%);  opacity: .7;}.payline::before { left: 4px; }.payline::after  { right: 4px; }/* ── REELS ROW ────────────────────────────────────────── */.reels-row {  display: grid;  grid-template-columns: repeat(6, 1fr);  gap: 8px;}.reel-wrap {  display: flex;  flex-direction: column;  align-items: center;  gap: 0;}.reel-label {  font-family: 'Special Elite', serif;  font-size: .6rem;  letter-spacing: .2em;  text-transform: uppercase;  color: var(--gold);  margin-bottom: 5px;}.reel-label.main-lbl { color: var(--neon-r); text-shadow: 0 0 6px rgba(255,26,74,.5); }/* reel window */.reel-window {  width: 100%;  height: 148px;  border-radius: 4px;  overflow: hidden;  position: relative;  background: var(--reel-bg);  border: 2px solid #111;  box-shadow:    inset 0 0 0 1px rgba(255,255,255,.12),    inset 0 6px 16px rgba(0,0,0,.35),    inset 0 -6px 16px rgba(0,0,0,.25);}/* heavy fades — almost fully opaque, revealing just a sliver of the adjacent cell */.reel-window::before,.reel-window::after {  content: '';  position: absolute;  left: 0; right: 0;  height: 40%;  z-index: 5;  pointer-events: none;}.reel-window::before {  top: 0;  background: linear-gradient(180deg, rgba(5,2,3,.85) 0%, transparent 100%);}.reel-window::after {  bottom: 0;  background: linear-gradient(0deg, rgba(5,2,3,.85) 0%, transparent 100%);}.reel-strip {  position: absolute;  width: 100%;  top: 0;  will-change: transform;}.reel-cell {  height: 148px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  padding: 8px 4px;  background: var(--reel-bg);  border-bottom: 1px solid var(--reel-line);  color: var(--ink);  text-align: center;  flex-shrink: 0;  position: relative;}/* subtle scanline texture on cells */.reel-cell::after {  content: '';  position: absolute;  inset: 0;  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px);  pointer-events: none;}.cell-emoji {  font-size: 2.6rem;  line-height: 1;  margin-bottom: 6px;  display: block;}.cell-text {  font-family: 'Oswald', sans-serif;  font-size: clamp(.72rem, 1.3vw, .92rem);  font-weight: 700;  line-height: 1.2;  color: #1a0c08;  text-transform: uppercase;  letter-spacing: .03em;}/* is-main styles removed — all reels uniform *//* blur during spin */.reel-window.blur-spin .reel-strip { filter: blur(2px); }/* ── HELD REEL ────────────────────────────────────────── */.reel-wrap.is-held .reel-window {  border-color: var(--gold2) !important;  box-shadow:    inset 0 0 0 2px rgba(245,200,66,.5),    0 0 18px rgba(245,200,66,.45),    inset 0 6px 16px rgba(0,0,0,.25) !important;  cursor: pointer;}.reel-wrap.is-held .reel-label {  color: var(--gold2);  text-shadow: 0 0 8px rgba(245,200,66,.6);}.hold-btn {  display: none;  font-family: 'Oswald', sans-serif;  font-size: .6rem;  font-weight: 700;  letter-spacing: .16em;  color: #fff;  text-align: center;  margin-top: 4px;  text-shadow: 0 1px 0 rgba(0,0,0,.4);  text-transform: uppercase;  height: auto;  min-height: 22px;  border: 1px solid #ff4455;  background: linear-gradient(180deg, #dd2233, #990011);  border-radius: 3px;  padding: 4px 10px;  cursor: pointer;  box-sizing: border-box;}.reel-wrap.is-hold-ready .hold-btn { display: block; }.reel-wrap.is-hold-ready:not(.is-held) .hold-btn { animation: holdBtnFlash 1.35s ease-in-out infinite; }.reel-wrap.is-held .hold-btn { background: linear-gradient(180deg, #22bb44, #116622); border-color: #44ee66; }/* reel window clickable cursor when result is showing */.reel-window.holdable { cursor: pointer; }.reel-window.holdable:hover {  border-color: rgba(212,168,67,.5);  box-shadow:    inset 0 0 0 1px rgba(212,168,67,.3),    0 0 8px rgba(212,168,67,.2),    inset 0 6px 16px rgba(0,0,0,.3);}/* nudge flash */.reel-window.nudge-flash { animation: nudgeFlash .5s ease-out; }@keyframes nudgeFlash {  0%   { box-shadow: inset 0 0 0 3px rgba(255,200,50,.9), 0 0 20px rgba(255,200,50,.5); }  100% { box-shadow: none; }}/* ── NUDGE BUTTON (hidden — hold mechanic replaces this) ─ */.nudge-btn {  display: none;  margin: 9px auto 0;  width: 56px;  height: 56px;  border-radius: 50%;  border: 3px solid var(--gold-dark);  background: radial-gradient(circle at 38% 32%, #3a1a1a, #1a0808);  color: var(--gold2);  font-family: 'Oswald', sans-serif;  font-size: .6rem;  font-weight: 700;  letter-spacing: .16em;  text-transform: uppercase;  cursor: pointer;  box-shadow:    0 0 0 1px rgba(212,168,67,.2),    0 5px 0 #060102,    0 8px 16px rgba(0,0,0,.6),    inset 0 1px 0 rgba(255,255,255,.06);  transition: transform .08s, box-shadow .08s, background .08s;  position: relative;  overflow: hidden;}.nudge-btn::before {  content: '';  position: absolute;  top: 4px; left: 50%;  transform: translateX(-50%);  width: 22px; height: 8px;  border-radius: 50%;  background: rgba(255,255,255,.08);  pointer-events: none;}.nudge-btn:hover {  background: radial-gradient(circle at 38% 32%, #4a2222, #220a0a);  border-color: var(--gold);  color: var(--gold3);  box-shadow:    0 0 0 1px rgba(212,168,67,.5),    0 0 16px rgba(212,168,67,.3),    0 5px 0 #060102,    0 8px 16px rgba(0,0,0,.6);  transform: translateY(-1px);}.nudge-btn:active,.nudge-btn.nudge-active {  transform: translateY(4px);  background: radial-gradient(circle at 38% 32%, #551a1a, #2a0808);  border-color: var(--gold2);  color: var(--gold3);  box-shadow:    0 0 0 1px rgba(255,200,50,.7),    0 0 24px rgba(255,200,50,.5),    0 1px 0 #060102,    0 3px 8px rgba(0,0,0,.5);}.nudge-btn:disabled {  opacity: .2;  cursor: not-allowed;  transform: none;}.nudge-spacer { display: block; height: 18px; }/* ── MACHINE BOTTOM ───────────────────────────────────── */.machine-bottom {  display: grid;  grid-template-columns: 1fr auto;  gap: 16px;  align-items: center;  padding: 12px 18px 18px;  border-top: 1px solid rgba(212,168,67,.1);}.result-display {  background: rgba(0,0,0,.4);  border: 1px solid rgba(212,168,67,.2);  border-radius: 4px;  padding: 12px 16px;  min-height: 68px;}.result-name {  font-family: 'Playfair Display', serif;  font-size: clamp(1rem, 2.5vw, 1.6rem);  font-weight: 700;  color: var(--gold3);  line-height: 1.1;  margin-bottom: 5px;  text-shadow: 0 0 20px rgba(255,240,160,.3);}.result-desc {  font-family: 'Special Elite', serif;  font-size: .75rem;  color: var(--muted);  line-height: 1.5;  letter-spacing: .03em;}/* ── SPIN BUTTON ──────────────────────────────────────── */.spin-btn {  width: 90px;  height: 90px;  border-radius: 50%;  border: 4px solid var(--gold-dark);  background: radial-gradient(circle at 38% 32%, #ff4433, #990011);  color: #fff;  font-family: 'Oswald', sans-serif;  font-size: .72rem;  font-weight: 700;  letter-spacing: .12em;  text-transform: uppercase;  cursor: pointer;  box-shadow:    0 0 0 2px rgba(255,80,40,.25),    0 0 0 3px #2a0000,    0 7px 0 #1a0000,    0 10px 24px rgba(0,0,0,.7),    inset 0 2px 0 rgba(255,255,255,.15);  transition: transform .08s, box-shadow .08s;  position: relative;  overflow: hidden;  flex-shrink: 0;}.spin-btn::before {  content: '';  position: absolute;  top: 6px; left: 50%;  transform: translateX(-50%);  width: 36px; height: 14px;  border-radius: 50%;  background: rgba(255,255,255,.12);  pointer-events: none;}.spin-btn::after { content: 'SPIN'; }.spin-btn:hover {  box-shadow:    0 0 0 2px rgba(255,80,40,.5),    0 0 20px rgba(255,60,20,.4),    0 0 0 3px #2a0000,    0 7px 0 #1a0000,    0 10px 24px rgba(0,0,0,.7);  transform: translateY(-2px);}.spin-btn:active {  transform: translateY(5px);  box-shadow:    0 0 0 2px rgba(255,80,40,.4),    0 0 0 3px #2a0000,    0 2px 0 #1a0000,    0 4px 10px rgba(0,0,0,.6);}.spin-btn.spinning-active { animation: btnPulse .4s ease-out; }@keyframes btnPulse { 50% { transform: scale(.93) translateY(4px); } }/* ── WIN FLASH ────────────────────────────────────────── */.win-flash {  position: absolute;  inset: 0;  border-radius: 6px;  pointer-events: none;  z-index: 20;  opacity: 0;}.win-flash.fire { animation: winFlash .8s ease-out forwards; }@keyframes winFlash {  0%   { opacity: .8; background: radial-gradient(ellipse at center, rgba(255,200,50,.3) 0%, transparent 70%); }  100% { opacity: 0; }}/* chrome bottom rail */.cab-foot {  height: 5px;  background: linear-gradient(90deg, var(--gold-dark), var(--gold2), var(--gold3), var(--gold2), var(--gold-dark));}/* ── LOWER PANELS ─────────────────────────────────────── */.lower-wrap {  width: min(860px, 100%);  display: grid;  grid-template-columns: 1fr 1fr;  gap: 14px;}.lower-panel {  background: rgba(0,0,0,.3);  border: 1px solid rgba(212,168,67,.18);  border-radius: 4px;  padding: 16px;}.lower-panel h2 {  font-family: 'Playfair Display', serif;  font-size: .95rem;  font-weight: 700;  color: var(--gold2);  letter-spacing: .08em;  margin-bottom: 12px;  padding-bottom: 8px;  border-bottom: 1px solid rgba(212,168,67,.2);  text-transform: uppercase;}.card-list {  display: grid;  gap: 7px;  max-height: 320px;  overflow-y: auto;  padding-right: 2px;}.card-list::-webkit-scrollbar { width: 3px; }.card-list::-webkit-scrollbar-track { background: transparent; }.card-list::-webkit-scrollbar-thumb { background: rgba(212,168,67,.25); border-radius: 2px; }.pizza-card, .pair-card {  background: rgba(255,255,255,.04);  border: 1px solid rgba(212,168,67,.12);  border-radius: 3px;  padding: 10px 12px;}.pizza-card strong, .pair-card strong {  font-family: 'Oswald', sans-serif;  display: block;  font-size: .85rem;  font-weight: 700;  color: var(--cream2);  margin-bottom: 4px;  letter-spacing: .04em;}.pizza-card small, .pair-card small {  font-family: 'Special Elite', serif;  color: var(--muted);  font-size: .72rem;  line-height: 1.5;}.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }.tag {  background: rgba(212,168,67,.1);  border: 1px solid rgba(212,168,67,.25);  color: var(--gold);  padding: 2px 7px;  border-radius: 2px;  font-family: 'Oswald', sans-serif;  font-size: .65rem;  font-weight: 700;  letter-spacing: .08em;  text-transform: uppercase;}/* ── RESPONSIVE ───────────────────────────────────────── */@media (max-width: 660px) {  .selector-bar { flex-wrap: wrap; }  .random-btn { width: 100%; }  .reels-row { gap: 4px; grid-template-columns: repeat(3, 1fr); }  .reel-window { height: 120px; }  .reel-cell { height: 148px; }  .cell-emoji { font-size: 1.5rem; }  .nudge-btn { width: 44px; height: 44px; font-size: .52rem; }  .machine-bottom { grid-template-columns: 1fr; }  .lower-wrap { grid-template-columns: 1fr; }  .neon-title { font-size: clamp(2rem, 10vw, 3rem); }}@media (prefers-reduced-motion: reduce) {  .bulb, .neon-eyebrow, .neon-title { animation: none; }  .reel-window.blur-spin .reel-strip { filter: none; }}

/* ── 8BIT.PIZZA PAGE SHELL + ARTWORK CABINET ─────────── */
/* Hide the app shell until cabinet art + reels are laid out (see pdc-each-way-nduja.js). */
html.pdcEwnPage.pdcEwnBooting .app {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.pdcEwnPage.pdcEwnReady .app {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html.pdcEwnPage.pdcEwnReady .app {
    transition: opacity 0.22s ease;
  }
}

html.pdcEwnPage {
  color-scheme: dark;
  --pdc-ewn-bg0: #0b123c;
  --pdc-ewn-bg1: #08103a;
  --pdc-ewn-page-wash:
    radial-gradient(1200px 840px at 20% 18%, rgba(90, 74, 149, 0.3), transparent 62%),
    radial-gradient(1000px 760px at 78% 22%, rgba(75, 248, 254, 0.12), transparent 64%),
    radial-gradient(980px 760px at 72% 88%, rgba(228, 49, 115, 0.1), transparent 62%),
    linear-gradient(180deg, var(--pdc-ewn-bg0), var(--pdc-ewn-bg1));
  --pdc-ewn-text: rgba(255, 255, 255, 0.92);
  --pdc-ewn-muted: rgba(255, 255, 255, 0.68);
  --pdc-ewn-hint: rgba(255, 255, 255, 0.78);
  --pdc-ewn-accent2: #4bf8fe;
  --pdc-ewn-accentHot: #e43173;
  --pdc-ewn-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --pdc-ewn-arcade: "Press Start 2P", ui-monospace, system-ui, sans-serif;
  background-color: var(--pdc-ewn-bg0);
  background-image: var(--pdc-ewn-page-wash);
  background-attachment: fixed;
}

.pdcEwnPage body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--pdc-ewn-text);
  background: transparent;
  background-image: none;
  align-items: center;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(60px + env(safe-area-inset-bottom, 0px));
}

.pdcEwnShell {
  width: min(860px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.pdcEwnNav {
  margin: 0 0 14px;
  font-size: 14px;
}

.pdcEwnNav a {
  color: rgba(122, 238, 255, 0.9);
  text-decoration: none;
}

.pdcEwnNav a:hover {
  text-decoration: underline;
}

.pdcEwnTopPanel,
.pdcEwnPage .lower-panel {
  position: relative;
  border: 1px solid rgba(246, 249, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: visible;
}

.pdcEwnTopPanel::before,
.pdcEwnPage .lower-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  pointer-events: none;
  border: 2px solid rgba(75, 248, 254, 0.55);
  box-shadow: 0 0 0 4px rgba(75, 248, 254, 0.14);
}

.pdcEwnPage .lower-panel:nth-child(2)::before {
  border-color: rgba(228, 49, 115, 0.55);
  box-shadow: 0 0 0 4px rgba(228, 49, 115, 0.14);
}

.pdcEwnTopPanel {
  padding: 16px 14px 0;
  margin-bottom: 18px;
}

.pdcEwnTopPanel .selector-bar {
  margin-bottom: -12px;
}

.pdcEwnPage .selector-bar {
  width: 100%;
  margin-bottom: 14px;
  gap: 10px;
  align-items: stretch;
}

.pdcEwnPage .selector-field {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.pdcEwnPage .selector-field label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pdc-ewn-muted);
  margin-bottom: 6px;
  display: block;
}

/* Full-width chip footprint — mirrors dashboard `#pdcNormalSidebar` menu pickers. */
.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect).menuSelect--intrinsicW {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuSelectTrigger {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 0;
  align-items: stretch;
  box-sizing: border-box;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuSelectTrigger > .menuBtn {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
  padding: 7.5px 10px;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuSelectTrigger:has(> .menuClear:not(.menuClear--concealed)) > .menuBtn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuSelectTrigger > .menuClear {
  align-self: stretch;
  width: 36px;
  min-width: 36px;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0 12px 12px 0;
  border: 1px solid rgba(246, 249, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.pdcEwnPage .pdcEwnDashboard :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuPanel {
  z-index: 240;
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuUnset {
  border: 1px solid #0084ff;
  background: linear-gradient(180deg, rgba(0, 132, 255, 0.16), rgba(0, 5, 14, 0.9));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, 0.22),
    0 0 14px rgba(0, 132, 255, 0.22);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuUnset:is(:hover, :focus-visible) {
  border-color: rgba(255, 0, 140, 0.92);
  background: linear-gradient(180deg, rgba(255, 0, 140, 0.14), rgba(0, 5, 14, 0.92));
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.28),
    0 0 16px rgba(255, 0, 140, 0.22);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuChosen {
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuChosen:is(:hover, :focus-visible) {
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuChosen .menuCaret,
.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn.menuChosen .menuSelectTitle {
  color: rgba(0, 0, 0, 0.92);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuPanel {
  border: 1px solid rgba(0, 132, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 8, 18, 0.97), rgba(0, 5, 12, 0.97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 132, 255, 0.08);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuGroup {
  border-color: rgba(255, 207, 90, 0.62);
  background: linear-gradient(90deg, #2a1f08, #120c04);
  color: rgba(255, 255, 255, 0.95);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#toppingTypeSelect, #completePizzaSelect) .menuPanel .menuGroup {
  border-color: rgba(0, 132, 255, 0.52);
  background: linear-gradient(90deg, #0b2742, #040f1a);
  color: rgba(255, 255, 255, 0.95);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuPanel .menuItem:hover {
  border-color: rgba(75, 248, 254, 0.55);
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.12), rgba(5, 16, 61, 0.72));
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuPanel .menuItem.active {
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
}

.pdcEwnPage .pdcEwnDashboard:not(.knowledgeMain) :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuPanel .menuItem.active .menuItemSub {
  color: rgba(0, 0, 0, 0.62);
}

.pdcEwnPage .pdcEwnDashboard #presetSelect .menuSelectTitle {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Four selector chips: one per row at all viewport widths. */
.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 8px;
  align-items: stretch;
}

.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard .selector-field {
  flex: none;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard .selector-field:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard .selector-field:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard .selector-field:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.pdcEwnPage .selector-bar.dashboard.pdcEwnDashboard .selector-field:nth-child(4) {
  grid-column: 1;
  grid-row: 4;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#presetSelect, #styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuSelectTrigger {
  overflow: hidden;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#styleSelect, #toppingTypeSelect, #completePizzaSelect) .menuBtn .menuSelectTitleCol {
  overflow: hidden;
  min-width: 0;
}

.pdcEwnPage .pdcEwnDashboard .selector-field :is(#styleSelect, #toppingTypeSelect, #completePizzaSelect, #presetSelect) .menuBtn .menuSelectTitle {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pdcEwnPage .pdcEwnDashboard #presetSelect .menuSelectTitle {
  white-space: normal;
  font-size: inherit;
}

.pdcEwnPage .section-bar {
  width: 100%;
  margin-bottom: 0;
}

.pdcEwnPage .section-bar .preset-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0;
}

.pdcEwnPage .preset-btn {
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90, 74, 149, 0.55), rgba(10, 17, 61, 0.75));
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--pdc-ewn-mono);
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.pdcEwnPage .preset-btn::before {
  display: none;
}

.pdcEwnPage .preset-btn:hover {
  border-color: rgba(75, 248, 254, 0.95);
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.14), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 4px rgba(75, 248, 254, 0.12), 0 12px 26px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  color: rgba(255, 255, 255, 0.96);
}

.pdcEwnPage .preset-btn.active {
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0, 0, 0, 0.28);
}

.pdcEwnPage .preset-btn.active:hover {
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
  transform: none;
}

.pdcEwnPage .preset-btn.active .preset-name {
  color: rgba(0, 0, 0, 0.92);
  text-shadow: none;
}

.pdcEwnPage .preset-name {
  font-family: var(--pdc-ewn-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: inherit;
}

.pdcEwnPage .preset-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.25;
}

.pdcEwnPage .preset-btn.active .preset-desc {
  color: rgba(0, 0, 0, 0.62);
}

.pdcEwnPage .lower-wrap {
  gap: 14px;
}

.pdcEwnPage .lower-panel {
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 14px;
}

.pdcEwnPage .lower-panel h2 {
  font-family: var(--pdc-ewn-arcade);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffff33;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.1);
  line-height: 1.5;
}

.pdcEwnPage .lower-panel h2 span {
  color: var(--pdc-ewn-accent2);
  font-family: var(--pdc-ewn-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.pdcEwnPage .card-list::-webkit-scrollbar-thumb {
  background: rgba(167, 120, 255, 0.35);
}

.pdcEwnPage .pizza-card,
.pdcEwnPage .pair-card {
  border-radius: 10px;
  border: 1px solid rgba(246, 249, 255, 0.1);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.55), rgba(5, 16, 61, 0.65));
  padding: 10px 12px;
}

.pdcEwnPage .pizza-card strong,
.pdcEwnPage .pair-card strong {
  font-family: var(--pdc-ewn-mono);
  font-size: 12px;
  font-weight: 900;
  color: var(--pdc-ewn-text);
  letter-spacing: 0.02em;
}

.pdcEwnPage .pizza-card small,
.pdcEwnPage .pair-card small {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: var(--pdc-ewn-hint);
  line-height: 1.45;
}

.pdcEwnPage .tag {
  border-radius: 4px;
  border: 1px solid rgba(167, 120, 255, 0.55);
  background: rgba(90, 74, 149, 0.25);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--pdc-ewn-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
}

.pdcEwnPage .pdcSiteLegal {
  width: min(860px, calc(100% - 32px));
  margin: 28px auto 0;
  color: var(--pdc-ewn-muted);
}

.pdcEwnPage .pdcSiteLegal a {
  color: rgba(122, 238, 255, 0.9);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Measured from Each Way Nduja.webp — six reel windows sit ~15.4%–84.3% across.
 * Overlays use % + cqw/cqh only (no px/vw) so they track the scaled art box,
 * same pattern as dungeon/doughjo shimmer positioning in styles.css. */
.cabinet--artwork {
  width: 100%;
  position: relative;
  /* px offsets @ 1415×1046 → cqw/cqh on .cabinet__frame (size container). */
  --ewn-window-top: 32.89%;
  --ewn-window-bottom: 35.18%;
  --ewn-window-left: 15.41%;
  --ewn-window-right: 15.69%;
  --ewn-spin-center-x: 73.4%;
  --ewn-spin-center-y: 72.5%;
  --ewn-spin-size: 16.0875%;
  /* px offsets @ 1415×1046 → cqw/cqh */
  --ewn-spin-offset-x: 2.474cqw;
  --ewn-spin-offset-y: 10.038cqh;
  --ewn-reel-style-top: 27%;
  --ewn-win-top: 71.5%;
  --ewn-win-left: 31.384%;
  --ewn-win-right: 31.445%;
  /* LOCKED: winline overlay ↔ black window (Each Way Nduja wide art, 1415×1046). */
  --ewn-win-bottom: calc(26.5% - 4.780cqh); /* +50px height @ 1046px art height */
  --ewn-ing-top: 82%;
  --ewn-ing-left: 31.384%;
  --ewn-ing-right: 31.445%;
  --ewn-ing-bottom: 9%;
  --ewn-display-offset-x: -4.028cqw;
  --ewn-display-offset-y: 3.346cqh;
  --ewn-ing-offset-x: -2.263cqw;
  --ewn-ing-offset-y: 2.677cqh;
  --ewn-diet-top: 71%;
  --ewn-diet-left: 8%;
  --ewn-diet-right: 62%;
  --ewn-diet-bottom: 19%;
  --ewn-diet-offset-x: -8.834cqw;
  --ewn-diet-offset-y: -2.677cqh;
  --ewn-recipe-top: 93.2%;
  --ewn-recipe-left: 36.4%;
  --ewn-recipe-right: 41.7%;
  --ewn-recipe-bottom: 2.8%;
  --ewn-recipe-offset-x: 0.212cqw;
  --ewn-recipe-offset-y: 0;
  background: transparent;
  border: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
  aspect-ratio: 1415 / 1046;
  min-height: 0;
}

/* Outer shell sized by aspect-ratio; inner frame is the cqw/cqh container (must not size the shell). */
.cabinet__frame {
  position: absolute;
  inset: 0;
  container-type: size;
  container-name: ewn-cabinet;
}

.cabinet__reels {
  position: absolute;
  top: var(--ewn-window-top);
  right: var(--ewn-window-right);
  bottom: var(--ewn-window-bottom);
  left: var(--ewn-window-left);
  z-index: 0;
  overflow: hidden;
}

.cabinet__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.cabinet__bg--single {
  display: none;
}

/* Marquee bulbs — overlay circles on the artwork lights around the reel frame.
 * LOCKED: JS positions use base % + cqw/cqh nudges on .cabinet__frame (see pdc-each-way-nduja.js). */
.cabinet__marquee {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.marquee-bulb {
  position: absolute;
  width: 0.92cqw;
  height: 0.92cqw;
  margin: -0.46cqw 0 0 -0.46cqw;
  border-radius: 50%;
  opacity: 0.06;
  transform: scale(0.82);
  transition:
    opacity 0.07s linear,
    transform 0.07s linear,
    box-shadow 0.07s linear,
    filter 0.07s linear,
    background 0.07s linear;
  will-change: opacity, transform, filter, box-shadow;
}

.marquee-bulb--neon-r {
  --marquee-neon: #ff1a4a;
  --marquee-neon-core: #fff0f4;
  background: radial-gradient(circle at 32% 28%, rgba(255, 240, 244, 0.9) 0%, rgba(255, 26, 74, 0.55) 45%, rgba(120, 0, 24, 0.35) 100%);
}

.marquee-bulb--neon-g {
  --marquee-neon: #39ff88;
  --marquee-neon-core: #e8fff2;
  background: radial-gradient(circle at 32% 28%, rgba(232, 255, 242, 0.9) 0%, rgba(57, 255, 136, 0.55) 45%, rgba(0, 96, 48, 0.35) 100%);
}

.marquee-bulb--neon-b {
  --marquee-neon: #00c8ff;
  --marquee-neon-core: #e8fbff;
  background: radial-gradient(circle at 32% 28%, rgba(232, 251, 255, 0.9) 0%, rgba(0, 200, 255, 0.55) 45%, rgba(0, 72, 120, 0.35) 100%);
}

.marquee-bulb--neon-y {
  --marquee-neon: #ffe033;
  --marquee-neon-core: #fffce8;
  background: radial-gradient(circle at 32% 28%, rgba(255, 252, 232, 0.9) 0%, rgba(255, 224, 51, 0.55) 45%, rgba(120, 88, 0, 0.35) 100%);
}

.marquee-bulb--neon-m {
  --marquee-neon: #ff3dff;
  --marquee-neon-core: #fff0ff;
  background: radial-gradient(circle at 32% 28%, rgba(255, 240, 255, 0.9) 0%, rgba(255, 61, 255, 0.55) 45%, rgba(96, 0, 96, 0.35) 100%);
}

.marquee-bulb.is-lit {
  opacity: 1;
  transform: scale(1.22);
  filter: brightness(1.45) saturate(1.35);
  background: radial-gradient(circle at 32% 28%, var(--marquee-neon-core) 0%, var(--marquee-neon) 38%, transparent 72%);
  box-shadow:
    0 0 0.28cqw var(--marquee-neon-core),
    0 0 0.62cqw var(--marquee-neon),
    0 0 1.1cqw color-mix(in srgb, var(--marquee-neon) 72%, transparent),
    0 0 1.8cqw color-mix(in srgb, var(--marquee-neon) 42%, transparent);
}

.marquee-bulb.is-lit-dim {
  opacity: 0.92;
  transform: scale(1.02);
  filter: brightness(1.2) saturate(1.25);
  background: radial-gradient(circle at 32% 28%, var(--marquee-neon-core) 0%, var(--marquee-neon) 52%, transparent 78%);
}

.marquee-bulb.is-lit-dim.is-lit-tail-1 {
  opacity: 0.82;
  box-shadow:
    0 0 0.22cqw var(--marquee-neon-core),
    0 0 0.5cqw var(--marquee-neon),
    0 0 0.9cqw color-mix(in srgb, var(--marquee-neon) 55%, transparent);
}

.marquee-bulb.is-lit-dim.is-lit-tail-2 {
  opacity: 0.68;
  transform: scale(0.96);
  box-shadow:
    0 0 0.18cqw color-mix(in srgb, var(--marquee-neon-core) 80%, transparent),
    0 0 0.38cqw color-mix(in srgb, var(--marquee-neon) 75%, transparent);
}

.marquee-bulb.is-lit-dim.is-lit-tail-3 {
  opacity: 0.52;
  transform: scale(0.9);
  box-shadow: 0 0 0.3cqw color-mix(in srgb, var(--marquee-neon) 55%, transparent);
}

.marquee-bulb.is-lit-dim.is-lit-tail-4,
.marquee-bulb.is-lit-dim.is-lit-tail-5,
.marquee-bulb.is-lit-dim.is-lit-tail-6 {
  opacity: 0.34;
  transform: scale(0.86);
  filter: brightness(1.05) saturate(1.1);
  box-shadow: 0 0 0.22cqw color-mix(in srgb, var(--marquee-neon) 38%, transparent);
}

.marquee-bulb.is-curtain-lit {
  opacity: 1;
  transform: scale(1.14);
  filter: brightness(1.5) saturate(1.4);
  background: radial-gradient(circle at 32% 28%, var(--marquee-neon-core) 0%, var(--marquee-neon) 42%, transparent 75%);
  box-shadow:
    0 0 0.32cqw var(--marquee-neon-core),
    0 0 0.7cqw var(--marquee-neon),
    0 0 1.25cqw color-mix(in srgb, var(--marquee-neon) 65%, transparent);
}

.cabinet__marquee.is-finale {
  animation: marqueeFinalePulse 0.45s ease-in-out 2;
}

.marquee-bulb.is-finale-flash.is-lit {
  transform: scale(1.34);
  filter: brightness(1.65) saturate(1.5);
  box-shadow:
    0 0 0.4cqw var(--marquee-neon-core),
    0 0 0.85cqw var(--marquee-neon),
    0 0 1.5cqw color-mix(in srgb, var(--marquee-neon) 85%, transparent),
    0 0 2.2cqw color-mix(in srgb, var(--marquee-neon) 50%, transparent);
}

@keyframes marqueeFinalePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

.cabinet__controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-bulb {
    transition: none;
  }
  .cabinet__marquee.is-finale {
    animation: none;
  }
  .cabinet__marquee.is-reduced .marquee-bulb.is-lit {
    animation: none;
  }
}

.cabinet__controls .spin-btn,
.cabinet__controls .machine-bottom,
.cabinet__controls .diet-toggle--artwork {
  pointer-events: auto;
}

.cabinet__add-recipe:not(:disabled) {
  pointer-events: auto;
}

.cabinet__controls .cabinet__winline,
.cabinet__controls .cabinet__ingredients {
  pointer-events: none;
}

.cabinet__controls .win-flash {
  pointer-events: none;
}

.cabinet__controls .spin-btn {
  z-index: 21;
}

.cabinet__controls .diet-toggle--artwork {
  z-index: 25;
}

.cabinet--artwork .reels-surround {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.cabinet--artwork .reels-payline {
  position: absolute;
  left: 0;
  right: 0;
  top: 33.33%;
  height: 33.33%;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.cabinet--artwork .reels-surround.jackpot-fire .reels-payline {
  opacity: 1;
}

.cabinet--artwork .reels-payline__glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 224, 51, 0.08) 35%, rgba(255, 26, 74, 0.14) 50%, rgba(255, 224, 51, 0.08) 65%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 160, 0.55),
    inset 0 -1px 0 rgba(255, 240, 160, 0.55),
    inset 0 0 1.2cqh rgba(255, 200, 50, 0.28);
}

.cabinet--artwork .reels-surround.jackpot-fire .reels-payline__glow {
  animation: paylineNeonPulse 1.15s ease-in-out infinite;
}

.cabinet--artwork .reels-payline__beam {
  position: absolute;
  top: 50%;
  left: -36%;
  width: 32%;
  height: 0.38cqh;
  min-height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 200, 255, 0.15) 12%,
    rgba(57, 255, 136, 0.85) 28%,
    #fff0a0 42%,
    #ff2233 52%,
    #ffe033 62%,
    rgba(57, 255, 136, 0.85) 78%,
    rgba(0, 200, 255, 0.15) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 0.566cqw #ffe033,
    0 0 1.13cqw rgba(255, 34, 51, 0.75),
    0 0 1.7cqw rgba(57, 255, 136, 0.45),
    0 0 2.26cqw rgba(0, 200, 255, 0.25);
  opacity: 0;
}

.cabinet--artwork .reels-surround.jackpot-fire .reels-payline__beam {
  animation: paylineBeamSweep 0.72s cubic-bezier(0.22, 0.85, 0.2, 1) forwards;
}

.cabinet--artwork .reels-payline__bulbs {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 34, 51, 0) 0,
    rgba(255, 34, 51, 0) 0.566cqw,
    rgba(255, 224, 51, 0.95) 0.566cqw,
    rgba(255, 224, 51, 0.95) 0.849cqw
  );
  background-size: 1.7cqw 100%;
  opacity: 0;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.cabinet--artwork .reels-surround.jackpot-fire .reels-payline__bulbs {
  animation: paylineBulbChase 0.9s linear infinite;
  opacity: 0.75;
}

.cabinet--artwork .cabinet__style-reveal {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ewn-reel-style-top, 27%);
  z-index: 26;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0 2%;
  overflow: visible;
  pointer-events: none;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.cabinet--artwork:has(.reels-surround.is-spinning) .cabinet__style-reveal {
  opacity: 0;
  visibility: hidden;
}

.cabinet--artwork .cabinet__style-reveal.is-visible {
  opacity: 1;
  visibility: visible;
}

.cabinet--artwork:has(.reels-surround.is-spinning) .cabinet__style-reveal.is-visible {
  opacity: 0;
  visibility: hidden;
}

.cabinet--artwork .cabinet__style-reveal__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: min(100%, 88cqw);
  padding: 0.7em 1.1em;
  font-size: clamp(1.44cqw, 1.76cqw, 2.1cqw);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--neon-y);
  background: linear-gradient(180deg, rgba(11, 18, 60, 0.97) 0%, rgba(8, 16, 58, 0.98) 100%);
  border: 0.12cqw solid rgba(255, 224, 51, 0.45);
  border-radius: 0.55cqw;
  box-shadow:
    0 0 0.35cqw rgba(255, 224, 51, 0.25),
    0 0.35cqw 0.85cqw rgba(0, 0, 0, 0.65),
    inset 0 0 0.55cqw rgba(255, 26, 74, 0.12);
  text-shadow:
    0 0 0.7cqw var(--neon-y),
    0 0 1.6cqw rgba(255, 224, 51, 0.55),
    0 0 2.8cqw rgba(255, 26, 74, 0.35);
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  animation: ewnStyleHover 2.8s ease-in-out infinite, ewnStyleNeonPulse 2.2s ease-in-out infinite;
}

.cabinet--artwork .cabinet__style-reveal__label:has(.cabinet__style-reveal__title)::before,
.cabinet--artwork .cabinet__style-reveal__label:has(.cabinet__style-reveal__title)::after {
  content: none;
}

.cabinet--artwork .cabinet__style-reveal__label.is-multi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.cabinet--artwork .cabinet__style-reveal__label.is-multi::before,
.cabinet--artwork .cabinet__style-reveal__label.is-multi::after {
  content: none;
}

.cabinet--artwork .cabinet__style-reveal__fit {
  display: block;
  max-width: 100%;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: inherit;
}

.cabinet--artwork .cabinet__style-reveal__label.is-multi .cabinet__style-reveal__fit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  width: 100%;
}

.cabinet--artwork .cabinet__style-reveal__title {
  display: block;
  white-space: nowrap;
}

.cabinet--artwork .cabinet__style-reveal__title::before,
.cabinet--artwork .cabinet__style-reveal__title::after {
  color: var(--neon-r);
  text-shadow:
    0 0 0.56cqw var(--neon-r),
    0 0 1.24cqw rgba(255, 26, 74, 0.55);
}

.cabinet--artwork .cabinet__style-reveal__title::before {
  content: "★ ";
}

.cabinet--artwork .cabinet__style-reveal__title::after {
  content: " ★";
}

.cabinet--artwork .cabinet__style-reveal__hint {
  display: block;
  font-size: 0.58em;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--cream2);
  text-shadow: 0 0 0.35cqw rgba(255, 240, 160, 0.35);
  animation: none;
}

.cabinet--artwork .cabinet__style-reveal__label::before,
.cabinet--artwork .cabinet__style-reveal__label::after {
  color: var(--neon-r);
  text-shadow:
    0 0 0.56cqw var(--neon-r),
    0 0 1.24cqw rgba(255, 26, 74, 0.55);
}

.cabinet--artwork .cabinet__style-reveal__label::before {
  content: "★ ";
}

.cabinet--artwork .cabinet__style-reveal__label::after {
  content: " ★";
}

.cabinet--artwork .cabinet__style-reveal__label.is-locked-style {
  animation: ewnStyleHover 2.8s ease-in-out infinite, ewnStyleNeonPulse 2.2s ease-in-out infinite;
}

.cabinet--artwork .cabinet__style-reveal.is-reveal .cabinet__style-reveal__label.is-locked-style {
  animation: ewnStyleHover 2.8s ease-in-out infinite, ewnStyleNeonPulse 2.2s ease-in-out infinite;
}

.cabinet--artwork .cabinet__style-reveal.is-reveal .cabinet__style-reveal__label {
  animation:
    ewnStyleHover 2.8s ease-in-out infinite,
    ewnStyleNeonPulse 2.2s ease-in-out infinite,
    ewnStyleRevealPop 0.65s cubic-bezier(0.22, 1.1, 0.36, 1);
}

.cabinet--artwork .cabinet__style-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.cabinet--artwork .cabinet__style-confetti__piece {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 0.9cqw);
  height: var(--size, 0.9cqw);
  margin: calc(var(--size, 0.9cqw) / -2) 0 0 calc(var(--size, 0.9cqw) / -2);
  border-radius: 50%;
  background: var(--color, var(--neon-y));
  box-shadow:
    0 0 0.35cqw color-mix(in srgb, var(--color, var(--neon-y)) 70%, transparent),
    0 0 0.75cqw color-mix(in srgb, var(--color, var(--neon-y)) 35%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
  animation: ewnConfettiBurst 1.65s cubic-bezier(0.12, 0.84, 0.22, 1) var(--delay, 0s) forwards;
  will-change: transform, opacity;
}

.cabinet--artwork .cabinet__style-confetti__piece.is-rect {
  width: calc(var(--size, 0.9cqw) * 0.42);
  height: calc(var(--size, 0.9cqw) * 1.35);
  margin:
    calc(var(--size, 0.9cqw) * 1.35 / -2) 0
    0 calc(var(--size, 0.9cqw) * 0.42 / -2);
  border-radius: 0.08cqw;
}

.cabinet--artwork .cabinet__style-confetti__piece.is-star {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--size, 0.9cqw);
  line-height: 1;
  color: var(--color, var(--neon-y));
  text-shadow:
    0 0 0.4cqw var(--color, var(--neon-y)),
    0 0 0.9cqw color-mix(in srgb, var(--color, var(--neon-y)) 55%, transparent);
}

.cabinet--artwork .cabinet__style-confetti__piece.is-star::before {
  content: none;
}

@keyframes ewnConfettiBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(1)
      rotate(var(--rot, 360deg));
  }
}

@keyframes ewnStyleRevealPop {
  0% {
    filter: brightness(1.55) saturate(1.4);
    box-shadow:
      0 0 0.55cqw rgba(255, 224, 51, 0.55),
      0 0.35cqw 0.85cqw rgba(0, 0, 0, 0.65),
      inset 0 0 0.75cqw rgba(255, 26, 74, 0.22);
  }
  45% {
    filter: brightness(1.75) saturate(1.5);
    box-shadow:
      0 0 0.95cqw rgba(0, 200, 255, 0.45),
      0 0.35cqw 0.85cqw rgba(0, 0, 0, 0.65),
      inset 0 0 0.85cqw rgba(57, 255, 136, 0.18);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      0 0 0.35cqw rgba(255, 224, 51, 0.25),
      0 0.35cqw 0.85cqw rgba(0, 0, 0, 0.65),
      inset 0 0 0.55cqw rgba(255, 26, 74, 0.12);
  }
}

@keyframes ewnStyleHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.7cqh); }
}

@keyframes ewnStyleNeonPulse {
  0%, 100% {
    color: var(--neon-y);
    text-shadow:
      0 0 0.7cqw var(--neon-y),
      0 0 1.6cqw rgba(255, 224, 51, 0.55),
      0 0 2.8cqw rgba(255, 26, 74, 0.35);
  }
  50% {
    color: #fff8d8;
    text-shadow:
      0 0 0.84cqw var(--neon-b),
      0 0 1.9cqw rgba(0, 200, 255, 0.5),
      0 0 3.2cqw rgba(57, 255, 136, 0.35);
  }
}

.cabinet--artwork .reels-surround.jackpot-fire .reel-cell--winline {
  filter: brightness(1.22) saturate(1.12);
  text-shadow: 0 0 0.566cqw rgba(255, 240, 160, 0.45);
}

.cabinet--artwork .reels-surround.jackpot-fire .reel-cell--winline .cell-emoji {
  filter: drop-shadow(0 0 0.42cqw rgba(255, 224, 51, 0.65)) drop-shadow(0 0 0.85cqw rgba(255, 34, 51, 0.35));
}

@keyframes paylineBeamSweep {
  0% {
    left: -36%;
    opacity: 0;
    filter: brightness(0.7);
  }
  12% {
    opacity: 1;
    filter: brightness(1.35);
  }
  100% {
    left: 108%;
    opacity: 0.15;
    filter: brightness(1);
  }
}

@keyframes paylineNeonPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 160, 0.45),
      inset 0 -1px 0 rgba(255, 240, 160, 0.45),
      inset 0 0 0.85cqw rgba(255, 200, 50, 0.18);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 160, 0.95),
      inset 0 -1px 0 rgba(255, 240, 160, 0.95),
      inset 0 0 1.7cqw rgba(255, 34, 51, 0.35),
      inset 0 0 2.26cqw rgba(57, 255, 136, 0.2);
    filter: brightness(1.25);
  }
}

@keyframes paylineBulbChase {
  0% { background-position: 0 0; }
  100% { background-position: 1.7cqw 0; }
}

.cabinet--artwork .win-flash {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  border-radius: 0;
}

.cabinet--artwork .win-flash.fire {
  animation: vegasCabinetFlash 1.15s ease-out forwards;
}

@keyframes vegasCabinetFlash {
  0% {
    opacity: 0;
    background: transparent;
  }
  10% {
    opacity: 1;
    background:
      radial-gradient(ellipse 130% 22% at 50% 38%, rgba(255, 34, 51, 0.28) 0%, transparent 72%),
      radial-gradient(ellipse 110% 16% at 50% 38%, rgba(255, 224, 51, 0.42) 0%, transparent 70%),
      radial-gradient(ellipse 90% 40% at 50% 50%, rgba(57, 255, 136, 0.08) 0%, transparent 75%);
  }
  35% {
    opacity: 0.95;
    background:
      radial-gradient(ellipse 130% 22% at 50% 38%, rgba(255, 224, 51, 0.38) 0%, transparent 72%),
      radial-gradient(ellipse 110% 16% at 50% 38%, rgba(0, 200, 255, 0.18) 0%, transparent 70%);
  }
  100% {
    opacity: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet--artwork .reels-surround.jackpot-fire .reels-payline__beam,
  .cabinet--artwork .reels-surround.jackpot-fire .reels-payline__glow,
  .cabinet--artwork .reels-surround.jackpot-fire .reels-payline__bulbs {
    animation: none;
  }
  .cabinet--artwork .reels-surround.jackpot-fire .reels-payline__glow {
    box-shadow:
      inset 0 1px 0 rgba(255, 240, 160, 0.65),
      inset 0 -1px 0 rgba(255, 240, 160, 0.65),
      inset 0 0 1.2cqh rgba(255, 200, 50, 0.28);
  }
  .cabinet--artwork .win-flash.fire {
    animation: none;
    opacity: 0;
  }
}

.cabinet--artwork .payline {
  display: none;
}

.cabinet--artwork .reels-row {
  height: 100%;
  gap: 0;
  align-items: stretch;
}

.cabinet--artwork .reel-wrap {
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.cabinet--artwork .reel-label,
.cabinet--artwork .reel-bulbs {
  display: none;
}

.cabinet--artwork .reel-window {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--reel-bg);
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

/* Per-reel neon palette for the win-line land shimmer. */
.cabinet--artwork .reel-window[data-slot="base"] {
  --reel-land-neon: var(--neon-r);
  --reel-land-neon-rgb: 255, 26, 74;
}
.cabinet--artwork .reel-window[data-slot="topping1"] {
  --reel-land-neon: var(--neon-g);
  --reel-land-neon-rgb: 57, 255, 136;
}
.cabinet--artwork .reel-window[data-slot="topping2"] {
  --reel-land-neon: var(--neon-b);
  --reel-land-neon-rgb: 0, 200, 255;
}
.cabinet--artwork .reel-window[data-slot="topping3"] {
  --reel-land-neon: var(--neon-y);
  --reel-land-neon-rgb: 255, 224, 51;
}
.cabinet--artwork .reel-window[data-slot="support"] {
  --reel-land-neon: #ff44cc;
  --reel-land-neon-rgb: 255, 68, 204;
}
.cabinet--artwork .reel-window[data-slot="finish"] {
  --reel-land-neon: #ff7722;
  --reel-land-neon-rgb: 255, 119, 34;
}

.cabinet--artwork .reel-window::before,
.cabinet--artwork .reel-window::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  z-index: 5;
  pointer-events: none;
}

.cabinet--artwork .reel-window::before {
  top: 0;
  background: linear-gradient(180deg, rgba(253, 245, 224, 0.97) 0%, rgba(253, 245, 224, 0.55) 45%, transparent 100%);
}

.cabinet--artwork .reel-window::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(253, 245, 224, 0.97) 0%, rgba(253, 245, 224, 0.55) 45%, transparent 100%);
}

.cabinet--artwork .reel-window .reel-strip {
  z-index: 1;
}

.cabinet--artwork .reel-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

.cabinet--artwork .reel-window.reel-window--spinning {
  z-index: 4;
}

.cabinet--artwork .reel-window.reel-window--spinning .reel-strip {
  filter: blur(2.5px) brightness(0.92);
  will-change: transform, filter;
}

.cabinet--artwork .reel-window.reel-window--spinning .reel-cell {
  opacity: 0.62;
  filter: brightness(0.9) saturate(0.95);
}

.cabinet--artwork .reels-surround.is-spinning .reel-window.reel-window--spinning {
  box-shadow: inset 0 0 0.478cqh rgba(255, 200, 50, 0.18);
}

.cabinet--artwork .reel-cell {
  /* Three visible bands — win line sits on the centre cell. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--reel-cell-h, 31.93cqh);
  min-height: var(--reel-cell-h, 31.93cqh);
  padding: 0.383cqh 0.141cqw;
  border-bottom: 0;
  opacity: 0.38;
  filter: brightness(0.88) saturate(0.85);
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
  position: relative;
}

.cabinet--artwork .reel-cell--winline {
  opacity: 1;
  filter: brightness(1.08) saturate(1);
  z-index: 2;
}

.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash {
  animation: reelWinLandFlash 0.58s ease-out;
}

.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash::before {
  content: '';
  position: absolute;
  inset: -8% -40%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(var(--reel-land-neon-rgb), 0.12) 40%,
    rgba(var(--reel-land-neon-rgb), 0.92) 50%,
    rgba(var(--reel-land-neon-rgb), 0.12) 60%,
    transparent 72%
  );
  mix-blend-mode: screen;
  animation: reelLandNeonShimmer 0.58s ease-out forwards;
}

.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-emoji,
.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-text,
.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-placeholder-pizza,
.cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-blank {
  position: relative;
  z-index: 4;
  animation: reelLandContentGlow 0.58s ease-out;
}

.cabinet--artwork .reel-window--landed {
  animation: reelWindowSettle 0.38s ease-out;
}

@keyframes reelWindowSettle {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(0.12cqh); }
  52% { transform: translateY(-0.08cqh); }
  74% { transform: translateY(0.04cqh); }
}

@keyframes reelLandNeonShimmer {
  0% {
    transform: translateX(-125%) skewX(-14deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(125%) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes reelLandContentGlow {
  0%, 100% {
    filter: none;
    text-shadow: none;
  }
  42% {
    filter: drop-shadow(0 0 0.42cqw rgba(var(--reel-land-neon-rgb), 0.95))
      drop-shadow(0 0 0.99cqw rgba(var(--reel-land-neon-rgb), 0.55));
    text-shadow:
      0 0 0.28cqw rgba(var(--reel-land-neon-rgb), 0.9),
      0 0 0.71cqw rgba(var(--reel-land-neon-rgb), 0.45);
  }
}

@keyframes reelWinLandFlash {
  0% {
    opacity: 0.25;
    filter: brightness(0.8) saturate(0.9);
    transform: scale(0.98);
  }
  42% {
    opacity: 1;
    filter: brightness(1.12) saturate(1.45);
    transform: scale(1.02);
    box-shadow:
      0 0 0.85cqw rgba(var(--reel-land-neon-rgb), 0.75),
      0 0 1.98cqw rgba(var(--reel-land-neon-rgb), 0.38);
  }
  100% {
    opacity: 1;
    filter: brightness(1.08) saturate(1);
    transform: scale(1);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet--artwork .reel-cell {
    transition: none;
  }
  .cabinet--artwork .reel-window--spinning .reel-strip {
    filter: none;
  }
  .cabinet--artwork .reel-window--landed {
    animation: none;
  }
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash {
    animation: none;
    opacity: 1;
    filter: brightness(1.08);
    box-shadow: none;
  }
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash::before,
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-emoji,
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-text,
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-placeholder-pizza,
  .cabinet--artwork .reel-window--landed .reel-cell--winline.reel-cell--land-flash .cell-blank {
    animation: none;
    filter: none;
    text-shadow: none;
  }
}

.cabinet--artwork .cell-emoji {
  font-size: clamp(3.2cqw, 5cqw, 6.4cqw);
  margin-bottom: 0.19cqh;
}

/* Shift 🍅 toward yellow for yellow tomatoes (filter on wrap survives land-flash). */
.cabinet--artwork .cell-emoji-wrap--yellow-tomato {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.19cqh;
  filter: sepia(0.4) hue-rotate(38deg) saturate(2.5) brightness(1.12);
}

.cabinet--artwork .cell-emoji-wrap--yellow-tomato .cell-emoji {
  margin-bottom: 0;
}

/* Shift 🧂 toward dark grey for black pepper (filter on wrap survives land-flash). */
.cabinet--artwork .cell-emoji-wrap--black-pepper {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.19cqh;
  filter: grayscale(1) brightness(0.42) contrast(1.18);
}

.cabinet--artwork .cell-emoji-wrap--black-pepper .cell-emoji {
  margin-bottom: 0;
}

/* Shift 🐟 toward salmon pink for smoked salmon (filter on wrap survives land-flash). */
.cabinet--artwork .cell-emoji-wrap--smoked-salmon {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.19cqh;
  filter: sepia(0.55) hue-rotate(332deg) saturate(2.6) brightness(1.1);
}

.cabinet--artwork .cell-emoji-wrap--smoked-salmon .cell-emoji {
  margin-bottom: 0;
}

/* Shift 🧅 toward red/purple for red onion + pickled red onion (filter on wrap survives land-flash). */
.cabinet--artwork .cell-emoji-wrap--red-onion {
  display: inline-block;
  line-height: 1;
  margin-bottom: 0.19cqh;
  filter: sepia(0.45) hue-rotate(308deg) saturate(2.15) brightness(1.08);
}

.cabinet--artwork .cell-emoji-wrap--red-onion .cell-emoji {
  margin-bottom: 0;
}

.cabinet--artwork .cell-text {
  font-size: clamp(0.84cqw, 1.1cqw, 1.44cqw);
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-top: 0.478cqh;
  box-sizing: border-box;
  width: 100%;
  padding-inline: 0.141cqw;
  text-align: center;
}

.cabinet--artwork .reel-cell--blank {
  justify-content: center;
  align-items: center;
}

.cabinet--artwork .reel-cell--blank .cell-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(5.625cqw, 8.75cqw, 11.25cqw);
  line-height: 1;
  color: var(--ink);
  text-align: center;
  transform: translateY(-1.434cqh);
}

.cabinet--artwork .reel-cell--placeholder {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.383cqh;
}

.cabinet--artwork .reel-cell--placeholder .cell-placeholder-img {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  transform: translateY(-0.478cqh);
}

.cabinet--artwork .reel-cell--placeholder .cell-placeholder-pizza {
  display: block;
  width: clamp(4.8cqw, 6.9cqw, 8.4cqw);
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cabinet--artwork .reel-cell--placeholder .cell-placeholder {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  padding-inline: 0.141cqw;
  box-sizing: border-box;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.013cqw, 1.28cqw, 1.653cqw);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
  overflow-wrap: anywhere;
}

.cabinet--artwork .reel-cell--cold-empty {
  visibility: hidden;
  pointer-events: none;
}

.cabinet--artwork .reel-cell--coin-only {
  gap: 0;
}

.cabinet--artwork .reel-cell--coin-only .cell-placeholder-img {
  transform: translateY(-0.191cqh);
}

.cabinet--artwork .reel-cell--coin-only .cell-placeholder-pizza {
  width: clamp(5.4cqw, 7.8cqw, 9.6cqw);
}

/* Coin-idle reels are display-only until a spin result enables hold. */
.cabinet--artwork .reel-wrap:not(.is-hold-ready) .reel-window,
.cabinet--artwork .reel-wrap:not(.is-hold-ready) .reel-window.holdable {
  cursor: default;
  pointer-events: none;
}

.cabinet--artwork .reel-wrap:not(.is-hold-ready) .reel-window.holdable:hover {
  border-color: transparent;
  box-shadow: none;
}

.cabinet--artwork .reel-wrap.is-hold-ready .reel-window.holdable {
  cursor: pointer;
  pointer-events: auto;
}

.cabinet--artwork .hold-btn {
  position: absolute;
  left: 50%;
  bottom: calc(0.478cqh + 3px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
  width: calc(100% - 1.2cqw);
  min-height: auto;
  height: auto;
  font-family: "Press Start 2P", ui-monospace, system-ui, sans-serif;
  font-size: clamp(0.95cqw, 1.2cqw, 1.45cqw);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #dd2233 0%, #990011 100%);
  border: 0.141cqw solid #ff4455;
  border-radius: 0.283cqw;
  padding: 0.574cqh 0.424cqw;
  box-shadow:
    0 0.096cqh 0 #4a0008,
    inset 0 0.048cqh 0 rgba(255, 255, 255, 0.15),
    0 0 0.566cqw rgba(255, 34, 51, 0.35);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
}

.cabinet--artwork .reel-wrap.is-hold-ready .hold-btn {
  display: block;
  pointer-events: auto;
}

.cabinet--artwork .reel-wrap.is-hold-ready:not(.is-held) .hold-btn {
  animation: holdBtnFlash 1.35s ease-in-out infinite;
  border-color: #ff5566;
}

.cabinet--artwork .reel-wrap.is-held .hold-btn {
  animation: none;
  background: linear-gradient(180deg, #22bb44 0%, #116622 100%);
  border-color: #44ee66;
  color: #fff;
  box-shadow:
    0 0 0.849cqw rgba(57, 255, 136, 0.45),
    inset 0 0 0.141cqw rgba(180, 255, 200, 0.35),
    0 0.096cqh 0 #043a10;
  text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.4);
}

.cabinet--artwork .hold-btn:hover:not(:disabled) {
  transform: translateX(-50%) translateY(-0.096cqh);
}

.cabinet--artwork .reel-wrap.is-hold-ready:not(.is-held) .hold-btn:hover:not(:disabled) {
  border-color: #ff7788;
}

.cabinet--artwork .reel-wrap.is-held .hold-btn:hover:not(:disabled) {
  border-color: #66ff88;
}

.cabinet--artwork .hold-btn:active:not(:disabled) {
  transform: translateX(-50%) translateY(0.096cqh);
}

.cabinet--artwork .hold-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@keyframes holdBtnFlash {
  0%, 100% {
    opacity: 1;
    background: linear-gradient(180deg, #ee3344 0%, #aa0011 100%);
    box-shadow:
      0 0.096cqh 0 #4a0008,
      0 0 0.849cqw rgba(255, 34, 51, 0.55),
      inset 0 0.048cqh 0 rgba(255, 255, 255, 0.18);
    border-color: #ff6677;
  }
  45%, 55% {
    opacity: 0.88;
    background: linear-gradient(180deg, #991122 0%, #660008 100%);
    box-shadow:
      0 0.096cqh 0 #4a0008,
      0 0 0.283cqw rgba(255, 34, 51, 0.2),
      inset 0 0 0 rgba(255, 255, 255, 0);
    border-color: #aa2233;
  }
}

/* Each-way nudge — rainbow reel + purple NUDGE chip (white on purple). */
.cabinet--artwork .reel-window.reel-window--each-way-nudge {
  z-index: 5;
  box-shadow:
    inset 0 0 0.72cqh rgba(255, 255, 255, 0.14),
    0 0 0.9cqw rgba(255, 61, 255, 0.38),
    0 0 1.55cqw rgba(0, 200, 255, 0.3);
}

.cabinet--artwork .reel-window--each-way-nudge .reel-strip {
  animation: eachWayNudgeRainbow 0.42s linear infinite;
}

.cabinet--artwork .reel-window--each-way-nudge .reel-cell {
  opacity: 1;
  animation: eachWayNudgeCellRainbow 0.42s linear infinite;
}

@keyframes eachWayNudgeRainbow {
  0% { filter: hue-rotate(0deg) saturate(1.5) brightness(1.06); }
  100% { filter: hue-rotate(360deg) saturate(1.5) brightness(1.06); }
}

@keyframes eachWayNudgeCellRainbow {
  0% { filter: hue-rotate(0deg) saturate(1.55) brightness(1.14); }
  100% { filter: hue-rotate(360deg) saturate(1.55) brightness(1.14); }
}

.cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn,
.cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn:disabled {
  display: block;
  pointer-events: none;
  opacity: 1;
  cursor: default;
  animation: nudgeBtnFlash 1.1s ease-in-out infinite;
  color: #fff;
  background: linear-gradient(180deg, #a86bff 0%, #6b28c8 100%);
  border-color: #ddb8ff;
  box-shadow:
    0 0.096cqh 0 #2a0848,
    0 0 0.95cqw rgba(180, 120, 255, 0.72),
    inset 0 0.048cqh 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.35);
}

@keyframes nudgeBtnFlash {
  0%, 100% {
    opacity: 1;
    background: linear-gradient(180deg, #b87cff 0%, #742fd4 100%);
    border-color: #e8ccff;
    box-shadow:
      0 0.096cqh 0 #2a0848,
      0 0 1.05cqw rgba(200, 140, 255, 0.85),
      inset 0 0.048cqh 0 rgba(255, 255, 255, 0.32);
  }
  45%, 55% {
    opacity: 1;
    background: linear-gradient(180deg, #8b4fd6 0%, #5b1fa8 100%);
    border-color: #c49bff;
    box-shadow:
      0 0.096cqh 0 #2a0848,
      0 0 0.45cqw rgba(155, 89, 230, 0.45),
      inset 0 0 0 rgba(255, 255, 255, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet--artwork .reel-wrap.is-hold-ready:not(.is-held) .hold-btn {
    animation: none;
  }

  .cabinet--artwork .cabinet__style-reveal__label,
  .cabinet--artwork .cabinet__style-reveal.is-reveal .cabinet__style-reveal__label,
  .cabinet--artwork .cabinet__style-confetti__piece {
    animation: none;
  }

  .cabinet--artwork .reel-window--each-way-nudge .reel-strip,
  .cabinet--artwork .reel-window--each-way-nudge .reel-cell {
    animation: none;
  }

  .cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn,
  .cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn:disabled {
    animation: none;
  }
}

.cabinet--artwork .machine-bottom {
  display: none;
}

.cabinet--artwork .diet-toggle--artwork {
  position: absolute;
  top: var(--ewn-diet-top);
  left: var(--ewn-diet-left);
  right: var(--ewn-diet-right);
  bottom: var(--ewn-diet-bottom);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2.868cqh;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  padding: 6% 8%;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transform: translate(var(--ewn-diet-offset-x), var(--ewn-diet-offset-y));
}

.cabinet--artwork .diet-toggle--artwork .diet-btn {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.707cqw;
  padding: 0.383cqh 0.141cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.68cqw, 1.92cqw, 2.2cqw);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.9;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, transform 0.08s ease;
}

.cabinet--artwork .diet-toggle--artwork .diet-btn::before {
  content: "";
  flex-shrink: 0;
  width: 0.989cqw;
  height: 0.989cqw;
  border-radius: 50%;
  border: 0.071cqw solid rgba(0, 0, 0, 0.45);
  background: radial-gradient(circle at 35% 30%, #553333 0%, #220808 55%, #110404 100%);
  box-shadow: inset 0 0.191cqh 0.287cqh rgba(0, 0, 0, 0.55);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.cabinet--artwork .diet-toggle--artwork .diet-btn::after {
  display: none;
}

.cabinet--artwork .diet-toggle--artwork .diet-btn:active {
  transform: translateY(0.096cqh);
}

.cabinet--artwork .diet-toggle--artwork .diet-btn:active::before {
  transform: translateY(0.096cqh) scale(0.94);
  box-shadow: inset 0 0.287cqh 0.383cqh rgba(0, 0, 0, 0.65);
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-meat {
  background: transparent;
  box-shadow: none;
  color: var(--neon-r);
  text-shadow: 0 0 8px rgba(255, 26, 74, 0.45);
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-meat::before {
  background: #cc0000;
  box-shadow: 0 0 6px #cc0000, 0 0 14px rgba(204, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  animation: bulbBlink 1.8s ease-in-out infinite;
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-veggie {
  background: transparent;
  box-shadow: none;
  color: var(--neon-g);
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.4);
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-veggie::before {
  background: #007700;
  box-shadow: 0 0 6px #007700, 0 0 14px rgba(0, 119, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  animation: bulbBlink 1.8s ease-in-out infinite 0.3s;
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-vegan {
  background: transparent;
  box-shadow: none;
  color: #a8ff50;
  text-shadow: 0 0 8px rgba(168, 255, 80, 0.4);
}

.cabinet--artwork .diet-toggle--artwork .diet-btn.active-vegan::before {
  background: #557700;
  box-shadow: 0 0 6px #88aa00, 0 0 14px rgba(168, 255, 80, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  animation: bulbBlink 1.8s ease-in-out infinite 0.6s;
}

.cabinet--artwork .cabinet__winline,
.cabinet--artwork .cabinet__ingredients {
  position: absolute;
  z-index: 2;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  box-sizing: border-box;
}

.cabinet--artwork .cabinet__winline {
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  transform: translate(var(--ewn-display-offset-x), var(--ewn-display-offset-y));
  top: var(--ewn-win-top);
  left: var(--ewn-win-left);
  right: var(--ewn-win-right);
  bottom: var(--ewn-win-bottom);
  padding: 0 1%;
  font-size: clamp(1.163cqw, 1.35cqw, 1.65cqw);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--gold3);
  text-shadow: none;
  white-space: normal;
  background: transparent;
}

.cabinet--artwork .cabinet__winline-inner {
  width: 100%;
  max-width: 100%;
  text-align: center;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cabinet--artwork .cabinet__ingredients {
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  top: var(--ewn-ing-top);
  left: var(--ewn-ing-left);
  right: var(--ewn-ing-right);
  bottom: var(--ewn-ing-bottom);
  transform: translate(var(--ewn-ing-offset-x), var(--ewn-ing-offset-y));
  padding: 0 2%;
  font-size: clamp(0.804cqw, 0.904cqw, 1.044cqw);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--cream2);
}

.cabinet--artwork .cabinet__ingredients-inner {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cabinet--artwork .cabinet__ingredient-part {
  display: inline;
  white-space: normal;
}

.cabinet--artwork .cabinet__ingredient-part--fallback::after {
  content: none;
}

.cabinet--artwork .cabinet__add-recipe {
  position: absolute;
  top: var(--ewn-recipe-top);
  left: var(--ewn-recipe-left);
  right: var(--ewn-recipe-right);
  bottom: var(--ewn-recipe-bottom);
  z-index: 0;
  transform: translate(var(--ewn-recipe-offset-x), var(--ewn-recipe-offset-y));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #1fa83c 0%, #0f5520 100%);
  box-shadow:
    0 0 0.45cqw rgba(57, 255, 136, 0.48),
    0 0 1.05cqw rgba(57, 255, 136, 0.32),
    0 0 1.75cqw rgba(57, 255, 136, 0.14),
    inset 0 0 0.12cqw rgba(180, 255, 200, 0.28),
    0 0.12cqh 0 #043a10;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease,
    opacity 0.12s ease;
}

@keyframes addRecipeGlow {
  0%, 100% {
    box-shadow:
      0 0 0.45cqw rgba(57, 255, 136, 0.48),
      0 0 1.05cqw rgba(57, 255, 136, 0.32),
      0 0 1.75cqw rgba(57, 255, 136, 0.14),
      inset 0 0 0.12cqw rgba(180, 255, 200, 0.28),
      0 0.12cqh 0 #043a10;
    text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.4), 0 0 0.5cqw rgba(57, 255, 136, 0.38);
  }
  50% {
    box-shadow:
      0 0 0.75cqw rgba(57, 255, 136, 0.68),
      0 0 1.45cqw rgba(57, 255, 136, 0.48),
      0 0 2.35cqw rgba(57, 255, 136, 0.24),
      inset 0 0 0.14cqw rgba(200, 255, 210, 0.36),
      0 0.12cqh 0 #043a10;
    text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.4), 0 0 0.85cqw rgba(57, 255, 136, 0.62);
  }
}

.cabinet--artwork .cabinet__add-recipe:not(:disabled):not(.is-saved) {
  animation: addRecipeGlow 2.4s ease-in-out infinite;
}

.cabinet--artwork .cabinet__add-recipe:hover:not(:disabled):not(.is-saved) {
  background: linear-gradient(180deg, #24c248 0%, #126828 100%);
}

.cabinet--artwork .cabinet__add-recipe:active:not(:disabled),
.cabinet--artwork .cabinet__add-recipe.is-saved {
  animation: none;
  background: linear-gradient(180deg, #22bb44 0%, #116622 100%);
  box-shadow: 0 0.12cqh 0 #043a10;
  text-shadow: 0 0.048cqh 0 rgba(0, 0, 0, 0.4);
}

.cabinet--artwork .cabinet__add-recipe:active:not(:disabled) {
  transform: translate(var(--ewn-recipe-offset-x), var(--ewn-recipe-offset-y)) translateY(0.121cqh);
}

.cabinet--artwork .cabinet__add-recipe:disabled {
  animation: none;
  opacity: 0.45;
  cursor: not-allowed;
  color: #b8d4be;
  text-shadow: none;
  background: linear-gradient(180deg, #2a4a32 0%, #152818 100%);
  box-shadow:
    0 0.08cqh 0 #0a1810,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ewnNotice {
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 22rem);
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(10px, 1.05cqw, 13px);
  line-height: 1.35;
  text-align: center;
  color: #ffe8a8;
  background: rgba(8, 16, 48, 0.88);
  border: 1px solid rgba(255, 214, 120, 0.35);
  pointer-events: none;
  top: calc(var(--ewn-recipe-offset-y, 0px) + 6.4cqh);
}

.cabinet--artwork .cabinet__add-recipe.is-saved {
  color: #fff;
}

.cabinet--artwork .cabinet__add-recipe__label {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.cabinet--artwork .cabinet__add-recipe.is-saved .cabinet__add-recipe__label {
  display: none;
}

.cabinet--artwork .cabinet__add-recipe.is-saved::after {
  content: "SAVED!";
}

/* Wide — flat cutout on Each Way Nduja.webp (1415×1046). */
@media (min-width: 650px) {
  .cabinet--artwork .cabinet__add-recipe {
    font-size: clamp(6px, 1.05cqw, 11px);
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .cabinet--artwork .cabinet__add-recipe__label {
    flex-direction: row;
    gap: 0.35em;
    width: auto;
    padding: 0;
  }

  .cabinet--artwork .cabinet__add-recipe.is-saved::after {
    font-size: inherit;
    line-height: inherit;
  }

  /* Android wide: slightly smaller reel fruit — more breathing room above label text. */
  html.pdc-android-native.pdcEwnPage .cabinet--artwork .cell-emoji {
    font-size: calc(clamp(3.2cqw, 5cqw, 6.4cqw) * 0.95);
  }

  /* Android wide: slightly smaller reel ✕ blank symbol. */
  html.pdc-android-native.pdcEwnPage .cabinet--artwork .reel-cell--blank .cell-blank {
    font-size: calc(clamp(5.625cqw, 8.75cqw, 11.25cqw) * 0.9);
  }

  .cabinet--artwork .diet-toggle--artwork .diet-btn {
    font-size: calc(clamp(1.68cqw, 1.92cqw, 2.2cqw) - 2pt);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet--artwork .cabinet__add-recipe:not(:disabled):not(.is-saved) {
    animation: none;
    box-shadow:
      0 0 0.55cqw rgba(57, 255, 136, 0.52),
      0 0 1.2cqw rgba(57, 255, 136, 0.34),
      0 0.12cqh 0 #043a10;
  }
}

.cabinet--artwork .spin-btn {
  position: absolute;
  left: var(--ewn-spin-center-x);
  top: var(--ewn-spin-center-y);
  right: auto;
  bottom: auto;
  width: var(--ewn-spin-size);
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  background-image: url("./assets/Buttons/Spin Popped.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transform: translate(calc(-50% + var(--ewn-spin-offset-x)), calc(-50% + var(--ewn-spin-offset-y))) scale(1);
  transition: transform 0.1s ease, filter 0.08s ease, background-image 0s;
}

.cabinet--artwork .spin-btn::before {
  display: block;
  content: "";
  position: absolute;
  /* Keep a generous tap target above/right/below; don't extend left over the diet column. */
  inset: -18% -18% -18% 22%;
  background: transparent;
}

.cabinet--artwork .spin-btn::after {
  display: none;
}

.cabinet--artwork .spin-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.cabinet--artwork .spin-btn.is-pressed,
.cabinet--artwork .spin-btn.spinning-active {
  background-image: url("./assets/Buttons/Spin Pressed.webp");
  transform: translate(calc(-50% + var(--ewn-spin-offset-x)), calc(-50% + var(--ewn-spin-offset-y))) scale(0.96);
  box-shadow: none;
  animation: none;
  filter: none;
}

.cabinet--artwork .spin-btn:disabled {
  cursor: default;
  opacity: 1;
}

@keyframes spinBtnNudge {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  50% {
    filter:
      brightness(1.2)
      drop-shadow(0 0 0.65cqw rgba(255, 230, 90, 0.85))
      drop-shadow(0 0 1.35cqw rgba(255, 70, 35, 0.55));
  }
}

.cabinet--artwork .spin-btn.spin-btn--nudge {
  animation: spinBtnNudge 1.05s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cabinet--artwork .spin-btn.spin-btn--nudge {
    animation: spinBtnNudge 2.4s ease-in-out infinite;
  }
}

@media (max-width: 660px) {
  .pdcEwnPage .section-bar .preset-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdcEwnPage .section-bar .preset-desc {
    display: none;
  }

  .pdcEwnTopPanel {
    padding: 14px 12px 0;
  }

  .pdcEwnTopPanel .selector-bar {
    margin-bottom: -14px;
  }

  .cabinet--artwork .reels-row {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Main app shell (pixelNav + dashboard header), same as Flour / Pizza Styles pages */
html.pdcEwnPage body {
  align-items: stretch;
  padding: 0;
}

html.pdcEwnPage .app {
  width: 100%;
}

.pdcEwnMain .pdcEwnShell {
  width: min(var(--pdc-ewn-content-max), 100%);
  max-width: var(--pdc-ewn-content-max);
  margin-inline: auto;
}

.pdcEwnMain .machine-wrap {
  width: 100%;
  margin-inline: auto;
}

html.pdcEwnPage .pixelNav {
  margin-bottom: 0;
}

.pdcEwnMain > .mainCard.card {
  padding-top: 6px;
  margin-top: -15px;
}

.pdcEwnMain > .mainCard > .cardBody {
  padding-top: 0;
  --pdc-ewn-content-max: 860px;
}

/* Beat `.knowledgeMain:not(.floursPage) .knowledgeCodexHead { margin: 0 0 14px }` in styles.css */
.knowledgeMain.pdcEwnMain:not(.floursPage) .knowledgeCodexHead {
  margin: 5px 0 12px;
}

.pdcEwnMain .knowledgeCodexTitle {
  margin-bottom: 0;
}

/* ── Single-screen mobile cabinet (Each Way Nduja Single.webp, 881×1659) ── */
@media (max-width: 649px) {
  /* Keep dashboard `.app` border + padding; only the cabinet art breaks out below. */
  .pdcEwnMain > .mainCard > .cardBody {
    padding-bottom: 0;
    --pdc-ewn-content-max: 100%;
  }

  .pdcEwnMain .pdcEwnShell {
    width: 100%;
    max-width: 100%;
  }

  /* Single-screen: drop page title — chips panel is self-explanatory. */
  .knowledgeMain.pdcEwnMain:not(.floursPage) .knowledgeCodexHead {
    display: none;
  }

  /* Chip selector panel — 30px deeper for touch targets and menu panels. */
  .pdcEwnTopPanel {
    padding: 14px 12px 30px;
  }

  .pdcEwnMain .machine-wrap {
    width: 95vw;
    max-width: 95vw;
    margin-left: calc(50% - 47.5vw);
    margin-right: calc(50% - 47.5vw);
    margin-top: 0;
    transform: translateY(-3px);
  }

  .cabinet--artwork {
    aspect-ratio: 881 / 1659;
    box-shadow: none;
    /*
     * LOCKED single-screen layout (Each Way Nduja Single.webp, 881×1659).
     * All overlay positions use % insets + cqw/cqh offsets only — no px nudges.
     */
    --ewn-window-top: 17.42%;
    --ewn-window-bottom: 34.06%;
    --ewn-window-left: 13.17%;
    --ewn-window-right: 13.51%;
    --ewn-spin-center-x: 50%;
    --ewn-spin-center-y: 91.5%;
    --ewn-spin-size: 26.4%;
    --ewn-spin-offset-x: -1.135cqw;
    --ewn-spin-offset-y: -0.362cqh;
    --ewn-win-top: 72%;
    --ewn-reel-style-top: 10%;
    /* LOCKED: winline overlay ↔ black window (Each Way Nduja Single.webp, 881×1659). */
    --ewn-win-left: calc(10% - 3.065cqw); /* +27px left @ 881px art width */
    --ewn-win-right: calc(10% - 3.065cqw); /* +27px right @ 881px art width */
    --ewn-win-bottom: calc(25.5% - 1.627cqh); /* +27px height @ 1659px art height */
    /* LOCKED: ingredients overlay ↔ blue window (Each Way Nduja Single.webp, 881×1659). */
    --ewn-ing-top: 74%;
    --ewn-ing-left: 10%;
    --ewn-ing-right: calc(10% - 8.853cqw); /* +78px on right @ 881px art width */
    --ewn-ing-bottom: calc(14.5% + 6.51cqh); /* -108px from bottom @ 1659px art height */
    --ewn-display-offset-x: 0;
    --ewn-display-offset-y: 0;
    --ewn-ing-offset-x: -4.428cqw; /* -39px @ 881px art width */
    --ewn-ing-offset-y: 4.038cqh; /* +55px @ 1659px art height */
    --ewn-diet-top: 67%;
    --ewn-diet-left: 3%;
    --ewn-diet-right: 46%;
    --ewn-diet-bottom: 7%;
    --ewn-diet-offset-x: -6.471cqw;
    --ewn-diet-offset-y: 11.632cqh;
    --ewn-recipe-top: 86.2%;
    --ewn-recipe-left: 66.2%;
    --ewn-recipe-right: 5.5%;
    --ewn-recipe-bottom: 2.8%;
    --ewn-recipe-offset-x: 0.568cqw; /* +5px @ 881px art width */
    --ewn-recipe-offset-y: 0;
  }

  .cabinet__bg--wide {
    display: none;
  }

  .cabinet__bg--single {
    display: block;
  }

  /*
   * Reel zone from transparent cutouts (881×1659).
   * Grid columns: 206px | 9px gap | 217px | 9px gap | 207px
   */
  .cabinet__reels {
    top: var(--ewn-window-top);
    bottom: var(--ewn-window-bottom);
    left: var(--ewn-window-left);
    right: var(--ewn-window-right);
    overflow: visible;
  }

  .cabinet--artwork .reels-surround {
    height: 100%;
    width: 100%;
    overflow: visible;
  }

  .cabinet--artwork .reels-row {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: 23.384fr 1.022fr 24.631fr 1.022fr 23.503fr;
    /* Upper row windows are ~0.96% taller on art (22.72% vs 21.76% frame height). */
    grid-template-rows: 1.06fr 1fr;
    row-gap: 8.3%;
    column-gap: 0;
    align-items: stretch;
    overflow: visible;
  }

  #reelWrap-base,
  #reelWrap-topping1,
  #reelWrap-topping2 {
    grid-row: 1;
  }

  #reelWrap-topping3,
  #reelWrap-support,
  #reelWrap-finish {
    grid-row: 2;
  }

  #reelWrap-base,
  #reelWrap-topping3 {
    grid-column: 1;
  }

  #reelWrap-topping1,
  #reelWrap-support {
    grid-column: 3;
  }

  #reelWrap-topping2,
  #reelWrap-finish {
    grid-column: 5;
  }

  .cabinet--artwork .reel-wrap {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    min-width: 0;
    pointer-events: auto;
    overflow: visible;
    background-color: var(--reel-bg);
  }

  .cabinet--artwork .reel-window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--reel-bg);
    background-image: none;
    z-index: 1;
  }

  /* Extend window slightly below wrap so cream fill covers transparent art edge. */
  #reelWrap-base .reel-window,
  #reelWrap-topping1 .reel-window,
  #reelWrap-topping2 .reel-window {
    bottom: -0.482cqh;
  }

  #reelWrap-topping3 .reel-window,
  #reelWrap-support .reel-window,
  #reelWrap-finish .reel-window {
    bottom: -0.362cqh;
  }

  .cabinet--artwork .hold-btn {
    position: absolute;
    left: 1.135cqw;
    right: 1.135cqw;
    bottom: 0.301cqh;
    width: auto;
    margin: 0;
    z-index: 3;
    min-height: 2.75cqh;
    box-sizing: border-box;
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    font-family: "Press Start 2P", ui-monospace, system-ui, sans-serif;
    font-size: clamp(7px, 2.4cqw, 11px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.35cqh 0.2cqw;
    border-width: 2px;
    border-radius: 2px;
    box-shadow:
      0 0.12cqh 0 #4a0008,
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .cabinet--artwork .reel-wrap.is-hold-ready .hold-btn {
    display: flex;
    pointer-events: auto;
  }

  #reelWrap-base .hold-btn,
  #reelWrap-topping1 .hold-btn,
  #reelWrap-topping2 .hold-btn {
    min-height: 2.9cqh;
    transform: translateY(-0.181cqh);
  }

  #reelWrap-topping3 .hold-btn,
  #reelWrap-support .hold-btn,
  #reelWrap-finish .hold-btn {
    min-height: 2.6cqh;
    transform: translateY(-0.121cqh);
  }

  .cabinet--artwork .hold-btn:hover:not(:disabled) {
    transform: translateY(-0.060cqh);
  }

  #reelWrap-base .hold-btn:hover:not(:disabled),
  #reelWrap-topping1 .hold-btn:hover:not(:disabled),
  #reelWrap-topping2 .hold-btn:hover:not(:disabled) {
    transform: translateY(-0.241cqh);
  }

  #reelWrap-topping3 .hold-btn:hover:not(:disabled),
  #reelWrap-support .hold-btn:hover:not(:disabled),
  #reelWrap-finish .hold-btn:hover:not(:disabled) {
    transform: translateY(-0.181cqh);
  }

  .cabinet--artwork .hold-btn:active:not(:disabled) {
    transform: translateY(0.060cqh);
  }

  #reelWrap-base .hold-btn:active:not(:disabled),
  #reelWrap-topping1 .hold-btn:active:not(:disabled),
  #reelWrap-topping2 .hold-btn:active:not(:disabled) {
    transform: translateY(-0.121cqh);
  }

  #reelWrap-topping3 .hold-btn:active:not(:disabled),
  #reelWrap-support .hold-btn:active:not(:disabled),
  #reelWrap-finish .hold-btn:active:not(:disabled) {
    transform: translateY(-0.060cqh);
  }

  /* Each-way NUDGE — mirror wide: bright purple chip, full opacity, row positioning. */
  .cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn,
  .cabinet--artwork .reel-wrap.is-each-way-nudging .hold-btn:disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 6;
    pointer-events: none;
    cursor: default;
    animation: nudgeBtnFlash 1.1s ease-in-out infinite;
    color: #fff;
    background: linear-gradient(180deg, #a86bff 0%, #6b28c8 100%);
    border-color: #ddb8ff;
    border-width: 2px;
    box-shadow:
      0 0.12cqh 0 #2a0848,
      0 0 0.95cqw rgba(180, 120, 255, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  }

  #reelWrap-base.is-each-way-nudging .hold-btn,
  #reelWrap-topping1.is-each-way-nudging .hold-btn,
  #reelWrap-topping2.is-each-way-nudging .hold-btn {
    min-height: 2.9cqh;
    transform: translateY(-0.181cqh);
  }

  #reelWrap-topping3.is-each-way-nudging .hold-btn,
  #reelWrap-support.is-each-way-nudging .hold-btn,
  #reelWrap-finish.is-each-way-nudging .hold-btn {
    min-height: 2.6cqh;
    transform: translateY(-0.121cqh);
  }

  .cabinet--artwork .reel-window.reel-window--each-way-nudge {
    z-index: 5;
  }

  .cabinet--artwork .reel-window .reel-strip {
    z-index: 2;
  }

  .cabinet--artwork .reel-cell {
    width: 100%;
    box-sizing: border-box;
    padding: 0 3px;
    gap: 2px;
    height: var(--reel-side-cell-h, var(--reel-cell-h, 27.778%));
    min-height: var(--reel-side-cell-h, var(--reel-cell-h, 27.778%));
  }

  .cabinet--artwork .reel-cell--winline {
    height: var(--reel-winline-cell-h, var(--reel-cell-h, 44.444%));
    min-height: var(--reel-winline-cell-h, var(--reel-cell-h, 44.444%));
  }

  .cabinet--artwork .cell-emoji {
    margin: 0;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: clamp(5.12cqw, 8cqw, 10.24cqw);
    transform: translateY(-7px);
  }

  .cabinet--artwork .cell-emoji-wrap--yellow-tomato,
  .cabinet--artwork .cell-emoji-wrap--black-pepper,
  .cabinet--artwork .cell-emoji-wrap--smoked-salmon,
  .cabinet--artwork .cell-emoji-wrap--red-onion {
    transform: translateY(-7px);
  }

  .cabinet--artwork .cell-emoji-wrap--yellow-tomato .cell-emoji,
  .cabinet--artwork .cell-emoji-wrap--black-pepper .cell-emoji,
  .cabinet--artwork .cell-emoji-wrap--smoked-salmon .cell-emoji,
  .cabinet--artwork .cell-emoji-wrap--red-onion .cell-emoji {
    transform: none;
  }

  .cabinet--artwork .cell-text {
    margin: 0;
    padding-inline: 2px;
    width: 100%;
    text-align: center;
    line-height: 1.05;
    font-size: calc(clamp(1.344cqw, 1.76cqw, 2.304cqw) + 2pt);
  }

  .cabinet--artwork .reel-cell--coin-only .cell-placeholder-pizza {
    width: clamp(8.1cqw, 11.7cqw, 14.4cqw);
    transform: translateY(-7px);
  }

  .cabinet--artwork .reel-cell--blank .cell-blank {
    transform: none;
  }

  .cabinet--artwork .reel-cell--placeholder .cell-placeholder-img {
    transform: translateY(-7px);
  }

  .cabinet--artwork .reel-window::before,
  .cabinet--artwork .reel-window::after {
    display: none;
  }

  .cabinet--artwork .diet-toggle--artwork {
    flex-direction: column;
    gap: calc(0.542cqh + 8px);
    padding: 6% 10%;
    justify-content: center;
    align-items: stretch;
    transform: translate(var(--ewn-diet-offset-x), var(--ewn-diet-offset-y));
  }

  .cabinet--artwork .diet-toggle--artwork .diet-btn {
    flex: 0 0 auto;
    justify-content: flex-start;
    font-size: calc(clamp(9px, 3.33cqw, 16px) - 3pt);
    line-height: 1.2;
    padding: 0 0.454cqw;
    touch-action: manipulation;
    /* Larger tap row without shifting label position on the artwork. */
    position: relative;
  }

  .cabinet--artwork .diet-toggle--artwork .diet-btn::after {
    display: block;
    content: "";
    position: absolute;
    left: -6%;
    right: -28%;
    top: -0.45cqh;
    bottom: -0.45cqh;
    background: transparent;
  }

  .cabinet--artwork .spin-btn {
    transform: translate(calc(-50% + var(--ewn-spin-offset-x)), calc(-50% + var(--ewn-spin-offset-y))) scale(1);
  }

  .cabinet--artwork .spin-btn.is-pressed,
  .cabinet--artwork .spin-btn.spinning-active {
    transform: translate(calc(-50% + var(--ewn-spin-offset-x)), calc(-50% + var(--ewn-spin-offset-y))) scale(0.96);
  }

  .cabinet--artwork .cabinet__winline {
    transform: translate(var(--ewn-display-offset-x), var(--ewn-display-offset-y));
  }

  .cabinet--artwork .cabinet__style-confetti__piece {
    width: var(--size, 10px);
    height: var(--size, 10px);
    margin: calc(var(--size, 10px) / -2) 0 0 calc(var(--size, 10px) / -2);
  }

  .cabinet--artwork .cabinet__style-confetti__piece.is-rect {
    width: calc(var(--size, 10px) * 0.42);
    height: calc(var(--size, 10px) * 1.35);
    margin:
      calc(var(--size, 10px) * 1.35 / -2) 0
      0 calc(var(--size, 10px) * 0.42 / -2);
  }

  .cabinet--artwork .cabinet__style-reveal__hint {
    font-size: 0.58em;
  }

  .cabinet--artwork .cabinet__style-reveal__label {
    font-size: clamp(12px, 4.1cqw, 20px);
    line-height: 1.25;
  }

  .cabinet--artwork .cabinet__ingredients {
    transform: translate(var(--ewn-ing-offset-x), var(--ewn-ing-offset-y));
  }

  .cabinet--artwork .cabinet__add-recipe {
    font-size: clamp(9px, 3.25cqw, 17px);
    white-space: normal;
    text-wrap: balance;
  }

  .cabinet--artwork .cabinet__add-recipe__label {
    flex-direction: column;
    gap: 0.301cqh;
    width: 100%;
    padding: 0 4%;
  }

  .cabinet--artwork .cabinet__add-recipe.is-saved::after {
    font-size: clamp(11px, 3.45cqw, 18px);
    line-height: 1.05;
  }

  .cabinet--artwork .cabinet__winline {
    font-size: calc(clamp(8px, 2.5cqw, 12px) + 2pt);
    line-height: 1.25;
  }

  .cabinet--artwork .cabinet__ingredients {
    font-size: clamp(6px, 2.2cqw, 10px);
    line-height: 1.35;
  }
}