*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body,#root{width:100%;height:100dvh;overflow:hidden}body{touch-action:manipulation;background:#f5f0eb;font-family:Segoe UI,system-ui,-apple-system,sans-serif}@keyframes spin{to{transform:rotate(360deg)}}.hub{width:100%;height:100dvh;padding:max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1rem, env(safe-area-inset-bottom)) 1.5rem;-webkit-overflow-scrolling:touch;background:linear-gradient(145deg,#f0e4d8 0%,#e8d5c4 50%,#dcc8b4 100%);flex-direction:column;align-items:center;display:flex;overflow-y:auto}.hub-header{text-align:center;margin-bottom:2.5rem;padding-top:.5rem}.hub-title{color:#3d3229;letter-spacing:-.5px;margin-bottom:0;font-size:2.8rem;font-weight:800}.hub-settings-btn{top:max(1rem, env(safe-area-inset-top));cursor:pointer;color:#9b8e84;z-index:100;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background .2s,color .2s,transform .2s;display:flex;position:fixed;right:1rem;box-shadow:0 2px 8px #0000001a}.hub-settings-btn:hover{color:#3d3229;background:#fff;transform:scale(1.05)}.settings-overlay{z-index:9000;background:#0000004d;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.settings-panel{background:#fff;border-radius:20px;width:100%;max-width:340px;overflow:hidden;box-shadow:0 20px 60px #00000026}.settings-header{border-bottom:1px solid #e8e0d8;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;display:flex}.settings-title{color:#3d3229;margin:0;font-size:1.1rem;font-weight:700}.settings-close{color:#9b8e84;cursor:pointer;background:0 0;border:none;padding:.2rem;font-size:1.2rem;line-height:1}.settings-close:hover{color:#3d3229}.settings-list{padding:.5rem 0}.settings-row{justify-content:space-between;align-items:center;padding:.9rem 1.5rem;display:flex}.settings-label{color:#3d3229;align-items:center;gap:.7rem;font-size:.95rem;font-weight:500;display:flex}.settings-icon{font-size:1.2rem}.settings-toggle{cursor:pointer;background:#d4c8bc;border:none;border-radius:14px;width:48px;height:28px;padding:0;transition:background .2s;position:relative}.settings-toggle.on{background:#2ed573}.settings-toggle-knob{background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000026}.settings-toggle.on .settings-toggle-knob{transform:translate(20px)}.settings-footer{text-align:center;border-top:1px solid #e8e0d8;padding:.8rem 1.5rem 1.2rem}.settings-credits{color:#b8ada5;margin:.15rem 0;font-size:.65rem}.settings-credits a{color:#8b7e74;text-underline-offset:2px;-webkit-text-decoration:underline #d4c8bc;text-decoration:underline #d4c8bc}.game-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;width:100%;max-width:720px;display:grid}.game-tile{cursor:pointer;text-align:center;aspect-ratio:1;background:#fff;border:3px solid #fffc;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;width:100%;padding:0;transition:transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #3d32292e,0 2px 8px #3d32291f,inset 0 1px #ffffff80}.game-tile:before{content:"";background:var(--tile-color,#e8927c);opacity:0;height:4px;transition:opacity .2s;position:absolute;top:0;left:0;right:0}.game-tile:hover{border-color:#e8927c99;transform:translateY(-6px)scale(1.02);box-shadow:0 12px 32px #3d322938,0 4px 12px #3d322924}.game-tile:hover:before{opacity:1}.game-tile:active{transform:translateY(-2px)scale(.98)}.game-tile svg{border-radius:20px;overflow:hidden}.game-thumbnail-img{object-fit:cover;border-radius:20px;width:100%;height:100%;display:block}@media (width<=374px){.hub{padding:.8rem}.hub-header{margin-bottom:1.5rem}.hub-title{font-size:2rem}.game-grid{grid-template-columns:repeat(3,1fr);gap:.8rem}.game-tile{aspect-ratio:1;border-radius:16px;padding:0}}@media (width>=375px) and (width<=600px){.hub{padding:1rem}.hub-title{font-size:2.2rem}.game-grid{grid-template-columns:repeat(3,1fr);gap:1rem}.game-tile{aspect-ratio:1;padding:0}}@media (width>=1024px){.hub-header{margin-bottom:3rem}.hub-title{font-size:3.2rem}.game-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;max-width:900px}.game-tile{padding:0}}