/* ===== HOW-TO PAGE — SECTION 1 ===== */
.guide-intro{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

/* section-bounded neon lanes */
.guide-intro .gi-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.guide-intro .gi-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen; opacity: .7;
  animation: giStripes 24s linear infinite;
}
.guide-intro .gi-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes giStripes{ from{ transform: translateX(0);} to{ transform: translateX(-240px);} }

/* layout */
.gi-wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}
.gi-head{ grid-column: 1 / -1; }
.gi-head h1{
  margin: 0 0 6px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: .5px;
  text-shadow: 0 0 12px rgba(199,255,61,.32), 0 0 22px rgba(125,92,255,.25);
}
.gi-sub{ margin: 0; color: var(--muted); }

/* steps with connected path */
.gi-steps{
  position: relative;
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 14px;
}
.gi-steps::before{
  content:""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(125,92,255,.55), rgba(199,255,61,.55));
  opacity: .45; border-radius: 2px;
}
.gi-step{
  display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 12px 12px 12px 22px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gi-step:hover,
.gi-step:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

/* step marker + ping */
.gi-step::before{
  content:""; position: absolute; left: 10px; width: 16px; height: 16px; top: 20px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(199,255,61,.45);
}
.gi-step.is-visible::before{ animation: giPing 1.6s ease-out 1; }
@keyframes giPing{
  0%{ box-shadow: 0 0 0 0 rgba(199,255,61,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(199,255,61,0); }
  100%{ box-shadow: 0 0 0 0 rgba(199,255,61,0); }
}

/* media and icons */
.gi-media{ width: 112px; max-width: 112px; min-width: 0; overflow: hidden; }
.gi-media .gi-icon{
  display: block; width: 100%; max-width: 100%;
  border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
  animation: giTilt 6s ease-in-out infinite; animation-play-state: paused;
}
.gi-step.is-visible .gi-icon{ animation-play-state: running; }
@keyframes giTilt{
  0%,100%{ transform: rotate(-.6deg) }
  50%    { transform: rotate(.6deg)  }
}
.gi-copy h3{ margin: 2px 0 4px; font-size: 1.05rem; }
.gi-copy p{ margin: 0; color: var(--muted); }

/* aside cheatsheet */
.gi-aside{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  align-self: start;
}
.gi-aside-title{ margin: 0 0 8px; font-size: 1.05rem; }
.gi-list{ margin: 0 12px 12px 18px; color: var(--muted); }

/* responsive */
@media (max-width: 991px){
  .gi-wrap{ grid-template-columns: 1fr; }
  .gi-head{ text-align: center; }
  .gi-aside{ justify-self: center; }
}
@media (max-width: 575px){
  .gi-step{ grid-template-columns: 90px 1fr; }
  .gi-media{ max-width: 90px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .guide-intro .gi-bg::before,
  .gi-step.is-visible::before,
  .gi-media .gi-icon{ animation: none !important; }
}
/* ===== HOW-TO — SECTION 2: TIMING PRACTICE ===== */
.guide-train{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

/* section-bounded lanes background */
.guide-train .gt-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.guide-train .gt-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen; opacity: .7;
  animation: gtStripes 26s linear infinite;
}
.guide-train .gt-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes gtStripes{ from{ transform: translateX(0);} to{ transform: translateX(-240px);} }

.gt-head{ text-align: center; margin-bottom: 18px; }
.gt-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow: 0 0 10px rgba(199,255,61,.22), 0 0 18px rgba(125,92,255,.18);
}
.gt-sub{ margin: 0; color: var(--muted); }

.gt-wrap{ display: block; }
.gt-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;
}

/* Controls */
.trainer-form{ display: grid; gap: 12px; }
.trainer-group{
  margin: 0; border: 1px solid rgba(199,255,61,.18); border-radius: 12px;
  padding: 10px; display: inline-flex; gap: 12px; align-items: center;
  background: rgba(16,20,30,.45);
}
.trainer-legend{ padding: 0 6px; font-weight: 700; }
.radio, .check{ display: inline-flex; gap: 8px; align-items: center; }
.radio input, .check input{ width: 18px; height: 18px; accent-color: var(--accent); }

/* Trainer demo */
.trainer{
  margin-top: 10px;
  border: 1px solid rgba(199,255,61,.28);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  box-shadow: var(--shadow);
}
.lane{
  position: relative;
  height: 18px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, rgba(125,92,255,.20), rgba(199,255,61,.14));
  border: 1px solid rgba(199,255,61,.28);
}
.lane + .lane{ margin-top: 12px; }

