/* Dailydung — dark dungeon palette, flat vector look. */
:root {
  --bg: #14161c;
  --panel: #1d212b;
  --panel-edge: #2a3040;
  --floor: #5d626e;
  --floor-alt: #565b66;
  --wall: #1a1e26;
  --board-bg: #0c0e13;
  --trap-tint: #5f5870;
  --text: #d7dce6;
  --dim: #8b93a7;
  --accent: #e8b93c;
  --hp: #e74c3c;
  --hp-track: #3a2026;
  --gate: #7fe3ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-edge);
  position: relative;
}
#logo { width: 34px; height: 34px; flex: none; }
#topbar h1 {
  margin: 0;
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  font-size: 28px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(232, 185, 60, .35);
}
#date-label { color: var(--dim); font-size: 13px; }
#share-btn {
  position: absolute;
  right: 18px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
#share-btn:hover { background: var(--panel-edge); }

/* board and sidebar share one flex track so their widths always match */
#layout {
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: center;
  padding: 18px;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 0 auto;
}

#board-wrap, #side {
  flex: 1 1 320px;
  max-width: 620px;
}

#board-wrap {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

#game {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--board-bg);
}

/* small action buttons under the board */
#board-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
#board-actions button {
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
#board-actions button:hover { background: var(--panel-edge); }

/* tiles & walls — the floor is a lighter rock so revealed tiles read clearly */
.tile { fill: var(--floor); }
.tile:nth-child(odd) { fill: var(--floor-alt); }
.tile.trap-tint { fill: var(--trap-tint); }
.wall { fill: var(--wall); }

/* fog of war: three states — unexplored (black), explored (half-shadow),
   clear (in sight, fully transparent so the rock floor shows through) */
.fog { fill: var(--board-bg); transition: opacity .25s ease; }
.fog.explored { opacity: .55; }
.fog.clear { opacity: 0; }

/* the sprite sheet must stay in the render tree (not display:none) or its
   paint servers — like #torch-grad — stop resolving and the aura vanishes */
.sprite-sheet {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* torch light under the hero — a soft pulsing glow so the hero always reads.
   No ring stroke: the hard circle read as a bug, the glow alone is the aura. */
#hero-aura {
  fill: url(#torch-grad);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: aura-pulse 2.4s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: 1; }
}

/* held weapon shown just outside the hero's square, pointing the facing way */
#hero-weapon { pointer-events: none; }

/* totem zap: a small AoE ring where the damage landed */
.zap {
  fill: rgba(127, 227, 255, .22);
  stroke: var(--gate);
  stroke-width: 2.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: zap-ring .5s ease-out forwards;
}
@keyframes zap-ring {
  0% { opacity: 1; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* floating damage numbers: rise and fade over ~1s */
.dmg-num {
  font-size: 15px;
  font-weight: 700;
  fill: #ffd24a;
  stroke: #14161c;
  stroke-width: 3px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
  animation: dmg-float 1s ease-out forwards;
}
.dmg-num.dmg-hero { fill: #ff5040; }
/* a critical hit: bigger, hotter, and it says so */
.dmg-num.dmg-crit {
  font-size: 21px;
  fill: #ff9d3c;
  stroke-width: 4px;
}
/* a miss: a grey "MISS" where the damage number would be */
.miss-num {
  font-size: 12px;
  font-weight: 700;
  fill: #8b93a7;
  stroke: #14161c;
  stroke-width: 3px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
  animation: dmg-float .9s ease-out forwards;
}
@keyframes dmg-float {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}

/* wall torch: a soft warm glow that reads as a light source */
.torch-glow {
  fill: url(#torch-grad);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .8;
}

/* a hall table: one connected wooden slab spanning its tiles */
.furn-table {
  fill: #8a5a2b;
  stroke: #a06a35;
  stroke-width: 2;
}

/* hit particles: small dots that burst outward and fade (moved via WAAPI) */
.particle { pointer-events: none; }

/* kill burst: an expanding ring where an enemy died */
.kill-ring {
  fill: none;
  stroke: #cfd6dd;
  stroke-width: 2.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: zap-ring .5s ease-out forwards;
}

/* mage fireball: a glowing orb that travels to the target (moved via WAAPI) */
.fireball {
  fill: #ff9d3c;
  stroke: #ffd24a;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px #ff9d3c);
  pointer-events: none;
}

/* totem lightning: a quick cyan bolt from totem to target */
.lightning {
  stroke: var(--gate);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--gate));
  pointer-events: none;
  animation: lightning-fade .26s ease-out forwards;
}
@keyframes lightning-fade {
  0% { opacity: 1; }
  60% { opacity: .9; }
  100% { opacity: 0; }
}

/* totem turn counter: how many turns the totem will keep standing */
.totem-life {
  font-size: 11px;
  font-weight: 700;
  fill: var(--gate);
  stroke: #14161c;
  stroke-width: 3px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
}

/* hit feedback: the hero flashes red, the board shakes */
#hero-use.hit { animation: hero-hit .3s ease; }
@keyframes hero-hit {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(0 0 8px #ff5040) brightness(1.8) saturate(2); }
}
#board-wrap.shake { animation: board-shake .3s ease; }
@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* sprites */
.sprite { transition: x .12s ease, y .12s ease; }
.sprite.unaware { opacity: .55; }
.sprite.dying { opacity: 0; transition: opacity .2s ease; }
#hero-use { transition: x .12s ease, y .12s ease; }

.gate { animation: gate-pulse 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes gate-pulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px var(--gate)); }
}

/* side panel — flex: 1 1 320px (shared with #board-wrap) keeps the widths matched */
#side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#class-box {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 10px 14px;
}
#class-name {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#class-blurb {
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 4px;
}
#hud {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.hud-label {
  width: 64px;
  color: var(--dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}
