/* Sumo Spheres overlays: candy-studio typography on top of the design tokens. RTL via logical properties. */

/* ---- one layout at every resolution ------------------------------------------------------------------------
 * ds/tv.css sizes rem by the viewport width with a 16 px floor. That floor is right for the lobby on a desktop, but
 * on a 1080p TV at DPR 2 (960×540 CSS px, the Chromecast with Google TV class of §11.1) it makes every overlay 1.6×
 * larger relative to the screen than at 1920×1080, and 1.2× at 1280×720, so a layout that fits at 1080p overflows
 * the safe area there. A full-screen TV game wants the opposite: the 1080p design scaled to the screen. So here rem
 * follows the smaller of width and height (20 px at 1920×1080, 13.3 px at 1280×720, 10 px at 960×540: the same
 * physical size on a 1080p panel), and the spacing and radius tokens, which ds defines in px, are restated in rem
 * at their 1080p values. Kit components inside the page (join card, sound chip, roster) scale with it. */
html:has(body.tv) { font-size: clamp(10px, min(1.05vw, 1.87vh), 40px); }
body.tv {
  --s-1: .2rem; --s-2: .4rem; --s-3: .6rem; --s-4: .8rem; --s-5: 1.2rem; --s-6: 1.6rem; --s-7: 2.4rem; --s-8: 3.2rem;
  --s-9: 4.8rem; --s-10: 6.4rem;
  --r-sm: .4rem; --r-md: .7rem; --r-lg: 1.1rem; --r-xl: 1.6rem;
}

#overlay { z-index: 1; }

#app::after {
  /* studio vignette: cheap post feel, composited once */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgb(10 4 30 / .5) 100%);
}

.sumo-glyph { width: 1em; height: 1em; fill: currentColor; }

/* ---- title -------------------------------------------------------------------- */
/* Everything the game draws stays inside the 5 % overscan safe area (§9.4): the scene roots are inset by it. */
/* ---- studio grade: a soft vignette over the 3D view (free on the GPU: a CSS gradient under the HUD) ---- */
.gk-layer--hud::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 46%, transparent 58%, rgb(12 6 34 / .42) 100%);
}
/* the title's inline-start side gets a gentle scrim so the logo and menu read over the bleachers */
.sumo-title::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 58%; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, rgb(16 8 46 / .62), rgb(16 8 46 / .34) 55%, transparent);
}
[dir="rtl"] .sumo-title::before { background: linear-gradient(to left, rgb(16 8 46 / .62), rgb(16 8 46 / .34) 55%, transparent); }

