/* Additions for the local recreation only - everything else is the original stylesheet (original.css).
   Footer items below are sized to the original footer line height so the page composition is unchanged. */

/* "Reference snapshot · not live" label for the frozen figures. */
.bottombar-chips{align-items:center}
.snapshot-note{min-width:0;overflow:hidden;color:#cdb6a6;opacity:.8;white-space:nowrap;text-overflow:ellipsis;font-size:10px;letter-spacing:.02em}
.snapshot-note-short{display:none}

/* Music toggle, styled like the footer's Tensor link. */
.sound-toggle{margin-left:auto;display:inline-flex;flex:none;align-items:center;gap:.4em;padding:0;color:var(--sun-2);font-family:var(--font-label);font-size:13px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:none;border:0}
.sound-toggle[hidden]{display:none}
.sound-toggle:hover:not(:disabled){filter:brightness(1.15)}
.sound-toggle:disabled{cursor:default;opacity:.6}
.sound-toggle[aria-pressed="false"]{color:#cdb6a6}
.sound-icon{flex:none;width:1.2em;height:1.2em}
.sound-toggle[aria-pressed="true"] .sound-icon-off,.sound-toggle[aria-pressed="false"] .sound-icon-on{display:none}

@media (max-width:760px){
  .snapshot-note-long{display:none}
  .snapshot-note-short{display:inline}
  .sound-toggle{font-size:12px}
}

/* Responsive repair (this clone only). The original .screen is exactly 100dvh tall and .stage clips its
   overflow, so wherever the hero plus lineup need more height than is left above the parade, the
   vault/captured panels slid under the parade. The stage now grows to fit its content and the page
   scrolls when the viewport is too small; where everything fits, the composition is unchanged. */
body{overflow-x:hidden;overflow-y:auto}
.screen{height:auto;min-height:100dvh}
.stage-content{grid-template-rows:auto minmax(16px,1fr) auto}
.lineup{padding-bottom:12px}
@media (max-height:520px){.screen{grid-template-rows:auto minmax(max-content,560px) 150px auto}}

/* Labels and footer text wrap instead of spilling out of their frames or being cut off. (Phones keep
   one-line labels: there the original sizes the lineup columns to fit them.) */
@media (min-width:761px){.pedestal-label{white-space:normal;text-wrap:balance}}
.bottombar p,.snapshot-note{white-space:normal}

/* Read-only treasury status (separate buyer service). The badge is pinned to the right end of the ticker bar and
   taken out of flow, so no part of the original composition moves; the panel is a native modal dialog. */
.treasury-badge{position:absolute;top:0;right:0;z-index:6;display:inline-flex;align-items:center;gap:.45em;height:31px;padding:0 var(--gutter) 0 26px;color:var(--sun-2);font-family:var(--font-label);font-size:13px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:linear-gradient(90deg,#14060a00,var(--night) 20px);border:0}
.treasury-badge[hidden]{display:none}
.treasury-badge:hover .treasury-badge-label,.treasury-badge:focus-visible .treasury-badge-label{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.treasury-badge:focus-visible{outline:2px solid var(--gold-2);outline-offset:-3px}
.treasury-badge-state{color:var(--gold-1)}
.treasury-badge-state:before{content:"· ";color:var(--gold-3)}
.treasury-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#8d7b70;box-shadow:0 0 0 2px #0007}
[data-state="loading"] .treasury-dot{background:#cdb6a6}
[data-state="paused"] .treasury-dot{background:var(--sun-2)}
[data-state="active"] .treasury-dot{background:#4fd36b}
[data-state="unavailable"] .treasury-dot,[data-state="stale"] .treasury-dot{background:var(--marquee-1)}
@media (max-width:760px){.treasury-badge{height:26px;padding-left:20px;font-size:11px}}
/* Narrow phones: dot + "Treasury"; the state stays in the accessible name and the panel. */
@media (max-width:420px){.treasury-badge-state{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

.treasury-panel{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;color:var(--cream);background:linear-gradient(180deg,var(--maroon-1),var(--maroon-2));border:2px solid var(--gold-3);border-radius:14px;box-shadow:0 0 0 4px #0008,0 24px 70px #000d}
.treasury-panel::backdrop{background:#0b0306d9}
.treasury-sheet{display:grid;gap:12px;padding:16px 18px 14px;font-size:13px;line-height:1.45}
.treasury-head{display:flex;align-items:center;gap:10px}
.treasury-head h2{margin:0;color:var(--gold-1);font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:.02em}
.treasury-chip{padding:2px 10px;color:var(--night);font-family:var(--font-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#cdb6a6;border-radius:999px}
.treasury-chip[data-state="paused"]{background:var(--sun-2)}
.treasury-chip[data-state="active"]{background:#4fd36b}
.treasury-chip[data-state="unavailable"],.treasury-chip[data-state="stale"]{color:var(--gold-1);background:var(--marquee-2)}
.treasury-close{margin-left:auto;width:34px;height:34px;padding:0;color:var(--gold-1);font-size:22px;line-height:1;cursor:pointer;background:#0004;border:1px solid var(--gold-4);border-radius:50%}
.treasury-close:hover,.treasury-close:focus-visible{border-color:var(--gold-2);outline:none}
.treasury-sheet p{margin:0}
.treasury-lede,.treasury-foot{color:#cdb6a6;font-size:12px}
.treasury-warning{padding:6px 10px;color:var(--night);font-family:var(--font-label);letter-spacing:.04em;background:var(--sun-2);border-radius:8px}
.treasury-warning[hidden],.treasury-facts[hidden],.treasury-section[hidden]{display:none}
.treasury-message{color:var(--gold-1)}
.treasury-facts{display:grid;gap:6px;margin:0}
.treasury-facts div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px}
.treasury-facts dt{color:var(--gold-2);font-family:var(--font-label);letter-spacing:.04em}
.treasury-facts dd{margin:0;overflow-wrap:anywhere}
.treasury-section h3{margin:0 0 4px;color:var(--gold-2);font-family:var(--font-label);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.treasury-section ul,.treasury-section ol{display:grid;gap:4px;margin:0;padding-left:18px}
.treasury-inventory{padding-left:0!important;list-style:none}
.treasury-inventory li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;overflow-wrap:anywhere}
.treasury-inventory img{width:40px;height:40px;object-fit:cover;border:1px solid var(--gold-4);border-radius:6px}
.treasury-sheet a{color:var(--sun-2);text-underline-offset:3px}
@media (max-width:480px){.treasury-facts div{grid-template-columns:1fr;gap:0}}
/* "Classic" edition line under the title: same extruded lettering, smaller and spaced. */
.title-line3{font-size:.4em;letter-spacing:.14em}