/* Dark Mage of Mossfen — HUD. One deliberate dark look (it's a game world):
   moss-black glass panels, tarnished-brass edges, bone-coloured type. */
:root {
  color-scheme: dark;
  --ground: #0f1511;
  --panel: rgba(17, 23, 19, 0.86);
  --panel-solid: #161e19;
  --edge: rgba(206, 184, 118, 0.28);
  --edge-strong: #b59a55;
  --ink: #efe6cf;
  --ink-dim: #b6ac92;
  --ink-faint: #7e7862;
  --hp: #72cf52;
  --sp: #4f9ff0;
  --exp: #e8b33a;
  --mhp: #e0533d;
  --fire: #ff8a3a;
  --ice: #7fd4ff;
  --mix: #d7a8ff;
  --danger: #f06552;
  --radius: 6px;
  --f-display: 'Alegreya Sans SC', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Alegreya Sans', 'Trebuchet MS', system-ui, sans-serif;
  /* every number and small key mark in the HUD (damage, SP cost, skill points, gold, stack and ward counts):
     Lilita One keeps 3/5/6/8 apart where the old pixel face (Pixelify Sans) blurred them. It has one weight only,
     so rules using it say 400 (700 would fake a smeared bold). */
  --f-num: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.35 var(--f-body);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#app { position: relative; height: 100%; overflow: hidden; }

#scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: default;
}
#scene.is-over-monster {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M2 2 L16 16' stroke='%231b140f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M2 2 L16 16' stroke='%23e8eef2' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M12 19 L19 12' stroke='%231b140f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M12 19 L19 12' stroke='%23c9a24a' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M17 17 L23 23' stroke='%231b140f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M17 17 L23 23' stroke='%237a4f2c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 2 2, pointer;
}
#scene.is-targeting { cursor: crosshair; }

#world-ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---- windows ------------------------------------------------------------ */
.win {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), 0 8px 22px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 8px 10px 10px;
}
.win header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 1px solid var(--edge);
}
.win-title { font: 700 16px/1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); }
.win-meta { font: 500 13px/1 var(--f-display); letter-spacing: 0.04em; color: var(--ink-dim); }
.win-meta b { color: var(--ink); font-weight: 700; }

.bar {
  position: relative; height: 9px;
  background: #080b09;
  border: 1px solid #000;
  border-radius: 2px;
  overflow: hidden;
}
.bar b {
  display: block; height: 100%; width: 0;
  background: linear-gradient(#fff3 0 35%, transparent 35%), var(--c, var(--hp));
  transition: width 0.12s linear;
}
.bar.hp { --c: var(--hp); }
.bar.hp.is-low { --c: var(--danger); }
.bar.sp { --c: var(--sp); }
.bar.exp { --c: var(--exp); height: 6px; }
.bar.mhp { --c: var(--mhp); height: 10px; }

/* status */
#status { top: 12px; left: 12px; width: 250px; }
.meter { display: grid; grid-template-columns: 30px 1fr 76px; align-items: center; gap: 8px; margin-top: 4px; }
.meter > span { font: 700 12px/1 var(--f-display); letter-spacing: 0.08em; color: var(--ink-dim); }
.meter output { font: 500 13px/1 var(--f-body); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px;
  margin: 9px 0 0; padding-top: 7px; border-top: 1px solid var(--edge);
}
.stats div { display: flex; justify-content: space-between; gap: 6px; }
.stats dt { font: 500 12px/1.5 var(--f-display); letter-spacing: 0.06em; color: var(--ink-faint); }
.stats dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }

