:root {
  --oak: #2a1f15;
  --oak-2: #3a2c1e;
  --grain: #5c4630;
  --brass: #b88a45;
  --parchment: #efe3c8;
  --faded: #bfae8c;
  --ember: #f0a53a;
  --moss: #a8c56f;
  --chat: #ffe66b;
  --sea: #244f6c;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gap: 10px;
  font-family: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--parchment);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--sea);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Carved-wood panels: the one decorative idea, used everywhere the same way. */
.plate {
  background: linear-gradient(180deg, var(--oak-2), var(--oak));
  border: 2px solid var(--grain);
  box-shadow: inset 0 0 0 1px rgba(184, 138, 69, 0.35), 0 4px 14px rgba(0, 0, 0, 0.35);
  border-radius: 6px;
}

/* ---- HUD ---- */
#status {
  position: fixed; top: calc(var(--safe-t) + var(--gap)); left: calc(var(--safe-l) + var(--gap));
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 14px; color: var(--faded);
}
#status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
#status.offline #status-dot { background: #d9644a; }

#pack-toggle {
  position: fixed; top: calc(var(--safe-t) + var(--gap)); right: calc(var(--safe-r) + var(--gap));
  padding: 8px 16px; font-weight: 700; display: none;
}

#panel {
  position: fixed; right: calc(var(--safe-r) + var(--gap)); bottom: calc(var(--safe-b) + var(--gap));
  width: 256px; padding: 8px;
  /* The quest journal is tall: stop below the minimap and scroll. */
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - var(--mini) - 3 * var(--gap) - 8px); overflow-y: auto;
}
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button {
  flex: 1; padding: 6px 0; border: 1px solid var(--grain); border-radius: 4px;
  background: transparent; color: var(--faded); font-weight: 500;
}
.tabs button[aria-selected="true"] { background: var(--grain); color: var(--parchment); }

.inv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.slot {
  aspect-ratio: 1; border: 1px solid rgba(92, 70, 48, 0.8); border-radius: 4px;
  background: rgba(0, 0, 0, 0.22); padding: 4px; display: grid; place-items: center;
}
.slot:disabled { cursor: default; }
.slot svg { width: 100%; height: 100%; }
.hint { margin: 8px 2px 2px; font-size: 13px; color: var(--faded); }

/* Skills: a two-column grid of tiles (icon, name, level, progress), and a card for the tapped skill. */
.skill-sums { display: flex; gap: 6px; margin: 0 0 6px; }
.skill-sums span {
  flex: 1; text-align: center; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; font-weight: 700;
  background: rgba(10, 7, 4, 0.35); border: 1px solid rgba(0, 0, 0, 0.5); color: var(--parchment);
}
.skill-sums b { color: var(--ember); font-size: 14px; margin-left: 3px; }
#skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.skill-tile {
  width: 100%; text-align: left; padding: 4px 6px 5px; border-radius: 4px; min-height: 40px;
  border: 1px solid rgba(92, 70, 48, 0.8); background: rgba(0, 0, 0, 0.22); font-size: 12.5px;
}
.skill-tile .skill-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.skill-tile .skill-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-icon { width: 17px; height: 17px; flex: none; }
.skill-tile[aria-pressed="true"] { border-color: var(--brass); }
.skill-tile .bar { display: block; height: 5px; margin: 4px 0 0; }
.skill-tile.maxed .skill-level, .skill-card .maxed { color: #ffd76a; }
.skill-tile.maxed .bar > i, #skill-card .bar.maxed > i { background: linear-gradient(180deg, #ffe58a, #d1a43a); }
#skill-card {
  margin: 0 0 6px; padding: 8px; border-radius: 6px; font-size: 13px; min-height: 3em;
  background: rgba(10, 7, 4, 0.35); border: 1px solid rgba(0, 0, 0, 0.5);
}
#skill-card .hint { margin: 0; }
#skill-card h3 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
#skill-card h3 .skill-icon { width: 20px; height: 20px; }
#skill-card h3 .lvl { margin-left: auto; color: var(--ember); }
#skill-card dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 4px 0; }
#skill-card dt { color: var(--faded); }
#skill-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
#skill-card .bar { height: 7px; margin: 4px 0 2px; }
#skill-card .pct { font-size: 11.5px; color: var(--faded); text-align: right; }
#skill-card h4 { margin: 8px 0 2px; font-size: 12.5px; color: var(--faded); font-weight: 700; }
#skill-card ul { list-style: none; margin: 0; padding: 0; }
#skill-card li { display: flex; gap: 6px; padding: 1px 0; }
#skill-card li .at { flex: none; min-width: 3.2em; color: var(--ember); font-weight: 700; }
/* Level up: a brief banner at the top that never takes a tap. */
#levelup {
  position: fixed; z-index: 7; pointer-events: none; left: 50%; top: calc(var(--safe-t) + var(--gap) + 52px);
  transform: translateX(-50%); max-width: min(92vw, 380px); padding: 8px 14px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(58, 42, 22, 0.94), rgba(28, 20, 12, 0.94)); border: 1px solid var(--brass);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); animation: levelup-in 3.6s ease-out forwards;
}
#levelup .lu-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 16px; color: #ffe9a8; }
#levelup .skill-icon { width: 22px; height: 22px; }
#levelup .lu-unlocks { margin-top: 3px; font-size: 13px; color: var(--parchment); }
@keyframes levelup-in { 0% { opacity: 0; transform: translate(-50%, -8px) scale(0.95); } 8% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; } 100% { opacity: 0; } }
.slot { position: relative; }
.count {
  position: absolute; left: 3px; top: 1px; font-size: 12px; font-weight: 700; color: var(--chat);
  text-shadow: 0 1px 1px #000, 0 0 2px #000; pointer-events: none;
}

