:root {
  --ell-window: #1f1f22;
  --ell-border: rgba(255, 255, 255, 0.12);
  --ell-text: #f5f5f7;
  --ell-muted: #b9b9c0;

  /* Modal/window geometry. Keep this for intro cover, intro player, and tour home size. */
  --ell-video-ar: 2.15278; /* 31 / 14.4 */

  /* Gameplay videos shown inside tour cards and tour slides only. */
  --ell-tour-video-ar: 3 / 1;

  --ell-screen-fill: 90;
  --ell-toolbar-h: 58px;

  --ell-radius: clamp(18px, 2.2vw, 30px);
  --ell-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

/* =======================================================
   BASE MODAL SHELL
======================================================= */

.ell-info-open-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background: #111827;
  cursor: pointer;
}

.ell-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ell-info-overlay.is-open {
  display: flex;
}

/* One geometry for intro, video, and tour.
   This guarantees that the video transforms into the tour home without jumping. */
.ell-info-window {
  position: relative;
  width: min(
    calc(var(--ell-screen-fill) * 1vw),
    calc(var(--ell-screen-fill) * 1dvh * var(--ell-video-ar))
  );
  height: min(
    calc(var(--ell-screen-fill) * 1dvh),
    calc((var(--ell-screen-fill) * 1vw) / var(--ell-video-ar))
  );

  min-width: 0;
  min-height: 0;
  max-width: calc(var(--ell-screen-fill) * 1vw);
  max-height: calc(var(--ell-screen-fill) * 1dvh);

  resize: none;
  overflow: hidden;

  border-radius: var(--ell-radius);
  border: 1px solid rgba(210, 235, 255, 0.16);
  background: var(--ell-window);
  color: var(--ell-text);
  box-shadow: var(--ell-shadow);
}

/* =======================================================
   TOOLBAR
   Hidden in intro/video modes. Visible in tour modes.
======================================================= */

.ell-info-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  height: var(--ell-toolbar-h);
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(32, 32, 35, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ell-info-window.is-intro-cover .ell-info-toolbar,
.ell-info-window.is-intro-player .ell-info-toolbar {
  display: none !important;
}

.ell-window-controls {
  display: flex;
  gap: 9px;
  align-items: center;
}

.ell-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
  border: 0;
}

.ell-dot-red {
  background: #ff5f57;
  cursor: pointer;
}

.ell-dot-yellow {
  background: #ffbd2e;
}

.ell-dot-green {
  background: #28c840;
}

.ell-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ell-toolbar-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--ell-text);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.ell-toolbar-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ell-home-btn {
  font-size: 1.1rem;
}

.ell-toolbar-title {
  min-width: 0;
  font-weight: 800;
  line-height: 1.1;
}

.ell-toolbar-title small {
  display: block;
  margin-top: 3px;
  color: var(--ell-muted);
  font-weight: 500;
}

.ell-toolbar-right {
  display: flex;
  justify-content: flex-end;
}

.ell-search-placeholder {
  width: 230px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: #9d9da5;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
}

/* =======================================================
   1. INTRO COVER
   blue.mp4 is wallpaper. Cropping is allowed.
======================================================= */

.ell-info-window.is-intro-cover,
.ell-info-window.is-intro-player {
  display: block;
  background: #020817;
}

.ell-info-window.is-intro-cover .ell-info-content,
.ell-info-window.is-intro-player .ell-info-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.ell-intro-cover-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020817;
}

.ell-intro-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #020817;
}

.ell-intro-blue-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(120, 210, 255, 0.06),
      rgba(0, 10, 26, 0.16) 55%,
      rgba(0, 6, 18, 0.36)
    ),
    linear-gradient(
      to bottom,
      rgba(40, 130, 220, 0.04),
      rgba(0, 0, 0, 0.14)
    );
}

.ell-intro-skeleton-play {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: clamp(112px, 13vw, 176px);
  height: clamp(112px, 13vw, 176px);
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0.9;
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.ell-intro-skeleton-play:hover {
  transform: translate(-50%, -50%) scale(1.045);
  opacity: 1;
  filter: drop-shadow(0 0 30px rgba(145, 220, 255, 0.46));
}

.ell-intro-skeleton-play svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ell-intro-skeleton-play circle,
.ell-intro-skeleton-play path {
  fill: none;
  stroke: rgba(180, 235, 255, 0.9);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ell-intro-skeleton-play path {
  fill: rgba(180, 235, 255, 0.1);
}

.ell-intro-cover-copy {
  display: none;
}

/* =======================================================
   2. VIDEO PLAYER
   No navbar. No bottom caption. No crop. No skew.
======================================================= */

.ell-intro-player-screen,
.ell-intro-player-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: #000;
}

.ell-intro-main-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #000;
  border-radius: var(--ell-radius);
}

.ell-intro-player-caption {
  display: none !important;
}

/* Floating video tools */
.ell-video-float-tools {
  position: absolute;
  z-index: 20;
  top: 8px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.72;
  transition: opacity 160ms ease;
}

.ell-video-float-tools:hover {
  opacity: 1;
}

.ell-video-float-left {
  left: 14px;
}

.ell-video-float-right {
  right: 14px;
}

.ell-video-tool-btn {
  width: 32px;
  height: 84px;
  border-radius: 16px;
  border: 1px solid rgba(216, 216, 216, 0.32);
  background: rgba(216, 216, 216, 0.14);
  color: #d8d8d8;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ell-video-tool-btn:hover {
  color: #ffffff;
  background: rgba(216, 216, 216, 0.24);
  border-color: rgba(255, 255, 255, 0.48);
}

.ell-video-next-btn {
  width: 44px;
  height: 44px;
  font-size: 38px;
}

