:root {
  --ink: #160f0b;
  --panel: #2b2019;
  --panel-2: #3a2c21;
  --panel-3: #4a3828;
  --edge: #8b6a44;
  --edge-hi: #e0bf7d;
  --text: #f5e9cc;
  --muted: #b8a585;
  --hp: #e0432f;
  --hp-dark: #7d1d14;
  --good: #8fd16a;
  --common: #c1bba9;
  --rare: #5daef5;
  --epic: #c886f5;
  --gold: #ffd166;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0806;
  color: var(--text);
  font:
    600 15px/1.35 "Pretendard",
    "Apple SD Gothic Neo",
    "Malgun Gothic",
    "Noto Sans KR",
    system-ui,
    sans-serif;
  overscroll-behavior: none;
}
/* The game never shows browser selection, callouts or drag images. */
body,
#stage,
#stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#stage input {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  pointer-events: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
kbd {
  font: inherit;
}
/* One fixed-size stage scaled like a single image (16:9 PC, 9:16 mobile). */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #1d2a17;
  touch-action: none;
  contain: strict;
}
#stage.portrait {
  width: 720px;
  height: 1280px;
}
#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: crosshair;
}
/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#hud > * {
  pointer-events: auto;
}
.hud-player {
  position: absolute;
  left: 18px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  outline: 2px solid var(--edge);
  background: radial-gradient(circle at 50% 40%, #4b6a52, #1d2b22);
  overflow: hidden;
  box-shadow: 0 4px 0 #0008;
}
.avatar span {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/assets/act-one/hero-portrait.webp) 50% 6% / 150% auto no-repeat;
}
.bars {
  display: grid;
  gap: 5px;
}
.boss-bar > div {
  position: relative;
  width: 260px;
  height: 26px;
  background: var(--hp-dark);
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 0 #0007;
}
/* Slim summary bar: the main health readout sits under the hero's feet. */
.hp-bar {
  position: relative;
  width: 200px;
  height: 18px;
  background: var(--hp-dark);
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}
.hp-bar i,
.boss-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
}
.hp-bar .fill,
.boss-bar .fill {
  background: linear-gradient(#ff7a5e, var(--hp) 45%, #b22b1d);
  transition: width 0.12s;
}
.hp-bar .ghost,
.boss-bar .ghost {
  background: #fff3d0;
  transition: width 0.6s 0.25s;
}
.hp-bar b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-shadow:
    0 2px 0 var(--ink),
    0 0 4px var(--ink);
}
.hp-bar.low {
  animation: pulse 0.8s infinite;
}
.armor-bar {
  width: 180px;
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #2b2d33;
  overflow: hidden;
}
.armor-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(#cfd8e6, #8a97ab);
  transition: width 0.3s;
}
.hud-region {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 99px;
  background: #160f0bcc;
  border: 2px solid #0008;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.hud-region b {
  color: var(--text);
}
.hud-region small {
  margin-left: 8px;
  font-size: 12px;
}
.hud-region em {
  margin-left: 8px;
  font-style: normal;
  font-weight: 800;
  color: #ffd166;
}
#tutorial h3 span {
  margin-left: 6px;
  color: var(--text);
}
.boss-bar {
  position: absolute;
  left: 50%;
  top: 46px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.boss-bar b {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
  text-shadow: 0 2px 0 var(--ink);
  color: #ffd9b0;
}
.boss-bar > div {
  width: 460px;
  height: 18px;
}
.boss-bar .fill {
  background: linear-gradient(#ffb36b, #e0602f 55%, #9b3416);
}
.hud-menu {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 8px;
}
.hud-menu button,
.icon-button {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 6px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: linear-gradient(var(--panel-3), var(--panel));
  box-shadow:
    inset 0 2px 0 #ffffff1c,
    0 4px 0 #000a;
  transition: transform 0.08s;
}
.hud-menu button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 #0009);
}
.hud-menu button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--edge-hi);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hud-menu button kbd {
  position: absolute;
  right: -4px;
  bottom: -6px;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--edge-hi);
}
.hud-menu button.on {
  border-color: var(--edge-hi);
}
.hud-menu button:active,
.icon-button:active {
  transform: translateY(2px) scale(0.96);
}
.hud-slots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: #160f0bb8;
  border: 3px solid var(--ink);
}
/* ---------- Item slots & cells ---------- */
.slot {
  --rarity: var(--edge);
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background:
    radial-gradient(
      circle at 50% 40%,
      color-mix(in srgb, var(--rarity) 30%, transparent),
      transparent 70%
    ),
    linear-gradient(var(--panel-2), var(--panel));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--rarity) 70%, transparent),
    0 3px 0 #0009;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: none;
}
.slot img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.slot.empty {
  --rarity: #ffffff22;
  color: #ffffff30;
  font-size: 22px;
}
.slot.common {
  --rarity: var(--common);
}
.slot.rare {
  --rarity: var(--rare);
}
.slot.epic {
  --rarity: var(--epic);
}
.slot.legendary {
  --rarity: #ffb347;
  box-shadow: 0 0 12px #ffb34766;
}
.slot.mythic {
  --rarity: #ff668f;
  box-shadow: 0 0 16px #ff668f88;
}
.slot.legendary img {
  filter: sepia(0.55) saturate(1.8);
}
.slot.mythic img {
  filter: hue-rotate(310deg) saturate(1.7);
}
.slot .lv {
  position: absolute;
  left: -5px;
  top: -8px;
  font-size: 11px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid #ffd16655;
}
.slot .up {
  position: absolute;
  right: 3px;
  top: 1px;
  font-size: 12px;
  color: #9fe2ff;
  text-shadow:
    0 1px 0 var(--ink),
    0 0 3px var(--ink);
}
.slot .dur {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 4px;
  border-radius: 3px;
  background: #0009;
  overflow: hidden;
}
.slot .dur i {
  display: block;
  height: 100%;
  background: var(--good);
}
.slot .dur i.warn {
  background: #f2b33d;
}
.slot .dur i.bad {
  background: #ff5643;
}
.slot .cd {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: conic-gradient(#0007 calc(var(--cd, 0) * 1turn), transparent 0);
  pointer-events: none;
}
.slot .lock,
.slot .eq {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 5px;
  background: var(--ink);
}
.slot .lock {
  right: -4px;
  bottom: -4px;
  color: var(--gold);
}
.slot .eq {
  left: -4px;
  bottom: -4px;
  color: var(--good);
}
.slot.broken img {
  filter: grayscale(1) brightness(0.55);
}
.slot.broken::after {
  content: "파손";
  position: absolute;
  font-size: 11px;
  color: #ff8a7a;
  bottom: 10px;
  text-shadow: 0 1px 0 var(--ink);
}
.slot.drop-ok {
  outline: 3px dashed var(--gold);
  outline-offset: 2px;
}
.slot.drop-hover {
  transform: scale(1.1);
  outline: 3px solid var(--gold);
}
.slot.selected {
  outline: 3px solid var(--edge-hi);
  outline-offset: 1px;
}
.slot.flash {
  animation: slot-flash 0.9s;
}
.slot.levelup {
  animation: slot-level 1.1s;
}
@keyframes slot-flash {
  0% {
    box-shadow:
      0 0 0 0 #fff,
      0 0 30px 10px var(--gold);
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slot-level {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateY(-12px) scale(1.18);
    box-shadow: 0 0 26px 8px var(--gold);
  }
  45% {
    transform: translateY(0) scale(0.95);
  }
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 18px 4px #ff3a2588;
  }
}
/* ---------- Floating windows ---------- */
#windows {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.win {
  position: absolute;
  pointer-events: auto;
  min-width: 260px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 3px solid var(--ink);
  background: linear-gradient(var(--panel-2), var(--panel) 120px);
  box-shadow:
    inset 0 0 0 2px #8b6a4466,
    0 12px 30px #000c;
  animation: win-in 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.win.closing {
  animation: win-out 0.12s forwards;
}
@keyframes win-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}
@keyframes win-out {
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}
.win-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  cursor: grab;
  touch-action: none;
  border-bottom: 2px solid #0006;
  background: linear-gradient(#ffffff10, transparent);
  border-radius: 13px 13px 0 0;
}
.win-head:active {
  cursor: grabbing;
}
.win-head h2 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  color: var(--edge-hi);
  text-shadow: 0 2px 0 var(--ink);
}
.win-close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 2px solid var(--ink);
  background: #5a2a20;
  font-size: 18px;
  line-height: 1;
}
.win-body {
  padding: 12px 14px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.win-body p {
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 500;
}
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: linear-gradient(#6b5134, #4a3622);
  box-shadow:
    inset 0 2px 0 #ffffff22,
    0 3px 0 #000a;
  transition: transform 0.06s;
}
.btn:active {
  transform: translateY(2px);
}
.btn.primary {
  background: linear-gradient(#e2a64b, #b06d21);
  color: #2a1606;
}
.btn.danger {
  background: linear-gradient(#a3402f, #6e2419);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chip {
  padding: 5px 10px;
  border-radius: 99px;
  border: 2px solid var(--ink);
  background: var(--panel);
  font-size: 13px;
}
.chip.on {
  background: var(--edge);
  color: var(--ink);
}
.mats {
  display: flex;
  gap: 10px;
  font-size: 14px;
}
.mats span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.mats img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* Equipment */
.equip-layout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.equip-col {
  display: grid;
  gap: 10px;
}
.hero-figure {
  height: 230px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, #ffffff12, transparent 65%);
}
.hero-figure img {
  height: 210px;
}
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 14px;
}
.stat-grid span {
  color: var(--muted);
}
.stat-grid b {
  text-align: right;
}
.relic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.relic-row .slot {
  width: 52px;
  height: 52px;
}
.relic-row .slot.off img {
  filter: brightness(0) opacity(0.35);
}
/* Inventory */
.inv-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 66px);
  gap: 9px;
  padding: 4px 4px 8px;
}
.inv-grid .slot {
  width: 66px;
  height: 66px;
}
.inv-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px solid #0005;
}
.detail {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #0003;
  border: 2px solid #0006;
}
/* Forge */
.forge-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.anvil {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 70%, #ff8a2a22, transparent 70%), #0003;
}
.anvil .slot {
  width: 96px;
  height: 96px;
}
.anvil.hit {
  animation: anvil-hit 0.5s;
}
@keyframes anvil-hit {
  10% {
    transform: translate(-4px, 3px);
    background-color: #ffb36b55;
  }
  30% {
    transform: translate(4px, -2px);
  }
  60% {
    transform: none;
  }
}
.stamp {
  position: absolute;
  top: 18px;
  font-size: 46px;
  color: var(--gold);
  text-shadow:
    0 4px 0 var(--ink),
    0 0 20px #ff9b3d;
  animation: stamp 0.9s forwards;
  pointer-events: none;
}
@keyframes stamp {
  0% {
    transform: scale(3);
    opacity: 0;
  }
  25% {
    transform: scale(0.9);
    opacity: 1;
  }
  35% {
    transform: scale(1.05);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 8px #ff9b3d;
  pointer-events: none;
  animation: spark 0.7s ease-out forwards;
}
@keyframes spark {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}
.recipe small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}
/* Map */
.region {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  text-align: left;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.region img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.region small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}
.region.here {
  border-color: var(--edge-hi);
}
.region:disabled {
  opacity: 0.5;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
td,
th {
  padding: 6px;
  border-bottom: 1px solid #ffffff14;
  text-align: left;
}
th {
  color: var(--muted);
}
.form-field {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}
.form-field input {
  padding: 9px 10px;
  border-radius: 9px;
  border: 2px solid var(--ink);
  background: #1a130f;
  color: var(--text);
  font: inherit;
}
.error {
  color: #ff8a7a !important;
  min-height: 1em;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--edge-hi);
}
/* ---------- Tooltip / toast / banner ---------- */
#tooltip {
  position: absolute;
  z-index: 50;
  width: 250px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: #1b1410f2;
  box-shadow: 0 10px 24px #000b;
  pointer-events: none;
  font-size: 13px;
}
#tooltip h3 {
  margin: 0 0 2px;
  font-size: 16px;
}
#tooltip .sub {
  color: var(--muted);
  margin-bottom: 6px;
}
#tooltip .line {
  display: flex;
  justify-content: space-between;
}
#tooltip .up {
  color: var(--good);
}
#tooltip .down {
  color: #ff7a6a;
}
#tooltip .hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
#toast {
  position: absolute;
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  gap: 6px;
  justify-items: center;
  pointer-events: none;
}
#toast div {
  padding: 8px 16px;
  border-radius: 99px;
  background: #1b1410ee;
  border: 2px solid var(--ink);
  animation: toast 2.8s forwards;
  white-space: nowrap;
}
#toast div.error {
  border-color: #b13d2c;
}
@keyframes toast {
  0% {
    transform: translateY(-10px) scale(0.9);
    opacity: 0;
  }
  8%,
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  pointer-events: none;
  z-index: 40;
}
#banner div {
  font-size: 44px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow:
    0 4px 0 var(--ink),
    0 0 24px #ff9b3d99;
  animation: banner 1.8s forwards;
}
#banner div small {
  display: block;
  font-size: 18px;
  color: var(--text);
}
#banner div.bad {
  color: #ff6a52;
}
@keyframes banner {
  0% {
    transform: scale(2.4);
    opacity: 0;
  }
  12% {
    transform: scale(0.94);
    opacity: 1;
  }
  20% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-24px);
    opacity: 0;
  }
}
.interact {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 99px;
  border: 3px solid var(--ink);
  background: linear-gradient(#e2a64b, #b06d21);
  color: #2a1606;
  font-size: 16px;
  box-shadow: 0 4px 0 #000a;
  animation: glow 1.1s ease-in-out infinite;
}
.interact kbd {
  padding: 0 6px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--gold);
}
@keyframes glow {
  50% {
    box-shadow:
      0 4px 0 #000a,
      0 0 22px 4px #ffd16699;
  }
}
#joystick {
  position: absolute;
  width: 130px;
  height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 50%;
  background: #0003;
  border: 3px solid #ffffff33;
  pointer-events: none;
}
#joystick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #ffffff55;
  border: 3px solid #ffffff88;
}
#drag-ghost {
  position: absolute;
  z-index: 70;
  width: 72px;
  height: 72px;
  margin: -36px;
  pointer-events: none;
  transform: rotate(-8deg) scale(1.1);
}
#drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ---------- Loading ---------- */
#loading {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: radial-gradient(circle at 50% 45%, #3a2b20, #0d0907 70%);
  transition: opacity 0.5s;
}
#loading.done {
  opacity: 0;
  pointer-events: none;
}
#loading h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--edge-hi);
  text-shadow: 0 5px 0 var(--ink);
}
.loading-icon {
  width: 120px;
  animation: float 1.6s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-10px) rotate(-6deg);
  }
}
.loading-bar {
  width: 320px;
  height: 16px;
  border-radius: 9px;
  border: 3px solid var(--ink);
  background: #0006;
  overflow: hidden;
}
.loading-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(#ffd27a, #c9832c);
  transition: width 0.2s;
}
#loading p {
  margin: 0;
  color: var(--muted);
}
/* ---------- Title screen ---------- */
#title {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  background: #0d0907;
}
#title[hidden] {
  display: none;
}
.title-art {
  position: absolute;
  inset: -2%;
  background: url("/assets/ui/act-one-title.webp") center / cover no-repeat;
  animation: title-drift 24s ease-in-out infinite alternate;
}
.title-art::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The background is a real in-game capture: a soft dark band behind the
     logo and card keeps them readable without hiding the town. */
  background:
    radial-gradient(ellipse 55% 45% at 50% 48%, #0d090799, transparent 100%),
    radial-gradient(ellipse at 50% 40%, transparent 45%, #0d0907b0 100%),
    linear-gradient(transparent 60%, #0d0907c0);
}
@keyframes title-drift {
  to {
    transform: scale(1.05) translate(-1%, -1%);
  }
}
.title-logo {
  position: relative;
  grid-row: 1;
  align-self: end;
  text-align: center;
}
.title-logo h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--edge-hi);
  text-shadow:
    0 5px 0 var(--ink),
    0 0 24px #000c;
}
.title-logo p {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 700;
  text-shadow: 0 2px 0 var(--ink);
}
.title-card,
.tutorial {
  border-radius: 16px;
  border: 3px solid var(--ink);
  background: linear-gradient(var(--panel-2), var(--panel) 120px);
  box-shadow:
    inset 0 0 0 2px #8b6a4466,
    0 12px 30px #000c;
}
.title-card {
  position: relative;
  grid-row: 2;
  width: 340px;
  padding: 18px;
  margin-top: 18px;
  animation: win-in 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.title-actions {
  display: grid;
  gap: 10px;
}
.title-actions[hidden],
.title-card [hidden] {
  display: none;
}
.title-actions .btn {
  padding: 12px;
  font-size: 18px;
  font-weight: 800;
}
.title-actions small {
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.title-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.title-split .btn {
  flex: 1;
}
.title-form-head {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--edge-hi);
  text-shadow: 0 2px 0 var(--ink);
}
#stage.portrait .title-logo h1 {
  font-size: 48px;
}
/* ---------- Tutorial ---------- */
.tutorial {
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  width: 420px;
  /* Below floating windows; clicks pass through except the skip button. */
  z-index: 15;
  padding: 12px 14px 10px;
  pointer-events: none;
}
.tutorial .skip {
  pointer-events: auto;
}
.tutorial[hidden] {
  display: none;
}
.tutorial header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tutorial header img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.tutorial h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  color: var(--edge-hi);
  text-shadow: 0 2px 0 var(--ink);
}
.tutorial p {
  margin: 6px 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.tutorial .steps {
  display: flex;
  gap: 4px;
}
.tutorial .steps i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #0007;
  border: 1px solid var(--ink);
}
.tutorial .steps i.done {
  background: linear-gradient(#ffd27a, #c9832c);
}
.tutorial .skip {
  font-size: 12px;
  padding: 4px 8px;
}
.tutorial.pop {
  animation: tut-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes tut-pop {
  40% {
    transform: translateX(-50%) scale(1.06);
  }
}
#stage.portrait .tutorial {
  top: 150px;
  width: 640px;
}
/* ---------- Portrait (mobile) layout ---------- */
#stage.portrait .hud-player {
  left: 14px;
  top: 14px;
}
#stage.portrait .hp-bar {
  width: 190px;
}
#stage.portrait .hud-menu {
  top: auto;
  bottom: 120px;
  right: 12px;
  flex-direction: column;
}
#stage.portrait .hud-region {
  top: 100px;
}
#stage.portrait .boss-bar {
  top: 130px;
}
#stage.portrait .boss-bar > div {
  width: 520px;
}
#stage.portrait .hud-slots {
  bottom: 18px;
  gap: 10px;
}
#stage.portrait .hud-slots .slot {
  width: 92px;
  height: 92px;
}
#stage.portrait .hud-menu button {
  width: 72px;
  height: 72px;
}
#stage.portrait .interact {
  bottom: 150px;
  font-size: 20px;
}
#stage.portrait .hero-figure {
  height: 170px;
}
#stage.portrait .hero-figure img {
  height: 160px;
}
#stage.portrait .win-body {
  font-size: 17px;
}
#stage.portrait .inv-grid {
  grid-template-columns: repeat(6, 84px);
}
#stage.portrait .inv-grid .slot {
  width: 84px;
  height: 84px;
}
#stage.portrait #tooltip {
  width: 320px;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
  }
}

