/* ============================================================
   app.css · екрани: Днес, Пътят, Игри, Библиотека, Профил
   ============================================================ */

/* ============================================================
   0. ОБЩ ЛИСТ (използва се навсякъде)
   ============================================================ */
.sheet{
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 30%),
    var(--paper-2);
  border:var(--bw) solid var(--rule);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:20px;
  position:relative;
}
.sheet::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid rgba(207,174,125,.45); border-radius:calc(var(--r-lg) - 3px);
}

/* ============================================================
   1. ЕКРАН „ДНЕС" — единственото, което детето вижда при вход
   ============================================================ */
.today-hello{
  display:flex; align-items:center; gap:14px;
  margin-bottom:16px; flex-wrap:wrap;
}
.today-hello .fox{
  width:60px; height:60px; flex:none; display:grid; place-items:center;
  font-size:34px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff6e2, var(--paper-3));
  border:2px dashed var(--rule-2);
}
.today-hello .txt h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px,4vw,30px); margin:0; line-height:1.1;
}
.today-hello .txt p{
  font-family:var(--font-hand); font-size:19px; color:var(--ink-soft);
  margin:0; line-height:1.2;
}

/* --- Голямата карта „следваща стъпка" --- */
.next-card{
  position:relative; overflow:hidden;
  border:3px solid var(--rule-2);
  border-radius:var(--r-xl);
  padding:26px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), transparent 34%),
    var(--paper-2);
  box-shadow:var(--sh-2);
}
.next-card::before{
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px dashed var(--rule); border-radius:calc(var(--r-xl) - 5px);
}
.next-ribbon{
  display:inline-block;
  font-family:var(--font-hand); font-size:20px; font-weight:700;
  color:#fdf6e6; background:var(--seal);
  padding:2px 18px; border-radius:3px;
  box-shadow:0 2px 0 var(--seal-d);
  transform:rotate(-1.4deg);
  margin-bottom:12px;
}
.next-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,5vw,38px); line-height:1.06; margin:0;
}
.next-sub{
  font-weight:800; font-size:14.5px; color:var(--ink-soft); margin-top:6px;
}
.next-meta{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
}
.next-meta span{
  font-weight:900; font-size:12.5px; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:4px 11px;
}
.next-card .bigplay{ margin-top:18px; font-size:18px; padding:15px; }

/* --- Компас: дневна цел + серия --- */
.today-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-top:16px;
}
.mini-card{
  display:flex; align-items:center; gap:13px;
  background:var(--paper-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-lg); padding:15px 17px; box-shadow:var(--sh-1);
}
.mini-card .mc-ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  font-size:23px; border-radius:50%;
  background:var(--surface-2); border:2px solid var(--rule);
}
.mini-card .mc-txt{ min-width:0; }
.mini-card b{ font-family:var(--font-display); font-size:23px; display:block; line-height:1.05; }
.mini-card span{ display:block; font-weight:800; font-size:12px; color:var(--ink-soft); line-height:1.3; }

/* --- Три предложения за днес --- */
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.pick{
  text-align:left; cursor:pointer;
  background:var(--paper-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1);
  color:var(--ink); font-family:var(--font-body);
  transition:transform .2s var(--ease), box-shadow .25s, border-color .25s;
  position:relative;
}
.pick:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--rule-2); }
.pick .pi{ display:block; font-size:30px; line-height:1; }
.pick .pt{ display:block; font-family:var(--font-display); font-weight:800; font-size:18px; margin-top:6px; }
.pick .pd{ display:block; font-weight:700; font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
.pick .pgo{
  display:inline-block; margin-top:11px;
  font-weight:900; font-size:12.5px; color:#fdf6e6;
  background:var(--forest); border:1px solid var(--forest-d);
  border-radius:var(--r-sm); padding:5px 13px;
}
.pick.game .pgo{ background:var(--plum); border-color:var(--plum-d); }
.pick.word .pgo{ background:var(--sea); border-color:var(--sea-d); }

/* --- Лента с нивото --- */
.levelbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border:var(--bw) dashed var(--rule-2);
  border-radius:var(--r-lg); padding:12px 16px; margin-bottom:16px;
}
.levelbar .lv{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  color:#fdf6e6; background:var(--plum); border:2px solid var(--plum-d);
  border-radius:var(--r-sm); padding:3px 13px;
}
.levelbar .lvtxt{ font-weight:800; font-size:13.5px; color:var(--ink-soft); flex:1; min-width:150px; }
.levelbar .lvbtn{
  border:1px solid var(--rule-2); background:var(--paper-2); color:var(--ink);
  border-radius:var(--r-sm); padding:7px 13px; font-weight:900; font-size:12.5px; cursor:pointer;
}
.levelbar .lvbtn:hover{ background:var(--paper-3); }

