/* The only alternate composition. Scaling is handled in main.js, selected by aspect ratio. */
.game-shell[data-layout=mobile]{width:360px;height:640px}
[data-layout=mobile] .board-wrap{left:16.8%;top:24.8%;width:66.4%;height:49.2%}
[data-layout=mobile] .board-status{left:18%;top:20.4%;width:40%;font-size:8px;letter-spacing:.02em}
[data-layout=mobile] .collection{left:61%;top:20.1%;width:21%}
[data-layout=mobile] .collection span{font-size:6px;letter-spacing:.1em}
[data-layout=mobile] .collection strong{font-size:19px;line-height:1.2}
[data-layout=mobile] .landing-display{left:19%;width:62%;top:75.2%;font-size:10px}
[data-layout=mobile] .mode-control{top:78.2%;gap:6px}
[data-layout=mobile] .mode-control .mode-button{width:100px;height:29px;font-size:10px}
[data-layout=mobile] .mode-control p{top:29px;width:280px;font-size:8px}
[data-layout=mobile] .console{left:4%;right:4%;top:86%;height:81px;gap:7px;align-items:flex-start}
[data-layout=mobile] .readout>span{font-size:7px;letter-spacing:.07em}
[data-layout=mobile] .readout strong{font-size:16px;line-height:1.5}
[data-layout=mobile] .balance-readout{position:absolute;left:3px;top:-13px;width:84px}
[data-layout=mobile] .win-readout{position:absolute;right:1px;top:-13px;width:87px}
[data-layout=mobile] .bet-control{position:absolute;left:85px;top:-13px;gap:0}
[data-layout=mobile] .bet-control .readout{width:72px}
[data-layout=mobile] .utility{width:37px;height:37px}
[data-layout=mobile] .utility svg{width:17px;height:17px}
[data-layout=mobile] .bet-control .utility{width:37px;height:37px}
[data-layout=mobile] .drop-button{position:absolute;left:127px;top:28px;margin:0;width:76px;height:76px}
[data-layout=mobile] .drop-button>span{font-size:16px;line-height:1.2}
[data-layout=mobile] .drop-button small{font-size:5px;letter-spacing:.06em}
[data-layout=mobile] .turbo-button{position:absolute;left:79px;top:46px}
[data-layout=mobile] .console-tools{position:absolute;right:17px;top:46px;gap:5px}
[data-layout=mobile] .console-tools #info-button{position:fixed;left:29px;top:596px}
[data-layout=mobile] .settings-button{right:5.6%;top:6%;width:33px;height:33px}
[data-layout=mobile] .win-overlay{left:13%;top:29%;width:74%;height:39%;gap:8px}
[data-layout=mobile] .win-overlay img{width:100%;max-height:43%}
[data-layout=mobile] #win-value{font-size:39px}
[data-layout=mobile] .win-continue{font-size:11px;padding:16px 32px}
[data-layout=mobile] .error-notice{left:9%;top:35%;width:82%;padding:24px;font-size:14px}
[data-layout=mobile] .error-notice .mode-button{width:150px;height:45px;font-size:13px}
[data-layout=mobile] .world-dust i{width:1px;height:1px}
@media(prefers-reduced-motion:reduce){.world-dust i{animation:none}}

