/* Celestial Lexi structural design system
   Derived from the saved character-free reference study. Decorative art stays in
   lexi-backdrop.css; this file supplies reusable rails, shells and bento modules. */

body.lexi-backdrop {
  --lx-ui-line: #8174b5;
  --lx-ui-line-soft: rgba(129, 116, 181, 0.3);
  --lx-surface: rgba(255, 255, 255, 0.94);
  --lx-surface-solid: #fff;
  --lx-surface-alt: rgba(247, 240, 251, 0.95);
  --lx-band: rgba(181, 231, 239, 0.34);
  --lx-heading: #332e42;
  --lx-action: #6559a0;
  --lx-shadow-ink: rgba(74, 58, 108, 0.14);
  --lx-card-shadow: 0 14px 36px var(--lx-shadow-ink);
  --lx-shell-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 0 0 7px var(--lx-ui-line-soft), 0 28px 70px var(--lx-shadow-ink);
  --lx-radius-xl: 30px;
  --lx-radius-lg: 24px;
  --lx-radius-md: 16px;
  --text: #332e42;
  --ink: #5d538a;
  --muted: #6c6578;
  --paper: #fffdfd;
  --paper-2: #f7effa;
  --sky: #d9f3f8;
  --sakura: #eebbd2;
  --momo: #f7dae7;
  --lavender: #dcd0ef;
  --lemon: #f4e4b8;
  --matcha: #d5eadf;
  color: var(--lx-heading);
  font-family: "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, sans-serif;
  background:
    linear-gradient(rgba(119, 109, 163, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 109, 163, 0.035) 1px, transparent 1px),
    radial-gradient(circle at -7% 12%, var(--lx-glow-a) 0 8%, transparent 31%),
    radial-gradient(circle at 106% 26%, var(--lx-glow-b) 0 7%, transparent 29%),
    radial-gradient(ellipse at 80% 102%, var(--lx-glow-c) 0 8%, transparent 36%),
    linear-gradient(155deg, var(--lx-canvas-top) 0%, var(--lx-canvas-middle) 48%, var(--lx-canvas-bottom) 100%);
  background-size: 44px 44px, 44px 44px, auto, auto, auto, auto;
}

body.lexi-backdrop[data-style="moonlit-azure"] {
  --lx-ui-line: #668ec5;
  --lx-ui-line-soft: rgba(80, 124, 181, 0.28);
  --lx-surface-alt: rgba(232, 245, 252, 0.95);
  --lx-band: rgba(137, 211, 231, 0.34);
  --lx-action: #496f9e;
  --lx-shadow-ink: rgba(52, 91, 132, 0.14);
}

body.lexi-backdrop[data-style="midnight-aurora"] {
  --lx-ui-line: #7788c5;
  --lx-ui-line-soft: rgba(119, 136, 197, 0.3);
  --lx-surface-alt: rgba(234, 234, 249, 0.96);
  --lx-band: rgba(121, 206, 222, 0.3);
  --lx-action: #554b91;
  --lx-shadow-ink: rgba(7, 14, 42, 0.24);
}

/* Shared utility rail */
.lexi-backdrop .site-header {
  top: 10px;
  width: min(1440px, calc(100% - 24px));
  margin: 10px auto 0;
  padding: 12px clamp(14px, 2.5vw, 32px);
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px var(--lx-shadow-ink);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.lexi-backdrop .brand {
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--lx-ui-line-soft);
  color: var(--lx-heading);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  transform: none;
}

.lexi-backdrop .brand::after,
.lexi-backdrop .eyebrow::after { content: none; }

.lexi-backdrop .brand span:last-child {
  color: var(--lx-heading);
  text-shadow: none;
}

.lexi-backdrop .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 12px;
  color: var(--lx-heading);
  background: linear-gradient(145deg, white, var(--lx-surface-alt));
  box-shadow: none;
  transform: none;
}