/* ---- Hitpoints ---- */
#vitals {
  position: fixed; top: calc(var(--safe-t) + var(--gap)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 14px; font-weight: 700;
  color: #e86a5a; font-variant-numeric: tabular-nums;
}
#vitals svg { width: 16px; height: 16px; }
.hp-bar { width: 90px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.hp-bar i { display: block; height: 100%; width: 100%; background: #c9483a; transition: width 200ms ease-out; }
#hp-text { color: var(--parchment); min-width: 4.5em; }
#vitals.low { animation: hp-pulse 1s ease-in-out infinite; }
@keyframes hp-pulse { 50% { box-shadow: inset 0 0 0 1px rgba(184, 138, 69, 0.35), 0 0 14px rgba(201, 72, 58, 0.8); } }
@media (prefers-reduced-motion: reduce) { #vitals.low { animation: none; } .hp-bar i { transition: none; } }

/* ---- Gear tab ---- */
.gear-cb { margin: 2px 2px 8px; font-weight: 700; color: var(--ember); }
#gear-grid {
  display: grid; grid-template-columns: repeat(3, 52px); grid-template-areas: "neck helmet ammo" "weapon body shield" "ring legs ." ". feet .";
  gap: 4px; justify-content: center; margin-bottom: 8px;
}
.gear-helmet { grid-area: helmet; } .gear-weapon { grid-area: weapon; } .gear-body { grid-area: body; }
.gear-shield { grid-area: shield; } .gear-ammo { grid-area: ammo; }
.gear-legs { grid-area: legs; } .gear-feet { grid-area: feet; } .gear-neck { grid-area: neck; } .gear-ring { grid-area: ring; }
.gear-slot { cursor: default; }
.gear-slot.filled { cursor: pointer; border-color: var(--grain); }
.slot-name { font-size: 11px; color: var(--faded); opacity: 0.8; }
#gear-stats { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font-size: 13px; color: var(--faded); margin: 0 2px 8px; }
#gear-stats b { color: var(--parchment); font-weight: 700; font-variant-numeric: tabular-nums; }
.gear-label { margin: 0 2px 4px; font-weight: 700; font-size: 14px; }
#styles { display: flex; gap: 4px; }
#styles button {
  flex: 1; padding: 6px 0; border-radius: 4px; border: 1px solid var(--grain); background: transparent;
  color: var(--faded); font-size: 13px; font-weight: 500; display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
#styles button small { font-size: 11px; opacity: 0.85; }
#styles button:disabled { opacity: 1; cursor: default; }
#styles button[aria-pressed="true"] { background: var(--grain); color: var(--parchment); border-color: var(--brass); }
.skill-head { display: flex; justify-content: space-between; font-weight: 700; }
.skill-level { color: var(--ember); }
.bar { height: 8px; margin: 5px 0 3px; background: rgba(0, 0, 0, 0.35); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--moss); }
.skill-xp { font-size: 13px; color: var(--faded); font-variant-numeric: tabular-nums; }

#chat {
  position: fixed; left: calc(var(--safe-l) + var(--gap)); bottom: calc(var(--safe-b) + var(--gap));
  width: min(440px, calc(100vw - 256px - var(--gap) * 3 - var(--safe-l) - var(--safe-r)));
  padding: 8px;
}
#log {
  list-style: none; margin: 0 0 6px; padding: 0 4px; height: 128px; overflow-y: auto;
  font-size: 15px; line-height: 1.35; -webkit-user-select: text; user-select: text;
}
#log li { overflow-wrap: anywhere; }
#log .game { color: var(--parchment); }
#log .level { color: var(--ember); font-weight: 700; }
#log .drop { color: #f2cf6b; }
#log .rare { color: #e7b8ff; font-weight: 700; text-shadow: 0 0 6px rgba(190, 120, 255, 0.55); }
#log .system { color: var(--faded); font-style: italic; }
#log .who { color: var(--moss); font-weight: 700; }
#log .said { color: var(--chat); }
.chat-row { display: flex; gap: 6px; }
#chat-input {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 4px;
  border: 1px solid var(--grain); background: rgba(0, 0, 0, 0.3);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  -webkit-user-select: text; user-select: text;
}
#chat-input::placeholder { color: var(--faded); opacity: 0.7; }
#chat-send, #enter {
  padding: 7px 14px; border-radius: 4px; border: 1px solid var(--brass);
  background: var(--grain); font-weight: 700;
}

#item-menu {
  position: fixed; z-index: 30; min-width: 128px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
#item-menu p { margin: 2px 6px 4px; font-weight: 700; color: var(--ember); }
#item-menu p.menu-note { max-width: 220px; margin-top: -2px; font-weight: 400; font-size: 0.82em; line-height: 1.3; color: var(--text-dim, #c9b99a); }
#item-menu button {
  text-align: left; padding: 8px 10px; border-radius: 4px; border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.25); font-weight: 500;
}
#item-menu button:hover, #item-menu button:focus-visible { background: var(--grain); }

