/* Emberdepths — all chrome is CSS. No UI image files. */

@font-face {
  font-family: "Cinzel GothicUI";
  src: url("/assets/fonts/Cinzel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel GothicUI";
  src: url("/assets/fonts/Cinzel-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel GothicUI";
  src: url("/assets/fonts/Cinzel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink:      #080706;
  --stone:    #14100d;
  --stone-2:  #1e1712;
  --stone-3:  #2b2018;
  --gold:     #a8854a;
  --gold-dim: #6b5530;
  --gold-lit: #e3c68d;
  --ember:    #cf5b2e;
  --hp:       #8e1f18;
  --hp-lit:   #d94b39;
  --mana:     #2a4a86;
  --mana-lit: #5b93e0;
  --xp:       #b99a3f;
  --text:     #cec1aa;
  --dim:      #8b7d68;
  --bad:      #d4634f;
  --good:     #8fbf72;

  --display: "Cinzel GothicUI", Georgia, "Times New Roman", serif;
  --body: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --globe-size: clamp(88px, 8.2vw, 118px);
  --safe: clamp(10px, 1.6vw, 28px);
  --ui-scale: 1;
}

* { box-sizing: border-box; }

* {
  scrollbar-width: thin;
  scrollbar-color: #8a7040 #120e0a;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #120e0a;
  border: 1px solid #3a2d1e;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a8854a, #5a4326);
  border: 1px solid #c8b48a;
}
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#app { position: relative; width: 100%; height: 100%; }

/* ─────────────────────────────── screens ─────────────────────────────── */

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--safe);
  background:
    radial-gradient(ellipse at 50% 78%, rgba(160, 54, 22, .16), transparent 42%),
    radial-gradient(ellipse at 18% 88%, rgba(120, 40, 16, .12), transparent 36%),
    radial-gradient(ellipse at 82% 86%, rgba(40, 70, 120, .08), transparent 32%),
    radial-gradient(ellipse at 50% 28%, #2a1c14 0%, #100b09 48%, #050403 100%);
}
.screen.is-active { display: flex; }
.screen-game { padding: 0; background: #000; display: none; }
.screen-game.is-active { display: block; }

.screen-wide { justify-content: flex-start; padding-top: 18px; }

/* ────────────────────────── masthead / chrome ────────────────────────── */

.masthead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
  flex: none;
}
.masthead::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-bottom: 8px;
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #c42818 46%, #5a0c0c);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(207, 91, 46, .8);
}

.game-title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f6e3b4 8%, #c9932f 55%, #7d5a18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.9));
}

.kicker {
  margin: 0;
  min-width: min(420px, 86vw);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f0d8a8;
  background: linear-gradient(180deg, #2c241c, #100c09);
  border: 1px solid #5a4326;
  box-shadow: inset 0 1px 0 rgba(227, 198, 141, .14);
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  text-shadow: 0 1px 3px #000;
}
.kicker-mini {
  min-width: 0;
  width: 88px;
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
}

.account-chip {
  position: absolute;
  top: var(--safe);
  right: var(--safe);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: linear-gradient(180deg, rgba(28,20,14,.86), rgba(8,6,5,.9));
  border: 1px solid #3a2d1e;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.account-portrait {
  width: 34px;
  height: 34px;
  flex: none;
  background: radial-gradient(circle at 40% 32%, #6a5340, #1a120c 70%);
  border: 1px solid #5a4326;
  box-shadow: inset 0 0 0 1px #1a120c, 0 0 0 1px #2a2016;
}
.account-chip b {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.account-chip small {
  display: block;
  font-size: 11px;
  color: var(--dim);
}

.key-hints {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 28px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.key-hints kbd {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid #4a3a24;
  background: rgba(0,0,0,.45);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--gold-lit);
}

/* ─────────────────────── panels (kit 9-slice frame) ──────────────────── */

.panel {
  position: relative;
  z-index: 1;
  padding: 18px 16px;
  background: linear-gradient(180deg, rgba(24, 18, 13, .94), rgba(8, 6, 5, .96));
  border: 1px solid #4a3620;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2018,
    0 0 0 4px #6b5530,
    0 18px 50px rgba(0,0,0,.72);
}

.panel-ornate::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #c42818);
  box-shadow: 0 0 10px rgba(207, 91, 46, .8);
  pointer-events: none;
}

.panel-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--gold-lit);
}
.panel-head h2::before,
.panel-head h2::after {
  content: "";
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.panel-head h2::after { background: linear-gradient(270deg, transparent, var(--gold-dim)); }
.panel-head .who { margin: 0; text-align: center; }
.panel-head h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--gold-lit);
}

.panel-foot {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 26px;
  margin-top: 18px;
}
.panel-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,120,74,.5), transparent);
  pointer-events: none;
}

.stack-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ─────────────────────────────── controls ────────────────────────────── */

.btn {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-lit);
  border: 1px solid #4a3a24;
  background: linear-gradient(180deg, #2a2118, #100c09);
  box-shadow: inset 0 1px 0 rgba(227, 198, 141, .1);
  padding: 10px 16px;
  min-height: 46px;
  cursor: pointer;
  transition: filter .12s, color .12s;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.18);
  color: #fff2d4;
}
.btn:active:not(:disabled) { filter: brightness(.82); }
.btn:disabled { filter: grayscale(.7) brightness(.62); opacity: .55; cursor: default; }

.btn-primary {
  border-color: #7a2a1c;
  background: linear-gradient(180deg, #7a2a1c, #2a0c0a);
  color: #ffe6cf;
}
.btn-primary:hover:not(:disabled) { color: #fff4e2; }
.btn-primary:active:not(:disabled) { filter: brightness(.85) saturate(1.15); }
.btn-primary:disabled { filter: grayscale(.8) brightness(.5); opacity: .5; }

.btn-wide { width: 100%; display: block; }

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.field input {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--text);
  border: 1px solid #3a2d1e;
  background: rgba(6, 4, 3, .72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
}
.field input:focus {
  border-color: var(--gold);
  color: #fff4e2;
}
.field input.is-error { border-color: var(--bad); }

.form-error { min-height: 18px; margin: 4px 0 10px; color: var(--bad); font-size: 13px; }
.hint { color: var(--dim); font-size: 12px; text-align: center; margin: 14px 0 0; line-height: 1.7; }
.hint b { color: var(--gold); font-weight: 400; font-family: var(--display); font-size: 11px; letter-spacing: .06em; }

.auth-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.text-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--hp-lit);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
}
.text-link:hover { color: #f0d8a8; }

.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #2c241c, #100c09);
  box-shadow: 0 0 0 1px #120e0a, inset 0 1px 0 rgba(227, 198, 141, .14);
  cursor: pointer;
  font-size: 0;
  color: var(--gold-lit);
  position: relative;
}
.icon-btn::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
  color: var(--gold-lit);
}
.icon-btn-close::after { content: "×"; font-size: 22px; }
.icon-btn-back::after  { content: "‹"; font-size: 26px; margin-top: -2px; }
.icon-btn-prev::after  { content: "‹"; font-size: 26px; margin-top: -2px; }
.icon-btn-next::after  { content: "›"; font-size: 26px; margin-top: -2px; }
.icon-btn-menu::after  { content: "☰"; font-size: 16px; letter-spacing: .04em; }
.dialog > .icon-btn-close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
}
.icon-btn-expand::after { content: "▾"; font-size: 16px; }
.sheet.is-expanded .icon-btn-expand::after { content: "▴"; }
.icon-btn:hover { filter: brightness(1.25); }

.kit-toggle {
  width: 56px;
  height: 28px;
  border: 1px solid #5a4326;
  border-radius: 14px;
  background: #1a120c;
  box-shadow: inset 0 0 0 1px #120e0a;
  cursor: pointer;
  font-size: 0;
  position: relative;
}
.kit-toggle::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8a7050, #6b5530);
  transition: left .15s ease;
}
.kit-toggle[aria-pressed="true"] { background: #3a1810; }
.kit-toggle[aria-pressed="true"]::after {
  left: 31px;
  background: linear-gradient(180deg, #e07050, #cf5b2e);
}

.kit-slider {
  height: 10px;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1a120c, #2a2016);
  box-shadow: inset 0 0 0 1px #120e0a;
  position: relative;
}
.kit-slider::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 50%;
  width: 12px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #e3c68d, #6b5530);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ─────────────────────────────── auth ────────────────────────────────── */

.auth-panel { width: min(420px, 100%); }

/* ─────────────────────────── character select ────────────────────────── */

.select-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(220px, 1fr) minmax(280px, 340px);
  gap: 18px;
  width: min(1180px, 100%);
  align-items: stretch;
  flex: 1;
  min-height: 0;
  padding-bottom: 48px;
}
.select-list-panel,
.select-detail-panel { --panel-border: 36px; min-height: 0; display: flex; flex-direction: column; }
.select-detail-panel { overflow: hidden; }
.select-detail-panel .detail-stats {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.select-detail-panel .stack-actions {
  flex-shrink: 0;
  margin-top: auto;
}
.select-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.dais {
  position: relative;
  width: min(300px, 34vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 58% 16% at 50% 78%, rgba(0,0,0,.72), transparent 72%),
    radial-gradient(circle at 50% 70%, rgba(207,91,46,.26), transparent 40%),
    radial-gradient(circle at 50% 60%, #2c2218 0%, #100c09 70%);
  border: 1px solid #5a4630;
  border-radius: 50%;
  box-shadow:
    inset 0 -22px 32px rgba(0,0,0,.7),
    0 0 48px rgba(180,50,24,.2);
}
.dais::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(196,160,80,.22);
  box-shadow: inset 0 0 24px rgba(196,160,80,.08);
  pointer-events: none;
}
#select-sigil {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 92%;
}
.select-hero-name {
  margin: 0;
  font-family: var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lit);
  font-size: 15px;
}

.who { font-family: var(--display); font-size: 11px; color: var(--gold); letter-spacing: .12em; opacity: .85; }
.place-line {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.char-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.char-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #3a2d1e;
  background: linear-gradient(180deg, rgba(48,37,26,.6), rgba(11,9,7,.6));
  box-shadow: inset 0 1px 0 rgba(232,201,140,.06);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.char-row:hover { border-color: var(--gold-dim); }
.char-row.is-selected {
  border-color: #93342a;
  background: linear-gradient(180deg, rgba(88,26,21,.38), rgba(24,12,9,.55));
  box-shadow: inset 0 0 20px rgba(147,52,42,.22);
}
.char-sigil {
  width: 48px; height: 52px;
  flex: none;
  border-radius: 8px;
  border: 1px solid #4a3a24;
  background:
    radial-gradient(ellipse 70% 28% at 50% 88%, rgba(0,0,0,.7), transparent 70%),
    #120d0a;
  box-shadow: inset 0 -8px 12px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.8);
}
.char-main { flex: 1; min-width: 0; }
.char-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-lit);
}
.char-meta { font-size: 12px; color: var(--dim); }
.char-gold { font-family: var(--mono); font-size: 12px; color: var(--xp); }
.empty-note { color: var(--dim); font-size: 13px; text-align: center; padding: 20px 0; }

.detail-stats {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.detail-stats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(90,70,40,.28);
  font-size: 13px;
}
.detail-stats i { font-style: normal; color: var(--dim); font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.detail-stats b { font-weight: 400; font-family: var(--mono); color: var(--gold-lit); }

/* ──────────────────── pixel UI theme (menus + HUD) ─────────────────── */

.screen-pixel-ui {
  --pixel: "Press Start 2P", "Courier New", monospace;
  --display: var(--pixel);
  --body: var(--pixel);
  --mono: var(--pixel);
  --gold-px: #c4a050;
  --gold-lit-px: #e8c46a;
  --ink-px: #0c0a08;
  --panel-px: #100d0a;
  --play-px: #9c2a22;
  --sel-px: #c42818;
  --skill-sel: #9b4dff;
  font-family: var(--pixel);
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

/* ──────────────────── character select v2 (HTML/CSS mock) ────────────── */

#screen-select.screen-select-v2 {
  --v2-bg: #040302;
  --v2-gold: #7c5323;
  --v2-gold2: #d2a24a;
  --v2-gold3: #efc874;
  --v2-line: #5a391a;
  --v2-red: #7c1f19;
  --v2-red2: #c53c2d;
  --v2-red3: #8d2a21;
  font-family: "Courier New", monospace;
  color: var(--v2-gold2);
  -webkit-font-smoothing: antialiased;
  image-rendering: auto;
}

#screen-select.screen-select-v2.screen-hall {
  background:
    radial-gradient(circle at 50% 42%, rgba(110, 34, 16, .16), transparent 24%),
    linear-gradient(#070504, #020201);
}
#screen-select.screen-select-v2.screen-hall::before { display: none; }
#screen-select.screen-select-v2.screen-hall::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .45) 100%),
    radial-gradient(circle at 50% 45%, transparent 45%, rgba(0, 0, 0, .4) 100%);
}

#screen-select.screen-select-v2 .account-chip {
  padding: 5px 8px 5px 5px;
  gap: 8px;
  background: #0e0906;
  border: 1px solid var(--v2-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #1b120b;
}
#screen-select.screen-select-v2 .account-portrait {
  width: 22px;
  height: 22px;
  border: 1px solid var(--v2-line);
  border-radius: 3px;
}
#screen-select.screen-select-v2 .account-chip b,
#screen-select.screen-select-v2 .account-chip small {
  font-size: 10px;
  letter-spacing: .08em;
  color: #b18b50;
}

#screen-select.screen-select-v2 .masthead {
  margin-bottom: 8px;
  flex: none;
}
#screen-select.screen-select-v2 .masthead::before {
  width: 8px;
  height: 8px;
  margin-bottom: 4px;
  background: #c4382a;
  box-shadow: 0 0 8px rgba(196, 56, 42, .4);
}
#screen-select.screen-select-v2 .game-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4.2vw, 36px);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  color: #d7a54a;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #d7a54a;
  filter: none;
  text-shadow: 2px 2px 0 #251508;
}
#screen-select.screen-select-v2 .kicker {
  width: min(288px, 72vw);
  height: 38px;
  min-width: 0;
  margin: 8px auto 0;
  padding: 0 18px;
  display: grid;
  place-items: center;
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #deb25a;
  background: linear-gradient(#120c08, #0d0906);
  border: 2px solid #5b3918;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #1b120b;
  clip-path: none;
  position: relative;
}
#screen-select.screen-select-v2 .kicker::before,
#screen-select.screen-select-v2 .kicker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: linear-gradient(#120c08, #0d0906);
  border-top: 2px solid #5b3918;
  border-right: 2px solid #5b3918;
  pointer-events: none;
}
#screen-select.screen-select-v2 .kicker::before {
  left: -7px;
  transform: translateY(-50%) rotate(45deg);
}
#screen-select.screen-select-v2 .kicker::after {
  right: -7px;
  transform: translateY(-50%) rotate(225deg);
}

