@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

* {
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  padding: 0;
  border: 0;
}

:root {
  --element-max-width-s: 400px;
  --element-max-width: 1000px;
  --container-max-width: 1600px;
  --token-checkbox-width: 45px;
  --token-checkbox-height: 32px;
  --header-height: 60px;
  --mobile-icon-nav-height: 40px;
  --desktop-icon-nav-height: 25px;
  --desktop-table-header-height: 2rem;
  --header-z-index: 10;
  --footer-z-index: 10;
  --popup-z-index: 20;
  --info-z-index: 15;
  --expandable-z-index: 5;

  /* Font related constants */
  --font-size-xs: 10px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 46px;
  --font-weight: 400;

  /* Font weight used in the design document but not specified in its font declarations */
  --font-weight-light: 300;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;

  /* Font weight used in the design document but not specified in its font declarations */
  --font-weight-superbold: 900;
  --letter-spacing: -0.02em;
  --line-height: 1.35;
  --line-height-xs: 1;

  /* Color related constants */
  --color-black: #000;
  --color-white: #fff;
  --color-off-white: #fafafa;
  --color-white-smoke: #f7f7f7;
  --color-black-jet: #2a2a2a;
  --color-black-nero: #242424;
  --color-charcoal: #424242;
  --color-light-charcoal: #555;
  --color-faded-light-green: #d8fbdc;
  --color-light-green: #2fd679;
  --color-faded-green: #c5e2ce;
  --color-green: #39a935;
  --color-dark-green: #378b43;
  --color-yellow: #f9cd1a;
  --color-light-yellow: #f6ff00;
  --color-light-red: #ed343d;
  --color-red: #c32341;
  --color-dark-red: #d00027;
  --color-grey: #999;
  --color-lightish-grey: #bdbdbd;
  --color-light-grey: #d9d9d9;
  --color-dark-grey: #8e8e8e;
  --color-blueish-white: #f3f6fe;
  --color-popup-bg-black-gradient: linear-gradient(
    to bottom,
    #171c19 0%,
    #1b302b 34%
  );

  /* Used for the background color of the popup box */
  --color-popup-bg-white: rgb(255 255 255 / 80%);

  /* Lowered opacity white background to be used outside of the popup */
  --color-blue: #009ee2;

  /* Derived from the game's logo. */
  --color-dark-blue: #0086c0;

  /* Manually derived darker version of blue. */
  --color-light-blue: #82cff1;

  /* Blue as if at ~50% opacity on a white background. */
  --color-steel-green-blue: #1f5061;

  /* Darker version of steel green blue from design document. */
  --color-darker-steel-green-blue: #193c48;

  /* Purchase coupon name, purchase coupon selected tab */
  --green-to-red-gradient: linear-gradient(
    to right,
    #44ac51,
    #6cac3a,
    #8eab22,
    #aea708,
    #cea100,
    #dc9600,
    #e98a00,
    #f57d13,
    #f36a10,
    #f15512,
    #ee3c17,
    #ea141c
  );
  --dark-steel-blue-middle-fade-gradient: linear-gradient(
    to right,
    #013c41 10%,
    #00587e 50%,
    #013c41 90%
  );

  /* A half-circular (180 degree) gradient used for a green to red guage starting from the left. Its center is at the center bottom.
    It starts from 91deg instead of even 90deg because sometimes the css can show the show the -91 deg slice,
    and the entire 90->270 deg (bottom half) is entirely red and doesn't fit with the green -90 deg slice. */
  --conic-gradient-green-to-red: conic-gradient(
    from -91deg at 50% 100%,
    #44ac51 0deg,
    #6cac3a 12deg,
    #8eab22 27deg,
    #aea708 45deg,
    #cea100 61deg,
    #dc9600 75deg,
    #e98a00 93deg,
    #f57d13 110deg,
    #f36a10 128deg,
    #f15512 146deg,
    #ee3c17 164deg,
    #ea141c 178deg
  );

  /* A circular gradient placed in the center used for the loading icon */
  --conic-gradient-dark-green-fade: conic-gradient(
    from -90deg at 50% 50%,
    #244729,
    #04b99c,
    #244729,
    #04b99c,
    #244729
  );

  /* Use two backgrounds for header and main to not cause any gradient direction collapses */
  --dark-header-background: linear-gradient(to top, #171c1900 0%, #171c19 30%);
  --dark-main-background: linear-gradient(to bottom, #171c19 0%, #1b302b 34%);
  --light-header-background: linear-gradient(to top, #fff0 0%, #fff 30%);
  --bg-image-header: var(--light-header-background);

  /* Shadowing presets */
  --box-shadow-subtle: #00000040 0 0 4px;
  --footer-shadowing: rgb(0 0 0 / 65%) 0 0 6px;

  /* Changed from 300ms in Figma design. */
  --transition-duration-short: 33ms;
  --transition-function: ease-out;
  --transition-duration: 100ms;

  /* Padding related constants */
  --nav-item-padding: 0.5rem;
  --padding-4xs: 0.125rem;
  --padding-3xs: 0.25rem;
  --padding-xxs: 0.35rem;
  --padding-xs: 0.5rem;
  --padding-s: 0.75rem;
  --padding-m: 1rem;
  --padding-l: 2rem;

  /* Border radiuses */
  --radius: 0.375rem;
  --radius-m: 0.5rem;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/*
 * Add support for the Alpine JS x-cloak directive.
 * See https://alpinejs.dev/directives/cloak for reference.
 *
 * When Alpine JS has loaded it will remove all x-cloak attributes.
 */
[x-cloak] {
  display: none !important;
}

/* Containers */

.main-base-class {
  width: 100%;
  display: flex;
  justify-content: center;
}

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.stack-s > * + * {
  margin-block-start: 0.5rem;
}

.stack-m > * + * {
  margin-block-start: 1rem;
}

.stack > * + * {
  margin-block-start: 1.5rem;
}

.dock-top {
  position: sticky;
  top: var(--header-height);
  z-index: var(--header-z-index);
}

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius);
}

.divider {
  border: thin solid;
  background-color: var(--color-grey);
  color: var(--color-grey);
  width: 100%;
  border-radius: 1px;
}

/* Utilities */

/* Hides elements that would otherwise consume visual DOM space even when the property hidden is set */
.visually-hidden {
  position: absolute;
  margin: -1px;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  overflow: hidden;
}

.block {
  display: block;
}

/* Used to render only the contents of an element.
 * This is useful when elements need to be grouped in a container but only the
 * contained elements should be styled, such as automatic grid placement.
 */
.display-contents {
  display: contents;
}

.text-underlined {
  text-decoration: underline;
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-italics {
  font-style: italic;
}

.font-superbold {
  font-weight: var(--font-weight-superbold);
}

.font-xs {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-xs);
}

.font-s {
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}

.font-m {
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
}

.font-l {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
}

.font-xl {
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing);
}

.font-xxl {
  font-size: var(--font-size-xxl);
  letter-spacing: var(--letter-spacing);
}

.font-3xl {
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing);
}

