:root{--red: #e63946;--blue: #0096ff;--neutral: #94a3b8;--black: #0f172a;--text-dark: #001b3d;--bg-color: #f8fafc;--dot-color: #cbd5e1;--border-color: rgb(227, 227, 227);--glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .18));--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 .5rem 2rem 0 rgba(31, 38, 135, .15), inset 0 .0625rem .0625rem rgba(255, 255, 255, .4)}[data-theme=dark]{--bg-color: #0b1120;--dot-color: #1e293b;--text-dark: #f8fafc;--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 .5rem 2rem 0 rgba(0, 0, 0, .5), inset 0 .0625rem .0625rem rgba(255, 255, 255, .05);--black: #ffffff}*{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;height:100dvh;padding:.625rem;max-width:56.25rem;margin:0 auto}.logo{font-weight:800;font-size:1.8rem;letter-spacing:-.1rem;margin-bottom:.5rem}.logo .blue-part{color:var(--blue)}.logo .red-part{color:var(--red)}.system-controls{display:flex;gap:.5rem;margin-bottom:.3rem;background:var(--glass-bg);backdrop-filter:blur(.9rem) saturate(160%);-webkit-backdrop-filter:blur(.9rem) saturate(160%);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 cubic-bezier(.4,0,.2,1)}.system-controls button:hover{transform:translateY(-.25rem)}.btn-new-game:hover{background:#16a34a!important;color:#fff!important}.system-controls button.active{background:var(--text-dark);color:var(--bg-color)!important}.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:.625rem}.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)}.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)}.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:.75rem;width:100%;max-width:50rem;flex-grow:1;margin:1rem 0;background:transparent!important;box-shadow:none!important}.card{position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.23,1,.32,1);width:100%;height:100%}.card:not(.revealed):hover{transform:translateY(-.625rem)}.card:not(.revealed):not(.spymaster-active .card):hover .card-front{background:color-mix(in srgb,var(--turn-color),transparent 85%);backdrop-filter:blur(.9rem) saturate(180%);-webkit-backdrop-filter:blur(.9rem) saturate(180%);border:.0625rem solid var(--turn-color);box-shadow:0 .75rem 1.875rem color-mix(in srgb,var(--turn-color),transparent 80%);color:var(--turn-color)}.spymaster-active .card:hover{cursor:default}.card.revealed{transform:rotateY(180deg)}.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:.375rem;border-radius:.75rem;font-weight:700;font-size:clamp(.6rem,1.8vh,.85rem);border:.0625rem solid var(--glass-border);transition:all .4s ease}.card-front{background:var(--glass-bg);-webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem);color:var(--text-dark);box-shadow:var(--glass-shadow)}.spymaster-active .card.red .card-front{border:.0625rem solid var(--red)!important;color:var(--red);background:#e639461a}.spymaster-active .card.blue .card-front{border:.0625rem solid var(--blue)!important;color:var(--blue);background:#0096ff1a}.spymaster-active .card.neutral .card-front{border:.0625rem solid var(--neutral)!important;color:#64748b;background:#94a3b81a}.spymaster-active .card.black .card-front{border:.0625rem solid #000!important;color:#fff;background:#111}.card-back{transform:rotateY(180deg);color:#fff;border:none}.red .card-back{background:linear-gradient(135deg,#ef4444,#b91c1c)}.blue .card-back{background:linear-gradient(135deg,#0096ff,#0056b3)}.neutral .card-back{background:var(--neutral);color:#fff}.black .card-back{background:#000;color:#fff}.btn-main-action{padding:.75rem 3.125rem;border-radius:3.125rem;background:var(--black);color:var(--bg-color);border:none;font-weight:800;text-transform:uppercase;cursor:pointer;box-shadow:var(--glass-shadow);transition:all .3s ease}.bottom-actions .btn-main-action:hover{background:var(--turn-color)!important;transform:translateY(-.125rem);box-shadow:0 .3125rem 1.25rem var(--turn-color)}.theme-toggle-btn,#mini-qr-btn{background:var(--glass-bg)!important;border:.0625rem solid var(--border-color);box-shadow:var(--glass-shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100}#mini-qr-btn{position:fixed;bottom:1.25rem;right:1.25rem;width:auto;height:2.8rem;padding:0 1.2rem;border-radius:2rem;gap:.6rem;font-size:1.1rem}#mini-qr-btn .btn-text{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05rem;white-space:nowrap}.theme-toggle-btn{position:fixed;bottom:1.25rem;left:1.25rem;width:2.8rem;height:2.8rem;border-radius:50%}.language-bar{position:fixed;top:1.25rem;right:1.25rem;display:flex;gap:.25rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(.625rem);backdrop-filter:blur(.625rem);border-radius:.75rem;padding:.25rem;z-index:100;border:.0625rem solid var(--glass-border)}.lang-btn{padding:.25rem .75rem;border-radius:.5rem;border:none;background:transparent;color:var(--text-dark);font-weight:800;cursor:pointer;font-size:.65rem}.lang-btn.active{background:var(--black);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}.modal-content{background:var(--bg-color);padding:1.875rem;border-radius:2.2rem;text-align:center;border:.0625rem solid var(--glass-border);box-shadow:0 1.875rem 3.75rem #0006;width:85%;max-width:23.75rem}.winner-badge{padding:.625rem 1.56rem;border-radius:3.125rem;color:#fff;display:inline-block;font-weight:800;margin-bottom:.93rem}.full-width{width:100%}@media(max-width:767px){body{overflow-y:auto;height:auto;min-height:100dvh}.mobile-header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:.5rem;margin-bottom:.5rem;gap:.5rem}.language-bar{position:static!important;grid-column:1;justify-self:start;background:var(--glass-bg);border-radius:.75rem;padding:.15rem;border:.0625rem solid var(--glass-border);display:flex;gap:.25rem}.logo{font-size:1.4rem!important;margin:0!important;text-align:center;grid-column:2;justify-self:center;display:flex;align-items:center;line-height:1}.theme-toggle-btn{position:static!important;width:2.6rem!important;height:2.6rem!important;grid-column:3;justify-self:end;margin:0;font-size:1.2rem}#mini-qr-btn{display:flex!important}.btn-new-game:hover{background:transparent!important;color:var(--text-dark)!important;transform:none!important}.system-controls button:hover{transform:none!important}.app-main-layout{justify-content:flex-start;gap:.75rem;padding:.5rem;height:auto;min-height:100dvh}.system-controls{width:100%;display:flex;justify-content:stretch;gap:.5rem;padding:.5rem}.system-controls button{flex:1;padding:.7rem .5rem;font-size:.75rem;text-align:center;white-space:nowrap}.status-panel{padding:.5rem .75rem;border-radius:1rem;margin-top:0}.team-score{font-size:.8rem}.current-turn{padding:.25rem .6rem;font-size:.65rem}.grid{gap:.4rem;margin:.5rem 0;min-height:50vh}.card-face{padding:.2rem;border-radius:.4rem;word-break:break-all;line-height:1}.bottom-actions{width:100%;padding-bottom:4rem}.btn-main-action{width:100%;padding:.8rem}.mobile-spy-container{padding:1rem;min-height:100dvh;width:100%}.mobile-grid{width:100%;aspect-ratio:1/1}}
