/* ===== 数谜 ShuMi — 设计令牌 ===== */
:root{
  --bg:        #0B0E14;
  --surface:   #131822;
  --surface-2: #0F141D;
  --surface-3: #1B2230;
  --line:      #232C3B;
  --line-2:    #1E2A3D;
  --accent:    #3E8BFF;
  --accent-soft: rgba(62,139,255,.18);
  --accent-deep: #13233F;
  --success:   #34D399;
  --warn:      #FBBF24;
  --text:      #E8ECF4;
  --text-2:    #97A2B3;
  --text-3:    #6B7686;
  --radius:    16px;
  --radius-sm: 12px;
  --font:      "Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:      "Noto Sans Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  /* 棋盘专用 */
  --cell-bg:       #151B26;
  --cell-bg-given: #111820;
  --grid-inner:     #3A4A63;
  --grid-box:       #6E81A0;
  --grid-box-glow:  rgba(110,129,160,.45);
  --cell-selected:  rgba(62,139,255,.22);
  --cell-same:      rgba(62,139,255,.12);
  --cell-peer:      rgba(62,139,255,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 120px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ===== 顶部导航 ===== */
.nav{
  height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 120px;border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:34px;height:34px;border-radius:10px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;
}
.logo-text{font-size:22px;font-weight:700;color:var(--text)}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:15px;color:var(--text-2);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;font-weight:600;transition:transform .12s,background .2s,opacity .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;padding:11px 22px;font-size:15px}
.btn-primary:hover{background:#5a9bff}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:11px 22px;font-size:15px}
.btn-ghost:hover{background:var(--surface-3)}

/* ===== 首页：左右分栏布局 ===== */
.home-layout{
  display:flex;gap:32px;padding:40px 120px 60px;align-items:flex-start;
  max-width:1520px;margin:0 auto;
}
.home-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px}
.home-sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:20px}

/* 首页 Hero 区（精简版） */
.home-hero{
  display:flex;flex-direction:column;gap:20px;
}
/* 首页大标题药丸（燃烧吧！大脑！ / 数谜大集合 同款边框视觉） */
.pill-title{
  display:flex;align-items:center;padding:10px 22px;border-radius:999px;
  background:var(--accent-deep);border:1px solid #2A4A7A;color:#7DB4FF;
  font-size:28px;font-weight:700;letter-spacing:1px;line-height:1.35;
}
.home-hero p.sub{font-size:16px;color:var(--text-2);max-width:600px;line-height:1.7}

