.room-page{padding-bottom:3rem}@media (max-width:860px){.room-page{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom, 0px))}}.room-layout{display:grid;gap:1.25rem;margin-top:.25rem}@media (min-width:900px){.room-layout{grid-template-columns:minmax(0,1.15fr) minmax(16rem,.85fr);align-items:start}}.room-page .pp-panel,.room-panel{background:var(--cu-card,var(--pp-color-surface));border:1px solid var(--cu-line,var(--pp-color-line));border-radius:22px;box-shadow:var(--cu-sh,var(--pp-shadow-1));padding:1.35rem 1.4rem 1.5rem}.room-join-code h2,.room-panel h2{display:flex;align-items:center;gap:8px;margin:0 0 .6rem;font:700 1.15rem/1.2 var(--pp-font-display,inherit);color:var(--cu-ink,var(--pp-color-text))}.room-join-code p,.room-lead,.room-note{margin:0 0 1rem;color:var(--cu-ink2,var(--pp-color-text-2));line-height:1.45;font-family:var(--pp-font-text,inherit)}.room-code-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;margin:0 0 .75rem}.room-code{font:800 1.85rem/1.1 var(--pp-font-display,inherit);letter-spacing:.12em;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--pp-color-primary,#2563eb) 12%,transparent);color:var(--pp-color-primary,#1d4ed8);border-radius:.9rem;padding:.4rem .85rem}.room-code-label{display:block;font:700 .75rem/1.2 var(--pp-font-text,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--cu-ink2,var(--pp-color-text-2));margin-bottom:.3rem}.room-copied{margin:0 0 .75rem;color:var(--pp-color-success-ink,#0f766e);font-size:.95rem}.room-players{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.55rem}.room-player{display:flex;align-items:center;gap:.7rem;border:1px solid var(--cu-line,var(--pp-color-line));border-radius:16px;padding:.65rem .85rem;background:var(--pp-color-surface-2,#f8fafc);font-family:var(--pp-font-text,inherit)}.room-player.is-empty{opacity:.72;border-style:dashed;background:transparent}.room-player.is-empty b{font-weight:600;color:var(--cu-ink2,var(--pp-color-text-2))}.room-player.is-you{background:color-mix(in srgb,var(--pp-color-primary,#2563eb) 10%,var(--cu-card,#fff));border-color:color-mix(in srgb,var(--pp-color-primary,#2563eb) 35%,var(--cu-line,#e5e7eb))}.room-swatch{width:1.2rem;height:1.2rem;border-radius:999px;flex:none;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px rgb(15 23 42/.08)}.room-player b{font-weight:700;font-family:var(--pp-font-display,inherit)}.room-player-meta{margin-left:auto;display:flex;align-items:center;gap:.5rem;color:var(--cu-ink2,var(--pp-color-text-2));font-size:.85rem}.room-live{margin:0 0 1rem;font-size:.95rem;color:var(--pp-color-warning-ink,#92400e)}.room-actions{gap:.7rem}.room-actions,.room-actions-main{display:flex;flex-direction:column}.room-actions-main{gap:.45rem}.room-actions-danger{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.35rem;border-top:1px dashed var(--cu-line,var(--pp-color-line))}.room-error{margin:0 0 1rem;color:var(--pp-color-danger,#be123c)}.room-busy{display:grid;place-items:center;min-height:40vh;gap:.75rem;font-family:var(--pp-font-text,inherit)}.room-join-code{margin-top:1.25rem}.room-join-form{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}.room-code-input{flex:1 1 10rem;min-height:48px;padding:.6rem .9rem;border:1.5px solid var(--cu-line,var(--pp-color-line));border-radius:14px;background:var(--cu-card,#fff);color:var(--cu-ink,var(--pp-color-text));font:700 1.05rem/1.2 var(--pp-font-display,inherit);letter-spacing:.08em;text-transform:uppercase}.room-code-input:focus{outline:2px solid var(--pp-color-primary,#2563eb);outline-offset:2px}.room-join-form .pp-btn,.room-join-form button{flex:none}@media (max-width:640px){.room-page .pp-panel,.room-panel{padding:1.1rem 1rem 1.25rem}.room-code{font-size:1.5rem}.room-actions-danger{width:100%}.room-actions-danger .pp-btn{flex:1 1 auto}}.room-code{letter-spacing:.06em}@media (max-width:719px){.room-layout{min-height:0}.room-code{font-size:1.2rem;letter-spacing:.04em;padding:.35rem .6rem}}.room-join-form{flex-direction:column;align-items:stretch}.room-code-pin{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;align-items:center}.room-code-pin-unit{display:flex;align-items:center;gap:.4rem}.room-code-pin-dash{font:700 1.15rem/1 var(--pp-font-display,inherit);color:var(--cu-muted,#94a3b8)}.room-code-pin-group{display:flex;gap:.3rem}.room-code-box{width:2.15rem;height:2.55rem;text-align:center;font:800 1.15rem/1 var(--pp-font-display,inherit);text-transform:uppercase;border:1px solid var(--cu-line,var(--pp-color-line));border-radius:.55rem;background:var(--pp-color-surface,#fff);color:var(--cu-ink,#111);padding:0}.room-code-box:focus{outline:2px solid var(--pp-color-primary,#2563eb);outline-offset:1px}.room-join-code.is-compact{margin-top:0;padding:.9rem .95rem 1rem}.room-join-code.is-compact h2{font-size:1rem}.room-join-code.is-compact .room-code-box{width:1.7rem;height:2.1rem;font-size:.95rem}.room-qr{margin:0 0 .85rem}.room-qr-toggle{background:none;border:0;padding:0;font:700 .95rem/1.3 var(--pp-font-text,inherit);color:var(--pp-color-primary,#1d4ed8);cursor:pointer;text-decoration:underline;text-underline-offset:3px}.room-qr-frame{margin-top:.7rem;text-align:center}.room-qr-frame img{display:block;margin:0 auto .5rem;width:180px;height:180px;border-radius:.6rem;background:#fff}.room-qr-hint{margin:0;color:var(--cu-ink2,#475569);font-size:.9rem}.room-mobile-join{display:none}@media (max-width:860px){.room-mobile-join{display:block;position:relative;z-index:21}.room-mobile-join-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(4.6rem + env(safe-area-inset-bottom, 0px));z-index:25;box-shadow:0 8px 24px -8px rgb(20 12 40/.45)}}.room-join-modal{position:fixed;inset:0;z-index:80;background:rgba(15,18,32,.45);display:grid;align-items:end}.room-join-modal-sheet{background:var(--cu-card,#fff);border-radius:1.25rem 1.25rem 0 0;padding:1.1rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom, 0px));max-height:min(90dvh,40rem);overflow:auto}.room-join-modal-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.room-join-modal-head h2{margin:0;font:800 1.15rem/1.2 var(--pp-font-display,inherit)}.room-join-modal .room-join-code{border:0;box-shadow:none;padding:0;margin:0}.room-join-modal .room-join-code h2{display:none}html:has(.pp-mode-modal) .room-mobile-join-btn,html:has(.pp-mode-modal) .site-chrome-tabs,html:has(.room-join-modal) .room-mobile-join-btn,html:has(.room-join-modal) .site-chrome-tabs{display:none!important}@media (max-width:860px){.room-code-box{width:1.65rem;height:2.15rem;font-size:1rem}.room-join-modal .room-code-pin{gap:.4rem;flex-wrap:nowrap}}.room-join-code.is-plain{margin:0;padding:0;border:0;box-shadow:none;background:transparent}.room-join-code.is-plain .room-join-form{margin-top:0}.pp-dialog.join-code-modal{width:min(520px,calc(100vw - 16px));max-width:calc(100vw - 16px)}.pp-dialog.join-code-modal .pp-dialog-body>p{margin:0 0 12px;text-wrap:balance}.pp-dialog.join-code-modal .pp-dialog-body>p+*{margin-top:0}.join-code-modal .room-code-pin{display:flex;flex-wrap:nowrap!important;justify-content:center;align-items:center;width:100%;min-width:0;gap:0;container-type:inline-size;container-name:join-pin;--join-gap:2px;--join-sep:4px;--join-dash:8px}.join-code-modal .room-code-pin-unit{display:flex;flex-wrap:nowrap;align-items:center;flex:0 1 auto;min-width:0;gap:var(--join-sep)}.join-code-modal .room-code-pin-dash{flex:none;box-sizing:border-box;width:var(--join-dash);padding:0;text-align:center;font:700 .75rem/1 var(--pp-font-display,inherit);color:var(--cu-muted,#94a3b8)}.join-code-modal .room-code-pin-group{display:flex;flex-wrap:nowrap;min-width:0;gap:var(--join-gap)}.join-code-modal .room-code-box{box-sizing:border-box;flex:none;width:clamp(22px,calc((100cqi - (9 * var(--join-gap) + 2 * var(--join-sep) + 2 * var(--join-dash) + 2px)) / 12),40px);height:clamp(40px,11cqi,44px);min-height:40px;font-size:clamp(.8rem,3.3cqi,1.1rem)}@media (max-width:600px){.pp-dialog.join-code-modal{width:calc(100vw - 16px);max-width:calc(100vw - 16px)}.pp-dialog.join-code-modal .pp-dialog-header{padding:16px 18px 12px}.pp-dialog.join-code-modal .pp-dialog-title{font-size:1.15rem}.pp-dialog.join-code-modal .pp-dialog-body{padding:16px 18px}.pp-dialog.join-code-modal .pp-dialog-footer{padding:12px 18px 16px}}