:root {
  --bg: #1a1c20;
  --panel: #24262b;
  --border: #35383f;
  --text: #cfd2d6;
  --dim: #8a8f98;
  --accent: #8fd460;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.game-header {
  padding: 16px 24px 0;
  max-width: 1400px;
  margin: 0 auto;
}

.game-header h1 { font-size: 16px; margin: 0 0 4px; }

.game-main {
  display: flex;
  gap: 16px;
  padding: 16px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
}

#game-wrap {
  position: relative;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: 960px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  container-type: inline-size;
}

#phaser-host {
  position: absolute;
  inset: 0;
}

#game-wrap canvas { display: block; }

aside {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}

.card h2 {
  font-size: 12px;
  margin: 0 0 6px;
  color: var(--dim);
  font-weight: normal;
}

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 2px 8px; }
.kv span:nth-child(odd) { color: var(--dim); }
.kv.balls { margin-top: 6px; }

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
  color: var(--accent);
  max-height: 180px;
  overflow: auto;
}

ul#log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
}

ul#log li { padding: 1px 0; border-bottom: 1px solid #2b2e34; }
ul#log li:first-child { color: var(--accent); }

label.toggle { display: flex; align-items: center; gap: 6px; color: var(--dim); cursor: pointer; margin-top: 8px; }

