:root{
  --ws-navy:#19243a;
  --ws-purple:#4f329a;
  --ws-purple-light:#6941c6;
  --ws-pink:#d94f91;
  --ws-green:#10b981;
  --ws-amber:#f59e0b;
  --ws-red:#ef4444;
  --ws-bg:#f8f7fb;
  --ws-soft:#f5f2fb;
  --ws-card-bg:#fff;
  --ws-border:#e7e3ef;
  --ws-muted:#747490;
}

.ws-page-wrapper{
  min-height:calc(100vh - 170px);
  padding:28px 0 52px;
  background:
    radial-gradient(circle at 8% 6%,rgba(79,50,154,.10),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(217,79,145,.08),transparent 24%),
    linear-gradient(180deg,#fbfafd 0%,#f8f7fb 100%);
}

.ws-container{max-width:1180px}

.ws-top-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.ws-back-btn,.ws-game-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--ws-border);
  border-radius:999px;
  background:rgba(255,255,255,.90);
  text-decoration:none;
  font-size:11px;
  font-weight:850;
}

.ws-back-btn{color:var(--ws-navy)}
.ws-back-btn:hover{color:var(--ws-purple);border-color:rgba(79,50,154,.30)}

.ws-game-tag{color:var(--ws-purple)}
.ws-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ws-pink);
  box-shadow:0 0 0 4px rgba(217,79,145,.12);
}

.ws-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--ws-border);
  border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:0 22px 65px rgba(25,36,58,.09);
}

.ws-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}
.ws-glow-1{width:280px;height:280px;right:-100px;top:-120px;background:rgba(79,50,154,.08)}
.ws-glow-2{width:220px;height:220px;left:-80px;bottom:-100px;background:rgba(217,79,145,.055)}

.ws-screen{
  position:relative;
  z-index:2;
  padding:38px;
}

/* SETUP */
.ws-setup-layout{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);
  gap:46px;
  align-items:center;
}

.ws-hero-copy{padding:8px 4px 8px 8px}

.ws-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid rgba(79,50,154,.14);
  border-radius:999px;
  background:#f8f5fd;
  color:var(--ws-purple);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.ws-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ws-pink);
  box-shadow:0 0 0 4px rgba(217,79,145,.12);
}

.ws-title{
  margin:18px 0 12px;
  color:var(--ws-navy);
  font-size:clamp(38px,4.4vw,58px);
  line-height:1.02;
  font-weight:950;
  letter-spacing:-2px;
}
.ws-title span{
  background:linear-gradient(95deg,var(--ws-purple),var(--ws-pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ws-subtitle{
  max-width:500px;
  margin:0;
  color:var(--ws-muted);
  font-size:15px;
  line-height:1.72;
}

.ws-feature-strip{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:23px;
}
.ws-feature-strip>div{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:116px;
  padding:9px 11px;
  border:1px solid var(--ws-border);
  border-radius:13px;
  background:#fff;
}
.ws-feature-icon{
  width:31px;height:31px;
  display:grid;place-items:center;
  flex:none;
  border-radius:9px;
  background:#f1edf9;
  color:var(--ws-purple);
  font-size:11px;
}
.ws-feature-strip>div>span:last-child{display:flex;flex-direction:column}
.ws-feature-strip b{font-size:11px;line-height:1.2;color:var(--ws-navy)}
.ws-feature-strip small{margin-top:2px;color:#9995a5;font-size:9px}

.ws-pb-banner{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:360px;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid #eee4c9;
  border-radius:15px;
  background:#fffdf7;
}
.ws-pb-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  flex:none;
  border-radius:12px;
  background:#fff2c7;
  color:#c58b00;
}
.ws-pb-content{display:flex;flex-direction:column}
.ws-pb-content small{color:#997623;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ws-pb-content strong{margin-top:1px;color:var(--ws-navy);font-size:16px}
.ws-pb-content span{margin-top:1px;color:#8f8b9b;font-size:10px}
.ws-pb-sep{opacity:.45}

.ws-setup-panel{
  padding:23px;
  border:1px solid var(--ws-border);
  border-radius:22px;
  background:#fbfafe;
  box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(25,36,58,.04);
}

.ws-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:18px;
}
.ws-panel-head small{
  display:block;
  margin-bottom:2px;
  color:var(--ws-purple);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}
.ws-panel-head h2{
  margin:0;
  color:var(--ws-navy);
  font-size:21px;
  font-weight:900;
  letter-spacing:-.45px;
}
.ws-panel-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,var(--ws-navy),var(--ws-purple));
  color:#fff;
  box-shadow:0 8px 18px rgba(79,50,154,.18);
}

.ws-options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-bottom:18px;
}
.ws-option-group{
  min-width:0;
  padding:14px;
  border:1px solid var(--ws-border);
  border-radius:16px;
  background:#fff;
}
.ws-group-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  color:#5d5b70;
  font-size:10px;
  font-weight:900;
}

