/* Shared presentation layer. Scoped to the current HUD so ?ui=0 stays independent.
   Component files own layout and state; this file owns materials and feedback. */
body.ui2 {
  --ui-surface: #131716;
  --ui-raised: #242824;
  --ui-edge: #746347;
  --ui-gold: #d9bd80;
  --ui-text: #eee4ce;
  --ui-muted: #b3aa96;
  --ui-panel: radial-gradient(ellipse at 15% 0%, #41423355, transparent 65%), linear-gradient(145deg, #222824, #101513 75%);
  --ui-shadow: 0 18px 56px #000a, 0 3px 10px #0009, inset 0 1px #f7dfaa25;
  --ui-ease: cubic-bezier(.23, 1, .32, 1);
}

/* Recessed stone, fine metal edges, and quiet highlights leave the art in focus. */
body.ui2 #h2 .stone {
  background: linear-gradient(180deg, #e6cc9820, transparent 5%, #0004),
    radial-gradient(ellipse at 50% 0, #3c4338, #1b211e 60%, #0c100f);
  box-shadow: 0 -1px #e5ca8b99, 0 -3px #161b16, 0 -4px #8b795044,
    0 -12px 32px #0007, inset 0 2px #fff1c915, inset 0 -10px 22px #0009;
}
body.ui2 #h2 .glb .ring {
  background: conic-gradient(from 25deg, #292a26, #bba881, #534d3d, #131b1a,
    #867653, #282c26, #d4c6a0, #31362f, #706249, #292a26);
  box-shadow: 0 0 0 1px #080c0a, 0 0 0 2px #ad956940, 0 5px 16px #000d,
    0 0 24px var(--orb-aura), inset 0 0 5px #0009;
}
body.ui2 #h2 .glb.life { --orb-aura: #ff4c362f; }
body.ui2 #h2 .glb.mana { --orb-aura: #38bfff30; }
body.ui2 #h2 .slot {
  border-color: #7c7053;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 15%, #555b414d, transparent 75%), linear-gradient(#242b26, #101612);
  box-shadow: inset 0 1px #fff3cd24, inset 0 -3px 7px #0009, 0 2px 3px #000a, 0 0 0 1px #090e0b;
  transition: transform 130ms var(--ui-ease), border-color 130ms, box-shadow 130ms;
}
body.ui2 #h2 .slot .ic { filter: drop-shadow(0 2px 3px #000b); }
body.ui2 #h2 .slot kbd { color: #f1dfb6; font-variant-numeric: tabular-nums; }
body.ui2 #h2 .slot.on {
  border-color: var(--ui-gold);
  box-shadow: inset 0 0 16px #dab86b24, inset 0 -2px #d9bd80, 0 0 10px #d9bd8025;
}
body.ui2 #h2 .slot.bad { border-color: #eb806b; }
body.ui2 #h2 .grp + .grp { border-left: 1px solid #c8b17a30; padding-left: calc(var(--u)*9); }
body.ui2 #h2hint { color: #d0c8b6; letter-spacing: .025em; }
body.ui2 #h2camera { background: #101613ed; border-color: var(--ui-edge); padding: 4px 8px; }

