:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}
  /* Geode Choir is a single-world design: always underground, always dark. */
  :root {
    color-scheme: dark;
    --ground: #0a0810;
    --slab: #15111c;
    --slab-2: #1d1727;
    --line: #2c2439;
    --line-2: #4a3d63;
    --text: #ece6f5;
    --muted: #958ca8;
    --hum: #ffcf86;
    --echo: #8ff2e6;
    --amethyst: #b58cff;
    --shard: #d6a8ff;
    --fossil: #e8d5b0;
    --lumen: #7fb8ff;
    --tide: #86d8e6;
    --pearl: #efe6d8;
    --fathom: #9aa7ff;
    --ivory: #f6efe2;
    --heart: #ff8fa3;
    --gilt: #ffd54a;
    --warn: #ff9f8f;
    --stage: #07060b;
    --glass: rgba(10, 8, 16, .72);
    --hint: rgba(236, 230, 245, .62);
    --shadow: #000;
    --text-2: #d6cfe2;
    --panel-a: #1a1326; --panel-b: #0f0c16;
    --heart-a: #26121d; --heart-b: #120b12; --heart-line: #5a2f45; --hold: #2a1520; --hold-line: #7a3d59;
    --got-a: #221a10; --got-line: #6a5530;
    --toast: rgba(18, 13, 26, .92);
    --backdrop: rgba(4, 3, 8, .72);
    --bar: #0a0810;
    --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
    --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  }
  /* Light theme: a pale, lamplit limestone. Chosen in Settings; stored as data-gc-theme so the host's own theme stamp can't flip it. */
  :root[data-gc-theme="light"] {
    color-scheme: light;
    --ground: #eceef2; --slab: #ffffff; --slab-2: #f4f2f8; --line: #d9d5e2; --line-2: #b8b0cc;
    --text: #1c1726; --muted: #5f586e;
    --hum: #9a5f0c; --echo: #0d7f76; --amethyst: #7447d0; --shard: #8a4fd3; --fossil: #7d5f2c; --lumen: #2463c4;
    --tide: #11768a; --pearl: #7a6a50; --fathom: #4351c4; --ivory: #7f6f4d; --gilt: #a8780a; --heart: #c2365a; --warn: #b8402c;
    --stage: #cfd1d8; --glass: rgba(255, 255, 255, .8); --hint: rgba(28, 23, 38, .55); --shadow: rgba(255, 255, 255, .9);
    --text-2: #3a3448; --panel-a: #ffffff; --panel-b: #f1eef7;
    --heart-a: #fff3f6; --heart-b: #fbe7ed; --heart-line: #e6b3c2; --hold: #fde8ee; --hold-line: #d88aa3;
    --got-a: #fbf0d9; --got-line: #d9b97a; --toast: rgba(255, 255, 255, .96); --backdrop: rgba(30, 25, 40, .35); --bar: #e2dfe9;
  }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  html { font-size: calc(16px * var(--ts, 1)); }
  body { background: var(--ground); color: var(--text); font-family: var(--body); font-size: .875rem; overflow: hidden; }
  .app {
    box-sizing: border-box; height: 100%; position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--lw, 368px); gap: 16px; padding: 16px;
  }
  .splitter { position: absolute; top: 16px; bottom: 16px; right: calc(16px + var(--lw, 368px)); width: 16px; z-index: 20; cursor: col-resize; touch-action: none; outline: none; }
  .splitter::before { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 2px; background: var(--line-2); opacity: .55; transition: opacity .15s, background .15s, height .15s; }
  .splitter:hover::before, .splitter.drag::before, .splitter:focus-visible::before { opacity: 1; background: var(--echo); height: 64px; margin-top: -32px; }
  .mnote { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; font-size: 0.7812rem; line-height: 1.4; color: var(--muted); background: var(--slab); border: 1px solid var(--line); }
  .mnote span { flex: 1; min-width: 0; }
  .mnote button { flex: none; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px 10px; border-radius: 8px; background: var(--slab-2); border: 1px solid var(--line-2); }
  .mnote button:hover { border-color: var(--echo); }
  .mnote button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  body.dragging { user-select: none; cursor: col-resize; }

  /* ---------- the stage ---------- */
  .stage { container-type: inline-size; position: relative; min-height: 0; border-radius: 20px; overflow: hidden; background: var(--stage); border: 1px solid var(--line); }
  #cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
  .veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
  .veil.on { opacity: 1; }
  .dock { position: absolute; inset: 14px; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 10px; row-gap: 8px; pointer-events: none; }
  .hud { display: contents; }
  .hud-left, .hud-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; align-self: start; }
  .hud-left { grid-column: 1; grid-row: 1; }
  .hud-right { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  /* The strip always shares the top row: centred on the stage when there is room, otherwise in the space between the side groups. */
  @container (min-width: 38rem) { .dock { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); } }
  @container (max-width: 58rem) { .schip { padding: 6px 9px; } .schip > span { display: none; } .schip svg.ic-one, .schip:not(.sea) svg.ic-desc, .schip.sea svg.ic-sea { display: block; } .hud-right #chord .dots, .hud-right #chord > span:first-child { display: none; } }
  .chip {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 11px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
    font-size: 0.75rem; color: var(--muted); backdrop-filter: blur(6px);
  }
  .chip b { color: var(--text); font-weight: 600; }
  .chip .mono { font-family: var(--mono); }
  button.chip { cursor: pointer; font: inherit; font-size: 0.75rem; }
  button.chip:hover { color: var(--text); border-color: var(--line-2); }
  button.chip:focus-visible, .worlds button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  @container (max-width: 560px) { .chip, .schip { padding: 4px 9px; } #chord .dots { display: none; } .hud, .strip, .dock { gap: 6px; } .hud-left, .hud-right { gap: 6px; } }
  .strip { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; display: flex; justify-content: center; flex-wrap: nowrap; gap: 8px; pointer-events: none; }
  .schip {
    pointer-events: auto; --c: var(--fossil); --p: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font: inherit; font-size: 0.75rem; color: var(--muted); padding: 6px 12px 6px 9px; background: var(--glass);
    border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px); white-space: nowrap;
  }
  .schip:hover { color: var(--text); border-color: var(--line-2); }
  .schip:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .schip.sea { --c: var(--fathom); } .schip.heart { --c: var(--heart); } .schip.hornchip { --c: var(--ivory); }
  .schip .ring {
    width: 16px; height: 16px; border-radius: 50%; flex: none; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent 4.5px, #000 5.5px); mask: radial-gradient(farthest-side, transparent 4.5px, #000 5.5px);
  }
  .schip b { font-family: var(--mono); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .schip.ready { color: var(--text); border-color: var(--c); animation: sglow 2.4s ease-in-out infinite; }
  .schip[aria-expanded="true"] { border-color: var(--line-2); background: var(--slab-2); color: var(--text); }
  @keyframes sglow { 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); } }
  .pop {
    position: absolute; grid-column: 1 / -1; grid-row: 2; top: 0; left: 0; right: 0; margin: 0 auto; max-height: 100%; min-height: 0; pointer-events: auto; box-sizing: border-box;
    width: min(400px, 100%); overflow-y: auto; border-radius: 14px;
    background: var(--ground); box-shadow: 0 14px 44px var(--shadow); scrollbar-width: thin;
  }
  .pop > section { margin: 0; }
  .tip {
    position: fixed; z-index: 80; max-width: 270px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
    background: var(--toast); border: 1px solid var(--line-2); box-shadow: 0 8px 28px var(--shadow); font-size: 0.75rem; color: var(--muted);
  }
  .tip h4 { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .tip .r { display: flex; justify-content: space-between; gap: 18px; line-height: 1.6; }
  .tip .r b { font-family: var(--mono); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  [data-tip] { cursor: help; }
  .worlds { pointer-events: auto; display: inline-flex; padding: 2px; gap: 2px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; }
  .worlds button { font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
  .worlds button[aria-pressed="true"] { background: var(--slab-2); color: var(--text); }
  #chord .dots { display: inline-flex; gap: 3px; }
  #chord .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
  #chord .dots i.on { background: var(--amethyst); box-shadow: 0 0 6px var(--amethyst); }

  .hint, .whisper { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
  .hint {
    top: 50%; margin-top: 70px; font-family: var(--display); font-size: 1.1875rem; letter-spacing: .03em;
    color: var(--hint); animation: breathe 3.2s ease-in-out infinite; white-space: nowrap;
  }
  @keyframes breathe { 50% { opacity: .35; } }
  .whisper {
    bottom: 18px; width: min(580px, calc(100% - 32px));
    font-family: var(--display); font-size: 1rem; letter-spacing: .02em; color: var(--text);
    text-shadow: 0 1px 12px var(--shadow); opacity: 0; transition: opacity .8s ease;
  }
  .whisper.show { opacity: .94; }

  /* ---------- the ledger ---------- */
  .ledger { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .ledger header { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
  h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 2rem; letter-spacing: .05em; line-height: 1.05; }
  .tagline { margin: 0 0 12px; color: var(--muted); font-style: italic; }
  .purse { display: flex; align-items: baseline; gap: 8px; --main: var(--hum); }
  .purse.sea { --main: var(--tide); }
  #humVal { font-family: var(--mono); font-weight: 600; font-size: 2.25rem; color: var(--main); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 18px color-mix(in srgb, var(--main) 30%, transparent); }
  .purse small { color: var(--muted); font-size: 0.8125rem; letter-spacing: .12em; text-transform: uppercase; }
  .rates { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .rates b { color: var(--text); font-weight: 400; }
  .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--slab); border: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
  .pill b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pill.shard b { color: var(--shard); } .pill.fossil b { color: var(--fossil); } .pill.lumen b { color: var(--lumen); }
  .pill.pearl b { color: var(--pearl); } .pill.fathom b { color: var(--fathom); } .pill.heart b { color: var(--heart); } .pill.gilt b { color: var(--gilt); } .pill.ivory b { color: var(--ivory); }

  .tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
  .tab { position: relative; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 9px 9px; margin-bottom: -1px; cursor: pointer; }
  .tab:hover { color: var(--text); }
  .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--tabc, var(--echo)); }
  .tab:focus-visible { outline: 2px solid var(--echo); outline-offset: -2px; border-radius: 6px; }
  .tab .new { position: absolute; top: 6px; right: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--tabc, var(--echo)); }
  #tab-wonders { --tabc: var(--shard); } #tab-strata { --tabc: var(--fossil); } #tab-glow { --tabc: var(--lumen); }
  #tab-sea { --tabc: var(--tide); } #tab-pearls { --tabc: var(--pearl); } #tab-deep { --tabc: var(--fathom); } #tab-choir { --tabc: var(--hum); } #tab-horns { --tabc: var(--heart); }
  .panel { display: flex; flex-direction: column; gap: 20px; }
  .list { display: flex; flex-direction: column; gap: 8px; }

  section { display: flex; flex-direction: column; gap: 8px; }
  h2 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  h2 span { font-family: var(--mono); letter-spacing: 0; font-weight: 400; text-transform: none; }
  .note { margin: -2px 0 2px; font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
  .note b { color: var(--text); font-weight: 600; }

  .itemrow { display: flex; gap: 6px; align-items: stretch; }
  .itemrow .item { flex: 1; min-width: 0; width: auto; }
  .bulk { display: flex; flex-direction: column; gap: 4px; }
  .bulk button { flex: 1; min-width: 44px; font: 600 0.7188rem var(--mono); padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--slab); color: var(--muted); cursor: pointer; }
  .bulk button:hover { color: var(--text); border-color: var(--line-2); background: var(--slab-2); }
  .bulk button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .bulk.dim { opacity: .4; }
  .item {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    width: 100%; text-align: left; padding: 10px 12px; background: var(--slab); color: var(--text);
    border: 1px solid var(--line); border-radius: 10px; font: inherit; cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
  }
  .item:hover { background: var(--slab-2); border-color: var(--line-2); }
  .item:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .item .sw { grid-row: span 2; width: 30px; height: 30px; }
  .item .nm { font-weight: 600; font-size: 0.875rem; }
  .item .lv { font-family: var(--mono); font-weight: 400; font-size: 0.7188rem; color: var(--muted); margin-left: 6px; }
  .item .cs { font-family: var(--mono); font-size: 0.8125rem; color: var(--hum); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .item .cs small { font-family: var(--body); font-size: 0.6875rem; opacity: .8; }
  .item .cs.shard { color: var(--shard); } .item .cs.fossil { color: var(--fossil); } .item .cs.lumen { color: var(--lumen); }
  .item .cs.tide { color: var(--tide); } .item .cs.pearl { color: var(--pearl); } .item .cs.fathom { color: var(--fathom); } .item .cs.ivory { color: var(--ivory); } .item .cs.gilt { color: var(--gilt); }
  .item .cs.state { color: var(--echo); font-family: var(--body); font-weight: 600; font-size: 0.75rem; }
  .item .cs.state.off { color: var(--muted); }
  .item .ds { grid-column: 2 / 4; font-size: 0.7812rem; color: var(--muted); line-height: 1.35; }
  .item.poor { opacity: .55; }
  .item.poor .cs { color: var(--muted); }
  .item.poor:hover { background: var(--slab); border-color: var(--line); }
  .item.maxed { opacity: .7; cursor: default; }
  .item.pulse { animation: pulse .35s ease; }
  @keyframes pulse { 40% { transform: scale(.985); border-color: var(--echo); } }

  .heartbox { padding: 14px; border-radius: 12px; border: 1px solid var(--heart-line); background: linear-gradient(160deg, var(--heart-a), var(--heart-b)); }
  .holdbtn {
    position: relative; overflow: hidden; font: inherit; font-family: var(--display); font-size: 1.0625rem; letter-spacing: .06em;
    padding: 11px 14px; border-radius: 10px; cursor: pointer; color: var(--text); background: var(--hold); border: 1px solid var(--hold-line);
    user-select: none; -webkit-user-select: none; touch-action: none;
  }
  .holdbtn i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(255, 143, 163, .35), rgba(255, 207, 134, .5)); }
  .holdbtn span { position: relative; }
  .holdbtn.poor { opacity: .45; cursor: not-allowed; }
  .holdbtn:focus-visible { outline: 2px solid var(--heart); outline-offset: 2px; }

  .hornsum { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; padding: 10px 12px; border-radius: 10px; background: var(--slab); border: 1px solid var(--line); font-size: 0.7812rem; }
  .hornsum > div { display: flex; gap: 6px; flex-wrap: wrap; }
  .hornsum span { color: var(--muted); }
  .hornsum b { font-family: var(--mono); font-weight: 600; color: var(--text); }
  .hornsum .empty { grid-column: 1 / -1; color: var(--muted); }
  .hsub { margin-bottom: 4px; }
  .hsec { display: flex; flex-direction: column; gap: 20px; }
  .hsvg { display: block; overflow: visible; }
  .hslots { display: flex; flex-wrap: wrap; gap: 8px; }
  .hslot, .hcard {
    --rc: var(--line-2); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: inherit; color: var(--muted); cursor: pointer; padding: 8px 6px 6px; border-radius: 12px;
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 16%, var(--slab-2)), var(--slab) 72%);
    border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line));
  }
  .hslot { width: 84px; height: 92px; }
  .hslot.empty { background: var(--slab); border: 1px dashed var(--line-2); cursor: default; }
  .hslot.empty span { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; }
  .hcard { width: 72px; height: 80px; }
  .hcard:hover, .hslot:not(.empty):hover { border-color: var(--rc); }
  .hcard.sel, .hslot.sel { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 0 16px color-mix(in srgb, var(--rc) 40%, transparent); }
  .hcard.worn::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--echo); box-shadow: 0 0 6px var(--echo); }
  .hcard small, .hslot small { font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
  .hcard:focus-visible, .hslot:focus-visible, .hfilter button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .hgrid { display: flex; flex-wrap: wrap; gap: 8px; }
  .hfilter { display: flex; flex-wrap: wrap; gap: 6px; }
  .hfilter button { font: inherit; font-size: 0.7188rem; color: var(--muted); cursor: pointer; padding: 3px 10px; border-radius: 999px; background: var(--slab); border: 1px solid var(--line); }
  .hfilter button[aria-pressed="true"] { color: var(--text); border-color: var(--rc, var(--line-2)); background: var(--slab-2); }
  .hdetail { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 14px; padding: 14px; border-radius: 14px; --rc: var(--line-2);
    background: radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--rc) 18%, var(--slab-2)), var(--slab) 70%); border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line)); }
  .hdetail .art { grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; }
  .hdetail .art { flex-direction: column; gap: 8px; align-self: start; }
  .horn-view-controls { display: flex; gap: 3px; }
  .horn-view-controls button, .horn-view-reset { color: var(--muted); background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 9px; font: inherit; font-size: .6875rem; cursor: pointer; }
  .horn-view-controls button[aria-pressed="true"] { color: var(--rc); border-color: var(--rc); }
  .horn-view-controls button:focus-visible, .horn-view-reset:focus-visible, .horn3d-canvas:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .horn-view-stage { width: 124px; height: 124px; }
  .horn3d-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; border-radius: 10px; background: radial-gradient(ellipse, var(--slab-2), transparent 72%); }
  .horn3d-canvas:active { cursor: grabbing; }
  #hornViewHelp { text-align: center; color: var(--muted); font-size: .625rem; line-height: 1.4; }
  .hdetail.view-3d { grid-template-columns: minmax(0, 1fr); }
  .hdetail.view-3d .art { grid-row: auto; width: 100%; }
  .hdetail.view-3d .horn-view-stage { width: min(100%, 280px); height: auto; aspect-ratio: 1; }
  .hdetail .hn { color: var(--rc); font-family: var(--display); font-size: 1.0625rem; line-height: 1.25; }
  .hdetail .hr { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .hdetail ul { margin: 4px 0; padding: 0; list-style: none; font-size: 0.7812rem; display: flex; flex-direction: column; gap: 2px; }
  .hdetail ul b { font-family: var(--mono); font-weight: 600; }
  .hdetail ul i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--gc); }
  .hdetail .hb { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
  .hdetail .hb button { font: inherit; font-size: 0.75rem; color: var(--text); cursor: pointer; background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 10px; }
  .hdetail .hb button:hover { border-color: var(--rc); }
  .hdetail .hb button.sal { color: var(--muted); }
  .hdetail .hb button.sal:hover { color: var(--warn); border-color: var(--warn); }
  .hdetail .hb button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .snd { --gc: var(--echo); --rc: var(--line-2); display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; min-height: 150px; justify-content: center;
    background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); border: 1px solid var(--line); }
  .snd .sub { font-size: 0.75rem; color: var(--muted); text-align: center; line-height: 1.5; }
  .snd .sub b { color: var(--text); }
  .snd .big { font: inherit; font-family: var(--display); font-size: 1.125rem; letter-spacing: .05em; padding: 12px 14px; border-radius: 10px; cursor: pointer; color: var(--text);
    background: var(--slab-2); border: 1px solid var(--line-2); }
  .snd .big:hover { border-color: var(--heart); box-shadow: 0 0 18px color-mix(in srgb, var(--heart) 25%, transparent); }
  .snd .big:focus-visible, .snd .small:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .snd .small { font: inherit; font-size: 0.75rem; align-self: center; color: var(--muted); cursor: pointer; background: none; border: 0; padding: 4px 8px; text-decoration: underline; text-underline-offset: 3px; }
  .snd .small:hover { color: var(--text); }
  .snd .reel { font-family: var(--display); font-size: 1.75rem; text-align: center; letter-spacing: .06em; color: var(--rc); text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent); }
  .snd .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; color: var(--muted); }
  .snd .head b { color: var(--gc); font-weight: 600; font-size: 0.875rem; }
  .sbar { position: relative; height: 38px; border-radius: 19px; background: var(--bar); border: 1px solid var(--line-2); overflow: hidden; cursor: pointer; touch-action: manipulation; user-select: none; }
  .szone { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--gc) 26%, transparent); border-left: 2px solid var(--gc); border-right: 2px solid var(--gc); box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 45%, transparent) inset; }
  .szone::after { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--gc); opacity: .7; }
  .sneedle { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--text); box-shadow: 0 0 10px var(--text); }
  .sfb { min-height: 20px; text-align: center; font-family: var(--display); font-size: 1.0625rem; letter-spacing: .05em; }
  .sdots { display: flex; justify-content: center; gap: 6px; }
  .sdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
  .sdots i.cur { outline: 2px solid var(--text); outline-offset: 1px; }
  .sndres { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
  .sndres .hn { color: var(--rc); font-family: var(--display); font-size: 1rem; line-height: 1.25; }
  .sndres .hr { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .sndres ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 0.7812rem; }
  .sndres ul b { font-family: var(--mono); font-weight: 600; }
  .sndauto { display: flex; align-items: center; gap: 8px; font-size: 0.7812rem; color: var(--muted); cursor: pointer; }
  .sndauto input { accent-color: var(--heart); }
  .hodds { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; font-size: 0.7812rem; }
  .hodds .bar { height: 5px; }
  .hodds .bar i { background: var(--rc); }
  .hodds b { font-family: var(--mono); font-weight: 600; }
  .ftag { color: var(--hum); font-weight: 600; } .ftag.gold { color: var(--gilt); }
  .gold { color: var(--gilt); }
  .hcoll { display: grid; grid-template-columns: 62px repeat(var(--rarity-columns, 6), minmax(0, 1fr)); gap: 6px; align-items: center; }
  .hcoll .hd { font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--rc); }
  .hcoll .fam { font-size: 0.6875rem; color: var(--muted); text-transform: capitalize; }
  .hcell { --rc: var(--line-2); display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 1; border-radius: 10px;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 14%, var(--slab-2)), var(--slab) 75%); border: 1px solid color-mix(in srgb, var(--rc) 35%, var(--line)); }
  .hcell.locked { background: var(--slab); border-style: dashed; border-color: var(--line); }
  .hcell.locked svg { filter: brightness(0) opacity(.28); }
  .hcell em { position: absolute; right: 4px; bottom: 2px; font: 600 0.5938rem var(--mono); font-style: normal; color: var(--muted); }

  .descend { padding: 14px; border-radius: 12px; background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); border: 1px solid var(--line); gap: 10px; }
  .descend p { margin: 0; font-size: 0.7812rem; color: var(--muted); line-height: 1.5; }
  .descend p b { color: var(--text); font-weight: 600; }
  .descend p b.fos { color: var(--fossil); } .descend p b.fat { color: var(--fathom); }
  .bar { height: 6px; border-radius: 3px; background: var(--bar); overflow: hidden; }
  .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--echo), var(--amethyst)); transition: width .3s; }
  .bigbtn { font: inherit; font-family: var(--display); font-size: 1.0625rem; letter-spacing: .06em; padding: 10px 14px; border-radius: 10px; cursor: pointer; color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); }
  .bigbtn:not(.poor):hover { border-color: var(--fossil); box-shadow: 0 0 18px rgba(232, 213, 176, .2); }
  .bigbtn.poor { opacity: .45; cursor: not-allowed; }
  .bigbtn:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }

  .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; font-size: 0.75rem; color: var(--muted); }
  .link { font: inherit; font-size: 0.75rem; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
  .link:hover { color: var(--warn); }
  .link:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }

  /* ---------- story: cutscenes, toasts, chronicle ---------- */
  .chip .new { width: 6px; height: 6px; border-radius: 50%; background: var(--heart); }
  .scene {
    position: absolute; inset: 0; z-index: 5; cursor: pointer;
    display: grid; place-items: center; padding: 16px;
    background: radial-gradient(ellipse at 50% 45%, rgba(10, 7, 16, .88), rgba(0, 0, 0, .97) 75%);
    animation: fadein .6s ease;
  }
  .stage:has(.scene:not([hidden])) .hint, .stage:has(.scene:not([hidden])) .whisper { visibility: hidden; }
  .scene::before, .scene::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #000; animation: bars .7s ease; }
  .scene::before { top: 0; transform-origin: top; }
  .scene::after { bottom: 0; transform-origin: bottom; }
  @keyframes bars { from { transform: scaleY(0); } }
  @keyframes fadein { from { opacity: 0; } }
  .scene-card { position: relative; max-width: 34rem; display: flex; flex-direction: column; gap: 12px; animation: rise .7s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
  .scene-eyebrow { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--heart); }
  .scene-title { margin: 0; font-family: var(--display); font-size: clamp(26px, 4.4vw, 40px); letter-spacing: .03em; line-height: 1.1; text-wrap: balance; }
  .scene-text { margin: 0; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.62; color: #ddd5ea; }
  .scene-foot {
    position: absolute; left: 16px; right: 16px; bottom: calc(9% + 12px);
    display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 0.75rem; color: var(--muted);
  }
  .scene-foot .dots { display: inline-flex; gap: 5px; }
  .scene-foot .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
  .scene-foot .dots i.on { background: var(--text); }
  .scene-foot button { font: inherit; font-size: 0.8125rem; cursor: pointer; border-radius: 8px; padding: 6px 12px; }
  .scene-foot .skip { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .scene-foot .next { color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); font-weight: 600; }
  .scene-foot button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }

  .toasts { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(420px, calc(100% - 32px)); }
  .toast {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px;
    background: var(--toast); border: 1px solid var(--line-2); font-size: 0.8125rem; color: var(--text);
    animation: toast 4.2s ease forwards;
  }
  .toast b { font-weight: 600; }
  .toast .k { font-size: 0.6562rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hum); }
  .toast.lore .k { color: var(--heart); }
  @keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

  .modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--backdrop); backdrop-filter: blur(3px); }
  .modal-box {
    width: min(720px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-radius: 16px; background: var(--ground); border: 1px solid var(--line-2); overflow: hidden;
  }
  .modal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .modal-title { font-family: var(--display); font-size: 1.75rem; letter-spacing: .04em; }
  .modal-sub { font-size: 0.7812rem; color: var(--muted); }
  .chron-body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 18px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .chapter { display: flex; flex-direction: column; gap: 10px; }
  .chapter-name { font-size: 0.6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--heart); }
  .page { padding: 12px 14px; border-radius: 10px; background: var(--slab); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
  .page h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.1875rem; letter-spacing: .02em; }
  .page p { margin: 0; font-size: 0.8438rem; line-height: 1.6; color: var(--text-2); max-width: 62ch; }
  .page.locked { background: none; border-style: dashed; }
  .page.locked p { color: var(--muted); font-style: italic; }
  .page button { align-self: flex-start; font: inherit; font-size: 0.75rem; color: var(--text); cursor: pointer; background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 10px; }
  .page button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .set-row .wide { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
  .set-row textarea { width: 100%; min-height: 64px; resize: vertical; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; background: var(--slab); border: 1px solid var(--line-2); color: var(--text); font: 0.75rem/1.4 var(--mono); }
  .set-row textarea:focus-visible { outline: 2px solid var(--echo); outline-offset: 1px; }
  .set-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
  .set-msg { font-size: 0.7812rem; color: var(--muted); min-height: 1.2em; }
  .keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.7812rem; color: var(--muted); }
  .keys kbd { font: 600 0.7188rem var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--slab); border: 1px solid var(--line-2); color: var(--text-2); justify-self: start; }
  .statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
  .stat { padding: 10px 12px; border-radius: 10px; background: var(--slab); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.7812rem; color: var(--muted); }
  .stat b { font-family: var(--mono); font-weight: 600; font-size: 0.8438rem; color: var(--text); font-variant-numeric: tabular-nums; }
  .verlink { font: 500 0.75rem var(--mono); letter-spacing: 0; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--slab); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
  .verlink:hover { color: var(--text); border-color: var(--line-2); }
  .verlink:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
  .ver { border-radius: 10px; background: var(--slab); border: 1px solid var(--line); padding: 0; }
  .ver + .ver { margin-top: 8px; }
  .ver summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
  .ver summary::-webkit-details-marker { display: none; }
  .ver summary::before { content: '▸'; color: var(--muted); font-size: 0.6875rem; transition: transform .15s; }
  .ver[open] summary::before { transform: rotate(90deg); }
  .ver summary:focus-visible { outline: 2px solid var(--echo); outline-offset: -2px; border-radius: 10px; }
  .ver summary b { font-family: var(--mono); font-size: 0.8438rem; }
  .ver summary span { font-family: var(--display); font-size: 1.0625rem; letter-spacing: .02em; }
  .ver summary em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--muted); }
  .ver summary .now { font-size: 0.6562rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--heart); font-family: var(--body); }
  .ver ul { margin: 0; padding: 0 14px 12px 32px; display: flex; flex-direction: column; gap: 6px; font-size: 0.8438rem; line-height: 1.55; color: var(--text-2); }
  .statgrid .stat.done b { color: var(--heart); }
  .stat b { white-space: nowrap; }
  .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .feat { padding: 10px 12px; border-radius: 10px; background: var(--slab); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
  .feat b { font-weight: 600; font-size: 0.8438rem; }
  .feat span { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }
  .feat.got { border-color: var(--got-line); background: linear-gradient(160deg, var(--got-a), var(--slab)); }
  .feat.got b { color: var(--hum); }
  .feat:not(.got) { opacity: .6; }

  .settings { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .set-row:last-child { border-bottom: 0; }
  .set-row b { font-weight: 600; font-size: 0.875rem; }
  .set-row p { grid-column: 1; margin: 0; font-size: 0.7812rem; color: var(--muted); line-height: 1.45; }
  .set-row .worlds, .set-row .link { grid-column: 2; grid-row: 1 / span 2; }
  .worlds.seg { background: var(--slab); }
  @media (max-width: 520px) { .set-row { grid-template-columns: minmax(0, 1fr); } .set-row .worlds, .set-row .link { grid-column: 1; grid-row: auto; justify-self: start; } }

  @media (max-width: 820px) {
    .splitter { display: none; }
    body { overflow: auto; }
    .app { height: auto; grid-template-columns: minmax(0, 1fr); }
    .stage { height: min(64vh, 540px); min-height: 340px; }
    .ledger { overflow: visible; padding-right: 0; }
    h1 { font-size: 1.75rem; }
    .hint { font-size: 1rem; margin-top: 56px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hint { animation: none; }
    .item.pulse { animation: none; }
    .veil { transition-duration: .4s; }
  }

  .horntrait { color: #83f5dc; line-height: 1.5; }
  :root[data-gc-theme="light"] .horntrait { color: #247c70; }
  #primordialRack { margin-top: 16px; }
  .traitchoices { display: grid; gap: 8px; }
  .traitchoices button { text-align: left; font-size: 0.875rem; }
  .traitchoices small { display: block; font-family: var(--body); font-size: 0.75rem; line-height: 1.5; margin-top: 4px; }

  .hornrule { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 9px 0; font-size: .8125rem; }
  .hornrule select { font: inherit; color: var(--text); background: var(--slab); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
  .hornsalvage { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; padding: 10px; font-size: .8125rem; }
  #hornSalvageRarities { display: flex; flex-wrap: wrap; gap: 10px 14px; }
  #hornSalvageRarities label { display: flex; align-items: center; gap: 5px; }
  #hornInventoryRules input { accent-color: var(--ivory); }

  #caveAutoCategories { display: flex; flex-wrap: wrap; gap: 10px 14px; }
  #caveAutoCategories label { display: flex; align-items: center; gap: 5px; }
  #caveAutoReserves { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  #caveAutoReserves label { display: flex; flex-direction: column; gap: 5px; }
  #caveAutoReserves input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: var(--text); background: var(--slab); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
  #caveAutoCategories input { accent-color: var(--fathom); }

/* Shell sounding keeps a steady target, including with reduced motion. */
.shell-call { border: 1px solid var(--line, #d9d5e0); border-radius: 16px; padding: 16px; margin: 14px 0; }
.shell-call button, .shell-card button { min-height: 44px; margin: 4px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.shell-call button:focus-visible, .shell-card button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
.shell-call button[aria-disabled="true"], .shell-card button:disabled { opacity: .5; cursor: default; }
.shell-card b { white-space: normal; }
.shell-card { display: block; }
.shell-track { height: 32px; border-radius: 16px; background: #dedbe7; position: relative; margin: 20px 12px; }
.shell-target { position: absolute; height: 100%; left: 50%; transform: translateX(-50%); background: #88c6ba; border-radius: 12px; }
.shell-track i { position: absolute; width: 4px; height: 44px; top: -6px; background: #352e48; transform: translateX(-50%); }
.shell-spin { display: inline-block; animation: shell-reveal .7s ease-out; }
@keyframes shell-reveal { from { transform: rotate(-360deg); } to { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .shell-spin { animation: none; } }

.shell-art { display: block; width: min(100%, 180px); height: auto; margin: 0 auto 8px; }
.shell-call-art { float: right; width: 140px; margin: 0 0 8px 16px; }
.shell-call::after { content: ''; display: block; clear: both; }
@media (max-width: 520px) { .shell-call-art { float: none; width: 160px; margin: 0 auto; } }

.pearl-strand { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.pearl-slot { flex: 1 1 96px; max-width: 140px; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid var(--rc, var(--line)); border-radius: 14px; background: var(--slab); text-align: center; font-size: .78rem; }
.pearl-slot.empty { border-style: dashed; color: var(--muted); }
.pearl-card { display: block; border-left: 3px solid var(--rc, var(--line)); }
.pearl-card b { white-space: normal; }
.pearl-card button { min-height: 44px; margin: 4px 4px 0 0; padding: 8px 12px; font: inherit; color: var(--text); background: var(--slab-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pearl-card button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
.pearl-card button:disabled { opacity: .5; cursor: default; }
.pearl-art { display: block; margin: 0 auto 6px; max-width: 100%; height: auto; }

.devbar { position: fixed; left: 10px; bottom: 10px; z-index: 60; max-width: min(360px, calc(100vw - 20px)); font-size: .8125rem; }
.devbar-head { display: flex; gap: 8px; align-items: center; min-height: 40px; padding: 6px 12px; font: inherit; color: var(--text); background: var(--slab); border: 1px solid var(--line-2, var(--line)); border-radius: 999px; cursor: pointer; }
.devbar-head span { color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.devbar-body { margin-top: 8px; max-height: min(70vh, 560px); overflow: auto; padding: 10px 12px; background: var(--slab); border: 1px solid var(--line-2, var(--line)); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.devbar-body[hidden] { display: none; }
.devbar h3 { margin: 10px 0 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.devbar section:first-child h3 { margin-top: 0; }
.devbar-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; align-items: center; }
.devbar button, .devbar select, .devbar input { min-height: 34px; padding: 4px 10px; font: inherit; color: var(--text); background: var(--slab-2, var(--slab)); border: 1px solid var(--line); border-radius: 8px; }
.devbar button { cursor: pointer; }
.devbar button:focus-visible, .devbar input:focus-visible, .devbar select:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
.devbar-msg { margin-top: 8px; min-height: 1.2em; color: var(--muted); }
@media (max-width: 520px) { .devbar { bottom: 64px; } }

#caveVarietyPanel { display: grid; gap: 10px; margin: 16px 0; }
#caveVarietyPanel label { display: flex; align-items: center; gap: 8px; }
#caveVarietyPanel select { font: inherit; color: var(--text); background: var(--slab); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
#caveEventChoices article { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--slab); }
#caveEventChoices article p { margin: 0; color: var(--muted); font-size: 0.8125rem; }
#caveEventChoices article p:last-of-type { color: var(--text); }
#caveEventChoices [data-event-auto] { background: transparent; color: var(--muted); }
#shoppingRack { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; color: var(--muted); font-size: 0.8125rem; }
#shoppingRackNote { margin-bottom: 4px; }
#caveEventChoices h3 { margin: 0; }
#caveEventChoices button, #diveCancel { min-height: 40px; white-space: normal; text-align: left; }
#shoppingRack button { min-height: 36px; white-space: normal; text-align: left; flex: 0 1 auto; max-width: 100%; }
#caveEventChoices button, #diveCancel, #shoppingRack button { padding: 8px 12px; font: inherit; color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
#caveEventChoices button:disabled { opacity: .5; cursor: default; }
#caveVarietyPanel button:focus-visible, #caveVarietyPanel select:focus-visible, #shoppingRack button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }

.look { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.8125rem; color: var(--muted); }
.look input[type=range] { width: 100%; accent-color: var(--echo); }
.look output { font-family: var(--mono); text-align: right; color: var(--text); }
#lookReset { align-self: start; margin-top: 4px; padding: 6px 12px; font: inherit; color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
/* Title screen and main menu */
.menu { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; overflow: auto; background: radial-gradient(90% 70% at 50% 40%, #1b1230 0%, #0d0916 55%, #07050d 100%); }
.menu[hidden] { display: none; }
.menu > * { grid-area: 1 / 1; }
.menu-glow, .menu-motes { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.menu-glow i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(80px); opacity: .28; animation: menu-drift 24s ease-in-out infinite alternate; }
.menu-glow i:nth-child(1) { left: -12%; top: -14%; background: #3a8f86; }
.menu-glow i:nth-child(2) { right: -14%; top: 20%; background: #6f45c9; animation-delay: -8s; }
.menu-glow i:nth-child(3) { left: 28%; bottom: -34%; background: #b98a3c; opacity: .16; animation-delay: -15s; }
@keyframes menu-drift { to { transform: translate(7vmax, -5vmax) scale(1.15); } }
.menu-rock { position: fixed; top: 0; bottom: 0; width: 22vw; max-width: 300px; pointer-events: none; background: linear-gradient(180deg, rgba(60, 38, 110, .55), rgba(34, 22, 66, .35)); animation: menu-sway 9s ease-in-out infinite alternate; }
.menu-rock.left { left: 0; clip-path: polygon(0 0, 100% 0, 78% 7%, 92% 16%, 60% 26%, 74% 38%, 40% 52%, 58% 64%, 22% 78%, 36% 100%, 0 100%); }
.menu-rock.right { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%, 80% 82%, 46% 70%, 66% 56%, 30% 44%, 52% 30%, 22% 20%, 40% 8%); animation-delay: -4s; }
@keyframes menu-sway { to { transform: translateY(8px); opacity: .85; } }
.menu-motes i { position: absolute; left: var(--x); bottom: -4%; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0; animation: menu-rise var(--d) linear var(--l) infinite; }
@keyframes menu-rise { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .85; } 85% { opacity: .5; } 100% { opacity: 0; transform: translateY(-105vh) translateX(18px); } }
.menu-card { box-sizing: border-box; position: relative; width: min(440px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 12px 8px 20px; }
.menu-title { font-family: var(--display); font-weight: 500; font-size: clamp(2.8rem, 10vw, 5rem); letter-spacing: .02em; line-height: 1.02; color: #fff1c8; text-shadow: 0 0 22px rgba(255, 207, 134, .5), 0 2px 0 rgba(120, 70, 10, .5); overflow-wrap: anywhere; animation: menu-title 5s ease-in-out infinite; }
@keyframes menu-title { 50% { text-shadow: 0 0 34px rgba(255, 207, 134, .8), 0 2px 0 rgba(120, 70, 10, .5); } }
.menu-emblem { width: min(340px, 82vw); margin: -4px 0; height: auto; overflow: visible; }
.menu-emblem .m-ripples ellipse { fill: none; stroke: #8ff2e6; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: m-ripple 4.5s ease-out infinite; }
.menu-emblem .m-ripples ellipse:nth-child(2) { animation-delay: 1.5s; } .menu-emblem .m-ripples ellipse:nth-child(3) { animation-delay: 3s; }
@keyframes m-ripple { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
.menu-emblem .m-orbit { transform-box: view-box; transform-origin: 160px 150px; animation: m-spin 40s linear infinite; }
.menu-emblem .m-orbit.b { animation-duration: 28s; animation-direction: reverse; }
.menu-emblem .m-orbit circle:not(.dot) { fill: none; stroke: #e0b25a; stroke-width: 1.4; opacity: .8; }
.menu-emblem .m-orbit.b circle:not(.dot) { stroke: #a572f0; }
.menu-emblem .m-orbit .dot { fill: #f2c566; filter: drop-shadow(0 0 5px #f2c566); }
.menu-emblem .m-orbit.b .dot { fill: #c7a3ff; filter: drop-shadow(0 0 5px #a572f0); }
@keyframes m-spin { to { transform: rotate(360deg); } }
.menu-emblem .m-rocks polygon { fill: #241a3d; }
.menu-emblem .m-gem { animation: m-bob 5s ease-in-out infinite; }
.menu-emblem .m-gem.side.l { animation-delay: -1.6s; } .menu-emblem .m-gem.side.r { animation-delay: -3.2s; }
.menu-emblem .m-gem.main { filter: drop-shadow(0 0 14px rgba(95, 240, 205, .55)); animation-name: m-bob, m-glow; animation-duration: 5s, 3.6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.menu-emblem .m-gem.side { filter: drop-shadow(0 0 10px rgba(160, 110, 240, .5)); }
@keyframes m-bob { 50% { transform: translateY(-6px); } }
@keyframes m-glow { 50% { filter: drop-shadow(0 0 24px rgba(95, 240, 205, .95)); } }
.menu-emblem .main .f1 { fill: url(#mgT); } .menu-emblem .main .f2 { fill: #2fa88b; } .menu-emblem .main .f3 { fill: #8cf0d4; } .menu-emblem .main .f4 { fill: #d9fff6; opacity: .75; }
.menu-emblem .side .f1 { fill: url(#mgP); } .menu-emblem .side .f2 { fill: #7c4bd0; } .menu-emblem .side .f3 { fill: #cdb4ff; }
.menu-emblem .m-tri polygon, .menu-emblem .m-tri line { fill: none; stroke: #f2c566; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(242, 197, 102, .7)); }
.menu-sub { margin: 0; min-height: 1.3em; font-size: 0.8125rem; color: #a99fc4; font-family: var(--mono); }
.menu-list { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.menu-list button { min-height: 42px; padding: 9px 16px; font: inherit; font-size: 0.9375rem; color: #efe9ff; background: rgba(28, 20, 46, .78); border: 1px solid #4a3d63; border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; backdrop-filter: blur(4px); transition: border-color .15s, transform .15s, box-shadow .15s; }
.menu-list button:hover { border-color: #8ff2e6; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(63, 191, 159, .18); }
.menu-list button:focus-visible { outline: 2px solid #8ff2e6; outline-offset: 2px; }
.menu-list .menu-primary { font-weight: 600; color: #fff1c8; background: linear-gradient(180deg, rgba(62, 44, 100, .9), rgba(36, 26, 62, .9)); border-color: #e0b25a; box-shadow: 0 0 18px rgba(224, 178, 90, .22); }
.menu-skip { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #a99fc4; cursor: pointer; }
.menu-ver { font-family: var(--mono); font-size: 0.6875rem; color: #8b819f; }
@media (prefers-reduced-motion: reduce) { .menu *, .menu-glow i { animation: none !important; } .menu-motes { display: none; } }

/* Compact top chips: details and timers appear on hover, focus or click */
#depthChip { cursor: pointer; }
#depthChip { position: relative; z-index: 3; }
#depthChip .dx { position: absolute; left: 0; top: calc(100% + 6px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; box-sizing: border-box; min-width: 100%; max-height: 0; padding: 0 12px; opacity: 0; overflow: hidden; white-space: nowrap; pointer-events: none; transform: translateY(-4px); background: var(--slab-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 26px var(--shadow); transition: max-height .3s ease, padding .3s ease, opacity .22s ease, transform .3s ease; }
#depthChip:hover .dx, #depthChip:focus-visible .dx, #depthChip.open .dx { max-height: 8rem; padding: 8px 12px; opacity: 1; transform: none; pointer-events: auto; }
#depthChip .dx:empty { display: none; }
#depthChip .dx::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
#depthChip:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
.schip[data-timer] b { display: none; }
.schip[data-timer]:hover b, .schip[data-timer]:focus-visible b { display: inline; }
.brand { position: absolute; right: 14px; bottom: 12px; z-index: 3; max-width: min(48%, 340px); text-align: right; pointer-events: none; }
.brand h1, .brand .tagline { margin: 0; font-size: 0.875rem; letter-spacing: .02em; line-height: 1.35; }
.brand .tagline { color: var(--muted); }
.brand .verlink { pointer-events: auto; font-size: 0.6875rem; vertical-align: baseline; }
@media (max-width: 820px) { .brand h1 { font-size: 0.875rem; } }

/* Icon rail: Settings, Sound and Chronicle, labels slide out on hover or focus */
.rail { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; display: flex; flex-direction: column; gap: 6px; width: 34px; contain: inline-size; }
.rbtn { position: relative; box-sizing: border-box; width: fit-content; height: 34px; padding: 0 9px; gap: 0; justify-content: flex-start; overflow: hidden; white-space: nowrap; transition: padding .28s ease, color .15s, border-color .15s, background .15s; }
.rbtn svg { flex: none; }
.rbtn .lb { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; transition: max-width .28s ease, margin-left .28s ease, opacity .2s ease; }
.rbtn:hover, .rbtn:focus-visible { padding-right: 14px; color: var(--text); }
.rbtn:hover .lb, .rbtn:focus-visible .lb { max-width: 8rem; margin-left: 8px; opacity: 1; }
.rbtn .new { position: absolute; top: 5px; right: 5px; }
.rbtn:hover .new, .rbtn:focus-visible .new { display: none; }
#soundBtn[aria-pressed="true"] .ic-off, #soundBtn[aria-pressed="false"] .ic-on { display: none; }
@media (prefers-reduced-motion: reduce) { .rbtn, .rbtn .lb, #depthChip, #depthChip .dx { transition: none; } }

/* Motion pass: buttons, panels and dialogs. Everything here is skipped under reduced motion. */
:where(button, .chip, .schip, .tab, .item, .link, .bigbtn, .holdbtn, .worlds button, .hcard, .stat) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .22s ease, transform .16s ease, opacity .18s ease; }
:where(.item, .chip, .schip, .hcard):not(.poor):not(.maxed):hover { transform: translateY(-1px); }
:where(button, .item, .hcard):not(:disabled):not(.poor):not(.maxed):active { transform: scale(.97); transition-duration: .06s; }
:where(.bigbtn, .holdbtn):not(.poor):hover { transform: translateY(-1px); }
.tab { transition: color .18s ease, border-color .25s ease, background-color .18s ease; }
.tab[aria-selected="true"] { animation: tab-pop .28s ease; }
.panel:not([hidden]) { animation: rise .28s ease both; }
.pop:not([hidden]), .modal-box { animation: pop-in .22s cubic-bezier(.2, .8, .3, 1) both; transform-origin: top center; }
.modal:not([hidden]) { animation: fadein .2s ease both; }
.scene-card { animation: pop-in .35s cubic-bezier(.2, .8, .3, 1) both; }
.rbtn svg { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
#setBtn:hover svg, #setBtn:focus-visible svg { transform: rotate(75deg); }
#soundBtn:hover svg, #soundBtn:focus-visible svg { transform: scale(1.18); }
#chronBtn:hover svg, #chronBtn:focus-visible svg { transform: translateY(-2px) rotate(-6deg); }
.chip .new, .rbtn .new, .tab .new { animation: dot-pulse 2.4s ease-in-out infinite; }
.worlds button[aria-pressed="true"] { animation: tab-pop .25s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tab-pop { 0% { transform: translateY(2px); opacity: .7; } 100% { transform: none; opacity: 1; } }
@keyframes dot-pulse { 50% { transform: scale(1.35); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  :where(button, .chip, .schip, .tab, .item, .link, .bigbtn, .holdbtn, .worlds button, .hcard, .stat) { transition: none; transform: none !important; }
  .tab[aria-selected="true"], .panel, .pop, .modal, .modal-box, .scene-card, .chip .new, .rbtn .new, .tab .new, .worlds button[aria-pressed="true"] { animation: none !important; }
  .rbtn svg { transition: none; transform: none !important; }
}

.schip .ic { display: none; flex: none; }
.hud-left { flex-wrap: nowrap; }
/* Narrower stages drop text before anything leaves the top row: first the chip values (shown on hover), then the Chord meter, then the chip icons. */
@container (max-width: 35rem) { .schip { gap: 6px; padding: 5px 8px; } .schip > b { display: none; } }
@container (max-width: 29.5rem) { .hud-right #chord { display: none; } }
@container (max-width: 25.5rem) { .schip .ic { display: none !important; } .schip { padding: 6px; } }
@container (max-width: 20rem) { .worlds button { padding: 4px 7px; } .hud-left, .strip { gap: 3px; } .dock { column-gap: 4px; } #depthChip { padding: 4px 7px; } .schip { padding: 4px; } }
.hud-left > *, .strip > * { flex: none; white-space: nowrap; }

/* The Last Chorus: the expedition card on the stage. Cues are always shown as text as well as sound and motion. */
.chorus { position: absolute; left: 16px; bottom: 16px; z-index: 5; box-sizing: border-box; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 120px); overflow-y: auto;
  padding: 8px 12px; border-radius: 14px; background: var(--slab); border: 1px solid var(--line-2); box-shadow: 0 10px 30px var(--shadow); font-size: 0.8125rem; color: var(--text); }
.chorus.open { padding: 12px 14px; border-color: var(--fathom); }
.chorus p { margin: 6px 0; line-height: 1.45; }
.chorus .note { color: var(--muted); font-size: 0.75rem; }
.chorus button { min-height: 36px; margin: 3px 4px 3px 0; padding: 6px 12px; font: inherit; color: var(--text); background: var(--slab-2); border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.chorus button:focus-visible { outline: 2px solid var(--echo); outline-offset: 2px; }
.chorus button[aria-disabled="true"] { opacity: .5; cursor: default; }
.chorus-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chorus-row > span:first-child { flex: 1; min-width: 12rem; }
.chorus-head { display: flex; flex-direction: column; gap: 2px; }
.chorus-head b { font-family: var(--display); font-size: 1rem; font-weight: 400; color: var(--fathom); }
.chorus-head span { color: var(--muted); font-size: 0.75rem; }
.chorus-choices { display: grid; gap: 6px; }
.chorus-choices button { text-align: left; margin: 0; }
.chorus-choices small, .chorus-options small { display: block; color: var(--muted); font-size: 0.6875rem; margin-top: 2px; }
.chorus-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chorus-options button { margin: 0; display: flex; flex-direction: column; align-items: center; }
.chorus-options button.tried { text-decoration: line-through; }
.chorus-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 22px; }
.chorus-bars i { width: 8px; height: calc(30% + var(--h) * 35%); border-radius: 3px; background: var(--fathom); }
.chorus-bars.big { height: 40px; gap: 8px; }
.chorus-bars.big i { width: 16px; }
.chorus-clue { display: flex; align-items: center; gap: 14px; }
.chorus-track { margin: 14px 8px; }
.chorus-pulse { position: relative; height: 72px; margin: 6px 0; }
.chorus-pulse i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; transform: scale(var(--s, .5)); }
.chorus-pulse i:first-child { border: 3px solid var(--heart); }
.chorus-pulse i:last-child { border: 3px dashed var(--fathom); }
.chorus-meter { margin: 4px 0 8px; }
.chorus-meter i { transition: none; }
.chorus-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.chorus-last:empty { display: none; }
.stage:has(.chorus:not([hidden])) .whisper { bottom: auto; top: 96px; }
@media (prefers-reduced-motion: reduce) { .chorus-pulse { display: none; } }
.chorus #chorusTiming:empty { display: none; }
/* Stacked layout: the side panel scrolls below the stage, so keep the expedition in view. */
@media (max-width: 820px) {
  .chorus { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60vh; }
  .stage:has(.chorus:not([hidden])) .whisper { top: 80px; }
}