:root {
  --sky-top: #4fc3f0;
  --sky-soft: #9ddcf5;
  --meadow: #6fcf6a;
  --hill-deep: #3d9b4a;
  --cream: #fff9ee;
  --ivory: #fffdf7;
  --gold: #e6c04a;
  --gold-deep: #c9962a;
  --letter-red: #e53935;
  --coral: #f07868;
  --coral-deep: #d45a4c;
  --green-cta: #4ecb71;
  --green-deep: #2e9b50;
  --blue-cta: #42a5f5;
  --blue-deep: #1565c0;
  --wood: #8b5a2b;
  --lock-grey: #9e9e9e;
  --brown: #6b3e1f;
  --radius: 24px;
  --font-ta: "Noto Sans Tamil", "Tamil MN", Latha, Vijaya, sans-serif;
  --font-en: "Fredoka", "Noto Sans Tamil", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  inset: 0;
  background: #16324a;
  font-family: var(--font-ta);
  color: var(--brown);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 0%, #2a5a78 0%, #16324a 70%);
}

.phone {
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 0 0 3px #0e2433, 0 24px 60px rgba(0, 0, 0, 0.45);
  background: var(--sky-top);
}

@media (max-width: 520px) {
  .phone {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

.meadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-soft) 42%,
    var(--meadow) 42.2%,
    var(--meadow) 70%,
    var(--hill-deep) 100%
  );
  background-size: cover;
  background-position: center bottom;
}

.meadow.has-photo {
  background-color: var(--sky-top);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.meadow::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 110%, var(--hill-deep) 0 30%, transparent 31%),
    radial-gradient(90% 70% at 82% 120%, #348a42 0 36%, transparent 37%);
}

.meadow.has-photo::after {
  display: none;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
}

.screen.is-on {
  display: flex;
}

.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 4px;
  z-index: 8;
}

/* Glossy ivory bubble icon buttons */
.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #fff6e0 55%, #f0d9a8 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 0 var(--gold-deep), 0 8px 14px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.icon-btn::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 8%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.icon-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--gold-deep), 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ic-back {
  width: 12px;
  height: 12px;
  border-left: 3.5px solid var(--brown);
  border-bottom: 3.5px solid var(--brown);
  transform: rotate(45deg);
  margin-left: 4px;
  position: relative;
  z-index: 1;
}

.ic-pause {
  width: 14px;
  height: 16px;
  border-left: 5px solid var(--brown);
  border-right: 5px solid var(--brown);
  position: relative;
  z-index: 1;
}

.star {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: linear-gradient(180deg, #ffe082, var(--gold));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 3px 0 var(--gold-deep));
}

/* ---- Glossy bubble CTAs ---- */
.cta-pill,
.cta-wide {
  position: relative;
  overflow: hidden;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  z-index: 1;
}

.cta-pill::before,
.cta-wide::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 7%;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  font-size: 15px;
  flex: 0 0 auto;
}

.cta-wide {
  width: min(86%, 320px);
  padding: 17px 22px;
  font-size: 22px;
  margin-top: auto;
  margin-bottom: 18px;
  text-align: center;
}