.font-4xl {
  font-size: var(--font-size-4xl);
  letter-spacing: var(--letter-spacing);
}

.font-monospace {
  font-family: 'Roboto Mono', monospace;
}

.text-left {
  text-align: left;
}

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

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

.include-newlines {
  white-space: pre-line;
}

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

.gapped-xs {
  gap: var(--padding-xs);
}

.gapped-s {
  gap: var(--padding-s);
}

.gapped {
  gap: var(--padding-m);
}

.margin-right-s {
  margin-right: var(--padding-s);
}

.margin-right-xxs {
  margin-right: var(--padding-3xs);
}

.margin-left-xxs {
  margin-left: var(--padding-3xs);
}

.margin-top {
  margin-top: var(--padding-s);
}

.padded-3xs {
  padding: var(--padding-4xs);
}

.padded-xxs {
  padding: var(--padding-3xs);
}

.padded-xs {
  padding: var(--padding-xs);
}

.padded-s {
  padding: var(--padding-s);
}

.padded {
  padding: var(--padding-m);
}

.padded-l {
  padding: var(--padding-l);
}

.white-frame {
  border: 1px solid var(--color-white);
  border-radius: var(--radius);
}

.frame {
  border: 1px solid var(--color-light-grey);
  border-radius: 0.5rem;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.column-flex {
  display: flex;
  flex-direction: column;
}

.row-flex {
  display: flex;
  flex-direction: row;
}

.horizontally-centered {
  display: flex;
  justify-content: center;
}

.horizontally-spaced {
  display: flex;
  justify-content: space-evenly;
}

.evenly-spaced-columns {
  display: grid;
  gap: 4px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-items: center;

  > li {
    width: 100%;
  }
}

.horizontally-spaced-between {
  display: flex;
  justify-content: space-between;
}

.horizontally-align-right {
  display: flex;
  justify-content: right;
}

.vertically-centered {
  display: flex;
  align-items: center;
}

.bg-transparent {
  background-color: transparent;
}

.nowrap {
  white-space: nowrap;
}

.bg-white {
  background-color: var(--color-white);
}

.bg-white-smoke {
  background-color: var(--color-white-smoke);
}

.bg-light-grey {
  background-color: var(--color-light-grey);
}

.bg-steel-green-blue {
  background-color: var(--color-steel-green-blue);
}

.bg-dark-blue {
  background-color: var(--color-dark-blue);
}

.bg-blue {
  background-color: var(--color-blue);
}

.bg-light-blue {
  background-color: var(--color-light-blue);
}

.bg-dark-green {
  background-color: var(--color-dark-green);
}

.bg-green {
  background-color: var(--color-green);
}

.bg-faded-green {
  background-color: var(--color-faded-green);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-grey {
  background-color: var(--color-grey);
}

.bg-dark-red {
  background-color: var(--color-dark-red);
}

.bg-light-red {
  background-color: var(--color-light-red);
}

.bg-green-to-red-gradient {
  background-color: var(--green-to-red-gradient);
}

.border-blue {
  border-color: var(--color-blue);
}

.border-green {
  border-color: var(--color-green);
}

.border-yellow {
  border-color: var(--color-yellow);
}

.border-grey {
  border-color: var(--color-grey);
}

.top-border {
  border-top-width: 2px;
  border-style: solid;
}

.color-white {
  color: var(--color-white);
}

.color-dark-grey {
  color: var(--color-dark-grey);
}

.color-grey {
  color: var(--color-grey);
}

.color-black {
  color: var(--color-black);
}

.color-green {
  color: var(--color-green);
}

.color-red {
  color: var(--color-red);
}

.color-steel-green-blue {
  color: var(--color-steel-green-blue);
}

.color-light-yellow {
  color: var(--color-light-yellow);
}

.relative {
  position: relative;
}

.absolute-right {
  position: absolute;
  right: 0;
}

.absolute-anchor-left {
  position: absolute;
  left: 100%;
}

.flex-grow {
  flex-grow: 1;
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}

.scrollable {
  overflow-y: auto;
}

.clickable {
  cursor: pointer;
}

.pointer-events-none {
  pointer-events: none;
}

.btn {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  display: inline-block;
  border-radius: var(--radius);
  padding: 0.5em 1.5em;
  border: 0;
  cursor: pointer;
  transition-property: background;
  transition-timing-function: var(--transition-function);
  transition-duration: var(--transition-duration-short);
  background-color: var(--color-green);
  line-height: 1;
}

.blue-btn {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  display: inline-block;
  border-radius: 0.35em;
  padding: 0.5em 1.5em;
  border: 0;
  cursor: pointer;
  transition-property: background;
  transition-timing-function: var(--transition-function);
  transition-duration: var(--transition-duration-short);
  background-color: var(--color-blue);
  line-height: 1;
}

.btn-increment,
.btn-decrement {
  border: 2px solid var(--color-black);
  border-radius: 0.5rem;
  width: 1rem;
  height: 1rem;
  line-height: 0;
  font-family: monospace;
}

.btn:disabled {
  cursor: unset;
  color: var(--color-light-grey);
  background-color: var(--color-grey);
}

a.btn:hover,
a.btn:focus,
button.btn:enabled:hover,
button.btn:enabled:focus {
  background-color: var(--color-dark-green);
}

a.blue-btn:hover,
a.blue-btn:focus,
button.blue-btn:enabled:hover,
button.blue-btn:enabled:focus {
  background-color: var(--color-dark-blue);
}

.btn:enabled:active {
  background-color: var(--color-black);
}

.btn.btn-secondary {
  background-color: var(--color-dark-grey);
  color: var(--color-white);
}

.btn.btn-secondary:disabled {
  background-color: var(--color-light-grey);
}

a.btn.btn-secondary:hover,
a.btn.btn-secondary:focus,
button.btn.btn-secondary:enabled:hover,
button.btn.btn-secondary:enabled:focus {
  background-color: var(--color-dark-grey);
}

.btn.btn-secondary:enabled:active {
  background-color: var(--color-black-nero);
}

.btn-text {
  background: none;
  border-bottom: 1px solid currentcolor;
  cursor: pointer;
}

.btn-icon {
  background: none;
  cursor: pointer;
}

.blue-line {
  height: 2px;
  background-color: var(--color-blue);
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  /* Fill the viewport. */
  min-height: 100vh;

  /* Set sensible default styles matching the game's profile. */
  font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
  font-size: var(--font-size-m);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--font-weight);
  background-color: var(--color-white);
}

input,
textarea,
button {
  font-family: inherit;
}

h1 {
  font-size: var(--font-size-xxl);
  letter-spacing: var(--letter-spacing);
}

h2 {
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing);
}

