/* Saltwake — full-window layout, minimal HUD, and ARPG menu screens (gold-serif warm theme). */
:root { --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --frame-gold: #b8934f; }
html, body { height: 100%; overflow: hidden; }
body { padding: 0; display: block; background: #050505; }
#app { display: block; max-width: none; width: 100vw; height: 100vh; position: relative; }
#legacy-ui, #hud-bottom #help { display: none !important; }

/* Game view: 16:9, as large as the window allows, centered (letterboxed). */
#game-wrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden; align-self: auto;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }

/* ── Minimal HUD ── */
#hud-tide {
  position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; pointer-events: none;
}
#hud-tide #clock-panel {
  font-size: 0.9rem; gap: 0.6rem; padding: 0.25rem 0.9rem;
  background: linear-gradient(180deg, rgba(24, 20, 14, 0.82), rgba(10, 10, 12, 0.78));
  border: 1px solid rgba(184, 147, 79, 0.55); border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 #000;
}
#hud-tide #gate-status { font-size: 0.7rem; max-width: 18rem; }
#hud-tide #landmark-label { font-size: 0.7rem; }
#hud-tide .objective-chip { font-size: 0.72rem; max-width: 30rem; }
body.tide-warn #hud-tide #clock-panel { border-color: #d29922; }
body.tide-flood #hud-tide #clock-panel { border-color: #da3633; box-shadow: 0 0 14px rgba(218, 54, 51, 0.45); }

#hud-minimap {
  position: absolute; top: 0.6rem; right: 0.7rem; z-index: 6; width: 9.5rem; height: 9.5rem; pointer-events: none;
}
#minimap {
  width: 100%; height: 100%; border-radius: 50%; image-rendering: auto;
  border: 3px solid #6b5631; box-shadow: 0 0 0 2px #1a140c, 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 0 12px #000;
  background: #14120d; opacity: 0.92;
}
#minimap-label {
  position: absolute; left: 50%; bottom: -0.5rem; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--serif); font-size: 0.68rem; color: #f1e2b8; letter-spacing: 0.04em;
  background: rgba(14, 11, 8, 0.9); border: 1px solid #6b5631; border-radius: 3px; padding: 0 0.45rem;
}

#hud-menu-hints {
  position: absolute; right: 0.8rem; bottom: 0.5rem; z-index: 6; display: flex; gap: 0.7rem;
  font-size: 0.66rem; color: rgba(233, 222, 196, 0.65); pointer-events: none; text-shadow: 0 1px 0 #000;
}
#hud-menu-hints kbd, #interact-prompt kbd, .ctl-table kbd {
  display: inline-block; min-width: 1.3em; padding: 0 0.3em; border: 1px solid #6b5631; border-bottom-width: 2px;
  border-radius: 3px; background: #1c1812; color: #f0dca8; font: 700 0.85em/1.4 ui-sans-serif, system-ui, sans-serif; text-align: center;
}
body.pad-mode #hud-menu-hints { display: none; }

#interact-prompt {
  position: absolute; left: 50%; bottom: 7.6rem; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 0.3rem 0.9rem; border-radius: 4px; font-size: 0.85rem; color: #f3e6c4;
  background: linear-gradient(180deg, rgba(36, 28, 16, 0.92), rgba(14, 12, 10, 0.92));
  border: 1px solid #b8934f; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); white-space: nowrap;
  animation: prompt-in 0.18s ease-out;
}
#interact-prompt b { color: #ffd98a; font-family: var(--serif); }
#interact-prompt[hidden] { display: none; }
@keyframes prompt-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Action bar: overlay across the bottom, orbs flanking the skills. */
#action-bar {
  position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); z-index: 5;
  width: min(46rem, 74%); margin: 0; padding: 0.35rem 0.6rem;
  grid-template-columns: 5.6rem minmax(0, 1fr) 5.6rem; gap: 0.6rem;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0.55), rgba(12, 13, 16, 0.86));
  border-radius: 1.2rem 1.2rem 0.5rem 0.5rem;
}
#action-bar .orb { width: 5.4rem; height: 5.4rem; margin-top: -1.6rem; }
#action-bar .ab-slot { min-height: 2.6rem; }
#toast-stack { top: 5.2rem; } /* below the top bar + goal chip */
#loot-feed { bottom: 7.6rem; left: 0.8rem; }
#msg-banner { top: 31%; } /* clear of the toast stack under the goal chip */
body.menu-open #action-bar, body.menu-open #hud-tide, body.menu-open #hud-minimap,
body.menu-open #hud-menu-hints, body.menu-open #loot-feed, body.menu-open #interact-prompt { opacity: 0; pointer-events: none; }
body.menu-open #toast-stack { z-index: 80; }
#item-tip { z-index: 400; }

/* Debug bar: only with ?debug, small drawer at the top-left. */
#hud-bottom { display: none; }
body.debug #hud-bottom {
  display: block; position: fixed; left: 0.4rem; top: 0.4rem; z-index: 90; padding: 0.2rem; opacity: 0.35;
  max-width: 40vw; background: rgba(0, 0, 0, 0.6); border-radius: 4px;
}
body.debug #hud-bottom:hover { opacity: 1; }
body.debug #debug-bar button { font-size: 0.6rem; padding: 0.1rem 0.3rem; }

/* Old overlays are replaced by screens. */
#class-picker-overlay, #lattice-overlay, #help-overlay { display: none !important; }

/* ════════ Screens ════════ */
#screens { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.screen {
  position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10, 9, 7, 0.55) 0%, rgba(4, 4, 4, 0.88) 75%),
    rgba(0, 0, 0, 0.35);
  animation: scr-in 0.16s ease-out;
}
.screen[hidden] { display: none; }
@keyframes scr-in { from { opacity: 0; } to { opacity: 1; } }

