.status-bar{display:flex;align-items:stretch;gap:0;width:60%;padding:5px;margin-bottom:1rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;font-size:1.1rem;overflow:hidden;box-sizing:border-box}.player-info{flex:1;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.5rem 1rem;border-radius:10px;border:3px solid transparent;transition:all .3s}.player-info.active{font-weight:700}.player-info.vanilla{color:var(--vanilla-player-text)}.player-info.chocolate{color:var(--chocolate-player-text)}.player-info.vanilla.active{background:#fff3e8;border-color:var(--vanilla-player-text)}.player-info.chocolate.active{background:#f0e0d0;border-color:var(--chocolate-player-text)}.mini-donut{width:40px;height:40px;object-fit:contain;flex-shrink:0}.player-stats{display:flex;flex-direction:column;align-items:center}.player-stats strong{font-size:1.3rem}.clock{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;min-width:3ch;text-align:center}.clock-critical{color:#d32f2f;animation:clockPulse .5s ease-in-out infinite}@keyframes clockPulse{0%,to{opacity:1}50%{opacity:.4}}.player-name{font-size:.75rem;font-weight:600;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-indicator{font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:6px;width:100%;text-align:center}.connection-indicator.reconnecting{background:#fff3cd;color:#856404}.connection-indicator.disconnected{background:#f8d7da;color:#721c24}@media(max-width:480px){.status-bar{font-size:.9rem;border-radius:8px;width:100%}.mini-donut{width:30px;height:30px}.player-info{padding:.4rem .5rem;gap:.8rem;border-radius:7px}}@media(min-width:481px)and (max-width:1024px){.status-bar{font-size:1rem}.mini-donut{width:38px;height:38px}}@media(min-width:1025px)and (max-width:1599px){.status-bar{font-size:.95rem}.mini-donut{width:35px;height:35px}.player-info{padding:.4rem .9rem}}.donut{position:absolute;inset:12%;width:76%;height:76%;z-index:2;transition:transform .4s ease;transform-style:preserve-3d;object-fit:contain;pointer-events:none}.donut.placing{animation:donutPlace .35s ease-out}@keyframes donutPlace{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.1) rotate(10deg)}to{transform:scale(1) rotate(0)}}.donut.flipping{animation:donutFlip .5s ease-in-out}@keyframes donutFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(.9)}to{transform:rotateY(180deg) scale(1)}}.cell{position:relative;width:var(--cell-size);height:var(--cell-size);cursor:pointer;transition:transform .1s;border-radius:9px}.cell .bg-base{position:absolute;inset:0;background:#fff;border-radius:inherit}.cell .bg-triangle{position:absolute;inset:0;border-radius:inherit}.cell[data-dir=N] .bg-triangle{background:linear-gradient(to right,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=NE] .bg-triangle{background:linear-gradient(to bottom right,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=E] .bg-triangle{background:linear-gradient(to top,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=SE] .bg-triangle{background:linear-gradient(to top right,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=S] .bg-triangle{background:linear-gradient(to left,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=SW] .bg-triangle{background:linear-gradient(to top left,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=W] .bg-triangle{background:linear-gradient(to bottom,var(--primary-light) 50%,transparent 50%)}.cell[data-dir=NW] .bg-triangle{background:linear-gradient(to bottom left,var(--primary-light) 50%,transparent 50%)}.valid-move-img{position:absolute;inset:10%;z-index:3;width:80%;height:80%;object-fit:contain;filter:saturate(.5) brightness(1.15);animation:validMovePulse 1.2s ease-in-out infinite;pointer-events:none}@keyframes pulse{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}@keyframes validMovePulse{0%,to{opacity:.08;transform:scale(.95)}50%{opacity:.2;transform:scale(1)}}.cell.last-move:after{content:"";position:absolute;inset:0;border:4px solid var(--last-move-highlight);border-radius:inherit;z-index:5;pointer-events:none;box-shadow:0 0 0 2px var(--last-move-glow)}.dir-preview-img{position:absolute;inset:18%;z-index:3;width:64%;height:64%;object-fit:contain;opacity:.12;filter:saturate(.5) brightness(1.15);pointer-events:none}.cell.win-cell .donut{animation:winPulse .6s ease-in-out infinite alternate}@keyframes winPulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.cell.accent:after{content:"";position:absolute;inset:0;border:4px solid var(--accent-highlight);border-radius:inherit;z-index:5;pointer-events:none;animation:accentPulse 1.2s ease-in-out infinite;box-shadow:0 0 0 2px var(--accent-glow)}@keyframes accentPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.cell.group-cell .donut{animation:winPulse .6s ease-in-out infinite alternate}.mystery-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;animation:mysteryPulse 1.5s ease-in-out infinite}.mystery-box-icon{width:55%;height:55%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}@keyframes mysteryPulse{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.15) rotate(5deg);opacity:1}}.cell--blocked{cursor:not-allowed}.cell--blocked .bg-base{background:#2a2a2a}.blocked-overlay{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(0,0,0,.35) 4px,rgba(0,0,0,.35) 6px);z-index:2}.board-container{position:relative;margin:.5rem 0}@media(max-width:480px){.board-container{margin:.25rem 0}}@media(min-width:1025px)and (max-width:1599px){.board-container{margin:.2rem 0}}.board{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);gap:2px}.tile{display:grid;grid-template-columns:repeat(3,var(--cell-size));grid-template-rows:repeat(3,var(--cell-size));gap:var(--board-gap);background:var(--secondary);padding:var(--board-gap);border-radius:10px;box-shadow:0 4px 20px #00000026}.board.locked .cell{cursor:not-allowed}.board.locked .cell.valid-move:before{display:none}.settings-backdrop{position:fixed;inset:0;background:#000000bf;z-index:200;display:flex;justify-content:center;align-items:center;animation:settingsFadeIn .2s ease-out}@keyframes settingsFadeIn{0%{opacity:0}to{opacity:1}}.settings-modal{position:relative;background:#fff;border-radius:16px;padding:2.5rem 2.5rem 2rem;width:420px;max-width:90vw;box-shadow:0 8px 32px #00000040;animation:settingsPopIn .25s ease-out}@keyframes settingsPopIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:600px){.settings-modal{padding:1rem}}.settings-close{position:absolute;top:.6rem;right:.8rem;background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:.2rem .5rem;line-height:1;border-radius:6px}.settings-close:hover{color:#333;background:#f0f0f0;transform:none;box-shadow:none}.settings-title{font-size:1.3rem;font-weight:700;margin-bottom:1.2rem;color:#333}.settings-row{display:flex;gap:.8rem;margin-bottom:.6rem}.settings-section--half{flex:1;min-width:0;margin-bottom:0}.settings-section{margin-bottom:1.2rem}.settings-label{display:block;font-size:.8rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}.settings-select{width:100%;padding:.5rem .7rem;border-radius:8px;border:1px solid #ddd;font-size:.95rem;background:#fff;color:#333;cursor:pointer}.settings-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #e91e8c26}.settings-toggle{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;font-size:.95rem;color:#444;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-toggle input{display:none}.toggle-track{position:relative;width:40px;height:22px;background:#ccc;border-radius:11px;transition:background .2s;flex-shrink:0}.toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.settings-toggle input:checked+.toggle-track{background:var(--primary)}.settings-toggle input:checked+.toggle-track .toggle-thumb{transform:translate(18px)}.settings-tutorial-link{background:none;border:none;color:#999;font-size:.85rem;font-weight:500;padding:.4rem;margin-top:.3rem;text-decoration:underline;cursor:pointer;width:100%;text-align:center}.settings-tutorial-link:hover{color:#666;transform:none;box-shadow:none}.settings-new-game{width:100%;padding:.7rem;font-size:1rem;margin-top:.5rem}.time-control-chips{display:flex;gap:.4rem}.time-chip{flex:1;padding:.45rem .3rem;border:1.5px solid #ddd;border-radius:8px;background:#fff;color:#555;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}.time-chip:hover{border-color:var(--primary);color:var(--primary);transform:none;box-shadow:none}.time-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.settings-version{text-align:center;font-size:.7rem;color:#bbb;margin-top:.8rem}.settings-version a{color:#bbb;text-decoration:underline}.settings-version a:hover{color:#888}.modal-backdrop{position:fixed;inset:0;background:#000000bf;z-index:150;display:flex;justify-content:center;align-items:center;animation:modalFadeIn .3s ease-out;cursor:pointer}.modal-backdrop.exiting{animation:modalFadeOut .4s ease-out forwards}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeOut{0%{opacity:1}to{opacity:0}}.modal-content{background:#fff;border-radius:24px;padding:2.5rem 3rem 3rem;text-align:center;box-shadow:0 12px 48px #00000059;animation:modalPopIn .4s cubic-bezier(.34,1.56,.64,1);max-width:90vw;width:480px;cursor:default;position:relative;z-index:2}.modal-backdrop.exiting .modal-content{animation:modalPopOut .4s ease-out forwards}@keyframes modalPopIn{0%{transform:scale(.5) translateY(-30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes modalPopOut{0%{transform:scale(1) translateY(0);opacity:1}to{transform:scale(.8) translateY(20px);opacity:0}}.modal-content.size-large{padding:3rem 3.5rem;min-width:320px}.modal-content.variant-default,.modal-content.variant-pink{border:4px solid var(--primary)}.modal-content.variant-beneficial{border:4px solid #4caf50}.modal-content.variant-harmful{border:4px solid #f44336}.modal-content.variant-winner-vanilla,.modal-content.variant-winner-chocolate,.modal-content.variant-draw{border:none}.modal-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;animation:modalIconBounce .6s ease-out}.modal-icon-emoji{font-size:5rem}.modal-icon>img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}.modal-content.size-large .modal-icon>img{width:133px;height:133px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}@keyframes modalIconBounce{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.modal-title{font-size:2.2rem;font-weight:700;margin-bottom:1rem;color:#333}.modal-content.size-large .modal-title{font-size:2.6rem;margin-bottom:.6rem}.modal-title.variant-beneficial{color:#2e7d32}.modal-title.variant-harmful{color:#c62828}.modal-title.variant-pink,.modal-title.variant-default{color:var(--primary)}.modal-title.variant-winner-vanilla{color:var(--vanilla-player-text)}.modal-title.variant-winner-chocolate{color:var(--chocolate-player-text)}.modal-title.variant-draw{color:#666}.modal-title.ultimate-win{animation:ultimateGlow 2s ease-in-out infinite alternate;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(255,215,0,.4),0 2px 4px rgba(0,0,0,.3)}.modal-content.ultimate-win{border:4px solid gold;box-shadow:0 12px 48px #00000059,0 0 40px #ffd70066,inset 0 0 20px #ffd7001a;animation:ultimateBorderGlow 2s ease-in-out infinite alternate}@keyframes ultimateGlow{0%{text-shadow:0 0 15px rgba(255,215,0,.6),0 0 30px rgba(255,215,0,.3),0 2px 4px rgba(0,0,0,.3);transform:scale(1)}to{text-shadow:0 0 25px rgba(255,215,0,1),0 0 50px rgba(255,215,0,.6),0 2px 4px rgba(0,0,0,.3);transform:scale(1.02)}}@keyframes ultimateBorderGlow{0%{box-shadow:0 12px 48px #00000059,0 0 30px #ffd7004d,inset 0 0 15px #ffd70014}to{box-shadow:0 12px 48px #00000059,0 0 50px #ffd70099,inset 0 0 25px #ffd70026}}.modal-description{font-size:1.15rem;line-height:1.6;color:#555;margin:0}.modal-content.size-large .modal-description{color:#666;margin-bottom:1.5rem}.modal-button{margin-top:1.5rem}.modal-button .btn-primary{padding:.75rem 2.5rem;font-size:1.1rem}.confetti-container{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.confetti-piece{position:absolute;top:-40px;opacity:1;object-fit:contain;animation:confettiFall linear forwards}.confetti-piece.ultimate{animation:confettiFallUltimate linear forwards}@keyframes confettiFall{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}80%{opacity:1}to{transform:translateY(100vh) translate(var(--drift)) rotate(var(--spin));opacity:0}}@keyframes confettiFallUltimate{0%{transform:translateY(0) translate(0) rotate(0) scale(1);opacity:1}85%{opacity:1}to{transform:translateY(100vh) translate(var(--drift)) rotate(var(--spin)) scale(.8);opacity:0}}@media(max-width:520px){.modal-content{width:calc(100vw - 2rem);min-width:unset;padding:1.5rem 1.2rem 1.8rem}.modal-content.size-large{padding:1.5rem 1.2rem}.modal-content.size-normal{padding:1.2rem 1rem}.modal-icon{margin:0 auto .5rem}.modal-icon>img{width:72px;height:72px}.modal-content.size-large .modal-icon>img{width:80px;height:80px}.modal-icon-emoji{font-size:2.5rem}.modal-title{font-size:1.4rem;margin-bottom:.5rem}.modal-content.size-large .modal-title{font-size:1.6rem;margin-bottom:.4rem}.modal-content.size-normal .modal-title{font-size:1.2rem}.modal-description{font-size:.9rem;line-height:1.4}.modal-content.size-normal .modal-description{font-size:.85rem}.modal-content.size-large .modal-description{margin-bottom:.75rem}.modal-button{margin-top:1rem}.modal-button .btn-primary{padding:.5rem 1.8rem;font-size:.95rem}.confetti-piece{max-width:30px!important;max-height:30px!important}}.donut-pair{display:flex;justify-content:center;gap:.5rem}.rematch-area{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem}.rematch-buttons-row{display:flex;gap:.5rem;width:100%}.rematch-buttons-row .btn-primary{flex:1}.rematch-status{font-size:.95rem;opacity:.9;margin:0 0 .5rem}.rematch-waiting{animation:rematch-pulse 1.5s ease-in-out infinite}@keyframes rematch-pulse{0%,to{opacity:.6}50%{opacity:1}}.rematch-link{display:block;background:none;border:none;color:#999;font-size:.85rem;font-weight:600;cursor:pointer;padding:.5rem;margin-top:.25rem}.rematch-link:hover{color:#666;transform:none;box-shadow:none}.tutorial-backdrop{position:fixed;inset:0;background:#000000bf;z-index:150;display:flex;justify-content:center;align-items:center;animation:tutorialFadeIn .25s ease-out}@keyframes tutorialFadeIn{0%{opacity:0}to{opacity:1}}.tutorial-close{position:fixed;top:.8rem;right:.8rem;z-index:160;background:none;border:none;font-size:2rem;color:#999;cursor:pointer;padding:.2rem .6rem;line-height:1;border-radius:8px}.tutorial-close:hover{color:#333;background:#0000000d;transform:none;box-shadow:none}.tutorial-close--game{color:#ffffffb3}.tutorial-close--game:hover{color:#fff;background:#ffffff26}.tutorial-panel{position:relative;background:#fff;border-radius:20px;padding:2rem;width:380px;max-width:92vw;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px #0000004d;animation:tutorialPopIn .25s ease-out;text-align:center}@keyframes tutorialPopIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.tutorial-panel-close{position:absolute;top:.8rem;right:.8rem;background:none;border:none;font-size:1.8rem;color:#999;cursor:pointer;padding:.2rem .5rem;line-height:1;border-radius:6px;transition:all .2s}.tutorial-panel-close:hover{color:#333;background:#f0f0f0;transform:none;box-shadow:none}.tutorial-panel-title{font-size:1.4rem;font-weight:700;color:#333;margin-bottom:.3rem}.tutorial-panel-subtitle{font-size:.9rem;color:#888;margin-bottom:1.2rem}.tutorial-chapters{display:flex;flex-direction:column;gap:.6rem}.tutorial-rules-link{display:inline-block;margin-top:.8rem;color:#888;font-size:.9rem;text-decoration:none;transition:color .15s}.tutorial-rules-link:hover{color:#e8609c}.tutorial-chapter-card{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;background:#fafafa;border:2px solid #eee;border-radius:12px;cursor:pointer;text-align:left;transition:all .15s}.tutorial-chapter-card:hover{border-color:var(--primary);background:#fff0f5;transform:none;box-shadow:0 2px 8px #e91e8c1f}.tutorial-chapter-name{font-weight:700;font-size:1.05rem;color:#333}.tutorial-chapter-desc{font-size:.9rem;color:#888}.tutorial-game{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%;max-width:600px;padding:1rem;animation:tutorialPopIn .25s ease-out}.tutorial-header{display:flex;align-items:center;gap:.8rem;color:#fff}.tutorial-header-name{font-size:1.1rem;font-weight:700}.tutorial-header-step{font-size:.85rem;opacity:.7}.tutorial-game .board-container{--cell-size: min(13vmin, 90px)}.tutorial-bubble{background:#fff;border-radius:16px;padding:1rem 1.2rem;width:100%;max-width:480px;box-shadow:0 4px 20px #00000026;animation:tutorialSlideUp .25s ease-out;text-align:center}@keyframes tutorialSlideUp{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-bubble-text{font-size:.9rem;color:#333;line-height:1.5;margin-bottom:0}.tutorial-bubble-btn{margin-top:.8rem;padding:.5rem 1.8rem;font-size:.9rem}.tutorial-complete-text{font-size:.95rem;color:#666;margin-bottom:1.2rem}.tutorial-complete-actions{display:flex;flex-direction:column;gap:.5rem}.tutorial-complete-btn{width:100%;padding:.6rem 1rem;font-size:.95rem}@media(max-width:480px){.tutorial-game .board-container{--cell-size: 12vmin}.tutorial-panel{padding:1.5rem;width:95vw}.tutorial-bubble{padding:.8rem 1rem}.tutorial-bubble-text{font-size:.85rem}}.powerup-animation{display:flex;justify-content:center;align-items:center;width:91px;height:91px;margin:0 auto}.powerup-animation-cell{position:relative;width:91px;height:91px;border-radius:12px;overflow:hidden}.powerup-animation-cell.chaos{border:3px solid rgba(100,150,255,.4);box-shadow:0 2px 12px #6496ff33}.powerup-animation-cell .bg-base{position:absolute;inset:0;background:#fff;border-radius:inherit}.powerup-animation-cell .bg-triangle{position:absolute;inset:0;border-radius:inherit;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.powerup-animation-cell[data-dir=N] .bg-triangle{background:linear-gradient(to right,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=NE] .bg-triangle{background:linear-gradient(to bottom right,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=E] .bg-triangle{background:linear-gradient(to top,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=SE] .bg-triangle{background:linear-gradient(to top right,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=S] .bg-triangle{background:linear-gradient(to left,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=SW] .bg-triangle{background:linear-gradient(to top left,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=W] .bg-triangle{background:linear-gradient(to bottom,var(--primary-light) 50%,transparent 50%)}.powerup-animation-cell[data-dir=NW] .bg-triangle{background:linear-gradient(to bottom left,var(--primary-light) 50%,transparent 50%)}.powerup-animation.compare{width:auto;gap:8px;flex-direction:row}.powerup-animation.compare .powerup-animation-cell{width:72px;height:72px;border-radius:10px}.compare-arrow{font-size:24px;font-weight:700;color:var(--text-color, #333);display:flex;align-items:center;-webkit-user-select:none;user-select:none}.powerup-animation-cell.mischief-cell{border:3px solid rgba(100,150,255,.4);box-shadow:0 2px 12px #6496ff33}.powerup-animation-cell.blocked .bg-base{background:#2a2a2a}.powerup-animation-cell .blocked-overlay{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(0,0,0,.35) 4px,rgba(0,0,0,.35) 6px);z-index:2}@media(max-width:520px){.powerup-animation,.powerup-animation-cell{width:55px;height:55px}.powerup-animation.compare{width:auto;height:auto}.powerup-animation.compare .powerup-animation-cell{width:52px;height:52px}.compare-arrow{font-size:18px}}.cell-highlight{font-weight:700;color:#333;background:#e91e8c1a;padding:.1rem .4rem;border-radius:4px;font-family:Courier New,monospace}.modal-icon>img.modal-donut{width:91px;height:91px}@media(max-width:520px){.modal-icon>img.modal-donut{width:55px;height:55px}}.lobby-modal{text-align:center}.lobby-input{width:100%;padding:.6rem 1rem;border-radius:8px;border:1px solid #ddd;font-family:SF Mono,Fira Code,Cascadia Code,Consolas,Courier New,monospace;font-size:1.6rem;font-weight:800;background:#f8f8f8;color:var(--primary);box-sizing:border-box;text-align:center}.lobby-input::placeholder{color:#ccc}.lobby-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #e91e8c26}.lobby-code-input{text-align:center;font-family:SF Mono,Fira Code,Cascadia Code,Consolas,Courier New,monospace;font-size:1.6rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--primary);background:#f8f8f8;padding:.6rem 1rem}.lobby-waiting{margin:1rem 0}.lobby-subtitle{font-size:.85rem;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:.04em;margin-bottom:.5rem}.lobby-code{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.lobby-code-text{font-family:SF Mono,Fira Code,Cascadia Code,Consolas,Courier New,monospace;font-size:1.6rem;font-weight:800;letter-spacing:.3em;color:var(--primary);background:#f8f8f8;padding:.6rem 1rem;border-radius:8px;border:1px solid #ddd;flex:1;text-align:center}.lobby-code-action{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:8px;border:1.5px solid #ddd;background:#fff;color:#777;cursor:pointer;transition:all .2s;flex-shrink:0;font-size:0;line-height:0}.lobby-code-action svg{display:block}.lobby-code-action:hover{color:var(--primary);border-color:var(--primary);background:#fdf2f8;transform:none;box-shadow:none}@media(max-width:480px){.lobby-code-text{font-size:1.4rem;letter-spacing:.2em;padding:.5rem .8rem}.lobby-code-action{width:42px;height:42px}}.lobby-spinner-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1rem 0}.lobby-spinner{width:20px;height:20px;flex-shrink:0;border:3px solid #eee;border-top-color:var(--primary);border-radius:50%;animation:lobbySpin .8s linear infinite}@keyframes lobbySpin{to{transform:rotate(360deg)}}.lobby-waiting-text{font-size:.95rem;color:#888;margin:0}.lobby-error{color:#d32f2f;font-size:.85rem;margin:.5rem 0;font-weight:600}.lobby-buttons-row{display:flex;gap:.5rem;margin-top:1rem}.lobby-buttons-row .btn-primary{flex:1}.btn-outline{background:#fff!important;color:var(--primary)!important;border:2px solid var(--primary)!important}.btn-outline:hover{background:#fdf2f8!important}.lobby-back-btn{display:block;width:100%;background:none;border:none;color:#999;font-size:.85rem;font-weight:600;cursor:pointer;padding:.5rem;margin-top:.5rem}.lobby-back-btn:hover{color:#666;transform:none;box-shadow:none}.emoji-picker-container{position:fixed;bottom:16px;right:16px;z-index:100;display:flex;flex-direction:column;align-items:flex-end}.emoji-picker-trigger{width:50px;height:50px;border-radius:50%;background:#fff;border:none;font-size:1.6rem;cursor:pointer;box-shadow:0 2px 10px #0000001f;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s;line-height:1}.emoji-picker-trigger:hover{box-shadow:0 3px 14px #0000002e;transform:translateY(-1px)}.emoji-picker-trigger:active{transform:translateY(0)}.emoji-picker-trigger.emoji-picker-cooldown{opacity:.5;cursor:not-allowed;pointer-events:none}.emoji-picker-dropdown{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;border-radius:12px;padding:10px;margin-bottom:8px;box-shadow:0 4px 20px #00000026;animation:emojiDropdownIn .15s ease-out}@keyframes emojiDropdownIn{0%{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.emoji-picker-item{width:48px;height:48px;border-radius:8px;background:transparent;border:none;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s}.emoji-picker-item:hover{background:#f3e8ff;transform:none;box-shadow:none}.emoji-picker-item:active{background:#e8d5f5;transform:none}.emoji-animation{position:fixed;bottom:70px;right:16px;width:50px;text-align:center;font-size:3rem;z-index:1000;animation:emoji-pop 2s ease-out forwards;pointer-events:none}@media(max-width:600px){.emoji-animation{font-size:4.5rem;right:8px;width:80px}}@keyframes emoji-pop{0%{opacity:0;transform:scale(.3) rotate(0)}10%{opacity:1;transform:scale(1.2) rotate(0)}15%{transform:scale(1) rotate(-8deg)}20%{transform:scale(1) rotate(6deg)}25%{transform:scale(1) rotate(-4deg)}30%{opacity:1;transform:scale(1) rotate(0)}70%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(.8) rotate(0)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--cell-size: min(12vmin, 97px);--board-gap: 6px;--primary: #e91e8c;--primary-light: #f8c8e0;--secondary: #4fc3f7;--vanilla-player-text: #c06030;--chocolate-player-text: #5d3a1a;--next-move-preview: rgba(220, 40, 40, .5);--valid-move-vanilla: rgba(216, 150, 60, .55);--valid-move-chocolate: rgba(140, 70, 20, .55);--accent-highlight: #FFB300;--accent-glow: rgba(255, 179, 0, .35)}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse at 20% 0%,#fce4ec 0%,transparent 50%),radial-gradient(ellipse at 80% 0%,#fff3e0 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,#e8f5e9 0%,transparent 50%),linear-gradient(135deg,#fdf2f8,#fef9ef 40%,#f0fdf4);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle,rgba(233,30,140,.25) 1.2px,transparent 1.2px);background-size:24px 24px;pointer-events:none;z-index:0}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:.5rem;width:100%;max-width:860px}button{padding:.5rem 1.2rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}button:hover{transform:translateY(-1px);box-shadow:0 3px 8px #00000026}button:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff}.settings-toggler{position:fixed;top:.8rem;left:.8rem;z-index:50;width:52px;height:52px;border-radius:50%;background:#fff;color:#666;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 10px #0000001f;transition:all .2s;line-height:0}.settings-toggler svg{display:block}.settings-toggler:hover{color:var(--primary);box-shadow:0 3px 14px #0000002e}.waiting-indicator{font-size:.9rem;font-weight:600;color:#888;margin-top:.4rem}.waiting-dots:after{content:"";animation:waitingDots 1.5s steps(4,end) infinite}@keyframes waitingDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.app-footer{margin-top:1.5rem;padding:.8rem 1rem;text-align:center;font-size:.65rem;line-height:1.5;color:#999;width:100%}.app-footer p+p{margin-top:.25rem}.app-footer a{color:#888;text-decoration:underline}@media(max-width:480px){:root{--cell-size: calc((100vw - 52px) / 6);--board-gap: 4px}.app{padding:.15rem}}@media(min-width:481px)and (max-width:768px){:root{--cell-size: min(10vmin, 80px)}.app{padding:.3rem}}@media(min-width:769px)and (max-width:1919px){:root{--cell-size: 108px !important;--board-gap: 6px !important}.app{padding:.2rem}body{justify-content:center}}@media(min-width:1920px){:root{--cell-size: 140px}.app{max-width:1200px}body{justify-content:center}}[data-theme=winter] body{background:radial-gradient(ellipse at 30% 10%,rgba(159,168,218,.2) 0%,transparent 50%),linear-gradient(165deg,#283593,#1a237e,#0d1b5e)}[data-theme=winter] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:%23fff;stroke-linecap:round%7D%3C/style%3E%3C/defs%3E%3C!-- snowflake 1 (large) --%3E%3Cg transform='translate(40,35)' opacity='.12'%3E%3Cline x1='0' y1='-12' x2='0' y2='12' class='s' stroke-width='1.5'/%3E%3Cline x1='-10.4' y1='-6' x2='10.4' y2='6' class='s' stroke-width='1.5'/%3E%3Cline x1='-10.4' y1='6' x2='10.4' y2='-6' class='s' stroke-width='1.5'/%3E%3Cline x1='-3' y1='-8' x2='3' y2='-8' class='s' stroke-width='0.8'/%3E%3Cline x1='-3' y1='8' x2='3' y2='8' class='s' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23fff' opacity='.3'/%3E%3C/g%3E%3C!-- mountain --%3E%3Cg transform='translate(130,30)' opacity='.08'%3E%3Cpath d='M-18,15 L-5,-10 L0,-4 L8,-15 L20,15 Z' fill='%235C6BC0'/%3E%3Cpath d='M-5,-10 L-2,-5 L0,-4' fill='none' stroke='%23fff' stroke-width='0.8'/%3E%3Cpath d='M8,-15 L5,-8 L0,-4' fill='none' stroke='%23fff' stroke-width='0.8'/%3E%3C/g%3E%3C!-- snowflake 2 --%3E%3Cg transform='translate(190,70)' opacity='.10'%3E%3Cline x1='0' y1='-9' x2='0' y2='9' class='s' stroke-width='1.2'/%3E%3Cline x1='-7.8' y1='-4.5' x2='7.8' y2='4.5' class='s' stroke-width='1.2'/%3E%3Cline x1='-7.8' y1='4.5' x2='7.8' y2='-4.5' class='s' stroke-width='1.2'/%3E%3C/g%3E%3C!-- pine tree --%3E%3Cg transform='translate(65,110)' opacity='.09'%3E%3Cpath d='M0,-14 L-8,-2 L-4,-2 L-10,8 L-5,8 L-12,16 L12,16 L5,8 L10,8 L4,-2 L8,-2 Z' fill='%231B5E20'/%3E%3Crect x='-2' y='16' width='4' height='5' fill='%234E342E'/%3E%3Ccircle cx='-3' cy='4' r='1' fill='%23F44336'/%3E%3Ccircle cx='4' cy='10' r='1' fill='%23FFD600'/%3E%3Ccircle cx='-1' cy='13' r='1' fill='%232196F3'/%3E%3C/g%3E%3C!-- snowman --%3E%3Cg transform='translate(160,150)' opacity='.09'%3E%3Ccircle cx='0' cy='8' r='8' fill='%23E8EAF6'/%3E%3Ccircle cx='0' cy='-4' r='6' fill='%23E8EAF6'/%3E%3Ccircle cx='0' cy='-14' r='5' fill='%23E8EAF6'/%3E%3Ccircle cx='-2' cy='-15' r='0.8' fill='%23333'/%3E%3Ccircle cx='2' cy='-15' r='0.8' fill='%23333'/%3E%3Cpath d='M-1,-13 L2,-12.5' stroke='%23FF6D00' stroke-width='1.2' stroke-linecap='round'/%3E%3Crect x='-6' y='-20' width='12' height='2' rx='1' fill='%235C6BC0'/%3E%3Crect x='-4' y='-24' width='8' height='4' rx='1' fill='%235C6BC0'/%3E%3C/g%3E%3C!-- snowflake 3 --%3E%3Cg transform='translate(30,175)' opacity='.08'%3E%3Cline x1='0' y1='-8' x2='0' y2='8' class='s' stroke-width='1'/%3E%3Cline x1='-7' y1='-4' x2='7' y2='4' class='s' stroke-width='1'/%3E%3Cline x1='-7' y1='4' x2='7' y2='-4' class='s' stroke-width='1'/%3E%3C/g%3E%3C!-- ice crystal --%3E%3Cg transform='translate(110,190)' opacity='.07'%3E%3Cpath d='M0,-8 L5,-3 L5,3 L0,8 L-5,3 L-5,-3 Z' fill='none' stroke='%2380DEEA' stroke-width='1'/%3E%3Cpath d='M0,-4 L2.5,-1.5 L2.5,1.5 L0,4 L-2.5,1.5 L-2.5,-1.5 Z' fill='%2380DEEA' opacity='.3'/%3E%3C/g%3E%3C!-- snow dots --%3E%3Ccircle cx='95' cy='50' r='1.5' fill='%23fff' opacity='.10'/%3E%3Ccircle cx='175' cy='25' r='1' fill='%23fff' opacity='.08'/%3E%3Ccircle cx='15' cy='90' r='1.3' fill='%23fff' opacity='.07'/%3E%3Ccircle cx='200' cy='190' r='1.2' fill='%23fff' opacity='.06'/%3E%3Ccircle cx='85' cy='165' r='1' fill='%23fff' opacity='.08'/%3E%3C/svg%3E");background-size:220px 220px;opacity:1}[data-theme=summer] body{background:radial-gradient(ellipse at 70% 90%,rgba(255,143,0,.15) 0%,transparent 50%),linear-gradient(165deg,#0277bd,#0288d1 40%,#039be5)}[data-theme=summer] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3C!-- sun --%3E%3Cg transform='translate(40,35)' opacity='.12'%3E%3Ccircle cx='0' cy='0' r='10' fill='%23FFD600'/%3E%3Cline x1='0' y1='-16' x2='0' y2='-12' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='0' y1='12' x2='0' y2='16' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='-16' y1='0' x2='-12' y2='0' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='0' x2='16' y2='0' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='-11' y1='-11' x2='-8.5' y2='-8.5' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8.5' y1='-8.5' x2='11' y2='-11' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='-11' y1='11' x2='-8.5' y2='8.5' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8.5' y1='8.5' x2='11' y2='11' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C!-- wave 1 --%3E%3Cg transform='translate(0,100)' opacity='.08'%3E%3Cpath d='M0,0 Q15,-8 30,0 Q45,8 60,0 Q75,-8 90,0 Q105,8 120,0' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/g%3E%3C!-- palm tree --%3E%3Cg transform='translate(170,60)' opacity='.10'%3E%3Crect x='-2' y='0' width='4' height='20' rx='1' fill='%238D6E63'/%3E%3Cpath d='M0,-2 Q-15,0 -18,8' fill='none' stroke='%232E7D32' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0,-2 Q15,0 18,8' fill='none' stroke='%232E7D32' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0,-2 Q-10,-8 -16,-4' fill='none' stroke='%232E7D32' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0,-2 Q10,-8 16,-4' fill='none' stroke='%232E7D32' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M0,-2 Q0,-12 -4,-14' fill='none' stroke='%232E7D32' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C!-- beach ball --%3E%3Cg transform='translate(120,25)' opacity='.09'%3E%3Ccircle cx='0' cy='0' r='7' fill='%23FF5252'/%3E%3Cpath d='M-7,0 A7,7 0 0,1 0,-7' fill='%23FFD600'/%3E%3Cpath d='M0,7 A7,7 0 0,1 7,0' fill='%23FFD600'/%3E%3Cpath d='M-5,-5 Q0,-2 5,-5' fill='none' stroke='%23fff' stroke-width='0.6'/%3E%3Cpath d='M-5,5 Q0,2 5,5' fill='none' stroke='%23fff' stroke-width='0.6'/%3E%3C/g%3E%3C!-- starfish --%3E%3Cg transform='translate(55,160)' opacity='.09'%3E%3Cpath d='M0,-8 L2,-3 L7,-3 L3,1 L5,6 L0,3 L-5,6 L-3,1 L-7,-3 L-2,-3 Z' fill='%23FFAB40'/%3E%3C/g%3E%3C!-- shell --%3E%3Cg transform='translate(150,150)' opacity='.08'%3E%3Cellipse cx='0' cy='0' rx='7' ry='5' fill='%23FFCCBC'/%3E%3Cpath d='M-5,2 Q-3,-2 0,2 Q3,-2 5,2' fill='none' stroke='%23BCAAA4' stroke-width='0.7'/%3E%3Cpath d='M-3,3 Q0,-1 3,3' fill='none' stroke='%23BCAAA4' stroke-width='0.7'/%3E%3C/g%3E%3C!-- wave 2 --%3E%3Cg transform='translate(80,180)' opacity='.07'%3E%3Cpath d='M0,0 Q15,-7 30,0 Q45,7 60,0 Q75,-7 90,0' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/g%3E%3C!-- ice cream --%3E%3Cg transform='translate(25,110)' opacity='.09'%3E%3Cpath d='M-4,0 L0,12 L4,0' fill='%23FFCC80'/%3E%3Ccircle cx='0' cy='-2' r='5' fill='%23F48FB1'/%3E%3Ccircle cx='0' cy='-2' r='5' fill='none' stroke='%23fff' stroke-width='0.5'/%3E%3C/g%3E%3C!-- small bubbles --%3E%3Ccircle cx='95' cy='55' r='1.5' fill='%23fff' opacity='.10'/%3E%3Ccircle cx='185' cy='120' r='1.2' fill='%23FFD600' opacity='.08'/%3E%3Ccircle cx='15' cy='75' r='1.3' fill='%23fff' opacity='.09'/%3E%3Ccircle cx='200' cy='195' r='1' fill='%23fff' opacity='.07'/%3E%3Ccircle cx='70' cy='200' r='1.4' fill='%23FFD600' opacity='.06'/%3E%3C/svg%3E");background-size:220px 220px;opacity:1}[data-theme=easter] body{background:radial-gradient(ellipse at 30% 20%,rgba(139,195,74,.2) 0%,transparent 50%),linear-gradient(160deg,#7cb342,#558b2f,#33691e)}[data-theme=easter] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3C!-- egg 1 (pink with dots) --%3E%3Cg transform='translate(35,35)' opacity='.25'%3E%3Cellipse cx='0' cy='0' rx='8' ry='11' fill='%23F8BBD0'/%3E%3Ccircle cx='-3' cy='-3' r='1.2' fill='%23CE93D8'/%3E%3Ccircle cx='3' cy='0' r='1.2' fill='%23CE93D8'/%3E%3Ccircle cx='-1' cy='4' r='1.2' fill='%23CE93D8'/%3E%3C/g%3E%3C!-- bunny --%3E%3Cg transform='translate(120,20)' opacity='.18'%3E%3Cellipse cx='0' cy='3' rx='7' ry='6' fill='%23E0E0E0'/%3E%3Cellipse cx='0' cy='-3' rx='5' ry='5' fill='%23E0E0E0'/%3E%3Cellipse cx='-2.5' cy='-10' rx='2' ry='5' fill='%23E0E0E0'/%3E%3Cellipse cx='2.5' cy='-10' rx='2' ry='5' fill='%23E0E0E0'/%3E%3Cellipse cx='-2.5' cy='-10' rx='1' ry='3.5' fill='%23FFCDD2'/%3E%3Cellipse cx='2.5' cy='-10' rx='1' ry='3.5' fill='%23FFCDD2'/%3E%3Ccircle cx='-2' cy='-3.5' r='0.8' fill='%23333'/%3E%3Ccircle cx='2' cy='-3.5' r='0.8' fill='%23333'/%3E%3Cellipse cx='0' cy='-1.5' rx='1' ry='0.6' fill='%23FFCDD2'/%3E%3C/g%3E%3C!-- egg 2 (blue with zigzag) --%3E%3Cg transform='translate(185,65)' opacity='.22'%3E%3Cellipse cx='0' cy='0' rx='7' ry='10' fill='%2381D4FA'/%3E%3Cpath d='M-5,-2 L-3,0 L-1,-2 L1,0 L3,-2 L5,0' fill='none' stroke='%23FFD54F' stroke-width='1.2'/%3E%3Cpath d='M-5,2 L-3,4 L-1,2 L1,4 L3,2 L5,4' fill='none' stroke='%23fff' stroke-width='0.8'/%3E%3C/g%3E%3C!-- flower 1 --%3E%3Cg transform='translate(60,110)' opacity='.20'%3E%3Ccircle cx='0' cy='-5' r='3' fill='%23FFF176'/%3E%3Ccircle cx='4.5' cy='-1.5' r='3' fill='%23FFF176'/%3E%3Ccircle cx='3' cy='3.5' r='3' fill='%23FFF176'/%3E%3Ccircle cx='-3' cy='3.5' r='3' fill='%23FFF176'/%3E%3Ccircle cx='-4.5' cy='-1.5' r='3' fill='%23FFF176'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23FFB74D'/%3E%3C/g%3E%3C!-- egg 3 (green striped) --%3E%3Cg transform='translate(160,140) scale(0.8)' opacity='.22'%3E%3Cellipse cx='0' cy='0' rx='8' ry='11' fill='%23A5D6A7'/%3E%3Cline x1='-6' y1='-4' x2='6' y2='-4' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='-7' y1='0' x2='7' y2='0' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='-6' y1='4' x2='6' y2='4' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C!-- egg 4 (yellow) --%3E%3Cg transform='translate(25,175)' opacity='.18'%3E%3Cellipse cx='0' cy='0' rx='6' ry='9' fill='%23FFF9C4'/%3E%3Ccircle cx='-2' cy='-2' r='1.5' fill='%23CE93D8'/%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%2381D4FA'/%3E%3Ccircle cx='0' cy='-5' r='1' fill='%23A5D6A7'/%3E%3C/g%3E%3C!-- flower 2 --%3E%3Cg transform='translate(110,185)' opacity='.17'%3E%3Ccircle cx='0' cy='-4' r='2.5' fill='%23F8BBD0'/%3E%3Ccircle cx='3.8' cy='-1.2' r='2.5' fill='%23F8BBD0'/%3E%3Ccircle cx='2.4' cy='3' r='2.5' fill='%23F8BBD0'/%3E%3Ccircle cx='-2.4' cy='3' r='2.5' fill='%23F8BBD0'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='2.5' fill='%23F8BBD0'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23FFD54F'/%3E%3C/g%3E%3C!-- chick --%3E%3Cg transform='translate(195,185)' opacity='.18'%3E%3Ccircle cx='0' cy='0' r='5' fill='%23FFF176'/%3E%3Ccircle cx='0' cy='-5' r='3.5' fill='%23FFF176'/%3E%3Ccircle cx='-1.2' cy='-5.5' r='0.7' fill='%23333'/%3E%3Ccircle cx='1.2' cy='-5.5' r='0.7' fill='%23333'/%3E%3Cpath d='M-1,-3.5 L0,-2.5 L1,-3.5' fill='%23FF8A65'/%3E%3C/g%3E%3C!-- sparkle dots --%3E%3Ccircle cx='90' cy='50' r='1.5' fill='%238BC34A' opacity='.15'/%3E%3Ccircle cx='170' cy='100' r='1.2' fill='%23CE93D8' opacity='.12'/%3E%3Ccircle cx='45' cy='145' r='1.3' fill='%23FFD54F' opacity='.14'/%3E%3Ccircle cx='200' cy='30' r='1' fill='%2381D4FA' opacity='.12'/%3E%3Ccircle cx='10' cy='80' r='1.4' fill='%23F8BBD0' opacity='.10'/%3E%3C/svg%3E");background-size:220px 220px;opacity:1}[data-theme=valentine] body{background:radial-gradient(ellipse at 25% 0%,rgba(255,105,180,.3) 0%,transparent 50%),radial-gradient(ellipse at 75% 0%,rgba(255,20,147,.2) 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(255,182,217,.25) 0%,transparent 50%),linear-gradient(160deg,#fdf2f8,#fce4ec,#f8bbd0 60%,#f48fb1 85%,#f06292)}[data-theme=valentine] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cdefs%3E%3Cstyle%3E.h%7Bfill:%23e91e63%7D%3C/style%3E%3C/defs%3E%3C!-- heart 1 --%3E%3Cg transform='translate(30,30) scale(0.8)' opacity='.10'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 2 --%3E%3Cg transform='translate(120,15) scale(0.5)' opacity='.07'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 3 --%3E%3Cg transform='translate(185,55) scale(0.7)' opacity='.08'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 4 --%3E%3Cg transform='translate(70,100) scale(0.6)' opacity='.09'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 5 --%3E%3Cg transform='translate(155,120) scale(0.9)' opacity='.06'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 6 --%3E%3Cg transform='translate(25,165) scale(0.55)' opacity='.08'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 7 --%3E%3Cg transform='translate(110,180) scale(0.65)' opacity='.07'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- heart 8 --%3E%3Cg transform='translate(195,185) scale(0.45)' opacity='.09'%3E%3Cpath class='h' d='M0,8 C0,3 -5,-2 -10,0 C-15,2 -15,8 -10,14 C-7,18 0,22 0,22 C0,22 7,18 10,14 C15,8 15,2 10,0 C5,-2 0,3 0,8Z'/%3E%3C/g%3E%3C!-- small dots (sparkles) --%3E%3Ccircle cx='90' cy='45' r='1.5' fill='%23ff69b4' opacity='.08'/%3E%3Ccircle cx='170' cy='95' r='1.2' fill='%23ff1493' opacity='.06'/%3E%3Ccircle cx='45' cy='130' r='1.3' fill='%23ff69b4' opacity='.07'/%3E%3Ccircle cx='200' cy='145' r='1' fill='%23ff1493' opacity='.06'/%3E%3Ccircle cx='10' cy='200' r='1.4' fill='%23ff69b4' opacity='.05'/%3E%3Ccircle cx='140' cy='65' r='1.1' fill='%23ff1493' opacity='.07'/%3E%3C/svg%3E");background-size:220px 220px;opacity:1}[data-theme=halloween] body{background:radial-gradient(ellipse at 20% 10%,rgba(255,117,24,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 90%,rgba(123,45,142,.12) 0%,transparent 50%),linear-gradient(165deg,#1a1a2e,#16213e,#1a1a2e,#2d1b4e,#1a0a2e)}[data-theme=halloween] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3C!-- pumpkin 1 --%3E%3Cg transform='translate(35,30)' opacity='.12'%3E%3Cellipse cx='0' cy='0' rx='10' ry='9' fill='%23FF7518'/%3E%3Cellipse cx='0' cy='0' rx='6' ry='9' fill='%23FF8C00'/%3E%3Crect x='-1.5' y='-12' width='3' height='4' rx='1' fill='%23228B22'/%3E%3Cpath d='M-3,-3 Q-2,-5 0,-3' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3Cpath d='M1,-3 Q2,-5 3,-3' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3Cpath d='M-3,2 Q0,5 3,2' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3C/g%3E%3C!-- bat 1 --%3E%3Cg transform='translate(120,25)' opacity='.09'%3E%3Cpath d='M0,0 C-3,-4 -10,-6 -14,-2 C-11,-3 -8,-1 -6,1 C-4,-1 -2,-1 0,0Z' fill='%237B2D8E'/%3E%3Cpath d='M0,0 C3,-4 10,-6 14,-2 C11,-3 8,-1 6,1 C4,-1 2,-1 0,0Z' fill='%237B2D8E'/%3E%3Ccircle cx='-1.5' cy='-0.5' r='0.6' fill='%23FF7518'/%3E%3Ccircle cx='1.5' cy='-0.5' r='0.6' fill='%23FF7518'/%3E%3C/g%3E%3C!-- ghost --%3E%3Cg transform='translate(185,70)' opacity='.08'%3E%3Cpath d='M0,-10 C-7,-10 -8,-4 -8,2 L-8,10 L-5,7 L-2,10 L1,7 L4,10 L7,7 L8,10 L8,2 C8,-4 7,-10 0,-10Z' fill='%23fff'/%3E%3Ccircle cx='-3' cy='-3' r='1.5' fill='%23333'/%3E%3Ccircle cx='3' cy='-3' r='1.5' fill='%23333'/%3E%3Cellipse cx='0' cy='1' rx='2' ry='2.5' fill='%23333'/%3E%3C/g%3E%3C!-- spider web --%3E%3Cg transform='translate(60,110)' opacity='.07'%3E%3Cpath d='M0,0 L0,-14' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0,0 L12,-7' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0,0 L12,7' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0,0 L-12,-7' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3Cpath d='M0,-5 Q4,-4 4,-2.5' stroke='%23fff' stroke-width='0.4' fill='none'/%3E%3Cpath d='M0,-9 Q6,-7 7,-4' stroke='%23fff' stroke-width='0.4' fill='none'/%3E%3C/g%3E%3C!-- pumpkin 2 (small) --%3E%3Cg transform='translate(160,140) scale(0.7)' opacity='.10'%3E%3Cellipse cx='0' cy='0' rx='10' ry='9' fill='%23FF7518'/%3E%3Cellipse cx='0' cy='0' rx='6' ry='9' fill='%23FF8C00'/%3E%3Crect x='-1.5' y='-12' width='3' height='4' rx='1' fill='%23228B22'/%3E%3Cpath d='M-3,-3 Q-2,-5 0,-3' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3Cpath d='M1,-3 Q2,-5 3,-3' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3Cpath d='M-3,2 Q0,5 3,2' fill='none' stroke='%23333' stroke-width='0.8'/%3E%3C/g%3E%3C!-- bat 2 --%3E%3Cg transform='translate(25,175)' opacity='.08'%3E%3Cpath d='M0,0 C-3,-4 -10,-6 -14,-2 C-11,-3 -8,-1 -6,1 C-4,-1 -2,-1 0,0Z' fill='%237B2D8E'/%3E%3Cpath d='M0,0 C3,-4 10,-6 14,-2 C11,-3 8,-1 6,1 C4,-1 2,-1 0,0Z' fill='%237B2D8E'/%3E%3Ccircle cx='-1.5' cy='-0.5' r='0.6' fill='%23FF7518'/%3E%3Ccircle cx='1.5' cy='-0.5' r='0.6' fill='%23FF7518'/%3E%3C/g%3E%3C!-- skull --%3E%3Cg transform='translate(110,185)' opacity='.07'%3E%3Cellipse cx='0' cy='-2' rx='7' ry='8' fill='%23f0f0f0'/%3E%3Crect x='-5' y='2' width='10' height='4' rx='2' fill='%23f0f0f0'/%3E%3Ccircle cx='-2.5' cy='-3' r='2' fill='%23333'/%3E%3Ccircle cx='2.5' cy='-3' r='2' fill='%23333'/%3E%3Cpath d='M-1,1 L0,3 L1,1' fill='%23333'/%3E%3C/g%3E%3C!-- small glowing dots --%3E%3Ccircle cx='90' cy='50' r='1.5' fill='%23FF7518' opacity='.08'/%3E%3Ccircle cx='170' cy='100' r='1.2' fill='%23A3E635' opacity='.06'/%3E%3Ccircle cx='45' cy='145' r='1.3' fill='%237B2D8E' opacity='.07'/%3E%3Ccircle cx='200' cy='30' r='1' fill='%23FF7518' opacity='.06'/%3E%3Ccircle cx='10' cy='60' r='1.4' fill='%23A3E635' opacity='.05'/%3E%3Ccircle cx='140' cy='75' r='1.1' fill='%237B2D8E' opacity='.07'/%3E%3C/svg%3E");background-size:220px 220px;opacity:1}[data-theme=christmas] body{background:linear-gradient(165deg,#1a472a,#0d2818 35%,#1a2a1a 60%,#2d1a1a,#1a0f0f)}[data-theme=christmas] body:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke-linecap:round%7D%3C/style%3E%3C/defs%3E%3C!-- snowflake 1 --%3E%3Cg transform='translate(30,35)' opacity='.12'%3E%3Cline x1='0' y1='-10' x2='0' y2='10' class='s' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='-8.66' y1='-5' x2='8.66' y2='5' class='s' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='-8.66' y1='5' x2='8.66' y2='-5' class='s' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='-3' y1='-7' x2='3' y2='-7' class='s' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='-3' y1='7' x2='3' y2='7' class='s' stroke='%23fff' stroke-width='1'/%3E%3C/g%3E%3C!-- star 1 --%3E%3Cg transform='translate(100,20)' opacity='.08'%3E%3Cpolygon points='0,-6 1.5,-2 6,-2 2.5,1 4,5.5 0,3 -4,5.5 -2.5,1 -6,-2 -1.5,-2' fill='%23ffd700'/%3E%3C/g%3E%3C!-- snowflake 2 --%3E%3Cg transform='translate(160,70)' opacity='.10'%3E%3Cline x1='0' y1='-8' x2='0' y2='8' class='s' stroke='%23fff' stroke-width='1.2'/%3E%3Cline x1='-7' y1='-4' x2='7' y2='4' class='s' stroke='%23fff' stroke-width='1.2'/%3E%3Cline x1='-7' y1='4' x2='7' y2='-4' class='s' stroke='%23fff' stroke-width='1.2'/%3E%3C/g%3E%3C!-- holly --%3E%3Cg transform='translate(55,110)' opacity='.10'%3E%3Cellipse cx='-5' cy='0' rx='6' ry='4' fill='%23228b22' transform='rotate(-30)'/%3E%3Cellipse cx='5' cy='0' rx='6' ry='4' fill='%23228b22' transform='rotate(30)'/%3E%3Ccircle cx='-1.5' cy='-3' r='2' fill='%23c41e3a'/%3E%3Ccircle cx='1.5' cy='-4' r='2' fill='%23c41e3a'/%3E%3Ccircle cx='0' cy='-1.5' r='2' fill='%23c41e3a'/%3E%3C/g%3E%3C!-- snowflake 3 --%3E%3Cg transform='translate(140,150)' opacity='.09'%3E%3Cline x1='0' y1='-9' x2='0' y2='9' class='s' stroke='%23fff' stroke-width='1.3'/%3E%3Cline x1='-7.8' y1='-4.5' x2='7.8' y2='4.5' class='s' stroke='%23fff' stroke-width='1.3'/%3E%3Cline x1='-7.8' y1='4.5' x2='7.8' y2='-4.5' class='s' stroke='%23fff' stroke-width='1.3'/%3E%3Cline x1='-2.5' y1='-6' x2='2.5' y2='-6' class='s' stroke='%23fff' stroke-width='0.8'/%3E%3Cline x1='-2.5' y1='6' x2='2.5' y2='6' class='s' stroke='%23fff' stroke-width='0.8'/%3E%3C/g%3E%3C!-- star 2 --%3E%3Cg transform='translate(20,170)' opacity='.07'%3E%3Cpolygon points='0,-5 1.2,-1.5 5,-1.5 2,0.8 3.2,4.5 0,2.2 -3.2,4.5 -2,0.8 -5,-1.5 -1.2,-1.5' fill='%23ffd700'/%3E%3C/g%3E%3C!-- small dots (snow) --%3E%3Ccircle cx='80' cy='60' r='1.2' fill='%23fff' opacity='.06'/%3E%3Ccircle cx='175' cy='25' r='1' fill='%23fff' opacity='.07'/%3E%3Ccircle cx='10' cy='90' r='1.3' fill='%23fff' opacity='.05'/%3E%3Ccircle cx='120' cy='110' r='1' fill='%23fff' opacity='.06'/%3E%3Ccircle cx='45' cy='185' r='1.2' fill='%23fff' opacity='.05'/%3E%3Ccircle cx='185' cy='180' r='1' fill='%23fff' opacity='.07'/%3E%3C/svg%3E");background-size:200px 200px;opacity:1}