.lexi-backdrop .nav-links a,
.lexi-backdrop .artifact-shortcuts a {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.lexi-backdrop .nav-links a:hover,
.lexi-backdrop .nav-links a[aria-current="page"],
.lexi-backdrop .artifact-shortcuts a:hover {
  border-color: var(--lx-ui-line-soft);
  color: var(--lx-heading);
  background: var(--lx-surface-alt);
  transform: translateY(-1px);
}

.lexi-backdrop .artifact-shortcuts { border-top-color: var(--lx-ui-line-soft); }
.lexi-backdrop .artifact-shortcuts a:nth-of-type(n) { border-color: var(--lx-ui-line-soft); background: rgba(255, 255, 255, 0.52); }
.lexi-backdrop .shortcut-label { color: var(--muted); }

.lexi-backdrop .visit-counter {
  border: 1px solid var(--lx-ui-line-soft);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  transform: none;
}

.lexi-backdrop .visit-counter strong { color: #905c91; }
.lexi-backdrop .style-picker { border-color: var(--lx-ui-line-soft); background: rgba(255, 255, 255, 0.72); box-shadow: none; }
.lexi-backdrop .style-picker select { color: var(--lx-heading); background: rgba(255, 255, 255, 0.9); }

/* Shared type and controls */
.lexi-backdrop h1,
.lexi-backdrop h2,
.lexi-backdrop h3 {
  color: var(--lx-heading);
  letter-spacing: -0.025em;
  text-shadow: none;
}

.lexi-backdrop p,
.lexi-backdrop .lede,
.lexi-backdrop .games-lede { color: var(--muted); }

.lexi-backdrop .eyebrow {
  padding: 6px 11px;
  border: 1px solid var(--lx-action);
  border-radius: 999px;
  color: white;
  background: var(--lx-action);
  box-shadow: none;
  letter-spacing: 0.08em;
}

.lexi-backdrop .button {
  border: 1px solid var(--lx-ui-line);
  border-radius: 999px;
  color: var(--lx-heading);
  box-shadow: none;
  transform: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.lexi-backdrop .button.primary { border-color: var(--lx-action); color: white; background: var(--lx-action); }
.lexi-backdrop .button.secondary { color: var(--lx-heading); background: rgba(255, 255, 255, 0.84); }
.lexi-backdrop .button:hover { box-shadow: 0 10px 22px var(--lx-shadow-ink); transform: translateY(-2px); }
.lexi-backdrop .button:active { box-shadow: none; transform: translateY(0); }
.lexi-backdrop :focus-visible { outline: 3px solid #4e407f; outline-offset: 3px; }

/* Home: large editorial shell and asymmetric bento rows. */
.lexi-backdrop[data-backdrop-layout="home"] .hero,
.lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip,
.lexi-backdrop[data-backdrop-layout="home"] .content-grid,
.lexi-backdrop[data-backdrop-layout="home"] .site-footer {
  width: min(1360px, calc(100% - 40px));
}

.lexi-backdrop[data-backdrop-layout="home"] .hero {
  grid-template-columns: minmax(0, 6fr) minmax(420px, 6fr);
  gap: clamp(28px, 4vw, 64px);
  min-height: clamp(540px, 64vh, 680px);
  margin: 32px auto 44px;
  padding: clamp(34px, 5vw, 72px);
  overflow: visible;
  border: 2px solid var(--lx-ui-line);
  border-radius: var(--lx-radius-xl);
  background:
    linear-gradient(164deg, transparent 0 61%, var(--lx-band) 61% 72%, transparent 72%),
    linear-gradient(105deg, var(--lx-surface) 0 55%, var(--lx-surface-alt) 55%);
  box-shadow: var(--lx-shell-shadow);
}

.lexi-backdrop[data-backdrop-layout="home"] .hero::after {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 8%;
  z-index: 0;
  width: min(340px, 31%);
  height: 42px;
  border-top: 2px solid var(--lx-ui-line-soft);
  border-bottom: 1px solid var(--lx-ui-line-soft);
  transform: rotate(-6deg);
  pointer-events: none;
}

.lexi-backdrop[data-backdrop-layout="home"] .hero-copy { max-width: 680px; }
.lexi-backdrop[data-backdrop-layout="home"] .hero-copy h1 { font-size: clamp(2.4rem, 4.2vw, 4.15rem); line-height: 1.03; }

.lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel {
  min-width: 0;
  gap: 14px;
  padding: clamp(17px, 2vw, 22px);
  overflow: visible;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: var(--lx-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--lx-card-shadow);
  transform: none;
}

.lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel::before {
  content: "";
  position: absolute;
  top: -24px;
  right: -18px;
  z-index: -1;
  width: 176px;
  height: 92px;
  background: linear-gradient(135deg, var(--lx-surface-alt), var(--lx-band));
  clip-path: polygon(24% 0, 100% 12%, 78% 100%, 0 78%);
  opacity: 0.82;
  pointer-events: none;
}

.lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel::after { content: none; }
.lexi-backdrop[data-backdrop-layout="home"] .hero-twitch { overflow: hidden; border: 1px solid var(--lx-ui-line-soft); border-radius: 18px; box-shadow: none; }

.lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  grid-template-rows: repeat(2, minmax(160px, auto));
  gap: 20px;
  padding: 0 0 34px;
}

.lexi-backdrop[data-backdrop-layout="home"] .oracle-card,
.lexi-backdrop[data-backdrop-layout="home"] .feature-card {
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 2.5vw, 32px);
  overflow: hidden;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: var(--lx-radius-lg);
  background: var(--lx-surface);
  box-shadow: var(--lx-card-shadow);
  transform: none;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

.lexi-backdrop[data-backdrop-layout="home"] .oracle-card:hover,
.lexi-backdrop[data-backdrop-layout="home"] .feature-card:hover { box-shadow: 0 18px 42px var(--lx-shadow-ink); transform: translateY(-3px); }

.lexi-backdrop[data-backdrop-layout="home"] .card-of-day {
  grid-row: 1 / span 2;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
  gap: 24px;
  background: linear-gradient(156deg, transparent 0 68%, var(--lx-band) 68% 100%), var(--lx-surface);
}

.lexi-backdrop[data-backdrop-layout="home"] .random-game-card,
.lexi-backdrop[data-backdrop-layout="home"] .sealed-artifact-card { grid-column: 2; }
.lexi-backdrop[data-backdrop-layout="home"] .daily-card-frame { width: 100%; max-width: 190px; border: 1px solid var(--lx-ui-line-soft); border-radius: 18px; box-shadow: none; }
.lexi-backdrop[data-backdrop-layout="home"] .oracle-sigil { border: 1px solid var(--lx-ui-line-soft); border-radius: 12px; box-shadow: none; transform: none; }

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

.lexi-backdrop[data-backdrop-layout="home"] .feature-card { grid-column: span 3; min-height: 210px; }
.lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child { grid-column: span 6; background: linear-gradient(158deg, transparent 0 70%, rgba(238, 187, 210, 0.42) 70% 100%), var(--lx-surface); }
.lexi-backdrop[data-backdrop-layout="home"] .feature-icon { border: 1px solid var(--lx-ui-line-soft); border-radius: 12px; color: var(--lx-heading); background: rgba(255, 255, 255, 0.76); box-shadow: none; }

/* Schedule: the calendar remains a calm, opaque working surface. */
.lexi-backdrop.calendar-page .calendar-shell { width: min(1280px, calc(100% - 40px)); }

.lexi-backdrop.calendar-page .calendar-intro {
  margin: 30px 0 24px;
  padding: clamp(30px, 4vw, 50px);
  overflow: visible;
  border: 2px solid var(--lx-ui-line);
  border-radius: 28px;
  background:
    linear-gradient(165deg, transparent 0 62%, var(--lx-band) 62% 75%, transparent 75%),
    var(--lx-surface);
  box-shadow: var(--lx-shell-shadow);
}

.lexi-backdrop.calendar-page .calendar-intro::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: 19%;
  z-index: 0;
  width: min(260px, 28%);
  height: 34px;
  border-top: 2px solid var(--lx-ui-line-soft);
  border-bottom: 1px solid var(--lx-ui-line-soft);
  transform: rotate(-7deg);
  pointer-events: none;
}

.lexi-backdrop.calendar-page .calendar-intro h1 { max-width: 780px; margin-bottom: 20px; font-size: clamp(2.55rem, 5vw, 4.5rem); }

.lexi-backdrop.calendar-page .calendar-next {
  gap: 22px;
  margin: 0 0 28px;
  padding: 22px 28px;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 22px;
  background: var(--lx-surface);
  box-shadow: var(--lx-card-shadow);
}

.lexi-backdrop.calendar-page .calendar-next-mascot {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(225, 239, 255, 0.72), rgba(244, 226, 247, 0.5));
}

.lexi-backdrop.calendar-page .calendar-workspace {
  border: 1px solid var(--lx-ui-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--lx-shell-shadow);
}

.lexi-backdrop.calendar-page .calendar-workspace :focus-visible { outline-offset: -3px; }
.lexi-backdrop.calendar-page .calendar-toolbar { padding: 26px 26px 18px; }

.lexi-backdrop.calendar-page .calendar-icon-button,
.lexi-backdrop.calendar-page .calendar-small-button {
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 12px;
  background: white;
  box-shadow: 0 5px 12px rgba(74, 58, 108, 0.07);
}

.lexi-backdrop.calendar-page .calendar-view-switch {
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 999px;
  background: white;
  box-shadow: 0 5px 12px rgba(74, 58, 108, 0.07);
}

.lexi-backdrop.calendar-page .calendar-view-switch button { border-radius: 999px; }
.lexi-backdrop.calendar-page .calendar-view-switch button[aria-pressed="true"] { color: white; background: var(--lx-action); }
.lexi-backdrop.calendar-page .calendar-meta { padding-inline: 28px; }

.lexi-backdrop.calendar-page .calendar-meta select {
  max-width: 100%;
  min-height: 36px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 999px;
  color: var(--lx-heading);
  background: white;
}

.lexi-backdrop.calendar-page .calendar-confirmed span { border-color: var(--lx-ui-line); background: #8ed6d4; }
.lexi-backdrop.calendar-page .calendar-status { border-color: var(--lx-ui-line-soft); background: var(--lx-surface-alt); }

.lexi-backdrop.calendar-page .lexi-calendar-grid,
.lexi-backdrop.calendar-page .calendar-cell,
.lexi-backdrop.calendar-page .calendar-sticker-garden { border-color: rgba(93, 83, 138, 0.15); }

.lexi-backdrop.calendar-page .calendar-cell { transition: background 140ms ease, box-shadow 140ms ease; }
.lexi-backdrop.calendar-page .calendar-cell:hover { background: rgba(245, 237, 251, 0.76); }
.lexi-backdrop.calendar-page .calendar-cell[aria-pressed="true"] { background: rgba(248, 235, 246, 0.88); box-shadow: inset 0 0 0 2px #a674a8; }
.lexi-backdrop.calendar-page .calendar-cell-event { font-size: 0.72rem; }
.lexi-backdrop.calendar-page .calendar-cell-event-genre { font-size: 0.62rem; }
.lexi-backdrop.calendar-page .calendar-cell-event,
.lexi-backdrop.calendar-page .calendar-game-chip,
.lexi-backdrop.calendar-page .calendar-event-card,
.lexi-backdrop.calendar-page .calendar-day-block { border-radius: 10px; }
.lexi-backdrop.calendar-page .calendar-sticker-garden { background: linear-gradient(90deg, rgba(250, 245, 255, 0.96), rgba(245, 251, 255, 0.96)); }

/* Games: feature-first mosaic, followed by a stable library surface. */
.lexi-backdrop.lexi-games-page .games-shell { width: min(1280px, calc(100% - 40px)); }

.lexi-backdrop.lexi-games-page .games-intro {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: clamp(34px, 5vw, 70px);
  margin: 30px 0 34px;
  padding: clamp(34px, 5vw, 64px);
  overflow: visible;
  border: 2px solid var(--lx-ui-line);
  border-radius: var(--lx-radius-xl);
  background:
    linear-gradient(164deg, transparent 0 60%, var(--lx-band) 60% 73%, transparent 73%),
    linear-gradient(105deg, var(--lx-surface) 0 58%, var(--lx-surface-alt) 58%);
  box-shadow: var(--lx-shell-shadow);
}

.lexi-backdrop.lexi-games-page .games-intro::after {
  content: "";
  position: absolute;
  left: 6%;
  bottom: 10%;
  z-index: 0;
  width: min(310px, 30%);
  height: 38px;
  border-top: 2px solid var(--lx-ui-line-soft);
  border-bottom: 1px solid var(--lx-ui-line-soft);
  transform: rotate(-6deg);
  pointer-events: none;
}

.lexi-backdrop.lexi-games-page .games-intro h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }

.lexi-backdrop.lexi-games-page .games-shelf-note {
  overflow: hidden;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: var(--lx-radius-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--lx-card-shadow);
  transform: none;
}

.lexi-backdrop.lexi-games-page .games-shelf-note::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -28px;
  width: 120px;
  height: 82px;
  background: var(--lx-band);
  clip-path: polygon(24% 0, 100% 14%, 78% 100%, 0 78%);
  opacity: 0.7;
}

.lexi-backdrop.lexi-games-page .games-note-star { z-index: 1; color: var(--lx-action); }
.lexi-backdrop.lexi-games-page .games-status { border: 1px solid var(--lx-ui-line-soft); border-radius: var(--lx-radius-md); background: rgba(255, 255, 255, 0.9); }

.lexi-backdrop.lexi-games-page .games-tabs {
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(74, 58, 108, 0.07);
}

.lexi-backdrop.lexi-games-page .games-tabs button { border-radius: 999px; }
.lexi-backdrop.lexi-games-page .games-tabs button[aria-pressed="true"] { color: white; background: var(--lx-action); }

.lexi-backdrop.lexi-games-page .games-highlights {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.lexi-backdrop.lexi-games-page .games-highlight {
  grid-column: span 6;
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: var(--lx-radius-lg);
  background: var(--lx-surface-solid);
  box-shadow: var(--lx-card-shadow);
}

.lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:first-child { grid-column: span 7; grid-row: auto; }
.lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:nth-child(2) { grid-column: span 5; }
.lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:nth-child(3) { grid-column: span 12; }
.lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(4)) .games-highlight:nth-child(3),
.lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(4)) .games-highlight:nth-child(4) { grid-column: span 6; }
.lexi-backdrop.lexi-games-page .games-highlights .games-highlight:nth-child(n + 5) { grid-column: span 4; }
.lexi-backdrop.lexi-games-page .games-highlights .games-highlight:only-child { grid-column: 1 / -1; grid-row: auto; }
.lexi-backdrop.lexi-games-page .games-highlight-media { border-bottom: 1px solid var(--lx-ui-line-soft); }
.lexi-backdrop.lexi-games-page .games-highlight-media::before { opacity: 0.22; }