/* ---------- Open world additions ---------- */
.avatar {
  position: relative;
  overflow: visible;
}
.avatar span {
  border-radius: 11px;
}
#my-level {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  padding: 0 7px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--gold);
  font-size: 12px;
  white-space: nowrap;
}
.opt-fixed {
  color: #f0c869;
  margin-top: 4px;
}
.opt-random {
  color: #7ec8ff;
}
.slot .opt {
  position: absolute;
  left: 4px;
  bottom: 8px;
  font-size: 8px;
  letter-spacing: -1px;
  color: #7ec8ff;
  text-shadow: 0 1px 0 var(--ink);
}
.slot.relic {
  border-radius: 50%;
}
.slot.checked {
  outline: 3px solid #ff7a5a;
  outline-offset: 1px;
}
.slot.checked img {
  opacity: 0.55;
}
.slot .check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #ff7a5a;
  text-shadow: 0 2px 0 var(--ink);
}
.salvage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid #6e2419;
  background: #3a1610aa;
}
.salvage-bar span {
  flex: 1 1 100%;
  font-size: 13px;
}
.inv-tools .sep {
  width: 8px;
}
.section-title {
  margin: 10px 0 4px !important;
  color: var(--edge-hi) !important;
  font-weight: 700 !important;
}
.relic-row .slot {
  width: 58px;
  height: 58px;
}
.world-map {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 3px solid var(--ink);
  margin-bottom: 8px;
  background: #120d0a;
}
.inv-foot small.full {
  color: #ff7a6a;
}

