/* Layout coordinates follow the v2 wireframes (1920x1080 artboards). */
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.c-blue { color: var(--blue); }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 24px; }
.hint { position: absolute; left: 0; right: 0; text-align: center; font: 400 26px var(--font); color: var(--mid); margin: 0; }
.title { position: absolute; left: 0; right: 0; top: 95px; margin: 0; text-align: center; font: 700 76px var(--font); }
.subtitle { position: absolute; left: 0; right: 0; top: 205px; margin: 0; text-align: center; font: 400 32px var(--font); color: var(--mid); }
.stage { user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }

/* ---- 01 attract */
.headline { position: absolute; left: 0; right: 0; top: 255px; margin: 0; text-align: center; font: 700 112px var(--font); letter-spacing: -0.01em; }
.subhead { position: absolute; left: 0; right: 0; top: 415px; margin: 0; text-align: center; font: 400 36px var(--font); color: var(--text); }
.cta { position: absolute; left: 660px; top: 540px; width: 600px; padding: 0; }
#s-attract .hint { top: 695px; }
.teaser { position: absolute; left: 560px; top: 840px; width: 800px; height: 150px; background: var(--panel); border: 2px solid var(--line);
  border-radius: 24px; text-align: center; padding-top: 26px; }
.teaser-value { font: 700 50px var(--font); color: var(--blue); margin-top: 10px; }
#s-attract .cta { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ---- 02 registration */
.form { position: absolute; left: 510px; top: 285px; width: 900px; height: 610px; padding: 38px 58px; }
.form .row { display: flex; gap: 60px; }
.field { display: block; position: relative; flex: 1; }
.field .label { font-size: 20px; }
.field input { display: block; width: 100%; height: 90px; margin-top: 12px; border: 2px solid var(--line); border-radius: 12px; padding: 0 26px;
  font: 400 34px var(--font); color: var(--text); background: var(--panel); outline: none; }
