:root{--base-dark: #5a5050;--base-mid: #8a7e78;--base-light: #b0a098;--surface: #f5f0f0;--accent: #d4b040;--warm: #c87878;--cool: #88a8c0}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none;font-family:Nunito,sans-serif;color:var(--base-dark);background:var(--surface)}#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.game-shell{position:relative;width:100%;height:100%}#game-canvas{display:block;width:100%;height:100%;touch-action:none}.fx-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;opacity:.06;background-image:linear-gradient(rgba(138,126,120,.12) 2px,transparent 2px),linear-gradient(90deg,rgba(138,126,120,.08) 2px,transparent 2px);background-size:68px 68px;-webkit-mask-image:radial-gradient(circle at 50% 46%,rgba(0,0,0,.8),transparent 84%);mask-image:radial-gradient(circle at 50% 46%,rgba(0,0,0,.8),transparent 84%)}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 42%,transparent 55%,rgba(90,80,80,.1) 100%)}.topbar{position:absolute;top:14px;left:14px;right:14px;z-index:12;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand-wrap{display:grid;gap:2px;padding:10px 14px;border-radius:16px;border:2px solid rgba(216,207,200,.8);background:#f5f0f0e0;box-shadow:0 10px 30px #5a50501f;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.brand{font-family:Bungee,sans-serif;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--base-dark);text-shadow:0 2px 0 rgba(255,255,255,.5)}.subbrand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--base-light);font-weight:800}.zone-chip{padding:9px 14px;border-radius:999px;border:2px solid rgba(216,207,200,.8);background:#f5f0f0e0;box-shadow:0 8px 18px #5a50501f;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--base-mid);font-weight:800}.hud{position:absolute;top:86px;left:14px;z-index:12;display:grid;gap:10px;pointer-events:none}.hud-card{position:relative;min-width:164px;padding:11px 14px;border-radius:16px;border:2px solid rgba(216,207,200,.8);background:#f5f0f0e0;box-shadow:0 14px 26px #5a50501f;overflow:hidden}.hud-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.3) 40%,transparent 65%);transform:translate(-120%);animation:gloss 5.2s ease-in-out infinite}.hud-label,.hud-value{position:relative;z-index:1}.hud-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--base-light);font-weight:800}.hud-value{margin-top:3px;font-family:Bungee,sans-serif;font-size:24px;line-height:1;color:var(--base-dark);letter-spacing:.02em}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#f5f0f0bf;opacity:1;transition:opacity .5s ease}.overlay.hidden{opacity:0;pointer-events:none}.panel{position:relative;width:min(580px,100%);border-radius:26px;border:3px solid rgba(216,207,200,.9);padding:clamp(20px,3vw,34px);background:#f5f0f0f2;box-shadow:0 28px 72px #5a50502e;overflow:hidden}.panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle at 12% 10%,rgba(200,184,120,.12),transparent 30%),radial-gradient(circle at 88% 84%,rgba(200,120,120,.08),transparent 32%);pointer-events:none}.panel h1{margin:0;font-family:Bungee,sans-serif;font-size:clamp(34px,6vw,58px);line-height:1;letter-spacing:.02em;color:var(--base-dark);position:relative;z-index:1}.panel p{margin:14px 0 0;max-width:42ch;line-height:1.5;color:var(--base-dark);font-weight:700;position:relative;z-index:1}.panel .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}.tag{font-size:11px;font-weight:800;letter-spacing:.05em;padding:8px 11px;border-radius:999px;border:2px solid rgba(216,207,200,.8);background:#e5ddd699;color:var(--base-mid)}.start-btn{margin-top:22px;border:0;border-radius:14px;padding:12px 22px;min-width:170px;cursor:pointer;font-family:Bungee,sans-serif;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#f9f6f2;background:var(--base-mid);background-size:180% 180%;box-shadow:0 12px 24px #8a7e7840;transition:transform .22s ease,box-shadow .22s ease;position:relative;z-index:1}.start-btn:hover{transform:translateY(-2px);background:#9a8e88;box-shadow:0 16px 30px #8a7e7859}.toast{position:absolute;right:20px;bottom:20px;z-index:16;padding:11px 15px;border-radius:12px;border:2px solid rgba(216,207,200,.8);background:#f5f0f0eb;color:var(--base-dark);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.toast.show{opacity:1;transform:translateY(0)}.controls{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:16;display:none;gap:8px}.control-btn{min-width:66px;height:44px;border-radius:999px;border:2px solid rgba(216,207,200,.8);background:#f5f0f0e0;color:var(--base-dark);font-family:Bungee,sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px #5a50501f}@keyframes sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes gloss{0%,48%,to{transform:translate(-120%)}58%{transform:translate(120%)}}@media(max-width:960px){.zone-chip{display:none}.hud{top:76px;left:10px}.hud-card{min-width:132px;padding:9px 11px}.hud-value{font-size:20px}.controls{display:flex}.topbar{top:10px;left:10px;right:10px}.brand-wrap{padding:8px 10px}.brand{font-size:16px}.subbrand{font-size:10px}}