/*
 * Game kit overlay styles (spec §6.5), built on /ds/. Load after
 * tokens.css, base.css (and tv.css); the kit's DOM uses ds components
 * (pr-card, pr-qr, pr-chip, pr-toast, pr-banner, pr-blocker) and only adds
 * placement here. Every rule uses logical properties: the join card sits on
 * the start side in both Hebrew and English.
 *
 * components.css is imported here so a game shell needs exactly the
 * stylesheets listed in §6.8.
 */
@import url('../ds/components.css');

html, body { block-size: 100%; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.gk-stage, #app > canvas#stage {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  /* a lower internal resolution (dynamic resolution) is a smooth CSS stretch */
  image-rendering: auto;
  touch-action: none;
  outline: none;
}

/* ---- overlay root and layers -------------------------------------------- */
.gk-overlay, #overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  font-family: var(--font-sans);
  color: var(--text);
}
.gk-layer { position: absolute; inset: 0; pointer-events: none; }
.gk-layer--hud { z-index: 1; padding: var(--safe-y, 5vh) var(--safe-x, 5vw); }
.gk-layer--modal { z-index: 2; }
.gk-layer--cover { z-index: 3; }
.gk-layer--notices { z-index: 4; }
.gk-layer--corner { z-index: 5; }
.gk-layer--cursors { z-index: 6; overflow: hidden; }
/* Anything that takes clicks inside the overlay opts in. */
.gk-interactive, .gk-overlay :is(button, a, [tabindex]) { pointer-events: auto; }

/* ---- scene-transition cover ------------------------------------------------ */
.gk-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-6);
  background:
    radial-gradient(40rem 26rem at 50% 45%, color-mix(in oklab, var(--violet-700) 22%, transparent), transparent 70%),
    var(--bg);
  opacity: 0;
  visibility: hidden;
}
.gk-cover.is-covered { opacity: 1; visibility: visible; }
.gk-cover__mark {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  opacity: 0;
  animation: gk-mark-in var(--dur-4) var(--ease-out) 600ms forwards, gk-breathe 2.4s var(--ease-in-out) 1.3s infinite;
}
.gk-cover__track {
  display: block;
  inline-size: min(22rem, 40vw);
  block-size: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-300) 14%, transparent);
  overflow: hidden;
}
.gk-cover__bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet-500), var(--mint-500));
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--dur-2) var(--ease-out);
}
[dir="rtl"] .gk-cover__bar { transform-origin: right center; background: linear-gradient(270deg, var(--violet-500), var(--mint-500)); }
@keyframes gk-mark-in { to { opacity: .9; } }
@keyframes gk-breathe { 50% { transform: scale(1.06); opacity: 1; } }

/* ---- join panel -------------------------------------------------------------- */
.gk-join {
  --card-pad: var(--s-6);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--safe-x, 5vw);
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  inline-size: min(26rem, 32vw);
  text-align: center;
  pointer-events: auto;
}
.gk-join__title { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-display); }
.gk-join .pr-qr { --qr-size: min(32vh, 15rem, 26vw); }
.gk-join .pr-qr__join { flex-direction: column; align-items: center; gap: var(--s-2); }
.gk-join .pr-qr__sep { display: none; }
.gk-join__code { display: inline-flex; align-items: baseline; gap: .5em; }
.gk-join__codelabel { color: var(--text-muted); }
.gk-join .pr-qr__count { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); }
/* Pending (connecting, reconnecting, offline): the status line is neutral rather than mint —
 * mint means live (§9.1). The spinner sits on the QR tile; offline/replaced/failed lead
 * the line with a static icon instead. */
.gk-join__lead { display: inline-flex; align-items: center; color: var(--text-muted); --icon-size: 1.2em; }
.gk-join__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); max-inline-size: 100%; }
.gk-join__chips:empty { display: none; }
.gk-join__hint { color: var(--text-muted); font-size: var(--fs-sm); }
/* Short windows (960x540 and below): the full panel is taller than the viewport, so tighten it. */
@media (max-height: 640px) {
  .gk-join { --card-pad: var(--s-4); gap: var(--s-2); }
  .gk-join__title { font-size: var(--fs-xl); }
  .gk-join .pr-qr { --qr-size: min(26vh, 15rem, 26vw); }
}

