/* ==========================================================================
   河北奶龙经贸大学经济管理学院 · 奶龙护送引导页
   流程：读条 → 六系转盘 + 中心「学院官网」→ 跳转真实官网
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root {
  --bg: #15120a;
  --ink: #141726;
  --yellow: #ffcb2e;
  --yellow-lt: #ffe27a;
  --cream: #fff7e6;
  --muted: #a8996c;

  --size: min(24vw, 20vh, 186px);
  --d: clamp(126px, 27vmin, 286px);
  --period: 170s;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  overflow: hidden;
  background: var(--bg);
  color: #f6edd0;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 没有 JS 时：跳过动画，只显示目的地列表 */
html:not(.js) .boot,
html:not(.js) .stage { display: none; }

/* ==========================================================================
   2. 阶段一：读条（奶龙护送服务启动日志）
   ========================================================================== */
.boot {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 203, 46, 0.13), transparent 58%),
    #0b0a06;
  transition: opacity 0.55s ease, visibility 0.55s;
}
.boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-inner { width: min(640px, 100%); }

.boot-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.boot-head img {
  width: 68px;
  height: 68px;
  flex: none;
  filter: drop-shadow(0 0 22px rgba(255, 203, 46, 0.4));
  animation: breathe 1.9s ease-in-out infinite;
}
.boot-head b {
  display: block;
  font-size: clamp(17px, 3.6vw, 21px);
  color: var(--yellow);
  letter-spacing: 0.04em;
  font-weight: 800;
}
.boot-head span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 3px;
}

.boot-log {
  font-family: var(--mono);
  font-size: clamp(11.5px, 2.7vw, 13px);
  line-height: 1.95;
  min-height: 8.8em;
  color: #cfe8cf;
}
.boot-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-log .ok { color: #6ee89a; }
.boot-log .warn { color: var(--yellow); }
.boot-log .err { color: #ff7b7b; }
.boot-log .dim { color: var(--muted); }

.boot-bar {
  margin-top: 20px;
  height: 18px;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 203, 46, 0.1);
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(115deg, var(--yellow) 0 10px, #e0a800 10px 20px);
  transition: width 0.2s linear;
  animation: stripes 0.9s linear infinite;
}
@keyframes stripes { to { background-position: -28px 0; } }

.boot-foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.boot-foot .pct { color: var(--yellow); font-weight: 700; }
.boot-foot .skip { margin-left: auto; }

@keyframes breathe { 50% { transform: scale(1.06); } }

/* ==========================================================================
   3. 阶段二：转盘舞台
   ========================================================================== */
.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.stage.on { opacity: 1; visibility: visible; }

/* --- 转盘本体：六个 60° 扇形缓慢旋转 --- */
.wheel { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }

/* 色轮画在 rotor 的 background 上：conic-gradient 天然无缝。
   rotor 必须比视口大一圈——否则它一旋转，自己的方形四角就会转出屏幕，
   在角落露出底色。220vmax 恒大于屏幕对角线（≈1.42×最长边），任何角度都盖得住。
   上面两层是压暗渐晕，让顶部/底部的白色 HUD 文字读得清。 */
.rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220vmax;
  height: 220vmax;
  translate: -50% -50%;
  background:
    linear-gradient(to bottom, rgba(11, 10, 6, 0.6), rgba(11, 10, 6, 0) 25%),
    linear-gradient(to top, rgba(11, 10, 6, 0.62), rgba(11, 10, 6, 0) 23%),
    radial-gradient(circle at 50% 50%, rgba(11, 10, 6, 0.4) 0 19%, rgba(11, 10, 6, 0) 56%),
    conic-gradient(from -30deg,
      #ffcb2e 0deg 60deg,
      /* 经济系 */ #7bd45f 60deg 120deg,
      /* 管理系 */ #6cc0ea 120deg 180deg,
      /* 信息系 */ #ff9dbb 180deg 240deg,
      /* 文法系 */ #9d8bff 240deg 300deg,
      /* 会计系 */ #ffb02e 300deg 360deg
      /* 商务系 */);
}
.stage.on .rotor { animation: spin var(--period) linear var(--spin-delay, 0s) infinite; }
.wheel:hover .rotor,
.wheel:focus-within .rotor { animation-play-state: paused; }

/* 扇形本身只当热区用；高亮/压暗靠半透明覆盖层 */
.sector { position: absolute; inset: 0; display: block; }
.wedge {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 10, 6, 0);
  transition: background-color 0.3s ease;
}
.sector:hover .wedge,
.sector:focus-visible .wedge { background-color: rgba(255, 255, 255, 0.24); }
.wheel:hover .sector:not(:hover):not(:focus-visible) .wedge { background-color: rgba(11, 10, 6, 0.36); }
body.leaving .sector.picked .wedge { background-color: rgba(255, 255, 255, 0.32); }

