/* Game layout + screen-specific styling. Tokens and reusable .ui-* components live in /ui/theme.css.
   Legacy class names (.box .it .list .desc .money .card .tabs .typetag .toast .mv) are kept as aliases
   so code on other branches keeps rendering in the new look until it migrates (see docs/design/ui.md). */
:root {
  /* legacy variable aliases (older modules use these names) */
  --gold-legacy: var(--gold); --dim: var(--text-dim); --edge: var(--frame); --edge2: var(--frame-soft);
  --bg: #0a1229;
}
* { box-sizing: border-box; }
/* NB: no font-size on html here: theme.css owns the root UI scale (round 4 fix: this rule used to reset html to 16px,
   which silently disabled the clamp() scale and made 4K "everything small"). */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
body { font-size: 1rem; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: auto; }
.hidden { display: none !important; }
button, input, select { font-family: inherit; font-size: inherit; }
/* legacy: plain <button>/<input> inside the game UI pick up the system look */
#ui button:not([class]), .screen button:not([class]), #ui .acts button { all: unset; }
#ui button:not([class]), .screen button:not([class]), #ui .acts button {
  --b-c: var(--text); --b-line: rgba(255, 255, 255, 0.22); --b-fill: rgba(255, 255, 255, 0.1); --b-drop: rgba(5, 10, 30, 0.35); --ch: 0;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; box-sizing: border-box;
  font: 800 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: 0.02em; color: var(--b-c); background: var(--b-fill); cursor: pointer;
  border: 2px solid var(--b-line); border-radius: var(--r-pill); box-shadow: 0 2px 0 var(--b-drop); padding: 0.36em 1em; text-shadow: none;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-pop);
}
#ui button:not([class])::before, .screen button:not([class])::before, #ui .acts button::before { content: none; }
#ui button:not([class]):hover:not(:disabled), #ui .acts button:hover:not(:disabled) { --b-line: rgba(255, 255, 255, 0.55); --b-fill: var(--sel-bg); --b-drop: #1d3a80; color: #fff; transform: translateY(-1px); }
#ui button:disabled { opacity: 0.38; cursor: default; }
#ui input:not([class]) { font: 700 var(--fs-sm) var(--font-ui); color: var(--text); background: rgba(5, 12, 34, 0.5); border: 2px solid var(--frame-soft); border-radius: var(--r-sm); padding: 0.4em 0.65em; outline: none; }
#ui input:not([class]):focus { border-color: var(--gold); }
.box { /* legacy panel → framed panel look */
  position: relative; background: var(--panel-bg); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
  border: var(--panel-line); border-radius: var(--r-lg); box-shadow: var(--shadow-2), var(--panel-hi); padding: var(--sp-3) var(--sp-4);
}
.box.ui-dialog { border: 3px solid #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 2px rgba(59, 114, 217, 0.55), var(--shadow-3); background: linear-gradient(180deg, #fffefa, #fbf5e7); -webkit-backdrop-filter: none; backdrop-filter: none; }

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#plates { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* ===================================================================== title / login */
.screen { position: fixed; inset: 0; z-index: var(--z-screen); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3vh, 32px); padding: 16px; overflow: hidden; }
#login { background: #bfe3f5; }
#login .backdrop { position: absolute; inset: 0; z-index: -1; }
#login .backdrop svg { width: 100%; height: 100%; display: block; filter: saturate(0.9); animation: title-drift 40s ease-in-out infinite alternate; transform-origin: 65% 70%; }
#login .backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(6, 12, 15, 0.15), rgba(6, 12, 15, 0.82) 100%), linear-gradient(180deg, rgba(6, 12, 15, 0.4), transparent 30%, transparent 70%, rgba(6, 12, 15, 0.7)); }
@keyframes title-drift { to { transform: scale(1.06) translateX(-1.5%); } }
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.motes i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffe9b8; box-shadow: 0 0 10px 2px rgba(255, 228, 170, 0.6); opacity: 0; animation: mote 14s linear infinite; }
.motes i:nth-child(1) { left: 12%; animation-delay: 0s; } .motes i:nth-child(2) { left: 24%; animation-delay: 3s; animation-duration: 18s; }
.motes i:nth-child(3) { left: 38%; animation-delay: 6s; } .motes i:nth-child(4) { left: 52%; animation-delay: 1.5s; animation-duration: 16s; }
.motes i:nth-child(5) { left: 63%; animation-delay: 8s; } .motes i:nth-child(6) { left: 71%; animation-delay: 4.5s; animation-duration: 20s; }
.motes i:nth-child(7) { left: 80%; animation-delay: 10s; } .motes i:nth-child(8) { left: 88%; animation-delay: 2s; animation-duration: 17s; }
.motes i:nth-child(9) { left: 45%; animation-delay: 11s; width: 3px; height: 3px; } .motes i:nth-child(10) { left: 93%; animation-delay: 7s; width: 3px; height: 3px; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 0.9; } 80% { opacity: 0.5; } 100% { transform: translate(40px, -70vh); opacity: 0; } }
.title { text-align: center; z-index: 2; animation: ui-rise 1.2s var(--ease-out) both; }
.title .t2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(0.85rem, 1.6vw, 1.25rem); letter-spacing: 0.02em; color: var(--text); text-shadow: var(--text-shadow); margin-right: -0.42em; }
.title .t1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-hero); line-height: 1; letter-spacing: 0.02em; margin-right: -0.18em; color: #f7eedb;
  background: linear-gradient(180deg, #fffaf0 0%, #f0e2c2 48%, #c9a868 52%, #f2dfb2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(30, 20, 8, 0.6)) drop-shadow(0 0 30px rgba(255, 220, 150, 0.25)); padding: 0.08em 0; }
.title .ui-rule { width: min(26rem, 70vw); margin: 0.3rem auto 0.5rem; }
.title .t3 { font-family: var(--font-prose); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.4rem); color: var(--text); text-shadow: var(--text-shadow); letter-spacing: 0.03em; }
.login-box { width: min(25rem, 100%); display: flex; flex-direction: column; gap: 0.7rem; padding: var(--sp-5); z-index: 2; animation: ui-rise 1.2s 0.25s var(--ease-out) both; }
.login-box .ui-btn--lg { margin-top: 0.3rem; }
.login-box .small { color: var(--text-dim); font-family: var(--font-prose); font-size: 1.02rem; line-height: 1.45; text-align: center; margin-top: 0.3rem; }
#login-err { color: var(--bad); min-height: 1em; font-size: var(--fs-sm); text-align: center; }
#login-err:empty { display: none; }
.credit { position: absolute; bottom: 10px; left: 16px; right: 16px; text-align: center; color: rgba(255, 255, 255, 0.72); font-size: var(--fs-2xs); letter-spacing: 0.03em; z-index: 2; }

