/* v030 final polish (Game Studio, PP-002). Loaded last; CSS only: no gameplay, rules, structure or protocol changes.
   Remove this file's <link> in index.html (and restore "border-radius: 14px" in v007.css :focus-visible) to revert. */

/* ---- A. Focus rings keep each control's own shape ----
   v007 forced border-radius:14px on every focused control, so 18px buttons (Try again, Resume, Restore purchases, Leave…)
   visibly changed shape when focused by keyboard / TV remote. The rule now only draws the ring; controls that have no
   radius of their own (text links, wallet segments, the loader puff) keep the rounded 14px ring they had before. */
:where(.link-btn, .ld-puff):focus-visible { border-radius: 14px; } /* zero specificity: links that have their own radius (e.g. result screen) keep it */
/* the wallet pill clips its segments, so their ring was cut off on three sides: draw it inside the segment instead */
.wl-seg:focus-visible { border-radius: 14px; outline-offset: -3px; }

/* ---- A. Reduced motion: decorative loops that ignored the OS setting and/or the in-app "Reduce motion" toggle ---- */
@media (prefers-reduced-motion: reduce) {
  .ld-glow, .ld-body, .pd-glow, .pd-rays, .cs-course.next .cs-node, .ad-sky i, .rot-phone, .pd-rot,
  #endpick img, #endpick .b1, #endpick .b2, #endpick .b3, .chart-anim i, #adscreen img { animation: none !important; }
}
html.reduce-motion .ld-body, html.reduce-motion .rot-phone, html.reduce-motion .pd-rot,
html.reduce-motion #endpick img, html.reduce-motion #endpick .b1, html.reduce-motion #endpick .b2, html.reduce-motion #endpick .b3,
html.reduce-motion #adscreen img { animation: none !important; }

/* ---- B. Hidden screens stop animating (battery / main-thread time) ----
   ~30 infinite loops (loader bubbles and rays, ad placeholder, controller glow, Endless picker, charting) kept running
   behind invisible screens. Paused, not removed: they resume exactly where they were when the screen shows again. */
.screen:not(.active) *, .screen:not(.active) *::before, .screen:not(.active) *::after { animation-play-state: paused !important; }

/* ---- B. Hover feedback on pointer devices (desktop, laptop running Big Screen, TV pointer remotes) ----
   Only the older buttons had hover states; the newer cards gave no feedback under a mouse. Colour only, so it never
   fights the press (translateY) states. */
@media (hover: hover) and (pointer: fine) {
  .hm-tile:hover, .cs-course:not(.locked):hover, .cs-set:hover, .dy-card:hover, .rk-open:hover, .vx-mode:hover,
  .ep-card:hover, .vx-choice:hover, .sh-card:hover, .cs-world:not(.locked):hover {
    border-color: rgba(255, 236, 214, .42) !important; filter: brightness(1.07);
  }
  .pd-icon:hover { color: var(--cream); }
}
/* press transitions that snapped (transition: all 0s) now ease like their neighbours */
.rk-open, .wl-seg { transition: transform .12s var(--ease, ease), background-color .2s, filter .14s; }

/* ---- C. Big Screen controller (#pad): finishing touch, same layout ----
   Matches the rest of the game: dusk-purple sky tint instead of flat navy, a few faint stars, glass chips with the game's
   bottom lip, a proper room-code chip, depth + press on the corner buttons, a teal halo once you are Ready, and the
   portrait "turn sideways" prompt in the same card style as the app's own rotate card. */
#pad { background: #0d0830; }
.pd-bg {
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 243, 224, .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(255, 243, 224, .35), transparent 60%),
    radial-gradient(1.6px 1.6px at 83% 24%, rgba(255, 243, 224, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 66%, rgba(255, 243, 224, .3), transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 12%, rgba(255, 243, 224, .4), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 58%, rgba(255, 243, 224, .3), transparent 60%),
    radial-gradient(120% 90% at 50% 125%, color-mix(in srgb, var(--pc) 18%, #3a1a6e), transparent 72%),
    linear-gradient(180deg, #120a3a 0%, #1c0f4e 46%, #2c1458 78%, #3a1860 100%);
}
.pd-icon {
  color: var(--v8-ink, #fff3e0); background: var(--v8-glass); border: 1px solid var(--v8-line-hi);
  box-shadow: var(--v8-lip), var(--v8-hi); transition: transform .12s var(--ease, ease), box-shadow .12s, color .2s;
}
.pd-icon:active { transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 rgba(8, 4, 34, .5), var(--v8-hi); }
.pd-who { background: var(--v8-glass); border-color: color-mix(in srgb, var(--pc) 55%, rgba(255, 236, 214, .3)); box-shadow: var(--v8-lip), var(--v8-hi); }
.pd-room {
  padding: 7px 11px 7px 9px; border-radius: 999px; background: var(--v8-glass); border: 1px solid var(--v8-line-hi);
  box-shadow: var(--v8-lip), var(--v8-hi); color: rgba(255, 243, 224, .78); font-variant-numeric: tabular-nums;
}
.pd-conn { transition: background-color .3s, box-shadow .3s; }
.pd-sub { color: rgba(255, 243, 224, .62); }
.pd-stat small { color: rgba(255, 243, 224, .55); }
/* Ready: the glow turns the same teal as the cap, so "I'm in" reads at a glance */
#pad:has(.pd-btn.ready) .pd-glow { background: radial-gradient(closest-side, rgba(110, 232, 220, .34), rgba(110, 232, 220, .08) 55%, transparent 72%); }
#pad:has(.pd-btn.ready) .pd-head { color: #9ff3ea; }
.pd-head { transition: color .25s; }
/* portrait prompt: the app's rotate-card look (glass card, lip, rounded) instead of bare text on navy */
.pd-rotate { background: rgba(13, 8, 48, .9); }
.pd-rot-card {
  max-width: 340px; padding: 24px 26px 18px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(70, 50, 150, .9) 0%, rgba(30, 20, 82, .94) 100%);
  border: 1px solid rgba(255, 236, 214, .26);
  box-shadow: 0 6px 0 rgba(8, 4, 34, .55), 0 28px 60px rgba(4, 2, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.pd-rot-card h2 { margin-top: 14px; }
.pd-rot-card p { color: rgba(255, 243, 224, .72); }
/* leave dialog: same lip/edge as the game's modals */
.pd-confirm-card { box-shadow: 0 6px 0 rgba(8, 4, 34, .55), 0 28px 60px rgba(4, 2, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .2); border-color: rgba(255, 236, 214, .26); }