/* 每条边都伸到 150vmax 外，任何屏幕比例都铺得满 */
.sector.s0 { clip-path: polygon(50% 50%, calc(50% - 75vmax) calc(50% - 129.9vmax), calc(50% + 75vmax) calc(50% - 129.9vmax)); }
.sector.s1 { clip-path: polygon(50% 50%, calc(50% + 75vmax) calc(50% - 129.9vmax), calc(50% + 150vmax) 50%); }
.sector.s2 { clip-path: polygon(50% 50%, calc(50% + 150vmax) 50%, calc(50% + 75vmax) calc(50% + 129.9vmax)); }
.sector.s3 { clip-path: polygon(50% 50%, calc(50% + 75vmax) calc(50% + 129.9vmax), calc(50% - 75vmax) calc(50% + 129.9vmax)); }
.sector.s4 { clip-path: polygon(50% 50%, calc(50% - 75vmax) calc(50% + 129.9vmax), calc(50% - 150vmax) 50%); }
.sector.s5 { clip-path: polygon(50% 50%, calc(50% - 150vmax) 50%, calc(50% - 75vmax) calc(50% - 129.9vmax)); }

/* 分割射线 */
.ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 4px;
  margin-top: -2px;
  background: var(--yellow);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
  transform-origin: 0 50%;
  transform: rotate(var(--a));
  pointer-events: none;
  opacity: 0.92;
}
.stage.on .ray { animation: rayOut 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0.25s) backwards; }
@keyframes rayOut { from { transform: rotate(var(--a)) scaleX(0); } }

/* --- 扇形标签：随转盘公转，同时反向自转保持正立 --- */
.label {
  position: absolute;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 10px;
  border-radius: 16px;
  background: rgba(11, 10, 6, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 203, 46, 0.5);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, scale 0.25s, color 0.25s;
  pointer-events: none;
}
.stage.on .label { animation: unspin var(--period) linear var(--spin-delay, 0s) infinite; }
.wheel:hover .label,
.wheel:focus-within .label { animation-play-state: paused; }
.sector:hover .label,
.sector:focus-visible .label {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  scale: 1.05;
}

.label img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.label .txt small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  opacity: 0.68;
  font-family: var(--mono);
}
.label .txt b {
  display: block;
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.28;
}

.s0 .label { left: 50%; top: calc(50% - var(--d)); }
.s1 .label { left: calc(50% + var(--d) * 0.866); top: calc(50% - var(--d) * 0.5); }
.s2 .label { left: calc(50% + var(--d) * 0.866); top: calc(50% + var(--d) * 0.5); }
.s3 .label { left: 50%; top: calc(50% + var(--d)); }
.s4 .label { left: calc(50% - var(--d) * 0.866); top: calc(50% + var(--d) * 0.5); }
.s5 .label { left: calc(50% - var(--d) * 0.866); top: calc(50% - var(--d) * 0.5); }

/* --- 中心：学院官网（主要目的地） --- */
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 3;
}
.hub::before {
  content: "";
  position: absolute;
  inset: -11%;
  border-radius: 50%;
  background: rgba(11, 10, 6, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 3px solid var(--yellow);
  box-shadow: 0 0 0 6px rgba(255, 203, 46, 0.16), 0 14px 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s;
}
.hub:hover::before,
.hub:focus-visible::before { box-shadow: 0 0 0 12px rgba(255, 203, 46, 0.3), 0 14px 46px rgba(0, 0, 0, 0.55); }
.hub.hot::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  50% { box-shadow: 0 0 0 18px rgba(255, 203, 46, 0), 0 14px 40px rgba(0, 0, 0, 0.5); }
}