h3 {
  font-size: var(--font-size-l);
  letter-spacing: var(--letter-spacing);
}

/* Apply this class to style create arrow-like icons using only css. */
.chevron-left,
.chevron-right,
.chevron-down {
  /* Allow chevrons to be placed inline with elements */
  display: inline-block;
  cursor: pointer;
  color: currentcolor;
  background: none;

  /* Accomodate for the rotation that otherwise creates overflow */
  padding: var(--padding-4xs);

  /* Draw the chevron */
  &::after {
    --chevron-base-length: 0.5em;
    --chevron-thickness: calc(var(--chevron-base-length) / 2.5);

    content: '';
    display: block;
    width: var(--chevron-base-length);
    height: var(--chevron-base-length);
    border-bottom: var(--chevron-thickness) solid;
    border-right: var(--chevron-thickness) solid;
  }
}

.chevron-right::after {
  transform: translateX(-1px) rotate(-45deg);
}

.chevron-left::after {
  transform: translateX(1px) rotate(135deg);
}

.chevron-down::after {
  transform: translateY(-1px) rotate(45deg);
}

.nav-underline {
  background: unset;
  display: inline-block;
  border-bottom: 1px solid currentcolor;
  padding-bottom: var(--padding-3xs);
  cursor: pointer;
}

/* Tables */

.data-table {
  width: 100%;
}

.data-table tr:nth-child(even) {
  background-color: var(--color-off-white);
}

.data-table td,
.data-table th {
  padding: var(--padding-s);
}

.data-table tr:hover {
  background-color: var(--color-faded-light-green);
}

.data-table th {
  text-align: left;
  font-weight: var(--font-weight-bold);
  background-color: var(--color-dark-green);
  color: var(--color-white);
}

/* Forms */

.form-cell > * {
  display: block;
  width: 100%;
}

.form-cell > label {
  padding-bottom: 0.5rem;
}

.basic-input {
  padding: 0.5rem;
  border: 2px solid var(--color-light-grey);
  outline: none;
}

.basic-input:focus {
  border-color: var(--color-black-jet);
}

.heading-row {
  /* Use a background to ensure that headings can be non-transparent if docked. */
  background-color: inherit;
  border-bottom: 1px solid var(--color-light-grey);
}

.markdown {
  line-height: var(--line-height);
}

.markdown h2,
.markdown h3 {
  font-weight: var(--font-weight-bold);
}

.markdown strong {
  font-weight: var(--font-weight-bold);
}

.markdown em {
  font-style: italic;
}

.markdown del {
  text-decoration: line-through;
}

.markdown ul {
  list-style: disc inside;
}

.markdown ol {
  list-style: decimal inside;
}

.markdown * {
  max-width: 100%;
}

.markdown p + p {
  margin-top: 1rem;
}

.markdown h2 + p {
  margin-top: 1rem;
}

.markdown h3 + p {
  margin-top: 0.5rem;
}

.markdown * + h2 {
  margin-top: 1rem;
}

.markdown * + h3 {
  margin-top: 0.5rem;
}

.striped {
  > * {
    box-shadow: #00000040 0 0 3px;
    border-radius: 4px;
  }

  /* stylelint-disable-line no-descending-specificity */
  > *:nth-child(2n) {
    background-color: var(--color-white);
  }

  > *:nth-child(2n + 1) {
    background-color: var(--color-off-white);
  }
}

/*
 * Popups are toggleable pieces of content that are vertically centered
 * Popups fill the entire viewport width.
 *
 * Note that the popup itself should cover the viewport in order to capture interaction outside the content area.
 */
.popup {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: var(--popup-z-index);
  background-color: var(--color-popup-bg-white);
}

/*
 * Hide hidden popups.
 */
.popup[hidden] {
  display: none;
}

/*
 * Render content with some padding over a dark background.
 * Note that popup backgrounds may be semitransparent.
 */
.popup-content {
  color: var(--color-white);
  background-image: var(--color-popup-bg-black-gradient);
  padding: var(--padding-m);

  /* Center content vertically and use a minimum height to prevent minimal layout changes to affect the full layout. */
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/*
 * Render a sticky header with fixed positioning at the top of the viewport.
 */
#app > .header-bar {
  /* Stick the header to the top of the viewport. */
  position: fixed;
  width: 100%;
  padding: 0.75rem;
  z-index: var(--header-z-index);

  /* Use a fixed height to allow other elements to stick to the bottom of the header. */
  height: var(--header-height);
  color: var(--color-white);
  background: var(--bg-image-header);
  pointer-events: none;

  /* Allow click-through behaviour on the content behind the header */
}

