/* ============================================================
   波普风（Pop Art）主题
   视觉语言：粗黑描边 + 高饱和原色（红/黄/蓝/粉）+ 奶白基底
   签名元素：本戴点（Ben-Day 半调网点）、硬阴影（无模糊错位）、
             漫画感粗体字、POP 拟声点缀
   ============================================================ */

:root {
  /* ---- 波普原色 ---- */
  --ink: #141414;        /* 墨黑：描边与主文字 */
  --paper: #fff6e9;      /* 奶白基底 */
  --white: #ffffff;
  --red: #ff2d4d;        /* 波普红（主色） */
  --yellow: #ffd600;     /* 明黄 */
  --blue: #2b5cff;       /* 宝蓝 */
  --pink: #ff4fa3;       /* 亮粉 */
  --green: #00c853;      /* 波普绿 */

  /* ---- 语义映射（业务代码只引用语义变量） ---- */
  --color-primary: var(--red);
  --color-accent: var(--yellow);
  --color-secondary: var(--blue);
  --color-highlight: var(--pink);
  --color-success: var(--green);
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-border: var(--ink);

  /* ---- 波普签名元素参数 ---- */
  --border-w: 3px;               /* 粗描边宽 */
  --shadow-hard: 6px 6px 0 var(--ink);   /* 硬阴影：无模糊错位 */
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --radius: 14px;                /* 轻微圆角，保留漫画感 */
  --radius-full: 999px;

  /* ---- 字体 ----
     中文标题统一走中文字体栈，避免 Arial Black/Impact 无中文字形导致的回退发虚；
     font-stamp 仅用于英文拟声词（POP/BAM 等）。 */
  --font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
  --font-stamp: "Arial Black", "Impact", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;

  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: radial-gradient(rgba(20, 20, 20, 0.06) 1.2px, transparent 1.2px);
  background-size: 18px 18px;   /* 轻量本戴点基底 */
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---- 通用波普组件类 ---- */
/* 漫画感标题 */
.pop-display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* 卡片：粗描边 + 硬阴影 */
.pop-card {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
}

/* 按钮：漫画对话框式 */
.pop-btn {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 10px 22px;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hard-sm);
  background: var(--color-accent);
  color: var(--color-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.pop-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-border);
}

.pop-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-border);
}

.pop-btn--primary {
  background: var(--color-primary);
  color: var(--white);
}

.pop-btn--secondary {
  background: var(--color-secondary);
  color: var(--white);
}

.pop-btn--ghost {
  background: var(--color-surface);
}

/* 本戴点纹理（半调网点），用于装饰块 */
.halftone {
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 22%, transparent 23%),
    radial-gradient(rgba(255, 255, 255, 0.9) 22%, transparent 23%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* POP 拟声词徽标（英文短词，用拉丁展示字体 + 硬阴影即可，不加描边） */
.pop-stamp {
  font-family: var(--font-stamp);
  font-weight: 900;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-6deg);
}

/* 斜条纹 */
.stripes {
  background-image: repeating-linear-gradient(
    45deg,
    var(--ink) 0 10px,
    transparent 10px 22px
  );
}

/* 进度条 */
.pop-progress-track {
  height: 18px;
  background: var(--white);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pop-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-right: 2px solid var(--ink);
  transition: width 0.25s ease;
}

/* ============================================================
   移动端优先适配
   ============================================================ */

/* 去掉移动端点按的高亮闪烁 */
button,
a,
.quiz-card {
  -webkit-tap-highlight-color: transparent;
}

/* 窄屏统一收紧间距与描边，保持波普粗描边的观感 */
@media (max-width: 720px) {
  :root {
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 22px;
    --space-xl: 30px;
    --border-w: 2.5px;
    --shadow-hard: 4px 4px 0 var(--ink);
    --shadow-hard-sm: 2.5px 2.5px 0 var(--ink);
  }
}

/* ============================================================
   移动端手势互动
   ============================================================ */

/* 去掉 300ms 点按延迟与高亮，让按压反馈即时生效 */
button,
a,
.quiz-card,
.option {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 按压状态（无自身 :active 的元素由手势模块加此 class） */
.pressing {
  transform: translate(2px, 2px) scale(0.99);
  box-shadow: 2px 2px 0 var(--color-border);
}

/* 波普漫画式按压星爆：在触点迸发一圈卡通爆炸 */
.burst {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0 22%, transparent 23%);
  transform: scale(0.15);
  opacity: 0.95;
  animation: burst-pop 0.4s ease-out forwards;
}

.burst::before,
.burst::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  animation: burst-ring 0.4s ease-out forwards;
}

.burst::after {
  inset: -20px;
  border-color: var(--color-primary);
}

@keyframes burst-pop {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes burst-ring {
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}