:root{--bg:#070a14;--bg-soft:#0d1322;--panel:#ffffff0a;--panel-strong:#ffffff0f;--panel-border:#ffffff16;--text:#e9eefb;--muted:#8b97b3;--accent:#7c9cff;--accent-soft:#7c9cff29;--mint:#6ee7b7;--danger:#fb7185;--grid-line:#ffffff12;--grid-strong:#ffffff75;--radius:18px;--shadow:0 24px 60px -30px #000000e6;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Noto Sans Thai,Inter,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);color:var(--text);margin:0}button{font-family:inherit}.app{min-height:100vh;padding:26px 20px 40px;position:relative;overflow-x:hidden}.app-glow{pointer-events:none;z-index:0;background:radial-gradient(680px 420px at 12% -8%,#7c9cff38,#0000 65%),radial-gradient(560px 420px at 92% 4%,#6ee7b71f,#0000 62%),radial-gradient(720px 520px at 60% 108%,#f472b617,#0000 65%);position:fixed;inset:0}.app-inner{z-index:1;max-width:1020px;margin:0 auto;position:relative}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#0a0f1d;letter-spacing:-.04em;background:linear-gradient(140deg,#7c9cfff2,#6ee7b7d9);border-radius:13px;place-items:center;width:44px;height:44px;font-size:22px;font-weight:800;display:grid;box-shadow:0 12px 30px -14px #7c9cffcc}.brand-text h1{letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:1.35rem;font-weight:700}.brand-text p{color:var(--muted);margin:0;font-size:.74rem}.header-actions{align-items:center;gap:8px;display:flex}.timer{background:var(--panel);border:1px solid var(--panel-border);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:7px;padding:8px 14px;display:inline-flex}.timer-icon{opacity:.8;font-size:.85rem}.timer-value{letter-spacing:.04em;font-weight:600}.btn{cursor:pointer;color:var(--text);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:11px;padding:9px 15px;font-size:.85rem;font-weight:600;transition:transform .12s,background .15s,border-color .15s,opacity .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.42;cursor:not-allowed}.btn--primary{color:#08101f;background:linear-gradient(140deg,#8aa6ff,#6ee7b7);box-shadow:0 14px 26px -16px #7c9cffe6}.btn--ghost{background:var(--panel);border-color:var(--panel-border);color:var(--text)}.btn--ghost:hover:not(:disabled){background:var(--panel-strong)}.btn--soft{background:var(--accent-soft);color:#cfdcff;border-color:#7c9cff59}.btn--danger{color:pink;background:#fb718529;border-color:#fb718573}.btn--sm{padding:7px 12px;font-size:.79rem}.btn--block{width:100%;margin-bottom:8px}.layout{grid-template-columns:minmax(0,1fr) 336px;align-items:start;gap:22px;display:grid}.game-column{flex-direction:column;gap:14px;min-width:0;display:flex}.difficulty{flex-direction:column;gap:8px;display:flex}.segmented{border:1px solid var(--panel-border);background:#ffffff09;border-radius:999px;gap:4px;padding:4px;display:flex}.seg-btn{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;flex:1;justify-content:center;align-items:center;gap:7px;padding:9px 10px;font-size:.86rem;font-weight:600;transition:background .16s,color .16s,border-color .16s;display:inline-flex}.seg-btn:hover{color:var(--text)}.seg-btn--active{color:var(--text);background:color-mix(in srgb, var(--seg-accent,var(--accent)) 16%, transparent);border-color:color-mix(in srgb, var(--seg-accent,var(--accent)) 45%, transparent)}.seg-dot{border-radius:50%;flex:none;width:8px;height:8px}.seg-en{letter-spacing:.06em;text-transform:uppercase;opacity:.55;font-size:.68rem}.difficulty-note{color:var(--muted);margin:0;padding-left:4px;font-size:.76rem}.board-card{border-radius:var(--radius);border:1px solid var(--panel-border);box-shadow:var(--shadow);background:linear-gradient(#ffffff0d,#ffffff05);padding:14px}.board-meta{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.board-meta-chip{color:var(--muted);font-variant-numeric:tabular-nums;background:#ffffff0a;border:1px solid #ffffff0d;border-radius:999px;padding:3px 9px;font-size:.72rem}.progress{background:#ffffff0f;border-radius:999px;height:4px;margin-bottom:10px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#7c9cff,#6ee7b7);border-radius:999px;height:100%;transition:width .3s;display:block}.board-wrap{max-width:520px;margin:0 auto;position:relative}.board{aspect-ratio:1;border:1px solid var(--grid-strong);background:#060912b8;border-radius:14px;grid-template-columns:repeat(9,1fr);width:100%;display:grid;overflow:hidden}.cell{border:none;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;justify-content:center;align-items:center;padding:0;font-size:clamp(17px,3.6vw,29px);font-weight:500;transition:background .12s,color .12s;display:flex;position:relative}.cell:hover{background:#ffffff0b}.cell:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;z-index:3}.btn:focus-visible,.tool:focus-visible,.pad-btn:focus-visible,.seg-btn:focus-visible,.switch input:focus-visible+.switch-knob{outline:2px solid var(--mint);outline-offset:2px}.cell:nth-child(9n){border-right:none}.cell:nth-child(n+73){border-bottom:none}.cell:nth-child(9n+3),.cell:nth-child(9n+6){border-right:2px solid var(--grid-strong)}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--grid-strong)}.cell--given{color:#dbe4ff;font-weight:650}.cell--user{color:var(--mint);font-weight:650}.cell--peer{background:#7c9cff13}.cell--same{background:#6ee7b729}.cell--selected,.cell--selected:hover{box-shadow:inset 0 0 0 2px var(--accent);z-index:2;background:#7c9cff47}.cell--wrong{color:var(--danger);background:#fb718529}.cell--wrong.cell--selected{box-shadow:inset 0 0 0 2px var(--danger);background:#fb718542}.cell--hint:after{content:"";pointer-events:none;border:2px solid #6ee7b7d9;border-radius:6px;animation:1.5s ease-in-out infinite hintPulse;position:absolute;inset:2px}@keyframes hintPulse{0%,to{opacity:.35}50%{opacity:1}}.cell__value{animation:.14s pop}@keyframes pop{0%{opacity:.4;transform:scale(.72)}to{opacity:1;transform:scale(1)}}.cell__notes{color:var(--muted);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);font-size:clamp(7px,1.5vw,11px);line-height:1;display:grid;position:absolute;inset:2px}.note{font-variant-numeric:tabular-nums;place-items:center;display:grid}.note--on{color:#a9b8d8}.note--focus.note--on{color:var(--mint);font-weight:700}.board--paused{filter:blur(3px)saturate(.4)}.board-paused{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#070a148c;border-radius:14px;place-items:center;display:grid;position:absolute;inset:0}.board-paused__card{text-align:center;border:1px solid var(--panel-border);box-shadow:var(--shadow);background:#0d1322eb;border-radius:16px;padding:18px 22px}.board-paused__card p{color:var(--muted);margin:6px 0 12px;font-size:.85rem}.board-paused__icon{font-size:1.6rem}.notes-banner{color:var(--mint);text-align:center;margin:10px 0 0;font-size:.75rem}.pad{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;display:grid}.pad-btn{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#ffffff0b;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:8px 0 6px;transition:background .14s,transform .12s,border-color .14s;display:flex;position:relative}.pad-btn:hover:not(:disabled){background:#7c9cff29;border-color:#7c9cff66;transform:translateY(-1px)}.pad-btn:active:not(:disabled){transform:translateY(0)}.pad-btn:disabled{opacity:.4;cursor:not-allowed}.pad-digit{font-variant-numeric:tabular-nums;font-size:clamp(15px,2.6vw,20px);font-weight:650}.pad-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.62rem}.pad-btn--done .pad-digit{color:var(--muted)}.pad-btn--done .pad-count{color:var(--mint)}.pad--notes .pad-btn{background:#6ee7b71a;border-color:#6ee7b759}.tools{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.tool{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:13px;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;transition:background .14s,border-color .14s,transform .12s;display:flex;position:relative}.tool:hover:not(:disabled){background:var(--panel-strong);transform:translateY(-1px)}.tool:disabled{opacity:.38;cursor:not-allowed}.tool--active{background:#6ee7b724;border-color:#6ee7b773}.tool--hint{background:#7c9cff1c;border-color:#7c9cff59}.tool-icon{font-size:1rem;line-height:1}.tool-label{color:var(--muted);font-size:.71rem}.tool--active .tool-label{color:var(--mint)}.tool-badge{background:var(--accent);color:#08101f;border-radius:999px;place-items:center;min-width:16px;height:16px;padding:0 4px;font-size:.62rem;font-weight:700;display:grid;position:absolute;top:4px;right:6px}.confirm-bar{background:#fb71851f;border:1px solid #fb718557;border-radius:13px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;font-size:.8rem;animation:.18s slideIn;display:flex}.confirm-bar__actions{gap:8px;margin-left:auto;display:flex}.hint-card{background:#7c9cff17;border:1px solid #7c9cff47;border-radius:15px;padding:13px 15px;animation:.2s slideIn}.hint-card--mistake{background:#fb71851a;border-color:#fb718559}.hint-card--eliminate{background:#6ee7b714;border-color:#6ee7b74d}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.hint-head{align-items:flex-start;gap:9px;display:flex}.hint-icon{font-size:1rem;line-height:1.3}.hint-titles{flex-direction:column;flex:1;min-width:0;display:flex}.hint-titles strong{font-size:.87rem}.hint-sub{color:var(--muted);font-size:.7rem}.hint-close{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:1.1rem;line-height:1}.hint-close:hover{color:var(--text)}.hint-body{color:#cfd8ef;margin:8px 0 10px;font-size:.82rem}.hint-actions{flex-wrap:wrap;gap:8px;display:flex}.panel{flex-direction:column;gap:12px;display:flex}.panel-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:14px 15px}.panel-card--muted{background:#ffffff05}.panel-title{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:.72rem;font-weight:600}.fact-row{justify-content:space-between;align-items:baseline;gap:10px;padding:3px 0;font-size:.82rem;display:flex}.fact-key{color:var(--muted);font-size:.76rem}.fact-value{text-align:right;font-weight:600}.fact-value--ok{color:var(--mint)}.stat-table{flex-direction:column;gap:2px;display:flex}.stat-row{grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:4px 0;font-size:.81rem;display:grid}.stat-name{font-weight:600}.stat-best{font-variant-numeric:tabular-nums;color:var(--text)}.stat-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.74rem}.panel-note{color:var(--muted);margin:8px 0 0;font-size:.7rem;line-height:1.5}.recent{flex-direction:column;gap:4px;margin:10px 0 0;padding:0;list-style:none;display:flex}.recent-item{background:#ffffff08;border-radius:9px;align-items:center;gap:8px;padding:5px 8px;font-size:.76rem;display:flex}.recent-dot{border-radius:50%;width:6px;height:6px}.recent-diff{color:var(--muted);flex:1}.recent-time{font-variant-numeric:tabular-nums}.recent-hint{color:var(--muted);font-size:.7rem}.setting-row{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;display:flex}.setting-text{flex-direction:column;gap:1px;display:flex}.setting-label{font-size:.81rem}.setting-hint{color:var(--muted);font-size:.68rem}.switch{background:#ffffff1f;border-radius:999px;flex:none;width:38px;height:21px;transition:background .18s;position:relative}.switch input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute}.switch-knob{background:#cfd8ef;border-radius:50%;width:15px;height:15px;transition:transform .18s;position:absolute;top:3px;left:3px}.switch--on{background:#6ee7b78c}.switch--on .switch-knob{background:#06110c;transform:translate(17px)}.confirm-row{gap:8px;margin-top:8px;display:flex}.keyboard-hint{color:#8b97b3bf;text-align:center;margin:0;font-size:.68rem;line-height:1.6}.footer{color:#8b97b3b3;text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:26px;font-size:.7rem;display:flex}.footer-dot{opacity:.5}.toast{border:1px solid var(--panel-border);z-index:40;background:#0d1322f5;border-radius:999px;padding:10px 18px;font-size:.82rem;font-weight:600;animation:.22s toastIn;position:fixed;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 18px 40px -22px #000000f2}.toast--good{color:var(--mint);border-color:#6ee7b773}.toast--bad{color:pink;border-color:#fb718573}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;background:#04060db8;place-items:center;padding:20px;animation:.2s fadeIn;display:grid;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{text-align:center;background:linear-gradient(#141b2ffa,#0b101efa);border:1px solid #7c9cff47;border-radius:22px;width:min(100%,372px);padding:26px 24px 22px;animation:.24s cubic-bezier(.2,.9,.3,1.2) modalIn;position:relative;overflow:hidden;box-shadow:0 40px 90px -40px #7c9cff8c}@keyframes modalIn{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-glow{pointer-events:none;background:radial-gradient(circle,#6ee7b759,#0000 70%);width:220px;height:160px;position:absolute;top:-80px;left:50%;transform:translate(-50%)}.win-stars{justify-content:center;gap:6px;margin-bottom:4px;font-size:1.6rem;display:flex}.star{color:#ffffff29}.star--on{color:#ffd479;text-shadow:0 0 18px #ffd4798c}.modal-title{margin:0;font-size:1.3rem}.modal-sub{margin:4px 0 18px;font-size:.8rem;font-weight:600}.win-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;display:grid}.win-stat{border:1px solid var(--panel-border);background:#ffffff0a;border-radius:12px;flex-direction:column;gap:2px;padding:10px 6px;display:flex}.win-stat-key{color:var(--muted);font-size:.68rem}.win-stat-value{font-variant-numeric:tabular-nums;font-size:1rem;font-weight:700}.modal-actions{flex-direction:column;gap:8px;display:flex}@media (width<=980px){.layout{grid-template-columns:minmax(0,1fr)}.panel{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}}@media (width<=620px){.app{padding:18px 12px 32px}.app-header{gap:10px;margin-bottom:16px}.brand-text p{display:none}.header-actions{justify-content:space-between;width:100%}.seg-en{display:none}.seg-btn{padding:8px 6px;font-size:.82rem}.panel{grid-template-columns:minmax(0,1fr)}.board-card{border-radius:16px;padding:10px}.pad{gap:4px}.tools{gap:6px}.tool-label{font-size:.65rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}