.cta-pill.green,
.cta-wide.green {
  background: linear-gradient(180deg, #8ef0a8 0%, var(--green-cta) 46%, var(--green-deep) 100%);
  box-shadow: 0 7px 0 var(--green-deep), 0 12px 16px rgba(46, 155, 80, 0.35);
}

.cta-pill.coral,
.cta-wide.coral {
  background: linear-gradient(180deg, #ffb3a8 0%, var(--coral) 48%, var(--coral-deep) 100%);
  box-shadow: 0 7px 0 var(--coral-deep), 0 12px 16px rgba(212, 90, 76, 0.35);
}

.cta-pill.blue,
.cta-wide.blue {
  background: linear-gradient(180deg, #90caf9 0%, var(--blue-cta) 48%, var(--blue-deep) 100%);
  box-shadow: 0 7px 0 var(--blue-deep), 0 12px 16px rgba(21, 101, 192, 0.35);
}

.cta-wide:active,
.cta-pill:active {
  transform: translateY(6px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.18);
}

#btn-victory-map {
  margin-top: 0;
  margin-bottom: 16px;
}

/* ---- Cream / gold floral banners ---- */
.cream-banner {
  position: relative;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  border: 4px solid var(--gold);
  border-radius: 22px;
  box-shadow: 0 8px 0 var(--gold-deep), 0 16px 22px rgba(107, 62, 31, 0.2);
}

.cream-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 9px;
  background: linear-gradient(180deg, #c48a4e, var(--wood));
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.title-banner {
  width: calc(100% - 36px);
  text-align: center;
  padding: 16px 16px 12px;
  margin: 4px 0 10px;
  z-index: 3;
}

.title-banner .screen-heading {
  margin: 4px 0 0;
}

.arch-banner {
  width: calc(100% - 48px);
  text-align: center;
  padding: 12px 20px 22px;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #64c4f0 0%, #2196d4 100%);
  border: 3px solid #fff;
  border-radius: 18px 18px 50% 50% / 18px 18px 42% 42%;
  box-shadow: 0 8px 0 #0d47a1, 0 14px 20px rgba(13, 71, 161, 0.28);
  z-index: 3;
}

.arch-banner .screen-heading {
  color: #fff;
  text-shadow: 0 2px 0 #0d47a1, 0 4px 8px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke: 0;
}

.arch-sub {
  margin: 2px 0 0;
  font-weight: 800;
  color: #e3f7ff;
  text-shadow: 0 1px 0 #0d47a1;
}

.screen-heading {
  font-family: var(--font-en);
  font-size: 21px;
  margin: 0;
  color: var(--blue-deep);
  text-shadow: 0 2px 0 #fff, 0 3px 0 rgba(21, 101, 192, 0.2);
}

.floral-card {
  position: relative;
  background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 5px solid var(--gold);
  border-radius: 28px;
  box-shadow: 0 10px 0 var(--gold-deep), 0 18px 24px rgba(107, 62, 31, 0.22);
  overflow: hidden;
}

.floral-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(201, 150, 42, 0.55);
  border-radius: 20px;
  pointer-events: none;
}

.corner-fl {
  position: absolute;
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.92;
  z-index: 1;
  pointer-events: none;
}

.corner-fl.tl { top: -4px; left: -4px; }
.corner-fl.tr { top: -4px; right: -4px; transform: scaleX(-1); }
.corner-fl.bl { bottom: -4px; left: -4px; transform: scaleY(-1); }
.corner-fl.br { bottom: -4px; right: -4px; transform: scale(-1); }

/* ---- Splash ---- */
#screen-splash {
  justify-content: flex-start;
  padding: 24px 16px max(18px, env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.splash-en {
  font-family: var(--font-en);
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.02;
  margin: 0;
  color: #f4d03f;
  -webkit-text-stroke: 2.5px #0d47a1;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #0d47a1, 0 8px 10px rgba(0, 0, 0, 0.28);
}

.splash-en span {
  display: block;
  color: #ffe082;
}

.splash-ta {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 8px 0 0;
  text-shadow: 0 2px 0 var(--brown), 0 4px 8px rgba(0, 0, 0, 0.25);
}

.splash-mascot {
  width: min(52%, 230px);
  margin: 4px auto 0;
  filter: drop-shadow(0 14px 8px rgba(61, 155, 74, 0.35));
  animation: bob 2.4s ease-in-out infinite;
  z-index: 4;
  position: relative;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.wood-sign {
  position: relative;
  width: min(92%, 340px);
  min-height: 82px;
  margin-top: 4px;
  background: linear-gradient(#b47840, var(--wood) 42%, #6e4320);
  border: 5px solid #5a3518;
  border-radius: 14px;
  box-shadow: 0 9px 0 #4a2a12, 0 14px 18px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  padding: 14px 16px;
  overflow: hidden;
  z-index: 5;
}

.wood-sign img {
  position: absolute;
  inset: -18%;
  width: 136%;
  left: -18%;
  object-fit: contain;
  opacity: 0;
}

.wood-sign img.loaded {
  opacity: 0.38;
}

.wood-sign p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff8e7;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 2px 0 #4a2a12;
}

.tap-hint {
  margin-top: auto;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  color: var(--brown);
  background: rgba(255, 253, 247, 0.88);
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  box-shadow: 0 5px 0 var(--gold-deep);
}

.glow-tap {
  animation: pulse-glow 1.4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 0 rgba(230, 192, 74, 0.55); }
  50% { box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 10px rgba(230, 192, 74, 0); }
}

/* ---- Home ---- */
#screen-home .brand {
  text-align: center;
  padding: 14px 18px 12px;
  width: calc(100% - 36px);
  margin-bottom: 8px;
  z-index: 4;
}

#screen-home .brand h1 {
  margin: 6px 0 0;
  font-family: var(--font-en);
  font-size: 22px;
  color: var(--blue-deep);
  text-shadow: 0 2px 0 #fff;
}

#screen-home .brand p {
  margin: 4px 0 0;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 0 #fff;
}

.home-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.scrollable {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#screen-levels .scrollable {
  padding-bottom: 24px;
  gap: 14px;
}