.gk-join--compact {
  --card-pad: var(--s-3);
  inset-block-start: var(--safe-y, 5vh);
  inset-inline-start: auto;
  inset-inline-end: var(--safe-x, 5vw);
  translate: none;
  inline-size: auto;
  max-inline-size: 24rem;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-lg);
  text-align: start;
}
.gk-join--compact .pr-qr { flex-direction: row; gap: var(--s-3); --qr-size: min(14vh, 6.5rem); }
.gk-join--compact .pr-qr__join { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.gk-join--compact .pr-qr__sep { display: none; }
.gk-join--compact .pr-qr__count, .gk-join--compact .gk-join__chips { display: none; }
/* A compact card has no join line until there is a session, so it keeps its status line instead. */
.gk-join--compact.gk-join--pending .pr-qr__count { display: inline-flex; font-size: var(--fs-sm); }

/* ---- roster ------------------------------------------------------------------- */
.gk-roster {
  position: absolute;
  inset-block-end: var(--safe-y, 5vh);
  inset-inline: var(--safe-x, 5vw);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  pointer-events: none;
}

/* ---- notices: banners (top) and toasts (bottom) ------------------------------- */
.gk-banners {
  position: absolute;
  inset-block-start: var(--safe-y, 5vh);
  inset-inline: 0;
  display: flex;
  justify-content: center;
}
.gk-banners .pr-banner { pointer-events: auto; }
.gk-toasts {
  position: absolute;
  inset-block-end: calc(var(--safe-y, 5vh) + 4.5rem);
  inset-inline: 0;
}

/* ---- sound chip ------------------------------------------------------------------ */
.gk-sound {
  position: absolute;
  inset-block-end: var(--safe-y, 5vh);
  inset-inline-end: var(--safe-x, 5vw);
  min-block-size: max(2.25rem, var(--target-min));
  padding: .35em .9em;
  font-size: var(--fs-sm);
  cursor: pointer;
  animation: pr-toast-in var(--dur-3) var(--ease-spring) both;
  --icon-size: 1.1em;
}
.gk-sound:hover { background: color-mix(in oklab, var(--violet-400) 24%, transparent); }

/* ---- modal cards (pause, results, controls intro) -------------------------------- */
/* A scrim over the game and a centered card. No backdrop-filter: too expensive
 * on TV GPUs (ds --surface-overlay is nearly opaque instead). */
.gk-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--safe-y, 5vh) var(--safe-x, 5vw);
  background: var(--scrim);
  pointer-events: auto;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.gk-modal.is-open { opacity: 1; }
.gk-modal.is-leaving { opacity: 0; transition-duration: var(--dur-1); }
.gk-modal > .pr-card {
  --card-pad: var(--s-7);
  background: var(--surface-overlay);
  box-shadow: var(--highlight-inset), var(--shadow-2), 0 0 0 1px color-mix(in oklab, var(--violet-400) 14%, transparent);
  transform: translateY(12px) scale(.97);
  transition: transform var(--dur-3) var(--ease-spring);
}
.gk-modal.is-open > .pr-card { transform: none; }
.gk-modal.is-leaving > .pr-card { transform: scale(.98); }

/* ---- menus (ui.menu, pause, results) ---------------------------------------------- */
.gk-menu { display: flex; gap: var(--s-4); }
.gk-menu--column { flex-direction: column; align-items: stretch; }
.gk-menu--row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.gk-menu--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.gk-menu__item { justify-content: flex-start; min-inline-size: 14rem; }
.gk-menu--row .gk-menu__item { justify-content: center; }
.gk-menu__label { flex: 1 1 auto; text-align: start; }
.gk-menu--row .gk-menu__label { flex: 0 1 auto; }
.gk-menu__hint { color: var(--text-muted); font-size: .8em; font-weight: var(--fw-regular); }
.gk-menu__item.is-pressed { animation: gk-press var(--dur-2) var(--ease-out); }
@keyframes gk-press { 40% { transform: scale(.95); } }

