:root {
  color-scheme: dark;
  --viewport-height: 100vh;
  --viewport-width: 100vw;
  --viewport-landscape-width: 177.5vh;
  --device-pixel: 1px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --rounded: "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --focus: #fff36b;
}

@supports (height: 100svh) {
  :root {
    --viewport-height: 100svh;
    --viewport-landscape-width: 177.5svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
    --viewport-landscape-width: 177.5dvh;
  }
}

@supports (width: 100dvw) {
  :root {
    --viewport-width: 100dvw;
  }
}

/* Home-screen PWAs have no browser toolbar to retract. Keep 100vh authoritative
   for the full installed lifetime: iOS can transiently report every DOM
   measurement at a shorter browser-chrome height even while 100vh is correct. */
html.is-installed-app {
  --viewport-height: 100vh;
  --viewport-width: 100vw;
  --viewport-landscape-width: 177.5vh;
  height: 100vh;
  min-height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #000;
  color: #fff;
  font-family: var(--system);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
}

/* In installed mode all four edges, rather than an occasionally stale WebKit
   height, define the root shell. Safe-area padding remains solely on .app. */
html.is-installed-app body,
html.is-installed-app .app {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
}

button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
}

button:disabled {
  cursor: default;
  opacity: 0.3;
  filter: saturate(0.25);
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: max(2px, 0.8cqh) solid var(--focus);
  outline-offset: max(1px, 0.5cqh);
}

img,
canvas {
  -webkit-user-drag: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.app {
  position: fixed;
  inset: 0;
  display: grid;
  width: 100%;
  height: var(--viewport-height);
  min-height: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  touch-action: none;
}

.game-frame {
  --wide-control-gutter: max(
    0px,
    calc((var(--viewport-width) - var(--safe-left) - var(--safe-right) - 100cqw) / 2)
  );
  position: relative;
  container-name: game;
  container-type: size;
  width: min(100%, var(--viewport-landscape-width));
  max-height: 100%;
  aspect-ratio: 568 / 320;
  overflow: visible;
  isolation: isolate;
  background: #000;
  box-shadow: none;
  touch-action: none;
}

.game-margin-canvas {
  position: absolute;
  z-index: 0;
  top: 0;
  display: block;
  width: 640cqh;
  height: 100%;
  background: #000;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.game-margin-left {
  right: calc(100% - var(--device-pixel));
}

.game-margin-right {
  left: calc(100% - var(--device-pixel));
}

/* Mobile WebKit can leak a fractional column from a previously rendered level
   at the centered frame edges. Every menu paints its own background, so only
   composite the gameplay canvas during gameplay. Plain black menus also have
   no margin artwork to display. */
.game-frame:not([data-screen="game"]) > #game-canvas,
.game-frame[data-screen="difficulty-screen"] > .game-margin-canvas,
.game-frame[data-screen="options-screen"] > .game-margin-canvas,
.game-frame[data-screen="challenge-screen"] > .game-margin-canvas {
  visibility: hidden;
}

#game-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  touch-action: none;
}

.screen {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  touch-action: none;
}

.screen > * {
  position: absolute;
  z-index: 1;
}

.image-button {
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
}

.image-button img,
.difficulty-choice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.home-button:active:not(:disabled),
.pause-button:active:not(:disabled),
.checkpoint-button:active:not(:disabled),
.death-reduction-button:active:not(:disabled) {
  /* Native foreground images use UIButton's highlighted-image adjustment. */
  filter: brightness(1.18);
  transform: none;
}

.difficulty-choice:active:not(:disabled),
.difficulty-card:active:not(:disabled) {
  /* Native difficulty UIButtons set adjustsImageWhenHighlighted to NO. */
  filter: none;
  transform: none;
}

.challenge-choice:active:not(:disabled),
.challenge-tile:active:not(:disabled) {
  /* Challenges are tap-enabled UIImageViews. */
  opacity: 1;
  filter: none;
  transform: none;
}

.native-panel-button:active:not(:disabled) {
  /* Rounded-rect option controls fade in place in their highlighted state. */
  opacity: 0.72;
  filter: none;
  transform: none;
}

/* Main menu: positions match the original 568 x 320 iPhone 5 layout. */
.home-screen img,
.home-screen canvas {
  /* Preserve native pixels in the composed background when it is magnified. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.home-background {
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.home-button {
  display: grid;
  place-items: center;
  transform-origin: center;
}

.home-button-label {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

#home-start {
  left: 38.5563cqw;
  top: 45.9375cqh;
  width: 22.8873cqw;
  height: 22.1875cqh;
}

#home-options {
  left: -0.8803cqw;
  top: 72.1875cqh;
  width: 15.8451cqw;
  height: 18.75cqh;
}

#home-stats {
  left: 41.1972cqw;
  top: 72.1875cqh;
  width: 17.6056cqw;
  height: 18.75cqh;
}

#home-credits {
  left: 75.8803cqw;
  top: 72.5cqh;
  width: 15.669cqw;
  height: 18.4375cqh;
}

.home-deaths {
  bottom: 0;
  left: 0;
  display: flex;
  width: max-content;
  min-width: 22.5352cqw;
  height: 6.25cqh;
  align-items: center;
  padding: 0 0.7042cqw 0 0.8803cqw;
  overflow: hidden;
  color: #fff;
  background: url("public/assets/images/other/StatusBox.png") center / 100% 100% no-repeat;
  font-family: var(--rounded);
  font-size: 5.3125cqh;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-rendering: geometricPrecision;
  pointer-events: none;
}

.home-deaths-text {
  visibility: hidden;
}

.home-deaths-label {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0.8803cqw;
  display: block;
  width: auto;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.red-screen {
  background: #9d1119;
}

.start-background-canvas {
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #9d1119;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.menu-word {
  color: #fff;
  font-family: var(--rounded);
  text-align: center;
  text-shadow: 0 0.7cqh 0.65cqh rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.menu-word:active:not(:disabled) {
  /* showsTouchWhenHighlighted adds a glow without moving the native button. */
  color: #fff;
  text-shadow:
    0 0 1cqh rgba(255, 255, 255, 0.82),
    0 0.7cqh 0.65cqh rgba(0, 0, 0, 0.72);
  transform: none;
}

