:root {
  color-scheme: dark;
  --gold: #f4b85a;
  --ice: #55d9ff;
  --ice-bright: #b9f7ff;
  --violet: #9a6bff;
  --danger: #ee4353;
  --ink: rgba(5, 10, 19, 0.84);
  --line: rgba(163, 187, 220, 0.24);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #020711; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { display: grid; place-items: center; }
button { font: inherit; color: inherit; }

#game-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #06101d;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.62);
  isolation: isolate;
}

/* Desktop is a faithful 9:16 phone preview. Real narrow phones use the full
   available viewport instead of being letterboxed into a second aspect ratio. */
@media (min-width: 700px) and (min-aspect-ratio: 3 / 4) {
  #game-shell {
    width: min(100vw, 56.25dvh);
    height: min(100dvh, 177.7778vw);
    aspect-ratio: 9 / 16;
  }
}

#application { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.glass-panel {
  background: linear-gradient(180deg, rgba(9, 18, 31, 0.90), rgba(5, 10, 19, 0.80));
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(7px);
}

#status-panel {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  gap: 10px;
  align-items: center;
  width: min(285px, 54%);
  padding: 8px 10px 8px 8px;
  border-radius: 6px 15px 15px 6px;
}

.portrait {
  width: 53px; height: 53px; flex: none; display: grid; place-items: center;
  transform: rotate(45deg);
  border: 1px solid rgba(239, 196, 115, .55);
  background: radial-gradient(circle at 42% 35%, #415f86, #111927 60%, #070a10 100%);
  box-shadow: 0 0 20px rgba(71, 164, 255, .13);
}
.portrait span { transform: rotate(-45deg); color: #d9e8ff; font-size: 18px; text-shadow: 0 0 12px #75c7ff; }
.status-copy { min-width: 0; flex: 1; }
.status-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; }
.status-line strong { color: #e9edf4; font-size: 12px; letter-spacing: .13em; }
.status-line.muted { margin-top: 3px; color: #92a5bc; font-size: 10px; letter-spacing: .04em; }
#combat-mode.casting { color: var(--ice-bright); text-shadow: 0 0 8px rgba(96, 215, 255, .45); }
.bar { height: 8px; margin-top: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.45); overflow: hidden; }
.bar span { display: block; height: 100%; transition: width .12s linear; }
.bar.health span { width: 100%; background: linear-gradient(90deg, #8f172a, #f0444f 70%, #ff7770); box-shadow: 0 0 10px rgba(237, 58, 72, .38); }

#minimap-panel {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: clamp(92px, 21vw, 148px);
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 5px;
  overflow: visible;
}
#minimap-canvas { width: 100%; height: 100%; display: block; border-radius: 5px; opacity: .94; }
#debug-toggle {
  pointer-events: auto;
  position: absolute; right: 2px; bottom: -26px; width: 28px; height: 24px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 0 0 7px 7px;
  background: rgba(4,9,17,.82); color: #8ba0b7; cursor: pointer;
}

#chapter-title {
  position: absolute;
  top: max(96px, calc(env(safe-area-inset-top) + 82px));
  left: 50%; transform: translateX(-50%); width: 58%; text-align: center;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,.8));
  animation: chapter-fade 5.2s forwards;
}
#chapter-title small { display: block; color: var(--room-accent, #b19b78); letter-spacing: .26em; font-size: 8px; opacity: .78; }
#chapter-title strong { display: block; margin-top: 3px; color: #e7d7b7; font-family: Georgia, serif; font-size: clamp(15px, 3.7vw, 22px); letter-spacing: .08em; }
#chapter-title span { display: block; margin-top: 2px; color: var(--room-accent, #7289a5); font-size: 9px; letter-spacing: .07em; opacity: .72; }
@keyframes chapter-fade { 0%, 48% { opacity: 1; } 100% { opacity: 0; } }

