/* Cabinet redesign, desktop (the user's approved reference, 2026-10-05). Claude owns this layout; Codex
   paints the art. Every rectangle here is in the 1600x900 composition and matches the asset request
   sent to Codex: board window, right instrument column, footer. Art comes in through the --art-*
   variables below; until a piece is delivered it falls back to existing painted art or a plain
   PLACEHOLDER (never ship a placeholder: reviewers mark down code-drawn chrome). */
#game{
  --art-frame:url('../assets/cabinet/readout-frame-normal.webp');
  --art-frame-lit:url('../assets/cabinet/readout-frame-lit.webp');
  --art-frame-wide:url('../assets/cabinet/readout-frame-wide-normal.webp');
  --art-frame-wide-lit:url('../assets/cabinet/readout-frame-wide-lit.webp');
  --art-well:url('../assets/cabinet/stepper-well-normal.webp');
  --art-well-disabled:url('../assets/cabinet/stepper-well-disabled.webp');
  --art-knob:url('../assets/cabinet/toggle-knob-normal.webp');
  --art-knob-disabled:url('../assets/cabinet/toggle-knob-disabled.webp');
  --art-plate:url('../assets/cabinet/plate-normal.webp');
}
#game[data-layout=desktop]{--col-x:1080px;--col-y:64px;--col-w:304px}
/* Codex's nameplate cut from the scene, above the carriage canvas (z 3), so the mechanism passes behind the fixed name. */
.logo-foreground{display:none}
#game[data-layout=desktop] .logo-foreground{display:block;position:absolute;left:420px;top:0;width:420px;height:98px;z-index:4;pointer-events:none}
/* Codex's painted states for the three wide controls (both layouts): the .painted pseudo-elements show them. */
#game #buy-button{--normal:url('../assets/cabinet/button-wide-normal.webp');--pressed:url('../assets/cabinet/button-wide-pressed.webp');--disabled:url('../assets/cabinet/button-wide-disabled.webp')}
#game #boost-button.charged-toggle{--normal:url('../assets/cabinet/toggle-off.webp');--pressed:url('../assets/cabinet/toggle-on.webp');--disabled:url('../assets/cabinet/toggle-disabled.webp')}
#game #drop-button{--normal:url('../assets/cabinet/drop-capsule-normal.webp');--pressed:url('../assets/cabinet/drop-capsule-pressed.webp');--disabled:url('../assets/cabinet/drop-capsule-disabled.webp')}
#game .charged-toggle:disabled .toggle-knob{background-image:var(--art-knob-disabled);opacity:1}
/* The value wells dim while a drop plays (the steppers are locked then). */
#game[data-state=playing] .stepper .stepper-well{background-image:var(--art-well-disabled)}

/* The board window: x 232-1032, y 104-784. 800x680 is the world (1000x850) at 0.8 in both axes. */
#game[data-layout=desktop] .board-wrap{left:232px;top:104px;width:800px;height:680px}
#game[data-layout=desktop] .landing-display{left:244px;top:149px;width:240px}
#game[data-layout=desktop] .win-overlay{left:232px;top:150px;width:800px;height:540px}
#game[data-layout=desktop] .board-status,#game[data-layout=desktop] #mode-note{display:none}

/* The instrument column: recess x 1072-1392, y 64-792; controls at x 1080-1384. */
#game[data-layout=desktop] .instrument-column{position:absolute;left:var(--col-x);top:var(--col-y);width:var(--col-w);height:728px;z-index:3}
#game[data-layout=desktop] .instrument-column>*,#game[data-layout=desktop] .mode-control>*{position:absolute;left:0;width:var(--col-w);margin:0}
#game[data-layout=desktop] .mode-control{display:contents}
/* The column's own box must not block taps on its neighbours (the phone's tools and DROP sit beside it); only its controls take input. */
#game[data-layout=desktop] .instrument-column{pointer-events:none}
#game[data-layout=desktop] .instrument-column>*,#game[data-layout=desktop] .mode-control>*{pointer-events:auto}

/* FREE DROPS bank, y 76-176 (the collector is built by gem-pillar.js on the shell itself). */
#game[data-layout=desktop] .gem-lock{left:1080px;top:76px;width:304px;height:100px;text-align:left}
#game[data-layout=desktop] .lock-inset{display:none}
#game[data-layout=desktop] .lock-title{top:2px;left:2px;right:auto;font-size:19px;letter-spacing:.06em;color:#e8d3a3}
#game[data-layout=desktop] .lock-title br{display:none}
#game[data-layout=desktop] .lock-socket{top:34px;width:42px;height:58px;left:2px}
#game[data-layout=desktop] .lock-socket[data-slot="1"]{top:34px;left:54px}
#game[data-layout=desktop] .lock-socket[data-slot="2"]{top:34px;left:106px}
#game[data-layout=desktop] .lock-count{top:36px;left:auto;right:4px;width:140px;text-align:right;font-size:44px}
#game[data-layout=desktop] .bank-reward{top:4px;left:auto;right:4px;width:auto;font-size:22px;text-align:right}
#game[data-layout=desktop] .bank-reward small{display:inline;font-size:15px;margin-left:6px}

