:root{--font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-gradient:radial-gradient(circle at center, #0f172a 0%, #020617 100%);--card-bg:#1e293bd9;--primary-accent:#f59e0b;--text-main:#f8fafc;--text-sub:#94a3b8;--gold:#fbbf24;--radius:20px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-gradient);min-height:100vh;color:var(--text-main);justify-content:center;align-items:center;padding:1rem;display:flex;overflow-x:hidden}#app{flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:1300px;display:flex}.hub-header{text-align:right;z-index:100;flex-direction:column;align-items:flex-end;gap:.4rem;display:flex;position:absolute;top:1.5rem;right:2rem}.logo-area h1{letter-spacing:1.5px;background:linear-gradient(90deg,#f59e0b,#ec4899,#38bdf8,#10b981);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.8rem;font-weight:900}.logo-area h1 span{-webkit-text-fill-color:#f59e0b;vertical-align:middle;background:#f59e0b33;border-radius:6px;margin-left:6px;padding:3px 8px;font-size:.85rem}.subtitle{color:var(--text-sub);margin-top:2px;font-size:.8rem}.mobile-pills{scrollbar-width:none;gap:6px;width:100%;max-width:380px;padding:4px;display:none;overflow-x:auto}.mobile-pills::-webkit-scrollbar{display:none}.pill{color:var(--text-sub);white-space:nowrap;cursor:pointer;background:#ffffff14;border:none;border-radius:20px;padding:6px 12px;font-family:inherit;font-size:.75rem;font-weight:700;transition:all .2s}.pill.active{background:var(--primary-accent);color:#0f172a}.mosaic-viewport{perspective:1200px;justify-content:center;align-items:center;width:100%;min-height:780px;margin-top:2rem;display:flex;position:relative}.mosaic-grid{justify-content:center;align-items:center;width:1100px;height:700px;display:flex;position:relative}.mosaic-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius);cursor:pointer;border:1px solid #ffffff2e;flex-direction:column;gap:.5rem;width:300px;padding:.75rem;transition:all .6s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;box-shadow:0 15px 35px #00000080}.mosaic-card.slot-center{z-index:50;opacity:1;filter:brightness()blur();cursor:default;border-color:#f59e0b99;top:50%;left:50%;transform:translate(-50%,-50%)scale(1.05)translateZ(80px);box-shadow:0 30px 60px #000000d9,0 0 45px #f59e0b66}.mosaic-card.slot-top-center{z-index:20;opacity:1;filter:brightness()blur();animation:6s ease-in-out infinite alternate floatNodeB;top:calc(50% - 330px);left:50%;transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-top-right{z-index:20;opacity:1;filter:brightness()blur();animation:6.5s ease-in-out infinite alternate floatNodeA;top:calc(50% - 165px);left:calc(50% + 285px);transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-bottom-right{z-index:20;opacity:1;filter:brightness()blur();animation:5.8s ease-in-out infinite alternate floatNodeB;top:calc(50% + 165px);left:calc(50% + 285px);transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-bottom-center{z-index:20;opacity:1;filter:brightness()blur();animation:6.8s ease-in-out infinite alternate floatNodeA;top:calc(50% + 330px);left:50%;transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-bottom-left{z-index:20;opacity:1;filter:brightness()blur();animation:6.2s ease-in-out infinite alternate floatNodeB;top:calc(50% + 165px);left:calc(50% - 285px);transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-top-left{z-index:20;opacity:1;filter:brightness()blur();animation:7s ease-in-out infinite alternate floatNodeA;top:calc(50% - 165px);left:calc(50% - 285px);transform:translate(-50%,-50%)scale(.52)translateZ(-20px)}.mosaic-card.slot-mid-right{z-index:10;opacity:.95;filter:brightness()blur();animation:7.5s ease-in-out infinite alternate floatNodeB;top:50%;left:calc(50% + 510px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}.mosaic-card.slot-mid-left{z-index:10;opacity:.95;filter:brightness()blur();animation:7.2s ease-in-out infinite alternate floatNodeA;top:50%;left:calc(50% - 510px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}.mosaic-card.slot-outer-top-right{z-index:10;opacity:.95;filter:brightness()blur();animation:8s ease-in-out infinite alternate floatNodeA;top:calc(50% - 260px);left:calc(50% + 440px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}.mosaic-card.slot-far-right{z-index:10;opacity:.95;filter:brightness()blur();animation:7.8s ease-in-out infinite alternate floatNodeB;top:calc(50% + 260px);left:calc(50% + 440px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}.mosaic-card.slot-outer-top-left{z-index:10;opacity:.95;filter:brightness()blur();animation:8.2s ease-in-out infinite alternate floatNodeB;top:calc(50% - 260px);left:calc(50% - 440px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}.mosaic-card.slot-far-left{z-index:10;opacity:.95;filter:brightness()blur();animation:8.5s ease-in-out infinite alternate floatNodeA;top:calc(50% + 260px);left:calc(50% - 440px);transform:translate(-50%,-50%)scale(.38)translateZ(-60px)}@media (width>=769px){.mosaic-card:not(.slot-center):hover{opacity:1;filter:brightness(1.1)blur();z-index:35;transform:translate(-50%,-50%)scale(.68)translateZ(-10px);box-shadow:0 20px 40px #000000b3,0 0 20px #38bdf84d}}@keyframes floatNodeA{0%{translateY:0px}to{translateY:-12px}}@keyframes floatNodeB{0%{translateY:0px}to{translateY:14px}}.card-badge{color:#f59e0b;background:#f59e0b33;border-radius:12px;width:fit-content;padding:4px 10px;font-size:.85rem;font-weight:800}.card-badge.neon{color:#38bdf8;background:#38bdf833}.card-badge.green{color:#10b981;background:#10b98133}.card-badge.purple{color:#a855f7;background:#a855f733}.card-badge.yellow{color:#eab308;background:#eab30833}.card-badge.pink{color:#ec4899;background:#ec489933}.canvas-container{aspect-ratio:2/3;touch-action:none;border:1px solid #ffffff1a;border-radius:12px;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 20px #00000080}canvas{width:100%;height:100%;display:block}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;z-index:10;background:#0f172ae0;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.overlay.active{opacity:1;pointer-events:auto}.overlay-content{text-align:center;flex-direction:column;align-items:center;gap:.6rem;padding:.8rem;display:flex}.preview-icon{font-size:2.8rem}.overlay-content h2{font-size:1.2rem;font-weight:800}.overlay-content p{color:var(--text-sub);font-size:.75rem}kbd{background:#ffffff26;border-radius:4px;padding:2px 5px;font-size:.75rem}.btn{cursor:pointer;border:none;border-radius:25px;outline:none;padding:.6rem 1.4rem;font-family:inherit;font-size:.85rem;font-weight:800}.primary-btn{color:#0f172a;background:#f59e0b}.space-btn{color:#0f172a;background:#38bdf8}.green-btn{color:#0f172a;background:#10b981}.purple-btn{color:#fff;background:#a855f7}.yellow-btn{color:#0f172a;background:#eab308}.pink-btn{color:#fff;background:#ec4899}.scoreboard{background:#ffffff0d;border-radius:8px;gap:1rem;padding:.5rem 1rem;display:flex}.score-item .label{color:var(--text-sub);font-size:.65rem}.score-item .val{color:var(--gold);font-size:1.3rem;font-weight:900}.score-divider{background:#ffffff1a;width:1px}.mobile-dpad{flex-direction:column;align-items:center;gap:4px;margin-top:6px;display:none}.dpad-row{gap:20px;display:flex}.dpad-btn{color:#fff;touch-action:manipulation;background:#10b98140;border:1px solid #fff3;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;display:flex}.hub-footer{color:var(--text-sub);z-index:10;font-size:.8rem}.workspace-info code{color:var(--primary-accent);background:#f59e0b1a;border-radius:4px;padding:2px 6px}@media (width<=768px){body{padding:.5rem}.mobile-pills{display:flex}.mosaic-viewport{perspective:none;min-height:580px}.mosaic-grid{width:100%;height:560px}.mosaic-card{width:290px;padding:.6rem;animation:none!important}.mosaic-card.slot-center{z-index:40;width:300px;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}.mosaic-card:not(.slot-center){opacity:0;pointer-events:none}.mosaic-card[data-game=snake].slot-center .mobile-dpad{display:flex}}