@charset "UTF-8";

/* Astra director's cut
   기존 좌표·규칙·브랜드 팔레트를 보존하고, 플레이 장면의 가독성과 연출 위계만 재구성한다. */

:root {
  --director-ink: #0b1322;
  --director-ink-soft: rgba(11, 19, 34, 0.88);
  --director-paper: #fffaf0;
  --director-yellow: #ffc94f;
  --director-coral: #ff6658;
  --director-mint: #65e5b5;
  --director-line: rgba(255, 255, 255, 0.15);
}

.round-button {
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.audio-settings header button,
.audio-settings__mute {
  min-width: 44px;
  min-height: 44px;
}

.opening-screen__trust-links a {
  min-height: 44px;
}

/* 광고는 제품을 가리지 않는다. 미충전·오류 상태는 자리까지 접힌다. */
.index-adfit {
  order: 2;
}

.index-adfit.is-adfit-active {
  margin-top: 12px;
  margin-bottom: calc(20px + env(safe-area-inset-bottom));
}

.adfit-mount.is-adfit-empty,
.adfit-mount.is-adfit-active.is-adfit-empty,
body.has-adfit-empty-surface .adfit-mount.is-adfit-empty {
  display: none !important;
  width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* 오프닝은 두 컷 밈이 먼저 읽히고, 행동 버튼이 마지막에 등장한다. */
.opening-screen__art {
  animation: director-opening-camera 1.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.opening-screen__shade {
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.03) 54%, rgba(6, 10, 18, 0.2) 70%, rgba(6, 10, 18, 0.96) 87%, #0b1322 100%);
}

.opening-screen__bubble {
  box-shadow: 3px 4px 0 rgba(16, 21, 33, 0.9), 0 12px 28px rgba(0, 0, 0, 0.2);
}

.opening-screen__masthead {
  padding-top: 28px;
  background: linear-gradient(180deg, transparent, rgba(11, 19, 34, 0.56) 24%, rgba(11, 19, 34, 0.94) 72%);
  animation: director-masthead-in 620ms 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opening-screen__product-title b {
  text-wrap: balance;
}

.start-button {
  border-width: 2px;
  box-shadow: 5px 6px 0 var(--director-coral), 0 15px 34px rgba(0, 0, 0, 0.3);
}

/* HUD는 기록만 남기고 그림을 가리는 면적을 줄인다. */
.hud {
  top: calc(63px + env(safe-area-inset-top));
}

.mission-chip,
.timer-stack {
  background: rgba(9, 16, 29, 0.82);
  backdrop-filter: blur(14px) saturate(1.05);
}

.mission-flash {
  top: calc(151px + env(safe-area-inset-top));
  width: min(68%, 270px);
  padding: 9px 12px 10px;
  border: 2px solid var(--director-ink);
  border-radius: 13px 13px 13px 4px;
  background: rgba(255, 250, 240, 0.96);
  box-shadow: 4px 5px 0 var(--director-coral), 0 10px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
}

.mission-flash.is-active {
  animation: director-mission-sting 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mission-flash h2 {
  margin: 2px 0 3px;
  font-size: clamp(17px, 5cqw, 22px);
}

.mission-flash > span {
  width: 26px;
  height: 3px;
  margin-bottom: 4px;
  background: var(--director-yellow);
}

.mission-flash > p:last-child {
  font-size: 9px;
}

.tap-hint {
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(218px, calc(100% - 24px));
  min-height: 52px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 17px;
  background: rgba(9, 16, 29, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.06);
}

.tap-hint__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--director-yellow);
  animation: director-icon-pulse 620ms ease-in-out infinite alternate;
}

.tap-hint strong {
  font-size: 13px;
}

.tap-hint small {
  font-size: 9px;
}

/* 사각지대: 거대한 판정 UI 대신 벽 옆 신호와 캐릭터 동작이 중심이다. */
.reaction-layer__instruction {
  top: calc(151px + env(safe-area-inset-top));
  width: min(78%, 304px);
  padding: 9px 12px 10px;
  border-radius: 15px;
  background: rgba(9, 16, 29, 0.84);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.06);
}

.reaction-layer__instruction strong {
  font-size: 13px;
}

.reaction-layer__instruction small {
  font-size: 8px;
}

.reaction-lookout {
  top: 45%;
  right: 5%;
  padding: 7px 9px;
  border-width: 1px;
  font-size: 8px;
}

.reaction-cue {
  top: 47%;
  right: auto;
  left: 43%;
  gap: 3px;
  transform: translate(-50%, -50%) scale(0.5) rotate(-9deg);
}

.reaction-cue span {
  width: clamp(62px, 19cqw, 78px);
  border-width: 4px;
  box-shadow: 5px 6px 0 var(--director-coral), 0 0 0 6px rgba(255, 201, 79, 0.16), 0 14px 28px rgba(0, 0, 0, 0.3);
  font-size: clamp(40px, 12cqw, 52px);
}

.reaction-cue strong {
  padding: 5px 10px 6px;
  border-width: 2px;
  background: var(--director-mint);
  font-size: 14px;
}

.reaction-layer[data-phase="cue"] .reaction-cue {
  animation: director-reaction-cue 330ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.reaction-layer::after,
.reaction-layer[data-phase="cue"]::after {
  display: none;
  animation: none;
}

.reaction-result {
  bottom: calc(17px + env(safe-area-inset-bottom));
  width: min(70%, 270px);
  padding: 9px 12px;
  border-radius: 15px;
  background: rgba(9, 16, 29, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* 부장 메시지는 일반 앱 모달이 아니라 짧은 만화 컷처럼 읽힌다. */
.boss-overlay {
  align-items: center;
  padding: calc(72px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 201, 79, 0.18), transparent 32%),
    rgba(5, 10, 18, 0.72);
  backdrop-filter: blur(8px) saturate(0.8);
}

.phone-card {
  position: relative;
  max-width: 390px;
  padding: 24px 18px 18px;
  border: 3px solid var(--director-ink);
  border-radius: 24px 24px 24px 7px;
  background: var(--director-paper);
  box-shadow: 9px 10px 0 var(--director-coral), 0 26px 70px rgba(0, 0, 0, 0.36);
  color: var(--director-ink);
}

.phone-card__urgent {
  position: absolute;
  top: -16px;
  left: 18px;
  padding: 7px 11px;
  border: 2px solid var(--director-ink);
  border-radius: 10px 10px 10px 3px;
  background: var(--director-yellow);
  color: var(--director-ink);
  font-size: 10px;
  font-weight: 900;
}

.phone-card__timer {
  height: 6px;
  border: 1px solid rgba(11, 19, 34, 0.18);
  background: #e8e1d3;
}

.boss-avatar {
  border: 2px solid var(--director-ink);
  background: var(--director-coral);
  color: #fff;
}

.phone-card__message {
  border: 2px solid var(--director-ink);
  border-radius: 15px 15px 15px 4px;
  background: #fff;
}

.phone-card__choices button {
  min-height: 56px;
  border: 2px solid rgba(11, 19, 34, 0.14);
  border-radius: 15px;
  background: #fff;
}

.phone-card__choices button:hover,
.phone-card__choices button:focus-visible {
  border-color: var(--director-ink);
  background: #fff4cf;
}

/* 결과는 한눈에 읽히는 기록과 공유 목적을 분리한다. */
.ending-sheet {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.result-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: -4px 0 9px;
}

.result-highlights div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid #e4e7ec;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
}

.result-highlights span {
  color: #667085;
  font-size: 8px;
  font-weight: 700;
}

.result-highlights strong {
  overflow: hidden;
  color: var(--director-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
}

.card-mode-picker legend {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  padding: 0;
  color: #667085;
  font-size: 9px;
  font-weight: 750;
}

.card-mode-picker button {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid #d9dee7;
  border-radius: 14px;
  background: #fff;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

.card-mode-picker button[aria-pressed="true"] {
  border: 2px solid var(--director-ink);
  background: #fff4cf;
  box-shadow: 3px 4px 0 var(--director-yellow);
  color: var(--director-ink);
}

.card-mode-picker strong {
  font-size: 12px;
}

.card-mode-picker small {
  color: #667085;
  font-size: 8px;
  line-height: 1.25;
}

.share-screen {
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

.share-screen__header {
  width: min(100%, 390px);
  margin-inline: auto;
}

.share-screen h2 {
  font-size: clamp(28px, 8.5vw, 40px);
}

.share-card-preview {
  width: min(100%, 390px);
  max-width: none;
  padding: 6px;
}

.share-screen__actions {
  width: min(100%, 390px);
}

.share-screen__actions .primary-button,
.share-screen__actions .secondary-button,
.share-screen__actions .text-button,
.share-hub-link {
  min-height: 48px;
}

/* 데스크톱은 남는 공간을 작전실로 사용한다. */
.desktop-operation {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.desktop-operation header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.desktop-operation header span {
  color: var(--director-yellow);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.desktop-operation header b {
  color: #fff8df;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
}

.desktop-operation__route {
  position: relative;
  height: 7px;
  margin-right: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.desktop-operation__route span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--director-coral), var(--director-yellow));
  box-shadow: 0 0 14px rgba(255, 201, 79, 0.35);
  transition: width 130ms linear;
}

.desktop-operation__route i {
  position: absolute;
  top: 50%;
  right: -32px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transform: translateY(-50%);
}

.desktop-operation dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.desktop-operation dl div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 7px;
  border-radius: 12px;
  background: rgba(6, 12, 22, 0.54);
}

.desktop-operation dt {
  color: rgba(255, 255, 255, 0.48);
  font-size: 8px;
  font-weight: 700;
}

.desktop-operation dd {
  margin: 0;
  overflow: hidden;
  color: #fff8df;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-operation dl div:first-child {
  box-shadow: inset 0 -3px 0 rgba(255, 76, 88, 0.32);
}

@media (max-width: 519px) {
  body {
    overscroll-behavior-y: auto;
  }

  .game {
    min-height: 640px;
  }

  .index-adfit.is-adfit-active {
    display: grid;
  }
}

@media (max-width: 350px), (max-height: 730px) {
  .opening-screen__bubble--one {
    top: 4cqw;
  }

  .opening-screen__bubble--two {
    top: 83cqw;
    height: 39cqw;
  }

  .arcade-hub-card {
    min-height: 46px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .opening-screen__masthead {
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding-top: 20px;
  }

  .opening-screen__product-title {
    margin-bottom: 4px;
  }

  .opening-screen__records {
    margin-bottom: 5px;
  }

  .opening-screen__trust-links {
    margin-top: 4px;
  }

  .start-button,
  .opening-audio-button {
    min-height: 56px;
  }

  .ending-screen__visual {
    height: 92px;
  }

  .ending-sheet {
    min-height: calc(100% - 92px);
  }
}

@media (min-width: 520px) and (hover: hover) and (pointer: fine) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body,
  body.has-adfit-opening-surface {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 100dvh;
  }

  .game-shell {
    order: 1;
    display: block;
    flex: 0 1 auto;
  }

  .game,
  body.has-adfit-opening-surface .game {
    width: min(calc(100vw - 32px), calc((100dvh - 94px) * 0.5625), 480px);
  }

  body:not(.has-adfit-surface) .game,
  body.has-adfit-empty-surface .game {
    width: min(calc(100vw - 32px), calc((100dvh - 32px) * 0.5625), 480px);
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .game-shell {
    display: flex;
    width: min(100%, 900px);
    max-height: calc(100dvh - 94px);
  }

  body:not(.has-adfit-surface) .game-shell,
  body.has-adfit-empty-surface .game-shell {
    max-height: calc(100dvh - 32px);
  }

  .desktop-controls {
    width: clamp(300px, 29vw, 350px);
  }

  .desktop-controls__footer {
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-screen__art,
  .opening-screen__masthead,
  .mission-flash.is-active,
  .reaction-layer[data-phase="cue"] .reaction-cue,
  .tap-hint__icon {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mission-chip,
  .timer-stack,
  .tap-hint,
  .reaction-layer__instruction,
  .reaction-result {
    background: #0b1322;
    backdrop-filter: none;
  }
}

@keyframes director-opening-camera {
  from { opacity: 0.72; transform: scale(1.035) translateY(9px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes director-masthead-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes director-mission-sting {
  0% { opacity: 0; transform: translateX(-18px) rotate(-1deg); }
  18%, 64% { opacity: 1; transform: translateX(0) rotate(-1deg); }
  100% { opacity: 0; transform: translateX(8px) rotate(-1deg); }
}

@keyframes director-reaction-cue {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-10deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
}

@keyframes director-icon-pulse {
  from { transform: scale(0.94); }
  to { transform: scale(1.04); }
}