.toast-container{position:fixed;top:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;inset-inline-end:20px;inset-inline-start:auto}.toast{padding:12px 24px;border-radius:4px;color:#fff;font-size:14px;animation:slideInRight .3s ease-in-out;min-width:200px}.toast-error{background-color:#f44}.toast-success{background-color:#00c851}.toast-info{background-color:#33b5e5}[dir=rtl] .toast{animation:slideInLeft .3s ease-in-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.welcome-screen{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);padding:20px 20px 80px;text-align:center}.welcome-screen h1{font-size:clamp(2rem,8vw,3.5rem);margin-bottom:clamp(1.5rem,6vw,3rem)}.welcome-screen .language-selector{margin-bottom:30px}.welcome-screen .actions{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px;margin-bottom:20px}.welcome-screen .actions button{font-size:clamp(1.2rem,4vw,1.6rem);padding:1rem 2rem}.welcome-screen .join-section{display:flex;flex-direction:column;gap:10px}.welcome-screen .buy-me-coffee{position:absolute}@media (max-width: 600px){.welcome-screen{padding-bottom:calc(env(safe-area-inset-bottom,20px) + 100px)}}@media (max-width: 400px){.welcome-screen{padding-bottom:calc(env(safe-area-inset-bottom,20px) + 120px)}}.buy-me-coffee{bottom:env(safe-area-inset-bottom,0px);margin-bottom:calc(env(safe-area-inset-bottom,10px) + 20px);padding-bottom:calc(env(safe-area-inset-bottom,10px) + 20px);display:inline-block;border-radius:8px}.buy-me-coffee-link{transition:transform .2s,box-shadow .2s;display:inline-block;box-shadow:0 4px 8px #0000001a;height:50px}.buy-me-coffee-link:hover{transform:scale(1.05);box-shadow:0 6px 12px #00000026}.buy-me-coffee-link:active{transform:scale(.98);box-shadow:0 2px 4px #0000001a}.buy-me-coffee-svg{width:180px;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}@media (max-width: 600px){.buy-me-coffee-link{height:42px}.buy-me-coffee-svg{width:150px}}@media (max-width: 400px){.buy-me-coffee-link{height:36px}.buy-me-coffee-svg{width:130px}}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:2rem;border-radius:8px;max-width:400px;width:90%;text-align:center;font-size:clamp(1.2rem,3vw,1.5rem)}.popup-buttons{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.popup-buttons button{min-width:100px}.room-menu{padding:1rem;margin:0 auto}.room-menu header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex:0 0 auto}.room-menu .room-info{display:flex;align-items:center;gap:.5rem}.room-menu .room-info button{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0}.room-menu .room-info svg{width:1.2rem;height:1.2rem}.room-menu .room-code{font-size:clamp(1.3rem,2.5vw,1.2rem);font-weight:700}@media (max-width: 400px){.room-menu .room-info button{width:1.5rem;height:1.5rem}.room-menu .room-info svg{width:1rem;height:1rem}}.room-content{display:grid;grid-template-columns:1fr;gap:20px}@media (min-width: 768px){.room-content{grid-template-columns:1fr 1fr}}.player-settings,.game-settings,.player-list{background-color:#e7f3fe;padding:15px;border-radius:8px;box-shadow:0 6px 12px #00000026;margin-bottom:20px}.player-settings span,.game-settings span,.player-list span{font-size:clamp(1.1rem,3vw,1.4rem)}.player-settings .setting-field,.game-settings .setting-field,.player-list .setting-field{margin-bottom:15px}.player-settings .setting-field label,.game-settings .setting-field label,.player-list .setting-field label{display:flex;font-size:clamp(1.2rem,3vw,1.4rem);margin-bottom:.8rem;font-weight:500;align-items:center}.player-settings .setting-field input[type=text],.game-settings .setting-field input[type=text],.player-list .setting-field input[type=text]{width:100%}.player-settings .setting-field input[type=color],.player-settings .setting-field input[type=number],.game-settings .setting-field input[type=color],.game-settings .setting-field input[type=number],.player-list .setting-field input[type=color],.player-list .setting-field input[type=number]{width:5rem}.player-settings .setting-field input[type=checkbox],.game-settings .setting-field input[type=checkbox],.player-list .setting-field input[type=checkbox]{width:5%;margin-right:.5rem;align-items:center}.player-settings select,.game-settings select,.player-list select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #e0e0e0;padding:.5rem 2rem .5rem .75rem;font-size:1rem;line-height:1.5;color:#333;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem;width:100%;max-width:100%;cursor:pointer}@media (min-width: 480px){.player-settings select,.player-settings input[type=text],.game-settings select,.game-settings input[type=text],.player-list select,.player-list input[type=text]{max-width:18rem}}.player-settings select:hover,.game-settings select:hover,.player-list select:hover{border-color:#bbb}.player-settings select:focus,.game-settings select:focus,.player-list select:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff26;outline:none}.player-settings select:disabled,.game-settings select:disabled,.player-list select:disabled{background-color:#f5f5f5;color:#9e9e9e;cursor:not-allowed;opacity:.7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.player-settings .slider-container,.game-settings .slider-container,.player-list .slider-container{width:100%;padding:.75em 0}.player-settings .slider-container .slider-header,.game-settings .slider-container .slider-header,.player-list .slider-container .slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5em}.player-settings .slider-container .slider-header label,.game-settings .slider-container .slider-header label,.player-list .slider-container .slider-header label{margin-bottom:0;display:inline-flex;align-items:center}.player-settings .slider-container .slider-header .slider-value,.game-settings .slider-container .slider-header .slider-value,.player-list .slider-container .slider-header .slider-value{background:#007bff;color:#fff;border-radius:.25em;padding:.15em .5em;font-weight:700;min-width:2em;text-align:center;height:1.6em;display:flex;align-items:center;justify-content:center}.player-settings .slider-container .slider-wrapper,.game-settings .slider-container .slider-wrapper,.player-list .slider-container .slider-wrapper{position:relative;padding:.75em 0}.player-settings .slider-container .slider-wrapper .styled-slider,.game-settings .slider-container .slider-wrapper .styled-slider,.player-list .slider-container .slider-wrapper .styled-slider{-webkit-appearance:none;width:100%;height:.5em;border-radius:.25em;outline:none;touch-action:none}.player-settings .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb,.game-settings .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb,.player-list .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.25em;height:1.25em;border-radius:50%;background:#007bff;cursor:pointer;box-shadow:0 .125em .25em #0003;transition:all .2s ease}.player-settings .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb:hover,.game-settings .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb:hover,.player-list .slider-container .slider-wrapper .styled-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 .125em .375em #0000004d}.player-settings .slider-container .slider-wrapper .styled-slider::-moz-range-thumb,.game-settings .slider-container .slider-wrapper .styled-slider::-moz-range-thumb,.player-list .slider-container .slider-wrapper .styled-slider::-moz-range-thumb{width:1.25em;height:1.25em;border-radius:50%;background:#007bff;cursor:pointer;box-shadow:0 .125em .25em #0003;transition:all .2s ease;border:none}.player-settings .slider-container .slider-wrapper .styled-slider::-moz-range-thumb:hover,.game-settings .slider-container .slider-wrapper .styled-slider::-moz-range-thumb:hover,.player-list .slider-container .slider-wrapper .styled-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 .125em .375em #0000004d}.player-settings .slider-container .slider-wrapper .styled-slider:disabled,.game-settings .slider-container .slider-wrapper .styled-slider:disabled,.player-list .slider-container .slider-wrapper .styled-slider:disabled{opacity:.5}.player-settings .slider-container .slider-wrapper .styled-slider:disabled::-webkit-slider-thumb,.player-settings .slider-container .slider-wrapper .styled-slider:disabled::-moz-range-thumb,.game-settings .slider-container .slider-wrapper .styled-slider:disabled::-webkit-slider-thumb,.game-settings .slider-container .slider-wrapper .styled-slider:disabled::-moz-range-thumb,.player-list .slider-container .slider-wrapper .styled-slider:disabled::-webkit-slider-thumb,.player-list .slider-container .slider-wrapper .styled-slider:disabled::-moz-range-thumb{background:#9e9e9e;cursor:not-allowed}.player-settings .slider-container .slider-wrapper .slider-limits,.game-settings .slider-container .slider-wrapper .slider-limits,.player-list .slider-container .slider-wrapper .slider-limits{display:flex;justify-content:space-between;margin-top:.3em;font-size:.85em;color:#777}.player-list ul{list-style:none}.player-list li{display:flex;align-items:center;gap:.5rem;padding:.3rem 0}.player-list li .host-badge{background-color:#f0f0f0;font-size:12px;padding:2px 6px;border-radius:10px;margin-left:8px}.player-list li .status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%}.player-list li .status-indicator.connected{background-color:#4caf50}.player-list li .status-indicator.disconnected{background-color:#f44336}.player-list li .remove-button{margin-left:auto;padding:0;background:none;border:none;cursor:pointer;opacity:.7}[dir=rtl] .player-list li .remove-button{margin-left:0;margin-right:auto}.player-list li .remove-button:hover{opacity:1}.player-list li .remove-button svg{width:12px;height:12px;stroke:currentColor}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;flex:0 0 auto}.header-buttons{display:flex;gap:.5rem}.header-buttons button{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}.header-buttons svg{width:1.2rem;height:1.2rem}.game-status{display:flex;align-items:center;gap:.5rem;font-weight:500;color:#666}.game-status svg{width:1.2rem;height:1.2rem;color:#888}.waiting-icon{animation:rotate 1.5s linear infinite;transform-origin:center center;display:inline-block}@media (max-width: 400px){.header-buttons button{width:1.5rem;height:1.5rem}.header-buttons svg{width:1rem;height:1rem}.game-status svg{width:1rem;height:1rem}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-scores{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;flex:0 0 auto}.player-score{font-size:clamp(1rem,2vw,1.5rem);padding:.3rem .8rem;border-radius:8px;border:2px solid;font-weight:500;color:#333;position:relative;background-color:#fff;transition:background-color .3s ease;display:flex;align-items:center;gap:8px}.player-name{font-weight:600;white-space:nowrap;text-overflow:ellipsis;max-width:120px;overflow:hidden}.score-badge{background-color:#0000001a;border-radius:50%;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}.current-player{--player-color-rgb: var(--player-rgb, 0, 0, 0);background-color:rgba(var(--player-color-rgb),.3);animation:pulse-border 2s infinite}.current-player.light-color{color:#333}.current-player.dark-color{color:#fff}@media (max-width: 600px){.player-scores{align-items:center;gap:.3rem}}@keyframes pulse-border{0%{box-shadow:0 0 rgba(var(--player-color-rgb),.7)}70%{box-shadow:0 0 0 6px rgba(var(--player-color-rgb),0)}to{box-shadow:0 0 rgba(var(--player-color-rgb),0)}}.winner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;flex-direction:column;align-items:center;height:100%;height:calc(var(--vh, 1vh) * 100);justify-content:flex-start;overflow-x:hidden;overflow-y:auto;color:#fff;z-index:100;padding-bottom:env(safe-area-inset-bottom,20px)}.winner-content{text-align:center}.winner-content h2{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;font-size:clamp(1.8rem,8vw,2.5rem)}.winner-name{font-size:clamp(1.8rem,8vw,3.5rem);margin:.2rem 0;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;font-weight:700;letter-spacing:.03em}.winner-score{font-size:1.5rem;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.player-rankings{background:#ffffff1a;padding:1.5rem;border-radius:8px;margin:.8rem 0;text-align:center}.player-rankings h3{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;margin-bottom:.8rem;font-size:1.5rem}.player-rankings>h3{column-span:all;margin-bottom:.8rem}.ranking-item{display:flex;justify-content:space-between;padding:.5rem 0;margin:.25rem 0;font-size:1.2rem;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;letter-spacing:.05em;break-inside:avoid;gap:1rem}.ranking-item span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-item span{letter-spacing:.06em}.ranking-item.winner{font-weight:700;font-size:1.4rem;letter-spacing:.1em}.firework{position:absolute;width:10px;height:10px;border-radius:50%;animation:explode 1.5s ease-out forwards;z-index:101;pointer-events:none}.winner-buttons{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;padding-bottom:1rem}.winner-buttons button{font-size:clamp(1.2rem,4vw,1.6rem);padding:1rem 2rem;color:#fff;cursor:pointer;transition:all .2s;font-weight:700;border:none}.winner-buttons button:hover{transform:translateY(-2px)}.winner-buttons .exit-button{background:#ff4757}.winner-buttons .exit-button:hover{background:#ff6b81}.winner-buttons .menu-button{background-color:#9e9e9e}.winner-buttons .menu-button:hover{background:#b1b1b1}.winner-buttons .play-again-button{background:var(--primary-color)}.winner-buttons .play-again-button:hover{background:#42a5f5}.winner-content,.player-rankings,.winner-buttons,.buy-me-coffee{max-width:100%;box-sizing:border-box}@media (max-width: 600px){.winner-overlay{padding:15px}.winner-overlay .winner-buttons{gap:.8rem;padding-bottom:.8rem}.winner-overlay .winner-buttons button{padding:.8rem 1.5rem;font-size:clamp(1rem,3.5vw,1.4rem)}}@keyframes explode{0%{transform:scale(1);opacity:1}to{transform:scale(20);opacity:0}}.game-board{padding:1rem;margin:0 auto;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.cards-grid{display:grid;gap:10px;margin:20px auto;overflow:visible}.card{perspective:1000px;aspect-ratio:1;cursor:pointer;transition:transform .2s ease;border-radius:8px}.card:hover{transform:translateY(-2px)}.card.matched{pointer-events:none;animation:disappearCard 1.5s ease forwards}.card.flipped .card-inner{transform:rotateY(180deg)}.card .card-inner{position:relative;width:100%;height:100%;transition:transform .5s,box-shadow .2s ease;transform-style:preserve-3d;box-shadow:0 1px 3px #0000004d,0 4px 8px #0003;border-radius:8px}.card:hover .card-inner{box-shadow:0 2px 6px #0006,0 6px 12px #0000004d}.card .card-front,.card .card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center}.card .card-back{background-color:var(--primary-color);box-shadow:0 2px 4px #0003,inset 0 1px 2px #0000001a}.card .card-front{background-color:#fff;transform:rotateY(180deg);border:1px solid #ddd;box-shadow:0 2px 4px #0003,inset 0 1px 2px #0000001a}.card .card-emoji{font-size:var(--emoji-font-size, clamp(12px, var(--card-size) * .7, 120px));display:flex;justify-content:center;align-items:center;width:100%;height:80%;text-align:center}.card .card-title{font-size:var(--title-font-size, clamp(8px, var(--card-size) * .12, 24px));text-align:center;margin-top:-1px;word-break:break-word}@keyframes disappearCard{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}:root{--primary-color: #2196F3;--primary-color-light: hsl(207, 90%, 87%);--primary-color-deeper: hsl(207, 90%, 85%)}*{box-sizing:border-box;margin:0;padding:0}html{touch-action:pan-x pan-y}[dir=rtl]{text-align:right}[dir=rtl] .flex-row{flex-direction:row-reverse}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:linear-gradient(to bottom,var(--primary-color-light),var(--primary-color-deeper));color:#333;line-height:1.5;min-height:calc(var(--vh, 1vh) * 100)}button{cursor:pointer;font-size:clamp(1.2rem,3vw,1.5rem);padding:.6rem;border-radius:8px;border:none;font-weight:500;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:transform .2s ease}button:hover{transform:translateY(-2px)}button.primary-button{background-color:var(--primary-color);color:#fff}button.secondary-button{background-color:#9e9e9e;color:#fff}button.danger-button{background-color:#f44336;color:#fff}input,select{font-size:clamp(1.1rem,3vw,1.4rem);padding:.3rem;min-height:3rem;border-radius:8px;border:1px solid #ddd;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:border-color .2s,box-shadow .2s}.reconnect-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.reconnect-overlay .reconnect-modal{background-color:#fff;padding:20px;border-radius:8px;font-size:clamp(1.2rem,3vw,1.5rem);text-align:center;max-width:400px;width:90%}.reconnect-overlay .reconnect-modal button{margin-top:1.5rem}.reconnect-overlay .loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #2196F3;border-radius:50%;width:40px;height:40px;animation:spin 2s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