.armor-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 12px;
  text-align: center;
}
.armor-row small {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}
.armor-row .slot {
  margin: auto;
}
.set-active {
  color: #98dfb0;
  font-size: 11px;
  margin: 5px 0;
}
.set-inactive {
  color: #a89b89;
  font-size: 11px;
  margin: 5px 0;
}
.set-list {
  border-top: 1px solid #ffffff16;
  padding-top: 8px;
}

.alchemy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #ffffff16;
}
.alchemy-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.alchemy-row div {
  flex: 1;
}
.alchemy-row small {
  display: block;
  font-size: 10px;
  color: #b6a892;
  margin-top: 4px;
}
.alchemy-row .btn {
  padding: 6px;
  font-size: 11px;
}
.material-stash {
  margin: 10px 0;
  color: #cdbda5;
  font-size: 11px;
}

.mat-icon {
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.3em;
  vertical-align: -0.35em;
  object-fit: contain;
}
.recipe-material.missing {
  color: #ee9b83;
}
.recipe-material.enough {
  color: #9ed6a3;
}
.recipe small {
  white-space: normal;
  line-height: 1.45;
}

/* Equipment information is a separate header tab. */
.window-tabs {
  display: flex;
  gap: 4px;
  margin-left: 10px;
}
.window-tabs button {
  padding: 5px 10px;
  border: 1px solid #8a6d47;
  border-radius: 7px;
  background: #211912;
  color: #b9a98c;
}
.window-tabs button.on {
  background: #bb8a45;
  color: #21180e;
}
.stat-grid em {
  color: #9ed6a3;
  font-style: normal;
}
.stat-key {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.final-stats [data-stat][title] {
  cursor: help;
  text-decoration: underline dotted;
}
.weapon-stats {
  margin: 9px 0;
  padding: 9px;
  background: #0003;
  border-radius: 8px;
}
.weapon-stats summary {
  cursor: pointer;
  color: var(--edge-hi);
}
/* Pagination keeps bag controls and salvage preview outside the item grid. */
#stage [data-win="inventory"] .win-body {
  overflow: hidden;
  display: flex;
  min-height: 0;
}
.bag-layout {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 92px auto;
  gap: 8px;
  width: 100%;
  min-height: 0;
}
.bag-filters {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.bag-filters select {
  flex: 1;
  min-width: 0;
  width: 70px;
  font-size: 13px;
  padding: 5px 3px;
}
.bag-filters .chip {
  padding: 4px 7px;
  white-space: nowrap;
}
.bag-pages {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.bag-pages small {
  flex: 1;
  white-space: nowrap;
}
.bag-pages .btn {
  padding: 5px 8px;
  font-size: 13px;
}
.bag-pages .chip {
  padding: 4px 7px;
}
#stage [data-win="inventory"] .inv-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  min-height: 0;
  align-content: start;
  overflow: hidden;
}
#stage [data-win="inventory"] .inv-grid .slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.bag-empty {
  grid-column: 1 / -1;
  color: var(--muted);
}
.bag-action-rail {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #7e65443d;
  border-bottom: 1px solid #7e65443d;
}
.bag-action-buttons {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.bag-action-buttons .btn {
  padding: 7px 8px;
  font-size: 12px;
}
.bag-selection,
.salvage-preview {
  min-width: 0;
  font-size: 13px;
}
.bag-selection b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.salvage-yields {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  color: #9ed6a3;
  margin-top: 3px;
}
.salvage-yields span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.salvage-yields img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.bag-hint {
  font-size: 12px;
  color: var(--muted);
}
[data-win="inventory"] .inv-foot {
  margin: 0;
  padding: 0;
  border: 0;
}
[data-win="inventory"] .mats {
  font-size: 12px;
  gap: 6px;
}
[data-win="inventory"] .mats img {
  width: 20px;
  height: 20px;
}
#stage.portrait .bag-layout {
  grid-template-rows: auto auto minmax(0, 1fr) 86px auto;
}
#stage.portrait .bag-filters select,
#stage.portrait .bag-filters .chip {
  font-size: 17px;
}
#stage.portrait .bag-pages,
#stage.portrait .bag-pages .btn {
  font-size: 16px;
}
#stage.portrait .bag-selection,
#stage.portrait .salvage-preview {
  font-size: 17px;
}
#stage.portrait .bag-action-buttons .btn,
#stage.portrait .salvage-yields {
  font-size: 16px;
}
#stage.portrait .bag-action-buttons .btn {
  padding: 8px;
}
#stage.portrait .stat-key {
  font-size: 16px;
}

