/* 掩耳盗铃 — shared look: night navy, gold, red felt, white cards with a hard offset shadow (approved mockups). */
@font-face { font-family: "YDL Kai"; src: url("fonts/wenkai-sub.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "YDL Play"; src: url("fonts/kuaile-sub.woff2") format("woff2"); font-display: block; }
:root {
  --navy: #1c2266; --navy-deep: #121748; --night: #0b0f33; --tile: #2a3290;
  --red: #d22630; --red-dark: #9e1620; --red-deep: #7a0f18; --gold: #ffd23f; --gold-dark: #d9a400;
  --ink: #1b1f4a; --quiet: #5a608f; --py: #3d4fae; --en: #c9cdf2; --green: #1f9d55; --green-dark: #136b39;
  --sans: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --kai: "YDL Kai", "Kaiti SC", "STKaiti", KaiTi, serif;
  --play: "YDL Play", var(--sans);
  --felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy-deep); color: var(--ink); font-family: var(--sans);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; background: none; touch-action: manipulation; }
.en { display: none; font-family: var(--sans); font-weight: 500; }
.show-en .en { display: block; }
.py { visibility: hidden; }
.show-pinyin .py, .py.always { visibility: visible; }
/* big friendly buttons */
.btn { min-height: 56px; padding: 0 26px; border-radius: 12px; font: 700 24px/1 var(--sans); color: #fff; background: var(--green); box-shadow: 4px 4px 0 var(--green-dark); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--green-dark); }
.btn.gold { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--gold-dark); }
.btn.navy { background: var(--navy); box-shadow: 4px 4px 0 var(--night); }
.card { background: #fff; border-radius: 16px; box-shadow: 6px 6px 0 var(--night); }