:root {
  --telegram-safe-top: 0px;
  --telegram-safe-bottom: 0px;
  --ink: #102f66;
  --muted: #63769e;
  --surface: #fff;
  --surface-soft: #f1f7ff;
  --line: #dce8fb;
  --blue: #287af5;
  --green: #0ab879;
  --orange: #ff9d1a;
  --danger: #d95050;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: #eaf4ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; }
.sound-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid #d4e3f8; border-radius: 99px; background: rgba(255,255,255,.8); color: #32659e; font-size: .73rem; font-weight: 800; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease; white-space: nowrap; }.sound-control:hover, .sound-control:focus-visible { transform: translateY(-1px); border-color: #5890df; background: #f5faff; }.sound-control svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.sound-control.is-on { color: #1c69bb; }.sound-control.is-off { border-color: #dacbc2; color: #966d5a; background: #fff9f4; }
.app-shell { width: min(100%, 1160px); min-height: 100vh; margin: 0 auto; padding: calc(16px + var(--telegram-safe-top)) 20px calc(104px + var(--telegram-safe-bottom)); background: linear-gradient(155deg, #f4f9ff, #eef6ff 45%, #fff8eb); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 20px; }
.brand { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 850; letter-spacing: -.06em; }
.brand span { color: var(--orange); }
.brand small { display: block; font-size: .7rem; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
.header-stats { display: flex; gap: 8px; }
.mini-stat { min-width: 64px; padding: 7px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: .78rem; color: var(--muted); }
.mini-stat strong { display: block; color: var(--ink); font-size: 1rem; }
.hero, .panel, .game-card, .result-card { border-radius: 26px; background: var(--surface); border: 1px solid rgba(208, 225, 249, .95); box-shadow: 0 12px 30px rgba(40, 91, 158, .08); }
.hero { overflow: hidden; padding: 28px; background: radial-gradient(circle at 85% 20%, #ffca6d, transparent 30%), linear-gradient(135deg, #153d83, #286fd8); color: white; }
.hero-kicker { margin: 0 0 8px; opacity: .85; font-weight: 650; }
.hero h1 { margin: 0; max-width: 460px; font-size: clamp(1.8rem, 8vw, 3.2rem); line-height: 1.08; }
.hero p { margin: 14px 0 0; max-width: 430px; font-size: 1rem; line-height: 1.5; }
.section-title { margin: 28px 2px 12px; font-size: 1.2rem; }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.game-card { min-height: 224px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; position: relative; }
.game-card::after { content: ""; position: absolute; width: 115px; height: 115px; right: -42px; bottom: -52px; border-radius: 50%; background: rgba(255,255,255,.55); }
.game-card--words { background: linear-gradient(145deg, #e4f4ff, #f9fcff); }
.game-card--phrases { background: linear-gradient(145deg, #f1eaff, #fbfaff); }
.game-card--speed { background: linear-gradient(145deg, #fff2d8, #fffdf8); }
.game-card__top { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: space-between; }
.game-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: var(--ink); box-shadow: 0 6px 13px rgba(20,70,130,.14); font-size: .85rem; font-weight: 850; letter-spacing: .04em; }
.game-card--phrases .game-card__icon { background: #7856c9; }.game-card--speed .game-card__icon { background: #dc8511; }
.game-card__badge { padding: 5px 8px; border-radius: 99px; color: var(--blue); background: rgba(255,255,255,.78); font-size: .68rem; font-weight: 750; }
.game-card h3 { position: relative; z-index: 1; margin: 18px 0 6px; font-size: 1.17rem; }
.game-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.game-card button { margin-top: auto; width: 100%; }
.button { border: 0; border-radius: 14px; padding: 13px 16px; cursor: pointer; color: white; font-weight: 750; background: var(--blue); transition: transform .15s ease, opacity .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.button--green { background: var(--green); }
.button--soft { color: var(--ink); background: var(--surface-soft); }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.summary { padding: 16px; text-align: center; }
.summary strong { display: block; font-size: 1.45rem; }
.summary span { color: var(--muted); font-size: .79rem; }
.ad-slot { display: flex; align-items: center; gap: 12px; margin-top: 18px; min-height: 74px; padding: 12px 15px; border: 1px solid #c8d8ef; border-radius: 18px; color: var(--ink); background: rgba(255,255,255,.82); box-shadow: 0 7px 16px rgba(39,81,140,.08); text-decoration: none; }.ad-slot img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; }.ad-slot__copy { display: grid; gap: 3px; min-width: 0; }.ad-slot__copy small { color: #a2772c; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.ad-slot__copy strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }.ad-slot__copy em { overflow: hidden; color: var(--muted); font-size: .74rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.ad-slot__arrow { margin-left: auto; color: #2d78cd; font-size: 1.2rem; font-weight: 850; }
.bottom-nav { position: fixed; z-index: 3; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1160px); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + var(--telegram-safe-bottom)); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 25px rgba(30,70,126,.1); }
.nav-button { border: 0; background: transparent; padding: 9px 4px; border-radius: 14px; color: var(--muted); cursor: pointer; font-size: .75rem; font-weight: 700; }
.nav-button.active { color: var(--blue); background: #eaf3ff; }
.game-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.back { border: 0; background: transparent; color: var(--ink); font-size: 1.6rem; cursor: pointer; padding: 4px; }
.game-progress { flex: 1; height: 12px; background: #dce7f6; border-radius: 99px; overflow: hidden; }
.game-progress span { display: block; height: 100%; background: linear-gradient(90deg, #1bcc85, #60dc9b); border-radius: inherit; }
.question-count { font-weight: 750; white-space: nowrap; }
.question-card { padding: clamp(20px, 6vw, 38px); text-align: center; }
.question-card .instruction { color: var(--muted); margin: 0; }
.question-word { margin: 18px 0 4px; font-size: clamp(2.4rem, 12vw, 4.6rem); line-height: 1; }
.pronunciation { margin: 0; color: var(--muted); }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; }
.choice { min-height: 64px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); padding: 12px; cursor: pointer; font-weight: 750; }
.choice:hover, .choice:focus-visible { border-color: var(--blue); }
.choice.correct { color: #087350; border-color: var(--green); background: #eafff6; }
.choice.wrong { color: #a63232; border-color: var(--danger); background: #fff0f0; }
.feedback { min-height: 28px; margin: 18px 0 0; font-weight: 700; }
.result-card { padding: clamp(24px, 6vw, 42px); text-align: center; }
.result-card__top { position: relative; display: flex; justify-content: center; align-items: center; min-height: 36px; }.result-card__top .sound-control { position: absolute; right: 0; }
.result-card h1 { margin: 0; font-size: 2rem; }
.trophy { margin: 20px 0 4px; font-size: 4rem; }
.score { font-size: 3.4rem; font-weight: 850; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.result-grid div { padding: 14px 8px; border-radius: 16px; background: var(--surface-soft); }
.result-grid strong { display: block; font-size: 1.15rem; }
.result-grid span { color: var(--muted); font-size: .76rem; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.message { padding: 14px 16px; border-radius: 14px; background: #fff3d8; color: #84551d; }
.message.error { background: #fff0f0; color: #a63232; }
.skeleton { min-height: 160px; border-radius: 26px; background: linear-gradient(90deg, #eaf2fc 25%, #f8fbff 50%, #eaf2fc 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.games-hero { position: relative; min-height: 238px; overflow: hidden; border-radius: 30px 30px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 47% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }.games-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,35,84,.82), rgba(13,55,119,.47) 61%, rgba(10,45,98,.08)); }.games-hero__copy { position: relative; z-index: 1; max-width: 480px; padding: 37px clamp(25px, 5vw, 60px); color: white; }.games-hero__copy p { margin: 0 0 9px; color: #d5eaff; font-size: .82rem; font-weight: 750; }.games-hero__copy h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.45rem); letter-spacing: -.06em; line-height: .98; }.games-hero__copy span { display: block; margin-top: 13px; color: #e9f4ff; font-size: .96rem; line-height: 1.4; }.games-raven { position: absolute; z-index: 1; right: clamp(20px, 8vw, 120px); bottom: -29px; width: min(285px, 34%); max-height: 278px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(6,28,69,.35)); }.games-page { position: relative; z-index: 2; margin: -15px clamp(5px, 3vw, 34px) 0; padding: clamp(24px, 5vw, 40px); border: 2px solid #caa354; background: linear-gradient(145deg, rgba(255,254,247,.98), rgba(239,247,255,.96)); }.games-page__kicker { margin: 0; color: #a2772c; font-size: .74rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.games-page h2 { margin: 5px 0 23px; font-size: clamp(1.65rem, 4vw, 2.35rem); letter-spacing: -.055em; }.games-page .game-card { min-height: 208px; }

/* Home: CSS atmosphere and layout; the raven itself is a real PNG asset. */
.home-page { position: relative; isolation: isolate; }
.home-page::before { content: ""; position: absolute; z-index: -1; inset: 76px -8vw auto; height: 340px; background: radial-gradient(ellipse at 65% 35%, rgba(255, 210, 116, .47), transparent 42%), radial-gradient(ellipse at 10% 10%, rgba(121, 193, 255, .28), transparent 48%); pointer-events: none; }
.home-topbar { min-height: 70px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.home-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 850; font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.07em; line-height: .85; }
.home-brand > span:last-child > span { color: var(--orange); }
.home-brand small { display: block; margin-top: 6px; color: var(--muted); font-size: .62rem; letter-spacing: 0; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px 13px 16px 16px; color: white; background: linear-gradient(145deg, #174fa7, #0e2f70); font-size: 1.24rem; font-family: Georgia, serif; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 16px rgba(22,71,143,.18); }
.home-language { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #d4e3f8; border-radius: 99px; background: rgba(255,255,255,.78); color: var(--ink); font-size: .82rem; font-weight: 760; white-space: nowrap; }
.home-language__flag { width: 19px; height: 19px; border-radius: 50%; box-shadow: 0 1px 3px rgba(30,54,88,.18); }
.home-stat { min-width: 54px; padding: 4px 4px; text-align: center; color: var(--ink); font-size: .9rem; }
.home-stat span { font-size: 1.05rem; }
.home-stat strong { margin-left: 3px; font-size: 1.05rem; }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, .93fr) minmax(260px, 1.07fr); min-height: 400px; overflow: hidden; padding: 42px clamp(28px, 5vw, 64px); border: 1px solid rgba(255,255,255,.6); border-radius: 34px; background: url("../../assets/assets/home-hero-bg.png") center center / cover no-repeat; box-shadow: 0 20px 44px rgba(28, 84, 164, .23); color: white; }
.home-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 35, 88, .84) 0%, rgba(13, 51, 115, .58) 38%, rgba(11, 50, 102, .06) 72%); }
.home-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(transparent, rgba(5, 30, 72, .24)); pointer-events: none; }
.home-hero__copy { position: relative; z-index: 1; align-self: center; max-width: 400px; }
.hero-kicker { margin: 0 0 12px; color: #d7ebff; font-weight: 750; font-size: .86rem; }
.home-hero h1 { margin: 0; max-width: 310px; font-size: clamp(2.35rem, 5vw, 4rem); line-height: .96; letter-spacing: -.06em; }
.home-hero__copy > p:not(.hero-kicker) { max-width: 300px; margin: 18px 0 24px; color: #e8f4ff; line-height: 1.5; }
.button--hero { padding: 15px 18px; border: 1px solid rgba(255,255,255,.42); background: linear-gradient(135deg, #ffb325, #ff8616); box-shadow: 0 9px 18px rgba(90,57,6,.24); }
.button--hero span { margin-left: 8px; font-size: 1.2rem; }
.raven-stage { position: relative; z-index: 1; align-self: end; min-height: 335px; }
.raven-glow { position: absolute; z-index: -1; top: 32px; right: 5%; width: min(290px, 82%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,225,150,.54), rgba(255,212,112,.12) 48%, transparent 70%); }
.raven-main { position: absolute; right: -8px; bottom: -43px; display: block; width: min(400px, 115%); max-height: 400px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 20px 13px rgba(6,31,78,.36)); }
.continue-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 5% 0; padding: 17px 19px; border: 1px solid #dceafd; border-radius: 21px; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(30,83,148,.11); }
.continue-card p { margin: 0 0 2px; color: var(--muted); font-size: .76rem; font-weight: 700; }.continue-card h2 { margin: 0; font-size: 1.15rem; }.continue-card span { color: var(--muted); font-size: .78rem; }
.round-action { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; color: white; background: var(--green); font-size: 1.45rem; cursor: pointer; box-shadow: 0 7px 13px rgba(6,147,94,.23); }
.home-games { margin-top: 28px; }
.home-games__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 2px 13px; }
.home-games__heading p { margin: 0 0 3px; color: #a2772c; font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.home-games__heading h2 { margin: 0; color: var(--ink); font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.045em; }
.home-games__all { border: 0; padding: 7px 0; color: var(--blue); background: transparent; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.home-games__all:hover { color: var(--blue-deep); text-decoration: underline; }
.home-quote { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 19px; border-radius: 19px; color: #30568f; background: linear-gradient(120deg, #e8f4ff, #fdf9ee); }.home-quote span { color: var(--orange); font-size: 1.4rem; }.home-quote p { margin: 0; font-weight: 680; font-size: .92rem; }

/* Language selection: artwork is separate from the real parchment UI. */
.language-page { position: relative; padding-bottom: 12px; }
.language-topbar { display: flex; align-items: center; gap: 14px; min-height: 70px; }
.language-back { color: var(--ink); }
.language-artwork { position: relative; min-height: 314px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 48% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }
.language-artwork__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,34,83,.83) 0%, rgba(13,55,119,.48) 48%, rgba(10,45,98,.04) 80%); }
.language-artwork__copy { position: relative; z-index: 1; max-width: 420px; padding: 48px clamp(26px, 5vw, 64px); color: white; }.language-artwork__copy p { margin: 0 0 10px; color: #d7ebff; font-weight: 700; }.language-artwork__copy h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.02; letter-spacing: -.055em; }.language-artwork__copy span { display: block; margin-top: 17px; color: #e8f4ff; }
.language-raven { position: absolute; z-index: 1; right: clamp(12px, 5vw, 78px); bottom: -34px; width: min(330px, 37%); max-height: 335px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 12px rgba(6,28,69,.35)); }
.language-panel { position: relative; z-index: 2; margin: -22px clamp(8px, 5vw, 68px) 0; padding: 28px clamp(20px, 4vw, 44px); border: 2px solid #d9b960; border-radius: 26px; background: linear-gradient(135deg, #fffdf6, #fff7df 57%, #fffdf7); box-shadow: 0 18px 35px rgba(48,78,125,.22), inset 0 0 0 6px rgba(255,255,255,.64); }
.language-panel::before, .language-panel::after { content: ""; position: absolute; width: 24px; height: 24px; border: solid #bb9132; opacity: .8; }.language-panel::before { left: 12px; top: 12px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }.language-panel::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }
.language-panel__ornament { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #d9b960; border-radius: 50%; background: #fff9e9; color: #bd9130; font-size: 1.15rem; }
.language-panel header { position: relative; text-align: center; }.language-panel header p { margin: 0; color: #b8892f; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.language-panel header h2 { margin: 7px 0 5px; font-size: clamp(1.75rem, 4vw, 2.45rem); letter-spacing: -.045em; }.language-panel header span { color: var(--muted); font-size: .92rem; }
.language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 25px 0; }
.language-card { position: relative; display: flex; align-items: center; min-height: 106px; gap: 14px; padding: 15px; overflow: hidden; border: 1px solid #e5d9b6; border-radius: 18px; background: rgba(255,255,255,.78); color: var(--ink); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.language-card:hover { transform: translateY(-2px); border-color: #5793f1; box-shadow: 0 10px 18px rgba(42,98,174,.13); }.language-card.selected { border: 2px solid #2c7cf2; background: linear-gradient(135deg, #eff7ff, #fffdf8); box-shadow: 0 10px 18px rgba(42,98,174,.15); }.language-card img { width: 49px; height: 49px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 3px 8px rgba(28,54,97,.18); }.language-card__copy { display: grid; gap: 2px; min-width: 0; }.language-card__copy strong { font-size: 1.05rem; }.language-card__copy small { color: var(--muted); font-size: .84rem; }.language-card__copy em { color: #9a7a39; font-size: .72rem; font-style: normal; font-weight: 700; }.language-card__check { position: absolute; right: 12px; top: 12px; display: none; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #2b80f5; color: white; font-size: .8rem; font-weight: 900; }.language-card.selected .language-card__check { display: grid; }
.language-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid #eadfbe; }.language-panel footer p { max-width: 270px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.35; }.button--language { min-width: 180px; background: linear-gradient(135deg, #0d5fc9, #1d91ed); box-shadow: 0 8px 17px rgba(20,98,195,.22); }.button--language span { margin-left: 8px; font-size: 1.2rem; }

/* Words arena: world artwork above a real, interactive parchment game board. */
.words-page { position: relative; padding-bottom: 12px; }.words-topbar { display: flex; align-items: center; gap: 14px; min-height: 70px; }.words-back { color: var(--ink); }.words-title { margin-left: auto; padding: 6px 0; text-align: right; color: var(--ink); font-size: 1.05rem; font-weight: 850; }.words-title span { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.words-artwork { position: relative; min-height: 286px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 55% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }.words-artwork__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,35,84,.84), rgba(13,55,119,.48) 51%, rgba(10,45,98,.04) 82%); }.words-artwork__copy { position: relative; z-index: 1; padding: 42px clamp(26px, 5vw, 64px); color: white; }.words-artwork__copy p { margin: 0 0 9px; color: #d5eaff; font-size: .84rem; font-weight: 750; }.words-artwork__copy h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.55rem); line-height: .96; letter-spacing: -.065em; }.words-artwork__copy span { display: block; margin-top: 15px; color: #e9f4ff; font-size: 1rem; }.words-raven { position: absolute; z-index: 1; right: clamp(14px, 7vw, 110px); bottom: -36px; width: min(298px, 35%); max-height: 302px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(6,28,69,.35)); }
.words-progress { position: absolute; z-index: 2; right: clamp(22px, 5vw, 64px); bottom: 24px; display: flex; align-items: center; gap: 12px; width: min(310px, 37%); padding: 12px 15px; border: 1px solid rgba(255,255,255,.46); border-radius: 99px; background: rgba(7,36,85,.72); backdrop-filter: blur(7px); color: white; }.words-progress__track { flex: 1; height: 11px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.26); }.words-progress__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16c880, #9df0b1); box-shadow: 0 0 12px rgba(85,236,161,.72); }.words-progress strong { font-size: .87rem; white-space: nowrap; }
.words-panel { position: relative; z-index: 2; max-width: 860px; margin: -25px auto 0; padding: 28px clamp(21px, 4vw, 48px) 32px; border: 2px solid #d9b960; border-radius: 27px; background: linear-gradient(135deg, #fffdf7, #fff7e1 60%, #fffdf8); box-shadow: 0 19px 38px rgba(40,72,118,.23), inset 0 0 0 6px rgba(255,255,255,.65); text-align: center; }.words-panel::before, .words-panel::after { content: ""; position: absolute; width: 24px; height: 24px; border: solid #bb9132; opacity: .8; }.words-panel::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }.words-panel::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }.words-panel__ornament { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #d9b960; border-radius: 50%; background: #fff9e9; color: #bd9130; font-size: 1.15rem; }
.words-panel .instruction { margin: 0; color: var(--muted); font-size: .9rem; }.words-panel .question-word { margin: 14px 0 5px; color: var(--ink); font-size: clamp(2.45rem, 7vw, 4.8rem); line-height: .95; letter-spacing: -.06em; }.words-panel .pronunciation { margin: 0; color: #7d8eaf; font-size: 1rem; }.words-panel .choices { margin-top: 27px; gap: 13px; }.words-panel .choice { min-height: 73px; border: 1px solid #ded5b9; border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 6px 11px rgba(63,83,111,.1); font-size: 1.08rem; transition: transform .14s ease, border-color .14s ease, background .14s ease; }.words-panel .choice:hover:not(:disabled), .words-panel .choice:focus-visible { transform: translateY(-2px); border-color: #307eed; background: #f1f8ff; box-shadow: 0 9px 15px rgba(33,105,196,.15); }.words-panel .choice.correct { color: #087350; border: 2px solid #13bd7a; background: linear-gradient(135deg, #e9fff3, #f8fffb); }.words-panel .choice.wrong { color: #a63232; border: 2px solid #db6262; background: #fff3f2; }.words-panel .choice:disabled { cursor: default; opacity: .78; }.words-panel .feedback { min-height: 25px; margin: 18px 0 0; color: #1c805d; font-weight: 800; }.words-panel .feedback:not(:empty) { padding-top: 2px; }.button--next { min-width: 208px; margin-top: 2px; background: linear-gradient(135deg, #079d68, #19ca8b); box-shadow: 0 9px 17px rgba(7,130,83,.2); }.button--next span { margin-left: 8px; font-size: 1.2rem; }
.speakable-word { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 5px; }.words-panel .question-word--speakable { margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; transition: color .14s ease, transform .14s ease; }.words-panel .question-word--speakable:hover, .words-panel .question-word--speakable:focus-visible { color: #236fca; transform: translateY(-1px); }.pronounce-button { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 1px solid #92b8e9; border-radius: 50%; background: #edf6ff; color: #1d68bd; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; }.pronounce-button:hover, .pronounce-button:focus-visible { transform: translateY(-2px); border-color: #246fca; background: #ddecff; }.pronounce-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

/* Phrases arena reuses the academy scene and parchment language of Words. */
.phrases-artwork { position: relative; min-height: 286px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 48% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }
.phrases-panel { position: relative; z-index: 2; max-width: 900px; margin: -25px auto 0; padding: 28px clamp(21px, 4vw, 48px) 32px; border: 2px solid #d9b960; border-radius: 27px; background: linear-gradient(135deg, #fffdf7, #fff7e1 60%, #fffdf8); box-shadow: 0 19px 38px rgba(40,72,118,.23), inset 0 0 0 6px rgba(255,255,255,.65); text-align: center; }
.phrases-panel::before, .phrases-panel::after { content: ""; position: absolute; width: 24px; height: 24px; border: solid #bb9132; opacity: .8; }.phrases-panel::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }.phrases-panel::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }
.phrases-panel .instruction { margin: 0; color: var(--muted); font-size: .9rem; }.phrase-prompt { margin: 12px auto 21px; color: var(--ink); font-size: clamp(1.65rem, 4vw, 2.45rem); line-height: 1.08; letter-spacing: -.04em; }
.phrase-prompt-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 21px; }.phrase-prompt-row .phrase-prompt { margin: 0; }
.phrase-answer { display: flex; align-items: flex-start; gap: 12px; min-height: 87px; padding: 12px; border: 1px dashed #c9b17a; border-radius: 18px; background: rgba(255,255,255,.56); text-align: left; }.phrase-answer--filled { border-style: solid; background: rgba(255,255,255,.76); }.phrase-answer__tiles { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 58px; }.phrase-answer__empty { width: 100%; color: #8d96a9; font-size: .9rem; text-align: center; }
.phrase-selected { display: inline-flex; overflow: hidden; border: 1px solid #92b9ed; border-radius: 11px; background: #edf6ff; box-shadow: 0 3px 6px rgba(42,93,161,.1); }.phrase-selected > button { border: 0; padding: 8px 10px; background: transparent; color: #154f9d; font-weight: 800; cursor: pointer; }.phrase-selected > button:hover:not(:disabled) { background: #dceeff; }.phrase-order { display: inline-flex; border-left: 1px solid #b7d1f3; }.phrase-order button { width: 20px; padding: 0; border: 0; color: #265d9e; background: transparent; cursor: pointer; font-weight: 900; }.phrase-order button:hover:not(:disabled) { background: #dceeff; }.phrase-order button:disabled, .phrase-selected > button:disabled { cursor: default; opacity: .62; }
.phrase-reset { flex: 0 0 auto; padding: 9px 11px; border: 1px solid #d4be87; border-radius: 11px; color: #83622a; background: #fffaf0; font-size: .82rem; font-weight: 750; cursor: pointer; }.phrase-reset:disabled { opacity: .45; cursor: default; }
.phrase-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 5px; }.phrase-tile { min-height: 48px; padding: 10px 17px; border: 1px solid #d8c797; border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.93); box-shadow: 0 5px 9px rgba(71,83,103,.1); font-weight: 800; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; }.phrase-tile:hover:not(:disabled), .phrase-tile:focus-visible { transform: translateY(-2px); border-color: #2f7dea; background: #f0f8ff; }.phrase-tile:disabled { color: #9aa7ba; background: #f2f0e9; box-shadow: none; cursor: default; }.phrases-panel .feedback { min-height: 25px; margin: 17px 0 0; color: #1c805d; font-weight: 800; }.button--phrase-check { min-width: 208px; margin-top: 2px; background: linear-gradient(135deg, #0d5fc9, #1d91ed); box-shadow: 0 9px 17px rgba(20,98,195,.2); }

/* Speed Arena keeps the same academy setting, with a stronger timer hierarchy. */
.speed-artwork { position: relative; min-height: 286px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 45% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }.speed-timer { position: absolute; z-index: 2; right: clamp(24px, 7vw, 86px); bottom: 23px; display: grid; min-width: 136px; padding: 9px 17px; border: 1px solid rgba(255,218,121,.8); border-radius: 17px; background: linear-gradient(135deg, #143f89, #0a285d); color: white; text-align: center; box-shadow: 0 9px 17px rgba(6,26,65,.3); }.speed-timer span { color: #ffd979; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.speed-timer strong { margin-top: 2px; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.speed-panel { position: relative; z-index: 2; max-width: 860px; margin: -25px auto 0; padding: 28px clamp(21px, 4vw, 48px) 32px; border: 2px solid #d9b960; border-radius: 27px; background: linear-gradient(135deg, #fffdf7, #fff7e1 60%, #fffdf8); box-shadow: 0 19px 38px rgba(40,72,118,.23), inset 0 0 0 6px rgba(255,255,255,.65); text-align: center; }.speed-panel::before, .speed-panel::after { content: ""; position: absolute; width: 24px; height: 24px; border: solid #bb9132; opacity: .8; }.speed-panel::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }.speed-panel::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }.speed-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 auto 20px; max-width: 470px; }.speed-score > div { padding: 10px; border: 1px solid #dfcf9d; border-radius: 14px; background: rgba(255,255,255,.66); }.speed-score span { display: block; color: var(--muted); font-size: .72rem; font-weight: 700; }.speed-score strong { display: block; margin-top: 3px; color: var(--ink); font-size: 1.15rem; }.speed-panel .instruction { margin: 0; color: var(--muted); font-size: .9rem; }.speed-panel .question-word { margin: 14px 0 5px; color: var(--ink); font-size: clamp(2.45rem, 7vw, 4.8rem); line-height: .95; letter-spacing: -.06em; }.speed-panel .pronunciation { margin: 0; color: #7d8eaf; }.speed-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 26px; }.speed-choice { min-height: 72px; border: 1px solid #d3c18e; border-radius: 17px; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 6px 11px rgba(63,83,111,.1); font-size: 1.08rem; font-weight: 800; cursor: pointer; transition: transform .1s ease, border-color .1s ease, background .1s ease; }.speed-choice:hover:not(:disabled), .speed-choice:focus-visible { transform: translateY(-2px); border-color: #f1a62b; background: #fff8e8; box-shadow: 0 9px 15px rgba(176,110,18,.16); }.speed-choice:disabled { cursor: default; opacity: .65; }.speed-feedback { min-height: 22px; margin: 14px 0 0; color: #0e8d61; font-weight: 850; }
/* Statistics: the same academy world, with data-driven parchment sections. */
.stats-page { position: relative; padding-bottom: 12px; }.stats-artwork { position: relative; min-height: 286px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 47% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }.stats-artwork__copy { position: relative; z-index: 1; max-width: 440px; padding: 42px clamp(26px, 5vw, 64px); color: white; }.stats-artwork__copy p { margin: 0 0 9px; color: #d5eaff; font-size: .84rem; font-weight: 750; }.stats-artwork__copy h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.55rem); line-height: .96; letter-spacing: -.065em; }.stats-artwork__copy span { display: block; margin-top: 15px; color: #e9f4ff; font-size: 1rem; }.stats-raven { position: absolute; z-index: 1; right: clamp(18px, 7vw, 110px); bottom: -36px; width: min(298px, 35%); max-height: 302px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(6,28,69,.35)); }.stats-hero-metrics { position: absolute; z-index: 2; right: clamp(22px, 5vw, 64px); bottom: 24px; display: flex; gap: 8px; }.stats-hero-metrics span { padding: 10px 13px; border: 1px solid rgba(255,255,255,.46); border-radius: 99px; background: rgba(7,36,85,.74); backdrop-filter: blur(7px); color: white; font-size: .8rem; white-space: nowrap; }.stats-hero-metrics strong { color: #ffe394; }

/* Profile / Settings: real controls layered over the shared academy artwork. */
.profile-page { position: relative; padding-bottom: 12px; }.profile-artwork { position: relative; min-height: 286px; overflow: hidden; border-radius: 32px 32px 0 0; background: url("../../assets/assets/home-hero-bg.png") center 47% / cover no-repeat; box-shadow: 0 14px 32px rgba(25,75,140,.18); }.profile-artwork__copy { position: relative; z-index: 1; max-width: 440px; padding: 42px clamp(26px, 5vw, 64px); color: white; }.profile-artwork__copy p { margin: 0 0 9px; color: #d5eaff; font-size: .84rem; font-weight: 750; }.profile-artwork__copy h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.55rem); line-height: .96; letter-spacing: -.065em; }.profile-artwork__copy span { display: block; margin-top: 15px; color: #e9f4ff; font-size: 1rem; }.profile-raven { position: absolute; z-index: 1; right: clamp(18px, 7vw, 110px); bottom: -36px; width: min(298px, 35%); max-height: 302px; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(6,28,69,.35)); }.profile-hero-progress { position: absolute; z-index: 2; right: clamp(22px, 5vw, 64px); bottom: 24px; display: flex; gap: 8px; }.profile-hero-progress span { padding: 10px 13px; border: 1px solid rgba(255,255,255,.46); border-radius: 99px; background: rgba(7,36,85,.74); backdrop-filter: blur(7px); color: white; font-size: .8rem; white-space: nowrap; }.profile-hero-progress strong { color: #ffe394; }.profile-panel { position: relative; z-index: 2; margin: -18px clamp(5px, 3vw, 34px) 0; padding: 35px clamp(18px, 4vw, 42px) 38px; border: 2px solid #caa354; border-radius: 28px; background: linear-gradient(135deg, rgba(255,252,241,.98), rgba(255,247,224,.97)); box-shadow: 0 18px 38px rgba(40,75,126,.15), inset 0 0 0 5px rgba(255,255,255,.45); }.profile-summary { display: flex; align-items: center; gap: 14px; padding: 0 0 22px; border-bottom: 1px solid #eadfbe; }.profile-summary__mark { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 2px solid #f8df95; border-radius: 18px; color: #fff5cf; background: linear-gradient(145deg, #1d559e, #133c78); box-shadow: 0 7px 13px rgba(22,57,113,.2); font-family: Georgia, serif; font-size: 1.8rem; font-weight: 800; }.profile-summary p, .profile-section p { margin: 0; color: #a2772c; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.profile-summary h2 { margin: 4px 0 2px; color: var(--ink); font-size: 1.45rem; letter-spacing: -.035em; }.profile-summary span { color: var(--muted); font-size: .8rem; }.profile-section { padding: 21px 0; border-bottom: 1px solid #eadfbe; }.profile-section:last-child { border-bottom: 0; padding-bottom: 0; }.profile-section > header { display: flex; align-items: center; gap: 11px; }.profile-section__icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid #d5ba78; border-radius: 13px; color: #2768ae; background: #fff8e6; }.profile-section__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }.profile-section h3 { margin: 3px 0 0; color: var(--ink); font-size: 1.03rem; }.profile-link { margin-left: auto; border: 0; border-radius: 11px; padding: 8px 10px; color: #2369af; background: #edf6ff; font-size: .75rem; font-weight: 800; cursor: pointer; }.profile-link:hover { background: #dbeeff; }.profile-language-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }.profile-language { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #e4d4a8; border-radius: 15px; background: rgba(255,255,255,.72); }.profile-language img { width: 33px; height: 33px; border-radius: 50%; box-shadow: 0 3px 7px rgba(30,55,98,.15); }.profile-language strong, .profile-language small { display: block; }.profile-language strong { color: var(--ink); font-size: .88rem; }.profile-language small { margin-top: 2px; color: var(--muted); font-size: .71rem; }.profile-language em { margin-left: auto; padding: 4px 7px; border-radius: 99px; color: #91691e; background: #fff0c4; font-size: .62rem; font-style: normal; font-weight: 800; }.profile-empty { padding: 12px; border: 1px dashed #d8c48e; border-radius: 13px; color: var(--muted); font-size: .83rem; text-align: center; }.profile-setting-row { margin: 14px 0 0 49px; padding: 10px 12px; border: 1px solid #e4d4a8; border-radius: 14px; background: rgba(255,255,255,.62); }.profile-setting-row span, .profile-setting-row small { display: block; }.profile-setting-row span { color: var(--ink); font-size: .86rem; font-weight: 750; }.profile-setting-row small { margin-top: 3px; color: var(--muted); font-size: .71rem; line-height: 1.35; }.sound-control--profile { margin-left: auto; }.profile-toggle { position: relative; width: 46px; height: 26px; margin-left: auto; padding: 2px; border: 0; border-radius: 99px; background: #b9c5d3; cursor: pointer; transition: background .18s ease; }.profile-toggle span { display: block; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(28,52,92,.25); transition: transform .18s ease; }.profile-toggle.is-on { background: #2d83da; }.profile-toggle.is-on span { transform: translateX(20px); }.profile-details summary { display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none; }.profile-details summary::-webkit-details-marker { display: none; }.profile-details summary > span:nth-child(2) { display: grid; gap: 3px; }.profile-details summary small { color: #a2772c; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.profile-details summary strong { color: var(--ink); font-size: 1.03rem; }.profile-details summary b { margin-left: auto; color: #356da9; font-size: 1.1rem; transition: transform .16s ease; }.profile-details[open] summary b { transform: rotate(180deg); }.profile-details p { margin: 13px 0 0 49px; padding: 11px 13px; border-left: 3px solid #d5ae61; color: var(--muted); background: rgba(255,255,255,.48); font-size: .84rem; line-height: 1.5; letter-spacing: 0; text-transform: none; }.profile-details p small { color: var(--muted); }
.stats-panel { position: relative; z-index: 2; max-width: 980px; margin: -25px auto 0; padding: 31px clamp(21px, 4vw, 48px) 36px; border: 2px solid #d9b960; border-radius: 27px; background: linear-gradient(135deg, #fffdf7, #fff7e1 60%, #fffdf8); box-shadow: 0 19px 38px rgba(40,72,118,.23), inset 0 0 0 6px rgba(255,255,255,.65); }.stats-panel::before, .stats-panel::after { content: ""; position: absolute; width: 24px; height: 24px; border: solid #bb9132; opacity: .8; }.stats-panel::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }.stats-panel::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }.stats-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.stats-panel__header p, .stats-daily header p, .stats-weak header p { margin: 0; color: #b8892f; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.stats-panel__header h2 { margin: 7px 0 0; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1; letter-spacing: -.05em; }.button--stats-continue { flex: 0 0 auto; min-width: 156px; padding: 11px 14px; background: linear-gradient(135deg, #0d5fc9, #1d91ed); box-shadow: 0 8px 17px rgba(20,98,195,.22); }.button--stats-continue span { margin-left: 6px; font-size: 1.1rem; }
.stats-filters { display: flex; gap: 9px; margin: 25px -3px 22px; padding: 3px; overflow-x: auto; scrollbar-width: thin; }.stats-filter { flex: 0 0 auto; padding: 9px 13px; border: 1px solid #dfcf9d; border-radius: 99px; background: rgba(255,255,255,.68); color: #657695; font-size: .84rem; font-weight: 800; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease; }.stats-filter:hover, .stats-filter:focus-visible { transform: translateY(-1px); border-color: #5a91e6; }.stats-filter.active { border-color: #225fae; background: linear-gradient(135deg, #164c9b, #287bed); color: white; box-shadow: 0 6px 12px rgba(31,93,181,.2); }
.stats-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }.stats-summary-grid article { min-height: 121px; padding: 15px 11px; border: 1px solid #e0d1a3; border-radius: 18px; background: rgba(255,255,255,.74); box-shadow: 0 5px 10px rgba(73,84,104,.07); text-align: center; }.stats-summary-grid article > span { display: grid; place-items: center; width: 29px; height: 29px; margin: 0 auto 8px; border-radius: 10px; color: #ba8a2d; background: #fff2c9; font-family: Georgia, serif; font-size: 1.15rem; }.stats-summary-grid strong { display: block; color: var(--ink); font-size: 1.3rem; line-height: 1; }.stats-summary-grid small { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.stats-daily, .stats-language-list, .stats-weak { margin-top: 25px; padding-top: 23px; border-top: 1px solid #eadfbe; }.stats-daily header, .stats-weak header { display: flex; align-items: end; justify-content: space-between; gap: 14px; }.stats-daily h2, .stats-language-list h2, .stats-weak h2 { margin: 5px 0 0; color: var(--ink); font-size: 1.3rem; letter-spacing: -.035em; }.stats-daily header > strong { color: #1c6cc9; font-size: .92rem; }.stats-chart { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 9px; height: 164px; margin-top: 17px; padding: 13px 7px 0; border: 1px solid #e5d8b6; border-radius: 18px; background: linear-gradient(180deg, rgba(245,249,255,.85), rgba(255,255,255,.73)); }.stats-chart__column { display: grid; grid-template-rows: 20px 1fr 19px; align-items: end; justify-items: center; min-width: 0; height: 100%; }.stats-chart__value { min-height: 18px; color: #58729c; font-size: .68rem; font-weight: 800; }.stats-chart__bar { width: min(34px, 82%); height: var(--chart-height); min-height: 4px; align-self: end; border-radius: 10px 10px 5px 5px; background: linear-gradient(180deg, #69b7ff, #226bc5); box-shadow: 0 5px 10px rgba(34,107,197,.22); }.stats-chart__column small { margin-top: 5px; color: var(--muted); font-size: .67rem; font-weight: 750; text-transform: capitalize; }
.stats-language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }.stats-language-card { padding: 15px; border: 1px solid #e0d1a3; border-radius: 18px; background: rgba(255,255,255,.74); box-shadow: 0 5px 10px rgba(73,84,104,.07); }.stats-language-card header { display: flex; align-items: center; gap: 10px; }.stats-language-card header img, .weak-word img { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 3px 7px rgba(28,54,97,.14); }.stats-language-card header strong, .stats-language-card header span { display: block; }.stats-language-card header strong { font-size: .95rem; }.stats-language-card header span { margin-top: 2px; color: var(--muted); font-size: .72rem; }.stats-language-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0; }.stats-language-card__metrics span { color: var(--muted); font-size: .65rem; text-align: center; }.stats-language-card__metrics strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .95rem; }.stats-language-card footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #eee2c5; color: var(--muted); font-size: .73rem; }.stats-language-card footer strong { color: #a57520; }
.stats-weak header > span { padding: 6px 9px; border-radius: 99px; background: #fff3cc; color: #9c7226; font-size: .71rem; font-weight: 800; }.weak-word-list { display: grid; gap: 9px; margin-top: 15px; }.weak-word { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #e0d1a3; border-radius: 15px; background: rgba(255,255,255,.76); }.weak-word > div:nth-child(2) { min-width: 0; }.weak-word strong, .weak-word span { display: block; }.weak-word > div:nth-child(2) strong { font-size: .95rem; }.weak-word > div:nth-child(2) span { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }.weak-word__meta { margin-left: auto; color: var(--muted); font-size: .69rem; text-align: right; white-space: nowrap; }.weak-word__meta strong { color: #1d72c9; font-size: .84rem; }.stats-empty { margin: 15px 0 0; padding: 15px; border: 1px dashed #d9c58f; border-radius: 15px; color: var(--muted); font-size: .88rem; line-height: 1.45; text-align: center; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 720px) {
  .app-shell { padding: calc(12px + var(--telegram-safe-top)) 12px calc(94px + var(--telegram-safe-bottom)); }
  .sound-control { width: 34px; min-height: 34px; padding: 7px; gap: 0; }.sound-control span { display: none; }.sound-control svg { width: 18px; height: 18px; }.result-card__top .sound-control { right: -4px; }
  .home-topbar { gap: 5px; min-height: 57px; }.home-brand { font-size: 1.45rem; }.brand-mark { width: 34px; height: 34px; border-radius: 11px; }.home-language { padding: 7px 8px; font-size: .72rem; }.home-stat { min-width: auto; padding: 2px; }.home-stat span { font-size: .95rem; }.home-stat strong { font-size: .88rem; }
  .games-hero { min-height: 214px; border-radius: 26px 26px 0 0; background-position: 61% center; }.games-hero__copy { max-width: 230px; padding: 28px 23px; }.games-hero__copy h1 { font-size: 2.65rem; }.games-hero__copy span { margin-top: 9px; font-size: .84rem; }.games-raven { right: 2px; bottom: -27px; width: 170px; max-height: 203px; }.games-page { margin: -14px 5px 0; padding: 26px 15px 27px; }.games-page h2 { margin-bottom: 18px; }
  .home-hero { grid-template-columns: 1fr; min-height: 580px; padding: 29px 26px; background-position: 58% center; }.home-hero::before { background: linear-gradient(180deg, rgba(9, 35, 88, .82) 0%, rgba(13, 51, 115, .52) 44%, rgba(7, 34, 79, .04) 75%); }.home-hero__copy { align-self: start; }.home-hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }.home-hero__copy > p:not(.hero-kicker) { max-width: 260px; margin-bottom: 18px; }.raven-stage { min-height: 300px; margin-top: -4px; }.raven-main { right: 50%; transform: translateX(54%); bottom: -38px; width: min(360px, 105%); max-height: 360px; }.raven-glow { right: 50%; transform: translateX(50%); top: 4px; width: 250px; }
  .continue-card { margin: 14px 6px 0; padding: 15px; }.continue-card span { display: none; }
  .language-artwork { min-height: 285px; background-position: 62% center; }.language-artwork__overlay { background: linear-gradient(90deg, rgba(7,34,83,.8) 0%, rgba(13,55,119,.42) 62%, rgba(10,45,98,.03) 100%); }.language-artwork__copy { max-width: 270px; padding: 36px 24px; }.language-raven { right: 10px; bottom: -28px; width: 190px; max-height: 230px; }.language-panel { margin: -16px 5px 0; padding: 26px 17px; }.language-grid { gap: 10px; }.language-card { min-height: 94px; padding: 11px; gap: 10px; }.language-card img { width: 39px; height: 39px; }.language-card__copy strong { font-size: .94rem; }.language-card__copy small { font-size: .74rem; }.language-card__copy em { font-size: .65rem; }.language-panel footer { align-items: stretch; flex-direction: column; gap: 12px; }.language-panel footer p { max-width: none; text-align: center; }.button--language { width: 100%; }
  .words-topbar { min-height: 58px; gap: 9px; }.words-title { font-size: .9rem; }.words-artwork { min-height: 225px; border-radius: 26px 26px 0 0; background-position: 61% center; }.words-artwork__overlay { background: linear-gradient(90deg, rgba(8,35,84,.81), rgba(13,55,119,.4) 68%, rgba(10,45,98,.03)); }.words-artwork__copy { padding: 28px 23px; max-width: 235px; }.words-artwork__copy h1 { font-size: 2.65rem; }.words-artwork__copy span { margin-top: 9px; font-size: .87rem; }.words-raven { right: 2px; bottom: -27px; width: 172px; max-height: 205px; }.words-progress { right: 15px; bottom: 11px; width: 148px; padding: 9px 10px; gap: 8px; }.words-progress__track { height: 8px; }.words-progress strong { font-size: .72rem; }.words-panel { margin: -14px 5px 0; padding: 26px 15px 25px; }.words-panel .question-word { margin-top: 11px; font-size: clamp(2.55rem, 13vw, 3.55rem); }.words-panel .question-word--speakable { margin-top: 0; }.speakable-word { gap: 7px; margin-top: 11px; }.pronounce-button { width: 37px; height: 37px; }.words-panel .choices { grid-template-columns: 1fr; margin-top: 20px; gap: 10px; }.words-panel .choice { min-height: 58px; font-size: 1rem; }.button--next { width: 100%; }
  .phrases-artwork { min-height: 225px; border-radius: 26px 26px 0 0; background-position: 61% center; }.phrases-panel { margin: -14px 5px 0; padding: 26px 15px 25px; }.phrase-prompt { font-size: clamp(1.55rem, 8vw, 2.1rem); }.phrase-answer { flex-direction: column; min-height: 108px; }.phrase-answer__tiles { width: 100%; }.phrase-reset { align-self: flex-end; }.phrase-tile { min-height: 44px; padding: 9px 13px; }.button--phrase-check { width: 100%; }
  .speed-artwork { min-height: 225px; border-radius: 26px 26px 0 0; background-position: 61% center; }.speed-timer { right: 15px; bottom: 10px; min-width: 112px; padding: 7px 12px; border-radius: 14px; }.speed-timer strong { font-size: 1.35rem; }.speed-panel { margin: -14px 5px 0; padding: 26px 15px 25px; }.speed-score { margin-bottom: 17px; }.speed-choices { grid-template-columns: 1fr; gap: 10px; margin-top: 21px; }.speed-choice { min-height: 56px; font-size: 1rem; }
  .stats-artwork { min-height: 225px; border-radius: 26px 26px 0 0; background-position: 61% center; }.stats-artwork__copy { max-width: 235px; padding: 28px 23px; }.stats-artwork__copy h1 { font-size: 2.65rem; }.stats-artwork__copy span { margin-top: 9px; font-size: .87rem; }.stats-raven { right: 2px; bottom: -27px; width: 172px; max-height: 205px; }.stats-hero-metrics { right: 15px; bottom: 11px; gap: 5px; }.stats-hero-metrics span { padding: 8px 9px; font-size: .67rem; }.stats-panel { margin: -14px 5px 0; padding: 26px 15px 27px; }.stats-panel__header { align-items: flex-start; }.stats-panel__header h2 { font-size: 1.55rem; }.button--stats-continue { min-width: auto; padding: 10px 11px; font-size: .78rem; }.stats-filters { margin: 20px -2px 18px; }.stats-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.stats-summary-grid article { min-height: 103px; padding: 12px 8px; }.stats-chart { height: 144px; gap: 4px; padding: 11px 4px 0; }.stats-chart__bar { width: min(26px, 82%); }.stats-chart__column small { font-size: .59rem; }.stats-language-grid { grid-template-columns: 1fr; }.stats-language-list, .stats-daily, .stats-weak { margin-top: 21px; padding-top: 19px; }
  .profile-artwork { min-height: 225px; border-radius: 26px 26px 0 0; background-position: 61% center; }.profile-artwork__copy { max-width: 235px; padding: 28px 23px; }.profile-artwork__copy h1 { font-size: 2.65rem; }.profile-artwork__copy span { margin-top: 9px; font-size: .87rem; }.profile-raven { right: 2px; bottom: -27px; width: 172px; max-height: 205px; }.profile-hero-progress { right: 15px; bottom: 11px; gap: 5px; }.profile-hero-progress span { padding: 8px 9px; font-size: .67rem; }.profile-panel { margin: -14px 5px 0; padding: 26px 15px 27px; }.profile-summary { padding-bottom: 19px; }.profile-summary__mark { width: 48px; height: 48px; border-radius: 16px; }.profile-section { padding: 18px 0; }.profile-setting-row { margin-left: 0; }.profile-details p { margin-left: 0; }
}
@media (max-width: 520px) {
  .app-shell { padding: calc(12px + var(--telegram-safe-top)) 12px calc(88px + var(--telegram-safe-bottom)); }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 174px; }
  .choices { grid-template-columns: 1fr; }
  .summary-grid, .result-grid { grid-template-columns: repeat(3, 1fr); }
}

.profile-setting-row--toggle { display: flex; align-items: center; gap: 12px; }