/* palette by role: swap these five to retheme */
:root {
  --bg: #0D1321; --surface: #1D2D44; --line: #3E5C76; --muted: #748CAB; --text: #F0EBD8;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; padding: 32px 16px;
  background: var(--bg); color: var(--text);
  font-family: 'Noto Sans', 'Noto Sans Devanagari', system-ui, sans-serif;
  display: flex; justify-content: center;
}
main { width: 100%; max-width: 820px; }

header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.logo { font-size: 1.6rem; font-weight: 700; }
.logo span { display: inline-block; padding: 0 8px; background: var(--text); color: var(--bg); }
.tag { font-size: .95rem; color: var(--muted); }
#flag { height: 20px; margin-inline-start: auto; align-self: center; border: 1px solid var(--line); }

.bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bar input, button {
  font: inherit; font-size: .95rem; font-weight: 600; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 14px;
}
#lang { flex: 1; min-width: 180px; outline: none; }
button { cursor: pointer; }
button:hover { background: var(--line); }
#lang:focus, button:focus-visible { outline: 2px solid var(--muted); outline-offset: 1px; }
.pill[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
::placeholder { color: var(--muted); }

.card { padding: 20px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.timer { margin-bottom: 8px; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

#words { position: relative; height: 7.8rem; overflow: hidden; font-size: 1.5rem; line-height: 2.6rem; }
.w { display: inline-block; padding: 0 .2em; margin-inline-end: .3em; border-radius: 3px; }
.w.done { opacity: .4; }
.w.bad { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--text); }
.w.cur { background: var(--muted); color: var(--bg); }
.w.cur.err { background: var(--text); color: var(--bg); text-decoration: underline wavy; }

#input {
  width: 100%; margin-top: 16px; padding: 10px 14px;
  font: inherit; font-size: 1.35rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; outline: none;
}
#input:focus { outline: 2px solid var(--muted); outline-offset: 1px; }

.guide { margin-top: 20px; }
.guide summary { cursor: pointer; font-weight: 600; }
#guide-note { font-weight: 400; color: var(--muted); }
#kb { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 8px; background: var(--bg); }
.row { display: flex; gap: 4px; }
.row i { visibility: hidden; }
.key {
  position: relative; min-width: 0; height: clamp(28px, 6vw, 44px);
  display: grid; place-items: center;
  background: var(--line); font-size: clamp(.65rem, 2vw, 1rem); font-weight: 600; line-height: 1;
}
.key small { position: absolute; top: 3px; inset-inline-start: 5px; font-size: .62em; opacity: .7; }
.key.on { background: var(--text); color: var(--bg); }
.key.hit { background: var(--muted); }
.key[data-code="KeyF"]::after, .key[data-code="KeyJ"]::after {
  content: ''; position: absolute; bottom: 4px; width: 10px; height: 2px; background: currentColor;
}
.hands { display: block; width: 100%; max-width: 440px; margin: 14px auto 0; }
.hands .s { fill: var(--line); stroke: var(--muted); stroke-width: 6; stroke-linejoin: round; }
.hands .f { fill: var(--line); }
.hands .on { fill: var(--text); }
.hands .nail { fill: var(--text); opacity: .25; }
#hint { min-height: 1.5em; margin: 4px 0 0; text-align: center; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { padding: 12px; text-align: center; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.stat b { display: block; font-size: 2.2rem; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
#again { background: var(--text); color: var(--bg); border-color: var(--text); }

/* kept well below the typing card so ads never catch accidental clicks */
.ad { margin-top: 40px; min-height: 100px; padding: 8px; border: 1px dashed var(--line); border-radius: 6px; }
.ad small { color: var(--muted); }