/* Homepage density pass.
   This file loads after the shared structural and illustrated themes so the
   compact desktop composition is explicit and does not alter other pages. */

html {
  overflow-x: clip;
}

.lexi-backdrop[data-backdrop-layout="home"] > main::before {
  max-height: calc(100% - 70px);
}

.lexi-backdrop[data-backdrop-layout="home"] .yugioh-card-of-day {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.96) 0 42%, rgba(248, 232, 196, 0.7) 64%, rgba(210, 216, 251, 0.35) 100%),
    url("backdrop/illustrated/petals-sparkles-v3.webp") center / cover no-repeat;
}

.lexi-backdrop[data-backdrop-layout="home"] .yugioh-daily-card-frame {
  display: block;
  aspect-ratio: 451 / 661;
  text-decoration: none;
}

@media (min-width: 1100px) {
  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header {
    width: min(1420px, calc(100% - 32px));
    margin-top: 0;
    padding: 8px 22px;
    gap: 6px 14px;
    border-radius: 22px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header::before {
    border-radius: 17px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .brand {
    padding: 4px 8px 4px 4px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .visit-counter {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 0.78rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .nav-links {
    gap: 3px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .nav-links a,
  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .style-picker {
    min-height: 34px;
    padding: 6px 10px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .style-picker select {
    min-height: 26px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .artifact-shortcuts {
    gap: 6px;
    padding: 5px 0 1px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .artifact-shortcuts a {
    min-height: 30px;
    padding: 5px 11px;
    font-size: 0.76rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.98fr);
    gap: clamp(24px, 2vw, 34px);
    min-height: 0;
    margin: 14px auto 16px;
    padding: 22px clamp(30px, 2.6vw, 42px);
    align-items: center;
    border-radius: 30px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy {
    max-width: none;
    padding: 22px 24px;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(132, 150, 212, 0.16), 0 10px 28px rgba(73, 84, 147, 0.1);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy h1 {
    max-width: 620px;
    margin-bottom: 12px;
    font-size: clamp(2.7rem, 3.15vw, 3.45rem);
    line-height: 1;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy .lede {
    font-size: 0.94rem;
    line-height: 1.4;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-actions {
    gap: 7px;
    margin-top: 14px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-actions .button,
  .lexi-backdrop[data-backdrop-layout="home"] .live-actions .button,
  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card .button {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.86rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel {
    gap: 9px;
    padding: 15px;
    border-radius: 22px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel::after {
    right: -24px;
    bottom: -26px;
    width: 98px;
    height: 96px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-twitch {
    border-radius: 16px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .live-actions {
    gap: 6px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip {
    grid-template-columns: repeat(2, minmax(0, 1.15fr)) minmax(240px, 0.75fr);
    grid-template-rows: auto;
    gap: 16px;
    padding: 0 0 14px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card {
    min-height: 210px;
    padding: 18px 20px;
    border-radius: 22px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .card-of-day,
  .lexi-backdrop[data-backdrop-layout="home"] .random-game-card,
  .lexi-backdrop[data-backdrop-layout="home"] .sealed-artifact-card {
    grid-column: auto;
    grid-row: auto;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .card-of-day {
    grid-template-columns: minmax(0, 1fr) minmax(94px, 116px);
    gap: 16px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .daily-card-frame {
    max-width: 116px;
    justify-self: end;
    border-radius: 13px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-sigil {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card .eyebrow {
    margin-bottom: 6px;
    padding: 4px 9px;
    font-size: 0.68rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card h2 {
    margin: 2px 0 6px;
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card p:not(.eyebrow) {
    margin-bottom: 7px;
    font-size: 0.9rem;
    line-height: 1.34;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0 0 14px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child {
    grid-column: auto;
    min-height: 150px;
    padding: 20px;
    border-radius: 22px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card h2 {
    margin: 6px 0 7px;
    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-icon {
    width: 30px;
    height: 30px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .site-footer {
    min-height: 0;
    padding: 8px 0 16px;
  }
}

@media (min-width: 1100px) and (max-height: 900px) {
  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header {
    padding: 6px 18px;
    gap: 4px 12px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-header .artifact-shortcuts {
    padding-top: 2px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero {
    grid-template-columns: minmax(0, 1fr) 520px;
    margin-top: 10px;
    margin-bottom: 12px;
    padding-block: 15px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy {
    padding: 16px 19px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy h1 {
    font-size: clamp(2.45rem, 3vw, 3.2rem);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel {
    padding: 10px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card {
    min-height: 176px;
    padding: 13px 16px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .daily-card-frame {
    max-width: 96px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip,
  .lexi-backdrop[data-backdrop-layout="home"] .content-grid {
    padding-bottom: 10px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child {
    min-height: 120px;
    padding: 14px 17px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card h2 {
    margin: 3px 0 5px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .site-footer {
    padding: 5px 0 10px;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .lexi-backdrop[data-backdrop-layout="home"] .hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
    gap: 20px;
    min-height: 0;
    margin: 14px auto 16px;
    padding: 18px 24px;
    align-items: center;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy {
    max-width: none;
    padding: 18px 20px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy h1 {
    margin-bottom: 10px;
    font-size: clamp(2.35rem, 4vw, 2.9rem);
    line-height: 1.02;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy .lede {
    font-size: 0.9rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-actions {
    gap: 6px;
    margin-top: 12px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-actions .button,
  .lexi-backdrop[data-backdrop-layout="home"] .live-actions .button,
  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card .button {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.82rem;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel {
    gap: 8px;
    padding: 11px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
    padding-bottom: 12px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card {
    grid-column: auto;
    grid-row: auto;
    min-height: 184px;
    padding: 14px 16px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .random-game-card {
    grid-column: 1 / -1;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .card-of-day {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 12px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .daily-card-frame {
    max-width: 92px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 12px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .feature-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child {
    grid-column: auto;
    min-height: 132px;
    padding: 16px;
  }

  .lexi-backdrop[data-backdrop-layout="home"] .site-footer {
    padding: 7px 0 14px;
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip {
    grid-template-columns: repeat(2, minmax(0, 1.12fr)) minmax(220px, 0.76fr);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .random-game-card {
    grid-column: auto;
  }
}