/* ---------- starter select */
#starter { background: linear-gradient(180deg, #8fd0f0 0%, #cdeaf7 55%, #f6e9c8 100%); }
.starter-box { width: min(60rem, 100%); max-height: 94vh; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); animation: ui-rise 0.6s var(--ease-out) both; }
.starter-box .ui-panel__head { margin-bottom: 0; }
.starter-sub { margin-top: -0.4rem; }
#starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: var(--sp-3); overflow-y: auto; padding: 6px 4px 8px; }
.starter-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.7rem 0.4rem 0.6rem; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, #fffdf7, #f4ecda); color: var(--on-surface); border: 2px solid #fff; border-radius: var(--r-md); box-shadow: var(--shadow-1), 0 0 0 1px rgba(31, 42, 74, 0.12);
  transition: transform var(--t-med) var(--ease-pop), border-color var(--t-med), box-shadow var(--t-med); font-weight: 800; letter-spacing: 0.01em; }
.starter-card img { width: 4.6rem; height: 4.6rem; image-rendering: pixelated; display: block; border-radius: var(--r-sm); box-shadow: 0 0 0 2px #fff; background: linear-gradient(180deg, #dcecfb, #c5ddf4); transition: transform var(--t-med) var(--ease-back); }
.starter-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2), 0 0 0 3px var(--poke-blue-hi); }
.starter-card:hover img { transform: scale(1.05); }
.starter-card.sel { box-shadow: var(--shadow-2), 0 0 0 3px var(--poke-yellow), 0 0 22px var(--gold-glow); background: linear-gradient(180deg, #fff8dc, #fde9a8); }
.starter-card.sel::after { content: none; }
.starter-card .types { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.starter-card .types .typetag, .starter-card .types .ui-type { margin: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.starter-box .row { gap: var(--sp-3); flex-wrap: wrap; }
.starter-box .row input { flex: 1; min-width: 8rem; }

/* ===================================================================== HUD: top status ribbon (dungeon) */
#hud-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: var(--z-hud); pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 1.1rem; padding: 0.45rem 1.6rem 0.55rem; margin-top: 0.4rem; background: var(--ribbon-bg); border: 2px solid rgba(255, 255, 255, 0.14); border-top: 0; border-radius: var(--r-pill); box-shadow: var(--shadow-2), var(--panel-hi); }
#hud-top::after { content: none; }
#hud-top .fl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); letter-spacing: 0.01em; color: var(--text); line-height: 1; }
#hud-top .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.85; }
#hud-top .lv { font-weight: 800; font-size: var(--fs-md); }
#hud-top .lv { position: relative; }
#hud-top .lv-exp { position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: rgba(0,0,0,.45); border-radius: 2px; overflow: hidden; pointer-events: auto; }
#hud-top .lv-exp > i { display: block; height: 100%; width: 0; background: var(--exp, #9fc9ea); transition: width .4s ease-out; }
#hud-top .lv small, #hud-top .k { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); color: var(--gold); font-weight: 900; margin-right: 0.3em; text-transform: uppercase; }
#hud-top .hpg { display: flex; flex-direction: column; gap: 3px; }
#hud-top .hpn { font-weight: 900; font-size: var(--fs-lg); letter-spacing: 0.03em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
#hud-top .hpn small { font-size: 0.72em; color: var(--text-dim); letter-spacing: 0.04em; }
#hud-top .ui-bar { width: clamp(8rem, 16vw, 15rem); }
#hud-top .belly { display: flex; align-items: center; gap: 0.4em; }
#hud-top .belly .ui-bar { width: 4.5rem; }
#hud-top .belly .bv { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 1.6em; }

/* ---------- team list (OT2-style: floating text, no boxes) */
#team { position: absolute; top: var(--gutter); left: var(--gutter); display: flex; flex-direction: column; gap: 0.55rem; pointer-events: none; z-index: var(--z-hud); }
.tm { display: grid; grid-template-columns: auto 1fr; gap: 0 0.6rem; align-items: center; min-width: 13rem; padding: 0.3rem 1.6rem 0.3rem 0.3rem; text-shadow: var(--text-shadow);
  background: linear-gradient(180deg, rgba(24, 38, 80, 0.84), rgba(15, 25, 54, 0.84)); border: 2px solid rgba(255, 255, 255, 0.12); border-left: 4px solid var(--verd); border-radius: var(--r-md); padding-right: 0.9rem; box-shadow: var(--shadow-1); transition: opacity var(--t-slow), filter var(--t-slow); }
.tm:first-child { border-left-color: var(--gold); }
.tm img { width: 2.7rem; height: 2.7rem; image-rendering: pixelated; border-radius: var(--r-sm); background: linear-gradient(180deg, #dcecfb, #c5ddf4); box-shadow: 0 0 0 2px #fff; grid-row: span 2; }
.tm .nm { font-weight: 900; font-size: var(--fs-sm); letter-spacing: 0.02em; display: flex; align-items: baseline; gap: 0.4em; }
.tm .nm .lvl { font-size: var(--fs-2xs); color: var(--gold); letter-spacing: 0.1em; }
.tm .nm .hpv { margin-left: auto; font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tm .ui-bar { width: 100%; }
.tm .hpb { width: 100%; height: 0.32em; } /* legacy */
.tm.down { opacity: 0.45; filter: grayscale(1); }
.tm .st { grid-column: 2; display: flex; gap: 3px; margin-top: 2px; }

/* ---------- minimap + clock cluster */
#minimap-frame { position: absolute; top: var(--gutter); right: var(--gutter); z-index: var(--z-hud); pointer-events: none; padding: 4px; transition: transform var(--t-slow) var(--ease-out); }
#minimap-frame:has(> #minimap.hidden) { display: none; }
#minimap { width: clamp(150px, 15vw, 560px); height: auto; aspect-ratio: auto; image-rendering: pixelated; opacity: 0.95; pointer-events: none; border-radius: var(--r-sm); background: rgba(10, 18, 44, 0.55); }
#minimap[style*="220px"] { width: clamp(150px, 15vw, 560px) !important; }
/* big map (scene sets a vw width on the canvas) → centred modal-like overlay */
#minimap-frame:has(> #minimap[style*="vw"]) { top: 50%; right: 50%; transform: translate(50%, -50%); z-index: var(--z-panel); padding: 10px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--poke-blue), 0 0 0 100vmax rgba(10, 18, 44, 0.5), var(--shadow-3); }
#minimap-frame:has(> #minimap[style*="vw"]) #minimap { width: auto; }
#minimap-frame:has(> #minimap[style*="vw"]) .ui-minimap__compass { font-size: var(--fs-md); }
#clock { display: none !important; } /* text source only; rendered by #clock-face */
#clock-face { position: absolute; top: calc(var(--gutter) + var(--mm-h, 0px)); right: var(--gutter); z-index: var(--z-hud); pointer-events: none; text-align: right; text-shadow: var(--text-shadow); padding: 0.45rem 0.2rem 0 1.5rem; }
#clock-face:empty { display: none; }
#clock-face .tm-time { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); letter-spacing: 0.02em; line-height: 1; display: inline-flex; align-items: center; gap: 0.35em; }
#clock-face .tm-time i { font-style: normal; font-size: 0.65em; color: var(--gold); }
#clock-face .tm-place { font-size: var(--fs-2xs); font-weight: 900; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-dim); margin-top: 0.25rem; }

/* ---------- message log */
#log { position: absolute; left: var(--gutter); bottom: var(--gutter); width: min(33rem, calc(100vw - 2 * var(--gutter))); max-height: 8.5rem; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; z-index: var(--z-hud);
  font-size: var(--fs-md); line-height: 1.38; padding: 0.55rem 3rem 0.55rem 1rem; text-shadow: var(--text-shadow);
  background: linear-gradient(90deg, rgba(15, 25, 54, 0.82), rgba(15, 25, 54, 0.62) 70%, rgba(15, 25, 54, 0)); border: 0; border-left: 4px solid rgba(255, 255, 255, 0.5); border-radius: var(--r-md) 0 0 var(--r-md); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: linear-gradient(180deg, transparent 0, #000 1.6rem); mask: linear-gradient(180deg, transparent 0, #000 1.6rem); }
#log .ln { animation: log-in var(--t-med) var(--ease-out); font-weight: 600; }
#log .ln.old { color: var(--text-dim); font-weight: 400; }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }

/* ---------- move bar (cooldown rings) */
#moves { position: absolute; bottom: var(--gutter); left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: var(--z-hud); }
#log:not(.hidden) ~ #moves { left: auto; right: var(--gutter); transform: none; }
.mv { --tc: #888; --cd: 0; position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 0.55rem; width: clamp(10.5rem, 13vw, 15rem);
  padding: 0.4rem 0.7rem 0.4rem 0.45rem; cursor: pointer; text-shadow: var(--text-shadow);
  background: linear-gradient(180deg, rgba(30, 47, 96, 0.92), rgba(18, 30, 64, 0.94)); border: 2px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-md);
  box-shadow: inset 0 3px 0 -1px var(--tc), var(--shadow-1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--t-fast), border-color var(--t-fast), opacity var(--t-med); overflow: hidden; }
.mv:hover { border-color: var(--frame); transform: translateY(-2px); }
.mv .tbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tc) !important; opacity: 0.95; }
.mv .mring { position: relative; grid-row: span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--tc) 80%, white 20%), color-mix(in srgb, var(--tc) 85%, black 15%)); box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, 0.35); }
.mv .cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(4, 6, 8, 0.78) calc(var(--cd) * 360deg), transparent 0); }
.mv .cd::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--frame-hi) calc((1 - var(--cd)) * 360deg), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--t-fast); }
.mv.is-cd .cd::after { opacity: 1; }
.mv .k { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-md); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.mv.is-ready .mring { animation: mv-ready 500ms var(--ease-out); }
@keyframes mv-ready { 0% { box-shadow: inset 0 0 0 1px var(--tc), 0 0 0 0 var(--tc); } 40% { box-shadow: inset 0 0 0 1px #fff, 0 0 14px 3px var(--tc); } }
.mv .n { font-weight: 900; font-size: var(--fs-sm); line-height: 1.08; letter-spacing: 0.01em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mv.long .n { font-size: var(--fs-xs); letter-spacing: 0; }
.mv .pp { font-size: var(--fs-2xs); color: var(--text-dim); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv .pp b { color: var(--text); font-weight: 800; }
.mv.is-cd .n { color: var(--text-dim); }

/* ---------- interaction prompt (anchored low-centre; tiny, like an in-world cue) */
#prompt { position: absolute; bottom: calc(var(--gutter) + 5.2rem); left: 50%; transform: translateX(-50%); z-index: var(--z-hud-hi); pointer-events: none;
  display: inline-flex; align-items: center; gap: 0.55em; padding: 0.35em 1.2em 0.35em 0.45em; font-weight: 700; font-size: var(--fs-md); white-space: nowrap;
  color: var(--on-surface); text-shadow: none; background: var(--surface); border-radius: var(--r-pill); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(59, 114, 217, 0.5), var(--shadow-2); padding-left: 0.5em; padding-right: 1.3em; font-weight: 800; animation: ui-rise var(--t-med) var(--ease-pop) both; }
#prompt::before, #prompt::after { content: none; }
#prompt b { color: var(--poke-blue-lo); }

/* ---------- chat */
#chat { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + 4.2rem); width: min(24rem, calc(100vw - 2 * var(--gutter))); display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: var(--z-hud); }
#chat-log { max-height: 10rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: var(--fs-sm); line-height: 1.35; text-shadow: var(--text-outline); }
#chat-log > div { animation: log-in var(--t-med) var(--ease-out); padding: 1px 0; }
#chat-log .c-sys { color: var(--text-dim); font-style: italic; font-family: var(--font-prose); font-size: 1.05em; }
#chat-log .c-party { color: var(--other); }
#chat-log b { color: var(--gold); font-weight: 800; }
#chat-input { pointer-events: auto; opacity: 0; transition: opacity var(--t-fast); width: 100%; }
#chat-input:focus, #chat.open #chat-input { opacity: 1; }

/* ---------- party side panel */
#party-panel { position: absolute; top: calc(var(--gutter) + 9.5rem); right: var(--gutter); width: min(17rem, calc(100vw - 2 * var(--gutter))); font-size: var(--fs-sm); z-index: var(--z-panel); animation: ui-side-in var(--t-slow) var(--ease-out) both; }
#party-panel h4 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-md); letter-spacing: 0.02em; color: var(--text); display: flex; align-items: center; gap: 0.5em; }
#party-panel h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--frame), transparent); }
#party-panel .pm { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--frame-soft); }
#party-panel .pm .lead { color: var(--gold); }
#party-panel .row { margin-top: 0.6rem; gap: 0.4rem; }

/* ===================================================================== dialog */
#dialog { position: absolute; left: 50%; bottom: calc(var(--gutter) + 0.5rem); transform: translateX(-50%); width: min(58rem, calc(100vw - 2 * var(--gutter))); min-height: 7.5rem; z-index: var(--z-dialog); padding-top: 1.1rem; animation: dlg-in var(--t-slow) var(--ease-out) both; }
@keyframes dlg-in { from { opacity: 0; transform: translate(-50%, 12px); } }
#dialog-body { min-width: 0; }
#dialog-opts:empty { display: none; }
#dialog-opts button.sel { --b-line: var(--frame-hi); }

/* ===================================================================== generic menu (modal) */
#menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(46rem, calc(100vw - 2 * var(--gutter))); max-height: min(86vh, 46rem); display: flex; flex-direction: column; z-index: var(--z-modal);
  padding: var(--sp-4) var(--sp-5) var(--sp-4); box-shadow: 0 0 0 100vmax rgba(10, 18, 44, 0.36), var(--shadow-3), var(--panel-hi); }
#menu.is-opening { animation: ui-panel-in var(--t-slow) var(--ease-out) both; }
#menu .ui-panel__head { margin-bottom: var(--sp-2); }
#menu .x { flex: none; }
#menu .body { overflow-y: auto; flex: 1; padding: 2px 6px 2px 2px; margin-right: -6px; min-height: 0; }
#menu .foot { display: flex; align-items: center; gap: 1rem; margin: var(--sp-3) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)); padding: 0.55rem var(--sp-5); border-top: 2px solid var(--frame-soft); background: rgba(5, 12, 34, 0.35); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: var(--fs-xs); color: var(--text-dim); }
#menu .foot .help { flex: 1; font-family: var(--font-prose); font-size: 1rem; font-style: italic; }
#menu .foot .keys { display: flex; gap: 0.9rem; align-items: center; white-space: nowrap; }
.wallet { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 900; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.wallet::before { content: ''; width: 0.8em; height: 0.8em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, var(--gold) 50%, var(--gold-lo)); box-shadow: 0.25em 0.12em 0 -0.05em var(--gold-lo); }

/* legacy list & rows (alias the .ui-row look) */
.list { display: flex; flex-direction: column; gap: 1px; }
.it { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.35em 0.8em; min-height: 2.3em; border-radius: var(--r-sm); cursor: pointer; border-bottom: 0; transition: background var(--t-fast); }
.it:hover { background: var(--hover-bg); }
.it.sel { background: var(--sel-bg); box-shadow: var(--sel-lines); color: #fff; --text: #fff; --text-dim: #dfe8ff; }
.it img.ic { width: 1.7em; height: 1.7em; image-rendering: pixelated; }
.it img.pt { width: 2.5em; height: 2.5em; image-rendering: pixelated; border-radius: var(--r-xs); }
.it .nm { flex: 1; font-weight: 800; }
.it .meta, .meta { color: var(--text-dim); font-size: var(--fs-sm); }
.it .acts { display: flex; gap: 4px; }
.desc { color: var(--text-dim); font-size: var(--fs-sm); margin: 0.4rem 0; min-height: 1.3em; line-height: 1.45; }
.money { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.card { position: relative; background: rgba(255, 255, 255, 0.06); border: 2px solid var(--frame-soft); border-radius: var(--r-md); padding: var(--sp-3); }
.card.on { border-color: var(--gold); }
.typetag { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.14em 0.65em; margin-right: 0.3em; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 1px #0006; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16); vertical-align: middle; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#menu .tabs button.on, .tabs button.on { --b-line: var(--gold); color: var(--gold-hi); }
.toast { /* legacy */ background: var(--surface); color: var(--on-surface); border-radius: var(--r-pill); padding: 0.5em 2em; }

/* ---------- menu content blocks (bag / team / shop / storage / base) */
.desc-box { margin-top: var(--sp-3); padding: 0.6rem 0.9rem; min-height: 3.4rem; border: 0; border-radius: var(--r-md); background: rgba(5, 12, 34, 0.35); display: flex; gap: 0.8rem; align-items: flex-start; }
.desc-box img { width: 2.4rem; height: 2.4rem; image-rendering: pixelated; flex: none; }
.desc-box .dn { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: 0.01em; color: var(--text); margin-bottom: 0.1rem; }
.desc-box .ui-desc { min-height: 0; }
.statusline { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); }
.statusline .grow { flex: 1; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.cols2 > div { min-width: 0; }
.mon-head { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; align-items: start; }
.mon-head .por { width: 6.2rem; height: 6.2rem; image-rendering: pixelated; border-radius: var(--r-md); background: linear-gradient(180deg, #dcecfb, #c5ddf4); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--poke-blue), var(--shadow-1); margin: 5px; }
.mon-head .mn { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); letter-spacing: 0.01em; line-height: 1.05; }
.mon-head .mn small { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; color: var(--text-dim); letter-spacing: 0.04em; margin-left: 0.6em; }
.mon-head .exp { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); color: var(--text-dim); margin: 0.35rem 0; }
.mon-head .exp .ui-bar { width: 10rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 1.2rem; margin-top: 0.25rem; }
.stats .ui-stat { justify-content: space-between; border-bottom: 1px solid var(--frame-soft); padding: 0.15rem 0; }
.stats .ui-stat__v { font-size: var(--fs-md); letter-spacing: 0.06em; font-weight: 600; }
.mon-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.upg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.upg .ui-card { cursor: default; }
.upg .ui-card:hover { transform: none; }
.upg dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; margin: 0; font-size: var(--fs-sm); }
.upg dt { color: var(--text-dim); } .upg dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.lvl-pips { display: flex; gap: 6px; } .lvl-pips i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gold); } .lvl-pips i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }

/* ---------- help */
#help { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(44rem, calc(100vw - 2 * var(--gutter))); max-height: 88vh; overflow-y: auto; line-height: 1.6; z-index: var(--z-modal); padding: var(--sp-5); animation: ui-panel-in var(--t-slow) var(--ease-out) both; box-shadow: 0 0 0 100vmax rgba(var(--chrome-rgb),0.38), var(--shadow-3); }
#help .keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.6rem; }
#help .keys > div { display: grid; grid-template-columns: 6.6rem 1fr; align-items: center; gap: 0.6rem; padding: 0.2rem 0; border-bottom: 2px solid var(--frame-soft); font-size: var(--fs-sm); }
#help .keys .kk { display: flex; gap: 3px; }
#help .keys .kh { grid-column: 1 / -1; display: block; border: 0; margin-top: var(--sp-2); font-family: var(--font-display, var(--font-ui)); font-size: var(--fs-xs, 0.78rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
#help kbd { font-family: var(--font-ui); }
#help .lore { font-family: var(--font-prose); font-size: 1.08rem; color: var(--text-dim); margin-top: var(--sp-3); line-height: 1.5; }
#help .fine { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: var(--sp-3); }

#fade { position: absolute; inset: 0; background: #0a1229; opacity: 0; transition: opacity 0.35s; pointer-events: none; z-index: var(--z-fade); }
#fade.on { opacity: 1; }
#toasts { z-index: var(--z-toast); pointer-events: none; }   /* `#ui > *` would make the whole toast column eat clicks (the co-op Rejoin pill under it) */

/* ===================================================================== world-space overlays */
.plate { position: absolute; transform: translate(-50%, -100%); will-change: transform; text-align: center; white-space: nowrap; font-family: var(--font-ui); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; text-shadow: var(--text-outline); }
.plate .hp { width: 3rem; height: 5px; margin: 3px auto 0; border-radius: 3px; overflow: hidden; background: rgba(10, 18, 44, 0.75); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.4); }
.plate .hp > i { display: block; height: 100%; background: linear-gradient(180deg, #b8f0bd 0 40%, var(--hp) 40%); transition: width var(--t-med) var(--ease-out); }
.plate.foe .hp > i { background: linear-gradient(180deg, #ffc4b6 0 40%, var(--foe) 40%); }
.plate .hp.shield { height: 3px; margin-top: 1px; } .plate .hp.shield > i { background: linear-gradient(180deg, #d6ecff, var(--pp)); }
.plate .bubble { position: relative; display: inline-block; background: var(--surface); color: var(--on-surface); text-shadow: none; padding: 0.3em 0.85em; border-radius: var(--r-md); margin-bottom: 10px; max-width: 15rem; white-space: normal;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.92rem; line-height: 1.3; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(31, 42, 74, 0.2), var(--shadow-1); animation: bubble-in var(--t-med) var(--ease-back) both; }
.plate .bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--surface); transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 0 #fff; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px) scale(0.92); } }
.plate .st { color: #ffc2e4; font-size: 0.66rem; letter-spacing: 0.1em; }
.plate .boss { color: var(--boss); }
.dmg { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 1.55rem; font-weight: 900; color: #fff; letter-spacing: 0.02em; pointer-events: none;
  text-shadow: var(--text-outline); animation: dmgup 0.95s var(--ease-out) forwards; }
.dmg.heal { color: #a8ffbf; }
/* Augments v2: a card trigger floater (client/scenes/dungeon.js expFx 'boon'): small, tag-coloured, drifts up slowly. */
.dmg.boon { color: var(--boon, #ffe080); font-family: var(--font-ui); font-size: .82rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; animation-duration: 1.5s; opacity: .95; }
.dmg.crit { color: var(--gold-hi); font-size: 2.1rem; animation-name: dmgcrit; }
.dmg.crit::after { content: '!'; }
.dmg.se { color: #ffb27a; font-size: 1.8rem; }
.dmg.miss { color: #d2d6dc; font-size: 1rem; font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-style: italic; }
.dmg.xp { color: var(--exp, #9fc9ea); font-size: .9rem; font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.1em; }
@keyframes dmgup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 14% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 26% { transform: translate(-50%, -62%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -160%) scale(0.95); } }
@keyframes dmgcrit { 0% { opacity: 0; transform: translate(-50%, -40%) scale(1.8); } 12% { opacity: 1; transform: translate(-50%, -60%) scale(0.92); } 22% { transform: translate(-50%, -62%) scale(1.06); } 32% { transform: translate(-50%, -62%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
.emote { font-size: 1.4rem; }

/* ===================================================================== responsive */
@media (max-width: 900px) {
  #hud-top { padding: 0.4rem 2rem 0.5rem; gap: 0.7rem; }
  #hud-top .belly .ui-bar { display: none; }
  .cols2, .upg { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #team { display: none !important; }
  #hud-top { top: 0; left: 0; right: 0; transform: none; justify-content: center; }
  #hud-top .ui-bar { width: 6rem; }
  #moves { left: var(--gutter) !important; right: var(--gutter) !important; transform: none !important; bottom: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .mv { width: auto; min-width: 0; padding: 0.3rem 0.5rem 0.3rem 0.3rem; gap: 0 0.45rem; grid-template-columns: auto minmax(0, 1fr); }
  .mv .mring { width: 1.9rem; height: 1.9rem; }
  #log { bottom: calc(var(--gutter) + 7.4rem); max-height: 4.4rem; width: calc(100vw - 2 * var(--gutter)); font-size: var(--fs-sm); }
  #hud-top:not(.hidden) ~ #minimap-frame { top: calc(var(--gutter) + 2.6rem); }
  #minimap { width: 120px !important; }
  #chat { bottom: calc(var(--gutter) + 12rem); }
  #chat-log { max-height: 4rem; }
  #dialog { padding-left: 1rem; padding-right: 1rem; }
  .ui-dialog__portrait { width: 4rem; height: 4rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #help .keys { grid-template-columns: 1fr; }
  .title .t2 { letter-spacing: 0.25em; }
}
@media (max-width: 520px) {
  /* round 4 narrow-window pass: the top ribbon must fit in ~430px, so tighten it instead of overflowing both edges */
  #hud-top { gap: 0.55rem; padding: 0.3rem 0.8rem 0.4rem; margin-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  #hud-top .fl { font-size: var(--fs-md); }
  #hud-top .lv { font-size: var(--fs-sm); }
  #hud-top .hpn { font-size: var(--fs-md); }
  #hud-top .ui-bar { width: 4.2rem; }
  #hud-top .k { margin-right: 0.15em; }
}
@media (min-width: 2400px) { .mv { width: 13.5rem; } }