/* 카드 순서 암기 모듈 전용 스타일 — 안내 화면, 플레이 화면의 암기·판별 카드.
   공통 껍데기(화면 전환·카드·타이머·결과·랭킹등록)는 shared/css/game-shell.css,
   버튼·nav·푸터·모달·랭킹행은 shared/css/{base,nav,footer,modal,rank}.css 참고(허브·다른 모듈과 공용).
   play-title-sticky/play-hud-sticky/play-challenge/judge-actions/screen#screen-play 오버라이드는
   arithmetic.css·spatial-rotation.css와 동일 패턴을 이 모듈에도 그대로 둠(모듈별 각자 보유 컨벤션). */

.stage {
  position: relative;
  min-height: calc(100vh - 60px);
  /* flex-direction 기본값(row)이면 월간대회 배너(.cup-round-banner)가 .screen 카드와
     나란히 가로로 놓여 가운데 정렬 그룹째로 왼쪽에 밀려 보인다(2026-08-06) — column으로
     세로 스택. 평소(배너 없이 .screen 하나만 보일 때)는 항목이 1개뿐이라 결과 동일. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(0,85,157,.07), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(255,106,61,.08), transparent 45%),
    radial-gradient(rgba(0,85,157,.08) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
/* 배경 장식용 카드 윤곽 — 콘텐츠 아님 */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco-shape { position: absolute; border: 6px solid var(--primary); opacity: .06; border-radius: 10px; }
.deco-shape--1 { top: 8%; left: 8%; width: 70px; height: 96px; transform: rotate(-14deg); }
.deco-shape--2 { top: 60%; left: 6%; width: 56px; height: 78px; border-color: var(--game); opacity: .09; transform: rotate(18deg); }
.deco-shape--3 { top: 14%; right: 8%; width: 62px; height: 86px; transform: rotate(22deg); }
.deco-shape--4 { bottom: 10%; right: 10%; width: 66px; height: 90px; border-color: var(--game); opacity: .08; transform: rotate(-10deg); }
@media (max-width: 640px) { .deco-shape { display: none; } }

.benefit-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: -12px; margin-bottom: 24px; }
.benefit-strip__item {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: var(--primary); background: var(--primary-pale); border-radius: 999px; padding: 6px 10px;
}
.benefit-strip__item .icon { width: 14px; height: 14px; flex-shrink: 0; }

.brand-slogan { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.brand-slogan__title { font-size: 13px; font-weight: 800; color: var(--primary); letter-spacing: .02em; margin-bottom: 6px; }
.brand-slogan__body { font-size: 12px; color: var(--text-mute); line-height: 1.6; }

.rule-preview { margin-bottom: 20px; }
.rule-preview__caption { margin-top: 10px; font-size: 12px; color: var(--text-mute); }

/* 카드 한 줄 — 암기/판별 공용, js가 renderCardRow()로 채움.
   정식 트럼프카드 레이아웃(좌상단·우하단 인덱스 + 가운데 큰 문양)을 이미지 없이 CSS만으로 구현.
   4열 고정 그리드 — 4장=1행, 8장=2행, 16장=4행으로 항상 "1행 4열" 기준을 유지(개수만 달라짐). */
.mem-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
.mem-card {
  position: relative;
  width: 100%; aspect-ratio: 72 / 100; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 3px 8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
}
/* 순차공개 중 아직 안 나온 자리 — 박스 크기는 처음부터 확정, 내용만 비어있는 상태로 표시해
   해상도에 따라 화면이 짤리거나 그리드 크기가 커졌다 작아졌다 하지 않게 함.
   카드 뒷면처럼 멘사 심볼(텍스트 워드마크 제외, 아이콘만 잘라낸 shared/images/mensa-mark.png)을
   옅은 워터마크로 깔아 빈 자리라는 느낌을 줌. */
.mem-card--empty { border-style: dashed; background: var(--bg); box-shadow: none; overflow: hidden; }
.mem-card--empty::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../../../shared/images/mensa-mark.png");
  background-repeat: no-repeat; background-position: center; background-size: 46% auto;
  opacity: .18;
}
.mem-card--pop { animation: cardReveal .3s cubic-bezier(.22,1,.36,1); }
.mem-card__index {
  position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
}
.mem-card__index--tl { top: 6px; left: 6px; }
.mem-card__index--br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.mem-card__pip { font-size: 34px; line-height: 1; }
.mem-card--red { color: var(--wrong); }
.mem-card--black { color: var(--text); }
@keyframes cardReveal {
  from { transform: rotateY(90deg) scale(.9); opacity: 0; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .mem-card--pop { animation: none; } }

.mem-row--sample { max-width: 220px; gap: 6px; }
.mem-row--sample .mem-card__index { font-size: 9px; }
.mem-row--sample .mem-card__index--tl { top: 3px; left: 3px; }
.mem-row--sample .mem-card__index--br { bottom: 3px; right: 3px; }
.mem-row--sample .mem-card__pip { font-size: 20px; }

/* 난이도 선택 카드 */
.diff-select { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.diff-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md);
  padding: 16px 20px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.diff-card:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(0,85,157,.12); transform: translateY(-1px); }
