/* SCENE2-2 같은 자음 찾기 v0.35.1 */
    .scene22-panel {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(244,251,255,.96), rgba(230,245,248,.92));
      border: 5px solid rgba(255,255,255,.88);
      border-radius: 36px;
      min-height: 100%;
      box-shadow: inset 0 0 0 3px rgba(166,221,255,.26);
      isolation: isolate;
    }

    .scene22-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .scene22-layer-bg {
      background-image: var(--scene22-park-background-image);
      background-size: cover;
      background-position: center center;
      filter: saturate(1.02) brightness(.97);
    }
    .scene22-layer-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 30%, rgba(229,244,234,.1) 55%, rgba(229,244,234,.16));
    }

    .scene22-layer-hud {
      display: grid;
      grid-template-columns: minmax(120px, 190px) 1fr minmax(120px, 190px);
      align-items: start;
      gap: 8px;
      padding: 14px 18px 0;
      z-index: 10;
    }
    .scene22-stage-badge,
    .scene22-instruction {
      align-self: start;
      background: rgba(255,255,255,.92);
      color: #224b2f;
      font-weight: 900;
      border-radius: 999px;
      border: 4px solid rgba(255,255,255,.9);
      box-shadow: 0 7px 0 rgba(57,111,64,.18), 0 12px 22px rgba(37,66,31,.16);
      min-height: auto;
      line-height: 1.2;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
    }
    .scene22-stage-badge {
      justify-self: start;
      padding: .42em .82em;
      font-size: clamp(17px, 2.05vw, 28px);
      background: linear-gradient(180deg, rgba(255,248,214,.96), rgba(255,236,179,.95));
      color: #785600;
    }
    .scene22-instruction {
      justify-self: center;
      padding: .44em 1.2em;
      font-size: clamp(18px, 2.1vw, 32px);
      color: #255536;
      text-align: center;
      max-width: min(92%, 690px);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,255,240,.95));
    }
    .scene22-hud-spacer { min-width: 120px; }

    /* 기존보다 약 1cm 낮춘 굴림 영역 */
    .scene22-layer-lane {
      z-index: 11;
      inset: 20% 4% calc(24% + 1cm) 4%;
    }
    .scene22-lane {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(209,235,203,.12), rgba(255,255,255,.08) 35%, rgba(147,206,146,.16) 70%, rgba(108,169,114,.12)),
        linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.02) 12%, rgba(255,255,255,.02) 88%, rgba(255,255,255,.18));
      border: 4px solid rgba(255,255,255,.62);
      box-shadow: inset 0 0 0 2px rgba(152,205,158,.24), 0 18px 26px rgba(53,91,50,.12);
    }
    .scene22-lane::before,
    .scene22-lane::after {
      content: "";
      position: absolute;
      left: 1.2%; right: 1.2%;
      height: 7px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.46), rgba(255,255,255,.14));
      opacity: .68;
    }
    .scene22-lane::before { top: 15%; }
    .scene22-lane::after { bottom: 15%; }

    .scene22-log {
      position: absolute;
      width: clamp(78px, 8.4vw, 118px);
      aspect-ratio: 1 / 1;
      border: 0;
      background: transparent;
      display: grid;
      place-items: center;
      color: #223a63;
      font-weight: 900;
      font-size: clamp(31px, 3.7vw, 53px);
      text-shadow: 0 2px 0 rgba(255,255,255,.48);
      cursor: pointer;
      pointer-events: auto;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: filter .18s ease, opacity .18s ease;
      z-index: 2;
      padding: 0;
      overflow: visible;
      box-shadow: none;
    }
    .scene22-log::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../../assets/runtime/ecac452f3547b039.png") center / contain no-repeat;
      filter: drop-shadow(0 10px 8px rgba(55,35,13,.24));
      z-index: -1;
    }
    .scene22-log-letter {
      position: relative;
      z-index: 2;
      transform: translateY(-1%);
    }
    .scene22-log:hover,
    .scene22-log:focus-visible {
      filter: brightness(1.06);
      outline: none;
    }
    .scene22-log.is-wrong { animation: scene22WrongShake .42s ease; }
    .scene22-log.is-wrong::before { filter: drop-shadow(0 0 8px rgba(255,105,105,.9)) drop-shadow(0 10px 8px rgba(55,35,13,.24)); }
    .scene22-log.is-correct::before { filter: drop-shadow(0 0 10px rgba(255,245,120,.95)) drop-shadow(0 10px 8px rgba(55,35,13,.24)); }
    .scene22-log.is-hit { opacity: 0; }
    @keyframes scene22WrongShake {
      0%,100% { margin-left: 0; }
      20% { margin-left: -7px; }
      45% { margin-left: 7px; }
      70% { margin-left: -4px; }
    }

    .scene22-layer-status {
      z-index: 13;
      left: 2.8%;
      right: 2.8%;
      bottom: 9%;
      top: auto;
      height: 24%;
      display: grid;
      grid-template-columns: minmax(150px, 18vw) 1fr;
      align-items: center;
      gap: 16px;
      pointer-events: none;
    }
    .scene22-goal-wrap,
    .scene22-reward-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }
    .scene22-goal-caption,
    .scene22-reward-caption {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .28em .72em;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 3px solid rgba(255,255,255,.95);
      box-shadow: 0 6px 12px rgba(69,92,57,.14);
      color: #386039;
      font-size: clamp(14px, 1.5vw, 22px);
      font-weight: 900;
      line-height: 1.1;
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
    }
    .scene22-goal-card {
      width: clamp(128px, 15vw, 190px);
      height: clamp(82px, 9vw, 118px);
      border-radius: 24px;
      border: 6px solid rgba(255,255,255,.95);
      background: linear-gradient(145deg, rgba(255,248,203,.96), rgba(255,220,156,.94));
      box-shadow: 0 12px 20px rgba(85,55,18,.2), inset 0 0 0 3px rgba(225,154,74,.26);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }
    .scene22-goal-card::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 16px;
      border: 3px dashed rgba(177,106,45,.32);
    }
    .scene22-goal-card.is-merging {
      transform: scale(1.08);
      filter: brightness(1.08);
      box-shadow: 0 0 0 8px rgba(255,244,135,.42), 0 12px 20px rgba(85,55,18,.2);
    }
    .scene22-goal-card.is-merged { animation: scene22GoalPop .48s ease; }
    @keyframes scene22GoalPop { 0% { transform: scale(.92); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
    .scene22-goal-letter {
      position: relative;
      z-index: 1;
      font-size: clamp(52px, 5.6vw, 82px);
      font-weight: 900;
      color: #234a7f;
      text-shadow: 0 2px 0 rgba(255,255,255,.5);
    }

    .scene22-reward-track {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: clamp(4px, .55vw, 8px);
      padding: 8px 10px;
      border-radius: 26px;
      background: rgba(255,255,255,.84);
      border: 4px solid rgba(255,255,255,.92);
      box-shadow: 0 10px 16px rgba(65,88,50,.14);
    }
    .scene22-candy-slot {
      position: relative;
      aspect-ratio: 1.55 / 1;
      border-radius: 999px;
      border: 2px dashed rgba(221,88,143,.32);
      background: rgba(255,235,244,.46);
      overflow: visible;
    }
    .scene22-candy-slot::before {
      content: "";
      position: absolute;
      inset: -18% -10%;
      background: url("../../assets/runtime/ca842a1f8dc16d0a.png") center / contain no-repeat;
      opacity: .12;
      transform: scale(.82);
      filter: grayscale(.35);
      transition: opacity .18s ease, transform .18s ease, filter .18s ease;
    }
    .scene22-candy-slot.is-earned::before {
      opacity: 1;
      transform: scale(1);
      filter: drop-shadow(0 5px 4px rgba(124,33,69,.2));
    }
    .scene22-candy-slot.just-earned::before { animation: scene22CandyPop .54s ease; }
    @keyframes scene22CandyPop { 0% { transform: scale(.55) rotate(-12deg); } 55% { transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1); } }

    .scene22-candy-fly {
      position: absolute;
      width: clamp(44px, 5.2vw, 74px);
      aspect-ratio: 1.55 / 1;
      background: url("../../assets/scene2-2/candy_point.png") center / contain no-repeat;
      filter: drop-shadow(0 7px 5px rgba(124,33,69,.24));
      pointer-events: none;
      z-index: 10000;
      transform-origin: center;
      transition: left .64s cubic-bezier(.22,.82,.22,1), top .64s cubic-bezier(.22,.82,.22,1), transform .64s ease, opacity .18s ease .48s;
    }

    .scene22-layer-merge { z-index: 22; overflow: visible; }
    .scene22-merge-clone {
      position: absolute;
      margin: 0;
      pointer-events: none;
      z-index: 9999;
      transform-origin: center;
      transition: left .54s cubic-bezier(.25,.8,.2,1), top .54s cubic-bezier(.25,.8,.2,1), width .54s ease, height .54s ease, transform .54s ease, opacity .18s ease .4s;
    }

    .scene22-layer-feedback { z-index: 24; }
    .scene22-feedback {
      position: absolute;
      left: 50%;
      bottom: 22%;
      transform: translateX(-50%) translateY(14px);
      min-width: min(70%, 520px);
      max-width: 72%;
      padding: .55em 1em;
      border-radius: 999px;
      background: rgba(255,255,255,.95);
      border: 4px solid rgba(255,255,255,.95);
      color: #255439;
      font-size: clamp(16px, 1.8vw, 26px);
      font-weight: 900;
      text-align: center;
      box-shadow: 0 10px 16px rgba(65,88,50,.18);
      opacity: 0;
      transition: opacity .18s ease, transform .18s ease;
    }
    .scene22-feedback.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .scene22-layer-sfx { display: none; }

    .scene22-complete {
      position: absolute;
      inset: 8% 14%;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.92);
      border-radius: 34px;
      border: 5px solid rgba(255,255,255,.96);
      box-shadow: 0 18px 32px rgba(44,73,34,.18);
      text-align: center;
      z-index: 26;
      pointer-events: auto;
      padding: 28px 18px 22px;
    }
    .scene22-complete.show { display: grid; animation: scene22CompleteIn .45s ease both; }
    @keyframes scene22CompleteIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
    .scene22-complete h3 { margin: 0 0 .2em; font-size: clamp(32px, 4vw, 58px); color: #3f5a20; }
    .scene22-complete p { margin: .25em 0 .8em; font-size: clamp(18px, 2vw, 29px); font-weight: 900; color: #3d5633; }
    .scene22-complete-candies { display: flex; justify-content: center; gap: .2em; flex-wrap: wrap; margin: .2em auto .85em; max-width: 90%; }
    .scene22-complete-candy { width: clamp(48px, 4.8vw, 78px); aspect-ratio: 1.55/1; background: url("../../assets/runtime/ca842a1f8dc16d0a.png") center / contain no-repeat; filter: drop-shadow(0 5px 4px rgba(124,33,69,.18)); }
    .scene22-restart { pointer-events: auto; min-height: auto; font-size: clamp(17px, 2vw, 28px); padding: .55em 1.2em; }

    @media (max-width: 860px) {
      .scene22-layer-hud { grid-template-columns: 90px 1fr 90px; padding: 7px 8px 0; gap: 4px; }
      .scene22-stage-badge { font-size: clamp(10px, 2.4vw, 14px); padding: .35em .55em; }
      .scene22-instruction { font-size: clamp(11px, 2.6vw, 16px); padding: .36em .72em; }
      .scene22-hud-spacer { min-width: 64px; }
      .scene22-layer-lane { inset: 17% 2% calc(26% + .65cm) 2%; }
      .scene22-layer-status { left: 1.5%; right: 1.5%; bottom: 6%; height: 26%; grid-template-columns: 29% 1fr; gap: 7px; }
      .scene22-goal-card { width: min(100%, 124px); height: clamp(62px, 12vw, 84px); border-width: 4px; border-radius: 16px; }
      .scene22-goal-letter { font-size: clamp(38px, 7vw, 60px); }
      .scene22-reward-track { padding: 5px 5px; gap: 3px; border-width: 3px; border-radius: 17px; }
      .scene22-candy-slot { border-width: 1px; }
      .scene22-log { width: clamp(52px, 11vw, 76px); font-size: clamp(23px, 5.4vw, 38px); }
      .scene22-feedback { bottom: 25%; max-width: 86%; font-size: clamp(11px, 2.3vw, 14px); padding: .42em .72em; border-width: 3px; }
      .scene22-complete { inset: 10% 6%; border-radius: 24px; padding: 18px 14px 16px; }
    }

/* Candidate 2: visual instruction removed; spoken guide replaces it. */
.scene22-layer-hud { grid-template-columns: 1fr 1fr; }
.scene22-hud-spacer { justify-self: end; }

/* Scene2-2 park background repair candidate (2026-08-24)
   Scope: Scene2-2 visual layers only. All game logic, layout, controls and audio stay unchanged. */
.scene-2-consonant {
  --scene22-park-background-image: url("../../assets/scene2-2/scene2-2_park_background.png");
}

.scene-2-consonant.scene22-common-bg-transparent {
  background-color: #b8dcae !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(233,243,233,.10) 30%, rgba(255,255,255,.08)),
    url("../../assets/scene2-2/scene2-2_park_background.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* The common Scene2 background remains mounted, but cannot cover the park while Scene2-2 is active. */
.scene-2-consonant.scene22-common-bg-transparent .scene2-layer-background {
  background-image: none !important;
  background-color: transparent !important;
}

/* The old internal park layer is not duplicated over the root background. */
.scene-2-consonant.scene22-common-bg-transparent .scene22-layer-bg {
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0 !important;
}

.scene-2-consonant.scene22-common-bg-transparent .scene22-layer-bg::after {
  content: none !important;
  background: none !important;
}

/* The central learning panel uses a separate, low-detail park-lawn image for legibility. */
.scene-2-consonant.scene22-common-bg-transparent .scene22-panel {
  background-color: #d8efd2 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(225,244,219,.08)),
    url("../../assets/scene2-2/scene2-2_game_area_background.svg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.scene-2-consonant.scene22-common-bg-transparent .scene2-activity-stage {
  background: transparent !important;
}

.scene-2-consonant.scene22-common-bg-transparent .scene22-lane {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(245,252,241,.10) 46%, rgba(105,166,106,.14)) !important;
}

.scene-2-consonant.scene22-common-bg-transparent .scene22-lane::before,
.scene-2-consonant.scene22-common-bg-transparent .scene22-lane::after {
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.42), rgba(255,255,255,.08)) !important;
  opacity: .62 !important;
}