*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;overflow-y:auto;overflow-x:hidden}
.container{text-align:center;padding:2rem}
.card{background:rgba(255,255,255,0.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:3rem 3.5rem;max-width:520px;margin:0 auto;box-shadow:0 8px 32px rgba(0,0,0,0.35);animation:fadeInUp 0.8s ease-out}
.logo-wrapper{margin-bottom:1.5rem}
.logo{width:100px;height:100px;object-fit:contain;border-radius:20px;box-shadow:0 4px 20px rgba(100,100,255,0.25);transition:transform 0.3s ease}
.logo:hover{transform:scale(1.06)}
h1{font-size:2rem;font-weight:700;letter-spacing:-0.5px;color:#ffffff;margin-bottom:0.75rem}
.divider{width:60px;height:3px;background:linear-gradient(90deg,#7f5af0,#2cb5e8);border-radius:4px;margin:0 auto 1.25rem}
.message{font-size:1.15rem;font-weight:500;color:#c9c9e0;margin-bottom:0.5rem}
.sub-message{font-size:0.95rem;font-weight:300;color:#8888aa}
.dino-wrapper{margin-top:1.5rem}
.dino{width:90px;height:90px;object-fit:cover;border-radius:14px;filter:drop-shadow(0 0 10px rgba(44,181,232,0.3));transition:transform 0.3s ease,filter 0.3s ease;animation:floatDino 3s ease-in-out infinite}
.dino:hover{transform:scale(1.08);filter:drop-shadow(0 0 18px rgba(127,90,240,0.5))}
@keyframes floatDino{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.game-section{margin-top:2rem;animation:fadeInUp 0.8s ease-out 0.3s both}
.game-invite{font-size:0.85rem;color:#8888aa;margin-bottom:0.75rem}
.game-invite kbd{display:inline-block;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:4px;padding:0.1rem 0.4rem;font-family:inherit;font-size:0.8rem;color:#c9c9e0}
.game-container{position:relative;width:480px;max-width:100%;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 24px rgba(0,0,0,0.4);outline:none;cursor:pointer}
.game-container:focus{border-color:rgba(127,90,240,0.5);box-shadow:0 4px 24px rgba(127,90,240,0.2)}
#gameCanvas{display:block;width:100%;height:160px;background:#0a0a18}
.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,24,0.7);backdrop-filter:blur(4px);transition:opacity 0.3s ease}
.game-overlay.hidden{opacity:0;pointer-events:none}
.game-overlay-text{font-size:1rem;font-weight:500;color:#e0e0e0;text-shadow:0 0 12px rgba(127,90,240,0.5)}
.game-score{margin-top:0.5rem;font-size:0.8rem;color:#8888aa}
.game-score span{color:#2cb5e8;font-weight:700}
footer{margin-top:2.5rem}
footer p{font-size:0.8rem;color:#55557a}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.card{padding:2rem 1.5rem;margin:0 1rem}h1{font-size:1.5rem}.logo{width:80px;height:80px}.dino{width:70px;height:70px}.game-container{width:100%}#gameCanvas{height:140px}}