.mode-card,
.level-card {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  background: rgba(255, 253, 247, 0.88);
  border-radius: var(--radius);
  padding: 12px 14px 12px 14px;
  border: 2.5px solid rgba(230, 192, 74, 0.7);
  box-shadow: 0 8px 0 rgba(107, 62, 31, 0.14), 0 14px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Home mode cards: honey wood frame + cream panel */
.mode-card,
.level-card {
  min-height: 78px;
  padding: 10px 12px;
  gap: 12px;
  border-radius: 18px;
  border: none;
  background:
    linear-gradient(145deg, rgba(255, 236, 200, 0.4), transparent 45%),
    repeating-linear-gradient(
      90deg,
      #c48a4a 0px,
      #d4a05c 3px,
      #e0b572 7px,
      #c99652 11px,
      #dbb06a 16px,
      #c48a4a 20px
    ),
    linear-gradient(180deg, #e0b070, #b87838);
  box-shadow:
    0 9px 0 #8a5528,
    0 14px 22px rgba(80, 45, 15, 0.26),
    inset 0 1px 0 rgba(255, 245, 220, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}

.mode-card::before,
.mode-card::after,
.level-card::before,
.level-card::after {
  content: "";
  pointer-events: none;
}

.mode-card::before,
.level-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* corner bolts */
  background:
    radial-gradient(circle at 14px 14px, #d8d8d8 0 5px, #6a6a6a 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 14px, #d8d8d8 0 5px, #6a6a6a 6px, transparent 7px),
    radial-gradient(circle at 14px calc(100% - 14px), #d8d8d8 0 5px, #6a6a6a 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #d8d8d8 0 5px, #6a6a6a 6px, transparent 7px);
  z-index: 4;
  opacity: 0.95;
}

.mode-card::after,
.level-card::after {
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7 0%, #fff6e6 100%);
  box-shadow:
    inset 0 0 0 2px rgba(40, 20, 8, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  z-index: 0;
}

.mode-card > *,
.level-card > * {
  position: relative;
  z-index: 2;
}

.mode-card .mode-ta {
  font-size: 17px;
  line-height: 1.25;
  color: #3a2412;
}

.mode-card .mode-en {
  font-size: 13px;
  color: #6b4a2e;
  margin-top: 2px;
}

.mode-card .coming {
  font-size: 12px;
  color: #7a5a3a;
  margin-top: 2px;
}

.mode-card .cta-pill {
  padding: 12px 18px;
  font-size: 15px;
}

.mode-card.locked,
.level-card.locked {
  filter: saturate(0.85);
}

.mode-card.locked .mode-en {
  font-weight: 700;
  font-size: 15px;
  color: #3a2412;
}

#screen-home .scrollable {
  gap: 14px;
}

.level-card {
  /* wood frame comes from shared .mode-card,.level-card rules */
  min-height: 82px;
  padding: 10px 12px;
  gap: 12px;
  border: none;
  border-radius: 18px;
}

.level-card .lv-ta {
  font-size: 19px;
  line-height: 1.25;
  color: #3a2412;
}

.level-card .lv-en,
.level-card .lv-kicker,
.level-card .coming {
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
  color: #6b4a2e;
}

.level-card .lv-unlock-tip {
  font-family: var(--font-en);
  font-size: 11px;
  line-height: 1.25;
  color: #8a5528;
  margin-top: 4px;
  font-weight: 600;
}

.level-card .cta-pill {
  padding: 13px 20px;
  font-size: 16px;
}

.level-card.open {
  /* slightly warmer cream already from ::after */
}

.level-card.locked .lv-unlock-tip {
  color: #5c3a18;
}

.mode-card.enabled {
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 236, 200, 0.45), transparent 42%),
    repeating-linear-gradient(
      92deg,
      #c48a4a 0px,
      #d4a05c 3px,
      #e0b572 7px,
      #c99652 11px,
      #dbb06a 16px,
      #c48a4a 20px
    ),
    linear-gradient(180deg, #e8c07a, #c48a4a);
  z-index: 3;
}

.mode-card.enabled::after {
  background: linear-gradient(180deg, #f3fff6 0%, #e6ffec 100%);
  box-shadow:
    inset 0 0 0 2px rgba(70, 160, 95, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mode-balloon {
  width: 52px;
  height: 60px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.2));
  position: relative;
  z-index: 2;
}

.mode-copy,
.level-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.mode-ta,
.lv-ta {
  font-weight: 800;
  font-size: 16px;
}

.mode-en,
.lv-en,
.coming {
  font-family: var(--font-en);
  font-size: 13px;
}

.coming {
  color: #6d6d6d;
}

.lv-kicker {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d6e4a;
}

.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(40, 42, 48, 0.28);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}

.padlock {
  width: 28px;
  height: 32px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35));
}

.home-mascot {
  position: absolute;
  left: -6px;
  bottom: 6px;
  width: min(42%, 168px);
  z-index: 6;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.28));
}

/* ---- Letter chips ---- */
#letter-grid,
#level2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  padding: 8px 18px 8px;
  position: relative;
  z-index: 3;
}

