/* Scope EVERYTHING to .ws_app */
.ws_app{
  --grad-1:#BB6BD9;         /* Orchid */
  --grad-2:#FF9F1A;         /* Mango */
  --ink-1:#0E1018;
  --ink-2:#131628;

  --text:#F2F5FF;
  --muted:#A9B5D8;

  --accent-mint:#2AD1A3;
  --accent-water:#FF6B6B;

  --panel:#121428;
  --panel-2:#0F1222;
  --border:#1B2040;

  --grid-bg:#151834;
  --cell:#10132B;
  --cell-border:#1D2344;
  --preview:#1D2B54;

  /* user vs cpu cell sizing (fluid) */
  --cell-size-user: clamp(36px, 5.2vw, 48px);
  --font-grid-user: calc(var(--cell-size-user)*0.52);

  --cell-size-cpu: clamp(24px, 3.2vw, 30px);
  --font-grid-cpu: calc(var(--cell-size-cpu)*0.53);
}

.ws_app{
  min-height: 100vh;
}
.ws_app *{ box-sizing:border-box }
.ws_app section, .ws_app div, .ws_app table{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text)
}

/* Background */
.ws_app .ws_bg-gradient{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 15% 5%, rgba(187,107,217,.25) 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 95%, rgba(255,159,26,.22) 0%, transparent 60%),
    linear-gradient(160deg, var(--ink-1) 0%, var(--ink-2) 100%);
  z-index:-3;
}
.ws_app .ws_bg-particles::before,
.ws_app .ws_bg-particles::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(3px 3px at 10% 20%, rgba(187,107,217,.35) 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 30%, rgba(255,159,26,.35) 50%, transparent 51%),
    radial-gradient(3px 3px at 30% 70%, rgba(42,209,163,.3) 50%, transparent 51%);
  filter:blur(.3px); z-index:-2; animation:ws_float 18s linear infinite;
}
.ws_app .ws_bg-particles::after{ animation-duration:26s; opacity:.5 }
@keyframes ws_float{ 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }

.ws_home{
  display: flex;
  justify-content: center ;
  align-items: center ;
  min-height: 100vh;
}

.cover{
  width: 40rem;
}

body{
  background-color: white !important;
}