#screen-select.screen-select-v2 .select-layout {
  grid-template-columns: minmax(250px, 290px) minmax(260px, 1fr) minmax(320px, 400px);
  gap: clamp(20px, 3vw, 40px);
  width: min(1240px, 98%);
  align-items: start;
  padding-bottom: 52px;
  flex: 1;
  min-height: 0;
}
#screen-select.screen-select-v2 .panel {
  margin-top: 22px;
  min-height: min(448px, 58vh);
  padding: 0;
  border: 2px solid #6a4621;
  border-radius: 6px;
  background: linear-gradient(#0e0907, #080604);
  box-shadow: inset 0 0 0 1px #24160c, 0 0 0 1px rgba(0, 0, 0, .6);
}
#screen-select.screen-select-v2 .panel-ornate::before {
  top: -6px;
  width: 10px;
  height: 10px;
  background: #c23a2a;
  box-shadow: 0 0 6px rgba(194, 58, 42, .35);
}
#screen-select.screen-select-v2 .panel-head {
  padding: 22px 18px 12px;
  margin: 0;
  gap: 0;
}
#screen-select.screen-select-v2 .panel-head h2 {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ddb15c;
  gap: 12px;
}
#screen-select.screen-select-v2 .panel-head h2::before,
#screen-select.screen-select-v2 .panel-head h2::after {
  height: 1px;
  background: #6a431f;
}
#screen-select.screen-select-v2 .select-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#screen-select.screen-select-v2 .char-list {
  padding: 0 10px 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#screen-select.screen-select-v2 .char-row {
  min-height: 64px;
  padding: 7px 10px;
  margin-bottom: 10px;
  gap: 10px;
  border: 2px solid #5d3d1f;
  border-radius: 6px;
  background: linear-gradient(#110c08, #0b0806);
  box-shadow: inset 0 0 0 1px #22150c;
  color: #cfa353;
}
#screen-select.screen-select-v2 .char-row:hover {
  border-color: #8a5a28;
}
#screen-select.screen-select-v2 .char-row.is-selected {
  border-color: #b63b2c;
  background: linear-gradient(90deg, #31100d, #170c08 65%);
  box-shadow: inset 0 0 0 1px #602019;
}
#screen-select.screen-select-v2 .char-sigil {
  width: 40px;
  height: 40px;
  border: 1px solid #5a3c1f;
  border-radius: 5px;
  background: #070503;
  box-shadow: none;
  image-rendering: pixelated;
}
#screen-select.screen-select-v2 .char-name {
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e0b45f;
}
#screen-select.screen-select-v2 .char-meta {
  font-size: 10px;
  color: #b18b50;
}
#screen-select.screen-select-v2 .char-gold {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: #d7a546;
  white-space: nowrap;
}
#screen-select.screen-select-v2 .empty-note {
  padding: 10px 18px 18px;
  font-size: 10px;
  color: #b18b50;
}

#screen-select.screen-select-v2 .select-hero {
  position: relative;
  min-height: min(510px, 62vh);
  justify-content: flex-start;
  padding-top: 0;
}
#screen-select.screen-select-v2 .center-bg {
  position: absolute;
  top: 78px;
  bottom: 38px;
  left: 18%;
  right: 18%;
  background: linear-gradient(180deg, rgba(8, 5, 4, .35), rgba(13, 7, 5, .7));
  border-left: 10px solid rgba(0, 0, 0, .22);
  border-right: 10px solid rgba(0, 0, 0, .22);
  pointer-events: none;
}
#screen-select.screen-select-v2 .halo {
  position: relative;
  z-index: 1;
  margin-top: clamp(90px, 16vh, 170px);
  width: min(276px, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(120, 34, 14, .22), rgba(0, 0, 0, 0) 64%);
}
#screen-select.screen-select-v2 .dais.ring1 {
  width: min(202px, 26vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #6e4820;
  display: grid;
  place-items: center;
  position: relative;
  background: transparent;
  box-shadow: none;
}
#screen-select.screen-select-v2 .dais.ring1::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 2px solid #4a3016;
  pointer-events: none;
}
#screen-select.screen-select-v2 .dais::before { display: none; }
#screen-select.screen-select-v2 .dais-shadow {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 54px;
  height: 10px;
  transform: translateX(-50%);
  background: #150f0b;
  border-radius: 50%;
  z-index: 0;
}
#screen-select.screen-select-v2 #select-sigil {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 112px;
  image-rendering: pixelated;
}
#screen-select.screen-select-v2 .select-hero-name {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d7a64d;
  text-shadow: none;
}

#screen-select.screen-select-v2 .select-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
#screen-select.screen-select-v2 .stats-pad {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#screen-select.screen-select-v2 .stats-head {
  text-align: center;
  margin-top: 10px;
}
#screen-select.screen-select-v2 .stats-name {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e1b35d;
}
#screen-select.screen-select-v2 .stats-lvl {
  margin: 5px 0 0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b38a50;
}
#screen-select.screen-select-v2 .stats-where {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8d6c3c;
  text-align: center;
}
#screen-select.screen-select-v2 .stat-list {
  margin: 18px 0 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#screen-select.screen-select-v2 .detail-stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
  padding: 2px 0;
  border-bottom: 1px dotted #3d2915;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a57c41;
}
#screen-select.screen-select-v2 .detail-stats i {
  flex: 0 1 auto;
  min-width: 0;
  font-style: normal;
  font-family: "Courier New", monospace;
  color: #a57c41;
  font-size: 10px;
  letter-spacing: .08em;
  white-space: nowrap;
}
#screen-select.screen-select-v2 .detail-stats i::after { display: none; }
#screen-select.screen-select-v2 .detail-stats b {
  flex: none;
  margin-left: auto;
  text-align: right;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 10px;
  color: #e0b45d;
  white-space: nowrap;
}

#screen-select.screen-select-v2 .select-actions {
  margin-top: 16px;
  gap: 8px;
}
#screen-select.screen-select-v2 .btn {
  min-height: 38px;
  padding: 8px 10px;
  border: 2px solid #654320;
  border-radius: 6px;
  background: linear-gradient(#15100b, #0f0b08);
  box-shadow: inset 0 0 0 1px #24160c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #deb35b;
}
#screen-select.screen-select-v2 .btn:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #f0d18e;
  background: linear-gradient(#1a1410, #120d09);
}
#screen-select.screen-select-v2 #btn-enter {
  border-color: #a33b2d;
  background: linear-gradient(#b44436, #8d2a20);
  color: #f0d18e;
  box-shadow: inset 0 0 0 1px #602019;
}
#screen-select.screen-select-v2 #btn-enter:hover:not(:disabled) {
  background: linear-gradient(#c53c2d, #9c2a22);
  color: #f0d18e;
}
#screen-select.screen-select-v2 #btn-enter:disabled {
  filter: grayscale(.45) brightness(.72);
  opacity: .65;
}

#screen-select.screen-select-v2 .select-footer {
  bottom: 10px;
  gap: 0;
  font-size: 11px;
  letter-spacing: .08em;
  color: #9d773d;
}
#screen-select.screen-select-v2 .select-footer kbd {
  display: inline-block;
  min-width: 38px;
  margin: 0 5px 0 14px;
  padding: 4px 7px;
  border: 1px solid #6c4a21;
  border-radius: 4px;
  background: #0e0906;
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: #d7ac53;
}
#screen-select.screen-select-v2 .select-footer .key-hint:first-child kbd {
  margin-left: 0;
}
#screen-select.screen-select-v2 .select-footer .key-hints-mobile { display: none; }

/* ───────────────────── pixel auth + create halls ─────────────────────── */

#screen-auth.screen-hall,
#screen-create.screen-hall {
  background:
    radial-gradient(ellipse 42% 36% at 50% 54%, rgba(140, 28, 18, .18), transparent 72%),
    #0a0806;
}
#screen-auth.screen-hall::before,
#screen-create.screen-hall::before { display: none; }
#screen-auth .game-title,
#screen-create .game-title {
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: .14em;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--gold-lit-px);
  color: var(--gold-lit-px);
  filter: none;
  text-shadow: 3px 3px 0 #2a1608;
}
#screen-auth .ui-kicker,
#screen-create .kicker {
  min-width: min(420px, 72vw);
  height: 28px;
  padding: 0 40px;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--gold-lit-px);
  background: #16120c;
  border: 2px solid var(--gold-px);
  box-shadow: none;
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 50%, 97.5% 100%, 2.5% 100%, 0 50%);
}
#screen-auth .ui-crest,
#screen-create .masthead::before { filter: none; }
#screen-auth .ui-gem,
#screen-create .masthead::before {
  width: 8px;
  height: 8px;
  background: #c42818;
  box-shadow: 0 0 0 1px #5a0c0c;
}
#screen-auth .ui-panel,
#screen-create .panel {
  padding: 16px 14px 14px;
  background: var(--panel-px);
  border: 2px solid var(--gold-px);
  box-shadow: 0 0 0 2px #120e0a, 0 0 0 4px #8a6a32;
}
#screen-auth .ui-panel::before,
#screen-auth .ui-panel::after { display: none; }
#screen-auth .ui-field > span,
#screen-create .field > span,
#screen-create .inv-caption,
#screen-create .panel-head h2 {
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--gold-px);
}
#screen-auth .ui-field input,
#screen-create .field input {
  font-family: var(--pixel);
  font-size: 10px;
}
#screen-auth .ui-btn,
#screen-create .btn {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .08em;
  min-height: 36px;
  border: 2px solid var(--gold-px);
  background: #120e0a;
  box-shadow: none;
  color: var(--gold-lit-px);
}
#screen-auth .ui-btn-primary,
#screen-create #btn-create {
  border-color: #3a1814;
  background: var(--play-px);
  box-shadow: 2px 2px 0 #3a1814;
}
#screen-create .class-card {
  border: 2px solid #5a4630;
  background: #12100c;
  box-shadow: none;
}
#screen-create .class-card.is-selected {
  border: 3px solid var(--sel-px);
  background: #1a100c;
}
#screen-create .class-name,
#screen-create .class-role {
  font-size: 8px;
  letter-spacing: .08em;
}
#screen-create .detail-stats li {
  align-items: baseline;
  gap: 0;
  font-size: 8px;
  border-bottom: none;
}
#screen-create .detail-stats i {
  flex: 1;
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-size: 8px;
  color: var(--gold-px);
}
#screen-create .detail-stats i::after {
  content: "";
  flex: 1 1 auto;
  min-width: 10px;
  margin: 0 8px;
  border-bottom: 2px dotted #6b5530;
  transform: translateY(-0.35em);
}
#screen-create .detail-stats b { font-size: 8px; color: #b8aea0; }
#screen-auth .key-hints,
#screen-create .key-hints {
  font-size: 8px;
  color: var(--gold-lit-px);
}
#screen-auth .key-hints kbd,
#screen-create .key-hints kbd {
  border: 2px solid var(--gold-px);
  background: #120e0a;
  font-family: var(--pixel);
  font-size: 8px;
}

/* ────────────────────────── character creation ───────────────────────── */

.create-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
  gap: 20px;
  width: min(1180px, 100%);
  flex: 1;
  min-height: 0;
  align-items: center;
  padding-bottom: 48px;
}
#screen-create .class-stage { display: none; }
.class-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}
.class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 14px;
  border: 1px solid #3a2d1e;
  background: linear-gradient(180deg, rgba(48,37,26,.4), rgba(10,8,6,.55));
  cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.class-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.class-card.is-selected {
  border-color: #93342a;
  box-shadow: inset 0 0 28px rgba(147,52,42,.22), 0 0 24px rgba(147,52,42,.16);
}
.class-card .dais { width: min(160px, 22vw); }
.class-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--gold-lit);
  text-transform: uppercase;
}
.class-role {
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
}
.class-blurb { font-size: 13px; color: var(--dim); line-height: 1.6; margin: 0 0 12px; }
.create-detail-panel { --panel-border: 36px; }
.create-meta-details { margin: 0; }
.create-meta-details > summary { display: none; }
.create-meta { min-width: 0; }
.create-form-bar { min-width: 0; }
.create-skills { margin: 0 0 16px; font-size: 12px; color: var(--dim); line-height: 1.65; }
.create-skills b { color: var(--gold); font-weight: 400; font-family: var(--display); }
.create-key-hints .key-hints-mobile { display: none; }

/* ───────────────────────────────── game ──────────────────────────────── */

#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#game-canvas.is-attack { cursor: crosshair; }
#game-canvas.is-fish { cursor: pointer; }
#game-canvas.is-gather { cursor: cell; }

.hud-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hud-layer > * { pointer-events: auto; }
.hud-layer .net-status,
.hud-layer .hud-identity,
.hud-layer .log,
.hud-layer .xp-track { pointer-events: none; }

.net-status {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  background: rgba(0,0,0,.55); padding: 3px 10px; border: 1px solid #2c231c;
}