/* target */
#target { top: 12px; left: 50%; transform: translateX(-50%); width: 300px; }
#target .win-title, #target .win-meta { white-space: nowrap; }
.tg-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--ink-dim); }
.tg-foot output { color: var(--ink); font-variant-numeric: tabular-nums; }
.tg-elems { display: flex; gap: 12px; margin-top: 3px; }
.elem { font: 700 12px/1.4 var(--f-display); letter-spacing: 0.04em; color: var(--ink-dim); }
.elem.is-weak { color: var(--fire); }
.elem.is-resist { color: #8fa3b3; }
#tg-ice.is-weak { color: var(--ice); }

/* help: the Controls window, opened with "?" beside the minimap or H (v0.21; it used to sit open in this corner) */
#help {
  top: 12px; right: 12px; z-index: 5;
  width: min(410px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
}
#help header { align-items: center; }
#help dl { margin: 0; display: grid; gap: 3px; }
#help dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
#help dt { color: var(--ink); white-space: nowrap; }
#help dd { margin: 0; color: var(--ink-dim); text-align: right; }
.help-note { margin: 8px 0 0; font-size: 13px; color: var(--fire); }

/* log */
#log {
  left: 12px; bottom: 12px;
  width: clamp(200px, calc(50% - 322px), 390px);       /* room for the nine-key hotbar */
  height: 142px;
  overflow-y: auto;
  padding: 6px 10px;
  scrollbar-width: thin;
}
#log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
#log li { font-size: 13.5px; color: var(--ink-dim); }
#log .tone-system { color: #9fd0c0; }
#log .tone-loot { color: var(--ink); }
#log .tone-fire { color: #ffb37a; }
#log .tone-level { color: var(--exp); font-weight: 700; }
#log .tone-danger { color: var(--danger); }
#log .tone-muted { color: var(--ink-faint); font-style: italic; }
#log .tone-mix { color: var(--mix); }
#log .tone-ice { color: #9fe0ff; }

