/* ═══════════════════════════════════════════════════════════
   POLISH PREVIEW — "Make Interfaces Feel Better" overrides
   ═══════════════════════════════════════════════════════════

   Non-destructive overlay. Load AFTER style.css to preview.
   Comment out the <link> in index.html to revert instantly.

   Based on: jakub.kr/skills/make-interfaces-feel-better
   Principles NOT applicable to this app:
   - Concentric border radius (app is var(--r)=0px brutalist by design)
   - prefers-reduced-motion (explicitly rejected — dopamine app)
   - Hover-only interactions (mobile-first, :active only)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TABULAR NUMS ─────────────────────────────────────────
   Prevents layout shift as numbers update dynamically.
   Scores, trial counters, z-scores, p-values, streaks.
   The most visible improvement: digits stop jumping. ─────── */

#t-score,
#t-trial-inline,
#t-rate,
#p-score,
.c-val,
.count-num,
.flash-score,
.sc-v,
.streak-best,
.streak-label,
#st-trials,
#st-z {
  font-variant-numeric: tabular-nums;
}

/* ── 2. TEXT WRAPPING ────────────────────────────────────────
   balance: titles distribute evenly (no orphans in headings)
   pretty: body text avoids single dangling words on last line ─ */

/* Balance on titles and short headings */
.paywall-title,
.complete-title,
.onboard-title,
.gf-choose-title,
.brand-name,
.home-title {
  text-wrap: balance;
}

/* Pretty on descriptions and body text */
.paywall-sub,
.welcome-sub,
.paywall-note,
.set-info,
.gf-step-text span,
.proto-onboard-body p,
.welcome-prompt {
  text-wrap: pretty;
}

/* ── 3. FONT SMOOTHING (macOS Firefox) ───────────────────────
   style.css already has -webkit-font-smoothing: antialiased.
   Add -moz-osx-font-smoothing: grayscale for Firefox on Mac. ─ */

html {
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. FIX transition: all → SPECIFIC PROPERTIES ────────────
   transition: all forces the browser to watch every property.
   Specifying exact properties prevents ghost transitions on
   color, padding, shadow, and lets the browser optimize. ──── */

.toast {
  transition: opacity .3s, transform .3s !important;
}

.icon-btn {
  transition: background .2s, color .2s !important;
}

.btn-primary {
  transition: background .15s, outline-color .15s, transform .15s !important;
}

.btn-outline {
  transition: border-color .2s, color .2s, outline-color .2s, background .2s !important;
}

.tile {
  transition: border-color .15s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow .15s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              filter .15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.tile .t-shape {
  transition: filter .3s ease !important;
}

.ctrl-btn {
  transition: background .2s, border-color .2s !important;
}

.gf-opt {
  transition: transform .2s, border-color .2s !important;
}

.freq-opt {
  transition: border-color .2s, color .2s !important;
}

.seg-control button {
  transition: background .2s, color .2s !important;
}

.ctrl-text-btn {
  transition: color .2s !important;
}

/* ── 5. SCALE ON PRESS — NORMALIZE TO 0.96 ───────────────────
   The skill recommends exactly scale(0.96) for tactile feedback.
   Current values: .btn-primary=.97, .proto-card=.98, .btn-gf-start=.97
   Normalize all UI buttons to 0.96 for consistency.
   NOTE: .tile:active scale(.90) is DELIBERATE (game interaction
   feedback) — left untouched. ──────────────────────────────── */

.btn-primary:active {
  transform: scale(.96) !important;
}

.proto-card:active {
  transform: scale(.96) !important;
}

.btn-gf-start:active {
  transform: scale(.96) !important;
}

/* ── 6. IMAGE OUTLINES ───────────────────────────────────────
   Replace border with 1px pure-white outline at 10% opacity.
   Doesn't affect layout (outline doesn't add width/height).
   Current: border:1px solid var(--border) = rgba(255,255,255,0.15) ─ */

.flash-overlay img {
  border: none !important;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

/* Reward images in complete screen */
.c-reward img,
.reward-img {
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

/* ── 7. will-change ON ANIMATED ELEMENTS ─────────────────────
   Pre-promotes tiles and cards to GPU layers, eliminating
   first-frame micro-stutter. Especially helps Safari.
   Only for transform — the GPU-compositable property. ──────── */

.tile {
  will-change: transform;
}

.proto-card {
  will-change: transform;
}