/* ============================================================
   quiz. 皮肤  —  日本综艺节目字幕图形包
   ------------------------------------------------------------
   上一版是「深色底 + 单一荧光色」，那是当下 AI 生成设计最典型
   的套路之一，被一眼看出来了。这一版换成印刷式：
   高饱和多色、粗黑描边、网点底纹、斜切色带、硬投影（无模糊）。

   只在这里重新赋值 tokens.css 里已有的变量，不新增变量名。
   首屏零 web font：31% 的人在页面打开前就走了，首屏不配请求字体。
   所有效果走 CSS 渐变和 transform，不增加首屏重量。
   ============================================================ */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper: #ece7db;        /* 印刷纸底，网点压在它上面 */
  --raise: #ffffff;
  --sink:  #ded7c6;

  --ink:   #14120c;
  --muted: #55503f;
  --faint: #8b8471;

  --accent:      #e5104c;  /* 节目红 */
  --accent-ink:  #ffffff;
  --accent-soft: #ffd400;  /* 节目黄：不是红的淡底，是第二主色 */

  --pos: #0f8a4a; --neg: #e5104c; --warn: #f07d00;
  --rule: #14120c;         /* 线就是黑的，印刷描边 */

  --radius-s: 0; --radius-m: 0; --radius-l: 0;   /* 印刷没有圆角 */
  --dur: 200ms;
}

/* 网点底纹 + 一条斜色带。两层 CSS 渐变，零额外请求。 */
body {
  background:
    repeating-linear-gradient(-24deg,
      rgba(229,16,76,.09) 0 22px, transparent 22px 116px),
    radial-gradient(rgba(20,18,12,.16) 1.1px, transparent 1.2px) 0 0 / 9px 9px,
    var(--paper);
  animation: drift 34s linear infinite;
}
@keyframes drift { to { background-position: 340px 0, 108px 108px, 0 0; } }

/* 标题：字号压下来，靠描边和硬投影撑存在感 */
.hero-title {
  font-size: var(--step-3);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-transform: none;
  /* 原本是黄 4px + 黑 7px 两层。字身本来就是近黑的 --ink，再叠一层同色投影，
     两者糊成一坨，夹在中间的黄色反倒像把字划花了 —— 390px 手机上「Ten
     questions.」整行读不出来（真机视口截图实测，不是缩放假象）。
     只留黄色一层：近黑的字压在黄影上就是标准的错版印刷，离得开也读得清。
     偏移换成 em，字号一变投影跟着变，手机上不会显得过重。 */
  text-shadow: .07em .07em 0 var(--accent-soft);
}
.hero-title em {
  font-style: normal;
  /* 原本是行内块，和上一行挤在一起：line-height 1.02 比字体自己的下伸部还紧，
     再加上 rotate(-1.6deg) 把这块 330px 宽的色块右端抬高约 4.6px，色块的右上角
     正好切掉「Ten questions.」里 q 的尾巴 —— 390px 的屏上很明显（实测 Windows
     Segoe UI）。所以改成块级独占一行，再留出够躲开下伸部和那 4.6px 的上边距。
     fit-content 保住宽度贴着字走，色块和旋转的观感不变。 */
  display: block;
  width: fit-content;
  margin-top: .6em;
  padding: 0 .18em;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.6deg);
  text-shadow: none;
}

/* 台标条：斜切色带，横向滚动 */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  align-self: start;
  font-size: var(--step--1); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: var(--accent-soft);
  padding: var(--sp-2) var(--sp-5);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-1.2deg);
}

/* 抢答器按钮：印刷式硬投影，按下去真的会「陷」进去 */
.buzzer {
  position: relative; overflow: hidden;
  align-self: start;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--step-1); font-weight: 900; letter-spacing: .01em;
  color: var(--accent-ink); background: var(--accent);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* 待机时的一道扫光。放在 ::after 上，不放按钮本身 ——
   按钮的 transform 要留给 hover / active，被 infinite 动画占了就没反馈了。 */
