:root{--ink:#17192d;--paper:#ece4ca;--amber:#f3a65a;--coral:#c65d5d;--mint:#d4e3c4;--glass:rgba(18,19,34,.86);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:var(--paper);background:#0c1020}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#0c1020;overflow:hidden}.city{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}.city-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(.78) contrast(1.03)}.city:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,11,31,.15),transparent 35%,rgba(4,7,17,.46))}.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.topbar{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;gap:.65rem;padding:calc(.75rem + env(safe-area-inset-top)) .8rem .7rem;background:linear-gradient(180deg,rgba(10,12,25,.9),rgba(10,12,25,0));pointer-events:none}.topbar button{pointer-events:auto}.wordmark,.round,.dock button,.spot{font:inherit;color:inherit;border:0}.wordmark{background:var(--paper);color:var(--ink);font-weight:950;letter-spacing:-.08em;font-size:1.25rem;padding:.42rem .62rem;transform:rotate(-1.5deg);box-shadow:3px 3px 0 var(--coral)}.wordmark span{font-size:.7em;letter-spacing:.03em}.status{margin-left:auto;display:flex;align-items:center;gap:.4rem;font:700 .72rem ui-monospace,monospace;text-shadow:0 1px 4px #000}.status i{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}.round{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--glass);border:1px solid rgba(255,255,255,.25)}.welcome{position:absolute;z-index:5;top:14%;left:50%;width:min(88vw,410px);transform:translateX(-50%) rotate(-.5deg);padding:.75rem 1rem;background:rgba(19,20,34,.78);border:1px solid rgba(236,228,202,.35);box-shadow:7px 7px 0 rgba(13,14,27,.4);backdrop-filter:blur(5px);transition:.5s}.welcome.hide{opacity:0;transform:translate(-50%,-20px);pointer-events:none}.eyebrow{margin:0 0 .25rem;color:var(--amber);font:700 .7rem ui-monospace,monospace;letter-spacing:.12em}.welcome h1{margin:0;font-size:clamp(1.35rem,6vw,2rem);letter-spacing:.03em}.welcome p:last-child{margin:.3rem 0 0;font-size:.88rem}.hotspots{position:absolute;inset:0;z-index:4}.spot{position:absolute;background:var(--glass);border:1px solid rgba(255,255,255,.34);padding:.5rem .65rem;text-align:left;line-height:1.1;box-shadow:3px 4px 0 rgba(7,8,19,.38);backdrop-filter:blur(4px);border-radius:2px;transition:transform .18s,background .18s;min-height:44px}.spot:active{transform:translateY(2px) rotate(-1deg);background:#7d3e45}.spot b{display:block;font-size:.78rem}.spot small{display:block;margin-top:.28rem;font:600 .61rem ui-monospace,monospace;color:var(--mint)}.broadcast{left:4%;top:31%}.castle{left:39%;top:34%}.museum{right:4%;top:33%}.arcade{left:4%;bottom:26%}.park{right:16%;bottom:29%}.ai{right:3%;bottom:15%}.construction{right:2%;bottom:5%;opacity:.85}.manhole{position:absolute;z-index:5;left:49%;bottom:25%;width:42px;height:19px;border:2px dashed #372e2d;border-radius:50%;background:#6d5a4f;color:#bda588;font:700 .6rem ui-monospace,monospace;transform:rotate(-3deg)}.manhole.escape{animation:escape .8s forwards}.vending{position:absolute;z-index:5;left:29%;bottom:17%;width:30px;height:47px;border:2px solid #57464b;background:#c7d1bc;color:#6d3040;box-shadow:0 0 12px rgba(243,166,90,.45)}.vending span{font:900 .65rem ui-monospace,monospace}.dock{position:absolute;z-index:12;left:50%;bottom:calc(.65rem + env(safe-area-inset-bottom));display:flex;gap:.4rem;transform:translateX(-50%);padding:.36rem;background:rgba(11,12,24,.9);border:1px solid rgba(255,255,255,.2);box-shadow:0 5px 18px #0008;backdrop-filter:blur(8px)}.dock button{position:relative;min-width:76px;min-height:48px;background:transparent;color:var(--paper);font-size:.7rem;font-weight:800;letter-spacing:.08em}.dock button+button{border-left:1px solid #ffffff25}.dock span{display:block;font-size:1.1rem;margin-bottom:.15rem}.dock em{position:absolute;top:1px;right:7px;display:none;width:17px;height:17px;border-radius:50%;background:var(--coral);font:700 .68rem/17px ui-monospace,monospace}.panel{width:min(92vw,520px);max-height:82svh;padding:0;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-shadow:9px 10px 0 #0b0d1ce6;overflow:auto}.panel::backdrop{background:rgba(6,8,17,.7);backdrop-filter:blur(3px)}.panel .close{position:sticky;z-index:4;float:right;top:.5rem;margin:.5rem;width:42px;height:42px;border:2px solid var(--ink);background:var(--coral);color:#fff;font-size:1.4rem}.panel-inner{padding:1.2rem}.panel h2{margin:.2rem 0 .7rem;font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.05}.panel p{line-height:1.75}.panel .screen{margin:1rem 0;padding:1rem;background:#182137;color:#d7f1c0;border:7px solid #46433d;border-radius:12px;font:700 .9rem/1.6 ui-monospace,monospace;box-shadow:inset 0 0 25px #000}.actions{display:grid;gap:.55rem;margin-top:1rem}.actions button,.actions a,.ai-form button{display:block;width:100%;min-height:48px;padding:.8rem;border:2px solid var(--ink);background:#fff6da;color:var(--ink);font:800 .9rem inherit;text-align:left;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}.actions button:active,.actions a:active{transform:translate(2px,2px);box-shadow:1px 1px 0}.artifact{padding:1rem;background:#30283a;color:#e8ddbe;min-height:140px;display:grid;place-items:center;text-align:center;border:8px double #c09969}.artifact b{font:900 2rem ui-monospace,monospace}.ai-form{display:flex;gap:.5rem;margin-top:1rem}.ai-form input{min-width:0;flex:1;padding:.75rem;border:2px solid var(--ink);background:#fffdf0;font-size:1rem}.ai-form button{width:auto}.map-panel{padding:1.2rem}.map-panel h2{margin-top:.2rem}.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.map-grid button{min-height:74px;border:2px solid var(--ink);background:#fff7db;text-align:left;font-weight:800;padding:.7rem;box-shadow:3px 3px 0 var(--ink)}.map-grid small{display:block;margin-top:.25rem;font-weight:500}.map-note{font-size:.75rem}.toast{position:fixed;z-index:30;left:50%;bottom:calc(5.3rem + env(safe-area-inset-bottom));width:max-content;max-width:86vw;transform:translate(-50%,16px);padding:.65rem .9rem;background:#11152a;color:#f4e9c9;border:1px solid #f4e9c966;box-shadow:4px 4px 0 #0008;opacity:0;pointer-events:none;transition:.25s;font-size:.83rem}.toast.show{opacity:1;transform:translate(-50%,0)}.glitch{display:none;position:fixed;z-index:50;inset:0;background:#06090d;color:#b9ffae;place-items:center;text-align:left;font:700 1rem/2 ui-monospace,monospace;letter-spacing:.08em}.glitch.on{display:grid;animation:blink .12s 3}.city.alt .city-bg{filter:grayscale(.4) contrast(1.25) hue-rotate(22deg)}@keyframes blink{50%{opacity:.45}}@keyframes escape{to{left:87%;bottom:46%;transform:rotate(720deg) scale(.65)}}@media(min-width:760px){.city-bg{object-position:center 52%}.welcome{top:12%}.spot{padding:.65rem .8rem}.spot b{font-size:.9rem}.broadcast{left:8%;top:34%}.castle{left:44%;top:38%}.museum{right:12%;top:36%}.arcade{left:13%;bottom:29%}.park{right:27%;bottom:30%}.ai{right:8%;bottom:19%}.construction{right:8%;bottom:7%}.vending{left:33%;bottom:19%}.manhole{left:52%;bottom:25%}}@media(max-width:430px){.status span:last-child{display:none}.spot small{display:none}.spot{padding:.45rem}.broadcast{top:28%}.castle{top:36%}.museum{top:30%}.arcade{bottom:31%}.park{bottom:31%}.ai{bottom:18%}.welcome{top:12%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}