:root{--red: #e63946;--blue: #0096ff;--neutral: #94a3b8;--black: #0f172a;--text-dark: #001b3d;--bg-color: #ffffff;--secondary-bg-color: #E5E7EB;--secondary-text-color: #111827;--dot-color: #cbd5e1;--border-color: rgb(227, 227, 227);--input-bg: rgba(255, 255, 255, .9);--input-border: rgba(0, 0, 0, .15);--glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .3));--glass-border: rgba(255, 255, 255, .4);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15), inset 0 1px 0 rgba(255, 255, 255, .4)}[data-theme=dark]{--bg-color: #0b1120;--secondary-bg-color: #1F2937;--secondary-text-color: #E5E7EB;--dot-color: #1e293b;--text-dark: #f8fafc;--black: #ffffff;--input-bg: rgba(15, 23, 42, .8);--input-border: rgba(255, 255, 255, .2);--glass-bg: linear-gradient(135deg, rgba(30, 41, 59, .7), rgba(15, 23, 42, .6));--glass-border: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(var(--dot-color) .075rem,transparent .075rem);background-size:1.5rem 1.5rem;color:var(--text-dark);overflow:hidden;height:100vh}.app-main-layout{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:.5rem;height:100dvh;padding:.5rem;max-width:56.25rem;margin:0 auto;overflow:hidden;transition:padding .3s ease}.landing-layout{gap:2rem;justify-content:center;height:auto;min-height:100dvh;overflow-y:auto;padding:2rem 1rem}.logo{font-weight:800;font-size:1.8rem;letter-spacing:-.1rem;margin-bottom:.5rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.logo.large{font-size:3.5rem;margin-bottom:1rem;animation:fade-in-down .6s cubic-bezier(.34,1.56,.64,1)}.logo .blue-part{color:var(--blue)}.logo .red-part{color:var(--red)}.modal-content,.landing-card{background:var(--bg-color);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:2rem;border-radius:2rem;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);width:100%;max-width:420px;align-items:center;justify-content:center;animation:fade-in-up .5s ease-out}.landing-body{display:flex;flex-direction:column;gap:1.25rem}.input-group{width:100%}.styled-input{width:100%;padding:1rem 1.25rem;border:2px solid var(--input-border);border-radius:1rem;font-size:1.1rem;background:var(--input-bg);color:var(--text-dark);font-weight:700;text-align:center;transition:all .2s ease;box-shadow:0 2px 5px #0000000d}.styled-input:focus{outline:none;border-color:var(--blue);transform:translateY(-2px);box-shadow:0 5px 15px #3b82f633}.code-input{text-transform:uppercase;letter-spacing:3px;font-family:monospace}.btn-secondary-action{padding:.8rem 2rem;border-radius:1.5rem;background:var(--secondary-bg-color);border:1px solid var(--input-border);color:var(--secondary-text-color);font-weight:700;text-transform:uppercase;letter-spacing:.05rem;cursor:pointer;transition:all .2s ease}.btn-secondary-action:hover{background:var(--secondary-text-color);color:var(--bg-color);transform:translateY(-2px)}.btn-main-action{padding:1rem 2rem;border-radius:1.5rem;background:var(--black);color:var(--bg-color);border:none;font-weight:800;text-transform:uppercase;letter-spacing:.05rem;cursor:pointer;box-shadow:0 4px 10px #0003;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-main-action:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #00000040;filter:brightness(1.1)}.btn-main-action:active:not(:disabled){transform:scale(.97)}.btn-main-action:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1)}.full-width{width:100%}.lobby-header{text-align:center;width:100%;margin-bottom:1rem}.lobby-code-display{background:var(--input-bg);border:2px dashed var(--blue);color:var(--blue);padding:.75rem 2rem;border-radius:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;font-weight:900;font-size:1.5rem;cursor:pointer;margin-top:.5rem;transition:all .3s ease-out;-webkit-user-select:none;user-select:none;font-family:inherit;position:relative;overflow:hidden}.lobby-code-display:hover{background:#3b82f614;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f61a}.lobby-code-display:active{transform:translateY(0) scale(.98)}.lobby-code-display.success{border-color:#22c55e80;background:#22c55e1f;color:#15803d;border-style:solid;box-shadow:0 0 15px #22c55e26}[data-theme=dark] .lobby-code-display.success{color:#4ade80}.icon-anim{display:inline-block;transform-origin:center center}.lobby-code-display.success .icon-anim{animation:smooth-pop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes smooth-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.team-selector{display:flex;gap:.75rem;margin-bottom:1rem;background:#0000000d;padding:.5rem;border-radius:1.25rem}.team-btn{flex:1;padding:.8rem;border:2px solid transparent;border-radius:1rem;background:transparent;font-weight:800;cursor:pointer;opacity:.6;transition:all .2s;color:var(--text-dark)}.team-btn:hover{opacity:.8}.team-btn.selected{opacity:1;background:var(--bg-color);box-shadow:0 2px 8px #0000001a}.team-btn.red.selected{border-color:var(--red);color:var(--red)}.team-btn.blue.selected{border-color:var(--blue);color:var(--blue)}.teams-display{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;text-align:left}.team-column h4{font-size:.8rem;text-transform:uppercase;margin-bottom:.5rem;border-bottom:1px solid var(--glass-border);padding-bottom:.25rem;opacity:.8}.player-tag{background:#0000000d;padding:.3rem .5rem;border-radius:.5rem;margin-bottom:.25rem;font-size:.85rem;font-weight:600;display:flex;justify-content:space-between}.player-tag.is-spy{background:var(--text-dark);color:var(--bg-color)}.random-checkbox{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;opacity:.9;cursor:pointer;margin-bottom:1rem;font-weight:600}.divider{border:0;height:1px;background:var(--text-dark);opacity:.1;margin:1rem 0}.system-controls{display:flex;gap:.5rem;margin-bottom:.3rem;background:var(--glass-bg);padding:.375rem;border-radius:1.25rem;border:.0625rem solid var(--glass-border);box-shadow:var(--glass-shadow)}.system-controls button{padding:.5rem 1.25rem;border-radius:.875rem;border:none;font-size:.7rem;font-weight:800;cursor:pointer;color:var(--text-dark);background:transparent;transition:all .3s}@media(hover:hover)and (pointer:fine){.system-controls button:hover{transform:translateY(-.25rem)}}.status-panel{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:37.5rem;padding:.625rem 1.56rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem);border-radius:6.25rem;border:.0625rem solid var(--glass-border);box-shadow:var(--glass-shadow);cursor:pointer;margin-top:0;flex-shrink:0}.current-turn{padding:.375rem 1.25rem;border-radius:3.125rem;color:#fff;font-size:.7rem;font-weight:800;white-space:nowrap}.turn-red{background:var(--red)}.turn-blue{background:var(--blue)}.team-score{font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:.5rem}.team-score.red{color:var(--red)}.team-score.blue{color:var(--blue)}.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:.4rem;width:100%;max-width:65rem;flex-grow:1;margin:.25rem 0;height:0;min-height:0;box-shadow:none!important;background:transparent!important}.card{position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.23,1,.32,1);width:100%;height:100%;touch-action:manipulation}.card:not(.revealed):hover{transform:translateY(-.2rem)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:.15rem;border-radius:.5rem;font-weight:700;font-size:clamp(.6rem,2.2vh,1.1rem);line-height:1.1;border:1px solid var(--glass-border);transition:all .4s ease;word-break:break-word}.card-front{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-dark);box-shadow:0 2px 6px #0000001a}.card-back{transform:rotateY(180deg);color:#fff;border:none}.card.revealed{transform:rotateY(180deg)}.red .card-back{background:linear-gradient(135deg,#ef4444,#b91c1c)}.blue .card-back{background:linear-gradient(135deg,#0096ff,#0056b3)}.neutral .card-back{background:var(--neutral)}.black .card-back{background:#000}.spymaster-active .card.red .card-front{border:1px solid var(--red);color:var(--red);background:#e639461a}.spymaster-active .card.blue .card-front{border:1px solid var(--blue);color:var(--blue);background:#0096ff1a}.spymaster-active .card.neutral .card-front{border:1px solid var(--neutral);color:#64748b;background:#94a3b81a}.spymaster-active .card.black .card-front{border:1px solid #444;color:#fff;background:#000}.card:not(.revealed):not(.spymaster-active .card):hover .card-front{border:1px solid var(--turn-color);color:var(--turn-color);background:color-mix(in srgb,var(--turn-color),transparent 90%);transition:all .2s ease-in-out;box-shadow:0 4px 12px color-mix(in srgb,var(--turn-color),transparent 85%)}.end-turn-btn{transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent}@media(hover:hover){.end-turn-btn:hover{background-color:var(--turn-color)!important;box-shadow:0 8px 25px color-mix(in srgb,var(--turn-color),transparent 60%);transform:translateY(-3px) scale(1.02);color:#fff}.end-turn-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px color-mix(in srgb,var(--turn-color),transparent 60%)}}.theme-toggle-btn{position:fixed;bottom:1.5rem;left:1.5rem;width:3rem;height:3rem;border-radius:50%;background:var(--glass-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid var(--glass-border);font-size:1.2rem;cursor:pointer;z-index:100;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;justify-content:center;transition:transform .2s}.theme-toggle-btn:hover{transform:scale(1.1) rotate(15deg)}.language-bar{position:fixed;top:1.5rem;right:1.5rem;display:flex;gap:.25rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:.8rem;padding:.3rem;z-index:100;border:1px solid var(--glass-border)}.lang-btn{padding:.4rem .8rem;border-radius:.6rem;border:none;background:transparent;color:var(--text-dark);font-weight:800;cursor:pointer;font-size:.75rem;transition:all .2s}.lang-btn.active{background:var(--text-dark);color:var(--bg-color)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);z-index:1000;display:flex;align-items:center;justify-content:center}.mobile-header-row{display:flex;justify-content:center;align-items:center;width:100%;position:relative;z-index:10;padding:0 .5rem;min-height:4rem;pointer-events:none}.mobile-header-row>*{pointer-events:auto}.exit-game-btn{position:fixed;top:1.5rem;left:1.5rem;z-index:100;height:3rem;width:auto;padding:0 1.2rem;border-radius:3rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid var(--glass-border);box-shadow:0 4px 12px #0000001a;color:var(--text-dark);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05rem;cursor:pointer;transition:all .2s ease}.exit-game-btn span:first-child{font-size:1.1rem;line-height:1}.exit-game-btn:hover{transform:translateY(-3px);background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 8px 20px #ef44444d}.exit-game-btn:active{transform:scale(.95)}.winner-badge{padding:.625rem 1.56rem;border-radius:3.125rem;color:#fff;display:inline-block;font-weight:800;margin-bottom:.93rem;margin-top:.5rem;text-transform:uppercase;animation:victory-pulse 2s infinite}.fab-stack{position:fixed;right:1.25rem;bottom:1.25rem;display:flex;flex-direction:column;gap:.75rem;z-index:999}.fab{width:100%;border:1px solid var(--border-color);background:var(--bg-color);box-shadow:var(--glass-shadow);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:2.8rem;padding:0 1.2rem;border-radius:2rem;transition:transform .18s ease;animation:fade-in-up .4s ease-out}.fab:active{transform:scale(.95)}.fab-text{font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--text-dark)}.fab-emoji{font-size:1.1rem}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes victory-pulse{0%{box-shadow:0 0 rgba(var(--winner-rgb),.5)}70%{box-shadow:0 0 0 20px rgba(var(--winner-rgb),0)}to{box-shadow:0 0 rgba(var(--winner-rgb),0)}}@keyframes trophy-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}}.trophy-container{margin-bottom:.5rem}.trophy-icon{font-size:4.5rem;display:inline-block;animation:trophy-bounce 2s infinite ease-in-out;filter:drop-shadow(0 .5rem 1rem rgba(0,0,0,.15))}@media(max-width:768px){.app-main-layout{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:.5rem;gap:.5rem;height:100dvh;overflow-y:auto;overflow-x:hidden}.landing-layout{justify-content:center;padding:1rem}.mobile-header-row{display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;width:100%;min-height:3rem;margin-bottom:.25rem;flex-shrink:0;z-index:20}.logo{grid-column:2;justify-self:center;margin:0!important;font-size:1.6rem;white-space:nowrap}.logo.large{font-size:2.2rem;margin-bottom:1rem}.exit-game-btn{position:static!important;grid-column:1;width:2.5rem!important;height:2.5rem!important;padding:0!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center;margin:0}.exit-game-btn span:last-child{display:none}.exit-game-btn span:first-child{font-size:1.1rem!important;margin:0}.theme-toggle-btn{position:static!important;grid-column:3;width:2.5rem!important;height:2.5rem!important;margin:0;transform:none!important}.modal-content{padding:1rem!important;width:100%!important;max-width:100%!important;margin:0 auto;height:auto;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}.modal-content h2{font-size:1.2rem;margin-bottom:.5rem!important}.modal-content>div[style*="background: white"]{padding:.5rem!important;margin-bottom:.25rem!important}.modal-content img[alt=QR]{width:7.5rem!important;height:7.5rem!important;max-width:35vw;max-height:35vw}.modal-content p{margin:.25rem 0!important;font-size:.8rem!important}.modal-content>div[style*="background: var(--bg-color)"]{padding:.5rem!important;margin:0 .5rem .5rem!important;width:auto!important;align-self:stretch}.teams-display{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:100%;margin-bottom:1rem}.grid{width:100%;height:auto;flex-grow:1;max-height:60vh;gap:.25rem;margin:.25rem 0}.card-face{font-size:clamp(.5rem,2.2vw,.8rem);padding:0}.status-panel{width:100%;padding:.4rem .8rem;margin:0;flex-shrink:0}.bottom-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-bottom:1rem;margin-top:auto;flex-shrink:0}.landing-lang-pos{display:none}}