/*
 * RESULT-001 결과 화면 (화면기획서 슬라이드 45)
 *
 *  game-site 의 .result-card 디자인을 옮겼다.
 *  키커 → 큰 제목 → 부제 → 보안 등급 알약 → 지표 4칸 → 새 뱃지 → 버튼 2개.
 *  목업(680x512) 절대좌표 배치를 흐름 배치로 바꿔 화면 크기에 따라 늘어난다.
 */
.result-screen {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  overflow: auto;
  background: linear-gradient(#f4f1eed9, #f4f1eef2),
              url('../assets/img/office-map-bg.webp') center/cover no-repeat;
  color: var(--gs-text); font-family: var(--font-game);
}
.result-card {
  width: min(780px, 94vw);
  max-height: 92vh; overflow: auto;
  padding: 35px;
  border: 1px solid var(--gs-cyan);
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(155deg, #ffffffeb, #f4f1eee8);
  box-shadow: 0 35px 90px #2a232047;
}

.result-kicker {
  display: block;
  color: var(--gs-cyan);
  font: 800 11px Consolas, monospace; letter-spacing: .1em;
}
.result-card > h1 {
  margin: 10px 0 5px;
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 900; letter-spacing: -.05em; line-height: 1.05;
}
.result-card > p { margin: 0; color: var(--gs-muted); font-size: 16px; }

/* 보안 등급 알약 (금색) */
.result-rank {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 15px 0 22px; padding: 8px 14px;
  border: 1px solid #d97706; border-radius: 99px;
  color: #c05600; background: #fff3e0;
}
.result-rank span { font-size: 12px; }
.result-rank b { font-size: 17px; }

/* 지표 4칸 */
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.result-grid > div {
  padding: 17px 8px;
  border: 1px solid #f0ebe7; border-radius: 11px;
  background: #faf7f5;
}
.result-grid small, .result-grid b { display: block; }
.result-grid small { color: #6f757c; font-size: 12px; }
.result-grid b {
  margin-top: 5px; color: var(--gs-cyan-soft);
  font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* 새로 획득한 뱃지 (금색 박스).
   발주처 요청 2026-09-08 슬라이드 16: 글씨를 키우고, 제목은 왼쪽 / 뱃지 또는 안내 문구는 오른쪽. */
.result-badges {
  margin-top: 18px; padding: 16px 20px;
  border: 1px solid #d97706; border-radius: 12px;
  background: #fff8e8; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.result-badges h3 { margin: 0; font-size: 18px; font-weight: 800; flex: none; }
.result-badges__none { margin: 0; color: #6f757c; font-size: 15px; text-align: right; }
.result-badges__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.result-badges__list > span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 99px; color: #ffffff; background: #d97706;
  font-size: 14px; font-weight: 800;
}
/* 뱃지 그림은 512px 짜리 세밀한 일러스트라 28px 로 줄이면 형체를 알아볼 수 없었다
   (발주처 지적 2026-09-09: "이미지가 깨져 보임"). 알아볼 수 있는 크기로 키운다. */
.result-badge-icon { width: 52px; height: 52px; flex: none; }

/* 버튼 2개 — 왼쪽 홈으로(보조) / 오른쪽 다시하기(주) */
.result-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 23px; }
.result-buttons button {
  min-height: 54px; border: 0; border-radius: 10px; padding: 11px 18px;
  color: #ffffff; font-weight: 800; font-size: 17px; font-family: inherit; cursor: pointer;
}
.result__btn--restart {
  background: linear-gradient(135deg, #e9002d, #ff7a01);
  box-shadow: 0 10px 25px #c000263d;
}
.result__btn--restart:hover { filter: brightness(1.08); }
/* 홈으로(발주처 요청 2026-09-08 슬라이드 16): 다른 팝업의 회색 보조 버튼과 같은 색.
   .result-buttons button 이 흰 글자를 주므로 선택자를 한 단계 더 붙여 확실히 덮는다. */
.result-buttons .result__btn--home {
  border: 1px solid #d3c8c1; color: #1f2429; background: #f0ebe7;
}
.result-buttons .result__btn--home:hover { background: #f4f1ee; }

/* 팝업 모드: 게임 화면 위에 그대로 얹는다. 뒤쪽 맵이 흐릿하게 비친다.
   .obj 등 맵 안 요소가 큰 z-index 를 쓰므로 확실히 위로 올린다. */
.result-screen--popup {
  z-index: 500000;
  background: linear-gradient(#f4f1eebb, #f4f1eee8);
  -webkit-backdrop-filter: blur(7px) saturate(.85); backdrop-filter: blur(7px) saturate(.85);
  animation: result-pop-in .22s ease-out;
}
.result-screen--popup .result-card {
  width: min(700px, 90vw);
  box-shadow: 0 30px 90px #2a23204d, 0 0 0 1px #1f24290b;
  animation: result-card-in .26s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes result-pop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes result-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .result-card { padding: 24px 18px; }
  .result-grid { grid-template-columns: 1fr 1fr; }
}

/* 결과 저장 실패 안내. 화면은 정상인데 기록만 사라지는 상황을 알린다. */
.result-savefail {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--gs-red, #e9002d);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gs-red, #e9002d), transparent 88%);
  color: var(--gs-red, #e9002d);
  font-size: 13px; font-weight: 700; line-height: 1.5;
}