/* ============================================================
   TECSUN PL-330 — Простая инструкция
   Тёмный фон + янтарная «подсветка дисплея». Крупный текст,
   крупные кнопки. Все анимации отключаются при
   prefers-reduced-motion: reduce (см. конец файла).
   ============================================================ */

:root{
  --bg:#12202C;
  --bg-top:#17293A;
  --panel:#1B2E3D;
  --panel-2:#223A4D;
  --amber:#FFB443;
  --amber-deep:#E8951B;
  --amber-soft:#FFE2AE;
  --text:#F4EFE4;
  --muted:#B4C8D6;
  --line:rgba(255,255,255,0.10);
  --radius:18px;
  --tap:56px;               /* минимальная высота тач-зоны */
  --focus:0 0 0 4px #12202C, 0 0 0 8px var(--amber);
}

*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at top, var(--bg-top) 0%, var(--bg) 55%);
  background-color:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* вырезы/«чёлки» телефонов в standalone-режиме */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button{font-family:inherit;}
b,strong{font-weight:800;}
/* длинные слова («Радиоприёмник», «Заблокировать») переносятся, а не вылезают —
   важно при крупном системном шрифте на телефоне */
body{overflow-wrap:anywhere;}
img,svg,video,picture{max-width:100%;}
h1,h2,h3{overflow-wrap:anywhere;}

.wrap{
  max-width:640px;
  margin:0 auto;
  padding:18px 18px 72px;
  padding-top:calc(18px + env(safe-area-inset-top));
}
@media (max-width:340px){
  .wrap{padding-left:12px;padding-right:12px;}
  .detail-body{font-size:1.2rem;}
  .detail-body ol li{padding-left:52px;}
  .detail-body ol li::before{width:40px;height:40px;font-size:1.15rem;}
}

/* Видимый фокус для клавиатуры (Bluetooth-клавиатура/трекпад) */
:focus{outline:none;}
:focus-visible{
  box-shadow:var(--focus);
  border-radius:12px;
}

.screen[hidden]{display:none;}

/* ---------- Шапка ---------- */
.header{
  text-align:center;
  padding:12px 6px 10px;
}
.header .brand{
  font-size:1.05rem;
  letter-spacing:0.16em;
  color:var(--muted);
  font-weight:700;
}
.header h1{
  margin:4px 0 6px;
  font-size:clamp(1.7rem, 8.5vw, 2.4rem);
  font-weight:800;
  color:var(--amber);
  line-height:1.05;
  text-shadow:0 0 18px rgba(255,180,67,0.25);
}
.header p{
  margin:0;
  font-size:1.2rem;
  color:var(--muted);
  line-height:1.4;
}

/* ---------- Фото приёмника с «эфиром» ---------- */
.hero{
  position:relative;
  margin:18px auto 8px;
  max-width:400px;
  isolation:isolate;
}
.waves{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:visible;
}
.waves .halo{
  position:absolute;
  left:50%;top:50%;
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,180,67,0.26) 0%, rgba(255,180,67,0.07) 45%, transparent 68%);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.88);}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1);}
}
.waves .ring{
  position:absolute;
  left:50%;
  top:50%;
  width:70%;
  aspect-ratio:1/1;
  border:3px solid var(--amber);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.75);
  animation:wave 7.5s ease-out infinite;
  will-change:transform,opacity;
}
.waves .ring:nth-of-type(2){animation-delay:2.5s;}
.waves .ring:nth-of-type(3){animation-delay:5s;}
/* второй слой: тонкие быстрые кольца */
.waves .ring.thin{
  width:60%;
  border-width:1.5px;
  border-color:var(--amber-soft);
  animation:wave-thin 4.5s linear infinite;
}
.waves .ring.thin:nth-of-type(5){animation-delay:2.25s;}
@keyframes wave{
  0%  {opacity:0;   transform:translate(-50%,-50%) scale(0.75);}
  12% {opacity:.45;}
  100%{opacity:0;   transform:translate(-50%,-50%) scale(1.55);}
}
@keyframes wave-thin{
  0%  {opacity:0;   transform:translate(-50%,-50%) scale(0.8);}
  10% {opacity:.3;}
  100%{opacity:0;   transform:translate(-50%,-50%) scale(1.75);}
}
.photo{
  display:block;
  position:relative;
  margin:0 auto;
  width:min(100%, 320px);
  border-radius:22px;
  overflow:hidden;
  border:3px solid #33495C;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 0 6px rgba(255,180,67,0.08),
    0 0 40px rgba(255,180,67,0.14);
  background:#0A141C;
}
.photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:900/990;
  object-fit:cover;
}

