:root{--bg:#0b1020;--panel:#121a33;--ink:#f3ead7;--muted:#9aa3c0;--gold:#d9b25f;--neon:#ff3b6b;--line:#27325a;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 Georgia,"Times New Roman",serif}
a{color:var(--gold)}
.wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 28px;box-shadow:0 20px 60px #0008}
.brand{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h1{font-size:30px;line-height:1.15;margin:0 0 12px;font-weight:600;text-wrap:balance}
.lead{color:var(--muted);margin:0 0 24px}
label{display:block;font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
input{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:#0b1226;color:var(--ink);font:16px ui-monospace,Menlo,monospace}
input:focus{outline:2px solid var(--gold);outline-offset:1px}
.btn{display:inline-block;margin-top:24px;width:100%;padding:13px 16px;border-radius:8px;border:0;background:var(--gold);color:#1a1405;font:700 15px ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.error{color:#ff8fa7;background:#3a1020;border:1px solid #6b1d35;padding:10px 12px;border-radius:8px;margin:0 0 4px}
.foot{margin-top:20px;font-size:13px;color:var(--muted)}
/* the world */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;background:#0a2a4a}
#world.drag{cursor:grabbing}
.hud{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:56px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));padding-top:max(8px,env(safe-area-inset-top,0px));background:#0b1020f2;border-bottom:1px solid #d9b25f40;box-shadow:0 4px 18px #0007;pointer-events:none}
.hud>*{pointer-events:auto}
.hud .brand{margin:0}
.hud form{margin:0}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#121a33dd;color:var(--ink);font:12px ui-monospace,Menlo,monospace;letter-spacing:.08em;cursor:pointer}
.row{display:flex;gap:8px;align-items:center}
#feed{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 24px));max-height:34vh;overflow:hidden;background:#0b1020d9;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--muted)}
#feed h2{margin:0 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
#feed ul{list-style:none;margin:0;padding:0}
#feed li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#feed li b{color:var(--ink);font-weight:600}
#nomap{position:fixed;top:64px;left:16px;margin:0}
.money{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px)}
.bub{display:inline-flex;align-items:center;gap:8px;padding:4px 5px 4px 13px;border-radius:999px;border:1px solid #d9b25f40;background:#121a33;color:var(--ink);font:600 14px/1 ui-monospace,Menlo,monospace;letter-spacing:.02em;white-space:nowrap}
button.bub{cursor:pointer}
button.bub:hover{border-color:var(--gold);transform:translateY(-1px)}
.bub b{font-weight:600;color:#fff8ea}
.bub.net b{color:var(--gold)}
.bub.paper{border-color:#8fd3ff55}.bub.paper b{color:#8fd3ff}
.bub .neg{color:#ff8fa7!important}
.ico{width:26px;height:26px;border-radius:50%;border:1.5px dashed #d9b25f99;display:inline-grid;place-items:center;font:600 12px/1 ui-monospace,Menlo,monospace;color:#d9b25f;background:#121a33 center/cover no-repeat;flex:none}
.ico.img{border:0;color:transparent}
.bub.paper .ico{border-color:#8fd3ff99;color:#8fd3ff}
.bub.dotb{padding:9px}
.bub .dot{width:8px;height:8px;border-radius:50%;background:#6b7390;display:block}
.bub .dot.on{background:#4ade80;box-shadow:0 0 8px #4ade80}
@media (max-width:820px){.hud{flex-wrap:wrap;gap:8px}.money{order:3;width:100%;gap:6px}.bub{font-size:13px;padding:4px 5px 4px 10px}.ico{width:22px;height:22px}.hud .brand{font-size:11px}}
.acct{position:relative}
.acct-btn{padding:3px;border-radius:50%;border:1px solid var(--line);background:#121a33;cursor:pointer;display:grid}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{border-color:var(--gold)}
.acct-btn .ico{width:30px;height:30px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:#0b1020f7;border:1px solid var(--line);border-radius:10px;padding:12px;box-shadow:0 12px 30px #0009;font:12px/1.4 ui-monospace,Menlo,monospace;color:var(--muted)}
.acct-menu p{margin:0 0 10px}.acct-menu b{color:var(--ink)}
.acct-menu form{margin:0}
.acct-menu button{width:100%;padding:8px 10px;border-radius:7px;border:1px solid #6b1d35;background:#3a1020;color:#ffd0db;font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.06em;cursor:pointer}
.acct-menu button:hover{background:#4a1428}
#feed{z-index:4}
.acct-btn.env{position:relative}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b6b;color:#fff;font:700 11px/18px ui-monospace,Menlo,monospace;text-align:center;box-shadow:0 0 0 2px #0b1020}
.env-menu{min-width:240px}
.env-menu .h{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:10px;margin-bottom:8px}
.env-menu .note{margin:10px 0 0;font-size:11px;color:#6b7390}