/* ---- Furnace & anvil menus ---- */
#craft {
  position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 120px));
  display: flex; flex-direction: column; padding: 12px;
}
.craft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.craft-head h2 {
  margin: 0; font-family: 'Grenze Gotisch', 'Times New Roman', serif; font-weight: 600;
  font-size: 30px; line-height: 1; color: var(--ember);
}
#craft-close {
  padding: 6px 12px; border-radius: 4px; border: 1px solid var(--grain); background: transparent; color: var(--faded);
}
#craft .hint { margin: 6px 2px 10px; }
#craft-list { list-style: none; margin: 0; padding: 0 2px 0 0; overflow-y: auto; }
.craft-group { margin: 10px 2px 4px; font-weight: 700; color: var(--ember); }
.craft-group:first-child { margin-top: 0; }
.recipe {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
  padding: 6px; border-radius: 4px; border: 1px solid rgba(92, 70, 48, 0.6); margin-bottom: 4px;
  background: rgba(0, 0, 0, 0.18);
}
.recipe-icon { width: 40px; height: 40px; display: grid; place-items: center; }
.recipe-icon svg { width: 34px; height: 34px; }
.recipe-text { display: flex; flex-direction: column; min-width: 0; }
.recipe-text small { color: var(--faded); font-size: 13px; }
.recipe[data-state="locked"] { opacity: 0.45; }
.recipe[data-state="missing"] .recipe-icon { opacity: 0.6; }
.recipe-actions { display: flex; gap: 4px; }
.recipe-actions button {
  padding: 6px 10px; border-radius: 4px; border: 1px solid var(--brass); background: var(--grain);
  font-weight: 700; white-space: nowrap;
}

/* ---- Trading ---- */
#log .trade { color: #e7a6ff; }
.log-action {
  margin-left: 4px; padding: 1px 8px; border-radius: 3px; border: 1px solid #b06fd0;
  background: rgba(176, 111, 208, 0.22); color: #f3d6ff; font-size: 13px; font-weight: 700;
}
#trade {
  position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 24px);
  display: flex; flex-direction: column; padding: 12px; overflow-y: auto;
}
#trade.warn { border-color: #e2543c; box-shadow: 0 0 0 2px rgba(226, 84, 60, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5); }
#trade-sub { margin: 4px 0 0; }
#trade .gear-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#trade .gear-label small { color: var(--faded); font-weight: 400; font-size: 12px; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.trade-col { min-width: 0; padding: 6px; border-radius: 4px; border: 1px solid rgba(92, 70, 48, 0.6); background: rgba(0, 0, 0, 0.18); }
.trade-col .gear-label { margin-top: 0; }
#trade-offer-view > .gear-label { margin-top: 12px; }
#trade.warn .trade-col.theirs { border-color: #e2543c; background: rgba(226, 84, 60, 0.12); }
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; min-height: 44px; align-content: start; }
.trade-grid.pack { grid-template-columns: repeat(7, 1fr); }
.trade-grid .slot { padding: 3px; }
.trade-empty { grid-column: 1 / -1; margin: 6px 2px; color: var(--faded); font-size: 13px; font-style: italic; list-style: none; }
.trade-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.trade-lines li { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.trade-icon { width: 28px; height: 28px; flex: none; }
.trade-icon svg { width: 100%; height: 100%; }
#trade-status { margin: 10px 2px 8px; min-height: 1.3em; font-weight: 500; color: var(--faded); }
#trade-status.ready { color: var(--moss); }
#trade-status.alert { color: #ff8c6e; font-weight: 700; }
.trade-actions { display: flex; gap: 8px; }
.trade-actions button { flex: 1; padding: 10px; border-radius: 6px; font-size: 16px; font-weight: 700; }
#trade-accept { border: 1px solid var(--moss); background: rgba(168, 197, 111, 0.22); }
#trade-accept[aria-pressed="true"] { background: var(--moss); color: var(--oak); }
#trade-decline { border: 1px solid var(--grain); background: transparent; color: var(--faded); }
@media (max-width: 420px) { .trade-grid { grid-template-columns: repeat(3, 1fr); } .trade-grid.pack { grid-template-columns: repeat(7, 1fr); } }

/* ---- Quests: journal tab ---- */
.tabs button { min-width: 0; font-size: 14px; }
.quest-tier { margin: 10px 2px 4px; font-weight: 700; color: var(--tier); }
.quest-tier:first-child { margin-top: 0; }
.quest-row {
  width: 100%; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px;
  padding: 5px 6px; margin-bottom: 3px; border-radius: 4px; text-align: left;
  border: 1px solid rgba(92, 70, 48, 0.6); background: rgba(0, 0, 0, 0.18); font-size: 14px;
}
.quest-row small { color: var(--faded); font-size: 12px; }
.quest-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9483a; }
.quest-row[data-state="available"] .quest-dot { background: #e8c43a; }
.quest-row[data-state="active"] .quest-dot { background: #6ab4f0; }
.quest-row[data-state="ready"] .quest-dot { background: #ffd23a; box-shadow: 0 0 6px #ffd23a; }
.quest-row[data-state="done"] .quest-dot { background: var(--moss); }
.quest-row[data-state="done"] > span:nth-child(2) { color: var(--moss); }
.quest-row[data-state="locked"] > span:nth-child(2) { color: var(--faded); }
#quest-detail h3 { margin: 6px 2px 2px; font-size: 18px; color: var(--ember); }
.quest-back {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--grain); background: transparent; color: var(--faded); font-size: 13px;
}
.quest-pill {
  display: inline-block; margin: 2px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  color: var(--tier); border: 1px solid var(--tier); background: rgba(0, 0, 0, 0.25);
}
.quest-now { margin: 8px 2px; padding: 6px 8px; border-left: 3px solid var(--ember); background: rgba(0, 0, 0, 0.2); font-size: 14px; }
.quest-now.done { border-color: var(--moss); color: var(--moss); }
.quest-reqs, .quest-rewards { margin: 0 0 6px; padding-left: 20px; font-size: 13px; }
.quest-reqs li.ok { color: var(--moss); }
.quest-reqs li.no { color: #f08a6a; }
.quest-reqs li.ok::marker { content: '✓ '; }
.quest-reqs li.no::marker { content: '✗ '; }

/* ---- Talking to townsfolk ---- */
#talk {
  position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px)); max-height: min(600px, calc(100dvh - 120px));
  display: flex; flex-direction: column; padding: 12px; overflow-y: auto;
}
#talk-role { margin: 4px 0 0; }
#worldmap-close, #talk-close { padding: 6px 12px; border-radius: 4px; border: 1px solid var(--grain); background: transparent; color: var(--faded); align-self: flex-start; }
#talk-lines p { margin: 10px 2px; font-size: 16px; line-height: 1.4; }
#talk-lines p::before { content: '“'; color: var(--brass); }
#talk-lines p::after { content: '”'; color: var(--brass); }
#talk-complete { margin-top: 10px; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--brass); background: rgba(240, 165, 58, 0.12); }
.quest-done-title { margin: 0; font-weight: 800; font-size: 16px; color: var(--tier); }
#talk-complete .hint { margin: 4px 0 0; }
#talk-quests { list-style: none; margin: 6px 0 0; padding: 0; }
.talk-quest {
  padding: 8px; margin-bottom: 6px; border-radius: 4px; border: 1px solid rgba(92, 70, 48, 0.6); background: rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: 4px;
}
.talk-quest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.talk-quest small { color: var(--faded); font-size: 13px; line-height: 1.35; }
.talk-quest[data-state="locked"] { opacity: 0.6; }
.talk-quest[data-state="done"] b { color: var(--moss); }
.talk-quest .recipe-actions { justify-content: flex-end; }
#log .quest { color: #9fe3ef; font-weight: 700; }

