.multiplayer-container{width:100%;max-width:1200px;padding:20px;color:#fff}.lobby-content{display:grid;grid-template-columns:2fr 1fr;gap:30px}.rooms-panel,.history-panel{background:#19192de6;padding:25px;border-radius:20px;border:1px solid rgba(102,126,234,.2)}.create-room-box{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.input-row{display:flex;gap:10px;margin-top:15px}.input-row input{flex:1;padding:12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff}.game-type-selector{margin-bottom:15px;display:flex;align-items:center;gap:10px}.game-select{padding:8px 12px;border-radius:8px;background:#0000004d;color:#fff;border:1px solid rgba(102,126,234,.5);font-size:1rem;cursor:pointer;flex:1}.game-select option{background:#1a1a3e;color:#fff}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;background:#ffffff0d;padding:20px;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.back-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:#a0c4ff;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s}.back-btn:hover{background:#ffffff1a;color:#fff}.logout-btn{background:#ff5e62;border:none;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;margin-left:15px;font-size:.9rem}.input-row .create-btn{padding:0 30px;background:linear-gradient(135deg,#43e97b,#38f9d7);color:#1a1a3e;font-weight:700;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 10px #43e97b4d}.room-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#ffffff0d;margin-bottom:10px;border-radius:10px;transition:all .2s;border:1px solid transparent}.room-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(5px)}.join-btn{padding:8px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:700}.owner-actions{display:flex;align-items:center;gap:10px}.delete-btn{padding:6px 12px;background:#ff5e6233;border:1px solid #ff5e62;color:#ff5e62;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.delete-btn:hover{background:#ff5e62;color:#fff}.waiting-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:2000}.waiting-content{background:#1a1a3e;padding:40px;border-radius:20px;text-align:center;border:2px solid #667eea}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top:4px solid #667eea;border-radius:50%;margin:20px auto;animation:spin 1s linear infinite}.history-item{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(255,255,255,.05)}.win{color:#43e97b;font-weight:700}.lose{color:#ff5e62;font-weight:700}.score{color:#fff}.date{color:#ffffff80;font-size:.8rem}.toast-notification{position:fixed;bottom:20px;right:20px;background:#333;color:#fff;padding:15px 25px;border-radius:8px;box-shadow:0 4px 15px #00000080;z-index:10000;animation:slideIn .3s ease-out;border-left:5px solid #667eea}.toast-error{background:#2a0a0a;border-left-color:#ff5e62}.toast-success{background:#0a2a0a;border-left-color:#43e97b}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.chat-container{background:#00000080;border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;flex-direction:column;height:300px;width:300px}.chat-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.chat-message{font-size:.9rem;color:#ddd;word-wrap:break-word}.chat-message.my-message{text-align:right;color:#a0c4ff}.chat-user{font-weight:700;margin-right:5px;color:#ffd166}.chat-input-area{display:flex;padding:10px;border-top:1px solid rgba(255,255,255,.1)}.chat-input-area input{flex:1;background:#ffffff1a;border:none;border-radius:4px;padding:8px;color:#fff;margin-right:5px}.chat-input-area button{background:#667eea;border:none;border-radius:4px;color:#fff;padding:0 10px;cursor:pointer}.online-game-container{width:100vw;height:100vh;display:flex;flex-direction:column;padding:20px;background:#0f0f23;color:#fff}.online-header{display:flex;justify-content:space-between;padding:10px 20px;background:#ffffff0d;margin-bottom:20px;border-radius:10px}.quit-btn{background:#ff5e62;border:none;color:#fff;padding:8px 16px;border-radius:5px;cursor:pointer}.room-info-bar span{margin-left:20px;font-weight:700;color:#ffd166}.arena{display:flex;flex:1;justify-content:center;gap:40px;align-items:flex-start}.player-side{display:flex;flex-direction:column;align-items:center}.player-side.opponent{opacity:.9;transform:scale(.95)}.game-wrapper{position:relative;border:2px solid #333;padding:10px;border-radius:10px;background:#00000080}.local .game-wrapper{border-color:#43e97b;box-shadow:0 0 20px #43e97b33}.opponent .game-wrapper{border-color:#ff416c}.center-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.vs-badge{font-size:3rem;font-weight:900;color:transparent;background:linear-gradient(to bottom,#ff9a9e,#fad0c4);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 20px rgba(255,0,0,.5)}.mini-stats{text-align:center;font-size:1.2rem;margin-bottom:10px;font-weight:700}.match-result-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-out}.result-content{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:3rem;border-radius:20px;text-align:center;border:2px solid rgba(255,255,255,.1);box-shadow:0 0 50px #00000080;transform:scale(.9);animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes popIn{to{transform:scale(1)}}.win-text{font-size:3rem;color:gold;text-shadow:0 0 20px rgba(255,215,0,.5);margin-bottom:2rem}.lose-text{font-size:3rem;color:#ff5e62;text-shadow:0 0 20px rgba(255,94,98,.5);margin-bottom:2rem}.result-actions{display:flex;gap:1.5rem;justify-content:center}.rematch-btn,.leave-btn{padding:12px 24px;font-size:1.1rem;border-radius:8px;cursor:pointer;border:none;font-weight:700;transition:all .2s}.rematch-btn{background:#43e97b;color:#1a1a2e}.rematch-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #43e97b4d}.leave-btn{background:#ffffff1a;color:#fff}.leave-btn:hover{background:#fff3}.waiting-placeholder{width:250px;height:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#ffffff80;background:#0000004d;border-radius:10px}.spinner{border:4px solid rgba(255,255,255,.1);width:36px;height:36px;border-radius:50%;border-left-color:#09f;animation:spin 1s linear infinite;margin-top:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pong-container{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1a1a3e,#0f0f23);position:relative;overflow:hidden}.pong-canvas{background:#0000004d;border:2px solid rgba(255,255,255,.1);box-shadow:0 0 50px #00000080;border-radius:12px;cursor:none}.score-board{position:absolute;top:40px;display:flex;gap:100px;font-size:3rem;font-weight:900;font-family:Outfit,sans-serif;color:#fff3;pointer-events:none}.player-score{color:#667eea;text-shadow:0 0 20px rgba(102,126,234,.5)}.computer-score{color:#ff5e62;text-shadow:0 0 20px rgba(255,94,98,.5)}.pong-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.pong-menu{text-align:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:40px 60px;border-radius:20px;box-shadow:0 20px 60px #00000080}.pong-menu h1{font-size:4rem;margin-bottom:20px;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.difficulty-buttons{display:flex;gap:20px;margin-top:30px}.diff-btn{padding:15px 30px;font-size:1.2rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .2s;color:#fff}.diff-btn:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000004d}.diff-btn.easy{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#0c2d1c}.diff-btn.medium{background:linear-gradient(135deg,#667eea,#764ba2)}.diff-btn.hard{background:linear-gradient(135deg,#ff5e62,#f96)}.final-score-pong{font-size:3rem;font-weight:700;margin:20px 0;color:#fff}.restart-btn{padding:15px 40px;font-size:1.2rem;background:#fff;color:#000;border:none;border-radius:30px;cursor:pointer;font-weight:700;transition:all .2s}.restart-btn:hover{transform:scale(1.05);box-shadow:0 0 20px #fff6}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:fixed;top:0;left:0;width:100%;z-index:1000}.auth-box{background:linear-gradient(135deg,#1a1a3e,#0f0f23);padding:40px;border-radius:20px;box-shadow:0 0 30px #667eea4d;border:1px solid rgba(102,126,234,.3);width:100%;max-width:400px;text-align:center}.auth-box h2{color:#fff;margin-bottom:30px;font-size:2rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.input-group{margin-bottom:20px}.input-group input{width:100%;padding:12px 20px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#fff;font-size:1rem;transition:all .3s}.input-group input:focus{outline:none;border-color:#667eea;background:#ffffff1a}.auth-button{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s}.auth-button:hover{transform:translateY(-2px)}.auth-button:disabled{opacity:.7;cursor:not-allowed}.auth-message{margin-top:15px;color:#ff9a9e;font-size:.9rem}.auth-switch{margin-top:20px;color:#fff9;font-size:.9rem}.auth-switch span{color:#667eea;cursor:pointer;font-weight:700;text-decoration:underline}.game-container{width:100%;max-width:1200px;margin:0 auto;padding:20px}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.game-title-small{font-size:2rem;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.2em;margin:0}.menu-button{padding:12px 30px;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.menu-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.game-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:start}.left-panel,.right-panel{display:flex;flex-direction:column;gap:20px}.center-panel{position:relative;display:flex;justify-content:center}.game-board{background:#0f0f23cc;border-radius:8px;padding:4px;box-shadow:0 0 30px #667eea4d,inset 0 0 30px #00000080;border:2px solid rgba(102,126,234,.3)}.board-row{display:flex}.board-cell{width:28px;height:28px;border:1px solid rgba(102,126,234,.1);transition:all .1s ease}.board-cell.filled{border:1px solid rgba(255,255,255,.3);position:relative}.board-cell.ghost{opacity:.3;border:1px dashed rgba(255,255,255,.5);box-shadow:none!important}.board-cell.filled:after{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 100%);border-radius:2px;pointer-events:none}.score-panel{background:#0f0f2399;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:24px;border:1px solid rgba(102,126,234,.3);box-shadow:0 8px 32px #0000004d}.stat-item{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.stat-item:last-child{margin-bottom:0}.stat-label{font-size:.9rem;color:#fff9;text-transform:uppercase;letter-spacing:.1em;font-weight:500}.stat-value{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.high-score-item{padding-top:20px;border-top:1px solid rgba(102,126,234,.2)}.next-piece-container{background:#0f0f2399;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:24px;border:1px solid rgba(102,126,234,.3);box-shadow:0 8px 32px #0000004d}.panel-title{font-size:1.1rem;color:#fffc;text-transform:uppercase;letter-spacing:.1em;margin:0 0 16px;font-weight:600}.next-piece-display{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;background:#0000004d;border-radius:8px;padding:16px}.next-piece-row{display:flex}.next-piece-cell{width:24px;height:24px;border-radius:3px;margin:1px;transition:all .2s ease}.next-piece-cell.filled{border:1px solid rgba(255,255,255,.3)}.pause-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0f0f23d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease;border-radius:8px}.pause-modal{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:30px;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 10px 40px #00000080;transform:translateY(0);animation:slideUp .3s ease;min-width:250px}.pause-title{font-size:2.5rem;font-weight:900;margin:0;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 10px rgba(102,126,234,.3)}.pause-buttons{display:flex;flex-direction:column;gap:12px;width:100%}.pause-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 24px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease;color:#fff;width:100%}.pause-button .icon{font-size:1.2em}.pause-button.resume{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea66}.pause-button.resume:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.pause-button.restart{background:#ffffff1a;border:1px solid rgba(255,255,255,.1)}.pause-button.restart:hover{background:#fff3;transform:translateY(-2px)}.pause-button.quit{background:transparent;color:#ffffffb3;border:1px solid transparent}.pause-button.quit:hover{color:#ff6b6b;background:#ff6b6b1a}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.game-over-modal{background:linear-gradient(135deg,#0f0f23f2,#191937f2);border-radius:24px;padding:48px;border:2px solid rgba(102,126,234,.5);box-shadow:0 20px 60px #000c;text-align:center;min-width:400px;animation:slideUp .4s ease}.game-over-title{font-size:3rem;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 24px}.new-high-score{font-size:1.5rem;color:gold;margin-bottom:24px;animation:pulse 1s infinite}.final-score{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;padding:24px;background:#0000004d;border-radius:16px}.final-score-label{font-size:1.1rem;color:#fff9;text-transform:uppercase;letter-spacing:.1em}.final-score-value{font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-over-buttons{display:flex;gap:16px}.game-over-button{flex:1;padding:16px 32px;font-size:1.1rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.game-over-button span{position:relative;z-index:1}.game-over-button.play-again{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.game-over-button.play-again:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.game-over-button.back-menu{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.2)}.game-over-button.back-menu:hover{background:#fff3;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@media (max-width: 1024px){.game-layout{grid-template-columns:1fr;gap:20px}.left-panel,.right-panel{flex-direction:row;justify-content:center}.game-over-modal{min-width:auto;margin:20px}}@media (max-width: 640px){.board-cell{width:20px;height:20px}.next-piece-cell{width:18px;height:18px}.game-over-buttons{flex-direction:column}}.back-home-button{position:absolute;top:20px;left:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;z-index:2000;font-weight:700;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s;display:flex;align-items:center;box-shadow:0 4px 6px #0000001a}.back-home-button:hover{background:#fff3;transform:translate(-2px);box-shadow:0 0 15px #64c8ff80;border-color:#667eea}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#0f0f23);min-height:100vh;color:#fff;overflow-x:hidden}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 50%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(118,75,162,.1) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(102,126,234,.05) 0%,transparent 50%);animation:gradientShift 15s ease infinite;z-index:-1}@keyframes gradientShift{0%,to{transform:translate(0)}50%{transform:translate(10%,10%)}}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0}.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}.menu-container{width:100%;max-width:600px;margin:0 auto;animation:fadeIn .5s ease}.menu-content{background:#0f0f23cc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:60px 40px;border:2px solid rgba(102,126,234,.3);box-shadow:0 20px 60px #00000080,0 0 40px #667eea33}.game-title{text-align:center;font-size:5rem;font-weight:900;letter-spacing:.3em;margin-bottom:40px;display:flex;justify-content:center;gap:8px}.title-letter{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:letterFloat 3s ease-in-out infinite;text-shadow:0 0 30px rgba(102,126,234,.5)}.title-letter:nth-child(1){animation-delay:0s}.title-letter:nth-child(2){animation-delay:.1s}.title-letter:nth-child(3){animation-delay:.2s}.title-letter:nth-child(4){animation-delay:.3s}.title-letter:nth-child(5){animation-delay:.4s}.title-letter:nth-child(6){animation-delay:.5s}@keyframes letterFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.menu-info{margin-bottom:40px}.high-score-display{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#0000004d;border-radius:12px;border:1px solid rgba(102,126,234,.2)}.high-score-display .label{font-size:1rem;color:#fff9;text-transform:uppercase;letter-spacing:.1em}.high-score-display .value{font-size:2rem;font-weight:800;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.play-button{width:100%;padding:20px;font-size:1.5rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;transition:all .3s ease;box-shadow:0 8px 30px #667eea66;margin-bottom:40px}.play-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.play-button:hover:before{left:100%}.play-button:hover{transform:translateY(-3px);box-shadow:0 12px 40px #667eea99}.play-button:active{transform:translateY(-1px)}.button-text{position:relative;z-index:1}.controls-info{background:#00000040;border-radius:16px;padding:24px;border:1px solid rgba(102,126,234,.15);display:flex;flex-direction:column;gap:24px}.info-section h3{font-size:1.1rem;margin-bottom:16px;color:#ffffffe6;text-align:center;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.rules-list{list-style:none;padding:0;text-align:left;font-size:.95rem;color:#fffc;display:flex;flex-direction:column;gap:8px}.rules-list li:before{content:"•";color:#667eea;font-weight:700;display:inline-block;width:1em;margin-left:-1em}.rules-list li{padding-left:1em}.key-group{display:flex;gap:4px}.space-key{min-width:80px!important}.score-rules{display:grid;grid-template-columns:1fr 1fr;gap:12px}.score-rule{display:flex;justify-content:space-between;background:#ffffff0d;padding:8px 12px;border-radius:6px;font-size:.9rem}.score-val{font-weight:700;color:#a5b4fc}.score-val.highlight{color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}.control-item kbd{background:linear-gradient(to bottom,#4a5568,#2d3748);border-bottom:3px solid #1a202c;border-radius:6px;padding:6px 12px;font-family:Outfit,monospace;font-size:.9rem;font-weight:700;color:#fff;min-width:36px;text-align:center;box-shadow:0 2px 4px #0000004d;display:inline-block}.control-item span{font-size:.9rem;color:#ffffffb3;text-align:center}.fade-in{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0f0f2380}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.game-selection-container{width:100%;max-width:1000px;padding:40px;display:flex;flex-direction:column;align-items:center;animation:fadeIn .5s ease}.main-title{font-size:4rem;font-weight:900;margin-bottom:60px;background:linear-gradient(to right,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(102,126,234,.3);letter-spacing:.1em}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;width:100%}.game-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:320px}.game-card:hover{transform:translateY(-10px);background:#ffffff1a;border-color:#fff3;box-shadow:0 20px 40px #0006}.game-card.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.8)}.game-card.disabled:hover{transform:none;box-shadow:none}.game-icon{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:24px;box-shadow:0 10px 20px #0000004d;transition:transform .3s ease}.game-card:hover .game-icon{transform:scale(1.1) rotate(5deg)}.game-name{font-size:1.8rem;font-weight:800;margin-bottom:8px;color:#fff;letter-spacing:.05em}.game-desc{font-size:.9rem;color:#fff9;margin-bottom:30px}.play-badge{margin-top:auto;padding:8px 24px;background:#fff;color:#1a1a3e;border-radius:20px;font-weight:700;font-size:.9rem;opacity:0;transform:translateY(10px);transition:all .3s ease}.game-card:hover .play-badge{opacity:1;transform:translateY(0)}.coming-soon{margin-top:auto;font-size:.8rem;left:20px;background:#ffffff1a;border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;transition:all .2s ease;z-index:100}.snake-game-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:600px}.snake-stats{display:flex;gap:20px}.stat-box{background:#ffffff1a;padding:8px 16px;border-radius:8px;display:flex;flex-direction:column;align-items:center}.stat-box span{font-size:.7rem;opacity:.7}.stat-box strong{font-size:1.2rem;color:#38f9d7}.snake-board-wrapper{position:relative;padding:4px;background:#0f0f23cc;border-radius:12px;border:2px solid #38f9d7;box-shadow:0 0 30px #38f9d733}.snake-board{position:relative;width:400px;height:400px;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px;border-radius:8px}.snake-segment{position:absolute;width:20px;height:20px;border-radius:6px}.snake-head{background:#38f9d7;box-shadow:0 0 15px #38f9d799;z-index:100;border-radius:8px}.snake-body{background:#43e97b;opacity:.9;transform:scale(.92)}.snake-eye{position:absolute;width:4px;height:4px;background:#0f2027;border-radius:50%;top:4px}.snake-eye.left{left:4px}.snake-eye.right{right:4px}.snake-food{position:absolute;width:20px;height:20px;background:#ff5e62;border-radius:50%;box-shadow:0 0 15px #ff5e62;animation:pulse 1s infinite;transform:scale(.8)}.snake-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border-radius:8px;z-index:20}.snake-start-title{font-size:3rem;font-weight:900;background:linear-gradient(135deg,#43e97b,#38f9d7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.snake-over-title{font-size:3rem;font-weight:900;color:#ff5e62}.snake-btn{padding:12px 32px;font-size:1.2rem;font-weight:700;border:none;border-radius:30px;cursor:pointer;transition:all .2s}.snake-btn.start,.snake-btn.retry{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#0f2027}.snake-btn.quit{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.2)}.snake-btn:hover{transform:scale(1.05);box-shadow:0 5px 15px #0000004d}.snake-intruction{color:#fff9;margin-top:10px}@media (max-width: 500px){.snake-board,.snake-board-wrapper{width:320px!important;height:320px!important}.snake-cell,.snake-segment,.snake-food{width:16px;height:16px}}.dragon-bg-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.dragon-segment{position:absolute;width:30px;height:30px;display:flex;justify-content:center;align-items:center;will-change:transform}.dragon-segment.head{width:50px;height:60px;background:linear-gradient(135deg,gold,#ff758c);border-radius:25px 25px 35px 35px;box-shadow:0 0 25px #ffd70066;z-index:100}.dragon-snout{position:absolute;top:-15px;width:36px;height:25px;background:linear-gradient(to top,gold,#fa0);border-radius:12px 12px 5px 5px}.dragon-eye{position:absolute;width:10px;height:14px;background:#0f0f23;border-radius:50%;top:15px;border:2px solid #fff;box-shadow:0 0 5px red}.dragon-eye:after{content:"";position:absolute;top:2px;left:2px;width:3px;height:3px;background:#fff;border-radius:50%}.dragon-eye.left{left:8px;transform:rotate(-15deg)}.dragon-eye.right{right:8px;transform:rotate(15deg)}.dragon-horn{position:absolute;top:-5px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:40px solid #ffd700;z-index:-1}.dragon-horn.left{left:0;transform:rotate(-25deg)}.dragon-horn.right{right:0;transform:rotate(25deg)}.dragon-whisker{position:absolute;bottom:5px;width:40px;height:20px;border-left:3px solid #fff;border-bottom:3px solid transparent;border-radius:50%;opacity:.8}.dragon-whisker.left{left:-25px;transform:rotate(20deg)}.dragon-whisker.right{right:-25px;transform:scaleX(-1) rotate(20deg)}.dragon-segment.body{background:linear-gradient(180deg,#ff5e62,#f96,#fff1eb);border-radius:50%;box-shadow:inset 0 -5px 10px #0000001a,0 0 15px #ff5e6266;border:1px solid rgba(255,255,255,.2)}.dragon-scale{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;opacity:.3;background-image:radial-gradient(circle at 50% 0,#fff 2px,transparent 2.5px),radial-gradient(circle at 50% 100%,#fff 2px,transparent 2.5px);background-size:10px 10px;background-position:0 0,5px 5px;mix-blend-mode:overlay}.dragon-segment.body:after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:60%;height:30%;border-radius:0 0 20px 20px;background:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(100,100,100,.1) 4px,rgba(100,100,100,.1) 5px)}.dragon-fin{position:absolute;top:-12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:20px solid #ffd700;filter:drop-shadow(0 0 5px rgba(255,215,0,.5));transform-origin:bottom center}.dragon-wing{position:absolute;width:120px;height:80px;z-index:90;pointer-events:none}.dragon-wing.left{right:5px;top:-20px;transform-origin:right bottom;animation:flapLeft .4s ease-in-out infinite alternate}.dragon-wing.right{left:5px;top:-20px;transform-origin:left bottom;animation:flapRight .4s ease-in-out infinite alternate}.wing-inner{width:100%;height:100%;background:linear-gradient(135deg,#ff758ccc,#ffd70080);border-radius:10% 90%;box-shadow:0 0 15px #ff758c66;border:2px solid rgba(255,255,255,.4)}.dragon-wing.left .wing-inner{border-radius:90% 10%}@keyframes flapLeft{0%{transform:rotate(10deg) translate(0)}to{transform:rotate(-50deg) translate(-10px,10px)}}@keyframes flapRight{0%{transform:rotate(-10deg) translate(0)}to{transform:rotate(50deg) translate(10px,10px)}}.dragon-trail{position:absolute;top:50%;left:50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);opacity:.5;mix-blend-mode:screen}