:root{
  color-scheme: light dark;
  --bg-grad-1:#ffffff; --bg-grad-2:#f2f4f7;
  --text:#111827; --muted:#374151; --hint:#4b5563;
  --panel:#ffffff; --panel-border:#d1d5db; --shadow:0 8px 30px rgba(0,0,0,.06);
  --primary:#2563eb; --primary-contrast:#ffffff;
  --tag-bg:#e5e7eb; --tag-text:#111827;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);background:linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--panel-border);z-index:10}
.header .bar{display:flex;gap:10px;align-items:center;padding:12px 16px}
.header h1{font-size:18px;margin:0;color:var(--text)} .badge{font-size:12px;color:var(--text);
  background:#eef2ff;border:1px solid #e5e7eb;padding:2px 8px;border-radius:12px}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px 14px;
  border:1px solid var(--panel-border);background:#fff;border-radius:12px;cursor:pointer;font-weight:700;color:var(--text);transition:transform .04s ease, box-shadow .15s ease}
.btn:hover{box-shadow:var(--shadow)} .btn:active{transform:translateY(1px)} .btn.small{padding:6px 10px;border-radius:10px;font-size:14px} .btn.full{width:100%}
.btn.cta{background:var(--primary);color:var(--primary-contrast);border-color:#1d4ed8}
.grid{display:grid;gap:16px} .grid.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;box-shadow:var(--shadow)}
.card .card-head{padding:16px 18px;border-bottom:1px solid var(--panel-border);display:flex;align-items:center;gap:12px}
.card .card-title{font-weight:800;margin:0;font-size:18px;color:var(--text)}
.card .card-desc{margin:0;color:var(--muted);font-size:15px}
.card .card-body{padding:16px 18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.tag{font-size:12px;padding:4px 10px;background:var(--tag-bg);color:var(--tag-text);border:1px solid var(--panel-border);border-radius:999px}
.title-xl{font-size:28px;font-weight:900;margin:6px 0 4px;color:var(--text)}
.subtitle{color:var(--muted);margin:0 0 16px;font-size:16px}
.hint{color:var(--hint);font-size:13px;text-align:center;margin-top:8px}
.footerhint{color:var(--hint);font-size:12px;margin-top:24px;text-align:center}
.levels{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.levels .btn{font-size:13px;padding:6px 10px}
.levels .btn.active{background:#111827;color:#fff;border-color:#111827}
.board-ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:300px;margin:0 auto}
.board-ttt button{height:92px;font-size:30px;font-weight:900;border-radius:12px}
.board-memory{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:360px;margin:0 auto}
.board-memory button{height:90px;font-size:30px;font-weight:900;border-radius:16px}
.board-snake{display:grid;grid-template-columns:repeat(18,1fr);gap:3px;width:396px;margin:0 auto}
.board-snake .cell{width:18px;height:18px;border-radius:4px;background:#e5e7eb}
.board-snake .cell.food{background:#ef4444} .board-snake .cell.snake{background:#10b981}
.board-mole{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:360px;margin:0 auto}
.mole-hole{position:relative;height:110px;border-radius:16px;background:#f3f4f6;overflow:hidden;box-shadow:inset 0 -8px 0 rgba(0,0,0,.05)}
.mole-bump{position:absolute;left:12px;right:12px;bottom:14px;height:46px;border-radius:999px;background:#d4d4d8}
.mole{position:absolute;left:50%;transform:translateX(-50%);bottom:62px;font-size:32px}
.canvas-wrap{display:flex;justify-content:center} canvas.game{background:#f3f4f6;border:1px solid var(--panel-border);border-radius:16px;box-shadow:var(--shadow)}