/* Cabinet redesign, phone (360x640 composition; Claude's layout, Codex's art). Board window x 14-346, y 64-346;
   one control recess x 8-352, y 356-632. Rows; touch targets are 50 here so they stay >= 44 real px down to a 320x568 phone (stage scale 0.89):
   1 MULTIPLIER|WIN frame  2 BALLS|BET (identical)  3 CHARGED|BUY (the FREE DROP plate in the bonus)
   4 gem bank|tools  5 balance|DROP. Column origin (16,360), width 328. Art comes in through the same --art-* variables. */
#game[data-layout=mobile]{--col-x:16px;--col-y:360px;--col-w:328px}
#game[data-layout=mobile] .board-wrap{left:14px;top:64px;width:332px;height:282px}
#game[data-layout=mobile] .win-overlay{left:14px;top:64px;width:332px;height:282px}
#game[data-layout=mobile] .landing-display{left:22px;top:70px;width:140px;font-size:11px}
#game[data-layout=mobile] .board-status,#game[data-layout=mobile] #mode-note,#game[data-layout=mobile] .world-dust{display:none}
#game[data-layout=mobile] .instrument-column{position:absolute;left:var(--col-x);top:var(--col-y);width:var(--col-w);height:268px;z-index:3}
#game[data-layout=mobile] .instrument-column>*,#game[data-layout=mobile] .mode-control>*{position:absolute;margin:0}
#game[data-layout=mobile] .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=mobile] .instrument-column{pointer-events:none}
#game[data-layout=mobile] .instrument-column>*,#game[data-layout=mobile] .mode-control>*{pointer-events:auto}

/* 1. The frame, wells side by side: MULTIPLIER x 8-160, WIN x 168-320. */
#game[data-layout=mobile] .readout-frame{top:0;left:0;width:328px;height:48px;background:var(--art-frame-wide,none) center/100% 100% no-repeat}
#game[data-layout=mobile] .readout-frame:before{content:"";position:absolute;inset:0;background:var(--art-frame-wide-lit) center/100% 100% no-repeat;opacity:0;pointer-events:none}
#game[data-layout=mobile] .readout-frame:has(.win-readout.is-hit):before{animation:frame-lit .7s ease-out}
#game[data-layout=mobile]:has(.win-overlay.visible) .readout-frame:before{opacity:1;transition:opacity .3s}
#game[data-layout=mobile] .frame-well{position:absolute;top:2px;height:44px;width:152px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
#game[data-layout=mobile] .frame-multiplier{left:8px}
#game[data-layout=mobile] .win-readout{left:168px;width:152px}
#game[data-layout=mobile] .frame-label{display:block;font-size:10px;line-height:1.1;letter-spacing:.12em;color:#d9b673}
#game[data-layout=mobile] .collection{position:static;width:100%;text-align:center}
#game[data-layout=mobile] .collection strong,#game[data-layout=mobile] .collection-idle,#game[data-layout=mobile] .win-readout strong{display:block;width:100%;font-size:22px;font-weight:600;line-height:1.25;white-space:nowrap;text-align:center}
#game[data-layout=mobile] .collection strong,#game[data-layout=mobile] .collection-idle{color:#fff3d6}
#game[data-layout=mobile] .win-readout strong{color:#f7db9e}
#game[data-layout=mobile] .collection-idle{display:none;opacity:.55}
#game[data-layout=mobile] .collection[hidden]+.collection-idle{display:block}
#game[data-layout=mobile] .idle-per-ball{display:none;font-size:15px;letter-spacing:.06em}
#game[data-layout=mobile] .readout-frame[data-per-ball=true] .idle-rest{display:none}
#game[data-layout=mobile] .readout-frame[data-per-ball=true] .idle-per-ball{display:inline}

/* 2. BALLS and BET: identical, 50 + 2 + 56 + 2 + 50 = 160; the caption sits inside the well. y 414-464. */
#game[data-layout=mobile] .stepper{top:54px;width:160px;height:50px;display:grid;grid-template-columns:50px 56px 50px;column-gap:2px;padding:0;background:none;color:#ead9b5}
#game[data-layout=mobile] .ball-control{left:0}
#game[data-layout=mobile] .bet-control{left:168px}
#game[data-layout=mobile] .stepper .stepper-caption{display:none}
#game[data-layout=mobile] .stepper .utility{position:relative;inset:auto;width:50px;height:50px;color:#d4e4e5}
#game[data-layout=mobile] .stepper .utility:before,#game[data-layout=mobile] .stepper .utility:after{display:block;background-size:100% 100%}
#game[data-layout=mobile] .stepper .utility svg{width:18px;height:18px}
#game[data-layout=mobile] .stepper .stepper-well{position:relative;top:0;width:56px;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--art-well,none) center/100% 100% no-repeat}
#game[data-layout=mobile] .stepper .stepper-well>span{display:block;font-size:9px;line-height:1.1;letter-spacing:.08em;color:#d9b673;white-space:nowrap}
#game[data-layout=mobile] .stepper .stepper-well strong,#game[data-layout=mobile] .ball-control #balls-value{display:block;width:100%;font-size:17px;line-height:1.3;font-weight:600;text-align:center;color:#fff1ca;white-space:nowrap;transform:none;font-variant-numeric:tabular-nums}

