:root{
  --sea:#BDE8F6; --sea-2:#9FDCF0; --ink:#173B5C; --muted:#4F6E8A;
  --card:#FFFFFF; --line:#C9DDEA; --sun:#FFC83D; --sun-dark:#E0A100; --sun-ink:#3A2A00;
  --coral:#FF5C7F; --leaf:#2FB57A; --sand:#FFE6A0; --palm:#3DBE7A;
  --right-bg:#DDF7E9; --wrong-bg:#FFE3EA; --octo:#9B6BFF; --octo-2:#B996FF;
  --path:#FFFFFF; --bubble:#FFFFFF;
  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sea:#0E2B45; --sea-2:#123757; --ink:#EAF4FF; --muted:#A5BDD3;
    --card:#183D5E; --line:#2A5679; --sun:#FFC83D; --sun-dark:#C48C00; --sun-ink:#2E2100;
    --coral:#FF7A96; --leaf:#45CF91; --sand:#E9C96B; --palm:#2FA066;
    --right-bg:#1C4A3A; --wrong-bg:#4A2336; --octo:#A67DFF; --octo-2:#C3A5FF;
    --path:#5E86A8; --bubble:#183D5E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --sea:#0E2B45; --sea-2:#123757; --ink:#EAF4FF; --muted:#A5BDD3;
  --card:#183D5E; --line:#2A5679; --sun:#FFC83D; --sun-dark:#C48C00; --sun-ink:#2E2100;
  --coral:#FF7A96; --leaf:#45CF91; --sand:#E9C96B; --palm:#2FA066;
  --right-bg:#1C4A3A; --wrong-bg:#4A2336; --octo:#A67DFF; --octo-2:#C3A5FF;
  --path:#5E86A8; --bubble:#183D5E;
  color-scheme: dark;
}
/* Teen mode (from 6th grade) */
:root[data-mode="teen"]{
  --sea:#EEF1F7; --sea-2:#E2E7F2; --ink:#131A2B; --muted:#5D6880;
  --card:#FFFFFF; --line:#DCE2EE; --sun:#5B5BF0; --sun-dark:#4141C9; --sun-ink:#FFFFFF;
  --coral:#E8466A; --leaf:#12A874; --sand:#F2D98B; --palm:#2BB673;
  --right-bg:#DDF6EC; --wrong-bg:#FDE5EA; --octo:#5B5BF0; --octo-2:#8E8EF7;
  --path:#B8C2D9; --bubble:#FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root[data-mode="teen"]:not([data-theme="light"]){
    --sea:#0D1220; --sea-2:#131B2E; --ink:#E8ECF6; --muted:#97A3BD;
    --card:#161E31; --line:#27314B; --sun:#7070FF; --sun-dark:#4B4BD6; --sun-ink:#FFFFFF;
    --coral:#FF6F8A; --leaf:#2FD39A; --right-bg:#173B32; --wrong-bg:#43202D; --octo:#7C7CFF;
    --path:#3A4766; --bubble:#161E31;
    color-scheme: dark;
  }
}
:root[data-mode="teen"][data-theme="dark"]{
  --sea:#0D1220; --sea-2:#131B2E; --ink:#E8ECF6; --muted:#97A3BD;
  --card:#161E31; --line:#27314B; --sun:#7070FF; --sun-dark:#4B4BD6; --sun-ink:#FFFFFF;
  --coral:#FF6F8A; --leaf:#2FD39A; --right-bg:#173B32; --wrong-bg:#43202D; --octo:#7C7CFF;
  --path:#3A4766; --bubble:#161E31;
  color-scheme: dark;
}
[data-mode="teen"] body{font-family:"Manrope","Segoe UI",system-ui,sans-serif;font-size:17px}
[data-mode="teen"] h1,[data-mode="teen"] h2{font-weight:800;letter-spacing:-.02em}
[data-mode="teen"] .btn{border-radius:14px;box-shadow:none;font-weight:800}
[data-mode="teen"] .btn:active{transform:scale(.98);box-shadow:none}
[data-mode="teen"] .btn.ghost{box-shadow:inset 0 0 0 2px var(--line)}
[data-mode="teen"] .card,[data-mode="teen"] .theme,[data-mode="teen"] .player,[data-mode="teen"] .opt,[data-mode="teen"] .tile,[data-mode="teen"] .chip,[data-mode="teen"] .icon-btn,[data-mode="teen"] .bubble,[data-mode="teen"] .isl-name,[data-mode="teen"] .wcard,[data-mode="teen"] .level,[data-mode="teen"] .age,[data-mode="teen"] .msg.bot .bub,[data-mode="teen"] .say,[data-mode="teen"] .xp{box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(15,23,42,.06)}
[data-mode="teen"] .opt,[data-mode="teen"] .tile{border-width:2px}
[data-mode="teen"] .msg.kid .bub{box-shadow:none}
[data-mode="teen"] .bob{animation:none}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  font-size:18px; line-height:1.45;
  background:var(--sea);
  background-image:
    radial-gradient(ellipse 60% 40% at 10% 0%, var(--sea-2), transparent 70%),
    radial-gradient(ellipse 50% 30% at 100% 60%, var(--sea-2), transparent 70%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 40px}
