:root{--bg:#172d46;--panel:#203e5f;--panel2:#2b557d;--text:#f8fbff;--muted:#b9c9d8;--gold:#ffd166;--pink:#75d6ff;--mint:#83efbc;--line:rgba(255,255,255,.11)}
.app{width:min(100%,760px)}.hero-icons span{font-size:38px}.flashcard{position:relative;width:min(100%,570px);height:360px;margin:18px auto 0;padding:0;border:0;border-radius:30px;color:var(--text);background:transparent;cursor:pointer;perspective:1200px}.card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;border:1px solid var(--line);border-radius:30px;box-shadow:0 24px 70px rgba(0,0,0,.24);backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.75,.25,1);overflow:hidden}.card-front{background:radial-gradient(circle at 20% 10%,rgba(117,214,255,.22),transparent 38%),var(--panel)}.card-back{background:radial-gradient(circle at 85% 15%,rgba(131,239,188,.2),transparent 38%),var(--panel2);transform:rotateY(180deg)}.flashcard.flipped .card-front{transform:rotateY(-180deg)}.flashcard.flipped .card-back{transform:rotateY(0)}.card-label{position:absolute;top:24px;color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.card-emoji{font-size:62px}.card-word{margin-top:14px;color:white;font-size:clamp(42px,10vw,68px);letter-spacing:-.04em;text-transform:uppercase}.card-front small{margin-top:24px;color:var(--muted);font-weight:700}.card-meaning{color:var(--gold);font-size:clamp(30px,7vw,48px)}.card-back p{margin:24px 0 8px;font-size:20px;font-weight:800;line-height:1.5}.example-vi{color:var(--muted);font-size:15px;line-height:1.6}.listen-hint{margin-top:24px;color:var(--mint);font-size:13px;font-weight:800}.flip-hint{min-height:24px;margin:18px 0 0;color:var(--muted);font-size:14px}.study-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:570px;margin:14px auto 0;visibility:hidden;opacity:0;transition:.2s}.study-actions.visible{visibility:visible;opacity:1}.study-actions .secondary-button{margin:0}.score-panel strong{color:var(--mint)}@media(max-width:560px){.app{padding:0 14px}.flashcard{height:330px}.card-face{padding:24px 20px}.card-back p{font-size:17px}.study-actions{gap:8px}.study-actions button{min-height:54px}}
.card-back-word{margin-bottom:8px;color:var(--mint);font-size:18px;text-transform:uppercase}@media(prefers-reduced-motion:reduce){.card-face{transition:none}}
.meaning-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:570px;margin:12px auto 0}.meaning-button{min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:15px;color:white;background:rgba(32,62,95,.9);font-weight:800;cursor:pointer}.meaning-button:hover{border-color:var(--gold)}.meaning-button.correct{border-color:var(--mint);background:rgba(131,239,188,.2)}.meaning-button.wrong{border-color:#ff7597;background:rgba(255,117,151,.2)}.meaning-button:disabled{cursor:default}.next-button{display:none;max-width:570px;margin:14px auto 0}.next-button.visible{display:block}@media(max-width:560px){.meaning-grid{grid-template-columns:1fr}.flashcard{height:300px}.card-emoji{font-size:48px}.card-word{font-size:clamp(36px,10vw,52px)}}
.card-front .card-word{margin-top:0}
.card-phonetic,.card-back-phonetic{color:var(--muted);font-family:Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.03em}.card-phonetic{margin-top:8px}.card-back-phonetic{margin:-4px 0 10px}