/*
 * Allow the contents of the header bar to react to click events
 */
#app > .header-bar > * {
  pointer-events: auto;
}

/*
 * Render a sticky footer with fixed positioning at the bottom of the viewport.
 */
#app > footer {
  grid-row: 3 / 4;
  z-index: var(--footer-z-index);
}

/*
 * Fill the viewport height with a main section.
 * Note that the header should not result in unnecessary scrolling.
 */
#app > main {
  padding-top: var(--header-height);
  grid-row: 2 / 3;
}

/*
 * Some pages has no header that occupies vertical space in the viewport and should fill up the
 * entire vertical space.
 */
#app > main.main-without-header {
  padding-top: 0;
  min-height: 100vh;
}

/*
 * Enable the use of a full-page background image for the application.
 * This class requires a --bg-image-main variable to be defined on/for the #app > main element.
 */
#app > main.bg-image {
  background-image: var(--bg-image-main);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.home-page {
  width: clamp(300px, 95vw, 360px);
}

.home-page-tab-button-width {
  width: 90px;
}

.home-page-tab-header {
  max-width: var(--element-max-width-s);
  padding: 0 var(--padding-m);
  margin-bottom: 2rem;
}

.home-page-tab {
  padding-bottom: var(--padding-m);
}

.home-page-jackpot-box {
  border-top: 4px solid;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, #1b302b, #0d7d69, #1b302b) 1;
  padding: 0.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  span {
    color: var(--color-faded-green);
    font-size: var(--font-size-xl);
  }
}

/* Navigation */
.main-navigation-container {
  width: 100%;
  max-width: var(--element-max-width);
  margin-left: auto;
  margin-right: auto;
}

.main-navigation-bar {
  height: 2rem;
  max-width: var(--element-max-width);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: var(--dark-steel-blue-middle-fade-gradient);
  box-shadow:
    0 4px 4px 0 rgb(0 0 0 / 25%),
    inset 0 4px 4px 0 rgb(0 0 0 / 25%);
  border: 0.125rem solid var(--color-blue);
  border-radius: var(--radius);
}

.main-navigation-bar-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.125rem;
  background-color: transparent;
  cursor: pointer;
  width: min-content;
  padding: var(--padding-xxs);
}

.main-navigation-bar-logo {
  height: 100%;
  padding: var(--padding-xxs);
  background-color: var(--color-white);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 25%);
}

.expanded-navigation-menu {
  display: flex;
  flex-direction: column;
  background-color: var(--color-steel-green-blue);
  width: max-content;
  padding: var(--padding-s);
  gap: 0.5rem;
  margin-top: var(--padding-xs);
  border: 0.125rem solid var(--color-blue);
  border-radius: var(--radius);
}

.desktop-tab-item {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-dark-grey);
  padding: var(--nav-item-padding);
  border-radius: var(--radius-m);
}

.nav-item {
  /* stylelint-disable-line no-descending-specificity */
  display: block;
  width: 100%;
  padding: var(--nav-item-padding);
  text-decoration: none;
  background: var(--color-dark-grey);
  color: var(--color-white);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-light);
  cursor: pointer;
  border-radius: var(--radius-m);
}

.nav-item-active,
.nav-item-active:focus {
  background: var(--color-steel-green-blue) !important;
}

/* stylelint-disable no-descending-specificity */

.icon-nav {
  ol {
    display: flex;
    justify-content: space-between;
    background: var(--color-steel-green-blue);

    > * {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
    }
  }
}

/* stylelint-enable no-descending-specificity */

.icon-nav-item {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--color-dark-grey);
  background: none;
  cursor: pointer;
}

.icon-nav-item:not(.icon-nav-item-active):hover,
.icon-nav-item:not(.icon-nav-item-active):focus {
  color: var(--color-light-grey);
}

.icon-nav-item-active {
  color: var(--color-white);
}

.icon-nav-item-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 1.5rem;
  margin: 0 auto;
  bottom: -0.5em;
  border-bottom: 2px solid var(--color-white);
  border-radius: 2px;
}

.desktop-modal-icon-close-button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-99%);
  border-radius: 0.25em 0.25em 0 0;
}

.mobile-modal-icon-close-button {
  border-radius: 0.25em;
}

.close-modal-icon-tab-view {
  margin-right: var(--padding-s);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-m);
  color: var(--color-grey);
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-grey);
  cursor: pointer;
  gap: 0.125rem;
  padding: var(--padding-3xs);
}

.modal-icon-view {
  --nav-bar-height: calc(1.5 * var(--mobile-icon-nav-height));

  height: 100%;

  .modal-icon-main-content {
    height: 100%;
    overflow-y: scroll;
  }

  .phantom-nav {
    height: var(--nav-bar-height);
  }

  > .desktop-icon-nav {
    overflow: hidden;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    height: var(--desktop-table-header-height);

    ol {
      padding: 0.7ch 0 1ch;
      height: 100%;
    }
  }

  > .mobile-icon-nav {
    position: fixed;
    bottom: 0;
    width: 100%;

    ol {
      padding: 0.5em 0 1em;
      height: var(--mobile-icon-nav-height);
    }
  }
}

/* Arrange content in a single primary column with some spacing. */
.game-round-header {
  /* Header values should be contained within the width of the three tab buttons. */
  --game-round-header-width: calc(var(--element-max-width-s) * 0.75);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--padding-3xs);
  padding-bottom: var(--padding-m);
  padding-top: var(--padding-xs);
  text-align: center;
  width: var(--game-round-header-width);

  .header-with-info {
    padding-bottom: var(--padding-m);

    .info {
      transform: translateY(-50%);
      position: absolute;
      margin-left: var(--padding-3xs);
    }
  }
}

.tab-view-header {
  width: 100%;
  max-width: var(--element-max-width-s);
}

.align-center {
  align-self: center;
}

.game-round-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Game round + coupon cards */
.game-round-card {
  display: grid;
  border-radius: var(--radius);
  border-width: 2px;
  border-style: solid;
}