/* =======================================================
   3. TOUR HOME + TOUR SLIDES
   Same outer size/position as video mode. Toolbar included.
   Content scrolls. No clipping and no single-column mode.
======================================================= */

.ell-info-window.is-tour-home,
.ell-info-window.is-tour-slide {
  display: grid;
  grid-template-rows: var(--ell-toolbar-h) minmax(0, 1fr);
  background: var(--ell-window);
}

.ell-info-window.is-tour-home .ell-info-content,
.ell-info-window.is-tour-slide .ell-info-content {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ell-window);
}

.ell-info-window.is-tour-home .ell-info-toolbar,
.ell-info-window.is-tour-slide .ell-info-toolbar {
  display: grid !important;
}

/* Home screen */
.ell-home-screen {
  height: auto;
  min-height: 100%;
  overflow: visible;
  box-sizing: border-box;
  padding: clamp(18px, 3vmin, 42px);
}

.ell-home-hero {
  text-align: center;
  margin-bottom: clamp(18px, 2.8vmin, 34px);
}

.ell-home-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.2vmin, 3.7rem);
  letter-spacing: -0.05em;
}

.ell-home-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ell-muted);
  font-size: clamp(0.98rem, 1.5vmin, 1.25rem);
  line-height: 1.45;
}

.ell-card-grid {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: clamp(12px, 1.8vmin, 22px);
}

.ell-home-card {
  position: relative;
  text-align: left;
  border: 0;
  color: var(--ell-text);
  background: transparent;
  cursor: pointer;
  border-radius: 22px;
  outline: none;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.ell-card-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ell-tour-video-ar);
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--ell-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.ell-card-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.03) 34%,
      rgba(255, 255, 255, 0) 58%
    );
  opacity: 0;
  transition: opacity 220ms ease;
}

.ell-home-card:hover,
.ell-home-card:focus-visible {
  transform: translateY(-5px);
  filter: saturate(1.08);
}

.ell-home-card:hover .ell-card-video-wrap,
.ell-home-card:focus-visible .ell-card-video-wrap {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 28px rgba(96, 165, 250, 0.22);
}

.ell-home-card:hover .ell-card-video-wrap::after,
.ell-home-card:focus-visible .ell-card-video-wrap::after {
  opacity: 1;
}

.ell-card-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #111;
}

/* Tour slide screen */
.ell-slide-screen {
  height: auto;
  min-height: 100%;
  display: block;
  overflow: visible;
  background: #1e1e21;
}

.ell-slide-media {
  min-height: 0;
  padding: clamp(14px, 2.2vmin, 24px) clamp(14px, 2.2vmin, 24px) 0;
}

.ell-slide-media-frame {
  width: 100%;
  aspect-ratio: var(--ell-tour-video-ar);
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #050505;
  border: 1px solid var(--ell-border);
}

.ell-slide-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #050505;
}

.ell-slide-caption {
  position: relative;
  padding: clamp(18px, 3vmin, 34px) clamp(22px, 6vmin, 90px);
  background: #242426;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ell-slide-caption h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2vmin, 2rem);
  letter-spacing: -0.02em;
}

.ell-slide-caption p {
  max-width: 920px;
  margin: 0;
  color: gray;
  font-size: clamp(0.98rem, 1.3vmin, 1.2rem);
  line-height: 1.55;
}

.ell-slide-actions {
  position: static;
  transform: none;
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.ell-big-arrow {
  width: 48px;
  height: 58px;
  border-radius: 14px;
  border: 0;
  color: white;
  background: rgba(255, 255, 255, 0.06);
  font-size: 2.2rem;
  cursor: pointer;
}

/* =======================================================
   RESPONSIVE RULES
======================================================= */

/* Low-AR or narrow screens: keep 2 columns. Never drop to 1 column. */
@media (max-aspect-ratio: 1.35/1), (max-width: 1050px) {
  .ell-card-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .ell-search-placeholder {
    display: none;
  }
}

@media (max-width: 680px) {
  :root {
    --ell-screen-fill: 92;
    --ell-toolbar-h: 54px;
    --ell-radius: 22px;
  }

  .ell-info-toolbar {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
    padding: 0 12px;
  }

  .ell-toolbar-right {
    display: none;
  }

  .ell-window-controls .ell-dot-yellow,
  .ell-window-controls .ell-dot-green {
    display: none;
  }

  .ell-toolbar-btn {
    width: 32px;
    height: 32px;
  }

  .ell-video-float-tools {
    top: 10px;
  }

  .ell-video-float-left {
    left: 16px;
  }

  .ell-video-float-right {
    right: 12px;
  }

  .ell-video-tool-btn {
    width: 32px;
    height: 32px;
    font-size: 28px;
  }

  .ell-video-next-btn {
    width: 40px;
    height: 40px;
    font-size: 34px;
  }

  .ell-home-screen {
    padding: 22px 16px 28px;
  }

  .ell-card-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 16px;
  }

  .ell-slide-media {
    padding: 14px 14px 0;
  }

  .ell-slide-media-frame {
    border-radius: 18px;
  }

  .ell-slide-caption {
    padding: 20px 20px 28px;
  }

  .ell-big-arrow {
    width: 44px;
    height: 48px;
    font-size: 2rem;
  }

}

/* =======================================================
   TOUR MODAL FONT
   Force Poppins throughout tour home and tour slides.
======================================================= */

.ell-info-window.is-tour-home,
.ell-info-window.is-tour-home *,
.ell-info-window.is-tour-slide,
.ell-info-window.is-tour-slide * {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Hide native browser video controls in the tour modal */
.ell-info-window video::-webkit-media-controls {
  display: none !important;
}

.ell-info-window video::-webkit-media-controls-panel {
  display: none !important;
}

.ell-info-window video {
  -webkit-media-controls: none !important;
}