/* Піксельний світ на обкладинці збірки (assets/packworld.js) і спільне для карток
   збірок: бейдж стану, мітки, рядок адреси з «Копіювати». Підключають головна
   («Сервери») і /zbirky/. Розміри й компонування самих карток — на сторінках.

   Світ малюється CSS-ом: жодних картинок. Небо — змінні --sky-* на .cover, їх
   міняє клас .sky-<scene.sky>; блоки піраміди — --iron/--copper/--amethyst (їх
   вибирає скрипт для кожної колони); колір маяка — змінні --beam-*, --halo,
   --blk-*, --mote-*, які скрипт ставить з accent збірки (без accent — значення
   за замовчуванням нижче: персиковий промінь і бірюзовий маяк, як до кольорів збірок). */

.cover {
  position: relative; overflow: hidden;
  background: linear-gradient(var(--sky-1), var(--sky-2) 60%, var(--sky-3));
  --sky-1: #a9cde6; --sky-2: #d6e6ee; --sky-3: #f6e3d2;
  --grass: #5fae5a; --dirt: #8a5e3c; --stone: #7d828a;
  --iron: #c9ced6; --iron-hi: #e6e9ee; --copper: #c4693f; --copper-hi: #e5946b; --amethyst: #9a70d4; --amethyst-hi: #c6a8f0;
  --cloud: rgba(255,255,255,.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cover {
    --sky-1: #070a14; --sky-2: #0d1324; --sky-3: #182038;
    --grass: #3a7a4b; --dirt: #3b2a1f; --stone: #24282f;
    --iron: #8a9099; --iron-hi: #a7adb5; --copper: #8a4a2e; --copper-hi: #b1694a; --amethyst: #634596; --amethyst-hi: #8a69c2;
    --cloud: rgba(170,185,220,.09);
  }
}
:root[data-theme="dark"] .cover {
  --sky-1: #070a14; --sky-2: #0d1324; --sky-3: #182038;
  --grass: #3a7a4b; --dirt: #3b2a1f; --stone: #24282f;
  --iron: #8a9099; --iron-hi: #a7adb5; --copper: #8a4a2e; --copper-hi: #b1694a; --amethyst: #634596; --amethyst-hi: #8a69c2;
  --cloud: rgba(170,185,220,.09);
}

/* Небо збірки (scene.sky). dawn — за замовчуванням (вище): день із теплим обрієм / ніч.
   clear — небо Minecraft з хмарами (Vanilla+); violet — фіолетове з іскрами (Magic);
   amber — серпанок і теплий обрій, як від печей (Tech); dusk — фіолет над теплим
   обрієм, з іскрами (Technomagic). Пари «світла / темна» — та сама схема, що в base.css. */
.cover.sky-clear { --sky-1: #84aef4; --sky-2: #afcaf5; --sky-3: #dce7f6; }
.cover.sky-violet { --sky-1: #b5a0de; --sky-2: #d8ccee; --sky-3: #f1dbe8; }
.cover.sky-amber { --sky-1: #b6c3cf; --sky-2: #e2d8c8; --sky-3: #f1cc9e; }
.cover.sky-dusk { --sky-1: #a294d4; --sky-2: #d3c4e2; --sky-3: #f2cdae; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cover.sky-clear { --sky-1: #050a18; --sky-2: #0a1530; --sky-3: #15264d; }
  :root:not([data-theme="light"]) .cover.sky-violet { --sky-1: #0c0717; --sky-2: #170e2c; --sky-3: #2c1948; }
  :root:not([data-theme="light"]) .cover.sky-amber { --sky-1: #0b0b0f; --sky-2: #17131a; --sky-3: #35231a; }
  :root:not([data-theme="light"]) .cover.sky-dusk { --sky-1: #0b0818; --sky-2: #1a1030; --sky-3: #3b2236; }
}
:root[data-theme="dark"] .cover.sky-clear { --sky-1: #050a18; --sky-2: #0a1530; --sky-3: #15264d; }
:root[data-theme="dark"] .cover.sky-violet { --sky-1: #0c0717; --sky-2: #170e2c; --sky-3: #2c1948; }
:root[data-theme="dark"] .cover.sky-amber { --sky-1: #0b0b0f; --sky-2: #17131a; --sky-3: #35231a; }
:root[data-theme="dark"] .cover.sky-dusk { --sky-1: #0b0818; --sky-2: #1a1030; --sky-3: #3b2236; }

/* світ — 2400×1400 «пікселів гри», скрипт масштабує його під обкладинку */
.cover-in { position: absolute; left: 0; top: 0; width: 2400px; height: 1400px; transform-origin: 0 0; }
.cv-star { position: absolute; width: 4px; height: 4px; background: #f3efe2; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cv-star { display: none; } }
:root[data-theme="light"] .cv-star { display: none; }
.cv-sun { position: absolute; width: 56px; height: 56px; background: #ece9dc; box-shadow: inset -12px -8px 0 #d3cfbf, 0 0 40px rgba(236,233,220,.25); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cv-sun { background: #fff4c8; box-shadow: 0 0 60px 10px rgba(255,226,150,.55); } }
:root[data-theme="light"] .cv-sun { background: #fff4c8; box-shadow: 0 0 60px 10px rgba(255,226,150,.55); }
/* пласка хмара Minecraft: смуга з горбом */
.cv-cloud { position: absolute; height: 24px; background: var(--cloud); }
.cv-cloud::before { content: ""; position: absolute; left: 22%; top: -16px; width: 44%; height: 16px; background: inherit; }
/* іскри магії (violet, dusk); колір — від accent */
.cv-mote { position: absolute; width: 4px; height: 4px; background: var(--mote-l, #b779e8); box-shadow: 0 0 10px 2px var(--mote-glow, rgba(214,160,255,.55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cv-mote { background: var(--mote-d, #ecd2ff); } }
:root[data-theme="dark"] .cv-mote { background: var(--mote-d, #ecd2ff); }

.cv-col { position: absolute; width: 40px; height: 1200px;
  background:
    linear-gradient(var(--grass) 0 9px, transparent 9px) 0 0 / 100% 40px no-repeat,
    repeating-linear-gradient(transparent 0 39px, rgba(0,0,0,.26) 39px 40px),
    linear-gradient(var(--dirt) 0 160px, var(--stone) 160px);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.28); }
/* Піраміда під маяком: --bh — висота блоків (80 — два ряди, 40 — один); --blk —
   верхній блок, --blk2 — нижній (у mixed вони різні — шахівниця); -hi — світла грань. */
.cv-col.base { background:
    linear-gradient(var(--blk-hi) 0 4px, transparent 4px 40px, var(--blk2-hi) 40px 44px, transparent 44px) 0 0 / 100% var(--bh) no-repeat,
    repeating-linear-gradient(transparent 0 39px, rgba(0,0,0,.26) 39px 40px),
    linear-gradient(var(--blk) 0 40px, var(--blk2) 40px) 0 0 / 100% var(--bh) no-repeat,
    linear-gradient(var(--dirt) 0 160px, var(--stone) 160px); }
.cv-beam { position: absolute; width: 22px; height: 1200px; transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--beam-1, rgba(255,222,200,.98)), var(--beam-2, rgba(255,178,140,.7)) 30%, var(--beam-3, rgba(255,150,110,0))); }
.cv-halo { position: absolute; width: 180px; height: 1200px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, var(--halo-0, rgba(255,150,110,0)), var(--halo, rgba(255,150,110,.16)), var(--halo-0, rgba(255,150,110,0))); }
.cv-block { position: absolute; width: 40px; height: 40px; background: var(--blk-body, #6fc9c6); box-shadow: inset 0 0 0 4px var(--blk-rim, #bdeeee), inset 0 0 0 8px var(--blk-edge, #4aa3a1); }
.cv-block::after { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; background: var(--blk-core, #fff1e6); box-shadow: 0 0 18px 6px var(--blk-glow, rgba(255,190,150,.7)); }

/* бейдж стану на обкладинці (/zbirky/): on — зелена крапка, wait — жовта
   (перезапуск), off — сіра (вимкнено), none — стану немає: порожнє коло */
.badge { position: absolute; left: 1rem; top: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100% - 2rem); padding: .375rem .75rem; border-radius: 999px; background: rgba(10,13,20,.55); color: #f3f1ee; font-size: .8125rem; font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6fcf8e; box-shadow: 0 0 0 3px rgba(111,207,142,.25); }
.badge.wait i { background: #e9bb54; box-shadow: 0 0 0 3px rgba(233,187,84,.25); }
.badge.off i { background: #9aa2aa; box-shadow: none; }
.badge.none i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(243,241,238,.7); }

/* мітки: Minecraft 1.21.1 · NeoForge · N модів · N квестів */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chips li { padding: .375rem .75rem; border-radius: 999px; background: var(--field); border: 1px solid var(--line); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chips.sm { gap: .375rem; margin: 0; }
.chips.sm li { padding: .1875rem .625rem; font-size: .8125rem; }

/* Адреса з «Копіювати» в один рядок. Найдовша адреса (technomagic.beacon.how) з
   кнопкою мусить уміститись на телефоні 375–390 px: у вузькому рядку підпис
   «Адреса» лишається лише для екранних читачів, а шрифт адреси менший (container
   query — від ширини самого рядка, а не екрана: на головній картки вужчі за екран).
   Не влізло й так (320 px) — кнопка переходить під адресу, адреса не ріжеться. */
.pk-addr { container-type: inline-size; }
.pk-addr-in { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; padding: .3125rem .3125rem .3125rem .875rem; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
.pk-addr .lab { flex: none; color: var(--muted); font-size: .875rem; font-weight: 600; }
.pk-addr code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: .9375rem; font-weight: 600; color: var(--fg); }
.pk-addr .copy { flex: none; margin-left: auto; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pk-addr .copy:hover { background: var(--line); }
@container (max-width: 25rem) {
  .pk-addr .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pk-addr-in { padding-left: .75rem; }
  .pk-addr code { font-size: .8125rem; letter-spacing: -.01em; }
  .pk-addr .copy { padding: 0 .75rem; font-size: .8125rem; }
}
/* 320 px: ще трохи тісніше — vanilla.beacon.how стає в рядок; найдовша переноситься */
@container (max-width: 17rem) {
  .pk-addr-in { gap: .375rem; padding-left: .625rem; }
  .pk-addr code { font-size: .75rem; }
  .pk-addr .copy { padding: 0 .625rem; }
}