/* ============================================================
   🐍 Snake Run - 화면 꾸미기 파일
   만든이: 정연우
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #05070f;
  color: #e8eefc;
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;               /* 폰에서 화면이 밀리거나 확대되지 않게 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hidden { display: none !important; }


/* ── 왼쪽 위 HUD ────────────────────────────── */
#hud {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  width: 210px;
  padding: 10px 12px;
  background: rgba(8, 14, 30, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.hud-top { display: flex; justify-content: space-between; align-items: baseline; }
#hud-level { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
#hud-name { font-size: 13px; opacity: .75; }
.hud-bar {
  margin: 7px 0 5px;
  height: 9px;
  background: rgba(255, 255, 255, .13);
  border-radius: 99px;
  overflow: hidden;
}
#hud-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  transition: width .15s linear;
}
.hud-sub { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; }


/* ── 오른쪽 위 순위표 ───────────────────────── */
#rank-board {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  width: 168px;
  padding: 9px 11px;
  background: rgba(8, 14, 30, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
#rank-board h3 { font-size: 12px; opacity: .7; margin-bottom: 5px; font-weight: 600; }
#rank-list { list-style: none; font-size: 12.5px; }
#rank-list li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2.5px 0;
  opacity: .85;
}
#rank-list li.me { opacity: 1; font-weight: 800; color: #7dd3fc; }
#rank-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank-list .lv { flex: none; opacity: .8; }


/* ── 왼쪽 아래 미니맵 ───────────────────────── */
#minimap {
  position: fixed;
  left: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(8, 14, 30, .62);
  backdrop-filter: blur(6px);
}


/* ── 오른쪽 아래 가상 컨트롤러 (모바일) ─────── */
#stick-pad {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: 24px;
  width: 130px;
  height: 130px;
  touch-action: none;
  z-index: 20;
}
#stick-pad.left { right: auto; left: 24px; }
#stick-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 2px solid rgba(255, 255, 255, .28);
}
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: rgba(125, 211, 252, .55);
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 0 18px rgba(125, 211, 252, .55);
  transition: transform .06s linear;
}


/* ── 화면 위를 덮는 창들 (스플래시/가위바위보/결과) ── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 6, 15, .72);
  backdrop-filter: blur(3px);
}


/* ── 첫 화면 ────────────────────────────────── */
.splash-box { text-align: center; max-width: 460px; }

#title {
  font-size: clamp(42px, 12vw, 84px);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  background: linear-gradient(180deg, #eaf6ff, #7dd3fc 55%, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(125, 211, 252, .35);
  animation: 꿈틀 3.5s ease-in-out infinite;
}
@keyframes 꿈틀 {
  0%, 100% { transform: skewX(0deg)   translateY(0); }
  25%      { transform: skewX(-3deg)  translateY(-3px); }
  75%      { transform: skewX(3deg)   translateY(3px); }
}

/* 번개가 칠 때 제목이 번쩍! */
#title.zap {
  animation: 번쩍 .25s ease-out;
  filter: drop-shadow(0 0 24px #fff);
}
@keyframes 번쩍 {
  0%   { transform: translate(0, 0) scale(1.06); filter: brightness(3); }
  35%  { transform: translate(4px, -3px) scale(1.02); }
  70%  { transform: translate(-3px, 2px) scale(1); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}

.maker { margin-top: 14px; font-size: 15px; opacity: .9; }
.maker b { color: #7dd3fc; }
.maker span { opacity: .6; font-size: 13px; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

#start-btn {
  margin-top: 26px;
  padding: 15px 54px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #04240f;
  background: linear-gradient(180deg, #86efac, #22c55e);
  border-radius: 999px;
  box-shadow: 0 8px 0 #15803d, 0 12px 30px rgba(34, 197, 94, .4);
  transition: transform .08s, box-shadow .08s;
}
#start-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 0 #15803d, 0 6px 18px rgba(34, 197, 94, .35);
}

.record { margin-top: 18px; font-size: 14px; color: #fcd34d; min-height: 20px; }
.howto  { margin-top: 10px; font-size: 13px; opacity: .6; line-height: 1.7; }


/* ── 가위바위보 창 ──────────────────────────── */
.rps-box {
  text-align: center;
  padding: 26px 22px;
  background: rgba(12, 20, 40, .95);
  border: 2px solid rgba(250, 204, 21, .5);
  border-radius: 22px;
  box-shadow: 0 0 60px rgba(250, 204, 21, .25);
  max-width: 420px;
  width: 100%;
}
.rps-title { font-size: 21px; font-weight: 900; color: #fde047; }
#rps-vs { margin-top: 8px; font-size: 14px; opacity: .85; }

.rps-buttons { display: flex; gap: 10px; justify-content: center; margin: 20px 0 12px; }
.rps-buttons button {
  flex: 1;
  max-width: 108px;
  padding: 14px 6px;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  color: #fff;
  transition: transform .08s, background .12s;
}
.rps-buttons button:active { transform: scale(.93); background: rgba(125, 211, 252, .28); }
.rps-buttons .hand  { display: block; font-size: 38px; line-height: 1.1; }
.rps-buttons .label { display: block; font-size: 13px; margin-top: 4px; opacity: .85; }

.rps-timer  { font-size: 15px; color: #fca5a5; min-height: 22px; font-weight: 700; }
.rps-result { font-size: 20px; font-weight: 900; min-height: 30px; margin-top: 6px; }


/* ── 결과 화면 ──────────────────────────────── */
.result-box {
  text-align: center;
  padding: 30px 26px;
  background: rgba(12, 20, 40, .95);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  max-width: 400px;
  width: 100%;
}
#result-title { font-size: 30px; font-weight: 900; color: #fca5a5; }
.reason { margin-top: 8px; font-size: 14px; opacity: .8; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 6px;
}
.stats div {
  padding: 12px 8px;
  background: rgba(255, 255, 255, .07);
  border-radius: 14px;
}
.stats span { display: block; font-size: 12px; opacity: .65; }
.stats b { display: block; font-size: 25px; font-weight: 900; margin-top: 3px; }

.result-buttons { display: flex; gap: 10px; margin-top: 20px; }
.result-buttons button {
  flex: 1;
  padding: 14px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  color: #04240f;
  background: linear-gradient(180deg, #86efac, #22c55e);
  transition: transform .08s;
}
.result-buttons button:active { transform: scale(.96); }
.result-buttons .ghost {
  background: rgba(255, 255, 255, .1);
  color: #e8eefc;
  border: 1px solid rgba(255, 255, 255, .2);
}


/* ── 화면이 작을 때 (폰) ────────────────────── */
@media (max-width: 560px) {
  #hud { width: 158px; padding: 8px 10px; }
  #hud-level { font-size: 18px; }
  #rank-board { width: 132px; font-size: 11px; }
  #rank-list { font-size: 11px; }
  #minimap { width: 118px; height: 89px; }
}