*{box-sizing:border-box}html,body{color:#13201b;background:#1d2b2f;min-height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}body{min-height:100vh}#game{isolation:isolate;width:100vw;height:100vh;position:relative;overflow:hidden}canvas{display:block}.audio-toggle{z-index:5;color:#17261d;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f7fff8d1;border:1px solid #fff6;border-radius:8px;place-items:center;width:44px;height:44px;transition:background .16s,color .16s,transform .16s;display:grid;position:absolute;top:clamp(10px,2.5vw,18px);right:clamp(10px,2.5vw,18px);box-shadow:0 14px 34px #1931272e}.audio-toggle:hover{transform:translateY(-1px)}.audio-toggle:focus-visible{outline-offset:3px;outline:3px solid #fff}.audio-toggle[data-muted=true]{color:#f4fff2;background:#20302acc}.audio-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:23px;height:23px}.audio-icon-off,.audio-toggle[data-muted=true] .audio-icon-on{display:none}.audio-toggle[data-muted=true] .audio-icon-off{display:block}#game.is-playing .audio-toggle{top:auto;bottom:clamp(10px,2.5vw,18px)}#hud{z-index:2;opacity:0;pointer-events:none;grid-template-columns:minmax(190px,1.15fr) repeat(3,minmax(104px,.52fr)) minmax(220px,1fr);gap:8px;transition:opacity .18s,transform .18s;display:grid;position:absolute;top:clamp(10px,2.5vw,18px);left:clamp(10px,2.5vw,18px);right:clamp(10px,2.5vw,18px);transform:translateY(-6px)}#game.is-playing #hud{opacity:1;transform:translateY(0)}.hud-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f7fff8c7;border:1px solid #ffffff61;border-radius:8px;min-height:58px;padding:10px 12px;box-shadow:0 14px 34px #19312724}.hud-card strong,.hud-card span{display:block}.hud-label{color:#48634f;letter-spacing:0;text-transform:uppercase;margin-bottom:4px;font-size:11px;font-weight:800;line-height:1}.hud-card strong{color:#1d2e25;font-size:20px;line-height:1.15}.hud-progress{grid-template-rows:auto auto 8px;align-content:start;display:grid}.population-track{background:#2d50342e;border-radius:999px;width:100%;height:8px;margin-top:8px;display:block;position:relative;overflow:hidden}#population-fill{border-radius:inherit;background:linear-gradient(90deg,#b95633,#e0b755,#6f9f56);width:0%;height:100%;transition:width .3s;display:block}.hud-status{align-items:center;display:flex}#status{color:#24382d;font-size:15px;font-weight:750;line-height:1.25}.title-screen{z-index:4;color:#f4fff2;background:linear-gradient(90deg,#11251ee6,#11251e9e 52%,#11251e2e),#11251e47;align-items:center;padding:clamp(18px,5vh,54px) clamp(18px,8vw,88px);display:grid;position:absolute;inset:0}.title-screen[hidden]{display:none}.title-content{width:min(710px,100%)}.title-kicker,.controller-status{color:#dceab9;letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:850;line-height:1.2;display:block}.title-screen h1{color:#fff8dd;max-width:690px;margin:12px 0 14px;font-size:64px;line-height:.95}.title-screen p{color:#edf7df;max-width:560px;margin:0;font-size:20px;font-weight:750;line-height:1.35}.title-actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.title-actions button{color:#17261d;cursor:pointer;min-width:126px;min-height:46px;font:inherit;letter-spacing:0;border:1px solid #ffffff3d;border-radius:8px;font-size:16px;font-weight:850}#start-game{background:#f0c85f;box-shadow:0 12px 28px #0000002e}.title-actions button:focus-visible{outline-offset:3px;outline:3px solid #fff}.controller-status{color:#f3e7a1;text-transform:none;margin-top:18px}.controller-status[data-connected=true]{color:#aee7be}@media (width<=820px){#hud{grid-template-columns:1fr 1fr}.hud-status,.hud-progress{grid-column:1/-1}}@media (width<=520px){#hud{gap:6px}.hud-card{min-height:50px;padding:8px 9px}.hud-card strong{font-size:17px}#status{font-size:13px}.title-screen{align-items:end;padding:20px}.title-screen h1{font-size:42px}.title-screen p{font-size:17px}.title-actions{grid-template-columns:1fr;display:grid}.title-actions button{width:100%}}
