/* Practice page: single full-width practice tab */
.practice-layout{display:block}
.practice-layout .practice-panel{width:100%}
.practice-panel .typing-text{min-height:190px}
/* Type a novel section */
.novel-section{margin-top:22px;padding:clamp(18px,3vw,30px)}
.novel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.novel-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line,#e2eaf5);box-shadow:0 6px 18px rgba(38,68,120,.08);transition:transform .2s,box-shadow .2s}
.novel-card:hover,.novel-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(38,68,120,.18)}
.novel-card:focus-visible{outline:3px solid var(--accent)}
.novel-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.novel-card span{padding:12px 14px 14px;font-weight:700;font-size:14px;line-height:1.35;color:var(--ink,#19305f)}
.novel-card small{display:block;margin-top:4px;font-weight:500;font-size:12px;color:var(--muted)}
.chapter-body{display:flex;gap:20px;align-items:flex-start;margin-top:14px}
.chapter-cover{width:140px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.2);flex:none}
.chapter-list{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.chapter-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line,#e2eaf5);background:#fff;color:var(--ink,#19305f);text-decoration:none}
.chapter-item:hover,.chapter-item:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px #6d5dfc22}
.chapter-item b{display:block;font-size:15px}.chapter-item small{color:var(--muted)}
.chapter-item em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700;white-space:nowrap}
@media(max-width:900px){.novel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.chapter-body{flex-direction:column}.chapter-cover{width:110px}}
/* Home tile */
.t-f{grid-column:span 6}
@media(max-width:900px){.t-f{grid-column:span 6}}
/* Novel typing page */
.novel-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:#0d1020;color:#f3f1ff;margin-top:8px;height:clamp(460px,72vh,720px);display:flex;flex-direction:column}
.novel-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.25;filter:saturate(1.1)}
.novel-bar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(10,12,28,.55);backdrop-filter:blur(6px);border-bottom:1px solid #ffffff1c}
.novel-bar h1{font-size:clamp(15px,2vw,19px);margin:0;color:#fff;letter-spacing:0}
.novel-bar small{display:block;color:#cfc9ff;font-size:12px}
.novel-bar a.back{color:#d9d4ff;text-decoration:none;font-size:13px}.novel-bar a.back:hover{color:#fff}
.novel-live{display:flex;gap:18px;font-size:12px;color:#cfc9ff}.novel-live b{display:block;font-size:18px;color:#fff}
.novel-opts{display:flex;gap:14px;align-items:center;font-size:13px}
.novel-opts label{display:flex;gap:8px;align-items:center;cursor:pointer}
.novel-opts button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid #ffffff44;font-size:12px}
.novel-opts button:hover,.novel-opts button:focus-visible{background:#ffffff22}
.novel-progress{height:3px;background:#ffffff1f}.novel-progress i{display:block;height:100%;width:0;background:var(--na,#8b7bff);transition:width .2s}
.lyrics{position:relative;flex:1;overflow:hidden;cursor:text;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.lyrics-track{position:absolute;left:0;right:0;top:0;padding:0 clamp(16px,6vw,90px);transition:transform .45s cubic-bezier(.22,.8,.3,1);will-change:transform}
.nl{font:600 clamp(20px,2.6vw,30px)/1.5 "Manrope",system-ui,sans-serif;margin:0 0 22px;opacity:.28;transition:opacity .3s,filter .3s;filter:blur(.4px);overflow-wrap:anywhere;text-shadow:0 2px 12px #000a}
.nl.done{opacity:.4}.nl.cur{opacity:1;filter:none}.nl.next{opacity:.5}
.nl span{color:#bdb6e8}.nl span.correct{color:#fff}.nl span.incorrect{color:#ff8c9b;background:#ff647c33;border-radius:3px}
.nl span.current{position:relative;color:#fff;background:#ffffff1f;border-radius:3px}
.nl span.current.blocked{background:#ff647c55}
.nl-note{margin:24px 0 120px;padding:14px 18px;border-radius:12px;background:#ffffff14;border:1px dashed #ffffff55;color:#e9e6ff;font-size:15px;opacity:.85}
.novel-prompt{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:#000a;color:#fff;font-size:13px;pointer-events:none}
.novel-result{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,9,24,.78);backdrop-filter:blur(6px);padding:20px;z-index:5}
.novel-result>div{max-width:520px;width:100%;padding:26px;border-radius:18px;background:#15183a;border:1px solid #ffffff2a;text-align:center}
.novel-result h2{color:#fff;margin:0 0 6px}.novel-result p{color:#cfc9ff;margin:6px 0}
.novel-result .rs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.novel-result .rs b{display:block;font-size:24px;color:#fff}.novel-result .rs small{color:#b5aee6}
.novel-result .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
@media(prefers-reduced-motion:reduce){.lyrics-track,.nl{transition:none}}
/* Extra statistics */
.xstats{margin-top:6px}.xstats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.xlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.xlist .panel{padding:18px}.xlist h3{margin:0 0 10px;font-size:15px}
.xrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0}
.xrow b{min-width:42px}.xrow i{flex:1;height:8px;border-radius:99px;background:#e9ecf8;overflow:hidden}.xrow i u{display:block;height:100%;background:var(--accent);text-decoration:none}
.xrow span{min-width:64px;text-align:right;color:var(--muted)}
@media(max-width:900px){.xstats-grid{grid-template-columns:repeat(2,1fr)}.xlist{grid-template-columns:1fr}}