/* Material totals live inside the inventory, with their own scroll area. */
#stage [data-win="inventory"] .win-body {
  flex-direction: column;
  gap: 8px;
  /* Fill the window so the grid row gets all the spare height. */
  flex: 1 1 auto;
}
.inventory-tabs {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.bag-layout {
  flex: 1;
}
.material-stash {
  overflow-y: auto;
  min-height: 0;
}
.material-stash h3 {
  margin: 14px 0 8px;
  color: var(--edge-hi);
}
.material-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.material-entry span {
  flex: 1;
}
.material-entry b {
  white-space: nowrap;
}

.portal-map {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #120d0a;
}
.portal-map canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.portal-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 2px solid #8ee6ff;
  border-radius: 50%;
  background: #153949;
  cursor: pointer;
  touch-action: manipulation;
}
.portal-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.portal-marker span {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  padding: 1px 4px;
  background: #120d0ad9;
  border-radius: 4px;
  color: #bdf2ff;
  pointer-events: none;
}
.portal-marker.label-left span {
  left: auto;
  right: 0;
  transform: none;
}
.portal-marker.label-right span {
  left: 0;
  transform: none;
}
.portal-marker:disabled {
  cursor: default;
  border-color: #776f62;
  background: #282724;
}
.portal-marker:disabled img {
  filter: grayscale(1);
  opacity: 0.5;
}
.portal-marker:disabled span {
  color: #b1aa9f;
}
.portal-marker.current {
  border-color: #ffd166;
  background: #665025;
}
.portal-marker.current img {
  filter: none;
  opacity: 1;
}
.portal-marker.current span {
  color: #ffd166;
}
.portal-marker:not(:disabled):hover,
.portal-marker:focus-visible {
  outline: 3px solid #fff2bc;
  outline-offset: 2px;
}
.portal-map-legend {
  margin-top: 10px !important;
  font-size: 13px;
}
#stage.portrait .portal-marker {
  width: 40px;
  height: 40px;
}
#stage.portrait .portal-marker span {
  font-size: 15px;
}
/* The town stone: home, so it looks different from every other stone. */
.portal-marker.home {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border-color: #ffd166;
  background: #6b4a1c;
  box-shadow:
    0 0 0 2px #120d0a,
    0 0 10px #ffd16699;
  z-index: 2;
}
.portal-marker.home span {
  color: #ffd166;
}
#stage.portrait .portal-marker.home {
  width: 48px;
  height: 48px;
}
#stage.portrait .portal-map-hint,
#stage.portrait .portal-map-legend {
  font-size: 20px;
}