/* ---------- Декоративный дисплей с шкалой ---------- */
.dial{
  margin:20px auto 4px;
  background:linear-gradient(180deg,#0E1A24,#0A141C);
  border:3px solid #33495C;
  border-radius:14px;
  padding:14px 18px 12px;
  max-width:420px;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.5), 0 0 24px rgba(255,180,67,0.08);
}
.dial-top{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:4px 12px;
  min-width:0;
}
.dial .band{
  white-space:nowrap;
  font-size:1.05rem;
  font-weight:700;
  color:var(--amber-soft);
  letter-spacing:0.08em;
}
.dial .freq{
  font-size:clamp(1.5rem, 7vw, 2.1rem);
  white-space:nowrap;
  margin-left:auto;
  font-weight:700;
  color:var(--amber);
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(255,180,67,0.45);
  animation:glow 4s ease-in-out infinite, lcd 11s steps(1,end) infinite;
}
/* едва заметное «дыхание» подсветки, как у настоящего LCD */
@keyframes lcd{
  0%,100%{opacity:1;}
  37%{opacity:.9;} 38%{opacity:1;}
  63%{opacity:.94;} 64%{opacity:1;}
  81%{opacity:.88;} 82%{opacity:1;}
}
.dial{animation:dialglow 8s ease-in-out infinite;}
@keyframes dialglow{
  0%,100%{box-shadow:inset 0 0 30px rgba(0,0,0,0.5), 0 0 20px rgba(255,180,67,0.06);}
  50%    {box-shadow:inset 0 0 30px rgba(0,0,0,0.5), 0 0 34px rgba(255,180,67,0.16);}
}
.dial .freq small{
  font-size:1rem;
  font-weight:600;
  margin-left:6px;
  color:var(--amber-soft);
}
@keyframes glow{
  0%,100%{text-shadow:0 0 8px rgba(255,180,67,0.35);}
  50%    {text-shadow:0 0 16px rgba(255,180,67,0.7);}
}
.scale{
  display:block;
  width:100%;
  height:auto;
  margin-top:8px;
}
.scale .tick{stroke:#5B7891;stroke-width:1.5;}
.scale .tick.major{stroke:#8AA4B8;stroke-width:2;}
.scale .num{fill:#8AA4B8;font-size:11px;font-family:inherit;}
.scale .needle{
  stroke:var(--amber);
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(255,180,67,0.8));
  animation:needle 14s ease-in-out infinite;
  transform-box:fill-box;
}
/* стрелка «ищет» станцию вокруг 14.150 — как при точной настройке в SSB */
@keyframes needle{
  0%  {transform:translateX(137px);}
  20% {transform:translateX(112px);}
  45% {transform:translateX(158px);}
  65% {transform:translateX(130px);}
  85% {transform:translateX(141px);}
  100%{transform:translateX(137px);}
}
.dial .band .mode{
  display:inline-block;
  background:var(--amber);
  color:#12202C;
  font-weight:800;
  font-size:.85rem;
  border-radius:6px;
  padding:1px 7px;
  margin-right:6px;
  letter-spacing:.04em;
  vertical-align:middle;
}
.dial-meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:6px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--amber-soft);
  opacity:.85;
}
.dial-meta .sig{display:inline-flex;align-items:flex-end;gap:2px;margin-left:auto;height:14px;}
.dial-meta .sig i{display:block;width:5px;background:var(--amber);border-radius:1px;animation:sig 5s ease-in-out infinite;}
.dial-meta .sig i:nth-child(1){height:4px;}
.dial-meta .sig i:nth-child(2){height:6px;animation-delay:.3s;}
.dial-meta .sig i:nth-child(3){height:9px;animation-delay:.6s;}
.dial-meta .sig i:nth-child(4){height:11px;animation-delay:.9s;opacity:.55;}
.dial-meta .sig i:nth-child(5){height:14px;animation-delay:1.2s;opacity:.3;}
@keyframes sig{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}
.dial-meta .sig i:nth-child(4){animation-name:sigw;}
.dial-meta .sig i:nth-child(5){animation-name:sigw;}
@keyframes sigw{
  0%,100%{opacity:.25;}
  50%{opacity:.8;}
}