@keyframes soft-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.game-round-card-header {
  display: flex;
  justify-content: space-between;
  padding: var(--padding-3xs) var(--padding-s);
  padding-bottom: calc(2px + var(--padding-3xs));

  /* Take game-round-card border in consideration to center the header content vertically  */
  letter-spacing: 0;

  /* Animation for "play" button on purchasable game round card */
  .game-round-card-purchasable-button {
    animation: soft-pulse 1.5s ease-out infinite;
  }
}

.game-round-card-body {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: var(--padding-xs);
  padding: var(--padding-s);
}

.game-round-card-purchasable {
  border-color: var(--color-yellow);
}

.game-round-status {
  display: inline-flex;
  align-items: center;
}

.game-round-status-completed::after {
  background-color: var(--color-red);
  border: 1px solid var(--color-white);
}

.game-round-status-running::after {
  background-color: var(--color-green);
  animation: pulse 1s ease-in-out infinite;
}

/* Game round double column layout for the main content (see GameRoundView) */

.double-column-game-round {
  display: grid;
  grid-template-columns: 3fr 2fr;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: var(--element-max-width);
  align-self: center;

  .double-column-game-round-main {
    flex-grow: 1;
    max-width: var(--element-max-width);
  }

  .double-column-game-round-tabs {
    display: flex;
    flex-direction: column;

    /* Make this divs height be controlledby the other elements in its container (to make the list scrollable).
      Removing the height makes it not be a part of the height calculation but having the min height makes it
      a part of the height consumption, and therefore matches the height of its parent */
    height: 0;
    min-height: 100%;

    .double-column-game-round-nav {
      display: flex;
      justify-content: space-evenly;

      .desktop-tab-item {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        flex-grow: 1;

        &:not(:last-child) {
          filter: drop-shadow(#0004 2px 0 2px);
        }
      }
    }

    .double-column-game-round-content {
      box-shadow: #00000040 0 0 4px;
      width: 100%;
      border-bottom-left-radius: var(--radius-m);
      border-bottom-right-radius: var(--radius-m);
    }
  }
}

/* Coupon bet line */

.coupon-bet-line {
  display: grid;
  grid-template-columns: 1.5rem 1fr repeat(3, var(--token-checkbox-width));
  align-items: center;
  padding: var(--padding-xs);
  gap: 0.5rem;

  &[role='heading'] {
    height: var(--desktop-table-header-height);
    background-color: inherit;
  }
}

.coupon-bet-line-index {
  height: 1.5rem;
  aspect-ratio: 1/1;
  border-radius: 100%;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  display: flex;
  justify-content: center;
  align-items: center;
}

.purchaseable-coupon-dock {
  display: grid;
  grid-template-columns: 2fr 1fr;
  box-shadow: 0 -4px 3px 0 rgb(0 0 0 / 10%);
  background-color: var(--color-steel-green-blue);
  padding: 0.75rem 1rem 1.5rem 0.75rem;
  color: var(--color-white);
}

.active-coupon-dock {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: 0 -4px 3px 0 rgb(0 0 0 / 10%);
  background-color: var(--color-steel-green-blue);
  padding: 0.75rem 1rem 1.5rem 0.75rem;
  color: var(--color-white);
}

/* Token value and select percentage in a column. */
.token-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: var(--padding-xs);
}

/* The odds box */
.token-checkbox {
  border-color: var(--color-grey);
  border-radius: 0.25rem;
  border-style: solid;
  border-width: 2px;
  width: var(--token-checkbox-width);
}

/* If the selection was correct */
.token-checkbox.token-checkbox-correct {
  outline: 3px solid var(--color-dark-green);
  outline-offset: 2px;
}

@keyframes blink-token-outline {
  0% {
    outline-color: var(--color-dark-green);
  }

  50% {
    outline-color: var(--color-white);
  }

  100% {
    outline-color: var(--color-dark-green);
  }
}

.token-checkbox.token-checkbox-correct.token-checkbox-updated {
  animation: blink-token-outline 1s 10;
}

/* Selected odds box */
.token-checkbox:has(input[type='checkbox']:checked) {
  background-color: var(--color-faded-green);
}

.token-checkbox > label {
  padding: var(--padding-xs);
  display: block;
  user-select: none;
  margin: -2px;

  /* Fill .token-checkbox border in order to increase the clickable area. */
}

.coupon-progress {
  --bg-color: #6a6a6a;
  --bar-color: var(--color-white);
  --bar-height: 0.25rem;

  display: block;
  width: 100%;
  height: var(--bar-height);
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  border-radius: var(--bar-height);
  border-width: 0;
  background-color: var(--bg-color);
}

/* -moz-progress-bar specifies the foreground (progress) of the progress bar on firefox */
.coupon-progress::-moz-progress-bar {
  background-color: var(--bar-color);
  border-radius: var(--bar-height);
}

/* -webkit-progress-bar specifies the background of the progress bar on chromium and safari browsers */
.coupon-progress::-webkit-progress-bar {
  background-color: var(--bg-color);
  border-radius: var(--bar-height);
}

/* -webkit-progress-bar specifies the foreground (progress) of the progress bar on chromium and safari browsers */
.coupon-progress::-webkit-progress-value {
  background-color: var(--bar-color);
  border-radius: var(--bar-height);
}

.recent-winner-list {
  > li {
    :first-child {
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-m);
    }

    :last-child {
      text-align: right;
    }

    display: grid;
    min-width: max-content;
    grid-template-columns: 2rem 1fr 1fr;
    gap: 0.5rem;
    color: var(--color-steel-green-blue);
    padding: 2px 1rem;
    border: 1px solid var(--color-light-grey);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px 0 var(--color-light-grey);
  }
}

.prizepot-distribution-item > li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 2px 1rem;
  border: 1px solid var(--color-light-grey);
  border-radius: 0.75rem;
  box-shadow: 0 1px 4px 0 var(--color-light-grey);
  margin-left: 3rem;
  margin-right: 3rem;
}

.prizepot-distribution-item > hr {
  margin: 0.75rem;
}