/* ============================================================
   Табелата на кръстопътя (обобщението над картата)
   ============================================================ */
.hero{
  background:var(--paper-2);
  border:3px solid var(--rule-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:20px 22px; margin-bottom:22px;
  position:relative;
}
.hero::after{
  content:""; position:absolute; inset:8px; pointer-events:none;
  border:1px dashed var(--rule); border-radius:calc(var(--r-xl) - 7px);
}
.hero > *{ position:relative; z-index:1; }
.hero-top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-emoji{
  width:74px; height:74px; flex:none; display:grid; place-items:center;
  font-size:40px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff6e2, var(--paper-3));
  border:3px dashed var(--rule-2);
}
.hero-top h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px,4.2vw,30px); line-height:1.1; margin:0;
}
.hero-top p{
  font-family:var(--font-hand); font-size:19px; color:var(--ink-soft);
  margin:4px 0 0; line-height:1.25;
}
.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; margin-top:18px;
  border-top:1px dashed var(--rule); padding-top:16px;
}
.hero-stat{ text-align:center; }
.hero-stat b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:23px; line-height:1.05; color:var(--ink);
}
.hero-stat span{
  display:block; font-weight:800; font-size:11.5px;
  color:var(--ink-soft); margin-top:3px; line-height:1.3;
}
.hero-cta{ display:flex; gap:11px; flex-wrap:wrap; margin-top:18px; }
.hero-btn{
  flex:1; min-width:170px; cursor:pointer;
  font-family:var(--font-body); font-weight:900; font-size:16px;
  color:#fdf6e6; background:var(--seal);
  border:2px solid var(--seal-d); border-radius:var(--r-md);
  padding:14px 18px; box-shadow:0 4px 0 var(--seal-d);
  transition:transform .16s var(--ease), box-shadow .16s;
}
.hero-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--seal-d); }
.hero-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--seal-d); }
.hero-btn.ghost{
  background:var(--paper-3); color:var(--ink);
  border-color:var(--rule-2); box-shadow:0 4px 0 var(--rule);
}
.hero-btn.ghost:hover{ box-shadow:0 6px 0 var(--rule); }
@media (max-width:640px){ .hero-stats{ grid-template-columns:repeat(2,1fr); gap:14px 10px; } }
@media (max-width:520px){
  .hero{ padding:17px 15px; }
  .hero-emoji{ width:58px; height:58px; font-size:31px; }
  .hero-btn{ min-width:100%; }
}

/* ============================================================
   2. ПЪТЯТ — карта с региони и маршрут
   ============================================================ */