#debug-panel {
  pointer-events: auto;
  position: absolute;
  top: max(150px, calc(env(safe-area-inset-top) + 145px));
  right: max(14px, env(safe-area-inset-right));
  width: 194px;
  padding: 9px 10px;
  border-radius: 9px;
  opacity: 0; transform: translateY(-6px) scale(.98); visibility: hidden;
  transition: .16s ease;
  font-size: 10px; color: #9cb0c6;
}
#debug-panel.open { opacity: 1; transform: none; visibility: visible; }
#debug-panel strong { display: block; color: #d0dceb; font-weight: 600; font-size: 10px; }
.debug-line { display: flex; justify-content: space-between; margin-top: 7px; }
.stress-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 7px; }
.stress-row button { cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: #8da0b7; padding: 4px; border-radius: 5px; }
.stress-row button.active { color: #dff8ff; border-color: rgba(86, 215, 255, .48); background: rgba(52, 175, 231, .12); }

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(132px, 15vh) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 8px;
  width: min(88%, 520px); padding: 8px 12px; border-radius: 20px;
  color: #a7b7c8; font-size: 10px; letter-spacing: .035em; text-align: center;
  transition: opacity .5s ease, transform .5s ease;
}
#hint strong { color: #e6eef7; font-weight: 650; }
#hint .hint-sep { color: #465a72; }
#hint.fade { opacity: 0; transform: translate(-50%, 8px); }

#loot-toast {
  position: absolute; left: 50%; top: 23%; transform: translateX(-50%);
  padding: 8px 12px; border-radius: 18px; color: #f6d27a; font-size: 11px; letter-spacing: .04em;
  box-shadow: 0 0 26px rgba(255, 177, 46, .12);
}
.loot-gem { color: #ffd35a; text-shadow: 0 0 10px rgba(255, 179, 43, .7); margin-right: 5px; }

#ability-cluster {
  position: absolute;
  left: 50%; bottom: calc(19px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; gap: clamp(14px, 4vw, 26px); align-items: end;
  pointer-events: none;
}
.ability {
  pointer-events: auto;
  position: relative; width: clamp(72px, 19vw, 94px); height: clamp(72px, 19vw, 94px);
  border-radius: 50%; border: 1px solid rgba(208, 220, 234, .30);
  background: radial-gradient(circle at 50% 40%, rgba(31, 48, 66, .95), rgba(7, 12, 20, .98) 72%);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.24);
  display: grid; place-items: center; overflow: hidden;
  color: #cbd7e4; touch-action: manipulation;
}
button.ability { cursor: pointer; }
.ability:nth-child(2) { width: clamp(82px, 22vw, 106px); height: clamp(82px, 22vw, 106px); margin-bottom: 5px; }
.ability-ring { position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.ability .glyph { position: relative; z-index: 3; font-size: clamp(25px, 7vw, 38px); line-height: 1; text-shadow: 0 0 14px currentColor; }
.ability-name { position: absolute; z-index: 4; bottom: 13px; font-size: 8px; letter-spacing: .11em; font-weight: 700; }
.ability-sub { position: absolute; z-index: 4; bottom: 4px; font-size: 7px; letter-spacing: .08em; color: #75879b; }
.ability-key { position: absolute; z-index: 5; right: 4px; top: 5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.52); color: #8fa2b8; font-size: 9px; }
.ability.ice { color: #63e5ff; border-color: rgba(90, 224, 255, .55); }
.ability.ice.ready { box-shadow: 0 0 25px rgba(51, 191, 255, .26), 0 10px 24px rgba(0,0,0,.42), inset 0 0 0 4px rgba(0,0,0,.22); }
.ability.blink { color: #aa86ff; border-color: rgba(157, 119, 255, .42); }
.ability.blink.ready { box-shadow: 0 0 20px rgba(132, 89, 255, .18), 0 10px 24px rgba(0,0,0,.42), inset 0 0 0 4px rgba(0,0,0,.22); }
.ability.passive { color: #cdd8e4; pointer-events: none; }
.cooldown { position: absolute; z-index: 2; inset: 0; transform-origin: bottom; background: rgba(2,6,12,.73); transform: scaleY(0); }
.cooldown-text { position: absolute; z-index: 6; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px #000; }

#loot-counter {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 50px; height: 34px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #f7d376; font-size: 12px;
}

/* Owner-selected target, Pass A. This is intentionally query-scoped via ?env=materials,target so the current
   shipped HUD remains the control. Hit areas and information do not change; only visual weight and hierarchy do. */
#game-shell.target-visual-pass {
  --line: rgba(226, 188, 112, .26);
}
#game-shell.target-visual-pass .glass-panel {
  background: linear-gradient(180deg, rgba(5, 12, 24, .92), rgba(3, 8, 17, .84));
  box-shadow: 0 10px 30px rgba(0,0,0,.38), inset 0 1px rgba(255, 221, 164, .035);
  backdrop-filter: blur(6px);
}
#game-shell.target-visual-pass #status-panel {
  width: min(272px, 52%);
  border-radius: 5px 13px 13px 5px;
}
#game-shell.target-visual-pass .portrait {
  border-color: rgba(235, 191, 109, .70);
  background: radial-gradient(circle at 42% 35%, #274e73, #0d1726 60%, #050910 100%);
  box-shadow: 0 0 18px rgba(85, 217, 255, .12);
}
#game-shell.target-visual-pass #minimap-panel {
  width: clamp(88px, 20vw, 138px);
  padding: 4px;
}
#game-shell.target-visual-pass .ability {
  border-color: rgba(225, 199, 151, .24);
  background: radial-gradient(circle at 50% 38%, rgba(20, 34, 54, .96), rgba(4, 9, 18, .985) 72%);
  box-shadow: 0 9px 22px rgba(0,0,0,.46), inset 0 0 0 3px rgba(0,0,0,.20);
}
#game-shell.target-visual-pass .ability.ice {
  border-color: rgba(89, 225, 255, .62);
}
#game-shell.target-visual-pass .ability.blink {
  border-color: rgba(170, 123, 255, .52);
}
#game-shell.target-visual-pass #touch-stick {
  border-color: rgba(139, 200, 239, .18);
  background: rgba(23, 68, 101, .055);
  box-shadow: inset 0 0 18px rgba(79, 171, 222, .055);
}
#game-shell.target-visual-pass #touch-knob {
  background: rgba(113, 202, 255, .18);
  border-color: rgba(145, 222, 255, .38);
  box-shadow: 0 0 12px rgba(89, 191, 255, .16);
}
#game-shell.target-visual-pass #cinematic-vignette {
  box-shadow: inset 0 0 110px rgba(0, 5, 16, .54), inset 0 -78px 110px rgba(0,0,0,.20);
}

/* Hero gear: a small toggle bottom-left, and a sheet listing every item the table knows about. */
#gear-toggle {
  pointer-events: auto;
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 50px; height: 34px; padding: 0 10px; border-radius: 8px;
  color: #cfe0f2; font: 800 10px ui-monospace, monospace; letter-spacing: .12em; cursor: pointer;
}
#gear-toggle.active { color: #9fe8ff; border-color: rgba(86, 215, 255, .48); }

