html, body.game-body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (min-height: 100dvh) {
  html, body.game-body { min-height: 100dvh; }
}

body.game-body {
  position: fixed;
  inset: 0;
  margin: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(120% 85% at 50% 0%, #221019 0%, #0c090b 45%, #050406 100%);
}

body.game-body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(38% 48% at 16% 24%, rgba(214, 58, 100, .36), transparent 72%),
    radial-gradient(42% 52% at 86% 72%, rgba(176, 42, 82, .3), transparent 74%),
    radial-gradient(46% 42% at 78% 12%, rgba(17, 80, 39, .34), transparent 76%),
    linear-gradient(118deg, #15080f 0%, #0a090a 42%, #08120c 72%, #10070c 100%);
  filter: blur(56px) saturate(1.15);
  opacity: .9;
  pointer-events: none;
}

.game-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #050e09;
  touch-action: none;
  isolation: isolate;
  box-shadow: 0 0 90px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html, body.game-body {
    height: 100%;
    min-height: 100%;
  }
  @supports (min-height: 100dvh) {
    html, body.game-body { min-height: 100dvh; }
  }
  .game-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

.game-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

#game-canvas,
#crossbar-canvas,
#keepyups-canvas,
#freekick-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.game-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  align-items: start;
  column-gap: 8px;
  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    calc(env(safe-area-inset-right, 0px) + 12px)
    0
    calc(env(safe-area-inset-left, 0px) + 12px);
  pointer-events: none;
  transition: opacity .25s var(--ease, ease), visibility .25s var(--ease, ease);
}

.game-hud > * {
  pointer-events: auto;
}

.game-shell.is-title .game-hud,
.game-shell.is-title .game-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-home {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px 0 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  background: rgba(10, 9, 10, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4), 0 0 18px rgba(255, 92, 138, .18);
  color: #fff;
  font: 800 11px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease, ease), transform .16s var(--ease, ease), visibility .2s;
}

.game-home svg {
  width: 20px;
  height: 20px;
  color: #ffd5e4;
}

.game-home:active {
  transform: scale(.95);
}

.game-shell.is-title .game-home {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.game-badge {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(10, 9, 10, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 92, 138, .22);
  transition: transform .16s var(--ease, ease);
}

.game-badge img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.game-badge:active {
  transform: scale(.92);
}

.game-menu-link {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 2;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  background: rgba(10, 9, 10, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffd5e4;
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .16s var(--ease, ease);
}

.game-menu-link:active {
  transform: scale(.94);
}

.game-hud__panel {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 220px;
  min-width: 0;
  padding: 7px 10px 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(10, 9, 10, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
}

.game-hud__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label best"
    "score score";
  align-items: center;
  justify-items: center;
  gap: 2px 8px;
  width: 100%;
}

.game-score__label {
  grid-area: label;
  justify-self: start;
  color: var(--glow, #ff5c8a);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-score__value {
  grid-area: score;
  justify-self: center;
  color: var(--white, #fff);
  font-size: clamp(26px, 8.5vw, 34px);
  line-height: .9;
  text-shadow: 0 0 20px rgba(255, 92, 138, .4);
}

.game-score__best {
  grid-area: best;
  justify-self: end;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-score__best b {
  color: #ffd5e4;
  font-weight: 800;
}

.game-pips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.game-pips i {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
}

.game-pips i.is-goal {
  border-color: var(--glow, #ff5c8a);
  background: var(--glow, #ff5c8a);
  box-shadow: 0 0 9px rgba(255, 92, 138, .8);
}

.game-pips i.is-miss {
  border-color: rgba(154, 148, 152, .6);
}

.game-pips i.is-miss::before,
.game-pips i.is-miss::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--grey, #9a9498);
}

.game-pips i.is-miss::before { transform: translate(-50%, -50%) rotate(45deg); }
.game-pips i.is-miss::after { transform: translate(-50%, -50%) rotate(-45deg); }

.game-pips__extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 16px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--glow, #ff5c8a);
  color: var(--white, #fff);
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .02em;
  box-shadow: 0 0 10px rgba(255, 92, 138, .8);
}

.game-pips__extra[hidden] { display: none; }

.game-sudden {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  background: rgba(255, 92, 138, .16);
  color: #ffd5e4;
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 92, 138, .3);
  animation: game-sudden-pulse 1.8s ease-in-out infinite;
}

.game-sudden[hidden] { display: none; }

.game-sudden__count {
  color: var(--white, #fff);
  letter-spacing: .06em;
}

@keyframes game-sudden-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 92, 138, .26); }
  50% { box-shadow: 0 0 20px rgba(255, 92, 138, .55); }
}

.game-shell.is-pressure .game-stage {
  filter: blur(.6px);
}

.game-shell.is-pressure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 76% 70% at 50% 50%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, .32) 72%,
    rgba(0, 0, 0, .66) 100%);
}

.game-shell.is-pressure .game-hud__panel {
  animation: game-pressure-hud 1.15s ease-in-out infinite;
}

.game-shell.is-pressure .game-score__value {
  animation: game-pressure-score 1.15s ease-in-out infinite;
}

@keyframes game-pressure-hud {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 10px 30px rgba(255, 92, 138, .32), 0 0 0 1px rgba(255, 92, 138, .32);
  }
}

@keyframes game-pressure-score {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 92, 138, .4); }
  50% { text-shadow: 0 0 30px rgba(255, 92, 138, .9); }
}

.game-streak {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding: 3px 9px 4px;
  border: 1px solid rgba(255, 92, 138, .55);
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(255, 92, 138, .95), rgba(166, 32, 74, .92));
  color: var(--white, #fff);
  font: 800 8px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(255, 92, 138, .55);
}

.game-streak[hidden] { display: none; }

