:root {
  --ink: #fff3d2;
  --ink-soft: #f0d7a4;
  --cream: #f6e6c4;
  --paper: #fff1d2;
  --oak: #8a5424;
  --oak-dark: #3d1f08;
  --gold: #f0c85c;
  --gold-deep: #b8861c;
  --teal: #0f8a86;
  --teal-deep: #06524e;
  --coral: #e25a48;
  --wood: #7a441c;
  --font: "Fredoka", "Noto Sans SC", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: #0b2428;
}

button { font-family: inherit; cursor: pointer; border: 0; }

.hidden { display: none !important; }

.app {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #12343c;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  z-index: 0;
}

.water-sheen,
.caustics,
.game-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.water-sheen {
  z-index: 1;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(8, 22, 28, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(18, 36, 42, 0.1) 0%, transparent 28%, rgba(8, 40, 48, 0.08) 58%, rgba(6, 28, 34, 0.32) 100%);
}

.caustics {
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 28% 12% at 18% 72%, rgba(210, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 22% 10% at 62% 80%, rgba(180, 240, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 18% 8% at 84% 68%, rgba(255, 255, 230, 0.28), transparent 70%);
  animation: caustic 9s ease-in-out infinite;
}

.game-frame {
  z-index: 30;
  box-shadow:
    inset 0 0 0 8px #3a1c0a,
    inset 0 0 0 12px #d7b25c,
    inset 0 0 0 16px #6a3814,
    inset 0 0 70px rgba(8, 16, 18, 0.28);
}

.screen {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
}

.sign {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 226, 160, 0.2), transparent 38%),
    repeating-linear-gradient(90deg, #9a5a28 0 13px, #864a1e 13px 21px, #733e18 21px 28px);
  border: 4px solid #3d1f08;
  box-shadow:
    0 12px 0 #2a1406,
    inset 0 2px 0 rgba(255, 230, 170, 0.28),
    inset 0 -8px 16px rgba(40, 16, 4, 0.28);
  text-shadow: 0 2px 0 rgba(40, 16, 6, 0.35);
}

.nail {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a8, #b8862a 55%, #6a4010);
  box-shadow: 0 2px 0 #3d1f08;
}

.nail-tl { top: 10px; left: 10px; }
.nail-tr { top: 10px; right: 10px; }
.nail-bl { bottom: 10px; left: 10px; }
.nail-br { bottom: 10px; right: 10px; }

.title-stack {
  position: absolute;
  left: 28px;
  top: 28px;
  text-align: left;
  width: min(420px, calc(100% - 180px));
  padding: 22px 24px 20px;
  border-radius: 28px;
}

.title-kicker,
.title-en,
.board-kicker,
.kicker {
  margin: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

.title-stack h1 {
  margin: 8px 0 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.92;
  color: #fff4d0;
  text-shadow: 0 4px 0 #5a2c0c, 0 8px 0 rgba(30, 12, 4, 0.35);
}

.title-en {
  margin-top: 10px;
  font-size: 18px;
  letter-spacing: 0.32em;
}

.coin-badge,
.home-progress {
  position: absolute;
  top: 26px;
  right: 28px;
  padding: 10px 18px 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  color: #5a2c0c;
  text-shadow: none;
  background:
    linear-gradient(180deg, #ffe38a, #e0a53a);
  border: 4px solid #7a4814;
  box-shadow: 0 6px 0 #4a2a08, inset 0 2px 0 rgba(255, 255, 220, 0.6);
}

.home-panel {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 36px));
  padding: 22px 24px 24px;
  text-align: center;
  border-radius: 28px;
}

