:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden;margin:0;background:#0f101b;color:#f9f6ff}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ffe39c;outline-offset:2px}
#app{--accent:#ffb367;--secondary:#b6e5ff;--panel:#281f35;--tile:#392948;--outline:#735983;--boardbg:#20162c;position:relative;width:100%;max-width:730px;height:100dvh;margin:auto;background:radial-gradient(ellipse at top right,#462955 0,transparent 43%),linear-gradient(160deg,#191526,#171525 72%,#12111e)}
#app[data-theme=classic]{--accent:#78dcf4;--secondary:#ffd192;--panel:#1e3040;--tile:#2a4b61;--outline:#6186a0;--boardbg:#172c40}
#app[data-theme=christmas]{--accent:#ffdf8b;--secondary:#97f6ba;--panel:#213b31;--tile:#315645;--outline:#699881;--boardbg:#172f28}
#app[data-theme=easter]{--accent:#ffbfdd;--secondary:#aeffd3;--panel:#412e4a;--tile:#573d62;--outline:#9976a5;--boardbg:#30243b}
#app[data-theme=cartoon]{--accent:#ffdc82;--secondary:#95e5fc;--panel:#263955;--tile:#3b5675;--outline:#7b96bd;--boardbg:#1a2b45}
#app[data-theme=pirates]{--accent:#ffe0a6;--secondary:#9be9ce;--panel:#343b2c;--tile:#4a533e;--outline:#9d9a72;--boardbg:#293021}
#app[data-theme=space]{--accent:#cfa6ff;--secondary:#8ce8fa;--panel:#312b50;--tile:#4a3a6d;--outline:#8c7ec3;--boardbg:#25203d}
#app[data-theme=dino]{--accent:#baf28a;--secondary:#ffcb95;--panel:#28452d;--tile:#3e6040;--outline:#84aa77;--boardbg:#203724}
#app[data-theme=football]{--accent:#adf5b9;--secondary:#ffdc87;--panel:#254339;--tile:#3b6250;--outline:#77a98c;--boardbg:#1a342b}
#app[data-theme=animals]{--accent:#ffc7ae;--secondary:#c1ddff;--panel:#45354a;--tile:#604663;--outline:#9c819e;--boardbg:#352842}
#app[data-theme=custom]{--accent:#e1c2fa;--secondary:#a3ddff;--panel:#3d304d;--tile:#523d62;--outline:#9279a9;--boardbg:#2a203a}
.game-screen{height:100%;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(9px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(9px,env(safe-area-inset-left))}
.topbar{flex:none;height:49px;display:flex;justify-content:space-between;align-items:center;gap:8px}.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--outline);background:var(--panel);color:var(--accent);font-size:22px;font-weight:900}.brand-text{min-width:0}.brand h1{font-size:18px;font-weight:900;letter-spacing:.7px;line-height:1;margin:0}.brand p{font-size:10px;color:#d2c5dd;margin:4px 0 0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions{display:flex;gap:5px}.square-btn{background:var(--panel);border:1px solid var(--outline);border-radius:9px;color:white;width:36px;height:36px;font-size:18px}
.scoreboard{display:grid;grid-template-columns:1fr .75fr 1fr;gap:6px;margin:4px 0;flex:none;height:44px}.score{text-align:center;background:var(--panel);border-radius:10px;border:1px solid #ffffff36;min-width:0;padding:4px}.score span{display:block;font-size:10px;font-weight:750;color:#ded3e6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score strong{color:var(--accent);font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}.score:nth-child(2) strong{color:#dfd6e5}.score:nth-child(3) strong{color:var(--secondary)}
.status{flex:none;min-height:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}.status strong{font-size:16px;line-height:1.1;color:var(--accent)}.status small{font-size:10px;color:#e1d9e9;line-height:1.35}
.play-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}
#app{--size:min(calc(100vw - 21px),calc(100dvh - 213px),460px)}#app[data-variant=numeric]{--size:min(calc(100vw - 21px),calc(100dvh - 257px),460px)}#app[data-variant=ultimate],#app[data-variant=qubic]{--size:min(calc(100vw - 21px),calc(100dvh - 231px),490px)}
.board{flex:none;display:grid;width:max(100px,var(--size));height:max(100px,var(--size));padding:6px;gap:6px;background:#10111d;border:1px solid var(--outline);border-radius:14px}.board.basic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.board.ultimate{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));padding:5px;gap:4px}.board.qubic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:6px;gap:7px}
.cell{min-width:0;min-height:0;border:2px solid var(--outline);border-radius:10px;background:var(--tile);display:grid;place-items:center;padding:2px;color:#fff;font-size:clamp(24px,9vw,64px);font-weight:900}.cell:disabled{opacity:1}.cell.active{border-color:var(--accent)}.cell.selected{background:#7f603e;border-color:#ffdd93}.cell.win{background:#446d42;border-color:#e0f991}
.piece{display:block;width:83%;height:83%;max-width:100%;max-height:100%;object-fit:contain;opacity:1;filter:none!important}.value{font-size:clamp(23px,10vw,60px);color:var(--accent)}.value.even{color:var(--secondary)}
.subboard{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2px;padding:3px;min-width:0;min-height:0;border:2px solid #ffffff39;background:var(--panel);border-radius:7px;cursor:pointer}.subboard.forced{border-color:var(--accent)}.subboard.closed{opacity:.75}.small-cell{min-width:0;min-height:0;display:grid;place-items:center;border-radius:2px;background:var(--tile)}.small-cell .piece{width:94%;height:94%}.sub-result{position:absolute;inset:0;background:#171322dd;border-radius:5px;display:grid;place-items:center}.sub-result .piece{width:58%;height:58%}.sub-result.draw{font-size:28px;color:#eee}
.layer{position:relative;min-width:0;min-height:0;border:2px solid var(--outline);border-radius:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:2px;padding:14px 4px 4px;background:var(--panel);cursor:pointer}.layer-label{position:absolute;top:0;left:0;right:0;font-size:9px;color:#f2e8f3;text-align:center;font-weight:850}.small-cell.won{background:#5c8c51}
.board-hint{font-size:10px;color:#d7cde0;line-height:1.25;text-align:center;max-width:96%;min-height:12px}
.numeric-picker{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;height:45px}.num-btn{width:34px;height:36px;border:1px solid var(--outline);border-radius:7px;background:var(--panel);color:var(--accent);font-weight:900}.num-btn.even{color:var(--secondary)}.num-btn.chosen{background:#80613d;border-color:#ffe49a}.num-btn:disabled{opacity:.29}
.game-actions{flex:none;display:flex;gap:6px;height:53px;align-items:center}.btn{border:1px solid var(--outline);border-radius:10px;background:var(--panel);color:#fff;font-size:12px;font-weight:850;min-width:0;padding:11px;flex:1}.btn.primary{background:linear-gradient(145deg,#fff0c9,var(--accent));color:#312338;border:0}.btn.full{width:100%;min-height:45px}
.settings-screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:#171524;padding:env(safe-area-inset-top) 13px max(70px,env(safe-area-inset-bottom));z-index:3}.settings-screen h2{font-size:23px;margin:12px 0}.settings-panel{background:var(--panel);border:1px solid #ffffff33;border-radius:13px;margin:10px 0;padding:12px}.settings-panel h3{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:0 0 11px}.settings-panel p{font-size:11px;color:#d4cadc;line-height:1.5}.variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.variant-grid button,.theme-grid button{background:#211e2d;color:#fff;border:1px solid #ffffff37;border-radius:9px;padding:10px 6px;font-size:12px;font-weight:800;text-align:left}.variant-grid button[aria-pressed=true],.theme-grid button[aria-pressed=true]{background:var(--tile);border:2px solid var(--accent)}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.theme-grid button{display:flex;align-items:center;flex-direction:column;text-align:center;gap:5px;font-size:10px;padding:7px 2px}.swatches{height:34px;display:flex;justify-content:center;gap:2px}.swatches .piece{width:31px;height:31px;flex:none}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-row label{font-size:12px;color:#f4e8f7;font-weight:750}.input-row select{display:block;margin-top:6px;width:100%;height:40px;border:1px solid #ffffff4a;border-radius:8px;background:#171726;color:white;font-size:12px;padding:6px}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.toggle-grid label{font-size:12px;color:#e9dfed;display:flex;align-items:center;gap:5px}.toggle-grid input{width:16px;height:16px;accent-color:#dca35e}.upload{display:grid;place-items:center;border:1px solid var(--outline);border-radius:8px;padding:12px;cursor:pointer;background:#3e304b}.upload input{display:none}.settings-bottom{position:sticky;bottom:0;background:linear-gradient(transparent,#171524 28%);padding:13px 0 2px;display:flex;gap:8px}
.modal-backdrop{position:absolute;inset:0;background:#080917e9;z-index:8;display:flex;align-items:center;justify-content:center;padding:14px}.modal{width:min(100%,470px);max-height:90dvh;overflow-y:auto;border:1px solid var(--outline);border-radius:16px;background:linear-gradient(145deg,var(--panel),#191725);padding:17px;box-shadow:0 18px 50px #0008}.modal h2{color:var(--accent);font-size:19px;margin:0 0 12px}.modal p{font-size:12px;line-height:1.6;color:#eae1ef}.zoom-grid{width:min(calc(100vw - 75px),min(50dvh,390px));aspect-ratio:1;margin:12px auto;display:grid;gap:5px;padding:6px;background:#141321;border:1px solid var(--outline);border-radius:12px}.zoom-grid.three{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.zoom-grid.four{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.zoom-grid .cell{font-size:28px}.zoom-grid .piece{width:88%;height:88%}[hidden]{display:none!important}
@media(max-height:600px){.topbar{height:39px}.brand h1{font-size:16px}.scoreboard{height:39px}.status{min-height:35px}.game-actions{height:45px}.game-actions .btn{padding:8px}#app{--size:min(calc(100vw - 21px),calc(100dvh - 170px),440px)}#app[data-variant=numeric]{--size:min(calc(100vw - 21px),calc(100dvh - 215px),440px)}#app[data-variant=ultimate],#app[data-variant=qubic]{--size:min(calc(100vw - 21px),calc(100dvh - 188px),450px)}}
@media(max-width:350px){.brand h1{font-size:15px}.btn{font-size:11px;padding:9px}.board{padding:4px;gap:4px}.theme-grid button{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.palette-grid button{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--boardbg);color:#fff;border:2px solid transparent;border-radius:10px;padding:10px 4px;font-size:11px;font-weight:700}.palette-grid button[aria-pressed=true]{border-color:var(--accent)}.palette-swatch{display:block;width:100%;height:28px;border-radius:6px;background:linear-gradient(115deg,var(--swatch-bg) 33%,var(--swatch-tile) 33% 66%,var(--swatch-accent) 66%)}
#app[data-palette=ocean]{--accent:#73ddff;--secondary:#ffe2ad;--tile:#244d68;--panel:#102c40;--outline:#73ddff99;--boardbg:#102c40;background:linear-gradient(155deg,#244d68,#102c40 65%)}
#app[data-palette=forest]{--accent:#a4efaf;--secondary:#ffe2ad;--tile:#305c48;--panel:#152f25;--outline:#a4efaf99;--boardbg:#152f25;background:linear-gradient(155deg,#305c48,#152f25 65%)}
#app[data-palette=violet]{--accent:#d3b0ff;--secondary:#ffe2ad;--tile:#543b73;--panel:#281b3e;--outline:#d3b0ff99;--boardbg:#281b3e;background:linear-gradient(155deg,#543b73,#281b3e 65%)}
#app[data-palette=rose]{--accent:#ffb5d0;--secondary:#ffe2ad;--tile:#723d57;--panel:#3b1c2e;--outline:#ffb5d099;--boardbg:#3b1c2e;background:linear-gradient(155deg,#723d57,#3b1c2e 65%)}
#app[data-palette=sunset]{--accent:#ffd08d;--secondary:#ffe2ad;--tile:#754936;--panel:#3c241d;--outline:#ffd08d99;--boardbg:#3c241d;background:linear-gradient(155deg,#754936,#3c241d 65%)}
#app[data-palette=ruby]{--accent:#ffabb2;--secondary:#ffe2ad;--tile:#703c47;--panel:#351b24;--outline:#ffabb299;--boardbg:#351b24;background:linear-gradient(155deg,#703c47,#351b24 65%)}
#app[data-palette=teal]{--accent:#83eee3;--secondary:#ffe2ad;--tile:#285c5b;--panel:#143334;--outline:#83eee399;--boardbg:#143334;background:linear-gradient(155deg,#285c5b,#143334 65%)}
#app[data-palette=slate]{--accent:#d5e4ff;--secondary:#ffe2ad;--tile:#424e63;--panel:#222a38;--outline:#d5e4ff99;--boardbg:#222a38;background:linear-gradient(155deg,#424e63,#222a38 65%)}
#app[data-palette]:not([data-palette=auto]) .settings-screen{background:var(--boardbg)}#app[data-palette]:not([data-palette=auto]) .board{background:var(--boardbg)}