/* ---- Minimap & world map ---- */
:root { --mini: 152px; }
#minimap {
  position: fixed; z-index: 4; top: calc(var(--safe-t) + var(--gap)); right: calc(var(--safe-r) + var(--gap));
  width: calc(var(--mini) + 12px); height: calc(var(--mini) + 12px); padding: 5px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
}
#minimap canvas { width: var(--mini); height: var(--mini); border-radius: 50%; display: block; }
#minimap:hover { border-color: var(--brass); }
.mm-north {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--parchment);
  background: var(--grain); border: 1px solid var(--brass); pointer-events: none;
}
#worldmap {
  position: fixed; z-index: 22; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
#worldmap-canvas { display: block; border-radius: 4px; border: 2px solid var(--grain); cursor: crosshair; touch-action: manipulation; }
#worldmap-info { margin: 0 2px; min-height: 1.3em; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--faded); }
.map-legend li { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.6); }
.map-legend i.sq { border-radius: 2px; }

/* ---- Phones: chat spans the bottom, pack opens as a drawer ---- */
@media (max-width: 700px) {
  #pack-toggle { display: block; }
  #panel {
    top: calc(var(--safe-t) + var(--gap) + 48px); bottom: auto;
    transform: translateX(calc(100% + 24px)); transition: transform 180ms ease-out;
  }
  #panel.open { transform: none; }
  #panel { left: calc(var(--safe-l) + var(--gap)); width: auto; z-index: 6; }
  :root { --mini: 92px; }
  #minimap { top: calc(var(--safe-t) + var(--gap) + 50px); }
  /* Stop above the chat box; long tabs scroll inside the drawer. */
  #panel { max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 48px - 3 * var(--gap) - 176px); }
  /* Phones: the connection badge shrinks to its dot so hitpoints fit in the top row. */
  #status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #status { padding: 10px; }
  #vitals { z-index: 5; padding: 6px 10px; }
  .hp-bar { width: 56px; }
  .inv-grid { grid-template-columns: repeat(7, 1fr); }
  #chat { right: calc(var(--safe-r) + var(--gap)); width: auto; }
  #log { height: 92px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { #panel { transition: none; } }

