/* EngNote - Trò chơi «Tìm từ» trong Cộng đồng (bài Loai 5). Dùng chung cho trang công khai và Cộng đồng trong ứng dụng; chỉ dùng các biến màu chung (--card, --border, --text, --ink, --accent...). */
.ws{--w0:33,150,243;--w1:255,152,0;--w2:76,175,80;--w3:156,39,176;--w4:233,30,99;--w5:0,150,136;--w6:190,160,0;--w7:244,67,54;
  display:block;margin:6px 0 2px;border:1px solid var(--border);border-radius:14px;background:var(--card-2,var(--card));padding:14px 14px 12px;color:var(--text)}
.ws-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.ws-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:800}
.ws-meta{color:var(--muted);font-size:13px}
.ws-how{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.4}
.ws-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.ws-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;color:var(--ink);min-width:3.2em}
.ws-count{padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:13px}
.ws-spacer{flex:1}
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:14px;font-weight:700;cursor:pointer}
.ws-btn:hover:not(:disabled){border-color:var(--accent)}
.ws-btn:disabled{opacity:.45;cursor:not-allowed}
.ws-btn:focus-visible,.ws-qb:focus-visible,.ws-again:focus-visible,.ws-reg:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.ws-mine{margin:0 0 10px;padding:6px 10px;border-radius:10px;background:var(--accent-soft);color:var(--text);font-size:13px;line-height:1.4}
.ws-mine[hidden]{display:none}
.ws-linkbtn{padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline}
.ws-play{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.ws-gridbox{flex:1 1 340px;min-width:0;max-width:460px}
.ws-grid{display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:2px;aspect-ratio:1/1;width:100%;max-width:460px;box-sizing:border-box;
  background:var(--border);border:2px solid var(--border);border-radius:12px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ws-c{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--card);color:var(--ink);
  font-family:inherit;font-size:clamp(12px,3.8vw,20px);font-weight:800;line-height:1;text-transform:uppercase;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.ws-c:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}
.ws-c.anchor{outline:3px solid var(--accent);outline-offset:-3px;background:var(--accent-soft)}
.ws-c.sel{background:var(--accent);color:#fff}
:root[data-theme="dark"] .ws-c.sel{color:#10131a}
.ws-c.f{color:var(--ink)}
.ws-c.f0{background:rgba(var(--w0),.34)}.ws-c.f1{background:rgba(var(--w1),.38)}.ws-c.f2{background:rgba(var(--w2),.36)}.ws-c.f3{background:rgba(var(--w3),.30)}
.ws-c.f4{background:rgba(var(--w4),.30)}.ws-c.f5{background:rgba(var(--w5),.34)}.ws-c.f6{background:rgba(var(--w6),.38)}.ws-c.f7{background:rgba(var(--w7),.30)}
.ws-c.miss{background:rgba(207,58,58,.28)}
.ws-c.hint{animation:ws-pulse .9s ease-in-out 5;box-shadow:inset 0 0 0 3px var(--accent)}
@keyframes ws-pulse{0%,100%{background:var(--card)}50%{background:var(--accent-soft)}}
.ws-msg{min-height:1.4em;margin:8px 0 0;font-size:13px;color:var(--muted)}
.ws-msg.ok{color:var(--green);font-weight:700}
.ws-msg.bad{color:var(--red)}

.ws-clues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;min-width:0;flex:1 1 260px}
.ws-q{margin:0;padding:0}
.ws-qb{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;text-align:left;padding:8px 10px;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;cursor:pointer}
.ws-qb:hover{border-color:var(--accent)}
.ws-qb[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.ws-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:800}
:root[data-theme="dark"] .ws-no{color:#10131a}
.ws-qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ws-m{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ws-pat{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--muted);font-size:13px}
.ws-len{font-size:12px;color:var(--muted)}
.ws-tick{display:none;flex:none;color:var(--green);font-weight:900;font-size:18px}
.ws-q.found .ws-qb{border-color:var(--green);background:var(--green-soft,var(--card))}
.ws-q.found .ws-tick{display:block}
.ws-q.found .ws-pat{color:var(--ink);font-weight:800;letter-spacing:.06em;font-size:15px}
.ws-q.f0 .ws-no{background:rgb(var(--w0))}.ws-q.f1 .ws-no{background:rgb(var(--w1))}.ws-q.f2 .ws-no{background:rgb(var(--w2))}.ws-q.f3 .ws-no{background:rgb(var(--w3))}
.ws-q.f4 .ws-no{background:rgb(var(--w4))}.ws-q.f5 .ws-no{background:rgb(var(--w5))}.ws-q.f6 .ws-no{background:rgb(var(--w6))}.ws-q.f7 .ws-no{background:rgb(var(--w7))}

.ws-res{margin-top:14px;padding:14px;border-radius:12px;background:var(--card);border:2px solid var(--accent);text-align:center}
.ws-res[hidden]{display:none}
.ws-score{font-size:22px;font-weight:900;color:var(--green);line-height:1.25}
.ws-resmsg{margin:6px 0 10px;color:var(--text)}
.ws-words{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px;text-align:left}
.ws-words li{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card-2,var(--card));font-size:14px;line-height:1.5}
.ws-words b{color:var(--ink)}
.ws-words .ws-ipa{color:var(--muted);margin-left:4px}
.ws-words .ws-ex{margin-top:2px;color:var(--muted);font-style:italic}
.ws-words .ws-act{margin-top:2px}
.ws-words .ws-lnk{display:inline-flex;align-items:center;gap:4px;margin:4px 12px 0 0;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.ws-words .ws-lnk:hover{text-decoration:underline}
.ws-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.ws-again,.ws-reg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:2px solid var(--accent);border-radius:12px;background:transparent;color:var(--accent);font-size:15px;font-weight:800;text-decoration:none;cursor:pointer}
.ws-reg{background:var(--accent);color:#fff;min-height:40px;padding:0 16px;font-size:14px}
:root[data-theme="dark"] .ws-reg{color:#10131a}
.ws-stat,.ws-stat0{color:var(--muted);font-size:13px}
.ws-stat0{margin:10px 0 0}
.ws.done .ws-stat0{display:none}
.ws-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);font-size:14px}

.ws.done .ws-c{cursor:default}
.ws.done .ws-hintbtn{display:none}
@media (max-width:760px){
  .ws{padding:12px 10px 10px}
  .ws-grid{max-width:none}
}
@media (prefers-reduced-motion:reduce){.ws-c.hint{animation:none}}