/* Character-first hologram: no world picker, no page h-scroll, carousel friends */

/* PC(>760px)에서 모바일 전용 UI 강제 숨김 */
@media (min-width: 761px) {
  .resty-mobile-launcher,
  .resty-mobile-friend-change,
  .resty-mobile-layer,
  .resty-char-nav,
  .resty-holo-ai-bubble,
  .resty-edison-panel {
    display: none !important;
  }
}

html,
body,
.wonder-shell {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Single-column layout on all screen sizes (fixes 175px side columns on desktop) */
.holo-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  min-width: 0 !important;
}

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

.topic-explorer,
.topic-toolbar,
.topic-search,
.category-filter,
.topic-scroll,
.topic-empty,
.branch-refresh {
  display: none !important;
}

/* Use the hero bubble as the single dialogue/answer surface.
   The console used to repeat the same text below, which looked like two
   answers on desktop. Keep choices below, but move the readable response up. */
.holo-speech {
  display: block !important;
  width: min(92%, 560px) !important;
  max-width: calc(100% - 32px) !important;
  min-height: 76px !important;
  height: auto !important;
  padding: 16px 18px !important;
  top: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  white-space: normal !important;
  overflow: visible !important;
  z-index: 8 !important;
}

.holo-speech p,
.holo-speech span,
.holo-speech strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  line-height: 1.42 !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.console-message {
  display: none !important;
}

.resty-char-nav {
  display: flex !important;
  margin: 0 0 12px !important;
}

.holo-console {
  max-width: 100% !important;
  width: 100% !important;
}