/* ---- Login ---- */
#login {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  padding-top: calc(var(--safe-t) + 24px); padding-bottom: calc(var(--safe-b) + 24px);
  background: radial-gradient(ellipse at 50% 40%, rgba(240, 165, 58, 0.18), transparent 60%), rgba(20, 14, 9, 0.72);
}
.login-card { width: min(340px, 100%); text-align: center; }
.login-card h1 {
  font-family: 'Grenze Gotisch', 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(56px, 16vw, 88px); line-height: 1; margin: 0 0 8px;
  color: var(--ember); letter-spacing: 0.01em;
  text-shadow: 0 0 24px rgba(240, 165, 58, 0.45), 0 3px 0 #5a2f0e;
}
.login-card p { margin: 0 0 20px; color: var(--faded); font-size: 17px; }
.login-card label { display: block; text-align: left; font-weight: 700; margin-bottom: 6px; }
#name {
  width: 100%; padding: 12px 14px; font-size: 18px; border-radius: 6px;
  border: 2px solid var(--grain); background: rgba(0, 0, 0, 0.4); margin-bottom: 12px;
  -webkit-user-select: text; user-select: text;
}
#enter { width: 100%; padding: 12px; font-size: 18px; border-radius: 6px; }
#enter:disabled { opacity: 0.6; cursor: progress; }
#login-error { min-height: 1.4em; margin: 12px 0 0; color: #f08a6a; }
@media (max-width: 360px) {
  #vitals { gap: 6px; padding: 6px 8px; }
  .hp-bar { width: 34px; }
}

/* ---- Motion ---- */
#xp-drops {
  position: fixed; z-index: 4; pointer-events: none;
  top: calc(var(--safe-t) + var(--gap) + var(--mini) + 18px); right: calc(var(--safe-r) + var(--gap));
  width: calc(var(--mini) + 12px); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.xp-drop {
  font-weight: 800; font-size: 14px; color: #ffe9a8; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,0.6);
  animation: xp-rise 1.6s ease-out forwards;
}
@keyframes xp-rise { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 12% { opacity: 1; transform: translateY(0) scale(1.05); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
.slot.pop svg { animation: slot-pop 260ms ease-out; }
@keyframes slot-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -47%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
#craft:not([hidden]), #talk:not([hidden]), #worldmap:not([hidden]), #trade:not([hidden]) { animation: dialog-in 170ms ease-out; }
.tab:not([hidden]) { animation: fade-in 140ms ease-out; }
#item-menu:not([hidden]) { animation: fade-in 120ms ease-out; }
button { transition: transform 80ms ease-out, background-color 120ms, border-color 120ms; }
button:active { transform: scale(0.96); }
#minimap:active { transform: scale(0.97); }
@media (max-width: 700px) { #xp-drops { top: calc(var(--safe-t) + var(--gap) + 50px + var(--mini) + 16px); } }
@media (prefers-reduced-motion: reduce) {
  #levelup, .xp-drop, .slot.pop svg, #craft:not([hidden]), #talk:not([hidden]), #worldmap:not([hidden]), #trade:not([hidden]), .tab:not([hidden]), #item-menu:not([hidden]) { animation: none; }
  button, button:active { transition: none; transform: none; }
}

/* ---- 3D view: compass ---- */
#compass { display: none; }
.is-3d #compass {
  display: grid; place-items: center; position: fixed; z-index: 4; padding: 0;
  width: 38px; height: 38px; border-radius: 50%;
  top: calc(var(--safe-t) + var(--gap) + var(--mini) - 30px); right: calc(var(--safe-r) + var(--gap) + var(--mini) - 18px);
}
#compass svg { width: 26px; height: 26px; transform: rotate(var(--yaw, 0rad)); }

/* =====================================================================================
   Theme: carved oak and bronze, refined for the 3D world. Panels are a little see-through
   so the world shows behind them, edged in bronze with a dark outer line for contrast.
   ===================================================================================== */
:root {
  --panel-top: rgba(58, 42, 28, 0.94);
  --panel-bottom: rgba(33, 24, 16, 0.94);
  --bronze-hi: #e6bf72;
  --bronze: #b88a45;
  --bronze-lo: #6e4f26;
  --ink: #1a120b;
}
.plate {
  background:
    linear-gradient(180deg, rgba(255, 230, 180, 0.06), rgba(255, 230, 180, 0) 40%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
    linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--bronze-lo),
    inset 0 0 0 2px rgba(230, 191, 114, 0.35),
    inset 0 1px 0 2px rgba(255, 236, 190, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.45);
  border-radius: 8px;
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .is-3d #chat, .is-3d #panel, .is-3d #status, .is-3d #vitals {
    -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
    --panel-top: rgba(52, 37, 24, 0.82); --panel-bottom: rgba(30, 21, 14, 0.86);
  }
}

/* Tabs: icon over label, the open one lit in bronze. */
.tabs { gap: 4px; padding: 2px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 4px;
  border: 1px solid transparent; border-radius: 5px; color: var(--faded); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.tabs button svg { width: 20px; height: 20px; }
.tabs button:hover { color: var(--parchment); background: rgba(255, 220, 160, 0.06); }
.tabs button[aria-selected="true"] {
  color: #2a1a0a; border-color: var(--ink);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Slots look recessed into the wood. */
.slot {
  border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 6px;
  background: radial-gradient(ellipse at 50% 40%, rgba(70, 52, 34, 0.55), rgba(16, 11, 7, 0.55));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 220, 160, 0.07);
}
.slot:not(:disabled):hover { border-color: var(--bronze); }
.skill-tile { border-radius: 6px; border-color: rgba(0, 0, 0, 0.5); background: rgba(10, 7, 4, 0.35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.skill-tile .bar > i, .bar > i { background: linear-gradient(180deg, #c7df8a, #86a84c); }

/* Hitpoints: a glossy bar. */
#vitals { gap: 10px; padding: 7px 14px; }
#vitals svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.hp-bar { width: 110px; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.hp-bar i { background: linear-gradient(180deg, #ff8a6e, #c9483a 55%, #9a2f24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* Minimap in a bronze ring. */
#minimap {
  border-radius: 50%; padding: 4px; border: 1px solid var(--ink);
  background: linear-gradient(145deg, var(--bronze-hi), var(--bronze-lo));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 245, 210, 0.5);
}
#minimap canvas { box-shadow: inset 0 0 0 2px var(--ink); border: 2px solid var(--ink); }
.mm-north { background: linear-gradient(180deg, var(--bronze-hi), var(--bronze)); color: #2a1a0a; border: 1px solid var(--ink); }
.is-3d #compass {
  border: 1px solid var(--ink); background: radial-gradient(circle at 40% 35%, #4a3725, #1f160e);
  box-shadow: inset 0 0 0 2px var(--bronze), 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Buttons that do something: bronze. */
#chat-send, #enter, .recipe-actions button, #talk-quests button {
  border: 1px solid var(--ink); color: #2a1a0a; font-weight: 800;
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}
#chat-send:hover, #enter:hover, .recipe-actions button:hover { filter: brightness(1.08); }
#chat-input { border-radius: 6px; border-color: rgba(0, 0, 0, 0.6); background: rgba(8, 5, 3, 0.45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Dialog headings sit on a bronze rule. */
.craft-head { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--bronze), transparent) 1; }
.craft-head h2 { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(240, 165, 58, 0.25); }
#craft, #talk, #worldmap, #trade { border-radius: 10px; }

/* Login: the 3D world turns behind a glass card. */
.is-3d #login {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(20, 14, 9, 0.15), rgba(20, 14, 9, 0.6) 75%),
    linear-gradient(180deg, rgba(20, 14, 9, 0.35), rgba(20, 14, 9, 0) 30%, rgba(20, 14, 9, 0) 70%, rgba(20, 14, 9, 0.5));
}
.login-card {
  padding: 28px 26px 22px; border-radius: 14px; border: 1px solid var(--ink);
  background: linear-gradient(180deg, rgba(48, 34, 22, 0.86), rgba(26, 18, 12, 0.9));
  box-shadow: inset 0 0 0 1px var(--bronze-lo), inset 0 0 0 2px rgba(230, 191, 114, 0.3), 0 20px 60px rgba(0, 0, 0, 0.55);
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .login-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(48, 34, 22, 0.72), rgba(26, 18, 12, 0.8)); }
}
.login-card h1 { margin-bottom: 2px; }
.login-card .tagline { margin: 0 0 18px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze-hi); opacity: 0.9; }
#name { border-radius: 8px; border-color: rgba(0, 0, 0, 0.6); background: rgba(8, 5, 3, 0.5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
#name:focus { border-color: var(--bronze); }
#enter { border-radius: 8px; font-size: 19px; letter-spacing: 0.02em; }

