/* 타자 대작전 — 스타일 근거: Design Diversity 'web-poetic-hospitality-scroll'
   풀블리드 풍경 + 베일, 전 텍스트 세리프, radius 0, 그림자 없음, 강조는 테라코타 한 톤(헤어라인·커서만).
   색 대비(color-palette 스킬 검증, 베일 #1c160e 기준): 정타 16.9 / 대기 8.5 / 오타 7.2 */
:root {
  --sand:#f3ede2; --ink:#1c160e; --white:#fbf8f1; --wait:#b8b2a6; --err:#e0906a; --soft:#dbac98; --terra:#b4623f;
  --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:var(--ink); color:var(--white); font-family:var(--serif); font-weight:400; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ── 배경: 두 장을 디졸브, 진행도에 따라 선명해진다 ── */
#bg { position:fixed; inset:0; overflow:hidden; background:var(--ink); }
#bg .img { position:absolute; inset:-4%; background-size:cover; background-position:center; opacity:0;
  filter:blur(var(--blur,10px)) brightness(var(--bright,.5)) saturate(var(--sat,.55));
  transition:opacity 1200ms ease-in-out, filter 1400ms ease-in-out; animation:kenburns 48s linear infinite alternate; }
#bg .img.on { opacity:1; }
#bg .veil { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(28,22,14,.30), rgba(28,22,14,.62)); }
@keyframes kenburns { from { transform:scale(1) translate(0,0); } to { transform:scale(1.08) translate(-1.2%,-.8%); } }

#app { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; overflow-y:auto; padding:clamp(24px,5vh,72px) clamp(20px,5vw,72px); }
.screen { width:100%; max-width:760px; margin:auto; animation:rise 1100ms var(--ease) both; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

.label { font-size:.8125rem; font-weight:500; letter-spacing:.2em; color:var(--soft); }
.hair { width:56px; height:1px; background:var(--terra); margin:22px 0; }
.display { font-weight:300; font-size:clamp(2.2rem,5.5vw,4.2rem); line-height:1.16; letter-spacing:.005em; }
.lead { font-size:1.0625rem; line-height:1.8; color:var(--sand); opacity:.92; }

/* 밑줄이 좌→우로 그어지는 텍스트 버튼 */
.link { position:relative; display:inline-block; padding:6px 0; font-size:1.0625rem; color:var(--white); text-decoration:none; }
.link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--terra);
  transform:scaleX(0); transform-origin:left; transition:transform 320ms ease; }
.link:hover::after, .link:focus-visible::after { transform:scaleX(1); }
.link.dim { color:var(--wait); font-size:.9375rem; }

/* ── 타이틀 메뉴 ── */
.menu { list-style:none; margin-top:8px; }
.menu li { border-top:1px solid rgba(251,248,241,.16); }
.menu li:last-child { border-bottom:1px solid rgba(251,248,241,.16); }
.menu button { display:flex; width:100%; align-items:baseline; gap:18px; padding:17px 2px; text-align:left; transition:padding 320ms ease; }
.menu button:hover { padding-left:12px; }
.menu .no { font-style:italic; font-weight:300; color:var(--terra); filter:brightness(1.45); width:1.6em; }
.menu .t { font-size:1.375rem; font-weight:400; }
.menu .d { margin-left:auto; font-size:.875rem; color:var(--wait); text-align:right; }
.foot { display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:26px; align-items:center; }
#lb { margin-top:26px; font-size:.9375rem; color:var(--sand); }
#lb .row { display:flex; gap:14px; padding:5px 0; max-width:340px; }
#lb .row .n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lb .row .s { font-variant-numeric:tabular-nums; }
#lb .row.me { color:var(--soft); }

