/* Theme tokens are intentionally scoped to the document body. The classic
   artwork stays intact; theme changes recolor the surrounding arcade cabinet. */
body {
  --bg: #05140e;
  --panel: #0b2419;
  --panel-2: #123321;
  --line: #5a7740;
  --violet: #ffda55;
  --cyan: #69fa94;
  --gold: #ffda55;
  --pink: #ffe4a0;
  --cream: #fff8df;
  --muted: #b6cfb5;
  --theme-accent: #ffe373;
  --theme-secondary: #70ff9a;
  --theme-border: rgba(223, 194, 81, .52);
  --theme-rule: rgba(146, 187, 104, .33);
  --theme-surface: rgba(5, 25, 15, .77);
  --theme-surface-2: rgba(10, 40, 24, .86);
  --theme-shadow: rgba(1, 13, 6, .75);
  --theme-halo: rgba(169, 193, 60, .10);
  --theme-scene-shade: rgba(2, 15, 8, .30);
  --theme-light-a: #e8bd35;
  --theme-light-b: #42f583;
  --theme-light-c: #f1e07a;
  --theme-background: url('assets/themes/gold-saucer-airship-wallpaper.png');
  --display: 'LastCallM5', 'Courier New', monospace;
  --mono: 'LastCallM5', 'Courier New', monospace;
  --ui: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  color: var(--cream);
  /* Scene transformations live on .nightscape, separate from the UI. */
  background: var(--bg);
  isolation: isolate;
}
body[data-theme='goth'] {
  --bg: #0b0c14;
  --panel: #191622;
  --panel-2: #282032;
  --line: #7e6c8d;
  --violet: #b9a0d5;
  --cyan: #ddcfec;
  --gold: #e7d6a4;
  --pink: #d5b7d3;
  --cream: #f1eaf4;
  --muted: #bdb0ca;
  --theme-accent: #e8d9b2;
  --theme-secondary: #c0aadf;
  --theme-border: rgba(168, 138, 189, .55);
  --theme-rule: rgba(142, 122, 162, .38);
  --theme-surface: rgba(14, 12, 23, .77);
  --theme-surface-2: rgba(35, 22, 43, .88);
  --theme-shadow: rgba(3, 2, 9, .78);
  --theme-halo: rgba(173, 132, 191, .10);
  --theme-scene-shade: rgba(7, 8, 20, .17);
  --theme-light-a: #9c74ad;
  --theme-light-b: #748ab7;
  --theme-light-c: #d5ad76;
  --theme-background: url('assets/themes/goth-obsidian-lounge-v2.png');
}
body[data-theme='aero'] {
  --bg: #072c3d;
  --panel: #093e4c;
  --panel-2: #0b5060;
  --line: #55bbc5;
  --violet: #9cf2d5;
  --cyan: #7eecff;
  --gold: #e2ffba;
  --pink: #c2f5e9;
  --cream: #edffff;
  --muted: #b8dfe7;
  --theme-accent: #dcfbff;
  --theme-secondary: #81ecff;
  --theme-border: rgba(196, 249, 255, .82);
  --theme-rule: rgba(171, 234, 255, .45);
  --theme-surface: rgba(5, 48, 76, .58);
  --theme-surface-2: rgba(28, 105, 139, .64);
  --theme-shadow: rgba(1, 25, 40, .72);
  --theme-halo: rgba(122, 245, 239, .10);
  --theme-scene-shade: rgba(0, 42, 65, .10);
  --theme-light-a: #47ecff;
  --theme-light-b: #72fac7;
  --theme-light-c: #b5f0ff;
  --theme-background: url('assets/themes/aero-glass-islands-pixel-v3.png');
}
body[data-font='arcade'] {
  --display: 'Courier New', Courier, monospace;
  --mono: 'Courier New', Courier, monospace;
  --ui: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}
