@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#e0e0e0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#08080f;width:100%;height:100%;font-family:Inter,system-ui,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative}.screen{z-index:1;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;display:none;position:absolute;inset:0}.screen.active{display:flex}.bg-glow{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-glow:before,.bg-glow:after{content:"";filter:blur(120px);border-radius:50%;animation:12s ease-in-out infinite float;position:absolute}.bg-glow:before{background:radial-gradient(circle,#00e5ff1f 0%,#0000 70%);width:400px;height:400px;animation-delay:0s;top:-100px;right:-100px}.bg-glow:after{background:radial-gradient(circle,#ff2d951a 0%,#0000 70%);width:350px;height:350px;animation-delay:-6s;bottom:-80px;left:-80px}@keyframes float{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-20px)scale(1.05)}66%{transform:translate(-20px,15px)scale(.95)}}.game-title{letter-spacing:.15em;background:linear-gradient(135deg,#00e5ff 0%,#ff2d95 50%,#00ffc8 100%) 0 0/200% 200%;-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;margin-bottom:.25rem;font-family:Orbitron,monospace;font-size:clamp(2.5rem,10vw,4.5rem);font-weight:900;animation:4s ease-in-out infinite gradient-shift}.game-subtitle{color:#ffffff59;letter-spacing:.3em;text-transform:uppercase;margin-bottom:3rem;font-family:Inter,sans-serif;font-size:clamp(.75rem,2.5vw,1rem);font-weight:300}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}.menu-buttons{flex-direction:column;gap:1rem;width:100%;max-width:320px;display:flex}.btn{color:#e0e0e0;letter-spacing:.1em;cursor:pointer;appearance:none;background:#00e5ff0a;border:1px solid #00e5ff40;border-radius:12px;outline:none;justify-content:center;align-items:center;padding:1rem 2rem;font-family:Orbitron,monospace;font-size:clamp(.85rem,2.5vw,1rem);font-weight:500;text-decoration:none;transition:all .3s;display:flex;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;background:linear-gradient(135deg,#00e5ff14,#ff2d950d);transition:opacity .3s;position:absolute;inset:0}.btn:hover,.btn:active{border-color:#00e5ff99;transform:translateY(-1px);box-shadow:0 0 25px #00e5ff26,inset 0 0 25px #00e5ff0d}.btn:hover:before,.btn:active:before{opacity:1}.btn:active{transform:translateY(0)}.btn-accent{background:#ff2d950f;border-color:#ff2d954d}.btn-accent:hover,.btn-accent:active{border-color:#ff2d9599;box-shadow:0 0 25px #ff2d9526,inset 0 0 25px #ff2d950d}.btn-small{border-radius:8px;padding:.6rem 1.2rem;font-size:clamp(.7rem,2vw,.8rem)}.btn-back{color:#fff6;background:0 0;border-color:#ffffff1a;margin-top:1rem;font-size:.8rem}.btn-back:hover{color:#ffffffb3;box-shadow:none;border-color:#ffffff4d}.section-title{color:#fff;text-align:center;margin-bottom:.5rem;font-family:Orbitron,monospace;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700}.section-desc{color:#fff6;text-align:center;max-width:280px;margin-bottom:2rem;font-size:clamp(.75rem,2.2vw,.9rem);line-height:1.5}.rule-card{cursor:pointer;background:#00e5ff05;border:1px solid #00e5ff26;border-radius:12px;width:100%;max-width:320px;margin-bottom:.75rem;padding:1.2rem;transition:all .3s}.rule-card:hover,.rule-card:active{background:#00e5ff0f;border-color:#00e5ff80;box-shadow:0 0 20px #00e5ff1a}.rule-card.special{background:#00ffc805;border-color:#00ffc826}.rule-card.special:hover,.rule-card.special:active{background:#00ffc80f;border-color:#00ffc880;box-shadow:0 0 20px #00ffc81a}.rule-card h3{color:#fff;margin-bottom:.5rem;font-family:Orbitron,monospace;font-size:.95rem;font-weight:600}.rule-card p{color:#ffffff73;font-size:.78rem;line-height:1.5}.rule-card .tag{letter-spacing:.05em;border-radius:4px;margin-top:.5rem;padding:.15rem .5rem;font-size:.65rem;font-weight:600;display:inline-block}.rule-card .tag.classic-tag{color:#00e5ff;background:#00e5ff26}.rule-card .tag.special-tag{color:#00ffc8;background:#00ffc826}.game-screen{flex-direction:column!important;padding:0!important}.hud{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#08080fe6;border-bottom:1px solid #00e5ff1a;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;display:flex}.hud-left,.hud-right{align-items:center;gap:.5rem;display:flex}.hud-center{text-align:center;flex:1}.score-badge{border-radius:6px;align-items:center;gap:.3rem;padding:.3rem .6rem;font-family:Orbitron,monospace;font-size:.8rem;font-weight:600;display:flex}.score-badge.p1{color:#ff2d95;background:#ff2d951f;border:1px solid #ff2d9533}.score-badge.p2{color:#00ffc8;background:#00ffc81f;border:1px solid #00ffc833}.score-dot{border-radius:50%;width:8px;height:8px}.score-dot.p1{background:#ff2d95;box-shadow:0 0 6px #ff2d95}.score-dot.p2{background:#00ffc8;box-shadow:0 0 6px #00ffc8}.turn-indicator{letter-spacing:.15em;font-family:Orbitron,monospace;font-size:clamp(.6rem,2vw,.75rem);font-weight:500;transition:color .3s}.turn-indicator.p1{color:#ff2d95}.turn-indicator.p2{color:#00ffc8}.hud-btn{color:#ffffff80;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:all .2s;display:flex}.hud-btn:hover,.hud-btn:active{color:#fffc;border-color:#ffffff4d}.hud-btn.muted{color:#fff3}.canvas-container{flex:1;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}#game-canvas{touch-action:none;display:block}.game-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08080fe6;border-top:1px solid #00e5ff1a;flex-shrink:0;justify-content:center;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;display:flex}.overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background:#08080feb;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:none;position:absolute;inset:0}.overlay.active{display:flex}.winner-text{letter-spacing:.1em;text-align:center;margin-bottom:2rem;font-family:Orbitron,monospace;font-size:clamp(1.8rem,8vw,3.5rem);font-weight:900;animation:1.5s ease-in-out infinite glow-pulse}.winner-text.p1{color:#ff2d95;text-shadow:0 0 40px #ff2d9580}.winner-text.p2{color:#00ffc8;text-shadow:0 0 40px #00ffc880}.winner-text.draw{color:#00e5ff;text-shadow:0 0 40px #00e5ff80}@keyframes glow-pulse{0%,to{opacity:1}50%{opacity:.7}}.overlay-buttons{gap:1rem;display:flex}.draw-overlay-text{color:#ffffffb3;text-align:center;margin-bottom:1.5rem;font-family:Inter,sans-serif;font-size:1rem}.diff-buttons{flex-direction:column;gap:.75rem;width:100%;max-width:320px;display:flex}.btn-diff{flex-direction:column;gap:.25rem;position:relative}.btn-diff .diff-label{color:#ffffff59;letter-spacing:.02em;font-family:Inter,sans-serif;font-size:.65rem;font-weight:400;display:block}.continue-card{background:#00e5ff0a;border:1px solid #00e5ff33;border-radius:10px;align-items:center;gap:.75rem;width:100%;max-width:320px;margin-bottom:1.5rem;padding:.8rem 1rem;display:flex}.continue-info{flex-direction:column;flex:1;gap:.2rem;display:flex}.continue-label{color:#00e5ff;letter-spacing:.1em;font-family:Orbitron,monospace;font-size:.6rem;font-weight:600}.continue-details{color:#fff6;font-size:.7rem}.btn-continue{white-space:nowrap;border-radius:8px;padding:.5rem 1rem;font-size:.75rem}.warning-icon{margin-bottom:1rem;font-size:3rem;animation:1.5s ease-in-out infinite glow-pulse}.btn-online{background:#00c8ff0a;border-color:#00c8ff40}.btn-online:hover,.btn-online:active{border-color:#00c8ff99;box-shadow:0 0 25px #00c8ff26,inset 0 0 25px #00c8ff0d}.btn-subtle{color:#ffffff80;background:#ffffff05;border-color:#ffffff1f;font-size:clamp(.75rem,2vw,.85rem)}.btn-subtle:hover,.btn-subtle:active{color:#ffffffb3;box-shadow:none;border-color:#ffffff4d}.join-row{gap:.5rem;width:100%;display:flex}.code-input{color:#e0e0e0;letter-spacing:.3em;text-align:center;text-transform:uppercase;background:#00e5ff0a;border:1px solid #00e5ff33;border-radius:10px;outline:none;flex:1;padding:.9rem 1rem;font-family:Orbitron,monospace;font-size:1rem}.code-input::placeholder{color:#fff3;letter-spacing:.15em}.code-input:focus{border-color:#00e5ff80;box-shadow:0 0 15px #00e5ff1a}.share-box{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.game-code-display{background:#00e5ff0f;border:1px solid #00e5ff40;border-radius:12px;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.code-label{color:#fff6;letter-spacing:.1em;font-family:Inter,sans-serif;font-size:.6rem;font-weight:600}.code-value{letter-spacing:.2em;color:#00e5ff;text-shadow:0 0 20px #00e5ff4d;font-family:Orbitron,monospace;font-size:1.6rem;font-weight:700}.btn-copy{min-width:auto;padding:.4rem .6rem;font-size:.9rem}.qr-container{background:#fff;border-radius:10px;padding:.75rem;display:inline-block}.qr-container canvas,.qr-container img{width:120px;height:120px;display:block}.waiting-status{color:#fff6;margin-bottom:1rem;font-family:Inter,sans-serif;font-size:.85rem;animation:2s ease-in-out infinite glow-pulse}.rules-screen{overflow-y:auto;justify-content:flex-start!important;padding:1rem!important}.rules-tabs{gap:.5rem;width:100%;max-width:400px;margin-bottom:1rem;display:flex}.rules-tab{color:#fff6;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;flex:1;padding:.6rem 1rem;font-family:Orbitron,monospace;font-size:.75rem;font-weight:500;transition:all .2s}.rules-tab.active{color:#00e5ff;background:#00e5ff14;border-color:#00e5ff66}.rules-tab:hover{border-color:#00e5ff4d}.rules-content-wrapper{-webkit-overflow-scrolling:touch;flex:1;width:100%;max-width:400px;overflow-y:auto}.rules-content{display:none}.rules-content.active{display:block}.rules-section{background:#ffffff05;border:1px solid #ffffff0f;border-radius:10px;margin-bottom:.6rem;padding:.9rem 1rem}.rules-section h3{color:#ffffffb3;margin-bottom:.4rem;font-family:Orbitron,monospace;font-size:.75rem;font-weight:600}.rules-section p{color:#ffffff73;font-size:.78rem;line-height:1.6}.rules-section p strong{color:#ffffffbf}.rules-section.highlight{background:#ff2d950a;border-color:#ff2d9533}.rules-section.highlight h3{color:#ff2d95}.rules-section.special-highlight{background:#ffa5000a;border-color:#ffa50033}.rules-section.special-highlight h3{color:orange}.rules-section.special-king{background:#ffd7000a;border-color:#ffd70033}.rules-section.special-king h3{color:gold}.rules-subtle{opacity:.7;margin-top:.4rem;font-style:italic}.huff-banner{text-align:center;color:#ffa040;background:#ff64001f;border-bottom:1px solid #ff640040;flex-shrink:0;width:100%;padding:.5rem 1rem;font-family:Inter,sans-serif;font-size:.72rem;animation:1.5s ease-in-out infinite huff-glow}@keyframes huff-glow{0%,to{background:#ff640014}50%{background:#ff640026}}@media (width>=768px){.menu-buttons,.diff-buttons{max-width:360px}.rule-card{max-width:400px}.btn{padding:1.1rem 2.5rem}.overlay-buttons{gap:1.5rem}.continue-card{max-width:360px}}@media (height>=700px){.game-subtitle{margin-bottom:4rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}