/* ══════════════════════════════════════════════
   Карта-остров: два уровня и кино-переходы.
   Верх: шесть миров, низ: тропа острова.
   Двигаем только transform/opacity: 60fps под троттлингом.
   ══════════════════════════════════════════════ */

/* ── переключение уровней ── */
#viewIsles,#viewTrail{will-change:opacity}
body[data-level="isles"] #viewTrail{display:none}
body[data-level="trail"] #viewIsles{display:none}

/* ── верхний уровень: шапка ── */
.isles-hero{max-width:1080px;margin:0 auto;padding:24px 20px 6px;text-align:center}
.isles-hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--glass);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.isles-hero h1{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(1.75rem,5.4vw,2.7rem);line-height:1.12;letter-spacing:-.015em;
  margin:18px auto 12px;max-width:18ch;
}
.isles-hero p{color:var(--ink-dim);font-size:1.0313rem;max-width:46ch;margin:0 auto}

/* ── сетка островов ── */
.isles-grid{
  display:grid;gap:18px;
  max-width:1080px;margin:22px auto 10px;padding:0 16px;
}
@media (min-width:900px){.isles-grid{grid-template-columns:1fr 1fr;gap:22px}}

.isle-card{
  position:relative;display:block;width:100%;text-align:left;
  border-radius:28px;overflow:hidden;isolation:isolate;
  background:rgba(10,14,26,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px var(--line),0 26px 60px -30px rgba(0,0,0,.85);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  will-change:transform;-webkit-tap-highlight-color:transparent;
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .isle-card{
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(28,26,20,.08),0 24px 56px -30px rgba(28,26,20,.4);
}
.isle-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px color-mix(in srgb,var(--isl) 42%,transparent),0 32px 70px -30px rgba(0,0,0,.9)}
.isle-card:active{transform:translateY(-1px) scale(.994)}

/* сцена острова: слои живут внутри, наружу ничего не течёт */
/* мобилка первична: узкой карточке нужен воздух, иначе подпись съедает остров */
.ic-scene{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
@media (min-width:620px){.ic-scene{aspect-ratio:16/9}}
.ic-layers{position:absolute;inset:0}
.ic-l{
  position:absolute;inset:-7% -6%;width:112%;height:114%;
  object-fit:cover;display:block;pointer-events:none;
  will-change:transform;backface-visibility:hidden;
}
.ic-far{filter:blur(1px)}
.ic-loop{opacity:0;transition:opacity .8s var(--ease)}
.ic-loop.on{opacity:1}
.ic-near{
  inset:auto -6% -6%;height:46%;object-position:bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 34%);
}
.ic-near.solo{inset:-7% -6%;height:114%;-webkit-mask-image:none;mask-image:none}

/* стадии: серый спит, живой дышит, цветущий горит */
.isle-card.st-grey :is(.ic-plate,.ic-loop,.ic-mid,.ic-near,.ic-far){filter:grayscale(1) brightness(.72) contrast(.95)}
.isle-card.st-grey .ic-far{filter:grayscale(1) brightness(.72) blur(1px)}
.isle-card.st-alive :is(.ic-loop,.ic-mid,.ic-near){filter:saturate(.94)}
.isle-card.st-master :is(.ic-loop,.ic-mid,.ic-near){filter:saturate(1.06)}

/* подпись читается всегда: остров живёт в верхних двух третях, низ уходит в тень */
.ic-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,18,0) 26%,rgba(6,9,18,.55) 52%,rgba(6,9,18,.93) 100%);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .ic-veil{
  background:linear-gradient(180deg,rgba(255,255,255,0) 24%,rgba(255,255,255,.66) 52%,rgba(255,255,255,.96) 100%);
}
.ic-glow{
  position:absolute;inset:auto 0 -30% 0;height:60%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--isl) 34%,transparent),transparent 72%);
  opacity:.55;
}
.isle-card.st-grey .ic-glow{opacity:0}

