/* ==========================================================================
   Lazyware — robustness layer
   Loaded after the inline <style> so these rules win the cascade.
   Focus: overflow containment, responsive media, touch ergonomics,
   graceful failure surfaces. No visual redesign — only hardening.
   ========================================================================== */

/* ---- 1. Global overflow containment -------------------------------------- */
/* Belt-and-suspenders against any child that tries to force a horizontal
   scrollbar on small screens. `overflow-x: clip` keeps sticky/position work. */
html {
  overflow-x: clip;
}

/* Never let embedded media blow out its container. */
img,
svg,
canvas,
video {
  max-width: 100%;
}

/* Long unbroken tokens (URLs, IDs, model paths) must wrap, not overflow.
   Applies to the green interface panels and user-generated registry rows. */
.interface-panel,
.signal-panel,
.leaderboard-list li,
.approval-list li,
.cart-item,
.registry-panel,
.registry-board {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 2. Fix the LAZYWARE CONTROL LAYER interface overflow ---------------- */
/* The center preview image is a fixed 330px square dropped into a 240px grid
   track, so it spilled past the viewport at every width > 760px. Constrain it
   to its track and let the grid columns actually shrink to zero. */
.lazyware-interface {
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px) minmax(0, 1fr);
  max-width: 100%;
}

.lazyware-interface .interface-core {
  min-width: 0;
}

.lazyware-interface .interface-core img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ---- 3. Touch ergonomics ------------------------------------------------- */
/* Kill the 300ms tap delay and the grey flash on iOS/Android for every
   interactive control, and guarantee a comfortable hit area on touch. */
button,
a,
[role="button"],
input,
select,
summary {
  -webkit-tap-highlight-color: rgba(255, 29, 29, 0.18);
  touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse) {
  /* Nav pills, cta buttons and footer links get a real thumb-sized target. */
  .nav-pills button,
  .model-switch button,
  .cta-row a,
  .cta-row button,
  .cart-fab,
  .registry-panel button,
  .registry-panel [type="submit"] {
    min-height: 44px;
  }

  /* Body-choice cards already tall; ensure their inner controls stay tappable. */
  .body-choice button {
    min-height: 132px;
  }
}

/* ---- 4. Tablet portrait polish (761px–1024px) ---------------------------- */
/* The main "device" frame scales a fixed 1260x710 canvas, which reads fine,
   but the standalone content sections (cart, registry, meme board) benefit
   from tighter gutters and single-column stacks on narrow tablets. */
@media (min-width: 761px) and (max-width: 1024px) {
  .page-meme-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .meme-section {
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: clamp(20px, 4vw, 64px);
  }

  .cart-shell,
  .registry-shell {
    gap: 20px;
  }
}

/* ---- 5. Reduced-motion: respect the OS setting for CSS animation too ----- */
/* The JS already checks prefers-reduced-motion for the 3D idle spin; make the
   decorative CSS transitions/animations honour it as well. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 6. Failure / no-JS surfaces ---------------------------------------- */
/* Shown by robustness.js (watchdog) or by <noscript>. Hidden by default. */
.boot-fallback {
  position: fixed;
  inset: 0;
  z-index: 90; /* above boot-loader (70) and body-choice (50) */
  display: none;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, #000 0%, #050505 100%);
  color: var(--soft, #d8d8d8);
  font-family: var(--mono-font, monospace);
}

.boot-fallback.is-visible {
  display: grid;
}

.boot-fallback-inner {
  max-width: 460px;
}

.boot-fallback strong {
  display: block;
  margin-bottom: 12px;
  color: #f5f5f5;
  font-size: clamp(18px, 4vw, 24px);
  letter-spacing: 0.02em;
}

.boot-fallback p {
  margin: 0 0 18px;
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.5;
  color: #b6b6b6;
}

.boot-fallback a.boot-fallback-action {
  display: inline-block;
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid rgba(255, 29, 29, 0.5);
  color: #fff;
  text-decoration: none;
  line-height: 24px;
}