@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&display=swap";:root{--font-sans:"Outfit", system-ui, sans-serif;--bg:#0d0f1a;--bg-card:#13162b;--bg-card-alt:#1a1d33;--border:#ffffff14;--border-hover:#ffffff2e;--text:#9ca3b8;--text-h:#e8eaf6;--accent:#00e676;--accent-dim:#00e6761f;--accent-glow:#00e67640;--purple:#b388ff;--purple-dim:#b388ff1f;--shadow-card:0 8px 32px #00000073;--shadow-glow:0 0 40px #00e67626;--radius-card:20px;--radius-btn:14px;font:16px/150% var(--font-sans);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased}[data-theme=light]{--bg:#f4f6fb;--bg-card:#fff;--bg-card-alt:#eef1f8;--border:#00000017;--border-hover:#00000038;--text:#5a6380;--text-h:#1a1f36;--accent:#00c853;--accent-dim:#00c8531f;--accent-glow:#00c85338;--purple:#7c4dff;--purple-dim:#7c4dff1a;--shadow-card:0 4px 24px #0000001a;--shadow-glow:0 0 32px #00c8531a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:var(--bg);color:var(--text)}[data-theme=light] body:before{background-image:linear-gradient(#00c8530f 1px,#0000 1px),linear-gradient(90deg,#00c8530f 1px,#0000 1px)}*,:before,:after{box-sizing:border-box}body,p{margin:0}h1,h2,h3,h4{font-family:var(--font-sans);color:var(--text-h);margin:0}#root{flex-direction:column;align-items:center;min-height:100svh;display:flex}body:before{content:"";z-index:0;pointer-events:none;background-image:linear-gradient(#00e6760a 1px,#0000 1px),linear-gradient(90deg,#00e6760a 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0}.homepage{z-index:1;flex-direction:column;align-items:center;width:100%;max-width:520px;min-height:100svh;padding:0 20px 40px;display:flex;position:relative}.homepage-header{text-align:center;flex-direction:column;align-items:center;gap:8px;padding:56px 0 40px;display:flex;position:relative}.theme-toggle{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;border-radius:50px;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;line-height:1;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;display:flex;position:fixed;top:16px;left:16px;box-shadow:0 2px 8px #00000026}.theme-toggle:hover{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 16px var(--accent-glow);transform:scale(1.1)rotate(15deg)}.theme-toggle:active{transform:scale(.95)rotate(0)}.logo-mark{filter:drop-shadow(0 0 24px #00e67680);font-size:56px;line-height:1;animation:3s ease-in-out infinite floatIcon}@keyframes floatIcon{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-10px)rotate(4deg)}}.game-title{letter-spacing:-3px;background:linear-gradient(135deg,#00e676 0%,#b388ff 60%,#40c4ff 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(52px,12vw,80px);font-weight:900;line-height:1}.game-subtitle{color:var(--text);letter-spacing:.5px;text-transform:uppercase;font-size:15px;font-weight:400}.homepage-main{width:100%}.menu-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-card), var(--shadow-glow);flex-direction:column;gap:14px;padding:24px;display:flex}.menu-btn{border-radius:var(--radius-btn);border:1px solid var(--border);background:var(--bg-card-alt);cursor:pointer;text-align:left;width:100%;font-family:var(--font-sans);align-items:center;gap:16px;padding:20px 22px;transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.menu-btn:after{content:"→";color:var(--text);opacity:.4;font-size:18px;transition:opacity .2s,right .2s;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.menu-btn:hover{border-color:var(--border-hover);transform:translateY(-2px)}.menu-btn:hover:after{opacity:.8;right:16px}.menu-btn:active{transform:translateY(0)scale(.99)}.menu-btn:disabled{opacity:.75;filter:grayscale(60%);cursor:not-allowed;pointer-events:auto}.menu-btn:disabled:hover{border-color:var(--border);box-shadow:none;transform:none}.menu-btn:disabled:after{display:none}.menu-btn--primary{background:linear-gradient(135deg, #00e67614, var(--bg-card-alt));border-color:#00e6764d;box-shadow:inset 0 0 0 1px #00e6761a}.menu-btn--primary:hover{border-color:var(--accent);box-shadow:0 0 24px #00e67633,inset 0 0 0 1px #00e67633}.menu-btn--secondary{background:linear-gradient(135deg, #b388ff14, var(--bg-card-alt));border-color:#b388ff4d}.menu-btn--secondary:hover{border-color:var(--purple);box-shadow:0 0 24px #b388ff33}.menu-btn-icon{flex-shrink:0;font-size:28px;line-height:1}.menu-btn-label{color:var(--text-h);font-size:18px;font-weight:600;line-height:1.2;display:block}.menu-btn-desc{color:var(--text);margin-top:3px;font-size:13px;display:block}.homepage-footer{color:var(--text);opacity:.5;text-align:center;margin-top:auto;padding-top:40px;font-size:12px}.homepage-footer strong{color:var(--text)}.how-to-play-page{flex-direction:column;align-items:flex-start;gap:28px;width:100%;padding-bottom:40px;display:flex}.back-home-btn,.back-button{border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);cursor:pointer;background:0 0;border-radius:8px;padding:8px 16px;font-size:14px;transition:border-color .2s,color .2s}.back-home-btn:hover,.back-button:hover{border-color:var(--accent);color:var(--accent)}.section-title{letter-spacing:-.5px;background:linear-gradient(90deg, var(--text-h), var(--purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding-bottom:8px;font-size:32px;font-weight:700;line-height:1.25}.htp-intro{color:var(--text);font-size:15px;line-height:170%}.htp-intro strong{color:var(--accent)}.htp-steps{flex-direction:column;gap:14px;width:100%;display:flex}.htp-step{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;align-items:flex-start;gap:16px;padding:18px;transition:border-color .2s;display:flex}.htp-step:hover{border-color:var(--border-hover)}.htp-step-number{background:var(--purple-dim);width:32px;height:32px;color:var(--purple);border:1px solid #b388ff59;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:14px;font-weight:700;display:flex}.htp-step-content h3{color:var(--text-h);margin-bottom:6px;font-size:16px;font-weight:600}.htp-step-content p{color:var(--text);font-size:14px;line-height:160%}.htp-step-content strong{color:var(--text-h)}.htp-step-content em{color:var(--accent);font-style:normal;font-weight:500}.htp-pieces-section{width:100%}.htp-pieces-title,.htp-modes-title{color:var(--text-h);margin-bottom:14px;font-size:18px;font-weight:600}.htp-pieces-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.htp-piece-card{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;transition:border-color .2s;display:flex}.htp-piece-card:hover{border-color:var(--border-hover)}.htp-piece-icon{font-size:26px;line-height:1}.htp-piece-card strong{color:var(--text-h);font-size:13px;font-weight:600}.htp-piece-card p{color:var(--text);font-size:12px;line-height:145%}.htp-modes-section{width:100%}.htp-modes-grid{grid-template-columns:repeat(2,1fr);gap:16px;width:100%;display:grid}@media (width<=600px){.htp-modes-grid{grid-template-columns:1fr}}.htp-mode-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:10px;padding:20px;transition:border-color .2s,transform .2s;display:flex}.htp-mode-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}.htp-mode-card h4{align-items:center;gap:8px;margin:0;font-size:16px;font-weight:600;display:flex}.htp-mode-card p{color:var(--text);margin:0;font-size:14px;line-height:155%}.htp-mode-card strong{color:var(--text-h)}.htp-mode-card--single{border-left:4px solid var(--purple)}.htp-mode-card--single h4{color:var(--purple)}.htp-mode-card--multi{border-left:4px solid var(--accent)}.htp-mode-card--multi h4{color:var(--accent)}.loading-screen{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100svh;display:flex;position:relative}.loading-egg{font-size:48px;animation:1.5s ease-in-out infinite floatIcon}.loading-screen h2{color:var(--text-h);font-size:20px;font-weight:600}.loading-screen p{color:var(--text);font-size:14px}.progress-bar-container{background:var(--border);border-radius:99px;width:220px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent), var(--purple));height:100%;box-shadow:0 0 8px var(--accent-glow);border-radius:99px;transition:width .25s}.screen-container{z-index:1;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.canvas-wrapper-container{flex-direction:column;align-items:center;gap:0;margin-top:25px;display:flex}.canvas-ready-container{flex-direction:column;justify-content:center;gap:20px;margin-top:20px;display:flex}.game-canvas{border:2px solid #333;display:block}.waiting-message-container,.connecting-message-container{flex-direction:column;align-items:center;gap:12px;margin-top:25px;display:flex}.back-button{background:var(--bg-card);color:var(--text-h);border-radius:10px;margin-top:20px;padding:10px 24px;font-size:15px}@media (width<=480px){.homepage-header{padding:36px 0 28px}.htp-pieces-grid{grid-template-columns:1fr}.htp-pieces-grid--5{grid-template-columns:repeat(2,1fr)}.menu-btn{padding:16px 18px}}