:root{
  --pink:#ff7e5f; --blue:#2f6ca6; --bg:#f2f6fb;
  --sun1:#f9a03f; --gold:#f0a43a; --sun3:#ff6b6b;
  --ocean-deep:#1d4e89;
  --ink:#2b3a55; --card:#ffffff; --line:#dce6f1;
  --ok:#3aa76d; --no:#e05252;
}
.gradsun{background:linear-gradient(115deg,var(--sun1),var(--pink) 45%,var(--blue))!important}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
}
.shell{max-width:1060px;margin:0 auto;padding:16px 16px 60px}
.topbar{background:linear-gradient(115deg,var(--sun1),var(--pink) 45%,var(--blue));color:#fff;padding:22px 22px;border-radius:18px;box-shadow:0 6px 18px rgba(45,108,166,.28)}
.topbar h1{margin:0;font-size:22px;letter-spacing:.5px}
.topbar .sub{margin-top:6px;font-size:13px;opacity:.92}
.back{display:inline-block;color:#fff;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;text-decoration:none;font-size:13px;margin-bottom:14px}
.section{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-top:18px;overflow:hidden;box-shadow:0 3px 10px rgba(60,80,150,.06)}
.section>h2{margin:0;padding:14px 18px;font-size:16px;background:linear-gradient(115deg,rgba(249,160,63,.12),rgba(47,108,166,.10));border-bottom:1px solid var(--line)}
.section>h2 .tag{float:right;font-size:11px;font-weight:600;color:var(--blue);background:rgba(74,127,199,.12);padding:3px 10px;border-radius:999px}
.pad{padding:18px}

/* game frame */
.game{border:1px dashed var(--line);border-radius:12px;padding:18px;margin-bottom:16px;background:#fcfcfe}
.game:last-child{margin-bottom:0}
.game h3{margin:0 0 4px;font-size:15px;color:var(--blue)}
.game .hint{font-size:12px;color:#7b88a6;margin-bottom:12px}

.btn{display:inline-block;border:0;border-radius:10px;padding:10px 18px;font-size:14px;cursor:pointer;font-family:inherit;font-weight:600;transition:.15s}
.btn.pink{background:var(--pink);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.gray{background:#eef0f8;color:var(--ink)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.flip{perspective:900px;height:118px;cursor:pointer}
.flip .in{width:100%;height:100%;position:relative;transition:transform .45s;transform-style:preserve-3d}
.flip.flipped .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;text-align:center;border:1px solid var(--line);background:#fff}
.face.fr{transform:rotateY(180deg);background:linear-gradient(135deg,var(--sun1),var(--pink),var(--blue));color:#fff}
.face .w{font-weight:700;font-size:15px}
.face .t{font-size:12px;color:#7b88a6}
.face.fr .t{color:#fdeff6}

/* quiz */
.quizq{font-size:17px;font-weight:700;margin:14px 0 12px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;word-break:break-word}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.opt{border:2px solid var(--line);border-radius:11px;background:#fff;padding:11px 14px;font-size:14px;cursor:pointer;font-family:inherit;text-align:center;transition:.12s}
.opt:hover{border-color:var(--blue)}
.opt.right{border-color:var(--ok);background:#e7f5ec;color:var(--ok)}
.opt.wrong{border-color:var(--no);background:#fdeaea;color:var(--no)}
.msg{min-height:26px;margin-top:12px;font-weight:600;font-size:14px}
.msg.right{color:var(--ok)} .msg.wrong{color:var(--no)}
.score{float:right;font-size:12px;color:#7b88a6;background:#eef0f8;padding:3px 10px;border-radius:999px}

/* scramble */
.scram{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.letter{width:44px;height:48px;border:2px solid var(--blue);border-radius:9px;background:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blue)}
.letter.pick{background:var(--blue);color:#fff}
.letter:disabled{background:#eef0f8;color:#b9c2d6;border-color:var(--line);cursor:default}
.letter.go{background:var(--gold);color:#fff;border-color:var(--gold)}

/* matching */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.col{display:flex;flex-direction:column;gap:8px}
.mopt{border:2px solid var(--line);border-radius:10px;background:#fff;padding:9px 12px;font-size:13px;cursor:pointer}
.mopt.sel{border-color:var(--pink);background:#fdeef5}
.mopt.ok{border-color:var(--ok);background:#e7f5ec;color:var(--ok)}
.mopt.bad{border-color:var(--no);background:#fdeaea;color:var(--no)}

/* input answer */
.typein{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.typein input{border:2px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px;width:220px;font-family:inherit;text-align:center}
.typein input:focus{outline:none;border-color:var(--blue)}

/* picture desc */
.pic{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.pcard{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;text-align:center;cursor:pointer}
.pcard .emoji{font-size:38px;line-height:1.1}
.pcard .en{font-weight:700;font-size:14px;margin-top:6px;color:var(--pink)}
.pcard .t{font-size:11px;color:#7b88a6;margin-top:2px}
.topmenu{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.tchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.tchip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.hidden{display:none!important}
.note{background:#fff7e8;border:1px solid #f2ddb0;color:#8a6d1f;border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.mono{font-family:"Courier New",monospace}
.big{font-size:20px}