/* ---------- Список тем ---------- */
.cat-title{
  font-size:1.45rem;
  font-weight:800;
  color:var(--amber);
  margin:30px 4px 12px;
}
#menu .cat-title:first-child{margin-top:22px;}

.grid{
  display:grid;
  /* столбец не уже 200px: длинные слова помещаются даже при крупном шрифте;
     на телефоне — один столбец, на планшете — два-три */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap:12px;
}

.tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:16px 14px;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  min-height:104px;
  width:100%;
  box-shadow:0 3px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.25);
  transition:transform .1s ease, background .12s ease, border-color .12s ease, box-shadow .1s ease;
}
.tile:hover{border-color:rgba(255,180,67,0.45);}
/* «утапливание» — как нажатие кнопки на приёмнике */
.tile:active{
  transform:translateY(3px) scale(0.985);
  background:var(--panel-2);
  border-color:var(--amber-deep);
  box-shadow:0 0 0 rgba(0,0,0,0.35), inset 0 3px 10px rgba(0,0,0,0.45);
}
.tile-fun{
  border-color:rgba(255,180,67,0.35);
  background:linear-gradient(160deg, var(--panel) 0%, #23384A 100%);
}
.tile-fun .icon{filter:drop-shadow(0 0 6px rgba(255,180,67,0.5));}
.tile .icon{font-size:2rem;line-height:1;}
.tile .label{font-size:1.18rem;font-weight:700;line-height:1.25;min-width:0;max-width:100%;}
.tile{min-width:0;max-width:100%;}

/* ---------- Экран темы ---------- */
.backbtn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  background:var(--panel-2);
  border:2px solid var(--amber-deep);
  color:var(--amber);
  font-size:1.25rem;
  font-weight:800;
  padding:14px 20px;
  min-height:var(--tap);
  border-radius:14px;
  cursor:pointer;
  width:100%;
  margin-bottom:20px;
}
.backbtn{transition:transform .1s ease, box-shadow .1s ease;}
.backbtn:active{transform:translateY(2px) scale(0.99);box-shadow:inset 0 3px 8px rgba(0,0,0,0.4);}
.backbtn .arrow{font-size:1.5rem;line-height:1;flex:0 0 auto;}
.backbtn{text-align:left;}
.backbtn.bottom{margin-top:26px;margin-bottom:0;}

.detail-icon{font-size:3rem;line-height:1;margin-bottom:8px;}
.detail-title{
  font-size:clamp(1.5rem, 6.5vw, 1.9rem);
  font-weight:800;
  color:var(--amber);
  margin:4px 0 18px;
  line-height:1.15;
}
.detail-title:focus-visible{box-shadow:none;}
.detail-body{
  font-size:1.3rem;
  line-height:1.6;
}
.detail-body p{margin:0 0 16px;}

/* Нумерованные шаги — крупные янтарные номера */
.detail-body ol{
  list-style:none;
  counter-reset:step;
  margin:0 0 10px;
  padding:0;
}
.detail-body ol li{
  counter-increment:step;
  position:relative;
  padding-left:58px;
  min-width:0;
  margin-bottom:18px;
  min-height:46px;
}
.detail-body ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--panel-2);
  border:2px solid var(--amber-deep);
  color:var(--amber);
  font-weight:800;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-body ul{
  margin:0 0 10px;
  padding-left:1.2em;
}
.detail-body ul li{margin-bottom:12px;}

