@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="storm"] { --bg: #0b1020; --ink: #e8eeff; --dim: #4b5878; --accent: #6ea8ff; --warn: #ff5d7a; --glow: #6ea8ff; --a1: #1c3f8f; --a2: #6a2fb5; }
html[data-theme="ember"] { --bg: #170d0a; --ink: #ffe9d6; --dim: #7a5240; --accent: #ff9142; --warn: #ff4d4d; --glow: #ff9142; --a1: #8f3b1c; --a2: #b5852f; }
html[data-theme="mint"]  { --bg: #061512; --ink: #dffff3; --dim: #3f6e63; --accent: #4ff0b7; --warn: #ff6b8a; --glow: #4ff0b7; --a1: #0d6b52; --a2: #2f8fb5; }
html[data-theme="vapor"] { --bg: #14071f; --ink: #ffe6ff; --dim: #6e4a80; --accent: #ff77e1; --warn: #ffd166; --glow: #ff77e1; --a1: #7a1f8f; --a2: #2f4fb5; }
html[data-theme="paper"] { --bg: #f4f1e8; --ink: #2b2a26; --dim: #a9a293; --accent: #c2643a; --warn: #b42d3d; --glow: #c2643a; --a1: #d8cfb8; --a2: #e6d7c2; }
html[data-theme="void"]  { --bg: #000000; --ink: #f2f2f2; --dim: #4a4a4a; --accent: #ffffff; --warn: #ff3b3b; --glow: #ffffff; --a1: #222222; --a2: #111111; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}

#fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

#aurora { position: fixed; inset: -20%; z-index: 0; filter: blur(90px); opacity: .5; pointer-events: none; transition: opacity .6s; }
#aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
#aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 4%; top: 6%; background: var(--a1); animation: drift1 24s ease-in-out infinite; }
#aurora i:nth-child(2) { width: 38vw; height: 38vw; right: 6%; top: 18%; background: var(--a2); animation: drift2 31s ease-in-out infinite; }
#aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 38%; bottom: 2%; background: var(--accent); opacity: .5; animation: drift3 27s ease-in-out infinite; }

@keyframes drift1 { 50% { transform: translate(18vw, 10vh) scale(1.2); } }
@keyframes drift2 { 50% { transform: translate(-14vw, 14vh) scale(.85); } }
@keyframes drift3 { 50% { transform: translate(8vw, -12vh) scale(1.15); } }

body.rushing #aurora { opacity: .85; }
body.calm #aurora { opacity: .22; }

header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem 1.6rem;
}

.brand { font-weight: 700; letter-spacing: -.04em; font-size: 1.35rem; color: var(--dim); }
.brand span { color: var(--accent); text-shadow: 0 0 22px var(--glow); }

.modes { display: flex; gap: .55rem; flex-wrap: wrap; }
.tools { margin-left: auto; display: flex; gap: .5rem; }

.group { display: flex; gap: .15rem; padding: .25rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.group.wrap { flex-wrap: wrap; }

.group button, .icon {
  border: 0; background: transparent; color: var(--dim);
  font: 500 .82rem var(--font); padding: .38rem .8rem; border-radius: 999px;
  cursor: pointer; transition: color .18s, background .18s, transform .18s;
}

.group button:hover, .icon:hover { color: var(--ink); transform: translateY(-1px); }
.group button.on { color: var(--bg); background: var(--accent); box-shadow: 0 0 18px -4px var(--glow); }

.icon { background: color-mix(in srgb, var(--ink) 7%, transparent); }

main { position: relative; z-index: 2; max-width: 68rem; margin: 0 auto; padding: 1rem 1.6rem 4rem; }

.hud { display: flex; align-items: flex-end; justify-content: center; gap: 3.5rem; margin: 1.5rem 0 .4rem; }
.gauge { text-align: center; min-width: 6rem; }
.gauge .big { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge .big small { font-size: .9rem; color: var(--dim); }
.gauge .label { font-size: .7rem; color: var(--dim); letter-spacing: .18em; text-transform: uppercase; margin-top: .35rem; }
.timer { font-size: 3.6rem; font-weight: 700; line-height: .9; color: var(--accent); text-shadow: 0 0 30px -6px var(--glow); font-variant-numeric: tabular-nums; }
body.urgent .timer { color: var(--warn); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.09); } }

.combo { height: 2.6rem; display: flex; align-items: center; justify-content: center; gap: .5rem; opacity: 0; transition: opacity .25s; }
.combo.live { opacity: 1; }
.combo span { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.combo em { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); font-style: normal; }
.combo .bar { width: 9rem; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.combo .bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 12px var(--glow); transition: width .15s; }

#stage { position: relative; outline: 0; cursor: text; padding: .5rem 0; }
#track { height: 9.9rem; overflow: hidden; }
#words { display: flex; flex-wrap: wrap; gap: 0 .85ch; font-size: 1.65rem; line-height: 3.3rem; transition: transform .28s cubic-bezier(.4,0,.2,1); }

.word { display: flex; position: relative; }
.word.wrong { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--warn) 70%, transparent); text-underline-offset: .35em; }
.word.done { animation: settle .3s ease; }
@keyframes settle { from { transform: translateY(-3px); } }

.ch { color: var(--dim); transition: color .09s, transform .12s; white-space: pre; }
.ch.ok { color: var(--ink); }
.ch.bad { color: var(--warn); }
.ch.extra { color: color-mix(in srgb, var(--warn) 65%, var(--dim)); opacity: .75; }
.ch.pop { animation: pop .2s ease; }
@keyframes pop { 40% { transform: translateY(-5px) scale(1.22); } }

body.blind .ch.bad, body.blind .ch.extra { color: var(--ink); }
body.blind .word.wrong { text-decoration: none; }

#caret {
  position: absolute; left: 0; top: 0; width: 2px; height: 2.1rem;
  background: var(--accent); box-shadow: 0 0 14px var(--glow);
  transition: transform .09s cubic-bezier(.2,0,0,1), height .2s, width .2s;
  animation: blink 1.1s steps(1) infinite;
}
#caret.block { width: 1ch; opacity: .45; }
#caret.under { height: 3px; width: 1ch; }
body.typing #caret { animation: none; }
@keyframes blink { 50% { opacity: .15; } }

#veil {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px); color: var(--dim); font-size: .85rem; letter-spacing: .14em;
  text-transform: uppercase; transition: opacity .3s; z-index: 2;
}
#veil.gone { opacity: 0; pointer-events: none; }

body.shaking main { animation: shake .18s; }
@keyframes shake {
  25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); }
}

