/* Nobody Said 换肤：A 套「答题节目·亮色」（站长 2026-11-11 从三套样张里选定，样张在 docs/design/ns-themes/）。
 * 只给 Nobody Said 两页用：页面 <html class="ns-skin">，在 css/style.css、css/nobody-said.css 之后加载。
 * 颜色变量挂在 html 上，不靠 :has()，所以不支持 :has() 的浏览器也是米色底，不会露出全站默认的黑底。
 * 两种主题色：番茄红 #FF4B2B + 明黄 #FFC93C，其余是米色、白、深棕黑中性色。没有渐变、发光、模糊阴影、表情符号。
 * 例外（站长 11-11）：立体按钮用实色偏移（box-shadow 不带模糊）做底边，按下时下沉 4px；减少动效时不下沉。
 * 对比度：番茄红上用深棕黑字 5.17:1（白字只有 3.34:1）；小号红字用加深的 #C9341A（白底 5.26:1）；次要字 #6B5E4E（白底 6.29:1、米色底 5.76:1）。 */
html.ns-skin {
  color-scheme: light;
  --bg: #FFF4DC; --card: #FFFFFF; --cover: #F3E6C8; --line: #EFE2C4; --line-strong: #CDB98E; --pill-line: #D9C69C;
  --ink: #1F1A14; --muted: #6B5E4E;
  --accent: #FF4B2B; --accent-hover: #FF5F42; --on-accent: #1F1A14; --accent-text: #C9341A;
  --accent2: #FFC93C; --on-accent2: #1F1A14;
  --edge: #B22A12; --line-page: #EBD9B0; --well: #FFF8E8;
  --dot-off: #F1E4C6;
  background: var(--bg);
}
html.ns-skin body { background: var(--bg); color: var(--ink); }

