:root {
  color-scheme: dark;
  --blue-950: #031c2d;
  --blue-900: #062c46;
  --blue-800: #0a4264;
  --blue-700: #12648a;
  --cyan: #67ddff;
  --green-dark: #07561e;
  --green: #17a844;
  --green-light: #7cff84;
  --red-dark: #8c1607;
  --red: #ef3218;
  --yellow: #ffe941;
  --yellow-dark: #a98b08;
  --ink: #071018;
  --white: #f9ffff;
  --cabinet-shadow:
    inset 0 0 0 0.35cqw rgb(135 235 255 / 18%),
    inset 0 -3cqw 6cqw rgb(0 12 24 / 45%),
    0 2cqw 7cqw rgb(0 0 0 / 55%);
  --tile-shadow:
    inset 0 0.35cqw 0.35cqw rgb(255 255 255 / 28%),
    inset 0 -0.45cqw 0.5cqw rgb(0 0 0 / 35%),
    0 0.25cqw 0.35cqw rgb(0 0 0 / 75%);
  font-family: "Trebuchet MS", "Avenir Next Condensed", "Franklin Gothic Medium", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 50% 40%, #194d67 0, #071c2c 48%, #020a11 100%);
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 0.38cqw solid #fff76b;
  outline-offset: 0.28cqw;
  z-index: 20;
}

.viewport {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(env(safe-area-inset-top), 0.6rem) max(env(safe-area-inset-right), 0.6rem)
    max(env(safe-area-inset-bottom), 0.6rem) max(env(safe-area-inset-left), 0.6rem);
}

.stage {
  container-type: inline-size;
  position: relative;
  width: min(calc(100dvh * 4 / 3), 100dvw);
  width: min(calc((100dvh - 1.2rem) * 4 / 3), calc(100dvw - 1.2rem));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background:
    linear-gradient(132deg, transparent 0 43%, rgb(255 255 255 / 4%) 43% 45%, transparent 45%)
      0 0 / 18cqw 18cqw,
    linear-gradient(45deg, rgb(0 20 35 / 20%) 25%, transparent 25% 75%, rgb(0 20 35 / 20%) 75%)
      0 0 / 13cqw 13cqw,
    radial-gradient(ellipse at 50% -15%, #2085a6 0, #0b5678 44%, #062e4b 100%);
  border: 0.5cqw solid #041a2a;
  border-radius: 1.3cqw;
  box-shadow: var(--cabinet-shadow);
  user-select: none;
  animation: crt-luminance 5.2s ease-in-out infinite;
}

.cabinet-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 30% 65%, rgb(58 190 223 / 16%), transparent 35%),
    radial-gradient(ellipse at 80% 30%, rgb(82 190 215 / 13%), transparent 32%);
  pointer-events: none;
}

.topbar {
  position: absolute;
  inset: 1.4cqw 2.1cqw auto 2.5cqw;
  height: 15cqw;
  display: flex;
  align-items: flex-start;
}

.logo {
  position: relative;
  width: 25cqw;
  height: 14cqw;
  filter: drop-shadow(0 0.55cqw 0.25cqw rgb(0 0 0 / 65%));
  transform: rotate(-2deg);
}

.logo-bubble {
  position: absolute;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, #ff8b6e 0 7%, #ec3a20 27%, #a51606 72%, #5e0b02);
  box-shadow:
    inset 0.45cqw 0.5cqw 0.7cqw rgb(255 255 255 / 25%),
    0 0.4cqw 0.5cqw rgb(0 0 0 / 55%);
}

.bubble-one {
  width: 8.2cqw;
  height: 8.2cqw;
  left: 0.5cqw;
  top: 2.2cqw;
}

.bubble-two {
  width: 6.2cqw;
  height: 6.2cqw;
  left: 6.3cqw;
  top: 0.1cqw;
}

.logo-line {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 1000;
  letter-spacing: -0.17cqw;
  line-height: 0.8;
  -webkit-text-stroke: 0.15cqw #26313a;
  text-shadow:
    0 0.28cqw 0 #202830,
    0.18cqw 0.2cqw 0.35cqw rgb(0 0 0 / 60%);
}

.logo-paska {
  left: 4cqw;
  top: 1.4cqw;
  font-size: 4.3cqw;
}

.logo-housu {
  left: 2.8cqw;
  top: 5cqw;
  font-size: 4.45cqw;
}

