:root{
  --bg:#f8fafc; --card:#ffffff; --ink:#1e293b; --muted:#64748b;
  --accent:#3b82f6; --ok:#10b981; --bad:#ef4444; --border:#e2e8f0;
  --success:#10b981; --error:#ef4444; --info:#3b82f6; --warning:#f59e0b;
  --comma:#8b5cf6; --period:#10b981; --capital:#f59e0b; --word:#e2e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1000px 600px at 20% -10%, #dbeafe 0%, transparent 60%),
              radial-gradient(1000px 600px at 120% 20%, #e0f2fe 0%, transparent 60%),
              linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%);
}
.wrap{max-width:1000px;margin:24px auto;padding:16px}
.top h1{margin:0 0 6px}
.sub{margin:0 0 12px;color:var(--muted)}
.stats{display:flex;gap:12px;align-items:center;margin:10px 0 22px}
#progressBar{flex:1;height:10px;border-radius:999px;background:#f1f5f9;overflow:hidden;border:1px solid var(--border)}
#progressFill{height:100%;width:0%;background:linear-gradient(90deg,var(--info),var(--success))}
#score{min-width:140px;text-align:right;color:#475569}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col h2{margin:.2rem 0 .6rem 0}
.tray{
  min-height:110px; padding:10px; border:1px solid var(--border); border-radius:12px;
  background:#f8fafc; display:flex; flex-wrap:wrap; gap:10px;
}
.tray.drop{min-height:140px}
.token{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border:1px solid var(--border); border-radius:12px;
  background:var(--word); cursor:grab; user-select:none; font-size:1.05rem;
  transition:transform .02s ease, background .15s, border-color .15s;
}
.token:active{cursor:grabbing; transform:scale(.98)}
.token.punct{background:var(--comma)}
.token[data-type="comma"]{background:var(--comma); color:white; font-weight:bold}
.token[data-type="period"]{background:var(--period); color:white; font-weight:bold}
.token.capital{background:var(--capital); color:white; font-weight:bold}
.token.bad{outline:2px solid var(--error); background:#fef2f2}
.token.good{outline:2px solid var(--success); background:#f0fdf4}
.placeholder{
  width:44px; height:38px; border:1px dashed #94a3b8; border-radius:10px;
}
.tips{margin-top:8px;color:var(--muted)}
.feedback{margin-top:12px;padding:12px 14px;border-radius:10px;border:2px solid var(--border);background:#f1f5f9}
.feedback.ok{border-color:var(--success); background:#f0fdf4; color:#065f46}
.feedback.bad{border-color:var(--error); background:#fef2f2; color:#991b1b}
.hidden{display:none}
.actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.primary,.ghost,.next,.restart{
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#f1f5f9;color:var(--ink);cursor:pointer
}
.primary{border-color:var(--info);background:#dbeafe; color:var(--info); font-weight:600}
.primary:hover{background:#bfdbfe; transform:translateY(-1px)}
.ghost:hover{background:#e2e8f0; transform:translateY(-1px)}
.next:hover:not(:disabled){background:#e2e8f0; transform:translateY(-1px)}
.restart:hover{background:#e2e8f0; transform:translateY(-1px)}
.next:disabled{opacity:.5;cursor:not-allowed}
.rules{margin-top:22px;background:#f1f5f9;border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.rules h2{margin:0 0 10px}
#ruleBank{margin:0;padding-left:18px}
#ruleBank li{margin:6px 0;color:#475569}
@media (max-width:800px){.cols{grid-template-columns:1fr}}