:root{
  --acc:#fd8e32;            /* AcFun warm orange */
  --acc-2:#f5a623;
  --acc-soft:#fff4e6;
  --ink:#1f2329;
  --muted:#6b7280;
  --line:#e7e9ee;
  --bg:#f6f7f9;
  --ok:#1aab5a;
  --bad:#e5484d;
  --skip:#8b95a5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.btn-warning{--bs-btn-bg:var(--acc);--bs-btn-border-color:var(--acc);--bs-btn-hover-bg:#ec7d1c;--bs-btn-hover-border-color:#ec7d1c;--bs-btn-active-bg:#ec7d1c;--bs-btn-disabled-bg:var(--acc);--bs-btn-disabled-border-color:var(--acc)}
.text-warning{color:var(--acc)!important}

/* ---- screens ---- */
.screen{display:none}
.screen.active{display:block}

/* ---- menu ---- */
.brand-badge{
  width:64px;height:64px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;font-size:30px;
  box-shadow:0 8px 22px rgba(253,142,50,.35);
}
.menu-card{border-radius:18px}
.range-options{display:flex;flex-direction:column;gap:10px}
.range-opt{
  display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;transition:.15s;margin:0;background:#fff;
}
.range-opt:hover{border-color:var(--acc)}
.range-opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.range-opt .form-check-input{margin-top:3px;flex:0 0 auto}
.range-opt .form-check-input:checked{background-color:var(--acc);border-color:var(--acc)}
.range-opt-body{line-height:1.35}
.threshold-group{width:auto;max-width:170px;vertical-align:middle}
.threshold-group .form-control{max-width:110px}
.preset-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:2px 12px;font-size:.8rem;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.pool-info{background:var(--acc-soft);border-radius:10px;padding:10px 14px}

/* ---- question count selector ---- */
.count-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.count-chip{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 4px;font-weight:600;font-size:.92rem;color:var(--ink);cursor:pointer;transition:.15s}
.count-chip:hover{border-color:var(--acc);color:var(--acc)}
.count-chip.active{border-color:var(--acc);background:var(--acc);color:#fff}

/* ---- loader ---- */
.loader-overlay{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .35s ease}
.loader-overlay.hidden{opacity:0;pointer-events:none}
.loader-box{text-align:center;width:min(86vw,360px)}
.loader-title{font-size:1.4rem;font-weight:800;margin-bottom:4px}
.loader-sub{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.loader-progress{height:10px;background:#e9ecef;border-radius:999px;overflow:hidden}
.loader-bar2{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc-2));border-radius:999px;transition:width .15s ease}
.loader-pct{margin-top:8px;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.loader-overlay.indeterminate .loader-bar2{width:40%;animation:indet 1.1s ease-in-out infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.03)}
.stat-row{display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:nowrap;overflow-x:auto}
.stat{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.95rem;white-space:nowrap;color:var(--ink)}
.stat i{font-size:.9rem;color:var(--muted)}
.stat.ok i{color:var(--ok)} .stat.ok span{color:var(--ok)}
.stat.bad i{color:var(--bad)} .stat.bad span{color:var(--bad)}
.stat.skip i{color:var(--skip)}
.stat.acc i{color:var(--acc)} .stat.acc span{color:var(--acc)}
.quit-btn{border-radius:8px}

/* ---- game main ---- */
.game-main{padding-top:16px;padding-bottom:28px;max-width:640px}

/* ---- board ---- */
.board-wrap{display:flex;justify-content:center;margin-bottom:18px}
.board{
  width:min(96vw,560px);
  display:grid;
  grid-template-columns:repeat(var(--n,5),1fr);
  grid-auto-rows:1fr;
  gap:2px;
  aspect-ratio:1/1;
}
.cell{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:3px;overflow:hidden;line-height:1.18;
  font-size:clamp(.62rem,3.2vw,.95rem);
  word-break:break-word;hyphens:auto;
  color:#2b2f36;
}
.board[style*="--n:5"] .cell{font-size:clamp(.62rem,3.3vw,.95rem)}
.board[style*="--n:4"] .cell{font-size:clamp(.78rem,4vw,1.2rem)}
.board[style*="--n:3"] .cell{font-size:clamp(1rem,5vw,1.55rem)}
.cell .ctext{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cell:nth-child(odd){background:#fffdfa}

/* ---- answer zone ---- */
.answer-zone{max-width:560px;margin:0 auto;width:100%}
#guess-input{font-size:1rem}
.ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:300px;overflow-y:auto;
}
.ac-item{padding:9px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ac-item .ac-name{font-weight:500}
.ac-item .ac-uid{font-size:.78rem;color:var(--muted);white-space:nowrap}
.ac-item.active,.ac-item:hover{background:var(--acc-soft)}
.ac-item .ac-name mark{background:transparent;color:var(--acc);padding:0;font-weight:700}
.ac-item.special{color:var(--acc);font-weight:600}
.hint-msg{margin-top:12px;text-align:center;font-size:.9rem;color:var(--bad)}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(20,22,28,.5);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}
.result-card{background:#fff;border-radius:18px;width:100%;max-width:420px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:pop .22s ease}
@keyframes pop{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.result-head{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.25rem;font-weight:700;margin-bottom:14px}
.result-head i{font-size:1.5rem}
.result-head.ok{color:var(--ok)} .result-head.bad{color:var(--bad)}
.result-body{text-align:center;margin-bottom:18px}
.answer-name{font-size:1.5rem;font-weight:800;margin-bottom:8px;word-break:break-word}
.answer-meta{color:var(--ink);font-size:.92rem;margin-bottom:12px}
.answer-link{display:inline-block;color:var(--acc);text-decoration:none;font-weight:600;font-size:.9rem}
.answer-link:hover{text-decoration:underline}
.your-guess{margin-top:12px;padding:10px;border-radius:10px;background:var(--acc-soft);font-size:.9rem;color:var(--muted)}
.your-guess b{color:var(--bad)}
.end-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.end-item{background:var(--bg);border-radius:12px;padding:14px;text-align:center}
.end-num{font-size:1.8rem;font-weight:800;line-height:1}
.end-lbl{font-size:.82rem;color:var(--muted);margin-top:4px}

/* ---- book button + modal ---- */
.book-btn{--bs-btn-color:var(--acc);--bs-btn-border-color:var(--acc);--bs-btn-bg:#fff;--bs-btn-hover-bg:var(--acc);--bs-btn-hover-border-color:var(--acc);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--acc);--bs-btn-active-color:#fff;border:1px solid var(--acc)}
.book-card{max-width:460px;max-height:82vh;display:flex;flex-direction:column;padding:18px 18px 14px}
.book-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.05rem;margin-bottom:4px}
.btn-close-x{border:none;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer;width:32px;height:32px;border-radius:8px;flex:0 0 auto}
.btn-close-x:hover{background:var(--bg);color:var(--ink)}
.book-hint{font-size:.82rem;color:var(--muted);margin-bottom:10px}
.book-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.book-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.book-item:hover{background:var(--acc-soft);border-color:var(--acc)}
.book-item .b-name{font-weight:500;word-break:break-word}
.book-item .b-uid{font-size:.78rem;color:var(--muted);white-space:nowrap}
.book-empty{text-align:center;color:var(--muted);padding:18px;font-size:.9rem}

@media (max-width:380px){
  .stat{font-size:.82rem;gap:4px}
  .stat-row{gap:7px}
}