/* ============================================================
   Лексикон Kids — дизайн система „Приказна карта"
   theme.css · токени, пергамент, хедър, навигация, общи елементи
   ------------------------------------------------------------
   Светът е стара карта на съкровище. Детето е пътешественик,
   който отваря нови земи. Пергамент, мастило, восъчни печати,
   пунктирани маршрути и compass rose — вместо поредното
   лъскаво приложение.
   ============================================================ */

:root{
  /* --- Мастило и пергамент --- */
  --ink:#3a2a19;
  --ink-soft:#7a6244;
  --ink-faint:#a08a68;
  --paper:#f3e6ca;          /* фон на света */
  --paper-2:#fbf4e3;        /* карти, листове */
  --paper-3:#ead8b4;        /* хлътнали места */
  --rule:#cfae7d;           /* линии и рамки */
  --rule-2:#a8804a;         /* по-тъмна рамка */

  /* --- Печати и знамена --- */
  --seal:#8f2f2b;      --seal-d:#5f1c1a;   /* восъчен печат, главно действие */
  --forest:#2f6b4d;    --forest-d:#1d4632; /* завършено, вярно */
  --gold:#c8901c;      --gold-d:#96690f;   /* звезди, опит */
  --sea:#2f5d8c;       --sea-d:#1d3d61;    /* звук, слушане */
  --plum:#6b3f6e;      --plum-d:#4a2a4d;   /* мисии, магия */
  --rust:#b4652a;      --rust-d:#823f16;   /* внимание, серия */

  /* Съвместими имена (използват се на много места в кода) */
  --brand:var(--seal);   --brand-d:var(--seal-d);
  --coral:var(--seal);   --coral-d:var(--seal-d);
  --mint:var(--forest);  --mint-d:var(--forest-d);
  --sun:var(--gold);     --sun-d:var(--gold-d);
  --sky:var(--sea);      --sky-d:var(--sea-d);
  --grape:var(--plum);   --grape-d:var(--plum-d);
  --pink:var(--rust);    --pink-d:var(--rust-d);
  --aqua:var(--sea);
  --surface:var(--paper-2);
  --surface-2:#f6ecd6;
  --surface-3:var(--paper-3);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --bg:var(--paper);

  /* --- Сенки: като лист хартия върху маса --- */
  --sh-1:0 1px 0 rgba(120,90,50,.16), 0 2px 6px rgba(90,65,35,.10);
  --sh-2:0 1px 0 rgba(120,90,50,.20), 0 6px 16px rgba(90,65,35,.16);
  --sh-3:0 2px 0 rgba(120,90,50,.22), 0 16px 34px rgba(90,65,35,.24);
  --sh-seal:0 4px 0 var(--seal-d), 0 10px 22px rgba(90,40,30,.32);
  --overlay-bg:rgba(45,30,15,.62);

  /* --- Форма --- */
  --r-sm:4px; --r-md:7px; --r-lg:10px; --r-xl:14px; --r-2xl:18px;
  --bw:2px;
  --maxw:1120px;

  --font-display:'Alegreya', Georgia, 'Times New Roman', serif;
  --font-hand:'Caveat', 'Segoe Script', cursive;
  --font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.34,1.4,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Хартиена шарка (фини влакна) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Нощна карта ---------- */
[data-theme="dark"]{
  --ink:#efe0c0;
  --ink-soft:#bda684;
  --ink-faint:#8d7a5c;
  --paper:#1a150e;
  --paper-2:#241d13;
  --paper-3:#302617;
  --rule:#5c4826;
  --rule-2:#7b6033;
  --seal:#c4534a;      --seal-d:#8d2f28;
  --forest:#4f9c72;    --forest-d:#2f6b4d;
  --gold:#e0ad3c;      --gold-d:#b3821c;
  --sea:#5a90c4;       --sea-d:#33608e;
  --plum:#a271a6;      --plum-d:#6f4573;
  --rust:#d18147;      --rust-d:#9c5321;
  --surface-2:#2b2216;
  --sh-1:0 1px 0 rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.45);
  --sh-2:0 1px 0 rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.5);
  --sh-3:0 2px 0 rgba(0,0,0,.6), 0 18px 38px rgba(0,0,0,.6);
  --overlay-bg:rgba(8,5,2,.76);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}

/* ============================================================
   ФОН — стар пергамент с петна и мрежа на картограф
   ============================================================ */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* избеляване по краищата */
    radial-gradient(ellipse 120% 80% at 50% 40%, transparent 40%, rgba(90,60,25,.20) 100%),
    /* мокри петна */
    radial-gradient(circle 30vw at 12% 18%, rgba(150,110,55,.16), transparent 70%),
    radial-gradient(circle 26vw at 88% 72%, rgba(140,95,45,.14), transparent 70%),
    radial-gradient(circle 20vw at 70% 8%, rgba(160,120,60,.10), transparent 70%),
    /* мрежа на картата */
    repeating-linear-gradient(0deg, rgba(120,90,45,.055) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(90deg, rgba(120,90,45,.055) 0 1px, transparent 1px 62px);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain);
  opacity:.10; mix-blend-mode:multiply;
}
[data-theme="dark"] body::after{ opacity:.16; mix-blend-mode:overlay; }

