/* Godrot - terminal client. Dark industrial biotech: the ash-black night of the dune-sea,
   lit by the cold blue glow of the city lamps. */

/* Brand palette. This block is the terminal's whole visual identity - reskin the whole client by
   editing these values (the *-line/-glow/-warm vars are rgb triplets fed to rgba() for tints). */
:root {
  --lamp: #6cc3e8;
  --lamp-bright: #a3ddf5;
  --lamp-soft: #8fb9cc;
  --lamp-grad-1: #63b9de;
  --lamp-grad-2: #3186ad;
  --lamp-line: 108, 176, 214;
  --lamp-glow: 108, 195, 232;
  --lamp-warm: 96, 168, 200;
  --bg: #06090c;
  --bg-warm: #0c1218;
  --shell: #0a0e13;
  --field: #05080b;
  --on-lamp: #06131c;
  --ink: #dde6ec;
  --ink-input: #c9e8f5;
  --dim: #93a4ad;
  --dimmer: #76858d;
  --faint: #5c6a72;
  --danger: #cf5f52;
}

html, body { height: 100%; margin: 0; background: var(--bg); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
/* The hidden attribute must always win, even over class rules that set display (e.g. .cr-auth-field). */
[hidden] { display: none !important; }

.crscreen::-webkit-scrollbar { width: 8px; }
.crscreen::-webkit-scrollbar-thumb { background: rgba(var(--lamp-line),.16); border-radius: 4px; }
.crscreen::-webkit-scrollbar-track { background: transparent; }

@keyframes crpulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }
@keyframes crflick { 0%,90%,100% { opacity:1 } 91% { opacity:.55 } 93% { opacity:.9 } 95% { opacity:.6 } }
@keyframes crrise  { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }
.crline { animation: crrise .32s ease both; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }

.cr-root {
  height: 100vh; display: flex; align-items: stretch; justify-content: center;
  /* ~8% breathing room each side; the shell fills the rest of the viewport (no fixed cap). */
  padding: clamp(0px, 2vh, 20px) 8vw;
  background: radial-gradient(120% 80% at 50% -10%, var(--bg-warm), var(--bg) 60%);
}
.cr-shell {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: none; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--lamp-glow),.05), transparent 22%), var(--shell);
  border: 1px solid rgba(var(--lamp-line),.16); border-radius: 14px;
  box-shadow: 0 34px 90px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(var(--lamp-glow),.06);
}

/* atmosphere overlays */
.cr-atmo { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cr-atmo-glow     { background: radial-gradient(130% 62% at 50% -8%, rgba(var(--lamp-glow),.10), transparent 60%); }
.cr-atmo-vignette { background: radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(0,0,0,.55)); }
.cr-atmo-scan     { opacity: .5; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.14) 3px, rgba(0,0,0,.14) 4px); }

.cr-header {
  position: relative; z-index: 6; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 54px; padding: 0 22px;
  border-bottom: 1px solid rgba(var(--lamp-line),.12); background: rgba(9,13,17,.5);
}
.cr-brand { display: flex; align-items: center; gap: 12px; }
.cr-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .28em;
  color: var(--lamp-bright); text-shadow: 0 0 16px rgba(var(--lamp-glow),.35);
}
.cr-status { display: flex; align-items: center; gap: 8px; }
.cr-dot { width: 7px; height: 7px; border-radius: 50%; }
.cr-status-label {
  font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .22em; text-transform: uppercase;
}

.cr-screen {
  position: relative; z-index: 6; flex: 1; overflow-y: auto; padding: 22px 24px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14.5px; line-height: 1.62; cursor: text;
}

.cr-prompt {
  position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: 11px;
  padding: 14px 24px; border-top: 1px solid rgba(var(--lamp-line),.12);
  background: linear-gradient(0deg, rgba(var(--lamp-glow),.04), transparent);
}
.cr-caret {
  color: var(--lamp); font: 600 14px 'IBM Plex Mono', monospace;
  text-shadow: 0 0 10px rgba(var(--lamp-glow),.4); animation: crflick 6s steps(30) infinite;
}
.cr-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--ink-input); font: 500 14.5px 'IBM Plex Mono', monospace; caret-color: var(--lamp);
}

