/* Cob 闯关答题：响应式画面容器、百分比热区、焦点样式与结果页重试按钮 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #7a2020;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.noscript-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 10px 16px;
  background: #fff1e1;
  color: #7a2020;
  font-size: 14px;
  text-align: center;
}

.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}

.stage {
  width: 100%;
  max-width: 440px;
}

.stage-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 1334;
  background-color: #c23a3a;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

/*
 * 装饰动效层：气泡 / 箭头贴纸从 PSD 图层坐标精确导出，背景整图已在对应位置
 * 挖空，因此贴纸摇摆时不会露出重影。贴纸跨页面常驻不重建，切页时无需重启动画。
 */
.decoration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decoration {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.decoration--bubble-top {
  left: -10.8%;
  top: 2.2490%;
  width: 42.9333%;
  height: 24.8126%;
  animation: bubble-drift-a 6.5s ease-in-out infinite;
}

.decoration--bubble-bottom {
  left: 51.8667%;
  top: 78.6357%;
  width: 53.7333%;
  height: 16.7166%;
  animation: bubble-drift-b 7.5s ease-in-out infinite;
}

.decoration--arrow-left {
  left: 7.2%;
  top: 6.1469%;
  width: 4.6667%;
  height: 2.5487%;
  animation: arrow-nudge-left 1.7s ease-in-out infinite;
}

.decoration--arrow-right {
  left: 88%;
  top: 6.1469%;
  width: 4.6667%;
  height: 2.5487%;
  animation: arrow-nudge-right 1.7s ease-in-out infinite;
}

@keyframes bubble-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -7px) rotate(-2deg); }
}

@keyframes bubble-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-5px, 6px) rotate(2deg); }
}

@keyframes arrow-nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes arrow-nudge-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

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

.hotspot-layer {
  position: absolute;
  inset: 0;
}

/* 纯装饰、不可交互的静态图标（比如 START GAME 旁边客户画的像素光标），
   不参与点击/悬浮/焦点，不套用任何按钮动效样式 */
.static-decoration {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 弹性缓动：先冲过头再回弹，制造“浮起来”的动感，而不是线性挪动 */
:root {
  --bounce-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * 关键约束：外层 <button>（真正的点击/悬浮判定区域）任何状态下都不能有
 * transform、不能变大变小——否则悬浮放大会让判定边界跟着挪动，鼠标停在
 * 原边缘时“判定框长过来/缩回去”会反复触发 mouseenter/mouseleave，
 * 表现为按钮疯狂闪烁。所有“浮起来 + 放大 + 呼吸”的视觉效果都放在内层
 * 元素（.hotspot-button__art / .hotspot-button__pill）上，外层只负责
 * 稳定的点击区域和背景光晕（background/box-shadow 不改变几何尺寸，不影响判定）。
 */
.hotspot-button {
  position: absolute;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255, 214, 214, 0);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.hotspot-button:disabled {
  cursor: default;
}

/*
 * 用圆角 box-shadow 做焦点环，不用 outline——outline 不跟随 border-radius，
 * 在胶囊形按钮上会画成一个方框，把按钮和光标一起"关"在矩形里，很难看。
 * 另外首页/每次切页后会用 JS 把焦点自动移到第一个按钮（方便键盘/读屏用户），
 * 这个焦点环因此在纯鼠标用户身上也会常驻显示，所以做得足够柔和、不抢眼。
 */
.hotspot-button:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
 * 按钮贴纸（胶囊底 + 文字，从设计 PSD 单独抠出）作为按钮的子元素填满整颗按钮，
 * 背景整图对应位置已挖空。悬浮/按下的 transform 全部加在这张图自己身上，
 * 不影响父按钮（判定区域）的几何尺寸。
 */
.hotspot-button__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 260ms var(--bounce-ease);
}

/* 成功 / 失败页原图没有重试按钮，需要一个真正可见的按钮；外层同样只做静态判定区域 */
.hotspot-button--visible {
  display: block;
}

/* 内层胶囊承担全部视觉（底色/描边/文字/投影）与浮动动画，不影响外层判定几何 */
.hotspot-button__pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6ef 0%, #ffd9d3 100%);
  border: 3px solid #5a2317;
  color: #c23a3a;
  font-weight: 700;
  font-size: clamp(16px, 4.2vw, 22px);
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #5a2317;
  transition: transform 260ms var(--bounce-ease), box-shadow 200ms ease;
  pointer-events: none;
}

@keyframes hotspot-breathe {
  0%, 100% { transform: translateY(-8px) scale(1.1); }
  50% { transform: translateY(-12px) scale(1.16); }
}

@keyframes hotspot-breathe-visible {
  0%, 100% { transform: translateY(-8px) scale(1.06); }
  50% { transform: translateY(-12px) scale(1.11); }
}

