:root {
  font-family: "Kanit", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  color: #37352d;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #d8d3c4;
}

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  touch-action: manipulation;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

button:focus-visible {
  outline: 5px solid rgba(255, 255, 255, .95);
  outline-offset: 4px;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#app {
  display: grid;
  width: 100%;
  height: 100dvh;
  place-items: center;
}

.game-frame {
  position: relative;
  overflow: hidden;
  background: #eee8d8;
  box-shadow: 0 20px 70px rgba(44, 42, 32, .28);
}

.game-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 853px;
  height: 1844px;
  overflow: hidden;
  transform-origin: top left;
  isolation: isolate;
}

.scene-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 853px;
  height: 1844px;
}

.top-bar-art {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 853px;
  height: 205px;
}

.stage-title {
  position: absolute;
  z-index: 34;
  top: 76px;
  left: 0;
  width: 853px;
  margin: 0;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.round-control {
  position: absolute;
  z-index: 36;
  top: 61px;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.round-control img { width: 100%; height: 100%; }
.back-control { left: 37px; }
.restart-control { left: 716px; }
.round-control:active img { transform: scale(.94); }

.objective-panel-art {
  position: absolute;
  z-index: 31;
  top: 167px;
  left: 160px;
  width: 533px;
  height: 122px;
}

.objective-title {
  position: absolute;
  z-index: 35;
  top: 190px;
  left: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 477px;
  min-height: 78px;
  margin: 0;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.18;
  text-align: center;
}

.objective-button {
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}

.objective-button span {
  display: block;
  max-width: 100%;
}

.objective-button small {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  opacity: .62;
}

.objective-button:active { transform: scale(.98); }

.move-counter {
  position: absolute;
  z-index: 35;
  top: 300px;
  left: 0;
  width: 853px;
  margin: 0;
  color: rgba(55, 53, 45, .78);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.lesson-banner {
  position: absolute;
  z-index: 45;
  top: 337px;
  left: 111px;
  width: 631px;
  min-height: 72px;
  padding: 17px 28px;
  border: 3px solid rgba(82, 72, 51, .23);
  border-radius: 38px;
  background: rgba(247, 240, 218, .94);
  box-shadow: 0 8px 18px rgba(57, 48, 32, .18), inset 0 0 0 4px rgba(255, 255, 255, .34);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.lesson-banner.is-visible { animation: lesson-banner var(--lesson-duration, 2.2s) ease both; }
.lesson-banner.is-persistent { opacity: 1; transform: none; }

.level-select-wash {
  position: absolute;
  z-index: 1;
  inset: 180px 0 0;
  background: rgba(242, 237, 219, .32);
}

.campaign-progress-summary {
  position: absolute;
  z-index: 35;
  top: 190px;
  left: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 477px;
  min-height: 78px;
  margin: 0;
  font-size: 29px;
  line-height: 1;
  text-align: center;
}

.campaign-progress-summary strong { font-weight: 500; }

.level-grid {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.level-card {
  position: absolute;
  width: 145px;
  height: 196px;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms ease, opacity 150ms ease;
}

.level-card:active { transform: scale(.95); }
.level-card.is-locked { cursor: default; opacity: .62; }

.level-card-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 145px;
  height: 166px;
}

.level-number {
  position: absolute;
  z-index: 2;
  top: 40px;
  left: 0;
  width: 145px;
  font-size: 43px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.level-difficulty {
  position: absolute;
  z-index: 2;
  top: 94px;
  left: 0;
  width: 145px;
  color: rgba(55, 53, 45, .76);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.level-stars {
  position: absolute;
  z-index: 3;
  top: 157px;
  left: 19px;
  display: flex;
  gap: 5px;
}

.level-stars img {
  width: 32px;
  height: 32px;
}

.campaign-tray-art {
  position: absolute;
  z-index: 25;
  top: 1460px;
  left: 18px;
  width: 817px;
  height: 330px;
}

.campaign-legend {
  position: absolute;
  z-index: 29;
  top: 1570px;
  left: 0;
  width: 853px;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.campaign-pages {
  position: absolute;
  z-index: 29;
  top: 1492px;
  left: 96px;
  display: grid;
  grid-template-columns: 235px 135px 235px;
  align-items: center;
  gap: 28px;
  width: 661px;
  text-align: center;
}

.campaign-pages button {
  min-height: 62px;
  border: 2px solid rgba(55, 53, 45, .22);
  border-radius: 34px;
  background: rgba(255, 255, 255, .48);
  color: #38362e;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.campaign-pages button:disabled {
  opacity: .32;
  cursor: default;
}

.campaign-pages span {
  font-size: 23px;
  font-weight: 600;
}

.campaign-resume {
  position: absolute;
  z-index: 29;
  top: 1620px;
  left: 226px;
  width: 401px;
  min-height: 96px;
  border: 3px solid rgba(55, 53, 45, .25);
  border-radius: 50px;
  background: rgba(255, 255, 255, .54);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .26), 0 5px 10px rgba(57, 52, 38, .13);
  font-size: 30px;
  font-weight: 500;
  cursor: pointer;
}

.campaign-resume:active { transform: scale(.97); }

.board-layer,
.pieces-layer,
.effects-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.pieces-layer { z-index: 12; }
.effects-layer { z-index: 18; }

.board-cell {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
}

.board-cell:disabled { cursor: default; }

.tile-image,
.tile-valid-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tile-valid-image {
  opacity: 0;
  transition: opacity 150ms ease;
}

.board-cell:not(:disabled):is(:hover, :focus-visible, :active) .tile-valid-image { opacity: .72; }

.target-marker {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  pointer-events: none;
  animation: target-marker-breathe 1.8s ease-in-out infinite;
}

.board-token {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 58%;
}

.board-token img { width: 100%; height: 100%; }
.board-token.is-gone { display: none; }

.board-token .token-piece-image {
  position: relative;
  z-index: 2;
}

.board-token .target-token-ring {
  position: absolute;
  z-index: 1;
  top: -19%;
  left: -19%;
  width: 138%;
  height: 138%;
  opacity: .86;
  filter: sepia(.42) saturate(1.65) brightness(1.16) drop-shadow(0 0 8px rgba(255, 224, 115, .9));
  animation: mission-target-breathe 2.1s ease-in-out infinite;
}

.board-token.is-mission-focus .target-token-ring,
.board-token.is-target-flash .target-token-ring {
  opacity: 1;
  filter: sepia(.35) saturate(2) brightness(1.3) drop-shadow(0 0 18px rgba(255, 232, 135, 1));
  animation: mission-target-focus 620ms ease-in-out infinite alternate;
}

.target-cell {
  position: absolute;
  z-index: 15;
  top: 1048px;
  left: 374px;
  width: 104px;
  height: 104px;
  cursor: pointer;
  animation: target-breathe 1.8s ease-in-out infinite;
}

.target-cell img { width: 100%; height: 100%; }

.target-cell.is-resolved {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.bottom-tray-art {
  position: absolute;
  z-index: 25;
  top: 1482px;
  left: 18px;
  width: 817px;
  height: 330px;
}

.choice-glow {
  position: absolute;
  z-index: 27;
  top: 1498px;
  width: 224px;
  height: 224px;
  pointer-events: none;
  filter: brightness(1.3) saturate(1.25) drop-shadow(0 0 16px rgba(255, 224, 116, .88));
  transition: left 240ms cubic-bezier(.2, .8, .2, 1);
  animation: choice-glow 2.2s ease-in-out infinite;
}

.choices {
  position: absolute;
  z-index: 29;
  inset: 0;
  pointer-events: none;
}

.piece-choice {
  position: absolute;
  top: 1529px;
  left: calc(var(--choice-x) - 85px);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.piece-choice img { width: 170px; height: 170px; }
.piece-choice:active { transform: scale(.95); }

.choices.has-selection .piece-choice:not(.is-selected) {
  opacity: .58;
  filter: saturate(.58) brightness(.88);
  transform: scale(.9);
}

.piece-choice.is-selected {
  filter: brightness(1.08) drop-shadow(0 7px 5px rgba(57, 45, 19, .34)) drop-shadow(0 0 17px rgba(255, 226, 121, .98));
  transform: translateY(-16px) scale(1.12);
}

.piece-choice.is-selected::after {
  position: absolute;
  inset: -7px;
  border: 6px solid rgba(255, 244, 183, .98);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(128, 91, 19, .48), 0 0 24px rgba(255, 211, 74, .92), inset 0 0 12px rgba(255, 255, 255, .76);
  content: "";
  pointer-events: none;
  animation: selected-piece-ring 1.45s ease-in-out infinite;
}

.piece-choice.is-tutorial-target img {
  animation: tutorial-choice 1.25s ease-in-out infinite;
}

.choice-glow.is-tutorial-hint {
  animation-duration: 1.25s;
}

.choice-label {
  position: absolute;
  z-index: 30;
  top: 1699px;
  width: 170px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

.choices.has-selection ~ .choice-label:not(.is-selected) { opacity: .58; }

.choice-label.is-selected {
  color: #2a3f6f;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 0 12px rgba(255, 224, 116, .75);
  transform: translateY(-2px) scale(1.06);
}

.rock-label { left: 85px; }
.scissors-label { left: 341px; }
.paper-label { left: 598px; }

.transient-token { z-index: 3; }
.transient-token.is-placing { animation: token-place 430ms cubic-bezier(.18, .82, .2, 1.16) both; }
.board-token.is-converting { animation: token-pinched 310ms ease-in-out both; }
.board-token.is-converted { animation: token-converted 420ms ease-out both; }
.board-token.is-captured { animation: token-captured 540ms cubic-bezier(.55, 0, .9, .55) both; }
.transient-token.is-sacrificed { animation: token-sacrificed 430ms ease-in both; }

.vfx {
  position: absolute;
  pointer-events: none;
  animation-duration: var(--vfx-duration);
  animation-fill-mode: both;
}

.vfx-place { animation-name: vfx-place; }
.vfx-pinch { animation-name: vfx-pinch; }
.vfx-capture { animation-name: vfx-capture; }
.vfx-sacrifice { animation-name: vfx-sacrifice; }

.mission-layer {
  position: absolute;
  z-index: 70;
  inset: 0;
}

.mission-veil {
  position: absolute;
  inset: 0;
  background: rgba(47, 45, 35, .38);
  backdrop-filter: blur(3px);
  animation: result-backdrop 240ms ease-out both;
}

.mission-card {
  position: absolute;
  top: 468px;
  left: 66px;
  width: 721px;
  height: 660px;
  animation: result-card 420ms cubic-bezier(.2, .9, .2, 1.08) both;
}

.mission-card-art {
  position: absolute;
  inset: 0;
  width: 721px;
  height: 660px;
}

.mission-copy {
  position: absolute;
  inset: 58px 70px 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mission-kicker {
  font-size: 25px;
  line-height: 1;
  opacity: .7;
}

.mission-copy strong {
  margin-top: 12px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.08;
}

.mission-primary {
  margin: 24px 0 0;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.2;
}

.mission-constraint {
  margin: 12px 0 0;
  font-size: 25px;
  line-height: 1.25;
  opacity: .75;
}

.mission-target-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 25px;
  font-weight: 500;
}

.mission-target-rule img {
  width: 38px;
  height: 38px;
  filter: sepia(.4) saturate(1.7) brightness(1.12);
}

.mission-cue,
.mission-hint-copy {
  width: 100%;
  margin: 12px 0 0;
  font-size: 25px;
  line-height: 1.28;
}

.mission-cue { opacity: .78; }

.mission-hint-copy {
  min-height: 58px;
  padding: 10px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .32);
}

.mission-actions {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: auto;
}

.mission-actions button {
  min-height: 82px;
  padding: 0 25px;
  border: 3px solid rgba(55, 53, 45, .24);
  border-radius: 42px;
  background: rgba(255, 255, 255, .46);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 5px 10px rgba(57, 52, 38, .12);
  font-size: 26px;
  font-weight: 500;
  cursor: pointer;
}

.mission-actions button:active { transform: scale(.97); }
.mission-hint { flex: 0 0 190px; }
.mission-hint:disabled { opacity: .48; cursor: default; }
.mission-start { flex: 1; }

.result-layer {
  position: absolute;
  z-index: 60;
  inset: 0;
  background: rgba(49, 47, 37, .24);
  backdrop-filter: blur(3px);
  animation: result-backdrop 260ms ease-out both;
}

.result-card {
  position: absolute;
  top: 620px;
  left: 66px;
  width: 721px;
  height: 380px;
  animation: result-card 420ms cubic-bezier(.2, .9, .2, 1.08) both;
}

.result-card-art {
  position: absolute;
  inset: 0;
  width: 721px;
  height: 380px;
}

.result-copy {
  position: absolute;
  inset: 30px 65px 45px;
  display: grid;
  grid-template-rows: 52px 50px 38px 35px 110px;
  align-content: start;
  justify-items: center;
  align-items: center;
  text-align: center;
}

.result-stars {
  display: flex;
  gap: 8px;
}

.result-stars img {
  width: 52px;
  height: 52px;
}

.result-copy strong {
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
}

.result-message {
  font-size: 30px;
  line-height: 1;
}

.result-copy small {
  font-size: 24px;
  line-height: 1;
  opacity: .78;
}

.result-copy button {
  width: 280px;
  min-height: 90px;
  padding: 0 28px;
  border: 3px solid rgba(55, 53, 45, .25);
  border-radius: 45px;
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .28), 0 5px 10px rgba(57, 52, 38, .14);
  font-size: 28px;
  font-weight: 500;
  cursor: pointer;
}

.result-copy button:active { transform: scale(.96); }

.result-actions {
  align-self: end;
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 18px;
}

.result-actions .result-retry {
  background: rgba(238, 233, 216, .68);
}

.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;
}

@keyframes target-breathe {
  0%, 100% { transform: scale(.92); opacity: .78; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes target-marker-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .76; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes mission-target-breathe {
  0%, 100% { transform: scale(.93); opacity: .68; }
  50% { transform: scale(1.04); opacity: .96; }
}

@keyframes mission-target-focus {
  from { transform: scale(.94); }
  to { transform: scale(1.12); }
}

@keyframes choice-glow {
  0%, 100% { opacity: .86; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes selected-piece-ring {
  0%, 100% { opacity: .82; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes token-place {
  0% { opacity: 0; transform: translateY(-54px) scale(1.18); }
  68% { opacity: 1; transform: translateY(5px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes token-pinched {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(.78, 1.12); filter: brightness(1.55); }
}

@keyframes token-converted {
  0% { transform: scale(.8); filter: brightness(1.7); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes token-captured {
  0% { opacity: 1; transform: scale(1) rotate(0deg); }
  55% { opacity: .9; transform: scale(.76) rotate(-8deg); }
  100% { opacity: 0; transform: scale(.08) rotate(24deg); }
}

@keyframes token-sacrificed {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  45% { opacity: 1; transform: scale(.9) rotate(-5deg); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(.2) rotate(14deg); filter: brightness(2); }
}

@keyframes vfx-place {
  0% { opacity: 0; transform: scale(.22); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes vfx-pinch {
  0% { opacity: 0; transform: scaleX(1.2); }
  30% { opacity: 1; }
  72% { opacity: 1; transform: scaleX(.68); filter: brightness(1.2); }
  100% { opacity: 0; transform: scaleX(.48); filter: brightness(1.8); }
}

@keyframes vfx-capture {
  0% { opacity: 0; transform: scale(.46) rotate(-14deg); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) rotate(12deg); }
}

@keyframes vfx-sacrifice {
  0% { opacity: 0; transform: scale(.72); }
  28% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14); }
}

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

@keyframes result-card {
  from { opacity: 0; transform: translateY(44px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lesson-banner {
  0% { opacity: 0; transform: translateY(-14px) scale(.96); }
  12%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes tutorial-choice {
  0%, 100% { transform: scale(.96); filter: brightness(1) drop-shadow(0 0 0 rgba(255, 242, 168, 0)); }
  50% { transform: scale(1.07); filter: brightness(1.12) drop-shadow(0 0 18px rgba(255, 242, 168, .95)); }
}

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