:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--color-primary-50: #f9f9f9;--color-primary-100: #fac8dd;--color-primary-200: #f18ca2;--color-primary-250: #e08297;--color-primary-300: #e65654;--color-primary-400: #ba425a;--color-primary-500: #8e3058;--color-primary-600: #602049;--color-primary-700: #40353e;--ui-offset: 30px;--ui-handle-gap: 30px;--bg-color: #1a1a1a;--text-color: #ffffff;--button-bg: var(--color-primary-500);--button-text: #ffffff;--button-hover: var(--color-primary-400);color-scheme:dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-primary-300);text-decoration:inherit}a:hover{color:var(--color-primary-200)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100dvh}h1{font-size:3.2em;line-height:1.1;color:var(--color-primary-100)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-bg);color:var(--button-text);cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{background-color:var(--button-hover);border-color:var(--color-primary-200)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{--bg-color: #ffffff;--text-color: #213547;--button-bg: var(--color-primary-500);--button-text: #ffffff;--button-hover: var(--color-primary-600)}a:hover{color:var(--color-primary-500)}button{background-color:var(--button-bg);color:var(--button-text)}}body{background-color:var(--bg-color);background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px;font-family:Outfit,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100dvh;margin:0}@media(prefers-color-scheme:light){body{background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px)}}#root{width:100%;display:flex;justify-content:center;align-items:center}.card-game{background:#1e1e1e99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:40px;box-sizing:border-box;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column;gap:20px;max-width:400px;width:100%;animation:fadeIn .5s ease-out}.title-game{font-family:Rajdhani,sans-serif;font-weight:700;font-size:3.5rem;text-align:center;margin:0;background:linear-gradient(135deg,var(--color-primary-100),var(--color-primary-300));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(230,86,84,.3);letter-spacing:2px;text-transform:uppercase}.input-game{background:#0006;border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;font-size:1.1rem;color:var(--text-color);outline:none;transition:all .3s ease;font-family:Outfit,sans-serif;width:100%;box-sizing:border-box}.input-game:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px #8e305833;background:#0009}.btn-game{background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-600));color:#fff;border:none;border-radius:12px;padding:16px 32px;font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 0 var(--color-primary-700),0 10px 20px #0003;transition:all .1s;cursor:pointer;position:relative;overflow:hidden;width:100%;font-family:Outfit,sans-serif}.btn-game:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--color-primary-700),0 15px 30px #0000004d;filter:brightness(1.1)}.btn-game:active{transform:translateY(2px);box-shadow:0 2px 0 var(--color-primary-700),0 5px 10px #0003}.btn-game.secondary{background:transparent;border:2px solid var(--color-primary-500);box-shadow:none;color:var(--color-primary-200)}.btn-game.secondary:hover{background:#8e30581a;box-shadow:0 0 20px #8e305833;transform:translateY(-2px)}.btn-game.secondary:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes rotate{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeft{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.overlay-game{background:#141414cc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px 30px;box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:auto}.login-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.login-modal-card{background:#141e30d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:40px;max-width:500px;width:100%;box-shadow:0 25px 50px -12px #00000080;animation:slideUp .4s ease-out;display:flex;flex-direction:column;gap:32px;max-height:90vh;overflow-y:auto}.login-modal-header{text-align:center}.login-modal-title{font-family:Rajdhani,sans-serif;font-weight:700;font-size:3rem;margin:0;background:linear-gradient(135deg,var(--color-primary-300),var(--color-primary-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 20px rgba(236,72,153,.3))}.login-modal-subtitle{color:var(--color-primary-200);font-size:1rem;margin-top:8px;letter-spacing:1px;opacity:.8}.login-modal-actions{display:flex;flex-direction:column;gap:24px}.login-google-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:#fff;color:#1a1a1a;border:none;border-radius:16px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%}.login-google-btn:hover:not(:disabled){transform:scale(1.02);background-color:#fff}.login-divider{display:flex;align-items:center;gap:16px;color:#ffffff4d;font-size:.9rem;font-weight:500}.login-divider-line{flex:1;height:1px;background:#ffffff1a}.login-input{padding:16px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;font-size:1.1rem;outline:none;transition:all .2s ease;width:100%;text-align:center;box-sizing:border-box}.login-input:focus{border-color:var(--color-primary-500)}.login-host-btn{background:none;border:none;color:var(--color-primary-300);font-size:.9rem;cursor:pointer;text-decoration:underline;opacity:.8;transition:opacity .2s;margin-top:8px}.login-host-btn:hover{opacity:1}@media(max-height:500px)and (min-width:600px){:root{--ui-offset: 10px;--ui-handle-gap: 30px}.login-modal-card{flex-direction:row;align-items:center;justify-content:center;max-width:850px;padding:24px 40px;gap:40px}.login-modal-header{flex:1;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.login-modal-title{font-size:3.5rem;line-height:1}.login-modal-subtitle{margin-top:12px;font-size:1.1rem}.login-modal-actions{flex:1.2;gap:16px;width:100%}.login-google-btn,.login-input,.btn-game{padding:12px 16px;font-size:1rem}}.back-button-container,.game-header-controls{position:absolute;top:var(--ui-offset);z-index:1100;display:flex;align-items:center;height:40px;transition:all .3s ease}.back-button-container{left:var(--ui-offset)}.game-header-controls{right:var(--ui-offset);gap:12px}.back-btn,.fullscreen-btn,.status-badge-container{height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);background:#00000080!important;transition:all .2s ease;padding:0!important}.back-btn{padding:0 20px!important;border-radius:12px;color:var(--color-primary-200);font-weight:700;font-size:.9rem;gap:8px;cursor:pointer}@media(hover:hover){.back-btn:hover{background:#000c!important;border-color:var(--color-primary-500);transform:translate(-3px)}.fullscreen-btn:hover{background:#282828cc!important;border-color:#ffffff80;transform:scale(1.05)}}.fullscreen-btn{width:40px;border-radius:50%!important;color:#fff!important}.status-badge-container{padding:0 16px!important;border-radius:20px;font-weight:700;font-size:.8rem;letter-spacing:1px;border-color:var(--color-primary-500);gap:8px}.status-badge-container.spectator{background:#8e30584d;color:var(--color-primary-200)}.status-badge-container.host{background:#1e1e1e99;color:#aaa;border-color:#fff3}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.connected{background:#4ade80;box-shadow:0 0 8px #4ade80}.status-dot.connecting{background:#f87171;animation:pulse 1.5s infinite}@media(max-width:600px){.back-button-container,.game-header-controls{top:var(--ui-offset)!important;height:34px}.back-button-container{left:var(--ui-offset)}.game-header-controls{right:var(--ui-offset);gap:8px}.back-btn,.fullscreen-btn,.status-badge-container{height:34px}.back-btn{padding:0 12px;font-size:.8rem;border-radius:10px}.fullscreen-btn{width:34px}.status-badge-container{padding:0 10px;font-size:.65rem}.badge-text{display:none}}.game-hud-container{position:absolute;bottom:var(--ui-offset);left:var(--ui-offset);pointer-events:none;z-index:10;transition:all .3s ease}.qr-display-container{position:absolute;bottom:var(--ui-offset);right:var(--ui-offset);z-index:10;transition:all .3s ease}.join-next-container{position:absolute;bottom:40px;left:50%;transform:translate(-50%);z-index:100;width:90%;max-width:400px;transition:all .3s ease}.back-button-container{position:absolute;top:var(--ui-offset);left:var(--ui-offset);z-index:1000;transition:all .3s ease}.host-devtools-container{position:absolute;top:10px;right:20px;z-index:250;display:flex;gap:10px;flex-wrap:wrap;max-width:300px}@media(max-width:600px)and (orientation:portrait){:root{--ui-offset: 20px}.host-devtools-container{display:none}.game-hud-container{bottom:auto;top:70px;left:var(--ui-offset);right:var(--ui-offset);display:flex;justify-content:center}.game-hud-container .overlay-game{padding:8px 16px;width:100%;max-width:280px;text-align:center}.game-hud-container .title-game{font-size:1rem!important}.qr-display-container{bottom:var(--ui-offset);right:var(--ui-offset);transform:scale(.65);transform-origin:bottom right}.back-button-container{top:10px;left:10px}.back-button-container button{padding:8px 12px;font-size:.8rem}.join-next-container{bottom:100px}}@media(max-height:500px)and (min-width:600px){.game-hud-container{bottom:var(--ui-offset);left:var(--ui-offset);transform:scale(.7);transform-origin:bottom left}.qr-display-container{bottom:var(--ui-offset);right:var(--ui-offset);transform:scale(.6);transform-origin:bottom right}.back-button-container{top:var(--ui-offset);left:var(--ui-offset);transform:scale(.8);transform-origin:top left}.join-next-container{bottom:15px;max-width:220px;transform:translate(-50%) scale(.8)}.host-devtools-container{transform:scale(.6);transform-origin:top right;max-width:200px;right:60px}}.host-settings-handle{position:absolute;bottom:var(--ui-offset);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto;transition:right .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}.user-controls-overlay{position:fixed;top:10px;right:20px;z-index:100}.btn-icon-soft{background:#ffffff1a;border:none;border-radius:8px;color:#ffffffb3;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn-icon-soft:hover{background:#fff3;color:#fff;transform:scale(1.1)}.home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100dvh;padding:20px;gap:30px;overflow-y:auto;box-sizing:border-box;background:radial-gradient(circle at center,hsla(330,40%,20%,.4) 0%,transparent 70%)}.hero-section{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;animation:fadeIn .8s ease-out;flex:0 0 auto}.hero-icon{color:var(--color-primary-400);animation:pulse 2s ease-in-out infinite;filter:drop-shadow(0 0 20px var(--color-primary-500))}.hero-title{font-family:Rajdhani,sans-serif;font-size:4rem;margin:0;background:linear-gradient(135deg,var(--color-primary-300),var(--color-primary-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 0 40px var(--color-primary-500);line-height:.9;animation:slideDown .6s ease-out}.hero-subtitle{font-size:1.1rem;color:#aaa;margin:0;letter-spacing:2px;animation:slideDown .6s ease-out .1s backwards}.menu-panel{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:450px;animation:slideUp .6s ease-out .2s backwards}.menu-card-primary{width:100%;padding:30px}.room-input-group{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:20px}.room-input-label{font-size:.8rem;color:var(--color-primary-200);letter-spacing:1px;font-weight:700}.room-actions{display:flex;flex-direction:column;gap:12px;width:100%}.active-rooms-card{width:100%;overflow:hidden;transition:all .4s ease-in-out;padding:0;background:#1e1e1e66;border:1px solid rgba(255,255,255,.1)}.active-rooms-card.empty{background:transparent;border:none;box-shadow:none;padding:0;border:1px solid rgba(255,255,255,.1)}.active-rooms-header{margin:20px 0 10px;font-size:1.1rem;color:var(--color-primary-200);letter-spacing:1px;text-align:center;font-weight:700}.active-rooms-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;overflow-x:hidden;padding:10px 20px 24px}.room-card-item{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}.room-card-item:hover{background:#ffffff14;border-color:var(--color-primary-400);transform:translateY(-2px)}.room-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.room-card-name{font-weight:700;font-size:1.1rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.room-card-footer{display:flex;justify-content:space-between;align-items:end}.room-card-info{display:flex;gap:12px;align-items:center;color:#fff9;font-size:.8rem;font-weight:500}.room-card-actions{display:flex;gap:8px}.room-action-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;color:var(--color-primary-200);display:flex;align-items:center;justify-content:center;transition:all .2s}.room-action-btn:hover{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-400)}.status-badge{padding:4px 8px;border-radius:6px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.status-badge.lobby{background:#10b98126;color:#10b981;border:1px solid rgba(16,185,129,.3)}.status-badge.playing{background:#f59e0b26;color:#f59e0b;border:1px solid rgba(245,158,11,.3)}@media(prefers-color-scheme:light){.room-card-item{background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0000000d}.room-card-item:hover{background:#f9fafb;border-color:var(--color-primary-500)}.room-card-name{color:#111827}.room-card-info{color:#6b7280}.room-action-btn{background:#f3f4f6;border-color:#e5e7eb;color:var(--color-primary-600)}}.home-footer{text-align:center;color:#666;font-size:.8rem;padding-top:10px;width:100%}@media(max-height:500px)and (min-width:600px){.home-container{padding:20px;justify-content:center;align-items:center;height:100dvh;min-height:100%;overflow:hidden;background:radial-gradient(circle at center,hsla(330,40%,15%,.6) 0%,transparent 80%)}.hero-section{position:absolute;top:10px;left:20px;flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:0;width:auto;z-index:10;animation:none;border:none;background:none;flex:0 0 auto}.hero-icon{width:24px;height:35px;animation:none}.hero-title{font-size:1.2rem;margin:0;text-shadow:none;font-weight:700;letter-spacing:1px}.hero-subtitle{display:none}.menu-panel{flex-direction:row;align-items:stretch;justify-content:center;width:100%;max-width:900px;height:100%;max-height:300px;gap:40px;padding:0;animation:none;margin-top:30px}.menu-card-primary{flex:1;padding:20px;background:none;box-shadow:none;margin:0;display:flex;flex-direction:column;justify-content:center;max-width:none;border-bottom:none;border:1px solid rgba(255,255,255,.1)}.active-rooms-card{flex:1;margin:0;background:#14141e66;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;display:flex;flex-direction:column;max-height:100%!important;max-width:none}.active-rooms-card.empty{background:#14141e66;border:1px solid rgba(255,255,255,.1);align-items:stretch;justify-content:flex-start;box-shadow:none;padding:16px}.active-rooms-header{margin:0 0 8px;font-size:.9rem;text-align:left;padding-left:0;opacity:.8;text-transform:uppercase;letter-spacing:1.5px}.active-rooms-list{max-height:none;flex:1;padding:8px}.room-input-group{margin-bottom:20px}.input-game{font-size:1.1rem;padding:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.input-game:focus{background:#ffffff1a;border-color:var(--color-primary-400)}.home-footer{display:none}}@media(prefers-color-scheme:light)and (max-height:500px)and (min-width:600px){.home-container{background:radial-gradient(circle at center,hsla(330,40%,70%,.12) 0%,transparent 80%)}}@media(prefers-color-scheme:light){.home-container{background:radial-gradient(circle at center,hsla(330,40%,70%,.15) 0%,transparent 70%)}.btn-icon-soft{background:#0000000d;color:var(--color-primary-600);border:1px solid rgba(0,0,0,.12)}.btn-icon-soft:hover{background:#0000001a;color:var(--color-primary-500)}.input-game{background:#ffffffe6;border:2px solid rgba(0,0,0,.15);color:var(--text-color)}.input-game:focus{border-color:var(--color-primary-500);background:#fff;box-shadow:0 0 0 4px #8e305826}.card-game{background:#ffffffe6;border:1px solid rgba(0,0,0,.1);box-shadow:0 10px 40px #00000014}.active-rooms-card{background:#fafafaf2;border:1px solid rgba(0,0,0,.1)}.active-rooms-card.empty{background:#fafafacc;border:1px solid rgba(0,0,0,.08)}.active-rooms-header{color:var(--color-primary-500)}.active-rooms-list{color:var(--text-color)}.btn-game.secondary{background:transparent;border:2px solid var(--color-primary-400);color:var(--color-primary-500)}.btn-game.secondary:hover{background:#8e305814}}