:root{
  --bg:#F5EFE0;
  --cream:#FAF3E0;
  --panel:#fff;
  --primary:#8D6E63;
  --dark:#3E2723;
  --text:#5D4037;
  --muted:#9E9E9E;
  --line:#EFEBE9;
  --gold:#FFD54F;
  --red:#E53935;
  --blue:#1E88E5;
  --green:#43A047;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Header ---------- */
.site-header{
  height:calc(56px + var(--safe-t));
  background:#fff;border-bottom:1px solid rgba(0,0,0,.05);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 16px calc((56px - 32px) / 2);
  position:sticky;top:0;z-index:30;
  flex-shrink: 0;
}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand-name{font-size:18px;font-weight:600;color:var(--dark)}
.nav-desktop{display:none;gap:24px;font-size:14px;color:var(--muted)}
.nav-desktop a:hover{color:var(--primary)}
.sound-pill{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;background:var(--bg);color:var(--text);font-size:12px}
.switch{width:28px;height:16px;border-radius:999px;background:var(--primary);padding:2px;display:flex;align-items:center;transition:background .2s}
.switch[data-on="false"]{background:#cfc4bd}
.switch-knob{width:12px;height:12px;border-radius:50%;background:#fff;margin-left:auto;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:margin .2s}
.switch[data-on="false"] .switch-knob{margin-left:0}

/* ---------- Game screen ---------- */
.game-screen{
  display:flex;flex-direction:column;
  height:100dvh;
  box-sizing:border-box;
  margin-top:calc(-56px - var(--safe-t));
  padding:calc(56px + var(--safe-t)) 0 calc(64px + var(--safe-b)) 0;
  overflow:hidden;
}
.mobile-status{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 0}
.ms-side{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
.ms-turn{padding:4px 12px;border-radius:999px;background:#FFF8E1;color:var(--primary);font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-red{background:var(--red)}.dot-blue{background:var(--blue)}

.board-wrap{display:flex;flex-direction:column;gap:16px;padding:16px;flex:1;min-height:0}
.board-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-height:0}
.board-info-desktop{display:none;align-items:center;justify-content:space-between;width:100%;padding:0 8px}
.bi{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}
.bi-turn{padding:4px 12px;border-radius:999px;background:#FFF8E1;color:var(--primary);font-size:12px}
.canvas-holder{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}
#board{max-width:100%;max-height:100%;touch-action:manipulation;border-radius:16px;background:var(--cream)}
.board-legend{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace;text-align:center}

/* side panel (desktop only) */
.side-panel{display:none;width:300px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:24px 20px;flex-direction:column;gap:20px;overflow:hidden}
.sp-block{flex-shrink:0}
.sp-label{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:600;letter-spacing:0.02em}
.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:10px;background:var(--bg)}
#mode{grid-template-columns:repeat(2,1fr)}
.diff-btn{padding:7px 0;border-radius:8px;font-size:13px;color:var(--text);transition:.15s;font-weight:500}
.diff-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 4px rgba(141,110,99,0.3)}

.count-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.count-card{border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03)}
.count-red{background:#FFF1F0}.count-blue{background:#E3F2FD}
.piece-dot{width:16px;height:16px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.piece-red{background:radial-gradient(circle at 30% 30%,#FF8A80,#B71C1C)}
.piece-blue{background:radial-gradient(circle at 30% 30%,#82B1FF,#0D47A1)}
.cc-v{font-family:ui-monospace,monospace;font-size:20px;font-weight:700}
.count-red .cc-v{color:var(--red)}.count-blue .cc-v{color:var(--blue)}

.action-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
.action-list .act[data-action="new"]{grid-column: span 2}
.act{height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1.5px solid #E0D6C8;color:var(--text);font-size:14px;transition:.2s;font-weight:500}
.act svg{width:16px;height:16px}
.act:hover:not(:disabled){border-color:var(--primary);background:#FAF8F6;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.05)}
.act-primary{background:var(--primary);color:#fff;border:none}
.act-primary:hover:not(:disabled){background:#7a5d52;box-shadow:0 4px 12px rgba(141,110,99,0.3)}
.act:active:not(:disabled){transform:translateY(0)}
.act:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(0.5)}

/* Tabbed block in sidebar */
.tabbed-block{display:flex;flex-direction:column;min-height:0;flex:1;margin-top:4px}
.sp-tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:10px;margin-bottom:12px}
.tab-btn{flex:1;padding:7px 0;font-size:13px;color:var(--muted);border-radius:7px;transition:.15s;font-weight:500}
.tab-btn.active{background:#fff;color:var(--primary);box-shadow:0 2px 5px rgba(0,0,0,0.08)}
.tab-pane{display:none;flex-direction:column;min-height:0;flex:1}
.tab-pane.active{display:flex}

.sp-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.sound-setting-row{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;cursor:pointer;user-select:none}
.ss-left{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text)}
.switch-mini{width:36px;height:20px;border-radius:999px;background:var(--primary);padding:2px;display:flex;align-items:center;transition:background .2s;flex-shrink:0}
.switch-mini[data-on="false"]{background:#cfc4bd}
.switch-knob-mini{width:16px;height:16px;border-radius:50%;background:#fff;margin-left:auto;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:margin .2s}
.switch-mini[data-on="false"] .switch-knob-mini{margin-left:0}

.mini-guide{padding:4px 0;display:flex;flex-direction:column;gap:8px}
.guide-item{font-size:13px;color:var(--text);line-height:1.4}
.guide-item strong{color:var(--primary)}
.guide-more{font-size:12px;color:var(--primary);margin-top:4px;text-align:right}

.move-log{border:1px solid var(--line);border-radius:10px;overflow:hidden;font-family:ui-monospace,monospace;font-size:13px;display:flex;flex-direction:column;min-height:0;flex:1}
.move-head{display:grid;grid-template-columns:28px 1fr 1fr;padding:8px 10px;background:var(--bg);color:var(--primary);flex-shrink:0}
.move-body{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.move-body li{display:grid;grid-template-columns:28px 1fr 1fr;padding:7px 10px;border-top:1px solid var(--line);color:var(--text)}
.move-body li .ai{color:var(--blue)}
.move-body li.replay-active{background:#FFF8E1}

.records{list-style:none;margin:0;padding:0;font-size:13px}
.records li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);color:var(--text)}
.records .win{color:var(--green);font-weight:600}
.records .lose{color:var(--red);font-weight:600}
.records .empty{color:var(--muted);text-align:center;padding:8px 0}

/* mobile action row */
.mobile-actions{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.mobile-actions::-webkit-scrollbar{display:none}
.mobile-actions .act{height:40px;padding:0 16px;font-size:14px;flex-shrink:0}

/* ad slot — visibility purely via CSS :not(:empty) */
.ad-wrap{display:none}
.ad-wrap:has(#adSlot:not(:empty)){display:block;padding:0 16px;flex-shrink:0}
#adSlot{display:flex;align-items:center;justify-content:center;height:60px;
  /* border-radius:10px;background:#F0EBE0;border:1px dashed #BCAAA4 */
}
.ad-ph{font-size:13px;color:var(--muted)}

/* TabBar */
.tabbar{
  order:999;
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  height:calc(64px + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:stretch;justify-content:space-around;
}
/* 修复移动端浏览器 UI 切换时的底部间隙 */
.tabbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100px;
  background: #fff;
}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;font-size:12px;color:var(--muted)}
.tab.active{color:var(--primary)}

/* ---------- Content sections ---------- */
.section{width:100%;margin:0;padding:0 0 32px}
.section-padding{padding-left:16px;padding-right:16px}
.card{background:#fff;border-radius:0;box-shadow:none;padding:32px 16px;border-bottom:1px solid var(--line)}
.card-h{padding-bottom:16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text);font-weight:600;margin-bottom:16px}
.tut-grid,.feat-grid,.qa-grid,.faq-grid,.about-card,.more-grid,.cta,.sec-title{margin-left:0;margin-right:0}
.tut-grid,.feat-grid{display:grid;grid-template-columns:1fr;gap:16px}
.tut-thumb{height:120px;border-radius:12px;background:#FAF3E0;border:1px solid #EFE3C8;display:none;align-items:center;justify-content:center;font-size:12px;color:var(--muted);margin-bottom:12px;overflow:hidden}
.tut-thumb img{width:100%;height:100%;object-fit:cover}
.tut-item h3{font-size:16px;color:var(--text);margin-bottom:8px}
.tut-item p{font-size:14px;color:#666;margin:0}

.sec-title{margin-bottom:16px}
.sec-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary)}
.sec-title h2{font-size:20px;color:var(--dark);font-weight:700}
.sec-title p{font-size:14px;color:var(--muted);margin:4px 0 0}

.about-card{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;background:#FFF8E1;color:var(--primary);font-size:12px;margin-bottom:12px}
.about-h{font-size:22px;font-weight:700;color:var(--dark);line-height:1.35}
.about-card p{font-size:14px;color:var(--text);margin:12px 0 0}
.about-card strong{color:var(--dark)}
.tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:4px 12px;border-radius:999px;background:var(--bg);color:var(--text);font-size:12px}
.spec-card{border-radius:12px;padding:20px;background:#FAF3E0}
.spec-h{font-size:12px;color:var(--primary);margin-bottom:8px}
.spec-row{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #EFE3C8;padding:8px 0}
.spec-row span{font-size:14px;color:var(--text)}
.spec-row b{font-family:ui-monospace,monospace;font-size:20px}

.qa-grid{display:grid;grid-template-columns:1fr;gap:12px}
.qa{border-radius:12px;padding:16px;background:#FAF3E0}
.qa h3{font-size:15px;color:var(--dark);font-weight:600;line-height:1.4}
.qa p{font-size:14px;color:var(--text);margin:8px 0 0}

.feat{
  border-radius:16px;padding:20px;background:#fff;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 16px;
}
.feat-ic{width:44px;height:44px;border-radius:12px;background:#FFF8E1;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.feat h3{font-size:16px;color:var(--dark);margin:0}
.feat p{font-size:14px;color:var(--text);margin:12px 0 0;grid-column:1/-1}

.faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
.faq-grid details{border-radius:12px;background:#FAF3E0;overflow:hidden;transition:background .2s}
.faq-grid details[open]{background:#FFF8E1}
.faq-grid summary{padding:14px 16px;cursor:pointer;color:var(--dark);font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-q{display:flex;align-items:center;gap:12px}
.faq-n{width:24px;height:24px;border-radius:6px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-family:ui-monospace,monospace;flex-shrink:0}
.faq-t{line-height:1.4}
.faq-arrow{color:var(--muted);transition:transform .3s ease;flex-shrink:0}
.faq-grid details[open] .faq-arrow{transform:rotate(180deg);color:var(--primary)}
.faq-grid p{padding:0 16px 16px 52px;font-size:14px;color:var(--text);margin:0;line-height:1.6}

.more-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.more-h{font-size:18px;color:var(--dark);font-weight:700}
.more-link{display:none;font-size:14px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.more-item{border-radius:12px;padding:12px;background:#FAF3E0;display:flex;align-items:center;gap:8px}
.mi-ic{width:36px;height:36px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.mi-ic img{width:24px;height:24px;object-fit:contain}
.mi-t{font-size:14px;color:var(--dark);font-weight:600}
.mi-d{font-size:12px;color:var(--muted)}

.cta{border-radius:16px;padding:24px;background:linear-gradient(135deg,#FFD54F 0%,#FFB300 100%);display:flex;flex-direction:column;gap:16px}
.cta-h{font-size:20px;font-weight:700;color:var(--dark);margin:0}
.cta-sub{font-size:14px;color:var(--text);margin:8px 0 0}
.cta-btn{background:var(--dark);color:#fff;font-size:16px;font-weight:600;padding:12px 24px;border-radius:12px;text-align:center}

.site-footer{padding:16px;text-align:center;background:var(--bg);border-top:1px solid #E0D6C8;padding-bottom:calc(16px + 64px + var(--safe-b))}
.ft-main{font-size:12px;color:var(--text)}
.ft-sub{font-size:12px;color:var(--muted);margin-top:4px}

/* result overlay */
.result-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.result-overlay[hidden]{display:none}
.result-box{background:#fff;border-radius:16px;padding:28px;text-align:center;max-width:320px;width:100%}
.result-title{font-size:22px;font-weight:700;color:var(--dark)}
.result-desc{font-size:14px;color:var(--text);margin:8px 0 20px}

.toast{position:fixed;left:50%;bottom:calc(80px + var(--safe-b));transform:translateX(-50%);background:rgba(62,39,35,.92);color:#fff;font-size:13px;padding:8px 16px;border-radius:999px;z-index:60}
.toast[hidden]{display:none}

.back-to-top{
  position:fixed;right:20px;bottom:calc(80px + var(--safe-b));
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--primary);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  z-index:45;transition:.3s;
  cursor:pointer;border:1px solid var(--line);
}
.back-to-top[hidden]{display:none}
.back-to-top:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.back-to-top:active{transform:translateY(0)}

/* ---------- Desktop ---------- */
@media (min-width:1024px){
  html, body { height: auto; min-height: 100dvh; overflow: visible; }
  
  .app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .site-header{
    height:56px;
    padding:0 32px;
    display:flex;
    align-items:center;
  }
  .nav-desktop{display:flex}
  .sound-pill{display:none}
  .game-screen{
    height:100dvh;
    display:flex;
    flex-direction:column;
    margin-top:calc(-56px - var(--safe-t));
    padding:calc(56px + var(--safe-t) + 16px) 0 16px 0;
    gap:12px;
    flex: 1;
    min-height:0;
    overflow:hidden;
  }
  .mobile-status{display:none}
  .board-wrap{
    display:flex;
    flex-direction:row;
    gap:24px;
    padding:0 32px;
    width:100%;
    flex:1;
    min-height:0;
  }
  .board-card{padding:20px;flex:1.4;min-height:0}
  .board-info-desktop{display:flex}
  .side-panel{display:flex;width:320px;flex-shrink:0}
  .mobile-actions{display:none}
  .ad-wrap:has(#adSlot:not(:empty)){display:block;width:100%;padding:0 32px;flex-shrink:0;margin-top:auto}
  .tabbar{display:none}
  .section{padding:0 0 40px}
  .card{padding:32px 32px}
  .tut-grid{grid-template-columns:repeat(3,1fr)}
  .tut-thumb{display:flex}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .feat{display:block;padding:24px}
  .feat-ic{margin-bottom:16px}
  .feat h3{margin-bottom:8px}
  .feat p{margin-top:8px}
  .qa-grid,.faq-grid{grid-template-columns:1fr 1fr}
  .about-card{grid-template-columns:1.2fr 1fr;gap:32px}
  .about-h{font-size:30px}
  .sec-title h2{font-size:26px}
  .more-grid{grid-template-columns:repeat(4,1fr)}
  .more-link{display:inline}
  .cta{flex-direction:row;align-items:center;justify-content:space-between}
  .cta-btn{width:auto}
  .site-footer{padding:16px 32px}
  .section-padding{padding-left:32px;padding-right:32px}
}