#gear-panel {
  pointer-events: auto;
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: calc(64px + env(safe-area-inset-bottom));
  width: min(88vw, 360px); max-height: 56%; overflow-y: auto; padding: 10px 11px; border-radius: 10px;
  font-size: 10px; color: #9cb0c6;
}
.gear-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gear-head strong { color: #d0dceb; letter-spacing: .1em; }
.gear-head span { color: #70869f; font-size: 9px; }
.gear-actions { margin: 8px 0 0; }
.gear-actions button { width: 100%; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #9fb2c8; padding: 6px; border-radius: 6px; font-size: 10px; letter-spacing: .08em; }
.gear-actions button.active { color: #ffe6b0; border-color: rgba(255, 186, 84, .5); background: rgba(255, 170, 40, .14); }
.gear-slots { display: grid; gap: 4px; margin: 8px 0; }
.gear-diagnostics { margin: 4px 0 0; font-size: 9px; line-height: 1.5; color: #7f93aa; white-space: pre-wrap; }
.gear-row { display: grid; grid-template-columns: 66px 1fr auto; gap: 8px; align-items: center; }
.gear-row > span:first-child { color: #667d97; text-transform: uppercase; letter-spacing: .08em; }
.gear-row strong { color: #d5e0ec; }
.gear-clear {
  cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035);
  color: #8da0b7; border-radius: 5px; padding: 3px 6px; font-size: 9px;
}
.gear-items { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.gear-item {
  width: 100%; display: grid; gap: 2px; padding: 7px 9px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.03); color: #b7c7d8;
}
.gear-item strong { font-size: 11px; color: #dbe6f2; }
.gear-item span { color: #70869f; font-size: 9px; }
.gear-item.equipped { border-color: rgba(86, 215, 255, .48); background: rgba(52, 175, 231, .12); color: #dff8ff; }

/* Inventory: a second toggle beside GEAR, and one sheet with GEAR / SKILLS / FORGE tabs. */
#bag-toggle {
  pointer-events: auto;
  position: absolute; left: calc(max(14px, env(safe-area-inset-left)) + 60px); bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 50px; height: 34px; padding: 0 10px; border-radius: 8px;
  color: #cfe0f2; font: 800 10px ui-monospace, monospace; letter-spacing: .12em; cursor: pointer;
}
#bag-toggle.active { color: #9fe8ff; border-color: rgba(86, 215, 255, .48); }

#save-toggle {
  pointer-events: auto;
  position: absolute; left: calc(max(14px, env(safe-area-inset-left)) + 118px); bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 54px; height: 34px; padding: 0 10px; border-radius: 8px;
  color: #cfe0f2; font: 800 10px ui-monospace, monospace; letter-spacing: .12em; cursor: pointer;
}
#save-toggle.active { color: #9fe8ff; border-color: rgba(86, 215, 255, .48); }

#save-panel {
  pointer-events: auto;
  position: absolute; z-index: 74; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(calc(100vw - 24px), 390px); padding: 12px;
  border-radius: 14px; color: #a9bed2; font-size: 11px; line-height: 1.45;
  background: linear-gradient(180deg, rgba(8, 17, 31, .98), rgba(5, 11, 23, .98));
}
.save-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.save-head strong { color: #e6f8ff; letter-spacing: .12em; font-size: 12px; }
#save-close {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
  background: rgba(255,255,255,.035); color: #b8c8d8; cursor: pointer;
}
#save-status { margin: 10px 0; color: #d6e5f1; }
.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.save-actions button, .save-import-label, .save-reset, #save-alert-open {
  min-height: 42px; display: grid; place-items: center; padding: 7px 9px; border: 1px solid rgba(86, 215, 255, .28);
  border-radius: 7px; background: rgba(52, 175, 231, .08); color: #d9f5ff; font: 800 10px ui-monospace, monospace;
  letter-spacing: .06em; cursor: pointer; text-align: center;
}
.save-import-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.save-note { margin: 9px 0; color: #8198ad; }
.save-reset {
  width: 100%; border-color: rgba(238, 67, 83, .30); background: rgba(238, 67, 83, .07); color: #ffc7cc;
}
#save-alert {
  pointer-events: auto; position: absolute; z-index: 76; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 72px);
  transform: translateX(-50%); width: min(calc(100vw - 24px), 390px); padding: 10px; border-radius: 10px;
  display: grid; gap: 8px; color: #ffe6c5; font-size: 11px; line-height: 1.4;
  border-color: rgba(244, 184, 90, .38); background: rgba(25, 17, 8, .96);
}
#save-alert-open { min-height: 36px; border-color: rgba(244, 184, 90, .32); background: rgba(244, 184, 90, .08); color: #ffe2a8; }

#inventory-panel {
  pointer-events: auto;
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: calc(64px + env(safe-area-inset-bottom));
  width: min(92vw, 380px); max-height: 88%; overflow-y: auto; padding: 8px 9px 10px; border-radius: 10px;
  font-size: 10px; color: #9cb0c6;
}
.inv-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.inv-tab {
  min-height: 44px; cursor: pointer; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  background: rgba(255,255,255,.035); color: #9db1c7; font-size: 11px; letter-spacing: .1em;
}
.inv-tab.active { color: #dff8ff; border-color: rgba(86, 215, 255, .48); background: rgba(52, 175, 231, .12); }
.inv-message { margin-top: 7px; color: #f6d27a; font-size: 11px; letter-spacing: .03em; }

/* The build block: what this combination IS, the numbers the resolver will run, and the interactions it actually
   has. The audit found the panel gave every piece of information the same visual weight, so the behaviour never
   dominated; here identity is 12px, numbers 11px, explanations 11px with a left accent, ahead of the slots. */
.inv-build {
  margin-top: 7px; padding: 7px 8px; display: grid; gap: 4px;
  border: 1px solid rgba(86, 215, 255, .22); border-radius: 7px; background: rgba(52, 175, 231, .07);
}
.inv-build-headline { color: #dff8ff; font-size: 12px; letter-spacing: .12em; }
.inv-build-effects { color: #9fc2d8; font-size: 11px; letter-spacing: .03em; }
.inv-build-interaction {
  display: grid; gap: 1px; padding-left: 6px; border-left: 2px solid rgba(86, 215, 255, .4);
}
.inv-build-interaction strong { color: #cfe9f7; font-size: 11px; font-weight: 600; }
.inv-build-interaction span { color: #93a9bd; font-size: 11px; line-height: 1.35; }

/* Skills: the card answers four questions, so the four groups read in order — what it does now (11px, readable),
   the progress line, the gear that changes it (accented), and what the next rank buys. */
.inv-skill-line { display: block; margin-top: 3px; color: #cfe9f7; font-size: 11px; }
.inv-skill-gear {
  display: block; margin-top: 2px; padding-left: 6px; border-left: 2px solid rgba(86, 215, 255, .4);
  color: #9fc2d8; font-size: 11px;
}
.inv-passives { margin-top: 8px; display: grid; gap: 4px; }
.inv-passives-title { color: #dff8ff; font-size: 12px; letter-spacing: .12em; }
.inv-passive { display: grid; gap: 1px; }
.inv-passive strong { color: #cfe9f7; font-size: 11px; font-weight: 600; }
.inv-passive span { color: #93a9bd; font-size: 11px; }

/* Every section below is sized so the whole bag fits one phone screen without scrolling: four equipment slots in a
   single row, a 4x3 grid of 48px cells, one line of materials, and a detail card whose action row is the last
   thing in the panel. Unequipping lives in the detail card (tap a slot to select it) rather than as a control in
   each slot, which is what bought the row back. */
.inv-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.inv-slot { display: flex; gap: 4px; align-items: stretch; }
.inv-slot-body {
  flex: 1; min-width: 0; min-height: 44px; display: grid; gap: 1px; padding: 4px 5px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.03); color: #b7c7d8;
}
.inv-slot-body > span { color: #8fa3ba; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
/* Two lines for the item name: the slots are a quarter of the panel wide, and truncating "Wanderer's Staff" to
   "Wanderer's …" wastes the one thing the player needs to read. */
.inv-slot-body strong {
  color: #dce7f3; font-size: 11px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* The per-slot unequip control and its .inv-clear rule were removed: squeezing a 44px control beside each slot is
   what made the panel taller than a phone screen. Unequip now lives in the slot's detail card. */

.inv-bag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.inv-cell {
  min-height: 48px; padding: 3px; cursor: pointer; text-align: center; line-height: 1.1;
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.03); color: #c3d2e2; font-size: 10px;
}
/* Two lines reserved under every icon, so a long name ("Relic of the Choir") cannot make one row taller than the
   rest — an uneven grid is how a player loses their place while scanning loot. */
.inv-cell > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em;
}
.inv-cell.empty { border-style: dashed; opacity: .4; pointer-events: none; }
.inv-cell.selected { border-color: rgba(86, 215, 255, .48); background: rgba(52, 175, 231, .12); color: #dff8ff; }
/* Icons are 64px canvases drawn at runtime from the item table (see src/ui/itemIcons.ts) — no atlas to ship and
   nothing to keep in step. They are scaled down here, so the art has to survive 40px. */
.inv-icon { display: block; width: 26px; height: 26px; margin: 0 auto 1px; image-rendering: auto; }
.inv-icon.small { display: inline-block; width: 12px; height: 12px; margin: 0 2px 0 0; vertical-align: -2px; }
.inv-detail .inv-icon { float: left; width: 34px; height: 34px; margin: 0 6px 2px 0; }

/* One line of materials: wrapping to a second line cost as much vertical space as a whole bag row. */
.inv-materials { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; margin-top: 6px; }
/* Materials are counters, not controls: no pill chrome, so nothing about them invites a tap that does nothing. */
.inv-material {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 6px; cursor: default;
  color: #b3c4d5; font-size: 10px; letter-spacing: .02em; background: none; border: 0; white-space: nowrap;
}

.inv-detail {
  margin-top: 6px; padding: 6px 7px; display: grid; gap: 3px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 7px; background: rgba(255,255,255,.02);
}
.inv-detail.empty { color: #8fa3ba; font-size: 11px; }
.inv-detail strong { color: #dbe6f2; font-size: 11px; }
.inv-detail-note { color: #8fa3ba; font-size: 11px; }
.inv-lines { display: grid; gap: 1px; }
.inv-lines > span { color: #c3d2e2; font-size: 11px; }
.inv-behaviour { color: #9fd8ef; }

/* This copy's own behaviour: the line that distinguishes two copies of the same item. */
.inv-copy-behaviour {
  margin: 2px 0 4px;
  padding: 4px 6px;
  border-left: 2px solid #9fd8ef;
  background: rgba(159, 216, 239, 0.08);
  color: #cfeaf6;
  font-size: 11px;
  line-height: 1.35;
}
/* The other copy of the same base item, so the choice is made by meaning rather than by number. */
.inv-compare { color: #b9c2c8; font-size: 10px; letter-spacing: .02em; margin-bottom: 4px; }
/* Where this copy came from. Quieter than the behaviour line and above it: the behaviour is what the copy DOES, the
   origin is only where it was found, and a memory must not outrank a mechanic. */
.inv-origin { color: #8fa3ba; font-size: 10px; letter-spacing: .02em; margin: 2px 0 3px; }
/* A copy that carries a behaviour is marked: two cells can share an icon and a name and still differ. */
.inv-cell.variant::after { content: '✦'; position: absolute; top: 3px; right: 4px; font-size: 9px; color: #9fd8ef; }
.inv-cell { position: relative; }
/* Two lines of flavour, not five: the note is the longest text in the panel and the detail card has to fit above a
   pinned action row, so an unclamped paragraph is what pushes the compare line under the buttons. */
.inv-note {
  color: #8ba0b7; font-style: italic; font-size: 10px; line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inv-deltas { display: grid; gap: 1px; }
.inv-delta { font-size: 10px; letter-spacing: .02em; }
/* No .good / .bad: per-copy variations make these sidegrades, and the game does not grade a build decision. */
/* Not pinned: a sticky footer over scrolling content always covers whatever sits at the panel's bottom edge, which
   here is the comparison lines — the one thing that answers "is this better?". The whole panel fits one screen. */
.inv-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 2px; padding-top: 4px;
}
.inv-actions.single { grid-template-columns: 1fr; }
.inv-actions button, .inv-salvage-all {
  min-height: 44px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  background: rgba(255,255,255,.04); color: #9fb2c8; font-size: 10px; letter-spacing: .08em;
}
.inv-actions button:first-child { color: #cfe9d8; border-color: rgba(86, 255, 168, .35); }
/* Salvage destroys the item permanently and sits one thumb-width from Equip, so it is styled as the dangerous
   choice rather than as a neutral partner. */
.inv-actions button:last-child {
  color: #f0a7ae; border-color: rgba(240,114,127,.3); background: rgba(240,114,127,.06);
}
/* An armed salvage is a loaded action: louder than the resting danger colour, so the second tap is a decision
   rather than a repeat of the first. */
.inv-actions button.armed {
  color: #fff0f2; border-color: rgba(240, 114, 127, .85); background: rgba(240, 114, 127, .22);
}

.inv-recipes { display: grid; gap: 4px; margin-top: 6px; }
/* Text column beside a fixed 84px button: eight recipes have to fit one phone screen, and a full-width button per
   row was most of what made the list twice a screen tall. */
.inv-recipe {
  display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
  padding: 5px 6px; border: 1px solid rgba(255,255,255,.10); border-radius: 7px; background: rgba(255,255,255,.02);
}
.inv-recipe-body { display: grid; gap: 1px; min-width: 0; }
.inv-recipe-head strong { color: #dbe6f2; font-size: 11px; line-height: 1.15; }
.inv-costs { display: flex; flex-wrap: wrap; gap: 3px; }
.inv-cost { padding: 1px 4px; border-radius: 8px; background: rgba(255,255,255,.04); color: #a9bccd; font-size: 10px; }
.inv-cost.short { color: #f0727f; background: rgba(238, 67, 83, .10); }
.inv-cost.slot { background: none; color: #70869f; padding-left: 0; }
.inv-recipe-note {
  color: #8fa3ba; font-size: 10px; font-style: italic; line-height: 1.2; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.inv-recipe button {
  min-width: 84px; min-height: 44px; cursor: pointer; border: 1px solid rgba(86, 255, 168, .30); border-radius: 6px;
  background: rgba(255,255,255,.04); color: #cfe9d8; font-size: 10px; letter-spacing: .08em;
}
.inv-recipe button:disabled { cursor: not-allowed; border-color: rgba(255,255,255,.10); color: #5f7389; }
.inv-salvage-all { width: 100%; margin-top: 6px; color: #e8c9a0; border-color: rgba(255, 186, 84, .35); }

.inv-skills { display: grid; gap: 9px; margin-top: 9px; }
.inv-skill { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 7px; background: rgba(255,255,255,.02); }
.inv-skill-head { display: flex; justify-content: space-between; align-items: baseline; }
.inv-skill-head strong { color: #dbe6f2; font-size: 11px; }
.inv-skill-head span { color: #92a5bc; font-size: 10px; letter-spacing: .05em; }
.bar.skill span { background: linear-gradient(90deg, #2b6f8f, #55d9ff 70%, #b9f7ff); box-shadow: 0 0 10px rgba(85, 217, 255, .30); }

/* The ending's reward beat: the run is over, and this is the receipt before the summary's record. Same glass sheet as
   the summary on purpose — it replaces it, so it must read as the same surface rather than a second, competing UI. */
#reward-beat {
  pointer-events: auto;
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 22px; text-align: center;
}
.rb-content { display: flex; flex-direction: column; gap: 10px; width: min(86vw, 340px); }
.rb-content small { color: #b19b78; letter-spacing: .26em; font-size: 9px; }
.rb-title { color: #e9d7b4; font-family: Georgia, serif; font-size: clamp(19px, 5vw, 26px); letter-spacing: .08em; }
.rb-rows { display: grid; gap: 8px; margin-top: 4px; text-align: left; }
.rb-section { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.rb-section-title { color: #667d97; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; }
.rb-line { color: #cbd9e8; font-size: 11px; }
.rb-warning { color: #f0a86a; font-size: 9.5px; line-height: 1.35; }
#reward-beat-continue {
  min-width: 200px; min-height: 48px; cursor: pointer; border-radius: 9px;
  border: 1px solid rgba(255, 186, 84, .5); background: rgba(255, 170, 40, .12);
  color: #ffe6b0; font: 800 11px ui-monospace, monospace; letter-spacing: .14em;
}

/* Run summary: full-screen glass sheet over the faded chamber. */
#run-summary {
  pointer-events: auto;
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 22px; text-align: center;
}
/*
 * BOTH end-of-run sheets, and the rule that keeps them on a phone.
 *
 * Neither bounds its own height: the content is a variable-length list (a receipt, or a summary with up to a dozen
 * sections) and a centred flex container clips its overflowing child at BOTH ends with no way to scroll — the top
 * lines and the button simply vanish. Rather than guess how many lines fit (which this project forbids: a layout is
 * proven by measurement, not by estimates of line height), the content is made to shrink and scroll instead:
 * `flex: 0 1 auto` + `min-height: 0` lets the list take what is left and scroll inside itself, while the action
 * stays `flex: 0 0 auto` so the primary button is ALWAYS on screen. A footer pinned over scrollable content is
 * forbidden for the same reason it is tempting — it would cover the line answering "is this better?".
 *
 * The pixel answer (how many lines are visible before scrolling) is deliberately NOT asserted here: that needs a
 * browser, and browser automation in this project is the owner's call. This removes the failure class; the device
 * check still owns the fit.
 */
.rb-content, .rs-content { flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#reward-beat-continue, #run-summary-continue { flex: 0 0 auto; }
.rs-content { display: flex; flex-direction: column; gap: 10px; width: min(86vw, 340px); }
.rs-content small { color: #b19b78; letter-spacing: .26em; font-size: 9px; }
.rs-title { color: #e9d7b4; font-family: Georgia, serif; font-size: clamp(19px, 5vw, 26px); letter-spacing: .08em; }
.rs-rows { display: grid; gap: 8px; margin-top: 4px; color: #9cb0c6; font-size: 10px; text-align: left; }
.rs-row { display: flex; justify-content: space-between; align-items: baseline; }
.rs-row span { color: #667d97; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.rs-row strong { color: #d5e0ec; font-size: 12px; }
.rs-section { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.rs-section-title { color: #667d97; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; }
.rs-line { color: #b7c7d8; font-size: 10px; }
.rs-none { color: #5f7389; font-size: 9px; font-style: italic; }
.rs-lifetime { color: #7289a5; font-size: 9px; letter-spacing: .05em; }
.rs-next { color: #cbd9e8; font-size: 9.5px; line-height: 1.35; }
#run-summary-continue {
  min-width: 200px; min-height: 48px; cursor: pointer; border-radius: 9px;
  border: 1px solid rgba(255, 186, 84, .5); background: rgba(255, 170, 40, .12);
  color: #ffe6b0; font: 800 11px ui-monospace, monospace; letter-spacing: .14em;
}

#touch-stick {
  position: absolute; z-index: 60; width: 74px; height: 74px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(130, 184, 225, .24); background: rgba(30, 72, 104, .09);
  box-shadow: inset 0 0 20px rgba(79, 171, 222, .09); pointer-events: none;
}
#touch-knob { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(113, 202, 255, .25); border: 1px solid rgba(145, 222, 255, .48); box-shadow: 0 0 15px rgba(89, 191, 255, .24); }

#enemy-bars { position: absolute; inset: 0; pointer-events: none; }
.enemy-bar {
  position: absolute; width: 34px; height: 4px; transform: translate(-50%, -100%);
  background: rgba(0,0,0,.64); border: 1px solid rgba(255,255,255,.10); overflow: hidden;
}
.enemy-bar span { display: block; width: 100%; height: 100%; transform-origin: left; background: #e74250; }
.enemy-bar.role-shield { width: 42px; }
.enemy-bar.role-shield span { background: #f58b52; }
.enemy-bar.role-caster span { background: #ab62ff; }

#damage-vignette, #cinematic-vignette { position: absolute; inset: 0; pointer-events: none; }
#damage-vignette { opacity: 0; background: radial-gradient(circle, transparent 45%, rgba(191, 8, 29, .32)); transition: opacity .08s linear; }
#damage-vignette.show { opacity: 1; }
#cinematic-vignette { box-shadow: inset 0 0 95px rgba(0, 6, 18, .50), inset 0 -70px 100px rgba(0,0,0,.16); }
/* Chamber transitions. Opacity is written every frame by ChamberSequence, so there is deliberately no CSS
   transition here: two systems animating one property is how a fade ends up fighting itself. */
#chamber-fade { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, #0b1524 0%, #060a12 62%, #02040a 100%); }

#startup {
  position: absolute; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 44%, #102342 0%, #07111f 45%, #030711 100%);
}
.startup-card { text-align: center; color: #8da2ba; letter-spacing: .08em; }
.startup-card strong { display: block; margin-top: 10px; color: #e9d7b4; font-family: Georgia, serif; letter-spacing: .12em; font-size: 17px; }
.startup-card span { display: block; margin-top: 7px; font-size: 10px; }
.startup-rune { font-size: 42px; color: var(--ice); text-shadow: 0 0 30px rgba(64, 200, 255, .8); animation: pulse 1.4s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.1) rotate(12deg); opacity: .7; } }

#fatal {
  position: absolute; z-index: 200; inset: 8%; margin: 0; padding: 18px; overflow: auto;
  white-space: pre-wrap; background: rgba(27, 6, 10, .96); border: 1px solid rgba(255, 86, 100, .4); color: #ffc7cc; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#build-marker { position: absolute; z-index: 300; left: 8px; bottom: 6px; color: rgba(173, 195, 218, .55); font: 9px ui-monospace, monospace; pointer-events: none; transition: opacity .5s ease; }

[hidden] { display: none !important; }

@media (max-width: 450px) {
  #status-panel { width: 55vw; }
  .portrait { width: 45px; height: 45px; }
  #chapter-title { top: max(80px, calc(env(safe-area-inset-top) + 69px)); }
  #hint { bottom: calc(126px + env(safe-area-inset-bottom)); font-size: 9px; }
}

.benchmark-panel {
  pointer-events: auto;
  position: absolute;
  z-index: 80;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  top: calc(max(10px, env(safe-area-inset-top)) + 145px);
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(3, 9, 18, .92);
  color: #a8bdd2;
  font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.benchmark-panel strong { color: #d9ebfb; letter-spacing: .08em; }
.benchmark-panel pre { margin: 7px 0; white-space: pre-wrap; color: #a8bdd2; font: inherit; }
.benchmark-download {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(85, 217, 255, .4);
  border-radius: 5px;
  color: #b9f7ff;
  text-decoration: none;
  font-weight: 800;
}


/* Visual Foundation — mobile presentation convergence.
   Functional layout stays intact; these rules improve hierarchy/readability at the shipping portrait framing. */
#status-panel,
#minimap-panel,
#loot-counter {
  background: linear-gradient(180deg, rgba(7, 16, 30, .90), rgba(4, 10, 21, .82));
  border-color: rgba(205, 220, 240, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.26);
}
#status-panel .portrait {
  border-color: rgba(239, 176, 91, .56);
  box-shadow: inset 0 0 20px rgba(55, 180, 231, .08), 0 0 18px rgba(0,0,0,.24);
}
#status-panel .status-line strong {
  letter-spacing: .13em;
  text-shadow: 0 1px 12px rgba(0,0,0,.72);
}

#inventory-panel {
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 390px);
  max-height: min(74vh, 650px);
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(8, 17, 31, .97), rgba(5, 11, 23, .96)),
    radial-gradient(circle at 50% 0%, rgba(71, 181, 224, .09), transparent 42%);
  border: 1px solid rgba(155, 190, 221, .22);
  box-shadow: 0 20px 52px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}
.inv-tabs { gap: 6px; }
.inv-tab {
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #8fa4bc;
  border-color: rgba(255,255,255,.10);
}
.inv-tab.active {
  color: #e6f8ff;
  border-color: rgba(86, 215, 255, .55);
  background: linear-gradient(180deg, rgba(66, 190, 235, .16), rgba(25, 103, 145, .08));
  box-shadow: inset 0 0 18px rgba(74, 198, 240, .08);
}
.inv-slot-body,
.inv-cell,
.inv-detail,
.inv-recipe,
.inv-skill {
  background: rgba(255,255,255,.025);
  border-color: rgba(197, 216, 235, .10);
}
.inv-cell.selected,
.inv-slot-body:focus-visible,
.inv-cell:focus-visible {
  border-color: rgba(89, 216, 255, .58);
  box-shadow: 0 0 0 1px rgba(89, 216, 255, .14), inset 0 0 18px rgba(47, 172, 221, .08);
}
#bag-toggle.active {
  color: #e5f9ff;
  border-color: rgba(86, 215, 255, .55);
  background: rgba(7, 25, 39, .92);
}

.enemy-bar {
  width: 38px;
  height: 5px;
  border-radius: 999px;
  background: rgba(2,5,10,.78);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 2px 7px rgba(0,0,0,.70);
}
.enemy-bar span {
  border-radius: inherit;
  background: linear-gradient(90deg, #d93446, #fa5361);
}
.enemy-bar.role-shield { width: 44px; }
.enemy-bar.role-shield span { background: linear-gradient(90deg, #d86a39, #ff9c58); }
.enemy-bar.role-caster span { background: linear-gradient(90deg, #803be5, #c774ff); }

#ability-cluster .ability {
  box-shadow: inset 0 0 20px rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.28);
}
#ability-cluster .ability.ice.ready {
  box-shadow: inset 0 0 24px rgba(58, 207, 255, .10), 0 0 20px rgba(46, 194, 255, .10);
}
#ability-cluster .ability.blink.ready {
  box-shadow: inset 0 0 22px rgba(166, 91, 255, .09), 0 0 18px rgba(134, 76, 255, .09);
}

/* --- The character's own passives: a separate block from the gear-driven list above, because the two answer
   different questions. Colours follow the existing scale: equipped reads as live, available as pressable,
   locked as dimmed. Nothing here carries a stat, so nothing here needs a number colour. --- */
.inv-char-passives { margin-top: 10px; display: grid; gap: 6px; }
.inv-char-passive {
  display: grid; gap: 3px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid #23303d; background: #131b24;
}
.inv-char-passive.equipped { border-color: #4a9fd8; background: #16222e; }
.inv-char-passive.available { border-color: #2f4256; }
.inv-char-passive.locked { opacity: .72; }
.inv-char-passive-head { display: flex; align-items: center; gap: 8px; }
.inv-char-passive-head strong { color: #dff8ff; font-size: 12px; font-weight: 600; }
.inv-char-passive-tag {
  color: #0d1a12; background: #6fd39a; border-radius: 4px;
  font-size: 9px; letter-spacing: .1em; padding: 1px 5px;
}
.inv-char-passive-action {
  margin-left: auto; cursor: pointer; border-radius: 4px;
  border: 1px solid #3d6b8c; background: #1b2a37; color: #cfe9f7;
  font-size: 10px; letter-spacing: .08em; padding: 3px 9px;
}
.inv-char-passive-action:hover { background: #24384a; }

/*
  WHICH VERSION OF THE ROUTE.
  Sits above the ability cluster, full-width and thumb-reachable, because on a phone the choice has to be tappable
  without a URL bar. Three states matter and nothing else: the current tier (marked), a tier you can switch to, and
  nothing at all when only one tier exists (`hidden` is set from the script in that case).
*/
#tier-picker {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 5px; border-radius: 10px;
  max-width: min(94vw, 420px);
}
#tier-picker[hidden] { display: none !important; }
#tier-picker button {
  flex: 1 1 0; min-width: 0; min-height: 34px; padding: 4px 8px;
  border-radius: 7px; border: 1px solid rgba(226, 188, 112, .30);
  background: rgba(6, 14, 26, .55); color: #cfd8e6;
  font: inherit; font-size: 11px; line-height: 1.15; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#tier-picker button.active {
  border-color: rgba(247, 211, 118, .85);
  background: rgba(247, 211, 118, .14);
  color: #f7d376;
  font-weight: 600;
  box-shadow: inset 0 0 12px rgba(247, 211, 118, .12);
}
@media (max-width: 420px) {
  #tier-picker button { font-size: 10px; padding: 4px 5px; }
}

/* -------------------------------------------------------------------------------------------------------------
 * Character Hub foundation - mobile-first information architecture.
 *
 * This block intentionally overrides the older floating inventory sheet without deleting its established component
 * styles. BUILD / ITEMS / SKILLS / CRAFT are stable destinations; the content pane scrolls independently while the
 * header and primary navigation stay reachable. Visual polish is deliberately restrained: this is the durable
 * interaction skeleton, not the final art pass.
 */
#hud.inventory-open > :not(#inventory-panel) {
  visibility: hidden;
  pointer-events: none !important;
}

#inventory-panel {
  visibility: visible;
  pointer-events: auto;
  position: absolute;
  z-index: 70;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 0;
  background: rgba(5, 11, 23, .985);
  backdrop-filter: blur(14px);
}

.inv-hub-head { flex: 0 0 auto; }
.inv-hub-head-inner {
  min-height: 50px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 66px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(197, 216, 235, .10);
  padding-bottom: 7px;
}
.inv-hub-copy { min-width: 0; display: grid; gap: 1px; }
.inv-hub-copy span { color: #657d96; font-size: 8px; letter-spacing: .18em; }
.inv-hub-copy strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #e3edf7; font-size: 13px; letter-spacing: .12em;
}
.inv-back,
.inv-hub-close {
  min-height: 44px; border: 1px solid rgba(197,216,235,.12); border-radius: 7px;
  background: rgba(255,255,255,.025); color: #a9bdd1; cursor: pointer;
}
.inv-back { font-size: 24px; line-height: 1; }
.inv-back[hidden] { visibility: hidden; display: block !important; }
.inv-hub-close { font-size: 9px; letter-spacing: .08em; }

.inv-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 1px 8px;
}

.inv-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(197,216,235,.10);
}
.inv-tab { min-height: 48px; padding: 0 4px; font-size: 9px; letter-spacing: .08em; }

.inv-library-toolbar { display: grid; gap: 7px; margin: 2px 0 8px; }
.inv-search,
.inv-sort {
  width: 100%; min-height: 44px; border: 1px solid rgba(197,216,235,.13); border-radius: 8px;
  background: rgba(255,255,255,.025); color: #d4e0ec; font: inherit;
}
.inv-search { padding: 0 11px; font-size: 12px; }
.inv-search::placeholder { color: #667d95; }
.inv-scopes { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.inv-scopes::-webkit-scrollbar { display: none; }
.inv-scope {
  flex: 0 0 auto; min-height: 38px; padding: 0 11px; border: 1px solid rgba(197,216,235,.11); border-radius: 999px;
  background: rgba(255,255,255,.02); color: #8fa4bb; font-size: 10px; cursor: pointer;
}
.inv-scope.active { color: #dff8ff; border-color: rgba(86,215,255,.45); background: rgba(52,175,231,.10); }
.inv-sort-wrap { display: grid; grid-template-columns: auto minmax(100px, 150px); gap: 8px; align-items: center; justify-content: end; }
.inv-sort-wrap > span { color: #667d95; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.inv-sort { min-height: 38px; padding: 0 8px; font-size: 10px; }

.inv-collection-meta {
  min-height: 28px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: #71869d; font-size: 9px; letter-spacing: .04em;
}
.inv-collection-meta strong { color: #aebfd0; font-size: 9px; font-weight: 600; }
.inv-library-results { margin-top: 4px; }
.inv-load-more {
  width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid rgba(197,216,235,.12); border-radius: 8px;
  background: rgba(255,255,255,.025); color: #9fb4c9; font-size: 9px; letter-spacing: .08em; cursor: pointer;
}
.inv-empty {
  grid-column: 1 / -1; padding: 20px 12px; border: 1px dashed rgba(197,216,235,.12); border-radius: 8px;
  color: #71869d; font-size: 11px; line-height: 1.45; text-align: center;
}

.inv-build-section { margin-top: 10px; display: grid; gap: 6px; }
.inv-section-title { color: #dff8ff; font-size: 11px; letter-spacing: .12em; }
.inv-build-links { display: grid; gap: 5px; }
.inv-build-links.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-build-link {
  min-height: 52px; display: grid; gap: 2px; padding: 7px 8px; text-align: left; cursor: pointer;
  border: 1px solid rgba(197,216,235,.10); border-radius: 7px; background: rgba(255,255,255,.025); color: #a8bbcd;
}
.inv-build-link strong { color: #d9e6f1; font-size: 11px; }
.inv-build-link span { color: #7f94aa; font-size: 9px; line-height: 1.3; }

.inv-bag { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.inv-cell {
  min-height: 82px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px; padding: 5px 3px;
}
.inv-cell > small { color: #667d95; font-size: 8px; letter-spacing: .03em; }
.inv-cell.equipped { border-color: rgba(86,215,255,.34); background: rgba(52,175,231,.07); }
.inv-icon { width: 30px; height: 30px; }

.inv-picker-current {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 2px 0 8px; padding: 8px 9px; border: 1px solid rgba(197,216,235,.10); border-radius: 7px;
  background: rgba(255,255,255,.02);
}
.inv-picker-current span { color: #71869d; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.inv-picker-current strong { color: #d8e6f2; font-size: 11px; text-align: right; }

.inv-entity-detail { margin: 2px 0 8px; padding: 11px; gap: 7px; }
.inv-detail-title { color: #e4eef7 !important; font-size: 15px !important; letter-spacing: .04em; }
.inv-detail-hero-icon { width: 54px; height: 54px; margin-bottom: 1px; }
.inv-actions { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 7px; }
.inv-primary-action,
.inv-secondary-action,
.inv-related-link,
.inv-craft-action,
.inv-salvage-all {
  min-height: 46px; border-radius: 7px; cursor: pointer;
}
.inv-primary-action,
.inv-actions .inv-primary-action { color: #cfe9d8; border: 1px solid rgba(86,255,168,.32); background: rgba(86,255,168,.045); }
.inv-secondary-action,
.inv-actions .inv-secondary-action { color: #aebfd0; border: 1px solid rgba(197,216,235,.14); background: rgba(255,255,255,.025); }
.inv-related-link {
  width: 100%; margin-top: 4px; border: 1px solid rgba(86,215,255,.20); background: rgba(52,175,231,.045);
  color: #9fcfe1; font-size: 9px; letter-spacing: .08em;
}
.inv-bulk-actions { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(197,216,235,.08); }
.inv-salvage-all:disabled { opacity: .4; cursor: default; }

.inv-library-row { width: 100%; text-align: left; cursor: pointer; color: inherit; }
.inv-skills { gap: 6px; }
.inv-skill.inv-library-row,
.inv-char-passive.inv-library-row { min-height: 62px; padding: 8px 9px; }
.inv-char-passive-head > span { margin-left: auto; color: #71869d; font-size: 9px; letter-spacing: .06em; }
.inv-passives { margin-top: 0; }

.inv-recipes { gap: 6px; }
.inv-recipe {
  width: 100%; min-height: 62px; display: block; padding: 7px 8px; text-align: left; cursor: pointer;
  border: 1px solid rgba(197,216,235,.10); border-radius: 7px; background: rgba(255,255,255,.025); color: inherit;
}
.inv-recipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inv-recipe-state { color: #7f94aa; font-size: 8px; letter-spacing: .08em; }
.inv-recipe-state.craftable { color: #8fd4ac; }
.inv-recipe-note { margin-top: 2px; }
.inv-requirements { margin-top: 6px; display: grid; gap: 4px; }
.inv-requirements > strong { color: #91a8bc; font-size: 9px; letter-spacing: .10em; }
.inv-requirement { display: flex; justify-content: space-between; gap: 12px; color: #aebfd0; font-size: 11px; }
.inv-requirement.short strong { color: #f08791; }
.inv-craft-action { width: 100%; margin-top: 6px; }
.inv-craft-action:disabled { opacity: .45; cursor: not-allowed; }
.inv-materials-summary { margin: 1px 0 9px; overflow-x: auto; }

@media (min-width: 520px) {
  .inv-bag { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* Early Public Test public identity / trust surface. This is release plumbing, not a gameplay HUD feature. */
.startup-release {
  color: #7f96ad !important;
  font: 800 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
}

#test-info-toggle {
  pointer-events: auto;
  position: absolute;
  left: calc(max(14px, env(safe-area-inset-left)) + 180px);
  bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 52px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  color: #cfe0f2;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: .12em;
  cursor: pointer;
}
#test-info-toggle.active { color: #9fe8ff; border-color: rgba(86, 215, 255, .48); }

#test-info-panel {
  pointer-events: auto;
  position: absolute;
  z-index: 78;
  inset: 0;
  padding:
    max(16px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow-y: auto;
  color: #a9bed2;
  background: rgba(5, 11, 23, .99);
  backdrop-filter: blur(16px);
  font-size: 12px;
  line-height: 1.5;
}
.test-info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(197,216,235,.12);
}
.test-info-head > div { display: grid; gap: 2px; }
.test-info-head small { color: #738aa1; font: 800 8px ui-monospace, monospace; letter-spacing: .14em; }
.test-info-head strong { color: #edf6ff; font: 600 22px Georgia, serif; letter-spacing: .11em; }
#test-info-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(197,216,235,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #c5d5e4;
  cursor: pointer;
}
#test-info-panel > p { margin: 14px 0; color: #cbd9e5; }
.test-info-section {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(197,216,235,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}
.test-info-section > strong {
  color: #dff8ff;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: .10em;
}
.test-community-link,
#test-report-copy {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(86,215,255,.28);
  border-radius: 8px;
  background: rgba(52,175,231,.07);
  color: #d9f5ff;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}
.test-community-link.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
#test-report-status { min-height: 18px; color: #91a8bc; font-size: 10px; }

@media (max-width: 350px) {
  #test-info-toggle {
    left: calc(max(14px, env(safe-area-inset-left)) + 176px);
    min-width: 48px;
    padding: 0 6px;
  }
}