/* Homepage nameboard and painted ship's instruments. Ornament is cached SVG;
   only the live needle/level change, and only when a market response arrives. */
.surface-below { gap:18px; padding-bottom:45px }
#contractHero {
    width:930px; max-width:100%; min-height:0; aspect-ratio:5;
    padding:0 60px; gap:12px; background:none;
    flex-wrap:nowrap; justify-content:center; isolation:isolate;
}
#contractHero .nameboard-art { position:absolute; inset:0; z-index:-1; pointer-events:none }
#contractHero .nameboard-art img { width:100%; height:100% }
#contractHero .contract-reading { display:flex; align-items:baseline; gap:12px; flex:none; min-width:0 }
#contractHero .ca-label {
    display:block; flex:none;
    font-size:38px; line-height:1; color:#e9c9a5;
}
#contractHero .ca-text {
    flex:none; font:28px/1.5 ui-monospace,monospace; letter-spacing:-.3px;
    color:#f5eafb; white-space:nowrap; text-shadow:0 2px 1px #100919;
}
#contractHero .copy-btn {
    flex:none; width:88px; height:88px; padding:16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; background:url('/assets/illustrated/contract-copy-v1.svg') center/contain no-repeat;
    color:#f5eafb; border-radius:0; font-size:18px; line-height:1;
}
#contractHero .copy-btn:hover, #contractHero .copy-btn:focus-visible { color:#dfc5ff }
#contractHero .copy-btn.copied { color:#e2caff }
#contractHero .copy-done, #contractHero .copied .copy-idle { display:none }
#contractHero .copied .copy-done { display:inline }
#statsTicker { width:100%; max-width:1040px }
#statsTicker .stats-ticker-inner {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start; gap:0 8px; width:100%; max-width:none;
}
#statsTicker .ship-instrument {
    position:relative; width:100%; min-width:0; max-width:260px;
    aspect-ratio:13/15; padding:0; background:none; margin-inline:auto;
    container-type:inline-size;
}
.instrument-art, .instrument-mechanism { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.instrument-mechanism text { fill:#ead2b6; font:12px var(--font-body) }
#statsTicker .stat-label {
    position:absolute; top:82.1%; left:19%; right:19%; height:12%;
    display:flex; justify-content:center; align-items:center;
    font-size:27px; line-height:1; color:#f2dfc7;
}
#statsTicker .stat-value {
    position:absolute; top:59.9%; left:14.3%; right:14.3%; height:14%;
    display:flex; justify-content:center; align-items:center;
    min-height:0; font-size:38px; font-size:min(38px,15cqi);
    font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap;
    color:#f5eafb; text-shadow:0 2px 1px #100919;
}
#statsTicker .stat-value.negative { color:#ffd2e1 }
#statsTicker .stat-value.positive { color:#e7d6ff }
#statsTicker .stat-value[data-length="long"] { font-size:min(32px,12.3cqi) }
#statsTicker .stat-value[data-length="extra"] { font-size:min(25px,9.6cqi) }
#statsTicker [data-reading="loading"] .stat-value { font:24px var(--font-body) }
.instrument-caption {
    position:absolute; top:96%; left:0; right:0;
    color:#d1bddf; font-size:18px; line-height:1.3; text-align:center;
}
#statsTicker .stats-updated { grid-column:1/-1; margin:30px 0 0; font-size:18px }
.ship-instrument:not([data-reading="ready"]) .change-needle,
.ship-instrument:not([data-reading="ready"]) .liquidity-level,
.ship-instrument:not([data-reading="ready"]) .instrument-mechanism text { visibility:hidden }
@media (max-width:1099px) and (min-width:1000px) {
    #contractHero { padding-inline:5.5% }
}
@media (max-width:999px) {
    #contractHero { width:700px; aspect-ratio:70/23; padding:0; flex-direction:column; gap:0 }
    #contractHero .contract-reading { position:absolute; top:50%; left:13%; width:74%; transform:translateY(-50%) }
    #contractHero .ca-label { font-size:32px }
    #contractHero .ca-text { flex:1; min-width:0; font-size:26px; white-space:normal; word-break:break-all; text-wrap:balance; text-align:left; line-height:1.35 }
    #contractHero .copy-btn { position:absolute; right:6%; bottom:4%; width:70px; height:70px; padding:12px; font-size:16px }
    #contractHero .copy-btn svg { width:28px; height:28px }
    #statsTicker { max-width:580px }
    #statsTicker .stats-ticker-inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px }
    #statsTicker .stats-updated { margin-top:0 }
}
@media (max-width:599px) {
    .surface-below { gap:8px }
    #contractHero { width:400px; aspect-ratio:4/3; padding:0; justify-content:center }
    #contractHero .contract-reading { top:44%; gap:8px }
    #contractHero .ca-label { font-size:30px }
    #contractHero .ca-text { font-size:clamp(20px,5.35vw,22px); letter-spacing:-.3px; line-height:1.4 }
    #contractHero .copy-btn { right:calc(50% - 34px); bottom:7%; width:68px; height:68px; font-size:15px }
    #contractHero .copy-btn svg { width:26px; height:26px }
    #statsTicker { max-width:260px }
    #statsTicker .stats-ticker-inner { grid-template-columns:minmax(0,1fr); gap:24px }
    #statsTicker .stats-updated { margin-top:8px }
}
@media (max-width:359px) {
    #contractHero { aspect-ratio:20/17 }
    #contractHero .ca-label { font-size:28px }
    #contractHero .copy-btn { bottom:5%; width:60px; height:60px; right:calc(50% - 30px); font-size:14px }
    #contractHero .copy-btn svg { width:24px; height:24px }
}