/* SUPER INTELLIGENCE's look, layered over GROKFIGHT's sticker components (app.css,
   screens.css, select.css, fight.css): the same ink outlines, hard shadows and stripes, in a
   party fighter's colours (red 1P, blue 2P, yellow, green, gold) on a royal night with a
   spotlight, light rays and a comic halftone. Loaded last. */

/* ============================================================== the night */

body,
.family-page,
body[data-screen="boot"] {
  background-color: var(--si-night);
  background-image: var(--si-backdrop);
  background-size: var(--si-backdrop-size);
  background-attachment: fixed;
}
body { color: var(--on-page); }
/* cards, sheets and pills keep ink text */
.card, .sheet, .pill, .btn, .sticker, .gf-tag, kbd, .gf-menu-btn, .gf-title-foot { color: var(--foreground); }

/* buttons: white stickers with an ink ring and a hard ink drop (reads on the night) */
.btn {
  border: 3px solid var(--foreground);
  box-shadow: 0 5px 0 var(--foreground);
}
@media (hover: hover) {
  .btn:hover { background: var(--lemon-soft); }
}
.btn.is-current { background: var(--lemon-soft); box-shadow: 0 5px 0 var(--foreground), 0 0 0 5px rgb(255 204 26 / .45); }
.btn-candy { border-color: var(--foreground); box-shadow: 0 6px 0 var(--foreground), 0 14px 28px rgb(0 0 0 / .35); text-shadow: 0 2px 0 var(--primary-border); }
@media (hover: hover) {
  .btn-candy:hover { background: var(--primary); box-shadow: 0 9px 0 var(--foreground), 0 18px 34px rgb(0 0 0 / .4); }
}
.btn-candy.is-current { background: var(--primary); box-shadow: 0 9px 0 var(--foreground), 0 0 0 6px rgb(255 204 26 / .55); }
.pill { box-shadow: 0 3px 0 var(--foreground); }
.card { box-shadow: 0 7px 0 var(--foreground), 0 18px 36px rgb(0 0 0 / .4); }