.hud-identity {
  position: absolute; top: 14px; left: 16px;
  text-shadow: 0 2px 6px #000;
}
.char-line { font-family: var(--display); font-size: 15px; color: var(--gold-lit); letter-spacing: .08em; }
.char-line .dim { color: var(--dim); }
.gold-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--mono); font-size: 13px; color: var(--xp); }
.hud-ail {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c2612c;
}
@media (max-width: 1180px) {
  .warden-row { flex-wrap: wrap; }
}
.coin { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 33% 30%, #ffe9a8, #a8792a); box-shadow: 0 0 6px rgba(255,200,90,.5); }

.minimap-cluster {
  position: absolute; top: 12px; right: 12px;
  width: clamp(148px, 16vw, 248px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.minimap-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(180deg, #2a2118, #0c0907);
  border: 1px solid #5a4326;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2016,
    0 0 0 4px #6b5530,
    inset 0 0 0 1px #1a120c;
}
#minimap {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  display: block;
  background: #060504;
}
.place-card {
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(16,12,9,.82), rgba(6,4,3,.88));
  border: 1px solid #3a2d1e;
}
.place-name {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f0e5cb;
}
.place-obj { margin-top: 3px; font-size: 12px; color: var(--gold); }
.sky-clock {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a9c8d8;
}

.log {
  position: absolute; left: 16px; bottom: calc(var(--globe-size) + 18px);
  width: min(340px, 30vw); max-height: 24vh;
  list-style: none; margin: 0; padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.log li {
  font-size: 13px; line-height: 1.5; color: var(--text);
  text-shadow: 0 2px 5px #000; padding: 1px 0;
  animation: fadein .18s ease-out;
}
.log .t-good { color: var(--good); }
.log .t-bad  { color: var(--bad); }
.log .t-gold { color: var(--xp); }
.log .t-xp   { color: #b58fd0; }
.log .t-mana { color: var(--mana-lit); }
.log .t-chat { color: #e8e0cc; }
.log .t-chat b { color: var(--gold-lit); font-weight: 400; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.chat-form {
  position: absolute;
  left: 16px;
  bottom: calc(var(--globe-size) + 8px);
  width: min(340px, 30vw);
  z-index: 6;
}
.chat-form input {
  width: 100%; font-family: var(--body); font-size: 14px; color: var(--text);
  background: rgba(8,6,5,.94); border: 1px solid var(--gold-dim); padding: 8px 11px; outline: none;
}

/* HUD: orbs docked to the hotbar, one centered cluster */

.hud-dock {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.hud-mid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 2px;
  min-width: 220px;
}

.hud-util {
  width: 52px;
  height: 52px;
  flex: none;
  align-self: center;
  border: 1px solid #5a4326;
  padding: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  background: linear-gradient(180deg, #2c241c, #100c09);
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2016,
    inset 0 1px 0 rgba(227, 198, 141, .16);
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  cursor: pointer;
}
.hud-util:hover { filter: brightness(1.25); }
.hud-secret { display: none !important; }

.globe {
  position: relative;
  width: var(--globe-size);
  height: var(--globe-size);
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(227, 198, 141, .28), transparent 42%),
    radial-gradient(circle at 50% 54%, #1a120c 0%, #0a0705 70%);
  box-shadow:
    0 0 0 2px #2a2016,
    0 0 0 4px #6b5530,
    0 0 0 6px #1a120c,
    0 0 0 7px #4a3620,
    inset 0 0 0 3px #3a2d1e,
    0 8px 18px rgba(0, 0, 0, .55);
}
.globe::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .7);
  pointer-events: none;
  z-index: 2;
}
.globe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  z-index: 3;
  pointer-events: none;
}
.globe-health::after {
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #c42818 46%, #5a0c0c);
  box-shadow: 0 0 8px rgba(207, 91, 46, .8);
}
.globe-mana::after {
  background: radial-gradient(circle at 35% 30%, #9ec4ff, #3a6ab0 46%, #0c1a3a);
  box-shadow: 0 0 8px rgba(91, 147, 224, .75);
}

.globe-cavity {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 76%;
  overflow: hidden;
  border-radius: 50%;
}

.globe-fill {
  position: absolute;
  inset: 0;
  transition: clip-path .2s ease-out;
}
.globe-health .globe-fill {
  background: radial-gradient(circle at 38% 28%, #ff8a6a 0%, #d94b39 28%, #8e1f18 62%, #3a0c0a 100%);
}
.globe-mana .globe-fill {
  background: radial-gradient(circle at 38% 28%, #9ec4ff 0%, #5b93e0 28%, #2a4a86 62%, #0c1a3a 100%);
}

.globe-text {
  position: absolute; left: 0; right: 0; bottom: 18%;
  text-align: center; font-family: var(--mono); font-size: 11px;
  color: #f7ecd6; text-shadow: 0 1px 3px #000, 0 0 10px #000;
  pointer-events: none;
  z-index: 4;
}

.globe-cluster {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.flask-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.flask-well {
  width: 40px;
  height: 48px;
  border-radius: 50% 50% 12px 12px;
  border: 2px solid #5a4326;
  background: radial-gradient(circle at 35% 30%, #2c241c, #0a0705);
  box-shadow: 0 0 0 1px #120e0a, inset 0 0 10px rgba(0,0,0,.55);
  padding: 0;
  cursor: pointer;
  position: relative;
}
.flask-key {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--gold-lit);
  pointer-events: none;
}
.flask-orb {
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 12px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 50%;
  background: #1a120c;
}
.flask-icon {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 12px;
  width: auto;
  height: auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flask-icon img,
.flask-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.flask-well.is-filled .flask-orb { opacity: 0; }
.flask-count {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 14px;
  padding: 0 3px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  color: var(--gold-lit);
  background: #1a120c;
  border: 1px solid #5a4326;
  pointer-events: none;
  z-index: 2;
}
.flask-orb.hp { box-shadow: inset 0 0 8px #8e1f18; }
.flask-orb.energy { box-shadow: inset 0 0 8px #2a4a86; }
.flask-orb.portal { box-shadow: inset 0 0 8px #5a2a8a; }
.portal-well.is-ready .flask-orb.portal {
  background: radial-gradient(circle at 35% 30%, #d8c4ff, #6a3d9a);
}
.portal-well .flask-icon {
  opacity: 1;
}
.portal-well .slot-cd {
  border-radius: 50% 50% 12px 12px;
}
.portal-well .flask-key { color: #d8c4ff; }
.flask-well.is-filled .flask-orb.hp {
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #8e1f18);
}
.flask-well.is-filled .flask-orb.energy {
  background: radial-gradient(circle at 35% 30%, #9ec4ff, #2a4a86);
}
.flask-well.is-boost .flask-orb.energy {
  background: radial-gradient(circle at 35% 30%, #c8e89a, #3a5a20);
}

.mount-well .flask-orb.mount {
  background: radial-gradient(circle at 35% 30%, #d4b87a, #6b4a18);
  box-shadow: inset 0 0 8px #4a3010;
}
.mount-well.is-active {
  border-color: #d4b87a;
  box-shadow:
    0 0 0 1px #120e0a,
    inset 0 0 10px rgba(0, 0, 0, .55),
    0 0 0 1px #6b4a18,
    0 0 14px rgba(232, 196, 120, .38);
}
.mount-well.is-active .flask-orb.mount {
  background: radial-gradient(circle at 35% 30%, #f0d898, #8a6020);
  box-shadow: inset 0 0 10px #c8a040, 0 0 6px rgba(200, 160, 64, .45);
}
.mount-well.is-low .flask-orb.mount {
  background: radial-gradient(circle at 35% 30%, #e87850, #6b2018);
}
.mount-hp {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 3px;
  background: rgba(0, 0, 0, .55);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}
.mount-hp > span {
  display: block;
  height: 100%;
  width: var(--pct, 100%);
  background: linear-gradient(90deg, #8a6020, #d4b87a);
  border-radius: 2px;
  transition: width .2s ease;
}
.mount-well.is-low .mount-hp > span {
  background: linear-gradient(90deg, #8a2018, #e87850);
}
.mount-well .slot-cd {
  border-radius: 50% 50% 12px 12px;
}
.mount-cd-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: #f0d898;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
  z-index: 4;
  pointer-events: none;
}
.mount-well.is-leap-ready .flask-orb.mount {
  box-shadow: inset 0 0 10px #c8a040, 0 0 8px rgba(232, 196, 120, .35);
}
.mount-well.is-empty {
  opacity: 0.72;
  border-color: #5a4326;
  box-shadow:
    0 0 0 1px #120e0a,
    inset 0 0 10px rgba(0, 0, 0, .55);
}
.mount-well.is-empty .companion-art {
  filter: grayscale(0.35);
}
.mount-well.is-empty:hover {
  opacity: 1;
  border-color: #8a6a32;
}

.skillbar {
  position: relative;
  width: min(520px, 58vw);
  min-height: 72px;
  padding: 8px 10px 7px;
  background: linear-gradient(180deg, #2a2118, #100c09 55%, #0a0705);
  border: 1px solid #5a4326;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2016,
    0 0 0 4px #6b5530,
    inset 0 1px 0 rgba(227, 198, 141, .12);
}
.hud-figurines {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: center;
  gap: 4px;
  min-height: min(40px, 5.2vw);
  margin: 0 0 4px;
  padding: 0;
  pointer-events: auto;
}
.hud-figurine {
  position: relative;
  width: min(40px, 5.2vw);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.hud-figurine-icon {
  position: absolute;
  inset: 0;
  display: block;
  border: 2px solid #5a3c20;
  border-radius: 3px;
  background: linear-gradient(180deg, #14100c, #080604);
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 6px 14px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.companion-art-shell {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.companion-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(212, 184, 122, .18), transparent 44%),
    radial-gradient(circle at 50% 72%, #1a120c 0%, #080604 78%);
}
.companion-sprite {
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  object-position: center 72%;
  filter:
    drop-shadow(0 3px 6px rgba(0, 0, 0, .88))
    drop-shadow(0 0 12px rgba(212, 184, 122, .28));
  image-rendering: pixelated;
}
.companion-glyph {
  width: 84%;
  height: 84%;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(212, 184, 122, .32));
}
.hud-figurine-icon img,
.hud-figurine-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
}
.hud-figurine-icon img.hud-art {
  object-fit: contain;
  image-rendering: pixelated;
}
.hud-figurine-icon .figurine-sprite {
  width: 150%;
  height: 150%;
  max-width: none;
  margin: -25% 0 0 -25%;
  object-fit: cover;
  object-position: center 70%;
}
.hud-figurine-icon .figurine-glyph {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.hud-figurine-timer {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  padding: 2px;
  color: #cc6666;
  background: conic-gradient(
    from -90deg,
    currentColor 0deg,
    currentColor calc(var(--pct, 1) * 360deg),
    transparent calc(var(--pct, 1) * 360deg)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.hud-figurine.is-animal {
  width: min(40px, 5.2vw);
}
.hud-figurine.is-animal .hud-figurine-icon {
  border-color: #8a6a32;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 8px 16px rgba(0, 0, 0, .6),
    0 0 0 1px #3a2810,
    0 0 14px rgba(212, 184, 122, .24);
}
.hud-figurine.is-animal.is-mounted .hud-figurine-icon,
.hud-figurine.is-animal:hover .hud-figurine-icon {
  border-color: #d4b87a;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 8px 16px rgba(0, 0, 0, .55),
    0 0 0 1px #6b4a18,
    0 0 16px rgba(232, 196, 120, .42);
}
.hud-figurine.is-animal .hud-figurine-icon .companion-sprite {
  width: 132%;
  height: 132%;
  margin: -18% 0 0 -16%;
  object-position: center 68%;
}
.hud-figurine.is-pet .hud-figurine-icon {
  border-color: #7a5a28;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 8px 16px rgba(0, 0, 0, .58),
    0 0 0 1px #3a2810,
    0 0 12px rgba(212, 184, 122, .2);
}
.hud-figurine.is-pet:hover .hud-figurine-icon {
  border-color: #d4b87a;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 8px 16px rgba(0, 0, 0, .55),
    0 0 0 1px #6b4a18,
    0 0 14px rgba(232, 196, 120, .36);
}
.hud-figurine.is-pet .hud-figurine-icon .companion-sprite {
  object-fit: cover;
  transform: none;
}
.hud-figurine.is-resting { opacity: .62; }
.hud-figurine.is-effect .hud-figurine-icon {
  border-color: #4a7a38;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 6px 14px rgba(0, 0, 0, .55),
    0 0 10px rgba(120, 200, 90, .35);
}
.hud-figurine.is-bad .hud-figurine-icon {
  border-color: #8a3030;
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 6px 14px rgba(0, 0, 0, .55),
    0 0 10px rgba(220, 80, 80, .35);
}
.skillbar-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.slot {
  position: relative;
  width: min(52px, 6.2vw);
  height: auto;
  aspect-ratio: 1;
  flex: none;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  border: 1px solid #5a4326;
  box-shadow: inset 0 0 0 1px #1a120c, inset 0 8px 14px rgba(0, 0, 0, .45);
  padding: 0;
  cursor: pointer;
}
.slot:hover { filter: brightness(1.25); }
.slot.is-item-grant {
  border-color: var(--grant-color, #e8d5a0);
  box-shadow:
    inset 0 0 0 1px #1a120c,
    inset 0 8px 14px rgba(0, 0, 0, .45),
    0 0 0 2px var(--grant-color, #e8d5a0),
    0 0 12px color-mix(in srgb, var(--grant-color, #e8d5a0) 50%, transparent);
}
.slot-key {
  position: absolute; top: 2px; left: 5px;
  font-family: var(--mono); font-size: 9px; color: var(--dim); z-index: 2;
}
.slot-icon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slot-icon img,
.slot-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Raster skill/item art ships its own frame — do not crop or double-chrome it. */
.skill-art {
  object-fit: contain !important;
  image-rendering: pixelated;
}
.item-art {
  object-fit: contain !important;
  image-rendering: auto;
}
.slot-qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 2;
  font-size: 10px;
  color: var(--gold-lit);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.slot.is-spent { opacity: .4; }
.vault-grid {
  justify-content: center;
  margin: 8px 0 0;
  grid-template-rows: repeat(4, 56px);
}
.shop-tabs button.is-locked { opacity: .55; }
.bag-slot.is-locked { opacity: .4; }
.quest-row { grid-template-columns: 1fr auto; }
.quest-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, rgba(22, 16, 12, .92), rgba(8, 6, 5, .96));
}
.quest-card.is-ready {
  box-shadow: inset 0 0 0 1px #8a7040, 0 0 14px rgba(207, 91, 46, .28);
}
.quest-card.is-claimed { opacity: .62; }
.quest-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid #5a4326;
  background: radial-gradient(circle at 38% 28%, #2a1c12, #0a0705);
  box-shadow: inset 0 0 0 1px #1a120c;
}
.quest-mark canvas {
  width: 72px;
  height: 72px;
  display: block;
}
.quest-body { min-width: 0; }
.quest-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  font-weight: 600;
  line-height: 1.2;
}
.quest-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quest-check li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #e8dcc4;
}
.quest-check i {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 1px solid #8a7040;
  background: #120e0a;
}
.quest-check li.is-done i {
  background: linear-gradient(135deg, transparent 42%, #e3c68d 42%, #e3c68d 58%, transparent 58%),
    linear-gradient(45deg, transparent 42%, #e3c68d 42%, #e3c68d 58%, transparent 58%);
  background-color: #2a1c10;
}
.quest-check li.is-done span { color: var(--gold); }
.quest-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 88px;
}
.quest-prizes {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.quest-prize {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  position: relative;
  cursor: pointer;
}
.quest-prize .item-glyph,
.quest-prize .item-glyph img,
.quest-prize .item-glyph canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.quest-prize.is-gold {
  display: grid;
  place-items: center;
  gap: 2px;
}
.quest-prize.is-gold .coin { width: 14px; height: 14px; }
.quest-prize.is-gold em {
  font-style: normal;
  font-size: 10px;
  color: var(--gold-lit);
}
.quest-claim {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-lit);
  background: #1a120c;
  border: 1px solid #5a4326;
  padding: 8px 12px;
  min-width: 88px;
  cursor: pointer;
}
.quest-card.is-ready .quest-claim {
  border-color: #8a7040;
  color: #fff4e2;
  background: linear-gradient(180deg, #7a2a1c, #2a0c0a);
}
.quest-claim:disabled { opacity: .45; cursor: default; }
.quest-row.is-ready { box-shadow: inset 0 0 0 1px #8a7040, 0 0 12px rgba(207, 91, 46, .25); }
#quests.forge-panel {
  width: min(620px, 94vw);
}
.slot-cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.72);
  height: 0%;
  z-index: 3;
  transition: height .06s linear;
}

.belt { display: flex; gap: 6px; margin-left: 10px; padding-left: 12px; border-left: 1px solid rgba(140,110,70,.28); }
.belt-slot {
  position: relative;
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  border: 1px solid #5a4326;
  box-shadow: inset 0 0 0 1px #1a120c;
  cursor: pointer;
}
.belt-slot .num { position: absolute; top: 1px; left: 4px; font-family: var(--mono); font-size: 9px; color: var(--dim); }
.flask {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 14px; height: 22px; border-radius: 4px 4px 6px 6px;
}
.flask.health { background: linear-gradient(180deg, #e05a45, #6d1a14); box-shadow: 0 0 10px rgba(224,90,69,.6); }
.flask.mana   { background: linear-gradient(180deg, #5b93e0, #1a2c66); box-shadow: 0 0 10px rgba(91,147,224,.6); }

.xp-track {
  position: relative;
  width: 100%;
  height: 22px;
  background: linear-gradient(180deg, #1a140f, #0a0705);
  border: 1px solid #4a3620;
  box-shadow: inset 0 0 0 1px #120e0a;
}
.xp-cavity {
  position: absolute;
  left: 8%;
  top: 28%;
  width: 84%;
  height: 44%;
  overflow: hidden;
}
.xp-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #6b5530, #e3c68d, #b99a3f);
  transition: clip-path .25s ease-out;
}
.xp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; color: #f0e5cb; text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.cast-bar {
  position: relative;
  margin-top: 6px;
  height: 16px;
  background: linear-gradient(180deg, #1a140f, #0a0705);
  border: 1px solid #5a2a8a;
  box-shadow: inset 0 0 0 1px #120e0a;
}
.cast-fill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 0%;
  background: linear-gradient(90deg, #3a2060, #9b6cff, #d8c4ff);
}
.cast-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d8c4ff;
  pointer-events: none;
}

/* ───────────────────── in-game HUD (Diablo bar) ────────────────────── */

#screen-game.screen-pixel-ui {
  --hud-gold: #c4a050;
  --hud-gold2: #e8c46a;
  --hud-frame: #3a2614;
  --hud-plate: #120e0a;
  --hud-skill-sel: #b44dff;
  --globe-size: clamp(108px, 11.5vw, 148px);
}

#screen-game.screen-pixel-ui .hud-identity .char-line {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--hud-gold2);
}
#screen-game.screen-pixel-ui .gold-line {
  font-size: 11px;
  color: var(--hud-gold2);
}
#screen-game.screen-pixel-ui .hud-ail { font-size: 10px; }
#screen-game.screen-pixel-ui .net-status {
  font-size: 10px;
  border: 1px solid #5a4630;
  background: rgba(18, 14, 10, .9);
}

#screen-game.screen-pixel-ui .minimap-frame {
  background: linear-gradient(#0e0907, #080604);
  border: 2px solid var(--hud-gold);
  box-shadow: inset 0 0 0 1px #24160c, 0 0 0 1px #120e0a;
  border-radius: 4px;
}
#screen-game.screen-pixel-ui .place-card {
  border: 1px solid #5a4630;
  background: rgba(18, 14, 10, .92);
}
#screen-game.screen-pixel-ui .place-name {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--hud-gold2);
}
#screen-game.screen-pixel-ui .place-obj { font-size: 10px; }
#screen-game.screen-pixel-ui .log li { font-size: 11px; line-height: 1.5; }
#screen-game.screen-pixel-ui .chat-form input {
  font-size: 12px;
  border: 1px solid var(--hud-gold);
}

#screen-game.screen-pixel-ui .hud-dock {
  gap: 0;
  bottom: 8px;
  align-items: flex-end;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .65));
}

#screen-game.screen-pixel-ui .globe-cluster {
  gap: 4px;
  align-items: flex-end;
  padding-bottom: 0;
}

#screen-game.screen-pixel-ui .globe {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 240, 200, .14), transparent 38%),
    radial-gradient(circle at 50% 58%, #1a100c 0%, #080504 72%);
  box-shadow:
    0 0 0 4px #1a1008,
    0 0 0 6px #6b4a22,
    0 0 0 8px #2a1a0c,
    0 0 0 10px #4a3018,
    0 0 0 12px #120c08,
    inset 0 0 28px rgba(0, 0, 0, .8),
    0 10px 22px rgba(0, 0, 0, .55);
}
#screen-game.screen-pixel-ui .globe::before {
  inset: 10%;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, .85),
    inset 0 -8px 12px rgba(0, 0, 0, .4);
}
#screen-game.screen-pixel-ui .globe::after {
  width: 10px;
  height: 10px;
  top: 1%;
  background: radial-gradient(circle at 35% 30%, #ff8a6a, #c42818 50%, #5a0c0c);
  box-shadow: 0 0 8px rgba(207, 91, 46, .75);
}
#screen-game.screen-pixel-ui .globe-mana::after {
  background: radial-gradient(circle at 35% 30%, #9ec4ff, #3a6ab0 50%, #0c1a3a);
  box-shadow: 0 0 8px rgba(91, 147, 224, .75);
}
#screen-game.screen-pixel-ui .globe-cavity {
  left: 11%;
  top: 11%;
  width: 78%;
  height: 78%;
}
#screen-game.screen-pixel-ui .globe-health .globe-fill {
  background: radial-gradient(circle at 38% 26%, #ff7a6a 0%, #e03828 28%, #b01818 55%, #5a0808 100%);
}
#screen-game.screen-pixel-ui .globe-mana .globe-fill {
  background: radial-gradient(circle at 38% 26%, #8ec8ff 0%, #4890e8 28%, #2860b8 55%, #0a1848 100%);
}
#screen-game.screen-pixel-ui .globe-text {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  color: #fff8ee;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px #000, 0 0 12px rgba(0, 0, 0, .8);
}

#screen-game.screen-pixel-ui .flask-well {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 2px solid #6b4a22;
  background: linear-gradient(180deg, #1a120c, #0a0705);
  box-shadow: inset 0 0 0 1px #120e0a, inset 0 -6px 10px rgba(0, 0, 0, .5);
}
#screen-game.screen-pixel-ui .flask-key {
  bottom: 2px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--hud-gold2);
  text-shadow: 0 1px 2px #000;
}
#screen-game.screen-pixel-ui .flask-count {
  right: 1px;
  top: 1px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  border: 1px solid #5a4630;
  background: rgba(18, 14, 10, .92);
  color: #f0e5cb;
}
#screen-game.screen-pixel-ui .flask-icon {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 10px;
}
#screen-game.screen-pixel-ui .flask-orb {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 10px;
  border-radius: 2px;
}
#screen-game.screen-pixel-ui .flask-icon canvas {
  image-rendering: pixelated;
}
#screen-game.screen-pixel-ui .flask-icon img.item-art,
#screen-game.screen-pixel-ui .flask-icon img.skill-art {
  object-fit: contain;
  image-rendering: auto;
}
#screen-game.screen-pixel-ui .portal-well .slot-cd { border-radius: 4px; }
#screen-game.screen-pixel-ui .flask-stack { gap: 4px; }

/* Flask PNGs ship their own frame — strip double chrome like skill slots. */
#screen-game.screen-pixel-ui .flask-well:has(.skill-art),
#screen-game.screen-pixel-ui .flask-well:has(.item-art),
#screen-game.screen-pixel-ui .flask-well.has-flask-art,
#screen-game.screen-pixel-ui .mount-well:has(.item-art),
#screen-game.screen-pixel-ui .mount-well.has-flask-art {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-game.screen-pixel-ui .flask-well:has(.skill-art) .flask-icon,
#screen-game.screen-pixel-ui .flask-well:has(.item-art) .flask-icon,
#screen-game.screen-pixel-ui .flask-well.has-flask-art .flask-icon,
#screen-game.screen-pixel-ui .mount-well:has(.item-art) .flask-icon,
#screen-game.screen-pixel-ui .mount-well.has-flask-art .flask-icon {
  inset: 0;
}
#screen-game.screen-pixel-ui .flask-well:has(.skill-art) .flask-icon img,
#screen-game.screen-pixel-ui .flask-well:has(.item-art) .flask-icon img,
#screen-game.screen-pixel-ui .flask-well.has-flask-art .flask-icon img,
#screen-game.screen-pixel-ui .mount-well:has(.item-art) .flask-icon img,
#screen-game.screen-pixel-ui .mount-well.has-flask-art .flask-icon img,
#screen-game.screen-pixel-ui .flask-well:has(.skill-art) .flask-icon canvas,
#screen-game.screen-pixel-ui .flask-well:has(.item-art) .flask-icon canvas,
#screen-game.screen-pixel-ui .flask-well.has-flask-art .flask-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
#screen-game.screen-pixel-ui .flask-well:has(.skill-art) .flask-key,
#screen-game.screen-pixel-ui .flask-well:has(.item-art) .flask-key,
#screen-game.screen-pixel-ui .flask-well.has-flask-art .flask-key,
#screen-game.screen-pixel-ui .mount-well:has(.item-art) .flask-key,
#screen-game.screen-pixel-ui .mount-well.has-flask-art .flask-key {
  z-index: 3;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
#screen-game.screen-pixel-ui .flask-well:has(.skill-art) .slot-cd,
#screen-game.screen-pixel-ui .flask-well:has(.item-art) .slot-cd,
#screen-game.screen-pixel-ui .flask-well.has-flask-art .slot-cd,
#screen-game.screen-pixel-ui .mount-well:has(.item-art) .slot-cd,
#screen-game.screen-pixel-ui .mount-well.has-flask-art .slot-cd,
#screen-game.screen-pixel-ui .mount-well:has(.item-art) .mount-cd-text,
#screen-game.screen-pixel-ui .mount-well.has-flask-art .mount-cd-text {
  border-radius: 0;
}

#screen-game.screen-pixel-ui .hud-mid {
  gap: 0;
  min-width: 0;
  padding-bottom: 2px;
}
#screen-game.screen-pixel-ui .mount-well {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  aspect-ratio: auto;
}
#screen-game.screen-pixel-ui .mount-well .flask-orb {
  opacity: 0;
}
#screen-game.screen-pixel-ui .mount-well .flask-key {
  z-index: 3;
}
#screen-game.screen-pixel-ui .hud-figurine.is-animal .hud-figurine-icon,
#screen-game.screen-pixel-ui .hud-figurine.is-pet .hud-figurine-icon {
  border-width: 2px;
  border-radius: 3px;
}
#screen-game.screen-pixel-ui .hud-figurine.has-emblem-art .hud-figurine-icon,
#screen-game.screen-pixel-ui .hud-figurine.has-hud-art .hud-figurine-icon {
  border: none;
  background: transparent;
  box-shadow: none;
}
#screen-game.screen-pixel-ui .hud-figurine.has-emblem-art .hud-figurine-icon .item-art,
#screen-game.screen-pixel-ui .hud-figurine.has-hud-art .hud-figurine-icon .hud-art {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  image-rendering: pixelated;
}
#screen-game.screen-pixel-ui .mount-well .flask-key {
  z-index: 3;
}
#screen-game.screen-pixel-ui .mount-well .slot-cd,
#screen-game.screen-pixel-ui .mount-well .mount-cd-text {
  border-radius: 3px;
}
#screen-game.screen-pixel-ui .hud-figurines {
  margin-bottom: 2px;
  min-height: min(40px, 5.2vw);
}

