@font-face {
  font-family: 'Renju';
  src: url('src/fonts/Renju/Renju.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* fallback nav height used before JS measures actual height */
  --primary-nav-height: 60px;
}

@font-face {
  font-family: 'LeonovSP';
  src: url('src/fonts/LeonovSP/LeonovSP.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  /* Prevent tiny horizontal scroll caused by 100vw or subpixel rendering */
  overflow-x: hidden;
}

.main-header {
  position: relative;
  /* use 100% instead of 100vw to avoid including the vertical scrollbar width */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-video {
  position: absolute;
  /* anchor video to the top of the header so it appears immediately under the fixed nav */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh; /* full viewport height for header area */
  object-fit: cover;
  /* ensure the video always covers the header without using translateX which can reveal sub-pixel gaps */
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}

.header-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.main-title {
  color: #f39819;
  font-family: 'Renju', Arial, sans-serif;
  font-size: 7vw;
  text-shadow: 0 0 30px #000, 0 0 10px #222;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 0 6vh 0; /* отступ снизу */
  user-select: none;
  align-self: flex-end; /* прижать к низу */
  transform: translateY(-2vh); /* небольшая подушка вверх */
  position: relative;
  z-index: 4;
  /* базовое свечение */
  transition: text-shadow 180ms ease, transform 150ms ease;
  animation: subtle-flicker 3s infinite linear;
}

/* TV flicker */
@keyframes subtle-flicker {
  0% { text-shadow: 0 0 28px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6); opacity: 1; }
  50% { text-shadow: 0 0 38px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.75); opacity: 0.96; }
  100% { text-shadow: 0 0 28px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6); opacity: 1; }
}

/* Chromatic aberration via layered pseudo-elements */
/* Chromatic effect implemented via multi-layered text-shadow to avoid duplicate text */
.main-title {
  /* add color-shifted shadows for chromatic aberration */
  text-shadow:
    0 0 30px rgba(0,0,0,0.9),
    0 0 10px rgba(0,0,0,0.6),
    2px 0 6px rgba(255,100,80,0.55),
    -2px 0 6px rgba(80,180,255,0.45);
  /* keep existing flicker and add a subtle glitch animation */
  animation: subtle-flicker 3s infinite linear, slight-glitch 6s infinite steps(1,end);
}

/* Scanlines overlay */
/* Add scanlines using a separate overlay element inside header-content */
.header-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.06) 50%, rgba(0,0,0,0) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 3;
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(0); opacity: 0.9 }
  100% { transform: translateY(4px); opacity: 0.9 }
}