/* ------------------------------------------------------------
   Украса на картата — компасна роза, вълни и планини.
   Стоят зад съдържанието и не се пипат.
   ------------------------------------------------------------ */
.mapdeco{
  position:fixed; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  opacity:.14;
  animation:sway 46s ease-in-out infinite;
}
[data-theme="dark"] .mapdeco{ opacity:.10; filter:invert(.85); }

/* компасна роза, горе вдясно */
.d1{
  width:min(30vw,300px); aspect-ratio:1; top:9vh; right:-3vw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%235f3a12' stroke-width='2'%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Ccircle cx='100' cy='100' r='64'/%3E%3Ccircle cx='100' cy='100' r='26'/%3E%3C/g%3E%3Cg fill='%235f3a12' fill-opacity='.55'%3E%3Cpath d='M100 8 L112 88 L100 100 L88 88 Z'/%3E%3Cpath d='M100 192 L112 112 L100 100 L88 112 Z'/%3E%3Cpath d='M8 100 L88 112 L100 100 L88 88 Z'/%3E%3Cpath d='M192 100 L112 112 L100 100 L112 88 Z'/%3E%3C/g%3E%3Cg fill='%235f3a12' fill-opacity='.3'%3E%3Cpath d='M158 42 L110 90 L100 100 L110 78 Z'/%3E%3Cpath d='M42 158 L90 110 L100 100 L78 110 Z'/%3E%3Cpath d='M42 42 L90 90 L100 100 L78 90 Z'/%3E%3Cpath d='M158 158 L110 110 L100 100 L110 122 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* вълни, долу вляво */
.d2{
  width:min(46vw,520px); height:min(20vw,190px); bottom:5vh; left:-4vw;
  animation-delay:-14s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cg fill='none' stroke='%232f5d8c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 24q15-14 30 0t30 0t30 0t30 0'/%3E%3Cpath d='M40 54q15-14 30 0t30 0t30 0t30 0'/%3E%3Cpath d='M10 84q15-14 30 0t30 0t30 0t30 0'/%3E%3Cpath d='M170 44q15-14 30 0t30 0t30 0'/%3E%3Cpath d='M190 96q15-14 30 0t30 0t30 0'/%3E%3C/g%3E%3C/svg%3E");
}
/* планини, вдясно долу */
.d3{
  width:min(34vw,380px); height:min(18vw,190px); bottom:18vh; right:-2vw;
  animation-delay:-28s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 130'%3E%3Cg fill='none' stroke='%235f3a12' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M8 120 L58 34 L108 120 Z'/%3E%3Cpath d='M78 120 L128 46 L178 120 Z'/%3E%3Cpath d='M148 120 L196 58 L244 120 Z'/%3E%3Cpath d='M44 58 L58 34 L72 58 L64 54 L58 60 L52 54 Z'/%3E%3Cpath d='M116 66 L128 46 L140 66 L134 62 L128 68 L122 62 Z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width:760px){ .d3{ display:none; } .d1{ opacity:.08; } }
@media (prefers-reduced-motion:reduce){ .mapdeco{ animation:none; } }

/* декоративни петна от чай (старите .blob елементи) */
.blob{
  position:fixed; z-index:0; pointer-events:none;
  border-radius:48% 52% 41% 59% / 55% 45% 55% 45%;
  opacity:.16; filter:blur(2px);
  border:2px solid rgba(140,100,45,.35);
  background:radial-gradient(circle at 40% 35%, rgba(160,115,55,.24), transparent 70%);
  animation:sway 40s ease-in-out infinite;
}
[data-theme="dark"] .blob{ opacity:.10; }
.b1{ width:34vw;height:26vw; min-width:260px;min-height:200px; top:6vh; left:-8vw; }
.b2{ width:28vw;height:30vw; min-width:220px;min-height:230px; top:44vh; right:-9vw; animation-delay:-12s; border-radius:58% 42% 55% 45% / 42% 58% 42% 58%; }
.b3{ width:24vw;height:20vw; min-width:200px;min-height:170px; bottom:6vh; left:4vw; animation-delay:-24s; }
.b4{ width:20vw;height:22vw; min-width:170px;min-height:180px; top:16vh; right:16vw; animation-delay:-6s; opacity:.09; }
@keyframes sway{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(1.4vw,-1vw) rotate(4deg); }
}

.wrap{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 18px 100px;
}

/* ============================================================
   ХЕДЪР — табела, закована на картата
   ============================================================ */
header{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 42%),
    var(--paper-2);
  border:var(--bw) solid var(--rule-2);
  border-radius:var(--r-lg);
  padding:11px 18px;
  box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.4);
  margin-bottom:16px;
  position:sticky; top:8px; z-index:900;
  transition:padding .3s var(--ease-out), box-shadow .3s;
}
/* капси в четирите ъгъла */
header::before, header::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d8c49a, var(--rule-2));
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.3);
  top:9px;
}
header::before{ left:9px; }
header::after{ right:9px; }
body.scrolled header{ padding:7px 16px; box-shadow:var(--sh-3); }
body.scrolled .mascot{ width:42px; height:42px; font-size:23px; }
body.scrolled .tag{ display:none; }

