:root {
  --background: #fffbef;
  --foreground: #3a2c00;
  --muted: #8f7a45;
  --yellow: #fece0e;
  --yellow-track: #fece0e36;
  --dialog-bg: #ffffff;
  --badge-size: min(64vw, 44svh, 340px);
  --countdown-time: 5000ms;
  --wheel-time: 160s;
  --wheel-angle: -18deg;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 16px 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
a { touch-action: manipulation; }
[hidden] { display: none !important; }
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; transition: opacity 450ms var(--motion-ease), transform 450ms var(--motion-ease); }
.badge { position: relative; width: var(--badge-size); aspect-ratio: 1; border: 0; background: #fff; padding: 0; border-radius: 50%; cursor: pointer; isolation: isolate; }
.badge:focus-visible { outline: 3px solid var(--foreground); outline-offset: 24px; }
.text-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mascot-window { position: absolute; inset: 20%; border-radius: 50%; overflow: hidden; background: #fff; z-index: 2; }
/* 融合徽章已包含上半身构图，完整展示金色圆环和人物配件。 */
.mascot { display: block; width: 100%; height: 100%; object-fit: contain; }
.countdown { position: absolute; width: 111%; height: 111%; inset: -5.5%; transform: rotate(-90deg); overflow: visible; }
.countdown circle { fill: none; stroke-width: 1.1; stroke-linecap: round; }
.countdown-track { stroke: var(--yellow-track); }
.countdown-bar { stroke: var(--yellow); stroke-dasharray: 100; stroke-dashoffset: 100; }
.intro-copy { display: flex; flex-direction: column; align-items: center; gap: 12px; }
h1 { font-size: clamp(24px, 6vw, 40px); font-weight: 800; letter-spacing: .1em; padding-left: .1em; }
.intro-status { font-size: clamp(12px, 3.6vw, 17px); line-height: 1.7; }
.intro-status strong { font-weight: 700; }
.loading-dots { white-space: nowrap; }
.loading-dots i { display: inline-block; width: .28em; height: .28em; margin-left: .2em; border-radius: 50%; background: currentColor; vertical-align: middle; }
.skip-link { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 4px 9px; border-radius: 4px; }
.skip-link span { margin-left: 5px; }
.skip-link:hover { color: var(--foreground); }
.skip-link:focus-visible, .utility-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body.intro-running .text-ring { animation: ring-spin 4s linear infinite; }
body.intro-running .countdown-bar { animation: countdown var(--countdown-time) linear forwards; }
body.intro-running .badge { animation: badge-arrive 650ms cubic-bezier(.34, 1.3, .64, 1) both; }
body.intro-running .intro-copy { animation: copy-arrive 450ms var(--motion-ease) 150ms both; }
body.intro-running .mascot-window { animation: mascot-breathe 1800ms cubic-bezier(.45, 0, .55, 1) 650ms infinite; }
body.intro-running .loading-dots i { animation: dot-hop 1s cubic-bezier(.45, 0, .55, 1) infinite; }
body.intro-running .loading-dots i:nth-child(2) { animation-delay: 150ms; }
body.intro-running .loading-dots i:nth-child(3) { animation-delay: 300ms; }
body.intro-paused .text-ring, body.intro-paused .countdown-bar, body.intro-paused .mascot-window, body.intro-paused .loading-dots i { animation-play-state: paused; }
body.choosing .intro { opacity: 0; transform: scale(1.06); pointer-events: none; visibility: hidden; }
.campus-stage { position: fixed; inset: 0; z-index: 2; overflow: hidden; background: #15241b; opacity: 0; visibility: hidden; transition: opacity 600ms var(--motion-ease) 150ms, visibility 0s 750ms; }
body.choosing .campus-stage { opacity: 1; visibility: visible; transition: opacity 600ms var(--motion-ease) 150ms, visibility 0s; }
.campus-wheel { position: absolute; inset: 0; transform: rotate(var(--wheel-angle)); }
.campus-sector { position: absolute; inset: 0; color: #fff; text-decoration: none; outline: none; transition: opacity 350ms var(--motion-ease); }
/* 半平面伸到屏幕之外：转盘旋转时仍能覆盖各种宽高比。 */
.sector-jinhua { clip-path: polygon(50% calc(50% - 150vmax), 50% calc(50% + 150vmax), calc(50% - 150vmax) calc(50% + 150vmax), calc(50% - 150vmax) calc(50% - 150vmax)); }
.sector-lintong { clip-path: polygon(50% calc(50% - 150vmax), calc(50% + 150vmax) calc(50% - 150vmax), calc(50% + 150vmax) calc(50% + 150vmax), 50% calc(50% + 150vmax)); }
.campus-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotate(calc(-1 * var(--wheel-angle))); scale: 1.04; filter: brightness(.76); transition: filter 350ms var(--motion-ease), scale 800ms var(--motion-ease); }
.sector-jinhua .campus-photo { object-position: center 45%; }
.sector-lintong .campus-photo { object-position: center; }
.campus-label { --distance: 28vmin; position: absolute; top: 50%; translate: -50% -50%; transform: rotate(calc(-1 * var(--wheel-angle))); text-align: center; padding: 12px 23px; border-radius: 14px; background: #141005a6; backdrop-filter: blur(4px); white-space: nowrap; transition: background-color 220ms var(--motion-ease), color 220ms var(--motion-ease), scale 220ms var(--motion-ease); }
.sector-jinhua .campus-label { left: calc(50% - var(--distance)); }
.sector-lintong .campus-label { left: calc(50% + var(--distance)); }
.campus-label small { display: block; opacity: .85; font-size: clamp(10px, 1vw, 14px); letter-spacing: .08em; margin-bottom: 4px; }
.campus-label b { display: block; font-size: clamp(22px, 3vw, 38px); letter-spacing: .1em; font-weight: 700; }
.campus-sector:hover .campus-photo, .campus-sector:focus-visible .campus-photo { filter: brightness(1); scale: 1.07; }
.campus-sector:hover .campus-label, .campus-sector:focus-visible .campus-label, .campus-sector.picked .campus-label { background: var(--yellow); color: #3a2c00; scale: 1.04; }
.campus-stage:has(.campus-sector:hover) .campus-sector:not(:hover) .campus-photo { filter: brightness(.5) saturate(.7); }
.divider-ray { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 4px; background: var(--yellow); box-shadow: 0 0 10px #0006; pointer-events: none; transform-origin: 0 50%; }
.ray-up { transform: rotate(-90deg); }
.ray-down { transform: rotate(90deg); }
.campus-hub { position: absolute; top: 50%; left: 50%; width: clamp(64px, 11vmin, 96px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 4px solid var(--yellow); border-radius: 50%; background: #fff; overflow: hidden; pointer-events: none; box-shadow: 0 6px 24px #0006; }
.campus-hub img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.choosing .campus-wheel { animation: wheel-spin var(--wheel-time) linear infinite; }
body.choosing .campus-photo, body.choosing .campus-label { animation: wheel-counterspin var(--wheel-time) linear infinite; }
body.choosing .campus-hub { animation: hub-arrive 500ms cubic-bezier(.34, 1.3, .64, 1) 200ms both; }
body.wheel-paused .campus-wheel, body.wheel-paused .campus-photo, body.wheel-paused .campus-label { animation-play-state: paused; }
body.leaving .campus-sector:not(.picked), body.leaving .divider-ray, body.leaving .campus-hub { opacity: 0; transition: opacity 350ms var(--motion-ease); }
body.leaving .campus-sector.picked .campus-photo { filter: brightness(1); scale: 1.1; }
body.leaving .campus-wheel, body.leaving .campus-photo, body.leaving .campus-label { animation-play-state: paused; }
.utility-controls { position: fixed; z-index: 3; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 4px; }
.utility-button { font-size: 13px; background: none; color: var(--muted); padding: 8px 10px; border: 0; border-radius: 30px; }
.utility-button:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
body.choosing .utility-button { padding: 7px 13px; background: #14100599; color: #fff; }
body.choosing .utility-button:hover { background: #141005d9; }
body.leaving .utility-controls { opacity: 0; pointer-events: none; }
.about-dialog { width: min(390px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--dialog-bg); color: var(--foreground); box-shadow: 0 18px 50px #0004; }
.about-dialog::backdrop { background: #14100573; backdrop-filter: blur(3px); }
.about-dialog[open] { animation: copy-arrive 230ms var(--motion-ease); }
.about-body { padding: 25px 23px 20px; }
.about-body h2 { font-size: 18px; margin-bottom: 14px; }
.about-body p { font-size: 14px; line-height: 1.8; }
.about-body p + p { margin-top: 9px; }
.about-body strong { font-size: 13px; overflow-wrap: anywhere; }
.source-links { display: flex; gap: 18px; }
.source-links a { font-size: 12px; color: var(--muted); text-underline-offset: 3px; }
.about-body form { text-align: right; margin-top: 20px; }
.about-body form button { border: 0; padding: 9px 20px; border-radius: 30px; background: var(--yellow); color: #3a2c00; font-size: 14px; font-weight: 700; }
html:not(.has-js) .intro, html:not(.has-js) .campus-stage { display: none; }
.no-script-links { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.no-script-links a { color: inherit; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes countdown { to { stroke-dashoffset: 0; } }
@keyframes badge-arrive { from { transform: scale(.85) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mascot-breathe { 50% { transform: scale(1.025); } }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dot-hop { 0%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-.25em); } }
@keyframes wheel-spin { to { transform: rotate(calc(var(--wheel-angle) + 360deg)); } }
@keyframes wheel-counterspin { to { transform: rotate(calc(-1 * var(--wheel-angle) - 360deg)); } }
@keyframes hub-arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.88); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 600px) {
  .intro { gap: 29px; }
  .intro-copy { gap: 11px; }
  .intro-status { font-size: 12px; }
  .campus-label { --distance: 27vmin; padding: 10px 14px; border-radius: 11px; }
  .campus-label small { font-size: 9px; letter-spacing: .03em; }
  .campus-label b { font-size: 24px; letter-spacing: .06em; }
  .utility-button, body.choosing .utility-button { font-size: 11px; padding: 7px 10px; }
}
@media (max-height: 420px) { .intro { gap: 20px; } .intro-copy { gap: 7px; } h1 { font-size: 24px; } .intro-status { font-size: 11px; } body { padding: 18px 12px 40px; } }
@media (prefers-color-scheme: dark) {
  :root { --background: #15120a; --foreground: #f6edd0; --muted: #a8996c; --dialog-bg: #221d12; --yellow-track: #fece0e29; color-scheme: dark; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .countdown-bar { stroke-dashoffset: 0; }
  .campus-photo, .campus-sector:hover .campus-photo, body.leaving .campus-sector.picked .campus-photo { scale: 1; }
  .campus-sector:hover .campus-label, .campus-sector:focus-visible .campus-label { scale: 1; }
}