/* =====================================================================================
   Character creator: the figure stands on a plinth in warm lantern light, with the choices on a
   carved panel beside it (below it on phones). The die is the one playful thing on screen.
   ===================================================================================== */
#creator {
  position: fixed; inset: 0; z-index: 30; display: grid;
  grid-template-columns: minmax(0, 1fr) min(420px, 44vw);
  background:
    radial-gradient(ellipse 60% 70% at 32% 46%, rgba(255, 178, 92, 0.32), rgba(255, 178, 92, 0) 70%),
    radial-gradient(ellipse at 30% 100%, #3b2a1b, #1a120b 70%);
}
.creating #hud, .creating #overlay { visibility: hidden; }
.creator-stage { position: relative; min-height: 0; }
#creator-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#creator-canvas:active { cursor: grabbing; }
.creator-intro {
  position: absolute; top: calc(var(--safe-t) + 22px); left: calc(var(--safe-l) + 28px); max-width: 30em; pointer-events: none;
}
.creator-intro h2 {
  margin: 0; font-family: 'Grenze Gotisch', 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; color: var(--ember);
  text-shadow: 0 0 22px rgba(240, 165, 58, 0.35), 0 3px 0 #4a260b;
}
.creator-intro p { margin: 8px 0 0; color: var(--faded); font-size: 17px; line-height: 1.4; max-width: 26em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.creator-hint {
  position: absolute; bottom: calc(var(--safe-b) + 18px); left: 50%; transform: translateX(-50%); margin: 0;
  color: rgba(239, 227, 200, 0.55); font-size: 14px; pointer-events: none;
}

/* The die. */
.creator-roll { position: absolute; left: calc(var(--safe-l) + 28px); bottom: calc(var(--safe-b) + 22px); display: flex; align-items: flex-end; gap: 12px; }
#creator-dice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--parchment); font-weight: 700; font-size: 14px;
}
#creator-dice svg { width: 76px; height: 82px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); transition: transform 120ms ease-out; }
#creator-dice:hover svg { transform: rotate(-8deg) translateY(-2px); }
#creator-dice .die-top { fill: #f4ecda; stroke: #2a1a0a; stroke-width: 1.5; }
#creator-dice .die-side { fill: #bfae86; stroke: #2a1a0a; stroke-width: 1.5; }
#creator-dice .die-shine { fill: rgba(255, 255, 255, 0.55); }
#creator-dice .die-face circle { fill: #3a2414; }
#creator-dice.rolling svg { animation: die-tumble 620ms cubic-bezier(.2, .7, .3, 1); }
@keyframes die-tumble {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-34px) rotate(-200deg) scale(1.08); }
  70% { transform: translateY(0) rotate(-350deg) scale(0.96); }
  85% { transform: translateY(-6px) rotate(-362deg); }
  100% { transform: translateY(0) rotate(-360deg); }
}
.creator-undo {
  width: 44px; height: 44px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ink); background: radial-gradient(circle at 40% 35%, #4a3725, #1f160e); color: var(--bronze-hi);
  box-shadow: inset 0 0 0 2px var(--bronze-lo), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.creator-undo svg { width: 22px; height: 22px; }

/* The choices. */
.creator-panel {
  display: flex; flex-direction: column; min-height: 0;
  padding: calc(var(--safe-t) + 18px) calc(var(--safe-r) + 18px) calc(var(--safe-b) + 16px) 18px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 7px),
    linear-gradient(180deg, #34261a, #201710);
  border-left: 1px solid var(--ink);
  box-shadow: inset 2px 0 0 var(--bronze-lo), inset 3px 0 0 rgba(230, 191, 114, 0.25), -10px 0 30px rgba(0, 0, 0, 0.35);
}
.creator-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.creator-tabs button { padding: 9px 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--faded); font-size: 16px; font-weight: 700; }
.creator-tabs button:hover { color: var(--parchment); }
.creator-tabs button[aria-selected="true"] {
  color: #2a1a0a; border-color: var(--ink);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.creator-fields { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 2px 10px; overscroll-behavior: contain; }
.creator-fields { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.cf-row { padding: 14px 0 4px; }
.cf-row + .cf-row { border-top: 1px solid rgba(184, 138, 69, 0.18); }
.cf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-label { font-weight: 700; font-size: 16px; }
.cf-value { color: var(--bronze-hi); font-size: 15px; }
.cf-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-options.swatches { gap: 9px; }
.swatch {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%), var(--c);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3);
}
.swatch.match { background: linear-gradient(135deg, var(--c, #888) 50%, color-mix(in srgb, var(--c, #888) 62%, black) 50%); }
.swatch[aria-checked="true"] { box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 0 0 2px #201710, 0 0 0 4px var(--bronze-hi); }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.28); color: var(--parchment); font-size: 15px; font-weight: 500;
}
.chip:hover { border-color: var(--bronze); }
.chip[aria-checked="true"] {
  color: #2a1a0a; font-weight: 700; border-color: var(--ink);
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6);
}
.creator-actions { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(184, 138, 69, 0.25); }
.creator-actions button { flex: 1; padding: 13px; border-radius: 8px; font-size: 18px; font-weight: 800; }
.creator-done {
  border: 1px solid var(--ink); color: #2a1a0a;
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.creator-done:hover { filter: brightness(1.08); }
.creator-cancel { flex: 0 0 auto !important; padding-inline: 20px !important; border: 1px solid rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.3); color: var(--faded); }
.change-look {
  width: 100%; margin-top: 10px; padding: 9px; border-radius: 6px; font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.28); color: var(--parchment);
}
.change-look:hover { border-color: var(--bronze); }

/* Phones and narrow windows: the figure on top, the choices underneath. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #creator { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46fr) minmax(0, 54fr); }
  .creator-intro { top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 16px); right: 16px; }
  .creator-intro h2 { font-size: 34px; }
  .creator-intro p { display: none; }
  .creator-roll { left: auto; right: calc(var(--safe-r) + 14px); bottom: 10px; flex-direction: row-reverse; }
  #creator-dice svg { width: 58px; height: 63px; }
  .creator-undo { margin-bottom: 22px; }
  .creator-hint { bottom: 12px; left: calc(var(--safe-l) + 16px); transform: none; }
  .creator-panel {
    padding: 12px calc(var(--safe-r) + 14px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 14px);
    border-left: 0; border-top: 1px solid var(--ink);
    box-shadow: inset 0 2px 0 var(--bronze-lo), inset 0 3px 0 rgba(230, 191, 114, 0.25), 0 -10px 30px rgba(0, 0, 0, 0.35);
  }
  .cf-row { padding-top: 10px; }
  .swatch { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #creator-dice.rolling svg { animation: none; }
  #creator-dice:hover svg { transform: none; }
}

/* =====================================================================================
   Bank and general store windows: carved panels like the trade window, with the stock or
   vault on top and your pack underneath.
   ===================================================================================== */
.service {
  position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 24px);
  display: flex; flex-direction: column; padding: 12px; border-radius: 10px;
}
.service:not([hidden]) { animation: dialog-in 170ms ease-out; }
.service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.service-head h2 { margin: 0; }
.service-head .hint { margin: 4px 0 0; }
.service-close {
  flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0; font-size: 16px;
  border: 1px solid var(--ink); background: radial-gradient(circle at 40% 35%, #4a3725, #1f160e); color: var(--bronze-hi);
  box-shadow: inset 0 0 0 1px var(--bronze-lo);
}
.service .gear-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 0 6px; }
.service .gear-label small { color: var(--faded); font-weight: 400; font-size: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-content: start; }
.service-grid.vault, .service-grid.stock {
  overflow-y: auto; max-height: min(34dvh, 260px); min-height: 52px; padding: 4px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); overscroll-behavior: contain;
}
.service-grid.pack { grid-template-columns: repeat(7, 1fr); }
.service-grid .slot { position: relative; padding: 3px; aspect-ratio: 1; }
.service-grid .slot svg { width: 100%; height: 100%; }
.service-grid .slot.dim { opacity: 0.45; }
.service-grid .price {
  position: absolute; right: 2px; bottom: 1px; padding: 0 3px; border-radius: 3px;
  font-size: 11px; font-weight: 800; color: #ffe08a; background: rgba(20, 12, 4, 0.72);
  text-shadow: 0 1px 1px #000; pointer-events: none;
}
.service-actions { display: flex; gap: 8px; margin-top: 12px; }
.service-primary {
  flex: 1; padding: 11px; border-radius: 8px; font-size: 16px; font-weight: 800;
  border: 1px solid var(--ink); color: #2a1a0a;
  background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #9a6f35);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
}
.service-primary:disabled { opacity: 0.5; cursor: default; }
#bank { border-color: #2a3d5c; }
@media (max-width: 480px) {
  .service-grid { grid-template-columns: repeat(6, 1fr); }
  .service-grid.pack { grid-template-columns: repeat(7, 1fr); }
}

