:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #020916;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #12356b 0, #030b19 48%, #01040b 100%);
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

button, input { font: inherit; }

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app-shell {
  position: relative;
  width: min(calc(100vw - 12px), calc((100svh - 12px) * .7071), 520px);
  aspect-ratio: 3969 / 5613;
  overflow: hidden;
  border-radius: clamp(8px, 2vw, 18px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 196, 108, .2);
  background: #071d49;
}

.language-toggle {
  position: absolute;
  z-index: 20;
  top: 1.6%;
  right: 2.2%;
  min-width: 42px;
  padding: .38em .68em;
  border: 1px solid rgba(255, 212, 112, .85);
  border-radius: 999px;
  color: #fff2c7;
  background: rgba(5, 24, 60, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .42);
  font-size: clamp(11px, 2.7vw, 15px);
  font-weight: 800;
}

/* Keep the instructions-page corner controls on the same geometry as the cover. */
.app-shell.is-instructions .language-toggle {
  top: .5%;
  right: 1.7%;
  width: 11%;
  height: 5%;
  min-width: 0;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.screen.is-active { display: block; }

.screen-cover { background-image: url("assets/itsa/cover.webp"); }
.screen-instructions { background-image: url("assets/itsa/instructions.webp"); }
.screen-profile { background-image: url("assets/itsa/profile.webp"); }
.screen-character { background-image: url("assets/itsa/character-select.webp"); }
.screen-gameover { background-image: url("assets/itsa/game-over.webp"); }
.screen-ranking { background-image: url("assets/itsa/leaderboard-en.webp"); }
html[lang="en"] .screen-profile { background-image: url("assets/itsa/profile-en-edited.png"); }
html[lang="en"] .screen-character { background-image: url("assets/itsa/character-select-en.webp"); }
html[lang="en"] .screen-gameover { background-image: url("assets/itsa/game-over-en.webp"); }

.image-button img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .3));
}

.image-button { position: relative; }

.image-button,
.character-button {
  transition: transform .18s ease, filter .18s ease;
}

.image-button:active,
.character-button:active { transform: scale(.96); }

.image-button:focus-visible,
.character-button:focus-visible,
.language-toggle:focus-visible,
.cover-help:focus-visible,
.text-back:focus-visible,
.sound-toggle:focus-visible,
input:focus-visible {
  outline: 3px solid #ffd470;
  outline-offset: 3px;
}

.cover-actions,
.gameover-actions,
.ranking-actions {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5.4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
}

.cover-actions {
  bottom: 5.4%;
  gap: 4%;
}

.cover-actions #open-ranking,
.cover-actions #open-profile { width: 48%; }

/* Match the Chinese Rank artwork to the English cover's painted button bounds. */
html[lang="zh-CN"] .screen-cover .cover-actions { height: 15%; }

html[lang="zh-CN"] .screen-cover .cover-actions #open-ranking {
  position: absolute;
  top: 5.3%;
  left: -4.77%;
  width: 51.14%;
  height: 83.3%;
}

html[lang="zh-CN"] .screen-cover .cover-actions #open-ranking img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Keep the Chinese Start button at its existing flex-layout coordinates. */
html[lang="zh-CN"] .screen-cover .cover-actions #open-profile {
  position: absolute;
  top: 0;
  left: 52%;
  width: 48%;
  height: 100%;
}

.cover-help {
  position: absolute;
  z-index: 3;
  top: .6%;
  left: 1.8%;
  display: grid;
  place-items: center;
  width: 9.5%;
  aspect-ratio: 1;
  border: 2px solid #f5ca76;
  border-radius: 50%;
  background: rgba(6, 25, 60, .8);
  color: #fff3ca;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 900;
  line-height: 1;
}

