*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#142b26;font-family:'Avenir Next',Arial,sans-serif;touch-action:manipulation}body{color:#f7e6be}#game{position:relative;width:100%;height:100%;background:linear-gradient(#112b2522,#142b2555),url('./assets/apartment-v1/base.webp') center/cover no-repeat}.banana-scene{position:relative;isolation:isolate;container-type:inline-size}.reel-frame{position:absolute;left:0;top:10%;width:65%;height:82%;padding:12px 12px 28px;border-radius:13px;background:#263a31;border:3px solid #161d19;box-shadow:0 0 0 3px #c5a35b,0 0 0 8px #20251c,0 15px 28px #0006,inset 0 0 0 2px #6b7553;z-index:2}.reels{height:100%;position:relative;overflow:hidden;border-radius:4px;background:#151f19;border:2px solid #111b17}.symbol{position:absolute;width:16.666667%;height:20%;padding:3px;will-change:transform}.symbol:after{position:absolute;inset:3px;border:1px solid #332a1b44;border-radius:6px;pointer-events:none;content:''}.symbol-art{position:absolute;inset:3px;border-radius:6px;background:none;box-shadow:inset 0 0 10px #46321b33}.symbol.winning:after{border:3px solid #f4ca48;box-shadow:inset 0 0 14px #f1c43d55,0 0 10px #edcc6466}.scatter-label{position:absolute;left:5px;right:5px;bottom:6px;text-align:center;border-radius:3px;color:#fff0c8;background:#ab4434;font:bold clamp(8px,1.6cqw,18px)/1.5 'Arial Black',Arial;letter-spacing:.4px;box-shadow:0 2px #452319}.wild-art{position:absolute;inset:3px;background:radial-gradient(ellipse at 30% 10%,#ffe07b,#d9a635);border-radius:6px;border:3px solid #1d2620;color:#20261f;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #f5d888;overflow:hidden}.wild-art:before{content:'';position:absolute;inset:8px;border:1px dashed #73572277;border-radius:50%;transform:rotate(-15deg)}.wild-art small{font:900 clamp(9px,1.7cqw,19px) 'Arial Black',Arial;letter-spacing:2px;z-index:1}.wild-art strong{font:900 clamp(10px,calc(12cqw / var(--chars,3)),38px) Georgia;line-height:1.3;z-index:1;max-width:100%;overflow-wrap:anywhere}.wild-art i{font-size:14px;line-height:1}.board-foot{position:absolute;bottom:5px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:clamp(6px,.85cqw,10px);letter-spacing:1.2px;color:#b9b994}.hitman{position:absolute;left:53%;top:1%;width:60%;height:auto;z-index:3;pointer-events:none}.tracers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}.bullet-trail{fill:none;stroke:#fff5c0;stroke-width:3;filter:drop-shadow(0 0 4px #ffc62f)}.bullet-trail.rocket-trail{stroke:#ffd27a;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff9a2e) drop-shadow(0 0 14px #ffcf5a)}.callout{position:absolute;left:0;width:65%;top:42%;z-index:6;text-align:center;pointer-events:none;font:900 clamp(14px,3cqw,35px) 'Arial Black',Arial;color:#fff5c9;-webkit-text-stroke:1px #303326;paint-order:stroke fill;text-shadow:0 3px #332617}.banana-hud{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;color:#ecd89e;letter-spacing:1.4px}.journal-open{min-height:32px;background:transparent;border:0;border-bottom:1px solid #bca367;color:#e9d59f;font:inherit;cursor:pointer;letter-spacing:0}.award-window{width:100%;height:230px;border:1px solid #9f8b5666;border-radius:4px;padding:14px 12px;background:#152d28d9;color:#e7d6a9;display:flex;flex-direction:column;box-shadow:0 6px 18px #0003}.eyebrow{font-size:8px;letter-spacing:2px;color:#acb29a}.award-window h2{font-size:11px;letter-spacing:1.8px;font-weight:600;margin:9px 0}.spin-total{font:900 27px Georgia;color:#f8d269;white-space:nowrap}.award-rows{flex:1;margin-top:12px;overflow:hidden}.award-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid #e7c88522;font-size:8px;gap:4px}.award-row b{font-size:11px;color:#f4e0aa}.side-caption{font-size:7px;line-height:1.7;letter-spacing:1px;color:#a4ab93}.bonus-counter{background:#e8c768;color:#263426;border:3px solid #f1db9b;border-radius:10px;text-align:center;padding:18px 7px;box-shadow:0 5px #5f502d}.bonus-counter small{font-size:10px;letter-spacing:1.5px;display:block}.bonus-counter strong{display:block;font:900 64px Georgia;line-height:1.2}.bonus-level{font-size:9px;letter-spacing:1px}.win-celebration{position:absolute;inset:18% 16% 20% 0;z-index:7;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;color:#fff0ae;text-align:center;text-shadow:0 3px #191f17,0 5px 20px #000a;animation:winIn .4s ease-out}.win-celebration[hidden]{display:none}.win-celebration small{font-size:12px;letter-spacing:3px}.win-celebration h2{font:900 clamp(25px,7cqw,78px)/1 'Cooper Black',Georgia;transform:rotate(-4deg);margin:12px 0;color:#f9cd42;-webkit-text-stroke:2px #273126;paint-order:stroke fill}.win-celebration strong{font:900 clamp(30px,6cqw,70px) Georgia}.win-celebration span{font-size:20px;letter-spacing:3px}.journal-dialog{background:#ede1c3;color:#253b2d;border:3px solid #8f7c48;border-radius:10px;max-width:min(520px,90vw);max-height:80vh;overflow:auto;padding:25px;font-family:inherit}.journal-dialog::backdrop{background:#071f1bc9}.journal-dialog p{font-size:12px;border-bottom:1px solid #2a432c33;padding-bottom:8px}.journal-dialog button{background:#243e31;color:#f6e5b8;border:0;padding:12px 20px;border-radius:5px;cursor:pointer}.logo{font:900 clamp(30px,5vw,68px)/.9 'Cooper Black','Arial Black',Georgia;color:#ffdc58;letter-spacing:-2px;text-shadow:0 3px #9b712d,0 6px #14251b;margin:0;transform:rotate(-3deg)}.logo span{display:block;font:900 .32em 'Arial Black',Arial;letter-spacing:8px;color:#fff0ce;margin-top:16px}@keyframes winIn{from{opacity:0;transform:translateY(15px) scale(.92)}to{opacity:1}}
@media(max-width:699px) and (min-height:480px){.reel-frame{width:100%;top:29%;height:69%;padding:7px 7px 22px;z-index:3}.hitman{left:44%;top:-13%;width:69%;z-index:2}.callout{width:100%;top:55%}.board-foot{font-size:6px}.symbol{padding:1px}.symbol-art{inset:2px}.wild-art{inset:2px;border-width:2px}.wild-art strong{font-size:clamp(9px,calc(22cqw / var(--chars,3)),27px)}.wild-art small{font-size:10px;letter-spacing:1px}.scatter-label{font-size:9px;bottom:4px;left:3px;right:3px}.win-celebration{inset:30% 0 10%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}#game[data-reduced=true] *{animation:none!important}

@media(max-height:500px){.award-window{height:150px;padding:8px}.award-window h2{font-size:9px;margin:5px 0}.spin-total{font-size:18px}.award-rows{margin-top:5px}.side-caption{font-size:6px}.award-row{font-size:6px;padding:3px 0}.award-row b{font-size:9px}.bonus-counter{padding:8px 3px}.bonus-counter strong{font-size:35px}.bonus-counter small{font-size:7px}.bonus-level{font-size:6px}}

@media(max-width:500px) and (max-height:479px){.hitman{display:none}.reel-frame{width:100%;padding:5px 5px 18px}.callout{width:100%}.win-celebration{inset:10% 0}.wild-art small{font-size:8px}.wild-art strong{font-size:clamp(9px,calc(18cqw / var(--chars,3)),22px)}}

/* Consistent casing for game-owned presentation and loading screens. */
body, body *{ text-transform: uppercase !important; }
html,body,button{touch-action:manipulation}

/* Keep the foreground desk beneath the lowered character at every layout. */
#game{background-position:center bottom}
@media(max-width:699px) and (orientation:portrait){#game{background-size:auto calc(100% + clamp(200px,calc(992px - 110vh),380px));background-position:center bottom}}

/* CSS fallback matches the live room, including reduced motion and WebGL loss. */
#game[data-feature=true][data-mode=bonus]{background-image:linear-gradient(#112b2522,#142b2555),url('./assets/apartment-v1/free-spins.webp')}
#game[data-feature=true][data-mode=super]{background-image:linear-gradient(#112b2522,#142b2555),url('./assets/apartment-v1/super-free-spins.webp')}

/* The scene represents the reel frame; the actor extends into the right wing. */
.banana-scene { overflow:visible; }
.board-logo{display:block;position:relative;width:100%;margin:0;line-height:0;pointer-events:none}
.board-logo img{display:block;width:100%;height:auto;aspect-ratio:1536/553;object-fit:contain;filter:drop-shadow(0 3px 4px #0006)}
.banana-scene:is([data-layout=wide],[data-layout=compact]) .banana-strip{z-index:9}
.reel-frame {
  left:0; top:var(--reel-top,28px); bottom:var(--reel-bottom,8px);
  width:100%; height:auto; padding:10px 10px 25px; border-radius:15px;
  background:linear-gradient(135deg,#4d6952,#1c392e 48%,#203a2d);
  border:3px solid #172b22;
  box-shadow:0 0 0 2px #e4c477,0 0 0 6px #162e23,0 12px 24px #00190f66,inset 0 0 0 2px #7f925f;
}
.reels { border-radius:7px; border:2px solid #122e22; }
/* The board carries no taglines or wild-count footer. */
.board-caption { display:none; }
.board-foot { bottom:6px; left:12px; right:12px; justify-content:flex-end; font-size:clamp(6px,1.35cqw,9px); color:#d4d1a7; letter-spacing:.9px; }
.hitman { display:block; left:var(--actor-left,88%); top:var(--actor-top,18%); width:var(--actor-width,64%); height:auto; z-index:3; filter:drop-shadow(0 5px 7px #081b1255); }
/* A soft contact shadow on the desk under his shoes, so he stands on it rather than floating. His canvas puts his centre line
   at 58.3% of its width and his soles at 87.1% (the packed rig's placement); the shadow sits there, under the canvas. */
.hitman-shadow { position:absolute; left:calc(var(--actor-left,0px) + var(--actor-width,0px) * .583); top:calc(var(--actor-top,0px) + var(--actor-width,0px) * .871); width:calc(var(--actor-width,0px) * .64); height:calc(var(--actor-width,0px) * .085); transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side,#030805e6,#03080599 50%,#03080500); filter:blur(2px); z-index:2; pointer-events:none; }
.callout { width:100%; top:40%; }
.banana-hud { font-size:10px; letter-spacing:1.2px; color:#eed69e; }
.journal-open { min-height:24px; font-size:10px; padding:0 1px 2px; color:#e7d3a3; border-color:#c1a76d77; }
.award-window {
  position:relative; isolation:isolate; pointer-events:auto; width:100%; height:var(--award-height,198px);
  padding:13px 11px 10px; border:1px solid #c1a46a99; border-radius:9px;
  color:#f6e7bf; background:linear-gradient(150deg,#173b32f2,#0e2a23ed);
  box-shadow:inset 0 0 0 3px #dcb8630c,0 6px 20px #04170d33;
}
.award-window::before { content:''; position:absolute; inset:5px; border:1px solid #d5b46922; border-radius:4px; pointer-events:none; z-index:-1; }
.award-window .eyebrow { color:#dbbd77; letter-spacing:1.6px; font-size:8px; }
.award-window h2 { font-size:10px; letter-spacing:1.1px; margin:7px 0 6px; color:#e8d5a5; }
.spin-total { font-size:clamp(18px,2vw,28px); letter-spacing:-.7px; color:#ffe196; }
.award-rows { margin-top:8px; }
.award-row { padding:4px 0; font-size:8px; }
.award-row b { font-size:11px; }
.side-caption { display:none; }
.bonus-counter {
  width:158px; max-width:100%; padding:20px 8px 15px;
  color:#fff0be; /* The suitcase is drawn by its own layers: see "The free-spin rail is the chooser's suitcase" below. */
}
.bonus-counter strong { font-size:62px; color:#ffdf7c; text-shadow:0 3px #143324; line-height:1.2; }
.bonus-counter small { font-size:9px; line-height:1.4; letter-spacing:1.2px; color:#e4cc95; }
.bonus-level { font-size:8px; letter-spacing:.6px; color:#f0d390; }
.banana-scene[data-layout=portrait] .reel-frame { z-index:3; padding:7px 7px 23px; border-radius:12px; box-shadow:0 0 0 2px #e4c477,0 0 0 5px #162e23,0 10px 22px #00190f55; }
.banana-scene[data-layout=portrait] .hitman { z-index:2; }
.banana-scene[data-layout=portrait] .callout { top:55%; }
.banana-scene[data-layout=portrait] .board-foot { font-size:6px; letter-spacing:.45px; }
@media(max-height:500px) and (min-width:700px) {
  .award-window { padding:8px; }
  .award-window .eyebrow { font-size:7px; }
  .award-window h2 { font-size:9px; margin:5px 0; }
  .spin-total { font-size:21px; }
  .award-rows { margin-top:4px; }
  .award-row { padding:3px 0; font-size:7px; }
  .award-row b { font-size:10px; }
  .bonus-counter { width:132px; padding:12px 6px; }
  .bonus-counter strong { font-size:43px; }
  .bonus-counter small { font-size:8px; }
  .bonus-level { font-size:7px; }
}
@media(max-width:500px) and (max-height:479px) {
  .hitman, .hitman-shadow { display:none; }
  .reel-frame { padding:5px 5px 17px; border-radius:8px; border-width:2px; box-shadow:0 0 0 2px #cbb071,0 0 0 4px #163223; }
  .board-foot { bottom:3px; left:8px; right:8px; font-size:5px; letter-spacing:.3px; }
  .banana-hud { font-size:7px; letter-spacing:.6px; }
  .journal-open { min-height:16px; font-size:8px; }
}

/* The free-spin rail shows only the remaining count. */
.award-window,.bonus-counter[hidden]{display:none!important}
.award-window{height:var(--award-height,132px);padding:10px 10px 8px;border-radius:9px}
.award-window .eyebrow{font-size:7px;letter-spacing:1.2px}
.award-window h2{font-size:9px;margin:4px 0}
.award-window .spin-total{font-size:24px}
.award-window .award-rows{margin-top:5px}
.award-window .award-row{font-size:7px;padding:3px 0}
.award-window .award-row b{font-size:10px}
.bonus-counter{height:var(--counter-height,154px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 7px}
.bonus-counter strong{font-size:clamp(38px,5vw,62px);line-height:1.06;margin:5px 0}
.banana-scene[data-layout=portrait] .hitman{z-index:3;filter:drop-shadow(0 4px 5px #061d1266)}
@media(min-height:480px){
  slot-game-shell[data-layout=portrait] .bonus-counter{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 45px;grid-template-rows:1fr 1fr;gap:0 5px;padding:5px 8px;border-radius:8px;text-align:left;box-shadow:0 3px #092117}
  slot-game-shell[data-layout=portrait] .bonus-counter small{grid-column:1;grid-row:1;align-self:end;font-size:8px;letter-spacing:.6px}
  slot-game-shell[data-layout=portrait] .bonus-counter strong{grid-column:2;grid-row:1/3;margin:0;font-size:36px;text-align:center;line-height:1}
  slot-game-shell[data-layout=portrait] .bonus-level{grid-column:1;grid-row:2;align-self:start;margin-top:2px;font-size:7px;letter-spacing:.15px}
  slot-game-shell[data-layout=portrait] .award-window{display:grid;grid-template-columns:1fr auto;grid-template-rows:22px minmax(0,1fr);align-items:center;width:100%;padding:5px 8px;gap:0 6px;border-radius:7px}
  slot-game-shell[data-layout=portrait] .award-window .eyebrow{display:none}
  slot-game-shell[data-layout=portrait] .award-window h2{grid-column:1;grid-row:1;font-size:8px;margin:0;letter-spacing:.7px}
  slot-game-shell[data-layout=portrait] .award-window .spin-total{grid-column:2;grid-row:1;font-size:20px;margin:0}
  slot-game-shell[data-layout=portrait] .award-window .award-rows{grid-column:1/-1;grid-row:2;width:100%;height:100%;margin-top:3px}
  slot-game-shell[data-layout=portrait] .award-window .award-row{padding:2px 0;font-size:7px}
  slot-game-shell[data-layout=portrait] .award-window .award-row b{font-size:9px}
}
@media(min-height:480px) and (max-height:650px){
  slot-game-shell[data-layout=portrait] .bonus-counter{padding:3px 7px;grid-template-columns:minmax(0,1fr) 38px}
  slot-game-shell[data-layout=portrait] .bonus-counter small{font-size:7px}slot-game-shell[data-layout=portrait] .bonus-counter strong{font-size:28px}slot-game-shell[data-layout=portrait] .bonus-level{font-size:6px}
  slot-game-shell[data-layout=portrait] .award-window .award-rows{display:none}slot-game-shell[data-layout=portrait] .award-window{grid-template-rows:1fr;padding:4px 7px}
  slot-game-shell[data-layout=portrait] .award-window .spin-total{font-size:18px}
}

/* Ordinary symbols stay behind the feature's fixed wild anchors. */
.symbol{z-index:1}.symbol.is-wild{z-index:2}
@media(max-height:650px) and (min-height:480px){
  slot-game-shell[data-layout=portrait] .banana-hud{font-size:8px}
  slot-game-shell[data-layout=portrait] .journal-open{min-height:18px;font-size:9px}
}

/* Mobile keeps just the remaining count; the banana rests below the lower-right frame edge. */
slot-game-shell[data-layout=portrait] .award-window{display:none!important}
slot-game-shell[data-layout=portrait] .bonus-counter{padding:2px 7px;grid-template-columns:minmax(0,1fr) 36px;gap:0 4px}
slot-game-shell[data-layout=portrait] .bonus-counter small{font-size:7px;line-height:1.2}
slot-game-shell[data-layout=portrait] .bonus-counter strong{font-size:27px;line-height:1}
slot-game-shell[data-layout=portrait] .bonus-level{font-size:6px;line-height:1.1;margin-top:1px}
@media(max-height:650px) and (min-height:480px){slot-game-shell[data-layout=portrait] .bonus-counter strong{font-size:24px}}
@media(max-width:900px) and (max-height:500px) and (pointer:coarse){slot-game-shell[data-layout=compact] .award-window{display:none!important}}

slot-game-shell[data-layout=portrait] .journal-open{display:none!important}
slot-game-shell[data-layout=portrait] .banana-hud{justify-content:flex-start;max-width:40%;pointer-events:none}

.max-win-caption{position:absolute;left:var(--max-win-left,100%);top:var(--max-win-top,20%);width:var(--max-win-width,130px);transform:translate(-50%,-100%);z-index:4;pointer-events:none;line-height:0}
.max-win-caption img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px #07170dcc)}
.banana-scene[data-layout=mini] .max-win-caption{display:block}
.banana-scene[data-layout=portrait] .max-win-caption{display:none}
.banana-scene[data-border=attache][data-layout=mini] .hitman{display:block}

/* The free-spin rail is the chooser's suitcase (FEATURE_CASE_ART, presentation.js): green for Free Spins, plum for Super.
   The case is nine-sliced so it can be the tall desktop card or the wide phone strip without distorting its corners and
   latches. --u is the size of one source pixel of the 1400x1042 art. The stretched top centre would smear the handle and its
   brackets, so the body layer masks the top centre down to the rim, a second layer draws the handle once, unscaled, at the
   top centre, and the counter's own background redraws the plain lid edge between them. Higher specificity than
   symbols.css (#game[data-mode=super] .bonus-counter), which still names the old painted background. */
body #game .bonus-counter.bonus-counter{
  --case-art:url('./assets/menu-v2/feature-case-panel-regular-v4.webp');--case-ink:#062a1a;--case-glow:#ffd75a;--case-lid:#045d3d;
  --u:calc(var(--case-height) / 1042);--case-height:min(calc(var(--counter-height,154px) * 1.1),calc(100cqi / 1.3436));
  position:relative;isolation:isolate;box-sizing:border-box;width:calc(var(--case-height) * 1.3436);max-width:100%;height:var(--case-height);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:calc(285 * var(--u)) calc(92 * var(--u)) calc(70 * var(--u));
  border:0;border-radius:0;box-shadow:none;color:#fff0be;text-align:center;
  background:linear-gradient(#010101 0 25%,var(--case-lid) 0 72%,#010101 0) calc(430 * var(--u)) calc(172 * var(--u))/calc(100% - 860 * var(--u)) calc(21 * var(--u)) no-repeat;
  filter:drop-shadow(0 6px 8px #0009)
}
body #game[data-mode=super] .bonus-counter.bonus-counter{
  --case-art:url('./assets/menu-v2/feature-case-panel-super-v4.webp');--case-ink:#26043f;--case-glow:#f2c4ff;--case-lid:#5e168e
}
#game .bonus-counter::before,#game .bonus-counter::after{content:'';position:absolute;z-index:-1;pointer-events:none}
#game .bonus-counter::before{
  inset:0;border:1px solid transparent;
  border-image:var(--case-art) 300 430 130 430 fill / calc(300 * var(--u)) calc(430 * var(--u)) calc(130 * var(--u)) calc(430 * var(--u)) stretch;
  --case-keep:linear-gradient(#000,#000) 0 calc(193 * var(--u))/100% 100% no-repeat,linear-gradient(#000,#000) 0 0/calc(430 * var(--u)) 100% no-repeat,linear-gradient(#000,#000) 100% 0/calc(430 * var(--u)) 100% no-repeat;
  -webkit-mask:var(--case-keep);mask:var(--case-keep)
}
#game .bonus-counter::after{
  top:0;left:50%;width:calc(540 * var(--u));height:calc(193 * var(--u));translate:-50% 0;
  background:var(--case-art) 50% 0/calc(1400 * var(--u)) auto no-repeat
}
#game .bonus-counter>small.banana-lettering{flex:none;width:100%;height:calc(var(--case-height) * .17);margin:0}
#game .bonus-counter>small.banana-lettering[data-remaining=true]::before{
  content:'LEFT';top:calc(100% + 1px);display:flex;align-items:center;justify-content:center;gap:6px;
  font:800 calc(var(--case-height) * .055)/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.3em;text-indent:.3em;color:#fff3cf;
  text-shadow:0 1px 0 var(--case-ink),0 0 4px var(--case-ink)
}
#game .bonus-counter strong{
  flex:none;margin:calc(var(--case-height) * .085) 0 0;
  font:400 calc(var(--case-height) * .34)/.95 'Lilita One','Cooper Black','Arial Black',sans-serif;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:#fff1b8;-webkit-text-stroke:calc(var(--case-height) * .03) var(--case-ink);paint-order:stroke fill;
  text-shadow:0 calc(var(--case-height) * .022) 0 var(--case-ink),0 0 18px color-mix(in srgb,var(--case-glow) 45%,transparent)
}
/* The rule line stays on the case's face: at .05 of its height with wide tracking, "PLAIN & MULTIPLIER WILDS · STICKY" ran from
   the wax seal to the far corner. */
#game .bonus-counter .bonus-level{
  flex:none;max-width:82%;margin-top:calc(var(--case-height) * .025);
  font:800 calc(var(--case-height) * .045)/1.25 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.03em;color:#f6e6b8;
  text-shadow:0 1px 0 var(--case-ink);text-wrap:balance
}
@media(max-height:500px) and (min-width:700px){
  body #game .bonus-counter.bonus-counter{--case-height:min(var(--counter-height,104px),calc(100cqi / 1.3436))}
  #game .bonus-counter .bonus-level{display:none}
}
/* Phones: the case keeps its art's proportions (the owner, 2026-10-12: drawn as a wide, low strip it looked stretched). It is as
   tall as the rail under the board allows (theme.js sizes the rail to the room between the board and the bar), no wider than
   its 44% of the rail, at most 124 px tall: the name across its face, the count under it, LEFT under that. The rule line (7 px
   here) is left out, as at Popout S. */
body #game slot-game-shell[data-layout=portrait] .bonus-counter.bonus-counter{
  --case-height:clamp(56px,min(var(--mobile-rail-height,76px),var(--mobile-rail-width,380px) * .44 / 1.3436),124px);--u:calc(var(--case-height) / 1042);
  width:calc(var(--case-height) * 1.3436);max-width:none;height:var(--case-height);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--case-height) * .02);
  padding:calc(270 * var(--u)) calc(110 * var(--u)) calc(80 * var(--u));text-align:center
}
#game slot-game-shell[data-layout=portrait] .bonus-counter>small.banana-lettering{flex:none;width:100%;height:calc(var(--case-height) * .19);margin:0}
#game slot-game-shell[data-layout=portrait] .bonus-counter>small.banana-lettering[data-remaining=true]::before{display:none}
#game slot-game-shell[data-layout=portrait] .bonus-counter strong{
  flex:none;margin:0;text-align:center;font-size:calc(var(--case-height) * .3);line-height:.9;
  -webkit-text-stroke-width:calc(var(--case-height) * .035);text-shadow:0 2px 0 var(--case-ink),0 0 10px color-mix(in srgb,var(--case-glow) 40%,transparent)
}
#game slot-game-shell[data-layout=portrait] .bonus-counter strong::after{
  content:'LEFT';display:block;margin-top:calc(var(--case-height) * .03);font:800 max(8px,calc(var(--case-height) * .07))/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.24em;text-indent:.24em;
  color:#fff3cf;-webkit-text-stroke:0;text-shadow:0 1px 0 var(--case-ink)
}
#game slot-game-shell[data-layout=portrait] .bonus-counter .bonus-level{display:none}


/* Popout S (theme.js data-fit=small: the 1200×675 composition drawn at a third; popout-fit.css has the shell's side). The
   board's own small print is enlarged where it sits: the line-win pops and their ×N chips (a $0.02 pop was 4 px tall), and
   the suitcase's LEFT tag; its rule line is left out. Popout L (data-fit=popout) gets the pops a size up. */
#game[data-fit=small] .board-win-pop{font-size:min(calc(var(--pop-size,1) * 30px),calc(84cqw / (var(--len,6) * .6)))}
#game[data-fit=small] .board-win-chip{font-size:20px}
#game[data-fit=popout] .board-win-pop{font-size:min(calc(var(--pop-size,1) * clamp(14px,3.6cqw,22px)),calc(84cqw / (var(--len,6) * .6)))}
#game[data-fit=small] .bonus-counter .bonus-level{display:none}
#game[data-fit=small] .bonus-counter>small.banana-lettering[data-remaining=true]::before{font-size:calc(var(--case-height) * .1);letter-spacing:.2em;text-indent:.2em}
#game[data-fit=small] .bonus-counter strong{margin-top:calc(var(--case-height) * .125)}
/* The win pop-up's caption (THIS FREE SPIN, 25,000× MAX WIN) is 13 px at most in the composition, 4.3 px at Popout S (review
   checks, 2026-10-12): 22 px there, about 7.3 px on screen. The pop-up is the body's, beside #game. */
body:has(>#game[data-fit=small]) .banana-celebration-caption{font-size:22px;letter-spacing:.12em}

/* Transparent illustration, with lighting on the board rather than icon tiles. */
.reels{
  background-color:#173c32;
  background-image:repeating-linear-gradient(90deg,#ffffff04 0%,#ffffff04 calc(100% / 6 - 1px),#bda66b20 calc(100% / 6 - 1px),#bda66b20 calc(100% / 6)),radial-gradient(ellipse at 50% 20%,#38634d80,transparent 80%),linear-gradient(#173c3273,#173c3273),url('./assets/board-felt-v1.webp');
  background-size:100% 100%,100% 100%,100% 100%,512px 512px;
  box-shadow:inset 0 8px 18px #00160c55,inset 0 -6px 14px #00160c44;
}
.symbol{ padding:0; }
.symbol::after{ inset:4%; border:0; border-radius:12%; box-shadow:none; }
.symbol-art{
  position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;
  background:none;border:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 3px 1px #031e1790);
  transform-origin:50% 94%; /* a letter's slam gives from its foot; landings scale about the middle, as Gold Mine's do (effects.js landingFrames) */
}
.symbol.winning::after{ border:1px solid #fce493b0;box-shadow:inset 0 0 17px #fff2842b,0 0 12px #f7d55744; }
.symbol.winning .symbol-art{ filter:brightness(1.1) drop-shadow(0 0 6px #ffe76d80); }
.wild-art{
  position:absolute;inset:0;display:grid;place-items:center;background:none;
  border:0;border-radius:0;box-shadow:none;overflow:visible;color:#fff4ba;
  filter:var(--paper-shadow); /* the paper's contact shadow on the felt (effects.css) */
  transform-origin:50% 92%; /* a stamp's press gives from the paper's foot; its landing scales about the middle (effects.js) */
}
.wild-art::before{ display:none; }
/* Wild stamps (wild-stamps.js): WILD and the value inked onto the paper (scripts/pack-paper-wilds.py) in the tier's colour
   (--stamp, per wild from bazooka-presentation.js), or WILD in one fixed ink (data-word): multiplied into the paper so its
   grain shows through, and textured by a static noise mask offset per wild (--grain): rubber-stamp speckle, cracked print,
   or both worn in (data-texture). The paper is drawn square in its cell like a symbol, and its stamps share that box.
   Lilita One is a bundled SIL OFL font (assets/fonts, its licence beside it), loaded only when a style uses it. */
@font-face{ font-family:'Lilita One';src:url('./assets/fonts/lilita-one.woff2') format('woff2');font-display:block; }
.reels,.stamp-lab{ --stamp-speckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 6.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --stamp-crack:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.03 .06' numOctaves='3' seed='4' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 -.8' result='v'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='2' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 5.6' result='s'/%3E%3CfeComposite in='v' in2='s' operator='in'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E");
  --stamp-worn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.04 .07' numOctaves='3' seed='9' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 12 -.6' result='v'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 6.8' result='s'/%3E%3CfeComposite in='v' in2='s' operator='in' result='vs'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='5' result='b'/%3E%3CfeColorMatrix in='b' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -16 12.4' result='p'/%3E%3CfeComposite in='vs' in2='p' operator='in'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23w)'/%3E%3C/svg%3E"); }
.wild-paper,.wild-art>.wild-stamps{ position:absolute;inset:3%;width:94%;height:94%;object-fit:contain; }
.wild-paper{ transform-origin:50% 92%; }
.wild-stamps{ overflow:visible;pointer-events:none;mix-blend-mode:multiply; }
.wild-stamps[data-texture=speckle]{ -webkit-mask:var(--stamp-speckle) var(--grain,0 0)/110% 110%;mask:var(--stamp-speckle) var(--grain,0 0)/110% 110%; }
.wild-stamps[data-texture=crack]{ -webkit-mask:var(--stamp-crack) var(--grain,0 0)/90% 90%;mask:var(--stamp-crack) var(--grain,0 0)/90% 90%; }
.wild-stamps[data-texture=worn]{ -webkit-mask:var(--stamp-worn) var(--grain,0 0)/90% 90%;mask:var(--stamp-worn) var(--grain,0 0)/90% 90%; }
.wild-stamps text{ text-anchor:middle; }
.wild-stamps .ws-ink{ fill:var(--stamp,#2b2822);transform-box:fill-box;transform-origin:50% 50%; }
.wild-stamps .ws-rule{ fill:none;stroke:var(--stamp,#2b2822); }
.wild-stamps[data-word=green] .ws-word .ws-ink{ fill:#1d5534; }.wild-stamps[data-word=green] .ws-word .ws-rule{ stroke:#1d5534; }
.wild-stamps[data-word=charcoal] .ws-word .ws-ink{ fill:#2b2822; }.wild-stamps[data-word=charcoal] .ws-word .ws-rule{ stroke:#2b2822; }
.is-scatter .symbol-art{ inset:0;width:100%;height:100%; }

.journal-dialog{ color:#f5e7c3;border:2px solid #d1b06d;background:linear-gradient(#113027df,#102a24ec),url('./assets/feature-regular-v2.webp') center/cover;box-shadow:0 12px 70px #0008; }
.journal-dialog p{ border-color:#dec68c33; }
.journal-dialog button{ background:#e8c46b;color:#1c3529;font-weight:800; }
#game[data-mode=super] .bonus-counter{ background-image:linear-gradient(#3d2037bb,#241328d9),url('./assets/feature-super-v2.webp'); }

/* Sticky wilds breathe in place without moving their board anchors. */
#game[data-feature=true] .is-wild .wild-art{animation:sticky-wild-idle 3.8s ease-in-out infinite}
#game[data-feature=true] .is-wild:nth-child(3n) .wild-art{animation-delay:-1.2s}
#game[data-feature=true] .is-wild:nth-child(3n + 1) .wild-art{animation-delay:-2.5s}
@keyframes sticky-wild-idle{0%,68%,100%{transform:translateY(0) scale(1)}78%{transform:translateY(-2px) scale(1.025)}87%{transform:translateY(0) scale(.99,1.01)}94%{transform:translateY(-1px) scale(1.008)}}
#game[data-reduced=true] .is-wild .wild-art{animation:none}
#game[data-suspended=true] .is-wild .wild-art{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#game[data-feature=true] .is-wild .wild-art{animation:none}}

/* The Special Spins menu's wild icons breathe. */
@keyframes wn-breathe{0%,100%{scale:1;translate:0 0}50%{scale:1.05;translate:0 -1.6%}}

/* Bonus and special-spin panels, mounted in the shell's shadow root (presentation.js). Gold Mine's modal structure and spacing
   (deep-shift/src/modal-theme.js) in Banana's palette: the buy and special-spin confirmations and the bonus intro/summary plaques
   are one framed modal; the two choosers have no panel at all, their title, options and bet float over the darkened game.
   The modal background is one custom property, --banana-modal-bg: a calm placeholder until commissioned art replaces it, e.g.
   :host{--banana-modal-bg:url('./assets/modal-background.webp') center/cover,#173a2d}. --banana-plank-bg does the same for the
   chooser options and the Bonus/Special Spins buttons. */
:host{
  --banana-modal-bg:repeating-linear-gradient(135deg,#ffffff06 0 2px,#0000 2px 11px),radial-gradient(ellipse 90% 70% at 50% 38%,#2c5844,#173a2d 58%,#0b2018);
  --banana-plank-bg:linear-gradient(180deg,#ffffff0d,#0000 45%,#00000026),repeating-linear-gradient(135deg,#ffffff05 0 2px,#0000 2px 11px),radial-gradient(ellipse 90% 80% at 50% 30%,#2f5a46,#173a2d 60%,#0d2519);
  --banana-plaque-bg:var(--banana-plank-bg);
}
/* Colour keys: gold Free Spins, plum Super Free Spins, green special spins. */
:is(.dialog,.buy-bet,.dialog-bet),.dialog [data-action=feature],.dialog [data-action=special]{--fx-head:#ffe27a;--fx-ink:#3d2a07;--fx-glow:#e9c860;--rim:linear-gradient(160deg,#fff4c4,#e9c860 26%,#8a6a1f 50%,#f1d27a 74%,#fff0b8);--rim-dark:#0b1d17;--tint:#0000}
:is(.dialog,.buy-bet)[data-banana-mode=super],.dialog [data-action=feature][data-mode=super]{--fx-head:#f3d8ff;--fx-ink:#3b1846;--fx-glow:#c58ae0;--rim:linear-gradient(160deg,#f6e3ff,#d7a6e8 26%,#6b3a7a 50%,#d1a0e3 74%,#f3dcff);--rim-dark:#1d0b24;--tint:#7a3d8c}
:is(.dialog,.buy-bet)[data-banana-mode=special],.dialog [data-action=special]{--fx-head:#fff0c4;--fx-ink:#123326;--fx-glow:#9fdcaa}

/* Confirmations and bonus plaques: the framed modal. */
.dialog:is([data-panel=feature],[data-panel=special],[data-panel=feature-intro],[data-panel=feature-summary]){position:relative;z-index:1;isolation:isolate;container-type:inline-size;width:min(500px,100%);max-width:500px;height:auto;min-height:0;max-height:100%;margin:0;overflow:visible;
  border:3px solid transparent;border-image:var(--rim) 1;border-radius:0;background:var(--banana-modal-bg),#173a2d;background-origin:border-box;
  box-shadow:0 0 0 1px var(--rim-dark),inset 0 0 0 1px var(--rim-dark),inset 0 0 40px #0008,0 26px 70px #000d,0 0 90px color-mix(in srgb,var(--fx-glow) 20%,transparent);color:#f6ead0;text-align:center}
/* The background layer: the modal art (one custom property) with a fine inner rule, and the edition's tint over it. */
.dialog .banana-panel-scene{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--banana-modal-bg),#173a2d}
.dialog .banana-panel-scene::after{content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--fx-glow) 30%,transparent);pointer-events:none}
.dialog:is([data-panel=feature],[data-panel=special],[data-panel=feature-intro],[data-panel=feature-summary])::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tint);mix-blend-mode:color;opacity:.55}
.dialog:is([data-panel=feature],[data-panel=special],[data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2{margin:0;font-family:'Cooper Black','Arial Black',Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:.01em;text-wrap:balance;color:var(--fx-head);-webkit-text-stroke:max(3px,.075em) var(--fx-ink);paint-order:stroke fill;text-shadow:0 .08em var(--fx-ink),0 0 .4em color-mix(in srgb,var(--fx-glow) 70%,transparent)}
/* Text carries the motion: headlines breathe, hero numbers bob. */
.dialog:is([data-panel=feature],[data-panel=special],[data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2{transform-origin:50% 70%;animation:banana-breathe 3s ease-in-out 1.3s infinite}
.dialog:is([data-panel=feature],[data-panel=special],[data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-count,.feature-total,.quote-total span:last-child){transform-origin:50% 90%;animation:banana-bob 1.9s ease-in-out 1.6s infinite}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit{transform-origin:50% 60%;animation:banana-breathe 3s ease-in-out 2.1s infinite}
@keyframes banana-breathe{0%,100%{scale:1}30%{scale:1.035 .975}55%{scale:.985 1.03}78%{scale:1.015 .99}}
@keyframes banana-bob{0%,100%{translate:0 0;scale:1}32%{translate:0 -6%;scale:.97 1.04}52%{translate:0 0;scale:1.05 .95}66%{scale:.99 1.015}80%{scale:1}}

/* Buy and special-spin confirmations: title, the cost panel, one sentence, Cancel and Confirm; the bet sits beneath. */
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header{position:relative;padding:20px 52px 2px;justify-content:center;border:0}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header h2{font-size:clamp(20px,6cqi,32px);text-align:center}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;background:#06140fcc;color:#f6ead0;border:1px solid color-mix(in srgb,var(--fx-glow) 45%,transparent)}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-content{display:flex;flex-direction:column;flex:0 1 auto;gap:12px;padding:12px 26px 4px}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-description{order:1;margin:0;text-align:center;color:#e8ecd6;text-shadow:0 1px #000;font-size:12px;line-height:1.5;text-wrap:balance}
.dialog:is([data-panel=feature],[data-panel=special]) .quote{order:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;padding:16px 14px;background:#06140f9e;border:1px solid color-mix(in srgb,var(--fx-glow) 45%,transparent);border-radius:12px;color:#e8ecd6}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-row{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;text-align:center}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-row span{color:#c3c8ad;text-shadow:none}.dialog:is([data-panel=feature],[data-panel=special]) .quote-row span:last-child{font-size:12px;color:#f6ead0;font-weight:850;text-align:center}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total{grid-column:1/-1;grid-row:1;gap:4px;padding:0 0 12px;border-top:0;border-bottom:1px solid color-mix(in srgb,var(--fx-glow) 30%,transparent)}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:first-child{color:var(--fx-head);font-size:11px;font-weight:900;letter-spacing:.26em;text-shadow:0 2px #000a}
/* Prices are read, not admired: a solid cream in a heavy sans with even-width digits and a plain shadow (the chrome-gold Cooper
   Black, with its dark band through every digit, made amounts like $1,000.00 hard to read). */
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:last-child{display:block;width:100%;padding:0 .08em;font:800 clamp(32px,10cqi,50px)/1.1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:#fff2c6;-webkit-text-stroke:0;text-shadow:0 2px 0 #1a1003,0 3px 10px #000c,0 0 18px color-mix(in srgb,var(--fx-glow) 40%,transparent)}
.dialog:is([data-panel=feature],[data-panel=special]) .error-inline{order:2;margin:0!important}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer{padding:14px 26px 22px;border:0;justify-content:center;gap:10px}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button{min-height:48px;border-radius:12px;font-size:clamp(11px,3cqi,14px);line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]{background:#06140fcc;color:#f6ead0;border:1px solid color-mix(in srgb,var(--fx-glow) 45%,transparent);text-shadow:none;box-shadow:none}
.dialog[data-banana-mode=super]:is([data-panel=feature],[data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button:not([data-action=close]){background:linear-gradient(#f6e3ff,#d1a0e3 55%,#8f4fa3);color:#2d0f38;border-color:#5a2768;text-shadow:0 1px #f8ecff;box-shadow:inset 0 1px #fdf6ff,0 2px 4px #1d0b2440}
@media(max-width:600px){.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header{padding:16px 46px 2px}.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]{top:8px;right:8px;width:36px;height:36px}.dialog:is([data-panel=feature],[data-panel=special]) .dialog-content{padding:8px 14px 2px}.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer{padding:12px 14px 16px}.dialog:is([data-panel=feature],[data-panel=special]) .quote{padding:13px 9px}}

/* Bonus plaques: the intro and the wrap-up take this frame; their layout and art are bonus-screens.css. */
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header{justify-content:center;border:0}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer{justify-content:center;border:0}
.overlay:has(>.dialog:is([data-panel=feature-intro],[data-panel=feature-summary])){background:radial-gradient(ellipse at 50% 50%,#173a2d66,#04100ba6 75%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* Choosers: no panel. The game darkens and blurs; the title, the options and the bet float over it. */
.overlay:has(>.dialog:is([data-panel=features],[data-panel=special-spins])){background:radial-gradient(ellipse 75% 65% at 50% 50%,#0a1c15b8,#020806eb);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dialog:is([data-panel=features],[data-panel=special-spins]){container-type:inline-size;width:min(440px,100%);max-width:440px;max-height:100%;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;color:#f6ead0}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{position:relative;z-index:5;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;padding:0 0 14px;border:0}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header h2{grid-column:2;margin:0;text-align:center;font:400 clamp(20px,5.4cqi,30px)/1.05 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.01em;text-wrap:balance;color:#ffe27a;-webkit-text-stroke:max(3px,.09em) #3d2a07;paint-order:stroke fill;text-shadow:0 .08em #3d2a07,0 0 .5em #e9c8608c,0 6px 18px #000}
.dialog[data-panel=special-spins] .dialog-header h2{font-size:clamp(20px,4.4cqi,30px)}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close]{grid-column:3;justify-self:end;display:grid;place-items:center;width:42px;height:42px;min-width:42px;min-height:42px;margin:0;padding:0;border-radius:50%;background:#06140fd9;border:2px solid #f6ead0a6;color:#f6ead0;box-shadow:0 4px 14px #000b;transition:transform .15s,border-color .15s,box-shadow .15s}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close] svg{width:18px;height:18px;stroke-width:3.2}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close]:is(:hover,:focus-visible){transform:scale(1.08);border-color:#f6ead0;box-shadow:0 0 16px #f6ead055,0 4px 14px #000b}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-content{flex:0 1 auto;min-height:0;padding:4px 6px;overflow:visible}
.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* One option per plank: the name, one line and the price pill. */
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;height:128px;min-height:128px;max-height:128px;padding:14px 18px;border:0;border-radius:4px;background:var(--banana-plank-bg),#173a2d;text-align:center;color:var(--fx-head);box-shadow:0 16px 30px #000c,0 4px 10px #0009;transition:transform .2s cubic-bezier(.2,.8,.3,1.3),filter .2s}
.dialog[data-panel=features] [data-action=feature][data-mode=super]::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--tint);mix-blend-mode:color;opacity:.6}
.dialog:is([data-panel=features],[data-panel=special-spins]) .button[data-action=feature]::after{content:'';position:absolute;inset:0;z-index:1;border:3px solid transparent;border-image:var(--rim) 1;border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px var(--rim-dark),inset 0 0 0 1px var(--rim-dark),0 0 10px 1px color-mix(in srgb,var(--fx-glow) 50%,transparent);background:linear-gradient(105deg,transparent 42%,#fff6d066 50%,transparent 58%) 100% 0/300% 100% no-repeat;background-clip:padding-box;transition:box-shadow .2s}
.dialog:is([data-panel=features],[data-panel=special-spins]) .button[data-action=feature] svg{display:none}
.dialog:is([data-panel=features],[data-panel=special-spins]) .button[data-action=feature]>:is(span,small,.bonus-blurb){position:relative;z-index:2;flex:0 0 auto}
.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]>span{margin:0;max-width:100%;font:400 25px/1.1 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.01em;text-align:center;color:var(--fx-head);-webkit-text-stroke:max(3px,.12em) var(--fx-ink);paint-order:stroke fill;text-shadow:0 .1em var(--fx-ink),0 0 .45em color-mix(in srgb,var(--fx-glow) 70%,transparent)}
.dialog:is([data-panel=features],[data-panel=special-spins]) .button>.bonus-blurb{display:block;max-width:100%;margin:0;padding:0 6px;font-size:14px;font-style:normal;font-weight:800;line-height:1.2;letter-spacing:.01em;text-transform:none!important;white-space:normal;text-wrap:balance;color:#fff6dc;-webkit-text-stroke:0;paint-order:normal;text-shadow:0 1px 0 #0b1d17,0 0 2px #000,0 0 7px #000c}
.dialog:is([data-panel=features],[data-panel=special-spins]) .button[data-action=feature]>small{display:block;width:fit-content;max-width:100%;margin:4px auto 0;padding:2px 12px 3px;border-radius:999px;font:800 19px/1.2 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums lining-nums;color:#fff4d2;background:linear-gradient(#071510eb,#123024eb);-webkit-text-stroke:0;text-shadow:0 1px 0 #000;box-shadow:inset 0 2px 4px #000d,0 1px 0 #ffffff30,0 0 0 1px color-mix(in srgb,var(--fx-glow) 50%,transparent)}
/* Each card's art may rise above its top edge; earlier cards stack over later ones so a price pill hanging from a card's foot
   is never covered by the next card's art. Hover still lifts any card to the top. */
.dialog[data-panel=features] .menu-list>.button[data-action=feature]:nth-child(1){z-index:3}.dialog[data-panel=features] .menu-list>.button[data-action=feature]:nth-child(2){z-index:2}
.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list>.button[data-action=feature]:is(:hover,:focus-visible){z-index:4}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]:is(:hover,:focus-visible):not(:disabled){transform:translateY(-3px) scale(1.02);filter:brightness(1.08)}
.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]:is(:hover,:focus-visible):not(:disabled)::after{background-position:0 0;box-shadow:0 0 0 1px var(--rim-dark),inset 0 0 0 1px var(--rim-dark),inset 0 0 20px color-mix(in srgb,var(--fx-glow) 50%,transparent),0 0 12px 2px var(--fx-glow),0 0 34px 8px color-mix(in srgb,var(--fx-glow) 50%,transparent);transition:background-position .65s ease-out,box-shadow .2s}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]:active:not(:disabled){transform:scale(.98);transition-duration:.08s}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0 0;border:0}
@media(max-width:600px){.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{grid-template-columns:38px minmax(0,1fr) 38px;gap:4px}.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close]{width:38px;height:38px;min-width:38px;min-height:38px}.dialog:is([data-panel=features],[data-panel=special-spins]) .button>.bonus-blurb{font-size:13px}.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]>span{font-size:22px}.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list{gap:12px}}
@media(max-height:600px){:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list .button[data-action=feature]{height:104px;min-height:104px;max-height:104px;padding:8px 14px;gap:3px}.dialog:is([data-panel=features],[data-panel=special-spins]) .menu-list{gap:10px}.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer{padding-top:12px}.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{padding-bottom:8px}}

/* Special spins: the chooser keeps its layout (two across; one column on phones); each option is the original illustrated card.
   The guaranteed wilds in the game's own art, the bet multiple, the name in Cooper Black, one line, and the per-spin price under a
   fine rule. Scoped under .menu-list so the shared menu-row rules (flex, alignment) cannot reach inside the card. */
.dialog[data-panel=special-spins]{width:min(660px,100%);max-width:660px}
.dialog[data-panel=special-spins] .menu-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr);grid-template-rows:1fr auto;align-items:stretch;justify-items:stretch;gap:8px 11px;min-width:0;min-height:150px;padding:15px 13px;text-align:left;color:#f6ead0;border:1px solid #dfc176;border-radius:13px;background:linear-gradient(145deg,#385541f5,#19362af5);box-shadow:0 4px #0a221a66,0 14px 28px #000a;transition:transform .2s cubic-bezier(.2,.8,.3,1.3),filter .2s,box-shadow .2s}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice:is(:hover,:focus-visible):not(:disabled){z-index:4;transform:translateY(-3px) scale(1.02);filter:brightness(1.08);box-shadow:0 4px #0a221a66,0 0 0 1px #ffe197,0 0 22px #e9c86066,0 14px 28px #000a}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice:active:not(:disabled){transform:scale(.98);transition-duration:.08s}
.menu-list .special-spin-choice .special-spin-art{grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;gap:2px;height:112px;align-self:center;min-width:0;pointer-events:none}
.menu-list .special-spin-choice .special-spin-symbol{position:relative;display:block;flex:1 1 0;height:100%;min-width:0}
/* Each wild is the board's paper with its stamps in one SVG (presentation.js paperWildSvg), contained in its slot; the stamps
   multiply into the paper in their tier's ink (--stamp), as on the board (symbols.css). */
.menu-list .special-spin-choice .special-spin-paper{display:block;width:100%;height:100%;overflow:visible}
.menu-list .special-spin-choice .special-spin-paper .wild-stamps{overflow:visible;mix-blend-mode:multiply}
.menu-list .special-spin-choice .special-spin-paper text{text-anchor:middle}
.menu-list .special-spin-choice .special-spin-paper .ws-ink{fill:var(--stamp,#2b2822)}
.menu-list .special-spin-choice .special-spin-paper .ws-rule{fill:none;stroke:var(--stamp,#2b2822)}
.menu-list .special-spin-choice .special-spin-symbol:only-child{flex:none;width:44px}
.menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:79px;gap:0}
.menu-list .special-spin-choice .special-spin-individual-art .special-spin-symbol{flex:none;width:55%;height:auto;aspect-ratio:1}
.menu-list .special-spin-choice .special-spin-individual-art .special-spin-symbol:first-child{transform:translateX(4px) rotate(-11deg)}
.menu-list .special-spin-choice .special-spin-individual-art .special-spin-symbol:last-child{transform:translateX(-4px) rotate(10deg)}
.menu-list .special-spin-choice .special-spin-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;min-width:0}
.menu-list .special-spin-choice .special-spin-classification{font:800 7px/1.5 Arial,sans-serif;letter-spacing:1.5px;color:#d4c590}
.menu-list .special-spin-choice .special-spin-title{font:900 21px/1.08 'Cooper Black',Georgia,serif;color:#ffe197;text-wrap:balance}
.menu-list .special-spin-choice .special-spin-guarantee{font:600 10px/1.5 Arial,sans-serif;color:#ede2c2;max-width:200px}
.menu-list .special-spin-choice .special-spin-cost{grid-column:2;display:flex;flex-direction:column;gap:3px;padding-top:9px;border-top:1px solid #e1c98155;min-width:0}
.menu-list .special-spin-choice .special-spin-price{display:block;font:800 25px/1.1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em;font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;text-shadow:0 2px 0 #0b1d17,0 0 8px #000a;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.menu-list .special-spin-choice .special-spin-price.per-spin::after{content:' / spin';font:800 11px/1 Arial,sans-serif;letter-spacing:.06em;color:#d4c590}
@media(max-width:600px){.dialog[data-panel=special-spins] .menu-list{grid-template-columns:minmax(0,1fr);gap:10px}:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{grid-template-columns:90px minmax(0,1fr);min-height:124px;padding:11px 10px;gap:5px 10px}.menu-list .special-spin-choice .special-spin-art{height:96px}.menu-list .special-spin-choice .special-spin-symbol:only-child{width:40px}.menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:70px}.menu-list .special-spin-choice .special-spin-title{font-size:18px}.menu-list .special-spin-choice .special-spin-guarantee{font-size:9px}.menu-list .special-spin-choice .special-spin-cost{align-self:end;padding-top:5px}.menu-list .special-spin-choice .special-spin-price{font-size:22px}}
@media(max-width:359px){:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{min-height:118px;gap:5px 8px;padding:10px 8px}.menu-list .special-spin-choice .special-spin-title{font-size:17px}.menu-list .special-spin-choice .special-spin-price{font-size:20px}.menu-list .special-spin-choice .special-spin-art{height:90px}.menu-list .special-spin-choice .special-spin-symbol:only-child{width:36px}.menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:60px}}
@media(max-height:700px) and (max-width:600px){:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{min-height:0;padding:8px 10px;gap:3px 10px}.menu-list .special-spin-choice .special-spin-art{height:78px}.menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:58px}.menu-list .special-spin-choice .special-spin-copy{gap:3px}.menu-list .special-spin-choice .special-spin-title{font-size:17px}.menu-list .special-spin-choice .special-spin-cost{padding-top:4px}.menu-list .special-spin-choice .special-spin-price{font-size:19px}.dialog[data-panel=special-spins] .menu-list{gap:8px}}
@media(max-height:600px) and (min-width:601px){:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{min-height:120px;padding:10px}.menu-list .special-spin-choice .special-spin-art{height:94px}.menu-list .special-spin-choice .special-spin-title{font-size:19px}}
/* Banana Spins, the fifth special: its card spans the chooser's width under the four weapon cards, with B-A-N-A-N-A in letter
   tiles. With five options the cards tighten so the chooser still fits on a phone. */
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice.special-spin-banana{grid-column:1/-1;min-height:118px;background:linear-gradient(145deg,#4f5a2ef5,#26341df5)}
.menu-list .special-spin-choice.special-spin-banana .special-spin-guarantee{max-width:none}
.menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;height:auto;align-content:center}
.menu-list .special-spin-choice .special-spin-banana-art .special-spin-letter{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 2px #071e1380)}
.menu-list .special-spin-choice .special-spin-banana-art .special-spin-letter:nth-child(2n){transform:translateY(2px) rotate(4deg)}.menu-list .special-spin-choice .special-spin-banana-art .special-spin-letter:nth-child(2n+1){transform:rotate(-4deg)}
@media(max-width:600px){.dialog[data-panel=special-spins] .menu-list:has(>.special-spin-choice:nth-child(5)){gap:7px}:host([data-layout]) .dialog[data-panel=special-spins] .menu-list:has(>.special-spin-choice:nth-child(5)) .button.special-spin-choice{min-height:0;padding:7px 10px;gap:3px 10px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-art{height:74px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-art.special-spin-individual-art{height:56px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-art.special-spin-banana-art{height:auto;width:72px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-copy{gap:2px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-title{font-size:17px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-cost{padding-top:4px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-price{font-size:19px}}
@media(min-width:601px) and (max-height:760px){.dialog[data-panel=special-spins] .menu-list:has(>.special-spin-choice:nth-child(5)){gap:10px}:host([data-layout]) .dialog[data-panel=special-spins] .menu-list:has(>.special-spin-choice:nth-child(5)) .button.special-spin-choice{min-height:112px;padding:9px 12px}.menu-list:has(>.special-spin-choice:nth-child(5)) .special-spin-choice .special-spin-art{height:88px}}

/* The bet stepper: the chooser's footer, centred with its label over round - and + badges, and a confirmation's own panel under
   the modal (.buy-bet). Changing it re-prices on the spot. */
.dialog-bet,.buy-bet{display:flex;flex-direction:column;align-items:center;gap:6px}
:is(.dialog-bet,.buy-bet) .label{font-size:10px;font-weight:900;letter-spacing:.18em;color:#fff1cf;text-shadow:0 1px 0 #000,0 0 6px #000}
.dialog-bet-controls{display:inline-flex;align-items:center;gap:8px}
.overlay .dialog-bet-step{display:grid;place-items:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:50%;background:linear-gradient(#2f5a46,#14332a);border:2px solid #e9c860;color:#fff6dc;box-shadow:0 2px 0 #0b1d17,0 3px 6px #0007;transition:transform .15s,filter .15s}
.overlay .dialog-bet-step svg{width:16px;height:16px;stroke-width:3.2}
.overlay .dialog-bet-step:not(:disabled):hover{transform:scale(1.08);filter:brightness(1.15)}
.overlay .dialog-bet-step:disabled{opacity:.35}
.dialog-bet-value{display:inline-block;min-width:4.6em;text-align:center;font-size:18px;font-weight:950;font-variant-numeric:tabular-nums;white-space:nowrap;color:#ffe45e;-webkit-text-stroke:3px #2a1a03;paint-order:stroke fill;text-shadow:0 2px 0 #2a1a03}
.overlay:has(>.dialog:not([data-leaving]):is([data-panel=feature],[data-panel=special])){flex-direction:column;gap:12px}
.buy-bet{padding:8px 18px 10px;border-radius:14px;background:#06140fd9;border:1px solid color-mix(in srgb,var(--fx-glow) 55%,transparent);box-shadow:0 10px 26px #000a,0 0 22px color-mix(in srgb,var(--fx-glow) 20%,transparent)}
.buy-bet[hidden]{display:none}
.buy-bet .label{color:var(--fx-head)}
.buy-bet .dialog-bet-step{background:#06140fcc;border-color:color-mix(in srgb,var(--fx-glow) 75%,#fff)}

:host([data-reduced=true]) .dialog *,:host([data-reduced=true]) .dialog::after{animation:none!important;transition:none!important}
:host([data-suspended=true]) .dialog *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.dialog *,.dialog .button::after{animation:none!important;transition:none!important}}

/* The approved folder strips share the static symbol's anchor and include their own lettering. */
.symbol.is-scatter[data-scatter-phase]{z-index:5}
.symbol.is-scatter>.strip-fx{filter:drop-shadow(0 3px 1px #031e1790)}
.symbol.is-scatter.scatter-confirmed{z-index:5;filter:drop-shadow(0 0 4px #ffd57acc)}
.symbol.is-super-scatter.scatter-confirmed{filter:drop-shadow(0 0 5px #d39dffcc)}
/* Opening flaps and stretching letters can extend past an outer reel cell once the board has settled. */
.banana-scene[data-presentation=scatter-trigger] .reels,
.banana-scene[data-presentation=scatter-retrigger] .reels{overflow:visible}

/* Scatter anticipation, payline traces and the bazooka column strike. Every page that draws the board loads this sheet, so the
   on-board win pops come with it. */


.board-fx{position:absolute;z-index:3;pointer-events:none;overflow:visible}
.board-fx>*{position:absolute;pointer-events:none}

/* Scatter tease: the board dims around one spotlit column; landed scatters lift above the dim. */
.tease-dim{top:0;height:100%;background:#03140fbd}
.tease-column{top:-2px;width:calc(100% / 6);height:calc(100% + 4px);border:2px solid #ffe08a;border-radius:6px;transform-origin:50% 50%;background:linear-gradient(0deg,#ffc94a38,#ffe8a00c 60%,transparent);box-shadow:0 0 18px #ffc94acc,0 0 42px #ff9f2e77,inset 0 0 22px #ffd97a66}
.tease-spark{width:5px;height:5px;border-radius:50%;background:#fff3c2;box-shadow:0 0 6px 2px #ffc94a,0 0 14px #ff9f2e}
.symbol.tease-scatter{z-index:6}

/* The third scatter: a flash and flying chips. */
.trigger-flash{inset:-6px;border-radius:12px;background:radial-gradient(ellipse at 50% 50%,#fff6d6ee,#ffd35f99 38%,transparent 72%);mix-blend-mode:screen}
.fx-chip{width:8px;height:5px;border-radius:1px;background:linear-gradient(#fff0a0,#e8b33a 55%,#b9761d);box-shadow:0 0 4px #ffcf5a99}

/* Wins, once the winners' loops have played (renderer presentLines): winners lift above their neighbours with a lit gold rim
   as the lines trace, and everything else dims a little. The dim is opacity only, eased so it never blinks. */
.symbol{transition:opacity .22s ease-out}
.reels[data-win=true] .symbol:not(.winning),.reels[data-win=true] :is(.bazooka-column,.grenade-block):not(.winning){opacity:.48}
.symbol.winning{z-index:3}
.symbol.winning::after{border:2px solid #ffe07acc;box-shadow:inset 0 0 16px #ffe0702e,0 0 12px #ffcf4a99,0 0 2px #fff6d0;animation:win-rim .9s ease-in-out infinite alternate}
@keyframes win-rim{from{opacity:.55}to{opacity:1}}
.win-sparkle{width:clamp(9px,2.4cqw,16px);height:clamp(9px,2.4cqw,16px);opacity:0;background:radial-gradient(circle,#fffbe8 0 18%,transparent 22%),conic-gradient(from 0deg,transparent 0 40deg,#ffe58a 45deg,transparent 50deg 130deg,#ffe58a 135deg,transparent 140deg 220deg,#ffe58a 225deg,transparent 230deg 310deg,#ffe58a 315deg,transparent 320deg);filter:drop-shadow(0 0 3px #ffcf4a)}

/* Winning lines are traced through their cells before the symbols clear. */
.payline-trace{left:0;top:0;width:100%;height:100%;overflow:visible}
.payline-trace path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.payline-trace .trace-glow{stroke:#ffc94a;stroke-width:9;opacity:.55;filter:blur(3px)}
.payline-trace .trace-core{stroke:#fff4c8;stroke-width:3}

.bazooka-projectile{position:absolute;width:clamp(35px,6cqw,70px);height:clamp(18px,3cqw,34px);z-index:12;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 0 5px #ffd875)}
.bazooka-projectile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}
.bazooka-projectile:before{content:'';position:absolute;right:85%;top:26%;width:140%;height:48%;border-radius:70% 0 0 70%;background:linear-gradient(90deg,transparent,#ff9a2abb 55%,#fff5a1);box-shadow:0 0 9px #ffc65588}
.bazooka-explosion{z-index:8;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 0 12px #ffc96088)}
.grenade-projectile{position:absolute;width:clamp(24px,4cqw,48px);aspect-ratio:99/97;z-index:12;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 0 4px #ffe0a0)}
.grenade-projectile img{display:block;width:100%;height:100%;object-fit:contain}
.grenade-block{position:absolute;z-index:2;pointer-events:none;display:grid;place-items:center}
/* A square's paper is drawn square in its two-by-two box, its stamps over it in the same space (wild-stamps.js). */
.grenade-block-art,.grenade-block>.wild-stamps{position:absolute;inset:0;width:100%;height:100%}
.grenade-block-art{object-fit:contain}
.symbol.is-grenade-wild .wild-art,.symbol.is-grenade-wild:before{visibility:hidden}
.symbol.is-grenade-wild:after{display:none}
/* Unclipped, so a slammed stamp can burst past the column's edges. The paper stack keeps its own proportions (about one
   cell by five, --paper-aspect from scripts/pack-paper-wilds.py): as tall as the reel, or as wide as 106% of it if that
   comes first, centred. Its box is the drawn paper itself, so a win loop lands on it exactly; its stamps fill its main
   sheet (--face: that sheet's middle down the paper, --face-w its width, --face-aspect its height per width). */
.bazooka-column{position:absolute;top:0;height:100%;z-index:2;pointer-events:none;overflow:visible;container-type:size;
  --paper-w:min(106cqw,100cqh * var(--paper-aspect,.204));--paper-h:calc(var(--paper-w) / var(--paper-aspect,.204))}
.bazooka-column-art{position:absolute;left:calc(50% - var(--paper-w) / 2);top:calc(50% - var(--paper-h) / 2);width:var(--paper-w);height:var(--paper-h)}
.bazooka-column>.wild-stamps{position:absolute;width:calc(var(--paper-w) * var(--face-w,.84));height:calc(var(--paper-w) * var(--face-w,.84) * var(--face-aspect,1.3));
  left:calc(50% - var(--paper-w) * var(--face-w,.84) / 2);top:calc(50% + (var(--face,.462) - .5) * var(--paper-h) - var(--paper-w) * var(--face-w,.84) * var(--face-aspect,1.3) / 2)}
.symbol.is-bazooka-wild .wild-art,.symbol.is-bazooka-wild:before{visibility:hidden}
.symbol.is-bazooka-wild:after{display:none}

/* Paper on the desk. A wild's paper, single, square or column, casts a short contact shadow onto the felt (tight where it
   touches, a little softer round it), drawn on the paper and on its flutter alike so the hand-off never shows; the shadow
   sits on the paper itself, not its host, so a host's brightness or swell never drops it. No glow and no light play over
   it: a value's colour lives in its stamps' ink. Only the rare 200×+ and 1,000×+ values keep a cue, a faint underglow in
   their tier's colour, close to the paper. A winner brightens a touch; its loop and the line traces do the rest. */
.reels,.stamp-lab{--paper-shadow:drop-shadow(0 1px .5px #031e17a6) drop-shadow(0 4px 4px #031e1766)}
:is(.grenade-block-art,.grenade-block>.win-anim,.bazooka-column-art,.bazooka-column>.win-anim){filter:var(--paper-shadow)}
:is(.grenade-block,.bazooka-column).winning{filter:brightness(1.05)}
.symbol.is-wild.winning .wild-art{filter:brightness(1.05) var(--paper-shadow)}
:is(.symbol.is-wild[data-radiance="1"] .wild-art,:is(.grenade-block,.bazooka-column)[data-radiance="1"]>:is(.grenade-block-art,.bazooka-column-art,.win-anim)){filter:var(--paper-shadow) drop-shadow(0 0 4px color-mix(in srgb,var(--wild-glow) 40%,transparent))}
:is(.symbol.is-wild[data-radiance="2"] .wild-art,:is(.grenade-block,.bazooka-column)[data-radiance="2"]>:is(.grenade-block-art,.bazooka-column-art,.win-anim)){filter:var(--paper-shadow) drop-shadow(0 0 6px color-mix(in srgb,var(--wild-glow) 55%,transparent))}

/* Symbol animation strips (sprites.js): laid over the art, stepped a whole frame at a time. The puff grows past its cell. */
.strip-fx{position:absolute;display:block;pointer-events:none;background-repeat:no-repeat;background-position:0 0}
/* Win loops (win-anims.js): laid over the art by its content box, stepped a whole frame at a time; a symbol's keeps the art's
   drop shadow and winning glow, so the hand-off at each end is invisible. */
.win-anim{position:absolute;display:block;pointer-events:none;background-repeat:no-repeat;background-position:0 0}
.symbol>.win-anim{filter:drop-shadow(0 3px 1px #031e1790)}
.symbol.winning>.win-anim{filter:brightness(1.1) drop-shadow(0 0 6px #ffe76d80)}
.fx-cell{position:absolute}
.fx-cell>.strip-fx{transform:scale(1.3)}
/* Super upgrade (renderer superUpgrade): the rifle's trace is a hot violet-white line, and the banner slams over the reels. */
.bullet-trail.sniper-trail{stroke:#fff4ff;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 3px #e2b8ff) drop-shadow(0 0 10px #a35cff)}
.upgrade-banner{position:absolute;left:50%;top:50%;z-index:9;transform:translate(-50%,-50%) rotate(-3deg);padding:.5em 1.4em .6em;border-radius:12px;text-align:center;white-space:nowrap;pointer-events:none;background:linear-gradient(#5b2a8f,#3a1763);border:3px solid #e6c4ff;box-shadow:0 0 0 4px #2a0f48,0 10px 30px #000a,0 0 40px #a35cffaa;color:#fff3c4;font-size:clamp(11px,2.2cqw,26px)}
.upgrade-banner strong{display:block;font:900 2.3em/1 'Arial Black',Arial;letter-spacing:.04em;color:#ffd75e;-webkit-text-stroke:2px #2a0f48;paint-order:stroke fill;text-shadow:0 4px #2a0f48,0 0 24px #ffcf5a88}
.upgrade-banner span{display:block;margin-top:.45em;font:800 .95em 'Arial Black',Arial;letter-spacing:.14em}
/* The banner's lettering breathes and a glint crosses it twice while it holds; the band is clipped to the banner. */
.upgrade-banner{overflow:hidden;isolation:isolate}
.upgrade-banner::after{content:'';position:absolute;inset:-10% 0;z-index:1;pointer-events:none;translate:-110% 0;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 30%,#fff3 42%,#ffffffb0 50%,#fff3 58%,transparent 70%);animation:banner-glint .75s .3s cubic-bezier(.45,0,.55,1) 2}
.upgrade-banner strong{animation:banner-breathe .6s ease-in-out infinite alternate}
@keyframes banner-glint{to{translate:110% 0}}
@keyframes banner-breathe{from{scale:1}to{scale:1.06}}
#game[data-reduced=true] .upgrade-banner::after{animation:none;opacity:0}

/* A fixed scaffold lets illustrations accumulate while their existing timelines keep playing. */
@property --glow{syntax:'<color>';inherits:true;initial-value:#ffc93c}
@property --secondary{syntax:'<color>';inherits:true;initial-value:#fff3b0}
.banana-celebration{--glow:#ffc93c;--secondary:#fff3b0;--title-top:0%;--title-height:39%;--title-left:5%;--title-width:90%;isolation:isolate;-webkit-tap-highlight-color:transparent;overflow:hidden;background:rgb(3 9 11/.45);transition:--glow .45s,--secondary .45s}
.banana-celebration[data-stage=great]{--glow:#ff9a1c;--secondary:#ffe18a}
.banana-celebration[data-stage=huge]{--glow:#ff4a14;--secondary:#ffad36}
.banana-celebration[data-stage=insane]{--glow:#d78cff;--secondary:#f0c6ff}
.banana-celebration[data-stage=maximum]{--glow:#ffd84a;--secondary:#e2b5ff}
.banana-celebration{position:fixed;inset:0;z-index:2147482000;display:block;width:auto;height:auto;padding:0;background:radial-gradient(ellipse 80% 75% at var(--cx,50%) var(--cy,50%),rgb(3 9 11/.35),rgb(3 9 11/.68));-webkit-backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))));backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.banana-celebration{background:rgb(3 9 11/.7)}}
.banana-win-content{position:relative;z-index:4;width:var(--scene-width,100%);aspect-ratio:var(--scene-ratio,1.1);height:auto;container-type:inline-size;pointer-events:none;isolation:isolate}
.banana-celebration .banana-win-content{position:absolute;left:var(--art-x,var(--cx));top:var(--art-y,var(--cy));translate:-50% -50%}
.banana-win-art{position:absolute;display:block;background:center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 5px 3px #170b06aa)}
.banana-win-art[hidden]{display:none!important}
.banana-win-piece,.banana-win-frames{display:block;position:absolute;inset:0;background:center/contain no-repeat}
.banana-win-frames{background-position:0 0}
.banana-win-prop-drift{position:absolute;inset:0;display:block;transform-origin:50% 65%}
.banana-win-halo{inset:-6%;z-index:-4;background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 70%,transparent),transparent 66%);filter:blur(14px)}
.banana-win-halo-core{inset:15% 13%;z-index:-3;background:radial-gradient(ellipse,color-mix(in srgb,var(--secondary) 75%,transparent),color-mix(in srgb,var(--glow) 35%,transparent) 40%,transparent 70%);filter:blur(7px)}
.banana-win-rays{left:8%;top:7%;width:84%;aspect-ratio:1;z-index:-2;border-radius:50%;opacity:.18;background:repeating-conic-gradient(from 0deg,transparent 0deg 14deg,var(--secondary) 16deg 20deg,transparent 23deg 30deg);mask-image:radial-gradient(circle,#0003 12%,#000 28%,transparent 67%);filter:blur(3px)}
/* Both letter planes occupy the same box. Only lettering changes during a tier transition. */
.banana-celebration[data-stage] .banana-win-title{position:absolute;left:var(--title-left);top:var(--title-top);width:var(--title-width);height:var(--title-height);display:block;z-index:8;margin:0;padding:0;font-size:0;line-height:0;color:transparent;background:none;-webkit-text-stroke:0;text-shadow:none;animation:none;filter:drop-shadow(0 5px 2px #210c05bb) drop-shadow(0 0 14px color-mix(in srgb,var(--glow) 65%,transparent));transform-origin:50% 65%;transition:top .7s cubic-bezier(.22,.8,.22,1),left .7s cubic-bezier(.22,.8,.22,1),width .7s cubic-bezier(.22,.8,.22,1),height .7s cubic-bezier(.22,.8,.22,1)}
.banana-win-title-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.banana-win-title-art{display:block;width:100%;height:100%;position:relative}
.banana-win-title-plane{display:block;position:absolute;inset:0;background:var(--letter-art) center/contain no-repeat}
.banana-win-title-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 42%,#fff8 49%,transparent 56%) -100% 0/300% 100% no-repeat;mask:var(--title-art) center/contain no-repeat}
/* A small increase over the original frame gives the bounce room without hiding the gem. */
.banana-win-payout{position:absolute;left:14%;top:46%;width:72%;height:22%;z-index:7;display:flex;align-items:center;justify-content:center;background:center/100% 100% no-repeat;transform-origin:50% 50%;filter:drop-shadow(0 6px 3px #160904aa) drop-shadow(0 0 13px color-mix(in srgb,var(--glow) 55%,transparent))}
.banana-win-amount-impact{display:flex;align-items:center;justify-content:center;width:100%;transform-origin:50% 50%}
.banana-celebration .banana-win-amount{--amount-size:9cqw;display:block;position:relative;max-width:82%;font-size:min(var(--amount-size),calc(57cqw / (var(--amount-length,10) * .67)));line-height:1.05;white-space:nowrap;overflow-wrap:normal;padding:0;font-family:'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;-webkit-text-stroke:0;text-shadow:0 .05em 0 #1a1003,0 .08em .25em #000c,0 0 .4em color-mix(in srgb,var(--glow,#ffd277) 45%,transparent)}
/* Win amounts are solid cream in a heavy sans with even-width digits, like the buy price and the bonus total: the old
   gold gradient ran a dark band through every digit. */
/* The treasure is grounded against the viewport edge and never re-enters during the climb. */
.banana-win-ground{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.banana-win-ground::before{content:'';position:absolute;bottom:0;left:0;right:0;height:min(16vh,130px);background:linear-gradient(transparent,#170e0899 70%,#0b0806d9)}
/* The pile rises from below the screen: a third of it is always cut off by the edge (the owner's call), at every size, and its
   art sits on the box's foot, so even its highest hop (win-art.js, under 8% of it) never shows its bottom edge. */
.banana-win-treasure{left:var(--art-x,50%);bottom:-4px;width:var(--ground-width,85%);aspect-ratio:900/281;translate:-50% 34%;z-index:3;transform-origin:50% 100%;filter:drop-shadow(0 8px 5px #060401)}
.banana-win-treasure>.banana-win-piece{transform-origin:50% 100%;background-position:50% 100%}
.banana-win-revolver-left,.banana-win-revolver-right{top:26%;width:32%;aspect-ratio:1;z-index:0;transform-origin:50% 85%;filter:drop-shadow(0 5px 3px #170b06aa) drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 35%,transparent))}
.banana-win-revolver-left{left:8%;rotate:-8deg}.banana-win-revolver-right{right:8%;scale:-1 1;rotate:8deg}
/* The grenades sit in front of the pile (the owner's call). */
.banana-win-grenade-left,.banana-win-grenade-right{--grenade-spread:min(calc(var(--ground-width) * .315),28vw);bottom:4%;width:calc(var(--ground-width) * .18);height:calc(var(--ground-width) * .27);translate:-50% 0;z-index:4;transform-origin:50% 80%}
.banana-win-grenade-left{left:calc(var(--art-x,50%) - var(--grenade-spread));rotate:-15deg}.banana-win-grenade-right{left:calc(var(--art-x,50%) + var(--grenade-spread));scale:-1 1;rotate:15deg}
.banana-win-fuse-glint{position:absolute;left:17%;top:7%;width:15%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fffad9 12%,#ffdf70 25%,#ff851c66 55%,transparent 72%);filter:drop-shadow(0 0 5px #ffb63c)}
.banana-win-fuse-glint[data-fuse=rear]{left:86%;top:16%}
.banana-win-crest{left:22%;top:35%;width:56%;height:44%;z-index:2;filter:drop-shadow(0 6px 4px #07232eaa) drop-shadow(0 0 19px color-mix(in srgb,var(--glow) 60%,transparent))}
.banana-win-crest-impact{position:absolute;inset:0;display:block;transform-origin:50% 50%}
.banana-win-impact-flash,.banana-win-impact-ring{position:absolute;left:50%;top:57%;width:86%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;z-index:1}
.banana-win-impact-flash{background:radial-gradient(circle,#fff7c9 0%,color-mix(in srgb,var(--secondary) 75%,transparent) 22%,color-mix(in srgb,var(--glow) 50%,transparent) 38%,transparent 67%);mix-blend-mode:screen}
.banana-win-impact-ring{border-radius:50%;border:2px solid color-mix(in srgb,var(--secondary) 75%,transparent);box-shadow:0 0 12px var(--glow),inset 0 0 12px var(--glow);mask-image:conic-gradient(#000,transparent 12%,#000 24%,transparent 38%,#000 50%,transparent 64%,#000 76%,transparent 89%,#000)}
.banana-win-sparks{left:50%;top:57%;width:0;height:0;z-index:1;filter:none}
.banana-win-spark{position:absolute;left:0;top:0;width:var(--spark-length,1.5cqw);height:max(1px,.21cqw);border-radius:50%;opacity:0;background:linear-gradient(90deg,#ff841c00,#ffb32f 35%,#fff1a3 80%,#fff 100%);box-shadow:0 0 4px #ffbf48;transform-origin:100% 50%}
.banana-win-dial{left:11%;top:50%;width:78%;aspect-ratio:1;translate:0 -50%;z-index:0;filter:none}
.banana-win-dial-rotor{position:absolute;inset:0;display:block;background:center/contain no-repeat;transform-origin:50% 50%;will-change:transform}
.banana-win-crest-core{inset:0;z-index:1;filter:none}
.banana-win-core-plane{position:absolute;inset:0;display:block;background:center/contain no-repeat}
.banana-win-gem-shine{position:absolute;inset:0;clip-path:polygon(50% 5%,70% 50%,50% 95%,30% 50%);background:linear-gradient(110deg,transparent 43%,#fff9 49%,transparent 55%) -100% 0/300% 100% no-repeat;mix-blend-mode:screen;opacity:.65}
.banana-win-glint{z-index:10;width:5%;aspect-ratio:1;background:radial-gradient(circle,#fff 0%,#fff 9%,transparent 55%);clip-path:polygon(50% 0,59% 40%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 40%);filter:drop-shadow(0 0 6px var(--secondary));opacity:0}
.glint-0{left:32%;bottom:8%;width:2.5%}.glint-1{left:68%;bottom:6%;width:2.5%}.glint-2{left:76%;top:31%}.glint-3{left:16%;top:47%}.glint-4{left:82%;top:42%}.glint-5{left:63%;top:40%;width:4%}.glint-6{left:36%;top:32%}.glint-7{left:61%;top:37%}
.banana-win-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.banana-win-shower{position:absolute;inset:0;pointer-events:none}
.banana-celebration .banana-win-shower{inset:auto;left:var(--cx);top:var(--cy);width:0;height:0}
.banana-win-coin{position:absolute;left:50%;top:50%;width:var(--s,44px);height:var(--s,44px);margin:calc(var(--s,44px)/-2) 0 0 calc(var(--s,44px)/-2);opacity:0;object-fit:contain;will-change:transform;user-select:none;image-rendering:auto}
.banana-celebration[data-reduced=true] .banana-win-frames{background-image:var(--sprite-poster)!important;background-size:100% 100%!important;background-position:0 0!important}
.banana-celebration[data-reduced=true] .banana-win-glint{opacity:.7}
.banana-celebration[data-reduced=true] .banana-win-halo{opacity:.5}
.banana-celebration[data-reduced=true] :is(.banana-win-title-shine,.banana-win-gem-shine,.banana-win-impact-flash,.banana-win-impact-ring,.banana-win-sparks){display:none}
.banana-celebration[data-reduced=true] :is(.banana-win-title,.banana-win-payout,.banana-win-grenade-left,.banana-win-grenade-right){transition:none}
@media (prefers-reduced-motion:reduce){.banana-win-title-shine{display:none}}
/* Short landscape keeps the same layout for every stage, using the one-line Maximum title. */
.banana-celebration[data-layout=wide]{--title-top:0%;--title-height:35%}


.banana-celebration[data-layout=wide] .banana-win-crest{top:29%;height:51%;width:50%;left:25%}
.banana-celebration[data-layout=wide] .banana-win-payout{top:42.5%;height:24%}
.banana-celebration[data-layout=wide] :is(.banana-win-impact-flash,.banana-win-impact-ring){top:54.5%}
.banana-celebration[data-layout=wide] :is(.banana-win-revolver-left,.banana-win-revolver-right){top:25%;width:27%}
.banana-celebration[data-layout=wide] .banana-win-sparks{top:54.5%}
/* Portrait uses the full screen height; the separately grounded coins retain their scale. */
.banana-celebration[data-layout=portrait]{--title-top:8%;--title-height:28%;--title-left:0%;--title-width:100%;--spark-reach:1.65}
.banana-celebration[data-layout=portrait] .banana-win-crest{left:-6%;top:30%;width:112%;height:50%}
.banana-celebration[data-layout=portrait] .banana-win-payout{left:-2%;top:48%;width:104%;height:14%}
/* Long totals leave side padding for the combined idle and final-impact stretch. */
.banana-celebration[data-layout=portrait] .banana-win-amount{--amount-size:13cqw;font-size:min(var(--amount-size),calc(72cqw / (var(--amount-length,10) * .67)))}
.banana-celebration[data-layout=portrait] :is(.banana-win-revolver-left,.banana-win-revolver-right){top:32%;width:60%}
.banana-celebration[data-layout=portrait] .banana-win-revolver-left{left:-3%}
.banana-celebration[data-layout=portrait] .banana-win-revolver-right{right:-3%}
.banana-celebration[data-layout=portrait] :is(.banana-win-impact-flash,.banana-win-impact-ring,.banana-win-sparks){top:55%}
.banana-celebration[data-layout=portrait] :is(.banana-win-grenade-left,.banana-win-grenade-right){--grenade-spread:21vw;width:calc(var(--ground-width) * .27);height:calc(var(--ground-width) * .405);bottom:3%}
.banana-celebration[data-mobile=landscape]{--title-top:-2%;--title-height:42%;--title-left:3%;--title-width:94%}
.banana-celebration[data-mobile=landscape] .banana-win-crest{left:23%;top:25%;width:54%;height:64%}
.banana-celebration[data-mobile=landscape] .banana-win-payout{left:9%;top:41%;width:82%;height:32%}
.banana-celebration[data-mobile=landscape] .banana-win-amount{--amount-size:10cqw;font-size:min(var(--amount-size),calc(56cqw / (var(--amount-length,10) * .67)))}
.banana-celebration[data-mobile=landscape] :is(.banana-win-revolver-left,.banana-win-revolver-right){top:20%;width:32%}
.banana-celebration[data-mobile=landscape] :is(.banana-win-impact-flash,.banana-win-impact-ring,.banana-win-sparks){top:57%}
.banana-celebration[data-mobile=landscape] :is(.banana-win-grenade-left,.banana-win-grenade-right){width:calc(var(--ground-width) * .23);height:calc(var(--ground-width) * .345);bottom:2%}

.banana-celebration{z-index:2147482000;cursor:pointer;user-select:none}
.banana-win-content{padding:0;text-align:center;box-sizing:border-box}
.banana-celebration[data-stage=mega]{--glow:#ff9a1c;--secondary:#ffe18a}
.banana-celebration[data-stage=epic]{--glow:#d78cff;--secondary:#f0c6ff}
.banana-win-dossier-left,.banana-win-dossier-right{top:52%;width:29%;aspect-ratio:4/3;z-index:0;opacity:.9;transform-origin:50% 70%}
.banana-win-dossier-left{left:3%;rotate:-18deg}.banana-win-dossier-right{right:3%;rotate:16deg;scale:-1 1}
.banana-celebration-caption{position:absolute;left:15%;top:73%;width:70%;z-index:9;font:800 clamp(8px,1.8cqw,13px)/1.2 system-ui;letter-spacing:.16em;color:#fff0c0;text-shadow:0 2px 3px #000;text-align:center;pointer-events:none}
.banana-celebration-caption:empty,.banana-celebration-kicker:empty{display:none}
.banana-celebration[data-layout=portrait] :is(.banana-win-dossier-left,.banana-win-dossier-right){top:64%;width:54%}
.banana-celebration[data-layout=portrait] .banana-win-dossier-left{left:-10%}
.banana-celebration[data-layout=portrait] .banana-win-dossier-right{right:-10%}
.banana-celebration[data-layout=portrait] .banana-celebration-caption{top:66%;font-size:10px}
.banana-celebration[data-layout=wide] .banana-celebration-caption{top:74%}
.banana-celebration[data-suspended=true] *{animation-play-state:paused!important}
.banana-celebration[data-reduced=true] *{animation:none!important;transition:none!important}

.banana-celebration[data-layout=wide] .banana-win-title-plane[data-title=maximum]{background-image:var(--title-wide-art)}
.banana-celebration[data-layout=wide] .banana-win-title[data-title=maximum] .banana-win-title-shine{mask-image:var(--title-wide-art)}

/* The follow spot (win-spotlight.js): the scrim is its own layer, so it can leave a hole over the hitman, unblurred, that the
   lid keeps as dark and soft as the rest until the count lands; then the lid lifts and a beam comes down on him as his celebration
   starts. Behind every piece of the card (negative z inside the overlay's isolation); opacity only. */
.banana-celebration[data-spotlight=true]{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.bw-scrim,.bw-lid,.bw-beam{position:absolute;pointer-events:none}
.bw-scrim{inset:0;z-index:-3;background:radial-gradient(ellipse 80% 75% at var(--cx,50%) var(--cy,50%),rgb(3 9 11/.35),rgb(3 9 11/.68));-webkit-backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))));backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bw-scrim{background:rgb(3 9 11/.7)}}
.banana-celebration[data-spot=true] .bw-scrim{-webkit-mask:radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),transparent 52%,#000 100%);mask:radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),transparent 52%,#000 100%)}
.bw-lid{z-index:-2;left:calc(var(--spot-x) - var(--spot-rx));top:calc(var(--spot-y) - var(--spot-ry));width:calc(var(--spot-rx) * 2);height:calc(var(--spot-ry) * 2);border-radius:50%;background:radial-gradient(closest-side,rgb(3 9 11/.6) 0 62%,rgb(3 9 11/.4) 82%,transparent);-webkit-backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))));backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))))}
.bw-beam{z-index:-1;left:calc(var(--spot-x) - var(--spot-rx) * 1.35);top:0;width:calc(var(--spot-rx) * 2.7);height:calc(var(--spot-y) + var(--spot-ry) * .98);transform-origin:50% 0;opacity:0;
  background:radial-gradient(ellipse 42% 9% at 50% 93%,rgb(255 236 190/.3),transparent 70%),linear-gradient(rgb(255 238 196/0),rgb(255 238 196/.12) 55%,rgb(255 238 196/.18));clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  -webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.banana-celebration[data-revealed=true] .bw-lid{opacity:0}.banana-celebration[data-revealed=true] .bw-beam{opacity:1}
.banana-celebration[data-spot=false] :is(.bw-lid,.bw-beam){display:none}
/* His stand-in in front of the card's art once the lights are up (over the art, under nothing it shows). */
.bw-hitman{position:absolute;z-index:5;pointer-events:none}


/* Bonus transition (feature-transition.js): classified files bury the board, a cover sheet is stamped, a gust clears it.
   Pieces are positioned by transform only (left/top stay 0), so the flurry never touches layout. */
.banana-transition{position:fixed;inset:0;z-index:2147481000;display:block;margin:0;padding:0;border:0;overflow:hidden;contain:strict;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  --stamp:#cd2f28;--glow:#ffcf5a;--scrim-in:#0f2d22d9;--scrim-out:#030c08f5}
.banana-transition[data-mode=super]{--stamp:#8d35d2;--glow:#cf86ff;--scrim-in:#2a1240d9;--scrim-out:#0b0412f5}
.bt-dim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 70% 65% at var(--cx) var(--cy),var(--scrim-in),var(--scrim-out))}
/* A desk lamp's pool of light on the pile; violet for Super. */
.bt-glow{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--cover-w) * 1.9);aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 42%,transparent),color-mix(in srgb,var(--glow) 12%,transparent) 45%,transparent 68%)}
.bt-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:var(--cx) var(--cy)}
.bt-piece,.bt-cover,.bt-chip{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.bt-piece{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.bt-cover{width:var(--cover-w);height:var(--cover-h)}
.bt-cover>img{display:block;width:100%;height:100%;max-width:none}
.bt-chip{border:1px solid #6d5a2c;border-radius:1px;background:linear-gradient(#fffbe9,#e8dbb6)}

/* The rubber stamp: a double-ruled box of ink with a speckled texture (a static mask), slightly askew. */
.bt-stamp{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:.04em;padding:.2em .42em .24em;border:.085em solid var(--stamp);border-radius:.14em;box-shadow:inset 0 0 0 .045em #f8f1dc,inset 0 0 0 .09em var(--stamp);
  color:var(--stamp);font:900 var(--stamp-size,40px)/.98 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.01em;white-space:nowrap;text-align:center;opacity:0;transform:translate(-50%,-50%) rotate(-8deg);
  -webkit-mask:var(--grunge) 0 0/7em 7em;mask:var(--grunge) 0 0/7em 7em}
.bt-stamp small{font:900 .3em/1.2 'Arial Black',Arial,sans-serif;letter-spacing:.34em;margin-right:-.34em}
.bt-stamp b{font:inherit}

/* Behind the bonus intro (feature-transition.js tucks the pile into the shell's dialog layer, whose shadow root links this
   sheet too): under the modal, over the game, offset back to the viewport. The layer's own dark blur gives way to the
   pile's scrim, and a light hush settles over the papers so the modal reads first. */
.overlay>.banana-transition{position:absolute;inset:auto;left:var(--hold-x,0px);top:var(--hold-y,0px);width:var(--hold-w,100vw);height:var(--hold-h,100vh);zoom:var(--hold-zoom,1);z-index:0;cursor:auto}
.overlay:has(>.banana-transition){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bt-hush{position:absolute;inset:0;opacity:0;pointer-events:none;background:#020806;transition:opacity .35s ease}
.banana-transition[data-holding=true] .bt-hush{opacity:.3}

/* Reduced motion: no flying paper; the stamped card fades in over the dimmed game (backwards fill only, so leaving still
   fades it out) and stays behind the intro until Continue. */
.banana-transition[data-reduced=true]{animation:bt-in .15s ease-out backwards;transition:opacity .2s ease}
.banana-transition[data-reduced=true][data-leaving=true]{opacity:0}
.banana-transition[data-reduced=true] .bt-dim{opacity:1}
.banana-transition[data-reduced=true] .bt-cover{opacity:1;transform:translate3d(var(--cx),var(--cy),0) translate(-50%,-50%) rotate(-3deg)}
.banana-transition[data-reduced=true] .bt-stamp{opacity:.96}
@keyframes bt-in{from{opacity:0}}

/* Spins added during the bonus (slapPaper): a stamped case sheet slaps onto the reels and is flicked away. Only the sheet
   takes taps (to flick it early); the rest of the screen stays live. */
.banana-slap{position:fixed;inset:0;z-index:2147481000;overflow:hidden;contain:strict;pointer-events:none;--stamp:#cd2f28}
.banana-slap[data-mode=super]{--stamp:#8d35d2}
.bs-card{position:absolute;left:0;top:0;width:var(--card-w);height:var(--card-h);opacity:0;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bs-card>img{display:block;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none}
.bt-stamp .bs-count{font-size:1.75em;line-height:.95;letter-spacing:-.01em}
.banana-slap[data-reduced=true] .bs-card{opacity:1;transform:translate3d(var(--cx),var(--cy),0) translate(-50%,-50%) rotate(-3deg);animation:bt-in .15s ease-out backwards;transition:opacity .15s ease}
.banana-slap[data-reduced=true][data-leaving=true] .bs-card{opacity:0}
.banana-slap[data-reduced=true] .bt-stamp{opacity:.96}
/* The board's live callout still announces the award to screen readers while the sheet shows it. */
.callout[data-quiet=true]{opacity:0}

/* Each accepted folder opens once on the trigger strip's flap frames; illustrated numbers spin inside its page. */
.scatter-wheels-overlay{position:fixed;inset:0;z-index:2147480999;overflow:hidden;pointer-events:auto;color:#fff0bc;font-family:'Arial Black','Avenir Next',Arial,sans-serif}
.scatter-wheels-overlay[data-reduced=true] *{transition:none!important}
.fw-dim{position:absolute;inset:0;background:radial-gradient(ellipse 75% 65% at 50% 45%,#08241aa8,#020c08e0 78%)}
.scatter-wheels-overlay[data-mode=super] .fw-dim{background:radial-gradient(ellipse 75% 65% at 50% 45%,#1d0e30a8,#09040fe0 78%)}
.folder-spin-wheel{position:absolute;transition:filter .3s ease-out}
.scatter-wheels-overlay[data-phase] .folder-spin-wheel{filter:drop-shadow(0 0 5px #ffd57a88)}
.scatter-wheels-overlay[data-phase] .folder-spin-wheel[data-kind=super]{filter:drop-shadow(0 0 5px #d39dff88)}
.scatter-wheels-overlay[data-phase=spinning] .folder-spin-wheel:not([data-phase]){filter:brightness(.68) saturate(.8)}
.scatter-wheels-overlay .folder-spin-wheel[data-phase=spinning]{z-index:10;filter:drop-shadow(0 0 10px #ffd860c0) drop-shadow(0 4px 4px #000a)}
.scatter-wheels-overlay .folder-spin-wheel[data-kind=super][data-phase=spinning]{filter:drop-shadow(0 0 10px #d6a6ffc0) drop-shadow(0 4px 4px #000a)}
.scatter-wheels-overlay[data-phase=closing] .folder-spin-wheel{filter:none}
.fw-sprite{position:absolute;inset:0;background-repeat:no-repeat;filter:drop-shadow(0 3px 1px #031e1790)}
/* One clean window over the open page: dark green, a thin gold rim, one face tall. */
.fw-window{position:absolute;left:25%;top:33%;width:50%;height:var(--fw-win);z-index:2;opacity:0;overflow:hidden;isolation:isolate;border-radius:8%/10%;background:#0d2b1f;box-shadow:0 0 0 2px #e8c467,0 3px 0 2px #6b4a12,inset 0 4px 6px #0009,inset 0 -4px 6px #0009}
.folder-spin-wheel[data-kind=super] .fw-window{background:#24123a;box-shadow:0 0 0 2px #d4adf5,0 3px 0 2px #4a2a6b,inset 0 4px 6px #0009,inset 0 -4px 6px #0009}
/* WebKit stops clipping a child that animates on its own layer once its overflow:hidden parent has rounded corners, which let
   the whole number strip show down the board. An explicit clip-path, backed by a mask (which WebKit always applies to
   composited children), clips it on the strip's own box; it sits here rather than on .fw-window so the window's gold rim (a box-shadow) is not cut off. */
.fw-reel{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 round 8% / 10%);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.fw-strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.fw-face{height:var(--fw-step);display:grid;place-items:center}
/* The text stays in the DOM for award semantics; the transparent glyph supplies all visible lettering. */
.fw-num{display:block;width:88%;height:82%;font-size:0;background:center/contain no-repeat}
.fw-face[data-value="1"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-1.webp')}
.fw-face[data-value="2"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-2.webp')}
.fw-face[data-value="3"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-3.webp')}
.fw-face[data-value="4"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-4.webp')}
.fw-face[data-value="5"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-5.webp')}
.fw-face[data-value="6"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-6.webp')}
.fw-face[data-value="7"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-7.webp')}
.fw-face[data-value="8"] .fw-num{background-image:url('./assets/folder-wheel-v1/numeral-8.webp')}
.fw-shine{position:absolute;top:-10%;bottom:-10%;left:0;width:45%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#fff7d8b0 50%,transparent);mix-blend-mode:screen;transform:translateX(-170%) skewX(-18deg)}
/* The lock: a quick flash inside the window, and a glow behind it that heats up as the drum slows. */
.fw-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#fff8dc,#ffe28a80 55%,transparent 80%);mix-blend-mode:screen}
.fw-heat{position:absolute;left:25%;top:33%;width:50%;height:var(--fw-win);z-index:1;opacity:0;pointer-events:none;border-radius:8%/10%;box-shadow:0 0 calc(var(--fw-step) * .22) calc(var(--fw-step) * .06) #ffc93c,0 0 calc(var(--fw-step) * .5) calc(var(--fw-step) * .1) #ff9d2a80}
.folder-spin-wheel[data-kind=super] .fw-heat{box-shadow:0 0 calc(var(--fw-step) * .22) calc(var(--fw-step) * .06) #d99bff,0 0 calc(var(--fw-step) * .5) calc(var(--fw-step) * .1) #a45cf080}
/* Generated ink alpha preserves the worn double rule and lettering in red dossier ink. */
.fw-stamp{position:absolute;left:0;right:0;top:78%;z-index:3;width:60%;height:21%;margin:0 auto;font-size:0;background-color:#cd2f28;-webkit-mask:url('./assets/folder-wheel-v1/stamp-spins.webp') center/contain no-repeat;mask:url('./assets/folder-wheel-v1/stamp-spins.webp') center/contain no-repeat;mix-blend-mode:multiply;opacity:.94;pointer-events:none}
.scatter-wheels-overlay[data-retrigger=true] .fw-stamp{width:65%;-webkit-mask-image:url('./assets/folder-wheel-v1/stamp-plus-spins.webp');mask-image:url('./assets/folder-wheel-v1/stamp-plus-spins.webp')}
.fw-dust{position:absolute;left:14%;right:14%;top:86%;height:14%;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(ellipse 28% 60% at 12% 60%,#fbefc8d0,transparent 70%),radial-gradient(ellipse 28% 60% at 88% 60%,#fbefc8d0,transparent 70%),radial-gradient(ellipse 30% 45% at 50% 85%,#f3e2b0a0,transparent 70%)}

/* Ambient life over the safehouse art. Positions are percentages of the background image (see ambience.js). */
#game>slot-game-shell{position:relative;z-index:1}
.banana-ambience{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ba-canvas{position:absolute}
.ba-canvas>i{position:absolute;display:block}

/* The ceiling lamp breathes; dust drifts slowly through its light. */
.ba-ceiling{left:0;top:0;width:100%;height:22%;background:radial-gradient(ellipse 9% 40% at 19% 24%,#ffd98a22,transparent 85%),radial-gradient(ellipse 9% 40% at 80% 35%,#ffd98a22,transparent 85%);mix-blend-mode:screen;animation:ba-breathe 5.5s ease-in-out infinite alternate}
.ba-dust{left:4%;top:14%;width:22%;height:42%}
.ba-dust b{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:#ffe9b0;opacity:0;box-shadow:0 0 4px #ffd98a;animation:ba-dust 16s linear infinite}
.ba-dust b:nth-child(1){left:12%;animation-delay:-2s}.ba-dust b:nth-child(2){left:28%;animation-duration:19s;animation-delay:-9s}
.ba-dust b:nth-child(3){left:41%;animation-duration:14s;animation-delay:-5s}.ba-dust b:nth-child(4){left:55%;animation-duration:21s;animation-delay:-14s}
.ba-dust b:nth-child(5){left:67%;animation-delay:-11s}.ba-dust b:nth-child(6){left:79%;animation-duration:18s;animation-delay:-3s}
.ba-dust b:nth-child(7){left:34%;animation-duration:23s;animation-delay:-17s;width:2px;height:2px}.ba-dust b:nth-child(8){left:88%;animation-duration:15s;animation-delay:-7s;width:2px;height:2px}

/* The desk lamp flickers a little, like a warm old bulb. */
.ba-desk{left:85%;top:34%;width:12%;height:19%;background:radial-gradient(ellipse 50% 50% at 50% 45%,#ffe2a066,#ffcf6a22 45%,transparent 72%);mix-blend-mode:screen;animation:ba-flicker 4.3s linear infinite}

/* Sunlight glitters on the sea under the setting sun. */
.ba-sea{left:7.4%;top:39%;width:12%;height:7%;background:repeating-linear-gradient(90deg,transparent 0 9%,#ffe0a855 10% 12%,transparent 13% 21%);mask-image:radial-gradient(ellipse 45% 50% at 52% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 45% 50% at 52% 40%,#000 30%,transparent 75%);mix-blend-mode:screen;animation:ba-glitter 6s ease-in-out infinite alternate}

/* The generated night scenes already include stars and shoreline lights. */
.banana-ambience[data-feature=bonus] .ba-sea{filter:hue-rotate(125deg);opacity:.6}
.banana-ambience[data-feature=super] .ba-ceiling{filter:brightness(1.15)}

@keyframes ba-breathe{from{opacity:.65}to{opacity:1}}
@keyframes ba-flicker{0%,100%{opacity:.9}8%{opacity:.7}10%{opacity:.95}42%{opacity:.85}44%{opacity:.6}46%{opacity:.92}70%{opacity:.8}}
@keyframes ba-glitter{from{opacity:.35;transform:translateX(-3%)}to{opacity:.9;transform:translateX(3%)}}
@keyframes ba-dust{0%{transform:translate(0,0);opacity:0}10%{opacity:.7}50%{transform:translate(8px,-45%)}90%{opacity:.5}100%{transform:translate(-6px,-95%);opacity:0}}

/* Phones in portrait crop the window and desk away. */
@media(orientation:portrait){.ba-desk,.ba-sea{display:none}}
@media(prefers-reduced-motion:reduce){.banana-ambience *{animation:none!important}}
#game[data-suspended=true] .banana-ambience *{animation-play-state:paused}


/* Intro (intro.js): the max-win clip in the special-spin menu's brass frame, three feature dossiers on a manila folder, a
   volatility badge and a big gold Continue button. Sizes come from the viewport: the clip takes what the logo, the side
   column and the frame leave (3:2), so nothing scrolls at any size. The frame and folder are 9-slices of the menu art. */
.bh-intro{--vh:1vh;--pad:clamp(10px,calc(2.2 * var(--vh)),28px);--logo-h:clamp(46px,calc(14 * var(--vh)),150px);--side:clamp(270px,28vw,460px);
 --fs:.3;--frame-x:calc(var(--fs) * 58px);--frame-top:calc(var(--fs) * 95px);--frame-bottom:calc(var(--fs) * 103px);--cap-h:clamp(30px,calc(6 * var(--vh)),56px);
 --avail-w:calc(100vw - var(--side) - var(--pad) * 3 - var(--frame-x) * 2);
 --avail-h:calc(100 * var(--vh) - var(--logo-h) - var(--pad) * 3 - var(--frame-top) - var(--frame-bottom) - var(--cap-h) * .55);
 --screen-w:min(var(--avail-w),var(--avail-h) * 1.5);--go:clamp(64px,calc(12 * var(--vh)),112px);--fold:.15;--icon:clamp(40px,calc(6.6 * var(--vh)),74px);
 --ink:#2c2213;--red-ink:#9f1c1c;--gold:#e9c860;
 /* One gap for the Continue stack: ring → label → checkbox (the disc's box takes in its outer ring). */
 --stack-gap:clamp(10px,calc(1.6 * var(--vh)),18px);
 position:absolute;inset:0;z-index:40;display:grid;grid-template-columns:auto var(--side);grid-template-rows:var(--logo-h) auto auto;grid-template-areas:"logo logo" "stage dossier" "stage actions";
 justify-content:center;align-content:center;column-gap:calc(var(--pad) * 1.6);row-gap:var(--pad);padding:var(--pad);overflow:hidden;
 color:#f7e6be;background:#0a1c16;font-family:'Avenir Next','Segoe UI',Arial,sans-serif;text-align:left;letter-spacing:normal;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;isolation:isolate}
@supports(height:1dvh){.bh-intro{--vh:1dvh}}
.bh-intro *,.bh-intro *::before,.bh-intro *::after{box-sizing:border-box}
.bh-intro-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;transform:scale(1.04);
 background:radial-gradient(ellipse 60% 55% at 50% 38%,#24533f40,#0000 70%),radial-gradient(ellipse 120% 90% at 50% 45%,#0000 35%,#020b08f2 100%),linear-gradient(#0b2019d9,#06130fe8),url('./assets/apartment-v1/base.webp') center/cover;filter:blur(2px) saturate(.85)}
.bh-intro-logo{grid-area:logo;justify-self:center;align-self:end;width:calc(var(--logo-h) * 2.7776);max-width:100%;margin:0;line-height:0;font-size:0;filter:drop-shadow(0 6px 14px #000c)}
.bh-intro-logo img{display:block;width:100%;height:auto;aspect-ratio:1536/553;object-fit:contain}

/* The clip */
.bh-intro-stage{grid-area:stage;position:relative;align-self:center;justify-self:center;width:var(--screen-w);margin:var(--frame-top) var(--frame-x) calc(var(--frame-bottom) + var(--cap-h) * .55)}
.bh-intro-screen{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#06140f;border-radius:calc(var(--fs) * 16px)}
.bh-intro-screen::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(var(--screen-w) * .06) #000b;background:repeating-linear-gradient(#0000 0 2px,#00000010 2px 3px)}
.bh-intro-poster,.bh-intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.bh-intro-video{opacity:0;transition:opacity .35s ease}
.bh-intro[data-playing=true] .bh-intro-video{opacity:1}
.bh-intro-rec{position:absolute;z-index:1;top:3.2%;left:2.4%;display:flex;align-items:center;gap:.45em;padding:.35em .6em;border-radius:4px;background:#000a;color:#fff;font:800 clamp(9px,calc(1.5 * var(--vh)),14px)/1 Menlo,Consolas,monospace;letter-spacing:.14em;opacity:0;transition:opacity .3s}
.bh-intro-rec i{width:.75em;height:.75em;border-radius:50%;background:#ff2b2b;box-shadow:0 0 6px #ff2b2b;animation:bh-intro-blink 1.2s steps(1) infinite}
.bh-intro[data-playing=true] .bh-intro-rec{opacity:.9}
.bh-intro-frame{position:absolute;inset:calc(var(--fs) * -95px) calc(var(--fs) * -57px) calc(var(--fs) * -103px) calc(var(--fs) * -58px);pointer-events:none;
 border-style:solid;border-color:transparent;border-width:calc(var(--fs) * 205px) calc(var(--fs) * 180px) calc(var(--fs) * 212px) calc(var(--fs) * 180px);
 border-image:url('./assets/special-menu-v1/special-spin-frame-v1.webp') 205 180 212 180 stretch;filter:drop-shadow(0 12px 22px #000c)}
.bh-intro-maxwin{position:absolute;z-index:2;right:4%;bottom:calc(100% + var(--fold) * 170px - 10px);width:min(72%,calc(var(--logo-h) * 1.9));height:auto;aspect-ratio:1846/742;transform:rotate(6deg);filter:drop-shadow(0 6px 10px #000c);pointer-events:none;animation:bh-intro-sticker 3.2s ease-in-out 1s infinite}
.bh-intro-caption{position:absolute;z-index:3;left:50%;bottom:calc(var(--cap-h) * -.5);transform:translateX(-50%);width:max-content;max-width:94%;height:var(--cap-h);margin:0;padding:0 1.15em;display:flex;align-items:center;justify-content:center;overflow:hidden;
 border-radius:999px;background:linear-gradient(#21503d,#0e281e);border:2px solid var(--gold);box-shadow:0 0 0 3px #2f2108,0 10px 22px #000c,inset 0 1px #fff4,inset 0 -3px 6px #0006}
.bh-intro-caption-text{display:block;white-space:nowrap;font:400 calc(var(--cap-h) * .46)/1 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.03em;text-transform:uppercase;color:#ffe08a;text-shadow:0 2px 0 #4a3008,0 0 14px #ffcf5a55}
/* A caption longer than the pill breaks into two balanced lines inside it instead of being cut off at both ends (at Popout S
   "Multipliers add up on every line" lost its first and last letters). The pill is as wide as its words (max-content) up to
   94% of the clip, so a short caption stays on one line: centred with left:50%, it would otherwise wrap at half width. */
.bh-intro-caption-text{white-space:normal;text-wrap:balance;text-align:center;line-height:.95}
.bh-intro-caption-in{animation:bh-intro-caption .38s cubic-bezier(.2,.9,.3,1.2)}

/* The dossier: volatility and three features on a manila folder */
.bh-intro-dossier{grid-area:dossier;align-self:end;position:relative;margin:0;color:var(--ink);
 border-style:solid;border-color:transparent;border-width:calc(var(--fold) * 170px);border-image:url('./assets/menu-v2/purchase-folder-body-regular-v5.webp') 170 fill stretch;
 padding:calc(var(--pad) * .2) calc(var(--pad) * .35) calc(var(--pad) * .5);filter:drop-shadow(0 10px 18px #000b);transform:rotate(-.6deg)}
.bh-intro-volatility{display:flex;align-items:center;gap:.55em;margin:0 0 .5em;font:800 clamp(10px,calc(1.45 * var(--vh)),16px)/1 'Avenir Next',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#4a3a1d}
.bh-intro-rounds{display:flex;gap:3px}
/* The volatility meter (volatility.js): lit rounds are brass cartridges, the rest empty casings (the same look as the chooser
   cards' and confirmations' meter, special-spin-menu.css). */
.bh-intro-rounds i{width:.6em;height:1.45em;border-radius:50% 50% .1em .1em/40% 40% .1em .1em;background:linear-gradient(#0000 62%,#5a3b0b40 62% 70%,#0000 70%),#a8761f1f;box-shadow:inset 0 0 0 1px #8a5d1766,0 0 0 1px #3d290640}
.bh-intro-rounds i.on{background:linear-gradient(#0000 62%,#5a3b0b 62% 70%,#0000 70%),linear-gradient(90deg,#8a5d17,#f6d77a 42%,#a8761f);box-shadow:0 0 0 1px #3d2906}
.bh-intro-volatility strong{margin-left:auto;padding:.28em .55em;border:2px solid var(--red-ink);border-radius:4px;color:var(--red-ink);font-family:'Cooper Black','Arial Black',Georgia,serif;font-weight:400;letter-spacing:.08em;transform:rotate(-5deg);box-shadow:inset 0 0 0 1px #9f1c1c55;opacity:.92}
.bh-intro-features{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bh-intro-feature{display:grid;grid-template-columns:var(--icon) 1fr;align-items:center;column-gap:.8em;padding:.6em 0;border-top:1.5px dashed #6b552c80}
.bh-intro-feature-icon{position:relative;width:var(--icon);height:var(--icon);display:grid;place-items:center}
.bh-intro-feature-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0006)}
.bh-intro-feature[data-icon=bazooka] .bh-intro-feature-icon img{transform:rotate(-24deg) scale(1.08)}
/* The multiplier wild: the board's paper with its stamps (intro.js wildIcon; symbols.css inks them), tipped a little. */
.bh-intro-wild .bh-intro-paper{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-6deg);filter:drop-shadow(0 3px 3px #0006)}
.bh-intro-feature-icon b{position:absolute;inset:0;display:grid;place-items:center;padding-top:6%;font:400 calc(var(--icon) * .3)/1 'Lilita One','Cooper Black','Arial Black',sans-serif;color:#fff1d6;text-shadow:0 2px 0 #4b0d10,0 0 6px #000a}
.bh-intro-feature-copy{display:grid;gap:.2em;min-width:0}
.bh-intro-feature-copy strong{font:400 clamp(14px,calc(2.25 * var(--vh)),25px)/1.05 'Cooper Black','Arial Black',Georgia,serif;color:#1f3d2d;text-transform:uppercase;letter-spacing:.02em}
.bh-intro-feature-copy span{font:600 clamp(11px,calc(1.62 * var(--vh)),17px)/1.3 'Avenir Next',Arial,sans-serif;color:#3d311d}

/* Continue and "Don't show next time": the disc's margin is its outer ring, so the label and the checkbox sit the same
   --stack-gap below what you see. */
.bh-intro-actions{grid-area:actions;align-self:start;display:grid;justify-items:center;gap:var(--stack-gap)}
.bh-intro-go{display:grid;justify-items:center;gap:var(--stack-gap);margin:0;padding:0;border:0;background:none;color:#f3dfa6;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bh-intro-go:focus{outline:none}
.bh-intro-go-disc{position:relative;display:grid;place-items:center;width:var(--go);height:var(--go);margin:calc(var(--go) * .12);border-radius:50%;
 background:radial-gradient(circle at 50% 32%,#fff7d2 0,#f4d672 30%,#d9aa3e 62%,#8c6420 100%);
 box-shadow:0 0 0 calc(var(--go) * .04) #2b1d06,0 0 0 calc(var(--go) * .085) var(--gold),0 0 0 calc(var(--go) * .12) #2b1d06,0 12px 26px #000c,inset 0 calc(var(--go) * -.07) calc(var(--go) * .1) #7a531b99,inset 0 calc(var(--go) * .05) calc(var(--go) * .08) #fff9;transition:transform .15s ease,filter .15s ease}
.bh-intro-go-disc::after{content:'';position:absolute;inset:calc(var(--go) * -.12);border-radius:50%;border:2px solid #ffe08a;opacity:0;animation:bh-intro-pulse 2s ease-out 1.2s infinite;pointer-events:none}
.bh-intro-go-disc i{display:block;width:0;height:0;margin-left:calc(var(--go) * .09);border-left:calc(var(--go) * .3) solid #1f3a2b;border-top:calc(var(--go) * .19) solid transparent;border-bottom:calc(var(--go) * .19) solid transparent;filter:drop-shadow(0 1px 0 #fff6)}
.bh-intro-go-label{font:800 clamp(11px,calc(1.55 * var(--vh)),15px)/1 'Avenir Next',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 2px 4px #000c}
.bh-intro-go:hover .bh-intro-go-disc{filter:brightness(1.07);transform:scale(1.03)}
.bh-intro-go:active .bh-intro-go-disc{transform:scale(.96)}
.bh-intro-go:focus-visible .bh-intro-go-disc{outline:3px solid #fff2b3;outline-offset:calc(var(--go) * .16)}
.bh-intro-skip{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:0 .4em;border-radius:6px;font:700 clamp(11px,calc(1.5 * var(--vh)),14px)/1.2 'Avenir Next',Arial,sans-serif;letter-spacing:.06em;color:#e7dab3;cursor:pointer}
.bh-intro-skip-input{position:absolute;left:.4em;top:50%;width:1.35em;height:1.35em;margin:0;transform:translateY(-50%);opacity:0;cursor:pointer}
.bh-intro-skip-box{position:relative;flex:none;width:1.35em;height:1.35em;border:2px solid var(--gold);border-radius:4px;background:#0c231b;box-shadow:inset 0 1px 3px #000a}
.bh-intro-skip-input:checked+.bh-intro-skip-box::after{content:'';position:absolute;left:.3em;top:.02em;width:.42em;height:.78em;border:solid #ffe08a;border-width:0 .2em .2em 0;transform:rotate(42deg)}
.bh-intro-skip-input:focus-visible+.bh-intro-skip-box{outline:2px solid #fff2b3;outline-offset:3px}
.bh-intro-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * .5);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.bh-intro-provider{display:block;width:auto;height:clamp(18px,calc(3.2 * var(--vh)),30px);object-fit:contain;opacity:.75}
.bh-intro-meta small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#a9b393}

/* Entrance, captions, idle motion and exit */
.bh-intro>:not(.bh-intro-backdrop,.bh-intro-meta){animation:bh-intro-in .55s cubic-bezier(.2,.8,.3,1) backwards}
.bh-intro>.bh-intro-stage{animation-delay:.08s}.bh-intro>.bh-intro-dossier{animation-delay:.16s}.bh-intro>.bh-intro-actions{animation-delay:.24s}
.bh-intro[data-leaving=true]{animation:bh-intro-out .24s ease-in forwards;pointer-events:none}
@keyframes bh-intro-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes bh-intro-out{to{opacity:0;transform:scale(1.02)}}
@keyframes bh-intro-caption{from{opacity:0;transform:translateY(40%) scale(.92)}}
@keyframes bh-intro-blink{50%{opacity:.15}}
@keyframes bh-intro-pulse{0%{opacity:.75;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.22)}}
@keyframes bh-intro-sticker{0%,100%{transform:rotate(6deg)}50%{transform:rotate(3deg) scale(1.04)}}
.bh-intro[data-motion=poster] *,.bh-intro[data-motion=poster]{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.bh-intro *,.bh-intro{animation:none!important;transition:none!important}}

/* Short landscape screens (laptops at 1024×576): shorter feature lines and a smaller button so the side column fits. */
@media(orientation:landscape) and (min-height:501px) and (max-height:660px){
 .bh-intro{--go:clamp(56px,calc(11 * var(--vh)),72px);--icon:clamp(34px,calc(6 * var(--vh)),40px);--fold:.12}
 .bh-intro-feature{padding:.4em 0}
 .bh-intro-feature-copy span{font-size:11px;line-height:1.22}
 .bh-intro-maxwin{width:min(60%,calc(var(--logo-h) * 1.6))}
 .bh-intro{--stack-gap:clamp(8px,calc(1.5 * var(--vh)),10px)}
}

/* Tablet and phone portrait: logo, clip, dossier, then the button. The clip gets the height the rest is estimated to leave. */
@media(orientation:portrait){
 .bh-intro{--logo-h:clamp(44px,calc(9.5 * var(--vh)),130px);--fs:.2;--pad:clamp(10px,calc(1.8 * var(--vh)),26px);--go:clamp(58px,calc(9.5 * var(--vh)),104px);--cap-h:clamp(28px,calc(4.4 * var(--vh)),52px);--icon:clamp(32px,10vw,60px);--fold:.12;
  --stack-gap:clamp(9px,calc(1.2 * var(--vh)),15px);--dossier-est:calc(var(--icon) * 3 + 118px);--actions-est:calc(var(--go) * 1.24 + var(--stack-gap) * 2 + 34px);--meta-h:18px;
  --avail-w:calc(100vw - var(--pad) * 2 - var(--frame-x) * 2);--avail-h:calc(100 * var(--vh) - var(--logo-h) - var(--pad) * 5 - var(--frame-top) - var(--frame-bottom) - var(--cap-h) * .55 - var(--dossier-est) - var(--actions-est) - var(--meta-h));
  --screen-w:min(var(--avail-w),var(--avail-h) * 1.5,760px);
  grid-template-columns:minmax(0,min(100%,760px));grid-template-rows:var(--logo-h) auto auto auto;grid-template-areas:"logo" "stage" "dossier" "actions";row-gap:calc(var(--pad) * .8);padding-bottom:calc(var(--pad) + var(--meta-h))}
 .bh-intro-stage{margin-bottom:calc(var(--frame-bottom) + var(--cap-h) * .5)}
 .bh-intro-dossier{align-self:start;justify-self:stretch;transform:none;padding:0 calc(var(--pad) * .3) calc(var(--pad) * .2)}
 .bh-intro-maxwin{display:none}
 .bh-intro-volatility{font-size:clamp(9px,2.6vw,15px);margin-bottom:.35em}
 .bh-intro-feature{padding:.42em 0;column-gap:.7em}
 .bh-intro-feature-copy strong{font-size:clamp(13px,4vw,24px)}
 .bh-intro-feature-copy span{font-size:clamp(10.5px,3.05vw,17px);line-height:1.25}
 .bh-intro-actions{grid-template-columns:auto;justify-content:center}
 .bh-intro-meta small{font-size:8px}
}
/* Tablets: the three features side by side */
@media(orientation:portrait) and (min-width:600px){
 .bh-intro{--icon:clamp(44px,6.5vw,64px);--dossier-est:calc(var(--icon) + 150px)}
 .bh-intro-features{grid-template-columns:repeat(3,1fr);column-gap:1.1em}
 .bh-intro-feature{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:.45em;border-top:0;padding:.3em 0 .2em}
 .bh-intro-feature-copy strong{font-size:clamp(15px,2.4vw,24px)}
 .bh-intro-feature-copy span{font-size:clamp(12px,1.75vw,17px)}
 .bh-intro-volatility{justify-content:center;font-size:clamp(11px,1.6vw,16px)}.bh-intro-volatility strong{margin-left:.6em}
}
/* Short phones: feature titles only, the checkbox beside the button and no footer, so the clip stays wide */
@media(orientation:portrait) and (max-width:599px) and (max-height:740px){
 .bh-intro{--logo-h:clamp(40px,calc(8.5 * var(--vh)),70px);--icon:clamp(28px,8.6vw,38px);--dossier-est:calc(var(--icon) * 3 + 78px);--actions-est:calc(var(--go) * 1.24 + var(--stack-gap) + 12px);--meta-h:0px}
 .bh-intro-feature-copy span,.bh-intro-meta{display:none}
 .bh-intro-feature{padding:.3em 0}
 .bh-intro-actions{grid-template-columns:auto auto;align-items:center;column-gap:1.2em}
 .bh-intro-skip{max-width:11em;font-size:10px}
 .bh-intro-go{gap:calc(var(--stack-gap) * .8)}
}

/* Phone landscape: the clip on the left, everything else stacked beside it */
@media(orientation:landscape) and (max-height:500px){
 .bh-intro{--pad:clamp(8px,calc(2.4 * var(--vh)),14px);--logo-h:clamp(36px,calc(14 * var(--vh)),62px);--side:clamp(210px,37vw,330px);--fs:.18;--cap-h:clamp(24px,calc(7.5 * var(--vh)),34px);--go:clamp(48px,calc(15 * var(--vh)),66px);--icon:clamp(26px,calc(8.5 * var(--vh)),36px);--fold:.09;
  --avail-h:calc(100 * var(--vh) - var(--pad) * 2 - var(--frame-top) - var(--frame-bottom) - var(--cap-h) * .55);
  grid-template-rows:auto auto auto;grid-template-areas:"stage logo" "stage dossier" "stage actions";row-gap:calc(var(--pad) * .55);align-content:center}
 .bh-intro-logo{width:min(100%,calc(var(--logo-h) * 2.7776));align-self:end}
 .bh-intro-dossier{align-self:center;padding:0 calc(var(--pad) * .3) calc(var(--pad) * .2)}
 .bh-intro-volatility{margin-bottom:.25em;font-size:9px}
 .bh-intro-feature{padding:.28em 0;column-gap:.6em}
 .bh-intro-feature-copy strong{font-size:12px}
 .bh-intro-feature-copy span{font-size:10px;line-height:1.2}
 .bh-intro{--stack-gap:7px}
 .bh-intro-actions{grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:1em;align-self:start}
 .bh-intro-go-label{font-size:10px}
 .bh-intro-skip{font-size:10.5px;max-width:11em}
 .bh-intro-maxwin{display:none}
 .bh-intro-meta{display:none}
 .bh-intro-rec{font-size:8px}
}

/* Tiny landscape frames (Popout S as a real 400×225 viewport): the clip, the logo and the button; the features are in the
   game information. */
@media(orientation:landscape) and (max-height:300px){
 .bh-intro{--pad:6px;--side:clamp(120px,30vw,200px);--logo-h:clamp(26px,13vh,40px);--go:clamp(40px,22vh,56px);--fs:.12;--cap-h:clamp(18px,10vh,26px);
  grid-template-areas:"stage logo" "stage actions" "stage actions";row-gap:6px}
 .bh-intro-dossier{display:none}
 .bh-intro{--stack-gap:5px}
 .bh-intro-actions{grid-template-columns:auto;align-self:center}
 .bh-intro-go-label{font-size:9px;letter-spacing:.14em}
 .bh-intro-skip{font-size:9px;max-width:none;gap:.4em}
 .bh-intro-rec{display:none}
}
/* Short portrait phones such as 320×568 */
@media(orientation:portrait) and (max-width:359px){
 .bh-intro-volatility{letter-spacing:.1em}
 .bh-intro-feature-copy strong{font-size:13px}
}

/* Popout-sized players (intro.js sets data-small when player.html shows the 1200×675 page at under half size): fewer,
   much larger words so the text stays readable on screen. */
.bh-intro[data-small=true]{--side:450px;--logo-h:80px;--cap-h:80px;--go:116px;--icon:76px;--fold:.18;--pad:14px;--stack-gap:14px;
 --avail-h:calc(100 * var(--vh) - var(--pad) * 2 - var(--frame-top) - var(--frame-bottom) - var(--cap-h) * .55);
 grid-template-rows:auto auto auto;grid-template-areas:"stage logo" "stage dossier" "stage actions";row-gap:10px}
.bh-intro[data-small=true] :is(.bh-intro-feature-copy span,.bh-intro-meta,.bh-intro-rec,.bh-intro-maxwin){display:none}
.bh-intro[data-small=true] .bh-intro-logo{width:calc(var(--logo-h) * 2.7776)}
.bh-intro[data-small=true] .bh-intro-dossier{align-self:center;padding:0 6px 4px}
.bh-intro[data-small=true] .bh-intro-feature-copy strong{font-size:30px}
.bh-intro[data-small=true] .bh-intro-feature{padding:.25em 0}
.bh-intro[data-small=true] .bh-intro-volatility{font-size:22px;margin-bottom:.25em}
.bh-intro[data-small=true] .bh-intro-actions{grid-template-columns:auto auto;align-items:center;column-gap:24px}
.bh-intro[data-small=true] .bh-intro-go-label{font-size:26px}
.bh-intro[data-small=true] .bh-intro-skip{font-size:26px;max-width:9.5em}
.bh-intro[data-small=true] .bh-intro-caption-text{font-size:calc(var(--cap-h) * .38)}
/* Popout L and landscape phones (theme.js data-fit=popout: player.html shows the 1200×675 page at a half to three quarters):
   the small print a third larger, so the volatility, the feature lines and the REC tag read at 7-9 px instead of 5-6. A window
   that is itself this short (a native layout) has its own steps above. */
@media(min-height:600px){
 #game[data-fit=popout] .bh-intro-rec{font-size:13px}
 #game[data-fit=popout] .bh-intro-volatility{font-size:14px}
 #game[data-fit=popout] .bh-intro-feature-copy strong{font-size:21px}
 #game[data-fit=popout] .bh-intro-feature-copy span{font-size:14px}
 #game[data-fit=popout] .bh-intro-go-label{font-size:15px}
 #game[data-fit=popout] .bh-intro-skip{font-size:14px}
 #game[data-fit=popout] .bh-intro-meta small{font-size:12px}
 /* The larger dossier made the page 76 px taller than the window (mobile audit, 2026-10-12): the logo was cut at the top, the
    "Don't show next time" box fell below the bottom and CONTINUE ran into the demo line. A lower logo row and the checkbox
    beside Continue (as on short landscape windows) give it back. */
 #game[data-fit=popout] .bh-intro{--logo-h:68px;--stack-gap:8px}
 #game[data-fit=popout] .bh-intro-actions{grid-template-columns:auto auto;align-items:center;column-gap:1.2em}
}

/* Banana Spins (src/banana-spins.js): quiet grey blanks so the letters pop, generated gold letters, and the B-A-N-A-N-A strip over the
   top beam, whose slots light as letters land, dim at a miss and blaze on BANANA. Transforms, opacity and filter only. */
.symbol.is-blank .symbol-art{filter:none;opacity:.46}
.symbol.is-letter{z-index:2}
.symbol.is-letter .symbol-art{filter:drop-shadow(0 3px 2px #031e17a8) drop-shadow(0 0 7px #ffd65a8c)}
.banana-strip{position:absolute;left:50%;top:0;z-index:7;translate:-50% -58%;display:flex;gap:clamp(3px,.8cqw,6px);padding:clamp(4px,.9cqw,7px) clamp(7px,1.8cqw,13px);
  border-radius:12px;background:linear-gradient(#1b4437f2,#0a2219f2);border:2px solid #e4c477;box-shadow:0 0 0 2px #162e23,0 6px 14px #000a;pointer-events:none;transition:opacity .18s ease-out,filter .18s ease-out}
.banana-strip[hidden]{display:none}
/* Phones: the logo nests over the top rim and is drawn above the board, so the strip hung behind it (hidden on most phones).
   It hangs just under the logo instead (theme.js measures --strip-drop), over the felt's top margin, a little smaller. */
.banana-scene[data-layout=portrait] .banana-strip{translate:-50% var(--strip-drop,0px);padding:3px 7px;border-radius:9px}
.banana-scene[data-layout=portrait] .banana-strip i{width:clamp(17px,3.6cqw,30px);border-radius:5px}
.banana-strip i{display:grid;place-items:center;width:clamp(19px,4.2cqw,34px);aspect-ratio:1;border-radius:7px;
  background:#ffffff08;border:1px dashed #e4c47755;transition:background .12s}
.banana-strip i img{display:block;width:100%;height:100%;object-fit:contain;opacity:.22;filter:grayscale(1) brightness(.7);transition:opacity .12s,filter .12s}
.banana-strip i[data-lit]{background:#ffde5733;border:1px solid #ffe39ba6;box-shadow:0 0 10px #ffd65a66,inset 0 1px 0 #fffbe033}
.banana-strip i[data-lit] img{opacity:1;filter:drop-shadow(0 1px 1px #0008)}
.banana-strip[data-state=miss]{opacity:.42;filter:saturate(.25)}
.banana-strip[data-state=complete]{border-color:#fff3b0;box-shadow:0 0 0 2px #162e23,0 0 18px #ffd65acc,0 0 40px #ff9f2e88;animation:banana-blaze .5s ease-in-out infinite alternate}
@keyframes banana-blaze{from{filter:brightness(1)}to{filter:brightness(1.35)}}
#game[data-suspended=true] .banana-strip{animation-play-state:paused}
/* The tease on the last reel, one letter from BANANA, burns brightest. */
.tease-column[data-strength=max]{border-width:3px;border-color:#fff3b0;box-shadow:0 0 24px #ffc94a,0 0 60px #ff9f2eb3,inset 0 0 30px #ffd97a99}
/* The generated word keeps the existing renderer-controlled slam, hold and exit. */
.banana-stamp{position:absolute;left:50%;top:50%;z-index:9;transform:translate(-50%,-50%) rotate(-6deg);width:90%;max-width:900px;pointer-events:none;
  filter:drop-shadow(0 5px 2px #03140ecc) drop-shadow(0 0 15px #ffc84766)}
.banana-stamp img{display:block;width:100%;height:auto;object-fit:contain}

/* This also applies in the standalone art review, which has no renderer clock. */
@media(prefers-reduced-motion:reduce){.banana-strip[data-state=complete]{animation:none}}
[data-reduced=true] .banana-strip[data-state=complete]{animation:none}

/* The bet bar: the attaché lid (the owner's pick of three looks, 2026-10-12). The case's green leather inside the Bonus
   plaques' brass rail and riveted corners (the same preloaded art); brass-rimmed leather keys, brass studs for the bet, Lilita
   amounts, a polished brass Spin with an ink rim.
   Colour, material, borders, shadows and type only: every size, position, gap and order stays theme.js's (and popout-fit.css's,
   mounted after this sheet). Borders keep their widths (border-box), border-image and box-shadow draw without taking room, and
   the substituted amount faces are narrower than the .62 em a character the phone and popout fits allow.
   Rules are keyed on :host([data-layout]), which the shell always has, to sit at the weight they were tuned at.
   Selectors: ':not([data-layout=portrait])' is the one-row bar (wide, compact, mini); '[data-layout=portrait]' the phone bar,
   whose footer spans the Spin row and the amounts row below it. */

:host([data-layout]){--a-ink:#0b1d17;--a-rim:linear-gradient(160deg,#fff4c4,#e9c860 26%,#8a6a1f 50%,#f1d27a 74%,#fff0b8)}
/* The leather (::before, inside the rail) and the rail (::after) are drawn behind the bar's controls: the bar is their
   containing block and stacking context, which moves nothing in wide and compact (none of their bar controls is positioned;
   mini's speed button is, against .controls, so mini takes the plaque art whole instead). */
:host([data-layout]:not([data-layout=portrait])) .footer{border-color:transparent;box-shadow:0 12px 26px #0008}
:host([data-layout]:is([data-layout=wide],[data-layout=compact])) .footer{
  --a-frame:23px;--a-leather:9px;
  position:relative;isolation:isolate;background:none
}
:host([data-layout][data-layout=compact]) .footer{--a-frame:18px;--a-leather:7px}
:host([data-layout][data-layout=mini]) .footer{border-image:url('./assets/special-menu-v1/special-spin-panel-v1.webp') 205 205 190 205 fill / 14px / 0 stretch;background:none}
:host([data-layout]:is([data-layout=wide],[data-layout=compact])) .footer::before{
  content:'';position:absolute;z-index:-1;inset:var(--a-leather);border-radius:8px;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 150% at 50% -45%,#4a8a6766,#0000 70%),
    linear-gradient(#0000 45%,#03100a70),
    url('./assets/special-menu-v1/special-spin-panel-v1.webp') 50% 50% / 140% auto no-repeat,
    #153829;
  box-shadow:inset 0 2px 3px #0008
}
:host([data-layout]:is([data-layout=wide],[data-layout=compact])) .footer::after{
  content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;
  border:1px solid transparent;
  border-image:url('./assets/special-menu-v1/special-spin-frame-v1.webp') 205 205 190 205 / var(--a-frame) / 0 stretch
}
/* Keys: a 1 px brass border (autoplay sizes to its content, so no border grows) doubled by an inset brass ring. */
:host([data-layout]:not([data-layout=portrait])) .footer :is(.icon-button,.compact-action){
  border:1px solid transparent;border-radius:8px;color:#f8ecc8;
  background:linear-gradient(#25513f,#10301f) padding-box,var(--a-rim) border-box;
  box-shadow:0 0 0 1px var(--a-ink),0 3px 4px #0009,inset 0 0 0 1px #c9a24c,inset 0 2px #ffffff26,inset 0 -3px 4px #0005
}
:host([data-layout]:not([data-layout=portrait])) .footer .speed-button[aria-pressed=true]{
  color:#ffe07a;background:radial-gradient(circle at 50% 45%,#e9c86040,#0000 70%) padding-box,linear-gradient(#2c5a46,#123524) padding-box,var(--a-rim) border-box;
  box-shadow:0 0 0 1px var(--a-ink),0 0 10px #ffd66a66,0 3px 4px #0009,inset 0 0 0 1px #f1d27a,inset 0 2px #ffffff26
}
:host([data-layout]) .footer .autoplay-button[data-running=true]{color:#ffe07a}
/* Keyboard focus in cream, so the ring never reads as one more brass rim. */
:host([data-layout]) .footer button:focus-visible{outline-color:#fff6d8}
/* The bet's − and + are brass studs (the round face is drawn inside the unchanged button box). */
:host([data-layout]:not([data-layout=portrait])) .footer .desktop-bet-step,
:host([data-layout][data-layout=portrait]) .footer .actions>.bet-step{
  border:0;border-radius:999px;color:#2b1b06;box-shadow:none;
  background:radial-gradient(circle 4px at 40% 34%,#fffbe8,#0000) ,radial-gradient(circle var(--a-stud,15px) at 50% 50%,#f8de86 0,#e6b94f 52%,#a7781f 78%,var(--a-ink) 80% 92%,#0000 calc(92% + 1px))
}
:host([data-layout][data-layout=portrait]) .footer .actions>.bet-step{--a-stud:17px}
@media(pointer:coarse){:host([data-layout]:not([data-layout=portrait])) .footer .desktop-bet-step{--a-stud:20px}}
:host([data-layout]) .footer .label{color:#ecd08a;text-shadow:0 1px 0 #06130e}
:host([data-layout]) .footer .number{font-family:'Lilita One',var(--ui-font);font-weight:400;letter-spacing:0;color:#fff4d4;text-shadow:0 2px 0 #06130e}
:host([data-layout]) .footer .win .number{color:#ffd85e}
:host([data-layout]) .footer .amount-button:disabled .number{color:#d8cfb2}
:host([data-layout]) .underbar{color:#d5c393}
:host([data-layout]) .underbar .status:before{background:radial-gradient(circle at 40% 35%,#fff4c4,#d8a843 60%,#7a5a14)}
:host([data-layout]) .primary{
  color:#2b1b06;border:2px solid #fff3c0;
  background:radial-gradient(circle at 34% 27%,#fffdf0 0,#fff2c2 10%,#0000 36%),radial-gradient(circle,#0000 0 69%,#7a561838 73%,#0000 79%),linear-gradient(155deg,#ffe9a2,#f2c95d 40%,#cf9a35 78%,#a8771f);
  box-shadow:0 0 0 2px var(--a-ink),0 0 0 6px #e9c86024,inset 0 -5px 8px #8a560f70,inset 0 4px 6px #fff8dcb0,0 6px 16px #000a
}
:host([data-layout]) .primary[data-state=repeat]{box-shadow:0 0 0 2px var(--a-ink),0 0 0 6px #e9c86050,0 0 24px #ffd66aaa,inset 0 -5px 8px #8a560f70,inset 0 4px 6px #fff8dcb0,0 6px 16px #000a}
:host([data-layout]) .primary[data-state=stop]{
  color:#4a0f14;border-color:#ffd9cf;
  background:radial-gradient(circle at 34% 27%,#fff3ef 0,#ffd2c6 10%,#0000 36%),linear-gradient(155deg,#ffb2a2,#e8665a 45%,#b93a36);
  box-shadow:0 0 0 2px var(--a-ink),0 0 0 6px #e5605c30,inset 0 -5px 8px #7a141466,inset 0 4px 6px #ffe5dd99,0 6px 16px #000a
}
/* Phones: the amounts row is a leather strip under a brass rail; the Spin row keeps its smoky scrim. */
:host([data-layout][data-layout=portrait]) .footer{
  background:
    var(--a-rim) left 0 bottom 60px / 100% 3px no-repeat,
    linear-gradient(var(--a-ink),var(--a-ink)) left 0 bottom 59px / 100% 1px no-repeat,
    radial-gradient(ellipse 60% 100% at 50% 0,#3f7d5c55,#0000 70%) left 0 bottom 0 / 100% 59px no-repeat,
    linear-gradient(#1a4533,#0d281c) left 0 bottom 0 / 100% 59px no-repeat,
    #0e241d99
}

/* Animated brass dossier border (src/board-frame.js): polished brass with a seam of rivets and screwed corner brackets. A light
   travels round the ring and each rivet glints as it passes; Free Spins carries two lights, emerald studs and inlay, Super is
   violet metal with amethyst. The ring covers the reel frame's padding band plus --bf-out; its hole is exactly the reels
   (--bf-l/t/r/b are the band widths, --bf-u the narrowest), so symbols are never covered. The module runs the motion (Web
   Animations on transform/opacity) and sets data-mood (base, bonus, super), data-heat (idle, spin, tease, trigger, celebrate),
   data-still (reduced motion) and data-paused; this sheet only draws the frame for those states. */
.banana-scene[data-border]>.reel-frame{border-color:transparent;box-shadow:none;background:#0d1611}
.bf{position:absolute;z-index:0;pointer-events:none;--bf-out:6px;--bf-rad:16px;transition:opacity .3s;
 --m0:#3a2507;--m1:#8a6222;--m2:#d3a74c;--m3:#fde9a6;--m4:#b08032;--m5:#694712;--glint:#fff8dc;--glow:#ffcf5a;--stud1:#fffbe2;--stud2:#e6c165;--stud3:#5f3f0e;
 --flash:linear-gradient(115deg,#fff3c4cc,#fffdf2 45%,#ffe08acc);--cs:calc(var(--bf-u)*2.6);--arm:calc(var(--bf-u) + 3px);--rv:max(4px,calc(var(--bf-u)*.34))}
.bf[data-mood=bonus]{--glow:#ffe07a;--stud1:#eafff3;--stud2:#3dbd7d;--stud3:#08391f;--inlay:#26a066}
.bf[data-mood=super]{--m0:#1c0b33;--m1:#4f2c86;--m2:#9668dc;--m3:#efdfff;--m4:#7044b4;--m5:#33195c;--glint:#f8efff;--glow:#b67cff;--stud1:#fff3ff;--stud2:#dda4ff;--stud3:#45166f;--inlay:#b583ff;--flash:linear-gradient(115deg,#e8d4ffcc,#fff 45%,#d3b0ffcc)}
.banana-scene:is([data-layout=portrait],[data-layout=compact]) .bf{--bf-out:4px;--bf-rad:12px}
@media(max-width:500px) and (max-height:479px){.banana-scene .bf{--bf-out:3px;--bf-rad:9px}}
.bf i,.bf b,.bf s,.bf u{position:absolute;display:block;font-style:normal;text-decoration:none}
.bf>i{inset:0}
/* A layer cut to the ring: its content box (the padding is the band) is masked out. */
.bf>.bf-mask{padding:var(--bf-t) var(--bf-r) var(--bf-b) var(--bf-l);border-radius:var(--bf-rad);overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bf>.bf-shadow{border-radius:var(--bf-rad);box-shadow:0 10px 22px #000b,0 2px 5px #000c}
.bf>.bf-glow{border-radius:var(--bf-rad);box-shadow:0 0 14px 3px var(--glow),0 0 32px 8px color-mix(in srgb,var(--glow) 40%,transparent);opacity:0}
.bf>.bf-flash{opacity:0;background:var(--flash)}
.bf>.bf-ring{background:linear-gradient(115deg,transparent 28%,#ffffff2e 40%,transparent 50%),conic-gradient(from 0deg,var(--m2),var(--m4) 50deg,var(--m5) 110deg,var(--m4) 150deg,var(--m2) 200deg,var(--m3) 250deg,var(--m3) 290deg,var(--m2) 330deg,var(--m2));box-shadow:inset 0 0 0 1px var(--m0),inset 0 2px 0 1px #fff5,inset 0 -2px 0 1px #0004}
/* Each side is moulded across its width (outer bead, seam, inner fall-off); a thicker bottom rail stays flat below it, like a plate. */
.bf>.bf-ring::after{content:'';position:absolute;inset:0;--mould:#ffffff80,#fff0 20%,#0000 38%,#0000003d 50%,#ffffff30 62%,#fff0 76%,#00000066;
 background:linear-gradient(var(--mould)) top/100% var(--bf-u) no-repeat,linear-gradient(0deg,var(--mould)) bottom/100% var(--bf-u) no-repeat,linear-gradient(90deg,var(--mould)) left/var(--bf-u) 100% no-repeat,linear-gradient(270deg,var(--mould)) right/var(--bf-u) 100% no-repeat}
.bf>.bf-lip{inset:var(--bf-t) var(--bf-r) var(--bf-b) var(--bf-l);border-radius:7px;box-shadow:0 0 0 1px #160e03,0 0 0 2px var(--m3),0 0 0 3px var(--m4),0 0 0 4px #0003}
.bf>.bf-groove{inset:calc(var(--bf-u)*.5 - 1px);border-radius:calc(var(--bf-rad) - var(--bf-u)*.4);border:1px solid var(--m5);box-shadow:0 1px 0 #fff3,inset 0 1px 0 #fff3}
/* Free Spins lays an emerald enamel inlay in the seam, Super an amethyst one; both keep a soft halo lit. */
.bf:not([data-mood=base])>.bf-groove{border:2px solid var(--inlay);box-shadow:0 0 0 1px var(--m5),inset 0 0 0 1px #0006,0 0 6px var(--inlay)}
.bf:not([data-mood=base])>.bf-glow{opacity:.4}
.bf>.bf-sweep{opacity:.85;transition:opacity .4s}
.bf[data-heat=spin]>.bf-sweep{opacity:.95}
.bf:is([data-heat=tease],[data-heat=trigger],[data-heat=celebrate])>.bf-sweep{opacity:1}
.bf .bf-sweep>b{left:50%;top:50%;width:var(--bf-diag);height:var(--bf-diag);margin:calc(var(--bf-diag)/-2) 0 0 calc(var(--bf-diag)/-2);will-change:transform;
 background:conic-gradient(from -22deg,transparent,color-mix(in srgb,var(--glint) 40%,transparent) 12deg,var(--glint) 22deg,color-mix(in srgb,var(--glint) 40%,transparent) 32deg,transparent 44deg)}
.bf:not([data-mood=base]) .bf-sweep>b{background:conic-gradient(from -22deg,transparent,color-mix(in srgb,var(--glint) 40%,transparent) 12deg,var(--glint) 22deg,color-mix(in srgb,var(--glint) 40%,transparent) 32deg,transparent 44deg 180deg,color-mix(in srgb,var(--glint) 40%,transparent) 192deg,var(--glint) 202deg,color-mix(in srgb,var(--glint) 40%,transparent) 212deg,transparent 224deg)}
.bf-rivets>b{width:var(--rv);height:var(--rv);margin:calc(var(--rv)/-2) 0 0 calc(var(--rv)/-2);border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--stud1) 0 14%,var(--stud2) 36%,var(--stud3) 82%);box-shadow:0 1px 1px #000a,0 0 0 1px #0005}
.bf-rivets>b>s{left:50%;top:50%;width:calc(var(--rv)*3.6);height:calc(var(--rv)*3.6);margin:calc(var(--rv)*-1.8) 0 0 calc(var(--rv)*-1.8);opacity:0;will-change:opacity;
 background:radial-gradient(closest-side,#fff 0,#fffbe8cc 16%,transparent 50%),linear-gradient(90deg,transparent 47%,#fffdf2 50%,transparent 53%),linear-gradient(0deg,transparent 47%,#fffdf2 50%,transparent 53%);-webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent)}
.bf:is([data-heat=tease],[data-heat=trigger]) .bf-rivets>b{box-shadow:0 0 0 1px #0005,0 0 5px 2px var(--glow)}
/* Corner brackets: one drawn top-left, mirrored into the other corners. A darker cast plate than the ring, lifted off it by a
   drop shadow (static, so painted once). */
.bf>.bf-corner{inset:auto;width:var(--cs);height:var(--cs)}
.bf>.bf-tl{left:-3px;top:-3px}
.bf>.bf-tr{right:-3px;top:-3px;transform:scaleX(-1)}
.bf>.bf-br{right:-3px;bottom:-3px;transform:scale(-1)}
.bf>.bf-bl{left:-3px;bottom:-3px;transform:scaleY(-1)}
.bf .bf-corner>b{inset:0;transform-origin:0 0;filter:drop-shadow(0 1px 1px #000d) drop-shadow(1px 2px 3px #0008)}
.bf .bf-corner>b::before,.bf .bf-corner>b::after{content:'';position:absolute;left:0;top:0;border-radius:2px;box-shadow:inset 0 0 0 1px var(--m0),inset 1px 1px 0 1px #fff7}
.bf .bf-corner>b::before{width:100%;height:var(--arm);background:linear-gradient(var(--m3),var(--m2) 22%,var(--m4) 55%,var(--m5) 85%,var(--m1));clip-path:polygon(0 0,100% 0,calc(100% - var(--arm)*.55) 100%,0 100%)}
.bf .bf-corner>b::after{width:var(--arm);height:100%;background:linear-gradient(90deg,var(--m3),var(--m2) 22%,var(--m4) 55%,var(--m5) 85%,var(--m1));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--arm)*.55),0 100%)}
.bf .bf-corner u{z-index:1;left:calc(var(--arm)*.5);top:calc(var(--arm)*.5);width:calc(var(--arm)*.6);height:calc(var(--arm)*.6);margin:calc(var(--arm)*-.3) 0 0 calc(var(--arm)*-.3);border-radius:50%;
 background:linear-gradient(45deg,transparent 41%,var(--m0) 42% 58%,transparent 59%),radial-gradient(circle at 35% 30%,var(--m3),var(--m2) 45%,var(--m5));box-shadow:0 1px 1px #000b,0 0 0 1px var(--m0)}
/* Heat: the tease and the trigger pulse the halo and clench the brackets; a celebration keeps the halo breathing. */
.bf:is([data-heat=tease],[data-heat=trigger])>.bf-glow{animation:bf-pulse .45s ease-in-out infinite alternate}
.bf[data-heat=trigger]>.bf-glow{animation-duration:.24s}
.bf[data-heat=celebrate]>.bf-glow{animation:bf-pulse .9s ease-in-out infinite alternate}
.bf:is([data-heat=tease],[data-heat=trigger]) .bf-corner>b{animation:bf-clench .45s ease-in-out infinite alternate}
@keyframes bf-pulse{from{opacity:.2}to{opacity:1}}
@keyframes bf-clench{to{transform:translate(-2px,-2px)}}
.bf[data-still=true] *,.bf[data-still=true] *::before,.bf[data-still=true] *::after{animation:none!important}
.bf[data-paused=true] *,.bf[data-paused=true] *::before,.bf[data-paused=true] *::after{animation-play-state:paused!important}
/* Captions on the bottom rail are engraved, and kept clear of the corner brackets. */
.banana-scene[data-border] .board-foot{left:40px;right:40px;color:#3a2507;text-shadow:0 1px 0 #ffeeb466}
.banana-scene[data-border][data-layout=portrait] .board-foot{left:30px;right:30px}
slot-game-shell[data-mode=super] .banana-scene[data-border] .board-foot{color:#1c0b33;text-shadow:0 1px 0 #efdfff55}

/* The selected bitmap supplies the case, hardware and one continuous lining.
   Only the light layers are coded; their aperture follows the real reels. */
.banana-scene[data-border=attache]>.reel-frame{background:none;border:0;padding:0;box-shadow:none;outline:none}
/* A short contact shadow beneath the illustrated case, following its base. */
.banana-scene[data-border=attache]>.reel-frame::before{content:'';position:absolute;left:6%;right:6%;bottom:-6px;height:clamp(10px,2.8cqw,18px);border-radius:50%;background:radial-gradient(ellipse,#0207048c 0%,#02070455 38%,#02070400 74%);filter:blur(3px);z-index:-1;pointer-events:none}
.banana-scene[data-border=attache] .reels{position:absolute;inset:var(--attache-inset);width:auto;height:auto;border:0;border-radius:5px;background:none;box-shadow:none}
.banana-scene .bf[data-art=attache]{--bf-out:0px;--bf-rad:14px;--rv:max(3px,calc(var(--bf-u)*.16));--glow:#e6bb43}
.bf[data-art=attache][data-mood=bonus]{--glow:#5ac996}
.bf[data-art=attache][data-mood=super]{--glow:#bd86ed}
.bf>.bf-art{background:url('./assets/board-attache-v1/board-v2.webp') center/100% 100% no-repeat}
/* The light stays on the case itself, never the play area: the case art's own alpha, less its felt lining (traced from
   board-v2.webp, the lining flood-filled from the middle and grown 3 px, in the art's pixels and stretched with it, so it
   fits the desktop and phone aspects alike). Without the lining cut the sweep and the win flash lit the felt round the reels. */
.bf>.bf-painted{overflow:hidden;-webkit-mask:url('./assets/board-attache-v1/board-v2.webp') center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1364 1081' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1364V1081H0ZM85 69 85 69 78 76 65 83 52 94 63 121 66 139 66 867 63 886 58 895 58 900 49 915 48 921 56 930 63 934 80 935 80 936 1300 936 1300 935 1311 934 1319 930 1327 921 1324 910 1321 907 1317 895 1313 889 1312 872 1309 861 1309 142 1314 115 1323 94 1312 84 1295 75 1288 69 1288 69Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;-webkit-mask-composite:source-in;mask:url('./assets/board-attache-v1/board-v2.webp') center/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1364 1081' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1364V1081H0ZM85 69 85 69 78 76 65 83 52 94 63 121 66 139 66 867 63 886 58 895 58 900 49 915 48 921 56 930 63 934 80 935 80 936 1300 936 1300 935 1311 934 1319 930 1327 921 1324 910 1321 907 1317 895 1313 889 1312 872 1309 861 1309 142 1314 115 1323 94 1312 84 1295 75 1288 69 1288 69Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask-composite:intersect}
.bf>.bf-painted>.bf-mask{inset:0;padding:var(--bf-t) var(--bf-r) var(--bf-b) var(--bf-l);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.bf[data-art=attache] .bf-sweep{opacity:.2;mix-blend-mode:screen}
.bf[data-art=attache] .bf-sweep>b{background:conic-gradient(from -12deg,transparent,#fff0 9deg,#fffbd3 12deg,#fff0 15deg,transparent 24deg)}
.bf[data-art=attache]>.bf-glow{display:none}
.bf[data-art=attache]:not([data-mood=base])>.bf-glow{opacity:.14}
.bf-sparks>b{width:var(--rv);height:var(--rv);margin:calc(var(--rv)/-2) 0 0 calc(var(--rv)/-2)}
.bf-sparks>b>s{inset:-100%;opacity:0;will-change:opacity;background:#fff4bf;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);filter:drop-shadow(0 0 2px #fff6cc)}
.banana-scene[data-border=attache] .board-foot{left:30%;right:30%;bottom:4.5%;justify-content:center;color:#292009;text-shadow:0 1px #ffda7455}
.banana-scene[data-border=attache][data-layout=portrait] .board-foot{left:27%;right:27%}
slot-game-shell[data-mode=super] .banana-scene[data-border=attache] .board-foot{color:#292009;text-shadow:0 1px #ffda7455}

/* On-board line wins (src/board-wins.js), ported from Gold Mine's board-wins.css: each winning line pops its amount over its
   symbols. The layer matches the reels and is a size container, so cqw is a share of the reels' width. Pop animations touch
   only transform and opacity; the positioning uses the translate property so they compose. Gold Mine's gold-on-brown is
   recoloured to Banana's banana gold on the deep felt green. Pops run about a third smaller than Gold Mine's (25px at most,
   11px at least) so they inform without covering the board. */
.board-wins{position:absolute;z-index:5;pointer-events:none;overflow:visible;container-type:size}
.board-win-pop{position:absolute;display:block;translate:-50% -50%;opacity:0;pointer-events:none;will-change:transform,opacity;
  font-size:min(calc(var(--pop-size,1) * clamp(9px,3.2cqw,17px)),calc(84cqw / (var(--len,6) * .6)));line-height:1.05;white-space:nowrap;
  font-family:'Avenir Next',Avenir,'Arial Black',system-ui,sans-serif}
/* A soft dark halo behind the amount, so it reads over any symbol. */
.board-win-pop::before{content:'';position:absolute;z-index:-1;inset:-45% -18%;border-radius:50%;background:radial-gradient(closest-side,#021009b8,#0210095e 55%,transparent)}
/* Solid banana gold with a thick deep-green outline and a hard drop shadow. */
.board-win-pop-value{display:block;padding:0 .08em;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#ffe14d;
  -webkit-text-stroke:max(2px,.1em) #06190f;paint-order:stroke fill;text-shadow:0 .07em 0 #06190f,0 .1em .18em #000c}
/* A multiplied line: the symbols' pay and the wild multiplier side by side ("$0.20 ×15"), then the line's win over them. The
   multiplier is hot orange, apart from the gold amounts, with the same dark outline. */
.board-win-pop-row{display:flex;align-items:baseline;justify-content:center;gap:.18em;white-space:nowrap}
.board-win-pop-factor{display:block;font-size:.86em;font-weight:900;font-style:italic;font-variant-numeric:tabular-nums;color:#ff9440;-webkit-text-stroke:max(2px,.11em) #1f0b02;paint-order:stroke fill;text-shadow:0 .07em 0 #1f0b02,0 0 .35em #ff7a1a99}
.board-win-pop-final{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;white-space:nowrap}
/* Tiny landscape phones: the board is small, so pops ease off their minimum. */
@media(max-width:500px) and (max-height:479px){.board-win-pop{font-size:min(calc(var(--pop-size,1) * clamp(9px,3.2cqw,17px)),calc(84cqw / (var(--len,6) * .6)))}}
/* A grouped pop whose lines were multiplied unevenly: a "WILD ×2–6" tag over the sum. */
.board-win-pop-badge{position:absolute;left:50%;bottom:92%;translate:-50% 0;padding:.12em .45em .14em;border-radius:.5em;white-space:nowrap;
  font-size:max(9px,.62em);font-weight:900;letter-spacing:.06em;color:#fff7dc;background:linear-gradient(#ff9a3c,#c9480f);border:max(1.5px,.08em) solid #1f0b02;box-shadow:0 .12em 0 #1f0b02,0 0 .6em #ff7a1a88}
/* The "×N" chip a multiplying wild shoots into its line's pop, tinted by that wild's tier. */
.board-win-chip{position:absolute;display:block;padding:.1em .38em .12em;border-radius:1em;white-space:nowrap;pointer-events:none;opacity:0;will-change:transform,opacity;
  font:italic 900 clamp(9px,1.8cqw,11px)/1 'Avenir Next',Avenir,'Arial Black',sans-serif;font-variant-numeric:tabular-nums;color:#fff;
  background:radial-gradient(circle at 35% 30%,#fff7,transparent 55%),var(--chip,#2fa45a);border:2px solid #06190f;box-shadow:0 0 .6em var(--chip,#2fa45a),0 .12em 0 #06190f}
.board-win-chip[data-tier=sapphire]{--chip:#3d78e6}.board-win-chip[data-tier=amber]{--chip:#ff9d1f}.board-win-chip[data-tier=amethyst]{--chip:#a855f7}.board-win-chip[data-tier=ruby]{--chip:#e5223e}
/* A big line's spent brass: shell casings in the volatility meter's metal (a dark mouth, the extractor groove near the
   base) that kick out of the pop and tumble off. Matte with a small shadow, not a glow: brass on the desk, like the rail. */
.board-win-casing{position:absolute;display:block;width:clamp(5px,1.3cqw,9px);aspect-ratio:10/27;border-radius:1px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(#0000 79%,#4a3008 79% 86%,#0000 86%),linear-gradient(#4a3008 0 7%,#0000 7%),linear-gradient(90deg,#6b4510,#c8952e 24%,#f6d77a 40%,#c8952e 62%,#5f3d0c);
  box-shadow:0 1px 1.5px #000a}

/* Generated emerald and violet bonus frames retain live counts, totals and controls. */
:host{--banana-bonus-modal-art:radial-gradient(ellipse 70% 42% at 50% 30%,#ffd96a1c,transparent 70%),repeating-linear-gradient(180deg,transparent 0 26px,#ffffff05 26px 27px),radial-gradient(ellipse 120% 95% at 50% 38%,#2c5a45,#1a3d30 55%,#0d241b);
  --banana-super-bonus-modal-art:radial-gradient(ellipse 70% 42% at 50% 30%,#e3a8ff1f,transparent 70%),repeating-linear-gradient(180deg,transparent 0 26px,#ffffff05 26px 27px),radial-gradient(ellipse 120% 95% at 50% 38%,#583470,#3a2350 55%,#1b1029)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]){--bonus-art:var(--banana-bonus-modal-art);--bonus-head:#ffdc73;--bonus-ink:#13291f;--bonus-accent:#fff0c4;--bonus-glow:#ffc93c;--bonus-pill:#06140fb8;
  container-type:inline-size;width:min(480px,100%);text-align:center}
.dialog[data-banana-presentation=true][data-banana-mode=super]:is([data-panel=feature-intro],[data-panel=feature-summary]){--bonus-art:var(--banana-super-bonus-modal-art);--bonus-head:#f4dcff;--bonus-ink:#29113a;--bonus-accent:#f6e6ff;--bonus-glow:#d78cff;--bonus-pill:#13081db8}
/* The generated frame supplies the matching brass hardware and quiet background. */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .banana-panel-scene{background:var(--bonus-art)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.banana-panel-illustration,.banana-panel-vignette,.banana-panel-corner,.banana-panel-spark,.banana-panel-eyebrow,.state-symbol){display:none}

.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header{padding:28px 20px 0;gap:0}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2{margin:0;font:900 min(clamp(24px,7.4cqi,36px),6.4dvh)/1.05 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.01em;color:var(--bonus-head);
  -webkit-text-stroke:max(2px,.07em) var(--bonus-ink);paint-order:stroke fill;text-shadow:0 .08em var(--bonus-ink),0 0 .4em color-mix(in srgb,var(--bonus-glow) 55%,transparent)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-content{padding:4px 20px 0;overflow:visible}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-presentation{display:flex;flex-direction:column;align-items:center;gap:0}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label){display:block;margin:12px 0 0;font:900 13px/1.4 'Avenir Next',Arial,sans-serif;letter-spacing:.26em;color:var(--bonus-accent);text-shadow:0 2px #000a}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .large-amount{display:flex;flex-direction:column;align-items:center;margin:0;color:inherit}
.dialog[data-banana-presentation=true][data-panel=feature-intro] .feature-award{width:100%}
/* The hero number: solid cream in a heavy sans with even-width digits (no gold gradient; it banded every digit). */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-count,.feature-total){display:block;padding:0 .08em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;background:none;
  -webkit-text-stroke:0;text-shadow:0 .04em 0 #1a1003,0 .06em .2em #000c,0 0 .3em color-mix(in srgb,var(--bonus-glow) 45%,transparent);filter:none}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-count{font:800 min(clamp(88px,30cqi,138px),19dvh)/1.02 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-total{margin:2px 0 0;font:900 min(84px,calc(86cqi / (var(--len,8) * .64)),13dvh)/1.1 'Cooper Black','Arial Black',Georgia,serif}
/* The amount returned reads like the buy price (presentation.css .quote-total): solid cream in a heavy sans with even-width
   digits and a plain shadow, not the molten-gold Cooper Black whose dark band runs through every digit. The spins count keeps the gold. */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-total{font:800 min(72px,calc(86cqi / (var(--len,8) * .6)),12dvh)/1.1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em;font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;background:none;-webkit-text-stroke:0;filter:none;text-shadow:0 3px 0 #1a1003,0 4px 14px #000c,0 0 22px color-mix(in srgb,var(--bonus-glow) 45%,transparent)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit{display:block;margin:-.06em 0 0;font:900 min(clamp(20px,6.6cqi,30px),5.4dvh)/1.1 'Cooper Black','Arial Black',Georgia,serif;letter-spacing:.04em;color:var(--bonus-accent);
  -webkit-text-stroke:max(2px,.1em) var(--bonus-ink);paint-order:stroke fill;text-shadow:0 .09em var(--bonus-ink)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-summary-spins{margin:8px 0 0;font:850 14px/1.4 'Avenir Next',Arial,sans-serif;letter-spacing:.16em;color:#efe6cb;text-shadow:0 2px #000a}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-summary-spins strong{color:var(--bonus-head);font-size:1.35em;-webkit-text-stroke:3px var(--bonus-ink);paint-order:stroke fill}
/* One short line in a pill. */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-description{display:table;max-width:none;margin:14px auto 0;padding:7px 16px;border:1px solid color-mix(in srgb,var(--bonus-glow) 45%,transparent);border-radius:99px;
  background:var(--bonus-pill);color:#f8efd6;font:800 13px/1.3 'Avenir Next',Arial,sans-serif;letter-spacing:.03em;text-wrap:balance;text-shadow:0 1px #000}
/* The button stands inside the painted brass rim, which is about a tenth of the plaque's width tall (22 px, and 16 px on
   phones, left it straddling or covering the rim's lower edge). */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer{padding:16px 24px max(30px,8.5%);justify-content:center}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{flex:0 1 340px;min-height:52px;padding:8px 14px;border-radius:12px;font:900 clamp(12px,3.1cqi,14px)/1.2 'Avenir Next',Arial,sans-serif;letter-spacing:.08em;
  background:linear-gradient(#ffeaa3,#f2c94f 55%,#cf982b);color:#25371f;border:1px solid #fff2c0;text-shadow:0 1px #fff4c8;box-shadow:inset 0 1px #fffbe6,0 3px #0b251c66}
.dialog[data-banana-presentation=true][data-banana-mode=super]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{background:linear-gradient(#f6e8ff,#c99af0 55%,#8f56c6);color:#2a1238;border-color:#f6e8ff;text-shadow:0 1px #f6ecff;box-shadow:inset 0 1px #fcf6ff,0 3px #1d063866}
@media(max-width:420px){.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header{padding:22px 12px 0}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-content{padding:2px 10px 0}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer{padding:14px 14px max(38px,10%)}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label){font-size:12px}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-description{font-size:12px}}
@media(max-height:500px){.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header{padding-top:14px}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label){margin-top:6px}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-description{margin-top:8px}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer{padding:10px 20px max(22px,7%)}.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{min-height:44px}}

:host{--banana-bonus-modal-art:url('./assets/celebration-v1/bonus-surface-regular-v2.webp') center/cover no-repeat;--banana-super-bonus-modal-art:url('./assets/celebration-v1/bonus-surface-super-v2.webp') center/cover no-repeat}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]){border:0;background:transparent;box-shadow:0 16px 48px #000a;overflow:visible}
/* Only the straight rails resize. Square corner slices retain the screws' proportions;
   the independently drawn banana sits in a square and never follows the panel's height. */
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]){
 --bonus-frame-corner:clamp(26px,9cqi,44px);--bonus-badge-size:clamp(34px,13.2cqi,64px);--bonus-badge-surface:#0e3024}
.dialog[data-banana-presentation=true][data-banana-mode=super]:is([data-panel=feature-intro],[data-panel=feature-summary]){--bonus-badge-surface:#291044}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .banana-panel-scene{background:none;border-radius:0;overflow:visible}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .banana-panel-scene::before{
 content:'';position:absolute;inset:calc(var(--bonus-frame-corner) * .3);border-radius:calc(var(--bonus-frame-corner) * .8);background:var(--bonus-art);background-color:var(--bonus-badge-surface)}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .banana-panel-scene::after{
 content:'';display:block;position:absolute;inset:0;border:var(--bonus-frame-corner) solid transparent;
 border-image:url('./assets/celebration-v1/bonus-frame-v2.webp') 14% / 1 / 0 stretch}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary])::before{display:none}
.dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary])::after{
 content:'';position:absolute;left:50%;bottom:calc(var(--bonus-badge-size) * -.45);width:var(--bonus-badge-size);height:var(--bonus-badge-size);aspect-ratio:1;translate:-50% 0;
 border-radius:50%;background:var(--bonus-badge-surface) url('./assets/celebration-v1/bonus-badge-v2.webp') center/contain no-repeat;pointer-events:none}
/* Small popouts retain a complete award, label and continuation inside the frame. */
@media(max-height:300px){
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]){width:min(480px,calc(100dvw - 28px));height:calc(100dvh - 28px);max-height:none;--bonus-frame-corner:24px;--bonus-badge-size:28px}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header{position:absolute;inset:8px 14px auto;height:23%;padding:0}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.banana-lettering{width:100%;max-width:100%;height:100%;aspect-ratio:auto;margin:0}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-content{position:absolute;inset:30% 14px 25%;padding:0;overflow:visible}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-presentation{height:100%;justify-content:space-between}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label).banana-lettering{height:14px;margin:0 auto;flex:none}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-count{font-size:18dvh;line-height:1}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-total{font-size:min(18dvh,calc(80cqi / (var(--len,8) * .64)));line-height:1}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit.banana-lettering{height:21px}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-summary-spins{margin:0;font-size:10px}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-description{display:none}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer{position:absolute;inset:auto 26px 22px;padding:0}
 .dialog[data-banana-presentation=true]:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{min-height:32px;padding:5px 8px;font-size:10px}
}

/* The home-screen entries share the chooser's painted leather and brass frame.
   Pseudo-elements keep the shell's live labels, counts and actions untouched. */
:host([data-layout]) :is(.feature-menu,.special-menu,.banana-mobile-options>button){
  --entry-frame-width:22px;--entry-frame-filter:none;--entry-panel-filter:none;
  background:none;border:0;border-radius:12px;
  box-shadow:none
}
:host([data-layout]) .rail{container-type:inline-size}
:host([data-layout]) .rail>:is(.feature-menu,.special-menu){
  width:min(236px,calc((100cqi - 16px) / var(--ui-zoom,1)));max-width:none;
  aspect-ratio:1.8;min-height:112px;padding:20px 20px 22px;gap:7px
}
:host([data-layout]) :is(.feature-menu,.special-menu,.banana-mobile-options>button)::before{
  /* Slice the complete painted panel so its leather always meets its rim. */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border:1px solid transparent;border-radius:0;
  border-image:url('./assets/special-menu-v1/special-spin-panel-v1.webp') 205 205 190 205 fill / var(--entry-frame-width) / 0 stretch;
  background:none;box-shadow:none;filter:var(--entry-panel-filter)
}
:host([data-layout]) :is(.feature-menu,.special-menu,.banana-mobile-options>button)::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  border:1px solid transparent;border-radius:0;
  border-image:url('./assets/special-menu-v1/special-spin-frame-v1.webp') 205 205 190 205 fill / var(--entry-frame-width) / 0 stretch;
  /* Gold Mine's shine: theme.js slides this band across on hover and keyboard focus; the frame art is drawn over it. */
  background:linear-gradient(105deg,#0000 42%,#fff6d05c 50%,#0000 58%) 100% 0/300% 100% no-repeat;background-clip:padding-box;
  box-shadow:none;filter:var(--entry-frame-filter)
}
/* Recolour the painted leather itself, retaining its grain and shaded edges. */
:host([data-layout]) :is(.special-menu,.banana-mobile-options>.mobile-special)[data-active=true]{
  --entry-panel-filter:hue-rotate(225deg) saturate(1.4) brightness(1.12);
  --entry-frame-filter:hue-rotate(-40deg) saturate(1.2)
}
:host([data-layout]) :is(.feature-menu,.special-menu,.banana-mobile-options>button):focus-visible{outline:2px solid #fff0b5;outline-offset:3px}
@media(max-width:600px){
  :host([data-layout]) .banana-mobile-options>button{--entry-frame-width:13px;border-radius:8px}
}
:host([data-layout=portrait]) .banana-mobile-options{
  width:calc(var(--scene-width,100%) * .70);max-width:70%;grid-auto-rows:64px
}
:host([data-layout=portrait]) .banana-mobile-options>button{height:64px;min-height:64px;padding:8px 10px;gap:5px}
:host([data-layout=portrait][data-special-active=true]) .banana-mobile-options{translate:0 -14px}
:host([data-layout=portrait]) .banana-mobile-options>.mobile-special[data-active=true] .feature-name{font-size:clamp(14px,4.8vw,20px);white-space:nowrap}
@media(max-width:360px){
  :host([data-layout=portrait]) .banana-mobile-options>.mobile-special[data-active=true] .feature-menu-count{font-size:7px;letter-spacing:.1em;white-space:nowrap}
}
:host([data-layout=mini]) .rail>:is(.feature-menu,.special-menu){
  --entry-frame-width:15px;
  width:min(180px,calc((100cqi - 10px) / var(--ui-zoom,1)));min-height:74px;padding:8px 12px
}
@media(min-width:700px) and (max-height:500px){
  :host([data-layout=compact]) .rail>:is(.feature-menu,.special-menu){--entry-frame-width:20px;min-height:108px;padding:16px 18px 18px}
}
@media(max-height:650px){
  :host([data-layout=portrait]) .banana-mobile-options{grid-auto-rows:54px}
  :host([data-layout=portrait]) .banana-mobile-options>button{height:54px;min-height:54px;padding:7px 10px;gap:4px}
}
/* The free-spin suitcase (layout.css) takes the home buttons' width beside the reels, and sizes itself from this slot. */
:host([data-layout]:not([data-layout=portrait])) .rail>slot[name=presentation-rail]{width:min(236px,100%);container-type:inline-size}
/* Gold Mine parity: the name grows on hover and keyboard focus, with the rail's overshoot and a warmer glow, and settles back
   when pressed. The whole plaque's lift, press and shine are theme.js's. */
:host([data-layout]) :is(.feature-menu,.special-menu,.banana-mobile-options>button)>.banana-lettering{
  transform-origin:50% 60%;transition:transform .22s cubic-bezier(.2,.8,.3,1.3),filter .22s
}
@media(hover:hover) and (pointer:fine){
  :host([data-layout]) :is(.rail>:is(.feature-menu,.special-menu),.banana-mobile-options>button):hover:not(:disabled)>.banana-lettering{
    transform:scale(1.08);filter:drop-shadow(0 3px 2px #06150de6) drop-shadow(0 0 10px #ffd75acc)
  }
}
:host([data-layout]) :is(.rail>:is(.feature-menu,.special-menu),.banana-mobile-options>button):focus-visible:not(:disabled)>.banana-lettering{
  transform:scale(1.08);filter:drop-shadow(0 3px 2px #06150de6) drop-shadow(0 0 10px #ffd75acc)
}
:host([data-layout]) :is(.rail>:is(.feature-menu,.special-menu),.banana-mobile-options>button):active:not(:disabled)>.banana-lettering{transform:scale(1.03);transition-duration:.08s}
:host([data-reduced=true]) :is(.feature-menu,.special-menu,.banana-mobile-options>button)::after{background:none}


.logo-idle-visual{display:block;position:relative;width:100%;line-height:0;isolation:isolate}
.logo-idle-visual>img.logo-idle-base{display:block;position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1536/553;object-fit:contain}
.logo-idle-visual>img.logo-character-idle{position:absolute;left:0;top:0;z-index:0;display:block;width:20.833333%;height:100%;aspect-ratio:auto;object-fit:fill;filter:none}
.logo-idle-shine{position:absolute;inset:0;z-index:2;pointer-events:none;mask:var(--logo-shine-mask) center/100% 100% no-repeat;-webkit-mask:var(--logo-shine-mask) center/100% 100% no-repeat}
.logo-idle-shine::after{content:'';position:absolute;left:0;top:-20%;width:18%;height:140%;background:linear-gradient(90deg,#fffce200,#fffce2bb 48%,#fffce2 52%,#fffce200);opacity:0;transform:translateX(-160%) skewX(-16deg)}
.logo-idle-visual[data-moving=true] .logo-idle-shine::after{animation:banana-logo-sweep 6s linear infinite}
.logo-idle-visual [hidden]{display:none!important}
@keyframes banana-logo-sweep{
 0%,42%{opacity:0;transform:translateX(-160%) skewX(-16deg)}
 45%{opacity:0}
 48%,58%{opacity:.48}
 61%,100%{opacity:0;transform:translateX(640%) skewX(-16deg)}
}
@media(prefers-reduced-motion:reduce){.logo-idle-shine::after{animation:none!important}}

/* The case file: every general panel (bet amount, menu, settings, sound, autoplay, game information, loading) is a manila
   dossier from the agency's files, typed up and stamped. The shell marks these panels .dialog[data-chrome=panel]; the
   feature panels keep their own art (presentation.css, menu-polish.css). Shell nodes, labels and actions are untouched:
   decorative words are pseudo-content with empty alternative text, and every live amount keeps its shell node.
   The folder is the painted v5 manila (nine-sliced at the purchase folder's .22 scale, its tab strip above it); controls
   sit on green attache felt with brass fittings. Motion is transform/opacity only, and the shell's reduced-motion rules
   (styles.js, theme.js) switch it off. */
.dialog[data-chrome=panel]{
  --ink:#2b1f0d;--ink-2:#40311a;--stamp:#a3241b;--paper-lite:#e4d2a0;--paper-mid:#d5bd84;
  --felt:#0e3b28;--brass-lite:#fff4c4;--brass:#eec45a;--brass-deep:#9a7224;--rim-dark:#120d06;
  --type:'Courier New',Courier,'Nimbus Mono PS',monospace;
  --display:'Lilita One','Cooper Black','Arial Black',sans-serif;
  --sans:'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --felt-bg:radial-gradient(ellipse 85% 120% at 50% 0,#2d6b4b,#0000 70%),url('./assets/board-felt-v1.webp') 0 0/360px,#0e3b28;
  --brass-knob:radial-gradient(circle at 38% 30%,#fff7d4,#f0c75c 40%,#b5862b 74%,#7a581b);
  position:relative;isolation:isolate;overflow:visible;max-height:calc(100% - 24px);margin-top:24px;
  border:0;border-radius:12px;background:none;color:var(--ink);box-shadow:0 28px 70px #000b,0 6px 16px #0007
}
.overlay:has(>.dialog[data-chrome=panel]){background:radial-gradient(ellipse 75% 65% at 50% 46%,#173a2ab3,#020a06f0)}
/* The folder and its tab. */
.dialog[data-chrome=panel]::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;
  border-image:url('./assets/menu-v2/purchase-folder-body-regular-v5.webp') 300 550 320 550 fill / 66px 121px 70.4px 121px stretch
}
.dialog[data-chrome=panel]::after{
  content:'';position:absolute;z-index:-2;top:-22px;left:-1px;width:194px;height:22px;pointer-events:none;
  background:url('./assets/menu-v2/purchase-folder-top-v5.webp') left bottom/contain no-repeat
}

/* Header: a typed file line over the title, a rubber stamp, and a wax-seal close. */
.dialog[data-chrome=panel] .dialog-header{position:relative;align-items:flex-start;gap:12px;padding:24px 22px 10px 30px;border:0}
.dialog[data-chrome=panel] .dialog-header h2{min-width:0;font:400 27px/1.05 var(--display);letter-spacing:.03em;color:var(--ink);text-shadow:0 1px 0 #f6e7bb99;text-wrap:balance}
.dialog[data-chrome=panel] .dialog-header h2::before{
  content:'CASE FILE';content:'CASE FILE' / '';display:block;margin:0 0 7px;
  font:700 10px/1 var(--type);letter-spacing:.24em;color:var(--stamp);text-shadow:none
}
.dialog[data-chrome=panel][data-panel=amount] .dialog-header h2::before{content:'DOSSIER 007 · EYES ONLY';content:'DOSSIER 007 · EYES ONLY' / ''}
.dialog[data-chrome=panel][data-panel=menu] .dialog-header h2::before{content:'HEADQUARTERS';content:'HEADQUARTERS' / ''}
.dialog[data-chrome=panel][data-panel=settings] .dialog-header h2::before{content:'FIELD EQUIPMENT';content:'FIELD EQUIPMENT' / ''}
.dialog[data-chrome=panel][data-panel=volume] .dialog-header h2::before{content:'WIRETAP';content:'WIRETAP' / ''}
.dialog[data-chrome=panel][data-panel=autoplay] .dialog-header h2::before{content:'STANDING ORDERS';content:'STANDING ORDERS' / ''}
.dialog[data-chrome=panel][data-panel=info] .dialog-header h2::before{content:'MISSION BRIEFING';content:'MISSION BRIEFING' / ''}
.dialog[data-chrome=panel][data-panel=speed] .dialog-header h2::before{content:'GETAWAY DRIVER';content:'GETAWAY DRIVER' / ''}
.dialog[data-chrome=panel]:is([data-panel=loading],[data-panel=recovery]) .dialog-header h2::before{content:'STAND BY';content:'STAND BY' / ''}
.dialog[data-chrome=panel]:is([data-panel=amount],[data-panel=menu],[data-panel=settings],[data-panel=autoplay],[data-panel=info]) .dialog-header::after{
  content:'TOP SECRET';content:'TOP SECRET' / '';position:absolute;top:31px;right:78px;padding:5px 9px 4px;pointer-events:none;
  font:400 13px/1 var(--display);letter-spacing:.14em;color:var(--stamp);
  border:2.5px solid currentColor;border-radius:5px;box-shadow:inset 0 0 0 2px #c8ad6b,inset 0 0 0 3.5px currentColor;
  rotate:-8deg;opacity:.8;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/140px 48px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/140px 48px
}
.dialog[data-chrome=panel] .dialog-header [data-action=close]{
  flex:none;width:44px;height:44px;margin:-3px -3px 0 0;padding:0;border:2px solid #4a0f0a;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#ea6151,#b3261e 50%,#76140e);color:#fff3d6;
  box-shadow:inset 0 2px 0 #ffa79566,inset 0 -3px 0 #0003,0 3px 0 #3d0b07,0 6px 10px #0006;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.4),box-shadow .18s
}
.dialog[data-chrome=panel] .dialog-header [data-action=close] svg{width:18px;height:18px;stroke-width:3}

/* Body copy is typed; controls sit on the paper. */
.dialog[data-chrome=panel] .dialog-content{padding:6px 30px 18px;scrollbar-width:thin;scrollbar-color:#8a6a2a #0000}
/* Without a footer (menu, sound) the scroll area stops above the folder's painted foot. */
.dialog[data-chrome=panel] .dialog-content:has(+.dialog-footer[hidden]){margin-bottom:26px;padding-bottom:4px}
.dialog[data-chrome=panel] .dialog-description{margin-bottom:14px;font:700 12px/1.55 var(--type);letter-spacing:.03em;color:var(--ink-2)}
.dialog[data-chrome=panel] .small{color:var(--ink-2)}
.dialog[data-chrome=panel] .label{font:700 11px/1.3 var(--type);letter-spacing:.16em;color:var(--ink-2)}
.dialog[data-chrome=panel] :is(button,input,summary,[tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Footer: a perforated tear line and a brass plate button. */
.dialog[data-chrome=panel] .dialog-footer{position:relative;padding:16px 30px 30px;border:0}
.dialog[data-chrome=panel] .dialog-footer::before{content:'';position:absolute;top:0;left:30px;right:30px;border-top:2px dashed #2b1f0d3d}
.dialog[data-chrome=panel] .dialog-footer .button{
  min-height:52px;border:2px solid var(--ink);border-radius:12px;
  background:linear-gradient(#fff4c4,#f3d067 48%,#cf9b34);color:var(--ink);
  font:400 20px/1 var(--display);letter-spacing:.08em;text-shadow:0 1px 0 #fff7d4;-webkit-text-stroke:0;
  box-shadow:inset 0 2px 0 #fffbe8,inset 0 -3px 0 #a87a2366,0 4px 0 var(--ink),0 9px 14px #0005;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.3),box-shadow .16s,filter .16s
}

/* Felt trays: the bet amounts and the autoplay rounds sit in the case's green lining, edged in brass. */
.dialog[data-chrome=panel] :is(.amount-grid,.auto-counts){
  gap:12px 10px;padding:16px 14px 14px;border:2px solid var(--ink);border-radius:16px;background:var(--felt-bg);
  box-shadow:inset 0 0 0 3px #eec45a55,inset 0 10px 18px #0007,0 2px 0 #fff3cc55
}
/* Plaques: every amount is the same calm ivory file tag with typed-ink figures (the owner, 2026-10-12: the per-tier colours
   were too busy); only the selected one stands out. */
.dialog[data-chrome=panel] :is(.amount-grid .choice,.auto-counts .count-choice){
  position:relative;isolation:isolate;min-width:0;min-height:52px;padding:6px 4px;border:2px solid var(--rim-dark);border-radius:9px;
  background:linear-gradient(#f6edcf,#e2d1a0);color:var(--ink);font:800 15px/1.1 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;
  text-shadow:0 1px 0 #fff8e299;box-shadow:inset 0 1px 0 #fffbea,0 3px 0 var(--rim-dark),0 6px 9px #0005;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.35),box-shadow .18s,filter .18s
}
.dialog[data-chrome=panel] :is(.amount-grid .choice,.auto-counts .count-choice)::before{content:none}
/* Selected: the plaque lifts in a gold edge and glow and is stamped with the agency's wax seal. */
.dialog[data-chrome=panel] :is(.amount-grid .choice.selected,.auto-counts .count-choice[aria-pressed=true]){
  z-index:1;transform:translateY(-3px);border-color:var(--rim-dark);color:var(--ink);background:linear-gradient(#fff6d6,#f2d982);
  box-shadow:inset 0 1px 0 #fffbea,0 0 0 3px #ffe08a,0 0 16px 3px #ffd34f80,0 5px 0 var(--rim-dark),0 10px 14px #0007
}
.dialog[data-chrome=panel] :is(.amount-grid .choice,.auto-counts .count-choice)::after{content:none}
.dialog[data-chrome=panel] :is(.amount-grid .choice.selected,.auto-counts .count-choice[aria-pressed=true])::after{
  content:'';position:absolute;top:-12px;right:-10px;width:28px;height:28px;pointer-events:none;rotate:-12deg;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1.4 22.8 4 26.4 2.5 28.1 6 32 5.8 32.4 9.6 36.1 10.7 35.2 14.5 38.3 16.8 36.2 20 38.3 23.2 35.2 25.5 36.1 29.3 32.4 30.4 32 34.2 28.1 34 26.4 37.5 22.8 36 20 38.6 17.2 36 13.6 37.5 11.9 34 8 34.2 7.6 30.4 3.9 29.3 4.8 25.5 1.7 23.2 3.8 20 1.7 16.8 4.8 14.5 3.9 10.7 7.6 9.6 8 5.8 11.9 6 13.6 2.5 17.2 4Z' fill='%23a61f18' stroke='%234a0d08' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23c6372b' stroke='%23801610' stroke-width='1.3'/%3E%3Cpath d='M14.4 20.4l3.8 3.8 7.6-8.2' fill='none' stroke='%23fff1cf' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 1px #0008);animation:dossier-stamp .34s cubic-bezier(.2,.9,.3,1.35) both
}
@keyframes dossier-stamp{0%{opacity:0;scale:2.2;rotate:-34deg}55%{opacity:1}100%{opacity:1;scale:1;rotate:-12deg}}

/* Bet amount: the counter window between two brass dials, then the plaques. */
.dialog[data-chrome=panel][data-panel=amount] .stepper{
  display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;
  border:2px solid var(--ink);border-radius:16px;background:var(--felt-bg);
  box-shadow:inset 0 0 0 3px #eec45a88,inset 0 0 0 4px #0b2418,inset 0 8px 16px #0008,0 2px 0 #fff3cc55
}
.dialog[data-chrome=panel][data-panel=amount] .selected-amount{
  margin:0;padding:4px 0;text-align:center;font:800 36px/1.1 var(--sans);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;
  color:#fff2c6;text-shadow:0 2px 0 #062016,0 0 18px #ffd75a40
}
.dialog[data-chrome=panel] :is(.stepper .icon-button,.volume-control .icon-button){
  display:grid;place-items:center;width:52px;height:52px;padding:0;border:2px solid var(--rim-dark);border-radius:50%;background:var(--brass-knob);color:var(--ink);
  box-shadow:inset 0 -3px 0 #0003,inset 0 2px 0 #fff9df,0 3px 0 var(--rim-dark),0 6px 10px #0007;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.4),box-shadow .16s,filter .16s
}
.dialog[data-chrome=panel] .stepper .icon-button svg{width:22px;height:22px;stroke-width:3}
.dialog[data-chrome=panel] :is(.stepper .icon-button,.volume-control .icon-button):disabled{opacity:.5;filter:grayscale(.6) brightness(.85)}
.dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Menu: index-card rows with brass badges; the bonus rows are lined in the cases' felt so the lettering stands out. */
.dialog[data-chrome=panel] .menu-list{gap:10px}
.dialog[data-chrome=panel] .menu-list .button{
  position:relative;min-height:52px;padding:8px 14px 8px 9px;gap:12px;border:2px solid var(--ink);border-radius:10px;
  background:linear-gradient(#ead9aa,#d3ba7c);color:var(--ink);font:800 14px/1.2 var(--sans);letter-spacing:.08em;
  box-shadow:inset 0 1px 0 #fff6d699,0 3px 0 var(--ink),0 6px 10px #0003;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .18s,filter .18s
}
.dialog[data-chrome=panel] .menu-list .button>svg{box-sizing:border-box;width:32px;height:32px;padding:7px;border:1.5px solid var(--ink);border-radius:50%;background:var(--brass-knob);color:var(--ink);stroke-width:2.4}
.dialog[data-chrome=panel] .menu-list .button[data-action=open]:not([data-special-entry])::after{content:'›';content:'›' / '';margin-left:auto;font:400 26px/.8 var(--display);color:var(--ink)}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button:is([data-action=feature],[data-special-entry]){
  min-height:58px;background:var(--felt-bg);color:#fff2c6;
  box-shadow:inset 0 0 0 2px #eec45a80,inset 0 6px 12px #0006,0 3px 0 var(--ink),0 6px 10px #0004
}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button[data-action=feature][data-mode=super]{
  background:radial-gradient(ellipse 85% 120% at 50% 0,#7a3aa0,#0000 70%),linear-gradient(#4a1670e0,#26073ef0),url('./assets/board-felt-v1.webp') 0 0/360px,#33094f;
  box-shadow:inset 0 0 0 2px #e9b8ff70,inset 0 6px 12px #0006,0 3px 0 var(--ink),0 6px 10px #0004
}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button:is([data-action=feature],[data-special-entry])>small{font:800 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff2c6;text-shadow:0 1px 0 #000a}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button:is([data-action=feature],[data-special-entry])>span.banana-lettering{height:28px;transition:transform .2s cubic-bezier(.2,.8,.3,1.3),filter .2s;transform-origin:50% 55%}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button[data-special-entry][data-active=true]{box-shadow:inset 0 0 0 2px #ff9d8a,inset 0 6px 12px #0006,0 3px 0 var(--ink),0 6px 10px #0004}
.dialog[data-chrome=panel] .menu-utilities{position:relative;margin:16px 0 14px;padding:18px 14px 6px;border:2px dashed #2b1f0d45;border-radius:12px;background:#f3e3b72e}
.dialog[data-chrome=panel] .menu-utilities::before{
  content:'FIELD KIT';content:'FIELD KIT' / '';position:absolute;top:-9px;left:14px;padding:2px 8px;border-radius:3px;
  background:#c9ae6e;font:700 10px/1.2 var(--type);letter-spacing:.22em;color:var(--stamp)
}
.dialog[data-chrome=panel] .menu-secondary{padding-top:14px;border-top:2px dashed #2b1f0d3d}
.dialog[data-chrome=panel] .menu-secondary .button{min-height:48px;background:linear-gradient(#f1e3b9,#dfc996);color:var(--ink)}

/* Rows, labels, speed pill and switches. */
.dialog[data-chrome=panel] :is(.auto-speed,.auto-details,.switch-row){color:var(--ink);font:800 13px/1.3 var(--sans);letter-spacing:.06em}
.dialog[data-chrome=panel] .auto-details{color:var(--ink-2)}
.dialog[data-chrome=panel] .auto-cost{font:800 15px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.dialog[data-chrome=panel] .auto-count-summary{font:400 21px/1 var(--display);letter-spacing:.04em;color:var(--stamp)}
.dialog[data-chrome=panel] .autoplay-heading{margin:2px 0 12px}
.dialog[data-chrome=panel] .auto-counts{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.dialog[data-chrome=panel] .auto-counts .count-choice{min-height:56px;font:400 22px/1 var(--display);letter-spacing:.02em}
.dialog[data-chrome=panel] .stop-options{margin-top:14px;padding-top:14px;border-top:2px dashed #2b1f0d3d}
.dialog[data-chrome=panel] .auto-note{font:700 11px/1.5 var(--type);color:var(--ink-2)}
.dialog[data-chrome=panel] .inline-speed{
  min-width:112px;min-height:44px;gap:8px;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;
  background:linear-gradient(#fbecb8,#e3bf5f);color:var(--ink);font:800 12px/1 var(--sans);letter-spacing:.1em;
  box-shadow:inset 0 1px 0 #fffbe8,0 3px 0 var(--ink);transition:transform .16s cubic-bezier(.2,.8,.3,1.3),box-shadow .16s
}
.dialog[data-chrome=panel] .inline-speed[aria-pressed=true]{background:var(--felt-bg);color:#ffe9a6;box-shadow:inset 0 0 0 2px #eec45a88,0 3px 0 var(--ink)}
.dialog[data-chrome=panel] .inline-speed svg{width:19px;height:19px}
.dialog[data-chrome=panel] .switch-track{
  flex:none;width:52px;height:30px;padding:4px;border:2px solid var(--ink);border-radius:16px;background:#8c7443;
  box-shadow:inset 0 2px 4px #0007,0 1px 0 #fff3cc77;transition:background-color .2s
}
.dialog[data-chrome=panel] .switch-track:after{
  width:18px;height:18px;border:1.5px solid var(--ink);background:var(--brass-knob);box-shadow:0 1px 2px #0007;
  transition:transform .22s cubic-bezier(.2,.8,.3,1.4)
}
.dialog[data-chrome=panel] .switch-row input:checked+.switch-track{background:#17573b;border-color:var(--ink)}
.dialog[data-chrome=panel] .switch-row input:checked+.switch-track:after{transform:translateX(22px);background:radial-gradient(circle at 38% 30%,#fffbe6,#f6d77a 45%,#b88d2f)}
.dialog[data-chrome=panel] .switch-row input:focus-visible+.switch-track{outline:3px solid var(--ink);outline-offset:3px}
.dialog[data-chrome=panel] .switch-row input{width:56px}

/* Volume: brass knobs and a groove with a brass fill. */
.dialog[data-chrome=panel] .volume-control .icon-button{width:42px;height:42px}
.dialog[data-chrome=panel] .volume-control .icon-button svg{width:20px;height:20px}
.dialog[data-chrome=panel] .volume-control .icon-button[aria-pressed=true]{background:radial-gradient(circle at 36% 30%,#ea6151,#b3261e 50%,#76140e);color:#fff3d6;border-color:#4a0f0a}
.dialog[data-chrome=panel] .range-field{color:var(--ink);font:800 12px/1.3 var(--sans);letter-spacing:.07em}
.dialog[data-chrome=panel] .range-field output{font:700 12px/1.3 var(--type);color:var(--stamp)}
.dialog[data-chrome=panel] .range-field input::-webkit-slider-runnable-track{
  height:8px;border-radius:6px;background:linear-gradient(90deg,#b9862b,#f6d872) 0 0/var(--range-fill,100%) 100% no-repeat,#7d6537;
  box-shadow:inset 0 1px 3px #000a,0 1px 0 #fff3cc77
}
.dialog[data-chrome=panel] .range-field input::-webkit-slider-thumb{
  width:24px;height:24px;margin-top:-8px;border:2px solid var(--ink);border-radius:50%;background:var(--brass-knob);box-shadow:0 2px 3px #0007;
  transition:transform .15s cubic-bezier(.2,.8,.3,1.4)
}
.dialog[data-chrome=panel] .range-field input:active::-webkit-slider-thumb{transform:scale(1.15)}
.dialog[data-chrome=panel] .range-field input::-moz-range-track{height:8px;border-radius:6px;background:#7d6537}
.dialog[data-chrome=panel] .range-field input::-moz-range-progress{height:8px;border-radius:6px;background:linear-gradient(90deg,#b9862b,#f6d872)}
.dialog[data-chrome=panel] .range-field input::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;background:var(--brass-knob)}

/* Game information: every section is a file card with a typed tab; the copy is ink on paper. */
.dialog[data-chrome=panel] .info-contents{margin-bottom:16px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-lite);box-shadow:0 3px 0 #2b1f0d40}
.dialog[data-chrome=panel] :is(.info-contents,.info-section)>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.dialog[data-chrome=panel] :is(.info-contents,.info-section)>summary::-webkit-details-marker{display:none}
.dialog[data-chrome=panel] :is(.info-contents,.info-section)>summary::before{
  content:'';flex:none;width:8px;height:8px;margin:0 3px 0 2px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);rotate:-45deg;transition:rotate .2s
}
.dialog[data-chrome=panel] :is(.info-contents,.info-section)[open]>summary::before{rotate:45deg}
.dialog[data-chrome=panel] .info-contents summary{font:700 12px/1.2 var(--type);letter-spacing:.2em;color:var(--ink)}
.dialog[data-chrome=panel] .info-contents nav button{
  min-height:44px;border:1.5px solid var(--ink);border-radius:7px;background:#f6ebcb;color:var(--ink);
  font:800 11px/1.25 var(--sans);letter-spacing:.06em;box-shadow:0 2px 0 var(--ink);transition:transform .15s,box-shadow .15s
}
.dialog[data-chrome=panel] .info-section{margin:0 0 12px;padding:0;border:2px solid var(--ink);border-radius:10px;background:#ead9ac;overflow:hidden;box-shadow:0 3px 0 #2b1f0d55}
.dialog[data-chrome=panel] .info-section>summary{padding:13px 16px;background:linear-gradient(#dcc48b,#c9ad6b);color:var(--ink)}
.dialog[data-chrome=panel] .info-section[open]>summary{border-bottom:2px dashed #2b1f0d45}
.dialog[data-chrome=panel] .info-section>summary h3{font:400 18px/1.1 var(--display);letter-spacing:.04em;color:var(--ink)}
.dialog[data-chrome=panel] .info-section-content p,.dialog[data-chrome=panel] .info-body p{color:var(--ink);font:500 14px/1.65 var(--sans)}
.dialog[data-chrome=panel] .info-body .small{color:var(--ink-2)}
.dialog[data-chrome=panel] .info-body :is(td,th){border-color:#2b1f0d45;color:var(--ink)}
.dialog[data-chrome=panel] .info-body th{background:#2b1f0d17;font-weight:800}
.dialog[data-chrome=panel] .info-body .quote{background:#f6ebcb;border:1.5px solid var(--ink);color:var(--ink)}
.dialog[data-chrome=panel] .info-body .table-wrap{scrollbar-color:#8a6a2a #0000}

/* Speed list, loading and recovery. */
.dialog[data-chrome=panel] .speed-choice{border:2px solid var(--ink);background:linear-gradient(#ead9aa,#d3ba7c);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.dialog[data-chrome=panel] .speed-choice.selected{background:var(--felt-bg);color:#ffe9a6}
.dialog[data-chrome=panel] .speed-choice.selected .small{color:#f1e3b9}
.dialog[data-chrome=panel] .state-symbol{border:2px solid var(--ink);background:var(--brass-knob);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.dialog[data-chrome=panel] .loading-line{height:12px;border:2px solid var(--ink);border-radius:8px;background:#7d6537;box-shadow:inset 0 1px 3px #0008}
.dialog[data-chrome=panel] .loading-line span{background:linear-gradient(90deg,#b9862b,#f6d872);border-radius:4px}

/* Hover, press and keyboard: everything lifts a little, presses in, and the dials and seal turn. Hover only where a mouse is. */
@media(hover:hover) and (pointer:fine){
  .dialog[data-chrome=panel] .dialog-header [data-action=close]:hover{transform:scale(1.07)}
  .dialog[data-chrome=panel] .dialog-footer .button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 2px 0 #fffbe8,inset 0 -3px 0 #a87a2366,0 6px 0 var(--ink),0 12px 18px #0005}
  .dialog[data-chrome=panel] :is(.amount-grid .choice:not(.selected),.auto-counts .count-choice:not([aria-pressed=true])):hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 #fffbea,0 0 0 2px #eec45a99,0 5px 0 var(--rim-dark),0 8px 12px #0005}
  .dialog[data-chrome=panel] :is(.stepper .icon-button,.volume-control .icon-button):not(:disabled):hover{transform:scale(1.07)}
  .dialog[data-chrome=panel] .menu-list .button:not(:disabled):hover{transform:translateX(4px);filter:brightness(1.05)}
  .dialog[data-chrome=panel][data-panel=menu] .menu-list .button:is([data-action=feature],[data-special-entry]):not(:disabled):hover>span.banana-lettering{transform:scale(1.08);filter:drop-shadow(0 2px 1px #07170cbb) drop-shadow(0 0 9px #ffd75a99)}
  .dialog[data-chrome=panel] .inline-speed:not(:disabled):hover{transform:translateY(-1px)}
  .dialog[data-chrome=panel] .info-contents nav button:hover{transform:translateY(-1px)}
  .dialog[data-chrome=panel] .range-field input:hover::-webkit-slider-thumb{transform:scale(1.1)}
}
.dialog[data-chrome=panel][data-panel=menu] .menu-list .button:is([data-action=feature],[data-special-entry]):focus-visible>span.banana-lettering{transform:scale(1.08)}
.dialog[data-chrome=panel] .dialog-header [data-action=close]:active{transform:scale(.92);box-shadow:inset 0 2px 4px #0006,0 1px 0 #3d0b07}
.dialog[data-chrome=panel] .dialog-footer .button:not(:disabled):active{transform:translateY(3px);filter:brightness(.97);box-shadow:inset 0 2px 4px #7a581b66,0 1px 0 var(--ink),0 3px 6px #0004;transition-duration:.06s}
.dialog[data-chrome=panel] :is(.amount-grid .choice,.auto-counts .count-choice):active{transform:translateY(1px) scale(.96);box-shadow:0 1px 0 var(--rim-dark),0 2px 4px #0006;transition-duration:.06s}
.dialog[data-chrome=panel] :is(.stepper .icon-button,.volume-control .icon-button):not(:disabled):active{transform:translateY(2px) scale(.93);box-shadow:inset 0 2px 4px #0005,0 1px 0 var(--rim-dark);transition-duration:.06s}
.dialog[data-chrome=panel] .menu-list .button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff6d699,0 1px 0 var(--ink),0 2px 4px #0003;transition-duration:.06s}
.dialog[data-chrome=panel] .inline-speed:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);transition-duration:.06s}
.dialog[data-chrome=panel] .info-contents nav button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.dialog[data-chrome=panel] :is(.amount-grid,.auto-counts) :is(.choice,.count-choice):focus-visible{outline:3px solid #fff4c8;outline-offset:4px}
.dialog[data-chrome=panel] .range-field input{border-radius:10px}
.dialog[data-chrome=panel] .stepper .icon-button:focus-visible{outline-color:#fff4c8}

/* Phones: a narrower file, three plaques across, no stamp (the title takes the width). */
@media(max-width:520px){
  .dialog[data-chrome=panel] .dialog-header{padding:21px 16px 8px 22px}
  .dialog[data-chrome=panel] .dialog-header h2{font-size:23px}
  .dialog[data-chrome=panel] .dialog-header::after{display:none}
  .dialog[data-chrome=panel] .dialog-content{padding:4px 20px 14px}
  .dialog[data-chrome=panel] .dialog-footer{padding:14px 20px 26px}
  .dialog[data-chrome=panel] .dialog-footer::before{left:20px;right:20px}
  .dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 8px;padding:14px 11px 12px}
  .dialog[data-chrome=panel] .amount-grid .choice{min-height:48px;font-size:14px}
  .dialog[data-chrome=panel][data-panel=amount] .stepper{grid-template-columns:48px minmax(0,1fr) 48px;padding:8px 10px}
  .dialog[data-chrome=panel][data-panel=amount] .stepper .icon-button{width:48px;height:48px}
  .dialog[data-chrome=panel][data-panel=amount] .selected-amount{font-size:30px}
  .dialog[data-chrome=panel] .auto-counts{gap:8px;padding:13px 10px 11px}
  /* Rule tables keep each figure whole (0.25x, not 0.25 / x); a wide one scrolls inside its own frame. */
  .dialog[data-chrome=panel] .info-section-content{padding:4px 12px 14px}
  .dialog[data-chrome=panel] .info-body :is(td,th){padding:10px 7px;overflow-wrap:normal}
}
@media(max-width:359px){
  .dialog[data-chrome=panel] .dialog-content{padding-inline:16px}
  .dialog[data-chrome=panel] .amount-grid .choice{font-size:13px}
  /* The six-column paytable fits a 320 px phone without scrolling sideways (it ran 17 px over): tighter cells and symbols. */
  .dialog[data-chrome=panel] .info-section-content{padding-inline:8px}
  .dialog[data-chrome=panel] .info-body :is(td,th){padding:9px 4px;font-size:10.5px}
  .dialog[data-chrome=panel] .info-symbol{min-width:0;gap:4px;font-size:10.5px}
  .dialog[data-chrome=panel] .info-symbol img{width:32px;height:32px}
}
/* Short landscape: one typed line fewer, six plaques across so the amounts stay in view. */
@media(max-height:520px){
  .dialog[data-chrome=panel]{margin-top:20px;max-height:calc(100% - 20px)}
  .dialog[data-chrome=panel] .dialog-header{padding-top:16px;padding-bottom:6px}
  .dialog[data-chrome=panel] .dialog-header h2{font-size:21px}
  .dialog[data-chrome=panel] .dialog-header h2::before{margin-bottom:4px;font-size:9px}
  .dialog[data-chrome=panel] .dialog-header::after{top:20px;font-size:11px}
  .dialog[data-chrome=panel] .dialog-description{margin-bottom:8px}
  .dialog[data-chrome=panel][data-panel=amount] .stepper{margin-bottom:10px;padding:5px 10px}
  .dialog[data-chrome=panel][data-panel=amount] .stepper .icon-button{width:42px;height:42px}
  .dialog[data-chrome=panel][data-panel=amount] .selected-amount{font-size:28px}
  .dialog[data-chrome=panel] .amount-grid .choice{min-height:44px}
  .dialog[data-chrome=panel] .dialog-footer{padding-top:10px;padding-bottom:22px}
  .dialog[data-chrome=panel] .dialog-footer .button{min-height:46px;font-size:18px}
}
@media(max-height:520px) and (min-width:600px){.dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px;padding:12px 10px 10px}}
:host([data-reduced=true]) .dialog[data-chrome=panel] *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.dialog[data-chrome=panel] *{transition:none!important}.dialog[data-chrome=panel] *::after{animation:none!important}}



/* The mission desk: illustrated cases, brass fittings and distinct equipment cards.
   Prices remain the shell's live nodes. Purchase modal geometry lives in presentation.css. */
.overlay:has(>.dialog:is([data-panel=features],[data-panel=special-spins])){
  background:radial-gradient(ellipse at 50% 38%,#173c2cbd,#030d09ed 76%);backdrop-filter:blur(16px)
}
.dialog:is([data-panel=features],[data-panel=special-spins]){width:min(690px,100%);max-width:690px;gap:0}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{padding-bottom:20px}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header h2.banana-lettering{height:50px;filter:drop-shadow(0 4px 2px #000a)}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close]{border:1px solid #bda66b;background:linear-gradient(#1d3229,#08140f);box-shadow:inset 0 0 0 3px #06110a,0 4px 10px #0008}
/* Down only: overflow-y alone makes overflow-x auto too, and Engine counts a sideways scrollbar (Gold Mine, 2026-10-12). */
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-content{flex:0 1 auto;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ad9050 #0b1d15;padding:6px 8px 12px}
/* The entire option is the suitcase's broad side; all live content sits on its leather face. */
.dialog[data-panel=features]{width:min(800px,100%);max-width:800px}
.dialog[data-panel=features] .menu-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;container-type:inline-size;
  height:286px;min-height:286px;max-height:none;padding:62px 30px 28px;border:0;border-radius:0;
  background:none;box-shadow:none;isolation:isolate;color:#fff2ca;overflow:visible;
  transition:transform .22s cubic-bezier(.2,.8,.3,1.3),filter .2s
}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice[data-mode=super]{background:none}
.dialog[data-panel=features] .button.feature-mission-choice::before,
.dialog[data-panel=features] .button.feature-mission-choice::after{display:none!important}
.dialog[data-panel=features] .feature-mission-choice .feature-case-art{
  position:absolute!important;inset:0;z-index:-1!important;display:block;width:100%;height:100%;object-fit:fill;margin:0;
  pointer-events:none;filter:drop-shadow(0 8px 5px #0009)
}
.dialog[data-panel=features] .feature-mission-choice .feature-classification{font:800 9px/1.4 'Avenir Next',Arial,sans-serif;letter-spacing:.2em;color:#dacba0;text-transform:uppercase}
.dialog[data-panel=features] .feature-mission-choice[data-mode=super] .feature-classification{color:#e0c7ee}
.dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{height:38px;margin:0;filter:drop-shadow(0 3px 1px #0009)}
.dialog[data-panel=features] .button.feature-mission-choice>.bonus-blurb{
  font:650 13px/1.4 'Avenir Next',Arial,sans-serif;letter-spacing:0;max-width:265px;min-height:36px;
  margin:0;padding:0;color:#f5edd6;text-shadow:0 1px 2px #000b;text-wrap:balance
}
.dialog[data-panel=features] .button.feature-mission-choice>small.feature-entry-price{
  display:block;width:100%;max-width:100%;margin:2px 0 0;padding:8px 0 0;border:0;border-top:1px solid #e7cc743d;border-radius:0;
  background:none;color:#fff0b6;font:850 max(15px,min(30px,calc((100cqi - 8px) / (var(--price-chars,8) * .67))))/1.1 'Avenir Next','Segoe UI',Arial,sans-serif;
  letter-spacing:.01em;text-shadow:0 2px 2px #000b;box-shadow:none
}
.dialog[data-panel=features] .button.feature-mission-choice[data-mode=super]>small.feature-entry-price{background:none;color:#f4ddff;border-color:#dfb8f04d;text-shadow:0 2px 2px #180923;box-shadow:none}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice:is(:hover,:focus-visible):not(:disabled){transform:translateY(-3px) scale(1.02);filter:brightness(1.08)}
/* Gold Mine parity on the cases: a glow in the edition's colour rises behind the hovered case, a shine crosses its leather
   (masked to the case's own silhouette), and the name grows. Opacity and position only, so nothing repaints the art. */
.dialog[data-panel=features] .menu-list .button.feature-mission-choice{--case-mask:url('./assets/menu-v2/feature-case-panel-regular-v4.webp');--case-glow:#ffd75a}
.dialog[data-panel=features] .menu-list .button.feature-mission-choice[data-mode=super]{--case-mask:url('./assets/menu-v2/feature-case-panel-super-v4.webp');--case-glow:#e7a8ff}
/* The glow is the case art's own drop shadow: a halo box reaching past the case (it was 12% wider and 16% lower) made the
   chooser scroll 38 px sideways and 34 px down at every size. A shadow is drawn outside the box without enlarging it.
   It is a tight, soft halo (gone within ~15 px of the case) and the scroller below leaves it that much room, so the
   chooser's overflow never cuts it off in a hard rectangle. */
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice .feature-case-art{transition:filter .25s}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice:is(:hover,:focus-visible):not(:disabled) .feature-case-art{filter:drop-shadow(0 8px 5px #0009) drop-shadow(0 0 9px color-mix(in srgb,var(--case-glow) 55%,#0000))}
/* Room for the halo, the hover lift and the case's own shadow inside the scroller (overflow:hidden auto clips at its padding
   edge): the scroller reaches 12 px past the chooser on every side and pads the same back, so the cases keep their size and
   place and nothing scrolls. On phones that edge is the screen's own (the overlay's 12 px padding). */
:host([data-layout]) .dialog[data-panel=features][data-chrome=feature] .dialog-content{margin:-12px;padding:18px 20px 24px}
:host([data-layout=portrait]) .dialog[data-panel=features][data-chrome=feature] .dialog-content{margin:-12px;padding:17px 15px 22px}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice::after{
  content:'';display:block!important;position:absolute;inset:0;z-index:0;border:0;border-image:none;border-radius:0;box-shadow:none;pointer-events:none;
  background:linear-gradient(105deg,#0000 40%,#fff6d070 50%,#0000 60%) 120% 0/300% 100% no-repeat;
  -webkit-mask:var(--case-mask) center/100% 100% no-repeat;mask:var(--case-mask) center/100% 100% no-repeat
}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice:is(:hover,:focus-visible):not(:disabled)::after{background-position:-20% 0;box-shadow:none;transition:background-position .7s ease-out}
.dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{transform-origin:50% 60%;transition:transform .22s cubic-bezier(.2,.8,.3,1.3),filter .22s}
:host([data-layout]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice:is(:hover,:focus-visible):not(:disabled)>span.banana-lettering{transform:scale(1.08);filter:drop-shadow(0 3px 1px #0009) drop-shadow(0 0 10px color-mix(in srgb,var(--case-glow) 70%,#0000))}
:host([data-reduced=true]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice::after{display:none!important}

/* Equipment choices retain the familiar wild symbols and each tier's own colour. */
.dialog[data-panel=special-spins] .menu-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{
  --equipment-accent:#8fcc9b;--equipment-surface:#1c3a2b;
  grid-template-columns:83px minmax(0,1fr);grid-template-rows:1fr auto;gap:8px 13px;min-height:144px;padding:16px 14px 13px;
  border:1px solid color-mix(in srgb,var(--equipment-accent) 58%,#2d331f);border-radius:9px;
  background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--equipment-accent) 16%,transparent),transparent 70%),linear-gradient(125deg,var(--equipment-surface),#0b1913);
  box-shadow:inset 0 0 0 3px #04100999,inset 0 0 0 4px #efe0ac0b,0 4px 0 #030d09,0 12px 22px #0007;text-transform:none
}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice[data-mode=bazooka]{--equipment-accent:#eebd51;--equipment-surface:#3c3420}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice[data-mode=double_bazooka]{--equipment-accent:#c993f1;--equipment-surface:#33243d}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice[data-mode=triple_bazooka]{--equipment-accent:#ee9661;--equipment-surface:#40291e}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice.special-spin-banana{--equipment-accent:#ffe174;--equipment-surface:#3d3e1c;grid-column:1/-1;min-height:118px}
.dialog[data-panel=special-spins] .special-spin-choice::before{content:'';position:absolute;left:16px;right:16px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--equipment-accent),transparent);opacity:.9}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art{height:101px;position:relative;filter:drop-shadow(0 5px 4px #0006)}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:74px}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{height:80px;width:83px}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-copy{gap:5px}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-classification{font-size:8px;line-height:1.2;letter-spacing:.15em;color:var(--equipment-accent);text-transform:uppercase}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-title.banana-lettering{height:31px;max-width:260px;background-position:left center!important;filter:drop-shadow(0 2px 1px #000b)}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-title.banana-lettering::after{mask-position:left center;-webkit-mask-position:left center}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-guarantee{max-width:none;font:600 11px/1.4 'Avenir Next',Arial,sans-serif;letter-spacing:0;color:#f2e9d0;text-transform:none}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-cost{padding-top:8px;border-color:color-mix(in srgb,var(--equipment-accent) 25%,transparent)}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-price{font-size:24px;text-shadow:0 2px 2px #0009}
.dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-price.per-spin::after{font-size:10px;letter-spacing:.06em;color:#c5bc9f;text-transform:uppercase}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer{flex:none;padding:14px 0 0}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-bet{padding:10px 22px 12px;border:1px solid #ae96554d;border-radius:12px;background:linear-gradient(#14271fd9,#05120dd9);box-shadow:inset 0 1px #fae4a313,0 7px 20px #0005}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-bet .label{font-size:9px;color:#cfc29a;letter-spacing:.2em}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-bet-value{color:#fff0b0;-webkit-text-stroke:0;text-shadow:0 2px #000}
.dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-bet-step{border-width:1px;background:linear-gradient(#344e38,#122a1f);box-shadow:inset 0 0 0 2px #09190d,0 2px 0 #030c07}
.dialog:is([data-panel=features],[data-panel=special-spins]) button:focus-visible{outline:2px solid #fff0b7;outline-offset:-5px}
/* Keyboard focus lifts a case as hover does (Gold Mine); the ring sits inside its leather. */

/* Portrait phones stack the full-size cases and use readable equipment rows. */
:host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{grid-template-columns:20px minmax(0,1fr) 36px;gap:4px;padding-bottom:12px}
:host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header h2.banana-lettering{height:39px}
:host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-content{padding:5px 3px 10px}
:host([data-layout=portrait]) .dialog[data-panel=features] .menu-list{grid-template-columns:minmax(0,1fr);gap:14px}
:host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{height:288px;min-height:288px;padding:64px 33px 28px;gap:8px}
:host([data-layout=portrait]) .dialog[data-panel=features] .feature-mission-choice .feature-classification{font-size:9px;letter-spacing:.15em}
:host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{height:38px}
:host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>.bonus-blurb{font-size:13px;line-height:1.4;min-height:36px;margin:0}
:host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>small.feature-entry-price{font-size:max(14px,min(28px,calc((100cqi - 8px) / (var(--price-chars,8) * .67))));padding:8px 0 0}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list{grid-template-columns:minmax(0,1fr);gap:9px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{grid-template-columns:72px minmax(0,1fr);min-height:0;padding:10px 12px;gap:5px 12px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art{height:77px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:57px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{height:64px;width:72px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-copy{gap:3px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-title.banana-lettering{height:25px;max-width:210px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-guarantee{font-size:10px;line-height:1.35}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-cost{padding-top:5px}
:host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-price{font-size:20px}
:host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer{padding:9px 0 0}
@media(max-width:359px){
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list{gap:12px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{height:248px;min-height:248px;padding:54px 25px 24px;gap:6px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{height:34px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>small.feature-entry-price{font-size:max(13px,min(25px,calc((100cqi - 8px) / (var(--price-chars,8) * .67))))}
 :host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice{grid-template-columns:58px minmax(0,1fr);gap:4px 9px;padding:9px 10px}
 :host([data-layout=portrait]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{width:58px}
}
/* A chooser that runs past its room (phones) says so at its foot until its end is in view (theme.js sets data-more): the cards
   fade into the dark above the bet, and an arrow bobs. Both stand outside the scroller (on the footer), so scrolling repaints
   nothing of the art. */
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer{position:relative}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:46px;z-index:3;pointer-events:none;background:linear-gradient(#030c0800,#030c08d9 78%);opacity:0;transition:opacity .2s}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-footer::after{content:'';position:absolute;left:50%;bottom:calc(100% + 6px);width:22px;height:13px;margin-left:-11px;z-index:4;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M2 2l9 9 9-9' fill='none' stroke='%23f2d77a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px #000c);opacity:0;transition:opacity .2s}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-more=true] .dialog-footer::before{opacity:1}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-more=true] .dialog-footer::after{opacity:1;animation:chooser-more 1.4s ease-in-out infinite}
@keyframes chooser-more{0%,100%{translate:0 0}50%{translate:0 4px}}
:host([data-reduced=true]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-more=true] .dialog-footer::after{animation:none}
@media(prefers-reduced-motion:reduce){:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-more=true] .dialog-footer::after{animation:none}}
/* Compact landscape shares the same two-column menu without losing the bottom row. */

:host([data-layout=compact]) .dialog[data-panel=special-spins] .dialog-header{padding-bottom:16px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .dialog-header h2.banana-lettering{height:44px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list:has(>.special-spin-choice:nth-child(5)) .button.special-spin-choice{padding:8px 12px;min-height:0;gap:6px 12px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-title.banana-lettering{height:26px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-guarantee{font-size:10px;line-height:1.4}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-price{font-size:22px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art{height:88px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:65px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{height:72px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .dialog-footer{padding-top:9px}
:host([data-layout=compact]) .dialog[data-panel=special-spins] .dialog-bet{padding:8px 18px}
@media(min-width:360px) and (max-width:400px){:host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{height:268px;min-height:268px;padding-top:58px}}
/* Shorter phones: the two cases shrink to the room left between the title and the bet (the screen's height less about 196 px:
   the overlay's padding, the title, the bet panel and the scroller's padding), so both prices show above the bet; Mobile M and S
   had the Super Free Spins price under it. Their art stretches to the case, as on every phone. Anything still past the room
   (a large minimum font) gets the cue above. After the width rules, which they refine. */
@media(max-height:740px){
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list{gap:10px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{height:max(186px,min(232px,calc((100dvh - 196px) / 2)));min-height:0;padding:51px 26px 19px;gap:5px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{height:31px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>.bonus-blurb{font-size:12px;line-height:1.3;min-height:0}
 :host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>small.feature-entry-price{padding-top:4px}
}
@media(max-height:620px){
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list{gap:8px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice{height:max(168px,min(196px,calc((100dvh - 194px) / 2)));padding:40px 20px 14px;gap:3px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .menu-list .button.feature-mission-choice>span.banana-lettering{height:27px}
 :host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>.bonus-blurb{line-height:1.25}
 :host([data-layout=portrait]) .dialog[data-panel=features] .button.feature-mission-choice>small.feature-entry-price{font-size:max(13px,min(22px,calc((100cqi - 8px) / (var(--price-chars,8) * .67))));padding-top:2px}
}

/* Popout fits: Gold Mine's small-fit.js for Banana. Engine draws the game in popouts as small as 400 x 225 (Popout S); in
   production player.html lays every landscape window out as the 1200 x 675 composition and scales it, so at Popout S it is
   drawn at a third and its 9 px labels came out 3 px tall (Engine's review of Gold Mine, 2026-10-11: Popout S text must be
   readable). theme.js marks the shell and #game with data-fit from the wrapper's scale times the chrome zoom:
   'small' below half size (Popout S): text is enlarged where it sits (sizes here are design pixels, a third of them on screen)
   and the panels are drawn about twice the size, near full screen, with slimmer headers and footers and the least useful
   lines left out; 'popout' below three quarters (Popout L, landscape phones): bar text and panels a quarter to a third larger.
   Mounted last in the shell's shadow root (theme.js). The board's own elements are in layout.css (#game[data-fit]). Scale and
   font size only, no zoom (browsers disagree on container units inside a zoomed box; Gold Mine rc.4). The bar amounts' sizes use
   the bar's own container width, as theme.js does: inside the wrapper the bar is never zoomed (the 1200 x 675 page has chrome
   zoom 1). */

/* ---- Popout S: the control bar, header and entry plaques ---- */
/* The amounts share one size that fits the longest in its column (wide bar: 1 : 1.45 : 1 less 18 px gaps, the bet column
   less its two 32 px dials; .62 em a character; theme.js sets --bar-c1..3). */
:host([data-fit=small]) .values .label{font-size:20px;letter-spacing:.04em;line-height:1.15}
:host([data-fit=small][data-layout=wide]) .values .number{line-height:1.15;font-size:max(14px,min(33px,calc((100cqi - 36px) * .468 / var(--bar-c1,9)),calc(((100cqi - 36px) * .42 - 72px) * 1.613 / var(--bar-c2,6)),calc((100cqi - 36px) * .468 / var(--bar-c3,6))))}
:host([data-fit=small][data-layout=wide]) .underbar{min-height:30px;padding-top:6px}
:host([data-fit=small][data-layout=wide]) .underbar :is(.status,.hint){font-size:20px;letter-spacing:.02em}
:host([data-fit=small][data-layout=wide]) .autoplay-button{min-width:96px}
:host([data-fit=small][data-layout=wide]) .autoplay-button>span{font-size:20px;letter-spacing:0}
/* The REPLAY tag at 22 px is about 7.3 px on screen (18 px was 6.1; the review checks' floor for the replay is 7). */
:host([data-fit=small]) .environment{font-size:22px;letter-spacing:.04em}
:host([data-fit=small]) .rail .feature-menu-count{font-size:20px;letter-spacing:.1em}
:host([data-fit=small][data-layout=wide]) .rail>.special-menu[data-active=true] .feature-name{font-size:max(16px,min(36px,calc((min(236px,(100cqi - 16px) / var(--ui-zoom,1)) - 40px) / 4.8)))}
:host([data-fit=small]) .special-note{scale:1.4;transform-origin:50% 100%}
:host([data-fit=small]) .replay-details{font-size:24px;line-height:1.25}
/* "Play again" stacks its two words inside the round button rather than running past its rim. At 16 px the label was 5.4 px on
   screen (review checks, 2026-10-12): the replay's button is drawn a quarter larger (the bar has no autoplay key then, and it
   stays inside the bar's height) with a smaller icon, so its label reads at about 7.5 px. */
:host([data-fit=small][data-replay=true]) .primary{scale:1.25}
:host([data-fit=small][data-replay=true]) .primary svg{width:20px!important;height:20px!important}
:host([data-fit=small][data-replay=true]) .primary span{font-size:18px;line-height:1;white-space:normal;max-width:64px;text-align:center;letter-spacing:0}

/* ---- Popout S: panels ---- */
:host([data-fit=small]) .overlay{padding:6px}
/* Case files: a 580-wide file drawn twice the size (1160 x up to 592, with its tab above). */
:host([data-fit=small]) .dialog[data-chrome=panel]{width:580px!important;max-width:none!important;max-height:296px!important;margin-top:11px;scale:2}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-header{padding:12px 14px 4px 22px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-header h2{font-size:21px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-header h2::before,
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-header::after{display:none}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-header [data-action=close]{width:34px;height:34px;margin:0}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-content{padding:2px 22px 8px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-content:has(+.dialog-footer[hidden]){margin-bottom:18px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-footer{padding:8px 22px 18px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-footer::before{left:22px;right:22px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-footer .button{min-height:38px;font-size:17px}
:host([data-fit=small]) .dialog[data-chrome=panel] .dialog-description{margin-bottom:8px;font-size:13px;line-height:1.4}
:host([data-fit=small]) .dialog[data-chrome=panel] :is(.label,.auto-note,.range-field output){font-size:12px}
:host([data-fit=small]) .dialog[data-chrome=panel] :is(.range-field,.switch-row,.auto-speed,.auto-details,.inline-speed){font-size:14px}
:host([data-fit=small]) .dialog[data-chrome=panel] .menu-list .button{min-height:42px;font-size:15px}
:host([data-fit=small]) .dialog[data-chrome=panel] .menu-list .button>small{font-size:15px}
:host([data-fit=small]) .dialog[data-chrome=panel] .speed-choice .small{font-size:12px}
/* Bet amount: the counter and six plaques across, so every amount shows without scrolling (the title says what to do). */
:host([data-fit=small]) .dialog[data-chrome=panel][data-panel=amount] .dialog-description{display:none}
:host([data-fit=small]) .dialog[data-chrome=panel][data-panel=amount] .stepper{grid-template-columns:42px minmax(0,1fr) 42px;margin-bottom:8px;padding:4px 10px}
:host([data-fit=small]) .dialog[data-chrome=panel][data-panel=amount] .stepper .icon-button{width:42px;height:42px}
:host([data-fit=small]) .dialog[data-chrome=panel][data-panel=amount] .selected-amount{font-size:28px}
:host([data-fit=small]) .dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 7px;padding:10px 9px 9px}
:host([data-fit=small]) .dialog[data-chrome=panel] .amount-grid .choice{min-height:40px;padding:4px 2px;font-size:16px}
:host([data-fit=small]) .dialog[data-chrome=panel] .auto-counts{gap:8px;padding:10px 9px 9px;margin-bottom:10px}
:host([data-fit=small]) .dialog[data-chrome=panel] .auto-counts .count-choice{min-height:44px}
/* Game information: the copy and the tables a size up. */
:host([data-fit=small]) .dialog[data-chrome=panel] :is(.info-section-content p,.info-body p){font-size:15px;line-height:1.5}
:host([data-fit=small]) .dialog[data-chrome=panel] .info-body :is(td,th){padding:8px 6px;font-size:13px}
:host([data-fit=small]) .dialog[data-chrome=panel] .info-contents summary{font-size:13px}
:host([data-fit=small]) .dialog[data-chrome=panel] .info-contents nav button{font-size:12px}

/* The two choosers, the buy and special-spin confirmations and their bet panel: the whole overlay is drawn larger (it is a
   scrim, so its own growth past the edges does not show), and the smallest lines are a size up or left out. Each is drawn no
   larger than the room in the (zoomed) overlay allows: --panel-room is its height in pixels, over the panel's own height with
   its bet panel (--panel-natural; both theme.js, which measures the open panel, so a restyle can't push it past the edges;
   the figures after it are the heights these were tuned at) plus a margin. */
:host([data-fit=small]) .overlay:has(>.dialog[data-panel=features]){scale:min(1.38,calc((var(--panel-room,675) - 12) / var(--panel-natural,472)))}
:host([data-fit=small]) .overlay:has(>.dialog[data-panel=special-spins]){scale:min(1.3,calc((var(--panel-room,675) - 12) / var(--panel-natural,512)))}
:host([data-fit=small]) .overlay:has(>.dialog:not([data-leaving]):is([data-panel=feature],[data-panel=special])){scale:min(1.35,calc((var(--panel-room,675) - 12) / var(--panel-natural,494)));gap:8px}
:host([data-fit=small]) .dialog[data-panel=features] .feature-mission-choice .feature-classification{font-size:15px;letter-spacing:.1em}
:host([data-fit=small]) .dialog[data-panel=features] .button.feature-mission-choice>.bonus-blurb{font-size:16px;line-height:1.25}
:host([data-layout][data-fit=small]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet .label{font-size:15px;letter-spacing:.12em}
/* The special chooser's five cards a little shorter, so the whole chooser is drawn 1.3 times; the bet multiple and the Choose
   tag (the card itself is the button, and the confirmation names the multiple) are left out. */
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{--special-card-height:116px}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice{grid-template-columns:54px minmax(0,1fr);gap:2px 12px;padding:12px 18px 10px}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-art:is(*,.special-spin-banana-art){width:54px}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice :is(.special-spin-classification,.special-spin-select){display:none}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-guarantee{max-width:none;font-size:15.5px;line-height:1.15;letter-spacing:-.015em}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-price.per-spin::after{font-size:14px}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-help{display:none}
/* At this size Double Bazooka's purple and Triple Bazooka's red names sank into their cards (visual QA, 2026-10-12): a pale rim
   (a sticker's edge) lifts every name off its card (the shadow is special-spin-menu.css's; one attribute more than its rule). */
:host([data-layout][data-fit=small][data-panel-fit]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-title.banana-lettering{filter:drop-shadow(0 0 1.2px #fff1c8) drop-shadow(0 0 1.2px #fff1c8) drop-shadow(0 2px 1px #000c)}
/* The base bet and multiplier figures; the total (the big price) keeps its own size. */
:host([data-fit=small]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-row:not(.quote-total){font-size:15px}
:host([data-fit=small]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-row:not(.quote-total) span:last-child{font-size:17px}
:host([data-fit=small]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:first-child{font-size:15px}
:host([data-fit=small]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-description{font-size:16px;line-height:1.3}
:host([data-fit=small]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button{font-size:16px}
:host([data-fit=small]) .overlay>.buy-bet .label{font-size:15px}
/* Measured at Popout S (review checks, 2026-10-12): the folder is drawn about 1.27 times in the room there, so its slip label,
   Cancel and volatility stamp came out 5-6 px. A size up each (selectors as specific as purchase-options.css's). */
:host([data-fit=small][data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .label{font-size:16px;letter-spacing:.14em}
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]{font-size:16px}
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility{--vol-size:15px}
/* The choosers' volatility stamps a size up too (special-spin-menu.css's 14 and 13 px were 6.4 and 6.3 px on screen); the
   special cards' stamp sits apart from their names there (absolute, top right), with room for it. */
:host([data-fit=small]) .dialog[data-panel=features] .button.feature-mission-choice>.banana-volatility{--vol-size:15.5px}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{--vol-size:14px}
/* The bonus won and summary plaques are shown whole at their own size; their small lines are enlarged inside them. */
:host([data-fit=small]) .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]){scale:1.3}
:host([data-fit=small]) .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-description,.feature-summary-spins){font-size:17px}
:host([data-fit=small]) .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{flex-basis:380px;font-size:16px;white-space:nowrap}

/* ---- Popout L and landscape phones (a half to three quarters) ---- */
:host([data-fit=popout]) .values .label{font-size:13px;letter-spacing:.06em}
:host([data-fit=popout]) .underbar :is(.status,.hint){font-size:13px}
:host([data-fit=popout]) .autoplay-button>span{font-size:12px}
:host([data-fit=popout]) .environment{font-size:13px;letter-spacing:.1em}
:host([data-fit=popout]) .rail .feature-menu-count{font-size:14px;letter-spacing:.14em}
:host([data-fit=popout]) .replay-details{font-size:16px}
/* The replay's Play / Play again label (9 px, 6 px on screen) a size up, stacked inside the round button. */
:host([data-fit=popout][data-replay=true]) .primary span{font-size:11px;line-height:1;white-space:normal;max-width:64px;text-align:center;letter-spacing:0}
:host([data-fit=popout]) .overlay{padding:8px}
:host([data-fit=popout]) .dialog[data-chrome=panel]{scale:1.3;max-height:calc((100% - 24px) / 1.3)!important}
:host([data-fit=popout]) .overlay:has(>.dialog[data-panel=features]){scale:min(1.25,calc((var(--panel-room,675) - 16) / var(--panel-natural,472)))}
:host([data-fit=popout]) .overlay:has(>.dialog[data-panel=special-spins]){scale:min(1.12,calc((var(--panel-room,675) - 16) / var(--panel-natural,546)))}
:host([data-fit=popout]) .overlay:has(>.dialog:not([data-leaving]):is([data-panel=feature],[data-panel=special])){scale:min(1.2,calc((var(--panel-room,675) - 16) / var(--panel-natural,494)))}
:host([data-fit=popout]) .dialog[data-panel=features] .feature-mission-choice .feature-classification{font-size:11px}
:host([data-fit=popout]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-classification{font-size:10px}
/* That rule lost to special-spin-menu.css's more specific card font (clamp, about 8.5 px), so the multiple and the Choose tag were
   6.3 px on screen at Popout L (review checks, 2026-10-12): the same selector as that sheet's, a size up (about 7.5 px). */
:host([data-layout][data-fit=popout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice :is(.special-spin-classification,.special-spin-select){font-size:10px}
:host([data-fit=popout]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-guarantee{font-size:12px}
:host([data-fit=popout][data-special-kicker=tight]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker .banana-volatility-name{display:none}
:host([data-fit=popout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-row{font-size:12px}
:host([data-fit=popout]) .dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px;padding:12px 10px 10px}
/* Long amounts (theme.js measures them; six across, $10,000.00 fell to 10 px): four plaques across, at a readable size. */
:host(:is([data-fit=popout],[data-fit=small])[data-amount-wide]) .dialog[data-chrome=panel][data-panel=amount] .amount-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- Touch screens drawn small (landscape phones: the composition at a half to three fifths) ---- */
/* Inside the wrapper only (the 1200 x 675 page lays out wide, unzoomed): the amounts' sizes use the bar's container width, which
   a zoomed native bar (compact layout) reports inconsistently. */
/* The bar's buttons were 25-31 px to the finger; they grow to about 40 px where they sit, and the amounts make room for them
   (sized to their columns as on Popout S: the bet column less its two 70 px dials). */
@media(pointer:coarse){
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .footer{grid-template-columns:222px minmax(0,1fr) auto;gap:12px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .utility-dock{gap:6px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .utility-dock .icon-button{width:70px;height:70px;min-height:70px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .utility-dock .icon-button svg{width:26px;height:26px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .bet-value .desktop-bet-step{flex:0 0 70px;width:70px;height:70px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .actions>.compact-action{min-width:72px;height:72px}
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .amount-button{min-height:70px}
  /* The attaché lid's brass rail (bet-bar.css) is drawn 7-15 px in from the bar's edges, where these keys and the Spin ran across
     it (the owner: the bet bar's border was cut off): a slimmer rail and 3 px more bar above and below keep them inside it. */
  :host(:is([data-fit=popout],[data-fit=small])[data-layout=wide]) .footer{--a-frame:15px;--a-leather:6px;padding-block:9px}
  /* Between the big touch steppers "Bet amount" has about 51px: it folds onto two lines rather than running under the +. */
  :host([data-fit=popout][data-layout=wide]) .bet-value .label{white-space:normal;font-size:11px;line-height:1.05;letter-spacing:.02em;text-align:center}
  :host([data-fit=popout][data-layout=wide]) .values .number{font-size:max(11px,min(21px,calc((100cqi - 36px) * .468 / var(--bar-c1,9)),calc(((100cqi - 36px) * .42 - 148px) * 1.613 / var(--bar-c2,6)),calc((100cqi - 36px) * .468 / var(--bar-c3,6))))}
  :host([data-fit=popout]) .dialog[data-chrome=panel] .dialog-header [data-action=close]{width:52px;height:52px}
  :host([data-fit=popout]) .dialog[data-chrome=panel] .stepper .icon-button{width:56px;height:56px}
  :host([data-fit=popout]) .dialog[data-chrome=panel][data-panel=amount] .stepper{grid-template-columns:56px minmax(0,1fr) 56px}
  :host([data-layout][data-fit=popout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-header [data-action=close]{width:62px;height:62px;min-width:62px;min-height:62px}
  :host([data-layout][data-fit=popout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step{width:62px;height:62px;min-width:62px;min-height:62px}
  :host([data-fit=popout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]{width:58px;height:58px}
  :host([data-fit=popout]) .overlay>.buy-bet .dialog-bet-step{width:58px;height:58px;min-width:58px;min-height:58px}
  :host([data-fit=popout]) .dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-footer .button{min-height:62px}
}

/* ---- Phones (portrait, touch): the panels' small round buttons reach a 44 px target ---- */
/* The chooser and confirmation closes were 32-38 px and the bet dials 34-36 px. */
@media(pointer:coarse){
  :host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header{grid-template-columns:44px minmax(0,1fr) 44px}
  :host([data-layout=portrait][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header{grid-template-columns:44px minmax(0,1fr) 44px}
  :host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins]) .dialog-header [data-action=close],
  :host([data-layout=portrait][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header [data-action=close],
  :host([data-layout=portrait]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]{width:44px;height:44px;min-width:44px;min-height:44px}
  :host([data-layout=portrait]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step,
  :host([data-layout=portrait]) .overlay>.buy-bet .dialog-bet-step{width:44px;height:44px;min-width:44px;min-height:44px}
  /* The confirmation's title clears its larger close (the lettering ran under it: SUPER FREE SPINS, TRIPLE BAZOOKA). */
  :host([data-layout=portrait]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-header{padding-inline:58px}
}
/* Touch screens at full size (landscape tablets): the bet dials were 32 px wide. */
@media(pointer:coarse){:host(:is([data-layout=wide],[data-layout=compact])) .bet-value .desktop-bet-step{flex-basis:44px;width:44px;height:44px}}

/* Buy and special-spin confirmations: the case file (the owner's pick of three looks, 2026-10-12). The yellow folder with a back
   cover and sheets behind it, top light and worn edges, the cost typed on a cream sheet clipped inside, a red wax-seal Cancel,
   and the bet on a paper slip tucked under the folder. It carries the mode's volatility meter on the cost card (presentation.js
   puts it there). Rules are keyed on :host([data-layout]), which the shell always has, to sit at the weight they were tuned at.
   Static layers only: no animated filters, nothing repainted per frame. */
.dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility{display:none}

/* Edition colours: green Free Spins, violet Super, each special's own palette. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]),
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet{
  --ed-ink:#0b5b40;--ed-tint:#0e4a32;--ed-glow:#2d6b4b;--ed-on:#fff2c6;--ed-rim:#e8c05a;--ink:#2b1f0d;--ink-2:#4a3818;--rim-dark:#1d1a12;
  --ed-felt:radial-gradient(ellipse 85% 120% at 50% 0,var(--ed-glow),#0000 70%),linear-gradient(color-mix(in srgb,var(--ed-tint) 55%,#0000),color-mix(in srgb,var(--ed-tint) 55%,#0000)),url('./assets/board-felt-v1.webp') 0 0/320px,var(--ed-tint);
  --brass:linear-gradient(#fff3bf,#f2cf63 48%,#c99230);--brass-knob:radial-gradient(circle at 38% 30%,#fff7d4,#f0c75c 40%,#b5862b 74%,#7a581b)
}
:host([data-layout]) .dialog[data-banana-mode=super]:is([data-panel=feature],[data-panel=special]),
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet[data-banana-mode=super]{
  --ed-ink:#4a0f7a;--ed-tint:#3a0b5c;--ed-glow:#7a3aa0;--ed-on:#f6e3ff;--ed-rim:#e3b0ff
}
:host([data-layout]) .dialog[data-panel=special][data-banana-special],
:host([data-layout]) .overlay:has(>.dialog[data-panel=special])>.buy-bet[data-banana-special]{
  --ed-ink:var(--special-ink);--ed-tint:color-mix(in srgb,var(--special-border) 30%,#0e3b28);--ed-glow:color-mix(in srgb,var(--special-border) 55%,#2d6b4b);--ed-rim:var(--special-border)
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility{display:inline-flex;grid-column:1/-1;justify-self:center;margin-top:2px;--vol-size:9.5px}
/* The confirm label stays on one line: it shrinks with the folder's width rather than wrapping. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button{white-space:nowrap}

/* The yellow folder (purchase-polish.css's art and tab), tilted a hair and lifted off the table. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]){rotate:-.5deg}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .banana-panel-scene{filter:drop-shadow(0 24px 24px #000a) drop-shadow(0 3px 3px #0007)}
/* Top light from the desk lamp and worn, darker edges on the cover. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .banana-panel-scene::after{
  content:'';display:block;position:absolute;inset:4px 4px 5px;z-index:1;border:0;border-radius:11px;pointer-events:none;
  background:radial-gradient(125% 68% at 22% 0,#fffbe05c,#0000 55%),radial-gradient(150% 128% at 50% 42%,#0000 56%,#7a4a005e 100%);
  box-shadow:inset 0 3px 0 #fff8d244,inset 0 -16px 28px #6b3f002e
}
/* The back cover and two sheets behind the front. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special])::before{
  content:'';display:block;position:absolute;z-index:-3;inset:-7px -9px 5px 7px;rotate:1.4deg;pointer-events:none;opacity:1;mix-blend-mode:normal;
  border:2.5px solid #1d1a12;border-radius:12px;background:linear-gradient(170deg,#d8a225,#a8761a);box-shadow:0 20px 32px #0008
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special])::after{
  content:'';display:block;position:absolute;z-index:-3;top:-15px;right:34px;width:44%;height:46px;rotate:2deg;pointer-events:none;
  border:2px solid #1d1a12;border-radius:3px;background:linear-gradient(#fffdf6,#efe6cc);
  box-shadow:-18px 6px 0 -2px #f3ead0,-18px 6px 0 0 #1d1a12
}
/* The cost, typed on a cream sheet, edition-coloured at its edge and clipped in. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote{
  position:relative;rotate:-.8deg;padding:18px 16px 12px 24px;border:1.5px solid #2b1f0d;border-radius:3px;color:var(--ink);
  background:linear-gradient(90deg,var(--ed-ink) 0 7px,#0000 7px),repeating-linear-gradient(#0000 0 23px,#8fa8c43d 23px 24px) 0 14px,linear-gradient(#fffbef,#f3e8cb);
  box-shadow:inset 0 1px 0 #fff9,3px 5px 0 -1.5px #efe3c4,3px 5px 0 0 #2b1f0d66,0 12px 18px #3a281059
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote::before{
  content:'';position:absolute;z-index:2;top:-18px;left:30px;width:18px;height:52px;rotate:-8deg;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 60'%3E%3Cpath d='M7 20v26a4.5 4.5 0 0 0 9 0V8a6 6 0 0 0-12 0v42a8 8 0 0 0 16 0V26' fill='none' stroke='%2337393d' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M7 20v26a4.5 4.5 0 0 0 9 0V8a6 6 0 0 0-12 0v42a8 8 0 0 0 16 0V26' fill='none' stroke='%23d9dee4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(1px 2px 1px #0005)
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-total{border-bottom:1.5px dashed #2b1f0d59}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:first-child{font:700 12px/1.2 'Courier New',Courier,monospace;letter-spacing:.2em;color:var(--ed-ink);text-shadow:none}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:last-child{color:var(--ink);text-shadow:0 1px 0 #fff8}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-row span{color:var(--ink-2);font-family:'Courier New',Courier,monospace;font-weight:700;letter-spacing:.06em;text-shadow:none}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-row span:last-child{color:var(--ink);font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:850;letter-spacing:.02em}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility{--vol-ink:#4a3a1d;--vol-stamp:#a3241b}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility .banana-volatility-rounds i:not(.on){box-shadow:inset 0 0 0 1px #8a5d1799}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-description{color:#3b2a0c;font-weight:650;font-size:12.5px;text-shadow:0 1px 0 #fff3a855}
/* Cancel in the corner seal's red enamel, and a wider, edition-coloured Confirm, on one line. */
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer{gap:12px;padding-bottom:26px}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]{
  --control-depth:#3d0b07;flex:0 0 auto;min-height:54px;padding:0 20px;border:2px solid #4a0f0a;border-radius:12px;
  background:radial-gradient(130% 160% at 30% 18%,#ea6151,#b3261e 52%,#76140e);color:#fff3d6;
  font:800 13px/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.12em;text-shadow:0 1px 0 #510e0c;
  box-shadow:inset 0 2px 0 #ffa79566,inset 0 -3px 0 #0003,0 4px 0 var(--control-depth),0 9px 14px #0005
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]){
  flex:1 1 auto;min-height:54px;padding:0 12px;border:2px solid var(--rim-dark);border-radius:12px;background:var(--ed-felt);color:var(--ed-on);
  --control-depth:var(--rim-dark);font:400 18px/1 'Lilita One','Cooper Black','Arial Black',sans-serif;letter-spacing:.07em;text-shadow:0 2px 0 #0008;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ed-rim) 70%,#0000),inset 0 2px 0 #ffffff2e,0 4px 0 var(--rim-dark),0 9px 14px #0005
}
:host([data-layout]) .dialog[data-panel=special][data-banana-special] .dialog-footer .button:not([data-action=close]){background:linear-gradient(var(--special-light),var(--special-border));color:var(--special-ink);text-shadow:0 1px 0 #fff7}
@media(hover:hover) and (pointer:fine){
  :host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not(:disabled):is(:hover,:focus-visible){transform:translateY(-2px);filter:brightness(1.07)}
}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]:not(:disabled):active{transform:translateY(3px) scale(.98);filter:brightness(.96);box-shadow:inset 0 2px 4px #0006,0 1px 0 var(--control-depth),0 2px 4px #0004;transition-duration:.06s}
:host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]):not(:disabled):active{transform:translateY(3px) scale(.99);filter:brightness(.96);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ed-rim) 70%,#0000),inset 0 2px 4px #0006,0 1px 0 var(--rim-dark),0 2px 4px #0004;transition-duration:.06s}
/* The bet: a paper slip tucked under the folder. */
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet{
  position:relative;z-index:0;margin-top:-34px;padding:38px 26px 13px;rotate:1deg;border:2px solid #2b1f0d;border-radius:3px 3px 6px 6px;
  background:repeating-linear-gradient(#0000 0 21px,#8fa8c433 21px 22px) 0 8px,linear-gradient(#fffaf0,#efe4c6);box-shadow:0 12px 18px #0007;color:var(--ink)
}
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .label{font:700 11px/1.2 'Courier New',Courier,monospace;letter-spacing:.2em;color:var(--ink-2);text-shadow:none}
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-value{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
:host([data-layout]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step{background:var(--brass-knob);border:2px solid var(--rim-dark);color:var(--ink);box-shadow:inset 0 -2px 0 #0003,inset 0 2px 0 #fff9df,0 3px 0 var(--rim-dark)}

/* Popout S (popout-fit.css draws these 1.35 times in a fixed room): the quote and footer tighten so the folder fits. */
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote{padding-top:12px;padding-bottom:9px;row-gap:8px}
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote>.quote-volatility{margin-top:0;--vol-size:11px}
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer{padding-top:10px;padding-bottom:18px}
/* Phones: the Confirm label stays on one line at a size the narrower folder holds. */
@media(max-width:520px){
  :host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]){font-size:13px}
  :host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]{padding:0 14px;font-size:12px}
}
@media(max-width:380px){
  :host([data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]){font-size:12px;letter-spacing:.05em}
}
/* Popout S: the hero price keeps its size (popout-fit.css sizes the smaller quote figures). */
:host([data-fit=small][data-layout]) .dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:last-child{font-size:32px}



/* Painted ImageGen folders use a nine-slice frame: the tab, document edges,
   corners and wax seal retain one scale as the blank paper face grows.
   Geometry and content order still belong to presentation.css. */
.dialog:is([data-panel=feature],[data-panel=special]),
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet{
  --quote-top:#0b5b40;--quote-base:#073d2d;--quote-text:#fff0b6;--quote-label:#dacba0;
  --purchase-rule:#dbc2734d;
  --surface-rim:var(--quote-label);
  --surface-depth:color-mix(in srgb,var(--quote-base) 65%,#110d08);
  --price-shadow:0 2px 1px #0008;--control-text-shadow:0 1px #0008;
  --quote-surface:radial-gradient(ellipse at 15% 0,#ffffff09,transparent 65%),linear-gradient(135deg,var(--quote-top),var(--quote-base))
}
.dialog[data-banana-mode=super]:is([data-panel=feature],[data-panel=special]),
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet[data-banana-mode=super]{
  --quote-top:#3a0862;--quote-base:#23043e;--quote-text:#f4ddff;--quote-label:#e0c7ee;
  --purchase-rule:#dfb8f04d
}
.dialog[data-panel=special][data-banana-special],
.overlay:has(>.dialog[data-panel=special])>.buy-bet[data-banana-special]{
  --quote-top:var(--special-light);--quote-base:var(--special-border);
  --quote-text:var(--special-ink);--quote-label:var(--special-ink);
  --surface-rim:var(--special-border);
  --purchase-rule:color-mix(in srgb,var(--special-ink) 30%,transparent);
  --quote-surface:linear-gradient(var(--special-light),var(--special-border));
  --price-shadow:0 1px #ffffff66;--control-text-shadow:0 1px #ffffff44
}
.dialog:is([data-panel=feature],[data-panel=special]){
  --purchase-folder-art:url('./assets/menu-v2/purchase-folder-body-regular-v4.webp');
  --purchase-text:#382c1c;
  border-image:none;border-color:transparent;border-radius:0;background:transparent;
  box-shadow:none;color:var(--purchase-text)
}
.dialog[data-banana-mode=super]:is([data-panel=feature],[data-panel=special]){
  --purchase-folder-art:url('./assets/menu-v2/purchase-folder-body-super-v4.webp')
}
.dialog:is([data-panel=feature],[data-panel=special]) .banana-panel-scene{
  inset:-3px;z-index:-2;border:1px solid transparent;border-radius:0;
  border-image-source:var(--purchase-folder-art);
  border-image-slice:300 550 320 550 fill;
  border-image-width:66px 121px 70.4px 121px;
  border-image-repeat:stretch;background:none;box-shadow:none;
  filter:drop-shadow(0 12px 12px #0008)
}
/* The tab and two paper edges are a separate painted strip, shown at the same
   .22 scale as every frame corner; they never stretch with the modal width. */
.dialog:is([data-panel=feature],[data-panel=special]) .banana-panel-scene::before{
  content:'';display:block;position:absolute;z-index:-1;top:-22px;left:-1px;
  width:194.04px;height:22px;
  background:url('./assets/menu-v2/purchase-folder-top-v4.webp') left bottom/contain no-repeat
}
.dialog:is([data-panel=feature],[data-panel=special])::before,
.dialog:is([data-panel=feature],[data-panel=special])::after,
.dialog:is([data-panel=feature],[data-panel=special]) .banana-panel-scene::after{display:none}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header h2,
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:last-child{
  animation:none!important;transform:none!important;translate:none!important;scale:none!important
}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header h2.banana-lettering{
  filter:drop-shadow(0 2px 1px #56361777)
}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header h2.banana-lettering::after{display:none;animation:none}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]{
  --control-depth:#560f0b;
  background:linear-gradient(135deg,#b72c25,#761912);border-color:#efae92;color:#fff4d2;
  box-shadow:0 0 0 1px #34140fcc,inset 0 1px #ffb5a64d,inset 0 -2px #0002,0 3px 0 var(--control-depth),0 6px 10px #26170866
}
.dialog:is([data-panel=feature],[data-panel=special]) .quote{
  background:var(--quote-surface);
  border-color:var(--surface-rim);border-radius:10px;box-shadow:
    0 0 0 2px #312208cc,0 5px 0 1px var(--surface-depth),0 10px 16px #26170866,
    inset 0 1px #fff4cc66,inset 0 0 0 2px color-mix(in srgb,var(--surface-rim) 30%,transparent),inset 0 -3px #0002;
  color:var(--quote-text)
}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total{border-bottom-color:var(--purchase-rule)}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-row span{color:var(--quote-label);text-shadow:none}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-row span:last-child{color:var(--quote-text)}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:first-child{color:var(--quote-label);text-shadow:none}
.dialog:is([data-panel=feature],[data-panel=special]) .quote-total span:last-child{
  color:var(--quote-text);text-shadow:var(--price-shadow)
}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-description{
  color:#49361d;text-shadow:none
}
.dialog:is([data-panel=feature],[data-panel=special]) .error-inline{color:#60211b;text-shadow:none}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]),
.dialog[data-banana-mode=super]:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:not([data-action=close]){
  --control-depth:var(--surface-depth);
  background:var(--quote-surface);border-color:var(--surface-rim);
  border-bottom-color:var(--control-depth);border-radius:11px;
  color:var(--quote-text);text-shadow:var(--control-text-shadow);
  box-shadow:0 0 0 1px #251c11cc,inset 0 1px #fff4cc66,inset 0 0 0 1px #fff4cc33,inset 0 -2px #0002,
    0 4px 0 1px var(--control-depth),0 8px 14px #26170877
}
.dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button[data-action=close]{
  --control-depth:#560f0b;
  background:linear-gradient(135deg,#b72c25,#761912);border-color:#efae92;
  border-bottom-color:var(--control-depth);border-radius:11px;
  color:#fff4d2;text-shadow:0 1px #510e0c;
  box-shadow:0 0 0 1px #34140fcc,inset 0 1px #ffb5a666,inset 0 0 0 1px #ffb5a633,inset 0 -2px #0002,
    0 4px 0 1px var(--control-depth),0 8px 14px #26170877
}
.dialog:is([data-panel=feature],[data-panel=special]) :is(.button,.icon-button):focus-visible{outline:3px solid #382c1c;outline-offset:3px}
/* Quote, confirm and separate bet control share the suitcase's edition palette. */
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet{
  background:var(--quote-surface);
  border-color:var(--surface-rim);border-radius:11px;
  box-shadow:0 0 0 1px #251c11cc,inset 0 1px #fff4cc55,inset 0 0 0 1px #fff4cc22,
    0 4px 0 1px var(--surface-depth),0 10px 18px #0006
}
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .label{color:var(--quote-label);text-shadow:none}
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-value{color:var(--quote-text);-webkit-text-stroke:0;text-shadow:var(--control-text-shadow)}
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step{
  --control-depth:var(--surface-depth);
  background:linear-gradient(var(--quote-top),var(--quote-base));border-color:var(--quote-label);color:var(--quote-text);
  box-shadow:0 0 0 1px #0006,inset 0 1px #fff4cc55,inset 0 -1px #0002,0 3px 0 var(--control-depth),0 5px 8px #0005
}
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step:focus-visible{outline:2px solid var(--quote-text);outline-offset:3px}
/* A raised rim, soft cast shadow and a short lift make the controls tactile.
   Keyboard focus shares the hover treatment; reduced motion keeps it still. */
.dialog:is([data-panel=feature],[data-panel=special]) :is(.dialog-footer .button,.dialog-header [data-action=close]),
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step{
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease
}
@media(hover:hover) and (pointer:fine){
 .dialog:is([data-panel=feature],[data-panel=special]) .dialog-footer .button:is(:hover,:focus-visible):not(:disabled){
  transform:translateY(-2px);filter:brightness(1.08);border-color:#fff0c2;
  box-shadow:0 0 0 1px #251c11cc,inset 0 1px #fff4cc77,inset 0 0 0 1px #fff4cc44,inset 0 -2px #0002,
    0 6px 0 1px var(--control-depth),0 11px 18px #26170888
 }
 .dialog:is([data-panel=feature],[data-panel=special]) .dialog-header [data-action=close]:is(:hover,:focus-visible):not(:disabled),
 .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step:is(:hover,:focus-visible):not(:disabled){
  transform:translateY(-1px) scale(1.04);filter:brightness(1.1)
 }
}
.dialog:is([data-panel=feature],[data-panel=special]) :is(.dialog-footer .button,.dialog-header [data-action=close]):active:not(:disabled),
.overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step:active:not(:disabled){
  transform:translateY(1px) scale(.985);filter:brightness(.96);
  box-shadow:inset 0 1px 3px #0004,0 1px 0 var(--control-depth),0 2px 4px #0004
}
:host([data-reduced=true]) .dialog:is([data-panel=feature],[data-panel=special]) :is(.dialog-footer .button,.dialog-header [data-action=close]),
:host([data-reduced=true]) .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step{
  transition:none;transform:none!important
}
@media(prefers-reduced-motion:reduce){
 .dialog:is([data-panel=feature],[data-panel=special]) :is(.dialog-footer .button,.dialog-header [data-action=close]),
 .overlay:has(>.dialog:is([data-panel=feature],[data-panel=special]))>.buy-bet .dialog-bet-step{transition:none;transform:none!important}
}



/* Painted office and nine-slice brass panels. Lettering, wild symbols, prices
   and actions come from the existing game and shell. The room stays while a folder opened from the chooser stands in front
   of it (the shell keeps the chooser behind its folders, so it still matches). */
:host([data-layout]) .overlay:has(>.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]){
  padding:24px;isolation:isolate;overflow:hidden;background:#071d15;
  -webkit-backdrop-filter:none;backdrop-filter:none
}
:host([data-layout]) .overlay:has(>.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special])::before{
  content:'';position:absolute;inset:-10px;z-index:-1;pointer-events:none;
  background:linear-gradient(#02100c66,#020b08b8),url('./assets/special-menu-v1/special-spin-office-v1.webp') center/cover no-repeat;
  filter:blur(4px)
}
/* The chooser fits its room. The five cards share one height worked out from the room inside the (zoomed) overlay
   (--panel-room, theme.js) less the title, the bet panel and the gaps, so the bet panel always stays in view; each card's
   insides are proportioned from that height (--h), so the bet multiple, name, line, price and Choose sit at the same
   places on every card. Two even columns; Banana Spins spans both under them. The painted frame is 29 px of art, so the
   copy keeps at least 18 px clear of it on every side. */
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{width:min(920px,100%);max-width:920px;max-height:100%;gap:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  --special-card-height:clamp(118px,calc((var(--panel-room,750) * 1px - 297px) / 3),150px);--sp-gap:16px;--banana-extra:16px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;padding:0 8px 18px;flex:none}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header h2.banana-lettering{height:50px;max-width:640px;justify-self:center;filter:drop-shadow(0 5px 2px #000b)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header [data-action=close]{width:42px;height:42px;min-width:42px;min-height:42px;border:2px solid #e6bf63;background:linear-gradient(#284533,#0b1f16);box-shadow:inset 0 0 0 2px #07150e,0 3px 0 #020b07,0 5px 12px #0008}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-content{flex:0 1 auto;min-height:0;padding:7px 8px 12px;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4ac53 #0a2017}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:var(--special-card-height) var(--special-card-height) calc(var(--special-card-height) + var(--banana-extra,0px));grid-auto-rows:var(--special-card-height);gap:var(--sp-gap)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice{
  --equipment-accent:var(--special-accent);--equipment-wash:var(--special-wash);--equipment-border:var(--special-border);
  --equipment-light:var(--special-light);--equipment-ink:var(--special-ink);--equipment-frame-filter:var(--special-frame-filter);
  --h:var(--special-card-height);--vol-stamp:var(--special-accent);
  position:relative;isolation:isolate;display:grid;grid-column:auto;
  grid-template-columns:calc(var(--h) * .6) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"art copy" "art cost";
  align-items:center;justify-items:stretch;gap:calc(var(--h) * .045) clamp(12px,calc(var(--h) * .11),18px);
  min-width:0;width:100%;height:var(--h);min-height:0;max-height:none;padding:max(17px,calc(var(--h) * .14)) clamp(20px,calc(var(--h) * .17),26px) max(11px,calc(var(--h) * .1));
  border:0;border-radius:16px;background:none;color:#fff0cf;text-align:left;text-transform:none;
  box-shadow:none;transition:transform .16s ease,filter .16s ease
}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice::before{
  /* Fit the complete panel to the same slices as the colored frame. */
  content:'';position:absolute;inset:0;z-index:-2;width:auto;height:auto;opacity:1;border:1px solid transparent;border-radius:0;
  border-image:url('./assets/special-menu-v1/special-spin-panel-v1.webp') 205 205 190 205 fill / 29px / 0 stretch;
  background:none;box-shadow:none;pointer-events:none;filter:var(--special-face-filter,none)
}
/* Reuse the painted frame, tinting only the edge; the leather face under it takes the card's colour the same way
   (special-spin-palettes.css). */
.dialog[data-panel=special-spins] .special-spin-frame{
  position:absolute;inset:0;z-index:0;border:1px solid transparent;pointer-events:none;
  border-image:url('./assets/special-menu-v1/special-spin-frame-v1.webp') 205 205 190 205 fill / 29px / 0 stretch;
  filter:var(--equipment-frame-filter)
}
.dialog[data-panel=special-spins] .special-spin-choice>:not(.special-spin-frame){position:relative;z-index:1}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice::after{
  content:'';position:absolute;inset:16px 14px 13px;z-index:-1;border:0;border-radius:10px;
  background:radial-gradient(ellipse at 8% 12%,var(--equipment-wash),transparent 75%),linear-gradient(#00180b1a,#000c0975);box-shadow:none;pointer-events:none
}
/* Banana Spins: one column wide like the others, centred under them; its row is a line taller for its two-line description. */
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice.special-spin-banana{grid-column:1/-1;justify-self:center;width:calc((100% - var(--sp-gap)) / 2);height:calc(var(--h) + var(--banana-extra,0px))}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-art{grid-area:art;align-self:center;width:100%;height:calc(var(--h) * .58);filter:drop-shadow(0 5px 3px #0008)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-art.special-spin-individual-art{height:calc(var(--h) * .5)}
/* Paper columns (as tall and thin as the board's) stand the card's full height, so their stamps can be read. */
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-art:not(.special-spin-individual-art,.special-spin-banana-art){height:calc(var(--h) * .8)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-art.special-spin-banana-art{width:100%;height:auto;gap:2px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-symbol:only-child{width:calc(var(--h) * .3)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-copy{grid-area:copy;align-self:end;display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--h) * .025);min-width:0}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice :is(.special-spin-kicker,.special-spin-title,.special-spin-guarantee){flex:none}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:calc(var(--h) * .085);min-height:0}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-classification{font:800 clamp(8px,calc(var(--h) * .066),10px)/1.2 'Avenir Next',Arial,sans-serif;letter-spacing:.15em;color:var(--equipment-accent);white-space:nowrap}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-title.banana-lettering{height:calc(var(--h) * .18);max-width:100%;background-position:left center!important;filter:drop-shadow(0 3px 1px #000a)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-guarantee{max-width:none;font:600 clamp(10px,calc(var(--h) * .076),11.5px)/1.3 'Avenir Next',Arial,sans-serif;color:#f3ecd4;text-transform:none;text-shadow:0 1px 2px #0009}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-cost{grid-area:cost;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding-top:calc(var(--h) * .045);border-top:1px solid color-mix(in srgb,var(--equipment-accent) 35%,transparent)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-price{margin:0;font:850 max(12px,calc(var(--h) * .2 * min(1,8 / var(--price-chars,8))))/1.15 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.01em;color:#fff3c4;text-shadow:0 2px 2px #000b;white-space:nowrap}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-price.per-spin::after{font:700 clamp(8px,calc(var(--h) * .066),10px)/1 Arial,sans-serif;letter-spacing:.07em;color:#d1c5a0;text-transform:uppercase}
.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-select{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:10px;min-width:calc(var(--h) * .5);min-height:calc(var(--h) * .2);padding:0 11px;border:1px solid var(--equipment-border);border-bottom-width:2px;border-radius:5px;background:linear-gradient(var(--equipment-light),var(--equipment-border));box-shadow:inset 0 1px var(--equipment-light),0 2px 2px #0005;color:var(--equipment-ink);font:850 clamp(9px,calc(var(--h) * .068),10px)/1 'Avenir Next',Arial,sans-serif;letter-spacing:.05em}
.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-select::after{content:'›';font-size:20px;line-height:.8}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice:is(:hover,:focus-visible):not(:disabled){z-index:2;transform:translateY(-2px);filter:brightness(1.1) drop-shadow(0 0 8px color-mix(in srgb,var(--equipment-border) 25%,transparent));box-shadow:none}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice:active:not(:disabled){transform:translateY(2px);filter:brightness(.98)}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] button:focus-visible{outline:3px solid #fff3bc;outline-offset:3px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice[aria-pressed=true]{outline:2px solid #fff3bc;outline-offset:3px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-footer{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px 0;border:0}
.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-help{order:2;max-width:none;margin:0;color:#d4c9aa;font:600 10px/1.5 'Avenir Next',Arial,sans-serif;text-shadow:0 1px 2px #000;pointer-events:none}
/* In a tight room (under 600 px, --sp-help is 0) the reminder line gives its height to the cards; the confirmation says it too. */
/* Its line in ems where it shows (a browser minimum font size makes the 10 px line 12, 18 px tall: a 15 px box cut its descenders). */
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-help{max-height:min(calc(var(--sp-help) * 100),1.5em);overflow:hidden}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 26px 14px;border:1px solid #c4a25b;border-radius:9px;background:linear-gradient(#173a2be8,#091b13f2);box-shadow:inset 0 0 0 2px #07170f,0 4px 8px #0006}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet .label{font-size:9px;letter-spacing:.14em;color:#d7c89e;white-space:nowrap}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-controls{gap:12px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-value{min-width:4.6em;font-size:22px}
:host([data-layout]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-step{width:34px;height:34px;min-width:34px;min-height:34px;border:2px solid #ebc868;background:linear-gradient(#355c3e,#163323);box-shadow:inset 0 0 0 2px #0a2315,0 2px #020c07}
/* Medium and short rooms (the chooser follows the chrome zoom, so these follow the room in the zoomed overlay, data-panel-fit,
   not the window): a tighter title, gaps and bet panel, and the card height from the same room sum. At Popout S
   (popout-fit.css) the cards are 116 px and the chooser is drawn 1.3 times; that sum still fits. */
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{--sp-help:clamp(0px,calc((var(--panel-room,675) * 1px - 600px) * 100),15px);--special-card-height:clamp(104px,calc((var(--panel-room,675) * 1px - 203px - var(--sp-help) * 1.75) / 3),136px);--sp-gap:11px;max-width:820px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .overlay:has(>.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]){padding:14px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header{padding-bottom:5px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header h2.banana-lettering{height:39px;max-width:470px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header [data-action=close]{width:36px;height:36px;min-width:36px;min-height:36px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-content{padding-block:5px 9px}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-footer{padding-top:6px}
/* A tight room (no reminder line) also gets a more compact bet panel; --sp-help is 15 px or 0. */
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet{padding:calc(6px + var(--sp-help) * .2) 22px calc(8px + var(--sp-help) * .2);gap:calc(4px + var(--sp-help) * .14)}
:host([data-layout]:is([data-panel-fit=medium],[data-panel-fit=short])) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode] .dialog-bet-step{width:calc(34px + var(--sp-help) * .27);height:calc(34px + var(--sp-help) * .27);min-width:0;min-height:0}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{--sp-help:0px;--special-card-height:clamp(92px,calc((var(--panel-room,480) * 1px - 176px) / 3),120px);--sp-gap:8px}
:host([data-layout][data-panel-fit=short]) .overlay:has(>.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]){padding:10px 16px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header h2.banana-lettering{height:32px;max-width:420px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header [data-action=close]{width:32px;height:32px;min-width:32px;min-height:32px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-content{padding-block:4px 8px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet{padding:6px 18px 8px;gap:4px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-step{width:30px;height:30px;min-width:30px;min-height:30px}
:host([data-layout][data-panel-fit=short]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-value{font-size:20px}
/* Phones: one card a row (the list scrolls down, never sideways), each 148 px, the art in a narrower column so the line
   stays on one row; the bet panel stays outside the scroll area. */
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{--special-card-height:148px;--sp-gap:12px;--banana-extra:16px}
:host([data-layout][data-panel-fit=phone]) .overlay:has(>.dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]){padding:16px 10px;background-position:center}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px;padding:0 4px 12px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header h2.banana-lettering{height:38px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-header [data-action=close]{width:32px;height:32px;min-width:32px;min-height:32px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-content{padding:5px 4px 10px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,var(--special-card-height)) calc(var(--special-card-height) + var(--banana-extra,0px))}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice.special-spin-banana{width:100%}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice{grid-template-columns:66px minmax(0,1fr);padding-inline:20px;column-gap:12px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-guarantee{font-size:10.5px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-price{font-size:max(12px,calc(var(--h) * .18 * min(1,8 / var(--price-chars,8))))}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-footer{flex-direction:column;gap:8px;padding:7px 4px 0}
:host([data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-help{order:2;font-size:10px;text-align:center;max-width:none}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet{width:auto;max-width:100%;flex-direction:column;justify-content:center;gap:7px;padding:10px 22px 12px}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .dialog-bet-controls{gap:8px}
@media(max-width:359px){
  :host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice{grid-template-columns:54px minmax(0,1fr);padding-inline:18px;column-gap:10px}
  :host([data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-select{display:none}
}
/* When a price, its "/ spin" and Choose don't share the cost line (theme.js measures it and marks the shell; at $1,000 a spin on
   a 390 px phone the tags ran past the frame and off the screen), every card's tag closes up to its arrow, a square brass key. */
:host([data-layout][data-panel-fit=phone][data-special-choose=compact]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .special-spin-select{gap:0;min-width:calc(var(--h) * .22);padding:0 8px;font-size:0;letter-spacing:0}

/* Chooser chrome shared by both choosers and the case files (menu-dossier.css): a wax-seal close and the bet on a felt
   plate between brass dials. Gold Mine parity: the close glows and turns on hover and keyboard focus and presses in; the
   dials press in; a special card's name grows and its Choose arrow nudges forward. */
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-header [data-action=close]{
  border:2px solid #4a0f0a;background:radial-gradient(circle at 36% 30%,#ea6151,#b3261e 50%,#76140e);color:#fff3d6;
  box-shadow:inset 0 2px 0 #ffa79566,inset 0 -3px 0 #0003,0 3px 0 #3d0b07,0 6px 12px #0008;
  transition:transform .16s ease-out,box-shadow .16s;filter:none
}
/* It only grows on hover: a turn swung its square hit box out from under a cursor near the edge, which ended the hover, turned
   it back and began it again, flickering the glow. Growing keeps the cursor inside. */
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-header [data-action=close]:is(:hover,:focus-visible){
  transform:scale(1.07);border-color:#4a0f0a;filter:brightness(1.08);
  box-shadow:inset 0 2px 0 #ffa79566,inset 0 -3px 0 #0003,0 3px 0 #3d0b07,0 0 18px #ff8a7266,0 6px 14px #000b
}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-header [data-action=close]:active{
  transform:scale(.92);box-shadow:inset 0 2px 4px #0006,0 1px 0 #3d0b07;transition-duration:.06s
}
/* The bet panel (both choosers): BET AMOUNT over the dials, a little taller than a single row. */
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet{
  display:flex;flex-direction:column;align-items:center;gap:7px;min-width:236px;padding:12px 26px 14px;
  border:2px solid #120d06;border-radius:14px;
  background:radial-gradient(ellipse 85% 120% at 50% 0,#2d6b4b,#0000 70%),url('./assets/board-felt-v1.webp') 0 0/360px,#0e3b28;
  box-shadow:inset 0 0 0 3px #eec45a88,inset 0 0 0 4px #0b2418,inset 0 8px 14px #0008,0 8px 18px #0009
}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet .label{
  font:700 10px/1.2 'Courier New',Courier,monospace;letter-spacing:.22em;color:#f2dc9f;text-shadow:0 1px 0 #000a
}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-value{
  min-width:4.4em;text-align:center;font:800 24px/1.1 'Avenir Next','Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;-webkit-text-stroke:0;text-shadow:0 2px 0 #062016,0 0 14px #ffd75a33
}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step{
  width:38px;height:38px;min-width:38px;min-height:38px;border:2px solid #120d06;color:#2b1f0d;
  background:radial-gradient(circle at 38% 30%,#fff7d4,#f0c75c 40%,#b5862b 74%,#7a581b);
  box-shadow:inset 0 -3px 0 #0003,inset 0 2px 0 #fff9df,0 3px 0 #120d06,0 5px 8px #0007;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.4),box-shadow .16s,filter .16s
}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step svg{stroke-width:3.4}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step:not(:disabled):active{transform:translateY(2px) scale(.93);box-shadow:inset 0 2px 4px #0005,0 1px 0 #120d06;transition-duration:.06s}
:host([data-layout]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step:disabled{opacity:.45;filter:grayscale(.6)}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-title.banana-lettering{transform-origin:0 50%;transition:transform .22s cubic-bezier(.2,.8,.3,1.3)}
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .button.special-spin-choice:is(:hover,:focus-visible):not(:disabled) .special-spin-title.banana-lettering{transform:scale(1.07)}
.dialog[data-panel=special-spins] .special-spin-select::after{transition:transform .2s cubic-bezier(.2,.8,.3,1.4)}
.dialog[data-panel=special-spins] .special-spin-choice:is(:hover,:focus-visible):not(:disabled) .special-spin-select::after{transform:translateX(3px)}

/* Volatility (volatility.js, presentation.js volatilityBadge): the intro's stamp in small, on every chooser card and on the
   buy confirmations — VOLATILITY, five brass rounds (lit 3, 4 or 5; the rest empty casings) and the word stamped in the
   card's colour. One line, never wrapping. */
.banana-volatility{display:inline-flex;align-items:center;gap:.5em;flex:none;min-width:0;font:800 var(--vol-size,9px)/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--vol-ink,#efe2b8)}
.banana-volatility-rounds{display:inline-flex;gap:2px}
/* The shell's menu rows stretch every span in a row (styles.js .menu-list .button span{flex:1}); the meter's parts keep their size. */
.dialog .menu-list .button .banana-volatility,.dialog .menu-list .button .banana-volatility>span{flex:none}
.banana-volatility-rounds i{display:block;width:.55em;height:1.35em;border-radius:50% 50% .1em .1em/40% 40% .1em .1em;background:linear-gradient(#0000 62%,#5a3b0b40 62% 70%,#0000 70%),#a8761f26;box-shadow:inset 0 0 0 1px #c9a24f80}
.banana-volatility-rounds i.on{background:linear-gradient(#0000 62%,#5a3b0b 62% 70%,#0000 70%),linear-gradient(90deg,#8a5d17,#f6d77a 42%,#a8761f);box-shadow:0 0 0 1px #3d2906}
.banana-volatility-level{padding:.28em .45em .22em;border:1.5px solid currentColor;border-radius:3px;font-family:'Cooper Black','Arial Black',Georgia,serif;font-weight:400;letter-spacing:.06em;color:var(--vol-stamp,#ffd98a);rotate:-4deg;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,#0000)}
/* Special cards: at the right of the kicker row, the bet multiple at its left. */
:host([data-layout]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{--vol-size:clamp(7.5px,calc(var(--h,140px) * .062),9px);margin-left:auto}
/* Bonus cases: a line of its own between the blurb and the price. */
.dialog[data-panel=features] .button.feature-mission-choice>.banana-volatility{--vol-size:9px;--vol-stamp:#ffe08a;align-self:center;margin:-2px 0 0}
.dialog[data-panel=features] .button.feature-mission-choice[data-mode=super]>.banana-volatility{--vol-stamp:#f0c8ff;--vol-ink:#f1e2f6}
/* Popout S: the chooser is drawn at about 0.43 of its size, so the meter is set larger (15 px reads as 6.5 px). On the special
   cards the bet multiple and Choose tag are left out there (popout-fit.css); the meter takes the Choose tag's place, at the
   right of the price row. */
:host([data-fit=small]) .dialog[data-panel=features] .button.feature-mission-choice>.banana-volatility{--vol-size:14px;letter-spacing:.08em}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-copy{position:static}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker{height:0}
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{--vol-size:13px;position:absolute;z-index:2;top:14px;right:24px;letter-spacing:.08em}
/* There it sits at the top right, beside the name (the bet multiple is left out there), and drops its VOLATILITY caption,
   keeping the rounds and the stamped word; the price row stays the price's own. */
:host([data-layout][data-fit=small]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility>.banana-volatility-name{display:none}
:host([data-fit=popout]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{--vol-size:9.5px}
:host([data-fit=popout]) .dialog[data-panel=features] .button.feature-mission-choice>.banana-volatility{--vol-size:11px}
/* Narrow cards (phones): the kicker's lettering closes up so the multiple and the meter share one line; the narrowest phones
   set it a size smaller. (Phone-fit rules and the window width, not container queries: the panel may be zoomed.) */
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-classification{letter-spacing:.09em}
:host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{letter-spacing:.06em;gap:.4em}
@media(max-width:380px){
  :host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-classification{font-size:8.5px;letter-spacing:.07em}
  :host([data-layout][data-panel-fit=phone]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker>.banana-volatility{--vol-size:8px;letter-spacing:.05em}
}
/* Where a kicker still runs past its card (Banana Spins' VERY HIGH ran 8-13 px over the frame; theme.js measures it and marks
   the shell), every card's meter drops its "Volatility" word: the bullets and the stamp stay, and the narrowest phones' kicker
   is a size larger for it (it was 7 px). */
:host([data-layout][data-panel-fit=phone][data-special-kicker=tight]) .dialog[data-panel=special-spins] .menu-list .special-spin-choice .special-spin-kicker .banana-volatility-name{display:none}
/* Popout S: popout-fit.css's 116 px cards keep 10 px under the price, which sits on the painted frame; 14 px clears it, and
   the name gives up the 2 px. (One attribute more than popout-fit.css's rules, which load last.) */
:host([data-layout][data-fit=small][data-panel-fit]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .button.special-spin-choice{padding-bottom:14px}
:host([data-layout][data-fit=small][data-panel-fit]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special] .menu-list .special-spin-choice .special-spin-title.banana-lettering{height:20px}
/* Popout S: the chooser is drawn about 1.3 times in a fixed room (popout-fit.css counts on a 512 px chooser): Banana Spins'
   extra line is paid for with tighter gaps between the cards and slightly smaller dials. */
:host([data-layout][data-fit=small][data-panel-fit]) .dialog[data-panel=special-spins][data-banana-presentation=true][data-banana-mode=special]{--banana-extra:12px;--sp-gap:7px}
:host([data-layout][data-fit=small][data-panel-fit]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet{padding:7px 22px 9px;gap:4px}
:host([data-layout][data-fit=small][data-panel-fit]) .dialog:is([data-panel=features],[data-panel=special-spins])[data-banana-presentation=true][data-banana-mode] .dialog-bet-step{width:34px;height:34px;min-width:34px;min-height:34px}

/* Desktop: the banana (menu-banana.js, the game's own character idling) stands large at the chooser's bottom right, framed
   from the thighs up by the bottom of the screen; the script sizes and places him in the room the menu leaves (overlay px). Out of
   the overlay's flex flow, over the backdrop, under nothing he could cover. */
.overlay>.special-spin-hitman{position:absolute;z-index:3;margin:0;pointer-events:none;filter:drop-shadow(-6px 10px 14px #000a)}
.overlay>.special-spin-hitman[hidden]{display:none}

/* Shared by the chooser's Choose buttons and the matching folder confirmation. --special-face-filter turns the chooser card's
   emerald leather (special-spin-panel-v1) to the card's own colour, as --special-frame-filter does its frame. */
:is(.special-spin-choice[data-mode=wilds],[data-banana-special=wilds]){
  --special-accent:#a4e0ba;--special-wash:#2f936940;--special-border:#42d7a3;
  --special-light:#c6ffe5;--special-ink:#113c28;--special-frame-filter:hue-rotate(110deg);--special-face-filter:none
}
:is(.special-spin-choice[data-mode=bazooka],[data-banana-special=bazooka]){
  --special-accent:#ffe09a;--special-wash:#c19a2a45;--special-border:#eec968;
  --special-light:#ffed9a;--special-ink:#2c3015;--special-frame-filter:none;--special-face-filter:hue-rotate(-117deg) saturate(1.1)
}
:is(.special-spin-choice[data-mode=double_bazooka],[data-banana-special=double_bazooka]){
  --special-accent:#e5b9ff;--special-wash:#a046c166;--special-border:#ba75f1;
  --special-light:#efd2ff;--special-ink:#3f175e;--special-frame-filter:hue-rotate(225deg);--special-face-filter:hue-rotate(113deg)
}
:is(.special-spin-choice[data-mode=triple_bazooka],[data-banana-special=triple_bazooka]){
  --special-accent:#ffb887;--special-wash:#db62365c;--special-border:#f16b35;
  --special-light:#ffbd82;--special-ink:#51160a;--special-frame-filter:hue-rotate(-40deg) saturate(1.2);--special-face-filter:hue-rotate(-143deg) saturate(1.2)
}
:is(.special-spin-choice[data-mode=banana],[data-banana-special=banana]){
  --special-accent:#ffe895;--special-wash:#c5b72e4d;--special-border:#f0c440;
  --special-light:#fff1a0;--special-ink:#433309;--special-frame-filter:saturate(1.15);--special-face-filter:hue-rotate(-115deg) saturate(1.2)
}

.banana-lettering{position:relative;isolation:isolate;display:block;min-width:0;width:100%;max-width:100%;height:var(--lettering-height,34px);padding:0!important;background:var(--lettering-art) center/contain no-repeat!important;color:transparent!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;-webkit-text-stroke:0!important;text-shadow:none!important;filter:drop-shadow(0 2px 1px #07170cbb) drop-shadow(0 0 7px color-mix(in srgb,var(--bonus-glow,#e9c860) 35%,transparent))}
.banana-lettering::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#c9faff22 45%,#ffffffe0 49%,#ffffff22 53%,transparent 61%) 130% 0/320% 100% no-repeat;-webkit-mask:var(--lettering-art) center/contain no-repeat;mask:var(--lettering-art) center/contain no-repeat;mix-blend-mode:screen;opacity:0;animation:banana-lettering-glimmer var(--glimmer-period,10s) var(--glimmer-delay,-3s) linear infinite}
@keyframes banana-lettering-glimmer{0%,79%{opacity:0;background-position:130% 0}81%{opacity:.6;background-position:130% 0}92%{opacity:.6;background-position:-30% 0}94%,100%{opacity:0;background-position:-30% 0}}
.banana-lettering[data-lettering=bonus]{--glimmer-period:9.7s;--glimmer-delay:-2.4s}
.banana-lettering[data-lettering=free-spins]{--glimmer-period:9.4s;--glimmer-delay:-6.2s}
.banana-lettering[data-lettering=super-free-spins]{--glimmer-period:10.7s;--glimmer-delay:-4.4s}
.banana-lettering[data-lettering=congratulations]{--glimmer-period:8.5s;--glimmer-delay:-5s}
.banana-lettering[data-lettering=choose-a-feature]{--glimmer-period:11.2s;--glimmer-delay:-8s}
.banana-lettering[data-lettering=mission-complete]{--glimmer-period:12s;--glimmer-delay:-6s}
/* The sweep repaints its lettering every ten seconds or so, and Safari can draw the large painted art under a repainted element
   a frame late (a blink) once it has let that art's decoded image go: the Bonus and Special Spins buttons blinked together every
   half minute or so. Lettering that stays on screen over painted art (the home buttons and the choosers) keeps still; the
   passing plaques and banners keep their sweep. */
:is(.feature-menu,.special-menu,.banana-mobile-options>button)>.banana-lettering::after,.dialog:is([data-panel=features],[data-panel=special-spins]) .banana-lettering::after{display:none;animation:none}
:host([data-reduced=true]) .banana-lettering::after,.banana-transition[data-reduced=true] .banana-lettering::after,.banana-slap[data-reduced=true] .banana-lettering::after{display:none;animation:none}
:host([data-suspended=true]) .banana-lettering::after,[data-suspended=true] .banana-lettering::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.banana-lettering::after{display:none;animation:none}}
:host([data-layout]) :is(.feature-menu,.special-menu) .feature-name.banana-lettering{height:42px;flex:none;filter:drop-shadow(0 3px 2px #06150de6) drop-shadow(0 0 8px #ffc85750)}
:host([data-layout]) .special-menu .feature-name.banana-lettering{height:32px}
:host([data-layout]) .banana-mobile-options>button>span.banana-lettering{height:23px;flex:none}
:host([data-layout=mini]) :is(.feature-menu,.special-menu) .feature-name.banana-lettering{height:23px}
.special-note .special-note-name.banana-lettering{height:24px;filter:drop-shadow(0 2px 1px #180e08bb)}
.special-note .special-note-name.banana-lettering::after{display:none}
@media(max-width:600px){.special-note .special-note-name.banana-lettering{height:20px}}
.dialog .dialog-header h2.banana-lettering{height:50px;flex:none}
.dialog[data-panel=features] .dialog-header h2.banana-lettering{height:48px}
.dialog[data-panel=special-spins] .dialog-header h2.banana-lettering{height:44px}
.dialog :is([data-action=feature],[data-action=special])>span.banana-lettering{height:35px;flex:none;z-index:2}
.dialog[data-panel=menu] :is([data-action=feature],[data-action=special])>span.banana-lettering{height:25px;flex:1}
.dialog[data-panel=special-spins] .special-spin-title.banana-lettering{height:29px;width:100%}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.banana-lettering{width:calc(100% + 24px);max-width:none;height:auto;aspect-ratio:4.4;margin:0 -12px;flex:none}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label).banana-lettering{width:220px;max-width:90%;height:28px;margin:12px auto 0}
.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit.banana-lettering{width:min(300px,95%);height:42px;margin:0 auto}
.banana-lettering-accent{position:absolute;inset:8px 0 auto;height:64px;z-index:0;pointer-events:none;opacity:.65}
.banana-lettering-accent img{position:absolute;top:-9px;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 3px 2px #021009);transform-origin:50% 70%}
.banana-lettering-accent .left{left:8%;rotate:-24deg}.banana-lettering-accent .right{right:8%;rotate:24deg;scale:-1 1}
.dialog[data-panel=features] [data-action=feature]{isolation:isolate}
.dialog[data-panel=features] [data-action=feature]>:not(.banana-lettering-accent){position:relative;z-index:2}
.bonus-counter>small.banana-lettering{height:30px;margin:0 auto 10px;width:95%}
.bonus-counter>small.banana-lettering[data-remaining=true]::before{content:'LEFT';position:absolute;top:100%;left:0;width:100%;font:800 9px/1 system-ui;letter-spacing:.18em;color:#f2e5b6;text-align:center}
.bt-stamp.banana-lettering{width:86%;height:50%;border:0;border-radius:0;box-shadow:none;mask:none;filter:drop-shadow(0 3px 2px #30200899);padding:0!important}
.banana-slap .bt-stamp .banana-lettering{width:100%;height:calc(var(--stamp-size)*.9)}
.banana-slap .bt-stamp{width:82%}
@media(max-height:500px){.dialog .dialog-header h2.banana-lettering{height:32px}.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) :is(.feature-intro-label,.feature-total-label).banana-lettering{height:19px;margin-top:6px}.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .feature-unit.banana-lettering{height:27px}.dialog :is([data-action=feature],[data-action=special])>span.banana-lettering{height:27px}}
@media(max-width:420px){.dialog:is([data-panel=feature-intro],[data-panel=feature-summary]) .dialog-header h2.banana-lettering{width:calc(100% + 8px);margin-inline:-4px}.banana-lettering-accent .left{left:4%}.banana-lettering-accent .right{right:4%}}

/* Big-win style previews (win-styles.js, ?winstyle=). Loaded only when a non-classic style is chosen; celebration.css stays
   the classic. Every size inside the scene is in em of --u (a hundredth of the scene's width, set in px by layout()), never
   container units. The landed state of every piece is here, so a stopped or reduced-motion celebration still reads. Text
   that must survive Popout S (the 1200 x 675 composition drawn at a third) keeps a floor of --min-text, 11 px on screen. */
@font-face{font-family:'Lilita One';src:url('./assets/fonts/lilita-one.woff2') format('woff2');font-display:block}
.banana-celebration[data-winstyle]{--min-text:calc(11px / var(--k,1));--ink:#1b7a3c;--paper:#f8f1dc;--type-ink:#1d1a12;
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 6.1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.banana-celebration[data-winstyle] .banana-win-ground::before{display:none}
.banana-celebration[data-winstyle] .banana-win-content{container-type:normal}
.banana-celebration[data-winstyle] [hidden]{display:none!important}
.ws-marker{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
/* Spent brass, as the board's (board-wins.css): a dark mouth, the extractor groove near the base, matte with a small shadow. */
.ws-casing{position:absolute;left:0;top:0;width:1.9em;aspect-ratio:10/27;border-radius:.12em .12em .2em .2em;pointer-events:none;will-change:transform;
  background:linear-gradient(#0000 79%,#4a3008 79% 86%,#0000 86%),linear-gradient(#4a3008 0 7%,#0000 7%),linear-gradient(90deg,#6b4510,#c8952e 24%,#f6d77a 40%,#c8952e 62%,#5f3d0c);
  box-shadow:0 .12em .2em #000b;outline:.1em solid #2a1a06;outline-offset:-.02em}
.ws-flash{position:absolute;inset:0;z-index:20;background:#fffaf0;opacity:0;pointer-events:none}

/* ---- Case File: a lamp-lit desk, a manila dossier, a rubber stamp per tier and the amount typed on the cover sheet ---- */
.banana-celebration[data-winstyle=casefile]{background:radial-gradient(ellipse 75% 70% at 50% 50%,rgb(16 20 15/.58),rgb(3 5 4/.9))}
.banana-celebration[data-winstyle=casefile] .ws-lamp{position:absolute;z-index:1;left:var(--art-x,50%);top:var(--art-y,50%);width:calc(var(--scene-width) * 1.45);aspect-ratio:1.3;transform:translate(-50%,-50%);transform-origin:50% -30%;pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 50% 47%,rgb(255 217 150/.34),rgb(255 196 110/.13) 46%,transparent 72%)}
.banana-celebration[data-winstyle=casefile] .ws-blinds{position:absolute;z-index:1;inset:-40%;pointer-events:none;transform:rotate(-14deg);opacity:.9;
  background:repeating-linear-gradient(0deg,transparent 0 calc(var(--u) * 3.4),rgb(255 228 170/.055) calc(var(--u) * 3.4) calc(var(--u) * 5.6));
  -webkit-mask:radial-gradient(ellipse 45% 40% at 55% 45%,#000,transparent 75%);mask:radial-gradient(ellipse 45% 40% at 55% 45%,#000,transparent 75%)}
.cf-scene{position:absolute;inset:0;font-size:var(--u);--b:10em;transform-origin:50% 55%}
.cf-folder{position:absolute;z-index:3;left:10em;top:9.5em;width:80em;height:49em;transform-origin:50% 85%;filter:drop-shadow(0 1.2em 1em #000a)}
.cf-body{position:absolute;inset:0;border:1px solid transparent;border-image-slice:300 550 320 550 fill;border-image-width:6.6em 12.1em 7em 12.1em;border-image-repeat:stretch}
.cf-tab{position:absolute;left:0;top:-2.4em;width:21.6em;height:2.45em;background:left bottom/contain no-repeat}
.cf-sheet{position:absolute;left:6.5em;right:6.5em;top:4.6em;bottom:5.4em;rotate:-1.1deg;border-radius:.35em;background:linear-gradient(#0000 0 0),repeating-linear-gradient(transparent 0 2.3em,#9a958614 2.3em calc(2.3em + 1px)),var(--paper);
  box-shadow:0 .25em .5em #0005,inset 0 0 2.4em #c9b88a55;outline:.32em dashed #cd2f28b3;outline-offset:-1.7em}
.cf-stamps{position:absolute;left:0;right:0;top:4%;height:50%;display:grid;place-items:center}
.cf-stamp{grid-area:1/1;position:relative;z-index:1;display:block;padding:.13em .38em .06em;font:400 calc(var(--b) * var(--stamp-em,1))/1.08 'Lilita One','Arial Black',sans-serif;letter-spacing:.035em;white-space:nowrap;color:var(--ink);
  border:.085em solid var(--ink);border-radius:.13em;box-shadow:inset 0 0 0 .045em var(--paper),inset 0 0 0 .09em var(--ink);rotate:var(--tilt,-5deg);mix-blend-mode:multiply;
  -webkit-mask:var(--grunge) 0 0/5em 5em;mask:var(--grunge) 0 0/5em 5em}
.cf-stamp[data-lifted]{opacity:0}
.cf-tool{position:absolute;z-index:3;left:calc(50% - var(--b) * 2.75);top:calc(50% - var(--b) * 3.02);width:calc(var(--b) * 5.5);height:calc(var(--b) * 4.125);opacity:0;transform-origin:50% 88%;pointer-events:none;filter:drop-shadow(0 .6em .5em #0008)}
.cf-tool svg{display:block;width:100%;height:100%;overflow:visible}
.cf-chip{position:absolute;z-index:2;left:50%;top:62%;width:1.1em;height:.8em;border-radius:.15em;background:var(--paper);box-shadow:0 0 0 .12em #1d1a1255;opacity:0;pointer-events:none}
.cf-chip-1{width:.7em;height:.9em}.cf-chip-2{background:#e8d6a6;width:.9em;height:.55em}
.cf-amount{position:absolute;left:4%;right:4%;top:54%;height:26%;display:flex;align-items:center;justify-content:center}
.cf-amount::after{content:'';position:absolute;left:12%;right:12%;bottom:4%;height:.22em;border-radius:1em;background:#1d1a1240}
.banana-celebration[data-winstyle=casefile] .cf-amount .banana-win-amount{display:block;max-width:none;margin:0;font:800 min(8.4em,calc(52em / (var(--amount-length,10) * .62)))/1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.005em;color:var(--type-ink);text-shadow:0 0 .03em #1d1a1266;-webkit-text-stroke:0;transform-origin:50% 60%}
.banana-celebration[data-winstyle=casefile] .cf-sheet .banana-celebration-caption{position:absolute;left:0;right:0;top:auto;bottom:6%;width:auto;font:700 max(2.1em,var(--min-text))/1 'Courier New',Courier,monospace;letter-spacing:.32em;color:#5d503a;text-shadow:none;text-align:center}
.banana-celebration[data-winstyle=casefile][data-cap=true] .cf-sheet .banana-celebration-caption{display:none}
.cf-badge{position:absolute;z-index:4;right:-6em;top:-6.5em;width:27em;aspect-ratio:1280/497;background:center/contain no-repeat;rotate:8deg;filter:drop-shadow(0 .5em .5em #000a)}
.cf-paper{position:absolute;z-index:2;width:21em;aspect-ratio:1;background:center/contain no-repeat;filter:drop-shadow(0 .5em .6em #0008)}
.cf-paper-0{left:5em;top:4em;rotate:-15deg}.cf-paper-1{right:5em;top:3em;rotate:13deg}.cf-paper-2{left:39.5em;bottom:-3em;rotate:3deg;z-index:2}
.cf-revolver{position:absolute;z-index:5;right:-1.5em;bottom:-5em;width:25em;aspect-ratio:1;background:center/contain no-repeat;rotate:-28deg;filter:drop-shadow(0 .6em .5em #000b)}
.cf-desk{position:absolute;z-index:6;left:50%;bottom:1.6em;width:0;height:0}
/* Short landscape (a native popout): the same file, a little flatter. */
.banana-celebration[data-winstyle=casefile][data-shape=wide] .cf-folder{left:13em;top:7.5em;width:74em;height:42em}
.banana-celebration[data-winstyle=casefile][data-shape=wide] .cf-scene{--b:9em}
.banana-celebration[data-winstyle=casefile][data-shape=wide] .cf-paper{width:18em}
.banana-celebration[data-winstyle=casefile][data-shape=wide] .cf-revolver{width:21em;right:1em;bottom:-3em}
/* Phones: a tall file across the full width, the stamp above the amount, the revolver on the desk below. */
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-scene{--b:12.5em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-folder{left:2em;top:24em;width:96em;height:104em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-tab{top:-4.4em;width:40em;height:4.5em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-body{border-image-width:9em 12em 9.6em 12em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-sheet{left:6em;right:6em;top:8em;bottom:8em;outline-offset:-2.4em;outline-width:.5em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-stamps{top:8%;height:40%}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-amount{top:50%;height:24%}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-amount .banana-win-amount{font-size:min(14em,calc(74em / (var(--amount-length,10) * .62)))}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-sheet .banana-celebration-caption{font-size:max(3.4em,var(--min-text));bottom:9%}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-badge{right:auto;left:30em;top:calc(100% + 3em);width:64em;rotate:-3deg}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-paper{width:40em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-paper-0{left:-4em;top:6em}.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-paper-1{right:-4em;top:3em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-paper-2{left:4em;bottom:20em;rotate:-8deg}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-revolver{right:auto;left:-7em;bottom:3em;width:36em;rotate:24deg;scale:-1 1;z-index:5}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .cf-desk{bottom:4em}
.banana-celebration[data-winstyle=casefile][data-shape=tall] .ws-casing{width:2.5em}

/* ---- Title Card: a spy-film card. Letterbox bars, light through the blinds in the tier's gel, a scope round the amount,
   film grain, and a follow spot that finds the hitman when the count lands. The scrim is its own layer here, so it can
   leave him unblurred: a hole in its mask, darkened by the lid until the lights come up (opacity only). ---- */
.banana-celebration[data-winstyle=titlecard]{--gel:#46d684;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.tc-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 72% at 50% 48%,rgb(10 13 12/.74),rgb(2 3 3/.93));-webkit-backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))));backdrop-filter:blur(max(1.5px,calc(4px * var(--k,1))))}
.banana-celebration[data-spot=true] .tc-scrim{-webkit-mask:radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),transparent 52%,#000 100%);mask:radial-gradient(var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),transparent 52%,#000 100%)}
.tc-lid,.tc-beam{position:absolute;pointer-events:none}
.tc-lid{z-index:0;left:calc(var(--spot-x) - var(--spot-rx));top:calc(var(--spot-y) - var(--spot-ry));width:calc(var(--spot-rx) * 2);height:calc(var(--spot-ry) * 2);border-radius:50%;background:radial-gradient(closest-side,rgb(4 6 5/.86) 0 62%,rgb(4 6 5/.55) 82%,transparent)}
.tc-beam{z-index:1;left:calc(var(--spot-x) - var(--spot-rx) * 1.35);top:0;width:calc(var(--spot-rx) * 2.7);height:calc(var(--spot-y) + var(--spot-ry) * .98);transform-origin:50% 0;opacity:0;
  background:radial-gradient(ellipse 42% 9% at 50% 93%,rgb(255 236 190/.3),transparent 70%),linear-gradient(rgb(255 238 196/0),rgb(255 238 196/.12) 55%,rgb(255 238 196/.18));clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  -webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.banana-celebration[data-revealed=true] .tc-lid{opacity:0}.banana-celebration[data-revealed=true] .tc-beam{opacity:1}
.banana-celebration[data-spot=false] :is(.tc-lid,.tc-beam){display:none}
.tc-blinds{position:absolute;z-index:1;inset:-40%;pointer-events:none;transform:rotate(-14deg);
  background:repeating-linear-gradient(0deg,transparent 0 calc(var(--u) * 3.4),color-mix(in srgb,var(--gel) 10%,transparent) calc(var(--u) * 3.4) calc(var(--u) * 5.6));
  -webkit-mask:radial-gradient(ellipse 42% 38% at 45% 46%,#000,transparent 75%);mask:radial-gradient(ellipse 42% 38% at 45% 46%,#000,transparent 75%)}
.tc-bar{position:absolute;z-index:15;left:0;right:0;height:7%;background:#020302;pointer-events:none}
.tc-bar-top{top:0;box-shadow:0 .3em 1.4em #000;border-bottom:max(1px,calc(var(--u) * .18)) solid color-mix(in srgb,var(--gel) 55%,#000)}.tc-bar-bottom{bottom:0;box-shadow:0 -.3em 1.4em #000;border-top:max(1px,calc(var(--u) * .18)) solid color-mix(in srgb,var(--gel) 55%,#000)}
.tc-grain{position:absolute;z-index:16;inset:-10%;opacity:.07;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.tc-scene{position:absolute;inset:0;font-size:var(--u);--tb:10.5em}
.tc-title{position:absolute;left:8em;right:8em;top:0;height:13em;display:grid;place-items:center;overflow:hidden}
.tc-title::before,.tc-title::after{content:'';position:absolute;left:24%;right:24%;height:.32em;border-radius:1em;background:var(--gel);opacity:.85}
.tc-title::before{top:.7em}.tc-title::after{bottom:.7em}
.tc-words{grid-area:1/1;display:block;font:400 calc(var(--tb) * var(--title-em,1))/1 'Lilita One','Arial Black',sans-serif;letter-spacing:.12em;margin-right:-.12em;white-space:nowrap;color:#f7ecd0;
  text-shadow:0 .05em 0 #0a0b0a,0 0 .45em color-mix(in srgb,var(--gel) 45%,transparent)}
.tc-words[data-gone]{opacity:0}
.tc-wipe{position:absolute;inset:0;z-index:2;background:var(--gel);transform:translateX(101%)}
.tc-scope{position:absolute;z-index:2;left:29em;top:13.4em;width:42em;aspect-ratio:1;filter:drop-shadow(0 .5em .8em #000c)}
.tc-lens{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gel) 34%,transparent),color-mix(in srgb,var(--gel) 14%,transparent) 50%,rgb(0 0 0/.25) 71%,transparent 72%)}
.tc-part{position:absolute;inset:0}.tc-part svg,.tc-muzzle svg{display:block;width:100%;height:100%;overflow:visible}
.tc-muzzle{position:absolute;left:30%;top:30%;width:40%;aspect-ratio:1;opacity:0}
.tc-band{position:absolute;z-index:3;left:18em;right:18em;top:28.1em;height:12.6em;display:flex;align-items:center;justify-content:center;border-radius:.9em;
  background:linear-gradient(#1b1e1b,#070807);border:.38em solid #c8952e;box-shadow:0 0 0 .22em #0b0d0c,0 .6em 1.2em #000b,inset 0 .3em .7em #000d}
.banana-celebration[data-winstyle=titlecard] .tc-band .banana-win-amount{display:block;max-width:none;margin:0;font:800 min(8.8em,calc(56em / (var(--amount-length,10) * .62)))/1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;color:#fbe9b6;text-shadow:0 .05em 0 #000,0 0 .35em color-mix(in srgb,var(--gel) 35%,transparent);-webkit-text-stroke:0}
.banana-celebration[data-winstyle=titlecard] .tc-scene .banana-celebration-caption{position:absolute;z-index:3;left:0;right:0;top:calc(var(--u) * 42.4);width:auto;font:800 max(1.9em,var(--min-text))/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.34em;color:#efe2bf;text-shadow:0 .1em .2em #000,0 0 .35em #000,0 0 .7em #000;text-align:center}
.banana-celebration[data-winstyle=titlecard][data-cap=true] .tc-scene .banana-celebration-caption{display:none}
.tc-badge{position:absolute;z-index:3;left:37em;top:45.2em;width:26em;aspect-ratio:1280/497;background:center/contain no-repeat;filter:drop-shadow(0 .4em .5em #000b)}
.tc-floor{position:absolute;z-index:2;left:50%;top:53.5em;width:0;height:0}
.tc-floor .ws-casing{width:1.35em}
/* Short landscape (native popouts). */
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-scene{--tb:9em}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-title{top:-.5em;height:11em}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-scope{left:33em;top:10.5em;width:34em}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-band{left:22em;right:22em;top:22.6em;height:10em}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-scene .banana-celebration-caption{top:calc(var(--u) * 34.6)}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-badge{left:69em;top:35em;width:24em}
.banana-celebration[data-winstyle=titlecard][data-shape=wide] .tc-floor{top:46em}
/* Phones: title, scope and reading in the upper part; the hitman keeps the lower right for his follow spot. */
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-scene{--tb:13.5em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-title{left:0;right:0;top:6em;height:20em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-scope{left:13em;top:25em;width:74em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-band{left:0;right:0;top:53em;height:18em;border-width:.6em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-band .banana-win-amount{font-size:min(13.5em,calc(84em / (var(--amount-length,10) * .62)))}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-scene .banana-celebration-caption{top:calc(var(--u) * 75);font-size:max(3.4em,var(--min-text))}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-badge{left:3em;top:101em;width:58em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-floor{left:30%;top:150em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .ws-casing{width:3em}
.banana-celebration[data-winstyle=titlecard][data-shape=tall] .tc-bar{height:5%}

/* ---- The Payoff: an open green leather case. The lid lining (with its handle above and a brass nameplate mounted in it)
   stands at the back, the tray in front fills with bundled cash a row a tier, rising over the leather front wall with its
   brass latches. The amount is on the brass plaque below. Bills (never coins) spill over the rim at the top tiers. ---- */
.banana-celebration[data-winstyle=payoff]{--gel:#46d684;--brass:linear-gradient(#fff3c4,#e8bd57 40%,#a9761f 75%,#d9a940);background:radial-gradient(ellipse 72% 68% at 50% 50%,rgb(16 30 22/.6),rgb(3 6 5/.9))}
.po-lamp{position:absolute;z-index:1;left:var(--art-x,50%);top:var(--art-y,50%);width:calc(var(--scene-width) * 1.3);aspect-ratio:1.4;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 50% 46%,rgb(255 222 160/.26),rgb(255 200 120/.09) 48%,transparent 72%)}
.po-scene{position:absolute;inset:0;font-size:var(--u);--tb:8.6em}
.po-case{position:absolute;z-index:2;left:16em;top:3.4em;width:68em;height:49em;transform-origin:50% 100%;filter:drop-shadow(0 1em 1.2em #000b)}
.po-lid{position:absolute;z-index:1;left:0;right:0;top:0;height:25em;display:grid;place-items:center;border-radius:2em 2em .8em .8em;transform-origin:50% 100%;
  background:radial-gradient(ellipse 70% 60% at 50% 40%,#2c6a45,#123824 70%),#123824;border:.75em solid #c8952e;box-shadow:inset 0 0 0 .3em #1d1206,inset 0 0 2.4em #000c,0 0 0 .3em #1d1206}
.po-lid::before{content:'';position:absolute;left:calc(50% - 9em);top:-5.6em;width:18em;height:5.4em;border:1.6em solid #5a3a1c;border-bottom:0;border-radius:3em 3em 0 0;box-shadow:0 0 0 .3em #1d1206,inset 0 0 0 .3em #1d1206,inset 0 .5em 0 #8a5c2c}
.po-lid::after{content:'';position:absolute;inset:1.6em;border-radius:1.2em;border:.2em dashed #c8952e66;pointer-events:none}
.po-plate{position:absolute;z-index:4;left:9%;width:82%;top:4.4em;height:13.4em;display:grid;place-items:center;border-radius:.9em;perspective:30em;
  background:linear-gradient(#2a1a0f,#140b06);border:.42em solid #c8952e;box-shadow:0 0 0 .22em #1d1206,inset 0 0 0 .3em color-mix(in srgb,var(--gel) 55%,#140b06),inset 0 .5em 1.2em #000c,0 .5em 1em #0009}
.po-plate::before,.po-plate::after{content:'';position:absolute;top:calc(50% - .8em);width:1.6em;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff7d4,#f0c75c 40%,#b5862b 74%,#7a581b);box-shadow:0 .1em .2em #000a}
.po-plate::before{left:1.1em}.po-plate::after{right:1.1em}
.po-flap{position:relative;display:grid;place-items:center;width:100%;height:100%;transform-style:preserve-3d}
.po-words{grid-area:1/1;display:block;font:400 calc(var(--tb) * var(--title-em,1))/1 'Lilita One','Arial Black',sans-serif;letter-spacing:.06em;margin-right:-.06em;white-space:nowrap;
  color:#f3cf6a;background:linear-gradient(#fff6cf 8%,#f2c95a 46%,#b07d22 54%,#f6d77a 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .06em 0 #1b0e04) drop-shadow(0 0 .25em color-mix(in srgb,var(--gel) 40%,transparent));backface-visibility:hidden;transform-origin:50% 50%}
.po-words[data-gone]{opacity:0}
.po-tray{position:absolute;z-index:2;left:1.2em;right:1.2em;top:24em;bottom:0;border-radius:.6em;background:linear-gradient(#071a10,#0e2a1b 40%,#123423);box-shadow:inset 0 1.2em 1.6em #000c}
.po-stack{position:absolute;left:3.4em;right:3.4em;bottom:7.6em;height:0;transform-origin:50% 100%}
.po-cash{position:absolute;left:calc(var(--col) * 13.6em);bottom:calc(var(--row) * 5.5em);width:12.8em;height:5.2em;border-radius:.45em;
  background:linear-gradient(90deg,transparent 42%,#f1e7c6 42% 58%,transparent 58%),linear-gradient(90deg,transparent 47.5%,#b7473b 47.5% 52.5%,transparent 52.5%),repeating-linear-gradient(0deg,#79ad6f 0 .42em,#4f8049 .42em .55em),#5c8f55;
  border:.24em solid #142312;box-shadow:inset 0 .3em 0 #b5e0a455,0 .3em .4em #000a}
.po-front{position:absolute;z-index:3;left:-.6em;right:-.6em;bottom:-.4em;height:12em;outline:.22em dashed #c8952e88;outline-offset:-1.6em;border-radius:.8em .8em 1.6em 1.6em;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#3d8a57,#1f5536 38%,#143d27);border:.6em solid #c8952e;border-top-width:.8em;box-shadow:inset 0 .4em 0 #6fbf8a66,inset 0 -1em 1.4em #0007,0 0 0 .3em #1d1206}
.po-front::before,.po-front::after{content:'';position:absolute;bottom:-.6em;width:5em;height:5em;background:var(--brass);border:.3em solid #3a2408}
.po-front::before{left:-.6em;border-radius:0 0 0 1.6em;clip-path:polygon(0 0,40% 0,100% 60%,100% 100%,0 100%)}.po-front::after{right:-.6em;border-radius:0 0 1.6em 0;clip-path:polygon(60% 0,100% 0,100% 100%,0 100%,0 60%)}
.po-latch{position:absolute;top:-1.6em;width:6em;height:4.4em;border-radius:.6em;background:var(--brass);border:.3em solid #3a2408;transform-origin:50% 100%;box-shadow:inset 0 -.8em 0 #00000026}
.po-latch-left{left:9em}.po-latch-right{right:9em}
.po-closed{position:absolute;z-index:5;left:-2em;right:-2em;top:-5.6em;bottom:-1em;background:center/100% 100% no-repeat;transform-origin:50% 0;opacity:0;pointer-events:none}
.banana-celebration[data-winstyle=payoff]:not([data-open=true]) .po-closed{opacity:1}
.po-plaque{position:absolute;z-index:4;left:9em;right:9em;top:52.2em;height:14em;display:flex;align-items:center;justify-content:center;background:center/100% 100% no-repeat;filter:drop-shadow(0 .6em .6em #000b)}
.banana-celebration[data-winstyle=payoff] .po-plaque .banana-win-amount{display:block;max-width:none;margin:0;font:800 min(8.4em,calc(58em / (var(--amount-length,10) * .62)))/1 'Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;color:#fff2c6;text-shadow:0 .05em 0 #1a1003,0 .08em .25em #000c;-webkit-text-stroke:0}
.banana-celebration[data-winstyle=payoff] .po-front .banana-celebration-caption{position:static;width:auto;font:800 max(1.9em,var(--min-text))/1 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.32em;margin-right:-.32em;color:#f6dc8e;text-shadow:0 .1em 0 #0b2414;text-align:center}
.banana-celebration[data-winstyle=payoff][data-cap=true] .po-front .banana-celebration-caption{display:none}
.po-badge{position:absolute;z-index:5;right:5em;top:-1em;width:27em;aspect-ratio:1280/497;background:center/contain no-repeat;rotate:9deg;filter:drop-shadow(0 .5em .5em #000b)}
.po-spill{position:absolute;z-index:3;left:50%;top:26em;width:0;height:0}
.po-bill{position:absolute;left:0;top:0;width:9.6em;height:4.4em;border-radius:.3em;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse 18% 32% at 50% 50%,#2f5e33 0 60%,transparent 64%),linear-gradient(#8cc082,#5f9558);border:.22em solid #1d3a1c;box-shadow:inset 0 0 0 .5em #a9d79c66}
/* Short landscape (native popouts). */
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-scene{--tb:7.2em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-plate{top:3.2em;height:10.4em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-case{left:23em;width:54em;top:2.6em;height:37em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-lid{height:19em}.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-tray{top:18.4em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-stack{transform:scale(.78);left:1.6em;right:1.6em;bottom:6.6em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-front{height:9.4em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-plaque{left:20em;right:20em;top:39.6em;height:11.4em}
.banana-celebration[data-winstyle=payoff][data-shape=wide] .po-badge{right:3em;top:2em;width:22em}
/* Phones: a tall case across the width, the plaque under it, the badge below. */
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-scene{--tb:11.4em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-case{left:3em;width:94em;top:16em;height:84em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-lid{height:40em}.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-tray{top:38.5em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-lid::before{left:calc(50% - 14em);top:-8.4em;width:28em;height:8em;border-width:2.2em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-plate{left:5%;width:90%;top:8em;height:20em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-stack{left:3em;right:3em;bottom:17em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-cash{left:calc(var(--col) * 19.2em);bottom:calc(var(--row) * 7.4em);width:18.2em;height:7em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-front{height:18em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-latch{width:9em;height:6.4em;top:-2.6em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-latch-left{left:12em}.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-latch-right{right:12em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-plaque{left:-1em;right:-1em;top:103em;height:23em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-plaque .banana-win-amount{font-size:min(13em,calc(80em / (var(--amount-length,10) * .62)))}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-front .banana-celebration-caption{font-size:max(3.4em,var(--min-text))}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-badge{left:16em;right:auto;top:128em;width:68em;rotate:-3deg}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-spill{top:40em}
.banana-celebration[data-winstyle=payoff][data-shape=tall] .po-bill{width:15em;height:6.8em}

:root{--rbg-black:#080808;--rbg-yellow:#f5c542;--rbg-white:#f7f5ef}
.rbg-loader{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;box-sizing:border-box;padding:24px;background:var(--rbg-black);color:var(--rbg-white);font-family:Arial,Helvetica,sans-serif;text-align:center;overflow:auto;color-scheme:dark}
.rbg-loader[hidden]{display:none}
.rbg-loader__content{width:min(320px,78vw);max-width:100%;margin:auto}
.rbg-loader__logo{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;margin:0 auto 30px}
.rbg-loader__progress{appearance:none;-webkit-appearance:none;display:block;width:84%;height:3px;margin:0 auto;border:0;border-radius:0;background:#323232;color:var(--rbg-yellow);overflow:hidden}
.rbg-loader__progress::-webkit-progress-bar{background:#323232}
.rbg-loader__progress::-webkit-progress-value{background:var(--rbg-yellow)}
.rbg-loader__progress::-moz-progress-bar{background:var(--rbg-yellow)}
.rbg-loader__status{margin:17px 0 0;color:#aaa9a4;font-size:11px;font-weight:400;line-height:1.6;letter-spacing:.04em;overflow-wrap:anywhere}
.rbg-loader__retry{display:block;margin:22px auto 0;padding:12px 22px;border:1px solid #696451;background:transparent;border-radius:3px;color:var(--rbg-white);font:600 12px Arial,Helvetica,sans-serif;cursor:pointer}
.rbg-loader__retry[hidden],.rbg-loader__progress[hidden]{display:none}
.rbg-loader__retry:hover{border-color:var(--rbg-yellow);color:var(--rbg-yellow)}
.rbg-loader__retry:focus-visible{outline:2px solid var(--rbg-yellow);outline-offset:5px}
.rbg-loader[data-state=error] .rbg-loader__status{color:#e5d8bd;font-size:13px}
@media(max-height:300px){.rbg-loader__content{width:220px}.rbg-loader__logo{margin-bottom:16px}.rbg-loader__status{margin-top:10px}}
/* The opaque dark master blends into the provider surface without a visible box. */
.rbg-loader__logo{mix-blend-mode:lighten}
/* Two clipped views of the same cached artwork keep the lettering perfectly still. */
.rbg-loader__brand{position:relative;width:100%;aspect-ratio:3/1;margin:0 auto 30px}
.rbg-loader__brand .rbg-loader__logo{margin:0;clip-path:inset(0 0 0 19%)}
.rbg-loader__bolt{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(0 81% 0 0);mix-blend-mode:lighten;transform-origin:10.5% 52%}
.rbg-loader:not([data-state=error]) .rbg-loader__bolt{animation:rbg-bolt-shake 3.6s ease-in-out infinite}
@keyframes rbg-bolt-shake{0%,4%,22%,100%{transform:translate(0,0) rotate(0)}7%,13%{transform:translate(-.7px,.2px) rotate(-1.7deg)}10%,16%{transform:translate(.7px,-.2px) rotate(1.7deg)}19%{transform:translate(-.3px,0) rotate(-.6deg)}}
.rbg-loader[data-suspended=true] .rbg-loader__bolt{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rbg-loader .rbg-loader__bolt{animation:none!important}}
@media(max-height:300px){.rbg-loader__brand{margin-bottom:16px}}