:root{--accent:#00ff9d;--bg:#050505;--bg2:#070707;--p1:#0a0a0a;--p2:#101010;--p3:#151515;--b:#1f1f1f;--b2:#2a2a2a;--tx:#dcdcdc;--hi:#fff;--dim:#7a7a7a;--on:#000;--f:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--tx);font:13px/1.5 var(--f);min-height:100vh}
header{display:flex;align-items:center;gap:36px;padding:10px 28px 18px;border-bottom:1px solid var(--b)}
.logo{background:var(--accent);color:var(--on);font-weight:700;font-size:18px;letter-spacing:2px;padding:6px 12px;position:relative}
.logo small{position:absolute;left:0;top:100%;margin-top:3px;font-size:9px;letter-spacing:1px;color:var(--dim)}
nav{display:flex;gap:28px;flex:1}
nav button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:inherit;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:14px 0;cursor:pointer}
nav button:hover{color:var(--hi)}nav .on{color:var(--hi);border-color:var(--accent)}
#clock{color:var(--dim);font-size:11px;letter-spacing:1px}
main{max-width:1150px;margin:0 auto;padding:40px 28px}
h1{font-size:26px;color:var(--hi);margin-bottom:6px}.sub{color:var(--dim);margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{background:var(--p1);border:1px solid var(--b);padding:20px;text-align:left;color:inherit;font:inherit;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card b{color:var(--hi);font-size:15px}.card span{color:var(--dim)}.card em{color:var(--accent);font-style:normal;font-size:11px;letter-spacing:1px}.card img{width:28px;height:28px}
.btn{background:var(--accent);color:var(--on);border:0;padding:10px 18px;font:inherit;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.15)}.ghost{background:none;color:var(--dim);border:1px solid var(--b)}.ghost:hover{color:var(--hi);filter:none}
input,select,textarea{background:var(--bg);border:1px solid var(--b);color:var(--hi);font:inherit;padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}input[type=color]{padding:2px;width:44px;height:36px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}form.row{margin-bottom:22px}form.row input{flex:1;min-width:140px}
.panel{border:1px solid var(--b);background:var(--p1);margin-bottom:20px}
.set{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 20px;border-bottom:1px solid var(--b)}
.set:last-child{border:0}.set b{color:var(--hi)}.set span{display:block;color:var(--dim);font-size:12px}
.stage{display:flex;flex-direction:column;align-items:center;margin:22px 0;gap:10px}.stage canvas{border:1px solid var(--b);max-width:100%}
.g2048{display:grid;grid-template-columns:repeat(4,80px);gap:6px;padding:6px;border:1px solid var(--b);touch-action:none}
.t{height:80px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:22px;color:var(--hi);background:color-mix(in srgb,var(--accent) calc(var(--l,0)*8%),var(--p2))}
.mines{display:grid;gap:2px}.mines b{width:28px;height:28px;background:var(--p2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px}
.mines .o{background:var(--bg);border:1px solid var(--b);cursor:default}.mines .x{background:#ff4d6d}
.notes{width:100%;height:60vh;resize:none;line-height:1.6}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
@media(max-width:700px){header{flex-wrap:wrap;gap:14px}nav{gap:16px;order:3;flex-basis:100%}}

.chips{margin-bottom:20px}.chips .on{color:var(--on);background:var(--accent);border-color:var(--accent)}
.card em:first-child{color:var(--dim)}
.stage:fullscreen{background:var(--bg);justify-content:center}
.stage canvas{touch-action:none;max-height:80vh;width:auto}
.bar{gap:18px;color:var(--dim);font-size:12px}.bar b{color:var(--hi)}.bar select{padding:8px 10px}
.w2048{position:relative}.g2048{user-select:none}
.t{transition:background .1s;color:var(--hi)}
.t.n{animation:pop .18s ease-out}.t.m{animation:mrg .16s ease-out}
@keyframes pop{from{transform:scale(.3);opacity:0}}@keyframes mrg{50%{transform:scale(1.18)}}
.ov{position:absolute;inset:0;background:rgba(5,5,5,.82);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;font-size:18px;color:var(--hi)}.ov[hidden]{display:none}
.mines{user-select:none;touch-action:manipulation}
.mines b{color:var(--hi);font-weight:700;transition:background .08s}.mines b:not(.o):hover{background:var(--p3)}
.mines .x{background:#ff4d6d;color:#000;font-size:16px}.mines .f{color:var(--accent)}.mines .wrong{background:#3a1018;color:#ff4d6d}
.mines .n1{color:#4d9cff}.mines .n2{color:#00ff9d}.mines .n3{color:#ff4d6d}.mines .n4{color:#c77dff}.mines .n5{color:#ff9f1c}.mines .n6{color:#00e5ff}.mines .n7{color:var(--hi)}.mines .n8{color:var(--dim)}
@media(prefers-reduced-motion:reduce){.t.n,.t.m{animation:none}}
@media(max-width:700px){.g2048{grid-template-columns:repeat(4,64px)}.t{height:64px}}

/* ---------- v31: themes + settings ---------- */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:16px 20px}
.tcard{background:var(--tb);border:2px solid var(--b);padding:10px;display:flex;flex-direction:column;gap:8px;cursor:pointer;font:inherit;color:var(--tt);text-align:left}
.tcard i{display:block;height:34px;background:var(--tp);border-left:6px solid var(--ta);position:relative}
.tcard i::after{content:'';position:absolute;left:8px;top:8px;width:55%;height:4px;background:var(--ta);box-shadow:0 8px 0 -0px color-mix(in srgb,var(--tt) 45%,transparent)}
.tcard b{font-size:11px;letter-spacing:.5px}.tcard:hover{border-color:var(--dim)}.tcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.set input[type=range]{padding:0;width:150px;accent-color:var(--accent)}.set .val{display:inline;color:var(--hi);margin-left:8px}
.set input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.hd{color:var(--dim);font-size:10px;letter-spacing:2px;margin:26px 0 8px}
@media(max-width:700px){.set{flex-wrap:wrap}}

/* ---------- v31.1: links & games ---------- */
.card.blk{opacity:.55;border-style:dashed}.card.blk:hover{box-shadow:none;border-color:var(--b)}
.card .bl{color:#ff4d6d;font-style:normal;font-size:11px;letter-spacing:1px}
.card .ec{gap:6px}.card .ec .btn{padding:5px 9px;font-size:10px}.card .ec .btn:disabled{opacity:.35;cursor:not-allowed}
div.card[data-g]{cursor:pointer}