.room-page{padding:0;padding-top:var(--page-header-height, 70px);margin:0;min-height:100vh;width:100%;box-sizing:border-box;background:linear-gradient(135deg,#1e293b,#0f172a);overflow-x:hidden;display:flex;flex-direction:column;transition:padding-top .3s ease}.page-header__room-name{color:var(--color-primary-400, #60a5fa);font-size:clamp(10px,calc(14px * var(--font-scale-base, 1)),16px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(80px,calc(200px * var(--size-scale-base, 1)),250px);transition:font-size .3s ease,max-width .3s ease}.room-grid{display:flex;flex-direction:column;gap:clamp(1rem,3vw,1.5rem);max-width:1400px;margin:0 auto;min-height:calc(100vh - var(--page-header-height, 70px));padding:clamp(.5rem,2vw,1rem) clamp(.75rem,3vw,1.5rem);width:100%;box-sizing:border-box;position:relative;flex:1}.room-control-section{display:flex;gap:calc(1rem * var(--spacing-scale-base, 1));flex-shrink:0;width:100%;position:relative;z-index:1;transition:gap .3s ease}.room-chat-players-section{display:flex;gap:clamp(1rem,3vw,1.5rem);flex:1 1 auto;min-height:0;align-items:flex-start;width:100%;box-sizing:border-box;position:relative;z-index:0}@media (max-width: 480px){.room-chat-players-section{flex:0 0 auto}}.chat-column{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;transition:height .3s ease-in-out;box-sizing:border-box}.players-column{display:flex;flex-direction:column;flex:3;min-height:0;min-width:0;transition:height .3s ease-in-out;box-sizing:border-box}.players-column__content{display:flex;flex-direction:column;gap:calc(1.5rem * var(--spacing-scale-base, 1));width:100%;min-height:0;transition:gap .3s ease}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.5rem * var(--spacing-scale-base, 1));min-height:50vh;padding:calc(2rem * var(--spacing-scale-base, 1));text-align:center;transition:gap .3s ease,padding .3s ease}.loading-container h2{color:#fff;font-size:clamp(1rem,3vw,1.25rem);margin:0;font-weight:500;word-wrap:break-word;overflow-wrap:break-word}.error-container{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,3vw,1.5rem);padding:clamp(1rem,4vw,2rem);box-sizing:border-box;width:100%}.error-container p{color:#fca5a5;font-size:clamp(.9rem,2.5vw,1.125rem);margin:0;word-wrap:break-word;overflow-wrap:break-word;text-align:center}.error-container button{padding:clamp(.5rem,2vw,.75rem) clamp(1rem,3vw,1.5rem);background:#3b82f6;color:#fff;border:none;border-radius:.375rem;cursor:pointer;font-size:clamp(.875rem,2.5vw,1rem);box-sizing:border-box;min-width:min(120px,100%)}.error-container button:hover{background:#2563eb}.room-page__session-error{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:calc(2rem * var(--spacing-scale-base, 1));transition:padding .3s ease}.session-error-card{background:#1e293bf2;border:calc(2px * var(--border-scale-base, 1)) solid #ef4444;border-radius:calc(1rem * var(--radius-scale-base, 1));padding:calc(2rem * var(--spacing-scale-base, 1));max-width:clamp(300px,calc(600px * var(--size-scale-base, 1)),700px);width:100%;box-shadow:0 calc(10px * var(--size-scale-base, 1)) calc(25px * var(--size-scale-base, 1)) #00000080;transition:padding .3s ease,border-radius .3s ease}.session-error-title{color:#fca5a5;font-size:clamp(1.25rem,calc(1.5rem * var(--font-scale-base, 1)),1.75rem);font-weight:700;margin:0 0 calc(1rem * var(--spacing-scale-base, 1)) 0;text-align:center;transition:font-size .3s ease}.session-error-message{color:#e5e7eb;font-size:clamp(.9rem,calc(1rem * var(--font-scale-base, 1)),1.125rem);line-height:1.6;margin:0 0 calc(1.5rem * var(--spacing-scale-base, 1)) 0;text-align:center;transition:font-size .3s ease}.session-error-details{background:#0f172a99;border-left:calc(4px * var(--border-scale-base, 1)) solid #f59e0b;padding:calc(1rem * var(--spacing-scale-base, 1));margin:calc(1.5rem * var(--spacing-scale-base, 1)) 0;border-radius:calc(.5rem * var(--radius-scale-base, 1));transition:padding .3s ease,margin .3s ease}.session-error-details p{color:#f59e0b;font-size:clamp(.75rem,calc(.875rem * var(--font-scale-base, 1)),1rem);font-weight:600;margin:0 0 calc(.75rem * var(--spacing-scale-base, 1)) 0;transition:font-size .3s ease}.session-error-details ul{color:#d1d5db;font-size:clamp(.75rem,calc(.875rem * var(--font-scale-base, 1)),1rem);line-height:1.6;margin:0;padding-left:calc(1.5rem * var(--spacing-scale-base, 1));transition:font-size .3s ease,padding-left .3s ease}.session-error-details li{margin-bottom:calc(.5rem * var(--spacing-scale-base, 1))}.session-error-instruction{color:#cbd5e1;font-size:clamp(.85rem,calc(.95rem * var(--font-scale-base, 1)),1.05rem);line-height:1.6;margin:calc(1.5rem * var(--spacing-scale-base, 1)) 0;text-align:center;font-weight:500;transition:font-size .3s ease}.session-error-button{display:block;width:100%;padding:calc(.875rem * var(--spacing-scale-base, 1)) calc(1.5rem * var(--spacing-scale-base, 1));background:#3b82f6;color:#fff;border:none;border-radius:calc(.5rem * var(--radius-scale-base, 1));cursor:pointer;font-size:clamp(.875rem,calc(1rem * var(--font-scale-base, 1)),1.125rem);font-weight:600;transition:all .2s ease,padding .3s ease,font-size .3s ease;margin-top:calc(1rem * var(--spacing-scale-base, 1));min-height:clamp(36px,calc(44px * var(--size-scale-base, 1)),48px)}.session-error-button:hover{background:#2563eb;transform:translateY(calc(-2px * var(--size-scale-base, 1)));box-shadow:0 calc(4px * var(--size-scale-base, 1)) calc(12px * var(--size-scale-base, 1)) #3b82f666}.session-error-button:active{transform:translateY(0)}@media (max-width: 768px){.room-page{padding-left:calc(.5rem * var(--spacing-scale-base, 1));padding-right:calc(.5rem * var(--spacing-scale-base, 1));padding-bottom:calc(.5rem * var(--spacing-scale-base, 1))}.room-grid{padding:0 calc(.5rem * var(--spacing-scale-base, 1));gap:calc(1rem * var(--spacing-scale-base, 1));width:100%}.room-control-section{width:100%;margin:0}.room-chat-players-section{flex-direction:column;gap:calc(1rem * var(--spacing-scale-base, 1))}.chat-column,.players-column{flex:none;width:100%}}@media (max-width: 480px){.room-page{padding-left:calc(.5rem * var(--spacing-scale-base, 1));padding-right:calc(.5rem * var(--spacing-scale-base, 1));padding-bottom:calc(.5rem * var(--spacing-scale-base, 1))}.room-grid{padding:0 calc(.5rem * var(--spacing-scale-base, 1));gap:calc(.75rem * var(--spacing-scale-base, 1))}.room-control-section{gap:calc(.5rem * var(--spacing-scale-base, 1))}.room-chat-players-section{flex-direction:column;gap:calc(.75rem * var(--spacing-scale-base, 1))}.players-column{flex:0 0 auto;width:100%}.chat-column{flex:1;width:100%}}@media (max-width: 360px){.room-page{padding-left:calc(.375rem * var(--spacing-scale-base, 1));padding-right:calc(.375rem * var(--spacing-scale-base, 1));padding-bottom:calc(.375rem * var(--spacing-scale-base, 1))}.room-grid{padding:0 calc(.375rem * var(--spacing-scale-base, 1));gap:calc(.5rem * var(--spacing-scale-base, 1))}}.room-match-info{background:#1e293bcc;border:calc(2px * var(--border-scale-base, 1)) solid rgba(59,130,246,.3);border-radius:calc(12px * var(--radius-scale-base, 1));padding:calc(20px * var(--spacing-scale-base, 1));margin-top:calc(1rem * var(--spacing-scale-base, 1));display:flex;flex-direction:column;gap:calc(16px * var(--spacing-scale-base, 1));width:100%;box-sizing:border-box;transition:padding .3s ease,gap .3s ease,border-radius .3s ease}.room-match-info__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:calc(12px * var(--spacing-scale-base, 1));border-bottom:calc(2px * var(--border-scale-base, 1)) solid rgba(59,130,246,.2);transition:padding-bottom .3s ease}.room-match-info__title{font-size:clamp(16px,calc(18px * var(--font-scale-base, 1)),20px);font-weight:600;color:#fff;margin:0;transition:font-size .3s ease}.room-match-info__progress{font-size:clamp(14px,calc(16px * var(--font-scale-base, 1)),18px);font-weight:600;color:#c4b5fd;padding:calc(6px * var(--spacing-scale-base, 1)) calc(12px * var(--spacing-scale-base, 1));background:#c4b5fd33;border-radius:calc(6px * var(--radius-scale-base, 1));border:calc(1px * var(--border-scale-base, 1)) solid rgba(196,181,253,.3);transition:font-size .3s ease,padding .3s ease}.room-match-info__points{display:flex;flex-direction:column;gap:calc(12px * var(--spacing-scale-base, 1));transition:gap .3s ease}.room-match-info__points-title{font-size:clamp(14px,calc(16px * var(--font-scale-base, 1)),18px);font-weight:600;color:#fff;margin:0;transition:font-size .3s ease}.room-match-info__points-list{display:flex;flex-direction:column;gap:calc(8px * var(--spacing-scale-base, 1));transition:gap .3s ease}.room-match-info__points-item{display:flex;align-items:center;gap:calc(12px * var(--spacing-scale-base, 1));padding:calc(12px * var(--spacing-scale-base, 1)) calc(16px * var(--spacing-scale-base, 1));background:#33415599;border-radius:calc(8px * var(--radius-scale-base, 1));border:calc(2px * var(--border-scale-base, 1)) solid transparent;transition:all .2s ease,padding .3s ease,gap .3s ease}.room-match-info__points-item:hover{background:#334155cc}.room-match-info__points-item--current{border-color:#c4b5fd;background:#c4b5fd26}.room-match-info__points-rank{font-size:clamp(12px,calc(14px * var(--font-scale-base, 1)),16px);font-weight:600;color:#60a5fa;min-width:clamp(35px,calc(40px * var(--size-scale-base, 1)),45px);transition:font-size .3s ease}.room-match-info__points-name{flex:1;font-size:clamp(13px,calc(14px * var(--font-scale-base, 1)),16px);font-weight:500;color:#fff;display:flex;align-items:center;gap:calc(6px * var(--spacing-scale-base, 1));transition:font-size .3s ease}.room-match-info__you-badge{font-size:clamp(9px,calc(11px * var(--font-scale-sm, 1)),13px);color:#c4b5fd;font-weight:400;padding:calc(2px * var(--spacing-scale-sm, 1)) calc(6px * var(--spacing-scale-base, 1));background:#c4b5fd33;border-radius:calc(4px * var(--radius-scale-base, 1));transition:font-size .3s ease,padding .3s ease}.room-match-info__points-value{font-size:clamp(14px,calc(16px * var(--font-scale-base, 1)),18px);font-weight:700;color:#60a5fa;min-width:clamp(50px,calc(60px * var(--size-scale-base, 1)),70px);text-align:right;transition:font-size .3s ease}.room-match-info__actions{display:flex;justify-content:center;padding-top:calc(8px * var(--spacing-scale-base, 1));transition:padding-top .3s ease}.room-match-info__next-game-button{padding:calc(12px * var(--spacing-scale-base, 1)) calc(24px * var(--spacing-scale-base, 1));background:#3b82f6;color:#fff;border:none;border-radius:calc(8px * var(--radius-scale-base, 1));font-size:clamp(14px,calc(16px * var(--font-scale-base, 1)),18px);font-weight:600;cursor:pointer;transition:all .2s ease,padding .3s ease,font-size .3s ease;min-width:clamp(160px,calc(200px * var(--size-scale-base, 1)),240px);min-height:clamp(36px,calc(44px * var(--size-scale-base, 1)),48px)}.room-match-info__next-game-button:hover:not(:disabled){background:#2563eb;transform:translateY(calc(-2px * var(--size-scale-base, 1)));box-shadow:0 calc(4px * var(--size-scale-base, 1)) calc(12px * var(--size-scale-base, 1)) #3b82f666}.room-match-info__next-game-button:disabled{background:#3b82f64d;cursor:not-allowed;opacity:.6}.control-section{background:#1e293bcc;border-radius:.75rem;overflow:hidden;height:fit-content;display:flex;flex-direction:column;padding:.5rem;border:1px solid rgba(59,130,246,.3);box-shadow:0 8px 24px #0006;width:100%;max-width:100%;min-height:auto}.control-section__row{display:flex;align-items:center;width:100%;gap:.5rem;flex-wrap:wrap}.control-section__row--primary{justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:nowrap;gap:.5rem;display:flex}.control-section__row--secondary{margin-bottom:0;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.5rem;display:flex}.control-section__row--secondary>*{flex:1 1 auto;min-width:0}.control-section__room-name-section{display:grid;grid-template-columns:auto 1fr auto;align-items:flex-end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;gap:.25rem;border-bottom:1px solid rgba(59,130,246,.2);padding-bottom:.1rem}.control-section__room-actions-section{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.control-section__room-name-label{font-size:.65rem;font-weight:600;color:#94a3b8;padding:0 .5rem;white-space:nowrap;flex-shrink:0;line-height:1}.control-section__room-name-text{font-size:clamp(1.125rem,4vw,1.625rem);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.control-section__lock-icon{flex-shrink:0;color:#94a3b8;margin-left:.25rem;align-self:center}.control-section__icon-btn{width:1.75rem;height:1.75rem;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:1.75rem}.control-section__icon-btn svg{flex-shrink:0}.control-section__leave-btn{background:linear-gradient(135deg,#c73737,#8f3d19)!important;border:2px solid rgba(239,68,68,.3)!important;box-shadow:0 2px 8px #ef444433!important}.control-section__leave-btn:hover:not(.btn--disabled){background:linear-gradient(135deg,#dc2626,#b91c1c)!important;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d!important;border-color:#ef444480!important}.control-section__rules-btn,.control-section__game-btn{font-weight:600;padding:.375rem .75rem;height:2rem;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:.375rem}.control-section__game-rules-container{flex:1 1 auto;min-width:0;max-width:100%}.control-section__game-rules-text{font-size:.875rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.control-section{padding:clamp(.5rem,2vw,.75rem)}.control-section__row{gap:.5rem}.control-section__row--primary{flex-wrap:nowrap;justify-content:space-between;margin-bottom:.5rem}.control-section__row--secondary{flex-wrap:nowrap;justify-content:space-between}.control-section__room-name-section{flex:1 1 auto;min-width:0}.control-section__room-actions-section{flex-wrap:nowrap;justify-content:flex-end;flex-shrink:0}.control-section__icon-btn{width:1.75rem;height:1.75rem;min-width:1.75rem}.control-section__game-rules-container{flex:0 1 auto;min-width:0}.control-section__rules-btn,.control-section__game-btn{flex:1 1 auto;min-width:0}}@media (max-width: 480px){.control-section{padding:.5rem}.control-section__row{gap:.375rem}.control-section__row--secondary{flex-wrap:nowrap;gap:.375rem}.control-section__game-rules-text{font-size:clamp(.7rem,2.5vw,.75rem)}.control-section__room-actions-section{width:auto;justify-content:flex-end;flex-shrink:0}.control-section__room-actions-section>*{flex:0 0 auto;min-width:1.75rem}.control-section__game-rules-container{flex:0 1 auto;min-width:0;max-width:50%}.control-section__rules-btn,.control-section__game-btn{font-size:clamp(.75rem,2.5vw,.875rem);padding:.375rem .5rem;flex:1 1 auto;min-width:0}}@media (max-width: 360px){.control-section{padding:.375rem}.control-section__row{gap:.25rem}.control-section__room-name-label{font-size:.6rem;padding:0 .25rem}}.player-info-modal{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem}.player-info-modal__avatar-section,.player-info-modal__name-section{display:flex;justify-content:center;align-items:center;width:100%}.player-info-modal__name{margin:0;font-size:1.5rem;font-weight:600;color:#fff;text-align:center;word-break:break-word}.player-info-modal__attributes{display:flex;flex-direction:column;gap:.75rem;width:100%;align-items:center}.player-info-modal__attribute{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:.5rem;width:100%;justify-content:center}.player-info-modal__attribute-label{font-size:.875rem;font-weight:500;color:#e2e8f0}.player-info-modal__actions{display:flex;justify-content:center;align-items:center;width:100%;gap:.5rem}.room-player-card{--card-padding: .5rem;--card-height: 2rem;--card-border-radius: 2rem;--card-gap: .5rem;--card-transition: all .15s ease-in-out}.room-player-card{display:flex;flex-direction:row;align-items:center;gap:var(--card-gap);height:var(--card-height);padding:var(--card-padding);background:#1e293bcc;border:1px solid rgba(59,130,246,.3);border-radius:var(--card-border-radius);box-shadow:0 4px 12px #00000026;transition:var(--card-transition);position:relative;flex:1;min-width:0}.room-player-card:hover{background:#ffffff1a;border-color:#3b82f680;box-shadow:0 6px 16px #0003}.room-player-card--current{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.room-player-card__main{display:flex;align-items:center;gap:var(--card-gap);flex:1;min-width:0;width:100%}.room-player-card__avatar-wrapper{position:relative;display:inline-flex;flex-shrink:0}.room-player-card__status-indicator{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(30,41,59,.9);box-shadow:0 1px 3px #0000004d;transition:all .2s ease-in-out;z-index:1}.room-player-card__status-indicator--online{background-color:#22c55e}.room-player-card__status-indicator--offline{background-color:#ef4444}.room-player-card__name-container{flex:1;min-width:0;display:flex;width:100%;max-width:100%}.room-player-card__name-with-badges{display:flex;align-items:center;gap:.25rem;width:100%;min-width:0;flex:1}.room-player-card__badges{display:flex;align-items:center;gap:.25rem;flex-shrink:0;order:-1}.room-player-card__badge{flex-shrink:0}.host-badge,.cpu-badge{font-size:14px;opacity:.9;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}.host-badge:hover,.cpu-badge:hover{opacity:1;transform:scale(1.05)}.host-badge:active,.cpu-badge:active{transform:scale(1.1);transition:all .15s cubic-bezier(.4,0,.2,1)}.room-player-card .room-player-name,.room-player-card__name-container .room-player-name{display:block;margin:0;flex:1;min-width:0;order:1;font-size:clamp(.75rem,2.5vw,.875rem);font-weight:400;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-spacing:normal;font-variant-ligatures:none;text-rendering:optimizeSpeed;transition:font-size .2s ease-in-out}.room-player-card__reorder-buttons{display:flex;flex-direction:row;gap:4px;align-items:center;flex-shrink:0;margin-left:auto}.room-player-card__reorder-button{padding:2px 4px;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center}.room-player-card__actions{display:flex;flex-direction:row;gap:4px;align-items:center;flex-shrink:0;opacity:1;visibility:visible;transition:all .15s ease-in-out;position:relative;margin-left:auto}.room-player-card__reorder-buttons+.room-player-card__actions{margin-left:4px}@media (max-width: 768px) and (min-width: 481px){.room-player-card{--card-padding: clamp(.75rem, 2vw, 1rem);--card-gap: clamp(.75rem, 2vw, 1rem);flex-direction:row;height:var(--card-height)}.room-player-card__main{gap:var(--card-gap)}.room-player-card__actions{opacity:1;visibility:visible;position:relative;transform:none;margin-top:0;justify-content:center;width:auto;margin-left:auto}}@media (max-width: 480px){.room-player-card{--card-padding: .5rem;--card-gap: .5rem;flex-direction:row;align-items:center;height:var(--card-height)}.room-player-card__main{justify-content:flex-start;width:100%}.room-player-card__name-with-badges{flex-direction:row;align-items:center;gap:.25rem;width:100%}.room-player-card__badges{justify-content:flex-start;margin-top:0}.room-player-card__actions{position:relative;transform:none;margin-top:0;justify-content:center;opacity:1;visibility:visible;width:auto;margin-left:auto}}@media (max-width: 360px){.room-player-card{--card-padding: .375rem;--card-gap: .375rem}.room-player-card__avatar{font-size:1.25rem}}.player-management-section{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:#1e293bcc;border-radius:.75rem;padding:.5rem;border:1px solid rgba(59,130,246,.3);box-shadow:0 8px 24px #0006;width:100%;box-sizing:border-box;position:relative}.player-management-section__actions{display:flex;flex-direction:row;gap:1.5rem;margin-bottom:1rem;padding:0;background:transparent;border:none}.action-btn{flex:1;font-size:.875rem;padding:.5rem 1rem;min-height:2.5rem;border-radius:.5rem;font-weight:700;transition:all .15s ease-in-out}.action-btn--participant{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);color:#60a5fa}.action-btn--participant:hover:not(:disabled){background:#3b82f680;border-color:#3b82f666;color:#f6f6f6;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f633}.action-btn--spectator{background:#9ae9b714;border:1px solid rgba(154,233,183,.3);color:#6ee7b7}.action-btn--spectator:hover:not(:disabled){background:#9ae9b74d;border-color:#9ae9b71a;color:#f6f6f6;transform:translateY(-1px);box-shadow:0 4px 12px #9ae9b71a}.action-btn:disabled{background:#4b5563;border-color:#4b5563;color:#9ca3af;opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.player-management-section__players{display:flex;gap:1.5rem;flex:1;min-height:0}@media (max-width: 480px){.player-management-section__players{flex-direction:column;gap:1rem}}.player-management-section__participants,.player-management-section__spectators{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}@media (max-width: 480px){.player-management-section__participants,.player-management-section__spectators{flex:0 0 auto}}.section-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.section-header h3{margin:0;font-size:.875rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.5rem}.badge{font-size:.75rem;color:#94a3b8;background:#64748b33;padding:.125rem .5rem;border-radius:.375rem}.participants-list{display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:16rem;max-height:400px;overflow-y:auto;background:#3b82f614;border-radius:.5rem;padding:.5rem}.participants-list__item{display:flex;align-items:center;gap:.5rem;width:100%}.participants-list__order-number{display:flex;align-items:center;justify-content:center;min-width:1.75rem;width:1.75rem;height:1.75rem;background:#3b82f633;border:1px solid rgba(59,130,246,.4);border-radius:50%;color:#3b82f6;font-size:.75rem;font-weight:700;flex-shrink:0;line-height:1}@media (max-width: 480px){.participants-list{min-height:16rem;max-height:none;overflow-y:visible}}.spectators-list{display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto;background:#9ae9b714;border-radius:.5rem;padding:.5rem;min-height:fit-content}.spectators-list__item{display:flex;align-items:center;gap:.5rem;width:100%}@media (max-width: 480px){.spectators-list{overflow-y:visible;max-height:none}}.player-card{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#0f172a80;border-radius:.5rem;border:1px solid rgba(59,130,246,.2)}.player-card__main{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.player-card__avatar{font-size:1.5rem;flex-shrink:0}.player-card__name{font-size:.875rem;color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card__badge{font-size:.75rem;color:#60a5fa;margin-left:.25rem}.player-card__actions{flex-shrink:0}.spectators-empty{display:flex;align-items:center;justify-content:center;text-align:center;color:#64748b;font-size:.875rem;padding:1.5rem;opacity:.7;min-height:4rem;width:100%;border:1px dashed rgba(154,233,183,.2);border-radius:.5rem;background:#9ae9b708}.player-management-section__empty-slot{display:flex;align-items:center;justify-content:center;padding:.5rem;background:#6b72801a;border-radius:2rem;border:1px dashed rgba(107,114,128,.3);transition:all .15s ease-in-out;height:2rem;opacity:.6;font-size:1rem}.player-management-section__empty-slot:hover{opacity:1;background:#6b728026;border-color:#6b728080}.participants-list::-webkit-scrollbar,.spectators-list::-webkit-scrollbar{width:6px}.participants-list::-webkit-scrollbar-track,.spectators-list::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.participants-list::-webkit-scrollbar-thumb,.spectators-list::-webkit-scrollbar-thumb{background:#3b82f680;border-radius:3px}.participants-list::-webkit-scrollbar-thumb:hover,.spectators-list::-webkit-scrollbar-thumb:hover{background:#3b82f6b3}@media (max-width: 768px){.player-management-section{padding:clamp(.375rem,2vw,.5rem)}.player-management-section__players{flex-direction:column;gap:clamp(1rem,3vw,1.5rem)}.player-management-section__actions{flex-direction:row;gap:clamp(.75rem,2vw,1.5rem)}.action-btn{flex:1;font-size:clamp(.8rem,2.5vw,.875rem)}.participants-list{max-height:300px;min-height:16rem}.spectators-list{max-height:300px}}@media (max-width: 480px){.player-management-section{padding:.5rem}.player-management-section__actions{flex-direction:row;gap:.75rem}.section-header h3{font-size:clamp(.75rem,2.5vw,.875rem)}.badge{font-size:clamp(.7rem,2vw,.75rem)}.participants-list{max-height:none;padding:.375rem;min-height:16rem;overflow-y:visible}.spectators-list{max-height:none;padding:.375rem;overflow-y:visible}.player-card{padding:.375rem}.player-card__name{font-size:clamp(.8rem,2.5vw,.875rem)}}@media (max-width: 360px){.player-management-section__players{gap:1rem}.player-management-section__actions{flex-direction:row;gap:.75rem}.participants-list{max-height:200px;min-height:16rem}.spectators-list{max-height:200px}}.room-settings-modal{display:flex;flex-direction:column;gap:1rem}.room-settings-section{display:flex;flex-direction:column;gap:.75rem}.room-settings-section__title{font-size:1.125rem;font-weight:600;color:#fff;margin:0;padding-bottom:.5rem;border-bottom:1px solid rgba(59,130,246,.2)}.room-settings-field{display:flex;flex-direction:column;gap:.5rem}.room-settings-field:not(:last-child){border-bottom:1px solid rgba(59,130,246,.2);padding-bottom:.75rem;margin-bottom:.75rem}.room-settings-field__label{font-size:.875rem;font-weight:600;color:#cbd5e1}.room-settings-field__description{font-size:.75rem;color:#94a3b8;line-height:1.5}.room-settings-field__name-container{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.room-settings-field__input{flex:1;padding:.5rem;border:1px solid rgba(59,130,246,.3);border-radius:.5rem;background:#0f172a80;color:#fff;font-size:.875rem;font-family:inherit;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.room-settings-field__save-btn{flex-shrink:0;white-space:nowrap}.room-settings-field__input:focus{outline:none;border-color:#3b82f699;box-shadow:0 0 0 3px #3b82f61a}.room-settings-field__input::placeholder{color:#64748b}.room-settings-field__id-container{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.room-settings-field__id-wrapper{flex:1;position:relative;display:flex;align-items:center;border:1px solid rgba(59,130,246,.3);border-radius:.5rem;background:#0f172a80;overflow:hidden}.room-settings-field__id-value{flex:1;padding:.5rem .375rem .5rem .5rem;color:#fff;font-size:.875rem;font-family:Courier New,monospace;font-weight:600;letter-spacing:.05em;box-sizing:border-box;-webkit-user-select:all;user-select:all;border:none;background:transparent}.room-settings-field__id-value--hidden{color:#cbd5e1;-webkit-user-select:none;user-select:none;letter-spacing:.2em}.room-settings-field__toggle-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:.25rem;padding:.5rem;border-radius:.375rem;min-width:auto;width:auto;background:transparent!important;border:none!important;box-shadow:none!important;color:#cbd5e1;transition:all .2s ease}.room-settings-field__toggle-btn:hover{background:#3b82f626!important;color:#60a5fa;transform:scale(1.05)}.room-settings-field__copy-btn{display:flex;align-items:center;gap:.5rem;white-space:nowrap;flex-shrink:0}.room-settings-field__options{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.room-settings-option{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:2px solid rgba(59,130,246,.2);border-radius:.5rem;background:#1e293b80;cursor:pointer;transition:all .2s ease}.room-settings-option:hover{border-color:#3b82f666;background:#1e293bb3}.room-settings-option__input{margin-top:.125rem;cursor:pointer;accent-color:#3b82f6}.room-settings-option__content{flex:1;display:flex;flex-direction:column;gap:.25rem}.room-settings-option__title{font-size:.875rem;font-weight:600;color:#fff}.room-settings-option__description{font-size:.75rem;color:#94a3b8;line-height:1.5}.room-settings-option input[type=radio]:checked{accent-color:#3b82f6}.room-settings-option input[type=radio]:checked~.room-settings-option__content .room-settings-option__title{color:#60a5fa}.room-settings-option:has(input[type=radio]:checked){border-color:#3b82f699;background:#3b82f61a}.room-settings-option:has(input[type=radio]:checked) .room-settings-option__title{color:#60a5fa}.room-settings-field__toggle-container{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.room-settings-field__toggle-label{position:relative;display:inline-block;width:3rem;height:1.5rem;cursor:pointer}.room-settings-field__toggle-input{opacity:0;width:0;height:0}.room-settings-field__toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#3b82f64d;border-radius:1.5rem;transition:background-color .3s ease}.room-settings-field__toggle-slider:before{content:"";position:absolute;height:1.125rem;width:1.125rem;left:.1875rem;bottom:.1875rem;background-color:#fff;border-radius:50%;transition:transform .3s ease}.room-settings-field__toggle-input:checked+.room-settings-field__toggle-slider{background-color:#3b82f6cc}.room-settings-field__toggle-input:checked+.room-settings-field__toggle-slider:before{transform:translate(1.5rem)}.room-settings-field__toggle-label:hover .room-settings-field__toggle-slider{background-color:#3b82f680}.room-settings-field__toggle-label:hover .room-settings-field__toggle-input:checked+.room-settings-field__toggle-slider{background-color:#3b82f6}.room-settings-field__toggle-text{font-size:.875rem;color:#cbd5e1;font-weight:500}.game-rules-modal{display:flex;flex-direction:column;gap:1.5rem;padding:0}.game-rules-modal__section{display:flex;flex-direction:column;gap:.5rem}.game-rules-modal__label{font-size:.875rem;font-weight:600;color:#fff;margin:0}.game-rules-modal__description{font-size:.75rem;color:#94a3b8;margin:0}.game-rules-modal__textarea{width:100%;padding:.75rem;border:1px solid rgba(59,130,246,.3);border-radius:.5rem;background:#0f172a80;color:#fff;font-size:.875rem;font-family:inherit;resize:vertical;min-height:100px;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.game-rules-modal__textarea:focus{outline:none;border-color:#3b82f699;box-shadow:0 0 0 3px #3b82f61a}.game-rules-modal__textarea::placeholder{color:#64748b}.game-rules-modal__options{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.game-rules-modal__option{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:2px solid rgba(59,130,246,.2);border-radius:.5rem;background:#1e293b80;cursor:pointer;transition:all .2s ease}.game-rules-modal__option:hover{border-color:#3b82f666;background:#1e293bb3}.game-rules-modal__option-input{margin-top:.125rem;cursor:pointer;accent-color:#3b82f6}.game-rules-modal__option-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.game-rules-modal__option-title{font-size:.875rem;font-weight:600;color:#fff}.game-rules-modal__option-description{font-size:.75rem;color:#94a3b8;line-height:1.5}.game-rules-modal__option input[type=radio]:checked{accent-color:#3b82f6}.game-rules-modal__option input[type=radio]:checked~.game-rules-modal__option-content .game-rules-modal__option-title{color:#60a5fa}.game-rules-modal__option:has(input[type=radio]:checked){border-color:#3b82f699;background:#3b82f61a}.game-rules-modal__option:has(input[type=radio]:checked) .game-rules-modal__option-title{color:#60a5fa}.game-rules-modal__option:has(input[type=radio]:disabled){cursor:not-allowed;opacity:.7}.game-rules-modal__option:has(input[type=radio]:disabled):hover{border-color:#3b82f633;background:#1e293b80}.game-rules-modal__option-input:disabled{cursor:not-allowed}.game-rules-modal__game-count-selector{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}.game-rules-modal__count-button{flex:1;min-width:60px;padding:.75rem 1rem;border:2px solid rgba(59,130,246,.3);border-radius:.5rem;background:#1e293b80;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.game-rules-modal__count-button:hover:not(:disabled){border-color:#3b82f680;background:#1e293bb3}.game-rules-modal__count-button--active{border-color:#3b82f6cc;background:#3b82f633;color:#60a5fa;font-weight:600}.game-rules-modal__count-button:disabled{cursor:not-allowed;opacity:.6}.game-rules-modal__count-button:disabled:hover{border-color:#3b82f64d;background:#1e293b80}.completed-game-series-result{background:linear-gradient(135deg,#0f172af2,#1e293be6);border:2px solid rgba(148,163,184,.3);border-radius:12px;padding:1.25rem;margin-top:0;box-shadow:0 8px 24px #0000004d,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.completed-game-series-result__header{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:2px solid rgba(148,163,184,.3)}.completed-game-series-result__title{font-size:1.375rem;font-weight:700;color:var(--color-text-primary, #f1f5f9);margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:.3px}.completed-game-series-result__winner{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;background:linear-gradient(135deg,#ffd70040,#ffc10726);border:2px solid rgba(255,215,0,.6);border-radius:10px;box-shadow:0 4px 16px #ffd70033,inset 0 1px #ffffff1a;animation:winnerPulse 2s ease-in-out infinite}@keyframes winnerPulse{0%,to{box-shadow:0 4px 16px #ffd70033,inset 0 1px #ffffff1a}50%{box-shadow:0 6px 24px #ffd70066,inset 0 1px #ffffff1a}}.completed-game-series-result__winner-label{font-size:.875rem;color:var(--color-text-secondary, #cbd5e1);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__winner-name{font-size:1.125rem;font-weight:700;color:gold;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:.3px}.completed-game-series-result__winner-points{font-size:.875rem;color:gold;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__sections{display:flex;flex-direction:row;gap:1.25rem;align-items:flex-start}.completed-game-series-result__section{display:flex;flex-direction:column;gap:.875rem;flex:1;min-width:0}.completed-game-series-result__section:first-child{flex:0 0 40%;max-width:40%}.completed-game-series-result__section:last-child{flex:1;min-width:0}.completed-game-series-result__section-title{font-size:1.0625rem;font-weight:700;color:var(--color-text-primary, #f1f5f9);margin:0;padding-bottom:8px;border-bottom:2px solid rgba(59,130,246,.4);text-shadow:0 1px 2px rgba(0,0,0,.2);letter-spacing:.3px}.completed-game-series-result__points-ranking{display:flex;flex-direction:column;gap:8px}.completed-game-series-result__points-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:#1e293bb3;border:2px solid rgba(148,163,184,.15);border-radius:10px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000026}.completed-game-series-result__points-item:hover{background:#1e293be6;border-color:#94a3b866;transform:translateY(-2px);box-shadow:0 4px 12px #00000040}.completed-game-series-result__points-item--winner{background:linear-gradient(135deg,#ffd70040,#ffc10726);border-color:#ffd70099;box-shadow:0 4px 16px #ffd7004d,inset 0 1px #ffffff1a}.completed-game-series-result__points-item--winner:hover{box-shadow:0 6px 20px #ffd70066,inset 0 1px #ffffff1a;transform:translateY(-3px)}.completed-game-series-result__points-item--current{border-color:#a78bfa;border-width:2px;background:#c4b5fd33;box-shadow:0 2px 8px #c4b5fd4d}.completed-game-series-result__points-item--current:hover{background:#c4b5fd40;box-shadow:0 4px 12px #c4b5fd66}.completed-game-series-result__points-rank{font-size:1rem;font-weight:700;color:#60a5fa;min-width:3rem;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.2);background:#60a5fa1a;padding:6px 10px;border-radius:8px;border:1px solid rgba(96,165,250,.3)}.completed-game-series-result__points-item--winner .completed-game-series-result__points-rank{color:gold;background:#ffd70026;border-color:#ffd70066}.completed-game-series-result__points-info{display:flex;align-items:center;justify-content:space-between;flex:1;gap:1rem}.completed-game-series-result__points-name{font-size:.9375rem;font-weight:600;color:var(--color-text-primary, #f1f5f9);display:flex;align-items:center;gap:.625rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__you-badge{font-size:.75rem;color:#c4b5fd;font-weight:600;padding:4px 10px;background:#c4b5fd40;border:1px solid rgba(196,181,253,.4);border-radius:6px;text-transform:uppercase;letter-spacing:.5px}.completed-game-series-result__winner-badge{font-size:1.25rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:trophyShine 2s ease-in-out infinite}@keyframes trophyShine{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.completed-game-series-result__points-value{font-size:1rem;font-weight:700;color:#60a5fa;text-shadow:0 1px 2px rgba(0,0,0,.2);letter-spacing:.3px}.completed-game-series-result__points-item--winner .completed-game-series-result__points-value{color:gold}.completed-game-series-result__game-results{display:flex;flex-direction:column;gap:.875rem;max-height:500px;overflow-y:auto;overflow-x:hidden;padding-right:4px;min-height:0}.completed-game-series-result__game-result{background:#1e293bb3;border:1px solid rgba(148,163,184,.2);border-radius:10px;padding:1rem;box-shadow:0 2px 8px #00000026;transition:all .2s ease}.completed-game-series-result__game-result:hover{background:#1e293bd9;border-color:#94a3b866;box-shadow:0 4px 12px #0003}.completed-game-series-result__game-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:2px solid rgba(148,163,184,.2)}.completed-game-series-result__game-number{font-size:1rem;font-weight:700;color:#60a5fa;text-shadow:0 1px 2px rgba(0,0,0,.2);letter-spacing:.3px}.completed-game-series-result__game-date{font-size:.8125rem;color:var(--color-text-secondary, #cbd5e1);font-weight:500}.completed-game-series-result__game-rankings{display:flex;flex-direction:column;gap:6px}.completed-game-series-result__game-ranking{display:flex;align-items:center;gap:.875rem;padding:.625rem .875rem;background:#33415580;border-radius:8px;font-size:.875rem;border:1px solid transparent;transition:all .2s ease}.completed-game-series-result__game-ranking:hover{background:#334155b3;border-color:#3b82f633}.completed-game-series-result__game-ranking--current{background:#c4b5fd33;border:1px solid rgba(196,181,253,.4);box-shadow:0 2px 6px #c4b5fd33}.completed-game-series-result__game-rank{font-weight:700;color:#60a5fa;min-width:5rem;text-align:left;font-size:.875rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__game-player-name{flex:1;color:var(--color-text-primary, #f1f5f9);font-weight:600;font-size:.875rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__game-points{font-weight:700;color:#c4b5fd;min-width:3rem;text-align:right;font-size:.875rem;text-shadow:0 1px 2px rgba(0,0,0,.2)}.completed-game-series-result__game-results::-webkit-scrollbar{width:10px}.completed-game-series-result__game-results::-webkit-scrollbar-track{background:#33415566;border-radius:5px}.completed-game-series-result__game-results::-webkit-scrollbar-thumb{background:#94a3b899;border-radius:5px;border:2px solid rgba(51,65,85,.4)}.completed-game-series-result__game-results::-webkit-scrollbar-thumb:hover{background:#94a3b8cc}@media (max-width: 768px){.completed-game-series-result{padding:1rem;border-radius:10px;margin-top:0}.completed-game-series-result__header{gap:.625rem;margin-bottom:1rem;padding-bottom:.875rem}.completed-game-series-result__title{font-size:1.25rem}.completed-game-series-result__winner{flex-direction:column;gap:6px;padding:8px 16px}.completed-game-series-result__winner-label{font-size:.8125rem}.completed-game-series-result__winner-name{font-size:1rem}.completed-game-series-result__winner-points{font-size:.8125rem}.completed-game-series-result__sections{flex-direction:column;gap:1rem}.completed-game-series-result__section:first-child{flex:1;max-width:100%}.completed-game-series-result__section:last-child{flex:1;min-width:0}.completed-game-series-result__section{gap:.75rem}.completed-game-series-result__section-title{font-size:1rem;padding-bottom:6px}.completed-game-series-result__points-ranking{gap:6px}.completed-game-series-result__points-item{padding:.625rem .875rem;gap:.875rem}.completed-game-series-result__points-rank{font-size:.9375rem;min-width:2.5rem;padding:5px 8px}.completed-game-series-result__points-info{flex-direction:column;align-items:flex-start;gap:.625rem}.completed-game-series-result__points-name{font-size:.875rem}.completed-game-series-result__points-value{font-size:.9375rem}.completed-game-series-result__game-results{gap:.75rem;max-height:350px}.completed-game-series-result__game-result{padding:.875rem}.completed-game-series-result__game-result-header{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:.625rem;padding-bottom:.625rem}.completed-game-series-result__game-number{font-size:.9375rem}.completed-game-series-result__game-date{font-size:.75rem}.completed-game-series-result__game-rankings{gap:5px}.completed-game-series-result__game-ranking{flex-wrap:wrap;font-size:.8125rem;gap:.625rem;padding:.5rem .75rem}.completed-game-series-result__game-rank{font-size:.8125rem;min-width:4.5rem}.completed-game-series-result__game-player-name{font-size:.8125rem}.completed-game-series-result__game-points{font-size:.8125rem;min-width:2.5rem}}