.english-card { border-color:#ffd75c99; background:linear-gradient(120deg,#173d4dcc,#31523a99); }
.english-card .game-icon { background:linear-gradient(135deg,#45d78f,#ffd75c); }
.english-app { --gold:#ffd75c; --green:#45d78f; --blue:#57b8ff; --purple:#8b6cff; color:#f9f7ff; }
.english-topbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-bottom:16px; }
.english-brand { display:flex; justify-content:center; align-items:center; gap:10px; }.english-brand>span { font-size:2.2rem; }.english-brand div { display:grid; }.english-brand small,.section-kicker { color:var(--gold); font-size:.7rem; font-weight:900; letter-spacing:.14em; }.english-brand strong { font-size:1.1rem; }.sound-toggle { padding:10px 13px; color:#fff; background:#ffffff16; }
.player-panel { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; gap:18px; align-items:center; padding:20px; border:1px solid #ffffff22; border-radius:24px; background:linear-gradient(120deg,#322769dd,#172a51dd); box-shadow:0 18px 50px #0005; }.player-avatar { display:grid; place-items:center; width:76px; height:76px; border:3px solid var(--gold); border-radius:24px; background:#1a2047; font-size:2.7rem; }.welcome { color:var(--green); font-size:.68rem; font-weight:900; letter-spacing:.14em; }.player-main h2 { margin:2px 0 8px; font-size:1.55rem; }.level-row { display:flex; justify-content:space-between; gap:15px; color:#d7d3e9; font-size:.8rem; }.exp-track,.mission-progress,.quiz-progress { height:9px; overflow:hidden; border-radius:999px; background:#0b102c99; }.exp-track span,.mission-progress span,.quiz-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green),var(--gold)); transition:width .35s; }.wallet { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }.wallet span { padding:8px 11px; border-radius:999px; background:#ffffff12; font-size:.84rem; }
.adventure-nav { display:flex; gap:8px; margin:16px 0; padding:7px; overflow:auto; border:1px solid #ffffff18; border-radius:18px; background:#101431bb; }.adventure-tab { flex:1 0 auto; color:#cac6df; background:transparent; }.adventure-tab.active { color:#17172a; background:var(--gold); }
.adventure-panel { display:none; }.adventure-panel.active { display:block; }.dashboard-grid { display:grid; grid-template-columns:1.2fr 1.2fr .8fr; gap:14px; }.dashboard-grid article { min-height:180px; padding:20px; border:1px solid #ffffff1f; border-radius:22px; background:#171b3dcc; }.dashboard-grid h3 { margin:10px 0; font-size:1.35rem; }.dashboard-grid p { color:#cbc7dd; }.mission-card { background:linear-gradient(145deg,#46276ddd,#2a1c55dd)!important; }.mission-progress { margin-top:24px; }.continue-card { background:linear-gradient(145deg,#12504cdd,#17304bdd)!important; }.primary-adventure { margin-top:8px; background:var(--gold); }.stats-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #ffffff17; }.stats-row b { color:var(--green); }
.panel-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:10px 4px 18px; }.panel-heading h2 { margin:3px 0; }.panel-heading p { color:#c5c1d9; }.world-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.world-card { position:relative; min-height:190px; padding:20px; overflow:hidden; border:1px solid #ffffff25; border-radius:24px; color:#fff; text-align:left; background:linear-gradient(145deg,#246c53,#123c3c); }.world-card:nth-child(2) { background:linear-gradient(145deg,#7250a7,#382762); }.world-card:nth-child(3) { background:linear-gradient(145deg,#245f9b,#17385f); }.world-card.locked { filter:saturate(.35); opacity:.62; }.world-card .world-icon { display:block; font-size:3rem; }.world-card strong { display:block; margin:8px 0 4px; font-size:1.12rem; }.world-card small { color:#e3e0ef; }.world-stars { position:absolute; right:16px; top:16px; }.world-lock { position:absolute; right:16px; bottom:16px; }
.quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.quick-card { display:grid; justify-items:start; min-height:210px; padding:24px; border:1px solid #ffffff27; border-radius:24px; color:#fff; text-align:left; }.quick-card.vocab { background:linear-gradient(145deg,#147357,#18443e); }.quick-card.grammar { background:linear-gradient(145deg,#744db5,#382763); }.quick-card>span { font-size:3.5rem; }.quick-card strong { margin-top:18px; font-size:1.25rem; }.quick-card small { margin-top:5px; color:#e5e2ef; }
.leaderboard-list { overflow:hidden; border:1px solid #ffffff20; border-radius:22px; background:#171b3dcc; }.leader-row { display:grid; grid-template-columns:55px 1fr auto auto; gap:14px; align-items:center; padding:15px 20px; border-bottom:1px solid #ffffff13; }.leader-row:last-child { border:0; }.leader-rank { font-size:1.25rem; font-weight:900; }.leader-player { display:flex; align-items:center; gap:10px; }.leader-avatar { font-size:1.65rem; }.leader-level { color:#c7c3da; }.leader-score { color:var(--gold); font-weight:900; }
.quiz-panel { margin-top:12px; }.quiz-panel[hidden] { display:none; }.quiz-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }.quiz-head>div { display:flex; gap:14px; align-items:center; }.quiz-head span { color:var(--gold); font-weight:900; }.quiz-score { padding:9px 14px; border-radius:999px; background:#ffffff13; }.quiz-progress { margin:12px 0 18px; }.question-card { max-width:760px; margin:auto; padding:28px; border:1px solid #ffffff25; border-radius:28px; text-align:center; background:linear-gradient(145deg,#222653ee,#151735ee); box-shadow:0 22px 60px #0005; }.question-art { font-size:4.3rem; }.difficulty { display:inline-block; margin-top:8px; padding:5px 9px; border-radius:999px; color:#17172a; background:var(--green); font-size:.65rem; font-weight:900; }.question-card h2 { margin:14px auto 6px; max-width:620px; font-size:clamp(1.45rem,4vw,2.15rem); letter-spacing:-.02em; }.question-card>p { color:#c9c5dc; }.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }.answer-button { min-height:64px; border:1px solid #7168a3; border-radius:16px; color:#fff; background:#28294f; text-align:left; }.answer-button.correct { color:#10251f; background:#6bf0bd; }.answer-button.wrong { color:#fff; background:#d84c74; }.answer-button:disabled { cursor:default; }.answer-feedback { min-height:54px; padding-top:14px; color:#e9e6f3; line-height:1.5; }.next-question { background:var(--gold); }
@media(max-width:760px) { .player-panel { grid-template-columns:auto 1fr; }.wallet { grid-column:1/-1; justify-content:flex-start; }.dashboard-grid { grid-template-columns:1fr; }.world-map { grid-template-columns:1fr 1fr; }.panel-heading { align-items:flex-start; flex-direction:column; gap:2px; }.leader-row { grid-template-columns:42px 1fr auto; }.leader-level { display:none; } }
@media(max-width:520px) { .english-topbar { grid-template-columns:auto 1fr auto; }.english-brand>span { display:none; }.english-brand strong { font-size:.82rem; }.player-panel { padding:15px; gap:12px; }.player-avatar { width:58px; height:58px; border-radius:18px; font-size:2rem; }.player-main h2 { font-size:1.15rem; }.world-map,.answer-grid,.quick-grid { grid-template-columns:1fr; }.question-card { padding:20px 15px; border-radius:20px; }.answer-button { min-height:56px; }.adventure-tab { padding:10px 12px; } }