/* 뺄셈 코너·게임 1. 공용 토큰은 style.css */

/* 뺄셈 화면 색조: 풀색 길 (REQ-SART-002) */
body[data-level="sub"] { --bg: #e6f1dc; --accent: #4f8a3c; --room-1: #dcecd0; --room-2: #c4dfb0; --room-3: #9cc284; }

/* 홈 우측 하단 "뺄셈" 칸 (REQ-SUBM-001) */
.sub-entry {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  padding: 0 24px;
  border-radius: 99px;
  background: #cfe6bf;
  box-shadow: 0 5px 0 rgba(45, 49, 66, 0.14);
  font-size: clamp(18px, 3vmin, 28px);
  font-weight: 800;
}
.sub-entry:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(45, 49, 66, 0.14); }

/* 뺄셈 코너 (REQ-SUBM-002) */
#sub-corner { align-items: center; }
.sub-head { display: flex; align-items: center; gap: var(--gap); width: min(100%, 960px); }
.sub-head h2 { margin: 0; font-size: clamp(26px, 5vmin, 48px); font-weight: 800; }
.sub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); width: min(100%, 960px); margin-top: 2vmin; }
.sub-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(18px, 3.5vmin, 32px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 6px 0 rgba(45, 49, 66, 0.12);
  text-align: left;
}
.sub-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(45, 49, 66, 0.12); }
.sub-card:disabled { opacity: 0.5; }
.sub-card-title { font-size: clamp(20px, 3.6vmin, 32px); font-weight: 800; }
.sub-card-best { padding: 6px 14px; border-radius: 99px; background: #e2efd6; font-size: clamp(15px, 2.6vmin, 22px); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 관문 (REQ-GATE-002, 003) */
.gate-top { display: flex; align-items: center; gap: var(--gap); flex: none; font-size: clamp(18px, 3.2vmin, 30px); }
.gate-top b { flex: 1; }
#gate-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gate-bar { flex: none; }
#gate-fill { height: 100%; background: var(--accent); opacity: 0.7; transform-origin: left; transition: transform 0.2s linear; }
.gate-problem { flex: 1 1 40%; font-size: clamp(44px, 14vmin, 150px); font-weight: 800; font-variant-numeric: tabular-nums; }
.gate-msg { flex: none; min-height: 1.4em; margin: 0; text-align: center; }
.gate-keys-wrap { flex: 1 1 50%; min-height: 0; display: flex; }

/* 본 게임: canvas가 화면 전체, 상자 여백은 그림에서 처리 (REQ-GBOX-001) */
#sub-play { padding: 0; }
#sub-canvas { position: absolute; inset: 0; display: block; touch-action: none; } /* 스크롤·확대 방지 (REQ-JOY-004) */
.play-exit { position: absolute; z-index: 1; opacity: 0.85; }

/* 결과 (REQ-FLOW-005): 부드럽게, 다시 도전을 크게 */
#sub-result { align-items: center; justify-content: center; }
.sr-title { font-size: clamp(30px, 7vmin, 64px); font-weight: 800; }
.btn.big { min-height: 80px; padding: 0 40px; font-size: clamp(22px, 4vmin, 36px); }