.pmon { padding: 5px 0; border-bottom: 1px solid #2b2e34; }
.pmon:last-of-type { border-bottom: none; }
.pmon .row { display: flex; justify-content: space-between; }
.pmon .tag { color: var(--accent); font-size: 11px; }
.pmon .sub { color: var(--dim); font-size: 11px; margin-top: 2px; }
.pmon .order { display: flex; gap: 3px; margin-left: auto; }
.pmon .order form { display: contents; }
.pmon .order button {
  background: #262a31;
  color: var(--fg, #e8e8e8);
  border: 1px solid #3a3f47;
  border-radius: 3px;
  font-size: 10px;
  padding: 0 5px;
  cursor: pointer;
}
.pmon .order button:hover:not(:disabled) { background: #363c46; }
.pmon .order button:disabled { opacity: 0.4; cursor: default; }

.xpbar {
  height: 3px;
  background: #2a3a4d;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.xpbar div { height: 100%; background: #6aa9e0; }

.pmon-open {
  background: none;
  border: none;
  color: var(--fg, #e8e8e8);
  font: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.pmon-open:hover { color: var(--accent); }

.msum-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.msum-sprite {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  background: #171a1f;
  border: 1px solid #3a3f47;
  border-radius: 6px;
}
.msum-ident { display: flex; flex-direction: column; gap: 2px; }
.msum-name { font-size: 15px; color: var(--fg, #e8e8e8); }
.msum-species { font-size: 11px; color: var(--dim); }
.msum-types { display: flex; gap: 4px; margin-top: 3px; }
.msum-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #2a2f37;
  border: 1px solid #3a3f47;
  color: var(--dim);
}
.msum-status {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: #4a2a2a;
  color: #e0a0a0;
}
.msum-stats { margin-bottom: 10px; }
.msum-stats .xpbar { margin-top: 6px; }
.msum-moves {
  border-top: 1px solid #2b2e34;
  padding-top: 8px;
  margin-bottom: 10px;
}
.msum-move {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid #2b2e34;
}
.msum-move:last-of-type { border-bottom: none; }
.msum-move-name { font-size: 13px; }
.msum-move-pp { font-size: 11px; color: var(--dim); }
.msum-back {
  display: inline-block;
  background: #262a31;
  color: var(--fg, #e8e8e8);
  border: 1px solid #3a3f47;
  border-radius: 3px;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
}
.msum-back:hover { background: #363c46; }

.party-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  background: #20242a;
  color: var(--fg, #e8e8e8);
  border: 2px solid #4a4f58;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.party-toggle:hover { background: #2b3038; }

.party-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 11, 0.72);
}
.party-overlay[hidden] { display: none; }

.party-menu-box {
  width: 320px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: auto;
  background: #20242a;
  border: 2px solid #4a4f58;
  border-radius: 8px;
  padding: 10px 14px 12px;
}

.party-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
}
.party-menu-head button {
  background: #262a31;
  color: var(--fg, #e8e8e8);
  border: 1px solid #3a3f47;
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.party-menu-head button:hover { background: #363c46; }

.dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 560px;
  max-width: calc(100% - 32px);
  background: #20242a;
  border: 2px solid #4a4f58;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 9;
}

.dialogue-box .name { color: var(--accent); font-size: 12px; margin-bottom: 2px; }
.dialogue-box .line { min-height: 20px; }

.dialogue-box .hint {
  color: var(--dim);
  font-size: 11px;
  text-align: right;
  margin-top: 4px;
  animation: dialogue-hint 1.1s ease-in-out infinite alternate;
}

@keyframes dialogue-hint {
  from { opacity: 0.35; }
  to { opacity: 0.9; }
}

/* --- Game Boy battle screen ------------------------------------------- */

.battle-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  --gb-ink: #dbe4d6;
  --gb-paper: #101613;
  --gb-shade: #6f7970;
  --gb-track: #070b08;
  --gb-hp-green: #58d858;
  --gb-hp-yellow: #f8c000;
  --gb-hp-red: #f83800;
}

.gb-screen {
  position: absolute;
  inset: 0;
  background: var(--gb-paper);
  color: var(--gb-ink);
  display: flex;
  flex-direction: column;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(10px, 2.3cqi, 30px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

.gb-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* battle field */
.gb-field {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 3% 5%;
}

.gb-mon { position: absolute; left: 5%; right: 5%; display: flex; align-items: flex-start; }
.gb-enemy { top: 4%; justify-content: space-between; }
.gb-ally { bottom: 2%; justify-content: space-between; align-items: flex-end; }

.gb-sprite {
  width: 34%;
  max-width: 40%;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}
.gb-enemy .gb-sprite { order: 2; }
.gb-ally .gb-sprite { order: 1; margin-bottom: -2%; }

/* status plate */
.gb-status {
  min-width: 46%;
  background: var(--gb-paper);
  border: 3px solid var(--gb-ink);
  border-radius: 0.2em;
  box-shadow: inset 0 0 0 2px var(--gb-paper), inset 0 0 0 3px var(--gb-ink);
  padding: 0.35em 0.55em 0.45em;
}
.gb-enemy .gb-status { order: 1; }
.gb-ally .gb-status { order: 2; }

.gb-status-row { display: flex; align-items: baseline; gap: 0.5em; }
.gb-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-level { font-size: 0.85em; }

.gb-hp-row { display: flex; align-items: center; gap: 0.4em; margin-top: 0.3em; }
.gb-hp-label { font-size: 0.7em; font-weight: 700; color: #f8a000; }

.gb-hpbar {
  flex: 1;
  height: 0.45em;
  min-height: 5px;
  background: var(--gb-track);
  border-radius: 0.25em;
  padding: 1px;
  overflow: hidden;
}
.gb-hpfill {
  display: block;
  height: 100%;
  background: var(--gb-hp-green);
  border-radius: 0.2em;
  transition: width 220ms linear, background 220ms linear;
}
.gb-hpfill[data-band="mid"] { background: var(--gb-hp-yellow); }
.gb-hpfill[data-band="low"] { background: var(--gb-hp-red); }

.gb-hptext {
  text-align: right;
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.25em;
  letter-spacing: 0.08em;
}

/* command area */
.gb-command {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 30%;
  min-height: 5em;
  border-top: 3px solid var(--gb-ink);
}

.gb-box {
  border: 3px solid var(--gb-ink);
  border-radius: 0.2em;
  box-shadow: inset 0 0 0 2px var(--gb-paper), inset 0 0 0 3px var(--gb-ink);
  background: var(--gb-paper);
}

.gb-left { flex: 1; margin: 0.5em; padding: 0.5em 0.8em; display: flex; }
.gb-right { flex: 0 0 44%; margin: 0.5em 0.5em 0.5em 0; padding: 0.5em 0.8em; }
.gb-right[hidden] { display: none; }

.gb-msg { align-self: center; line-height: 1.6; }
.gb-msg[hidden] { display: none; }

.gb-command.awaiting .gb-left { cursor: pointer; }
.gb-command.awaiting .gb-msg::after {
  content: "\25bc";
  margin-left: 0.5em;
  animation: dialogue-hint 0.9s steps(1) infinite alternate;
}

/* type / pp box shown while choosing a move */
.gb-moveinfo { display: flex; flex-direction: column; justify-content: center; gap: 0.4em; }
.gb-moveinfo[hidden] { display: none; }
.gb-moveinfo-type { font-size: 0.75em; color: var(--gb-shade); }
.gb-moveinfo-typename { font-weight: 700; }
.gb-moveinfo-pp { font-weight: 700; letter-spacing: 0.08em; }
.gb-moveinfo-pp[data-band="low"] { color: var(--gb-hp-red); }

/* menus */
.gb-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 0.7em; height: 100%; align-content: center; }
.gb-menu[hidden] { display: none; }
.gb-movelist { display: flex; flex-direction: column; justify-content: safe center; gap: 0.1em; height: 100%; overflow: hidden; }
.gb-movelist[hidden] { display: none; }

/* turbo-form prompts (evolve / nickname / move learning) reuse the command row */
#battle-prompt {
  height: 30%;
  min-height: 5em;
  border-top: 3px solid var(--gb-ink);
}
#battle-prompt[hidden] { display: none; }
.gb-prompt { display: none; align-items: stretch; height: 100%; }
.gb-prompt.is-active { display: flex; }
.gb-choice-form, .gb-party-form { display: contents; }

.gb-choice {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: 1.15;
  background: none;
  border: none;
  color: var(--gb-ink);
  text-align: left;
  padding: 0.1em 0.3em 0.1em 1.1em;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.gb-choice::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.5em;
  border-color: transparent transparent transparent var(--gb-ink);
  opacity: 0;
}
.gb-choice.is-cursor::before { opacity: 1; }
.gb-choice:disabled { color: var(--gb-shade); cursor: default; }
.gb-choice:focus { outline: none; }
.gb-choice.gb-move-cancel { color: var(--gb-shade); }

.gb-nickname {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: 1.15;
  color: var(--gb-ink);
  background: none;
  border: none;
  border-bottom: 0.12em solid var(--gb-ink);
  padding: 0.1em 0.3em;
  margin: 0.1em 0.3em;
  width: calc(100% - 0.6em);
}
.gb-nickname:focus { outline: none; }
.gb-nickname-ok { color: var(--gb-shade); }

/* party / switch screen */
.gb-party {
  position: absolute;
  inset: 0;
  background: var(--gb-paper);
  color: var(--gb-ink);
  display: flex;
  flex-direction: column;
  padding: 0.6em 0.7em;
  z-index: 2;
}
.gb-party[hidden] { display: none; }

.gb-party-list { flex: 1; display: flex; flex-direction: column; gap: 0.15em; overflow: auto; min-height: 0; }

.gb-party-row {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  color: var(--gb-ink);
  display: grid;
  grid-template-columns: 2.2em 1fr auto auto 6em auto;
  align-items: center;
  gap: 0.5em;
  line-height: 1.1;
  padding: 0.2em 0.25em 0.2em 1.1em;
  position: relative;
  cursor: pointer;
  text-align: left;
}
.gb-party-row::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.5em;
  border-color: transparent transparent transparent var(--gb-ink);
  opacity: 0;
}
.gb-party-row.is-cursor::before { opacity: 1; }
.gb-party-row[data-fainted] { color: var(--gb-shade); }
.gb-party-row:disabled { color: var(--gb-shade); cursor: default; }
.gb-party-sprite { width: 2.2em; height: 2.2em; object-fit: contain; image-rendering: pixelated; }
.gb-party-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-party-level { font-size: 0.85em; }
.gb-party-hp-label { font-size: 0.7em; font-weight: 700; color: #f8a000; }
.gb-party-hpbar { display: inline-block; width: 6em; height: 0.45em; min-height: 5px; background: var(--gb-track); border-radius: 0.25em; padding: 1px; overflow: hidden; }
.gb-party-hpbar .gb-hpfill { height: 100%; }
.gb-party-hptext { font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em; }
.gb-party-cancel { grid-template-columns: 1fr; color: var(--gb-shade); }
.gb-party-msg { margin-top: 0.5em; padding: 0.6em 0.8em; }

/* status badge */
.gb-status-badge {
  font-size: 0.7em;
  font-weight: 700;
  border: 2px solid var(--gb-ink);
  border-radius: 0.2em;
  padding: 0 0.3em;
  color: var(--gb-paper);
  background: var(--gb-ink);
}

.gb-status-badge[hidden] { display: none; }
.gb-status-badge[data-status="burn"] { background: #e07050; }
.gb-status-badge[data-status="poison"],
.gb-status-badge[data-status="toxic"] { background: #b06ac8; }
.gb-status-badge[data-status="paralysis"] { background: #e0c341; color: var(--gb-paper); }
.gb-status-badge[data-status="sleep"] { background: #8f9bb3; }
.gb-status-badge[data-status="freeze"] { background: #6ac4e0; color: var(--gb-paper); }

.status-flash-burn { animation: status-burn 700ms ease-in-out; }
.status-flash-poison,
.status-flash-toxic { animation: status-poison 700ms ease-in-out; }
.status-flash-paralysis { animation: status-paralysis 700ms steps(2, jump-none); }
.status-flash-sleep { animation: status-sleep 900ms ease-in-out; }
.status-flash-freeze { animation: status-freeze 900ms ease-in-out; }
.status-flash-confusion { animation: status-confusion 700ms ease-in-out; }

@keyframes status-burn {
  0%, 100% { filter: none; }
  25%, 75% { filter: sepia(1) saturate(5) hue-rotate(-30deg) brightness(1.2); }
}

@keyframes status-poison {
  0%, 100% { filter: none; }
  25%, 75% { filter: sepia(1) saturate(4) hue-rotate(220deg) brightness(0.9); }
}

@keyframes status-paralysis {
  0%, 100% { filter: none; transform: none; }
  20% { filter: sepia(1) saturate(5) hue-rotate(10deg) brightness(1.3); transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { filter: sepia(1) saturate(5) hue-rotate(10deg) brightness(1.3); transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes status-sleep {
  0%, 100% { filter: none; opacity: 1; }
  50% { filter: grayscale(0.8) brightness(0.6); opacity: 0.5; }
}

@keyframes status-freeze {
  0%, 100% { filter: none; }
  30%, 70% { filter: saturate(0.4) brightness(1.3) sepia(1) hue-rotate(170deg); }
}

@keyframes status-confusion {
  0%, 100% { transform: none; }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}

/* pokeball throw -- fixed colours so the ball reads the same in any battle theme */
.gb-ball {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  --ball-red: #f83800;
  --ball-shell: #f6f6ee;
  --ball-ink: #101820;
}

.gb-ball__body {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--ball-ink);
  background: linear-gradient(var(--ball-red) 0 calc(50% - 1px), var(--ball-ink) calc(50% - 1px) calc(50% + 1px), var(--ball-shell) calc(50% + 1px) 100%);
  box-shadow: inset -2px -2px 0 rgba(16, 24, 32, 0.25);
  position: relative;
  transform-origin: 50% 88%;
  image-rendering: pixelated;
}
.gb-ball__body::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 36%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ball-shell);
  border: 2px solid var(--ball-ink);
}

.gb-ball.is-throwing { animation: gb-ball-arc 560ms ease-in forwards; }
.gb-ball.is-dropping { animation: gb-ball-drop 380ms ease-out forwards; }
.gb-ball.is-caught .gb-ball__body { animation: gb-ball-click 500ms ease-out forwards; }

.gb-ball__body.is-spinning { animation: gb-ball-spin 560ms linear; }
.gb-ball__body.is-opening { animation: gb-ball-open 360ms ease-out; }
.gb-ball__body.is-wobbling { animation: gb-ball-wobble 460ms ease-in-out; }
.gb-ball__body.is-breaking { animation: gb-ball-break 460ms ease-out forwards; }

.gb-enemy .gb-sprite.gb-absorbing { animation: gb-absorb 360ms ease-in forwards; }
.gb-enemy .gb-sprite.gb-absorbed { opacity: 0; }
.gb-enemy .gb-sprite.gb-released { animation: gb-release 440ms ease-out; }

@keyframes gb-ball-arc {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--throw-x) * 0.5), calc(var(--throw-y) * 0.5 - var(--arc))); }
  100% { transform: translate(var(--throw-x), var(--throw-y)); }
}

@keyframes gb-ball-drop {
  0% { transform: translate(var(--throw-x), var(--throw-y)); }
  55% { transform: translate(var(--throw-x), var(--rest-y)); }
  75% { transform: translate(var(--throw-x), calc(var(--rest-y) - var(--bounce))); }
  100% { transform: translate(var(--throw-x), var(--rest-y)); }
}

@keyframes gb-ball-spin {
  from { transform: rotate(0); }
  to { transform: rotate(540deg); }
}

@keyframes gb-ball-open {
  0%, 100% { filter: none; }
  40% { filter: brightness(3.5) saturate(0); }
}

@keyframes gb-ball-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-16deg); }
  75% { transform: rotate(16deg); }
}

@keyframes gb-ball-click {
  0% { transform: translateY(0); }
  35% { transform: translateY(2px) scaleY(0.9); }
  100% { transform: translateY(0); filter: brightness(0.82); }
}

@keyframes gb-ball-break {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.25); filter: brightness(2.5); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes gb-absorb {
  0% { filter: none; opacity: 1; transform: scale(1); }
  30% { filter: brightness(3) sepia(1) saturate(6) hue-rotate(-20deg); opacity: 1; transform: scale(1); }
  100% { filter: brightness(3) sepia(1) saturate(6) hue-rotate(-20deg); opacity: 0; transform: scale(0.12); }
}

@keyframes gb-release {
  0% { opacity: 0; transform: scale(0.12); filter: brightness(3); }
  40% { opacity: 1; transform: scale(1.12); filter: brightness(3); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  max-width: 1400px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}

.topbar__brand { font-weight: bold; text-decoration: none; color: var(--text); }
.topbar__links { display: flex; align-items: center; gap: 14px; }
.topbar__links a { color: var(--dim); text-decoration: none; }
.topbar__links a:hover { color: var(--text); }
.topbar__user { color: var(--dim); }

.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}
.linkish:hover { color: var(--text); }

.flash {
  max-width: 1400px;
  margin: 8px auto 0;
  padding: 8px 24px;
  font-size: 12px;
}
.flash--notice { color: var(--accent); }
.flash--alert { color: #e0736b; }

.auth {
  max-width: 360px;
  margin: 48px auto;
  padding: 0 24px;
}
.auth h1 { font-size: 16px; margin: 0 0 16px; }
.auth .field { margin-bottom: 12px; }
.auth label { display: block; color: var(--dim); margin-bottom: 4px; }
.auth input[type="email"],
.auth input[type="password"] {
  width: 100%;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
}
.auth .actions { margin-top: 16px; }
.auth button {
  padding: 8px 14px;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #12140f;
  font: inherit;
  cursor: pointer;
}
.auth .links { margin-top: 16px; }
.auth .links a { color: var(--dim); display: block; margin-bottom: 4px; }
.auth .error {
  color: #e0736b;
  margin-bottom: 12px;
  font-size: 12px;
}

.games {
  max-width: 640px;
  margin: 32px auto;
  padding: 0 24px;
}
.games h1 { font-size: 16px; margin: 0 0 16px; }
.games__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.game-row__meta { color: var(--dim); font-size: 12px; }
.game-row__actions { display: flex; gap: 8px; }
.game-row button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.game-row button.primary { background: var(--accent); color: #12140f; border-color: var(--accent); }
.games__empty { color: var(--dim); margin-bottom: 20px; }
.games__new button {
  padding: 8px 14px;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #12140f;
  font: inherit;
  cursor: pointer;
}
.battle-overlay { user-select: none !important; }
.inspector {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.inspector__launcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  opacity: 0.75;
}
.inspector__launcher:hover { opacity: 1; }
.inspector__badge {
  min-width: 16px;
  padding: 0 5px;
  text-align: center;
  border-radius: 999px;
  background: var(--accent);
  color: #12140f;
}
.inspector__panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 40px;
  width: 460px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.inspector--open .inspector__panel { display: flex; }
.inspector--open .inspector__launcher { opacity: 1; }
.inspector__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.inspector__bar strong { font-weight: 600; }
.inspector__filters { display: flex; gap: 4px; }
.inspector__bar-right { margin-left: auto; display: flex; gap: 4px; }
.inspector__bar button {
  padding: 3px 8px;
  background: var(--bg);
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.inspector__bar button.is-active { color: #12140f; background: var(--accent); border-color: var(--accent); }
.inspector__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.inspector__row {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
}
.inspector__row--in { border-left-color: var(--accent); }
.inspector__head { display: flex; align-items: baseline; gap: 8px; }
.inspector__tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 11px;
}
.inspector__tag--ok { color: var(--accent); border-color: var(--accent); }
.inspector__tag--err { color: #e06c6c; border-color: #e06c6c; }
.inspector__tag--pending { color: var(--dim); }
.inspector__tag--stream { color: #12140f; background: var(--accent); border-color: var(--accent); }
.inspector__tag--carries-stream { box-shadow: inset 0 0 0 1px var(--accent); }
.inspector__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector__meta { flex: none; color: var(--dim); font-size: 11px; }
.inspector__preview {
  margin: 6px 0 0;
  padding: 6px 8px;
  max-height: 140px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
}