@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif;background-color:#02030a;color:#fff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#02030a}#root{min-height:100vh}.hub-shell{position:relative;min-height:100vh;padding:2rem 1rem 3rem;background:radial-gradient(circle at 15% 15%,rgba(3,188,255,.2),transparent 35%),radial-gradient(circle at 85% 0%,rgba(129,90,255,.25),transparent 40%),linear-gradient(135deg,#02030a,#050c20,#02030a);overflow:hidden}.hub-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.05),transparent 60%);pointer-events:none}.hub-main{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.hub-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:0;margin-bottom:.5rem}.hub-brand{display:inline-flex;border-radius:20px;padding:.35rem .5rem;transition:transform .22s ease}.hub-brand img,.hub-brand svg{height:auto;width:clamp(250px,40vw,500px);filter:drop-shadow(0 0 30px rgba(130,150,255,.6));transition:transform .3s ease,filter .3s ease;display:block;margin:0 auto}.hub-brand:hover img,.hub-brand:hover svg{transform:scale(1.05);filter:drop-shadow(0 0 40px rgba(130,150,255,.8))}.hub-hero h1{margin-top:0rem;margin-bottom:1rem;margin:.5rem 0 2rem;font-size:clamp(1.65rem,3vw,2.1rem);letter-spacing:-.02em;font-weight:700}.games-section{background:#ffffff0a;border-radius:32px;padding:2rem;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 25px 60px #020410bf}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}.game-card{border-radius:28px;padding:2rem;display:flex;flex-direction:column;gap:1rem;min-height:280px;background:#01030a99;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px #00000073;transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out}.game-card:focus-within,.game-card:hover{transform:translateY(-2px);border-color:#ffffff59;box-shadow:0 25px 60px #0000008c}.game-preview{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#ffffff0a}.preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .2s ease-out,filter .2s ease-out,opacity .2s ease-out;display:block}.preview-img.base{opacity:1;transform:scale(1);filter:saturate(1) brightness(.9)}.preview-img.overlay{opacity:0}.game-card.has-gif .game-preview:hover .preview-img.overlay{opacity:1}.game-card:not(.has-gif) .game-preview:hover .preview-img.base{transform:scale(1.03);filter:saturate(1.1) brightness(1.05)}.game-card.brainiac{background:linear-gradient(180deg,#3bf4ff14,#060918f2)}.game-card.demi-cercle{background:linear-gradient(180deg,#ffb64d14,#0c0725f2)}.game-badge{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#ffffffb3}.game-card h2{margin:0;font-size:2rem}.game-tagline{margin:0;color:#ffffffa6;font-size:.95rem}.game-actions{margin-top:auto;display:flex;gap:.7rem;flex-wrap:wrap}.game-btn{border-radius:999px;padding:.85rem 2.5rem;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;border:1px solid transparent;transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.game-btn.primary{background:linear-gradient(120deg,#3bf4ff,#7e5dff);color:#03040d;font-weight:600;box-shadow:0 15px 40px #3ff4ff59}.game-btn.ghost{color:#fffc;border-color:#fff6;background:transparent}.game-btn:focus-visible,.hub-nav a:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px}.game-btn:hover{transform:translateY(-2px)}.hub-hint{color:#fff9;letter-spacing:.3em;text-transform:uppercase;font-size:.65rem;text-align:center}.hub-footer{position:relative;z-index:1;margin-top:2rem;text-align:center;font-size:.75rem;color:#ffffff73}@media(max-width:768px){.hub-shell{padding:2rem 1rem 2.5rem}.hub-main{padding:0}.games-section{padding:1.5rem}.game-card{min-height:unset}.hub-hero h1{margin:.4rem 0 1.5rem}}.modal-backdrop{position:fixed;inset:0;background-color:#02030ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .3s ease-out}.modal-container{background:#0a0c16;width:100%;max-width:500px;max-height:85vh;display:flex;flex-direction:column;border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #000c;position:relative;animation:scaleUp .3s cubic-bezier(.16,1,.3,1)}.modal-container.brainiac{border-top:4px solid #3bf4ff}.modal-container.demi-cercle{border-top:4px solid #ffb64d}.modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#ffffff80;font-size:2rem;line-height:1;cursor:pointer;padding:.5rem;transition:color .2s;z-index:10}.modal-close:hover{color:#fff}.modal-header{padding:2rem 2rem 1rem;flex-shrink:0}.modal-badge{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#ffffff80;display:block;margin-bottom:.5rem}.modal-header h2{margin:0;font-size:2rem;color:#fff}.modal-body{padding:0 2rem 2rem;color:#fffc;font-size:.95rem;line-height:1.6;overflow-y:auto;flex:1}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:#ffffff0d}.modal-body::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.modal-body::-webkit-scrollbar-thumb:hover{background:#fff6}.modal-body ul{padding-left:1.2rem;margin-top:1rem}.modal-body li{margin-bottom:.5rem}.modal-body strong{color:#fff}.modal-footer{padding:1.5rem 2rem;background:#ffffff08;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:flex-end;flex-shrink:0}.modal-btn-launch{display:inline-block;background:#fff;color:#000;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:1rem 2rem;border-radius:99px;text-decoration:none;transition:transform .2s;font-size:.8rem}.modal-btn-launch:hover{transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:600px){.modal-container{border-radius:20px 20px 0 0;position:absolute;bottom:0;max-width:100%;margin:0;border-bottom:none;max-height:80vh}.modal-backdrop{padding:0;align-items:flex-end}}@tailwind base;@tailwind components;@tailwind utilities;