/* 3. CHARGED (knob slot x 96-152) and BUY / the FREE DROP plate. y 470-520. */
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle{top:110px;left:0;width:160px;height:50px;font-size:13px;letter-spacing:.04em;justify-content:flex-start}
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle:before,#game[data-layout=mobile] .mode-control #boost-button.charged-toggle:after{background-size:100% 100%}
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle>span{position:absolute;inset:0;display:block;line-height:50px;padding-left:10px;text-align:left;white-space:nowrap}
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle small{position:absolute;top:0;left:126px;width:28px;font-size:10px;line-height:50px;text-align:center;display:block;color:#cdded6}
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle[aria-pressed=true] small{left:96px;color:#ffe2a3}
#game[data-layout=mobile] .toggle-knob{position:absolute;top:11px;left:98px;width:28px;height:28px;border-radius:50%;background:var(--art-knob,none) center/100% 100% no-repeat;transition:left .22s cubic-bezier(.3,1.3,.5,1)}
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle[aria-pressed=true] .toggle-knob{left:124px}
#game[data-layout=mobile] #buy-button,#game[data-layout=mobile] .free-hud{top:110px;left:168px;width:160px;height:50px;font-size:13px;letter-spacing:.03em;white-space:nowrap}
#game[data-layout=mobile] #buy-button:before,#game[data-layout=mobile] #buy-button:after{background-size:100% 100%}
#game[data-layout=mobile] .free-hud{display:none;align-items:center;justify-content:center;gap:8px;color:#bde9d3;background:var(--art-plate,none) center/100% 100% no-repeat}
#game[data-layout=mobile] .free-hud span{font-size:11px;letter-spacing:.08em}
#game[data-layout=mobile] .free-hud strong{font-size:18px;color:#eefff4;font-variant-numeric:tabular-nums}
#game[data-layout=mobile].bonus-mode .free-hud{display:flex}
#game[data-layout=mobile].bonus-mode #buy-button{display:none}

/* 4. Gem bank (x 16-126) and the four tools (x 132-344: 4 x 50 + 3 x 4), y 526-576. */
#game[data-layout=mobile] .gem-lock{left:16px;top:526px;width:110px;height:50px;text-align:left}
#game[data-layout=mobile] .lock-inset,#game[data-layout=mobile] .lock-title{display:none}
#game[data-layout=mobile] .lock-socket{top:10px;left:0;width:20px;height:30px}
#game[data-layout=mobile] .lock-socket[data-slot="1"]{top:10px;left:22px}
#game[data-layout=mobile] .lock-socket[data-slot="2"]{top:10px;left:44px}
#game[data-layout=mobile] .lock-count{top:0;left:auto;right:0;width:44px;font-size:18px;line-height:50px;text-align:right}
#game[data-layout=mobile] .bank-reward{top:-16px;left:auto;right:2px;width:auto;font-size:13px;text-align:right}
#game[data-layout=mobile] .bank-reward small{display:inline;font-size:9px;margin-left:3px}
#game[data-layout=mobile] .console{left:0;right:0;top:0;height:640px;display:block;gap:0;pointer-events:none}
#game[data-layout=mobile] .console>*{pointer-events:auto}
#game[data-layout=mobile] .console-tools{position:absolute;left:132px;top:526px;right:auto;display:flex;gap:4px}
#game[data-layout=mobile] .console-tools .utility,#game[data-layout=mobile] .console-tools #info-button{position:relative;inset:auto;left:auto;top:auto;right:auto;width:50px;height:50px}
#game[data-layout=mobile] .console-tools .utility:before,#game[data-layout=mobile] .console-tools .utility:after{background-size:100% 100%}
#game[data-layout=mobile] .console-tools .utility svg{width:18px;height:18px}

/* 5. Balance (x 16-176) and DROP (x 184-344), y 582-632. */
#game[data-layout=mobile] .balance-readout{position:absolute;left:16px;top:582px;width:160px;height:50px;display:flex;flex-direction:column;justify-content:center;text-align:left}
#game[data-layout=mobile] .balance-readout>span{font-size:10px;letter-spacing:.12em;color:#d9b673;line-height:1.2}
#game[data-layout=mobile] .balance-readout strong{font-size:20px;line-height:1.3}
#game[data-layout=mobile] .drop-button{position:absolute;left:184px;top:582px;width:160px;height:50px;margin:0;flex-direction:row;gap:8px;animation:none}
#game[data-layout=mobile] .drop-button:before,#game[data-layout=mobile] .drop-button:after{background-size:100% 100%}
#game[data-layout=mobile] .drop-button>span{font-size:22px;letter-spacing:.06em;line-height:1}
#game[data-layout=mobile] .drop-button small{display:none}

/* CHARGED's second line on the phone: the cost only (the room is the label zone, x 10-94). */
#game[data-layout=mobile] .mode-control #boost-button.charged-toggle>span{line-height:1;padding-top:12px}
#game[data-layout=mobile] .charged-toggle .toggle-sub{font-size:9px;margin-top:4px}
#game[data-layout=mobile] .charged-toggle .sub-more{display:none}