.screen-cover .cover-help {
  top: .3%;
  left: 1.7%;
  height: 5.7%;
  aspect-ratio: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.screen-cover .cover-help img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* The English cover already contains its button artwork. Keep real buttons over it. */
html[lang="en"] .screen-cover .cover-help {
  color: transparent;
}

html[lang="en"] .screen-cover .cover-help img { visibility: hidden; }

html[lang="en"] .screen-cover .cover-actions {
  inset: 0;
  display: block;
  pointer-events: none;
}

html[lang="en"] .screen-cover .cover-actions button {
  position: absolute;
  display: block;
  height: 12.5%;
  pointer-events: auto;
}

html[lang="en"] .screen-cover .cover-actions img { visibility: hidden; }

html[lang="en"] .screen-cover #open-ranking {
  top: 80.4%;
  left: 1.8%;
  width: 45%;
}

html[lang="en"] .screen-cover #open-profile {
  top: 80.4%;
  left: 50%;
  width: 46%;
}

.app-shell.is-cover .language-toggle {
  top: .5%;
  right: 1.7%;
  width: 11%;
  height: 5%;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
}

html[lang="en"] .app-shell.is-cover .language-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}


.instructions-copy {
  position: absolute;
  top: 22%;
  left: 17%;
  width: 66%;
  height: 67%;
  overflow-y: auto;
  padding: 0 3% 8%;
  scrollbar-width: thin;
  color: #402416;
  text-align: left;
  text-shadow: 0 1px rgba(255, 255, 255, .45);
}

.instructions-copy h1 {
  margin: 0 0 3%;
  color: #8b241c;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(26px, 7vw, 40px);
  letter-spacing: .16em;
  text-align: center;
}

.instructions-copy h2 {
  margin: 5% 0 1.5%;
  color: #8b241c;
  font-size: clamp(14px, 3.6vw, 21px);
  line-height: 1.25;
  text-align: left;
}

.instructions-copy .instructions-subtitle {
  margin-bottom: 3%;
  color: #8b241c;
  font-size: clamp(11px, 2.8vw, 15px);
  line-height: 1.35;
  text-align: center;
}

.instructions-copy > p {
  margin: 0;
  font-size: clamp(12px, 3vw, 17px);
  line-height: 1.55;
  font-weight: 700;
  text-align: left;
}

.instructions-copy .character-notes {
  margin: 2% 0 0;
  padding-left: 1.2em;
  font-size: clamp(11px, 2.7vw, 15px);
  line-height: 1.45;
}

.instructions-copy .character-notes li {
  display: list-item;
  min-height: 0;
  border-bottom: 0;
  font-size: inherit;
}

.instructions-copy .instructions-credit {
  margin-top: 4%;
  padding-bottom: 8%;
  font-size: clamp(10px, 2.5vw, 14px);
  font-weight: 600;
}

