/* ==========================================================
   OZVENY ČASU · MATEMATIKA – obal a úlohy
   ========================================================== */
.mat-title.is-active { display: flex; }
.mat-title { position: relative; min-height: 100vh; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 80px; overflow: hidden; }
.mat-title__bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,10,7,.35), rgba(13,10,7,.88) 70%), var(--title-img, url("../img/matematika/00-nadvorie.jpg")) center/cover no-repeat, #15110c; animation: mat-bg 30s ease-in-out infinite alternate; }
@keyframes mat-bg { to { transform: scale(1.06); } }
.mat-title .title-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mat-title__card { position: relative; max-width: 640px; text-align: center; color: var(--parchment); }
.mat-title__card h1 { font-size: clamp(2.2rem, 7vw, 4rem); color: var(--gold-soft); line-height: 1.05; margin: 10px 0 8px; text-shadow: 0 4px 30px rgba(0,0,0,.8); }
.mat-title__sub { font-family: var(--f-head); letter-spacing: .12em; font-size: .9rem; color: #e9d6ab; margin-bottom: 18px; }
.mat-title .title-lead { color: #eadfc6; line-height: 1.65; margin: 0 auto 26px; max-width: 560px; }
.mat-title .title-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mat-title__links { margin-top: 22px; font-size: .92rem; color: #cbb98f; }
.mat-title__links a, .mat-title .copyright a { color: var(--gold-soft); }
.mat-title .copyright { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; }

/* ---------- úloha ---------- */
.mat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mat__head h3 { margin: 0; }
.mat__lvl { display: flex; gap: 6px; }
.mat__lvl i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-head); font-size: .78rem; border: 1px solid rgba(201,154,46,.5); color: #a8916b; transition: all .3s; }
.mat__lvl i.is-on { background: var(--gold); color: #1c1610; border-color: var(--gold-soft); box-shadow: 0 0 12px rgba(232,196,108,.5); }
.mat__lvl i.is-done { background: rgba(201,154,46,.25); color: var(--gold-soft); }
.mat .panel__hint { margin-top: 8px; }
.mat__viz:empty { display: none; }
.mat__svg { display: block; width: 100%; height: auto; max-height: 160px; margin: 4px 0 10px; }
.mat__task p { font-size: 1.08rem; line-height: 1.6; color: #fff4dc; background: rgba(0,0,0,.22); border-radius: 10px; padding: 14px 16px; border-left: 3px solid var(--gold); }
.mat__answer { margin-top: 14px; }
.mat__in { display: flex; align-items: center; gap: 10px; justify-content: center; }
.mat__in input { width: 180px; max-width: 60vw; background: rgba(0,0,0,.4); border: 1px solid rgba(201,154,46,.55); border-radius: 10px; padding: 11px 14px; color: #fff4dc; font: 600 1.25rem var(--f-body); text-align: right; }
.mat__in input:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(232,196,108,.22); }
.mat__in span { color: var(--gold-soft); font-family: var(--f-head); }
.mat__choices { display: grid; gap: 8px; }
.mat__choices .quiz__opt.is-sel { background: rgba(201,154,46,.28); border-color: var(--gold-soft); }
.mat__slider input[type=range] { width: 100%; accent-color: var(--gold); height: 28px; }
.mat__mix { display: flex; height: 18px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(201,154,46,.5); margin-top: 6px; }
.mat__mix-g { background: linear-gradient(180deg, #f6d36a, #b8862b); transition: width .15s; }
.mat__mix-s { background: linear-gradient(180deg, #e6e6e6, #8e8e8e); transition: width .15s; }
.mat__mixlab { display: flex; justify-content: space-between; margin-top: 6px; color: #e9d6ab; font-size: .95rem; }
.mat__mixlab b { color: #fff4dc; font-size: 1.1rem; }
.mat__hints { display: grid; gap: 8px; margin-top: 12px; }
.mat__hints:empty { display: none; }
.mat__h { background: rgba(232,196,108,.08); border: 1px dashed rgba(232,196,108,.45); border-radius: 10px; padding: 10px 14px; color: #efe3c6; line-height: 1.55; animation: screen-in .5s var(--ease); }
.mat__h span { display: block; font-family: var(--f-head); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 2px; }
.mat__fb { min-height: 1.4em; margin-top: 12px; line-height: 1.55; border-radius: 10px; }
.mat__fb:empty { display: none; }
.mat__fb--good, .mat__fb--bad, .mat__fb--info { padding: 10px 14px; }
.mat__fb--good { background: rgba(79,107,58,.35); color: #e3f2d6; border: 1px solid rgba(159,217,154,.5); }
.mat__fb--bad { background: rgba(125,36,34,.35); color: #ffe1dc; border: 1px solid rgba(240,138,126,.5); }
.mat__fb--info { background: rgba(255,255,255,.06); color: #efe3c6; }
.mat__try { opacity: .7; font-size: .9em; white-space: nowrap; }
.mat__coins { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; min-height: 34px; margin-bottom: 10px; }
.mat__coins .coin { width: 22px; height: 22px; border-radius: 50%; animation: pop .4s cubic-bezier(.2,1.6,.4,1) both; }
.coin--g { background: radial-gradient(circle at 35% 30%, #fff1b0, #e2b13c 50%, #8a5f10); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.coin--s { width: 16px !important; height: 16px !important; background: radial-gradient(circle at 35% 30%, #fff, #bdbdbd 50%, #6c6c6c); }
.mat__sum { font-family: var(--f-head); color: #fff1d2; font-size: 1.05rem; animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.mat__eq { color: var(--gold-soft); font-family: var(--f-head); font-size: 1.3rem; margin: 0 6px; }
.st-streak { animation: screen-in .8s var(--ease); }
.cr-sparks circle { animation: cr-spark 1.2s ease-out infinite; }
@keyframes cr-spark { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
@media (max-width: 560px) {
  .mat__task p { font-size: 1rem; padding: 12px; }
  .mat__btns .btn { flex: 1 1 auto; }
}
/* málo kapitol – vycentrovať os (od 4 kapitol sa správa ako v dejepise) */
@media (min-width: 1100px) {
  .subject-mat .hub-stage:has(.era-card:nth-child(-n+4):last-child) .tl-nav { display: none; }
  .subject-mat .timeline:has(.era-card:nth-child(-n+4):last-child) { justify-content: safe center; }
  .subject-mat .timeline:has(.era-card:nth-child(-n+4):last-child) .timeline__line { min-width: 0; }
}

/* zoradenie krokov */
.seq__done { margin: 0 0 12px 22px; display: grid; gap: 6px; color: #e3f2d6; }
.seq__done:empty { display: none; }
.seq__done li { background: rgba(79,107,58,.3); border: 1px solid rgba(159,217,154,.4); border-radius: 8px; padding: 6px 10px; }
.seq__cards .card { cursor: pointer; touch-action: auto; }

.subject-pv { --title-img: url("../img/prirodne-vedy/00-titul.jpg"); }

/* ---------- pohyblivý úvod matematiky a prírodných vied (js/subject-title.js) ---------- */
.st-title .title-shade { background: radial-gradient(ellipse at 32% 50%, rgba(10,7,4,.2) 0%, rgba(10,7,4,.74) 55%, rgba(6,4,2,.95) 100%), linear-gradient(90deg, rgba(6,4,2,.25), rgba(6,4,2,.72)); }
.st-title .title-flash { background-image: var(--title-img); }
.st-num { font-size: 17px; }
.st-draw { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 2.2s var(--ease), fill-opacity 1.5s 1.2s; }
.st-draw.is-drawn { stroke-dashoffset: 0; fill-opacity: 1; }
.st-lbl { font-family: var(--f-head); font-size: 13px; fill: #f6dc8e; text-anchor: middle; opacity: 0; transition: opacity 1s; }
.is-landed .st-lbl, .st-draw.is-drawn ~ .st-lbl { opacity: .9; }
.st-orbits { transform-origin: 300px 300px; animation: spin 40s linear infinite; }
.is-running:not(.is-landed) .st-orbits { animation-duration: 8s; }
.tz-title { color: #f6dc8e; font-weight: 600; }
.st-title .title-card .mat-title__links { margin-top: 18px; font-size: .92rem; color: #cbb98f; }
.st-title .title-card .mat-title__links a { color: var(--gold-soft); }
.st-title .tz-name { letter-spacing: .18em; }
.st-title .title-card h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); overflow-wrap: anywhere; }