.ws-radio-cards{display:grid;gap:8px}
.ws-duration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ws-diff-cards{grid-template-columns:1fr}

.ws-card-label{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  margin:0;
  padding:9px 10px;
  border:1px solid var(--ws-border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:.18s ease;
}
.ws-card-label:hover{
  transform:translateY(-1px);
  border-color:rgba(79,50,154,.28);
}
.ws-card-label.active{
  border-color:var(--ws-purple);
  background:#f7f4fd;
  box-shadow:0 0 0 2px rgba(79,50,154,.05);
}
.ws-card-label input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ws-label-content{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
}
.ws-label-icon{
  width:31px;height:31px;
  display:grid;place-items:center;
  flex:none;
  border-radius:9px;
  background:#f1edf9;
  color:var(--ws-purple);
  font-size:11px;
}
.ws-label-text{min-width:0}
.ws-label-text strong{
  display:block;
  color:var(--ws-navy);
  font-size:11px;
  font-weight:850;
  line-height:1.2;
}
.ws-label-text small{
  display:block;
  margin-top:2px;
  color:#9692a4;
  font-size:9px;
  white-space:nowrap;
}
.ws-diff-dot{
  width:10px;height:10px;flex:none;border-radius:50%;
  box-shadow:0 0 0 4px rgba(0,0,0,.035);
}
.ws-diff-dot.easy{background:#10b981}
.ws-diff-dot.medium{background:#f59e0b}
.ws-diff-dot.hard{background:#ef4444}

.ws-start-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ws-btn-primary{
  width:100%;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,var(--ws-purple),#6941c6);
  color:#fff!important;
  text-decoration:none!important;
  font-size:14px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(79,50,154,.24);
  transition:.2s ease;
}
.ws-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 26px rgba(79,50,154,.30);
}
.ws-btn-upgrade{background:linear-gradient(135deg,#d97706,#f59e0b)}
.ws-access-note{
  margin:0;
  color:#c2414f;
  font-size:10px;
  font-weight:800;
}
.ws-hint-text{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  color:#9995a6;
  font-size:9.5px;
}

/* GAME */
#wsGame{padding:28px}

.ws-game-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.ws-mini-kicker{
  color:var(--ws-purple);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
}
.ws-game-head h2{
  margin:2px 0 0;
  color:var(--ws-navy);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.45px;
}
.ws-round-live{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid #dcefe8;
  border-radius:999px;
  background:#f2fbf7;
  color:#15835f;
  font-size:9px;
  font-weight:900;
}
.ws-round-live span{
  width:7px;height:7px;border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,.12);
}

.ws-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:13px;
}
.ws-stat-card{
  padding:10px 11px;
  border:1px solid var(--ws-border);
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.ws-stat-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-bottom:2px;
  color:#9692a4;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
}
.ws-stat-val{
  color:var(--ws-navy);
  font-size:20px;
  font-weight:950;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.ws-stat-score .ws-stat-head i{color:#f59e0b}
.ws-stat-score .ws-stat-val{color:var(--ws-purple)}
.ws-stat-combo .ws-stat-head i{color:#f97316}
.ws-stat-combo .ws-stat-val{color:#ea580c}
.ws-stat-combo.has-streak{background:#fff7ed;border-color:#fed7aa}
.ws-stat-acc .ws-stat-head i{color:#10b981}
.ws-acc-sep{font-size:12px;color:#a29dad;font-weight:500}

.ws-stat-timer.is-warning{
  border-color:#fca5a5;
  background:#fef2f2;
}
.ws-stat-timer.is-warning .ws-stat-val{
  color:#dc2626;
  animation:wsTimerPulse .9s infinite;
}
@keyframes wsTimerPulse{50%{transform:scale(1.06)}}

.ws-stage-wrap{
  padding:9px;
  border:1px solid var(--ws-border);
  border-radius:20px;
  background:#fbfafe;
}
.ws-stage-topline{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 5px 8px;
  color:#9995a6;
  font-size:9px;
  font-weight:800;
}
.ws-stage{
  position:relative;
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:34px 18px;
  overflow:hidden;
  border:1px solid #ddd7ea;
  border-radius:15px;
  background:
    linear-gradient(rgba(79,50,154,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,50,154,.035) 1px,transparent 1px),
    linear-gradient(180deg,#fdfcff,#f5f1fb);
  background-size:34px 34px,34px 34px,auto;
}
.ws-stage-badge{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid var(--ws-border);
  border-radius:999px;
  background:#fff;
  color:var(--ws-purple);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.ws-badge-pulse{width:6px;height:6px;border-radius:50%;background:#10b981}

.ws-word{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ws-navy);
  font-size:clamp(36px,6.5vw,58px);
  font-weight:950;
  line-height:1.05;
  letter-spacing:-.025em;
  word-break:break-word;
  user-select:none;
}
.ws-char-match{color:#10b981;text-shadow:0 0 8px rgba(16,185,129,.18)}
.ws-char-wrong{color:#ef4444;text-decoration:underline wavy #ef4444}
.ws-char-rest{color:#1e293b;opacity:.88}
.ws-word.ok{color:#10b981;animation:wsPopSuccess .25s ease}
.ws-word.bad{color:#ef4444;animation:wsShakeFail .3s ease}
@keyframes wsPopSuccess{50%{transform:scale(1.07)}}
@keyframes wsShakeFail{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-3px)}}

.ws-feedback-float{
  position:absolute;
  right:18px;
  top:14px;
  opacity:0;
  pointer-events:none;
  font-size:11px;
  font-weight:900;
  transition:.2s ease;
}
.ws-feedback-float.show{opacity:1;transform:translateY(-5px)}
.ws-feedback-float.combo-up{
  padding:4px 9px;
  border:1px solid #fed7aa;
  border-radius:999px;
  background:#fff7ed;
  color:#ea580c;
}
.ws-feedback-float.wrong{
  padding:4px 9px;
  border:1px solid #fecaca;
  border-radius:999px;
  background:#fef2f2;
  color:#dc2626;
}

.ws-input-container{
  max-width:620px;
  margin:14px auto 0;
}
.ws-input-wrap{position:relative;display:flex;align-items:center}
.ws-input-icon{
  position:absolute;
  left:16px;
  z-index:2;
  color:#aaa5b6;
  font-size:13px;
  pointer-events:none;
}
.ws-input{
  width:100%;
  height:52px;
  padding:0 52px 0 43px;
  border:1.5px solid #ddd7e8;
  border-radius:13px;
  background:#fff;
  color:var(--ws-navy);
  font-size:18px;
  font-weight:800;
  text-align:center;
  outline:none;
  transition:.2s ease;
}
.ws-input:focus{
  border-color:var(--ws-purple);
  box-shadow:0 0 0 4px rgba(79,50,154,.08);
}
.ws-input.is-mismatch{border-color:#fca5a5;background:#fffafa}
.ws-mobile-submit-btn{
  position:absolute;
  right:7px;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:0;
  border-radius:10px;
  background:var(--ws-soft);
  color:var(--ws-purple);
}
.ws-mobile-submit-btn:hover{background:var(--ws-purple);color:#fff}
.ws-input-helper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:10px;
  color:#8c8899;
  font-size:10px;
  font-weight:700;
}
.ws-keycap{
  padding:2px 7px;
  border:1px solid #dcd7e5;
  border-radius:5px;
  background:#f1f0f4;
  box-shadow:0 2px 0 #cfc9db;
  color:#525064;
  font-size:9px;
  font-weight:900;
}
.ws-helper-or{color:#aaa5b5}

/* RESULTS - classes preserved for word-sprint.js */
#wsResult{
  padding:38px 30px 44px;
  text-align:center;
}
.ws-result-badge{
  width:68px;height:68px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:17px;
  border-radius:22px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
  font-size:29px;
  box-shadow:0 12px 28px rgba(245,158,11,.25);
}
.ws-result-badge.record{
  background:linear-gradient(135deg,#ec4899,#8b5cf6);
  box-shadow:0 12px 28px rgba(139,92,246,.3);
}
.ws-result-title{
  margin-bottom:6px;
  color:var(--ws-navy);
  font-size:clamp(25px,4vw,36px);
  font-weight:950;
}
.ws-result-score-box{
  max-width:420px;
  margin:15px auto 24px;
  padding:17px 22px;
  border:1px solid #e7e0f4;
  border-radius:18px;
  background:#f8f6fc;
}
.ws-result-score-val{
  display:block;
  color:var(--ws-purple);
  font-size:clamp(38px,6vw,52px);
  font-weight:950;
  line-height:1.05;
}
.ws-result-score-label{
  margin-top:4px;
  color:#777287;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.ws-result-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  max-width:680px;
  margin:0 auto 27px;
  text-align:left;
}
.ws-result-stat{
  padding:12px 13px;
  border:1px solid var(--ws-border);
  border-radius:12px;
  background:#fff;
}
.ws-result-stat small{
  display:block;
  margin-bottom:3px;
  color:#8e899b;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}
.ws-result-stat strong{
  display:block;
  color:var(--ws-navy);
  font-size:16px;
  font-weight:900;
}
.ws-result-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.ws-btn-secondary{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 20px;
  border:1px solid var(--ws-border);
  border-radius:13px;
  background:#fff;
  color:var(--ws-navy);
  text-decoration:none;
  font-size:13px;
  font-weight:850;
}
.ws-btn-secondary:hover{border-color:rgba(79,50,154,.3);color:var(--ws-purple);background:var(--ws-soft)}

@media(max-width:991.98px){
  .ws-setup-layout{grid-template-columns:1fr;gap:25px}
  .ws-hero-copy{text-align:center;padding:0}
  .ws-subtitle{margin-left:auto;margin-right:auto}
  .ws-feature-strip{justify-content:center}
  .ws-pb-banner{margin-left:auto;margin-right:auto;text-align:left}
}

@media(max-width:767.98px){
  .ws-screen{padding:26px 18px}
  .ws-options-grid{grid-template-columns:1fr}
  .ws-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ws-result-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:575.98px){
  .ws-page-wrapper{padding:16px 0 38px}
  .ws-card{border-radius:20px}
  .ws-top-nav{margin-bottom:10px}
  .ws-screen{padding:22px 14px}
  .ws-title{font-size:37px;letter-spacing:-1.35px}
  .ws-subtitle{font-size:13.5px}
  .ws-feature-strip>div{flex:1;min-width:0}
  .ws-setup-panel{padding:15px;border-radius:18px}
  .ws-duration-grid{grid-template-columns:repeat(2,1fr)}
  .ws-card-label{padding:8px}
  .ws-label-icon{width:28px;height:28px}
  #wsGame{padding:18px 12px 25px}
  .ws-game-head h2{font-size:18px}
  .ws-round-live{display:none}
  .ws-stage-topline span:last-child{display:none}
  .ws-stage{min-height:210px;padding:30px 12px}
  .ws-word{font-size:clamp(31px,10vw,42px)}
  .ws-input{height:50px;font-size:17px}
  .ws-result-grid{grid-template-columns:repeat(2,1fr)}
  .ws-result-actions{flex-direction:column}
  .ws-result-actions button,
  .ws-result-actions a{width:100%}
}