:root {
  --bg: #0b0d12; --fg: #eef0f5; --mut: #9aa1b4; --line: rgba(255,255,255,.08);
  --panel: rgba(12,14,20,.78); --up: #3ddc84; --dn: #ff5c5c; --acc: #ffd166;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: none;
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

#top { position: absolute; top: calc(8px + var(--sat)); left: 8px; right: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.brand { color: var(--fg); text-decoration: none; pointer-events: auto; font-weight: 800; letter-spacing: .06em; font-size: 15px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); }
.stat { display: flex; gap: 6px; align-items: baseline; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; backdrop-filter: blur(8px); white-space: nowrap; }
.stat .k { color: var(--mut); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.stat .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .ico { font-size: 13px; }
#weather.storm .v { color: #9fb6ff } #weather.rain .v { color: #8fd0ff } #weather.sunrise .v { color: var(--acc) } #weather.clear .v { color: var(--up) }

#ticker { position: absolute; left: 8px; right: 8px; bottom: calc(10px + var(--sab)); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none; }
.ev { font-size: 12px; padding: 5px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(8px);
  animation: evin .35s ease-out both; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev b { color: var(--fg) } .ev .t { color: var(--mut); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ev.pump, .ev.evolved, .ev.crowned { border-color: rgba(61,220,132,.4) } .ev.crash, .ev.dump, .ev.died, .ev.shrank { border-color: rgba(255,92,92,.4) }
.ev.born, .ev.returned { border-color: rgba(255,209,102,.4) }
@keyframes evin { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

#card { position: absolute; left: 8px; right: 8px; bottom: calc(10px + var(--sab)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 12px 10px; backdrop-filter: blur(12px); max-height: 60vh; overflow: auto; animation: evin .25s ease-out both; }
@media (min-width: 720px) { #card { left: auto; width: 360px; right: 12px; bottom: 12px; } #ticker { right: auto; max-width: 48vw; } }
#card.hidden, #toast.hidden, #panel.hidden { display: none; }
#card-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.card-head { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; padding-right: 26px; }
#card-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #000; }
.card-sym { font-weight: 800; font-size: 18px; } .rank { color: var(--mut); font-size: 12px; font-weight: 600; }
.card-name { color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); }
.tag.mood-euphoric { color: var(--up); border-color: rgba(61,220,132,.5) } .tag.mood-happy { color: var(--up) }
.tag.mood-anxious { color: var(--acc) } .tag.mood-sick, .tag.mood-dying { color: var(--dn); border-color: rgba(255,92,92,.5) }
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.cs { background: rgba(255,255,255,.04); border-radius: 10px; padding: 6px 8px; }
.cs .k { color: var(--mut); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .cs .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.up { color: var(--up) } .dn { color: var(--dn) }
.card-bars { display: grid; gap: 5px; margin-top: 10px; }
.bar { display: grid; grid-template-columns: 64px 1fr 36px; gap: 8px; align-items: center; font-size: 11px; color: var(--mut); }
.bar .tr { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; } .bar .fi { height: 100%; background: var(--acc); border-radius: 999px; }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.card-links { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.card-links a { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; background: rgba(255,255,255,.04); }
.epitaph { margin-top: 8px; font-size: 12px; color: var(--mut); font-style: italic; }

#toast { position: absolute; top: calc(56px + var(--sat)); left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 13px; backdrop-filter: blur(8px); }

#boot { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: var(--bg); transition: opacity .6s ease; z-index: 5; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { font-weight: 900; font-size: 28px; letter-spacing: .12em; } .boot-sub { color: var(--mut); margin-top: 6px; font-size: 13px; }

/* ---- game ---- */
.stat.pts { pointer-events: auto; margin-left: auto; cursor: pointer; color: var(--fg); font: inherit; border-color: rgba(255,209,102,.45); }
.stat.pts .k { color: var(--acc); font-size: 12px; } .stat.pts .nm { color: var(--mut); font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.mut { color: var(--mut); font-size: 12px; } .small { font-size: 11px; margin-top: 10px; }
.card-bets { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 6px; }
.bets-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.mkt { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; font-size: 12px; }
.mkt button, #wx button, #stake-row button, .p-name button { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.1); color: var(--fg); cursor: pointer; min-height: 32px; }
.mkt button b, #wx button b { color: var(--acc); }
.mkt button.grim { border-color: rgba(255,92,92,.5); background: rgba(255,92,92,.08); } .mkt button.grim b { color: var(--dn); }
.mkt button:disabled { opacity: .5; }
.mine { display: flex; gap: 4px; flex-wrap: wrap; } .mine span { font-size: 11px; color: var(--acc); border: 1px solid rgba(255,209,102,.35); border-radius: 999px; padding: 2px 8px; }
#panel { position: absolute; top: calc(52px + var(--sat)); right: 8px; left: 8px; bottom: calc(10px + var(--sab)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; backdrop-filter: blur(12px); overflow: auto; animation: evin .25s ease-out both; z-index: 3; }
@media (min-width: 720px) { #panel { left: auto; width: 380px; top: 56px; bottom: auto; max-height: calc(100vh - 80px); } }
#panel-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.p-title { font-weight: 800; letter-spacing: .04em; } .p-big { font-size: 14px; margin: 2px 0 4px; } .p-big b { color: var(--acc); font-variant-numeric: tabular-nums; }
.p-sec { margin-top: 12px; margin-bottom: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
#stake-row, #wx { display: flex; gap: 6px; flex-wrap: wrap; }
#stake-row button.on { background: var(--acc); color: #1a1500; border-color: var(--acc); font-weight: 800; }
.bet-row { font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.bet-row.won span { color: var(--up); font-weight: 700 } .bet-row.lost span { color: var(--dn); font-weight: 700 }
.lb-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lb-row.me { color: var(--acc); } .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-name { display: flex; gap: 6px; margin-top: 12px; } .p-name input { flex: 1; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); min-width: 0; }
#toast.win { border-color: rgba(61,220,132,.6) } #toast.loss { border-color: rgba(255,92,92,.6) }

/* ---- wallet mode ---- */
.stat.act { pointer-events: auto; cursor: pointer; color: var(--fg); font: inherit; font-weight: 700; text-decoration: none; border-color: rgba(255,255,255,.18); }
.stat.wal { display: none; } body.wallet .stat.wal { display: flex; }
body.wallet #pts, body.wallet #age, body.wallet #alive, body.wallet #buried { display: none; }
#bags { position: absolute; top: calc(52px + var(--sat)); left: 8px; right: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; backdrop-filter: blur(12px); animation: evin .25s ease-out both; z-index: 4; }
@media (min-width: 720px) { #bags { left: auto; width: 380px; right: 12px; } }
#bags.hidden { display: none; }
#bags-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.or { text-align: center; color: var(--mut); font-size: 11px; margin: 8px 0; }
button.wide { width: 100%; font: inherit; font-weight: 700; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.12); color: var(--fg); cursor: pointer; }

/* ---- social ---- */
.panel { position: absolute; top: calc(52px + var(--sat)); left: 8px; right: 8px; bottom: calc(10px + var(--sab)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; backdrop-filter: blur(12px); overflow: auto; animation: evin .25s ease-out both; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 720px) { .panel { left: auto; width: 400px; top: 56px; bottom: auto; max-height: calc(100vh - 80px); } }
.panel.hidden { display: none; }
.pclose { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.share-img { width: 100%; aspect-ratio: 1200 / 630; border-radius: 12px; background: #000; object-fit: cover; border: 1px solid var(--line); }
.share-url { font-size: 12px; word-break: break-all; color: var(--acc); }
.share-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sbtn { font: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.12); color: var(--fg); cursor: pointer; text-decoration: none; }
.wrow { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.wrow img { width: 96px; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 8px; background: #000; }
.wname { font-weight: 700; font-size: 13px; }
#wall-rx { display: flex; gap: 6px; flex-wrap: wrap; }
#wall-rx button { font: inherit; font-size: 14px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); cursor: pointer; }
#wall-rx button.on { border-color: var(--acc); background: rgba(255,209,102,.15); } #wall-rx .n { color: var(--mut); font-size: 12px; margin-left: 2px; }
#wall-posts { flex: 1; min-height: 160px; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.post { font-size: 13px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.04); }
.post.mine { background: rgba(255,209,102,.08); } .post .who { font-weight: 700; color: var(--acc); white-space: nowrap; } .post .txt { word-break: break-word; } .post .t { color: var(--mut); font-size: 11px; white-space: nowrap; }
.badge { background: var(--dn); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 6px; margin-left: 4px; }
#here .v { color: var(--up); }

/* ---- ownership + trades ---- */
#claim-btn { border-color: rgba(255,209,102,.6); background: rgba(255,209,102,.14); }
#owner-chip { color: var(--acc); font-weight: 700; }
.owner-line { font-size: 12px; } .owner-line a { color: var(--acc); }
.pinned { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.35); margin-top: 6px; }
.post.owner .who { color: #fff; } .post.owner { border-left: 2px solid var(--acc); }
.post .mod { display: flex; gap: 2px; } .post .mod button { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 12px; padding: 0 3px; } .post .mod button:hover { color: var(--dn); }
.trade { font-size: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px dashed var(--line); }
.trade.buy { border-color: rgba(61,220,132,.4) } .trade.sell { border-color: rgba(255,92,92,.4) } .trade .t { color: var(--mut); font-size: 11px; text-decoration: none; white-space: nowrap; }

/* ---- following ---- */
#follow-btn.on { border-color: var(--up); color: var(--up); } #follow-btn .fn { font-weight: 400; }
.frow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.frow .fname { font-weight: 700; font-size: 13px; } .frow .fsub { color: var(--mut); font-size: 12px; }
.frow .live { color: var(--up); font-weight: 700; font-size: 12px; white-space: nowrap; }
.frow .live.quiet { color: var(--mut); font-weight: 400; }
.frow .ftrade { font-size: 12px; color: var(--fg); margin-top: 2px; }

/* ---- top bar: search + connect ---- */
#search { display: flex; pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); overflow: hidden; min-width: 0; }
#search input { font: inherit; font-size: 12px; background: none; border: 0; color: var(--fg); padding: 6px 12px; width: 250px; min-width: 0; outline: none; }
#search input::placeholder { color: var(--mut); }
#search button { font: inherit; background: rgba(255,209,102,.14); border: 0; border-left: 1px solid var(--line); color: var(--acc); padding: 0 12px; cursor: pointer; font-weight: 800; }
#fly-btn { margin-left: auto; order: 98; } #connect-top { order: 99; border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.1); }
#connect-top.on { border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.08); }
@media (max-width: 719px) {
  #search { order: 1; flex: 1 1 100%; } #search input { width: 100%; }
  .brand { order: 0; } #connect-top { order: 0; margin-left: auto; }
  #top > .stat:not(#connect-top), #top > a.stat { order: 2; }
}

/* ---- chat dock (bottom left) ---- */
#dock { position: absolute; left: 8px; bottom: calc(10px + var(--sab)); width: 380px; max-width: calc(100vw - 16px); height: 44vh; max-height: 440px; min-height: 180px;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); overflow: hidden; z-index: 2; }
#dock.collapsed { height: auto; min-height: 0; }
#dock.collapsed #wall-owner, #dock.collapsed #wall-posts, #dock.collapsed #wall-form, #dock.collapsed #wall-rx { display: none; }
#dock.collapsed #dock-toggle { transform: rotate(180deg); }
.dock-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dock-title { font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.dock-here { font-size: 12px; color: var(--up); font-weight: 700; white-space: nowrap; }
.dock-unread { font-size: 11px; background: var(--dn); color: #fff; border-radius: 999px; padding: 1px 7px; }
#dock-toggle, #dock-gear { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 14px; padding: 2px 4px; transition: transform .2s; }
#dock-gear.on { color: var(--acc); }
#wall-rx { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
#wall-rx button { font-size: 12px; padding: 3px 7px; }
#wall-owner { padding: 6px 10px 0; font-size: 12px; } #wall-owner:empty { display: none; }
#wall-owner .tools { display: none; } #wall-owner.tools-open .tools { display: block; }
#wall-posts { flex: 1; min-height: 0; max-height: none; overflow: auto; padding: 8px 10px; gap: 4px; }
.post { padding: 4px 8px; } .post .t { display: none; }
.sys { font-size: 12px; color: var(--mut); padding: 2px 8px; } .sys b { color: var(--fg); } .sys .ok { color: var(--up) } .sys .bad { color: var(--dn) }
.trade { padding: 4px 8px; }
#wall-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
#wall-form input { flex: 1; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); min-width: 0; }
#wall-form button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.12); color: var(--fg); cursor: pointer; }
@media (max-width: 719px) {
  #dock { left: 8px; right: 8px; width: auto; height: 50vh; max-height: 50vh; }
  #card { bottom: calc(10px + var(--sab)); z-index: 3; }
}
/* ---- connect menu ---- */
#connect-menu { position: absolute; top: calc(48px + var(--sat)); right: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(12px); z-index: 6; min-width: 170px; }
#connect-menu.hidden { display: none; }
#connect-menu button { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; color: var(--fg); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
#connect-menu button:hover { background: rgba(255,255,255,.06); }
#connect-menu button[data-act="signout"] { color: var(--dn); }

.stat.isl { display: none; color: var(--mut); } body.island .stat.isl { display: flex; }

body.nogame #pts, body.nogame #panel, body.nogame #card-bets { display: none !important; }

/* ---- bags list ---- */
#wal-total .k:last-child { color: var(--acc); }
.brow { display: grid; grid-template-columns: 28px 32px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.brow:hover { background: rgba(255,255,255,.03); }
.brow .rk { color: var(--mut); font-size: 11px; font-variant-numeric: tabular-nums; }
.brow img, .brow .ico { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #000; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.brow .bs { font-weight: 700; font-size: 13px; } .brow .bn { color: var(--mut); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bv { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; } .brow .bp { color: var(--mut); font-size: 11px; text-align: right; }
.brow.off { opacity: .75; } .brow .tag { margin-left: 4px; }
.brow.dead .bs { color: var(--mut); text-decoration: line-through; }

/* ---- flying ---- */
#fly-btn.on { border-color: rgba(255,209,102,.7); background: rgba(255,209,102,.18); color: var(--acc); }
#flyhint { position: absolute; left: 50%; transform: translateX(-50%); top: calc(96px + var(--sat)); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--mut); backdrop-filter: blur(8px); pointer-events: none; }
#flyhint.hidden { display: none; }
@media (max-width: 719px) { #flyhint { top: calc(140px + var(--sat)); } }

#graves-btn.on { color: var(--fg); } #graves-btn:not(.on) { color: var(--mut); text-decoration: line-through; }

.ca { margin-top: 10px; width: 100%; display: flex; gap: 8px; align-items: center; font: inherit; font-size: 12px; padding: 7px 10px; border-radius: 10px; border: 1px dashed rgba(255,209,102,.45); background: rgba(255,209,102,.06); color: var(--fg); cursor: pointer; text-align: left; }
.ca .k { color: var(--mut); font-size: 10px; letter-spacing: .08em; } .ca .v { font-family: ui-monospace, Menlo, Consolas, monospace; flex: 1; } .ca .cp { color: var(--acc); font-weight: 700; }

/* ---- avatar menu ---- */
#avatar-menu { position: absolute; top: calc(48px + var(--sat)); right: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(12px); z-index: 6; min-width: 230px; }
#avatar-menu.hidden { display: none; }
#avatar-menu button { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; color: var(--fg); padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
#avatar-menu button:hover { background: rgba(255,255,255,.06); } #avatar-menu button.on { background: rgba(255,209,102,.12); } #avatar-menu button.locked { opacity: .55; }
#avatar-menu .small { padding: 4px 10px 2px; }

/* ---- room line (what is this place) ---- */
#roomline { flex: 1 1 100%; order: 100; display: flex; gap: 10px; align-items: baseline; pointer-events: none; padding: 2px 4px 0; }
#roomline .rl-what { font-weight: 800; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
#roomline .rl-sub { color: #dfe3ec; font-size: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 719px) { #roomline { flex-wrap: wrap; } }

/* ---- view menu ---- */
#view-menu { position: absolute; top: calc(48px + var(--sat)); left: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(12px); z-index: 6; min-width: 220px; }
#view-menu.hidden { display: none; }
#view-menu label { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
#view-menu label:hover { background: rgba(255,255,255,.06); } #view-menu input { accent-color: var(--acc); width: 16px; height: 16px; }

#rl-edit { pointer-events: auto; background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 13px; padding: 0 2px; } #rl-edit:hover { color: var(--acc); }
body.island #rl-edit { display: none; }

/* ---- card flow lines (replace the stat bars) ---- */
.flow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.flow .k { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); margin: 2px 0 6px; }
.split i { display: block; height: 100%; } .split .b { background: var(--up); } .split .s { background: var(--dn); } .split .q { background: rgba(255,255,255,.12); }

.addw { display: grid; grid-template-columns: 1fr 90px auto; gap: 6px; margin-bottom: 6px; }
.addw input { font: inherit; font-size: 12px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); min-width: 0; }
.addw button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.12); color: var(--fg); cursor: pointer; }
.ren { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 12px; padding: 0 2px; } .ren:hover { color: var(--acc); }

/* ---- wallet tabs ---- */
.wtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.wtabs button { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; }
.wtabs button.on { color: var(--fg); border-color: rgba(255,209,102,.6); background: rgba(255,209,102,.1); }
.prow { display: grid; grid-template-columns: 26px 34px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.prow .rk { color: var(--mut); font-size: 11px; } .prow img, .prow .ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #222; }
.prow .pn { font-weight: 700; font-size: 13px; } .prow .ps { color: var(--mut); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pp { font-weight: 800; font-size: 13px; color: var(--up); font-variant-numeric: tabular-nums; text-align: right; }
.prow .pf, .frow .star { font: inherit; background: none; border: 1px solid var(--line); color: var(--mut); border-radius: 999px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
.prow .pf.on { color: var(--up); border-color: rgba(61,220,132,.5); }
.frow .star { border: 0; padding: 0 4px; font-size: 14px; } .frow .star.on { color: var(--acc); }
.pseg { display: flex; gap: 4px; margin: 2px 0 6px; } .pseg button { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; } .pseg button.on { color: var(--fg); border-color: var(--acc); }

.prow .pf { white-space: nowrap; }

/* ---- weather explainer ---- */
#weather { position: relative; pointer-events: auto; cursor: help; }
#weather .wtip { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 320px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(12px); z-index: 7; white-space: normal; font-size: 12px; }
#weather:hover .wtip, #weather:focus .wtip, #weather.open .wtip { display: block; }
.wt-h { font-weight: 700; margin-bottom: 2px; } .wt-s { color: var(--mut); margin-bottom: 8px; }
.wt-r { display: grid; grid-template-columns: 92px 92px 1fr; gap: 6px; padding: 4px 6px; border-radius: 8px; }
.wt-r.on { background: rgba(255,209,102,.14); color: var(--acc); } .wt-r.on .mut { color: var(--fg); }

/* ---- search suggestions ---- */
#search { position: relative; overflow: visible; }
#suggest { position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; backdrop-filter: blur(12px); z-index: 8; }
#suggest.hidden { display: none; }
.sg { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.sg:hover, .sg.on { background: rgba(255,209,102,.12); }
.sg .av { width: 30px; height: 30px; border-radius: 50%; background: #2a2f3d; position: relative; overflow: hidden; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--mut); }
.sg .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg .ad { color: var(--mut); font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.sg .tg { color: var(--mut); font-size: 11px; white-space: nowrap; }
/* pump.fun list: no clipping, avatars that fail fall back to a letter */
.prow { grid-template-columns: 24px 34px minmax(0, 1fr) auto auto; }
.prow .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .ph { position: relative; overflow: hidden; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--mut); background: #2a2f3d; }
.prow .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#wallets { overflow-x: hidden; }

/* the search box and weather pill create their own layers (backdrop-filter); lift them so their popovers sit above the other pills */
#search:focus-within { z-index: 9; }
#weather:hover, #weather:focus, #weather.open { z-index: 9; }

/* ================= phones (body.narrow, set by main.js under 720px) ================= */
#more-btn, .brk { display: none; }
#more-sheet.hidden, #joy.hidden, #lift.hidden { display: none; }
body.narrow #top { gap: 6px; row-gap: 6px; }
body.narrow #top > .brand { order: 1; }
body.narrow #top > #search { order: 2; flex: 1 1 0; min-width: 0; }
body.narrow #search input { width: 100%; }
body.narrow #top > #connect-top { order: 3; margin-left: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.narrow #top > .brk { display: block; order: 4; flex-basis: 100%; height: 0; }
body.narrow #top > #wallets-btn { order: 5; }
body.narrow #top > #wal-total { order: 6; }
body.narrow #top > #more-btn { display: flex; order: 7; margin-left: auto; font-size: 16px; line-height: 1; padding: 6px 14px; }
body.narrow #top > #roomline { order: 100; flex-wrap: nowrap; overflow: hidden; }
body.narrow #roomline .rl-what { font-size: 14px; white-space: nowrap; }
body.narrow #roomline .rl-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#more-sheet { position: absolute; top: calc(var(--barh, 96px) + 4px); left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(12px); z-index: 6; }
#more-sheet .stat { pointer-events: auto; }

body.narrow .panel, body.narrow #panel, body.narrow #bags { top: calc(var(--barh, 96px) + 6px); bottom: calc(64px + var(--sab)); left: 6px; right: 6px; width: auto; max-height: none; }
body.narrow #view-menu, body.narrow #avatar-menu, body.narrow #connect-menu { top: calc(var(--barh, 96px) + 6px); left: 8px; right: 8px; min-width: 0; }
/* #suggest and #weather .wtip are placed from JS on phones (backdrop-filter parents break position:fixed) */
body.narrow #toast { top: calc(var(--barh, 96px) + 8px); max-width: calc(100vw - 24px); white-space: normal; text-align: center; }
body.narrow #flyhint { top: calc(var(--barh, 96px) + 8px); max-width: calc(100vw - 24px); white-space: normal; text-align: center; }
body.narrow #dock { left: 6px; right: 6px; width: auto; bottom: calc(6px + var(--sab)); height: 50vh; max-height: 50vh; z-index: 3; }
body.narrow #dock.collapsed { height: auto; }
body.narrow #card { left: 6px; right: 6px; bottom: calc(62px + var(--sab)); max-height: 56vh; z-index: 4; }
/* touch movement */
#joy { position: absolute; right: 18px; bottom: calc(76px + var(--sab)); width: 116px; height: 116px; border-radius: 50%; background: rgba(12,14,20,.35); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); touch-action: none; pointer-events: auto; z-index: 2; }
#joy .knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,209,102,.55); border: 1px solid rgba(255,209,102,.9); box-shadow: 0 0 16px rgba(255,209,102,.35); }
#lift { position: absolute; right: 146px; bottom: calc(80px + var(--sab)); display: flex; flex-direction: column; gap: 8px; pointer-events: auto; z-index: 2; }
#lift button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(12,14,20,.45); color: var(--fg); font-size: 16px; touch-action: none; backdrop-filter: blur(6px); }
#lift button.on { background: rgba(255,209,102,.35); }