#screen-game.screen-pixel-ui .skillbar {
  width: min(580px, 62vw);
  min-height: 76px;
  padding: 10px 12px 8px;
  background:
    linear-gradient(180deg, rgba(42, 28, 16, .45) 0%, transparent 18%),
    linear-gradient(180deg, #1a120c 0%, #0c0906 55%, #080604 100%);
  border: 2px solid #8a6a32;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 106, .12),
    inset 0 0 0 1px #24160c,
    0 0 0 1px #120e0a;
}
#screen-game.screen-pixel-ui .skillbar-row {
  gap: 4px;
}
#screen-game.screen-pixel-ui .slot {
  width: min(54px, 6.8vw);
  border: 2px solid #5a3c20;
  border-radius: 3px;
  background: linear-gradient(180deg, #14100c, #080604);
  box-shadow:
    inset 0 0 0 1px #0a0806,
    inset 0 6px 14px rgba(0, 0, 0, .55);
}
#screen-game.screen-pixel-ui .slot-key {
  font-family: var(--mono);
  font-size: 9px;
  color: #8b7d68;
  opacity: .85;
}
#screen-game.screen-pixel-ui .slot-icon img,
#screen-game.screen-pixel-ui .slot-icon canvas {
  image-rendering: pixelated;
}
#screen-game.screen-pixel-ui .skill-slot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#screen-game.screen-pixel-ui .skill-slot.is-pressed,
#screen-game.screen-pixel-ui .skill-slot:focus-visible {
  border-color: var(--hud-skill-sel);
  box-shadow:
    inset 0 0 0 1px #1a120c,
    0 0 0 2px #7a38e8,
    0 0 18px rgba(180, 77, 255, .55);
}
#screen-game.screen-pixel-ui .slot.is-item-grant {
  border-color: var(--grant-color, #e8d5a0);
  box-shadow:
    inset 0 0 0 1px #1a120c,
    0 0 0 2px var(--grant-color, #e8d5a0),
    0 0 12px color-mix(in srgb, var(--grant-color, #e8d5a0) 50%, transparent);
}

#screen-game.screen-pixel-ui .xp-track {
  height: 24px;
  margin-top: 0;
  background: linear-gradient(180deg, #100c08, #080604);
  border: 2px solid #8a6a32;
  border-top: 1px solid #4a3018;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 0 1px #24160c;
}
#screen-game.screen-pixel-ui .xp-cavity {
  left: 6%;
  top: 22%;
  width: 88%;
  height: 56%;
}
#screen-game.screen-pixel-ui .xp-fill {
  background: linear-gradient(90deg, #8a6a32, #e8c46a 45%, #f0d890 70%, #c4a050);
}
#screen-game.screen-pixel-ui .xp-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff8ee;
  gap: 5px;
  text-shadow: 0 1px 3px #000;
}
#screen-game.screen-pixel-ui .cast-bar {
  margin-top: 4px;
  border: 1px solid #6a28c8;
  background: #120e0a;
  border-radius: 3px;
}
#screen-game.screen-pixel-ui .cast-text {
  font-size: 10px;
  letter-spacing: .08em;
}