.logo-keno {
  left: 7.2cqw;
  top: 8.8cqw;
  color: #fff36a;
  font-size: 3.85cqw;
  transform: rotate(1deg);
}

.meters {
  position: absolute;
  left: 28.3cqw;
  top: 2.1cqw;
  width: 54cqw;
  display: flex;
  gap: 1.2cqw;
}

.meter {
  min-width: 15.5cqw;
  padding: 0.55cqw 1.1cqw 0.65cqw;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8cqw;
  color: #d2f5ff;
  background: linear-gradient(#061722, #0a2637);
  border: 0.25cqw solid #78b9d0;
  border-radius: 0.85cqw;
  box-shadow:
    inset 0 0 0 0.18cqw #00111d,
    0 0.3cqw 0.55cqw rgb(0 0 0 / 50%);
  transform: skew(-4deg);
}

.meter span {
  font-size: 1.15cqw;
  font-weight: 800;
  letter-spacing: 0.04cqw;
}

.meter strong {
  color: #fff;
  font-size: 1.45cqw;
  white-space: nowrap;
}

.meter-gold {
  border-color: #e8d663;
}

.meter-gold span {
  color: #ffed43;
}

.profile-button {
  position: absolute;
  right: -0.2cqw;
  top: 0.1cqw;
  width: 7.4cqw;
  height: 8.3cqw;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 0.45cqw 0.25cqw rgb(0 0 0 / 58%));
}

