/* =========================================================
   HNYZ · 页脚小恐龙
   ---------------------------------------------------------
   一排 8-bit 小恐龙在页脚跑动，自己看仙人掌的距离起跳。
   画布只画角色和障碍，天空/网格交给 CSS，换皮肤不用重绘。
   ========================================================= */

.dino-run {
  --dino-ink: #e8f1ff;
  --dino-accent: #7dd3fc;
  --dino-dim: #3a5a80;
  --dino-ground: rgba(125, 211, 252, 0.42);
  --dino-gold: #fbbf24;
  --dino-gold-lit: #ffe9a8;
  /* 夜间右上角那弯月亮的颜色 */
  --dino-moon: #eaf3ff;
  position: relative;
  /* 高于右下角校徽（z=35），跑道不会被徽章压住 */
  z-index: 36;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(125, 211, 252, 0.18);
  color: var(--dino-ink);
  background-color: #081426;
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 110%, rgba(37, 99, 235, 0.22), transparent 70%),
    linear-gradient(rgba(125, 211, 252, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.dino-run__inner {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.dino-run__main {
  flex: 1;
  min-width: 0;
}

.dino-run__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--dino-dim);
  text-transform: uppercase;
}

.dino-run__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: inherit;
  color: var(--dino-ink);
}

.dino-run__led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dino-accent);
  box-shadow: 0 0 10px var(--dino-accent);
  animation: dinoLed 1.8s ease-in-out infinite;
}

.dino-run__ver {
  color: var(--dino-dim);
  letter-spacing: 0.08em;
}