h1,h2,h3{margin:0;line-height:1.15;font-weight:900}
h1{font-size:2.1rem;letter-spacing:-.01em}
h2{font-size:1.6rem}
p{margin:0}

.btn{
  border:0;border-radius:18px;padding:15px 22px;font-weight:900;font-size:1.1rem;
  background:var(--sun);color:var(--sun-ink);box-shadow:0 5px 0 var(--sun-dark);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-dark)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.wide{width:100%}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--line)}
.icon-btn{border:0;background:var(--card);border-radius:14px;min-width:46px;height:46px;font-size:1.2rem;box-shadow:0 3px 0 var(--line);font-weight:800;padding:0 12px}

/* Octopus */
.octo{display:block;overflow:visible}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.bubble{
  position:relative;background:var(--bubble);border-radius:20px;padding:14px 16px;
  font-weight:800;box-shadow:0 4px 0 var(--line);
}
.bubble::before{
  content:"";position:absolute;left:-10px;top:24px;border:10px solid transparent;
  border-right-color:var(--bubble);border-left:0;
}
.hero{display:flex;gap:12px;align-items:flex-start;margin:8px 0 6px}
.hero .bubble{flex:1;margin-top:8px}
.plain-list{margin:8px 0 0;padding-left:20px}
.listen-again{margin-top:12px}
.bye-row{display:flex;gap:10px}
.faq details{border-top:1px dashed var(--line);padding:10px 0}
.faq details:first-of-type{border-top:0}
.faq summary{font-weight:900;cursor:pointer;list-style:none;padding:4px 0;min-height:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋ ";color:var(--octo)}
.faq details[open] summary::before{content:"－ "}
.faq p{margin:6px 0 0;line-height:1.5;font-weight:600}
.faq a{color:var(--octo);font-weight:800}
.bye-row .btn{margin:0}
.soft-note{text-align:center;color:var(--muted);font-size:.92rem;font-weight:700;margin:10px 0 0}
.parent-badge{display:inline-block;margin:4px auto 10px;padding:6px 14px;border-radius:999px;background:var(--sun);color:var(--sun-ink);font-weight:900}
.consent-card{text-align:left}
.docs-footer{display:flex;flex-direction:column;gap:12px;align-items:center;margin:22px 0 8px;text-align:center}
.docs-footer a{color:var(--muted);font-weight:800;padding:6px 4px}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;font-weight:700;line-height:1.4;cursor:pointer}
.check + .check{border-top:1px dashed var(--line)}
.check input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--octo);cursor:pointer}
.check a{color:var(--octo);font-weight:900}
#consentBtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.consent-need{text-align:left;border:2px solid var(--sun)}
.plain-list li{margin:6px 0;line-height:1.4}
.hero-btn{border:0;background:none;padding:0;margin:0;cursor:pointer;position:relative;flex:none;border-radius:20px;-webkit-tap-highlight-color:transparent}
.hero-btn:focus-visible{outline:3px solid var(--octo);outline-offset:3px}
.hero-btn:active .octo{transform:scale(.94)}
.hero-btn.wave .octo{animation:wave 1.1s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.tap-hint{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);white-space:nowrap;background:var(--sun);color:#3A2A00;font-size:.78rem;font-weight:900;padding:3px 9px;border-radius:12px;box-shadow:0 2px 0 rgba(0,0,0,.15);animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero-btn.wave .octo,.tap-hint{animation:none}}

/* Start */
.start{text-align:center;padding-top:28px}
.start .octo{margin:0 auto 6px}
.start .lead{color:var(--muted);font-weight:700;margin:10px auto 26px;max-width:30ch}
.players{display:grid;gap:12px;margin:14px 0 18px}
.player{
  display:flex;justify-content:space-between;align-items:center;border:0;
  background:var(--card);border-radius:18px;padding:16px 18px;font-weight:900;font-size:1.15rem;
  box-shadow:0 5px 0 var(--line);text-align:left;
}
.player small{font-weight:800;color:var(--muted);font-size:.95rem}
.name-row{display:flex;gap:10px;margin-top:10px}
.name-row input{
  flex:1;min-width:0;border:3px solid var(--line);border-radius:16px;padding:12px 14px;
  font:inherit;font-weight:800;background:var(--card);color:var(--ink);
}
.err{color:var(--coral);font-weight:800;min-height:1.5em;margin-top:8px}

/* Age & level */
.ages{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.age{border:0;background:var(--card);border-radius:18px;padding:18px 0;font-weight:900;font-size:1.5rem;box-shadow:0 5px 0 var(--line)}
.age:active,.level:active{transform:translateY(3px)}
.levels{display:grid;gap:14px;text-align:left}
.level{display:flex;gap:14px;align-items:center;border:3px solid transparent;background:var(--card);border-radius:20px;padding:16px;box-shadow:0 5px 0 var(--line);text-align:left}
.level.sel{border-color:var(--octo)}
.level b{font-size:1.2rem;font-weight:900}
.level small{display:block;color:var(--muted);font-weight:700;font-size:.95rem;margin-top:2px}
.lv-emoji{font-size:2.2rem}
.rec{display:inline-block;background:var(--sun);color:var(--sun-ink);font-size:.8rem;font-weight:900;padding:2px 8px;border-radius:999px;vertical-align:middle}

/* Vocabulary */
.tabs-space{height:100px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);box-shadow:0 -3px 0 var(--line)}
.tabs button{flex:1;max-width:240px;border:0;background:none;border-radius:16px;padding:6px;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;font-weight:900;position:relative;line-height:1.2}
.tabs button span{font-size:.85rem}
.tabs button.on{background:color-mix(in srgb, var(--sun) 40%, transparent)}
.badge{position:absolute;top:0;left:calc(50% + 10px);background:var(--coral);color:#fff;font-size:.75rem !important;border-radius:999px;padding:1px 7px}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.theme{border:0;background:var(--card);border-radius:22px;padding:16px 10px;box-shadow:0 5px 0 var(--line);display:flex;flex-direction:column;align-items:center;gap:2px}
.theme b{font-size:1.1rem}
.theme small{color:var(--muted);font-weight:800}
.theme:active,.wcard:active{transform:translateY(3px)}
.th-emoji{font-size:2.6rem;line-height:1.2}
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wcard{border:0;background:var(--card);border-radius:18px;padding:14px 8px;box-shadow:0 4px 0 var(--line);display:flex;flex-direction:column;align-items:center}
.wcard b{font-size:1.15rem;font-weight:900}
.wcard small{color:var(--muted);font-weight:700;font-size:.95rem}
.wc-emoji{font-size:2.4rem;line-height:1.2}
.big-emoji{font-size:5rem;text-align:center;line-height:1.1}
.big-say{width:88px;height:88px;font-size:2.4rem;border-radius:26px}
.opts.pics{grid-template-columns:repeat(3,1fr)}
.opts.pics .opt{padding:12px 4px}
.opt-emoji{display:block;text-align:center;font-size:2.6rem;line-height:1.2}
.slots.letters{justify-content:center}
.letters .tile,.bank .tile{min-width:44px;text-align:center}
.review-btn{margin-top:12px}

/* Speaking */
.speak-word{font-size:2.4rem;font-weight:900;text-align:center;margin-top:4px}
.speak-row{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:18px}
.mic{width:104px;height:104px;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:2.8rem;box-shadow:0 6px 0 color-mix(in srgb, var(--coral) 55%, #000)}
.mic:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb, var(--coral) 55%, #000)}
.mic.on{animation:pulse 1s ease-in-out infinite;background:var(--leaf);box-shadow:0 6px 0 color-mix(in srgb, var(--leaf) 55%, #000)}
@keyframes pulse{50%{transform:scale(1.08)}}
.status{text-align:center;font-weight:800;min-height:3em;margin-top:16px}
.status.ok{color:var(--leaf)}
.status.bad{color:var(--coral)}

/* Parents */
.muted-line{color:var(--muted);font-weight:700}
.card h3{margin-bottom:10px}
.parent .qbar h2{font-size:1.4rem}
.kid-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.kid{border:0;background:var(--card);border-radius:999px;padding:8px 16px;font-weight:900;box-shadow:0 3px 0 var(--line)}
.kid.on{background:var(--octo);color:#fff;box-shadow:0 3px 0 color-mix(in srgb, var(--octo) 60%, #000)}
.week{display:flex;justify-content:space-between;gap:4px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:.85rem;color:var(--muted)}
.dot{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb, var(--ink) 10%, transparent);display:grid;place-items:center;color:#fff;font-weight:900}
.dot.on{background:var(--leaf)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:color-mix(in srgb, var(--sea) 55%, var(--card));border-radius:14px;padding:10px 12px}
.stat b{display:block;font-size:1.5rem;font-weight:900}
.stat span{color:var(--muted);font-weight:700;font-size:.9rem}
.rowlist{display:grid;gap:10px}
.rl{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:800}
.rl small{color:var(--muted);font-weight:700;font-size:.9rem;text-align:right}

/* Chat */
.chat-wrap{padding-bottom:210px}
.chat-title{font-size:1.1rem;font-weight:900}
.msgs{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.msg{display:flex;gap:8px;align-items:flex-end}
.msg.kid{justify-content:flex-end}
.msg .bub{background:var(--card);border-radius:20px;padding:12px 14px;box-shadow:0 3px 0 var(--line);max-width:82%;font-weight:700}
.msg.bot .bub{border-bottom-left-radius:6px}
.msg.kid .bub{background:var(--octo);color:#fff;border-bottom-right-radius:6px;box-shadow:0 3px 0 color-mix(in srgb, var(--octo) 60%, #000)}
.avatar{flex:none}
.en-t{font-weight:800;font-size:1.1rem}
.ru-t{color:var(--muted);font-weight:700;margin-top:6px}
.bub-tools{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mini{border:0;background:color-mix(in srgb, var(--sun) 45%, transparent);color:var(--ink);border-radius:10px;padding:4px 10px;font-weight:800;font-size:.9rem}
.corr{align-self:flex-end;max-width:85%;background:var(--wrong-bg);border-radius:16px;padding:10px 12px;font-weight:700;font-size:.95rem}
.corr .why{display:block;color:var(--muted);margin-top:4px}
.typing{color:var(--muted);font-weight:800}
.chat-err{background:var(--wrong-bg);border-radius:16px;padding:12px;font-weight:800;display:grid;gap:10px;margin-top:8px}
.composer{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--card);box-shadow:0 -3px 0 var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.composer .in{max-width:560px;margin:0 auto}
.hints{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}
.hint-chip{flex:none;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.95rem;white-space:nowrap}
.comp-row{display:flex;gap:8px}
.comp-row input{flex:1;min-width:0;border:3px solid var(--line);border-radius:16px;padding:10px 12px;font:inherit;font-weight:700;background:var(--card);color:var(--ink)}
.cbtn{border:0;width:50px;height:50px;border-radius:14px;font-size:1.3rem;flex:none;background:var(--sun);color:var(--sun-ink);box-shadow:0 3px 0 var(--sun-dark)}
.cbtn.mic-on{background:var(--leaf);animation:pulse 1s ease-in-out infinite}
.remember{text-align:left;margin:0 0 18px}

.isl-place{font-weight:800;font-size:.85rem;background:color-mix(in srgb, var(--card) 75%, transparent);padding:2px 8px;border-radius:10px;white-space:nowrap}
.postcard{border:3px dashed var(--line);box-shadow:none}
.pc-top{font-weight:900;font-size:1.05rem}
.pc-fact{display:flex;gap:10px;align-items:center;margin-top:10px;font-weight:800}

.isl-land{background:none;overflow:hidden;position:relative;box-shadow:0 0 0 7px color-mix(in srgb, var(--card) 65%, transparent), 0 6px 14px rgba(0,0,0,.12)}
.isl-land .scene{width:100%;height:100%;display:block}
.isl-lock{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;background:rgba(255,255,255,.35)}
.rule-scene{width:78px;height:78px;border-radius:24px;overflow:hidden;flex:none;box-shadow:0 4px 0 var(--line)}
.rule-scene .scene{width:100%;height:100%;display:block}

.report-btn{display:block;margin:12px auto 0;border:0;background:none;color:var(--muted);font-weight:800;font-size:.9rem;text-decoration:underline}

/* Motivation */
.daily{margin-top:14px}
.daily-head{display:flex;justify-content:space-between;align-items:center}
.daily-head h3{margin-bottom:6px}
.dtask{display:flex;gap:12px;align-items:center;width:100%;border:0;background:none;padding:8px 0;font-weight:800;text-align:left}
.dtask + .dtask{border-top:2px dashed var(--line)}
.dcheck{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;border:3px solid var(--line);color:#fff;font-weight:900}
.dtask.done .dcheck{background:var(--leaf);border-color:var(--leaf)}
.dtask.done span:last-child{color:var(--muted);text-decoration:line-through}
.quick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.qbtn{display:flex;align-items:center;gap:10px;border:0;background:var(--card);border-radius:18px;padding:8px 12px;font-weight:900;box-shadow:0 4px 0 var(--line);min-height:62px;text-align:left}
.qbtn:active{transform:translateY(3px)}
.qemoji{font-size:2rem;width:46px;text-align:center}
.pet-stage{display:flex;justify-content:center;margin:6px 0 4px}
.stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stamp{background:var(--card);border-radius:18px;padding:12px 6px;text-align:center;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;gap:4px}
.stamp:nth-child(odd){transform:rotate(-2deg)}
.stamp:nth-child(even){transform:rotate(2deg)}
.stamp-img{width:70px;height:70px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px color-mix(in srgb, var(--leaf) 50%, transparent)}
.stamp-img .scene{width:100%;height:100%;display:block}
.stamp b{font-size:.9rem;line-height:1.2}
.stamp small{color:var(--muted);font-weight:700;font-size:.8rem}
.stamp.off .stamp-img{filter:grayscale(1);opacity:.4;box-shadow:none}
[data-mode="teen"] .qbtn{box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(15,23,42,.06)}

/* Stories */
.sline{display:flex;gap:10px;align-items:flex-start;padding:10px 0}
.sline + .sline{border-top:2px dashed var(--line)}
.en-s{flex:1;font-weight:800;font-size:1.1rem}
.squest{margin-top:14px}
.squest + .squest{border-top:2px dashed var(--line);padding-top:14px}
.squest p:first-child{font-weight:900;font-size:1.1rem}
.mini-say{width:32px;height:32px;font-size:.9rem;border-radius:10px;vertical-align:middle}

/* Course levels */
.lvl-tabs{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 6px;padding:4px 16px 6px}
.lvl-tab{flex:none;border:0;background:var(--card);border-radius:999px;padding:9px 16px;font-weight:900;box-shadow:0 3px 0 var(--line);white-space:nowrap}
.lvl-tab.on{background:var(--sun);color:var(--sun-ink);box-shadow:0 3px 0 var(--sun-dark)}
.lvl-info{margin-bottom:4px}
.isl{width:160px}
.isl-name{max-width:160px;text-align:center;line-height:1.2}
.isl.soon .isl-land{opacity:.85}
.isl.soon .isl-name{opacity:.75;font-size:.9rem}
.isl.soon .isl-place{color:var(--muted)}
.pp-lvl{margin:18px 0 10px}
[data-mode="teen"] .lvl-tab{box-shadow:0 0 0 1px var(--line)}

.say.big-say{width:88px;height:88px;font-size:2.4rem;border-radius:26px}

.dtask:not(.done) .dcheck{color:var(--muted);font-size:.9rem}
.btn.armed{background:var(--coral);color:#fff;box-shadow:0 5px 0 color-mix(in srgb, var(--coral) 60%, #000)}
.soon-theme{opacity:.55}
.soon-theme small{font-style:italic}

/* Map */
.topbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{background:var(--card);border-radius:999px;padding:6px 12px;font-weight:900;font-size:.95rem;box-shadow:0 3px 0 var(--line);white-space:nowrap}
.spacer{flex:1}
.map{position:relative;margin-top:6px}
.map svg.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.isl{
  position:absolute;width:148px;border:0;background:none;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.isl-land{
  width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%, var(--sand) 0 58%, var(--palm) 59% 68%, transparent 69%);
  box-shadow:0 0 0 9px color-mix(in srgb, var(--path) 45%, transparent);
  transition:transform .12s;
}
.isl:active .isl-land{transform:scale(.94)}
.isl-emoji{font-size:2.6rem;line-height:1}
.isl-name{font-weight:900;font-size:1rem;background:var(--card);padding:4px 10px;border-radius:12px;box-shadow:0 3px 0 var(--line)}
.isl-stars{font-size:1.05rem;letter-spacing:2px;color:var(--sun);text-shadow:0 1px 0 rgba(0,0,0,.15)}
.isl-stars .off{color:color-mix(in srgb, var(--ink) 25%, transparent)}
.isl.locked .isl-land{filter:grayscale(1);opacity:.6}
.isl.locked .isl-name{opacity:.7}
.isl.shake .isl-land{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.here{position:absolute;pointer-events:none}
.fish{position:absolute;font-size:1.6rem;opacity:.75;pointer-events:none}

/* Rule */
.rule-head{display:flex;align-items:center;gap:14px;margin:18px 0 12px}
.rule-head .big{font-size:3rem}
.rule-head p{color:var(--muted);font-weight:800}
.card{background:var(--card);border-radius:22px;padding:18px;box-shadow:0 5px 0 var(--line);margin-bottom:14px}
.card p+p{margin-top:10px}
.card b{font-weight:900}
.en{font-weight:900;color:var(--octo)}
.table{display:grid;gap:8px;margin:12px 0 2px}
.trow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:color-mix(in srgb, var(--sea) 60%, var(--card));border-radius:14px;padding:10px 14px;font-weight:900}
.trow > span:last-child{color:var(--octo);font-size:1.15rem}
.ru{color:var(--muted);font-weight:700}
.ru-line{display:block;color:var(--muted);font-weight:700;font-size:.92rem}
.ex{display:flex;align-items:center;gap:10px;padding:8px 0;font-weight:800}
.ex + .ex{border-top:2px dashed var(--line)}
.say{border:0;background:var(--sun);color:var(--sun-ink);width:40px;height:40px;border-radius:12px;font-size:1.05rem;flex:none;box-shadow:0 3px 0 var(--sun-dark)}
.sticky-go{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));margin-top:18px}

/* Quiz */
.qbar{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.prog{flex:1;height:18px;background:var(--card);border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 0 var(--line)}
.prog i{display:block;height:100%;background:var(--leaf);border-radius:999px;transition:width .3s}
.ins{font-weight:900;color:var(--muted);margin-bottom:10px}
.sentence{font-size:1.6rem;font-weight:900;line-height:1.3}
.blank{display:inline-block;min-width:3.2em;border-bottom:4px solid var(--octo);text-align:center;padding:0 .15em;color:var(--octo)}
.blank.ok{color:var(--leaf);border-color:var(--leaf)}
.tr{color:var(--muted);font-weight:700;margin-top:8px}
.opts{display:grid;gap:12px;margin-top:16px}
.opt{
  border:3px solid var(--line);background:var(--card);border-radius:18px;padding:14px 16px;
  font-weight:900;font-size:1.2rem;text-align:left;box-shadow:0 4px 0 var(--line);
}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.opt.right{background:var(--right-bg);border-color:var(--leaf);box-shadow:0 4px 0 var(--leaf)}
.opt.wrong{background:var(--wrong-bg);border-color:var(--coral);box-shadow:0 4px 0 var(--coral)}
.opt:disabled{cursor:default;transform:none}
.slots{
  min-height:68px;border-bottom:3px dashed var(--line);display:flex;flex-wrap:wrap;gap:8px;
  padding:8px 0 12px;align-content:flex-start;
}
.slots.ok{border-color:var(--leaf)}
.slots.bad{border-color:var(--coral)}
.bank{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px;min-height:52px}
.tile{
  border:3px solid var(--line);background:var(--card);border-radius:14px;padding:8px 14px;
  font-weight:900;font-size:1.15rem;box-shadow:0 4px 0 var(--line);
}
.tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.tile.ghost{visibility:hidden}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:26px 26px 0 0;box-shadow:0 -6px 0 rgba(0,0,0,.06);
  animation:up .25s ease-out;
}
.sheet.good{background:var(--right-bg)}
.sheet.bad{background:var(--wrong-bg)}
.sheet .in{max-width:560px;margin:0 auto}
.sheet-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sheet h3{font-size:1.45rem}
.sheet .good-t{color:var(--leaf)}
.sheet .bad-t{color:var(--coral)}
.answer{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;margin:6px 0}
.hint{font-weight:700;margin:4px 0 14px}
@keyframes up{from{transform:translateY(100%)}}
.pad-bottom{height:260px}

/* Result */
.result{text-align:center;padding-top:30px}
.big-stars{font-size:3.6rem;letter-spacing:6px;margin:18px 0 8px;color:var(--sun)}
.big-stars span{display:inline-block;animation:pop .5s backwards cubic-bezier(.3,1.6,.5,1)}
.big-stars span:nth-child(2){animation-delay:.25s}
.big-stars span:nth-child(3){animation-delay:.5s}
.big-stars .off{color:color-mix(in srgb, var(--ink) 22%, transparent)}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.result .lead{font-weight:800;color:var(--muted);margin:6px 0 24px}
.xp{display:inline-block;background:var(--card);padding:8px 16px;border-radius:999px;font-weight:900;box-shadow:0 4px 0 var(--line);margin-bottom:14px}
.stack{display:grid;gap:14px;margin-top:10px}

#toast{
  position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translate(-50%,-150%);
  z-index:10;background:var(--ink);color:var(--card);font-weight:800;padding:12px 16px;border-radius:16px;
  max-width:min(92vw,480px);text-align:center;transition:transform .25s;
}
#toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Подписка: замочки, экран «Доступно по подписке» ---------- */
.isl.paid .isl-land{filter:grayscale(.85);opacity:.55}
.paid-tag{display:inline-block;font-size:.75rem;font-weight:900;color:var(--muted);background:var(--card);border-radius:999px;padding:2px 8px;letter-spacing:0}
.theme.paid{opacity:.7}
.theme.paid .th-emoji{filter:grayscale(.8)}
.paywall-lock{font-size:4rem;margin:8px 0 4px}
.trial-card p{font-weight:800}
.trial-card .btn{margin-top:10px}
.access-ok{border:2px solid var(--leaf)}
#codeInput{text-transform:uppercase;letter-spacing:.06em}
.free-done{margin-bottom:14px;padding-bottom:14px;border-bottom:2px dashed var(--line)}
.free-done p{font-weight:800;margin-bottom:8px}
.free-over{text-align:center}
.free-over-icon{font-size:3.2rem;line-height:1;margin-bottom:6px}
.free-over h3{margin-bottom:8px}
.free-over p{margin-bottom:14px}
.free-over-btn{font-size:1.1rem;padding:16px}

/* ---------- Половинки звёзд ---------- */
.isl-stars .half,.big-stars .half{
  background:linear-gradient(90deg, var(--sun) 50%, color-mix(in srgb, var(--ink) 25%, transparent) 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none}
.best-note{color:var(--muted);font-weight:800;margin:-2px 0 6px}
.xp-parts{color:var(--muted);font-weight:700;font-size:.92rem;margin:4px 0 10px}
.perfect-badge{display:table;margin:6px auto 12px;padding:10px 18px;border-radius:999px;font-weight:900;font-size:1.25rem;
  background:linear-gradient(90deg,#FFD23F,#FF9F1C);color:#3A2A00;box-shadow:0 4px 0 #E0A100;animation:pop .6s .7s backwards cubic-bezier(.3,1.6,.5,1)}
.devices-card{text-align:left;border:2px solid var(--coral)}
.devices-card p:first-child{margin-bottom:8px}