:root {
  color-scheme: dark;

  font-family:
    "Pretendard",
    "Segoe UI",
    sans-serif;

  --background: #090a0d;
  --panel: #111318;

  --gold-light: #fff0b2;
  --gold: #d9ad4c;
  --gold-dark: #8b6420;

  --text: #f8f6ef;
  --muted: rgba(248, 246, 239, 0.56);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: var(--background);
}

button {
  font: inherit;
}

.achievement-app {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  color: var(--text);
  background: var(--background);
}

/* ========================================
   절제된 배경
======================================== */

.background {
  position: absolute;
  inset: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      #24201a 0%,
      #111216 43%,
      #08090c 100%
    );
}

.background-glow {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 70%;
  height: 70%;

  opacity: 0.18;

  background:
    radial-gradient(
      ellipse,
      rgba(217, 173, 76, 0.4),
      transparent 68%
    );

  transform: translate(-50%, -50%);
}

.background-noise {
  position: absolute;
  inset: 0;

  opacity: 0.025;

  background-image:
    repeating-radial-gradient(
      circle,
      white 0,
      white 1px,
      transparent 1px,
      transparent 4px
    );

  background-size: 7px 7px;
}

/* ========================================
   시작 화면
======================================== */

.start-screen {
  position: absolute;
  z-index: 50;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 30px;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(35, 29, 20, 0.98),
      rgba(7 circle at center),
      rgba(35, 29, 20, 0.98),
      rgba(7, 8, 11, 0.995) 68%
    );

  transition:
    opacity 400ms ease,
    visibility 400ms ease;
}

.achievement-app.is-running .start-screen {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

.start-mark {
  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  margin-bottom: 20px;

  color: var(--gold-light);

  background:
    linear-gradient(
      145deg,
      #5b4119,
      #20170b
    );

  border: 1px solid rgba(255, 230, 153, 0.55);
  border-radius: 50%;

  box-shadow:
    0 0 30px rgba(217, 173, 76, 0.2),
    inset 0 0 18px rgba(255, 232, 164, 0.1);
}

.start-mark span {
  font-size: 30px;
}

.start-eyebrow {
  margin: 0 0 8px;

  color: var(--gold);

  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.start-screen h1 {
  margin: 0;

  font-size: clamp(25px, 4.5vw, 45px);
  letter-spacing: -0.04em;
}

.start-description {
  margin: 14px 0 24px;

  color: var(--muted);
  font-size: 14px;
}

.start-button {
  min-height: 48px;
  padding: 0 24px;

  color: #18130a;

  background:
    linear-gradient(
      180deg,
      #f8dfa0,
      #c49235
    );

  border: 1px solid #ffecb6;
  border-radius: 5px;

  font-weight: 900;

  box-shadow:
    0 12px 30px rgba(163, 115, 36, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.7);

  cursor: pointer;

  transition:
    transform 130ms ease,
    filter 130ms ease;
}

.start-button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.start-button:active {
  transform: translateY(1px);
}

/* ========================================
   전체 장면
======================================== */

.scene {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 18px 22px 24px;

  overflow: hidden;
}

.scene-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  width: min(100%, 860px);
  min-height: 52px;
  margin-bottom: 12px;

  opacity: 0;

  transform: translateY(-14px);
}

.achievement-app.phase-header .scene-header {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 380ms ease,
    transform 480ms ease;
}

.scene-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scene-label {
  color: var(--gold);

  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.scene-header strong {
  font-size: clamp(15px, 2.3vw, 20px);
}

.scene-progress {
  width: 150px;
}

.scene-progress > span {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.progress-track {
  height: 4px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.progress-bar {
  width: 0;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--gold-dark),
      var(--gold-light)
    );

  border-radius: inherit;

  box-shadow:
    0 0 10px rgba(217, 173, 76, 0.5);

  transition: width 500ms ease;
}

/* ========================================
   스크린샷 카드
======================================== */

.photo-card {
  width: min(100%, 860px);
  margin: 0;

  opacity: 0;

  background: #111318;

  border: 1px solid rgba(244, 217, 151, 0.22);

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.55);

  transform:
    translateY(18px)
    scale(0.97);
}

.achievement-app.phase-photo .photo-card {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  transition:
    opacity 500ms ease,
    transform 650ms cubic-bezier(0.18, 0.9, 0.24, 1);
}

.photo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 35px;
  padding: 0 12px;

  color: rgba(255, 255, 255, 0.42);
  background: #15171c;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.photo-header strong {
  color: var(--gold);
}

