:root{
  --bg:#0f172a; /* slate-900 */
  --fg:#e2e8f0; /* slate-200 */
  --muted:#94a3b8; /* slate-400 */
  --accent:#38bdf8; /* sky-400 */
  --green:#10b981;
  --red:#ef4444;
}
html,body{height:100%;}
body{
  margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Noto Sans JP", "Helvetica Neue", Arial, "PingFang TC", "Heiti TC", sans-serif;
  background: linear-gradient(180deg, #0b1220, var(--bg)); color:var(--fg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.app{width:min(1100px, 100%);}
header{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-bottom:16px}
h1{font-size:clamp(24px, 5vw, 40px); margin:0; letter-spacing:0.02em}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
.card-wrap{display:grid; place-items:center; margin:16px 0 10px}

/* Flip Card */
.card{ width:min(720px, 90vw); height:min(360px, 56vw); perspective: 1200px; position:relative; }
.inner{ position:relative; width:100%; height:100%; transition: transform 0.45s ease; transform-style: preserve-3d; }
.flipped .inner{ transform: rotateY(180deg); }

.face{ position:absolute; inset:0; border-radius:20px; padding:28px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.front{ background: radial-gradient(1200px 500px at 20% -20%, rgba(56,189,248,.18), transparent), #0b1220; border:1px solid rgba(148,163,184,.35); }
.back { background: radial-gradient(1200px 500px at 80% 120%, rgba(16,185,129,.18), transparent), #0b1220; border:1px solid rgba(148,163,184,.35); transform: rotateY(180deg); }

.jp{font-size: clamp(28px, 6.5vw, 56px); line-height:1.2; text-align:center; font-weight:700;}
.sub{position:absolute; left:20px; top:18px; font-size:14px; color:var(--muted)}

/* 控制列 */
.controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
select, button{ height:40px; border-radius:10px; border:1px solid rgba(148,163,184,.35); color:var(--fg); background:#0b1220;}
select{ padding:0 12px; min-width:200px;}
#level{ min-width: 320px; } /* 讓 Level 下拉較清楚 */

.btns{ display:flex; gap:10px; margin-left:auto;}
button{ padding:0 16px; cursor:pointer; transition: transform .06s ease, opacity .2s ease; }
button:active{ transform: translateY(1px); }
.btn-remember{ border-color: rgba(16,185,129,.5); }
.btn-next{ border-color: rgba(56,189,248,.5); }

.meta{ display:flex; gap:14px; align-items:center; color:var(--muted); font-size:14px; }
.badge{ padding:4px 8px; border:1px solid rgba(148,163,184,.35); border-radius:999px; }

.empty{ text-align:center; color:var(--muted); margin:28px 0; }
.footer-hint{ margin-top:10px; color:var(--muted); font-size:13px; text-align:center }
.hidden{ display:none !important; }