.brand{ display:flex; align-items:center; gap:13px; }
.brandlink{ text-decoration:none; color:inherit; display:inline-block; }

/* маскотът е восъчен печат */
.mascot{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center;
  font-size:29px; cursor:pointer;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #b8433c, var(--seal) 55%, var(--seal-d));
  border:3px double #e8c9a0;
  color:#fff;
  box-shadow:0 3px 0 rgba(95,28,26,.7), 0 8px 16px rgba(90,40,30,.36);
  transition:transform .25s var(--ease), width .3s, height .3s;
  position:relative;
}
.mascot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px dashed rgba(143,47,43,.4);
}
.mascot:hover{ transform:rotate(-8deg) scale(1.06); }
.mascot:active{ transform:scale(.9); }

h1{
  font-family:var(--font-display); font-weight:800;
  margin:0; font-size:clamp(23px,4.2vw,31px); line-height:1.02;
  letter-spacing:.4px; color:var(--ink);
}
h1 .a{ color:var(--seal); }
h1 .b{ color:var(--gold-d); }
h1 .c{ color:var(--forest); font-style:italic; }
.tag{
  font-family:var(--font-hand); font-size:17px; font-weight:700;
  color:var(--ink-soft); margin-top:-1px; letter-spacing:.3px;
}

.hud{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2);
  border:var(--bw) solid var(--rule);
  border-radius:var(--r-sm); padding:5px 12px;
  font-weight:900; font-size:14.5px;
  box-shadow:var(--sh-1);
  transition:transform .2s var(--ease);
}
.chip:hover{ transform:translateY(-2px); }
.chip.pts .v{ color:var(--gold-d); }
.chip.lvl .v{ color:var(--plum); }
.chip.str .v{ color:var(--rust-d); }
.chip .v{ display:inline-block; transition:transform .3s var(--ease); }

.badge{
  background:var(--forest); color:#f6ecd6;
  border:var(--bw) solid var(--forest-d);
  font-weight:900; font-size:12px;
  padding:6px 13px; border-radius:var(--r-sm);
  white-space:nowrap; letter-spacing:.3px;
  box-shadow:var(--sh-1);
}
.iconbtn{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:var(--bw) solid var(--rule);
  background:var(--surface-2);
  border-radius:var(--r-sm); font-size:17px; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform .18s var(--ease), background .2s;
  color:var(--ink); text-decoration:none;
}
.iconbtn:hover{ transform:translateY(-2px); background:var(--paper-3); }
.iconbtn:active{ transform:translateY(1px); }

/* ============================================================
   НАВИГАЦИЯ — дървени табелки
   ============================================================ */
.tabs{
  display:flex; gap:8px; margin-bottom:20px;
  overflow-x:auto; padding:2px 2px 10px;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; position:relative;
  border:var(--bw) solid var(--rule-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 50%),
    var(--paper-2);
  color:var(--ink-soft);
  font-family:var(--font-body); font-weight:900; font-size:14.5px;
  padding:9px 17px; border-radius:var(--r-sm); cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform .18s var(--ease), background .25s, color .25s;
  white-space:nowrap;
  text-decoration:none; display:inline-block; line-height:1.3;
}
.tab:hover{ transform:translateY(-2px); color:var(--ink); }
.tab.active{
  background:var(--seal); color:#fdf6e6; border-color:var(--seal-d);
  box-shadow:0 3px 0 var(--seal-d), var(--sh-1);
}
.tab.t1.active{ background:var(--forest); border-color:var(--forest-d); box-shadow:0 3px 0 var(--forest-d), var(--sh-1); }
.tab.t2.active{ background:var(--sea);    border-color:var(--sea-d);    box-shadow:0 3px 0 var(--sea-d), var(--sh-1); }
.tab.t3.active{ background:var(--plum);   border-color:var(--plum-d);   box-shadow:0 3px 0 var(--plum-d), var(--sh-1); }
.tab.t4.active{ background:var(--rust);   border-color:var(--rust-d);   box-shadow:0 3px 0 var(--rust-d), var(--sh-1); }
.tab.t5.active{ background:var(--gold-d); border-color:#6d4a08;         box-shadow:0 3px 0 #6d4a08, var(--sh-1); }

.view{ display:none; }
.view.active{ display:block; animation:unroll .5s var(--ease-out); }
@keyframes unroll{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* ============================================================
   ЗАГЛАВИЯ — като надписи на карта
   ============================================================ */
.section{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,2.9vw,25px);
  margin:32px 0 15px; letter-spacing:.3px;
}
/* пояснението след заглавието слиза само на нов ред, когато е тясно */
.section .hint{
  font-family:var(--font-hand); font-weight:700;
  font-size:17px; color:var(--ink-soft); letter-spacing:0;
}
@media (max-width:640px){ .section .hint{ flex-basis:100%; margin-top:-4px; } }
.section .dot{
  width:10px; height:10px; flex:none;
  background:var(--seal);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--rule);
}
.section::after{
  content:""; flex:1; height:0;
  border-top:2px dotted var(--rule);
}