.game-streak__value {
  color: var(--white, #fff);
  font-size: 17px;
  line-height: .85;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(255, 255, 255, .45);
}

.game-streak.is-pop {
  animation: game-streak-pop .45s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

@keyframes game-streak-pop {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.18) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.game-icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(10, 9, 10, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white, #fff);
  transition: transform .16s var(--ease, ease), background .2s ease;
}

.game-icon-btn svg {
  width: 22px;
  height: 22px;
}

.game-icon-btn:active {
  transform: scale(.92);
}

.game-golden {
  position: relative;
  grid-column: 3;
  justify-self: end;
  align-self: start;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 214, 110, .34);
  border-radius: 50%;
  background: rgba(18, 14, 7, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #e7c56e;
  opacity: .58;
  cursor: default;
  transition: transform .16s var(--ease, ease), opacity .2s ease, box-shadow .2s ease, background .2s ease;
}

.game-golden[hidden] { display: none; }

.game-golden svg {
  width: 25px;
  height: 25px;
}

.game-golden__count {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(255, 214, 110, .45);
  border-radius: 99px;
  background: rgba(10, 9, 10, .92);
  color: #e7c56e;
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .04em;
}

.game-golden.is-charged {
  opacity: 1;
  border-color: #ffd76a;
  color: #ffd76a;
  box-shadow: 0 0 18px rgba(255, 190, 50, .62), inset 0 0 12px rgba(255, 190, 50, .22);
  animation: game-golden-glow 1.6s ease-in-out infinite;
}

.game-golden.is-armed {
  opacity: 1;
  border-color: #fff4c8;
  background: linear-gradient(135deg, #ffd76a, #c88612);
  color: #2b1903;
  box-shadow: 0 0 26px rgba(255, 196, 58, .85);
  animation: game-golden-armed .9s ease-in-out infinite;
}

.game-golden.is-charged .game-golden__count,
.game-golden.is-armed .game-golden__count {
  display: none;
}

.game-golden.is-armed:active {
  transform: scale(.92);
}

@keyframes game-golden-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 190, 50, .45), inset 0 0 10px rgba(255, 190, 50, .18); }
  50% { box-shadow: 0 0 26px rgba(255, 196, 58, .82), inset 0 0 14px rgba(255, 196, 58, .3); }
}

@keyframes game-golden-armed {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 196, 58, .7); }
  50% { transform: scale(1.06); box-shadow: 0 0 32px rgba(255, 214, 110, .95); }
}

.game-sound__on { display: none; }
.game-sound__off { display: block; }
#game-sound.is-on .game-sound__on,
#game-sound[aria-pressed="true"] .game-sound__on { display: block; }
#game-sound.is-on .game-sound__off,
#game-sound[aria-pressed="true"] .game-sound__off { display: none; }

.game-commentary__on { display: none; }
.game-commentary__off { display: block; }
.game-title__commentary.is-on .game-commentary__on { display: block; }
.game-title__commentary.is-on .game-commentary__off { display: none; }
.game-title__commentary.is-on {
  color: var(--glow, #ff5c8a);
}

.game-hint {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(16px, 10vh));
  z-index: 3;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(10, 9, 10, .6);
  color: var(--white, #fff);
  font: 700 11px/1.3 var(--sans, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  max-width: calc(100% - 32px);
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: game-hint-pulse 2.4s ease-in-out infinite;
  transition: opacity .25s var(--ease, ease), visibility .25s var(--ease, ease);
}

@keyframes game-hint-pulse {
  0%, 100% { opacity: .72; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
}

.game-special {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 96px);
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 7px 16px 9px;
  border: 1px solid rgba(255, 92, 138, .55);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 8, 18, .92), rgba(10, 9, 10, .88));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 26px rgba(255, 92, 138, .35);
  pointer-events: none;
  text-align: center;
  transform: translateX(-50%);
}

.game-special[hidden] { display: none; }