.portal-marker[data-act="travel:frost"] span {
  top: auto;
  bottom: calc(100% + 3px);
}
/* Town label sits beside its badge, clear of its northern neighbours. */
.portal-marker.home span {
  top: 50%;
  left: calc(100% + 4px);
  transform: translateY(-50%);
}
#stage.portrait .portal-map {
  width: 100%;
}

/* Material bag: the same icon slots as the gear bag. */
.mat-grid {
  grid-template-columns: repeat(auto-fill, 66px);
}
.mat-grid .slot {
  cursor: pointer;
}
.slot .qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 1px 0 #000,
    0 0 3px #000;
}
.mat-picked {
  margin: 4px 0 0;
  font-size: 12px;
}
.craft-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.material-stash {
  flex: 1;
}
.title-notice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0006;
  color: #e9d6ae;
  font-size: 12px;
  line-height: 1.5;
}

/* Sign-up: smaller logo and a two-column form so the card fits the stage. */
#title.signup {
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding-top: 16px;
}
#title.signup .title-logo h1 {
  font-size: 44px;
}
#title.signup .title-card {
  width: 600px;
  margin-top: 12px;
}
#title.signup .title-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}
#stage.portrait #title.signup .title-card {
  width: 600px;
}
#title .error:empty {
  min-height: 0;
  margin: 0;
}

/* Weapon signature lines in tooltips and stack badges on the weapon bar. */
#tooltip .sig {
  margin: 6px 0 2px;
  color: #ffe08a;
  font-size: 12px;
  line-height: 1.4;
}
#tooltip .sig b {
  color: #ffd25a;
}
#tooltip .sig-pair {
  color: var(--muted);
  font-size: 11px;
}
#tooltip .sig-pair.on {
  color: #8df08a;
}
#hud-slots .slot .stack {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: 6px;
  background: #160f0be6;
  color: #ffd25a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
#hud-slots .slot .stack:empty {
  display: none;
}

/* Town storage chest: chest grid above, bag grid below; click moves. */
.chest-panel h3 {
  margin: 4px 0 8px;
  color: var(--edge-hi);
}
.chest-panel h3 small {
  color: var(--muted);
  font-size: 12px;
}
.chest-panel h3 small.full {
  color: #ff7a6a;
}
.chest-grid {
  grid-template-columns: repeat(auto-fill, 66px);
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.chest-grid .slot {
  cursor: pointer;
}
/* Portrait crops the wide capture; keep the hero (right side) in frame. */
#stage.portrait .title-art {
  background-position: 80% center;
}
#tooltip .sig.mythic,
#tooltip .sig.mythic b {
  color: #ff8fb0;
}

