/* 每日神话冷门答案问答（11-11）。配色、字体变量来自 css/myth.css 的 .theme-myth（夜蓝 + 金，不加新主题色）；
   五档只用金色的深浅和亮度区分，最冷门一档加光。规则收在 .mt / .trivia-about 下，免得和站点的 .btn、.card 打架。
   手机优先：375 宽下题目、倒计时、输入框排在最上面，手机键盘弹起时不互相挡。 */
.page-trivia { --zh: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif; --dim: #3a4a66; }
.trivia { padding: 0 16px 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.mt { max-width: 32rem; margin: 0 auto; padding: 8px 0 20px; }
.mt [hidden] { display: none !important; }
.mt button { font: inherit; }

/* 顶栏 */
.mt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.mt .brand { text-align: center; min-width: 0; }
.mt .brand h1 { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mt-name { font-family: var(--display); font-weight: 700; font-size: 1.55rem; letter-spacing: .16em; color: var(--ink); text-transform: uppercase; }
.mt-tag { margin-top: 3px; font-family: var(--serif); font-weight: 400; font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.mt .sub { margin: 3px 0 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mt .icon-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--gold-hi); font-family: var(--display); font-size: 1.05rem; cursor: pointer; display: grid; place-items: center; text-decoration: none; }
.mt .icon-btn:hover { border-color: var(--gold); }

.mt .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.1em; border-radius: 8px; border: 1px solid var(--gold); font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mt .btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1206; }
.mt .btn-line { background: rgba(8, 14, 26, .35); color: var(--gold-hi); }

/* 开场 */
.mt-intro { margin-top: 14px; padding: 18px 16px; background: var(--band); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.mt-intro .lead { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); text-wrap: pretty; }
.mt-intro em { color: var(--gold-hi); font-style: italic; }
.mt-rules { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
.mt-rules li::before { content: "\25c7  "; color: var(--gold); }
.btn-start { min-width: 220px; margin-top: 6px; }

/* 答题 */
.mt-play { margin-top: 12px; }
.mt-status { display: flex; justify-content: space-between; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mt-q { margin: 8px 0 10px; font-family: var(--serif); font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.25; color: var(--ink); text-wrap: balance; min-height: 2.5em; }
.mt-timer { display: flex; align-items: center; gap: 10px; }
.mt-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mt-bar span { display: block; height: 100%; width: 100%; background: var(--gold); border-radius: 3px; }
.mt-sec { width: 2.2em; text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.mt-timer.is-low .mt-bar span { background: var(--gold-hi); }
.mt-timer.is-low .mt-sec { color: var(--gold-hi); }
.mt-form { display: flex; gap: 8px; margin-top: 10px; }
.mt-form input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: #0e182a; color: var(--ink); font-size: 16px; }
.mt-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 162, 76, .25); }
.mt-form input::placeholder { color: var(--muted); }
.mt-hint { min-height: 1.3em; margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.mt-hint.is-bad { color: var(--gold-hi); }

/* 揭晓 */
.mt-reveal { margin-top: 4px; padding: 14px 14px 10px; background: var(--band); border: 1px solid var(--line); border-radius: 10px; text-align: center; scroll-margin-top: 8px; }
.mt-tier { margin: 0; font-family: var(--display); font-size: 1.3rem; letter-spacing: .1em; color: var(--ink); }
.mt-tier.t4 { color: var(--gold-hi); text-shadow: 0 0 18px rgba(233, 196, 122, .55); }
.mt-tier.none { color: var(--muted); }
.mt-meter { list-style: none; display: flex; justify-content: center; gap: 5px; margin: 8px 0 0; padding: 0; }
.mt-meter li { width: 30px; height: 6px; border-radius: 3px; background: var(--line); }
.mt-meter li.on { background: var(--gold); }
.mt-meter li.on.top { background: var(--gold-hi); box-shadow: 0 0 8px rgba(233, 196, 122, .7); }
.mt-mine { margin: 10px 0 0; font-size: .95rem; color: var(--text); text-wrap: pretty; }
.mt-facts { margin: 12px 0 0; text-align: left; }
.mt-facts dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.mt-facts dd { margin: 3px 0 0; color: var(--ink); font-size: .92rem; }
.mt-rare { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-rare li { padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.mt-rare .rare-name { color: var(--ink); }
.mt-rare .rare-pct { color: var(--muted); font-size: .8rem; margin-left: 6px; }
.mt-rare .rare-line { display: block; margin-top: 2px; font-size: .82rem; color: var(--text); }
.mt-reveal .btn { margin-top: 12px; min-width: 200px; }

/* 召唤卡：翻出来 + 一圈金光，1.2 秒以内；系统设了减少动效就直接显示 */
.summon { margin: 14px auto 0; max-width: 21rem; perspective: 900px; }
.summon-label { margin: 0 0 6px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.summon-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 10px; text-align: left; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--gold); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transform-origin: 50% 50%; }
.summon-card:hover { border-color: var(--gold-hi); }
.summon-art { display: block; width: 96px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: var(--band); }
.summon-art img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.summon-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.summon-cost { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.summon-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.summon-name .en { font-family: var(--display); font-size: 1.05rem; letter-spacing: .05em; color: var(--ink); }
.summon-name .zh { font-family: var(--zh); font-size: 1.05rem; color: var(--gold-hi); }
.summon-text { font-size: .84rem; line-height: 1.35; }
.summon-more { font-size: .78rem; color: var(--gold-hi); text-decoration: underline; }
.summon.c4 .summon-card { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 28px rgba(233, 196, 122, .45); }
.summon.is-new .summon-label::after { content: " \00b7  new to your bestiary"; color: var(--gold-hi); }
.summon.is-summoning .summon-card { animation: summon-flip 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes summon-flip {
  0% { transform: rotateY(90deg) scale(.9); opacity: 0; filter: brightness(2.2); }
  55% { transform: rotateY(-8deg) scale(1.02); opacity: 1; filter: brightness(1.4); }
  100% { transform: rotateY(0) scale(1); opacity: 1; filter: none; }
}

/* 成绩 */
.mt-result { margin-top: 14px; padding: 16px; background: var(--band); border: 1px solid var(--line); border-radius: 10px; text-align: center; scroll-margin-top: 8px; }
.verdict { margin: 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.r-score { margin: 4px 0 0; color: var(--muted); }
.r-score b { font-family: var(--display); font-size: 2.6rem; color: var(--ink); margin-right: 6px; }
.r-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.r-rows li { display: grid; grid-template-columns: 1.4em 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: .86rem; }
.r-rows .mk { color: var(--gold); text-align: center; }
.r-rows .q { display: block; color: var(--muted); font-size: .76rem; }
.r-rows .a { color: var(--ink); }
.r-rows .pt { font-family: var(--display); color: var(--ink); }
.r-h { margin: 16px 0 6px; font-family: var(--display); font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.r-beasts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.r-beasts li { width: 60px; }
.r-beasts a { display: block; text-decoration: none; }
.r-beasts img { display: block; width: 60px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold); box-shadow: none; }
.r-beasts span { display: block; margin-top: 2px; font-size: .66rem; line-height: 1.15; color: var(--text); }
.r-beasts .none { width: auto; font-size: .86rem; color: var(--muted); }
.r-dex { margin: 10px 0 0; font-size: .9rem; color: var(--text); }
.share-row { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.next { display: flex; flex-direction: column; align-items: flex-start; }
.next-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.countdown { font-family: var(--display); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.share-preview { margin: 12px auto 0; display: inline-block; max-width: 100%; text-align: left; padding: 8px 12px; background: #0e182a; border: 1px dashed var(--line); border-radius: 8px; font-size: .78rem; line-height: 1.4; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-result .links { margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mt-result .links .btn { font-size: .84rem; min-height: 42px; }

/* 图鉴进度：43 格，没收到的是暗格（只露费用点数） */
.dex { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 26, 45, .6); scroll-margin-top: 8px; }
.dex-head { display: flex; justify-content: space-between; align-items: baseline; }
.dex h2 { margin: 0; font-family: var(--display); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.dex-count { font-family: var(--display); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.dex-bar { display: block; height: 4px; margin: 8px 0 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.dex-bar span { display: block; height: 100%; width: 0; background: var(--gold); }
.dex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
.dex-grid li { aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; background: #0c1526; border: 1px solid var(--line); position: relative; }
.dex-grid a { display: block; width: 100%; height: 100%; }
.dex-grid img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.dex-grid li.got { border-color: var(--gold); }
.dex-grid li.c4.got { border-color: var(--gold-hi); box-shadow: 0 0 6px rgba(233, 196, 122, .5); }
.dex-grid .pips { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: .55rem; letter-spacing: 1px; color: var(--dim); }
.dex-grid li.got .pips { display: none; }
.dex-grid li.flash { animation: dex-in 1s ease both; }
@keyframes dex-in { 0% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(233, 196, 122, .8); } 100% { box-shadow: none; } }
.dex-note { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }

/* 弹窗 */
.mt .modal { width: min(30rem, calc(100vw - 24px)); max-height: calc(100svh - 40px); padding: 20px 20px 16px; border: 1px solid var(--gold); border-radius: 12px; background: var(--card); color: var(--text); }
.mt .modal::backdrop { background: rgba(4, 8, 16, .72); }
.mt .modal h2 { margin: 0 0 .5em; font-family: var(--display); font-size: 1.25rem; letter-spacing: .1em; color: var(--ink); }
.mt .modal h3 { margin: 1.1em 0 .4em; font-family: var(--display); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.mt .modal p, .mt .modal li, .mt .modal dd { font-size: .9rem; }
.mt .modal ul { padding-left: 1.1em; margin: .4em 0; }
.mt .modal .close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.mt .modal .note { color: var(--muted); }
.legend { margin: 0; }
.legend dt { font-weight: 600; color: var(--ink); margin-top: .5em; font-size: .9rem; }
.legend dd { margin: .1em 0 0; color: var(--text); }

/* 说明 + FAQ */
.trivia-about { max-width: 40rem; margin: 0 auto; padding: 12px 0 24px; border-top: 1px solid var(--line); }
.trivia-about h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); margin: 1.4em 0 .5em; }
.trivia-about section:first-child h2 { margin-top: .8em; }

@media (min-width: 900px) {
  .mt { max-width: 36rem; padding-top: 18px; }
  .mt-name { font-size: 1.9rem; }
  .summon { max-width: 24rem; }
  .summon-card { grid-template-columns: 120px 1fr; }
  .summon-art { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .summon.is-summoning .summon-card, .dex-grid li.flash { animation: none; }
}

/* 语言切换（三个版本的导航里都有，11-11） */
.site-nav .nav-lang { max-width: 72rem; margin: 0 auto; padding: 0 16px 6px; display: flex; gap: 14px; justify-content: flex-end; font-size: .8rem; }
.site-nav .nav-lang a { padding: 2px 0; font-size: .8rem; border-bottom-width: 1px; }
.site-nav .nav-lang a[aria-current="true"] { color: var(--gold-hi); border-bottom-color: var(--gold); }

/* 中文版（11-11）：中文用系统字体回退，不加载网络字体；中文不加大写字距 */
.page-trivia-zh { --cjk: "PingFang TC", "PingFang SC", "Hiragino Sans TC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti TC", "Songti SC", "PMingLiU", "SimSun", var(--cjk); font-family: system-ui, -apple-system, var(--cjk); }
.page-trivia-zh .summon-src { font-family: var(--zh); }
.page-trivia-zh .mt-tag { font-size: .8rem; letter-spacing: .12em; }
.page-trivia-zh .mt .sub, .page-trivia-zh .mt-status, .page-trivia-zh .mt-facts dt, .page-trivia-zh .summon-label, .page-trivia-zh .summon-cost,
.page-trivia-zh .verdict, .page-trivia-zh .next-label, .page-trivia-zh .r-h, .page-trivia-zh .dex h2 { letter-spacing: .06em; }
.page-trivia-zh .mt-tier { font-family: var(--serif); letter-spacing: .2em; }
.page-trivia-zh .mt .btn { font-family: inherit; letter-spacing: .04em; }
.page-trivia-zh .summon.is-new .summon-label::after { content: " \00b7  " attr(data-new); }
.summon-book { font-size: .72rem; color: var(--gold); }
.summon-src { font-size: .84rem; line-height: 1.5; color: var(--text); }
.mt-rare .rare-tag { font-size: .72rem; color: var(--muted); margin-left: 2px; }