/* Profile page */
.purchased-coupon-card {
  border-radius: 0.5rem;
  border-width: 0.1rem;
  border-style: solid;
  padding: var(--padding-xs);
  line-height: var(--line-height);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: max-content;
}

.purchased-coupon-card > :nth-child(1) {
  text-align: left;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.purchased-coupon-card > :nth-child(2) {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.purchased-coupon-card-normal {
  background-color: var(--color-white);
  border-color: var(--color-light-grey);
}

.purchased-coupon-card-win {
  background-color: var(--color-faded-light-green);
  border-color: var(--color-faded-green);
}

.purchased-coupon-card-annulled {
  background-color: var(--color-lightish-grey);
  border-color: var(--color-grey);
}

/* Generic */
.fullscreen-popup {
  position: fixed;
  flex-direction: column;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blueish-white);
}

.light-bordered-tab-view-nav {
  background-color: var(--color-white-smoke);
  border-bottom: 1px solid var(--color-light-grey);
}

.dark-tab-view-nav {
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

.light-tab-view-nav {
  background-color: var(--color-white);
}

/*
 * A container for tab frames with tabbable content.
 * A tab frame container allows scrollable tab frame content with other fixed-position page elements.
 */
.tab-frame-container {
  display: flex;
  flex-direction: column;
}

/*
 * A tab frame contains tabbable content and an optional heading.
 */
.tab-frame {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-light-grey);
  max-width: var(--element-max-width);
  align-items: center;
  width: 100%;
}

/* stylelint-disable no-descending-specificity */

/*
 * Tab frame contents should come last.
 */
.tab-frame > *:last-child {
  flex-grow: 1;
}

/* stylelint-enable no-descending-specificity */

/*
 * Tab frames may contain headings with simple text.
 * These headings typically belong inside a .tab-frame.
 */
.tab-frame-heading {
  text-align: center;
  font-weight: var(--font-weight-bold);
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-light-grey);
}

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.spin-animation {
  animation: rotate 2s linear infinite;
  width: 4rem;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.bet-line-list {
  width: 100%;

  & > :first-child {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
    overflow: hidden;
  }
}

.bet-line-event-info-grid {
  display: grid;
  grid-template-columns: auto 3rem;
  grid-template-rows: 1fr 1fr 1fr;
}

/* stylelint-disable no-descending-specificity */

.bet-line-event-info-grid > * {
  display: flex;
  align-items: center;
  overflow-x: hidden;
}

.bet-line-event-info-grid > * > span {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

/* stylelint-enable no-descending-specificity */

.bet-line-clock {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: var(--padding-4xs);
  align-items: center;
}

.logo {
  height: 1.5em;
  width: auto;
  display: flex;
  align-items: center;
}

.logo-l {
  height: 2em;
  width: auto;
  display: flex;
  align-items: center;
}

/* Risk indicator guage and needle */
.risk-indicator {
  display: grid;
  max-width: 14rem;
  aspect-ratio: 2 / 1;
  border-radius: 50% / 100% 100% 0% 0%;
  overflow: hidden;
}

.risk-indicator-gauge {
  grid-row: 1;
  grid-column: 1;
  height: 100%;
  background: var(--conic-gradient-green-to-red);
  mask-image: radial-gradient(circle at 50% 100%, transparent 0 55%, black 56%);
}

.risk-indicator-needle {
  --needle-angle: 0deg;

  grid-row: 1;
  grid-column: 1;
  width: 5%;
  height: 95%;
  background: var(--color-white);
  place-self: center;
  transform-origin: bottom center;
  transition: transform 0.5s ease-out;
  clip-path: polygon(40% 0%, 60% 0%, 90% 100%, 10% 100%);
  border-radius: var(--radius);
  transform: rotate(var(--needle-angle));
}

.risk-indicator-text-container {
  max-width: 14rem;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.risk-indicator-left-text {
  text-align: center;
  transform: translateX(calc(-50% + 0.5rem));
  grid-column: 1;
  font-size: var(--font-size-l);
}

.risk-indicator-right-text {
  text-align: center;
  transform: translateX(calc(50% - 0.5rem));
  grid-column: 3;
  font-size: var(--font-size-l);
}

.purchase-dialog-risk-indicator-question {
  margin-top: 3rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
}

.purchase-dialog-risk-indicator-container {
  padding-left: 25%;
  padding-right: 25%;
}

.risk-indicator-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.purchase-dialog-spinner {
  width: 5rem;
  align-self: center;
  aspect-ratio: 1/1;
  background: var(--conic-gradient-dark-green-fade);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 61%, black 62%);
  border-radius: 50%;
}

.purchase-dialog {
  border-radius: var(--radius);
  max-width: var(--element-max-width-s);
  margin: var(--padding-m);
  padding: 4rem 1.5rem;
}

.purchase-dialog-payment-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-m);
  padding-left: var(--padding-l);
  padding-right: var(--padding-l);
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  border: medium solid var(--color-blue);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  height: 1.5rem;
  width: 0.5rem;
}

input[type='range']::-moz-range-thumb {
  border: medium solid var(--color-blue);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  height: 1.5rem;
  width: 0.5rem;
}

input[type='range'] {
  appearance: none;
  cursor: pointer;
  border-radius: 1rem;
  height: 0.5rem;
  box-shadow: 0 3px 5px 0 var(--color-grey);
}

.input-range-with-buttons-grid {
  display: grid;
  grid-template-columns: 2rem auto 2rem;

  input[type='range'] {
    width: 100%;
  }

  .btn-decrement {
    justify-self: center;
    grid-column: 1;
  }

  .btn-increment {
    justify-self: center;
    grid-column: 3;
  }
}

.floating-percentage-box {
  --left-offset-in-percent: 0%;

  width: 100%;
  padding: 0 0.5rem;

  span {
    left: calc(var(--left-offset-in-percent) * 1%);
    position: relative;
    display: inline-block;
    transform: translateX(-40%);
  }
}