/* Weapon codex */
.codex {
  display: grid;
  gap: 4px;
}
.codex-row {
  display: grid;
  grid-template-columns: 88px repeat(6, minmax(28px, 40px));
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
}
.codex-row.done {
  background: #ffd16618;
}
.codex-row span {
  font-size: 12px;
  color: var(--muted);
}
.codex-row.done span {
  color: var(--text);
}
.codex-row em {
  font-style: normal;
  color: #ffd166;
}
.codex-row img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  border: 2px solid var(--rc);
  background: #0004;
}
.codex-row img.missing {
  filter: brightness(0) opacity(0.35);
  border-color: #0006;
}
.codex-goals {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
}
.codex-goals li.done {
  color: #8df08a;
}
/* Achievements and titles: one compact card per metric, two columns */
.achv-summary {
  margin: 0 0 8px;
  font-size: 13px;
}
.achv-summary small {
  color: var(--muted);
  font-size: 11px;
}
.achv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.achv {
  padding: 4px 8px;
  background: var(--panel-2);
  border: 1px solid #ffffff14;
  border-radius: 6px;
}
.achv.done {
  border-color: var(--edge);
}
.achv-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
}
.achv-head small {
  color: var(--muted);
  white-space: nowrap;
}
.achv-bar {
  height: 4px;
  margin: 2px 0 3px;
  background: var(--ink);
  border-radius: 2px;
  overflow: hidden;
}
.achv-bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.achv-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.title-chip {
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #ffd16666;
  background: #ffd16614;
  color: var(--gold);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.title-chip.on {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.title-chip.locked {
  border-color: #ffffff14;
  background: none;
  color: #ffffff40;
  cursor: default;
}
.rank-note {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.rank-note b {
  color: var(--gold);
}
.rank-table tr.me td {
  background: #ffd1661f;
}
.rank-pages {
  margin-top: 8px;
}
#stage.portrait .achv-head,
#stage.portrait .title-chip,
#stage.portrait .rank-note,
#stage.portrait .achv-summary small {
  font-size: 15px;
}
.title-tag {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  border: 1px solid #ffd16666;
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.82em;
}
/* Crafting: codex-style matrix plus a detail panel for the picked gear */
.craft-matrix {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-between;
  gap: 3px 10px;
}
.craft-row {
  display: grid;
  grid-template-columns: 46px repeat(6, 28px);
  align-items: center;
  gap: 4px;
}
.craft-row span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.craft-cell {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 2px;
  border-radius: 6px;
  border: 2px solid var(--rc);
  background: #0004;
  opacity: 0.5;
  cursor: pointer;
}
.craft-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.craft-cell.ready {
  opacity: 1;
}
.craft-cell.ready::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
  border: 2px solid var(--ink);
}
.craft-cell.on {
  opacity: 1;
  outline: 2px solid var(--text);
  outline-offset: 1px;
}
.craft-cell.empty {
  border: 2px dashed #ffffff14;
  background: none;
  cursor: default;
}
.craft-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.craft-detail {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: var(--panel);
}
.craft-detail > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid var(--rc);
  background: #0004;
}
.craft-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 12px;
}
.craft-detail .craft-inheritance {
  margin-top: 4px;
  font-size: 12px;
}
.craft-detail .craft-inheritance small {
  display: block;
  color: var(--muted);
}
#stage.portrait .craft-row {
  grid-template-columns: 58px repeat(6, 34px);
}
#stage.portrait .craft-row span {
  font-size: 15px;
}
#stage.portrait .craft-cell {
  width: 38px;
  height: 38px;
}
#stage.portrait .craft-matrix {
  gap: 4px 14px;
}
#stage.portrait .craft-detail {
  grid-template-columns: 64px 1fr;
}
#stage.portrait .craft-detail > img {
  width: 64px;
  height: 64px;
}
#stage.portrait .craft-detail .btn {
  grid-column: 1 / -1;
}
#stage.portrait .craft-needs,
#stage.portrait .craft-hint,
#stage.portrait .craft-detail .craft-inheritance {
  font-size: 16px;
}
/* Tapped item card on touch screens: pinned, closable */
#tooltip.pinned {
  pointer-events: auto;
  padding-right: 34px;
  border-color: var(--edge);
}
.tip-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--panel-3);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#stage.portrait .tip-close {
  width: 40px;
  height: 40px;
  font-size: 24px;
}
#stage.portrait #tooltip.pinned {
  padding-right: 48px;
}
.rank-table {
  font-size: 13px;
}
.rank-table td,
.rank-table th {
  padding: 4px 6px;
  white-space: nowrap;
}
.rank-table td:nth-child(2) {
  white-space: normal;
}
#stage:not(.portrait) .achv-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Sixteen metric groups: four columns keep the board on one screen. */
@media (min-width: 1200px) {
  #stage:not(.portrait) .achv-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Trial tower window */
.tower-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 4px;
}
.tower-pick b {
  min-width: 90px;
  text-align: center;
  font-size: 24px;
  color: var(--gold);
}
.tower-meta {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.tower-record {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid #ffffff14;
  font-size: 13px;
}
.tower-record span {
  color: var(--muted);
}
.tower-go {
  width: 100%;
  margin-top: 12px;
}
#stage.portrait .tower-meta,
#stage.portrait .tower-record {
  font-size: 17px;
}