/* 鼠标悬浮反馈只在真正支持悬浮的指针设备上生效，触屏点按后不会残留悬浮态 */
@media (hover: hover) and (pointer: fine) {
  /* 悬浮先弹起放大，再持续做小幅度呼吸循环，而不是定住不动的静态放大 */
  .hotspot-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 14px 22px rgba(90, 35, 23, 0.35),
      0 0 0 3px rgba(255, 255, 255, 0.55) inset,
      0 0 18px 4px rgba(255, 214, 214, 0.55);
  }

  .hotspot-button:hover:not(:disabled) .hotspot-button__art {
    animation: hotspot-breathe 1.6s ease-in-out infinite;
  }

  .hotspot-button--visible:hover:not(:disabled) .hotspot-button__pill {
    box-shadow: 0 12px 0 #5a2317, 0 20px 24px rgba(0, 0, 0, 0.28);
    animation: hotspot-breathe-visible 1.6s ease-in-out infinite;
  }
}

/*
 * :active 规则放在 :hover 之后，并显式关掉呼吸动画（animation: none），
 * 否则鼠标按住不放（同时命中 :hover 和 :active）时呼吸动画会持续接管
 * transform，按下反馈会被悬浮效果盖掉，看起来像没有按下去。
 */
.hotspot-button:active:not(:disabled) {
  background: rgba(90, 35, 23, 0.12);
  box-shadow: 0 2px 6px rgba(90, 35, 23, 0.3) inset;
  transition-duration: 90ms;
}

.hotspot-button:active:not(:disabled) .hotspot-button__art {
  animation: none;
  transform: translateY(-1px) scale(0.92);
  transition-duration: 90ms;
}

.hotspot-button--visible:active:not(:disabled) .hotspot-button__pill {
  animation: none;
  transform: translateY(3px) scale(0.95);
  box-shadow: 0 1px 0 #5a2317;
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .hotspot-button,
  .hotspot-button__art,
  .hotspot-button__pill {
    transition: none;
  }

  /* 透明按钮：悬浮/按下也不留任何视觉痕迹，还原成它本来“看不见”的样子；呼吸动画也一并关闭 */
  .hotspot-button:active:not(:disabled),
  .hotspot-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 214, 214, 0);
  }

  .hotspot-button:active:not(:disabled) .hotspot-button__art,
  .hotspot-button:hover:not(:disabled) .hotspot-button__art {
    animation: none;
    transform: none;
  }

  /* 实心重试按钮：只取消位移/缩放/呼吸，保留它本来的立体投影，不能被清空 */
  .hotspot-button--visible:active:not(:disabled) .hotspot-button__pill,
  .hotspot-button--visible:hover:not(:disabled) .hotspot-button__pill {
    animation: none;
    transform: none;
    box-shadow: 0 4px 0 #5a2317;
  }
}

.status-banner[hidden] {
  display: none;
}

.status-banner {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.status-banner p {
  margin: 0;
  color: #5a2317;
  font-size: 15px;
  line-height: 1.4;
}

/*
 * 同样的外层/内层拆分：外层 <button> 用普通文档流包住内层胶囊，自身永远
 * 不加 transform，判定区域尺寸只由内层（变形前）的排版尺寸决定，不会随
 * 悬浮放大而改变，避免鼠标停在边缘时反复触发 hover/unhover 造成的闪烁。
 */
.status-retry-button {
  display: inline-flex;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.status-retry-button__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #5a2317;
  border-radius: 999px;
  padding: 8px 28px;
  background: linear-gradient(180deg, #fff6ef 0%, #ffd9d3 100%);
  color: #c23a3a;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 0 #5a2317;
  transition: transform 260ms var(--bounce-ease), box-shadow 200ms ease;
  pointer-events: none;
}

@keyframes status-retry-breathe {
  0%, 100% { transform: translateY(-7px) scale(1.08); }
  50% { transform: translateY(-11px) scale(1.13); }
}

@media (hover: hover) and (pointer: fine) {
  .status-retry-button:hover .status-retry-button__label {
    box-shadow: 0 11px 0 #5a2317, 0 18px 20px rgba(0, 0, 0, 0.25);
    animation: status-retry-breathe 1.6s ease-in-out infinite;
  }
}

/* :active 放在 :hover 之后，并关掉呼吸动画，鼠标按住不放时按下反馈优先于悬浮效果 */
.status-retry-button:active .status-retry-button__label {
  animation: none;
  transform: translateY(3px) scale(0.95);
  box-shadow: 0 1px 0 #5a2317;
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .status-retry-button__label {
    transition: none;
  }

  .status-retry-button:active .status-retry-button__label,
  .status-retry-button:hover .status-retry-button__label {
    animation: none;
    transform: none;
    box-shadow: 0 3px 0 #5a2317;
  }
}

.status-retry-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 248, 230, 0.9);
  border-radius: 999px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}