/* ============================================================
   apps/memory.html 样式 —— 漫画分镜 / 黑白红
   P1 主题换肤：tokens、纸白底层、噪声 + 装订线、黑粗边、朱红强调
   后续阶段：P2 卡牌资产 / P3 动效层
   ============================================================ */

:root {
  /* —— 漫画纸白（页面背景，带极轻微米黄） —— */
  --paper:        #fafaf5;
  --paper-edge:   #f0eee5;

  /* —— 墨黑（所有线条 / 正文） —— */
  --ink:          #0a0a0a;
  --ink-soft:     #2b2b2b;
  --ink-mute:     #6b6b6b;
  --ink-line:     #0a0a0a;

  /* —— 面板 —— */
  --panel:        #ffffff;
  --panel-shade:  #f5f3ea;

  /* —— 朱红（唯一强调色） —— */
  --accent:       #e22d3a;
  --accent-deep:  #b51a26;
  --accent-soft:  #fbd9dc;
  --on-accent:    #ffffff;

  /* —— 状态色 —— */
  /* 配对成功在 P3 改用朱红描边动画，无独立绿；配对失败与 accent 同色，靠动效区分语义 */
  --ok:    #0a0a0a;
  --err:   #e22d3a;

  /* —— 形状契约 —— */
  --line:         3px;          /* 全局面板描边宽度 */
  --line-thin:    2px;          /* 章节小标签/徽章描边 */
  --radius-panel: 4px;          /* 漫画格子轻微卷起的圆角 */

  /* —— 字体栈 —— */
  --font-manga:   "M PLUS Black", "Source Han Sans SC Heavy", "Heiti SC", "SimHei", "Microsoft YaHei", sans-serif;
  --font-mono:    "SF Mono", "Consolas", "Menlo", monospace;
  --font-serif:   "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }

  /* —— 漫画纸白底层 + 噪声 + 四角装订线 —— */
  body {
    background: var(--paper);
    background-attachment: fixed;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }
  /* 噪声纹理（data-URI SVG feTurbulence，色相调至墨黑，opacity 0.04） */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
    opacity: 1;
  }
  /* 四角装订线（离边缘 8px 处的 2px 黑线，模拟"翻开一页漫画"） */
  body::after {
    content: '';
    position: fixed;
    inset: 8px;
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(to bottom, var(--ink-line) 0, var(--ink-line) 2px, transparent 2px, transparent 100%) top    left    / 100% 14px no-repeat,
      linear-gradient(to top,    var(--ink-line) 0, var(--ink-line) 2px, transparent 2px, transparent 100%) bottom left    / 100% 14px no-repeat,
      linear-gradient(to right,  var(--ink-line) 0, var(--ink-line) 2px, transparent 2px, transparent 100%) top    left    / 14px 100% no-repeat,
      linear-gradient(to left,   var(--ink-line) 0, var(--ink-line) 2px, transparent 2px, transparent 100%) top    right   / 14px 100% no-repeat;
  }
  /* 让交互层在纸面之上 */
  body > * { position: relative; z-index: 1; }

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

  /* 原顶栏「返回游戏 / 个人战绩」入口下移（顶栏已换共享组件） */
  .entry-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .back-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    text-transform: uppercase;
    border: var(--line-thin) solid var(--ink-line);
    padding: 6px 12px;
    background: var(--panel);
  }
  .back-link:hover { color: var(--accent); border-color: var(--accent); }
  .stats-link-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 8px 16px;
    border: var(--line-thin) solid var(--ink-line);
    background: var(--panel);
  }
  .stats-link-btn:hover { background: var(--ink); color: var(--panel); }

  /* —— 主体 —— */
  main { flex: 1; padding: 48px 32px 60px; max-width: 1200px; width: 100%; margin: 0 auto; }

  /* —— 页头：黑色矩形章戳 + 粗黑大标题 + 朱红分隔线 —— */
  .head { text-align: center; margin-bottom: 36px; }
  .head .eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--panel);
    background: var(--ink);
    border: var(--line-thin) solid var(--ink-line);
    padding: 6px 12px;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .head h1 {
    font-family: var(--font-manga);
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
    padding-bottom: 14px;
    border-bottom: 4px solid var(--accent);
    display: inline-block;
  }
  .head .h1-en {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    text-transform: uppercase;
  }
  .head .sub {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.8;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* —— 难度切换：章选择器 —— */
  .diff-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; }
  .diff-btn {
    padding: 10px 20px;
    font-family: var(--font-manga);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--panel);
    border: var(--line) solid var(--ink-line);
    cursor: pointer;
    transition: all 0.18s ease;
    border-radius: var(--radius-panel);
    position: relative;
  }
  .diff-btn:hover { color: var(--accent); border-color: var(--accent); }
  .diff-btn.active {
    background: var(--ink);
    color: var(--panel);
    border-color: var(--ink);
  }
  /* 选中态右上角朱红"阅读中"小三角 */
  .diff-btn.active::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-bottom: 10px solid var(--accent);
  }

  /* —— 主体两栏 —— */
  .game-area { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }

  /* —— 棋盘外壳（分镜格） —— */
  .board-wrap {
    background: var(--panel);
    border: var(--line) solid var(--ink-line);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 360px;
    border-radius: var(--radius-panel);
  }
  /* 预览横幅：纯黑底 + 白字 + 章戳 */
  .preview-banner {
    width: 100%;
    padding: 12px 16px;
    text-align: center;
    background: var(--ink);
    color: var(--panel);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: var(--line) solid var(--ink-line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .preview-banner::before {
    content: 'PREVIEW · 角色登场';
    display: inline-block;
    background: var(--panel);
    color: var(--ink);
    padding: 3px 8px;
    border: var(--line-thin) solid var(--ink-line);
    font-weight: 700;
    letter-spacing: 0.16em;
  }
  .preview-banner b {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--accent);
    -webkit-text-stroke: 1px var(--panel);
    text-stroke: 1px var(--panel);
    font-variant-numeric: tabular-nums;
  }

  /* —— 棋盘本体（卡牌样式 P2 再升级，本阶段保留 1px 灰边以保证 P2 之前的视觉稳定） —— */
  .board {
    display: grid;
    gap: 8px;
    width: 480px;
    height: 480px;
    max-width: 100%;
    aspect-ratio: 1;
  }
  .board[data-size="4-3"] { width: 480px; height: 380px; }
  .board[data-size="4-4"] { width: 480px; height: 480px; }

  /* —— 3D 翻牌（P2 卡牌资产：四角星 / 双层描边 / 草稿线 / 分镜倾斜） —— */
  .card {
    position: relative;
    perspective: 800px;
    cursor: pointer;
    user-select: none;
    /* 分镜倾斜：每张卡片通过 :nth-child 取 -1° ~ +1°，模拟手绘漫画感 */
  }
  /* 倾斜在 900px 以下归零（小屏易误读） */
  .card:nth-child(7n+1) { transform: rotate(-0.8deg); }
  .card:nth-child(7n+2) { transform: rotate( 0.6deg); }
  .card:nth-child(7n+3) { transform: rotate(-0.4deg); }
  .card:nth-child(7n+4) { transform: rotate( 0.9deg); }
  .card:nth-child(7n+5) { transform: rotate(-0.6deg); }
  .card:nth-child(7n+6) { transform: rotate( 0.3deg); }
  .card:nth-child(7n)   { transform: rotate(-0.2deg); }
  @media (max-width: 900px) {
    .card { transform: none !important; }
  }
  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
  }
  .card.flipped .card-inner { transform: rotateY(180deg); }

  /* 漫画格子：双层描边（外粗内细）+ 4px 圆角 */
  .card-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border: var(--line) solid var(--ink-line);
    border-radius: var(--radius-panel);
  }
  /* 卡背：白色 + 中央黑色实心四角星 + 黑色 "?"
     四角星用 data-URI SVG（fill 墨黑），背景层负责星，"?" 用 ::after 叠加 */
  .card-back {
    background-color: var(--panel);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z' fill='%230a0a0a'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 46% 46%;
    color: var(--ink);
    font-family: var(--font-manga);
    font-size: 22px;
    font-weight: 900;
    position: relative;
  }
  /* 卡背"?"：偏移到右下，避免遮挡四角星主体 */
  .card-back::after {
    content: '?';
    position: absolute;
    right: 6px;
    bottom: 2px;
    font-size: 12px;
    font-weight: 900;
    color: var(--ink-mute);
    line-height: 1;
  }

  /* 卡面：白底 + 草稿线虚线内框 + emoji 双层描边（黑 2px + 白 4px） */
  .card-front {
    background: var(--panel);
    color: var(--ink);
    font-size: 36px;
    line-height: 1;
    transform: rotateY(180deg);
    position: relative;
  }
  /* 草稿线：内嵌 4px 偏移的虚线黑边，模拟漫画草稿线 */
  .card-front::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--ink-line);
    border-radius: 2px;
    pointer-events: none;
  }
  /* emoji 双层描边：用 text-shadow 黑 2px + 白 4px 模拟漫画台词处理 */
  .card-front-text {
    text-shadow:
      -2px  0   0 var(--ink),
       2px  0   0 var(--ink),
       0   -2px 0 var(--ink),
       0    2px 0 var(--ink),
      -4px  0   0 var(--panel),
       4px  0   0 var(--panel),
       0   -4px 0 var(--panel),
       0    4px 0 var(--panel);
  }

  .card.matched .card-inner { transform: rotateY(180deg); }
  /* 配对成功：朱红描边 + 朱红极淡底色（无绿色填充）。P3 再升级为描边闪光动画 */
  .card.matched .card-front {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--ink-line);
  }
  .card.matched { cursor: default; }
  .card.mismatched .card-inner { animation: shake 0.4s; }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
  }
  /* hover：四角星缓慢旋转 8° + 描边变红（仅未翻、未配对时） */
  .card:hover:not(.matched):not(.flipped) .card-back {
    background-color: var(--panel);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z' fill='%23e22d3a'/></svg>");
    transition: background-image 0.2s ease;
  }
  .card:hover:not(.matched):not(.flipped) .card-back::after { color: var(--accent); }

  /* 焦点环：黑色 3px 描边 + 4px 朱红外描边（漫画风 focus ring） */
  .card:focus-visible {
    outline: none;
  }
  .card:focus-visible .card-back,
  .card:focus-visible .card-front {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent);
  }

  /* ============================================================
     P3 动效层 —— 漫画叙事节奏
     - 发牌 stagger 入场
     - 配对成功：朱红描边扩散 + 收回（替代绿色填充）
     - 拟声词气泡（翻！/ 叮！/ 咚！）
     - 通用可点元素 focus ring
     - @media (prefers-reduced-motion: reduce) 下气泡不显示、仅保留透明度
     ============================================================ */

  /* —— 发牌 stagger 入场（renderBoard 后卡片淡入；只用 opacity 避免覆盖 P2 的 rotate 倾斜） —— */
  @keyframes cardDealerIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .card.dealer-in { animation: cardDealerIn 0.35s ease-out both; }
  /* 注：.card 自身已带 :nth-child 随机 rotate 倾斜，P3 动效层只用 opacity，不动 transform，
     以免覆盖倾斜角度。如果未来要做 translateY 入场，需要把倾斜迁移到 .card-inner 上。 */

  /* —— 配对成功：朱红描边扩散 + 收回（替代绿色填充动画） —— */
  @keyframes matchFlash {
    0%   { box-shadow: 0 0 0 0   var(--accent); }
    40%  { box-shadow: 0 0 0 12px var(--accent); }
    100% { box-shadow: 0 0 0 0   var(--accent); }
  }
  .card.matched .card-front { animation: matchFlash 700ms ease-out 1; }

  /* —— 拟声词气泡 —— */
  .onomato {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    font-family: var(--font-manga);
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: var(--panel);
    padding: 4px 10px;
    border: var(--line-thin) solid var(--ink-line);
    /* 漫画声效字标准做法：白外描边 + 黑内描边 */
    text-shadow:
      -2px 0 0 var(--panel), 2px 0 0 var(--panel),
       0 -2px 0 var(--panel), 0 2px 0 var(--panel);
    pointer-events: none;
    z-index: 5;
    animation: onomatoPopup 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    white-space: nowrap;
  }
  /* 三个语气的差异化角度 / 颜色 */
  .onomato.flip   { transform: translateX(-50%) rotate(-4deg); color: var(--ink); }
  .onomato.match  { transform: translateX(-50%) rotate( 8deg); color: var(--accent); }
  .onomato.miss   { transform: translateX(-50%) rotate(-8deg); color: var(--accent); }
  @keyframes onomatoPopup {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(var(--r, -4deg)) scale(0.6); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-6px) rotate(var(--r, -4deg)) scale(1.15); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(-14px) rotate(var(--r, -4deg)) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px) rotate(var(--r, -4deg)) scale(0.95); }
  }
  /* 让 keyframes 里能拿到 .onomato 子类的旋转角度：通过 CSS 变量传递 */
  .onomato.flip  { --r: -4deg; }
  .onomato.match { --r:  8deg; }
  .onomato.miss  { --r: -8deg; }

  /* —— 翻牌时（用户点击后）卡背内容短暂高亮：onCardClick 调用方会临时加 .just-flipped —— */
  @keyframes flipBurst {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  .card.just-flipped .card-back { animation: flipBurst 300ms ease-out 1; }

  /* —— 全局可点元素 focus 环：黑 3px + 朱红 4px 外描边 —— */
  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--accent);
  }
  /* 按钮 / 输入自身的 outline 会和 box-shadow 双层重叠，简化处理：让按钮用 box-shadow 单一焦点 */
  .diff-btn:focus-visible,
  .btn:focus-visible,
  .stats-link-btn:focus-visible,
  .back-link:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent);
  }

  /* —— reduced-motion：移除位移动效与拟声词气泡，仅保留透明度切换 —— */
  @media (prefers-reduced-motion: reduce) {
    .card.dealer-in,
    .card.matched .card-front,
    .card.just-flipped .card-back {
      animation: none !important;
    }
    .onomato { display: none !important; }
  }

  /* —— 侧栏（漫画旁白栏） —— */
  .stats-panel {
    background: var(--panel);
    border: var(--line) solid var(--ink-line);
    border-radius: var(--radius-panel);
    overflow: hidden;
  }
  /* 章首条 */
  .stats-panel::before {
    content: '旁白栏 · NARRATION';
    display: block;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--panel);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    border-bottom: var(--line-thin) solid var(--ink-line);
  }
  /* 把每行 `l | v` 转成 `KEY | VALUE` 等宽行 */
  .stat-card {
    background: var(--panel);
    border: none;
    border-bottom: 1px solid var(--ink-line);
    padding: 12px 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .stat-card:last-of-type { border-bottom: var(--line-thin) solid var(--ink-line); }
  .stat-card .l {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 0;
  }
  .stat-card .v {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stat-card .v small { font-size: 12px; color: var(--ink-mute); margin-left: 4px; }
  .stat-card.best { background: var(--panel-shade); }
  .stat-card.best .l { color: var(--ink); }
  .stat-card.best .v { color: var(--accent); font-size: 14px; }

  /* 重新开局按钮：黑实心 + 白字 + hover 反色 */
  .btn-row { padding: 16px 18px; border-bottom: 1px solid var(--ink-line); }
  .btn {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-manga);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: var(--panel);
    color: var(--ink);
    border: var(--line) solid var(--ink-line);
    cursor: pointer;
    transition: all 0.18s ease;
    border-radius: var(--radius-panel);
  }
  .btn:hover { background: var(--ink); color: var(--panel); }
  .btn.primary { background: var(--ink); color: var(--panel); }
  .btn.primary:hover { background: var(--panel); color: var(--ink); }

  /* 玩法：旁白小字（衬线，注脚感） */
  .hint {
    padding: 14px 18px;
    font-family: var(--font-serif);
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.8;
    background: var(--panel-shade);
    border-bottom: 1px solid var(--ink-line);
  }
  .hint b { color: var(--ink); font-weight: 700; }

  /* 状态信息条 */
  .status-info {
    padding: 12px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--panel);
  }
  .status-info .guest { color: var(--accent); }

  /* —— 通关弹窗：白底 + 黑 3px 粗边 + 硬偏移纸感投影 —— */
  .modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  .modal-mask.show { display: flex; }
  .modal {
    background: var(--panel);
    border: var(--line) solid var(--ink-line);
    border-radius: var(--radius-panel);
    box-shadow: 6px 6px 0 var(--ink-line);
    max-width: 440px;
    width: calc(100% - 40px);
    padding: 36px 32px;
    text-align: center;
    position: relative;
  }
  .modal h2 {
    font-family: var(--font-manga);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 4px solid var(--accent);
    display: inline-block;
  }
  .modal h2 .em { color: var(--accent); }
  .modal .sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 14px;
    margin-bottom: 22px;
    letter-spacing: 0.04em;
  }
  .modal .result { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
  .modal .result .r {
    padding: 16px 14px;
    background: var(--panel);
    border: var(--line) solid var(--ink-line);
    border-radius: var(--radius-panel);
  }
  .modal .result .r .l {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .modal .result .r .v {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  /* 新纪录徽章：黑实心 + 白字 + 朱红角标 */
  .modal .badge {
    display: inline-block;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--panel);
    border: var(--line-thin) solid var(--ink-line);
    margin-bottom: 18px;
    position: relative;
  }
  .modal .badge.guest { background: var(--accent); color: var(--panel); border-color: var(--accent-deep); }
  .modal .actions { display: flex; gap: 10px; justify-content: center; }
  .modal .actions .btn { flex: 0 1 auto; min-width: 120px; }

  /* —— toast：黑实心 + 白字；错误态朱红左边条 —— */
  .toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--panel);
    padding: 12px 22px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: var(--line-thin) solid var(--ink-line);
    box-shadow: 4px 4px 0 var(--ink-line);
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 100;
    pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast.error {
    background: var(--panel);
    color: var(--accent);
    border-left: 6px solid var(--accent);
  }

  /* —— footer —— */
  .footer {
    padding: 20px 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-top: var(--line) solid var(--ink-line);
    background: var(--panel);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* "在版"小红点：连载刊物的标识 */
  .footer .live { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
  .footer .live::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
  }

  /* —— 响应式 —— */
  @media (max-width: 900px) {
    .game-area { grid-template-columns: 1fr; }
    main { padding: 32px 20px 40px; }
    .head h1 { font-size: 34px; }
  }