/* AGE — THE SHARED POLISH LAYER. One small stylesheet every page loads, for the things a world-class app does the same way everywhere, so no page has to remember to.
 *
 * Its first rule is that it CANNOT OVERRIDE A PAGE: everything that would otherwise fight a page's own styling is written with :where(), which has zero specificity, so any rule a page
 * writes for itself wins. The few rules that are not (the reduced-motion safety net, the view transitions) are the ones that must apply everywhere.
 *
 *   1. SEAMLESS NAVIGATION. Moving between AGE pages used to be a hard cut: the old page vanished, a blank frame, the new page. Same-origin navigations now cross-fade, and the
 *      pieces of chrome that persist (the account chip, the sound button) stay where they are instead of blinking out and back. Browsers without cross-document view transitions
 *      ignore the rule and navigate exactly as before. It is off for anyone who asks for reduced motion.
 *   2. TOUCH THAT FEELS NATIVE. No grey tap flash, no 300 ms double-tap-zoom delay on a button, and on the game pages no pull-to-refresh: a downward drag in the middle of a match must
 *      never reload the page.
 *   3. ONE FOCUS RING, so keyboard and switch users always see where they are (gold, the same everywhere).
 *   4. A REDUCED-MOTION SAFETY NET. Pages already honour the setting, but not all of them; this makes it true everywhere. Animations and transitions finish instantly and delays are
 *      cancelled, so nothing is left hidden waiting for an animation that will never play.
 *   5. LOADING THAT DOES NOT JUMP. .age-skel is a shimmering placeholder block, for numbers and rows that are on their way.
 *   6. SMALL THINGS: dark scrollbars and form controls, gold text selection, smooth in-page scrolling.
 */

/* ---- 1. SEAMLESS NAVIGATION ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
#ageChip { view-transition-name: age-chip; }
#ageSoundToggle { view-transition-name: age-sound; }
::view-transition-group(age-chip), ::view-transition-group(age-sound) { animation-duration: .2s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---- 2. TOUCH THAT FEELS NATIVE ---- */
:where(html) { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
:where(a, button, [role="button"], [role="tab"], summary, label, input, select, textarea) { touch-action: manipulation; }
html.age-game { overscroll-behavior-y: none; }          /* a drag down inside a match must never pull the page to refresh */

/* ---- 3. ONE FOCUS RING ---- */
:where(a, button, [role="button"], [role="tab"], summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #f3dc94; outline-offset: 3px; }

/* ---- 4. A REDUCED-MOTION SAFETY NET ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---- 5. LOADING THAT DOES NOT JUMP ---- */
.age-skel { position: relative; overflow: hidden; border-radius: 8px; background: rgba(236, 227, 208, .07); color: transparent !important; text-shadow: none !important; }
.age-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(243, 220, 148, .13), transparent); animation: ageSkel 1.4s ease-in-out infinite; }
@keyframes ageSkel { to { transform: translateX(100%); } }

/* ---- 6. SMALL THINGS ---- */
:where(html) { scrollbar-width: thin; scrollbar-color: rgba(200, 137, 26, .38) transparent; }
::selection { background: rgba(243, 220, 148, .28); color: inherit; }
@media (prefers-reduced-motion: no-preference) { :where(html) { scroll-behavior: smooth; } }

/* ---- 7. ACCESSIBLE TEXT TOKENS ----
 * Measured with a real browser against what is actually painted behind each word: the brand's two dim-text variables were 3.2 to 3.6:1 (--bone-faint, on nine pages) and 2.9:1 (--textd, on the wallet
 * and sign-in), under the WCAG minimum of 4.5:1 for small text. They are lifted here, once, to ~4.7:1 on the darkest surfaces and ~5:1 on the commonest. Still dimmer than --bone-dim (#a59f90), so the
 * hierarchy survives. THIS RULE DELIBERATELY BEATS A PAGE'S OWN :root (html:root is more specific): it is a correction to a design token, not a default a page may opt out of. */
html:root { --bone-faint: #8c8472; --textd: #a99d86; }

/* ---- 8. THE HIDDEN ATTRIBUTE, AND TAP TARGETS ----
 * hidden: the browser hides [hidden] with a default rule that ANY author `display:` overrides, so an element a page marks hidden shows anyway. A scan of all 19 pages found exactly two:
 * RaceLTC's staking button (an empty cyan pill) and CueLTC's opponent seat outside a live match. This restores the meaning of the attribute everywhere. (Deliberately NOT :where(): it has to beat the
 * page rule that was overriding it. It sets one declaration and nothing else.)
 * TAP TARGETS: a phone audit (320 to 430px) found controls 14 to 30px tall where a thumb needs 44. Each hit area is enlarged WITHOUT moving or repainting anything: a transparent ::before beyond the
 * edge of a control (made position:relative where it was static). Padding was tried first and rejected: a page's own margin-bottom defeats the cancelling negative margin and the layout shifts. */
[hidden] { display: none !important; }
#ageBack::before, #ageConn::before { content: ""; position: absolute; inset: -8px -6px; }      /* fixed-position buttons: the back button on every game, Race's connection check */
#mute::before { content: ""; position: absolute; inset: -8px; }                                   /* RaceLTC's mute (absolutely positioned, 34 by 28) */
#ageDiffDial button { position: relative; }                                                       /* the difficulty dial on draughts and darts: 24px tall */
#ageDiffDial button::before { content: ""; position: absolute; inset: -10px 0; }
.how, .whoami a { position: relative; }                                                           /* home's "How it works" (14px tall) and versus's "sign out" (14px tall): a transparent extension, so */
.how::before { content: ""; position: absolute; inset: -24px -12px -10px; }                      /* extends UP into the marquee (not a control); below it the Design reference panel is a real control and wins */                             /* the page's own margins and padding are not touched and the layout cannot shift */
.whoami a::before { content: ""; position: absolute; inset: -15px -10px; }