.world{
  border:3px solid var(--rule-2);
  border-radius:var(--r-xl);
  background:var(--paper-2);
  box-shadow:var(--sh-2);
  margin-bottom:20px;
  overflow:hidden;
  transition:box-shadow .3s, opacity .3s;
}
.world.locked{ opacity:.6; }
.world-head{
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  padding:18px 20px; cursor:pointer; position:relative;
  color:#fdf6e6;
  /* цветът на света идва от учебния план, но го потапяме в мастило,
     за да не крещи върху пергамента */
  background:
    linear-gradient(160deg, rgba(46,30,14,.46), rgba(46,30,14,.68)),
    linear-gradient(135deg, var(--wc,#8f2f2b), var(--wc2,#5f1c1a));
}
.world-head::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 46%),
    var(--grain);
  background-size:auto, 140px 140px;
  opacity:.9; mix-blend-mode:soft-light;
}
.world-head > *{ position:relative; z-index:1; }
.world-head .we{ font-size:42px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); line-height:1; }
.world-head .wt{ flex:1; min-width:170px; }
.world-head .wcode{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.4);
  border-radius:3px; padding:0 11px; font-size:13px; margin-bottom:4px;
  letter-spacing:1.4px;
}
.world-head .wname{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(20px,3vw,28px); line-height:1.06; letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.world-head .wgoal{ font-weight:800; font-size:13px; opacity:.94; margin-top:4px; }

/* печат с процент */
.world-head .wpct{
  --p:0;
  width:70px; height:70px; flex:none; position:relative;
  display:grid; place-items:center;
  border-radius:50%;
  background:conic-gradient(#fdf6e6 calc(var(--p)*1%), rgba(0,0,0,.26) 0);
  font-family:var(--font-display); font-weight:800; font-size:17px;
  border:2px solid rgba(255,255,255,.5);
}
.world-head .wpct::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  background:rgba(60,35,15,.55);
}
.world-head .wpct span{ position:relative; z-index:1; }
.world-chevron{ font-size:19px; transition:transform .35s var(--ease-out); }
.world.open .world-chevron{ transform:rotate(180deg); }
.world-bar{ height:5px; background:rgba(0,0,0,.2); }
.world-bar i{ display:block; height:100%; background:var(--gold); transition:width .8s var(--ease-out); }
.world-body{ padding:4px 18px 20px; display:none; }
.world.open .world-body{ display:block; animation:unroll .45s var(--ease-out); }

/* --- Раздел --- */
.unit{ margin-top:22px; }
.unit-head{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  padding:4px 2px 10px; color:var(--ink);
}
.unit-head .ue{ font-size:20px; }
.unit-head .ubar{
  flex:1; height:6px; background:var(--paper-3); border-radius:3px;
  overflow:hidden; min-width:60px; border:1px solid var(--rule);
}
.unit-head .ubar i{ display:block; height:100%; background:var(--forest); transition:width .7s var(--ease-out); }
.unit-head .ucount{ font-size:12.5px; color:var(--ink-soft); font-weight:900; }

/* --- Маршрут с пунктир --- */
.lessons{ display:flex; flex-direction:column; position:relative; }
.lnode{
  display:flex; align-items:center; gap:15px;
  padding:8px 10px; border-radius:var(--r-md);
  position:relative; background:transparent;
  border:none; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-body); color:var(--ink);
  transition:background .22s, transform .18s var(--ease);
}
.lnode:hover:not(.lock){ background:var(--surface-2); transform:translateX(3px); }
.lnode.lock{ cursor:not-allowed; opacity:.45; }
.lnode::before{
  content:""; position:absolute; left:34px; top:-2px; bottom:-2px;
  border-left:3px dotted var(--rule-2); z-index:0;
}
.lnode:first-child::before{ top:50%; }
.lnode:last-child::before{ bottom:50%; }
.lnode.done::before{ border-left-color:var(--forest); }