.dino-run__score {
  margin: 0;
  white-space: pre;
  color: var(--dino-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.dino-run__hud {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dino-run__stage {
  position: relative;
  height: 186px; /* fallback: 旧内核 */
  height: clamp(186px, 13.5vw, 196px);
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(125, 211, 252, 0.04), transparent 46%),
    rgba(3, 9, 18, 0.38);
  /* 点一下画布，恐龙会蹦一下 */
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dino-run__stage:focus-visible {
  outline: 2px solid var(--dino-accent);
  outline-offset: 2px;
}

.dino-run__canvas {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.dino-run__hint {
  position: absolute;
  left: 12px;
  bottom: 22px;
  margin: 0;
  color: var(--dino-dim);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.dino-run[data-mode="auto"] .dino-run__hint {
  opacity: 0.48;
}

/* 吃到金币 / 升档时从右上角飘起来的一行字 */
.dino-run__pop {
  position: absolute;
  right: 14px;
  top: 44px;
  margin: 0;
  color: var(--orange, #fbbf24);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.dino-run__pop[data-tone="combo"] {
  color: var(--dino-accent);
}

.dino-run__pop[data-tone="level"] {
  color: var(--dino-ink);
}

.dino-run__pop.is-on {
  animation: dinoPopRise 0.9s cubic-bezier(0.22, 0.68, 0.32, 1) both;
}

@keyframes dinoPopRise {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.86);
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1);
  }
}

.dino-run__toast {
  position: absolute;
  pointer-events: none;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 16px;
  margin: 0;
  background: rgba(3, 9, 18, 0.52);
  color: var(--dino-accent);
  font-family: var(--mono);
  font-size: 12.5px; /* fallback: 旧内核 */
  font-size: clamp(0.62rem, 1.4vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: dinoToast 0.25s ease both;
}

.dino-run__toast[hidden] {
  display: none;
}

@keyframes dinoToast {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dinoLed {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 日间模式：跑道不再是一块黑，跟着页面一起亮起来 */
html[data-theme="light"]:not([data-style="hacker"]):not([data-style="minimal"]) .dino-run:not(.dino-run--arena) {
  --dino-ink: #10233c;
  --dino-accent: #0a84ff;
  --dino-dim: #6b86a6;
  --dino-ground: rgba(24, 82, 150, 0.34);
  --dino-gold: #c2820b;
  --dino-gold-lit: #f0b429;
  --dino-moon: #7d9bc4;
  border-top-color: rgba(24, 82, 150, 0.14);
  background-color: #eef4fd;
  background-image:
    radial-gradient(ellipse 70% 120% at 50% 110%, rgba(37, 99, 235, 0.12), transparent 70%),
    linear-gradient(rgba(24, 82, 150, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 82, 150, 0.05) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

html[data-theme="light"]:not([data-style="hacker"]):not([data-style="minimal"]) .dino-run:not(.dino-run--arena) .dino-run__stage {
  border-color: rgba(24, 82, 150, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent 46%),
    rgba(255, 255, 255, 0.52);
}

/* 极简风：纯白，去掉渐变与网格 */
html[data-style="minimal"] .dino-run {
  --dino-gold: #171715;
  --dino-gold-lit: #6f6f66;
  --dino-moon: #f4f4ef;
  padding: 14px 0 18px;
  background-color: var(--bg, #fff);
  background-image: none;
  border-top-color: #e8e8e2;
}

html[data-style="minimal"] .dino-run__stage {
  background: transparent;
  border-color: #deded8;
}

html[data-style="minimal"] .dino-run__led {
  animation: none;
  box-shadow: none;
}

/* 黑客风：绿色终端 */
html[data-style="hacker"] .dino-run {
  /* 金币保持琥珀色：跟满屏的绿区分开，不然和仙人掌糊在一起 */
  --dino-gold: #ffd166;
  --dino-gold-lit: #fff3c4;
  --dino-moon: #c9ffdf;
  --dino-ink: #d9ffe5;
  --dino-accent: #39ff88;
  --dino-dim: #3f7a56;
  --dino-ground: rgba(57, 255, 136, 0.4);
}

html[data-style="hacker"] .dino-run__stage {
  border-color: rgba(57, 255, 136, 0.22);
  background:
    repeating-linear-gradient(180deg, rgba(57, 255, 136, 0.04) 0 1px, transparent 1px 3px),
    rgba(1, 5, 3, 0.5);
}

html[data-style="hacker"][data-theme="light"] .dino-run__stage {
  background:
    repeating-linear-gradient(180deg, rgba(10, 143, 74, 0.05) 0 1px, transparent 1px 3px),
    rgba(255, 255, 255, 0.4);
}

/* ---------- 小屏 ---------- */
@media (max-width: 900px) {
  .dino-run {
    padding: 12px 0 16px;
  }

  .dino-run__inner {
    gap: 10px;
  }

  .dino-run__stage {
    height: 186px;
  }

  .dino-run__bar {
    font-size: 0.5rem;
    margin-bottom: 6px;
  }
}

@media (max-width: 520px) {
  .dino-run__hint {
    left: 8px;
    bottom: 16px;
    font-size: 0.46rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dino-run__led {
    animation: none;
  }
}

/* =========================================================
   跑道出现时，右下角校徽整组让位
   ---------------------------------------------------------
   .hnyz-pet__board 是单独定位的元素，父级 opacity:0 管不到它，
   之前只有 .hnyz-pet 淡出，板子还压在跑道右侧。
   ========================================================= */
body.is-dino-visible .hnyz-pet,
body.is-dino-visible .hnyz-pet__board,
body.is-dino-visible .hnyz-pet__speech,
body.is-dino-visible .pet-summon {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* =========================================================
   TIME ×N · 时间加速按钮
   ---------------------------------------------------------
   与 LV 徽章同族：等宽字、细边框、大写、1/2/4 循环。
   加速时呼吸发光；灭绝演出期间置灰锁死。
   ========================================================= */

.dino-run__time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--dino-dim);
  border-radius: 3px;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--dino-dim);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.dino-run__time:hover {
  color: var(--dino-accent);
  border-color: var(--dino-accent);
}

.dino-run__time.is-hot {
  color: var(--dino-accent);
  border-color: var(--dino-accent);
  animation: dinoTimeGlow 1.3s ease-in-out infinite;
}

.dino-run__time.is-locked {
  opacity: 0.35;
  pointer-events: none;
  animation: none;
  box-shadow: none;
}

@keyframes dinoTimeGlow {
  0%, 100% { box-shadow: 0 0 3px var(--dino-accent); }
  50% { box-shadow: 0 0 12px var(--dino-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .dino-run__time.is-hot {
    animation: none;
    box-shadow: 0 0 6px var(--dino-accent);
  }
}

@media (max-width: 520px) {
  .dino-run__hud {
    gap: 6px;
  }

  .dino-run__time {
    padding: 0 6px;
    letter-spacing: 0.06em;
  }
}

/* =========================================================
   灭绝结局 · 中文压屏 + 左侧滑出的「时间回溯」
   ---------------------------------------------------------
   陨石砸完恐龙就没了，画面中间留一句中文，占跑道 2/3；
   左边贴边滑出一颗按钮。不点它，这一帧就一直是结局。
   ========================================================= */

.dino-run__extinct {
  position: absolute;
  top: 0; /* fallback: 旧内核 */
  right: 0; /* fallback: 旧内核 */
  bottom: 0; /* fallback: 旧内核 */
  left: 0; /* fallback: 旧内核 */
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}

/* hidden 必须硬过上面的 display:grid */
.dino-run__extinct[hidden] {
  display: none;
}

.dino-run__extinct.is-on {
  opacity: 1;
}

.dino-run__extinct-text {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 9px;
  width: 66.6%;
  height: 66.6%;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 138, 84, 0.26);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255, 96, 40, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(13, 8, 7, 0.62), rgba(7, 4, 4, 0.78));
  box-shadow:
    inset 0 0 46px rgba(255, 96, 40, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  color: #ffd9c0;
  font-family: inherit;
  font-size: 26.6px; /* fallback: 旧内核 */
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-align: center;
  text-shadow: 0 1px 14px rgba(255, 92, 40, 0.32);
  transform: translate(-50%, 8px) scale(0.975);
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.dino-run__extinct.is-on .dino-run__extinct-text {
  transform: translate(-50%, 0) scale(1);
}

/* 左边那颗按钮：从画面外滑进来，像挂在结局旁边的一枚书签 */
.dino-run__rewind {
  position: absolute;
  left: 10px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 9px;
  border: 1px solid rgba(255, 138, 84, 0.55);
  border-radius: 4px;
  background: rgba(11, 6, 5, 0.88);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #ffc59b;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-155%, -50%);
  box-shadow: 0 0 16px rgba(255, 110, 50, 0.22);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25),
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.dino-run__extinct.is-on .dino-run__rewind {
  transform: translate(0, -50%);
  /* 文字先落定，按钮再弹出来 */
  transition-delay: 0.32s, 0s, 0s, 0s;
}

.dino-run__rewind:hover,
.dino-run__rewind:focus-visible {
  color: #fff0e2;
  border-color: #ff9a5c;
  box-shadow: 0 0 22px rgba(255, 110, 50, 0.45);
  outline: none;
}

.dino-run__rewind:active {
  transform: translate(0, -50%) scale(0.96);
}

.dino-run.is-extinct .dino-run__hint {
  opacity: 0 !important;
}

@media (max-width: 520px) {
  .dino-run__extinct-text {
    top: 6px;
  }

  .dino-run__rewind {
    left: 5px;
    padding: 8px 6px;
    font-size: 0.52rem;
    letter-spacing: 0;
  }

  .dino-run__extinct-text {
    padding: 0 8px;
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dino-run__extinct,
  .dino-run__extinct-text,
  .dino-run__rewind {
    transition: none;
  }

  .dino-run__extinct-text {
    transform: translate(-50%, 0);
  }

  .dino-run__extinct.is-on .dino-run__rewind {
    transform: translate(0, -50%);
  }
}

/* ---------------------------------------------------------
   天梯入口：HUD 最右边那个小按钮
   ---------------------------------------------------------
   页脚那条跑道是自动巡航，想自己跑得去 dino.html。
   这里放一个明确出口，不然访客只会以为是个装饰动画。
   --------------------------------------------------------- */
.dino-run__ladder {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(125, 211, 252, 0.42);
  border-radius: 999px;
  color: var(--dino-accent);
  background: rgba(125, 211, 252, 0.08);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dino-run__ladder span {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dino-run__ladder:hover,
.dino-run__ladder:focus-visible {
  border-color: var(--dino-accent);
  background: rgba(125, 211, 252, 0.18);
  color: #ffffff;
}

.dino-run__ladder:hover span {
  transform: translateX(3px);
}

.dino-run__ladder:focus-visible {
  outline: 2px solid var(--dino-accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  /* 小屏 HUD 挤，只留「天梯」两个字 */
  .dino-run__ladder span {
    display: none;
  }
}