@import url("/templates/web/css/swisscom-fonts.css");
:root {
  --poster-screen-min-height: 210.833vw;
  --app-height: 100dvh;
  --app-offset-top: 0px;
  color-scheme: light;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "SwisscomTheSans", Arial, sans-serif;
}

main {
  position: relative;
  min-height: 100dvh;
}

main:has(> .view.wrapup),
main:has(> .view.start.start--urgent) {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.label {
  line-height: 20px;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-weight: 100;
}

main.is-view-loading {
  cursor: wait;
  pointer-events: none;
}

main.is-language-menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}

.view {
  position: absolute;
}

.view.language,
.view.register,
.view.code,
.view.sms {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
}

.view.language,
.view.code {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0px;
}

.view.start {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #0445c8 url("/templates/web/img/Swisscom_Gradient_06_RGB 1.png") center/cover no-repeat;
}

.view.start > .screen-language-header,
.view.player > .screen-language-header {
  flex: 0 0 auto;
}

.view.player {
  --player-screen-header-height: calc(max(12px, 4.17vw) + 7.65vw * (40 / 30));
}

.view.player .player__score-reveal .result__topbar,
.view.player .player__standing-reveal .standing__topbar {
  display: none;
}

.view.player .player__standing-reveal .standing__shell {
  padding: calc(var(--player-screen-header-height) + 2.4vw) max(16px, 6.67vw) 5vw max(8px, 2.78vw);
}

.view.start.start--urgent {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #0445c8 url("/templates/web/img/Swisscom_Gradient_06_RGB 1.png") center/cover no-repeat;
}

.view.start.start--urgent .start__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen-transition-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

main.is-screen-transitioning {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ebe6ff 0%, #f1f3ff 20%, #f5f8ff 40%, #f9faff 60%, #fcfdff 80%, #ffffff 100%);
}

main.is-screen-transitioning:has(.view.start) {
  background: #0445c8 url("/templates/web/img/Swisscom_Gradient_06_RGB 1.png") center/cover no-repeat;
}

main.is-screen-transitioning .view.screen-transition {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

main.is-screen-transitioning .screen-transition--out {
  z-index: 2;
  background: transparent;
}

main.is-screen-transitioning .screen-transition--in {
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

main.is-screen-transitioning .screen-transition--in .screen-language-header {
  visibility: hidden;
}

main.is-screen-transitioning .screen-transition-content {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 120ms ease;
  will-change: transform, opacity;
}

main.is-screen-transitioning .screen-transition--out-active .screen-transition-content {
  opacity: 0;
  transform: translate3d(-50vw, 0, 0);
}

main .screen-transition--in .screen-transition-content {
  opacity: 0;
  transform: translate3d(50vw, 0, 0);
}

main.is-screen-transitioning .screen-transition--in-active .screen-transition-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  main.is-screen-transitioning .screen-transition-content {
    transition-duration: 1ms;
  }
}
.screen-language-header {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  z-index: 20;
  display: flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: max(12px, 4.17vw) max(16px, 6.67vw) 0 max(8px, 2.78vw);
}

.screen-language-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 7.65vw;
  height: auto;
}

.screen-language-header__language {
  --language-arrow-size: 3.15vw;
  --language-arrow-gap: 1.35vw;
  --language-item-gap: 2.4vw;
  position: relative;
  z-index: 11;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}

.screen-language-header__trigger,
.screen-language-header__option {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0 calc(var(--language-arrow-size) + var(--language-arrow-gap)) 0 0;
  background: transparent;
  box-shadow: none;
  color: #001155;
  cursor: pointer;
  font-family: "SwisscomTheSansLight", Arial, sans-serif;
  font-size: clamp(14px, 3.9vw, 18px);
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-language-header__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  touch-action: manipulation;
}

.screen-language-header__trigger:focus,
.screen-language-header__option:focus {
  outline: 0;
}

.screen-language-header__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--language-item-gap));
  right: 0;
  z-index: 12;
  flex-direction: column;
  align-items: stretch;
  gap: var(--language-item-gap);
  min-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.screen-language-header__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--language-arrow-size);
  aspect-ratio: 13/8;
  background: url("/templates/web/img/SwisscomTranslationArrow.svg") center/contain no-repeat;
  pointer-events: none;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 160ms ease;
}

.screen-language-header__language.is-open .screen-language-header__arrow {
  transform: translateY(-50%) rotate(180deg);
}

.screen-language-header__language.is-open .screen-language-header__menu {
  display: flex;
}

.screen-language-header__option {
  display: block;
  width: 100%;
  font-size: 4.44vw;
  font-weight: 100;
  line-height: 1.2;
  letter-spacing: 0;
}

.screen-language-header__trigger {
  font-size: 4.44vw;
  font-weight: 100;
  line-height: 1.2;
  letter-spacing: 0;
}

.screen-language-header--light .screen-language-header__trigger,
.screen-language-header--light .screen-language-header__option {
  color: #ffffff;
  font-size: 4.44vw;
  font-weight: 100;
  line-height: 1.2;
  letter-spacing: 0;
}

.screen-language-header--light .screen-language-header__arrow {
  filter: brightness(0) invert(1);
}

.language-game-title {
  margin: 10vw 0 0 9vw;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 15vw;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.01em;
}

.language-game-title__line {
  display: block;
  margin-bottom: 1vw;
}

.language-game-title__line--fussball {
  display: inline-block;
  margin-left: 18.5vw;
  color: #ffffff;
}

.language-game-title__line--game {
  margin-left: 8.5vw;
}

.language-game-title__line--fussball--gradient {
  display: inline-block;
  margin-left: 22.5vw;
  background-image: linear-gradient(70deg, #f20505 20%, #0445c8 40%, #1fb9ff 65%, #033aaa 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.language-game-title--light {
  color: #ffffff;
}

.view.code {
  padding: 0px;
}

.view.noconnection,
.view.closed {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
  color: #001155;
}

.noconnection__header {
  flex: 0 0 auto;
}

.noconnection__header .screen-language-header__trigger,
.noconnection__header .screen-language-header__option {
  color: #001155;
  line-height: 1;
  letter-spacing: 0;
}

.noconnection__stage {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  padding: 0 6.45vw max(4vw, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.noconnection__brand {
  flex: 0 0 auto;
  max-width: none;
}

.noconnection__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(2vw, 4dvh, 5vw) 0;
  text-align: center;
}

.noconnection__title {
  margin: 0;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.25vw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
}

.noconnection__box {
  width: 100%;
  max-width: 86vw;
  margin: clamp(2.5vw, 3.5dvh, 4.75vw) auto 0;
}

.noconnection__content p {
  margin: 0;
  color: #40404a;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.35vw;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}

.noconnection__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: clamp(2vw, 3dvh, 4vw);
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  text-align: center;
}

.noconnection__next-label {
  margin: 0 0 0.65vw;
  font-size: 4.3vw;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.noconnection__event,
.noconnection__timeAndSpace {
  margin: 0.65vw 0 0;
  line-height: 1.08;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-weight: 700;
}

.noconnection--no-event .noconnection__next-label {
  margin-bottom: 0;
}

.view.replay {
  box-sizing: border-box;
  width: 100vw;
  min-height: var(--poster-screen-min-height);
  min-height: max(var(--poster-screen-min-height), 100vh);
  min-height: max(var(--poster-screen-min-height), 100dvh);
  overflow: hidden;
  background: #0445c8;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
}

.view.replay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0445c8 url(/templates/web/img/Swisscom_Gradient_Full_Replay.png) center/cover no-repeat;
  /* transform: scaleY(-1); */
  background-position: 40%;
}

.replay__header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  width: 100%;
  height: auto;
  padding: 4.17vw 6.67vw 0 2.78vw;
}

.replay__header.screen-language-header--light .screen-language-header__trigger,
.replay__header.screen-language-header--light .screen-language-header__option {
  color: #ffffff;
}

.replay__header.screen-language-header--light .screen-language-header__arrow {
  filter: brightness(0) invert(1);
}

.replay__stage {
  position: relative;
  z-index: 1;
  min-height: var(--poster-screen-min-height);
  min-height: max(var(--poster-screen-min-height), 100vh);
  min-height: max(var(--poster-screen-min-height), 100dvh);
}

.replay__body {
  position: relative;
  --replay-pill-overlap: 2.5vw;
  --replay-pill-gap: 3.3vw;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: var(--poster-screen-min-height);
  min-height: max(var(--poster-screen-min-height), 100vh);
  min-height: max(var(--poster-screen-min-height), 100dvh);
  padding: 67.85vw 0 14.2vw;
}

.replay__title.language-game-title {
  position: absolute;
  top: clamp(35px, 14.5vw, 45px);
  left: 7vw;
}

.replay__card {
  position: relative;
  box-sizing: border-box;
  width: 87.1vw;
  min-height: 48.4vw;
  border-radius: 5vw;
  padding: 5.7vw 4.8vw 10vw;
  background: #ffffff;
  color: #001155;
  text-align: center;
}

.replay__percent {
  margin: 0;
  font-size: 20vw;
  line-height: 1.2;
  white-space: nowrap;
}

.replay__summary {
  margin: 2vw 0 0;
  color: #3b3a3f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.9%;
  white-space: pre-line;
  text-align: center;
}

.replay__pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31.8vw;
  height: 5vw;
  min-height: 5vw;
  margin: 0;
  border-radius: 999px;
  padding: 4vw 5vw 4vw 5vw;
  background: #001155;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 500;
  line-height: 1;
  /* letter-spacing: 0.05em; */
  transform: translate(-50%, var(--replay-pill-overlap));
  white-space: nowrap;
}

.replay__past-meta {
  width: 100%;
  margin-top: calc(var(--replay-pill-gap) + var(--replay-pill-overlap));
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-weight: 100;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  font-size: 4vw;
}

.replay__actions {
  margin-top: 7.85vw;
  width: 83.9vw;
}

.replay__button {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 12.45vw;
  border-radius: 4vw;
  border: 0.28vw solid #ffffff;
  padding: 0 4vw;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.replay__button + .replay__button {
  margin-top: 2.55vw;
}

.replay__button--stats {
  background: #ffffff;
  color: #001155;
}

.replay__button.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.replay__button--rules {
  background: transparent;
  color: #ffffff;
}

.replay__footer {
  width: 86vw;
  margin-top: 9.8vw;
  color: #ffffff;
  text-align: center;
}

.replay__ended {
  margin: 0 0 2vw;
  font-family: "SwisscomTheSans", "SwisscomTheSans", Arial, sans-serif;
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 600;
}

.replay__next {
  font-family: "SwisscomTheSans", Arial, sans-serif;
  letter-spacing: 0;
  font-weight: 100;
}

#replay_stats_overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: linear-gradient(180deg, #001155 0%, #040d33 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

#replay_stats_overlay.is-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.replay-stats__shell {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 3.9vw 0 max(4vw, env(safe-area-inset-bottom, 0px));
}

.replay-stats__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 3.3vw;
}

.replay-stats__logo {
  display: block;
  width: 7.65vw;
  height: auto;
  margin-top: 0.4vw;
}

.replay-stats__close {
  appearance: none;
  -webkit-appearance: none;
  width: 8.4vw;
  height: 8.4vw;
  border: 0;
  padding: 0;
  background: transparent url("/templates/web/img/SwisscomClose.svg") center/7.4vw 7.4vw no-repeat;
  cursor: pointer;
  filter: brightness(0) invert(1);
}

.replay-stats__summary {
  margin-top: auto;
  text-align: center;
}

