/* tetris.com typefaces — Barlow Condensed (legal text + italic-600 nav links) and
   Barlow (the Terms/Privacy legal links + the ad-blocker gate copy) — are loaded
   early via a <link> injected in boot.js (not an @import here, which would load too
   late and flash fallback -> swap on the footer), and warmed there so no face is
   still cold when something first paints with it. */

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Custom Properties ── */
:root {
  /* Colors */
  --color-bg: #2bc9fd;
  /* Page background — tetris.com front-page "royal radial" (cyan → blue → indigo). */
  --gradient-page-bg: radial-gradient(circle at top, #2bc9fd 0, #0460ea, #44049e 100%);
  /* Background grid overlay */
  --grid-size: 100px;
  --grid-width: 2px;
  --grid-line: rgba(255, 255, 255, 0.18);
  --grid-blend: overlay;

  /* The page's content width — the header strip, the footer card, and the left
     edge the brand lockup aligns to in the top ad zone all key off this. */
  --content-max-width: 970px;
  /* --chrome-max-width (the header/footer span), --dialog-max-width and the header-row card
     widths are emitted by page-shell.js, which also derives the breakpoint that hides the
     cards from the same numbers. */

  /* Lift for content sitting directly on the page gradient (the header's text,
     the brand lockup in the top zone). text-shadow and drop-shadow take the same
     <offset-x offset-y blur color> syntax, so one token serves both. */
  --content-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Recess for the page's chrome boxes (the header strip, the cards flanking the
     top ad). No offset — it darkens evenly inward from every edge, so it reads as
     depth rather than as a light source. Follows each box's border-radius. */
  --box-inner-shadow: inset 0 0 16px rgba(0, 0, 0, 0.2);
  /* A light pin line along a box's inner bottom edge. Drawn as an inset shadow,
     never a border: a border would add a pixel to the box and shift its contents.
     Stacks after --box-inner-shadow in the same box-shadow list. */
  --box-inner-line: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
  --color-border: #444;
  --color-text: #888;
  --color-text-dim: #555;
  --color-text-bright: #ccc;
  --color-primary: #00c896;
  --color-accent: #3b82f6;
  --color-accent-light: #60a5fa;
  --color-canvas-bg: #000;
  --color-overlay-bg: #0a0a0a;
  --color-error: #ef4444;
  --color-track-bg: #1a1a1a;
  /* tetris.com brand — orange link hover + tropical gradient (social button hover).
     Hue/lightness of the original #ff6c0e (hsl 23.4 100% 52.7%), saturation dropped to 70%. */
  --brand-orange: hsl(23.4, 70%, 52.7%);
  --brand-red: #ea0029;
  --brand-purple: #ce00f3;
  --gradient-tropical: linear-gradient(to right, #ff6c0e, #e1136a);

  /* Shared panel frame — 1px black + 1px 50%-white outer border (as box-shadow
     rings) plus a soft drop shadow. Used by the game canvas and filled ad slots
     so they stay in sync. */
  --frame-ring-outset: 2px;
  --frame-shadow: 0 0 0 1px #000, 0 0 0 var(--frame-ring-outset) rgba(255, 255, 255, 0.5), 0 3px 12px rgba(30, 0, 60, 0.55);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xxs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 16px;
  --tracking-tight: 0.05em;
  --tracking-normal: 0.08em;

  /* Spacing (non-linear scale: 3→6, 6→12, 8→16, 10→24, 12→32, 14→40) */
  --space-3: 6px;
  --space-6: 12px;
  --space-8: 16px;
  --space-10: 24px;
  --space-12: 32px;
  --space-14: 40px;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-card: 0.75rem;
  --border-card: 2px solid rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-layout: 0.35s ease;
  --transition-loader: 0.4s ease;
  --transition-progress: 0.15s ease;

  /* Sizes */
  --progress-track-w: 240px;
  --progress-track-h: 3px;
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  /* Grape-radial gradient pinned to the viewport so it does not tile-seam down
     a scrolling page. The grid is a separate layer above it. */
  background: var(--gradient-page-bg) center / cover no-repeat fixed;
  color: var(--color-text);
  font-family: var(--font-sans);
}
/* Grid overlay — a fixed layer behind the content, radially masked so the grid
   is strongest in the center and fades out toward the page edges. Blended into
   the gradient beneath it (mix-blend-mode). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) var(--grid-width), transparent var(--grid-width)),
    linear-gradient(to bottom, var(--grid-line) var(--grid-width), transparent var(--grid-width));
  background-size: var(--grid-size) var(--grid-size);
  mix-blend-mode: var(--grid-blend);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 100%);
}

/* ── FOUC Prevention ── */
page-shell:not(:defined),
center-area:not(:defined) {
  display: none;
}

/* ── Third-party widget isolation ── */
#taboola-below-homepage-thumbnails button { background: #000 !important; color: #fff !important; }

/* ── Diagnostics (Unity dev builds) ── */
.diagnostics-icon { display: none; }