/* 1초 기억력 테스트 — 미니게임 아케이드 톤 (pixel-survival · /minigames 와 같은 색), 강조색 하늘색 */
:root{color-scheme:dark;--bg:#070910;--panel:#0e131d;--line:#293245;--text:#f5f7fb;--muted:#8d98a9;--lime:#b8ff3a;--cyan:#37e6ff;--gold:#ffe263;--danger:#ff4268;--ok:#3dff8b;font-family:Inter,"Pretendard","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{overflow:hidden;background:radial-gradient(circle at 50% 0,#14223a 0,transparent 34rem),linear-gradient(#070910,#0c0912)}
button,a{font:inherit;color:inherit}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column}
.top{flex:none;height:60px;display:flex;align-items:center;gap:12px;padding:0 clamp(10px,3vw,28px);border-bottom:1px solid #242b39;background:rgba(7,9,16,.9)}
.brand{flex:none;text-decoration:none;font-weight:900;letter-spacing:.12em;font-size:.8rem}
.brand span{display:inline-grid;place-items:center;background:var(--cyan);color:#041016;border-radius:5px;padding:3px 6px;margin-right:6px;letter-spacing:-.02em}
.hud{flex:1;display:flex;justify-content:center;gap:clamp(10px,3vw,34px);margin:0;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}
.hud div{display:flex;flex-direction:column;align-items:center;min-width:44px}
.hud dt{color:#7d899c;font-size:.6rem;letter-spacing:.16em;font-weight:800}
.hud dd{margin:0;font-size:clamp(.9rem,2.4vw,1.25rem);font-weight:900;font-variant-numeric:tabular-nums}
#hudScore{color:var(--cyan)}
.hud-life dd{color:var(--danger);letter-spacing:.06em}
.hud-life dd.hit{animation:heartHit .45s ease}
.icon-btn{flex:none;width:40px;height:40px;border:1px solid #344056;background:#121927;border-radius:9px;cursor:pointer}
.icon-btn:hover{border-color:var(--cyan)}

.play{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px clamp(10px,3vw,28px) 16px}
.memorize{width:min(560px,100%);height:24px;display:flex;align-items:center;gap:12px;font-weight:900;color:var(--gold);visibility:hidden}
.memorize.on{visibility:visible}
body[data-state="QUESTION"] .memorize,body[data-state="ANSWER_RESULT"] .memorize{display:none}
.memorize b{flex:none;font-size:clamp(.9rem,2.4vw,1.1rem)}
.gauge{flex:1;height:10px;border-radius:99px;background:#1a2232;overflow:hidden;border:1px solid #2a3448}
.gauge i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));transform-origin:left;transform:scaleX(1)}

.board{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--gap,10px);width:var(--board-w,auto);max-width:100%}
.card{position:relative;width:var(--card-w,200px);height:var(--card-h,94px);perspective:900px;animation:cardIn .12s ease-out both;animation-delay:var(--d,0ms)}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease}
.card-front,.card-back{position:absolute;inset:0;width:100%;height:100%;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 18px #0008}
.card-front{display:block;object-fit:cover;background:#111827;border:1px solid #2d3a52;user-select:none;-webkit-user-drag:none}
.card-back{transform:rotateY(180deg);display:grid;place-items:center;border:1px solid #2d3a52;background:repeating-linear-gradient(135deg,#101a2b 0 10px,#0c1422 10px 20px)}
.card-back::after{content:"GHK";font:900 clamp(.6rem,1.6vw,.95rem) ui-monospace,monospace;letter-spacing:.12em;color:#37e6ff66}
.board.flipped .card-inner{transform:rotateY(180deg)}
.board.flipped .card{animation:none}   /* 뒤집힌 보드가 다시 나타날 때(두 번째 질문 직전) cardIn 이 또 돌지 않게 — 움직임 줄이기의 .card 규칙보다 선택자가 구체적이라 이쪽이 이긴다 */
@media(hover:hover){.card:hover .card-front{filter:brightness(1.12)}}
@keyframes cardIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

.question{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.question-card{margin:0;width:var(--q-w,420px);max-width:100%}
.question-card.enter{animation:qIn .15s ease-out both}
.question-card img{display:block;width:100%;aspect-ratio:460/215;object-fit:cover;border-radius:14px;border:3px solid #2d3a52;background:#111827;box-shadow:0 14px 40px #000a;transition:border-color .12s,box-shadow .12s}
.question-card.is-correct img{border-color:var(--ok);box-shadow:0 0 0 4px #3dff8b44,0 14px 40px #000a}
.question-card.is-wrong img{border-color:var(--danger);box-shadow:0 0 0 4px #ff426844,0 14px 40px #000a}
.question-card figcaption{min-height:1.3em;margin-top:8px;text-align:center;font-weight:800;color:#dfe7f3;font-size:.9rem;visibility:hidden;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.question-card.revealed figcaption{visibility:visible}
.question-text{margin:0;text-align:center;font-size:clamp(1rem,2.6vw,1.3rem);line-height:1.35;color:#c9d3e1}
.question-text strong{color:#fff;font-size:1.15em}
.feedback{min-height:2.4em;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;font-weight:900}
.feedback strong{font-size:1.4rem}
.feedback .ok{color:var(--ok)}
.feedback .bad{color:var(--danger)}
.feedback .pts{color:var(--gold);font:900 1.2rem ui-monospace,monospace}
.feedback .truth{color:#dfe7f3}
.feedback .chip{padding:3px 8px;border-radius:6px;background:#1c2536;border:1px solid #33415a;font-size:.75rem;letter-spacing:.08em}
.feedback .chip.fast{background:var(--cyan);border-color:var(--cyan);color:#041016}
@keyframes qIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.answers{display:flex;gap:12px;width:min(560px,100%)}
.answer{flex:1;min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;font-size:1.25rem;font-weight:950;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.answer.yes{background:var(--cyan);color:#041016;box-shadow:0 5px 0 #168aa0}
.answer.no{background:#ff5c7a;color:#1a0309;box-shadow:0 5px 0 #a3243d}
.answer:active{transform:translateY(3px);box-shadow:none}
.answer:disabled{opacity:.55;cursor:default}
.answer kbd{font:800 .7rem ui-monospace,monospace;padding:3px 6px;border-radius:5px;background:#0003}

.overlay{position:absolute;inset:0;z-index:5;display:none;place-items:center;padding:16px;overflow:auto;background:radial-gradient(circle at 50% 40%,rgba(13,23,39,.72),rgba(3,5,10,.95))}
.overlay.visible{display:grid}
.panel{width:min(520px,100%);text-align:center}
.kicker{margin:0 0 10px;color:var(--cyan);font:900 .68rem ui-monospace,monospace;letter-spacing:.2em}
.start-panel h1{margin:0;font:900 clamp(2rem,6vw,3.4rem)/1.05 "Pretendard","Noto Sans KR",sans-serif;letter-spacing:-.02em}
.start-panel h1 span{color:var(--cyan)}
.lead{margin:10px 0 14px;color:var(--gold);font-weight:900;font-size:clamp(1rem,2.6vw,1.25rem)}
.how{display:grid;gap:4px;margin:0 auto 14px;padding:0;list-style:none;color:#c9d3e1;font-size:.85rem}
.how li::before{content:counter(list-item) ". ";color:var(--cyan);font-weight:900}
.records,.stats{display:grid;gap:6px;margin:0 0 12px}
.records{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.over-panel .stats{grid-template-columns:repeat(4,minmax(0,1fr))}   /* 4칸이 한 줄 + SCORE 한 줄 (3열이면 4번째 칸이 혼자 남는다) */
.records div,.stats div{padding:8px 4px;border:1px solid #344057;border-radius:8px;background:#0c121ee8}
.stats .wide{grid-column:1/-1}
.records dt,.stats dt{color:#8491a5;font:800 .58rem ui-monospace,monospace;letter-spacing:.12em}
.records dd,.stats dd{margin:4px 0 0;font:900 clamp(.85rem,2.2vw,1.05rem) ui-monospace,monospace}
.stats .wide dd{color:var(--cyan);font-size:clamp(1.2rem,3.4vw,1.6rem)}
.reward-info,.reward-result{min-height:1.2em;margin:0 0 10px;color:var(--gold);font-size:.78rem}
.start-status{min-height:1.2em;margin:0 0 10px;color:var(--muted);font-size:.8rem}
.start-actions{display:flex;justify-content:center;gap:8px}
.cta,.secondary{min-height:50px;padding:0 24px;border:0;border-radius:9px;font-weight:950;cursor:pointer}
.cta{background:var(--cyan);color:#041016;box-shadow:0 5px 0 #168aa0}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 #168aa0}
.cta:disabled{opacity:.45;cursor:progress}
.cta kbd{margin-left:10px;padding:3px 6px;border-radius:4px;background:#ffffff66;font:700 .62rem ui-monospace,monospace}
.secondary{background:#172033;border:1px solid #3b4963}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:14px 0 0;color:#91a0b4;font-size:.72rem}
.controls b{margin-right:5px;color:#fff}
.intro-panel h2{margin:0;font:900 clamp(2.6rem,9vw,5rem) Impact,"Arial Black",sans-serif;letter-spacing:.03em}
.intro-panel p{color:var(--gold);font-weight:900}
.wait-panel p{color:#dfe7f3;font-weight:800}
.count{display:block;color:var(--cyan);font:900 clamp(3rem,12vw,6rem) Impact,sans-serif}
.clear-panel h2{margin:0 0 12px;font:900 clamp(2rem,7vw,3.6rem) Impact,"Arial Black",sans-serif;color:var(--lime)}
.over-panel h2{margin:0 0 8px;font:900 clamp(1.6rem,5vw,2.6rem) Impact,"Arial Black",sans-serif}
.next-progress{width:min(240px,80%);height:4px;margin:12px auto 0;overflow:hidden;border-radius:9px;background:#1a2232}
.next-progress i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.grade{display:flex;flex-direction:column;align-items:center;margin:0 0 8px}
.grade small{color:var(--muted);font-size:.72rem;font-weight:800}
.grade strong{color:var(--gold);font:900 clamp(2.6rem,9vw,4rem)/1 Impact,sans-serif;text-shadow:0 0 24px #ffe26355}
.grade span{color:#dfe7f3;font-weight:900}
#overScreen.special .grade strong{color:var(--cyan);text-shadow:0 0 28px #37e6ff88}
.new-best{margin:0 0 8px;color:var(--lime);font:900 .72rem ui-monospace,monospace;letter-spacing:.12em}
.over-panel .cta{margin:0 0 14px}
#clearScreen.guarded,#overScreen.guarded{pointer-events:none}   /* 화면이 뜬 뒤 확인 가드 시간(600ms) 동안은 연타가 버튼 · 링크에 닿지 않는다 */
.recent{margin-top:14px}
.recent p{margin:0 0 6px;color:var(--muted);font-size:.75rem}
.recent ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.recent li,.recent a{min-width:0}
.recent a{display:block;color:#c9d3e1;font-size:.68rem;text-decoration:none}
.recent a:hover span{color:var(--cyan)}
.recent img{display:block;width:100%;aspect-ratio:460/215;object-fit:cover;border:1px solid #2d3a52;border-radius:6px}
.recent span{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-link{margin:12px 0 0;color:#9aa7b9;font-size:.75rem}
.home-link a:hover{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes heartHit{30%{transform:scale(1.35);color:#fff}}

/* 모바일: 답 버튼은 화면 맨 아래 좌우 반반 (엄지 위치), 질문 중에만 그만큼 아래 여백 */
@media(max-width:640px),(pointer:coarse) and (max-width:900px){
  .top{height:52px;gap:6px}
  .brand{font-size:0}
  .brand span{margin:0;font-size:.72rem}
  .hud{gap:10px}
  .hud dt{font-size:.5rem}
  .play{gap:8px;padding:8px 8px 10px}
  body[data-state="QUESTION"] .play,body[data-state="ANSWER_RESULT"] .play{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .answers{position:fixed;left:0;right:0;bottom:0;z-index:4;width:auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#070910 30%)}
  .answer{min-height:72px}
  .answer kbd,.cta kbd{display:none}
  .records,.over-panel .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .controls span:first-child{display:none}
  .cta,.secondary{min-height:46px;padding:0 18px}
}

/* 낮은 화면(가로 폰 · 작은 창): 시작 화면의 [게임 시작] · 게임 오버 화면의 [다시 도전] 을 스크롤 없이 */
@media(max-height:620px){
  .overlay{padding:10px 16px}
  .kicker{margin-bottom:4px}
  .lead{margin:6px 0 8px}
  .how{gap:2px;margin-bottom:8px;font-size:.8rem}
  .records{gap:4px;margin-bottom:8px}
  .records div,.stats div{padding:5px 4px}
  .records dd,.stats dd{margin-top:2px}
  .reward-info,.start-status{margin-bottom:6px}
  .controls{margin-top:8px}
  .over-panel h2{margin-bottom:4px}
  .grade{margin-bottom:4px}
  .new-best{margin-bottom:6px}
  .over-panel .cta{margin-bottom:10px}
  .recent{margin-top:10px}
  .home-link{margin-top:8px}
}

/* 아주 낮은 가로 화면(568×320 가로 iPhone SE 등): 질문 문구는 한 줄로, 피드백 줄은 낮게 (질문 카드 폭은 ui.js sizeQuestion 이 남은 높이로 정한다) */
@media(max-height:360px){
  .question-text{font-size:.9rem}
  .question-text br{display:none}
  .feedback{min-height:28px;gap:4px 8px;line-height:1.3}
  .feedback strong{font-size:1.1rem}
  .feedback .pts{font-size:1rem}
  .feedback .chip{padding:2px 6px;font-size:.7rem}
}

/* 휴대폰 가로(높이 420 이하): 시작 화면이 한 화면에 — 기록 4칸을 한 줄로, 머리글을 숨기고 제목을 줄인다(설명 1·2·3 은 남긴다) */
@media(max-height:420px) and (orientation:landscape){
  .kicker{display:none}
  .start-panel h1{font-size:1.6rem}
  .records{grid-template-columns:repeat(4,minmax(0,1fr))}
  .how{font-size:.74rem}
}

/* 움직임 줄이기: 뒤집기 · 크기 변화 대신 짧은 페이드 */
@media(prefers-reduced-motion:reduce){
  .card,.question-card.enter{animation:fadeIn .12s both}
  .card-inner{transition:none}
  .board.flipped .card-inner{transform:none}
  .card-back{transform:none;opacity:0;transition:opacity .2s}
  .card-front{transition:opacity .2s}
  .board.flipped .card-front{opacity:0}
  .board.flipped .card-back{opacity:1}
  .hud-life dd.hit{animation:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}