.raster-label-source {
  visibility: hidden;
}

.raster-label {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.menu-word:active:not(:disabled) .raster-label {
  filter:
    brightness(1.12)
    drop-shadow(0 0 0.5cqh rgba(255, 255, 255, 0.82));
}

.inventory {
  left: 11.2676cqw;
  top: 5.625cqh;
  display: grid;
  gap: 2.5cqh;
  width: 77.4648cqw;
  color: #fff;
  font-family: Arial, var(--system);
  font-size: clamp(8px, 5.3125cqh, 19px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.inventory-line {
  position: relative;
  width: 100%;
  height: 6.5625cqh;
}

.inventory-label {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.start-new {
  left: 9.6831cqw;
  top: 34.375cqh;
  width: 17.2535cqw;
  height: 20.9375cqh;
}

.start-continue {
  left: 29.9296cqw;
  top: 34.375cqh;
  width: 24.2958cqw;
  height: 20.9375cqh;
}

.start-challenges {
  left: 58.6268cqw;
  top: 34.375cqh;
  width: 31.6901cqw;
  height: 20.9375cqh;
}

.start-tutorial {
  left: 10.9155cqw;
  top: 55.625cqh;
  width: 23.5915cqw;
  height: 22.8125cqh;
}

.start-triple {
  left: 39.6127cqw;
  top: 55.625cqh;
  width: 50.1761cqw;
  height: 22.8125cqh;
}

.screen-back {
  font-size: clamp(10px, 6.25cqh, 23px);
}

.start-back,
.options-back {
  left: 84.8592cqw;
  top: 80.9375cqh;
  width: 15.1408cqw;
  height: 19.0625cqh;
}

.options-back {
  /* Match Start Game's 20-point label as the native 320-point frame scales. */
  font-size: 6.25cqh;
}

/* Difficulty selection */
.difficulty-list {
  inset: 0;
}

.difficulty-choice,
.difficulty-card {
  position: absolute;
  left: 9.507cqw;
  display: block;
  width: 80.9859cqw;
  height: 12.5cqh;
  transform-origin: center;
  transition: top 0.5s linear, opacity 0.5s linear;
}

.difficulty-choice:nth-child(1),
.difficulty-card:nth-child(1) {
  top: 6.25cqh;
}

.difficulty-choice:nth-child(2),
.difficulty-card:nth-child(2) {
  top: 21.875cqh;
}

.difficulty-choice:nth-child(3),
.difficulty-card:nth-child(3) {
  top: 37.5cqh;
}

.difficulty-choice:nth-child(4),
.difficulty-card:nth-child(4) {
  top: 53.125cqh;
}

.difficulty-choice:nth-child(5),
.difficulty-card:nth-child(5) {
  top: 68.75cqh;
}

.difficulty-choice.difficulty-hardcore,
.difficulty-card:nth-child(5) {
  left: 2.993cqw;
  width: 94.1901cqw;
}

.difficulty-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.difficulty-choice[data-locked="true"],
.difficulty-card[data-locked="true"] {
  opacity: 0.3;
}

.difficulty-screen[data-confirming="true"] .difficulty-card.is-dismissed,
.difficulty-screen[data-confirming="true"] .difficulty-back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.difficulty-screen[data-confirming="true"] .difficulty-card.is-selected {
  top: 6.25cqh;
  left: 7cqw;
  width: 86cqw;
  height: 14cqh;
  opacity: 1;
  filter: none;
  transform: none;
}

.difficulty-card {
  transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, opacity 0.18s ease;
}

.difficulty-screen[data-confirming="true"] .difficulty-card.is-selected img {
  object-fit: contain;
}

.difficulty-back {
  left: 73.9437cqw;
  top: 82.1875cqh;
  width: 19.3662cqw;
  height: 17.8125cqh;
  font-size: clamp(12px, 8.75cqh, 31px);
}

.difficulty-description {
  z-index: 3;
  left: 10cqw;
  top: 51cqh;
  width: 80cqw;
  color: #f5f5f4;
  font-family: var(--system);
  transform: translateY(-50%);
  animation: difficulty-copy-in 0.2s ease-out both;
}

.difficulty-levels {
  margin: 0 0 4.5cqh;
  font-size: 6cqh;
  font-weight: 550;
  line-height: 1.2;
}

.difficulty-details {
  display: grid;
  gap: 4cqh;
  margin: 0;
  padding: 0;
  color: #d1d1d1;
  font-size: 4cqh;
  line-height: 1.5;
  list-style: none;
}

.difficulty-confirm {
  z-index: 4;
  top: 82cqh;
  width: 25cqw;
  height: 10cqh;
  border: max(1px, 0.2cqh) solid #414141;
  background: #0b0b0b;
  color: #d1d1d1;
  font-family: var(--system);
  font-size: 4.5cqh;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.difficulty-cancel {
  left: 10cqw;
}

.difficulty-start {
  left: 65cqw;
  border-color: #767676;
  color: #fff;
}

.difficulty-confirm:active:not(:disabled) {
  background: #252525;
}

@media (hover: hover) {
  .difficulty-confirm:hover {
    border-color: #b5b5b5;
    background: #171717;
    color: #fff;
  }
}

@keyframes difficulty-copy-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Challenge selection */
.challenge-grid {
  left: 9.507cqw;
  top: 6.25cqh;
  display: grid;
  grid-template-columns: repeat(5, 8.8028cqw);
  grid-template-rows: repeat(4, 15.625cqh);
  column-gap: 3.5211cqw;
  row-gap: 5.3125cqh;
  width: 58.0986cqw;
  height: 78.4375cqh;
}

.challenge-choice,
.challenge-tile {
  position: relative;
  display: grid;
  width: 8.8028cqw;
  height: 15.625cqh;
  place-items: center;
  color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: var(--rounded);
  font-size: 11.25cqh;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  line-height: 1;
  transform-origin: center;
}

.challenge-choice span,
.challenge-tile span {
  display: block;
  transform: translateY(-0.3cqh);
  pointer-events: none;
}

.challenge-green {
  background-image: url("public/assets/images/other/GreenCSelect.png");
}

.challenge-blue {
  background-image: url("public/assets/images/other/BlueCSelect.png");
}

.challenge-orange {
  background-image: url("public/assets/images/other/OrangeCSelect.png");
}

.challenge-red {
  background-image: url("public/assets/images/other/RedCSelct.png");
}

.challenge-tile[data-area="1"] {
  background-image: url("public/assets/images/other/GreenCSelect.png");
}

.challenge-tile[data-area="2"] {
  background-image: url("public/assets/images/other/BlueCSelect.png");
}

.challenge-tile[data-area="3"] {
  background-image: url("public/assets/images/other/OrangeCSelect.png");
}

.challenge-tile[data-area="4"] {
  background-image: url("public/assets/images/other/RedCSelct.png");
}

.challenge-tile small {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.challenge-choice.is-complete::after,
.challenge-tile.is-complete::after {
  position: absolute;
  top: -3.4375cqh;
  left: 3.5211cqw;
  width: 1.4085cqw;
  height: 3.4375cqh;
  content: "";
  background: url("public/assets/images/cats/ChaiRight1.png") center / 100% 100% no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.challenge-rewards {
  left: 69.0141cqw;
  top: 6.25cqh;
  display: grid;
  grid-template-rows: repeat(4, 15.625cqh);
  row-gap: 5.3125cqh;
  width: 26.0563cqw;
  color: #fff;
  font-size: clamp(9px, 4.0625cqh, 24px);
  line-height: 1;
}

.challenge-rewards > div {
  display: grid;
  grid-template-rows: repeat(2, 6.5625cqh);
  align-content: center;
  gap: 0.9375cqh;
}

.challenge-rewards span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.challenge-first-clear-note {
  left: 9.507cqw;
  top: 89.375cqh;
  display: flex;
  width: 58.0986cqw;
  height: 7.5cqh;
  margin: 0;
  align-items: center;
  gap: 0.8803cqw;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(8px, 3.75cqh, 22px);
  line-height: 1;
  white-space: nowrap;
}

.challenge-info-icon {
  display: inline-flex;
  width: 4.375cqh;
  height: 4.375cqh;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: max(1px, 0.3125cqh) solid currentColor;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 3.4375cqh;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.challenge-back {
  left: 69.0141cqw;
  top: 83.4375cqh;
  width: 22.3592cqw;
  height: 16.5625cqh;
  font-size: clamp(12px, 7.8125cqh, 29px);
}

/* Options */
.native-panel-button {
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: var(--rounded);
  text-align: center;
  text-shadow: 0 1px 1px #000;
  transform-origin: center;
}

.option-color {
  left: 11.2676cqw;
  top: 6.25cqh;
  width: 41.5493cqw;
  height: 18.125cqh;
  background-image: url("public/assets/images/other/ButtonRect256.png");
  font-size: max(8px, 4.6875cqh);
}

.option-triple {
  left: 11.2676cqw;
  top: 33.4375cqh;
  width: 27.6408cqw;
  height: 18.125cqh;
  background-image: url("public/assets/images/other/ButtonRect157.png");
  font-size: max(8px, 4.375cqh);
}

.option-music {
  left: 11.2676cqw;
  top: 60.625cqh;
  width: 34.8592cqw;
  height: 18.125cqh;
  background-image: url("public/assets/images/other/ButtonRect218.png");
  font-size: max(8px, 4.375cqh);
}

.option-note {
  display: grid;
  margin: 0;
  gap: 5cqh;
  color: #fff;
  font-size: max(7px, 4.375cqh);
  line-height: 1;
}

.option-note span {
  white-space: nowrap;
}

.color-note {
  left: 56.6901cqw;
  top: 6.25cqh;
}

.triple-note {
  left: 42.2535cqw;
  top: 33.4375cqh;
  gap: 1.25cqh;
  font-size: max(7px, 3.75cqh);
}

.music-note {
  left: 49.8239cqw;
  top: 60.625cqh;
}

/* Stats: a compact web-only overview using the game's square block language. */
.stats-screen {
  color: #fff;
  background: #000;
  font-family: var(--rounded);
}

.stats-background-canvas {
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.stats-header {
  top: 10.625cqh;
  left: 7.0423cqw;
  display: flex;
  width: 85.9155cqw;
  height: 10cqh;
  align-items: baseline;
  justify-content: flex-start;
  border-bottom: 1.25cqh solid #7a143e;
}

.stats-header h1,
.stats-panel h2,
.stats-list {
  margin: 0;
}

.stats-header h1 {
  font-size: max(14px, 7.5cqh);
  line-height: 1;
  text-shadow: 0.3521cqw 0.625cqh 0 #5c0e31;
}

.stats-layout {
  top: 23.125cqh;
  left: 7.0423cqw;
  display: grid;
  width: 85.9155cqw;
  height: 61.25cqh;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.1127cqw;
}

.stats-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0.5282cqw solid #8e1c4d;
  background: #0b0005;
  box-shadow: 0.7042cqw 1.25cqh 0 #3c0a21;
}

.stats-panel h2 {
  height: 8.75cqh;
  padding: 2.1875cqh 2.1127cqw 0;
  color: #ffd6e6;
  border-bottom: 0.625cqh solid #55102e;
  background: rgba(78, 13, 41, 0.88);
  font-size: max(9px, 4.375cqh);
  line-height: 1;
}

.stats-difficulty-list {
  display: grid;
  height: 48.125cqh;
  padding: 1.875cqh 2.1127cqw 2.5cqh;
  grid-template-rows: repeat(5, 1fr);
  gap: 0.625cqh;
}

.stats-difficulty-row {
  display: grid;
  min-width: 0;
  align-items: center;
  grid-template-columns: minmax(6.5em, 1fr) minmax(3em, 0.82fr) minmax(6.2em, 1fr);
  gap: 1.0563cqw;
  font-size: max(7px, 3.4375cqh);
}

.stats-difficulty-name,
.stats-difficulty-value {
  overflow: hidden;
  white-space: nowrap;
}

.stats-difficulty-value {
  color: #e9b2c8;
  font-family: Arial, system-ui, sans-serif;
  font-size: 0.88em;
  text-align: right;
  text-overflow: ellipsis;
}

.stats-difficulty-row[data-complete="true"] .stats-difficulty-name,
.stats-difficulty-row[data-complete="true"] .stats-difficulty-value {
  color: #86ff7e;
}

.stats-meter {
  display: block;
  overflow: hidden;
  height: 3.125cqh;
  border: 0.625cqh solid #66223f;
  background: #18040c;
}

.stats-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b5145d, #ff5b9b);
}

.stats-difficulty-row[data-complete="true"] .stats-meter-fill {
  background: linear-gradient(90deg, #30af37, #86ff7e);
}

.stats-side {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr 1fr;
  gap: 1.875cqh;
}

.stats-list {
  display: grid;
  padding: 2.5cqh 2.1127cqw 1.875cqh;
  gap: 1.25cqh;
  font-family: Arial, system-ui, sans-serif;
  font-size: max(7px, 3.125cqh);
}

.stats-list > div {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 1.0563cqw;
}

.stats-list dt {
  color: #df9bb8;
}

.stats-list dd {
  margin: 0;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

/* Credits */
.credits-screen {
  background: #000;
}

.credits-background-canvas {
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.credits-developer,
.credits-web-credit {
  z-index: 2;
  left: 0;
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: var(--rounded);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.credits-developer {
  top: 35cqh;
  height: 8.125cqh;
}

.credits-web-credit {
  top: 49.375cqh;
  height: 4.6875cqh;
}

.credits-text-label {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.credits-game-catalog {
  z-index: 3;
  top: 60.3125cqh;
  left: 50%;
  display: flex;
  gap: 2.13cqh;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.credits-game-link {
  display: block;
  flex: 0 0 auto;
  width: 8cqh;
  height: 8cqh;
  padding: 0;
  overflow: hidden;
  border: max(1px, 0.27cqh) solid #fff;
  border-radius: 0;
  outline: 0;
  background: #000;
  touch-action: none;
}

.credits-game-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  pointer-events: none;
}

.credits-game-link:focus-visible {
  outline: max(2px, 0.8cqh) solid var(--focus);
  outline-offset: max(1px, 0.5cqh);
}

.credits-game-link:active {
  transform: translateY(0.8cqh);
  border-width: max(1px, 0.27cqh);
}

.credits-back {
  z-index: 4;
  left: 92.4296cqw;
  top: 86.25cqh;
  width: 7.7465cqw;
  height: 13.75cqh;
}

.credits-back:active:not(:disabled) {
  /* The original back art is a background image with no highlighted-state art. */
  opacity: 1;
  filter: none;
  transform: none;
}

/* In-game HUD and original touch regions. */
.game-ui {
  --movement-arrow-size: 18.75cqh;
  --movement-arrow-gap: 4.375cqh;
  --movement-half-step: calc((var(--movement-arrow-size) + var(--movement-arrow-gap)) / 2);
  position: absolute;
  z-index: 5;
  inset: 0;
  display: none;
  touch-action: none;
  pointer-events: none;
}

.app.is-playing .game-ui {
  display: block;
}

.pause-button,
.checkpoint-button,
.death-reduction-button,
.game-hud,
.game-note,
.control-zone {
  pointer-events: auto;
}

.pause-button {
  position: absolute;
  z-index: 7;
  top: 0;
  left: calc(-0.5282cqw - var(--wide-control-gutter));
  width: 6.5141cqw;
  height: 11.5625cqh;
}

.pause-button[aria-disabled="true"] {
  /* Preserve the custom UIKit artwork; modal overlays provide the dimming. */
  pointer-events: none;
}

.death-reduction-button {
  position: absolute;
  z-index: 9;
  top: 1.875cqh;
  right: calc(0.8803cqw - var(--wide-control-gutter));
  width: 10.5634cqw;
  height: 9.375cqh;
}

.checkpoint-button {
  position: absolute;
  z-index: 9;
  top: 2.1875cqh;
  right: calc(1.2324cqw - var(--wide-control-gutter));
  width: 7.3944cqw;
  height: 13.125cqh;
}

.game-hud {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.game-hud image {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.game-hud text {
  fill: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.game-ui[data-hud-occluded="true"] .game-hud,
.game-ui[data-horizontal-controls-occluded="true"] .control-left img,
.game-ui[data-horizontal-controls-occluded="true"] .control-right img,
.game-ui[data-jump-control-occluded="true"] .control-jump img {
  opacity: 0.5;
}

.tutorial-guides {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

/* Gameplay controls are the safe-area exception: each strip is exactly as
   wide as its edge inset, so a 60% child offset retains three fifths of that
   inset while letting the controls peek into the remaining two fifths. */
.horizontal-control-safe-strip,
.jump-control-safe-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.horizontal-control-safe-strip {
  left: calc(0px - var(--wide-control-gutter) - var(--safe-left));
  width: var(--safe-left);
}

.jump-control-safe-strip {
  right: calc(0px - var(--wide-control-gutter) - var(--safe-right));
  width: var(--safe-right);
}

.tutorial-guide {
  position: absolute;
  top: 73.75cqh;
  display: block;
  width: 0.1761cqw;
  height: 100cqh;
  /* Keep the native 320px dotted pattern scale, but stop its paint at the
     bottom edge of the game frame when a tall browser letterboxes the game. */
  clip-path: inset(0 0 73.75% 0);
  object-fit: fill;
  pointer-events: none;
}

.tutorial-guide-left {
  left: calc(60% + 7.7465cqw + var(--movement-half-step));
}

.tutorial-guide-right {
  left: calc(60% + 40.493cqw);
}

.tutorial-guide-jump {
  right: calc(60% + 26.4085cqw);
}

.tutorial-note {
  position: absolute;
  z-index: 8;
  top: 2.1875cqh;
  left: 9.507cqw;
  width: 80.9859cqw;
  height: 14.375cqh;
  padding: 1.25cqh 0 0 0.8803cqw;
  overflow: visible;
  color: #fff;
  background: url("public/assets/images/other/StatusBox.png") center / 100% 100% no-repeat;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 5.3125cqh;
  font-weight: 400;
  line-height: 6.25cqh;
  white-space: nowrap;
  pointer-events: none;
}

.tutorial-note[data-line-count="3"] {
  height: 20.625cqh;
}

.tutorial-note[data-line-count="4"] {
  height: 26.875cqh;
}

.tutorial-note[data-line-count="5"] {
  height: 33.125cqh;
}

.tutorial-note[data-line-count="6"] {
  height: 39.375cqh;
}

.tutorial-note span {
  display: block;
  width: 80.9859cqw;
  height: 6.25cqh;
}

.game-note {
  position: absolute;
  z-index: 8;
  top: 2.1875cqh;
  left: 9.507cqw;
  width: 80.9859cqw;
  min-height: 14.375cqh;
  max-height: 39.375cqh;
  padding: 1.25cqh 1.0563cqw;
  overflow: hidden;
  color: #fff;
  background: url("public/assets/images/other/StatusBox.png") center / 100% 100% no-repeat;
  font-size: clamp(7px, 4.375cqh, 16px);
  line-height: 1.35;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}

.game-ui[data-scene-mode="capture"] .pause-button,
.game-ui[data-scene-mode="capture"] .game-hud,
.game-ui[data-scene-mode="capture"] .tutorial-guides,
.game-ui[data-scene-mode="capture"] .tutorial-note,
.game-ui[data-scene-mode="capture"] .game-note,
.game-ui[data-scene-mode="capture"] .checkpoint-button,
.game-ui[data-scene-mode="capture"] .death-reduction-button,
.game-ui[data-scene-mode="capture"] .touch-controls,
.game-ui[data-scene-mode="rescue"] .pause-button,
.game-ui[data-scene-mode="rescue"] .game-hud,
.game-ui[data-scene-mode="rescue"] .tutorial-guides,
.game-ui[data-scene-mode="rescue"] .tutorial-note,
.game-ui[data-scene-mode="rescue"] .game-note,
.game-ui[data-scene-mode="rescue"] .checkpoint-button,
.game-ui[data-scene-mode="rescue"] .death-reduction-button,
.game-ui[data-scene-mode="rescue"] .touch-controls {
  display: none;
}

.capture-controls {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.capture-button {
  position: absolute;
  top: 81.25cqh;
  width: 14.0845cqw;
  height: 12.5cqh;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 7.8125cqh;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  pointer-events: auto;
}

.capture-button:disabled {
  /* UIKit keeps the title visually unchanged while ignoring early taps. */
  opacity: 1;
  filter: none;
}

.capture-skip {
  left: 21.831cqw;
}

.capture-next {
  left: 64.0845cqw;
}

.game-ui[data-scene-mode="rescue"] .capture-button {
  top: 6.25cqh;
}

.touch-controls {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.control-zone {
  position: absolute;
  overflow: visible;
  background: transparent;
  cursor: default;
  touch-action: none;
}

.control-art-safe-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.control-left .control-art-safe-strip,
.control-right .control-art-safe-strip {
  left: 0;
  width: var(--safe-left);
}

.control-jump .control-art-safe-strip {
  right: 0;
  width: var(--safe-right);
}

.control-zone img {
  position: absolute;
  display: block;
  width: var(--movement-arrow-size);
  height: var(--movement-arrow-size);
  bottom: calc(10.9375cqh - var(--movement-arrow-size) / 2);
  pointer-events: none;
  user-select: none;
}

/* Hit regions include the same 60% side inset as the arrow centers.
   The Left/Right boundary stays halfway between their visible centers,
   and the tutorial guide lines mark the actual input boundaries. */
.control-left {
  top: 12.5cqh;
  bottom: 0;
  left: 0;
  width: calc(60% + 7.7465cqw + var(--movement-half-step));
}

.control-left img {
  left: calc(60% + 7.7465cqw - var(--movement-arrow-size) / 2);
}

.control-right {
  inset: 0 auto 0 calc(60% + 7.7465cqw + var(--movement-half-step));
  width: calc(32.7465cqw - var(--movement-half-step));
}

.control-right img {
  left: calc(var(--movement-arrow-gap) / 2);
}

.control-jump {
  inset: 0 0 0 auto;
  width: calc(60% + 26.4085cqw);
}

.control-jump img {
  right: calc(60% + 6.162cqw - var(--movement-arrow-size) / 2);
}

/* LoC2's original touch layout uses 60pt phone / 80pt tablet arrows
   separated by 20pt / 40pt. Pull Right toward Left when shrinking the art
   would otherwise leave a larger gap; compact views keep their tighter
   spacing. The shared variables also keep the tutorial boundary aligned. */
@media (pointer: coarse) {
  .game-ui {
    --movement-arrow-size: min(60px, 18.75cqh);
    --movement-arrow-gap: min(20px, calc(23.125cqh - var(--movement-arrow-size)));
  }
}

@media (pointer: coarse) and (min-width: 600px) and (min-height: 600px) {
  .game-ui {
    --movement-arrow-size: min(80px, 18.75cqh);
    --movement-arrow-gap: min(40px, calc(23.125cqh - var(--movement-arrow-size)));
  }
}

/* Session-only debug controls stay out of the original interface until opened. */
.debug-tools {
  position: absolute;
  z-index: 70;
  inset: 0;
  font-family: var(--system);
  pointer-events: none;
}

.debug-toggle,
.debug-panel {
  pointer-events: auto;
}

.game-ui[data-death-reduction-visible="true"] ~ .debug-tools .debug-toggle {
  top: 12.5cqh;
}

.game-ui[data-death-reduction-visible="true"] ~ .debug-tools .debug-panel {
  top: 22.5cqh;
  max-height: 75cqh;
}

.game-ui[data-checkpoint-visible="true"] ~ .debug-tools .debug-toggle {
  top: 16.25cqh;
}

.game-ui[data-checkpoint-visible="true"] ~ .debug-tools .debug-panel {
  top: 26.25cqh;
  max-height: 71.25cqh;
}

.game-ui[data-death-reduction-prompt="true"] ~ .debug-tools,
.game-ui[data-checkpoint-prompt="true"] ~ .debug-tools {
  visibility: hidden;
}

.debug-toggle {
  position: absolute;
  top: 1.5625cqh;
  right: calc(0.8803cqw - var(--wide-control-gutter));
  min-width: 7.7465cqw;
  height: 8.125cqh;
  padding: 0 1.0563cqw;
  color: #d9d9df;
  background: rgba(7, 7, 10, 0.86);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.44);
  border-radius: 4.0625cqh;
  box-shadow: 0 0.625cqh 2cqh rgba(0, 0, 0, 0.55);
  font: 800 clamp(7px, 3.75cqh, 14px)/1 var(--system);
  letter-spacing: 0.05em;
}

.debug-toggle::before {
  display: inline-block;
  width: 1.25cqh;
  height: 1.25cqh;
  margin-right: 0.7042cqw;
  content: "";
  background: #777780;
  border-radius: 50%;
  box-shadow: 0 0 0.8cqh transparent;
  vertical-align: 0.08em;
}

.debug-tools[data-enabled="true"] .debug-toggle {
  color: #efffe9;
  border-color: rgba(143, 255, 104, 0.72);
}

.debug-tools[data-enabled="true"] .debug-toggle::before {
  background: #8cff68;
  box-shadow: 0 0 1.4cqh rgba(140, 255, 104, 0.76);
}

.debug-toggle:active {
  filter: brightness(1.22);
  transform: scale(0.96);
}

.debug-panel {
  position: absolute;
  top: 11.25cqh;
  right: calc(0.8803cqw - var(--wide-control-gutter));
  display: grid;
  width: 40.493cqw;
  max-height: 86.25cqh;
  padding: 2.5cqh 1.7606cqw;
  gap: 2.1875cqh;
  overflow: auto;
  color: #f5f5f7;
  background: rgba(6, 6, 9, 0.96);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.55);
  border-radius: 1.875cqh;
  box-shadow: 0 2.5cqh 7cqh rgba(0, 0, 0, 0.72);
  font-size: clamp(7px, 3.75cqh, 14px);
  line-height: 1.15;
  touch-action: pan-y;
}

.debug-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1.0563cqw;
}

.debug-header strong {
  font-family: var(--rounded);
  font-size: clamp(9px, 5cqh, 18px);
}

.debug-header output {
  min-width: 0;
  overflow: hidden;
  color: #aeb0b8;
  font: 600 clamp(6px, 3.125cqh, 12px)/1 var(--system);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-build {
  display: block;
  margin-top: -1.25cqh;
  overflow-wrap: anywhere;
  color: #8cff68;
  font: 700 clamp(5px, 2.5cqh, 10px)/1.2 var(--system);
}

.debug-panel fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 1.875cqh;
  border: 0;
}

.debug-panel fieldset:disabled {
  opacity: 0.38;
}

.debug-check {
  display: flex;
  min-height: 5.625cqh;
  align-items: center;
  gap: 1.0563cqw;
  user-select: none;
}

.debug-check input {
  flex: 0 0 auto;
  width: 2.8169cqw;
  height: 5cqh;
  margin: 0;
  accent-color: #82eb60;
}

.debug-master {
  min-height: 7.5cqh;
  padding: 0 1.0563cqw;
  background: #17171c;
  border-radius: 1.25cqh;
  font-weight: 700;
}

.debug-level-label {
  color: #bfc0c7;
  font-size: 0.88em;
  font-weight: 700;
}

.debug-level-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7042cqw;
}

.debug-panel select,
.debug-panel button:not(.debug-toggle) {
  min-width: 0;
  height: 8.125cqh;
  color: #fff;
  background: #222229;
  border: 0.3125cqh solid #5f606a;
  border-radius: 1.25cqh;
  font: 700 clamp(7px, 3.4375cqh, 13px)/1 var(--system);
}

.debug-panel select {
  width: 100%;
  padding: 0 1.0563cqw;
  color-scheme: dark;
  text-overflow: ellipsis;
}

.debug-panel button:not(.debug-toggle) {
  padding: 0 1.4085cqw;
  text-align: center;
  touch-action: pan-y;
}

.debug-panel button:not(.debug-toggle):active {
  color: #f2ffce;
  background: #464650;
  transform: translateY(0.4cqh);
}

.debug-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7042cqw;
}

.debug-respawn-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7042cqw;
}

.debug-respawn-action output {
  min-width: 0;
  overflow: hidden;
  color: #bfc0c7;
  font-size: 0.78em;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-cursor-position {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  min-width: 12.5cqw;
  padding: 1.25cqh 1.0563cqw;
  color: #efffe9;
  background: rgba(6, 6, 9, 0.92);
  border: 0.3125cqh solid rgba(143, 255, 104, 0.78);
  border-radius: 1.25cqh;
  box-shadow: 0 0.625cqh 2cqh rgba(0, 0, 0, 0.7);
  font: 800 clamp(7px, 3.4375cqh, 13px)/1 var(--system);
  text-align: center;
  white-space: nowrap;
  transform: translate(1.25cqh, calc(-100% - 1.25cqh));
  pointer-events: none;
}

.debug-cursor-position[data-horizontal="left"] {
  transform: translate(calc(-100% - 1.25cqh), calc(-100% - 1.25cqh));
}

.debug-cursor-position[data-vertical="below"] {
  transform: translate(1.25cqh, 1.25cqh);
}

.debug-cursor-position[data-horizontal="left"][data-vertical="below"] {
  transform: translate(calc(-100% - 1.25cqh), 1.25cqh);
}

.debug-death-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5625cqh 0.7042cqw;
}

.debug-death-editor label {
  display: grid;
  min-width: 0;
  gap: 0.78125cqh;
  color: #bfc0c7;
  font-size: 0.82em;
  font-weight: 700;
}

.debug-death-editor input {
  width: 100%;
  min-width: 0;
  height: 8.125cqh;
  padding: 0 0.7042cqw;
  color: #fff;
  background: #17171c;
  border: 0.3125cqh solid #5f606a;
  border-radius: 1.25cqh;
  font: 700 clamp(8px, 3.75cqh, 14px)/1 var(--system);
  text-align: right;
  caret-color: #fff;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color-scheme: dark;
}

@media (hover: hover) and (pointer: fine) {
  .debug-death-editor input {
    -webkit-user-select: text;
    user-select: text;
  }
}

#debug-apply-deaths {
  grid-column: 1 / -1;
}

.debug-note {
  margin: 0;
  color: #9b9ca5;
  font-size: clamp(6px, 3.125cqh, 12px);
  line-height: 1.25;
}

/* Pause and completion overlays scale with the 568 x 320 frame. */
.overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4.375cqh 2.4648cqw;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(0.8cqh);
  -webkit-backdrop-filter: blur(0.8cqh);
  touch-action: none;
}

.pause-overlay {
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pause-panel {
  display: block;
  width: 47.5352cqw;
  min-width: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: #000;
  background: rgba(247, 247, 247, 0.96);
  border: 0;
  border-radius: 2.1875cqh;
  box-shadow: 0 1.25cqh 5cqh rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2.5cqh);
  -webkit-backdrop-filter: blur(2.5cqh);
}

#pause-overlay:not([hidden]) {
  animation: pause-backdrop-in 180ms ease-out both;
}

#pause-overlay:not([hidden]) > .pause-panel {
  animation: pause-menu-in 180ms ease-out both;
}

@keyframes pause-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pause-menu-in {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #pause-overlay:not([hidden]),
  #pause-overlay:not([hidden]) > .pause-panel {
    animation: none;
  }
}

.pause-panel h2 {
  display: flex;
  min-height: 18.125cqh;
  margin: 0;
  padding: 4.375cqh 2.8169cqw 3.75cqh;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 5.3125cqh;
  font-weight: 600;
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
}

.pause-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  gap: 0;
}

.pause-actions button {
  min-width: 0;
  min-height: 13.75cqh;
  padding: 1.25cqh 1.0563cqw;
  color: #007aff;
  background: rgba(255, 255, 255, 0.18);
  border-top: max(1px, 0.15625cqh) solid rgba(60, 60, 67, 0.24);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 5.3125cqh;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-shadow: none;
}

.pause-actions button:active {
  background: rgba(0, 122, 255, 0.12);
  filter: none;
  transform: none;
}

#restart-game {
  grid-column: 1 / -1;
  grid-row: 1;
}

#quit-game {
  grid-column: 1;
  grid-row: 2;
}

#resume-game {
  grid-column: 2;
  grid-row: 2;
  border-left: max(1px, 0.15625cqh) solid rgba(60, 60, 67, 0.24);
}

.pause-panel[data-pause-mode="challenge"] #quit-game,
.pause-panel[data-pause-mode="challenge"] #resume-game {
  grid-row: 1;
}

.pause-panel[data-pause-mode="locked"] #quit-game {
  grid-column: 1 / -1;
  grid-row: 1;
  font-weight: 600;
}

.pause-panel[data-pause-mode="locked"] h2 {
  min-height: 26.25cqh;
}

.death-reduction-panel h2,
.checkpoint-panel h2 {
  min-height: 31.25cqh;
}

#confirm-death-reduction,
#confirm-checkpoint {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
}