.buzzer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: sweep 3.2s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-130%) } 45%, 100% { transform: translateX(130%) } }
.buzzer:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.buzzer:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  body, .buzzer::after, .ticker-run { animation: none; }
  .screen[data-active] > *, .screen[data-active] > .ticker { animation: none; }
}

/* ---- 入场序列 ------------------------------------------------
   每屏激活时，子元素依次落位。只动 transform / opacity，
   合成层内完成，不触发重排 —— 首屏落地率不会因为这个掉。
   注意：首屏在 HTML 里就是 data-active，所以打开页面立刻就跑。
   fill 用 backwards 不用 both：动画跑完必须把 transform 还给 CSS，
   否则 .opt / .buzzer 的 hover 和按下反馈会被终态 `transform: none` 顶掉。 */
.screen[data-active] > :not(.ticker) { animation: drop .5s var(--ease) backwards; }
.screen[data-active] > :nth-child(1) { animation-delay: .02s }
.screen[data-active] > :nth-child(2) { animation-delay: .09s }
.screen[data-active] > :nth-child(3) { animation-delay: .16s }
.screen[data-active] > :nth-child(4) { animation-delay: .23s }
.screen[data-active] > :nth-child(5) { animation-delay: .30s }
.screen[data-active] > :nth-child(6) { animation-delay: .37s }
.screen[data-active] > :nth-child(7) { animation-delay: .44s }
.screen[data-active] > :nth-child(8) { animation-delay: .51s }
.screen[data-active] > :nth-child(9) { animation-delay: .58s }
.screen[data-active] > :nth-child(n+10) { animation-delay: .65s }
@keyframes drop {
  from { opacity: 0; transform: translateY(18px) rotate(.6deg); }
  to   { opacity: 1; transform: none; }
}
/* 跑马灯自带旋转，drop 的 transform 会把它抹平，所以单独给一条落位动画 */
.screen[data-active] > .ticker { animation: swing .6s var(--ease) backwards .44s; }
@keyframes swing {
  from { opacity: 0; transform: rotate(-9deg) scale(1.04); }
  to   { opacity: 1; transform: rotate(-1.8deg) scale(1.04); }
}

/* 计分板：印刷格子，等宽数字 */
.board { display: flex; gap: 0; align-items: stretch; }
.board b {
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: var(--step-2);
  min-width: 2.4ch; padding: var(--sp-2) var(--sp-3);
  text-align: center; background: var(--raise);
  border: 3px solid var(--ink); border-right-width: 0;
  box-shadow: inset 0 -7px 0 rgba(20,18,12,.08);
}
.board b:last-of-type { border-right-width: 3px; }
.board span { padding-left: var(--sp-3); align-self: center; font-weight: 700; }

/* 数据行：三个数字撑住首屏。数字用等宽，换内容时不抖。 */
.stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.stats b {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1); font-weight: 900; color: var(--ink);
  margin-right: .35em;
  box-shadow: inset 0 -.32em 0 var(--accent-soft);   /* 荧光笔划线 */
}

/* 跑马灯：斜切色带横穿整屏。整条 translate，GPU 一层，不触发重排。 */
.ticker {
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--accent); color: var(--accent-ink);
  border-block: 3px solid var(--ink);
  transform: rotate(-1.8deg) scale(1.04);
  margin-block: var(--sp-6);
}
.ticker-run {
  display: flex; width: max-content;
  animation: roll 26s linear infinite;
}
.ticker-run span {
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--step--1); font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
/* 内容重复了一轮，位移到一半正好接回起点，看不出接缝 */
@keyframes roll { to { transform: translateX(-50%); } }
.ticker-run span:nth-child(even) { color: var(--accent-soft); }

.ad {
  background: repeating-linear-gradient(45deg,
    var(--sink) 0 8px, transparent 8px 16px);
  border: 3px dashed var(--ink); color: var(--muted); font-weight: 700;
}