.hub-core {
  position: relative;
  width: 72%;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-5px); } }

/* 环形倒计时：读满即自动前往官网 */
.hub-ring {
  position: absolute;
  inset: -11%;
  width: 122%;
  height: 122%;
  z-index: 4;
  transform: rotate(-90deg);
  pointer-events: none;
}
.hub-ring circle { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.hub-ring .track { stroke: rgba(255, 203, 46, 0.16); }
/* 半径 49 的圆周长 ≈ 307.876：dasharray 拉满，靠 dashoffset 从 0 涨到 C 来“排空” */
.hub-ring .bar { stroke: var(--yellow); stroke-dasharray: 307.8763; stroke-dashoffset: 0; }
.hub.counting .hub-ring .bar {
  animation: drain var(--count, 7000ms) linear forwards;
}
@keyframes drain { to { stroke-dashoffset: 307.8763; } }

/* 旋转文字环（放在倒计时环外面） */
.hub-text { position: absolute; inset: -38%; width: 176%; height: 176%; z-index: 1; pointer-events: none; }
.hub-text text {
  fill: rgba(255, 203, 46, 0.75);
  font-family: var(--font);
  font-size: 8.6px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stage.on .hub-text { animation: spin 24s linear infinite; }

.hub-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  translate: -50% 0;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  z-index: 5;
}
.hub-tag em { font-style: normal; font-size: 10.5px; opacity: 0.68; font-family: var(--mono); }

/* --- 顶部 / 底部 HUD --- */
.hud {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.hud-top { top: 0; }
.hud-bottom { bottom: 0; gap: 12px; }

.hud h1 { font-size: clamp(19px, 4.4vw, 34px); font-weight: 800; letter-spacing: 0.1em; color: #fff; }
.hud .sub { font-size: clamp(12.5px, 2.9vw, 15px); color: #f0e6c8; line-height: 1.7; }
.hud .sub b { color: var(--yellow); }

.hud .count {
  font-size: clamp(12.5px, 2.9vw, 14.5px);
  color: #f0e6c8;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}
.hud .count b { font-family: var(--mono); font-size: 1.4em; color: var(--yellow); }

.ghost-btn {
  pointer-events: auto;
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  background: rgba(11, 10, 6, 0.55);
  color: #f6edd0;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: 0.2s;
}
.ghost-btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

.extra { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.extra a {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  background: rgba(11, 10, 6, 0.5);
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: 0.2s;
}
.extra a:hover { background: rgba(255, 203, 46, 0.92); color: var(--ink); border-color: var(--yellow); }

/* 右下角工具 */
.tools {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  z-index: 7;
}

/* --- 离场 --- */
body.leaving .sector:not(.picked),
body.leaving .ray,
body.leaving .hud { opacity: 0; transition: opacity 0.34s; }
body.leaving .hub { scale: 1.1; transition: scale 0.42s cubic-bezier(0.34, 1.4, 0.64, 1); }

/* --- 提示条 --- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 92px;
  translate: -50% 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  font-size: 13.5px;
  font-weight: 800;
  animation: rise 0.3s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.toast.out { animation: sink 0.3s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes sink { to { opacity: 0; transform: translateY(10px) scale(0.96); } }

/* --- 关于弹窗 --- */
.about {
  /* 注意：全局 * { margin: 0 } 会干掉 <dialog> 默认的 margin:auto 居中，这里补回来 */
  margin: auto;
  width: min(566px, calc(100vw - 32px));
  max-height: 84vh;
  overflow-y: auto;
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
}
.about::backdrop { background: rgba(11, 10, 6, 0.64); backdrop-filter: blur(4px); }
.about[open] { animation: rise 0.26s ease-out; }
.about-body { padding: 26px 24px 20px; }
.about h2 { font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.about h2::before {
  content: "";
  width: 12px;
  height: 24px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 4px;
  transform: rotate(-8deg);
  flex: none;
}
.about p { font-size: 13.8px; line-height: 1.9; color: #3b3f55; }
.about p + p { margin-top: 9px; }
.about b { color: var(--ink); }
.about code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--yellow-lt);
  font-family: var(--mono);
  font-size: 12px;
}
.about ul { margin: 10px 0 0 18px; font-size: 13.5px; line-height: 1.9; color: #3b3f55; }
.about .warnline {
  margin-top: 14px;
  padding: 11px 14px;
  border: 2px dashed #c9a227;
  border-radius: 12px;
  background: #fff5cf;
  font-size: 13px;
  line-height: 1.8;
  color: #6b5312;
}
.about-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.about-actions button,
.about-actions a {
  padding: 10px 20px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: #fffdf7;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: 0.15s;
}
.about-actions button:hover,
.about-actions a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.about-actions .primary { background: var(--yellow); }

/* --- 无 JS 降级列表 --- */
.noscript-list {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  padding: 40px 20px;
  background: var(--bg);
  display: none;
}
html:not(.js) .noscript-list { display: block; }
.noscript-list h2 { color: var(--yellow); font-size: 20px; margin-bottom: 6px; }
.noscript-list p.note { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.noscript-list a {
  display: block;
  padding: 14px 18px;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 203, 46, 0.45);
  border-radius: 14px;
  font-weight: 700;
}
.noscript-list a small { display: block; font-family: var(--mono); font-size: 11px; opacity: 0.6; margin-top: 3px; font-weight: 400; }
.noscript-list a.main-link { border-color: var(--yellow); background: rgba(255, 203, 46, 0.12); }

/* ==========================================================================
   4. 关键帧
   ========================================================================== */
@keyframes spin { to { rotate: 360deg; } }
@keyframes unspin { to { rotate: -360deg; } }

/* ==========================================================================
   5. 响应式
   ========================================================================== */
@media (max-width: 780px) {
  :root { --size: min(30vw, 13vh, 112px); --d: clamp(118px, 32vmin, 196px); }
  .label { padding: 6px 11px 6px 7px; border-radius: 12px; gap: 7px; }
  .label img { width: 26px; height: 26px; }
  .label .txt b { font-size: 14px; }
  .label .txt small { display: none; }        /* 窄屏不显示域名，免得标签顶到屏幕边 */
  .hub-text { display: none; }                 /* 小屏幕上文字环没有落脚处 */
  .hud { padding: 16px 14px; gap: 7px; }
  .hud-top { padding-top: 20px; }
  .hud-bottom { padding-bottom: 56px; }
  .hub-tag { top: calc(100% + 12px); font-size: 11.5px; padding: 5px 12px; }
  .hub-tag em { display: none; }
  .extra a { font-size: 11px; padding: 4px 10px; }
  .toast-host { bottom: 108px; }
}

@media (max-width: 480px) {
  .label .txt b { font-size: 13.5px; }
  .label img { width: 24px; height: 24px; }
  .hud .sub { font-size: 12px; }
}

@media (max-height: 640px) {
  .boot-log { min-height: 0; }
  .boot-log div:nth-child(n + 6) { display: none; }
  :root { --size: min(22vw, 14vh, 108px); --d: max(124px, 26vmin); }
  .hud { padding: 12px; }
  .hud-bottom { padding-bottom: 46px; }
}

/* ==========================================================================
   6. 减少动态效果 / 静态模式
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .boot-head img,
  .hub-core,
  .hub.hot::before,
  .boot-bar i { animation: none; }
  .hub.counting .hub-ring .bar { animation: none; stroke-dashoffset: 307.8763; }
  .stage.on .rotor,
  .stage.on .label,
  .stage.on .hub-text { animation-play-state: paused; }
  .stage.on .ray { animation: none; transform: rotate(var(--a)); }
  * { transition-duration: 0.01ms !important; }
}

[data-plain="1"] .boot { display: none; }
[data-plain="1"] .stage { opacity: 1; visibility: visible; transition: none; }
[data-plain="1"] .stage.on .rotor,
[data-plain="1"] .stage.on .label,
[data-plain="1"] .stage.on .hub-text { animation: none; }
[data-plain="1"] .stage.on .ray { animation: none; transform: rotate(var(--a)); }
[data-plain="1"] .hub.hot::before,
[data-plain="1"] .hub-core,
[data-plain="1"] .boot-head img,
[data-plain="1"] .boot-bar i { animation: none; }