:root{color-scheme:dark;--bg:#0a1119;--panel:#101d28;--line:#233440;--muted:#8296a6;--text:#e4eae9;--orange:#ff8357;--cyan:#92e9df;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:Inter,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 0%,#142c35 0%,transparent 55%),var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}.app{min-height:100dvh;display:flex;flex-direction:column;padding:0 24px}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button:disabled{cursor:default}.topbar{height:72px;flex-shrink:0;width:100%;max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-align:left;font-size:15px;font-weight:800;letter-spacing:1px}.brand-icon{position:relative;display:grid;place-items:center;width:38px;height:40px;color:var(--orange);font-size:27px;font-weight:900;border:1px solid #455256;clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,0 100%);background:#1b2a2f}.brand-icon span{position:absolute;right:3px;bottom:1px;font:8px var(--mono);color:var(--cyan)}.brand-colon{color:var(--orange)}nav{display:flex;gap:26px}.nav{color:#b1c2cc;font-size:14px;padding:12px 0}.nav:hover{color:var(--orange)}.tools{display:flex;gap:9px}.tool{height:36px;min-width:36px;display:grid;place-items:center;border:1px solid var(--line);color:#a3b5be;font-size:20px;transition:.15s}.tool:hover{border-color:var(--orange);color:var(--orange)}.tool.muted{color:#586774}main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0}.game-shell{width:min(100%,calc((100dvh - 104px)*16/9));max-width:1320px}.app.playing .game-shell{width:min(100%,calc((100dvh - 208px)*16/9))}.stage{position:relative;width:100%;aspect-ratio:16/9;background:#102431;border:1px solid #31424c;overflow:hidden;isolation:isolate}canvas{display:block;width:100%;height:100%;object-fit:contain}.home-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0b172aef 0%,#0b172a9c 32%,transparent 64%)}.hero-copy{position:absolute;left:6%;top:23%;width:49%}h1{font-size:clamp(40px,5.5vw,77px);line-height:.98;font-weight:850;letter-spacing:-3px;margin:0 0 24px}h1>span{display:block;color:var(--orange)}.title-dot{color:var(--text)}.hero-copy p{font-size:16px;line-height:1.5;color:#a9bac7;margin:0 0 28px}.primary{background:var(--orange);color:#17222b;min-height:46px;padding:0 20px;display:flex;gap:40px;align-items:center;justify-content:space-between;font:13px var(--mono);font-weight:800;letter-spacing:.7px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background .15s,transform .15s}.primary:hover{background:#ffab80;transform:translateY(-1px)}.primary span{font:22px var(--sans)}.hidden{display:none!important}.game-hud{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4px 8px}.game-hud h2{font-size:19px;font-weight:650;margin:0;letter-spacing:-.3px}.hud-stats{display:flex;align-items:center;gap:20px}.hud-stats>span{white-space:nowrap}.hud-stats strong{font:17px var(--mono)}.stat-label,#timeLimit{font-size:12px;color:var(--muted)}.time-stat{display:flex;align-items:baseline;gap:6px}#chipValue{color:var(--cyan)}.message-row{display:none;height:52px;align-items:center;justify-content:center;padding:0 12px 8px}.playing .message-row{display:flex}.toast{color:#d4e1e2;font-size:14px;line-height:20px;text-align:center;max-width:100%;max-height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.toast.hidden{display:block!important;visibility:hidden}.toast.death{color:#ffb391}.screen-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07111ccc;backdrop-filter:blur(7px)}.result-card{width:390px;max-width:90%;text-align:center;padding:22px 28px;background:#12232df2;border:1px solid #3d5159;box-shadow:0 20px 70px #0005}.result-card h2{font-size:32px;letter-spacing:-1px;line-height:1.06;margin:0 0 16px}.result-card>p{font-size:12px;line-height:1.5;color:var(--muted)}.result-card .primary{width:100%;margin-top:16px}.secondary{border:1px solid #3a505b;width:100%;font-size:13px;padding:12px;margin-top:9px;color:#b0c3cc}.secondary:hover{background:#2b454f}.text-button{font-size:12px;color:#8b9fac;padding:13px 5px 0}.result-stars{font-size:34px;letter-spacing:8px;color:var(--orange)}.empty{color:#405662}.result-missions{font-size:12px;line-height:1.9;text-align:left;border-top:1px solid var(--line);padding-top:10px;color:var(--muted)}.result-missions .earned{color:var(--cyan)}dialog{width:820px;max-width:94vw;max-height:90dvh;padding:28px;background:var(--panel);color:var(--text);border:1px solid #3c525c;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#040b13bd;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:24px}.dialog-top h2{font-size:27px;letter-spacing:-.7px;margin:0}.close{font-size:27px;color:var(--muted);height:34px;width:34px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.level-card{text-align:left;padding:17px;border:1px solid #314652;background:#142531;min-height:112px}.level-card:hover:not(:disabled){border-color:var(--orange);background:#1e303b}.level-card:disabled{opacity:.45}.level-card strong{display:block;font-size:15px;margin-bottom:9px}.level-card .record{display:block;font-size:11px;color:var(--muted)}.card-stars{display:block;color:var(--orange);font-size:21px;letter-spacing:4px;margin-top:9px}.dialog-footer{font-size:13px;color:var(--muted);margin-top:22px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.help-grid p{font-size:13px;color:var(--muted);line-height:1.7}.help-grid strong{display:block;font-size:15px;color:var(--text);margin-top:9px}kbd{display:inline-block;min-width:22px;border:1px solid #354551;border-bottom-width:2px;color:#b3c2cb;font:11px var(--mono);padding:3px 5px;margin-right:3px;vertical-align:middle;text-align:center}.help-callout{font-size:13px;line-height:1.7;padding:18px;border-left:2px solid var(--orange);background:#1b2c36;color:#b6c9cf;margin:16px 0 24px}#settingsDialog{max-width:470px}.setting{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font-size:14px}.setting input{accent-color:var(--orange);width:18px;height:18px}.save-note{font-size:12px;color:var(--muted);line-height:1.6;margin:20px 0}.game-shell:fullscreen{max-width:none;width:100vw;height:100dvh;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:16px}.game-shell:fullscreen .stage{width:min(100%,calc((100dvh - 32px)*16/9));align-self:center}.playing .game-shell:fullscreen .stage{width:min(100%,calc((100dvh - 136px)*16/9))}.game-shell:fullscreen .game-hud,.game-shell:fullscreen .message-row{width:min(100%,calc((100dvh - 136px)*16/9));align-self:center}@media(max-width:900px){.app{padding:0 16px}.topbar{height:64px}.brand{font-size:12px;gap:8px}nav{gap:18px}.game-shell{width:min(100%,calc((100dvh - 96px)*16/9))}.app.playing .game-shell{width:min(100%,calc((100dvh - 200px)*16/9))}.hud-stats{gap:12px}.game-hud h2{font-size:16px}.hero-copy p{font-size:13px;margin-bottom:20px}.hero-copy{top:20%}h1{font-size:6vw;margin-bottom:20px}.result-card{padding:16px 24px}.result-card h2{font-size:25px;margin-bottom:9px}.result-stars{font-size:26px}.result-card .primary{margin-top:10px;min-height:38px}.secondary{padding:9px}.result-missions{font-size:11px}}@media(max-width:600px){.app{padding:0 10px}.topbar{height:58px;gap:10px}.brand{font-size:10px;letter-spacing:.2px}.brand-icon{width:29px;height:32px;font-size:22px}nav{gap:12px}.nav{font-size:12px}.tools{gap:4px}.tool{min-width:28px;height:30px;font-size:17px}.game-hud{flex-wrap:wrap;gap:8px;min-height:70px;align-content:center}.game-hud h2{font-size:15px;width:100%}.hud-stats{gap:13px;width:100%;justify-content:space-between}.hud-stats strong{font-size:14px}.stat-label,#timeLimit{font-size:11px}.app.playing .game-shell{width:min(100%,calc((100dvh - 220px)*16/9))}.hero-copy{top:20%}.hero-copy p{font-size:10px;margin-bottom:14px}h1{font-size:7vw;letter-spacing:-1px;margin-bottom:15px}.hero-copy .primary{font-size:10px;min-height:34px;padding:0 12px;gap:16px}.toast{font-size:12px;line-height:18px;max-height:36px}.level-grid{grid-template-columns:1fr 1fr}.level-card{padding:12px;min-height:105px}.level-card strong{font-size:13px}.help-grid{grid-template-columns:1fr}.result-card{padding:10px 18px}.result-card h2{font-size:19px;line-height:1.05;margin-bottom:6px}.result-stars{font-size:20px}.result-card>p,.result-missions{font-size:9px;margin:6px 0;line-height:1.5}.result-card .primary{min-height:30px;font-size:9px;margin-top:6px}.secondary{padding:6px;font-size:10px;margin-top:5px}.text-button{font-size:10px;padding-top:7px}}@media(max-height:650px) and (min-width:601px){.topbar{height:54px}main{padding:8px 0}.game-shell{width:min(100%,calc((100dvh - 70px)*16/9))}.app.playing .game-shell{width:min(100%,calc((100dvh - 174px)*16/9))}.result-card{padding:12px 20px}.result-card h2{font-size:24px}.result-card .primary{min-height:34px;margin-top:9px}.secondary{padding:8px}.text-button{padding-top:9px}} /* Mesto a lokálne výpravy. Mapa je samostatná herná scéna. */ .credit-balance{display:flex;align-items:center;gap:7px;color:var(--orange);font:15px var(--mono);padding:0 12px 0 0}.credit-balance strong{font-weight:500}.playing .credit-balance{display:none}.home-actions{width:230px;max-width:100%;display:flex;flex-direction:column;align-items:stretch}.home-actions .primary{width:100%}.home-actions .secondary{margin-top:10px;background:#122731b3}.home-actions .text-button{text-align:left;padding-left:0}.home-actions .primary:disabled{background:#455760;color:#7c929d;transform:none}.home-actions .primary:disabled span{color:#7c929d}.home-actions .primary:disabled:hover{background:#455760}.hero-copy{top:17%}.app.mapping .game-shell{width:min(100%,calc((100dvh - 156px)*16/9))}.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 3px 10px}.map-toolbar h2{font-size:21px;letter-spacing:-.4px;margin:0}.map-toolbar>div{display:flex;gap:18px;align-items:center}.map-stars{font:13px var(--mono);color:var(--orange);white-space:nowrap}.campaign-button{border:1px solid var(--line);padding:9px 12px;font-size:13px;display:flex;gap:17px;align-items:center;color:#b8cbd1}.campaign-button:hover{border-color:var(--cyan)}.map-surface{position:relative;aspect-ratio:16/9;border:1px solid #31424c;overflow:hidden;background:#102431}.map-nodes{position:absolute;inset:0}.map-node{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:1px solid #78dcd2;background:#102e3c;color:#b5f3e6;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 18px #61b6af25,inset 0 0 12px #8bebdf0d;transition:background .15s,box-shadow .15s}.node-number{font:18px var(--mono);font-weight:700}.map-node:hover:not(:disabled){background:#235360;box-shadow:0 0 25px #80ead65c}.map-node.current{border-color:var(--orange);background:#49352e;color:#ffd4a5;box-shadow:0 0 20px #ff835739}.map-node.completed{background:#19514d;color:#b4f9d9;border-color:#89eac6}.map-node.locked{background:#142733cF;border-color:#35525e;color:#59717f;box-shadow:none}.node-stars{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;color:#416773;white-space:nowrap;text-shadow:0 1px 3px #071621}.node-stars .earned{color:#ffb473}.detail-number{display:block;font:12px var(--mono);color:var(--cyan);margin-bottom:9px}#levelDetailDialog{max-width:470px}#levelDetailDialog .primary{width:100%}.detail-results{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:0 0 18px}.detail-stars{color:var(--orange);font-size:30px;letter-spacing:6px}#detailBest{color:var(--muted);font:13px var(--mono)}.detail-missions{list-style:none;padding:14px 0;margin:0}.detail-missions li{padding:12px 0;display:flex;align-items:center;gap:12px;font-size:14px}.detail-missions li span:first-child{font-size:18px;color:#52717e}.detail-missions li.earned span:first-child{color:var(--orange)}.detail-reward{display:flex;justify-content:space-between;gap:16px;padding:17px 0 24px;color:var(--muted);font-size:12px}.detail-reward strong{color:var(--orange);font:16px var(--mono);white-space:nowrap}.win-credits{font:17px var(--mono);color:var(--orange);margin:10px 0}.campaign-list{display:grid;gap:10px}.campaign-item{text-align:left;display:flex;justify-content:space-between;gap:15px;align-items:center;border:1px solid var(--line);background:#142631;padding:18px}.campaign-item.active{border-color:var(--cyan)}.campaign-item:hover{background:#203941}.campaign-item strong{font-size:16px;display:block;margin-bottom:7px}.campaign-item small{font-size:12px;color:var(--muted)}.campaign-item .campaign-credit{color:var(--orange);font:16px var(--mono)}.game-shell:fullscreen .map-view{align-self:center;width:min(100%,calc((100dvh - 84px)*16/9))}@media(max-width:900px){.app.mapping .game-shell{width:min(100%,calc((100dvh - 148px)*16/9))}.hero-copy{top:14%}.home-actions{width:200px}.home-actions .primary{min-height:40px;font-size:11px}.home-actions .secondary{font-size:12px;padding:10px}.home-actions .text-button{font-size:12px;padding-top:11px}.map-toolbar h2{font-size:18px}.map-node{width:36px;height:36px}.node-number{font-size:15px}.node-stars{font-size:9px;top:calc(100% + 4px)}}@media(max-width:600px){.credit-balance{font-size:12px;padding:0;gap:3px}.topbar{flex-wrap:wrap;gap:5px}.brand{font-size:9px}.tools{gap:3px}nav{gap:9px}.nav{font-size:11px}.hero-copy{top:11%}.hero-copy h1{font-size:6.4vw;line-height:1;margin-bottom:9px}.hero-copy p{margin-bottom:9px;font-size:9px}.home-actions{width:150px}.home-actions .primary{min-height:28px;font-size:8px;padding:0 11px}.home-actions .secondary{margin-top:5px;padding:6px;font-size:10px}.home-actions .text-button{padding-top:6px;font-size:10px}.map-toolbar{min-height:56px;gap:10px}.map-toolbar h2{font-size:15px}.map-toolbar>div{gap:9px}.map-stars{font-size:10px}.campaign-button{font-size:10px;padding:7px 8px;gap:8px}.map-node{width:25px;height:25px}.node-number{font-size:10px}.node-stars{font-size:7px;letter-spacing:0;top:calc(100% + 2px)}.map-surface{aspect-ratio:4/3}.map-surface canvas{position:absolute;height:100%;object-fit:fill}.map-node:focus-visible{outline-offset:2px}.win-credits{font-size:11px;margin:5px 0}.detail-reward{font-size:11px}.detail-missions li{font-size:13px}}@media(max-height:650px) and (min-width:601px){.app.mapping .game-shell{width:min(100%,calc((100dvh - 122px)*16/9))}.hero-copy{top:12%}h1{font-size:clamp(32px,5vw,62px);margin-bottom:15px}.hero-copy p{margin-bottom:14px}.home-actions .primary{min-height:36px;font-size:11px}.home-actions .secondary{padding:9px;margin-top:6px}.home-actions .text-button{padding-top:9px}} .detail-bonus{font-size:12px;color:var(--muted);line-height:1.5;margin:-12px 0 22px}.nav:disabled{opacity:.4;cursor:default}.map-view .hidden{display:none}.game-shell:fullscreen .stage.hidden{display:none!important}.credit-balance{white-space:nowrap} .home-actions .secondary:disabled{opacity:.4;background:#122731b3;cursor:default} #enterLevelButton:disabled{background:#273d49;color:#8da2ad;cursor:default;transform:none}.map-node.locked:hover{background:#1d3846;box-shadow:0 0 14px #7bcbd421;border-color:#52737e} /* Hmatateľná odozva herného ovládania. */ button{transition:color .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease,filter .14s ease,transform .14s ease} button:disabled{filter:none} button:not(:disabled):active{filter:brightness(1.18)} .primary:hover:not(:disabled){box-shadow:0 6px 25px #ff835728} .primary:active:not(:disabled){transform:translateY(1px);filter:brightness(1.06)} .secondary:hover:not(:disabled),.campaign-button:hover,.campaign-item:hover,.tool:hover{border-color:#86d9d0;background:#243e49;box-shadow:0 0 17px #83dcd31c;transform:translateY(-1px)} .secondary:active:not(:disabled),.campaign-button:active,.campaign-item:active,.tool:active{transform:translateY(1px)} .nav:hover:not(:disabled),.text-button:hover,.close:hover{color:var(--cyan);text-shadow:0 0 12px #8ce7de55} .map-node:hover{transform:translate(-50%,-50%) scale(1.1);z-index:2} .map-node:active{transform:translate(-50%,-50%) scale(.96)} .map-node.locked:hover{transform:translate(-50%,-50%) scale(1.04)} .map-node:focus-visible{outline:2px solid #ffcf9c;outline-offset:5px;z-index:3} dialog{background:linear-gradient(140deg,#142733f7,#0d1c28fa);border-color:#41616e;box-shadow:0 30px 100px #000b,0 0 34px #7de4d610;position:fixed} dialog::before,dialog::after{content:'';position:absolute;width:23px;height:23px;pointer-events:none} dialog::before{top:0;left:0;border-top:2px solid #94e8db;border-left:2px solid #94e8db} dialog::after{bottom:0;right:0;border-bottom:2px solid #ff9a6a;border-right:2px solid #ff9a6a} .result-card{background:linear-gradient(145deg,#17303beF,#0f202dec);border-color:#52747e;box-shadow:0 20px 70px #0005,0 0 22px #88e8d910} .setting input{cursor:pointer}.setting:hover{color:#b6f0e6} @media(prefers-reduced-motion:reduce){button{transition:none}.map-node:hover,.map-node.locked:hover,.map-node:active{transform:translate(-50%,-50%)}.primary:hover:not(:disabled),.primary:active:not(:disabled),.secondary:hover:not(:disabled),.campaign-button:hover,.campaign-item:hover,.tool:hover,.secondary:active:not(:disabled),.campaign-button:active,.campaign-item:active,.tool:active{transform:none}} /* Nové rámy okien: vrstvený kov, skosené rohy a svetelné švy. */ dialog{padding:30px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,18px 100%,0 calc(100% - 18px));border:1px solid #608c9b;border-top-color:#93cdc9;border-bottom-color:#3e626f;background:radial-gradient(ellipse at 0 0,#37677440,transparent 58%),linear-gradient(145deg,#1b3440f8,#0c1c29fc 72%);box-shadow:0 30px 100px #000b,0 0 42px #70dbc320} dialog::before{inset:7px;width:auto;height:auto;border:1px solid #8ee2d523;border-top-color:#8ee2d549;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,12px 100%,0 calc(100% - 12px))} dialog::after{top:0;bottom:auto;left:28px;right:auto;width:76px;height:3px;border:none;background:#a5ede0;box-shadow:0 0 13px #89ebd977} .dialog-top{border-bottom:1px solid #65859366;padding-bottom:20px;margin-bottom:22px}.dialog-top h2{color:#eef4ee}.dialog-top .close{background:#203c47;border:1px solid #466671;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);font-size:24px} .detail-results{padding:3px 12px 16px;background:linear-gradient(90deg,#44616d22,transparent);border-bottom-color:#5a77824d} .detail-missions li{margin:6px 0;padding:13px 14px;background:#071c2773;border-left:2px solid #3d6977;box-shadow:inset 0 0 0 1px #688b961c;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)} .detail-missions li.earned{border-left-color:#a4edce;background:#143d3c55}.detail-missions li span:first-child{color:#8aafb6}.detail-reward{padding:18px 14px 19px;background:#122c367a;border-top:1px solid #44616e55}.detail-bonus{padding:0 14px;margin:6px 0 22px} .result-card{position:relative;padding:26px 30px;background:radial-gradient(ellipse at 0 0,#355a6477,transparent 70%),linear-gradient(145deg,#19333feF,#0c1d2bec);border:1px solid #749eaa;border-top-color:#a3e4d7;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,16px 100%,0 calc(100% - 16px))} .result-card::before{content:'';pointer-events:none;position:absolute;inset:7px;border:1px solid #89dace24;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,9px 100%,0 calc(100% - 9px))} .result-card::after{content:'';pointer-events:none;position:absolute;left:26px;top:0;width:57px;height:3px;background:#ffad7e} .result-missions{padding:13px 12px 3px;background:#0d243277;border-color:#65889455}.campaign-item{border-color:#416672;background:linear-gradient(135deg,#294753a8,#122733);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);box-shadow:inset 3px 0 #4b7481} .campaign-item.active{box-shadow:inset 3px 0 #a7e7da;background:linear-gradient(135deg,#2b585aa6,#183341);border-color:#9bddce}.campaign-button,.tool,.secondary{background:linear-gradient(145deg,#243f4b88,#142933c9);border-color:#3b5b68}.campaign-button{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)} .setting{padding-left:12px;padding-right:12px;background:linear-gradient(90deg,#244a5833,transparent);border-bottom-color:#405f6b77;margin:5px 0}.setting:hover{background:#23515b30}.save-note{padding:0 12px} .campaign-item:focus-visible,.campaign-button:focus-visible,.dialog-top .close:focus-visible{box-shadow:inset 0 0 0 2px #b6f7e7} @media(max-width:600px){dialog{padding:23px}.dialog-top{padding-bottom:14px;margin-bottom:16px}.detail-missions li{padding:10px 11px}.result-card{padding:12px 20px}.detail-reward{padding:13px 11px}.detail-bonus{margin-bottom:17px}} @media(max-height:650px) and (min-width:601px){.result-card{padding:13px 22px}} .result-card{max-height:calc(100% - 16px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4e7884 #102733} #levelDetailDialog,#settingsDialog{max-width:min(470px,94vw)} /* Päť miest: malé scenické mapy, stav postupu až pod obrazom. */ .app.selecting .game-shell{width:min(100%,1120px)}#cityView{width:100%}.city-heading,.city-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 20px}.city-heading h2,.city-header h2{font-size:24px;margin:0;letter-spacing:-.4px}#cityTotalStars{font:14px var(--mono);color:var(--orange);white-space:nowrap}.city-grid,#cityGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.city-card{grid-column:span 2;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;padding:0;background:#11242f;border:1px solid #3b5562;text-align:left;border-radius:9px;transition:border-color .16s,transform .16s,box-shadow .16s}.city-card:nth-child(4){grid-column:2/span 2}.city-card:nth-child(5){grid-column:4/span 2}.city-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 12px 35px #020b1545}.city-card:active{transform:translateY(-1px)}.city-card.active{border-color:var(--orange)}.city-card.locked{border-color:#30434e}.city-card.locked:hover{border-color:#617b89}.city-card:disabled{cursor:default}.city-card:disabled:hover{transform:none}.city-thumbnail{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#102637;border-bottom:1px solid #34505e}.city-name{font-size:17px;letter-spacing:-.2px;padding:17px 18px 7px;display:block}.city-stars{font:12px var(--mono);color:var(--orange);display:block;padding:0 18px 18px}.city-lock{position:absolute;right:11px;top:11px;background:#071a2ada;color:#adc4ce;border:1px solid #496371;border-radius:4px;padding:6px 8px;font-size:10px}.city-card.locked .city-thumbnail{filter:saturate(.7)}#mapCityButton{font-size:12px;padding:8px 10px;border:1px solid var(--line);color:var(--cyan);border-radius:4px;white-space:nowrap}#mapCityButton:hover{border-color:var(--cyan)}#abilityButton.active{background:#244942;border-color:var(--cyan);color:#baffed;box-shadow:0 0 10px #92e9df22}@media(max-width:900px){.city-grid,#cityGrid{gap:12px}.city-name{font-size:15px;padding:13px 13px 7px}.city-stars{font-size:10px;padding:0 13px 14px}.city-heading,.city-header{padding-bottom:16px}.city-heading h2,.city-header h2{font-size:21px}}@media(max-width:600px){.city-grid,#cityGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.city-card,.city-card:nth-child(4){grid-column:span 1}.city-card:nth-child(5){grid-column:1/span 2;width:calc(50% - 5px);justify-self:center}.city-name{font-size:13px;padding:11px 11px 6px}.city-stars{font-size:9px;padding:0 11px 12px}.city-lock{top:6px;right:6px;padding:4px 5px;font-size:8px}.city-heading,.city-header{gap:12px;padding-bottom:14px}.city-heading h2,.city-header h2{font-size:19px}#cityTotalStars{font-size:11px}#mapCityButton{font-size:10px;padding:6px}.map-toolbar>div{gap:7px}}@media(max-height:720px) and (min-width:601px){.app.selecting .game-shell{max-width:calc((100dvh - 142px)*2.1)}.city-grid,#cityGrid{gap:12px}.city-name{font-size:15px;padding-top:11px}.city-stars{padding-bottom:12px}.city-heading,.city-header{padding-bottom:14px}} .city-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 20px}.city-toolbar h2{font-size:24px;margin:0;letter-spacing:-.4px}.city-card.selected{border-color:var(--orange)}#mapCityButton.map-back{width:auto;margin:0;min-height:34px;line-height:1}@media(max-width:600px){.city-toolbar{padding-bottom:14px}.city-toolbar h2{font-size:19px}} .city-card.locked .city-thumbnail{filter:none;opacity:.94} #abilityButton[data-ability=phase][data-state=spectral]{color:#d4c8ff;border-color:#ad98f4;background:#30284c}#abilityButton[data-ability=magnet][data-state="-1"]{color:#ffcf85;border-color:#d6a552;background:#3b3024}#abilityButton[data-ability=gravity][data-state="-1"]{color:#b9e6ff;border-color:#8dc9eb;background:#223846}#abilityButton[data-ability=echo][data-state=echo]{color:#ffc0db;border-color:#d49dbb;background:#3d293b} /* Dvojznakové stavy ostávajú na jednom riadku aj v úzkom HUD. */ #curlButton{white-space:nowrap;min-width:42px;font-size:17px;padding:0 6px;flex-shrink:0}#abilityButton{white-space:nowrap;flex-shrink:0} @media(max-width:600px){.hud-stats{gap:8px}#curlButton{min-width:34px;font-size:14px;padding:0 3px}#abilityButton{min-width:34px;font-size:16px;padding:0 4px}} :root{--city-accent:#91eed5;--city-warm:#ffae79;--city-sky:#0a2133;--city-glass:#3c6a77} .app{background:radial-gradient(ellipse at 76% 12%,color-mix(in srgb,var(--city-sky) 65%,transparent),transparent 65%)}.topbar{border-bottom-color:color-mix(in srgb,var(--city-accent) 20%,#233440)}dialog{border-top-color:var(--city-accent);background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--city-glass) 25%,transparent),transparent 80%),#101d28}.city-summary,.shop-heading{display:flex;align-items:center;gap:18px}.city-summary .secondary{width:auto;margin:0;padding:8px 12px}.home-links{display:flex;align-items:center;gap:20px}.city-story{max-width:580px;margin:7px 0 0;color:#a8c5cc;font-size:12px;line-height:1.5}.detail-story{color:#9cb9c3;font-size:13px;line-height:1.5;margin:12px 0 18px}.map-toolbar>div:first-child{display:block} #shopDialog{width:900px}.shop-balance{color:var(--orange);font:18px var(--mono)}.shop-tabs{display:flex;gap:8px;margin-bottom:18px}.shop-tabs button{border:1px solid #365563;padding:10px 13px;color:#a8c3ca;border-radius:3px;font-size:12px}.shop-tabs button.selected{border-color:var(--city-accent);color:var(--city-accent);background:#23464b55}.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.shop-card{border:1px solid #35525e;background:#122732;overflow:hidden;border-radius:4px;display:flex;flex-direction:column}.shop-preview{width:100%;height:auto;aspect-ratio:5/3;image-rendering:pixelated}.shop-card>strong{font-size:13px;line-height:1.4;padding:13px 12px 5px;min-height:40px}.shop-status{font:12px var(--mono);color:var(--orange);padding:0 12px 8px}.shop-action{width:calc(100% - 20px);margin:5px 10px 12px;padding:10px 4px;font-size:11px}.shop-action:disabled{opacity:.45;cursor:default}.shop-note,.shop-message{font-size:12px;line-height:1.5;color:#98b2bf;margin:14px 0 0}.shop-message{min-height:18px;color:var(--city-accent)}@media(max-width:700px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-tabs{display:grid;grid-template-columns:repeat(2,1fr)}.shop-tabs button{padding:9px 5px}.city-summary{gap:10px}.city-summary .secondary{padding:7px;font-size:11px}.city-story{font-size:10px;max-width:65vw}.home-links{gap:12px}.shop-card>strong{font-size:12px;padding:10px 10px 5px}.detail-story{font-size:12px}} /* Herný dok: ovládanie patrí do rámu hry, nie do webovej navigácie. */ .app{padding:0;min-height:100dvh}main{min-height:100dvh;padding:14px;align-items:center}.game-shell{position:relative;width:min(100%,calc((100dvh - 28px)*16/9));max-width:1440px}.app.playing .game-shell{width:min(100%,calc((100dvh - 140px)*16/9))}.stage{border-color:#375562;border-radius:10px;box-shadow:0 18px 75px #0006}.system-dock{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:7px;z-index:8;background:#0c1e28bd;padding:7px 9px;border:1px solid #50717a52;border-radius:9px;backdrop-filter:blur(10px)}.dock-icon{width:30px;height:30px;min-width:30px;font:19px var(--sans);display:grid;place-items:center;color:#a8d0d1;border:0;background:none;border-radius:4px}.dock-icon:hover{color:var(--city-accent);background:#345e6647}.system-dock .credit-balance{font-size:13px;padding:0 5px;color:#ffc29b}.app.playing .system-dock{display:none}.home-overlay{border-radius:10px}.hero-copy{top:24%;left:7%}.hero-copy h1{font-size:clamp(46px,7vw,100px);letter-spacing:-5px}.hero-copy p{font-size:15px;margin-bottom:22px}.home-actions{width:270px}.home-actions>.primary,.home-actions>.secondary{min-height:48px}.home-links{gap:16px;justify-content:space-between}.home-links .text-button{font-size:12px}.pause-tools{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:3px}.pause-tools .text-button{font-size:11px}.game-hud{padding:0 6px 8px}.game-hud h2{font-size:18px}.message-row{height:48px}.app.mapping .game-shell{width:min(100%,calc((100dvh - 122px)*16/9));padding-top:55px}.app.mapping .system-dock{top:0}.map-toolbar{min-height:58px}.map-surface{border-radius:8px;overflow:hidden} .app.selecting .game-shell{width:min(100%,1320px);max-width:1320px}.city-view{position:relative;padding:70px 8px 0;width:100%;height:calc(100dvh - 32px);max-height:800px;min-height:530px;display:flex;flex-direction:column}.city-toolbar{padding:0 12px 16px;align-items:flex-end}.city-toolbar h2{font-size:32px;letter-spacing:-1px}.dock-eyebrow{font:10px var(--mono);letter-spacing:2px;color:#87aeb9;display:block;margin-bottom:7px}.city-navigation{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;flex:1;min-height:0}.city-grid,#cityGrid{display:grid;grid-template-columns:1fr;gap:10px;align-content:center}.city-card,.city-card:nth-child(4),.city-card:nth-child(5){grid-column:1;justify-self:stretch;width:100%;display:grid;grid-template-columns:103px minmax(0,1fr);grid-template-rows:1fr 1fr;height:82px;border-color:#456671;background:linear-gradient(105deg,var(--pod-sky),#102330);border-radius:5px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.city-card .city-thumbnail{grid-row:1/3;width:103px;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-right:1px solid #7ac3ce30}.city-card .city-name{align-self:end;padding:0 10px 4px;font-size:15px}.city-card .city-stars{padding:0 10px;align-self:start;font-size:10px}.city-card .city-lock{top:auto;bottom:8px;right:8px;padding:0;background:none;border:0}.city-card:hover{transform:translateX(4px);border-color:var(--pod-accent);box-shadow:0 0 30px color-mix(in srgb,var(--pod-accent) 12%,transparent)}.city-card.selected{border-color:var(--pod-accent);box-shadow:inset 3px 0 var(--pod-accent),0 0 28px color-mix(in srgb,var(--pod-accent) 12%,transparent)}.city-card:disabled{opacity:.72}.city-card:disabled:hover{transform:none}.city-destination{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--city-accent) 40%,#233f50);border-radius:12px;background:var(--city-sky);box-shadow:0 15px 75px #0006,inset 0 0 40px #8cded60a;min-height:390px}.city-destination::before{content:'';position:absolute;inset:10px;border:1px solid #c2f0de17;pointer-events:none;z-index:2}.city-destination canvas{width:100%;height:100%;object-fit:cover}.destination-copy{position:absolute;left:0;right:0;bottom:0;padding:60px 32px 24px;background:linear-gradient(transparent,#081727eb 40%,#081727fb);text-align:left}.destination-copy h3{font-size:clamp(30px,4vw,52px);letter-spacing:-1.4px;margin:5px 0 9px;color:#edf5ee}.destination-mechanic{font:11px var(--mono);letter-spacing:2px;color:var(--city-accent);text-transform:uppercase}.destination-copy p{font-size:12px;line-height:1.5;color:#acd0d4;max-width:540px;margin:0 0 15px}.destination-copy .primary{width:210px;background:var(--city-accent);color:var(--city-sky)}.destination-copy .primary:disabled{opacity:.4;cursor:default}.slot-list{display:grid;gap:12px}#slotDialog{width:630px}.slot-card{display:flex;align-items:center;gap:18px;padding:20px 18px;border:1px solid #42626f;background:linear-gradient(110deg,#23475077,#0b2332);text-align:left;border-radius:4px}.slot-card>span:nth-child(2){flex:1}.slot-index{font:24px var(--mono);color:var(--city-accent)}.slot-card strong{display:block;font-size:18px;margin-bottom:7px}.slot-card small{display:block;font:11px var(--mono);color:#95b6c0;line-height:1.5}.slot-arrow{font-size:24px;color:var(--city-accent)}.slot-card.selected{border-color:#8fdccc}.slot-card:hover:not(:disabled){background:#23505777;transform:translateX(3px);border-color:var(--city-accent)}.slot-card:disabled{opacity:.4}.shop-tabs{flex-wrap:wrap}.shop-tabs button{flex:1;white-space:nowrap} @media(max-width:900px){.city-navigation{grid-template-columns:210px minmax(0,1fr);gap:12px}.city-card,.city-card:nth-child(4),.city-card:nth-child(5){grid-template-columns:75px minmax(0,1fr);height:74px}.city-card .city-thumbnail{width:75px}.city-card .city-name{font-size:13px}.destination-copy{padding:50px 22px 20px}.city-toolbar h2{font-size:26px}.system-dock{gap:4px}.hero-copy h1{font-size:clamp(40px,7vw,70px)}.home-actions{width:220px}.hero-copy{top:22%}.home-actions>.primary,.home-actions>.secondary{min-height:38px;font-size:11px}} @media(max-width:600px){main{padding:8px;align-items:flex-start}.game-shell{margin:auto}.app.playing .game-shell{width:100%}.system-dock{top:8px;right:8px;gap:1px;padding:4px}.dock-icon{width:25px;height:25px;min-width:25px;font-size:16px}.system-dock .credit-balance{font-size:10px}.hero-copy{top:22%;left:6%}.hero-copy h1{font-size:7.5vw;letter-spacing:-2px;margin-bottom:10px}.hero-copy p{font-size:9px;margin-bottom:8px}.home-actions{width:150px}.home-actions>.primary,.home-actions>.secondary{min-height:26px;padding:4px 9px;font-size:9px}.home-links{gap:5px}.home-links .text-button{font-size:8px;padding-top:5px}.city-view{height:auto;min-height:0;max-height:none;padding-top:62px}.city-toolbar{padding:0 5px 12px}.city-toolbar h2{font-size:24px}.dock-eyebrow{font-size:8px;letter-spacing:1px}.city-summary .secondary{font-size:10px}.city-navigation{display:flex;flex-direction:column-reverse;gap:13px}.city-destination{min-height:320px;height:320px}.destination-copy{padding:40px 18px 15px}.destination-copy h3{font-size:28px}.destination-copy p{font-size:10px;margin-bottom:10px}.destination-mechanic{font-size:9px}.destination-copy .primary{width:180px;min-height:34px;font-size:11px}#cityGrid{grid-template-columns:1fr 1fr;gap:8px}.city-card,.city-card:nth-child(4),.city-card:nth-child(5){grid-column:auto;width:100%;height:70px;grid-template-columns:55px minmax(0,1fr)}.city-card .city-thumbnail{width:55px}.city-card .city-name{font-size:11px;padding-left:7px}.city-card .city-stars{font-size:8px;padding-left:7px}.city-card:nth-child(5){grid-column:1/3;justify-self:center;width:calc(50% - 4px)}.slot-card{gap:12px;padding:16px 12px}.slot-card strong{font-size:16px}.slot-card small{font-size:9px}.slot-index{font-size:20px}.app.mapping .game-shell{width:100%;padding-top:48px}.app.mapping .system-dock{top:0}.map-toolbar{min-height:70px}.game-hud{gap:8px}.game-hud h2{font-size:13px}.hud-stats{gap:7px}.shop-tabs{display:flex}.shop-tabs button{font-size:10px;padding:8px 7px}.pause-tools{gap:10px}} @media(max-height:650px) and (min-width:601px){.city-view{min-height:460px;padding-top:55px}.city-toolbar{padding-bottom:10px}.city-toolbar h2{font-size:26px}.city-card,.city-card:nth-child(4),.city-card:nth-child(5){height:66px}#cityGrid{gap:7px}.city-destination{min-height:330px}.destination-copy{padding-top:36px}.destination-copy h3{font-size:32px}.destination-copy p{font-size:11px;margin-bottom:10px}.system-dock{top:8px}} /* Editor je samostatný herný pracovný režim, skúšobná hra používa bežný HUD. */ .app.editing .game-shell{width:min(1500px,100%);padding-top:48px}.app.editing .system-dock{top:0}.app.editing .message-row{display:none}.editor-view{padding:10px}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 18px}.editor-heading h2{font-size:30px;margin:0}.editor-heading>div{display:flex;gap:12px}.editor-heading button{width:auto;min-height:38px;padding:8px 18px}.editor-layout{display:grid;grid-template-columns:215px minmax(0,1fr);gap:18px}.editor-tools{display:flex;flex-direction:column;gap:10px;padding:14px;background:#101d28;border:1px solid #29454f;border-radius:8px}.editor-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.editor-tool-grid button{font-size:10px;padding:8px 4px;min-height:32px}.editor-tool-grid .selected{border-color:var(--city-accent,#92e9df);color:var(--city-accent,#92e9df);background:#1e3540}.editor-tools label{display:flex;flex-direction:column;gap:5px;color:#a0b3bc;font-size:10px}.editor-tools input,.editor-tools select,.editor-storage select{background:#08151e;border:1px solid #2c4652;color:#e4eae9;border-radius:4px;padding:8px;font:inherit;min-width:0;width:100%}.editor-option-row,.editor-small-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-small-actions button{padding:8px 4px;font-size:10px}.editor-workspace{min-width:0}.editor-canvas-scroll{overflow:auto;max-height:calc(100dvh - 250px);border:1px solid #365865;background:#08151e;border-radius:8px}#editorCanvas{display:block;max-width:none;width:960px;height:540px;touch-action:none;cursor:crosshair}.editor-workspace>p{font-size:11px;color:#abc3cb;min-height:28px;margin:10px 0}.editor-storage{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.editor-storage select{width:160px;font-size:11px}.editor-storage button,.editor-import{font-size:10px;padding:8px 10px;min-height:32px}.editor-import{cursor:pointer;display:inline-flex;align-items:center}.editor-import input{position:absolute;width:1px;height:1px;opacity:0}.editor-import:focus-within{outline:2px solid #92e9df;outline-offset:3px} @media(max-width:900px){.editor-layout{grid-template-columns:180px minmax(0,1fr);gap:10px}.editor-tools{padding:10px}.editor-heading h2{font-size:24px}.editor-heading{margin-bottom:12px}.editor-canvas-scroll{max-height:calc(100dvh - 290px)}} @media(max-width:600px){.app.editing .game-shell{padding-top:42px}.editor-view{padding:5px}.editor-heading{align-items:flex-start;margin-bottom:10px;gap:8px}.editor-heading h2{font-size:19px}.editor-heading>div{gap:5px}.editor-heading button{font-size:9px;padding:6px 8px;min-height:28px}.editor-layout{display:flex;flex-direction:column}.editor-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-tool-grid{grid-column:1/3;grid-template-columns:repeat(4,1fr)}.editor-tool-grid button{font-size:9px}.editor-canvas-scroll{max-height:320px}.editor-workspace>p{font-size:10px}.editor-storage{gap:6px}.editor-storage select{width:140px}} #editorCanvas{width:100%;height:auto;aspect-ratio:16/9}.editor-canvas-scroll{max-height:none} @media(min-width:601px){.editor-layout{height:calc(100dvh - 168px);min-height:350px}.editor-tools{overflow:auto}.editor-workspace{display:flex;flex-direction:column;min-height:0}.editor-canvas-scroll{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#editorCanvas{width:min(100%,calc((100dvh - 270px)*16/9));max-width:100%;height:auto;flex-shrink:0}.editor-storage{margin-top:auto}.editor-workspace>p{margin:8px 0;min-height:24px}.editor-storage .secondary,.editor-storage .text-button{width:auto}.editor-heading{margin-bottom:12px}} /* Stručný výsledok: výrazné hviezdy, iba hlavné akcie. Smrť ostáva nad dráhou. */ .toast.death{display:flex;align-items:center;justify-content:center;width:100%;padding:7px 14px;max-height:36px;background:#3b1b27;border:1px solid #f1738e;border-left:5px solid #f1738e;border-radius:4px;color:#ffe0e6;line-height:18px;-webkit-line-clamp:unset} .death-label{white-space:nowrap;font:700 13px var(--mono);letter-spacing:.5px;color:#ffb5c8} .stage.attempt-lost{border-color:#ff7b9b;box-shadow:0 0 0 2px #ff7b9b77,0 18px 75px #0006} #winOverlay{background:#061b20d6} #winOverlay .victory-card{width:350px;padding:30px 28px;border-color:#87efd1;border-top-color:#c5ffe8;background:radial-gradient(ellipse at 0 0,#28665299,transparent 75%),linear-gradient(145deg,#153c39f5,#0b252df5)} #winOverlay .victory-card::after{background:#99ffce;width:76px;height:4px} #winTitle{font-size:23px;line-height:1.12;letter-spacing:-.6px;margin:0 0 18px;color:#d7ffec} #winOverlay .result-stars{display:flex;justify-content:center;gap:13px;font-size:56px;line-height:1.1;letter-spacing:0;color:#ffd58e;margin:0 0 18px} #winOverlay .win-credits{font:14px var(--mono);color:#b8d5c8;margin:0 0 18px} #winOverlay .primary{background:#a0f0d3;color:#102d2a;margin-top:0} #winOverlay .primary:hover{background:#c7ffe6} #winOverlay .secondary{padding:11px;margin-top:9px} #winOverlay .text-button{padding-top:15px} @media(max-width:600px){#winOverlay{position:fixed;inset:12px;z-index:20;border:1px solid #53796b;border-radius:8px}#winOverlay .victory-card{width:min(350px,calc(100vw - 48px));max-width:none;padding:26px 23px}#winOverlay #winTitle{font-size:22px}#winOverlay .result-stars{font-size:52px}#winOverlay .primary{min-height:42px;font-size:12px}#winOverlay .secondary,#winOverlay .text-button{font-size:12px}.death-label{font-size:11px}} @media(max-height:650px) and (min-width:601px){#winOverlay .victory-card{padding:20px 25px}#winOverlay #winTitle{font-size:21px;margin-bottom:13px}#winOverlay .result-stars{font-size:46px;margin-bottom:12px}#winOverlay .win-credits{margin-bottom:12px}#winOverlay .primary{min-height:36px}#winOverlay .text-button{padding-top:10px}} /* A distinct finale remains a game screen, with the slot's equipped robot. */ .app.ending .system-dock{display:none}.app.ending .game-shell{width:min(100%,calc((100dvh - 28px)*16/9))}.app.ending .message-row{display:none} .ending-view{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#071723;border:1px solid #547c7f;border-radius:10px;box-shadow:0 18px 75px #0006} #endingScene{width:100%;height:100%;display:block}.ending-copy{position:absolute;top:50%;right:7%;width:37%;transform:translateY(-50%)}.ending-seal{display:block;color:#9bf0d0;font:11px var(--mono);letter-spacing:2px;margin-bottom:19px}.ending-copy h2{font-size:clamp(34px,6vw,78px);line-height:.96;letter-spacing:-3px;margin:0 0 23px;color:#e1fff2}.ending-copy p{font-size:14px;line-height:1.7;color:#adcac8;margin:0 0 24px}.ending-stars{font:24px var(--mono);color:#ffd58e;margin:0 0 25px}.ending-copy .primary,.ending-copy .secondary{width:100%;min-height:44px}.ending-copy .primary{background:#a0f0d3;color:#102d2a}.ending-copy .primary:hover{background:#c7ffe6}.ending-copy .secondary{margin-top:9px}.ending-copy .text-button{display:block;margin:0 auto;padding-top:15px} #abilityButton{position:relative}#abilityButton::after{content:'';position:absolute;left:3px;bottom:1px;right:3px;height:2px;background:var(--city-accent);transform:scaleX(var(--ability-ready,1));transform-origin:left}#abilityButton[data-pending="true"]{border-color:#ffd58e;box-shadow:0 0 10px #ffd58e44}#abilityButton[data-pending="true"]::after{background:#ffd58e} @media(max-height:650px) and (min-width:601px){.ending-copy h2{font-size:clamp(34px,5vw,65px);margin-bottom:15px}.ending-seal{margin-bottom:14px}.ending-copy p{margin-bottom:15px;font-size:12px}.ending-stars{margin-bottom:15px;font-size:21px}.ending-copy .primary,.ending-copy .secondary{min-height:34px;font-size:11px}.ending-copy .text-button{font-size:11px;padding-top:10px}} @media(max-width:600px){.app.ending .game-shell{width:100%}.ending-view{aspect-ratio:auto;min-height:calc(100dvh - 16px);display:flex;flex-direction:column}.ending-view #endingScene{height:260px;width:100%;object-fit:cover;object-position:left top;opacity:.8}.ending-copy{position:relative;top:auto;right:auto;width:auto;transform:none;text-align:center;padding:3px 30px 26px;margin-top:-5px}.ending-copy h2{font-size:46px;letter-spacing:-2px;line-height:1}.ending-copy h2 br{display:none}.ending-copy p{font-size:12px;margin-bottom:18px}.ending-seal{font-size:9px;margin-bottom:12px}.ending-stars{font-size:23px;margin-bottom:20px}.ending-copy .primary,.ending-copy .secondary{font-size:12px}.ending-copy .text-button{font-size:12px}} #endingTitle:focus{outline:none} /* Brief game feedback; no delay is added to controls or the next attempt. */ @keyframes result-arrive{from{opacity:.2;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @keyframes star-arrive{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}} #winOverlay:not(.hidden) .victory-card{animation:result-arrive .2s ease-out both} #winOverlay:not(.hidden) .result-stars span:not(.empty){animation:star-arrive .24s cubic-bezier(.2,.8,.3,1.2) both} #winOverlay .result-stars span:nth-child(2){animation-delay:.07s}#winOverlay .result-stars span:nth-child(3){animation-delay:.14s} @media(prefers-reduced-motion:reduce){#winOverlay .victory-card,#winOverlay .result-stars span{animation:none!important}} /* Short presentation-only reception failure, never a gameplay obstacle. */ #signalLoss{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1000;image-rendering:pixelated;opacity:.85} #signalLoss[hidden]{display:none} #app.signal-impact{transform:translate(var(--signal-x,0px),var(--signal-y,0px))} @media(prefers-reduced-motion:reduce){#signalLoss{display:none!important}#app.signal-impact{transform:none!important}} /* Mobile is a full scene with thumb controls over it, never a framed 16:9 card. */ .ui-icon{display:block;width:21px;height:21px;flex-shrink:0;pointer-events:none} .ui-icon-label{font:700 12px var(--mono);pointer-events:none} .tool:has(.ui-icon){display:flex;align-items:center;justify-content:center;gap:5px} .touch-controls,.rotate-prompt,.mobile-help{display:none} html.mobile-device{ --mobile-vh:100vh;--mobile-vw:100vw; --safe-top:max(8px,env(safe-area-inset-top,0px)); --safe-bottom:max(8px,env(safe-area-inset-bottom,0px)); --safe-left:max(8px,env(safe-area-inset-left,0px)); --safe-right:max(8px,env(safe-area-inset-right,0px)); --mobile-hud:44px; height:100%;overflow:hidden;background:var(--bg); } @supports(height:100dvh){html.mobile-device{--mobile-vh:100dvh;--mobile-vw:100dvw}} html.mobile-device body{height:var(--mobile-vh);width:100%;max-width:100vw;overflow:hidden;overscroll-behavior:none} html.mobile-device .app{height:var(--mobile-vh);min-height:0;padding:0;overflow:hidden} html.mobile-device main{height:100%;min-height:0;width:100%;padding:0;align-items:stretch;overflow:hidden} html.mobile-device .app .game-shell, html.mobile-device .app .game-shell:fullscreen, html.mobile-device .app .game-shell.fullscreen-fallback{ width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0; display:flex;flex-direction:column;justify-content:center;align-items:center; } html.mobile-device .stage{ width:100%;height:100%;aspect-ratio:auto;flex-shrink:0;align-self:stretch; border:0;border-radius:0;box-shadow:none; } html.mobile-device #game{width:100%;height:100%;object-fit:contain;touch-action:none} html.mobile-device button, html.mobile-device .system-dock, html.mobile-device .stage, html.mobile-device .map-surface{ -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent; } html.mobile-device button{touch-action:manipulation;min-height:44px} html.mobile-device input,html.mobile-device select,html.mobile-device textarea{ touch-action:manipulation;-webkit-user-select:text;user-select:text;font-size:16px; } html.mobile-device .system-dock{top:var(--safe-top);right:var(--safe-right);padding:4px;gap:2px;border-radius:6px} html.mobile-device .dock-icon{width:44px;height:44px;min-width:44px} html.mobile-device .system-dock .credit-balance{font-size:12px;padding:0 7px} html.mobile-device .hero-copy{top:clamp(24px,calc(var(--mobile-vh)*.12),72px);left:calc(var(--safe-left) + 4vw);width:42%;max-width:420px} html.mobile-device .hero-copy h1{font-size:clamp(32px,calc(var(--mobile-vh)*.12),56px);line-height:.98;letter-spacing:-2.5px;margin:0 0 12px} html.mobile-device .hero-copy p{font-size:12px;line-height:1.4;margin:0 0 12px} html.mobile-device .home-actions{width:230px;max-width:100%} html.mobile-device .home-actions>.primary, html.mobile-device .home-actions>.secondary{min-height:44px;font-size:12px;padding:8px 14px} html.mobile-device .home-actions>.secondary{margin-top:7px} html.mobile-device .home-links{gap:3px;flex-wrap:wrap;justify-content:space-between} html.mobile-device .home-links .text-button{font-size:11px;min-height:44px;padding:8px 3px} html.mobile-device .app.playing .game-shell{ display:block;position:relative; } html.mobile-device .app.playing .stage{ width:100%;height:100%;max-height:none;min-height:0;border:0;border-radius:0;box-shadow:none; } html.mobile-device .app.playing .game-hud{ position:absolute;top:var(--safe-top);left:calc(var(--safe-left) + 58px);right:var(--safe-right); width:auto;min-height:0;height:var(--mobile-hud);z-index:9; display:flex;flex-wrap:nowrap;align-content:normal;gap:12px;padding:0 0 0 8px; pointer-events:none;text-shadow:0 1px 4px #07111c; } html.mobile-device .game-hud h2{font-size:13px;line-height:1.2;max-width:180px;min-width:0;flex:1;width:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} html.mobile-device .hud-stats{flex-shrink:0;width:auto;gap:9px} html.mobile-device .hud-stats strong{font-size:13px} html.mobile-device .hud-stats .stat-label{display:none} html.mobile-device #timeLimit{font-size:10px} html.mobile-device .time-stat{gap:3px} html.mobile-device .game-hud .tool{width:44px;height:44px;min-width:44px;pointer-events:auto;background:#102833a6;border-radius:10px} html.mobile-device #curlButton,html.mobile-device #abilityButton{display:none!important} html.mobile-device .app.playing .message-row{ position:absolute;z-index:8;top:calc(var(--safe-top) + 46px);left:50%;transform:translateX(-50%); display:flex;align-items:center;justify-content:center;height:28px;width:min(60%,480px);min-width:0;padding:0;pointer-events:none; } html.mobile-device .toast,html.mobile-device .toast.death{ font-size:11px;line-height:16px;max-height:26px;padding:3px 7px;max-width:100%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:#081b25bc;border-radius:5px; } html.mobile-device .death-label{font-size:10px} html.mobile-device .app.playing .touch-controls{ position:absolute;inset:0;display:block;z-index:9;pointer-events:none; } html.mobile-device .touch-rail{display:contents} html.mobile-device .touch-directions{position:absolute;bottom:calc(var(--safe-bottom) + 12px)} html.mobile-device .touch-rail-left .touch-directions{left:calc(var(--safe-left) + 16px);display:flex;flex-direction:row;gap:16px} html.mobile-device .touch-rail-right .touch-directions{right:calc(var(--safe-right) + 20px);width:144px;height:144px} html.mobile-device .touch-button{ display:flex;align-items:center;justify-content:center;width:64px;height:64px;min-width:64px;min-height:64px; border:1px solid #a0cbd27a;border-radius:18px;color:#e0f8f2;background:#102b3870; box-shadow:0 2px 9px #0003,inset 0 1px #bcf7ed16;pointer-events:auto;touch-action:none; font:700 22px var(--mono);padding:0;transition:background .08s,border-color .08s; } html.mobile-device .touch-button .ui-icon{width:27px;height:27px} html.mobile-device .touch-button[data-control="jump"]{position:absolute;right:0;top:0} html.mobile-device .touch-button[data-control="curl"]{position:absolute;left:0;bottom:0} html.mobile-device .touch-button[data-control="restart"],html.mobile-device .touch-button[data-control="special"]{width:48px;height:48px;min-width:48px;min-height:48px;border-radius:9px} html.mobile-device .touch-button[data-control="restart"]{position:absolute;left:var(--safe-left);top:var(--safe-top);width:44px;height:44px;min-width:44px;min-height:44px} html.mobile-device .touch-button[data-control="special"]{position:absolute;left:calc(var(--safe-left) + 184px);bottom:calc(var(--safe-bottom) + 12px)} html.mobile-device .touch-button:active,html.mobile-device .touch-button.is-pressed, html.mobile-device .touch-button[aria-pressed="true"]{background:#3e6a70;border-color:#b1f8e6;box-shadow:inset 0 0 0 2px #9ff5dc22} html.mobile-device .touch-button:disabled{opacity:.35} html.mobile-device .touch-button[data-control="special"]{border-color:var(--city-accent,#92e9df);color:var(--city-accent,#92e9df)} html.mobile-device .touch-controls.hidden,html.mobile-device .touch-controls[hidden]{display:none!important} html.mobile-device .app.playing:has(.screen-overlay:not(.hidden)) .touch-controls{visibility:hidden} html.mobile-device .screen-overlay{overflow:auto;overscroll-behavior:contain;padding:10px;place-items:center;z-index:10} html.mobile-device .result-card,html.mobile-device #winOverlay .victory-card{width:350px;max-width:95%;max-height:100%;overflow:auto;padding:15px 20px} html.mobile-device .result-card h2{font-size:25px;margin:0 0 10px} html.mobile-device .result-card .primary,html.mobile-device #winOverlay .primary{min-height:44px;font-size:12px;margin-top:8px} html.mobile-device .result-card .secondary,html.mobile-device #winOverlay .secondary{min-height:44px;font-size:12px;padding:10px;margin-top:7px} html.mobile-device .result-card .text-button,html.mobile-device #winOverlay .text-button{font-size:12px;min-height:44px;padding:10px 5px} html.mobile-device .pause-tools{gap:8px;margin:0} html.mobile-device #winOverlay{position:fixed;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);border:0;border-radius:0;z-index:30} html.mobile-device #winOverlay #winTitle{font-size:21px;margin-bottom:10px} html.mobile-device #winOverlay .result-stars{font-size:39px;margin-bottom:10px} html.mobile-device #winOverlay .win-credits{font-size:12px;margin-bottom:8px} html.mobile-device dialog{ width:min(820px,calc(var(--mobile-vw) - var(--safe-left) - var(--safe-right) - 16px)); max-width:calc(var(--mobile-vw) - var(--safe-left) - var(--safe-right) - 16px); max-height:calc(var(--mobile-vh) - var(--safe-top) - var(--safe-bottom) - 16px); margin:auto;padding:18px 22px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; touch-action:pan-y;border-radius:8px; } html.mobile-device .dialog-top{gap:14px;margin-bottom:14px} html.mobile-device .dialog-top h2{font-size:23px} html.mobile-device .close{width:44px;height:44px;min-width:44px;flex-shrink:0} html.mobile-device .setting{font-size:14px;min-height:52px;padding:10px 12px;margin:4px 0} html.mobile-device .setting input{width:24px;height:24px;margin:0 0 0 14px} html.mobile-device .save-note{font-size:12px;margin:12px 0;line-height:1.5} html.mobile-device dialog .primary{min-height:44px;font-size:12px} html.mobile-device dialog .secondary,html.mobile-device dialog .text-button{font-size:12px;min-height:44px} html.mobile-device .mobile-help{display:block;font-size:13px;line-height:1.7;padding:12px 15px;background:#1d343d;border-left:2px solid var(--cyan);color:#c5dedf;margin-bottom:15px} html.mobile-device .mobile-help p{margin:4px 0} html.mobile-device .help-grid{grid-template-columns:1fr 1fr;gap:5px 20px} html.mobile-device .help-grid p{font-size:12px} html.mobile-device .slot-card{min-height:78px;padding:12px 15px;gap:15px} html.mobile-device .slot-card strong{font-size:17px;margin-bottom:5px} html.mobile-device .slot-card small{font-size:11px} html.mobile-device .app.selecting .game-shell{justify-content:stretch} html.mobile-device .city-view{height:100%;min-height:0;max-height:none;padding:58px 0 0;overflow:hidden} html.mobile-device .city-toolbar{min-height:46px;flex-shrink:0;padding:0 4px 9px;gap:14px;align-items:center} html.mobile-device .city-toolbar h2{font-size:24px} html.mobile-device .dock-eyebrow{display:none} html.mobile-device .city-summary{gap:10px} html.mobile-device .city-summary .secondary{font-size:12px;padding:8px 12px;min-height:44px} html.mobile-device .city-navigation{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;min-height:0;flex:1} html.mobile-device .city-grid,html.mobile-device #cityGrid{grid-template-columns:1fr;align-content:start;gap:8px;overflow:auto;overscroll-behavior:contain;padding:1px 4px 6px 0} html.mobile-device .city-card,html.mobile-device .city-card:nth-child(4),html.mobile-device .city-card:nth-child(5){grid-column:1;width:100%;height:62px;min-height:62px;grid-template-columns:74px minmax(0,1fr)} html.mobile-device .city-card .city-thumbnail{width:74px} html.mobile-device .city-card .city-name{font-size:13px;padding:0 9px 4px} html.mobile-device .city-card .city-stars{font-size:10px;padding:0 9px} html.mobile-device .city-destination{min-height:0;height:100%;border-radius:7px} html.mobile-device .destination-copy{padding:45px 18px 12px} html.mobile-device .destination-copy h3{font-size:28px;letter-spacing:-.7px;margin:5px 0 7px} html.mobile-device .destination-mechanic{font-size:10px;letter-spacing:1px} html.mobile-device .destination-copy p{font-size:12px;line-height:1.4;margin:0 0 9px} html.mobile-device .destination-copy .primary{min-height:44px;font-size:12px;width:190px} html.mobile-device .app.mapping .game-shell{padding-top:58px;align-items:stretch;justify-content:flex-start} html.mobile-device .map-view{min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;touch-action:pan-x pan-y} html.mobile-device .map-toolbar{position:sticky;left:0;top:0;z-index:4;min-height:54px;padding:0 7px 9px;background:#0a1119eF;width:100%} html.mobile-device .map-toolbar h2{font-size:18px} html.mobile-device .city-story{display:none} html.mobile-device .map-toolbar .secondary{width:auto;min-height:44px;font-size:12px;padding:8px 12px;margin:0} html.mobile-device .map-stars{font-size:12px} html.mobile-device .map-surface{width:max(100%,960px);min-width:960px;aspect-ratio:16/9;border-radius:6px} html.mobile-device .map-surface canvas{position:static;width:100%;height:100%;object-fit:contain} html.mobile-device .map-node{width:44px;height:44px;min-width:44px;min-height:44px} html.mobile-device .node-number{font-size:17px} html.mobile-device .node-stars{font-size:10px;letter-spacing:0;top:calc(100% + 3px)} html.mobile-device .shop-tabs{display:flex;gap:7px;flex-wrap:wrap} html.mobile-device .shop-tabs button{font-size:12px;min-height:44px;padding:8px 12px} html.mobile-device .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} html.mobile-device .shop-card>strong{font-size:13px} html.mobile-device .shop-action{font-size:12px;min-height:44px} html.mobile-device .app.editing .game-shell{padding-top:54px;justify-content:flex-start;align-items:stretch;overflow:auto} html.mobile-device .editor-layout{height:auto;min-height:0;grid-template-columns:180px minmax(0,1fr)} html.mobile-device .editor-tools{overflow:visible} html.mobile-device .editor-heading{margin:10px 0} html.mobile-device .editor-heading button{min-height:44px;font-size:11px} html.mobile-device .editor-tool-grid button{min-height:44px;font-size:11px} html.mobile-device .editor-storage select,html.mobile-device .editor-tools input,html.mobile-device .editor-tools select{font-size:16px;min-height:44px} html.mobile-device .app.ending .game-shell{justify-content:center} html.mobile-device .ending-view{aspect-ratio:16/9;width:min(100%,calc((var(--mobile-vh) - var(--safe-top) - var(--safe-bottom))*16/9));min-height:0;border-radius:6px} html.mobile-device .ending-copy{top:50%;right:5%;width:43%;padding:0;position:absolute;transform:translateY(-50%);margin:0;text-align:left} html.mobile-device .ending-copy h2{font-size:34px;letter-spacing:-1.5px;margin-bottom:9px} html.mobile-device .ending-copy p{font-size:11px;line-height:1.4;margin-bottom:10px} html.mobile-device .ending-seal{font-size:9px;letter-spacing:1px;margin-bottom:9px} html.mobile-device .ending-stars{font-size:18px;margin-bottom:9px} html.mobile-device .ending-copy .primary,html.mobile-device .ending-copy .secondary,html.mobile-device .ending-copy .text-button{font-size:11px;min-height:44px} html.mobile-device .ending-copy .secondary{margin-top:6px;padding:7px} html.mobile-device .ending-copy .text-button{padding:9px} html.mobile-device .ending-view #endingScene{height:100%;width:100%;object-fit:contain;opacity:1} html.mobile-device .rotate-prompt{ position:fixed;inset:0;z-index:1100;align-items:center;justify-content:center;flex-direction:column; padding:32px max(24px,env(safe-area-inset-right)) 32px max(24px,env(safe-area-inset-left)); background:radial-gradient(ellipse at 50% 25%,#1c3844,transparent 70%),#0a1119;text-align:center;color:#dceeea; } html.mobile-device .rotate-phone{width:96px;height:96px;color:var(--cyan);margin-bottom:25px} html.mobile-device .rotate-prompt h2{font-size:29px;letter-spacing:-1px;margin:0 0 14px} html.mobile-device .rotate-prompt p{font-size:15px;line-height:1.7;color:#a6bdc7;margin:0} html.mobile-device.mobile-portrait .rotate-prompt{display:flex} html.mobile-device.mobile-portrait #app,html.mobile-device.mobile-portrait dialog{visibility:hidden!important} html.mobile-device.mobile-portrait dialog::backdrop{background:transparent;backdrop-filter:none} html.mobile-device.mobile-portrait #signalLoss{display:none!important} @media(max-height:350px){ html.mobile-device .hero-copy{top:24px} html.mobile-device .hero-copy h1{font-size:32px;margin-bottom:10px} html.mobile-device .hero-copy p{display:none} html.mobile-device .home-actions>.primary,html.mobile-device .home-actions>.secondary{min-height:44px} html.mobile-device .city-view{padding-top:54px} html.mobile-device .city-toolbar{min-height:44px} html.mobile-device .destination-copy h3{font-size:25px} html.mobile-device .destination-copy p{display:none} html.mobile-device .ending-copy h2{font-size:28px} html.mobile-device .ending-copy p{display:none} } html.mobile-device .app .game-shell:fullscreen{padding:0} html.mobile-device .app.playing .game-shell:fullscreen .touch-controls{inset:0} html.mobile-device .app .game-shell:fullscreen .system-dock{top:var(--safe-top);right:var(--safe-right)} /* 104: panels use the available landscape height, including Safari's bars. */ .website-link{position:absolute;left:7%;bottom:16px;z-index:2;color:#b7cbd0;text-decoration:none;font-size:12px;min-height:44px;display:flex;align-items:center;padding:0 8px;border-radius:4px} .website-link:hover,.pause-tools a:hover{color:var(--cyan)} .pause-tools a{text-decoration:none} html.mobile-device:not(.mobile-portrait) dialog{width:min(900px,calc(100vw - var(--safe-left) - var(--safe-right) - 16px));max-width:none;max-height:calc(var(--mobile-vh) - var(--safe-top) - var(--safe-bottom) - 12px);padding:10px 16px;overflow:auto} html.mobile-device dialog .dialog-top{height:44px;min-height:44px;margin:0 0 8px;gap:12px} html.mobile-device dialog .dialog-top h2{font-size:21px} html.mobile-device dialog .primary,html.mobile-device dialog .secondary{min-height:44px;margin-top:0;font-size:12px} html.mobile-device .website-link{left:auto;right:var(--safe-right);bottom:var(--safe-bottom);background:#0a2028c9;min-height:44px} html.mobile-device .hero-copy{top:18px} html.mobile-device .hero-copy h1{font-size:clamp(32px,calc(var(--mobile-vh)*.12),50px);margin-bottom:10px} html.mobile-device .hero-copy p{margin-bottom:10px} html.mobile-device .home-links{gap:8px} html.mobile-device #slotDialog{max-width:900px} html.mobile-device .slot-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} html.mobile-device .slot-card{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:12px;min-height:116px;align-items:start} html.mobile-device .slot-card .slot-arrow{grid-column:2;text-align:right;line-height:20px} html.mobile-device .slot-card strong{font-size:15px;margin-bottom:8px} html.mobile-device .slot-card small{font-size:11px;line-height:1.5} html.mobile-device #settingsDialog{max-width:850px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px} html.mobile-device #settingsDialog:not([open]){display:none} html.mobile-device #settingsDialog .dialog-top{grid-column:1/-1;margin:0} html.mobile-device #settingsDialog .setting{min-height:60px;padding:8px 12px;gap:12px;font-size:13px;background:#172b35;border:1px solid #2e4954} html.mobile-device #settingsDialog .setting input{width:24px;height:24px;flex-shrink:0} html.mobile-device #settingsDialog .save-note{grid-column:1/3;font-size:11px;line-height:1.5;margin:0;align-self:center} html.mobile-device #settingsDialog>.primary{grid-column:3} html.mobile-device #levelDetailDialog{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(220px,1.3fr);gap:4px 24px;align-content:start} html.mobile-device #levelDetailDialog:not([open]){display:none} html.mobile-device #levelDetailDialog .dialog-top{grid-column:1/-1;margin:0;height:44px} html.mobile-device #levelDetailDialog .detail-number{font-size:10px;margin:0} html.mobile-device #levelDetailDialog .detail-results{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0} html.mobile-device #levelDetailDialog .detail-stars{font-size:25px} html.mobile-device #levelDetailDialog #detailBest{font-size:11px} html.mobile-device #levelDetailDialog .detail-story{grid-column:1;grid-row:3;margin:2px 0;font-size:12px;line-height:1.4} html.mobile-device #levelDetailDialog .detail-missions{grid-column:2;grid-row:2/5;margin:0;padding:0;border:0;display:grid;gap:4px;align-content:start} html.mobile-device #levelDetailDialog .detail-missions li{font-size:12px;line-height:1.4;padding:5px 8px;min-height:28px} html.mobile-device #levelDetailDialog .detail-reward{grid-column:1;grid-row:4;margin:0;padding:2px 0;font-size:10px;gap:8px;border:0} html.mobile-device #levelDetailDialog .detail-bonus{display:none} html.mobile-device #levelDetailDialog>.primary{grid-column:2;grid-row:5;margin:0} html.mobile-device #helpDialog .help-grid,html.mobile-device #helpDialog .help-callout{display:none} html.mobile-device .mobile-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 10px} html.mobile-device .mobile-help p{margin:0;font-size:12px;line-height:1.5} html.mobile-device .mobile-help strong{display:block;margin-bottom:5px;color:var(--text)} html.mobile-device #helpDialog>.primary{width:calc((100% - 28px)/3);margin-left:auto} html.mobile-device #newGameDialog{max-width:650px} html.mobile-device #newGameWarning{font-size:13px;margin:8px 0 14px} html.mobile-device #newGameDialog>.primary,html.mobile-device #newGameDialog>.secondary{display:inline-flex;width:calc(50% - 6px);margin:0 8px 0 0} html.mobile-device #newGameDialog>.secondary{margin-right:0;justify-content:center} html.mobile-device #pauseOverlay .result-card{width:min(640px,95%);max-width:none;display:grid;grid-template-columns:1fr 1.25fr;gap:7px 20px;padding:14px 20px;overflow:visible} html.mobile-device #pauseOverlay h2{grid-column:1;grid-row:1/3;align-self:center;font-size:30px;margin:0} html.mobile-device #resumeButton{grid-column:2;grid-row:1;margin:0} html.mobile-device #restartPauseButton{grid-column:2;grid-row:2;margin:0} html.mobile-device #menuPauseButton{grid-column:2;grid-row:3;margin:0;padding:0;min-height:44px} html.mobile-device #pauseOverlay .pause-tools{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:nowrap;margin:0;gap:10px} html.mobile-device #pauseOverlay .pause-tools .text-button{min-height:44px;padding:0 4px;display:flex;align-items:center;white-space:nowrap} html.mobile-device #winOverlay .victory-card{width:min(620px,95%);display:grid;grid-template-columns:1fr 1.2fr;gap:6px 24px;padding:16px 22px;overflow:visible} html.mobile-device #winOverlay #winTitle{grid-column:1;grid-row:1;align-self:end;font-size:21px;margin:0} html.mobile-device #winOverlay .result-stars{grid-column:1;grid-row:2;font-size:42px;gap:8px;margin:0;align-self:center} html.mobile-device #winOverlay .win-credits{grid-column:1;grid-row:3;margin:0;align-self:start;font-size:13px} html.mobile-device #winOverlay #nextButton{grid-column:2;grid-row:1;margin:0} html.mobile-device #winOverlay #replayButton{grid-column:2;grid-row:2;margin:0} html.mobile-device #winOverlay #menuWinButton{grid-column:2;grid-row:3;margin:0;padding:0} html.mobile-device .city-view{padding:54px var(--safe-right) var(--safe-bottom) var(--safe-left);min-height:0} html.mobile-device .city-toolbar{min-height:40px;height:40px;padding:0 0 4px;align-items:center} html.mobile-device .city-toolbar h2{font-size:21px} html.mobile-device .city-navigation{display:grid;grid-template-columns:1fr;grid-template-rows:62px minmax(0,1fr);gap:6px} html.mobile-device #cityGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible;align-content:stretch} html.mobile-device .city-card,html.mobile-device .city-card:nth-child(4),html.mobile-device .city-card:nth-child(5){grid-column:auto;width:100%;height:62px;grid-template-columns:42px minmax(0,1fr);gap:0;clip-path:none} html.mobile-device .city-card .city-thumbnail{width:42px;opacity:.8} html.mobile-device .city-card .city-name{font-size:11px;padding:0 4px 3px;overflow:hidden} html.mobile-device .city-card .city-stars{font-size:10px;padding:0 4px;white-space:nowrap} html.mobile-device .city-card .city-lock{right:2px;bottom:3px;font-size:10px} html.mobile-device .city-destination{min-height:0;height:100%} html.mobile-device .city-destination canvas{object-position:center 60%;opacity:.75} html.mobile-device .destination-copy{inset:0;display:flex;align-items:center;gap:14px;padding:4px 16px;background:linear-gradient(90deg,#081727e6,#08172799 55%,#081727dd)} html.mobile-device .destination-copy h3{font-size:23px;margin:0;white-space:nowrap} html.mobile-device .destination-copy p{display:none} html.mobile-device .destination-mechanic{font-size:10px;letter-spacing:0;max-width:180px;line-height:1.4;order:2} html.mobile-device .destination-copy .primary{margin:0 0 0 auto;min-height:44px;width:160px;order:3} html.mobile-device .app.mapping .game-shell{padding:54px var(--safe-right) var(--safe-bottom) var(--safe-left)} html.mobile-device .map-view{height:100%;overflow:hidden;display:flex;flex-direction:column} html.mobile-device .map-toolbar{position:static;min-height:44px;height:44px;padding:0 6px;flex-shrink:0} html.mobile-device .map-toolbar h2{font-size:20px} html.mobile-device .map-toolbar .city-story{display:none} html.mobile-device .map-surface{position:relative;min-width:0;width:100%;height:100%;aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;flex:1;min-height:0;touch-action:pan-x} html.mobile-device #cityMap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4} html.mobile-device .map-node .node-stars{font-size:11px;top:42px} html.mobile-device #shopDialog{display:grid;grid-template-rows:44px 44px minmax(0,1fr) 18px;gap:6px;height:calc(var(--mobile-vh) - var(--safe-top) - var(--safe-bottom) - 12px);max-width:1000px;overflow:hidden} html.mobile-device #shopDialog:not([open]){display:none} html.mobile-device #shopDialog .dialog-top{margin:0} html.mobile-device #shopDialog .shop-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin:0;overflow-x:auto;min-height:44px} html.mobile-device .shop-tabs button{font-size:11px;min-height:44px;white-space:nowrap;padding:6px;flex:1} html.mobile-device .shop-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;min-height:0;scroll-snap-type:x proximity;touch-action:pan-x} html.mobile-device .shop-card{flex:0 0 190px;min-width:0;display:grid;grid-template-columns:72px 1fr;grid-template-rows:1fr 44px;gap:0;scroll-snap-align:start;position:relative;padding:0 6px 4px} html.mobile-device .shop-preview{grid-row:1;grid-column:1;width:72px;height:100%;aspect-ratio:auto;object-fit:contain} html.mobile-device .shop-card>strong{grid-row:1;grid-column:2;min-height:0;padding:8px 2px 20px;font-size:12px;align-self:center} html.mobile-device .shop-status{position:absolute;top:calc(50% - 4px);left:80px;padding:0;font-size:11px} html.mobile-device .shop-action{grid-column:1/-1;grid-row:2;margin:0;width:100%;height:44px;min-height:44px;font-size:11px;padding:4px} html.mobile-device .shop-message{font-size:11px;line-height:18px;min-height:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.mobile-device .shop-note{display:none} html.mobile-device .ending-copy{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 24px;width:75%;right:5%;padding:0;text-align:center} html.mobile-device .ending-seal{grid-column:1;font-size:9px;letter-spacing:.5px;margin:0} html.mobile-device .ending-copy h2{grid-column:1;grid-row:2/4;font-size:34px;margin:0} html.mobile-device .ending-copy p{display:none} html.mobile-device .ending-stars{grid-column:1;grid-row:4;font-size:18px;margin:0} html.mobile-device #endingCitiesButton{grid-column:2;grid-row:1/3;margin:0;align-self:center} html.mobile-device #endingReplayButton{grid-column:2;grid-row:3;margin:0} html.mobile-device #endingHomeButton{grid-column:2;grid-row:4;min-height:44px;padding:0} @media(max-height:300px){html.mobile-device .hero-copy h1{font-size:30px;margin-bottom:8px}html.mobile-device .destination-mechanic{display:none}html.mobile-device .shop-card{flex-basis:210px}html.mobile-device #levelDetailDialog .detail-story{font-size:11px}html.mobile-device #levelDetailDialog .detail-missions li{font-size:11px;padding:3px 6px}html.mobile-device .shop-card>strong{padding-top:2px}html.mobile-device .slot-card{padding:8px}} html.mobile-device .text-button,html.mobile-device .website-link{min-width:44px} html.mobile-device .home-actions{width:280px;max-width:100%} html.mobile-device #levelDetailDialog .detail-missions{grid-row:2/4} html.mobile-device #levelDetailDialog>.primary{grid-row:4} html.mobile-device #shopDialog{width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px);max-width:1000px;min-width:0;grid-template-columns:minmax(0,1fr)} html.mobile-device #shopDialog>*{min-width:0} html.mobile-device #shopDialog .shop-heading{min-width:0} html.mobile-device #shopDialog .shop-card{min-height:0} .website-link{left:auto;right:16px;bottom:4px} html.mobile-device .website-link{right:var(--safe-right);bottom:var(--safe-bottom)} html.mobile-device .map-back{min-height:44px;min-width:44px;margin:0;padding:4px 12px} html.mobile-device #shopDialog{grid-template-columns:160px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 18px;column-gap:10px} html.mobile-device #shopDialog .dialog-top{grid-column:1;grid-row:1;gap:10px} html.mobile-device #shopDialog .dialog-top .close{position:absolute;right:16px;top:10px} html.mobile-device #shopDialog .shop-tabs{grid-column:2;grid-row:1;margin-right:50px;gap:4px} html.mobile-device #shopDialog .shop-tabs button{font-size:10px;padding:4px;min-width:44px} html.mobile-device #shopDialog .shop-grid{grid-column:1/-1;grid-row:2} html.mobile-device #shopDialog .shop-message{grid-column:1/-1;grid-row:3} html.mobile-device .shop-card{grid-template-rows:minmax(0,1fr) 44px;height:100%} html.mobile-device .shop-card>strong{min-height:0} html.mobile-device #mapCityButton.map-back{min-height:44px;min-width:44px} html.mobile-device #shopDialog{touch-action:pan-x pan-y} @media(max-height:300px){ html.mobile-device #levelDetailDialog .detail-story{display:none} html.mobile-device #levelDetailDialog .detail-missions{grid-row:2/4} html.mobile-device #levelDetailDialog .detail-reward{grid-row:3} html.mobile-device #levelDetailDialog>.primary{grid-row:4} html.mobile-device #levelDetailDialog{grid-template-rows:44px 35px 24px 44px} } html.mobile-device #levelDetailDialog{max-width:900px} html.mobile-device #levelDetailDialog .detail-results{padding:0;border:0} @media(max-height:300px){ html.mobile-device #levelDetailDialog .detail-missions{grid-row:2/5} html.mobile-device #levelDetailDialog>.primary{grid-column:1;grid-row:4} } html.mobile-device #shopDialog .shop-balance{font-size:12px;white-space:nowrap} /* Safari can resize visualViewport without changing layout media queries. */ html.mobile-device:not(.mobile-portrait) dialog{position:fixed;inset:auto 0 auto 0;top:calc(var(--mobile-vh)/2);margin:0 auto;transform:translateY(-50%)} html.mobile-device #winOverlay{position:absolute;inset:0} html.mobile-device.mobile-short .hero-copy h1{font-size:30px;margin-bottom:8px} html.mobile-device.mobile-short .hero-copy p{display:none} html.mobile-device.mobile-short .destination-mechanic{display:none} html.mobile-device.mobile-short #levelDetailDialog .detail-story{display:none} html.mobile-device.mobile-short #levelDetailDialog{grid-template-rows:44px 35px 24px 44px} html.mobile-device.mobile-short #levelDetailDialog .detail-missions{grid-row:2/5} html.mobile-device.mobile-short #levelDetailDialog .detail-reward{grid-row:3} html.mobile-device.mobile-short #levelDetailDialog>.primary{grid-column:1;grid-row:4} html.mobile-device .app.playing:has(#pauseOverlay:not(.hidden),#winOverlay:not(.hidden)) #gameHud{visibility:hidden} /* 105: reserve breathing room, keep controls at the safe edges. */ .editor-mobile-tabs{display:none!important} .settings-help{margin-bottom:9px} html.mobile-device{ -webkit-text-size-adjust:100%;text-size-adjust:100% } html.mobile-device .app{--mobile-dock-width:96px} html.mobile-device .app:has(#fullscreenButton:not(.hidden)){--mobile-dock-width:148px} html.mobile-device .system-dock{gap:8px;padding:0;border:0;background:none;backdrop-filter:none;top:var(--safe-top);right:var(--safe-right)} html.mobile-device .system-dock .dock-icon{background:#102833b3;border-radius:10px} html.mobile-device .system-dock #levelsButton, html.mobile-device .system-dock #soundButton, html.mobile-device .system-dock #helpButton, html.mobile-device .system-dock .credit-balance{display:none} html.mobile-device .app:not(.playing,.mapping,.selecting,.editing,.ending){--mobile-dock-width:44px} html.mobile-device .app:not(.playing,.mapping,.selecting,.editing,.ending):has(#fullscreenButton:not(.hidden)){--mobile-dock-width:96px} html.mobile-device .app:not(.playing,.mapping,.selecting,.editing,.ending) #homeButton{display:none} html.mobile-device .hero-copy{top:var(--safe-top);left:calc(var(--safe-left) + 12px);width:45%;max-width:360px} html.mobile-device .hero-copy h1,html.mobile-device.mobile-short .hero-copy h1{font-size:28px;line-height:.92;margin:0 0 8px;letter-spacing:-1.5px} html.mobile-device .hero-copy p{display:none} html.mobile-device .home-actions{width:260px;max-width:100%} html.mobile-device .home-actions>.primary,html.mobile-device .home-actions>.secondary{height:44px;min-height:44px;padding:4px 14px} html.mobile-device .home-actions>.secondary{margin-top:6px} html.mobile-device .home-links{justify-content:flex-start;gap:16px;flex-wrap:nowrap} html.mobile-device .home-links #homeSettingsButton{display:none} html.mobile-device .home-links .text-button{padding:0 4px;white-space:nowrap;font-size:11px;flex-shrink:0} html.mobile-device .website-link{top:var(--safe-top);bottom:auto;right:calc(var(--safe-right) + var(--mobile-dock-width) + 12px);background:none;font-size:11px} html.mobile-device .app.playing .game-hud{left:calc(var(--safe-left) + 56px);padding:0;gap:0} html.mobile-device .game-hud h2,html.mobile-device #timeLimit,html.mobile-device .hud-stats>span:nth-child(2){display:none} html.mobile-device .hud-stats{width:100%;gap:12px} html.mobile-device .time-stat{margin-right:auto} html.mobile-device .touch-directions{bottom:var(--safe-bottom)} html.mobile-device .touch-rail-left .touch-directions{left:var(--safe-left)} html.mobile-device .touch-rail-right .touch-directions{right:var(--safe-right)} html.mobile-device .touch-button{background:#102b3847;border-color:#a0cbd25c} html.mobile-device .touch-button[data-control="special"]{left:calc(var(--safe-left) + 160px);bottom:var(--safe-bottom)} html.mobile-device .app.mapping .system-dock,html.mobile-device .app.selecting .system-dock{top:var(--safe-top);right:var(--safe-right)} html.mobile-device .city-view{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)} html.mobile-device .city-toolbar{height:44px;min-height:44px;padding:0 calc(var(--mobile-dock-width) + 12px) 0 0;gap:12px} html.mobile-device .city-toolbar h2{font-size:19px;white-space:nowrap} html.mobile-device .city-summary{gap:12px} html.mobile-device .city-summary .map-stars{font-size:11px} html.mobile-device .city-navigation{gap:12px;grid-template-rows:62px minmax(0,1fr)} html.mobile-device .city-card,html.mobile-device .city-card:nth-child(4),html.mobile-device .city-card:nth-child(5){position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;isolation:isolate} html.mobile-device .city-card .city-thumbnail{position:absolute;inset:0;width:100%;height:100%;opacity:.23;z-index:-1} html.mobile-device .city-card .city-name{align-self:end;padding:0 8px 4px;font-size:12px;white-space:nowrap;line-height:1.2} html.mobile-device .city-card .city-stars{padding:0 8px;line-height:1.2} html.mobile-device .destination-copy{gap:14px;padding:8px 16px} html.mobile-device .app.mapping .game-shell{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)} html.mobile-device .map-toolbar{height:44px;min-height:44px;padding:0 calc(var(--mobile-dock-width) + 12px) 0 0;gap:12px} html.mobile-device #settingsDialog .setting{margin:0;min-height:60px} html.mobile-device #settingsDialog .save-note{display:none} html.mobile-device #settingsDialog .settings-help{grid-column:1/3;margin:0;min-height:44px} html.mobile-device #settingsDialog>.primary{grid-column:3} html.mobile-device .mobile-help{gap:18px} html.mobile-device .mobile-help p{font-size:12px;line-height:1.4} html.mobile-device #levelDetailDialog .detail-story,html.mobile-device #levelDetailDialog .detail-missions li:first-child{display:none} html.mobile-device #levelDetailDialog .detail-missions{gap:12px} html.mobile-device #pauseOverlay .result-card{width:min(720px,95%);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:12px 16px} html.mobile-device #pauseOverlay h2{grid-column:1;grid-row:1;font-size:24px;margin:0;align-self:center} html.mobile-device #resumeButton{grid-column:2/4;grid-row:1} html.mobile-device #restartPauseButton{grid-column:1;grid-row:2} html.mobile-device #menuPauseButton{grid-column:2;grid-row:2} html.mobile-device #pauseOverlay .pause-tools{display:contents} html.mobile-device #pauseHomeButton{grid-column:3;grid-row:2} html.mobile-device #pauseShopButton{grid-column:1;grid-row:3} html.mobile-device #pauseSettingsButton{grid-column:2;grid-row:3} html.mobile-device #pauseWebsiteLink{grid-column:3;grid-row:3;justify-content:center} html.mobile-device #pauseOverlay .text-button,html.mobile-device #pauseOverlay .secondary{padding:0 4px;min-height:44px;font-size:12px;justify-content:center} html.mobile-device #shopDialog{grid-template-rows:44px minmax(0,1fr);row-gap:12px} html.mobile-device #shopDialog .dialog-top{display:block} html.mobile-device #shopDialog .dialog-top h2{font-size:20px;line-height:24px} html.mobile-device #shopDialog .shop-heading{display:contents} html.mobile-device #shopDialog .shop-balance{display:block;font-size:12px;line-height:18px} html.mobile-device #shopDialog .shop-message{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} html.mobile-device .shop-card{grid-template-columns:76px minmax(0,1fr);grid-template-rows:minmax(28px,1fr) 18px 44px;padding:4px 6px;gap:2px 4px;flex-basis:220px} html.mobile-device .shop-preview{grid-column:1;grid-row:1/3;width:76px;height:100%} html.mobile-device .shop-card>strong{grid-column:2;grid-row:1;padding:0;align-self:center;line-height:1.3;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html.mobile-device .shop-status{position:static;grid-column:2;grid-row:2;padding:0;font-size:11px;line-height:18px} html.mobile-device .shop-action{grid-column:1/-1;grid-row:3;margin:0;align-self:end} html.mobile-device .app.editing .system-dock{display:none} html.mobile-device .app.editing .game-shell{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);overflow:hidden} html.mobile-device .editor-view{height:100%;min-height:0;padding:0;display:flex;flex-direction:column} html.mobile-device .editor-heading{height:44px;min-height:44px;margin:0 0 8px;gap:12px} html.mobile-device .editor-heading h2{display:none} html.mobile-device .editor-mobile-tabs{display:flex!important;gap:6px} html.mobile-device .editor-actions{gap:6px} html.mobile-device .editor-heading button{margin:0;padding:4px 10px;height:44px;min-height:44px;width:auto;white-space:nowrap} html.mobile-device .editor-mobile-tabs [aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:#203f49} html.mobile-device .editor-layout{display:block;position:relative;flex:1;height:auto;min-height:0;overflow:hidden} html.mobile-device .editor-tools{display:none;height:100%;min-height:0;overflow:auto} html.mobile-device .editor-workspace{height:100%;min-height:0} html.mobile-device .editor-workspace>p{display:none} html.mobile-device .editor-storage{display:none;margin:0;align-content:start;gap:8px} html.mobile-device .editor-canvas-scroll{height:100%;min-height:0;max-height:none} html.mobile-device #editorCanvas{width:auto;max-width:100%;height:100%;object-fit:contain} html.mobile-device #editorView[data-panel="tools"] .editor-tools{display:flex} html.mobile-device #editorView[data-panel="tools"] .editor-workspace{display:none} html.mobile-device #editorView[data-panel="storage"] .editor-canvas-scroll{display:none} html.mobile-device #editorView[data-panel="storage"] .editor-storage{display:flex;height:100%;overflow:auto} html.mobile-device .editor-storage button,html.mobile-device .editor-storage .editor-import{min-height:44px;padding:4px 12px} html.mobile-device #slotDialog .slot-list{min-height:0;gap:12px} html.mobile-device .slot-card{min-height:100px;grid-template-columns:26px minmax(0,1fr);padding:10px;gap:8px;align-content:center} html.mobile-device .slot-card .slot-arrow{display:none} html.mobile-device .slot-card strong{font-size:14px;margin-bottom:6px;line-height:1.2} html.mobile-device .slot-card small{font-size:10px;line-height:1.45;overflow-wrap:anywhere} html.mobile-device .ending-copy{grid-template-rows:44px 44px 44px;row-gap:10px;align-items:center} html.mobile-device .ending-seal{grid-row:1;align-self:end} html.mobile-device .ending-copy h2{grid-row:2;font-size:27px;line-height:.95;align-self:center} html.mobile-device .ending-copy h2 br{display:none} html.mobile-device .ending-stars{grid-row:3;align-self:start} html.mobile-device #endingCitiesButton{grid-row:1;align-self:stretch} html.mobile-device #endingReplayButton{grid-row:2} html.mobile-device #endingHomeButton{grid-row:3} html.mobile-device:not(.mobile-portrait) dialog{left:var(--safe-left);right:var(--safe-right);max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px)!important} html.mobile-device .slot-card{grid-template-columns:34px minmax(0,1fr);gap:12px} html.mobile-device .app.playing:has(.screen-overlay:not(.hidden)) #gameHud, html.mobile-device .app.playing:has(.screen-overlay:not(.hidden)) #gameHud *{visibility:hidden!important} html.mobile-device #pauseOverlay .result-card, html.mobile-device #winOverlay .result-card{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px)} html.mobile-device .app.ending .system-dock{display:none} html.mobile-device .ending-copy{width:min(720px,calc(100vw - var(--safe-left) - var(--safe-right) - 32px));right:calc(var(--safe-right) + 16px)} html.mobile-device #helpDialog .mobile-help{margin:0 0 10px;padding:10px 14px} html.mobile-device #helpDialog .mobile-help strong{margin:0 0 4px} html.mobile-device #helpDialog .mobile-help{padding:8px 14px} html.mobile-device #winOverlay .victory-card{padding:10px 22px} html.mobile-device .editor-storage select, html.mobile-device .editor-tools select{height:44px;min-height:44px} html.mobile-device .app.ending .game-shell{width:100%;height:var(--mobile-vh)} html.mobile-device .ending-view{width:100%;height:100%;aspect-ratio:auto} /* Remove the HUD hit targets immediately; .tool transitions also animate visibility. */ html.mobile-device .app.playing:has(.screen-overlay:not(.hidden)) #gameHud{display:none!important} /* Leave room for the iPhone home indicator in a short Safari viewport. */ html.mobile-device.mobile-short .hero-copy h1{font-size:22px;line-height:1.1;letter-spacing:-1px;white-space:nowrap} html.mobile-device.mobile-short .hero-copy h1>span{display:inline;margin-left:6px} html.mobile-device.mobile-short:not(.mobile-portrait) dialog{padding:8px 16px} html.mobile-device.mobile-short #settingsDialog{row-gap:6px} html.mobile-device.mobile-short dialog .dialog-top{margin-bottom:6px} html.mobile-device.mobile-short #settingsDialog .dialog-top, html.mobile-device.mobile-short #shopDialog .dialog-top, html.mobile-device.mobile-short #levelDetailDialog .dialog-top{margin-bottom:0} html.mobile-device.mobile-short #helpDialog .mobile-help{margin-bottom:4px} html.mobile-device dialog .dialog-top{padding-bottom:0} /* 106: the city keeps its authored PC coordinates on every device. */ .map-surface{touch-action:none;overscroll-behavior:contain;cursor:grab;user-select:none;-webkit-user-select:none} .map-surface.is-panning{cursor:grabbing} .map-content{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;will-change:transform} .map-content #cityMap,.map-content #mapNodes{position:absolute;inset:0;width:100%;height:100%} .map-content #mapNodes{display:block;padding:0;min-width:0} .map-content .map-node{position:absolute!important;transform:translate(-50%,-50%)!important;margin:0} .map-zoom-controls{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;z-index:3;cursor:default} .map-zoom-controls button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #6faba67a;border-radius:6px;background:#0c232ee8;color:#c4e9e4;font:22px var(--sans);touch-action:manipulation} .map-zoom-controls button:hover{background:#234b53} html.mobile-device .map-surface{overflow:hidden;touch-action:none;flex:1;aspect-ratio:auto} html.mobile-device .map-content #cityMap{object-fit:contain;opacity:1} html.mobile-device .map-content #mapNodes{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;padding:0} html.mobile-device .map-content .map-node{position:absolute!important;width:44px;height:44px;min-width:44px;min-height:44px;align-self:auto;margin:0;transform:translate(-50%,-50%) scale(var(--map-node-boost,1))!important;font-size:18px} html.mobile-device .map-content .map-node .node-stars{font-size:11px;top:calc(100% + 7px)} html.mobile-device .map-zoom-controls{right:6px;bottom:6px} /* Compact navigation, with the large in-game controls left unchanged. */ html.mobile-device .app{--mobile-dock-width:80px} html.mobile-device .app:has(#fullscreenButton:not(.hidden)){--mobile-dock-width:124px} html.mobile-device .app:not(.playing,.mapping,.selecting,.editing,.ending){--mobile-dock-width:36px} html.mobile-device .app:not(.playing,.mapping,.selecting,.editing,.ending):has(#fullscreenButton:not(.hidden)){--mobile-dock-width:80px} html.mobile-device .system-dock .dock-icon{width:36px;height:36px;min-width:36px} html.mobile-device .system-dock .ui-icon{width:20px;height:20px} html.mobile-device .website-link{min-height:36px;font-size:10px} html.mobile-device .hero-copy h1,html.mobile-device.mobile-short .hero-copy h1{font-size:20px;line-height:1.1;margin-bottom:8px} html.mobile-device .home-actions{width:236px} html.mobile-device .home-actions>.primary,html.mobile-device .home-actions>.secondary{height:38px;min-height:38px;font-size:11px;padding:4px 12px} html.mobile-device .home-links{gap:12px} html.mobile-device .home-links .text-button{min-height:36px;font-size:10px} html.mobile-device dialog,html.mobile-device.mobile-short:not(.mobile-portrait) dialog{padding:8px 12px} html.mobile-device dialog .dialog-top,html.mobile-device #settingsDialog .dialog-top,html.mobile-device #levelDetailDialog .dialog-top{height:36px;min-height:36px;gap:10px} html.mobile-device dialog .dialog-top h2{font-size:17px;letter-spacing:-.4px} html.mobile-device .close{width:36px;height:36px;min-width:36px;font-size:22px} html.mobile-device dialog .primary,html.mobile-device dialog .secondary{min-height:38px;font-size:11px} html.mobile-device .slot-card{min-height:82px;padding:8px;grid-template-columns:28px minmax(0,1fr);gap:8px} html.mobile-device #slotDialog .slot-list{gap:8px} html.mobile-device .slot-index{font-size:20px} html.mobile-device .slot-card strong{font-size:12px;line-height:1.2;margin-bottom:5px} html.mobile-device .slot-card small{font-size:9px;line-height:1.4} html.mobile-device #settingsDialog{gap:6px 10px} html.mobile-device #settingsDialog .setting{font-size:11px;min-height:50px;padding:6px 10px;gap:8px} html.mobile-device #settingsDialog .setting input{width:22px;height:22px} html.mobile-device #settingsDialog .settings-help{min-height:38px} html.mobile-device .mobile-help{gap:12px} html.mobile-device .mobile-help p{font-size:11px;line-height:1.4} html.mobile-device .mobile-help strong{font-size:12px} html.mobile-device #levelDetailDialog{grid-template-columns:minmax(160px,.9fr) minmax(180px,1.3fr);grid-template-rows:36px 30px 22px 38px;gap:4px 16px} html.mobile-device.mobile-short #levelDetailDialog{grid-template-rows:36px 30px 22px 38px} html.mobile-device #levelDetailDialog .detail-number{font-size:9px;line-height:11px} html.mobile-device #levelDetailDialog .detail-results{gap:8px} html.mobile-device #levelDetailDialog .detail-stars{font-size:22px;letter-spacing:4px} html.mobile-device #levelDetailDialog #detailBest{font-size:9px} html.mobile-device #levelDetailDialog .detail-reward{font-size:9px} html.mobile-device #levelDetailDialog .detail-missions{gap:8px} html.mobile-device #levelDetailDialog .detail-missions li{font-size:11px;line-height:1.35;padding:4px 6px;min-height:26px} html.mobile-device #shopDialog{grid-template-columns:130px minmax(0,1fr);grid-template-rows:36px minmax(0,1fr);gap:8px} html.mobile-device #shopDialog .dialog-top h2{font-size:17px;line-height:20px} html.mobile-device #shopDialog .shop-balance{font-size:11px;line-height:16px} html.mobile-device #shopDialog .shop-tabs{min-height:36px;margin-right:42px;gap:4px} html.mobile-device #shopDialog .shop-tabs button{min-width:36px;min-height:36px;font-size:10px;padding:3px} html.mobile-device #shopDialog .dialog-top .close{top:8px;right:12px} html.mobile-device .shop-grid{gap:8px} html.mobile-device .shop-card{flex-basis:180px;grid-template-columns:58px minmax(0,1fr);grid-template-rows:minmax(24px,1fr) 16px 38px;padding:4px;gap:2px 4px} html.mobile-device .shop-preview{width:58px} html.mobile-device .shop-card>strong{font-size:11px} html.mobile-device .shop-status{font-size:10px;line-height:16px} html.mobile-device .shop-action{height:38px;min-height:38px;font-size:10px} html.mobile-device .city-toolbar,html.mobile-device .map-toolbar{height:36px;min-height:36px;gap:8px} html.mobile-device .city-toolbar h2,html.mobile-device .map-toolbar h2{font-size:16px} html.mobile-device .city-summary,html.mobile-device .map-toolbar>div{gap:8px} html.mobile-device .city-summary .map-stars,html.mobile-device .map-toolbar .map-stars{font-size:10px} html.mobile-device .map-back,html.mobile-device #mapCityButton.map-back{height:36px;min-height:36px;min-width:36px;font-size:11px;padding:4px 8px} html.mobile-device .city-navigation{grid-template-rows:52px minmax(0,1fr);gap:8px} html.mobile-device .city-card,html.mobile-device .city-card:nth-child(4),html.mobile-device .city-card:nth-child(5){height:52px} html.mobile-device .city-card .city-name{font-size:11px;padding:0 6px 3px} html.mobile-device .city-card .city-stars{font-size:9px;padding:0 6px} html.mobile-device .destination-copy{padding:6px 12px;gap:10px} html.mobile-device .destination-copy h3{font-size:20px} html.mobile-device .destination-copy .primary{height:38px;min-height:38px;width:144px;font-size:11px} html.mobile-device #pauseOverlay .result-card{gap:8px 10px;padding:10px 12px} html.mobile-device #pauseOverlay h2{font-size:20px} html.mobile-device #pauseOverlay .text-button,html.mobile-device #pauseOverlay .secondary,html.mobile-device #pauseOverlay .primary{height:38px;min-height:38px;font-size:11px} html.mobile-device #winOverlay #winTitle{font-size:17px} html.mobile-device #winOverlay .result-stars{font-size:32px} html.mobile-device #winOverlay .primary,html.mobile-device #winOverlay .secondary,html.mobile-device #winOverlay .text-button{min-height:38px;font-size:11px} html.mobile-device .ending-copy{grid-template-rows:38px 38px 38px;gap:8px 20px} html.mobile-device .ending-copy h2{font-size:23px} html.mobile-device .ending-stars{font-size:16px} html.mobile-device .ending-copy .primary,html.mobile-device .ending-copy .secondary,html.mobile-device #endingHomeButton{min-height:38px;font-size:11px} html.mobile-device .editor-heading{height:36px;min-height:36px;margin-bottom:6px;gap:8px} html.mobile-device .editor-heading button{height:36px;min-height:36px;font-size:11px;padding:3px 8px} html.mobile-device .city-summary .secondary{height:36px;min-height:36px;margin:0;padding:4px 8px;font-size:11px} html.mobile-device .city-card,html.mobile-device .city-card:nth-child(4),html.mobile-device .city-card:nth-child(5){min-height:52px} html.mobile-device .map-zoom-controls button{min-width:36px;min-height:36px}