/* segmented HP bar: one cell per point of max HP, so the remaining health
   reads at a glance instead of as a continuous fill */
#hud-hp-track {
  flex: 1;
  display: flex;
  gap: 2px;
  height: 12px;
}
.hp-seg {
  flex: 1;
  background: var(--hp-track);
  border-radius: 2px;
  transition: background .15s ease;
}
.hp-seg.on { background: var(--hp); }
#hud-hp { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
/* mana bar (mage only): same segmented look as HP, in a cool blue */
#hud-mana-track {
  flex: 1;
  display: flex;
  gap: 2px;
  height: 12px;
}
.mana-seg {
  flex: 1;
  background: #1e2a3a;
  border-radius: 2px;
  transition: background .15s ease;
}
.mana-seg.on { background: var(--gate); }
#hud-mana { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* inventory */
#inventory {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#inventory h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
}
/* inventory is one compact grid of square slots (7 per row); the full
   description shows on hover, a ribbon names the kind, and a +stat shows the
   weapon/armor value at a glance */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.inv-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  cursor: default;
}
.inv-cell svg { width: 20px; height: 20px; }
/* the ribbon: a small colored tab naming the item kind */
.inv-ribbon {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.5;
}
.inv-ribbon.weapon { color: #ffd24a; background: rgba(232, 185, 60, .18); }
.inv-ribbon.armor { color: #7fe3ff; background: rgba(127, 227, 255, .16); }
.inv-ribbon.potion { color: #ff7b6e; background: rgba(231, 76, 60, .18); }
.inv-ribbon.valuable { color: var(--dim); background: rgba(139, 147, 167, .16); }
/* the +stat: damage or defense, shown on the slot */
.inv-stat {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.inv-cell .inv-count {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.inv-cell.held {
  border-color: var(--accent);
  background: rgba(232, 185, 60, .12);
  box-shadow: 0 0 6px rgba(232, 185, 60, .35);
}
/* disabled (berserker potions): greyed and struck through */
.inv-cell.disabled { opacity: .45; }
.inv-cell.disabled svg { filter: grayscale(1); }
.inv-cell.disabled::after {
  content: '';
  position: absolute;
  left: 8%;
  top: 50%;
  width: 84%;
  height: 2px;
  background: #ff5040;
  transform: rotate(-24deg);
}
.inv-cell.empty { opacity: .35; }

#log {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 96px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
}
#log div:first-child { color: var(--text); }

#help {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--dim);
}
#help p { margin: 3px 0; }

/* modals (class test menu, bestiary) */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.modal.hidden { display: none; }
.modal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 22px 26px;
  width: min(92vw, 460px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.modal-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.class-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  color: var(--text);
}
.class-opt:hover { border-color: var(--accent); background: rgba(232, 185, 60, .08); }
.class-opt-icon { width: 30px; height: 30px; flex: none; margin-top: 2px; }
.class-opt-text { flex: 1; min-width: 0; }
.class-opt-name {
  display: block;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}
.class-opt-desc { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; line-height: 1.4; }

/* bestiary (in its modal): every enemy, its stats, and what it does.
   Rows carry the same bordered card look as the class options. */
.bestiary-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.bestiary-row svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.bestiary-text { flex: 1; font-size: 12px; line-height: 1.4; }
.bestiary-name { color: var(--text); font-weight: 600; }
.bestiary-stats { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.bestiary-desc { color: var(--dim); margin-top: 1px; }

/* footer credits */
#credits {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 18px 22px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}
#credits p { margin: 5px 0; }
#credits b { color: var(--text); font-weight: 600; }

/* overlay */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#overlay.hidden { display: none; }
#overlay-card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 28px 36px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
#overlay-card h2 {
  margin: 0 0 12px;
  font-size: 24px;
  color: var(--accent);
  letter-spacing: 1px;
}
#overlay-body p { margin: 8px 0; font-size: 15px; }
#overlay-body .big { font-size: 20px; }
#overlay-body .best { color: var(--accent); font-weight: 600; }
#overlay-body .blurb { color: var(--dim); font-size: 14px; }
#overlay-body .hint { color: var(--dim); font-size: 13px; margin-top: 16px; }
/* Rogule-style share snippet: a monospace emoji grid, copyable */
#share-snippet {
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  text-align: left;
}
#copy-snippet {
  margin-top: 10px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
#copy-snippet:hover { background: var(--panel-edge); }

/* mobile touch controls: a D-pad + a class action button. Shown only on
   coarse-pointer devices (phones/tablets); desktop keeps the keyboard. */
#touch-controls {
  display: none;
  margin-top: 12px;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
#dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 6px;
}
.dpad-btn {
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.dpad-btn:active { background: var(--panel-edge); }
.dpad-btn[data-dir="n"] { grid-column: 2; grid-row: 1; }
.dpad-btn[data-dir="w"] { grid-column: 1; grid-row: 2; }
.dpad-btn[data-dir="s"] { grid-column: 2; grid-row: 2; }
.dpad-btn[data-dir="e"] { grid-column: 3; grid-row: 2; }
#touch-action {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  border: 2px solid var(--accent);
  font-size: 26px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
#touch-action:active { background: var(--panel-edge); }

@media (pointer: coarse) {
  #touch-controls { display: flex; }
  #help { display: none; } /* the D-pad replaces the key list on touch */
}

/* small phones: stack the board above the sidebar and let the board breathe */
@media (max-width: 560px) {
  #layout { padding: 10px; gap: 12px; }
  #board-wrap, #side { max-width: none; }
  #topbar h1 { font-size: 22px; letter-spacing: 3px; }
  #share-btn { position: static; }
}