/* Раздел «Планеты» (/planets/ и /planets/<id>/). Токены, шапка, меню языков и подвал — из style.css.
   Стиль — «галактический атлас»: голубая голограмма (--pl-holo), янтарь для выделения (--pl-amber), моноширинные подписи.
   На странице планеты --pc0…--pc2 — цвета её поверхности (src/planets.mjs), ими подсвечена страница.
   Без JS: плоская SVG-карта, каталог и все тексты. С JS (.js) — фильтры, игра, спойлеры; 3D включает planets.js
   классом .pl-3d-on на <html>, только если есть WebGL. С prefers-reduced-motion ничего не движется. */
.pl-page {
  --pl-holo: #4bd5ee;
  --pl-amber: #ffb547;
  --pl-glass: rgba(6, 12, 24, .78);
  --pl-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --pl-ease: cubic-bezier(.2, .8, .2, 1);
}
.pl-page svg { direction: ltr; }
/* арабское и персидское письмо (и тайское) нельзя разряжать и набирать моноширинным: буквы распадаются */
.pl-page:is(:lang(ar), :lang(fa), :lang(th)) { --pl-mono: var(--f-text); }
.pl-page:is(:lang(ar), :lang(fa), :lang(th)) :not(svg *) { letter-spacing: 0 !important; }
.pl-page :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; }
.pl-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- общие элементы ---------- */
.pl-kicker {
  margin: 0 0 10px;
  font-family: var(--pl-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-holo);
}
.pl-kicker::before { content: '◈ '; color: var(--pl-amber); }
.pl-h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: .98;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 34px rgba(75, 213, 238, .28);
}
.pl-lead { margin: 16px 0 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #cfd6e6; }
.pl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(75, 213, 238, .35);
  border-radius: 8px;
  background: rgba(8, 20, 34, .72);
  color: var(--text);
  font-family: var(--pl-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.pl-btn:hover { border-color: var(--pl-holo); box-shadow: 0 0 14px rgba(75, 213, 238, .25); }
.pl-btn[aria-pressed="true"] { border-color: var(--pl-amber); color: var(--pl-amber); background: rgba(60, 38, 6, .55); }
.pl-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-btn-hot { border-color: var(--pl-amber); color: #1a1205; background: var(--pl-amber); font-weight: 700; }
.pl-btn-hot:hover { box-shadow: 0 0 22px rgba(255, 181, 71, .45); }

.pl-sec { margin-top: 64px; }
.pl-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.pl-sec-head h2, .pl-sources h2 {
  position: relative;
  margin: 0;
  padding-inline-start: 18px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.pl-sec-head h2::before, .pl-sources h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--pl-amber);
  box-shadow: 0 0 12px var(--pl-amber);
}
.pl-sec-p { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.pl-page p { line-height: 1.6; }
.pl-ref a { color: var(--pl-holo); text-decoration: none; font-size: .78em; }

/* ---------- плоская карта (SVG) ---------- */
.pl-map { display: block; width: 100%; height: 100%; font-family: var(--pl-mono); }
.pl-map .pl-disc { fill: #050912; stroke: rgba(75, 213, 238, .25); stroke-width: 1.5; }
.pl-map .pl-arm { fill: none; stroke: rgba(130, 150, 255, .09); stroke-width: 46; stroke-linecap: round; }
.pl-map .pl-reg { stroke: rgba(75, 213, 238, .3); stroke-width: 1.2; stroke-dasharray: 5 6; stroke-linejoin: round; }
.pl-map .pl-reg-0 { fill: rgba(255, 214, 140, .2); }
.pl-map .pl-reg-1 { fill: rgba(255, 196, 120, .12); }
.pl-map .pl-reg-2 { fill: rgba(180, 160, 255, .1); }
.pl-map .pl-reg-3 { fill: rgba(150, 150, 255, .08); }
.pl-map .pl-reg-4 { fill: rgba(110, 160, 255, .07); }
.pl-map .pl-reg-5 { fill: rgba(80, 170, 255, .06); }
.pl-map .pl-reg-6 { fill: rgba(60, 150, 230, .05); }
.pl-map .pl-reg-7 { fill: rgba(40, 110, 180, .05); stroke-dasharray: 2 8; }
.pl-map .pl-unk { fill: rgba(2, 3, 8, .62); stroke: rgba(255, 77, 94, .35); stroke-width: 1.2; stroke-dasharray: 3 7; }
.pl-map .pl-stars path { fill: none; stroke: #dfe8ff; stroke-linecap: round; }
.pl-map .pl-grid { fill: none; stroke: rgba(255, 255, 255, .055); stroke-width: 1; }
.pl-map .pl-gl { fill: rgba(154, 163, 183, .55); font-size: 13px; text-anchor: middle; }
.pl-map .pl-rl { fill: rgba(75, 213, 238, .5); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; }
.pl-map .pl-rl-u { fill: rgba(255, 120, 130, .55); font-size: 15px; }
.pl-map .pl-pt { cursor: pointer; }
.pl-map .pl-pt-halo { fill: rgba(75, 213, 238, .16); transition: fill .2s; }
.pl-map .pl-pt-dot { fill: #fff; filter: drop-shadow(0 0 3px rgba(150, 230, 255, .9)); }
.pl-map .pl-pt-t { fill: #c9d3e6; font-size: 11px; letter-spacing: .04em; paint-order: stroke; stroke: #050912; stroke-width: 3px; stroke-linejoin: round; }
.pl-map .pl-pt-1 .pl-pt-t { fill: #fff; font-size: 13.5px; font-weight: 700; }
.pl-map .pl-pt:hover .pl-pt-halo, .pl-map .pl-pt:focus-visible .pl-pt-halo, .pl-map .pl-pt-sel .pl-pt-halo { fill: rgba(255, 181, 71, .45); }
.pl-map .pl-pt:hover .pl-pt-t, .pl-map .pl-pt-sel .pl-pt-t { fill: var(--pl-amber); }
.pl-map .pl-pt-off { opacity: .14; }
.pl-map .pl-route { fill: none; stroke: var(--pl-amber); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 7; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 181, 71, .7)); }
.pl-map .pl-route-on { opacity: 1; animation: pl-dash 1.4s linear infinite; }
@keyframes pl-dash { to { stroke-dashoffset: -30; } }
.pl-map .pl-cross { fill: none; stroke: var(--pl-amber); stroke-width: 2.4; }
.pl-map .pl-wp { fill: none; stroke: rgba(201, 211, 230, .3); stroke-width: 1.2; }
.pl-map .pl-wp-on { fill: var(--pl-amber); stroke: none; filter: drop-shadow(0 0 4px var(--pl-amber)); }
.pl-map-mini .pl-pt-dot { fill: rgba(255, 255, 255, .55); filter: none; }
.pl-map-mini .pl-pt-halo { fill: none; }
.pl-map-mini .pl-pt-on .pl-pt-dot { fill: var(--pl-amber); filter: drop-shadow(0 0 8px var(--pl-amber)); }
.pl-map-mini .pl-cross { stroke-width: 5; }
.pl-map-mini .pl-reg { stroke-width: 2.5; }

/* ---------- атлас: первый экран ---------- */
.pl-hero { padding-top: 34px; }
.pl-hero-in { padding-bottom: 22px; }
.pl-stage {
  position: relative;
  height: clamp(460px, 76vh, 860px);
  overflow: hidden;
  border-block: 1px solid rgba(75, 213, 238, .18);
  background:
    radial-gradient(closest-side, rgba(70, 60, 150, .22), transparent),
    linear-gradient(180deg, rgba(3, 6, 14, .2), rgba(3, 6, 14, .7));
  touch-action: pan-y;
}
.pl-stage::after {
  /* сетка «голостола» поверх, очень слабая */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(75, 213, 238, .035) 0 1px, transparent 1px 4px);
}
.pl-3d { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-3d-on .pl-3d { display: block; }
.pl-flat { position: absolute; inset: 14px; display: flex; justify-content: center; }
.pl-flat .pl-map { width: auto; max-width: 100%; height: 100%; }
.pl-3d-on .pl-hub .pl-flat { opacity: 0; visibility: hidden; }
.pl-3d-on .pl-hub .pl-stage.pl-flat-mode .pl-flat { opacity: 1; visibility: visible; background: rgba(3, 4, 10, .9); inset: 0; padding: 14px; }
.pl-3d-on .pl-stage.pl-flat-mode .pl-3d, .pl-3d-on .pl-stage.pl-flat-mode .pl-labels { visibility: hidden; }
.pl-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pl-lab {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--pl-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #c9d3e6;
  white-space: nowrap;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.pl-lab-1 { color: #fff; font-size: 13px; font-weight: 700; }
.pl-lab:hover, .pl-lab-sel { color: var(--pl-amber); }
.pl-lab-wp { color: #ffd79a; font-size: 11px; pointer-events: none; }
.pl-lab-off { opacity: .15; }
.pl-lab-far { opacity: 0; pointer-events: none; }
.pl-hud { position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px; display: none; flex-wrap: wrap; gap: 8px; }
.js .pl-hud { display: flex; }
.pl-mode { display: none; gap: 4px; }
.pl-3d-on .pl-mode { display: flex; }
.pl-hint {
  position: absolute;
  z-index: 2;
  inset-inline-start: 14px;
  bottom: 12px;
  margin: 0;
  font-family: var(--pl-mono);
  font-size: 12px;
  color: rgba(154, 163, 183, .8);
  pointer-events: none;
}
.pl-info {
  position: absolute;
  z-index: 4;
  top: 14px;
  inset-inline-end: 14px;
  width: min(360px, calc(100% - 28px));
  padding: 18px;
  border: 1px solid rgba(75, 213, 238, .35);
  border-radius: 14px;
  background: var(--pl-glass);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: pl-in .35s var(--pl-ease);
}
@keyframes pl-in { from { opacity: 0; transform: translateY(10px); } }
.pl-info-top { display: flex; align-items: center; gap: 14px; }
.pl-info-disc { flex: 0 0 76px; width: 76px; height: 76px; }
.pl-info-disc svg { width: 100%; height: 100%; }
.pl-info h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.pl-info-m { margin: 4px 0 0; font-family: var(--pl-mono); font-size: 12px; letter-spacing: .08em; color: var(--pl-holo); text-transform: uppercase; }
.pl-info p.pl-info-d { margin: 12px 0; color: #cfd6e6; font-size: 15px; }
.pl-info-in { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.pl-info-in li { padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); font-size: 12.5px; color: var(--muted); }
.pl-info-act { display: flex; gap: 8px; }
.pl-info-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 20px; line-height: 1; }
.pl-info-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pl-route-steps {
  position: absolute;
  z-index: 3;
  inset-inline: 14px;
  bottom: 40px;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.pl-route-steps li { flex: 0 0 auto; }
.pl-route-steps button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 6px;
  border: 1px solid rgba(255, 181, 71, .45);
  border-radius: 99px;
  background: rgba(30, 20, 4, .78);
  color: #ffe2b2;
  font-size: 13px;
}
.pl-route-steps b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pl-amber); color: #1a1205; font-family: var(--pl-mono); font-size: 11px; }
.pl-route-steps .pl-step-q { border-style: dashed; color: var(--muted); }
.pl-route-steps .pl-step-wp { border-color: rgba(255, 181, 71, .25); cursor: default; }
.pl-route-steps .pl-step-all { padding: 0 14px; border-color: var(--pl-amber); background: var(--pl-amber); color: #1a1205; font-weight: 700; }
.pl-route-steps small { margin-inline-start: 4px; font-size: 11px; color: rgba(255, 226, 178, .55); }

/* фильтры */
.pl-tools { display: none; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; padding-block: 18px; }
.js .pl-tools { display: grid; }
.pl-f { display: grid; gap: 4px; min-width: 0; }
.pl-f > span { font-family: var(--pl-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pl-f input, .pl-f select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(8, 14, 26, .9);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.pl-f input:focus, .pl-f select:focus { border-color: var(--pl-holo); outline: none; box-shadow: 0 0 0 3px rgba(75, 213, 238, .18); }

/* ---------- каталог ---------- */
.pl-catalog { margin-top: 30px; }
.pl-count { margin: 0; font-family: var(--pl-mono); font-size: 13px; color: var(--muted); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-card a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(14, 22, 40, .85), rgba(6, 9, 18, .85));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .25s, transform .25s var(--pl-ease), box-shadow .25s;
}
.pl-card a:hover, .pl-card a:focus-visible { border-color: rgba(75, 213, 238, .55); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(75, 213, 238, .15) inset; }
.pl-card-disc { flex: 0 0 72px; width: 72px; height: 72px; transition: transform .6s var(--pl-ease); }
.pl-card a:hover .pl-card-disc { transform: rotate(-8deg) scale(1.08); }
.pl-card-disc svg { width: 100%; height: 100%; }
.pl-card-txt { display: grid; gap: 3px; min-width: 0; }
.pl-card-n { font-family: var(--f-display); font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.pl-card-m { font-family: var(--pl-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--pl-holo); }
.pl-card-d { font-size: 14px; line-height: 1.4; color: var(--muted); }
.pl-card-1 { grid-column: span 2; }
.pl-card-1 a { padding: 18px 20px; }
.pl-card-1 .pl-card-disc { flex-basis: 104px; width: 104px; height: 104px; }
.pl-card-1 .pl-card-n { font-size: 24px; }
.pl-card-1 .pl-card-d { font-size: 15px; }
.pl-card[hidden] { display: none; }
.pl-nothing { margin: 18px 0 0; color: var(--muted); }

/* ---------- игра ---------- */
.pl-game { margin-top: 64px; }
.pl-game-in {
  position: relative;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(255, 181, 71, .3);
  border-radius: 18px;
  background:
    radial-gradient(500px 220px at 90% 0%, rgba(255, 181, 71, .12), transparent 70%),
    linear-gradient(160deg, rgba(20, 16, 10, .9), rgba(6, 8, 16, .92));
  overflow: hidden;
}
.pl-game-head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; color: var(--pl-amber); }
.pl-game-head p { margin: 8px 0 18px; color: #d8cdb8; }
.pl-game-stage:empty { display: none; }
.pl-game-bar { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; font-family: var(--pl-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pl-game-bar b { color: var(--pl-amber); }
.pl-game-q { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 24px; align-items: center; }
.pl-game-clue { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed rgba(255, 181, 71, .35); border-radius: 50%; }
.pl-game-clue svg { width: 92%; height: 92%; }
.pl-game-clue .pl-btn { min-height: 54px; }
.pl-game-quote { margin: 0; padding: 18px; font-size: 19px; line-height: 1.45; color: #fff; text-align: center; }
.pl-game-ask { margin: 0 0 12px; font-family: var(--f-display); font-size: 20px; text-transform: uppercase; color: #fff; }
.pl-game-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pl-game-opts button {
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(10, 14, 24, .9);
  font-size: 17px;
  text-align: start;
  transition: border-color .2s, background .2s;
}
.pl-game-opts button:hover:not(:disabled) { border-color: var(--pl-amber); }
.pl-game-opts .pl-ok { border-color: var(--green); background: rgba(30, 120, 60, .35); }
.pl-game-opts .pl-no { border-color: var(--red); background: rgba(140, 30, 40, .35); }
.pl-game-msg { min-height: 1.6em; margin: 14px 0 0; font-size: 17px; }
.pl-game-next { margin-top: 12px; }
.pl-game-end { text-align: center; }
.pl-game-end .pl-game-big { display: block; font-family: var(--f-display); font-size: clamp(54px, 9vw, 110px); line-height: 1; color: var(--pl-amber); text-shadow: 0 0 40px rgba(255, 181, 71, .4); }
.pl-game-end p { margin: 8px 0; }

/* ---------- регионы и FAQ ---------- */
.pl-regions { margin-top: 64px; }
.pl-regions-p { margin: 0 0 18px; color: var(--muted); font-size: 17px; }
.pl-region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: reg; }
.pl-region { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 12, 22, .7); counter-increment: reg; }
.pl-region::before { content: counter(reg, decimal-leading-zero); position: absolute; top: 14px; inset-inline-end: 16px; font-family: var(--pl-mono); font-size: 12px; color: var(--dim); }
.pl-region h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-holo); }
.pl-region p { margin: 0; font-size: 15px; color: var(--muted); }
.pl-region .pl-region-pl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pl-region-pl a { padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 99px; color: #dfe6f4; font-size: 13px; text-decoration: none; }
.pl-region-pl a:hover { border-color: var(--pl-amber); color: var(--pl-amber); }
.pl-faq { margin-top: 64px; }
.pl-faq-list { display: grid; gap: 8px; }
.pl-faq-list details { border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 12, 22, .7); }
.pl-faq-list summary { padding: 14px 18px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.pl-faq-list summary::-webkit-details-marker { display: none; }
.pl-faq-list summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--pl-amber); font-family: var(--pl-mono); }
.pl-faq-list details[open] summary::before { content: '–'; }
.pl-faq-list details p { margin: 0; padding: 0 18px 16px; color: #cfd6e6; }

/* ---------- страница планеты ---------- */
.pl-planet {
  background:
    radial-gradient(900px 520px at 22% 6%, color-mix(in srgb, var(--pc1) 20%, transparent), transparent 70%),
    radial-gradient(700px 400px at 90% 30%, color-mix(in srgb, var(--pc2) 10%, transparent), transparent 70%),
    var(--bg);
}
.pl-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--pl-mono); font-size: 12px; letter-spacing: .06em; color: var(--dim); }
.pl-crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--line-2); }
.pl-crumbs a { color: var(--muted); text-decoration: none; }
.pl-crumbs a:hover { color: var(--pl-holo); }
.pl-whero-in { display: grid; grid-template-columns: minmax(300px, 1fr) 1.15fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding-block: 18px 10px; }
.pl-globe { position: relative; aspect-ratio: 1; }
.pl-globe .pl-3d { cursor: grab; touch-action: pan-y; -webkit-mask: radial-gradient(closest-side, #000 78%, transparent 100%); mask: radial-gradient(closest-side, #000 78%, transparent 100%); }
.pl-globe .pl-3d:active { cursor: grabbing; }
.pl-fallback { position: absolute; inset: 6%; }
.pl-disc-hero { width: 100%; height: 100%; }
.js .pl-disc-hero { animation: pl-float 9s ease-in-out infinite; }
@keyframes pl-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.pl-3d-on .pl-planet .pl-fallback { display: none; }
.pl-globe-ui { position: absolute; z-index: 2; inset-inline: 0; bottom: 2%; display: none; justify-content: center; flex-wrap: wrap; gap: 8px; }
.js .pl-globe-ui { display: flex; }
.pl-ba { display: flex; gap: 4px; }
.pl-drag { display: none; position: absolute; top: -4px; inset-inline: 0; margin: 0; text-align: center; font-family: var(--pl-mono); font-size: 11.5px; color: var(--dim); }
.pl-3d-on .pl-drag { display: block; }
.pl-whero-txt .pl-h1 { font-size: clamp(44px, 7vw, 96px); text-shadow: 0 0 40px color-mix(in srgb, var(--pc1) 45%, transparent); }
.pl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 24px 0 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 10, 20, .92); overflow: hidden; }
/* линии между ячейками — тенью внутрь, чтобы неполная строка не оставляла серую дыру */
.pl-facts div { padding: 10px 14px; box-shadow: inset -1px -1px 0 var(--line); }
.pl-facts dt { font-family: var(--pl-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pl-facts dd { margin: 3px 0 0; font-size: 15.5px; color: #eef2fa; }
.pl-toc ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; padding: 14px 0; border-block: 1px solid var(--line); list-style: none; }
.pl-toc a { display: inline-block; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 14px; text-decoration: none; }
.pl-toc a:hover { color: var(--pl-amber); background: rgba(255, 181, 71, .1); }
.pl-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: 28px; align-items: start; }
.pl-overview > * { min-width: 0; }
.pl-overview-txt p { margin: 0 0 14px; font-size: 18px; color: #dfe5f1; }
.pl-overview-txt p:first-child::first-letter { float: inline-start; margin: 4px 10px 0 0; font-family: var(--f-display); font-size: 3.2em; line-height: .8; color: var(--pl-amber); }
.pl-locator { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(75, 213, 238, .25); border-radius: 14px; background: rgba(4, 8, 16, .8); color: inherit; text-decoration: none; transition: border-color .2s; }
.pl-locator:hover { border-color: var(--pl-amber); }
.pl-locator .pl-map { height: auto; aspect-ratio: 1; }
.pl-locator-t { font-family: var(--pl-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-holo); }
.pl-locator-a { font-size: 14px; color: var(--pl-amber); }
.pl-natives { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-native { padding: 16px 18px; border: 1px solid var(--line); border-inline-start: 3px solid var(--pc1); border-radius: 12px; background: rgba(8, 12, 22, .75); }
.pl-native-off { border-inline-start-color: var(--dim); }
.pl-native h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 19px; text-transform: uppercase; color: #fff; }
.pl-native p { margin: 0; color: var(--muted); }
.pl-cols { column-count: 2; column-gap: 36px; }
.pl-cols p { margin: 0 0 14px; font-size: 17px; color: #dfe5f1; }
.pl-cols p:only-child { column-span: all; }

/* хроника */
.pl-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 22px; padding: 0; list-style: none; }
.pl-axis-era { display: grid; gap: 6px; padding: 8px 8px 10px; border-top: 2px solid var(--line-2); opacity: .5; }
.pl-axis-on { border-top-color: var(--pl-amber); opacity: 1; }
.pl-axis-n { font-family: var(--pl-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pl-axis-dots { display: flex; flex-wrap: wrap; gap: 5px; min-height: 10px; }
.pl-axis-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-amber); box-shadow: 0 0 8px var(--pl-amber); }
.pl-axis-sp { background: none; border: 2px solid var(--pl-amber); box-shadow: none; }
.pl-events { position: relative; margin: 0; padding: 0; list-style: none; }
.pl-events::before { content: ''; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 104px; width: 1px; background: linear-gradient(var(--pl-amber), rgba(255, 181, 71, .1)); }
.pl-ev { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 26px; padding: 0 0 22px; scroll-margin-top: 80px; }
.pl-ev::before { content: ''; position: absolute; top: 7px; inset-inline-start: 99px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--pl-amber); }
.pl-ev-when { font-family: var(--pl-mono); font-size: 14px; font-weight: 700; color: var(--pl-amber); text-align: end; }
.pl-ev-era { font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 181, 71, .75); -webkit-hyphens: auto; hyphens: auto; }
.pl-ev-body p { margin: 0; font-size: 16.5px; color: #dfe5f1; }
.pl-ev-body .pl-ev-items { margin-bottom: 6px; font-family: var(--pl-mono); font-size: 12px; letter-spacing: .04em; }
.pl-ev-items a { color: var(--pl-holo); text-decoration: none; }
.pl-ev-items a:hover { text-decoration: underline; }
.pl-spoiler summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px dashed rgba(255, 181, 71, .45); border-radius: 10px; background: repeating-linear-gradient(-45deg, rgba(255, 181, 71, .06) 0 8px, transparent 8px 16px); cursor: pointer; list-style: none; }
.pl-spoiler summary::-webkit-details-marker { display: none; }
.pl-spoiler-t { color: var(--muted); font-size: 15px; }
.pl-spoiler-b { padding: 2px 10px; border-radius: 99px; background: var(--pl-amber); color: #1a1205; font-family: var(--pl-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pl-spoiler-auto { display: none; font-family: var(--pl-mono); font-size: 11.5px; color: var(--green); }
.pl-spoiler[open] summary { margin-bottom: 8px; padding: 6px 10px; border-style: solid; background: none; }
.pl-spoiler[open] .pl-spoiler-b { display: none; }
.pl-spoiler.pl-auto .pl-spoiler-auto { display: inline; }
.pl-spoiler[open] p { animation: pl-in .4s var(--pl-ease); }

/* герои */
.pl-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-person { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 12, 22, .75); }
.pl-person-i { flex: 0 0 52px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--pc2), var(--pc1) 60%, var(--pc0)); color: #fff; font-family: var(--f-display); font-size: 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.pl-person h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: #fff; }
.pl-person p { margin: 0; color: var(--muted); font-size: 15px; }
.pl-person .pl-person-rel { margin: 2px 0 6px; font-family: var(--pl-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-amber); }

/* где увидеть */
.pl-appears { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pl-appears a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.pl-appears img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); transition: transform .3s var(--pl-ease), box-shadow .3s; }
.pl-appears a:hover img { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px var(--pl-amber); }
.pl-ap-t { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.pl-ap-m { font-family: var(--pl-mono); font-size: 11px; color: var(--dim); }

/* где снимали */
.pl-filmed { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.pl-world-wrap { padding: 12px; border: 1px solid rgba(75, 213, 238, .2); border-radius: 14px; background: rgba(4, 8, 16, .8); }
.pl-world { display: block; width: 100%; height: auto; }
.pl-world-land { fill: none; stroke: rgba(75, 213, 238, .32); stroke-linecap: round; }
.pl-pin-ring { fill: none; stroke: var(--pl-amber); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.js .pl-pin-ring { animation: pl-ping 2.4s var(--d, 0s) ease-out infinite; }
@keyframes pl-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.pl-pin-dot { fill: var(--pl-amber); filter: drop-shadow(0 0 4px var(--pl-amber)); }
.pl-pin text { fill: #fff; font-family: var(--pl-mono); font-size: 13px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.pl-places { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: place; }
.pl-places li { position: relative; padding-inline-start: 40px; counter-increment: place; }
.pl-places li::before { content: counter(place); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pl-amber); color: #1a1205; font-family: var(--pl-mono); font-weight: 700; font-size: 13px; }
.pl-places h3 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.pl-places p { margin: 0; color: var(--muted); font-size: 15px; }
.pl-places .pl-place-in { margin-top: 4px; font-family: var(--pl-mono); font-size: 11.5px; }
.pl-place-in a { color: var(--pl-holo); text-decoration: none; }

/* знаете ли вы */
.pl-trivia { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-trivia li { position: relative; padding: 18px 18px 18px 54px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 12, 22, .75); font-size: 16px; line-height: 1.55; color: #dfe5f1; }
.pl-trivia li::before { content: '!'; position: absolute; top: 16px; inset-inline-start: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(75, 213, 238, .15); color: var(--pl-holo); font-family: var(--f-display); }
[dir="rtl"] .pl-trivia li { padding: 18px 54px 18px 18px; }

/* соседи и навигация */
.pl-cards-near .pl-card-d { display: none; }
.pl-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 56px; }
.pl-pager a { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 12, 22, .75); color: inherit; text-decoration: none; transition: border-color .2s; }
.pl-pager a:hover { border-color: var(--pl-amber); }
.pl-pager-n { justify-content: flex-end; text-align: end; }
.pl-pager-l { font-family: var(--pl-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pl-pager b { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: #fff; }
.pl-pager-all svg { width: 22px; height: 22px; fill: none; stroke: var(--pl-amber); stroke-width: 1.6; }
.pl-pager-all span { font-size: 14px; }
.pl-sources { margin-top: 56px; }
.pl-refs { margin: 14px 0 0; padding-inline-start: 22px; color: var(--muted); font-size: 14px; }
.pl-refs a { color: var(--pl-holo); word-break: break-word; }

/* гиперпрыжок при переходе на другую планету */
.pl-jump { position: fixed; z-index: 60; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 0 8%, rgba(200, 225, 255, .0) 9%), #02030a; }
.pl-jump::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(190, 220, 255, .9) 0 .4deg, transparent .4deg 3.2deg);
  -webkit-mask: radial-gradient(circle, transparent 0 6%, #000 40%);
          mask: radial-gradient(circle, transparent 0 6%, #000 40%);
  transform: scale(.2);
}
.pl-jump.on { opacity: 1; transition: opacity .25s; }
.pl-jump.on::before { transform: scale(1.6); transition: transform .7s cubic-bezier(.6, 0, .9, .4); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .pl-tools { grid-template-columns: repeat(3, 1fr); }
  .pl-f-q { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pl-whero-in { grid-template-columns: 1fr; }
  .pl-globe { width: min(100%, 520px); margin: 0 auto; }
  .pl-overview, .pl-filmed { grid-template-columns: 1fr; }
  .pl-locator { width: 100%; max-width: 420px; }
  .pl-game-q { grid-template-columns: 1fr; }
  .pl-game-clue { width: min(240px, 70%); margin: 0 auto; }
}
@media (max-width: 640px) {
  .pl-stage { height: 72vh; min-height: 420px; }
  .pl-tools { grid-template-columns: 1fr 1fr; }
  .pl-card-1 { grid-column: auto; }
  .pl-card-1 .pl-card-disc { flex-basis: 80px; width: 80px; height: 80px; }
  .pl-info { top: auto; bottom: 10px; inset-inline: 10px; width: auto; max-height: 62%; overflow-y: auto; }
  .pl-route-steps { bottom: 34px; }
  .pl-axis { grid-template-columns: repeat(4, 1fr); }
  .pl-events::before { inset-inline-start: 70px; }
  .pl-ev { grid-template-columns: 58px 1fr; gap: 24px; }
  .pl-ev::before { inset-inline-start: 65px; }
  .pl-ev-when { font-size: 12.5px; }
  .pl-game-opts { grid-template-columns: 1fr; }
  .pl-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-pager a { flex-wrap: wrap; gap: 4px 8px; padding: 12px 14px; }
  .pl-pager-all { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .pl-cols { column-count: 1; }
  .pl-overview-txt p { font-size: 17px; }
}
@media (max-width: 380px) {
  .pl-tools { grid-template-columns: 1fr; }
  .pl-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-page *, .pl-page *::before, .pl-page *::after { animation: none !important; transition: none !important; }
  .pl-jump { display: none; }
}