.game-entry { display:flex; width:100%; align-items:center; gap:12px; padding:17px; margin:14px 0 18px; border:1px solid #ece2f5; background:#fff; border-radius:20px; text-align:left; color:#77628e; }
.game-entry-icon { display:grid; place-items:center; flex:none; width:41px; height:44px; border-radius:14px; background:#fbefd9; color:#c6a368; }
.game-entry > span:nth-child(2) { flex:1; min-width:0; }.game-entry strong { display:block; font-size:13px; }.game-entry small { display:block; margin-top:6px; font-size:11px; color:#8e7e9c; }.game-entry-points { display:flex; align-items:center; gap:5px; flex:none; color:#a783ba; font-size:11px; }.game-entry-points .ui-icon { width:17px; height:17px; }
.game-welcome { display:flex; align-items:center; gap:21px; padding:20px; border-radius:24px; background:#f0eafa; }.game-buddy { width:118px; height:132px; }.game-welcome h2 { font-size:22px; line-height:1.6; margin:8px 0; }.game-welcome p { font-size:12px; color:#827090; line-height:1.9; margin-bottom:0; }
.game-wallet { display:flex; align-items:center; justify-content:space-between; padding:18px 23px; margin:20px 0; background:#fff; border:1px solid var(--line); border-radius:20px; }.game-wallet > div { display:flex; align-items:center; gap:10px; color:#ba9766; }.game-wallet strong { font-size:28px; color:#9071ac; }.game-wallet span { font-size:12px; color:#967ead; }.game-wallet > span { padding:7px 10px; background:#f4eefa; border-radius:11px; }
.game-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-top:20px; }.game-mode-card { display:flex; flex-direction:column; gap:11px; align-items:flex-start; text-align:left; border:0; padding:25px; border-radius:22px; min-height:185px; color:#75618a; }.game-mode-card > .ui-icon { width:37px; height:37px; color:#9c83c4; }.game-mode-card.mint > .ui-icon { color:#7fafa1; }.game-mode-card strong { font-size:18px; }.game-mode-card span { font-size:12px; color:#8b7a99; }.game-mode-card small { font-size:11px; color:#9c8eaa; margin-top:6px; }
.game-helper { text-align:center; margin:23px 0; font-size:12px; color:#8c7b9b; line-height:1.8; }.game-play { max-width:620px; margin:0 auto; }.game-live-points { display:flex; align-items:center; gap:5px; color:#b38c58; }.game-live-points .ui-icon { width:20px; height:20px; }
.game-dots { display:flex; gap:9px; }.game-dots > span { height:6px; background:#ece7f4; border-radius:7px; flex:1; }.game-dots > .active { background:#b99ed8; }
.game-question { margin:24px 0; text-align:center; }.game-question .soft-kicker { justify-content:center; }.game-question-orb,.game-listen-orb { display:grid; place-items:center; width:83px; height:86px; margin:20px auto 14px; border:0; border-radius:26px; background:#e9f4ef; color:#8ab8aa; }.game-question-orb .ui-icon,.game-listen-orb .ui-icon { width:48px; height:48px; }.game-listen-orb { background:#eee6fa; color:#a38ac9; }.game-question h1 { font-size:26px; margin:12px 0 9px; line-height:1.5; }.game-question > p { font-size:12px; color:#8f7ca0; margin:0; }.game-question .quiet-action .ui-icon { width:17px; height:17px; }
.game-answer-list { display:grid; gap:12px; }.game-answer { display:flex; align-items:center; gap:14px; width:100%; padding:17px 18px; background:#fff; border:1px solid #e6dcef; border-radius:17px; text-align:left; color:#756285; }.game-answer > span { display:grid; place-items:center; flex:none; width:33px; height:35px; border-radius:11px; color:#cab4df; background:#f3edf9; }.game-answer > div { flex:1; min-width:0; }.game-answer strong { font-size:18px; font-weight:550; line-height:1.55; }.game-answer .parts-ipa { display:block; font-size:12px; color:#9682a7; }.game-answer.correct { background:#edf7f0; border-color:#9fc7b5; color:#5e8b76; opacity:1; }.game-answer.try-again { border-color:#e1c5a1; background:#fbf3e9; }.game-answer:disabled:not(.correct) { opacity:.65; }
.game-feedback { margin:18px 0; padding:17px; background:#fcf3e8; border:1px solid #f1e1ca; border-radius:17px; color:#9e805f; font-size:13px; line-height:1.7; }.game-feedback.correct { background:#edf7f0; border-color:#d6eadd; color:#628770; }.game-feedback p { margin:6px 0; font-size:12px; }.game-feedback .parts-ipa { display:block; }.game-feedback .secondary { margin-top:11px; }.game-next { margin-top:23px; }
.game-result { max-width:600px; margin:0 auto; text-align:center; }.game-result .completed-buddy { margin-top:8px; }.game-result h1 { font-size:25px; line-height:1.6; }.round-points { color:#b7935f; font-size:43px; font-weight:650; margin:12px 0; }.round-points span { font-size:13px; margin-left:8px; }.game-result > p { font-size:12px; color:#8b779a; line-height:1.8; }.game-result-words { text-align:left; background:#fff; border:1px solid var(--line); border-radius:22px; padding:5px 20px; margin:23px 0; }.game-result-words > div { padding:16px 43px 16px 0; border-bottom:1px solid var(--line); position:relative; }.game-result-words > div:last-child { border:0; }.game-result-words strong,.game-result-words small,.game-result-words .parts-ipa { display:block; }.game-result-words strong { font-size:16px; font-weight:600; }.game-result-words small { margin-top:3px; font-size:12px; color:#9984a9; }.game-result-words .secondary { position:absolute; top:20px; right:0; padding:7px; }.game-result > .quiet-action { margin-top:13px; }
.profile-game-points { display:flex; align-items:center; gap:10px; padding:18px; margin-bottom:21px; background:#faf0df; border:1px solid #f0e1c8; border-radius:19px; color:#b4935e; }.profile-game-points > span:not(.ui-icon) { flex:1; font-size:12px; color:#98826b; }.profile-game-points strong { font-size:19px; color:#b28b52; }.profile-game-points .secondary { flex:none; }
@media(max-width:540px) { .game-mode-grid { grid-template-columns:1fr; gap:13px; }.game-mode-card { min-height:150px; padding:21px; }.game-welcome { gap:12px; padding:16px; }.game-buddy { width:90px; height:107px; }.game-welcome h2 { font-size:17px; }.game-welcome p { font-size:11px; }.game-question h1 { font-size:23px; }.game-answer strong { font-size:16px; }.game-entry { padding:14px; gap:9px; }.game-entry strong { font-size:12px; }.game-entry small { font-size:10px; }.game-entry-points { font-size:10px; }.game-entry-icon { width:35px; height:38px; }.game-result h1 { font-size:21px; }.profile-game-points { flex-wrap:wrap; }.profile-game-points > span:not(.ui-icon) { min-width:155px; } }