/* ---------- 页头、说明区、页脚 ---------- */
.ns-skin .site-nav { background: var(--bg); }
.ns-skin .nav-home { font-weight: 900; letter-spacing: -0.03em; }
.ns-skin .logo-mark { border-radius: 10px; box-shadow: 0 3px 0 var(--edge); }
.ns-skin .nav-links a { color: var(--ink); font-weight: 750; }
.ns-skin .nav-links a:hover { color: var(--accent-text); }
.ns-skin .gizmo-head h1 { font-weight: 900; letter-spacing: -0.04em; }
.ns-skin .about p, .ns-skin .about li { color: #2E271F; }
.ns-skin .site-foot { border-top: 2px solid var(--line-page); }
.ns-skin details { border-top: 2px solid var(--line-page); }
.ns-skin details:last-of-type { border-bottom: 2px solid var(--line-page); }
.ns-skin :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- 游戏面板 ---------- */
.ns-skin .tool.ns { border: 2px solid #EFDDB6; border-radius: 26px; box-shadow: 0 6px 0 #F0D9A8; }

/* 厚实立体按钮：大圆角、底部 4px 深色边、按下时下沉 */
.ns-skin .btn {
  min-height: 54px; padding: 0 26px; border-radius: 16px; margin-bottom: 4px;
  border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font-weight: 850; font-size: 1.05rem; letter-spacing: .005em;
  box-shadow: 0 4px 0 var(--edge); transition: transform .06s ease-out, box-shadow .06s ease-out;
}
.ns-skin .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ns-skin .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.ns-skin .btn-quiet { background: #FFFFFF; color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); font-weight: 800; }
.ns-skin .btn-quiet:hover { background: var(--well); border-color: var(--ink); }
.ns-skin .btn-quiet:active { box-shadow: 0 0 0 var(--ink); }

/* 开始界面 */
.ns-skin .ns-kicker { color: var(--accent-text); font-weight: 850; }
.ns-skin .ns-lead { font-weight: 650; }
.ns-skin .ns-intro .btn { min-height: 58px; font-size: 1.12rem; }
.ns-skin .ns-example { border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--well); }

/* 答题：顶部分数小牌、粗倒计时条，最后 5 秒变番茄红 */
.ns-skin .ns-top { font-weight: 800; letter-spacing: .02em; }
.ns-skin .ns-top strong { padding: 4px 12px; border-radius: 999px; background: var(--accent2); color: var(--on-accent2); font-weight: 900; }
.ns-skin .ns-q { font-weight: 900; letter-spacing: -0.03em; }
.ns-skin .ns-timer { gap: 10px; }
.ns-skin .ns-bar { height: 16px; border-radius: 999px; background: var(--bg); border: 2px solid var(--ink); }
.ns-skin .ns-bar i { background: var(--accent2); border-radius: 999px; }
.ns-skin .ns-timer strong { min-width: 3.2ch; padding: 4px 8px; border-radius: 10px; text-align: center; font-size: 1.35rem; font-weight: 900; background: var(--bg); color: var(--ink); border: 2px solid var(--ink); }
.ns-skin .ns-timer.is-low .ns-bar i { background: var(--accent); }
.ns-skin .ns-timer.is-low strong { background: var(--accent); color: var(--on-accent); }
.ns-skin .tool.ns input[type="text"] { border: 2px solid var(--line-strong); border-radius: 14px; background: #FFFDF7; font-weight: 650; }
.ns-skin .tool.ns input[type="text"]:focus { border-color: var(--ink); }
.ns-skin .tool.ns input[type="text"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent2); }
.ns-skin .ns-hint.is-bad { color: var(--accent-text); font-weight: 750; }

/* ---------- 揭晓：100 人点阵 ---------- */
.ns-skin .ns-dots i { background: var(--dot-off); }
.ns-skin .ns-dots i.on { background: var(--accent); }
.ns-skin .ns-dots.is-solo i.solo, .ns-skin .ns-dots.is-solo i.pop { background: var(--accent); box-shadow: 0 0 0 2px #FFFFFF; }
.ns-skin .ns-dots.is-solo i.solo::after, .ns-skin .ns-dots.is-solo i.pop::after { border: 3px solid var(--accent); }
.ns-skin .ns-crowd { font-weight: 800; }

/* 五档稀有度小牌子（揭晓画面 .ns-tier 和成绩页 .ns-badge 共用）：灰米 → 浅黄 → 明黄 → 深底黄字 → 番茄红，越冷门越醒目。
 * 档位 class 由 js/nobody-said.js 直接给：ns-tier-1 Everybody said it … ns-tier-5 Nobody said it；没答上是 is-none。 */
.ns-skin .ns-tier, .ns-skin .ns-badge { border: 2px solid #F3E6C8; background: #F3E6C8; color: #6B5E4E; box-shadow: 0 3px 0 #E2D1AA; font-weight: 900; letter-spacing: .01em; }
.ns-skin .ns-tier-2 { background: #FFE7B0; border-color: #FFE7B0; color: var(--ink); box-shadow: 0 3px 0 #E9C77A; }
.ns-skin .ns-tier-3 { background: var(--accent2); border-color: var(--accent2); color: var(--ink); box-shadow: 0 3px 0 #C99A1A; }
.ns-skin .ns-tier-4 { background: var(--ink); border-color: var(--ink); color: var(--accent2); box-shadow: 0 4px 0 var(--accent2); }
.ns-skin .ns-tier-5 { background: var(--accent); border-color: var(--ink); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.ns-skin .ns-tier.is-none, .ns-skin .ns-badge.is-none { background: var(--cover); border-color: var(--line); color: var(--muted); box-shadow: none; }
.ns-skin .ns-tier { border-radius: 12px; padding: 7px 14px; margin-bottom: 12px; font-size: 1.02rem; }
.ns-skin .ns-tier.ns-tier-3 { font-size: 1.1rem; }
.ns-skin .ns-tier.ns-tier-4 { font-size: 1.2rem; }
.ns-skin .ns-tier.ns-tier-5 { font-size: 1.45rem; padding: 9px 18px; letter-spacing: -0.01em; }
.ns-skin .ns-meter { gap: 5px; }
.ns-skin .ns-meter li { height: 12px; border-radius: 999px; background: var(--dot-off); }
.ns-skin .ns-meter li.on { background: var(--accent2); }
.ns-skin .ns-meter li:nth-child(n+4).on { background: var(--accent); }
.ns-skin .ns-scale { font-weight: 800; }
.ns-skin .ns-mine { font-weight: 650; }
.ns-skin .ns-facts div { border: 2px solid var(--line); border-radius: 14px; background: var(--well); }
.ns-skin .ns-facts dt { font-weight: 850; }
.ns-skin .ns-facts dd { font-weight: 800; }

/* ---------- 成绩页：明黄记分牌 + 番茄红「N answers nobody said」牌子 ---------- */
.ns-skin .ns-result h2 { color: var(--accent-text); font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ns-skin .ns-big {
  position: relative; overflow: hidden; isolation: isolate;
  flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 10px 0 14px; padding: 18px 22px; border-radius: 20px;
  background: var(--accent2); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
}
/* 两个简单几何形：右上角一个番茄红实心圆、右下角一个白色圆环 */
.ns-skin .ns-big::before { content: ""; position: absolute; z-index: -1; right: -34px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: var(--accent); }
.ns-skin .ns-big::after { content: ""; position: absolute; z-index: -1; right: 18px; bottom: -30px; width: 62px; height: 62px; border-radius: 50%; border: 8px solid #FFFFFF; }
.ns-skin .ns-big strong { font-size: 5.6rem; line-height: .92; font-weight: 900; letter-spacing: -0.05em; color: var(--ink); }
.ns-skin .ns-big span { color: #4A3B1F; font-weight: 850; font-size: 1.05rem; }
.ns-skin .ns-nobody {
  display: inline-block; margin: 0 0 16px; padding: 8px 16px 8px 12px; border-radius: 14px;
  background: var(--accent); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em;
}
.ns-skin .ns-nobody::first-letter { font-size: 1.7em; line-height: 1; padding-right: 2px; }
.ns-skin .ns-countdown { display: table; padding: 4px 12px; border-radius: 999px; background: var(--well); color: var(--ink); border: 2px solid var(--line); }
/* 6 个缩略点阵：白底、暗点用浅米色、亮点番茄红，只亮一个的那格整格框红、点放大 */
.ns-skin .ns-mini { border: 2px solid var(--line-page); background: #FFFFFF; gap: 1px; }
.ns-skin .ns-mini i { background: #EADCBC; }
.ns-skin .ns-mini i.on { background: #F03A18; transform: scale(1.18); }
.ns-skin .ns-mini.is-solo { border-color: var(--accent); background: #FFF0E6; }
.ns-skin .ns-mini.is-solo i.on { background: #F03A18; transform: scale(2.4); }
.ns-skin .ns-mini.is-none { background: var(--well); }
/* 成绩行：题目一行；答案 + 档位小牌子一行（窄屏时牌子整块换到下一行，不拆字） */
.ns-skin .ns-rows { border-top: 2px solid var(--line); }
.ns-skin .ns-rows li { border-bottom: 2px solid var(--line); }
.ns-skin .ns-row-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 750; }
.ns-skin .ns-row-a.is-nobody { color: var(--ink); font-weight: 900; }
.ns-skin .ns-badge { flex: none; display: inline-block; padding: 2px 9px; border-radius: 8px; font-size: .8rem; line-height: 1.4; white-space: nowrap; box-shadow: 0 2px 0 #E2D1AA; }
.ns-skin .ns-badge.ns-tier-2 { box-shadow: 0 2px 0 #E9C77A; }
.ns-skin .ns-badge.ns-tier-3 { box-shadow: 0 2px 0 #C99A1A; }
.ns-skin .ns-badge.ns-tier-4 { box-shadow: 0 2px 0 var(--accent2); }
.ns-skin .ns-badge.ns-tier-5 { box-shadow: 0 2px 0 var(--ink); }
.ns-skin .ns-badge.is-none { box-shadow: none; }
.ns-skin .ns-rows strong { font-weight: 900; }
.ns-skin .ns-records { font-weight: 650; }

@media (max-width: 639px) {
  .ns-skin .ns-big strong { font-size: 4.6rem; }
  .ns-skin .ns-big::before { width: 120px; height: 120px; right: -30px; top: -34px; }
}
@media (prefers-reduced-motion: reduce) { .ns-skin .btn:active { transform: none; } }

/* 成绩页：喜不喜欢 + 反馈框（11-12）：米色浅底卡片，次级立体按钮小一号；文字链接深棕黑带下划线 */
.ns-skin .ns-rate { border: 2px dashed var(--line-strong); border-radius: 16px; background: var(--well); }
.ns-skin .ns-rate-q { color: var(--ink); font-weight: 850; }
.ns-skin .btn.ns-btn-sm { min-height: 44px; padding: 0 18px; border-radius: 13px; font-size: .98rem; }
.ns-skin .ns-rate-done, .ns-skin .ns-fb-sent { font-weight: 800; }
.ns-skin .ns-link { color: var(--ink); font-weight: 850; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.ns-skin .ns-link:hover { color: var(--accent-text); }
.ns-skin .ns-fb textarea { border: 2px solid var(--line-strong); border-radius: 14px; background: #FFFDF7; font-weight: 600; }
.ns-skin .ns-fb textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--accent2); }
.ns-skin .ns-fb-line { color: var(--muted); font-weight: 650; }
@media (max-width: 639px) {
  .ns-skin .ns-rate-btns .btn.ns-btn-sm { padding: 0 8px; font-size: .92rem; white-space: nowrap; }
}