.glyph-node {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--ivory) 62%, #f3e2c0 100%);
  border: 4px solid #42a5f5;
  box-shadow: 0 6px 0 rgba(21, 101, 192, 0.28), inset 0 4px 6px rgba(255, 255, 255, 0.7);
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}

.glyph-node .glyph {
  font-weight: 800;
  font-size: clamp(18px, 5.2vw, 24px);
  color: var(--brown);
  text-shadow: 0 1px 0 #fff;
  position: relative;
  z-index: 1;
}

.glyph-node.open {
  border-color: var(--green-cta);
}

.glyph-node.current {
  background: radial-gradient(circle at 32% 28%, #fff 0%, #e8f9ec 70%);
  border-color: var(--green-cta);
  box-shadow:
    0 0 0 5px rgba(78, 203, 113, 0.45),
    0 6px 0 var(--green-deep),
    inset 0 4px 6px rgba(255, 255, 255, 0.7);
}

.glyph-node.done {
  background: radial-gradient(circle at 32% 28%, #d8f8e2 0%, var(--green-cta) 100%);
  border-color: var(--green-deep);
}

.glyph-node.done .glyph {
  color: #14532d;
}

.glyph-node.locked {
  border-color: #bdbdbd;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12);
}

.glyph-node.locked .glyph {
  color: #757575;
}

.glyph-node .lock-overlay {
  border-radius: 50%;
  justify-content: center;
  padding: 0;
  background: rgba(45, 45, 48, 0.48);
}

.glyph-node .padlock {
  width: 18px;
  height: 22px;
}

.check-badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8ef0a8, var(--green-deep));
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: 0 2px 0 var(--green-deep);
}

.check-ico {
  width: 12px;
  height: 12px;
}

.map-hint {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: calc(100% - 28px);
  background: rgba(255, 253, 247, 0.92);
  border-radius: 20px;
  padding: 8px 14px 10px 8px;
  margin-bottom: 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 7px 0 var(--gold-deep);
  position: relative;
  z-index: 5;
}

.map-hint.wood-accent {
  border-color: var(--wood);
  box-shadow: 0 7px 0 #5a3518;
}

.map-hint p {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.map-hint img {
  width: 78px;
  height: 86px;
  object-fit: contain;
  margin-bottom: 0;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.2));
}

/* ---- Intro ---- */
#screen-intro {
  padding: 4px 14px max(10px, env(safe-area-inset-bottom, 0px));
  justify-content: flex-start;
  gap: 0;
}

.intro-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  margin-top: 2px;
}

.intro-card {
  width: 92%;
  max-width: 340px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 16px 88px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  border-width: 6px;
  border-radius: 22px;
  box-shadow:
    0 0 0 3px #8b5a2b,
    0 10px 0 #6b3e1f,
    0 18px 28px rgba(107, 62, 31, 0.28);
  background:
    linear-gradient(180deg, #fffdf6 0%, #fff6e4 55%, #f7ebd2 100%);
}

.intro-glyph-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
  margin-top: 6px;
}

.big-glyph {
  font-size: clamp(78px, 24vw, 118px);
  font-weight: 800;
  color: var(--letter-red);
  line-height: 1;
  text-shadow: 0 4px 0 #b71c1c, 0 8px 0 rgba(183, 28, 28, 0.25);
  -webkit-text-stroke: 1px #7f1512;
  margin: 0;
  position: relative;
  z-index: 2;
}

#screen-intro .speaker-btn {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
}

.intro-example-line {
  display: block;
  z-index: 2;
  margin: 10px 8px 4px;
  text-align: center;
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 800;
  color: var(--letter-red);
  line-height: 1.25;
}

.intro-word-en {
  display: none; /* mockup has Tamil example only */
  z-index: 2;
}

.intro-word-hero {
  z-index: 2;
  width: 100%;
  flex: 1 1 auto;
  min-height: 160px;
  display: grid;
  place-items: center;
  margin-top: 6px;
  padding: 4px 6px 0;
}

.intro-word-hero img,
.intro-word-hero .word-fallback {
  width: min(100%, 280px);
  height: min(42vh, 260px);
  max-height: 260px;
  border-radius: 18px;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
}

.intro-word-hero .word-fallback {
  display: grid;
  place-items: center;
  font-size: 48px;
  font-weight: 800;
  color: var(--letter-red);
  background: rgba(255, 255, 255, 0.55);
  border: 3px solid var(--gold);
}

.intro-mascot-wrap {
  position: absolute;
  left: 2%;
  bottom: 8%;
  width: 42%;
  max-width: 168px;
  z-index: 6;
  margin: 0;
  align-self: auto;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.intro-mascot-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

#screen-intro #btn-intro-start {
  margin-top: 10px;
  margin-bottom: 4px;
  z-index: 7;
  flex: 0 0 auto;
}

/* ---- Play ---- */
#screen-play {
  padding: 10px 10px 0;
}

