/* SCENE2 : 지구 자음 탐험 화면 */
    .scene-2-consonant {
      z-index: 1;
      background:
        radial-gradient(circle at 20% 22%, rgba(111, 232, 255, 0.24), transparent 22%),
        radial-gradient(circle at 76% 18%, rgba(124, 255, 143, 0.20), transparent 20%),
        radial-gradient(circle at 50% 82%, rgba(41, 145, 255, 0.22), transparent 32%),
        linear-gradient(135deg, #05194d 0%, #0b4f75 48%, #0d7d68 100%);
    }

    .scene-2-consonant::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 24%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 76%, rgba(255,255,255,0.16) 0 1px, transparent 2px);
      pointer-events: none;
      opacity: 0.9;
    }

    .scene2-panel {
      position: absolute;
      inset: 4.2% 5.2%;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 1.6%;
      padding: 2.1% 2.4%;
      border-radius: 34px;
      border: 4px solid rgba(255,255,255,0.82);
      background:
        linear-gradient(135deg, rgba(22, 112, 220, 0.10), rgba(30, 184, 132, 0.10)),
        repeating-linear-gradient(-8deg, rgba(255,255,255,0.02) 0 6px, rgba(255,255,255,0.003) 6px 13px);
      box-shadow:
        0 16px 32px rgba(0,0,0,0.34),
        inset 0 0 0 5px rgba(80, 226, 255, 0.20);
    }

    .scene2-title {
      margin: 0;
      text-align: center;
      font-size: clamp(34px, 5.75vw, 78px);
      line-height: 1;
      letter-spacing: 0.035em;
      color: #ffe600;
      background-image:
        repeating-linear-gradient(90deg,
          rgba(255, 246, 0, 1) 0 6px,
          rgba(255, 216, 0, 1) 6px 12px,
          rgba(255, 252, 104, 1) 12px 18px,
          rgba(255, 198, 0, 1) 18px 24px);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 2px rgba(18, 92, 56, 0.88);
      text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(255, 214, 88, 0.34),
        0 3px 0 rgba(35, 117, 55, 0.56),
        1px -1px 0 rgba(255, 160, 73, 0.20),
        -1px 1px 0 rgba(65, 171, 75, 0.20),
        0 0 10px rgba(255, 238, 130, 0.34);
      font-family: "Gaegu", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 700;
      font-style: normal;
      transform: rotate(-0.8deg);
      filter: drop-shadow(0 2px 0 rgba(0,0,0,0.16));
    }

    .scene2-guide {
      justify-self: center;
      margin: 0;
      padding: 0.45em 1.3em;
      border-radius: 999px;
      background: rgba(255,255,255,0.88);
      color: #134b77;
      font-size: clamp(17px, 2.35vw, 32px);
      font-weight: 900;
      box-shadow: 0 5px 0 rgba(34, 127, 134, 0.40);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .consonant-main {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 2.3%;
      min-height: 0;
      align-items: stretch;
    }

    .consonant-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-auto-rows: minmax(72px, 1fr);
      gap: clamp(8px, 1vw, 18px);
      align-content: center;
    }

    .consonant-button {
      border: 4px solid rgba(255,255,255,0.86);
      border-radius: 24px;
      cursor: pointer;
      margin-block: 5mm;
      min-height: 42px;
      color: #15315f;
      font-size: clamp(34px, 5vw, 72px);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      line-height: 1;
      text-shadow:
        1px 1px 0 rgba(255,255,255,0.96),
        -1px 0 0 rgba(255,255,255,0.92),
        0 3px 0 rgba(83, 151, 205, 0.28);
      background:
        repeating-linear-gradient(-11deg, rgba(255,255,255,0.22) 0 4px, rgba(255,255,255,0.02) 4px 10px),
        linear-gradient(150deg, var(--card-a), var(--card-b));
      box-shadow:
        0 7px 0 rgba(28, 76, 107, 0.38),
        0 12px 14px rgba(0,0,0,0.20),
        inset 0 0 0 3px rgba(255,255,255,0.30);
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
      touch-action: manipulation;
    }

    .consonant-button:hover,
    .consonant-button:focus-visible,
    .consonant-button.is-selected {
      transform: translateY(-4px) scale(1.055);
      filter: brightness(1.12) saturate(1.08);
      outline: none;
      box-shadow:
        0 9px 0 rgba(28, 76, 107, 0.34),
        0 0 18px rgba(255,255,190,0.85),
        inset 0 0 0 3px rgba(255,255,255,0.38);
    }

    .consonant-grid .consonant-button:nth-child(-n+7) {
      position: relative;
      top: 5mm;
    }

    .consonant-display {
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 3%;
      min-width: 0;
      margin: 5mm;
    }

    .selected-letter-card {
      display: grid;
      place-items: center;
      border-radius: 34px;
      border: 5px solid rgba(255,255,255,0.88);
      background:
        radial-gradient(circle at 34% 27%, rgba(255,255,255,0.34), transparent 26%),
        repeating-linear-gradient(10deg, rgba(255,255,255,0.12) 0 5px, rgba(255,255,255,0.02) 5px 14px),
        linear-gradient(155deg, rgba(179, 245, 255, 0.92), rgba(118, 229, 153, 0.88));
      box-shadow: inset 0 0 0 6px rgba(61, 153, 255, 0.20), 0 12px 20px rgba(0,0,0,0.22);
      min-height: 0;
    }

    .selected-letter {
      font-size: clamp(96px, 16vw, 230px);
      font-weight: 900;
      line-height: 1;
      color: #143d83;
      -webkit-text-stroke: 3px rgba(255,255,255,0.90);
      text-shadow:
        0 7px 0 rgba(54, 137, 172, 0.36),
        0 0 22px rgba(255,255,255,0.84);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .selected-letter.pop {
      animation: letterPop 360ms ease both;
    }

    @keyframes letterPop {
      0% { transform: scale(0.86); filter: brightness(1); }
      65% { transform: scale(1.08); filter: brightness(1.12); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    .selected-message {
      margin: 2mm 5mm;
      min-height: 2.2em;
      padding: 0.48em 0.75em;
      border-radius: 22px;
      background: rgba(255,255,255,0.90);
      color: #15446f;
      text-align: center;
      font-size: clamp(15px, 1.7vw, 24px);
      font-weight: 900;
      box-shadow: 0 6px 0 rgba(37, 118, 150, 0.30);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      white-space: nowrap;
    }


    /* SCENE2 하위 병렬 학습 구조 v0.34.2 */
    .scene2-subscene-shell {
      position: absolute;
      inset: 23.2% 6.5% 16.2% 6.5%;
      display: grid;
      grid-template-rows: 1fr;
      gap: 0;
      pointer-events: auto;
    }

    /* 현재 하위 씬에 전용 상단 레이어가 있을 때만 2행 구조를 사용합니다. */
    .scene2-subscene-shell.has-activity-header {
      grid-template-rows: auto 1fr;
      gap: clamp(7px, 1vw, 14px);
    }

    .scene2-point-track[hidden] {
      display: none !important;
    }

    .scene2-point-track {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: clamp(5px, 0.75vw, 12px);
      align-items: center;
      min-height: clamp(50px, 5.4vw, 78px);
      padding: clamp(4px, 0.45vw, 7px) clamp(8px, 0.8vw, 14px);
      border: 3px solid rgba(255,255,255,0.82);
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 5px 0 rgba(18,82,116,0.28), 0 9px 15px rgba(0,0,0,0.14);
      pointer-events: none;
      overflow: hidden;
    }

    .scene2-point-slot {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      height: clamp(38px, 4.35vw, 62px);
      border-radius: 999px;
      background: rgba(255,255,255,0.38);
      border: 2px dashed rgba(34,103,139,0.24);
    }

    .scene2-point-slot img {
      width: 86%;
      height: 86%;
      object-fit: contain;
      opacity: 0;
      transform: translateY(-5px) scale(0.35);
      filter: drop-shadow(0 4px 3px rgba(65,58,26,0.28));
      transition: opacity 220ms ease, transform 420ms cubic-bezier(.2,.85,.25,1.35);
      user-select: none;
      -webkit-user-drag: none;
    }

    .scene2-point-slot.is-earned {
      background: linear-gradient(160deg, rgba(255,249,176,0.94), rgba(178,247,255,0.90));
      border-style: solid;
      border-color: rgba(255,255,255,0.92);
      box-shadow: inset 0 0 0 3px rgba(255,255,255,0.34), 0 0 11px rgba(255,222,90,0.54);
    }

    .scene2-point-slot.is-earned img {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .scene2-point-slot.just-earned img {
      animation: scene2BurgerPointPop 560ms cubic-bezier(.2,.85,.25,1.35) both;
    }

    @keyframes scene2BurgerPointPop {
      0% { opacity: 0; transform: translateY(-14px) scale(.2) rotate(-12deg); }
      70% { opacity: 1; transform: translateY(2px) scale(1.12) rotate(4deg); }
      100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
    }

    .scene2-activity-stage {
      position: relative;
      min-height: 0;
      border-radius: 30px;
      border: 4px solid rgba(255,255,255,0.74);
      background: rgba(255,255,255,0.18);
      box-shadow: inset 0 0 0 5px rgba(85, 222, 255, 0.13), 0 12px 20px rgba(0,0,0,0.20);
      overflow: hidden;
    }

    .scene2-activity-panel {
      position: absolute;
      inset: 0;
      display: none;
      min-height: 0;
      padding: clamp(10px, 1.4vw, 20px);
    }

    .scene2-activity-panel.is-active {
      display: block;
    }

    .scene2-activity-panel .consonant-main {
      width: 100%;
      height: 100%;
    }

    .scene2-activity-title {
      margin: 0 0 0.45em 0;
      text-align: center;
      color: #fff7a8;
      font-size: clamp(18px, 2.1vw, 32px);
      font-weight: 900;
      text-shadow: 0 3px 0 rgba(9, 76, 86, 0.48), 0 0 12px rgba(0,0,0,0.30);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .scene2-activity-note {
      margin: 0 auto 0.7em auto;
      width: fit-content;
      max-width: 92%;
      padding: 0.4em 0.9em;
      border-radius: 999px;
      background: rgba(255,255,255,0.86);
      color: #17466f;
      font-size: clamp(13px, 1.35vw, 22px);
      font-weight: 900;
      text-align: center;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .mini-activity-board {
      height: calc(100% - 4.9em);
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 3%;
      align-items: center;
    }

    .mini-target-card,
    .mini-result-card {
      display: grid;
      place-items: center;
      min-height: 0;
      height: 100%;
      border-radius: 28px;
      border: 5px solid rgba(255,255,255,0.84);
      background: linear-gradient(155deg, rgba(255,244,145,0.92), rgba(129,232,255,0.86));
      box-shadow: 0 10px 16px rgba(0,0,0,0.18), inset 0 0 0 5px rgba(255,255,255,0.24);
      color: #143d83;
      font-size: clamp(76px, 11vw, 180px);
      font-weight: 900;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      text-shadow: 0 5px 0 rgba(54, 137, 172, 0.28), 0 0 16px rgba(255,255,255,0.76);
    }

    .mini-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(8px, 1vw, 16px);
      align-content: center;
      height: 100%;
    }

    .mini-choice-button,
    .mini-action-button,
    .mini-line-card {
      border: 4px solid rgba(255,255,255,0.84);
      border-radius: 24px;
      background: linear-gradient(150deg, #fff3a5, #9fefff);
      color: #14345f;
      box-shadow: 0 7px 0 rgba(28, 76, 107, 0.34), 0 10px 14px rgba(0,0,0,0.16);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      cursor: pointer;
      transition: transform 160ms ease, filter 160ms ease;
      touch-action: manipulation;
    }

    .mini-choice-button {
      min-height: 76px;
      font-size: clamp(36px, 5.4vw, 82px);
    }

    .mini-choice-button:hover,
    .mini-choice-button:focus-visible,
    .mini-action-button:hover,
    .mini-action-button:focus-visible,
    .mini-line-card:hover,
    .mini-line-card:focus-visible {
      transform: translateY(-3px) scale(1.035);
      filter: brightness(1.10);
      outline: none;
    }

    .shape-sample-grid {
      height: calc(100% - 4.9em);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(8px, 1.1vw, 18px);
      align-items: center;
    }

    .shape-sample-grid .mini-choice-button:nth-child(4) {
      background: linear-gradient(150deg, #ffc9d9, #fff0a6);
      transform: rotate(-5deg);
    }

    .line-match-board {
      height: calc(100% - 4.9em);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 2.5%;
      align-items: center;
    }

    .line-card-column {
      display: grid;
      gap: clamp(8px, 1vw, 14px);
    }

    .mini-line-card {
      min-height: 58px;
      font-size: clamp(28px, 4vw, 58px);
    }

    .line-connector-hint {
      color: #fff7a8;
      font-size: clamp(28px, 4vw, 60px);
      text-shadow: 0 3px 0 rgba(0,0,0,0.24);
      font-weight: 900;
    }

    .sound-find-board {
      height: calc(100% - 4.9em);
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 3%;
      align-items: center;
    }

    .mini-action-button {
      min-height: 96px;
      padding: 0.7em 1em;
      font-size: clamp(22px, 3.1vw, 44px);
      background: linear-gradient(150deg, #fff48b, #8df5c7);
    }

    .game-ready-board {
      height: calc(100% - 4.9em);
      display: grid;
      place-items: center;
      text-align: center;
      color: #fff7a8;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      font-size: clamp(18px, 2vw, 30px);
      text-shadow: 0 3px 0 rgba(0,0,0,0.26);
    }

    .scene2-nav {
      display: flex;
      justify-content: center;
      gap: 2%;
      align-items: center;
    }

    .scene2-control {
      border: 4px solid rgba(255,255,255,0.86);
      border-radius: 999px;
      padding: 0.55em 1.25em;
      font-size: clamp(15px, 1.8vw, 26px);
      font-weight: 900;
      color: #15315f;
      background: linear-gradient(160deg, #fff6a4, #79e9ff);
      box-shadow: 0 6px 0 rgba(30, 86, 130, 0.38), 0 10px 16px rgba(0,0,0,0.18);
      cursor: pointer;
      transition: transform 160ms ease, filter 160ms ease;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .scene2-control:hover,
    .scene2-control:focus-visible {
      transform: translateY(-3px) scale(1.035);
      filter: brightness(1.10);
      outline: none;
    }

    .scene2-toast {
      position: absolute;
      left: 50%;
      bottom: 11.5%;
      transform: translateX(-50%) translateY(12px);
      padding: 0.65em 1.25em;
      border-radius: 999px;
      background: rgba(5, 24, 70, 0.86);
      color: #fff7a8;
      border: 3px solid rgba(255,255,255,0.80);
      font-size: clamp(16px, 2vw, 28px);
      font-weight: 900;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      z-index: 2;
    }

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

    .scene2-music-toggle {
      position: absolute;
      top: 3.4%;
      right: 3.2%;
      z-index: 3;
      border: 3px solid rgba(255,255,255,0.86);
      border-radius: 999px;
      padding: 0.45em 0.9em;
      background: rgba(255,255,255,0.88);
      color: #1b4f7b;
      font-size: clamp(13px, 1.45vw, 20px);
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 5px 0 rgba(17, 75, 115, 0.35);
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }



    /* SCENE2 병렬 scene 내부 레이어 구조 v0.21 */
    .scene-2-consonant {
      background: transparent;
    }

    .scene-2-consonant::before {
      content: none;
    }

    .scene2-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .scene2-layer-background {
      z-index: 1;
      overflow: hidden;
      background: url("../../assets/runtime/86e21f0f7c8324bd.png") center center / cover no-repeat;
    }

    .scene2-layer-background::before {
      content: none;
    }

    .scene2-layer-background::after {
      content: none;
    }

    .scene2-layer-bgm { z-index: 2; }
    .scene2-layer-sfx { z-index: 3; }
    .scene2-layer-objects { z-index: 4; overflow: hidden; }
    .scene2-layer-start { z-index: 10; }
    .scene2-layer-learning { z-index: 20; }
    .scene2-layer-ui { z-index: 30; }
    .scene2-layer-feedback { z-index: 40; }

    .scene2-panel {
      pointer-events: none;
    }

    .scene2-layer-start .scene2-title {
      position: absolute;
      top: 7.2%;
      left: 0;
      right: 0;
      pointer-events: none;
    }

    .scene2-layer-start .scene2-guide {
      position: absolute;
      top: 16.8%;
      left: 50%;
      transform: translateX(-50%) translateY(3mm);
      pointer-events: none;
      white-space: nowrap;
    }

    .scene2-layer-learning .consonant-main {
      pointer-events: auto;
    }

    .scene2-layer-ui .scene2-music-toggle,
    .scene2-layer-ui .scene2-control {
      pointer-events: auto;
    }

    .scene2-layer-ui .scene2-nav {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 5.4%;
      pointer-events: none;
    }

    .scene2-layer-feedback .scene2-toast {
      z-index: 1;
    }

    .scene2-object {
      position: absolute;
      pointer-events: none;
      user-select: none;
    }

    .scene2-object-earth-glow {
      width: 18%;
      aspect-ratio: 1 / 1;
      left: -4.5%;
      bottom: -7%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,0.55), transparent 16%),
        radial-gradient(circle at 63% 58%, rgba(94, 255, 139, 0.90), transparent 27%),
        radial-gradient(circle at 35% 63%, rgba(67, 193, 255, 0.95), transparent 35%),
        linear-gradient(150deg, rgba(45,153,255,0.92), rgba(58,217,130,0.90));
      box-shadow: 0 0 34px rgba(120, 244, 255, 0.45);
      opacity: 0.76;
    }

    .scene2-object-orbit {
      border: 2px dashed rgba(205, 255, 244, 0.30);
      border-radius: 50%;
      transform: rotate(-16deg);
    }

    .scene2-object-orbit.orbit-a {
      width: 26%;
      height: 12%;
      left: -8%;
      bottom: 2%;
    }

    .scene2-object-orbit.orbit-b {
      width: 38%;
      height: 18%;
      right: -12%;
      top: 13%;
      transform: rotate(18deg);
    }

    .scene2-object-satellite {
      right: 6.4%;
      top: 12.5%;
      font-size: clamp(24px, 4vw, 56px);
      filter: drop-shadow(0 0 10px rgba(255,255,255,0.65));
      opacity: 0.72;
    }

    .scene2-object-star {
      color: rgba(255, 250, 160, 0.86);
      font-size: clamp(18px, 2.5vw, 36px);
      text-shadow: 0 0 10px rgba(255,255,190,0.8);
    }

    .scene2-object-star.star-a { left: 11%; top: 14%; }
    .scene2-object-star.star-b { right: 18%; bottom: 19%; }
    .scene2-object-star.star-c { left: 49%; bottom: 10%; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    @media (max-aspect-ratio: 4/3) {
      .scene2-panel { inset: 3.6% 3.8%; padding: 2%; }
      .scene2-layer-start .scene2-title { top: 6.4%; }
      .scene2-layer-start .scene2-guide { top: 15.2%; }
      .scene2-layer-learning .consonant-main { inset: 23.5% 6.2% 17.8% 6.2%; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
      .consonant-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
      .consonant-grid { grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(54px, 1fr); }
      .consonant-display { grid-template-columns: 0.6fr 1fr; grid-template-rows: auto; }
      .selected-letter-card { min-height: 120px; }
    }


    @media (max-width: 820px), (max-height: 520px) {
      .scene2-subscene-shell { inset: 22.8% 5.2% 17.6% 5.2%; gap: 6px; }
      .scene2-point-track { gap: 4px; min-height: 44px; padding: 3px 6px; }
      .scene2-point-slot { height: 34px; border-width: 1px; }
      .mini-activity-board,
      .sound-find-board { grid-template-columns: 1fr; grid-template-rows: 0.76fr 1fr; }
      .shape-sample-grid { grid-template-columns: repeat(2, 1fr); }
      .line-match-board { grid-template-columns: 1fr auto 1fr; }
      .scene2-activity-title { font-size: clamp(15px, 3vw, 24px); }
      .scene2-activity-note { font-size: clamp(11px, 2.6vw, 16px); }
    }

/* Scene2-2 pilot: remove only the shared Amazon background image. */
.scene-2-consonant.scene22-common-bg-transparent .scene2-layer-background {
  background-image: none !important;
  background-color: transparent !important;
}