/* Scene2-11 | 우주기지 복구 대작전 1단계: 통신 안테나 복구 */
.scene211-stage {
  z-index: 20;
  color: #10295d;
  font-family: "Pretendard", "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  isolation: isolate;
  user-select: none;
}
.scene211-background,
.scene211-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene211-background {
  z-index: -3;
  background: #07163d url("assets/backgrounds/scene2-11_stage1_space_base_background_v1.png") center / cover no-repeat;
}
.scene211-dim {
  z-index: -2;
  background: linear-gradient(180deg, rgba(0,11,48,.01), rgba(0,11,48,.04));
}
.scene211-utility {
  position: absolute;
  z-index: 120;
  top: 1.6%;
  left: 1.25%;
  display: grid;
  gap: clamp(4px, .5vw, 8px);
  width: clamp(72px, 7.2vw, 122px);
}
.scene211-utility button,
.scene211-complete-actions button,
.scene211-pause-card button {
  min-height: clamp(32px, 4.1vh, 47px);
  border: 2px solid rgba(199,246,255,.95);
  border-radius: clamp(9px, 1vw, 16px);
  color: #fff;
  background: linear-gradient(180deg, rgba(18,103,190,.94), rgba(11,46,117,.97));
  box-shadow: 0 4px 0 rgba(1,18,70,.8), 0 7px 16px rgba(0,0,0,.28);
  font: inherit;
  font-size: clamp(.66rem, 1vw, 1rem);
  font-weight: 900;
  cursor: pointer;
}
.scene211-utility button:hover,
.scene211-utility button:focus-visible,
.scene211-complete-actions button:hover:not([aria-disabled="true"]),
.scene211-complete-actions button:focus-visible:not([aria-disabled="true"]),
.scene211-pause-card button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.15);
  outline: 4px solid #fff18b;
  outline-offset: 2px;
}
.scene211-sound-hit {
  position: absolute;
  z-index: 125;
  top: 1.2%;
  right: 1.35%;
  width: 6.2%;
  height: 10.8%;
  border: 0;
  border-radius: 24%;
  background: transparent;
  cursor: pointer;
}
.scene211-sound-hit:hover,
.scene211-sound-hit:focus-visible {
  background: rgba(119,239,255,.13);
  outline: 4px solid #fff18b;
  outline-offset: 2px;
}
.scene211-problem-badge,
.scene211-repair-badge {
  position: absolute;
  z-index: 105;
  display: flex;
  align-items: center;
  gap: .55em;
  min-width: clamp(112px, 12vw, 190px);
  padding: .45em .8em;
  border: 2px solid rgba(186,245,255,.92);
  border-radius: 999px;
  color: #fff;
  background: rgba(7,35,103,.89);
  box-shadow: 0 5px 0 rgba(0,11,54,.58), 0 9px 20px rgba(0,0,0,.25);
  font-size: clamp(.72rem, 1.15vw, 1.08rem);
  font-weight: 900;
}
.scene211-problem-badge { left: 1.4%; top: 27.2%; }
.scene211-repair-badge { right: 15.6%; top: 27.2%; }
.scene211-problem-badge strong,
.scene211-repair-badge strong { color: #fff085; font-size: 1.12em; }
.scene211-target-live {
  position: absolute;
  z-index: 90;
  left: 39.75%;
  top: 39.35%;
  width: 18.3%;
  height: 23.8%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13%;
  background: radial-gradient(circle, #fff 0 52%, #e8fbff 73%, #c4edff 100%);
  box-shadow: inset 0 0 24px rgba(58,188,245,.35), 0 0 18px rgba(86,231,255,.25);
  pointer-events: auto;
  cursor: help;
}
.scene211-target-letter {
  color: #5527d2;
  font-size: clamp(5rem, 13vw, 12.5rem);
  font-weight: 1000;
  line-height: .85;
  text-shadow: 0 3px 0 rgba(38,24,121,.14), 0 0 13px rgba(118,85,255,.18);
}
.scene211-choice {
  position: absolute;
  z-index: 100;
  border: 0;
  padding: 0;
  border-radius: 20%;
  color: #173c91;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scene211-choice:disabled { cursor: default; }
.scene211-slot-a { left: 9.25%; top: 33.5%; width: 14.5%; height: 21%; }
.scene211-slot-b { left: 11.35%; top: 61.2%; width: 14.2%; height: 21.1%; }
.scene211-slot-c { right: 8.5%; top: 34.1%; width: 14.8%; height: 20.7%; }
.scene211-slot-d { right: 10.25%; top: 62.0%; width: 14.4%; height: 20.4%; }
.scene211-choice-face {
  position: absolute;
  left: 23%;
  right: 23%;
  top: 24%;
  bottom: 22%;
  display: grid;
  place-items: center;
  border-radius: 12%;
  color: inherit;
  background: radial-gradient(circle, #fff 0 54%, #e6faff 79%, #c5efff 100%);
  box-shadow: inset 0 0 14px rgba(63,186,240,.22);
  font-size: clamp(2.7rem, 7.2vw, 7rem);
  font-weight: 1000;
  line-height: .9;
  transition: transform .17s ease, filter .17s ease, color .17s ease, box-shadow .17s ease;
}
.scene211-choice:nth-child(1) { color: #5c2bd1; }
.scene211-choice:nth-child(2) { color: #16823b; }
.scene211-choice:nth-child(3) { color: #154db8; }
.scene211-choice:nth-child(4) { color: #ee5a0b; }
.scene211-choice:hover:not(:disabled) .scene211-choice-face,
.scene211-choice:focus-visible .scene211-choice-face {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 0 0 5px rgba(111,246,255,.64), 0 0 22px rgba(111,246,255,.72);
}
.scene211-choice:focus-visible { outline: 4px solid #fff080; outline-offset: 4px; }
.scene211-choice.is-wrong .scene211-choice-face {
  color: #d34b34;
  box-shadow: 0 0 0 6px rgba(255,145,110,.68), 0 0 23px rgba(255,106,91,.72);
  animation: scene211-wrong .52s ease both;
}
.scene211-choice.is-correct .scene211-choice-face {
  color: #145fc0;
  box-shadow: 0 0 0 7px rgba(255,238,103,.9), 0 0 30px rgba(255,232,91,.95);
  animation: scene211-correct .78s cubic-bezier(.2,.85,.25,1.3) both;
}
.scene211-guide-message {
  position: absolute;
  z-index: 106;
  left: 59.2%;
  top: 81.6%;
  width: 22%;
  height: 15.8%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: .3em .65em;
  border: clamp(2px, .3vw, 4px) solid rgba(95, 160, 218, .82);
  border-radius: 24px;
  color: #173b78;
  background: #f9feff;
  box-shadow: 0 7px 0 rgba(26, 82, 147, .32), 0 12px 22px rgba(0,0,0,.18);
  font-size: clamp(.7rem, 1.25vw, 1.2rem);
  font-weight: 1000;
  line-height: 1.28;
  text-align: center;
  pointer-events: none;
}

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

.scene211-guide-message::after {
  content: "";
  position: absolute;
  right: -7%;
  top: 43%;
  width: 15%;
  aspect-ratio: 1.25;
  background: #f9feff;
  border-right: clamp(2px, .3vw, 4px) solid rgba(95, 160, 218, .82);
  border-bottom: clamp(2px, .3vw, 4px) solid rgba(95, 160, 218, .82);
  transform: rotate(-20deg) skew(-12deg);
  border-radius: 0 0 10px 0;
}

.scene211-antenna-repair {
  position: absolute;
  z-index: 82;
  left: 65.4%;
  top: 12.7%;
  width: 14.7%;
  height: 24.8%;
  pointer-events: none;
}
.scene211-repair-core {
  position: absolute;
  left: 39%;
  top: 36%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(57,237,255,.82) 35%, rgba(53,122,255,.18) 70%, transparent 72%);
  filter: drop-shadow(0 0 15px #5eeaff);
  transition: opacity .35s ease, transform .35s ease;
}
.scene211-signal {
  position: absolute;
  left: 51%;
  top: 18%;
  border: clamp(2px, .25vw, 5px) solid rgba(104,240,255,.95);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-35deg) scale(.65);
  filter: drop-shadow(0 0 8px rgba(82,231,255,.95));
}
.scene211-signal-one { width: 22%; aspect-ratio: 1; }
.scene211-signal-two { width: 35%; aspect-ratio: 1; }
.scene211-signal-three { width: 49%; aspect-ratio: 1; }
.scene211-antenna-repair[data-level="1"] .scene211-repair-core,
.scene211-antenna-repair[data-level="2"] .scene211-repair-core,
.scene211-antenna-repair[data-level="3"] .scene211-repair-core { opacity: .68; }
.scene211-antenna-repair[data-level="2"] .scene211-signal-one,
.scene211-antenna-repair[data-level="3"] .scene211-signal { opacity: 1; animation: scene211-signal 1.25s ease-in-out infinite; }
.scene211-antenna-repair[data-level="3"] .scene211-repair-core { opacity: 1; transform: scale(1.2); }
.scene211-energy-orb {
  position: absolute;
  z-index: 180;
  width: clamp(18px, 2vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffef65 30%, #56eaff 62%, rgba(53,113,255,.2) 75%);
  box-shadow: 0 0 22px #fff36e, 0 0 42px #55eaff;
  pointer-events: none;
}
.scene211-pause-overlay,
.scene211-complete {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 4%;
  background: rgba(3,14,58,.73);
  backdrop-filter: blur(5px);
}
.scene211-pause-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.scene211-stage.is-paused .scene211-pause-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.scene211-stage.is-paused .scene211-choice,
.scene211-stage.is-paused .scene211-antenna-repair *,
.scene211-stage.is-paused .scene211-energy-orb { animation-play-state: paused !important; }
.scene211-complete[hidden] { display: none !important; }
.scene211-pause-card,
.scene211-complete-card {
  width: min(88%, 780px);
  border: 5px solid #fff29a;
  border-radius: clamp(24px, 3vw, 40px);
  color: #173a7a;
  background: linear-gradient(145deg, #f8feff, #bcefff 58%, #fff0a1);
  box-shadow: 0 18px 0 rgba(5,32,91,.55), 0 28px 55px rgba(0,0,0,.4);
  text-align: center;
}
.scene211-pause-card { width: min(78%, 620px); padding: clamp(22px, 4vw, 50px); }
.scene211-pause-card strong { display: block; font-size: clamp(1.6rem, 4vw, 3rem); }
.scene211-pause-card span { display: block; margin: .7em 0 1.1em; font-size: clamp(.9rem, 1.6vw, 1.25rem); font-weight: 800; }
.scene211-pause-card button { padding: .65em 1.4em; }
.scene211-complete-card { padding: clamp(20px, 3vw, 42px); animation: scene211-card-in .55s cubic-bezier(.2,.85,.25,1.2) both; }
.scene211-complete-stars { color: #ffae26; font-size: clamp(1.8rem, 4vw, 3.5rem); animation: scene211-stars 1s ease-in-out infinite alternate; }
.scene211-complete-card h2 { margin: .15em 0 .35em; font-size: clamp(1.55rem, 3.2vw, 2.8rem); }
.scene211-complete-card p { margin: 0 0 1.2em; font-size: clamp(.9rem, 1.6vw, 1.3rem); font-weight: 900; line-height: 1.5; }
.scene211-complete-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(7px, 1vw, 13px); }
.scene211-complete-actions button { padding: .6em .35em; }
.scene211-complete-actions button[aria-disabled="true"] { color: #637084; background: linear-gradient(#e8edf2,#bdc7d1); box-shadow: 0 4px 0 #7d8793; cursor: not-allowed; }
@keyframes scene211-wrong {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1deg); }
  40% { transform: translateX(8px) rotate(1deg); }
  65% { transform: translateX(-5px); }
  82% { transform: translateX(4px); }
}
@keyframes scene211-correct {
  0% { transform: scale(1); }
  48% { transform: scale(1.13); filter: brightness(1.2); }
  100% { transform: scale(1.03); }
}
@keyframes scene211-signal {
  0%,100% { transform: rotate(-35deg) scale(.7); opacity: .42; }
  50% { transform: rotate(-35deg) scale(1.06); opacity: 1; }
}
@keyframes scene211-card-in { from { opacity:0; transform:scale(.72) translateY(28px); } to { opacity:1; transform:none; } }
@keyframes scene211-stars { from { transform:scale(.95); filter:brightness(1); } to { transform:scale(1.08); filter:brightness(1.25); } }
@media (max-width: 820px), (max-height: 520px) {
  .scene211-utility { width: 72px; gap: 3px; }
  .scene211-utility button { min-height: 28px; font-size: .62rem; border-width: 1px; }
  .scene211-problem-badge, .scene211-repair-badge { min-width: 92px; padding: .32em .58em; font-size: .65rem; }
  .scene211-guide-message { border-radius: 14px; }
  .scene211-complete-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .scene211-choice-face,
  .scene211-signal,
  .scene211-complete-card,
  .scene211-complete-stars { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}