* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --lime: #e8b24a; --bg: #1a120aee; --border: #4a3420; --text: #f3e6cf; --muted: #c9a86a;
  --gold: #e8b24a; --gold-lt: #ffd47a; --sand: #c9a86a; --cream: #f4ead4;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #100a05;
  font-family: system-ui, -apple-system, sans-serif; color: var(--text); }
#game-root { position: absolute; inset: 0; }
#game-root canvas { display: block; }

/* ---- top-left: bars + resources ---- */
#topleft { position: absolute; top: 12px; left: 14px; z-index: 10; width: 210px;
  display: flex; flex-direction: column; gap: 6px; text-shadow: 0 1px 2px #000; }
.bar { display: flex; align-items: center; gap: 8px; }
.blabel { font-size: 10px; font-weight: 700; width: 38px; color: var(--muted); }
.track { flex: 1; height: 13px; background: #0d160fcc; border: 2px solid var(--border);
  border-radius: 3px; overflow: hidden; }
.fill { height: 100%; transition: width .25s; }
.fill.hp { background: linear-gradient(90deg, #d84a4a, #ff7a7a); }
.fill.food { background: linear-gradient(90deg, #e8842c, #ffb35a); }
.fill.stam { background: linear-gradient(90deg, #3a9ad8, #7ad0ff); }
#resources { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: 12px; }
#resources span { color: #fff; } #resources b { color: var(--lime); }

/* ---- title ---- */
#title { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9;
  font-size: 22px; font-weight: 900; letter-spacing: 4px; color: var(--lime);
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(184,242,95,.4); pointer-events: none; }

/* ---- top-right: day/biome + quest + minimap ---- */
#topright { position: absolute; top: 12px; right: 14px; z-index: 10; width: 190px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#daybox { width: 100%; background: var(--bg); border: 2px solid var(--border);
  border-top: 3px solid var(--lime); border-radius: 4px; padding: 7px 10px; }
#daybox #clock { font-size: 13px; font-weight: 700; color: #fff; }
#daybox #biome { font-size: 13px; color: var(--lime); margin-left: 4px; }
#netline { font-size: 10px; color: var(--muted); margin-top: 3px; }
#quest { width: 100%; background: var(--bg); border: 2px solid var(--border);
  border-left: 3px solid #ffd24a; border-radius: 4px; padding: 8px 10px; }
.qhead { font-size: 10px; letter-spacing: 1px; color: #ffd24a; }
.qhead span { color: var(--muted); }
#qtitle { font-size: 12px; margin: 3px 0 5px; }
.qtrack { height: 5px; background: #0d160f; border-radius: 3px; overflow: hidden; }
#qfill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd24a, var(--lime)); transition: width .3s; }
#minimap { width: 180px; height: 150px; border: 2px solid var(--border); border-radius: 4px;
  image-rendering: pixelated; background: #0d160f; }

/* ---- party dock (left) ---- */
#party-dock { position: absolute; top: 42%; left: 14px; transform: translateY(-50%); z-index: 10;
  width: 184px; background: var(--bg); border: 2px solid var(--border);
  border-top: 3px solid var(--lime); border-radius: 5px; padding: 9px 11px; }
.dockhead { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--lime); margin-bottom: 7px; }
#dock-list { display: flex; flex-direction: column; gap: 7px; }
.dockrow { display: flex; align-items: center; gap: 7px; }
.dockrow img { width: 28px; height: 28px; image-rendering: pixelated; }
.dockrow .dinfo { flex: 1; }
.dockrow .dname { font-size: 11px; } .dockrow .dname .dlv { color: var(--lime); font-size: 9px; }
.dockrow .dtrack { height: 4px; background: #0d160f; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.dockrow .dfill { height: 100%; background: #51cf66; }
.dockempty { font-size: 10px; color: var(--muted); }

/* ---- chat feed (bottom-left) ---- */
#chat { position: absolute; bottom: 16px; left: 14px; z-index: 10; width: 280px; }
#chatlog { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow: hidden;
  margin-bottom: 5px; }
.chatline { font-size: 11px; line-height: 1.5; color: #cdded3; text-shadow: 0 1px 2px #000; }
.chatline.sys { color: #ffd24a; } .chatline.evt { color: var(--lime); }
#chatbar { font-size: 10px; color: var(--muted); background: #0d160faa; border: 2px solid var(--border);
  border-radius: 4px; padding: 6px 9px; }

/* ---- target nameplate ---- */
#target { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--bg); border: 2px solid var(--border); border-top: 3px solid var(--lime);
  border-radius: 4px; padding: 8px 14px; min-width: 220px; text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.4); }
#target b { font-size: 15px; }
#target .lv { color: var(--lime); font-size: 12px; margin-left: 6px; }
#target .types { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; margin: 2px 0 5px; }
#target .tbar { height: 7px; background: #0d160f; border-radius: 4px; overflow: hidden; }
#target .tfill { height: 100%; background: linear-gradient(90deg, #d84a4a, var(--lime)); transition: width .15s; }
#target .thint { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ---- hotbar ---- */
#hotbar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 8px; }
.slot { width: 82px; height: 78px; cursor: pointer; position: relative; border-radius: 14px;
  background: linear-gradient(180deg, rgba(42,29,16,.82), rgba(16,10,5,.9));
  border: 1.5px solid rgba(232,178,74,.22); box-shadow: 0 6px 16px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: .12s; }
.slot:hover { border-color: rgba(232,178,74,.5); transform: translateY(-2px); }
.slot.sel { border-color: var(--gold); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(62,43,20,.92), rgba(24,14,6,.96));
  box-shadow: 0 0 0 2px rgba(232,178,74,.4), 0 10px 22px rgba(0,0,0,.5); }
.slot.empty { opacity: .5; }
.slot .snum { position: absolute; top: 4px; left: 8px; font-size: 9px; font-weight: 700; color: var(--sand); }
.slot .iemoji { font-size: 27px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.slot .iimg { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.slot .iemoji.empty { font-size: 20px; color: var(--sand); opacity: .55; }
.slot .sname { font-size: 8.5px; font-weight: 600; color: var(--cream); max-width: 74px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.slot .scount { position: absolute; bottom: 3px; right: 8px; font-size: 13px; font-weight: 800; color: var(--gold-lt); }

/* ---- controls hint ---- */
#controls { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 9;
  font-size: 10px; color: #cdded399; text-shadow: 0 1px 2px #000; white-space: nowrap; }

/* ---- toasts ---- */
#toasts { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: #0e1812dd; border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 16px; font-size: 13px; opacity: 0; transform: translateY(10px);
  transition: all .35s; text-shadow: 0 1px 2px #000; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ---- overlay panels ---- */
#overlay { position: absolute; inset: 0; z-index: 14; background: rgba(6,12,8,.55); backdrop-filter: blur(2px); }
.panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15;
  width: min(560px, 92vw); max-height: 80vh; background: var(--bg);
  border: 2px solid var(--border); border-top: 4px solid var(--lime); border-radius: 6px;
  padding: 16px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.ptitle { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--lime);
  margin-bottom: 12px; border-left: 4px solid var(--lime); padding-left: 8px; }
.ptitle .pclose, #dex-count { font-weight: 400; font-size: 11px; color: var(--muted); letter-spacing: 0; }
/* the close hint is now a real tappable ✕ button */
.ptitle { display: flex; align-items: center; gap: 6px; }
.ptitle .pclose { cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; white-space: nowrap; }
.ptitle .pclose::before { content: '✕'; font-weight: 800; color: var(--text); }
.ptitle .pclose:hover, .ptitle .pclose:active { border-color: var(--lime); color: var(--lime); }
.ptitle .pclose:hover::before, .ptitle .pclose:active::before { color: var(--lime); }
#dex-count, #ach-count { margin-left: 0; }
body.touch .ptitle .pclose { font-size: 14px; padding: 7px 13px; }   /* bigger tap target on phones */
.grid { display: grid; gap: 8px; overflow-y: auto; }
#inv-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.icell { background: #0f1a12; border: 2px solid #1b2a1e; border-radius: 4px; padding: 8px;
  display: flex; justify-content: space-between; align-items: center; }
.icell.empty { opacity: .4; }
.icell .iname { font-size: 11px; } .icell b { color: var(--lime); }
#craft-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.craftrow { display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: #142016; border: 2px solid var(--border); border-radius: 4px; padding: 9px 12px;
  color: var(--text); cursor: pointer; font-family: inherit; }
.craftrow:hover { border-color: var(--lime); }
.craftrow.cant { opacity: .45; cursor: not-allowed; }
.craftrow .cget { font-size: 13px; } .craftrow .ccost { font-size: 11px; color: var(--muted); }
#party-grid, #dex-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.pcard, .dcell { background: #0f1a12; border: 2px solid #1b2a1e; border-radius: 4px;
  padding: 6px; text-align: center; }
.pcard img, .dcell img { width: 64px; height: 64px; image-rendering: pixelated; }
.pcard .pname, .dcell span { display: block; font-size: 10px; }
.pcard .plv { font-size: 9px; color: var(--muted); }
.dcell.caught { border-color: #2f6b3a; } .dcell.unseen .dq { font-size: 18px; color: #3a4a3e; padding: 18px 0 6px; }
.dcell span { color: var(--muted); } .dcell.caught span { color: var(--text); }
.muted { color: var(--muted); font-size: 12px; grid-column: 1/-1; }

/* ---- death ---- */
#dead { position: absolute; inset: 0; z-index: 30; background: rgba(10,6,6,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
#dead div { font-size: 32px; font-weight: 900; color: #ff7a7a; letter-spacing: 3px; }
#dead button { padding: 12px 28px; font-size: 15px; background: #142016; color: var(--lime);
  border: 2px solid var(--lime); border-radius: 5px; cursor: pointer; }

/* ---- loading ---- */
#loading { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center;
  justify-content: center; background: #0a130d; color: var(--lime); font-size: 16px;
  transition: opacity .6s; pointer-events: none; }