.under { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.ghost { border: 0; background: transparent; color: var(--dim); font: .78rem var(--font); cursor: pointer; padding: .4rem .6rem; border-radius: 6px; }
.ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
kbd { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 4px; padding: 0 .3em; font-size: .9em; }
.seed { font-size: .7rem; color: var(--dim); }

#keyboard { margin: 2.2rem auto 0; display: flex; flex-direction: column; gap: .3rem; align-items: center; opacity: .75; transition: opacity .3s; }
#keyboard.hidden { display: none; }
#keyboard .row { display: flex; gap: .3rem; }
#keyboard .k {
  width: 2rem; height: 2rem; border-radius: 6px; display: grid; place-items: center;
  font-size: .7rem; color: var(--dim);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform .09s, background .18s, color .18s, box-shadow .18s;
}
#keyboard .k.space { width: 9rem; }
#keyboard .k.next { color: var(--bg); background: var(--accent); box-shadow: 0 0 16px -3px var(--glow); }
#keyboard .k.hit { transform: translateY(3px) scale(.92); background: color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink); }
#keyboard .k.miss { background: var(--warn); color: #fff; }

.global { text-align: center; color: var(--dim); font-size: .72rem; margin-top: 2.4rem; letter-spacing: .06em; }

#results, .panel { position: fixed; inset: 0; z-index: 6; display: none; place-items: center; padding: 1.2rem; overflow: auto;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); }
#results.show, .panel.show { display: grid; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: scale(.985); } }

