:root{color:#f8fafc;background:#071d29;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#game-canvas{display:block;width:100vw;height:100vh;touch-action:none;outline:none}.landing{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:auto;padding:28px;background:linear-gradient(180deg,#04141f40,#04141fe0),radial-gradient(circle at 72% 15%,#347f88 0,#143746 34%,#07151f 72%)}.landing:before{position:absolute;inset:auto 0 0;height:34%;content:"";opacity:.28;background:repeating-linear-gradient(90deg,transparent 0 7%,#8ee3c5 7.2% 7.5%,transparent 7.7% 12%);clip-path:polygon(0 56%,9% 56%,9% 30%,17% 30%,17% 70%,27% 70%,27% 16%,36% 16%,36% 62%,47% 62%,47% 38%,56% 38%,56% 74%,65% 74%,65% 24%,76% 24%,76% 54%,87% 54%,87% 7%,96% 7%,96% 63%,100% 63%,100% 100%,0 100%)}.hero-card{position:relative;z-index:1;width:min(680px,100%);padding:clamp(28px,5vw,54px);border:1px solid rgb(142 227 197 / 20%);border-radius:28px;background:#061824d1;box-shadow:0 30px 80px #00000061;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);text-align:center}.eyebrow,.step-label{margin:0 0 10px;color:#8ee3c5;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(3.2rem,10vw,6.3rem);letter-spacing:-.07em;line-height:.92}.lede{margin:20px auto 26px;max-width:520px;color:#c7d8df;font-size:1.04rem}.muted{margin:5px 0 0;color:#9fb6c1;font-size:.9rem}.field{display:grid;gap:7px;width:min(360px,100%);margin:0 auto 12px;text-align:left}.field span{color:#c9d8de;font-size:.8rem;font-weight:700}input{min-width:0;border:1px solid #385463;border-radius:11px;padding:.78rem .9rem;color:#fff;background:#0b2634;outline:none}input:focus{border-color:#70e6b9;box-shadow:0 0 0 3px #70e6b924}.primary-button{width:min(360px,100%);border:0;border-radius:12px;padding:.9rem 1.2rem;color:#052219;background:linear-gradient(135deg,#91edc9,#4fd4a4);box-shadow:0 12px 28px #28ba8938;font-weight:900}.primary-button:hover{filter:brightness(1.07);transform:translateY(-1px)}.character-picker{display:grid;gap:18px;margin-top:26px}.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.character-card{display:grid;gap:8px;place-items:center;border:1px solid #284c59;border-radius:14px;padding:13px 8px;color:#dcebf0;background:#0d2a38;font-size:.82rem;font-weight:800}.character-card.selected{border-color:#70e6b9;background:#16483f;box-shadow:inset 0 0 0 1px #70e6b9}.avatar{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:#fff;font-weight:900}.avatar.casual{background:#3689c9}.avatar.formal{background:#5751a8}.avatar.worker{background:#d8892f}.avatar.street{background:#c84f7b}.error{min-height:1.2rem;margin:10px 0 0;color:#fda4af;font-size:.88rem}.loading{position:fixed;z-index:12;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;place-items:center;color:#eafff7;background:#071d29;text-align:center}.loading h2{margin:18px 0 5px}.loading p{margin:0;color:#a9c5ce}.spinner{width:48px;height:48px;border:4px solid #1b4856;border-top-color:#70e6b9;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hud{position:fixed;z-index:4;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:18px}.status-card,.controls-card,.chat-card{border:1px solid rgb(167 208 222 / 20%);border-radius:14px;background:#04141fd1;box-shadow:0 12px 30px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-card{position:absolute;top:18px;left:18px;width:min(300px,calc(100vw - 36px));padding:14px}.city-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.city-title strong{font-size:1.05rem}#citizen-count{color:#8ee3c5;font-size:.75rem}#location-name{margin:6px 0 12px;color:#b9cbd2;font-size:.82rem}.objective{display:flex;justify-content:space-between;border-top:1px solid #294451;padding-top:10px;font-size:.78rem}.objective span{color:#91aab5}.toast{position:absolute;top:18px;left:50%;width:min(520px,calc(100vw - 40px));margin:0;border:1px solid rgb(142 227 197 / 32%);border-radius:12px;padding:11px 16px;transform:translate(-50%);color:#eafff6;background:#092e2fe5;text-align:center}.interaction-prompt{position:absolute;bottom:132px;left:50%;margin:0;border-radius:10px;padding:9px 14px;transform:translate(-50%);background:#030f17e0;box-shadow:0 8px 25px #00000059;font-size:.88rem;font-weight:700}.controls-card{position:absolute;bottom:18px;left:18px;display:flex;flex-wrap:wrap;gap:8px 13px;max-width:580px;padding:10px 12px;color:#a9bdc5;font-size:.72rem}kbd{border:1px solid #49616d;border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:#e6f4f7;background:#17303c;font-family:inherit}.chat-card{position:absolute;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));padding:10px;pointer-events:auto}.chat-card header{display:flex;justify-content:space-between;padding:2px 2px 8px}.chat-card header button{border:0;color:#bcd0d7;background:transparent}.messages{max-height:150px;min-height:44px;overflow:auto;scrollbar-width:thin}.message{margin:0 0 6px;color:#dbe8ec;font-size:.82rem}.message b{margin-right:5px;color:#8ee3c5}#chat-form{display:flex;gap:6px}#chat-input{flex:1;padding:.58rem .66rem}#chat-form button{border:0;border-radius:9px;padding:0 13px;color:#052219;background:#70e6b9;font-weight:900}.chat-card.collapsed .messages,.chat-card.collapsed form{display:none}@media(max-width:760px){.landing{padding:14px}.hero-card{padding:28px 18px;border-radius:20px}.character-grid{grid-template-columns:repeat(2,1fr)}.status-card{top:10px;left:10px}.controls-card{display:none}.chat-card{right:10px;bottom:10px}.interaction-prompt{bottom:116px}.toast{top:128px}}