.replay-stats__name {
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.replay-stats__score {
  margin-top: 2.9vw;
  background-image: linear-gradient(90deg, #f20505 20%, #1649d8 43%, #24beff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 24.2vw;
  font-weight: bold;
  line-height: 0.84;
  letter-spacing: -0.07em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.replay-stats__carousel {
  margin-top: clamp(32px, 8vw, 56px);
  margin-left: 0;
}

.replay-stats__track {
  display: flex;
  gap: 2.5vw;
  overflow-x: auto;
  padding: 0 6.4vw 5vw;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6.4vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.replay-stats__track::-webkit-scrollbar {
  display: none;
}

.replay-stats-card {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 87.2vw;
  flex-direction: column;
  min-height: 111.2vw;
  border-radius: 3.7vw;
  padding: 5.8vw 2.85vw 5.5vw 5vw;
  background: #ffffff;
  color: #001155;
  scroll-snap-align: center;
}

.replay-stats-card__eyebrow {
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4vw;
  /* font-weight: 500; */
  /* line-height: 1.1; */
  letter-spacing: 0;
}

.replay-stats-card__title {
  margin: 2.5vw 0 0;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.replay-stats-card__answers {
  margin-top: auto;
  margin-left: -2vw;
}

.replay-stats-card__answer + .replay-stats-card__answer {
  margin-top: 4.7vw;
}

.replay-stats-card__answer {
  position: relative;
  color: #ff7f55;
  padding: 3.55vw 10.5vw 3.15vw 2vw;
}

.replay-stats-card__answer--correct {
  color: #52bc4d;
}

.replay-stats-card__answer--selected {
  box-sizing: border-box;
  border: 0.28vw solid currentColor;
  border-radius: 2.6vw;
}

.replay-stats-card__answer--muted {
  color: #cad7f7;
}

.replay-stats-card__answer-text {
  color: currentColor;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

.replay-stats-card__answer-meta {
  display: flex;
  align-items: center;
  gap: 1.75vw;
  margin-top: 1.55vw;
}

.replay-stats-card__answer-bar {
  position: relative;
  display: block;
  flex: 0 0 50.5vw;
  height: 0.95vw;
  border-radius: 999vw;
  background: rgba(0, 17, 85, 0.12);
  overflow: hidden;
}

.replay-stats-card__answer-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.replay-stats-card__answer-percent {
  color: currentColor;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.55vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.replay-stats-card__answer-marker {
  position: absolute;
  top: 50%;
  right: 2.75vw;
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor url(/templates/web/img/SwisscomCustomer.svg) center/4.8vw 4.8vw no-repeat;
}

.replay-stats-card__points {
  display: flex;
  align-items: baseline;
  gap: 1.8vw;
  margin-top: auto;
  padding-top: 7.4vw;
}

.replay-stats-card__points-label {
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.89vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.replay-stats-card__points-value {
  color: #52bc4d;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.replay-stats__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2vw;
  margin-top: clamp(16px, 4.5vw, 28px);
  margin-bottom: max(4vw, env(safe-area-inset-bottom, 0px));
}

.replay-stats__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 3.08vw;
  height: 3.08vw;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.replay-stats__dot.is-active {
  background: #ffffff;
}

@media (max-width: 480px) {
  .replay-stats-card {
    min-height: 104vw;
    padding: 4.6vw 2.6vw 4.4vw 4.4vw;
  }
  .replay-stats-card__title {
    margin-top: 1.8vw;
  }
  .replay-stats-card__answer + .replay-stats-card__answer {
    margin-top: 3.2vw;
  }
  .replay-stats-card__answer {
    padding: 2.8vw 9.2vw 2.4vw 1.6vw;
  }
  .replay-stats-card__answer-meta {
    margin-top: 1.1vw;
  }
  .replay-stats-card__points {
    padding-top: 5vw;
  }
}
.language__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 6.45vw 3.2vw;
}

.language__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.language__select {
  height: 48px;
  margin-top: 15.2vw;
}

.language__select sdx-select {
  display: block;
  width: 100%;
  transform: none;
}

.language__grow {
  display: none;
}

.language__intro {
  margin-top: 10vw;
  color: #001155;
}

.language__intro h2 {
  margin: 0 0 3.6vw;
  color: #001155;
  font-family: "SwisscomTheSans", "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.language__intro p {
  margin: 0;
  color: #3b3a3f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  max-width: 84.44vw;
}

.language__actions {
  margin-top: 12.8vw;
  margin-bottom: 6.11vw;
}

.language__btn,
.language__btn sdx-button-group,
.language__btn sdx-button {
  display: block;
  width: 100%;
}

.language__btn,
.language__btn sdx-button-group {
  height: 48px;
  overflow: visible;
}

.language__btn sdx-button {
  transform: none;
}

.language__btn sdx-button .clickable {
  min-height: 48px;
}

.language__btn sdx-button .label {
  font-size: 16px;
  line-height: 1.1;
}

.language__cookie {
  color: #3b3a3f;
  font-family: "SwisscomTheSans", "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.61vw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 6vw;
}

.language__link {
  color: #3b3a3f;
  text-underline-offset: 0.5vw;
}

.language__site-link {
  margin-top: 8vw;
  color: #1f1f1f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 2.35vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.code__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 6.45vw 3.2vw;
}

.code__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.code__form {
  margin-top: 10vw;
}

.code__label {
  display: block;
  margin: 0 0 2.5vw;
  color: #3b3a3f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.4vw;
  font-weight: 100;
  line-height: 1.2;
  letter-spacing: 0;
}

#game_code_input {
  display: block;
  width: 100%;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-weight: 100;
  color: #bbbbbb;
}

#game_code_input::part(input),
#game_code_input::part(message),
#game_code_input::part(validation-message),
#game_code_input::part(helper-text) {
  font-family: "SwisscomTheSans", Arial, sans-serif;
}

.code__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  height: 13.6vw;
  border: 1px solid #8a8a8a;
  border-radius: 14px;
  padding: 0 22px;
  background: #ffffff;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.8vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.code__input::placeholder {
  color: #b7b7b7;
  letter-spacing: 0;
  text-transform: none;
}

.code__input:focus {
  outline: none;
  border-color: #001155;
  box-shadow: 0 0 0 1px #001155;
}

.register__error {
  min-height: 5.4vw;
  margin-top: 2.6vw;
  color: #c5162e;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.8vw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.code__intro {
  margin-top: 10vw;
  color: #001155;
}

.code__intro h2 {
  margin: 0 0 3.6vw;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.code__intro p {
  margin: 0;
  color: #3b3a3f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.code__actions {
  margin-top: 12.8vw;
  margin-bottom: 6.11vw;
}

.code__button,
.code__button sdx-button-group,
.code__button sdx-button {
  display: block;
  width: 100%;
}

.code__button,
.code__button sdx-button-group {
  height: 48px;
  overflow: visible;
}

.code__button sdx-button {
  transform: none;
}

.code__button sdx-button .clickable {
  min-height: 48px;
}

.code__button sdx-button .label {
  font-size: 16px;
  line-height: 1.1;
}

.register__checks a,
.register__checks a:visited,
.register__checks a:hover,
.register__checks a:active {
  color: inherit;
}

.register__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 3.45vw 3.2vw;
}

.register__submit {
  margin-top: 5.8vw;
}

.register__fields {
  margin-top: 12.8vw;
}

.view.claim {
  box-sizing: border-box;
  width: 100vw;
  /*min-height: var(--poster-screen-min-height);
  min-height: max(var(--poster-screen-min-height), 100vh);
  min-height: max(var(--poster-screen-min-height), 100dvh);*/
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
  color: #001155;
}

.view.claim.claim--success-active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
}

.claim__stage {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /*min-height: var(--poster-screen-min-height);
  min-height: max(var(--poster-screen-min-height), 100vh);
  min-height: max(var(--poster-screen-min-height), 100dvh);*/
  padding: 15.111vw 7.944vw 7.5vw;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.claim__copy {
  max-width: 78vw;
}

.claim__title {
  margin: 0;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.389vw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.claim__intro {
  margin: 4vw 0 0;
  color: #40404a;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.3vw;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

.claim__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  margin: 20.444vw 0 0;
  border-radius: 5vw;
  overflow: hidden;
  background: linear-gradient(138deg, #ad0f4e 0%, #4f2eb7 24%, #175ce7 68%, #27adff 100%);
  box-shadow: 0 4.444vw 13.333vw rgba(0, 34, 130, 0.12);
}

.claim__preview-image {
  display: block;
  max-width: 72%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.claim__action {
  width: 86.944vw;
  padding-top: 18.889vw;
}

.claim__continue {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 13.056vw;
  padding: 0;
  border: 0;
  border-radius: 3.611vw;
  background: #124bd6;
  color: #ffffff;
  cursor: pointer;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.444vw;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.claim__form-shell {
  display: none;
  width: 100%;
  margin-top: 9.722vw;
}

.claim__success {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  padding-bottom: max(7.5vw, env(safe-area-inset-bottom, 0px));
}

.claim__success-copy {
  padding-top: 4.722vw;
}

.claim__success-heading {
  display: flex;
  align-items: center;
  gap: 2.222vw;
}

.claim__success-icon {
  display: block;
  flex: 0 0 auto;
  width: 10vw;
}

.claim__success-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.claim__success-title {
  margin: 0;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 7vw;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}

.claim__success-text {
  max-width: 84.444vw;
  margin: 8.056vw 0 0;
  color: #183173;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.444vw;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
}

.claim__success-action {
  position: fixed;
  right: 6.45vw;
  bottom: max(6.11vw, env(safe-area-inset-bottom, 0px));
  left: 6.45vw;
  z-index: 4;
  width: auto;
  margin: 0;
  padding-top: 0;
}

.claim__success-button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 13.056vw;
  padding: 0;
  border: 0;
  border-radius: 3.611vw;
  background: #124bd6;
  color: #ffffff;
  cursor: pointer;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.444vw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.claim__row--hidden {
  display: none;
}

.claim__meta {
  margin: 0 0 5.556vw;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.889vw;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

.claim__meta strong {
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-weight: 800;
}

.claim__status {
  display: none;
  margin: 0 0 5.556vw;
  padding: 3.889vw 4.444vw;
  border-radius: 3.611vw;
  background: rgba(0, 17, 85, 0.06);
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.889vw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.claim__status.is-visible {
  display: block;
}

.claim__status--error {
  background: rgba(206, 15, 47, 0.12);
  color: #a1162d;
}

.claim__status--success {
  background: rgba(12, 143, 77, 0.12);
  color: #0b7a42;
}

.claim__status--info {
  background: rgba(18, 75, 214, 0.08);
  color: #001155;
}

.claim__form {
  visibility: visible;
}

.claim__form-title {
  margin: 0 0 5.556vw;
  color: #001155;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 5.278vw;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.claim__row + .claim__row {
  margin-top: 3.333vw;
}

.claim__row sdx-input {
  display: block;
  width: 100%;
}

.claim__row label {
  display: block;
  margin: 0 0 1.944vw;
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.889vw;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.claim__row input,
.claim__row select {
  box-sizing: border-box;
  width: 100%;
  min-height: 13.056vw;
  padding: 0 4.444vw;
  border: 0.278vw solid rgba(0, 17, 85, 0.12);
  border-radius: 3.611vw;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1.667vw 5.556vw rgba(0, 17, 85, 0.06);
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.167vw;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.claim__row input::placeholder {
  color: rgba(0, 17, 85, 0.42);
}

.claim__row input:focus,
.claim__row select:focus,
.claim__continue:focus,
.claim__submit:focus {
  outline: none;
}

.claim__row input:focus,
.claim__row select:focus {
  border-color: #124bd6;
  box-shadow: 0 0 0 0.556vw rgba(18, 75, 214, 0.12);
}

.claim__row--actions {
  margin-top: 10vw !important;
}

.claim__submit {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 13.056vw;
  padding: 0;
  border: 0;
  border-radius: 3.611vw;
  background: #124bd6;
  color: #ffffff;
  cursor: pointer;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.444vw;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.claim__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.claim.claim--form-active .claim__form-shell {
  display: block;
}

.claim.claim--form-active .claim__title {
  display: none;
}

.claim.claim--form-active .claim__copy {
  max-width: 84.444vw;
}

.claim.claim--form-active .claim__intro {
  margin-top: 0;
}

.claim.claim--form-active .claim__meta {
  display: none;
}

.claim.claim--form-active .claim__preview,
.claim.claim--form-active .claim__action {
  display: none;
}

.claim.claim--success-active .claim__copy,
.claim.claim--success-active .claim__preview,
.claim.claim--success-active .claim__action,
.claim.claim--success-active .claim__form-shell {
  display: none;
}

.claim.claim--success-active .claim__success {
  display: flex;
}

.claim.claim--success-active .claim__stage {
  flex: 1 0 auto;
  min-height: 0;
  padding-bottom: max(24vw, 6.11vw + 48px + env(safe-area-inset-bottom, 0px));
}

.claim.claim--loading .claim__stage {
  opacity: 0;
  pointer-events: none;
}

.claim.claim--fading .claim__stage {
  opacity: 0;
  transform: translateY(1.5vw);
  pointer-events: none;
}

.start__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 6.45vw 7vw;
}

.start__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.start__card-shell {
  margin-top: 13.4vw;
}

.start__card {
  box-sizing: border-box;
  border-radius: 4.8vw;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3.2vw 8vw rgba(0, 18, 85, 0.16);
}

.start__card {
  padding: 6.8vw 6.45vw 6.45vw;
}

.start__card-heading {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

.start__card-icon {
  display: block;
  flex: 0 0 auto;
  width: 11vw;
  max-width: 12vw;
}

.start__card-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.start__confirm {
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.start__info {
  margin-top: 5vw;
  color: #3b3a3f;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0;
}

.start__btns {
  margin-top: 7.2vw;
}

.start__button + .start__button {
  margin-top: 2.8vw;
}

.start__button,
.start__button sdx-button-group,
.start__button sdx-button {
  display: block;
  width: 100%;
}

.start__button,
.start__button sdx-button-group {
  min-height: 48px;
  overflow: visible;
}

.start__button sdx-button {
  transform: none;
}

.start__button sdx-button .clickable {
  min-height: 13vw;
  border-radius: 4vw;
  box-shadow: none;
}

.start__button sdx-button .label {
  font-size: 4.45vw;
  line-height: 1.1;
}

.start__button--primary sdx-button .clickable {
  background: #1147d8;
  border: 0;
}

.start__button--primary sdx-button .label {
  color: #ffffff;
}

.start__button--secondary sdx-button .clickable {
  background: transparent;
  border: 1px solid #2d63f5;
}

.start__button--secondary sdx-button .label {
  color: #2d63f5;
}

.start__footer {
  margin-top: 8vw;
  padding-bottom: 1.6vw;
  text-align: center;
}

.start__timer-display {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 14vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.start__timer,
.start__timer-seconds {
  display: inline;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.start__timetext {
  margin-top: 1.6vw;
  color: #ffffff;
  font-family: "SwisscomTheSansLight", Arial, sans-serif;
  font-size: 4.45vw;
  line-height: 1.1;
  letter-spacing: 0;
  /* margin-top: 6vw; */
}

.start__tips {
  display: none;
  margin-top: 13vw;
  text-align: left;
}

.start__tip + .start__tip {
  margin-top: 8vw;
}

.start__tip {
  display: flex;
  align-items: flex-start;
  gap: 5vw;
  font-size: 14vw;
}

.start__tip-icon {
  display: block;
  flex: 0 0 auto;
  width: 10vw;
  max-width: 31px;
  height: auto;
  align-self: center;
}

.start__tip-text {
  margin: 0;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.44vw;
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 100;
}

.start__tip-label {
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-weight: 800;
}

.start--urgent .start__body {
  flex: 0 0 auto;
}

.start--urgent .start__text {
  display: none;
}

.start--urgent .start__footer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin-top: auto;
  padding-bottom: max(3vw, env(safe-area-inset-bottom, 0px));
  overflow: visible;
}

.start--urgent .start__timer-display {
  font-size: clamp(12vw, 18dvh, 20vw);
}

.start--urgent .start__timer-seconds {
  font-size: 1.2em;
  line-height: 0.82;
  transform: translateY(0.08em);
}

.start--urgent .start__timetext {
  margin-top: 2vw;
  font-size: 5vw;
}

.start--urgent .start__tips {
  display: flex;
  flex-direction: column;
  gap: clamp(3vw, 5.5dvh, 7.5vw);
  margin-top: clamp(5vw, 9dvh, 11vw);
  margin-right: 8vw;
  margin-left: 8vw;
  overflow: visible;
  justify-content: space-between;
}

.start--urgent .start__tip + .start__tip {
  margin-top: 0;
}

@media (max-height: 720px) {
  .start--urgent .start__content {
    padding-bottom: 4vw;
  }
  .start--urgent .start__timer-display {
    font-size: clamp(10vw, 14dvh, 16vw);
  }
  .start--urgent .start__timetext {
    margin-top: 1.4vw;
    font-size: 4.2vw;
  }
  .start--urgent .start__tips {
    gap: clamp(2.4vw, 3.8dvh, 5vw);
    margin-top: clamp(4vw, 7dvh, 8vw);
    margin-bottom: clamp(4vw, 7dvh, 8vw);
    min-height: 0;
    flex: 1 1 auto;
  }
}
@media (max-height: 660px) {
  .start--urgent .start__tips .start__tip-text {
    font-size: 4vw;
  }
}
.view.player {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #0445c8 url(/templates/web/img/Swisscom_Gradient_Player.png) center/cover no-repeat;
  background-position: 20%;
}

.view.player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(72vw 64vw at 18% 0%, rgba(49, 110, 255, 0.22) 0%, rgba(49, 110, 255, 0) 68%), radial-gradient(64vw 58vw at 0% 100%, rgba(240, 67, 41, 0.16) 0%, rgba(240, 67, 41, 0) 62%), linear-gradient(180deg, #11195a 0%, #0c1450 48%, #070d37 100%);
  transition: 0.25s ease all;
}

.player__shell {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 6.45vw max(8.9vw, env(safe-area-inset-bottom, 0px));
}

.player__chrome,
.player__result-stage {
  position: relative;
  z-index: 1;
}

.player__result-stage {
  transform-origin: var(--player-result-origin-x, 50%) var(--player-result-origin-y, 42%);
  will-change: transform, opacity;
}

.initial .player__result-stage {
  opacity: 0;
}

.player__next-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, 4.17vw) 6.45vw max(8.9vw, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.view.player.player--blank-waiting .player__next-loader {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.player__next-loader.player__next-loader--hiding {
  opacity: 0;
  visibility: hidden;
}

.player__next-loader-text {
  margin: 0;
  max-width: 79.5vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 600;
  line-height: 1.19;
  text-align: center;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

.player__next-loader-dots {
  display: inline-block;
  min-width: 3ch;
  text-align: left;
  position: absolute;
}

.view.player.player--question-text-only .player__panel {
  opacity: 0;
  visibility: hidden;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  pointer-events: none;
}

.player__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.player__logo,
.screen-language-header__logo.player__logo {
  display: block;
  flex: 0 0 auto;
  width: 7.65vw;
  height: auto;
}

.player__score {
  margin-top: 2.45vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 7.3vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: right;
  white-space: nowrap;
}

.player__progress {
  margin-top: 6.45vw;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -0.8vw, 0);
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.player__progress--ready {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s, 0s, 0s;
}

.player__progress-bars {
  display: flex;
  align-items: center;
  gap: 2.5vw;
}

.player__progress-bars:empty,
.player__progress-text:empty,
.player__feedback:empty {
  display: none;
}

.player__progress-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 1.1vw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}

.player__progress-segment--complete {
  background: rgba(255, 255, 255, 0.96);
}

.player__progress-segment--active {
  background: rgba(255, 255, 255, 0.82);
}

.player__progress-text {
  margin-top: 1.65vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 5vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.player__question-wrap {
  margin-top: 14.8vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player__feedback {
  margin: 0 0 2.9vw;
  color: rgba(255, 255, 255, 0.96);
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.15vw;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-align: center;
}

.player__question {
  margin: 0;
  max-width: 79.5vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.67vw;
  font-weight: 600;
  line-height: 1.19;
  text-align: center;
  text-wrap: balance;
  letter-spacing: -2%;
}

.player__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  isolation: isolate;
  min-height: 101vw;
  margin-top: 21.4vw;
  margin-bottom: max(6vw, env(safe-area-inset-bottom, 0px));
  padding: 26vw 7.1vw 9.2vw;
  box-shadow: 0 6.5vw 13vw rgba(6, 17, 78, 0.16);
}

.player__panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.player__panel-bg-top,
.player__panel-bg-bottom {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  margin-bottom: -1px;
}

.player__panel-bg-top {
  flex: 0 0 auto;
  aspect-ratio: 312/47;
  background-image: url("/templates/web/img/SwisscomQuizBubble_top.png");
  background-size: 100% 100%;
}

.player__panel-bg-bottom {
  flex: 1 1 auto;
  min-height: 0;
  background-image: url("/templates/web/img/SwisscomQuizBubbleBottom.png");
  background-size: 100% 100%;
}

.player__timer,
.player__choices,
.player__submit {
  z-index: 1;
}

.player__timer {
  --timer-progress: 1;
  --timer-circumference: 263.89;
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 23.35vw;
  height: 23.35vw;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 8.7vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 180ms ease;
}

.player__timer-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  overflow: visible;
  pointer-events: none;
}

.player__timer-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 5;
  stroke-linecap: butt;
}

.player__timer-ring-progress {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  stroke-dashoffset: 0;
}

.player__timer-value {
  position: relative;
  z-index: 1;
}

.player__timer--timeout {
  opacity: 0.38;
}

.player__timer--timeout .player__timer-ring-progress {
  opacity: 0;
}

.player__timer--timeout-exit {
  animation: player-timer-timeout-scale-out-center 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation-delay: 2700ms;
  transform-origin: center;
}

.player__timer--result {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.player__timer--result .player__timer-ring {
  display: none;
}

.player__timer--result {
  font-size: 0;
  line-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  perspective: 800px;
  -webkit-perspective: 800px;
}

.player__timer--result-correct {
  background: transparent;
}

.player__timer--result-wrong {
  background: transparent;
}

.view.player.player--unanswered-reveal #qTimer.player__timer--result .player__timer-icon {
  display: none;
}

.view.player.player--skip-result-tip .result__tip {
  display: none !important;
}

.player__timer-icon {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  width: 22vw;
  height: 22vw;
  border: 0;
  object-fit: contain;
}

@-webkit-keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.player__timer--result .player__timer-icon {
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-bck-center 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.player__timer--result-correct .player__timer-icon {
  width: 22vw;
  height: 22vw;
}

.player__timer--result-wrong .player__timer-icon {
  width: 22vw;
  height: 22vw;
}

.player__timer:empty {
  display: none;
}

.player__choices {
  list-style: none;
  margin: 0;
  padding: 0;
}

.player__choices li {
  position: relative;
}

.player__choices li + li {
  margin-top: 3vw;
}

.player__choices button,
.player__choices label,
.player__submit,
.view.player .answer-result__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 16.45vw;
  border-radius: 3.55vw;
  padding: 0 5vw;
  text-align: center;
}

.player__choices button,
.player__choices label {
  border: 0.33vw solid #2d63f5;
  background: #ffffff;
  color: #2e58d4;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.55vw;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.player__choices button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.player__choices label {
  cursor: pointer;
}

.player__choices input[name=choice] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.player__submit {
  margin-top: 4.45vw;
  border: 0;
  background: #1147d8;
  color: #ffffff;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.7vw;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  cursor: pointer;
}

.player__submit:disabled {
  opacity: 0.58;
  cursor: default;
}

.view.player .answer-result {
  list-style: none;
}

.view.player .answer-result__inner {
  border: 0.33vw solid #cad7f7;
  background: #ffffff;
  color: #cad7f7;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.55vw;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.view.player .answer-result--selected-animate-correct {
  animation: answer-result-correct-fill 700ms ease both;
}

.view.player .answer-result--selected-animate-wrong {
  animation: answer-result-wrong-fill 700ms ease both;
}

.view.player .answer-result:not(.answer-result--image) .answer-result--correct-selected {
  border-color: #7bbf61;
  background: #7bbf61;
  color: #ffffff;
}

.view.player .answer-result:not(.answer-result--image) .answer-result--correct-reveal {
  border-color: #7bbf61;
  background: #ffffff;
  color: #6ebd54;
}

.view.player .answer-result:not(.answer-result--image) .answer-result--wrong-selected {
  border-color: #ee8b5f;
  background: #ee8b5f;
  color: #ffffff;
}

.view.player .answer-result--correct-selected.answer-result--image .image-answer-choice__badge {
  animation: answer-result-correct-fill 700ms ease both;
}

.view.player .answer-result--wrong-selected.answer-result--image .image-answer-choice__badge {
  animation: answer-result-wrong-fill 700ms ease both;
}

.view.player #choices li.choice--eliminated,
.view.player #choices li.choice--timed-out {
  opacity: 0.3;
}

.view.player #choices li.choice--eliminated button,
.view.player #choices li.choice--eliminated label,
.view.player #choices li.choice--timed-out button,
.view.player #choices li.choice--timed-out label {
  /* border-color: #d6dce8;
  background: #eceff5;
  color: #8d98ad;
  box-shadow: none;*/
}

.view.player #choices li.choice--eliminated button,
.view.player #choices li.choice--eliminated input,
.view.player #choices li.choice--eliminated label,
.view.player #choices li.choice--timed-out button,
.view.player #choices li.choice--timed-out input,
.view.player #choices li.choice--timed-out label {
  cursor: not-allowed;
}

.player__choices li.choice--locked-selected button,
.player__choices li.choice--locked-selected label,
.player__choices button.is-selected:disabled,
.player__choices input[name=choice]:disabled:checked + label {
  border-color: #ffffff;
  background: #3951c7;
  color: #ffffff;
}

.player__choices li.choice--locked-muted {
  opacity: 0.22;
}

.player__panel--image-choices {
  overflow: visible;
  padding: 26vw 0 0;
  min-height: 101vw;
}

.player__panel--image-choices .player__choices {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: -26vw 0 0;
}

.player__panel--image-choices .player__choices > li + li {
  margin-top: 0;
  border-top: 0.28vw solid #000000;
}

.player__panel--image-choices .player__choices > li.choice--image,
.player__panel--image-choices .player__choices > li.answer-result--image {
  flex: 1 1 50%;
  min-height: 0;
  overflow: visible;
}

.image-answer-choice {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.image-answer-choice__media {
  position: absolute;
  left: -1.4vw;
  bottom: 0;
  z-index: 1;
  width: 34.6vw;
  height: 100%;
  pointer-events: none;
}

.image-answer-choice__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  user-select: none;
  -webkit-user-drag: none;
}

.player__choices li.choice--image button.image-answer-choice__badge,
.player__choices li.choice--image label.image-answer-choice__badge,
.view.player .answer-result--image .image-answer-choice__badge {
  position: absolute;
  top: 50%;
  right: 5.15vw;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57.6vw;
  min-height: 14.15vw;
  border-radius: 3.55vw;
  padding: 2.7vw 4.6vw;
  transform: translateY(-50%);
  text-align: center;
}

.player__choices li.choice--image button.image-answer-choice__badge,
.player__choices li.choice--image label.image-answer-choice__badge {
  border: 0.33vw solid #2d63f5;
  background: #ffffff;
  color: #2e58d4;
}

.player__choices input[name=choice]:checked + label,
.player__choices button.is-selected,
.player__choices li.choice--image input[name=choice]:checked + label.image-answer-choice__badge,
.player__choices li.choice--image button.image-answer-choice__badge.is-selected,
.player__choices li .choice--locked-selected button.image-answer-choice__badge,
.player__choices li .choice--locked-selected label.image-answer-choice__badge,
.player__choices li.choice--image input[name=choice]:disabled:checked + label.image-answer-choice__badge,
.player__choices li.choice--image button.image-answer-choice__badge.is-selected:disabled {
  border-color: #ffffff;
  background: #3951c7;
  color: #ffffff;
}

.player__choices li.choice--image input[name=choice] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.image-answer-choice__label {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.2;
  letter-spacing: inherit;
  white-space: normal;
  text-wrap: balance;
}

.player__panel--image-choices .answer-result__inner {
  justify-content: flex-start;
}

.view.player .answer-result--image .answer-result__inner {
  min-height: 43.9vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.view.player .answer-result--image .image-answer-choice__badge {
  border: 0.33vw solid #cad7f7;
  background: #ffffff;
  color: #cad7f7;
}

.view.player .answer-result--correct-selected.answer-result--image .image-answer-choice__badge {
  border-color: #7bbf61;
  background: #7bbf61;
  color: #ffffff;
}

.view.player .answer-result--correct-reveal.answer-result--image .image-answer-choice__badge {
  border-color: #7bbf61;
  background: #ffffff;
  color: #6ebd54;
}

.view.player .answer-result--wrong-selected.answer-result--image .image-answer-choice__badge {
  border-color: #ee8b5f;
  background: #ee8b5f;
  color: #ffffff;
}

.view.player .answer-result--muted.answer-result--image .image-answer-choice__badge,
.view.player .answer-result--wrong-muted.answer-result--image .image-answer-choice__badge {
  border-color: #cad7f7;
  background: #ffffff;
  color: #cad7f7;
}

.view.player .player__choices li.choice--image .image-answer-choice__badge.answer-result--correct-selected,
.view.player .answer-result--image.answer-result--correct-selected .image-answer-choice__badge {
  border-color: #7bbf61;
  background: #7bbf61;
  color: #ffffff;
}

.view.player .player__choices li.choice--image .image-answer-choice__badge.answer-result--correct-reveal,
.view.player .answer-result--image.answer-result--correct-reveal .image-answer-choice__badge {
  border-color: #7bbf61;
  background: #ffffff;
  color: #6ebd54;
}

.view.player .player__choices li.choice--image .image-answer-choice__badge.answer-result--wrong-selected,
.view.player .answer-result--image.answer-result--wrong-selected .image-answer-choice__badge {
  border-color: #ee8b5f;
  background: #ee8b5f;
  color: #ffffff;
}

.rules__overlay,
.terms__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);
  max-height: var(--app-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.rules__overlay {
  z-index: 9999;
  background: linear-gradient(180deg, #ebe6ff 0%, #f1f3ff 25%, #ffffff 100%);
  padding: 0;
}

.rules__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.rules__shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 4.85vw 6.45vw max(3.2vw, env(safe-area-inset-bottom, 0px));
}

.rules__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.rules__logo {
  flex: 0 0 auto;
  margin-left: -3.5vw;
  margin-top: -0.9vw;
}

.rules__close {
  position: relative;
  flex: 0 0 auto;
  width: 10.2vw;
  height: 10.2vw;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.rules__close::before,
.rules__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 2px;
  background: #1f1f1f;
  border-radius: 999px;
  transform-origin: center;
}

.rules__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.rules__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.rules__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-top: 14.5vw;
  padding-bottom: max(6vw, env(safe-area-inset-bottom, 0px));
}

.rules__title,
.prices__title {
  margin: 0;
  color: #001155;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 7.2vw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.prices__title {
  margin-top: 12.8vw;
}

.rules__box,
.prices__box {
  margin-top: 4.2vw;
}

.rules__content,
.prices__content {
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.6vw;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

.terms__overlay {
  z-index: 10000;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
  padding: 0;
}

.terms__shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 4.85vw 6.45vw max(3.2vw, env(safe-area-inset-bottom, 0px));
}

.terms__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.terms__logo {
  flex: 0 0 auto;
  margin-left: -3.5vw;
  margin-top: -0.9vw;
}

.terms__close {
  position: relative;
  flex: 0 0 auto;
  width: 10.2vw;
  height: 10.2vw;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.terms__close::before,
.terms__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  height: 2px;
  background: #1f1f1f;
  border-radius: 999px;
  transform-origin: center;
}

.terms__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.terms__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.terms__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-top: 14.5vw;
  padding-bottom: max(6vw, env(safe-area-inset-bottom, 0px));
}

.terms__title {
  margin: 0;
  color: #001155;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 7.2vw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.terms__subtitle {
  margin: 12.8vw 0 0;
  color: #001155;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 5.8vw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.terms__box {
  margin-top: 4.2vw;
}

.terms__content {
  color: #001155;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.6vw;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

.rules__content p,
.rules__content li,
.rules__content h1,
.rules__content h2,
.rules__content h3,
.rules__content h4,
.rules__content h5,
.rules__content h6,
.prices__content p,
.prices__content li,
.prices__content h1,
.prices__content h2,
.prices__content h3,
.prices__content h4,
.prices__content h5,
.prices__content h6,
.terms__content p,
.terms__content li,
.terms__content h1,
.terms__content h2,
.terms__content h3,
.terms__content h4,
.terms__content h5,
.terms__content h6 {
  color: #001155;
}

.rules__content a,
.rules__content a:visited,
.rules__content a:hover,
.rules__content a:active,
.prices__content a,
.prices__content a:visited,
.prices__content a:hover,
.prices__content a:active,
.terms__content a,
.terms__content a:visited,
.terms__content a:hover,
.terms__content a:active {
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
}

.rules__content ul,
.rules__content ol,
.prices__content ul,
.prices__content ol,
.terms__content ul,
.terms__content ol {
  margin: 4.8vw 0 0;
  padding-left: 5.4vw;
  list-style-position: outside;
}
.rules__content ul li,
.rules__content ol li,
.prices__content ul li,
.prices__content ol li,
.terms__content ul li,
.terms__content ol li {
  font-size: var(--sdx-font-body-base-fontSize);
}

.rules__content ul,
.prices__content ul,
.terms__content ul {
  list-style-type: disc;
}

.rules__content ol,
.prices__content ol,
.terms__content ol {
  list-style-type: decimal;
}

.rules__content li + li,
.prices__content li + li,
.terms__content li + li {
  margin-top: 1vw;
}

.rules__content img,
.prices__content img,
.terms__content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.terms__site-link {
  margin-top: auto;
  padding-top: 6vw;
}

.terms__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.is-hidden {
  display: none;
}

.is-showing {
  display: block;
}

.question--correct {
  color: #1b5e20;
}

.question--wrong {
  color: #8e0000;
}

.view.result {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  background: radial-gradient(72vw 64vw at 18% 0%, rgba(49, 110, 255, 0.22) 0%, rgba(49, 110, 255, 0) 68%), radial-gradient(64vw 58vw at 0% 100%, rgba(240, 67, 41, 0.16) 0%, rgba(240, 67, 41, 0) 62%), linear-gradient(180deg, #11195a 0%, #0c1450 48%, #070d37 100%);
}

.game-result__shell {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4.2vw 6vw max(8vw, env(safe-area-inset-bottom, 0px));
  color: #ffffff;
}

.game-result__logo {
  display: block;
  width: 7.65vw;
  max-width: 38px;
  height: auto;
  margin-top: 0.4vw;
  margin-left: -2.4vw;
}

.game-result__score {
  margin: 22vw auto 0;
  background-image: linear-gradient(90deg, #f34729 0%, #2f47d7 31%, #68c2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 23.5vw;
  font-weight: 800;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.game-result__header {
  margin: 15vw auto 0;
  max-width: 78vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 7vw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  text-wrap: balance;
}

.game-result__text {
  margin: 5vw auto 0;
  max-width: 78vw;
  color: #dbe4ff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.6vw;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.player__score-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: 0.25s ease all;
}

.player__score-reveal.is-active {
  opacity: 1;
  visibility: visible;
}

.result__shell {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  padding: max(12px, 4.17vw) max(16px, 6.67vw) max(8vw, env(safe-area-inset-bottom, 0px)) max(16px, 6.67vw);
}

.result__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.result__logo {
  display: block;
  flex: 0 0 auto;
  width: 7.65vw;
  height: auto;
  margin: 0;
}

.result__stage {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: clamp(12vw, 11vh, 22vw);
}

.result--no-gain .result__stage {
  padding-top: 0;
}

.player__score-reveal:not(.result--no-gain) .result__stage {
  padding-top: 0;
}

.result__success-cluster {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 88vw;
  transform: translate3d(-50%, -46%, 0);
}

.result--no-gain .result__success-cluster {
  display: none;
}

.result__success-cluster .result__pill-anchor {
  min-height: clamp(12vw, 8vh, 16vw);
}

.result__success-cluster .result__points {
  margin-top: clamp(2vw, 2.5vh, 5vw);
}

.result__success-cluster .result__text {
  margin: clamp(2.5vw, 3vh, 5.5vw) auto 0;
}

.player__score-reveal[data-result-phase=score] .result__success-cluster .result__pill-anchor,
.player__score-reveal[data-result-phase=text] .result__success-cluster .result__pill-anchor,
.player__score-reveal[data-result-phase=complete] .result__success-cluster .result__pill-anchor {
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.result__pill-anchor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(14vw, 9vh, 18vw);
  perspective: 1400px;
  overflow: visible;
}

.result--no-gain .result__pill-anchor {
  display: none;
}

.result__gain-shell {
  opacity: 0;
  transform: translateY(-600px) rotateX(-30deg) scale(0);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.result__gain {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 14.6vw;
  padding: 0 7.8vw;
  border-radius: 999px;
  background: #86cd5c;
  box-shadow: 0 1.8vw 4vw rgba(35, 88, 24, 0.22);
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 8.9vw;
  font-weight: 700;
  line-height: 1;
  /* letter-spacing: -0.045em; */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.result__points {
  margin-top: clamp(8vw, 10vh, 19vw);
  opacity: 0;
  transform: translate3d(0, 2.4vw, 0) scale(0.92);
  background-image: linear-gradient(90deg, #f34729 0%, #2f47d7 31%, #68c2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 23.5vw;
  font-weight: 800;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1.2vw 4vw rgba(15, 27, 97, 0.18);
}

.result--no-gain .result__points {
  margin-top: 0;
}

.result__header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.result__text {
  max-width: 78vw;
  margin: clamp(8vw, 9vh, 19vw) auto 0;
  opacity: 0;
  transform: translateY(2.8vw);
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 6vw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.result__text--hattrick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2vw;
}

.result__text--hattrick strong {
  display: block;
  background-image: linear-gradient(90deg, #f34729 0%, #2f47d7 48%, #68c2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: clamp(44px, 14vw, 76px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.result__text--hattrick span {
  display: block;
  max-width: 74vw;
}

.result__fail-copy,
.result__tip {
  position: absolute;
  left: 50%;
  width: 77.8vw;
  opacity: 0;
  pointer-events: none;
}

.result__fail-copy {
  --result-fail-copy-y: -50%;
  top: 50%;
  transform: translate3d(-50%, calc(var(--result-fail-copy-y) + 2.8vw), 0);
}

.result__fail-line {
  margin: 0;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 5.7vw;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.result__fail-line + .result__fail-line {
  margin-top: 4.6vw;
}

.result__fail-line--accent {
  margin-top: 4.8vw;
  background-image: linear-gradient(90deg, #f20505 15%, #2f47d7 45%, #68c2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 10.25vw;
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  /* font-size: 5.95vw; */
  font-weight: 700;
}

.result__tip {
  right: auto;
  bottom: max(8vw, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.1vw;
  width: 74.2vw;
  transform: translate3d(-50%, 2vw, 0);
}

.result__tip-icon {
  flex: 0 0 auto;
  width: 5.5vw;
  height: 5.5vw;
  margin-top: 0.4vw;
  background: url("/templates/web/img/SwisscomStarsSymbol.svg") center/contain no-repeat;
}

.result__tip-text {
  margin: 0;
  color: #c7d0ef;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 3.55vw;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-align: left;
}

.result--no-gain .result__points,
.result--no-gain .result__text {
  display: none;
}

.result--no-gain .result__shape--triangle-green,
.result--no-gain .result__shape--ball-green {
  color: #ff885f;
}

.result__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: 0.25s ease all;
}

.result__shape {
  position: absolute;
  display: block;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: translate3d(var(--shape-x, 0), 0, 0) rotate(var(--shape-rotate, 0deg));
}

.result__shape--triangle-green {
  color: #86cd5c;
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__shape--triangle-muted {
  color: #a6adc4;
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__shape--ball-green {
  color: #86cd5c;
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__shape--ball-muted {
  color: #a6adc4;
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__shape--triangle-a {
  top: 8.8%;
  left: 29.4%;
  width: 8.4vw;
  height: 8.4vw;
  --shape-rotate: 29deg;
  --fail-start-y: 18vw;
  --fail-duration: 5400ms;
  --success-duration: 4600ms;
  --fail-delay: 0ms;
}

.result__shape--triangle-b {
  top: 7.1%;
  right: 28.2%;
  width: 6.5vw;
  height: 6.5vw;
  --shape-rotate: 180deg;
  --fail-start-y: 14vw;
  --fail-duration: 5900ms;
  --success-duration: 5000ms;
  --fail-delay: 120ms;
  opacity: 0.85;
}

.result__shape--triangle-c {
  top: 33.1%;
  right: 18.8%;
  width: 6.3vw;
  height: 6.3vw;
  --shape-rotate: 180deg;
  --fail-start-y: 19vw;
  --fail-duration: 6200ms;
  --success-duration: 5300ms;
  --fail-delay: 240ms;
  opacity: 0.82;
}

.result__shape--triangle-d {
  top: 43.2%;
  right: 4.6%;
  width: 8vw;
  height: 8vw;
  --shape-rotate: 28deg;
  --fail-start-y: 16vw;
  --fail-duration: 5700ms;
  --success-duration: 4850ms;
  --fail-delay: 180ms;
}

.result__shape--ball-a {
  top: 14.2%;
  right: 8.6%;
  width: 8.3vw;
  height: 8.3vw;
  --fail-start-y: 17vw;
  --fail-duration: 6100ms;
  --success-duration: 5200ms;
  --fail-delay: 80ms;
}

.result__shape--ball-b {
  top: 24.1%;
  left: 8.3%;
  width: 8.2vw;
  height: 8.2vw;
  --fail-start-y: 21vw;
  --fail-duration: 5600ms;
  --success-duration: 4750ms;
  --fail-delay: 30ms;
}

.result__shape--ball-c {
  top: 25.1%;
  left: 50%;
  width: 6.7vw;
  height: 6.7vw;
  --shape-x: -50%;
  --fail-start-y: 20vw;
  --fail-duration: 6000ms;
  --success-duration: 5100ms;
  --fail-delay: 160ms;
}

.result__shape--ball-d {
  top: 31.2%;
  left: 40.1%;
  width: 6.2vw;
  height: 6.2vw;
  --fail-start-y: 15vw;
  --fail-duration: 6500ms;
  --success-duration: 5500ms;
  --fail-delay: 260ms;
  opacity: 0.82;
}

.result__confetti {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1vw);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.result__confetti-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.6vw;
  height: 4.6vw;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  transform-origin: center;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.result__confetti-piece:nth-child(1) {
  --x-end: -3vw;
  --y-end: -15vw;
  --rotate-end: -90deg;
  --duration: 820ms;
  --delay: 0ms;
  width: 3.8vw;
  height: 3.8vw;
  color: #ffffff;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(2) {
  --x-end: -5.2vw;
  --y-end: -17vw;
  --rotate-end: -40deg;
  --duration: 900ms;
  --delay: 30ms;
  width: 4vw;
  height: 4vw;
  color: #86cd5c;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__confetti-piece:nth-child(3) {
  --x-end: -1.6vw;
  --y-end: -18.6vw;
  --rotate-end: -120deg;
  --duration: 880ms;
  --delay: 20ms;
  width: 3.2vw;
  height: 3.2vw;
  color: #69c2ff;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(4) {
  --x-end: 0.8vw;
  --y-end: -16vw;
  --rotate-end: 90deg;
  --duration: 840ms;
  --delay: 0ms;
  width: 3.9vw;
  height: 3.9vw;
  color: #ffd65f;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__confetti-piece:nth-child(5) {
  --x-end: 3.3vw;
  --y-end: -18vw;
  --rotate-end: 110deg;
  --duration: 920ms;
  --delay: 25ms;
  width: 3.9vw;
  height: 3.9vw;
  color: #ffffff;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(6) {
  --x-end: 5.4vw;
  --y-end: -15.5vw;
  --rotate-end: 70deg;
  --duration: 860ms;
  --delay: 15ms;
  width: 3.8vw;
  height: 3.8vw;
  color: #69c2ff;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__confetti-piece:nth-child(7) {
  --x-end: -6vw;
  --y-end: -13.8vw;
  --rotate-end: -160deg;
  --duration: 780ms;
  --delay: 40ms;
  width: 4.1vw;
  height: 4.1vw;
  color: #ffd65f;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__confetti-piece:nth-child(8) {
  --x-end: -2.4vw;
  --y-end: -12.4vw;
  --rotate-end: -30deg;
  --duration: 760ms;
  --delay: 65ms;
  width: 3.6vw;
  height: 3.6vw;
  color: #86cd5c;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(9) {
  --x-end: 2.1vw;
  --y-end: -13.4vw;
  --rotate-end: 120deg;
  --duration: 800ms;
  --delay: 50ms;
  width: 3.6vw;
  height: 3.6vw;
  color: #ffffff;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.result__confetti-piece:nth-child(10) {
  --x-end: 6.3vw;
  --y-end: -12.8vw;
  --rotate-end: 160deg;
  --duration: 770ms;
  --delay: 35ms;
  width: 4vw;
  height: 4vw;
  color: #86cd5c;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(11) {
  --x-end: -0.2vw;
  --y-end: -20.2vw;
  --rotate-end: -170deg;
  --duration: 940ms;
  --delay: 10ms;
  width: 3.3vw;
  height: 3.3vw;
  color: #69c2ff;
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.result__confetti-piece:nth-child(12) {
  --x-end: 1.5vw;
  --y-end: -19.2vw;
  --rotate-end: 150deg;
  --duration: 900ms;
  --delay: 55ms;
  width: 3.8vw;
  height: 3.8vw;
  color: #ffd65f;
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.view.player[data-result-phase=hold],
.view.player[data-result-phase=screen-transition],
.view.player[data-result-phase=pill-enter],
.view.player[data-result-phase=celebrate],
.view.player[data-result-phase=fail-main],
.view.player[data-result-phase=fail-tip],
.view.player[data-result-phase=score],
.view.player[data-result-phase=text],
.view.player[data-result-phase=complete] {
  overflow: hidden;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

.view.player[data-result-phase=hold] .player__shell,
.view.player[data-result-phase=screen-transition] .player__shell,
.view.player[data-result-phase=pill-enter] .player__shell,
.view.player[data-result-phase=celebrate] .player__shell,
.view.player[data-result-phase=fail-main] .player__shell,
.view.player[data-result-phase=fail-tip] .player__shell,
.view.player[data-result-phase=score] .player__shell,
.view.player[data-result-phase=text] .player__shell,
.view.player[data-result-phase=complete] .player__shell {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.view.player[data-result-phase=pill-enter] .player__chrome,
.view.player[data-result-phase=celebrate] .player__chrome,
.view.player[data-result-phase=fail-main] .player__chrome,
.view.player[data-result-phase=fail-tip] .player__chrome,
.view.player[data-result-phase=score] .player__chrome,
.view.player[data-result-phase=text] .player__chrome,
.view.player[data-result-phase=complete] .player__chrome,
.view.player[data-result-phase=pill-enter] .player__result-stage,
.view.player[data-result-phase=celebrate] .player__result-stage,
.view.player[data-result-phase=fail-main] .player__result-stage,
.view.player[data-result-phase=fail-tip] .player__result-stage,
.view.player[data-result-phase=score] .player__result-stage,
.view.player[data-result-phase=text] .player__result-stage,
.view.player[data-result-phase=complete] .player__result-stage {
  display: none;
}

.view.player[data-result-phase=screen-transition]::before {
  animation: player-points-backdrop-in 500ms linear both;
}

.view.player[data-result-phase=pill-enter]::before,
.view.player[data-result-phase=celebrate]::before,
.view.player[data-result-phase=fail-main]::before,
.view.player[data-result-phase=fail-tip]::before,
.view.player[data-result-phase=score]::before,
.view.player[data-result-phase=text]::before,
.view.player[data-result-phase=complete]::before {
  opacity: 1;
}

.view.player[data-result-phase=screen-transition] .player__result-stage {
  animation: player-result-scale-out-center 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.view.player[data-result-phase=pill-enter] .player__result-stage,
.view.player[data-result-phase=celebrate] .player__result-stage,
.view.player[data-result-phase=fail-main] .player__result-stage,
.view.player[data-result-phase=fail-tip] .player__result-stage,
.view.player[data-result-phase=score] .player__result-stage,
.view.player[data-result-phase=text] .player__result-stage,
.view.player[data-result-phase=complete] .player__result-stage {
  opacity: 0;
  transform: scale(0.05);
  pointer-events: none;
}

.view.player[data-result-phase=pill-enter] .player__chrome {
  animation: player-result-chrome-out 160ms ease both;
}

.view.player[data-result-phase=celebrate] .player__chrome,
.view.player[data-result-phase=fail-main] .player__chrome,
.view.player[data-result-phase=fail-tip] .player__chrome,
.view.player[data-result-phase=score] .player__chrome,
.view.player[data-result-phase=text] .player__chrome,
.view.player[data-result-phase=complete] .player__chrome,
.view.player[data-result-phase=screen-transition] .player__chrome {
  opacity: 0;
  pointer-events: none;
}

.player__score-reveal.result--no-gain[data-result-phase=screen-transition] {
  opacity: 1;
  visibility: visible;
}

.player__score-reveal[data-result-phase=pill-enter] {
  animation: player-result-shell-in 180ms ease-out both;
}

.player__score-reveal[data-result-phase=fail-main],
.player__score-reveal[data-result-phase=fail-tip],
.player__score-reveal[data-result-phase=celebrate],
.player__score-reveal[data-result-phase=score],
.player__score-reveal[data-result-phase=text],
.player__score-reveal[data-result-phase=complete] {
  opacity: 1;
  visibility: visible;
}

.player__score-reveal.result--no-gain[data-result-phase=screen-transition] .result__topbar,
.player__score-reveal.result--no-gain[data-result-phase=screen-transition] .result__fail-copy,
.player__score-reveal.result--no-gain[data-result-phase=screen-transition] .result__tip {
  opacity: 0;
}

.player__score-reveal.result--no-gain[data-result-phase=fail-main] .result__topbar,
.player__score-reveal.result--no-gain[data-result-phase=fail-tip] .result__topbar,
.player__score-reveal.result--no-gain[data-result-phase=complete] .result__topbar {
  opacity: 1;
}

.player__score-reveal.result--no-gain[data-result-phase=fail-main] .result__fail-copy {
  animation: result-fail-copy-in 520ms ease-out both;
}

.player__score-reveal.result--no-gain[data-result-phase=fail-tip] .result__fail-copy,
.player__score-reveal.result--no-gain[data-result-phase=complete] .result__fail-copy {
  opacity: 1;
  transform: translate3d(-50%, var(--result-fail-copy-y), 0);
}

.player__score-reveal.result--no-gain[data-result-phase=fail-tip] .result__tip {
  animation: result-fail-tip-in 520ms ease-out both;
}

.player__score-reveal.result--no-gain[data-result-phase=complete] .result__tip {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.result--fail-confetti-active .result__shape {
  animation: result-fail-confetti-float var(--fail-duration, 5600ms) linear infinite both;
  animation-delay: var(--fail-delay, 0ms);
}

.player__score-reveal:not(.result--no-gain) .result__shape {
  opacity: 0;
}

.player__score-reveal[data-result-phase=pill-enter] .result__gain-shell,
.player__score-reveal[data-result-phase=celebrate] .result__gain-shell {
  animation: result-slide-in-elliptic-top-fwd 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.player__score-reveal[data-result-phase=celebrate] .result__gain {
  animation: result-pulsate 1050ms ease-in-out 1 both;
}

.player__score-reveal[data-result-phase=celebrate] .result__confetti-piece {
  animation: result-confetti-up var(--duration) cubic-bezier(0.17, 0.67, 0.3, 1) both;
  animation-delay: var(--delay);
}

.player__score-reveal:not(.result--no-gain)[data-result-phase=score] .result__shape,
.player__score-reveal:not(.result--no-gain)[data-result-phase=text] .result__shape,
.player__score-reveal:not(.result--no-gain)[data-result-phase=complete] .result__shape {
  animation: result-success-confetti-drop var(--success-duration, 5000ms) linear infinite both;
  animation-delay: var(--fail-delay, 0ms);
}

.player__score-reveal[data-result-phase=score] .result__confetti-piece,
.player__score-reveal[data-result-phase=text] .result__confetti-piece,
.player__score-reveal[data-result-phase=complete] .result__confetti-piece {
  animation: none;
  opacity: 0;
}

.player__score-reveal[data-result-phase=score] .result__gain-shell,
.player__score-reveal[data-result-phase=text] .result__gain-shell,
.player__score-reveal[data-result-phase=complete] .result__gain-shell {
  animation: result-slide-out-fwd-center 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.player__score-reveal[data-result-phase=score] .result__points,
.player__score-reveal[data-result-phase=text] .result__points,
.player__score-reveal[data-result-phase=complete] .result__points {
  animation: result-score-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.player__score-reveal[data-result-phase=text] .result__text,
.player__score-reveal[data-result-phase=complete] .result__text {
  animation: result-text-in 520ms ease-out both;
}

.result--pill-enter .result__gain-shell {
  animation: result-slide-in-elliptic-top-fwd 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.result--pill-celebrate .result__gain {
  animation: result-pulsate 1050ms ease-in-out 1 both;
}

.result--pill-celebrate .result__confetti-piece {
  animation: result-confetti-up var(--duration) cubic-bezier(0.17, 0.67, 0.3, 1) both;
  animation-delay: var(--delay);
}

.result--pill-exit .result__gain-shell {
  animation: result-slide-out-fwd-center 700ms cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

.result--score-visible .result__points {
  animation: result-score-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result--text-visible .result__text {
  animation: result-text-in 520ms ease-out both;
}

@keyframes result-slide-in-elliptic-top-fwd {
  0% {
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes result-slide-out-fwd-center {
  0% {
    transform: translateZ(1px);
    opacity: 1;
  }
  100% {
    transform: translateZ(600px);
    opacity: 0;
  }
}
@keyframes result-pulsate {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}
@keyframes result-score-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 2.4vw, 0) scale(0.92);
    filter: blur(0.7vw);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}
@keyframes result-text-in {
  0% {
    opacity: 0;
    transform: translateY(2.8vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes result-confetti-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
  }
  14% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x-end), var(--y-end), 0) rotate(var(--rotate-end)) scale(1);
  }
}
@keyframes result-fail-copy-in {
  0% {
    opacity: 0;
    transform: translate3d(-50%, calc(var(--result-fail-copy-y, 0%) + 2.8vw), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, var(--result-fail-copy-y, 0%), 0);
  }
}
@keyframes result-fail-tip-in {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 2vw, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes result-fail-confetti-float {
  0% {
    opacity: 0;
    transform: translate3d(var(--shape-x, 0), var(--fail-start-y, 16vw), 0) rotate(var(--shape-rotate, 0deg));
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--shape-x, 0), 0, 0) rotate(var(--shape-rotate, 0deg));
  }
}
@keyframes result-success-confetti-drop {
  0% {
    opacity: 0;
    transform: translate3d(var(--shape-x, 0), calc(-1 * var(--fail-start-y, 16vw)), 0) rotate(var(--shape-rotate, 0deg));
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--shape-x, 0), 0, 0) rotate(var(--shape-rotate, 0deg));
  }
}
@keyframes player-points-backdrop-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes player-result-scale-out-center {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(0);
  }
}
@keyframes player-timer-timeout-scale-out-center {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.38;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
@keyframes player-result-chrome-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes player-result-shell-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes player-result-badge-in {
  0% {
    transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes answer-result-correct-fill {
  0% {
    border-color: #cad7f7;
    background: #ffffff;
    color: #cad7f7;
  }
  100% {
    border-color: #7bbf61;
    background: #7bbf61;
    color: #ffffff;
  }
}
@keyframes answer-result-wrong-fill {
  0% {
    border-color: #cad7f7;
    background: #ffffff;
    color: #cad7f7;
  }
  100% {
    border-color: #ee8b5f;
    background: #ee8b5f;
    color: #ffffff;
  }
}
.player__standing-reveal {
  --standing-column-scale: 0;
  --standing-cap-travel-ratio: 0;
  --standing-chart-floor: 32%;
  --standing-plot-top: 78%;
  --standing-top5-bottom: 67%;
  --standing-average-bottom: 41%;
  --standing-cap-height: 27.45%;
  --standing-column-travel: 18.55%;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.player__standing-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(72vw 64vw at 18% 0%, rgba(49, 110, 255, 0.22) 0%, rgba(49, 110, 255, 0) 68%), radial-gradient(64vw 58vw at 0% 100%, rgba(240, 67, 41, 0.12) 0%, rgba(240, 67, 41, 0) 62%), linear-gradient(180deg, #11195a 0%, #0c1450 48%, #070d37 100%);
  transition: opacity 320ms ease-out;
}

.player__standing-reveal.is-active {
  opacity: 1;
  visibility: visible;
}

.view.player:has(.player__standing-reveal.is-active) {
  overflow: hidden;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=card],
.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] {
  pointer-events: auto;
}

.standing__shell {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3vw 5vw 5vw;
  -webkit-overflow-scrolling: touch;
}

.player__standing-reveal[data-standing-phase=review-exit]::before,
.player__standing-reveal[data-standing-phase=backdrop]::before,
.player__standing-reveal[data-standing-phase=benchmarks]::before,
.player__standing-reveal[data-standing-phase=grow]::before,
.player__standing-reveal[data-standing-phase=title]::before,
.player__standing-reveal[data-standing-phase=card]::before,
.player__standing-reveal[data-standing-phase=complete]::before {
  opacity: 1;
}

.standing__topbar,
.standing__body,
.standing__summary,
.standing__chart,
.standing__card,
.standing__card-confetti,
.standing__floaters {
  position: relative;
  z-index: 1;
}

.standing__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2.4vw;
  min-height: 0;
  padding-bottom: 5vw;
}

.standing__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
}

.standing__logo {
  display: block;
  width: 7.65vw;
  max-width: 38px;
  height: auto;
  margin-top: 0.45vw;
}

.standing__summary {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 4.8vw;
  opacity: 0;
  text-align: center;
}

.standing__title {
  margin: 0;
  background-image: linear-gradient(70deg, #f20505 20%, #0445c8 40%, #1fb9ff 65%, #033aaa 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: clamp(2.15rem, 10.5vw, 3.65rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: center;
  font-weight: 700;
}

.standing--variant-top-5 .standing__title,
.standing--variant-top-20 .standing__title,
.standing--variant-top-50 .standing__title {
  font-size: 17.78vw;
  background-image: linear-gradient(70deg, #f20505 25%, #0445c8 40%, #1fb9ff 65%, #033aaa 100%);
}

.standing__subtitle {
  margin: 2.4vw auto 0;
  max-width: 74vw;
  color: #ffffff;
  font-family: "SwisscomTheSansLight", Arial, sans-serif;
  font-size: 4.4vw;
  line-height: 1.24;
  opacity: 0;
  text-wrap: balance;
  text-align: center;
}

.standing__chart {
  position: relative;
  flex: 0 0 auto;
  height: clamp(360px, 96vw, 560px);
  min-height: 360px;
  width: 100%;
  margin-bottom: 3vw;
  overflow: visible;
  opacity: 0;
}

.standing__grid,
.standing__rise-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.standing__grid-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.28vw;
  background: rgba(198, 208, 241, 0.19);
}

.standing__grid-line--step-0 {
  bottom: calc(var(--standing-plot-top) * 0 / 6);
}

.standing__grid-line--step-1 {
  bottom: calc(var(--standing-plot-top) * 1 / 6);
}

.standing__grid-line--step-2 {
  bottom: calc(var(--standing-plot-top) * 2 / 6);
}

.standing__grid-line--step-3 {
  bottom: calc(var(--standing-plot-top) * 3 / 6);
}

.standing__grid-line--step-4 {
  bottom: calc(var(--standing-plot-top) * 4 / 6);
}

.standing__grid-line--step-5 {
  bottom: calc(var(--standing-plot-top) * 5 / 6);
}

.standing__grid-line--step-6 {
  bottom: calc(var(--standing-plot-top) * 6 / 6);
}

.standing__callout {
  position: absolute;
  left: 0;
  margin: 0;
  color: #ff2d8d;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.55vw;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  opacity: 0;
}

.standing__benchmark {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 0;
  opacity: 0;
}

.standing__benchmark--top {
  bottom: var(--standing-top5-bottom);
}

.standing__benchmark--average {
  bottom: var(--standing-average-bottom);
}

.standing__benchmark-line {
  width: 100%;
  border-top: 0.33vw dashed rgba(255, 255, 255, 0.88);
}

.standing__benchmark-meta {
  position: absolute;
  top: calc(100% + 1.25vw);
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3vw;
}

.standing__benchmark-label,
.standing__benchmark-value {
  color: #ffffff;
  font-family: "SwisscomTheSansLight", Arial, sans-serif;
  font-size: 4.1vw;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: pre-line;
}

.standing__benchmark-label--icon {
  position: relative;
  padding-left: 5.6vw;
}

.standing__benchmark-label--icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2vw;
  width: 4.2vw;
  height: 4.2vw;
  background: url("/templates/web/img/SwisscomTrophyWhiteSymbol.svg") center/contain no-repeat;
}

.standing__benchmark-value {
  text-align: right;
}

.standing__column-track {
  position: absolute;
  left: 50%;
  z-index: 3;
  bottom: var(--standing-chart-floor);
  width: 33vw;
  height: calc(100% - var(--standing-chart-floor));
  opacity: 0;
  transform: translateX(-50%);
  overflow: visible;
}

.standing__column-stem {
  position: absolute;
  left: 50%;
  z-index: 2;
  bottom: 0;
  width: 33vw;
  height: var(--standing-column-travel);
  transform: translateX(-50%) scaleY(var(--standing-column-scale));
  transform-origin: 50% 100%;
  will-change: transform;
}

.standing__column-stem-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #184ba7 0%, rgba(31, 92, 226, 0.88) 34%, rgba(22, 63, 170, 0.76) 62%, rgba(12, 31, 82, 0) 100%);
}

.standing__column-cap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--standing-cap-travel-ratio) * var(--standing-column-travel) - 1px);
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 33vw;
  min-height: max(var(--standing-cap-height), 28vw);
  height: max(var(--standing-cap-height), 28vw);
  padding-top: 4.2vw;
  border-radius: 16.5vw 16.5vw 0 0;
  background: linear-gradient(180deg, #2a83ff 0%, #1c63db 58%, #184ba7 100%);
  transform: translateX(-50%);
  will-change: bottom;
}

.standing__column-star {
  flex: 0 0 auto;
  width: clamp(28px, 7.6vw, 44px);
  height: clamp(28px, 7.6vw, 44px);
  background: url("/templates/web/img/SwisscomSymbolStar.svg") center/contain no-repeat;
}

.standing__column-kicker {
  display: block;
  margin-top: 2.2vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.35vw;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
}

.standing__column-value {
  display: block;
  margin-top: 1.25vw;
  color: #ffffff;
  font-family: "SwisscomTheSansHeavy", "SwisscomTheSans", Arial, sans-serif;
  font-size: 6.8vw;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-align: center;
}

.standing__rise-confetti {
  display: none;
}

.standing__floaters {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms ease;
}

.standing__floater,
.standing__rise-piece,
.standing__card-piece {
  position: absolute;
  display: block;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.standing__floater {
  opacity: 0;
}

.standing__floater--triangle,
.standing__rise-piece--triangle,
.standing__card-piece--triangle {
  -webkit-mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomTriangleConfetti.svg");
}

.standing__floater--ball,
.standing__rise-piece--ball,
.standing__card-piece--ball {
  -webkit-mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
  mask-image: url("/templates/web/img/SwisscomFootballConfetti.svg");
}

.standing__floater--triangle-a {
  top: 12.8vw;
  left: 23.4vw;
  width: 8.4vw;
  height: 8.4vw;
  color: #2b82ff;
  transform: rotate(28deg);
}

.standing__floater--triangle-b {
  top: 11.7vw;
  right: 24vw;
  width: 6.3vw;
  height: 6.3vw;
  color: #a6adc4;
  transform: rotate(180deg);
}

.standing__floater--triangle-c {
  top: 40.5vw;
  right: 19vw;
  width: 6.8vw;
  height: 6.8vw;
  color: #a6adc4;
  transform: rotate(180deg);
}

.standing__floater--triangle-d {
  top: 57.2vw;
  right: 20.8vw;
  width: 6.6vw;
  height: 6.6vw;
  color: #8e96bc;
  transform: rotate(180deg);
}

.standing__floater--triangle-e {
  top: 84.6vw;
  left: 5.4vw;
  width: 6.9vw;
  height: 6.9vw;
  color: #a6adc4;
  transform: rotate(10deg);
}

.standing__floater--ball-a {
  top: 18.8vw;
  right: 9vw;
  width: 8.2vw;
  height: 8.2vw;
  color: #2b82ff;
}

.standing__floater--ball-b {
  top: 24vw;
  left: 8vw;
  width: 8.3vw;
  height: 8.3vw;
  color: #2b82ff;
}

.standing__floater--ball-c {
  top: 25.8vw;
  left: 49.6%;
  width: 6.8vw;
  height: 6.8vw;
  color: #2b82ff;
  transform: translateX(-50%);
}

.standing__floater--ball-d {
  top: 31.8vw;
  left: 35.4vw;
  width: 6.6vw;
  height: 6.6vw;
  color: #a6adc4;
}

.standing__floater--ball-e {
  top: 76.4vw;
  left: 36.8vw;
  width: 6.7vw;
  height: 6.7vw;
  color: #2b82ff;
}

.standing__rise-piece {
  left: 50%;
  bottom: -12vw;
  width: 6.8vw;
  height: 6.8vw;
  opacity: 0;
}

.standing__rise-piece--a {
  --rise-x: -37vw;
  --rise-y: -72vw;
  --rise-rotate: -105deg;
  --rise-delay: 0ms;
  width: 7.4vw;
  height: 7.4vw;
  color: #2b82ff;
}

.standing__rise-piece--b {
  --rise-x: -24vw;
  --rise-y: -82vw;
  --rise-rotate: -90deg;
  --rise-delay: 120ms;
  color: #4d97ff;
}

.standing__rise-piece--c {
  --rise-x: -11vw;
  --rise-y: -96vw;
  --rise-rotate: -40deg;
  --rise-delay: 220ms;
  color: #8bb8ff;
}

.standing__rise-piece--d {
  --rise-x: 7vw;
  --rise-y: -88vw;
  --rise-rotate: 65deg;
  --rise-delay: 90ms;
  color: #2b82ff;
}

.standing__rise-piece--e {
  --rise-x: 20vw;
  --rise-y: -78vw;
  --rise-rotate: 120deg;
  --rise-delay: 180ms;
  width: 7.65vw;
  height: 7.2vw;
  color: #68c2ff;
}

.standing__rise-piece--f {
  --rise-x: 33vw;
  --rise-y: -69vw;
  --rise-rotate: 150deg;
  --rise-delay: 40ms;
  color: #2b82ff;
}

.standing__rise-piece--g {
  --rise-x: -4vw;
  --rise-y: -108vw;
  --rise-rotate: -160deg;
  --rise-delay: 260ms;
  width: 5.8vw;
  height: 5.8vw;
  color: #b6c4ea;
}

.standing__rise-piece--h {
  --rise-x: 15vw;
  --rise-y: -102vw;
  --rise-rotate: 105deg;
  --rise-delay: 310ms;
  width: 5.9vw;
  height: 5.9vw;
  color: #8bb8ff;
}

.standing__card-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.standing__card-piece {
  left: 50%;
  bottom: 19vw;
  width: 6.1vw;
  height: 6.1vw;
  opacity: 0;
}

.standing__card-piece--a {
  --card-x: -31vw;
  --card-y: -17vw;
  --card-rotate: -90deg;
  --card-delay: 0ms;
  color: #68c2ff;
}

.standing__card-piece--b {
  --card-x: -18vw;
  --card-y: -20vw;
  --card-rotate: -40deg;
  --card-delay: 60ms;
  color: #2b82ff;
}

.standing__card-piece--c {
  --card-x: -5vw;
  --card-y: -16vw;
  --card-rotate: -140deg;
  --card-delay: 120ms;
  color: #8bb8ff;
}

.standing__card-piece--d {
  --card-x: 8vw;
  --card-y: -22vw;
  --card-rotate: 100deg;
  --card-delay: 20ms;
  color: #2b82ff;
}

.standing__card-piece--e {
  --card-x: 21vw;
  --card-y: -18vw;
  --card-rotate: 45deg;
  --card-delay: 100ms;
  color: #68c2ff;
}

.standing__card-piece--f {
  --card-x: 31vw;
  --card-y: -14vw;
  --card-rotate: 140deg;
  --card-delay: 150ms;
  color: #b6c4ea;
}

.standing__card {
  position: fixed;
  right: 5vw;
  left: 5vw;
  bottom: max(4vw, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  width: auto;
  margin-top: auto;
  padding: 5.5vw 5vw 4.8vw;
  border-radius: 4vw;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4vw 11vw rgba(4, 11, 43, 0.26);
  opacity: 0;
}

.standing__card-icon {
  width: 16vw;
  height: 16vw;
  margin: 0 auto 3.8vw;
  background: url("/templates/web/img/SwisscomTrophySymbol.svg") center/contain no-repeat;
  opacity: 0;
}

.standing__card-text {
  margin: 0;
  color: #3f3f4a;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.65vw;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
}

.standing__card-button {
  display: block;
  width: 100%;
  margin-top: 5vw;
  border: 0;
  border-radius: 3.4vw;
  padding: 4.3vw 4vw;
  background: #1a4fca;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 5vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
}

.standing__card-button:focus-visible {
  outline: 0.5vw solid rgba(29, 87, 210, 0.36);
  outline-offset: 0.8vw;
}

.player__score-reveal.result--puff-out .result__shell {
  animation: standing-puff-out-center 700ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.player__standing-reveal[data-standing-phase=backdrop] .standing__topbar,
.player__standing-reveal[data-standing-phase=benchmarks] .standing__topbar,
.player__standing-reveal[data-standing-phase=grow] .standing__topbar,
.player__standing-reveal[data-standing-phase=title] .standing__topbar,
.player__standing-reveal[data-standing-phase=card] .standing__topbar,
.player__standing-reveal[data-standing-phase=complete] .standing__topbar,
.player__standing-reveal[data-standing-phase=backdrop] .standing__chart,
.player__standing-reveal[data-standing-phase=benchmarks] .standing__chart,
.player__standing-reveal[data-standing-phase=grow] .standing__chart,
.player__standing-reveal[data-standing-phase=title] .standing__chart,
.player__standing-reveal[data-standing-phase=card] .standing__chart,
.player__standing-reveal[data-standing-phase=complete] .standing__chart {
  opacity: 1;
}

.player__standing-reveal[data-standing-phase=benchmarks] .standing__benchmark {
  animation: standing-fade-in 240ms ease-out 100ms both;
}

.player__standing-reveal[data-standing-phase=grow] .standing__column-track {
  animation: standing-fade-in 240ms ease-out both;
}

.player__standing-reveal[data-standing-phase=grow] .standing__benchmark,
.player__standing-reveal[data-standing-phase=title] .standing__benchmark,
.player__standing-reveal[data-standing-phase=card] .standing__benchmark,
.player__standing-reveal[data-standing-phase=complete] .standing__benchmark,
.player__standing-reveal[data-standing-phase=grow] .standing__column-track,
.player__standing-reveal[data-standing-phase=title] .standing__column-track,
.player__standing-reveal[data-standing-phase=card] .standing__column-track,
.player__standing-reveal[data-standing-phase=complete] .standing__column-track,
.player__standing-reveal[data-standing-phase=backdrop] .standing__floaters,
.player__standing-reveal[data-standing-phase=benchmarks] .standing__floaters,
.player__standing-reveal[data-standing-phase=grow] .standing__floaters,
.player__standing-reveal[data-standing-phase=title] .standing__floaters,
.player__standing-reveal[data-standing-phase=card] .standing__floaters,
.player__standing-reveal[data-standing-phase=complete] .standing__floaters {
  opacity: 1;
}

.player__standing-reveal.standing--confetti-done .standing__floaters {
  opacity: 0;
}

.player__standing-reveal[data-standing-phase=backdrop] .standing__floater,
.player__standing-reveal[data-standing-phase=benchmarks] .standing__floater,
.player__standing-reveal[data-standing-phase=grow] .standing__floater,
.player__standing-reveal[data-standing-phase=title] .standing__floater,
.player__standing-reveal[data-standing-phase=card] .standing__floater,
.player__standing-reveal[data-standing-phase=complete] .standing__floater {
  animation: result-success-confetti-drop var(--success-duration, 5000ms) linear infinite both;
  animation-delay: var(--fail-delay, 0ms);
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=title] .standing__summary,
.player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__summary,
.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__summary {
  opacity: 1;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=title] .standing__title {
  animation: standing-slide-in-blurred-bottom 800ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__title,
.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__title {
  opacity: 1;
  transform: none;
  filter: none;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=title] .standing__subtitle {
  animation: standing-fade-in 360ms ease-out 120ms both;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__subtitle,
.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__subtitle {
  opacity: 1;
}

.standing__title.standing__title--pulsate {
  animation: result-pulsate 1.5s ease-in-out 1 both;
}

.standing__subtitle.standing__subtitle--pulsate {
  animation: result-pulsate 1.05s ease-in-out 1 both;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__card {
  animation: standing-slide-in-blurred-bottom 800ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__card {
  opacity: 1;
  transform: none;
  filter: none;
}

.player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__card-icon,
.player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__card-icon {
  opacity: 1;
}

.player__standing-reveal.standing--card-confetti[data-standing-phase=card] .standing__card-piece {
  animation: standing-card-confetti 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--card-delay, 0ms);
}

.player__standing-reveal.standing--variant-top-5 .standing__card-icon {
  display: block;
}

.player__standing-reveal:not(.standing--variant-top-5) .standing__card-icon {
  display: none;
}

.player__standing-reveal.standing--variant-fail .standing__callout {
  opacity: 1;
}

@keyframes standing-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes standing-puff-out-center {
  0% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
}
@keyframes standing-slide-in-blurred-bottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes standing-floater-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes standing-rise-confetti {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) rotate(0deg) scale(0.7);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0.88;
    transform: translate3d(calc(-50% + var(--rise-x, 0)), var(--rise-y, -80vw), 0) rotate(var(--rise-rotate, 0deg)) scale(1);
  }
}
@keyframes standing-card-confetti {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) rotate(0deg) scale(0.7);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--card-x, 0)), var(--card-y, -20vw), 0) rotate(var(--card-rotate, 0deg)) scale(1);
  }
}
.view.wrapup {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #0445c8 url(/templates/web/img/Swisscom_Gradient_Player.png) center/cover no-repeat;
}

.wrapup__stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.wrapup__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

main.is-screen-transitioning:has(.view.wrapup) {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #0445c8 url(/templates/web/img/Swisscom_Gradient_Player.png) center/cover no-repeat;
}

main.is-screen-transitioning .wrapup__panel.screen-transition {
  z-index: 1;
}

main.is-screen-transitioning .wrapup__panel.screen-transition--out-active {
  z-index: 2;
}

.wrapup__body,
.wrapup__body_next {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 18vw 7vw max(14vw, env(safe-area-inset-bottom, 0px));
}

.wrapup__text,
.wrapup__text_next {
  width: 86vw;
  max-width: 86vw;
  margin-top: 4vw;
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 4.6vw;
  line-height: 1.28;
  letter-spacing: 0;
  font-weight: 100;
  margin-left: 7vw;
}

.wrapup__body_next {
  align-items: center;
  text-align: center;
}

.wrapup__image_next {
  display: block;
  width: min(76vw, 360px);
  height: auto;
}

.wrapup-game-title {
  color: #ffffff;
  font-family: "SwisscomTheSans", Arial, sans-serif;
  font-size: 12.5vw;
  font-weight: 700;
  margin: 0;
}

.wrapup__it, .wrapup__fr, .wrapup__en {
  font-size: 11vw;
}

.wrapup-game-title__line {
  display: block;
  margin-bottom: 1vw;
}

.wrapup-game-title__line--line2 {
  display: inline-block;
  margin-left: 7vw;
}

@media (prefers-reduced-motion: reduce) {
  .result__gain-shell,
  .result__gain,
  .result__points,
  .result__text,
  .result__confetti-piece,
  .result__shape,
  .result__fail-copy,
  .result__tip,
  .standing__title,
  .standing__subtitle,
  .standing__benchmark,
  .standing__column-track,
  .standing__rise-piece,
  .standing__card,
  .standing__card-piece,
  .standing__floater,
  .player__standing-reveal::before {
    animation: none !important;
  }
  .result--pill-enter .result__gain-shell,
  .player__score-reveal[data-result-phase=pill-enter] .result__gain-shell,
  .player__score-reveal[data-result-phase=celebrate] .result__gain-shell {
    opacity: 1;
    transform: none;
  }
  .result--score-visible .result__points,
  .player__score-reveal[data-result-phase=score] .result__points,
  .player__score-reveal[data-result-phase=text] .result__points,
  .player__score-reveal[data-result-phase=complete] .result__points {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .result--text-visible .result__text,
  .player__score-reveal[data-result-phase=text] .result__text,
  .player__score-reveal[data-result-phase=complete] .result__text {
    opacity: 1;
    transform: none;
  }
  .player__score-reveal:not(.result--no-gain)[data-result-phase=score] .result__shape,
  .player__score-reveal:not(.result--no-gain)[data-result-phase=text] .result__shape,
  .player__score-reveal:not(.result--no-gain)[data-result-phase=complete] .result__shape {
    opacity: 1;
    transform: translate3d(var(--shape-x, 0), 0, 0) rotate(var(--shape-rotate, 0deg));
  }
  .player__score-reveal.result--no-gain[data-result-phase=fail-main] .result__fail-copy,
  .player__score-reveal.result--no-gain[data-result-phase=fail-tip] .result__fail-copy,
  .player__score-reveal.result--no-gain[data-result-phase=complete] .result__fail-copy,
  .player__score-reveal.result--no-gain[data-result-phase=fail-tip] .result__tip,
  .player__score-reveal.result--no-gain[data-result-phase=complete] .result__tip {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  .player__standing-reveal[data-standing-phase=backdrop] .standing__topbar,
  .player__standing-reveal[data-standing-phase=benchmarks] .standing__topbar,
  .player__standing-reveal[data-standing-phase=grow] .standing__topbar,
  .player__standing-reveal[data-standing-phase=title] .standing__topbar,
  .player__standing-reveal[data-standing-phase=card] .standing__topbar,
  .player__standing-reveal[data-standing-phase=complete] .standing__topbar,
  .player__standing-reveal[data-standing-phase=backdrop] .standing__chart,
  .player__standing-reveal[data-standing-phase=benchmarks] .standing__chart,
  .player__standing-reveal[data-standing-phase=grow] .standing__chart,
  .player__standing-reveal[data-standing-phase=title] .standing__chart,
  .player__standing-reveal[data-standing-phase=card] .standing__chart,
  .player__standing-reveal[data-standing-phase=complete] .standing__chart,
  .player__standing-reveal[data-standing-phase=benchmarks] .standing__benchmark,
  .player__standing-reveal[data-standing-phase=grow] .standing__benchmark,
  .player__standing-reveal[data-standing-phase=title] .standing__benchmark,
  .player__standing-reveal[data-standing-phase=card] .standing__benchmark,
  .player__standing-reveal[data-standing-phase=complete] .standing__benchmark,
  .player__standing-reveal[data-standing-phase=benchmarks] .standing__column-track,
  .player__standing-reveal[data-standing-phase=grow] .standing__column-track,
  .player__standing-reveal[data-standing-phase=title] .standing__column-track,
  .player__standing-reveal[data-standing-phase=card] .standing__column-track,
  .player__standing-reveal[data-standing-phase=complete] .standing__column-track,
  .player__standing-reveal[data-standing-phase=grow] .standing__floaters,
  .player__standing-reveal[data-standing-phase=title] .standing__floaters,
  .player__standing-reveal[data-standing-phase=card] .standing__floaters,
  .player__standing-reveal[data-standing-phase=complete] .standing__floaters,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=title] .standing__summary,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__summary,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__summary,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=title] .standing__subtitle,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__subtitle,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__subtitle,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=card] .standing__card,
  .player__standing-reveal[data-standing-final="1"][data-standing-phase=complete] .standing__card {
    opacity: 1;
  }
  .player__standing-reveal[data-standing-phase=grow] .standing__floater,
  .player__standing-reveal[data-standing-phase=title] .standing__floater,
  .player__standing-reveal[data-standing-phase=card] .standing__floater,
  .player__standing-reveal[data-standing-phase=complete] .standing__floater {
    opacity: 1;
  }
}
@media (max-width: 480px) and (max-height: 740px) {
  .language-game-title {
    margin-top: 6vw;
    font-size: 13vw;
  }
  .language__content,
  .code__content,
  .start__content,
  .noconnection__stage {
    padding-bottom: 4vw;
  }
  .noconnection__body {
    padding: 2vw 0;
  }
  .noconnection__title {
    font-size: 5.4vw;
  }
  .noconnection__content p {
    font-size: 3.9vw;
  }
  .noconnection__next-label {
    font-size: 3.8vw;
  }
  .language__select,
  .code__form {
    margin-top: 8vw;
  }
  .language__actions,
  .code__actions {
    margin-top: 7vw;
    margin-bottom: 3vw;
  }
  .language__site-link {
    margin-top: 4vw;
  }
  .register__fields {
    margin-top: 8vw;
  }
  .register__submit {
    margin-top: 4vw;
  }
  .start__card-shell {
    margin-top: 7vw;
  }
  .start__card {
    padding: 5vw;
  }
  .start__info {
    margin-top: 3vw;
    line-height: 1.32;
  }
  .start__btns {
    margin-top: 4vw;
  }
  .start__footer {
    margin-top: 4vw;
  }
  .start__timer-display {
    font-size: 12vw;
  }
  .start--urgent .start__timer-display {
    font-size: clamp(11vw, 16dvh, 17vw);
  }
  .start__tips {
    margin-top: 7vw;
  }
  .start__tip + .start__tip {
    margin-top: 5vw;
  }
  .player__shell {
    padding: 0 5vw 5vw;
  }
  .player__progress {
    margin-top: 4vw;
  }
  .player__question-wrap {
    margin-top: 8vw;
  }
  .player__question {
    font-size: 6.2vw;
  }
  .player__panel {
    min-height: 90vw;
    margin-top: 14vw;
    padding: 22vw 6vw 7vw;
  }
  .player__choices button,
  .player__choices label,
  .player__submit,
  .view.player .answer-result__inner {
    min-height: 14.4vw;
  }
  .player__panel--image-choices {
    padding: 22vw 0 0;
  }
  .player__panel--image-choices .player__choices {
    margin-top: -18vw;
  }
  .player__panel--image-choices .image-answer-choice__badge {
    min-height: 12.8vw;
    padding-top: 2.2vw;
    padding-bottom: 2.2vw;
  }
  .result__shell {
    padding: 3vw 5vw 5vw;
  }
  .result__stage {
    padding-top: 10vw;
  }
  .result__points,
  .result__text {
    margin-top: 8vw;
  }
  .result__fail-copy {
    top: 50%;
  }
  .result__tip {
    bottom: max(8vw, env(safe-area-inset-bottom, 0px));
  }
  .rules__body,
  .terms__body {
    padding-top: 8vw;
  }
  .rules__title,
  .prices__title,
  .terms__title {
    font-size: 6.4vw;
  }
  .prices__title,
  .terms__subtitle {
    margin-top: 8vw;
  }
  .claim__stage {
    padding-top: 12vw;
  }
  .claim__preview {
    margin-top: 12vw;
  }
  .claim__action {
    padding-top: 10vw;
  }
  .replay__stage {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .standing__shell {
    padding-top: 2.5vw;
    padding-bottom: max(34vw, env(safe-area-inset-bottom, 0px));
  }
  .view.player .player__standing-reveal .standing__shell {
    padding-top: calc(var(--player-screen-header-height) + 2vw);
  }
  .standing__body {
    gap: 1.5vw;
  }
  .standing__summary {
    padding-right: 2vw;
    padding-left: 2vw;
  }
  .standing__subtitle {
    margin-top: 1.2vw;
    font-size: 3.9vw;
  }
  .standing__chart {
    height: clamp(340px, 92vw, 520px);
    min-height: 340px;
  }
  .standing__card {
    margin-top: auto;
    padding: 4vw;
  }
  .standing__card-icon {
    width: 12vw;
    height: 12vw;
    margin-bottom: 2.5vw;
  }
  .standing__card-text {
    font-size: 4.1vw;
    line-height: 1.25;
  }
  .standing__card-button {
    margin-top: 3vw;
    padding: 3.6vw;
    font-size: 4.4vw;
  }
}
#desktop {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
  display: none;
}
#desktop > img {
  position: absolute;
  top: 52px;
  left: 52px;
}
#desktop > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#desktop > div p {
  font-weight: bold;
  font-size: 24px;
  color: #001155;
  padding: 0px;
  margin: 10px 0px;
  line-height: 140%;
  text-align: center;
}
#desktop > div span {
  color: #3b3a3f;
  font-size: 16px;
}
@media (min-width: 1024px) {
  #desktop {
    display: block;
  }
}

#turnphone {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: linear-gradient(180deg, #eae5ff 0%, #f3f6ff 25%, #ffffff 100%);
  display: none;
}
#turnphone > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: calc(100% - 50px);
}
#turnphone > div p {
  font-weight: bold;
  font-size: 24px;
  color: #001155;
  padding: 0px;
  margin: 10px 0px;
  line-height: 140%;
  text-align: center;
}
#turnphone > div span {
  color: #3b3a3f;
  font-size: 16px;
}
@media (max-width: 1023px) and (orientation: landscape) {
  #turnphone {
    display: block;
  }
}



/*# sourceMappingURL=master.css.map */