/* Ancient expansion: compact, touch-friendly forge tools. */
.slot.ancient {
  border-color: #8ffff0;
  background: radial-gradient(ellipse at 50% 20%, #416972, #211e36 72%);
  box-shadow:
    inset 0 0 14px #64ffe633,
    0 0 7px #91ffe533;
}
.forge-tabs {
  flex-wrap: wrap;
  gap: 5px;
}
.forge-warning {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #ed9671;
  border-radius: 8px;
  background: #5e241f88;
  color: #ffd2b3;
  font-size: 12px;
}
.forge-help {
  color: #c8c4b2;
  line-height: 1.5;
  font-size: 12px;
}
.forge-targets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-height: 150px;
  overflow: auto;
  padding: 4px;
}
.feed-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  margin: 8px 0;
}
.feed-source {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #625644;
  border-radius: 8px;
  padding: 6px;
  background: #29221e;
  text-align: left;
}
.feed-source img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.feed-source span {
  flex: 1;
}
.feed-source b {
  color: #bde5a2;
}
.feed-source.on {
  border-color: #aee4ad;
  background: #36513c;
}
.refine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.refine-choice {
  padding: 10px;
  border: 1px solid #716548;
  border-radius: 9px;
  background: #181a2199;
}
.tower-reward {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #a48d50;
  border-radius: 9px;
  color: #f5dfa0;
  background: #68502433;
}
#stage.portrait .forge-warning,
#stage.portrait .forge-help {
  font-size: 15px;
}
#stage.portrait .feed-source {
  min-height: 50px;
}

/* Safe actions and irreversible salvage occupy separate rows. */
.bag-action-rail.has-selection {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.bag-selection-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.bag-selection-top .bag-selection {
  flex: 1;
}
.bag-safe-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.bag-danger-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed #bd655a66;
}
.bag-danger-actions small {
  color: #d9ad99;
  font-size: 11px;
}
.bag-safe-actions .btn,
.bag-danger-actions .btn {
  min-height: 40px;
  padding: 7px 12px;
}
.bag-danger-actions .btn {
  flex-shrink: 0;
}
.alchemy-row.material-batch-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 0;
}
.material-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.material-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.material-action label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.material-action input {
  width: 90px;
  min-width: 0;
  min-height: 40px;
  padding: 6px;
  border: 1px solid #8e754c;
  border-radius: 6px;
  background: #19150e;
  color: #fff0d2;
}
.material-action .btn,
.material-action .chip {
  min-height: 40px;
  min-width: 52px;
}
.material-action small {
  grid-column: 1 / -1;
}
.material-transmute {
  color: #ffd0ac;
}

.map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.world-map {
  touch-action: none;
  cursor: grab;
}
.world-map:active {
  cursor: grabbing;
}
#tooltip {
  max-height: 65vh;
  overflow-y: auto;
}
.material-use {
  font-size: 12px;
  margin: 4px 0;
}

.relic-book-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.relic-book {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.relic-book-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid #66503a;
  border-radius: 8px;
  background: #251c15;
}
.relic-book-card img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.relic-book-card small {
  display: block;
  margin-top: 5px;
  color: #c9bda9;
}
.relic-book-card p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.relic-book-card.missing {
  border-style: dashed;
  background: #1b1714;
}
.relic-book-card.missing img {
  filter: grayscale(1);
  opacity: 0.45;
}
.window-tabs {
  flex-wrap: wrap;
}

.debug-map-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.debug-map-controls .chip {
  color: #ffb7ed;
}

/* Atlas entries stay readable on narrow stages. */
.atlas-card {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #655439;
  border-radius: 8px;
  background: #211b16;
}
.atlas-card h3 {
  margin: 0 0 6px;
  color: #ead3a2;
}
.atlas-card h3 small {
  font-size: 12px;
  color: #b5aa95;
}
.atlas-card p {
  margin: 6px 0;
  line-height: 1.55;
}
.atlas-card.missing {
  opacity: 0.65;
  border-style: dashed;
}
.atlas-card progress {
  width: 100%;
  accent-color: #d6aa59;
}
.atlas-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.atlas-filters select,
[data-combat="effects"] {
  background: #211b16;
  color: #ead3a2;
  padding: 6px;
  border: 1px solid #655439;
}
.atlas-locations {
  padding-left: 18px;
  line-height: 1.8;
}
.atlas-locations .chip {
  margin-left: 6px;
}
/* Equipment presets: three compact cards under the armor row. */
.preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.preset-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background: #0000002e;
  min-width: 0;
}
.preset-card.empty {
  opacity: 0.75;
}
.preset-card b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-card .row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
@media (max-width: 560px) {
  .preset-row {
    grid-template-columns: 1fr;
  }
}

/* Monster atlas: farming guide for the chosen material. */
.material-guide {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel-2);
}
.material-guide h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.material-guide p {
  margin: 4px 0;
  font-size: 12px;
}
.material-guide .atlas-locations li {
  font-size: 12px;
  line-height: 1.5;
}
.material-guide .atlas-locations .chip {
  padding: 1px 8px;
  font-size: 11px;
}
/* Relic codex: permanent bonus steps. */
.codex-milestones {
  margin: 6px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}
.codex-milestones li.on {
  color: var(--gold);
}
/* Hunting-ground guide under the world map. */
.hunt-guide {
  margin: 10px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel-2);
}
.act-story {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 2px solid var(--edge);
  background: var(--ink);
}
.act-story p { margin: 0 0 5px; }
.hero-growth {
  margin-bottom: 9px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  background: var(--ink);
}
.hero-growth h3 { display: flex; justify-content: space-between; margin: 0 0 5px; }
.hero-growth h3 b { color: var(--edge-hi); }
.hero-growth small { color: var(--muted); }
.hero-growth progress, .hero-xp-bar { display: block; width: 100%; accent-color: var(--edge-hi); }
.hero-xp-bar { height: 5px; border: 0; }
.growth-tabs, .skill-nodes { display: flex; gap: 6px; }
.skill-school { margin: 8px 0; padding: 8px; border: 1px solid var(--edge); }
.skill-school h3 { margin: 0 0 6px; font-size: 1em; }
.skill-school h3 small, .skill-nodes small { color: var(--muted); }
.skill-nodes button { flex: 1; display: grid; gap: 3px; white-space: normal; }
.skill-nodes button[aria-pressed="true"] { opacity: 1; border-color: var(--edge-hi); }
.mastery-list { list-style: none; margin: 0; padding: 0; }
.mastery-list li {
  display: grid;
  grid-template-columns: 28px minmax(68px, 1fr) minmax(64px, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--edge);
  padding: 4px 0;
}
.mastery-list img { width: 28px; height: 28px; object-fit: contain; }
.mastery-list progress { width: 100%; accent-color: var(--edge-hi); }
.quest-log h3, .quest-log h4 { margin: 0 0 6px; }
.quest-log h3 small { margin-inline-start: 8px; color: var(--muted); }
.quest-list { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.quest-list button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  text-align: left;
}
.quest-list button[aria-pressed="true"] { border-color: var(--edge-hi); }
.quest-list button[data-quest-status="complete"] b { color: var(--good); }
.quest-list button[data-quest-status="active"] b { color: var(--gold); }
.act-side {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  background: var(--panel-2);
}
.act-side ul, .act-notes { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 4px; }
.act-side li small { margin-inline-start: 6px; color: var(--muted); }
.act-side li[data-done="true"] { color: var(--good); }
.act-notes li { padding: 4px 0; border-bottom: 1px solid var(--edge); font-size: .92em; }
.act-notes b { display: block; color: var(--gold); }
.quest-list button[data-quest-status="pending"] b { color: var(--muted); }

