.en-home { border:3px solid var(--ink); border-radius:18px; padding:20px; margin:0 0 18px; background:linear-gradient(120deg,#f3edff,#e8f7ff); box-shadow:0 5px 0 #26334c22; display:flex; align-items:center; gap:20px; }
.en-home svg { width:96px; height:96px; flex-shrink:0; }
.en-home h2 { margin:5px 0 8px; font-size:24px; }
.en-home p { font-size:13px; line-height:1.6; color:#56617b; }
.en-home-copy { flex:1; }
.en-home .btn { margin-top:12px; }
.en-tag { display:inline-block; color:#6751a8; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:900; }
.en-app[hidden] { display:none !important; }
.en-app { position:fixed; inset:0; z-index:1500; overflow:auto; background:#f5f4fc; color:#253654; padding:24px 20px 60px; overscroll-behavior:contain; }
.en-shell { max-width:760px; margin:auto; }
.en-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px; }
.en-top span { font-size:12px; color:#736c8b; }
.en-app button,.en-app input,.en-app select { font:inherit; }
.en-app button { cursor:pointer; touch-action:manipulation; }
.en-app button:disabled { opacity:.48; cursor:default; }
.en-app button:focus-visible,.en-app input:focus-visible,.en-app select:focus-visible { outline:3px solid #087fbf; outline-offset:4px; }
.en-field { display:block; margin:18px 0; font-size:13px; color:#625478; }
.en-field select,.en-field input { display:block; width:100%; min-width:0; margin-top:8px; min-height:48px; padding:12px; border:2px solid #d4cce9; border-radius:12px; background:white; color:#433858; font-size:15px; }
.en-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.en-btn { border:0; border-radius:13px; padding:15px 22px; min-height:48px; font-weight:700; background:#6953b8; color:white; box-shadow:0 4px 0 #493882; }
.en-btn:hover:not(:disabled) { background:#5943a6; }
.en-btn.secondary { background:#eae6f7; color:#4c3a83; box-shadow:none; }
.en-btn.secondary:hover:not(:disabled) { background:#ded6f1; color:#3f2e70; }
.en-link { border:0; background:none; color:#6751a8; padding:10px 4px; text-decoration:underline; text-underline-offset:4px; font-size:13px !important; }
.en-card { border:1px solid #e2deef; background:white; border-radius:24px; padding:32px; box-shadow:0 12px 40px #352b6810; }
.en-card h1 { font-size:clamp(26px,5vw,38px); line-height:1.15; margin:10px 0 14px; letter-spacing:-.04em; }
.en-card p { font-weight:500; color:#68637b; line-height:1.65; font-size:15px; }
.en-intro { display:grid; grid-template-columns:1fr 155px; align-items:center; gap:14px; }
.en-hero-art { width:155px; height:155px; border-radius:50%; padding:15px; background:#fff1ca; }
.en-stats { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.en-stats span { background:#f3f1fa; color:#625478; padding:9px 12px; border-radius:9px; font-size:12px; }
.en-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center; }
.en-note { margin-top:16px !important; font-size:12px !important; }
.en-reward-note { padding:14px 18px; background:#fff5d9; border-radius:12px; margin-top:24px; font-size:13px; line-height:1.6; }
.en-progress-head { display:flex; justify-content:space-between; color:#726986; font-size:12px; margin-bottom:10px; gap:10px; }
.en-progress { height:8px; background:#e8e3f4; border-radius:8px; overflow:hidden; margin-bottom:24px; }
.en-progress i { display:block; height:100%; background:#8f7bd4; transition:width .2s; }
.en-question { text-align:center; }
.en-question h2 { font-size:21px; margin:8px 0 24px; }
.en-prompt { font-size:clamp(24px,5vw,38px); margin:10px 0 28px; color:#43336c; font-weight:900; overflow-wrap:anywhere; }
.en-picture { width:150px; height:150px; margin:0 auto 18px; display:block; background:#f1f6fc; padding:14px; border-radius:24px; }
.en-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.en-option { min-height:68px; border:2px solid #e1ddec; border-radius:14px; padding:16px 10px; background:#fff; color:#433858; font-size:17px !important; }
.en-option:hover:not(:disabled) { border-color:#8f7bd4; background:#f8f5ff; }
.en-answer { width:100%; max-width:410px; padding:17px; border:2px solid #d4cce9; border-radius:13px; text-align:center; font-size:26px !important; background:#fdfcff; user-select:text; }
.en-answer-form .en-btn { display:block; margin:18px auto 0; min-width:180px; }
.en-letters { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0; }
.en-letter { min-width:43px; height:50px; border:1px solid #b9aada; border-bottom-width:4px; border-radius:10px; background:#f2edff; color:#493781; font-size:22px !important; text-transform:lowercase; }
.en-built { min-height:64px; width:100%; padding:12px; border:2px dashed #c5bbdc; border-radius:12px; color:#45316c; background:#faf8ff; font-size:27px; letter-spacing:.08em; overflow-wrap:anywhere; }
.en-build-controls { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; }
.en-hint { padding:14px; background:#fff5d8; border-radius:12px; line-height:1.7; margin:18px 0; color:#675327; font-size:14px; }
.en-hint span { display:block; font-size:12px; font-weight:500; }
.en-feedback-icon { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 18px; border-radius:50%; background:#e1f4ea; color:#24724e; font-size:35px; }
.en-feedback-icon.again { background:#fff0d9; color:#99601f; }
.en-feedback-word { font-size:clamp(24px,5vw,35px); color:#4d3b79; margin:18px 0 4px; overflow-wrap:anywhere; }
.en-feedback-ru { color:#746a83; margin-bottom:20px; }
.en-example { background:#f5f3fb; padding:17px; border-radius:12px; font-size:16px; line-height:1.8; }
.en-example span { display:block; font-size:13px; color:#766b88; font-weight:500; }
.en-result-number { font-size:60px; font-weight:900; color:#6953b8; letter-spacing:-.05em; margin:18px 0 0; }
.en-difficult { margin:20px 0; background:#fff6e7; border-radius:14px; padding:18px; text-align:left; }
.en-difficult h3 { font-size:15px; margin-bottom:8px; }
.en-difficult p { font-size:13px; }
.en-word-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.en-word-card { border:1px solid #e4dff0; border-radius:16px; padding:18px; background:white; }
.en-word-card svg { width:65px; height:65px; float:right; margin-left:8px; }
.en-word-card h3 { color:#594583; font-size:19px; margin:7px 0; }
.en-word-card p { font-size:13px; }
.en-word-card small { display:block; clear:both; margin-top:16px; line-height:1.6; color:#776c84; font-weight:500; }
.en-skill { display:inline-block; border-radius:6px; padding:5px 7px; background:#f0edf7; font-size:10px; margin:7px 4px 0 0; color:#766d86; }
.en-skill.ready { background:#e0f4e9; color:#236448; }
.en-status { font-size:11px; color:#8b7a9c; }
.en-error { margin-top:18px; padding:14px; border:1px solid #efd3ce; background:#fff3ee; color:#983d31; border-radius:12px; font-size:13px; line-height:1.6; }
.en-loader { text-align:center; padding:60px 20px; color:#76658d; }
@media(max-width:520px) {
  .en-home { gap:8px; padding:16px; }
  .en-home svg { width:65px; height:65px; }
  .en-home h2 { font-size:21px; }
  .en-app { padding:16px 12px 40px; }
  .en-card { padding:24px 18px; border-radius:19px; }
  .en-top { margin-bottom:18px; }
  .en-intro { grid-template-columns:1fr 85px; }
  .en-hero-art { width:85px; height:85px; padding:6px; }
  .en-intro h1 { font-size:27px; }
  .en-word-grid { grid-template-columns:1fr; }
  .en-options { gap:9px; }
  .en-option { font-size:15px !important; }
  .en-letter { min-width:36px; height:45px; }
}
@media(prefers-reduced-motion:reduce) { .en-progress i { transition:none; } }