:root { --display: 'STXingkai','华文行楷','KaiTi','STKaiti',serif; --sans: 'Microsoft YaHei UI','Microsoft YaHei','PingFang SC',sans-serif; }
body { font-feature-settings: 'kern'; letter-spacing: .025em; }
button,input,select { font-family: var(--sans); }
.brand-cn { font-size: 27px; letter-spacing: 4px; text-shadow: 1px 2px #fff1ce; }
.route-item span { font-family: var(--display); font-size: 16px; letter-spacing: 2px; }
.station-plate b,.minor-city b { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: 5px; }
.loc { font-size: 25px; }.hint { font-size: 13px; }
.station-btn,.bonus-activity { letter-spacing: 1px; font-weight: 600; }
.cinematic-intro { background: radial-gradient(ellipse at 50% 42%,#144d5ce8,#071b2df7 65%,#080e20fc); overflow: hidden; backdrop-filter: blur(8px); }
.cinematic-intro .intro-paper { background: transparent; border: 0; box-shadow: none; color: #f8eccd; width: min(850px,86vw); padding: 45px; }
.cinematic-intro .intro-paper::before,.cinematic-intro .intro-paper::after { background: linear-gradient(90deg,transparent,#76d7ce88,transparent); }
.cinematic-intro .intro-kicker { color: #9de6da; font-size: 17px; letter-spacing: 7px; animation: title-rise .8s both; }
.cinematic-intro h1 { font-size: clamp(64px,8vw,112px); letter-spacing: 10px; line-height: 1.18; filter: drop-shadow(0 4px 20px #69cfc344); }
.cinematic-intro h1 .intro-letter { display: inline-block; color: #f8e8ba; animation: letter-arrive .9s cubic-bezier(.15,.85,.25,1.15) both; animation-delay: calc(var(--i)*.16s + .2s); }
.cinematic-intro h1 strong { font-family: var(--display); display: inline-block; color: #8be4d2; font-size: .75em; font-weight: 500; letter-spacing: 25px; margin-top: 5px; animation: title-rise 1s .9s both; }
.cinematic-intro .intro-sub { color: #b8d1d4; font-family: var(--sans); font-size: 16px; line-height: 2.1; max-width: 610px; margin: 25px auto; animation: title-rise .8s 1.2s both; }
.cinematic-intro .intro-start { background: linear-gradient(120deg,#d8b56f,#f0dfac,#bf974b); color: #183e45; border: 1px solid #f4dfae; border-radius: 7px; font-weight: 700; letter-spacing: 3px; box-shadow: 0 0 40px #dcc68025; animation: title-rise .8s 1.5s both; }
.cinematic-intro .intro-hint { color: #82adaf; font-size: 12px; letter-spacing: 2px; animation: title-rise .8s 1.7s both; }
.intro-orbits { position: absolute; width: 780px; height: 780px; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.intro-orbits i { position: absolute; inset: 0; border: 1px solid #89d9ca24; border-radius: 50%; transform: rotateX(58deg) rotateZ(-20deg); box-shadow: 0 0 70px #57b8bb0b; }
.intro-orbits i:nth-child(2) { inset: 60px; border-style: dashed; transform: rotateX(30deg) rotateZ(50deg); animation: orbit-turn 35s linear infinite; }.intro-orbits i:nth-child(3) { inset: -90px; border-color: #bd99581c; }
.intro-orbits span { position: absolute; font-family: var(--display); font-size: 75px; color: #77d1bf13; top: 15%; left: 7%; }.intro-orbits span:nth-last-child(2) { top: 64%; left: 83%; }.intro-orbits span:last-child { top: 7%; left: 76%; }
.intro-skip { position: absolute; right: 30px; top: 30px; color: #a8c8c9; border: 1px solid #70aaa55c; background: #173c4855; border-radius: 30px; padding: 9px 18px; cursor: pointer; }
.inspect-label { color: #827044; font-size: 10px; padding: 2px 8px; background: #f6edcfbd; border-radius: 10px; margin-top: -7px; }
.landmark[role=button] { cursor: zoom-in; }
#architecture-gallery { z-index: 140; background: #071725cc; backdrop-filter: blur(12px); }
.gallery-box { position: relative; width: min(1240px,95vw); max-height: 92vh; overflow-y: auto; border: 1px solid #88aaa38c; border-radius: 19px; padding: 28px 32px; background: linear-gradient(135deg,#f8f1dd,#e7e5d2); color: #304b44; box-shadow: 0 30px 110px #0007; }
.gallery-eyebrow { font-size: 11px; color: #7b865f; letter-spacing: 3px; margin: 0 0 10px; }
#gallery-title { font-family: var(--display); font-size: 37px; letter-spacing: 4px; margin: 0 0 8px; font-weight: 500; }#gallery-theme { color: #72816c; font-size: 13px; margin: 0 0 23px; }
.gallery-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; }.gallery-visual { min-width: 0; }
.gallery-model { width: 100%; height: min(41vh,390px); border: 1px solid #9cb5a47a; border-radius: 13px; background: radial-gradient(ellipse at 50% 80%,#9eac895c,transparent 60%),linear-gradient(155deg,#e8ead8,#bfcfba); overflow: hidden; cursor: grab; touch-action: none; }
.gallery-model:active { cursor: grabbing; }.gallery-model.model-landmark { filter: none; transform: none; }.gallery-model canvas { width: 100%; height: 100%; object-fit: contain; }
.model-notice { font-size: 11px; text-align: center; color: #7c816e; margin: 9px 0 13px; }
.gallery-controls { display: flex; gap: 7px; align-items: center; }.gallery-controls button,.gallery-sites button { background: #faf3de; border: 1px solid #afb292; color: #44624f; border-radius: 6px; padding: 8px 11px; cursor: pointer; }.gallery-controls label { display: flex; flex: 1; gap: 7px; align-items: center; font-size: 12px; }.gallery-controls input { width: 80px; flex: 1; accent-color: #5e8062; }.gallery-controls output { width: 34px; }.model-tilt { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #687b65; margin: 14px 0; }.model-tilt input { flex: 1; accent-color: #5e8062; }.gallery-hint { font-size: 11px; color: #7a836e; }.gallery-sites { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 17px; }.gallery-sites button { padding: 12px 6px; font-size: 12px; line-height: 1.8; }.gallery-sites button.selected { background: #3f6856; color: #fff2ce; border-color: #3f6856; }
.gallery-reading { max-height: 62vh; overflow-y: auto; padding-right: 12px; }.gallery-reading section { margin-bottom: 23px; }.gallery-reading h3 { font-size: 19px; color: #516a50; border-left: 3px solid #ad9050; padding-left: 12px; margin: 0 0 11px; }.gallery-reading p { font-size: 15px; line-height: 2.1; color: #5d6553; margin: 0; text-align: justify; }
.historical-dossier { text-align: left; border-top: 1px solid #72999b55; padding-top: 18px; margin-top: 23px; }.historical-dossier h3 { font-size: 18px; }.historical-dossier p { font-size: 14px; line-height: 2; }.historical-dossier summary { color: #e8d19f; cursor: pointer; font-size: 14px; }
/* Celestial navigation chart: indigo glass, amber routes and violet light. */
#city-game-chooser .city-game-box { background: radial-gradient(ellipse at 10% 0,#47447b88,transparent 50%),radial-gradient(ellipse at 90% 100%,#2c657366,transparent 60%),#101b35; border-color: #9c91bc77; border-radius: 22px; box-shadow: 0 30px 100px #0009,inset 0 1px #d7c6ff44; }
#city-game-title { font-family: var(--display); font-size: 38px; font-weight: 500; color: #f0dfb3; letter-spacing: 3px; }.game-lab-label { color: #d2beed; }.game-choice-intro { color: #bcbcd7; }.city-game-grid { gap: 22px; }
.city-game-card { padding-top: 180px; min-height: 400px; background: radial-gradient(ellipse at 50% 0,#678b9e60,transparent 60%),linear-gradient(145deg,#29435a,#16273e); border-color: #88b2bd77; border-radius: 18px; box-shadow: inset 0 0 0 5px #07142644; }
.city-game-card:nth-child(2) { background: radial-gradient(ellipse at 50% 0,#a778bb66,transparent 60%),linear-gradient(145deg,#3c315b,#1d2946); border-color: #bd9dc277; }
.city-game-card::before { content: ''; position: absolute; width: 160px; height: 160px; top: 3px; right: 44px; border: 1px solid #dac89144; border-radius: 50%; box-shadow: 0 0 0 15px #c9b78208,0 0 0 30px #c9b78207; transform: rotateX(40deg); pointer-events: none; }.city-game-card img { top: 4px; height: 175px; width: 240px; }.city-game-card h3 { font-family: var(--display); font-size: 30px; font-weight: 500; color: #f0e4c5; }.city-game-card > b { color: #efd496; letter-spacing: 2px; }.game-number { color: #ddc69e; }.city-game-card:hover { border-color: #e3c789; box-shadow: 0 15px 35px #0005,0 0 35px #bca0dd25; }
#game-title,#activity-title,#activity-hub-title { font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: 2px; } .activity-choice b { letter-spacing: .6px; }.game-kicker,.activity-kicker { letter-spacing: 2px; }
@keyframes letter-arrive { from { opacity: 0; transform: translateY(45px) scale(1.25); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes title-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes orbit-turn { to { rotate: 360deg; } }
@media(prefers-reduced-motion:reduce) { .cinematic-intro *, .intro-orbits i { animation: none !important; } }
.gallery-reading,.gallery-reading h3,.gallery-reading p{font-family:'STKaiti','KaiTi','FangSong',serif}