:root{
  --bg:#0f1221;
  --card:#171b31;
  --ink:#e9ecff;
  --muted:#9aa3c7;
  --ok:#1fd47b;
  --err:#ff6464;
  --hi:#5a6bff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--ink); background:radial-gradient(1200px 600px at 20% -10%, #1a2146 0%, transparent 60%), var(--bg);
}
.app{max-width:900px;margin:40px auto;padding:24px}
h1{margin:0 0 4px;font-size:clamp(22px,3vw,34px)}
.sub{color:var(--muted);margin:0 0 24px}
.board{
  background:var(--card);
  border:1px solid #2a2f52;
  border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.sentence{
  display:flex; flex-wrap:wrap; gap:8px; line-height:2.2; font-size:clamp(18px,2.2vw,22px);
  padding:14px 12px; border:1px dashed #2e3661; border-radius:12px; background:#0f1430;
}
.word{position:relative; padding:2px 0}
.word .after{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin-left:6px; border-radius:8px;
  border:2px dashed #3a4383; opacity:.8; vertical-align:middle;
}
.end-slot{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-left:10px; border-radius:50%;
  border:2px dashed #3a4383; opacity:.9;
}
.slot.filled{border-style:solid; border-color:#6f7cff; background:#1a2160}
.slot.accepts-period{border-radius:50%}
.slot.flash-ok{animation:flashOk .5s}
.slot.flash-err{animation:flashErr .5s}
@keyframes flashOk{from{box-shadow:0 0 0 0 var(--ok)}to{box-shadow:0 0 0 10px transparent}}
@keyframes flashErr{from{box-shadow:0 0 0 0 var(--err)}to{box-shadow:0 0 0 10px transparent}}
.tokens{
  margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; min-height:44px
}
.token{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:#0e163a;
  border:1px solid #2b3470; font-size:24px; cursor:grab; user-select:none;
  transition:transform .05s ease; box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.token:active{transform:scale(.96)}
.token.ghost{opacity:.5}
.token.used{opacity:.35; pointer-events:none}
.controls{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  background:#1a2045; color:var(--ink); border:1px solid #2c3477;
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600
}
.btn:hover{background:#212966}
.btn.primary{background:linear-gradient(180deg,#3a48ff,#2533c9)}
.btn.primary:hover{filter:brightness(1.07)}
.feedback{min-height:28px; margin-top:10px; color:var(--muted)}
.feedback.ok{color:var(--ok)}
.feedback.err{color:var(--err)}
.green-light{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:999px; background:rgba(31,212,123,.15);
  border:1px solid rgba(31,212,123,.35); color:var(--ok)
}
.green-dot{width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok)}
.shake{animation:shake .35s}
@keyframes shake{10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}}