:root{color-scheme:dark;font-family:'Trebuchet MS',Verdana,sans-serif;color:#fff0d5;background:#15152a}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,input{font:inherit}button{color:#fff0d5;cursor:pointer;border:1px solid #fff0d549;background:#211d39d9;border-radius:16px;min-height:44px;padding:8px 16px}button:focus-visible,input:focus-visible{outline:3px solid #43d6d2;outline-offset:3px}button:active{transform:scale(.97)}#game{height:100dvh;width:100%;position:relative;margin:auto;overflow:hidden;isolation:isolate;background:#211d39}.scenery{position:absolute;inset:0;background:url('../assets/salon-ramp-v3.png') center/100% 100% no-repeat;z-index:-1}.scenery:after{content:'';position:absolute;inset:0;background:linear-gradient(#211d3920,transparent 70%,#211d3955)}#scene{display:block;width:100%;height:100%;touch-action:none;outline:none}header{position:absolute;top:max(8px,var(--safe-top,env(safe-area-inset-top)));left:12px;right:12px;display:flex;align-items:center;gap:12px;pointer-events:none;text-shadow:0 2px 6px #211d39}header button{pointer-events:auto;width:44px;padding:0;font-weight:bold;font-size:25px;border-radius:50%;background:#211d39c9}.wordmark{font-size:clamp(15px,4.2vw,24px);font-weight:1000;font-style:italic;letter-spacing:-.8px}.wordmark span{display:block;font-weight:400;font-style:normal;letter-spacing:.8px;font-size:9px;color:#f5c45d}.collection{margin-left:auto;text-align:right}.collection strong{font-family:Verdana,sans-serif;font-size:22px;display:block;line-height:1}.collection span{font-size:9px;color:#fff0d5b8}.crew{position:absolute;pointer-events:none;object-fit:contain}.nova{width:17%;height:18%;left:0;bottom:16%}.tumble{width:18%;height:13%;left:12%;bottom:13.5%}.vela{width:13%;height:17%;right:0;bottom:17%}.bip{width:13%;height:12%;right:10%;bottom:13.5%}#tumble-meter{position:absolute;bottom:12.1%;left:6%;width:23%;font-size:9px;text-align:center;text-shadow:0 1px 3px #211d39}#tumble-meter>div{height:5px;background:#211d39bd;border-radius:5px;margin-top:4px;overflow:hidden}#charge{display:block;height:100%;width:0;background:#f5c45d;border-radius:5px;transition:width .3s}#swap{position:absolute;left:57%;bottom:16%;width:53px;height:48px;padding:3px;background:#211d39b0}#swap span{font-size:23px;display:block;line-height:20px}#swap small{font-size:9px}#hint{position:absolute;left:10%;right:10%;top:59%;font-size:12px;text-align:center;color:#fff0d5;background:#211d39c0;padding:10px;border-radius:12px;pointer-events:none;transition:opacity .3s}#hint.gone{opacity:0}#cancel{position:absolute;bottom:13%;left:35%;width:30%;font-size:11px;min-height:38px;background:#743b58eb;z-index:5}#cancel[hidden]{display:none}#toast{position:absolute;top:55%;left:10%;right:10%;text-align:center;font-weight:bold;font-size:16px;color:#fff0d5;pointer-events:none;text-shadow:0 2px 8px #211d39;opacity:0;transition:opacity .2s}#toast.show{opacity:1}#basket-counts{position:absolute;left:4%;right:4%;bottom:max(3px,var(--safe-bottom,env(safe-area-inset-bottom)));display:flex;justify-content:space-around;pointer-events:none}#basket-counts span{color:#fff0d5;text-shadow:0 1px 4px #211d39;font-size:12px;font-weight:bold;min-width:35px;text-align:center;background:#211d3980;border-radius:8px;padding:3px}dialog{width:min(90%,380px);max-height:90dvh;overflow:auto;border:1px solid #f5c45d8a;border-radius:25px;padding:24px;color:#fff0d5;background:#28233feF;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#15132bbb;backdrop-filter:blur(5px)}dialog h1{font-size:25px;margin:6px 0}dialog h2{font-size:20px}dialog p{font-size:13px;line-height:1.5;color:#d1c7df}dialog label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:13px}dialog input[type=checkbox]{accent-color:#43d6d2;width:21px;height:21px}dialog button{width:100%;margin-top:8px}.primary{background:#43d6d2;color:#211d39;font-weight:bold;border:0}dialog .quiet{font-size:11px;text-align:center}.tiny-star{color:#f5c45d;font-size:28px}.import{justify-content:center;border:1px solid #fff0d549;border-radius:16px;margin-top:8px;cursor:pointer}.import input{display:none}@media(min-aspect-ratio:3/4){#game{width:min(100vw,60dvh)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Crew are camera-facing illustrations anchored in the 3D scene. */
.crew{display:none}.scenery{background-size:cover;background-position:center top}#tumble-meter{bottom:17%;left:2%;width:27%}#swap{bottom:18%;left:60%}#hint{top:54%}#basket-counts{bottom:max(15px,var(--safe-bottom,env(safe-area-inset-bottom)))}


#basket-counts{inset:0}#tumble-meter{width:23%;font-size:8px}#swap{min-height:36px;height:36px;width:46px;padding:1px}#swap span{font-size:19px}#swap small{font-size:8px}


header{gap:5px}#quick-fullscreen{flex:0 0 44px;width:44px;height:44px;min-height:44px;font-size:22px;border:0;background:radial-gradient(circle,#211d39c9 0 44%,transparent 46%)}
.scenery{background-size:auto 114%}
#game[data-art-loading]:after{content:attr(data-art-loading);position:absolute;inset:65px 0 0;z-index:4;display:grid;place-items:center;background:#103c43;color:#fff0d5;font-size:14px;pointer-events:none}
.scenery{display:none}.hybrid-back,.hybrid-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hybrid-back{z-index:0}#scene{position:relative;z-index:1}.hybrid-front{z-index:2}header,#tumble-meter,#swap,#hint,#cancel,#toast,#basket-counts{z-index:3}#hint{width:76%;right:auto;font-size:10px;pointer-events:none}#basket-counts span{transform:translate(-50%,-50%)}#tumble-meter{width:20%;font-size:8px}dialog{z-index:10}
.scenery:after{background:linear-gradient(transparent 88%,#12343d 99%)}
#swap{min-width:44px;min-height:44px;height:44px}

#hint{top:51%;font-size:11px;padding:7px}header{text-shadow:0 2px 4px #211d39,0 0 10px #211d39}.wordmark,.collection{background:#211d398c;border-radius:12px;padding:6px 8px;backdrop-filter:blur(5px)}

/* Live controls anchored to illustrated machine surfaces. */
header{position:absolute;inset:0;display:block;pointer-events:none;padding:0;height:0}header>*{position:absolute;pointer-events:auto}#score-panel{background:none;backdrop-filter:none;padding:0;width:29%;text-align:center;text-shadow:0 1px 3px #001e2a,0 0 8px #75ffe7;color:#e7fff7}#score-panel strong{font-size:clamp(22px,7vw,38px);line-height:1;display:block}#score-panel span{font-size:8px;letter-spacing:.1em}#brand{width:23%;font-style:italic;font-size:clamp(10px,3vw,17px);padding:3px;background:#172c3ce0;box-shadow:0 2px 0 #e5bb6f;white-space:nowrap;transform:translate(-50%,-50%) rotate(-5deg)!important}#brand span{font-size:6px;letter-spacing:.03em}#pause{border-radius:50%;width:44px;height:44px;padding:0;font-size:25px;background:#213548ed;border:2px solid #dfbd80}#quick-fullscreen{background:radial-gradient(circle,#314751 0 43%,transparent 46%)}#cancel{width:auto;min-width:92px;height:44px;min-height:44px;font-size:10px;background:linear-gradient(transparent 15%,#174753de 16% 84%,transparent 85%);border:0;padding:0 10px;text-shadow:0 1px 2px #002c38}#swap{background:#15505be6;border:1px solid #93e6d3;box-shadow:0 2px 0 #dab06e}#tumble-meter{color:#fff3ce;text-shadow:0 1px 3px #263444}#basket-counts span{background:#14373fce;border:1px solid #e6cda0;border-radius:12px;font-size:10px}#hint{background:none;color:#c1ded8;text-shadow:0 2px 4px #09323d}

/* v12: original vector lettering and controls built into the illustrated surfaces. */
#brand{width:27%;padding:0;background:none;box-shadow:none;transform:translate(-50%,-50%)!important;line-height:0}#brand svg{width:100%;overflow:visible}#score-panel{width:28%;height:clamp(21px,5.8vw,32px);padding:0}#score-panel strong{height:100%;line-height:0}#score-panel strong svg{width:100%;height:100%;overflow:visible}#score-panel>span{display:none}
#pause,#quick-fullscreen{color:#fff0c9;background:radial-gradient(circle at 35% 25%,#45626b,#153746 72%);border:2px solid #e9c995;box-shadow:0 2px 0 #a26837,inset 0 0 0 2px #163c45;padding:7px}#quick-fullscreen{padding:9px;border-color:#62ddcf}#pause svg,#quick-fullscreen svg{display:block;width:100%;height:100%}
#swap{border:2px solid #d3ab70;border-radius:50% 50% 35% 35%;background:linear-gradient(135deg,#fff1cd,#e7ce9e 35%,#f48248 36%,#c35428 72%,#813c25);color:#fff2d0;box-shadow:0 3px 0 #563622,inset 0 0 0 2px #fdb56c;width:44px;height:46px;padding:2px 5px}#swap svg{width:29px;height:27px;filter:drop-shadow(0 2px #523b29)}#swap small{display:block;font-size:6px;font-weight:900;letter-spacing:.4px;text-shadow:0 1px #533b2d}
#cancel{background:none;border:0;color:#c9fff0;text-shadow:0 1px 3px #133e42;min-width:76px;height:44px;display:flex;align-items:center;gap:2px;padding:0;justify-content:center}#cancel[hidden]{display:none}#cancel svg{height:27px;width:27px}#cancel small{font-size:7px;letter-spacing:.5px;font-weight:bold}#tumble-meter{font-weight:800;letter-spacing:.15px;font-size:8px}#tumble-meter>div{background:#05272d;border:1px solid #e2b574;height:7px;box-shadow:0 1px 0 #8b552e}#charge{background:linear-gradient(#fff4b9,#ffbd51)}
#basket-counts span{padding:0;background:none;border:0;border-radius:0;min-width:0;width:7.5%;height:12px}#basket-counts span svg{width:100%;height:100%;display:block;overflow:visible}#hint{font-size:10px;max-width:55%;opacity:.8}#hint.gone{opacity:0}

/* v14: in-world wordmark, discreet hand swap, no extra button plate. */
#brand{z-index:0!important;opacity:.54;pointer-events:none;filter:drop-shadow(0 1px 0 #fff1cd44)}#brand svg text{display:none}#swap{background:none;border:0;box-shadow:none;width:48px;height:48px;padding:9px;color:#fff3d8}#swap small{display:none}#swap:disabled{opacity:.35}#swap svg{filter:drop-shadow(0 2px 2px #09323d);width:27px;height:27px}

/* V15: original artboard mark, sampled directly; moving parts stay separate. */
#brand{width:47%;opacity:1;filter:none}#brand canvas{width:100%;height:auto;display:block}#brand svg{display:none}
#tumble-meter{font-size:7px;width:18%}#tumble-meter>div{height:5px}
#cancel{min-height:44px}#basket-counts span{width:8%;height:13px}

/* V16: approved salon framing and legible in-world counters. */
#game{width:min(100vw,49.4dvh);height:100dvh;background:#123942}
#brand{display:none!important}
#score-panel strong,#basket-counts>span{font-size:0}
#score-panel{width:29%;height:clamp(18px,5.6vw,24px)}
#score-panel strong{height:100%;line-height:0}
#score-panel svg{display:block;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 0 4px #43d6d26b)}
#basket-counts span{width:8.5%;height:auto;aspect-ratio:2.6842;overflow:hidden}
#basket-counts svg{display:block;width:100%;height:100%;overflow:hidden;filter:drop-shadow(0 1px 1px #183943)}
#swap{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;background:none;border:0;border-radius:0;box-shadow:none;color:#caffed}
#swap svg{display:block;width:25px;height:25px;filter:drop-shadow(0 0 3px #43d6d27a)}
#swap small{display:none}
#pause,#quick-fullscreen{width:38px;height:38px;min-width:38px;min-height:38px;padding:7px}
#quick-fullscreen{padding:8px}
@media(max-aspect-ratio:1/2){#game{width:100vw}}
/* V17: portrait always uses the available width; only the quiet field stretches. */
@media(max-aspect-ratio:3/4){#game{width:100vw}}
#score-panel{padding:0;box-sizing:border-box}
#score-panel strong{position:absolute;inset:0;bottom:auto;height:var(--digit-height,100%)}
/* Preserve a readable ramp angle even in short browser windows. */
#game[data-pattern-lab]{max-width:47.5dvh}
#game[data-pattern-lab] .legacy-link{display:none}
/* TEMP Android fullscreen preview: remove this rule after the Chrome device check. */
#game[data-master-pilot] #quick-fullscreen{display:block;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;color:#123d49;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;filter:drop-shadow(0 1px 0 #fff9e8);touch-action:manipulation}
#game[data-master-pilot] #pause{background:none;border:0;box-shadow:none;color:#effff8;padding:9px;filter:drop-shadow(0 2px 2px #002b3d)}
#game[data-master-pilot] .journey-shots{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:0;padding:0;border:0;border-radius:0;color:#123d49;background:none;box-shadow:none;text-shadow:0 1px #fff9e8;transform:translate(-50%,-50%)}
#game[data-master-pilot] .journey-shots[hidden]{display:none}
#game[data-master-pilot] .journey-shots strong{display:inline;font-size:14px;line-height:1}
#game[data-master-pilot] .journey-shots span{font-size:10px}

/* V6: both text rows stay in the source machine's central inset. */
#game[data-master-pilot] .journey-shots{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:4px;row-gap:1px;line-height:1}
#game[data-master-pilot] .journey-shots strong{font-size:13px}
#game[data-master-pilot] .journey-shots span{font-size:9px}
#game[data-master-pilot] .journey-shots .journey-phase{grid-column:1/-1;text-align:center;font-size:8px;line-height:1}

/* V7: the shot counter inherits the former phase label position and size. */
#game[data-master-pilot] .journey-shots{display:flex;align-items:center;gap:3px;line-height:1}
#game[data-master-pilot] .journey-shots strong,#game[data-master-pilot] .journey-shots span{font-size:8px;line-height:1;font-weight:400}
#game[data-master-pilot] .journey-shots .journey-phase{display:none}

/* A single document-level cover masks rule and art changes until the first
   useful frame. The housing stays still; only its circular drum turns. */
.transition-cover{position:absolute;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:#10283e;color:#fff1cf;pointer-events:auto}
.transition-cover[hidden]{display:none}
.transition-cover__machine{position:relative;width:min(88vw,54dvh,430px);aspect-ratio:1}
.transition-cover__machine>img{display:block;width:100%;height:100%}
.transition-cover__drum{position:absolute;left:30.46%;top:29.82%;width:39.08%;aspect-ratio:1;overflow:hidden;border-radius:50%;animation:rocketpuff-drum 2.8s linear infinite}
.transition-cover__drum img{position:absolute;left:-77.94%;top:-76.31%;width:255.89%;max-width:none;height:auto}
.transition-cover p{position:absolute;z-index:1;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));bottom:max(32px,calc(env(safe-area-inset-bottom) + 20px));margin:0;font-size:14px;font-weight:800;letter-spacing:.02em;text-align:center;text-shadow:0 2px 8px #00111d}
@keyframes rocketpuff-drum{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.transition-cover__drum{animation:none}}