: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: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #cfd5e3; cursor: pointer; }
#wall-rx button.on { border-color: #9fc8ff; background: #1d3d6b; color: #fff; font-weight: 700; } #wall-rx button.zero:not(.on) { opacity: .5; } #wall-rx .n { color: var(--mut); font-size: 11px; margin-left: 4px; } #wall-rx .n:empty { display: none; } #wall-rx button.on .n { color: #cfe1ff; }
#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 9px; }
#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); }

/* menu header with a close button */
.mhead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.mclose { background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 2px 8px; cursor: pointer; min-width: 36px; min-height: 32px; }
.mclose:hover { color: var(--fg); }
#avatar-menu .mclose, #connect-menu .mclose { display: block; padding: 2px 8px; color: var(--mut); font-size: 22px; line-height: 1; border-radius: 6px; }

/* chains: switch between the trending isles, or a chip naming a wallet's chain */
#rl-chain { pointer-events: auto; display: inline-flex; gap: 2px; align-self: center; background: rgba(10,12,18,.55); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
#rl-chain:empty { display: none; }
#rl-chain a, #rl-chain span { font-size: 11px; font-weight: 700; color: var(--mut); text-decoration: none; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
#rl-chain a:hover { color: var(--fg); }
#rl-chain .on { color: #0b0d12; background: var(--acc); }
#rl-chain .chip-rh { color: #0b0d12; background: #c5f04a; }
#rl-chain .chip-sol { color: #fff; background: linear-gradient(90deg, #9945ff, #14f195); }
#connect-menu button.pick { display: flex; flex-direction: column; gap: 1px; }
#connect-menu button.pick .mut { font-size: 11px; }