/* ── player HUD strip (HP/AP, always on) ───────────────────────────────────── */
.cr-hud {
  position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding: 9px 22px;
  border-bottom: 1px solid rgba(var(--lamp-line),.1); background: rgba(9,13,17,.4);
}
.cr-hud[hidden] { display: none; }
.cr-hud-name { font: 600 12px 'Chakra Petch', sans-serif; color: var(--lamp-bright); letter-spacing: .04em; }
.cr-hud-lv { font: 500 10px 'IBM Plex Mono', monospace; color: var(--faint); }
.cr-hud-bar { display: flex; align-items: center; gap: 8px; }
.cr-hud-lbl { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--dimmer); }
.cr-hud-track {
  width: 150px; height: 9px; border-radius: 5px; overflow: hidden;
  background: rgba(0,0,0,.45); border: 1px solid rgba(var(--lamp-line),.14);
}
.cr-hud-fill { height: 100%; border-radius: 5px; transition: width .3s ease; }
.cr-hud-fill.hp { background: linear-gradient(90deg, #c9553b, #e0894f); }
.cr-hud-num { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--dim); min-width: 54px; }
.cr-hud-pips { display: flex; gap: 4px; }
.cr-ap-pip { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(var(--lamp-warm),.4); }
.cr-ap-pip.on { background: var(--lamp); border-color: var(--lamp); box-shadow: 0 0 7px rgba(var(--lamp-glow),.5); }
.cr-hud-def { font: 500 10px 'IBM Plex Mono', monospace; color: var(--dimmer); letter-spacing: .03em; }
.cr-hud-wallet { font: 500 10px 'IBM Plex Mono', monospace; color: var(--lamp); letter-spacing: .03em; }
.cr-hud-combat { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--lamp-soft); letter-spacing: .04em; }
.cr-hud-combat[hidden] { display: none; }
.cr-hud-combat b { color: var(--lamp-bright); }

