:root {
  --bg: #0f1013;
  --panel: #181a1f;
  --panel-2: #20232a;
  --line: #2c3038;
  --text: #d9dbe0;
  --muted: #8a8f99;
  --accent: #b48cff;
  --hp: #d0504a;
  --sp: #4a86d0;
  --shield: #c9b458;
  --physical: #c7c7c7;
  --fire: #ff7a45;
  --cold: #6ec6ff;
  --poison: #8bd44a;
  --magic: #6ec6ff;
  --rare: #ffd84a;
  --ruins: #4a4540;
  --forest: #2f4a2c;
  --swamp: #2f4440;
  --ashlands: #5a3326;
  --tundra: #4b5866;
  --town: #6a5a8a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 Raleway, system-ui, sans-serif;
}
button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
input {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}
h1, h2, h3 { margin: 0; font-weight: 700; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.muted { color: var(--muted); }
.error { color: var(--hp); }
[hidden] { display: none !important; }

/* login */
.login { max-width: 420px; margin: 15vh auto; padding: 0 16px; text-align: center; }
.login h1 { font-size: 40px; color: var(--accent); }
.tagline { color: var(--muted); }
.login form { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 24px; }

/* layout */
.game { display: grid; grid-template-columns: 1fr 320px; gap: 12px; padding: 12px; height: 100%; }
.stage-wrap { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.side { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }

.room-head { display: flex; justify-content: space-between; align-items: center; }
.compass { display: grid; grid-template-areas: ". n ." "w . e" ". s ."; gap: 2px; }
.compass button { width: 34px; padding: 4px 0; }
.compass .n { grid-area: n; } .compass .s { grid-area: s; } .compass .e { grid-area: e; } .compass .w { grid-area: w; }

.stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 300px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background: radial-gradient(ellipse at center, var(--panel-2), var(--bg));
  transition: background 0.4s;
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-width: 4px;
  border-right-width: 4px;
}
.stage.biome-ruins { background: radial-gradient(ellipse at center, #2a2724, var(--bg)); }
.stage.biome-forest { background: radial-gradient(ellipse at center, #1c2b1a, var(--bg)); }
.stage.biome-swamp { background: radial-gradient(ellipse at center, #1a2826, var(--bg)); }
.stage.biome-ashlands { background: radial-gradient(ellipse at center, #33201a, var(--bg)); }
.stage.biome-tundra { background: radial-gradient(ellipse at center, #232c36, var(--bg)); }
.stage.biome-town { background: radial-gradient(ellipse at center, #2a2338, var(--bg)); }
.stage.open-n { border-top-color: transparent; }
.stage.open-s { border-bottom-color: transparent; }
.stage.open-e { border-right-color: transparent; }
.stage.open-w { border-left-color: transparent; }
.stage.moved { animation: fadein 0.3s; }
@keyframes fadein { from { opacity: 0.3; } to { opacity: 1; } }

.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 80px; }
.unit {
  width: 140px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.1s;
}
.unit:hover { border-color: var(--muted); }
.unit.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.unit.elite { border-color: var(--rare); }
.unit.hit { animation: shake 0.25s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.unit .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit .sub { font-size: 11px; color: var(--muted); }
.unit .res { font-size: 11px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

.bar-meter { height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.bar-meter > div { height: 100%; transition: width 0.3s; }
.bar-meter.hp > div { background: var(--hp); }
.bar-meter.sp > div { background: var(--sp); }

.floor { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 28px; }
.floor button { font-size: 12px; }

.el-physical { color: var(--physical); }
.el-fire { color: var(--fire); }
.el-cold { color: var(--cold); }
.el-poison { color: var(--poison); }
.rarity-magic { color: var(--magic); }
.rarity-rare { color: var(--rare); }

.bar { display: flex; gap: 8px; justify-content: center; }
.skill {
  position: relative;
  width: 110px;
  padding: 8px 6px;
  text-align: center;
  overflow: hidden;
}
.skill .key { position: absolute; top: 2px; left: 6px; font-size: 11px; color: var(--muted); }
.skill .cost { display: block; font-size: 11px; color: var(--sp); }
.skill .cd { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.attack-btn { width: 90px; }

.log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
}
.log div { padding: 1px 0; }
.log .combat { color: var(--text); }
.log .hurt { color: #ff8f8a; }
.log .heal { color: #8fe3a0; }
.log .loot { color: var(--rare); }
.log .room { color: #b9c3d6; font-style: italic; }
.log .say { color: #fff; }
.log .global { color: var(--accent); font-weight: 600; }
.log .error { color: var(--muted); }
.log .system { color: var(--muted); }
.chat input { width: 100%; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: 13px; margin-top: 8px; }
.stats span:nth-child(even) { text-align: right; }

.map { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.map .cell { aspect-ratio: 1; position: relative; font-size: 10px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.5); border: 2px solid var(--bg); }
.map .cell.open-n { border-top-color: transparent; }
.map .cell.open-s { border-bottom-color: transparent; }
.map .cell.open-e { border-right-color: transparent; }
.map .cell.open-w { border-left-color: transparent; }
.map .cell.here { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; color: #fff; font-weight: 700; }
.map .cell.others::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.map .ruins { background: var(--ruins); } .map .forest { background: var(--forest); } .map .swamp { background: var(--swamp); }
.map .ashlands { background: var(--ashlands); } .map .tundra { background: var(--tundra); } .map .town { background: var(--town); }

.tabs { display: flex; gap: 6px; }
.tabs button.active { border-color: var(--accent); }

.list { display: flex; flex-direction: column; gap: 4px; }
.list .entry { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; }
.list .entry .actions { display: flex; gap: 4px; flex-shrink: 0; }
.list .entry button { padding: 1px 6px; font-size: 12px; }
.props { font-size: 11px; color: var(--muted); }
.section-gap { margin-top: 12px; }

@media (max-width: 800px) {
  .game { grid-template-columns: 1fr; height: auto; }
  .unit { width: 120px; }
  .bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .skill { width: auto; font-size: 12px; padding: 14px 2px 6px; }
  .log { max-height: 220px; }
}