#ocean-warning {
    position: fixed; top: 19%; left: 50%; transform: translateX(-50%);
    z-index: 30; max-width: calc(100% - 32px); padding: 11px 21px;
    border: 1px solid #8fd7cc66; border-radius: 3px;
    background: #092c35de; color: #e1f3dd; text-align: center;
    font-size: 13px; letter-spacing: .06em; pointer-events: none;
    box-shadow: 0 8px 32px #001a2644;
  }
  #ocean-cinematic {
    --ocean-fade: 0;
    position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    color: #e1f4e9; cursor: default;
    background: linear-gradient(180deg, #00141f33, transparent 48%, #00101899);
  }
  #ocean-cinematic[hidden], #ocean-warning[hidden] { display: none; }
  #ocean-cinematic::before, #ocean-cinematic::after {
    content: ''; position: absolute; left: 0; right: 0; height: 9%;
    background: #02090d; z-index: 2;
  }
  #ocean-cinematic::before { top: 0; }
  #ocean-cinematic::after { bottom: 0; }
  .ocean-shade {
    position: absolute; inset: 0; background: #02090d; opacity: var(--ocean-fade);
  }
  .ocean-caption {
    position: absolute; bottom: 12%; left: 24px; right: 24px;
    text-align: center; text-shadow: 0 2px 22px #000c;
  }
  #ocean-eyebrow { color: #9dc9ba; font-size: 10px; font-weight: 600; letter-spacing: .4em; }
  #ocean-title { margin: 10px 0; font-family: Georgia, serif; font-size: clamp(28px, 5vw, 58px); font-weight: 400; letter-spacing: .07em; }
  #ocean-subtitle { margin: 0; font-size: clamp(12px, 1.7vw, 15px); color: #b8ceca; letter-spacing: .04em; }
  .ocean-dead .ocean-caption { bottom: 42%; }
  body.ocean-cinematic > :not(#scene):not(#ocean-cinematic):not(script) { visibility: hidden !important; }
  body.ocean-cinematic #scene { cursor: default; }

  .gate-objective { width: 100%; margin-top: 3px; padding-top: 6px; border-top: 1px solid #ddcc9955; font-size: 11px; color: #e6d7bb; }
  .gate-objective b { float: right; margin-left: 12px; color: #f2c279; }
  .gate-objective small { display: block; margin-top: 3px; font-size: 9px; color: #bfcbb6; }
  @media (max-width: 760px) { .gate-objective { font-size: 10px; } .gate-objective small { display: none; } }
  #victory {
    --victory-reveal: 0;
    position: fixed; inset: 0; z-index: 1100; color: #fff1c8;
    display: grid; align-items: end; justify-items: center;
    padding: max(30px, 7vh) 24px; box-sizing: border-box; text-align: center;
    background: linear-gradient(180deg, #20160738, transparent 36%, #122519aa);
    border-top: 5vh solid #142019; border-bottom: 5vh solid #142019;
  }
  #victory[hidden], #victory-replay[hidden] { display: none; }
  .victory-card { opacity: var(--victory-reveal); transform: translateY(calc((1 - var(--victory-reveal)) * 18px)); text-shadow: 0 3px 24px #102616; }
  .victory-sigil { display: block; color: #ffe4a0; font-size: 38px; }
  .victory-eyebrow { font-size: 10px; letter-spacing: .3em; }
  #victory-title { margin: 12px 0; font: 400 clamp(32px, 5vw, 64px) Georgia, serif; letter-spacing: .03em; }
  .victory-card > p:last-of-type { font-size: 14px; color: #dfebce; }
  #victory-replay { margin-top: 18px; padding: 12px 28px; border: 1px solid #edd796; border-radius: 4px; background: #1a3428e6; color: #fff0c7; font: inherit; cursor: pointer; }
  #victory-replay:hover, #victory-replay:focus-visible { background: #3b583c; outline: 2px solid #fff0c7; outline-offset: 4px; }
  body.victorious > :not(#scene):not(#victory):not(script) { visibility: hidden !important; }
  body.victorious #scene { cursor: default; }

  :root {
    --ink: #33412e;
    --cream: #fdf7e8;
    --bar-bottom: max(clamp(16px, 3vw, 26px), env(safe-area-inset-bottom));
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
      radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, .5), transparent 70%),
      linear-gradient(180deg, #8ec3e7 0%, #b6dbee 36%, #dcecdf 63%, #eef4df 100%);
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }
  #scene {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
    z-index: 1;
  }
  #scene.dragging { cursor: grabbing; }
  body.look-active #scene { cursor: none; }

  #vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(125% 95% at 50% 54%, transparent 52%, rgba(47, 65, 38, .26) 100%);
  }

  #water-overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at 50% 25%, rgba(57, 173, 193, .28), rgba(5, 49, 87, .9));
  }
  #water-status {
    position: fixed;
    left: 50%;
    top: max(24px, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 3;
    padding: 8px 16px;
    border: 1px solid rgba(207, 242, 247, .6);
    border-radius: 999px;
    background: rgba(13, 68, 88, .78);
    color: #e3f7fa;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
  }

  #inventory {
    position: fixed;
    left: 50%;
    bottom: var(--bar-bottom);
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: none;
  }
  #item-name {
    max-width: min(78vw, 420px);
    overflow: hidden;
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(253, 248, 235, .64);
    box-shadow: 0 5px 18px rgba(40, 60, 30, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #3f5038;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #hotbar {
    display: flex;
    align-items: stretch;
    gap: clamp(2px, .5vw, 4px);
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 12px;
    background: rgba(41, 55, 34, .64);
    box-shadow: 0 10px 28px rgba(27, 43, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    pointer-events: auto;
    touch-action: manipulation;
  }
  .slot {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(28px, 5.2vw, 46px);
    aspect-ratio: 1;
    appearance: none;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: rgba(20, 29, 16, .48);
    color: var(--cream);
    font: inherit;
    cursor: pointer;
    transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  }
  .slot:hover { background: rgba(73, 92, 58, .58); border-color: rgba(255, 255, 255, .38); }
  .slot.selected {
    transform: translateY(-2px);
    border-color: #f2cf7a;
    background: rgba(86, 106, 66, .78);
    box-shadow: 0 0 0 2px rgba(242, 207, 122, .24), 0 4px 12px rgba(15, 25, 12, .25);
  }
  .slot:focus-visible { outline: 2px solid #f8f0d8; outline-offset: 2px; }
  .slot .key {
    position: absolute;
    top: 2px;
    left: 4px;
    color: rgba(253, 248, 235, .48);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
  }
  .slot .icon {
    width: 78%;
    height: 78%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(10, 18, 8, .35));
    pointer-events: none;
  }
  .slot .count {
    position: absolute;
    right: 4px;
    bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(7, 12, 5, .9), 0 0 4px rgba(7, 12, 5, .65);
    pointer-events: none;
  }
  @keyframes slot-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); background: rgba(142, 161, 102, .9); }
    100% { transform: scale(1); }
  }
  .slot.pop { animation: slot-pop .3s ease; }
  .slot.selected.pop { animation-name: slot-pop-selected; }
  @keyframes slot-pop-selected {
    0% { transform: translateY(-2px) scale(1); }
    45% { transform: translateY(-2px) scale(1.14); background: rgba(142, 161, 102, .9); }
    100% { transform: translateY(-2px) scale(1); }
  }

  #hi {
    position: fixed;
    touch-action: manipulation;
    right: clamp(18px, 4vw, 42px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 4;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 11px 19px;
    background: rgba(58, 85, 47, .9);
    color: #fdf8ea;
    font: inherit;
    font-size: 13px;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(35, 55, 25, .24);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  }
  #hi:hover { transform: translateY(-2px); background: rgba(71, 101, 56, .96); box-shadow: 0 14px 30px rgba(35, 55, 25, .28); }
  #hi:active { transform: translateY(0) scale(.97); }
  #hi:focus-visible { outline: 2px solid #f8f0d8; outline-offset: 3px; }
  #hi span { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #f2cf7a; vertical-align: 2px; }

  #bubble {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    padding: 7px 13px 8px;
    border-radius: 14px;
    background: #fffdf4;
    color: #3b4a33;
    font-family: "Iowan Old Style", Palatino, Georgia, serif;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 7px 20px rgba(40, 60, 30, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    will-change: transform;
  }
  #bubble.show { opacity: 1; }
  #bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: #fffdf4;
    transform: translateX(-50%) rotate(45deg);
  }

  #error {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    place-items: center;
    padding: 32px;
    background: #eef3e3;
    color: #3a4933;
    font-size: 15px;
    text-align: center;
  }
  #error.show { display: grid; }

  @media (max-width: 680px) {
    #hi { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 86px); right: 16px; }
  }

  .top-actions {
    position: fixed;
    top: clamp(18px, 4vw, 40px);
    right: clamp(18px, 4vw, 42px);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
  }
  #music, #look, #effects {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    appearance: none;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    background: rgba(253, 248, 235, .5);
    color: #3c4b35;
    font: inherit;
    font-size: 12px;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(42, 60, 32, .15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .16s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    touch-action: manipulation;
    pointer-events: auto;
  }
  #music .note, #look .mouse {
    font-family: "Iowan Old Style", Palatino, Georgia, serif;
    font-size: 16px;
    line-height: 1;
    color: #6f8a4a;
    transition: color .2s ease;
  }
  #look .mouse { font-size: 17px; }
  #music:hover, #look:hover, #effects:hover { transform: translateY(-2px); background: rgba(255, 252, 242, .72); box-shadow: 0 12px 28px rgba(42, 60, 32, .2); }
  #music:active, #look:active, #effects:active { transform: translateY(0) scale(.97); }
  #music.on, #look.on, #effects.on { background: rgba(58, 85, 47, .92); color: #fdf8ea; border-color: rgba(255, 255, 255, .6); box-shadow: 0 10px 28px rgba(35, 55, 25, .28); }
  #music.on .note, #look.on .mouse { color: #f2cf7a; }
  #music:focus-visible, #look:focus-visible, #effects:focus-visible { outline: 2px solid #f8f0d8; outline-offset: 3px; }
  #look[hidden] { display: none; }

  @media (max-width: 680px) {
    .top-actions { top: max(14px, env(safe-area-inset-top)); right: 14px; gap: 6px; }
    #music, #look, #effects { padding: 8px 12px; font-size: 11px; }
    #music .note, #look .mouse { font-size: 15px; }
  }

  @media (max-width: 480px) {
    #look .label { display: none; }
  }

  @media (max-width: 380px) {
    #music, #look, #effects { padding: 9px 11px; }
    #music .label { display: none; }
  }

  @media (pointer: coarse) {
    #look { display: none; }
  }

  /* Keep the center of play clear; each glance has a stable home. */
  #defense-hud { position: relative; z-index: 3; pointer-events: none; color: #f4ecd7; font-size: 11px; font-variant-numeric: tabular-nums; }
  .objective-card, .defense-wave, .defense-stats {
    position: fixed; top: max(20px, env(safe-area-inset-top));
    border: 1px solid rgba(245, 228, 175, .32); border-radius: 10px;
    background: rgba(27, 43, 31, .87); box-shadow: 0 5px 20px #18271e26;
    backdrop-filter: blur(10px);
  }
  .objective-card { left: max(20px, env(safe-area-inset-left)); width: 250px; padding: 12px 14px; }
  .defense-heading { display: flex; gap: 8px; align-items: center; }
  .defense-heading strong { font-size: 12px; font-weight: 600; }
  #tree-hp { margin-left: auto; font-size: 10px; color: #e5d5a8; }
  .hearth-symbol { color: #e9b955; text-shadow: 0 0 12px #f2a93a73; }
  #tree-health { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 2px; background: #142119; }
  #tree-health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #819c59, #d1cb76); transition: width .25s ease; }
  #tree-health.critical #tree-health-fill { background: linear-gradient(90deg, #b3543e, #e8a158); }
  .objective-card.damaged { animation: hearth-hit .4s ease; }
  @keyframes hearth-hit { 30% { border-color: #ee9b66; box-shadow: 0 0 18px #ee9b6655; } }
  .defense-stats { top: max(70px, calc(env(safe-area-inset-top) + 50px)); right: max(20px, env(safe-area-inset-right)); display: flex; gap: 22px; padding: 9px 13px; color: #c0cbb6; }
  .defense-stats b { color: #fff4d6; font-weight: 600; }
  .coin-symbol { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border: 2px solid #e9bd58; background: #a87931; vertical-align: -1px; }
  .defense-wave { left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 196px; padding: 10px 20px; }
  .defense-wave strong { font-size: 12px; font-weight: 600; letter-spacing: .025em; }
  #defense-status { font-size: 10px; color: #c0cbb6; }
  #controls-help { position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: var(--bar-bottom); z-index: 6; font-size: 12px; }
  #controls-help summary { list-style: none; cursor: pointer; border: 1px solid #ffffff66; border-radius: 20px; padding: 9px 13px; background: #1b2b1fde; color: #f4ecd7; }
  #controls-help summary::-webkit-details-marker { display: none; }
  #controls-help summary:focus-visible { outline: 2px solid #f2cf7a; outline-offset: 3px; }
  #hint { position: absolute; bottom: 48px; left: 0; width: 290px; padding: 18px; border: 1px solid #d9c28266; border-radius: 12px; background: #1b2b1ff5; color: #d8dfcd; box-shadow: 0 10px 30px #14211966; line-height: 1.9; }
  #hint strong { color: #f2cf7a; font-size: 13px; }
  #hint p { margin: 10px 0; }
  #hint b { color: #fff4d6; margin-right: 4px; }
  #hint small { color: #b8c4ab; line-height: 1.5; display: block; }
  .top-actions { top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }
  #water-status { top: 94px; }
  #defeat { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(400px, calc(100vw - 32px)); padding: 32px; text-align: center; color: #f4ecd7; border: 1px solid #8d895e; border-radius: 16px; background: rgba(30, 43, 32, .95); box-shadow: 0 20px 100px #18271e88; backdrop-filter: blur(12px); }
  #defeat[hidden] { display: none; }
  #defeat h2 { font: 26px Georgia, serif; margin: 16px 0 12px; }
  #defeat p { font-size: 13px; line-height: 1.6; color: #c4c8af; }
  .defeat-ember { font-size: 30px; color: #ae7847; }
  #defense-retry { cursor: pointer; margin-top: 10px; border: 1px solid #d9c282; border-radius: 7px; padding: 11px 20px; background: #e3c780; color: #293e2a; font: 600 13px system-ui, sans-serif; }
  #defense-retry:focus-visible { outline: 2px solid #fff6d7; outline-offset: 4px; }
  @media (max-width: 1000px) {
    .top-actions .label { display: none; }
    .top-actions button { min-width: 38px; justify-content: center; }
  }
  @media (max-width: 760px) {
    .objective-card { top: max(12px, env(safe-area-inset-top)); left: 12px; width: 190px; padding: 10px; }
    .defense-heading { gap: 5px; }
    .defense-heading strong { font-size: 11px; }
    #tree-hp { font-size: 9px; }
    .top-actions { top: max(12px, env(safe-area-inset-top)); right: 12px; gap: 4px; }
    #music, #look, #effects { padding: 8px 10px; }
    .defense-wave { top: max(100px, calc(env(safe-area-inset-top) + 88px)); padding: 7px 14px; min-width: 170px; }
    .defense-stats { top: max(69px, calc(env(safe-area-inset-top) + 57px)); right: 12px; gap: 12px; padding: 5px 9px; font-size: 10px; }
    #water-status { top: 186px; }
    #controls-help { left: 12px; bottom: calc(var(--bar-bottom) + 88px); }
    #controls-help summary span { display: none; }
    #hi { right: 12px; bottom: calc(var(--bar-bottom) + 88px); padding: 9px 13px; }
  }
  @media (max-height: 500px) and (min-width: 761px) {
    .objective-card, .defense-wave, .top-actions { top: 10px; }
    .defense-stats { top: 56px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  #effects.muted { opacity: .65; }
  @media (max-width: 380px) { .top-actions #look { display: none; } }
  .speaker { flex: none; }
  .sound-slash, #effects.muted .sound-waves { display: none; }
  #effects.muted .sound-slash { display: block; }

  #upgrade-open { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--bar-bottom) + 60px); z-index: 6; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid #e4c97e; border-radius: 10px; background: #253b2eed; color: #fff0c1; box-shadow: 0 6px 20px #14211940; font: 600 12px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
  #upgrade-open > span { font-size: 19px; color: #e8c36e; }
  kbd { font: 10px system-ui, sans-serif; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .65; }
  #upgrade-open:hover { background: #3b553d; }
  #upgrade-open:focus-visible, #upgrade-menu button:focus-visible { outline: 2px solid #f2cf7a; outline-offset: 3px; }
  #upgrade-menu { width: min(680px, calc(100vw - 24px)); max-height: min(740px, calc(100dvh - 24px)); overflow: auto; padding: 0; border: 1px solid #bda86c; border-radius: 18px; background: #1d2d25; color: #f4ecd7; box-shadow: 0 30px 100px #06180dbb; }
  #upgrade-menu::backdrop { background: #071c1399; backdrop-filter: blur(5px); }
  #upgrade-menu[open] { animation: training-in .16s ease-out; }
  @keyframes training-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .upgrade-shell { padding: 16px 18px; background: radial-gradient(ellipse at 100% 0, #53603b33, transparent 60%); }
  .upgrade-topline { position: sticky; top: 0; z-index: 1; min-height: 34px; background: #1d2d25; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 10px; letter-spacing: .16em; color: #cdbc87; }
  #upgrade-close { border: 0; border-radius: 6px; background: #ffffff0a; color: #d6dccb; padding: 8px 10px; cursor: pointer; font: 12px system-ui, sans-serif; letter-spacing: 0; }
  #upgrade-close kbd { margin-left: 5px; }
  .upgrade-tabs { display: flex; gap: 5px; margin: 8px 0 12px; padding: 3px; background: #12241b; border-radius: 9px; width: fit-content; }
  .upgrade-tabs button { background: transparent; border: 1px solid transparent; padding: 7px 13px; border-radius: 6px; color: #afc0a5; font: 600 12px system-ui, sans-serif; cursor: pointer; }
  .upgrade-tabs button[aria-pressed="true"] { background: #3d533a; border-color: #c1bc6e66; color: #fff1c9; }
  .upgrade-tabs button[hidden] { display: none; }
  .upgrade-character { display: flex; gap: 10px; align-items: center; }
  #upgrade-emblem { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid #d5bb6e; border-radius: 12px; background: linear-gradient(145deg, #5b7049, #314835); color: #f3d58e; font: 600 13px Georgia, serif; box-shadow: inset 0 0 0 4px #213a2a; }
  #upgrade-role { margin: 0 0 3px; text-transform: capitalize; font-size: 11px; color: #b4c3a6; letter-spacing: .04em; }
  #upgrade-title { margin: 0; font: 24px Georgia, serif; color: #fff2ce; }
  #upgrade-note { font-size: 12px; line-height: 1.4; color: #b5c4ad; margin: 8px 0; }
  #upgrade-resources { font-size: 12px; font-variant-numeric: tabular-nums; color: #f2d58e; padding: 8px 10px; border: 1px solid #b6b97d33; background: #102318; border-radius: 8px; }
  #upgrade-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .upgrade-card { min-width: 0; padding: 11px; background: #2a3d30; border: 1px solid #bfca9a26; border-radius: 11px; display: flex; flex-direction: column; }
  .upgrade-card-heading { display: flex; align-items: center; gap: 9px; }
  .upgrade-icon { display: block; flex: none; width: 40px; height: 40px; object-fit: cover; border: 1px solid #bda86c66; border-radius: 9px; background: #10251f; box-shadow: 0 3px 9px #071c1340; }
  .upgrade-card-summary { flex: 1; min-width: 0; }
  .upgrade-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 600; margin: 0; }
  .upgrade-rank { color: #c7ceaa; font-size: 10px; font-weight: 400; white-space: nowrap; }
  .upgrade-pips { display: flex; gap: 4px; margin-top: 6px; }
  .upgrade-pips i { width: 22px; height: 4px; background: #14291c; border-radius: 1px; }
  .upgrade-pips i.trained { background: #dfc375; }
  .upgrade-card p { color: #bdcbb4; font-size: 11px; line-height: 1.4; margin: 7px 0; }
  .upgrade-effect { color: #f4e5bb; font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
  .upgrade-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; }
  .upgrade-cost { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; color: #b8c3a9; font-size: 10px; }
  .upgrade-cost span { background: #152b1e; border: 1px solid #72916755; padding: 4px 6px; border-radius: 5px; color: #c8dbad; }
  .upgrade-cost span.short { color: #edbc99; border-color: #c18b6655; }
  .upgrade-card button { min-height: 34px; padding: 7px 9px; background: #dec37a; color: #203a28; border: 1px solid #f0d99d; border-radius: 6px; font: 600 12px system-ui, sans-serif; cursor: pointer; }
  .upgrade-card button:hover:not(:disabled) { background: #f0d99d; }
  .upgrade-card button:disabled { background: #ffffff06; color: #a6b49c; border-color: #a4b29033; cursor: default; }
  #upgrade-message:empty { margin: 0; }
  #upgrade-message { color: #f2d58e; margin: 8px 0 0; font-size: 12px; }
  #upgrade-menu footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #bac69526; margin-top: 10px; padding-top: 8px; font-size: 10px; line-height: 1.6; color: #a1b499; }
  @media (max-width: 760px) {
    #upgrade-open { right: 12px; bottom: calc(var(--bar-bottom) + 134px); padding: 8px 11px; }
  }
  @media (max-width: 520px) {
    .upgrade-shell { padding: 12px; }
    #upgrade-cards { grid-template-columns: 1fr; gap: 10px; }
    .upgrade-card { padding: 10px; }
    .upgrade-card p { min-height: 0; }
    #upgrade-title { font-size: 22px; }
    #upgrade-menu footer { flex-direction: column; gap: 3px; }
  }

  #minimap-hud { --minimap-size: 164px; position: fixed; left: max(20px, env(safe-area-inset-left)); bottom: calc(var(--bar-bottom) + 90px); z-index: 4; width: var(--minimap-size); pointer-events: none; }
  #minimap { display: block; width: 100%; height: var(--minimap-size); border-radius: 50%; filter: drop-shadow(0 5px 12px #0c241766); }
  #player-coordinates { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; width: max-content; min-width: 100%; max-width: calc(100vw - 40px); margin-top: 6px; padding: 6px 9px; border: 1px solid #d4c58955; border-radius: 7px; background: #172b23ed; color: #a9bea0; font: 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; box-shadow: 0 3px 10px #0c241733; }
  #player-coordinates span { white-space: nowrap; }
  #player-coordinates b { color: #fff1cb; font-weight: 500; }
  @media (max-width: 760px) { #minimap-hud { --minimap-size: 122px; left: 10px; bottom: calc(var(--bar-bottom) + 140px); } }
  @media (max-width: 760px) { #player-coordinates { max-width: calc(100vw - 180px); gap: 4px 8px; } }
  @media (max-height: 500px) and (min-width: 761px) { #minimap-hud { --minimap-size: 120px; } }

  /* Strategic controls leave the map open above the tower and inventory rows. */
  #strategy-toggle { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--bar-bottom) + 112px); z-index: 7; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid #e2c481; border-radius: 10px; background: #203a31ed; box-shadow: 0 6px 20px #14211940; color: #fff0c1; font: 600 12px system-ui, sans-serif; cursor: pointer; }
  #strategy-toggle i { font-style: normal; font-size: 20px; color: #e9ca81; }
  #strategy-toggle:hover { background: #3a5546; }
  #strategy-toggle:focus-visible, #rts-hud button:focus-visible { outline: 2px solid #f3cf7d; outline-offset: 2px; }
  #rts-hud { position: fixed; inset: 0; z-index: 6; pointer-events: none; color: #edead9; font-size: 12px; }
  #rts-hud[hidden], #rts-hud [hidden] { display: none; }
  #rts-hud button { cursor: pointer; font-family: inherit; }
  .rts-banner { position: absolute; top: 78px; left: 20px; display: flex; align-items: center; gap: 12px; }
  .rts-live { color: #d1efd6; letter-spacing: .12em; font-size: 9px; font-weight: 700; text-shadow: 0 1px 4px #071d18; }
  .rts-camera-actions { pointer-events: auto; display: flex; gap: 4px; }
  .rts-camera-actions button, #rts-close, #rts-pack { padding: 6px 8px; border: 1px solid #a2b5a24d; border-radius: 5px; color: #dfdfcb; background: #162b24ed; font-size: 10px; white-space: nowrap; }
  .rts-camera-actions button:hover, #rts-close:hover, #rts-pack:hover { border-color: #e2c481; color: #fff1ca; }
  #rts-rotate-left, #rts-rotate-right { font-size: 18px; line-height: 1; }
  #rts-compass { width: 36px; display: grid; place-items: center; padding: 2px; }
  #rts-compass-needle { display: flex; flex-direction: column; align-items: center; color: #f3cf7d; font-size: 12px; line-height: .8; }
  #rts-compass-needle small { font-size: 8px; line-height: 1; }
  #rts-resources { position: absolute; top: 78px; right: 20px; display: flex; border: 1px solid #97b39e45; border-radius: 7px; background: #10251fed; box-shadow: 0 5px 20px #091e1733; font-variant-numeric: tabular-nums; }
  #rts-resources > span { display: flex; align-items: baseline; gap: 5px; padding: 7px 10px; border-right: 1px solid #97b39e25; }
  #rts-resources > span:last-child { border: 0; }
  #rts-resources small { color: #a9beae; font-size: 9px; }
  #rts-resources b { font-size: 13px; font-weight: 600; color: #f7ebc8; }
  #rts-resources [data-resource="coins"] b { color: #f4cc6d; }
  .rts-dock { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 16px; right: 16px; pointer-events: auto; border: 1px solid #7e9a855c; border-top-color: #d6bd7b99; border-radius: 10px; background: linear-gradient(115deg, #152a23fa, #0d201cf7); box-shadow: 0 10px 35px #06130e66; backdrop-filter: blur(16px); }
  .rts-dock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px; border-bottom: 1px solid #98ac8d22; }
  .rts-dock h2 { margin: 0; font: 17px Georgia, serif; color: #f6eac9; white-space: nowrap; }
  #rts-count { margin-left: 8px; font: 10px system-ui, sans-serif; color: #a0b7a8; }
  #rts-animals { display: flex; gap: 5px; }
  .rts-animal { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid #8ba18b40; border-radius: 6px; background: #243a3066; color: #f6eac9; text-align: left; }
  .rts-animal:hover { border-color: #e2c481; background: #57745855; }
  .rts-animal img { display: block; flex: none; width: 28px; height: 28px; border-radius: 3px; background: #0f241e; }
  .rts-animal strong { font-size: 10px; font-weight: 600; }
  .rts-animal small { display: none; }
  .rts-workspace { padding: 6px 8px; }
  #rts-roster { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 5px; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: thin; scrollbar-color: #718b72 #10251f; overscroll-behavior-x: contain; }
  .tower-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 38px auto; align-items: center; gap: 4px 5px; text-align: left; min-width: 0; padding: 5px; border: 1px solid #8ba18b40; border-radius: 6px; background: #243a302e; color: #e4e9d6; transition: border-color .15s, background .15s; }
  .tower-card:hover { border-color: #c7c39b; background: #57745844; }
  .tower-card.chosen { border-color: #efd28b; background: #a6974c29; box-shadow: inset 0 0 0 1px #eace7e55; }
  .tower-card.unaffordable { border-color: #ed8e83; box-shadow: inset 0 0 0 1px #ed8e8359; }
  .tower-card.unaffordable .tower-art img { filter: saturate(.6) brightness(.8); }
  .tower-art { position: relative; display: block; width: 38px; height: 38px; }
  .tower-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
  .tower-art kbd { position: absolute; left: 1px; top: 1px; padding: 0 3px; background: #071912dd; color: #e9dfc6; border: 0; font-size: 8px; }
  .tower-card strong { font-size: 10px; font-weight: 600; line-height: 1.3; }
  .tower-price { grid-column: 1 / -1; color: #ccb989; font-size: 9px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tower-owned { position: absolute; bottom: 5px; left: 5px; color: #b3d8bd; font-size: 9px; }
  .tower-card.packed .tower-price { visibility: hidden; }
  .rts-detail { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-top: 1px solid #98ac8d22; }
  #rts-detail-icon { flex: none; width: 30px; height: 30px; object-fit: cover; border: 1px solid #a2b5a244; border-radius: 4px; }
  .rts-detail h3 { font-size: 12px; font-weight: 600; color: #f7e8bd; margin: 0; }
  .rts-detail p { margin: 2px 0 0; font-size: 10px; line-height: 1.4; color: #a6bcae; }
  #rts-detail-role { font-size: 9px; }
  #rts-detail-cost { color: #dfc787; margin-left: auto; }
  #rts-pack { color: #f0cd8d; }
  .rts-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px; color: #8da495; font-size: 9px; border-top: 1px solid #98ac8d22; }
  .rts-footer b { color: #c4d0bd; font-weight: 500; margin-right: 3px; }
  #rts-message { min-width: 0; margin: 0; color: #d4cfae; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rts-footer > span { flex: none; }
  body.rts-active #hi, body.rts-active #look, body.rts-active #upgrade-open, body.rts-active #aim-reticle, body.rts-active #bubble, body.rts-active #controls-help { display: none; }
  body.rts-active #scene { cursor: crosshair; }
  body.rts-active .defense-stats, body.rts-active #water-status { display: none; }
  body.rts-active #strategy-toggle { top: 20px; bottom: auto; right: 235px; padding: 7px 12px; }
  body.rts-active #minimap-hud { --minimap-size: 112px; bottom: 320px; }
  @media (max-width: 1000px) {
    .rts-live { display: none; }
    .rts-banner { top: 130px; }
    #rts-resources > span { padding: 7px; }
    .rts-detail { gap: 8px; }
  }
  @media (max-width: 760px) {
    #strategy-toggle { right: 12px; bottom: calc(var(--bar-bottom) + 180px); padding: 8px 11px; }
    body.rts-active #strategy-toggle { right: 12px; top: 44px; padding: 3px 7px; gap: 5px; font-size: 10px; }
    body.rts-active #strategy-toggle i { display: none; }
    body.rts-active .objective-card { width: 175px; }
    body.rts-active .defense-wave { top: 108px; left: 10px; transform: none; min-width: 160px; padding: 5px 8px; }
    body.rts-active .defense-wave strong { font-size: 10px; }
    .rts-banner { top: 108px; left: auto; right: 10px; }
    .rts-camera-actions { display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; }
    .rts-camera-actions button { padding: 4px; }
    #rts-hearth { grid-column: span 2; }
    #rts-rotate-left, #rts-rotate-right, #rts-compass { min-width: 44px; min-height: 44px; }
    .rts-camera-actions kbd { display: none; }
    #rts-resources { top: 70px; left: 10px; right: 10px; }
    #rts-resources > span { flex: 1; justify-content: center; gap: 3px; padding: 6px 3px; }
    #rts-resources small { font-size: 8px; }
    #rts-resources b { font-size: 11px; }
    .rts-dock { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
    .rts-dock-top { gap: 4px; padding: 4px 6px; }
    .rts-dock h2 { font: 12px system-ui, sans-serif; }
    #rts-count { display: none; }
    #rts-animals { gap: 3px; }
    .rts-animal { padding: 4px; }
    .rts-animal img { width: 28px; height: 28px; }
    .rts-animal > span { display: none; }
    #rts-close { padding: 7px 6px; }
    #rts-close kbd { padding: 1px 3px; font-size: 9px; }
    .rts-workspace { padding: 4px; }
    #rts-roster { grid-auto-columns: 105px; gap: 4px; }
    .rts-detail { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 3px 7px; padding: 5px 8px; }
    #rts-detail-icon { grid-row: 1 / 3; }
    #rts-detail-role { display: none; }
    #rts-detail-stats { grid-column: 2; font-size: 9px; }
    #rts-detail-cost { grid-column: 1 / 3; margin: 0; font-size: 9px; }
    #rts-pack { grid-column: 3; grid-row: 1 / 4; min-height: 36px; }
    .rts-footer { padding: 5px 8px; }
    .rts-footer > span, body.rts-active #minimap-hud { display: none; }
  }
  @media (max-height: 500px) {
    body.rts-active #minimap-hud { display: none; }
    .rts-banner { top: 65px; }
    #rts-resources { top: 65px; }
    .rts-footer > span { display: none; }
  }
  @media (max-height: 500px) and (max-width: 760px) {
    .rts-banner { top: 108px; }
    .rts-dock-top { padding: 2px 6px; }
    .rts-animal img { width: 24px; height: 24px; }
    .tower-card { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 30px auto; }
    .tower-art { width: 30px; height: 30px; }
    .rts-detail { max-height: 60px; overflow-y: auto; }
  }
  @media (prefers-reduced-motion: reduce) { .tower-card { transition: none; } }

  #aim-reticle { position: fixed; left: 50%; top: 50%; z-index: 3; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border: 1px solid #16291eb3; border-radius: 50%; background: #f8f1dbb3; box-shadow: 0 0 0 2px #ffffff1a; pointer-events: none; }
  #aim-reticle.has-target { background: #ffe3a0; box-shadow: 0 0 0 3px #f1d18a44; }

  /* Developer console */
  #dev-console {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: linear-gradient(180deg, #08110d40 0%, #08110dcc 100%);
  }
  #dev-console[hidden] { display: none; }
  #dev-console-panel {
    width: min(720px, 100%);
    overflow: hidden;
    border: 1px solid #d9c28266;
    border-radius: 12px;
    background: #101d16f2;
    box-shadow: 0 18px 60px #00000080;
    color: #d8dfcd;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    backdrop-filter: blur(8px);
  }
  #dev-console-panel:focus-within { border-color: #d9c282cc; }
  #dev-console-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #d9c2822e; background: #18291e; color: #cdbc87; font: 600 10px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
  #dev-console-head span { color: #8fa383; font-weight: 400; letter-spacing: .04em; text-transform: none; }
  #dev-console-head kbd { padding: 1px 5px; border: 1px solid #d9c28240; border-radius: 4px; background: #0e1a12; color: #f0dfb0; font: inherit; }
  #dev-console-log { max-height: min(190px, 32vh); overflow-y: auto; padding: 10px 14px; scrollbar-width: thin; }
  #dev-console-log:empty { display: none; }
  .dev-console-line { white-space: pre-wrap; overflow-wrap: anywhere; }
  .dev-console-line.command { color: #8fa383; }
  .dev-console-line.ok { color: #b8e3a8; }
  .dev-console-line.warn { color: #efae8f; }
  #dev-console-form { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid #d9c2822e; background: #0b1710; }
  .dev-console-prompt { color: #e2c481; font-weight: 700; }
  #dev-console-input { flex: 1; min-width: 0; padding: 5px 0; border: 0; outline: 0; background: transparent; color: #f4ecd7; font: inherit; user-select: text; caret-color: #f2cf7a; }
  #dev-console-input::placeholder { color: #71856b; }
  @media (max-width: 520px) {
    #dev-console { padding: 12px 10px calc(max(10px, env(safe-area-inset-bottom)) + 4px); }
    #dev-console-head span { display: none; }
    #dev-console-log { max-height: 26vh; }
    #dev-console-panel { font-size: 12px; }
  }

/* Inventory and resource exchange */
#bag-open { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--bar-bottom) + 164px); z-index: 6; padding: 10px 16px; border: 1px solid #b6c795; border-radius: 10px; background: #253b2eed; color: #fff0c1; font: 600 12px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#bag-menu { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #bda86c; border-radius: 18px; background: #1d2d25; color: #f4ecd7; box-shadow: 0 30px 100px #06180dbb; }
#bag-menu::backdrop { background: #071c1399; backdrop-filter: blur(5px); }
.bag-shell { padding: 22px; font-family: system-ui, sans-serif; }
.bag-heading, .trade-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bag-heading span { color: #d1b978; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.bag-heading h2 { margin: 4px 0; font-size: 24px; }
#bag-menu h3 { margin: 16px 0 8px; font-size: 14px; }
#bag-menu h3 small { color: #a6b9a4; font-weight: 400; }
#bag-instruction, .trade-heading p, #bag-menu footer { color: #a9bda8; font-size: 12px; }
#bag-menu button { font-family: inherit; cursor: pointer; }
#bag-menu button:focus-visible, #bag-open:focus-visible { outline: 2px solid #f2cf7a; outline-offset: 2px; }
#bag-close, .trade-row button { border: 1px solid #8ba17d; border-radius: 8px; padding: 8px 10px; background: #304b39; color: #f4ecd7; font-size: 11px; }
#bag-menu button:disabled { opacity: .45; cursor: default; }
.bag-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.bag-slot { position: relative; aspect-ratio: 1; min-width: 0; border: 1px solid #809579; border-radius: 7px; background: #314437; color: white; }
.bag-slot.chosen { outline: 2px solid #f2cf7a; background: #526546; }
.bag-slot img { width: 80%; height: 80%; object-fit: contain; }
.bag-slot-number, .bag-slot-count { position: absolute; font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.bag-slot-number { top: 3px; left: 5px; color: #c7d2b5; }.bag-slot-count { right: 4px; bottom: 3px; }
.trade-heading { margin-top: 20px; border-top: 1px solid #bac69535; }.trade-heading p { margin: 0 0 10px; }.trade-heading strong { color: #f1d28a; white-space: nowrap; }
#trade-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.trade-row { display: flex; align-items: center; gap: 5px; padding: 7px; border-radius: 8px; background: #263a2e; }
.trade-info { flex: 1; min-width: 0; }.trade-info strong, .trade-info small { display: block; font-size: 11px; }.trade-info small { color: #a9bda8; }
#bag-message { min-height: 1em; font-size: 12px; color: #e5cf8f; }
body.rts-active #bag-open { display: none; }
@media (max-width: 760px) { #bag-open { right: 12px; bottom: calc(var(--bar-bottom) + 224px); padding: 8px 11px; } .bag-shell { padding: 14px; } #trade-list { grid-template-columns: 1fr; } .bag-grid { gap: 3px; } .bag-slot-number, .bag-slot-count { font-size: 9px; } }

.rts-menu-actions { pointer-events: auto; }
.menu-switch, .rts-menu-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.menu-switch { margin: 12px 0; }
.menu-switch button, .rts-menu-actions button { border: 1px solid #8ba17d; border-radius: 8px; padding: 7px 10px; background: #304b39; color: #f4ecd7; font: 600 11px system-ui, sans-serif; cursor: pointer; }
.menu-switch button:hover, .rts-menu-actions button:hover { background: #466047; }
@media (max-width: 700px) { .rts-menu-actions button { padding: 5px 7px; font-size: 10px; } }

.console-menu-switch { margin: 0; padding: 7px 14px; border-bottom: 1px solid #d9c2822e; }

  /* Both command rows remain available while using an inventory item. */
  .rts-inventory-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 7px 10px; border-top: 1px solid #98ac8d22; }
  .rts-inventory-row > span { color: #a9beae; font-size: 9px; letter-spacing: .08em; }
  #rts-item-bar #inventory { position: static; transform: none; gap: 3px; }
  #rts-item-bar #hotbar { padding: 4px; border-radius: 7px; background: #10251f; }
  #rts-item-bar #item-name { padding: 0; border: 0; background: none; box-shadow: none; color: #c9d8c7; font-size: 10px; }
  #rts-item-bar .slot { width: clamp(25px, 4.8vw, 42px); }
  body.rts-active:not(.rts-inventory-mode) #hotbar .slot.selected { transform: none; border-color: #ffffff33; background: #141d107a; box-shadow: none; }
  #rts-inspect { border: 1px solid #a2b5a24d; border-radius: 5px; background: #162b24; color: #dfdfcb; padding: 7px; font-size: 10px; }
  @media (max-width: 760px) {
    .rts-inventory-row { flex-wrap: wrap; gap: 4px 8px; padding: 4px; }
    .rts-inventory-row > span { display: none; }
    #rts-item-bar { flex: 1 1 100%; }
    #rts-item-bar #hotbar { gap: 2px; }
    #rts-item-bar #item-name { max-width: 85vw; }
    #rts-inspect { padding: 4px 10px; }
  }

  @media (max-height: 500px) {
    .rts-dock { max-height: 55vh; overflow-y: auto; }
  }

/* Upgrade branches carry the same accents as their model modules. */
.upgrade-card[data-branch="move"] { --branch: #18eaff; }
.upgrade-card[data-branch="cadence"] { --branch: #ff48c3; }
.upgrade-card[data-branch="reach"] { --branch: #b285ff; }
.upgrade-card[data-branch="power"] { --branch: #ffac4b; }
.upgrade-card[data-branch="craft"] { --branch: #38eaa7; }
.upgrade-card[data-branch] { border-top: 3px solid var(--branch); }
.upgrade-region { color: var(--branch); font-size: 11px; line-height: 1.5; margin: 8px 0; }

  #final-boss-hud { position: fixed; z-index: 32; top: 20px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 12px 18px; box-sizing: border-box; background: #092c32ee; border: 1px solid #72cbb180; border-radius: 5px; box-shadow: 0 8px 30px #07192155; color: #d5ffdf; pointer-events: none; }
  #final-boss-hud[hidden] { display: none; }
  #final-boss-hud > div:first-child { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
  #final-boss-hud span { font-size: 8px; letter-spacing: .15em; max-width: 70px; color: #88bfaf; }
  #final-boss-hud strong { font: 18px Georgia, serif; letter-spacing: .15em; }
  #final-boss-hp { margin-left: auto; font-size: 11px; white-space: nowrap; }
  #final-boss-health { height: 7px; background: #03171e; border-radius: 2px; overflow: hidden; }
  #final-boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #387e80, #96f2bc); }
  .victory-prologue { position: absolute; bottom: 13%; width: 100%; font: 16px Georgia, serif; letter-spacing: .35em; color: #bcf4dc; opacity: calc(1 - var(--victory-reveal)); }
  @media (max-width: 760px) { #final-boss-hud { top: 134px; padding: 9px 12px; } #final-boss-hud span { display: none; } .victory-prologue { font-size: 12px; letter-spacing: .2em; } }

  #defense-wave-card[hidden] { display: none; }