#loading.hidden { opacity: 0; }
.hidden { display: none !important; }

/* ===== Gloamfang additions (v14): icons, vignette, shop/howto/starter ===== */

/* hand-drawn icons (no emoji) */
.ico { width: 14px; height: 14px; vertical-align: -2px; display: inline-block; }
#clock { display: inline-flex; align-items: center; gap: 4px; }
.tchip { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: 0; box-shadow: 0 0 0 1px #0008 inset; }
.star { color: #ffe066; }
#resources .tool { color: #ffd24a; }

/* low-hp / starving vignette */
#vignette { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
  transition: opacity .4s; box-shadow: inset 0 0 140px 40px rgba(180, 20, 20, .55); }
#vignette.show { opacity: 1; animation: vigpulse 1.4s ease-in-out infinite; }
@keyframes vigpulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* party-dock XP bar */
.dockrow .dtrack.xp { height: 3px; margin-top: 2px; }
.dockrow .dfill.xp { background: #ffd24a; }

/* panel subtitle + how-to-play */
.psub { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
#howto-body { overflow-y: auto; }
#howto-body p { font-size: 12px; line-height: 1.7; margin-bottom: 7px; color: #cdded3; }
#howto-body b { color: var(--lime); }

/* starter selection */
#starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.starter-card { background: #0f1a12; border: 2px solid var(--border); border-radius: 6px;
  padding: 14px 8px; cursor: pointer; color: var(--text); transition: transform .06s, border-color .1s; }
.starter-card:hover { border-color: var(--lime); transform: translateY(-3px); }
.starter-card img { width: 80px; height: 80px; image-rendering: pixelated; }
.starter-card .sname { font-size: 14px; font-weight: 700; margin-top: 6px; }
.starter-card .stypes { font-size: 9px; color: var(--muted); text-transform: uppercase; margin-top: 4px; }

/* ===== v16: glassmorphism pass + item icons + edge-only damage ===== */
.panel, .slot, #party-dock, #daybox, #quest, #target, .toast, #chatbar {
  background: linear-gradient(155deg, rgba(26,38,30,.42), rgba(9,16,11,.60)) !important;
  backdrop-filter: blur(13px) saturate(1.25);
  -webkit-backdrop-filter: blur(13px) saturate(1.25);
  border: 1px solid rgba(184,242,95,.20);
  box-shadow: 0 10px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}
.panel, #party-dock, #daybox, #target { border-top: 2px solid rgba(184,242,95,.7) !important; }
#quest { border-left: 2px solid rgba(255,210,74,.8) !important; }
.track { background: rgba(10,18,12,.55) !important; border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
#minimap { box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); }
#overlay { background: rgba(6,12,8,.45); backdrop-filter: blur(4px) saturate(1.1); }

/* item icons (the "models") */
.iicon { width: 30px; height: 30px; image-rendering: pixelated; display: block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
/* hotbar slot styling lives above (emoji + name + count) */
.slot .snum { top: 3px; left: 5px; }
.icell { flex-direction: row; justify-content: center; gap: 10px; align-items: center; }
.icell .iname { display: none; }
.icell .iicon { width: 26px; height: 26px; }

/* edge-only damage pulse (no full-screen red) */
#vignette { box-shadow: inset 0 0 110px 26px rgba(180, 20, 20, .5); }
#vignette.hit { opacity: 1 !important; animation: none !important;
  box-shadow: inset 0 0 130px 50px rgba(220, 30, 30, .8); transition: opacity .08s; }

/* ===== v17: how-to sidebar (non-blocking) + party equip/evolve ===== */
#howto-panel {
  position: absolute; top: 70px; right: 14px; bottom: 88px; left: auto;
  transform: none; width: 300px; max-width: 42vw; max-height: none; z-index: 16;
}
#howto-panel.hidden { display: none !important; }

/* party cards: equip / evolve / release */
#party-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.pcard { position: relative; }
.pcard.lead { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), inset 0 1px 0 rgba(255,255,255,.14); }
.leadtag { position: absolute; top: 4px; left: 4px; font-size: 8px; font-weight: 800; letter-spacing: 1px;
  color: #0c1208; background: var(--lime); border-radius: 3px; padding: 1px 5px; }
.pbtns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.pbtn { font-family: inherit; font-size: 9px; padding: 3px 7px; border-radius: 4px; cursor: pointer;
  background: #142016; color: var(--text); border: 1px solid var(--border); }
.pbtn:hover { border-color: var(--lime); }
.pbtn.evo { background: #2a1f44; border-color: #6a52c8; color: #cdbcff; }
.pbtn.evo.off { opacity: .45; }
.pbtn.rel:hover { border-color: #ff8787; color: #ff8787; }

/* ===== v19: smaller how-to sidebar ===== */
/* v23: sits BELOW the day/quest/minimap column so it never covers them */
#howto-panel {
  top: 318px; right: 14px; bottom: auto; left: auto; transform: none;
  width: 248px; max-width: 40vw; height: auto; max-height: calc(100vh - 340px); overflow-y: auto;
  padding: 12px 14px; z-index: 16;
}
#howto-panel .ptitle { font-size: 13px; margin-bottom: 8px; }
#howto-body p { font-size: 11px; line-height: 1.5; margin-bottom: 6px; }

/* v20: recipe row icon */
.craftrow .ricon { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -4px; margin-right: 4px; }
.craftrow .cget { display: inline-flex; align-items: center; }

/* ===== v21: player level, buffs, gold economy, achievements, cooking ===== */

/* player level chip + xp bar (under the survival bars) */
#plevel { display: flex; align-items: center; gap: 8px; font-size: 11px; }
#plevel .plv { font-weight: 800; color: #ffd24a; width: 38px; }
#plevel .ptrack { flex: 1; height: 6px; background: rgba(10,18,12,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px; overflow: hidden; }
#plevel .pfill { height: 100%; background: linear-gradient(90deg, #ffd24a, var(--lime)); transition: width .3s; }

/* gold in the resource line */
#resources .gold b { color: #ffd24a; }

/* active food buffs */
#buffs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.buff { display: flex; align-items: center; gap: 5px; font-size: 9px; padding: 2px 7px;
  background: rgba(10,18,12,.6); border: 1px solid var(--border); border-radius: 12px; }
.buff b { color: var(--muted); font-weight: 600; }

/* cooking hint + cook recipes */
.cookhint { font-size: 10px; color: var(--muted); margin-bottom: 8px; padding: 5px 8px;
  background: rgba(10,18,12,.45); border: 1px solid var(--border); border-radius: 4px; }
.craftrow.cook { border-left: 2px solid #ff8a3a; }
.craftrow .cget em { font-style: normal; font-size: 9px; color: #ff8a3a; margin-left: 4px; }

/* trader tabs / gold / sell */
.shoptabs { display: flex; gap: 6px; margin-bottom: 10px; }
.shoptab { flex: 1; font-family: inherit; font-size: 11px; padding: 6px; cursor: pointer; color: var(--muted);
  background: #142016; border: 1px solid var(--border); border-radius: 4px; }
.shoptab.on { color: #0c1208; background: var(--lime); border-color: var(--lime); font-weight: 700; }
.shoptab:hover { border-color: var(--lime); }
.shopgold { font-size: 12px; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.shopgold b { color: #ffd24a; } .shopgold .iicon { width: 18px; height: 18px; }
.shopbody { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.sellrow { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #142016; border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; }
.sellrow .cget { display: inline-flex; align-items: center; font-size: 13px; }
.sellrow .ricon { width: 18px; height: 18px; image-rendering: pixelated; margin-right: 4px; }
.sellrow .have { color: var(--muted); font-size: 11px; margin-left: 4px; }
.sellbtns { display: flex; gap: 5px; }

/* achievements panel */
#ach-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.acell { background: #0f1a12; border: 2px solid #1b2a1e; border-radius: 4px; padding: 9px 10px; text-align: left; }
.acell.done { border-color: #ffd24a; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.acell .aname { font-size: 12px; font-weight: 700; color: var(--text); }
.acell.done .aname { color: #ffd24a; }
.acell .adesc { font-size: 10px; color: var(--muted); margin: 3px 0 6px; }
.acell .atrack { height: 5px; background: #0d160f; border-radius: 3px; overflow: hidden; }
.acell .afill { height: 100%; background: linear-gradient(90deg, #ffd24a, var(--lime)); }
.acell .ameta { font-size: 9px; color: var(--muted); margin-top: 4px; }

/* ===== Gold Rush lobby — full-bleed cinematic entry (no card) ===== */
#start-screen { position: absolute; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif; overflow: hidden;
  background:
    radial-gradient(56% 40% at 50% 70%, rgba(255,190,90,.5), transparent 62%),
    linear-gradient(180deg, #0a0712 0%, #241024 22%, #5a2630 44%, #a14b2c 60%, #d98a40 74%, #6f3618 100%); }
/* layered dune silhouettes across the bottom — the prospector stands on this */
#start-screen::after { content:''; position:absolute; left:0; right:0; bottom:0; height:46vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(44% 80% at 18% 128%, #3a2114 0 60%, transparent 62%),
    radial-gradient(52% 86% at 82% 132%, #3a2114 0 60%, transparent 62%),
    linear-gradient(180deg, transparent 0 40%, #43251400 42%, #3a1f12 56%, #21110a 100%); }

/* top bar */
.lobby-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; }
.lobby-brand { display: flex; align-items: center; gap: 12px; font-family: 'Cinzel', serif; font-weight: 900;
  letter-spacing: 3px; font-size: 19px; color: var(--cream); }
.lobby-mark { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; display: block; border: 1px solid rgba(255,255,255,.1); filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.lobby-top-right { display: flex; align-items: center; gap: 12px; }
.x-follow, .ca-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--cream); background: rgba(20,12,6,.4); border: 1px solid rgba(232,178,74,.22);
  border-radius: 100px; padding: 9px 16px; cursor: pointer; transition: .2s; font-family: 'Inter', sans-serif; }
.x-follow:hover, .ca-chip:hover { border-color: var(--gold); color: var(--gold-lt); }
.x-ico { width: 14px; height: 14px; }
.ca-chip { font-family: ui-monospace, monospace; letter-spacing: .5px; }
.ca-chip .ca-label { color: var(--gold); font-weight: 700; font-family: 'Inter', sans-serif; }
.ca-chip .ca-copy { width: 13px; height: 13px; opacity: .7; }

/* the split stage */
.lobby-stage { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6%; padding: 0 6% 4vh; max-width: 1280px; width: 100%; margin: 0 auto; }

/* LEFT — the prospector hero */
.lobby-hero { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lobby-platform { position: relative; display: grid; place-items: end center; }
.lobby-platform::before { content:''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,6,3,.55), transparent); }
#avatar-preview { width: 186px; height: 279px; image-rendering: pixelated; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.lobby-name-wrap { display: flex; align-items: center; gap: 8px; background: rgba(16,9,4,.5);
  border: 1px solid rgba(232,178,74,.3); border-radius: 12px; padding: 4px 6px 4px 12px; backdrop-filter: blur(6px); }
.lnw-tag { color: var(--gold); font-size: 13px; }
#avatar-name { width: 200px; background: transparent; border: none; color: var(--cream);
  padding: 8px 6px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; text-align: center; letter-spacing: .5px; }
#avatar-name::placeholder { color: rgba(201,168,106,.6); font-weight: 400; }
#avatar-name:focus { outline: none; }
.lobby-custom { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.lc-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-group > span { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sand); }
.swatches { display: flex; gap: 5px; }
.swatch { width: 17px; height: 17px; border-radius: 5px; border: 2px solid rgba(255,255,255,.12); cursor: pointer; padding: 0; transition: .12s; }
.swatch:hover { transform: scale(1.15); }
.swatch.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,178,74,.45); transform: scale(1.18); }

/* RIGHT — the control rail (no card, sits on the scene) */
.lobby-rail { flex: 0 1 420px; display: flex; flex-direction: column; gap: 12px; }
.rail-eyebrow { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-size: 11px; letter-spacing: 2.5px;
  color: var(--gold); border: 1px solid rgba(232,178,74,.2); border-radius: 100px; padding: 7px 14px; background: rgba(232,178,74,.05); font-weight: 600; }
.rail-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: #6be08a; box-shadow: 0 0 0 0 rgba(107,224,138,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(107,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(107,224,138,0); } }
.rail-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe79a, #c9851d); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 12px rgba(232,162,74,.35)); margin-top: 2px; }
.rail-pitch { color: var(--cream); opacity: .92; font-size: 15px; line-height: 1.6; max-width: 420px; margin-bottom: 6px; }
.rail-pitch b { color: var(--gold-lt); }
.rail-play { display: flex; align-items: center; justify-content: space-between; font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; padding: 16px 22px; border-radius: 14px; cursor: pointer; transition: .2s; border: 1px solid transparent; }
.rail-play .rp-ic { font-size: 15px; opacity: .85; }
.rail-play.primary { background: linear-gradient(180deg, #f4c95a, #c9851d); color: #2a1800; box-shadow: 0 10px 28px rgba(232,178,74,.3); }
.rail-play.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(232,178,74,.45); }
.rail-play.mp { background: rgba(20,12,6,.45); color: var(--cream); border-color: rgba(232,178,74,.28); }
.rail-play.mp:hover { border-color: var(--gold); transform: translateY(-2px); }
.online-count { font-size: 12px; color: var(--sand); padding-left: 2px; }
.online-count .oc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6be08a; margin-right: 6px; }
.online-count .oc-dot.off { background: #c97a4a; }
.rail-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; color: var(--sand); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.rail-divider::before, .rail-divider::after { content:''; flex: 1; height: 1px; background: rgba(232,178,74,.16); }
.rail-wallet { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; padding: 13px 16px; cursor: pointer;
  border-radius: 12px; background: rgba(20,12,6,.4); color: var(--cream); border: 1px solid rgba(232,178,74,.25); transition: .2s; }
.rail-wallet:hover { border-color: var(--gold); color: var(--gold-lt); }
.rail-wallet { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.sol-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.wstatus { font-size: 11px; color: var(--sand); min-height: 14px; padding-left: 2px; }
.wstatus .ok { color: #7fe0a0; } .wstatus a { color: var(--gold-lt); }
.holder-status { font-size: 11px; color: var(--sand); line-height: 1.5; cursor: pointer;
  border: 1px dashed rgba(232,178,74,.22); border-radius: 10px; padding: 9px 12px; }
.holder-status b { color: var(--gold-lt); }
/* shared small buttons (lobby/login boxes) */
.wbtn { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; padding: 12px 14px; cursor: pointer; color: #2a1800;
  background: linear-gradient(180deg, #f4c95a, #c9851d); border: none; border-radius: 11px; transition: .2s; }
.wbtn:hover { transform: translateY(-1px); }
.wbtn.small { font-size: 12px; padding: 10px; background: rgba(255,255,255,.05); color: var(--cream);
  border: 1px solid rgba(232,178,74,.2); font-weight: 600; }
.wbtn.small:hover { border-color: var(--gold); transform: none; }
.wbtn.ghost { background: transparent; border: 1px solid rgba(232,178,74,.22); color: var(--sand); }
#login-box, #lobby-box { background: rgba(8,5,3,.45); border: 1px solid rgba(232,178,74,.18); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
#login-box.hidden, #lobby-box.hidden { display: none; }
.login-title { font-size: 12px; color: var(--gold-lt); letter-spacing: 1px; font-weight: 600; }
.or { text-align: center; font-size: 10px; color: var(--sand); letter-spacing: 1px; }
.join-row { display: flex; gap: 8px; }
#join-code, #login-email { background: rgba(8,5,3,.55); border: 1px solid rgba(232,178,74,.2); border-radius: 9px; color: var(--cream);
  padding: 10px; font-family: inherit; font-size: 13px; flex: 1; }
#join-code:focus, #login-email:focus { outline: none; border-color: var(--gold); }
.start-msg { font-size: 12px; margin-top: 4px; min-height: 16px; color: var(--gold-lt); padding-left: 2px; }

@media (max-width: 860px) {
  .lobby-stage { flex-direction: column; gap: 28px; justify-content: flex-start; padding-top: 10px; overflow-y: auto; }
  #avatar-preview { width: 130px; height: 195px; }
  .lobby-rail { flex: 1 1 auto; width: 100%; max-width: 440px; }
}
@media (max-width: 560px) {
  /* keep the lobby top bar from overflowing on phones */
  .lobby-top { padding: 14px 16px; gap: 8px; flex-wrap: wrap; }
  .lobby-brand { font-size: 16px; letter-spacing: 2px; gap: 8px; }
  .lobby-mark { width: 30px; height: 30px; }
  .lobby-top-right { gap: 8px; }
  .x-follow, .ca-chip { padding: 7px 11px; font-size: 11px; }
  .ca-chip .ca-addr { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-title { font-size: 32px; }
  .lobby-stage { padding-left: 16px; padding-right: 16px; }
}

/* ===== v23: active-team (out) tags, select/deselect buttons ===== */
.outtag { position: absolute; top: 4px; left: 4px; font-size: 8px; font-weight: 800; letter-spacing: 1px;
  color: #0c1208; background: #7ad0ff; border-radius: 3px; padding: 1px 5px; }
.pcard.benched { opacity: .6; }
.pcard.benched img { filter: saturate(.45) brightness(.85); }
.pbtn.mklead { background: #173a2a; border-color: #2f8f5a; color: var(--lime); }
.dcell { position: relative; }
.dcell .dbtn { display: block; width: 100%; margin-top: 4px; font-family: inherit; font-size: 9px; padding: 3px 2px;
  cursor: pointer; border-radius: 4px; background: #142016; color: var(--text); border: 1px solid var(--border); }
.dcell .dbtn:hover { border-color: var(--lime); }
.dcell .dbtn.on { background: #7ad0ff; color: #0c1208; border-color: #7ad0ff; font-weight: 700; }
.dcell.active { border-color: #7ad0ff; box-shadow: inset 0 0 0 1px #7ad0ff; }

/* ===== v24: customisable hotbar + inventory assignment ===== */
.slot.empty { opacity: .45; }
.slot.empty .snum { opacity: .9; }
.icell { position: relative; cursor: pointer; transition: border-color .1s; }
.icell:hover { border-color: var(--lime); }
.icell.onbar { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.icell .barbadge { position: absolute; top: 3px; right: 5px; font-size: 11px; color: #ffd24a; }

/* v24: death screen subtext */
#dead .deadsub { font-size: 13px; font-weight: 400; letter-spacing: 1px; color: var(--muted); max-width: 360px; text-align: center; line-height: 1.5; }

/* ===== v30: depth & retention — eggs, combo, boss, banners, upgrades, dailies ===== */

/* danger tier chip in the day/biome line */
#biome .danger { font-weight: 800; margin-left: 4px; }

/* egg incubator (top-left) */
#egg { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#egg .egglabel { font-size: 10px; font-weight: 700; width: 38px; color: #c9a0ff; }
#egg .eggtrack { flex: 1; height: 8px; background: rgba(10,18,12,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; overflow: hidden; }
#egg-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a78ea, #c9a0ff); transition: width .25s; }
#egg.ready .eggtrack { box-shadow: 0 0 8px #c9a0ff; }
#egg.ready #egg-fill { animation: eggpulse 1s ease-in-out infinite; }
@keyframes eggpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

/* world-boss health bar (top centre) */
#boss-bar { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 13;
  width: min(440px, 80vw); background: linear-gradient(155deg, rgba(40,16,48,.55), rgba(12,8,16,.7));
  border: 1px solid rgba(201,160,255,.45); border-top: 2px solid #c9a0ff; border-radius: 6px;
  padding: 7px 12px; box-shadow: 0 8px 26px rgba(0,0,0,.5); backdrop-filter: blur(10px); }
#boss-bar .boss-name { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #e6c9ff; text-align: center; text-shadow: 0 1px 2px #000; }
#boss-bar .boss-name span { color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
#boss-bar .boss-track { height: 10px; margin-top: 5px; background: #1a0e22; border: 1px solid rgba(201,160,255,.3); border-radius: 5px; overflow: hidden; }
#boss-bar .boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #9a2ee0, #ff6a6a); transition: width .12s; }

/* catch-combo meter */
#combo-meter { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); z-index: 12;
  background: linear-gradient(155deg, rgba(26,38,46,.5), rgba(9,14,18,.66)); border: 1px solid rgba(122,208,255,.4);
  border-top: 2px solid #7ad0ff; border-radius: 6px; padding: 6px 14px; text-align: center; backdrop-filter: blur(9px); min-width: 150px; }
#combo-meter .combo-n { font-size: 16px; font-weight: 900; color: #7ad0ff; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
#combo-meter .combo-name { font-size: 10px; color: var(--muted); }
#combo-meter .combo-track { height: 4px; margin-top: 4px; background: #0d160f; border-radius: 3px; overflow: hidden; }
#combo-meter .combo-fill { height: 100%; background: #7ad0ff; }

/* big celebration banner (centre screen) */
#big-banner { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%) scale(.7);
  z-index: 25; text-align: center; pointer-events: none; opacity: 0; }
#big-banner.show { animation: bbpop 2.6s ease-out forwards; }
@keyframes bbpop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  10% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
  20% { transform: translate(-50%,-50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05); }
}
#big-banner .bb-title { font-size: 46px; font-weight: 900; letter-spacing: 5px;
  text-shadow: 0 3px 0 #000, 0 0 26px currentColor; }
#big-banner .bb-sub { font-size: 15px; color: var(--text); margin-top: 4px; text-shadow: 0 2px 4px #000; letter-spacing: 1px; }

/* welcome-back modal */
#meta-modal { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,8,.6); backdrop-filter: blur(4px); }
#meta-modal .mm-card { width: min(420px, 90vw); background: linear-gradient(155deg, rgba(26,38,30,.7), rgba(9,16,11,.85));
  border: 1px solid rgba(184,242,95,.3); border-top: 3px solid var(--lime); border-radius: 12px; padding: 26px 28px;
  text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
#meta-modal .mm-title { font-size: 26px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 2px 0 #000; }
#meta-modal .mm-sub { font-size: 13px; color: var(--muted); margin: 8px 0 12px; line-height: 1.5; }
#meta-modal .mm-reward { font-size: 16px; font-weight: 700; color: var(--lime); margin-bottom: 18px; }
#meta-modal .mm-ok { width: 100%; }

/* upgrades + ascension panel */
#upgrades-list, #daily-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.craftrow.upgr { align-items: center; text-align: left; }
.craftrow.upgr .cget { align-items: center; }
.uinfo { display: inline-block; line-height: 1.35; }
.ulv { font-size: 10px; color: #ffd24a; }
.udesc { font-size: 10px; color: var(--muted); }
.ascbox { margin-top: 10px; background: linear-gradient(155deg, rgba(42,20,64,.5), rgba(16,9,22,.6));
  border: 1px solid rgba(201,160,255,.35); border-radius: 6px; padding: 12px 14px; }
.asctitle { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #c9a0ff; }
.ascdesc { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 6px 0 10px; }
.ascbtn { width: 100%; background: linear-gradient(180deg, #c9a0ff, #9a5ad0); }
.ascbtn.off { opacity: .5; filter: saturate(.5); }

/* daily quests panel */
.dailystreak { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted);
  background: rgba(10,18,12,.45); border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; margin-bottom: 4px; }
.dailystreak b { color: #ffd24a; }
.dailyrow { background: #0f1a12; border: 2px solid #1b2a1e; border-radius: 4px; padding: 9px 11px; }
.dailyrow.done { border-color: #ffd24a; }
.dqhead { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.dailyrow.done .dqhead { color: #ffd24a; }

/* ===== v33: multiplayer lobby (create / join private room) ===== */
#lobby-box { background: rgba(13,22,15,.55); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 9px; }
#lobby-box .login-title { color: #7ad0ff; }
.join-row { display: flex; gap: 8px; }
#join-code { flex: 1; min-width: 0; background: rgba(13,22,15,.7); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 9px; font-family: monospace; font-size: 16px; font-weight: 700; letter-spacing: 3px;
  text-align: center; text-transform: uppercase; }
#join-code:focus { outline: none; border-color: #7ad0ff; }
.join-row .wbtn.small { flex: 0 0 auto; }
.wbtn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.wbtn.ghost:hover { border-color: #7ad0ff; color: var(--text); }

/* party-card power line + nameplate variant tags */
.pcard .ppow { font-size: 9px; color: var(--muted); margin-top: 1px; }
#target .bosstag { color: #c9a0ff; font-weight: 800; font-size: 10px; letter-spacing: 1px; }
#target .gloamtag { color: #c9a0ff; font-weight: 800; font-size: 9px; letter-spacing: 1px; }
#target .alphatag { color: #ff9a5a; font-weight: 800; font-size: 9px; letter-spacing: 1px; }

/* ===== v33: mobile / touch controls + responsive HUD ===== */
#touch-controls { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
#touch-controls.hidden { display: none !important; }
#joystick { position: absolute; left: 18px; bottom: 18px; width: 124px; height: 124px; border-radius: 50%;
  background: rgba(20,12,6,.5); border: 2px solid rgba(232,178,74,.35); pointer-events: auto; touch-action: none; }
#stick { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(232,178,74,.65); border: 2px solid rgba(255,240,200,.5); }
/* compact 2x2 action grid, bottom-right (clears the minimap above it) */
#touch-actions { position: absolute; right: 14px; bottom: 14px; width: 128px; height: 128px; pointer-events: none; }
.tbtn { position: absolute; width: 58px; height: 58px; border-radius: 50%; pointer-events: auto; touch-action: none;
  font-size: 23px; font-family: inherit; color: #2a1800; border: 2px solid rgba(255,240,200,.45);
  box-shadow: 0 4px 14px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.tbtn.act  { right: 0;    bottom: 0;    background: linear-gradient(180deg,#f4c95a,#c9851d); }
.tbtn.intr { right: 66px; bottom: 66px; background: linear-gradient(180deg,#f0b73a,#b87818); font-size: 20px; }
.tbtn.bld  { right: 0;    bottom: 66px; background: linear-gradient(180deg,#c9a86a,#8a6028); color: #fff; }
/* mobile menu = one toggle button that opens a popup grid (clears the HUD) */
#touch-menu { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 16; }
#tm-toggle { pointer-events: auto; touch-action: manipulation; font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 8px 16px; color: #2a1800; background: linear-gradient(180deg,#f4c95a,#c9851d);
  border: 1px solid rgba(255,240,200,.4); border-radius: 100px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#tm-grid { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); width: 88vw; max-width: 360px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; pointer-events: auto;
  background: rgba(20,12,6,.94); border: 1px solid rgba(232,178,74,.35); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
#tm-grid.hidden { display: none; }
.tmbtn { pointer-events: auto; touch-action: manipulation; font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 13px 10px; color: var(--cream); background: rgba(255,255,255,.05);
  border: 1px solid rgba(232,178,74,.28); border-radius: 10px; text-align: center; }
.tmbtn:active { background: var(--gold); color: #2a1800; }
body.touch #controls { display: none; }
/* clean gameplay-preview embed (landing iframe) — hide chrome, keep the world */
body.preview-mode #controls, body.preview-mode #chat, body.preview-mode .top-btns,
body.preview-mode #title, body.preview-mode #quest, body.preview-mode #hotbar { display: none !important; }
body.touch #title { display: none; }
/* on touch, the party dock is replaced by the Party panel (T / menu) to free space;
   keep the chat clear of the joystick and shrink the minimap so it clears the buttons */
body.touch #party-dock { display: none; }
body.touch #minimap { width: 112px; height: 74px; }
body.touch #chat { left: 150px; right: auto; width: 210px; bottom: 78px; }
body.touch #chatlog { max-height: 56px; }
body.touch #toasts { bottom: 132px; }

/* audio mute toggle (top-right, above the day box) */
#mute-btn { align-self: flex-end; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--lime); background: var(--bg);
  border: 1px solid rgba(184,242,95,.25); box-shadow: 0 6px 16px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
#mute-btn:hover { border-color: var(--lime); }
#mute-btn.muted { color: #ff8787; border-color: rgba(255,135,135,.4); }

/* X (Twitter) links — in-game icon (next to mute) + start-screen follow button */
.top-btns { display: flex; gap: 6px; align-self: flex-end; align-items: center; }
#x-link { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--text); background: var(--bg); border: 1px solid rgba(184,242,95,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
#x-link svg { width: 15px; height: 15px; }
#x-link:hover { border-color: var(--lime); color: var(--lime); }
.x-follow { display: flex; align-items: center; gap: 8px; width: max-content; margin: 2px auto 16px;
  font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: rgba(13,22,15,.4); }
.x-follow:hover { color: var(--text); border-color: var(--lime); }
.x-follow .x-ico { width: 15px; height: 15px; }

/* contract-address (CA) chip — click to copy */
.ca-chip { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 94%; margin: -6px auto 14px;
  font-family: inherit; cursor: pointer; padding: 6px 10px 6px 8px; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(13,22,15,.5); color: var(--text); }
.ca-chip:hover { border-color: var(--lime); }
.ca-chip .ca-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #ffd24a;
  background: rgba(255,210,74,.12); border: 1px solid rgba(255,210,74,.3); border-radius: 5px; padding: 1px 6px; flex: 0 0 auto; }
.ca-chip .ca-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .2px;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 330px; }
.ca-chip .ca-copy { width: 13px; height: 13px; color: var(--muted); flex: 0 0 auto; }
.ca-chip:hover .ca-addr, .ca-chip:hover .ca-copy { color: var(--text); }
.ca-chip.copied { border-color: var(--lime); }
.ca-chip.copied .ca-addr { color: var(--lime); }

/* live "playing now" counter on the start screen */
.online-count { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px;
  color: var(--muted); margin-top: 2px; }
.online-count b { color: var(--lime); font-weight: 800; }
.oc-dot { width: 8px; height: 8px; border-radius: 50%; background: #51cf66; box-shadow: 0 0 7px #51cf66;
  animation: ocpulse 1.6s ease-in-out infinite; flex: 0 0 auto; }
.oc-dot.off { background: #6a7a6e; box-shadow: none; animation: none; }
@keyframes ocpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* $MYTHALON holder-status line on the start screen */
.holder-status { font-size: 11px; text-align: center; color: var(--muted); line-height: 1.45; margin-top: -2px;
  padding: 6px 10px; border-radius: 8px; border: 1px dashed rgba(184,242,95,.22); background: rgba(13,22,15,.35); }
.holder-status b { color: var(--text); }
.holder-status.checking { color: #7ad0ff; border-color: rgba(122,208,255,.35); border-style: solid; }
.holder-status.active { border-style: solid; border-color: rgba(255,210,74,.5); background: rgba(255,210,74,.07);
  color: var(--text); box-shadow: 0 0 18px rgba(255,210,74,.12); }
.holder-status.recheck { cursor: pointer; }
.holder-status.recheck:hover { border-color: var(--lime); color: var(--text); }

/* responsive HUD for small / phone screens */
@media (max-width: 820px) {
  #party-dock { width: 150px; top: 38%; padding: 7px 8px; }
  .dockrow img { width: 22px; height: 22px; }
  #topright { width: 150px; }
  #minimap { width: 130px; height: 108px; }
  #title { font-size: 16px; letter-spacing: 2px; }
  .panel { width: min(440px, 94vw); max-height: 78vh; padding: 12px; }
  #chat { width: 200px; bottom: 150px; }
  #chatlog { max-height: 84px; }
  #hotbar { bottom: 14px; gap: 5px; }
  /* on touch, lift the hotbar ABOVE the joystick + action buttons so nothing overlaps */
  body.touch #hotbar { bottom: 156px; transform: translateX(-50%) scale(.72); transform-origin: bottom center; }
  body.touch #chat { bottom: 232px; }
  #toasts { bottom: 150px; }
  body.touch #toasts { bottom: 232px; }
  #big-banner .bb-title { font-size: 32px; }
}
@media (max-width: 560px) {
  #party-dock { display: none; }   /* too cramped on a phone — use the Party panel */
  #topleft { width: 150px; }
  #minimap { width: 104px; height: 88px; }
}