.play-banner {
  width: calc(100% - 8px);
  padding: 8px 12px 8px 8px;
  text-align: left;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-balloon-wrap {
  position: relative;
  width: 54px;
  height: 72px;
  flex: 0 0 auto;
  z-index: 2;
}

.banner-balloon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner-glyph {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  line-height: 1;
}

.banner-copy {
  flex: 1;
  min-width: 0;
  z-index: 2;
}

.play-banner h2 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 1px 0 #fff;
}

.play-banner p {
  margin: 2px 0 0;
  font-family: var(--font-en);
  font-size: 13px;
}

.play-hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 0;
  z-index: 5;
  position: relative;
}

.progress-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 253, 247, 0.92);
  border-radius: 18px;
  padding: 7px 14px;
  min-width: 114px;
  border: 2px solid var(--gold);
  box-shadow: 0 5px 0 var(--gold-deep);
}

#play-progress-label {
  font-weight: 800;
  font-size: 15px;
}

.dots {
  display: flex;
  gap: 3px;
  width: min(168px, 48vw);
}

.dot {
  flex: 1 1 0;
  height: 10px;
  min-width: 0;
  border-radius: 3px;
  border: 2px solid #f4a261;
  background: transparent;
}

.dot.filled {
  background: linear-gradient(180deg, #ffd180, #f4a261);
  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.28);
}

#balloon-field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 126px;
  top: 148px;
  z-index: 3;
  overflow: hidden;
}

.balloon {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  background: none;
  border: none;
  z-index: 3;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 72px;
  min-height: 96px;
}

.balloon-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.22));
}

.balloon-letter {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: calc(var(--balloon-size, 100px) * 0.42);
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 0 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}

.balloon:not(.has-overlay) .balloon-letter {
  display: none;
}

.balloon.popping {
  animation: pop 0.22s ease-out forwards;
  pointer-events: none;
}

.balloon.shake,
.glyph-node.shake {
  animation: shake 0.45s ease-in-out;
}

@keyframes pop {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.28); opacity: 0.7; }
  100% { transform: scale(0.2); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-8px) rotate(-6deg); }
  50% { transform: translateX(8px) rotate(6deg); }
  75% { transform: translateX(-5px) rotate(-3deg); }
}

.pop-bit {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  animation: bits 0.5s ease-out forwards;
  z-index: 5;
}

@keyframes bits {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}

.plus-one {
  position: absolute;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--gold-deep);
  font-size: 28px;
  text-shadow: 0 2px 0 #fff;
  pointer-events: none;
  animation: floatup 0.7s ease-out forwards;
  z-index: 6;
  transform: translate(-50%, -50%);
}

@keyframes floatup {
  to {
    transform: translate(-50%, -90px);
    opacity: 0;
  }
}

.coach {
  position: absolute;
  left: 4px;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  max-width: 72%;
}

.coach.hidden {
  opacity: 0;
}

.coach-mascot {
  width: 108px;
  height: 108px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.25));
  flex: 0 0 auto;
}

.speech {
  background: rgba(255, 253, 247, 0.95);
  border: 3px solid var(--gold);
  border-radius: 18px 18px 18px 6px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 6px 0 var(--gold-deep);
  margin-bottom: 10px;
}

.coach.good .speech {
  border-color: var(--green-cta);
  color: #1b5e20;
}

.coach.retry .speech {
  border-color: var(--coral);
  color: #b71c1c;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(21, 50, 72, 0.45);
  display: grid;
  place-items: center;
  padding: 24px;
}

.overlay[hidden] {
  display: none !important;
}

.overlay-card {
  width: 100%;
  max-width: 320px;
  padding: 22px 18px;
  text-align: center;
}

.overlay-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-size: 24px;
  color: var(--blue-deep);
  position: relative;
  z-index: 2;
}

.overlay-card .cta-wide {
  width: 100%;
  margin: 10px 0 0;
}

/* ---- Complete screens ---- */
.banner-done {
  margin-top: 14%;
  padding: 18px 22px 16px;
  text-align: center;
  width: min(90%, 340px);
  z-index: 4;
}

.done-cheer {
  margin: 0.35rem 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 4.2vw, 1.55rem);
  letter-spacing: 0.02em;
  color: #e85d04;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: cheerPop 0.55s ease-out both;
}
@keyframes cheerPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.banner-done h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--brown);
  text-shadow: 0 1px 0 #fff;
}

.complete-en {
  font-family: var(--font-en);
  margin: 6px 0 0;
  font-weight: 700;
  color: var(--blue-deep);
}

.stars-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 4px;
}

.xp-chip {
  display: inline-block;
  font-family: var(--font-en);
  background: linear-gradient(180deg, #fff, #fff6d0);
  color: var(--gold-deep);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  margin-top: 8px;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 var(--gold-deep);
}

#screen-letterComplete,
#screen-levelComplete {
  justify-content: flex-start;
  padding-bottom: 12px;
}