.risk-input-component {
  display: grid;
  grid-template-rows: 1rem auto auto;
  row-gap: 0.5rem;
  margin-block-start: 0.5rem;

  .floating-percentage-box {
    grid-row: 1;
    grid-column: 2 / 3;
  }

  .btn-increment,
  .btn-decrement {
    grid-row: 2;
  }

  input[type='range'] {
    background: var(--green-to-red-gradient);
    grid-row: 2;
  }

  .risk-descriptions {
    grid-row: 3;
    grid-column: 1 / 4;
  }
}

/* Scoreboard styling */

.toggle-button-container {
  display: flex;
  justify-content: end;
  gap: 0.5rem;
  padding: var(--padding-xs) var(--padding-s);

  .toggle-button-group {
    button {
      background-color: var(--color-light-grey);
      border-radius: 0.5rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font: inherit;
      transition: background-color 0.3s;

      &.active {
        background-color: var(--color-steel-green-blue);
        color: #fff;
      }
    }
  }
}

.scoreboard-table {
  max-width: var(--element-max-width);
  width: 100%;
  align-self: flex-start;
  text-wrap: nowrap;

  > thead {
    background-color: var(--color-white);
  }

  /* stylelint-disable no-descending-specificity */
  tr {
    display: grid;
    grid-template-columns: 2rem 2fr 2fr 2fr;
    align-items: center;
    padding: var(--padding-xs);
    gap: var(--padding-xs);
  }

  /* stylelint-enable no-descending-specificity */

  > tbody {
    > tr.user-row {
      background-color: var(--color-blue);
    }

    > :nth-child(10n + 2) {
      border-top: 2px solid var(--color-grey);
    }

    > :nth-child(10n + 6) {
      border-bottom: 2px solid var(--color-grey);
    }

    /* Grey groups: alternating 5-row blocks starting at row 1 */
    > :nth-child(10n + 2),
    > :nth-child(10n + 3),
    > :nth-child(10n + 4),
    > :nth-child(10n + 5),
    > :nth-child(10n + 6) {
      background-color: var(--color-light-grey);
    }

    > :nth-child(10n + 7),
    > :nth-child(10n + 8),
    > :nth-child(10n + 9),
    > :nth-child(10n + 10),
    > :nth-child(10n + 11) {
      background-color: var(--color-white);
    }
  }
}

.scoreboard-player-heading {
  position: relative;
  padding: var(--padding-s);
  width: 100%;
  max-width: var(--element-max-width-s);
  z-index: var(--expandable-z-index);

  > .summary {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    background: var(--color-white);
    padding: var(--padding-s);
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow-subtle);
    width: 100%;

    .max-score-summary-grid {
      display: grid;
      grid-template-columns: 1.2fr 1.2fr 2fr auto;
      gap: var(--padding-3xs);
    }
  }

  > .details {
    background: var(--color-white);
    position: absolute;
    inset-inline: var(--padding-s);
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: var(--box-shadow-subtle);

    .details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      padding: var(--padding-s);
    }
  }
}

.scoreboard-player-heading.details-showing {
  > .summary {
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: var(--box-shadow-subtle);
  }
}

/* Set styling that is ONLY used for mobile phone screens. */
@media screen and (width < 768px) {
  /* Class that is used for switching the DOM between two
   *   completely different trees based on screen/window size.
   *
   * Note: Always use together with .mobile-only
   *
   */
  .desktop-only {
    display: none !important;
  }

  /* The coupon navigation button where the button is split into two with a text hovering over the middle */
  .coupon-nav-btn-container {
    display: grid;

    /* Buttons are normally positioned and text is absolute => 2 columns */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0;
    position: relative;

    /* Remove padding to allow contained button elements to fill entire container */
    text-decoration: none;
    background: var(--color-dark-grey);
    color: var(--color-white);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-light);
    border-radius: var(--radius-m);

    /* stylelint-disable no-descending-specificity */

    > p {
      pointer-events: none;
      white-space: nowrap;
      text-align: center;
      background-color: transparent;
      position: absolute;
      width: 100%;
    }

    /* stylelint-enable no-descending-specificity */

    > button {
      grid-row: 1;
      background-color: transparent;
      cursor: pointer;
      align-items: center;

      &:nth-of-type(1) {
        grid-column: 1;
        border-radius: var(--radius-m) 0 0 var(--radius-m);
        display: flex;
        justify-content: left;
      }

      &:nth-of-type(2) {
        grid-column: 2;
        border-radius: 0 var(--radius-m) var(--radius-m) 0;
        display: flex;
        justify-content: right;
      }

      &:hover,
      &:focus {
        background-color: color-mix(
          in srgb,
          var(--color-steel-green-blue) 90%,
          var(--color-light-grey)
        );
      }
    }
  }
}