/* BUY FREE DROPS, y 188-240. */
#game[data-layout=desktop] #buy-button{top:124px;height:52px;font-size:21px;letter-spacing:.04em;color:#e9f3df}
#game[data-layout=desktop] #buy-button:before,#game[data-layout=desktop] #buy-button:after{background-size:100% 100%}

/* MULTIPLIER over WIN in one frame, y 256-524. Wells (relative): top 20-284 x 22-122, bottom 20-284 x 146-248. */
#game[data-layout=desktop] .readout-frame{top:192px;height:268px;background:var(--art-frame) center/100% 100% no-repeat}
/* Lit: a brief glow on each WIN increase (main.js pulses .win-readout) and steady through a win presentation. Under the wells. */
#game[data-layout=desktop] .readout-frame:before{content:"";position:absolute;inset:0;background:var(--art-frame-lit) center/100% 100% no-repeat;opacity:0;pointer-events:none}
#game[data-layout=desktop] .readout-frame:has(.win-readout.is-hit):before{animation:frame-lit .7s ease-out}
#game[data-layout=desktop]:has(.win-overlay.visible) .readout-frame:before{opacity:1;transition:opacity .3s}
#game[data-layout=desktop].reduce-motion .readout-frame:before{animation:none}
@keyframes frame-lit{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
#game[data-layout=desktop] .frame-well{position:absolute;z-index:1;left:20px;width:264px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums}
#game[data-layout=desktop] .frame-multiplier{top:22px;height:100px}
#game[data-layout=desktop] .win-readout{top:146px;height:102px}
#game[data-layout=desktop] .frame-label{display:block;font-size:16px;line-height:1.2;letter-spacing:.12em;color:#d9b673}
#game[data-layout=desktop] .collection{position:static;width:100%;text-align:center;z-index:auto}
#game[data-layout=desktop] .collection strong,#game[data-layout=desktop] .collection-idle,#game[data-layout=desktop] .win-readout strong{display:block;width:100%;font-size:50px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:visible}
#game[data-layout=desktop] .collection strong,#game[data-layout=desktop] .collection-idle{color:#fff3d6}
#game[data-layout=desktop] .win-readout strong{color:#f7db9e}
/* When no single multiplier is true (paid multi-ball, the sum on the glass), the well shows a neutral x1 at rest. */
#game[data-layout=desktop] .collection-idle{display:none;opacity:.55}
#game[data-layout=desktop] .collection[hidden]+.collection-idle{display:block}

/* CHARGED toggle, y 540-596: label zone x 16-150, switch slot x 160-288 with a sliding knob. */
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle{top:476px;width:var(--col-w);height:56px;font-size:21px;letter-spacing:.04em;justify-content:flex-start}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle:before,#game[data-layout=desktop] .mode-control #boost-button.charged-toggle:after{background-size:100% 100%}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle>span{position:absolute;inset:0;display:block;white-space:nowrap}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle>span{line-height:56px;padding-left:22px;text-align:left}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle small{position:absolute;top:0;left:222px;width:66px;text-align:center;font-size:19px;line-height:56px;display:block;color:#cdded6}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle[aria-pressed=true] small{left:160px;color:#ffe2a3}
#game[data-layout=desktop] .toggle-knob{position:absolute;top:6px;left:168px;width:44px;height:44px;border-radius:50%;background:var(--art-knob) center/100% 100% no-repeat;transition:left .22s cubic-bezier(.3,1.3,.5,1)}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle[aria-pressed=true] .toggle-knob{left:236px}

/* BALLS and BET: identical steppers (caption 20, gap 4, row 56 = minus 56 + 12 + well 168 + 12 + plus 56). */
#game[data-layout=desktop] .stepper{display:grid;grid-template-columns:56px 168px 56px;grid-template-rows:20px 56px;column-gap:12px;row-gap:4px;height:80px;padding:0;background:none;color:#ead9b5}
#game[data-layout=desktop] .ball-control{top:548px}
#game[data-layout=desktop] .bet-control{top:640px}
#game[data-layout=desktop] .stepper .stepper-caption{grid-column:1/-1;display:block;font-size:16px;line-height:20px;letter-spacing:.12em;text-align:center;color:#d9b673;white-space:nowrap}
#game[data-layout=desktop] .stepper .stepper-caption small,#game[data-layout=desktop] #bet-detail{display:inline;margin:0 0 0 6px;font-size:13px;letter-spacing:.04em;color:#a9b3a6}
#game[data-layout=desktop] .stepper .utility{width:56px;height:56px;color:#d4e4e5}
#game[data-layout=desktop] .stepper .utility:before,#game[data-layout=desktop] .stepper .utility:after{display:block;background-size:100% 100%}
#game[data-layout=desktop] .stepper .utility svg{width:26px;height:26px;stroke-width:2.2}
#game[data-layout=desktop] .stepper .utility:disabled{color:#788483}
#game[data-layout=desktop] .stepper .stepper-well{display:flex;align-items:center;justify-content:center;width:168px;height:56px;background:var(--art-well) center/100% 100% no-repeat}
#game[data-layout=desktop] .stepper .stepper-well>span{display:none}
#game[data-layout=desktop] .stepper .stepper-well strong,#game[data-layout=desktop] .ball-control #balls-value{display:block;width:100%;transform:none;font-size:30px;line-height:56px;font-weight:600;text-align:center;color:#fff1ca;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Footer, y 800-884: balance (left), the four tools under the board, DROP below BET. */
#game[data-layout=desktop] .console{left:0;right:0;top:0;height:900px;display:block;gap:0;pointer-events:none}
#game[data-layout=desktop] .console>*{pointer-events:auto}
#game[data-layout=desktop] .balance-readout{position:absolute;left:224px;top:812px;width:540px;height:60px;display:flex;align-items:baseline;gap:14px;text-align:left}
#game[data-layout=desktop] .balance-readout>span{font-size:16px;letter-spacing:.12em;color:#d9b673}
#game[data-layout=desktop] .balance-readout strong{font-size:32px;line-height:60px;min-width:0;flex:1}
#game[data-layout=desktop] .console-tools{position:absolute;left:792px;top:816px;display:flex;gap:12px}
#game[data-layout=desktop] .console-tools .utility{position:relative;inset:auto;width:52px;height:52px}
#game[data-layout=desktop] .console-tools .utility svg{width:24px;height:24px}
#game[data-layout=desktop] .drop-button{position:absolute;left:1080px;top:800px;width:304px;height:84px;margin:0;flex-direction:row;gap:14px;animation:none}
#game[data-layout=desktop] .drop-button:before,#game[data-layout=desktop] .drop-button:after{background-size:100% 100%}
#game[data-layout=desktop] .drop-button>span{font-size:38px;letter-spacing:.06em}
#game[data-layout=desktop] .drop-button small{font-size:13px;letter-spacing:.08em}

/* During Free Drops the BUY slot (y 188-240) shows the drop count; the bonus win is the WIN readout. */
#game[data-layout=desktop] .free-hud{top:124px;height:52px;display:none;align-items:center;justify-content:center;gap:16px;color:#bde9d3;font-variant-numeric:tabular-nums;background:var(--art-plate,none) center/100% 100% no-repeat}
#game[data-layout=desktop] .free-hud span{font-size:19px;letter-spacing:.1em}
#game[data-layout=desktop] .free-hud strong{font-size:34px;font-weight:600;color:#eefff4}
#game[data-layout=desktop].bonus-mode .free-hud{display:flex}
#game[data-layout=desktop].bonus-mode #buy-button{display:none}

/* The MULTIPLIER well when .collection is hidden: x1 at rest, PER BALL while a paid drop's balls carry their own multipliers. */
#game[data-layout=desktop] .idle-per-ball{display:none;font-size:30px;letter-spacing:.08em}
#game[data-layout=desktop] .readout-frame[data-per-ball=true] .idle-rest{display:none}
#game[data-layout=desktop] .readout-frame[data-per-ball=true] .idle-per-ball{display:inline}
#game[data-layout=desktop] .readout-frame[data-per-ball=true] .collection-idle{opacity:.8}

/* DROP while a drop plays: one centred IN PLAY on the disabled capsule, not a low "..." beside a small hint (both layouts). */
#game[data-state=playing] #drop-label{display:none}
#game[data-state=playing] .drop-button #drop-hint{display:block;font-size:20px;letter-spacing:.16em;color:#9fb3c2}
#game[data-layout=mobile][data-state=playing] .drop-button #drop-hint{font-size:14px}

/* CHARGED explains itself (the user, 2026-10-06): a second line under the name, from BOARD. */
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle>span{line-height:1;padding-top:10px}
#game .charged-toggle .toggle-sub{display:block;font-style:normal;font-size:12px;letter-spacing:.02em;color:#c9b88f;margin-top:5px;white-space:nowrap}
#game[data-layout=desktop] .mode-control #boost-button.charged-toggle:disabled .toggle-sub{color:#7f837e}