.lexi-backdrop.lexi-games-page .games-library {
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--lx-ui-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--lx-shell-shadow);
}

.lexi-backdrop.lexi-games-page .games-library-toolbar input,
.lexi-backdrop.lexi-games-page .games-library-toolbar select {
  border: 1px solid var(--lx-ui-line-soft);
  border-radius: 999px;
  color: var(--lx-heading);
  box-shadow: inset 0 1px 3px rgba(74, 58, 108, 0.05);
}

.lexi-backdrop.lexi-games-page .games-library-card {
  border: 1px solid var(--lx-ui-line-soft);
  border-top: 4px solid var(--genre-color, #dcd8e0);
  border-radius: 18px;
  padding: 19px;
  background: white;
  box-shadow: 0 8px 22px rgba(74, 58, 108, 0.08);
}

.lexi-backdrop.lexi-games-page .games-library-card.favorite { background: linear-gradient(145deg, #fffdf8, #fff6df); }
.lexi-backdrop .site-footer { border-top: 1px solid var(--lx-ui-line-soft); color: var(--muted); }

@media (max-width: 1060px) {
  .lexi-backdrop[data-backdrop-layout="home"] .hero { grid-template-columns: 1fr; min-height: 0; }

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

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

  .lexi-backdrop.lexi-games-page .games-intro { grid-template-columns: 1fr; }
  .lexi-backdrop.lexi-games-page .games-shelf-note { max-width: 620px; }
}

@media (max-width: 900px) {
  .lexi-backdrop[data-backdrop-layout="home"] .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child { grid-column: auto; }
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child { grid-column: 1 / -1; }

  .lexi-backdrop.lexi-games-page .games-highlights { grid-template-columns: 1fr; }
  .lexi-backdrop.lexi-games-page .games-highlight,
  .lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:first-child,
  .lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:nth-child(2),
  .lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(3)) .games-highlight:nth-child(3),
  .lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(4)) .games-highlight:nth-child(3),
  .lexi-backdrop.lexi-games-page .games-highlights:has(.games-highlight:nth-child(4)) .games-highlight:nth-child(4),
  .lexi-backdrop.lexi-games-page .games-highlights .games-highlight:nth-child(n + 5) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  body.lexi-backdrop { background-size: 36px 36px, 36px 36px, auto, auto, auto, auto; }

  .lexi-backdrop .site-header {
    position: relative;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-inline: 0;
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }

  .lexi-backdrop .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .lexi-backdrop .style-picker { flex-shrink: 0; }

  .lexi-backdrop[data-backdrop-layout="home"] .hero,
  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip,
  .lexi-backdrop[data-backdrop-layout="home"] .content-grid,
  .lexi-backdrop[data-backdrop-layout="home"] .site-footer,
  .lexi-backdrop.calendar-page .calendar-shell,
  .lexi-backdrop.lexi-games-page .games-shell {
    width: min(100% - 24px, 1360px);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero,
  .lexi-backdrop.calendar-page .calendar-intro,
  .lexi-backdrop.lexi-games-page .games-intro {
    margin-top: 22px;
    margin-bottom: 30px;
    padding: 28px 18px;
    border-radius: 24px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.76), 0 0 0 5px var(--lx-ui-line-soft), 0 18px 40px var(--lx-shadow-ink);
  }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-copy h1,
  .lexi-backdrop.calendar-page .calendar-intro h1,
  .lexi-backdrop.lexi-games-page .games-intro h1 { font-size: clamp(2.25rem, 12vw, 3.25rem); }

  .lexi-backdrop[data-backdrop-layout="home"] .hero::after,
  .lexi-backdrop.calendar-page .calendar-intro::after,
  .lexi-backdrop.lexi-games-page .games-intro::after { width: 42%; opacity: 0.66; }

  .lexi-backdrop[data-backdrop-layout="home"] .homepage-oracle-strip,
  .lexi-backdrop[data-backdrop-layout="home"] .content-grid { grid-template-columns: 1fr; }
  .lexi-backdrop[data-backdrop-layout="home"] .card-of-day { grid-template-columns: minmax(0, 1fr) minmax(86px, 118px); }
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card:first-child { grid-column: 1; min-height: 178px; }
  .lexi-backdrop[data-backdrop-layout="home"] .hero-live-panel { padding: 16px; border-radius: 18px; }

  .lexi-backdrop.calendar-page .calendar-next { flex-wrap: wrap; padding: 20px; border-radius: 18px; }
  .lexi-backdrop.calendar-page .calendar-next-copy { min-width: calc(100% - 104px); }
  .lexi-backdrop.calendar-page .calendar-next .button { width: 100%; }
  .lexi-backdrop.calendar-page .calendar-workspace,
  .lexi-backdrop.lexi-games-page .games-library { border-radius: 20px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72), 0 0 0 5px var(--lx-ui-line-soft), 0 16px 36px var(--lx-shadow-ink); }
  .lexi-backdrop.calendar-page .calendar-toolbar { padding-inline: 14px; }
  .lexi-backdrop.calendar-page .calendar-meta { padding-inline: 16px; }

  .lexi-backdrop.calendar-page #monthView {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--lx-ui-line-soft) transparent;
    scrollbar-width: thin;
  }

  .lexi-backdrop.calendar-page #monthView .calendar-weekdays,
  .lexi-backdrop.calendar-page #monthView .lexi-calendar-grid { min-width: 760px; }

  .lexi-backdrop.lexi-games-page .games-library { padding: 22px 16px; }
  .lexi-backdrop.lexi-games-page .games-tabs { width: 100%; }
  .lexi-backdrop.lexi-games-page .games-tabs button { flex: 1; }

  /* Keep a faint structural cue so the modern design remains visible on phones. */
  .lx-scene--home-hero .lx-frame {
    display: block;
    top: 16px;
    right: -76px;
    width: 174px;
    height: 112px;
    opacity: 0.14;
    transform: rotate(5deg);
  }

  .lx-scene--home-hero .lx-orbit { opacity: 0.2; }
  .lx-scene--schedule-intro .lx-orbit,
  .lx-scene--games-intro .lx-constellation { opacity: 0.16; }
}