/* ---- pause ------------------------------------------------------------------------ */
.gk-pause { display: flex; flex-direction: column; gap: var(--s-5); inline-size: min(30rem, 86vw); text-align: center; }
.gk-pause__hint { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- results ---------------------------------------------------------------------- */
.gk-results { display: flex; flex-direction: column; gap: var(--s-6); inline-size: min(52rem, 90vw); max-block-size: 90vh; }
.gk-results__head { text-align: center; }
.gk-results__sub { margin-block-start: var(--s-2); color: var(--text-muted); font-size: var(--fs-lg); }
.gk-results__rows { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; overflow: hidden; }
.gk-results__row {
  display: grid;
  grid-template-columns: 2.4em auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--pc, var(--ink-500)) 8%, var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--pc, var(--ink-500)) 22%, transparent);
  font-size: var(--fs-xl);
  animation: gk-row-in var(--dur-3) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.gk-results__row.is-winner {
  background: linear-gradient(90deg, color-mix(in oklab, var(--pc, var(--violet-500)) 24%, var(--surface-2)), var(--surface-2));
  border-color: color-mix(in oklab, var(--pc, var(--violet-400)) 55%, transparent);
  box-shadow: 0 10px 40px -18px var(--pc, var(--violet-500));
  font-size: var(--fs-2xl);
}
[dir="rtl"] .gk-results__row.is-winner {
  background: linear-gradient(270deg, color-mix(in oklab, var(--pc, var(--violet-500)) 24%, var(--surface-2)), var(--surface-2));
}
.gk-results--dense { gap: var(--s-4); }
.gk-results--dense .gk-results__rows { gap: var(--s-1); }
.gk-results--dense .gk-results__row { padding-block: var(--s-2); font-size: var(--fs-lg); }
.gk-results--dense .gk-results__row.is-winner { font-size: var(--fs-xl); }
.gk-results__rank { color: var(--text-muted); font-weight: var(--fw-bold); text-align: center; }
.gk-results__row.is-winner .gk-results__rank { color: var(--amber-500); }
.gk-results__dot { --dot-size: 1.5em; }
.gk-results__name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-results__stats { display: flex; gap: var(--s-1) var(--s-3); flex-wrap: wrap; justify-content: flex-end; margin: 0; color: var(--text-muted); font-size: var(--fs-md); }
.gk-results__stats dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); }
.gk-results__trophy { --icon-size: 1.1em; color: var(--amber-500); }
.gk-results__score { grid-column: -2; font-weight: var(--fw-black); text-align: end; min-inline-size: 3ch; }
.gk-results__actions { display: flex; justify-content: center; }
@keyframes gk-row-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- controls intro ----------------------------------------------------------------- */
.gk-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) minmax(16rem, 30rem);
  align-items: center;
  gap: var(--s-7);
  overflow: hidden;
}
.gk-intro__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--violet-500) 22%, transparent), transparent);
}
.gk-intro__eyebrow { color: var(--signal); }
.gk-intro__title { margin-block: var(--s-2) var(--s-4); }
.gk-intro__lines { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding-inline-start: 1.2em; font-size: var(--fs-xl); line-height: var(--lh-snug); }
.gk-intro__lines li { animation: gk-row-in var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
.gk-intro__lines li::marker { color: var(--accent-hover); font-weight: var(--fw-bold); }
.gk-intro__skip { margin-block-start: var(--s-5); color: var(--text-muted); font-size: var(--fs-md); }
.gk-intro__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--violet-500), var(--mint-500));
  transform-origin: left center;
  transform: scaleX(0);
}
[dir="rtl"] .gk-intro__bar { transform-origin: right center; background: linear-gradient(270deg, var(--violet-500), var(--mint-500)); }
.gk-intro__bar.is-running { animation: gk-intro-bar var(--intro-ms, 8000ms) linear forwards; }
@keyframes gk-intro-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .gk-intro { grid-template-columns: 1fr; }
  .gk-intro__art { max-inline-size: 18rem; margin-inline: auto; }
}