.photo-stage {
  position: relative;

  width: 100%;
  aspect-ratio: 442 / 208;

  overflow: hidden;

  background: white;
}

.photo-stage img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  background: white;
}

.initial-dim {
  position: absolute;
  z-index: 2;
  inset: 0;

  background: rgba(5, 6, 8, 0.6);

  transition: opacity 600ms ease;
}

.achievement-app.phase-scan .initial-dim {
  opacity: 0;
}

.scan-line {
  position: absolute;
  z-index: 6;

  top: -5%;
  right: 0;
  left: 0;

  height: 2px;

  opacity: 0;

  background: var(--gold-light);

  box-shadow:
    0 0 6px var(--gold-light),
    0 0 18px rgba(217, 173, 76, 0.75);
}

.achievement-app.phase-scan .scan-line {
  opacity: 1;

  animation:
    scan-down 1.45s ease-in-out forwards;
}

@keyframes scan-down {
  from {
    top: -5%;
  }

  to {
    top: 105%;
  }
}

.capture-flash {
  position: absolute;
  z-index: 20;
  inset: 0;

  opacity: 0;

  background: white;

  pointer-events: none;
}

.achievement-app.phase-heart .capture-flash,
.achievement-app.phase-comment .capture-flash {
  animation:
    short-flash 260ms ease;
}

@keyframes short-flash {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 0.24;
  }

  100% {
    opacity: 0;
  }
}

/* ========================================
   하트와 댓글 위치 강조
======================================== */

.reaction-marker {
  position: absolute;
  z-index: 10;

  opacity: 0;

  border: 2px solid var(--gold-light);

  background: rgba(217, 173, 76, 0.07);

  box-shadow:
    0 0 0 1px rgba(74, 49, 13, 0.8),
    0 0 15px rgba(217, 173, 76, 0.85);

  transform: scale(1.35);
}

/*
  숫자 6이 아니라 프로필 사진 오른쪽 아래에 있는
  빨간 하트를 감싸는 위치입니다.
*/
.heart-marker {
  left: 34.6%;
  top: 39.4%;

  width: 7.4%;
  height: 21%;

  border-radius: 50%;
}

/*
  아래쪽 댓글과 답글 부분입니다.
*/
.comment-marker {
  left: 13.5%;
  top: 67%;

  width: 51%;
  height: 31%;

  border-radius: 6px;
}

.achievement-app.phase-heart .heart-marker,
.achievement-app.phase-comment .comment-marker {
  opacity: 1;

  transform: scale(1);

  transition:
    opacity 180ms ease,
    transform 420ms cubic-bezier(0.2, 1.4, 0.3, 1);
}

.marker-ring {
  position: absolute;
  inset: -8px;

  border: 1px solid rgba(255, 235, 173, 0.55);
  border-radius: inherit;

  animation:
    marker-ring 1.1s ease-out infinite;
}