#screen-game.screen-pixel-ui .flask-well,
#screen-game.screen-pixel-ui .btn,
#screen-game.screen-pixel-ui .dialog-choice {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Skill/armor PNGs carry their own frame — strip pixel-ui slot chrome on top. */
#screen-game.screen-pixel-ui .skill-slot:has(.skill-art) {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-game.screen-pixel-ui .skill-slot.is-pressed:has(.skill-art),
#screen-game.screen-pixel-ui .skill-slot:focus-visible:has(.skill-art) {
  box-shadow: 0 0 0 2px var(--hud-skill-sel), 0 0 14px rgba(180, 77, 255, .45);
}
#screen-game.screen-pixel-ui .bag-slot:has(.item-art),
#screen-game.screen-pixel-ui .eq-slot:has(.item-art),
#screen-game.screen-pixel-ui .shop-slot:has(.item-art),
#screen-game.screen-pixel-ui .vault-grid .bag-slot:has(.item-art),
#screen-game.screen-pixel-ui .quest-prize:has(.item-art),
#screen-game.screen-pixel-ui .forge-row .slot:has(.item-art) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#screen-game.screen-pixel-ui .bag-slot.is-filled.r-magic:has(.item-art) {
  box-shadow: 0 0 0 2px #5b93e0;
}
#screen-game.screen-pixel-ui .bag-slot.is-filled.r-rare:has(.item-art),
#screen-game.screen-pixel-ui .eq-slot.is-filled.r-rare:has(.item-art) {
  box-shadow: 0 0 0 2px #e4c45a;
}
#screen-game.screen-pixel-ui .bag-slot.is-filled.r-set:has(.item-art),
#screen-game.screen-pixel-ui .eq-slot.is-filled.r-set:has(.item-art) {
  box-shadow: 0 0 0 2px #6fbf5a;
}
#screen-game.screen-pixel-ui .bag-slot.is-filled.r-legendary:has(.item-art),
#screen-game.screen-pixel-ui .eq-slot.is-filled.r-legendary:has(.item-art) {
  box-shadow: 0 0 0 2px #cf5b2e;
}
#screen-game.screen-pixel-ui .bag-slot.is-filled.r-ancestral:has(.item-art),
#screen-game.screen-pixel-ui .eq-slot.is-filled.r-ancestral:has(.item-art) {
  box-shadow: 0 0 0 2px #c89bff;
}
#screen-game.screen-pixel-ui .bag-slot.is-selected:has(.item-art) {
  box-shadow: 0 0 0 2px var(--gold-lit-px);
}
#screen-game.screen-pixel-ui .tree-skill:has(.skill-art) {
  border-color: transparent;
  background: transparent;
}

/* dialogs — filled from the kit Dialogue stylesheet, not hollow frames */

.dialog {
  position: relative;
  width: min(460px, 92vw);
  padding: 22px 20px;
  background: linear-gradient(180deg, rgba(24, 18, 13, .96), rgba(8, 6, 5, .97));
  border: 1px solid #4a3620;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2018,
    0 0 0 4px #6b5530,
    0 18px 50px rgba(0,0,0,.75);
}

.dialog-title {
  margin: 0 0 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-lit);
  background: linear-gradient(180deg, #2c241c, #100c09);
  border: 1px solid #5a4326;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dialog-choice {
  width: 100%;
  min-height: 48px;
  border: 1px solid #3a2d1e;
  background: rgba(6, 4, 3, .7);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lit);
  cursor: pointer;
}
.dialog-choice:hover,
.dialog-choice.is-selected {
  border-color: #7a2a1c;
  background: linear-gradient(180deg, #7a2a1c, #2a0c0a);
  color: #fff4e2;
}

.dialog-keys {
  list-style: none;
  margin: 10px 0 0;
  padding: 32px 28px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  min-height: 148px;
  border: 1px solid #3a2d1e;
  background: rgba(8, 6, 5, .55);
}
.dialog-keys li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}
.dialog-keys b {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

.sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  width: min(440px, 46vw);
  max-height: calc(100% - var(--globe-size) - 70px);
  z-index: 7;
  display: flex;
  flex-direction: column;
}
.sheet.is-expanded {
  width: min(560px, 56vw);
}
.sheet .icon-btn-close { position: absolute; top: -6px; right: -6px; z-index: 2; }
.sheet .icon-btn-expand { position: absolute; top: -6px; right: 34px; z-index: 2; }
.sheet-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-portrait {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: none;
  width: 100%;
}
.portrait-well {
  flex: none;
  width: 64px;
  height: 64px;
  container-type: size;
  display: grid;
  place-items: center;
}
.portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  height: auto;
  background:
    radial-gradient(circle at 50% 42%, #2a1c14 0%, #100b09 62%, #080605 100%);
  border: 2px solid #5a4326;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 4px #2a2016,
    0 0 0 5px #6b5530,
    inset 0 0 40px rgba(0, 0, 0, .55);
}
.portrait-well .portrait-frame {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
}
.sheet-sigil {
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  background: #0b0806;
  box-shadow: inset 0 0 0 2px #4a3a24, 0 0 16px rgba(0,0,0,.7);
}
.portrait-frame .sheet-sigil {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #24180e 0%, #0a0705 72%);
  box-shadow: inset 0 0 0 2px #4a3a24;
}