@media (max-width: 520px) {
  .lexi-backdrop .nav-links,
  .lexi-backdrop .artifact-shortcuts { scrollbar-width: none; }
  .lexi-backdrop .nav-links::-webkit-scrollbar,
  .lexi-backdrop .artifact-shortcuts::-webkit-scrollbar { display: none; }

  .lexi-backdrop[data-backdrop-layout="home"] .hero-actions .button,
  .lexi-backdrop.lexi-games-page .games-intro-links .button { width: 100%; }
  .lexi-backdrop[data-backdrop-layout="home"] .card-of-day { grid-template-columns: 1fr; }
  .lexi-backdrop[data-backdrop-layout="home"] .daily-card-frame { max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .lexi-backdrop .button,
  .lexi-backdrop .nav-links a,
  .lexi-backdrop .artifact-shortcuts a,
  .lexi-backdrop[data-backdrop-layout="home"] .oracle-card,
  .lexi-backdrop[data-backdrop-layout="home"] .feature-card { transition: none; }
}

@media print {
  .lexi-backdrop .site-header,
  .lexi-backdrop[data-backdrop-layout="home"] .hero,
  .lexi-backdrop.calendar-page .calendar-intro,
  .lexi-backdrop.lexi-games-page .games-intro,
  .lexi-backdrop.calendar-page .calendar-workspace,
  .lexi-backdrop.lexi-games-page .games-library { box-shadow: none; }
}