:root{
  --sun:#ffd23f; --sun-d:#f5b700; --sky:#4cc9f0; --sky-d:#1fa5d3;
  --coral:#ff6b6b; --coral-d:#e04848; --mint:#3ddc97; --mint-d:#1fb877;
  --grape:#9b5de5; --grape-d:#7a3fc4; --ink:#2b2d42; --paper:#fffdf5;
  --bg1:#fff6d6; --bg2:#e0f7ff; --card:#ffffff; --muted:#6b6f85;
  --shadow:0 6px 0 rgba(43,45,66,.18);
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:linear-gradient(160deg,var(--bg1),var(--bg2));min-height:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%,rgba(255,210,63,.35) 0 80px,transparent 81px),
    radial-gradient(circle at 92% 18%,rgba(76,201,240,.30) 0 60px,transparent 61px),
    radial-gradient(circle at 80% 90%,rgba(255,107,107,.22) 0 90px,transparent 91px),
    transparent;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit}
.wrap{max-width:960px;margin:0 auto;padding:16px}

/* 顶栏 */
.topbar{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
  border:3px solid var(--ink);border-radius:20px;padding:8px 14px;box-shadow:var(--shadow);
  position:sticky;top:10px;z-index:20}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:20px;text-decoration:none}
.logo .duck{font-size:28px;display:inline-block;animation:wobble 2.4s ease-in-out infinite}
.top-right{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--sun);border:3px solid var(--ink);
  border-radius:999px;padding:4px 12px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
.icon-btn{background:#fff;border:3px solid var(--ink);border-radius:12px;width:40px;height:40px;
  font-size:18px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.icon-btn:active{transform:translateY(3px);box-shadow:none}

/* 按钮 */
.btn{font:inherit;font-weight:900;font-size:18px;border:3px solid var(--ink);border-radius:16px;
  padding:12px 20px;cursor:pointer;background:var(--sun);color:var(--ink);
  box-shadow:0 5px 0 var(--ink);transition:transform .08s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(5px);box-shadow:none}
.btn.sky{background:var(--sky)} .btn.coral{background:var(--coral);color:#fff}
.btn.mint{background:var(--mint)} .btn.grape{background:var(--grape);color:#fff}
.btn.white{background:#fff}
.btn.small{font-size:15px;padding:8px 14px;border-radius:12px;box-shadow:0 4px 0 var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 卡片 */
.card{background:var(--card);border:3px solid var(--ink);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
h1,h2,h3{margin:.3em 0}
.muted{color:var(--muted)}
.center{text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* 吉祥物 */
.mascot{display:flex;align-items:flex-end;gap:12px;margin:18px 0}
.mascot .face{font-size:64px;line-height:1;animation:bounce 1.6s ease-in-out infinite;cursor:pointer;user-select:none}
.bubble{position:relative;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:12px 16px;
  font-weight:700;box-shadow:var(--shadow);flex:1;min-height:52px}
.bubble:before{content:"";position:absolute;left:-14px;bottom:14px;border:10px solid transparent;
  border-right-color:var(--ink)}
.bubble:after{content:"";position:absolute;left:-9px;bottom:16px;border:8px solid transparent;border-right-color:#fff}

/* 模式选择 */
.mode{cursor:pointer;text-align:center;transition:transform .15s}
.mode:hover{transform:translateY(-4px) rotate(1deg)}
.mode .emo{font-size:46px}
.mode.active{outline:5px dashed var(--coral);outline-offset:4px}

/* 游戏区 */
.stage{margin-top:18px}
.big-q{font-size:clamp(34px,9vw,60px);font-weight:900;text-align:center;margin:10px 0;letter-spacing:1px}
.answer-input{font:inherit;font-size:28px;font-weight:800;text-align:center;width:100%;max-width:360px;
  border:3px solid var(--ink);border-radius:16px;padding:10px;background:var(--paper);outline:none}
.answer-input:focus{border-color:var(--sky-d);box-shadow:0 0 0 4px rgba(76,201,240,.35)}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.choice{font:inherit;font-size:20px;font-weight:800;padding:14px;border:3px solid var(--ink);border-radius:16px;
  background:#fff;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.choice:active{transform:translateY(4px);box-shadow:none}
.choice.right{background:var(--mint)} .choice.wrong{background:var(--coral);color:#fff;animation:shake .4s}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:56px;padding:10px;
  border:3px dashed #c9cbe0;border-radius:16px;margin:10px 0}
.chip{font:inherit;font-size:20px;font-weight:800;padding:8px 14px;border:3px solid var(--ink);border-radius:12px;
  background:var(--sun);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.chip.placed{background:var(--sky)}
.feedback{min-height:34px;font-size:20px;font-weight:900;text-align:center;margin-top:10px}
.feedback.good{color:var(--mint-d)} .feedback.bad{color:var(--coral-d)}
.bar{height:16px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;background:#fff}
.bar>i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--mint) 0 12px,var(--mint-d) 12px 24px);transition:width .3s}
.bar.hot>i{background:repeating-linear-gradient(45deg,var(--coral) 0 12px,var(--coral-d) 12px 24px)}
.stats{display:flex;justify-content:space-between;font-weight:800;margin:8px 0}
.hidden{display:none!important}

/* 首页岛屿 */
.hero{text-align:center;padding:26px 10px 6px}
.hero h1{font-size:clamp(30px,7vw,52px);line-height:1.15}
.hero h1 .wiggle{display:inline-block;animation:wobble 1.8s ease-in-out infinite}
.island{display:block;text-decoration:none;position:relative;overflow:hidden;padding:26px}
.island .emo{font-size:72px;display:inline-block;transition:transform .3s}
.island:hover .emo{transform:scale(1.15) rotate(-8deg)}
.island.en{background:linear-gradient(160deg,#c9f2ff,#fff)}
.island.ma{background:linear-gradient(160deg,#ffe3e3,#fff)}
.island .tag{position:absolute;top:14px;right:-34px;transform:rotate(35deg);background:var(--coral);color:#fff;
  font-weight:900;padding:4px 40px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.joke-box{font-size:18px;font-weight:700;min-height:60px}
.footer{text-align:center;color:var(--muted);font-size:14px;padding:30px 0 20px}

/* 动画 */
@keyframes wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .35s ease-out}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:999px;font-weight:800;z-index:60;animation:pop .3s}

@media (max-width:520px){
  .wrap{padding:12px 16px}
  .logo span.txt{font-size:16px}
  .choices{grid-template-columns:1fr}
  .mascot .face{font-size:52px}
  .btn{font-size:16px;padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}