:root {
  color-scheme: light;
  --stage-width: 470px;
  --stage-height: 360px;
  --stage-scale: 1;
  --ink: #17394a;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: #bfdce6;
  color: var(--ink);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font: inherit;
}

.shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.play-surface {
  position: relative;
  width: min(100vw, calc(100vh * 470 / 360));
  height: min(100vh, calc(100vw * 360 / 470));
  aspect-ratio: 470 / 360;
  overflow: hidden;
  background: #8fdff4;
  touch-action: none;
  box-shadow:
    0 0 0 1px #4a9bb8,
    0 18px 55px rgba(28, 72, 92, 0.24);
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-width);
  height: var(--stage-height);
  transform: scale(var(--stage-scale));
  transform-origin: left top;
  overflow: hidden;
}

.background,
.board,
.effects,
.hud,
.intro,
.intro-scene,
.round-transition {
  position: absolute;
  inset: 0;
}

.background {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.background-art {
  display: block;
  width: 470px;
  height: 360px;
}

.board,
.effects {
  pointer-events: none;
}

.tile {
  position: absolute;
  width: 51.2px;
  height: 50.45px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  overflow: visible;
  pointer-events: auto;
}

.tile.is-free {
  cursor: pointer;
}

.tile-visual,
.tile-layer,
.sprite-frame,
.pong-frame {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.tile.is-blocked {
  cursor: default;
}

.tile.is-removing {
  pointer-events: none;
  animation: tile-remove var(--removal-duration, 667ms) linear forwards;
}

.tile-base-selected {
  opacity: 0;
}

.tile.is-selected .tile-base-normal,
.tile.is-hinted .tile-base-normal,
.tile-base.is-selected .tile-base-normal {
  opacity: 0;
}

.tile.is-selected .tile-base-selected,
.tile.is-hinted .tile-base-selected,
.tile-base.is-selected .tile-base-selected {
  opacity: 1;
}

.sprite {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.sprite-frame-a {
  animation: sprite67-a 500ms steps(1, end) infinite;
}

.sprite-frame-b {
  animation: sprite67-b 500ms steps(1, end) infinite;
}

@keyframes sprite67-a {
  0%,
  49.99% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes sprite67-b {
  0%,
  49.99% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

.removal-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes tile-remove {
  100% {
    visibility: hidden;
  }
}

.pong {
  position: absolute;
  pointer-events: none;
}

.pong-frame {
  opacity: 0;
  animation: pong-frame 84ms steps(1, end) forwards;
  animation-delay: calc(var(--frame-index) * 84ms);
}

@keyframes pong-frame {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.hud {
  pointer-events: none;
  font-weight: 700;
  text-align: center;
}

.hud-round,
.hud-score,
.hud-hints {
  position: absolute;
}

.hud-round {
  left: 40px;
  top: 41px;
  width: 32px;
  color: #fff13f;
  font-size: 19px;
  -webkit-text-stroke: 1px white;
}

.hud-score {
  left: 280px;
  top: 30px;
  width: 68px;
  color: #ff245b;
  font-size: 14px;
}

.hud-hints {
  left: 394px;
  top: 17px;
  width: 34px;
  color: #ff5bff;
  font-size: 21px;
  -webkit-text-stroke: 1px white;
}

.game-button,
.nomatch-restart,
.sound-button {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.nomatch-restart > svg,
.button-state {
  width: 100%;
  height: 100%;
  display: block;
}

.nomatch-restart > svg {
  pointer-events: none;
}

.game-button {
  background-image: var(--state-up);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.game-button:hover {
  background-image: var(--state-over, var(--state-up));
}

.game-button:active {
  background-image: var(--state-down, var(--state-over, var(--state-up)));
}

.game-button.has-state-layers,
.game-button.has-state-layers:hover,
.game-button.has-state-layers:active,
.intro-image-button.has-state-layers,
.intro-image-button.has-state-layers:hover,
.intro-image-button.has-state-layers:active {
  background-image: none;
}

.button-state {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.button-state-up {
  opacity: 1;
}

.has-state-layers:hover .button-state-up,
.has-state-layers:active .button-state-up,
.has-state-layers:active .button-state-over {
  opacity: 0;
}

.has-state-layers:hover .button-state-over,
.has-state-layers:active .button-state-down {
  opacity: 1;
}

.game-button[hidden],
.nomatch-restart[hidden] {
  display: none;
}

.hint-button {
  left: 388.55px;
  top: 35.1px;
  width: 66.9px;
  height: 35.8px;
}

.reset-button {
  left: 76px;
  top: 43px;
  width: 22px;
  height: 22px;
}

.game-button img {
  width: 100%;
  height: 100%;
  display: block;
}

.sound-button {
  right: 0px;
  bottom: 0px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(36, 106, 134, 0.52);
  background: rgba(247, 252, 255, 0.88);
  color: #154962;
  font-weight: 700;
}

.nomatch-restart {
  left: 118px;
  top: 144px;
  width: 234px;
  height: 53px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 9000;
}

.message {
  position: absolute;
  left: 180px;
  top: 20px;
  height: 40px;
  right: 180px;
  text-align: center;
  color: #3399ff;
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  -webkit-text-stroke: 1px white;
  pointer-events: none;
}

.message.is-active {
  animation: message-flash 900ms ease-out forwards;
}

@keyframes message-flash {
  0%,
  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.round-transition {
  display: none;
  pointer-events: none;
}

.round-transition.is-active {
  display: block;
}

.round-transition-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.round-transition.is-active .round-transition-image {
  animation: round-card-placement var(--round-transition-duration, 1.75s) linear forwards;
}

.round-transition-art {
  position: absolute;
  display: block;
  transform-origin: 0 0;
}

.round-transition span {
  position: absolute;
  left: 188.9px;
  top: 173.15px;
  width: 99.05px;
  height: 77.2px;
  color: #ff6600;
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  line-height: 77.2px;
}

.intro {
  display: block;
  overflow: hidden;
  background: #70d9f2;
  z-index: 10000;
}

.intro[hidden] {
  display: none;
}

.intro-scene {
  overflow: hidden;
  pointer-events: none;
}

.intro-asset,
.intro-title,
.intro-star {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.intro-base,
.intro-beams-art,
.intro-pile {
  width: 470px;
  height: 360px;
}

.intro-pile-over {
  opacity: 0;
}

.intro-cheese:hover ~ .intro-scene .intro-pile-up {
  opacity: 0;
}

.intro-cheese:hover ~ .intro-scene .intro-pile-over {
  opacity: 1;
}

.intro-beams {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: intro-beams 2917ms linear forwards;
  clip-path: circle(0 at 245.8px 513.95px);
}

@keyframes intro-beams {
  0%,
  57% {
    opacity: 0;
    clip-path: circle(0 at 245.8px 513.95px);
  }

  60% {
    opacity: 1;
    clip-path: circle(225.1px at 241.5px 384.85px);
  }

  74% {
    opacity: 1;
    clip-path: circle(225.1px at 236.85px 244.95px);
  }

  88%,
  100% {
    opacity: 1;
    clip-path: circle(225.1px at 233.85px 155.3px);
  }
}

.intro-title {
  opacity: 0;
  transform-origin: 0 0;
}

.intro-title-139 {
  animation: intro-title-139 2917ms step-end forwards;
}

.intro-title-140 {
  animation: intro-title-140 2917ms step-end forwards;
}

.intro-title-141 {
  animation: intro-title-141 2917ms step-end forwards;
}

@keyframes intro-title-139 {
  0% {
    opacity: 0;
    transform: matrix(0.1145, 0, 0, 0.1145, 94.95, 62.95);
  }

  2.8571% {
    opacity: 1;
    transform: matrix(0.1145, 0, 0, 0.1145, 94.95, 62.95);
  }

  5.7143% {
    opacity: 1;
    transform: matrix(0.5509, 0, 0, 0.5509, 94.95, 62.95);
  }

  8.5714% {
    opacity: 1;
    transform: matrix(0.9081, 0, 0, 0.9081, 94.95, 62.9);
  }

  11.4286% {
    opacity: 1;
    transform: matrix(1.1858, 0, 0, 1.1858, 94.95, 62.95);
  }

  14.2857% {
    opacity: 1;
    transform: matrix(1.3842, 0, 0, 1.3842, 94.9, 62.9);
  }

  17.1429% {
    opacity: 1;
    transform: matrix(1.5033, 0, 0, 1.5033, 94.9, 62.95);
  }

  20% {
    opacity: 1;
    transform: matrix(1.543, 0, 0, 1.543, 94.95, 62.95);
  }

  22.8571%,
  100% {
    opacity: 1;
    transform: matrix(0.9843, 0, 0, 0.9843, 94.95, 62.95);
  }
}

@keyframes intro-title-140 {
  0%,
  22.8571% {
    opacity: 0;
    transform: matrix(0.2381, 0, 0, 0.2381, 245.35, 67);
  }

  25.7143% {
    opacity: 1;
    transform: matrix(0.4946, 0, 0, 0.4946, 245.35, 67);
  }

  28.5714% {
    opacity: 1;
    transform: matrix(0.7511, 0, 0, 0.7511, 245.35, 67);
  }

  31.4286% {
    opacity: 1;
    transform: matrix(1.0077, 0, 0, 1.0077, 245.35, 67);
  }

  34.2857% {
    opacity: 1;
    transform: matrix(1.2642, 0, 0, 1.2642, 245.35, 67);
  }

  37.1429% {
    opacity: 1;
    transform: matrix(1.5207, 0, 0, 1.5207, 245.35, 66.95);
  }

  40% {
    opacity: 1;
    transform: matrix(1.7772, 0, 0, 1.7772, 245.35, 67);
  }

  42.8571%,
  100% {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 245.35, 67);
  }
}

@keyframes intro-title-141 {
  0%,
  45.7143% {
    opacity: 0;
    transform: matrix(0.202, 0.0143, -0.0167, 0.2362, 378.95, 68.35);
  }

  48.5714% {
    opacity: 1;
    transform: matrix(0.5069, 0.0356, -0.0416, 0.5929, 379, 68.35);
  }

  51.4286% {
    opacity: 1;
    transform: matrix(0.812, 0.0569, -0.0666, 0.9496, 378.95, 68.35);
  }

  54.2857% {
    opacity: 1;
    transform: matrix(1.117, 0.0783, -0.0916, 1.3063, 378.95, 68.3);
  }

  57.1429% {
    opacity: 1;
    transform: matrix(1.422, 0.0997, -0.1166, 1.663, 378.95, 68.35);
  }

  60% {
    opacity: 1;
    transform: matrix(1.7273, 0.1221, -0.1427, 2.0201, 378.95, 68.35);
  }

  62.8571% {
    opacity: 1;
    transform: matrix(1.6459, 0.1154, -0.135, 1.9248, 378.9, 68.4);
  }

  65.7143% {
    opacity: 1;
    transform: matrix(1.5647, 0.1097, -0.1284, 1.8299, 378.9, 68.4);
  }

  68.5714% {
    opacity: 1;
    transform: matrix(1.4836, 0.1041, -0.1217, 1.7349, 378.95, 68.4);
  }

  71.4286% {
    opacity: 1;
    transform: matrix(1.4024, 0.0984, -0.115, 1.6401, 378.95, 68.4);
  }

  74.2857% {
    opacity: 1;
    transform: matrix(1.3213, 0.0926, -0.1084, 1.5452, 378.9, 68.4);
  }

  77.1429% {
    opacity: 1;
    transform: matrix(1.2401, 0.087, -0.1017, 1.4503, 378.95, 68.35);
  }

  80% {
    opacity: 1;
    transform: matrix(1.159, 0.0813, -0.0951, 1.3554, 378.9, 68.35);
  }

  82.8571%,
  100% {
    opacity: 1;
    transform: matrix(1.078, 0.0762, -0.0891, 1.2607, 378.95, 68.35);
  }
}

.intro-star {
  opacity: 0;
  transform-origin: 0 0;
  animation: intro-star-opacity 750ms steps(9, end) 1667ms infinite;
}

.intro-star-art {
  animation: intro-star-spin 750ms steps(9, end) 1667ms infinite;
}

@keyframes intro-star-opacity {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes intro-star-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.intro-image-button,
.intro-cheese,
.intro-toggle {
  position: absolute;
  z-index: 2;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
}

.intro-cheese {
  border-radius: 50%;
}

.intro-image-button {
  background-image: var(--state-up);
}

.intro-image-button:hover {
  background-image: var(--state-over, var(--state-up));
}

.intro-image-button:active {
  background-image: var(--state-down, var(--state-over, var(--state-up)));
}

.intro-image-button[hidden] {
  display: none;
}

.intro-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.intro-toggle-art {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--state-up);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.intro-toggle:hover .intro-toggle-art {
  background-image: var(--state-over, var(--state-up));
}

.intro-toggle:active .intro-toggle-art {
  background-image: var(--state-down, var(--state-over, var(--state-up)));
}

.intro-toggle input:checked + .intro-toggle-art {
  background-image: var(--state-checked, var(--state-up));
}

.intro-toggle:hover input:checked + .intro-toggle-art {
  background-image: var(--state-checkedOver, var(--state-checked, var(--state-up)));
}

.intro-toggle:active input:checked + .intro-toggle-art {
  background-image: var(--state-checkedDown, var(--state-checkedOver, var(--state-checked, var(--state-up))));
}


@supports (height: 100dvh) {
  .shell {
    width: 100dvw;
    height: 100dvh;
  }

  .play-surface {
    width: min(100dvw, calc(100dvh * 470 / 360));
    height: min(100dvh, calc(100dvw * 360 / 470));
  }
}