/* 아케이드 느낌의 최소 UI — 게임 화면(캔버스)을 가리지 않는 선에서 크고 또렷하게 */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0c0f16; color: #fff; overflow: hidden;
  font-family: "Arial Black", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ── 상단 점수 ─────────────────────────────────────────── */
#hud { position: fixed; top: 0; left: 0; right: 0; padding: clamp(10px, 2vw, 20px); pointer-events: none; }
#scoreBox { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1;
  padding: clamp(8px, 1.4vw, 14px) clamp(14px, 2.2vw, 24px);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.28));
  border: 3px solid rgba(255,255,255,.85); border-radius: 18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 2px 8px rgba(255,255,255,.25); }
#scoreBox .label { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: .28em; color: #fff3b0;
  text-shadow: 0 2px 0 #b35c00, 0 0 12px rgba(255,220,100,.6); }
#score { font-size: clamp(42px, 7vw, 84px); font-weight: 900; font-variant-numeric: tabular-nums;
  color: #fff; letter-spacing: .02em; margin-top: 4px;
  -webkit-text-stroke: clamp(3px, .5vw, 6px) #7a3b00; paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(122,59,0,.55); }

/* 콤보 뱃지 — 콤보가 오를수록 커지고 색이 튄다(JS가 --c 를 준다) */
#combo { --c: 0; display: inline-block; margin-top: 10px; opacity: 0; transform: scale(.6) rotate(-3deg);
  padding: 6px clamp(12px, 2vw, 22px); border-radius: 999px;
  background: linear-gradient(180deg, #ff5fa2, #d1006c);
  border: 3px solid #fff; box-shadow: 0 5px 0 rgba(120,0,60,.5);
  font-size: calc(clamp(18px, 3vw, 34px) + var(--c) * 2px); font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(120,0,60,.8); letter-spacing: .04em;
  transition: opacity .12s ease-out; }
#combo.show { opacity: 1; animation: comboPop .32s cubic-bezier(.2,1.7,.5,1) both; }
@keyframes comboPop {
  0%   { transform: scale(.5) rotate(-8deg); }
  60%  { transform: scale(1.18) rotate(2deg); }
  100% { transform: scale(1) rotate(-2deg); }
}

/* 남은 시간 — 점수 상자와 같은 모양으로 오른쪽 위에 둔다 */
#timerBox { position: absolute; top: clamp(10px, 2vw, 20px); right: clamp(10px, 2vw, 20px);
  display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1;
  padding: clamp(8px, 1.4vw, 14px) clamp(14px, 2.2vw, 24px);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.28));
  border: 3px solid rgba(255,255,255,.85); border-radius: 18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.28), inset 0 2px 8px rgba(255,255,255,.25); }
#timerBox .label { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: .28em; color: #b8ecff;
  text-shadow: 0 2px 0 #1d5f8a; }
#timer { font-size: clamp(42px, 7vw, 84px); font-weight: 900; font-variant-numeric: tabular-nums;
  color: #fff; margin-top: 4px; -webkit-text-stroke: clamp(3px, .5vw, 6px) #1d4f7a; paint-order: stroke fill; }
#timer.low { color: #ff4d4d; -webkit-text-stroke-color: #6b0000; animation: timerPulse .5s ease-in-out infinite alternate; }
@keyframes timerPulse { from { transform: scale(1); } to { transform: scale(1.12); } }

#status { margin-top: 10px; font-family: system-ui, -apple-system, sans-serif; font-weight: 600;
  font-size: clamp(12px, 1.5vw, 15px); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); opacity: .92; }


/* ── 웹캠(왼쪽 아래, 작게) ─────────────────────────────── */
#camPanel { position: fixed; left: clamp(10px, 1.6vw, 18px); bottom: clamp(10px, 1.6vw, 18px);
  width: 460px; max-width: 34vw; border-radius: 18px; overflow: hidden;
  border: 4px solid #fff; background: #0b0f14; line-height: 0; pointer-events: none; z-index: 5;
  box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 0 0 3px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35); }