.sheet-id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.sheet-level {
  margin: 0 0 4px;
  width: 56px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold-lit);
  background: linear-gradient(180deg, #2c241c, #100c09);
  border: 1px solid #5a4326;
}
.stats-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 2px 0;
}
.stats-panel::before {
  content: "";
  flex: none;
  height: 10px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, transparent, #6b5530 20%, #e3c68d 50%, #6b5530 80%, transparent);
  clip-path: polygon(0 40%, 8% 0, 92% 0, 100% 40%, 92% 100%, 8% 100%);
}
.stat-list {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  align-content: start;
  gap: 0;
  margin: 0;
  flex: none;
  min-height: 0;
  overflow: auto;
}
.stat-list dt,
.stat-list dd {
  padding: 3px 8px;
  border-bottom: 1px solid rgba(90, 70, 40, .28);
  background: rgba(10, 7, 5, .45);
}
.stat-list dt {
  color: var(--dim);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stat-list dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold-lit);
  text-align: right;
  max-width: none;
  white-space: normal;
}
.sheet:not(.is-expanded) .stat-more { display: none; }
.stat-list dd.r-magic { color: #5b93e0; }
.stat-list dd.r-rare { color: #b99a3f; }
.stat-list dd.r-legendary { color: #cf5b2e; }
.stat-list dd.r-ancestral { color: #e8d5a0; }

/* inventory — 6×6 bag + paper-doll, CSS only */

.inv-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 8;
}
body.stall-open #inventory.inv-panel {
  left: calc(50% + 10px);
  right: auto;
  top: 50%;
  transform: translate(0, -50%);
  width: max-content;
  max-width: min(920px, calc(72vw - 8px));
  max-height: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.inv-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.inv-main {
  flex: 0 0 auto;
  min-width: 0;
}
.inv-body {
  display: flex;
  gap: 22px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
}
.equip-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.inv-caption {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.inv-hint {
  margin: 10px 0 8px;
  font-size: 11px;
  color: var(--dim);
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.bag-col {
  display: flex;
  flex-direction: column;
  width: calc(6 * 56px + 5 * 6px);
  flex: 0 0 auto;
}
.inv-panel > .mat-toggle {
  position: absolute;
  top: -6px;
  right: 34px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  cursor: pointer;
  z-index: 2;
}
.equip-purse {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}
.mat-toggle-mark {
  display: block;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(#9aa0a8, #9aa0a8) 0 10px / 14px 3px no-repeat,
    linear-gradient(#c47a3a, #c47a3a) 0 5px / 10px 3px no-repeat,
    linear-gradient(#e3c68d, #e3c68d) 2px 0 / 8px 3px no-repeat;
}
.mat-toggle.is-open {
  border-color: #8a7040;
  box-shadow: 0 0 8px rgba(207, 91, 46, .35);
}
.mat-drawer {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
  margin: 0;
}
.mat-divider {
  width: 1px;
  flex: 0 0 1px;
  height: auto;
  margin: 8px 10px;
  background: linear-gradient(180deg, transparent, #8a7040, transparent);
  box-shadow: 0 0 8px rgba(163, 122, 58, .35);
}
.mat-col {
  width: 188px;
  padding: 0 2px 0 0;
  display: flex;
  flex-direction: column;
}
.mat-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 4px;
  border: none;
}
.mat-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mat-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  box-shadow: inset 0 0 0 1px #1a120c;
  flex: 0 0 32px;
}
.mat-icon img,
.mat-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mat-count {
  min-width: 2.2em;
  font-family: var(--mono, var(--display));
  font-size: 13px;
  color: var(--gold-lit);
}
.mat-name {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.mat-icon-coins .coin {
  width: 16px;
  height: 16px;
}
.equip-doll {
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-areas:
    ". helm ."
    "mainhand chest offhand"
    ". hands ."
    ". legs ."
    ". boots ."
    "ring . amulet";
  gap: 6px;
}
.equip-slot[data-eq="helm"] { grid-area: helm; }
.equip-slot[data-eq="chest"] { grid-area: chest; }
.equip-slot[data-eq="hands"] { grid-area: hands; }
.equip-slot[data-eq="legs"] { grid-area: legs; }
.equip-slot[data-eq="boots"] { grid-area: boots; }
.equip-slot[data-eq="mainhand"] { grid-area: mainhand; }
.equip-slot[data-eq="offhand"] { grid-area: offhand; }
.equip-slot[data-eq="ring"] { grid-area: ring; }
.equip-slot[data-eq="amulet"] { grid-area: amulet; }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 56px);
  grid-template-rows: repeat(6, 56px);
  gap: 6px;
  width: calc(6 * 56px + 5 * 6px);
}
.bag-slot,
.equip-slot {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  box-shadow: inset 0 0 0 1px #1a120c, inset 0 8px 14px rgba(0, 0, 0, .45);
  color: var(--gold-lit);
  cursor: pointer;
  position: relative;
}
.bag-slot.is-selected { box-shadow: inset 0 0 0 2px var(--gold-lit); }
.bag-slot.is-tool-slot {
  border-color: #877044;
  background:
    linear-gradient(135deg, rgba(198, 168, 92, .13), transparent 45%),
    linear-gradient(180deg, #211b13, #0b0805);
}
.bag-slot.is-tool-slot::after {
  content: "TOOL";
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 6px;
  letter-spacing: .08em;
  color: rgba(227, 198, 141, .48);
  pointer-events: none;
}
.bag-slot.r-uncommon,
.equip-slot.r-uncommon { border-color: #8fbf72; }
.bag-slot.r-rare,
.equip-slot.r-rare { border-color: #e4c45a; }
.bag-slot.r-set,
.equip-slot.r-set { border-color: #6fbf5a; }
.item-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.item-glyph canvas,
.item-glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item-glyph img.item-art {
  object-fit: contain;
  image-rendering: auto;
}
.item-glyph.is-empty { opacity: .58; }
.item-tip {
  position: fixed;
  z-index: 40;
  width: min(320px, 86vw);
  padding: 12px 14px 14px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(28, 20, 12, .97), rgba(8, 6, 5, .98));
  border: 1px solid #6b5530;
  box-shadow:
    0 0 0 1px #120e0a,
    0 0 0 3px #2a2016,
    0 16px 28px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(227, 198, 141, .14);
}
.item-tip-name {
  margin: 0 0 2px;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--gold-lit);
}
.item-tip.r-magic .item-tip-name { color: #7eb0ff; }
.item-tip.r-rare .item-tip-name { color: #e4c45a; }
.item-tip.r-set .item-tip-name { color: #8fd86a; }
.item-tip.r-legendary .item-tip-name { color: #ff7a3a; }
.item-tip.r-ancestral {
  box-shadow: 0 0 16px rgba(245, 242, 235, .42), 0 0 0 1px #f2efe8;
}
.item-tip.r-ancestral .item-tip-name { color: #f2efe8; }
.item-tip-type {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.item-tip-line {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: #cec1aa;
  line-height: 1.45;
}
.item-tip-line.is-magic { color: #7eb0ff; }
.item-tip-line.is-unique { color: #f3e2b0; }
.item-tip-skill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid #5a4326;
  background: rgba(10, 7, 5, .55);
}
.item-tip-skill canvas,
.item-tip-skill img {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  display: block;
  background: radial-gradient(circle at 40% 30%, #2a1c14, #0a0705);
  box-shadow: inset 0 0 0 1px #4a3620;
}
.item-tip-skill b {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f3e2b0;
  font-weight: 400;
}
.item-tip-skill span {
  display: block;
  font-size: 11px;
  color: #7eb0ff;
}
.item-tip-skill span.is-magic { color: #7eb0ff; }
.item-tip-skill span.is-unique { color: #f3e2b0; }
.item-tip-skill-art {
  width: 40px;
  height: 40px;
  flex: none;
  position: relative;
  display: block;
  border: 1px solid #5a4326;
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(212, 184, 122, .14), transparent 44%),
    radial-gradient(circle at 50% 72%, #2a1c14, #0a0705);
  box-shadow: inset 0 0 0 1px #4a3620, 0 0 10px rgba(212, 184, 122, .16);
}
.item-tip-skill-art .companion-art-shell {
  position: absolute;
  inset: 0;
}
.item-tip-skill-art .companion-sprite {
  width: 130%;
  height: 130%;
  margin: -15% 0 0 -15%;
}
.item-tip-skill-art .companion-glyph {
  width: 88%;
  height: 88%;
  margin: 6%;
}
.bag-slot.r-magic,
.equip-slot.r-magic { border-color: #5b93e0; }
.bag-slot.r-legendary,
.equip-slot.r-legendary { border-color: #cf5b2e; }
.bag-slot.r-ancestral,
.equip-slot.r-ancestral { border-color: #f2efe8; }
#shop.shop-panel,
#vault.shop-panel,
#quests.shop-panel {
  width: max-content;
  min-width: calc(6 * 56px + 5 * 6px + 72px);
}
#camel.shop-panel {
  width: calc(5 * 56px + 4 * 6px + 40px);
  min-width: calc(5 * 56px + 4 * 6px + 40px);
  max-width: calc(5 * 56px + 4 * 6px + 40px);
}
.shop-tabs {
  display: flex;
  gap: 6px;
  justify-content: stretch;
  width: calc(6 * 56px + 5 * 6px);
  margin: 0 auto 12px;
}
.shop-tabs button {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  background: #1a120c;
  border: 1px solid #5a4326;
  padding: 7px 4px;
  cursor: pointer;
}
.shop-tabs button.is-active {
  color: var(--gold-lit);
  border-color: #8a7040;
}
.shop-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: calc(6 * 56px + 5 * 6px);
  margin: 0 auto;
}
.shop-grid,
.vault-grid {
  width: calc(6 * 56px + 5 * 6px);
  margin: 8px auto 0;
}
.shop-grid {
  grid-template-rows: repeat(3, 56px);
}
.shop-side-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.shop-slot.is-mystery { border-color: #9b6cff; }
.shop-slot:hover { box-shadow: inset 0 0 0 1px #8a7040; }
.shop-gold {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 9px;
  line-height: 1;
  color: #e3c68d;
  pointer-events: none;
}
.shop-name {
  position: absolute;
  left: 3px;
  top: 2px;
  right: 3px;
  font-size: 8px;
  line-height: 1.15;
  color: #f0dcae;
  pointer-events: none;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#shop-buy {
  width: calc(6 * 56px + 5 * 6px);
  height: 56px;
  min-height: 56px;
  margin: 0;
}
#shop-buy.is-poor { color: #8b7d68; }

.tree-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 96vw);
  max-height: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 8;
}
.forge-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  max-height: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 8;
}
.warden-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1320px, 98vw);
  max-height: 88vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 8;
}
.warden-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}
#warden-dome-hint {
  margin-top: 14px;
}
.warden-card {
  flex: 1 1 220px;
  max-width: 248px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, rgba(22, 16, 12, .92), rgba(8, 6, 5, .96));
}
.warden-card.is-fallen {
  border-color: #8a7040;
  box-shadow: inset 0 0 0 1px #6b5530, 0 0 12px rgba(163, 122, 58, .22);
}
.warden-card.is-low .warden-level { color: #c2612c; }
.warden-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #5a4326;
  background: radial-gradient(circle at 38% 28%, #2a1c12, #0a0705);
  box-shadow: inset 0 0 0 1px #1a120c;
}
.warden-mark canvas {
  width: 96px;
  height: 96px;
  display: block;
}
.warden-name {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}
.warden-where,
.warden-blurb,
.warden-trick,
.warden-level,
.warden-status {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #e8dcc4;
  text-align: center;
}
.warden-blurb {
  color: #c8b8a0;
  line-height: 1.4;
}
.warden-trick {
  color: #e3c68d;
  font-size: 11px;
}
.warden-level { color: var(--gold); }
.warden-status { letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.warden-card.is-fallen .warden-status { color: #8fbf72; }
.warden-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
}
.warden-drop {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #1c1612, #0a0705);
  position: relative;
  cursor: pointer;
}
.warden-drop .item-glyph,
.warden-drop .item-glyph img,
.warden-drop .item-glyph canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.warden-drop.is-gold {
  display: grid;
  place-items: center;
  gap: 1px;
}
.warden-drop.is-gold .coin { width: 12px; height: 12px; }
.warden-drop.is-gold em,
.warden-drop.is-legend em {
  font-style: normal;
  font-size: 9px;
  color: var(--gold-lit);
}
.warden-drop.is-legend {
  display: grid;
  place-items: center;
  border-color: #cf5b2e;
  color: #ff7a3a;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.warden-gate {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #5a4326;
  background: rgba(10, 7, 5, .45);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: #e8dcc4;
}
.warden-gate.is-ready {
  border-color: #8a7040;
  color: #fff4e2;
  box-shadow: inset 0 0 0 1px #6b5530, 0 0 14px rgba(155, 108, 255, .22);
}
#warden-keep-hint {
  margin-top: 12px;
}
.keep-fate-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
}
.admin-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  max-height: 82vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 9;
}
.admin-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-section-title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-warp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 44px;
}
.city-gate-panel {
  width: min(520px, 92vw);
}
.city-gate-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(52vh, 420px);
  overflow: auto;
}
.city-gate-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.city-gate-dest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 52px;
}
.city-gate-dest.is-here {
  opacity: 0.72;
}
.city-gate-dest.is-locked {
  opacity: 0.55;
  cursor: default;
}
.city-gate-dest small {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--dim);
}
.admin-warp small {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--dim);
}
.admin-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #3a2d1e;
}
.admin-grant {
  width: 100%;
  text-align: center;
}
.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gold-lit);
  cursor: pointer;
  user-select: none;
}
.admin-check input {
  width: 16px;
  height: 16px;
  accent-color: #c42818;
}
.dungeon-ask-panel {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(420px, 88vw);
  z-index: 12;
  padding: 22px 24px 20px;
}
.dungeon-ask-panel .dialog-title {
  margin-bottom: 8px;
}
.dungeon-ask-panel .forge-hint {
  margin: 0 0 14px;
}
.atlas-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, calc(96vh + 40px));
  height: min(96vh, calc(96vw + 88px));
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 8;
}
.atlas-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}
.atlas-tool {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  border: 1px solid #5a4326;
  background: linear-gradient(180deg, #2c241c, #100c09);
  box-shadow: inset 0 1px 0 rgba(227, 198, 141, .12);
  min-width: 42px;
  min-height: 32px;
  padding: 4px 12px;
  cursor: pointer;
}
.atlas-tool:hover { filter: brightness(1.18); }
.atlas-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
#atlas-map {
  display: block;
  width: 100%;
  height: 100%;
  background: #0a0806;
  border: 1px solid #5a4326;
  box-shadow: inset 0 0 0 2px #1a120c;
  cursor: grab;
  touch-action: none;
}
#atlas-map.is-dragging { cursor: grabbing; }
body.stall-click-guard #forge,
body.stall-click-guard #shop,
body.stall-click-guard #vault,
body.stall-click-guard #quests,
body.stall-click-guard #warden,
body.stall-click-guard #camel,
body.stall-click-guard #pets,
body.stall-click-guard #stable,
body.stall-click-guard #inventory,
body.stall-click-guard #city-gate,
body.stall-click-guard #keep-fate,
body.stall-click-guard #admin {
  pointer-events: none !important;
}
body.stall-open #forge.forge-panel,
body.stall-open #shop.shop-panel,
body.stall-open #shop.forge-panel,
body.stall-open #vault.forge-panel,
body.stall-open #quests.forge-panel {
  left: calc(50% - 10px);
  right: auto;
  top: 50%;
  transform: translate(-100%, -50%);
  width: max-content;
  max-width: min(780px, calc(66vw - 8px));
  overflow-x: hidden;
  overflow-y: auto;
}
body.stall-open #camel.forge-panel {
  left: calc(50% - 10px);
  right: auto;
  top: 50%;
  transform: translate(-100%, -50%);
  width: calc(5 * 56px + 4 * 6px + 40px);
  max-width: min(380px, calc(66vw - 8px));
  overflow-x: hidden;
  overflow-y: auto;
}
.forge-salvage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.forge-salvage-icon {
  width: 16px;
  height: 16px;
  background:
    linear-gradient(135deg, transparent 42%, #8b7d68 42%, #8b7d68 58%, transparent 58%),
    radial-gradient(circle at 70% 30%, #c89bff 0 28%, transparent 30%);
  border: 1px solid #6b5530;
  box-shadow: inset 0 0 0 2px #1a120c;
}
.item-qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 11px;
  color: var(--gold-lit);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.forge-hearth {
  position: relative;
  height: 118px;
  margin: 0 0 14px;
  background: linear-gradient(180deg, #1a120c 0%, #0a0705 70%);
  border: 1px solid #5a4326;
  overflow: hidden;
}
.forge-chimney {
  position: absolute;
  left: 18%;
  top: 0;
  width: 22px;
  height: 28px;
  background: linear-gradient(180deg, #2b2018, #1a120c);
  border: 1px solid #5a4326;
  border-top: 0;
}
.forge-hood {
  position: absolute;
  left: 12%;
  top: 26px;
  width: 38%;
  height: 36px;
  background: linear-gradient(180deg, #3a2d1e, #1a120c);
  border: 1px solid #6b5530;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.forge-fire {
  position: absolute;
  left: 18%;
  top: 58px;
  width: 26%;
  height: 28px;
  background: radial-gradient(ellipse at 50% 80%, #ffb14a 0%, #cf5b2e 42%, #5a180c 78%, transparent 100%);
  filter: blur(0.4px);
  animation: forge-glow 1.6s ease-in-out infinite alternate;
}
.forge-anvil {
  position: absolute;
  right: 16%;
  top: 42px;
  width: 88px;
  height: 38px;
  background: linear-gradient(180deg, #8b7d68, #2b2018);
  border: 1px solid #6b5530;
  clip-path: polygon(0 28%, 18% 28%, 18% 0, 82% 0, 88% 28%, 100% 28%, 92% 58%, 78% 58%, 78% 100%, 22% 100%, 22% 58%, 8% 58%);
}
.forge-hearth.is-hot .forge-anvil,
.forge-anvil.is-hot {
  border-color: #e3c68d;
  box-shadow: 0 0 16px rgba(227, 198, 141, .55);
}
.forge-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}
.forge-tools input[type="search"],
.forge-tools select {
  flex: 1 1 140px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #5a4326;
  background: rgba(8, 6, 5, .7);
  color: var(--gold-lit);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.forge-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.forge-page-label {
  margin: 0;
  min-width: 48px;
  text-align: center;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold);
}
.forge-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: linear-gradient(180deg, #2b2018, #100c09);
  border-top: 1px solid #5a4326;
}
@keyframes forge-glow {
  from { opacity: .72; }
  to { opacity: 1; }
}
.forge-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.forge-tabs button {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  background: #1a120c;
  border: 1px solid #5a4326;
  padding: 7px 12px;
  cursor: pointer;
}
.forge-tabs button.is-active {
  color: var(--gold-lit);
  border-color: #8a7040;
}
.forge-row.is-ready {
  box-shadow: inset 0 0 0 1px #8a7040, 0 0 12px rgba(207, 91, 46, .25);
}
.forge-row.is-weapon.is-ready {
  box-shadow: inset 0 0 0 1px #e3c68d, 0 0 18px rgba(227, 198, 141, .45);
}
.bag-slot.r-set.is-filled,
.equip-slot.r-set.is-filled {
  box-shadow: inset 0 0 0 1px #6fbf5a, 0 0 10px rgba(111, 191, 90, .32);
}
.bag-slot.r-legendary.is-filled,
.equip-slot.r-legendary.is-filled {
  box-shadow: inset 0 0 0 1px #cf5b2e, 0 0 12px rgba(207, 91, 46, .42);
}
.bag-slot.r-ancestral.is-filled,
.equip-slot.r-ancestral.is-filled,
.forge-row.r-ancestral {
  box-shadow:
    inset 0 0 0 1px #f2efe8,
    0 0 10px rgba(245, 242, 235, .72),
    0 0 22px rgba(232, 228, 220, .38);
}
#inv-drop {
  width: calc(6 * 56px + 5 * 6px);
  height: 56px;
  min-height: 56px;
  margin-top: auto;
  box-sizing: border-box;
}
.forge-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.forge-actions { margin: 0 0 12px; }
.forge-list { display: flex; flex-direction: column; gap: 8px; }
.forge-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #5a4326;
  background: rgba(10, 7, 5, .45);
}
.forge-row img,
.forge-row canvas {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}
.forge-row b {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gold-lit);
  font-weight: 400;
}
.forge-row span { display: block; font-size: 11px; color: var(--dim); }
.forge-parts { letter-spacing: .12em; color: #9b6cff; }
.forge-row.is-known { border-color: #8a7040; }
.forge-row button {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lit);
  background: #1a120c;
  border: 1px solid #5a4326;
  padding: 8px 10px;
  cursor: pointer;
}
.forge-row button:disabled { opacity: .4; cursor: default; }
.tree-points {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.tree-tabs {
  width: 100%;
  margin: 0 0 10px;
}
.tree-tabs button.is-hidden { display: none; }
.quad-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tree-block {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.tree-block .tree-skill { width: 100%; }
.tree-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
  border-top: 1px solid rgba(80, 58, 28, 0.35);
}
.tree-line:first-child { border-top: none; padding-top: 0; }
.tree-line-name {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-lit);
}
.tree-skill-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tree-passive-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 0 36px;
  padding: 3px 8px;
  border: 1px solid rgba(80, 58, 28, 0.45);
  background: rgba(20, 14, 8, 0.7);
  color: var(--gold-lit);
  font-size: 11px;
  cursor: pointer;
}
.tree-passive-btn:hover { border-color: var(--gold-lit); }
.tree-passive-btn:disabled { opacity: 0.45; cursor: default; }
.tree-passive-btn.is-known { border-color: rgba(180, 140, 60, 0.7); }
.stat-plus {
  margin-left: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--gold-dim);
  background: rgba(40, 28, 12, 0.8);
  color: var(--gold-lit);
  cursor: pointer;
}
.stat-plus:hover { border-color: var(--gold-lit); }
.tree-block-grade { display: flex; flex-direction: column; gap: 6px; }
.tree-ancestral-copy {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gold-lit);
}
.world-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, 0);
  z-index: 12;
  min-width: min(520px, 86vw);
  padding: 16px 28px;
  text-align: center;
  pointer-events: none;
  border: 1px solid #e8d5a0;
  background: linear-gradient(180deg, rgba(40, 28, 10, .92), rgba(8, 6, 5, .94));
  box-shadow: 0 0 28px rgba(232, 213, 160, .35);
}
.world-banner p {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2efe8;
  text-shadow: 0 0 12px rgba(227, 198, 141, .65);
}
.world-banner.t-ancestral { border-color: #f2efe8; }
.tree-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
}
.tree-page-label {
  margin: 0;
  min-width: 11em;
  text-align: center;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.quad-grid {
  display: block;
}
.quad-card {
  display: none;
  border: 1px solid #5a4326;
  background: rgba(8, 6, 5, .55);
  padding: 10px;
}
.quad-card.is-active { display: block; }
.quad-card.is-hidden { display: none !important; }
.tree-line.is-locked { opacity: .55; }
.quad-card.is-locked { opacity: .55; }
.quad-card.is-locked .quad-lock {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9b6cff;
}
.quad-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.quad-skills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.tree-skill {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 8px;
  border: 1px solid #3a2d1e;
  background: #100c09;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.tree-skill-art {
  width: 56px;
  height: 56px;
  flex: none;
  align-self: center;
}
.tree-skill-art img,
.tree-skill-art canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.tree-skill-art img.skill-art {
  object-fit: contain;
  image-rendering: pixelated;
}
.tree-skill-copy { flex: 1; min-width: 0; }
.tree-skill-copy b,
.tree-skill-copy small { display: block; }
.tree-skill-copy .tree-desc {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: #c4b49a;
}
.tree-skill-copy .tree-effect {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: #8a7a62;
}
.tree-skill-copy .tree-passive {
  margin-top: 2px;
  font-size: 10px;
  color: #7eb0ff;
}
.tree-skill-copy .tree-grant {
  margin-top: 2px;
  font-size: 10px;
  color: #e8d5a0;
}
.tree-skill-copy .tree-cost { margin-top: 3px; }
.tree-skill.is-known { border-color: #6b5530; }
.tree-skill.is-granted { border-color: #e8d5a0; }
.tree-skill.is-max { border-color: #8fbf72; }
.tree-skill:disabled { opacity: .4; cursor: default; }
.tree-skill b { font-family: var(--display); font-size: 12px; color: var(--gold-lit); }
.tree-skill small { color: var(--dim); }
.tree-skill .rank { flex: none; }

.bar-picker {
  position: absolute;
  z-index: 10;
  width: min(320px, 90vw);
  max-height: 50vh;
  overflow: auto;
  padding: 10px;
  background: linear-gradient(180deg, rgba(24, 18, 13, .98), rgba(8, 6, 5, .98));
  border: 1px solid #5a4326;
  box-shadow: 0 12px 28px rgba(0,0,0,.6);
}
.bar-picker button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
  padding: 7px 8px;
  border: 1px solid #3a2d1e;
  background: #100c09;
  color: var(--gold-lit);
  font-family: var(--display);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.bar-picker img,
.bar-picker canvas.skill-glyph {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: cover;
}

/* overlays */

.overlay {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,3,2,.74);
  backdrop-filter: blur(3px);
}
#death-overlay.overlay {
  background:
    radial-gradient(ellipse 72% 58% at 50% 46%, rgba(86, 14, 12, .22) 0%, rgba(16, 3, 3, .52) 46%, rgba(4, 1, 1, .9) 100%);
  backdrop-filter: blur(1px);
}
.pause-stack,
.death-panel { text-align: center; }
.death-panel {
  width: min(480px, 92vw);
  background: linear-gradient(180deg, rgba(32, 10, 8, .96), rgba(7, 3, 2, .98));
  box-shadow:
    0 0 0 1px #2a0c0a,
    0 0 0 3px #5a2418,
    0 0 0 4px #8a5a30,
    0 0 46px rgba(110, 12, 10, .45),
    0 22px 60px rgba(0,0,0,.8);
}
.death-latin {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #8a4034;
}
.death-mark {
  display: grid;
  place-items: center;
  height: 132px;
  margin: 2px 0 8px;
  filter: drop-shadow(0 0 18px rgba(150, 18, 12, .55));
}
.death-skull {
  width: 96px;
  height: 132px;
  background: transparent;
}
.death-panel .death-kicker {
  min-height: 70px;
  font-size: 28px;
  letter-spacing: .18em;
  color: #f6d2c4;
  text-shadow: 0 0 22px rgba(160, 24, 18, .75);
  background: linear-gradient(180deg, #4a1812, #140606);
  border-color: #8a3024;
}
#btn-rise { margin-top: 12px; }
.pause-stack { width: min(560px, 94vw); }
.ui-scale { zoom: var(--ui-scale, 1); }
.settings-panel {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #5a4326;
  background: rgba(8, 6, 5, .55);
  text-align: left;
}
.settings-row {
  display: grid;
  grid-template-columns: 88px 1fr 52px;
  gap: 10px;
  align-items: center;
  color: var(--gold);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.settings-row + .settings-row { margin-top: 10px; }
.settings-row input[type="range"] {
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #2b2018, #8a7040);
  border: 1px solid #5a4326;
}
.settings-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--gold-lit);
  border: 1px solid #5a4326;
  cursor: pointer;
}
.settings-mute {
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #5a4326;
  background: #1a120c;
  color: var(--gold-lit);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.settings-mute.is-muted {
  border-color: #8a7040;
  color: #e8d5a0;
  box-shadow: inset 0 0 0 1px #6b5530;
}
#ui-scale-val,
#music-level-val,
#effects-level-val {
  font-size: 11px;
  color: var(--gold-lit);
  text-align: right;
}
.death-kicker { color: #f0c4b4; }
.death-body { align-items: center; }
#death-sub {
  margin: 8px 0 0;
  color: var(--dim);
  letter-spacing: .12em;
  font-family: var(--display);
  font-size: 13px;
  text-transform: uppercase;
}

/* ───────────────── pixel overlays, dialogs, inventory ─────────────────── */

#screen-game.screen-pixel-ui .dialog {
  padding: 16px 14px;
  background: var(--panel-px);
  border: 2px solid var(--gold-px);
  box-shadow: 0 0 0 2px #120e0a, 0 0 0 4px #8a6a32, 0 18px 50px rgba(0,0,0,.75);
}
#screen-game.screen-pixel-ui .dialog-title {
  min-height: 28px;
  padding: 0 16px;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .12em;
  background: #16120c;
  border: 2px solid var(--gold-px);
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 50%, 97.5% 100%, 2.5% 100%, 0 50%);
}
#screen-game.screen-pixel-ui .dialog-choice {
  min-height: 32px;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .06em;
  border: 2px solid #5a4630;
  background: #120e0a;
  color: var(--gold-lit-px);
}
#screen-game.screen-pixel-ui .dialog-choice:hover,
#screen-game.screen-pixel-ui .dialog-choice.is-selected {
  border-color: #3a1814;
  background: var(--play-px);
  color: var(--gold-lit-px);
  filter: none;
}
#screen-game.screen-pixel-ui .dialog-keys {
  padding: 16px 14px;
  border: 2px solid #5a4630;
  background: #120e0a;
}
#screen-game.screen-pixel-ui .dialog-keys li { font-size: 8px; }
#screen-game.screen-pixel-ui .dialog-keys b {
  font-size: 8px;
  letter-spacing: 0;
}

