:root{--bg-deep:#0b0d12;--bg-panel:rgba(18,21,30,0.88);--bg-panel-solid:#14171f;--line:rgba(214,205,183,0.14);--ink:#e8e2d4;--ink-dim:#9d9788;--ink-faint:#625d51;--gold:#d8b45a;--gold-soft:rgba(216,180,90,0.35);--teal:#6fc7b4;--you:#8ee3c8;--danger:#d97b6c;--rare:#b48ce3;--legendary:#ffd27f;--radius:12px;--font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;--font-mono:"Cascadia Code","SF Mono",Consolas,monospace}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}#app-root{position:fixed;inset:0}canvas.board-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}.panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(0,0,0,.45)}button.ui{font:600 13px var(--font-sans);letter-spacing:.04em;color:var(--ink);background:rgba(232,226,212,.07);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}button.ui:hover{background:rgba(232,226,212,.14);border-color:rgba(216,180,90,.4)}button.ui:active{transform:translateY(1px)}button.ui.primary{background:linear-gradient(160deg,#d8b45a,#b8923c);color:#17130a;border-color:transparent}button.ui.primary:hover{filter:brightness(1.08)}button.ui.icon{padding:6px 10px;font-size:15px;line-height:1}input.ui{font:500 15px var(--font-sans);color:var(--ink);background:rgba(10,12,17,.7);border:1px solid var(--line);border-radius:8px;padding:10px 14px;outline:none;width:100%;transition:border-color .15s}input.ui:focus{border-color:var(--gold-soft)}.mono{font-family:var(--font-mono);font-size:12px}.hud-top{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;z-index:20}.hud-top>*{pointer-events:auto}.hud-title{display:flex;align-items:baseline;gap:12px;padding:10px 18px}.hud-title h1{margin:0;font:700 15px/1 var(--font-serif);letter-spacing:.22em;color:var(--ink)}.hud-title .sub{font:500 10px var(--font-sans);letter-spacing:.18em;color:var(--ink-faint)}.hud-progress{padding:9px 18px;text-align:center}.hud-progress .count{font:600 14px var(--font-mono);color:var(--gold);letter-spacing:.02em}.hud-progress .label{font:500 9px var(--font-sans);letter-spacing:.22em;color:var(--ink-faint);margin-top:2px;text-transform:uppercase}.hud-player{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px}.hud-player .name{font:600 13px var(--font-sans);letter-spacing:.08em}.hud-player .online{font:500 10px var(--font-sans);color:var(--teal);letter-spacing:.06em}.hud-bottom{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:20;pointer-events:none}.hud-bottom>*{pointer-events:auto}.hud-location{padding:10px 16px;min-width:180px}.hud-location .region{font:600 14px var(--font-serif);letter-spacing:.06em;color:var(--ink)}.hud-location .sector{font:500 10px var(--font-sans);letter-spacing:.14em;color:var(--ink-faint);margin-top:3px}.hud-location .coords{font:500 11px var(--font-mono);color:var(--ink-dim);margin-top:3px}.hud-zoom{display:flex;gap:6px;padding:6px}.hud-corner{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:20}.onboarding-backdrop{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,rgba(38,42,58,.55),transparent 60%),rgba(7,8,12,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.onboarding{width:min(420px,calc(100vw - 40px));padding:40px 36px 32px;text-align:center}.onboarding .mark{font-size:30px;color:var(--gold);margin-bottom:18px}.onboarding h2{margin:0 0 14px;font:700 22px var(--font-serif);letter-spacing:.12em}.onboarding p{margin:0 0 6px;font:400 14px/1.6 var(--font-sans);color:var(--ink-dim)}.onboarding .prompt{margin:26px 0 10px;color:var(--ink);font-weight:500}.onboarding .error{color:var(--danger);font-size:12px;min-height:16px;margin-top:8px}.onboarding button{margin-top:18px;width:100%;padding:12px;font-size:14px;letter-spacing:.14em}.toast-stack{position:absolute;top:74px;right:14px;display:flex;flex-direction:column;gap:10px;z-index:60;pointer-events:none}.discovery-toast{display:flex;gap:14px;align-items:center;padding:12px 18px 12px 12px;animation:toast-in .45s cubic-bezier(.2,.9,.25,1.2);pointer-events:auto;border-color:var(--gold-soft)}.discovery-toast canvas,.discovery-toast img{width:56px;height:74px;border-radius:6px}.discovery-toast .headline{font:500 9px var(--font-sans);letter-spacing:.24em;color:var(--gold);text-transform:uppercase}.discovery-toast .name{font:700 15px var(--font-serif);margin:3px 0}.discovery-toast .meta{font:500 11px var(--font-sans);color:var(--ink-dim)}.discovery-toast.plain{border-color:var(--line)}@keyframes toast-in{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.discovery-toast{animation:none}}.side-panel{position:absolute;top:70px;right:14px;bottom:14px;width:min(400px,calc(100vw - 28px));z-index:50;display:flex;flex-direction:column;overflow:hidden}.side-panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--line)}.side-panel header h3{margin:0;font:700 15px var(--font-serif);letter-spacing:.16em}.side-panel .body{overflow-y:auto;padding:16px 20px 24px;flex:1 1}.side-panel .body::-webkit-scrollbar{width:8px}.side-panel .body::-webkit-scrollbar-thumb{background:rgba(232,226,212,.12);border-radius:4px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px;margin-bottom:20px}.stat-cell{border:1px solid var(--line);border-radius:10px;padding:12px 14px}.stat-cell .v{font:600 20px var(--font-mono);color:var(--gold)}.stat-cell .k{font:500 9px var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}.collection-row{display:flex;align-items:center;gap:10px;padding:8px 0}.collection-row .sym{width:22px;text-align:center;color:var(--gold)}.collection-row .cname{flex:1 1;font-size:13px}.collection-row .bar{width:110px;height:4px;background:rgba(232,226,212,.08);border-radius:2px;overflow:hidden}.collection-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:2px}.collection-row .n{width:34px;text-align:right;font:500 11px var(--font-mono);color:var(--ink-dim)}.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));grid-gap:10px;gap:10px;margin-top:10px}.recent-card{cursor:pointer;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;background:none;transition:transform .12s,border-color .12s}.recent-card:hover{transform:translateY(-2px);border-color:var(--gold-soft)}.recent-card canvas{display:block;width:100%;aspect-ratio:3/4}.section-label{font:600 10px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin:22px 0 6px}.inspect-panel{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;display:flex;gap:18px;padding:16px;max-width:min(480px,calc(100vw - 24px));animation:inspect-in .3s cubic-bezier(.2,.9,.3,1.15)}@keyframes inspect-in{0%{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}}.inspect-panel canvas{width:108px;height:144px;border-radius:8px;flex-shrink:0}.inspect-panel .title{font:700 17px var(--font-serif);margin:2px 0}.inspect-panel .spec-no{font:500 10px var(--font-mono);color:var(--ink-faint)}.inspect-panel .meta{font:500 12px var(--font-sans);color:var(--ink-dim);margin-top:4px}.inspect-panel .flavor{font:italic 400 12px/1.5 var(--font-serif);color:var(--ink-dim);margin-top:10px}.inspect-panel .found{margin-top:10px;font:600 11px var(--font-sans);letter-spacing:.1em;color:var(--gold)}.inspect-panel .found.you{color:var(--you)}.inspect-panel .close{position:absolute;top:8px;right:10px}.rarity-common{color:var(--ink-dim)}.rarity-uncommon{color:var(--teal)}.rarity-rare{color:var(--rare)}.rarity-legendary{color:var(--legendary)}.minimap{padding:8px;cursor:crosshair}.minimap canvas{display:block;border-radius:6px}.minimap .mm-label{font:500 9px var(--font-sans);letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;text-align:center;padding-top:6px}.hint-bubble{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:40;padding:10px 22px;font:500 14px var(--font-serif);letter-spacing:.08em;color:var(--ink);pointer-events:none;animation:hint-in .6s ease;white-space:nowrap}@keyframes hint-in{0%{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}.conn-banner{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:70;padding:8px 20px;font:500 12px var(--font-sans);letter-spacing:.08em;color:var(--danger);border-color:rgba(217,123,108,.4)}.menu-pop{position:absolute;top:60px;right:0;min-width:220px;padding:8px;display:flex;flex-direction:column;gap:2px;z-index:80}.menu-pop a,.menu-pop button{text-align:left;border:none;background:none;color:var(--ink);font:500 13px var(--font-sans);padding:9px 12px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:16px;text-decoration:none}.menu-pop a:hover,.menu-pop button:hover{background:rgba(232,226,212,.08)}.menu-pop .mkey{color:var(--ink-faint);font-family:var(--font-mono);font-size:11px}.menu-pop hr{border:none;border-top:1px solid var(--line);margin:6px 4px}.dev-panel{position:absolute;left:14px;top:74px;z-index:90;padding:12px 14px;font:500 11px var(--font-mono);color:var(--teal);min-width:190px}.dev-panel div{padding:1px 0}.dev-panel input{width:60px;margin-right:4px}@media (max-width:720px){.hud-title .sub{display:none}.hud-title{padding:8px 12px}.hud-title h1{font-size:12px;letter-spacing:.14em}.hud-progress{padding:7px 10px}.hud-progress .count{font-size:11px}.hud-player .name,.hud-progress .label{display:none}.hud-location{min-width:0;padding:8px 12px}.hud-location .coords{display:none}.side-panel{top:auto;right:0;left:0;bottom:0;width:100%;max-height:72vh;border-radius:16px 16px 0 0}.minimap{display:none}.minimap.mm-open{display:block}}