/* подпись острова лежит на сцене снизу */
.ic-body{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 17px;display:flex;flex-direction:column;gap:3px}
.ic-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;margin-bottom:7px;
  font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--isl);background:color-mix(in srgb,var(--isl) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--isl) 34%,transparent);
}
/* спящий остров не носит цвет: цвет: награда за первый пройденный урок */
.isle-card.st-grey .ic-badge{
  color:var(--ink-faint);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .isle-card.st-grey .ic-badge{background:rgba(28,26,20,.07)}
.ic-name{font-family:var(--font-d);font-weight:600;font-size:1.3125rem;letter-spacing:-.015em;color:var(--ink)}
.ic-mood{text-decoration:none;display:block;color:var(--ink-dim);font-size:.875rem;line-height:1.42;max-width:34ch}
.ic-prog{
  position:relative;height:5px;border-radius:999px;margin-top:11px;
  background:rgba(255,255,255,.13);overflow:hidden;
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .ic-prog{background:rgba(28,26,20,.13)}
.ic-prog i{
  position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--isl) 70%,#fff),var(--isl));
  box-shadow:0 0 12px color-mix(in srgb,var(--isl) 55%,transparent);
  transform-origin:left center;
}
.ic-count{
  display:flex;align-items:center;gap:8px;margin-top:8px;
  font-size:.8125rem;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.ic-count b{color:var(--ink-dim)}
.ic-count em{
  font-style:normal;margin-left:auto;font-size:.75rem;font-weight:700;
  color:var(--isl);opacity:.9;
}
.isle-card.st-grey .ic-count em{color:var(--ink-faint)}

/* спящий остров говорит об этом мягко */
.ic-sleep{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:999px;
  font-size:.75rem;font-weight:700;color:rgba(244,242,236,.82);
  background:rgba(8,11,22,.52);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .ic-sleep{
  color:rgba(28,26,20,.72);background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(28,26,20,.1);
}
.ic-sleep svg{width:13px;height:13px}

/* ряд экзаменов под островами */
.isles-extra{max-width:1080px;margin:8px auto 40px;padding:0 16px}

/* ── нижний уровень: шапка тропы ──
   Общая шапка платформы уходит: на тропе своя, а остров занимает весь экран. */
body[data-level="trail"] .map-head{display:none}
.trail-head{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  max-width:980px;margin:0 auto;padding:14px 18px 12px;
  background:linear-gradient(180deg,var(--bg-1) 62%,transparent);
}
.tb-back{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:40px;padding:0 15px 0 12px;border-radius:999px;
  font-size:.875rem;font-weight:700;color:var(--ink-dim);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:color .4s var(--ease),transform .4s var(--ease);
}
.tb-back:hover{color:var(--ink)}
.tb-back:active{transform:scale(.95)}
.tb-back svg{width:16px;height:16px}
.tb-title{display:flex;flex-direction:column;min-width:0}
.tb-title b{font-family:var(--font-d);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title s{text-decoration:none;font-size:.75rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.tb-dot{
  flex:none;width:9px;height:9px;border-radius:50%;margin-left:auto;
  background:var(--isl);box-shadow:0 0 14px color-mix(in srgb,var(--isl) 70%,transparent);
}

/* «что даёт»: одна живая строка под именем урока */
.node-gain{
  text-decoration:none;display:block;
  color:var(--ink-dim);font-size:.9063rem;line-height:1.4;margin-top:3px;
}
.lesson-node.locked .node-gain{color:var(--ink-faint)}

/* ── кино-переход: полноэкранный зум ── */
.isl-cinema{
  position:fixed;inset:0;z-index:960;
  background:#05070E;opacity:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;will-change:opacity;
}
.isl-cinema[hidden]{display:none}
.icn-vid{
  width:100%;height:100%;object-fit:cover;
  will-change:transform;backface-visibility:hidden;
}
.icn-bar{
  position:absolute;left:0;right:0;height:12%;background:#05070E;
  will-change:transform;transform:scaleY(0);
}
.icn-bar.t{top:0;transform-origin:top center}
.icn-bar.b{bottom:0;transform-origin:bottom center}
.icn-skip{
  position:absolute;left:50%;bottom:calc(14% + 16px);transform:translateX(-50%);
  padding:7px 15px;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  opacity:0;pointer-events:none;
}

/* затемнение при нырке в урок */
.isl-dim{
  position:fixed;inset:0;z-index:950;pointer-events:none;
  background:#05070E;opacity:0;will-change:opacity;
}
.isl-dim[hidden]{display:none}

/* ── перелёт Финика между островами ── */
.isl-flight{
  position:fixed;inset:0;z-index:940;pointer-events:none;
}
.isl-flight[hidden]{display:none}
.if-fox{position:absolute;left:0;top:0;width:58px;height:58px;will-change:transform}
.if-fox svg{width:100%;height:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.if-spark{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px rgba(240,178,84,.9);
  will-change:transform,opacity;
}

@media (max-width:560px){
  .isles-grid{gap:16px}
  .ic-name{font-size:1.1875rem}
  .isl-flight .if-fox{width:50px;height:50px}
}

@media (prefers-reduced-motion:reduce){
  .isle-card,.tb-back{transition:none}
  .isle-card:hover{transform:none}
  .ic-loop{transition:none}
}