/* Small glitch burst */
@keyframes glitch-x {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

@keyframes slight-glitch {
  0% { text-shadow: 2px 0 6px rgba(255,100,80,0.55), -2px 0 6px rgba(80,180,255,0.45); transform: translateX(0); }
  10% { text-shadow: 6px 0 8px rgba(255,100,80,0.6), -6px 0 8px rgba(80,180,255,0.5); transform: translateX(-1px); }
  20% { transform: translateX(1px); }
  100% { text-shadow: 2px 0 6px rgba(255,100,80,0.55), -2px 0 6px rgba(80,180,255,0.45); transform: translateX(0); }
}

/* Reduce heavy effects on small screens */
@media (max-width: 600px) {
  .main-title { font-size: 12vw; animation: none; }
  .main-title::before, .main-title::after { display: none; }
  .header-content::after { display: none; }
}

/* Randomized color/brightness flicker: when JS adds .random-flick on the title */
.main-title.random-flick {
  color: #ffd98a; /* немного светлее */
  text-shadow: 0 0 44px rgba(255,210,130,0.95), 2px 0 10px rgba(255,120,80,0.6), -2px 0 10px rgba(80,180,255,0.3);
  transition: color 120ms ease, text-shadow 120ms ease, transform 80ms ease;
  animation: flicker-opacity 220ms linear 1;
}

/* Для контрастного затемнения (короткий эффект) */
.main-title.random-dim {
  color: #d07a00; /* немного темнее/оранжевее */
  text-shadow: 0 0 18px rgba(0,0,0,0.9), 1px 0 6px rgba(0,0,0,0.6);
  transition: color 120ms ease, text-shadow 120ms ease;
}

@keyframes flicker-opacity {
  0% { opacity: 1; }
  25% { opacity: 0.6; }
  50% { opacity: 1; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Safety: ensure small screens still performant */
@media (max-width: 420px) {
  .main-title.random-flick, .main-title.random-dim { animation: none; }
}

/* Навигация под видео */
.primary-nav {
  /* Fixed top navigation: always visible and full-bleed */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000; /* чёрная широкая полоса */
  padding: 12px 0; /* slightly reduced to fit fixed layout */
  display: flex;
  justify-content: center;
  z-index: 9999; /* sit above header/video and titles */
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  overflow: hidden; /* ensure inner overflow doesn't break the black bar */
}
.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  display: flex;
  gap: 36px;
  align-items: center;
  /* constrain nav content to main width and center it */
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent nav labels from wrapping; allow small screens to wrap if needed */
.primary-nav a {
  white-space: nowrap;
}

/* оранжевое свечение при наведении */
.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav a.active {
  color: #ff8c00;
  text-shadow: 0 0 12px rgba(255,140,0,0.9), 0 0 24px rgba(255,140,0,0.25);
  transform: translateY(-2px);
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  /* Page background image (covers entire page behind header/video).
     Use a few fallbacks (absolute and relative) because the site may be
     served from different roots (Caddy static vs express static). */
  background-color: #111; /* dark fallback if image not found */
  background-image: url('/src/head/background.jpg'), url('src/head/background.jpg');
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed;
  color: #e2e2e2;
}

/* Protective overlay for video-wrapper to make direct saving harder */
.video-wrapper { 
  position: relative; 
  user-select: none; 
  -webkit-user-select: none; 
  -webkit-touch-callout: none;
}

.video-protect-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: transparent;
  cursor: pointer;
  z-index: 10;
  /* Block all pointer events to the video element below */
  pointer-events: auto;
}
/* When playing, make overlay visually transparent but keep it intercepting all events */
.video-protect-overlay.playing { 
  background: transparent; 
  cursor: default;
}

/* Prevent direct interaction with video element (all events go through overlay) */
#page-main-video { 
  position: relative; 
  z-index: 1; 
  pointer-events: none; /* block all direct clicks/context menu on video */
  user-select: none;
  -webkit-user-select: none;
}

.video-custom-controls { 
  position: absolute; 
  left: 12px; 
  bottom: 12px; 
  z-index: 15; 
  pointer-events: auto; /* allow clicks on controls */
}
.video-custom-controls .vc-play { 
  background: rgba(0,0,0,0.7); 
  color: #fff; 
  border: 1px solid rgba(255,255,255,0.2); 
  padding: 10px 14px; 
  border-radius: 8px; 
  font-size: 18px; 
  cursor: pointer; 
  transition: background 0.2s;
}
.video-custom-controls .vc-play:hover { background: rgba(0,0,0,0.85); }
.video-custom-controls .vc-play.hidden { display: none; }

header {
  background: #444;
  padding: 10px 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2em;
  margin: 0;
  padding: 0;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

main {
  max-width: 900px;
  margin: 0 auto; /* remove top margin so nav can sit flush under header */
  padding: 1em; /* keep internal padding */
  /* Slightly translucent main so background image shows through */
  background: rgba(49,49,49,0.6);
  backdrop-filter: blur(4px);
  border-radius: 8px;
}

section {
  margin-bottom: 2em;
}

/* Секции табов: скрываем по умолчанию, показываем активную */
.tab-section { display: none; }
.tab-section.active-tab { display: block; }

/* Сетка скриншотов */
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
.screenshot-grid img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.req-image {
  display: block;
  width: 100%; /* span the content width */
  height: auto;
  margin: 0 0 0.8rem 0;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

/* Keep requirement blocks single-column so images appear above headings */
.cover-crop-bottom {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* сохраняем 4:3, можно менять */
  object-fit: cover;
  object-position: center top; /* обрезаем снизу */
  display: block;
  border-radius: 6px;
  margin: 0 0 1rem 0;
}

/* Обрезать нижнюю треть: показываем верхние 2/3 изображения (aspect ratio меняется на 2:1) */
.crop-bottom-third {
  aspect-ratio: 2 / 1; /* ширина : высота = 2:1 — оставляет верхние 2/3 */
  object-position: center top;
}
.screenshot-grid img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

.video-wrapper {
  margin-top: 1rem;
  background: #000;
  padding: 8px;
  border-radius: 6px;
}
.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Стили для новостей */
.news-list { display: grid; gap: 14px; margin-top: 1rem; }
.news-item { display: flex; gap: 12px; background: #272727; padding: 12px; border-radius: 8px; align-items: center; }
.news-item img { width: 140px; height: 84px; object-fit: cover; border-radius: 6px; }
.news-body h4 { margin: 0 0 6px 0; color: #ffb74d; }
.news-body p { margin: 0 0 8px 0; color: #e6e6e6; }
.news-body time { color: #bdbdbd; font-size: 0.9rem; }

/* Сетка по 3 изображения, 16:9 и адаптив */
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 1rem 0;
}
.img-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* Standardized list for "Модификации" sections across accordion blocks */
.mods-list {
  list-style: disc;
  margin: 0.5rem 0 1rem 1.2rem;
  padding: 0;
  columns: 2;
  column-gap: 1.2rem;
}
.mods-list li {
  margin: 0 0 0.35rem 0;
  break-inside: avoid;
}

/* Custom block specific styles */
.video-caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #ffdca8;
  text-align: center;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0.8rem 0 1rem 0;
}
.gallery-grid .grid-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; }
.custom-block .full-width-image { margin-top: 0.8rem; }

@media (max-width: 900px) {
  .three-grid { grid-template-columns: repeat(2, 1fr); }
  /* allow nav to use padding and keep items visible on narrower screens */
  .primary-nav ul { max-width: calc(100% - 2rem); padding: 0 1rem; }
}
@media (max-width: 560px) {
  .three-grid { grid-template-columns: 1fr; }
  /* Make nav more compact and touch-friendly on small screens */
  .primary-nav { padding: 8px 0; }
  .primary-nav ul {
    gap: 12px;
    padding: 0 0.6rem;
    max-width: none; /* allow full-bleed scrolling */
    white-space: nowrap; /* keep items in a single row */
    overflow-x: auto; /* enable horizontal scroll for many items */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: thin; /* Firefox */
  }
  /* nicer scrollbar on webkit browsers */
  .primary-nav ul::-webkit-scrollbar { height: 8px; }
  .primary-nav ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 8px; }

  .primary-nav a {
    font-size: 0.96rem;
    display: inline-block; /* increase tappable area */
    padding: 6px 10px;
  }
  /* Improve keyboard focus visibility */
  .primary-nav a:focus {
    outline: 2px solid rgba(255,140,0,0.95);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* Headings use LeonovSP font with golden underline */
h2, h3 {
  color: #ffb300;
  border-bottom: 1px solid #ffb300;
  padding-bottom: 0.2em;
  font-family: 'LeonovSP', 'Renju', Arial, sans-serif;
  /* Ensure headings are scrolled into view below the fixed nav */
  scroll-margin-top: calc(var(--primary-nav-height) + 12px);
}

button {
  background: #ffb300;
  color: #222;
  border: none;
  padding: 0.5em 1.2em;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1em;
}

/* Custom scrollbars: dark, rounded, no arrows */
/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.03); /* subtle separation */
}
/* remove default arrows in older WebKit/EdgeHTML (if any) */
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* Firefox */
html {
  /* track color, thumb color */
  scrollbar-color: rgba(0,0,0,0.6) rgba(0,0,0,0.25);
  scrollbar-width: thin;
}

/* Small enhancement: a lightweight shadow for the thumb on hover */
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.75); }

button:hover {
  background: #ffa000;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-content {
  background: #222;
  padding: 2em;
  border-radius: 8px;
  text-align: center;
}

/* Disclaimer modal specific tweaks */
.modal-content.disclaimer { max-width: 800px; max-height: 70vh; overflow: auto; text-align: left; }
.modal-content.disclaimer .disclaimer-text p { margin-bottom: 0.6rem; }

/* Background image for disclaimer modal (decorative). Uses a pseudo-element as overlay so text stays readable */
/* Unified background for the whole disclaimer modal: decorative image + overlay via pseudo-elements */
.modal-content.disclaimer {
  position: relative;
  background-color: rgba(20,20,20,0.9); /* fallback */
  /* keep scrollable area for long disclaimers */
  max-width: 800px;
  max-height: 70vh;
  overflow: auto;
  text-align: left;
}

/* Background image layer */
/* Move background to the scrollable content so it covers the full disclaimer text height */
.modal-content.disclaimer::before,
.modal-content.disclaimer::after {
  /* clear previous decorations (kept for compatibility) */
  content: none;
}

/* Apply background to the inner scrollable content so it covers everything and scrolls with it */
.modal-content.disclaimer .disclaimer-text {
  position: relative;
  z-index: 2; /* content above background/overlay */
}
.modal-content.disclaimer .disclaimer-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('src/disclaimer/background.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: 0; /* behind content */
}
.modal-content.disclaimer .disclaimer-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10,10,10,0.45), rgba(10,10,10,0.75));
  z-index: 1; /* between background and content */
  pointer-events: none;
}

