/* 스마트 올림픽 - 게임 공통 스타일
   종목별 색상 차이는 각 게임 html의 작은 인라인 <style>에서 CSS 변수만 덮어쓴다. */

:root {
  --bg: #111;
  --title-color: #ffeb3b;
  --title-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  --overlay-bg: rgba(0,0,0,0.7);
  --overlay-h2-size: 3.5em;
  --modal-h2-color: #DF0024;
  --record-color: #0085C7;
  --home-btn-bg: rgba(255,255,255,0.2);
  --home-btn-bg-hover: rgba(255,255,255,0.4);
  --save-img-bg: #0085C7;
  --replay-bg: #ff9800;
  --container-border: none;
}

body { font-family: 'Jua', sans-serif; margin: 0; overflow: hidden; background-color: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; color: white; }

.header-area { position: absolute; top: 20px; width: 100%; text-align: center; z-index: 10; transition: opacity 0.3s; }
h1 { margin: 0; font-size: 2.5em; color: var(--title-color); text-shadow: var(--title-shadow); }

.top-home-btn { position: absolute; top: 20px; left: 20px; background: var(--home-btn-bg); color: white; text-decoration: none; padding: 10px 20px; border-radius: 50px; font-size: 1.2em; z-index: 15; transition: opacity 0.3s, background 0.3s; }
.top-home-btn:hover { background: var(--home-btn-bg-hover); }

.canvas-container { position: relative; width: 100%; max-width: 1280px; aspect-ratio: 16/9; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 15px; overflow: hidden; border: var(--container-border); }
canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
video { display: none; }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; padding: 20px; box-sizing: border-box; }
.overlay h2 { font-size: var(--overlay-h2-size); margin-bottom: 30px; text-align: center; line-height: 1.3; color: white; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.overlay p { font-size: 1.8em; color: #ffeb3b; margin-bottom: 30px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; line-height: 1.5; }
.highlight-text { color: #ffeb3b; font-size: 1.2em; }

button { font-family: 'Jua', sans-serif; font-size: 1.8em; padding: 15px 40px; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
#start-btn { background: #ffeb3b; color: #333; }
button:hover { transform: scale(1.05); }

#stop-btn { position: absolute; bottom: 20px; right: 20px; background: #DF0024; color: white; font-size: 1.2em; padding: 10px 20px; display: none; z-index: 10; border-radius: 50px; }

.modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 30; }
.modal-content { background: white; color: #333; padding: 40px; border-radius: 30px; text-align: center; width: 80%; max-width: 500px; }
.modal-content h2 { color: var(--modal-h2-color); font-size: 3em; margin-top: 0; }
.record-text { font-size: 2.5em; margin: 20px 0; color: var(--record-color); }
input[type="text"] { font-family: 'Jua', sans-serif; font-size: 1.5em; padding: 10px; width: 90%; text-align: center; border: 2px solid #ccc; border-radius: 15px; margin-bottom: 20px; }

.btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.btn-group button { font-size: 1.1em; padding: 12px; border-radius: 15px; }
.save-vid { background: #009F3D; color: white; }
.save-img { background: var(--save-img-bg); color: white; }

.replay-btn { background: var(--replay-bg); color: white; width: 100%; margin-bottom: 10px; }
.exit-btn { background: #757575; color: white; width: 100%; font-size: 1.5em; text-decoration: none; display: block; padding: 15px 0; border-radius: 50px; }

/* 카메라 권한 거부/미연결 안내 오버레이 */
.cam-error { background: rgba(0,0,0,0.9); }
.cam-error h2 { color: #ff5252; font-size: 2.4em; margin-bottom: 16px; }
.cam-error p { color: #fff; font-size: 1.4em; line-height: 1.6; margin-bottom: 24px; text-shadow: none; }
.cam-error button { background: #ffeb3b; color: #333; }

/* 반응형 — 태블릿/작은 화면 대응 */
@media (max-width: 900px) {
  h1 { font-size: 1.6em; }
  .overlay h2 { font-size: 2em; }
  .overlay p { font-size: 1.1em; }
  .cam-error h2 { font-size: 1.8em; }
  .cam-error p { font-size: 1.1em; }
  button { font-size: 1.3em; padding: 12px 28px; }
  .top-home-btn { font-size: 1em; padding: 8px 14px; }
  .modal-content { padding: 24px; }
  .modal-content h2 { font-size: 2em; }
  .record-text { font-size: 1.6em; }
}
@media (max-width: 560px) {
  .overlay h2 { font-size: 1.5em; }
  .btn-group { grid-template-columns: 1fr; }
}