.diff-card__tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-pale); border-radius: 999px; padding: 3px 10px; margin-bottom: 2px; }
.diff-card__count { font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.diff-card__desc { font-size: 12px; color: var(--text-mute); }

/* display:none 대신 visibility — 순차공개 중엔 안 보이지만 자리(높이)는 항상 차지하게 해서,
   공개가 끝나고 카운트바가 나타날 때 카드 그리드 전체가 수직 재정렬되며 살짝 움직이는 걸 방지 */
.mem-countdown-track.is-hidden { visibility: hidden; }

.mem-phase { display: none; flex-direction: column; align-items: center; width: 100%; }
.mem-phase.is-active { display: flex; }
.mem-phase__label { font-size: 14px; font-weight: 700; color: var(--text-mute); margin-bottom: 16px; transition: color .15s ease; }
.mem-phase.is-correct .mem-phase__label { color: var(--correct); }
.mem-phase.is-wrong .mem-phase__label { color: var(--wrong); }
.mem-phase.is-correct .mem-card,
.mem-phase.is-wrong .mem-card { transition: border-color .15s ease; }
.mem-phase.is-correct .mem-card { border-color: var(--correct); }
.mem-phase.is-wrong .mem-card { border-color: var(--wrong); }

.mem-countdown-track { width: 200px; max-width: 100%; height: 6px; background: var(--primary-pale); border-radius: 999px; margin-top: 20px; overflow: hidden; }
.mem-countdown-bar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary), var(--game)); transform-origin: left; }
.mem-countdown-bar.is-counting { transition: width linear; width: 0%; }

.screen#screen-play.is-active { flex-direction: column; align-items: center; }
.play-title-sticky, .play-hud-sticky { display: flex; flex-direction: column; align-items: center; width: 100%; }
@media (max-width: 640px) {
  .play-title-sticky { position: sticky; top: 0; z-index: 21; padding-top: 8px; }
  .play-hud-sticky { position: sticky; top: 50px; z-index: 20; }
}
.play-challenge {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 24px; padding: 7px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-pale), var(--game-pale)); border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(0,85,157,.1);
}
.play-challenge__icon { width: 17px; height: 17px; color: var(--game); }
.play-challenge__text { font-size: 16px; font-weight: 800; color: var(--primary-dark); letter-spacing: -.01em; }

.card--play { padding: 48px 32px; }

.judge-actions { display: none; gap: 12px; margin-top: 24px; width: 100%; }
.judge-actions.is-active { display: flex; }
.btn--judge { flex: 1; font-size: 16px; padding: 16px; }
.btn--judge-true { background: var(--correct); color: var(--surface); }
.btn--judge-true:hover { background: #128A3A; }
.btn--judge-false { background: var(--wrong); color: var(--surface); }
.btn--judge-false:hover { background: #B91C1C; }

@media (max-width: 480px) {
  .card { padding: 32px 22px; }
  .mem-row { max-width: 280px; gap: 6px; }
}