.game-special__tag {
  color: var(--glow, #ff5c8a);
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.game-special__text {
  color: var(--white, #fff);
  font: 400 22px/1 var(--disp, Impact, sans-serif);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(255, 92, 138, .5);
}

.game-special__sub {
  color: #ffd5e4;
  font: 700 9px/1.2 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.game-special.is-show {
  animation: game-special-in .45s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

@keyframes game-special-in {
  0% { opacity: 0; transform: translateX(-50%) scale(.6) translateY(-6px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.game-body .no9-staging-pill {
  top: auto !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
  transform: none !important;
  padding: 4px 8px !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
}

.game-flash {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}

.game-flash strong {
  color: var(--white, #fff);
  font-family: var(--disp, Impact, sans-serif);
  font-size: clamp(46px, 15vw, 78px);
  font-style: italic;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 6px 0 var(--pink, #d63a64), 0 0 38px rgba(255, 92, 138, .55);
  transform: scale(1.6) rotate(-4deg);
}

.game-flash small {
  margin-top: 8px;
  color: #ffd5e4;
  font: 700 12px/1.3 var(--sans, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
}

.game-flash[data-kind="save"] strong,
.game-flash[data-kind="post"] strong,
.game-flash[data-kind="miss"] strong {
  color: var(--glow, #ff5c8a);
}

.game-flash[data-kind="great"] strong {
  text-shadow: 0 6px 0 var(--pink, #d63a64), 0 0 64px rgba(255, 92, 138, .95);
}

.game-flash[data-kind="golden"] strong {
  color: #ffd76a;
  text-shadow: 0 6px 0 #8a5008, 0 0 58px rgba(255, 196, 58, .95);
}

.game-flash[data-kind="golden"] small {
  color: #ffe9a8;
}

.game-flash[data-kind="sudden"] strong {
  color: var(--glow, #ff5c8a);
  font-size: clamp(30px, 10vw, 56px);
}

.game-flash.is-show {
  animation: game-flash-in 1.8s var(--ease, ease) both;
}

.game-flash.is-show strong {
  animation: game-flash-pop .55s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

.game-flash.is-show small {
  animation: game-flash-sub .5s var(--ease, ease) .18s both;
}

@keyframes game-flash-in {
  0% { opacity: 0; }
  10% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes game-flash-pop {
  0% { opacity: 0; transform: scale(2.2) rotate(-8deg); }
  62% { opacity: 1; transform: scale(.98) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes game-flash-sub {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.game-commentary {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(72px, 16vh));
  z-index: 4;
  width: min(92%, 680px);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  text-align: center;
  transition: opacity .32s var(--ease, ease), transform .32s var(--ease, ease);
}

.game-commentary.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.game-commentary span {
  display: inline-block;
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(10, 9, 10, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  color: #fff;
  font: 800 clamp(12px, 3.4vw, 15px)/1.35 var(--sans, sans-serif);
  letter-spacing: .01em;
}

.game-title {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding:
    calc(env(safe-area-inset-top, 0px) + 26px)
    24px
    calc(env(safe-area-inset-bottom, 0px) + 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  text-align: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(214, 58, 100, .32), transparent 58%),
    linear-gradient(180deg, rgba(5, 4, 5, .72) 0%, rgba(5, 4, 5, .88) 60%, rgba(5, 4, 5, .94) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
}

.game-title.is-hide {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

.game-title__badge {
  width: clamp(104px, 32vw, 158px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 0 44px rgba(255, 92, 138, .55))
    drop-shadow(0 12px 28px rgba(0, 0, 0, .5));
  animation: game-badge-float 4.4s ease-in-out infinite;
}

@keyframes game-badge-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.015); }
}

.game-title__club {
  margin: 8px 0 0;
  color: #ffd5e4;
  font: 800 12px/1 var(--sans, sans-serif);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.game-title__name {
  margin: 2px 0 12px;
  width: 100%;
  max-width: 100%;
  padding: 0 6px;
  color: var(--white, #fff);
  font-size: clamp(40px, 13vw, 80px);
  line-height: .86;
  text-shadow: 0 6px 0 rgba(214, 58, 100, .9), 0 0 46px rgba(255, 92, 138, .5);
}

.game-title__play {
  width: 100%;
  max-width: 232px;
}

.game-title__play--primary {
  max-width: 300px;
  min-height: 58px;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-title__play + .game-title__play {
  margin-top: 0;
}

.game-title__play:disabled {
  opacity: .55;
  pointer-events: none;
}

.game-title__mobile {
  width: 100%;
  max-width: 300px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(8, 6, 9, .55);
  color: #fff;
  font: 800 13px/1.35 var(--game-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.game-title__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin: 0;
}

.game-title__link {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #ffd5e4;
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(255, 92, 138, .5);
  text-underline-offset: 4px;
  transition: transform .16s var(--ease, ease), color .2s ease;
}

.game-title__link:active {
  transform: scale(.96);
}

.game-title__link:disabled {
  opacity: .55;
  pointer-events: none;
}

.game-kit.game-chooser {
  align-items: stretch;
}

.game-chooser .game-chooser__sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  max-height: none;
  padding:
    calc(env(safe-area-inset-top, 0px) + 22px)
    calc(env(safe-area-inset-right, 0px) + 20px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 20px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.game-chooser__step[hidden] {
  display: none;
}

.game-chooser__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.game-chooser__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
  font: 800 11px/1 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .16s var(--ease, ease), background .2s ease;
}

.game-chooser__back:active {
  transform: scale(.97);
}

.game-chooser__back svg {
  width: 20px;
  height: 20px;
}

.game-chooser__step-title {
  margin: 0;
  font-size: 24px;
  line-height: .95;
  text-shadow: 0 3px 0 rgba(214, 58, 100, .72);
}

.game-chooser__choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.game-chooser__step-head + .game-chooser__choices {
  margin-top: 10px;
}

.game-chooser__choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 92, 138, .16), rgba(10, 9, 10, .7));
  color: var(--white, #fff);
  text-align: left;
  transition: transform .16s var(--ease, ease), border-color .2s ease, background .2s ease;
}

.game-chooser__choice:active {
  transform: scale(.98);
}

.game-chooser__choice--lead {
  min-height: 92px;
  border-color: rgba(255, 92, 138, .45);
  background: linear-gradient(150deg, rgba(255, 92, 138, .28), rgba(10, 9, 10, .72));
}

.game-chooser__choice--lead .game-chooser__choice-name {
  font-size: 34px;
}

a.game-chooser__choice {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.game-chooser__choice.is-on {
  border-color: rgba(255, 92, 138, .6);
  background: linear-gradient(150deg, rgba(255, 92, 138, .3), rgba(10, 9, 10, .72));
}

.game-chooser__choice:disabled {
  opacity: .55;
  pointer-events: none;
}

.game-chooser__choice-name {
  font-size: 28px;
  line-height: .9;
  text-shadow: 0 3px 0 rgba(214, 58, 100, .72);
}

.game-chooser__choice-sub {
  color: var(--grey, #9a9498);
  font: 700 10px/1.3 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-chooser__choices--games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.game-chooser__choices--games .game-chooser__choice {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 14px 10px;
  text-align: center;
}

.game-chooser__choices--games .game-chooser__choice--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  min-height: 96px;
  aspect-ratio: auto;
  padding: 16px 18px;
  text-align: left;
}

.game-chooser__choice-icon {
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}

.game-chooser__choice-icon svg {
  width: 52px;
  height: 52px;
}

.game-chooser__choice--lead .game-chooser__choice-icon {
  color: #ffd5e4;
}

.game-chooser__choice--duel {
  border-color: rgba(246, 200, 96, .55);
  background: linear-gradient(150deg, rgba(246, 200, 96, .26), rgba(10, 9, 10, .74));
}

.game-chooser__choice--duel .game-chooser__choice-icon,
.game-chooser__choice--duel .game-chooser__choice-name {
  color: #f6c860;
}

.game-chooser__choice--duel .game-chooser__choice-name {
  text-shadow: 0 3px 0 rgba(120, 85, 10, .6);
}

.game-chooser__choice-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.game-chooser__choices--games .game-chooser__choice-name {
  font-size: 19px;
  line-height: .95;
}

.game-chooser__choices--games .game-chooser__choice--lead .game-chooser__choice-name {
  font-size: 21px;
}

.game-chooser__choices--games .game-chooser__choice--wide .game-chooser__choice-name {
  font-size: 24px;
}

.game-chooser__choices--games .game-chooser__choice-sub {
  font-size: 9px;
  letter-spacing: .08em;
}

.game-chooser__choices--games .game-chooser__choice--wide .game-chooser__choice-sub {
  font-size: 10px;
}

.game-chooser__label {
  margin: 16px 0 0;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}

.game-chooser__types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.game-chooser__type {
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
  font: 800 11px/1.2 var(--sans, sans-serif);
  letter-spacing: .04em;
  transition: transform .16s var(--ease, ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.game-chooser__type.is-on {
  border-color: var(--glow, #ff5c8a);
  background: linear-gradient(135deg, rgba(255, 92, 138, .38), rgba(214, 58, 100, .24));
  box-shadow: 0 0 18px rgba(255, 92, 138, .24);
}

.game-chooser__type:active {
  transform: scale(.97);
}

.game-chooser .game-daily {
  max-width: none;
  margin-top: 14px;
}

.game-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 0;
  color: var(--grey, #9a9498);
  font: 700 10px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-loading[hidden] {
  display: none;
}

.game-loading__ring {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: var(--glow, #ff5c8a);
  border-radius: 50%;
  animation: game-loading-spin .8s linear infinite;
}

@keyframes game-loading-spin {
  to { transform: rotate(360deg); }
}

.game-title__best {
  margin: 6px 0 0;
  color: var(--grey, #9a9498);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.game-title__best b {
  color: #ffd5e4;
}

.game-title__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 2px 0 0;
}

.game-title__conditions {
  margin: 5px 0 0;
  color: #ffd5e4;
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-pitch__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.game-pitch__label {
  margin: 4px 0 0;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-pitch__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-pitch__option {
  flex: 1 1 72px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
  font: 800 12px/1 var(--sans, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: transform .16s var(--ease, ease), background .2s ease, border-color .2s ease;
}

.game-pitch__option:active {
  transform: scale(.96);
}

.game-pitch__option.is-on {
  border-color: rgba(255, 92, 138, .85);
  background: linear-gradient(135deg, rgba(255, 92, 138, .9), rgba(166, 32, 74, .9));
  box-shadow: 0 0 18px rgba(255, 92, 138, .35);
}

.game-pitch__note {
  min-height: 15px;
  margin: 6px 0 0;
  color: #ffd5e4;
  font: 800 11px/1.3 var(--sans, sans-serif);
  letter-spacing: .04em;
  text-align: center;
}

.game-pitch__help {
  margin: 0 0 8px;
  color: var(--grey, #9a9498);
  font: 600 11px/1.45 var(--sans, sans-serif);
  text-align: center;
}

.game-end {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 50% 26%, rgba(214, 58, 100, .24), transparent 62%),
    rgba(5, 4, 5, .84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .28s var(--ease, ease);
}

.game-end__scroll {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    18px
    18px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.game-end.is-open {
  opacity: 1;
}

.game-end__card {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 26px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62);
  text-align: center;
  transform: translateY(18px) scale(.96);
  transition: transform .38s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-end.is-open .game-end__card {
  transform: none;
}

.game-end__badge {
  display: block;
  width: 82px;
  height: 82px;
  margin: -58px auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255, 92, 138, .5)) drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

.game-end__ribbon {
  position: absolute;
  top: -13px;
  right: 16px;
  margin: 0;
  padding: 8px 15px 10px;
  background: linear-gradient(135deg, var(--glow, #ff5c8a), var(--pink, #d63a64));
  color: var(--white, #fff);
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow: 0 8px 18px rgba(214, 58, 100, .42);
  transform: rotate(4deg);
  animation: game-new-pop .6s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

@keyframes game-new-pop {
  0% { opacity: 0; transform: rotate(4deg) scale(.5); }
  100% { opacity: 1; transform: rotate(4deg) scale(1); }
}

.game-end__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-end__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--white, #fff);
  font-size: 84px;
  line-height: .88;
  text-shadow: 0 0 42px rgba(255, 92, 138, .55);
}

.game-end__score small {
  color: var(--grey, #9a9498);
  font: 700 13px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-end__best {
  margin: 8px 0 0;
  color: var(--grey, #9a9498);
  font: 700 12px/1.2 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.game-end__line {
  margin: 10px 0 0;
  color: #e9dfe3;
  font-size: 13px;
  line-height: 1.4;
}

.game-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border-radius: 99px;
  font: 800 15px/1 var(--sans, sans-serif);
  letter-spacing: .04em;
  transition: transform .16s var(--ease, ease), filter .2s ease;
}

.game-btn:active {
  transform: scale(.97);
}

.game-btn--pink {
  background: linear-gradient(135deg, var(--glow, #ff5c8a), var(--pink, #d63a64) 55%, #a6204a);
  color: var(--white, #fff);
  box-shadow: 0 12px 26px rgba(214, 58, 100, .34);
}

.game-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
}

.game-btn--soft {
  border: 1px solid rgba(255, 92, 138, .55);
  background: linear-gradient(135deg, rgba(255, 92, 138, .42), rgba(166, 32, 74, .34));
  color: #fff;
  box-shadow: 0 8px 20px rgba(214, 58, 100, .18);
}

.game-replay {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 5;
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 0 26px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.game-replay:active {
  transform: translateX(-50%) scale(.97);
}

.game-replay[hidden],
.game-end__replay[hidden] {
  display: none;
}

.game-end__replay {
  margin-top: 14px;
}

.game-shell.is-replay .game-hud,
.game-shell.is-replay .game-hint,
.game-shell.is-replay .game-flash,
.game-shell.is-replay .game-commentary,
.game-shell.is-replay .game-special,
.game-shell.is-replay .game-sudden,
.game-shell.is-replay .game-streak,
.game-shell.is-replay .game-golden,
.game-shell.is-replay .game-toast,
.game-shell.is-replay .game-replay {
  display: none !important;
}

.game-end__note {
  min-height: 16px;
  margin: 10px 0 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  letter-spacing: .04em;
}

.game-end__back {
  display: inline-block;
  margin-top: 12px;
  color: var(--grey, #9a9498);
  font: 700 12px/1 var(--sans, sans-serif);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.game-end__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  width: min(92vw, 340px);
  margin: 4px auto calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.game-end__actions .game-btn {
  min-height: 56px;
  margin: 0;
}

a.game-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.duel__input--code {
  text-transform: uppercase;
}

.game-end__actions [data-again] {
  flex: 1 1 auto;
  font-size: 16px;
}

.game-end__actions [data-menu] {
  flex: 0 0 27%;
}

.game-end__actions [data-share] {
  flex: 0 0 27%;
}

.game-board {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(10, 9, 10, .58);
  text-align: left;
}

.game-board[hidden] {
  display: none;
}

.game-board--end {
  margin-top: 14px;
  background: rgba(255, 255, 255, .04);
}

.game-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.game-board__title {
  margin: 0;
  color: #ffd5e4;
  font: 800 11px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.game-board__reset {
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.game-board__list {
  max-height: clamp(88px, 18vh, 176px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.game-board__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #e9dfe3;
  font: 700 12px/1.2 var(--sans, sans-serif);
}

.game-board__row:first-child {
  border-top: 0;
}

.game-board__row.is-you {
  border-radius: 10px;
  background: rgba(255, 92, 138, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 138, .4);
}

.game-board__row.is-you .game-board__name {
  color: #ffd5e4;
}

.game-board__rank {
  color: var(--grey, #9a9498);
  font: 800 10px/1 var(--sans, sans-serif);
  text-align: right;
}

.game-board__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-board__score {
  color: var(--white, #fff);
  font: 400 16px/1 var(--disp, sans-serif);
}

.game-board__empty {
  margin: 4px 0;
  color: var(--grey, #9a9498);
  font: 700 10px/1.3 var(--sans, sans-serif);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.game-board__empty[hidden] {
  display: none;
}

.game-add {
  margin-top: 14px;
  text-align: left;
}

.game-add[hidden] {
  display: none;
}

.game-add__label {
  display: block;
  margin: 0 0 6px;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-add__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-add__input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: var(--white, #fff);
  font: 700 15px/1 var(--sans, sans-serif);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

.game-add__input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.game-add__button {
  margin-top: 0;
}

.game-add__note {
  min-height: 15px;
  margin: 6px 0 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  text-align: center;
}

.game-confetti {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.game-copy {
  position: fixed;
  top: -1000px;
  left: -1000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
}

@media (max-width: 360px) {
  .game-hud__panel { padding: 6px 8px 8px; border-radius: 16px; }
  .game-score__value { font-size: clamp(24px, 8vw, 30px); }
  .game-score__label,
  .game-score__best { font-size: 8px; letter-spacing: .06em; }
  .game-pips { gap: 5px; }
  .game-pips i { width: 11px; height: 11px; }
  .game-end__score { font-size: 72px; }
  .game-flash strong { font-size: clamp(38px, 15vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .game-hint,
  .game-sudden,
  .game-streak,
  .game-special,
  .game-title__badge,
  .game-golden.is-charged,
  .game-golden.is-armed,
  .game-shell.is-pressure .game-hud__panel,
  .game-shell.is-pressure .game-score__value { animation: none; }
  .game-loading__ring { animation-duration: 2.4s; }
  .game-end,
  .game-end__card,
  .game-end__ribbon,
  .game-btn,
  .game-title,
  .game-hud,
  .game-hint { transition: none; }
  .game-flash.is-show { animation: none; opacity: 1; }
  .game-flash.is-show strong { animation: none; transform: none; }
  .game-flash.is-show small { animation: none; opacity: 1; }
  .game-commentary { transition: opacity .2s linear; transform: translate(-50%, 0); }
  .game-commentary.is-show { transform: translate(-50%, 0); }
}

.game-title__badge {
  margin-top: auto;
}

.game-badges {
  width: 100%;
  max-width: 360px;
  margin: 2px 0 auto;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(10, 9, 10, .58);
  text-align: left;
}

.game-badges__title {
  margin: 0 0 9px;
  color: #ffd5e4;
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.game-badges__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.game-badges__icon {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 92, 138, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 92, 138, .35), rgba(20, 10, 15, .9));
  color: var(--white, #fff);
  font: 400 15px/1 var(--disp, Impact, sans-serif);
  letter-spacing: .02em;
  box-shadow: 0 0 12px rgba(255, 92, 138, .35);
}

.game-badges__label {
  width: 100%;
  overflow: hidden;
  color: #e9dfe3;
  font: 700 8px/1.15 var(--sans, sans-serif);
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.game-badges__item.is-locked .game-badges__icon {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .35);
  box-shadow: none;
}

.game-badges__item.is-locked .game-badges__label {
  color: rgba(154, 148, 152, .6);
}

.game-badges__item.is-pop .game-badges__icon {
  animation: game-badge-pop .6s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

@keyframes game-badge-pop {
  0% { opacity: .2; transform: scale(.4) rotate(-12deg); }
  60% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.game-kit {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.game-kit[hidden] {
  display: none;
}

.game-kit__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 3, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.game-kit__sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  transform: translateY(100%);
  transition: transform .32s var(--ease, ease);
}

.game-kit.is-open .game-kit__sheet {
  transform: none;
}

.game-kit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.game-kit__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 800 9px/1 var(--sans, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.game-kit__title {
  margin: 2px 0 0;
  color: var(--white, #fff);
  font-size: 32px;
  line-height: .9;
}

.game-kit__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
}

.game-kit__close svg {
  width: 18px;
  height: 18px;
}

.game-game-menu__sheet {
  max-width: 400px;
}

.game-game-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.game-game-menu__actions .game-btn {
  margin-top: 0;
}

.game-game-menu__home {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
}

.game-game-menu__home svg {
  width: 19px;
  height: 19px;
}

.game-kit__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.game-kit__preview {
  display: block;
  width: 146px;
  height: 164px;
  margin: 0 auto 2px;
}

.game-kit__label {
  margin-top: 4px;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-kit__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: var(--white, #fff);
  font: 700 15px/1 var(--sans, sans-serif);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

.game-kit__input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.game-kit__note {
  min-height: 15px;
  margin: 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  text-align: center;
}

.game-kit__skins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.game-kit__skin {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: #e9dfe3;
  font: 700 11px/1.1 var(--sans, sans-serif);
  letter-spacing: .03em;
  text-align: left;
  touch-action: manipulation;
}

.game-kit__skin.is-on {
  border-color: rgba(255, 92, 138, .9);
  background: rgba(255, 92, 138, .16);
  color: var(--white, #fff);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 138, .3);
}

.game-kit__skin.is-locked {
  opacity: .48;
}

.game-kit__skin:disabled {
  cursor: not-allowed;
}

.game-kit__skin-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #d9d9d6 58%, #1a1618 59%, #1a1618 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3);
}

.game-kit__skin.is-locked .game-kit__skin-dot {
  filter: grayscale(.6);
}

.game-kit__skin-dot[data-skin-dot="gold"] {
  background: radial-gradient(circle at 32% 28%, #fff6cf, #f0c250 58%, #6b4409 59%, #6b4409 100%);
}

.game-kit__skin-dot[data-skin-dot="retro"] {
  background: radial-gradient(circle at 32% 28%, #f0d6ae, #b77b43 58%, #2a1608 59%, #2a1608 100%);
}

.game-kit__skin-dot[data-skin-dot="pink"] {
  background: radial-gradient(circle at 32% 28%, #ffe1ea, #ff7fa8 58%, #4a0c20 59%, #4a0c20 100%);
}

.game-kit__skin-dot[data-skin-dot="night"] {
  background: radial-gradient(circle at 32% 28%, #e4fbff, #6fe6ff 58%, #071b2c 59%, #071b2c 100%);
  box-shadow: 0 0 8px rgba(90, 220, 255, .65), inset 0 -2px 4px rgba(0, 0, 0, .3);
}

.game-kit__skin-note {
  margin: 1px 0 0;
  color: #b9adb3;
  font: 700 10px/1.3 var(--sans, sans-serif);
  text-align: center;
}

.game-kit__form .game-btn {
  margin-top: 2px;
}

.game-shirt {
  display: block;
  width: 142px;
  height: 158px;
  margin: 14px auto 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45));
}

.game-toast {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 92px);
  left: 50%;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255, 92, 138, .6);
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(34, 8, 18, .96), rgba(10, 9, 10, .94));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 92, 138, .4);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px) scale(.9);
}

.game-toast[hidden] {
  display: none;
}

.game-toast.is-show {
  animation: game-toast-in .4s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

.game-copied-toast {
  z-index: 20;
}

@keyframes game-toast-in {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(.85); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.game-toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 92, 138, .7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 92, 138, .5), rgba(20, 10, 15, .95));
  color: var(--white, #fff);
  font: 400 14px/1 var(--disp, Impact, sans-serif);
  animation: game-badge-pop .6s var(--bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

.game-toast__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.game-toast__copy b {
  color: var(--white, #fff);
  font: 800 12px/1 var(--sans, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.game-toast__copy small {
  color: #ffd5e4;
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 360px) {
  .game-badges { padding: 8px 9px 10px; }
  .game-badges__grid { gap: 7px 4px; }
  .game-badges__label { font-size: 7px; }
  .game-shirt { width: 122px; height: 136px; }
  .game-kit__skin { min-height: 40px; padding: 0 7px; font-size: 10px; }
  .game-kit__skin-dot { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-badges__item.is-pop .game-badges__icon,
  .game-toast__icon,
  .game-toast.is-show,
  .game-kit__sheet,
  .game-pitch__option,
  .game-title__link,
  .game-chooser__choice,
  .game-chooser__type { animation: none; transition: none; }
  .game-toast.is-show { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.game-daily {
  width: 100%;
  max-width: 360px;
  margin: 4px 0 0;
  padding: 12px 14px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(10, 9, 10, .58);
  text-align: left;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.game-daily.is-done {
  border-color: rgba(255, 92, 138, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 138, .3), 0 0 22px rgba(255, 92, 138, .22);
}

.game-daily__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.game-daily__title {
  margin: 0;
  color: #ffd5e4;
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.game-daily__streak {
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-daily__task {
  margin: 9px 0 8px;
  color: var(--white, #fff);
  font: 700 14px/1.25 var(--sans, sans-serif);
}

.game-daily__meter {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
}

.game-daily__meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--glow, #ff5c8a), var(--pink, #d63a64));
  transition: width .3s var(--ease, ease);
}

.game-daily__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0 0;
}

.game-daily__progress {
  color: var(--grey, #9a9498);
  font: 700 10px/1 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.game-daily__done {
  color: #b9ffcf;
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.game-daily__done[hidden] {
  display: none;
}

.game-cup {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 2, 3, .76);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .28s var(--ease, ease);
}

.game-cup[hidden] {
  display: none;
}

.game-cup.is-open {
  opacity: 1;
}

.game-cup__card {
  width: 100%;
  max-width: 360px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(255, 92, 138, .5);
  border-radius: 24px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(255, 92, 138, .25);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-cup.is-open .game-cup__card {
  transform: none;
}

.game-cup__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-cup__title {
  margin: 4px 0 8px;
  color: var(--white, #fff);
  font-size: 38px;
  line-height: .92;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-cup__text {
  margin: 0;
  color: #e9dfe3;
  font: 700 13px/1.4 var(--sans, sans-serif);
}

.game-cup__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.game-cup__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}

.game-cup__row.is-current {
  border-color: rgba(255, 92, 138, .62);
  background: rgba(255, 92, 138, .13);
  box-shadow: 0 0 18px rgba(255, 92, 138, .2);
}

.game-cup__row.is-won {
  border-color: rgba(84, 224, 163, .42);
  background: rgba(84, 224, 163, .09);
}

.game-cup__round {
  color: #ffd5e4;
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-cup__club {
  overflow: hidden;
  color: var(--white, #fff);
  font: 700 12px/1.2 var(--sans, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-cup__score {
  color: var(--grey, #9a9498);
  font: 800 11px/1 var(--sans, sans-serif);
  letter-spacing: .04em;
  white-space: nowrap;
}

.game-cup__row.is-current .game-cup__score {
  color: #ffd5e4;
}

.game-cup__row.is-won .game-cup__score {
  color: #54e0a3;
}

@media (prefers-reduced-motion: reduce) {
  .game-cup,
  .game-cup__card { transition: none; }
}

.game-stats {
  position: absolute;
  inset: 0;
  z-index: 13;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 2, 3, .76);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .28s var(--ease, ease);
}

.game-stats[hidden] {
  display: none;
}

.game-stats.is-open {
  opacity: 1;
}

.game-stats__card {
  width: 100%;
  max-width: 392px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid rgba(255, 92, 138, .5);
  border-radius: 24px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(255, 92, 138, .25);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-stats.is-open .game-stats__card {
  transform: none;
}

.game-stats__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.game-stats__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-stats__title {
  margin: 4px 0 0;
  color: var(--white, #fff);
  font-size: 36px;
  line-height: .92;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-stats__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
}

.game-stats__close svg {
  width: 18px;
  height: 18px;
}

.game-stats__heat {
  margin: 14px 0 8px;
}

.game-stats__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0c1410;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .55);
}

.game-stats__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 0 0 12px;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-stats__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.game-stats__legend-zone {
  flex-basis: 100%;
  justify-content: center;
  color: #54e0a3;
}

.game-stats__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.game-stats__dot--goal { background: #54e0a3; }
.game-stats__dot--save { background: #ff5c6a; }
.game-stats__dot--miss { background: #8f878c; }

.game-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}

.game-stats__grid > div {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  text-align: left;
}

.game-stats__grid > div:first-child {
  grid-column: span 2;
}

.game-stats__grid dt {
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-stats__grid dd {
  margin: 4px 0 0;
  color: var(--white, #fff);
  font: 800 20px/1 var(--sans, sans-serif);
}

.game-stats__grid > div:first-child dd {
  color: #ffd5e4;
  font-size: 26px;
}

.game-stats__empty {
  margin: 0 0 12px;
  color: var(--grey, #9a9498);
  font: 700 11px/1.4 var(--sans, sans-serif);
}

.game-stats__empty[hidden] {
  display: none;
}

.game-stats__card .game-btn {
  margin-top: 8px;
}

.game-stats__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.game-stats__share svg {
  width: 19px;
  height: 19px;
}

.game-stats__note {
  min-height: 15px;
  margin: 8px 0 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  letter-spacing: .04em;
}

.game-stats__note:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .game-stats,
  .game-stats__card { transition: none; }
}

.game-match {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    calc(env(safe-area-inset-right, 0px) + 18px)
    calc(env(safe-area-inset-bottom, 0px) + 18px)
    calc(env(safe-area-inset-left, 0px) + 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease, ease);
}

.game-match[hidden] {
  display: none;
}

.game-match.is-open {
  opacity: 1;
  pointer-events: auto;
}

.game-match__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 3, .78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.game-match__card {
  position: relative;
  width: 100%;
  max-width: 408px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid rgba(255, 92, 138, .5);
  border-radius: 24px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(255, 92, 138, .25);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-match.is-open .game-match__card {
  transform: none;
}

.game-match__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.game-match__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-match__title {
  margin: 4px 0 0;
  color: var(--white, #fff);
  font-size: 34px;
  line-height: .92;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-match__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--white, #fff);
}

.game-match__close svg {
  width: 18px;
  height: 18px;
}

.game-match__name {
  margin: 16px 0 2px;
  color: #ffd5e4;
  font: 800 12px/1 var(--sans, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.game-match__score {
  margin: 0;
  color: var(--white, #fff);
  font-size: 64px;
  line-height: .9;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-match__score small {
  margin-left: 8px;
  color: var(--grey, #9a9498);
  font: 700 12px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-match__position {
  margin: 10px 0 0;
  color: #ffd5e4;
  font: 800 12px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-match__position[hidden] {
  display: none;
}

.game-match__heat {
  margin: 14px 0 8px;
}

.game-match__canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0c1410;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .55);
}

.game-match__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 0 0 12px;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-match__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.game-match__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}

.game-match__grid > div {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  text-align: left;
}

.game-match__grid dt {
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-match__grid dd {
  margin: 4px 0 0;
  color: var(--white, #fff);
  font: 800 20px/1 var(--sans, sans-serif);
}

.game-match__card .game-btn {
  margin-top: 8px;
}

.game-match__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.game-match__share svg {
  width: 19px;
  height: 19px;
}

.game-match__note {
  min-height: 15px;
  margin: 8px 0 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  letter-spacing: .04em;
}

.game-match__note:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .game-match,
  .game-match__card { transition: none; }
}

.game-daily-banner {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 2, 3, .72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .28s var(--ease, ease);
}

.game-daily-banner[hidden] {
  display: none;
}

.game-daily-banner.is-open {
  opacity: 1;
}

.game-daily-banner__card {
  width: 100%;
  max-width: 330px;
  padding: 22px;
  border: 1px solid rgba(255, 92, 138, .5);
  border-radius: 24px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(255, 92, 138, .25);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-daily-banner.is-open .game-daily-banner__card {
  transform: none;
}

.game-daily-banner__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-daily-banner__title {
  margin: 4px 0 8px;
  color: var(--white, #fff);
  font-size: 38px;
  line-height: .92;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-daily-banner__text {
  margin: 0 0 4px;
  color: #e9dfe3;
  font: 700 13px/1.4 var(--sans, sans-serif);
}

.game-daily-banner__note {
  min-height: 16px;
  margin: 8px 0 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
}

@media (max-width: 360px) {
  .game-daily { padding: 10px 11px 11px; }
  .game-daily__task { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-daily,
  .game-daily__meter i,
  .game-daily-banner,
  .game-daily-banner__card { transition: none; }
}

.game-pass,
.game-pass-handover,
.game-pass-winner {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: rgba(3, 2, 3, .72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease, ease);
}

.game-pass[hidden],
.game-pass-handover[hidden],
.game-pass-winner[hidden] {
  display: none;
}

.game-pass-winner {
  z-index: 6;
}

.game-pass.is-open,
.game-pass-handover.is-open,
.game-pass-winner.is-open {
  opacity: 1;
  pointer-events: auto;
}

.game-pass__card,
.game-pass-handover__card,
.game-pass-winner__card {
  width: 100%;
  max-width: 340px;
  margin: auto;
  padding: 22px;
  border: 1px solid rgba(255, 92, 138, .45);
  border-radius: 24px;
  background: linear-gradient(160deg, #1b1519, #111011 58%, #1c1116);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(255, 92, 138, .22);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--bounce, cubic-bezier(.34, 1.56, .64, 1));
}

.game-pass.is-open .game-pass__card,
.game-pass-handover.is-open .game-pass-handover__card,
.game-pass-winner.is-open .game-pass-winner__card {
  transform: none;
}

.game-pass__kicker,
.game-pass-handover__kicker,
.game-pass-winner__kicker {
  margin: 0;
  color: var(--glow, #ff5c8a);
  font: 700 11px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-pass__title,
.game-pass-handover__title,
.game-pass-winner__title {
  margin: 4px 0 8px;
  color: var(--white, #fff);
  font-size: clamp(32px, 10vw, 42px);
  line-height: .92;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 34px rgba(255, 92, 138, .45);
}

.game-pass__text,
.game-pass-handover__role,
.game-pass-winner__line {
  margin: 0 0 4px;
  color: #e9dfe3;
  font: 700 13px/1.4 var(--sans, sans-serif);
}

.game-pass__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  text-align: left;
}

.game-pass__label {
  margin-top: 4px;
  color: var(--grey, #9a9498);
  font: 700 9px/1 var(--sans, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-pass__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: var(--white, #fff);
  font: 700 15px/1 var(--sans, sans-serif);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

.game-pass__input::placeholder {
  color: rgba(255, 255, 255, .35);
}

.game-pass__note {
  min-height: 15px;
  margin: 0;
  color: #ffd5e4;
  font: 700 11px/1.3 var(--sans, sans-serif);
  text-align: center;
}

.game-pass__form .game-btn {
  margin-top: 2px;
}

.game-pass-handover__score,
.game-pass-winner__score {
  margin: 10px 0 4px;
  color: var(--white, #fff);
  font: 400 clamp(26px, 9vw, 38px)/1 var(--disp, Impact, sans-serif);
  letter-spacing: .02em;
}

.game-pass-winner__badge {
  display: block;
  width: 82px;
  height: 82px;
  margin: -58px auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255, 92, 138, .5)) drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

.game-pass-handover .game-btn,
.game-pass-winner .game-btn {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .game-pass,
  .game-pass__card,
  .game-pass-handover,
  .game-pass-handover__card,
  .game-pass-winner,
  .game-pass-winner__card {
    transition: none;
  }
  .game-pass__card,
  .game-pass-handover__card,
  .game-pass-winner__card {
    transform: none;
  }
}

.game-tutorial {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s var(--ease, ease);
}

.game-tutorial[hidden] { display: none; }

.game-tutorial.is-open { opacity: 1; }

.game-tutorial__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 64%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .42) 46%, rgba(0, 0, 0, .66) 100%);
}

.game-tutorial__tip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 82px);
  left: 50%;
  width: min(88%, 360px);
  padding: 15px 18px 17px;
  border: 2px solid rgba(255, 92, 138, .62);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(34, 8, 18, .96), rgba(10, 9, 10, .94));
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 34px rgba(255, 92, 138, .28);
  text-align: center;
  transform: translateX(-50%);
}

.game-tutorial__step {
  display: block;
  color: var(--glow, #ff5c8a);
  font: 800 11px/1 var(--sans, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.game-tutorial__heading {
  display: block;
  margin-top: 6px;
  color: var(--white, #fff);
  font: 400 clamp(30px, 9.5vw, 42px)/.9 var(--disp, Impact, sans-serif);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(214, 58, 100, .9), 0 0 30px rgba(255, 92, 138, .45);
}

.game-tutorial__body {
  display: block;
  margin-top: 9px;
  color: #ffe4ec;
  font: 800 clamp(16px, 4.8vw, 20px)/1.28 var(--sans, sans-serif);
}

.game-tutorial__hand {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 15%);
  left: 50%;
  width: clamp(58px, 17vw, 82px);
  height: clamp(58px, 17vw, 82px);
  color: #fff;
  filter: drop-shadow(0 0 18px rgba(255, 92, 138, .8)) drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  transform: translate(-50%, 0);
  will-change: transform, opacity;
  animation: game-tutorial-swipe-1 1.8s ease-in-out infinite;
}

.game-tutorial__hand svg {
  display: block;
  width: 100%;
  height: 100%;
}

.game-tutorial[data-step="2"] .game-tutorial__hand {
  animation-name: game-tutorial-swipe-2;
  animation-duration: 1.25s;
}

.game-tutorial[data-step="3"] .game-tutorial__hand {
  animation-name: game-tutorial-swipe-3;
  animation-duration: 2.1s;
}

.game-tutorial__power {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 44%);
  left: 50%;
  width: min(76%, 290px);
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(10, 9, 10, .82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
}

.game-tutorial__power[hidden] { display: none; }

.game-tutorial__power-label {
  display: block;
  margin-bottom: 7px;
  color: #ffd5e4;
  font: 800 10px/1 var(--sans, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.game-tutorial__power-track {
  display: block;
  height: 17px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.game-tutorial__power-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54e0a3 0%, #ffd76a 55%, #ff5c8a 100%);
  box-shadow: 0 0 14px rgba(255, 92, 138, .55);
  transform: scaleX(.04);
  transform-origin: left center;
  transition: transform .06s linear;
}

.game-tutorial__skip {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 0 24px;
  pointer-events: auto;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes game-tutorial-swipe-1 {
  0% { opacity: 0; transform: translate(-50%, 28px) scale(.92); }
  16% { opacity: 1; }
  55% { opacity: 1; transform: translate(-50%, -112px) scale(1); }
  76% { opacity: 1; transform: translate(-50%, -146px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -158px) scale(.96); }
}

@keyframes game-tutorial-swipe-2 {
  0% { opacity: 0; transform: translate(-50%, 36px) scale(.9); }
  14% { opacity: 1; }
  58% { opacity: 1; transform: translate(-50%, -178px) scale(1.05); }
  78% { opacity: 1; transform: translate(-50%, -206px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -218px) scale(.96); }
}

@keyframes game-tutorial-swipe-3 {
  0% { opacity: 0; transform: translate(-50%, 30px) rotate(-4deg); }
  14% { opacity: 1; }
  38% { opacity: 1; transform: translate(calc(-50% - 52px), -62px) rotate(-16deg); }
  66% { opacity: 1; transform: translate(calc(-50% + 50px), -148px) rotate(16deg); }
  84% { opacity: 1; transform: translate(-50%, -192px) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -204px) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .game-tutorial,
  .game-tutorial__power-fill {
    transition: none;
  }
  .game-tutorial__hand {
    animation: none;
    transform: translate(-50%, -70px);
  }
}