.instructions-copy ul {
  width: 94%;
  margin: 5% auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.instructions-copy li {
  display: flex;
  align-items: center;
  min-height: 3.4em;
  gap: 5%;
  border-bottom: 1px solid rgba(139, 36, 28, .18);
  font-size: clamp(12px, 3vw, 17px);
  line-height: 1.35;
}

.instructions-copy li img {
  width: 16%;
  max-height: 3.1em;
  object-fit: contain;
}

.instructions-copy strong { color: #a0231a; }

.instructions-copy .instructions-controls {
  font-size: clamp(11px, 2.65vw, 15px);
  line-height: 1.5;
  text-align: left;
}

.instructions-copy .instructions-tagline {
  margin: 0 0 4%;
  color: #9d1d13;
  font-weight: 800;
  text-align: center;
}

.instructions-copy .instructions-steps {
  margin: 2% 0 4%;
  padding-left: 1.5em;
  font-size: clamp(11px, 2.7vw, 15px);
  line-height: 1.45;
}

.instructions-copy .instructions-steps li {
  display: list-item;
  min-height: 0;
  margin: 0 0 .7em;
  border: 0;
  font-size: inherit;
}

.instructions-copy .instructions-steps strong { color: #a0231a; }

html[lang="en"] .instructions-copy {
  font-family: Georgia, "Times New Roman", serif;
  height: 67%;
}
html[lang="en"] .instructions-copy h1 { letter-spacing: .03em; }
html[lang="en"] .instructions-copy h2 { font-size: clamp(13px, 3.1vw, 18px); }
html[lang="en"] .instructions-copy > p,
html[lang="en"] .instructions-copy li { font-size: clamp(10px, 2.35vw, 14px); }
html[lang="en"] .instructions-copy .instructions-subtitle,
html[lang="en"] .instructions-copy .instructions-controls { font-size: clamp(9px, 2vw, 12px); }

.text-back {
  position: absolute;
  top: 2%;
  left: 3%;
  z-index: 2;
  width: 10%;
  min-width: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
}

.app-shell.is-instructions .text-back {
  top: .3%;
  left: 1.7%;
  width: 9.5%;
  height: 5.7%;
  min-width: 0;
  aspect-ratio: auto;
}

.text-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#player-form { position: absolute; inset: 0; }

.form-field {
  position: absolute;
  left: 24.6%;
  width: 50.8%;
  height: 4.15%;
}

.name-field { top: 57.05%; }
.email-field { top: 71.7%; }
html[lang="en"] .email-field { top: 73.8%; }

.form-field input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0 5%;
  color: #152b4a;
  background: rgba(255, 250, 225, .74);
  box-shadow: inset 0 0 0 1px rgba(184, 80, 31, .18);
  font-size: clamp(13px, 3vw, 18px);
}

.form-field input::placeholder { color: rgba(48, 48, 48, .48); }

.email-field input[aria-invalid="true"] {
  border: 2px solid #dd241e;
  box-shadow: none;
}

.form-error {
  position: absolute;
  z-index: 2;
  top: 80.75%;
  left: 25%;
  width: 50%;
  margin: 0;
  min-height: 2.8%;
  padding: 3px 6px;
  border: 1px solid rgba(104, 139, 212, .68);
  border-radius: 999px;
  background: rgba(4, 22, 62, .83);
  color: #ffe09a;
  text-align: center;
  font-weight: 700;
  font-size: clamp(9px, 2.1vw, 13px);
  line-height: 1.35;
  white-space: nowrap;
}

.form-error:empty { display: none; }

.form-error:not(:empty)::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-right: .55em;
  border-radius: 50%;
  color: #102449;
  background: #ffd16b;
  font-weight: 900;
}

.profile-submit {
  position: absolute;
  left: 25%;
  bottom: 4.3%;
  width: 50%;
}

.character-options {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 33%;
  height: 42%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 5%;
}

.character-button {
  position: relative;
  width: 48%;
  height: 100%;
}

.character-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .28));
}

