/* Говори! – style */
:root {
  --bg: #f6f4ef; --bg2: #ffffff; --card: rgba(255,255,255,.78); --card-solid: #fff; --line: rgba(20,24,40,.09);
  --text: #171a2b; --muted: #6b6f82; --soft: rgba(20,24,40,.05);
  --accent: #e63956; --accent2: #ff8a3d; --accent3: #3a86ff; --gold: #f5a524;
  --ok: #17b26a; --ok-bg: #e6f8ee; --bad: #e5484d; --bad-bg: #fdecec;
  --grad: linear-gradient(135deg, #ff4d6d 0%, #ff8a3d 100%);
  --grad2: linear-gradient(135deg, #3a86ff 0%, #8338ec 100%);
  --shadow: 0 10px 30px -12px rgba(30,30,60,.18), 0 2px 6px rgba(30,30,60,.05);
  --r: 20px; --r-sm: 14px;
  --nav-h: 68px; --side-w: 244px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-ru: "SF Pro Display", -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b1020; --bg2: #121833; --card: rgba(22,28,56,.72); --card-solid: #161c38; --line: rgba(255,255,255,.08);
  --text: #eef0fb; --muted: #9aa0bf; --soft: rgba(255,255,255,.06);
  --ok-bg: rgba(23,178,106,.15); --bad-bg: rgba(229,72,77,.16);
  --shadow: 0 14px 40px -16px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
:where(a) { color: var(--accent3); text-decoration: none; }
:where([data-theme="dark"]) a { color: #7fb0ff; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: .4em 0 .8em; }
button { font: inherit; color: inherit; }
code { background: var(--soft); padding: .1em .35em; border-radius: 6px; font-size: .9em; }
kbd { font: 600 .7em var(--font); border: 1px solid currentColor; border-radius: 5px; padding: 0 .35em; opacity: .55; margin-left: .4em; }
.icon { width: 22px; height: 22px; flex: none; }
.muted { color: var(--muted); } .small { font-size: .84rem; } .center { text-align: center; } .pad { padding: 16px; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

/* tło */
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orbs i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; animation: float 22s ease-in-out infinite alternate; }
.bg-orbs i:nth-child(1) { width: 420px; height: 420px; background: #ff4d6d; top: -120px; right: -100px; }
.bg-orbs i:nth-child(2) { width: 380px; height: 380px; background: #3a86ff; bottom: -140px; left: -120px; animation-delay: -8s; }
.bg-orbs i:nth-child(3) { width: 300px; height: 300px; background: #ffb703; top: 40%; left: 55%; opacity: .18; animation-delay: -14s; }
[data-theme="light"] .bg-orbs i { opacity: .16; }
@keyframes float { to { transform: translate(40px, 60px) scale(1.15); } }

/* układ */
.view { max-width: 820px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
.view.enter { animation: enter .35s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg2) 82%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid var(--line); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .7rem; font-weight: 600; position: relative; transition: color .2s; }
.tabbar a.active { color: var(--accent); }
.tabbar a.active::before { content: ""; position: absolute; top: 6px; width: 44px; height: 32px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); z-index: -1; }
.sidenav { display: none; }
@media (min-width: 1000px) {
  .tabbar { display: none; }
  .sidenav { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); padding: 22px 14px; background: color-mix(in srgb, var(--bg2) 70%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--line); z-index: 30; overflow-y: auto; }
  .sidenav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; transition: .2s; }
  .sidenav a:hover { background: var(--soft); color: var(--text); }
  .sidenav a.active { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px #ff4d6d; }
  .sidenav .brand { margin-bottom: 18px; color: var(--text); }
  .sidenav .brand:hover { background: none; }
  .sn-sep { height: 1px; background: var(--line); margin: 10px 8px; }
  .view { margin-left: calc(var(--side-w) + max(0px, (100vw - var(--side-w) - 820px) / 2)); padding-bottom: 40px; padding-top: 28px; }
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { display: block; font-size: 1.15rem; } .brand small { color: var(--muted); font-size: .75rem; }
.logo { width: 42px; height: 42px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 8px 20px -6px #ff4d6d; }

/* nagłówek */
.page-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; min-height: 48px; }
.ph-title { flex: 1; min-width: 0; }
.page-head h1 { font-size: 1.6rem; margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.ph-sub { color: var(--muted); font-size: .88rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.ic-btn { width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; transition: transform .12s, background .2s; }
.ic-btn:hover { background: var(--soft); } .ic-btn:active { transform: scale(.92); }
.ic-btn .icon { width: 20px; height: 20px; }

/* karty i przyciski */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.card-h h3 { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font-weight: 650; cursor: pointer; transition: transform .12s, box-shadow .2s, filter .2s; text-align: center; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); color: #fff; border: none; box-shadow: 0 10px 24px -10px #ff4d6d; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.big { width: 100%; padding: 15px 20px; font-size: 1.05rem; border-radius: 16px; }
.btn.small { padding: 7px 12px; font-size: .85rem; border-radius: 11px; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.glow { position: relative; overflow: hidden; }
.btn.glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer; transition: .2s; }
.chip .icon { width: 16px; height: 16px; }
.chip.on { background: var(--text); color: var(--bg); border-color: transparent; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--soft); font-size: .78rem; font-weight: 650; }
.pill .icon { width: 14px; height: 14px; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--bad-bg); color: var(--bad); }
.lvl { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 7px; border-radius: 8px; background: var(--c); color: #fff; font-weight: 800; font-size: .75rem; letter-spacing: .02em; }
.bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; flex: 1; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.ring-bg { fill: none; stroke: var(--soft); }
.ring-fg { fill: none; stroke: url(#g) var(--accent); stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.ring text { fill: var(--text); font-weight: 800; font-size: 13px; }
.seg-row, .seg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-title { margin: 22px 0 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

/* start */
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 16px; }
.hello { font-family: var(--font-ru); font-size: 1.9rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; }
.chips { display: flex; align-items: center; gap: 10px; }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 1.05rem; }
.streak.on { color: #ff7a00; } .streak.on .icon { animation: flicker 1.6s ease-in-out infinite; fill: #ffb703; }
@keyframes flicker { 50% { transform: scale(1.12) rotate(-4deg); } }
.goal-ring { display: block; }
.hero { position: relative; overflow: hidden; padding: 22px; }
.hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 280px; height: 280px; background: var(--grad); opacity: .14; border-radius: 50%; filter: blur(20px); }
.hero h2 { font-size: 1.45rem; margin-top: 10px; }
.hero-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hero-week { margin-top: 16px; }
.week-units { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.wu { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); font-size: 1.15rem; border: 1px solid var(--line); transition: transform .15s; }
.wu:hover { transform: translateY(-2px); }
.wu.done { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.wu.more { color: var(--muted); }
.action-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); cursor: pointer; text-align: left; color: var(--text); transition: transform .15s; backdrop-filter: blur(12px); }
.action-tile:hover { transform: translateY(-2px); }
.action-tile:active { transform: scale(.98); }
.action-tile .icon { width: 28px; height: 28px; color: var(--accent3); margin-bottom: 6px; }
.action-tile span { color: var(--muted); font-size: .82rem; }
.action-tile.hot { background: var(--grad2); color: #fff; border: none; }
.action-tile.hot .icon, .action-tile.hot span { color: rgba(255,255,255,.9); }
.badge { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: #fff; color: #8338ec; font-style: normal; font-weight: 800; font-size: .8rem; display: grid; place-items: center; animation: pulse 2s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.wod { background: linear-gradient(135deg, color-mix(in srgb, var(--card) 80%, #ffb703 20%), var(--card)); }
.wod-label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.wod-main { display: flex; gap: 16px; align-items: center; cursor: pointer; }
.wod-ru { font-family: var(--font-ru); font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.wod-pl { font-weight: 600; }
.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; text-align: center; }
.stats-strip b { display: block; font-size: 1.35rem; font-weight: 800; }
.stats-strip span { font-size: .75rem; color: var(--muted); }
.stats-strip.inner { margin-bottom: 14px; }
.lvl-bars { display: grid; gap: 9px; }
.lvl-bar { display: flex; align-items: center; gap: 10px; color: var(--text); }
.lvl-bar .small { min-width: 42px; text-align: right; }
.forecast { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.fc-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; }
.fc-col i { width: 100%; max-width: 34px; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--grad2); transition: height .8s; }
.fc-col.goal i { background: var(--grad); }
.fc-col b { font-size: .72rem; order: -1; }
.fc-col span { font-size: .68rem; color: var(--muted); }
.goal-line { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent); pointer-events: none; }
.tip { font-size: .92rem; }
.warn-card { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); padding: 12px 14px; border-radius: var(--r-sm); }
.ok-card { background: var(--ok-bg); }
.install-card { display: none; align-items: center; justify-content: space-between; gap: 10px; }
.can-install .install-card { display: flex; }

/* kurs */
.level { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; box-shadow: var(--shadow); overflow: hidden; }
.level summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; }
.level summary::-webkit-details-marker { display: none; }
.level summary .ring-fg { stroke: var(--c); }
.lv-txt h2 { margin: 0; font-size: 1.1rem; }
.path { position: relative; padding: 4px 16px 18px 16px; }
.path::before { content: ""; position: absolute; left: 39px; top: 0; bottom: 30px; width: 3px; background: linear-gradient(var(--c), transparent); opacity: .35; border-radius: 3px; }
.unit { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 10px; margin: 4px 0; border-radius: 16px; color: var(--text); transition: background .2s, transform .15s; }
.unit:hover { background: var(--soft); }
.u-node { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-solid); border: 3px solid var(--line); font-size: 1.3rem; z-index: 1; transition: .3s; }
.unit.done .u-node { background: var(--c); border-color: var(--c); color: #fff; }
.unit.done .u-node .icon { width: 24px; height: 24px; stroke-width: 3; }
.unit.next .u-node { border-color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); animation: pulse 2s infinite; }
.u-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.u-kind { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.u-title { font-weight: 700; }
.u-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-body .bar { margin-top: 5px; max-width: 200px; height: 5px; }
.u-go { font-size: .72rem; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: var(--c); color: #fff; }
.plan { display: grid; gap: 10px; }
.plan-week { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--r-sm); padding: 12px 14px; }
.plan-week.now { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent), var(--shadow); }
.plan-week.done { opacity: .75; }
.pw-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pw-units { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-u { font-size: .82rem; padding: 4px 9px; border-radius: 9px; background: var(--soft); color: var(--text); }
.pw-u.done { background: var(--ok-bg); text-decoration: line-through; color: var(--muted); }

/* słówka */
.level-block { margin: 18px 0 8px; }
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lb-head h2 { margin: 0; font-size: 1.1rem; }
.level-block > .bar { margin-bottom: 12px; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.topic { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: transform .15s; min-height: 118px; }
.topic:hover { transform: translateY(-3px); }
.t-ico { font-size: 1.6rem; }
.t-title { font-weight: 700; font-size: .92rem; line-height: 1.25; flex: 1; }
.t-meta { font-size: .75rem; color: var(--muted); }
.topic .bar { height: 5px; flex: none; }
.topic.done::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.hero-topic { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-topic .ring-fg { stroke: var(--c, var(--accent)); }
.ht-body { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.mode-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 8px; margin-bottom: 14px; }
.mode-row.tight { width: 100%; margin: 10px 0 0; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 1.4rem; transition: .15s; }
.mode span { font-size: .75rem; font-weight: 650; color: var(--muted); }
.mode:hover { transform: translateY(-2px); } .mode.on, .mode.playing { background: var(--text); } .mode.on span, .mode.playing span { color: var(--bg); }
.list { padding: 6px; }
.word-row, .sent { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; transition: background .2s; }
.word-row + .word-row, .sent + .sent { border-top: 1px solid var(--line); }
.word-row:hover, .sent:hover { background: var(--soft); }
.word-row.speaking, .sent.speaking { background: color-mix(in srgb, var(--accent3) 14%, transparent); }
.wr-main, .s-main { flex: 1; min-width: 0; }
.wr-ru, .s-ru { font-family: var(--font-ru); font-weight: 700; font-size: 1.12rem; }
.wr-tr, .s-tr, .ex-tr, .rv-tr { font-size: .8rem; color: var(--accent3); font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .01em; }
[data-theme="dark"] .wr-tr, [data-theme="dark"] .s-tr, [data-theme="dark"] .ex-tr, [data-theme="dark"] .rv-tr { color: #8ab8ff; }
.acc { color: var(--accent); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.wr-pl, .s-pl { font-size: .9rem; }
.wr-note { color: var(--muted); font-size: .8rem; }
.hide-pl .s-pl, .hide-pl .s-tr { filter: blur(6px); transition: filter .2s; }
.hide-pl .sent:hover .s-pl, .hide-pl .sent:hover .s-tr { filter: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--soft); border: 2px solid var(--line); }
.dot.learn { background: #ffb703; border-color: #ffb703; } .dot.review { background: var(--accent3); border-color: var(--accent3); } .dot.master { background: var(--ok); border-color: var(--ok); }
.fav { width: 36px; height: 36px; border: none; background: none; color: var(--muted); }
.fav.on { color: var(--gold); } .fav.on .icon { fill: var(--gold); }
.spk { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--accent3) 12%, transparent); border: none; color: var(--accent3); }

/* gramatyka */
.search-box { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; }
.search-box input { flex: 1; border: none; background: none; padding: 13px 0; color: var(--text); font: inherit; outline: none; }
.search-box.big input { font-size: 1.05rem; padding: 15px 0; }
.search-box .icon { color: var(--muted); }
.g-list { display: grid; gap: 8px; }
.g-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--text); transition: transform .15s; }
.g-item:hover { transform: translateX(4px); }
.g-num { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--soft); font-weight: 800; font-size: .9rem; }
.g-item.done .g-num { background: var(--c); color: #fff; }
.g-item.done .g-num .icon { width: 18px; height: 18px; stroke-width: 3; }
.g-txt { flex: 1; display: flex; flex-direction: column; }
.g-txt span { font-size: .82rem; color: var(--muted); }
.g-score { font-weight: 800; font-size: .85rem; color: var(--muted); }
.lesson { font-size: 1rem; line-height: 1.65; }
.lesson h3 { margin: 1.4em 0 .5em; font-size: 1.12rem; display: flex; align-items: center; gap: 8px; }
.lesson h3::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: var(--grad); }
.lesson ul { padding-left: 1.2em; }
.lesson li { margin: .3em 0; }
.say { cursor: pointer; font-family: var(--font-ru); font-weight: 700; color: var(--accent); border-bottom: 2px dotted color-mix(in srgb, var(--accent) 45%, transparent); transition: background .2s; border-radius: 4px; padding: 0 2px; }
[data-theme="dark"] .say { color: #ff7d93; }
.say:hover, .say.speaking { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.say.big { font-size: 2.2rem; border: none; }
.ex { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: var(--soft); cursor: pointer; transition: background .2s; }
.ex:hover { background: color-mix(in srgb, var(--accent3) 10%, transparent); }
.ex-ru { font-family: var(--font-ru); font-weight: 700; font-size: 1.05rem; }
.ex-pl { color: var(--muted); font-size: .9rem; }
.ex.compact { padding: 7px 10px; margin: 5px 0; }
.ex.compact .spk { width: 32px; height: 32px; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.gt { border-collapse: separate; border-spacing: 0; width: 100%; margin: 10px 0; font-size: .92rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.scroll .gt { margin: 0; min-width: 560px; }
.gt th { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 750; text-align: left; }
.gt th, .gt td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gt tr:last-child td { border-bottom: none; }
.gt td { cursor: default; }
.gt td.speaking { background: color-mix(in srgb, var(--accent3) 15%, transparent); }
.tip, .warn { padding: 12px 14px; border-radius: 14px; margin: 12px 0; }
.lesson .tip { background: color-mix(in srgb, #ffb703 16%, transparent); border: 1px solid color-mix(in srgb, #ffb703 35%, transparent); }
.lesson .warn { background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.center-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.center-card .ring-fg { stroke: var(--c, var(--accent)); }
.lesson-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lesson-nav .btn { max-width: 48%; font-size: .85rem; }

/* alfabet */
.abc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; }
.abc-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: transform .15s; position: relative; overflow: hidden; }
.abc-tile::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--gc); }
.abc-tile:hover { transform: translateY(-3px) scale(1.03); }
.at-l { font-family: var(--font-ru); font-size: 1.45rem; font-weight: 800; }
.at-s { font-size: .72rem; color: var(--muted); font-weight: 600; }
.abc-grid.cursive .at-l, .lc-cursive { font-family: Georgia, "Times New Roman", "PT Serif", serif; font-style: italic; font-weight: 400; }
.g1 { --gc: #2ec4b6; } .g2 { --gc: #ff4d6d; } .g3 { --gc: #3a86ff; } .g4 { --gc: #ffb703; } .g5 { --gc: #8338ec; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; font-size: .8rem; color: var(--muted); }
.lg i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--gc); margin-right: 5px; vertical-align: -1px; }
.syl-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.syl { padding: 8px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 1.15rem; }
.letter-row { display: flex; gap: 16px; align-items: flex-start; }
.lr-big { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 84px; border: none; font-size: 2.4rem; line-height: 1.1; color: var(--text); }
.lr-big .small { font-size: 1.5rem; color: var(--muted); }
.lr-body { flex: 1; min-width: 0; }
.lr-sound { font-size: 1.1rem; color: var(--accent); }
.read-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 20px; }
.read-w { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: .2s; }
.rw-ru { font-family: var(--font-ru); font-size: 1.3rem; font-weight: 750; }
.rw-ans { font-size: .78rem; color: var(--muted); min-height: 1.1em; text-align: center; }
.read-w.open { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-bg); }
.sticky-cta { position: sticky; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); margin-top: 20px; z-index: 5; }
@media (min-width: 1000px) { .sticky-cta { bottom: 16px; } }
.letter-card { text-align: center; }
.lc-letters { display: flex; justify-content: center; gap: 26px; font-size: 4.2rem; line-height: 1.1; margin: 10px 0; }
.lc-print { font-family: var(--font-ru); font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lc-sound { font-size: 1.2rem; margin: 6px 0; }
.letter-card .ex { text-align: left; }

/* czytanki */
.text-list { display: grid; gap: 10px; }
.text-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--text); border-left: 5px solid var(--c); }
.tc-ico { font-size: 1.8rem; }
.tc-body { flex: 1; display: flex; flex-direction: column; font-family: var(--font-ru); }
.text-card.done .icon { color: var(--ok); }
.reader-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 8px; z-index: 5; padding: 10px; }
.reader { font-family: var(--font-ru); font-size: 1.2rem; line-height: 1.85; }
.rd-s { cursor: pointer; border-radius: 6px; padding: 1px 2px; transition: background .25s; }
.rd-s:hover { background: var(--soft); }
.rd-s.speaking { background: color-mix(in srgb, #ffb703 35%, transparent); }
.rd-tr { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: var(--accent3); line-height: 1.6; }
.rd-pl { font-family: var(--font); font-size: .95rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; }

/* więcej, statystyki, ustawienia */
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.more-item { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: transform .15s; }
.more-item:hover { transform: translateY(-3px); }
.mi-ico { font-size: 1.8rem; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.st { padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.st span { font-size: 1.4rem; } .st b { font-size: 1.5rem; font-weight: 800; } .st small { color: var(--muted); font-size: .76rem; }
.heat-wrap { overflow-x: auto; }
.heat { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12px, 1fr); gap: 4px; min-width: 300px; }
.heat i, .heat-legend i { aspect-ratio: 1; border-radius: 4px; background: var(--soft); display: block; }
.heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; }
.heat-legend i { width: 12px; }
.h1 { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; } .h2 { background: color-mix(in srgb, var(--accent) 55%, transparent) !important; } .h3 { background: color-mix(in srgb, var(--accent) 78%, transparent) !important; } .h4 { background: var(--accent) !important; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px; border-radius: 14px; background: var(--soft); opacity: .45; filter: grayscale(1); }
.ach.on { opacity: 1; filter: none; background: color-mix(in srgb, #ffb703 14%, transparent); }
.ach span { font-size: 1.8rem; } .ach b { font-size: .8rem; } .ach small { font-size: .68rem; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.set-row > span { display: flex; flex-direction: column; } .set-row small { color: var(--muted); font-size: .78rem; }
.set-row select, .set-row input[type="text"], .set-row input[type="date"], .field input { max-width: 55%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-solid); color: var(--text); font: inherit; }
.set-row input[type="range"] { width: 45%; accent-color: var(--accent); }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); position: relative; cursor: pointer; transition: .25s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .25s; }
.switch:checked { background: var(--ok); } .switch:checked::after { left: 23px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(8,10,25,.55); backdrop-filter: blur(6px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--card-solid); border-radius: 26px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.9) translateY(20px); opacity: 0; } }
.modal-card .close { position: absolute; top: 12px; right: 12px; }
.onb { text-align: center; display: grid; gap: 12px; }
.onb-logo { font-family: var(--font-ru); font-size: 2.6rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.field { display: grid; gap: 6px; text-align: left; font-weight: 650; font-size: .9rem; }
.field input { max-width: 100%; }
.field .seg { margin: 0; }

/* ======= sesja ćwiczeń ======= */
.session { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; opacity: 0; transform: translateY(24px); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.session.show { opacity: 1; transform: none; }
.in-session { overflow: hidden; }
.in-session .tabbar { display: none; }
.ss-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; max-width: 760px; width: 100%; margin: 0 auto; }
.ss-prog { flex: 1; height: 14px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.ss-bar { height: 100%; border-radius: 99px; background: var(--grad); transition: width .5s cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 -3px 0 rgba(0,0,0,.1), inset 0 3px 0 rgba(255,255,255,.3); }
.ss-combo { font-weight: 800; color: #ff7a00; }
.ss-combo.pop { animation: pop .4s; }
.ss-body { flex: 1; overflow-y: auto; padding: 8px 16px 240px; max-width: 760px; width: 100%; margin: 0 auto; }
.ss-body.anim .task { animation: enter .35s cubic-bezier(.2,.8,.2,1); }
.ss-body.shake .task { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.task { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.t-label { font-weight: 800; font-size: 1.15rem; }
.prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 130px; padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow); }
.p-ru { font-family: var(--font-ru); font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 800; border: none; color: var(--text); line-height: 1.2; }
.p-pl { font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 700; }
.p-q { font-family: var(--font-ru); font-size: 1.25rem; font-weight: 650; line-height: 1.5; }
.blank { display: inline-block; min-width: 70px; border-bottom: 3px solid var(--accent); color: transparent; margin: 0 4px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { border-color: transparent; } }
.audio-prompt { display: flex; align-items: center; gap: 12px; }
.play-big { width: 84px; height: 84px; border-radius: 50%; border: none; background: var(--grad2); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 30px -10px #8338ec; transition: transform .15s; }
.play-big .icon { width: 38px; height: 38px; }
.play-big:active { transform: scale(.92); }
.play-big.small { width: 56px; height: 56px; flex: none; } .play-big.small .icon { width: 26px; height: 26px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts.long { grid-template-columns: 1fr; }
@media (max-width: 480px) { .opts { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card-solid); cursor: pointer; text-align: left; font-weight: 650; font-size: 1.02rem; transition: transform .1s, border-color .2s, background .2s; color: var(--text); }
.opt.cyr { font-family: var(--font-ru); font-size: 1.15rem; }
.opt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent3) 55%, transparent); }
.opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.opt .k { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); animation: pop .35s; }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt:disabled { cursor: default; }
.type-wrap { display: flex; gap: 8px; align-items: center; }
.type-in { flex: 1; width: 100%; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--line); background: var(--card-solid); color: var(--text); font: 700 1.3rem var(--font-ru); outline: none; transition: border-color .2s; }
.type-in:focus { border-color: var(--accent3); }
.type-in.right { border-color: var(--ok); background: var(--ok-bg); } .type-in.wrong { border-color: var(--bad); background: var(--bad-bg); }
.type-in.shake { animation: shake .4s; }
.kb-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.kb { display: grid; gap: 6px; padding: 8px; border-radius: 16px; background: var(--soft); }
.kb-row { display: flex; gap: 4px; justify-content: center; }
.kb-key { flex: 1; max-width: 46px; min-width: 0; height: 44px; border-radius: 9px; border: none; background: var(--card-solid); box-shadow: 0 2px 0 var(--line); font: 600 1.05rem var(--font-ru); cursor: pointer; padding: 0; color: var(--text); }
.kb-key:active { transform: translateY(2px); box-shadow: none; background: var(--accent3); color: #fff; }
.kb-key.wide { max-width: 70px; } .kb-key.space { max-width: 260px; flex: 4; font-size: .8rem; color: var(--muted); }
.hint { text-align: center; color: var(--muted); font-size: .9rem; margin: 0; }
.flash-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow); }
.fc-ru { font-family: var(--font-ru); font-size: 2rem; font-weight: 800; }
.fc-ru.big { font-size: clamp(2rem, 9vw, 3rem); }
.fc-pl { font-size: 1.2rem; font-weight: 650; }
.fc-pl.big { font-size: 1.7rem; }
.rv-btns { display: flex; gap: 6px; } .rv-btns.center { justify-content: center; margin-top: 6px; }
.flip { perspective: 1200px; cursor: pointer; min-height: 260px; }
.flip-in { position: relative; min-height: 260px; transition: transform .6s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border-radius: 24px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
.face.back { transform: rotateY(180deg); background: linear-gradient(160deg, var(--card-solid), color-mix(in srgb, var(--card-solid) 85%, #3a86ff)); }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gr { padding: 12px 4px; border-radius: 14px; border: none; font-weight: 750; font-size: .82rem; cursor: pointer; color: #fff; }
.g1 .gr, .gr.g1 { background: var(--bad); } .gr.g2 { background: #f59e0b; } .gr.g3 { background: var(--ok); } .gr.g4 { background: var(--accent3); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcol { display: grid; gap: 10px; align-content: start; }
.mt { min-height: 58px; padding: 10px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card-solid); cursor: pointer; font-weight: 650; transition: .2s; color: var(--text); }
.mt.cyr { font-family: var(--font-ru); font-size: 1.1rem; }
.mt.sel { border-color: var(--accent3); background: color-mix(in srgb, var(--accent3) 12%, var(--card-solid)); transform: scale(1.03); }
.mt.good { border-color: var(--ok); background: var(--ok-bg); }
.mt.bad { border-color: var(--bad); background: var(--bad-bg); animation: shake .35s; }
.mt.gone { opacity: 0; transform: scale(.85); pointer-events: none; }
.build-ans { min-height: 76px; padding: 10px; border-radius: 16px; border: 2px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.build-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tile { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card-solid); font-size: 1.08rem; font-weight: 650; cursor: pointer; color: var(--text); animation: enter .25s; }
.tile.cyr { font-family: var(--font-ru); }
.tile:active { transform: translateY(2px); border-bottom-width: 2px; }
.diff { font-family: var(--font-ru); font-size: 1.05rem; margin: 6px 0; line-height: 1.8; }
.dok { color: var(--ok); } .dbad { color: var(--bad); text-decoration: underline wavy; }

.ss-sheet { position: fixed; left: 0; right: 0; bottom: 0; transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.9,.2,1); z-index: 3; }
.ss-sheet.open { transform: none; }
.sh-in { max-width: 760px; margin: 0 auto; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--card-solid); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.35); display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; }
.ss-sheet.ok .sh-in { border-top: 5px solid var(--ok); }
.ss-sheet.bad .sh-in { border-top: 5px solid var(--bad); }
.sh-head { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-sheet.ok .sh-head b { color: var(--ok); } .ss-sheet.bad .sh-head b { color: var(--bad); }
.sh-ru { font-family: var(--font-ru); color: var(--muted); font-weight: 650; }
.sh-your { color: var(--muted); font-size: .9rem; }
.reveal { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--soft); }
.rv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-ru { font-family: var(--font-ru); font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.rv-tr { font-size: .95rem; }
.rv-pl { font-weight: 600; }
.rv-note { font-size: .86rem; color: var(--muted); }
.ss-sheet .btn.primary { margin-top: 4px; }
.ss-sheet.bad .btn.primary { background: linear-gradient(135deg, #e5484d, #f97316); box-shadow: 0 10px 24px -10px #e5484d; }

.finish { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; animation: enter .5s; }
.fin-emoji { font-size: 4.5rem; animation: pop .6s cubic-bezier(.2,1.6,.4,1); }
.fin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 10px 0; }
.fs { padding: 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.fs b { display: block; font-size: 1.35rem; font-weight: 850; } .fs span { font-size: .72rem; color: var(--muted); }
.fin-note { padding: 10px 14px; border-radius: 14px; background: var(--soft); font-size: .92rem; }
.fin-wrong { width: 100%; text-align: left; }
.fw { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--card); margin: 5px 0; cursor: pointer; font-family: var(--font-ru); font-weight: 650; }
.fin-btns { display: flex; gap: 10px; width: 100%; margin-top: 10px; }
.fin-btns .btn { flex: 1; padding: 14px; }
.cert { width: 100%; padding: 22px; border-radius: 22px; border: 3px double var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card-solid)); }
.cert-t { font-family: Georgia, serif; font-style: italic; font-size: 1.6rem; }
.cert-l { font-size: 3rem; font-weight: 900; color: var(--c); line-height: 1; margin: 6px 0; }

/* efekty */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100; }
.toasts { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 110; display: grid; gap: 8px; width: min(420px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--line); box-shadow: 0 16px 40px -12px rgba(0,0,0,.35); animation: drop .45s cubic-bezier(.2,1.4,.4,1); font-size: .92rem; }
.toast.ach { border: 2px solid #ffb703; }
.toast.out { opacity: 0; transform: translateY(-12px); transition: .45s; }
.t-emoji { font-size: 1.9rem; }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
.xp-float { position: fixed; z-index: 120; transform: translate(-50%, 0); font-weight: 900; color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.25); pointer-events: none; animation: xpup 1.1s ease-out forwards; }
@keyframes xpup { to { transform: translate(-50%, -60px); opacity: 0; } }

@media (max-width: 340px) { .grid2 { grid-template-columns: 1fr; } .fin-stats { grid-template-columns: repeat(2, 1fr); } .hello { font-size: 1.55rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.kb-key.down { transform: translateY(2px); box-shadow: none; background: var(--accent3); color: #fff; }
.rules { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 2px 0; }
.flash-card .rules { justify-content: center; }
.rules-h { font-size: .74rem; font-weight: 800; color: var(--muted); margin-right: 2px; }
.rule { font-size: .74rem; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent3) 12%, transparent); color: var(--text); }