.room-page{isolation:isolate;background-color:#6bb0ff;flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;min-height:100svh;padding:clamp(1.5rem,4vw,3rem);display:flex;position:relative;overflow:hidden}.room-page__backdrop{z-index:-1;image-rendering:pixelated;background-image:url(/images/bg-image.png);background-position:bottom;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.room-page__action{z-index:2;filter:drop-shadow(4px 6px #0b225c61);clip-path:polygon(9px 0,calc(100% - 9px) 0,calc(100% - 9px) 9px,100% 9px,100% calc(100% - 9px),calc(100% - 9px) calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,9px calc(100% - 9px),0 calc(100% - 9px),0 9px,9px 9px);cursor:pointer;background:#1b3a8f;border:none;outline:none;width:clamp(3.25rem,5.6vw,5.375rem);height:clamp(3.25rem,5.6vw,5.375rem);padding:8px;position:absolute;top:clamp(1rem,2.6vw,2.5rem)}.room-page__action--left{left:clamp(1rem,3vw,3rem)}.room-page__action--right{right:clamp(1rem,3vw,3rem)}.room-page__action-face{clip-path:polygon(5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px),0 5px,5px 5px);background:#fff;place-items:center;width:100%;height:100%;display:grid}.room-page__action-icon{color:#1b3a8f;width:55%;height:55%}.room-page__action:hover .room-page__action-face{background:#eef4ff}.room-page__action:active{filter:drop-shadow(1px 2px #0b225c61);transform:translate(3px,4px)}.room-page__content{flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:32rem;margin-top:2rem;display:flex}.room-logo{font-family:var(--font-pixel),monospace;text-transform:uppercase;-webkit-user-select:none;user-select:none;align-items:center;gap:1rem;margin-top:3.5rem;font-weight:400;line-height:1;display:flex}.room-logo__word{letter-spacing:.075em;align-items:flex-start;display:flex}.room-logo__word--top{--logo-fill:#fff;--logo-shade:transparent;font-size:clamp(2.25rem,4vw,4rem)}.room-logo__word--bottom{--logo-fill:#ffc93c;--logo-shade:#e3a41c;font-size:clamp(2.25rem,4vw,4rem)}.room-logo__letter{color:#1b3a8f;-webkit-text-stroke:.17em #1b3a8f;paint-order:stroke fill;text-shadow:0 .03em #1b3a8f,0 .06em #1b3a8f,0 .09em #1b3a8f,0 .17em .03em #09205847;line-height:1;display:inline-block;position:relative}.room-logo__letter:before{content:attr(data-char);color:var(--logo-fill);-webkit-text-stroke:.08em var(--logo-fill);paint-order:stroke fill;text-shadow:0 .035em 0 var(--logo-shade);line-height:1;display:block;position:absolute;inset:0}.room-tagline{filter:drop-shadow(4px 5px #0b225c4d);clip-path:polygon(7px 0,calc(100% - 7px) 0,calc(100% - 7px) 7px,100% 7px,100% calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,7px calc(100% - 7px),0 calc(100% - 7px),0 7px,7px 7px);z-index:1;background:#1b3a8f;margin-top:-.5rem;padding:.5rem 1.5rem}.room-tagline-text{font-family:var(--font-pixel),monospace;letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;font-size:clamp(.55rem,1vw,.72rem);line-height:1;display:block}.room-card{filter:drop-shadow(6px 8px #0b225c61);clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px),0 12px,12px 12px);background:#1b3a8f;width:100%;margin-top:.5rem;padding:6px}.room-card__inner{clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px),0 8px,8px 8px);background:#fff;flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex}.room-form-group{flex-direction:column;gap:.5rem;display:flex}.room-form-label{font-family:var(--font-pixel),monospace;color:#1b3a8f;text-transform:uppercase;margin-bottom:.25rem;font-size:.85rem}.room-input-container{clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px);background:#e6f1fe;border:3px solid #acc7ee;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex;position:relative}.room-input-container--code{border-color:#a4c9f3}.room-input-prefix{font-family:var(--font-pixel),monospace;color:#2b5ce6;font-size:1.5rem;font-weight:700}.room-input{font-family:var(--font-pixel-body),sans-serif;color:#0b1a45;background:0 0;border:none;outline:none;flex:1;width:100%;font-size:1.1rem;font-weight:600}.room-input--code{font-family:var(--font-pixel),monospace;letter-spacing:.2em;color:#1b3a8f;text-transform:uppercase;font-size:1.5rem}.room-input-icon{color:#2b5ce6}.room-input-clear{color:#8daed8;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.room-input-clear:hover{color:#2b5ce6}.room-form-hint{font-family:var(--font-pixel-body),sans-serif;color:#7b96b9;margin-top:.25rem;font-size:.8rem}.room-avatar-picker{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.room-avatar-nav{color:#2b5ce6;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;display:flex}.room-avatar-nav:hover{color:#1b3a8f}.room-avatars{flex:1;justify-content:center;gap:.5rem;display:flex;overflow:hidden}.room-avatar-grid{grid-template-columns:repeat(6,1fr);gap:.5rem;display:grid}.room-avatar{aspect-ratio:1;width:100%;height:auto;font:inherit;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px);cursor:pointer;background:#e6f1fe;border:3px solid #0000;justify-content:center;align-items:center;padding:.25rem;transition:all .2s;display:flex}.room-avatar img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated}.room-avatar--selected{background:#fff;border-color:#2b5ce6;transform:scale(1.08)}@media (max-width:480px){.room-avatar-grid{grid-template-columns:repeat(4,1fr)}}.room-privacy-options{gap:1rem;display:flex}.room-privacy-btn{clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px);cursor:pointer;color:#6384ab;background:#e6f1fe;border:3px solid #0000;flex-direction:column;flex:1;align-items:center;gap:.25rem;padding:.75rem;transition:all .2s;display:flex}.room-privacy-btn span{font-family:var(--font-pixel),monospace;font-size:.8rem;font-weight:600}.room-privacy-btn small{font-family:var(--font-pixel-body),sans-serif;font-size:.7rem}.room-privacy-btn--active{color:#fff;background:#2b5ce6}.room-privacy-btn--active span{color:#fff}.room-submit-btn{clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px),0 8px,8px 8px);width:100%;font-family:var(--font-pixel),monospace;color:#1b3a8f;text-transform:uppercase;cursor:pointer;background:#ffc93c;border:3px solid #1b3a8f;margin-top:.5rem;padding:1rem;font-size:1.25rem;transition:all .1s steps(2,end);box-shadow:0 4px #1b3a8f}.room-submit-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 #1b3a8f}.room-submit-btn:disabled{color:#7b87a8;cursor:not-allowed;background:#d7dcea;border-color:#7b87a8;box-shadow:0 4px #7b87a8}.room-size-picker{align-items:center;gap:1rem;display:flex}.room-range{appearance:none;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px);cursor:pointer;background:#e6f1fe;border:3px solid #1b3a8f;flex:1;height:12px}.room-range::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#ffc93c;border:3px solid #1b3a8f;width:20px;height:20px}.room-range::-moz-range-thumb{cursor:pointer;background:#ffc93c;border:3px solid #1b3a8f;border-radius:0;width:20px;height:20px}.room-size-value{color:#fff;text-align:center;min-width:2.5rem;font-family:var(--font-pixel),monospace;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px);background:#1b3a8f;padding:.35rem 0;font-size:.9rem}.room-error{clip-path:polygon(5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px),0 5px,5px 5px);font-family:var(--font-pixel-body),sans-serif;color:#8e2b20;background:#ffe3e3;border:3px solid #c0392b;margin-top:-.25rem;padding:.6rem .8rem;font-size:.9rem;line-height:1.35}.room-practice{text-align:center;align-items:center}.room-practice__status{font-family:var(--font-pixel-body),sans-serif;color:#1b3a8f;padding:1.5rem 0;font-size:1.05rem}.room-footer-text{font-family:var(--font-pixel-body),sans-serif;color:#fff;text-shadow:-1px 0 #1b3a8f,1px 0 #1b3a8f,0 -1px #1b3a8f,0 1px #1b3a8f,0 3px 6px #09205873;margin-top:1rem;font-size:.9rem}@media (max-width:650px){.room-page{justify-content:flex-start;padding:4.5rem 1rem 1rem;overflow:hidden auto}.room-page__backdrop{position:fixed}.room-logo{flex-direction:column;gap:.2rem;margin-top:0}.room-logo__word--top,.room-logo__word--bottom{font-size:3rem}.room-avatar{width:2.75rem;height:2.75rem}.room-tagline-text{white-space:normal;text-align:center;line-height:1.5}}