.hunt-guide h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.hunt-guide .atlas-locations {
  margin: 4px 0;
  padding-left: 0;
  list-style: none;
}
.hunt-guide .atlas-locations li {
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 0;
  border-bottom: 1px solid #ffffff12;
}
.hunt-guide .atlas-locations .chip {
  padding: 1px 8px;
  font-size: 11px;
}
.hunt-guide .fit-tag {
  display: inline-block;
  min-width: 2.6em;
}
.hunt-guide .hunt-all {
  max-height: 260px;
  overflow-y: auto;
}
.hunt-guide details summary {
  cursor: pointer;
  font-size: 12px;
  margin: 4px 0;
}
.hunt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
/* Journey tracker under the hero panel; tap opens the goal on the map. */
.hud-journey {
  position: absolute;
  left: 18px;
  top: 104px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #160f0bcc;
  border: 2px solid #ffd16655;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hud-journey small {
  color: #ffd166;
  font-size: 11px;
  font-weight: 700;
}
.hud-journey b {
  font-size: 13px;
  line-height: 1.3;
}
.hud-journey em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.journey-dir {
  margin-left: 6px;
  color: #8ee6ff;
  font-weight: 800;
}
#stage.portrait .hud-journey {
  left: 14px;
  top: 140px;
  max-width: 240px;
}

.slot-count {
  display: flex;
  align-items: center;
  gap: 6px;
}
.expand-slots {
  font-size: 12px;
  padding: 3px 7px;
}
.expand-max {
  color: var(--muted);
}
.bag-pages .inventory-tabs {
  margin: 0 auto 0 0;
}
.atlas-more summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0;
}
/* In-game confirmation and text dialogs (v22d). */
.game-dialog {
  position: absolute;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0705a8;
  pointer-events: auto;
}
.game-dialog-card {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 40px);
  overflow: auto;
  padding: 18px 20px 16px;
  border-radius: 16px;
  border: 3px solid var(--ink);
  background: linear-gradient(var(--panel-2), var(--panel) 120px);
  box-shadow: 0 14px 40px #000a;
  color: var(--text, #f5e9cc);
}
.game-dialog-card.danger {
  border-color: #b8432f;
}
.game-dialog-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
}
.game-dialog-body p {
  margin: 0 0 8px;
}
.game-dialog-body ul {
  margin: 0 0 8px;
  padding-left: 18px;
  max-height: 180px;
  overflow: auto;
}
.game-dialog-body .warn {
  color: #ff9a86;
}
.game-dialog-input {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 10px;
  padding: 8px 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid var(--edge);
  background: #0006;
  color: inherit;
}
.game-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.achv-near {
  color: var(--muted);
  font-size: 12px;
  align-self: center;
}

/* Fixed-height icon strip: long seal names live in the accessible tooltip. */
[data-win="inventory"] .inv-foot {
  min-width: 0;
  flex: 0 0 auto;
  gap: 10px;
}
[data-win="inventory"] .currency-tokens {
  min-width: 0;
  flex: 1 1 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  align-items: center;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  max-height: 62px;
}
[data-win="inventory"] .currency-token {
  position: relative;
  flex: 0 0 66px;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  border-radius: 6px;
  background: #ffffff08;
}
[data-win="inventory"] .currency-token img {
  width: 28px;
  height: 28px;
}
[data-win="inventory"] .currency-token b {
  font-size: 11px;
  line-height: 15px;
}
[data-win="inventory"] .currency-token:focus-visible {
  outline: 2px solid var(--edge-hi);
}
[data-win="inventory"] .slot-count {
  flex: 0 0 auto;
}

/* v26e mainland patch notice: taller card with short sections. */
.patch-notice .notice-card {
  width: min(520px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.patch-notice .notice-card > .game-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.patch-notice .game-dialog-body h4 {
  margin: 12px 0 4px;
  font-size: 15px;
  color: var(--gold, #ffd77a);
}
.patch-notice .game-dialog-body ul {
  max-height: none;
  overflow: visible;
  margin-bottom: 4px;
}
.patch-notice .game-dialog-body li {
  margin: 2px 0;
  line-height: 1.45;
}
.patch-notice .notice-lead {
  font-size: 15px;
}
.patch-notice .game-dialog-actions {
  flex-wrap: wrap;
}

.campaign-dialogue {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.campaign-dialogue img {
  width: 86px;
  height: 134px;
  object-fit: contain;
}

.campaign-dialogue p {
  line-height: 1.6;
}
/* REFORGED sockets: dots on bag slots, tooltip lines and the socket panel. */
.slot .sockets {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.slot .sockets i {
  width: 6px;
  height: 6px;
  border: 1px solid #d9c9a3aa;
  border-radius: 50%;
  background: #0008;
}
.slot .sockets i.on { background: #c9a6ff; }
.slot .sockets i.ruby { background: #e0485a; }
.slot .sockets i.sapphire { background: #4f8ee6; }
.slot .sockets i.amethyst { background: #a565e0; }
.slot .sockets i.rune { background: #f1d48a; }
.opt-socket { color: #c9a6ff; }
.opt-socket.empty { color: var(--muted); }
.socket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--edge);
}
.socket-row img { width: 28px; height: 28px; object-fit: contain; }
.socket-row span { flex: 1; display: grid; }
.socket-row small { color: var(--muted); }
.socket-row.empty { color: var(--muted); }