/* css/islands.css - первое знакомство островами (решение 107, мокап mockups/znak-first/): герой с облачком и
   тёмная карточка с островами. Видны только пройденные и текущий остров. Без прокрутки на 1024x768, 768x1024
   и 375x812: размеры героя, камней и отступов зависят от высоты экрана (--vh, как у занятия в kid-more.css).
   Порядок файлов в index.html важен; карта файлов - obsidian/Pally/architecture/code-map.md */
.app.islands { --vh: 1vh; position: relative; max-width: 1180px; min-height: 100vh; padding: 16px; }
@supports (height: 1dvh) { .app.islands { --vh: 1dvh; min-height: 100dvh; } }

.isl-close {
  position: absolute; top: 14px; left: 14px; z-index: 2; width: 52px; height: 52px; border: 0; border-radius: 14px;
  background: #17233f; color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 rgba(8, 14, 30, .45);
}
.isl-close:focus-visible, .big-go:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

/* По центру по высоте через margin: auto, а не justify-content - если места не хватит, верх (герой) не уходит за край экрана */
.isl-in { margin: auto 0; display: flex; flex-direction: column; gap: clamp(8px, calc(var(--vh) * 1.6), 16px); padding-top: 56px; }
/* На празднике крестика нет - место над героем не нужно */
.isl-in.party { padding-top: 4px; }
@media (max-width: 899px) { .isl-in.party .isl-hero .pet-fig { width: clamp(90px, calc(var(--vh) * 15), 240px); } }
/* Узкий экран: герой сверху, облачко под ним (хвостик вверх) */
.isl-hero { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
.isl-hero .pet-fig { display: block; width: clamp(100px, calc(var(--vh) * 17), 240px); }
.isl-hero .pet-fig .mascot-svg { width: 100%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3)); }
.isl-hero .say-bubble { margin: 0; max-width: 460px; font-size: clamp(17px, calc(var(--vh) * 2.3), 22px); padding: 12px 18px; border-radius: 20px; }