/* The illustrations (decorative SVG; reduced motion stops them through base.css). */
.gk-ill { inline-size: 100%; block-size: auto; overflow: visible; }
.gk-ill__body { fill: var(--ink-900); stroke: var(--violet-400); stroke-width: 4; }
.gk-ill__screen { fill: color-mix(in oklab, var(--violet-500) 18%, var(--ink-850)); }
.gk-ill__accent { fill: var(--mint-500); }
.gk-ill__btn { fill: var(--violet-400); }
.gk-ill__ring { fill: none; stroke: var(--ink-300); stroke-width: 3; stroke-linecap: round; }
.gk-ill__arc { fill: none; stroke: var(--mint-400); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 12; opacity: .8; animation: gk-dash 1.2s linear infinite; }
.gk-ill__beam { stroke: var(--mint-400); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 4 10; animation: gk-dash .8s linear infinite; }
.gk-ill__move { transform-box: fill-box; transform-origin: center; }
.gk-ill__move--steer { animation: gk-steer 2.4s var(--ease-in-out) infinite; }
.gk-ill__move--aim { animation: gk-aim 2.6s var(--ease-in-out) infinite; }
.gk-ill__move--throw { animation: gk-throw 2.2s var(--ease-in-out) infinite; }
.gk-ill__move--stick { animation: gk-stick 2.4s var(--ease-in-out) infinite; }
.gk-ill__move--pulse { animation: gk-breathe 1.6s var(--ease-in-out) infinite; }
@keyframes gk-dash { to { stroke-dashoffset: -44; } }
@keyframes gk-steer { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes gk-aim { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
@keyframes gk-throw {
  0% { transform: translate(0, 0) rotate(0); }
  40% { transform: translate(-14px, 16px) rotate(-30deg); }
  62% { transform: translate(60px, -70px) rotate(40deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes gk-stick {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(12px, -6px); }
  50% { transform: translate(0, 12px); }
  75% { transform: translate(-12px, -4px); }
}

/* ---- countdown ------------------------------------------------------------------------ */
.gk-countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.gk-countdown__n {
  font-size: clamp(6rem, 22vh, 16rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 40px color-mix(in oklab, var(--violet-500) 70%, transparent), 0 6px 0 rgb(0 0 0 / .25);
  font-variant-numeric: tabular-nums;
  animation: gk-count var(--dur-4) var(--ease-out) both;
}
.gk-countdown__n.is-last { color: var(--amber-500); }
.gk-countdown__n.is-go {
  color: var(--mint-400);
  text-shadow: 0 0 48px color-mix(in oklab, var(--mint-500) 70%, transparent), 0 6px 0 rgb(0 0 0 / .25);
  animation: gk-go var(--dur-4) var(--ease-spring) both;
}
@keyframes gk-count { 0% { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
@keyframes gk-go { 0% { transform: scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---- big banner (ui.hud.banner) ----------------------------------------------------------- */
.gk-banner {
  --banner-c: var(--text);
  position: absolute;
  inset-inline: 0;
  inset-block-start: 22vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.gk-banner.is-in { animation: gk-banner-in var(--dur-3) var(--ease-spring) forwards; }
.gk-banner.is-leaving { animation: gk-banner-out var(--dur-2) var(--ease-in-out) forwards; }
.gk-banner__text {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--banner-c);
  text-shadow: 0 4px 30px rgb(0 0 0 / .55);
}
.gk-banner__sub { font-size: var(--fs-xl); color: var(--text-muted); text-shadow: 0 2px 12px rgb(0 0 0 / .6); }
.gk-banner__icon { --icon-size: 3rem; color: var(--banner-c); }
.gk-banner--accent { --banner-c: var(--violet-300); }
.gk-banner--signal { --banner-c: var(--mint-400); }
.gk-banner--warning { --banner-c: var(--amber-500); }
.gk-banner--danger { --banner-c: var(--rose-500); }
@keyframes gk-banner-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gk-banner-out { 0% { opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } }

/* ---- phone cursors (PointerLayer) ---------------------------------------------------------- */
/* Positions are screen pixels from the left edge (pointer x is physical), so
 * the cursor uses physical `left`, not a logical property. */
.gk-cursors { position: absolute; inset: 0; pointer-events: none; }
.gk-cursor {
  position: absolute;
  inset-block-start: 0;
  left: 0;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out);
  will-change: transform;
}
.gk-cursor.is-idle { opacity: 0; transition-duration: 900ms; }
.gk-cursor__arrow {
  position: absolute;
  inset-block-start: -2px;
  left: -2px;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  background: var(--pc, var(--p0));
  clip-path: polygon(0 0, 100% 40%, 52% 52%, 40% 100%);
  filter: drop-shadow(0 0 1.5px var(--ink-50)) drop-shadow(0 2px 6px rgb(0 0 0 / .6));
  transform-origin: 0 0;
  transition: transform var(--dur-1) var(--ease-out);
}
.gk-cursor.is-down .gk-cursor__arrow { transform: scale(.82); }
.gk-cursor__badge {
  position: absolute;
  inset-block-start: 1.25rem;
  left: 1.2rem;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: var(--pc, var(--p0));
  color: var(--pc-ink, var(--ink-950));
  box-shadow: 0 0 0 2px var(--ink-950);
  --icon-size: 70%;
}

/* ---- capture mode (?capture=1): no transient chrome in screenshots ---------------------------- */
html[data-capture] .gk-sound,
html[data-capture] .gk-banners,
html[data-capture] .gk-toasts,
html[data-capture] .gk-cursor.is-idle { display: none; }