/* one trader, several wallets: the 🔗 menu */
#rl-link { pointer-events: auto; background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 13px; padding: 0 2px; } #rl-link:hover, #rl-link.on { color: var(--acc); }
#link-menu { position: absolute; top: calc(var(--barh, 96px) + 6px); left: 8px; width: 360px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; backdrop-filter: blur(12px); z-index: 7; display: flex; flex-direction: column; gap: 6px; }
#link-menu.hidden { display: none; }
#link-menu .lm-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
#link-menu .lm-row a { color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; } #link-menu .lm-row a:hover { color: var(--acc); }
#link-menu .lm-by { font-size: 11px; color: var(--mut); grid-column: 2 / 4; margin-top: -4px; }
#link-menu .lm-rm { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 14px; } #link-menu .lm-rm:hover { color: var(--dn); }
#link-menu h4 { margin: 6px 4px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 700; }
#link-menu .lm-note { font-size: 12px; color: var(--mut); margin: 0 4px; line-height: 1.4; }
#link-menu form { display: flex; gap: 6px; }
#link-menu input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); }
#link-menu button.lm-go { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.12); color: var(--fg); cursor: pointer; }
#link-menu .lm-own { display: flex; gap: 6px; } #link-menu .lm-own button { flex: 1; }
.ch { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; vertical-align: 1px; }
.ch-robinhood { color: #0b0d12; background: #c5f04a; } .ch-solana { color: #fff; background: linear-gradient(90deg, #9945ff, #14f195); }
#wall-posts .trade .tw { font-size: 11px; color: var(--mut); margin-right: 4px; }

/* mutuals: neighbour isles list */
#rl-mutuals { pointer-events: auto; font: inherit; font-size: 11px; font-weight: 700; color: #ffd166; background: rgba(10,12,18,.55); border: 1px solid rgba(255,209,102,.4); border-radius: 999px; padding: 2px 9px; cursor: pointer; align-self: center; white-space: nowrap; }
#rl-mutuals.hidden { display: none; } #rl-mutuals:hover { background: rgba(255,209,102,.15); }
#mutuals-menu { position: absolute; top: calc(var(--barh, 96px) + 6px); left: 8px; width: 360px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; backdrop-filter: blur(12px); z-index: 7; display: flex; flex-direction: column; gap: 6px; }
#mutuals-menu.hidden { display: none; }
#mutuals-menu .mm-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; color: var(--fg); text-decoration: none; }
#mutuals-menu .mm-row:hover { background: rgba(255,209,102,.1); }
#mutuals-menu .mm-av { width: 34px; height: 34px; border-radius: 50%; background: #2a3040; overflow: hidden; display: grid; place-items: center; font-weight: 800; }
#mutuals-menu .mm-av img { width: 100%; height: 100%; object-fit: cover; }
#mutuals-menu .mm-n { font-weight: 700; font-size: 13px; } #mutuals-menu .mm-c { font-size: 11px; color: var(--mut); }
#mutuals-menu .mm-s { font-size: 11px; color: #ffd166; font-weight: 700; text-align: right; }
#mutuals-menu .mm-note { font-size: 12px; color: var(--mut); margin: 2px 4px; line-height: 1.4; }
#mutuals-menu .mm-av { position: relative; } #mutuals-menu .mm-av img { position: absolute; inset: 0; }

/* sound toggle */
#sound-btn { min-width: 34px; }
#sound-btn.on { color: var(--acc); border-color: rgba(255,209,102,.5); }
/* first-visit intro: the mascot explains three things */
#intro { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .3s; }
#intro.in { opacity: 1; } #intro.out { opacity: 0; }
#intro .in-ring { position: fixed; border-radius: 14px; box-shadow: 0 0 0 3px #ffd166, 0 0 0 9999px rgba(5,7,12,.45), 0 0 26px 6px rgba(255,209,102,.7); opacity: 0; transition: all .35s ease; animation: inPulse 1.4s ease-in-out infinite; }
#intro .in-ring.on { opacity: 1; }
@keyframes inPulse { 50% { box-shadow: 0 0 0 5px #ffd166, 0 0 0 9999px rgba(5,7,12,.45), 0 0 40px 10px rgba(255,209,102,.85); } }
#intro .in-card { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; width: min(520px, calc(100vw - 24px)); pointer-events: auto; }
#intro .in-card.pop { animation: inPop .35s ease; }
@keyframes inPop { from { transform: translate(-50%, 10px) scale(.96); opacity: .4; } }
#intro .in-mascot { width: 88px; height: 88px; border-radius: 50%; flex: none; box-shadow: 0 6px 24px rgba(255,190,80,.55); animation: inBob 2.4s ease-in-out infinite; }
@keyframes inBob { 50% { transform: translateY(-5px); } }
#intro .in-bubble { flex: 1; background: #fffdf6; color: #1a1406; border-radius: 18px 18px 18px 6px; padding: 14px 16px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; }
#intro .in-text { font-size: 15px; font-weight: 600; line-height: 1.4; }
#intro .in-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#intro .in-dots { flex: 1; display: flex; gap: 5px; } #intro .in-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e3d6b0; } #intro .in-dots i.on { background: #e0a020; }
#intro button { font: inherit; font-size: 12px; font-weight: 700; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
#intro .in-skip { background: none; color: #9a8a60; } #intro .in-next { background: #1a1406; color: #ffd166; }
@media (max-width: 719px) { #intro .in-card { bottom: 64px; } #intro .in-mascot { width: 64px; height: 64px; } #intro .in-text { font-size: 14px; } }

/* profit and loss line on a bag's card */
#card .pnl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; font-size: 13px; }
#card .pnl.up { background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.35); } #card .pnl.dn { background: rgba(255,77,94,.12); border: 1px solid rgba(255,77,94,.35); }
#card .pnl b { font-size: 17px; } #card .pnl.up b { color: #3ddc84; } #card .pnl.dn b { color: #ff6b78; }
#card .pnl .k { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } #card .pnl .mut { margin-left: auto; font-size: 11px; }

/* holder perks */
#avatar-menu .av-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding: 8px 10px 2px; }
#avatar-menu button.holder.lock { opacity: .55; } #avatar-menu button.holder.lock::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd166' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center / contain no-repeat; }
#wall-posts .hb { display: inline-block; font-size: 10px; margin-right: 3px; vertical-align: 1px; }
#wall-posts .post.t1 .who { color: #8fe3ff; } #wall-posts .post.t2 .who { color: #ffd166; text-shadow: 0 0 8px rgba(255,209,102,.5); }
#wall-owner .themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#wall-owner .themes button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--fg); cursor: pointer; }
#wall-owner .themes button.on { border-color: #ffd166; background: rgba(255,209,102,.15); } #wall-owner .themes button.lock { opacity: .5; }
#wall-owner .feat { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(197,140,255,.1); border: 1px solid rgba(197,140,255,.3); font-size: 12px; }
#wall-owner .feat form { display: flex; gap: 6px; margin-top: 6px; } #wall-owner .feat input { flex: 1; min-width: 0; }
#wall-owner .tl { font-size: 11px; color: var(--mut); margin-top: 10px; text-transform: uppercase; letter-spacing: .08em; }

/* burn levels */
#rl-chain .lvl { color: #1a0f00; background: linear-gradient(90deg, #ffb347, #ff6b3d); }
#wall-owner .lvlbox { padding: 8px 10px; border-radius: 10px; background: rgba(255,140,60,.08); border: 1px solid rgba(255,140,60,.3); margin-top: 6px; }
#wall-owner .lvlrow { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; font-size: 12px; }
#wall-owner .lvlbar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 6px 0; overflow: hidden; } #wall-owner .lvlbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb347, #ff6b3d); }
#wall-owner .lvlnext { font-size: 11px; }

/* recent isles in the search box */
#suggest .sghead { color: var(--mut); font-size: 11px; padding: 4px 8px 2px; order: -1; }
#suggest { display: flex; flex-direction: column; } #suggest.hidden { display: none; }
#suggest .sghead button { background: none; border: 0; color: var(--mut); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
#suggest .sgx { background: none; border: 0; color: var(--mut); font-size: 16px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; }
#suggest .sgx:hover { background: rgba(255,255,255,.1); color: var(--fg, #fff); }

/* boot screen error (no WebGL, script failed) */
#boot-sub.boot-err { max-width: min(440px, calc(100vw - 32px)); margin: 0 auto; line-height: 1.5; color: var(--fg, #eef0f5); }
#boot-sub.boot-err a { color: #ffd166; }

/* ?clean=1: only the 3D isle (promo captures) */
body.clean > :not(#gl):not(script) { display: none !important; }

/* coin names in trade lines: tap to copy the contract address */
#wall-posts .trade .tok { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: #ffd166; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,209,102,.45); text-underline-offset: 2px; }
#wall-posts .trade .tok:hover { color: #ffe39a; text-decoration-color: currentColor; }

/* a coin card and a side panel (bags, coins, wallets…) open together: the card sits beside the panel, not under it */
@media (min-width: 820px) { body:not(.narrow):has(.panel:not(.hidden)) #card { right: 420px; } }

/* the dead count lives at the bottom of the bags list; the top-bar stat is hidden */
#wal-dead { display: none !important; }
#auto-btn.on { color: #1a1204; background: linear-gradient(100deg, #ffd166 0%, #ffd166 38%, #fff4cf 50%, #ffd166 62%, #ffd166 100%); background-size: 260% 100%; animation: apSweep 2.2s linear infinite; box-shadow: 0 0 0 0 rgba(255,209,102,.55); }
#auto-btn.on::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255,209,102,.7); animation: apPulse 2.2s ease-out infinite; pointer-events: none; }
#auto-btn { position: relative; }
#auto-btn .ap-spin { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; border: 2px solid rgba(26,18,4,.25); border-top-color: #1a1204; animation: apSpin .9s linear infinite; vertical-align: -1px; }
@keyframes apSweep { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@media (prefers-reduced-motion: reduce) { #auto-btn.on, #auto-btn.on::after, #auto-btn .ap-spin { animation: none; } }

#view-menu .msub { margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
#view-menu input:disabled + * , #view-menu label:has(input:disabled) { opacity: .5; }

/* tinted top-bar buttons keep a dark base under the tint, so they stay readable over a bright sky */
#claim-btn { background: linear-gradient(rgba(255,209,102,.16), rgba(255,209,102,.16)), rgba(12,14,20,.86); color: #ffe7a8; }
#connect-top { background: linear-gradient(rgba(255,209,102,.12), rgba(255,209,102,.12)), rgba(12,14,20,.86); }
#connect-top.on { background: linear-gradient(rgba(61,220,132,.12), rgba(61,220,132,.12)), rgba(12,14,20,.86); }
#fly-btn.on { background: linear-gradient(rgba(255,209,102,.18), rgba(255,209,102,.18)), rgba(12,14,20,.86); }
#top .stat { text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* trending isles: 'top 20' is the point of the isle, so no alive/buried counts; 'coins' opens the list */
#buried { display: none !important; }

/* sound lives in the ⚙ menu now; the bar button stays in the DOM (renderSound updates it) but is hidden */
#sound-btn { display: none !important; }

/* weather is the icon on the bags / coins button now */
#weather { display: none !important; }
.stat .wx { font-size: 13px; margin-right: 2px; cursor: help; }

/* ⚙ sits with the avatar button on the right; follow without a count has no trailing gap */
body:not(.narrow) #view-btn { order: 97; margin-left: auto; }
body:not(.narrow) #fly-btn { margin-left: 0; }
#follow-btn .fn:empty { display: none; }

/* popular wallets: face + name rows */
.wrow2 { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.wrow2:hover { background: rgba(255,255,255,.05); }
.wrow2 .wav { width: 42px; height: 42px; border-radius: 50%; background: #2a2f3d; position: relative; overflow: hidden; display: grid; place-items: center; font-weight: 800; color: var(--mut); }
.wrow2 .wav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wrow2 .wname { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow2 .mut { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow2 .wviews { color: var(--mut); font-size: 12px; white-space: nowrap; }

/* ◆ $ISLES panel */
#isles-btn { color: #ffd166; border-color: rgba(255,209,102,.45); }
#islesp .ist { padding: 8px 10px; border-radius: 10px; background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.25); font-size: 13px; }
#islesp .irow { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; padding: 6px 0; font-size: 13px; }
#islesp .irow .ib { font-size: 18px; line-height: 1.2; text-align: center; }
#islesp .irow .mut { font-size: 12px; line-height: 1.45; margin-top: 2px; }
#islesp .lvchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#islesp .lvchip { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,140,60,.12); border: 1px solid rgba(255,140,60,.3); color: #ffc79a; }
#islesp .iacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#islesp .ca { background: none; border: 0; color: #ffd166; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* the tick age was a debug number; hidden */
#age { display: none !important; }

/* avatar showcase overlay */
#avatars-ov { position: fixed; inset: 0; z-index: 30; background: rgba(4,8,22,.55); display: grid; place-items: center; padding: 16px; }
#avatars-ov.hidden { display: none; }
#avatars-ov .ov-box { width: min(1100px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; backdrop-filter: blur(12px); }
#avatars-ov .mhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13px; color: var(--mut); }
#avatars-ov iframe { display: block; width: 100%; height: min(460px, 60vh); border: 0; background: #8ec5ff; }

/* the $ISLES token icon (an island in a gold coin) */
.tok-ic { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-right: 5px; align-self: center; }
.tok-ic.big { width: 26px; height: 26px; vertical-align: -7px; margin-right: 8px; }
#isles-btn { align-items: center; }

/* $ISLES sits in the right-hand group, just before the wallet button: ⚙ · avatar · $ISLES · wallet */
body:not(.narrow) #view-btn { order: 96; }
body:not(.narrow) #fly-btn { order: 97; }
body:not(.narrow) #isles-btn { order: 98; }
#isles-btn .bal { color: var(--fg, #eef0f5); font-weight: 800; margin-right: 4px; }
#isles-btn .bal:empty { display: none; }

/* 👀 watchers + mutuals (people) */
#rl-watch { pointer-events: auto; font: inherit; font-size: 11px; font-weight: 700; color: #cfe3ff; background: rgba(10,12,18,.55); border: 1px solid rgba(159,200,255,.4); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
#rl-watch.hidden { display: none; } #rl-watch:hover { background: rgba(159,200,255,.15); } #rl-watch .wmut { color: #ffd166; }
#watch-menu { position: absolute; top: calc(var(--barh, 96px) + 6px); left: 8px; width: 340px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; backdrop-filter: blur(12px); z-index: 7; display: flex; flex-direction: column; gap: 6px; }
#watch-menu.hidden { display: none; }
.wm-row, .mp-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.mp-row { grid-template-columns: 30px 1fr; }
.wm-row.you { background: rgba(255,209,102,.08); }
.wm-av { width: 30px; height: 30px; border-radius: 50%; background: #2a3040; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--mut); }
.wm-n { font-weight: 700; font-size: 13px; } .wm-row .mut, .mp-row .mut { font-size: 11px; }
.wm-tag { font-size: 10px; font-weight: 800; color: #1a1204; background: #ffd166; border-radius: 999px; padding: 2px 7px; }
.mp-row a { color: #ffd166; text-decoration: none; } .mp-row a:hover { text-decoration: underline; }
#mutuals-people { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* you + friends */
#connect-menu .you-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 8px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#connect-menu .you-row .wm-av { width: 34px; height: 34px; color: #ffd166; }
#you-edit { background: none; border: 0; color: var(--mut); cursor: pointer; font: inherit; padding: 0 4px; } #you-edit:hover { color: #ffd166; }
.fr-btn { font: inherit; font-size: 11px; font-weight: 700; color: #ffd166; background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.4); border-radius: 999px; padding: 2px 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fr-btn.on { color: var(--mut); background: none; border-color: var(--line); }
.fr-btn.go { color: #1a1204; background: #ffd166; border-color: #ffd166; }
.wm-acts { display: flex; gap: 6px; align-items: center; }
.fr-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); margin-bottom: 6px; }
.fr-row .mut { font-size: 11px; } .fr-row a { color: #ffd166; text-decoration: none; }
.wm-av { position: relative; } .wm-av .dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; border: 2px solid #121620; }

/* socials next to the $ISLES title (the token's pump.fun + chart links appear once it is live) */
#islesp .p-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#islesp .isl-links { margin-left: auto; margin-right: 26px; display: flex; gap: 6px; }
#islesp .isl-links a { font-size: 11px; font-weight: 700; color: #ffd166; text-decoration: none; border: 1px solid rgba(255,209,102,.4); border-radius: 999px; padding: 3px 9px; background: rgba(255,209,102,.08); }
#islesp .isl-links a:hover { background: rgba(255,209,102,.18); }

/* person card */
#person-pop { position: fixed; z-index: 40; width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#person-pop.hidden { display: none; }
#person-pop .pp-top { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; }
#person-pop .pp-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; }
#person-pop .pp-row .wm-av { width: 26px; height: 26px; font-size: 11px; }
#person-pop > .fr-btn { align-self: flex-start; font-size: 12px; padding: 4px 12px; }
#wall-posts .who.person { cursor: pointer; text-decoration: underline dotted rgba(255,209,102,.5); text-underline-offset: 3px; }
#dock-here { cursor: pointer; } #dock-here:hover { text-decoration: underline; }

/* line icons (icons.js) replace emoji in the interface */
.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 5px; }
.stat .ic, button .ic { color: currentColor; }
#view-btn .ic, #sound-btn .ic, #rl-link .ic, #dock-gear .ic, #you-edit .ic, .mod .ic { margin-right: 0; }
#rl-mutuals .ic, #rl-watch .ic { width: 12px; height: 12px; margin-right: 4px; }
.wx .ic { width: 15px; height: 15px; margin-right: 0; vertical-align: -3px; }
#islesp .irow .ib .ic { width: 18px; height: 18px; margin: 2px 0 0; color: #ffd166; }
.wtabs .ic { width: 13px; height: 13px; margin-right: 4px; opacity: .85; }
.wviews .ic { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
#avatar-menu .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); margin-right: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); vertical-align: 0; }
#avatar-menu .ic { margin-right: 6px; }
/* trade dots: colour, not emoji */
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ffd166; vertical-align: 1px; }
.tdot.buy { background: #3ddc84; } .tdot.sell { background: #ff5c5c; }

/* avatar picker: a grid of picture cards */
#avatar-menu { width: 380px; max-width: calc(100vw - 16px); }
#avatar-menu .av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px 2px 6px; }
#avatar-menu button.avc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; color: var(--fg, #eef0f5); font: inherit; text-align: center; position: relative; width: auto; }
#avatar-menu button.avc:hover { border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.06); }
#avatar-menu button.avc.on { border-color: #ffd166; box-shadow: 0 0 0 1px #ffd166 inset; background: rgba(255,209,102,.1); }
#avatar-menu button.avc img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; display: block; margin-bottom: 4px; }
#avatar-menu .avn { font-weight: 800; font-size: 12.5px; } #avatar-menu .avs { font-size: 11px; color: var(--mut); }
#avatar-menu button.avc.lock img { filter: grayscale(.7) brightness(.6); }
#avatar-menu button.avc.holder.lock::after { position: absolute; top: 10px; right: 10px; margin: 0; width: 14px; height: 14px; }
#avatar-menu .av-h { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .08em; margin: 6px 2px 6px; }
#avatar-menu button.av-orbit { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-start; padding: 8px 10px; border-radius: 10px; background: none; border: 1px solid var(--line); color: var(--fg, #eef0f5); font: inherit; cursor: pointer; margin-top: 2px; }
#avatar-menu button.av-orbit .mut { margin-left: auto; font-size: 11px; }
#avatar-menu button.av-orbit.on { border-color: #ffd166; }
#avatar-menu button.avc.holder.lock { opacity: .85; }
#avatar-menu button.avc.lock img { filter: grayscale(.45) brightness(.8); }

/* the watchlist archipelago */
body.watch #rl-chain a { font-size: 11px; }
#card .whobox { padding: 8px 10px; border-radius: 10px; background: rgba(159,200,255,.07); border: 1px solid rgba(159,200,255,.25); margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
#card .whobox .wb-h { font-size: 12px; color: var(--mut); } #card .whobox .wb-h b { color: #ffd166; }
#card .whobox .wb-row { font-size: 12.5px; color: var(--fg, #eef0f5); text-decoration: none; display: flex; align-items: center; gap: 6px; }
#card .whobox .wb-row:hover { color: #ffd166; } #card .whobox .wb-row .mut { margin-left: auto; font-size: 11px; }
#watch-btn { text-decoration: none; }

/* watchlists: the switcher, the importer, '+ list', the badge, smart money */
#lists-bar, #smart-bar { flex: 1 1 100%; order: 101; display: flex; gap: 6px; align-items: center; pointer-events: auto; padding: 2px 4px 0; overflow-x: auto; scrollbar-width: none; }
#lists-bar::-webkit-scrollbar { display: none; }
#lists-bar.hidden, #smart-bar.hidden, #list-menu.hidden, #import-ov.hidden, #ledit-ov.hidden { display: none; }
.lchip { flex: none; font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(12,14,20,.82); color: var(--fg); text-decoration: none; cursor: pointer; white-space: nowrap; backdrop-filter: blur(8px); }
.lchip:hover { border-color: rgba(159,200,255,.45); }
.lchip.on { background: #1d3d6b; border-color: #9fc8ff; color: #fff; font-weight: 800; box-shadow: 0 0 0 2px rgba(159,200,255,.25); }
.lchip.on .n { color: #cfe1ff; }
.lchip .n { color: var(--mut); font-size: 11px; font-weight: 400; margin-left: 2px; }
.lchip.add { color: #cfd5e3; border-style: dashed; border-color: rgba(255,255,255,.3); }
.lchip.add:hover { color: #fff; }
.lacts { display: flex; gap: 2px; margin-left: 4px; flex: none; background: rgba(12,14,20,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 1px 6px; }
.lacts button { font: inherit; font-size: 12px; background: none; border: 0; color: #cfd5e3; cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lacts button:hover { color: var(--fg); } .lacts .ic { width: 13px; height: 13px; }
#smart-bar { order: 102; overflow: visible; }
#smart-bar { width: fit-content; flex: 0 1 auto; max-width: 100%; font-size: 12.5px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(12,14,20,.88); color: #eef0f5; border: 1px solid rgba(255,209,102,.7); box-shadow: 0 4px 18px rgba(0,0,0,.25); backdrop-filter: blur(8px); gap: 8px; margin: 4px 4px 0; }
#smart-bar .ic { width: 15px; height: 15px; color: var(--acc); flex: none; } #smart-bar b { color: var(--acc); }
#smart-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#smart-bar .sb-view { font: inherit; font-size: 12px; font-weight: 800; background: var(--acc); color: #1a1500; border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer; flex: none; }
#smart-bar .sb-x { font: inherit; background: none; border: 0; color: var(--mut); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 6px; flex: none; }
#toast { pointer-events: auto; } #toast a.ta { color: var(--acc); font-weight: 800; text-decoration: none; }
#list-menu { position: absolute; top: calc(var(--barh, 96px) + 6px); right: 8px; width: 280px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; backdrop-filter: blur(12px); z-index: 7; display: flex; flex-direction: column; gap: 4px; }
.lm-row { font: inherit; font-size: 13px; display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 0; background: rgba(255,255,255,.03); color: var(--fg); cursor: pointer; }
.lm-row:hover { background: rgba(255,255,255,.07); } .lm-row .mut { margin-left: auto; font-size: 11px; }
.lm-row .ck { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 11px; color: #1a1500; flex: none; }
.lm-row.on .ck { background: var(--acc); border-color: var(--acc); }
.lm-row.new { color: var(--mut); background: none; border: 1px dashed var(--line); }
.lm-link { font-size: 12px; color: var(--mut); padding: 4px 10px; text-decoration: none; } .lm-link:hover { color: var(--fg); }
#import-ov, #ledit-ov { position: fixed; inset: 0; z-index: 45; background: rgba(5,6,10,.55); display: grid; place-items: center; padding: 16px; }
.imp-card { width: 460px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.imp-card .mhead { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
#imp-text { font: 12px/1.4 ui-monospace, Consolas, monospace; height: 170px; resize: vertical; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
#imp-found b { color: var(--fg); }
.imp-peek { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .imp-peek span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(159,200,255,.1); color: #cfe1ff; }
.imp-row { display: flex; gap: 6px; } .imp-row select, .imp-row input { font: inherit; font-size: 13px; flex: 1; min-width: 0; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.imp-go { font: inherit; font-weight: 800; background: var(--acc); color: #1a1500; border: 0; border-radius: 10px; padding: 10px; cursor: pointer; } .imp-go:disabled { opacity: .4; cursor: default; }
.fl-acts { display: flex; gap: 12px; align-items: center; margin: 2px 0 8px; font-size: 12.5px; }
.fl-acts a, .fl-acts button { font: inherit; color: #9fc8ff; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.fl-acts a:hover, .fl-acts button:hover { color: var(--fg); } .fl-acts .ic { width: 14px; height: 14px; }
body:not(.watch) #lists-bar { display: none; }

.le-add { display: flex; gap: 6px; } .le-add input { font: inherit; font-size: 13px; min-width: 0; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.le-add .le-a { flex: 2; } .le-add .le-n { flex: 1; }
.le-add button { font: inherit; font-weight: 800; background: var(--acc); color: #1a1500; border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer; }
.le-list { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.le-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 13px; }
.le-row a { color: var(--fg); text-decoration: none; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .le-row a:hover { color: var(--acc); }
.le-row .mut { font-size: 11px; margin-left: auto; flex: none; }
.le-row button { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; display: inline-flex; } .le-row button:hover { color: var(--fg); }
.le-row button .ic { width: 13px; height: 13px; }

/* list rooms, the badge menu, the watchlist sort */
.lstat { flex: none; font-size: 12px; color: #dfe3ec; background: rgba(12,14,20,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lstat:empty { display: none; } .lstat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); display: inline-block; }
.convm { position: fixed; z-index: 30; width: 290px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.convm.hidden { display: none; } .convm .mhead { font-size: 12px; color: var(--mut); padding: 2px 4px 4px; }
.cv-row { font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255,209,102,.06); border: 1px solid rgba(255,209,102,.18); color: var(--fg); text-decoration: none; font-size: 13px; }
.cv-row:hover { border-color: rgba(255,209,102,.5); } .cv-row b { color: var(--acc); } .cv-row .mut { grid-column: 1 / -1; font-size: 11px; }
.wsort { display: flex; gap: 4px; margin: 4px 0 6px; } .wsort button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; }
.wsort button.on { background: rgba(159,200,255,.16); border-color: rgba(159,200,255,.6); color: var(--fg); font-weight: 700; }
.brow .bwhy { font-size: 11px; color: #9fc8ff; } .brow .bwhy b { color: var(--acc); }
.brow.conv { box-shadow: inset 3px 0 0 var(--acc); padding-left: 6px; }
#wall-posts .trade a.tw { font-size: 12px; color: #9fc8ff; font-weight: 700; margin-right: 4px; text-decoration: none; } #wall-posts .trade a.tw:hover { color: var(--fg); }
.sys .tok { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 800; text-decoration: underline dotted; } .tok.conv { color: var(--acc); }
.lchip.convc { background: rgba(60,45,5,.88); border-color: var(--acc); color: var(--acc); font-weight: 800; }

/* chat filters: one kind of line at a time */
#wall-posts[data-f="chat"] > :not(.post), #wall-posts[data-f="trades"] > :not(.trade), #wall-posts[data-f="alerts"] > :not(.sys) { display: none; }
#wall-posts[data-f] > #wall-empty { display: block; }

.lvchip i { font-style: normal; color: var(--acc); font-weight: 700; margin-left: 3px; }
.lvchip.max { border-color: var(--acc); background: rgba(255,209,102,.12); }
.lvtop { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #dfe3ec; display: block; } .lvtop .ic { width: 14px; height: 14px; color: var(--acc); vertical-align: -2px; margin-right: 4px; } .lvtop b { color: var(--acc); }

/* the treasury and this week's prizes ($ISLES panel) */
.tsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 6px; }
.tsplit > div { border-radius: 10px; padding: 8px 10px; font-size: 12.5px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tsplit > div:first-child { border-color: rgba(255,120,60,.45); } .tsplit > div:first-child b { color: #ff9a5c; }
.tsplit > div:last-child { border-color: rgba(159,200,255,.45); } .tsplit > div:last-child b { color: #9fc8ff; }
.tline { font-size: 12px; line-height: 1.45; } .tline a { color: var(--acc); }
.prz { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 12.5px; margin-bottom: 3px; }
.prz .pk { color: #cfd5e3; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .prz .pk .ic { width: 13px; height: 13px; color: var(--acc); }
.prz a { color: var(--fg); font-weight: 700; text-decoration: none; } .prz a:hover { color: var(--acc); } .prz .mut { font-size: 11px; }
.p-sec .mut { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

/* $ISLES panel, tidied: status line, three tabs, one topic at a time */
#islesp .ist { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
#islesp .ist .mut { font-size: 11px; white-space: nowrap; }
#islesp .itabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0 8px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
#islesp .itabs button { font: inherit; font-size: 12.5px; padding: 6px 0; border: 0; border-radius: 8px; background: none; color: var(--mut); cursor: pointer; }
#islesp .itabs button.on { background: rgba(255,209,102,.16); color: var(--acc); font-weight: 800; }
#islesp .ibody { display: flex; flex-direction: column; gap: 8px; }
#islesp .icard { padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
#islesp .ich { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
#islesp .ich .ib { width: 18px; text-align: center; font-size: 15px; line-height: 1; } #islesp .ich .ib .ic { width: 16px; height: 16px; color: var(--acc); }
#islesp .ich .need { margin-left: auto; font-size: 11px; color: var(--mut); }
#islesp .itags { display: flex; flex-wrap: wrap; gap: 4px; }
#islesp .itag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #cfd5e3; }
#islesp .lvtab { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
#islesp .lvr { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 10px; font-size: 12.5px; }
#islesp .lvr:nth-child(odd) { background: rgba(255,255,255,.025); }
#islesp .lvn { color: var(--mut); font-size: 11px; } #islesp .lva { color: #ffc79a; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
#islesp .lvr.max { background: rgba(255,209,102,.12); } #islesp .lvr.max .lvp, #islesp .lvr.max .lva { color: var(--acc); font-weight: 800; }
#islesp .lva i { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--mut); margin-left: 4px; }
#islesp .ilink { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: #9fc8ff; cursor: pointer; text-align: left; } #islesp .ilink:hover { color: var(--fg); }
#islesp .tuses { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: #dfe3ec; }
#islesp .tuses > div { display: flex; align-items: center; gap: 8px; } #islesp .tuses .ic { width: 14px; height: 14px; color: var(--acc); flex: none; }
#islesp .tsplit { margin: 0; }
#islesp .prz .pv { text-align: right; }
#islesp .small a { color: var(--acc); }
#islesp .iacts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* the $ISLES shop */
#shop-ov { position: fixed; inset: 0; z-index: 46; background: rgba(5,6,10,.6); display: grid; place-items: center; padding: 14px; }
#shop-ov.hidden { display: none; }
.shop-box { width: 860px; max-width: 100%; max-height: calc(100vh - 28px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.shop-box .mhead { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; } .shop-box .mhead span { display: inline-flex; gap: 8px; align-items: center; } .shop-box .mhead .ic { width: 16px; height: 16px; color: var(--acc); }
.shop-cats { display: flex; gap: 4px; margin: 8px 0 10px; overflow-x: auto; scrollbar-width: none; }
.shop-cats button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; white-space: nowrap; }
.shop-cats button.on { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.6); color: var(--acc); font-weight: 800; }
.shop-main { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
@media (max-width: 719px) { .shop-main { grid-template-columns: 1fr; } .sdetail { order: -1; } }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sitem { font: inherit; text-align: left; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--fg); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.sitem:hover { border-color: rgba(255,209,102,.4); } .sitem.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(255,209,102,.25); }
.sprev, .dprev { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0b1020; position: relative; }
.sprev img, .dprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sname { font-weight: 800; font-size: 13px; padding: 0 2px; } .sprice { font-size: 12px; color: var(--acc); font-weight: 700; padding: 0 2px 2px; } .sprice .owned { color: var(--up); }
.sdetail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 12.5px; }
.dname { font-weight: 800; font-size: 16px; }
.dinputs { display: flex; flex-direction: column; gap: 6px; } .dinputs:empty { display: none; }
.dinputs select, .dinputs input { font: inherit; font-size: 13px; background: rgba(0,0,0,.3); color: var(--fg); border: 1px solid var(--line); border-radius: 9px; padding: 8px; min-width: 0; }
.dinputs .slug, .dinputs .bid { display: flex; align-items: center; gap: 6px; } .dinputs .slug input, .dinputs .bid input { flex: 1; }
.sbuy { font: inherit; font-weight: 800; background: var(--acc); color: #1a1500; border: 0; border-radius: 10px; padding: 10px; cursor: pointer; } .sbuy:disabled { opacity: .5; cursor: default; }
.stand { display: flex; flex-direction: column; gap: 3px; } .stand > div { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.04); } .stand a { color: var(--fg); font-weight: 700; text-decoration: none; }
.shop-foot { margin-top: 10px; }
/* drawn previews */
.mk { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 8px; font-size: 11px; background: linear-gradient(160deg, #1b2a4a, #0b1020); }
.mk-mega .mk-sky { position: absolute; inset: 0; background: linear-gradient(#ffb06a, #ffd9a8 60%, #5b9b4a 60%); }
.mk-mega .mk-banner { position: relative; display: flex; gap: 5px; align-items: center; background: rgba(12,14,20,.9); color: #eef0f5; border: 1px solid #b18cff; border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .mk-mega .ic { width: 11px; height: 11px; color: #b18cff; } .mk-mega b { color: #d4c1ff; }
.mk-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } .mk-chip { padding: 3px 8px; border-radius: 999px; background: rgba(12,14,20,.85); border: 1px solid rgba(255,255,255,.15); color: #eef0f5; } .mk-chip.gold { border-color: var(--acc); color: var(--acc); font-weight: 800; }
.mk-note { color: #aab6c6; font-size: 10px; text-align: center; }
.mk-url { font-size: 13px; color: #eef0f5; } .mk-url b { color: var(--acc); } .mk-strike { font-size: 10px; color: #8a93a8; text-decoration: line-through; }
.mk-big b { font-size: 30px; color: var(--acc); line-height: 1; } .mk-big span { color: #eef0f5; } .mk-big i { color: #8a93a8; font-style: normal; font-size: 10px; }
.mk-chat { align-items: stretch; justify-content: center; gap: 4px; } .mk-chat > div { background: rgba(255,255,255,.06); border-radius: 7px; padding: 4px 7px; color: #dfe3ec; } .mk-chat b { margin-right: 4px; color: var(--acc); }
.mk-chat > div:last-child b { color: #ffd166; opacity: .6; }
/* the megaphone over the trending isle, featured lists */
#mega-bar, #feat-row { flex: 1 1 100%; order: 103; display: flex; align-items: center; gap: 8px; pointer-events: auto; padding: 2px 4px 0; }
#mega-bar.hidden, #feat-row.hidden { display: none; }
#mega-bar { width: fit-content; flex: 0 1 auto; max-width: 100%; margin: 4px 4px 0; padding: 7px 14px; border-radius: 999px; background: rgba(20,12,36,.9); border: 1px solid #b18cff; color: #eef0f5; font-size: 13px; box-shadow: 0 0 18px rgba(177,140,255,.35); }
#mega-bar .ic { width: 15px; height: 15px; color: #b18cff; flex: none; } #mega-bar b { color: #d4c1ff; flex: none; } #mega-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feat-row { order: 104; overflow-x: auto; scrollbar-width: none; } #feat-row .fk { flex: none; font-size: 11.5px; color: #fff3cf; display: inline-flex; gap: 4px; align-items: center; text-shadow: 0 1px 6px rgba(0,0,0,.6); } #feat-row .fk .ic { width: 13px; height: 13px; color: var(--acc); }
.lchip.featc { border-color: rgba(255,209,102,.6); color: var(--acc); }
.lacts .featb { color: var(--acc); }
/* the contract next to $ISLES */
#islesp .capill { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px dashed rgba(255,209,102,.5); background: rgba(255,209,102,.06); color: #ffe7a8; cursor: pointer; margin-left: 6px; font-family: ui-monospace, Consolas, monospace; } #islesp .capill b { color: var(--acc); font-family: Inter, sans-serif; margin-left: 2px; }
#islesp .capill.soon { cursor: default; color: var(--mut); border-color: var(--line); font-family: inherit; }
#islesp .shopbtn { background: rgba(255,209,102,.16); border-color: var(--acc); color: var(--acc); font-weight: 800; display: inline-flex; gap: 5px; align-items: center; } #islesp .shopbtn .ic { width: 13px; height: 13px; }
.shop-main > *, .shop-grid > *, .sdetail > * { min-width: 0; }
@media (max-width: 719px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sdetail .dprev { aspect-ratio: auto; height: 150px; } .shop-box { padding: 10px; } }
.shop-box { width: min(860px, calc(100vw - 28px)); }
.imp-card { width: min(460px, calc(100vw - 32px)); }
#shop-link.hidden { display: none; }
#avatar-menu .avc.shoponly .avs { color: var(--acc); }

/* explore lists */
#explore-ov { position: fixed; inset: 0; z-index: 46; background: rgba(5,6,10,.6); display: grid; place-items: center; padding: 14px; }
#explore-ov.hidden { display: none; }
.exp-box { width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.exp-box .mhead { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; } .exp-box .mhead span { display: inline-flex; gap: 8px; align-items: center; } .exp-box .mhead .ic { width: 16px; height: 16px; color: #9fc8ff; }
.exp-tabs { display: flex; gap: 4px; margin: 8px 0 4px; overflow-x: auto; scrollbar-width: none; }
.exp-tabs button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--mut); cursor: pointer; white-space: nowrap; }
.exp-tabs button.on { background: #1d3d6b; border-color: #9fc8ff; color: #fff; font-weight: 800; }
.exp-why { margin-bottom: 8px; } .exp-load { padding: 20px 0; }
.exp-sec { display: flex; gap: 6px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); margin: 4px 0; } .exp-sec .ic { width: 12px; height: 12px; }
.exp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px minmax(0, 150px) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); margin-bottom: 5px; color: var(--fg); text-decoration: none; }
.exp-row:hover { border-color: rgba(159,200,255,.45); } .exp-row.feat { border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.05); }
.exp-row .rk { color: var(--mut); font-size: 12px; text-align: center; } .exp-row .rk .ic { width: 15px; height: 15px; color: var(--acc); }
.exp-row .nm { display: flex; flex-direction: column; min-width: 0; } .exp-row .nm b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-row .nm .mut { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exp-row i { font-style: normal; }
.exp-row .up { color: var(--up); } .exp-row .dn { color: var(--dn); }
.exp-row .ret { display: flex; flex-direction: column; align-items: flex-end; } .exp-row .ret b { font-size: 16px; font-variant-numeric: tabular-nums; } .exp-row .ret .mut { font-size: 10.5px; }
.exp-row .pop { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; font-size: 11px; color: #cfd5e3; } .exp-row .pop span { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.05); white-space: nowrap; }
.exp-row .pop .here i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--up); margin-right: 4px; vertical-align: 1px; } .exp-row .pop .cv { color: var(--acc); }
.exp-save { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(159,200,255,.5); background: none; color: #9fc8ff; cursor: pointer; } .exp-save:disabled { opacity: .6; }
.exp-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 6px; font-size: 13px; }
.exp-foot { margin-top: 8px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.exp-foot button { font: inherit; font-size: 12px; background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 4px 10px; cursor: pointer; flex: none; }
@media (max-width: 719px) { .exp-row { grid-template-columns: 26px minmax(0, 1fr) auto; } .exp-row .pop { grid-column: 2 / 4; justify-content: flex-start; } .exp-save { display: none; } }
.lchip.expc { color: #9fc8ff; border-color: rgba(159,200,255,.45); display: inline-flex; gap: 5px; align-items: center; } .lchip.expc .ic { width: 13px; height: 13px; }
.lacts .pubon { color: var(--up); }

/* the watchlist panel */
#watchp .wl-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.wl-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.wl-row:hover { border-color: rgba(159,200,255,.45); } .wl-row.on { border-color: #9fc8ff; background: rgba(29,61,107,.45); }
.wl-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(159,200,255,.1); } .wl-ic .ic { width: 15px; height: 15px; color: #9fc8ff; }
.wl-nm { display: flex; flex-direction: column; min-width: 0; } .wl-nm b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-nm .mut { font-size: 11.5px; }
.wl-cv { font-size: 11px; color: var(--acc); padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,209,102,.45); white-space: nowrap; }
.wl-pub { font-size: 10.5px; color: var(--up); white-space: nowrap; } .wl-here { font-size: 10.5px; color: #9fc8ff; white-space: nowrap; }
.wl-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .wl-exp { display: inline-flex; gap: 5px; align-items: center; color: #9fc8ff; } .wl-exp .ic { width: 13px; height: 13px; }