:root {
  --stage-width: 1024;
  --stage-height: 715;
  --ink: #22425f;
  --accent: #2e79ff;
  --gold: #f5c34c;
  --gold-deep: #c28b08;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #b8ebff, #f5fbff 35%, #dbf5ff 100%);
  color: var(--ink);
}

button,
select {
  font: inherit;
}

.game-page {
  position: relative;
  width: min(100vw, 1024px);
  max-width: 1024px;
  aspect-ratio: 1024 / 715;
  height: auto;
  margin: 24px auto 0;
  padding: 0;
  overflow: visible;
}

.game-stage {
  width: 100%;
  aspect-ratio: 1024 / 715;
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(29, 79, 126, 0.18);
}

.stage-asset {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.topbar {
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(97 / var(--stage-height) * 100%);
  z-index: 0;
}

.bottombar {
  left: 0;
  top: calc(707 / var(--stage-height) * 100%);
  width: 100%;
  height: calc(11 / var(--stage-height) * 100%);
}

.worksheet {
  left: calc(205 / var(--stage-width) * 100%);
  top: calc(92 / var(--stage-height) * 100%);
  width: calc(615 / var(--stage-width) * 100%);
  height: calc(615 / var(--stage-height) * 100%);
}

.progress-frame {
  left: calc(82 / var(--stage-width) * 100%);
  top: calc(14 / var(--stage-height) * 100%);
  width: calc(148 / var(--stage-width) * 100%);
  height: calc(61 / var(--stage-height) * 100%);
}

.short-instructions-frame {
  left: calc(248 / var(--stage-width) * 100%);
  top: calc(5 / var(--stage-height) * 100%);
  width: calc(564 / var(--stage-width) * 100%);
  height: calc(77 / var(--stage-height) * 100%);
  z-index: 5;
}

.short-instructions {
  position: absolute;
  left: calc(248 / var(--stage-width) * 100%);
  top: calc(5 / var(--stage-height) * 100%);
  width: calc(564 / var(--stage-width) * 100%);
  height: calc(77 / var(--stage-height) * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.92rem, 1.45vw, 1.08rem);
  line-height: 1.25;
  color: #114f74;
  font-weight: 700;
  z-index: 6;
  padding: 8px 18px;
  pointer-events: none;
}
.short-instructions .short-emphasis {
  font-size: 1.14em;
}



.icon-button,
.start-button,
.level-button {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.icon-button:focus,
.icon-button:focus-visible,
.icon-button:active {
  outline: none;
  box-shadow: none;
}

.icon-button img,
.start-button img,
.level-button img {
  width: 100%;
  height: 100%;
  display: block;
}

.sound-button {
  left: calc(823 / var(--stage-width) * 100%);
  top: calc(24 / var(--stage-height) * 100%);
  width: calc(38 / var(--stage-width) * 100%);
  height: calc(38 / var(--stage-height) * 100%);
  z-index: 9;
}

.replay-button {
  left: calc(890 / var(--stage-width) * 100%);
  top: calc(24 / var(--stage-height) * 100%);
  width: calc(38 / var(--stage-width) * 100%);
  height: calc(38 / var(--stage-height) * 100%);
  z-index: 9;
}

.info-button {
  left: calc(957 / var(--stage-width) * 100%);
  top: calc(24 / var(--stage-height) * 100%);
  width: calc(38 / var(--stage-width) * 100%);
  height: calc(38 / var(--stage-height) * 100%);
  z-index: 10;
}

.hint-button {
  left: calc(30 / var(--stage-width) * 100%);
  top: calc(8 / var(--stage-height) * 100%);
  width: calc(33 / var(--stage-width) * 100%);
  height: calc(60 / var(--stage-height) * 100%);
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
}

.hint-button.is-cooling {
  opacity: 0.42;
  filter: grayscale(1) brightness(0.85);
  cursor: default;
}


.progress-panel {
  position: absolute;
  left: calc(82 / var(--stage-width) * 100%);
  top: calc(14 / var(--stage-height) * 100%);
  width: calc(148 / var(--stage-width) * 100%);
  height: calc(61 / var(--stage-height) * 100%);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 10;
}

.progress-title {
  font-size: clamp(0.65rem, 1vw, 0.82rem);
  margin-top: 4px;
}

.progress-value {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  margin-top: -8px;
}

.worksheet-shell {
  position: absolute;
  left: calc(205 / var(--stage-width) * 100%);
  top: calc(92 / var(--stage-height) * 100%);
  width: calc(615 / var(--stage-width) * 100%);
  height: calc(615 / var(--stage-height) * 100%);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.trail-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.trail-segment {
  stroke: #5c8cff;
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(31, 73, 196, 0.28));
}

.trail-segment.current-segment {
  stroke: #2b5cff;
  stroke-width: 18;
  opacity: 1;
}

.board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 8px;
  user-select: none;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
  z-index: 10;
}

.cell {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 18px;
  background: linear-gradient(180deg, #cad5f5, #b7c5f0);
  border: 2px solid rgba(110, 145, 255, 0.65);
  box-shadow: inset 0 -4px 0 rgba(91, 118, 191, 0.16);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  color: #6f5011;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 2px dashed transparent;
}

.cell.path {
  background: linear-gradient(180deg, #3f79ff, #0d43df);
  border-color: #082c9f;
  box-shadow: inset 0 -6px 0 rgba(7, 24, 94, 0.5), 0 0 0 4px rgba(48, 97, 255, 0.3);
}

.cell.current {
  transform: scale(1.08);
  border-color: #041f7f;
  box-shadow: inset 0 -6px 0 rgba(5, 22, 87, 0.58), 0 0 0 5px rgba(22, 79, 255, 0.36);
}

.cell.hint-target {
  background: linear-gradient(180deg, #9db8ff, #6f93ff);
  border-color: #4c74ea;
  box-shadow: inset 0 -5px 0 rgba(48, 78, 173, 0.28), 0 0 0 4px rgba(114, 151, 255, 0.22);
}

.cell.checkpoint.hint-target {
  background: linear-gradient(135deg, #eef3ff 8%, #b8cbff 92%);
  border-color: #5f86f2;
}

.cell.checkpoint {
  background: linear-gradient(135deg, #fff7de 8%, #ffd56e 92%);
  border-color: #f4b200;
}

.cell.checkpoint.path {
  background: linear-gradient(135deg, #ffeaa6 8%, #ff9f1f 92%);
  border-color: #d38300;
  box-shadow: inset 0 -6px 0 rgba(156, 90, 0, 0.34), 0 0 0 4px rgba(255, 191, 72, 0.3);
}


.cell.blocked {
  background: linear-gradient(180deg, #9eb0c9, #7f90a8);
  border-color: rgba(54, 69, 96, 0.3);
  box-shadow: none;
}

.cell.blocked span {
  opacity: 0;
}

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

.info-layer[hidden] {
  display: none;
}
.victory-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.victory-layer[hidden] {
  display: none;
}

.victory-cup {
  left: calc(318 / var(--stage-width) * 100%);
  top: calc(197 / var(--stage-height) * 100%);
  width: calc(389 / var(--stage-width) * 100%);
  height: calc(284 / var(--stage-height) * 100%);
  z-index: 9;
  opacity: 0;
  transform: translate(-220px, 120px) scale(0.42) rotate(-18deg);
  transform-origin: center;
}

.victory-layer.is-visible .victory-cup {
  animation: trophyEntrance 2.9s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}

.victory-spark {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 248, 180, 0.95) 0%, rgba(255, 213, 95, 0.72) 45%, rgba(255, 213, 95, 0) 72%);
  filter: drop-shadow(0 0 8px rgba(255, 223, 106, 0.85));
}

.victory-layer.is-visible .victory-spark {
  animation: sparkleTrail 2.4s ease-out forwards;
}

.spark-1 {
  left: calc(320 / var(--stage-width) * 100%);
  top: calc(360 / var(--stage-height) * 100%);
  animation-delay: 0s;
}

.spark-2 {
  left: calc(365 / var(--stage-width) * 100%);
  top: calc(315 / var(--stage-height) * 100%);
  animation-delay: 0.12s;
}

.spark-3 {
  left: calc(430 / var(--stage-width) * 100%);
  top: calc(270 / var(--stage-height) * 100%);
  animation-delay: 0.24s;
}

.spark-4 {
  left: calc(505 / var(--stage-width) * 100%);
  top: calc(235 / var(--stage-height) * 100%);
  animation-delay: 0.36s;
}
.spark-5 {
  left: calc(560 / var(--stage-width) * 100%);
  top: calc(218 / var(--stage-height) * 100%);
  animation-delay: 0.48s;
}

.spark-6 {
  left: calc(610 / var(--stage-width) * 100%);
  top: calc(230 / var(--stage-height) * 100%);
  animation-delay: 0.6s;
}

.spark-7 {
  left: calc(655 / var(--stage-width) * 100%);
  top: calc(258 / var(--stage-height) * 100%);
  animation-delay: 0.72s;
}

@keyframes trophyEntrance {
  0% {
    opacity: 0;
    transform: translate(-220px, 120px) scale(0.42) rotate(-18deg);
  }

  55% {
    opacity: 1;
    transform: translate(18px, -8px) scale(1.04) rotate(6deg);
  }

  75% {
    transform: translate(-8px, 4px) scale(0.98) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes sparkleTrail {
  0% {
    opacity: 0;
    transform: translate(-70px, 40px) scale(0.35);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(24px, -18px) scale(1.3);
  }
}

.text-frame {
  left: calc(213 / var(--stage-width) * 100%);
  top: calc(189 / var(--stage-height) * 100%);
  width: calc(596 / var(--stage-width) * 100%);
  height: calc(300 / var(--stage-height) * 100%);
  z-index: 7;
}

.text-panel {
  position: absolute;
  left: calc(213 / var(--stage-width) * 100%);
  top: calc(189 / var(--stage-height) * 100%);
  width: calc(596 / var(--stage-width) * 100%);
  height: calc(300 / var(--stage-height) * 100%);
  z-index: 8;
  padding: 22px 30px;
  pointer-events: auto;
  color: #1f5cab;
}

.text-panel-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

.text-panel h1 {
  margin: 0 0 12px;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.2;
  font-weight: 700;
  color: #1f5cab;
}

.panel-copy {
  margin: 10px 0;
  font-size: clamp(0.96rem, 1.38vw, 1.08rem);
  line-height: 1.55;
  font-weight: 600;
  color: #1f5cab;
}

.panel-copy.emphasis {
  color: #1f5cab;
  font-weight: 600;
}

.checkpoint-list {
  display: block;
  margin-top: 14px;
}

.chip {
  display: block;
  margin: 7px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(0.96rem, 1.34vw, 1.04rem);
  line-height: 1.45;
  font-weight: 600;
  color: #1f5cab;
}

.message-box {
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(0.96rem, 1.34vw, 1.04rem);
  line-height: 1.55;
  font-weight: 600;
  color: #1f5cab;
}

.level-button {
  width: calc(192 / var(--stage-width) * 100%);
  height: calc(89 / var(--stage-height) * 100%);
  display: grid;
  place-items: center;
  z-index: 10;
}

.option-1 {
  left: calc(5 / var(--stage-width) * 100%);
  top: calc(212 / var(--stage-height) * 100%);
}

.option-2 {
  left: calc(5 / var(--stage-width) * 100%);
  top: calc(358 / var(--stage-height) * 100%);
}

.option-3 {
  left: calc(5 / var(--stage-width) * 100%);
  top: calc(514 / var(--stage-height) * 100%);
}

.option-4 {
  left: calc(828 / var(--stage-width) * 100%);
  top: calc(212 / var(--stage-height) * 100%);
}

.option-5 {
  left: calc(828 / var(--stage-width) * 100%);
  top: calc(358 / var(--stage-height) * 100%);
}

.option-6 {
  left: calc(828 / var(--stage-width) * 100%);
  top: calc(514 / var(--stage-height) * 100%);
}

.level-button span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 22px 10px;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
  color: #785600;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 800;
}

.level-button.is-active {
  transform: translateY(-1px);
}

.level-button.is-active img {
  filter: brightness(1.02) saturate(1.05);
}

.level-button.is-disabled {
  cursor: default;
  opacity: 0.55;
}

.start-button {
  left: calc(416 / var(--stage-width) * 100%);
  top: calc(640 / var(--stage-height) * 100%);
  width: calc(181 / var(--stage-width) * 100%);
  height: calc(75 / var(--stage-height) * 100%);
  z-index: 10;
}

.start-button span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #eaf8ff;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.start-button.is-hidden {
  display: none;
}

.icon-button:hover,
.level-button:hover,
.start-button:hover {
  transform: translateY(-1px);
}

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

@media (max-width: 900px) {
  .game-page {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    margin-top: 12px;
    padding: 0;
  }

  .worksheet-shell {
    padding: 10px;
  }

  .trail-segment {
    stroke-width: 12;
  }

  .trail-segment.current-segment {
    stroke-width: 14;
  }

  .board {
    gap: 6px;
  }

  .cell {
    border-radius: 12px;
    font-size: clamp(0.72rem, 1.4vw, 1rem);
  }

  .text-panel {
    padding: 12px 14px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.mobile-layout {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  .progress-frame,
  .progress-panel,
  .bottombar {
    display: none;
  }

  .short-instructions-frame,
  .short-instructions {
    left: calc(188 / var(--stage-width) * 100%);
  }

  .game-page,
  .game-stage {
    aspect-ratio: 1024 / 1760;
  }

  .game-page {
    flex: 0 0 auto;
    margin-top: 44px;
  }

  .worksheet {
    left: calc(34 / var(--stage-width) * 100%);
    top: calc(280 / 1760 * 100%);
    width: calc(956 / var(--stage-width) * 100%);
    height: calc(956 / 1760 * 100%);
  }

  .worksheet-shell {
    left: calc(34 / var(--stage-width) * 100%);
    top: calc(280 / 1760 * 100%);
    width: calc(956 / var(--stage-width) * 100%);
    height: calc(956 / 1760 * 100%);
    padding: 12px;
  }

  .text-frame,
  .text-panel {
    left: calc(92 / var(--stage-width) * 100%);
    top: calc(360 / 1760 * 100%);
    width: calc(840 / var(--stage-width) * 100%);
    height: calc(692 / 1760 * 100%);
  }

  .sound-button,
  .replay-button,
  .info-button {
    width: calc(74 / var(--stage-width) * 100%);
    height: calc(74 / var(--stage-width) * 100%);
  }

  .sound-button img,
  .replay-button img,
  .info-button img,
  .hint-button img {
    object-fit: contain;
  }

  .sound-button {
    left: calc(767 / var(--stage-width) * 100%);
    top: calc(70 / 1760 * 100%);
  }

  .replay-button {
    left: calc(845 / var(--stage-width) * 100%);
    top: calc(70 / 1760 * 100%);
  }

  .info-button {
    left: calc(923 / var(--stage-width) * 100%);
    top: calc(70 / 1760 * 100%);
  }

  .hint-button {
    left: calc(60 / var(--stage-width) * 100%);
    top: calc(15 / 1760 * 100%);
    width: calc(60 / var(--stage-width) * 100%);
    height: calc(110 / var(--stage-width) * 100%);
  }

  .text-panel {
    padding: 24px 28px;
  }

  .text-panel h1 {
    font-size: clamp(1.3rem, 4.8vw, 1.8rem);
    margin-bottom: 12px;
  }

  .panel-copy,
  .chip,
  .message-box {
    font-size: clamp(1rem, 3.7vw, 1.2rem);
    line-height: 1.5;
  }

  .checkpoint-list {
    margin-top: 8px;
  }

  .text-panel-scroll {
    padding-right: 6px;
  }

  .level-button {
    width: calc(260 / var(--stage-width) * 100%);
    height: calc(92 / 1760 * 100%);
  }

  .option-1 {
    left: calc(50 / var(--stage-width) * 100%);
    top: calc(1250 / 1760 * 100%);
  }

  .option-2 {
    left: calc(372 / var(--stage-width) * 100%);
    top: calc(1250 / 1760 * 100%);
  }

  .option-3 {
    left: calc(714 / var(--stage-width) * 100%);
    top: calc(1250 / 1760 * 100%);
  }

  .option-4 {
    left: calc(50 / var(--stage-width) * 100%);
    top: calc(1413 / 1760 * 100%);
  }

  .option-5 {
    left: calc(372 / var(--stage-width) * 100%);
    top: calc(1413 / 1760 * 100%);
  }

  .option-6 {
    left: calc(714 / var(--stage-width) * 100%);
    top: calc(1413 / 1760 * 100%);
  }

  .start-button {
    left: calc(384 / var(--stage-width) * 100%);
    top: calc(1567 / 1760 * 100%);
    width: calc(256 / var(--stage-width) * 100%);
    height: calc(88 / 1760 * 100%);
  }

  body.mobile-layout footer {
    position: static;
    width: 100%;
    margin-top: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .game-page > #calTaitel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 0 4px;
    transform: translateY(5px);
    z-index: 2;
  }

  .level-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px 0;
    line-height: 1.12;
    font-size: clamp(0.94rem, 2.95vw, 1.14rem);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-align: center;
  }

  .option-4 span,
  .option-5 span {
    font-size: clamp(0.84rem, 2.55vw, 1rem);
  }
}

@media (orientation: landscape) {
  body.mobile-layout {
    overflow: hidden;
  }

  body.mobile-layout .game-page {
    position: absolute;
    left: 8px;
    top: 0;
    width: 1024px;
    max-width: none;
    height: 715px;
    margin: 0;
    transform-origin: top left;
  }

  body.mobile-layout .game-stage {
    width: 1024px;
    height: 715px;
    aspect-ratio: 1024 / 715;
  }

  body.mobile-layout .game-page > #calTaitel {
    display: none;
  }

  body.mobile-layout .cell {
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  }

  body.mobile-layout footer {
    display: none;
  }
}