/* hotbar */
#hotbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
.slot {
  position: relative; width: 50px; height: 50px; padding: 0;
  border: 1px solid #000; border-radius: 4px;
  background: #0b0f0c;
  color: var(--ink);
  overflow: hidden;
}
button.slot { cursor: pointer; box-shadow: inset 0 0 0 1px var(--edge-strong); }
button.slot:hover { box-shadow: inset 0 0 0 1px #f3d68a; }
button.slot:focus-visible { outline: 2px solid #f3d68a; outline-offset: 2px; }
.slot img { display: block; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; -webkit-user-drag: none; }
.slot .key {
  position: absolute; left: 3px; top: 1px;
  font: 400 13px/1 var(--f-num); color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.slot .cost {
  position: absolute; right: 2px; bottom: 1px;
  font: 400 11px/1 var(--f-num); letter-spacing: 0.02em; color: #cfe6ff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.slot .cd {
  position: absolute; inset: 0;
  background: conic-gradient(rgba(0, 0, 0, 0.72) calc(var(--cd, 0) * 360deg), transparent 0);
  pointer-events: none;
}
.slot .lock {
  position: absolute; inset: 0; display: none; place-items: center;
  font: 400 22px/1 var(--f-num); color: var(--ink-faint);
}
.slot.is-locked img, .slot.is-locked .cost { display: none; }
.slot.is-locked .lock { display: grid; }
.slot.is-locked { background: repeating-linear-gradient(135deg, #0b0f0c 0 6px, #111713 6px 12px); }
button.slot.is-locked { box-shadow: inset 0 0 0 1px var(--edge); }
.slot.can-mix { box-shadow: inset 0 0 0 2px var(--mix), 0 0 14px var(--mix); animation: mix-pulse 0.5s ease-in-out infinite alternate; }
.slot.just-learned { animation: learned 1.4s ease-out 1; }
@keyframes mix-pulse { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes learned {
  0% { transform: scale(1.35); box-shadow: 0 0 0 3px var(--exp), 0 0 28px var(--exp); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 1px var(--edge-strong); }
}
.slot.no-sp img { filter: grayscale(0.85) brightness(0.6); }
.slot.is-armed { box-shadow: inset 0 0 0 2px var(--fire), 0 0 12px var(--fire); }
.slot.is-casting { box-shadow: inset 0 0 0 2px #ffe08a; }
.slot.is-active { box-shadow: inset 0 0 0 2px #8fe4ff, 0 0 12px rgba(143, 228, 255, 0.7); }   /* a ward that is up */

/* active wards: an icon per ward above the hotbar, with a time bar and its blocks left */
#buffs {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  display: flex; gap: 8px; pointer-events: none;
}
.buff {
  position: relative; width: 38px; height: 38px;
  border: 1px solid #000; border-radius: 4px; overflow: hidden;
  background: #0b0f0c;
  box-shadow: 0 0 0 2px var(--buff, #8fe4ff), 0 0 12px var(--buff, #8fe4ff);
}
.buff img { display: block; width: 100%; height: 100%; }
.buff-count {
  position: absolute; right: 2px; top: 1px;
  font: 400 12px/1 var(--f-num); color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.buff-time { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, 0.7); }
.buff-time u { display: block; height: 100%; background: var(--buff, #8fe4ff); text-decoration: none; }
.buff.is-ending { animation: buff-blink 0.35s steps(2) infinite; }
/* a debuff from a monster's spell (v0.15): a small text chip instead of a spell icon */
.buff.is-debuff {
  width: auto; min-width: 64px; height: 38px; padding: 0 9px; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 0 0 2px var(--buff), 0 0 10px color-mix(in srgb, var(--buff) 55%, transparent);
  font: 600 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--buff);
}
.buff.is-debuff .buff-count { position: static; font: 400 14px/1 var(--f-num); color: #fff; text-shadow: 0 0 2px #000; }
@keyframes buff-blink { 50% { opacity: 0.45; } }

/* hint + toast */
#hint, #toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--edge);
  font-size: 14px; white-space: nowrap; pointer-events: none;
}
#hint { top: 118px; color: var(--ink); }
#hint b { color: var(--fire); }
#toast { top: 38%; color: #ffd6c8; border-color: rgba(240, 101, 82, 0.5); }

/* new-spell banner */
#banner {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--exp);
  box-shadow: 0 0 0 1px #000, 0 0 32px rgba(232, 179, 58, 0.35);
  pointer-events: none;
}
#banner img { width: 52px; height: 52px; border-radius: 4px; border: 1px solid #000; }
#banner div { display: grid; gap: 2px; }
#banner small { font: 700 12px/1 var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--exp); }
#banner strong { font: 700 24px/1.1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); }
#banner span { font-size: 13px; color: var(--ink-dim); }
#banner.is-showing { animation: banner-in 0.45s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes banner-in { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.link-btn {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px/1.3 var(--f-body); color: var(--ink-faint); text-decoration: underline;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--ink); }
.link-btn.is-confirming { color: var(--danger); }

/* death */
#death {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(8, 10, 9, 0.55);
}
.death-card { position: static; width: min(320px, calc(100% - 32px)); text-align: center; padding: 18px 18px 16px; }
.death-card h2 { margin: 0 0 6px; font: 700 24px/1.1 var(--f-display); color: var(--danger); letter-spacing: 0.03em; }
.death-card p { margin: 0 0 14px; color: var(--ink-dim); }
.death-card button {
  font: 700 15px/1 var(--f-display); letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: 4px; cursor: pointer;
  color: #1b140f; background: linear-gradient(#f3d68a, #c99d45); border: 1px solid #000;
}
.death-card button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#boot {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 18px var(--f-display); letter-spacing: 0.06em; color: var(--ink-dim);
  background: var(--ground); padding-inline: 16px; text-align: center;
}

/* ---- world overlay: nameplates, bars, numbers --------------------------- */
.unit { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.unit-bars { position: absolute; left: -24px; top: 7px; width: 48px; display: grid; gap: 1px; }
.unit-bars i { display: block; height: 5px; background: #080b09; border: 1px solid #000; }
.unit-bars b { display: block; height: 100%; width: 100%; background: var(--hp); }
.unit-bars .sp b { background: var(--sp); }
.unit-monster .unit-bars b { background: var(--mhp); }
.unit-player.is-dead .unit-bars { opacity: 0.35; }
.unit-player .unit-name { color: #cfe6ff; }               /* another player's name (online) */
.unit-name {
  position: absolute; left: 0; transform: translateX(-50%);
  white-space: nowrap;
  font: 700 14px/1 var(--f-display); letter-spacing: 0.03em; color: #f6eed8;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 2px 4px #000;
}
.castbar {
  position: absolute; left: -38px; width: 76px; height: 13px;
  background: #080b09; border: 1px solid #000; border-radius: 2px; overflow: hidden;
}
.castbar b { display: block; height: 100%; width: 0; background: linear-gradient(#fff4 0 40%, transparent 40%), var(--cast, var(--fire)); }
.castbar.is-mixable { box-shadow: 0 0 0 1px var(--mix), 0 0 10px var(--mix); }
.castbar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 10px/1 var(--f-display); letter-spacing: 0.05em; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}

.dmg {
  position: absolute; left: 0; top: 0;
  font: 400 22px/1 var(--f-num); letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  will-change: transform, opacity;
  text-shadow: 2px 0 0 #1b140f, -2px 0 0 #1b140f, 0 2px 0 #1b140f, 0 -2px 0 #1b140f,
               1px 1px 0 #1b140f, -1px -1px 0 #1b140f, 1px -1px 0 #1b140f, -1px 1px 0 #1b140f;
}
.dmg-fire { color: #ffcf70; }
.dmg-crit { color: #ffe14a; font-size: 29px; }
.dmg-in { color: #ff6b5a; }
.dmg-miss { color: #a9dbff; font-size: 17px; }
.dmg-block { color: #8fe4ff; font-size: 19px; }        /* a ward swallowed the whole hit */
.dmg-note { font: 700 14px/1 var(--f-display); letter-spacing: 0.04em; color: #ffb36a; }
.dmg-level { font: 700 27px/1 var(--f-display); letter-spacing: 0.04em; color: #ffe28a; }

/* ---- small screens -------------------------------------------------------- */
@media (max-width: 760px) {
  #status { width: calc(50% - 18px); padding: 6px 8px 8px; }
  .meter { grid-template-columns: 26px 1fr; }
  .meter output { display: none; }
  .stats { display: none; }
  #target { left: auto; right: 12px; transform: none; width: calc(50% - 18px); padding: 6px 8px 8px; }
  #tg-state { display: none; }
  #banner { top: 30%; width: calc(100% - 32px); }
  #help { bottom: 84px; max-height: none; }
  #log { bottom: 76px; height: 78px; width: calc(100% - 24px); }
  #hint { top: auto; bottom: 170px; white-space: normal; width: calc(100% - 32px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bar b { transition: none; }
}

/* spell colours for floating text */
.dmg-ice { color: #bfefff; }
.dmg-mist { color: #e6eef2; }
.dmg-mix { font: 700 16px/1 var(--f-display); letter-spacing: 0.04em; color: var(--mix); }
.dmg-note.note-ice { color: #9fe0ff; }
.dmg-note.note-dodge { color: #d4b8ff; }

/* ---- hotbar: player-defined keys ----------------------------------------- */
.slot .lv {
  position: absolute; right: 2px; top: 1px;
  font: 400 11px/1 var(--f-num); color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.slot .tier { position: absolute; inset: 0; border: 2px solid transparent; border-radius: 3px; pointer-events: none; }
.slot[data-tier="silver"] .tier, [data-tier="silver"] > .sk-icon, img[data-tier="silver"] { border-color: #c7d3dc; }
.slot[data-tier="gold"] .tier, [data-tier="gold"] > .sk-icon, img[data-tier="gold"] { border-color: var(--exp); }
.slot[data-tier="max"] .tier, [data-tier="max"] > .sk-icon, img[data-tier="max"] {
  border-color: #fff4c2; box-shadow: 0 0 10px var(--exp), inset 0 0 8px rgba(255, 228, 140, 0.6);
}
.slot.is-empty img, .slot.is-empty .lv, .slot.is-empty .cost { display: none; }
.slot.is-empty { background: #0b0f0c; opacity: 0.6; }
.slot { touch-action: none; }
.bar-btn {
  position: relative; display: grid; place-items: center; gap: 2px;
  min-width: 56px; height: 50px; padding: 0 8px;
  border: 1px solid #000; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#2a3329, #161d18);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
  color: var(--ink); font: 700 13px/1 var(--f-display); letter-spacing: 0.04em;
}
.bar-btn kbd { font: 400 11px/1 var(--f-num); color: var(--ink-faint); }
.bar-btn:hover, .bar-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #f3d68a; }
.bar-btn:focus-visible { outline: 2px solid #f3d68a; outline-offset: 2px; }
.bar-btn .pts {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 10px; border: 1px solid #000;
  background: var(--exp); color: #1b140f; font: 400 13px/1 var(--f-num);
}
.bar-btn.has-points { animation: pts-pulse 1.2s ease-in-out infinite; }
@keyframes pts-pulse { 50% { box-shadow: inset 0 0 0 1px var(--exp), 0 0 14px rgba(232, 179, 58, 0.6); } }
body.skills-open .slot, body.is-dragging-skill .slot { outline: 1px dashed rgba(215, 168, 255, 0.55); outline-offset: 1px; }
.slot.drop-hover { outline: 2px solid var(--mix) !important; box-shadow: 0 0 16px var(--mix); }
.sk-ghost {
  position: fixed; left: 0; top: 0; width: 44px; height: 44px; z-index: 50; pointer-events: none;
  border-radius: 4px; border: 1px solid #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); opacity: 0.92;
}
body.is-dragging-skill { cursor: grabbing; }

/* ---- skill tree window ---------------------------------------------------- */
#skilltree {
  top: 12px; right: 12px; z-index: 5;
  width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
}
#skilltree header { align-items: center; }
.sk-points { margin-left: auto; font: 600 13px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink-dim); }
.sk-points b { display: inline-block; min-width: 20px; margin-left: 4px; padding: 3px 6px; border-radius: 10px; text-align: center; background: #0b0f0c; color: var(--ink); font: 400 14px/1 var(--f-num); letter-spacing: 0.02em; }
.sk-points.has-points b { background: var(--exp); color: #1b140f; }
.win-close {
  width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--edge); cursor: pointer;
  background: transparent; color: var(--ink-dim); font: 700 18px/1 var(--f-body);
}
.win-close:hover, .win-close:focus-visible { color: var(--ink); border-color: var(--edge-strong); }

.sk-tree { position: relative; margin: 4px 0 10px; }
.sk-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sk-links path { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.6; }
.sk-links path.is-known { stroke: var(--mix); stroke-dasharray: none; opacity: 0.9; }
.sk-tag {
  position: absolute; transform: translateX(-50%);
  font: 400 12px/1 var(--f-num); color: var(--mix); background: var(--panel-solid);
  padding: 2px 5px; border: 1px solid rgba(215, 168, 255, 0.4); border-radius: 8px;
}
.sk-node {
  position: absolute; transform: translateX(-50%); width: 116px;
  display: grid; justify-items: center; gap: 4px; text-align: center;
}
.sk-icon {
  position: relative; width: 56px; height: 56px; padding: 0; cursor: grab; touch-action: none;
  border: 2px solid #7a6a45; border-radius: 6px; background: #0b0f0c; overflow: hidden;
}
.sk-icon img { display: block; width: 100%; height: 100%; pointer-events: none; }
.sk-icon:focus-visible { outline: 2px solid #f3d68a; outline-offset: 2px; }
.sk-lv {
  position: absolute; right: 1px; bottom: 0; min-width: 16px; padding: 0 2px;
  font: 400 14px/1.2 var(--f-num); color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.sk-q { display: none; }
.sk-node.is-locked .sk-icon { cursor: help; border-color: var(--edge); background: repeating-linear-gradient(135deg, #0b0f0c 0 6px, #111713 6px 12px); }
.sk-node.is-locked .sk-icon img { display: none; }
.sk-node.is-locked .sk-q { display: grid; place-items: center; position: absolute; inset: 0; font: 400 24px/1 var(--f-num); color: var(--ink-faint); }
.sk-node.is-selected .sk-icon { outline: 2px solid var(--mix); outline-offset: 3px; }
.sk-name { font: 700 14px/1.1 var(--f-display); letter-spacing: 0.03em; }
.sk-node.is-locked .sk-name { color: var(--ink-faint); }
.sk-pips { display: flex; gap: 2px; }
.sk-pips i { width: 8px; height: 6px; border-radius: 1px; background: #0b0f0c; border: 1px solid #2c3530; }
.sk-pips i.on { background: var(--exp); border-color: #7a5a1a; }
.sk-up {
  position: absolute; top: 16px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid #000; cursor: pointer;
  background: var(--exp); color: #1b140f; font: 700 16px/1 var(--f-body);
}
.sk-up:disabled { background: #2c3530; color: var(--ink-faint); cursor: not-allowed; }
.sk-up:not(:disabled):hover { background: #ffd66a; }

.sk-detail { border-top: 1px solid var(--edge); padding-top: 10px; display: grid; gap: 8px; }
.sk-head { display: flex; align-items: center; gap: 10px; }
.sk-head img, .sk-head-icon { width: 44px; height: 44px; border-radius: 4px; border: 2px solid #7a6a45; }
.sk-head-icon { display: grid; place-items: center; font: 400 20px/1 var(--f-num); color: var(--ink-faint); background: #0b0f0c; }
.sk-head strong { display: block; font: 700 18px/1.1 var(--f-display); letter-spacing: 0.03em; }
.sk-head span { font-size: 13px; color: var(--ink-dim); }
.sk-blurb { margin: 0; font-size: 14px; color: var(--ink-dim); }
.sk-blurb b { color: var(--ink); }
.sk-stats { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sk-stats th, .sk-stats td { padding: 3px 6px; text-align: left; border-bottom: 1px solid rgba(206, 184, 118, 0.12); }
.sk-stats thead th { font: 700 12px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink-faint); }
.sk-stats tbody th { font-weight: 500; color: var(--ink-dim); width: 26%; }
.sk-stats td.up { color: #9be07a; font-weight: 700; }
.sk-stats td.cost { color: #9fc6ec; }
.sk-upgrade {
  justify-self: start; padding: 8px 14px; border-radius: 4px; border: 1px solid #000; cursor: pointer;
  font: 700 14px/1 var(--f-display); letter-spacing: 0.04em;
  color: #1b140f; background: linear-gradient(#f3d68a, #c99d45);
}
.sk-upgrade:disabled { background: #2c3530; color: var(--ink-faint); cursor: not-allowed; }
.sk-upgrade:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sk-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 760px) {
  #skilltree { top: 12px; bottom: 84px; max-height: none; }
  .sk-node { width: 100px; }
  .sk-name { font-size: 13px; }
  .sk-up { right: 8px; }
  .bar-btn { min-width: 46px; height: 44px; padding: 0 4px; }
  .slot { width: 44px; height: 44px; }
  #hotbar { gap: 5px; padding: 5px; }
  .bar-btn span { font-size: 11px; }
}

@media (max-width: 600px) {              /* nine keys plus the Skills button on a phone */
  .slot { width: 34px; height: 34px; }
  #hotbar { gap: 3px; padding: 4px; }
  .slot .cost, .slot .lv { display: none; }
  .bar-btn { min-width: 38px; }
  #buffs { bottom: 74px; }
}

/* ---- mastery gate (Mega Frost) ------------------------------------------- */
.sk-links path.is-gate { stroke: var(--gate, var(--ice)); opacity: 0.45; }
.sk-links path.is-gate.is-known { stroke: var(--gate, var(--ice)); opacity: 0.95; stroke-dasharray: none; }
.sk-tag.is-gate { color: var(--gate, var(--ice)); border-color: color-mix(in srgb, var(--gate, var(--ice)) 45%, transparent); }
.sk-node.is-gated .sk-icon { background: #0b0f0c; cursor: help; }
.sk-node.is-gated .sk-icon img { display: block; filter: grayscale(0.9) brightness(0.5); }
.sk-node.is-gated .sk-q { display: none; }
.sk-node.is-gated .sk-name { color: var(--ink-dim); }
.sk-head img.is-gated { filter: grayscale(0.9) brightness(0.55); }

/* white-blue flash when Mega Frost lands */
.screen-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(235, 250, 255, 0.95), rgba(140, 215, 255, 0.55) 45%, rgba(40, 110, 170, 0.25));
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .screen-flash { display: none; } }

/* golden flash when Flare's ray is released */
.screen-flash.flare-flash {
  background: radial-gradient(circle at 50% 55%, rgba(255, 252, 235, 0.95), rgba(255, 206, 110, 0.55) 45%, rgba(190, 90, 20, 0.25));
}

/* ---- maps: name banner, warp fade, portal labels, frost vignette (v0.8) ---- */
#app { --map-accent: var(--exp); --map-glow: rgba(232, 179, 58, 0.45); }
#app[data-theme="frost"] { --map-accent: #9fe8ff; --map-glow: rgba(111, 208, 255, 0.65); }

#map-banner {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; padding: 10px 28px;
  text-align: center; pointer-events: none; white-space: nowrap;
}
#map-banner::before, #map-banner::after {
  content: ''; display: block; width: min(320px, 70vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--map-accent), transparent);
}
#map-banner::before { order: -1; }
#map-banner small {
  font: 700 12px/1 var(--f-display); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--map-accent); text-shadow: 0 1px 3px #000;
}
#map-banner strong {
  font: 700 42px/1 var(--f-display); letter-spacing: 0.08em; color: #fff9ea;
  text-shadow: 0 0 2px #000, 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 30px var(--map-glow);
}
#map-banner.is-showing { animation: map-in 3.8s ease both; }
@keyframes map-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  14% { opacity: 1; transform: translateX(-50%) translateY(0); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

#warp-fade {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, #0c1a33 0%, #02040a 72%);
  transition: opacity 0.8s ease;
}
#warp-fade.is-on { opacity: 1; transition-duration: 0.35s; }
#warp-fade.is-instant { transition: none; }

#vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 58%, rgba(2, 7, 18, 0.62) 100%);
}
#app[data-theme="frost"] #vignette { opacity: 1; }
/* Harrowdeep (v0.18): the dark closes in from the screen's edge as you go down into the ravine;
   render/terrain-harrowdeep.js sets --gloom (0 on the surface, 1 at the bottom) */
#app[data-theme="harrowdeep"] #vignette, #app[data-theme="builder"] #vignette {
  opacity: var(--gloom, 0); transition: none;
  background: radial-gradient(ellipse 72% 68% at 50% 52%, transparent 42%, rgba(2, 4, 12, 0.78) 100%);
}

.portal-label { position: absolute; left: 0; top: 0; width: 0; height: 0; --portal: #9fe8ff; }
.portal-label b {
  position: absolute; left: 0; bottom: 2px; transform: translateX(-50%); white-space: nowrap;
  font: 700 14px/1 var(--f-display); letter-spacing: 0.04em; color: #fff;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 0 12px var(--portal);
}
.portal-label small {
  position: absolute; left: 0; top: 2px; transform: translateX(-50%); white-space: nowrap;
  font: 700 10px/1 var(--f-display); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--portal); text-shadow: 0 1px 2px #000, 0 0 4px #000;
}

@media (max-width: 640px) {
  #map-banner { top: 16%; }
  #map-banner strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  #map-banner.is-showing { animation-name: map-in-still; }
  @keyframes map-in-still { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
}

/* violet blink of the screen when the mage teleports */
.screen-flash.blink-flash {
  background: radial-gradient(circle at 50% 55%, rgba(245, 235, 255, 0.7), rgba(185, 140, 255, 0.4) 40%, rgba(60, 20, 120, 0.25));
}

/* ---- boss (v0.12) ------------------------------------------------------------------------ */
#boss-bar { top: 12px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); border-color: rgba(255, 170, 70, 0.55); }
#boss-bar .win-title { color: #ffd9a0; letter-spacing: 0.04em; }
#boss-bar .win-meta { color: #ffb347; white-space: nowrap; }
#boss-bar .boss-hp { height: 12px; }
#boss-bar .boss-hp b { background: linear-gradient(180deg, #ff9a4a, #c2410c); }
.boss-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 5px; font-size: 13px; color: var(--ink-dim); }
.boss-foot output { font-variant-numeric: tabular-nums; }
.boss-cast { display: none; position: relative; width: 150px; height: 16px; border-radius: 3px; overflow: hidden;
  background: rgba(40, 20, 5, 0.8); border: 1px solid rgba(255, 211, 90, 0.6); }
.boss-cast.is-on { display: block; }
.boss-cast i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ff9a3a, #ffe08a); }
.boss-cast span { position: relative; display: block; text-align: center; font: 700 11px/16px var(--f-display); letter-spacing: 0.08em; color: #2a1405; text-transform: uppercase; }
#app.has-boss #target { top: 108px; }
#app.has-boss #hint { top: 214px; }
#map-banner.is-boss { --map-accent: #ffb347; --map-glow: rgba(255, 130, 40, 0.7); }