#screen-game.screen-pixel-ui .inv-caption,
#screen-game.screen-pixel-ui .forge-hint,
#screen-game.screen-pixel-ui .inv-hint {
  font-size: 8px;
  letter-spacing: .06em;
}
#screen-game.screen-pixel-ui .bag-slot,
#screen-game.screen-pixel-ui .eq-slot,
#screen-game.screen-pixel-ui .shop-slot,
#screen-game.screen-pixel-ui .vault-grid .bag-slot,
#screen-game.screen-pixel-ui .quest-prize,
#screen-game.screen-pixel-ui .forge-row .slot {
  border: 2px solid #5a4630;
  border-radius: 0;
  background: #120e0a;
  box-shadow: inset 0 0 0 1px #1a120c;
}
#screen-game.screen-pixel-ui .bag-slot.is-selected {
  box-shadow: inset 0 0 0 2px var(--gold-lit-px);
}
#screen-game.screen-pixel-ui .item-tip {
  border: 2px solid var(--gold-px);
  background: #100d0a;
  box-shadow: 0 0 0 2px #120e0a, 0 0 0 4px #8a6a32;
  font-family: var(--pixel);
}
#screen-game.screen-pixel-ui .item-tip-name { font-size: 8px; }
#screen-game.screen-pixel-ui .item-tip-type,
#screen-game.screen-pixel-ui .item-tip-line { font-size: 8px; }

#screen-game.screen-pixel-ui .death-panel {
  border: 2px solid #8a3a30;
  box-shadow: 0 0 0 2px #2a0c0a, 0 0 0 4px #6b5530, 0 0 46px rgba(110, 12, 10, .45);
}
#screen-game.screen-pixel-ui .death-latin,
#screen-game.screen-pixel-ui #death-sub {
  font-size: 8px;
  letter-spacing: .1em;
}
#screen-game.screen-pixel-ui .death-kicker {
  font-size: 8px;
  letter-spacing: .08em;
}
#screen-game.screen-pixel-ui .settings-row > span,
#screen-game.screen-pixel-ui .settings-mute,
#screen-game.screen-pixel-ui #ui-scale-val,
#screen-game.screen-pixel-ui #music-level-val,
#screen-game.screen-pixel-ui #effects-level-val {
  font-size: 8px;
  letter-spacing: 0;
}
#screen-game.screen-pixel-ui .tree-page-label,
#screen-game.screen-pixel-ui .quad-card h3,
#screen-game.screen-pixel-ui .tree-skill-copy b {
  font-size: 8px;
  letter-spacing: .06em;
}
#screen-game.screen-pixel-ui .tree-skill {
  border: 2px solid #5a4630;
  background: #120e0a;
}
#screen-game.screen-pixel-ui .tree-skill-art img,
#screen-game.screen-pixel-ui .tree-skill-art canvas {
  image-rendering: pixelated;
}
#screen-game.screen-pixel-ui .world-banner p {
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: .06em;
}

.hidden { display: none !important; }