/* Painted silhouettes remain compact; the surrounding transparent hit area is part of the button. */
[data-layout=mobile] .mode-control{top:76.8%;gap:8px}
[data-layout=mobile] .mode-control .mode-button{width:105px;height:50px;font-size:11px}
[data-layout=mobile] .mode-control .mode-button:before,[data-layout=mobile] .mode-control .mode-button:after{background-size:100% 32px}
[data-layout=mobile] .mode-control p{top:42px;font-size:10px}
[data-layout=mobile] .board-status{font-size:9px}
[data-layout=mobile] .collection span{font-size:8px}
[data-layout=mobile] .collection strong{font-size:21px}
[data-layout=mobile] .readout>span{font-size:9px}
[data-layout=mobile] .readout strong{font-size:17px}
[data-layout=mobile] .utility{width:50px;height:50px}
[data-layout=mobile] .utility:before,[data-layout=mobile] .utility:after{background-size:37px 37px}
[data-layout=mobile] .utility svg{width:19px;height:19px}
[data-layout=mobile] .bet-control{left:80px;gap:0;top:-18px}
[data-layout=mobile] .bet-control .readout{width:66px}
[data-layout=mobile] .bet-control .utility{width:43px;height:50px}
[data-layout=mobile] .balance-readout,[data-layout=mobile] .win-readout{top:-15px;width:77px}
[data-layout=mobile] .drop-button{left:126px;top:26px}
[data-layout=mobile] .turbo-button{left:69px;top:39px}
[data-layout=mobile] .console-tools{right:23px;top:39px}
[data-layout=mobile] .console-tools #info-button{left:18px;top:590px}
[data-layout=mobile] .settings-button{right:3.5%;top:4.8%;width:50px;height:50px}
[data-layout=mobile] .drop-button{left:130px;top:20px;width:70px;height:70px}
[data-layout=mobile] .bet-control .utility{width:50px}
[data-layout=mobile] .bet-control .readout{width:54px}
[data-layout=mobile] .mode-control{top:76%}
[data-layout=mobile] .bet-control{top:-12px}
[data-layout=mobile] .win-continue{min-height:50px}
.landing-display{left:26%;top:17%;width:15%;font-size:18px;text-align:left}
[data-layout=mobile] .landing-display{left:18%;top:24%;width:27%;font-size:10px;text-align:left}
[data-layout=mobile] .drop-button{top:16px}
.game-shell[data-layout=desktop] .win-overlay{top:19%;height:55%}
.win-overlay.visible img{animation:title-arrival .85s cubic-bezier(.16,1,.3,1) both}
.win-overlay.max.visible img{animation:max-arrival 1.25s cubic-bezier(.16,1,.3,1) both}
@keyframes title-arrival{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes max-arrival{0%{opacity:0;transform:translateY(-25px) scale(1.12)}25%{opacity:1;transform:translateY(4px) scale(.985)}55%{transform:translateY(-2px) scale(1.01)}100%{transform:none}}
[data-layout=mobile] .bet-control .readout{position:relative;top:-10px;width:70px}
.game-shell[data-layout=desktop] .mode-control{top:78.8%}
.game-shell[data-layout=desktop] .mode-button{height:60px}
.game-shell[data-layout=desktop] .mode-button:before,.game-shell[data-layout=desktop] .mode-button:after{background-size:100% 50px}
.game-shell[data-layout=desktop] .mode-control p{top:53px}
.game-shell[data-layout=desktop] .settings-button{width:62px;height:62px}
[data-layout=mobile] .mode-control p{top:39px;font-size:9px;line-height:1.1}

/* Approved painted board, enlarged launcher and narrow right-pillar collector. */
.carriage-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.game-shell[data-layout=desktop] .board-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.game-shell[data-layout=desktop] #mode-note{display:none}
.game-shell[data-layout=desktop] .collection{left:28%;top:50%;width:10%;text-align:left;z-index:2;pointer-events:none}
.game-shell[data-layout=desktop] .collection span{font-size:18px;letter-spacing:.07em}
.game-shell[data-layout=desktop] .collection strong{font-size:46px;line-height:1.2}
.gem-lock{position:absolute;left:1255px;top:139px;width:64px;height:496px;z-index:4;pointer-events:none;text-align:center;color:#f4d8a0}
.gem-lock[hidden],.gem-flight[hidden]{display:none}
.lock-inset{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lock-title{position:absolute;top:43px;left:2px;right:2px;margin:0;font-size:20px;line-height:1.1;font-weight:600;letter-spacing:0;text-shadow:0 1px 2px #090501}
.lock-socket{position:absolute;left:6px;width:52px;height:76px}
.lock-socket[data-slot="0"]{top:111px}.lock-socket[data-slot="1"]{top:211px}.lock-socket[data-slot="2"]{top:311px}
.lock-socket img{position:absolute;inset:0;width:100%;height:100%}
.socket-gem{opacity:0;transition:opacity .18s ease-out}
.lock-socket[data-filled=true] .socket-gem{opacity:1;animation:gem-seat .42s ease-out}
.lock-socket[data-filled=false] .socket-gem{transition:none;animation:none}
.lock-count{position:absolute;top:416px;left:0;width:100%;font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.lock-complete .lock-count{color:#a5ffd3}.lock-complete .lock-inset{animation:lock-ready .65s ease-out}
.lock-reduced .socket-gem,.lock-reduced .lock-inset{animation:none!important;transition:none!important}
.gem-flight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
@keyframes gem-seat{0%{opacity:.2;transform:scale(.92)}45%{opacity:1;transform:scale(1.055)}100%{transform:scale(1)}}
@keyframes lock-ready{0%,100%{filter:none}40%{filter:brightness(1.4)}}

/* Claude, 2026-10-04: dialog buttons fit the 424 px inside a dialog (two 230 px buttons overflowed); the buy dialog holds three (BUY, SUPER). */
.dialog-actions .mode-button{width:calc(50% - 6px)}#buy-dialog .dialog-actions{flex-wrap:wrap}#buy-dialog .dialog-actions .mode-button{width:calc(50% - 6px)}

/* Claude, 2026-10-04: what the total bet is made of, and the win as a multiple of the bet. */
#bet-detail{display:block;font-size:15px;letter-spacing:.06em;color:#a9b3a6;white-space:nowrap;margin-top:-4px}#win-multiple{margin:0;font-size:22px;letter-spacing:.06em;color:#cdbf9f}

/* Claude, 2026-10-04: the BALLS - N + selector (functional; Codex designs it). */
.ball-control{display:flex;align-items:center;gap:6px}.ball-control .readout{width:70px}.ball-control .readout strong{font-size:30px;line-height:1.2}.ball-control .utility{width:50px;height:50px}

/* Approved BALLS selector and control polish. Desktop layout only. */
.balls-caption{display:none}
#game[data-layout=desktop] .ball-control .readout>span{display:none}
#game[data-layout=desktop] .mode-control{top:78.55%;gap:10px}
#game[data-layout=desktop] .ball-control{position:relative;display:grid;grid-template-columns:111px 60px 72px 60px;align-items:center;justify-content:center;gap:0;width:344px;height:61px;background:url('../assets/atelier/mode-normal.webp') center/100% 100% no-repeat;padding:0 10px;color:#ead9b5;isolation:isolate}
#game[data-layout=desktop] .ball-control .balls-caption{display:block;font-size:31px;font-weight:600;letter-spacing:.02em;text-align:center}
#game[data-layout=desktop] .ball-control .readout{display:contents}
#game[data-layout=desktop] .ball-control #balls-value{display:block;text-align:center;width:72px;font-size:48px;line-height:1.05;letter-spacing:0;color:#fff1ca;font-variant-numeric:tabular-nums;transform:translateY(2px)}
#game[data-layout=desktop] .ball-control .utility{width:60px;height:58px;color:#d4e4e5}
#game[data-layout=desktop] .ball-control .utility:before,#game[data-layout=desktop] .ball-control .utility:after{display:none}
#game[data-layout=desktop] .ball-control .utility svg{width:35px;height:35px;stroke-width:2}
#game[data-layout=desktop] .ball-control .utility:disabled{color:#788483;opacity:.46}
#game[data-layout=desktop] .ball-control .utility:hover:not(:disabled){color:#fff1c5;filter:drop-shadow(0 0 4px #e7b66588)}
#game[data-layout=desktop] .ball-control .utility:focus-visible{outline-offset:-9px}
#game[data-layout=desktop] .mode-control #boost-button{width:270px;font-size:29px;letter-spacing:0}
#game[data-layout=desktop] .mode-control #boost-button>span{display:flex;gap:14px;align-items:center;white-space:nowrap}
#game[data-layout=desktop] .mode-control #boost-button small{font-size:28px;color:#cdded6;line-height:1}
#game[data-layout=desktop] .mode-control #boost-button:disabled small{font-size:26px;color:#aeb5aa}
#game[data-layout=desktop] .mode-control #buy-button{width:264px;font-size:28px;letter-spacing:0;white-space:nowrap;color:#f1ddae}
#game[data-layout=desktop] .mode-control .mode-button{height:61px}
#game[data-layout=desktop] .mode-control .mode-button:before,#game[data-layout=desktop] .mode-control .mode-button:after{background-size:100% 61px}
#game[data-layout=desktop] .console{top:84.7%}
#game[data-layout=desktop] .drop-button small{font-size:15px;letter-spacing:.06em}
#game[data-layout=desktop] .drop-button{margin-top:34px}
.number-seat{animation:number-seat .24s ease-out}
@keyframes number-seat{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(2px)}}
.reduce-motion .number-seat{animation:none}