/* ============================================================
   텅텅 (TENTEN) — 게임 화면 전용
   site.css 다음에 로드한다. 여기가 병맛의 본진.
   단, 게임판(canvas) 안쪽 숫자 가독성은 절대 해치지 않는다.
   ============================================================ */

.game-main {
  /* game.js 의 layout() 이 게임판 실제 폭으로 덮어쓴다 */
  --board-w: 860px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 8px;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 상단 정보 ---------- */

.hud {
  width: var(--board-w);
  max-width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.stat {
  background: #fff;
  border: 3px solid #000;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #000;
  padding: 5px 14px;
  line-height: 1.15;
  color: #000;
}

.stat .label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--hot);
}

.stat .value {
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stat.time { background: var(--yellow); }
.stat.time .value.urgent {
  color: #d40000;
  animation: panic 0.35s steps(2) infinite;
}

@keyframes panic {
  50% { transform: scale(1.18) rotate(-3deg); }
}

.spacer { flex: 1; }

.game-main button {
  font-family: var(--font-meme);
  font-size: 1.05rem;
  font-weight: 900;
  color: #000;
  background: var(--lime);
  border: 3px solid #000;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #000;
  padding: 8px 18px;
  cursor: pointer;
}

.game-main button:hover { background: var(--cyan); }
.game-main button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }

/* ---------- 남은 시간 ---------- */

.timebar {
  width: var(--board-w);
  max-width: 100%;
  height: 16px;
  border: 3px solid #000;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  box-shadow: 4px 4px 0 #000;
}

.timebar > div {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(45deg,
      var(--lime) 0 10px, #4bd41a 10px 20px);
}

.timebar > div.urgent {
  background: repeating-linear-gradient(45deg,
      #ff5252 0 10px, #ffe600 10px 20px);
  animation: slide 0.4s linear infinite;
}

@keyframes slide {
  to { background-position: 28px 0; }
}

/* ---------- 게임판 ---------- */

.board-wrap {
  position: relative;
  background: #fff;
  border: 5px solid #000;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.8);
  touch-action: none;
}

.board-wrap canvas { display: block; }

/* 콤보 때 화면이 들썩인다 */
.board-wrap.shake { animation: shake 0.22s ease; }

@keyframes shake {
  25% { transform: translate(-5px, 3px) rotate(-0.8deg); }
  50% { transform: translate(4px, -3px) rotate(0.8deg); }
  75% { transform: translate(-3px, -2px); }
}

/* ---------- 콤보 외침 ---------- */

.shout {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: var(--font-meme);
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 900;
  color: var(--yellow);
  text-shadow:
    4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000,
    0 0 22px rgba(255, 45, 149, 0.9);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
}

.shout.pop { animation: shout 0.7s ease-out; }

@keyframes shout {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-14deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(6deg); }
  70% { opacity: 1; transform: translate(-50%, -62%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(0.9); }
}

/* ---------- 시작 / 결과 화면 ---------- */

.overlay {
  position: absolute;
  inset: 8px;
  background: rgba(10, 0, 25, 0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  color: #fff;
  z-index: 10;
}

.overlay.hidden { display: none; }

.overlay h1 {
  font-family: var(--font-meme);
  font-size: clamp(2rem, 8vw, 3.4rem);
  margin: 0;
  line-height: 1.1;
}

.overlay p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.8;
}

.overlay .big {
  font-family: var(--font-meme);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 4px 4px 0 #000, -3px -3px 0 #000;
}

.overlay .big small { font-size: 1.1rem; opacity: 0.55; }

.overlay .rank {
  font-size: 1.15rem;
  font-weight: 900;
  background: var(--hot);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 6px 16px;
  transform: rotate(-1.5deg);
}

.hint {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 2px dashed var(--yellow);
  border-radius: 999px;
  padding: 4px 16px;
}

/* ---------- 게임 아래 소개 문단 ---------- */

.blurb {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 20px 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.9;
  text-align: center;
  text-shadow: 1.5px 1.5px 0 #000;
}

.blurb b { color: var(--yellow); }
.blurb a { color: #fff; text-decoration: underline wavy var(--yellow); text-underline-offset: 3px; }

/* ---------- 좁은 화면 ----------
   HUD 가 두 줄로 벌어지면 게임판에 줄 세로 공간이 그만큼 사라진다. 최대한 압축한다. */

@media (max-width: 640px) {
  .game-main { gap: 9px; padding: 10px 8px 6px; }
  /* 게임판 폭에 묶어두면 판이 좁을 때 HUD 가 두 줄로 벌어지고,
     그만큼 높이를 뺏겨 판이 더 좁아지는 악순환이 생긴다. */
  .hud { gap: 6px; width: 100%; }
  .spacer { display: none; }
  .stat { padding: 3px 9px; box-shadow: 3px 3px 0 #000; border-width: 2px; }
  .stat .label { font-size: 0.52rem; letter-spacing: 0.06em; }
  .stat .value { font-size: 1.05rem; }
  .game-main button { font-size: 0.9rem; padding: 5px 12px; box-shadow: 3px 3px 0 #000; border-width: 2px; }
  .timebar { height: 11px; border-width: 2px; box-shadow: 3px 3px 0 #000; }
  .board-wrap { padding: 5px; border-width: 3px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8); }
  .hint { font-size: 0.72rem; padding: 3px 11px; }
  .blurb { font-size: 0.82rem; padding: 8px 14px 0; }
  .overlay { inset: 5px; padding: 14px; gap: 10px; }
  .overlay p { font-size: 0.82rem; line-height: 1.7; }
}

/* 가로로 눕힌 휴대폰 — 힌트를 접어 게임판에 높이를 몰아준다 */
@media (max-height: 520px) and (orientation: landscape) {
  .game-main { gap: 7px; padding: 7px 8px 4px; }
  .hint { display: none; }
  .hud { width: 100%; gap: 6px; }
  .spacer { display: none; }
  .stat { padding: 2px 10px; box-shadow: 3px 3px 0 #000; border-width: 2px; }
  .stat .label { font-size: 0.5rem; }
  .stat .value { font-size: 0.98rem; }
  .game-main button { font-size: 0.85rem; padding: 4px 12px; box-shadow: 3px 3px 0 #000; border-width: 2px; }
  .timebar { height: 9px; border-width: 2px; box-shadow: 3px 3px 0 #000; }
  .board-wrap { padding: 4px; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat.time .value.urgent,
  .timebar > div.urgent,
  .board-wrap.shake,
  .shout.pop { animation: none !important; }
  .shout.pop { opacity: 0; }
}