.runner{
  position: absolute; top: 50%; left: -10px;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(199,255,61,.7);
  animation: run 2.6s linear infinite;
}
@keyframes run{ from{ left: -10px; } to{ left: calc(100% - 2px); } }

/* Cue glow peaks near the middle */
.cue{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 36%;
  transform: translateX(-50%);
  background: radial-gradient(40% 50% at 50% 50%, rgba(199,255,61,.28), rgba(199,255,61,0));
  opacity: .0; transition: opacity .25s var(--ease);
}
#opt-cue:checked ~ .trainer .cue{ opacity: .9; }

/* CSS-тогглы через :has() — работает без изменения разметки */
.trainer-form:has(#opt-cue:checked) .trainer .cue{ opacity: .9; }

.trainer-form:has(#speed-chill:checked)  .trainer .runner{ animation-duration: 3.0s; }
.trainer-form:has(#speed-normal:checked) .trainer .runner{ animation-duration: 2.2s; }
.trainer-form:has(#speed-snappy:checked) .trainer .runner{ animation-duration: 1.5s; }

/* Фоллбэк-классы (поставит JS, если :has() недоступен) */
.trainer.cue-on .cue{ opacity: .9; }
.trainer.spd-chill  .runner{ animation-duration: 3.0s; }
.trainer.spd-normal .runner{ animation-duration: 2.2s; }
.trainer.spd-snappy .runner{ animation-duration: 1.5s; }

/* Note */
.trainer-note{ margin: 10px 0 0; color: var(--muted); font-size: .95rem; }

/* Aside */
.gt-aside{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  align-self: start;
}
.gt-aside-title{ margin: 0 0 8px; font-size: 1.05rem; }
.gt-list{ margin: 0 12px 12px 18px; color: var(--muted); }
.gt-illus{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gt-illus figure{ margin: 0; display: grid; place-items: center; }

/* Responsive */
@media (max-width: 991px){
  .gt-grid{ grid-template-columns: 1fr; }
  .gt-aside{ justify-self: center; }
  .gt-illus{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .radio input, .check input{ width: 16px; height: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .guide-train .gt-bg::before,
  .runner{ animation: none !important; }
}
/* ===== HOW-TO — SECTION 3: ROADSIDE CHALLENGES ===== */
.guide-chal{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.guide-chal .gc-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.guide-chal .gc-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen; opacity: .7;
  animation: gcStripes 26s linear infinite;
}
.guide-chal .gc-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes gcStripes{ from{ transform: translateX(0);} to{ transform: translateX(-240px);} }

.gc-grid{ display: grid; gap: 18px; }
.gc-head{ text-align: center; }
.gc-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow: 0 0 10px rgba(199,255,61,.22), 0 0 18px rgba(125,92,255,.18);
}
.gc-sub{ margin: 0; color: var(--muted); }

/* controls + demo */
.chal-form{ display: grid; gap: 12px; }
.chal-group{
  margin: 0; border: 1px solid rgba(199,255,61,.18); border-radius: 12px;
  padding: 10px; display: inline-flex; gap: 12px; align-items: center;
  background: rgba(16,20,30,.45);
}
.chal-legend{ padding: 0 6px; font-weight: 700; }

/* demo area */
.chal-demo{
  border: 1px solid rgba(199,255,61,.28);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  box-shadow: var(--shadow);
}
.demo-lane{
  position: relative;
  height: 18px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, rgba(125,92,255,.20), rgba(199,255,61,.14));
  border: 1px solid rgba(199,255,61,.28);
}
.demo-lane + .demo-lane{ margin-top: 12px; }

.runner{
  position: absolute; top: 50%; left: -10px;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(199,255,61,.7);
  animation: runC 2.4s linear infinite;
}
@keyframes runC{ from{ left: -10px; } to{ left: calc(100% - 2px); } }

/* scenario overlays (inactive by default) */
.lay{
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .25s var(--ease);
}

/* 1) Gentle traffic — soft pairs moving across (horizontal flow) */
.lay-traffic{
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.18) 0 40px, transparent 40px 80px);
  animation: cars 2.2s linear infinite;
  mix-blend-mode: screen;
}
@keyframes cars{ from{ background-position-x: 0; } to{ background-position-x: 160px; } }

/* 2) River drift — diagonal wave texture */
.lay-river{
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(125,92,255,.16), rgba(125,92,255,0)),
    repeating-linear-gradient(135deg, rgba(199,255,61,.12) 0 6px, transparent 6px 18px);
  animation: river 4.2s linear infinite;
  mix-blend-mode: screen;
}
@keyframes river{ from{ background-position: 0 0, 0 0; } to{ background-position: 50px 0, 120px 0; } }

/* 3) Night lanterns — twinkling dots */
.lay-night{
  background:
    radial-gradient(circle at 20% 50%, rgba(199,255,61,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(199,255,61,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 60%, rgba(125,92,255,.20) 0 2px, transparent 3px);
  animation: tw 2.8s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes tw{
  0%,100%{ opacity: .15; }
  50%{ opacity: .5; }
}

/* CSS-тогглы через :has() — работает без перестройки HTML */
.chal-form:has(#sc-traffic:checked) .chal-demo .lay-traffic{ opacity: 1; }
.chal-form:has(#sc-river:checked)   .chal-demo .lay-river{ opacity: 1; }
.chal-form:has(#sc-night:checked)   .chal-demo .lay-night{ opacity: 1; }

/* Фоллбэк-классы (на случай отсутствия :has(), поставит JS) */
.chal-demo.mode-traffic .lay-traffic{ opacity: 1; }
.chal-demo.mode-river   .lay-river{   opacity: 1; }
.chal-demo.mode-night   .lay-night{   opacity: 1; }

.chal-note{ margin: 10px 0 0; color: var(--muted); font-size: .95rem; }

/* cards */
.gc-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px; margin-top: 18px;
}
@media (max-width: 991px){ .gc-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .gc-cards{ grid-template-columns: 1fr; } }

.gc-card{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gc-card:hover,
.gc-card:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

.gc-fig{ margin: 0 0 10px; display: grid; place-items: center; }
/* ===== HOW-TO — SECTION 4: POWER-UPS & PERKS ===== */
.guide-perks{ position:relative; overflow:visible; border-top:1px solid rgba(199,255,61,.12); }
.guide-perks .gp-bg{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-12px; height:calc(100% + 24px); width:100vw; z-index:-1; pointer-events:none; overflow:hidden;
}
.guide-perks .gp-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode:screen; opacity:.7; animation: gpStripes 24s linear infinite;
}
.guide-perks .gp-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, var(--bg) 0 72px, rgba(11,13,18,0) 140px,
              rgba(11,13,18,0) calc(100% - 140px), var(--bg) 100%);
}
@keyframes gpStripes{ from{transform:translateX(0);} to{transform:translateX(-240px);} }

.gp-grid{ display:grid; gap:18px; }
.gp-head{ text-align:center; }
.gp-head h2{
  margin:0 0 8px; font-family:Sora,Inter,sans-serif;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  text-shadow:0 0 10px rgba(199,255,61,.22),0 0 18px rgba(125,92,255,.18);
}
.gp-sub{ margin:0; color:var(--muted); }

/* controls + demo */
.perks-form{ display:grid; gap:12px; }
.perks-group{
  margin:0; border:1px solid rgba(199,255,61,.18); border-radius:12px;
  padding:10px; display:inline-flex; gap:12px; align-items:center;
  background:rgba(16,20,30,.45);
}
.perks-legend{ padding:0 6px; font-weight:700; }

.perk-demo{
  border:1px solid rgba(199,255,61,.28); border-radius:14px; padding:14px;
  background:linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  box-shadow:var(--shadow);
}
.p-track{
  position:relative; height:18px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg, rgba(125,92,255,.20), rgba(199,255,61,.14));
  border:1px solid rgba(199,255,61,.28);
}
.p-egg{
  position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  transform:translateY(-50%);
  background:var(--accent); filter:drop-shadow(0 0 8px var(--ring));
  left:20%; 
}
.p-egg:nth-child(2){ left:46%; }
.p-egg:nth-child(3){ left:72%; }

.p-runner{
  position:absolute; top:50%; left:-10px; width:12px; height:12px; border-radius:50%;
  transform:translateY(-50%); background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.7);
  animation: pRun 2.2s linear infinite;
}
@keyframes pRun{ from{ left:-10px; } to{ left:calc(100% - 2px); } }

/* shield bubble (hidden by default) */
.p-shield{
  position:absolute; top:50%; left:calc(50% - 8px); width:22px; height:22px; border-radius:50%;
  transform:translateY(-50%) scale(0.001);
  border:1px solid rgba(199,255,61,.6);
  box-shadow: inset 0 0 14px rgba(199,255,61,.45);
  opacity:.0; transition: transform .25s var(--ease), opacity .25s var(--ease);
}

/* Magnet: eggs drift to runner */
.perks-form:has(#perk-magnet:checked) .perk-demo .p-egg{
  animation: pull 1.8s ease-in-out infinite;
}
@keyframes pull{
  0%,100%{ transform: translateY(-50%) translateX(0); }
  50%{ transform: translateY(-50%) translateX(-10px); }
}

/* Slow time: runner slows down */
.perks-form:has(#perk-slow:checked) .perk-demo .p-runner{ animation-duration: 3.4s; }

/* Shield: bubble pops at mid */
.perks-form:has(#perk-shield:checked) .perk-demo .p-shield{
  transform: translateY(-50%) scale(1); opacity:.9;
}

/* Fallback classes (JS поставит при отсутствии :has()) */
.perk-demo.mode-magnet .p-egg{ animation: pull 1.8s ease-in-out infinite; }
.perk-demo.mode-slow   .p-runner{ animation-duration: 3.4s; }
.perk-demo.mode-shield .p-shield{ transform: translateY(-50%) scale(1); opacity:.9; }

.perk-note{ margin:10px 0 0; color:var(--muted); font-size:.95rem; }

/* mini cards */
.gp-cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
}
@media (max-width: 991px){ .gp-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width: 575px){ .gp-cards{ grid-template-columns:1fr; } }

.gp-card{
  background:linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border:1px solid rgba(199,255,61,.18); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gp-card:hover, .gp-card:focus-within{ transform:translateY(-3px); border-color:rgba(199,255,61,.32); }
.gp-fig{ margin:0 0 10px; display:grid; place-items:center; }
/* ===== HOW-TO — SECTION 6: CONTROLS & INPUT ===== */
.guide-controls{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

/* section-bounded neon net */
.guide-controls .ctrl-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.guide-controls .ctrl-bg::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(125,92,255,.16), rgba(16,20,30,0) 40%),
    linear-gradient(90deg, rgba(199,255,61,.10) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg,  rgba(199,255,61,.10) 1px, transparent 1px) 0 0 / 18px 18px;
  mix-blend-mode: screen; opacity: .75;
  animation: ctrlNet 30s linear infinite;
}
.guide-controls .ctrl-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes ctrlNet{ from{ transform: translateX(0);} to{ transform: translateX(-220px);} }

/* layout */
.ctrl-grid{ display: grid; gap: 18px; }
.ctrl-head{ text-align: center; }
.ctrl-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow: 0 0 10px rgba(199,255,61,.22), 0 0 18px rgba(125,92,255,.18);
}
.ctrl-sub{ margin: 0; color: var(--muted); }

.ctrl-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1199px){ .ctrl-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 991px){ .ctrl-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px){ .ctrl-cards{ grid-template-columns: 1fr; } }

.ctrl-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.ctrl-card:hover,
.ctrl-card:focus-within{ transform: translateY(-3px) rotate(-.2deg); border-color: rgba(199,255,61,.32); }

.ctrl-fig{ margin: 0 0 10px; display: grid; place-items: center; }
.ctrl-icon{
  border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35);
  animation: pulse 3.2s ease-in-out infinite; animation-play-state: paused;
}
.guide-controls.is-visible .ctrl-icon{ animation-play-state: running; }
@keyframes pulse{
  0%,100% { filter: brightness(1); transform: translateZ(0); }
  50%     { filter: brightness(1.2); transform: translateY(-3px); }
}