/* ── help panel (collapsible command reference) ────────────────────────────── */
.cr-help-btn {
  height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer; background: none;
  border: 1px solid rgba(var(--lamp-line),.2); color: var(--dim); font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .06em;
}
.cr-help-btn:hover { color: var(--lamp-soft); border-color: rgba(var(--lamp-warm),.4); }
.cr-help {
  position: absolute; top: 54px; right: 0; bottom: 0; width: 330px; z-index: 15;
  display: flex; flex-direction: column;
  background: rgba(10,14,18,.97); border-left: 1px solid rgba(var(--lamp-line),.18);
  box-shadow: -18px 0 44px -20px rgba(0,0,0,.8); animation: crrise .2s ease both;
}
.cr-help-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 11px;
  font: 600 12px 'Chakra Petch', sans-serif; letter-spacing: .08em; color: var(--lamp-bright);
  border-bottom: 1px solid rgba(var(--lamp-line),.12);
}
.cr-help-close { color: var(--faint); cursor: pointer; font-size: 17px; line-height: 1; }
.cr-help-close:hover { color: var(--danger); }
.cr-help-body { flex: 1; overflow-y: auto; padding: 10px 16px 12px; }
.cr-help-sec {
  font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--faint);
  margin: 12px 0 7px;
}
.cr-help-row { margin-bottom: 9px; line-height: 1.4; }
.cr-help-key { font: 600 11.5px 'IBM Plex Mono', monospace; color: var(--lamp-soft); }
.cr-help-key.gm { color: #c79be0; }
.cr-help-alias { font: 500 10px 'IBM Plex Mono', monospace; color: var(--dimmer); }
.cr-help-desc { font: 400 10.5px 'IBM Plex Mono', monospace; color: var(--dim); }
.cr-help-note {
  flex: none; padding: 10px 16px 12px; border-top: 1px solid rgba(var(--lamp-line),.1);
  font: italic 400 10px 'IBM Plex Mono', monospace; color: var(--faint); line-height: 1.5;
}

/* ── feedback modal (player-submitted bugs / ideas / requests) ─────────────────── */
/* Atlas — the strategic Dominion map (opened by the `atlas` command). */
.cr-atlas { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(4,7,9,.72); animation: crrise .18s ease both; }
.cr-atlas-card { width: min(820px, 94%); max-height: 88vh; overflow-y: auto; background: rgba(11,16,20,.99); border: 1px solid rgba(var(--lamp-line),.22); border-radius: 12px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); padding: 16px 18px 18px; }
.cr-atlas-head { display: flex; align-items: center; justify-content: space-between; font-family: 'Chakra Petch', sans-serif; font-size: 17px; letter-spacing: .06em; color: var(--lamp-bright); border-bottom: 1px solid rgba(var(--lamp-line),.16); padding-bottom: 10px; }
.cr-atlas-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; margin: 15px 0 12px; }
.cr-atlas-empty { grid-column: 1 / -1; color: var(--dim); font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 18px 4px; }
.cr-atlas-cell { border: 1px solid rgba(var(--lamp-line),.20); border-radius: 9px; padding: 10px 12px 11px; background: rgba(15,21,26,.6); }
.cr-atlas-cell.current { border-color: var(--lamp); box-shadow: inset 0 0 16px rgba(var(--lamp-glow),.30), 0 0 10px rgba(var(--lamp-glow),.18); }
.cr-atlas-cell.besieged { border-color: #c0453a; animation: crpulse 1.6s ease-in-out infinite; }
.cr-atlas-name { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--lamp-soft); letter-spacing: .03em; }
.cr-atlas-tide { height: 8px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; margin: 9px 0 7px; }
.cr-atlas-tide > i { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.cr-atlas-markers { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--dim); letter-spacing: .01em; }
.cr-atlas-markers .siege { color: #d9695c; }
.cr-atlas-legend { display: flex; flex-wrap: wrap; gap: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); border-top: 1px solid rgba(var(--lamp-line),.14); padding-top: 11px; }
.cr-atlas-swatch { display: inline-block; width: 26px; height: 8px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, #5aa7c9, #7fae4f, #c0453a); }

.cr-fb { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(4,7,9,.6); animation: crrise .18s ease both; }
.cr-fb-card { width: min(460px, 92%); background: rgba(11,16,20,.99); border: 1px solid rgba(var(--lamp-line),.22); border-radius: 12px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.85); overflow: hidden; }
.cr-fb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; font: 600 13px 'Chakra Petch', sans-serif; letter-spacing: .06em; color: var(--lamp-bright); border-bottom: 1px solid rgba(var(--lamp-line),.12); }
.cr-fb-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.cr-fb-label { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--faint); margin-top: 6px; }
.cr-fb-input { background: #0c0904; border: 1px solid rgba(var(--lamp-line),.18); border-radius: 8px; color: var(--ink); font: 13px 'IBM Plex Mono', monospace; padding: 9px 11px; outline: none; }
.cr-fb-input:focus { border-color: rgba(var(--lamp-warm),.5); }
.cr-fb-msg { min-height: 120px; resize: vertical; line-height: 1.5; }
.cr-fb-error { font: 500 11px 'IBM Plex Mono', monospace; color: var(--danger); }
.cr-fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.cr-fb-submit { height: 32px; padding: 0 16px; border-radius: 8px; border: none; cursor: pointer; background: linear-gradient(180deg, var(--lamp-grad-1), var(--lamp-grad-2)); color: var(--on-lamp); font: 600 12px 'IBM Plex Mono', monospace; }
.cr-fb-submit:disabled { opacity: .5; cursor: default; }

/* ── reaction prompt (a charging Fatal Attack) ─────────────────────────────── */
.cr-reaction {
  position: relative; z-index: 6; flex: none; padding: 9px 22px; text-align: center;
  font: 600 12.5px 'IBM Plex Mono', monospace; letter-spacing: .03em; color: var(--lamp-bright);
  background: rgba(207,90,66,.16); border-bottom: 1px solid rgba(207,90,66,.5);
  animation: crpulse 1.1s ease-in-out infinite;
}
.cr-reaction[hidden] { display: none; }
.cr-reaction.you { color: #ffddd0; background: rgba(207,90,66,.3); }

/* ── body: feed + right sidebar ────────────────────────────────────────────── */
.cr-body { position: relative; z-index: 6; flex: 1; display: flex; min-height: 0; }
.cr-screen { min-width: 0; }

.cr-side {
  flex: none; width: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  padding: 16px 14px 20px; border-left: 1px solid rgba(var(--lamp-line),.12); background: rgba(7,11,14,.4);
}
.cr-side[hidden] { display: none; }
.cr-side-sec[hidden] { display: none; }
.cr-side-title {
  font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 9px;
}
/* party box */
.cr-party { display: flex; flex-direction: column; gap: 7px; }
.cr-party-row { display: flex; align-items: center; gap: 7px; }
.cr-party-name { flex: 1; min-width: 0; font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-party-row.self .cr-party-name { color: var(--lamp-bright); }
.cr-party-row.downed .cr-party-name { color: var(--danger); text-decoration: line-through; }
.cr-party-lead { color: var(--lamp); font-size: 9px; flex: none; }
.cr-party-hpbar { width: 60px; flex: none; height: 7px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; }
.cr-party-hpbar > div { height: 100%; background: linear-gradient(90deg, #c9553b, #e0894f); transition: width .3s ease; }
.cr-party-hp { width: 44px; flex: none; text-align: right; font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--dimmer); }

/* left panel: read-only inventory + equipment */
.cr-side-left { border-left: 0; border-right: 1px solid rgba(var(--lamp-line),.12); }
.cr-inv { display: flex; flex-direction: column; gap: 3px; }
.cr-inv-row { display: flex; align-items: baseline; gap: 6px; font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--ink); }
.cr-inv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.cr-inv-row.worn .cr-inv-name { color: var(--lamp-soft); }
.cr-inv-worn { flex: none; font: 600 8.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cr-inv-none, .cr-equip-none { font: 400 11px 'IBM Plex Mono', monospace; color: var(--faint); font-style: italic; }
.cr-equip { display: flex; flex-direction: column; gap: 4px; }
.cr-equip-row { display: flex; align-items: baseline; gap: 8px; font: 500 11.5px 'IBM Plex Mono', monospace; }
.cr-equip-slot { width: 62px; flex: none; font: 600 8.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cr-equip-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lamp-soft); text-transform: capitalize; }
.cr-equip-item.empty { color: var(--dimmer); }

/* local minimap (ASCII) */
.cr-map {
  margin: 0; padding: 10px 8px; text-align: center; white-space: pre;
  font: 600 14px/1.15 'IBM Plex Mono', monospace; letter-spacing: 1px; color: var(--lamp-soft);
  background: rgba(0,0,0,.28); border: 1px solid rgba(var(--lamp-line),.12); border-radius: 8px;
}
.cr-map-path { margin: -3px 0 7px; font: 500 10px 'IBM Plex Mono', monospace; color: var(--dimmer); letter-spacing: .04em; }
.cr-map-path:empty { display: none; }
.cr-map-ud { margin-top: 6px; text-align: center; font: 500 10px 'IBM Plex Mono', monospace; color: var(--dimmer); letter-spacing: .06em; }
.cr-map-ud:empty { display: none; }

/* active buffs */
.cr-buffs { display: flex; flex-direction: column; gap: 6px; }
.cr-buff { display: flex; align-items: baseline; gap: 7px; padding: 5px 9px; border-radius: 7px; background: rgba(123,191,106,.08); border: 1px solid rgba(123,191,106,.22); }
.cr-buff-name { flex: 1; min-width: 0; font: 500 11px 'IBM Plex Mono', monospace; color: #8fc88a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.cr-buff-eff { flex: none; font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--dim); }
.cr-buff-time { flex: none; font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--dimmer); }

/* quest tracker (lightweight: titles + archaeology fragments, no objectives) */
.cr-quests { display: flex; flex-direction: column; gap: 9px; }
.cr-quest { display: flex; flex-direction: column; gap: 3px; padding-left: 9px; border-left: 2px solid rgba(185,166,224,.4); }
.cr-quest-title { font: 500 11.5px 'IBM Plex Mono', monospace; color: #b9a6e0; }
.cr-quest-frag { font: italic 400 10.5px 'IBM Plex Mono', monospace; color: var(--dimmer); line-height: 1.4; }
.cr-quest-none { font: italic 400 11px 'IBM Plex Mono', monospace; color: var(--faint); }

.cr-abilities { display: flex; flex-direction: column; gap: 6px; }
.cr-abil {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border: 1px solid rgba(var(--lamp-line),.12); border-radius: 8px; background: var(--field);
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.cr-abil:hover:not(:disabled) { border-color: rgba(var(--lamp-line),.4); background: rgba(var(--lamp-line),.06); }
.cr-abil:active:not(:disabled) { transform: translateY(1px); }
.cr-abil:disabled { cursor: default; opacity: .4; }
.cr-abil-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cr-abil-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; background: rgba(var(--lamp-line),.14);
  font: 600 9px 'IBM Plex Mono', monospace; color: var(--dimmer);
}
.cr-abil-key { font: 500 12px 'IBM Plex Mono', monospace; color: var(--ink); text-transform: capitalize; }
.cr-abil-ap { flex: none; font: 600 10px 'IBM Plex Mono', monospace; color: #56c2a6; }
.cr-abil-none { font: 400 11px 'IBM Plex Mono', monospace; color: var(--faint); font-style: italic; }

/* ── battle lines ──────────────────────────────────────────────────────────── */
.cr-lines { display: flex; flex-direction: column; gap: 12px; }
.cr-lines-title { font: 600 8.5px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--faint); margin-bottom: 5px; text-transform: uppercase; }
.cr-comb { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.cr-comb-tag { width: 34px; flex: none; font: 600 8px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--dimmer); }
.cr-comb-name { flex: 1; min-width: 0; font: 500 11px 'IBM Plex Mono', monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-comb.self .cr-comb-name { color: var(--lamp-bright); }
.cr-comb.downed .cr-comb-name { color: var(--danger); text-decoration: line-through; }
/* A living enemy row is click-to-target; the current target carries the focus highlight. */
.cr-comb.enemy { cursor: pointer; border-radius: 6px; transition: background .12s ease; }
.cr-comb.enemy:hover { background: rgba(var(--lamp-line),.08); }
.cr-comb.focus { background: rgba(var(--lamp-warm),.12); box-shadow: inset 2px 0 0 var(--lamp); }
.cr-comb.focus .cr-comb-name { color: var(--lamp-bright); }
.cr-comb-hp { width: 42px; flex: none; height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.cr-comb-hp > div { height: 100%; background: linear-gradient(90deg, #c9553b, #e0894f); transition: width .3s ease; }
.cr-comb-valor { width: 28px; flex: none; text-align: right; font: 500 9px 'IBM Plex Mono', monospace; color: var(--faint); }
/* Per-enemy Valor lock: who a foe is fixed on (▶ ally ♦N). Wider than the plain valor cell to fit the name. */
.cr-comb-target { flex: none; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font: 500 9px 'IBM Plex Mono', monospace; color: var(--dimmer); }
.cr-comb-target-valor { color: var(--lamp-soft); }

@media (max-width: 760px) { .cr-side { display: none; } }

/* header account chip */
.cr-header-right { display: flex; align-items: center; gap: 14px; }

/* header nav - back to homepage + architect panel */
.cr-nav { display: flex; align-items: center; gap: 8px; }
.cr-navlink {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  font: 500 11.5px 'IBM Plex Mono', monospace; letter-spacing: .02em;
  color: var(--dim); text-decoration: none; border: 1px solid rgba(var(--lamp-line),.14);
  transition: color .15s, border-color .15s, filter .15s;
}
.cr-navlink:hover { color: var(--lamp-soft); border-color: rgba(var(--lamp-warm),.34); }
.cr-navlink.architect { color: var(--on-lamp); font-weight: 600; background: linear-gradient(180deg, var(--lamp-grad-1), var(--lamp-grad-2)); border-color: transparent; box-shadow: 0 4px 14px -6px rgba(var(--lamp-warm),.55); }
.cr-navlink.architect:hover { color: var(--on-lamp); filter: brightness(1.06); }
.cr-navlink[hidden] { display: none; }
@media (max-width: 680px) { .cr-navlink span, .cr-status-label { display: none; } }
.cr-account { display: flex; align-items: center; gap: 10px; }
.cr-account-name {
  font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--lamp-soft);
}
.cr-logout {
  background: none; border: 1px solid rgba(var(--lamp-line),.2); border-radius: 6px;
  color: var(--dimmer); font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; cursor: pointer;
}
.cr-logout:hover { color: var(--lamp-soft); border-color: rgba(var(--lamp-line),.4); }

/* web login gate */
.cr-auth {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% -10%, var(--bg-warm), var(--bg) 62%);
}
.cr-auth[hidden] { display: none; }
.cr-auth-card {
  width: 340px; display: flex; flex-direction: column; gap: 15px; padding: 32px 30px;
  background: rgba(10,15,19,.82); border: 1px solid rgba(var(--lamp-warm),.2); border-radius: 14px;
  box-shadow: 0 26px 64px rgba(0,0,0,.55); animation: crrise .35s ease both;
}
.cr-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cr-auth-title {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .2em; color: var(--lamp-bright);
}
.cr-auth-sub {
  text-align: center; font: 400 11px 'IBM Plex Mono', monospace; letter-spacing: .05em; color: var(--faint);
  margin-bottom: 2px;
}
.cr-auth-field { display: flex; flex-direction: column; gap: 6px; }
.cr-auth-field span {
  font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--faint);
}
.cr-auth-field input {
  height: 36px; padding: 0 12px; background: var(--field); border: 1px solid rgba(var(--lamp-line),.12);
  border-radius: 8px; color: var(--ink); font: 13px 'IBM Plex Mono', monospace; outline: none;
}
.cr-auth-field input:focus { border-color: rgba(var(--lamp-warm),.4); }
.cr-auth-turnstile { display: flex; justify-content: center; min-height: 66px; }
.cr-auth-error { color: var(--danger); font: 400 11.5px 'IBM Plex Mono', monospace; line-height: 1.4; min-height: 0; }
.cr-auth-submit {
  height: 38px; margin-top: 2px; border: none; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, var(--lamp-grad-1), var(--lamp-grad-2)); color: var(--on-lamp); font: 600 13px 'IBM Plex Sans', system-ui, sans-serif;
}
.cr-auth-submit:disabled { opacity: .55; cursor: default; }
.cr-auth-toggle {
  background: none; border: none; color: var(--dim); font: 11px 'IBM Plex Mono', monospace; cursor: pointer; padding: 0;
}
.cr-auth-home {
  text-align: center; color: var(--faint); text-decoration: none;
  font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .04em; margin-top: 2px;
}

/* ── character select (post-login, pre-world) ──────────────────────────────── */
.cr-charsel-card { width: 400px; max-height: 86%; overflow-y: auto; }
#cr-char-roster, #cr-charnew { display: flex; flex-direction: column; gap: 13px; }
.cr-char-list { display: flex; flex-direction: column; gap: 7px; }
.cr-char-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; text-align: left;
  background: var(--field); border: 1px solid rgba(var(--lamp-line),.14); border-radius: 10px;
}
.cr-char-row:hover { border-color: rgba(var(--lamp-warm),.45); background: rgba(108, 195, 232,.06); }
.cr-char-name { flex: 1; min-width: 0; font: 600 13.5px 'Chakra Petch', sans-serif; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-char-meta { flex: none; font: 500 10px 'IBM Plex Mono', monospace; color: var(--dimmer); text-align: right; line-height: 1.4; }
.cr-char-none { text-align: center; font: italic 400 11.5px 'IBM Plex Mono', monospace; color: var(--faint); padding: 8px 0 2px; }
.cr-char-del {
  flex: none; width: 22px; height: 22px; margin-left: 2px; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--fainter, #57503f); font: 500 14px/1 'IBM Plex Mono', monospace;
}
.cr-char-del:hover { color: var(--danger); border-color: rgba(207,122,90,.4); }
.cr-char-newbtn {
  height: 36px; border-radius: 9px; cursor: pointer; background: none;
  border: 1px dashed rgba(var(--lamp-warm),.4); color: var(--lamp-soft); font: 600 12px 'IBM Plex Sans', system-ui, sans-serif;
}
.cr-char-newbtn:hover { border-style: solid; color: var(--lamp-bright); }
.cr-charnew-lbl { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--faint); }
.cr-class-list { display: flex; flex-direction: column; gap: 6px; }
.cr-class-card {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; cursor: pointer; text-align: left;
  background: var(--field); border: 1px solid rgba(var(--lamp-line),.14); border-radius: 9px;
}
.cr-class-card.on { border-color: rgba(var(--lamp-warm),.6); background: rgba(108, 195, 232,.08); }
.cr-class-head { display: flex; align-items: baseline; gap: 8px; }
.cr-class-name { font: 600 12.5px 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); }
.cr-class-card.on .cr-class-name { color: var(--lamp-bright); }
.cr-class-role { font: 500 9.5px 'IBM Plex Mono', monospace; color: var(--dimmer); }
.cr-class-desc { font: 400 10.5px 'IBM Plex Mono', monospace; color: var(--faint); line-height: 1.45; }
.cr-class-none { font: italic 400 11px 'IBM Plex Mono', monospace; color: var(--faint); }
.cr-origin-lore {
  margin-top: 8px; padding: 10px 12px; white-space: pre-wrap;
  background: var(--field); border: 1px solid rgba(var(--lamp-warm),.25); border-radius: 9px;
  font: 400 11px 'IBM Plex Mono', monospace; color: var(--dim); line-height: 1.55;
}
.cr-auth-field textarea {
  padding: 9px 12px; background: var(--field); border: 1px solid rgba(var(--lamp-line),.12);
  border-radius: 8px; color: var(--ink); font: 12.5px 'IBM Plex Mono', monospace; outline: none; resize: vertical;
}
.cr-auth-field textarea:focus { border-color: rgba(var(--lamp-warm),.4); }
.cr-auth-home:hover { color: var(--dim); }

/* ── the forge: a stepped character-creation wizard ────────────────────────── */
.cr-forge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cr-forge-steps { display: flex; align-items: center; gap: 6px; }
.cr-forge-dot {
  width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(var(--lamp-line),.35); background: transparent; transition: background .18s, border-color .18s;
}
.cr-forge-dot.done { background: rgba(var(--lamp-warm),.4); border-color: transparent; }
.cr-forge-dot.on { background: var(--lamp); border-color: transparent; box-shadow: 0 0 6px rgba(var(--lamp-glow),.5); }
.cr-step { display: flex; flex-direction: column; gap: 13px; animation: crrise .22s ease both; }

.cr-forge-nav { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cr-forge-nav .cr-auth-submit { margin-top: 0; }
.cr-forge-prev {
  height: 38px; padding: 0 14px; border-radius: 9px; cursor: pointer; background: none;
  border: 1px solid rgba(var(--lamp-line),.2); color: var(--dim); font: 600 12px 'IBM Plex Sans', system-ui, sans-serif;
}
.cr-forge-prev:hover { border-color: rgba(var(--lamp-warm),.4); color: var(--lamp-soft); }
.cr-forge-next {
  flex: 1; height: 38px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, var(--lamp-grad-1), var(--lamp-grad-2)); color: var(--on-lamp);
  border: none; font: 600 13px 'IBM Plex Sans', system-ui, sans-serif;
}
.cr-forge-create { flex: 1; }

/* attributes: point-buy */
.cr-attr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cr-attr-points { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--dim); }
.cr-attr-points #cr-attr-remaining { color: var(--lamp-bright); font-weight: 600; }
.cr-attr-grid { display: flex; flex-direction: column; gap: 6px; }
.cr-attr-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  background: var(--field); border: 1px solid rgba(var(--lamp-line),.14); border-radius: 9px;
}
.cr-attr-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cr-attr-name { font: 600 12px 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); }
.cr-attr-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; vertical-align: middle;
  background: rgba(108, 195, 232,.14); color: var(--lamp-bright); font: 600 8.5px 'IBM Plex Mono', monospace; letter-spacing: .06em;
}
.cr-attr-desc { font: 400 9.5px 'IBM Plex Mono', monospace; color: var(--faint); line-height: 1.4; }
.cr-attr-ctrl { flex: none; display: flex; align-items: center; gap: 8px; }
.cr-attr-btn {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; color: var(--lamp-soft);
  background: none; border: 1px solid rgba(var(--lamp-warm),.35); font: 500 15px/1 'IBM Plex Mono', monospace;
  display: flex; align-items: center; justify-content: center;
}
.cr-attr-btn:hover:not(:disabled) { border-color: var(--lamp); color: var(--lamp-bright); background: rgba(108, 195, 232,.08); }
.cr-attr-btn:disabled { opacity: .28; cursor: default; }
.cr-attr-val { width: 24px; text-align: center; font: 600 14px 'IBM Plex Mono', monospace; color: var(--ink); }

/* attributes: live vitals preview */
.cr-attr-preview {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 11px 12px; margin-top: 2px;
  background: rgba(108, 195, 232,.04); border: 1px solid rgba(var(--lamp-line),.12); border-radius: 9px;
}
.cr-preview-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-preview-val { font: 600 16px 'IBM Plex Mono', monospace; color: var(--lamp-bright); }
.cr-preview-lbl { font: 500 8.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }

/* review */
.cr-review { display: flex; flex-direction: column; gap: 5px; }
.cr-review-row {
  display: flex; align-items: baseline; gap: 12px; padding: 6px 12px;
  background: var(--field); border: 1px solid rgba(var(--lamp-line),.1); border-radius: 8px;
}
.cr-review-key { flex: none; width: 92px; font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.cr-review-val { flex: 1; min-width: 0; font: 500 12px 'IBM Plex Mono', monospace; color: var(--ink); line-height: 1.45; word-break: break-word; }