.field input:focus { border: 3px solid var(--blue); padding: 0 25px; }
.field.invalid input { border: 3px solid var(--red); padding: 0 25px; }
.field em, .consent-err { position: absolute; right: 0; top: 0; font: 500 18px var(--font); color: var(--red); font-style: normal; }
.consent-err { position: static; display: block; height: 0; margin-left: 50px; transform: translateY(-6px); }
.field.wide { margin-top: 30px; }
.helper { margin: 12px 0 0; font: 400 20px var(--font); color: var(--mid); }
.check { display: flex; align-items: center; gap: 18px; margin-top: 22px; font: 400 20px var(--font); color: var(--text); cursor: pointer; }
.check.muted { color: var(--mid); margin-top: 16px; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check i { width: 32px; height: 32px; flex: 0 0 32px; border: 2px solid var(--muted); border-radius: 6px; background: var(--panel); position: relative; }
.check input:checked + i { background: var(--blue); border-color: var(--blue); }
.check input:checked + i::after { content: ''; position: absolute; left: 9px; top: 3px; width: 9px; height: 17px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.check input:focus-visible + i { outline: 4px solid rgba(66,133,244,.35); outline-offset: 3px; }
.buttons { position: absolute; left: 58px; right: 58px; bottom: 38px; display: flex; justify-content: space-between; }
.btn.small { height: 76px; font-size: 26px; padding: 0 44px; }
#btn-back { width: 220px; } #btn-continue { width: 300px; }
.form-status { position: absolute; left: 0; right: 0; bottom: -60px; text-align: center; font: 500 22px var(--font); color: var(--red); margin: 0; }

/* ---- 03 get ready */
.ready-title { top: 120px; font-size: 90px; }
#s-ready .subtitle { top: 240px; color: var(--text); font-size: 34px; }
.rules { position: absolute; left: 260px; top: 330px; display: flex; gap: 100px; }
.rule { width: 400px; height: 260px; background: var(--panel); border: 2px solid var(--line); border-top: 10px solid var(--c); border-radius: 0 0 24px 24px;
  display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.rule i { width: 80px; height: 80px; border-radius: 50%; background: var(--c); color: #fff; font: 700 22px var(--font); font-style: normal; display: flex; align-items: center; justify-content: center; }
.rule b { font: 700 32px var(--font); letter-spacing: 0.06em; margin-top: 22px; }
.rule span { font: 400 24px var(--font); color: var(--mid); text-align: center; margin-top: 10px; line-height: 1.25; }
.countdown { position: absolute; left: 830px; top: 660px; width: 260px; height: 260px; border-radius: 50%; border: 12px solid var(--blue); background: var(--panel);
  display: flex; align-items: center; justify-content: center; font: 700 170px var(--font); color: var(--blue); }
.countdown.tick { animation: tick .9s ease-out; }
@keyframes tick { from { transform: scale(1.18); } to { transform: scale(1); } }
.countdown-hint { top: 960px; font-size: 28px; }

/* ---- 04 gameplay */
.hud { position: absolute; left: 0; top: 0; width: 1920px; height: 170px; background: var(--panel); }
.hud .logo { top: 45px; }
.stat { position: absolute; top: 22px; text-align: center; transform: translateX(-50%); }
.stat b { display: block; font: 700 84px var(--font); line-height: 1.05; }
.stat.timer { left: 960px; } .stat.wpm { left: 1500px; top: 30px; } .stat.acc { left: 1740px; top: 30px; }
.stat.wpm b, .stat.acc b { font-size: 64px; } .stat.wpm b { color: var(--blue); } .stat.acc b { color: var(--green); }
.stat.timer.low b { color: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.timebar { position: absolute; left: 0; right: 0; top: 170px; height: 14px; background: var(--soft); }
.timebar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s linear; }
.passage { position: absolute; left: 160px; top: 250px; width: 1600px; height: 520px; padding: 42px 70px; font: 400 48px/78px var(--mono); color: var(--muted); overflow: hidden; }
.passage .w { display: inline-block; white-space: pre; border-radius: 8px; }
.passage .w.cur { background: var(--hl); }
.passage .ok { color: var(--text); }
.passage .bad { color: var(--red); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.passage .bad.sp { background: rgba(234,67,53,.22); text-decoration: none; }
.passage .caret { box-shadow: inset 4px 0 0 var(--blue); }
.passage .caret.blink { animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { box-shadow: none; } }
.game-hint { top: 800px; }
.progress { position: absolute; left: 160px; top: 880px; width: 1600px; }
.progress .label { font-size: 22px; letter-spacing: .12em; }
.progress .track { margin-top: 18px; height: 16px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.progress .track i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 8px; transition: width .2s; }

/* ---- 05 score */
.timesup { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font-size: 56px; letter-spacing: .1em; }
.bigscore { position: absolute; left: 0; right: 0; top: 120px; text-align: center; font: 700 300px/1 var(--font); color: var(--blue); }
.wpm-label { position: absolute; left: 0; right: 0; top: 455px; text-align: center; font-size: 36px; letter-spacing: .2em; color: var(--text); }
.stats { position: absolute; left: 220px; top: 540px; display: flex; gap: 40px; }
.statcard { width: 340px; height: 170px; background: var(--panel); border: 2px solid var(--line); border-radius: 20px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.statcard::before { content: ''; position: absolute; top: -2px; left: 130px; width: 80px; height: 8px; border-radius: 4px; background: var(--c); }
.statcard b { font: 700 72px/1 var(--font); color: var(--c); }
.statcard .label { font-size: 22px; letter-spacing: .12em; }
.statcard.rank { background: var(--blue); border-color: var(--blue); } .statcard.rank::before { display: none; }
.statcard.rank b, .statcard.rank .label { color: #fff; }
.emailcard { position: absolute; left: 220px; top: 775px; width: 1480px; height: 165px; border-radius: 20px; display: flex; align-items: center; gap: 38px; padding-left: 42px; }
.envelope { width: 110px; height: 110px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; flex: 0 0 110px; }
.email-head { font: 700 32px var(--font); letter-spacing: .06em; }
.email-body { font: 400 26px var(--font); color: var(--mid); margin-top: 10px; }
.return-hint { top: 1020px; font-size: 22px; }

/* ---- overlays */
.overlay { position: absolute; inset: 0; background: rgba(32,33,36,.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay[hidden] { display: none; }
.ov-card { padding: 50px 70px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ov-card b { font: 700 48px var(--font); } .ov-card span { font: 400 28px var(--font); color: var(--mid); }
.staff-btns { display: flex; gap: 24px; margin: 12px 0; }
.muted { color: var(--muted); }