/* Competition sprint layer: visual system for the eight-node Henan sonic atlas. */
:root { --cf-ink: #111619; --cf-paper: #f2eee7; --cf-jade: #79b5a5; --cf-coral: #ed654f; --cf-gold: #e2b568; }
body { overflow-x: clip; }
.cf-opening-sequence { position: absolute; z-index: 2; inset: 10% 6% 16%; width: 88%; height: 72%; pointer-events: none; opacity: .72; mix-blend-mode: screen; }
.cf-opening-copy { position: absolute; z-index: 5; left: 7%; bottom: 20%; max-width: 420px; pointer-events: none; }
.cf-opening-copy b { display: block; margin-bottom: 9px; color: var(--cf-jade); font: 10px/1.2 var(--mono); letter-spacing: .22em; }
.cf-opening-copy strong { display: block; color: var(--cf-paper); font: 24px/1.45 var(--serif); font-weight: 400; }
.cf-opening-copy span { display: block; margin-top: 8px; color: rgba(242,238,231,.55); font: 9px var(--mono); letter-spacing: .16em; }
.cf-spectrum-launch { position: absolute; z-index: 8; right: 7%; bottom: 19%; padding: 11px 14px; border: 1px solid rgba(121,181,165,.55); color: var(--cf-paper); background: rgba(17,22,25,.34); font: 9px var(--mono); letter-spacing: .12em; backdrop-filter: blur(8px); }
.cf-spectrum-launch:hover { border-color: var(--cf-coral); color: var(--cf-gold); transform: translateY(-3px); }
.cf-river-signal { position: absolute; z-index: 6; right: 7%; top: 12%; width: min(260px, 26vw); padding: 12px 14px; border-left: 1px solid var(--cf-coral); color: rgba(242,238,231,.7); background: rgba(17,22,25,.22); font: 9px/1.7 var(--mono); letter-spacing: .08em; pointer-events: none; }
.cf-river-signal b { display: block; color: var(--cf-gold); font-size: 14px; font-weight: 400; }
.cf-river-signal i { display: block; height: 3px; margin-top: 10px; background: linear-gradient(90deg, var(--cf-jade), var(--cf-coral), var(--cf-gold)); transform-origin: left; }
#river[data-time-band="dawn"] .river-photo img { filter: sepia(.18) hue-rotate(8deg) saturate(.9) contrast(1.08); }
#river[data-time-band="day"] .river-photo img { filter: saturate(1.18) contrast(1.1) brightness(1.08); }
#river[data-time-band="dusk"] .river-photo img { filter: sepia(.28) hue-rotate(318deg) saturate(1.25) contrast(1.16) brightness(.82); }
#river[data-time-band="night"] .river-photo img { filter: hue-rotate(170deg) saturate(.72) contrast(1.25) brightness(.58); }
.cf-material-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 15px; }
.cf-material-tabs button { min-width: 48px; padding: 7px 10px; border: 1px solid rgba(242,238,231,.18); color: #9ba79e; background: transparent; font: 11px var(--serif); transition: .25s; }
.cf-material-tabs button small { display: block; margin-top: 2px; color: #6f7f76; font: 7px var(--mono); letter-spacing: .12em; }
.cf-material-tabs button:hover, .cf-material-tabs button.is-active { border-color: var(--cf-gold); color: var(--cf-paper); background: rgba(226,181,104,.11); }
#ancient[data-material="刻"] .pattern-space { border-color: rgba(224,183,112,.52); }
#ancient[data-material="器"] .pattern-space { border-color: rgba(201,141,99,.52); }
#ancient[data-material="戏"] .pattern-space { border-color: rgba(237,101,79,.52); }
#ancient[data-material="纹"] .pattern-space { border-color: rgba(187,164,189,.52); }
.cf-collage { display: grid; grid-template-columns: 1.28fr .78fr .94fr; grid-template-rows: 124px 144px; gap: 10px; width: min(680px, 53vw); margin: -6px 0 28px auto; transform: rotate(-1.2deg); }
.cf-collage figure { position: relative; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(242,238,231,.22); background: #1a2424; box-shadow: 11px 12px 0 rgba(7,12,13,.18); }
.cf-collage figure:nth-child(1) { grid-row: span 2; clip-path: polygon(3% 0, 97% 4%, 100% 97%, 0 100%); }
.cf-collage figure:nth-child(2) { clip-path: polygon(4% 6%, 100% 0, 96% 100%, 0 92%); }
.cf-collage figure:nth-child(3) { clip-path: polygon(0 3%, 95% 0, 100% 94%, 7% 100%); }
.cf-collage figure:nth-child(4) { clip-path: polygon(0 6%, 100% 0, 96% 100%, 3% 95%); }
.cf-collage figure:nth-child(5) { clip-path: polygon(5% 0, 100% 8%, 93% 100%, 0 95%); }
.cf-collage img { width: 100%; height: 100%; object-fit: cover; opacity: .75; filter: saturate(.8) contrast(1.15); transition: transform .6s, opacity .4s, filter .4s; }
.cf-collage figure:hover img { opacity: 1; transform: scale(1.08); filter: saturate(1.1) contrast(1.2); }
.cf-collage figcaption { position: absolute; right: 9px; bottom: 8px; color: #fff; text-shadow: 0 1px 6px #000; font: 8px var(--mono); letter-spacing: .1em; }
.cf-collage::before { content: "CITY / FIELD / SIGNAL / PEOPLE / NIGHT"; position: absolute; z-index: 2; top: -19px; right: 0; color: var(--cf-jade); font: 8px var(--mono); letter-spacing: .16em; }
.cf-spectrum-overlay { z-index: 130; display: grid; place-items: center; padding: 22px; background: rgba(7,12,13,.93); }
.cf-spectrum-panel { position: relative; width: min(1240px, 100%); max-height: min(90vh, 860px); overflow: auto; padding: 27px; border: 1px solid rgba(121,181,165,.32); background: radial-gradient(circle at 32% 36%, rgba(121,181,165,.12), transparent 34%), #11191b; box-shadow: 0 30px 110px rgba(0,0,0,.55); }
.cf-spectrum-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 22px; }
.cf-spectrum-head h2 { margin: 6px 0 0; color: var(--cf-paper); font: 42px/1.08 var(--serif); font-weight: 400; }
.cf-spectrum-head p { max-width: 290px; margin: 0; color: #91a097; font: 11px/1.7 var(--serif); }
.cf-spectrum-kicker { color: var(--cf-jade); font: 9px var(--mono); letter-spacing: .2em; }
.cf-spectrum-body { display: grid; grid-template-columns: minmax(420px, 1.25fr) minmax(260px, .75fr); gap: 25px; align-items: stretch; }
.cf-spectrum-map { position: relative; min-height: 470px; overflow: hidden; border: 1px solid rgba(242,238,231,.15); background: radial-gradient(circle at center, rgba(226,181,104,.08), transparent 32%), linear-gradient(135deg, rgba(121,181,165,.04), transparent 55%); }
.cf-spectrum-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cf-spectrum-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 55px; height: 55px; border: 1px solid var(--node-color); border-radius: 50%; color: var(--node-color); background: rgba(17,25,27,.8); box-shadow: 0 0 0 7px rgba(255,255,255,.02); font: 25px var(--serif); transition: .3s; }
.cf-spectrum-node small { position: absolute; top: 62px; white-space: nowrap; color: rgba(242,238,231,.62); font: 8px var(--mono); letter-spacing: .12em; }
.cf-spectrum-node:hover, .cf-spectrum-node.is-active { color: #111619; background: var(--node-color); box-shadow: 0 0 0 8px color-mix(in srgb, var(--node-color) 18%, transparent), 0 0 40px color-mix(in srgb, var(--node-color) 28%, transparent); transform: scale(1.08); }
.cf-spectrum-context { position: relative; padding: 22px; border-left: 1px solid var(--cf-coral); background: rgba(7,12,13,.38); }
.cf-spectrum-context .cf-context-label { color: var(--cf-coral); font: 8px var(--mono); letter-spacing: .18em; }
.cf-spectrum-context h3 { margin: 20px 0 5px; color: var(--cf-paper); font: 31px var(--serif); font-weight: 400; }
.cf-spectrum-context h3 span { display: block; margin-top: 6px; color: var(--cf-jade); font: 9px var(--mono); letter-spacing: .1em; }
.cf-spectrum-context p { min-height: 95px; color: #a3afa6; font: 13px/1.9 var(--serif); }
.cf-spectrum-context dl { display: grid; grid-template-columns: 85px 1fr; gap: 8px; margin: 20px 0; color: #8c9a91; font: 9px/1.7 var(--mono); }
.cf-spectrum-context dt { color: var(--cf-gold); }
.cf-spectrum-context button { padding: 10px 0; border-bottom: 1px solid var(--cf-coral); color: var(--cf-paper); background: transparent; font: 9px var(--mono); letter-spacing: .1em; }
.cf-context-drawer { max-height: 0; overflow: hidden; margin-top: 15px; padding: 0 13px; border-left: 1px solid rgba(121,181,165,.45); color: #a3afa6; font: 10px/1.8 var(--serif); transition: max-height .4s, padding .4s; }
.cf-context-drawer.is-open { max-height: 150px; padding-top: 11px; padding-bottom: 11px; }
.cf-spectrum-foot { display: flex; justify-content: space-between; gap: 15px; margin-top: 18px; color: #718078; font: 8px var(--mono); letter-spacing: .1em; }
.cf-about-diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 24px 0; }
.cf-about-diagram div { position: relative; padding: 13px 9px; border-top: 1px solid var(--cf-jade); background: rgba(121,181,165,.06); }
.cf-about-diagram div:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 13px; z-index: 2; color: var(--cf-coral); }
.cf-about-diagram b { display: block; color: var(--cf-jade); font: 8px var(--mono); letter-spacing: .1em; }
.cf-about-diagram span { display: block; margin-top: 8px; color: var(--cf-paper); font: 12px var(--serif); }
.cf-application-scene { position: relative; min-height: 130px; margin-top: 20px; padding: 16px; overflow: hidden; border: 1px solid rgba(226,181,104,.28); background: linear-gradient(115deg, rgba(226,181,104,.09), rgba(121,181,165,.05)); }
.cf-application-scene::before { content: "CONCEPT APPLICATION / 展示概念"; display: block; margin-bottom: 16px; color: var(--cf-gold); font: 8px var(--mono); letter-spacing: .16em; }
.cf-application-scene i { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--cf-jade), transparent); transform: rotate(-10deg); opacity: .7; }
.cf-application-scene i:nth-of-type(1) { left: 5%; right: 20%; top: 58%; }
.cf-application-scene i:nth-of-type(2) { left: 30%; right: 5%; top: 76%; transform: rotate(7deg); }
.cf-application-scene span { position: relative; z-index: 1; display: inline-block; margin-right: 19px; color: var(--cf-paper); font: 16px var(--serif); }
.cf-exhibition-label { position: fixed; z-index: 200; top: 22px; left: 50%; padding: 8px 12px; border: 1px solid var(--cf-coral); color: var(--cf-paper); background: rgba(17,22,25,.82); transform: translateX(-50%); font: 8px var(--mono); letter-spacing: .16em; opacity: 0; transition: opacity .4s; pointer-events: none; }
body.is-exhibition .cf-exhibition-label { opacity: 1; }
body.is-exhibition .topbar, body.is-exhibition .chapter-drawer, body.is-exhibition .custom-cursor, body.is-exhibition .sound-river-progress { opacity: 0 !important; pointer-events: none !important; }
body[data-culture-mode="oracle"] .ambient-canvas { filter: sepia(.55) hue-rotate(320deg); }
body[data-culture-mode="ceramic"] .ambient-canvas { filter: saturate(1.3) hue-rotate(155deg); }
body[data-culture-mode="martial"] .ambient-canvas { filter: hue-rotate(45deg) saturate(.8); }
body[data-culture-mode="city"] .ambient-canvas { filter: hue-rotate(30deg) saturate(1.1) contrast(1.15); }
.qr-entry { position: relative; }
.cf-qr-mark { display: block; width: 48px; height: 48px; margin: 0 auto 6px; }
.cf-qr-mark + span { display: block; }

@media (max-width: 760px) {
  .cf-opening-sequence { inset: 10% 4% 28%; width: 92%; height: 57%; opacity: .58; }
  .cf-opening-copy { left: 7%; bottom: 26%; max-width: 265px; }
  .cf-opening-copy strong { font-size: 18px; }
  .cf-spectrum-launch { right: 7%; bottom: 15%; font-size: 8px; }
  .cf-river-signal { right: 6%; top: 10%; width: 170px; font-size: 8px; }
  .cf-collage { width: 92%; margin: 10px auto 28px; grid-template-rows: 94px 110px; }
  .cf-spectrum-overlay { padding: 9px; }
  .cf-spectrum-panel { padding: 18px 13px; max-height: 94vh; }
  .cf-spectrum-head { display: block; }
  .cf-spectrum-head h2 { font-size: 32px; }
  .cf-spectrum-head p { margin-top: 8px; }
  .cf-spectrum-body { grid-template-columns: 1fr; gap: 12px; }
  .cf-spectrum-map { min-height: 350px; }
  .cf-spectrum-node { width: 43px; height: 43px; font-size: 20px; }
  .cf-spectrum-node small { top: 49px; font-size: 7px; }
  .cf-spectrum-context { min-height: 280px; padding: 15px; }
  .cf-about-diagram { grid-template-columns: 1fr; gap: 5px; }
  .cf-about-diagram div:not(:last-child)::after { right: 14px; top: auto; bottom: -12px; transform: rotate(90deg); }
  .cf-application-scene span { margin-bottom: 8px; }
}