/* Dungeons & Deadlines — an original Web Wonderland Christmas. */ :root{color-scheme:dark;--ink:#102a24;--deep:#061e1b;--forest:#12392d;--cream:#f8efd9;--muted:#bac8b6;--gold:#dcb269;--gold-light:#f2d49a;--line:rgba(225,193,130,.27);--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)} *{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--deep);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button,a{touch-action:manipulation}button{color:inherit}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold-light);outline-offset:5px}button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}p,h1,h2,h3{margin:0}button{border:0}button::-moz-focus-inner{border:0}::selection{background:#cc9c53;color:#102425}#game-canvas{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}.scene-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 42%,rgba(2,13,17,.35) 100%);z-index:1}#ui-root{position:fixed;inset:0;pointer-events:none;z-index:2}.screen{position:absolute;inset:0;pointer-events:auto}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:2.1px;font-weight:700;color:var(--gold)} .noscript-message{position:fixed;inset:0;z-index:50;background:var(--ink);display:grid;place-content:center;padding:40px;text-align:center;gap:25px}.noscript-message h1{font:42px var(--serif)}.noscript-message p{line-height:1.6;max-width:500px} .sound-toggle [data-sound-icon]{display:flex;align-items:center;justify-content:center}h1{font-family:var(--serif);font-size:clamp(48px,5.6vw,88px);line-height:.99;letter-spacing:-3.4px;font-weight:400;margin-top:21px;text-shadow:0 4px 30px rgba(0,0,0,.16)}h1 i{color:var(--gold);font-weight:400;font-size:.9em;margin-right:3px}.button{min-height:48px;padding:14px 20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:12px;line-height:1.4;font-weight:650;letter-spacing:.1px;transition:transform .18s,background .18s,box-shadow .18s;border:1px solid transparent}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(0)}.button-primary{color:#152a27;background:linear-gradient(135deg,#f3d59a,#dfb66d);box-shadow:0 4px 19px #0002,inset 0 1px 0 #fff5;border-color:#f4dfae44}.button-primary:hover{background:linear-gradient(135deg,#f8dfaf,#edc47a);box-shadow:0 7px 25px #0003}.button-secondary{background:rgba(15,37,38,.55);color:#ede9dc;border-color:rgba(230,215,179,.3)}.button-secondary:hover{background:rgba(32,60,55,.85)}.arrow{font-size:22px;line-height:14px;font-weight:400}.footer-right{color:#bdc5b4} .hud{position:absolute;inset:0;pointer-events:none}.hud-top{display:flex;align-items:flex-start;gap:12px;position:absolute;top:calc(20px + var(--safe-top));left:calc(22px + var(--safe-left));right:calc(22px + var(--safe-right))}.glass-panel{background:linear-gradient(135deg,#102c2de8,#0a2026e5);border:1px solid #e6c88c2b;border-radius:8px;box-shadow:0 6px 25px #0002;backdrop-filter:blur(10px)}.hud-mission{padding:14px 17px;min-width:252px;max-width:340px}.mission-heading{display:flex;gap:7px;align-items:center;color:var(--gold);font-size:8px;letter-spacing:1.9px;font-weight:650}.mission-star{font-size:12px}.hud-mission h2{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.2;letter-spacing:-.4px;margin:4px 0 9px}.health-hearts{display:flex;gap:5px;align-items:center;min-height:13px}.health-hearts svg{width:13px;height:13px;fill:#e4b97b;stroke:#e4b97b;stroke-width:1.2;filter:drop-shadow(0 1px 2px #0003)}.health-hearts svg.is-empty{fill:#45615966;stroke:#8ca19760;filter:none}.health-hearts.is-low svg:not(.is-empty){fill:#e48176;stroke:#e48176;animation:heart-beat 1.2s ease-in-out infinite}.health-count{font-size:10px;color:var(--gold)}.hud-stats{margin-left:auto;display:flex;align-items:center;gap:24px;padding:13px 20px;min-height:78px}.hud-stat{display:flex;flex-direction:column;gap:5px;min-width:62px}.stat-label{color:#b3c0b1;font-size:8px;font-weight:600;letter-spacing:1.4px;line-height:1.3;display:flex;align-items:center;gap:5px}.stat-label svg{width:13px;height:13px;color:var(--gold)}.hud-stat strong{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}.score-stat strong{color:var(--gold-light);font-size:30px}.stat-divider{width:1px;height:34px;background:#e5c38425}.timer-stat{min-width:59px}.timer-stat strong{font-family:var(--sans);font-size:19px;letter-spacing:1px}.hud-tools{display:flex;gap:8px}.icon-button{display:grid;place-items:center;width:41px;height:41px;padding:0;color:var(--gold-light);pointer-events:auto;transition:background .2s}.icon-button:hover{background:#25443c}.icon-button svg{width:19px;height:19px}.mission-strip{position:absolute;top:calc(132px + var(--safe-top));left:calc(24px + var(--safe-left));display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.45;text-shadow:0 1px 8px #05151c,0 1px 2px #05151c;max-width:min(670px,calc(100% - 48px));color:#f0f0db}.mission-strip-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--gold)}#hud-remaining{color:var(--gold-light);font-size:10px;white-space:nowrap;border-left:1px solid #d2c38f60;padding-left:8px;margin-left:2px}#hud-remaining:empty{display:none}.boss-bar{position:absolute;top:calc(138px + var(--safe-top));left:50%;transform:translateX(-50%);width:min(360px,44%);padding:10px 15px 8px;border:1px solid #eabf7f35;background:#0d2529df;border-radius:6px;backdrop-filter:blur(8px)}.boss-label{display:flex;justify-content:space-between;gap:10px;font-size:8px;color:#f2cf9c;letter-spacing:1.7px;font-weight:700}.boss-track{height:5px;margin-top:8px;background:#06181f;border-radius:4px;overflow:hidden}.boss-track>span{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#ae5b57,#ecb275);transition:transform .12s linear;border-radius:4px}.boss-aside{display:block;font-family:var(--serif);font-style:italic;color:#c3c4b4;font-size:10px;line-height:1.4;text-align:center;margin-top:6px}.combo-badge{position:absolute;right:calc(28px + var(--safe-right));top:calc(135px + var(--safe-top));display:flex;align-items:center;gap:8px;border-left:2px solid var(--gold);padding:6px 11px;background:linear-gradient(90deg,#102b2be0,transparent)}.combo-badge strong{font:35px/.9 var(--serif);color:var(--gold-light)}.combo-badge span{font-size:7px;line-height:1.5;letter-spacing:1.6px;color:#e3dfc9}.desktop-hints{position:absolute;bottom:calc(22px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:17px;width:max-content;max-width:95%;background:#082028bb;padding:10px 18px;border-radius:6px;border:1px solid #e3c89516;backdrop-filter:blur(6px)}.desktop-hints>span{display:flex;align-items:center;gap:6px;color:#d6ddcb;font-size:9px;white-space:nowrap}kbd{font-family:var(--sans);font-size:8px;line-height:1.1;font-weight:600;color:var(--gold-light);letter-spacing:.3px;padding:4px 5px;border:1px solid #d3c69c4d;border-radius:3px;box-shadow:0 2px 0 #0b191c;background:#17333880}.game-toast{position:absolute;left:50%;bottom:calc(84px + var(--safe-bottom));transform:translate(-50%,8px);padding:12px 19px;max-width:min(560px,calc(100% - 40px));width:max-content;background:#f0e5ca;color:#18342f;border:1px solid #fff5;border-radius:6px;box-shadow:0 8px 30px #00151b33;font-size:12px;line-height:1.5;text-align:center;font-weight:500;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:8}.game-toast.is-visible{opacity:1;transform:translate(-50%,0)}.game-toast[data-kind="warning"],.game-toast[data-kind="danger"]{background:#ecd1bb;color:#552a28}.game-toast[data-kind="success"]{background:#d7e7c9;color:#204131} .touch-controls{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}.joystick{position:absolute;left:calc(28px + var(--safe-left));bottom:calc(39px + var(--safe-bottom));width:114px;height:114px;border-radius:50%;border:1px solid #e7d5ad48;background:radial-gradient(circle,#0f303266,#0c252d99);box-shadow:inset 0 0 25px #0002,0 6px 25px #0014;backdrop-filter:blur(5px);pointer-events:auto;touch-action:none;cursor:grab}.joystick.is-active{border-color:#edce8a8c;background:#173a3880;cursor:grabbing}.joystick-direction{position:absolute;inset:17px;border:1px dashed #d9d0aa35;border-radius:50%}.joystick-knob{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#e6d9b9df,#adbdaddf);border:1px solid #fff7;box-shadow:0 3px 10px #0004;position:absolute;left:35px;top:35px;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none}.joystick-caption{position:absolute;bottom:-21px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:2.1px;color:#e3dfc9;text-shadow:0 2px 5px #00151b}.touch-actions{position:absolute;right:calc(24px + var(--safe-right));bottom:calc(29px + var(--safe-bottom));width:154px;height:176px}.touch-button{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px 18px #001a;transition:opacity .15s,transform .12s;border:1px solid #efd8a162}.touch-button:active,.touch-button.is-pressed{transform:scale(.92)}.touch-button>span{font-size:8px;font-weight:700;letter-spacing:.8px}.touch-button svg{width:23px;height:23px}.touch-fire{right:0;bottom:0;width:80px;height:80px;background:linear-gradient(150deg,#f3d79c,#d6ae69);color:#213b32;border:1px solid #ffe8b4;box-shadow:0 5px 20px #0005,0 0 0 5px #e1bb6c13}.touch-fire svg{width:30px;height:30px;stroke-width:1.5}.touch-fire>span{font-size:9px;letter-spacing:1.3px}.touch-wrap{right:5px;bottom:96px;width:60px;height:60px;background:#254b40ed;color:#f4e7c9}.touch-dash{left:0;bottom:9px;width:60px;height:60px;background:#173b43ee;color:#eee3c8}.touch-button.is-cooling{opacity:.46}.is-touch .game-toast{bottom:calc(218px + var(--safe-bottom));max-width:calc(100% - 32px);font-size:11px}.is-touch .mission-strip{max-width:calc(100% - 44px)} .modal-screen{background:rgba(3,17,22,.73);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));overflow-y:auto;overscroll-behavior:contain}.modal-card{position:relative;max-height:100%;overflow:auto;width:100%;border:1px solid #d5b67b4a;border-radius:12px;padding:35px;background:radial-gradient(ellipse at 0 0,#23483c55,transparent 60%),#102a2c;box-shadow:0 25px 100px #0005;scrollbar-width:thin;scrollbar-color:#536b56 transparent}.modal-card h2{font-family:var(--serif);font-weight:400;font-size:43px;line-height:1.07;letter-spacing:-1.3px;margin-top:12px}.modal-card h2 i{color:var(--gold-light);font-weight:400}.modal-intro{font-size:12px;line-height:1.8;color:#b8c8bb;margin:17px 0 23px;max-width:470px}.full-width{width:100%;justify-content:space-between}.pause-card{max-width:465px}.settings-group{border-top:1px solid var(--line);margin-top:25px;padding-top:5px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid #c5c39e14}.setting-row>span:first-child{display:block}.setting-row strong{display:block;font-size:11px;font-weight:600;color:#e4e7d8}.setting-row small{display:block;font-size:9px;color:#97afa0;margin-top:4px;line-height:1.4}.switch{position:relative;display:inline-flex;flex-shrink:0}.switch input{position:absolute;opacity:0;width:43px;height:25px;margin:0;inset:0;cursor:pointer;z-index:1}.switch>span{display:block;width:43px;height:25px;border-radius:50px;background:#21443c;border:1px solid #d9c49636;transition:background .15s}.switch>span:after{content:"";position:absolute;left:4px;top:4px;width:17px;height:17px;border-radius:50%;background:#b8c7b4;transition:transform .15s,background .15s}.switch input:checked+span{background:#d3b475;border-color:#eacc91}.switch input:checked+span:after{transform:translateX(18px);background:#173a30}.switch input:focus-visible+span{outline:3px solid var(--gold-light);outline-offset:4px}.setting-row select{font-size:11px;min-height:44px;min-width:100px;padding:10px 11px;border:1px solid #d9c49636;border-radius:5px;color:var(--cream);background:#1b3e37;max-width:125px}.pause-secondary{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px;color:#8da998;font-size:10px}.text-button{padding:5px 0;background:transparent;color:#d3d8c4;font-size:10px;text-decoration:underline;text-decoration-color:#d3d8c433;text-underline-offset:4px;transition:color .15s}.text-button:hover{color:var(--gold-light);text-decoration-color:var(--gold-light)}.help-card{max-width:590px}.help-card h2{font-size:42px}.help-card .modal-intro{margin-bottom:19px}.help-steps{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 0}.help-step{display:flex;align-items:flex-start;gap:15px;padding:15px 0}.help-step+.help-step{border-top:1px solid #d9c49613}.help-number{font-family:var(--serif);font-size:22px;line-height:1;color:var(--gold);padding-top:1px}.help-step h3{font-size:12px;line-height:1.4;font-weight:600;margin:0 0 5px}.help-step p{font-size:11px;line-height:1.6;color:#afc1b2}.help-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 15px;margin-top:19px}.help-controls>span{display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.5;color:#c3cebd}.help-controls kbd{font-size:8px}.touch-help>span{display:flex;justify-content:space-between;gap:8px}.touch-help strong{font-size:9px;font-weight:500;color:var(--gold-light)}.help-tip{font-size:10px;line-height:1.6;color:#a8bdaa;margin:20px 0}.help-tip>span{color:var(--gold);margin-right:5px}.upgrade-panel{max-width:830px;text-align:center;padding:36px}.upgrade-panel .modal-intro{margin:17px auto 27px;max-width:480px}.upgrade-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;text-align:left}.upgrade-card{position:relative;display:flex;flex-direction:column;text-align:left;align-items:flex-start;min-height:210px;padding:24px 20px 20px;border-radius:8px;background:#193d35;border:1px solid #c9b77f50;color:var(--cream);transition:transform .18s,border-color .18s,background .18s}.upgrade-card:hover{transform:translateY(-5px);border-color:var(--gold);background:#254c3e}.upgrade-number{position:absolute;top:13px;right:13px;font:11px var(--serif);color:#9eb09b}.upgrade-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid #d9bf7b65;background:#a6a1660c;color:var(--gold-light);margin-bottom:20px;font:22px var(--serif)}.upgrade-icon svg{width:23px;height:23px}.upgrade-card h3{font:22px/1.1 var(--serif);font-weight:400;margin-bottom:10px;color:#f5ead1;letter-spacing:-.4px}.upgrade-card p{font-size:11px;line-height:1.7;color:#b8c9b4}.upgrade-card .upgrade-pick{display:flex;justify-content:space-between;width:100%;gap:8px;font-size:9px;font-weight:600;letter-spacing:.5px;color:var(--gold-light);margin-top:auto;padding-top:20px}.panel-footnote{margin-top:24px;font-size:10px;color:#9ab49e} @keyframes load-line{0%{transform:translateX(-40px)}100%{transform:translateX(112px)}}@keyframes heart-beat{50%{opacity:.5}}@keyframes screen-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.modal-card{animation:screen-arrive .25s ease-out}body[data-screen="playing"] .scene-vignette{opacity:.75} @media(min-width:1500px){} @media(max-width:1100px){.hud-stats{gap:19px;padding:13px 17px}.hud-mission{min-width:220px}.hud-mission h2{font-size:19px}.hud-tools{flex-direction:column;gap:7px}.icon-button{width:34px;height:34px}.mission-strip{top:calc(124px + var(--safe-top))}.boss-bar{top:calc(153px + var(--safe-top));width:310px}.combo-badge{top:calc(119px + var(--safe-top))}} @media(max-width:760px){h1{font-size:clamp(48px,9.3vw,68px);line-height:1;letter-spacing:-2.1px;margin-top:13px}.hud-top{top:calc(12px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:7px}.hud-mission{min-width:0;max-width:none;flex:1;padding:11px 12px}.mission-heading{font-size:7px;letter-spacing:1.1px;gap:5px}.mission-star{font-size:10px}.hud-mission h2{font-size:16px;line-height:1.2;margin:4px 0 8px}.health-hearts{gap:3px}.health-hearts svg{width:11px;height:11px}.hud-stats{padding:10px 12px;gap:13px;min-height:77px;margin-left:0}.hud-stat{min-width:0;gap:6px}.stat-label{font-size:6px;letter-spacing:.8px;gap:4px}.stat-label svg{width:10px;height:10px}.hud-stat strong{font-size:21px}.score-stat strong{font-size:27px}.stat-divider{height:30px}.timer-stat{display:none}.hud-tools{gap:7px}.icon-button{width:34px;height:34px;border-radius:7px}.mission-strip{left:calc(15px + var(--safe-left));top:calc(109px + var(--safe-top));right:15px;font-size:10px;max-width:none;align-items:flex-start;gap:6px}.mission-strip-dot{margin-top:4px;width:4px;height:4px}#hud-remaining{font-size:9px;align-self:center}.boss-bar{width:min(310px,calc(100% - 48px));top:calc(151px + var(--safe-top));padding:9px 12px}.boss-label{font-size:7px;letter-spacing:1.2px}.boss-aside{font-size:9px}.combo-badge{top:auto;right:calc(16px + var(--safe-right));bottom:calc(230px + var(--safe-bottom));padding:5px 8px}.combo-badge strong{font-size:29px}.combo-badge span{font-size:6px;letter-spacing:1px}.desktop-hints{bottom:calc(15px + var(--safe-bottom));gap:8px;padding:9px 10px;flex-wrap:wrap;max-width:calc(100% - 25px)}.desktop-hints>span{font-size:8px;gap:4px}.desktop-hints kbd{font-size:7px;padding:3px 4px}.modal-screen{padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));backdrop-filter:blur(5px)}.modal-card{border-radius:9px;padding:27px}.modal-card h2{font-size:37px}.modal-card .eyebrow{font-size:8px;letter-spacing:1.5px}.modal-intro{font-size:11px;line-height:1.7;margin:15px 0 20px}.setting-row{padding:13px 0}.setting-row strong{font-size:11px}.setting-row small{font-size:8px}.help-card h2{font-size:36px}.help-step{gap:12px;padding:13px 0}.help-step h3{font-size:11px}.help-step p{font-size:10px}.help-number{font-size:20px}.help-tip{font-size:9px}.help-controls{gap:10px 12px}.help-controls>span{font-size:9px}.help-controls kbd{font-size:7px}.upgrade-panel{max-width:490px;padding:25px}.upgrade-panel h2{font-size:34px}.upgrade-panel .modal-intro{font-size:11px;margin:13px auto 21px}.upgrade-options{grid-template-columns:1fr;gap:10px}.upgrade-card{min-height:102px;padding:18px 19px 16px 76px;display:block}.upgrade-icon{position:absolute;left:18px;top:20px;margin:0;width:39px;height:39px}.upgrade-card h3{font-size:22px;margin-bottom:7px;padding-right:10px}.upgrade-card p{font-size:10px;line-height:1.5}.upgrade-card .upgrade-pick{padding-top:8px;font-size:8px}.upgrade-number{font-size:9px;top:11px;right:11px}.panel-footnote{margin-top:17px;font-size:9px}} @media(max-width:410px){h1{font-size:46px;letter-spacing:-2px}.hud-stats{padding:11px 10px;gap:10px}.hud-stat strong{font-size:19px}.score-stat strong{font-size:24px}.hud-mission{padding:11px 10px}.hud-mission h2{font-size:14px}.hud-tools .icon-button{width:31px;height:34px}.stat-divider{display:none}.parcel-stat .stat-label{font-size:0;letter-spacing:0}.parcel-stat .stat-label svg{width:12px;height:12px}.parcel-stat{align-items:center;min-width:25px}.hud-stat .stat-label{min-height:12px}.hud-mission{min-height:77px}.health-hearts{gap:3px}.health-hearts svg{width:10px;height:10px}.mission-strip{font-size:9px;gap:6px}#hud-remaining{font-size:8px}.joystick{left:calc(22px + var(--safe-left));width:104px;height:104px;bottom:calc(39px + var(--safe-bottom))}.joystick-knob{left:30px;top:30px}.touch-actions{right:calc(18px + var(--safe-right));transform:scale(.94);transform-origin:right bottom}.is-touch .game-toast{font-size:10px;padding:10px 14px}.modal-card{padding:23px}.modal-card h2{font-size:34px}.help-controls{grid-template-columns:1fr 1fr;gap:9px}.help-controls kbd{font-size:6px}.help-controls>span{font-size:8px;gap:5px}.pause-secondary{gap:9px}.text-button{font-size:9px}.upgrade-card{padding-left:68px}.upgrade-card h3{font-size:20px}.upgrade-icon{left:14px}.panel-footnote{font-size:8px}} @media(max-height:780px) and (min-width:761px){h1{font-size:clamp(46px,5.1vw,72px);margin-top:15px}.modal-card{padding-top:28px;padding-bottom:27px}.modal-card h2{font-size:37px}.help-card .modal-intro{margin:13px 0 16px}.help-step{padding:12px 0}.help-card .help-tip{margin:16px 0}.help-card .help-controls{margin-top:16px}} @media(max-height:720px) and (max-width:760px) and (orientation:portrait){h1{font-size:46px;margin-top:10px;letter-spacing:-2px}.help-card h2{font-size:30px}.help-step{padding:10px 0}.help-step p{font-size:9px}.help-card .modal-intro{margin:12px 0 15px}.help-card .help-tip{margin:14px 0}.help-card .help-controls{margin-top:14px}.help-card .button{min-height:43px}.modal-card{padding:24px}} @media(max-height:540px) and (orientation:landscape){h1{font-size:40px;letter-spacing:-1.6px;line-height:.97;margin-top:9px}.hud-top{top:calc(10px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:9px}.hud-mission{padding:8px 12px;min-width:205px;max-width:255px;min-height:64px;flex:none}.mission-heading{font-size:6px;letter-spacing:1px}.mission-star{font-size:9px}.hud-mission h2{font-size:15px;margin:3px 0 6px}.health-hearts svg{width:9px;height:9px}.health-hearts{gap:4px;min-height:9px}.hud-stats{min-height:64px;padding:10px 13px;margin-left:auto;gap:15px}.hud-stat{gap:5px;min-width:43px}.stat-label{font-size:6px;letter-spacing:.8px}.hud-stat strong{font-size:21px}.score-stat strong{font-size:25px}.timer-stat{display:flex}.timer-stat strong{font-size:16px}.hud-tools{flex-direction:row}.icon-button{width:33px;height:33px}.mission-strip{top:calc(86px + var(--safe-top));left:calc(16px + var(--safe-left));font-size:9px;max-width:350px}.mission-strip-dot{margin-top:4px}#hud-remaining{font-size:8px}.boss-bar{top:calc(88px + var(--safe-top));left:auto;right:calc(17px + var(--safe-right));transform:none;width:250px;padding:7px 10px}.boss-label{font-size:6px;letter-spacing:1.1px}.boss-track{margin-top:6px;height:4px}.boss-aside{font-size:8px;margin-top:4px}.combo-badge{top:auto;bottom:calc(174px + var(--safe-bottom));right:calc(22px + var(--safe-right))}.combo-badge strong{font-size:25px}.combo-badge span{font-size:6px}.joystick{left:calc(25px + var(--safe-left));bottom:calc(28px + var(--safe-bottom));width:94px;height:94px}.joystick-knob{left:25px;top:25px}.joystick-direction{inset:14px}.joystick-caption{bottom:-17px;font-size:7px}.touch-actions{right:calc(23px + var(--safe-right));bottom:calc(19px + var(--safe-bottom));transform:scale(.8);transform-origin:right bottom}.is-touch .game-toast{bottom:calc(26px + var(--safe-bottom));max-width:calc(100% - 350px);font-size:10px;padding:9px 13px}.desktop-hints{bottom:calc(13px + var(--safe-bottom));gap:12px;padding:8px 13px}.desktop-hints>span{font-size:8px}.desktop-hints kbd{font-size:7px}.modal-screen{padding:calc(12px + var(--safe-top)) 20px calc(12px + var(--safe-bottom));align-items:flex-start}.modal-card{max-height:none;margin:auto 0;padding:24px 28px}.pause-card{max-width:440px}.modal-card h2{font-size:32px}.pause-card .modal-intro{font-size:11px;margin:12px 0 17px}.settings-group{margin-top:18px}.setting-row{padding:10px 0}.pause-secondary{margin-top:15px}.upgrade-panel{max-width:760px}.upgrade-panel h2 br{display:none}.upgrade-panel .modal-intro{margin:12px auto 18px;font-size:11px}.upgrade-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.upgrade-card{min-height:172px;padding:18px 15px;display:flex}.upgrade-icon{position:static;margin-bottom:13px;width:32px;height:32px}.upgrade-icon svg{width:20px;height:20px}.upgrade-card h3{font-size:20px;margin-bottom:7px}.upgrade-card p{font-size:10px}.upgrade-card .upgrade-pick{padding-top:13px}.panel-footnote{margin-top:15px;font-size:9px}.help-card{max-width:600px}.help-card h2 br{display:none}.help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;padding:15px 0}.help-step{display:block;padding:0}.help-step+.help-step{border:0}.help-number{display:block;margin-bottom:9px;font-size:20px}.help-step h3{font-size:10px}.help-step p{font-size:9px}.help-controls{display:flex;flex-wrap:wrap;gap:10px 15px;margin-top:15px}.help-controls>span{font-size:9px}.help-tip{margin:15px 0;font-size:9px}.help-card .modal-intro{font-size:11px;max-width:none;margin:13px 0 17px}.help-card .button{min-height:41px}} @media(max-height:410px) and (orientation:landscape){h1{font-size:36px}.hud-mission{min-width:190px}.hud-stats{gap:11px}.mission-strip{max-width:320px;font-size:8px}.boss-bar{width:220px}.is-touch .game-toast{max-width:calc(100% - 320px);font-size:9px}.joystick{bottom:calc(25px + var(--safe-bottom));transform:scale(.88);transform-origin:left bottom}.touch-actions{transform:scale(.74)}} @media(max-height:410px) and (orientation:landscape){h1{font-size:32px;line-height:1.04;letter-spacing:-1.25px}h1 br{display:none}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} /* Independent music/effects levels stay usable with touch, keyboard and mute. */ .audio-level-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;column-gap:12px;row-gap:2px;padding:12px 0 8px} .audio-level-row label{display:block;font-size:11px;font-weight:600;color:#e4e7d8;cursor:pointer} .audio-level-row output{justify-self:end;align-self:start;color:var(--gold-light);font-size:11px;font-variant-numeric:tabular-nums;line-height:1.4;padding-top:1px} .audio-level-slider{--audio-level:55%;grid-column:1/-1;display:block;width:100%;min-width:0;min-height:44px;height:44px;margin:0;padding:0;border:0;border-radius:18px;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:pan-y} .audio-level-slider::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(to right,#dfbd7d 0 var(--audio-level),#426054 var(--audio-level) 100%)} .audio-level-slider::-moz-range-track{height:5px;border-radius:4px;background:linear-gradient(to right,#dfbd7d 0 var(--audio-level),#426054 var(--audio-level) 100%)} .audio-level-slider::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;margin-top:-8px;border:1px solid #ffedc4;border-radius:50%;background:linear-gradient(145deg,#f5d99e,#cfa666);box-shadow:0 2px 8px #0004} .audio-level-slider::-moz-range-thumb{width:19px;height:19px;border:1px solid #ffedc4;border-radius:50%;background:linear-gradient(145deg,#f5d99e,#cfa666);box-shadow:0 2px 8px #0004} .audio-level-slider:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px} .audio-level-slider:active::-webkit-slider-thumb{background:#fff0ca} .audio-level-slider:active::-moz-range-thumb{background:#fff0ca} .help-audio-note{font-size:10px;line-height:1.6;color:#a8bdaa;margin:-9px 0 20px} @media(max-width:760px){.audio-level-row{padding:10px 0 6px}.audio-level-slider{height:44px}.help-audio-note{font-size:9px;margin-top:-8px}} @media(max-height:540px) and (orientation:landscape){.audio-level-row{padding:9px 0 5px}.help-audio-note{font-size:9px;margin-top:-7px;margin-bottom:15px}} /* v0.5.1: two reserved rails, with the workshop rendered between them. */ .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} #hud{--rail-height:84px;--dock-height:64px;--stick-size:96px;position:absolute;inset:0;pointer-events:none} body[data-screen="paused"] #hud[hidden],body[data-screen="help"] #hud[hidden],body[data-screen="map"] #hud[hidden],body[data-screen="upgrade"] #hud[hidden]{display:block!important;visibility:hidden;pointer-events:none} #hud .play-area-bounds{position:absolute;top:calc(var(--rail-height) + var(--safe-top) + 4px);bottom:calc(var(--dock-height) + var(--safe-bottom) + 4px);left:var(--safe-left);right:var(--safe-right);pointer-events:none} #hud .hud-rail{position:absolute;top:0;left:0;right:0;height:calc(var(--rail-height) + var(--safe-top));padding:calc(6px + var(--safe-top)) calc(16px + var(--safe-right)) 6px calc(16px + var(--safe-left));display:grid;grid-template-rows:44px minmax(0,1fr);gap:2px;background:linear-gradient(115deg,#102c2e,#0b2029);border-bottom:1px solid #d4c18a24;pointer-events:auto} #hud .hud-top{position:static;inset:auto;display:flex;align-items:center;gap:18px;min-width:0;height:44px} #hud .hud-mission{padding:0;min-width:0;max-width:none;min-height:0;flex:1} #hud .mission-heading{display:flex;align-items:center;gap:5px;font-size:7px;line-height:10px;letter-spacing:1px;white-space:nowrap} #hud .mission-star{font-size:10px;line-height:10px} #hud .hud-room-name{overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px;color:#9ebbad;font-weight:400;max-width:210px;margin-left:5px} #hud .hud-room-name:not(:empty):before{content:'·';margin-right:8px;color:#6f968b} #hud .hud-mission h2{font:400 17px/20px var(--serif);letter-spacing:-.15px;margin:1px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #hud .health-hearts{display:flex;align-items:center;gap:3px;min-height:9px;max-width:100%;overflow:hidden} #hud .health-hearts svg{width:9px;height:9px;flex:none;filter:none} #hud .health-count{font-size:8px;line-height:10px;margin-left:3px;white-space:nowrap} #hud .hud-stats{position:static;display:flex;align-items:center;gap:17px;padding:0;margin:0;min-height:0;flex:none;background:none;border:0;box-shadow:none} #hud .hud-stat{display:flex;flex-direction:column;gap:3px;min-width:0} #hud .stat-label{font-size:6px;line-height:9px;letter-spacing:1px;color:#a5beb0;min-height:0} #hud .hud-stat strong{font:500 17px/20px var(--sans);letter-spacing:-.4px} #hud .score-stat strong{font-size:22px;color:#f3d69e;line-height:24px} #hud .parcel-stat{flex-direction:row;align-items:center;gap:5px} #hud .parcel-stat .stat-label svg{width:13px;height:13px;color:#cab680} #hud .parcel-stat strong{font-size:14px;color:#d6dfcd} #hud .timer-stat{display:flex;min-width:0} #hud .timer-stat strong{font-size:14px;letter-spacing:0} #hud .hud-tools{display:flex;flex-direction:row;align-items:center;gap:2px;flex:none} #hud .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:8px;background:transparent;border:1px solid transparent;box-shadow:none;backdrop-filter:none;color:#ddcca2;pointer-events:auto} #hud .icon-button:hover:not(:disabled){background:#25463f;border-color:#b7c09e27} #hud .icon-button svg{width:20px;height:20px} #hud .icon-button:disabled{opacity:.35} #hud .map-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px} #hud .map-toggle svg{width:19px;height:19px} #hud .map-toggle>span{font-size:6px;line-height:8px;letter-spacing:1px;font-weight:650} #hud .combo-badge{position:static;inset:auto;transform:none;display:flex;gap:0;align-items:center;padding:3px 5px;border:1px solid #d5bd7a3d;border-radius:5px;background:#d4b1650c} #hud .combo-badge strong{font:700 12px/15px var(--sans);color:#f1d397} #hud .status-rail{position:relative;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;border-top:1px solid #c9c69311;padding-top:2px;pointer-events:none} #hud .status-rail>:not(.boss-status){flex:1} #hud .boss-status{flex:none;padding-left:8px;border-left:1px solid #e1ce9e2e;color:#edc38d;font:700 8px/12px var(--sans);letter-spacing:.5px;white-space:nowrap;font-variant-numeric:tabular-nums} #hud .mission-strip,#hud .exit-instructions,#hud .touch-aim-tip,#hud .game-toast{position:static;inset:auto;transform:none;width:100%;max-width:none;min-width:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;text-shadow:none;text-align:left;font:400 11px/12px var(--sans);color:#b9cdbd;letter-spacing:0;pointer-events:none} #hud .mission-strip{display:flex;align-items:center;gap:7px} #hud .mission-strip-dot{width:4px;height:4px;margin:0;background:#d8bc78} #hud #hud-objective{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} #hud #hud-remaining{flex:none;margin-left:auto;padding-left:8px;line-height:12px;font-size:9px;color:#efd29a;border-left:1px solid #e1ce9e2e} #hud .exit-instructions{display:flex;align-items:center;gap:7px;color:#e3e9cd;z-index:auto} #hud .exit-instructions strong{font:700 9px/12px var(--sans);letter-spacing:.7px;color:#b5e8c2;white-space:nowrap} #hud .exit-separator{margin:0 6px;color:#8cb09a} #hud .exit-success-icon{display:grid;place-items:center;width:14px;height:14px;flex:none;border:1px solid #a9dfb953;border-radius:50%;font-size:9px;color:#b7e7c6} #hud .touch-aim-tip:before{content:'↗';color:#e9ca8e;margin-right:7px;font-weight:600} #hud .game-toast{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#e8dfc3;opacity:0;transition:opacity .15s} #hud .game-toast.is-visible{transform:none;opacity:1} #hud .game-toast[data-kind="success"]{color:#bce9bc} #hud .game-toast[data-kind="warning"],#hud .game-toast[data-kind="danger"],#hud .game-toast[data-kind="boss"]{color:#f0c0a2} #hud .boss-bar{position:absolute;top:auto;left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));bottom:1px;width:auto;padding:0;transform:none;border:0;border-radius:0;background:none;backdrop-filter:none;height:3px} #hud .boss-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} #hud .boss-track{height:3px;margin:0;background:#14332e} #hud .exit-pointer{position:absolute;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%);padding:5px 7px;border-radius:16px;border:1px solid #e6d5a14d;background:#102b2bec;color:#f3e4bd;pointer-events:none;z-index:3;box-shadow:0 2px 6px #071a182e} #hud .exit-pointer>span{font:650 9px/12px var(--sans);letter-spacing:.2px} #hud .exit-pointer svg{width:15px;height:15px;stroke-width:2.5} /* A compact, stable dock keeps both thumbsticks and every action in one band. */ #hud .control-dock{position:absolute;left:0;right:0;bottom:0;height:calc(var(--dock-height) + var(--safe-bottom));background:linear-gradient(180deg,#0b2028,#081b22);border-top:1px solid #d4c18a1e;pointer-events:auto} #hud .control-gutter{display:none} #hud .special-controls{position:absolute;left:calc(16px + var(--safe-left));right:auto;bottom:calc(10px + var(--safe-bottom));top:auto;transform:none;width:126px;min-width:0;height:44px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:none} #hud .special-actions{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;height:100%;margin:0} #hud .special-use,#hud .special-switch{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;height:100%;padding:5px;border:1px solid #b7d6a95e;border-radius:10px;background:#26493f;color:#eedcac;touch-action:none;box-shadow:none;transition:background .12s,opacity .12s,transform .12s} #hud .special-use{font:750 8px/10px var(--sans);letter-spacing:.6px} #hud .special-icon{display:grid;place-items:center;width:23px;height:23px;color:#f2d797;flex:none} #hud .special-icon svg{width:23px;height:23px;stroke-width:1.5} #hud .special-ammo{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 3px;border:1px solid #aabf98;border-radius:50%;background:#dce7bb;color:#19352c;box-shadow:0 1px 3px #061c2570} #hud .special-ammo strong{font:750 10px/14px var(--sans)} #hud .special-controls kbd{position:absolute;left:4px;bottom:3px;margin:0;padding:0;border:0;box-shadow:none;background:none;color:#adc5a6;font-size:7px;line-height:8px} #hud .special-switch svg{width:21px;height:21px;stroke-width:1.8} #hud #special-reserve{position:absolute;right:2px;top:2px;display:grid;place-items:center;min-width:13px;height:13px;padding:0 2px;border-radius:50%;background:#bad3ae;color:#1b3b31;font:750 8px/11px var(--sans)} #hud .special-use:hover:not(:disabled),#hud .special-switch:hover:not(:disabled){background:#355b49} #hud .special-use.is-pressed,#hud .special-switch.is-pressed{transform:scale(.94)} #hud .special-use:disabled,#hud .special-switch:disabled{opacity:.36} #hud .special-controls.is-cooling .special-use{opacity:.62} #hud .special-controls.is-cooling .special-ammo{background:#7d987d;color:#e1ebc9} #hud .special-controls.is-empty .special-use{border-color:#8eaa9b40;background:#18352f} #hud .desktop-hints{position:absolute;top:0;bottom:var(--safe-bottom);left:calc(164px + var(--safe-left));right:calc(18px + var(--safe-right));transform:none;display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;width:auto;max-width:none;padding:8px 0;margin:0;background:none;border:0;backdrop-filter:none;box-shadow:none} #hud .desktop-hints>span{display:flex;align-items:center;gap:5px;color:#a6beb0;font-size:9px;line-height:12px;white-space:nowrap} #hud .desktop-hints kbd{padding:3px 4px;font-size:7px;line-height:10px;background:#15342f;border-color:#9fba9d30;color:#ddcea7;box-shadow:none} #hud .touch-controls,#hud .touch-actions{position:absolute;inset:0;width:auto;height:auto;transform:none;pointer-events:none} #hud .joystick,#hud .touch-fire{position:absolute;width:var(--stick-size);height:var(--stick-size);bottom:calc(22px + var(--safe-bottom));border-radius:50%;border:1px solid #bdd1b940;background:radial-gradient(circle,#29473c66,#102b30b3);color:#233a31;box-shadow:inset 0 0 18px #0002;backdrop-filter:none;transform:none;overflow:visible;cursor:grab;pointer-events:auto;touch-action:none} #hud .joystick{left:calc(14px + var(--safe-left));right:auto} #hud .touch-fire{right:calc(14px + var(--safe-right));left:auto;padding:0} #hud .joystick-direction,#hud .aim-stick-track{position:absolute;inset:13px;border:1px dashed #d5d8b329;border-radius:50%;pointer-events:none} #hud .joystick-knob{position:absolute;width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px);background:linear-gradient(145deg,#ded6b5,#a6bbaa);border:1px solid #f5ecca99;box-shadow:0 2px 8px #0004;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none} #hud .joystick-caption,#hud .touch-fire>.aim-stick-caption{position:absolute;bottom:-17px;left:0;width:100%;margin:0;color:#c7d2b9;font:650 7px/11px var(--sans);letter-spacing:1.5px;white-space:nowrap;text-align:center;text-shadow:none;pointer-events:none} #hud .touch-fire>.aim-stick-caption{color:#e8d4a2;letter-spacing:1px} #hud .joystick.is-active,#hud .touch-fire.is-active{background:#22453b;border-color:#d7d4a878;cursor:grabbing} #hud .touch-fire.is-aiming{border-color:#ead092;box-shadow:inset 0 0 18px #0002,0 0 0 3px #d1b76d13} #hud .touch-fire:active,#hud .touch-fire.is-pressed{transform:none} #hud .aim-stick-track:before,#hud .aim-stick-track:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ddc58b2b} #hud .aim-stick-track:before{width:1px;height:10px}#hud .aim-stick-track:after{width:10px;height:1px} #hud .aim-stick-arrow{position:absolute;inset:-6px;opacity:0;transform:rotate(var(--aim-angle,0deg));pointer-events:none} #hud .aim-stick-arrow:before{content:'';position:absolute;left:calc(50% - 5px);top:0;width:10px;height:9px;background:#f4dba5;clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%)} #hud .touch-fire.is-aiming .aim-stick-arrow{opacity:1} #hud .aim-stick-knob{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#f1d79b,#caa56c);border:1px solid #ffe7afb3;box-shadow:0 2px 9px #0004;transform:translate(var(--aim-x,0px),var(--aim-y,0px));pointer-events:none} #hud .aim-stick-knob svg{width:26px;height:26px;stroke-width:1.5} #hud .touch-wrap,#hud .touch-dash{width:48px;height:48px;min-width:44px;min-height:44px;bottom:calc(14px + var(--safe-bottom));right:auto;border:1px solid #bfd0a543;box-shadow:none;gap:2px;border-radius:12px} #hud .touch-wrap{left:calc(50% - 53px);background:#26493f;color:#e8dcb9} #hud .touch-dash{left:calc(50% + 5px);background:#1b3b43;color:#e0dac1} #hud .touch-wrap svg,#hud .touch-dash svg{width:20px;height:20px} #hud .touch-wrap>span,#hud .touch-dash>span{font:700 6.5px/9px var(--sans);letter-spacing:.6px} #hud .touch-button.is-cooling{opacity:.46} body.is-touch #hud{--dock-height:132px} body.is-touch #hud .special-controls{left:50%;right:auto;bottom:auto;top:8px;transform:translateX(-50%);width:106px;height:48px} body.is-touch #hud .special-use{flex-direction:column;gap:1px;padding:3px;font-size:7px;line-height:9px} body.is-touch #hud .special-controls kbd{display:none} body.is-touch #hud .special-use .special-icon{width:23px;height:23px} /* The map expands only on request, with the shift safely paused. */ #screen-map{overflow-y:auto;overscroll-behavior:contain;align-items:center} #screen-map .map-card{width:min(560px,100%);max-width:560px;padding:22px 26px;margin:auto 0} #screen-map .map-heading{display:flex;align-items:center;justify-content:space-between;gap:14px} #screen-map .map-heading .eyebrow{font-size:8px;letter-spacing:1.5px} #screen-map .map-heading .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;margin:-10px -10px -4px 0;border-radius:8px;background:transparent;color:#d6c69c} #screen-map .map-heading .icon-button:hover{background:#24473c} #screen-map .map-heading .icon-button svg{width:19px;height:19px} #screen-map h2{font-size:27px;line-height:1.18;margin:7px 0 6px;letter-spacing:-.4px} #screen-map .map-status{font-size:10px;line-height:1.5;color:#abc6b3;margin-bottom:13px} #screen-map .room-map{position:static;inset:auto;width:100%;max-width:none;padding:8px 5px;margin:0;border:1px solid #b3caa433;border-radius:8px;background:#102b2d;box-shadow:none;pointer-events:none} #screen-map #room-map-canvas{display:block;width:min(100%,calc(47vh * 1.489));height:auto;margin:auto;max-width:100%} #screen-map .room-map-key{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:12px 0;color:#bdd1bb;font-size:9px;line-height:14px} #screen-map .room-map-key>span{display:inline-flex;align-items:center;gap:6px} #screen-map .room-map-key i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f8dc97} #screen-map .room-map-key .map-toys{background:#f58c89} #screen-map .room-map-key .map-ammo{background:#9beed4;border-radius:0;transform:rotate(45deg)} #screen-map .room-map-key .map-exit{background:#9ff0bd;border-radius:1px} #screen-map .room-map-goal{margin:5px 0 14px;text-align:center;font-size:11px;line-height:1.5;color:#baf0c8} #screen-map .map-footnote{margin-top:12px;color:#95b39e;text-align:center;font-size:8px;line-height:15px} #screen-map .map-footnote kbd{font-size:7px;padding:2px 4px;margin:0 2px} body.is-touch #screen-map .map-footnote{display:none} .screen-toast{position:absolute;left:50%;bottom:calc(20px + var(--safe-bottom));transform:translateX(-50%);width:max-content;max-width:min(520px,calc(100% - 32px));padding:10px 14px;border:1px solid #ced7a843;border-radius:7px;background:#173e34f5;color:#ede4c7;box-shadow:0 3px 16px #0018;font-size:11px;line-height:1.5;text-align:center;pointer-events:none;z-index:10} .help-specials{margin-top:18px;padding:12px 13px;border:1px solid #b9c48e30;border-radius:6px;background:#afbd7410} .help-specials>strong{display:block;font:18px/1.2 var(--serif);color:#ecd39b;margin-bottom:6px} .help-specials p{font-size:10px;line-height:1.65;color:#b9cbbb}.help-specials b{font-weight:650;color:#e2dfc0} @media(min-width:600px){ body.is-touch #hud .special-controls{left:calc(28px + var(--stick-size) + var(--safe-left));top:auto;bottom:calc(46px + var(--safe-bottom));transform:none} body.is-touch #hud .touch-wrap{left:auto;right:calc(84px + var(--stick-size) + var(--safe-right));bottom:calc(46px + var(--safe-bottom))} body.is-touch #hud .touch-dash{left:auto;right:calc(28px + var(--stick-size) + var(--safe-right));bottom:calc(46px + var(--safe-bottom))} } @media(max-width:900px){ #hud .hud-top{gap:12px}#hud .hud-stats{gap:12px}#hud .hud-room-name{max-width:140px} #hud .desktop-hints{gap:8px}#hud .desktop-hints>span{font-size:8px;gap:4px} } @media(max-width:760px){ #hud{--rail-height:90px} #hud .hud-rail{padding-left:calc(12px + var(--safe-left));padding-right:calc(12px + var(--safe-right))} #hud .hud-top{gap:10px} #hud .hud-mission h2{font-size:16px;line-height:19px;margin:1px 0 3px} #hud .hud-room-name{display:none} #hud .hud-stats{display:grid;grid-template-columns:auto auto;gap:3px 7px;align-items:center;justify-items:end} #hud .score-stat{grid-column:1/-1;gap:0} #hud .score-stat .stat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} #hud .score-stat strong{font-size:18px;line-height:20px;letter-spacing:-.5px} #hud .parcel-stat{grid-column:1;justify-self:end;gap:4px} #hud .parcel-stat strong{font-size:10px;line-height:12px;letter-spacing:0} #hud .parcel-stat .stat-label svg{width:10px;height:10px} #hud .timer-stat,#hud #hud-sound{display:none} #hud .combo-badge{grid-column:2;grid-row:2;align-self:center;padding:0;border:0;background:none} #hud .combo-badge strong{font-size:10px;line-height:12px} #hud .hud-tools{gap:0} #hud .mission-strip,#hud .exit-instructions,#hud .touch-aim-tip,#hud .game-toast{font-size:10.5px;line-height:14px} #hud .boss-bar{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right))} #screen-map .map-card{padding:20px} #screen-map h2{font-size:24px} .help-specials{padding:10px;margin-top:14px}.help-specials>strong{font-size:17px}.help-specials p{font-size:9px} } @media(max-width:350px){ #hud{--stick-size:88px} #hud .hud-rail{padding-left:calc(10px + var(--safe-left));padding-right:calc(10px + var(--safe-right))} #hud .hud-top{gap:7px} #hud .hud-mission h2{font-size:14px;line-height:18px} #hud .mission-heading{font-size:6px;letter-spacing:.8px;gap:4px} #hud .health-hearts{gap:2px}#hud .health-hearts svg{width:8px;height:8px} #hud .score-stat strong{font-size:16px} #hud .joystick{left:calc(10px + var(--safe-left))}#hud .touch-fire{right:calc(10px + var(--safe-right))} #hud .joystick-knob{width:36px;height:36px;left:calc(50% - 18px);top:calc(50% - 18px)} #hud .aim-stick-knob{width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px)} #hud .aim-stick-knob svg{width:24px;height:24px} #hud .mission-strip,#hud .exit-instructions,#hud .touch-aim-tip,#hud .game-toast{font-size:10px} } @media(max-height:540px) and (orientation:landscape){ #hud{--rail-height:78px;--stick-size:86px} #hud .hud-rail{padding-top:calc(4px + var(--safe-top));padding-bottom:4px} #hud .hud-top{gap:15px} #hud .hud-mission h2{font-size:15px;line-height:18px;margin-top:1px;margin-bottom:2px} #hud .mission-heading{font-size:6px;line-height:9px} #hud .hud-stats{display:flex;gap:15px} #hud .score-stat .stat-label{position:static;width:auto;height:auto;clip:auto;display:block} #hud .score-stat strong{font-size:19px;line-height:21px} #hud .parcel-stat strong{font-size:13px;line-height:16px} #hud .timer-stat{display:flex} #hud .combo-badge{padding:3px 5px;border:1px solid #d5bd7a3d;background:#d4b1650c} #hud .combo-badge strong{font-size:11px} #hud .mission-strip,#hud .exit-instructions,#hud .touch-aim-tip,#hud .game-toast{font-size:10px;line-height:12px} body.is-touch #hud{--dock-height:110px} #hud .joystick,#hud .touch-fire{bottom:calc(19px + var(--safe-bottom))} #hud .joystick{left:calc(24px + var(--safe-left))}#hud .touch-fire{right:calc(24px + var(--safe-right))} #hud .joystick-knob{width:36px;height:36px;left:calc(50% - 18px);top:calc(50% - 18px)} #hud .aim-stick-knob{width:38px;height:38px;left:calc(50% - 19px);top:calc(50% - 19px)} #hud .joystick-caption,#hud .touch-fire>.aim-stick-caption{bottom:-15px;font-size:6.5px} body.is-touch #hud .special-controls{left:calc(38px + var(--stick-size) + var(--safe-left));top:auto;bottom:calc(38px + var(--safe-bottom));transform:none} body.is-touch #hud .touch-wrap{left:auto;right:calc(94px + var(--stick-size) + var(--safe-right));bottom:calc(38px + var(--safe-bottom))} body.is-touch #hud .touch-dash{left:auto;right:calc(38px + var(--stick-size) + var(--safe-right));bottom:calc(38px + var(--safe-bottom))} #screen-map .map-card{padding:16px 22px} #screen-map .map-heading .eyebrow{font-size:7px} #screen-map h2{font-size:22px;margin-top:4px} #screen-map .map-status{margin-bottom:8px;font-size:9px} #screen-map #room-map-canvas{width:min(100%,calc(43vh * 1.489))} #screen-map .room-map-key{margin:8px 0;font-size:8px;gap:6px 16px} #screen-map .room-map-goal{margin:4px 0 9px;font-size:10px} #screen-map .button{min-height:44px;padding:10px 16px} .help-specials{padding:9px 11px;margin-top:13px}.help-specials>strong{font-size:16px;margin-bottom:4px}.help-specials p{font-size:9px} } @media(max-width:620px) and (max-height:540px) and (orientation:landscape){ #hud .hud-top{gap:8px}#hud .hud-stats{gap:10px}#hud .timer-stat{display:none} #hud .hud-mission h2{font-size:14px}#hud .joystick{left:calc(16px + var(--safe-left))}#hud .touch-fire{right:calc(16px + var(--safe-right))} body.is-touch #hud .special-controls{left:calc(30px + var(--stick-size) + var(--safe-left))} body.is-touch #hud .touch-wrap{right:calc(86px + var(--stick-size) + var(--safe-right))} body.is-touch #hud .touch-dash{right:calc(30px + var(--stick-size) + var(--safe-right))} } /* Short landscape puts controls in side gutters to preserve useful view height. */ @media(min-width:600px) and (max-height:540px) and (orientation:landscape){ body.is-touch #hud .play-area-bounds{left:calc(128px + var(--safe-left));right:calc(128px + var(--safe-right));bottom:calc(8px + var(--safe-bottom))} body.is-touch #hud .control-dock{top:calc(var(--rail-height) + var(--safe-top));height:auto;background:none;border:0;pointer-events:none} body.is-touch #hud .control-gutter{position:absolute;top:0;bottom:0;display:block;background:linear-gradient(180deg,#0b2028,#081b22);pointer-events:auto} body.is-touch #hud .control-gutter-left{left:0;width:calc(128px + var(--safe-left));border-right:1px solid #d4c18a1e} body.is-touch #hud .control-gutter-right{right:0;width:calc(128px + var(--safe-right));border-left:1px solid #d4c18a1e} body.is-touch #hud .joystick{left:calc(64px - var(--stick-size)/2 + var(--safe-left));bottom:calc(20px + var(--safe-bottom))} body.is-touch #hud .touch-fire{right:calc(64px - var(--stick-size)/2 + var(--safe-right));bottom:calc(20px + var(--safe-bottom))} body.is-touch #hud .special-controls{left:calc(11px + var(--safe-left));top:auto;bottom:calc(34px + var(--stick-size) + var(--safe-bottom));transform:none} body.is-touch #hud .touch-wrap{left:auto;right:calc(68px + var(--safe-right));bottom:calc(34px + var(--stick-size) + var(--safe-bottom))} body.is-touch #hud .touch-dash{left:auto;right:calc(12px + var(--safe-right));bottom:calc(34px + var(--stick-size) + var(--safe-bottom))} } /* Results: the score and next move lead; optional records open on request. */ .results-screen{align-items:flex-start;justify-content:center;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));overflow-x:hidden;overflow-y:auto;scroll-padding-block:20px;background:radial-gradient(ellipse at 50% 0,#203c2df2,#041b18f5 72%)} .results-card{flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:500px;max-height:none;margin:auto 0;padding:0;overflow:visible;border:1px solid #cba75d80;border-radius:18px;background:radial-gradient(ellipse at 50% 0,#20423088,transparent 55%),#07271f;box-shadow:inset 0 0 0 3px #e3bd710a,0 25px 100px #0005} .results-main{min-width:0;padding:25px 27px 8px;text-align:center} .results-main .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:8px;line-height:1.5;letter-spacing:1.5px;color:#dfc78f} .results-card .results-main h2{font-size:42px;font-weight:600;line-height:1.02;letter-spacing:-1.2px;margin:11px auto 0;max-width:440px;text-wrap:balance;color:#fff2db} .results-card .results-main h2 i{display:block;font-style:normal;color:inherit} .results-main>.eyebrow:before,.results-main>.eyebrow:after{content:"✦";color:#e2bc72;font:14px/1 var(--serif);letter-spacing:0} .results-card #results-title:focus{outline:none} .result-description{font-size:12px;line-height:1.5;color:#c8d3bb;margin:9px auto 0;max-width:420px;text-wrap:pretty} .result-rank{display:flex;align-items:center;gap:6px;margin:0 0 13px;color:#dbc38e;font-size:9px;line-height:1.5;letter-spacing:.6px;font-weight:600} .result-rank>span:first-child{font-size:12px;line-height:1} .result-score-row{display:flex;align-items:center;flex-direction:column;gap:6px;margin-top:19px} .result-score-row>div{min-width:0;max-width:100%} .result-score-row .stat-label{justify-content:center;font-size:8px;letter-spacing:1.6px;color:#c6caa9;line-height:1.5} .result-score-row strong{display:block;font:600 clamp(45px,15.4vw,72px)/1 var(--serif);color:#fff2d7;letter-spacing:-1.7px;margin-top:5px;font-variant-numeric:tabular-nums;white-space:nowrap} .new-best{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 8px;border:1px solid #d6b26b80;border-radius:5px;font-size:8px;letter-spacing:.8px;text-transform:uppercase;font-weight:650;line-height:1.4;color:#f1d497;margin-bottom:0;white-space:nowrap} .new-best>span{font-size:10px} .result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;padding:12px 0;border-top:1px solid #d8c69b38;border-bottom:1px solid #d8c69b38} .result-stats>div{display:flex;align-items:center;min-width:0;flex-direction:column;gap:4px;text-align:center} .result-stats>div+div{padding-left:8px;border-left:1px solid #ead7ac38} .result-stats strong{font:500 26px/1.1 var(--serif);color:#f1e1bd;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .result-stats span{font-size:10px;color:#bbcdb3;line-height:1.45} .result-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px} .result-actions .button{position:relative;min-width:0;min-height:48px;padding:12px 38px;gap:8px;justify-content:center;text-align:center;font-size:14px;line-height:1.4;letter-spacing:0;border-radius:7px;transform:none} .result-actions .button>span{min-width:0} .result-actions .button svg{position:absolute;right:14px;width:17px;height:17px;stroke-width:1.8} .result-actions .button-secondary{background:#08251d33;border-color:#d3b97b70;color:#eee6ca;font-weight:550;box-shadow:inset 0 1px 0 #f0d59a08} .result-sharing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px} .result-sharing .button{min-width:0;min-height:44px;padding:9px 4px;gap:7px;border:1px solid transparent;background:transparent;color:#c8d1b9;font-size:11px;line-height:1.4;font-weight:500;letter-spacing:0;box-shadow:none;transform:none} .result-sharing .button svg{width:15px;height:15px;color:#bdb185} .result-sharing .button:hover{color:#f1dfba;background:#28483a60;border-color:#b9c8a526} .results-extras{min-width:0;padding:0 27px 17px;display:flex;flex-direction:column;gap:0;text-align:left} .results-card .result-disclosure{min-width:0;margin:0;padding:0;border:0;border-top:1px solid #c8bb8f4d;border-radius:0;background:transparent;overflow:visible} .result-disclosure-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:10px 0;border-radius:0;background:transparent;color:#e7e4cc;text-align:left} .result-disclosure-toggle:hover{background:#29443744} .result-disclosure-toggle>span{min-width:0;display:flex;flex-direction:column;gap:3px} .result-disclosure-toggle strong{font:600 12px/1.35 var(--sans);letter-spacing:0} .result-disclosure-toggle small{font:400 10px/1.4 var(--sans);color:#a5bea3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums} .result-disclosure-toggle>svg{width:17px;height:17px;color:#e1be75;transition:transform .15s} .result-disclosure-toggle[aria-expanded="true"]>svg{transform:rotate(180deg)} .result-disclosure-toggle[aria-expanded="true"]{border-radius:0} .result-disclosure-body{padding:13px 0 18px;border-top:1px solid #c5b88b20} .result-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;padding:12px 0 14px;color:#b7c9b5;font-size:11px;line-height:1.5} .result-detail-meta #result-score-factor{color:#dcc590;font-variant-numeric:tabular-nums;white-space:nowrap} .result-detail-meta #result-outfit:before{content:'Uniform: ';color:#92ac99;margin:0} .results-card .noticeboard{position:relative;min-width:0;margin:0;padding:0;background:transparent;color:#b6c9b5;border:0;border-radius:0;box-shadow:none} .noticeboard h3{font:600 11px/1.5 var(--sans);margin:19px 0 3px;letter-spacing:.2px;color:#bdc6ae} .noticeboard-best{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px 12px;padding:12px 0;border-top:1px solid #bfbea329;border-bottom:1px solid #bfbea329} .noticeboard-best>span{font-size:8px;font-weight:650;letter-spacing:.7px;line-height:1.5;white-space:nowrap;color:#b8b493} .noticeboard-best strong{font:28px/1 var(--serif);font-weight:400;letter-spacing:-.5px;color:#ead4a3;white-space:nowrap;font-variant-numeric:tabular-nums} .score-history{padding:0;margin:4px 0 0;list-style:none} .history-row{display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #b3bd9a1a} .history-row:last-child{border-bottom:0} .history-position{font:13px/1 var(--serif);color:#849e89;font-variant-numeric:tabular-nums} .history-label{min-width:0;font-size:10px;color:#8fae98;line-height:1.5} .history-label strong{display:block;color:#d0dcc3;font-size:11px;font-weight:600;margin-bottom:2px} .history-score{font:22px/1 var(--serif);font-weight:400;color:#ddcda2;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums} .history-empty{font:italic 14px/1.6 var(--serif);padding:12px 0;color:#abb89d} .history-note{font-size:10px;line-height:1.6;color:#8ca892;margin-top:10px} .result-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1px 10px;padding:8px 27px;border-top:1px solid #c6bc8f3d;border-radius:0 0 18px 18px;background:#041f1944;font-size:10px;line-height:1.5;color:#bac7af} .result-footer a{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:8px 0;color:#e5c68b;font-size:11px;line-height:1.4;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d6b56c66} .result-footer a:hover{color:#fae4b6;text-decoration:underline;text-underline-offset:4px} .result-footer a>span:last-child{font-size:17px;line-height:1} @media(min-width:840px){ .results-screen{padding:calc(28px + var(--safe-top)) calc(28px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(28px + var(--safe-left))} .results-card{max-width:930px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} .results-main{padding:36px 36px 20px} .results-card .results-main h2{font-size:47px} .result-score-row{margin-top:25px} .result-score-row strong{font-size:78px} .result-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .result-actions .button{padding-inline:12px;gap:7px} .result-actions .button svg{position:static;width:16px;height:16px} .results-extras{padding:34px 29px 28px;align-self:stretch;border-left:1px solid #c6bc8f38;background:radial-gradient(ellipse at 50% 35%,#b5b16b08,transparent 65%),#041e1929;border-radius:0 18px 0 0;justify-content:center} .result-footer{padding-inline:36px} .results-extras .result-locker-summary{margin-bottom:20px} } @media(max-width:410px){ .results-screen{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left))} .results-main{padding:23px 21px 7px} .results-card .results-main h2{font-size:37px;letter-spacing:-1px} .result-score-row{margin-top:16px} .result-score-row strong{font-size:clamp(45px,15.4vw,63px);letter-spacing:-1.5px} .result-stats{margin-top:14px;padding:11px 0;gap:7px} .result-stats strong{font-size:24px} .result-stats>div+div{padding-left:7px} .result-actions{margin-top:14px} .result-actions .button{font-size:14px;min-height:47px;padding-block:11px} .result-sharing .button{font-size:11px;gap:6px} .results-extras{padding:0 21px 14px} .result-disclosure-toggle{min-height:55px} .result-disclosure-toggle strong{font-size:12px} .result-footer{padding:7px 21px} .history-score{font-size:21px} } @media(max-width:350px){ .results-main{padding:20px 17px 6px} .results-main .eyebrow{font-size:7px;letter-spacing:1.2px;gap:7px} .results-card .results-main h2{font-size:33px} .result-description{font-size:11px} .result-score-row strong{font-size:46px} .new-best{font-size:7px;letter-spacing:.6px} .result-actions .button{font-size:13px} .result-stats strong{font-size:22px} .result-stats span{font-size:9px} .results-extras{padding-inline:17px} .result-sharing .button{font-size:10px} .result-footer{padding-inline:17px;font-size:9px} .result-footer a{font-size:10px} .history-row{gap:6px;grid-template-columns:15px minmax(0,1fr) auto} .history-score{font-size:19px} } /* The Midnight Workshop: original artwork, clear choices and one main action. */ .menu-screen{display:flex;align-items:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));background:radial-gradient(ellipse at 50% 0,#234536 0,#061e1b 70%);scrollbar-width:thin;scrollbar-color:#6f7756 transparent;scroll-padding-block:16px} .menu-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px;width:100%;max-width:540px;min-height:calc(100svh - 24px - var(--safe-top) - var(--safe-bottom));margin:auto;padding:17px;border:1px solid #cba75d70;border-radius:19px;background:#08251f;box-shadow:inset 0 0 0 3px #e2b86b09,0 20px 65px #0005} .masthead{position:relative;z-index:2;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;background:transparent} .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:0} .brand-monogram{position:relative;display:block;width:38px;height:37px;flex:none;font:29px/1 var(--serif);letter-spacing:-4px;color:var(--gold-light)} .brand-monogram>span{position:absolute;left:11px;top:10px} .brand-wordmark{padding-left:10px;border-left:1px solid #d5b57670;font-size:9px;font-weight:750;line-height:1.5;letter-spacing:1.7px;white-space:nowrap} .brand-wordmark>span{display:block;font-size:7px;font-weight:600;letter-spacing:1.5px;margin-top:4px;color:#d2b57c} .quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-width:44px;min-height:44px;padding:10px;border:1px solid #d7b9745c;border-radius:9px;background:#06241dc9;color:#efd39b;font-size:12px;line-height:1.4;transition:background .15s,border-color .15s} .quiet-button:hover{background:#254535;border-color:#e7c888} .quiet-button svg{width:19px;height:19px} #menu-sound [data-sound-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .menu-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'scene' 'controls';gap:14px;min-width:0} .menu-intro{position:relative;z-index:2;grid-area:intro;min-width:0;background:transparent} .menu-intro .menu-title{font:600 clamp(39px,10.8vw,58px)/.99 var(--serif);letter-spacing:-1.8px;margin:0;color:#fff2d7;text-shadow:0 2px 20px #031d1766} .menu-title>span{white-space:nowrap} .menu-title i{font-style:normal;font-weight:400;color:var(--gold-light);margin-right:2px} .menu-title:focus{outline:none} .menu-premise{font-size:13px;line-height:1.55;letter-spacing:0;color:#e0dfcc;margin-top:11px} .menu-premise strong{font-weight:550;color:#f2d7a2} .menu-scene{position:relative;z-index:0;grid-area:scene;min-width:0;margin:0 -17px;align-self:center;overflow:hidden} .menu-scene-window{position:relative;width:100%;height:clamp(140px,23svh,240px);overflow:hidden;background:#11342a;pointer-events:none} .menu-art,.menu-art img{display:block;width:100%;height:100%} .menu-art img{object-fit:cover;object-position:50% 55%} .menu-scene-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#08251f 0,transparent 16%,transparent 80%,#08251f 100%)} .menu-controls{position:relative;z-index:2;grid-area:controls;min-width:0;display:grid;gap:10px;background:transparent} .menu-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;min-width:0;border:1px solid #c6b57d58;border-radius:8px;background:#07231ed9;box-shadow:inset 0 1px 0 #f5d89b06} .menu-selection-copy{min-width:0} .menu-selection-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .menu-current-choice{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;min-width:0} .menu-current-choice>strong{font:600 18px/1.25 var(--serif);color:#f7ead2;letter-spacing:-.25px} .menu-current-choice>span{font:500 11px/1.4 var(--sans);color:#d8c699;padding:0;border:0;background:none} .menu-current-choice>span:before{content:'·';margin-right:7px;color:#bda367} #menu-scene-caption{font-size:10px;line-height:1.5;color:#b6bea7;margin-top:4px;text-wrap:pretty} .menu-settings-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;min-width:62px;padding:9px 0 9px 10px;border:0;border-left:1px solid #d8bc7e45;border-radius:0;background:transparent;color:#eed091;font-size:12px;line-height:1.4;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d9bd7877} .menu-settings-toggle svg{width:13px;height:13px;transition:transform .15s} .menu-settings-toggle:hover{color:#ffebc3;background:#d5b7790c} .menu-settings-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .menu-settings-panel{display:grid;gap:11px;padding:12px;border:1px solid #c2b78d40;border-radius:8px;background:#0c2b22f5} .menu-settings-panel .mode-picker{border:0;background:#061e1bb3} .menu-settings-panel .difficulty-choice{gap:7px} .menu-settings-panel .difficulty-choice>label{font-size:11px} .menu-settings-panel .difficulty-summary{font-size:10px} .mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0;padding:3px;border:1px solid #c9bd9340;border-radius:8px;background:#0b2b22;width:100%;max-width:none} .mode-option{min-width:0;min-height:44px;padding:10px 8px;text-align:center;border:1px solid transparent;border-radius:5px;background:transparent;color:#bdcbb7;font:550 13px/1.4 var(--sans);transition:background .15s,color .15s;box-shadow:none} .mode-option:hover{background:#244632;color:#f4e5c3} .mode-option.is-selected{background:#36523a;border-color:#d8c58d55;color:#ffe2a2;font-weight:700;box-shadow:inset 0 1px 0 #fff1} .menu-actions{display:block;margin:0} .menu-actions .start-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:0;max-width:none;min-height:52px;margin:0;padding:13px 16px;border-radius:7px;font-size:15px;line-height:1.4;font-weight:750;letter-spacing:0} .menu-actions .start-button svg{width:21px;height:21px} .menu-support{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;min-width:0} .menu-support .button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:0;padding:9px 3px;border:1px solid transparent;border-radius:5px;font-size:12px;line-height:1.4;font-weight:550;color:#d5ddc7;background:transparent;box-shadow:none;transform:none} .menu-support .button:hover{background:#1a3e2dab;color:#ffe2aa;border-color:#c2b58240} .menu-support .button+.button:before{content:'';position:absolute;left:-2px;top:16px;height:12px;border-left:1px solid #c6b27d3d} .menu-support .button svg{width:16px;height:16px;color:#cbb782} .menu-support .button>span{min-width:0} .help-ring{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;border:1px solid #c9bc9188;border-radius:50%;font-size:11px;line-height:1;font-weight:500;color:#c9bc91} .menu-footer{position:relative;z-index:2;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding:10px 0 0;border-top:1px solid #d9c4963b;background:transparent;font-size:10px;line-height:1.5;color:#b3c2aa} .menu-footer-note{margin-left:auto;font:italic 12px/1.5 var(--serif);color:#c9ccb7} .menu-best{display:inline-flex;min-width:0;align-items:baseline;gap:8px;line-height:1.5;flex-wrap:wrap} .menu-best>span{font-size:8px;font-weight:650;letter-spacing:.7px;color:#a8b89f} .menu-best strong{font:650 12px/1.4 var(--sans);color:#e3c88e;white-space:nowrap;font-variant-numeric:tabular-nums} /* Detailed rules are available on demand; the risk summary remains visible. */ .difficulty-picker{min-width:0;padding:0;border:0;background:transparent} .difficulty-choice{display:flex;align-items:center;gap:10px;min-width:0} .difficulty-choice>label{flex:none;font-size:12px;line-height:1.4;color:#bed0bd;font-weight:500} .difficulty-select-wrap{position:relative;display:block;flex:1;min-width:0} .difficulty-select-wrap select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;min-height:44px;padding:9px 29px 9px 12px;border:1px solid #d7c38b38;border-radius:7px;background:#15332c;color:#f3dfb7;font:650 14px/1.4 var(--sans);cursor:pointer} .difficulty-select-wrap svg{position:absolute;right:10px;top:calc(50% - 8px);width:16px;height:16px;pointer-events:none;color:#d8c38e} .difficulty-select-wrap select:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px} .difficulty-select-wrap option{background:#17362f;color:#f1e6cb} .difficulty-info-toggle{display:grid;place-items:center;flex:none;width:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#bac9b7} .difficulty-info-toggle>span{display:grid;place-items:center;width:18px;height:18px;border:1px solid #c8bb8f88;border-radius:50%;font:600 12px/1 var(--serif)} .difficulty-info-toggle:hover,.difficulty-info-toggle[aria-expanded="true"]{color:#f3dfb7;background:#19362f} .difficulty-summary{font-size:11px;line-height:1.5;color:#a8beac;margin-top:4px;font-variant-numeric:tabular-nums} .difficulty-details{margin-top:10px;padding:12px 14px;border-left:2px solid #b8a57266;border-radius:0 7px 7px 0;background:#132d28} .difficulty-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c6bb97;font-size:8px;font-weight:650;line-height:1.5;letter-spacing:1.1px} .difficulty-score{flex:none;color:#e6c98c;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums} .difficulty-explanation{margin-top:7px;min-width:0} .difficulty-stats{font-size:11px;line-height:1.6;color:#e0ddc5;font-variant-numeric:tabular-nums} .difficulty-description{font-size:12px;line-height:1.55;color:#aec3b3;margin-top:4px} .difficulty-picker[data-difficulty="nightmare"] .difficulty-select-wrap select{border-color:#c996b960;color:#ead0e6} .difficulty-picker[data-difficulty="nightmare"] .difficulty-summary{color:#dbb5d0} .difficulty-picker[data-difficulty="insanity"] .difficulty-select-wrap select{border-color:#df9c7b88;background:#3e2c25;color:#ffe0c1} .difficulty-picker[data-difficulty="insanity"] .difficulty-summary{color:#e8b99e} .difficulty-picker[data-difficulty="insanity"] .difficulty-details{border-color:#d4987588} .menu-legacy-best{font-size:10px;line-height:1.5;color:#9bb5a5;margin-top:9px;padding-top:8px;border-top:1px solid #b9b18026} #hud .hud-difficulty{display:inline-flex;align-items:center;flex:none;min-width:0;padding:1px 4px;border:1px solid #bbbc8d3b;border-radius:3px;background:#b5a76b13;color:#ddd3ac;font:650 6px/8px var(--sans);letter-spacing:.35px;text-transform:uppercase;white-space:nowrap} #hud .hud-difficulty[data-difficulty="easy"]{color:#b7dfbb;border-color:#9bc29d3d} #hud .hud-difficulty[data-difficulty="nightmare"]{color:#e5badb;border-color:#bd8fb24a} #hud .hud-difficulty[data-difficulty="insanity"]{color:#ffba98;border-color:#d78a6855;background:#b667341c} .pause-difficulty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px 0 19px;padding:10px 0;border-top:1px solid #bfbea52a;border-bottom:1px solid #bfbea52a;font-size:11px;line-height:1.5} .pause-difficulty>strong{color:#edd4a1;font-weight:650} .pause-difficulty>span{font-size:10px;color:#9eb7a7;text-align:right} .result-context{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:12px;color:#a9bfae;font-size:10px;line-height:1.5} .result-context .difficulty-badge{font-size:9px;padding:3px 7px} .difficulty-badge{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid #d5bf8b47;border-radius:5px;color:#f1d7a1;background:#ceb5780c;font-size:11px;font-weight:650} .difficulty-badge[data-difficulty="easy"]{color:#c2e4bb;border-color:#b3d0aa4a} .difficulty-badge[data-difficulty="nightmare"]{color:#e7bfdf;border-color:#c4a0bb50} .difficulty-badge[data-difficulty="insanity"]{color:#ffc8a5;border-color:#d39a6d70;background:#c2783917} .result-context #result-score-factor{color:#dac492;white-space:nowrap;font-variant-numeric:tabular-nums} .history-outcome,.history-run-kind{display:block} .history-run-kind{font-size:9px;line-height:1.5;color:#8ca48c;margin-top:2px} .history-legacy-best{font-size:10px;line-height:1.6;color:#a7b597;margin-top:9px;padding-top:9px;border-top:1px solid #abb78f26} .help-difficulty{margin-top:19px;padding:14px;border:1px solid #c6b57d3d;border-radius:7px;background:#d2b56708} .help-difficulty h3{font:400 20px/1.25 var(--serif);color:#ecd5a5;margin:0 0 9px} .help-difficulty p,.help-expansion p{font-size:11px;line-height:1.7;color:#b8ccba;margin:0} .help-difficulty p+p{margin-top:9px} .help-difficulty b{font-weight:650;color:#e0d8b9} .help-expansion{margin-top:19px} .help-expansion>strong{display:block;font-size:12px;line-height:1.5;color:#dfd8b8;margin-bottom:7px} @media(max-width:350px){ #hud .mission-star{display:none} #hud .hud-difficulty{font-size:5.5px;letter-spacing:.15px;padding-inline:3px} .pause-difficulty{flex-wrap:wrap;gap:4px 12px} .result-context{gap:7px 10px;font-size:10px} .help-difficulty{padding:12px} .help-difficulty h3{font-size:19px} .help-difficulty p,.help-expansion p{font-size:10px} } body[data-screen="menu"] .scene-vignette{opacity:0} body[data-screen="menu"] #game-canvas{visibility:hidden} @media(min-width:600px) and (min-height:541px) and (max-width:899px){ .menu-screen{padding:calc(22px + var(--safe-top)) 24px calc(22px + var(--safe-bottom))} .menu-shell{padding:24px;gap:20px;min-height:calc(100svh - 44px - var(--safe-top) - var(--safe-bottom))} .menu-intro .menu-title{font-size:59px} .menu-scene{margin-inline:-24px} .menu-scene-window{height:clamp(190px,27svh,300px)} .menu-premise{font-size:15px} } @media(min-width:900px){ .menu-screen{padding:calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left))} .menu-shell{max-width:1440px;min-height:calc(100svh - 48px - var(--safe-top) - var(--safe-bottom));padding:clamp(28px,3.2vw,52px);gap:30px;overflow:hidden;border-radius:22px} .brand{gap:13px} .brand-monogram{width:43px;height:44px;font-size:34px} .brand-wordmark{font:700 12px/1.4 var(--sans);letter-spacing:2px;padding-left:15px} .brand-wordmark>span{font-size:8px;letter-spacing:2px;margin-top:6px} .menu-layout{flex:1;grid-template-columns:minmax(0,47%) minmax(0,1fr);grid-template-areas:'intro scene' 'controls scene';column-gap:0;row-gap:27px;align-content:center} .menu-intro{align-self:end} .menu-intro .menu-title{font-size:clamp(53px,5.9vw,86px);letter-spacing:-2.4px} .menu-premise{font-size:clamp(15px,1.4vw,19px);line-height:1.55;margin-top:22px;max-width:440px} .menu-scene{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;border-radius:inherit;pointer-events:none} .menu-scene-window{height:100%;background:#08251f} .menu-art img{object-position:65% 50%} .menu-scene-window:after{background:linear-gradient(90deg,#06251ff5 0,#06251fed 25%,#06251fb8 38%,#06251f26 58%,transparent 75%),linear-gradient(180deg,#06251f4d 0,transparent 30%,transparent 76%,#06251f7a)} .menu-controls{align-self:start;max-width:440px;gap:12px} .menu-selection{padding:11px 14px} .menu-current-choice>strong{font-size:21px} .menu-current-choice>span{font-size:12px} #menu-scene-caption{font-size:11px} .menu-settings-toggle{font-size:13px;min-width:73px} .mode-option{font-size:14px} .menu-actions .start-button{min-height:57px;font-size:17px;padding:16px 19px} .menu-support .button{font-size:13px} .menu-footer{width:47%;max-width:440px;font-size:11px;padding-top:13px} .menu-footer-note{font-size:13px} .menu-best>span{font-size:9px} .menu-best strong{font-size:13px} } @media(max-width:360px){ .menu-screen{padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left))} .menu-shell{padding:14px;gap:10px;min-height:calc(100svh - 16px - var(--safe-top) - var(--safe-bottom));border-radius:15px} .brand{gap:7px} .brand-monogram{font-size:26px;width:32px;height:34px} .brand-wordmark{font-size:8px;letter-spacing:1.25px;padding-left:8px} .brand-wordmark>span{font-size:6px;letter-spacing:1.25px} .menu-intro .menu-title{font-size:37px;letter-spacing:-1.5px} .menu-premise{font-size:12px;line-height:1.5;margin-top:8px} .menu-layout{gap:10px} .menu-scene{margin-inline:-14px} .menu-scene-window{height:clamp(110px,20svh,160px)} .menu-controls{gap:8px} .menu-selection{padding:7px 10px;gap:6px} #menu-scene-caption{font-size:9px} .menu-current-choice>strong{font-size:16px} .menu-current-choice>span{font-size:10px} .menu-settings-toggle{min-width:57px;font-size:11px;padding-left:8px} .mode-option{font-size:12px;padding-inline:6px} .difficulty-choice{gap:8px} .difficulty-choice>label{font-size:11px} .menu-actions .start-button{min-height:48px;padding:11px 13px;font-size:14px;gap:10px} .menu-support .button{font-size:11px;gap:0;padding-inline:1px} .menu-footer{font-size:9px;gap:6px;padding-top:8px} .menu-footer-note{font-size:11px} } @media(min-width:600px) and (max-height:540px) and (orientation:landscape){ .menu-screen{padding:calc(9px + var(--safe-top)) calc(14px + var(--safe-right)) calc(9px + var(--safe-bottom)) calc(14px + var(--safe-left))} .menu-shell{max-width:1440px;min-height:calc(100svh - 18px - var(--safe-top) - var(--safe-bottom));padding:14px 18px;gap:11px;overflow:hidden} .masthead{min-height:44px} .menu-layout{flex:1;grid-template-columns:minmax(0,1fr) minmax(260px,1fr);grid-template-areas:'intro controls';gap:10px 24px;align-content:center;align-items:center} .menu-intro .menu-title{font-size:39px;line-height:.99;letter-spacing:-1.3px} .menu-premise{font-size:12px;line-height:1.5;margin-top:10px} .menu-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;margin:0;border-radius:inherit;pointer-events:none} .menu-scene-window{height:100%} .menu-art img{object-position:50% 49%;opacity:.3} .menu-scene-window:after{background:linear-gradient(90deg,#08251fe8,#08251f88 48%,#08251fc9)} .menu-controls{gap:7px;align-self:center;max-width:none} .menu-selection{padding:6px 11px} .menu-current-choice>strong{font-size:18px} #menu-scene-caption{font-size:9px} .menu-actions .start-button{min-height:48px;padding:10px 14px;font-size:14px} .menu-support .button{font-size:12px;min-height:44px} .menu-footer{width:100%;max-width:none;font-size:9px;padding-top:7px} .menu-footer-note{font-size:11px} } /* Honest loading and recoverable errors use the same workshop palette. */ .boot-status{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(22px + var(--safe-top)) calc(20px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(20px + var(--safe-left));overflow-y:auto;text-align:center;background:radial-gradient(ellipse at 50% 25%,#193b34,#08191d 72%)} .boot-card{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:390px;flex:none;margin:auto 0;padding:29px 25px;border:1px solid #d5b67b43;border-radius:17px;background:linear-gradient(145deg,#1e3d3455,#0d252980);box-shadow:0 20px 70px #0004} .boot-mark{position:relative;width:48px;height:44px;font:35px/1 var(--serif);color:var(--gold);text-align:left;letter-spacing:-5px} .boot-mark>span{position:absolute;left:13px;top:10px} .boot-card .eyebrow{font-size:9px;line-height:1.5;letter-spacing:1.5px} .boot-title{font:37px/1.03 var(--serif);font-weight:400;letter-spacing:-1px;color:var(--cream)} .boot-title i{font-weight:400;color:var(--gold-light)} .boot-status #boot-message{max-width:100%;font-size:14px;line-height:1.55;color:#d8e1d2;margin-top:3px} .boot-loader{position:relative;display:block;overflow:hidden;width:180px;height:3px;border-radius:3px;background:#8ea88922;margin:1px 0} .boot-loader:after{content:'';position:absolute;inset:0 auto 0 0;width:30%;height:100%;border-radius:3px;background:linear-gradient(90deg,#b99350,var(--gold-light));animation:workshop-loading 1.6s ease-in-out infinite} .boot-note{max-width:285px;font-size:12px;line-height:1.6;color:#a6bdac} .boot-state-icon{display:none} .boot-status .button{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;min-height:48px;margin:0;padding:12px 15px;border-radius:8px;font-size:14px;line-height:1.4} .boot-status.is-failed .boot-card{border-color:#d8b57b77} .boot-status.is-failed .boot-loader{display:none} .boot-status.is-failed .boot-state-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #dcbe8777;border-radius:50%;font:20px/1 var(--serif);color:var(--gold-light)} .boot-status.is-failed #boot-message{margin-top:-4px;color:#f4dfb6} @keyframes workshop-loading{from{transform:translateX(-110%)}to{transform:translateX(340%)}} @media(max-width:360px){.boot-card{padding:25px 20px;gap:14px}.boot-title{font-size:33px}.boot-card .eyebrow{font-size:8px;letter-spacing:1.2px}} @media(prefers-reduced-motion:reduce){.boot-loader:after{animation:none;transform:translateX(115%)}} /* v0.6: assignments live in the rail; the workshop remains unobstructed. */ body[data-screen="overtime"] #hud[hidden]{display:block!important;visibility:hidden;pointer-events:none} body.has-assignment #hud,body.has-boss-cue #hud{--rail-height:98px} #hud .status-rail{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr);column-gap:6px;row-gap:0} #hud .status-rail>*{grid-column:1;grid-row:1;min-width:0} #hud .status-rail .boss-status{grid-column:3} #hud .status-rail .hud-shield{grid-column:2;display:inline-flex;align-items:center;gap:3px;color:#bceac8;font:650 9px/12px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap} #hud .hud-shield svg{width:14px;height:14px;stroke-width:1.8} #hud .assignment-progress{flex:none;margin-left:auto;padding:1px 5px;border:1px solid #d4bc7952;border-radius:4px;color:#f4d89b;background:#e1ba6010;font:700 9px/12px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap} #hud .assignment-note,#hud .boss-note{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d5bd89;font:650 9px/11px var(--sans);letter-spacing:.35px} #hud .status-rail.has-assignment,#hud .status-rail.has-boss-cue{grid-template-rows:11px minmax(0,1fr);row-gap:1px} #hud .status-rail.has-assignment>*,#hud .status-rail.has-boss-cue>*{grid-row:2} #hud .status-rail.has-assignment .assignment-note,#hud .status-rail.has-assignment .game-toast,#hud .status-rail.has-boss-cue .boss-note,#hud .status-rail.has-boss-cue .game-toast{grid-row:1;grid-column:1/-1} #hud .status-rail.has-assignment .game-toast,#hud .status-rail.has-boss-cue .game-toast{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9.5px;line-height:11px;-webkit-line-clamp:unset} #hud .status-rail.has-assignment .mission-strip-dot{background:#9ed1e4} #hud .status-rail.has-boss-cue .mission-strip-dot{background:#f1c58d} #hud .status-rail.has-boss-cue .boss-note{color:#edc48b} #hud .status-rail.has-boss-cue .mission-strip{font-size:10px} #special-controls[data-weapon="decoy"] .special-use{border-color:#aecf8077;color:#e5efc4} .help-specials p+p{margin-top:10px} /* Match map symbols to readable labels and an optional-room briefing. */ #screen-map .map-assignment-key{display:flex;align-items:center;justify-content:center;gap:7px 14px;flex-wrap:wrap;margin:-2px 0 13px;color:#d5dfcb;font-size:10px;line-height:15px} #screen-map .map-assignment-key>span{display:inline-flex;align-items:center;gap:5px} #screen-map .map-assignment-key b{display:grid;place-items:center;width:17px;height:17px;border-radius:3px;background:#f4d68f;color:#18332e;font:750 10px/1 var(--sans)} #screen-map .map-assignment-key b[data-kind="dispatch"]{background:#9dd9ef} #screen-map .map-assignment-key b[data-kind="cage"]{background:#cdbbeb} #screen-map .map-assignment-key b[data-kind="overtime"]{background:#efb96c} #screen-map .map-assignment-key b[data-kind="conveyor"]{background:#97c7c9} #screen-map .map-assignment-key b[data-kind="decoy"]{background:#b9df83;border-radius:50%} #screen-map .map-briefing{padding:12px 14px;margin:0 0 13px;border:1px solid #a7c8bd2b;border-radius:7px;background:#a7c8bd08;text-align:left} #screen-map .map-briefing strong{display:block;color:#d8e9cd;font-size:12px;line-height:1.5;font-weight:650} #screen-map .map-briefing p{margin-top:4px;color:#b7cdbd;font-size:12px;line-height:1.55} #screen-map .map-overtime-note{padding-left:10px;margin:0 0 14px;border-left:2px solid #d4ab68;color:#e4c997;font-size:11px;line-height:1.6;overflow-wrap:anywhere} /* Overtime is a deliberate choice, with its price and reward in view. */ .overtime-screen{align-items:center;overflow-y:auto;overflow-x:hidden;scroll-padding-block:20px} .overtime-card{max-width:480px;max-height:none;overflow:visible;flex:none;margin:auto 0;padding:28px;border-radius:14px;background:radial-gradient(ellipse at 0 0,#34503d66,transparent 70%),#102a2c} .overtime-heading{display:flex;align-items:center;gap:10px} .overtime-heading .eyebrow{font-size:9px;line-height:1.6;letter-spacing:1px} .overtime-stamp{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #d7b5726b;border-radius:6px;color:#f1cb85;font:27px/1 var(--serif)} .overtime-card h2{margin-top:19px;font-size:40px;line-height:1.08;letter-spacing:-1px} .overtime-card h2:focus{outline:none} .overtime-card .modal-intro{font-size:14px;line-height:1.6;margin:14px 0 9px;max-width:none} .overtime-threat{font-size:12px;line-height:1.6;color:#dfb998} .overtime-reward{display:flex;align-items:center;gap:13px;padding:17px 15px;margin:20px 0 13px;border:1px solid #dfbd7770;border-radius:9px;background:#d4ae7012} .overtime-reward svg{width:26px;height:26px;color:#f0cb83} .overtime-reward>div{min-width:0} .overtime-reward span{display:block;color:#c4bd9d;font-size:8px;line-height:1.5;font-weight:650;letter-spacing:1px} .overtime-reward strong{display:block;margin-top:6px;color:#f3d69e;font-size:16px;line-height:1.4;font-weight:650;overflow-wrap:anywhere} .overtime-assurance{color:#b9cabb;font-size:12px;line-height:1.6} .overtime-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:22px} .overtime-actions .button{min-height:50px;padding:13px 16px;font-size:14px;line-height:1.45;border-radius:8px} .overtime-actions .button-secondary{justify-content:center;color:#e7e4d4} .overtime-actions .button:disabled{opacity:.65;transform:none} .overtime-footnote{margin-top:17px;text-align:center;color:#90aa98;font-size:10px;line-height:1.6} .help-assignments{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)} .help-assignments>h3{font:400 23px/1.2 var(--serif);color:#ecd39b} .help-assignments dl{margin:13px 0} .help-assignments dl>div+div{margin-top:11px} .help-assignments dt{font-size:12px;line-height:1.5;font-weight:650;color:#e0e5d5} .help-assignments dd{margin:3px 0 0;color:#b9cbbb;font-size:12px;line-height:1.6} .help-assignments>p{color:#a9c2af;font-size:12px;line-height:1.6} .help-assignments b{color:#dfd9b9;font-weight:650} @media(max-width:760px){ body.has-assignment #hud,body.has-boss-cue #hud{--rail-height:104px} .overtime-card{padding:24px} .overtime-card h2{font-size:35px} } @media(max-width:350px){ .overtime-card{padding:21px 19px} .overtime-card h2{font-size:32px} .overtime-heading .eyebrow{font-size:8px;letter-spacing:.6px} .overtime-card .modal-intro{font-size:13px} .overtime-reward{gap:10px;padding:14px 12px} .overtime-reward strong{font-size:15px} #screen-map .map-assignment-key{gap:7px 11px;font-size:9px} } @media(max-height:540px) and (orientation:landscape){ body.has-assignment #hud,body.has-boss-cue #hud{--rail-height:92px} .overtime-card{max-width:640px;padding:22px 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,1fr);column-gap:25px} .overtime-heading,.overtime-card h2,.overtime-card .modal-intro,.overtime-threat{grid-column:1} .overtime-card h2{font-size:33px;margin-top:14px} .overtime-card .modal-intro{margin-top:11px;font-size:12px} .overtime-heading .eyebrow{font-size:8px;letter-spacing:.7px} .overtime-reward{grid-column:2;grid-row:1/4;margin:0 0 12px;align-self:start;padding:14px 12px} .overtime-reward strong{font-size:15px} .overtime-assurance{grid-column:2;grid-row:4;font-size:11px} .overtime-actions{grid-column:2;grid-row:5/7;margin-top:12px;gap:8px} .overtime-actions .button{min-height:46px;padding:10px 13px;font-size:12px} .overtime-footnote{grid-column:1;grid-row:5;align-self:end;text-align:left;margin-top:15px} } /* Global scores live in the menu and summary, never over the playfield. */ .help-global{padding:17px 0 20px;border-top:1px solid var(--line);margin-top:20px} .help-global h3{font-size:13px;line-height:1.45;color:var(--gold-light);margin-bottom:7px} .help-global p{font-size:12px;line-height:1.7;color:#b8c9bc} .results-card .score-submission[data-status="submitted"] .result-disclosure-toggle small{color:#baddb1} .results-card .score-submission[data-status="error"] .result-disclosure-toggle small{color:#edb7a3} .submission-heading{display:flex;align-items:flex-start;gap:10px} .submission-star{font-size:25px;line-height:1.1;color:var(--gold-light)} .submission-heading>div{min-width:0} .submission-heading h3{font:23px/1.2 var(--serif);font-weight:400;letter-spacing:-.35px;color:#f0e5cb} .submission-heading p{font-size:10px;line-height:1.5;color:#b9cbb6;margin-top:6px} .submission-message{font-size:12px;line-height:1.65;color:#c1d2c0;margin-top:12px;overflow-wrap:anywhere} .score-submission[data-status="error"] .submission-message{color:#f2bcb1} .score-submission[data-status="submitted"] .submission-star,.score-submission[data-status="submitted"] .submission-message{color:#bee4bd} .score-submission[data-status="unavailable"] .submission-message{color:#b2c3b8} .score-submit-form{margin-top:15px} .score-submit-form>label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;font-size:11px;line-height:1.5;color:#e1e6d4;font-weight:650;margin-bottom:7px} .score-submit-form>label>span{font-size:10px;font-weight:400;color:#9fb6a6} .submission-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .submission-fields input{display:block;width:100%;min-width:0;min-height:48px;border:1px solid #adbd9c55;border-radius:7px;background:#081f21;color:#f4edda;padding:11px 12px;font-size:16px;line-height:1.4;box-shadow:inset 0 1px 6px #0002} .submission-fields input::placeholder{color:#8ba294;font-size:13px} .submission-fields input[aria-invalid="true"]{border-color:#e3a093} .submission-fields input:disabled{opacity:.7} .submission-fields .button{min-height:48px;gap:8px;padding:11px 13px;font-size:12px;line-height:1.4;border-radius:7px;white-space:nowrap} .submission-fields .button svg{width:18px;height:18px} .submission-fields .button:disabled{opacity:.65;transform:none} .submission-public-note{font-size:10px;line-height:1.65;color:#a7bda9;margin-top:9px} .submission-view.button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;margin-top:14px;padding:11px 12px;border-radius:7px;font-size:12px;line-height:1.4;border-color:#c0b17b44;background:#0b252a55;text-align:left} .submission-view svg{width:18px;height:18px} .leaderboard-screen{align-items:flex-start;padding:calc(24px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));overflow-x:hidden;overflow-y:auto;scroll-padding-block:20px;background:#05191de8} .leaderboard-card{flex:none;max-width:760px;max-height:none;margin:auto 0;padding:0;overflow:visible;border-radius:15px;background:radial-gradient(ellipse at 8% 0,#31524165,transparent 60%),#102c2c} .leaderboard-header{padding:26px 30px 23px;border-bottom:1px solid #d9bd7a2d} .leaderboard-topline{display:flex;align-items:center;justify-content:space-between;gap:16px} .leaderboard-topline .eyebrow{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.35px;color:#d6c087;line-height:1.6} .leaderboard-topline .eyebrow>span{font-size:21px;line-height:1} .leaderboard-back.button{flex:none;min-height:44px;gap:7px;padding:9px 12px;font-size:12px;border-radius:8px;border-color:#d9bd7a35;background:#09232955} .leaderboard-back svg{width:18px;height:18px} .leaderboard-card h2{font-size:49px;line-height:1.04;letter-spacing:-1.3px;margin-top:20px} #leaderboard-title:focus{outline:none} .leaderboard-intro{font-size:13px;line-height:1.6;color:#afc6b7;margin-top:14px} .leaderboard-content{padding:23px 30px 25px;min-width:0} .leaderboard-filters{display:grid;grid-template-columns:minmax(0,1fr) 158px;align-items:end;gap:15px;margin-bottom:25px} .leaderboard-mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #bdba8f35;border-radius:10px;background:#071e23b3;min-width:0} .leaderboard-mode-picker button{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:3px;min-width:0;min-height:51px;padding:10px 12px;color:#c0d0c1;background:transparent;border:1px solid transparent;border-radius:7px;transition:background .15s} .leaderboard-mode-picker button strong{font-size:12px;line-height:1.35;font-weight:650;text-align:left} .leaderboard-mode-picker button>span{font-size:10px;line-height:1.4;color:#9ab3a1} .leaderboard-mode-picker button.is-selected{background:linear-gradient(130deg,#eed399,#dbb876);color:#17382d;border-color:#f3dfae55;box-shadow:0 2px 10px #0002} .leaderboard-mode-picker button.is-selected>span{color:#4f603e} .leaderboard-mode-picker button:not(.is-selected):hover{background:#27453b} .leaderboard-difficulty-field{min-width:0} .leaderboard-difficulty-field>label{display:block;font-size:10px;line-height:1.4;font-weight:650;color:#bdcfbd;letter-spacing:.3px;margin-bottom:7px} .leaderboard-difficulty-field>span{display:block;position:relative} .leaderboard-difficulty-field select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:47px;padding:11px 35px 11px 13px;border:1px solid #d9bd7a55;border-radius:8px;background:#12342f;color:var(--cream);font-size:14px;line-height:1.4;cursor:pointer} .leaderboard-difficulty-field svg{position:absolute;right:11px;top:calc(50% - 8px);width:16px;height:16px;color:var(--gold-light);pointer-events:none} .leaderboard-board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding-bottom:17px;border-bottom:1px solid #d9bd7a35} .leaderboard-board-heading>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;min-width:0} .leaderboard-board-heading p{font-size:11px;line-height:1.5;color:#b4c8b7} .leaderboard-refresh.button{flex:none;min-height:44px;padding:9px 11px;gap:6px;font-size:11px;line-height:1.4;border-radius:7px;border-color:#d9bd7a25;background:#06212555} .leaderboard-refresh svg{width:17px;height:17px} .leaderboard-refresh:disabled{opacity:.45;transform:none} .leaderboard-live{min-height:34px;padding:13px 1px 7px;font-size:10px;line-height:1.6;color:#a2bbab} .leaderboard-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 18px 37px;min-height:230px;border:1px solid #d9bd7a25;border-radius:9px;background:#09242944;margin-top:10px} .leaderboard-state-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #d9bd7a4d;border-radius:50%;color:var(--gold-light);background:#d9bd7a0b;font:29px/1 var(--serif);margin-bottom:17px} .leaderboard-state h3{font:27px/1.15 var(--serif);font-weight:400;color:#e9dfc5;letter-spacing:-.4px;max-width:350px} .leaderboard-state p{max-width:360px;font-size:12px;line-height:1.7;color:#acc4b3;margin-top:11px;overflow-wrap:anywhere} .leaderboard-state .button{min-height:46px;font-size:12px;gap:9px;margin-top:20px;border-radius:7px} .leaderboard-state .button svg{width:18px;height:18px} .leaderboard-state[data-status="loading"] .leaderboard-state-symbol{animation:leaderboard-pulse 1.5s ease-in-out infinite} .leaderboard-state[data-status="error"] .leaderboard-state-symbol{color:#efc6ad;border-color:#efc6ad44} .leaderboard-columns,.leaderboard-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:13px} .leaderboard-columns{padding:14px 12px 10px;font-size:8px;font-weight:650;line-height:1.5;letter-spacing:1.2px;color:#91af9e} .leaderboard-columns>span:last-child{text-align:right} .leaderboard-entries{padding:0;margin:0;list-style:none} .leaderboard-row{padding:17px 12px;border-top:1px solid #d4d9b720;min-width:0;list-style:none} .leaderboard-row[data-rank="1"]{background:linear-gradient(110deg,#d6b76b16,#d6b76b05);border-color:#d6b76b44;border-radius:8px 8px 0 0} .leaderboard-rank{font:23px/1 var(--serif);font-weight:400;color:#9fbaaa;letter-spacing:-.5px;font-variant-numeric:tabular-nums} .leaderboard-row[data-rank="1"] .leaderboard-rank{color:#eacb88} .leaderboard-row[data-rank="2"] .leaderboard-rank{color:#cad6d4} .leaderboard-row[data-rank="3"] .leaderboard-rank{color:#d1b497} .leaderboard-identity{min-width:0} .leaderboard-name-line{display:flex;align-items:center;gap:7px;min-width:0} .leaderboard-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.5;font-weight:650;color:#e3e9d7;unicode-bidi:plaintext} .leaderboard-you{flex:none;padding:3px 5px;border-radius:4px;font-size:7px;font-weight:750;letter-spacing:.6px;line-height:1.1;color:#bde0b8;background:#5b87524d} .leaderboard-detail{display:block;font-size:10px;line-height:1.5;color:#9fb9a9;margin-top:5px;font-variant-numeric:tabular-nums} .leaderboard-score{font:29px/1.1 var(--serif);font-weight:400;color:#f0d7a5;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right} .leaderboard-row.is-you{background:#a6d39e12;border-top-color:#b7d5a84a;box-shadow:inset 3px 0 #a6cd89} .leaderboard-own{margin-top:16px;border:1px solid #a6cd8955;background:#84a8700d;border-radius:8px;padding:13px 0 0} .leaderboard-own>.eyebrow{padding:0 12px 5px;font-size:8px;line-height:1.5;letter-spacing:1px;color:#bdd3a5} .leaderboard-own-entry{list-style:none;margin:0;padding:0} .leaderboard-own .leaderboard-row{border:0;background:transparent;box-shadow:none;padding-top:12px} .leaderboard-footnote{font-size:10px;line-height:1.75;color:#91ad9b;margin-top:21px;padding-top:17px;border-top:1px solid #d9bd7a25} .leaderboard-footer{display:flex;align-items:center;gap:11px;padding:17px 30px;border-top:1px solid #d9bd7a30;background:#06232a55;border-radius:0 0 15px 15px} .leaderboard-footer>span{font-size:24px;color:#e7ca8d} .leaderboard-footer p{font-size:11px;line-height:1.6;color:#b6cbb4} .leaderboard-footer p>span{font-size:10px;color:#8fac99} @keyframes leaderboard-pulse{50%{opacity:.5;transform:scale(.92)}} @media(max-width:560px){ .leaderboard-screen{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left))} .leaderboard-header{padding:20px 21px 22px} .leaderboard-topline{gap:10px;align-items:flex-start} .leaderboard-topline .eyebrow{font-size:8px;letter-spacing:1px;max-width:180px;min-height:44px} .leaderboard-card h2{font-size:42px;letter-spacing:-1.1px;margin-top:13px} .leaderboard-intro{font-size:12px;margin-top:13px} .leaderboard-content{padding:19px 21px 22px} .leaderboard-filters{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:19px} .leaderboard-difficulty-field{display:flex;align-items:center;justify-content:space-between;gap:16px} .leaderboard-difficulty-field>label{margin:0;font-size:11px} .leaderboard-difficulty-field>span{width:62%} .leaderboard-difficulty-field select{min-height:44px;font-size:14px} .leaderboard-mode-picker button{min-height:54px;padding:10px 12px} .leaderboard-mode-picker button strong{font-size:13px} .leaderboard-board-heading>div{display:block} .leaderboard-board-heading p{font-size:10px;margin-top:6px} .leaderboard-columns,.leaderboard-row{grid-template-columns:27px minmax(0,1fr) auto;gap:9px} .leaderboard-columns{padding:11px 8px 9px;font-size:7px;letter-spacing:.8px} .leaderboard-row{padding:15px 8px} .leaderboard-rank{font-size:20px} .leaderboard-name{font-size:12px} .leaderboard-detail{font-size:9px} .leaderboard-score{font-size:25px;letter-spacing:-.65px} .leaderboard-state{padding:27px 15px 30px} .leaderboard-state h3{font-size:25px} .leaderboard-state p{font-size:12px} .leaderboard-footer{padding:17px 21px} } @media(max-width:410px){ .submission-heading h3{font-size:22px} .submission-fields{grid-template-columns:minmax(0,1fr)} .submission-fields .button{font-size:13px;justify-content:space-between;padding:12px 14px} .submission-view.button{font-size:12px} .leaderboard-header{padding:17px 17px 20px} .leaderboard-content{padding:17px 17px 21px} .leaderboard-card h2{font-size:39px} .leaderboard-topline .eyebrow{font-size:7px;letter-spacing:.8px;max-width:155px} .leaderboard-back.button{padding:9px 10px;gap:5px;font-size:11px} .leaderboard-footer{padding:16px 17px} } @media(max-width:350px){ .leaderboard-screen{padding:calc(9px + var(--safe-top)) calc(9px + var(--safe-right)) calc(9px + var(--safe-bottom)) calc(9px + var(--safe-left))} .leaderboard-header{padding:16px 14px 19px} .leaderboard-content{padding:16px 14px 20px} .leaderboard-card h2{font-size:36px} .leaderboard-intro{font-size:11px} .leaderboard-mode-picker button{padding:9px 10px} .leaderboard-mode-picker button strong{font-size:12px} .leaderboard-columns,.leaderboard-row{grid-template-columns:23px minmax(0,1fr) auto;gap:7px} .leaderboard-columns{padding-inline:6px} .leaderboard-row{padding:14px 6px} .leaderboard-name{font-size:11px} .leaderboard-score{font-size:23px} .leaderboard-detail{font-size:8px} .leaderboard-name-line{gap:4px} .leaderboard-you{font-size:6px;padding:3px 4px} .leaderboard-refresh.button{padding:9px 8px;font-size:10px} .leaderboard-footer{padding:15px 14px} } @media(min-width:600px) and (max-height:540px) and (orientation:landscape){ .leaderboard-screen{padding-block:calc(12px + var(--safe-top)) calc(12px + var(--safe-bottom))} .leaderboard-header{padding:19px 25px} .leaderboard-card h2{font-size:39px;margin-top:11px} .leaderboard-card h2 br{display:none} .leaderboard-card h2 i:before{content:' '} .leaderboard-intro{font-size:12px;margin-top:10px} .leaderboard-content{padding:19px 25px 22px} } .reduce-motion .leaderboard-state-symbol{animation:none!important} @media(prefers-reduced-motion:reduce){.leaderboard-state-symbol{animation:none!important}} /* Short viewports put the scores within the first view; controls remain 44px. */ @media(max-width:410px) and (max-height:650px),(min-width:600px) and (max-height:400px) and (orientation:landscape){ .leaderboard-header{position:relative;padding:14px 16px 16px} .leaderboard-topline{position:absolute;right:12px;top:12px;display:block} .leaderboard-topline .eyebrow{display:none} .leaderboard-back.button{width:44px;min-height:44px;padding:12px;gap:0} .leaderboard-back>span,.leaderboard-refresh>span,.leaderboard-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} .leaderboard-card h2{font-size:34px;line-height:1.04;letter-spacing:-.9px;margin:0;padding-right:40px} .leaderboard-intro{font-size:11px;line-height:1.45;margin-top:8px} .leaderboard-content{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 9px;padding:14px 16px 20px} .leaderboard-filters,.leaderboard-board-heading,.leaderboard-board-heading>div{display:contents} .leaderboard-mode-picker{grid-column:1/-1;grid-row:1;margin-bottom:10px} .leaderboard-mode-picker button{min-height:44px;padding:7px 10px;gap:2px} .leaderboard-mode-picker button strong{font-size:12px;line-height:1.35} .leaderboard-mode-picker button>span{font-size:9px;line-height:1.4} .leaderboard-difficulty-field{grid-column:1;grid-row:2;display:flex;align-items:center;gap:10px} .leaderboard-difficulty-field>label{font-size:10px;margin:0} .leaderboard-difficulty-field>span{flex:1;width:auto;min-width:0} .leaderboard-difficulty-field select{min-height:44px;padding:10px 31px 10px 11px;font-size:13px} .leaderboard-board-heading .difficulty-badge{display:none} .leaderboard-board-heading p{grid-column:1/-1;grid-row:3;font-size:10px;line-height:1.5;margin:9px 0 0} .leaderboard-refresh.button{grid-column:2;grid-row:2;width:44px;min-height:44px;margin:0;padding:12px;gap:0;align-self:center} .leaderboard-live{min-height:0} .leaderboard-table,.leaderboard-state{grid-column:1/-1;grid-row:4;min-width:0} .leaderboard-columns{padding-top:11px;padding-bottom:8px} .leaderboard-own{grid-column:1/-1;grid-row:5} .leaderboard-footnote{grid-column:1/-1;grid-row:6} } @media(min-width:600px) and (max-height:400px) and (orientation:landscape){ .leaderboard-header{padding:12px 20px} .leaderboard-topline{top:10px;right:18px} .leaderboard-card h2{font-size:31px;line-height:44px;padding-right:46px} .leaderboard-intro{display:none} .leaderboard-content{grid-template-columns:minmax(0,1fr) 176px 44px;gap:0 12px;padding:12px 20px 18px} .leaderboard-mode-picker{grid-column:1;grid-row:1;margin:0} .leaderboard-difficulty-field{grid-column:2;grid-row:1;gap:8px} .leaderboard-refresh.button{grid-column:3;grid-row:1} .leaderboard-board-heading p{grid-row:2;margin-top:7px} .leaderboard-table,.leaderboard-state{grid-row:3} .leaderboard-own{grid-row:4} .leaderboard-footnote{grid-row:5} .leaderboard-columns{padding-top:9px;padding-bottom:7px} .leaderboard-row{padding-block:9px} .leaderboard-name{font-size:12px;line-height:1.4} .leaderboard-detail{font-size:9px;line-height:1.35;margin-top:4px} } /* Guided practice reserves its own rail and never covers the workshop. */ body.is-training #hud{--rail-height:112px} body.is-training #hud .hud-stats,body.is-training #hud .hud-difficulty,body.is-training #hud .hud-room-name,body.is-training #hud .health-hearts,body.is-training #hud .map-toggle{display:none} body.is-training #hud .hud-mission h2{margin:4px 0 0} body.is-training #hud .mission-heading{color:#d8c594;letter-spacing:.8px} body.is-training #hud .hud-mission{flex:1} #hud .training-strip{grid-column:1;grid-row:2;display:flex;align-items:center;gap:14px;min-width:0;min-height:0;padding:5px 0 0;border-top:1px solid #c9c69325;pointer-events:auto} .training-instruction{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px} .training-instruction>strong{font:700 9px/12px var(--sans);letter-spacing:.7px;color:#e5cf9d} .training-instruction>span{font:500 12px/16px var(--sans);color:#e0e9d6} #hud .training-skip{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;padding:10px 12px;border:1px solid #c5b6804d;border-radius:7px;background:#17372f;color:#e9ddbd;font:600 12px/1.4 var(--sans);touch-action:manipulation} #hud .training-skip:hover{background:#25493b;border-color:#d8be8277} #hud .training-skip:disabled{opacity:.55} .help-practice{margin:0 0 20px} .help-practice .button{min-height:46px;font-size:12px;padding:11px 14px} .help-practice .button:disabled{opacity:.45;transform:none} .help-practice p{font-size:11px;line-height:1.6;color:#adc2af;margin:8px 0 0} @media(max-width:760px){ body.is-training #hud{--rail-height:122px} #hud .training-strip{gap:10px} .training-instruction>strong{font-size:8px;letter-spacing:.4px} .training-instruction>span{font-size:11px;line-height:15px} #hud .training-skip{padding-inline:10px;font-size:11px} } @media(max-width:350px){ .mode-option{font-size:11px;padding-inline:5px} .leaderboard-mode-picker button{padding-inline:6px} .leaderboard-mode-picker button strong{font-size:11px} .leaderboard-mode-picker button>span{font-size:9px} .help-practice .button{font-size:11px} } @media(max-height:540px) and (orientation:landscape){ body.is-training #hud{--rail-height:106px} #hud .training-strip{padding-top:3px;gap:12px} .training-instruction{gap:3px} .training-instruction>span{font-size:11px;line-height:14px} } /* v0.11: the wardrobe lives off the playfield; goals never cover the action. */ body[data-screen="locker"] #hud[hidden]{display:block!important;visibility:hidden;pointer-events:none} .locker-screen{align-items:flex-start;padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));scrollbar-width:thin;scrollbar-color:#536b56 transparent} .locker-card{flex:none;width:100%;max-width:890px;max-height:none;overflow:visible;padding:0;margin:auto 0;border-radius:15px;background:radial-gradient(ellipse at 5% 0,#34503e75,transparent 62%),#102c2c} .locker-header{padding:25px 30px 22px;border-bottom:1px solid #d7c08b25} .locker-topline{display:flex;align-items:center;justify-content:space-between;gap:16px} .locker-topline .eyebrow{font-size:8px;line-height:1.6;letter-spacing:1.65px;margin:0;max-width:280px} .locker-back.button{flex:none;min-height:44px;min-width:76px;gap:8px;padding:10px 13px;font-size:12px;border-radius:7px} .locker-back svg{width:17px;height:17px} .locker-card .locker-title{font:400 48px/1.06 var(--serif);letter-spacing:-1.3px;margin:15px 0 10px;outline:none} .locker-title i{color:var(--gold-light);font-weight:400} .locker-intro{font-size:13px;line-height:1.6;color:#b9cbbc;max-width:520px;margin:0} .locker-meta{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-top:16px;color:#9cb7a6;font:500 10px/1.5 var(--sans)} .locker-meta>span:first-child{font-weight:700;color:#efd5a0} .locker-content{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:24px;padding:26px 30px} .locker-inspection{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:14px} .locker-preview{--outfit-colour:#356b43;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:218px;overflow:hidden;border:1px solid #cdb77f21;border-radius:13px;background:radial-gradient(ellipse at 50% 44%,#9aa87720,transparent 66%),linear-gradient(140deg,#1b3b32,#0a222b)} .locker-preview:after{content:'';position:absolute;left:18%;right:18%;bottom:15px;height:16px;border-radius:50%;background:#e6c5840d;border:1px solid #e6c5841c;pointer-events:none} .locker-preview svg{position:relative;z-index:1;display:block;width:auto;height:95%;max-width:100%;filter:drop-shadow(0 12px 9px #0003)} .locker-outfit-detail{min-width:0} .locker-outfit-state{font:700 8px/1.6 var(--sans);letter-spacing:1.2px;color:#c5b98b;margin:0 0 6px} .locker-outfit-detail h3{font:400 29px/1.08 var(--serif);letter-spacing:-.55px;margin:0 0 10px;color:#f1e3c6;overflow-wrap:anywhere} .locker-outfit-description{font-size:12px;line-height:1.65;color:#aec6b4;min-height:39px;margin:0 0 14px} .locker-equip.button{width:100%;min-height:46px;justify-content:center;font-size:13px;padding:11px 13px;border-radius:7px} .locker-equip:disabled{opacity:1;background:#214138;border-color:#bcc49e30;color:#c6cbb1;cursor:default;box-shadow:none} .locker-requirement{margin-top:17px;padding-top:13px;border-top:1px solid #d7c08b25} .locker-goal-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0} .locker-goal-heading strong{font:650 12px/1.4 var(--sans);color:#e9dbb8;min-width:0} .locker-goal-heading>span{flex:none;font:650 10px/1.4 var(--sans);color:#c9ddbd;font-variant-numeric:tabular-nums} .locker-requirement>p{font-size:11px;line-height:1.6;color:#a9c1b0;margin-top:6px} .locker-requirement progress{display:block;width:100%;height:5px;border:0;border-radius:5px;background:#071f23;color:#d2bd7c;appearance:none;overflow:hidden;margin:10px 0} .locker-requirement progress::-webkit-progress-bar{background:#071f23;border-radius:5px} .locker-requirement progress::-webkit-progress-value{background:#d2bd7c;border-radius:5px} .locker-requirement progress::-moz-progress-bar{background:#d2bd7c;border-radius:5px} .locker-track.button{width:100%;min-height:44px;padding:10px 11px;font-size:12px;justify-content:center;border-radius:7px} .locker-track:disabled{cursor:default;opacity:.6} .locker-wardrobe{min-width:0} .locker-section-heading{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .locker-section-heading h3{font:400 25px/1.15 var(--serif);letter-spacing:-.4px;margin:0;color:#e7d9b9} .locker-section-heading>span{font-size:10px;line-height:1.5;color:#96b4a3} .locker-outfits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .locker-outfit-tile{position:relative;min-width:0;min-height:164px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 5px 10px;border:1px solid #b2bd9630;border-radius:8px;background:#0d2428;color:#d1dfca;cursor:pointer;box-shadow:none;transform:none;text-align:center;transition:background .15s,border-color .15s} .locker-outfit-tile:hover{background:#234337;border-color:#ddc48a7d} .locker-outfit-tile.is-inspected{background:#294639;border-color:#edcf91;box-shadow:inset 0 0 0 1px #edcf9138} .locker-outfit-tile.is-locked:not(.is-inspected){background:#10282b} .locker-outfit-tile.is-locked .locker-tile-art{opacity:.74} .locker-outfit-tile strong{font:650 11px/1.35 var(--sans);color:#e2dfca;min-height:29px;overflow-wrap:anywhere} .locker-tile-art{display:block;min-width:0;width:100%;height:96px} .locker-tile-art svg{display:block;width:auto;height:100%;max-width:100%;margin:auto} .locker-tile-state{margin-top:auto;font:550 9px/1.4 var(--sans);letter-spacing:.3px;color:#9eb4a4} .locker-outfit-tile.is-equipped .locker-tile-state{color:#efd49a;font-weight:700} .locker-tracked{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #c5b78132;border-radius:9px;background:#213e332e;min-width:0} .locker-tracked>div{min-width:0} .locker-tracked .eyebrow{font-size:8px;letter-spacing:1.25px;line-height:1.5;margin:0 0 5px} .locker-tracked strong{display:block;font:650 13px/1.45 var(--sans);color:#e9dab6} .locker-tracked p:not(.eyebrow){font-size:11px;line-height:1.6;color:#abc2af;margin:4px 0 0} .locker-tracked .button{flex:none;min-height:44px;padding:10px 12px;font-size:11px;border-radius:7px} .locker-footnote{grid-column:1/-1;font-size:10px;line-height:1.7;color:#8da998;margin:-11px 1px 0} .pause-locker-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;margin-top:12px;border-top:1px solid #c5b78122;border-bottom:1px solid #c5b78122} .pause-locker-summary>div{min-width:0} .pause-locker-summary .eyebrow{font-size:7px;line-height:1.5;letter-spacing:1.1px;margin:0 0 4px} .pause-locker-summary strong{display:block;font-size:11px;line-height:1.5;color:#dfd4ae} .pause-locker-summary span:not([aria-hidden]){display:block;font-size:10px;line-height:1.5;color:#a4bba8;margin-top:3px} .pause-locker-summary .button{flex:none;gap:12px;min-height:44px;padding:10px 12px;font-size:11px;border-radius:7px} /* A new outfit is a compact result notice; tracked goals use the same quiet row. */ .result-locker-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;margin:0;border:1px solid #c5bb8a24;border-radius:9px;background:#223e302b} .result-locker-summary.has-reward{grid-template-columns:38px minmax(0,1fr) auto;background:#344f383d;border-color:#cdb27745} .result-locker-preview{display:none} .result-locker-summary.has-reward .result-locker-preview{display:block;align-self:center} .result-locker-preview svg{display:block;width:38px;height:auto;max-height:54px} .result-locker-copy{min-width:0} .result-locker-summary .eyebrow{font-size:8px;line-height:1.5;letter-spacing:.6px;margin:0 0 4px;color:#c4b486} .result-locker-summary h3{font:600 12px/1.35 var(--sans);letter-spacing:0;margin:0 0 4px;color:#e0ddbf;overflow-wrap:anywhere} .result-locker-summary p:not(.eyebrow){font-size:10px;line-height:1.5;color:#9eb99f;margin:0} .result-locker-summary>.button{min-height:44px;min-width:44px;padding:9px 8px;justify-content:center;gap:5px;font-size:10px;border-radius:6px;background:transparent;border-color:#c0ba8b2e;color:#d9cca0;transform:none} .result-locker-summary>.button svg{width:14px;height:14px} @media(max-width:350px){ .result-locker-summary{padding:10px;gap:8px} .result-locker-summary.has-reward{grid-template-columns:30px minmax(0,1fr) auto} .result-locker-preview svg{width:30px;max-height:44px} .result-locker-summary>.button{padding:8px;min-width:44px} .result-locker-summary>.button svg{display:none} .result-locker-summary h3{font-size:11px} } @media(max-width:600px){ .locker-screen{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left))} .locker-header{padding:17px 19px 17px} .locker-topline{gap:10px} .locker-topline .eyebrow{font-size:7px;letter-spacing:1.2px;max-width:155px} .locker-back.button{min-width:44px;width:44px;padding:0} .locker-back>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .locker-card .locker-title{font-size:37px;line-height:1.08;letter-spacing:-1px;margin:12px 0 8px} .locker-intro{font-size:11px;line-height:1.6} .locker-meta{font-size:9px;margin-top:12px;gap:4px 10px} .locker-content{display:block;padding:19px} .locker-inspection{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:13px;align-items:start} .locker-preview{height:174px;position:sticky;top:12px} .locker-outfit-detail h3{font-size:26px;line-height:1.08;margin-bottom:8px} .locker-outfit-state{font-size:7px;letter-spacing:.85px;line-height:1.6} .locker-outfit-description{font-size:11px;line-height:1.6;min-height:0;margin-bottom:12px} .locker-equip.button,.locker-track.button{font-size:11px;padding:10px 7px;min-height:44px} .locker-requirement{padding-top:11px;margin-top:12px} .locker-goal-heading{gap:6px;flex-wrap:wrap} .locker-goal-heading strong{font-size:11px} .locker-goal-heading>span{font-size:9px} .locker-requirement>p{font-size:10px;line-height:1.6} .locker-wardrobe{margin-top:23px;padding-top:20px;border-top:1px solid #c5b78122} .locker-section-heading h3{font-size:24px} .locker-outfits{gap:7px} .locker-outfit-tile{min-height:142px;padding:6px 4px 9px} .locker-outfit-tile strong{font-size:10px;min-height:27px} .locker-tile-art{height:80px} .locker-tile-state{font-size:8px} .locker-tracked{margin-top:19px;display:block;padding:13px} .locker-tracked .button{margin-top:10px;width:100%;justify-content:center;min-height:44px} .locker-tracked strong{font-size:12px} .locker-tracked p:not(.eyebrow){font-size:10px} .locker-footnote{margin:13px 0 1px;font-size:9px} } @media(max-width:430px){ .menu-support .button{font-size:12px;gap:0;padding-inline:3px} .menu-support .button svg,.menu-support .help-ring{display:none} } @media(max-width:350px){ .locker-screen{padding-inline:8px} .locker-header,.locker-content{padding-inline:15px} .locker-card .locker-title{font-size:33px} .locker-inspection{grid-template-columns:minmax(0,.63fr) minmax(0,1fr);gap:10px} .locker-preview{height:145px} .locker-outfit-detail h3{font-size:23px} .locker-outfits{gap:5px} .locker-outfit-tile{min-height:133px} .locker-tile-art{height:73px} .locker-outfit-tile strong{font-size:9px} } @media(max-height:540px) and (orientation:landscape){ .locker-screen{padding:calc(10px + var(--safe-top)) calc(16px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(16px + var(--safe-left))} .locker-header{padding:14px 23px} .locker-topline .eyebrow{max-width:none} .locker-card .locker-title{font-size:34px;line-height:1.1;margin:8px 0} .locker-intro{font-size:11px} .locker-meta{margin-top:9px;font-size:9px} .locker-content{padding:18px 23px;gap:19px} .locker-preview{height:178px} .locker-outfit-detail h3{font-size:25px} .locker-outfit-description{font-size:11px} .locker-outfit-tile{min-height:133px} .locker-tile-art{height:72px} .locker-outfit-tile strong{font-size:10px} .locker-section-heading h3{font-size:23px} } /* Midnight materials continue through the real menus and established controls. */ .button-primary{color:#183224;background:linear-gradient(155deg,#f8df9e 0,#e1bb70 48%,#bb8c46 100%);border-color:#f4dca18c;box-shadow:inset 0 1px 0 #fff1ca99,inset 0 -2px 0 #815d3026,0 5px 18px #001b1433} .button-primary:hover{background:linear-gradient(155deg,#ffebba 0,#edcc88 48%,#d0a35d 100%);box-shadow:inset 0 1px 0 #fff8ddbf,0 7px 22px #001b1444} .button-secondary{background:#0b2b2380;border-color:#c4b37b54;color:#eee5cb} .button-secondary:hover{background:#254a35;border-color:#e0c28a88} .modal-screen:not(.results-screen){background:#031b17d9;backdrop-filter:blur(8px)} .modal-card:not(.results-card){border-color:#c8a46370;background:radial-gradient(ellipse at 12% 0,#31513c66,transparent 58%),#0a2c23;box-shadow:inset 0 0 0 3px #ddb66b06,0 25px 100px #0005} .modal-card h2{color:#faefd5} .modal-card h2 i{color:#e5c790} .modal-intro{color:#bfcdb6} .boot-status{background:radial-gradient(ellipse at 50% 28%,#294a36 0,#09291f 44%,#041b18 90%)} .boot-card{border-color:#cba75d80;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#46634225,transparent 65%),#09281fe8;box-shadow:inset 0 0 0 4px #efc77908,0 20px 70px #0005;padding-block:35px} .boot-title{font-weight:600;color:#fff2d7;line-height:1.02} .boot-title i{font-style:normal} .boot-mark{color:#e8cc90} .boot-loader{height:3px;background:#c7b27726} .boot-note{font:italic 13px/1.6 var(--serif);color:#bcc8ae} .pause-card .full-width,.help-card .full-width{border-radius:7px} .pause-secondary .text-button{min-height:44px;padding-inline:6px} .setting-row select,.difficulty-select-wrap select,.leaderboard-difficulty-field select{background:#143a29;border-color:#cfb77b59} .settings-group,.help-steps{border-color:#d0b77b40} .upgrade-card{background:linear-gradient(150deg,#224b32,#103326);border-color:#c9b77f65;box-shadow:inset 0 1px 0 #ecd0960a} .upgrade-card:hover{background:linear-gradient(150deg,#365e3f,#20452f);border-color:#e1c383} .upgrade-icon{background:#e0bc6e0d;border-color:#e1c3836b} #screen-map .map-card{border-color:#c8a46370} #screen-map .room-map-canvas{border-color:#c7ad7259;background:#0a2b23} .overtime-card{border-color:#c8a46370} .leaderboard-header,.locker-header{border-bottom-color:#cfb57b45} .leaderboard-card,.locker-card{border-radius:18px} .leaderboard-state{border-color:#c2ad733d;background:#0a2b2380} .leaderboard-state-symbol{border-color:#e0bf7d80;background:#dec1810a;color:#efd59e} .leaderboard-mode-picker{border-color:#c7b27952;background:#061e1a} .leaderboard-mode-picker button.is-selected{background:linear-gradient(145deg,#efd7a0,#cfa15a);border-color:#f4dca18c} .leaderboard-footer{background:#041f1944;border-top-color:#c4ac7540} .locker-preview{border-color:#c9af7152;background:radial-gradient(ellipse at 50% 45%,#b6b87529,transparent 65%),linear-gradient(145deg,#24492f,#0a281e)} .locker-outfit-tile{background:#0b2a21;border-color:#c3b17b40} .locker-outfit-tile:hover{background:#2b4c35;border-color:#dfc1878c} .locker-outfit-tile.is-inspected{background:#345539;border-color:#e8cc8d;box-shadow:inset 0 0 0 1px #e8cc8d33} .locker-outfit-tile.is-locked:not(.is-inspected){background:#102d24} .locker-tracked{background:#24402d33;border-color:#c1ad7545} .result-locker-summary{margin-bottom:13px;border-color:#c1ad7545;background:#25432e3d} .result-locker-summary.has-reward{background:#3e563333;border-color:#d3b57470} #hud .hud-rail{background:linear-gradient(115deg,#10382b,#06271f);border-bottom-color:#d7b57757} #hud .control-dock{background:linear-gradient(180deg,#0c2e25,#06251f);border-top-color:#d4b47745} body.is-touch #hud .control-gutter{background:linear-gradient(180deg,#0c2e25,#06251f)} #hud .status-rail{border-top-color:#d4b47726} #hud .hud-mission h2{color:#faf0d7} #hud .hud-room-name{color:#afc2a7} #hud .score-stat strong{color:#efd7a2} #hud .icon-button{color:#ecd199} #hud .icon-button:hover:not(:disabled){background:#2e5038;border-color:#d4b47742} #hud .joystick,#hud .touch-fire{border-color:#dbbd7a88;background:radial-gradient(circle at 40% 30%,#31513c,#0a2c23);box-shadow:inset 0 0 0 3px #e1bd6d06,inset 0 0 16px #0003,0 3px 10px #00190f30} #hud .joystick-direction,#hud .aim-stick-track{border-color:#d7c08433} #hud .joystick-knob,#hud .aim-stick-knob{background:linear-gradient(145deg,#f2d994,#d3ac62 60%,#ad803c);border-color:#f3dca4c9;box-shadow:inset 0 1px 0 #fff3c59c,0 3px 8px #0005} #hud .joystick.is-active,#hud .touch-fire.is-active{background:#2d4d37;border-color:#f0d497} #hud .touch-fire.is-aiming{border-color:#ffe3a5;box-shadow:inset 0 0 16px #0003,0 0 0 3px #e7c37921} #hud .touch-wrap,#hud .touch-dash{background:linear-gradient(150deg,#254d36,#10372a);border-color:#d4b47773;color:#f1dbab;box-shadow:inset 0 1px 0 #e8d09a10} #hud .special-use,#hud .special-switch{background:linear-gradient(145deg,#294b33,#123728);border-color:#d5b87570;color:#f1d7a0} #hud .special-ammo{background:#e6cd95;border-color:#fae2af;color:#173b28} #hud .special-controls.is-empty .special-use{background:#13372a;border-color:#91aa7e40} #hud .joystick-caption,#hud .touch-fire>.aim-stick-caption{color:#e5dfc1} #hud .desktop-hints>span{color:#b0c4a8} #hud .desktop-hints kbd{background:#1b402e;border-color:#c1ac743d;color:#e7d5a9} @media(min-width:600px) and (max-height:540px) and (orientation:landscape){ body.is-touch #hud .control-dock{background:none;border:0} } @media(max-width:430px){.menu-support .button{font-size:11px}.menu-support .button svg,.menu-support .help-ring{display:none}} @media(max-width:360px){.boot-card{padding-block:27px}} /* Optional field guide: readable during a tea break, never over the action. */ .toy-guide{margin:21px 0;border:1px solid #cfb57b52;border-radius:9px;background:#092a2180;overflow:hidden} .toy-guide>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:13px 16px;cursor:pointer;list-style:none;color:#eed9aa} .toy-guide>summary::-webkit-details-marker{display:none} .toy-guide>summary::marker{content:""} .toy-guide>summary>span{display:block;min-width:0} .toy-guide>summary strong{display:block;font:400 21px/1.2 var(--serif);letter-spacing:-.2px} .toy-guide>summary small{display:block;margin-top:4px;color:#b8c9b1;font:400 11px/1.5 var(--sans)} .toy-guide>summary svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .toy-guide[open]>summary svg{transform:rotate(180deg)} .toy-guide>summary:hover{background:#e1c78709} .toy-guide>summary:focus-visible{outline:2px solid #f1d390;outline-offset:-5px;border-radius:9px} .toy-guide[open]>summary{border-bottom:1px solid #cfb57b2e} .toy-guide-body{padding:16px} .toy-guide-intro,.toy-guide-footnote{font:400 12px/1.65 var(--sans);color:#b9cbb9;margin:0} .toy-guide-intro b{font-weight:600;color:#e5dcc0} .toy-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0} .toy-guide-grid>div{min-width:0;padding:14px 13px;border:1px solid #b7bb892b;border-radius:7px;background:linear-gradient(145deg,#24473280,#15362b80)} .toy-guide-grid dt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font:400 19px/1.2 var(--serif);color:#f0e3c8;overflow-wrap:break-word} .toy-guide-grid dt span{font:600 9px/1.5 var(--sans);letter-spacing:.65px;text-transform:uppercase;color:#d2b97f} .toy-guide-grid dd{margin:10px 0 0} .toy-guide-grid dd p{font:400 12px/1.65 var(--sans);color:#d0ddc7;margin:0} .toy-guide-grid dd .toy-guide-character{font:italic 13px/1.5 var(--serif);color:#a9bca5;margin:0 0 8px} .toy-guide-grid .toy-guide-boss{grid-column:1/-1} .toy-guide-footnote{padding-top:14px;border-top:1px solid #cfb57b2e;color:#aabdac;font-size:11px} @media(max-width:560px){ .toy-guide{margin:19px 0} .toy-guide>summary{padding:13px 14px} .toy-guide-body{padding:14px} .toy-guide-grid{grid-template-columns:minmax(0,1fr);gap:10px} .toy-guide-grid dt{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;font-size:19px} .toy-guide-grid dt span{flex:none;font-size:9px} .toy-guide-grid dd{margin-top:8px} } @media(max-width:360px){.toy-guide-grid dt{flex-direction:column;gap:4px}.toy-guide-grid>div{padding:13px 12px}} /* A considered perk choice, with the current kit tucked into the tea break. */ #screen-upgrade .upgrade-panel{max-width:920px;padding:30px;text-align:left} #screen-upgrade .upgrade-panel h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;max-width:690px} #screen-upgrade .modal-intro{margin:12px 0 21px;max-width:600px;font-size:12px;line-height:1.6} .upgrade-offers-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 17px} .upgrade-offers-header>p{margin:0;color:#b7c8b1;font-size:11px;line-height:1.5} .upgrade-reroll-area{display:flex;flex-direction:column;align-items:flex-end;gap:5px} #upgrade-reroll{min-height:44px;padding:10px 13px;gap:8px;font-size:11px;border-color:#d4b47766;background:#102f26} #upgrade-reroll svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #upgrade-reroll:disabled{opacity:.48;cursor:default;transform:none} #upgrade-reroll-note{font-size:10px;line-height:1.4;color:#9eb79e;text-align:right;max-width:230px} #screen-upgrade .upgrade-options{gap:12px} @media(min-width:761px){#screen-upgrade .upgrade-options[data-offer-count="1"]{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}} #screen-upgrade .upgrade-card{display:flex;flex-direction:column;align-items:stretch;padding:20px 17px 15px;min-height:0;border-radius:10px;overflow:hidden} #screen-upgrade .upgrade-card:hover{transform:translateY(-3px)} #screen-upgrade .upgrade-card:disabled{cursor:default;transform:none;opacity:.65} #screen-upgrade .upgrade-number{position:absolute;right:13px;top:13px;color:#9eb29a;font-size:10px} .upgrade-card-top{display:flex;align-items:center;gap:11px;margin-bottom:15px;padding-right:15px} #screen-upgrade .upgrade-icon{position:static;flex:none;width:35px;height:35px;margin:0;border-radius:8px} #screen-upgrade .upgrade-icon svg{width:21px;height:21px} .upgrade-meta{display:flex;flex-direction:column;gap:3px;min-width:0} .upgrade-category{font-size:9px;line-height:1.4;text-transform:uppercase;letter-spacing:.65px;color:#b6c6a7} .upgrade-level{font-size:11px;line-height:1.4;color:#e9d19c} #screen-upgrade .upgrade-card h3{font-size:23px;line-height:1.15;letter-spacing:-.25px;padding:0;margin:0 0 9px;overflow-wrap:break-word} #screen-upgrade .upgrade-copy{font-size:11px;line-height:1.6;margin:0 0 14px;color:#b8cbb8} .upgrade-effects{display:block;border-top:1px solid #d3bc8233;border-bottom:1px solid #d3bc8226;padding:7px 0;margin-top:auto} .upgrade-effect{display:grid;grid-template-columns:30px minmax(0,1fr);gap:7px;padding:5px 0;color:#a7bda9;font-size:11px;line-height:1.5} .upgrade-effect small{font-size:9px;line-height:1.85;text-transform:uppercase;letter-spacing:.4px;color:#9bb39b} .upgrade-effect.is-next{color:#f0dfb7} .upgrade-effect.is-next small{color:#e6c88c} .upgrade-synergy{display:block;margin-top:10px;color:#bdd5bb;font-size:10px;line-height:1.5} #screen-upgrade .upgrade-card .upgrade-pick{padding-top:14px;margin-top:0;font-size:10px;line-height:1.4;letter-spacing:.15px} .upgrade-pick-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none} .upgrade-pick-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #screen-upgrade .panel-footnote{margin-top:17px;font-size:10px;text-align:center} .shift-kit{margin:16px 0;border:1px solid #cfb57b40;border-radius:8px;background:#092a2155;overflow:hidden} .shift-kit>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:12px 14px;list-style:none;cursor:pointer;color:#e7d5a9} .shift-kit>summary::-webkit-details-marker{display:none} .shift-kit>summary::marker{content:""} .shift-kit>summary strong{display:block;font:400 20px/1.2 var(--serif)} .shift-kit>summary small{display:block;margin-top:4px;font-size:10px;line-height:1.5;color:#a9bfa9} .shift-kit>summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .shift-kit[open]>summary svg{transform:rotate(180deg)} .shift-kit[open]>summary{border-bottom:1px solid #cfb57b2b} .shift-kit>summary:focus-visible{outline:2px solid #f1d390;outline-offset:-4px;border-radius:8px} .shift-kit-body{padding:3px 14px} .shift-kit-body>p{margin:11px 0;font-size:11px;line-height:1.6;color:#b6cbb5} .shift-kit-body ul{list-style:none;padding:0;margin:0} .shift-kit-body li{padding:12px 0} .shift-kit-body li+li{border-top:1px solid #b7bb891f} .shift-kit-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .shift-kit-heading strong{font:400 17px/1.25 var(--serif);color:#ebdec1} .shift-kit-heading small{flex:none;font-size:9px;color:#c7b17f} .shift-kit-body li p{margin:5px 0 0;font-size:11px;line-height:1.6;color:#b4c9b3} @media(max-width:760px){ #screen-upgrade .upgrade-panel{max-width:520px;padding:23px 21px} #screen-upgrade .upgrade-panel h2{font-size:30px;max-width:380px} #screen-upgrade .modal-intro{font-size:11px;margin:10px 0 18px} #screen-upgrade .upgrade-card{padding:15px 16px 13px} .upgrade-card-top{margin-bottom:10px;gap:10px} #screen-upgrade .upgrade-card h3{font-size:22px;margin-bottom:7px} #screen-upgrade .upgrade-copy{margin-bottom:10px} .upgrade-meta{flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:8px;row-gap:2px} .upgrade-effect{grid-template-columns:30px minmax(0,1fr);padding:4px 0} #screen-upgrade .upgrade-card .upgrade-pick{padding-top:11px} } @media(max-width:360px){ #screen-upgrade .upgrade-panel{padding:21px 16px} #screen-upgrade .upgrade-panel h2{font-size:28px} .upgrade-offers-header{align-items:flex-start;gap:9px} .upgrade-offers-header>p{font-size:10px;padding-top:12px} #upgrade-reroll{padding:10px;gap:6px;font-size:10px} #upgrade-reroll-note{font-size:9px;max-width:150px} #screen-upgrade .upgrade-card{padding:15px 13px 13px} .upgrade-meta{flex-direction:column;gap:2px} .shift-kit-heading{align-items:flex-start;gap:8px} } /* v0.17.1 — twin-stick feedback. The controls keep their established footprint. */ #hud .joystick.is-active,#hud .touch-fire.is-active{border-color:#f0cf8da8;box-shadow:inset 0 0 0 3px #e1bd6d0d,inset 0 0 18px #0003,0 0 0 3px #d9b66a0d,0 3px 10px #00190f30} #hud .joystick.is-active .joystick-direction,#hud .touch-fire.is-active .aim-stick-track{border-color:#eed39a52} #hud .touch-fire.is-aiming{background:radial-gradient(circle at 40% 30%,#49654a,#173c2e)} #hud .touch-fire.is-aiming .aim-stick-knob{box-shadow:inset 0 1px 0 #fff3c59c,0 3px 8px #0005,0 0 0 3px #e3bf6b22} /* v0.18 — one calm campaign checkpoint card, shown only for Christmas Shift. */ .menu-checkpoint{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 14px;border:1px solid #d9bd7866;border-radius:8px;background:linear-gradient(135deg,#17372edf,#0a2922e8);box-shadow:inset 0 1px 0 #fff1,0 9px 28px #031b1538} .menu-checkpoint-copy{min-width:0}.menu-checkpoint .eyebrow{margin:0 0 3px;color:#d9bd78;font-size:7px;letter-spacing:1.45px}.menu-checkpoint h2{margin:0;color:#fff0cf;font:600 19px/1.2 var(--serif);letter-spacing:-.25px}.menu-checkpoint-stage{margin-top:5px;color:#d8dfcc;font-size:10px;line-height:1.4}.menu-checkpoint-stats,.menu-checkpoint-last{margin-top:2px;color:#aebca8;font-size:9px;line-height:1.45}.menu-checkpoint-last{color:#cdbd93}.menu-continue{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:148px;min-height:46px;padding:10px 12px;border-radius:6px;font-size:12px;white-space:nowrap}.menu-continue svg{width:18px;height:18px} #hud .hud-checkpoint-saved{display:inline-flex;align-items:center;min-width:0;margin-left:3px;padding-left:7px;border-left:1px solid #8fcba84d;color:#a8dfbd;font:650 6px/9px var(--sans);letter-spacing:.55px;text-transform:uppercase;white-space:nowrap;opacity:.7;transition:opacity .18s}.hud-checkpoint-saved.is-visible{opacity:1} @media(max-width:520px){.menu-checkpoint{grid-template-columns:1fr;gap:9px;padding:11px 12px}.menu-checkpoint h2{font-size:18px}.menu-continue{width:100%;min-width:0;min-height:44px}.menu-checkpoint-stats,.menu-checkpoint-last{font-size:8.5px}} @media(max-width:370px){#hud .hud-checkpoint-saved{font-size:5.5px;letter-spacing:.25px;padding-left:5px}} @media(max-height:540px) and (orientation:landscape){.menu-checkpoint{padding:8px 10px;gap:10px}.menu-checkpoint h2{font-size:16px}.menu-checkpoint-stage{margin-top:2px}.menu-checkpoint-stats,.menu-checkpoint-last{font-size:8px}.menu-continue{min-height:40px;padding-block:8px}}