.done-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-top: -8px;
  width: 84%;
  z-index: 5;
  position: relative;
}

.done-art img {
  width: 52%;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.25));
}

.level2-lockbar {
  position: absolute;
  inset: 0;
  background: rgba(32, 34, 40, 0.62);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 7;
  font-weight: 800;
  text-align: center;
  padding: 24px;
}

.level2-lockbar .padlock {
  width: 64px;
  height: 72px;
}

.level2-lockbar p {
  margin: 12px 0 0;
  font-family: var(--font-en);
  font-size: 18px;
  text-shadow: 0 2px 0 #000;
}

/* ---- Settings + toast ---- */
#settings-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
}

#settings-modal[hidden] {
  display: none !important;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 46, 0.5);
}

.settings-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 300px);
  padding: 22px 18px;
  z-index: 1;
  text-align: center;
}

.settings-sheet h3 {
  margin: 0 0 12px;
  font-family: var(--font-en);
  position: relative;
  z-index: 2;
}

.toggle {
  width: 64px;
  height: 34px;
  border-radius: 999px;
  background: var(--lock-grey);
  position: relative;
  margin: 8px auto 16px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle.on {
  background: linear-gradient(180deg, #8ef0a8, var(--green-cta));
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle.on::after {
  left: 33px;
}

.danger {
  background: none;
  color: var(--letter-red);
  font-weight: 800;
  text-decoration: underline;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.settings-sheet .cta-wide {
  width: 100%;
  margin: 8px 0 0;
}

#toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(255, 253, 247, 0.96);
  color: var(--brown);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 10px 16px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  max-width: 86%;
  text-align: center;
  box-shadow: 0 6px 0 var(--gold-deep);
  transition: opacity 0.2s, transform 0.2s;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.spacer {
  flex: 1;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* Floral play banner art from asset pack */
.play-banner.has-art {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.play-banner.has-art::before,
.play-banner.has-art::after { display: none; }
.play-banner-art {
  width: min(92%, 360px);
  margin: 0 auto;
  filter: drop-shadow(0 8px 12px rgba(107,62,31,0.28));
  pointer-events: none;
}
.play-banner.has-art .play-banner-text {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 78%;
  text-align: center;
  pointer-events: none;
}
.play-banner.has-art .play-banner-text h2,
.play-banner.has-art .play-banner-text p {
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0;
  font-size: 1px;
  margin: 0;
  opacity: 0;
}



/* Intro layout v2 (all letters): smaller corners, elephant BL, START raised */
#screen-intro.intro-layout-v2 .intro-card .corner-fl {
  width: 42px;
  height: 42px;
  opacity: 0.88;
}
#screen-intro.intro-layout-v2 .intro-card .corner-fl.tl { top: 2px; left: 2px; }
#screen-intro.intro-layout-v2 .intro-card .corner-fl.tr { top: 2px; right: 2px; }
#screen-intro.intro-layout-v2 .intro-card .corner-fl.bl { bottom: 2px; left: 2px; }
#screen-intro.intro-layout-v2 .intro-card .corner-fl.br { bottom: 2px; right: 2px; }

#screen-intro.intro-layout-v2 .intro-stage {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-top: 4px;
  padding-bottom: 0;
  width: 100%;
}

/* yellow board ~1/4 bigger than pack12 */
#screen-intro.intro-layout-v2 .intro-wood-frame {
  flex: 0 0 auto;
  width: 94%;
  max-width: 360px;
  margin: 0 auto;
  z-index: 3;
}

#screen-intro.intro-layout-v2 .intro-card {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: min(72vh, 580px);
  padding: 18px 14px 20px;
  margin: 0;
  overflow: hidden;
  border: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  background: linear-gradient(180deg, #fffdf6 0%, #fff6e4 55%, #f7ebd2 100%);
}

#screen-intro.intro-layout-v2 .intro-card::after {
  display: none; /* drop dashed gold inner from floral-card */
}

#screen-intro.intro-layout-v2 .intro-card .corner-fl {
  display: none !important;
}

#screen-intro.intro-layout-v2 .big-glyph {
  font-size: clamp(76px, 21vw, 110px);
}

#screen-intro.intro-layout-v2 .intro-example-line {
  margin: 6px 6px 2px;
  font-size: clamp(18px, 5vw, 24px);
}

#screen-intro.intro-layout-v2 .intro-word-hero {
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
}

#screen-intro.intro-layout-v2 .intro-word-hero img,
#screen-intro.intro-layout-v2 .intro-word-hero .word-fallback {
  width: min(100%, 280px);
  height: min(32vh, 240px);
  max-height: 240px;
}

