/* Таракашки: синее небо, кремовые карточки, жёлтые кнопки */
:root {
  --sky1: #2a6ee0;
  --sky2: #5fa8ff;
  --sky3: #9fd2ff;
  --ink: #2b2140;
  --ink2: #5d5878;
  --card: #fffaf0;
  --accent: #ffc22e;
  --accent2: #f29e0c;
  --green: #35ad57;
  --red: #e5483b;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #7cc8f5;
  font-family: 'Nunito', system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
}
#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
#fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
.screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: var(--safe-top); padding-bottom: var(--safe-bot); animation: fadeIn .3s ease; }
.screen.leaving { animation: fadeOut .3s ease forwards; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes fadeOut { to { opacity: 0; } }
.pop-in { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop-in, .screen { animation: none; } }

/* ---------- Кнопки ---------- */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 900; font-size: 18px; position: relative;
  color: #fff; text-shadow: 0 2px 0 rgba(150, 70, 0, .55);
  background: linear-gradient(180deg, #ffe46b 0%, #ffbf1f 55%, #ff9f0a 100%);
  border: 3px solid #a85a00; border-radius: 20px; padding: 12px 24px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(160, 70, 0, .25), 0 5px 0 #a85a00, 0 10px 18px rgba(20, 50, 20, .3);
  transition: transform .08s, box-shadow .08s; min-height: 50px;
}
.btn::before { content: ''; position: absolute; left: 10px; right: 10px; top: 4px; height: 38%; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 1px 0 #a85a00; }
.btn:disabled { filter: grayscale(.8); opacity: .55; }
.btn:focus-visible, .key:focus-visible, .opt:focus-visible, .boost:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.big { font-size: 22px; padding: 16px 30px; border-radius: 22px; }
.btn.small { font-size: 15px; padding: 8px 12px; min-height: 40px; border-radius: 14px; }
.btn.alt { background: linear-gradient(180deg, #8fd0ff 0%, #3d92f0 55%, #2a6ee0 100%); border-color: #17478f; text-shadow: 0 2px 0 rgba(10, 40, 110, .5); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 5px 0 #17478f, 0 10px 18px rgba(20, 50, 20, .3); }
.btn.green { background: linear-gradient(180deg, #a2f07d 0%, #4cc94a 55%, #2fa53a 100%); border-color: #1f6b26; text-shadow: 0 2px 0 rgba(20, 80, 20, .5); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 5px 0 #1f6b26, 0 10px 18px rgba(20, 50, 20, .3); }
.btn.ghost { background: transparent; color: var(--ink2); box-shadow: none; border-color: transparent; text-shadow: none; font-weight: 800; }
.btn.ghost::before { display: none; }
.btn.ghost.danger { color: var(--red); }
.icon-btn {
  appearance: none; border: 3px solid #7a4a1e; background: linear-gradient(180deg, #fff 0%, #f3e6cc 100%); border-radius: 50%; width: 46px; height: 46px;
  font-size: 22px; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(120, 70, 20, .2), 0 3px 0 #7a4a1e, 0 6px 10px rgba(20, 50, 20, .25); color: var(--ink); flex: none;
}
.icon-btn.speak { width: 40px; height: 40px; font-size: 20px; background: #e8f1ff; }
.pill { background: linear-gradient(180deg, #fff, #f1f4fa); border: 3px solid #2f5aa8; border-radius: 22px; padding: 5px 14px 5px 8px; font-weight: 900; font-size: 17px; box-shadow: inset 0 -3px 0 rgba(47, 90, 168, .15), 0 3px 0 #2f5aa8; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.coin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a8, #ffc22e 55%, #c98400); box-shadow: inset 0 0 0 2px #e0a000; vertical-align: -3px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Заставка ---------- */
.splash { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(12vh + var(--safe-bot)); }
.splash-cv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.splash-sub { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 50px; font-weight: 1000; color: #ffd23f; -webkit-text-stroke: 9px #7a3e10; paint-order: stroke fill; text-shadow: 0 6px 0 #7a3e10; margin-bottom: 26px; opacity: 0; transform: translateY(10px); transition: all .6s; }
.splash-sub small { font-size: 20px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px #2a5aa8; text-shadow: none; margin-top: 2px; }
.splash-btn { position: relative; opacity: 0; transform: scale(.8); transition: all .5s .15s; }
.splash-sub.in, .splash-btn.in { opacity: 1; transform: none; }
.splash-copy { position: absolute; bottom: calc(14px + var(--safe-bot)); font-size: 12px; color: #fff; opacity: .7; }

/* ---------- Возраст ---------- */
.center-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; height: 100%; }
.title { margin: 4px 0; font-size: 30px; font-weight: 900; text-align: center; color: #fff; -webkit-text-stroke: 6px #2a5aa8; paint-order: stroke fill; text-wrap: balance; }
.age-disp { font-size: 64px; font-weight: 900; min-width: 160px; text-align: center; background: var(--card); border-radius: 22px; padding: 4px 20px; box-shadow: inset 0 2px 6px rgba(80, 60, 20, .15); }
.age-note { color: #fff; font-weight: 900; -webkit-text-stroke: 4px #2a5aa8; paint-order: stroke fill; min-height: 22px; text-align: center; max-width: 320px; }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; margin: 8px 0 12px; }
.key { appearance: none; border: 0; height: 60px; border-radius: 18px; font: inherit; font-size: 28px; font-weight: 800; background: #fff; color: var(--ink); box-shadow: 0 3px 0 #b9cdee; cursor: pointer; }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #b9cdee; }
.keypad .key:nth-child(10) { grid-column: 2; }
.roach-cv { display: block; }
.loading { font-weight: 900; font-size: 20px; color: #fff; -webkit-text-stroke: 5px #2a5aa8; paint-order: stroke fill; }

/* ---------- Главный ---------- */
.home { display: flex; flex-direction: column; align-items: center; padding: 10px 14px calc(78px + var(--safe-bot)); gap: 10px; }
.topbar { width: 100%; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.avatar { width: 50px; height: 50px; border-radius: 16px; overflow: hidden; border: 3px solid #fff; background: linear-gradient(180deg, #9fe0ff, #5bb6f0); box-shadow: 0 3px 0 #2f5aa8, 0 0 0 2px #2f5aa8; flex: none; }
.face-cv { display: block; }
.heart { color: #e5483b; font-size: 20px; line-height: 1; }
.side { position: absolute; top: calc(78px + var(--safe-top)); display: flex; flex-direction: column; gap: 16px; z-index: 2; }
.side.left { left: 10px; } .side.right { right: 10px; }
.medal { position: relative; appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: inherit; }
.medal-ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; border: 4px solid #fff; box-shadow: 0 0 0 3px #2f5aa8, 0 6px 10px rgba(20, 50, 20, .3); }
.gift .medal-ico { background: radial-gradient(circle at 35% 30%, #ffd1e6, #f05fa8 70%); }
.rules .medal-ico { background: radial-gradient(circle at 35% 30%, #e3d4ff, #8a5be0 70%); }
.pass .medal-ico { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc22e 60%, #e08a00); }
.medal-label { margin-top: -10px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 900; color: #fff; background: #2f5aa8; border: 2px solid #fff; white-space: nowrap; }
.medal-badge { position: absolute; top: -4px; right: -2px; min-width: 22px; height: 22px; border-radius: 11px; background: #e5483b; color: #fff; font-weight: 1000; font-size: 13px; display: grid; place-items: center; border: 2px solid #fff; padding: 0 4px; }
.home-hero { display: flex; flex-direction: column; align-items: center; margin-top: 4vh; }
.logo-title { margin: 0; font-size: 50px; font-weight: 1000; color: #ffd23f; -webkit-text-stroke: 9px #7a3e10; paint-order: stroke fill; text-shadow: 0 6px 0 #7a3e10, 0 12px 20px rgba(40, 30, 0, .35); letter-spacing: 1px; transform: rotate(-3deg); }
.home-sub { color: #fff; font-weight: 900; -webkit-text-stroke: 4px #2a5aa8; paint-order: stroke fill; margin-top: 6px; }
.lives-timer { color: #fff; font-weight: 900; font-size: 15px; -webkit-text-stroke: 4px #2a5aa8; paint-order: stroke fill; }
.home-foot { color: #fff; font-weight: 900; -webkit-text-stroke: 4px #1f6b26; paint-order: stroke fill; }
.tour-tile { width: 128px; height: 116px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px;
  background: linear-gradient(180deg, #ffe46b 0%, #ffbf1f 60%, #ff9f0a 100%); border: 4px solid #a85a00;
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .55), inset 0 -8px 0 rgba(160, 70, 0, .25), 0 8px 0 #a85a00, 0 0 0 10px rgba(255, 240, 160, .35), 0 16px 30px rgba(40, 30, 0, .35);
  animation: tilebob 2.4s ease-in-out infinite; }
.tour-tile small { font-weight: 900; font-size: 20px; color: #8a4a00; }
.tour-tile b { font-weight: 1000; font-size: 52px; line-height: 1; color: #fff; -webkit-text-stroke: 7px #a85a00; paint-order: stroke fill; }
@keyframes tilebob { 50% { transform: translateY(-6px); } }
.play-btn { min-width: 230px; font-size: 26px; margin-top: 10px; }
.lives-timer.big { color: var(--ink2); -webkit-text-stroke: 0; font-size: 18px; margin: 8px 0; }
.home-foot { margin-top: auto; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 8px calc(6px + var(--safe-bot)); gap: 6px; background: linear-gradient(180deg, #c98b4f, #9c6331); border-top: 4px solid #7a4a1e; z-index: 3; }
.tab { flex: 1; appearance: none; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: 900; font-size: 13px; display: flex; flex-direction: column; align-items: center; padding: 4px 0; cursor: pointer; }
.tab span { font-size: 26px; }
.tab.on { background: linear-gradient(180deg, #ffe9b8, #f6c870); color: #7a4a1e; box-shadow: inset 0 -3px 0 rgba(120, 70, 20, .25); }
.tab.locked { opacity: .65; }

/* ---------- Место под рекламу (баннер 320×50) ---------- */
.ad-banner { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--safe-bot); width: min(100%, 360px); height: 50px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 250, 238, .92); border: 2px dashed rgba(122, 74, 30, .45); border-radius: 10px; overflow: hidden; }
.ad-banner.native { background: transparent; border: 0; }
.ad-b-ph { font-size: 13px; font-weight: 800; color: rgba(122, 74, 30, .7); letter-spacing: .02em; }
.ad-b-img { height: 42px; width: auto; border-radius: 6px; }
.ad-b-txt { display: flex; flex-direction: column; line-height: 1.1; font-size: 13px; }
.ad-b-txt small { font-size: 9px; opacity: .6; }
.home.has-ad { padding-bottom: calc(134px + var(--safe-bot)); }
.home .ad-banner { bottom: calc(76px + var(--safe-bot)); }
.game.has-ad .boost-bar { bottom: calc(64px + var(--safe-bot)); }
.game.has-ad .ad-banner { bottom: calc(4px + var(--safe-bot)); }
@media (prefers-reduced-motion: reduce) { .tour-tile { animation: none; } }

/* ---------- Тропинка знаний ---------- */
.side-btn { position: absolute; right: 12px; top: calc(76px + var(--safe-top)); width: 76px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; color: #fff; }
.side-btn .side-ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc22e 60%, #e08a00); box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(10, 40, 110, .35); }
.side-badge { position: absolute; top: -4px; right: 2px; background: var(--red); color: #fff; font-weight: 900; font-size: 13px; border-radius: 12px; padding: 2px 7px; box-shadow: 0 0 0 2px #fff; }
.side-bar { width: 64px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.side-bar i { display: block; height: 100%; background: #35e07a; border-radius: 6px; }
.side-cap { font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.modal.pass { text-align: left; gap: 12px; }
.pass-head p { font-size: 13px; text-align: center; }
.pass-prog { display: flex; align-items: center; gap: 10px; }
.pass-prog .side-ico { width: 46px; height: 46px; font-size: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc22e 60%, #e08a00); flex: none; }
.pass-bar { position: relative; flex: 1; height: 22px; border-radius: 12px; background: #dfe7f5; overflow: hidden; }
.pass-bar i { display: block; height: 100%; background: linear-gradient(90deg, #35ad57, #6ae08f); }
.pass-bar b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink); }
.pass-step { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: #2f7de1; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .2); flex: none; }
.pass-list { display: flex; flex-direction: column; gap: 8px; }
.pass-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px 10px; }
.pass-row.can { box-shadow: 0 0 0 3px var(--accent); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 194, 46, .8); } }
.pass-row.done { opacity: .55; }
.pass-row.locked .pass-card { filter: grayscale(.4); opacity: .8; }
.pass-row.chest { background: #fff6dc; }
.pass-num { width: 32px; height: 32px; border-radius: 50%; background: #e8f1ff; display: grid; place-items: center; font-weight: 900; flex: none; }
.pass-card { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-weight: 800; }
.r-part { display: inline-flex; align-items: center; gap: 3px; }
.r-ico { font-size: 22px; }
.r-ico.big { font-size: 30px; }
.pass-state { font-size: 20px; width: 40px; text-align: center; flex: none; }
@media (prefers-reduced-motion: reduce) { .pass-row.can { animation: none; } }

/* ---------- Тур ---------- */
.game { overflow: hidden; }
.game-cv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; }
.game-hud { position: absolute; top: calc(8px + var(--safe-top)); left: 10px; right: 10px; display: flex; gap: 6px; align-items: center; z-index: 5; }
.hud-level { flex: 1; font-weight: 1000; font-size: 22px; text-align: center; color: #fff; -webkit-text-stroke: 5px #2a5aa8; paint-order: stroke fill; }
.game-tip {
  position: absolute; left: 14px; right: 14px; bottom: calc(100px + var(--safe-bot)); z-index: 6; background: rgba(30, 25, 60, .9); color: #fff;
  font-weight: 700; font-size: 15px; line-height: 1.35; padding: 10px 14px; border-radius: 14px; text-align: center;
  opacity: 0; transform: translateY(10px); transition: all .3s; pointer-events: none;
}
.game-tip.show { opacity: 1; transform: none; }
.boost-bar { position: absolute; left: 0; right: 0; bottom: calc(8px + var(--safe-bot)); display: flex; justify-content: center; gap: 6px; z-index: 5; padding: 0 6px; }
.boost .b-timer { position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 20px; pointer-events: none; }
.boost {
  appearance: none; border: 3px solid #7a4a1e; position: relative; width: 66px; height: 70px; border-radius: 20px; background: linear-gradient(180deg, #fffaf0, #f2e2c0);
  box-shadow: inset 0 -3px 0 rgba(120, 70, 20, .18), 0 4px 0 #7a4a1e, 0 8px 12px rgba(20, 50, 20, .3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; color: var(--ink);
}
.boost.on { background: #fff2c8; box-shadow: 0 0 0 3px var(--accent2); }
.b-name { font-size: 11px; font-weight: 800; margin-top: 2px; }
.b-cnt { position: absolute; top: -6px; right: -4px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 1px 6px; }
.b-cnt.buy { background: var(--accent2); }

/* ---------- Задания ---------- */
.lesson-name { align-self: center; background: #7b4fd6; color: #fff; font-weight: 900; border-radius: 14px; padding: 4px 14px; font-size: 16px; }
.lesson-name.small { font-size: 13px; padding: 2px 10px; background: #ffc22e; color: #6a3a00; }
.q-text { font-size: 19px; color: var(--ink) !important; font-weight: 800 !important; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { appearance: none; border: 3px solid #c9b8f0; background: #fff; border-radius: 18px; padding: 12px 14px; font: inherit; font-size: 22px; font-weight: 900; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 #c9b8f0; letter-spacing: .5px; }
.choice:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9b8f0; }
.choice.ok { background: #d8f7dc; border-color: var(--green); box-shadow: 0 4px 0 var(--green); }
.choice.bad { background: #ffe0dc; border-color: var(--red); box-shadow: 0 4px 0 var(--red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tour-topic { color: #fff; font-weight: 900; font-size: 16px; -webkit-text-stroke: 4px #6a3ab8; paint-order: stroke fill; margin-top: 6px; text-align: center; }

/* ---------- Окна ---------- */
.modal-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 40, 30, .45); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal {
  background: var(--card); border: 4px solid #7a4a1e; border-radius: 28px; padding: 20px 18px; width: 100%; max-width: 420px; text-align: center;
  box-shadow: 0 16px 40px rgba(10, 25, 70, .4); display: flex; flex-direction: column; gap: 10px; max-height: 92vh; overflow: auto;
}
.modal h2 { margin: 0; font-size: 24px; text-wrap: balance; }
.modal p { margin: 0; line-height: 1.45; color: var(--ink2); font-weight: 600; }
.modal.tall { text-align: left; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rule-card { border-top: 8px solid #7b4fd6; }
.task-card { border-top: 8px solid var(--accent); }
.rule-text { background: #f1ecff; border-radius: 14px; padding: 12px; color: var(--ink) !important; text-align: left; font-size: 17px; }
.check b { color: var(--green); }
.task-word { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; font-size: 34px; font-weight: 900; letter-spacing: 1px; color: #3a2a70; }
.task-word .gap { min-width: 34px; border-bottom: 4px dashed #7b4fd6; color: #7b4fd6; }
.task-word .gap.ok { color: var(--green); border-color: var(--green); }
.task-word .gap.bad { color: var(--red); border-color: var(--red); }
.task-word .sp { width: 14px; }
.opts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.opt {
  appearance: none; border: 0; min-width: 70px; height: 76px; border-radius: 18px; font: inherit; font-size: 40px; font-weight: 900;
  background: #fff; color: var(--ink); box-shadow: 0 4px 0 #d9cfa8; cursor: pointer; padding: 0 12px;
}
.ans-row { display: flex; gap: 10px; justify-content: center; }
.ans-input { width: 90px; height: 64px; font: inherit; font-size: 40px; font-weight: 900; text-align: center; border: 3px solid #c9b8f0; border-radius: 16px; background: #fff; color: var(--ink); text-transform: uppercase; user-select: text; -webkit-user-select: text; }
.ans-input:focus { outline: none; border-color: #7b4fd6; }
.res-ok { font-size: 22px; font-weight: 900; color: var(--green); }
.res-bad { font-size: 18px; font-weight: 900; color: var(--red); }
.big-ico { font-size: 56px; display: flex; justify-content: center; }
.res-word { font-size: 34px; font-weight: 900; letter-spacing: 2px; color: #3a2a70; }
.res-word .hi { color: var(--green); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.streak { font-size: 18px; font-weight: 900; color: var(--red); }
.streak small { color: var(--ink2); font-weight: 700; }
.earned { font-size: 24px; font-weight: 900; color: var(--accent2); display: flex; align-items: center; justify-content: center; gap: 4px; }
.lost-life { font-size: 26px; font-weight: 900; color: var(--red); }
.lost-life small { font-size: 15px; color: var(--ink2); }
.gate-q { font-size: 34px; font-weight: 900; }
.toggle {
  appearance: none; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: #fff; border-radius: 16px; padding: 12px 14px; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer; text-align: left;
}
.toggle i { width: 50px; height: 30px; border-radius: 15px; background: #cfd6e6; position: relative; flex: none; transition: background .2s; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.toggle.on i { background: var(--green); }
.toggle.on i::after { left: 23px; }
.ver { font-size: 12px; color: var(--ink2); opacity: .7; }
.shop { display: flex; flex-direction: column; gap: 8px; }
.shop-stars { font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 4px; }
.shop-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px 10px; text-align: left; }
.shop-ico { font-size: 30px; width: 40px; text-align: center; }
.shop-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shop-txt small { color: var(--ink2); }
.rules-list p { margin: 8px 0; }
.ad-mark { font-size: 11px; color: var(--ink2); }
.ad-img { max-width: 100%; border-radius: 14px; }
.ad-icon { width: 110px; height: 110px; margin: 0 auto; border-radius: 26px; }
.ad-close { align-self: center; min-width: 120px; }

@media (max-height: 660px) {
  .keypad { grid-template-columns: repeat(3, 64px); gap: 8px; }
  .key { height: 50px; font-size: 24px; }
  .age-disp { font-size: 48px; }
  .logo-title { font-size: 38px; }
}