/* ============ How to Play: Cyberpunk Neon Styles ============ */

.howto-intro {
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
  align-items: center;
}
.intro-story-flex {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: space-between;
}
.intro-story {
  flex: 1 1 350px;
  min-width: 325px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.cta-glow {
  margin-top: var(--space-6);
  display: flex;
  justify-content: flex-start;
}
.cta-glow .button {
  font-size: var(--font-size-lg);
  box-shadow: 0 0 16px 2px var(--color-primary-accent), var(--shadow-neon);
  text-shadow: 0 1px 6px #40e0ffbb;
  animation: neonPulse 2.4s infinite alternate;
}
@keyframes neonPulse {
  0% { box-shadow: 0 0 16px 4px #10ffd622; }
  100% { box-shadow: 0 0 46px 10px #40e0ffaa; }
}
.intro-animation {
  flex: 1 1 300px;
  min-width: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.city-parallax {
  position: relative;
  width: 320px;
  height: 170px;
  background: transparent;
}
.city-bg {
  width: 320px;
  position: absolute;
  left: 0; bottom: 0;
  z-index: 0;
  filter: brightness(0.94) drop-shadow(0 0 30px #10ffd633);
}
.car-anim {
  width: 81px;
  position: absolute;
  bottom: 80px; left: 120px;
  z-index: 1;
  animation: carHover 3s infinite alternate cubic-bezier(.59,-0.04,.22,.99);
  filter: drop-shadow(0 0 14px #10ffd6) drop-shadow(0 0 8px #fff2);
}
@keyframes carHover {
  0%   { transform: translateY(0) scale(1.01); }
  100% { transform: translateY(-14px) scale(1.05); }
}
.neon-flash {
  position: absolute;
  left: 70px;
  bottom: 50px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 50%, #10ffd6 35%, transparent 70%);
  opacity: 0.62;
  filter: blur(6px);
  animation: neonFlashAnim 1.6s infinite alternate;
}
@keyframes neonFlashAnim {
  0% { opacity: 0.2; }
  100% { opacity: 0.74; }
}

/* --- Objective Section --- */
.objective-flex {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.objective-info {
  flex: 2 1 320px;
}
.neon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.neon-list li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: var(--space-2);
  color: var(--color-primary-accent);
  font-weight: 600;
  text-shadow: 0 0 6px #10ffd655;
}
.neon-list li::before {
  content: '\2022 ';
  color: var(--color-warning);
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 0;
  text-shadow: 0 0 8px #faff0499;
}
.objective-visuals {
  flex: 1.5 1 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}
.infographic-glow {
  box-shadow: 0 0 32px 5px #40e0ffff, 0 2px 16px #10152499;
  border-radius: var(--radius-sm);
}
.victory-examples {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.victory-card {
  background: linear-gradient(114deg, #18141d 55%, #40e0ff22 100%);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 8px #10ffd655;
  color: var(--color-primary-accent);
  font-size: var(--font-size-sm);
  min-width: 98px;
}
.victory-card img {
  max-width: 52px;
  margin-bottom: var(--space-2);
}

/* --- Setup Section --- */
.setup-flex {
  grid-template-columns: 340px 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1200px) {
  .setup-flex { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .setup-flex { display: flex; flex-direction: column; gap: var(--space-4); }
}
.setup-board {
  grid-column: 1 / span 1;
}
.board-glow {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 30px 8px #10ffd666, 0 2px 32px #10152499;
}
.setup-steps {
  grid-column: 2 / span 1;
}
.setup-checklist-download {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.setup-checklist-download .file-size {
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
}
.components-interactive {
  grid-column: 3 / span 1;
}
.components-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.component-card {
  background: linear-gradient(115deg, #22344255 50%, #10ffd61c 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 12px 2px #10ffd6aa;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  outline: none;
  transition: box-shadow .19s;
  cursor: pointer;
}
.component-card img {
  max-width: 48px;
}
.component-card:focus, .component-card:hover {
  box-shadow: 0 0 24px 5px #40e0ffaa;
}
.component-card span {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-primary-accent);
}

/* Neon Tooltips */
.neon-tooltip[data-tooltip]:hover:after,
.neon-tooltip[data-tooltip]:focus:after {
  content: attr(data-tooltip);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #18141dcc;
  color: var(--color-primary-accent);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  white-space: pre-line;
  box-shadow: 0 0 12px 1px #40e0ff99;
  z-index: 10;
  opacity: 1;
  pointer-events: none;
}

/* --- Turn Structure (Timeline/Slider) --- */
.turns-timeline {
  margin: var(--space-6) auto;
  padding: var(--space-6);
  background: linear-gradient(90deg, #18141daa 70%, #40e0ff11 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 24px 6px #10ffd644;
  max-width: 900px;
}
.turn-slider {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  margin-bottom: var(--space-4);
}
.phase-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  max-width: 230px;
  background: #231c2b55;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
  box-shadow: 0 0 14px 3px #10ffd655;
  transition: background .25s;
  position: relative;
}
.phase-slide.active {
  display: flex;
}
.phase-label {
  font-size: var(--font-size-xl);
  color: var(--color-primary-accent);
  margin-bottom: var(--space-2);
  font-weight: bold;
  letter-spacing: 0.04em;
}
.phase-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-100);
  margin-bottom: var(--space-2);
  text-align: center;
}
.tip-hack {
  border-radius: 50%;
  background: linear-gradient(90deg, #10ffd633 50%, #40e0ff44);
  border: 1px solid var(--color-primary);
  padding: 0.5em 0.7em;
  font-size: 1.5em;
  color: var(--color-primary-accent);
  cursor: pointer;
  box-shadow: 0 0 10px #10ffd6cc;
  margin-bottom: -1em;
  margin-top: var(--space-1);
}
.turn-slider-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: center;
  margin-top: 6px;
}
.slider-prev, .slider-next {
  font-size: var(--font-size-xl);
  background: none;
  color: var(--color-primary-accent);
  border: none;
  border-radius: 6px;
  padding: 4px 14px;
  box-shadow: 0 0 6px #10ffd655;
  transition: background .15s;
}
.slider-prev:focus, .slider-next:focus,
.slider-prev:hover, .slider-next:hover {
  background: #18141dcc;
}
.timeline-bullets { display: flex; gap: 8px; }
.timeline-bullets .bullet {
  border: none;
  background: #494a5a99;
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 4px #40e0ffaa;
  transition: background .17s;
}
.timeline-bullets .bullet.active {
  background: var(--color-primary-accent);
  box-shadow: 0 0 8px #10ffd6cc, 0 0 2px #fff;
}
.turns-tips {
  margin-top: var(--space-3);
  min-height: 2em;
}
.tip-box {
  background: linear-gradient(90deg, #40e0ff33 40%, #10ffd644 100%);
  border-radius: var(--radius);
  box-shadow: 0 0 8px #10ffd666;
  color: #18141d;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  animation: tipPop .35s ease;
}
@keyframes tipPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Game Actions --- */
.actions-grid {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
}
.action-item {
  background: linear-gradient(100deg, #231c2bcc 60%, #10ffd61a 100%);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 12px 2px #10ffd655;
  padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 108px;
  min-height: 132px;
  outline: none;
  cursor: pointer;
  transition: box-shadow .19s, background .17s;
}
.action-item:focus, .action-item:hover {
  box-shadow: 0 0 26px 5px #10ffd6cc;
  background: linear-gradient(90deg, #40e0ffaa 20%, #10ffd61c 100%);
}
.action-item img {
  width: 48px;
  margin-bottom: var(--space-2);
}
.action-item span {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin-top: var(--space-1);
}
.actions-progress {
  margin: var(--space-4) 0 0 0;
}
.actions-progress label {
  margin-right: var(--space-2);
  color: var(--color-primary-accent);
}
#city-influence-meter {
  width: 220px;
  height: 13px;
  border-radius: 13px;
  background: #223442;
  accent-color: var(--color-primary);
  box-shadow: 0 0 8px #10ffd655;
}

/* --- Special Events --- */
.events-flex {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: flex-start;
}
.events-gallery {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}
.event-glitch {
  max-width: 80px;
  border-radius: 10px;
  box-shadow: 0 0 14px 2px #ff1843cc;
}
.event-warning {
  max-width: 52px;
  border-radius: 12px;
  box-shadow: 0 0 16px 3px #faff04cc;
}
.event-details {
  flex: 2 1 350px;
  min-width: 220px;
}
.events-examples {
  margin: var(--space-2) 0;
  color: var(--color-primary-accent);
  font-size: var(--font-size-sm);
  text-shadow: 0 0 6px #10ffd666;
}
.event-example { margin-bottom: 0.5em; }
.event-simulator {
  margin-top: var(--space-3);
}
#event-sim-result {
  min-height: 1.5em;
  color: var(--color-primary-accent);
  margin-top: var(--space-2);
  font-size: var(--font-size-lg);
  text-shadow: 0 0 7px #40e0ffaa;
}

/* --- Quick Reference & Downloads Section --- */
.downloads-flex {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.downloads-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.reference-glance {
  flex: 1 1 260px;
  background: linear-gradient(109deg,#231c2b66 40%,#10ffd611 100%);
  border-left: 4px solid var(--color-primary-accent);
  padding: var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-base);
  margin-top: var(--space-2);
}
.reference-glance ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reference-glance li {
  padding-left: 1.7em;
  position: relative;
  margin-bottom: var(--space-2);
}
.reference-glance li::before {
  content: '\25A0';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.95em;
  top: 0.14em;
}

.faq-accordion {
  margin-top: var(--space-6);
  background: linear-gradient(100deg,#22344255 50%,#10ffd61c 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 18px 4px #10ffd644;
  padding: var(--space-2);
}
.accordion-btn {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-primary);
  background: none;
  border: none;
  border-bottom: 1px solid #10ffd611;
  font-size: var(--font-size-lg);
  font-weight: bold;
  outline: none;
  cursor: pointer;
  transition: background 0.17s;
}
.accordion-btn[aria-expanded="true"], .accordion-btn:focus {
  background: linear-gradient(90deg, #10ffd633 80%, #18141d 100%);
  color: var(--color-primary-accent);
}
.accordion-panel {
  padding: var(--space-2) var(--space-3);
  color: var(--color-gray-100);
  background: #18141dcc;
  font-size: var(--font-size-base);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-bottom: var(--space-2);
  box-shadow: 0 0 14px 2px #10ffd655;
  animation: faqGlow .22s;
}
@keyframes faqGlow {
  0% { opacity: 0.33; }
  100% { opacity: 1; }
}

.help-bot {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}
.help-button {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #10ffd633 70%, #40e0ff4c 100%);
  border: none;
  border-radius: 22px;
  color: #18141d;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: bold;
  box-shadow: 0 0 12px #10ffd6aa;
  transition: background .16s;
}
.help-button img {
  width: 32px;
  height: 32px;
  margin-right: var(--space-2);
  border-radius: 50%;
  box-shadow: 0 0 8px #40e0ffaa;
}
.help-button:hover, .help-button:focus {
  background: linear-gradient(95deg, #40e0ffaa 60%, #10ffd622 100%);
  color: #101524;
}
@media (max-width: 900px) {
  .intro-story-flex, .objective-flex, .events-flex, .downloads-flex {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .setup-flex {
    flex-direction: column;
    gap: var(--space-3);
  }
}
@media (max-width: 600px) {
  .howto-intro, .howto-section {
    padding: 0 var(--space-3);
  }
}