:root{color:#20242a;background:#f3f6f2;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}#app{min-height:100vh}.page-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,rgba(102,193,140,.16),transparent 36%),linear-gradient(315deg,rgba(239,111,97,.14),transparent 38%),#f3f6f2}.game-layout{width:min(1100px,100%);display:grid;gap:18px}.topbar,.stats-grid,.play-area{width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;min-width:0;gap:14px}.brand-mark{width:58px;height:58px;flex:0 0 auto;filter:drop-shadow(0 10px 24px rgba(32,36,42,.18))}.eyebrow{margin:0 0 3px;color:#5d6762;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;color:#20242a;font-size:clamp(2rem,3.6rem,3.6rem);line-height:1;letter-spacing:0}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.button{min-height:42px;border:0;border-radius:8px;padding:0 18px;color:#fff;font-weight:800;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.button:hover:not(:disabled),.pad-button:hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.45}.primary{background:#ef6f61;box-shadow:0 10px 22px #ef6f6147}.secondary{background:#30343b;box-shadow:0 10px 22px #30343b2e}.setup-panel{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(110px,.7fr) minmax(140px,.8fr) minmax(220px,1.4fr) auto;gap:10px;align-items:end;border:1px solid rgba(48,52,59,.1);border-radius:8px;background:#ffffffb8;box-shadow:0 18px 44px #20242a14;padding:14px}.setup-field{display:grid;gap:6px;min-width:0}.setup-field span{color:#66706a;font-size:.82rem;font-weight:800}.setup-field input{width:100%;min-height:42px;border:1px solid rgba(48,52,59,.16);border-radius:8px;background:#ffffffeb;color:#20242a;font:inherit;font-weight:800;outline:none;padding:0 12px}.setup-field input:focus{border-color:#50a8a1;box-shadow:0 0 0 3px #50a8a126}.setup-submit{white-space:nowrap}.setup-errors{grid-column:1 / -1;display:grid;gap:4px;margin:0;border-radius:8px;background:#ef6f611f;color:#8f2930;font-size:.9rem;font-weight:800;list-style:none;padding:10px 12px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.stat,.side-panel{border:1px solid rgba(48,52,59,.1);border-radius:8px;background:#ffffffb8;box-shadow:0 18px 44px #20242a14}.stat{min-height:76px;display:grid;align-content:center;gap:4px;padding:14px 16px}.stat span,.panel-line span{color:#66706a;font-size:.82rem;font-weight:700}.stat strong,.panel-line strong{color:#20242a;font-size:1.35rem;line-height:1.1}.play-area{display:grid;grid-template-columns:minmax(300px,620px) minmax(240px,1fr);align-items:start;gap:18px}.board-wrap{position:relative;width:100%}.board{width:100%;aspect-ratio:1;display:grid;grid-template-rows:repeat(var(--board-size),minmax(0,1fr));gap:clamp(8px,1.8vw,14px);padding:clamp(8px,1.8vw,14px);border-radius:8px;background:#30343b;box-shadow:0 24px 60px #20242a38}.board-row{display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));gap:clamp(8px,1.8vw,14px)}.tile{min-width:0;min-height:0;display:grid;place-items:center;border-radius:8px;color:#f8faf8;font-size:clamp(.85rem,8vw,var(--tile-font-size));font-weight:900;line-height:1;letter-spacing:0;box-shadow:inset 0 -5px #0000001a;transition:transform .13s ease,background-color .13s ease}.tile-empty{background:#ffffff17;box-shadow:none}.tile-2{background:#66c18c}.tile-4{background:#50a8a1}.tile-8{background:#f2b950}.tile-16{background:#f29d52}.tile-32{background:#ef6f61}.tile-64{background:#d94b62}.tile-128{background:#7d86ff;font-size:clamp(.78rem,7vw,calc(var(--tile-font-size) * .88))}.tile-256{background:#6a6fcf;font-size:clamp(.78rem,7vw,calc(var(--tile-font-size) * .88))}.tile-512{background:#4f6f52;font-size:clamp(.78rem,7vw,calc(var(--tile-font-size) * .88))}.tile-1024{background:#8958a8;font-size:clamp(.72rem,6vw,calc(var(--tile-font-size) * .72))}.tile-super{background:#20242a;font-size:clamp(.72rem,6vw,calc(var(--tile-font-size) * .72))}.tile-custom{background:#50a8a1;font-size:clamp(.78rem,7vw,calc(var(--tile-font-size) * .88))}.state-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:18px;border-radius:8px;background:#20242ac7;color:#fff;text-align:center}.state-overlay strong{font-size:clamp(2rem,8vw,4rem);line-height:1}.side-panel{display:grid;gap:14px;padding:18px}.panel-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;border-bottom:1px solid rgba(48,52,59,.09)}.panel-line:last-of-type{border-bottom:0}.panel-line strong{text-align:right;font-size:1rem}.direction-pad{width:min(220px,100%);aspect-ratio:1;justify-self:center;display:grid;grid-template-areas:". up ." "left . right" ". down .";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;margin-top:6px}.pad-button{border:0;border-radius:8px;background:#30343b;color:#fff;font-size:1.8rem;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 10px 22px #30343b2e;transition:transform .16s ease,box-shadow .16s ease}.up{grid-area:up}.right{grid-area:right}.down{grid-area:down}.left{grid-area:left}@media(max-width:780px){.page-shell{align-items:start;padding:16px}.topbar{align-items:flex-start;flex-direction:column}h1{font-size:2.2rem}.stats-grid,.setup-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-field.wide,.setup-submit{grid-column:1 / -1}.play-area{grid-template-columns:1fr}.actions{width:100%;justify-content:stretch}.button{flex:1}}@media(max-width:420px){.page-shell{padding:10px}.brand-mark{width:48px;height:48px}.stat{min-height:64px;padding:12px}.setup-panel{grid-template-columns:1fr}.stat strong{font-size:1.1rem}.side-panel{padding:14px}}
