.status-bar{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:.6rem 1.2rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;font-size:1rem;flex-wrap:wrap}.player-info{display:flex;align-items:center;gap:.5rem;padding:.4rem 1.2rem;border-radius:10px;transition:all .3s}.player-info.active{font-weight:700;box-shadow:0 0 0 2px currentColor}.player-info.vanilla{color:var(--vanilla-player-text)}.player-info.chocolate{color:var(--chocolate-player-text)}.player-info.vanilla.active{background:#fff3e8}.player-info.chocolate.active{background:#f0e0d0}.mini-donut{width:45px;height:45px;object-fit:contain;flex-shrink:0}.player-stats{display:flex;flex-direction:column;align-items:center}.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:.8rem;gap:.75rem;padding:.4rem .6rem}}@media(min-width:481px)and (max-width:1024px){.status-bar{font-size:.9rem;gap:1rem;padding:.5rem .9rem}.mini-donut{width:38px;height:38px}}@media(min-width:1025px)and (max-width:1599px){.status-bar{font-size:.85rem;gap:1rem;padding:.4rem .8rem}.mini-donut{width:35px;height:35px}.player-info{padding:.3rem .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%)}.cell.valid-move:before{content:"";position:absolute;inset:10%;z-index:3;background-size:contain;background-position:center;background-repeat:no-repeat;filter:saturate(.5) brightness(1.15);animation:validMovePulse 1.2s ease-in-out infinite}.cell.valid-move--vanilla:before{background-image:url(/assets/vanilla-DGymNZbo.png)}.cell.valid-move--chocolate:before{background-image:url(/assets/chocolate-B2qFJCAS.png)}@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)}.cell.dir-preview:after{content:"";position:absolute;inset:18%;z-index:3;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:.12;filter:saturate(.5) brightness(1.15);pointer-events:none}.cell.dir-preview--vanilla:after{background-image:url(/assets/vanilla-DGymNZbo.png)}.cell.dir-preview--chocolate:after{background-image:url(/assets/chocolate-B2qFJCAS.png)}.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(--primary);border-radius:inherit;z-index:5;pointer-events:none;animation:accentPulse 1.2s ease-in-out infinite;box-shadow:0 0 0 2px #e91e8c4d}@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}}.board-container{position:relative;margin:.5rem 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}}.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-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{width:100%;padding:.7rem;font-size:1rem;margin-top:.5rem;background:#fff;color:var(--primary);border:2px solid var(--primary)}.settings-tutorial:hover{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}.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:auto;min-width:300px;padding:2.5rem 2rem}.modal-content.size-normal{padding:2rem;margin:0 1rem}.modal-icon img{width:110px;height:110px}.modal-icon-emoji{font-size:3rem}.modal-title{font-size:1.8rem}.modal-content.size-normal .modal-title{font-size:1.5rem}.modal-description{font-size:1rem}.modal-content.size-normal .modal-description{font-size:.9rem}}.donut-pair{display:flex;justify-content:center;gap:.5rem}.donut-pair img{width:120px;height:120px}.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-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:160px;height:160px;margin:0 auto}.powerup-animation-cell{position:relative;width:140px;height:140px;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-cell.chaos.rotating .bg-triangle{animation:arrowRotate .8s ease-in-out}@keyframes arrowRotate{0%{transform:rotate(0);opacity:1}50%{transform:rotate(360deg);opacity:.5}to{transform:rotate(720deg);opacity:1}}@media(max-width:520px){.powerup-animation{width:130px;height:130px}.powerup-animation-cell{width:110px;height:110px}}.cell-highlight{font-weight:700;color:#333;background:#e91e8c1a;padding:.1rem .4rem;border-radius:4px;font-family:Courier New,monospace}.lobby-modal{text-align:center}.lobby-input{width:100%;padding:.5rem .7rem;border-radius:8px;border:1px solid #ddd;font-size:.95rem;background:#fff;color:#333;box-sizing:border-box}.lobby-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #e91e8c26}.lobby-code-input{text-align:center;font-size:1.4rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}.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:.8rem;padding:1rem 1.5rem;background:#f8f8f8;border-radius:12px;cursor:pointer;transition:background .2s;margin-bottom:.5rem}.lobby-hint{font-size:.8rem;color:#999;margin:0 0 1rem}.lobby-code:hover{background:#f0f0f0}.lobby-code-text{font-size:2rem;font-weight:800;letter-spacing:.3em;color:var(--primary)}.lobby-code-copy{display:flex;align-items:center;color:#bbb;transition:color .2s}.lobby-code:hover .lobby-code-copy{color:#888}.lobby-spinner-container{display:flex;flex-direction:column;align-items:center;gap:.8rem}.lobby-spinner{width:32px;height:32px;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-cancel{width:100%;margin-top:1rem;background:#fff;color:#999;border:2px solid #ddd}.lobby-cancel:hover{color:#666;border-color:#bbb;transform:none;box-shadow:none}.lobby-error{color:#d32f2f;font-size:.85rem;margin:.5rem 0;font-weight:600}.lobby-join-btn{margin-top:.5rem}.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}*,*: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)}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;-webkit-user-select:none;user-select:none;overflow-x:hidden}@media(orientation:landscape){body{justify-content:center}}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),#ff6f00);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}@media(max-width:480px){:root{--cell-size: 10.5vmin}}@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}}