/* Screens & cards */
.ws_app .ws_screen{ display:none; padding:24px 20px 40px; max-width:1280px; margin:0 auto; }
.ws_app .ws_active{ display:block; }
.ws_app .ws_title{ font-family:Poppins,Inter,sans-serif; font-size:3.5rem; margin:8vh 0 8px; letter-spacing:.5px; }
.ws_app .ws_title span{
  background:linear-gradient(90deg, var(--grad-1), var(--grad-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(255,159,26,.25);
}
.ws_app .ws_subtitle{ color:var(--muted); margin-top:4px }
.ws_app .ws_card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--border); border-radius:18px; padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.ws_app .ws_start{ max-width:760px; margin:0 auto; text-align:center }
.ws_app .ws_end{ max-width:880px; margin:8vh auto; text-align:center }
.ws_app .ws_btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* Buttons */
.ws_app .ws_btn{
  background:#0f142e; color:var(--text); border:1px solid #263054;
  padding:12px 18px; border-radius:999px; cursor:pointer; font-weight:700;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  font-size: 1.5rem;
}
.ws_app .ws_btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.35); border-color:#334065; }
.ws_app .ws_btn:active{ transform:translateY(0) scale(.98) }
.ws_app .ws_primary{ background:linear-gradient(90deg, var(--grad-1), var(--grad-2)); color:#120a04; border:none; }
.ws_app .ws_neon{ background:linear-gradient(90deg, var(--grad-2), var(--accent-mint)); color:#0a1016; border:none; }
.ws_app .ws_ghost{ background:transparent; border:1px solid #334065; color:var(--muted) }
.ws_app .ws_tiny{ padding:8px 12px; font-size:.9rem }

/* Nav + headers */
.ws_app .ws_nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ws_app .ws_crumbs{ color:var(--muted); font-size:.95rem }
.ws_app .ws_nav-right{ display:flex; gap:10px; }
.ws_app .ws_screen-title{ text-align:center; font-size:28px; margin:10px 0 8px; letter-spacing:.3px; }
.ws_app .ws_center{ text-align:center } .ws_app .ws_mt{ margin-top:18px } .ws_app .ws_muted{ color:var(--muted) }

/* Pack grid */
.ws_app .ws_pack-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:20px; }
.ws_app .ws_pack-card{
  background:linear-gradient(180deg, #151937, #11142b); border:1px solid var(--border); border-radius:16px; padding:18px;
  display:flex; flex-direction:column; gap:8px; min-height:140px; transform:perspective(900px) translateZ(0);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.ws_app .ws_pack-card:hover{ transform:translateY(-3px) rotateX(2deg); box-shadow:0 18px 38px rgba(0,0,0,.35); border-color:#2b3763; }
.ws_app .ws_pack-title{ font-weight:800 } .ws_app .ws_pack-tags{ font-size:.85rem; color:var(--muted) }
.ws_app .ws_pack-btn{ margin-top:auto }

.difficulty{
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* Difficulty cards */
.ws_app .ws_diff-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:16px; }
.ws_app .ws_diff-card{
  background:linear-gradient(180deg, #151937, #11142b);
  border:1px solid var(--border); border-radius:16px; padding:18px;
  cursor:pointer; text-align:left; color:var(--text);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.ws_app .ws_diff-card:hover{ transform:translateY(-2px); border-color:#2b3863; box-shadow:0 16px 32px rgba(0,0,0,.35) }
.ws_app .ws_diff-card[aria-pressed="true"]{ outline:2px solid var(--grad-2); border-color:var(--grad-2) }
.ws_app .ws_diff-emoji{ font-size:26px; margin-bottom:6px }

/* HUD */
.ws_app .ws_hud{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 0 18px;
margin-bottom: 40px; }
.ws_app .ws_hud-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.ws_app .ws_pill{ background:#121a2a; border:1px solid #263457; border-radius:999px; padding:6px 12px; font-weight:800 }
.ws_app .ws_alt{ background:#2a121a; border-color:#3f2630 }
.ws_app .ws_streak-pill{ background:#132820; border:1px solid #2b5949; border-radius:999px; padding:6px 12px; font-weight:800; color:#c7ffe8 }
.ws_app .ws_progress{ position:relative; width:min(560px, 64vw); height:10px; background:#0f162a; border-radius:999px; overflow:hidden; border:1px solid #263457 }
.ws_app .ws_bar{ position:absolute; top:0; height:100%; transition:width .35s ease }
.ws_app .ws_you{ background:linear-gradient(90deg, var(--grad-1), var(--grad-2)) }
.ws_app .ws_cpu{ background:linear-gradient(90deg, var(--accent-water), #ffc1cb) }

/* Boards (3-column compete, centered solo) */
.ws_app .ws_boards{
  display:grid; gap:24px; align-items:start;
}
.ws_app .ws_boards.is-compete{
  grid-template-columns: 340px minmax(560px, 1fr) 360px;
  grid-template-areas: "cpu user words";
}
.ws_app .ws_boards.is-solo{
  grid-template-columns: 1fr minmax(560px, 720px) 360px 1fr;
  grid-template-areas: ". user words .";
}

/* Panels + grid areas */
.ws_app .ws_panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border); border-radius:16px; padding:16px;
}
.ws_app .ws_panel-title{ margin:0 0 12px; font-weight:900; letter-spacing:.4px }
.ws_app .ws_panel-cpu{ grid-area: cpu; opacity:.92; filter:saturate(.85) }
.ws_app .ws_panel-user{ grid-area: user }
.ws_app .ws_words-panel{ grid-area: words; min-height:220px }

/* Grid wrappers */
.ws_app .ws_grid-wrap{ overflow:auto; border-radius:12px; border:1px solid var(--cell-border); background:var(--grid-bg) }
.ws_app .ws_user-wrap{ margin-inline:auto }

/* Word list */
.ws_app .ws_word-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
  max-height:520px; overflow:auto;
}
.ws_app .ws_word-list li{
  background:#0f1729; border:1px solid #202b46; border-radius:12px; padding:8px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ws_app .ws_word-list li .left{ display:flex; align-items:center; gap:8px }
.ws_app .ws_badge{ font-size:.8rem; padding:2px 8px; border-radius:999px; border:1px solid #2b365b; color:#b9c7ea; background:#111a30 }
.ws_app li.ws_found-you{ border-color:#2a5e80 }
.ws_app li.ws_found-you .ws_badge{ background:#122436; border-color:#2a5e80; color:#aee6ff }
.ws_app li.ws_found-cpu{ border-color:#7a2c35 }
.ws_app li.ws_found-cpu .ws_badge{ background:#2c151a; border-color:#7a2c35; color:#ffd6e0 }
.ws_app li.ws_done .word{ text-decoration:line-through; color:#9bb2d8 }

/* Grids */
.ws_app .ws_grid{ border-collapse:separate; border-spacing:0; width:auto }
.ws_app .ws_grid--user td{
  width:var(--cell-size-user); height:var(--cell-size-user);
  font-size:var(--font-grid-user); font-weight:900; letter-spacing:.6px;
  text-align:center; vertical-align:middle; text-transform:lowercase;
  background:var(--cell); border:1px solid var(--cell-border); color:#eef3ff;
  user-select:none; cursor:pointer; border-radius:8px;
}
.ws_app .ws_grid--cpu td{
  width:var(--cell-size-cpu); height:var(--cell-size-cpu);
  font-size:var(--font-grid-cpu); font-weight:800; letter-spacing:.5px;
  text-align:center; vertical-align:middle; text-transform:lowercase;
  background:var(--cell); border:1px solid var(--cell-border); color:#dae6ff;
  user-select:none; cursor:pointer; border-radius:6px;
}

.ws_app .ws_grid td.ws_preview{ background:var(--preview) }
.ws_app .ws_grid td.ws_found-you{
  background:linear-gradient(180deg, rgba(187,107,217,.22), rgba(255,159,26,.18));
  outline:1px solid rgba(255,159,26,.35); color:#fff;
}
.ws_app .ws_grid td.ws_found-cpu{
  background:linear-gradient(180deg, rgba(255,107,107,.22), rgba(255,159,159,.18));
  outline:1px dashed rgba(255,107,107,.5); color:#fff;
}

/* Streak banner */
.ws_app .ws_streak{
  position:fixed; top:14px; left:50%; transform:translate(-50%,-60px);
  background:linear-gradient(90deg, var(--accent-mint), #baffd7);
  color:#033323; padding:10px 16px; border-radius:999px; font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.35); z-index:9999; transition:transform .25s ease;
}
.ws_app .ws_streak.show{ transform:translate(-50%,0) }

/* End screen */
.ws_app .ws_end-title{ font-family:Poppins,Inter,sans-serif; font-size:36px; margin:0 0 6px }
.ws_app .ws_end-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 }
.ws_app .ws_stat{ background:#0f1626; border:1px solid var(--border); border-radius:12px; padding:12px 10px }
.ws_app .ws_label{ color:#9ab1db; display:block; margin-bottom:6px; font-size:.9rem }
.ws_app .ws_value{ font-size:20px; font-weight:900 }

/* Confetti */
.ws_app .ws_confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9998 }
.ws_app .confetti{ position:absolute; width:10px; height:10px; opacity:.9; transform:translateY(-100px) rotate(0deg);
  animation:ws_fall linear forwards, ws_spin linear forwards }
@keyframes ws_fall{ to{ transform:translateY(110vh) rotate(0) } }
@keyframes ws_spin{ from{ transform:rotate(0) } to{ transform:rotate(720deg) } }

/* Accessibility focus */
.ws_app :focus-visible{ outline:2px solid var(--grad-2); outline-offset:2px }

/* Compete word-list chips */
.ws_app .ws_statuses{
  display:flex; gap:8px; align-items:center;
}
.ws_app .ws_status{
  font-size:.75rem; padding:2px 8px; border-radius:999px;
  border:1px solid #2b365b; background:#111a30; color:#b9c7ea;
  line-height:1.2;
}
.ws_app .ws_status.found-you{
  background:#122436; border-color:#2a5e80; color:#aee6ff;
}
.ws_app .ws_status.found-cpu{
  background:#2c151a; border-color:#7a2c35; color:#ffd6e0;
}
.ws_app .ws_status .tick{
  margin-left:6px; font-weight:900;
}

/* Make touch drags smooth and prevent scrolling/selection while dragging */
.ws_app .ws_grid-wrap{ overscroll-behavior: contain; }
.ws_app .ws_grid--user,
.ws_app .ws_grid--user td{
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}



/* ================================
   RESPONSIVE MEDIA QUERIES (ws_app)
   Add AFTER your existing styles
   ================================ */


/* -------- Desktop / laptop (1120–1439px) -------- */
@media (max-width: 1439px) and (min-width: 1121px){
  .ws_app .ws_boards.is-compete{
    grid-template-columns: 340px minmax(560px,1fr) 360px;
  }
  .ws_app .ws_grid-wrap{ max-height: 68vh }
  .ws_app .ws_word-list{ max-height: 56vh }
}

/* -------- Tablet landscape / small desktop (980–1120px) -------- */
@media (max-width: 1120px){
  .ws_app{
    --cell-size-user: clamp(36px, 4.8vw, 50px);
    --font-grid-user: calc(var(--cell-size-user)*0.56);
    --cell-size-cpu: clamp(26px, 3.4vw, 34px);
    --font-grid-cpu: calc(var(--cell-size-cpu)*0.56);
  }
  .ws_app .ws_title{ font-size: 3.2rem }
  .ws_app .ws_boards.is-compete{
    grid-template-columns: 300px minmax(520px,1fr) 320px;
  }
  .ws_app .ws_grid-wrap{ max-height: 64vh }
  .ws_app .ws_word-list{ max-height: 52vh }
}

/* -------- Tablet portrait / large phones (≤980px) -------- */
@media (max-width: 980px){
  /* Stack order: User → Words → CPU (you already define grid areas) */
  .ws_app .ws_boards.is-compete,
  .ws_app .ws_boards.is-solo{
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "words"
      "cpu";
    gap: 18px;
  }

  .ws_app{
    /* Make cells larger on touch screens while fitting width */
    --cell-size-user: clamp(36px, 10.8vw, 54px);
    --font-grid-user: calc(var(--cell-size-user)*0.62);
    --cell-size-cpu: clamp(24px, 9vw, 40px);
    --font-grid-cpu: calc(var(--cell-size-cpu)*0.60);
  }

  .ws_app .ws_nav{ flex-wrap: wrap; gap: 8px }
  .ws_app .ws_crumbs{ width: 100%; order: 3; text-align: left; font-size: .9rem }
  .ws_app .ws_nav-right{ order: 2; margin-left: auto }

  .ws_app .ws_hud{
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }
  .ws_app .ws_progress{ width: 100% }

  /* Keep grids comfortably tall on mobile/tablet */
  .ws_app .ws_grid-wrap{ 
    max-height: calc(100dvh - 280px);  /* nav + hud + margins */
  }

  /* Word list scroll area */
  .ws_app .ws_words-panel{ min-height: auto }
  .ws_app .ws_word-list{ max-height: calc(100dvh - 320px) }

  /* Start screen bits */
  .ws_home{ min-height: auto; padding: 16px 0 }
  .ws_app .ws_start{ margin-top: 4vh }
  .ws_app .ws_title{ font-size: 2.6rem }
  .ws_app .ws_btn{ font-size: 1.1rem; padding: 10px 16px }
  .ws_app .cover{ width: min(88vw, 520px); height: auto }
}

/* -------- Phones portrait (≤720px) -------- */
@media (max-width: 720px){
  .ws_app{
    --cell-size-user: clamp(34px, 12.2vw, 50px); /* 8×8 nearly fills width */
    --font-grid-user: calc(var(--cell-size-user)*0.66);
    --cell-size-cpu: clamp(22px, 10.6vw, 36px);
    --font-grid-cpu: calc(var(--cell-size-cpu)*0.64);
  }

  .ws_app .ws_card{ padding: 18px }
  .ws_app .ws_title{ font-size: 2.2rem }
  .ws_app .ws_screen{ padding: 16px 14px 28px }

  .ws_app .ws_pack-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  .ws_app .ws_diff-grid{
    grid-template-columns: 1fr;
  }

  /* Make list items a touch larger */
  .ws_app .ws_word-list li{ padding: 10px 12px }
  .ws_app .ws_badge{ font-size: .78rem }

  /* Tighten end screen */
  .ws_app .ws_end{ margin: 5vh auto }
  .ws_app .ws_end-stats{ grid-template-columns: repeat(2,1fr) }
}

/* -------- Small phones (≤560px) -------- */
@media (max-width: 560px){
  .ws_app{
    --cell-size-user: clamp(32px, 12.8vw, 46px);
    --font-grid-user: calc(var(--cell-size-user)*0.68);
    --cell-size-cpu: clamp(20px, 11.4vw, 34px);
    --font-grid-cpu: calc(var(--cell-size-cpu)*0.66);
  }
  .ws_app .ws_btn-row{ gap: 10px }
  .ws_app .ws_btn{ width: 100% } /* easier taps */
  .ws_app .ws_grid-wrap{ max-height: calc(100dvh - 260px) }
  .ws_app .ws_word-list{ max-height: calc(100dvh - 300px) }

  .ws_app .ws_panel-title{ font-size: 1rem }
  .ws_app .ws_pill{ padding: 6px 10px }
}

/* -------- Ultra small phones (≤400px) -------- */
@media (max-width: 400px){
  .ws_app .ws_title{ font-size: 1.9rem }
  .ws_app .ws_crumbs{ font-size: .82rem }
  .ws_app .ws_btn{ font-size: 1rem }
  .ws_app .ws_label{ font-size: .85rem }
  .ws_app .ws_value{ font-size: 1rem }
}

/* -------- Short viewports (landscape phones, small Chromebooks) -------- */
@media (max-height: 560px){
  .ws_app .ws_screen{ padding: 12px 12px 18px }
  .ws_app .ws_title{ margin: 2vh 0 6px }
  .ws_app .ws_card{ padding: 14px }
  .ws_app .ws_nav{ margin-bottom: 8px }
  .ws_app .ws_hud{ margin: 6px 0 10px }
  .ws_app .ws_grid-wrap{ max-height: calc(100dvh - 180px) }
  .ws_app .ws_word-list{ max-height: calc(100dvh - 200px) }
}

/* -------- Touch-first refinements -------- */
@media (hover: none){
  .ws_app .ws_btn:hover{ transform: none; box-shadow: none }
  .ws_app .ws_grid--user td,
  .ws_app .ws_grid--cpu td{
    -webkit-tap-highlight-color: transparent;
  }
}

/* -------- Coarse pointers (most tablets/phones) -------- */
@media (pointer: coarse){
  .ws_app .ws_grid--user td,
  .ws_app .ws_grid--cpu td{
    touch-action: none;         /* enables smooth drag without scrolling */
  }
}

/* -------- Safe-area for iOS notches -------- */
@supports (padding: max(0px)){
  .ws_app .ws_screen{
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding-top: max(24px, env(safe-area-inset-top));
  }
}

/* -------- Optional: reduced motion friendliness -------- */
@media (prefers-reduced-motion: reduce){
  .ws_app *{ animation: none !important; transition: none !important }
}