/* Set styling that is ONLY used for large screens. */
@media screen and (width >=768px) {
  /* Class that is used for switching the DOM between two
   *   completely different trees based on screen/window size.
   *
   * Note: Always use together with .desktop-only
   *
   */
  .mobile-only {
    display: none !important;
  }

  /* On desktop, the game should not touch the sides of the screen/window. */
  .main-game-content {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  /* Local changes to bet-line design. */
  .coupon-bet-line[role='heading'] {
    background-color: var(--color-steel-green-blue);
    color: var(--color-white);
    padding: 0 var(--padding-xs);

    > span {
      padding: 0;
    }
  }

  .coupon-nav-btn-container {
    display: grid;

    /* Buttons are normally positioned and text is absolute => 2 columns */
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 0;

    > button {
      height: var(--desktop-table-header-height);
      background-color: transparent;
      cursor: pointer;

      &:hover,
      &:focus {
        background-color: color-mix(
          in srgb,
          var(--color-steel-green-blue) 90%,
          var(--color-light-grey)
        );
      }
    }

    > p {
      margin: 0 0.5rem;
      text-align: center;
      white-space: nowrap;
      max-height: var(--desktop-table-header-height);

      /* prevent text from wrapping */
    }
  }

  .bet-line-event-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.header-with-info {
  h1,
  h2,
  h3 {
    display: inline-block;
  }
}

/* stylelint-disable no-descending-specificity */
.info {
  display: inline-block;

  .info-button {
    background: none;
    cursor: pointer;
  }
}
/* stylelint-enable no-descending-specificity */

.jackpot-slider {
  --margin-after-slider: 1em;

  input {
    width: 100%;
    margin-bottom: var(--margin-after-slider);
  }

  .floating-percentage-box {
    margin: 1em 0;
  }

  .slider-marks {
    position: relative;
    height: 0;

    span {
      position: absolute;
      transform: translateX(-50%)
        translateY(calc(-100% - var(--margin-after-slider)));
    }
  }
}

.modal {
  position: fixed;
  z-index: var(--info-z-index);
  left: 50%;
  top: 50px;
  transform: translate(-50%, 0%);
  color: var(--color-black);
  background-color: var(--color-white);
  opacity: 0.95;
  width: 90%;
  height: auto;
  max-height: 90%;
  max-width: 400px;
  overflow: auto;
  padding: 0 15px 15px;

  .top-bar-with-close-button {
    display: grid;
    grid-template-columns: 6fr 1fr;

    span {
      color: #aaa;
      font-size: 28px;
      font-weight: bold;
      padding: 15px 15px 0;
      grid-column: 2;
      cursor: pointer;
    }

    span:hover,
    span:focus {
      color: black;
      text-decoration: none;
    }
  }

  .content {
    overflow: auto;
    height: 92%;
    width: 100%;
    padding: 0 15px 15px;
  }
}

.small-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.footer {
  box-shadow: var(--footer-shadowing);
}

.game-round-view {
  & .footer {
    position: sticky;
    bottom: 0;

    &.mobile-only {
      width: 100vw;
    }
  }
}

.active-without-coupon-footer-content {
  display: grid;
  grid-template-columns: 2fr minmax(max-content, 1fr);
  justify-self: center;
  max-width: var(--element-max-width);
  width: 100%;
  background-color: var(--color-steel-green-blue);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  height: 6rem;

  .risk-indicator-in-footer-container {
    width: 8rem;
  }

  .prizepot-after-risk-indicator {
    place-self: center end;
  }

  .rows-info {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .right-footer-column {
    display: grid;
    grid-template: 1fr 1fr 1fr / auto auto;
    column-gap: 1ch;

    > :nth-child(even) {
      justify-self: end;
    }
  }
}

.completed-without-coupon-footer-content {
  display: grid;
  grid-template-columns: 1fr 8rem 1fr;
  justify-self: center;
  max-width: var(--element-max-width);
  width: 100%;
  background-color: var(--color-steel-green-blue);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  height: 6rem;

  .risk-indicator-in-footer-container {
    width: 6rem;
    place-self: center;
  }

  .favorites-before-risk-indicator {
    place-self: center end;
  }

  .underdogs-after-risk-indicator {
    place-self: center start;
  }
}

.coupon-footer-content {
  display: grid;
  grid-template-columns: 2fr minmax(max-content, 1fr);
  max-width: var(--element-max-width);
  width: 100%;
  background-color: var(--color-steel-green-blue);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  height: 6rem;

  .risk-indicator-in-footer-container {
    width: 8rem;
  }

  .prizepot-after-risk-indicator {
    place-self: center end;
  }

  .rows-info {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .right-footer-column {
    display: grid;
    grid-template: 1fr 1fr 1fr / auto auto;
    column-gap: 1ch;

    > :nth-child(even) {
      justify-self: end;
    }
  }
}

.purchasable-footer-content {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  height: auto;
  background-color: var(--color-steel-green-blue);
  padding-bottom: var(--padding-m);

  .purchasable-footer-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-s);
    background-color: var(--color-darker-steel-green-blue);
    padding: var(--padding-xxs) var(--padding-m);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;

    .info-button {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      background: none;
      cursor: pointer;
    }
  }

  .purchasable-footer-list {
    font-size: var(--font-size-m);
    padding: var(--padding-xxs) var(--padding-m);
    flex-grow: 1;

    > .two-column-list-value {
      font-weight: normal;
    }
  }

  .purchasable-footer-buttons {
    display: flex;
    flex-direction: row;
    padding: var(--padding-xs);
    justify-content: center;
    position: relative;

    > button {
      border: 1px solid var(--color-white);
      padding: var(--padding-s);
      font-size: var(--font-size-m);
    }

    /* 'Purchase' button */
    > .purchase-btn {
      /* Allows for 19 chars without a width change, >19 broadens the button width. */
      --min-purchase-btn-width: 150px;

      text-wrap: nowrap;
      min-width: var(--min-purchase-btn-width);

      /* Bold font on purchase value, not on label */
      > :nth-child(1) {
        font-weight: normal;
      }
    }

    /* 'Clear' button (override some .btn properties) */
    > .clear-btn {
      position: absolute;
      text-align: center;
      right: var(--padding-m);
      background: transparent;
    }
  }
}

.two-column-list-item {
  display: flex;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: calc(var(--padding-xs));
  }

  .two-column-list-key {
    margin-right: calc(var(--padding-xs));
    white-space: nowrap;
    order: 1;
  }

  &::after {
    content: '';
    order: 2;
    flex-grow: 1;
    height: 1px;
    background-color: #8e8e8e;
    border-radius: 1px;
    align-self: center;
  }

  /* stylelint-disable no-descending-specificity */

  .two-column-list-value {
    margin-left: calc(var(--padding-xs));
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    order: 3;
  }

  /* stylelint-enable no-descending-specificity */
}

.coupon-footer-container {
  display: flex;
  justify-self: center;
  flex-direction: column;
  color: var(--color-white);
  height: auto;
  background-color: var(--color-steel-green-blue);
  padding-bottom: var(--padding-m);
  box-shadow: var(--box-shadow-subtle);

  .coupon-footer-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-darker-steel-green-blue);
    padding: var(--padding-xxs) var(--padding-m);
    letter-spacing: 0;

    .info-button {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      background: none;
      cursor: pointer;
    }
  }

  .coupon-footer-list {
    font-size: var(--font-size-m);
    flex-grow: 1;

    .two-column-list-value {
      font-weight: normal;
    }
  }
}