@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap";:root{--bg-color: #020617;--accent-color: #38bdf8;--accent-secondary: #818cf8;--text-color: #f8fafc;--text-muted: #94a3b8;--glass-bg: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .1)}*{box-sizing:border-box}body{margin:0;overflow:hidden;background-color:var(--bg-color);color:var(--text-color);font-family:Outfit,sans-serif;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}#app{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(circle at center,#0f172a,#020617)}canvas#gameCanvas{display:block}.ui-layer{position:absolute;top:20px;left:50%;transform:translate(-50%);pointer-events:none;z-index:10;white-space:nowrap}.ui-layer h1{font-size:3rem;letter-spacing:.3em;font-weight:800;background:linear-gradient(135deg,#fff 0%,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px rgba(56,189,248,.4));margin:0;text-align:center}.menu-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:calc(120px * var(--game-scale, 1));display:flex;flex-direction:column;gap:16px;align-items:center;z-index:100;pointer-events:none;padding:40px;border-radius:24px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:0 10px 40px #0006;animation:menuIn .5s cubic-bezier(.16,1,.3,1)}@keyframes menuIn{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}.menu-container>*{pointer-events:auto}.btn{padding:16px 48px;font-size:1.1rem;font-family:Outfit,sans-serif;font-weight:600;border-radius:12px;cursor:pointer;text-transform:uppercase;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:2px;border:none;min-width:320px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-secondary) 100%);color:#000;box-shadow:0 8px 20px #38bdf84d}.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 25px #38bdf880;filter:brightness(1.1)}.btn-secondary{background-color:#ffffff0d;color:#fff;border:1px solid var(--glass-border)}.btn-secondary:hover{background-color:#ffffff1a;border-color:var(--accent-color);transform:translateY(-4px)}.btn:active{transform:translateY(-1px) scale(.98)}.btn:focus-visible,.social-btn:focus-visible{outline:3px solid var(--accent-color);outline-offset:4px;transform:translateY(-2px)}#qr-container{display:none;position:fixed;top:20px;right:20px;background:#fff;padding:4px;border-radius:8px;box-shadow:0 0 20px #0000004d;z-index:50;animation:fadeIn .5s ease}#qr-container.visible{display:block}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}#qrCanvas{display:block;width:120px!important;height:120px!important}.modal-overlay{position:fixed;inset:0;background:#020617d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity .3s ease}.modal-overlay.visible{display:flex;opacity:1}.modal-content{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;padding:32px;width:90%;max-width:440px;position:relative;box-shadow:0 20px 50px #00000080;transform:translateY(20px);transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:24px;align-items:center}.modal-overlay.visible .modal-content{transform:translateY(0)}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#ffffff1a;color:#fff}.modal-title{font-size:1.5rem;font-weight:800;margin:0;background:linear-gradient(135deg,#fff 0%,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.share-options{display:flex;flex-direction:column;gap:12px;width:100%}.share-qr{background:#020617;padding:12px;border-radius:16px;border:1px solid var(--glass-border);margin-bottom:8px}.copy-area{display:flex;gap:8px;width:100%;background:#ffffff0d;padding:4px;border-radius:12px;border:1px solid var(--glass-border)}.copy-input{flex:1;background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:.9rem;padding:8px 12px;outline:none;text-overflow:ellipsis}.btn-copy{min-width:unset;padding:8px 16px;font-size:.8rem;border-radius:8px}.social-links{display:flex;gap:16px;justify-content:center}.social-btn{width:48px;height:48px;border-radius:12px;background:#ffffff0d;border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease;cursor:pointer}.social-btn:hover{background:#ffffff1a;border-color:var(--accent-color);transform:translateY(-2px)}.social-btn svg{width:20px;height:20px;fill:currentColor}#qr-container{display:none!important}@media(max-width:768px){.ui-layer{top:10px}.ui-layer h1{font-size:1.5rem;letter-spacing:.1em}#qr-container{top:auto!important;bottom:20px;right:20px}#qrCanvas{width:80px!important;height:80px!important}.menu-container{padding:24px;margin-top:calc(160px * var(--game-scale, 1))}.btn{min-width:240px;padding:12px 24px;font-size:1rem}.modal-content{padding:24px;gap:20px}.copy-area{flex-direction:column;padding:8px;gap:12px}.btn-copy{width:100%;padding:12px;font-size:1rem}.social-links{flex-wrap:wrap;gap:12px}.social-btn{width:44px;height:44px}}