#camPanel.hidden { display: none; }
#cam { width: 100%; height: auto; display: block; transform: scaleX(-1); filter: saturate(1.15) contrast(1.05); }
/* 안쪽 모서리 브라켓 — 게임 UI 느낌 */
.camFrame { position: absolute; inset: 8px; border-radius: 10px; pointer-events: none;
  background:
    linear-gradient(#ffe066,#ffe066) left top/18px 4px no-repeat,
    linear-gradient(#ffe066,#ffe066) left top/4px 18px no-repeat,
    linear-gradient(#ffe066,#ffe066) right top/18px 4px no-repeat,
    linear-gradient(#ffe066,#ffe066) right top/4px 18px no-repeat,
    linear-gradient(#ffe066,#ffe066) left bottom/18px 4px no-repeat,
    linear-gradient(#ffe066,#ffe066) left bottom/4px 18px no-repeat,
    linear-gradient(#ffe066,#ffe066) right bottom/18px 4px no-repeat,
    linear-gradient(#ffe066,#ffe066) right bottom/4px 18px no-repeat; }
#camLabel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font: 900 11px/1.2 "Arial Black", system-ui, sans-serif; letter-spacing: .16em;
  color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); }
#camLabel .rec { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; display: inline-block;
  box-shadow: 0 0 8px #ff3b3b; animation: blink 1.1s infinite steps(1, end); }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: .15; } }

/* ── 시작 화면 ─────────────────────────────────────────── */
#start { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 24px; z-index: 10;
  background: radial-gradient(120% 90% at 50% 0%, #6fd0ff 0%, #49b8f5 45%, #3da648 46%, #2f7d37 100%); }
#start.hidden { display: none; }
#start h1 { margin: 0; font-size: clamp(34px, 8vw, 72px); color: #fff;
  -webkit-text-stroke: clamp(4px, .7vw, 8px) #7a3b00; paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(122,59,0,.5); transform: rotate(-2deg); }
#start p { margin: 0; max-width: 560px; line-height: 1.7; font-family: system-ui, sans-serif; font-weight: 600;
  text-shadow: 0 2px 6px rgba(0,0,0,.35); }
#startBtn { padding: 16px 34px; font-size: clamp(17px, 2.4vw, 22px); font-weight: 900; border: 4px solid #fff;
  border-radius: 999px; background: linear-gradient(180deg, #ffd23f, #ff9f1c); color: #7a3b00; cursor: pointer;
  box-shadow: 0 7px 0 rgba(122,59,0,.55); letter-spacing: .04em; }
#startBtn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(122,59,0,.55); }

/* ── 결과 화면 ─────────────────────────────────────────── */
#result { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(10px, 2vh, 18px); text-align: center; padding: 24px;
  background: rgba(8, 20, 34, .78); }
#result.hidden { display: none; }
#result h2 { margin: 0; font-size: clamp(28px, 5vw, 52px); color: #fff3b0; letter-spacing: .06em;
  text-shadow: 0 4px 0 #b35c00; }
.resultScore { line-height: 1; }
#resultScore { font-size: clamp(90px, 18vw, 200px); font-weight: 900; font-variant-numeric: tabular-nums; color: #fff;
  -webkit-text-stroke: clamp(4px, .8vw, 9px) #7a3b00; paint-order: stroke fill; text-shadow: 0 10px 0 rgba(122,59,0,.55); }
.resultScore small { font-size: clamp(24px, 4vw, 44px); margin-left: 8px; }
#resultNew { padding: 6px 22px; border-radius: 999px; background: linear-gradient(180deg, #ff5fa2, #d1006c);
  border: 3px solid #fff; font-size: clamp(18px, 2.6vw, 28px); }
#resultNew.hidden { display: none; }
#result dl { display: grid; grid-template-columns: auto auto; gap: 6px 28px; margin: 0;
  font-family: system-ui, -apple-system, sans-serif; font-size: clamp(16px, 2.2vw, 24px); }
#result dt { text-align: right; opacity: .8; font-weight: 600; }
#result dd { margin: 0; text-align: left; font-weight: 900; font-variant-numeric: tabular-nums; }
#retryBtn { margin-top: 8px; padding: 16px 40px; font-size: clamp(18px, 2.6vw, 26px); font-weight: 900; border: 4px solid #fff;
  border-radius: 999px; background: linear-gradient(180deg, #ffd23f, #ff9f1c); color: #7a3b00; cursor: pointer;
  box-shadow: 0 7px 0 rgba(122,59,0,.55); font-family: inherit; }
#retryBtn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(122,59,0,.55); }