.menu-frame {
  width: 94%; height: 92%; display: flex; flex-direction: column; position: relative;
  background:
    linear-gradient(180deg, rgba(58, 44, 24, 0.22), rgba(0, 0, 0, 0) 18%),
    linear-gradient(180deg, #17140f, #0d0c0b 70%, #0a0909);
  border: 1px solid #3c2f1c; outline: 1px solid rgba(184, 147, 79, 0.55); outline-offset: -5px;
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, 0.75), inset 0 0 60px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.menu-frame::before, .menu-frame::after {
  content: ""; position: absolute; width: 1.4rem; height: 1.4rem; border: 2px solid var(--frame-gold); pointer-events: none;
}
.menu-frame::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.menu-frame::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.menu-head {
  display: flex; align-items: center; gap: 1.2rem; padding: 0.7rem 1.2rem 0.55rem;
  border-bottom: 1px solid rgba(184, 147, 79, 0.28);
  background: linear-gradient(90deg, rgba(184, 147, 79, 0.08), rgba(0, 0, 0, 0) 60%);
}
.menu-title { font-family: var(--serif); font-size: 1.45rem; color: #ecd398; letter-spacing: 0.06em; text-shadow: 0 2px 0 #000; display: flex; align-items: baseline; gap: 0.8rem; }
.menu-sub { font-size: 0.78rem; color: #9a9384; letter-spacing: 0.02em; font-style: italic; }
.menu-tabs { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; margin-right: auto; }
.menu-tab, .subtab {
  font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.05em; color: #b9ad92;
  background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 0.25rem 1rem; position: relative;
}
.menu-tab.active, .subtab.active { color: #ffe3a3; border-color: rgba(184, 147, 79, 0.6); background: linear-gradient(180deg, rgba(184, 147, 79, 0.2), rgba(184, 147, 79, 0.04)); }
.menu-tab:hover, .subtab:hover { color: #f3dfae; background: rgba(184, 147, 79, 0.08); border-color: rgba(184, 147, 79, 0.3); }
.tab-badge { display: inline-block; margin-left: 0.4rem; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: #c2412d; color: #fff; font: 700 0.65rem/1.2rem ui-sans-serif, system-ui, sans-serif; vertical-align: middle; }
.tab-key { font-size: 0.65rem; color: #7d745f; padding: 0 0.3rem; }
.menu-close { margin-left: auto; background: transparent; border: 1px solid rgba(184, 147, 79, 0.35); color: #cdb987; width: 2rem; height: 2rem; padding: 0; }
.menu-tabs + .menu-close { margin-left: 0; }
.menu-body { flex: 1; min-height: 0; overflow: auto; padding: 0.8rem 1.1rem; scrollbar-color: #4a3c24 transparent; }
.menu-foot { display: flex; gap: 1.4rem; justify-content: center; padding: 0.45rem 1rem 0.55rem; border-top: 1px solid rgba(184, 147, 79, 0.2); font-size: 0.74rem; color: #a99f88; }
.hint { display: inline-flex; align-items: center; gap: 0.35rem; }
.k-pad { display: none; }
body.pad-mode .k-pad { display: inline-flex; }
body.pad-mode .k-kb { display: none; }
.kb { padding: 0 0.35rem; border: 1px solid #5a4a2e; border-bottom-width: 2px; border-radius: 3px; background: #1c1812; color: #f0dca8; font-weight: 700; font-size: 0.7rem; }

/* Controller glyphs */
.g { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.25rem; border-radius: 999px; font: 800 0.66rem/1 ui-sans-serif, system-ui, sans-serif; color: #111; background: #ccc; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }
.g-A { background: #5fc35a; } .g-B { background: #e0574a; color: #fff; } .g-X { background: #4f8fe6; color: #fff; } .g-Y { background: #e7c341; }
.g-LB, .g-RB, .g-LT, .g-RT, .g-LS, .g-RS, .g-st, .g-dp, .g-◀▶ { background: #3a3a40; color: #eee; border-radius: 4px; }

/* Panels */
.mpanel {
  background: linear-gradient(180deg, rgba(30, 26, 20, 0.85), rgba(16, 15, 13, 0.9));
  border: 1px solid #3a3022; border-radius: 4px; padding: 0.6rem 0.75rem 0.75rem; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.05);
}
.mpanel + .mpanel { margin-top: 0.7rem; }
.mpanel-title { font-family: var(--serif); font-size: 0.95rem; color: #d9b56a; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(184, 147, 79, 0.2); }
.mpanel-title .muted { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0; margin-left: 0.4rem; }
.muted.pad { padding: 0.4rem 0.2rem; line-height: 1.45; font-size: 0.78rem; }
.muted.center, .center { text-align: center; }
.quote { font-family: var(--serif); font-style: italic; font-size: 0.9rem !important; color: #b8ad95; }

/* Focus ring (controller + hover) */
.nav-focus { outline: 2px solid #ffd98a !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 217, 138, 0.18), 0 0 18px rgba(255, 200, 110, 0.35) !important; z-index: 2; }

/* Buttons */
.menu-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; width: 100%;
  padding: 0.55rem 1.2rem; border: 1px solid #4a3c26; border-radius: 3px;
  background: linear-gradient(180deg, #2a241b, #17140f); color: #ecdcb4; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.06em;
}
.menu-btn:hover:not([disabled]) { border-color: #b8934f; background: linear-gradient(180deg, #3a3021, #1d1912); }
.menu-btn .mb-sub { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.68rem; color: #9a9384; letter-spacing: 0; }
.menu-btn.primary { border-color: #8a6a34; color: #ffe3a3; }
.menu-btn.danger { border-color: #7a2f22; color: #ffb3a0; }
.menu-btn.small { font-size: 0.8rem; padding: 0.3rem 0.8rem; margin-top: 0.5rem; width: auto; align-self: center; }
.menu-btn[disabled] { opacity: 0.4; }

/* Item cells */
.icell {
  --hue: #6b6455; position: relative; width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hue) 20%, #1b1813) 0%, #0f0e0c 75%);
  border: 1px solid color-mix(in srgb, var(--hue) 70%, #000);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.6);
}
.icell .icon { width: 72%; height: 72%; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); pointer-events: none; }
.icell .icon.ghost { opacity: 0.28; filter: grayscale(1); }
.icell.empty, .icell.blank { --hue: #2c271f; background: #0e0d0b; }
.icell.blank { cursor: default; opacity: 0.55; }
.icell:hover:not(.blank) { border-color: var(--hue); }
.icell.hue-orange, .icell.hue-mythic, .icell.hue-tidemark, .icell.hue-green { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0 0 10px color-mix(in srgb, var(--hue) 45%, transparent); }
.icell.hue-tidemark { animation: chase-glow 2.2s ease-in-out infinite; }
@keyframes chase-glow { 50% { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0 0 18px var(--hue); } }
.icell .badge { position: absolute; top: 1px; right: 3px; font: 800 0.62rem/1 ui-sans-serif, system-ui, sans-serif; text-shadow: 0 1px 0 #000; }
.icell .badge.seal { color: #e6c06a; }
.icell .badge.set { color: var(--hue-green); }
.icell .badge.chase { color: var(--hue-tidemark); }
.icell .price { position: absolute; bottom: 1px; right: 3px; font: 700 0.6rem/1 ui-sans-serif, system-ui, sans-serif; color: #f3dc9a; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.icell .price::after { content: " ◈"; color: #b3a57d; font-size: 0.5rem; }
.icell .slot-name { position: absolute; bottom: -1.05rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8c836e; }
.igrid { display: grid; grid-template-columns: repeat(var(--cols, 8), 3.4rem); gap: 0.3rem; justify-content: start; }

/* Character / inventory layout */
.inv-cols { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(19rem, 1.3fr) minmax(19rem, 1.2fr); gap: 0.9rem; align-items: start; }
.inv-mid .mpanel { display: flex; flex-direction: column; }
.doll { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: stretch; padding: 0.4rem 0.2rem 1rem; }
.doll-col { display: flex; flex-direction: column; gap: 1.35rem; justify-content: center; }
.doll-slot { width: 3.9rem; height: 3.9rem; }
.doll-portrait {
  min-height: 21rem; position: relative; border-radius: 4px;
  background-color: #0c0b09; background-repeat: no-repeat; background-position: center 30%; background-size: contain;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9); border: 1px solid #2c251a;
}
.doll-portrait::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(184, 147, 79, 0.12), transparent 60%); pointer-events: none; }
.doll-name { position: absolute; left: 0; right: 0; bottom: 0.4rem; text-align: center; font-family: var(--serif); color: #ecd398; font-size: 1.05rem; text-shadow: 0 2px 4px #000; }
.doll-name span { display: block; font-size: 0.72rem; color: #b5aa90; }
.char-head .ch-class { font-family: var(--serif); font-size: 1.2rem; color: #ffe3a3; }
.char-head .ch-level { font-size: 0.76rem; color: #a99f88; }
.ch-xp { position: relative; height: 0.9rem; margin: 0.4rem 0 0.5rem; background: #0a0908; border: 1px solid #3a3022; border-radius: 3px; overflow: hidden; }
.ch-xp-fill { height: 100%; background: linear-gradient(90deg, #8a6a1c, #e3b341); }
.ch-xp span { position: absolute; inset: 0; text-align: center; font-size: 0.6rem; line-height: 0.85rem; color: #f8ecc8; text-shadow: 0 1px 0 #000; }
.sgroup { margin-top: 0.5rem; }
.sgroup h4 { font-family: var(--serif); font-size: 0.78rem; color: #c9a65e; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }
.sgroup h4 .pts { font-family: ui-sans-serif, system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: #ffcf5a; margin-left: 0.3rem; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.12rem 0.2rem; font-size: 0.8rem; border-bottom: 1px dotted rgba(255, 255, 255, 0.05); }
.srow .sl { color: #b9b09a; }
.srow .sv { color: #f3ead4; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.srow.el-salt .sv { color: #f1e6c8; } .srow.el-brine .sv { color: #6fd2d8; } .srow.el-choir .sv { color: #b89cff; }
.srow.salt .sv { color: #ffd98a; }
.stat-plus { width: 1.3rem; height: 1.3rem; padding: 0; margin-left: 0.4rem; border-radius: 3px; font-weight: 800; color: #1b1406; background: linear-gradient(180deg, #ffd98a, #c08a2c); border: 1px solid #000; }

/* Stash */
.stash-cols { display: grid; grid-template-columns: minmax(19rem, 0.9fr) 2fr; gap: 0.9rem; align-items: start; }
.subtabs { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; align-items: center; }
.subtab-key { margin-left: auto; font-size: 0.68rem; color: #7d745f; }

/* Vellum / Merrick */
.svc-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.9rem; align-items: start; }
.svc-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; }
.svc-actions .menu-btn { width: auto; flex: 1; }
.wallet-chip { font-size: 0.85rem; color: #b9b09a; padding: 0.4rem 0.8rem; border: 1px solid #3a3022; border-radius: 3px; background: #100f0c; white-space: nowrap; }
.wallet-chip b { color: #ffd98a; font-size: 1rem; }
.reveal-card {
  --hue: #ccc; display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.7rem; margin-bottom: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--hue) 55%, #000); border-left: 3px solid var(--hue); border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 14%, #14120f), #100f0d);
}
.reveal-card.fresh { animation: reveal-in 0.5s ease-out; }
@keyframes reveal-in { 0% { transform: scale(1.05); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.reveal-card .icon { width: 2.6rem; height: 2.6rem; image-rendering: pixelated; flex: 0 0 auto; }
.rc-name { font-family: var(--serif); color: var(--hue); font-weight: 700; font-size: 0.95rem; }
.rc-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8c836e; }
.rc-lines { font-size: 0.76rem; color: #8fb4ff; margin-top: 0.2rem; line-height: 1.35; }

/* Depth charts */
.tide-status { text-align: center; font-family: var(--serif); font-size: 1rem; padding: 0.5rem; margin-bottom: 0.9rem; border-radius: 3px; }
.tide-status.ok { color: #9fe6a0; background: rgba(63, 185, 80, 0.08); border: 1px solid rgba(63, 185, 80, 0.35); }
.tide-status.shut { color: #ffcf8a; background: rgba(210, 153, 34, 0.08); border: 1px solid rgba(210, 153, 34, 0.35); }
.depth-row { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.depth-card {
  width: 11.5rem; min-height: 13rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.9rem 0.6rem;
  background: linear-gradient(180deg, #1f1b14, #0f0e0c); border: 1px solid #4a3c26; border-radius: 4px; color: #e9e0c8;
}
.depth-card.current { border-color: #d9b56a; box-shadow: 0 0 16px rgba(217, 181, 106, 0.25); }
.dc-num { font-family: var(--serif); font-size: 2.6rem; color: #ffe3a3; line-height: 1; text-shadow: 0 3px 0 #000; }
.dc-name { font-family: var(--serif); font-size: 1rem; color: #ecd398; text-align: center; }
.dc-line { font-size: 0.74rem; color: #b5ab93; }
.dc-loot { margin-top: auto; font-size: 0.72rem; color: #8fd0ff; text-align: center; }

/* Title */
.scr-title { background: radial-gradient(ellipse at 50% 35%, rgba(18, 15, 10, 0.25) 0%, rgba(4, 4, 4, 0.92) 70%); }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 26rem; }
.title-logo {
  font-family: var(--serif); font-size: 4.6rem; letter-spacing: 0.28em; margin-right: -0.28em; color: #f1d796; font-weight: 700;
  text-shadow: 0 3px 0 #2a1d0b, 0 0 30px rgba(233, 190, 110, 0.35), 0 8px 24px #000;
  background: linear-gradient(180deg, #fff1c8 0%, #e6bd6a 50%, #9b6d2a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.title-tag { font-family: var(--serif); font-style: italic; color: #b9ad92; font-size: 1rem; margin-bottom: 1.4rem; text-shadow: 0 2px 6px #000; }
.title-menu { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; }
.title-foot { margin-top: 1rem; font-size: 0.72rem; color: #7d745f; }

/* Class picker */
.class-row { display: flex; gap: 1rem; justify-content: center; align-items: stretch; height: 100%; }
.class-big {
  flex: 1; max-width: 22rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.8rem 0.9rem 1rem;
  background: linear-gradient(180deg, #1c1813, #0d0c0a); border: 1px solid #4a3c26; border-radius: 4px; color: #e9e0c8; text-align: center;
}
.class-big.current { border-color: #d9b56a; }
.class-big:hover { border-color: #b8934f; }
.cb-portrait { width: 100%; flex: 1; min-height: 14rem; background-size: contain; background-position: center bottom; background-repeat: no-repeat; filter: drop-shadow(0 10px 14px #000); }
.cls-salt_chanter .cb-portrait { background-size: auto 100%; }
.cb-name { font-family: var(--serif); font-size: 1.5rem; color: #ffe3a3; letter-spacing: 0.06em; }
.cb-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #c9a65e; }
.cb-line { font-size: 0.82rem; color: #d8cfba; line-height: 1.35; }
.cb-kit { list-style: none; font-size: 0.74rem; color: #a9a08a; line-height: 1.5; }
.cb-set { font-size: 0.72rem; color: var(--hue-green); }
.cb-epithet { font-family: var(--serif); font-style: italic; font-size: 0.76rem; color: #8c836e; }

/* Pause, confirm */
.pause-box, .confirm-box {
  width: 22rem; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.4rem 1.6rem;
  background: linear-gradient(180deg, #1b1712, #0d0c0a); border: 1px solid #4a3c26; outline: 1px solid rgba(184, 147, 79, 0.45); outline-offset: -5px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); border-radius: 4px;
}
.pause-title { font-family: var(--serif); font-size: 2rem; text-align: center; color: #ecd398; letter-spacing: 0.2em; }
.pause-sub { text-align: center; font-size: 0.76rem; color: #9a9384; margin-bottom: 0.6rem; }
.confirm-box { width: 28rem; }
.confirm-box h2 { font-family: var(--serif); color: #ecd398; font-size: 1.3rem; }
.confirm-box p { color: #c9bfa6; font-size: 0.86rem; line-height: 1.45; margin-bottom: 0.6rem; }
.confirm-row { display: flex; gap: 0.6rem; }

/* Settings */
.settings-list { display: flex; flex-direction: column; gap: 0.4rem; max-width: 36rem; margin: 0 auto 1rem; }
.settings-list + .menu-btn { max-width: 36rem; margin: 0 auto; }
.opt-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: linear-gradient(180deg, #1f1b15, #13110e); border: 1px solid #3a3022; border-radius: 3px; color: #e9e0c8; font-size: 0.92rem; }
.opt-label { display: flex; flex-direction: column; align-items: flex-start; }
.opt-sub { font-size: 0.66rem; color: #8c836e; }
.opt-val { display: flex; align-items: center; gap: 0.6rem; color: #ffe3a3; font-weight: 700; }
.opt-val .arr { color: #8a6a34; font-size: 0.75rem; padding: 0 0.2rem; }
.vol-bar { display: inline-block; width: 7rem; height: 0.5rem; background: #0a0908; border: 1px solid #3a3022; border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 0.4rem; }
.vol-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8a6a1c, #e3b341); }

/* Controls */
.controls-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ctl-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ctl-table td { padding: 0.3rem 0.4rem; border-bottom: 1px dotted rgba(255, 255, 255, 0.06); color: #d8cfba; }
.ctl-table td.ck { width: 34%; white-space: nowrap; }

/* Lattice host (re-parented game nodes) */
.lattice-host { display: flex; flex-direction: column; gap: 0.6rem; }
.lattice-top { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; font-size: 0.85rem; }
.lattice-host #lattice-channel { font-family: var(--serif); color: #ecd398; font-size: 1rem; }
.lattice-host .lattice-node { background: linear-gradient(180deg, #1f1b15, #12100d); border-color: #3a3022; color: #e9e0c8; }
.lattice-host .lattice-node.sunk { border-color: #3fb950; }
.lattice-host .lattice-region h4 { font-family: var(--serif); color: #c9a65e; }
.lattice-host #btn-lattice-unweave { align-self: flex-start; }
.board-in-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.board-in-menu button { background: linear-gradient(180deg, #1f1b15, #12100d); border: 1px solid #3a3022; color: #e9e0c8; padding: 0.4rem 0.7rem; font-size: 0.8rem; }
.board-in-menu .tree-branch-name { font-family: var(--serif); color: #c9a65e; }
.locked-board { text-align: center; padding: 3rem 1rem; color: #9a9384; }
.locked-board .lock-glyph { font-size: 2.4rem; color: #6b5631; margin-bottom: 0.6rem; }
.locked-board p { font-family: var(--serif); font-size: 1rem; }
.g.k-pad { display: none; }
body.pad-mode .g.k-pad { display: inline-flex; }
body.menu-open #toast-stack { top: auto; bottom: 3.2rem; }
.scr-title { backdrop-filter: blur(2px) brightness(0.7); }
.screen { backdrop-filter: blur(1.5px); }
#hud-tide .objective-chip { flex: none; max-width: 32rem; background: rgba(14, 12, 10, 0.82); border-color: rgba(184, 147, 79, 0.6); color: #efe2c0; text-shadow: 0 1px 0 #000; }
#hud-tide .objective-chip.soft { opacity: 0.8; }
body.pad-mode #interact-prompt .k-kb, body.pad-mode #hud-menu-hints .k-kb { display: none; }
#action-bar .ab-slot.ready .ab-cd { display: none; }
#action-bar .ab-name { font-size: 0.74rem; }
#action-bar .ab-sys { font-size: 0.58rem; }
/* Phase 2 item lines */
.tip-power { margin-top: 5px; color: #e9e2cc; font-size: 0.82rem; letter-spacing: 0.02em; }
.tip-power b { font-size: 1.15rem; color: #fff6dc; margin-right: 0.25rem; font-family: Georgia, "Times New Roman", serif; }
.tip-power span { color: #9b937c; font-size: 0.72rem; text-transform: capitalize; }
.tip-effect { margin-top: 6px; color: #ffb35c; font-size: 0.8rem; line-height: 1.35; text-shadow: 0 0 6px rgba(255,140,40,0.35); }
.tip-set { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(90,200,110,0.25); font-size: 0.76rem; line-height: 1.4; }
.tip-set-head { color: #6fdc7f; font-weight: 600; margin-bottom: 2px; }
.tip-set-row { color: #6b7a68; }
.tip-set-row.on { color: #9df0a6; text-shadow: 0 0 6px rgba(80,220,110,0.3); }
.rc-power { font-size: 0.74rem; color: #e9e2cc; margin-top: 0.15rem; }
.rc-power b { font-size: 0.95rem; color: #fff6dc; }
.rc-fx { font-size: 0.74rem; color: #ffb35c; margin-top: 0.2rem; }
.sgroup.fx .fx-line { color: #ffb35c; font-size: 0.74rem; line-height: 1.4; padding: 0.1rem 0; }
body.menu-open #hud-bottom { display: none; }
.depth-row { flex-wrap: wrap; row-gap: 0.7rem; }
.depth-row .depth-card { flex: 0 0 calc((100% - 5 * 0.8rem) / 6); }

/* ── Phase 3: tips, scene veil, boot veil, pilgrims ── */
.hint-card { position: fixed; left: 50%; bottom: 7.2rem; transform: translateX(-50%); z-index: 40; max-width: 34rem;
  display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem; border-radius: 6px; cursor: pointer;
  background: rgba(14, 20, 28, .9); border: 1px solid rgba(214, 196, 150, .45); color: #efe6cf; font-size: .92rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.hint-card[hidden] { display: none; }
.hint-card.in { animation: hintIn .35s ease-out; }
.hint-tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #0e141c; background: #d9c38f; padding: .1rem .4rem; border-radius: 3px; }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.scene-veil { position: fixed; inset: 0; z-index: 35; pointer-events: none; background: #05070c; opacity: 0; }
.scene-veil.go { animation: veilPulse .7s ease-out; }
@keyframes veilPulse { 0% { opacity: .85; } 100% { opacity: 0; } }
.boot-veil { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, #12202c 0%, #05070c 70%); color: #e9dfc4; transition: opacity .6s ease; }
.boot-veil.gone { opacity: 0; pointer-events: none; }
.bv-logo { font-size: 3rem; letter-spacing: .4em; font-weight: 700; }
.bv-sub { margin-top: .6rem; opacity: .65; letter-spacing: .12em; animation: bvBlink 1.6s ease-in-out infinite; }
@keyframes bvBlink { 50% { opacity: .3; } }
.pilgrim-list { display: flex; flex-direction: column; gap: .5rem; max-width: 34rem; margin: 0 auto; }

/* Pilgrims: slot row with Rename / Delete beside it (Phase 4) */
.pilgrim-line { display: flex; gap: 0.4rem; align-items: stretch; margin-bottom: 0.4rem; }
.pilgrim-line .pilgrim-row { flex: 1 1 auto; margin: 0; }
.pilgrim-line .pilgrim-act { flex: 0 0 6.4rem; margin: 0; justify-content: center; text-align: center; }
.pilgrim-line .pilgrim-act.danger:not([disabled]) .mb-label { color: #f0a08a; }
.pilgrim-line .pilgrim-act[disabled] { opacity: 0.42; }
.rename-box { width: 30rem; }
.rename-input { width: 100%; box-sizing: border-box; margin: 0.4rem 0 0.5rem; padding: 0.55rem 0.7rem;
  background: #120f0b; color: #f1e6c8; border: 1px solid #6a5634; font: 600 1.05rem var(--serif, serif); outline: none; }
.rename-input:focus, .rename-input.nav-focus { border-color: #e9c97a; box-shadow: 0 0 0 2px rgba(233, 201, 122, 0.25); }
.rename-box .menu-foot { margin-top: 0.6rem; }
/* Controller letter picker */
.rename-kb { display: flex; flex-direction: column; gap: 0.22rem; align-items: center; margin: 0.2rem 0 0.7rem; }
.kb-row { display: flex; gap: 0.22rem; }
.kb-key { min-width: 2.1rem; height: 2rem; padding: 0 0.3rem; background: #1a150f; color: #e8dcbc; border: 1px solid #4a3b24;
  font: 700 0.95rem var(--serif, serif); cursor: pointer; }
.kb-key:hover, .kb-key.nav-focus { border-color: #e9c97a; background: #2b2216; color: #fff3cf; box-shadow: 0 0 0 2px rgba(233, 201, 122, 0.25); }
.kb-key.kb-punct { color: #b9ab88; }
.kb-key.kb-wide { min-width: 3.6rem; }
.kb-key.kb-space { min-width: 12rem; }
.kb-key.kb-shift.on { color: #e9c97a; }
.pilgrim-list { max-width: 46rem; }

/* Phase 4: portraits are the pixel heroes at a whole-number scale; never resample them. */
.doll-portrait, .cb-portrait { image-rendering: pixelated; background-size: auto !important; }
.doll-portrait { background-position: center 62%; }
.cb-portrait { background-position: center 80%; }
/* Phase 7 icon bar: names wrap to two lines beside the icon; the system label lives in the tooltip */
#action-bar .ab-slot { gap: 6px; padding: 4px 6px 4px 4px; }
#action-bar .ab-name { font-size: 0.68rem; line-height: 1.1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#action-bar .ab-sys { display: none; }
#action-bar .ab-chaos .ab-cd { min-width: 0; font-size: 0.62rem; }

/* Skills tab */
.sk-lead { margin: 0 0 0.4rem; }
.sk-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; align-items: start; margin-bottom: 0.55rem; }
.sk-slot-label { font: 700 0.72rem/1.3 ui-sans-serif, system-ui; color: #cdbf9c; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.sk-slot-label .kb { font-size: 0.62rem; color: #7d745f; text-transform: none; letter-spacing: 0; }
.sk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.sk-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.2rem 0.55rem; text-align: left; padding: 0.45rem; border-radius: 6px; border: 1px solid #3a3226; background: linear-gradient(180deg, #1b1915, #121110); color: #e9e0c9; cursor: pointer; }
.sk-card .sk-icon { grid-row: 1 / span 2; width: 48px; height: 48px; background-image: url("../art/ui/px/skill-icons.png"); background-size: 1248px 144px; image-rendering: pixelated; box-shadow: 0 0 0 1px #0a0806, 0 0 0 2px #4a3f2c; border-radius: 3px; }
.sk-card .sk-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sk-card strong { font-size: 0.8rem; }
.sk-card .sk-desc { font-size: 0.68rem; color: #b9ae94; line-height: 1.25; }
.sk-card .sk-mod { font-size: 0.64rem; color: #8b8370; }
.sk-card .sk-mod.sunk { color: #b8a4ff; }
.sk-card .sk-tag { grid-column: 2; justify-self: end; font: 800 0.6rem/1 ui-sans-serif, system-ui; letter-spacing: 0.06em; text-transform: uppercase; color: #8b8370; }
.sk-card.on { border-color: #c9a560; box-shadow: 0 0 0 1px rgba(201, 165, 96, 0.4), 0 0 10px rgba(201, 165, 96, 0.25); }
.sk-card.on .sk-tag { color: #e3c37a; }
.sk-card.on .sk-icon { box-shadow: 0 0 0 1px #0a0806, 0 0 0 2px #e3c37a; }
.sk-card.locked { opacity: 0.55; }
.sk-card.fixed { cursor: default; max-width: 33%; }
.sk-card.nav-focus, .sk-card:focus-visible { outline: 2px solid #f0d58a; outline-offset: 1px; }

/* ── Chase tab (endgame clarity) ── */
.ch-goal { margin: 0 0 10px; padding: 8px 12px; border: 1px solid #6b5a33; background: linear-gradient(90deg, rgba(120, 92, 40, 0.28), rgba(30, 24, 16, 0.2)); color: #f3e2b4; font-size: 14px; border-radius: 3px; }
.ch-goal-k { display: inline-block; margin-right: 6px; padding: 1px 7px; background: #e9c97a; color: #20180c; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; }
.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-grid .panel { min-width: 0; }
.ch-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin: 2px 0; border-radius: 3px; border: 1px solid transparent; cursor: default; }
.ch-row:hover { background: rgba(255, 230, 170, 0.05); }
.ch-note { font-size: 11.5px; margin-top: 6px; }
.ch-rung-name { width: 92px; color: #e8dcc0; }
.ch-bar { position: relative; flex: 1; height: 10px; background: #1a1610; border: 1px solid #4a3f2c; image-rendering: pixelated; }
.ch-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #c9a654 0 6px, #a88838 6px 8px); }
.ch-bar b { position: absolute; top: 0; bottom: 0; background: #fff2c4; min-width: 2px; animation: chPulse 1.2s ease-in-out infinite; }
@keyframes chPulse { 50% { opacity: 0.35; } }
.ch-rung.done .ch-bar i { background: repeating-linear-gradient(90deg, #8fd0a0 0 6px, #6aa87c 6px 8px); }
.ch-rung.locked { opacity: 0.45; }
.ch-rung.live .ch-rung-name { color: #ffe7a6; }
.ch-rung-lv { width: 74px; text-align: right; font-variant-numeric: tabular-nums; color: #d8ccb0; }
.ch-rung-st { width: 78px; font-size: 11px; color: #9a8e74; text-transform: uppercase; letter-spacing: 0.06em; }
.ch-rung.live .ch-rung-st { color: #ffe7a6; }
.ch-rung.done .ch-rung-st { color: #8fd0a0; }
.ch-rec { justify-content: space-between; }
.ch-rec-d { color: #f0dca8; font-variant-numeric: tabular-nums; }
.ch-rec.none .ch-rec-d { color: #786e5a; font-style: italic; }
.ch-rec.best .ch-rec-d::after { content: " ★"; color: #ffd36a; }
.ch-set { flex-wrap: wrap; }
.ch-set-name { flex: 1; min-width: 160px; color: #e8dcc0; }
.ch-set-name em { font-style: normal; font-size: 10px; padding: 0 5px; margin-left: 4px; background: #4a8a5a; color: #eaffef; border-radius: 2px; vertical-align: 1px; }
.ch-set-name small { display: block; color: #8f846c; font-size: 11px; }
.ch-pips { display: inline-flex; gap: 3px; }
.ch-pip { width: 12px; height: 12px; background: #1d1a14; border: 1px solid #4a3f2c; display: inline-block; }
.ch-pip.on { background: #5fc477; border-color: #a6f0b8; box-shadow: inset -2px -2px 0 #3a8a4f; }
.ch-set-n { width: 34px; text-align: right; color: #d8ccb0; font-variant-numeric: tabular-nums; }
.ch-set-sub { flex-basis: 100%; font-size: 11px; color: #8f846c; padding-left: 2px; }
.ch-set.done .ch-set-n { color: #8fd0a0; }
.ch-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; max-height: 236px; overflow-y: auto; }
.ch-item { display: block; padding: 4px 7px; }
.ch-item b { display: block; font-weight: 600; font-size: 12.5px; color: #6e6656; }
.ch-item small { display: block; font-size: 10.5px; color: #6e6656; line-height: 1.25; }
.ch-item.found.tm b { color: #7fe8ff; text-shadow: 0 0 6px rgba(120, 220, 255, 0.4); }
.ch-item.found.my b { color: #ffb45a; }
.ch-item.found small { color: #a89c80; }
.ch-set { padding: 3px 8px; }
.ch-set-name em { background: #5a4a2a; color: #f3e2b4; }
.ch-set.focus .ch-set-name { color: #ffe7a6; }
.ch-set.done .ch-set-name { color: #8fd0a0; }
.ch-goals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ch-goals .ch-goal { margin: 0; font-size: 13px; }
.ch-goal.tier-mid .ch-goal-k { background: #9fc8e8; }
.ch-goal.tier-long .ch-goal-k { background: #c8a8f0; }
.ch-bounty .ch-b-txt { flex: 1; min-width: 0; color: #e8dcc0; }
.ch-bounty .ch-bar { flex: 0 0 90px; }
.ch-bounty .ch-b-n { width: 44px; text-align: right; color: #d8ccb0; font-variant-numeric: tabular-nums; }
.ch-bounty.done .ch-b-txt { color: #8fd0a0; text-decoration: line-through; }
.ch-bounty.done .ch-bar i { background: #6aa87c; }
.ch-mas .ch-m-name { flex: 1; min-width: 0; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-mas .ch-m-r { width: 34px; color: #ffe7a6; font-variant-numeric: tabular-nums; }
.ch-mas .ch-bar { flex: 0 0 90px; }
.ch-mas .ch-m-n { width: 66px; text-align: right; color: #9a8e74; font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-boss .ch-m-name, .ch-mile .ch-m-name { flex: 1; min-width: 0; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-boss .ch-m-r, .ch-mile .ch-m-r { width: 64px; color: #ffe7a6; font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-boss .ch-bar, .ch-mile .ch-bar { flex: 0 0 70px; }
.ch-boss .ch-m-n, .ch-mile .ch-m-n { width: 128px; text-align: right; color: #9a8e74; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-boss.todo .ch-m-name { color: #9a8e74; }
.ch-boss.todo .ch-m-n { color: #c9a35a; }
.depth-card .dc-boss { margin-top: 4px; font-size: 11px; color: #e0a868; line-height: 1.25; }
.depth-card .dc-boss.slain { color: #8fd0a0; }
.depth-card .dc-lv { margin-top: 3px; font-size: 11px; color: #b9b2a0; text-align: center; }
.depth-card .dc-lv.under { color: #ff8a70; font-weight: 700; }
.tm-mod.locked { cursor: default; opacity: 0.6; border-style: dashed; }
.tide-marks { margin: 0 auto 10px; max-width: 860px; padding: 8px 10px; border: 1px solid #3c4f5a; background: rgba(20, 40, 52, 0.35); border-radius: 3px; display: flex; flex-wrap: wrap; gap: 6px; }
.tide-marks .tm-head { flex-basis: 100%; color: #bfe6f2; font-weight: 600; }
.tide-marks .tm-head .muted { font-weight: 400; }
.tm-mod { flex: 1; min-width: 200px; text-align: left; padding: 6px 9px; background: #14222a; border: 1px solid #2d4450; color: #a8c4cc; border-radius: 3px; cursor: pointer; }
.tm-mod b { display: block; color: #d8eef4; }
.tm-mod small { display: block; font-size: 11px; color: #86a4ac; }
.tm-mod.on { border-color: #7fd8ee; background: #183644; box-shadow: inset 0 0 0 1px rgba(127, 216, 238, 0.3); }
.tm-mod.on b { color: #9ff0ff; }

/* Brinewright's Bench (Phase 10 crafting) */
.bench-cols { display: grid; grid-template-columns: minmax(22rem, 1.05fr) minmax(20rem, 1.1fr) minmax(17rem, 0.95fr); gap: 0.9rem; align-items: start; }
.icell.bench-sel { outline: 2px solid #a8f0c8; outline-offset: 1px; }
.icell .badge.worn { color: #e3b341; left: 3px; right: auto; }
.icell .badge.armed { color: #a8f0c8; left: 3px; right: auto; }
.icell.hue-chart { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.7), 0 0 8px color-mix(in srgb, var(--hue) 35%, transparent); }
.cur-strip { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.7rem; }
.cur-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.45rem 0.15rem 0.2rem; font-size: 0.72rem; color: #b9b09a; background: #100f0c; border: 1px solid #3a3022; border-radius: 3px; }
.cur-chip .icon { width: 1.3rem; height: 1.3rem; image-rendering: pixelated; }
.cur-chip b { color: #f3dc9a; font-variant-numeric: tabular-nums; }
.cur-chip.none { opacity: 0.45; }
.cur-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin: 0.6rem 0 0.5rem; }
.cur-btn { position: relative; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; text-align: left; color: #d8cfb8; font-size: 0.72rem;
  background: linear-gradient(180deg, #1c1913, #0f0e0c); border: 1px solid #3f3424; border-radius: 3px; cursor: pointer; }
.cur-btn .icon { width: 1.9rem; height: 1.9rem; image-rendering: pixelated; flex: 0 0 auto; }
.cur-btn .cur-n { position: absolute; left: 1.55rem; bottom: 0.15rem; font: 800 0.66rem/1 ui-sans-serif, system-ui, sans-serif; color: #fff2c4; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.cur-btn .cur-name { line-height: 1.1; }
.cur-btn.on { border-color: #a8f0c8; background: linear-gradient(180deg, #1d2a24, #0f1210); color: #e8fff2; }
.cur-btn.empty { opacity: 0.5; }
.cur-btn.rare .cur-name { color: #ffd66e; }
.bn-preview { min-height: 9rem; }
.bn-pv-head { display: flex; align-items: center; gap: 0.4rem; font-family: var(--serif); color: #e8fff2; }
.bn-pv-head .icon { width: 1.8rem; height: 1.8rem; image-rendering: pixelated; }
.bn-pv-desc { font-size: 0.72rem; margin: 0.25rem 0 0.4rem; }
.bn-pv-line { font-size: 0.8rem; color: #bfe6d2; padding: 0.12rem 0; border-bottom: 1px dotted rgba(168, 240, 200, 0.12); font-variant-numeric: tabular-nums; }
.bn-pv-why { font-size: 0.8rem; color: #ffb38a; margin: 0.3rem 0; }
.bn-affix-pick { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
.bn-affix { text-align: left; padding: 0.25rem 0.5rem; font-size: 0.76rem; color: #d8cfb8; background: #14120e; border: 1px solid #3f3424; border-radius: 3px; cursor: pointer; }
.bn-affix.on { border-color: #ffd66e; color: #ffe9a8; }
.apply-btn { margin-top: 0.7rem; }
.arm-btn { margin-top: 0.3rem; }
.bn-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.4rem; align-items: start; }
.bn-snap { padding: 0.45rem 0.55rem; border: 1px solid #3a3022; border-radius: 3px; background: #100f0c; }
.bn-snap:last-child { border-color: #a8f0c8; }
.bn-snap .rc-name { color: #e8e0c8; font-size: 0.82rem; }
.bn-snap:last-child .rc-name { color: #c8ffe0; }
.bn-snap-k { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8c836e; }
.bn-arrow { align-self: center; font-size: 0.66rem; color: #a8f0c8; writing-mode: vertical-rl; transform: rotate(180deg); }
.armed-tag { font: 800 0.6rem/1 ui-sans-serif, system-ui, sans-serif; color: #0f1a14; background: #a8f0c8; padding: 0.1rem 0.3rem; border-radius: 2px; vertical-align: middle; }
.chart-armed { margin: 0 auto 10px; max-width: 860px; padding: 7px 10px; border: 1px dashed #3d5a4a; background: rgba(20, 44, 32, 0.3); border-radius: 3px; color: #bfe6d2; font-size: 0.82rem; }
.chart-armed.on { border-style: solid; border-color: #a8f0c8; }
.chart-armed small { display: block; color: #9cc8b4; margin-top: 2px; }

/* Phase 11: damage-type tags on skill cards */
.sk-type { display: inline-block; padding: 0 0.3rem; border-radius: 3px; font: 700 0.58rem/1.4 ui-sans-serif, system-ui; text-transform: uppercase; letter-spacing: 0.05em; color: #0c0b0a; vertical-align: 1px; }
.sk-type.t-salt { background: #f6e8c4; } .sk-type.t-brine { background: #60e2ec; } .sk-type.t-frost { background: #bee8ff; }
.sk-type.t-rot { background: #96cd4a; } .sk-type.t-storm { background: #ffe36a; }
.sk-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Phase 11: rune sockets */
.rn-sec { margin: 0.4rem 0 0.7rem; padding-top: 0.45rem; border-top: 1px solid #2c261c; }
.rn-head { margin: 0 0 0.4rem; font: 700 0.78rem/1.3 ui-sans-serif, system-ui; color: #d9c8ff; text-transform: uppercase; letter-spacing: 0.06em; }
.rn-head .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rn-row { display: grid; grid-template-columns: 48px 9.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }
.rn-row .sk-icon { width: 48px; height: 48px; background-image: url("../art/ui/px/skill-icons.png"); background-size: 1248px 144px; image-rendering: pixelated; box-shadow: 0 0 0 1px #0a0806, 0 0 0 2px #4a3f2c; border-radius: 3px; }
.rn-skill { font-size: 0.78rem; color: #e9e0c9; }
.rn-sock, .rn-pick { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.45rem; align-items: center; text-align: left; padding: 0.35rem 0.45rem; border-radius: 6px; border: 1px dashed #5a4c7a; background: #15131a; color: #e9e0c9; cursor: pointer; min-height: 2.9rem; }
.rn-sock.full { border-style: solid; border-color: #8a72c4; background: linear-gradient(180deg, #1d1928, #131118); }
.rn-sock.shut { opacity: 0.5; border-color: #3a3346; cursor: default; }
.rn-sock.on { box-shadow: 0 0 0 2px #c9a7ff; }
.rn-sock:not(.full) .rn-txt { grid-column: 1 / span 2; }
.rn-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.74rem; }
.rn-icon { display: block; width: 32px; height: 32px; background-image: url("../art/ui/px/rune-icons.png"); background-size: 512px 128px; image-rendering: pixelated; }
.rn-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 0.5rem 3.6rem; padding: 0.4rem; border-radius: 6px; background: rgba(201, 167, 255, 0.06); border: 1px solid #3c3352; }
.rn-pick { border-style: solid; border-color: #3c3352; }
.rn-cancel { display: block; text-align: center; color: #b9ae94; }
.rn-none { grid-column: 1 / -1; margin: 0.2rem; font-size: 0.72rem; }
.rn-bag { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.45rem; }
.rn-bag-head { width: 100%; font-size: 0.72rem; color: #cdbf9c; }
.rn-bagcell { position: relative; padding: 2px; border-radius: 5px; border: 1px solid #3a3346; background: #121016; cursor: pointer; }
.rn-bagcell.fusable { border-color: #e3c46a; box-shadow: 0 0 6px rgba(227, 196, 106, 0.45); }
.rn-n { position: absolute; right: 1px; bottom: 0; font: 700 0.6rem/1 ui-sans-serif, system-ui; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* Phase 12: PlayStation prompts. Glyph spans keep their Xbox letter in the DOM; the label swaps visually. */
body.pad-ps .g-A, body.pad-ps .g-B, body.pad-ps .g-X, body.pad-ps .g-Y, body.pad-ps .g-LB, body.pad-ps .g-RB, body.pad-ps .g-LT, body.pad-ps .g-RT { font-size: 0 !important; }
body.pad-ps .g-A::after, body.pad-ps .g-B::after, body.pad-ps .g-X::after, body.pad-ps .g-Y::after,
body.pad-ps .g-LB::after, body.pad-ps .g-RB::after, body.pad-ps .g-LT::after, body.pad-ps .g-RT::after { font-size: 0.72rem; font-weight: 800; }
body.pad-ps .g-A::after, body.pad-ps .g-B::after, body.pad-ps .g-X::after, body.pad-ps .g-Y::after { font-size: 1.05rem; line-height: 1; }
body.pad-ps .ab-glyph .g::after { font-size: 0.8rem; }
body.pad-ps .g-A, body.pad-ps .g-B, body.pad-ps .g-X, body.pad-ps .g-Y { background: #2a2d36; }
body.pad-ps .g-A::after { content: "✕"; color: #8fb4ff; } body.pad-ps .g-B::after { content: "○"; color: #ff7a7a; }
body.pad-ps .g-X::after { content: "□"; color: #f5a3d6; } body.pad-ps .g-Y::after { content: "△"; color: #6fe0b8; }
body.pad-ps .g-LB::after { content: "L1"; color: #eee; } body.pad-ps .g-RB::after { content: "R1"; color: #eee; }
body.pad-ps .g-LT::after { content: "L2"; color: #eee; } body.pad-ps .g-RT::after { content: "R2"; color: #eee; }

/* ── P13 lock badge, bulk sell / salvage row, salvage preview ── */
.icell .badge.lock { left: 3px; right: auto; bottom: 3px; top: auto; background: rgba(10, 8, 4, 0.75); padding: 1px; line-height: 0; border: 1px solid #6b5420; }
.bulk-row { display: flex; align-items: stretch; gap: 0.35rem; margin: 0.55rem 0 0.2rem; flex-wrap: wrap; }
.bulk-row .bulk-label { align-self: center; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #a9a08c; margin-right: 0.2rem; }
.bulk-row .bulk-btn { flex: 1 1 0; min-width: 7.5rem; border-left: 3px solid var(--hue, #e8e6e1); padding: 0.3rem 0.5rem; }
.bulk-row .bulk-btn .sub { font-size: 0.7rem; }
.bulk-row .bulk-btn.armed { background: linear-gradient(#5a2a14, #3a180a); border-color: #e0703a; color: #ffd9b8; }
.bulk-row .bulk-btn[disabled] { opacity: 0.4; }
.salvage-cols { grid-template-columns: 1.7fr 1fr; }
.sv-preview { padding: 0.5rem 0.7rem; min-height: 8rem; }
.sv-name { font-weight: bold; margin-bottom: 0.45rem; }
.sv-yield { display: grid; gap: 0.3rem; }
.sv-row { display: flex; align-items: center; gap: 0.45rem; }
.sv-row .icon { width: 24px; height: 24px; image-rendering: pixelated; }
.sv-dust { width: 24px; height: 24px; display: inline-block; image-rendering: pixelated; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%235a5040' d='M1 6h6v1H1z'/><path fill='%23cfc6b0' d='M2 5h4v1H2zM3 4h2v1H3z'/><path fill='%23fffaf0' d='M3 4h1v1H3zM2 5h1v1H2zM6 2h1v1H6zM1 2h1v1H1z'/><path fill='%23e8e2d2' d='M4 1h1v1H4z'/></svg>") center / 24px 24px no-repeat; }

/* ── P13 Lattice web (js/menus-web.js): tide chart + constellation boards ── */
.lat-wrap { display: grid; grid-template-columns: 1fr 19rem; gap: 0.8rem; height: min(62vh, 560px); margin-top: 0.4rem; }
.lat-web-host { position: relative; min-height: 0; border: 8px solid transparent; border-image: url("../art/ui/px/frame-driftwood.png") 8 round; image-rendering: pixelated; background: #0a0e15; }
.web-vp { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.web-vp.dragging { cursor: grabbing; }
.web-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.web-chart { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.web-band { position: absolute; text-align: left; pointer-events: none; }
.web-band span { display: inline-block; padding: 1px 10px; font: 600 13px/18px Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; color: #d8cfb8; background: rgba(8, 10, 14, 0.82); border: 1px solid #4a4334; }
.web-band span::before, .web-band span::after { content: "—"; color: #8f8571; margin: 0 6px; }
.web-band.side { right: auto; text-align: left; }
.web-band.band-spine span { color: #e4b2ff; border-color: #5a3a70; }
.web-band.band-mist span { color: #a6ece8; border-color: #2a5a60; }
.web-band.band-verge span { color: #8fd8e0; }
.web-spire { position: absolute; width: 64px; height: 64px; background: url("../art/ui/px/lattice-nodes.png") 0 0 / 512px 192px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(240, 210, 122, 0.45)); pointer-events: none; }
.web-node { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.web-node.ty-path { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.web-node .web-spr { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: url("../art/ui/px/lattice-nodes.png") 0 0 / 512px 192px; image-rendering: pixelated; }
.web-node.big .web-spr { transform: scale(1.25); }
.web-node.st-lit .web-spr { filter: drop-shadow(0 0 5px rgba(160, 240, 240, 0.55)); }
.scr-lattice .web-node.st-lit.ty-path .web-spr, .scr-lattice .web-node.st-lit.ty-notable .web-spr, .scr-lattice .web-node.st-lit.ty-root .web-spr { filter: drop-shadow(0 0 5px rgba(255, 220, 130, 0.6)); }
.web-node.st-lit.ty-spine .web-spr { filter: drop-shadow(0 0 6px rgba(224, 112, 255, 0.6)); }
.web-node.can::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(127, 232, 232, 0.65); animation: webPulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes webPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.web-node.nav-focus { outline: none; box-shadow: 0 0 0 3px #e9c97a, 0 0 14px 4px rgba(233, 201, 122, 0.55); }
.web-node .web-lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; white-space: nowrap; font: 600 11px/14px system-ui, sans-serif; color: #cfc6b0; text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }
.web-node.st-shut .web-lbl { color: #6d6858; }
.web-node.nav-focus .web-lbl { color: #ffe7a0; }
.web-node .web-rank { position: absolute; right: -4px; top: -4px; padding: 0 3px; font: 700 10px/13px system-ui, sans-serif; color: #1a1408; background: #e9c97a; border: 1px solid #1a1408; }
.lat-web-host .locked-board { position: absolute; inset: 30% 20% auto; z-index: 2; background: rgba(10, 9, 12, 0.88); border: 1px solid #4a4334; padding: 1rem; text-align: center; pointer-events: none; }
.lat-side { display: flex; flex-direction: column; gap: 0.55rem; min-height: 0; }
.lat-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lat-chip { padding: 0.25rem 0.55rem; font-size: 0.82rem; color: #cfc6b0; background: #12100d; border: 1px solid #3a3022; }
.lat-chip b { color: #d6a8ff; font-size: 1rem; }
.lat-chip.tide.awake { color: #9ff0f0; border-color: #2a6a70; }
.lat-chip.tide.dormant { color: #8a93a0; }
.lat-chip.unweave { color: #ffb38a; border-color: #8a4a2a; }
.lat-tip { flex: 1; min-height: 9rem; padding: 0.7rem 0.8rem; border: 8px solid transparent; border-image: url("../art/ui/px/frame-saltcrust.png") 8 round; image-rendering: pixelated; background: #11100d; overflow: auto; }
.lat-tip .tip-kind { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a9a08c; }
.lat-tip .tip-kind.ty-spine, .lat-tip .tip-kind.ty-notable { color: #d6a8ff; }
.lat-tip .tip-kind.ty-turn, .lat-tip .tip-kind.ty-ebb { color: #8fd8e0; }
.lat-tip .tip-name { font: 600 1.15rem Georgia, serif; color: #f1e6c8; margin: 0.15rem 0; }
.lat-tip .tip-state { font-size: 0.8rem; font-weight: 600; }
.lat-tip .tip-state.st-lit { color: #9ff0c8; } .lat-tip .tip-state.st-open { color: #e9c97a; } .lat-tip .tip-state.st-shut { color: #8a8478; }
.lat-tip .tip-eff { margin: 0.5rem 0 0.3rem; color: #ddd4bf; line-height: 1.35; }
.lat-tip .tip-grant { color: #a6ece8; font-size: 0.85rem; margin: 0 0 0.4rem; }
.lat-tip .tip-act { margin: 0.4rem 0 0; padding-top: 0.4rem; border-top: 1px solid #2c271e; color: #e9c97a; font-size: 0.85rem; }
.lat-legend { font-size: 0.75rem; color: #a9a08c; }
.lat-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; }
.lat-legend .lg.lit { background: #9ff0f0; box-shadow: 0 0 6px #9ff0f0; } .lat-legend .lg.open { background: #b9ae96; } .lat-legend .lg.shut { background: #403d37; }
.lat-legend .lat-pad { margin-top: 0.3rem; }

/* ── P13 Skills: ability bar (driftwood) → option cards (salt crust) → detail ── */
.sk-top { margin: 0.3rem 0 0.7rem; }
.sk-bar { display: flex; gap: 0.6rem; justify-content: center; padding: 0.7rem 0.9rem 0.5rem; border: 8px solid transparent; border-image: url("../art/ui/px/frame-driftwood.png") 8 round; image-rendering: pixelated;
  background: linear-gradient(#1a140e, #120e0a); }
.sk-barcell { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 8.6rem; }
.sk-barcell.set { width: 7rem; opacity: 0.8; }
.sk-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 100%; padding: 0.45rem 0.3rem 0.4rem; background: #0e0c09; border: 2px solid #3a3022; cursor: pointer; color: #ddd4bf; }
.sk-slot.fixed { cursor: default; border-style: dashed; }
.sk-slot .sk-icon.big, .sk-card .sk-icon.big, .skd-head .sk-icon.big { width: 72px; height: 72px; background-image: url("../art/ui/px/skill-icons.png"); background-size: 1872px 216px; image-rendering: pixelated; border-radius: 3px;
  box-shadow: 0 0 0 1px #0a0806, 0 0 0 3px var(--ty, #4a3f2c), 0 0 0 4px #0a0806; }
.sk-slot.sel { border-color: #e9c97a; background: #1d170e; box-shadow: 0 -3px 0 0 #e9c97a inset; }
.sk-slot .sk-keys { position: absolute; left: 4px; top: 3px; font-size: 0.7rem; }
.sk-slot .sk-slotname { font: 600 0.85rem Georgia, serif; text-align: center; line-height: 1.15; }
.sk-socks { display: flex; gap: 0.3rem; min-height: 34px; align-items: center; font-size: 0.72rem; }
.rn-sock.stone { display: block; min-height: 0; border-radius: 0; box-shadow: none; width: 34px; height: 34px; padding: 0; border: 0; background: url("../art/ui/px/rune-sockets.png") 0 0 / 68px 34px; image-rendering: pixelated; cursor: pointer; position: relative; }
.rn-sock.stone.shut { background-position: -34px 0; opacity: 0.75; }
.rn-sock.stone.full { background-position: 0 0; }
.rn-sock.stone .rn-icon { position: absolute; left: 1px; top: 1px; transform: scale(1); }
.rn-sock.stone.on, .rn-sock.stone.nav-focus { outline: 2px solid #e9c97a; outline-offset: 1px; }
.sk-cols { display: grid; grid-template-columns: 1fr 21rem; gap: 0.8rem; align-items: start; }
.sk-opts { padding: 0.6rem 0.7rem 0.7rem; border: 8px solid transparent; border-image: url("../art/ui/px/frame-saltcrust.png") 8 round; image-rendering: pixelated; background: #12100d; }
.sk-opts-head { font: 600 0.95rem Georgia, serif; color: #e9dcb8; margin-bottom: 0.5rem; }
.sk-opts .sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: 0.55rem; }
.sk-opts .sk-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.6rem 0.4rem 0.45rem; min-height: 0; text-align: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ty) 14%, #15120e) 0, #0f0d0a 70%); border: 1px solid #3a3022; }
.sk-opts .sk-card .sk-med { padding: 4px; }
.sk-opts .sk-card .sk-cname { font: 600 0.9rem Georgia, serif; color: #efe4c6; line-height: 1.15; }
.sk-opts .sk-card .sk-cline { font-size: 0.72rem; }
.sk-opts .sk-card .sk-tag { position: static; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8f8571; }
.sk-opts .sk-card.on { border-color: #e9c97a; box-shadow: inset 0 0 0 1px #e9c97a; }
.sk-opts .sk-card.on .sk-tag { color: #e9c97a; }
.sk-opts .sk-card.locked { opacity: 0.6; }
.sk-right { display: flex; flex-direction: column; gap: 0.6rem; }
.sk-detail { padding: 0.7rem 0.8rem; border: 8px solid transparent; border-image: url("../art/ui/px/frame-saltcrust.png") 8 round; image-rendering: pixelated; background: #11100d; }
.skd-head { display: flex; gap: 0.7rem; align-items: center; }
.skd-name { font: 600 1.15rem Georgia, serif; color: #f1e6c8; }
.skd-sub { font-size: 0.78rem; color: #a9a08c; margin-top: 0.15rem; }
.skd-desc { margin: 0.6rem 0 0.4rem; color: #ddd4bf; line-height: 1.38; }
.skd-runes { font-size: 0.8rem; color: #a6ece8; margin: 0.3rem 0; }
.skd-act { margin: 0.45rem 0 0; padding-top: 0.4rem; border-top: 1px solid #2c271e; color: #e9c97a; font-size: 0.85rem; }
.sk-right .rn-picker { display: flex; flex-direction: column; gap: 0.3rem; max-height: 15rem; overflow: auto; padding: 0.4rem; background: #0e0c09; border: 1px solid #4a3f2c; }
.rn-pick-head { font: 600 0.85rem Georgia, serif; color: #e9c97a; }
.sk-right .rn-bag { padding: 0.5rem; background: #0e0c09; border: 1px solid #2c271e; }
.sk-med { display: block; }
.sk-icon.big { display: block; }
.sk-opts .sk-card .sk-icon.big { width: 72px; height: 72px; }
.web-node.big .web-lbl { margin-top: 9px; }

/* P14 Bench: Wake Flares */
.flare-hero { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font: 700 1.4rem "Courier New", monospace; color: #ffe2b8; }
.flare-hero img { width: 36px; height: 36px; image-rendering: pixelated; }