.card, .sheet {
  width: min(48rem, 100%); background: color-mix(in srgb, var(--ink) 5%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 18px; padding: 1.6rem;
  box-shadow: 0 30px 80px -30px #000;
}

.tally { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.headline { display: flex; align-items: baseline; gap: .5rem; }
.headline strong { font-size: 4.4rem; line-height: 1; color: var(--accent); text-shadow: 0 0 40px -10px var(--glow); font-variant-numeric: tabular-nums; }
.headline span { color: var(--dim); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
.cells { display: grid; grid-template-columns: repeat(3, minmax(5rem, 1fr)); gap: .7rem 1.4rem; }
.cells b { display: block; font-size: 1.1rem; }
.cells span { font-size: .64rem; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }

#graph { width: 100%; height: auto; margin: 1.2rem 0 .4rem; }

#submitRun { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 1.1rem; }
#submitRun input { flex: 1 1 10rem; padding: .6rem .8rem; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: transparent; color: inherit; font: .9rem var(--font); }
#sendState { font-size: .74rem; color: var(--dim); }

.actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

#submitRun button {
  border: 0; border-radius: 9px; padding: .62rem 1.1rem; cursor: pointer;
  font: 500 .85rem var(--font); background: var(--accent); color: var(--bg);
  box-shadow: 0 0 22px -8px var(--glow); transition: transform .15s;
}
.actions button { border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: transparent; color: var(--ink); border-radius: 9px; padding: .62rem 1.1rem; font: 500 .85rem var(--font); cursor: pointer; }
.actions button.primary { border: 0; background: var(--accent); color: var(--bg); }
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: default; transform: none; }

.sheet h2 { margin: 0 0 1.2rem; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); display: flex; }
.sheet h3 { margin: 1.6rem 0 .7rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.x { margin-left: auto; border: 0; background: transparent; color: var(--dim); font: .72rem var(--font); cursor: pointer; }

.rows { display: grid; gap: .1rem; }
.row-s { display: flex; align-items: center; gap: 1rem; padding: .62rem .2rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.row-s p { margin: 0; font-size: .86rem; }
.row-s p small { display: block; color: var(--dim); font-size: .7rem; margin-top: .15rem; }
.row-s .sw, .row-s .group { margin-left: auto; }

.sw { width: 3rem; height: 1.6rem; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 14%, transparent); position: relative; cursor: pointer; flex: none; }
.sw::after { content: ''; position: absolute; top: .22rem; left: .22rem; width: 1.16rem; height: 1.16rem; border-radius: 50%; background: var(--dim); transition: transform .2s, background .2s; }
.sw.on { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.sw.on::after { transform: translateX(1.4rem); background: var(--accent); }

.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.themes button { border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 10px; padding: .6rem; background: transparent; color: var(--ink); cursor: pointer; font: .78rem var(--font); display: flex; align-items: center; gap: .5rem; }
.themes button i { width: .9rem; height: .9rem; border-radius: 50%; }
.themes button.on { border-color: var(--accent); box-shadow: 0 0 18px -8px var(--glow); }

#boardList { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .4rem; }
#boardList li { display: flex; align-items: center; gap: .8rem; padding: .6rem .85rem; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .85rem; animation: slide .3s ease backwards; }
@keyframes slide { from { opacity: 0; transform: translateX(-8px); } }
#boardList li .n { color: var(--dim); width: 1.6rem; }
#boardList li .w { margin-left: auto; font-weight: 700; color: var(--accent); }
#boardList li .a { color: var(--dim); font-size: .74rem; }
#boardList li.mine { background: color-mix(in srgb, var(--accent) 16%, transparent); }
#boardList .empty { color: var(--dim); background: none; }

@media (max-width: 700px) {
  .hud { gap: 1.6rem; }
  #words { font-size: 1.3rem; line-height: 2.7rem; }
  #track { height: 8.1rem; }
  #keyboard { display: none; }
  .headline strong { font-size: 3rem; }
}