/* ============================================================
   БУТОНИ — восъчен печат
   ============================================================ */
.bigplay{
  display:block; width:100%;
  border:var(--bw) solid var(--seal-d); border-radius:var(--r-md);
  background:linear-gradient(180deg, #a63a35, var(--seal) 45%, #7d2723);
  color:#fdf6e6; font-family:var(--font-body); font-weight:900;
  font-size:16.5px; padding:13px 20px; cursor:pointer;
  box-shadow:var(--sh-seal);
  transition:transform .16s var(--ease), box-shadow .2s;
  letter-spacing:.3px;
}
.bigplay:hover{ transform:translateY(-2px); }
.bigplay:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--seal-d); }

.speak-btn{
  border:var(--bw) solid rgba(255,255,255,.5); border-radius:var(--r-sm);
  background:rgba(255,255,255,.16); color:#fdf6e6;
  font-weight:900; font-size:14.5px; padding:10px 18px;
  cursor:pointer; transition:transform .18s var(--ease), background .25s;
}
.speak-btn:hover{ background:rgba(255,255,255,.3); transform:translateY(-2px); }

/* ============================================================
   ФУТЪР
   ============================================================ */
footer{
  text-align:center; color:var(--ink-soft);
  font-weight:800; font-size:13px;
  margin-top:56px; padding:26px 10px 10px;
  border-top:2px dotted var(--rule);
}
.foot-nav{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.foot-nav a{
  color:var(--ink-soft); text-decoration:none; font-weight:900; font-size:13px;
  padding:6px 13px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--rule); transition:color .2s, transform .18s var(--ease);
}
.foot-nav a:hover{ color:var(--seal); transform:translateY(-2px); }
.foot-note{ font-size:12.5px; line-height:1.7; }

/* ============================================================
   ДОЛНА ЛЕНТА — компас на пътешественика
   ============================================================ */
.bottomnav{
  position:fixed; left:10px; right:10px; bottom:10px; z-index:950;
  display:none; justify-content:space-around; gap:2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%),
    var(--paper-2);
  border:var(--bw) solid var(--rule-2);
  border-radius:var(--r-lg);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow:var(--sh-3);
}
.bottomnav .bn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:var(--ink-soft);
  font-weight:900; font-size:10.5px; padding:7px 2px; border-radius:var(--r-sm);
  transition:color .25s, background .25s;
}
.bottomnav .bn .bne{ font-size:20px; line-height:1; transition:transform .25s var(--ease); }
.bottomnav .bn.active{
  color:#fdf6e6; background:var(--seal);
  box-shadow:0 2px 0 var(--seal-d);
}
.bottomnav .bn.active .bne{ transform:translateY(-1px) scale(1.1); }

@media (max-width:780px){
  .bottomnav{ display:flex; }
  .tabs{ display:none; }
  .wrap{ padding:10px 13px 104px; }
  header{ top:6px; }
}

/* ============================================================
   ДРЕБНИ
   ============================================================ */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:4000; overflow:hidden; }
.conf{ position:absolute; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(112vh) rotate(720deg); opacity:0; } }

.lk-toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  background:var(--paper-2); color:var(--ink);
  border:var(--bw) solid var(--rule-2);
  font-weight:900; padding:13px 20px; border-radius:var(--r-md);
  z-index:5000; box-shadow:var(--sh-3);
  font-size:14.5px; max-width:92vw; text-align:center;
  animation:toastIn .35s var(--ease);
}
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,22px)} to{opacity:1; transform:translate(-50%,0)} }
@media (max-width:780px){ .lk-toast{ bottom:96px; } }

.shake{ animation:shake .45s; }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)} 40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

:focus-visible{ outline:3px solid var(--sea); outline-offset:2px; border-radius:4px; }
::selection{ background:rgba(200,144,28,.35); }