:root {
  --bg: #0a0c10;
  --ink: #cdd6e3;
  --dim: #6b7686;
  --accent: #ffcf6b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.hidden { display: none !important; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}
#game { display: block; width: 100vw; height: 100vh; cursor: crosshair; }

/* HUD */
#hud {
  position: fixed; top: 24px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 10px 14px;
  pointer-events: none;
  text-shadow: 0 1px 2px #000a;
}
#hud-left, #hud-right { display: flex; align-items: center; min-width: 0; }
#hud-left { flex: 1 1 auto; }
#hud-right { flex: 0 0 auto; justify-content: flex-end; }
#hud b { color: var(--accent); }
#hud .step { letter-spacing: 1px; }
#hud #loc { margin-left: 14px; color: var(--dim); }
#hud #terrain { text-transform: capitalize; color: var(--dim); margin-left: 14px; }
#hud #inv { color: var(--ink); }
#hud #stats {
  display: inline-block; flex: 0 0 32ch; width: 32ch;
  color: var(--dim); margin-left: 14px; white-space: pre;
  overflow: hidden; text-align: left; font-variant-numeric: tabular-nums;
}
#hud #stats.capped { flex-basis: 42ch; width: 42ch; }
#hud #stats.warn { color: #e0564f; }

/* --- market ticker marquee (P7) --- */
#ticker {
  position: fixed; top: 0; left: 0; right: 0; height: 24px; z-index: 13;
  overflow: hidden; white-space: nowrap; line-height: 24px;
  background: rgba(6,8,12,0.95); border-bottom: 1px solid #2c313b;
}
#ticker.hidden { display: none; }
#ticker-track { display: inline-flex; will-change: transform; animation: tick-scroll 40s linear infinite; }
.tick-run { display: inline-flex; }
.tick-seg { padding: 0 16px; color: var(--dim); font-size: 12px; }
.tick-up { color: #6fae6f; }
.tick-down { color: #d6685c; }
.tick-hot { color: var(--accent); }
@keyframes tick-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 4px;
  background: rgba(10,12,16,0.82); color: var(--accent);
  text-shadow: 0 1px 2px #000a; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
#toast.show { opacity: 1; }

#hint {
  position: fixed; bottom: 10px; left: 0; right: 0;
  text-align: center; color: var(--dim);
  pointer-events: none; text-shadow: 0 1px 2px #000a;
}
#hint b { color: var(--ink); }

/* Intro / menu / server-list overlays */
#intro, #menu, #access, #selfhost, #serverlist {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 40%, #11151c 0%, #05070a 100%);
  z-index: 10; transition: opacity .6s ease;
}
#menu { flex-direction: column; }
#intro.gone, #menu.gone, #access.gone, #selfhost.gone, #serverlist.gone { opacity: 0; pointer-events: none; }