.sumo-title {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: safe center; gap: var(--s-6);
  /* the block-end padding keeps the column clear of the hint line under it */
  padding: var(--safe-y, 5vh) 6vw calc(var(--safe-y, 5vh) + 2.6rem); pointer-events: none !important;
}
.sumo-title > * { pointer-events: auto; }
.sumo-logo { display: grid; justify-items: start; align-self: flex-start; gap: var(--s-2); animation: sumo-in var(--dur-4) var(--ease-spring) both; }
.sumo-logo__kicker { margin: 0; text-transform: uppercase; letter-spacing: .2em; font-weight: var(--fw-bold); color: var(--mint-400); font-size: .95em; }
.sumo-logo__name {
  margin: 0; font-size: 6.2em; line-height: .95; font-weight: var(--fw-black); letter-spacing: var(--tracking-display);
  background: linear-gradient(175deg, #fff 10%, #ffd6ea 45%, var(--rose-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 var(--violet-700)) drop-shadow(0 .14em .25em rgb(20 6 50 / .55));
}
.sumo-logo__tagline { margin: 0; font-size: 1.4em; color: var(--ink-100); max-width: 26em; text-shadow: 0 2px 10px rgb(0 0 0 / .4); }
.sumo-menu { width: min(24em, 40vw); gap: .6rem; animation: sumo-in var(--dur-4) var(--ease-spring) .12s both; }
/* the kit menu's TV buttons sized in rem (the TV root scales with the screen) so five entries, the roster and the
   hint fit the safe area from 540p up */
.sumo-menu .gk-menu__item { min-block-size: 4.2rem; padding-inline: 1.6rem; font-size: 1.5rem; min-inline-size: 0; }
.sumo-hint { position: absolute; inset-block-end: var(--safe-y, 5vh); inset-inline-start: 6vw; margin: 0; color: var(--text-muted); font-size: .95em; line-height: 1.4; }
.sumo-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 40em; }
.sumo-roster__p { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em .3em .35em; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c) 25%, var(--ink-900)); box-shadow: inset 0 0 0 2px var(--c); font-weight: var(--fw-medium); animation: sumo-pop var(--dur-3) var(--ease-spring) both; }
.sumo-roster__p svg { width: 1.4em; height: 1.4em; padding: .2em; border-radius: 50%; background: var(--c); fill: #fff; }
.sumo-roster__p.is-away { opacity: .5; }

/* ---- lobby -------------------------------------------------------------------- */
.sumo-lobby { position: absolute; inset: 0; pointer-events: none !important; }
/* the kit's join card holds the inline-start side; the lobby's own column sits on the inline-end side */
.sumo-lobby__side {
  /* the block-end inset keeps the column (and its hint line) clear of the kit's sound chip in that corner */
  position: absolute; inset-block: var(--safe-y, 5vh) calc(var(--safe-y, 5vh) + 3.2rem); inset-inline-end: var(--safe-x, 5vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4); max-width: 34vw; text-align: end;
}
.sumo-lobby__head { display: grid; gap: var(--s-1); justify-items: end; animation: sumo-in var(--dur-4) var(--ease-spring) both; }
.sumo-lobby__title { margin: 0; font-size: 3.4em; font-weight: var(--fw-black); line-height: 1; text-shadow: 0 .06em 0 var(--violet-700), 0 .15em .4em rgb(0 0 0 / .4); }
.sumo-lobby__sub { margin: 0; font-size: 1.15em; color: var(--ink-100); max-width: 22em; text-shadow: 0 2px 10px rgb(0 0 0 / .45); }
.sumo-lobby__status {
  margin: 0; padding: .45em 1.1em; border-radius: var(--r-pill);
  font-size: 1.3em; font-weight: var(--fw-bold); background: color-mix(in oklab, var(--ink-900) 75%, transparent); box-shadow: inset 0 0 0 2px var(--border);
}
.sumo-lobby__status.is-go { background: linear-gradient(135deg, var(--mint-600), var(--violet-500)); box-shadow: 0 0 0 3px var(--mint-400); animation: sumo-pulse .6s ease-in-out infinite alternate; }
.sumo-lobby__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 12em)); gap: var(--s-3); justify-content: end; }
/* the lobby shows every player as a card, so the kit's join card drops its own chip list (it would run past the safe area at 8 players) */
body:has(.sumo-lobby) .gk-join__chips { display: none; }
.sumo-lobby__hint { margin: 0; color: var(--text-muted); font-size: .95em; line-height: 1.4; max-width: 26em; }
.sumo-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6em; align-items: center;
  min-width: 0; padding: .5em .9em .5em .5em; border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--c) 18%, var(--ink-900)); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c) 60%, transparent), var(--shadow-1);
  animation: sumo-pop var(--dur-3) var(--ease-spring) both; transition: background var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.sumo-card__badge { grid-row: 1 / 3; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
.sumo-card__badge svg { width: 1.3em; height: 1.3em; fill: #fff; }
.sumo-card__name { font-weight: var(--fw-bold); font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.sumo-card__state { color: var(--text-muted); font-size: .85em; }
.sumo-card.is-ready { background: color-mix(in oklab, var(--c) 45%, var(--ink-900)); box-shadow: 0 0 0 3px var(--c), 0 8px 30px -6px var(--c); transform: translateY(-4px); }
.sumo-card.is-ready .sumo-card__state { color: #fff; font-weight: var(--fw-bold); }
.sumo-card.is-away { opacity: .45; }

/* ---- in-round HUD ------------------------------------------------------------- */
.sumo-hud { position: absolute; inset: var(--safe-y, 5vh) var(--safe-x, 5vw); pointer-events: none !important; opacity: 0; transition: opacity var(--dur-3); }
.sumo-hud.is-visible { opacity: 1; }
.sumo-pill {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; padding: .35em 1.1em; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-900) 78%, transparent); box-shadow: inset 0 0 0 1px var(--border); font-weight: var(--fw-bold); white-space: nowrap;
}
[dir="rtl"] .sumo-pill { translate: 50% 0; }
.sumo-pill.is-danger { background: color-mix(in oklab, var(--red-500) 70%, var(--ink-900)); animation: sumo-pulse .5s ease-in-out infinite alternate; }
/* two chip columns beside the plate, vertically centred: clear of the round pill, the KO feed, the bottom edge (the
   kit's sound chip sits in the block-end corner until a key press on the TV unlocks audio) and the arena itself */
.sumo-chips {
  position: absolute; inset-block: 0; inline-size: 13.5rem; font-size: 1.15rem; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--s-2);
}
.sumo-chips--start { inset-inline-start: 0; }
.sumo-chips--end { inset-inline-end: 0; }
.sumo-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .45em; align-items: center;
  padding: .35em .85em .35em .35em; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c) 22%, rgb(12 8 30 / .82));
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c) 70%, transparent); transition: opacity var(--dur-3), filter var(--dur-3), transform var(--dur-3) var(--ease-spring);
}
.sumo-chips--end .sumo-chip { grid-template-columns: minmax(0, 1fr) auto; padding: .35em .35em .35em .85em; justify-items: end; }
.sumo-chips--end .sumo-chip__badge { grid-column: 2; }
.sumo-chips--end .sumo-chip__name, .sumo-chips--end .sumo-chip__pips { grid-column: 1; grid-row: auto; }
.sumo-chip__badge { grid-row: 1 / 3; width: 2em; height: 2em; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
.sumo-chip__badge svg { width: 1.1em; height: 1.1em; fill: #fff; }
.sumo-chip__name { font-weight: var(--fw-bold); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .95em; }
.sumo-chip__pips { display: flex; gap: .25em; }
.sumo-pip { width: .62em; height: .62em; border-radius: 50%; background: rgb(255 255 255 / .22); }
.sumo-pip.is-on { background: var(--amber-500); box-shadow: 0 0 8px var(--amber-500); }
.sumo-pip.is-new { animation: sumo-pip .9s var(--ease-spring); }
.sumo-chip.is-out { opacity: .38; filter: grayscale(.7); transform: scale(.94); }
.sumo-chip.is-away .sumo-chip__name::after { content: ' ⏸'; }
.sumo-chip.is-mega { transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--amber-500), 0 0 22px -2px var(--amber-500); }
.sumo-chip.is-winner { transform: scale(1.12); box-shadow: 0 0 0 3px var(--amber-500), 0 8px 30px -6px var(--amber-500); }
.sumo-chip.is-bot .sumo-chip__name { font-style: italic; }

.sumo-teams { position: absolute; inset-block-start: 2.6em; inset-inline-start: 50%; translate: -50% 0; display: none; gap: var(--s-2); }
[dir="rtl"] .sumo-teams { translate: 50% 0; }
.sumo-teams.is-visible { display: flex; }
.sumo-teams__side {
  display: inline-flex; align-items: center; gap: .55em; padding: .3em .45em .3em .9em; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--c) 30%, var(--ink-900)); box-shadow: inset 0 0 0 2px var(--c); font-weight: var(--fw-bold);
}
.sumo-teams__side.is-right { flex-direction: row-reverse; padding: .3em .9em .3em .45em; }
.sumo-teams__wins { display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c); color: #fff; font-weight: var(--fw-black); }
.sumo-callout { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none !important; }
.sumo-callout__text {
  --c: #fff; text-align: center; font-weight: var(--fw-black); line-height: 1; color: #fff; letter-spacing: var(--tracking-display);
  text-shadow: 0 .06em 0 color-mix(in oklab, var(--c) 60%, #000), 0 0 .4em color-mix(in oklab, var(--c) 80%, transparent), 0 .12em .3em rgb(0 0 0 / .5);
  -webkit-text-stroke: .025em color-mix(in oklab, var(--c) 40%, #000);
  animation: sumo-shout .45s var(--ease-spring) both; translate: 0 -12vh;
}
.sumo-callout__text.is-xl { font-size: 7em; }
.sumo-callout__text.is-lg { font-size: 4.2em; max-width: 14em; }
.sumo-callout__text.is-md { font-size: 3em; }
.sumo-callout__text small { display: block; font-size: .32em; font-weight: var(--fw-bold); margin-block-start: .4em; -webkit-text-stroke: 0; letter-spacing: .04em; }
.sumo-callout__arrow { display: block; width: 1.5em; height: 1.5em; margin: 0 auto .05em; fill: var(--c); stroke: color-mix(in oklab, var(--c) 40%, #000); stroke-width: 1; rotate: var(--a, 0deg); filter: drop-shadow(0 .04em 0 rgb(0 0 0 / .35)); }
.sumo-callout__text.is-leaving { opacity: 0; scale: .9; transition: opacity var(--dur-3), scale var(--dur-3); }

.sumo-feed { position: absolute; inset-block-start: 3.2rem; inset-inline-end: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); justify-items: end; }
.sumo-feed__line { display: flex; align-items: center; gap: .45em; padding: .3em .7em; border-radius: var(--r-pill); background: rgb(12 8 30 / .72); animation: sumo-in var(--dur-3) var(--ease-spring) both; }
.sumo-feed__line.is-leaving { opacity: 0; transition: opacity .5s; }
.sumo-feed__bump { width: 1.4em; height: .9em; background: linear-gradient(90deg, transparent, var(--amber-500)); clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); }
[dir="rtl"] .sumo-feed__bump { transform: scaleX(-1); }
.sumo-feed__fell { color: var(--text-muted); }
.sumo-tag { display: inline-flex; align-items: center; gap: .3em; font-weight: var(--fw-bold); color: color-mix(in oklab, var(--c) 55%, #fff); }
.sumo-tag svg { width: 1.2em; height: 1.2em; padding: .15em; border-radius: 50%; background: var(--c); fill: #fff; }

.sumo-modcard {
  --mc: var(--violet-400);
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; width: min(34em, 80vw); padding: var(--s-6) var(--s-7) var(--s-7);
  display: grid; justify-items: center; gap: var(--s-2); text-align: center; border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--mc) 55%, transparent), transparent 70%),
    linear-gradient(160deg, rgb(255 255 255 / .12), rgb(255 255 255 / .02)), rgb(20 10 48 / .9);
  box-shadow: 0 30px 80px -20px color-mix(in oklab, var(--mc) 70%, transparent), var(--shadow-2), inset 0 0 0 2px color-mix(in oklab, var(--mc) 65%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0; scale: .7; rotate: -4deg; transition: opacity var(--dur-3), scale var(--dur-4) var(--ease-spring), rotate var(--dur-4) var(--ease-spring);
}
[dir="rtl"] .sumo-modcard { translate: 50% -50%; rotate: 4deg; }
.sumo-modcard.is-open { opacity: 1; scale: 1; rotate: 0deg; }
.sumo-modcard::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: .5em;
  background: repeating-linear-gradient(135deg, var(--mc) 0 1.1em, color-mix(in oklab, var(--mc) 40%, #fff) 1.1em 2.2em);
}
.sumo-modcard__round { margin: 0; text-transform: uppercase; letter-spacing: .18em; font-weight: var(--fw-bold); color: var(--ink-100); display: flex; gap: .6em; align-items: center; }
.sumo-modcard__badge { padding: .15em .7em; border-radius: var(--r-pill); background: var(--amber-500); color: var(--ink-950); letter-spacing: .05em; }
.sumo-modcard__icon {
  width: 5.2em; height: 5.2em; padding: .9em; border-radius: 50%; fill: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--mc) 55%, #fff), var(--mc) 60%, color-mix(in oklab, var(--mc) 70%, #000));
  box-shadow: 0 0 0 .35em color-mix(in oklab, var(--mc) 35%, transparent), 0 10px 30px -6px var(--mc);
  animation: sumo-icon-pop var(--dur-4) var(--ease-spring) both .12s;
}
.sumo-modcard__name { margin: 0; font-size: 3.4em; font-weight: var(--fw-black); line-height: 1; color: color-mix(in oklab, var(--mc) 35%, #fff); text-shadow: 0 .05em 0 color-mix(in oklab, var(--mc) 60%, #000); }
.sumo-modcard__tip { margin: 0; font-size: 1.3em; color: var(--ink-100); }
.sumo-modcard.is-shrinkingHex { --mc: #ff5c95; }
.sumo-modcard.is-tiltingPlate { --mc: #a3d93a; }
.sumo-modcard.is-iceRink { --mc: #38b6ff; }
.sumo-modcard.is-bumperGarden { --mc: #2fbf83; }
.sumo-modcard.is-windGusts { --mc: #7a8cff; }
@keyframes sumo-icon-pop { from { scale: .3; rotate: -40deg; } to { scale: 1; rotate: 0deg; } }

/* ---- controls art ------------------------------------------------------------- */
.gk-intro__art { display: grid; place-items: center; }
.sumo-art { width: min(24em, 70%); height: auto; }
.sumo-art__phone { fill: #241a4a; stroke: rgb(255 255 255 / .3); stroke-width: 3; }
.sumo-art__screen { fill: #120c2c; }
.sumo-art__ring { fill: rgb(255 255 255 / .06); stroke: rgb(255 255 255 / .35); stroke-width: 3; stroke-dasharray: 6 6; }
.sumo-art__knob { fill: var(--mint-500); }
.sumo-art__stick { animation: sumo-stick 2.4s ease-in-out infinite; transform-box: fill-box; }
.sumo-art__btn circle { fill: var(--rose-500); }
.sumo-art__btn--b circle { fill: var(--violet-500); }
.sumo-art__btn--a { animation: sumo-tap 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sumo-art__glyph { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sumo-stick { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(16px, -10px); } 50% { transform: translate(-14px, 8px); } 75% { transform: translate(10px, 14px); } }
@keyframes sumo-tap { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(.82); } 80% { transform: scale(1.08); } }

@keyframes sumo-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes sumo-pop { 0% { opacity: 0; scale: .4; } 70% { scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes sumo-pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes sumo-pip { 0% { scale: 0; } 50% { scale: 2.2; } 100% { scale: 1; } }
@keyframes sumo-shout { 0% { opacity: 0; scale: 2.4; } 60% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sumo-art__stick, .sumo-art__btn--a, .sumo-lobby__status.is-go, .sumo-pill.is-danger, .sumo-modcard__icon { animation: none; }
}

/* ---- results: the kit's card on the inline-end side, beside the podium and clear of the sound chip ---- */
.gk-modal--results {
  place-items: center end; background: linear-gradient(to left, rgb(12 6 34 / .5), transparent 60%);
  /* the block-end padding keeps the card above the kit's sound chip (it is a TV target, var(--target-min) tall) */
  padding-block: var(--safe-y, 5vh) calc(var(--safe-y, 5vh) + max(2.25rem, var(--target-min, 0px)) + .6rem);
}
[dir="rtl"] .gk-modal--results { background: linear-gradient(to right, rgb(12 6 34 / .5), transparent 60%); }
.gk-modal--results > .gk-results {
  inline-size: min(40rem, 50vw); max-block-size: calc(100vh - 2 * var(--safe-y, 5vh) - max(2.25rem, var(--target-min, 0px)) - .6rem); --card-pad: 1.6rem; gap: .9rem;
}
/* eight standings rows fit a 540p safe area */
.gk-modal--results .gk-results__rows { min-block-size: 0; gap: .4rem; }
.gk-modal--results .gk-results__row { padding-block: .3rem; font-size: 1.5rem; }
.gk-modal--results .gk-results__row.is-winner { font-size: 1.9rem; }
.gk-modal--results .gk-menu { gap: .6rem; }
.gk-modal--results .gk-menu__item { min-block-size: 4.2rem; padding-inline: 1.6rem; font-size: 1.5rem; min-inline-size: 0; }