*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #faf8f0;--color-text: #4a4a6a;--color-text-light: #ffffff;--color-grid: #c8b8f0;--color-cell: rgba(255 255 255 / .38);--color-accent: #a78bfa;--color-btn-primary: #f472b6;--color-btn-hover: #ec4899;--color-btn-ghost: #a78bfa;--color-btn-ghost-hover: #7c3aed;--color-overlay-bg: rgba(250 248 239 / .85);--color-overlay-card: #c8b8f0;--color-tag-bg: rgba(167 139 250 / .12);--color-tag-border: rgba(167 139 250 / .3);--color-card-bg: #ffffff;--color-win: #fcd34d;--grid-gap: clamp(8px, 1.5vw, 12px);--cell-size: min(clamp(56px, 17vw, 108px), calc((100dvh - 200px)/4) );--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--tile-2: #fecdd3;--tile-4: #fed7aa;--tile-8: #fef08a;--tile-16: #bbf7d0;--tile-32: #a5f3fc;--tile-64: #bfdbfe;--tile-128: #ddd6fe;--tile-256: #fbcfe8;--tile-512: #6ee7b7;--tile-1024: #fda4af;--tile-2048: #c4b5fd;--tile-sup: #7c3aed;--dur-tile: .12s;--dur-score: .22s;--dur-slide: .1s}html,body{height:100%;overflow:hidden;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text)}.screen{height:100dvh;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:clamp(12px,3vh,32px) 16px clamp(12px,3vh,48px)}.screen[hidden]{display:none}.menu-card{width:100%;max-width:440px;margin-top:48px;background:var(--color-card-bg);border-radius:var(--radius-lg);padding:40px 36px;box-shadow:0 8px 40px #a78bfa29;display:flex;flex-direction:column;gap:22px}.menu-tagline{font-size:16px;line-height:1.5}.menu-rules{list-style:none;display:flex;flex-direction:column;gap:8px;background:var(--color-tag-bg);border-radius:var(--radius-sm);padding:16px 18px;font-size:14px;line-height:1.6}.menu-rules li:before{content:"→ ";color:var(--color-accent);font-weight:700}.btn{display:inline-flex;justify-content:center;align-items:center;border:none;border-radius:var(--radius-sm);padding:12px 24px;font-size:15px;font-weight:700;letter-spacing:.3px;cursor:pointer;touch-action:manipulation;transition:background .15s ease,transform .1s ease;white-space:nowrap}.btn:active{transform:scale(.96)}.btn--primary{background:var(--color-btn-primary);color:var(--color-text-light)}.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-btn-hover);outline:none}.btn--ghost{background:var(--color-btn-ghost);color:var(--color-text-light)}.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--color-btn-ghost-hover);outline:none}.btn--sm{background:var(--color-btn-primary);color:var(--color-text-light);padding:9px 18px;font-size:13px}.btn--sm:hover{background:var(--color-btn-hover)}.container{width:100%;max-width:500px;display:flex;flex-direction:column;height:100%}.logo{font-size:clamp(36px,9vw,80px);font-weight:700;color:var(--color-btn-primary);line-height:1}.game-header{margin-bottom:clamp(8px,1.5vh,14px)}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.score-group{display:flex;gap:8px}.score-box{background:var(--color-grid);border-radius:var(--radius-sm);padding:8px 16px;min-width:72px;text-align:center;display:flex;flex-direction:column;gap:2px}.score-label{font-size:11px;font-weight:700;color:var(--color-text-light);letter-spacing:.5px}.score-value{font-size:22px;font-weight:700;color:var(--color-text-light);line-height:1.1}.header-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.game-hint{font-size:14px;color:var(--color-text)}.grid-container{position:relative;background:var(--color-grid);border-radius:var(--radius-md);padding:var(--grid-gap);touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:1;min-height:0}.grid-background{display:grid;grid-template-columns:repeat(4,var(--cell-size));grid-template-rows:repeat(4,var(--cell-size));gap:var(--grid-gap)}.grid-cell{background:var(--color-cell);border-radius:var(--radius-sm)}.tile-container{position:absolute;inset:var(--grid-gap);pointer-events:none}.tile{position:absolute;width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius-sm);display:flex;justify-content:center;align-items:center;font-weight:700;font-size:clamp(18px,5vw,36px);left:calc(var(--col) * (var(--cell-size) + var(--grid-gap)));top:calc(var(--row) * (var(--cell-size) + var(--grid-gap)));transition:left var(--dur-slide) ease,top var(--dur-slide) ease;will-change:transform;background:var(--tile-sup);color:var(--color-text-light);font-size:clamp(12px,3.2vw,20px)}.tile[data-value="2"]{background:var(--tile-2);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="4"]{background:var(--tile-4);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="8"]{background:var(--tile-8);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="16"]{background:var(--tile-16);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="32"]{background:var(--tile-32);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="64"]{background:var(--tile-64);color:var(--color-text);font-size:clamp(18px,5vw,36px)}.tile[data-value="128"]{background:var(--tile-128);color:var(--color-text);font-size:clamp(16px,4.5vw,30px)}.tile[data-value="256"]{background:var(--tile-256);color:var(--color-text);font-size:clamp(16px,4.5vw,30px)}.tile[data-value="512"]{background:var(--tile-512);color:var(--color-text);font-size:clamp(16px,4.5vw,30px)}.tile[data-value="1024"]{background:var(--tile-1024);color:var(--color-text);font-size:clamp(13px,3.8vw,24px)}.tile[data-value="2048"]{background:var(--tile-2048);color:var(--color-text);font-size:clamp(13px,3.8vw,24px)}@keyframes tile-spawn{0%{transform:scale(0)}75%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes tile-merge{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}.tile--new{animation:tile-spawn var(--dur-tile) ease forwards}.tile--merged{animation:tile-merge var(--dur-tile) ease forwards}@keyframes score-pop{0%{transform:scale(1) translateY(0)}50%{transform:scale(1.22) translateY(-3px)}to{transform:scale(1) translateY(0)}}.score--pop{animation:score-pop var(--dur-score) ease}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:200;padding:24px}.overlay[hidden]{display:none}.overlay-card{background:var(--color-overlay-card);border-radius:var(--radius-lg);padding:clamp(28px,5vw,40px) clamp(24px,6vw,48px);text-align:center;color:var(--color-text-light);display:flex;flex-direction:column;gap:14px;min-width:280px;max-width:400px;width:100%;box-shadow:0 12px 40px #00000038}.overlay-card h2{font-size:clamp(26px,7vw,36px);font-weight:700}.overlay-card--win h2{color:var(--color-win)}.overlay-body{font-size:15px;opacity:.92}.overlay-score{font-size:16px}.overlay-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}@media(max-width:360px){:root{--grid-gap: 8px}.overlay-card{padding:28px 24px}}.screen--canvas{padding:0;align-items:stretch;justify-content:center;height:100dvh;overflow:hidden}.screen--canvas[hidden]{display:none}.canvas-game-wrapper{display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;height:100dvh;padding:8px 12px;margin:0 auto;box-sizing:border-box}.canvas-game-header{display:flex;justify-content:space-between;align-items:center;width:100%;flex-shrink:0;margin-bottom:6px}#dj-canvas,#si-canvas{display:block;width:100%;flex:1 1 0;min-height:0;max-width:100%;border-radius:var(--radius-md);box-shadow:0 8px 32px #00000026;touch-action:none;-webkit-user-select:none;user-select:none;object-fit:contain}.game-footer{flex-shrink:0;margin-top:6px;font-size:12px;text-align:center;color:var(--color-accent);opacity:.85;line-height:1.5}@media(max-height:560px){.game-footer{display:none}}.overlay-rules{list-style:none;text-align:left;display:flex;flex-direction:column;gap:6px;background:#ffffff1f;border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;line-height:1.5}.overlay-rules li:before{content:"→ ";font-weight:700;opacity:.7}.hub-screen{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,4vh,48px) 16px clamp(20px,4vh,48px);background:var(--color-bg);overflow-y:auto;box-sizing:border-box}.hub-header{text-align:center;margin-bottom:clamp(24px,4vh,56px)}.hub-title{font-size:clamp(36px,8vw,60px);font-weight:800;letter-spacing:-1px;line-height:1.1;background:linear-gradient(135deg,#f472b6,#a78bfa 60%,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}.hub-subtitle{font-size:clamp(15px,3vw,18px);color:var(--color-text);opacity:.7;max-width:420px;margin:0 auto;line-height:1.6}.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(16px,3vw,28px);width:100%;max-width:960px}.game-card{background:var(--color-card-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 24px #a78bfa1f;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border:2px solid transparent;display:flex;flex-direction:column;text-align:left}.game-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px #a78bfa38;border-color:var(--color-accent)}.game-card:active{transform:translateY(-2px)}.game-card:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.card-preview{width:100%;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;font-size:0;overflow:hidden;position:relative}.preview-2048{background:var(--color-grid);padding:14px;gap:6px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);width:100%;height:100%}.preview-2048 .pt{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,2.5vw,14px);font-weight:800;color:var(--color-text)}.preview-doodle{background:linear-gradient(180deg,#bfdbfe,#e0f2fe);width:100%;height:100%;position:relative;overflow:hidden}.preview-doodle .dj-platform{position:absolute;height:10px;border-radius:5px;background:#4ade80}.dj-chibi{position:absolute;bottom:24%;left:50%;transform:translate(-50%);width:52px;height:auto;filter:drop-shadow(0 4px 6px rgba(124 58 237 / .35))}.preview-doodle .dj-star{position:absolute;font-size:14px;opacity:.6;animation:hub-twinkle 2s ease-in-out infinite alternate}@keyframes hub-twinkle{0%{opacity:.3;transform:scale(.8)}to{opacity:.8;transform:scale(1.1)}}.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}.card-title{font-size:20px;font-weight:800;color:var(--color-text);letter-spacing:-.3px}.card-description{font-size:13px;color:var(--color-text);opacity:.65;line-height:1.55}.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.card-tag{background:var(--color-tag-bg);border:1px solid var(--color-tag-border);color:var(--color-accent);font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.2px}.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid rgba(167 139 250 / .12)}.card-best{font-size:12px;color:var(--color-text);opacity:.5}.card-best strong{color:var(--color-accent);opacity:1}.card-play-btn{background:var(--color-btn-primary);color:var(--color-text-light);font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;touch-action:manipulation;transition:background .15s ease,transform .1s ease;pointer-events:none}.game-card:hover .card-play-btn{background:var(--color-btn-hover)}#hub-screen[hidden]{display:none}.preview-space-invaders{background:#000010;width:100%;height:100%;position:relative;overflow:hidden}.si-alien{position:absolute;font-size:22px;line-height:1;animation:si-float 1.8s ease-in-out infinite alternate}.si-alien--row0{top:12%;color:#ff77a8;animation-delay:0s}.si-alien--row1{top:34%;color:#29adff;animation-delay:.3s}.si-alien--row2{top:56%;color:#00e436;animation-delay:.6s}@keyframes si-float{0%{transform:translate(0)}to{transform:translate(8px)}}.si-cannon{position:absolute;bottom:12%;left:50%;transform:translate(-50%);width:28px;height:18px;background:#00e436;border-radius:3px 3px 0 0}.si-cannon:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:6px;height:10px;background:#00e436;border-radius:2px 2px 0 0}@media(max-width:600px){.hub-grid{grid-template-columns:1fr;max-width:400px}}