.lede,
.tip,
.mission-en,
.world-en {
  margin: 6px 0 0;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.primary,
.ghost,
.back,
.listen,
.link-btn {
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 999px;
}

.primary {
  color: #fff8e8;
  background: linear-gradient(180deg, #24b3a8, #0d7a74);
  border: 3px solid #083c38;
  box-shadow: 0 7px 0 #052e2c, inset 0 2px 0 rgba(255, 255, 255, 0.28);
}

.primary.big {
  padding: 15px 38px;
  font-size: 24px;
}

.primary.shine {
  position: relative;
  overflow: hidden;
}

.primary.shine::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 2.6s ease-in-out infinite;
}

.primary:hover { transform: translateY(1px); box-shadow: 0 6px 0 #052e2c; }

.ghost,
.back,
.link-btn {
  color: #5a2c0c;
  text-decoration: none;
  text-shadow: none;
  background: linear-gradient(180deg, #ffe7a8, #e2b24a);
  border: 3px solid #7a4814;
  box-shadow: 0 6px 0 #4a2a08;
}

.link-btn { display: inline-block; }

.listen {
  margin-top: 8px;
  padding: 7px 12px;
  font-size: 15px;
  color: #fff8e8;
  background: linear-gradient(180deg, #2a7a6e, #145248);
  border: 3px solid #083830;
  box-shadow: 0 5px 0 #042420;
}

.panel-wrap {
  min-height: 100dvh;
  padding: 28px 22px;
  display: grid;
  align-content: start;
}

.panel {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 22px;
  border-radius: 30px;
}

.panel.wide { width: min(1140px, 100%); }

.panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.panel h2,
.help-card strong {
  margin: 4px 0 0;
  color: #fff6d4;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.help-card {
  text-align: left;
  border-radius: 22px;
  padding: 18px;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.world-card {
  position: relative;
  text-align: left;
  padding: 18px 16px 16px;
  border-radius: 24px;
  overflow: hidden;
  color: #3d1f08;
  text-shadow: none;
  background:
    linear-gradient(180deg, #fff1c4, #f0c56a 62%, #d7a03c);
  border: 4px solid #5a3010;
  box-shadow: 0 10px 0 #2a1406, inset 0 2px 0 rgba(255, 255, 230, 0.7);
}

.world-card.open:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 0 #2a1406, inset 0 2px 0 rgba(255, 230, 170, 0.28);
}

.world-card:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.82);
}

.world-medal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: #5a2c0c;
  text-shadow: none;
  background:
    radial-gradient(circle at 35% 30%, #fff3b0, #f0c85c 46%, #c99228);
  border: 3px solid #7a4814;
  box-shadow: 0 5px 0 #4a2a08, inset 0 2px 0 rgba(255, 255, 230, 0.7);
}

.world-card h3 {
  margin: 12px 0 2px;
  font-size: 22px;
  color: #3d1f08;
}

.world-card .tip,
.world-card .world-en {
  color: #6a4018;
}

.world-card .stars {
  color: #8a5810;
  margin-top: 0;
}

.world-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.world-foot .coin {
  color: #ffe08a;
  font-weight: 800;
}

.lock {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff4d8;
  background: #3d1f08;
  border: 2px solid #d7b25c;
}

.stage-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  padding: 8px 6px 4px;
}

.stage-path::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 58px;
  height: 8px;
  border-radius: 99px;
  background:
    repeating-linear-gradient(90deg, #d7b25c 0 18px, #8a6030 18px 28px);
  box-shadow: 0 3px 0 #3d1f08;
  z-index: 0;
}

.stage-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 210px;
  padding: 8px 8px 14px;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 2px 0 rgba(40, 16, 6, 0.35);
}

.stage-node .stage-num {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 800;
  color: #5a2c0c;
  text-shadow: none;
  background:
    radial-gradient(circle at 32% 28%, #fff6c4, #f0c85c 48%, #c48a22);
  border: 5px solid #5a3010;
  box-shadow:
    0 8px 0 #2a1406,
    inset 0 3px 0 rgba(255, 255, 230, 0.7);
}

.stage-node.vowel .stage-num {
  background: radial-gradient(circle at 32% 28%, #d9fff6, #3ec1b4 48%, #0e7a72);
  color: #083c38;
  border-color: #083c38;
}

.stage-node.consonant .stage-num {
  background: radial-gradient(circle at 32% 28%, #ffe7c4, #e07a3a 48%, #a84a18);
  color: #3d1f08;
}

.stage-node.open:hover .stage-num {
  transform: translateY(-3px) scale(1.04);
}

.stage-node:disabled {
  cursor: not-allowed;
}

.stage-node:disabled .stage-num {
  filter: grayscale(0.4) brightness(0.75);
}

.stage-node .tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(40, 16, 6, 0.35);
  color: var(--gold);
}

.stage-node strong {
  text-align: center;
  font-size: 15px;
  line-height: 1.25;
  color: #fff4d2;
}

.letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip,
.catch-chip {
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff8e4;
  border: 2px solid rgba(30, 12, 6, 0.35);
  box-shadow: 0 3px 0 rgba(30, 12, 6, 0.28);
}

.chip.vowel,
.catch-chip.vowel {
  background: linear-gradient(180deg, #2bb8ad, #0d7a74);
}

.chip.consonant,
.catch-chip.consonant {
  background: linear-gradient(180deg, #e08a3a, #a84a18);
}

.stars {
  color: #ffe08a;
  letter-spacing: 2px;
  margin-top: 6px;
  font-size: 18px;
}

.stars.big { font-size: 40px; margin: 12px 0 16px; }

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.play { min-height: 100dvh; cursor: pointer; }
.play .hud,
.play .hud button { cursor: auto; }

#stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 14px;
  pointer-events: none;
}

.hud .back,
.hud .listen { pointer-events: auto; }

.board {
  border-radius: 22px;
  padding: 14px 16px 12px;
}

.hanging {
  position: relative;
}

.hanging::before,
.hanging::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 5px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(#f0d078, #8a6030);
  box-shadow: 0 0 0 2px #3d1f08;
}

.hanging::before { left: 22px; }
.hanging::after { right: 22px; }

.mission-board { max-width: min(420px, 64vw); }
.mission-board h2 {
  margin: 4px 0 0;
  font-size: clamp(20px, 3vw, 28px);
  color: #fff6d4;
}

.status-board {
  min-width: 158px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.lives {
  color: #ff8a78;
  letter-spacing: 4px;
  font-size: 24px;
  text-shadow: 0 2px 0 #3d1f08;
}

.basket {
  width: 100%;
  text-align: right;
}

.basket > span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.catch-tray {
  min-height: 46px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.progress {
  margin: 0;
  font-weight: 800;
  color: #fff4d2;
}

.cast-hint,
.toast {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 7;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  pointer-events: none;
}

.result-card {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 36px));
  text-align: center;
  z-index: 8;
}

@keyframes shine {
  0%, 55% { left: -40%; }
  80%, 100% { left: 120%; }
}

@keyframes caustic {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.24; }
  50% { transform: translate3d(-2%, -1%, 0) scale(1.05); opacity: 0.38; }
}

@media (max-width: 820px) {
  .stage-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stage-path::before { display: none; }
}

@media (max-width: 720px) {
  .help-grid { grid-template-columns: 1fr; }
  .title-stack { top: 22px; left: 16px; padding: 16px 16px 14px; }
  .title-stack h1 { font-size: 40px; }
  .hud { padding: 16px 12px 10px; }
  .mission-en,
  .mission-board .tip { display: none; }
  .mission-board { max-width: 62vw; }
  .game-frame {
    box-shadow:
      inset 0 0 0 6px #3a1c0a,
      inset 0 0 0 9px #d7b25c,
      inset 0 0 0 12px #6a3814;
  }
}