/* ===== Labs / Tetris — BLOOM ===== */

.labs-tetris.is-art {
  background: #050414;
  min-height: 100vh;
  overflow: hidden;
}
.labs-tetris.is-art > nav,
.labs-tetris.is-art > footer { display: none !important; }

.lt-art {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155, 110, 243, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 90% 60% at 20% -10%, rgba(79, 142, 247, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(192, 132, 252, 0.06) 0%, transparent 60%),
    #050414;
  overflow: hidden;
  cursor: default;
}

.lt-art-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Corner overlay ===== */
.lt-art-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: rgba(237, 233, 254, 0.5);
}
.lt-art-corner {
  position: absolute;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lt-art-corner-tl { top: 0;     left: 0;  align-items: flex-start; text-align: left; }
.lt-art-corner-tr { top: 0;     right: 0; align-items: flex-end;   text-align: right; }
.lt-art-corner-bl { bottom: 0;  left: 0;  align-items: flex-start; text-align: left; }
.lt-art-corner-br { bottom: 0;  right: 0; align-items: flex-end;   text-align: right; }

/* ===== TL: title ===== */
.lt-art-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 200;
  letter-spacing: 8px;
  color: rgba(237, 233, 254, 0.5);
  text-shadow: 0 0 22px rgba(155, 110, 243, 0.3);
}
.lt-art-subtitle {
  margin-top: 0.4em;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(237, 233, 254, 0.32);
}

/* ===== Stat blocks ===== */
.lt-art-stat {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 233, 254, 0.4);
  text-shadow: 0 0 18px rgba(155, 110, 243, 0.25);
}
.lt-art-corner-tr .lt-art-stat,
.lt-art-corner-br .lt-art-stat { align-items: flex-end; }
.lt-art-corner-tl .lt-art-stat,
.lt-art-corner-bl .lt-art-stat { align-items: flex-start; }
.lt-art-stat-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 100;
  letter-spacing: -1.5px;
  line-height: 1;
}
.lt-art-stat-label {
  margin-top: 0.25em;
  font-size: 0.65rem;
  letter-spacing: 3px;
  font-weight: 500;
  opacity: 0.75;
}
.lt-art-stat-small .lt-art-stat-num { font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -0.5px; }
.lt-art-stat-small .lt-art-stat-label { font-size: 0.6rem; letter-spacing: 2.5px; }

/* ===== BR: legend ===== */
.lt-art-legend {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  color: rgba(237, 233, 254, 0.4);
}
.lt-art-legend-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-direction: row-reverse;
}
.lt-art-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lt-art-legend-name {
  text-transform: lowercase;
  font-feature-settings: "tnum";
}
.lt-art-legend-empty {
  font-style: italic;
  color: rgba(237, 233, 254, 0.28);
  text-transform: lowercase;
}

/* ===== Exit + credit links ===== */
.lt-art-bottom-bar {
  position: absolute;
  bottom: clamp(1.5rem, 3vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.lt-art-exit,
.lt-art-credit {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(237, 233, 254, 0.32);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  padding-bottom: 2px;
  transition: color 0.5s ease, border-bottom-color 0.5s ease, opacity 0.5s ease;
  opacity: 0.6;
}
.lt-art-credit {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 2vw, 2rem);
  transform: rotate(90deg);
  transform-origin: right top;
  z-index: 3;
}
.lt-art-exit:hover,
.lt-art-credit:hover {
  color: rgba(237, 233, 254, 0.8);
  border-bottom-color: rgba(237, 233, 254, 0.32);
  opacity: 1;
}

/* ===== Sound toggle ===== */
.lt-art-sound {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid rgba(237, 233, 254, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.65rem;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(237, 233, 254, 0.4);
  cursor: pointer;
  opacity: 0.7;
  transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease,
              box-shadow 0.6s ease, background-color 0.4s ease;
  /* Suppress the iOS 300ms tap delay and the grey tap highlight. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}
.lt-art-sound:active {
  background-color: rgba(155, 110, 243, 0.14);
}
.lt-art-sound:hover {
  color: rgba(237, 233, 254, 0.85);
  border-color: rgba(237, 233, 254, 0.36);
  opacity: 1;
}
.lt-art-sound:focus-visible {
  outline: none;
  border-color: rgba(192, 132, 252, 0.7);
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.18);
}
.lt-art-sound-icon { display: block; }
.lt-art-sound-icon-on  { display: none; }
.lt-art-sound[aria-pressed="true"] .lt-art-sound-icon-off { display: none; }
.lt-art-sound[aria-pressed="true"] .lt-art-sound-icon-on  { display: block; }
.lt-art-sound[aria-pressed="true"] {
  color: rgba(237, 233, 254, 0.85);
  border-color: rgba(192, 132, 252, 0.55);
  background-color: rgba(155, 110, 243, 0.08);
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.18);
  opacity: 1;
}
.lt-art-sound-label { line-height: 1; }

/* ===== Offline indicator ===== */
.lt-art-offline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + clamp(70px, 10vh, 140px)));
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(237, 233, 254, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 4;
}
.lt-art-offline.is-visible { opacity: 1; }

/* ===== Mobile ===== */
@media (max-width: 700px) {
  .lt-art-corner { padding: 1rem; gap: 0.3rem; }
  .lt-art-stat-num { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .lt-art-title { font-size: 1.2rem; letter-spacing: 5px; }
  .lt-art-subtitle { font-size: 0.6rem; letter-spacing: 1.5px; }
  .lt-art-credit { display: none; }
  /* Mobile: collapse to a 44×44 icon-only pill (Apple HIG / WCAG 2.5.5 AAA),
     and lift it out of the bottom bar so it sits directly under the flower
     instead of crowding the exit link. The vertical offset uses the same
     min(42vw, 42vh) formula the canvas uses for petal maxR, so the button
     tracks the flower's lower edge across screen sizes. */
  .lt-art-sound {
    position: fixed;
    /* Sit just below the flower's lower edge, but never closer than 60px to
       the viewport bottom (covers landscape on small screens where the
       flower nearly touches the edge). */
    top: min(
      calc(50% + min(42vw, 42vh) + 0.9rem),
      calc(100% - 60px)
    );
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    z-index: 4;
    background-color: rgba(5, 4, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .lt-art-sound-label { display: none; }
  .lt-art-bottom-bar { gap: 0; }
}
@media (max-width: 480px) {
  .lt-art-legend { font-size: 0.6rem; }
  .lt-art-legend-dot { width: 5px; height: 5px; }
}