#cancel-death-reduction,
#cancel-checkpoint {
  grid-column: 2;
  grid-row: 1;
  border-left: max(1px, 0.15625cqh) solid rgba(60, 60, 67, 0.24);
}

.new-game-overlay {
  z-index: 80;
}

.new-game-panel h2 {
  min-height: 11.25cqh;
  padding: 3.125cqh 2.8169cqw 1.25cqh;
}

.new-game-panel p {
  margin: 0;
  padding: 0 2.8169cqw 4.375cqh;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 4.375cqh;
  line-height: 1.22;
  text-align: center;
}

#confirm-new-game {
  border-left: max(1px, 0.15625cqh) solid rgba(60, 60, 67, 0.24);
  font-weight: 600;
}

.completion-panel {
  width: 47.5352cqw;
}

.completion-panel h2 {
  min-height: 13.75cqh;
  padding-bottom: 1.875cqh;
}

.completion-panel p {
  margin: 0;
  padding: 0 2.8169cqw 4.375cqh;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 4.375cqh;
  line-height: 1.22;
  text-align: center;
}

.completion-actions {
  grid-template-columns: 1fr;
}

#completion-action {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
}

/* The sole completion action receives focus when its alert opens. Its global
   focus ring is clipped by the native-style panel into a stray yellow rule. */