/* възлите са печати */
.ldot{
  width:50px; height:50px; flex:none; z-index:1;
  border-radius:50%; display:grid; place-items:center;
  font-size:21px; background:var(--paper-3);
  border:2px solid var(--rule-2);
  box-shadow:var(--sh-1);
  transition:transform .25s var(--ease);
}
.lnode:hover:not(.lock) .ldot{ transform:scale(1.08) rotate(-6deg); }
.lnode.done .ldot{
  background:radial-gradient(circle at 34% 30%, #4a8f68, var(--forest) 60%, var(--forest-d));
  border:3px double #d9e8dd; color:#f4ffe9;
  box-shadow:0 3px 0 var(--forest-d);
}
.lnode.now .ldot{
  background:radial-gradient(circle at 34% 30%, #b8433c, var(--seal) 55%, var(--seal-d));
  border:3px double #f0d9b8; color:#fff;
  box-shadow:0 3px 0 var(--seal-d);
  animation:sealPulse 2.4s ease-in-out infinite;
}
@keyframes sealPulse{
  0%,100%{ box-shadow:0 3px 0 var(--seal-d), 0 0 0 0 rgba(143,47,43,.45); }
  60%{ box-shadow:0 3px 0 var(--seal-d), 0 0 0 14px rgba(143,47,43,0); }
}
.ltext{ flex:1; min-width:0; }
.ltitle{ font-weight:900; font-size:15.5px; }
.lmeta{ font-size:12px; font-weight:800; color:var(--ink-soft); margin-top:2px; }
.lstars{ font-size:13px; letter-spacing:1px; flex:none; color:var(--gold-d); }
.lgo{
  flex:none; border:2px solid var(--seal-d); border-radius:var(--r-sm); padding:7px 15px;
  background:var(--seal); color:#fdf6e6;
  font-family:var(--font-body); font-weight:900; font-size:13px; cursor:pointer;
  box-shadow:0 2px 0 var(--seal-d);
}
.ltype{
  display:inline-block; font-size:10px; font-weight:900;
  border-radius:3px; padding:1px 8px; margin-right:7px;
  background:var(--paper-3); border:1px solid var(--rule); color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.5px;
}

/* --- Мисия в игра --- */
.lnode.quest .ldot{
  background:radial-gradient(circle at 34% 30%, #8b5a8f, var(--plum) 60%, var(--plum-d));
  border:3px double #e6d4e8; color:#fff; box-shadow:0 3px 0 var(--plum-d);
}
.lnode.quest.lock .ldot{ background:var(--paper-3); color:var(--ink-faint); border:2px solid var(--rule); box-shadow:var(--sh-1); }
.lnode.quest .ltype{ background:rgba(107,63,110,.14); border-color:var(--plum); color:var(--plum); }
.lnode.quest .lgo{ background:var(--plum); border-color:var(--plum-d); box-shadow:0 2px 0 var(--plum-d); }
.lnode.quest.now{ background:rgba(107,63,110,.07); box-shadow:inset 0 0 0 2px rgba(107,63,110,.25); }

/* ============================================================
   3. ИГРИ
   ============================================================ */
.gamewrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; }
.gamecard{
  border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-lg); padding:19px;
  box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .22s var(--ease-out), box-shadow .3s;
  position:relative;
}
.gamecard::before{
  content:""; position:absolute; inset:5px; pointer-events:none;
  border:1px dashed var(--rule); border-radius:calc(var(--r-lg) - 4px);
  opacity:0; transition:opacity .3s;
}
.gamecard:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.gamecard:hover::before{ opacity:1; }
.gc-emoji{
  display:inline-grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:var(--surface-2); border:2px solid var(--rule-2);
  font-size:29px;
  transition:transform .3s var(--ease);
}
.gamecard:hover .gc-emoji{ transform:rotate(-8deg) scale(1.06); }
.gc-title{ font-family:var(--font-display); font-weight:800; font-size:20px; }
.gc-desc{ font-weight:700; font-size:13px; color:var(--ink-soft); flex:1; line-height:1.55; }
.gamecard .bigplay{ margin-top:8px; }

/* ============================================================
   4. БИБЛИОТЕКА — вътрешни подраздели
   ============================================================ */
.segbar{
  display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap;
  background:var(--surface-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-md); padding:5px;
}
.segbar button{
  flex:1; min-width:88px; white-space:nowrap;
  border:none; background:transparent; color:var(--ink-soft);
  font-family:var(--font-body); font-weight:900; font-size:14px;
  padding:9px 12px; border-radius:var(--r-sm); cursor:pointer;
  transition:background .22s, color .22s;
}
.segbar button:hover{ color:var(--ink); }
.segbar button.on{
  background:var(--seal); color:#fdf6e6; box-shadow:0 2px 0 var(--seal-d);
}
.seg-panel{ display:none; }
.seg-panel.on{ display:block; animation:unroll .4s var(--ease-out); }

/* --- Теми --- */
.cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:14px; }
.cat{
  position:relative; overflow:hidden;
  border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-lg); padding:19px 14px; cursor:pointer; text-align:center;
  box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .22s var(--ease-out), box-shadow .3s;
}
.cat:hover{ transform:translateY(-5px) rotate(-1deg); box-shadow:var(--sh-2); }
.cat .blobby{
  position:absolute; width:120px; height:120px; border-radius:50%;
  opacity:.14; top:-40px; right:-34px; transition:transform .4s var(--ease-out);
}
.cat:hover .blobby{ transform:scale(1.25); }
.cat .emoji{ font-size:33px; position:relative; }
.cat .nm{ font-family:var(--font-display); font-weight:800; font-size:17px; margin-top:7px; position:relative; }
.cat .ct{
  display:inline-block; color:#fdf6e6; font-weight:900; font-size:11.5px;
  border-radius:3px; padding:2px 11px; margin-top:8px; position:relative;
}

