/* ซูโดกุจอมคิด — ใช้ร่วมกับ ../bit/bit.css */
.sd-top{background:linear-gradient(135deg,#164A85,#2E6FC0)}
.sd-top .lvb.cur{box-shadow:0 0 0 3px #164A85,0 0 0 5px #fff}
.lvb.wip::after{content:"";position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;background:#FFC94D;border:2px solid #164A85}
.sd-sub{color:#DCE8FA}
.sd-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:20px;align-items:start}
.sd-play{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.sd-controls{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:12px}

/* ตาราง */
.sd-board{--cs:min(54px,calc((100vw - 56px) / var(--n)));display:grid;grid-template-columns:repeat(var(--n),var(--cs));border:3px solid #22324A;border-radius:10px;overflow:hidden;background:#22324A;gap:0;flex:0 0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sd-board.n4{--cs:min(86px,calc((100vw - 56px) / 4))}
.sd-board.n6{--cs:min(68px,calc((100vw - 56px) / 6))}
.cell{width:var(--cs);height:var(--cs);border:0;border-right:1px solid #B9C7DC;border-bottom:1px solid #B9C7DC;background:#fff;padding:0;margin:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:500;font-size:calc(var(--cs) * .56);color:#1D5FA8;cursor:pointer;position:relative}
.cell.bR{border-right:3px solid #22324A}
.cell.bB{border-bottom:3px solid #22324A}
.cell.given{color:#22324A;font-weight:700;background:#F2F5FA}
.cell.peer{background:#EAF1FB}
.cell.given.peer{background:#E2EAF6}
.cell.same{background:#D4E4FA}
.cell.sel{background:#FFE9A8;outline:3px solid #E8A300;outline-offset:-3px;z-index:1}
.cell.dup .v{color:#C0392B}
.cell.bad{background:#FBE0DD !important}
.cell.bad .v{color:#C0392B}
.cell.hl-unit{box-shadow:inset 0 0 0 100px rgba(255,201,77,.28)}
.cell.hl-pair{box-shadow:inset 0 0 0 100px rgba(142,68,173,.22)}
.cell.hint-cell{animation:sd-pulse 1s 4}
@keyframes sd-pulse{50%{background:#FFC94D}}
.cell .shp{width:72%;height:72%}
.sd-board.thai .cell{font-family:var(--body);font-weight:700;font-size:calc(var(--cs) * .6)}
.notes{display:grid;grid-template-columns:repeat(var(--nc),1fr);width:92%;height:92%;font-family:var(--body);font-size:calc(var(--cs) * .22);line-height:1;color:#5C5766}
.notes i{font-style:normal;display:flex;align-items:center;justify-content:center}
.sd-board.demo .cell:not(.given) .v{color:#8E44AD}

/* แผงค่า */
.sd-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sd-pad.n4{grid-template-columns:repeat(5,minmax(0,1fr))}
.pk{min-height:52px;border-radius:12px;border:2px solid #B9C7DC;background:#fff;font-family:var(--head);font-weight:600;font-size:24px;color:#1D5FA8;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:none}
.pk:hover{background:#EAF1FB}
.pk.done{opacity:.4}
.pk.erase{font-size:16px;color:#5C5766}
.sd-pad.colors .pk{min-height:64px}
.pk .shp{width:40px;height:40px}
.sd-board.thai~.sd-controls .pk,.pk{font-family:var(--head)}
#notes-btn.on{background:#FFF4D6;border-color:#E8A300;color:#7A4E00}
.sd-acts{display:flex;flex-wrap:wrap;gap:8px}
.sd-ghost{position:fixed;z-index:50;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:12px;background:#fff;border:2px solid #1D5FA8;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;font-size:28px;color:#1D5FA8;pointer-events:none;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.sd-ghost .shp{width:40px;height:40px}
.sd-hint{margin-top:0;border-color:#F0D9A0;background:#FFFBEF}
.sd-hint p{margin:0 0 8px}
.sd-hint .steps{margin:0 0 8px;padding-left:20px}
.sd-hint .steps li{margin-bottom:4px}
.sd-demo{margin-top:0;background:#F6F1FB;border-color:#DCCDEB}
.demo-stat{font-family:var(--head);margin:4px 0}
.demo-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sd-foot{margin-top:8px}
.tech{margin:0 0 6px;font-size:15px}
.tech b{font-family:var(--head);font-weight:600;color:#1D5FA8}
.sd-prog{display:flex;justify-content:space-between;gap:8px;font-size:14.5px;margin:3px 0}
.sd-prog b{color:#B07A00}
@media (max-width:900px){.sd-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sd-play{gap:12px}.pk{min-height:46px;font-size:21px}}