.screen-game { background: #071d49; }

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#game-canvas.is-frozen { filter: grayscale(1) brightness(.85); }

.game-controls {
  position: absolute;
  z-index: 3;
  left: 3.4%;
  right: 3.4%;
  bottom: 1.7%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.move-button {
  width: 29%;
  min-width: 86px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.sound-toggle,
.pause-toggle {
  position: absolute;
  z-index: 4;
  right: 2.5%;
  width: clamp(30px, 8vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #562008;
  background: rgba(255, 229, 161, .88);
  border: 2px solid #a94322;
  font-size: clamp(16px, 4vw, 23px);
  font-weight: 900;
}

.sound-toggle { top: 22%; }
.pause-toggle {
  top: 29%;
  font-size: clamp(13px, 3.4vw, 19px);
}

.pause-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 9, 22, .62);
  backdrop-filter: blur(2px);
}

.pause-overlay[hidden] { display: none; }

.pause-panel {
  width: 58%;
  padding: 8% 7%;
  border: 3px solid #b74924;
  border-radius: 18px;
  color: #742015;
  background: linear-gradient(#fff1bd, #f5c978);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48), inset 0 0 0 3px rgba(255, 247, 210, .72);
  text-align: center;
}

.pause-panel strong {
  display: block;
  margin-bottom: 12%;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(25px, 7vw, 40px);
}

.pause-panel button {
  width: 100%;
  padding: .65em 1em;
  border-radius: 999px;
  color: #fff4d2;
  background: #a72d1e;
  border: 2px solid #6f180f;
  font-weight: 900;
  font-size: clamp(14px, 3.5vw, 20px);
}

.final-score {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 49.7%;
  color: #9d1d13;
  text-align: center;
  font-family: "STKaiti", "KaiTi", serif;
  font-weight: 900;
  font-size: clamp(30px, 10vw, 58px);
  text-shadow: 0 2px #fff2bf;
}

.score-sync-status {
  position: absolute;
  top: 63.5%;
  left: 18%;
  right: 18%;
  margin: 0;
  color: #fff2bf;
  text-align: center;
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 15px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}

.gameover-actions .image-button,
.ranking-actions .image-button { width: 46%; }

.ranking-title {
  position: absolute;
  top: 17.2%;
  left: 20%;
  right: 12%;
  margin: 0;
  color: #9d1d13;
  text-align: center;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(22px, 5.2vw, 32px);
  letter-spacing: .14em;
  text-shadow: 0 1px #fff2bf;
}

/* The replacement leaderboard backgrounds already include their title banner. */
.screen-ranking .ranking-title { display: none; }

html[lang="en"] .ranking-title {
  left: 12%;
  right: 12%;
  font-size: clamp(19px, 4.4vw, 27px);
  letter-spacing: .04em;
  white-space: nowrap;
}

.ranking-list {
  position: absolute;
  left: 28%;
  right: 14%;
  top: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

/* Both languages use the same Rank artwork and row positions. */
.ranking-list li:nth-child(1) { --row-center: 29.0%; }
.ranking-list li:nth-child(2) { --row-center: 35.7%; }
.ranking-list li:nth-child(3) { --row-center: 42.4%; }
.ranking-list li:nth-child(4) { --row-center: 49.4%; }
.ranking-list li:nth-child(5) { --row-center: 55.2%; }
.ranking-list li:nth-child(6) { --row-center: 61.2%; }
.ranking-list li:nth-child(7) { --row-center: 67.2%; }
.ranking-list li:nth-child(8) { --row-center: 73.2%; }
.ranking-list li:nth-child(9) { --row-center: 79.2%; }
.ranking-list li:nth-child(10) { --row-center: 85.1%; }

.ranking-list li {
  counter-increment: rank;
  position: absolute;
  top: var(--row-center);
  left: 0;
  right: 0;
  height: 4.5%;
  transform: translateY(-50%);
  display: block;
  min-width: 0;
  color: #542719;
  font-family: "STKaiti", "KaiTi", serif;
  font-weight: 900;
  font-size: clamp(12px, 2.8vw, 17px);
}

.ranking-list .rank-name {
  position: absolute;
  left: 6px;
  right: 5.2em;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.ranking-list .rank-score {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  color: #9d1d13;
  white-space: nowrap;
  text-align: right;
}

.ranking-list .is-current {
  color: #9d1d13;
  text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.ranking-note {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 89%;
  margin: 0;
  padding: .08em .25em;
  border-radius: 999px;
  color: rgba(84, 39, 25, .7);
  background: rgba(249, 222, 163, .9);
  text-align: center;
  font-size: clamp(9px, 2.2vw, 12px);
}
html[lang="en"] .ranking-note {
  font-size: clamp(8px, 1.75vw, 10px);
  line-height: 1.2;
}
html[lang="en"] .ranking-list .rank-name,
html[lang="en"] .ranking-list .rank-score,
html[lang="en"] .ranking-note,
html[lang="en"] .ranking-title,
html[lang="en"] .final-score { font-family: Georgia, "Times New Roman", serif; }

.ranking-actions { bottom: .8%; }
.ranking-actions .image-button { width: 32%; }

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

@media (hover: hover) {
  .image-button:hover,
  .character-button:hover {
    transform: scale(1.065);
    filter: brightness(1.06);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .app-shell {
    width: min(calc((100svh - 8px) * .7071), 430px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-button,
  .character-button { transition: none; }
}