.home-welcome{text-align:center;margin-top:100px}.home-btn{font-size:1.2rem;padding:10px 30px;cursor:pointer;margin-top:30px;margin-bottom:10px;border:2px solid #654321;border-radius:8px;background:linear-gradient(135deg,#8b4513,#d2691e),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain8" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain8)"/></svg>');color:wheat;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:0 4px 8px #0000004d,inset 0 1px #fff3;transition:all .3s ease}.home-btn:hover{background:linear-gradient(135deg,#d2691e,#8b4513),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain9" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain9)"/></svg>');transform:translateY(-2px);box-shadow:0 6px 12px #0006,inset 0 1px #fff3}.home-own-game{display:flex;flex-direction:column;align-items:center}.home-btn.back{margin-top:20px;font-size:1rem;padding:8px 20px}h1{margin-bottom:60px}.checker-piece{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000004d,0 2px 4px #0003,inset 0 1px #ffffff4d;transition:all .2s ease}.checker-piece:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0006,0 3px 6px #0000004d,inset 0 1px #fff6}.checker-piece.red{background:linear-gradient(135deg,#f44,#c00);border:2px solid #ff6666}.checker-piece.black{background:linear-gradient(135deg,#333,#000);border:2px solid #555555}.checker-crown{font-size:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;text-shadow:1px 1px 2px rgba(0,0,0,.5);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.checkers-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;width:375px;max-width:375px;margin:0 auto;background:linear-gradient(45deg,#8b4513 25%,transparent 25%),linear-gradient(-45deg,#8b4513 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8b4513 75%),linear-gradient(-45deg,transparent 75%,#8b4513 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#d2691e;position:relative}.checkers-container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,215,0,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,215,0,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,215,0,.1) 0%,transparent 50%);pointer-events:none;z-index:0}.checkers-container>*{position:relative;z-index:1}.checkers-turn{margin-bottom:12px}.game-info{width:375px;max-width:375px;margin:0 auto 20px;padding:20px;background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');border-radius:10px;border:2px solid #8b4513;box-shadow:0 5px 15px #0003}.game-info h2{text-align:center;color:#8b4513;margin-bottom:15px;font-size:1.5rem}.game-mode-display{text-align:center;margin-bottom:15px}.mode-badge{display:inline-block;padding:6px 12px;background:linear-gradient(135deg,#8b4513,#d2691e);color:wheat;border-radius:20px;font-size:.9rem;font-weight:700;box-shadow:0 2px 5px #0003;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.timer-section{display:flex;justify-content:space-between;margin-bottom:20px}.timer{padding:10px;border-radius:8px;background:#ffffff1a;border:1px solid rgba(139,69,19,.3);text-align:center;min-width:120px}.timer span{font-weight:700;color:#8b4513;font-size:1rem}.game-controls{display:flex;gap:10px;justify-content:center}.reset-btn,.lobby-btn{padding:8px 16px;border:2px solid #8b4513;border-radius:6px;background:linear-gradient(135deg,wheat,#deb887);color:#8b4513;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:.9rem}.reset-btn:hover,.lobby-btn:hover{background:linear-gradient(135deg,#deb887,wheat);transform:translateY(-1px);box-shadow:0 3px 8px #0003}.checkers-board{display:grid;grid-template-columns:repeat(8,50px);border:4px solid #654321;background:#8b4513;width:400px;max-width:400px;min-width:400px;margin:0 auto;box-shadow:0 0 20px #00000080,inset 0 0 20px #0000004d;border-radius:8px;position:relative}.checkers-board:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#654321,#8b4513,#654321);border-radius:10px;z-index:-1}.checkers-cell{width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #222;cursor:pointer;transition:all .3s ease}.checkers-cell:has(.checker-piece){box-shadow:inset 0 2px 4px #0003,0 1px 3px #0000001a}.checkers-cell.white{background:linear-gradient(135deg,wheat,#deb887);cursor:default;border:1px solid #cd853f}.checkers-cell.black{background:linear-gradient(135deg,#654321,#8b4513);border:1px solid #654321}.checkers-cell.selected{border:3px solid #ff8c00;box-shadow:0 0 15px #ff8c0099,inset 0 0 10px #ff8c0033;transform:scale(1.05);transition:all .3s ease}.checkers-cell.move-option{outline:3px solid #1e90ff;z-index:2;box-shadow:0 0 15px #1e90ff99,inset 0 0 10px #1e90ff33;transform:scale(1.02);transition:all .3s ease}.checkers-btn-row{display:flex;gap:16px;margin-top:20px;justify-content:center}.winner-message{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px;width:375px;max-width:375px;background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');border-radius:15px;margin:20px auto;border:3px solid #8b4513;box-shadow:0 10px 30px #0000004d,inset 0 0 20px #ffd7001a;position:relative}.winner-message:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b4513,#d2691e,#8b4513);border-radius:17px;z-index:-1}.winner-message h2{color:#333;font-size:2rem;margin:0;text-align:center}.win-reason{color:#666;font-size:1rem;margin:8px 0 0;text-align:center;font-style:italic}.test-board-selector{margin-bottom:16px;display:flex;align-items:center;gap:8px;font-size:14px;padding:12px;background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain5" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain5)"/></svg>');border-radius:8px;border:2px solid #8b4513;box-shadow:0 3px 10px #0003,inset 0 0 5px #ffd7001a}.test-board-selector label{font-weight:700;color:#333}.test-board-selector select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:14px;cursor:pointer}.test-board-selector select:hover{border-color:#666}.test-board-selector select:focus{outline:none;border-color:#1e90ff;box-shadow:0 0 0 2px #1e90ff33}.timer-controls{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:16px;background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain2" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain2)"/></svg>');border-radius:12px;border:2px solid #8b4513;box-shadow:0 5px 15px #0003,inset 0 0 10px #ffd7001a}.time-limit-selector{display:flex;align-items:center;gap:8px;font-size:14px}.time-limit-selector label{font-weight:700;color:#333}.time-limit-selector select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:14px;cursor:pointer}.time-limit-selector select:disabled{background:#f5f5f5;cursor:not-allowed}.start-game-btn{padding:10px 20px;background:linear-gradient(135deg,#8b4513,#d2691e),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain6" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain6)"/></svg>');color:wheat;border:2px solid #654321;border-radius:8px;font-size:14px;cursor:pointer;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:0 4px 8px #0000004d,inset 0 1px #fff3;transition:all .3s ease}.start-game-btn:hover{background:linear-gradient(135deg,#d2691e,#8b4513),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain7" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain7)"/></svg>');transform:translateY(-2px);box-shadow:0 6px 12px #0006,inset 0 1px #fff3}.timers{display:flex;gap:32px;margin-bottom:16px;justify-content:center}.timer{display:flex;flex-direction:column;align-items:center;padding:16px 24px;border:3px solid #8b4513;border-radius:12px;background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain3" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain3)"/></svg>');min-width:120px;transition:all .3s ease;box-shadow:0 5px 15px #0003,inset 0 0 10px #ffd7001a;position:relative}.timer:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b4513,#d2691e,#8b4513);border-radius:14px;z-index:-1}.timer.active{border-color:#d2691e;background:linear-gradient(135deg,#ffe4b5,wheat),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain4" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain4)"/></svg>');box-shadow:0 0 20px #d2691e66,0 5px 15px #0003,inset 0 0 10px #ffd70033}.timer-label{font-size:12px;font-weight:700;color:#666;margin-bottom:4px;text-transform:uppercase}.timer-display{font-size:24px;font-weight:700;font-family:Courier New,monospace;color:#333}.timer.active .timer-display{color:#ff6b35}.timer .timer-display.warning{color:#f44;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.checkers-container,.game-info,.winner-message{width:350px;max-width:350px}.checkers-board{width:350px;max-width:350px;min-width:350px;grid-template-columns:repeat(8,43.75px)}.checkers-cell{width:43.75px;height:43.75px}}@media (max-width: 400px){.checkers-container,.game-info,.winner-message{width:320px;max-width:320px}.checkers-board{width:320px;max-width:320px;min-width:320px;grid-template-columns:repeat(8,40px)}.checkers-cell{width:40px;height:40px}}.game-lobby{min-height:100vh;background:linear-gradient(45deg,#8b4513 25%,transparent 25%),linear-gradient(-45deg,#8b4513 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8b4513 75%),linear-gradient(-45deg,transparent 75%,#8b4513 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#d2691e;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}.game-lobby:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,215,0,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,215,0,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,215,0,.1) 0%,transparent 50%);pointer-events:none;z-index:0}.lobby-container{background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');border-radius:15px;padding:40px;width:375px;max-width:375px;min-width:375px;border:3px solid #8b4513;box-shadow:0 10px 30px #0000004d,inset 0 0 20px #ffd7001a;position:relative;z-index:1}.lobby-container:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b4513,#d2691e,#8b4513);border-radius:17px;z-index:-1}.lobby-title{text-align:center;color:#8b4513;font-size:2.5rem;margin-bottom:30px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.lobby-section{margin-bottom:30px;padding:20px;background:#ffffff1a;border-radius:10px;border:1px solid rgba(139,69,19,.3)}.lobby-section h3{color:#8b4513;margin-bottom:15px;font-size:1.3rem;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.game-mode-selector{display:flex;flex-direction:column;gap:12px}.mode-option{display:flex;align-items:center;cursor:pointer;padding:12px;border-radius:8px;border:2px solid transparent;transition:all .3s ease;background:#ffffff0d;position:relative}.mode-option:hover{background:#ffffff1a;border-color:#8b45134d}.mode-option input[type=radio]{display:none}.mode-option input[type=radio]:checked+.mode-label{color:#8b4513}.mode-option input[type=radio]:checked+.mode-label .mode-icon{transform:scale(1.2)}.mode-option input[type=radio]:checked~.mode-label{color:#8b4513}.mode-option input[type=radio]:checked~.mode-label .mode-icon{transform:scale(1.2)}.mode-option input[type=radio]:checked{background:linear-gradient(135deg,#ffd70033,#d2691e33);border-color:#d2691e;box-shadow:0 0 15px #d2691e4d}.mode-option input[type=radio]:checked+.mode-label:before{content:"✓";position:absolute;right:15px;top:50%;transform:translateY(-50%);background:#d2691e;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 5px #0003}.mode-option:has(input[type=radio]:checked){background:linear-gradient(135deg,#ffd70026,#d2691e26);border-color:#d2691e;box-shadow:0 0 15px #d2691e4d;transform:translateY(-2px)}.mode-label{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;transition:all .3s ease}.mode-icon{font-size:1.5rem;transition:transform .3s ease}.mode-text{display:flex;flex-direction:column}.mode-text strong{font-size:1.1rem;margin-bottom:2px}.mode-text small{color:#666;font-size:.9rem}.time-selector{display:flex;flex-direction:column;gap:8px}.time-selector label{font-weight:700;color:#8b4513}.time-selector select{padding:8px 12px;border:2px solid #8b4513;border-radius:6px;background:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.time-selector select:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.time-selector select:focus{outline:none;border-color:#d2691e;box-shadow:0 0 0 3px #d2691e33}.disabled-note{color:#666;font-style:italic;font-size:.9rem}.test-board-selector{display:flex;flex-direction:column;gap:8px}.test-board-selector label{font-weight:700;color:#8b4513}.test-board-selector select{padding:8px 12px;border:2px solid #8b4513;border-radius:6px;background:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease}.test-board-selector select:focus{outline:none;border-color:#d2691e;box-shadow:0 0 0 3px #d2691e33}.advanced-toggle{background:none;border:none;color:#8b4513;font-size:1rem;cursor:pointer;padding:8px 0;font-weight:700;transition:color .3s ease}.advanced-toggle:hover{color:#d2691e}.advanced-options{margin-top:15px;padding:15px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(139,69,19,.2)}.option-group{display:flex;flex-direction:column;gap:10px}.checkbox-option{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 0}.checkbox-option input[type=checkbox]{width:16px;height:16px;accent-color:#8b4513}.checkbox-option span{color:#8b4513;font-weight:500}.lobby-actions{display:flex;gap:15px;justify-content:center;margin-top:30px}.btn-primary,.btn-secondary{padding:12px 24px;border:2px solid #8b4513;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-shadow:1px 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 8px #0003,inset 0 1px #fff3}.btn-primary{background:linear-gradient(135deg,#8b4513,#d2691e),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain2" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain2)"/></svg>');color:wheat}.btn-secondary{background:linear-gradient(135deg,wheat,#deb887),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain3" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain3)"/></svg>');color:#8b4513}.btn-primary:hover{background:linear-gradient(135deg,#d2691e,#8b4513),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain4" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain4)"/></svg>');transform:translateY(-2px);box-shadow:0 6px 12px #0000004d,inset 0 1px #fff3}.btn-secondary:hover{background:linear-gradient(135deg,#deb887,wheat),url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain5" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23CD853F" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="%23CD853F" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="%23CD853F" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain5)"/></svg>');transform:translateY(-2px);box-shadow:0 6px 12px #0000004d,inset 0 1px #fff3}.mode-info{margin-top:20px;padding:15px;background:#8b45131a;border-radius:8px;border-left:4px solid #8b4513}.mode-info p{color:#8b4513;font-style:italic;margin:0;text-align:center}@media (max-width: 768px){.lobby-container{padding:20px;margin:10px auto;width:350px;max-width:350px;min-width:350px}.lobby-title{font-size:2rem}.lobby-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}@media (max-width: 400px){.lobby-container{width:320px;max-width:320px;min-width:320px;padding:15px}}.mode-option.selected{background:linear-gradient(135deg,#ffd70026,#d2691e26);border-color:#d2691e;box-shadow:0 0 15px #d2691e4d;transform:translateY(-2px);position:relative}.mode-option.selected .mode-label{color:#8b4513}.mode-option.selected .mode-icon{transform:scale(1.2)}.mode-option.selected .mode-label:after{content:"✓";position:absolute;right:15px;top:50%;transform:translateY(-50%);background:#d2691e;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 5px #0003}