/* keyboard keys (no image) */
.ctrl-keys{
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px;
}
.key{
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 8px;
  background: rgba(16,20,30,.6);
  border: 1px solid rgba(199,255,61,.28);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-weight: 700;
  animation: keyBlink 2.8s ease-in-out infinite; animation-play-state: paused;
}
.ctrl-card.is-visible .key{ animation-play-state: running; }
.key:nth-child(1){ animation-delay: .0s; }
.key:nth-child(2){ animation-delay: .1s; }
.key:nth-child(3){ animation-delay: .2s; }
.key:nth-child(4){ animation-delay: .3s; }
.key:nth-child(6){ animation-delay: .4s; }
.key:nth-child(7){ animation-delay: .5s; }
.key:nth-child(8){ animation-delay: .6s; }
.key:nth-child(9){ animation-delay: .7s; }
@keyframes keyBlink{
  0%,100% { filter: brightness(1); transform: translateY(0); }
  50%     { filter: brightness(1.25); transform: translateY(-2px); }
}
.or{ color: var(--muted); margin: 0 6px; }

/* aside */
.ctrl-aside{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.ctrl-aside-title{ margin: 0 0 8px; font-size: 1.05rem; }
.ctrl-list{ margin: 0 0 0 18px; color: var(--muted); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .guide-controls .ctrl-bg::before,
  .ctrl-icon,
  .key{ animation: none !important; }
}