:root {
  --ink: #000;
  --paper: #fff;
  --alarm: #e02020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #111;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: var(--paper);
  overflow: hidden;
}

#stage {
  position: fixed;
  inset: 0;
}

#cam, #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cam { transform: scaleX(-1); }

#start-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  z-index: 10;
}

#start-screen.hidden { display: none; }

#start-screen h1 { font-size: 2.5rem; margin: 0; }

#start-error {
  max-width: 26rem;
  margin: 0;
  color: var(--alarm);
  font-weight: 700;
}

#start-btn, #restart-btn {
  font: inherit;
  font-size: 1.25rem;
  padding: 0.75rem 2rem;
  border: 4px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

/* --rest-rotate는 애니메이션이 끝난 뒤 정착할 기울기다. 요소마다 다르게
   (예: #ending-stamp는 -12deg) 지정하면 팝인이 그 각도를 기준으로
   좌우로 크게 흔들었다가 정착한다. */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.2) rotate(calc(var(--rest-rotate, 0deg) - 18deg)); }
  55%  { opacity: 1; transform: scale(1.28) rotate(calc(var(--rest-rotate, 0deg) + 9deg)); }
  75%  { transform: scale(0.92) rotate(calc(var(--rest-rotate, 0deg) - 3deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rest-rotate, 0deg)); }
}

.pop-in {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#ending {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.9);
  z-index: 15;
}

#ending.hidden { display: none; }

/* 전체화면 혼나는 이미지. 파일이 아직 없으면 app.js가 onerror로 숨기고
   #ending의 어두운 배경(rgba(0,0,0,0.9))이 그대로 대체 배경이 된다. */
#ending-scold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 걸린 순간 웹캠 캡처. 이제 메인이 아니라 우하단 구석의 증거 사진. */
#ending-photo {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 24vw;
  max-width: 260px;
  height: auto;
  border: 6px solid var(--ink);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  z-index: 2;
}

#ending-stamp {
  --rest-rotate: -12deg;
  position: absolute;
  top: 14%;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  font-weight: 900;
  color: var(--alarm);
  border: 10px solid var(--alarm);
  padding: 0.2em 0.5em;
  transform: rotate(var(--rest-rotate));
  box-shadow: 8px 8px 0 var(--ink);
  pointer-events: none;
  z-index: 2;
}

#ending-score {
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  -webkit-text-stroke: 1px var(--ink);
  z-index: 2;
}

#restart-btn {
  position: relative;
  z-index: 2;
}