/* ── 타자 화면 ── */
.play { display:flex; flex-direction:column; min-height:100%; max-width:820px; }
.bar { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.bar .where { font-size:.9375rem; color:var(--sand); }
.stage { margin:auto 0; padding:clamp(22px,4vh,44px) clamp(18px,3vw,40px); background:rgba(28,22,14,.58); }
.stage .hair { margin:0 0 18px; }
.seglabel { font-style:italic; font-weight:300; color:var(--soft); font-size:1.0625rem; margin-bottom:12px; }
.line { font-size:clamp(1.5rem,2.6vw,1.95rem); line-height:1.95; word-break:keep-all; font-weight:400; }
.line span { color:var(--wait); transition:color 160ms ease; }
.line .ok { color:var(--white); }
.line .bad { color:var(--err); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.line .ing, .line .cur { color:var(--white); box-shadow:inset 0 -2px 0 var(--terra); }
.line .cur { color:var(--wait); animation:blink 1.1s steps(2) infinite; }
.line { white-space:pre-wrap; } .line .sp { word-spacing:.18em; }
@keyframes blink { 50% { box-shadow:inset 0 -2px 0 transparent; } }
.line.word { text-align:center; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.5; font-weight:300; }
.echo { min-height:1.9em; margin-top:14px; font-size:1.0625rem; color:var(--soft); white-space:nowrap; overflow:hidden; direction:rtl; text-align:left; }
.echo bdi { direction:ltr; unicode-bidi:isolate; }
.next { margin-top:18px; font-size:1rem; line-height:1.7; color:var(--wait); opacity:.75; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.next.word { text-align:center; -webkit-line-clamp:1; letter-spacing:.06em; }
.stats { display:flex; gap:clamp(22px,5vw,56px); margin-top:22px; align-items:flex-end; }
.stat .v { font-size:1.75rem; font-weight:300; font-variant-numeric:tabular-nums; line-height:1.1; }
.stat .k { font-size:.75rem; letter-spacing:.2em; color:var(--soft); margin-top:4px; }
.prog { flex:1; height:1px; background:rgba(251,248,241,.2); align-self:center; position:relative; }
.prog i { position:absolute; left:0; top:0; height:1px; background:var(--terra); filter:brightness(1.5); width:0; transition:width 400ms ease; }
.hint { margin-top:14px; font-size:.875rem; color:var(--wait); min-height:1.4em; }

/* 자리 연습 키보드 가이드 — 단색, 다음 키만 테라코타 */
.kb { margin:22px auto 0; width:max-content; max-width:100%; user-select:none; }
.kb .r { display:flex; gap:5px; margin-top:5px; }
.kb .r:nth-child(2) { padding-left:18px; } .kb .r:nth-child(3) { padding-left:42px; } .kb .r:nth-child(4) { justify-content:center; }
.kb b { width:42px; height:40px; display:flex; align-items:center; justify-content:center; font-weight:400; font-size:1rem;
  border:1px solid rgba(251,248,241,.22); color:var(--wait); background:rgba(28,22,14,.45); transition:background 160ms ease, color 160ms ease; }
.kb b.wide { width:74px; font-size:.75rem; letter-spacing:.1em; } .kb b.space { width:250px; }
.kb b.home { border-bottom-color:var(--soft); }
.kb b.on { background:var(--terra); border-color:var(--terra); color:var(--white); }
.finger { text-align:center; margin-top:12px; font-size:.9375rem; color:var(--sand); min-height:1.5em; }

/* ── 목록(시편·단계) ── */
.list { list-style:none; margin-top:6px; }
.list li { border-top:1px solid rgba(251,248,241,.16); }
.list li:last-child { border-bottom:1px solid rgba(251,248,241,.16); }
.list button { display:flex; width:100%; gap:16px; align-items:baseline; padding:14px 2px; text-align:left; transition:padding 320ms ease; }
.list button:hover { padding-left:12px; }
.list .no { font-style:italic; font-weight:300; color:var(--soft); min-width:4.2em; }
.list .t { font-size:1.125rem; flex:1; }
.list .d { font-size:.8125rem; color:var(--wait); white-space:nowrap; }
.src { margin-top:22px; font-size:.8125rem; line-height:1.7; color:var(--wait); }

/* ── 결과 ── */
.big { font-size:clamp(4rem,12vw,7rem); font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.big small { font-size:1.125rem; letter-spacing:.2em; color:var(--soft); margin-left:10px; }
.grid { display:flex; flex-wrap:wrap; gap:18px clamp(24px,6vw,64px); margin:26px 0 22px; }
#rankline { min-height:1.6em; margin-top:14px; color:var(--soft); font-size:.9375rem; }

/* ── 글비 ── */
.rain { position:fixed; inset:0; overflow:hidden; }
.rain .drop { position:absolute; top:0; left:0; white-space:nowrap; font-size:1.625rem; font-weight:400; color:var(--white); will-change:transform; text-shadow:0 0 18px rgba(28,22,14,.9); }
.rain .drop.hot { color:var(--soft); } .rain .drop.low { color:var(--err); }
.rain .drop.pop { transition:opacity 380ms ease, filter 380ms ease; opacity:0; filter:blur(6px); }
.rain .ground { position:absolute; left:0; right:0; bottom:96px; height:1px; background:rgba(251,248,241,.25); }
.rain .hud { position:absolute; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); top:clamp(18px,4vh,40px); display:flex; justify-content:space-between; align-items:baseline; }
.rain .typed { position:absolute; left:0; right:0; bottom:34px; text-align:center; font-size:1.75rem; min-height:1.6em; }
.rain .typed::after { content:""; display:block; width:56px; height:1px; background:var(--terra); margin:8px auto 0; }
.rain .lives { letter-spacing:.35em; color:var(--soft); }

#ime { position:fixed; top:0; left:0; width:2px; height:2px; opacity:0; border:0; outline:0; font-size:16px; caret-color:transparent; background:transparent; color:transparent; }
#mute { position:fixed; right:16px; bottom:12px; z-index:5; font-size:.8125rem; letter-spacing:.15em; color:var(--wait); padding:6px; }

/* ── 모바일판: 키보드가 아래 절반을 가린다 → 타자 화면은 위쪽에만 ── */
body.m #app { padding:18px 20px; }
body.m .display { font-size:2.3rem; }
body.m .menu .t { font-size:1.1875rem; } body.m .menu button { padding:14px 2px; gap:12px; } body.m .menu .d { font-size:.75rem; }
body.m .screen.play { margin:0 auto auto; min-height:0; height:calc(var(--avail,54vh) - 36px); justify-content:flex-start; } /* 위쪽 정렬 — 아래는 키보드 자리 */
body.m .stage { margin:10px 0 0; padding:14px 14px 12px; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
body.m .stage .hair { margin-bottom:8px; width:40px; }
body.m .seglabel { font-size:.875rem; margin-bottom:4px; }
body.m .line { font-size:1.3125rem; line-height:1.7; overflow-y:auto; }
body.m .line.word { font-size:2.3rem; }
body.m .echo { display:none; }
body.m .next { margin-top:8px; font-size:.875rem; -webkit-line-clamp:1; }
body.m .stats { margin-top:10px; gap:18px; } body.m .stat .v { font-size:1.25rem; } body.m .stat .k { font-size:.625rem; }
body.m .hint { display:none; }
body.m .bar .where { font-size:.8125rem; }
body.m #mute { top:10px; bottom:auto; right:12px; }

@media (prefers-reduced-motion: reduce) {
  #bg .img { animation:none; } .screen { animation:none; } .line .cur { animation:none; }
  * { transition-duration:1ms !important; }
}

.line.word ~ .echo { text-align:center; direction:ltr; }
body.m .bar { padding-right:84px; } /* 우상단 소리 버튼 자리 */

/* ── 재미 장치: 고스트 레이스 · 연속 정타 ── */
.stage { position:relative; }
.line span.ghost { background:linear-gradient(to right, var(--soft) 0, var(--soft) 2px, transparent 2px); }
.prog em { position:absolute; top:-5px; left:0; width:1px; height:11px; background:var(--soft); transition:left 200ms linear; }
#flash { position:absolute; right:clamp(18px,3vw,40px); top:clamp(16px,3vh,30px); font-style:italic; font-weight:300; font-size:1.25rem; color:var(--soft); opacity:0; pointer-events:none; }
#flash.go { animation:flash 1600ms var(--ease) both; }
@keyframes flash { 0% { opacity:0; transform:translateY(8px); } 25% { opacity:1; transform:none; } 70% { opacity:1; } 100% { opacity:0; transform:translateY(-6px); } }
body.m #flash { font-size:.9375rem; top:10px; right:14px; }
body.m .stats { gap:14px; } body.m .stat .v { font-size:1.125rem; }
@media (prefers-reduced-motion: reduce) { #flash.go { animation-duration:1ms; opacity:1; } }

/* ── 멈춤 · 첫 줄 조작 안내 ── */
.barR { display:flex; align-items:baseline; gap:20px; }
.barR .link { padding:2px 0; font-size:.875rem; }
.tip { margin-top:12px; font-size:.875rem; color:var(--soft); }
.line.word ~ .tip { text-align:center; }
#pause { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(28,22,14,.95); animation:rise 600ms var(--ease) both; }
#pause > div { width:100%; max-width:520px; }
.rain .raintip { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:.8125rem; color:var(--wait); }
.rain .hud .barR .where { color:var(--sand); }
body.m .tip { margin-top:6px; font-size:.75rem; }
body.m .barR { gap:12px; } body.m .barR .link { font-size:.8125rem; }
body.m #pause { align-items:flex-start; padding-top:12vh; }
body.m .barR .link { padding:10px 8px; margin:-8px -8px -8px 0; } /* 터치 영역 확보 */
body.m #pause .link { padding:12px 4px; font-size:1.0625rem; }