/* --- Книги --- */
.books-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;
}
.book-card{
  display:grid; grid-template-columns:minmax(145px,.72fr) 1.28fr; overflow:hidden;
  border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  animation:pop .42s var(--ease-out) backwards;
  transition:transform .24s var(--ease-out), box-shadow .3s;
}
.book-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.book-cover{
  min-height:310px; padding:22px 15px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:#fdf6e6;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.25), transparent 24%),
    radial-gradient(circle at 85% 80%, rgba(255,215,150,.16), transparent 30%),
    linear-gradient(155deg,var(--sea),var(--plum));
}
.book-cover::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.28); border-radius:20px; pointer-events:none; }
.book-stars{ font-size:15px; letter-spacing:7px; opacity:.85; margin-bottom:15px; }
.book-emoji{ font-size:65px; line-height:1; filter:drop-shadow(0 7px 10px rgba(0,0,0,.25)); }
.book-cover-title{ font-family:var(--font-display); font-size:25px; font-weight:900; line-height:1.05; margin-top:16px; }
.book-cover-sub{ font-weight:900; font-size:12px; opacity:.86; margin-top:7px; }
.book-cover-author{ font-size:11px; font-weight:800; opacity:.82; margin-top:18px; }
.book-info{ padding:22px 20px 20px; display:flex; flex-direction:column; }
.book-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.book-badges span{ background:var(--surface-2); border:1px solid var(--rule); border-radius:99px; padding:4px 9px; font-size:11px; font-weight:900; color:var(--ink-soft); }
.book-info h3{ font-family:var(--font-display); font-size:27px; line-height:1.1; margin:16px 0 2px; }
.book-original{ font-weight:900; color:var(--sea-d); font-size:13px; }
.book-info p{ color:var(--ink-soft); font-weight:700; line-height:1.55; font-size:13.5px; margin:13px 0 10px; }
.book-progress{ font-weight:900; font-size:12.5px; color:var(--gold-d); margin-bottom:14px; }
.book-progress.done{ color:var(--forest-d); }
.book-open{ margin-top:auto; text-decoration:none; text-align:center; display:block; border:none; cursor:pointer; font:inherit; }
@media (max-width:680px){
  .books-grid{ grid-template-columns:1fr; }
  .book-card{ grid-template-columns:1fr; }
  .book-cover{ min-height:245px; }
}

/* --- Азбука, числа, фрази --- */
.abc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:9px; }
.letter{
  aspect-ratio:1; border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-md); cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .25s;
}
.letter:hover{ transform:translateY(-3px) rotate(-3deg); box-shadow:var(--sh-2); }
.letter:active{ transform:scale(.94); }
.letter .big{ font-family:var(--font-display); font-weight:800; font-size:25px; }

.num{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:9px; }
.ntile{
  border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-md); padding:13px 8px; cursor:pointer; text-align:center;
  box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .2s var(--ease), box-shadow .25s;
}
.ntile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.ntile .d{ font-family:var(--font-display); font-weight:800; font-size:27px; line-height:1; color:var(--seal); }
.ntile .w{ font-weight:900; font-size:14px; margin-top:4px; }
.ntile .bgw{ font-weight:700; font-size:12px; color:var(--ink-soft); }

.phr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.phr{
  border:var(--bw) solid var(--rule); background:var(--paper-2);
  border-radius:var(--r-md); padding:14px; cursor:pointer; text-align:left;
  box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .2s var(--ease), box-shadow .25s;
}
.phr:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.phr .pe{ font-size:23px; }
.phr .pen{ font-weight:900; font-size:16px; margin-top:5px; }
.phr .pbg{ font-weight:700; font-size:13px; color:var(--ink-soft); margin-top:2px; }

/* --- Дума на деня --- */
.wod{
  position:relative; overflow:hidden;
  border:3px solid var(--rule-2);
  border-radius:var(--r-xl); padding:24px; color:#fdf6e6;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 44%),
    linear-gradient(135deg, var(--sea), var(--plum));
  box-shadow:var(--sh-2);
}
.wod::before{
  content:"✶"; position:absolute; right:12px; top:-16px;
  font-size:120px; opacity:.14;
}
.wod-label{ font-family:var(--font-hand); font-size:20px; letter-spacing:.5px; opacity:.94; }
.wod-row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:2px; }
.wod-word{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,6vw,50px); line-height:1.05; }
.wod-pron{ font-weight:800; font-size:15px; opacity:.9; }
.wod-bg{ font-weight:900; font-size:19px; margin-top:6px; }
.wod-ctx{ font-weight:700; font-size:13.5px; opacity:.92; margin-top:5px; max-width:65ch; }
.wod > div:last-child{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* --- Речник --- */
.search{ position:relative; margin-bottom:16px; }
.search .ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:18px; }
.search input{
  width:100%; border:var(--bw) solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--r-md); padding:14px 18px 14px 48px;
  font-family:var(--font-body); font-weight:800; font-size:16px; color:var(--ink);
  box-shadow:var(--sh-1); outline:none;
  transition:border-color .25s;
}
.search input:focus{ border-color:var(--seal); }
.search input::placeholder{ color:var(--ink-faint); }