/* Ensure all textual elements are above overlay and readable */
.modal-content.disclaimer .disclaimer-text,
.modal-content.disclaimer .disclaimer-text p,
.modal-content.disclaimer .disclaimer-text li,
.modal-content.disclaimer .disclaimer-text dd,
.modal-content.disclaimer .disclaimer-text dt {
  color: #e6e6e6;
  position: relative;
  z-index: 2;
}

/* Prevent text selection inside disclaimer modal (basic protection) */
.modal-content.disclaimer .disclaimer-text,
.modal-content.disclaimer .disclaimer-text * {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none;
}

/* Style h4 headings inside disclaimer modal: orange, bold, uppercase, highlighted */
.modal-content.disclaimer h4 {
  color: #ff8c00; /* orange */
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 0.6rem 0;
  padding: 0.35rem 0.6rem;
  background: rgba(255,140,0,0.06); /* subtle highlight */
  border-left: 4px solid rgba(255,140,0,0.18);
  letter-spacing: 0.06em;
  font-family: 'LeonovSP', 'Renju', Arial, sans-serif;
  position: relative;
  z-index: 3; /* make sure headings sit above background and overlay */
}

.install-consent { margin: 0.6rem 0; color: #e6e6e6; }
.install-consent input { margin-right: 0.5rem; }

/* Footnote style used for small disclaimer lines */
.footnote {
  margin-top: 0.6rem;
  color: #cfcfcf;
  font-size: 0.85rem;
  opacity: 0.9;
}
.footnote a { color: #ffd27a; text-decoration: underline; }
.footnote small { font-size: 0.85rem; color: inherit; }

/* Accordion (composition) styles */
.accordion { margin-top: 1rem; }
.accordion-item { background: #2b2b2b; border-radius: 8px; margin: 0.6rem 0; overflow: hidden; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; cursor: pointer; user-select: none;
}
.accordion-header .title { font-weight: 700; color: #ffd88c; }
.accordion-header .toggle { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; color:#ffd88c; font-weight:700; }
.accordion-content { padding: 0 1rem 1rem 1rem; display: none; }
.accordion-item.open .accordion-content { display: block; }
.accordion-item.open .accordion-header { background: linear-gradient(0deg, rgba(255,140,0,0.03), transparent); }

/* Carousel for block screenshots (lazy-loaded) */
.block-carousel { position: relative; margin: 0.8rem 0; overflow: hidden; }
.block-carousel .carousel-track { display: flex; gap: 0; will-change: transform; transition: transform 320ms ease; }
.block-carousel .carousel-track img { width: 100%; height: auto; flex: 0 0 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; cursor: pointer; }
.block-carousel .carousel-slide { position: relative; flex: 0 0 100%; }
.block-carousel .carousel-slide img { display: block; width: 100%; height: auto; border-radius: 6px; }
.carousel-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  font-size: 14px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  pointer-events: none;
  /* thin black outline via text-shadow for compatibility */
  text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 0 rgba(0,0,0,0.6);
}
.carousel-empty {
  padding: 1rem; text-align: center; color: #ffd88c; background: rgba(0,0,0,0.5); border-radius: 6px; margin: 0.6rem 0;
}

/* Spinner and retry button inside carousel */
.carousel-loading { display:flex; align-items:center; justify-content:center; padding:1rem; }
.carousel-loading .spinner { width:32px; height:32px; border:4px solid rgba(255,255,255,0.12); border-top-color: #ffd88c; border-radius:50%; animation: spin 1s linear infinite; margin-right:10px; }
.carousel-retry { display:inline-block; margin-left:8px; padding:6px 10px; background: rgba(255,255,255,0.06); color:#ffd88c; border-radius:6px; border:1px solid rgba(255,255,255,0.04); cursor:pointer; }
@keyframes spin { to { transform: rotate(360deg); } }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 44px; height:44px; border-radius: 6px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index: 200; }
.carousel-btn.left { left: 8px; }
.carousel-btn.right { right: 8px; }

/* Fullscreen image viewer */
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 12000; }
.viewer.open { display: flex; }
.viewer img { max-width: 96%; max-height: 92%; border-radius: 6px; }
.viewer .close { position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,0.06); color:#ffd88c; border-radius: 6px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }

/* small screens: reduce paddings for accordion items */
@media (max-width: 560px) {
  .accordion-header { padding: 0.6rem 0.6rem; }
  .accordion-content { padding: 0 0.6rem 0.8rem; }
  .carousel-btn { width: 36px; height: 36px; }
}

/* Carousel progress dots */
.carousel-dots { display:flex; gap:10px; justify-content:center; margin-top:10px; z-index: 210; }
/* Retro 60s style dots: use a small circular pseudo-element for crisp visuals
   while keeping the button itself a larger hit target for accessibility. */
.carousel-dot {
  /* Keep a comfortable tappable area while the visible dot is smaller */
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}
.carousel-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2b2b2b;
  border: 2px solid rgba(255,210,120,0.08);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  display: block;
}
.carousel-dot.active::before {
  background: linear-gradient(180deg, #ffd88c, #ffb74d);
  transform: scale(1.22);
  box-shadow: 0 2px 8px rgba(0,0,0,0.36);
  border-color: rgba(255,200,90,0.95);
}

/* keyboard focus visible ring */
.carousel-dot:focus {
  outline: none;
}
.carousel-dot:focus::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(255,208,120,0.16);
}

/* Slightly smaller tappable area on very small screens */
@media (max-width: 420px) {
  .carousel-dot { width: 24px; height: 24px; }
  .carousel-dot::before { width: 10px; height: 10px; }
}

/* Improve drag cursor and prevent image selection while dragging */
.block-carousel.dragging { cursor: grabbing; }
.block-carousel img { -webkit-user-drag: none; user-select: none; }

/* Hide dots for blueprint carousels (they use many images and don't need dots) */
.block-carousel[data-src*="blueprints"] .carousel-dots { display: none !important; }

/* Reusable video window styles */
.video-window { width: 100%; max-width: 100%; margin: 0 auto 12px; background: #000; color: #fff; border-radius: 6px; overflow: hidden; }
.video-window .video-controls { display: flex; gap: 8px; padding: 8px; background: rgba(0,0,0,0.6); align-items: center; }
.video-window .video-source { background: rgba(255,255,255,0.04); color: #ffd88c; border: 1px solid rgba(255,255,255,0.04); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.video-window .video-source.active { background: linear-gradient(180deg,#2b2b2b,#1f1f1f); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.video-window .video-holder { width: 100%; background: #000; position: relative; /* for fallback */ }
/* Use modern aspect-ratio when available, with a padding-top fallback for older browsers */
.video-window .video-holder::before { content: ''; display: block; padding-top: 56.25%; }
.video-window iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-window iframe[style] { position: absolute; }
@supports (aspect-ratio: 16/9) {
  .video-window .video-holder::before { display: none; }
  .video-window .video-holder { padding-top: 0; }
  .video-window iframe { position: static; aspect-ratio: 16/9; height: auto; }
}

.video-backup { padding: 8px; background: rgba(0,0,0,0.6); text-align: right; }
.video-backup a { color: #ffd88c; text-decoration: underline; }

/* Spoiler summary styling: rotate triangle when open and provide hover/focus highlight */
.spoiler-summary { display: block; transition: background 160ms ease, transform 140ms ease; }
.spoiler-summary:hover, .spoiler-summary:focus { filter: brightness(1.05); }
details.spoiler-block[open] .spoiler-summary { background: rgba(255,255,255,0.04); }
/* rotate the small triangle marker when details is open */
.spoiler-summary::before { content: '▸'; display:inline-block; margin-right:0.5rem; transition: transform 160ms ease; }
details[open] .spoiler-summary::before { transform: rotate(90deg); }