:root{
  --bg1:#eafaf3; --bg2:#e3f2fd;
  --green:#22c55e; --green-d:#16a34a;
  --blue:#38bdf8; --blue-d:#0ea5e9;
  --sun:#fbbf24; --sun-d:#f59e0b;
  --pink:#fb7185; --purple:#a78bfa;
  --orange:#fb923c;
  --ink:#1f2937; --muted:#6b7280;
  --card:#ffffff; --line:#e5e7eb;
  --bad:#f97316;
  --shadow:0 10px 30px rgba(16,99,79,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:"Fredoka","ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior-y:none;
}
input{-webkit-user-select:auto;user-select:auto}

/* 顶部 */
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
}
.topbar .logo{font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d);white-space:nowrap}
.topbar .logo span{color:var(--blue-d)}
.stats{margin-left:auto;display:flex;gap:10px;align-items:center}
.chip{
  display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-weight:600;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.chip .ic{width:20px;height:20px;display:inline-block}
.chip.streak{color:var(--pink)}
.chip.voice{cursor:pointer;color:var(--green-d);transition:opacity .2s}
.chip.voice.off{opacity:.4;color:var(--muted)}
.chip.fs{cursor:pointer;color:var(--blue-d);transition:opacity .2s}
.chip.fs.on{color:var(--green-d)}
.chip.player{cursor:pointer;background:linear-gradient(135deg,#fce7f3,#dbeafe);color:var(--ink);font-weight:700;border:2px solid #c7d2fe;transition:all .2s}
.chip.player:active{transform:scale(.94)}
.chip.player .ic{font-size:18px;line-height:20px}

/* 沉浸模式（全屏回退） */
.immersive-exit{display:none;position:fixed;top:max(12px,env(safe-area-inset-top));right:14px;z-index:90;
  width:40px;height:40px;border-radius:50%;border:none;background:rgba(22,163,74,.92);color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.immersive-exit svg{width:20px;height:20px}
.immersive-exit:active{transform:scale(.9)}
body.immersive .topbar,body.immersive .tabbar{display:none}
body.immersive main{padding:8px 12px 12px;max-width:100%}
body.immersive .qcard{margin-bottom:8px}

main{max-width:860px;margin:0 auto;padding:18px 16px calc(110px + env(safe-area-inset-bottom))}
.view{display:none;animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 首页 hero */
.hero{
  background:linear-gradient(135deg,#34d399 0%,#38bdf8 100%);color:#fff;
  border-radius:26px;padding:24px 22px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:18px;margin-bottom:18px;position:relative;overflow:hidden
}
.hero .mascot{width:92px;height:92px;flex:0 0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
.hero h1{font-family:"ZCOOL KuaiLe";font-size:28px;margin:0 0 6px;letter-spacing:1px}
.hero p{margin:0;opacity:.95;font-size:15px}
.hero .bubble{position:absolute;right:16px;top:14px;font-size:13px;background:rgba(255,255,255,.25);padding:6px 12px;border-radius:999px}

/* 难度选择 */
.picker{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:10px 14px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.04);flex-wrap:wrap}
.picker .pl{font-weight:700;color:var(--muted);font-size:15px}
.seg{display:flex;gap:6px;background:#f1f5f9;border-radius:12px;padding:4px}
.seg button{border:none;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  color:var(--muted);padding:7px 16px;border-radius:9px;transition:all .15s}
.seg button.active{background:#fff;color:var(--green-d);box-shadow:0 2px 6px rgba(0,0,0,.1)}

.cat-title{font-family:"ZCOOL KuaiLe";font-size:20px;color:var(--ink);margin:16px 2px 10px;display:flex;align-items:center;gap:6px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.game-card{
  background:var(--card);border-radius:18px;padding:14px 10px;border:2px solid transparent;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center
}
.game-card .gc-icon{width:48px;height:48px;margin-bottom:6px}
.game-card .gc-name{font-size:14px;font-weight:700;margin-bottom:8px;line-height:1.2}
.gc-btns{display:flex;flex-direction:column;gap:6px;width:100%}
.gc-btns button{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  padding:7px 4px;border-radius:9px;transition:transform .1s,box-shadow .1s;color:#fff
}
.gc-btns .mb-practice{background:var(--green);box-shadow:0 3px 0 var(--green-d)}
.gc-btns .mb-challenge{background:var(--orange);box-shadow:0 3px 0 #c2410c}
.gc-btns .mb-task{background:var(--blue);box-shadow:0 3px 0 var(--blue-d)}
.gc-btns button:hover{transform:translateY(-2px)}
.gc-btns button:active{transform:translateY(2px);box-shadow:0 1px 0 currentColor}

.tip-box{margin-top:18px;background:#fff;border:1px dashed var(--line);border-radius:18px;padding:14px 18px;color:var(--muted);font-size:13px;line-height:1.7}
.tip-box b{color:var(--ink)}

/* 题目卡 */
.qcard{background:var(--card);border-radius:24px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.qtop{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.back-btn{border:none;background:#f1f5f9;width:34px;height:34px;border-radius:10px;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.back-btn:active{transform:scale(.9)}
.qtag{font-size:15px;color:var(--ink);font-weight:700;flex:1}
.ch-bar{display:none;align-items:center;gap:10px}
.ch-bar.show{display:flex}
.ch-time{font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d);background:#ecfdf5;
  border:2px solid #86efac;border-radius:12px;padding:2px 12px;min-width:62px;text-align:center}
.ch-time small{font-size:12px}
.ch-time.urgent{color:#fff;background:var(--bad);border-color:#ea580c;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ch-score{font-size:13px;color:var(--muted);font-weight:700}
.ch-score b{color:var(--green-d);font-size:18px}
.progress{font-size:13px;color:var(--muted);font-weight:600}

/* 算式 */
.equation{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.equation .num{font-family:"ZCOOL KuaiLe";font-size:52px;line-height:1;color:var(--ink)}
.equation .op{font-family:"ZCOOL KuaiLe";font-size:42px;color:var(--green-d)}
.equation .eq{font-family:"ZCOOL KuaiLe";font-size:42px;color:var(--muted)}
.equation .blank{width:90px;height:70px;border:3px dashed var(--blue);border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-family:"ZCOOL KuaiLe";font-size:44px;color:var(--blue-d);background:#f0f9ff}
.equation .blank.filled{border-style:solid;background:#ecfdf5;border-color:var(--green);color:var(--green-d)}

/* 通用提示 */
.hint{display:flex;align-items:center;justify-content:center;gap:8px;background:#ecfdf5;border:1px dashed #86efac;
  border-radius:14px;padding:10px 14px;margin:6px 0 4px;font-size:15px;color:#166534;font-weight:600}
.hint b{color:var(--green-d)}
.hint .arr{font-size:20px;animation:pointy 1s infinite}
@keyframes pointy{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 物件行 */
.objects{display:flex;flex-direction:column;gap:10px;margin:14px 0;align-items:center}
.obj-row{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:16px;
  padding:10px 12px;min-width:200px;justify-content:center;flex-wrap:wrap}
.obj-row .label{font-weight:700;color:var(--muted);min-width:30px;text-align:center;font-size:18px}
.obj{display:inline-block}

/* 凑十法 */
.mt-stage{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 4px}
.ten-target{position:relative;width:100%;max-width:440px;background:#f0fdf4;border:3px solid #86efac;border-radius:22px;
  padding:22px 12px 14px;box-shadow:0 6px 0 #bbf7d0;transition:all .3s}
.ten-target .ten-label{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;
  font-family:"ZCOOL KuaiLe";font-size:26px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 0 var(--green-d);border:3px solid #fff}
.ten-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;justify-items:center}
.slot{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6)}
.slot .obj{width:46px;height:46px}
.slot.empty{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#dcfce7 6px,#dcfce7 12px);border:2px dashed #86efac}
.slot.filling .obj{animation:hopin .4s ease}
@keyframes hopin{0%{transform:translateY(22px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.ten-target.complete{border-color:var(--green);background:#dcfce7;animation:glow 1.2s}
@keyframes glow{0%,100%{box-shadow:0 6px 0 #bbf7d0}50%{box-shadow:0 6px 0 #bbf7d0,0 0 26px var(--green)}}
.mt-arrow{font-size:28px;color:var(--green-d);line-height:1;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ten-source{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;background:#fff7ed;
  border:2px dashed #fdba74;border-radius:18px;padding:14px;min-height:74px;width:100%;max-width:440px}
.src-obj{cursor:pointer;transition:transform .15s,opacity .3s}
.src-obj:hover{transform:translateY(-4px) scale(1.08)}
.src-obj:active{transform:scale(.9)}
.src-obj .obj{width:50px;height:50px}
.src-obj.used{opacity:.18;pointer-events:none;transform:scale(.55)}
.ten-result{display:none;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  background:#fff;border:2px solid #cdeedf;border-radius:18px;padding:16px}
.ten-result.show{display:flex;animation:fade .4s}
.result-group{display:flex;flex-direction:column;align-items:center;gap:4px}
.result-group .rg-label{font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d)}
.result-group .rg-objs{display:flex;flex-wrap:wrap;gap:2px;max-width:130px;justify-content:center}
.result-group .rg-objs .obj{width:22px;height:22px}
.result-op{font-family:"ZCOOL KuaiLe";font-size:30px;color:var(--muted)}
.result-final{font-family:"ZCOOL KuaiLe";font-size:42px;color:#fff;background:var(--green);min-width:80px;height:80px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 var(--green-d)}

/* 选项大按钮 */
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.choices.col4{grid-template-columns:repeat(4,1fr)}
.choices.col3{grid-template-columns:repeat(3,1fr)}
.choice{font-family:"ZCOOL KuaiLe";font-size:36px;padding:16px 10px;border-radius:18px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f1f8f4);border:2px solid #cdeedf;color:var(--ink);
  box-shadow:0 4px 0 #cdeedf;transition:transform .08s,box-shadow .08s;user-select:none;display:flex;align-items:center;justify-content:center}
.choice:hover{transform:translateY(-2px);box-shadow:0 6px 0 #cdeedf}
.choice:active{transform:translateY(2px);box-shadow:0 2px 0 #cdeedf}
.choice.correct{background:linear-gradient(180deg,#bbf7d0,#86efac);border-color:#22c55e;box-shadow:0 4px 0 #16a34a;color:#14532d}
.choice.wrong{background:linear-gradient(180deg,#fed7aa,#fdba74);border-color:#fb923c;box-shadow:0 4px 0 #ea580c;color:#7c2d12;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.choice .tok{width:40px;height:40px}

/* 比大小 / 数卡 */
.cmp-prompt{display:flex;align-items:center;justify-content:center;gap:8px;font-family:"ZCOOL KuaiLe";font-size:22px;
  color:var(--ink);background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:10px;margin:8px 0}
.cmp-prompt .pic{width:34px;height:34px}
.cmp-cards{display:flex;gap:16px;justify-content:center;margin:14px 0}
.numcard{flex:1;max-width:200px;background:linear-gradient(180deg,#fff,#f0f9ff);border:3px solid #bae6fd;border-radius:22px;
  padding:16px 10px;cursor:pointer;box-shadow:0 6px 0 #bae6fd;transition:transform .12s,box-shadow .12s;text-align:center}
.numcard:hover{transform:translateY(-3px)}
.numcard:active{transform:translateY(3px);box-shadow:0 3px 0 #bae6fd}
.numcard .nc-num{font-family:"ZCOOL KuaiLe";font-size:54px;line-height:1;color:var(--blue-d)}
.numcard .nc-objs{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:8px;max-width:180px;margin-left:auto;margin-right:auto}
.numcard .nc-objs .obj{width:24px;height:24px}
.numcard.correct{background:linear-gradient(180deg,#bbf7d0,#86efac);border-color:#22c55e;box-shadow:0 6px 0 #16a34a}
.numcard.wrong{background:linear-gradient(180deg,#fed7aa,#fdba74);border-color:#fb923c;animation:shake .4s}

/* 找规律 */
.pattern-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.pat-item{width:60px;height:60px;background:#f8fafc;border:2px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center}
.pat-item .tok{width:42px;height:42px}
.pat-q{width:60px;height:60px;border:3px dashed var(--purple);border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-family:"ZCOOL KuaiLe";font-size:36px;color:var(--purple);background:#f5f3ff}
.pattern-choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.pat-choice{width:64px;height:64px;border-radius:14px;border:2px solid #cdeedf;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #cdeedf;transition:transform .1s}
.pat-choice:hover{transform:translateY(-2px)}
.pat-choice.correct{border-color:#22c55e;background:#dcfce7;box-shadow:0 4px 0 #16a34a}
.pat-choice.wrong{border-color:#fb923c;background:#fed7aa;animation:shake .4s}
.pat-choice .tok{width:44px;height:44px}

/* 相邻数 / 数线 */
.numline{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0;flex-wrap:wrap}
.nl-cell{width:78px;height:78px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-family:"ZCOOL KuaiLe";font-size:42px;background:#f0f9ff;border:2px solid #bae6fd;color:var(--blue-d)}
.nl-cell.q{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#ede9fe 6px,#ede9fe 12px);border:2px dashed var(--purple);color:var(--purple)}
.nl-arrow{font-size:26px;color:var(--muted)}

/* 数的拆分 */
.split-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:12px 0}
.split-group{background:#f8fafc;border:2px solid var(--line);border-radius:16px;padding:10px;min-width:120px;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.split-group .sg-label{font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d)}
.split-group .sg-objs{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:160px}
.split-group .sg-objs .obj{width:26px;height:26px}
.split-op{font-family:"ZCOOL KuaiLe";font-size:34px;color:var(--muted)}

/* 数图形 */
.shapes-stage{background:#f8fafc;border:2px solid var(--line);border-radius:18px;padding:16px;margin:12px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.shapes-stage .tok{width:54px;height:54px}
.cs-q{font-family:"ZCOOL KuaiLe";font-size:20px;color:var(--ink);text-align:center;margin:6px 0 10px}
.cs-q .tok{width:30px;height:30px;vertical-align:-7px}

/* 舒尔特方格 */
.schulte-info{display:flex;justify-content:center;gap:18px;margin:8px 0 14px;font-family:"ZCOOL KuaiLe"}
.schulte-info .si{background:#f0f9ff;border:2px solid #bae6fd;border-radius:12px;padding:6px 14px;font-size:20px;color:var(--blue-d)}
.schulte-info .si small{font-size:12px;color:var(--muted);font-family:inherit}
.schulte-grid{display:grid;gap:8px;max-width:380px;margin:0 auto}
.sch-cell{aspect-ratio:1;background:linear-gradient(180deg,#fff,#f1f8f4);border:2px solid #cdeedf;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-family:"ZCOOL KuaiLe";font-size:28px;color:var(--ink);
  cursor:pointer;box-shadow:0 3px 0 #cdeedf;transition:transform .08s}
.sch-cell:active{transform:scale(.94)}
.sch-cell.done{background:linear-gradient(180deg,#bbf7d0,#86efac);border-color:#22c55e;color:#14532d;box-shadow:0 3px 0 #16a34a}
.sch-cell.wrong{background:linear-gradient(180deg,#fed7aa,#fdba74);border-color:#fb923c;animation:shake .4s}
.sch-cell.next{outline:3px solid var(--sun);outline-offset:2px}

/* 记忆翻牌 */
.mem-info{display:flex;justify-content:center;gap:18px;margin:8px 0 14px;font-family:"ZCOOL KuaiLe"}
.mem-info .mi{background:#fff7ed;border:2px solid #fdba74;border-radius:12px;padding:6px 14px;font-size:20px;color:#c2410c}
.mem-grid{display:grid;gap:8px;max-width:420px;margin:0 auto}
.mem-card{aspect-ratio:1;perspective:600px;cursor:pointer}
.mc-inner{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}
.mem-card.flipped .mc-inner,.mem-card.matched .mc-inner{transform:rotateY(180deg)}
.mc-face{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}
.mc-front{background:linear-gradient(135deg,#38bdf8,#0ea5e9);border:2px solid #0284c7;box-shadow:0 3px 0 #0284c7}
.mc-front::after{content:"?";font-family:"ZCOOL KuaiLe";font-size:32px;color:#fff}
.mc-back{background:#fff;border:2px solid #cdeedf;transform:rotateY(180deg);box-shadow:0 3px 0 #cdeedf}
.mc-back .tok{width:60%;height:60%}
.mem-card.matched .mc-back{background:#dcfce7;border-color:#22c55e;box-shadow:0 3px 0 #16a34a;animation:pop .4s}

/* 找不同 */
.diff-rows{display:flex;flex-direction:column;gap:14px;margin:12px 0}
.diff-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:#f8fafc;border:2px solid var(--line);
  border-radius:16px;padding:12px;position:relative}
.diff-row .row-tag{position:absolute;left:10px;top:-10px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:1px 10px;font-size:13px;color:var(--muted);font-weight:700}
.diff-cell{width:60px;height:60px;background:#fff;border:2px solid #cdeedf;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #cdeedf;transition:transform .1s}
.diff-cell:hover{transform:translateY(-2px)}
.diff-cell .tok{width:42px;height:42px}
.diff-cell.correct{background:#dcfce7;border-color:#22c55e;box-shadow:0 3px 0 #16a34a;animation:pop .4s}
.diff-cell.wrong{background:#fed7aa;border-color:#fb923c;animation:shake .4s}

/* 数独 */
.sudoku-grid{display:grid;gap:3px;max-width:340px;margin:0 auto;background:#cdeedf;padding:3px;border-radius:12px}
.sd-cell{aspect-ratio:1;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sd-cell.fixed{background:#f1f5f9;cursor:default}
.sd-cell.fixed .tok{width:60%;height:60%}
.sd-cell .tok{width:62%;height:62%}
.sd-cell.selected{outline:2px solid var(--blue-d);outline-offset:-2px;background:#e0f2fe}
.sd-cell.error{background:#fee2e2}
.sd-cell .tok{pointer-events:none}
.sudoku-pal{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.sd-pal{width:52px;height:52px;border-radius:10px;border:2px solid #cdeedf;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #cdeedf}
.sd-pal:active{transform:scale(.92)}
.sd-pal .tok{width:36px;height:36px}

/* 按钮 */
.btn{font-family:"ZCOOL KuaiLe";font-size:18px;padding:11px 20px;border-radius:14px;border:none;cursor:pointer;
  background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-d);transition:transform .08s,box-shadow .08s;
  display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--green-d)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--green-d)}
.btn.ghost{background:#fff;color:var(--green-d);box-shadow:0 4px 0 #cdeedf;border:2px solid #cdeedf}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}
.btn.blue:hover{box-shadow:0 6px 0 var(--blue-d)}
.btn.blue:active{box-shadow:0 2px 0 var(--blue-d)}
.btn.danger{background:#fff;color:var(--bad);box-shadow:0 4px 0 #fed7aa;border:2px solid #fed7aa}
.btn svg{width:18px;height:18px}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* 庆祝 */
#celebrate{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;pointer-events:none}
#celebrate.show{display:flex}
.star-pop{font-family:"ZCOOL KuaiLe";font-size:34px;color:var(--sun-d);background:#fff;padding:18px 30px;border-radius:24px;
  box-shadow:var(--shadow);animation:pop .5s cubic-bezier(.2,1.4,.4,1);text-align:center;max-width:90vw}
.star-pop small{display:block;font-size:15px;color:var(--muted);margin-top:6px}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.confetti{position:absolute;width:12px;height:12px;border-radius:3px;top:-20px;animation:fall 1.6s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:70;padding:20px}
.modal.show{display:flex;animation:fade .3s}
.modal-card{background:#fff;border-radius:26px;padding:26px 22px;max-width:360px;width:100%;text-align:center;
  box-shadow:var(--shadow);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
.modal-card .trophy{width:76px;height:76px;margin:0 auto 6px}
.modal-card .big{font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--green-d);margin:4px 0 14px}

/* 宝宝档案卡片 */
.profile-card{max-width:380px}
.profile-tip{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:18px;background:#f0fdf4;border-radius:14px;padding:12px 14px}
.profile-gender{display:flex;gap:12px;margin-bottom:14px}
.gender-btn{flex:1;padding:18px 0;border:2px solid #e5e7eb;border-radius:18px;background:#fff;font-family:inherit;font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .2s}
.gender-btn.active{border-color:#f472b6;background:#fce7f3;color:#be185d;transform:scale(1.04)}
.gender-btn[data-g="male"].active{border-color:#60a5fa;background:#dbeafe;color:#1d4ed8}
.profile-hint{font-size:14px;color:#ef4444;min-height:20px;margin-bottom:10px}
.ch-stats{display:flex;justify-content:center;gap:10px;margin-bottom:18px}
.ch-stats .st{flex:1;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:12px 4px}
.ch-stats .st b{display:block;font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--green-d)}
.ch-stats .st small{color:var(--muted);font-size:12px}
.ch-stats .st.acc b{color:var(--blue-d)}
.ch-stats .st.star b{color:var(--sun-d)}
.task-detail{font-size:16px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.task-detail b{color:var(--green-d);font-size:22px;font-family:"ZCOOL KuaiLe"}

/* 成长页 */
.g-sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.g-sec h3{margin:0 0 12px;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:6px;justify-content:space-between}
.g-sec h3 .goal-tag{font-size:13px;color:var(--muted);font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat-box{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:10px 4px;text-align:center}
.stat-box b{display:block;font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d)}
.stat-box.acc b{color:var(--blue-d)} .stat-box.day b{color:var(--purple)} .stat-box.best b{color:var(--sun-d)}
.stat-box small{color:var(--muted);font-size:12px}
.pbar{height:14px;background:#eef2f7;border-radius:999px;overflow:hidden}
.pbar.big{height:18px}
.pfill{height:100%;background:linear-gradient(90deg,#34d399,#22c55e);border-radius:999px;transition:width .5s}
.pfill.full{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.today-stars{text-align:center;font-size:14px;color:var(--muted);margin-top:10px}
.today-stars b{color:var(--sun-d);font-size:18px;font-family:"ZCOOL KuaiLe"}
.task-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.task-item:last-child{border-bottom:none}
.task-item .ti-name{flex:1;font-size:14px;display:flex;align-items:center;gap:6px}
.task-item .ti-name .tok,.task-item .ti-name .ti-ic,.task-item .gc-icon{width:20px;height:20px}
.task-item .ti-bar{width:80px;height:8px;background:#eef2f7;border-radius:999px;overflow:hidden}
.task-item .ti-fill{height:100%;background:var(--green);border-radius:999px}
.task-item .ti-fill.full{background:var(--sun)}
.task-item .ti-cnt{font-size:13px;color:var(--muted);font-weight:700;min-width:46px;text-align:right}
.task-item .ti-cnt.done{color:var(--green-d)}
.week-chart{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bar-col .bar{width:100%;max-width:34px;background:linear-gradient(180deg,#38bdf8,#0ea5e9);border-radius:8px 8px 4px 4px;min-height:4px;transition:height .5s}
.bar-col .bar.today{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.bar-col .bar-label{font-size:12px;color:var(--muted)}
.hist-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;gap:6px}
.hist-row:last-child{border-bottom:none}
.hist-row .h-game{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.tag{font-size:11px;padding:2px 7px;border-radius:999px;font-weight:700;white-space:nowrap}
.tag.math{background:#dcfce7;color:#166534}
.tag.focus{background:#ffe4e6;color:#9f1239}
.tag.logic{background:#ede9fe;color:#5b21b6}
.empty{color:var(--muted);text-align:center;padding:14px;font-size:14px}

/* 底部导航 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;max-width:860px;margin:0 auto}
.tab{flex:1;border:none;background:none;padding:12px 0;padding-bottom:max(12px,env(safe-area-inset-bottom));cursor:pointer;
  color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;font-weight:600;transition:color .15s}
.tab .ic{width:26px;height:26px}
.tab.active{color:var(--green-d)}

/* 触屏 hover 修复 */
@media (hover:none){
  .src-obj:hover,.choice:hover,.btn:hover,.btn.blue:hover,.numcard:hover,.pat-choice:hover,
  .diff-cell:hover,.gc-btns button:hover,.sch-cell:hover,.sd-pal:hover{transform:none}
}
/* 手机 */
@media (max-width:560px){
  .topbar .logo{font-size:20px}
  .stats{gap:6px}
  .chip{font-size:14px;padding:5px 9px}
  .hero{padding:18px 16px;gap:12px}
  .hero .mascot{width:72px;height:72px}
  .hero h1{font-size:22px}
  .hero p{font-size:14px}
  .hero .bubble{display:none}
  .picker{padding:8px 12px}
  .seg button{padding:6px 12px;font-size:14px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .game-card{padding:12px 8px}
  .game-card .gc-icon{width:40px;height:40px}
  .qcard{padding:16px}
  .equation .num{font-size:42px}
  .equation .op,.equation .eq{font-size:34px}
  .equation .blank{width:74px;height:60px;font-size:36px}
  .choice{font-size:28px;padding:14px 8px}
  .ten-target,.ten-source{max-width:100%}
  .slot{width:50px;height:50px}
  .slot .obj{width:38px;height:38px}
  .src-obj .obj{width:42px;height:42px}
  .ten-target .ten-label{width:44px;height:44px;font-size:22px;top:-16px}
  .numcard .nc-num{font-size:44px}
  .numcard .nc-objs .obj{width:20px;height:20px}
  .pat-item,.pat-q{width:52px;height:52px}
  .pat-item .tok{width:36px;height:36px}
  .nl-cell{width:66px;height:66px;font-size:36px}
  .sch-cell{font-size:24px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  main{padding:14px 12px calc(100px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .hero .mascot{width:60px;height:60px}
  .equation .num{font-size:36px}
  .equation .blank{width:64px;height:54px;font-size:32px}
  .slot{width:42px;height:42px}
  .slot .obj{width:32px;height:32px}
  .ten-slots{gap:4px}
  .src-obj .obj{width:36px;height:36px}
  .choice{font-size:24px;padding:12px 6px}
  .pat-item,.pat-q{width:46px;height:46px}
  .pat-item .tok{width:32px;height:32px}
  .nl-cell{width:58px;height:58px;font-size:32px}
  .diff-cell{width:52px;height:52px}
  .diff-cell .tok{width:36px;height:36px}
}
@media (orientation:landscape) and (max-height:560px){
  .hero{padding:12px 16px}
  .hero .mascot{width:60px;height:60px}
  .hero h1{font-size:20px;margin-bottom:2px}
  .hero p{font-size:13px}
  .qcard{padding:14px}
  main{padding-top:10px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}

/* ===== 排行榜 ===== */
.rank-seg{display:flex;gap:6px;background:#f1f5f9;border-radius:12px;padding:4px;margin:12px 0}
.rank-seg button{flex:1;border:none;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;
  padding:8px 6px;border-radius:9px;color:var(--muted);transition:all .2s}
.rank-seg button.active{background:#fff;color:var(--green-d);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#f8fafc;
  border:2px solid transparent;transition:all .2s}
.rank-row.me{background:linear-gradient(135deg,#dcfce7,#fef9c3);border-color:#86efac;box-shadow:0 2px 10px rgba(34,197,94,.15)}
.rank-rk{width:32px;text-align:center;font-size:22px;font-weight:800;flex-shrink:0}
.rk-num{font-size:16px;color:var(--muted);font-family:"ZCOOL KuaiLe"}
.rank-av{font-size:24px;flex-shrink:0}
.rank-name{flex:1;font-weight:700;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-me-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--green-d);
  padding:1px 7px;border-radius:8px;margin-left:4px;vertical-align:middle}
.rank-val{font-family:"ZCOOL KuaiLe";font-size:24px;color:var(--green-d);flex-shrink:0}
.rank-val small{font-size:12px;color:var(--muted);margin-left:2px}
.rank-loading{text-align:center;padding:30px 0;color:var(--muted);font-size:15px}

/* ===== 心脏病 toast / 结果弹窗 ===== */
.hr-toast{
  position:fixed;top:14px;left:50%;transform:translate(-50%,-160%);
  background:#1e293b;color:#fff;padding:12px 22px;border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:80;text-align:center;
  min-width:200px;max-width:88vw;transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
  pointer-events:none;font-weight:700;
}
.hr-toast.show{transform:translate(-50%,0)}
.hr-toast .t-title{font-size:19px;line-height:1.3}
.hr-toast .t-detail{font-size:14px;font-weight:600;opacity:.92;margin-top:2px}
.hr-toast.win{background:linear-gradient(135deg,#16a34a,#22c55e)}
.hr-toast.lose{background:linear-gradient(135deg,#dc2626,#ef4444)}
#hrResult .modal-card{max-width:340px}
#hrResult .big{font-size:28px}

/* ===== 对战模式 ===== */
.mode-tabs{display:flex;gap:8px;margin:14px 0 6px}
.mode-tab{flex:1;padding:11px 0;border:none;border-radius:14px;background:#fff;color:var(--muted);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:all .2s}
.mode-tab.active{background:linear-gradient(135deg,var(--green),#4ade80);color:#fff;box-shadow:0 6px 14px rgba(22,163,74,.3)}
.hidden{display:none!important}

.vs-setup{max-width:560px;margin:0 auto}
.vs-setup h3{font-size:22px;color:var(--green-d);margin:6px 0 8px}
.vs-tip{font-size:14px;color:var(--muted);line-height:1.7;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.vs-label{font-size:15px;font-weight:600;color:var(--ink);margin:14px 0 8px}
.vs-games{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.vs-game{padding:12px 8px;border:2px solid #e5e7eb;border-radius:12px;background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s}
.vs-game:active{transform:scale(.96)}
.vs-game.active{border-color:var(--green);background:#dcfce7;color:var(--green-d)}
.vs-input{width:100%;box-sizing:border-box;padding:13px 14px;border:2px solid #e5e7eb;border-radius:12px;font-family:inherit;font-size:18px;color:var(--ink);margin-bottom:6px}
.vs-input:focus{outline:none;border-color:var(--green)}
#vsDiffSeg{margin-bottom:14px}
.btn.big{width:100%;padding:15px;font-size:18px;margin-top:6px}
.vs-status{text-align:center;margin-top:14px;font-size:15px;color:var(--muted);min-height:24px}
.vs-status.matching{color:var(--blue-d);font-weight:600}
.vs-status.error{color:#ef4444}

.vs-card{margin:0 auto;max-width:640px}
.vs-top{display:flex;align-items:center;gap:10px;padding:10px 4px 14px;border-bottom:2px dashed #e5e7eb;margin-bottom:12px}
.vs-top .back-btn{flex-shrink:0}
.vs-players{display:flex;flex:1;gap:8px;justify-content:center;align-items:center}
.vs-player{flex:1;text-align:center;padding:8px 4px;border-radius:14px;min-width:0}
.vs-player.me{background:#dcfce7}
.vs-player.opp{background:#dbeafe}
.vs-player.third{background:#fef3c7}
.vsp-tag{font-size:12px;color:var(--muted);font-weight:600}
.vsp-name{font-size:18px;font-weight:700;color:var(--ink);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsp-score{font-size:30px;font-weight:700;color:var(--green-d);line-height:1}
.vs-player.opp .vsp-score{color:var(--blue-d)}
.vs-player.third .vsp-score{color:#d97706}
.vs-mid{font-size:20px;font-weight:800;color:#fb7185;flex-shrink:0}
.vs-round{text-align:center;font-size:15px;color:var(--muted);margin-bottom:10px}
.vs-round b{color:var(--green-d);font-size:20px}
.vs-stage{min-height:200px}
.vs-msg{text-align:center;margin-top:14px;font-size:18px;font-weight:600;color:var(--green-d);min-height:30px}
.vs-msg.lose{color:#fb7185}
.vs-msg.tie{color:var(--sun-d)}
.vs-end{padding:10px}
.vs-end .big{font-size:30px;margin-bottom:8px}
.vs-end .row{margin-top:14px}
/* 3人对战布局 */
.vs-players.p3 .vs-player{flex:1 1 0;min-width:0;padding:6px 2px}
.vs-players.p3 .vsp-name{font-size:13px}
.vs-players.p3 .vsp-score{font-size:22px}
.vs-players.p3 .vsp-tag{font-size:11px}
@media (max-width:560px){
  .vsp-name{font-size:15px}
  .vsp-score{font-size:24px}
  .vs-mid{font-size:16px}
}

/* ===== 德国心脏病 ===== */
.hr-game{padding:8px 0}
.hr-info{display:flex;justify-content:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.hr-info > div{background:#f0fdf4;border:2px solid #86efac;border-radius:12px;padding:6px 14px;font-weight:700;color:#166534;font-size:15px}
.hr-info b{color:var(--green-d);font-size:22px}
.hr-table{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:60px;padding:10px;background:#f8fafc;border:2px dashed #e5e7eb;border-radius:16px;margin-bottom:10px}
.hr-card-wrap{background:#fff;border:2px solid #e5e7eb;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:3px;animation:cardIn .25s ease;overflow:hidden}
.hr-card-wrap .hr-card{display:flex;align-items:center;justify-content:center}
.hr-card-wrap .hr-card svg{width:100%;height:100%}
.hr-card-wrap.new-card{animation:cardPop .4s ease;border-color:var(--green);box-shadow:0 0 12px rgba(34,197,94,.3)}
.hr-card-wrap.hr-face-card{border-width:4px;border-color:#fbbf24;box-shadow:0 6px 16px rgba(251,191,36,.35);border-radius:14px;padding:4px;animation:none}
.hr-card-wrap.hr-face-card.new-card{animation:cardPop .4s ease}
@keyframes cardIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cardPop{0%{transform:scale(.5)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.hr-current{display:flex;justify-content:center;margin:10px 0}
.hr-current .hr-card-wrap{width:72px;height:72px;padding:5px;border-width:3px;border-color:var(--blue);box-shadow:0 4px 12px rgba(14,165,233,.3)}
.hr-current .hr-card-wrap svg{width:100%;height:100%}
.hr-status{text-align:center;font-size:18px;font-weight:700;color:var(--ink);margin:10px 0;padding:10px;background:#fef3c7;border:2px solid #fde68a;border-radius:14px}
.hr-controls{display:flex;gap:12px;justify-content:center;margin-top:12px}
.hr-deal-btn,.hr-buzz-btn{border:none;border-radius:18px;padding:16px 28px;font-family:inherit;font-size:18px;font-weight:800;cursor:pointer;transition:all .12s;box-shadow:0 5px 0 rgba(0,0,0,.1)}
.hr-deal-btn{background:linear-gradient(180deg,#86efac,#22c55e);color:#fff;box-shadow:0 5px 0 #15803d}
.hr-deal-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #15803d}
.hr-buzz-btn{background:linear-gradient(180deg,#fca5a5,#ef4444);color:#fff;box-shadow:0 5px 0 #b91c1c}
.hr-buzz-btn:disabled{background:#d1d5db;box-shadow:0 5px 0 #9ca3af;cursor:not-allowed}
.hr-buzz-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #b91c1c}
.hr-buzz-btn.pulse{animation:buzzPulse .6s infinite}
@keyframes buzzPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hr-special{margin-top:14px;padding:16px;background:#fef3c7;border:3px solid #fbbf24;border-radius:16px;text-align:center}
.hr-special-title{font-size:24px;font-weight:800;color:#92400e;margin-bottom:10px}
.hr-special-actions{display:flex;gap:10px;justify-content:center}
.hr-action-btn{border:none;border-radius:14px;padding:12px 24px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;background:linear-gradient(180deg,#93c5fd,#3b82f6);color:#fff;box-shadow:0 4px 0 #1d4ed8}
.hr-action-btn.wrong{background:linear-gradient(180deg,#d1d5db,#6b7280);box-shadow:0 4px 0 #374151}
.hr-action-btn:active{transform:translateY(2px);box-shadow:0 2px 0 currentColor}

/* 对战模式卡牌样式 */
.hr-vs-game{padding:4px 0}
.vs-players-row{display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.hr-vs-table{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:56px;padding:8px 10px;background:#f8fafc;border:2px dashed #e5e7eb;border-radius:14px;margin-bottom:8px}
.hr-vs-current{display:flex;justify-content-center;margin:6px 0}
.hr-vs-current .hr-card-wrap{width:64px;height:64px;padding:4px;border-width:3px;border-color:var(--blue);box-shadow:0 4px 12px rgba(14,165,233,.3)}
.hr-vs-status{text-align:center;font-size:16px;font-weight:700;margin:8px 0;padding:8px 12px;background:#fff;border:2px solid #e5e7eb;border-radius:12px;min-height:20px}
.hr-vs-controls{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.hr-buzz-btn.big{padding:20px 40px;font-size:22px;border-radius:22px}
.hr-vs-deck{font-size:14px;color:var(--muted);font-weight:600}
.hr-vs-special{margin-top:10px;padding:14px;background:#fef3c7;border:3px solid #fbbf24;border-radius:14px;text-align:center}
.hr-vs-special .hr-special-title{font-size:20px}

/* 3人模式布局 */
.vs-players-row .vs-player{min-width:90px}
@media (max-width:480px){
  .vs-players-row{gap:4px}
  .vs-player{padding:6px 2px}
  .vsp-tag{font-size:10px}
  .vsp-name{font-size:13px}
  .vsp-score{font-size:22px}
  .hr-vs-table{gap:3px;padding:6px}
  .hr-card-wrap{width:44px;height:44px}
  .hr-current .hr-card-wrap{width:56px;height:56px}
}

/* ===== 德国心脏病 - 对战专用布局 ===== */
body.immersive .view-vs.hr-mode{
  position:fixed!important;
  top:0;left:0;right:0;bottom:0;
  width:100vw!important;
  height:100vh!important;
  max-width:100vw!important;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
}
/* 手机竖屏强制横屏显示（三人模式） */
body.immersive.hr-landscape .view-vs.hr-mode{
  position:fixed!important;
  top:0!important;
  left:100vw!important;
  right:auto!important;
  bottom:auto!important;
  width:100vh!important;
  height:100vw!important;
  max-width:none!important;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
  transform:rotate(90deg);
  transform-origin:top left;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
}
body.immersive .view-vs.hr-mode .qcard{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.immersive .view-vs.hr-mode .vs-top{
  border-bottom:none!important;
  padding:8px 12px!important;
  margin:0!important;
  min-height:0!important;
  flex-shrink:0;
  justify-content:flex-start!important;
  align-items:center;
  gap:4px;
}
body.immersive .view-vs.hr-mode .vs-top .back-btn{
  position:static!important;
  transform:none!important;
  flex-shrink:0;
}
.view-vs.hr-mode .vs-player,
.view-vs.hr-mode .vs-mid,
.view-vs.hr-mode .vs-round{display:none!important}
.view-vs.hr-mode .vs-card{padding:0}
.view-vs.hr-mode .vs-stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  padding:4px 8px;
  min-height:0;
}
.view-vs.hr-mode{display:flex;flex-direction:column;align-items:center}

/* 强制横屏模式下：紧凑三人布局 */
body.immersive.hr-landscape .hr-vs-slots{gap:10px;margin:4px 0}
body.immersive.hr-landscape .hr-vs-slot{min-width:110px;padding:8px 10px;gap:4px}
body.immersive.hr-landscape .hr-vs-slot .hr-slot-label{font-size:13px}
body.immersive.hr-landscape .hr-vs-faceup{min-height:90px}
body.immersive.hr-landscape .hr-vs-deck-count{font-size:16px}
body.immersive.hr-landscape .hr-vs-faceup .hr-card-wrap{width:95px;height:95px}
body.immersive.hr-landscape .hr-bell{font-size:40px}
body.immersive.hr-landscape .hr-big-status{font-size:16px}
body.immersive.hr-landscape .hr-turn-indicator{font-size:14px;padding:4px 10px}
body.immersive.hr-landscape .hr-controls-row{gap:12px}
body.immersive.hr-landscape .hr-deal-btn,
body.immersive.hr-landscape .hr-buzz-btn.big{padding:10px 22px;font-size:18px}
body.immersive.hr-landscape .hr-vs-game{gap:6px;padding:4px}

/* ===== 德国心脏病 - 单人模式布局 ===== */
.hr-table-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0}
.hr-player-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px;border-radius:16px;min-width:160px;transition:all .2s}
.hr-slot-label{font-size:16px;font-weight:700;color:var(--ink)}
.hr-deck-count{font-size:18px;font-weight:700;color:var(--muted)}
.hr-face-up-pile{min-height:120px;display:flex;align-items:center;justify-content:center}
.hr-card-empty{width:150px;height:150px;border:4px dashed #d1d5db;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:48px;color:#d1d5db;font-weight:800}
.hr-bell-area{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}
.hr-bell{font-size:72px;line-height:1;cursor:default;transition:transform .2s}
.hr-bell.ringing{animation:bellRing .3s infinite}
@keyframes bellRing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* ===== 德国心脏病 - 对战专用布局 ===== */
.hr-vs-game{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px;flex:1}
.hr-vs-slots{display:flex;justify-content:center;gap:16px;margin:8px 0;flex-wrap:wrap}
.hr-vs-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 14px;border-radius:18px;min-width:140px;transition:all .2s}
.hr-vs-slot.me{background:#dcfce7;border:3px solid #86efac}
.hr-vs-slot.opp{background:#dbeafe;border:3px solid #93c5fd}
.hr-vs-slot.active{box-shadow:0 0 20px rgba(251,191,36,.6);transform:scale(1.05);border-color:#fbbf24}
.hr-vs-slot.eliminated{opacity:.45;filter:grayscale(.8);border-color:#999!important}
.hr-vs-slot.eliminated .hr-slot-label::after{content:' 😵';font-size:16px}
.hr-vs-slot .hr-slot-label{font-size:15px;font-weight:700;color:var(--ink);text-align:center}
.hr-vs-faceup{min-height:160px;display:flex;align-items:center;justify-content:center}
.hr-vs-deck-count{font-size:20px;font-weight:800;color:var(--green-d)}
.hr-vs-slot.opp .hr-vs-deck-count{color:var(--blue-d)}
.hr-vs-slot .hp-turn{font-size:14px;font-weight:700;color:#f59e0b;margin-top:4px}

/* 对战 - 铃铛区域 */
.hr-vs-bell-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0}
.hr-vs-bell-area .hr-bell{font-size:80px}

.hr-turn-indicator{text-align:center;font-size:18px;font-weight:800;padding:10px 20px;border-radius:14px;background:#fef3c7;color:#92400e;margin:8px auto;max-width:400px}
.hr-turn-indicator.me{background:#dcfce7;color:#166534}
.hr-turn-indicator.opp{background:#dbeafe;color:#1e40af}

.hr-big-status{text-align:center;font-size:20px;font-weight:800;margin:12px 0;padding:14px 20px;background:#fff;border:3px solid #e5e7eb;border-radius:16px;min-height:30px}
.hr-big-status.success{border-color:#86efac;background:#f0fdf4;color:#166534}
.hr-big-status.error{border-color:#fca5a5;background:#fef2f2;color:#991b1b}
.hr-big-status.warn{border-color:#fde68a;background:#fefce8;color:#854d0e}

.hr-controls-row{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.hr-deal-btn,.hr-buzz-btn{border:none;border-radius:22px;padding:20px 36px;font-family:inherit;font-size:22px;font-weight:800;cursor:pointer;transition:all .12s;box-shadow:0 6px 0 rgba(0,0,0,.12)}
.hr-deal-btn{background:linear-gradient(180deg,#86efac,#22c55e);color:#fff;box-shadow:0 6px 0 #15803d}
.hr-deal-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #15803d}
.hr-buzz-btn{background:linear-gradient(180deg,#fca5a5,#ef4444);color:#fff;box-shadow:0 6px 0 #b91c1c}
.hr-buzz-btn:disabled{background:#d1d5db;box-shadow:0 3px 0 #9ca3af;cursor:not-allowed}
.hr-buzz-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 3px 0 #b91c1c}
.hr-deal-btn:disabled{background:#d1d5db;box-shadow:0 3px 0 #9ca3af;cursor:not-allowed;opacity:.7}

/* 响应式设计 */
@media (max-width:480px){
  .hr-vs-slot{min-width:120px;padding:10px}
  .hr-vs-faceup .hr-card-wrap{width:95px;height:95px}
  .hr-face-card{width:95px;height:95px}
  .hr-card-empty{width:95px;height:95px;font-size:36px}
  .hr-vs-slot .hr-slot-label{font-size:13px}
  .hr-vs-deck-count{font-size:17px}
  .hr-bell{font-size:56px}
  .hr-vs-bell-area .hr-bell{font-size:64px}
  .hr-turn-indicator{font-size:16px;padding:8px 16px}
  .hr-big-status{font-size:17px;padding:10px 14px}
  .hr-deal-btn,.hr-buzz-btn{padding:16px 28px;font-size:19px}
}

@media (max-height:700px){
  .hr-vs-slot{min-width:125px;padding:8px}
  .hr-vs-faceup .hr-card-wrap{width:95px;height:95px}
  .hr-face-card{width:95px;height:95px}
  .hr-card-empty{width:95px;height:95px;font-size:36px}
  .hr-vs-bell-area .hr-bell{font-size:60px}
  .hr-turn-indicator{font-size:15px;padding:6px 14px;margin:4px auto}
  .hr-big-status{font-size:16px;padding:10px 14px;margin:6px 0}
  .hr-deal-btn,.hr-buzz-btn{padding:14px 24px;font-size:18px}
  .hr-vs-slots{gap:12px;margin:4px 0}
  .hr-vs-slot .hr-slot-label{font-size:13px}
}

/* ============ 24点 ============ */
.g24-prompt{font-size:16px;color:var(--muted);text-align:center;margin:4px 0 8px;font-weight:600}
.g24-prompt b{color:var(--green-d);font-size:20px}
.g24-cards{display:flex;gap:12px;justify-content:center;margin:14px 0 18px}
.g24-num{width:64px;height:64px;background:linear-gradient(180deg,#fef3c7,#fde68a);border:3px solid #fbbf24;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-family:"ZCOOL KuaiLe";font-size:30px;font-weight:800;color:#92400e;
  box-shadow:0 4px 0 #f59e0b}
.g24-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.g24-choice{font-family:inherit;font-size:17px;font-weight:700;padding:14px 10px;border-radius:14px;border:2px solid #cdeedf;
  background:linear-gradient(180deg,#fff,#f1f8f4);color:var(--ink);box-shadow:0 4px 0 #cdeedf;cursor:pointer;
  transition:transform .08s,box-shadow .08s;word-break:break-all;line-height:1.3}
.g24-choice:hover{transform:translateY(-2px);box-shadow:0 6px 0 #cdeedf}
.g24-choice:active{transform:translateY(2px);box-shadow:0 2px 0 #cdeedf}
.g24-choice.correct{background:linear-gradient(180deg,#bbf7d0,#86efac);border-color:#22c55e;box-shadow:0 4px 0 #16a34a;color:#14532d}
.g24-choice.wrong{background:linear-gradient(180deg,#fed7aa,#fdba74);border-color:#fb923c;box-shadow:0 4px 0 #ea580c;color:#7c2d12;animation:shake .4s}

/* ============ 颜色反应 Stroop ============ */
.stroop-prompt{font-size:17px;color:var(--muted);text-align:center;margin:6px 0;font-weight:600}
.stroop-word{font-family:"ZCOOL KuaiLe";font-size:72px;text-align:center;margin:18px 0 22px;letter-spacing:4px;
  text-shadow:0 3px 0 rgba(0,0,0,.08)}
.stroop-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.stroop-choice{font-family:inherit;font-size:20px;font-weight:800;color:#fff;padding:18px 10px;border-radius:16px;border:none;
  cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s}
.stroop-choice:hover{transform:translateY(-2px)}
.stroop-choice:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.stroop-choice.correct{outline:4px solid #16a34a;outline-offset:2px}
.stroop-choice.wrong{outline:4px solid #ef4444;outline-offset:2px;animation:shake .4s}

/* ============ 记忆配对（联机） ============ */
.mem-game{display:flex;flex-direction:column;align-items:center;gap:10px}
.mem-players{display:flex;gap:12px;justify-content:center;width:100%;flex-wrap:wrap}
.mem-players.p3{gap:8px}
.mem-player{flex:1;min-width:90px;max-width:160px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center;transition:all .2s}
.mem-player.me{border-color:#22c55e;background:#ecfdf5}
.mem-player.opp{border-color:#bae6fd;background:#f0f9ff}
.mem-player.active{border-color:var(--sun);box-shadow:0 0 0 3px rgba(251,191,36,.35);transform:translateY(-2px)}
.mem-pname{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-pscore{font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--green-d);line-height:1}
.mem-turn{font-size:15px;font-weight:700;color:var(--muted);padding:6px 14px;background:#f8fafc;border-radius:999px;margin:2px 0}
.mem-turn.me{color:var(--green-d);background:#ecfdf5}
.mem-turn.opp{color:var(--blue-d);background:#f0f9ff}
.mem-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:380px;width:100%;margin:4px auto}
.mem-board .mem-card{aspect-ratio:1;border-radius:12px;border:3px solid #0ea5e9;background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:#fff;font-family:"ZCOOL KuaiLe";font-size:30px;box-shadow:0 4px 0 #0284c7;transition:transform .15s,background .2s,border-color .2s,color .2s}
.mem-board .mem-card:active{transform:scale(.94)}
.mem-board .mem-card.flipped{background:#fff;border-color:#cdeedf;color:var(--ink);box-shadow:0 4px 0 #cdeedf}
.mem-board .mem-card.matched{background:#dcfce7;border-color:#22c55e;box-shadow:0 4px 0 #16a34a;color:#15803d;animation:pop .4s}

/* ============ 数字炸弹（联机 + 单人） ============ */
.bomb-game,.bomb-game-single{display:flex;flex-direction:column;align-items:center;gap:12px}
.bomb-players{display:flex;gap:12px;justify-content:center;width:100%;flex-wrap:wrap}
.bomb-players.p3{gap:8px}
.bomb-player{flex:1;min-width:90px;max-width:160px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center;transition:all .2s}
.bomb-player.me{border-color:#ef4444;background:#fef2f2}
.bomb-player.opp{border-color:#bae6fd;background:#f0f9ff}
.bomb-player.active{border-color:var(--bad);box-shadow:0 0 0 3px rgba(249,115,22,.35);transform:translateY(-2px)}
.bomb-pname{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bomb-pboom{font-family:"ZCOOL KuaiLe";font-size:22px;color:var(--bad);line-height:1}
.bomb-range-box{background:#fff7ed;border:2px solid #fdba74;border-radius:18px;padding:14px 22px;text-align:center;width:100%;max-width:360px}
.bomb-range-label{font-size:14px;color:#c2410c;font-weight:700;margin-bottom:4px}
.bomb-range{font-family:"ZCOOL KuaiLe";font-size:34px;color:#c2410c;line-height:1.1}
.bomb-turn{font-size:16px;font-weight:700;color:var(--muted);padding:8px 16px;background:#f8fafc;border-radius:999px}
.bomb-turn.me{color:var(--green-d);background:#ecfdf5}
.bomb-turn.opp{color:var(--blue-d);background:#f0f9ff}
.bomb-hint{font-size:14px;color:var(--muted);text-align:center;min-height:20px;padding:0 8px}
.bomb-hint b{color:var(--ink)}
.bomb-input-row{display:flex;gap:10px;justify-content:center;width:100%;max-width:360px}
.bomb-input{flex:1;font-family:inherit;font-size:22px;font-weight:700;text-align:center;padding:12px 8px;border:3px solid #fdba74;
  border-radius:14px;background:#fff;color:var(--ink);min-width:0}
.bomb-input:focus{outline:none;border-color:var(--bad)}
.bomb-input:disabled{background:#f1f5f9;opacity:.6}
.bomb-guess-btn{border:none;border-radius:14px;padding:12px 20px;font-family:inherit;font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#fb923c,#ef4444);box-shadow:0 5px 0 #b91c1c;cursor:pointer;transition:transform .1s,box-shadow .1s;white-space:nowrap}
.bomb-guess-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b91c1c}
.bomb-guess-btn:disabled{background:#d1d5db;box-shadow:0 3px 0 #9ca3af;cursor:not-allowed}
.bomb-log{width:100%;max-width:360px;display:flex;flex-direction:column;gap:4px;margin-top:4px;max-height:120px;overflow-y:auto}
.bomb-log-row{font-size:14px;padding:6px 12px;border-radius:10px;background:#f8fafc;color:var(--muted)}
.bomb-log-row.player{background:#ecfdf5;color:#166534}
.bomb-log-row.cpu{background:#f0f9ff;color:#0369a1}
.bomb-log-row b{color:var(--ink)}

/* 3 人模式紧凑 */
.mem-players.p3 .mem-player,.bomb-players.p3 .bomb-player{min-width:70px;padding:6px 8px}
.mem-players.p3 .mem-pname,.bomb-players.p3 .bomb-pname{font-size:12px}

/* 新游戏响应式 */
@media (max-width:480px){
  .g24-num{width:54px;height:54px;font-size:24px}
  .g24-choice{font-size:15px;padding:12px 8px}
  .stroop-word{font-size:56px;margin:12px 0 16px}
  .stroop-choice{font-size:18px;padding:15px 8px}
  .mem-board{gap:8px;max-width:320px}
  .mem-board .mem-card{font-size:26px}
  .bomb-range{font-size:28px}
  .bomb-input{font-size:20px}
  .bomb-guess-btn{font-size:16px;padding:12px 16px}
}

/* ============ 打地鼠（联机 + 单人） ============ */
.mole-game,.mole-game-single{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px}
.mole-players{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}
.mole-players.p3{gap:8px}
.mole-player{flex:1;min-width:80px;max-width:140px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center}
.mole-player.me{border-color:#22c55e;background:#ecfdf5}
.mole-player.opp{border-color:#bae6fd;background:#f0f9ff}
.mole-pname{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mole-pscore{font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--green-d);line-height:1.1}
.mole-player.opp .mole-pscore{color:var(--blue-d)}
.mole-timer{font-family:"ZCOOL KuaiLe";font-size:22px;color:#fff;background:linear-gradient(135deg,#38bdf8,#0ea5e9);padding:4px 18px;border-radius:999px;box-shadow:0 3px 0 var(--blue-d)}
.mole-scores{display:flex;gap:12px;justify-content:center;align-items:center;width:100%;max-width:360px}
.mole-sc{flex:1;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center;font-size:15px;font-weight:700;color:var(--muted)}
.mole-sc.me{border-color:#22c55e;background:#ecfdf5;color:#166534}
.mole-sc.cpu{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}
.mole-sc b{font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--ink);margin-left:4px}
.mole-sc-time{font-family:"ZCOOL KuaiLe";font-size:20px;color:#fff;background:linear-gradient(135deg,#fb923c,#ef4444);padding:6px 14px;border-radius:999px;box-shadow:0 3px 0 #b91c1c}
.mole-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;width:100%;margin:6px auto}
.mole-hole{width:100%;aspect-ratio:1;max-width:88px;margin:auto;border-radius:50%;background:radial-gradient(circle,#a16207 0%,#78350f 70%);
  border:3px solid #5b3d22;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;box-shadow:inset 0 6px 10px rgba(0,0,0,.3)}
.mole-hole:active{transform:scale(.92)}
.mole-hole.up{background:radial-gradient(circle,#fef3c7 0%,#fde68a 70%);border-color:#f59e0b}
.mole-hole.hit{background:radial-gradient(circle,#fee2e2 0%,#fecaca 70%);border-color:#ef4444;animation:moleHit .3s}
@keyframes moleHit{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.mole-emoji{font-size:38px;line-height:1}
.mole-tip{font-size:13px;color:var(--muted);text-align:center;padding:0 8px}

/* ============ 四子棋（联机 + 单人） ============ */
.c4-game,.c4-game-single{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px}
.c4-players{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}
.c4-player{flex:1;min-width:90px;max-width:150px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.c4-player.me{border-color:#22c55e;background:#ecfdf5}
.c4-player.opp{border-color:#ef4444;background:#fef2f2}
.c4-player.active{box-shadow:0 0 0 3px rgba(34,197,94,.4);transform:translateY(-2px)}
.c4-pname{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c4-pcolor{width:22px;height:22px;border-radius:50%;border:2px solid #94a3b8}
.c4-pcolor.p0{background:#22c55e;border-color:#15803d}
.c4-pcolor.p1{background:#ef4444;border-color:#b91c1c}
.c4-turn,.c4-turn-ind{font-size:16px;font-weight:700;color:var(--muted);padding:8px 16px;background:#f8fafc;border-radius:999px}
.c4-turn.me,.c4-turn-ind.me{color:var(--green-d);background:#ecfdf5}
.c4-turn.opp,.c4-turn-ind.opp{color:var(--blue-d);background:#f0f9ff}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:380px;width:100%;background:#1e3a8a;border:8px solid #0ea5e9;border-radius:14px;padding:8px;margin:4px auto;box-shadow:0 6px 0 #1e40af}
.c4-cell{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:transform .1s;padding:0}
.c4-cell:active{transform:scale(.92)}
.c4-cell.p0{background:#22c55e;border-color:#15803d;box-shadow:inset 0 -3px 6px rgba(0,0,0,.2)}
.c4-cell.p1{background:#ef4444;border-color:#b91c1c;box-shadow:inset 0 -3px 6px rgba(0,0,0,.2)}
.c4-cell.last{box-shadow:0 0 0 3px #fbbf24}
.c4-cell.win{box-shadow:0 0 0 4px #fbbf24,0 0 14px #fbbf24;animation:c4win .8s infinite}
@keyframes c4win{0%,100%{box-shadow:0 0 0 4px #fbbf24,0 0 14px #fbbf24}50%{box-shadow:0 0 0 4px #f59e0b,0 0 22px #fbbf24}}
.c4-disc{display:block;width:80%;height:80%;border-radius:50%}
.c4-tip{font-size:13px;color:var(--muted);text-align:center;padding:0 8px}

/* ============ 西蒙说（联机 + 单人） ============ */
.simon-game,.simon-game-single{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 4px}
.simon-players{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}
.simon-players.p3{gap:8px}
.simon-player{flex:1;min-width:80px;max-width:140px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;text-align:center}
.simon-player.me{border-color:#22c55e;background:#ecfdf5}
.simon-player.opp{border-color:#bae6fd;background:#f0f9ff}
.simon-pname{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simon-pscore{font-family:"ZCOOL KuaiLe";font-size:26px;color:var(--purple);line-height:1.1}
.simon-status,.simon-info{font-size:17px;font-weight:700;color:var(--ink);padding:8px 18px;background:#f5f3ff;border:2px solid #ddd6fe;border-radius:999px;text-align:center;min-height:22px}
.simon-status.me,.simon-info.me{color:var(--green-d);background:#ecfdf5;border-color:#86efac}
.simon-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:280px;max-width:90vw;aspect-ratio:1}
.simon-pad{border:none;cursor:pointer;border-radius:18px;transition:all .12s;box-shadow:0 5px 0 rgba(0,0,0,.25);padding:0}
.simon-pad:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.simon-pad.pad-g{background:#16a34a}
.simon-pad.pad-r{background:#b91c1c}
.simon-pad.pad-y{background:#ca8a04}
.simon-pad.pad-b{background:#1d4ed8}
.simon-pad.lit{background:#22c55e;box-shadow:0 0 24px #22c55e,0 5px 0 rgba(0,0,0,.25);transform:scale(1.04)}
.simon-pad.pad-r.lit{background:#ef4444;box-shadow:0 0 24px #ef4444,0 5px 0 rgba(0,0,0,.25)}
.simon-pad.pad-y.lit{background:#fbbf24;box-shadow:0 0 24px #fbbf24,0 5px 0 rgba(0,0,0,.25)}
.simon-pad.pad-b.lit{background:#3b82f6;box-shadow:0 0 24px #3b82f6,0 5px 0 rgba(0,0,0,.25)}
.simon-tip{font-size:13px;color:var(--muted);text-align:center;padding:0 8px}

/* ============ 五子棋（联机 + 单人） ============ */
.gk-game,.gk-game-single{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px}
.gk-players{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}
.gk-player{flex:1;min-width:100px;max-width:160px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;align-items:center;gap:8px;transition:all .2s}
.gk-player.me{border-color:#1f2937;background:#f8fafc}
.gk-player.opp{border-color:#94a3b8;background:#f1f5f9}
.gk-player.active{box-shadow:0 0 0 3px rgba(251,191,36,.5);transform:translateY(-2px)}
.gk-stone{width:22px;height:22px;border-radius:50%;border:1px solid #94a3b8;flex:0 0 auto}
.gk-stone.p0{background:#1f2937;border-color:#000}
.gk-stone.p1{background:#fff;border-color:#94a3b8}
.gk-pname{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk-turn,.gk-turn-ind{font-size:16px;font-weight:700;color:var(--muted);padding:8px 16px;background:#f8fafc;border-radius:999px}
.gk-turn.me,.gk-turn-ind.me{color:var(--ink);background:#fef3c7}
.gk-turn.opp,.gk-turn-ind.opp{color:var(--blue-d);background:#f0f9ff}
.gk-board{display:grid;gap:1px;background:#92400e;border:6px solid #92400e;border-radius:10px;box-shadow:0 6px 0 #78350f;margin:4px auto;width:100%;max-width:360px}
.gk-9{grid-template-columns:repeat(9,1fr)}
.gk-15{grid-template-columns:repeat(15,1fr)}
.gk-cell{aspect-ratio:1;background:#fde68a;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .1s}
.gk-cell:hover{background:#fcd34d}
.gk-cell.p0::after{content:"";display:block;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4b5563,#1f2937 70%);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.gk-cell.p1::after{content:"";display:block;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#e5e7eb 70%);border:1px solid #94a3b8;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.gk-cell.last::after{box-shadow:0 0 0 2px #ef4444,0 1px 3px rgba(0,0,0,.4)}
.gk-cell.win::after{box-shadow:0 0 0 3px #fbbf24,0 0 12px #fbbf24;animation:c4win .8s infinite}
.gk-tip{font-size:13px;color:var(--muted);text-align:center;padding:0 8px}

/* 新游戏小屏响应式 */
@media (max-width:480px){
  .mole-hole .mole-emoji{font-size:30px}
  .mole-board{max-width:240px;gap:8px}
  .mole-sc b{font-size:22px}
  .c4-board{max-width:300px;gap:4px;padding:6px;border-width:6px}
  .gk-board{max-width:300px}
  .simon-pads{width:240px}
  .simon-pad{border-radius:14px}
}