*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:"Nunito","Trebuchet MS",system-ui,sans-serif;background:#fff8ef;color:#333}
body{display:flex;flex-direction:column;min-height:100%}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#ff7a59;color:#fff}
header h1{font-size:1.2rem;margin:0}header h1 span{font-weight:400;opacity:.9}
button{font:inherit;border:0;border-radius:10px;padding:8px 12px;background:#fff;color:#333;box-shadow:0 1px 3px #0003;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.96)}button.active{background:#ffe08a;outline:2px solid #e0a800}
button.primary{background:#2e9e5b;color:#fff}.pill{border-radius:20px}
.picker{flex:1;padding:14px;max-width:1100px;margin:0 auto;width:100%}
.picker h2{margin:4px 0 12px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:#fff;border-radius:14px;box-shadow:0 2px 6px #0002;padding:8px;cursor:pointer;text-align:center;border:3px solid transparent}
.card:hover{border-color:#ff7a59}.card img{width:100%;border-radius:8px;display:block;background:#fff}
.card b{display:block;font-size:.9rem;margin-top:6px}.card small{color:#888;font-size:.75rem}
.unlock{text-align:center;margin:18px 0 6px}.unlock-btn{background:#7b5cff;color:#fff;font-weight:700;padding:12px 18px;border-radius:24px}
.ph{display:block;color:#a33;margin-top:4px}
main{flex:1;display:flex;flex-direction:column;min-height:0}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;justify-content:center;background:#fff;border-bottom:1px solid #eee}
.toggle{display:flex;align-items:center;gap:4px;background:#fff;padding:6px 10px;border-radius:10px;box-shadow:0 1px 3px #0003;font-size:.9rem}
.page-title{text-align:center;font-weight:700;padding:4px;font-size:.95rem}
.stage{flex:1;position:relative;overflow:hidden;min-height:300px;background:#eee8df;touch-action:none}
.board{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 10px #0003;background:#fff}
.board svg{display:block}#lines,#nums{pointer-events:none}#nums text{font-family:Nunito,Arial,sans-serif;font-weight:800;fill:#555;stroke:#fff;paint-order:stroke;text-anchor:middle;dominant-baseline:central;user-select:none}#fills path{stroke-linejoin:round}
.palette{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px;background:#fff;border-top:1px solid #eee}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #0003;padding:0;position:relative;font-weight:800;font-size:.9rem;color:#000;text-shadow:0 0 3px #fff}
.sw.sel{box-shadow:0 0 0 3px #333;transform:scale(1.1)}
.custom{display:flex;align-items:center;gap:4px;font-size:.8rem}.custom input{width:38px;height:38px;border:0;padding:0;background:none}
.cbn-status{text-align:center;padding:4px;font-weight:700;color:#2e7d32}
footer{text-align:center;padding:10px;background:#333;color:#ddd;font-size:.9rem}footer a{color:#ffcf6b;font-weight:700}
.tiny{font-size:.7rem;opacity:.7;margin-top:2px}
@media (max-width:600px){.toolbar button,.toggle{padding:6px 8px;font-size:.8rem}.sw{width:32px;height:32px}header h1{font-size:1rem}}
[hidden]{display:none!important}