/* Shared shell and controls, based on the Sudoku page. Puzzle-specific geometry stays local. */
:root{--bg:#14161c;--panel:#1d2029;--panel-2:#262a36;--text:#e8e9ee;--muted:#9097a8;--line:#333849;--accent:#5b8cff;--wall:#0c0d11;--grid:#252936;--cell:#3a3f4f;--unset:var(--cell);--off:var(--cell);--mark:#ffd23f;--ok:#3ecf8e;--bad:#ff5d73}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:24px 16px 48px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}h1{margin:0;font-size:26px}.sub{color:var(--muted);margin:4px 0 20px}
.back{display:inline-flex;align-items:center;min-height:36px;margin-bottom:4px;color:var(--muted);font-size:14px;text-decoration:none}.back:hover{color:var(--text)}
.head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}.card h2{margin:0 0 12px;font-size:17px}.card h3{font-size:16px}
button,select,textarea{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
button{padding:8px 14px;cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #9fcbff;outline-offset:2px}
select,textarea{padding:6px 8px}textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:16px;resize:vertical}label{font-size:14px;color:var(--muted)}
.btns,.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:14px}
.hint{font-size:13px;color:var(--muted);text-align:left;line-height:1.6;margin:10px 0}.status{font-size:16px;font-weight:600}.status.bad{color:var(--bad)}
.method{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin:-8px 0 20px;font-size:14px}.method ol{margin:0;padding-left:22px}.method li{margin:4px 0}.method li::marker{color:var(--muted)}
#methodBtn .caret{display:inline-block;margin-left:6px;transition:transform .15s}#methodBtn[aria-expanded=true]{border-color:var(--accent)}#methodBtn[aria-expanded=true] .caret{transform:rotate(180deg)}
.lang .language-toggle{position:relative;display:inline-flex;align-items:center;gap:0;padding:4px;min-height:44px;border-radius:999px;background:var(--bg);border:1px solid #41485c;isolation:isolate}.language-toggle::before{content:"";position:absolute;inset:4px auto 4px 4px;width:50px;border-radius:999px;background:#38445f;box-shadow:inset 0 1px 0 #ffffff20,0 2px 5px #0003;transition:transform .18s ease;z-index:-1}.language-toggle.is-en::before{transform:translateX(50px)}.language-toggle span{width:50px;text-align:center;color:var(--muted);font-size:13px;font-weight:600}.language-toggle:not(.is-en) span:first-child,.language-toggle.is-en span:last-child{color:#fff}
/* Grid line colours and state highlights are shared; region colours and puzzle symbols remain meaningful. */
.board,.board-grid{border:3px solid var(--wall);gap:0}.cell{border-radius:0;border-color:var(--grid);transition:none}.cell.latest,.cell.new{box-shadow:inset 0 0 0 2px var(--mark)}
.cell.right{border-right-color:var(--wall)}.cell.bottom{border-bottom-color:var(--wall)}
body[data-puzzle=flip]{--off:#2b2f3c}body[data-puzzle=flip] .board{border:0;gap:var(--lamp-gap,6px);padding:4px}
body[data-puzzle=flip] .cell{border:2px solid transparent;border-radius:var(--lamp-radius,8px);transition:background .15s,box-shadow .15s}
body[data-puzzle=flip] .cell.on{box-shadow:0 0 14px var(--on-glow)}body[data-puzzle=flip] .cell.flash{border-color:var(--press);box-shadow:inset 0 0 0 1px var(--press)}
@media(prefers-reduced-motion:reduce){body[data-puzzle=flip] .cell{transition:none}}
.steps-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.steps-head input[type=range]{width:100%;accent-color:var(--accent)}
.steps-head button{min-width:44px}.steps-head #prev,.steps-head #next{min-width:80px}
@media(max-width:820px){.layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.wrap{padding:16px 10px}.card{padding:12px}.layout{gap:12px}h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){.language-toggle::before,#methodBtn .caret{transition:none}}