*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#9fd3ff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff}#app canvas{display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-user-select:none;user-select:none}#hud>*{position:absolute}#topleft{top:14px;left:14px;display:flex;flex-direction:column;gap:6px}#money{font-size:26px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.6)}#era-date{font-size:15px;font-weight:700;color:#f3d9a4;letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.7)}.era-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.era-layer[hidden]{display:none}#boost{font-size:14px;font-weight:600;color:#ffd60a;text-shadow:0 1px 3px rgba(0,0,0,.7)}#needs{display:flex;flex-direction:column;gap:4px}#needs .need{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.7)}#needs .need-icon{width:18px;text-align:center}#needs .need-bar{display:block;width:110px;height:8px;border-radius:4px;overflow:hidden;background:#00000080;border:1px solid rgba(255,255,255,.25);box-shadow:0 1px 2px #0006}#needs .need-fill{display:block;height:100%;width:0;background:#8ef0a5;border-radius:3px;transition:width .3s ease,background-color .3s ease}#needs .need-fill.low{background:#ffb703}#needs .need-fill.crit{background:#e63946;animation:needpulse 1.2s ease-in-out infinite}#needs .need-val{width:26px;font-size:12px;font-weight:700;color:#ffffffe6;text-align:right;font-variant-numeric:tabular-nums}@keyframes needpulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.6)}}#job{top:14px;right:14px;max-width:320px;background:#0000008c;border-left:4px solid #ffd60a;padding:10px 14px;border-radius:6px;font-size:14px;line-height:1.4}#job b{color:#ffd60a}#toast{top:70px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center}#toast div{background:#000000a6;padding:8px 16px;border-radius:20px;font-weight:600;font-size:15px;animation:toast 2.6s forwards}@keyframes toast{0%{opacity:0;transform:translateY(-8px)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}#prompt{bottom:90px;left:50%;transform:translate(-50%);background:#000000a6;padding:8px 18px;border-radius:6px;font-size:16px;font-weight:600;border:1px solid rgba(255,255,255,.25)}#speed{bottom:40px;left:50%;transform:translate(-50%);font-size:22px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.6)}#help{bottom:12px;left:14px;font-size:12px;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.8);max-width:calc(100% - 260px)}#fps{margin-left:10px;opacity:.7}#minimap{bottom:14px;right:14px;border-radius:8px;border:2px solid rgba(255,255,255,.6);background:#4f8f3a;box-shadow:0 2px 8px #0006}#menu{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);min-width:340px;max-width:460px;background:#14161ef0;border-radius:12px;padding:18px 22px;box-shadow:0 10px 40px #00000080}#menu h2{margin:0 0 12px;font-size:22px}#menu ul{list-style:none;margin:0;padding:0}#menu li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:15px}#menu li:hover{background:#ffffff1a}#menu li .key{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;background:#ffd60a;color:#000;border-radius:4px;font-weight:800;font-size:13px}#menu li .price{margin-left:auto;color:#8ef0a5;font-weight:700}#menu li.disabled{opacity:.45;cursor:default}#menu .hint{margin:12px 0 0;font-size:12px;opacity:.7}#intro{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#1e2850d9,#050814f2)}#intro .card{max-width:520px;padding:28px 34px;background:#14161ee6;border-radius:14px;box-shadow:0 10px 40px #0009}#intro h1{margin:0;font-size:56px;letter-spacing:2px;background:linear-gradient(90deg,#ffd60a,#ff8c42);-webkit-background-clip:text;background-clip:text;color:transparent}#intro .tagline{font-size:16px;opacity:.9;margin:6px 0 16px}#intro ul{padding-left:18px;line-height:1.6;font-size:14px;margin:0 0 18px}#intro button{font-size:20px;font-weight:800;padding:12px 40px;border:none;border-radius:8px;background:#ffd60a;color:#000;cursor:pointer}#intro button:hover{background:#ffe14d}#intro .small{font-size:12px;opacity:.6;margin:14px 0 0}#intro [hidden]{display:none!important}#mp{margin:0}#mp .mp-lead{margin:0 0 8px;font-size:14px;opacity:.85}#mp .mp-welcome{margin:0 0 10px;font-size:20px;font-weight:700;color:#ffd60a;overflow-wrap:anywhere}#mp .mp-row{display:flex;gap:10px;align-items:stretch}#mp input{flex:1 1 auto;min-width:0;font:inherit;font-size:18px;padding:10px 14px;border-radius:8px;border:2px solid rgba(255,255,255,.22);background:#00000059;color:#fff}#mp input::placeholder{color:#ffffff73}#mp input:focus{outline:none;border-color:#ffd60a}#mp .mp-row button{flex:0 0 auto}#mp:has(#mp-name[hidden]) .mp-row button{flex:1 1 auto}#intro #play:disabled{opacity:.6;cursor:progress}#mp .mp-warn{margin:6px 0 0;font-size:12px;opacity:.6}#mp #mp-error{margin:8px 0 0;font-size:14px;line-height:1.4;color:#ff8c8c}#intro #mp .mp-link{display:block;margin:8px 0 0;padding:4px 0;font-size:13px;font-weight:600;background:none;border:none;border-radius:0;color:#ffffffa6;text-decoration:underline;text-underline-offset:3px}#intro #mp .mp-link:hover{background:none;color:#ffd60a}#mp.recover .mp-row{flex-wrap:wrap}#mp.recover #mp-name{flex-basis:100%}#mp #mp-code{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px;text-transform:uppercase}#mp #mp-code::placeholder{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:0;text-transform:none}#recovery[hidden]{display:none}#recovery{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;background:#050814e0;touch-action:pan-y}#recovery .card{max-width:520px;width:100%;margin:auto;padding:22px 28px;background:#14161ef7;border-radius:14px;border-top:4px solid #ffd60a;box-shadow:0 10px 40px #0009;color:#fff}#recovery h2{margin:0 0 4px;font-size:22px;color:#ffd60a}#recovery .rec-for{margin:0 0 12px;font-size:14px;opacity:.8;overflow-wrap:anywhere}#recovery .rec-code{margin:0 0 12px;padding:12px 10px;border-radius:8px;background:#000;border:2px dashed rgba(255,214,10,.6);text-align:center;font:800 clamp(20px,5.2vw,30px)/1.2 ui-monospace,Consolas,"Courier New",monospace;letter-spacing:2px;color:#ffd60a;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}#recovery .rec-code.none{font:600 16px/1.4 system-ui,sans-serif;letter-spacing:0;color:#ff8c8c;-webkit-user-select:none;user-select:none}#recovery .rec-text{margin:0;font-size:14px;line-height:1.5;opacity:.9}#recovery .rec-msg{margin:10px 0 0;font-size:14px;font-weight:600;color:#8ef0a5}#recovery .rec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}#recovery .rec-actions button{min-height:44px;font-size:16px;font-weight:800;padding:10px 22px;border-radius:8px;cursor:pointer}#recovery .rec-actions .rec-copy{background:transparent;color:#ffd60a;border:1px solid #ffd60a}#recovery .rec-actions .rec-copy:hover{background:#ffd60a26}#recovery #recovery-ok{flex:1 1 auto;border:none;background:#ffd60a;color:#000}#recovery #recovery-ok:hover{background:#ffe14d}#recovery .rec-actions [hidden]{display:none}@media(max-height:500px){#recovery{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}#recovery .card{padding:14px 20px}#recovery h2{font-size:19px}#recovery .rec-for{margin-bottom:8px}#recovery .rec-code{padding:8px;margin-bottom:8px}#recovery .rec-actions{margin-top:10px}}#install .install-head,#install .install-next{display:none}#install .install-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}#install .install-actions:not(:has(button:not([hidden]))){display:none}#intro #install .install-actions button,#intro #pwa-copy{font-size:14px;font-weight:700;padding:8px 16px;border-radius:6px;background:transparent;color:#ffd60a;border:1px solid rgba(255,214,10,.55)}#intro #install .install-actions button:hover,#intro #pwa-copy:hover{background:#ffd60a26}#install .install-box{margin-top:10px;padding:10px 14px;border-radius:8px;background:#ffffff0f;font-size:14px;line-height:1.5}#install .install-box ol{margin:0;padding-left:20px}#install .install-box p{margin:0 0 8px}#install .install-url{font:600 13px/1.3 ui-monospace,Consolas,monospace;color:#ffd60a;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}#install #pwa-msg{margin:10px 0 0;font-size:14px;font-weight:600;color:#8ef0a5}#intro.must-install #mp,#intro.must-install .intro-keys,#intro.must-install #invite-open{display:none!important}#intro.must-install #install .install-head,#intro.must-install #install .install-next{display:block}#intro.must-install #install h2{margin:0 0 6px;font-size:22px;color:#fff}#intro.must-install #install .install-head p{margin:0;font-size:14px;opacity:.85}#intro.must-install #install .install-next{margin:12px 0 0;font-size:14px;opacity:.85}#intro.must-install #install .install-actions button#pwa-install{font-size:20px;font-weight:800;padding:12px 28px;border:none;border-radius:8px;background:#ffd60a;color:#000}#players{font-size:13px;font-weight:600;color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.7)}#chat{bottom:52px;left:14px;width:min(420px,calc(100% - 260px));display:flex;flex-direction:column;gap:4px}#chat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}#chat li{font-size:13px;line-height:1.35;padding:3px 8px;border-radius:4px;background:#00000073;text-shadow:0 1px 2px rgba(0,0,0,.8);transition:opacity .6s ease;word-break:break-word}#chat li.faded{opacity:0}#chat li b{color:#ffd60a}#chat li.system{font-style:italic;color:#fff9}#chat input{pointer-events:auto;font:inherit;font-size:13px;padding:6px 10px;border-radius:4px;border:1px solid rgba(255,214,10,.6);background:#000000b3;color:#fff}#chat input:focus{outline:none;border-color:#ffd60a}#disconnected[hidden],#chat[hidden]{display:none}#disconnected{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#050814d9}#disconnected .card{max-width:420px;padding:24px 30px;background:#14161ef2;border-radius:12px;box-shadow:0 10px 40px #0009;text-align:center}#disconnected h2{margin:0 0 8px;font-size:24px;color:#ffd60a}#disconnected p{margin:0 0 16px;font-size:14px;opacity:.85}#disconnected button{font-size:16px;font-weight:800;padding:10px 28px;border:none;border-radius:8px;background:#ffd60a;color:#000;cursor:pointer}#disconnected button:hover{background:#ffe14d}#menu li .swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.5)}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:7}#place{bottom:14px;right:14px;background:#0000008c;padding:10px 16px;border-radius:8px;font-size:16px;font-weight:700;border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 8px #0006}#dialog{position:fixed;left:50%;bottom:36px;transform:translate(-50%);width:min(760px,94vw);background:#14161ef0;border-radius:12px;padding:16px 22px 12px;box-shadow:0 10px 40px #00000080;border-left:5px solid #ffd60a;z-index:4}#dialog-name{font-size:14px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#ffd60a;margin-bottom:6px}#dialog-text{margin:0 0 12px;font-size:17px;line-height:1.45;white-space:pre-line}#dialog ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}#dialog li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:6px;cursor:pointer;font-size:15px;background:#ffffff0f}#dialog li:hover{background:#ffffff24}#dialog li .key{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:#ffd60a;color:#000;border-radius:4px;font-weight:800;font-size:12px}#dialog li .price{color:#8ef0a5;font-weight:700;margin-left:4px}#dialog li.disabled{opacity:.45;cursor:default}#dialog .hint{margin:10px 0 0;font-size:12px;opacity:.6}#invite[hidden]{display:none}#invite{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:#050814cc}#invite .invite-card{position:relative;max-width:min(760px,100%);max-height:100%;overflow:auto;padding:22px 28px 18px;background:#14161ef7;border-radius:14px;border-top:4px solid #ffd60a;box-shadow:0 10px 40px #0009;color:#fff}#invite h2{margin:0 36px 14px 0;font-size:22px;color:#ffd60a}#invite .invite-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;border-radius:8px;background:#ffffff14;color:#fff;font-size:18px;cursor:pointer}#invite .invite-close:hover{background:#ffffff2e}#invite .invite-codes{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}#invite .invite-code{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}#invite .invite-code canvas{display:block;border-radius:6px;image-rendering:pixelated}#invite .invite-code figcaption{font:700 16px/1.3 ui-monospace,Consolas,monospace;color:#ffd60a;-webkit-user-select:all;user-select:all;word-break:break-all}#invite .invite-msg{margin:10px 0 0;font-size:14px;opacity:.85;text-align:center}#invite .invite-error{color:#ff8c8c;opacity:1;text-align:left;line-height:1.5}#invite .invite-steps{margin:16px 0 0;padding-left:22px;font-size:15px;line-height:1.6}#invite .invite-hint{margin:10px 0 0;font-size:12px;opacity:.6}@media(max-height:500px){#invite{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}#invite .invite-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start;padding:14px 18px 12px;max-width:100%}#invite .invite-body{grid-column:1;grid-row:1 / span 3;align-self:center}#invite h2{grid-column:2;grid-row:1;font-size:18px;margin:0 40px 8px 0}#invite .invite-steps{grid-column:2;grid-row:2;margin:0;font-size:14px;line-height:1.45}#invite .invite-hint{grid-column:2;grid-row:3;margin:8px 0 0}#invite .invite-codes{gap:10px}#invite .invite-code{gap:4px}#invite .invite-code figcaption{font-size:13px}#invite .invite-msg{font-size:12px;margin-top:6px;max-width:260px}}