.letterbar{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.lchip{
  border:1px solid var(--rule); background:var(--paper-2); color:var(--ink-soft);
  border-radius:3px; padding:6px 11px; font-weight:900; font-size:13px; cursor:pointer;
  transition:background .22s, color .22s;
}
.lchip:hover{ color:var(--ink); background:var(--paper-3); }
.lchip.active{ background:var(--seal); color:#fdf6e6; border-color:var(--seal-d); }
.count{ font-weight:800; color:var(--ink-soft); margin-bottom:13px; font-size:13.5px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card{
  position:relative; overflow:hidden;
  border:var(--bw) solid var(--rule); background:var(--paper-2);
  border-radius:var(--r-md); padding:16px 16px 14px; cursor:pointer;
  box-shadow:var(--sh-1);
  animation:pop .35s var(--ease-out) backwards;
  transition:transform .2s var(--ease-out), box-shadow .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
@keyframes pop{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.card .stripe{ position:absolute; left:0; top:0; bottom:0; width:5px; }
.card .star{
  position:absolute; right:12px; top:12px;
  font-size:11px; font-weight:900; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--rule);
  border-radius:3px; padding:2px 8px;
}
.card .en{ font-family:var(--font-display); font-weight:800; font-size:23px; padding-left:9px; padding-right:60px; word-break:break-word; }
.card .pron{ font-weight:800; font-size:12.5px; color:var(--sea-d); padding-left:9px; margin-top:1px; }
.card .bg{ font-weight:900; font-size:16px; padding-left:9px; margin-top:6px; }
.card .ctx{ font-weight:700; font-size:12.5px; color:var(--ink-soft); padding-left:9px; margin-top:5px; }
.card mark{ background:rgba(200,144,28,.4); border-radius:3px; padding:0 3px; color:inherit; }
.card .actions{ display:flex; gap:8px; margin-top:12px; padding-left:9px; }
.mini{
  border:1px solid var(--rule-2); background:var(--surface-2); color:var(--ink);
  border-radius:var(--r-sm); padding:7px 12px; font-weight:900; font-size:12.5px; cursor:pointer;
  transition:transform .16s var(--ease), background .2s;
}
.mini:hover{ transform:translateY(-2px); background:var(--paper-3); }
.mini.play{ background:var(--forest); color:#fdf6e6; border-color:var(--forest-d); }
.empty{
  text-align:center; padding:50px 20px; color:var(--ink-soft); font-weight:800; grid-column:1/-1;
  border:2px dashed var(--rule-2); border-radius:var(--r-lg); background:var(--surface-2);
}
.empty .big{ font-family:var(--font-display); font-size:25px; margin-bottom:8px; color:var(--ink); }
.empty code{ background:var(--paper-3); padding:2px 7px; border-radius:3px; }

/* ============================================================
   5. ПРОФИЛ
   ============================================================ */
.map-wrap{ display:flex; flex-direction:column; }
.mnode{ display:flex; align-items:center; gap:14px; padding:8px 4px; position:relative; }
.mnode::before{ content:""; position:absolute; left:28px; top:0; bottom:0; border-left:3px dotted var(--rule-2); }
.mnode:first-child::before{ top:50%; }
.mnode:last-child::before{ bottom:50%; }
.mnode.done::before{ border-left-color:var(--forest); }
.mdot{
  width:48px; height:48px; flex:none; z-index:1;
  border-radius:50%; display:grid; place-items:center; font-size:21px;
  background:var(--paper-3); border:2px solid var(--rule-2); box-shadow:var(--sh-1);
}
.mnode.done .mdot{ background:var(--forest); border:3px double #d9e8dd; color:#f4ffe9; }
.mnode.now .mdot{ background:var(--seal); border:3px double #f0d9b8; color:#fff; }
.mtxt{ flex:1; min-width:0; }
.mn{ font-weight:900; font-size:15px; }
.md{ font-weight:700; font-size:12.5px; color:var(--ink-soft); }
.mp{ font-weight:900; font-size:12.5px; color:var(--gold-d); margin-top:3px; }
.mp.ok{ color:var(--forest); }
.mgo{
  border:2px solid var(--seal-d); border-radius:var(--r-sm); padding:6px 13px; margin-top:6px;
  background:var(--seal); color:#fdf6e6;
  font-family:var(--font-body); font-weight:900; font-size:12.5px; cursor:pointer;
}

.ring-wrap{
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:var(--paper-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1);
  margin-top:14px;
}
.ring{ position:relative; width:136px; height:136px; flex:none; }
.ring svg{ transform:rotate(-90deg); }
.ring .mid{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring .big{ font-family:var(--font-display); font-weight:800; font-size:27px; line-height:1; }
.ring .sm{ font-weight:800; font-size:12px; color:var(--ink-soft); }
.goal-txt{ font-weight:800; font-size:15px; }
.lvlbar{ height:13px; background:var(--paper-3); border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin-top:8px; }
.lvlbar i{ display:block; height:100%; background:var(--gold); transition:width .7s var(--ease-out); }

.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.pcard{
  border:var(--bw) solid var(--rule); border-radius:var(--r-md);
  padding:17px 12px; text-align:center; box-shadow:var(--sh-1);
  background:var(--paper-2);
  transition:transform .2s var(--ease-out);
}
.pcard:hover{ transform:translateY(-3px); }
.pcard .n{ font-family:var(--font-display); font-weight:800; font-size:31px; line-height:1; }
.pcard .l{ font-weight:800; font-size:12px; color:var(--ink-soft); margin-top:5px; }
.pcard.c1 .n{ color:var(--gold-d); } .pcard.c2 .n{ color:var(--forest); }
.pcard.c3 .n{ color:var(--sea); }    .pcard.c4 .n{ color:var(--plum); }

.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.bdg{
  border:2px solid var(--rule); border-radius:var(--r-md);
  background:var(--surface-2); padding:15px 10px; text-align:center; opacity:.5;
  transition:transform .2s var(--ease-out), opacity .3s;
}
.bdg.got{
  opacity:1; background:var(--paper-2); box-shadow:var(--sh-1);
  border:3px double var(--gold-d);
}
.bdg.got:hover{ transform:translateY(-3px) rotate(-2deg); }
.bdg .be{ font-size:31px; }
.bdg .bn{ font-weight:900; font-size:13.5px; margin-top:5px; }
.bdg .bd{ font-weight:700; font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }

.parent-note{
  background:var(--surface-2); border:2px dashed var(--rule-2);
  border-radius:var(--r-md); padding:16px 18px; font-weight:800; font-size:14px;
  color:var(--ink-soft); margin-bottom:16px; line-height:1.65;
}
.prow{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:var(--paper-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-md); padding:16px 18px; margin-bottom:12px;
  box-shadow:var(--sh-1);
}
.prow .plabel{ font-weight:900; font-size:15px; flex:1; min-width:170px; }
.prow .phint{ font-weight:700; font-size:12.5px; color:var(--ink-soft); display:block; margin-top:3px; }
.pbtn{
  border:2px solid var(--rule-2); background:var(--surface-2); color:var(--ink);
  border-radius:var(--r-sm); padding:9px 16px; font-family:var(--font-body);
  font-weight:900; font-size:14px; cursor:pointer; box-shadow:var(--sh-1);
  transition:transform .16s var(--ease), background .2s;
}
.pbtn:hover{ transform:translateY(-2px); background:var(--paper-3); }
.pbtn.primary{ background:var(--forest); color:#fdf6e6; border-color:var(--forest-d); }
.pbtn.danger{ background:var(--seal); color:#fdf6e6; border-color:var(--seal-d); }
.pnum{
  width:84px; border:2px solid var(--rule-2); background:var(--surface-2); color:var(--ink);
  border-radius:var(--r-sm); padding:9px; font-family:var(--font-body); font-weight:900; font-size:16px; text-align:center;
}
.ptable{ width:100%; border-collapse:collapse; font-weight:800; font-size:14px; }
.ptable th,.ptable td{ text-align:left; padding:10px 12px; border-bottom:1px dotted var(--rule); }
.ptable th{ color:var(--ink-soft); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.ptable tr:last-child td{ border-bottom:none; }
.weak-chip{
  display:inline-block; background:var(--surface-2); border:1px solid var(--rule);
  border-radius:3px; padding:4px 11px; font-weight:900; font-size:13px; margin:3px;
}
.bar7{ display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:10px; }
.bar7 .b{
  flex:1; background:var(--sea); border:1px solid var(--sea-d);
  border-radius:3px 3px 0 0; min-height:4px; position:relative;
}
.bar7 .b span{ position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; font-weight:900; color:var(--ink-soft); }
.bar7 .b b{ position:absolute; top:-20px; left:0; right:0; text-align:center; font-size:12px; font-weight:900; }

/* ============================================================
   6. ЗАГЛАВЕН БАНЕР НА СТРАНИЦА
   ============================================================ */
.page-hero{
  display:flex; align-items:center; gap:16px;
  background:var(--ph);
  border:3px solid var(--rule-2);
  border-radius:var(--r-xl);
  padding:17px 22px; color:#fdf6e6;
  box-shadow:var(--sh-2);
  margin-bottom:22px;
  position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.2), transparent 46%), var(--grain);
  background-size:auto, 140px 140px; mix-blend-mode:soft-light;
}
.page-hero .ph-emoji{ font-size:40px; flex:none; line-height:1; position:relative; z-index:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.page-hero h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(21px,3.5vw,29px); margin:0; line-height:1.08;
  position:relative; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.page-hero p{ margin:4px 0 0; font-weight:800; font-size:13.5px; opacity:.94; max-width:70ch; position:relative; z-index:1; }

/* ============================================================
   7. ТЕЛЕФОН
   ============================================================ */
@media (max-width:780px){
  header{ gap:10px; padding:9px 14px; }
  header::before, header::after{ display:none; }
  .hud .badge{ display:none; }
  .chip{ padding:4px 10px; font-size:13.5px; }
  .iconbtn{ width:36px; height:36px; font-size:16px; }
  .section{ margin:26px 0 12px; font-size:20px; }

  .next-card{ padding:20px 17px; }
  .next-title{ font-size:26px; }
  .today-hello .fox{ width:52px; height:52px; font-size:29px; }

  .page-hero{ padding:14px 15px; gap:12px; }
  .page-hero .ph-emoji{ font-size:32px; }
  .page-hero p{ font-size:12.5px; }

  .gamewrap{ grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; }
  .gamecard{ padding:14px; }
  .gc-emoji{ width:46px; height:46px; font-size:24px; }
  .gc-title{ font-size:16.5px; line-height:1.15; }
  .gc-desc{ font-size:12px; }
  .gamecard .bigplay{ font-size:14.5px; padding:11px 10px; }

  .world-head{ padding:14px 14px; gap:11px; }
  .world-head .we{ font-size:32px; }
  .world-head .wpct{ width:54px; height:54px; font-size:14px; }
  .world-body{ padding:2px 10px 16px; }
  .lnode{ padding:7px 4px; gap:11px; }
  .lnode::before{ left:28px; }
  .ldot{ width:44px; height:44px; font-size:19px; }
  .ltitle{ font-size:14.5px; }
  .lgo{ padding:6px 12px; font-size:12px; }

  .abc{ grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:7px; }
  .num{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:7px; }
  .grid{ grid-template-columns:1fr; }
  .cats{ grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); }
  .pgrid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
  .badge-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
  .ring-wrap{ padding:16px; gap:16px; }
  .segbar button{ min-width:0; font-size:13px; padding:8px 6px; }
}

/* --- Учебният план в родителския екран --- */
.plan{
  background:var(--paper-2); border:var(--bw) solid var(--rule);
  border-radius:var(--r-md); margin-bottom:10px; overflow:hidden;
}
.plan[open]{ border-color:var(--rule-2); box-shadow:var(--sh-1); }
.plan summary{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 15px; cursor:pointer; list-style:none; font-weight:800;
}
.plan summary::-webkit-details-marker{ display:none; }
.plan summary::after{ content:"▾"; margin-left:auto; color:var(--ink-soft); transition:transform .3s var(--ease-out); }
.plan[open] summary::after{ transform:rotate(180deg); }
.plan .pl-code{
  font-family:var(--font-display); font-weight:800; font-size:14px;
  letter-spacing:1.4px; color:#fdf6e6; padding:3px 12px; border-radius:3px;
  background:
    linear-gradient(160deg, rgba(46,30,14,.42), rgba(46,30,14,.66)),
    linear-gradient(135deg, var(--wc,#8f2f2b), var(--wc2,#5f1c1a));
}
.plan .pl-name{ font-family:var(--font-display); font-size:17px; }
.plan .pl-vocab{ font-weight:800; font-size:12.5px; color:var(--ink-soft); }
.plan .pl-body{ padding:0 16px 16px; border-top:1px dashed var(--rule); }
.plan .pl-can{
  margin:13px 0 0; padding:11px 13px; font-weight:700; font-size:13.5px; line-height:1.55;
  background:var(--surface-2); border:1px dashed var(--rule-2); border-radius:var(--r-sm);
}
.plan .pl-body ul{ margin:12px 0 0; padding-left:20px; }
.plan .pl-body li{ font-weight:700; font-size:13.5px; line-height:1.75; }