:root{
  --bg:#05060d; --panel:#0d1122; --panel2:#151a30; --line:#242c4a; --text:#eaf0ff;
  --dim:#8a93b8; --accent:#35e0c0; --gold:#ffd75e; --war:#ff2e63; --good:#00e436;
  --ui:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
/* Several panels are laid out by id (#bar sets display:flex), which outranks the
   browser's [hidden]{display:none} — so el.hidden = true silently did nothing
   and the signed-out board showed a live top bar behind the auth gate. */
[hidden]{display:none !important}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-user-select:none;user-select:none}
#board{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab;touch-action:none}
body:has(#mode-paint.on) #board{cursor:crosshair}

.btn{font:inherit;font-size:13px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer;transition:none}
.btn:hover{border-color:#3a4670}
.btn.on{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:#0e4d41;border-color:var(--accent);color:var(--accent);font-weight:600}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%;margin-top:10px;padding:11px}

/* top bar */
#bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(#0d1122ee,#0d112288);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding-top:max(9px,env(safe-area-inset-top))}
#logo{font-weight:800;letter-spacing:1px;color:var(--accent)}
#wallet{font-size:13px;color:var(--dim)}#wallet b{color:var(--gold);font-size:15px}
.spacer{flex:1}

/* paint dock */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:20;background:linear-gradient(#0d112288,#0d1122ee);
  backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
#tools{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:520px;margin:0 auto 9px}
.tool{font:inherit;font-size:14px;line-height:1;color:var(--text);background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;width:34px;height:32px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tool:hover:not(:disabled){border-color:#3a4670}
.tool.on{border-color:var(--accent);color:var(--accent);background:#0e4d4133}
.tool:disabled{opacity:.35;cursor:not-allowed}
.tool-sep{width:1px;background:var(--line);margin:2px 3px}
#palette{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;max-width:520px;margin:0 auto 10px}
.sw{aspect-ratio:1;border:2px solid #0006;border-radius:4px;cursor:pointer;padding:0}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
#pending-info{display:flex;align-items:center;gap:10px;justify-content:center}
#pending-count{color:var(--dim);font-size:13px;min-width:56px}

/* minimap — sits clear of the dock when the paint tray is open */
#minimap{position:fixed;left:12px;bottom:12px;z-index:15;width:150px;height:110px;
  background:#05060d;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  box-shadow:0 6px 20px #0007;image-rendering:pixelated}
#minimap:hover{border-color:#3a4670}
body:has(#dock:not([hidden])) #minimap{bottom:150px}
@media (max-width:520px){#minimap{width:104px;height:76px} body:has(#dock:not([hidden])) #minimap{bottom:176px}}

/* tour */
#tour-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 2px}
#tour-dots .dot{width:6px;height:6px;border-radius:50%;background:var(--line)}
#tour-dots .dot.on{background:var(--accent)}
#tour .card p{min-height:76px}

/* overlays */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#04060cd0;backdrop-filter:blur(3px);padding:16px}
.card{width:min(400px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 20px 60px #000a}
.card h3{margin:0 0 10px}
.auth-logo{font-weight:800;font-size:26px;letter-spacing:2px;color:var(--accent);text-align:center}
.muted{color:var(--dim);font-size:13px;line-height:1.5}
.tabs{display:flex;gap:6px;margin:14px 0 10px}
.tab{flex:1;background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:8px;cursor:pointer;font:inherit}
.tab.on{border-color:var(--accent);color:var(--accent)}
.card input{width:100%;margin:6px 0;padding:11px;font:inherit;font-size:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text)}
.msg{color:var(--gold);font-size:12.5px;min-height:16px;margin-top:8px;text-align:center}

/* image import */
.preview{display:flex;align-items:center;justify-content:center;margin:12px 0;padding:10px;min-height:120px;
  background:#05060d;border:1px solid var(--line);border-radius:10px;overflow:auto}
.preview canvas{image-rendering:pixelated;max-width:100%;display:block}
.row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.row input[type=range]{flex:1;accent-color:var(--accent)}
.row b{color:var(--text);min-width:34px;text-align:right}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin-top:8px}
.check input{accent-color:var(--accent)}

.buyrow{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.buyrow .st-preset{flex:1;min-width:74px;font-size:12px;padding:8px 6px}
.buy{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px}
.buy small{color:var(--dim);font-size:11px;font-weight:400}
.neg{color:var(--war);font-size:13px}
.qtotal{font-size:30px;font-weight:700;color:var(--accent);text-align:center;margin:10px 0 4px}
.qtotal span{font-size:13px;font-weight:400;color:var(--dim)}
.mine{color:var(--gold);font-size:12px;font-weight:400}
#unread{display:inline-block;margin-left:4px;min-width:16px;padding:0 4px;border-radius:999px;
  background:var(--war);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
#presence{margin-left:4px;font-size:11px;color:var(--dim)}
#presence:empty{display:none}

.feedrow{display:flex;gap:9px;align-items:baseline;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px}
.feedrow .who{color:var(--accent);font-weight:600}
.feedrow .what{flex:1;color:var(--dim)}
.feedrow .when{color:#5c6488;font-size:11px;white-space:nowrap}
.feedrow.unread{background:#151a3055;border-left:2px solid var(--gold);padding-left:7px}
.feedrow .jump{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:12px;padding:0}
.expiry{color:var(--dim);font-size:12px}
.expiry.soon{color:var(--gold)}
.expiry.now{color:var(--war)}

.ledger{max-height:52vh;overflow:auto;margin:6px 0}
.lrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px}
.lrow .pos{color:var(--good)}.lrow .neg{color:var(--war)}.lrow .k{flex:1;color:var(--dim)}.lrow .b{color:var(--dim)}

#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;background:#0d1122ee;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:13px;box-shadow:0 6px 20px #0008}

@media (max-width:520px){ #btn-buy,#logo{font-size:12px} #palette{grid-template-columns:repeat(8,1fr)} }

/* Empty-board state. Sits above the canvas but must never eat pointer events —
   the board underneath still pans, zooms and paints. */
#empty{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);z-index:10;
  pointer-events:none;text-align:center;padding:0 24px}
#empty .big{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--dim)}
#empty .muted{margin:0;font-size:13px;color:#5c6488}

/* defacement warning on the quote — this is the one place a price can surprise */
.warn{background:#3a1020;border:1px solid var(--war);border-radius:8px;padding:9px 11px;
  font-size:12.5px;line-height:1.5;color:#ffc9d5;margin:0 0 10px}

/* plot analytics sparkline */
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin:12px 0;padding:0 2px}
.spark .bar{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.spark .bar:hover{opacity:1}

/* progression */
#claimdot{display:inline-block;width:7px;height:7px;margin-left:4px;border-radius:50%;
  background:var(--gold);vertical-align:middle;box-shadow:0 0 6px var(--gold)}
.xpbar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:10px 0 4px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#0e4d41,var(--accent))}
.questrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.questrow .k{flex:1;color:var(--text)}
.questrow .p{color:var(--dim);font-size:12px;white-space:nowrap}
.questrow .done{color:var(--good)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.badge{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11.5px;color:var(--gold)}
.rank{display:flex;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13px}
.rank .n{color:var(--dim);min-width:22px}
.rank .h{flex:1;color:var(--accent)}
.rank .x{color:var(--dim)}
.rank.you{background:#151a3055;border-left:2px solid var(--accent);padding-left:7px}

/* spotlight */
#spotlight{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:18;
  display:flex;align-items:center;gap:8px;max-width:min(560px,92vw);
  padding:6px 12px;border-radius:999px;font-size:12.5px;color:var(--text);
  background:#1a1030ee;border:1px solid var(--gold);box-shadow:0 6px 20px #0007}
#spotlight #spot-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spotlight .jump{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;font-weight:600;padding:0}

/* factions + crews */
.factionrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.factionrow .swatch{width:14px;height:14px;border-radius:3px;border:1px solid #0006}
.factionrow .k{flex:1}
.factionrow .n{color:var(--dim);font-size:12px;white-space:nowrap}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px;
  word-break:break-all;margin:8px 0;color:var(--gold)}
.tabsrow{display:flex;gap:6px;margin:12px 0 8px;flex-wrap:wrap}
.tabsrow .tab{flex:1;min-width:70px}
textarea.code{width:100%;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.5;color:var(--text);white-space:pre}

#gamedot{display:inline-block;width:7px;height:7px;margin-left:4px;border-radius:50%;
  background:var(--good);vertical-align:middle;box-shadow:0 0 6px var(--good)}
.gamecard{border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;background:#0a0e1c}
.gamecard h4{margin:0 0 4px;font-size:14px;color:var(--accent)}
.gamecard p{margin:0 0 8px;font-size:12.5px;color:var(--dim);line-height:1.5}
.gamecard .row input{width:100%}
.gamecard.spent{opacity:.55}

/* now playing */
#nowplaying{position:fixed;right:12px;bottom:12px;z-index:16;max-width:min(240px,46vw);
  display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:#0d1122ee;border:1px solid var(--line);color:var(--dim);
  font:inherit;font-size:12px;cursor:pointer;box-shadow:0 6px 20px #0007;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nowplaying:hover{border-color:var(--accent);color:var(--text)}
body:has(#dock:not([hidden])) #nowplaying{bottom:150px}
@media (max-width:520px){#nowplaying{font-size:11px;max-width:40vw} body:has(#dock:not([hidden])) #nowplaying{bottom:176px}}

/* replay scrubber */
#replay{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:22;
  display:flex;align-items:center;gap:10px;width:min(560px,94vw);
  padding:9px 14px;border-radius:12px;background:#0d1122f2;border:1px solid var(--line);
  box-shadow:0 8px 26px #0009;font-size:12.5px;color:var(--dim)}
#replay input[type=range]{flex:1;accent-color:var(--accent)}
#replay .when{min-width:96px;text-align:right;color:var(--text);white-space:nowrap}
#replay .btn{padding:5px 10px}
body:has(#replay:not([hidden])) #nowplaying{bottom:74px}
.passport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;margin:10px 0;max-height:40vh;overflow:auto}
.stamp{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 4px;
  font-size:10.5px;text-align:center;color:var(--gold)}

/* long-form documents (terms, privacy) */
.doc{max-width:680px;margin:0 auto;padding:40px 22px 80px;line-height:1.65;font-size:14.5px}
.doc h1{font-size:26px;margin:18px 0 6px;color:var(--accent)}
.doc h2{font-size:16px;margin:26px 0 6px;color:var(--text)}
.doc p,.doc li{color:#b9c1e0}
.doc ul{padding-left:20px}
.doc li{margin:5px 0}
.doc a{color:var(--accent)}
.doc b{color:var(--text)}

.linky{display:block;width:100%;background:none;border:0;color:var(--dim);font:inherit;
  font-size:12.5px;padding:7px 0 0;cursor:pointer;text-align:center}
.linky:hover{color:var(--accent)}
.fineprint{margin:12px 0 0;text-align:center;font-size:11.5px;color:#5c6488}
.fineprint a{color:#7d86ad}
/* signed out: the board is readable, the tools are not */
body.anon #btn-buy,body.anon #mode-paint,body.anon #btn-progress,body.anon #btn-games,
body.anon #btn-social,body.anon #btn-bell,body.anon #wallet{display:none}

.zone-label{color:var(--gold);font-size:11.5px;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}
.zone-label:empty{display:none}

/* The bar outgrew the phone: fifteen controls need 521px and a handset gives
   390, which pushed sign-in and the account button off the edge entirely — a
   phone visitor could see the board and had no way to join. Below 720px the
   secondary controls fold into one menu, and what stays is what you need to
   look, paint, pay and get in. */
@media (max-width: 720px){
  #bar .folds{display:none}
  #btn-more{display:flex}
  #bar{gap:6px;padding:8px 9px}
  #logo{font-size:12px;letter-spacing:.5px}
  #wallet{font-size:12px}
  #bar .btn{padding:7px 9px}
  #btn-signin{padding:7px 10px;font-size:12px}
}
.menurow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font:inherit;font-size:14px;cursor:pointer;margin-bottom:7px;text-align:left}
.menurow:hover{border-color:var(--accent)}
.menurow .ic{font-size:17px;width:24px;text-align:center}
.menurow .tag{margin-left:auto;color:var(--war);font-size:11px;font-weight:700}

.qart{width:44px;height:44px;image-rendering:pixelated;border:1px solid var(--line);border-radius:5px;background:#05060d}

/* icon chooser */
.iconsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin:12px 0;
  max-height:46vh;overflow:auto;padding:2px}
.iconcell{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 4px;cursor:pointer}
.iconcell:hover{border-color:var(--accent)}
.iconcell canvas{width:40px;height:40px;image-rendering:pixelated}
.iconcell .nm{font-size:10.5px;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconcell .own{position:absolute;top:3px;right:4px;font-size:9px;color:var(--gold)}
.iconbar{display:flex;gap:6px;align-items:center;margin:6px 0 2px;flex-wrap:wrap}
.iconbar .muted{flex:1;min-width:120px}

/* ── the standing HUD ────────────────────────────────────────────────────────
   Everything the app can do was reachable but invisible: fifteen emoji and a
   modal behind each. The demo showed its state at all times and read as a much
   fuller product for it. This is that column — live chips you can glance at,
   and a feed that scrolls whether or not you asked. */
#hud{position:fixed;top:52px;right:10px;bottom:10px;width:236px;z-index:14;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
#hud > *{pointer-events:auto}
#hud-top{display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:9px;background:#0d1122e8;border:1px solid var(--line);
  font-size:11.5px;color:var(--dim)}
#hud-online{color:var(--good)}
#hud-chips{display:flex;flex-direction:column;gap:5px;overflow:auto;max-height:46vh}
.chip{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:9px;
  background:#0d1122e8;border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:12px;cursor:pointer;text-align:left}
.chip:hover{border-color:var(--accent)}
.chip .ic{width:16px;text-align:center;font-size:13px}
.chip .lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .vl{color:var(--dim);font-size:11px;white-space:nowrap}
.chip.hot{border-color:var(--gold)}
.chip.hot .vl{color:var(--gold)}
.chip.live{border-color:var(--war)}
.chip.live .vl{color:var(--war)}
#hud-feed{flex:1;min-height:110px;display:flex;flex-direction:column;
  border-radius:9px;background:#0d1122e8;border:1px solid var(--line);overflow:hidden}
#hud-tabs{display:flex;border-bottom:1px solid var(--line)}
.hudtab{flex:1;background:none;border:0;color:var(--dim);font:inherit;font-size:10.5px;
  letter-spacing:.6px;padding:7px 0;cursor:pointer}
.hudtab.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
#hud-lines{flex:1;overflow:auto;padding:6px 9px;font-size:11.5px;line-height:1.5}
#hud-lines .fl{padding:4px 0;border-bottom:1px solid #ffffff10;color:var(--dim)}
#hud-lines .fl b{color:var(--accent);font-weight:600}
#hud-lines .fl .t{color:#5c6488;font-size:10px}
/* Below this the column would crowd the board, and the ☰ menu already covers it. */
@media (max-width: 1000px){ #hud{display:none} }

/* labelled modes + board stats */
#bar .lbl{font-size:11px;letter-spacing:.5px}
#stats{display:flex;gap:10px;align-items:center;margin-left:10px;font-size:11.5px;color:var(--dim);white-space:nowrap}
@media (max-width: 1100px){ #bar .lbl{display:none} #stats{display:none} }

/* wallet card */
#wallet-card{padding:9px 11px;border-radius:10px;background:#0d1122ee;border:1px solid var(--accent)}
.wc-top{display:flex;align-items:baseline;gap:5px}
.wc-top b{font-size:21px;color:var(--gold);line-height:1}
.wc-cr{font-size:11px;color:var(--dim)}
#wc-usd{margin-left:auto;font-size:10.5px;color:#5c6488}
.wc-bar{height:5px;border-radius:999px;background:var(--panel2);overflow:hidden;margin:7px 0 5px}
.wc-bar i{display:block;height:100%;background:linear-gradient(90deg,#0e4d41,var(--accent))}
.wc-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim)}
#hud-actions{display:flex;gap:5px}
#hud-actions .btn{flex:1;font-size:11px;padding:7px 2px}

/* the launcher: every feature visible, not hidden behind a menu */
#hud-launcher{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.lb-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:#0d1122ee;border:1px solid var(--line);border-radius:7px;
  font-size:14px;cursor:pointer;padding:0;color:var(--text)}
.lb-cell:hover{border-color:var(--accent);background:var(--panel2)}
.lb-cell.hot{border-color:var(--gold)}

/* quests, always on screen */
#hud-quests{border-radius:9px;background:#0d1122e8;border:1px solid var(--line);padding:7px 9px}
#hud-quests h5{margin:0 0 5px;font-size:10px;letter-spacing:.7px;color:var(--dim);font-weight:700}
.qrow{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0;color:var(--text)}
.qrow .qn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qp{color:var(--dim);font-size:10.5px;white-space:nowrap}
.qrow.done .qp{color:var(--good)}
.qrow button{background:none;border:0;color:var(--gold);font:inherit;font-size:10.5px;cursor:pointer;padding:0}

/* hover tooltip */
#tip{position:fixed;z-index:30;pointer-events:none;max-width:250px;
  padding:7px 10px;border-radius:8px;background:#0d1122f5;border:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--text);box-shadow:0 6px 20px #0008}
#tip b{color:var(--accent)}
#tip .m{color:var(--dim)}
#tip .warn2{color:var(--war)}

/* the running price while a drawing is staged */
#livecost{position:fixed;left:50%;transform:translateX(-50%);bottom:150px;z-index:19;
  display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;
  background:#0d1122f2;border:1px solid var(--line);font-size:12.5px;color:var(--text);
  box-shadow:0 6px 20px #0008;white-space:nowrap}
#livecost b{color:var(--gold)}
#livecost .cl{color:var(--war)}
#livecost.over b{color:var(--war)}
@media (max-width:520px){ #livecost{bottom:176px;font-size:11.5px;padding:6px 11px} }