.hero-hologram {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove world choice column entirely (including labels) */
.world-choices {
  display: none !important;
}

.world-backdrop {
  opacity: 0.08 !important;
  filter: blur(10px) saturate(0.5);
  pointer-events: none !important;
}

/* Friend list replaced by ◀ ▶ nav */
.friend-choices .character-stack {
  display: none !important;
}

.friend-choices > .eyebrow,
.friend-choices > h2,
.friend-choices > p {
  display: none !important;
}

/* Free-text ask disabled */
.composer {
  display: none !important;
}

.prompt-row {
  gap: 8px;
  margin: 8px 0 14px;
}

.prompt-chip {
  min-height: 44px;
  font-size: 13px !important;
  line-height: 1.3;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  white-space: normal !important;
  text-align: left;
  max-width: 100%;
}

/* Review CTA — open quiz only when tapped */
.review-chip {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(167, 244, 255, 0.55);
  background: linear-gradient(180deg, rgba(40, 90, 140, 0.95), rgba(18, 48, 92, 0.95));
  color: #e8fbff !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.review-chip:active {
  transform: scale(0.98);
}

/* Soften quiz backdrop — keep dialogue readable behind */
.quiz-overlay {
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  background: rgba(2, 8, 24, 0.32) !important;
}

/* Quiz statement should be readable on mobile */
.quiz-card p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.quiz-actions {
  gap: 12px !important;
}

.quiz-o,
.quiz-x {
  min-width: 72px !important;
  min-height: 48px !important;
  font-size: 1.25rem !important;
}

@media (max-width: 760px) {
  .holo-layout {
    display: block !important;
    padding: 12px 12px max(18px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  /* Hero was 500px — buttons fell below the fold on phones */
  .hero-hologram {
    height: min(38vh, 280px) !important;
    min-height: 220px !important;
    max-height: 300px !important;
    margin: 0 0 8px !important;
    max-width: 100% !important;
    border-radius: 22px 22px 48px !important;
  }

  .hero-hologram > img,
  .hero-hologram > .character-hologram {
    width: 72% !important;
    height: 78% !important;
    bottom: 36px !important;
  }

  .holo-speech {
    width: min(92%, 340px) !important;
    min-height: 70px !important;
    top: 10px !important;
    left: 50% !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
    padding: 12px 14px !important;
  }

  .friend-choices {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .holo-console,
  .conversation-panel {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 12px 14px !important;
  }

  /* Question + review buttons: full-width stack, easy taps */
  .prompt-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 8px 0 10px !important;
  }

  .prompt-chip {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .review-chip,
  .branch-refresh {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }

  .resty-char-nav {
    margin: 0 0 10px !important;
    position: sticky;
    top: 0;
    z-index: 6;
    background: rgba(8, 20, 48, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 6px 4px;
  }

  /* Quiz modal: stay on-screen with sticky O/X */
  .quiz-overlay {
    padding: 10px 10px max(12px, env(safe-area-inset-bottom)) !important;
    align-items: flex-end !important;
  }

  .quiz-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(78vh, 560px) !important;
    overflow-y: auto !important;
    padding: 18px 16px 14px !important;
    border-radius: 20px 20px 16px 16px !important;
    -webkit-overflow-scrolling: touch;
  }

  .quiz-card p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .quiz-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, #081431 28%);
    padding-top: 10px;
    margin: 14px 0 8px !important;
    gap: 14px !important;
  }

  .quiz-o,
  .quiz-x {
    min-width: 88px !important;
    min-height: 56px !important;
    font-size: 1.4rem !important;
  }
}

@media (max-width: 1050px) {
  .holo-layout {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
}

/* ===== Summon / hologram switch: light rising from below ===== */
@keyframes resty-holo-rise {
  0% {
    filter: saturate(1.55) brightness(1.7) blur(4px) drop-shadow(0 0 40px #6fe7ff);
    transform: translate(-50%) translateY(36px) scale(0.88);
  }
  45% {
    filter: saturate(1.25) brightness(1.35) blur(0) drop-shadow(0 0 30px #6fe7ffcc);
    transform: translate(-50%) translateY(-6px) scale(1.03);
  }
  100% {
    filter: saturate(1.05) brightness(1.12) blur(0) drop-shadow(0 0 22px #6fe7ffb8);
    transform: translate(-50%) translateY(0) scale(1);
  }
}

@keyframes resty-beam-open {
  0% {
    opacity: 0;
    filter: blur(18px);
    transform: translate(-50%) scaleX(0.12) scaleY(0.08);
  }
  18% {
    opacity: 1;
    filter: blur(4px);
    transform: translate(-50%) scaleX(1.45) scaleY(0.55);
  }
  42% {
    opacity: 1;
    filter: blur(2px);
    transform: translate(-50%) scaleX(1.05) scaleY(1.08);
  }
  100% {
    opacity: 0.55;
    filter: blur(10px);
    transform: translate(-50%) scaleX(1) scaleY(1);
  }
}

@keyframes resty-floor-bloom {
  0% {
    opacity: 0.15;
    box-shadow: 0 0 0 #6fe7ff00, inset 0 0 0 #6fe7ff00;
    transform: translate(-50%) rotateX(67deg) scale(0.28);
  }
  30% {
    opacity: 1;
    box-shadow: 0 0 48px #6fe7ffe0, 0 0 90px #4d9dff88, inset 0 0 36px #a7f4ff66;
    transform: translate(-50%) rotateX(67deg) scale(1.38);
  }
  100% {
    opacity: 0.85;
    box-shadow: 0 0 25px #6fe7ff52, inset 0 0 22px #6fe7ff33;
    transform: translate(-50%) rotateX(67deg) scale(1);
  }
}

@keyframes resty-ring-flare {
  0% {
    opacity: 0;
    transform: translate(-50%) scale(0.25);
    box-shadow: 0 0 0 #6ce6ff00;
  }
  40% {
    opacity: 1;
    transform: translate(-50%) scale(1.28);
    box-shadow: 0 0 36px #6ce6ffee, 0 0 80px #538bff99, inset 0 0 40px #75e9ff66;
  }
  100% {
    opacity: 0.55;
    transform: translate(-50%) scale(1);
    box-shadow: 0 0 22px #6ce6ffcc, 0 0 58px #538bff75, inset 0 0 30px #75e9ff4d;
  }
}

@keyframes resty-stage-beam {
  0% {
    opacity: 0;
    transform: translate(-50%) scaleY(0.06);
  }
  14% {
    opacity: 1;
    transform: translate(-50%) scaleY(0.45);
  }
  48% {
    opacity: 0.95;
    transform: translate(-50%) scaleY(1.08);
  }
  100% {
    opacity: 0.18;
    transform: translate(-50%) scaleY(0.92);
  }
}

@keyframes resty-particle-rise {
  0% {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 90px)) scale(0.15) rotate(-20deg);
  }
  18% {
    opacity: 1;
  }
  55% {
    opacity: 0.95;
    transform: translate(calc(var(--x) * 0.28), calc(var(--y) * 0.15 - 110px)) scale(1.05) rotate(70deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 0.1), -230px) scale(0.2) rotate(180deg);
  }
}

.hero-hologram.summon-intro {
  box-shadow:
    0 30px 100px #0006,
    0 0 90px #6fe7ff44,
    inset 0 0 90px #6fe7ff38 !important;
}

.hero-hologram.summon-intro .world-backdrop {
  opacity: 0.22 !important;
  filter: blur(6px) saturate(0.85) brightness(1.15) !important;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

/* Character stays visible — only lift/glow, never fade to 0 */
.hero-hologram.summon-intro > .character-hologram,
.summon-intro .character-hologram {
  left: 50% !important;
  right: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: 1.35s cubic-bezier(0.18, 0.9, 0.28, 1) both resty-holo-rise !important;
}

.summon-intro .holo-floor:before {
  width: 220px !important;
  height: 380px !important;
  bottom: 8px !important;
  background: linear-gradient(
    #6fe7ff00,
    #6fe7ff55 28%,
    #b8fbffd9 62%,
    #ffffffee
  ) !important;
  filter: blur(8px) !important;
  animation: 1.35s cubic-bezier(0.18, 0.9, 0.28, 1) both resty-beam-open !important;
}

.summon-intro .holo-floor {
  animation: 1.35s cubic-bezier(0.18, 0.9, 0.28, 1) both resty-floor-bloom !important;
}

.summon-intro .holo-rings {
  animation: 1.35s cubic-bezier(0.18, 0.9, 0.28, 1) both resty-ring-flare !important;
}

.hero-hologram.summon-intro:before {
  width: 210px !important;
  height: 82% !important;
  bottom: 6% !important;
  filter: blur(6px) !important;
  background: linear-gradient(
    #0000,
    #67e8ff55 30%,
    #9af0ffe6 70%,
    #e8fdff
  ) !important;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%) !important;
  animation: 1.35s cubic-bezier(0.2, 0.95, 0.3, 1) both resty-stage-beam !important;
}

.hero-hologram.summon-intro:after {
  width: 280px !important;
  height: 280px !important;
  animation: 1.35s cubic-bezier(0.2, 0.95, 0.3, 1) both resty-ring-flare !important;
}

.summon-intro .summon-particles i {
  animation-name: resty-particle-rise !important;
  animation-duration: 1.35s !important;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.28, 1) !important;
  animation-fill-mode: both !important;
  font-size: clamp(11px, 1.5vw, 18px) !important;
  text-shadow:
    0 0 8px #a5f5ff,
    0 0 22px #5ccfff,
    0 0 40px #737cff !important;
}

@media (prefers-reduced-motion: reduce) {
  .summon-intro .character-hologram,
  .summon-intro .holo-floor,
  .summon-intro .holo-floor:before,
  .summon-intro .holo-rings,
  .hero-hologram.summon-intro:before,
  .hero-hologram.summon-intro:after,
  .summon-intro .summon-particles i {
    animation: none !important;
  }
  .summon-intro .character-hologram {
    opacity: 1 !important;
    transform: translate(-50%) !important;
  }
}

/* PC iframe compact mode.
   Edugame wraps iframe games in a ~640px-tall stage on many desktop screens.
   The original desktop hologram scene is taller than that, so the lower
   question/console area looks like it never appears. Keep mobile untouched,
   but compress the desktop stage when vertical space is short. */
@media (min-width: 761px) and (max-height: 780px) {
  body {
    overflow: hidden !important;
  }

  .holo-layout {
    grid-template-columns: 150px minmax(500px, 720px) 150px !important;
    gap: clamp(14px, 2.2vw, 30px) !important;
    align-items: start !important;
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }

  .hero-hologram {
    height: clamp(410px, calc(100vh - 210px), 470px) !important;
    border-radius: 30px 30px 76px !important;
  }

  .hero-hologram > img,
  .hero-hologram > .character-hologram {
    height: 100% !important;
    width: min(88%, 520px) !important;
    bottom: -34px !important;
  }

  .holo-caption {
    bottom: 18px !important;
  }

  .holo-speech {
    width: min(92%, 620px) !important;
    min-height: 88px !important;
    padding: 16px 20px !important;
    top: 14px !important;
    font-size: clamp(14px, 1.7vw, 17px) !important;
    line-height: 1.42 !important;
  }

  .holo-console {
    margin-top: 8px !important;
    padding: 12px 16px 14px !important;
  }

  .console-message {
    margin: 8px 0 7px !important;
  }

  .holo-console .prompt-row {
    margin: 8px 0 10px !important;
  }

  .side-choices h2 {
    margin-top: 8px !important;
    font-size: 26px !important;
  }

  .side-choices .world-list,
  .side-choices .character-stack {
    margin-top: 12px !important;
  }
}