body[data-font='readable'] {
  --display: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
  --mono: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
  --ui: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
}
body .nightscape {
  z-index: -2;
  background: linear-gradient(var(--theme-scene-shade), var(--theme-scene-shade)), var(--venue-background-image, var(--theme-background)) var(--venue-background-position, center center) / cover no-repeat;
  transform: var(--venue-background-transform, none);
  transform-origin: center;
  image-rendering: pixelated;
}
body .nightscape:after { background: radial-gradient(ellipse at 50% 35%, transparent 24%, rgba(0, 6, 9, .38)); }
/* Keep the approved reef's whale shark within the narrow-screen crop. */
@media(max-width:520px){body[data-theme='aero'] .nightscape{background-position:var(--venue-background-position,left center)}}
body:before { z-index: -1; background: linear-gradient(110deg, var(--theme-halo), transparent 50%, var(--theme-halo)); }
body .bokeh { display: none; }
body .site-shell { z-index: 1; }
body .site-header { border-color: var(--theme-rule); }
body .wordmark-centered:before { background: radial-gradient(ellipse at center, var(--theme-halo), transparent 70%); }
body .wordmark-centered:after { background: linear-gradient(90deg, transparent, var(--theme-accent), transparent); box-shadow: none; }
body .wordmark-centered strong,
body .hero h1,
body .metallic-title {
  font-family: var(--display);
  font-weight: 900;
  color: #f6d46b;
  background: linear-gradient(180deg, #fff7ce 0%, #e1b746 19%, #fff3b3 33%, #947025 45%, #e8bc4c 49%, #fff1b5 60%, #c9992e 76%, #ffe89c 93%, #93641f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #453512) drop-shadow(0 0 12px rgba(243, 208, 86, .16));
  text-shadow: none;
}
body .hero h1 { font-size: clamp(56px, 7.2vw, 100px); line-height: .95; letter-spacing: .08em; padding: 3px 8px 10px; }
body .hero { padding: 15px 8px 10px; }
body .game-machine {
  border-color: var(--theme-border);
  background: linear-gradient(135deg, var(--theme-surface-2), var(--theme-surface) 55%);
  box-shadow: 0 18px 50px var(--theme-shadow), 0 0 0 3px rgba(0, 7, 5, .25), inset 0 1px rgba(255, 245, 195, .14);
}
body .game-machine:before { border-color: var(--theme-rule); }
body :is(.machine-topline, .machine-footline) { border-color: var(--theme-rule); background: var(--theme-surface-2); color: var(--theme-accent); }
body .machine-live { color: var(--theme-secondary); }
body .machine-topline span:last-child { color: var(--theme-accent); }
body .side-pane { background: linear-gradient(180deg, var(--theme-surface), transparent); }
body :is(.left-pane, .right-pane, .left-deck, .drink-info-block, .panel-actions) { border-color: var(--theme-rule); }
body .drink-stage { background: radial-gradient(ellipse at 50% 48%, var(--theme-halo), transparent 68%); }
body .drink-stage:after { opacity: .12; }
body .drink-stage .stage-halo { background: radial-gradient(circle, var(--theme-halo), transparent 72%); box-shadow: inset 0 0 0 1px var(--theme-rule); }
body .drink-stage .stage-arc { border-color: var(--theme-rule); }
body .drink-stage .spark,
body .drink-stage.celebrating .spark { color: var(--theme-accent); text-shadow: none; animation: none; opacity: .18; }
/* Result text and game transitions carry the feedback. Decorative victory
   pixels remain still rather than repeatedly bursting or flashing. */
body .drink-stage.victory-active :is(.victory-star, .firework) { animation: none; opacity: .3; transform: scale(.8); color: var(--theme-accent); background: currentColor; }
body .drink-stage.victory-active .victory-star { box-shadow: 0 -6px currentColor, 0 6px currentColor, 6px 0 currentColor, -6px 0 currentColor; }
body .drink-stage.victory-active .firework { box-shadow: 0 -12px currentColor, 0 12px currentColor, 12px 0 currentColor, -12px 0 currentColor; }
body :is(.eyebrow, .side-pane .eyebrow, .left-pane .eyebrow:first-child, .right-progress .eyebrow, .deck-heading span, .queue-label, .stat-tile span, .lucky-number-label) { color: var(--theme-accent); }
body :is(.left-pane h2, .deck-heading strong, .left-pane .jackpot-value, .lucky-number-value, .amount-win-card #completionReward) { color: var(--theme-accent); text-shadow: none; }
body :is(.left-pane .side-copy, .queue-copy, .left-pane .queue-copy, .stage-description, .stage-label, .drink-stage .stage-label, .stage-bottom>span:first-child, .progress-label span, .jackpot-status) { color: var(--cream); }
body :is(.queue-slot, .stat-tile, .right-progress, .lucky-number-card, .left-pane .amount-win-card) { background: var(--theme-surface-2); border-color: var(--theme-rule); box-shadow: inset 0 1px rgba(255,255,255,.05); }
body :is(.stat-tile strong, .progress-label strong) { color: var(--cream); }
body .progress-track { background: var(--theme-shadow); border-color: var(--theme-border); }
body .progress-track>div { background: linear-gradient(90deg, var(--theme-secondary), var(--theme-accent)); box-shadow: 0 0 8px var(--theme-halo); }
body .top-button,
body .manager-login-link,
body .close-icon {
  color: var(--cream);
  background: var(--theme-surface-2);
  border-color: var(--theme-border);
}
body :is(.top-button:hover, .manager-login-link:hover, .close-icon:hover) { color: var(--cream); background: var(--panel-2); border-color: var(--theme-accent); }
body :is(.manager-login-link span, .top-button span:first-child) { color: var(--theme-secondary); }
body .button-drink,
body .button-next {
  color: #14250d;
  background: linear-gradient(180deg, #fff5bf, #edc94e 54%, #b9962f);
  border-color: #ffe99a;
  box-shadow: inset 0 2px rgba(255,255,220,.66), 0 4px 0 #5c5121, 0 0 18px rgba(242,211,90,.12);
}
body .button-next { background: linear-gradient(180deg, #bdffd0, #69dc8a 54%, #429d62); border-color: #baffd1; box-shadow: inset 0 2px #e0ffe2, 0 4px 0 #225433; }
body .roll-machine { filter: drop-shadow(0 0 10px var(--theme-halo)); }
body .roll-machine-reels { border-color: var(--theme-border); background: var(--theme-surface-2); box-shadow: inset 0 1px rgba(255,255,255,.08); }
body .roll-digit { border-color: var(--theme-rule); background: linear-gradient(180deg, var(--panel-2), var(--bg) 56%, var(--panel)); color: var(--cream); text-shadow: none; }
body .roll-machine.is-final .roll-digit { color: var(--theme-accent); border-color: var(--theme-accent); text-shadow: none; }
body .roll-caption { color: var(--muted); }
body .help-toast { background: var(--panel); border-color: var(--theme-border); box-shadow: 0 16px 58px var(--theme-shadow); }
body :is(.help-toast p, .help-toast li) { color: var(--cream); }
body .help-head h2 { color: var(--theme-accent); }
body .help-disclaimer { background: var(--theme-surface-2); color: var(--muted)!important; border-color: var(--theme-secondary); }
body .feedback-toast { background: var(--panel); border-color: var(--theme-border); color: var(--cream); }
/* Several older release rules named the local font directly. These explicit
   display surfaces keep manager font selection consistent across the cabinet. */
body[data-font] :is(.hero h1, .wordmark-centered strong, .left-pane h2, .eyebrow, .deck-heading strong, .deck-heading span, .queue-label, .queue-copy, .jackpot-value, .lucky-number-label, .lucky-number-value, .jackpot-status, .house-value, .progress-label strong, .progress-label span, .stat-tile span, .stat-tile strong, .stat-tile small, .stage-label, .stage-label strong, .stage-bottom>span:first-child, .roll-caption, .roll-digit, .machine-topline, .machine-footline, .top-button, .button-drink, .button-next, .manager-login-link, .help-head h2) { font-family: var(--display); }
body[data-font='readable'] :is(.eyebrow, .queue-label, .lucky-number-label, .stat-tile span, .stage-label, .drink-stage .stage-label, .machine-topline) { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
body[data-font='readable'] :is(.queue-copy, .deck-heading span, .progress-label span, .stage-bottom>span:first-child, .machine-footline, .roll-caption) { font-size: 11px; line-height: 1.45; }
body[data-font='readable'] .left-pane .drink-info-block h2 { font-size: 23px; line-height: 1.15; }
body[data-font='readable'] :is(.top-button, .manager-login-link) { font-size: 11px; }
body[data-font='readable'] .drink-stage .drink-controls :is(.button-drink, .button-next) { font-size: 19px; }
body[data-font='arcade'] :is(.eyebrow, .queue-label, .lucky-number-label, .stat-tile span, .stage-label, .drink-stage .stage-label, .machine-topline) { font-size: 13px; }
body[data-font='arcade'] :is(.queue-copy, .deck-heading span, .progress-label span, .stage-bottom>span:first-child, .machine-footline, .roll-caption) { font-size: 12px; }
body[data-font='arcade'] .left-pane .drink-info-block h2 { font-size: 24px; }
body[data-font='arcade'] :is(.top-button, .manager-login-link) { font-size: 12px; }
body[data-font='arcade'] .drink-stage .drink-controls :is(.button-drink, .button-next) { font-size: 21px; }

/* Broad, low-contrast color washes drift and breathe over 28–48 seconds.
   Their opacity never exceeds .065 and never drops sharply to black. This is
   decorative ambience, not a photosensitivity safety guarantee. */
.ambient-lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient-lights>span { position: absolute; width: min(620px,70vw); height: min(620px,70vw); border-radius: 50%; opacity: .04; filter: blur(50px); background: radial-gradient(ellipse, var(--theme-light-a), transparent 68%); animation: ambientLightDrift 36s ease-in-out infinite alternate; will-change: transform, opacity; }
.ambient-lights>span:nth-child(1) { left: -22%; top: 6%; }
.ambient-lights>span:nth-child(2) { right: -20%; top: 18%; background: radial-gradient(ellipse, var(--theme-light-b), transparent 68%); animation-duration: 48s; animation-delay: -16s; }
.ambient-lights>span:nth-child(3) { left: 40%; bottom: -30%; background: radial-gradient(ellipse, var(--theme-light-c), transparent 68%); animation-duration: 28s; animation-delay: -8s; }
@keyframes ambientLightDrift {
  0% { transform: translate(-4vw, -3vh) scale(.9); opacity: .025; }
  45% { opacity: .065; }
  100% { transform: translate(11vw, 8vh) scale(1.1); opacity: .035; }
}
.drink-stage>.ambient-particles { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; contain: paint; }
.ambient-particle { position: absolute; bottom: -42px; left: var(--particle-x); width: var(--particle-size); height: var(--particle-size); border: 1px solid color-mix(in srgb, var(--theme-accent) 68%, transparent); border-radius: 50%; opacity: 0; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cream) 25%, transparent), transparent 62%); box-shadow: inset 1px 1px color-mix(in srgb, var(--theme-accent) 20%, transparent); animation: ambientRise var(--particle-duration) linear var(--particle-delay) infinite; }
@keyframes ambientRise {
  0% { transform: translate(-50%,0) scale(.6); opacity: 0; }
  10% { opacity: .32; }
  40% { opacity: .19; }
  75% { opacity: .065; }
  96% { opacity: .006; }
  100% { transform: translate(calc(-50% + var(--particle-drift)),calc(-1 * var(--ambient-rise-distance, 564px))) scale(1.05); opacity: 0; }
}
body[data-theme='goth'] .ambient-particle { width: 27px; height: 17px; border: 0; border-radius: 0; background: url('assets/themes/bat-pixel.svg') center/contain no-repeat; box-shadow: none; image-rendering: pixelated; animation-name: ambientCreatureRise; }
body[data-theme='aero'] .ambient-particle { width: 49px; height: 25px; border: 0; border-radius: 0; background: url('assets/themes/whaleshark-pixel.svg') center/contain no-repeat; box-shadow: none; image-rendering: pixelated; animation-name: ambientCreatureRise; }
/* A licensed venue sprite uses the same bounded, slow emitter and comfort rules. */
body[data-custom-ambient='on'] .ambient-particle { width: 30px; height: 30px; border: 0; border-radius: 0; background: var(--venue-ambient-image) center/contain no-repeat; box-shadow: none; image-rendering: pixelated; animation-name: ambientCreatureRise; }
@keyframes ambientCreatureRise {
  0% { transform: translate(-50%,0) scale(var(--particle-scale)); opacity: 0; }
  10% { opacity: .33; }
  40% { opacity: .21; }
  75% { opacity: .08; }
  96% { opacity: .006; }
  100% { transform: translate(calc(-50% + var(--particle-drift)),calc(-1 * var(--ambient-rise-distance, 564px))) scale(var(--particle-scale)); opacity: 0; }
}
body[data-ambient-motion='off'] .ambient-lights>span { animation: none; opacity: .025; will-change: auto; }
body[data-ambient-motion='off'] .ambient-particle { animation: none; opacity: 0; }
body[data-ambient-motion='off'] .queue-slot img,
body[data-ambient-motion='off'] .glass-float-anchor { animation: none!important; }
@media(max-width:520px) { body .hero h1 { font-size: clamp(48px,14vw,74px); } .ambient-particle:nth-child(n+11) { display: none; } }
@media(prefers-reduced-motion:reduce) {
  .ambient-lights>span { animation: none!important; opacity: .025!important; will-change: auto; }
  .ambient-particle { animation: none!important; opacity: 0!important; }
}

/* Aero glass: hard pixel edges and cool translucent reflective surfaces. */
body[data-theme='aero'] .game-machine {
 border-radius:4px;
 background:linear-gradient(135deg,rgba(212,251,255,.22),transparent 28%),linear-gradient(180deg,var(--theme-surface-2),var(--theme-surface));
 box-shadow:inset 0 2px rgba(238,255,255,.65),inset 2px 0 rgba(211,250,255,.3),inset 0 -2px rgba(20,81,119,.55),0 12px 36px rgba(0,36,70,.4);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
body[data-theme='aero'] :is(.queue-slot,.stat-tile,.right-progress,.lucky-number-card,.amount-win-card,.top-button,.panel-actions button){
 border-radius:2px;
 background:linear-gradient(180deg,rgba(210,250,255,.23),rgba(106,206,239,.11) 48%,rgba(8,63,96,.56) 50%,rgba(19,93,126,.64));
 box-shadow:inset 0 1px rgba(240,255,255,.6),inset 1px 0 rgba(209,251,255,.25),0 2px 0 rgba(0,40,69,.45);
}
body[data-theme='aero'] :is(.wordmark-centered strong,.hero h1,.metallic-title){
 background:linear-gradient(180deg,#fff 0%,#c7f7ff 32%,#72cce9 46%,#e8ffff 51%,#87daef 80%,#f4ffff 100%);
 -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #125679);
}
body[data-theme='aero'][data-ambient-motion='off'],body[data-theme='aero'][data-player-motion='off']{--theme-background:url('assets/themes/aero-glass-islands-pixel-v3.png');}
@media(prefers-reduced-motion:reduce){body[data-theme='aero']{--theme-background:url('assets/themes/aero-glass-islands-pixel-v3.png');}}

/* Keep the scene above the document paint and below all page content. */
body[data-theme='aero'] .nightscape{z-index:0;pointer-events:none;}
body[data-theme='aero']:before{z-index:0;pointer-events:none;}
body[data-theme='aero'] .site-shell{position:relative;z-index:1;}
body[data-theme='aero']{--theme-surface:rgba(5,48,76,.38);--theme-surface-2:rgba(28,105,139,.48);}
body[data-theme='aero'] .game-machine{backdrop-filter:none;-webkit-backdrop-filter:none;}
/* The inner typography span owns the lettering; its parent must not paint text again. */
body[data-theme='aero'] .hero .metallic-title{background:none;filter:drop-shadow(0 2px 0 #125679);}
body[data-theme='aero'] .metallic-title>[data-title-text]{
 background:linear-gradient(180deg,#fff 0%,#c7f7ff 32%,#72cce9 46%,#e8ffff 51%,#87daef 80%,#f4ffff 100%);
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* A compact glass nameplate behind the Aero lettering. */
body[data-theme='aero'] .hero .metallic-title{
 display:table;max-width:100%;margin:0 auto;padding:5px 18px 9px;
 border:2px solid rgba(198,247,255,.65);border-radius:3px;
 background:linear-gradient(180deg,rgba(174,235,255,.24),rgba(5,50,82,.68) 52%,rgba(9,69,102,.76));
 box-shadow:inset 0 2px rgba(242,255,255,.45),0 3px 0 rgba(0,37,65,.5);
 backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}

/* Original quiet pixel bubbles, fish and glints; Aero only, behind the interface. */
body[data-theme='aero'] .nightscape:before{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:url('assets/themes/aero-pixel-accents-v1.webp') center/384px 384px repeat;
 image-rendering:pixelated;opacity:.7;
}
body[data-theme='aero'][data-ambient-motion='off'] .nightscape:before,
body[data-theme='aero'][data-player-motion='off'] .nightscape:before{background-image:url('assets/themes/aero-pixel-accents-still-v1.png');opacity:.35;}
@media(prefers-reduced-motion:reduce){body[data-theme='aero'] .nightscape:before{background-image:url('assets/themes/aero-pixel-accents-still-v1.png');opacity:.35;}}

body[data-theme='saucer']{--bg:#180e22;--panel:#28152d;--panel-2:#45223a;--line:#96703d;--cyan:#ffdc89;--gold:#ffda77;--cream:#fff1d5;--muted:#d6bd9e;--theme-accent:#ffe299;--theme-secondary:#e9b861;--theme-border:rgba(238,188,91,.65);--theme-rule:rgba(225,168,76,.3);--theme-surface:rgba(30,13,33,.86);--theme-surface-2:rgba(56,25,43,.89);--theme-shadow:rgba(12,5,17,.8);--theme-halo:rgba(246,183,62,.08);--theme-scene-shade:rgba(18,5,27,.13);--theme-background:url('assets/themes/gold-saucer-airship-wallpaper.png')}
body[data-theme='saucer'] .hero{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;background:rgba(26,10,30,.82);border:1px solid #bd8b43;box-shadow:0 3px 0 #3f2136,inset 0 0 0 3px rgba(255,220,129,.07)}
body[data-theme='saucer'] .metallic-title [data-title-text]{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap}
.moogle-title-mark{display:inline-block;flex:none;width:.72em;height:.78em;background:url('assets/themes/moogle-friend-v1.png') center 30%/contain no-repeat;image-rendering:pixelated;-webkit-text-fill-color:initial;filter:drop-shadow(0 2px 0 #341126)}
body[data-theme='saucer'] :is(.ambient-site-glints i,.ambient-particle){border:0;border-radius:0;background:#ffe5a0;box-shadow:none;clip-path:polygon(40% 0,60% 0,60% 30%,70% 40%,100% 40%,100% 60%,70% 60%,60% 70%,60% 100%,40% 100%,40% 70%,30% 60%,0 60%,0 40%,30% 40%,40% 30%);width:8px;height:8px;opacity:.6;animation:saucerTwinkle 4s steps(4,end) var(--delay,var(--particle-delay,0s)) infinite}
body[data-theme='saucer'] .ambient-particle{bottom:calc(15% + var(--particle-size)*10)}
body[data-theme='saucer'] .ambient-site-glints i{top:calc(15% + var(--size)*4);left:var(--x)}
@keyframes saucerTwinkle{0%,100%{opacity:.12;transform:scale(.5)}50%{opacity:.85;transform:scale(1)}}
/* The coin uses the established coaster box and center; only its plane changes. */
body[data-theme='saucer'] .glass-button .coaster-wrap img{transform:translateY(var(--coaster-shift-y)) scale(var(--coaster-scale)) scaleY(.58);transform-origin:50% 76%;filter:drop-shadow(0 8px 0 #6b3910) drop-shadow(0 10px 7px #100817)}
.saucer-moogles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none}
body[data-theme='saucer'] .saucer-moogles{display:block}
.saucer-moogle{position:absolute;width:92px;height:112px;left:3%;bottom:19%;background:url('assets/themes/moogle-friend-v1.png') center/contain no-repeat;image-rendering:pixelated;animation:moogleBob 3.6s steps(8,end) infinite;filter:drop-shadow(0 8px 0 rgba(25,8,28,.3))}
.saucer-moogle:nth-child(2){left:auto;right:3%;bottom:30%;width:75px;height:92px;animation-delay:-1.4s;transform:scaleX(-1)}
.saucer-moogle:nth-child(3){left:11%;bottom:54%;width:46px;height:60px;animation-delay:-2.3s}
@keyframes moogleBob{0%,100%{translate:0 0}50%{translate:0 -9px}}
body[data-ambient-motion='off'] :is(.saucer-moogle,.ambient-site-glints i){animation:none!important}
@media(prefers-reduced-motion:reduce){.saucer-moogle,body[data-theme='saucer'] .ambient-site-glints i{animation:none!important}}
@media(max-width:700px){.saucer-moogle{opacity:.5;width:48px;height:64px}.saucer-moogle:nth-child(2){width:48px;height:64px}.saucer-moogle:nth-child(3){display:none}}

body[data-theme="saucer"] .saucer-moogle{bottom:48%}body[data-theme="saucer"] .saucer-moogle:nth-child(2){bottom:62%}body[data-theme="saucer"] .saucer-moogle:nth-child(3){bottom:76%}
.moogle-title-mark{background-size:165% auto;background-position:50% 48%;clip-path:inset(0 0 0 0)}

body:not([data-theme='saucer']) .moogle-title-mark{display:none}

body .drink-stage .glass-button[data-geometry='seated'] .coaster-wrap img{transform:scaleY(.68);transform-origin:50% 47.142857%;filter:drop-shadow(0 6px 0 #774113) drop-shadow(0 9px 5px #10081799)}
/* Shared stat labels must fit equally across all venue themes. */
body .right-pane .stat-tile span{display:block;font-size:14px;line-height:1.15;letter-spacing:0;overflow-wrap:normal}
/* Pixel-step ascent with a broken, dithered fade instead of stationary twinkling. */
body[data-theme='saucer'] .ambient-site-glints i{top:auto;bottom:-20px;animation:saucerSparkleRise var(--duration,20s) steps(60,end) var(--delay,0s) infinite}
body[data-theme='saucer'] .ambient-particle{bottom:-20px;animation:saucerSparkleRise var(--particle-duration,22s) steps(60,end) var(--particle-delay,0s) infinite}
@keyframes saucerSparkleRise{
 0%{opacity:0;transform:translate(0,0) scale(.5)}
 12%{opacity:.65;transform:translate(2px,calc(var(--ambient-rise-distance,90vh)*-.12)) scale(1)}
 50%{opacity:.55;transform:translate(-3px,calc(var(--ambient-rise-distance,90vh)*-.5)) scale(.8)}
 68%{opacity:.45;transform:translate(2px,calc(var(--ambient-rise-distance,90vh)*-.68)) scale(.7)}
 73%{opacity:.12}76%{opacity:.35}79%{opacity:.08}82%{opacity:.22}
 88%,100%{opacity:0;transform:translate(4px,calc(var(--ambient-rise-distance,90vh)*-1)) scale(.25)}
}
body[data-theme='saucer'][data-ambient-motion='off'] :is(.ambient-particle,.ambient-site-glints i){animation:none!important;opacity:.15}
@media(prefers-reduced-motion:reduce){body[data-theme='saucer'] :is(.ambient-particle,.ambient-site-glints i){animation:none!important;opacity:.15}}

body[data-theme='saucer'] .nightscape{image-rendering:auto}
/* Sparkling sparkle/bubble atmosphere lives behind the playable drink scene. */
body[data-theme='saucer'] .drink-stage>.ambient-particles{z-index:0}
body[data-theme='saucer'] .drink-stage>.ambient-particles .ambient-particle{left:calc(7% + var(--saucer-lane,0)*5%);width:6px;height:6px;animation:saucerInteriorRise var(--particle-duration,22s) linear var(--particle-delay,0s) infinite}
body[data-theme='saucer'] .ambient-particle:nth-child(3n){clip-path:none;border-radius:50%;background:transparent;border:1px solid #ffe5a077;box-shadow:inset 1px 1px #fff3c522;width:9px;height:9px}
body[data-theme='saucer'] .drink-stage .glass-button{z-index:2}
body[data-theme='saucer'] .drink-stage .drink-controls{position:relative;z-index:3}
@keyframes saucerInteriorRise{0%{opacity:0;transform:translate(0,0) scale(.65)}12%{opacity:.55}45%{opacity:.42}70%{opacity:.22}90%,100%{opacity:0;transform:translate(var(--particle-drift,6px),calc(-1 * var(--ambient-rise-distance,650px))) scale(.4)}}
body[data-theme='saucer'][data-ambient-motion='off'] .drink-stage .ambient-particle{animation:none!important;opacity:.08}
@media(prefers-reduced-motion:reduce){body[data-theme='saucer'] .drink-stage .ambient-particle{animation:none!important;opacity:.08}}

/* Varied sparkling glints, with continuous ascent and individual twinkle rhythms. */
body[data-theme='saucer'] .drink-stage .ambient-particle{
 width:var(--glint-size,7px);height:var(--glint-size,7px);
 animation:saucerInteriorRise var(--saucer-duration,22s) linear var(--saucer-delay,0s) infinite,saucerGlint var(--glint-duration,3s) ease-in-out var(--particle-delay,0s) infinite;
 filter:drop-shadow(0 0 2px #ffe6a866);
}
@keyframes saucerGlint{0%,100%{filter:brightness(.8) drop-shadow(0 0 1px #ffe6a844)}35%{filter:brightness(1.5) drop-shadow(0 0 4px #ffe6a8aa)}65%{filter:brightness(1) drop-shadow(0 0 2px #ffe6a866)}}

/* A quiet pool of stage light gives the larger drink a focal point without moving the layout. */
body[data-theme='saucer'] .drink-stage{
 background:radial-gradient(ellipse 230px 290px at 50% 44%,#f6c25d18 0%,#c98a3f09 48%,transparent 83%),radial-gradient(ellipse 235px 72px at 50% 55%,#f3c96b0d,transparent 78%);
}

/* User-supplied 23x30 sprite: integer 2x pixels on desktop, native pixels on mobile.
   Keep the existing title mark box and surrounding artwork unchanged. */
body[data-theme='saucer'] .moogle-title-mark{background:none;filter:none;display:inline-flex;align-items:center;justify-content:center;overflow:visible}
body[data-theme='saucer'] .moogle-title-mark::before{content:"";display:block;flex:none;width:46px;height:60px;background:url('assets/decor/gamba-shots-title-beer.png') center/46px 60px no-repeat;image-rendering:pixelated}
@media(max-width:700px){body[data-theme='saucer'] .moogle-title-mark::before{width:23px;height:30px;background-size:23px 30px}}