/* One material language for inventory, progression and the pause menu. */
body.ui2 #invp,
body.ui2 #h2menu .box,
body.ui2 .skill-panel,
body.ui2 .skill-confirm .box {
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 1px solid var(--ui-edge);
  border-radius: 6px;
  box-shadow: var(--ui-shadow), 0 0 0 3px #0c100ed9, 0 0 0 4px #b79d5f38;
  scrollbar-width: thin;
  scrollbar-color: #796b4d #121713;
}
body.ui2 #invp { padding: 8px 10px 7px; }
body.ui2 #invp .hd { padding-bottom: 6px; margin-bottom: 7px; border-color: #bba06a40; }
body.ui2 #invp .hd h3,
body.ui2 #h2menu h3,
body.ui2 .skill-panel h2 {
  font-family: var(--ft);
  color: #f0dfb8;
  letter-spacing: .14em;
  text-shadow: 0 2px 3px #0008;
}
body.ui2 #invp .hd h3 { font-size: 18px; }
body.ui2 #invp .st {
  background: linear-gradient(145deg, #0c120fcc, #1c231acc);
  border-color: #85744f4d;
  border-radius: 3px;
  box-shadow: inset 0 1px 8px #0004;
  padding: 5px 6px;
}
body.ui2 #invp .st h4, body.ui2 #invp .rs h4 { padding-bottom: 4px; margin-bottom: 4px; color: var(--ui-gold); }
body.ui2 #invp .row { line-height: 1.8; }
body.ui2 #invp .row span, body.ui2 #invp .ft, body.ui2 #invtip .t, body.ui2 #invtip .h { color: var(--ui-muted); }
body.ui2 #invp .row b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
body.ui2 #invp .slot { background: linear-gradient(145deg, #151d17, #0c110e); border-color: #81724c80; border-radius: 3px; }
body.ui2 #invp .slot>em { color: #a69b7e; font-size: 10px; }
body.ui2 #invp .sil { opacity: .23; }
body.ui2 #invp .it { border-radius: 3px; transition: filter 120ms, box-shadow 120ms; }
body.ui2 #invp .it.r2, body.ui2 #invp .it.r3 {
  background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--rc) 32%, #18221a), #0b110e);
  box-shadow: inset 0 1px #fff3, inset 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent), 0 0 9px color-mix(in srgb, var(--rc) 20%, transparent);
}
body.ui2 #h2menu .box { padding: 14px 17px; max-height: 82vh; overflow: auto; }
body.ui2 #h2menu h3 { padding-bottom: 8px; margin-bottom: 10px; }
body.ui2 #h2menu { background: #050b08b8; }
body.ui2 .skill-panel header { background: linear-gradient(90deg, #d5b8750c, transparent); }
body.ui2 .skill-detail { background: #0b120fb3; }
body.ui2 .skill-panel footer { color: var(--ui-muted); }
body.ui2 .skill-node.learned { background: linear-gradient(100deg, #b49b5629, #26342a55); box-shadow: inset 3px 0 var(--ui-gold); }
body.ui2 .skill-node.selected { outline: 1px solid var(--ui-gold); outline-offset: 2px; }

/* Controls share tactile press feedback and a visible keyboard focus ring. */
body.ui2 #h2menu .b,
body.ui2 #invp :is(.btn, .tab),
body.ui2 .skill-panel button,
body.ui2 .skill-confirm button,
body.ui2 #skills-hud button {
  background: linear-gradient(#394035, #20291f);
  border: 1px solid #87754f;
  border-radius: 3px;
  color: var(--ui-text);
  box-shadow: inset 0 1px #fff0c61c, 0 2px 4px #0005;
  transition: transform 120ms var(--ui-ease), border-color 120ms, filter 120ms;
}
body.ui2 #h2menu .b { width: 100%; padding: 6px 8px; }
body.ui2 #invp :is(.btn, .tab) { padding: 4px 5px; }
body.ui2 #invp .tab.on { background: linear-gradient(#695a36, #393321); border-color: var(--ui-gold); color: #fff0c8; }
body.ui2 :is(#h2menu, #invp, .skill-panel, .skill-confirm, #skills-hud) :is(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid #f3d89a;
  outline-offset: 3px;
}
body.ui2 :is(#h2menu .b, #invp .btn, #invp .tab, .skill-panel button, .skill-confirm button, #skills-hud button):not(:disabled):active,
body.ui2 #h2 .slot:active { transform: translateY(1px) scale(.97); }
body.ui2 :is(.skill-panel, .skill-confirm, #skills-hud) button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Tooltips and messages read as small, illuminated plaques. */
body.ui2 #h2tip, body.ui2 #invtip {
  padding: 6px 8px;
  background: linear-gradient(145deg, #242b24fa, #0c120ffa);
  border-color: #b29a68;
  border-radius: 4px;
  box-shadow: 0 8px 28px #000b, inset 0 1px #ffe9bc20;
  color: var(--ui-text);
  line-height: 1.5;
}
body.ui2 #h2toast div {
  max-width: calc(100vw - 48px);
  white-space: normal;
  text-align: center;
  padding: 5px 12px;
  background: linear-gradient(100deg, #162019f2, #273025f2, #162019f2);
  border-color: #ac9562;
  border-radius: 3px;
  box-shadow: 0 6px 24px #0009, inset 0 1px #fff1c51a;
}
body.ui2 .h2p .bar { border-color: #9c8454; box-shadow: 0 0 0 1px #080d0a, 0 0 0 3px #292f25, 0 5px 16px #0009; }
body.ui2 .h2p .nm { letter-spacing: .16em; }
body.ui2 .lt { padding: 3px 5px; background: linear-gradient(#263024f2, #0d140ff2); }
body.ui2 #mm { border-color: #87724d; box-shadow: 0 0 0 1px #151b13, 0 0 0 3px #c9ae7040, 0 8px 24px #0007; }

@media (hover: hover) and (pointer: fine) {
  body.ui2 #h2 .slot:hover { transform: translateY(-2px); border-color: #f0d79c; box-shadow: inset 0 1px #fff5, 0 4px 12px #0008, 0 0 12px #d9bd8026; }
  body.ui2 :is(#h2menu .b, #invp .btn, #invp .tab, .skill-panel button, .skill-confirm button, #skills-hud button):not(:disabled):hover { border-color: #e8ce92; filter: brightness(1.14); }
}
@keyframes ui-panel-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body.ui2 #invp, body.ui2 #h2menu .box, body.ui2 .skill-panel:not([hidden]), body.ui2 .skill-confirm:not([hidden]) .box { animation: ui-panel-enter 180ms var(--ui-ease); }
@media (max-width: 760px) {
  body.ui2 #invp { padding: 6px; }
  body.ui2 #invp .hd { flex-wrap: wrap; gap: 4px; }
  body.ui2 #invp .hd h3 { font-size: 16px; }
  body.ui2 #h2hint { padding: 0 10px; box-sizing: border-box; font-size: 10px; }
  body.ui2 #h2menu .box { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui2 #invp, body.ui2 #h2menu .box, body.ui2 .skill-panel, body.ui2 .skill-confirm .box, body.ui2 #h2 .slot.bad { animation: none; }
  body.ui2 #h2 .slot, body.ui2 #invp .it,
  body.ui2 :is(#h2menu .b, #invp .btn, #invp .tab, .skill-panel button, .skill-confirm button, #skills-hud button) { transition: none; }
  body.ui2 #h2 .slot:hover, body.ui2 #h2 .slot:active,
  body.ui2 :is(#h2menu .b, #invp .btn, #invp .tab, .skill-panel button, .skill-confirm button, #skills-hud button):active { transform: none; }
}

/* Persistent actions live in the HUD or this shared navigation, never on new
   floating launchers. Feature panels reuse these materials and control states. */
body.ui2 #h2menu .box { width: min(600px, calc(100vw - 32px)); max-width: 600px; box-sizing: border-box; }
.ui-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 11px 0; }
.ui-navigation section { min-width: 0; }
.ui-navigation h4 { margin: 0 0 4px; color: var(--ui-muted); font: 12px var(--ft, Georgia, serif); letter-spacing: .1em; }
.ui-navigation [hidden] { display: none !important; }
.ui-nav-button { display: grid; align-content: center; align-items: center; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 5px; width: 100%; text-align: left; margin: 4px 0; }
.ui-nav-button small { grid-row: 2; color: var(--ui-muted); font-size: 11px; }
.ui-nav-button small:empty, .ui-nav-button kbd:empty { display: none; }
.ui-nav-button kbd { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--ui-gold); font: 11px var(--ft, Georgia, serif); }
.ui-settings { border-top: 1px solid var(--ui-edge); padding-top: 7px; }
.ui-settings summary { cursor: pointer; min-height: 44px; line-height: 44px; color: var(--ui-gold); }
#ui-panel-backdrop { position: fixed; inset: 0; z-index: 19; background: #050b0888; pointer-events: auto; }
#ui-panel-backdrop[hidden] { display: none; }
body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button) {
  min-height: 44px; box-sizing: border-box; padding: 5px 7px; font: inherit;
  border: 1px solid var(--ui-edge); border-radius: 4px; color: var(--ui-text);
  background: linear-gradient(#394035, #20291f); box-shadow: inset 0 1px #fff0c61c, 0 2px 4px #0005;
  cursor: pointer; transition: transform 120ms var(--ui-ease), border-color 120ms;
}
body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button):disabled,
body.ui2 #h2 button:disabled { opacity: .45; cursor: not-allowed; }
body.ui2 :is(.ui-navigation, #h2, #frontierjournal, #ledgerp, #forgep, .construction-panel, .ui-settings) :is(button, summary, [tabindex]):focus-visible {
  outline: 2px solid #f3d89a; outline-offset: 3px;
}
body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button):not(:disabled):active { transform: scale(.97); }
body.ui2 :is(#frontierjournal, #ledgerp, #forgep, #economyp, .construction-panel) {
  background: var(--ui-panel); color: var(--ui-text); border: 1px solid var(--ui-edge);
  border-radius: 6px; box-shadow: var(--ui-shadow); font-family: var(--fx, Georgia, serif);
  scrollbar-width: thin; scrollbar-color: #796b4d #121713;
}
body.ui2 #frontierjournal { top: 5vh; bottom: calc(var(--u)*135); left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); max-height: none; z-index: 61; }
body.ui2 #ledgerp { top: 10vh; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); max-height: calc(85vh - var(--u)*135); overflow: auto; padding: 12px; box-sizing: border-box; z-index: 61; }
body.ui2 #ledgerp h4 { align-items: center; gap: 7px; padding-bottom: 6px; }
body.ui2 #ledgerp div.r { white-space: normal; padding: 4px 0; }
body.ui2 #h2status { position: absolute; bottom: calc(100% + 8px); left: calc(var(--u)*150); right: calc(var(--u)*150); padding: 5px 7px; border: 1px solid #74634788; border-radius: 4px; background: #131716e8; color: var(--ui-text); font: 12px/1.4 var(--fx); pointer-events: none; }
body.ui2 #h2status:empty { display: none; }
body.ui2 #h2status #skills-hud { position: static; width: auto; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; font: inherit; color: inherit; }
body.ui2 #h2status #skills-hud .bar { margin: 4px 0; background: #343c30; }
body.ui2 #h2status #frontierbar { position: static; max-width: none; display: block; font: inherit; color: var(--ui-muted); }
body.ui2 #h2status #frontierbar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui2 #h2status .ui-night-status { color: var(--ui-gold); }
body.ui2.ui-has-status:not(.mobile) #h2hint { bottom: calc(var(--u)*122 + 90px); }
body.ui2.ui-has-status:not(.mobile) #h2camera { bottom: calc(var(--u)*122 + 112px); }
body.ui2.ui-has-status:not(.mobile) #h2toast { bottom: calc(var(--u)*122 + 90px); }
@media (hover: hover) and (pointer: fine) {
  body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button):not(:disabled):hover { border-color: var(--ui-gold); }
}
@media (max-width: 600px) { .ui-navigation { grid-template-columns: 1fr; gap: 6px; } }
@media (prefers-reduced-motion: reduce) {
  body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button) { transition: none; }
  body.ui2 :is(.ui-button, #frontierjournal button, #ledgerp button, #forgep button, .construction-panel button, #economyp .eco-button):active { transform: none; }
}