/* 游戏库网格 — 紧凑小卡，一行 4 个 */
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:1fr}
.game-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px 14px;
  display:flex;flex-direction:column;gap:8px;transition:transform .15s,border-color .2s,box-shadow .2s;
  cursor:pointer;height:100%;
}
.game-card:hover{transform:translateY(-4px);border-color:#33405a;box-shadow:0 12px 36px -8px rgba(0,0,0,.45)}
.game-card.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.thumb{height:110px;border-radius:10px;background:var(--surface-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb svg{width:100%;height:100%}
.game-card h3{font-size:15px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-card .meta{font-size:12px;color:var(--text-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 右侧消息栏 ===== */
.sidebar-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:14px;
}
.sp-header{
  display:flex;align-items:center;justify-content:space-between;
}
.sp-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.sp-title .sp-icon{color:var(--accent);font-size:16px}
.sp-more{font-size:12px;color:var(--accent);cursor:pointer}
.sp-more:hover{text-decoration:underline}

/* 消息流 */
.feed-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.feed-item{
  display:flex;gap:12px;padding:12px;border-radius:12px;
  background:var(--surface-2);transition:background .12s;
}
.feed-item:hover{background:var(--surface-3)}
.feed-mark{display:inline-block;color:var(--accent);font-size:13px;font-weight:700;margin-right:6px;transform:translateY(1px)}
.feed-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.feed-line{font-size:13px;color:var(--text);line-height:1.5}
.feed-line strong{font-weight:600}
.feed-line .hl{color:var(--accent);font-weight:600}
.feed-line .hl-warn{color:var(--warn);font-weight:600}
.feed-line .hl-green{color:var(--success);font-weight:600}
.feed-time{font-size:11px;color:var(--text-3)}

/* 快速排行卡片 */
.mini-rank{display:flex;flex-direction:column;gap:6px}
.mr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:13px;
}
.mr-row .mr-name{font-weight:500}
.mr-row .mr-val{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.mr-row.mr-top{background:var(--accent-deep);border:1px solid #2A4A7A}
.mr-row.mr-top .mr-val{color:var(--accent);font-weight:700}

/* ===== 区块通用 ===== */
.section{padding:88px 120px;display:flex;flex-direction:column;gap:40px}
.section-head{display:flex;flex-direction:column;gap:10px}
.sec-eyebrow{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:2px}
.sec-title{font-size:34px;font-weight:700}
.sec-desc{font-size:16px;color:var(--text-2)}

/* Bento */
.bento{display:flex;flex-direction:column;gap:20px}
.tile-wide{
  display:flex;align-items:center;gap:24px;height:200px;padding:32px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
}
.tile-wide .t-title{font-size:22px;font-weight:700;margin-bottom:10px}
.tile-wide .t-desc{font-size:15px;color:var(--text-2);line-height:1.6;max-width:760px}
.bento-row{display:flex;gap:20px}
.tile-half{
  flex:1;height:240px;padding:28px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.tile-half .t-title{font-size:20px;font-weight:700}
.tile-half .t-desc{font-size:15px;color:var(--text-2);line-height:1.6}
.icon-box{color:var(--accent)}

/* 行动召唤 */
.final{padding:80px 120px;display:flex;justify-content:center}
.final-card{
  width:100%;padding:64px 40px;border-radius:24px;display:flex;flex-direction:column;
  align-items:center;gap:24px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(62,139,255,.18), rgba(11,14,20,1) 60%);
}
.final-card h2{font-size:36px;font-weight:700}
.final-card p{font-size:16px;color:var(--text-2);max-width:520px}

/* 页脚 */
.footer{padding:56px 120px 40px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:32px}
.footer-top{display:flex;justify-content:center;gap:96px}
.footer .brand-logo{font-size:22px;font-weight:700}
.footer .brand-tag{font-size:14px;color:var(--text-3);margin-top:10px}
.footer-links{display:flex;gap:64px}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col .ct{font-size:14px;font-weight:700;color:var(--text-2)}
.footer-col a{font-size:14px;color:var(--text-3)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:center;font-size:13px;color:var(--text-3)}

/* ===== 数独游戏页 ===== */
.game-top{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 120px;border-bottom:1px solid var(--line)}

/* 游戏大厅状态（选难度+开始） */
.lobby-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;padding:60px 120px;min-height:calc(100vh - 72px);
}
.lobby-title{font-size:32px;font-weight:700;text-align:center}
.lobby-sub{font-size:16px;color:var(--text-2);text-align:center;max-width:480px}

.lobby-diff{display:flex;flex-direction:column;gap:20px;width:100%;max-width:720px}
.lobby-section-label{
  font-size:13px;font-weight:700;color:var(--text-3);letter-spacing:1px;
  padding-left:4px;
}
/* 选择难度风格严格对齐数织游戏页的 .pill / .pill-challenge */
.lobby-pills{display:flex;gap:8px;flex-wrap:wrap}
.lobby-pill{
  padding:6px 14px;border-radius:999px;background:var(--surface-3);
  border:none;font-size:13px;color:var(--text-2);
  transition:background .2s,color .2s;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;
}
.lobby-pill:hover{background:#243049;color:var(--text)}
.lobby-pill.active{background:var(--accent);color:#fff;font-weight:600}

.lobby-challenge-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.lobby-chal{
  padding:7px 16px;border-radius:10px;background:linear-gradient(135deg,#1a1f2e,#131822);
  border:1px solid #33405a;text-align:left;
  transition:all .15s;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.lobby-chal:hover{border-color:var(--accent);background:linear-gradient(135deg,#1e2538,#161c28)}
.lobby-chal.active{
  border-color:var(--accent);background:linear-gradient(135deg,#16233F,#13233F);
  box-shadow:0 0 16px rgba(62,139,255,.15);
}
.lc-top{display:flex;align-items:center;gap:8px}
.lc-icon{font-size:18px}
.lc-name{font-size:15px;font-weight:600;color:var(--text)}
.lc-desc{font-size:11px;color:var(--text-3)}
.lc-badge{
  display:inline-block;font-size:10px;font-weight:700;color:#fff;
  background:var(--warn);padding:2px 8px;border-radius:4px;align-self:flex-start;
}

.lobby-start{
  padding:16px 64px;border-radius:14px;background:var(--accent);
  color:#fff;font-size:18px;font-weight:700;cursor:pointer;
  transition:all .15s;display:flex;align-items:center;gap:10px;
  border:none;font-family:inherit;
}
.lobby-start:hover{background:#5a9bff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(62,139,255,.3)}
.lobby-start:active{transform:translateY(0)}

/* 游戏进行中状态 */
.game-play-state{display:block}

.game-header{display:flex;align-items:center;justify-content:flex-end;padding:6px 24px 4px}
.game-header .left{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.title-row{display:flex;align-items:center;gap:12px}
.title-row h1{font-size:28px;font-weight:700}
.rules-link{
  font-size:13px;color:var(--accent);text-decoration:none;
  padding:4px 10px;border-radius:6px;background:var(--accent-deep);
  transition:background .2s;
}
.rules-link:hover{background:#1a305a}

/* 难度区域（游戏中显示当前难度标签） */
.diff-section{display:flex;align-items:center;gap:12px}
.diff-section.challenge{margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.diff-label{
  font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap;
  display:flex;align-items:center;gap:6px;min-width:64px;
}
.diff-badge{
  font-size:10px;font-weight:700;color:#fff;background:var(--warn);
  padding:1px 6px;border-radius:4px;text-transform:uppercase;
}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:6px 14px;border-radius:999px;background:var(--surface-3);
  font-size:13px;color:var(--text-2);transition:background .2s,color .2s;
  cursor:pointer;border:none;font-family:inherit;display:inline-flex;align-items:center;gap:4px;
}
.pill:hover{background:#243049;color:var(--text)}
.pill.active{background:var(--accent);color:#fff;font-weight:600}

/* 挑战药丸 */
.pills-challenge .pill-challenge{
  background:linear-gradient(135deg,#1a1f2e,#131822);
  border:1px solid #33405a;padding:7px 16px;border-radius:10px;
  flex-direction:column;align-items:flex-start;gap:0;
}
.pills-challenge .pill-challenge:hover{
  border-color:var(--accent);background:linear-gradient(135deg,#1e2538,#161c28);
}
.pills-challenge .pill-challenge.active{
  border-color:var(--accent);background:linear-gradient(135deg,#16233F,#13233F);
  box-shadow:0 0 16px rgba(62,139,255,.15);
}
.pill-challenge .pc-icon{font-size:14px}
.pill-challenge .pc-sub{
  font-size:10px;color:var(--text-3);font-weight:400;margin-left:18px;
}
.pill-challenge.active .pc-sub{color:rgba(125,180,255,.7)}
.stats{display:flex;gap:12px}
.stat{padding:10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px}
.stat .l{font-size:11px;color:var(--text-3)}
.stat .v{font-size:18px;font-weight:700;font-family:var(--mono)}
.stat.err .v{color:var(--warn)}
.stat.score .v{color:var(--accent)}

.game-main{display:flex;gap:48px;padding:20px 120px 48px;align-items:flex-start}
.board-col{flex:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.control-col{width:360px;display:flex;flex-direction:column;gap:16px}

/* ===== 棋盘 — 重写：清晰格线+宫格区分 ===== */
.board-wrap{
  --b:min(540px, calc(100vw - 32px));
  display:inline-grid;
  grid-template-columns:24px var(--b);
  grid-template-rows:24px var(--b);
  position:relative;
}

/* 通关结果直接覆盖在棋盘上（不再弹窗） */
.variant-win{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,7,12,.8);backdrop-filter:blur(4px);z-index:8;padding:20px}
.variant-win .vw-card{width:360px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;box-shadow:0 24px 64px -12px rgba(0,0,0,.55)}
.variant-win .vw-title{font-size:28px;font-weight:700;color:var(--success)}
.variant-win .vw-sub{font-size:14px;color:var(--text-2);margin:0}
.variant-win .vw-stats{display:flex;gap:10px;width:100%}
.variant-win .vw-s{flex:1;background:var(--surface-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.variant-win .vw-s .l{font-size:12px;color:var(--text-3)}
.variant-win .vw-s .v{font-size:20px;font-weight:700;font-family:var(--mono)}
.variant-win .vw-actions{display:flex;gap:12px;width:100%}
.variant-win .vw-actions .btn{flex:1}
.board-corner{grid-column:1;grid-row:1}
.col-labels{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(9,1fr)}
.row-labels{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(9,1fr)}
.col-labels span,.row-labels span{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:700;color:#C2CEDF;
}
.col-labels span.box-end,.row-labels span.box-end{color:var(--accent)}
.sudoku-board{
  grid-column:2;grid-row:2;
  box-sizing:border-box;
  width:540px;max-width:100%;aspect-ratio:1/1;height:auto;
  background:var(--cell-bg);border-radius:16px;
  /* 外边框用宫格线色，加粗 */
  border:3px solid var(--grid-box);
  box-shadow:
    0 0 0 1px var(--grid-box-glow),
    0 8px 32px rgba(0,0,0,.35);
  display:grid;
  grid-template-columns:repeat(9,1fr);
  grid-template-rows:repeat(9,1fr);
  gap:0;
  overflow:hidden;
}
.cell{
  position:relative;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:30px;font-weight:600;color:var(--text);
  /* 内部格线加粗加亮 */
  border-right:1.5px solid var(--grid-inner);
  border-bottom:1.5px solid var(--grid-inner);
  cursor:pointer;user-select:none;transition:background .12s;
  background:var(--cell-bg);
}
/* 宫格边界 — 加粗+高对比色 */
.cell.br{border-right:3px solid var(--grid-box)}
.cell.bb{border-bottom:3px solid var(--grid-box)}
/* 去掉最右和最底边的多余边框 */
.cell:nth-child(9n){border-right:none}
.cell:nth-last-child(-n+9){border-bottom:none}
/* 给定数格子稍深背景 */
.cell.given{background:var(--cell-bg-given);color:var(--text);font-weight:700}
.cell.user{color:#8AB2FF}
.cell.hint{color:#4BE3A9}
.cell.peer{background:var(--cell-peer)}
.cell.same{background:var(--cell-same)}
.cell.selected{background:var(--cell-selected)}
.cell.selected.cell.same{background:rgba(62,139,255,.24)}
.cell.error{color:var(--warn);background:rgba(251,191,36,.08)}
.cell.error.selected{background:rgba(251,191,36,.16)}
.notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:11px;color:var(--text-3);font-family:var(--mono);pointer-events:none}
.notes span{display:flex;align-items:center;justify-content:center}

/* 数字键盘 */
.num-pad{width:540px;display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.num-key{
  height:58px;border-radius:10px;background:var(--surface-3);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;transition:background .15s,opacity .15s;
  border:1px solid var(--line-2);
}
.num-key:hover{background:#243049}
.num-key .d{font-size:20px;font-weight:700;font-family:var(--mono)}
.num-key .r{font-size:11px;color:var(--text-3);font-family:var(--mono)}
.num-key.done{opacity:.35;pointer-events:none}

/* 控制卡 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card .c-title{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:1px}
.actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.action-btn{height:48px;border-radius:10px;background:var(--surface-3);display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;font-size:13px;color:var(--text);transition:background .15s;border:1px solid var(--line-2);white-space:nowrap;min-width:0;overflow:hidden;text-align:left}
.action-btn:hover{background:#243049}
.action-btn svg{flex:0 0 18px;width:18px;height:18px;color:var(--text-2)}
.action-btn small{margin-left:auto;font-size:11px;color:var(--text-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.action-btn:disabled{opacity:.4;cursor:not-allowed}
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.toggle-row .lbl{display:flex;flex-direction:column;gap:2px}
.toggle-row .lbl .t{font-size:14px;font-weight:500}
.toggle-row .lbl .s{font-size:12px;color:var(--text-3)}
.toggle{width:44px;height:24px;border-radius:12px;background:var(--accent);padding:0 2px;display:flex;align-items:center;justify-content:flex-end;transition:background .2s;flex:none}
.toggle .knob{width:20px;height:20px;border-radius:10px;background:#fff}
.toggle.off{background:#2A3344;justify-content:flex-start}
.new-game{width:100%;padding:14px 0;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.new-game:hover{background:#5a9bff}
.progress-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.progress-head{display:flex;justify-content:space-between;font-size:13px}
.progress-head .p{font-weight:700;color:var(--accent)}
.progress-track{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .3s}

/* ===== 排行榜样式（游戏内） ===== */
.rank-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.rank-tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:3px}
.rank-tab{
  flex:1;padding:7px 0;border-radius:8px;font-size:13px;font-weight:600;
  text-align:center;cursor:pointer;transition:all .15s;color:var(--text-3);
  background:none;border:none;font-family:inherit;
}
.rank-tab:hover{color:var(--text-2)}
.rank-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(62,139,255,.25)}
.rank-list{display:flex;flex-direction:column;gap:6px}
.rank-sub{margin-top:6px;padding:6px 8px;font-size:11.5px;font-weight:600;color:#b3261e;background:rgba(179,38,30,.06);border-top:1px dashed rgba(179,38,30,.35)}
.rank-entry{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:var(--surface-2);font-size:13px;transition:background .12s;
}
.rank-entry:hover{background:var(--surface-3)}
.rank-pos{
  width:24px;height:24px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
}
.rank-pos.gold{background:linear-gradient(135deg,#D4A855,#B8922E);color:#fff}
.rank-pos.silver{background:linear-gradient(135deg,#8A9299,#6B747C);color:#fff}
.rank-pos.bronze{background:linear-gradient(135deg,#B87A4A,#8C5C34);color:#fff}
.rank-pos.norm{background:var(--surface-3);color:var(--text-3)}
.rank-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rank-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-detail{font-size:11px;color:var(--text-3)}
.rank-score{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0}

/* ===== 个人数据面板 ===== */
.stats-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-item{
  padding:12px;border-radius:10px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:4px;
}
.stat-item .si-label{font-size:11px;color:var(--text-3)}
.stat-item .si-value{font-size:18px;font-weight:700;font-family:var(--mono)}
.stat-item .si-value.si-good{color:var(--success)}
.stat-item .si-value.si-accent{color:var(--accent)}

/* 历史记录列表 */
.history-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.history-entry{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:8px;background:var(--surface-2);font-size:12px;
}
.history-entry .he-left{display:flex;flex-items:center;gap:8px;align-items:center}
.history-entry .he-level{font-weight:600;color:var(--accent)}
.history-entry .he-time{font-family:var(--mono);color:var(--text-2)}
.history-entry .he-score{font-family:var(--mono);font-weight:600;color:var(--success)}
.he-date{font-size:10px;color:var(--text-3)}

/* 完成弹窗 */
.overlay{position:fixed;inset:0;background:rgba(5,7,12,.82);display:none;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(6px)}
.overlay.show{display:flex}
.modal{width:440px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;box-shadow:0 24px 64px -12px rgba(0,0,0,.55)}
.modal h2{font-size:28px;font-weight:700}
.modal .ms{font-size:15px;color:var(--text-2)}
.modal .stats2{display:flex;gap:12px;width:100%}
.modal .stats2 .s{flex:1;background:var(--surface-2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.modal .stats2 .s .l{font-size:12px;color:var(--text-3)}
.modal .stats2 .s .v{font-size:20px;font-weight:700;font-family:var(--mono)}

/* 快捷键提示 */
.shortcuts-card{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.shortcuts-list{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-3)}
.shortcuts-list span{display:flex;align-items:center;gap:6px}
kbd{
  display:inline-block;padding:1px 5px;border-radius:4px;
  background:var(--surface-3);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--text-2);
}

/* 响应式 */
@media(max-width:1100px){
  .wrap,.nav,.hero,.section,.game-header,.game-main,.game-top,.final,.footer{padding-left:32px;padding-right:32px}
  .home-layout{flex-direction:column;padding:24px 32px 48px}
  .home-sidebar{width:100%}
  .hero{flex-direction:column;align-items:flex-start}
  .board-card{width:100%;max-width:440px}
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .game-main{flex-direction:column}
  .board-col{align-items:stretch}
  .sudoku-board,.num-pad{width:100%;max-width:540px}
  .control-col{width:100%;max-width:540px}
  .lobby-state{padding:40px 32px}
  .lobby-challenge-grid{grid-template-columns:1fr}
}

/* 齿轮设置按钮 */
/* 齿轮设置按钮 */
.gear-btn{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;margin-left:16px;
  cursor:pointer;transition:background .15s,color .15s,transform .4s;
}
.gear-btn:hover{background:#243049;color:var(--accent)}
.gear-btn:active{transform:rotate(45deg)}

/* 设置弹出面板 */
.settings-pop{position:fixed;inset:0;z-index:60;display:none}
.settings-pop.show{display:block}
.settings-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.settings-panel{
  position:absolute;top:50%;right:48px;transform:translateY(-50%);
  width:320px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);padding:18px;
  animation:sp-in .18s ease-out;
}
@keyframes sp-in{from{opacity:0;transform:translateY(-50%) scale(.96)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.sp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sp-title{font-size:16px;font-weight:700;color:var(--text)}
.sp-close{
  width:30px;height:30px;border-radius:8px;border:none;background:var(--surface-3);
  color:var(--text-2);font-size:20px;line-height:1;cursor:pointer;transition:background .15s;
}
.sp-close:hover{background:#243049;color:var(--text)}
.sp-body{display:flex;flex-direction:column;gap:14px}
.sp-body .toggle-row{padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.sp-foot{margin-top:14px;font-size:12px;color:var(--text-3);line-height:1.5}

/* 每日结算提示条 */
.settle-banner{
  width:100%;max-width:720px;margin-top:8px;padding:12px 16px;
  background:linear-gradient(90deg,rgba(62,139,255,.16),rgba(62,139,255,.04));
  border:1px solid rgba(62,139,255,.4);border-radius:12px;
  color:var(--text);font-size:13.5px;font-weight:600;
}

/* 大厅账号状态（登录后显示昵称，未登录显示登录按钮） */
.lobby-profile-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:720px;margin-top:4px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;
}
.lp-guest,.lp-user{display:flex;align-items:center;gap:12px;width:100%}
.lp-user{justify-content:space-between}
.lp-text{font-size:14px;color:var(--text-2)}
.lp-text strong{color:var(--text);font-weight:700}

/* 登录/设置昵称弹窗 */
.login-pop{position:fixed;inset:0;z-index:70;display:none}
.login-pop.show{display:block}
.login-backdrop{position:absolute;inset:0;background:rgba(5,7,12,.78);backdrop-filter:blur(4px)}
.login-panel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:400px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);padding:28px;
  animation:login-in .2s ease-out;
}
@keyframes login-in{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.login-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.login-title{font-size:18px;font-weight:700;color:var(--text)}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-form label{font-size:13px;color:var(--text-2);font-weight:600}
.login-input{
  width:100%;box-sizing:border-box;
  background:var(--surface-3);border:1px solid var(--line-2);
  color:var(--text);font-size:15px;font-family:inherit;
  padding:11px 14px;border-radius:12px;outline:none;
}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,139,255,.18)}
.login-submit{
  width:100%;margin-top:4px;padding:12px 16px;border:none;border-radius:12px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;
}
.login-submit:hover{background:#2b7ce5}
.login-skip{
  width:100%;padding:10px 16px;border:none;border-radius:12px;
  background:transparent;color:var(--text-3);font-size:13px;cursor:pointer;transition:color .15s;
}
.login-skip:hover{color:var(--text-2)}
.login-foot{margin-top:16px;font-size:12px;color:var(--text-3);line-height:1.5;text-align:center}
.login-err{min-height:16px;font-size:12.5px;font-weight:600;color:#ff6b6b;line-height:1.4}

/* 输入模式切换（确认 / 笔记） */
.mode-toggle{
  width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px;cursor:pointer;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;
  transition:border-color .15s,background .15s;
}
.mode-toggle .tg-dot{width:12px;height:12px;border-radius:50%;background:var(--text-3);flex:0 0 auto;transition:background .15s,box-shadow .15s}
.mode-toggle.off{border-color:var(--line-2)}
.mode-toggle.on{border-color:var(--accent);background:rgba(62,139,255,.12)}
.mode-toggle.on .tg-dot{background:var(--accent);box-shadow:0 0 0 4px rgba(62,139,255,.22)}
.mode-toggle .tg-label{letter-spacing:.5px}
.mode-hint{font-size:11.5px;color:var(--text-3)}
.mode-hint kbd{font-family:var(--mono);background:var(--surface-3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;font-size:11px}

/* ===== 首页 A/B/C/D 分区布局 ===== */
.home-ab{display:flex;gap:28px;padding:32px 0 60px 0;align-items:flex-start}
.zone-a{width:180px;flex-shrink:0;display:flex;flex-direction:column;gap:18px}
.zone-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
/* ===== 对局顶栏：操作栏 + 统计（本局用时/已通关/荣誉）排成同一行 ===== */
.play-head{display:flex;align-items:stretch;justify-content:center;gap:12px;width:min(100%,1060px);margin:0 auto;box-sizing:border-box}
.play-head .ops-bar{flex:1 1 auto;width:auto;max-width:780px;margin:0}
.play-head .stats{flex:0 0 auto;gap:10px;align-items:stretch}
.play-head .stat{justify-content:center;min-width:84px;box-sizing:border-box;padding:5px 12px}
/* 窄屏（≤1400）：按钮收紧内边距，保证第一行 6 个按钮不折行 */
@media(max-width:1400px){
  .play-head .ops-bar{padding:8px 10px}
  .play-head .ops-bar .ops-row{gap:6px}
  .play-head .ops-bar .action-btn{min-width:72px;padding:0 8px;font-size:12.5px;gap:4px}
  .play-head .ops-bar .action-btn svg{width:16px;height:16px}
  .play-head .ops-bar .mode-toggle{min-width:112px;padding:7px 10px;font-size:12px}
  .play-head .stat{min-width:74px;padding:8px 10px}
  .play-head .stat .v{font-size:16px}
}
/* 手机（≤760）：顶栏改为可折行，按钮更紧凑，统计块单独占一行 */
@media(max-width:760px){
  .play-head{flex-wrap:wrap;gap:8px}
  .play-head .ops-bar{flex:1 1 100%;max-width:none;padding:8px}
  .play-head .ops-bar .action-btn{min-width:60px;height:34px;padding:0 7px;font-size:12px}
  .play-head .ops-bar .ops-btn-new,.play-head .ops-bar .ops-btn-restart,.play-head .ops-bar .ops-btn-back{min-width:80px}
  .play-head .ops-bar .mode-toggle{min-width:96px;padding:6px 9px;font-size:11.5px}
  .play-head .ops-bar .mode-hint{display:none}
  .play-head .stats{flex:1 1 100%;justify-content:center}
}

/* ===== 棋盘上方统一操作栏（数独 / 数谜通用）：第一行操作按钮，第二行计时/新谜题/重来一遍/笔记模式 ===== */
.ops-bar{display:flex;flex-direction:column;gap:4px;padding:4px 12px;margin:0 auto;width:100%;max-width:780px;box-sizing:border-box}
.ops-bar .ops-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.ops-bar .action-btn{width:auto;min-width:92px;height:28px;padding:0 11px 0 8px;border-radius:8px;justify-content:center}
.ops-bar .mode-toggle{width:auto;min-width:132px;padding:3px 10px;font-size:12.5px;border-radius:8px}
.ops-bar .mode-hint{font-size:12px}
.ops-bar .ops-timer{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);padding:0 6px}
.ops-bar .ops-timer b{font-weight:700}
/* 第二行三个按钮统一蓝色（新谜题 / 重来一遍 / 返回大厅 同色同风格） */
.ops-btn-new,.ops-btn-restart,.ops-btn-back{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.ops-btn-new:hover,.ops-btn-restart:hover,.ops-btn-back:hover{background:#5A9BFF;border-color:#5A9BFF}

/* B 区顶部广告窄条：常见尺寸 970×90 / 728×90（高 90px），移动端 320×50（高 50–64px）
   全站冻结：滚动时固定在视口顶部（solid 底色，避免内容透出） */
.ad-strip{
  min-height:90px;border-radius:14px;border:1px dashed var(--line);
  background:#0f141d;background-image:repeating-linear-gradient(45deg,#0f141d,#0f141d 10px,#121826 10px,#121826 20px);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13px;letter-spacing:1px;
  position:sticky;top:0;z-index:60;
}
.zone-bd{display:flex;gap:24px;align-items:flex-start}
.zone-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:28px}
.zone-d{width:160px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:12px;align-self:flex-start}
.slot-building{border:1px dashed var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--text-3);font-size:14px;background:var(--surface)}
.ad-box{min-height:250px;border:1px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12px}

/* 用户信息卡 + 大脑等级 */
.user-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.uc-guest,.uc-logged{display:flex;align-items:center;gap:14px}
.uc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.uc-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.uc-name{font-size:18px;font-weight:700;color:var(--text)}
/* 昵称 = 「我的档案」入口：hover 变蓝 + 下划线，暗示可点 */
.uc-name-link{text-decoration:none;cursor:pointer;transition:color .15s}
.uc-name-link:hover{color:var(--accent);text-decoration:underline}
.uc-lv{font-size:13px;color:var(--accent);font-weight:600}
.uc-xpbar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.uc-xpbar span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .4s}
.uc-xp{font-size:11px;color:var(--text-3);font-family:var(--mono)}
.uc-login{margin-left:auto;background:var(--accent);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.uc-login:hover{background:#5a9bff}
.uc-brain{width:84px;height:70px;flex-shrink:0}
.brain-shape{fill:#D7DEF0;stroke:#3E8BFF;stroke-width:2}
.brain-num{fill:#0B1220;font-family:var(--mono);font-size:30px;font-weight:700}

/* 解谜琅琊榜 · 按钮式入口（首页左栏 + 游戏页 A区，统一样式） */
.ly-home-entry{display:block;text-decoration:none}
.ly-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border:2px solid var(--accent);border-radius:12px;background:var(--surface);padding:13px 10px;font-size:17px;font-weight:800;color:var(--text);letter-spacing:1px;text-align:center;transition:background .2s,border-color .2s}
.ly-btn .sp-icon{font-size:18px}
.ly-home-entry:hover .ly-btn{background:rgba(62,139,255,.12);border-color:#5a9bff}
.ly-home-desc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-top:8px}
.game-ab .gb-brand.ly-entry{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border:2px solid var(--accent);border-radius:12px;background:var(--surface);padding:12px 10px;font-size:16px;font-weight:800;color:var(--text);letter-spacing:1px;transition:background .2s,border-color .2s}
.game-ab .gb-brand.ly-entry:hover{background:rgba(62,139,255,.12);border-color:#5a9bff}
.game-ab .gb-brand.ly-entry .logo-text{font-size:16px}

/* A 区收窄（180px）：用户卡改为上下堆叠，大脑居中展示 */
.zone-a .uc-guest,.zone-a .uc-logged{flex-direction:column;align-items:stretch;text-align:center}
.zone-a .uc-brain{width:110px;height:96px;margin:0 auto}
.zone-a .uc-top{justify-content:center}
.zone-a .uc-login{margin-left:0;width:100%}
.zone-a .sidebar-panel{padding:14px}

/* 响应式：窄屏堆叠 */
@media(max-width:1100px){
  .home-ab{flex-direction:column;padding:24px 32px 48px}
  .zone-a,.zone-b,.zone-d{width:100%}
  .zone-bd{flex-direction:column}
  .game-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .game-grid{grid-template-columns:1fr}
  .ad-strip{min-height:64px}
}

/* ============================================================
   游戏页统一布局（三栏：左 A · 中 C · 右 D，贴边；B区已取消）
   A区(左,贴左)：品牌·账号(极简)·玩法·难度 | C区(中,主棋盘)：顶部广告条+棋盘 | D区(右,贴右)：今日榜单+广告
   控制器 DOM 由 game-shell.js 重组
   ============================================================ */
.game-ab{display:flex;gap:24px;padding:24px 0 60px 0;align-items:flex-start;flex-wrap:wrap}
.game-ab .zone-a{width:180px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.game-ab .zone-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.game-ab .zone-d{width:160px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:12px;align-self:flex-start}
/* 三栏外壳内的棋盘区：去掉原页面的大边距，给「操作」栏留足宽度（否则按钮会被挤成竖排文字） */
.game-ab .game-main{padding:0;gap:20px;align-items:flex-start}
.game-ab .board-col{min-width:0;align-items:center}
/* 控制列已取消，左右内边距收窄，宽度全给棋盘 */
.game-ab .game-main{padding:0 24px 48px}
/* 棋盘在中间列里居中，不再贴着左边缘、右边留一大块黑 */
.game-ab .board-wrap{margin:0 auto}
/* 数谜页的棋盘卡片：与广告条/操作栏同宽，内边距只留 2px（棋盘尽量大） */
.game-ab.game-mode .board-wrap:has(.board-mount){width:100%;margin:0;padding:2px;overflow:hidden}
.game-ab .board-mount{display:flex;justify-content:center;width:100%}
.game-ab .control-col{width:280px;flex:0 0 280px;min-width:280px}
.game-ab .control-col .card{padding:12px}
.game-ab .actions-grid{gap:8px}
.game-ab .action-btn{padding:0 8px 0 6px;font-size:12.5px;gap:6px}
.game-ab .ad-strip{min-height:90px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12px;background-color:var(--surface);background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px);flex-shrink:0}
.game-ab .ad-box{min-height:250px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px)}

/* A区（213px 窄栏）：整体字号缩小 */
.game-ab .gb-brand{font-size:15px}
.game-ab .gb-brand .logo-mark{width:26px;height:26px;border-radius:7px;font-size:14px}
.game-ab .gb-back{font-size:11px}
.game-ab .user-card{padding:12px;border-radius:12px}
.game-ab .uc-name{font-size:14px}
.game-ab .uc-lv{font-size:11.5px}
.game-ab .uc-xp{font-size:10px}
.game-ab .uc-login{padding:8px 12px;font-size:12px;border-radius:8px}
.game-ab .game-rules{padding:11px 12px;border-radius:10px}
.game-ab .game-rules .gr-title{font-size:12px;margin:0 0 5px}
.game-ab .game-rules .gr-body{font-size:11.5px;line-height:1.6}
.game-ab .diff-panel{padding:11px 12px;border-radius:10px;gap:8px}
.game-ab .diff-panel .dp-head{font-size:11.5px}
.game-ab .lobby-pills .lobby-pill{font-size:12.5px;padding:9px 12px}
.game-ab .pills .pill{font-size:12.5px;padding:9px}
.game-ab .lobby-chal{padding:10px 12px}
.game-ab .lc-icon{font-size:15px}
.game-ab .lc-name{font-size:13px}
.game-ab .lc-desc{font-size:10px}
.game-ab .lc-badge{font-size:9px}

/* A区：品牌 + 返回 */
.gb-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;font-size:16px}
.gb-brand .logo-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:15px}
.gb-back{margin-left:6px;font-size:11px;font-weight:500;color:var(--accent)}
.gb-share{margin-left:6px;background:none;border:1px solid var(--line);color:var(--text-2);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}

/* A区：玩法规则卡 */
.game-rules{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.game-rules .gr-title{font-size:14px;font-weight:700;margin:0 0 6px}
.game-rules .gr-body{font-size:13px;color:var(--text-2);line-height:1.7;margin:0}

/* A区：难度选择区（一行一个，越往下越难；点击即开局） */
.diff-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.diff-panel .dp-head{font-size:13px;font-weight:700;color:var(--text-2)}
.game-ab .lobby-pills,.game-ab .lobby-challenge-grid,.game-ab .pills{display:flex;flex-direction:column;gap:8px}
.game-ab .lobby-pills .lobby-pill,
.game-ab .lobby-challenge-grid .lobby-chal{width:100%;text-align:left;justify-content:space-between}
.game-ab .pills .pill{width:100%;text-align:center;font-size:14px;padding:10px}

/* lobby 在 C区 内的去重：标题/简介/登录提示已在 A区 呈现 */
.game-mode #lobby-title,.game-mode .lobby-sub,.game-mode #lobby-profile{display:none}
.game-ab #lobby{max-width:100%}
/* 数独家族 lobby 默认 max-width 720 居中，C区 内改为满宽左对齐 */
.game-ab .lobby-state{max-width:100%;margin:0}

/* 底部 数谜大集合 */
/* 游戏页：右侧栏背景从顶贯通到页面底部（160px 竖条），底部「数谜大集合」右侧留白对齐 */
body.game-page{background-image:linear-gradient(to right,transparent calc(100% - 160px),var(--surface-2) calc(100% - 160px))}
.games-bottom{border-top:1px solid var(--line);padding:28px 0 60px;flex:0 0 calc(100% - 160px);min-width:0}
.game-card.is-current{outline:2px solid var(--accent);box-shadow:0 0 0 3px rgba(62,139,255,.18)}

/* 游戏页响应式：窄屏竖向堆叠（同首页） */
@media(max-width:1100px){
  .game-ab{flex-direction:column}
  .game-ab .zone-a,.game-ab .zone-d{width:100%}
  .game-ab .zone-d{position:static}
  .games-bottom{flex:0 0 100%}
  body.game-page{background-image:none}
}

/* ===== 游戏页：D区 今日榜单（小字号） + 隐藏 C区 冗余信息 ===== */
.game-ab .zone-d .rank-d{
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:10px 12px;
}
.game-ab .zone-d .rank-d .sp-header,
.game-ab .zone-d .rank-d .rank-card{background:transparent;border:none;padding:0;margin:0}
.game-ab .zone-d .rank-d .rank-list{max-height:340px;overflow:auto}
.game-ab .zone-d .c-title{font-size:11px}
.game-ab .zone-d .rank-tab{font-size:11.5px;padding:6px 0}
.game-ab .zone-d .rank-entry,.game-ab .zone-d .rank-row{font-size:11.5px;padding:6px 8px}
.game-ab .zone-d .rank-name,.game-ab .zone-d .rn{font-size:11.5px}
.game-ab .zone-d .rank-detail,.game-ab .zone-d .rank-hint,.game-ab .zone-d .rank-empty{font-size:10.5px}
.game-ab .zone-d .rank-score,.game-ab .zone-d .rs{font-size:11.5px}
.game-ab .zone-d .rk{font-size:11px}
.game-ab .zone-d .rank-pos{width:20px;height:20px;font-size:10.5px}

/* D 区整体：广告 → 最快榜单 → 快捷键，超高时自己滚动，不把页面撑长 */
.game-ab .zone-d{max-height:calc(100vh - 28px);overflow:auto;scrollbar-width:thin}
.game-ab .zone-d .rank-d .rank-list{max-height:260px}
.game-ab .zone-d .side-extra{display:flex;flex-direction:column;gap:10px}
.game-ab .zone-d .side-extra:empty{display:none}
.game-ab .zone-d .shortcuts-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.game-ab .zone-d .shortcuts-card .c-title{font-size:11px}
.game-ab .zone-d .shortcuts-list{display:flex;flex-direction:column;gap:5px;font-size:10.5px;color:var(--text-3);line-height:1.5}
.game-ab .zone-d .shortcuts-list kbd{font-size:9.5px;padding:1px 4px}

/* 逻辑谜题：检查标红 / 当前选中 的统一反馈 */
.pa-wrong{box-shadow:inset 0 0 0 3px #EF4444 !important;background-color:rgba(239,68,68,.12) !important}
.pa-cur{box-shadow:inset 0 0 0 3px #3E8BFF !important}

/* 轻提示 */
.pa-toast{
  position:fixed;left:50%;bottom:44px;transform:translate(-50%,12px);
  background:rgba(16,22,32,.96);border:1px solid var(--line);color:var(--text);
  padding:10px 18px;border-radius:10px;font-size:13px;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6);
}
.pa-toast.show{opacity:1;transform:translate(-50%,0)}

/* 逻辑谜题设置面板 */
.pa-settings{position:fixed;inset:0;z-index:9000;display:none}
.pa-settings.show{display:block}
.pas-backdrop{position:absolute;inset:0;background:rgba(4,7,12,.62);backdrop-filter:blur(2px)}
.pas-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:340px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 64px -12px rgba(0,0,0,.7);
}
.pas-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700}
.pas-close{background:none;border:none;color:var(--text-3);font-size:18px;cursor:pointer;line-height:1}
.pas-close:hover{color:var(--text)}
.pas-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-2)}
.pas-row small{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.pas-seg{display:flex;gap:4px;background:var(--surface-2);border-radius:10px;padding:3px}
.pas-seg button{border:none;background:none;color:var(--text-3);font-size:12px;font-family:inherit;padding:6px 12px;border-radius:8px;cursor:pointer}
.pas-seg button.active{background:var(--accent);color:#fff;font-weight:600}
.pas-sw{width:44px;height:24px;border-radius:14px;border:1px solid var(--line);background:var(--surface-3);position:relative;cursor:pointer;flex-shrink:0}
.pas-sw .pas-dot{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--text-3);transition:all .18s}
.pas-sw[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.pas-sw[aria-pressed="true"] .pas-dot{left:22px;background:#fff}
.pas-tip{font-size:11px;color:var(--text-3);text-align:center}

/* 隐藏 C区 内的用户信息 / 欢迎行 / 退出本局栏 / 大厅自带榜单（A区已呈现账号与难度） */
.game-mode .stats-card{display:none}
.game-mode .account-line{display:none}
.game-mode .gamebar{display:none}
/* 计时条（数织等逻辑谜题页）：棋盘顶部显示 ⏱ 用时（选难度开局即计时） */
.game-mode .board-wrap .gamebar{display:flex}
.game-mode .lobby-rank{display:none}

/* ============================================================
   A区「选择难度」统一：所有数谜（数织/数独/变形数独）严格一致
   数织为基准样式：.pills > .pill —— 竖排、全宽、居中、圆角药丸
   （不改动各页原有 class，避免破坏事件绑定；仅在 A 区视觉统一）
   ============================================================ */
.game-ab .dp-pills .pills,
.game-ab .dp-pills .lobby-pills,
.game-ab .dp-challenge .lobby-challenge-grid{
  display:flex !important;flex-direction:column;gap:8px;
}
.game-ab .dp-pills .pill,
.game-ab .dp-pills .lobby-pill,
.game-ab .dp-challenge .lobby-chal{
  width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;
  text-align:center;gap:4px;padding:10px;border-radius:999px;
  background:var(--surface-3);border:none;
  font-size:14px;font-weight:400;color:var(--text-2);
  transition:background .2s,color .2s;
}
.game-ab .dp-pills .pill:hover,
.game-ab .dp-pills .lobby-pill:hover,
.game-ab .dp-challenge .lobby-chal:hover{background:#243049;color:var(--text)}
.game-ab .dp-pills .pill.active,
.game-ab .dp-pills .lobby-pill.active,
.game-ab .dp-challenge .lobby-chal.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:none}
/* 挑战药丸只保留名称（隐藏图标外的说明与角标），与数织一致 */
.game-ab .dp-challenge .lc-icon,
.game-ab .dp-challenge .lc-desc,
.game-ab .dp-challenge .lc-badge{display:none}
.game-ab .dp-challenge .lc-top{gap:0}
.game-ab .dp-challenge .lc-name{font-size:14px;font-weight:400;color:inherit}
.game-ab .dp-challenge .lobby-chal.active .lc-name{color:#fff;font-weight:600}

/* ============================================================
   数独页精简（按需求）：
   ① 移除棋盘左/上行列序号 —— 同时把序号列/行宽高归零，
      使 .board-wrap 恰为 540px，与变体覆盖层 viewBox(0 0 540 540) 1:1 对齐
      （修复杀手笼虚线框/锯齿区域与格子错位）
   ② 移除棋盘下方 1-9 数字键盘
   ③ 移除右侧「进度」卡片
   ④ 移除手动「笔记模式」开关卡（已改为自动笔记）
   ============================================================ */
.game-mode .board-wrap:has(.sudoku-board){grid-template-columns:0 var(--b);grid-template-rows:0 var(--b)}
.game-mode .row-labels,
.game-mode .col-labels,
.game-mode .board-corner,
.game-mode .num-pad,
.game-mode .progress-card{display:none!important}

/* 外提示数独：四周标签区显示外提示线索（上/下/左/右一圈），其余数独仍隐藏序号 */
body.variant-outside .game-mode .board-wrap{max-width:calc(700px + 104px);--b:min(700px,calc(100vw - 104px - 32px))}
body.variant-outside .game-mode .board-wrap:has(.sudoku-board){grid-template-columns:52px var(--b) 52px;grid-template-rows:30px var(--b) 30px}
body.variant-outside .game-mode .board-corner,
body.variant-outside .game-mode .col-labels,
body.variant-outside .game-mode .row-labels,
body.variant-outside .game-mode .bottom-labels,
body.variant-outside .game-mode .right-labels,
body.variant-outside .game-mode .corner-tr,
body.variant-outside .game-mode .corner-bl,
body.variant-outside .game-mode .corner-br{display:grid!important}
/* 3×3 放置：上排(角,上,角) / 中排(左,盘,右) / 下排(角,下,角) */
body.variant-outside .game-mode .col-labels{grid-column:2;grid-row:1;grid-template-columns:repeat(9,1fr)}
body.variant-outside .game-mode .corner-tr{grid-column:3;grid-row:1}
body.variant-outside .game-mode .row-labels{grid-column:1;grid-row:2;grid-template-rows:repeat(9,1fr)}
body.variant-outside .game-mode .sudoku-board{grid-column:2;grid-row:2}
body.variant-outside .game-mode .right-labels{grid-column:3;grid-row:2;grid-template-rows:repeat(9,1fr)}
body.variant-outside .game-mode .corner-bl{grid-column:1;grid-row:3}
body.variant-outside .game-mode .bottom-labels{grid-column:2;grid-row:3;grid-template-columns:repeat(9,1fr)}
body.variant-outside .game-mode .corner-br{grid-column:3;grid-row:3}
body.variant-outside .game-mode .col-labels span,
body.variant-outside .game-mode .row-labels span,
body.variant-outside .game-mode .bottom-labels span,
body.variant-outside .game-mode .right-labels span{font-size:9.5px;color:#FBBF24;font-weight:600;padding:0 2px;white-space:nowrap;font-family:var(--mono);align-items:center;justify-content:center}

/* ===== 统一通关祝贺条（数独/数谜通用，显示在棋盘正上方）===== */
.wb-bar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% + 12px);z-index:30;
  display:flex;align-items:center;gap:16px;white-space:nowrap;
  padding:12px 20px;border-radius:14px;
  background:linear-gradient(135deg,#123a24,#0e2b19);
  border:1px solid #2f7d4f;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.55);
  animation:wb-in .25s ease-out;
}
@keyframes wb-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.wb-msg{font-size:15px;font-weight:600;color:#DFF7E6}
.wb-msg b{font-family:var(--mono);font-size:17px;color:#7CF3A6}
.wb-actions{display:flex;gap:10px}
.wb-actions .btn{padding:8px 16px;font-size:13px;border-radius:9px}

/* 锯齿数独：白底黑字，9 个锯齿宫实色区分（颜色由 common.js 写在格子元素上） */
body.variant-jigsaw .cell{color:#111827;background:#fff}
body.variant-jigsaw .cell.given{color:#111827;font-weight:700}
body.variant-jigsaw .cell .notes{color:#374151}

/* 笔记模式：选中格显示红色虚线框。
   线宽 1px、offset -1px → 虚线只占格子最外 1px，紧贴格线内沿，不挤占候选数区域（候选数从 1px 起）。 */
.cell.nm-on{outline:1px dashed #EF4444;outline-offset:-1px;box-shadow:inset 0 0 0 1px rgba(239,68,68,.18)}
/* 笔记模式：选中格只保留一条 1px 红虚线（不再叠加橙色实线环，避免双框打架） */
.cell.nm-on.selected{box-shadow:none}

/* ============================================================
   全数独统一浅色配色（含所有变形数独）：
   浅色底 · 预填数字黑色加粗 · 玩家数字亮蓝色 · 统一琥珀高亮
   （点击杀手笼/行列表宫均用 #FFD966 提示色；锯齿数独只保留区域色+选中框）
   ============================================================ */
.game-mode .sudoku-board{
  background:#FDFDFD;
  border:3px solid #1F2937;
  box-shadow:0 0 0 1px #9CA3AF,0 8px 32px rgba(0,0,0,.28);
}
.game-mode .sudoku-board .cell{
  background:#FFFFFF;color:#111827;
  border-right:1.5px solid #D1D5DB;border-bottom:1.5px solid #D1D5DB;
}
.game-mode .sudoku-board .cell.br{border-right:3px solid #1F2937}
.game-mode .sudoku-board .cell.bb{border-bottom:3px solid #1F2937}
.game-mode .sudoku-board .cell.given{background:transparent;color:#111827;font-weight:700}
.game-mode .sudoku-board .cell.user{color:#1A73E8;font-weight:600}
.game-mode .sudoku-board .cell.hint{color:#059669;font-weight:600}
.game-mode .sudoku-board .cell.peer{background:#FFD966}
.game-mode .sudoku-board .cell.same{background:#FFD966}
.game-mode .sudoku-board .cell.peer.same{background:#FFD966}
/* 选中格：黄底 + 1px 细环贴格子内沿（高倍缩放下也不显粗，不压候选数） */
.game-mode .sudoku-board .cell.selected{background:#FFE9A8;box-shadow:inset 0 0 0 1px #D97706}
.game-mode .sudoku-board .cell.error{color:#DC2626;background:transparent}
.game-mode .sudoku-board .cell.error.selected{background:#FFE0DE}
/* 笔记模式：盖掉上面的橙色实线环，只留一条 1px 红虚线 */
.game-mode .sudoku-board .cell.nm-on.selected{box-shadow:none}
.game-mode .sudoku-board .notes{color:#6B7280}
.game-mode .sudoku-board .col-labels span,.game-mode .sudoku-board .row-labels span{color:#6B7280}
/* 杀手笼点击高亮（整笼变色，覆盖 given/user 背景） */
.game-mode .sudoku-board .cell.cage-hl{background:#FFD966!important}
/* 杀手数独：候选铅笔数字整体右下偏移，为左上角「笼和」让出空间，避免与提示数重叠 */
/* 杀手数独候选数内边距：上/左留足空间避让笼和数标签（SVG 覆盖层画在左上角），
   下/右同样留出余量，避免下排(7/8/9)与右列(3/6/9)候选数贴死格边被笼虚线穿过。
   原为 padding:15px 1px 1px 16px（右下仅 1px，虚线一收紧就压到候选数）。 */
body.variant-killer .notes{padding:15px 6px 6px 16px;font-size:10px}

/* ===== 蜂巢数独（61 格六边形） ===== */
/* 关键：.board-wrap 是 inline-grid(24px 标签列 + 540px 棋盘列)，
   蜂巢页没有行列标签，若不跨格会掉进 24px×24px 的角格里变成"蚂蚁盘"。
   这里让棋盘横跨两列、纵跨两行，得到完整 564px 宽度。 */
.board-wrap .hex-board { grid-column: 1 / -1; grid-row: 1 / span 2; }
.board-wrap .hex-legend { grid-column: 1 / -1; grid-row: 3; }
.hex-board { position: relative; width: 540px; max-width: 100%; margin: 0 auto; user-select: none; }
.hex-board svg.hex-svg { display: block; width: 100%; height: auto; }
.hex-cell { fill: #FFFFFF; stroke: #C9CFDB; stroke-width: 1.5; cursor: pointer; transition: fill .08s; }
.hex-cell.given { fill: #F1F3F7; }
.hex-cell.peer { fill: #FFF4C2; }
.hex-cell.same { fill: #FFE9A8; }
.hex-cell.sel { fill: #FFD966; stroke: #1A73E8; stroke-width: 1.2; }
.hex-cell.nm-on { stroke: #EF4444; stroke-width: 1; stroke-dasharray: 3 2.5; }
.hex-num { font-family: 'Noto Sans SC', sans-serif; font-size: 26px; font-weight: 700; fill: #111827; pointer-events: none; }
.hex-num.user { fill: #1A73E8; }
.hex-num.hint { fill: #7C3AED; }
.hex-num.err { fill: #DC2626; }
.hex-notes text { fill: #94A3B8; font-weight: 600; pointer-events: none; }
.hex-legend { display: flex; justify-content: space-between; max-width: 540px; margin: 8px auto 0; font-size: 12px; color: var(--text-3, #8A93A6); }

/* 三栏外壳内棋盘尺寸：左右栏定宽后，把中间剩余宽度全给棋盘（不再有 280px 控制列） */
.game-ab.game-mode .board-wrap{--b:clamp(280px, min(calc(100vw - 470px), calc(100vh - 264px)), 760px)}
/* 棋盘宽度跟随 --b，格子字号同比缩放，避免大棋盘配小字 */
.game-mode .sudoku-board{width:100%}
.game-mode .sudoku-board .cell{font-size:calc(var(--b,540px) * 0.0556)}
.game-mode .sudoku-board .notes{font-size:calc(var(--b,540px) * 0.0204)}
body.variant-outside .game-ab.game-mode .board-wrap{--b:clamp(220px, min(calc(100vw - 574px), calc(100vh - 320px)), 700px)}

/* ===== 备案号（工信部要求：网站底部展示并链接至 beian.miit.gov.cn） ===== */
.beian{color:var(--text-3);text-decoration:none;white-space:nowrap}
.beian:hover{color:var(--accent);text-decoration:underline}
.footer-bottom{flex-wrap:wrap;gap:8px 18px}
.site-beian{text-align:center;padding:16px 16px 28px;font-size:12px;color:var(--text-3);line-height:1.8}
.site-beian a{color:var(--text-3);text-decoration:none}
.site-beian a:hover{color:var(--accent);text-decoration:underline}

/* ============================================================
   首页「数谜大集合」拆成两块：数谜（大卡）+ 数独（紧凑小卡，一行 7 个）
   目的：所有数独 / 数谜游戏一屏览尽，点一下直达该游戏（不再先进大厅二次跳转）
   ============================================================ */
.games-sub{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.sudoku-grid{grid-template-columns:repeat(7,1fr);gap:10px}
.sudoku-grid .game-card{padding:8px 8px 10px;border-radius:12px;gap:6px}
.sudoku-grid .thumb{height:66px;border-radius:8px}
.sudoku-grid .game-card h3{font-size:12.5px;font-weight:600}
.sudoku-grid .game-card .meta{font-size:11px}
@media(max-width:1280px){.sudoku-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1100px){.sudoku-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.sudoku-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.sudoku-grid{grid-template-columns:repeat(2,1fr)}}
/* 子分区标题条：「数谜 · 7 款」/「数独 · 14 款」 */
.games-sub{display:flex;align-items:baseline;gap:10px;margin:26px 0 14px;flex-wrap:wrap;padding-top:0;border-top:0}
.games-sub.first{margin-top:20px}
.games-sub .sub-pill{display:inline-flex;align-items:center;font-size:15px;font-weight:700;color:var(--text)}
.games-sub .sub-pill::before{content:'';width:3px;height:15px;border-radius:2px;background:var(--accent);margin-right:8px}
.games-sub .sub-note{font-size:12.5px;color:var(--text-3);line-height:1.6}