:root{--bg:#f1f5f9;--card:#fff;--ink:#0f172a;--mute:#64748b;--pri:#2563eb;--ok:#16a34a;--bad:#dc2626;--line:#e2e8f0}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans Thai','Sarabun',Tahoma,sans-serif;line-height:1.6}
.top{background:#1e293b;color:#fff;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem}
nav a{color:#cbd5e1;text-decoration:none;margin-right:14px;padding:4px 2px;border-bottom:2px solid transparent}
nav a.on,nav a:hover{color:#fff;border-color:#60a5fa}
main{max-width:880px;margin:20px auto;padding:0 16px}
.card{background:var(--card);border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
h2{margin-top:0}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px}
.flash.success{background:#dcfce7;color:#14532d}.flash.error{background:#fee2e2;color:#7f1d1d}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
input:not([type=checkbox]):not([type=file]){padding:9px 12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;flex:1;min-width:160px}
.search{width:100%;margin-bottom:12px}
.btn{padding:9px 16px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;font:inherit;cursor:pointer;text-decoration:none;color:var(--ink);display:inline-block}
.btn:hover:not(:disabled){background:#f1f5f9}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}.btn.primary:hover{background:#1d4ed8}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff;margin-top:12px}
.tablewrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#f8fafc;position:sticky;top:0}
.empty{text-align:center;color:var(--mute)}
.tip{color:var(--mute);font-size:.9rem}
/* เกม */
.game{text-align:center}
.stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px;background:#f8fafc;border-radius:10px;padding:8px}
.label{margin:18px 0 0;color:var(--mute)}
#meaning{margin:4px 0 18px;font-size:2rem}
.message{min-height:28px;margin:6px 0 12px;font-weight:600}
.message.good{color:var(--ok)}.message.bad{color:var(--bad)}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* เพิ่มเติม v2 */
nav{display:flex;flex-wrap:wrap;align-items:center}
.inline{display:inline;margin:0}
.linkbtn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:4px 2px;text-decoration:underline}
nav .linkbtn{color:#cbd5e1;text-decoration:none}nav .linkbtn:hover{color:#fff}
.linkbtn.small{font-size:.9rem;color:var(--mute)}
td .linkbtn{color:var(--pri);text-decoration:none;white-space:nowrap}
.narrow{max-width:460px;margin-left:auto;margin-right:auto}
dialog{border:0;border-radius:14px;padding:22px;width:min(420px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(15,23,42,.45)}
dialog h3{margin-top:0}
dialog label{display:block;margin-bottom:12px}
dialog label input{width:100%;margin-top:4px}
.row.end{justify-content:flex-end}

/* ---------- v3: โหมดสะกดคำ + แอนิเมชัน ---------- */
.lives{margin-top:12px;font-size:1.35rem;letter-spacing:3px;min-height:1.6em}
.heart{display:inline-block}
.heart.breaking{animation:heartbreak .8s ease-out}
.word{--w:clamp(20px,calc((min(100vw,880px) - 100px) / var(--n,8) - 8px),46px);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:60px;margin:6px 0 8px;perspective:600px}
.cell{width:var(--w);height:calc(var(--w) * 1.22);border:2px solid #cbd5e1;border-bottom-width:4px;border-radius:10px;background:#fff;
  font-size:calc(var(--w) * .6);font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s,background .15s;user-select:none}
.cell.typed{border-color:#64748b}
.cell.cursor{border-color:var(--pri);box-shadow:0 0 0 3px #bfdbfe}
.cell.cursor::after{content:"";width:2px;height:calc(var(--w) * .55);background:var(--pri);animation:blink 1s steps(1) infinite}
.cell.lock{background:#dcfce7;border-color:#16a34a;color:#14532d;cursor:default}
.cell.dash{border-color:transparent;background:none;cursor:default}
.cell.missed{background:#fee2e2;border-color:#dc2626;color:#b91c1c}
.cell.pop{animation:pop .18s ease-out}
.cell.flip{animation:flip .5s ease both}
.cell.flip.ok{--to:#22c55e;--tb:#16a34a}
.cell.flip.bad{--to:#ef4444;--tb:#dc2626}
.cell.hinted{animation:hinted 1.2s ease}
.gap{width:calc(var(--w) * .45)}
.word.shake{animation:shake .45s}
.word.nudge{animation:nudge .25s}
.word.win .cell{animation:hop .6s ease calc(var(--i) * 70ms) 2}
.word.reveal .cell.missed{animation:drop .45s ease-out both;animation-delay:calc(var(--i) * 70ms)}
.word.enter,#meaning.enter{animation:enter .35s ease-out}
.game.glow{animation:glow 1.2s ease}
.message.pop{animation:pop .25s ease-out}
.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;margin:4px auto 18px;max-width:600px}
.krow{display:flex;gap:6px;justify-content:center;width:100%}
.key{flex:0 1 46px;height:48px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;font-weight:700;font-size:1rem;font-family:inherit;
  cursor:pointer;transition:transform .08s,background .15s;padding:0}
.key.wide{flex-basis:76px;font-size:.95rem;white-space:nowrap}
.key.enter{background:var(--pri);border-color:var(--pri);color:#fff}
.key:hover:not(:disabled){background:#dbeafe}.key.enter:hover:not(:disabled){background:#1d4ed8}
.key:disabled{cursor:not-allowed;opacity:.45}
.key.absent{background:#94a3b8;border-color:#94a3b8;color:#fff}
.key.pressed{animation:press .15s}
kbd{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;padding:0 5px;font-size:.85em}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#confetti i{position:absolute;top:-20px;border-radius:2px;animation:fall linear forwards}

@keyframes blink{50%{opacity:0}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes press{50%{transform:scale(.88)}}
@keyframes flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}
  50%{transform:rotateX(90deg);background:var(--to);border-color:var(--tb);color:#fff}
  100%{transform:rotateX(0);background:var(--to);border-color:var(--tb);color:#fff}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}
  60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes nudge{50%{transform:translateX(6px)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) scale(1.08)}}
@keyframes drop{0%{transform:translateY(-24px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes enter{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes hinted{0%{box-shadow:0 0 0 0 #fde047;transform:scale(1.2)}100%{box-shadow:0 0 0 14px rgba(253,224,71,0);transform:scale(1)}}
@keyframes heartbreak{0%{transform:scale(1)}30%{transform:scale(1.6) rotate(-12deg)}60%{transform:scale(1.2) rotate(10deg)}100%{transform:scale(1)}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 24px rgba(34,197,94,0)}}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(720deg)}}

@media(max-width:560px){
  #meaning{font-size:1.5rem}
  .word{gap:4px}.card{padding:14px}.cell{border-radius:7px;border-width:1.5px;border-bottom-width:3px}
  .krow{gap:4px}.keyboard{gap:5px}
  .key{height:44px;font-size:.9rem}.key.wide{flex-basis:58px;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- v4: ตั้งค่าเกม / เลือกคำใช้เล่น / สรุปผลชุด ---------- */
#round_size{flex:0 0 110px;min-width:0}
th{white-space:nowrap}
select{padding:9px 10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}
.mode{margin-top:14px;padding:12px 14px;border-radius:10px;line-height:1.7}
.mode.random{background:#eff6ff;border:1px solid #bfdbfe}
.mode.pick{background:#f0fdf4;border:1px solid #bbf7d0}
.row .search{flex:1;margin-bottom:0}
.card > .row + form{margin-top:12px}
tr.inplay td{background:#f0fdf4}
.playcol{text-align:center;width:60px}
.bulk{margin-top:12px}
.bulk .btn.danger{margin-top:0}
.progress{display:inline-block;margin-top:8px;padding:2px 12px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:600;font-size:.95rem}
.summary h2{margin:6px 0}
.summary .big{font-size:2.6rem;font-weight:700;margin:4px 0}
.summary ul{list-style:none;padding:0;margin:16px auto;max-width:420px;text-align:left}
.summary li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.summary li.ok b{color:var(--ok)}.summary li.no b{color:var(--bad)}
.summary li span{color:var(--mute)}
.summary.enter{animation:enter .4s ease-out}