/* 훈련 모듈 공통 "게임 껍데기" — 화면 전환 카드, 타이머 위젯, 결과·랭킹등록 UI.
   이 패턴은 사칙연산 암산뿐 아니라 카드 암기·이미지 암기 등 시간 제한형 훈련이라면 대부분
   그대로 재사용 가능해서 shared로 분리했다. 종목 고유의 선택 화면(연산/유형/스테이지 카드 등)은
   각 모듈 폴더 안의 전용 CSS에 남겨둔다. */

/* 월간대회 라운드 진행 배너 — .stage 안 절대배치 .deco 위에 뜨도록 z-index로 겹침 방지 */
.cup-round-banner { max-width: 480px; margin: 0 auto 20px; position: relative; z-index: 1; }
.cup-round-done__total { font-size: 15px; color: var(--text-dim); margin-bottom: 16px; }
.cup-round-done__total b { color: var(--primary-dark); font-size: 20px; }

.screen, .card { position: relative; z-index: 1; }
.screen { display: none; width: 100%; }
.screen.is-active { display: flex; justify-content: center; }

.card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 32px;
  text-align: center;
  overflow: hidden;
  animation: cardIn .4s cubic-bezier(.22, 1, .36, 1);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--game));
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

.eyebrow { font-size: 13px; font-weight: 600; color: var(--game); letter-spacing: .04em; margin-bottom: 8px; }
.title { font-size: 28px; font-weight: 800; color: var(--primary-dark); margin-bottom: 16px; letter-spacing: -.02em; }
.desc { font-size: 14px; color: var(--text-mute); margin-bottom: 24px; }

.back-link {
  display: inline-flex; align-items: center; gap: 4px; width: auto;
  border: none; background: var(--bg); color: var(--text-mute);
  font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 6px 12px 6px 8px; margin-bottom: 16px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.back-link .icon { width: 14px; height: 14px; }
.back-link:hover { background: var(--primary-pale); color: var(--primary-dark); }

/* Play HUD */
.play-hud { display: flex; gap: 16px; width: 100%; max-width: 420px; margin-bottom: 16px; }
.hud-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px;
  text-align: center; transition: border-color .2s ease, box-shadow .2s ease;
}
.hud-label { display: block; font-size: 12px; color: var(--text-mute); }
.hud-value { display: block; font-size: 24px; font-weight: 800; color: var(--primary-dark); }
.hud-icon { color: var(--game); }
.hud-icon .icon { width: 20px; height: 20px; }

.timer-ring { position: relative; width: 72px; height: 72px; }
.timer-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring__track { fill: none; stroke: var(--primary-pale); stroke-width: 6; }
.timer-ring__fill {
  fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 188.5; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.timer-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--primary-dark); }
.hud-item--timer.is-warning .timer-ring__fill { stroke: var(--game); }
.hud-item--timer.is-warning .timer-ring__value { color: var(--game); }
.hud-item--timer.is-danger .timer-ring__fill { stroke: var(--wrong); }
.hud-item--timer.is-danger .timer-ring__value { color: var(--wrong); }
.hud-item--timer.is-danger { animation: pulseDanger 1s ease-in-out infinite; }
@keyframes pulseDanger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50% { box-shadow: 0 0 0 6px rgba(220,38,38,.08); }
}

.quit-link-row { display: flex; justify-content: flex-start; width: 100%; max-width: 420px; }
.quit-link {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-mute);
  font-size: 12px; font-weight: 700; border-radius: 999px;
  padding: 7px 14px 7px 10px; margin-top: 14px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.quit-link .icon { width: 13px; height: 13px; }
.quit-link:hover { border-color: var(--wrong); color: var(--wrong); background: var(--wrong-bg); }

/* Result */
.result-score { font-size: 48px; font-weight: 800; color: var(--primary-dark); margin-bottom: 8px; }
.result-score__unit { font-size: 18px; font-weight: 600; color: var(--text-mute); margin-left: 6px; }
.result-correct { font-size: 13px; color: var(--text-mute); margin-bottom: 20px; }
.result-correct__total { font-size: 11px; opacity: .7; }
.result-tier { margin-bottom: 28px; }
.result-tier__badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--game); background: var(--game-pale); padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
}
.result-tier__badge .icon { width: 15px; height: 15px; }
.result-tier[data-tier="mid"] .result-tier__badge { color: var(--primary); background: var(--primary-pale); }
.result-tier[data-tier="low"] .result-tier__badge,
.result-tier[data-tier="practice"] .result-tier__badge { color: var(--text-mute); background: var(--bg); }
.result-bar { display: block; width: 100%; height: 8px; background: var(--primary-pale); border-radius: 999px; overflow: hidden; }
.result-bar__fill {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--game));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

/* 랭킹 등록 폼 — 회원·비회원 공통, 실시간 무료 랭크에 제출 */
.ranking-entry { margin-bottom: 20px; padding: 16px; border-radius: var(--radius-md); background: var(--primary-pale); border: 1px solid var(--line); }
.ranking-entry__title { font-size: 13px; font-weight: 800; color: var(--primary-dark); margin-bottom: 10px; }
.ranking-entry__form { display: flex; flex-direction: column; gap: 8px; }
.ranking-entry__input {
  width: 100%; font-size: 14px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-md);
  color: var(--text); background: var(--surface); text-align: left; transition: border-color .15s ease;
}
.ranking-entry__input:focus { outline: none; border-color: var(--primary); }
.ranking-entry__done { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--correct); padding: 10px 0; }
.ranking-entry__done .icon { width: 16px; height: 16px; }
.ranking-entry__done.is-hidden,
.ranking-cosmetic-link.is-hidden,
.ranking-entry__form.is-hidden { display: none; }

.result-actions { margin-bottom: 10px; }
.result-nav { display: flex; gap: 8px; margin-bottom: 16px; }
.result-nav__btn {
  flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--text-mute);
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 9px 6px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.result-nav__btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-pale); }
.result-note { font-size: 13px; color: var(--text-mute); }
.result-auth-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.result-auth-links.is-hidden { display: none; }
.result-auth-links__btn { border: none; background: transparent; color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.result-auth-links__btn:hover { text-decoration: underline; }
.result-auth-links__divider { color: var(--line); font-size: 12px; }

/* 이 화면(결과) 안에 표시하는 미니 랭킹 패널 — shared/css/rank.css의 .rank-row를 재사용하되
   카드 폭에 맞춰 여백만 살짝 좁힘 */
.result-live-rank { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.result-live-rank__title { font-size: 13px; font-weight: 800; color: var(--primary-dark); margin-bottom: 8px; text-align: center; }
.result-live-rank .rank-row { padding: 8px 4px; font-size: 12.5px; }

@media (max-width: 480px) {
  .card { padding: 32px 22px; }
}