.menu-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.menu-btns button { width: 240px; }
.srv-list { display: flex; flex-direction: column; gap: 10px; margin: 0 auto 18px; min-width: 300px; }
.srv-row {
  display: flex; align-items: center; gap: 12px;
  background: #11151c; border: 1px solid #2c313b; border-radius: 6px; padding: 10px 14px;
}
.srv-row .srv-name { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; color: var(--ink); letter-spacing: 1px; }
.srv-host { color: var(--dim); font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
.srv-pop { color: var(--dim); font-size: 12px; }
.srv-row button { padding: 6px 16px; }
.srv-row button:disabled { background: #2c313b; color: var(--dim); cursor: default; filter: none; }
button.ghost { background: transparent; color: var(--dim); border: 1px solid #2c313b; }
button.ghost:hover { color: var(--ink); border-color: var(--accent); filter: none; }

.card { text-align: center; }
.card h1 {
  font-size: 44px; letter-spacing: 8px; font-weight: 800;
  color: var(--ink); margin-bottom: 12px;
}
.card p { color: var(--dim); margin-bottom: 22px; }
.card input {
  display: block; margin: 0 auto 14px; width: 220px;
  font: inherit; text-align: center; color: var(--ink);
  background: #11151c; border: 1px solid #2c313b; border-radius: 4px; padding: 9px 12px;
}
.card input:focus { outline: none; border-color: var(--accent); }
.card button {
  font: inherit; letter-spacing: 2px; text-transform: uppercase;
  color: #05070a; background: var(--accent);
  border: 0; border-radius: 4px; padding: 10px 22px; cursor: pointer;
}
.card button:hover { filter: brightness(1.08); }
#intro .hint { min-height: 16px; margin: 10px 0 0; font-size: 12px; color: var(--dim); }
#intro .hint.warn { color: #e0564f; }

/* --- faceplate / splash --- */
.splash { text-align: center; display: flex; flex-direction: column; align-items: center; }
#brand-title { font-size: clamp(34px, 7vw, 58px); letter-spacing: 10px; font-weight: 800; color: var(--accent); margin: 0; }
.brand-rule { width: 180px; height: 1px; background: linear-gradient(90deg, transparent, #3a4250 20%, var(--accent) 50%, #3a4250 80%, transparent); margin: 12px 0 8px; }
#brand-subtitle { color: var(--dim); letter-spacing: 2px; margin: 0 0 8px; font-size: 15px; }
#hero-canvas { display: block; margin: 6px auto 10px; max-width: min(460px, 84vw); height: auto; image-rendering: auto; }
.enter-btn {
  font: inherit; font-size: 20px; letter-spacing: 6px; text-transform: uppercase; cursor: pointer;
  color: var(--accent); background: rgba(15,19,26,.7); border: 2px solid var(--accent); border-radius: 8px;
  padding: 12px 56px; box-shadow: 0 0 24px rgba(255,207,107,.12);
}
.enter-btn:hover { background: var(--accent); color: #07090d; }
.brand-links { display: flex; gap: 18px; margin-top: 14px; }
.brand-links a { color: var(--dim); text-decoration: none; font-size: 13px; letter-spacing: 1px; border-bottom: 1px solid transparent; }
.brand-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.brand-tagline { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(680px, 90vw);
  text-align: center; color: var(--dim); font-size: 12px; line-height: 1.5; margin: 0; opacity: .8; }

/* --- access lanes --- */
.lanes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px auto 16px; }
button.lane {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  width: 230px; padding: 16px 18px; text-transform: none; letter-spacing: 0;
  color: var(--ink); background: #11151c; border: 1px solid #2c313b; border-radius: 10px; cursor: pointer;
}
button.lane:hover { border-color: var(--accent); filter: none; }
.lane-title { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--accent); }
.lane-sub { font-size: 12px; color: var(--dim); }
/* primary-ish call to action button (self-host) */
.host-btn {
  display: inline-block; margin: 2px auto 14px; padding: 11px 22px; cursor: pointer;
  font: inherit; letter-spacing: 1px; text-decoration: none; text-align: center;
  color: var(--accent); background: rgba(20,24,31,.85); border: 1px solid var(--accent); border-radius: 8px;
}
.host-btn:hover { background: var(--accent); color: #07090d; filter: none; }
.srv-empty { color: var(--dim); padding: 14px; text-align: center; }

/* self-host how-to panel */
.card.narrow { width: min(440px, 90vw); }
.howto { text-align: left; margin: 6px 0 16px; }
.howto p { color: var(--ink); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.howto b { color: var(--accent); font-weight: 700; }
.howto code { color: var(--accent); background: #11151c; border: 1px solid #2c313b; border-radius: 4px; padding: 1px 5px; font-size: 12px; }

#loading {
  position: fixed; bottom: 14px; right: 14px; color: var(--dim); z-index: 11;
}
#loading.gone { display: none; }

/* --- mobile touch controls (shown on coarse pointer / small screens) --- */
#touch, #hint-touch { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  #touch {
    display: flex; align-items: flex-end; gap: 14px;
    position: fixed; right: 12px; bottom: 16px; z-index: 12;
    transition: opacity .5s ease;
  }
  #hint-touch { display: block; }
  #hint { display: none; }                         /* keyboard hints are useless on touch */
  #hud .hud-btn { display: none; }                 /* actions live in the touch pad, not the cramped top bar */
  #hud #terrain { display: none; }
  #hud { padding: 8px 10px; font-size: 11px; }
  #hud-left { flex: 1 1 auto; }
  #hud-right { flex: 0 0 auto; }
  #hud #loc { display: inline-block; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  #hud #stats, #hud #stats.capped { flex-basis: 22ch; width: 22ch; margin-left: 8px; }
  #chat { width: min(62vw, 300px); bottom: 30px; }
  #chat-log { max-height: 22vh; font-size: 12px; }
  #chat-input { padding: 4px 8px; font-size: 12px; }
}
body.idle #touch, body.idle #hint, body.idle #hint-touch { opacity: 0.12; }
body.editing #touch { display: none; }

/* action buttons: a hand-drawn icon (dim, behind) + the desktop key on top */
#touch .acts { display: flex; flex-direction: column; gap: 6px; }
#touch .act {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,26,36,0.72); border: 1px solid #3a4252;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#touch .act:active { background: rgba(255,207,107,0.3); }
#touch .act-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; color: var(--ink); opacity: 0.42; }
#touch .act kbd { position: relative; z-index: 1; font: inherit; font-weight: 800; font-size: 14px; color: var(--accent); text-shadow: 0 1px 2px #000; }

/* movement joystick (replaces the 6-arrow d-pad) */
#joystick {
  position: relative; width: 116px; height: 116px; border-radius: 50%;
  background: rgba(20,26,36,0.55); border: 1px solid #3a4252;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#joy-nub {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(255,207,107,0.5); border: 1px solid var(--accent);
  pointer-events: none; transition: transform .05s linear;
}

/* footer touch hint (replaces the keyboard #hint on mobile) */
#hint-touch {
  position: fixed; bottom: 10px; left: 0; right: 0; text-align: center;
  color: var(--dim); pointer-events: none; text-shadow: 0 1px 2px #000a; font-size: 11px;
}
#hint-touch b { color: var(--accent); }

/* --- builder + admin login --- */
#login {
  position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 14;
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 6px; padding: 10px 12px;
  display: flex; gap: 8px; align-items: center;
}
#login.hidden, #builder.hidden { display: none; }
#login input { font: inherit; background: #11151c; color: var(--ink); border: 1px solid #2c313b; border-radius: 4px; padding: 6px 8px; }
#login button, #builder button {
  font: inherit; color: var(--ink); background: #1b2230; border: 1px solid #2c313b; border-radius: 4px;
  padding: 4px 8px; cursor: pointer;
}
#login button:hover, #builder button:hover { border-color: var(--accent); }
#login #b-login-msg { color: var(--dim); }