#completion-action:focus-visible {
  outline: none;
}

.toast {
  position: absolute;
  z-index: 80;
  right: 4.2254cqw;
  bottom: 5cqh;
  left: 4.2254cqw;
  width: fit-content;
  max-width: calc(100% - 8.4508cqw);
  margin: auto;
  padding: 2.1875cqh 2.8169cqw;
  color: #fff;
  background: rgba(0, 0, 0, 0.92);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.7);
  border-radius: 1.875cqh;
  box-shadow: 0 1.5cqh 4cqh rgba(0, 0, 0, 0.65);
  font-size: clamp(8px, 4.6875cqh, 18px);
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.toast.is-visible:not([hidden]) {
  animation: toast-in 180ms ease-out both;
}

.loading-indicator,
.fatal-message {
  position: absolute;
  z-index: 900;
  color: #fff;
  font-family: var(--rounded);
  font-size: clamp(8px, 4.375cqh, 17px);
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.loading-indicator {
  inset: 0;
  display: grid;
  place-items: center;
  max-width: none;
  padding: 0;
  background: #000;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vw #000;
}

html[data-app-ready="true"] .loading-indicator,
html[data-app-failed="true"] .loading-indicator {
  display: none;
}

html:not([data-app-ready="true"]) .home-button {
  opacity: 0.62;
  pointer-events: none;
}

.fatal-message {
  inset: 38% auto auto 50%;
  bottom: auto;
  width: 72cqw;
  padding: 1.875cqh 2.1127cqw;
  background: rgba(0, 0, 0, 0.9);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.7);
  border-radius: 1.25cqh;
  transform: translate(-50%, -50%);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(3cqh);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portrait phones and unusually shaped desktop browser windows are gated:
   gameplay and its original control spacing need a landscape-sized surface. */
.rotate-overlay,
.resize-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
  place-content: center;
  place-items: center;
  gap: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 28%, rgba(153, 28, 39, 0.5), transparent 42%),
    #050506;
  font-family: var(--rounded);
  text-align: center;
}