.note{
  background:var(--panel);
  border-left:6px solid var(--amber-deep);
  border-radius:10px;
  padding:14px 14px;
  min-width:0;
  margin:18px 0 4px;
  font-size:1.18rem;
  color:var(--amber-soft);
}
.key{
  display:inline-block;
  background:var(--panel-2);
  border:2px solid var(--amber-deep);
  color:var(--amber);
  border-radius:8px;
  padding:2px 10px;
  font-weight:800;
  font-size:1.08rem;
  white-space:nowrap;
}
.wheel{
  display:inline-block;
  background:var(--panel-2);
  border:2px solid var(--muted);
  color:var(--text);
  border-radius:20px;
  padding:2px 12px;
  font-weight:700;
  font-size:1.08rem;
  white-space:nowrap;
}

/* ---------- Подсказка про установку ---------- */
.install{
  display:none;
  margin:22px 0 0;
  background:var(--panel);
  border:2px solid rgba(255,180,67,0.35);
  border-radius:var(--radius);
  padding:16px;
  font-size:1.12rem;
  line-height:1.5;
  color:var(--amber-soft);
}
.install.show{display:block;}
.install .row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.install .row .btn{min-width:0;}
.btn{
  min-height:var(--tap);
  padding:12px 20px;
  border-radius:14px;
  border:2px solid var(--amber-deep);
  background:var(--amber);
  color:#12202C;
  font-size:1.15rem;
  font-weight:800;
  cursor:pointer;
  flex:1 1 auto;
}
.btn.secondary{
  background:transparent;
  color:var(--amber);
}
.btn{transition:transform .1s ease, box-shadow .1s ease;}
.btn:active{transform:translateY(2px) scale(0.99);box-shadow:inset 0 3px 8px rgba(0,0,0,0.3);}

/* ---------- Подвал ---------- */
footer{
  text-align:center;
  color:var(--muted);
  font-size:1rem;
  margin-top:40px;
  line-height:1.6;
}
footer a{color:var(--muted);}
footer .ver{opacity:.7;font-size:.9rem;}

.top-link{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--amber);
  color:#1B2E3D;
  font-weight:800;
  font-size:1.05rem;
  border:none;
  border-radius:50px;
  min-height:var(--tap);
  padding:14px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
  display:none;
  cursor:pointer;
  z-index:5;
}
.top-link.show{display:block;}

/* ---------- Переходы между экранами ---------- */
/* вперёд (в тему) — въезд справа, назад (на главную) — слева; симметрично */
.screen.enter-fwd {animation:screenFwd .32s cubic-bezier(.22,.8,.36,1) both;}
.screen.enter-back{animation:screenBack .32s cubic-bezier(.22,.8,.36,1) both;}
@keyframes screenFwd{
  from{opacity:0;transform:translateX(22px);}
  to  {opacity:1;transform:none;}
}
@keyframes screenBack{
  from{opacity:0;transform:translateX(-22px);}
  to  {opacity:1;transform:none;}
}
/* ступенчатое появление элементов (--i задаёт JS) */
.screen.enter-fwd .stg,
.screen.enter-back .stg{
  animation:fadeUp .45s ease-out both;
  animation-delay:calc(var(--i, 0) * 55ms + 80ms);
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to  {opacity:1;transform:none;}
}
/* появление блока при смене содержимого (викторина, период суток) */
.pop{animation:popIn .4s ease-out both;}
@keyframes popIn{
  from{opacity:0;transform:translateY(8px) scale(.985);}
  to  {opacity:1;transform:none;}
}

/* ============================================================
   Раздел «Интересное»
   ============================================================ */
.lead{
  font-size:1.2rem;
  color:var(--muted);
  margin:0 0 18px;
}

/* --- карточки фактов --- */
.cards{display:flex;flex-direction:column;gap:14px;}
.card{
  background:var(--panel);
  border:2px solid var(--line);
  border-left:6px solid var(--amber-deep);
  border-radius:var(--radius);
  padding:16px 18px;
}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;min-width:0;}
.card-icon{font-size:2rem;line-height:1;flex:0 0 auto;}
.card h3{margin:0;font-size:1.25rem;color:var(--amber);line-height:1.25;min-width:0;flex:1 1 auto;}
.card p{margin:0;font-size:1.18rem;line-height:1.55;}