/* bigger elephant, phone bottom-left */
#screen-intro.intro-layout-v2 .intro-mascot-wrap {
  position: absolute;
  left: 0;
  bottom: max(2px, env(safe-area-inset-bottom, 0px));
  top: auto;
  margin: 0;
  width: 52%;
  max-width: 210px;
  z-index: 9;
  pointer-events: none;
}

/* START: raised, nudged left from far right */
#screen-intro.intro-layout-v2 #btn-intro-start {
  position: absolute;
  right: 22%;
  bottom: max(100px, calc(env(safe-area-inset-bottom, 0px) + 96px));
  width: auto !important;
  min-width: 0;
  max-width: 140px;
  margin: 0;
  padding: 11px 22px;
  font-size: 15px;
  z-index: 9;
}

/* intro: mascot overlaps parchment like mockup */
#screen-intro .intro-card {
  z-index: 3;
  position: relative;
}
#screen-intro .intro-stage {
  z-index: 2;
}


/* Shared realistic wood frame + bolts (intro + level complete) */
.wood-frame {
  position: relative;
  padding: 13px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 236, 200, 0.4), transparent 45%),
    repeating-linear-gradient(
      90deg,
      #c48a4a 0px,
      #d4a05c 3px,
      #e0b572 7px,
      #c99652 11px,
      #dbb06a 16px,
      #c48a4a 20px
    ),
    linear-gradient(180deg, #e0b070, #b87838);
  box-shadow:
    0 10px 0 #8a5528,
    0 16px 28px rgba(80, 45, 15, 0.28),
    inset 0 1px 0 rgba(255, 245, 220, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.wood-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 170, 0.22);
  box-shadow: inset 0 0 0 2px rgba(40, 20, 8, 0.35);
  pointer-events: none;
  z-index: 1;
}
.wood-frame > .wood-bolt {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 5;
  background:
    radial-gradient(circle at 32% 28%, #fff6e0 0 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, #c0c0c0 0%, #8a8a8a 38%, #4a4a4a 72%, #2a2a2a 100%);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 2px rgba(0, 0, 0, 0.45);
}
.wood-frame > .wood-bolt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: linear-gradient(90deg, #2a2a2a, #666, #2a2a2a);
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
.wood-frame > .wood-bolt.tl { top: 6px; left: 6px; }
.wood-frame > .wood-bolt.tr { top: 6px; right: 6px; }
.wood-frame > .wood-bolt.bl { bottom: 6px; left: 6px; }
.wood-frame > .wood-bolt.br { bottom: 6px; right: 6px; }

/* ---- Level Complete mockup (pack15) ---- */
#screen-levelComplete {
  justify-content: flex-start;
  align-items: center;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

#screen-levelComplete .lvl-confetti {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 12% 18%, #ff5a7a 0 5px, transparent 6px),
    radial-gradient(circle at 78% 14%, #ffd54f 0 6px, transparent 7px),
    radial-gradient(circle at 88% 32%, #4fc3f7 0 5px, transparent 6px),
    radial-gradient(circle at 18% 42%, #81c784 0 5px, transparent 6px),
    radial-gradient(circle at 62% 22%, #ce93d8 0 5px, transparent 6px),
    radial-gradient(circle at 40% 12%, #ff8a65 0 4px, transparent 5px),
    radial-gradient(circle at 92% 55%, #ffeb3b 0 5px, transparent 6px),
    radial-gradient(circle at 8% 68%, #f48fb1 0 4px, transparent 5px),
    radial-gradient(circle at 70% 70%, #64b5f6 0 5px, transparent 6px),
    radial-gradient(circle at 30% 78%, #aed581 0 4px, transparent 5px);
  opacity: 0.95;
}

/* Realistic wood frame + corner bolts */
#screen-levelComplete .lvl-wood-frame {
  position: relative;
  z-index: 4;
  width: min(92%, 340px);
  margin-top: 8%;
  /* background/bolts come from shared .wood-frame */
}

#screen-levelComplete .lvl-wood-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 170, 0.22);
  box-shadow: inset 0 0 0 2px rgba(40, 20, 8, 0.35);
  pointer-events: none;
  z-index: 1;
}

#screen-levelComplete .wood-bolt {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 5;
  background:
    radial-gradient(circle at 32% 28%, #fff6e0 0 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, #c0c0c0 0%, #8a8a8a 38%, #4a4a4a 72%, #2a2a2a 100%);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -2px 2px rgba(0, 0, 0, 0.45);
}

#screen-levelComplete .wood-bolt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: linear-gradient(90deg, #2a2a2a, #666, #2a2a2a);
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}

#screen-levelComplete .wood-bolt.tl { top: 6px; left: 6px; }
#screen-levelComplete .wood-bolt.tr { top: 6px; right: 6px; }
#screen-levelComplete .wood-bolt.bl { bottom: 6px; left: 6px; }
#screen-levelComplete .wood-bolt.br { bottom: 6px; right: 6px; }

#screen-levelComplete .lvl-banner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 16px 16px 14px;
  text-align: center;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #fffdf8 0%, #fff6e0 55%, #f5e6c4 100%);
  border: 2px solid rgba(120, 70, 30, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}


#screen-levelComplete .lvl-banner h2 {
  margin: 0;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  color: var(--letter-red);
  text-shadow: 0 1px 0 #fff;
}

#screen-levelComplete .complete-en {
  margin: 6px 0 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  color: #3e2723;
}

#screen-levelComplete .lvl-stars {
  position: relative;
  z-index: 4;
  margin: 18px 0 8px;
  gap: 14px;
  filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.75));
}

#screen-levelComplete .lvl-stars .star {
  width: 48px;
  height: 48px;
  transform: scale(1);
}

#screen-levelComplete .lvl-stars .star.mid {
  width: 58px;
  height: 58px;
  transform: translateY(-10px);
}