.resize-overlay {
  z-index: 1001;
}

.rotate-overlay > img,
.resize-overlay > img {
  width: min(24vw, 96px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.rotate-overlay strong,
.resize-overlay strong {
  margin-top: 2px;
  font-size: clamp(22px, 8vw, 38px);
}

.rotate-overlay > span {
  color: #d3d3d8;
  font-family: var(--system);
  font-size: clamp(14px, 4.6vw, 19px);
  line-height: 1.4;
}

.browser-resize {
  display: none;
  grid-template: 50px 54px 50px / 48px 82px 48px;
  width: 178px;
  height: 154px;
  place-items: center;
  color: #ff8b94;
}

.browser-resize i {
  position: relative;
  grid-area: 2 / 2;
  display: block;
  width: 74px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 6px;
  box-shadow: inset 0 8px 0 -5px #fff;
}

.browser-resize i::before {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 3px;
  height: 3px;
  content: "";
  background: #ff8b94;
  border-radius: 50%;
  box-shadow: 6px 0 #ff8b94, 12px 0 #ff8b94;
}

.resize-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  animation: resize-arrow-left 1.55s ease-in-out infinite;
}

.resize-arrow svg {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.resize-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resize-arrow-point-left svg {
  transform: rotate(180deg);
}

.resize-arrow-point-up svg {
  transform: rotate(-90deg);
}

.resize-arrow-point-down svg {
  transform: rotate(90deg);
}

.resize-arrow-left {
  grid-area: 2 / 1;
  animation-name: resize-arrow-right;
}

.resize-arrow-top {
  grid-area: 1 / 2;
  animation-name: resize-arrow-down;
}

.resize-arrow-right {
  grid-area: 2 / 3;
  animation-name: resize-arrow-left;
}

.resize-arrow-bottom {
  grid-area: 3 / 2;
  animation-name: resize-arrow-up;
}

.resize-copy {
  display: none;
  max-width: min(92vw, 760px);
  place-items: center;
}

.resize-copy > strong {
  display: block;
  text-wrap: balance;
}

/* Keep the browser-shape guard fully visible when a desktop window is made
   exceptionally short or narrow. The regular artwork retains its native
   dimensions; below this breakpoint every part follows the limiting viewport
   edge so the centered composition cannot be clipped. */
@media (max-height: 360px), (max-width: 360px) {
  .resize-overlay {
    padding:
      max(clamp(8px, 4vmin, 24px), var(--safe-top))
      max(clamp(8px, 4vmin, 24px), var(--safe-right))
      max(clamp(8px, 4vmin, 24px), var(--safe-bottom))
      max(clamp(8px, 4vmin, 24px), var(--safe-left));
    gap: clamp(5px, 3vmin, 13px);
  }

  .resize-overlay > img {
    width: min(24vw, 24vmin, 96px);
  }

  .resize-overlay strong {
    font-size: clamp(16px, 8vmin, 38px);
    line-height: 1.1;
  }

  .browser-resize {
    grid-template:
      min(12vmin, 50px) min(13vmin, 54px) min(12vmin, 50px) /
      min(11.5vmin, 48px) min(19.7vmin, 82px) min(11.5vmin, 48px);
    width: min(42.7vmin, 178px);
    height: min(37vmin, 154px);
  }

  .browser-resize i {
    width: min(17.8vmin, 74px);
    height: min(11.5vmin, 48px);
    border-width: min(0.72vmin, 3px);
    border-radius: min(1.45vmin, 6px);
    box-shadow: inset 0 min(1.92vmin, 8px) 0 max(-5px, -1.2vmin) #fff;
  }

  .browser-resize i::before {
    top: min(0.96vmin, 4px);
    left: min(1.2vmin, 5px);
    width: min(0.72vmin, 3px);
    height: min(0.72vmin, 3px);
    box-shadow:
      min(1.45vmin, 6px) 0 #ff8b94,
      min(2.9vmin, 12px) 0 #ff8b94;
  }

  .resize-arrow {
    width: min(11.5vmin, 48px);
    height: min(11.5vmin, 48px);
  }

  .resize-arrow svg {
    width: min(9.6vmin, 40px);
    height: min(9.6vmin, 40px);
  }
}

@keyframes resize-arrow-left {
  0%,
  100% {
    transform: translateX(5px);
  }

  50% {
    transform: translateX(-5px);
  }
}

@keyframes resize-arrow-right {
  0%,
  100% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes resize-arrow-up {
  0%,
  100% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes resize-arrow-down {
  0%,
  100% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }
}

.install-hint {
  max-width: min(90vw, 360px);
  margin: 3px 0 0;
  color: #aeb0b8;
  font-family: var(--system);
  font-size: clamp(12px, 3.45vw, 14px);
  line-height: 1.4;
}

.install-lead {
  display: block;
  text-wrap: balance;
}

.install-hint > span[aria-label="More"] {
  color: #fff;
  letter-spacing: 0.04em;
}

.phone-rotate {
  position: relative;
  width: 66px;
  height: 52px;
}

.phone-rotate span {
  position: absolute;
  inset: 0;
  display: block;
  width: 28px;
  height: 43px;
  margin: auto;
  border: 3px solid #fff;
  border-radius: 6px;
  animation: turn-phone 1.8s ease-in-out infinite;
}

.phone-rotate::after {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 52px;
  margin: auto;
  content: "";
  border-top: 3px solid #ff8b94;
  border-right: 3px solid #ff8b94;
  border-radius: 50%;
  transform: rotate(28deg);
}

@keyframes turn-phone {
  0%,
  28% {
    transform: rotate(0deg);
  }

  60%,
  100% {
    transform: rotate(90deg);
  }
}

.noscript-message {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  padding: 32px;
  place-items: center;
  color: #fff;
  background: #000;
  font: 700 20px/1.4 var(--system);
  text-align: center;
}

@media (orientation: portrait) and (max-aspect-ratio: 1 / 1) {
  .rotate-overlay {
    display: grid;
  }

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

html[data-browser-window-fit="too-wide"] .resize-overlay,
html[data-browser-window-fit="too-wide"] .browser-resize-narrower,
html[data-browser-window-fit="too-tall"] .resize-overlay,
html[data-browser-window-fit="too-tall"] .browser-resize-wider,
html[data-browser-window-fit] .resize-copy {
  display: grid;
}

html[data-browser-window-fit] .rotate-overlay {
  display: none;
}

html[data-browser-window-fit] .game-frame {
  pointer-events: none;
}

.is-installed-app .install-hint {
  display: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  .install-hint {
    display: none;
  }
}

@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 (forced-colors: active) {
  button:focus-visible,
  [tabindex]:focus-visible {
    outline-color: Highlight;
  }
}