@media (max-height: 780px) {
  :root { --globe-size: 96px; }
  .panel { --panel-border: 30px; }
  .dialog { border-width: 28px 24px; }
  .kicker { height: 38px; font-size: 11px; }
  .masthead { margin-bottom: 8px; }
  .screen-wide { padding-top: 8px; }
}
@media (max-width: 1100px) {
  #screen-select.screen-select-v2 .select-layout {
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 380px);
  }
  #screen-select.screen-select-v2 .select-hero {
    grid-column: 1 / -1;
    min-height: 220px;
  }
  #screen-select.screen-select-v2 .halo { margin-top: 48px; }
}
@media (max-width: 980px) {
  .select-layout,
  .create-layout { grid-template-columns: 1fr; width: min(520px, 100%); }
  #screen-select.screen-select-v2 .select-layout {
    grid-template-columns: 1fr;
    width: min(560px, 100%);
    gap: 16px;
  }
  #screen-select.screen-select-v2 .select-hero {
    display: flex !important;
    min-height: 200px;
  }
  #screen-select.screen-select-v2 .halo { margin-top: 32px; }
  #screen-select.screen-select-v2 .panel { margin-top: 0; min-height: 0; }
  .select-hero { display: none; }
  #screen-create .class-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-chip { display: none; }
}
@media (max-width: 760px) {
  :root { --globe-size: 88px; }
  #screen-select.screen-select-v2 .kicker {
    width: min(260px, 88vw);
    height: 34px;
    font-size: 12px;
  }
  #screen-select.screen-select-v2 .game-title {
    font-size: clamp(22px, 7vw, 30px);
  }

  /* ── character select (mobile) ── */
  #screen-select.screen-select-v2.screen-hall {
    justify-content: flex-start;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #screen-select.screen-select-v2 .masthead { margin-bottom: 6px; }
  #screen-select.screen-select-v2 .select-layout {
    width: 100%;
    gap: 10px;
    padding-bottom: 0;
  }
  #screen-select.screen-select-v2 .select-hero { display: none !important; }
  #screen-select.screen-select-v2 .char-row {
    min-height: 52px;
    padding: 10px 12px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #screen-select.screen-select-v2 .char-sigil {
    width: 44px;
    height: 48px;
    flex-shrink: 0;
  }
  #screen-select.screen-select-v2 .char-name { font-size: 15px; }
  #screen-select.screen-select-v2 .select-detail-panel .stats-pad {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }
  #screen-select.screen-select-v2 .detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
  }
  #screen-select.screen-select-v2 .select-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: auto;
    padding: 10px 0 calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10, 8, 6, 0) 0%, rgba(10, 8, 6, .92) 18%, #0a0806 100%);
    border-top: 1px solid rgba(90, 67, 38, .45);
  }
  #screen-select.screen-select-v2 .select-actions .btn {
    min-height: 48px;
    font-size: 14px;
    touch-action: manipulation;
  }
  #screen-select.screen-select-v2 .select-footer .key-hints-desktop { display: none; }
  #screen-select.screen-select-v2 .select-footer .key-hints-mobile {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--dim);
    text-align: center;
    padding: 0 8px 4px;
  }

  /* ── character creation (mobile) ── */
  #screen-create.screen-hall {
    justify-content: flex-start;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #screen-create .masthead { margin-bottom: 6px; }
  #screen-create .game-title { font-size: clamp(18px, 6vw, 26px); }
  #screen-create .kicker {
    min-width: 0;
    width: min(280px, 92vw);
    height: 32px;
    font-size: 10px;
    letter-spacing: .18em;
  }
  #screen-create .create-layout {
    width: 100%;
    gap: 10px;
    padding-bottom: 0;
    flex: 1 1 auto;
    min-height: 0;
  }
  #screen-create .class-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    order: 0;
  }
  #screen-create .class-card {
    padding: 8px 4px 10px;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #screen-create .class-card .dais {
    width: 100%;
    max-width: 92px;
    margin: 0 auto;
  }
  #screen-create .class-card canvas {
    width: 100%;
    height: auto;
    display: block;
  }
  #screen-create .class-card h3 {
    font-size: 10px;
    letter-spacing: .08em;
    text-align: center;
    line-height: 1.2;
  }
  #screen-create .class-card .class-role {
    font-size: 8px;
    letter-spacing: .1em;
    text-align: center;
  }
  #screen-create .create-detail-panel {
    --panel-border: 22px;
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
  }
  #screen-create .create-meta-details > summary.create-meta-toggle {
    display: list-item;
    cursor: pointer;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin: 0 0 8px;
    padding: 8px 4px;
    touch-action: manipulation;
  }
  #screen-create .create-meta-details[open] .create-meta-toggle {
    color: var(--gold-lit);
  }
  #screen-create .create-meta {
    max-height: min(34vh, 240px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }
  #screen-create .class-blurb { font-size: 12px; margin-bottom: 8px; }
  #screen-create .create-skills { font-size: 11px; margin-bottom: 8px; }
  #screen-create .detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
  }
  #screen-create .create-form-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: auto;
    padding: 10px 0 calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10, 8, 6, 0) 0%, rgba(10, 8, 6, .92) 18%, #0a0806 100%);
    border-top: 1px solid rgba(90, 67, 38, .45);
  }
  #screen-create .field input {
    font-size: 16px;
    min-height: 48px;
    padding: 12px 14px;
  }
  #screen-create .create-actions .btn {
    min-height: 48px;
    font-size: 14px;
    touch-action: manipulation;
  }
  #screen-create .create-key-hints .key-hints-desktop { display: none; }
  #screen-create .create-key-hints .key-hints-mobile {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--dim);
    text-align: center;
    padding: 0 8px 4px;
  }
  #screen-create .key-hints { display: none; }

  .minimap-cluster { width: 120px; }
  .dialog { width: min(460px, 96vw); padding: 16px 14px; }
  .inv-panel { max-width: calc(100vw - 12px); }
}

/* ───────────────────── mobile game HUD (light + compact) ───────────────── */

.hud-mobile-bars,
.hud-mobile-menu-btn,
.hud-mobile-drawer,
.hud-mobile-scrim { display: none; }

#screen-game.is-mobile-view {
  --mob-plate: rgba(42, 36, 30, 0.82);
  --mob-edge: rgba(168, 148, 112, 0.55);
  --mob-text: #f4ead8;
}

#screen-game.is-mobile-view .hud-mobile-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  left: 52px;
  top: 10px;
  width: min(220px, calc(100vw - 148px));
  z-index: 8;
  pointer-events: none;
}

#screen-game.is-mobile-view .mob-bar {
  position: relative;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(24, 20, 16, 0.55);
  border: 1px solid var(--mob-edge);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
#screen-game.is-mobile-view .mob-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  transition: width 0.18s ease-out;
}
#screen-game.is-mobile-view .mob-bar-hp .mob-bar-fill {
  background: linear-gradient(180deg, #ff8a72, #c43028);
}
#screen-game.is-mobile-view .mob-bar-mp .mob-bar-fill {
  background: linear-gradient(180deg, #8ec8ff, #2860b8);
}
#screen-game.is-mobile-view .mob-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--mob-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
}

#screen-game.is-mobile-view .hud-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 9;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mob-edge);
  border-radius: 6px;
  background: var(--mob-plate);
  color: var(--mob-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
#screen-game.is-mobile-view .hud-mobile-menu-btn[aria-expanded="true"] {
  border-color: #b44dff;
  box-shadow: 0 0 0 2px rgba(180, 77, 255, 0.35);
}

#screen-game.is-mobile-view .hud-mobile-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 18;
  background: rgba(8, 6, 5, 0.45);
}
#screen-game.is-mobile-view .hud-mobile-scrim.hidden { display: none; }

#screen-game.is-mobile-view .hud-mobile-drawer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 19;
  width: min(220px, 72vw);
  padding: 52px 12px 16px;
  background: linear-gradient(180deg, rgba(54, 46, 38, 0.96), rgba(34, 28, 22, 0.98));
  border-right: 1px solid var(--mob-edge);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
}
#screen-game.is-mobile-view .hud-mobile-drawer.hidden { display: none; }
#screen-game.is-mobile-view .mob-menu-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8d5a0;
}
#screen-game.is-mobile-view .mob-menu-item {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--mob-edge);
  border-radius: 4px;
  background: rgba(28, 24, 20, 0.65);
  font-family: var(--body);
  font-size: 14px;
  color: var(--mob-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
#screen-game.is-mobile-view .mob-menu-item:active {
  background: rgba(180, 77, 255, 0.22);
  border-color: #b44dff;
}

#screen-game.is-mobile-view .globe-cluster .globe { display: none !important; }
#screen-game.is-mobile-view .globe-cluster {
  gap: 2px;
  padding-bottom: 4px;
}
#screen-game.is-mobile-view .hud-dock {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  padding: 0 6px 6px;
  justify-content: center;
  filter: none;
}
#screen-game.is-mobile-view .hud-mid {
  flex: 1;
  min-width: 0;
  max-width: min(100%, 480px);
}
#screen-game.is-mobile-view .skillbar {
  width: 100%;
  min-height: 58px;
  padding: 6px 6px 5px;
  background: var(--mob-plate);
  border: 1px solid var(--mob-edge);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
#screen-game.is-mobile-view .slot {
  width: min(40px, 10.5vw);
  background: rgba(20, 16, 12, 0.72);
  border: 1px solid var(--mob-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#screen-game.is-mobile-view .skill-slot:has(.skill-art) {
  background: transparent;
  border: none;
  box-shadow: none;
}
#screen-game.is-mobile-view .flask-well {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid var(--mob-edge);
  background: var(--mob-plate);
  box-shadow: none;
}
#screen-game.is-mobile-view .flask-well:has(.skill-art),
#screen-game.is-mobile-view .flask-well:has(.item-art),
#screen-game.is-mobile-view .flask-well.has-flask-art,
#screen-game.is-mobile-view .mount-well:has(.item-art),
#screen-game.is-mobile-view .mount-well.has-flask-art {
  border: none;
  background: transparent;
  box-shadow: none;
}
#screen-game.is-mobile-view .flask-well:has(.skill-art) .flask-icon,
#screen-game.is-mobile-view .flask-well:has(.item-art) .flask-icon,
#screen-game.is-mobile-view .flask-well.has-flask-art .flask-icon,
#screen-game.is-mobile-view .mount-well:has(.item-art) .flask-icon,
#screen-game.is-mobile-view .mount-well.has-flask-art .flask-icon {
  inset: 0;
}
#screen-game.is-mobile-view .flask-icon {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 9px;
  width: auto;
  height: auto;
}
#screen-game.is-mobile-view .flask-orb {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 9px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 4px;
}
#screen-game.is-mobile-view .flask-key { font-size: 8px; }
#screen-game.is-mobile-view .xp-track {
  height: 18px;
  background: rgba(24, 20, 16, 0.72);
  border: 1px solid var(--mob-edge);
  box-shadow: none;
}
#screen-game.is-mobile-view .xp-text {
  font-size: 9px;
  color: var(--mob-text);
}
#screen-game.is-mobile-view .cast-bar {
  border-color: rgba(180, 77, 255, 0.65);
  background: rgba(24, 20, 16, 0.82);
}

#screen-game.is-mobile-view .hud-identity {
  top: 38px;
  left: 52px;
  font-size: 10px;
}
#screen-game.is-mobile-view .hud-identity .char-line {
  font-size: 10px;
  color: var(--mob-text);
}
#screen-game.is-mobile-view .gold-line {
  font-size: 10px;
  margin-top: 2px;
}
#screen-game.is-mobile-view .net-status {
  top: auto;
  bottom: calc(58px + 28px);
  font-size: 9px;
  background: var(--mob-plate);
  border-color: var(--mob-edge);
}
#screen-game.is-mobile-view .minimap-cluster {
  width: 104px;
  top: 8px;
  right: 8px;
}
#screen-game.is-mobile-view .minimap-frame {
  border-width: 1px;
  background: rgba(24, 20, 16, 0.72);
  box-shadow: none;
}
#screen-game.is-mobile-view .place-card {
  padding: 5px 6px;
  background: var(--mob-plate);
  border-color: var(--mob-edge);
}
#screen-game.is-mobile-view .place-name,
#screen-game.is-mobile-view .place-obj,
#screen-game.is-mobile-view .sky-clock {
  font-size: 9px;
  color: var(--mob-text);
}
#screen-game.is-mobile-view .log {
  left: 8px;
  bottom: calc(58px + 34px);
  width: min(240px, 58vw);
  max-height: 18vh;
}
#screen-game.is-mobile-view .log li {
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
#screen-game.is-mobile-view .chat-form {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(58px + 40px);
  width: min(300px, 92vw);
  z-index: 12;
}
#screen-game.is-mobile-view .chat-form input {
  background: var(--mob-plate);
  border-color: var(--mob-edge);
  color: var(--mob-text);
  font-size: 14px;
}
.camel-tack-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin: 0 0 6px;
}
.camel-stash {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  margin: 4px auto 10px;
}
.camel-stash-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.camel-buffs.inv-grid {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
  width: max-content;
  margin: 0;
}
.camel-grid.inv-grid {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  grid-template-rows: none;
  grid-auto-rows: 48px;
  gap: 6px;
  width: max-content;
  max-height: calc(4 * 48px + 3 * 6px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
}
.camel-buffs .bag-slot,
.camel-grid .bag-slot {
  width: 48px;
  height: 48px;
}
.camel-market.inv-grid,
#camel-market.shop-grid {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 6px;
  width: calc(5 * 56px + 4 * 6px);
  margin: 0 auto 8px;
}
.camel-beast-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: calc(5 * 56px + 4 * 6px);
  margin: 0 auto 8px;
}
.camel-beast-actions .dialog-choice { min-height: 40px; }
.camel-actions {
  display: flex;
  gap: 8px;
  width: calc(5 * 56px + 4 * 6px);
  margin: 0 auto;
}
#camel-buy,
#camel-sell { flex: 1; }

.stable-panel { width: min(300px, 88vw); }
.stable-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.stable-row,
.stable-act-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #3a2d1e;
  background: linear-gradient(180deg, #14100c, #0a0806);
  color: var(--gold-lit);
  text-align: left;
  cursor: pointer;
}
.stable-row:hover { filter: brightness(1.12); }
.stable-row.is-active { box-shadow: inset 0 0 0 1px #8fd46a; }
.stable-act-head { cursor: default; margin-bottom: 4px; }
.stable-row-icon,
.stable-act-head .stable-row-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5a4326;
  background: #0a0806;
  overflow: hidden;
}
.stable-row-icon img,
.stable-row-icon canvas,
.stable-act-head .stable-row-icon img,
.stable-act-head .stable-row-icon canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.stable-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stable-row-name {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gold-lit);
}
.stable-row-kind {
  font-size: 11px;
  color: #9a8a72;
}
.stable-back {
  align-self: flex-start;
  margin: 0 0 4px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: #c8b48a;
  font-size: 12px;
  cursor: pointer;
}
.stable-back:hover { color: var(--gold-lit); }
.stable-act-primary,
.stable-act-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.stable-act-primary { margin-bottom: 8px; }
.stable-act-primary .dialog-choice,
.stable-act-secondary .dialog-choice {
  min-height: 38px;
  margin: 0;
}
.stable-tack {
  margin: 0 0 8px;
}
.hud-figurine-icon .item-art {
  object-fit: contain !important;
  image-rendering: auto;
  filter: brightness(1.08) contrast(1.05);
}
.mount-well .flask-icon .item-art {
  object-fit: contain !important;
  width: 100%;
  height: 100%;
}
#camel-sell {
  flex: 1 1 0;
  height: 40px;
  min-height: 40px;
  margin: 0;
}
#camel-buy.is-poor { color: #8b7d68; }
#camel-buy:disabled,
#camel-sell:disabled { opacity: .45; cursor: default; }

.pets-panel { width: min(420px, 92vw); }
#pets-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pet-card { border: 1px solid rgba(200, 168, 96, 0.28); background: rgba(18, 14, 10, 0.45); padding: 10px 12px; }
.pet-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pet-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pet-art { width: 48px; height: 48px; flex: none; }
.pet-card-name { margin: 0; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-lit); }
.pet-toggle { height: 32px; min-height: 32px; width: auto; padding: 0 12px; }
.pet-card-hint, .pet-card-status { margin: 6px 0 0; color: #c8b48a; font-size: 13px; }
.pet-card-status { color: #9ec27a; }
.pet-cats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.pet-cat { display: flex; align-items: center; gap: 5px; color: var(--gold-lit); font-size: 12px; letter-spacing: .04em; }