/* the frame round a grid: a gold ring, red band on top, blue band below */
.family-frame {
  box-shadow:
    0 0 0 7px var(--si-gold),
    0 0 0 10px var(--foreground),
    0 18px 0 -2px var(--si-red),
    0 32px 44px rgb(0 0 0 / .45);
}
.family-frame-top {
  background: repeating-linear-gradient(135deg, var(--si-red) 0 18px, #ff3b52 18px 36px);
  color: #fff;
  -webkit-text-stroke: 3px var(--foreground);
  paint-order: stroke fill;
}
.family-frame-bottom {
  background: repeating-linear-gradient(135deg, var(--si-blue) 0 18px, #3f82ff 18px 36px);
  color: #fff;
  -webkit-text-stroke: 3px var(--foreground);
  paint-order: stroke fill;
}
.family-inner { background: #0e1638; }
.family-corner { background: var(--si-gold); color: var(--si-red); }
.family-corner-tr { background: var(--si-red); color: #fff; }
.family-corner-bl { background: var(--si-blue); color: #fff; }
.family-corner-br { background: var(--si-green); color: #fff; }

.sheet-backdrop { background: rgb(6 10 34 / .72); }

/* ============================================================== the wordmark */

.si-wordmark {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .12em;
  line-height: .86;
}
.si-crest {
  grid-row: 1 / span 2;
  width: .92em;
  align-self: center;
  filter: drop-shadow(0 .05em 0 rgb(0 0 0 / .35));
  animation: si-crest-bob 4s ease-in-out infinite;
}
.si-crest svg { display: block; width: 100%; height: auto; }
@keyframes si-crest-bob { 50% { transform: translateY(-.04em) rotate(-4deg); } }
.si-wordmark .gf-word { transform: rotate(-3deg); transform-origin: 0 100%; }
/* SUPER: party red with a deep red and ink extrusion */
.si-wordmark .gf-word-a {
  grid-column: 2;
  color: var(--si-red);
  -webkit-text-stroke: .1em var(--foreground);
  paint-order: stroke fill;
  text-shadow: 0 .045em 0 var(--si-red-deep), 0 .09em 0 var(--foreground), 0 .2em .28em rgb(0 0 0 / .45);
  letter-spacing: .02em;
}
/* INTELLIGENCE: white with a blue extrusion, a size down */
.si-wordmark .gf-word-b {
  grid-column: 2;
  margin: .04em 0 0 .06em;
  font-size: .5em;
  color: #fff;
  -webkit-text-stroke: .16em var(--foreground);
  paint-order: stroke fill;
  text-shadow: 0 .08em 0 var(--si-blue), 0 .15em 0 var(--si-blue-deep), 0 .2em 0 var(--foreground), 0 .3em .3em rgb(0 0 0 / .4);
  letter-spacing: .04em;
}
.si-wordmark .gf-word-b::after { content: none; }

/* ============================================================== loading */

.gf-loading .si-wordmark { font-size: clamp(64px, min(12vw, 16dvh), 150px); }
.gf-load-bar { border-width: 4px; box-shadow: 0 6px 0 var(--foreground), 0 0 0 5px rgb(255 204 26 / .35); }
.gf-load-fill {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / .35) 12px 24px),
    linear-gradient(90deg, var(--si-gold), var(--si-red));
  background-size: 34px 34px, 100% 100%;
}
.gf-load-note { color: var(--on-page-muted); }
.gf-loading.is-queued:not([data-state="ready"]):not([data-state="leaving"]) .gf-load-note::after { color: var(--si-gold); content: " · starting as soon as it's in"; }
.gf-start {
  background: var(--si-red);
  box-shadow: 0 6px 0 var(--foreground), 0 0 0 0 rgb(255 204 26 / .5);
  -webkit-text-stroke: 2px var(--foreground);
}
@keyframes gf-start-pulse {
  50% { transform: scale(1.05); box-shadow: 0 6px 0 var(--foreground), 0 0 0 12px rgb(255 204 26 / .28); }
}
.gf-loading-foot { color: var(--on-page-muted); letter-spacing: .02em; }

/* ============================================================== title */

.gf-title::before { background: linear-gradient(90deg, rgb(11 20 64 / .92) 0%, rgb(11 20 64 / .78) 30%, rgb(11 20 64 / .12) 52%, transparent 64%); }
.gf-title-wash { display: none; }
.gf-kicker { color: var(--si-gold); text-shadow: 0 2px 0 var(--foreground); letter-spacing: .08em; }
.gf-title .si-wordmark { font-size: clamp(60px, min(7.6vw, 13.5dvh), 124px); margin-bottom: 10px; }
.gf-title-keys { color: var(--on-page-muted); }
.gf-title-foot { border-color: var(--foreground); background: rgb(255 255 255 / .92); box-shadow: 0 4px 0 var(--foreground); }
.gf-title-foot a { color: var(--si-red); }

/* the cast under the spotlight: three rows, big up front, the boss floating above */
.si-lineup {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  pointer-events: none;
}
.si-lineup::before {
  /* the spotlight's pool on the floor */
  content: "";
  position: absolute;
  left: 6%; right: 2%;
  bottom: 2%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / .22), transparent 70%);
}
.si-row {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.si-row-0 { bottom: 41%; }
.si-row-1 { bottom: 22%; }
.si-row-2 { bottom: 2%; }
.si-hero {
  position: relative;
  width: auto;
  flex: none;
  filter: drop-shadow(0 10px 0 rgb(0 0 0 / .25));
  animation: si-hero-in .7s cubic-bezier(.2, 1.3, .35, 1) both, si-hero-bob 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 60ms), calc(var(--i) * 230ms + .7s);
}
.si-row-0 .si-hero { height: min(22dvh, 210px); margin: 0 -1.2%; filter: brightness(.72) saturate(.85) drop-shadow(0 6px 0 rgb(0 0 0 / .25)); }
.si-row-1 .si-hero { height: min(29dvh, 280px); margin: 0 -1.8%; filter: brightness(.86) saturate(.92) drop-shadow(0 8px 0 rgb(0 0 0 / .25)); }
.si-row-2 .si-hero { height: min(40dvh, 380px); margin: 0 -2.6%; }
@keyframes si-hero-in { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes si-hero-bob { 50% { translate: 0 -6px; } }
.si-boss {
  position: absolute;
  top: 2%;
  left: 50%;
  height: min(22dvh, 200px);
  translate: -50% 0;
  filter: drop-shadow(0 0 30px rgb(255 204 26 / .7));
  opacity: .95;
  animation: si-boss-float 5s ease-in-out infinite;
}
@keyframes si-boss-float { 50% { transform: translateY(-14px) rotate(3deg); } }

/* the mode menu: one colour per mode, like a party fighter's main menu */
.gf-menu { gap: 11px; width: min(100%, 440px); }
.gf-menu-btn {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px;
  padding: 8px 18px 9px 10px;
  border: 4px solid var(--foreground);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 0 var(--foreground);
  --menu: var(--si-red);
  --menu-deep: var(--si-red-deep);
}
.gf-menu-btn[data-mode="versus"] { --menu: var(--si-blue); --menu-deep: var(--si-blue-deep); }
.gf-menu-btn[data-mode="cpu"] { --menu: var(--si-yellow); --menu-deep: var(--si-yellow-deep); }
.gf-menu-btn[data-mode="watch"] { --menu: var(--si-green); --menu-deep: var(--si-green-deep); }
.gf-menu-btn[data-mode="howto"] { --menu: #8a93b8; --menu-deep: #5a6389; }
.gf-menu-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--foreground);
  border-radius: 12px;
  background: var(--menu);
  color: #fff;
  box-shadow: 0 3px 0 var(--foreground);
  font-family: var(--font-display);
  font-size: 22px;
  -webkit-text-stroke: 1.5px var(--foreground);
  paint-order: stroke fill;
  transform: rotate(-6deg);
  transition: transform .2s cubic-bezier(.2, 1.6, .35, 1);
}
.gf-menu-label { grid-column: 2; font-size: 24px; letter-spacing: .02em; }
.gf-menu-sub { grid-column: 2; }
.gf-menu-arrow { display: none; }
.gf-menu-btn.is-current {
  background: var(--menu);
  color: #fff;
  transform: translateX(10px) rotate(-1deg);
  box-shadow: 0 8px 0 var(--foreground), 0 0 0 6px rgb(255 204 26 / .55);
}
.gf-menu-btn.is-current .gf-menu-label { -webkit-text-stroke: 5px var(--foreground); paint-order: stroke fill; text-shadow: 0 3px 0 var(--foreground); }
.gf-menu-btn.is-current .gf-menu-sub { color: #fff; text-shadow: 0 1px 0 var(--menu-deep); }
.gf-menu-btn.is-current .gf-menu-icon { background: #fff; color: var(--menu); transform: rotate(6deg) scale(1.08); }
@media (hover: hover) {
  .gf-menu-btn:not(.is-current):hover { background: color-mix(in oklab, var(--menu) 22%, #fff); }
}
.si-items.is-off { opacity: .8; text-decoration: line-through; text-decoration-thickness: 2px; }

@media (max-width: 699px) {
  .si-lineup { inset: auto 0 0 0; height: 34dvh; opacity: .5; }
  .si-row-0, .si-row-1 { display: none; }
  .si-row-2 .si-hero { height: 30dvh; }
  .si-boss { display: none; }
  .gf-title::before { background: rgb(11 20 64 / .55); }
  .gf-title .si-wordmark { font-size: clamp(46px, 15vw, 80px); }
}
@media (max-height: 800px) and (min-width: 700px) {
  .gf-menu-label { font-size: 20px; }
  .gf-menu-icon { width: 40px; height: 40px; font-size: 19px; }
  .gf-menu-btn { grid-template-columns: 46px minmax(0, 1fr); }
}

/* how to play: the super ups list */
.si-uplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.si-uplist li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 2px solid var(--foreground);
  border-left: 8px solid var(--up);
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
}
.si-uplist .gf-prop { grid-row: 1 / span 3; width: 28px; height: 28px; }
.si-up-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.si-up-repo { color: var(--muted-foreground); font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 11.5px; font-weight: 700; }
.si-up-repo i { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: var(--foreground); color: #fff; font-family: var(--font-display); font-size: 9.5px; letter-spacing: .06em; }
.si-up-desc { line-height: 1.25; }
.gf-movelist li:nth-child(odd) { background: rgb(31 107 255 / .1); }
.gf-touchlist li { background: rgb(31 107 255 / .12); }
.gf-touchlist li:nth-child(even) { background: rgb(232 17 45 / .1); }

@media (prefers-reduced-motion: reduce) {
  .si-crest, .si-hero, .si-boss { animation: none !important; }
}

/* ============================================================== select */

/* tiles: the hero's bust on their colour, a name bar underneath, like a party fighter's roster */
.gf-select .family-tile { border-radius: 8px; background: #26357e; overflow: visible; }
.gf-select .family-tile img { border-radius: 8px; border: 3px solid var(--foreground); }
.gf-select .family-tile-name {
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  padding: 3px 4px 4px;
  border: 3px solid var(--foreground);
  border-radius: 0 0 8px 8px;
  background: var(--foreground);
  color: #fff;
  font-size: clamp(9px, calc(var(--tile) * .1), 15px);
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
}
.family-tile-active .family-tile-name { transform: none; }
.gf-select .family-tile-active { outline: 3px solid #fff; }
.family-tile-close { box-shadow: 0 0 0 2px var(--si-gold), 0 5px 12px rgb(0 0 0 / .3); }
.family-tile.gf-cur1::before, .family-tile.gf-cur2::after { font-size: clamp(10px, calc(var(--tile) * .09), 14px); padding: 2px 8px; border-width: 2.5px; top: -16px; }
.gf-random { background: repeating-linear-gradient(135deg, var(--si-gold) 0 10px, #ffe27a 10px 20px) !important; border: 3px solid var(--foreground) !important; }
.gf-random-q { color: var(--si-red); -webkit-text-stroke: 3px var(--foreground); }
.gf-boss-mark { background: var(--si-gold); font-size: clamp(8px, calc(var(--tile) * .08), 12px); padding: 1px 6px; }
.gf-select .family-frame-top, .gf-select .family-frame-bottom { -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--foreground), 0 0 1px var(--foreground); letter-spacing: .04em; }
.gf-band-mid { color: rgb(255 255 255 / .9); }
.gf-select .gf-search { display: none; }

/* the player panels: 1P red, 2P blue, a thick ring in their colour */
.gf-card[data-side="0"] { box-shadow: 0 0 0 5px var(--si-red), 0 8px 0 5px var(--foreground), 0 20px 40px rgb(0 0 0 / .45); }
.gf-card[data-side="1"] { box-shadow: 0 0 0 5px var(--si-blue), 0 8px 0 5px var(--foreground), 0 20px 40px rgb(0 0 0 / .45); }
.gf-select[data-mode="cpu"] .gf-card[data-side="1"], .gf-select[data-mode="watch"] .gf-card { --primary: var(--cpu); --primary-border: var(--cpu-border); }
.gf-select[data-mode="cpu"] .gf-card[data-side="1"] { box-shadow: 0 0 0 5px var(--cpu), 0 8px 0 5px var(--foreground), 0 20px 40px rgb(0 0 0 / .45); }
.gf-card-ribbon { background: var(--primary); color: #fff; border-width: 3px; animation: none; font-size: 13px; }
.gf-card-ribbon b { color: #fff; -webkit-text-stroke: 3px var(--foreground); paint-order: stroke fill; }
.gf-card-id { border-left: 7px solid var(--primary); }
.si-name { font-size: clamp(20px, 1.9vw, 30px); letter-spacing: .01em; text-transform: uppercase; }
.si-lab-pill { background: var(--hero, var(--si-blue)); color: #fff; -webkit-text-stroke: 2.5px var(--foreground); paint-order: stroke fill; letter-spacing: .03em; }
.si-hero-pill { background: var(--si-gold); }
.gf-stats dd.pow i.on { background: var(--si-red); }
.gf-stats dd.spd i.on { background: var(--si-blue); }
.gf-stats dd.def i.on { background: var(--si-green); }
.gf-ready { background: var(--si-gold); }
.gf-card.is-locked .gf-card-art { box-shadow: 0 0 0 4px var(--si-gold), 0 0 0 7px var(--foreground); }
.gf-lock.btn-candy { font-size: 22px; letter-spacing: .06em; -webkit-text-stroke: 1.5px var(--foreground); paint-order: stroke fill; }
.gf-card-hint { color: var(--muted-foreground); }
.gf-ladder-face { background: repeating-linear-gradient(135deg, var(--sky-soft) 0 9px, #fff 9px 18px); }
.gf-ladder-face.is-boss { background: var(--si-gold); color: var(--si-red); }
.gf-ladder-face.is-boss img { filter: none; opacity: 1; }
.gf-level { background: var(--si-gold); }
.gf-map { background: #fff; color: var(--foreground); }
.gf-level, .gf-search, .gf-mode-pill { color: var(--foreground); }
.gf-select .family-tile-active { transform: scale(1.1) translateY(-6px) rotate(var(--family-tilt)); }
.gf-select .family-tile-close { transform: scale(1.03); }
.gf-select .family-tile-near { transform: none; }
.gf-fight-word { color: var(--si-red); }
.gf-fight-word small { color: var(--si-gold); }
.gf-fight-moment { background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .55), transparent 60%); }

/* desktop: the party-fighter layout. The roster runs across the top (select.js sizes the
   tiles to fill it: 7 x 2), the two player panels sit side by side underneath, and the
   two toolbars share one row above everything. */
.gf-select:not(.is-compact) .gf-select-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "tl tr" "stage stage" "c1 c2";
  gap: 10px 26px;
  height: 100dvh;
  padding: 12px 24px 20px;
}
.gf-select:not(.is-compact) .gf-side { display: contents; }
.gf-select:not(.is-compact) .gf-side-1 .gf-toolbar { grid-area: tl; }
.gf-select:not(.is-compact) .gf-side-2 .gf-toolbar { grid-area: tr; justify-content: flex-end; flex-wrap: nowrap; }
.gf-select:not(.is-compact) .gf-map { flex: none; width: 250px; }
.gf-select:not(.is-compact) .gf-stage { grid-area: stage; }
.gf-select:not(.is-compact) .gf-side-1 .gf-card { grid-area: c1; }
.gf-select:not(.is-compact) .gf-side-2 .gf-card { grid-area: c2; }
.gf-select:not(.is-compact) .gf-card { margin: 0 6px 6px; }

/* a panel: the hero on the left; name, lab, skill and bio; stats, moves and LOCK IN */
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) {
  --art: clamp(128px, 22dvh, 206px);
  display: grid;
  grid-template-columns: var(--art) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "art id stats"
    "art pills stats"
    "art skill moves"
    "art bio actions";
  gap: 6px 16px;
  align-items: start;
  padding: 18px 16px 14px;
}
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-art { grid-area: art; width: var(--art); height: var(--art); aspect-ratio: 1; align-self: start; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-id { grid-area: id; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-pills { grid-area: pills; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-skill { grid-area: skill; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-bio { grid-area: bio; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-special { grid-area: skill; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-stats { grid-area: stats; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-moves { grid-area: moves; display: block; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-actions { grid-area: actions; margin: 0; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-title { grid-area: id; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-note { grid-area: skill; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-lock { min-height: 50px; }
.gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-hint { font-size: 10.5px; }
/* the arcade road: seven faces in a row */
.gf-select:not(.is-compact) .gf-card.is-ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px 14px; }
.gf-select:not(.is-compact) .gf-card.is-ladder .gf-ladder { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 680px; }
.gf-select:not(.is-compact) .gf-card.is-ladder .gf-card-title { font-size: 24px; }
@media (max-height: 760px) {
  .gf-select:not(.is-compact) .gf-card:not(.is-ladder) .gf-card-bio { display: none; }
}

/* ============================================================== fight */

.fight-root,
.fight-root[data-stage="night"],
.fight-root[data-stage="sky"] {
  background-color: var(--si-night);
  background-image: var(--si-backdrop);
  background-size: var(--si-backdrop-size);
}
.fight-stage {
  box-shadow:
    0 0 0 7px var(--si-gold),
    0 0 0 10px var(--foreground),
    0 18px 0 -2px var(--si-red),
    0 30px 50px rgb(0 0 0 / .5);
}
/* the announcer's bands in the party colours */
.hud-call[data-side="0"] { --shade: var(--si-red); --band: #ff6b7d; }
.hud-call[data-side="1"] { --shade: var(--si-blue); --band: #6b9dff; }
.hud-call--round { --band: #6b9dff; --shade: var(--si-blue); }
.hud-call--fight { --band: #ff6b7d; --shade: var(--si-red); }
.hud-call--ko { --band: var(--si-gold); --shade: var(--si-red); }
.hud-call--perfect { --band: #5fe39a; --shade: var(--si-green); }
.hud-call--timeover { --band: #ffb46b; --shade: #e06a00; }
.hud-call--draw { --band: #c3a8ff; --shade: #6a4bd6; }
.hud-call--super .hud-band { background: linear-gradient(90deg, var(--si-red), var(--si-gold), var(--si-green), var(--si-blue), var(--si-red)) 0 0 / 300% 100%; }
/* the lab tag next to each name, in the hero's colour */
.hud-tier { background: var(--hero, var(--si-blue)) !important; color: #fff !important; -webkit-text-stroke: 2.5px var(--foreground); paint-order: stroke fill; }
.hud-tier[data-tier="boss"] { background: var(--si-gold) !important; color: var(--si-red) !important; }
.hud-pip { filter: drop-shadow(0 1.5px 0 var(--foreground)); }

/* ============================================================== results */

.btn-candy { color: #fff; }
/* the winner is: their player colour, the hero standing out of the card in their victory pose */
.family-spotlight.gf-spot {
  --spot: var(--si-red);
  --spot-deep: var(--si-red-deep);
  margin-top: 70px;
  padding: 26px 28px 22px 300px;
  min-height: 210px;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .08) 0 18px, transparent 18px 36px),
    radial-gradient(ellipse at 20% 50%, rgb(255 255 255 / .35), transparent 55%),
    linear-gradient(120deg, var(--spot) 0%, var(--spot-deep) 100%);
  border-width: 5px;
  animation: none;
  box-shadow: 0 8px 0 var(--foreground), 0 0 0 6px var(--si-gold), 0 0 0 9px var(--foreground), 0 24px 50px rgb(0 0 0 / .45);
}
.gf-spot[data-side="1"] { --spot: var(--si-blue); --spot-deep: var(--si-blue-deep); }
.gf-spot[data-side="draw"] { --spot: #7c86b0; --spot-deep: #4b5577; }
.gf-spot-ribbon { left: auto; right: 28px; z-index: 3; background: var(--si-gold); color: var(--foreground); animation: none; font-size: 16px; letter-spacing: .08em; }
.gf-spot-face { position: absolute; left: 18px; bottom: 6px; }
.gf-spot-face img.si-spot-hero {
  width: auto;
  height: 300px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  transform: rotate(-3deg);
  filter: drop-shadow(0 10px 0 rgb(0 0 0 / .3));
  animation: si-hero-in .6s cubic-bezier(.2, 1.3, .35, 1) both;
}
.gf-spot-badge { display: none; }
.gf-spot-kicker { color: var(--si-gold); -webkit-text-stroke: 4px var(--foreground); paint-order: stroke fill; font-size: 16px; letter-spacing: .1em; }
.gf-spot-handle { font-size: clamp(40px, 5vw, 64px); }
.gf-spot-handle .si-name { color: #fff; -webkit-text-stroke: 9px var(--foreground); paint-order: stroke fill; text-shadow: 0 5px 0 var(--foreground); letter-spacing: .02em; }
.gf-spot-quote { color: #fff; text-shadow: 0 2px 0 var(--foreground); }
.gf-res-note { color: var(--on-page-muted); }
.gf-res-sub { color: var(--on-page-muted); }
.gf-ending { text-align: center; }
.gf-next-ribbon { background: var(--si-gold); animation: none; }
.gf-continue { color: var(--si-gold); }
@media (max-width: 720px) {
  .family-spotlight.gf-spot { margin-top: 170px; padding: 24px 18px 18px; }
  .gf-spot-ribbon { right: auto; left: 50%; translate: -50% 0; }
  .gf-spot-face { left: 50%; bottom: auto; top: -170px; translate: -50% 0; }
  .gf-spot-face img.si-spot-hero { height: 190px; }
}