/* Word Scramble Battle — neon mobile UI */
.wsb-root{position:relative;width:100%;max-width:520px;margin:0 auto;border-radius:24px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#fff;background:radial-gradient(120% 80% at 50% 0%,#1a0b3d 0%,#070014 60%,#000 100%);box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 0 60px rgba(120,0,255,.15)}
.wsb-theme-cyber{background:radial-gradient(120% 80% at 50% 0%,#003844 0%,#001018 60%,#000 100%)}
.wsb-theme-mono{background:radial-gradient(120% 80% at 50% 0%,#222 0%,#0a0a0a 60%,#000 100%)}
.wsb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a78bfa;font-weight:600;letter-spacing:.05em}
.wsb-screen{position:absolute;inset:0;display:none;flex-direction:column;padding:18px;box-sizing:border-box}
.wsb-screen.active{display:flex}
.wsb-title{font-size:28px;font-weight:900;text-align:center;background:linear-gradient(90deg,#ff2bd6,#7c3aed,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.05em;margin:8px 0 6px}
.wsb-sub{text-align:center;color:#c4b5fd;font-size:13px;margin-bottom:18px}
.wsb-btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:800;font-size:15px;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 8px 22px rgba(124,58,237,.45);cursor:pointer;margin:6px 0;transition:transform .12s ease,box-shadow .12s ease}
.wsb-btn:active{transform:translateY(1px) scale(.99)}
.wsb-btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.wsb-input{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font-size:16px;text-align:center;letter-spacing:.18em;text-transform:uppercase;box-sizing:border-box}
.wsb-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.wsb-score{font-size:34px;font-weight:900;color:#fff;text-shadow:0 0 14px rgba(124,58,237,.6)}
.wsb-timer{font-size:22px;font-weight:800;color:#ffd166;font-variant-numeric:tabular-nums}
.wsb-tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.wsb-tile{width:42px;height:52px;border-radius:10px;background:linear-gradient(180deg,#1f1147,#0e0626);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#fff;border:1px solid rgba(167,139,250,.4);box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 12px rgba(124,58,237,.35);cursor:pointer;user-select:none}
.wsb-tile.used{opacity:.25;pointer-events:none}
.wsb-feedback{min-height:22px;text-align:center;font-weight:700;margin-top:6px}
.wsb-feedback.ok{color:#34d399}
.wsb-feedback.bad{color:#f87171}
.wsb-shake{animation:wsbShake .35s ease}
@keyframes wsbShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.wsb-glow{animation:wsbGlow .6s ease}
@keyframes wsbGlow{0%{box-shadow:0 0 0 rgba(34,211,153,0)}50%{box-shadow:0 0 30px rgba(34,211,153,.7)}100%{box-shadow:0 0 0 rgba(34,211,153,0)}}
.wsb-board{flex:1;display:flex;flex-direction:column;justify-content:center}
.wsb-list{margin-top:10px;max-height:120px;overflow:auto;font-size:13px;color:#c4b5fd}
.wsb-list span{display:inline-block;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:8px;margin:2px}
.wsb-vs{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.wsb-vs > div{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;text-align:center}
.wsb-vs .name{font-size:11px;opacity:.7}
.wsb-vs .pts{font-size:22px;font-weight:900}