#screen-levelComplete .lvl-rewards {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 4px 8px;
  min-height: 0;
  margin-top: auto;
}

#screen-levelComplete .lvl-elephant {
  width: 48%;
  max-width: 200px;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.28));
}

#screen-levelComplete .lvl-elephant img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

#screen-levelComplete .lvl-gift-col {
  width: 42%;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
}

#screen-levelComplete .lvl-gift-col #gift-img {
  width: 88%;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

#screen-levelComplete .xp-wood {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #8d6e4a 0%, #5d4037 55%, #3e2723 100%);
  border: 2px solid #a1887f;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 4px 0 #2d1b12, inset 0 1px 0 rgba(255, 255, 255, 0.25);
  letter-spacing: 0.02em;
}

#screen-levelComplete #btn-next-level {
  position: relative;
  z-index: 6;
  width: min(86%, 300px);
  margin-top: 4px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

#screen-levelComplete #btn-victory-map[hidden] {
  display: none !important;
}

/* —— Draw the Letter (trace) —— */
#screen-trace {
  padding-bottom: 8px;
}

#screen-trace .trace-banner {
  position: relative;
  z-index: 6;
  margin-top: 48px;
  width: min(94%, 400px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

#screen-trace .trace-word-pic {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #fff8e8;
  border: 2px solid #c9a06a;
  box-shadow: 0 3px 0 #8d6e4a;
}
#screen-trace .trace-word-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
#screen-trace .trace-banner-glyph {
  font-family: var(--font-ta);
  font-weight: 800;
  font-size: 18px;
  color: #6b3e1f;
  margin-right: 6px;
}
#screen-trace .banner-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  flex: 1 1 auto;
}
#screen-trace .banner-copy h2 {
  font-size: 18px;
  margin: 0;
}



#screen-trace .trace-speaker {
  margin-left: auto;
  flex: 0 0 auto;
}

#screen-trace .trace-hud {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 8;
  pointer-events: none;
}

#screen-trace .trace-hud .icon-btn {
  pointer-events: auto;
}

.trace-stage {
  position: relative;
  flex: 1 1 auto;
  width: min(96%, 420px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  margin-top: 4px;
  margin-bottom: 8px;
}

.trace-wood-frame {
  width: 100%;
  flex: 1 1 auto;
  min-height: 300px;
  max-height: none;
  height: 100%;
  display: flex;
  padding: 12px;
  box-sizing: border-box;
}

.trace-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe8c4 100%);
  box-shadow: inset 0 2px 8px rgba(107, 62, 31, 0.12);
  touch-action: none;
}

#trace-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.trace-mascot {
  position: absolute;
  left: -10px;
  bottom: -6px;
  width: min(48%, 176px);
  height: auto;
  background: transparent;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.28));
  z-index: 5;
}

.trace-feedback {
  min-height: 22px;
  margin: 4px 12px 0;
  font-family: var(--font-ta);
  font-weight: 800;
  font-size: 18px;
  color: #6b3e1f;
  text-align: center;
}

.trace-feedback.good {
  color: #2e9b50;
}

.trace-feedback.retry {
  color: #d45a4c;
}

.trace-attempts {
  min-height: 16px;
  margin: 0 12px 2px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  color: #8d6e4a;
  text-align: center;
}

.trace-actions {
  display: flex;
  gap: 10px;
  width: min(92%, 340px);
  margin: 4px 0 10px;
  z-index: 6;
}

.trace-actions .cta-wide {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  font-size: 16px;
  padding: 12px 8px;
}

#trace-struggle[hidden],
#trace-success[hidden] {
  display: none !important;
}

@media (max-height: 700px) {
  .trace-wood-frame {
    min-height: 240px;
    max-height: none;
  }
  .trace-mascot {
    width: min(44%, 150px);
  }
}

#screen-trace #trace-banner-en { display: none; }