.profile-button-frame {
  position: absolute;
  inset: 0 0 0.9cqw;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0.32cqw solid #ffd94b;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgb(113 226 255 / 58%), transparent 30%),
    radial-gradient(circle, #146e98, #062f4e 70%);
  box-shadow:
    inset 0 0 0 0.2cqw #031725,
    inset 0 0.5cqw 0.65cqw rgb(255 255 255 / 23%),
    0 0 0.65cqw rgb(255 226 72 / 35%);
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.profile-button img {
  width: 116%;
  height: 116%;
  object-fit: contain;
  transform: translateY(0.18cqw);
}

.profile-button-name {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 5.8cqw;
  translate: -50% 0;
  padding: 0.23cqw 0.75cqw 0.27cqw;
  border: 0.18cqw solid #3b2900;
  border-radius: 0.45cqw;
  color: #2a2100;
  background: linear-gradient(#fff47a, #e5bb19);
  box-shadow: 0 0.25cqw 0.25cqw rgb(0 0 0 / 48%);
  font-size: 0.92cqw;
  font-weight: 1000;
  letter-spacing: 0.03cqw;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.profile-button:hover .profile-button-frame {
  filter: brightness(1.18);
  transform: translateY(-0.2cqw) rotate(2deg);
}

.profile-button:active .profile-button-frame {
  transform: translateY(0.18cqw) scale(0.96);
}

.profile-button.profile-changed {
  animation: profile-button-arrive 620ms cubic-bezier(0.2, 0.8, 0.24, 1.18);
}

.play-area {
  position: absolute;
  inset: 18.8cqw 3.4cqw auto 3.4cqw;
  height: 37.4cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.3cqw;
  gap: 3.1cqw;
}

.board-shell {
  position: relative;
  min-width: 0;
}

.number-board,
.double-board,
.board-transition-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.82cqw;
  perspective: 60cqw;
}

.number-board {
  z-index: 1;
}

.double-board {
  z-index: 2;
}

.board-transition-layer {
  z-index: 4;
  contain: layout paint style;
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

.number-tile,
.double-tile {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0.35cqw solid #021721;
  border-radius: 0.55cqw;
  color: #fff;
  background:
    radial-gradient(circle at 54% 45%, rgb(115 255 129 / 30%) 0 8%, transparent 48%),
    linear-gradient(105deg, var(--green-dark), var(--green) 52%, #087329);
  box-shadow: var(--tile-shadow);
  cursor: pointer;
  font-size: 2.65cqw;
  font-weight: 1000;
  letter-spacing: -0.09cqw;
  line-height: 1;
  text-shadow: 0.18cqw 0.25cqw 0.18cqw rgb(0 0 0 / 75%);
  transition:
    filter 120ms ease,
    transform 120ms ease,
    background 160ms ease;
}

.number-tile::before {
  content: "";
  position: absolute;
  inset: 0.3cqw 0.45cqw auto;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(rgb(255 255 255 / 22%), transparent);
  pointer-events: none;
}

.number-tile:nth-child(4n + 2) {
  filter: brightness(1.12);
}

.number-tile:nth-child(7n + 3) {
  filter: brightness(1.32);
}

.number-tile:hover:not(:disabled) {
  filter: brightness(1.35);
  transform: translateY(-0.18cqw);
}

.number-tile:active:not(:disabled) {
  transform: translateY(0.2cqw) scale(0.97);
}

.number-tile.selected {
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgb(176 255 173 / 72%) 0 9%, transparent 52%),
    linear-gradient(105deg, #27a944, #6fe97a 52%, #22a33d);
  filter: brightness(1.18);
  box-shadow:
    inset 0 0.42cqw 0.55cqw rgb(255 255 255 / 38%),
    inset 0 -0.45cqw 0.5cqw rgb(0 74 18 / 36%),
    0 0 0 0.18cqw rgb(175 255 158 / 48%),
    0 0.25cqw 0.35cqw rgb(0 0 0 / 70%);
}

.number-tile.drawn {
  color: #d9e4e8;
  border-color: #03131c;
  background: linear-gradient(120deg, #18252c, #050a0d 58%, #010203);
  filter: none;
  box-shadow:
    inset 0 0.42cqw 0.55cqw rgb(255 255 255 / 10%),
    inset 0 -0.45cqw 0.55cqw rgb(0 0 0 / 60%),
    0 0.22cqw 0.45cqw rgb(0 0 0 / 75%);
}

.number-tile.drawn::after {
  content: none;
}

.number-tile.hit {
  color: #fff;
  border-color: #ffb296;
  background: linear-gradient(105deg, #8f1507, #ed3219 52%, #9e1908);
  filter: none;
  animation: hit-pulse 620ms ease-out;
  box-shadow:
    0 0 0 0.2cqw rgb(255 225 144 / 65%),
    0 0 1.2cqw 0.2cqw #ffdf50,
    inset 0.35cqw 0.42cqw 0.5cqw rgb(255 255 255 / 22%),
    inset -0.45cqw -0.45cqw 0.55cqw rgb(80 0 0 / 32%);
}

.number-tile.hit::after {
  content: "";
  position: absolute;
  width: min(72%, 6.3cqw);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 0.18cqw solid rgb(255 255 255 / 92%);
  border-radius: 50%;
  box-shadow:
    inset 0.22cqw 0.25cqw 0.3cqw rgb(255 255 255 / 15%),
    0 0 0.3cqw rgb(93 0 0 / 65%);
}

.number-tile.missed-selection {
  color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgb(176 255 173 / 72%) 0 9%, transparent 52%),
    linear-gradient(105deg, #27a944, #6fe97a 52%, #22a33d);
  filter: brightness(1.18);
}

.number-tile:disabled {
  cursor: default;
  opacity: 1;
}

@keyframes hit-pulse {
  0% {
    transform: scale(0.8);
    filter: brightness(2.3);
  }
  55% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

.payout-panel {
  position: relative;
  height: 100%;
  padding: 2cqw 1.55cqw 1.4cqw;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 10%), transparent 18%),
    linear-gradient(#206f90, #155974);
  border: 0.55cqw solid #2c83a2;
  border-radius: 3.3cqw 1.8cqw 2.7cqw 2.2cqw;
  box-shadow:
    inset 0 0 0 0.25cqw rgb(129 217 240 / 22%),
    inset 0 -1.2cqw 2cqw rgb(0 24 42 / 25%),
    0 0.4cqw 0.65cqw rgb(0 0 0 / 32%);
  transform: rotate(-0.7deg);
}

.panel-title,
.payout-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: center;
}

.panel-title {
  height: 2.75cqw;
  padding: 0 0.4cqw;
  font-size: 1.28cqw;
  font-weight: 900;
  letter-spacing: 0.04cqw;
  text-shadow: 0 0.18cqw 0.18cqw rgb(0 0 0 / 65%);
}

.panel-title span:last-child,
.payout-row strong {
  text-align: right;
}

.payout-rows {
  overflow: hidden;
  border: 0.16cqw solid rgb(168 225 240 / 30%);
  border-radius: 0.45cqw;
}

.payout-row {
  height: 2.75cqw;
  padding: 0 0.65cqw;
  border-bottom: 0.14cqw solid rgb(147 218 236 / 27%);
  color: #e8faff;
  font-size: 1.45cqw;
  line-height: 1;
}

.payout-row:last-child {
  border-bottom: 0;
}

.payout-row strong {
  font-size: 1.42cqw;
}

.payout-row.current {
  color: #17250d;
  background: linear-gradient(90deg, #f4cf28, #fff062, #d9b817);
  box-shadow: inset 0 0.2cqw 0.3cqw rgb(255 255 255 / 45%);
  animation: row-flash 650ms ease-out;
}

@keyframes row-flash {
  0%,
  50% {
    filter: brightness(1.8);
  }
  100% {
    filter: brightness(1);
  }
}

.message-wrap {
  position: absolute;
  inset: 57.2cqw 15cqw auto 15cqw;
  min-height: 5.3cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.message,
.submessage {
  margin: 0;
  text-shadow:
    0 0.2cqw 0.2cqw rgb(0 0 0 / 70%),
    0 0 0.8cqw rgb(34 179 223 / 30%);
}

.message {
  font-size: 2.05cqw;
  font-weight: 900;
  letter-spacing: 0.02cqw;
}

.submessage {
  margin-top: 0.35cqw;
  color: #d3edf5;
  font-size: 1.38cqw;
  font-weight: 700;
}

.controls {
  position: absolute;
  inset: auto 3.2cqw 2.2cqw 3.2cqw;
  height: 7.3cqw;
  display: grid;
  grid-template-columns: 14cqw 15cqw 14cqw 1fr 14cqw;
  gap: 1.45cqw;
  align-items: end;
}

.cabinet-button,
.stake-control {
  height: 6.7cqw;
  border: 0;
  color: #142026;
  text-shadow: 0 0.13cqw 0 rgb(255 255 255 / 45%);
  cursor: pointer;
  font-size: 1.38cqw;
  font-weight: 1000;
  letter-spacing: 0.04cqw;
}

.cabinet-button {
  border: 0.35cqw solid rgb(0 20 27 / 55%);
  border-radius: 50%;
  box-shadow:
    inset 0 0.7cqw 0.6cqw rgb(255 255 255 / 35%),
    inset 0 -1.1cqw 1cqw rgb(76 50 0 / 32%),
    0 0.6cqw 0 0.25cqw #051b26,
    0 1cqw 1.2cqw rgb(0 0 0 / 50%);
  transition:
    transform 110ms ease,
    filter 110ms ease;
}

.cabinet-button:hover:not(:disabled) {
  filter: brightness(1.15);
  transform: translateY(-0.15cqw);
}

.cabinet-button:active:not(:disabled) {
  transform: translateY(0.55cqw);
  box-shadow:
    inset 0 0.7cqw 0.6cqw rgb(255 255 255 / 22%),
    inset 0 -0.6cqw 0.8cqw rgb(76 50 0 / 32%),
    0 0.15cqw 0 0.15cqw #051b26;
}

.cabinet-button:disabled,
.stake-control button:disabled {
  cursor: default;
  filter: grayscale(0.8) brightness(0.52);
}

.cancel-button {
  background: radial-gradient(ellipse at 50% 25%, #ff8065, #e3371d 55%, #8d170a 100%);
}

.quick-button {
  grid-column: 3;
  color: #092a3b;
  background: radial-gradient(ellipse at 50% 25%, #91e9ff, #2aa9ec 55%, #10689f 100%);
}

.play-button {
  grid-column: 5;
  background: radial-gradient(ellipse at 50% 25%, #fff789, #ddda38 56%, #827b0a 100%);
}

.stake-control {
  grid-column: 2;
  display: grid;
  grid-template-columns: 3.3cqw 1fr 3.3cqw;
  align-items: center;
  overflow: hidden;
  border: 0.35cqw solid #06243b;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 25%, #65d9ff, #238bd0 58%, #0a4e89);
  box-shadow:
    inset 0 0.65cqw 0.6cqw rgb(255 255 255 / 30%),
    0 0.6cqw 0 0.2cqw #051b26,
    0 1cqw 1.2cqw rgb(0 0 0 / 45%);
}

.stake-control button {
  align-self: stretch;
  padding: 0;
  border: 0;
  color: #082b43;
  background: rgb(255 255 255 / 16%);
  cursor: pointer;
  font-size: 2.8cqw;
  font-weight: 900;
  line-height: 1;
}

.stake-control div {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.stake-control strong {
  font-size: 2cqw;
}

.stake-control span {
  margin-top: 0.25cqw;
  font-size: 0.98cqw;
}

.win-actions {
  position: absolute;
  z-index: 5;
  left: 51cqw;
  bottom: 2.2cqw;
  display: flex;
  gap: 1.3cqw;
}

.win-actions .cabinet-button {
  width: 14cqw;
  height: 7cqw;
}

.collect-button,
.double-button {
  color: #433900;
  background: radial-gradient(ellipse at 50% 25%, #fff68b, #f4db1f 55%, #9c7d05 100%);
}

.collect-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.collect-button span {
  font-size: 1.5cqw;
}

.collect-button small {
  font-size: 0.83cqw;
  font-weight: 1000;
}

.flying-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.flying-ball {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  border: 0.45cqw solid rgb(255 221 207 / 65%);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 25%, rgb(255 178 150 / 85%) 0 4%, transparent 9%),
    radial-gradient(circle at 38% 32%, #ff6249, #db2612 58%, #800e03 100%);
  box-shadow:
    inset 1cqw 1cqw 1.3cqw rgb(255 255 255 / 20%),
    inset -1cqw -1cqw 1.2cqw rgb(89 0 0 / 28%),
    0 1.8cqw 3cqw rgb(0 0 0 / 46%);
  font-size: 3.8cqw;
  font-weight: 1000;
  text-shadow: 0 0.3cqw 0.25cqw rgb(80 0 0 / 80%);
  will-change: transform, opacity;
}

.double-tile {
  display: grid;
  place-items: center;
  color: transparent;
  border-color: #06253d;
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 28%) 49%, transparent 62%),
    linear-gradient(120deg, #075c91, #41c8fc 50%, #0e6ba3);
  transform: translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.double-tile:not(.revealed)::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgb(225 248 255 / 58%);
  text-shadow: 0.12cqw 0.18cqw 0.15cqw rgb(0 25 44 / 72%);
}

.double-tile:hover:not(:disabled) {
  filter: brightness(1.24);
  transform: rotateY(0) translateY(-0.2cqw);
}

.double-tile.revealed {
  color: #fff;
  transform: rotateY(0);
}

.double-tile.zero {
  background: radial-gradient(circle at 35% 28%, #93eaff, #1685c0 55%, #06466e);
}

.double-tile.two {
  background: radial-gradient(circle at 35% 28%, #ff937c, #ef381c 55%, #8f1507);
}

.double-tile.flip-reveal {
  color: transparent;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: double-tile-reveal 540ms cubic-bezier(0.55, 0.03, 0.25, 1) both;
  animation-delay: var(--reveal-delay);
}

.double-tile.flip-reveal::before,
.double-tile.flip-reveal::after {
  position: absolute;
  inset: -0.35cqw;
  display: grid;
  place-items: center;
  border: 0.35cqw solid #06253d;
  border-radius: 0.55cqw;
  box-shadow: var(--tile-shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.double-tile.flip-reveal::before {
  content: "?";
  color: rgb(225 248 255 / 58%);
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 28%) 49%, transparent 62%),
    linear-gradient(120deg, #075c91, #41c8fc 50%, #0e6ba3);
  text-shadow: 0.12cqw 0.18cqw 0.15cqw rgb(0 25 44 / 72%);
  transform: rotateY(0deg) translateZ(0.04cqw);
}

.double-tile.flip-reveal::after {
  content: attr(data-reveal-label);
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #93eaff, #1685c0 55%, #06466e);
  text-shadow: 0.18cqw 0.25cqw 0.18cqw rgb(0 0 0 / 75%);
  transform: rotateY(180deg) translateZ(0.04cqw);
}

.double-tile.flip-reveal.two::after {
  background: radial-gradient(circle at 35% 28%, #ff937c, #ef381c 55%, #8f1507);
}

.board-transition-card {
  position: relative;
  min-width: 0;
  transform: rotateY(0deg) translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
}

.board-transition-layer.flipping-to-double .board-transition-card {
  animation: board-card-to-double 520ms cubic-bezier(0.55, 0.03, 0.25, 1) both;
  animation-delay: var(--flip-delay);
}

.board-transition-layer.flipping-to-number .board-transition-card {
  animation: board-card-to-number 520ms cubic-bezier(0.55, 0.03, 0.25, 1) both;
  animation-delay: var(--flip-delay);
}

.board-transition-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  animation: none !important;
  backface-visibility: hidden;
  pointer-events: none;
  transition: none !important;
  -webkit-backface-visibility: hidden;
}

.board-transition-front {
  transform: rotateY(0deg) translateZ(0.04cqw) !important;
}

.board-transition-back {
  transform: rotateY(180deg) translateZ(0.04cqw) !important;
}

@keyframes board-card-to-double {
  from {
    transform: rotateY(0deg) translateZ(0);
  }
  to {
    transform: rotateY(180deg) translateZ(0);
  }
}

@keyframes board-card-to-number {
  from {
    transform: rotateY(0deg) translateZ(0);
  }
  to {
    transform: rotateY(-180deg) translateZ(0);
  }
}

@keyframes double-tile-reveal {
  from {
    transform: rotateY(0deg) translateZ(0);
  }
  to {
    transform: rotateY(180deg) translateZ(0);
  }
}

.profile-picker {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
}

.profile-picker-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgb(20 115 150 / 58%), transparent 48%),
    linear-gradient(rgb(1 18 30 / 78%), rgb(0 8 14 / 93%));
  backdrop-filter: blur(0.26cqw) saturate(0.72);
  animation: profile-backdrop-in 360ms ease-out both;
}

.profile-picker-panel {
  position: relative;
  width: 91cqw;
  min-height: 59cqw;
  padding: 6.5cqw 4cqw 3.5cqw;
  overflow: hidden;
  border: 0.45cqw solid #03151f;
  border-radius: 3.8cqw 2.2cqw 3.2cqw 2.4cqw;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 12%), transparent 17%),
    repeating-linear-gradient(
      135deg,
      rgb(255 255 255 / 2.5%) 0 0.75cqw,
      transparent 0.75cqw 1.5cqw
    ),
    radial-gradient(ellipse at 50% -10%, #2380a1 0, #0b5275 46%, #052d49 100%);
  box-shadow:
    inset 0 0 0 0.28cqw #3e99b8,
    inset 0 -2.5cqw 4cqw rgb(0 15 28 / 44%),
    0 2.2cqw 5cqw rgb(0 0 0 / 72%);
  animation: profile-panel-in 520ms cubic-bezier(0.2, 0.86, 0.28, 1.08) both;
}

.profile-picker-panel:focus {
  outline: none;
}

.profile-picker-panel::before {
  content: "";
  position: absolute;
  inset: 1.2cqw;
  border: 0.16cqw solid rgb(142 221 244 / 24%);
  border-radius: 2.4cqw 1.4cqw 2.3cqw 1.6cqw;
  pointer-events: none;
}

.profile-marquee {
  position: absolute;
  inset: 1.25cqw 5cqw auto;
  display: flex;
  justify-content: space-between;
}

.profile-marquee i {
  width: 1.15cqw;
  aspect-ratio: 1;
  border: 0.13cqw solid #4e3400;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffbd3 0 12%, #ffe74a 32%, #cf8f08 70%);
  box-shadow:
    0 0 0.25cqw #fff7a1,
    0 0 0.8cqw rgb(255 222 56 / 70%);
  animation: profile-bulb 920ms ease-in-out infinite alternate;
}

.profile-marquee i:nth-child(even) {
  animation-delay: -460ms;
}

.profile-picker-logo {
  position: absolute;
  z-index: 2;
  left: 2.6cqw;
  top: 2.1cqw;
  transform: rotate(-3deg) scale(0.54);
  transform-origin: top left;
  pointer-events: none;
  animation: profile-logo-in 620ms 180ms cubic-bezier(0.18, 0.82, 0.22, 1.16) both;
}

.profile-picker-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow:
    0 0.25cqw 0.18cqw rgb(0 0 0 / 62%),
    0 0 1cqw rgb(67 208 255 / 30%);
}

.profile-kicker {
  display: inline-block;
  margin-bottom: 0.3cqw;
  padding: 0.25cqw 1.25cqw;
  border: 0.16cqw solid rgb(255 241 104 / 62%);
  border-radius: 2cqw;
  color: #fff365;
  background: rgb(4 34 51 / 62%);
  font-size: 0.95cqw;
  font-weight: 1000;
  letter-spacing: 0.24cqw;
}

.profile-picker h1 {
  margin: 0;
  color: #fff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 3.35cqw;
  font-weight: 1000;
  letter-spacing: -0.11cqw;
  line-height: 1.05;
  -webkit-text-stroke: 0.08cqw #163443;
}

.profile-options {
  position: relative;
  z-index: 1;
  margin-top: 2.1cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35cqw;
  perspective: 85cqw;
}

.profile-option {
  position: relative;
  min-width: 0;
  height: 32.5cqw;
  padding: 1.2cqw 1cqw 1.05cqw;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  overflow: hidden;
  border: 0.3cqw solid #061923;
  border-radius: 2.6cqw 1.4cqw 2.3cqw 1.6cqw;
  color: #fff;
  background:
    radial-gradient(circle at 50% 23%, rgb(116 239 255 / 18%), transparent 36%),
    linear-gradient(145deg, #147a9f, #073d5b 64%, #03283f);
  box-shadow:
    inset 0 0 0 0.18cqw rgb(119 213 237 / 34%),
    inset 0 -1.4cqw 2cqw rgb(0 14 25 / 45%),
    0 0.55cqw 0.7cqw rgb(0 0 0 / 42%);
  cursor: pointer;
  transform-origin: 50% 82%;
  animation: profile-option-in 480ms cubic-bezier(0.18, 0.82, 0.22, 1.14) both;
  animation-delay: calc(150ms + var(--profile-order) * 75ms);
  transition:
    transform 150ms ease,
    filter 150ms ease,
    border-color 150ms ease;
}

.profile-option::before {
  content: "";
  position: absolute;
  inset: 0.7cqw;
  border: 0.13cqw dashed rgb(169 231 248 / 24%);
  border-radius: 1.8cqw 0.9cqw 1.6cqw 1.1cqw;
  pointer-events: none;
}

.profile-option:hover,
.profile-option:focus-visible {
  border-color: #ffe751;
  filter: brightness(1.12);
  transform: translateY(-0.7cqw) rotate(calc((var(--profile-order) - 1.5) * 0.7deg));
  box-shadow:
    inset 0 0 0 0.18cqw rgb(255 239 96 / 34%),
    inset 0 -1.4cqw 2cqw rgb(0 14 25 / 42%),
    0 0.7cqw 1.2cqw rgb(0 0 0 / 50%),
    0 0 1.3cqw rgb(255 224 56 / 26%);
}

.profile-option:active {
  transform: translateY(0.15cqw) scale(0.97);
}

.profile-option.chosen {
  border-color: #ffe547;
  background:
    radial-gradient(circle at 50% 23%, rgb(255 244 110 / 21%), transparent 39%),
    linear-gradient(145deg, #198d9b, #075a62 64%, #033d49);
}

.profile-portrait {
  position: relative;
  width: 18cqw;
  height: 22.4cqw;
  display: grid;
  place-items: center;
}

.profile-portrait::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 14.5cqw;
  height: 3.2cqw;
  left: 50%;
  bottom: 0.4cqw;
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(0 10 19 / 48%);
  filter: blur(0.55cqw);
}

.profile-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.65cqw 0.38cqw rgb(0 5 13 / 62%));
  animation: profile-float 2.8s ease-in-out infinite;
  animation-delay: calc(var(--profile-order) * -410ms);
  transition: transform 170ms cubic-bezier(0.2, 0.72, 0.2, 1.18);
}

.profile-option:hover .profile-portrait img,
.profile-option:focus-visible .profile-portrait img {
  transform: scale(1.075) rotate(calc((var(--profile-order) - 1.5) * -0.8deg));
}

.profile-option[data-profile="mikko"] .profile-portrait img {
  transform: scale(1.08);
}

.profile-option[data-profile="olli"] .profile-portrait img {
  transform: scale(1.01);
}

.profile-option strong {
  position: relative;
  width: calc(100% - 1.2cqw);
  padding: 0.52cqw 0.4cqw 0.62cqw;
  border: 0.18cqw solid #543500;
  border-radius: 0.55cqw;
  color: #2a2000;
  background:
    linear-gradient(rgb(255 255 255 / 28%), transparent 44%),
    linear-gradient(100deg, #e6b613, #fff36b 52%, #c99709);
  box-shadow:
    inset 0 -0.28cqw 0.35cqw rgb(127 83 0 / 25%),
    0 0.35cqw 0.35cqw rgb(0 0 0 / 42%);
  font-size: 1.55cqw;
  font-weight: 1000;
  letter-spacing: 0.04cqw;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0.1cqw 0 rgb(255 255 255 / 46%);
}

.profile-option-cue {
  margin-top: 0.58cqw;
  color: #c8ebf5;
  font-size: 0.76cqw;
  font-weight: 900;
  letter-spacing: 0.2cqw;
  opacity: 0;
  transform: translateY(0.3cqw);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.profile-option:hover .profile-option-cue,
.profile-option:focus-visible .profile-option-cue {
  opacity: 1;
  transform: translateY(0);
}

.profile-picker.closing {
  pointer-events: none;
}

.profile-picker.closing .profile-picker-panel {
  animation: profile-panel-out 380ms cubic-bezier(0.55, 0, 0.88, 0.42) both;
}

.profile-picker.closing .profile-picker-backdrop {
  animation: profile-backdrop-out 380ms ease-in both;
}

.profile-picker.closing .profile-option.chosen {
  animation: profile-option-chosen 390ms cubic-bezier(0.2, 0.8, 0.22, 1.16) both;
}

@keyframes profile-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes profile-backdrop-out {
  to {
    opacity: 0;
  }
}

@keyframes profile-panel-in {
  from {
    opacity: 0;
    transform: translateY(4cqw) scale(0.9);
  }
}

@keyframes profile-panel-out {
  to {
    opacity: 0;
    transform: translateY(-2cqw) scale(0.96);
  }
}

@keyframes profile-option-in {
  from {
    opacity: 0;
    transform: translateY(4cqw) rotateX(-24deg) scale(0.78);
  }
}

@keyframes profile-logo-in {
  from {
    opacity: 0;
    transform: translateY(-1.8cqw) rotate(-12deg) scale(0.32);
  }
}

@keyframes profile-option-chosen {
  38% {
    filter: brightness(1.55);
    transform: translateY(-1.4cqw) scale(1.08);
  }
  to {
    opacity: 0;
    transform: translateY(-2.4cqw) scale(1.12);
  }
}

@keyframes profile-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.38cqw;
  }
}

@keyframes profile-bulb {
  to {
    filter: brightness(0.62);
    box-shadow: 0 0 0.2cqw rgb(255 226 67 / 40%);
  }
}

@keyframes profile-button-arrive {
  0% {
    opacity: 0;
    transform: translateY(-2cqw) rotate(-14deg) scale(0.55);
  }
  58% {
    transform: translateY(0.2cqw) rotate(4deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.screen-shine {
  position: absolute;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(108deg, transparent 0 20%, rgb(255 255 255 / 3%) 26%, transparent 34%),
    radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 7%), transparent 37%),
    linear-gradient(90deg, rgb(92 205 255 / 1.2%), transparent 18% 82%, rgb(255 104 76 / 0.8%)),
    radial-gradient(ellipse at 50% 48%, rgb(139 229 255 / 2.5%), transparent 68%),
    radial-gradient(ellipse at center, transparent 58%, rgb(0 12 20 / 8%) 80%, rgb(0 3 8 / 30%) 100%);
  box-shadow:
    inset 0 0 1.2cqw rgb(187 238 255 / 7%),
    inset 0 0 5cqw rgb(0 5 12 / 18%);
  pointer-events: none;
}

.screen-shine::before {
  content: "";
  position: absolute;
  inset: -4px 0 0;
  background: repeating-linear-gradient(
    to bottom,
    rgb(205 242 255 / 2.4%) 0,
    rgb(205 242 255 / 2.4%) 1px,
    rgb(0 9 15 / 5.5%) 1px,
    rgb(0 9 15 / 5.5%) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: crt-scan 2.1s linear infinite;
}

.screen-shine::after {
  content: "";
  position: absolute;
  inset: -55% 0;
  background: linear-gradient(
    to bottom,
    transparent 38%,
    rgb(180 232 248 / 0%) 44%,
    rgb(180 232 248 / 4.5%) 50%,
    rgb(8 38 52 / 2%) 53%,
    transparent 62%
  );
  animation: crt-refresh 7.2s ease-in-out infinite;
}

@keyframes crt-scan {
  to {
    transform: translateY(4px);
  }
}

@keyframes crt-refresh {
  0%,
  16% {
    transform: translateY(-34%);
  }
  72%,
  100% {
    transform: translateY(34%);
  }
}

@keyframes crt-luminance {
  0%,
  100% {
    filter: brightness(0.99) saturate(0.995);
  }
  50% {
    filter: brightness(1.015) saturate(1.01);
  }
}

@media (max-aspect-ratio: 4 / 3) {
  .viewport {
    padding: max(env(safe-area-inset-top), 0.2rem) 0 max(env(safe-area-inset-bottom), 0.2rem);
  }

  .stage {
    width: 100dvw;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .number-tile,
  .double-tile {
    border-color: #fff;
  }

  .submessage {
    color: #fff;
  }
}