/* The purse under the pack. */
.pack-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pack-foot .hint { margin: 0; }
.purse { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #ffe08a; white-space: nowrap; }
.purse svg { width: 20px; height: 20px; }
.purse b { font-weight: 800; }

/* "Use X with…": the picked-up item glows, and a hint floats above the chat. */
.slot.using { outline: 2px solid var(--ember); outline-offset: -2px; box-shadow: 0 0 10px rgba(255, 170, 60, 0.6) inset; }
#use-hint {
  position: fixed; z-index: 25; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 200px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; max-width: min(92vw, 420px); cursor: pointer;
}
#use-hint svg { width: 28px; height: 28px; flex: none; }
#use-hint small { display: block; opacity: 0.75; font-size: 0.8em; }

/* ---- Prayer ---- */
#vitals .pp-icon { color: #9cc8f0; width: 15px; height: 15px; }
.pp-bar { width: 70px; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.pp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #bfe2ff, #5a9ad8 55%, #2f5f94); transition: width 200ms ease-out; }
#pp-text { color: var(--parchment); min-width: 3.6em; }
#vitals.praying .pp-icon { filter: drop-shadow(0 0 4px #9cd0ff); }
.prayer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.prayer {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 6px; color: #d9c8a4;
  background: radial-gradient(ellipse at 50% 40%, rgba(70, 52, 34, 0.55), rgba(16, 11, 7, 0.55));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}
.prayer svg { width: 70%; height: 70%; }
.prayer span { position: absolute; right: 4px; bottom: 1px; font-size: 11px; font-weight: 700; color: var(--faded); }
.prayer.locked { opacity: 0.35; }
.prayer.picked { border-color: var(--bronze); }
.prayer[aria-pressed="true"] {
  color: #e8f4ff; border-color: #8cc4f0;
  background: radial-gradient(ellipse at 50% 45%, rgba(120, 180, 240, 0.55), rgba(30, 50, 80, 0.7));
  box-shadow: 0 0 10px rgba(120, 190, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#prayer-detail { min-height: 3.6em; }
#hp-text, #pp-text { white-space: nowrap; }
@media (max-width: 700px) {
  #vitals { gap: 6px; }
  #vitals .hp-bar { width: 60px; }
  #vitals .pp-bar { width: 44px; }
  #hp-text, #pp-text { min-width: 0; }
  .prayer-grid { grid-template-columns: repeat(8, 1fr); }
  .prayer { padding: 3px; }
  .prayer span { font-size: 10px; right: 2px; bottom: 0; }
}
@media (max-width: 400px) { #vitals .hp-bar { width: 40px; } #vitals .pp-bar { width: 32px; } #pp-text { display: none; } }

/* ---- Painted item icons ---- */
.item-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.recipe-icon .item-art { width: 34px; height: 34px; }
.purse .item-art { width: 20px; height: 20px; }
#use-hint .item-art { width: 28px; height: 28px; flex: none; }
.slot.pop .item-art { animation: slot-pop 260ms ease-out; }
@media (prefers-reduced-motion: reduce) { .slot.pop .item-art { animation: none; } }

/* ---- Magic tab ---- */
.spell-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.spell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 4px; border-radius: 6px;
  border: 1px solid rgba(184, 138, 69, 0.35); background: rgba(0, 0, 0, 0.25); color: var(--parchment); cursor: pointer;
}
.spell svg { width: 66%; height: 66%; }
.spell span { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 700; color: var(--faded); }
.spell.locked { opacity: 0.32; }
.spell.norunes svg { opacity: 0.45; }
.spell.picked { border-color: var(--grain); }
.spell[aria-pressed="true"] { background: rgba(255, 200, 110, 0.18); box-shadow: inset 0 0 0 1px var(--ember), 0 0 10px rgba(255, 170, 70, 0.35); }
.skill-level.boosted { color: #8fe08a; }
.skill-level small { font-size: 0.75em; color: var(--faded); margin-left: 1px; }
/* Six tabs: keep the labels from running into each other. */
.tabs button span { font-size: 11.5px; letter-spacing: -0.02em; }