/* --- круг суток --- */
.clock-wrap{max-width:340px;margin:0 auto 14px;}
.clock{display:block;width:100%;height:auto;}
.cface{fill:#0A141C;stroke:#33495C;stroke-width:3;}
.sector{fill:#223A4D;stroke:var(--bg);stroke-width:3;cursor:pointer;transition:fill .3s ease, filter .3s ease;}
.sector-morning{fill:#4A5A48;}
.sector-day{fill:#6B6A3B;}
.sector-evening{fill:#6A4A3A;}
.sector-night{fill:#243C55;}
.sector.active{fill:var(--amber);filter:drop-shadow(0 0 8px rgba(255,180,67,0.6));}
.sector:hover{filter:brightness(1.2);}
.ctick{stroke:#5B7891;stroke-width:1.5;}
.ctick.major{stroke:#8AA4B8;stroke-width:2.5;}
.cnum{fill:#8AA4B8;font-size:13px;font-weight:700;font-family:inherit;}
.clabel{font-size:22px;}
.hand{transform-origin:150px 150px;transition:transform 1.2s cubic-bezier(.34,1.3,.5,1);}
.hand line{stroke:var(--amber);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,180,67,0.8));}
.hand circle{fill:var(--amber);}
/* медленный «радарный» луч — сутки идут по кругу */
.sweep{transform-origin:150px 150px;animation:spin 24s linear infinite;}
.sweep path{fill:rgba(255,180,67,0.14);}
@keyframes spin{to{transform:rotate(360deg);}}

.period-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 16px;
}
@media (min-width:560px){.period-btns{grid-template-columns:repeat(4,1fr);}}
.pbtn{
  min-height:var(--tap);
  padding:10px 6px;
  border-radius:14px;
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--text);
  font-size:1.05rem;
  font-weight:800;
  cursor:pointer;
  transition:transform .1s ease, background .2s ease, border-color .2s ease;
}
.pbtn:active{transform:translateY(2px);}
.pbtn.active{background:var(--amber);color:#12202C;border-color:var(--amber);}
.period-info{
  background:var(--panel);
  border:2px solid rgba(255,180,67,0.35);
  border-radius:var(--radius);
  padding:16px 18px;
}
.period-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-width:0;}
.period-head > div{min-width:0;}
.period-icon{font-size:2.4rem;line-height:1;flex:0 0 auto;}
.period-head h3{margin:0;font-size:1.4rem;color:var(--amber);}
.period-head h3 small{font-size:1rem;color:var(--muted);font-weight:600;margin-left:6px;}
.now{
  display:inline-block;
  margin-top:4px;
  background:var(--amber);
  color:#12202C;
  font-weight:800;
  font-size:.95rem;
  border-radius:20px;
  padding:2px 12px;
}
.bandrow{margin:10px 0;}
.bandlbl{display:block;font-size:1rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
.bandlbl.good{color:var(--amber-soft);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  border:2px solid var(--muted);
  font-size:1.1rem;
  font-weight:700;
  background:var(--panel-2);
}
.chip.good{border-color:var(--amber-deep);color:var(--amber);background:rgba(255,180,67,0.08);}
.period-tip{margin:14px 0 0;font-size:1.15rem;line-height:1.5;}
.period-fm{margin:12px 0 0;font-size:1.05rem;color:var(--muted);}

/* --- комплект --- */
.kit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.kit-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  min-height:72px;
}
.kit-item > div{min-width:0;}
.kit-icon{font-size:2rem;line-height:1;}
.kit-name{font-size:1.2rem;font-weight:800;}
.kit-note{font-size:1.05rem;color:var(--muted);}
.kit-check{color:var(--amber);font-size:1.4rem;font-weight:800;}

/* --- что внутри --- */
.inside-wrap{
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  margin-bottom:16px;
}
.inside{display:block;width:100%;height:auto;}
.inside .case{fill:rgba(43,68,89,0.35);stroke:#8AA4B8;stroke-width:3;stroke-dasharray:8 6;}
.inside .part{transition:filter .3s ease, opacity .3s ease;}
.inside .dot{fill:var(--amber);stroke:#12202C;stroke-width:2;}
.inside .num{fill:#12202C;font-size:14px;font-weight:800;text-anchor:middle;font-family:inherit;}
.inside .part.hl{filter:drop-shadow(0 0 8px rgba(255,180,67,0.9));animation:pulse 1.6s ease-in-out infinite;}
.inside:has(.hl) .part:not(.hl){opacity:.35;}
@keyframes pulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,180,67,0.6));}
  50%    {filter:drop-shadow(0 0 14px rgba(255,180,67,1));}
}
.parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.detail-body ol.parts li{padding-left:0;min-height:0;margin-bottom:0;}
.detail-body ol.parts li::before{content:none;}
.part-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  color:var(--text);
  font-size:1.12rem;
  line-height:1.4;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .1s ease;
}
.part-btn:active{transform:translateY(2px);}
.part-btn.active{border-color:var(--amber);background:var(--panel-2);}
.part-num{
  flex:0 0 40px;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--amber);
  color:#12202C;
  font-weight:800;
  font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
}
.part-txt{min-width:0;flex:1 1 auto;}
.part-txt b{color:var(--amber-soft);}

/* --- викторина --- */
.quiz{
  background:var(--panel);
  border:2px solid rgba(255,180,67,0.35);
  border-radius:var(--radius);
  padding:18px;
}
.q-progress{display:flex;gap:6px;margin-bottom:10px;}
.q-progress span{flex:1;height:8px;border-radius:4px;background:var(--panel-2);transition:background .3s ease;}
.q-progress span.done{background:var(--amber-deep);}
.q-progress span.cur{background:var(--amber);animation:glowbar 1.6s ease-in-out infinite;}
@keyframes glowbar{0%,100%{box-shadow:0 0 0 rgba(255,180,67,0);}50%{box-shadow:0 0 10px rgba(255,180,67,.8);}}
.q-num{font-size:1rem;color:var(--muted);font-weight:700;}
.q-text{margin:6px 0 16px;font-size:clamp(1.2rem,5.5vw,1.4rem);line-height:1.3;color:var(--amber);}
.q-answers{display:flex;flex-direction:column;gap:10px;}
.q-btn{
  min-height:var(--tap);
  padding:14px 16px;
  border-radius:14px;
  border:2px solid var(--muted);
  background:var(--panel-2);
  color:var(--text);
  font-size:1.2rem;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:transform .1s ease, background .25s ease, border-color .25s ease;
}
.q-btn:not(:disabled):active{transform:translateY(2px);}
.q-btn:disabled{cursor:default;opacity:.7;}
.q-btn.right{
  opacity:1;
  background:rgba(255,180,67,0.16);
  border-color:var(--amber);
  color:var(--amber);
  animation:rightGlow .7s ease-out;
}
.q-btn.right::after{content:" ✓";}
.q-btn.wrong{
  opacity:1;
  border-color:#B86B5E;
  color:#F2C9C0;
  animation:shake .45s ease-in-out;
}
@keyframes rightGlow{
  0%  {box-shadow:0 0 0 rgba(255,180,67,0);transform:scale(1);}
  40% {box-shadow:0 0 22px rgba(255,180,67,.7);transform:scale(1.02);}
  100%{box-shadow:0 0 0 rgba(255,180,67,0);transform:scale(1);}
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.q-feedback{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;font-size:1.15rem;line-height:1.5;}
.q-feedback.show{display:block;animation:popIn .4s ease-out both;}
.q-feedback.ok{background:rgba(255,180,67,0.12);border-left:6px solid var(--amber);}
.q-feedback.no{background:rgba(184,107,94,0.14);border-left:6px solid #B86B5E;}
.fb-head{font-weight:800;font-size:1.25rem;margin-bottom:4px;}
.q-feedback p{margin:0 0 12px;}
.q-feedback .btn{width:100%;}
.q-result{text-align:center;padding:10px 0;}
.q-result-icon{font-size:4rem;line-height:1;animation:bounceIn .8s cubic-bezier(.34,1.4,.5,1) both;}
@keyframes bounceIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
.q-result h3{color:var(--amber);font-size:1.5rem;margin:12px 0 8px;}
.q-result p{font-size:1.18rem;margin:0 0 18px;}

/* ---------- Уменьшение движения ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .waves{display:none;}
  .dial .freq{text-shadow:0 0 10px rgba(255,180,67,0.45);opacity:1;}
  .sweep{display:none;}
  .inside .part.hl{filter:drop-shadow(0 0 8px rgba(255,180,67,0.9));}
  .stg,.pop,.q-feedback.show,.q-result-icon{opacity:1;transform:none;}
}

/* на узких экранах декоративная галочка в комплекте не нужна — текст важнее */
@media (max-width:400px){
  .kit-item{grid-template-columns:auto minmax(0,1fr);}
  .kit-check{display:none;}
}

/* ---------- Установка на телефон ---------- */
.install-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:1.2rem;}
.install-head span{font-size:1.8rem;line-height:1;}
.tile-install{
  border-color:var(--amber);
  background:linear-gradient(160deg, #2A4258 0%, var(--panel) 100%);
  box-shadow:0 3px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.25), 0 0 18px rgba(255,180,67,0.18);
}
.how-title{font-size:1.35rem;color:var(--amber);margin:6px 0 12px;}
.native-box{
  background:rgba(255,180,67,0.10);
  border:2px solid var(--amber);
  border-radius:var(--radius);
  padding:16px;
  margin:0 0 18px;
  font-size:1.15rem;
  line-height:1.5;
}
.btn.big{display:block;width:100%;margin-top:12px;font-size:1.3rem;min-height:64px;}
.ok-box{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,180,67,0.10);
  border:2px solid var(--amber-deep);
  border-radius:var(--radius);
  padding:16px;
  font-size:1.2rem;
  line-height:1.5;
}
.ok-box span{font-size:2rem;line-height:1;flex:0 0 auto;}
.other{margin-top:22px;border:2px solid var(--line);border-radius:var(--radius);background:var(--panel);}
.other summary{
  cursor:pointer;
  padding:14px 16px;
  min-height:var(--tap);
  font-size:1.15rem;
  font-weight:800;
  color:var(--amber-soft);
  list-style:none;
  display:flex;align-items:center;gap:10px;
}
.other summary::-webkit-details-marker{display:none;}
.other summary::before{content:"▸";color:var(--amber);font-size:1.3rem;transition:transform .2s ease;}
.other[open] summary::before{transform:rotate(90deg);}
.other-body{padding:0 16px 8px;font-size:1.1rem;line-height:1.5;}
.other-body p{margin:0 0 10px;}

/* ---------- Второй приёмник: Grundig ---------- */
.tile-museum{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  gap:16px;
  border-color:rgba(255,180,67,0.45);
  background:linear-gradient(120deg, #23384A 0%, var(--panel) 60%);
}
.tile-museum .thumb{
  width:112px;height:84px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:12px;
  border:2px solid #33495C;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.tile-museum .label{font-size:1.2rem;}
.tile-museum .sub{display:block;font-size:1rem;color:var(--muted);font-weight:600;margin-top:2px;}
.tile-museum .tile-txt{display:block;min-width:0;}
.tile-museum .label{display:block;}
@media (max-width:360px){
  .tile-museum{flex-direction:column;align-items:flex-start;}
  .tile-museum .thumb{width:100%;height:auto;aspect-ratio:4/3;}
}

.photo-wide{
  width:100%;
  max-width:600px;
  margin:0 auto 14px;
  animation:photoIn .8s ease-out both;
}
.photo-wide img{aspect-ratio:900/675;}
.photo-wide figcaption{
  font-size:.95rem;
  color:var(--muted);
  text-align:center;
  padding:8px 10px;
  background:#0E1A24;
}
@keyframes photoIn{
  from{opacity:0;transform:scale(.97);}
  to  {opacity:1;transform:none;}
}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.badge{
  background:var(--panel-2);
  border:2px solid rgba(255,180,67,0.35);
  border-radius:20px;
  padding:6px 14px;
  font-size:1.05rem;
  font-weight:700;
  color:var(--amber-soft);
}
.card .plain{margin:8px 0 0;padding-left:1.1em;font-size:1.15rem;line-height:1.5;}
.card .plain li{margin-bottom:8px;}
.card .small{font-size:1.02rem;color:var(--muted);margin-top:10px;}
.card p + p{margin-top:10px;}

/* бегущая строка городов со шкалы — очень медленно */
.city-strip{
  overflow:hidden;
  margin:12px -18px;
  padding:10px 0;
  background:linear-gradient(180deg,#0E1A24,#0A141C);
  border-top:2px solid #33495C;
  border-bottom:2px solid #33495C;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.city-track{
  display:flex;
  gap:26px;
  width:max-content;
  animation:cities 70s linear infinite;
}
.city-track span{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--amber);
  text-shadow:0 0 8px rgba(255,180,67,0.5);
  white-space:nowrap;
}
@keyframes cities{to{transform:translateX(-50%);}}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}
@media (max-width:420px){.vs{grid-template-columns:1fr;}}
.vs-col{background:var(--panel-2);border-radius:12px;padding:12px;}
.vs-h{font-weight:800;color:var(--amber);font-size:1.1rem;margin-bottom:6px;}
.vs .plain{padding-left:1em;font-size:1.05rem;}

.links{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.links a{
  display:block;
  min-height:var(--tap);
  padding:12px 14px;
  border-radius:12px;
  background:var(--panel-2);
  border:2px solid var(--line);
  color:var(--amber-soft);
  font-size:1.08rem;
  font-weight:700;
  text-decoration:none;
  line-height:1.4;
}
.links a:hover{border-color:var(--amber-deep);}
.links a span{color:var(--amber);}

@media (prefers-reduced-motion: reduce){
  .city-track{animation:none;flex-wrap:wrap;width:auto;}
  .city-track span:nth-child(n+21){display:none;}
}

/* ---------- Grundig: под-карточки ---------- */
.subtiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap:10px;
  margin:0 0 20px;
}
.subtile{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--tap);
  padding:12px 14px;
  border-radius:14px;
  background:var(--panel);
  border:2px solid rgba(255,180,67,0.35);
  color:var(--amber-soft);
  font-size:1.1rem;
  font-weight:800;
  text-decoration:none;
  transition:transform .1s ease, border-color .2s ease;
}
.subtile:active{transform:translateY(2px);}
.subtile:hover{border-color:var(--amber);}
.subtile span:first-child{font-size:1.6rem;line-height:1;flex:0 0 auto;}
.tile-lamp{border-color:rgba(255,180,67,0.45);}
.tile-lamp .icon{filter:drop-shadow(0 0 8px rgba(255,180,67,0.7));animation:lampBlink 4s ease-in-out infinite;}
@keyframes lampBlink{0%,100%{opacity:1;}50%{opacity:.55;}}
.note.warn{border-left-color:#E06B5E;color:#FFD9D2;background:rgba(224,107,94,0.10);}
.links a small{display:block;font-weight:600;color:var(--muted);font-size:.98rem;margin-top:4px;}

/* иллюстрация «лампа → светодиод» */
.lamp-wrap{
  background:linear-gradient(180deg,#0E1A24,#0A141C);
  border:2px solid #33495C;
  border-radius:var(--radius);
  padding:10px 6px 4px;
  margin:0 0 18px;
}
.lamp-pic{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;}
.lamp-cap{fill:var(--amber);font-size:15px;font-weight:800;font-family:inherit;}
.lamp-sub{fill:#B4C8D6;font-size:11px;font-family:inherit;}
.lamp-arrow{fill:var(--amber);font-size:34px;font-weight:800;font-family:inherit;}
.filament{animation:filamentFlicker 3s steps(1,end) infinite;}
@keyframes filamentFlicker{0%,100%{opacity:.8;}47%{opacity:.5;}49%{opacity:.85;}78%{opacity:.6;}80%{opacity:.8;}}
.lamp-glow-led{animation:ledPulse 5s ease-in-out infinite;transform-origin:290px 90px;}
@keyframes ledPulse{0%,100%{opacity:.85;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@media (prefers-reduced-motion: reduce){
  .filament,.lamp-glow-led,.tile-lamp .icon{animation:none;}
}