*{box-sizing:border-box}html,body{margin:0;padding:0;background:#0b1120;color:#e5e7eb;font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100%}body{-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;overscroll-behavior-x:none}#app{padding:16px;max-width:960px;margin:0 auto 56px;min-height:100vh}button{font:inherit;cursor:pointer;border:none}.hub-hero{margin:12px 0 16px}.hub-heading{font-size:24px;font-weight:700;margin-bottom:4px}.hub-subtitle{color:#9ca3af;font-size:14px}.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.hub-card{background:#111827;border:1px solid #1f2937;color:inherit;border-radius:12px;padding:14px;text-align:left;display:grid;gap:6px;box-shadow:0 8px 16px #0003}.hub-card:active{transform:translateY(1px)}.hub-card-icon{font-size:28px}.hub-card-title{font-weight:700}.hub-card-desc{color:#9ca3af;font-size:13px}.game-shell{display:flex;flex-direction:column;gap:12px}.game-bar{display:flex;align-items:center;gap:12px}.back-btn{background:#111827;color:#e5e7eb;border:1px solid #1f2937;padding:8px 12px;border-radius:10px}.game-title{font-weight:700;font-size:18px}.game-area{background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.game-canvas{width:100%;height:auto;border-radius:12px;border:1px solid #1f2937;background:#0b0f1a}.info-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:#cbd5e1;font-size:14px}.touch-btn{background:#1f2937;color:#e5e7eb;border-radius:12px;padding:10px 14px;border:1px solid #1f2937;min-width:48px}.touch-btn:active{transform:translateY(1px)}.game-flex{display:flex;flex-direction:column;gap:10px;align-items:center}.tetris-flex{align-items:stretch}.control-row{display:flex;gap:8px}.tetris-controls{justify-content:center;flex-wrap:wrap}.control-grid{width:180px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;justify-items:center;align-items:center}.grid-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tile{height:68px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#0f172a;position:relative;--shift: 0;transition:transform .22s ease,background-color .22s ease,color .22s ease}.tile-empty{background:#111827}.tile-2{background:#e0f2fe}.tile-4{background:#bae6fd}.tile-8{background:#7dd3fc}.tile-16{background:#38bdf8;color:#0b1224}.tile-32{background:#0ea5e9;color:#0b1224}.tile-64{background:#0284c7;color:#e0f2fe}.tile-128{background:#0f766e;color:#ecfeff}.tile-256{background:#65a30d;color:#0f172a}.tile-512{background:#ca8a04;color:#0f172a}.tile-1024{background:#f97316;color:#0b0f1a}.tile-2048{background:#facc15;color:#0b0f1a}.tile-new{animation:pop-in .22s ease}.tile-merged{animation:merge-pop .22s ease}.slide-left{animation:slide-left .22s ease}.slide-right{animation:slide-right .22s ease}.slide-up{animation:slide-up .22s ease}.slide-down{animation:slide-down .22s ease}@keyframes slide-left{0%{transform:translate(calc(var(--shift) * -1 * (100% + 8px)))}to{transform:translate(0)}}@keyframes slide-right{0%{transform:translate(calc(var(--shift) * 1 * (100% + 8px)))}to{transform:translate(0)}}@keyframes slide-up{0%{transform:translateY(calc(var(--shift) * -1 * (100% + 8px)))}to{transform:translateY(0)}}@keyframes slide-down{0%{transform:translateY(calc(var(--shift) * 1 * (100% + 8px)))}to{transform:translateY(0)}}@keyframes pop-in{0%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes merge-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.match3-board{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.match3-cell{width:38px;height:38px;border-radius:10px;border:2px solid transparent;transition:transform .2s ease,opacity .16s ease}.match3-cell.selected{border-color:#e0f2fe}.match3-cell.match3-fall{animation:match3-fall .22s ease}.match3-cell.match3-new{animation:match3-pop-in .18s ease}.match3-cell.match3-clearing{animation:match3-clear .14s ease forwards}@keyframes match3-fall{0%{transform:translateY(calc(var(--fall-distance, 0px) * -1))}to{transform:translateY(0)}}@keyframes match3-pop-in{0%{transform:scale(.7);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes match3-clear{0%{transform:scale(1);opacity:1}to{transform:scale(.6);opacity:.2}}.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:100%;max-width:440px;margin:0 auto}.sudoku-cell{width:100%;aspect-ratio:1;background:#0b1224;border:1px solid #1f2937;color:#e5e7eb;font-weight:700;border-radius:6px}.sudoku-cell.given{background:#0f172a;color:#cbd5e1}.sudoku-cell.selected{outline:2px solid #38bdf8}.sudoku-cell.invalid{background:#2b0d0d;border-color:#ef4444}.sudoku-cell.conflict{border-color:#fbbf24}.sudoku-cell.thick-left{border-left-width:2px}.sudoku-cell.thick-top{border-top-width:2px}.sudoku-keypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sudoku-btn{background:#1f2937;color:#e5e7eb;border:1px solid #1f2937;border-radius:10px;padding:12px;font-weight:600}.sudoku-btn.muted{background:#0f172a;color:#cbd5e1}.sudoku-action{margin-top:4px;background:#0f766e;color:#ecfeff;border:1px solid #0f766e;border-radius:10px;padding:10px 12px;font-weight:700}.lights-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:340px;margin:0 auto}.light-cell{width:60px;height:60px;border-radius:10px;border:1px solid #1f2937;background:#0b1224;transition:background-color .16s ease,transform .12s ease}.light-cell.on{background:#fbbf24;box-shadow:0 0 12px #fbbf2480}.light-cell:active{transform:translateY(1px)}.tetris-canvas{width:100%;max-width:360px;aspect-ratio:10 / 20;height:auto;max-height:70vh;align-self:center;image-rendering:pixelated}