@keyframes marker-ring {
  from {
    opacity: 0.9;
    transform: scale(0.86);
  }

  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

.marker-check {
  position: absolute;

  top: -11px;
  right: -11px;

  display: grid;
  place-items: center;

  width: 23px;
  height: 23px;

  color: #1c1508;
  background: var(--gold-light);

  border: 2px solid #6a4a14;
  border-radius: 50%;

  font-size: 12px;
  font-weight: 900;

  box-shadow:
    0 0 10px rgba(217, 173, 76, 0.75);
}

.marker-caption {
  position: absolute;

  bottom: calc(100% + 7px);
  left: 50%;

  padding: 4px 7px;

  color: #211708;
  background: var(--gold-light);

  border-radius: 3px;

  font-size: clamp(8px, 1.3vw, 11px);
  font-weight: 900;
  white-space: nowrap;

  transform: translateX(-50%);
}

/* ========================================
   하단 업적 알림
======================================== */

.achievement-toast {
  position: absolute;
  z-index: 30;

  right: 50%;
  bottom: 24px;

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap: 16px;
  align-items: center;

  width: min(calc(100% - 44px), 760px);
  min-height: 108px;

  padding: 15px 18px;

  opacity: 0;

  background:
    linear-gradient(
      110deg,
      rgba(18, 19, 23, 0.97),
      rgba(28, 24, 16, 0.97)
    );

  border:
    1px solid rgba(255, 227, 151, 0.55);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(217, 173, 76, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.07);

  transform:
    translate(50%, 140%)
    scale(0.97);

  pointer-events: none;
}

.achievement-app.phase-final .achievement-toast {
  opacity: 1;

  transform:
    translate(50%, 0)
    scale(1);

  transition:
    opacity 450ms ease,
    transform 700ms cubic-bezier(0.16, 0.95, 0.22, 1);
}

.toast-medal {
  display: grid;
  place-items: center;

  width: 68px;
  height: 68px;

  padding: 5px;

  background:
    conic-gradient(
      #74501c,
      #fff0ad,
      #b47b27,
      #ffe99c,
      #74501c
    );

  border-radius: 50%;

  box-shadow:
    0 0 16px rgba(217, 173, 76, 0.38);
}

.toast-medal-inner {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  color: #fff3bd;

  background:
    radial-gradient(
      circle at 35% 25%,
      #e7bd5d,
      #73501c 76%
    );

  border: 2px solid #4b3210;
  border-radius: 50%;

  font-size: 27px;

  text-shadow:
    0 2px #51340d;
}

.toast-content {
  min-width: 0;
}

.toast-grade {
  display: block;

  margin-bottom: 4px;

  color: var(--gold);

  font-family: "Courier New", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.toast-content h2 {
  overflow: hidden;

  margin: 0;

  color: #fff4cf;

  font-size: clamp(18px, 3vw, 27px);
  letter-spacing: -0.03em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-content p {
  margin: 5px 0 0;

  color: var(--muted);
  font-size: 11px;
}

.toast-results {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-left:
    1px solid rgba(255, 229, 160, 0.16);
}

.toast-results div {
  min-width: 60px;
  padding: 7px 13px;

  text-align: center;
}

.toast-results div + div {
  border-left:
    1px solid rgba(255, 229, 160, 0.12);
}

.toast-results span,
.toast-results strong {
  display: block;
}

.toast-results span {
  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
}

.toast-results strong {
  color: var(--gold-light);
  font-size: 11px;
}

/* ========================================
   작은 파티클
======================================== */

.particle-layer {
  position: absolute;
  z-index: 25;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.achievement-particle {
  position: absolute;

  color: var(--particle-color);
  font-size: var(--particle-size);

  text-shadow:
    0 0 7px currentColor;

  animation:
    particle-fall
    var(--particle-duration)
    ease-out
    forwards;
}

@keyframes particle-fall {
  0% {
    opacity: 0;

    transform:
      translateY(-15px)
      rotate(0deg)
      scale(0.4);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translateY(var(--particle-distance))
      rotate(var(--particle-rotation))
      scale(1);
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 620px) {
  .scene {
    padding: 10px;
  }

  .scene-progress {
    width: 100px;
  }

  .achievement-toast {
    grid-template-columns: auto minmax(0, 1fr);

    width: calc(100% - 20px);
    min-height: 90px;

    padding: 11px;
  }

  .toast-medal {
    width: 54px;
    height: 54px;
  }

  .toast-medal-inner {
    font-size: 21px;
  }

  .toast-results {
    display: none;
  }

  .toast-content p {
    display: none;
  }
}