#builder {
  position: fixed; left: 12px; bottom: 40px; z-index: 14; width: 320px;
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 8px; padding: 10px 12px;
  font-size: 12px;
}
#builder .b-head { color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; }
#builder .b-head span { color: var(--dim); letter-spacing: 0; font-size: 11px; }
#builder .b-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
#builder .b-row label { color: var(--dim); }
#builder button.on { background: var(--accent); color: #05070a; border-color: var(--accent); }
#builder #b-terr button { width: 20px; height: 20px; padding: 0; border-radius: 3px; }
#builder #b-terr button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
#builder #b-tick { width: 40px; font: inherit; background: #11151c; color: var(--ink); border: 1px solid #2c313b; border-radius: 3px; padding: 2px 4px; }
#builder button.wide { flex: 1; }
#builder #b-reset.on { background: #5a2b2b; color: var(--ink); border-color: #e0564f; }

/* --- Game-Boy battle screen --- */
#battle {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 8, 0.78);
}
#battle.hidden { display: none; }
.gb-screen {
  --gb0: #0f380f; --gb1: #306230; --gb2: #8bac0f; --gb3: #c6de8b;
  width: min(520px, 92vw);
  background: var(--gb3);
  color: var(--gb0);
  border: 6px solid #0b240b;
  border-radius: 10px;
  box-shadow: 0 0 0 4px #1b1f16, 0 18px 60px #000a, inset 0 0 0 3px var(--gb1);
  padding: 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  image-rendering: pixelated;
}
.gb-row { display: flex; align-items: center; gap: 14px; }
.gb-row-player { justify-content: flex-end; }
.gb-side { display: flex; flex-direction: column; gap: 4px; }
.gb-name { font-weight: 800; letter-spacing: 2px; }
.gb-pips { font-size: 18px; letter-spacing: 2px; color: var(--gb1); }
.gb-cards { font-size: 15px; letter-spacing: 1px; min-height: 18px; color: var(--gb1); }
.gb-cards:empty { display: none; }
.pb-controls { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.pb-controls button { min-width: 36px; }
.pb-controls input[type=range] { flex: 1 1 80px; min-width: 80px; }
.pb-controls #pb-pos { font-size: 13px; min-width: 44px; text-align: center; color: var(--gb1); }
.gb-row canvas {
  width: 128px; height: 128px;
  background: var(--gb2);
  border: 3px solid var(--gb0);
  border-radius: 6px;
  image-rendering: pixelated;
}
.gb-msg {
  margin: 12px 0; padding: 10px 12px; min-height: 2.6em;
  background: var(--gb2); border: 3px solid var(--gb0); border-radius: 6px;
  font-weight: 700;
}
.gb-menu { display: flex; gap: 8px; }
.gb-menu.hidden { display: none; }
.gb-menu button {
  flex: 1; font: inherit; font-weight: 800; letter-spacing: 1px;
  color: var(--gb3); background: var(--gb0);
  border: 3px solid var(--gb1); border-radius: 6px;
  padding: 10px 6px; cursor: pointer;
}
.gb-menu button:hover { background: var(--gb1); }
.gb-menu kbd {
  font: inherit; font-size: 11px; opacity: 0.7; border: 1px solid var(--gb2);
  border-radius: 3px; padding: 0 4px; margin-left: 4px;
}
.gb-ic { fill: currentColor; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.gb-run {
  display: block; width: 100%; margin-top: 8px; font: inherit; letter-spacing: 1px; cursor: pointer;
  color: var(--gb0); background: var(--gb3); border: 3px solid var(--gb1); border-radius: 6px; padding: 6px;
}
.gb-run:hover { filter: brightness(1.05); }

/* --- game-select / offer overlays, hosting banner, challenge button --- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4,6,8,0.78); z-index: 21; }
.overlay.hidden { display: none; }
.dim { color: var(--dim); }
.gs-list { display: flex; flex-direction: column; gap: 8px; margin: 0 auto 14px; min-width: 280px; }
.gs-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
/* button.gs-opt (not .gs-opt) so it out-specifies the gold `.card button` rule */
button.gs-opt {
  font: inherit; letter-spacing: 1px; color: var(--ink);
  background: #11151c; border: 1px solid #2c313b; border-radius: 4px; padding: 9px 14px; cursor: pointer;
}
button.gs-opt:hover { border-color: var(--accent); }
button.gs-opt.on {
  background: #171d26; color: var(--accent); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px rgba(255,207,107,.18);
} /* selected option, not the primary action */
button.gs-opt:disabled { background: #11151c; color: var(--dim); border-color: #2c313b; cursor: default; }
.gs-note { color: var(--dim); letter-spacing: 1px; font-size: 12px; padding: 4px 8px; }
.gs-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#gs-go:disabled { background: #2c313b; color: var(--dim); cursor: default; filter: none; }

/* character picker (in the join card): the player sprite drawn in each skin */
.char-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 auto 16px; }
button.char-sw { width: 78px; height: 102px; padding: 2px; border-radius: 8px; border: 2px solid #2c313b; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 30%, #1b212b 0%, #0e1218 100%); }
button.char-sw canvas { display: block; width: 72px; height: 96px; }
button.char-sw:hover { border-color: var(--ink); }
button.char-sw.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

#hosting {
  position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 14;
  display: flex; gap: 10px; align-items: center;
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 6px; padding: 8px 12px;
}
#hosting.hidden { display: none; }
#hosting-msg { color: var(--accent); }

.hud-btn {
  font: inherit; pointer-events: auto; cursor: pointer; margin-right: 10px;
  color: var(--ink); background: #1b2230; border: 1px solid #2c313b; border-radius: 4px; padding: 3px 8px;
}
.hud-btn:hover { border-color: var(--accent); }
.hud-btn kbd { font: inherit; font-size: 11px; opacity: 0.7; border: 1px solid #2c313b; border-radius: 3px; padding: 0 4px; margin-left: 2px; }

/* wallet readout + inventory panel */
#hud-wallet { color: var(--dim); margin-right: 10px; }
#hud-wallet b { color: var(--accent); }
#inventory {
  position: fixed; right: 12px; bottom: 40px; z-index: 15; width: 240px; max-height: 60vh; overflow-y: auto;
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 8px; padding: 10px 12px; font-size: 12px;
}
#inventory.hidden { display: none; }
.inv-head { display: flex; justify-content: space-between; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; }
.inv-head span { color: var(--dim); letter-spacing: 0; font-size: 11px; }
.inv-x { font: inherit; font-size: 20px; line-height: 1; color: var(--dim); background: transparent; border: 0; cursor: pointer; padding: 2px 8px; -webkit-tap-highlight-color: transparent; }
.inv-x:hover, .inv-x:active { color: var(--accent); }
.inv-wallet { color: var(--dim); margin-bottom: 10px; }
.inv-wallet b { color: var(--accent); }
.inv-list { display: flex; flex-direction: column; gap: 6px; }
.inv-empty { color: var(--dim); }
.inv-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #11151c; border: 1px solid #2c313b; border-radius: 4px; cursor: pointer; }
.inv-item:hover { border-color: var(--accent); }
.inv-rare { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.inv-icon { width: 18px; height: 18px; flex: none; image-rendering: pixelated; vertical-align: middle; }
.inv-place { font: inherit; font-size: 11px; letter-spacing: 1px; color: var(--accent); background: #1b2230; border: 1px solid #2c313b; border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.inv-place:hover { border-color: var(--accent); }
.inv-name { flex: 1; color: var(--ink); }
.inv-qty { color: var(--dim); }

/* --- item detail panel (opened by clicking a bag row) --- */
.idet-card { position: relative; min-width: min(300px, 88vw); max-width: 340px; padding: 26px 24px 22px; }
.idet-x { position: absolute; top: 6px; right: 8px; }
.idet-icon {
  width: 76px; height: 76px; margin: 2px auto 12px; display: flex; align-items: center; justify-content: center;
  background: #11151c; border: 1px solid #2c313b; border-radius: 8px;
}
.idet-img { width: 56px; height: 56px; image-rendering: pixelated; }
.idet-dot { width: 30px; height: 30px; border-radius: 50%; }
.idet-name { font-size: 19px; letter-spacing: 2px; color: var(--ink); margin-bottom: 9px; }
.idet-tags { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.idet-chip { font-size: 11px; letter-spacing: 1px; text-transform: capitalize; border: 1px solid currentColor; border-radius: 10px; padding: 1px 9px; }
.idet-chip.hidden { display: none; }
.idet-meta { color: var(--dim); font-size: 12px; }
.idet-flavor { color: var(--ink); font-style: italic; opacity: 0.82; line-height: 1.5; margin: 0 auto 18px; max-width: 290px; }
.idet-actions button { font: inherit; letter-spacing: 2px; }

/* --- marketplace: managed-seller stall (sell-setup / browse / banner) --- */
.vendor-card { min-width: min(360px, 92vw); }
.vendor-list { display: flex; flex-direction: column; gap: 6px; margin: 0 auto 14px; max-height: 46vh; overflow-y: auto; text-align: left; }
.sell-row, .buy-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #11151c; border: 1px solid #2c313b; border-radius: 4px; }
.sell-cb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: none; }
.sell-price { width: 60px; font: inherit; text-align: right; color: var(--ink); background: #0a0c10; border: 1px solid #2c313b; border-radius: 3px; padding: 3px 5px; }
.sell-price:disabled { opacity: 0.4; }
.sell-price:focus { outline: none; border-color: var(--accent); }
.sell-g { color: var(--dim); }
.buy-price { color: var(--accent); min-width: 46px; text-align: right; }
.card .buy-btn { font: inherit; letter-spacing: 1px; padding: 5px 12px; }
.buy-btn:disabled, #sell-go:disabled, #craft-go:disabled { background: #2c313b; color: var(--dim); cursor: default; filter: none; }

/* --- NPC dealer shop (P7): BUY / TRADE-IN tabs --- */
.shop-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 12px; }
.shop-tab { font: inherit; letter-spacing: 1px; color: var(--ink); background: #11151c; border: 1px solid #2c313b; border-radius: 4px; padding: 6px 18px; cursor: pointer; }
.shop-tab:hover { border-color: var(--accent); }
.shop-tab.on { background: var(--accent); color: #05070a; border-color: var(--accent); }
.buy-row.shop-hot { border-color: var(--accent); }

#selling {
  position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 14;
  display: flex; gap: 10px; align-items: center;
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 6px; padding: 8px 12px;
}
#selling.hidden { display: none; }
#selling-msg { color: var(--accent); }

/* --- crafting (cook) panel: 3×3 grid --- */
.craft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 168px; margin: 0 auto 10px; }
.craft-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; color: var(--dim); background: #0a0c10; border: 1px dashed #2c313b; border-radius: 6px; cursor: pointer; }
.craft-cell.filled { color: var(--ink); background: #11151c; border-style: solid; }
.craft-cell.on { border-color: var(--accent); }
.craft-cell .inv-rare { width: 12px; height: 12px; }
.craft-cellq { font-size: 12px; }
.craft-qty { display: flex; align-items: center; gap: 6px; justify-content: center; min-height: 28px; margin-bottom: 10px; }
.craft-qty .inv-name { flex: none; }
.craft-qtyin { width: 52px; font: inherit; text-align: center; color: var(--ink); background: #0a0c10; border: 1px solid #2c313b; border-radius: 3px; padding: 2px 4px; }
.craft-qtyin:focus { outline: none; border-color: var(--accent); }
.craft-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #11151c; border: 1px solid #2c313b; border-radius: 4px; }
.craft-add { font: inherit; font-weight: 800; line-height: 1; color: var(--accent); background: #1b2230; border: 1px solid #2c313b; border-radius: 4px; padding: 2px 10px; cursor: pointer; }
.craft-add:hover { border-color: var(--accent); }
.craft-add:disabled { color: var(--dim); border-color: #2c313b; cursor: default; }
.craft-out { display: flex; justify-content: center; margin: 10px 0 4px; }
.craft-prize { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #11151c; border: 1px solid #2c313b; border-radius: 6px; }
#craft-rtitle.craft-new { color: var(--accent); }
#craft-rtitle.craft-fizzle { color: var(--dim); }

/* --- chat (P5): per-level chat log + input, bottom-left --- */
#chat {
  position: fixed; left: 12px; bottom: 40px; z-index: 13;
  width: min(360px, 44vw); pointer-events: none;
}
body.editing #chat { display: none; }                  /* the builder panel owns this corner */
#chat-log {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 32vh; overflow: hidden; margin-bottom: 6px;
  text-shadow: 0 1px 2px #000c; transition: opacity .4s ease;
}
body.idle #chat-log { opacity: 0.18; }
#chat.chat-active #chat-log { opacity: 1; }
.chat-line { line-height: 1.45; word-break: break-word; }
.chat-line.chat-level { color: var(--ink); }
.chat-line.chat-world { color: #6fc3ff; }               /* world-wide: cyan */
.chat-line.chat-whisper { color: #c9a6ff; }             /* private: violet */
.chat-line.chat-emote { color: #8bc98b; font-style: italic; }
.chat-line.chat-sys { color: var(--dim); font-style: italic; }
#chat-input-row { pointer-events: auto; transition: opacity .25s ease; }
#chat-input-row.hidden { display: none; }
#chat-input {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(10,12,16,0.92); border: 1px solid #2c313b; border-radius: 4px; padding: 6px 9px;
}
#chat-input:focus { outline: none; border-color: var(--accent); }