/* 题干。十屏都是这一套，不写行内样式 */
.q-title { font-size: var(--step-2); font-weight: 900; max-width: var(--measure); }
/* 题干里的重点词：整块反色印上去 */
.q-title em {
  font-style: normal; padding: 0 .18em;
  background: var(--accent); color: var(--accent-ink);
}
.opts { display: grid; gap: var(--sp-4); max-width: var(--measure); }

/* 选项卡：印刷卡片，点下去像盖章塌陷 */
.opt {
  position: relative; text-align: left;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 3.4rem;
  font-size: var(--step-1); font-weight: 700;
  background: var(--raise);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
/* 左边的选项编号方块，A/B/C/D */
.opt::before {
  content: attr(data-k);
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.4rem;
  display: grid; place-items: center;
  font-weight: 900; font-size: var(--step-1);
  background: var(--accent-soft); border-right: 3px solid var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.opt:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.opt:hover::before { background: var(--accent); }
.opt:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

/* ---- 结果屏：全站唯一放开做的地方 ----------------------------
   用户已经落地，这里不再有跳出风险；而分享就发生在这一屏，
   分享出去的流量是零成本的。惊艳放这儿，不放落地页。 */
/* 五档结果块，score.js 只留一块。必须是 .screen 的直接子元素，
   否则拿不到上面那套 nth-child 入场延迟。 */
[data-result] { display: grid; gap: var(--sp-5); }
/* 结果里的分数：跟着 verdict 的描边走，不另起一套样式 */
.verdict em { font-style: normal; color: var(--accent); }
.verdict {
  font-size: var(--step-4); font-weight: 900; letter-spacing: -.035em;
  line-height: .98;
  color: var(--raise);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 6px 6px 0 var(--accent), 10px 10px 0 var(--ink);
}
/* 计分灯条：从左往右一格一格点亮 */
.segs { display: flex; flex-wrap: wrap; gap: 0; }
.segs i {
  width: 34px; height: 52px; background: var(--sink);
  border: 3px solid var(--ink); border-right-width: 0;
}
/* 点亮动画绑在 data-active 上：结果屏是第 12 屏，页面一加载就跑完的话
   用户走到这儿只看得见静止的灯条。用长手写属性，不用 animation 简写
   —— 简写会把下面那排 animation-delay 一起重置掉。 */
.screen[data-active] .segs i {
  animation-name: light; animation-duration: .42s;
  animation-timing-function: var(--ease); animation-fill-mode: both;
}
.segs i:last-child { border-right-width: 3px; }
.segs i[data-hit] { background: var(--accent); }
.segs i:nth-child(1){animation-delay:.05s} .segs i:nth-child(2){animation-delay:.1s}
.segs i:nth-child(3){animation-delay:.15s} .segs i:nth-child(4){animation-delay:.2s}
.segs i:nth-child(5){animation-delay:.25s} .segs i:nth-child(6){animation-delay:.3s}
.segs i:nth-child(7){animation-delay:.35s} .segs i:nth-child(8){animation-delay:.4s}
.segs i:nth-child(9){animation-delay:.45s} .segs i:nth-child(10){animation-delay:.5s}
@keyframes light { from { transform: scaleY(.06); opacity: 0 } to { transform: none; opacity: 1 } }

/* 合站的机关：结果页把人推去别的题材，抬每人页数 */
.more { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.more a {
  display: block; padding: var(--sp-4); text-decoration: none; color: inherit;
  background: var(--raise); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.more a:nth-child(odd)  { transform: rotate(-.9deg); }
.more a:nth-child(even) { transform: rotate(.7deg); }
.more a:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 9px 9px 0 var(--accent); }
.more b { display: block; font-size: var(--step-1); font-weight: 900; margin-bottom: var(--sp-1); }
.more span { font-size: var(--step--1); color: var(--muted); font-weight: 600; }