.isl-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(6px, calc(var(--vh) * 1.2), 12px); padding: clamp(14px, calc(var(--vh) * 2.6), 28px) 18px;
  background: #17233f; color: #fff; border: 3px solid #a67bff; border-radius: 26px;
  box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 24px 44px rgba(8, 14, 30, .35);
}
.isl-card .diag-badge { align-self: center; }
.isl-card h1 { margin: 0; font-size: clamp(24px, calc(var(--vh) * 3.6), 40px); font-weight: 900; line-height: 1.15; }
.isl-sub { margin: 0; color: #c9d2ec; font-size: clamp(15px, calc(var(--vh) * 2.1), 20px); line-height: 1.35; }
.isl-stars { color: #ffc83a; font-size: clamp(30px, calc(var(--vh) * 5), 46px); letter-spacing: 8px; line-height: 1; text-shadow: 0 3px 0 #b8780a; }

/* Острова в один ряд, между ними пунктирная дорожка */
.isl-row {
  position: relative; list-style: none; margin: 4px 0 clamp(6px, calc(var(--vh) * 1.8), 18px); padding: 14px 0 0; width: 100%;
  display: flex; justify-content: center; gap: 10px;
  --rock: clamp(56px, min(17vw, calc(var(--vh) * 12)), 108px);
}
.isl-row.n2 { --n: 2; } .isl-row.n3 { --n: 3; } .isl-row.n4 { --n: 4; }
/* Дорожка - от центра первого острова до центра последнего: острова шириной до 150 px, между ними 10 px */
.isl-row:not(.n1)::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: calc((var(--n) - 1) * (min(150px, (100% - (var(--n) - 1) * 10px) / var(--n)) + 10px)); top: calc(14px + var(--rock) / 2 - 3px); height: 6px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #3a4f86 0 14px, transparent 14px 24px);
}
.isl { position: relative; flex: 0 1 150px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.isl .rock {
  position: relative; width: var(--rock); height: var(--rock); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--rock) * .32); font-weight: 900; line-height: 1;
}
.isl .rock.pic { font-size: calc(var(--rock) * .46); }
.isl .name { font-weight: 900; font-size: clamp(14px, calc(var(--vh) * 2), 17px); line-height: 1.15; }
.isl .st { color: #b6c2e2; font-size: 14px; font-weight: 700; }
/* Пройденный остров горит зелёным, со звездой */
.isl.done .rock {
  background: radial-gradient(circle at 50% 35%, #5be08a, #25a653 70%); border: 4px solid #8ff0b0; color: #fff;
  box-shadow: 0 8px 0 #17733a, 0 0 30px rgba(92, 224, 138, .55);
}
.isl.done .rock::after {
  content: "★"; position: absolute; top: -8px; right: -8px; width: clamp(24px, calc(var(--rock) * .32), 34px); height: clamp(24px, calc(var(--rock) * .32), 34px);
  border-radius: 50%; display: grid; place-items: center; background: #ffc83a; color: #3a2600; font-size: clamp(14px, calc(var(--rock) * .18), 19px); box-shadow: 0 3px 0 #d99a12;
}
/* Текущий остров - жёлтый и покачивается; только что открывшийся сначала «выплывает» */
.isl.now .rock {
  background: radial-gradient(circle at 50% 35%, #ffd86b, #f2a91c 70%); border: 4px solid #ffe7a3; color: #3a2600;
  box-shadow: 0 8px 0 #b8780a; animation: isl-bob 1.6s ease-in-out infinite;
}
.isl.appear { animation: isl-appear .8s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
@keyframes isl-bob { 50% { transform: translateY(-8px); } }
@keyframes isl-appear { from { opacity: 0; transform: translateY(24px) scale(.4); } to { opacity: 1; transform: none; } }

.big-go {
  width: min(100%, 340px); min-height: 64px; border: 0; border-radius: 18px; cursor: pointer;
  background: #ffc83a; color: #3a2600; font: inherit; font-size: clamp(22px, calc(var(--vh) * 3.2), 26px); font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 7px 0 #d99a12;
}
.big-go:hover { background: #ffd35e; }
.big-go:active { transform: translateY(5px); box-shadow: 0 2px 0 #d99a12; }

/* Широкий экран (ноутбук, планшет лёжа): герой слева, карточка справа, как в мокапе */
@media (min-width: 900px) {
  .app.islands { height: 100vh; overflow: hidden; }
  @supports (height: 1dvh) { .app.islands { height: 100dvh; } }
  .isl-in { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; align-items: center; gap: 28px; padding-top: 0; }
  .isl-hero { flex-direction: column; gap: 14px; }
  .isl-hero .pet-fig { width: min(calc(var(--vh) * 44), 380px); }
  /* Облачко над героем: хвостик вниз */
  .isl-hero .say-bubble::before { top: auto; bottom: -10px; }
  .isl-card { padding-left: 26px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .isl.now .rock, .isl.appear { animation: none; }
}

/* Главный экран, пока идут острова: карты с вкладками нет (решение 107). На узком экране раскладка та же,
   карта и так была ниже кнопок */
/* Широкий экран: место карты отдаём герою и колонке кнопок - маленькие кнопки встают по две в ряд и не уходят под низ */
@media (min-width: 900px) {
  .home-grid.solo .home-left { grid-template-columns: auto minmax(0, 420px); column-gap: 40px; }
  .home-grid.solo .side-row { max-width: none; }
  .app.map .home-grid.solo .home-hero .pet-fig { width: min(58vh, 460px, 38vw); }
}

/* Простой главный днём (решение 109): только герой, облачко и «Играть». Колонка занимает всю высоту под
   кнопкой для родителей и стоит по центру - на планшете стоя и телефоне снизу не остаётся пустого поля,
   а герой становится крупнее, но всё помещается без прокрутки */
.home-grid.simple { flex: 1; justify-content: center; }
@media (max-width: 899px) {
  .app.map .home-grid.simple .home-hero .pet-fig { width: min(72vw, 38vh, 400px); }
  @supports (height: 1dvh) { .app.map .home-grid.simple .home-hero .pet-fig { width: min(72vw, 38dvh, 400px); } }
}
/* «+2 💎» в левом верхнем углу только что пройденного острова, напротив звезды - в её стиле; в пределах острова,
   чтобы не наезжать на соседний остров и на подпись */
.isl-gems {
  position: absolute; top: -8px; left: calc(50% - var(--rock) / 2 - 6px); z-index: 1;
  padding: 2px 7px; border-radius: 999px; background: #ffc83a; color: #3a2600; font-size: clamp(11px, calc(var(--rock) * .15), 15px);
  font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 #d99a12;
}