html{height:100%;--mat-sys-background: light-dark(#faf9fd, #121316);--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);--mat-sys-error-container: light-dark(#ffdad6, #93000a);--mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);--mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);--mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);--mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);--mat-sys-on-error: light-dark(#ffffff, #690005);--mat-sys-on-error-container: light-dark(#93000a, #ffdad6);--mat-sys-on-primary: light-dark(#ffffff, #002f65);--mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);--mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);--mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);--mat-sys-on-secondary: light-dark(#ffffff, #283041);--mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);--mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);--mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);--mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);--mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);--mat-sys-on-tertiary: light-dark(#ffffff, #003737);--mat-sys-on-tertiary-container: light-dark(#004f4f, #00fbfb);--mat-sys-on-tertiary-fixed: light-dark(#002020, #002020);--mat-sys-on-tertiary-fixed-variant: light-dark(#004f4f, #004f4f);--mat-sys-outline: light-dark(#74777f, #8e9099);--mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);--mat-sys-primary: light-dark(#005cbb, #abc7ff);--mat-sys-primary-container: light-dark(#d7e3ff, #00458f);--mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);--mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);--mat-sys-scrim: light-dark(#000000, #000000);--mat-sys-secondary: light-dark(#565e71, #bec6dc);--mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);--mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);--mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);--mat-sys-shadow: light-dark(#000000, #000000);--mat-sys-surface: light-dark(#faf9fd, #121316);--mat-sys-surface-bright: light-dark(#faf9fd, #38393c);--mat-sys-surface-container: light-dark(#efedf0, #1f2022);--mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);--mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);--mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);--mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);--mat-sys-surface-dim: light-dark(#dbd9dd, #121316);--mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);--mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);--mat-sys-tertiary: light-dark(#006a6a, #00dddd);--mat-sys-tertiary-container: light-dark(#00fbfb, #004f4f);--mat-sys-tertiary-fixed: light-dark(#00fbfb, #00fbfb);--mat-sys-tertiary-fixed-dim: light-dark(#00dddd, #00dddd);--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-sys-body-large: 400 1rem / 1.5rem Inter;--mat-sys-body-large-font: Inter;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 .875rem / 1.25rem Inter;--mat-sys-body-medium-font: Inter;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 .75rem / 1rem Inter;--mat-sys-body-small-font: Inter;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Inter;--mat-sys-display-large-font: Inter;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Inter;--mat-sys-display-medium-font: Inter;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Inter;--mat-sys-display-small-font: Inter;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Inter;--mat-sys-headline-large-font: Inter;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Inter;--mat-sys-headline-medium-font: Inter;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Inter;--mat-sys-headline-small-font: Inter;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 .875rem / 1.25rem Inter;--mat-sys-label-large-font: Inter;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 .75rem / 1rem Inter;--mat-sys-label-medium-font: Inter;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 .688rem / 1rem Inter;--mat-sys-label-small-font: Inter;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Inter;--mat-sys-title-large-font: Inter;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Inter;--mat-sys-title-medium-font: Inter;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 .875rem / 1.25rem Inter;--mat-sys-title-small-font: Inter;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12;--pp-paper: #f7f9fc;--pp-paper-2: #eaf2fb;--pp-paper-3: #d7e5f3;--pp-surface: #f8fbff;--pp-surface-glass: oklch(98% .01 250 / .82);--pp-ink: #111827;--pp-ink-soft: #586474;--pp-ink-faint: #aab6c5;--pp-accent: oklch(58% .17 246);--pp-accent-soft: oklch(58% .17 246 / .12);--pp-accent-line: oklch(58% .17 246 / .42);--pp-accent-strong: oklch(49% .19 252);--pp-accent-deep: oklch(36% .15 255);--pp-cyan: oklch(72% .13 210);--pp-success: oklch(63% .15 155);--pp-warn: oklch(74% .14 75);--pp-shadow-sm: 0 1px 2px oklch(12% .04 250 / .06), 0 1px 3px oklch(12% .04 250 / .08);--pp-shadow-md: 0 8px 24px oklch(12% .04 250 / .1), 0 2px 6px oklch(12% .04 250 / .05);--pp-shadow-lg: 0 22px 60px oklch(12% .04 250 / .14), 0 8px 22px oklch(12% .04 250 / .08);--pp-shadow-glow: 0 0 0 1px var(--pp-accent-line), 0 16px 42px oklch(58% .17 246 / .24);--pp-radius-sm: 8px;--pp-radius-md: 12px;--pp-radius-lg: 18px;--pp-radius-pill: 999px;--pp-font: "Inter", "Segoe UI", system-ui, sans-serif;--pp-mono: "JetBrains Mono", ui-monospace, monospace;--mat-sys-surface: var(--pp-surface);--mat-sys-surface-container: var(--pp-paper-2);--mat-sys-outline-variant: oklch(84% .03 250)}body{color-scheme:light;background:linear-gradient(90deg,oklch(58% .17 246deg / .08) 0 1px,transparent 1px 100%),linear-gradient(180deg,oklch(58% .17 246deg / .06) 0 1px,transparent 1px 100%),linear-gradient(180deg,#f8fbff,#eef6fd 44%,#e4eef8),var(--pp-paper);background-size:48px 48px,48px 48px,auto,auto;color:var(--pp-ink);font-family:var(--pp-font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;margin:0;min-height:100%}*{box-sizing:border-box}.pp-app-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px clamp(16px,2vw,28px);position:sticky;top:0;z-index:10;-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);background:var(--pp-surface-glass);border-bottom:1px solid oklch(84% .03 250deg / .8);box-shadow:0 8px 30px #0006120a;box-shadow:0 8px 30px oklch(12% .04 250deg / .04)}.pp-app-bar__brand{flex:0 0 auto;display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px;letter-spacing:0;text-decoration:none;color:var(--pp-ink)}.pp-app-bar__brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(140deg,var(--pp-cyan),var(--pp-accent) 48%,var(--pp-accent-deep));display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;box-shadow:0 8px 22px #0080cc47;box-shadow:0 8px 22px oklch(58% .17 246deg / .28)}.pp-app-bar__nav{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;padding-right:2px}.mat-mdc-button-base:not(.mat-mdc-icon-button){height:44px!important;min-height:44px;padding-inline:20px!important;border-radius:var(--pp-radius-pill)!important;font-family:var(--pp-font)!important;font-weight:700!important;letter-spacing:0!important;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease!important}.mat-mdc-button-base:not(.mat-mdc-icon-button) .mat-icon{margin-right:6px}.mat-mdc-unelevated-button:not(:disabled){--mdc-filled-button-container-color: transparent;--mdc-filled-button-label-text-color: white;background:linear-gradient(140deg,var(--pp-cyan),var(--pp-accent) 45%,var(--pp-accent-strong))!important;color:#fff!important;box-shadow:0 10px 24px #0080cc3d!important;box-shadow:0 10px 24px oklch(58% .17 246deg / .24)!important}.mat-mdc-unelevated-button:not(:disabled):hover{box-shadow:0 14px 32px #0080cc4d!important;box-shadow:0 14px 32px oklch(58% .17 246deg / .3)!important;transform:translateY(-2px)}.mat-mdc-unelevated-button:not(:disabled):active{transform:translateY(0)}.mat-mdc-unelevated-button:disabled{--mdc-filled-button-disabled-container-color: transparent;--mdc-filled-button-disabled-label-text-color: oklch(52% .03 250);background:linear-gradient(180deg,#d1dce8,#bccdde)!important;color:#5c6b7a!important;box-shadow:inset 0 1px #ffffff8c!important}.mat-mdc-outlined-button:not(:disabled){--mdc-outlined-button-outline-color: oklch(68% .06 250);--mdc-outlined-button-label-text-color: var(--pp-accent-deep);background:#ffffffc7!important;border-color:#7c9cbc!important;color:var(--pp-accent-deep)!important;box-shadow:inset 0 1px #ffffffe6}.mat-mdc-outlined-button:not(:disabled):hover{background:var(--pp-accent-soft)!important;border-color:var(--pp-accent-line)!important;transform:translateY(-1px)}.mat-mdc-button:not(.mat-mdc-icon-button):not(:disabled){color:var(--pp-accent-deep)!important}.mat-mdc-button:not(.mat-mdc-icon-button):not(:disabled):hover{background:var(--pp-accent-soft)!important}.mat-mdc-button-base:disabled{opacity:.66}.pp-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:4px 10px;border-radius:var(--pp-radius-pill);background:#fff;border:1px solid oklch(84% .03 250deg);font-size:12px;font-weight:500;color:var(--pp-ink-soft);white-space:nowrap}.pp-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pp-ink-soft)}.pp-chip--ok:before{background:var(--pp-success);box-shadow:0 0 0 3px #17a35f2e}.pp-chip--warn:before{background:var(--pp-warn);box-shadow:0 0 0 3px #de9c312e}.pp-chip--accent{background:var(--pp-accent-soft);border-color:var(--pp-accent-line);color:var(--pp-accent-strong)}.app-bar-action{border-radius:12px!important}.app-bar-action .mat-icon{margin-right:6px}.app-bar-action.mat-mdc-outlined-button:not(:disabled){background:#fff!important;border-color:#88a8c9!important}.app-bar-action--primary.mat-mdc-unelevated-button:not(:disabled){box-shadow:0 8px 20px #0080cc33!important;box-shadow:0 8px 20px oklch(58% .17 246deg / .2)!important}.share-room-dialog-panel .mat-mdc-dialog-surface{border-radius:var(--pp-radius-lg)!important;border:1px solid oklch(84% .03 250deg / .9);background:linear-gradient(180deg,#fffffffa,#f4f9fffa)!important;box-shadow:var(--pp-shadow-lg)!important}.pp-card{--w: 76px;--h: 108px;width:var(--w);height:var(--h);border-radius:12px;background:#fff;display:grid;place-items:center;font-family:var(--pp-font);font-weight:700;font-size:28px;color:var(--pp-ink);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:var(--pp-shadow-sm);border:1px solid oklch(84% .03 250deg);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease}.pp-card:before,.pp-card:after{content:attr(data-value);position:absolute;font-size:11px;font-weight:600;color:var(--pp-ink-soft);transition:color .22s ease}.pp-card:before{top:8px;left:10px}.pp-card:after{bottom:8px;right:10px;transform:rotate(180deg)}.pp-card:hover{transform:translateY(-6px);box-shadow:var(--pp-shadow-md)}.pp-card--selected{background:linear-gradient(140deg,var(--pp-cyan),var(--pp-accent) 45%,var(--pp-accent-strong));color:#fff;border-color:transparent;transform:translateY(-14px) rotate(-2deg);box-shadow:var(--pp-shadow-glow)}.pp-card--selected:before,.pp-card--selected:after{color:#ffffffb3}.pp-card--ghost{border-style:dashed;background:transparent;box-shadow:none;color:var(--pp-ink-soft)}.pp-card--qmark{font-style:italic;color:var(--pp-accent)}.pp-card--mini{--w: 50px;--h: 72px;font-size:18px;border-radius:8px}.pp-card--mini:before,.pp-card--mini:after{font-size:8px}.pp-card--micro{--w: 36px;--h: 52px;font-size:14px;border-radius:6px}.pp-card--micro:before,.pp-card--micro:after{display:none}.pp-card--back{background:linear-gradient(140deg,var(--pp-accent-deep),var(--pp-accent)),repeating-linear-gradient(45deg,oklch(100% 0 0deg / .18) 0 6px,transparent 6px 12px);background-blend-mode:overlay;color:transparent;border-color:transparent}.pp-card--back:before,.pp-card--back:after{display:none}.pp-card--disabled{pointer-events:none;opacity:.55}.pp-card--outlier{border:1.5px dashed var(--pp-accent);color:var(--pp-accent)}.pp-card--flip-in{animation:pp-flip .6s cubic-bezier(.4,0,.2,1) both}@keyframes pp-flip{0%{transform:rotateY(180deg) scale(.92);opacity:0}60%{transform:rotateY(-8deg) scale(1.04);opacity:1}to{transform:rotateY(0) scale(1);opacity:1}}@keyframes pp-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pp-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes pp-pulse-dot{0%,to{opacity:1}50%{opacity:.3}}@keyframes pp-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.pp-fade-up{animation:pp-fade-up .4s ease both}.pp-pop{animation:pp-pop .32s cubic-bezier(.34,1.56,.64,1) both}.pp-deck{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;justify-content:center}.pp-deck>*{animation:pp-fade-up .4s ease both}.pp-deck>*:nth-child(1){animation-delay:40ms}.pp-deck>*:nth-child(2){animation-delay:80ms}.pp-deck>*:nth-child(3){animation-delay:.12s}.pp-deck>*:nth-child(4){animation-delay:.16s}.pp-deck>*:nth-child(5){animation-delay:.2s}.pp-deck>*:nth-child(6){animation-delay:.24s}.pp-deck>*:nth-child(7){animation-delay:.28s}.pp-deck>*:nth-child(8){animation-delay:.32s}.pp-fanned-deck{position:relative;width:min(620px,100%);height:180px;margin:0 auto;perspective:1000px}.pp-fanned-deck .pp-card{transition:transform .36s cubic-bezier(.34,1.56,.64,1);animation:pp-fade-up .6s ease both}.lobby__deck-shell .pp-card{--w: 104px;--h: 148px;border-radius:16px;font-size:38px;box-shadow:0 14px 34px #00061229,0 3px 8px #00061214;box-shadow:0 14px 34px oklch(12% .04 250deg / .16),0 3px 8px oklch(12% .04 250deg / .08)}.lobby__deck-shell .pp-card:before,.lobby__deck-shell .pp-card:after{font-size:13px}@media(max-width:620px){.pp-app-bar{align-items:flex-start;flex-direction:column;gap:10px}.pp-app-bar__nav{width:100%;flex-wrap:wrap;overflow-x:visible;padding-bottom:2px}.lobby__deck-shell .pp-card{--w: 78px;--h: 112px;font-size:30px}.mat-mdc-button-base:not(.mat-mdc-icon-button){padding-inline:14px!important}}.pp-avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:14px;background:var(--pp-paper-2);color:var(--pp-ink);border:1px solid oklch(84% .03 250deg)}.pp-avatar--sm{width:28px;height:28px;font-size:11px}.pp-avatar--lg{width:48px;height:48px;font-size:18px}.pp-avatar--self{background:var(--pp-accent-soft);border-color:var(--pp-accent-line);color:var(--pp-accent-strong)}.pp-surface{background:#fff;border-radius:var(--pp-radius-lg);border:1px solid oklch(84% .03 250deg);box-shadow:var(--pp-shadow-md)}.room{max-width:1280px;margin:0 auto;padding:24px;min-height:calc(100vh - 80px)}.room__join{max-width:460px;margin:80px auto;padding:36px;background:linear-gradient(180deg,#fffffff5,#f4f9fff5);border-radius:var(--pp-radius-lg);border:1px solid oklch(84% .03 250deg / .9);box-shadow:var(--pp-shadow-lg)}.room__join header{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}.room__join header h1{margin:0;font-size:28px;font-weight:700;letter-spacing:0}.room__join header p{margin:0;color:var(--pp-ink-soft)}.room__join .pp-chip{align-self:flex-start}.room__join-form{display:flex;flex-direction:column;gap:12px}.room__join-btn{height:48px;border-radius:var(--pp-radius-pill)!important;margin-top:8px}.room__layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;min-width:0}.room__stage{background:linear-gradient(180deg,#fffffff5,#f4f9fffa);border:1px solid oklch(84% .03 250deg / .9);border-radius:var(--pp-radius-lg);box-shadow:var(--pp-shadow-md);padding:28px;min-width:0}.room__round-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px}.room__round-head h2{margin:6px 0 0;font-size:24px;font-weight:700;letter-spacing:0;overflow-wrap:anywhere}.room__round-meta{font-family:var(--pp-mono);font-size:11px;color:var(--pp-accent);letter-spacing:0;font-weight:600}.room__progress{font-family:var(--pp-mono);font-size:12px;color:var(--pp-ink-soft);padding:6px 12px;background:#0080cc14;background:oklch(58% .17 246deg / .08);border:1px solid oklch(58% .17 246deg / .14);border-radius:var(--pp-radius-pill)}.room__stats{display:flex;flex-wrap:wrap;gap:14px;padding:16px;background:linear-gradient(140deg,var(--pp-accent-soft),oklch(72% .13 210deg / .08));border-radius:var(--pp-radius-md);margin-bottom:24px;border:1px solid var(--pp-accent-line)}.room__cue{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:18px;border-radius:var(--pp-radius-md);border:1px solid oklch(84% .03 250deg / .9);background:#fff;color:var(--pp-ink-soft);font-size:13px;line-height:1.35}.room__cue mat-icon{flex:0 0 auto;width:20px;height:20px;font-size:20px;color:var(--pp-accent)}.room__cue--action{background:var(--pp-accent-soft);border-color:var(--pp-accent-line);color:var(--pp-accent-deep)}.room__cue--success{background:#17a35f1f;border-color:#17a35f57;color:#00502b;color:oklch(38% .11 155deg)}.room__distribution{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px;margin:-10px 0 24px}.room__table{display:flex;flex-direction:column;align-items:center;gap:18px}.room__felt{width:min(560px,100%);min-height:180px;border-radius:90px;background:linear-gradient(140deg,#ffffffa6,#ffffff29),linear-gradient(140deg,var(--pp-paper-2),var(--pp-paper-3));border:1px solid oklch(84% .03 250deg);box-shadow:inset 0 0 0 1px #fff,inset 0 8px 30px #0006120a,var(--pp-shadow-md);box-shadow:inset 0 0 0 1px #fff,inset 0 8px 30px oklch(12% .04 250deg / .04),var(--pp-shadow-md);display:grid;place-items:center;padding:24px}.room__reveal{height:52px!important;padding:0 32px!important;border-radius:var(--pp-radius-pill)!important;font-size:16px!important;font-weight:600!important;box-shadow:0 12px 30px #0080cc52!important;box-shadow:0 12px 30px oklch(58% .17 246deg / .32)!important;transition:transform .2s ease,box-shadow .2s ease}.room__reveal:hover{transform:translateY(-2px) scale(1.02)}.room__suggested{text-align:center;animation:pp-pop .4s cubic-bezier(.34,1.56,.64,1) both;max-width:360px}.room__suggested-label{font-family:var(--pp-mono);font-size:11px;color:var(--pp-ink-soft);letter-spacing:0;margin-bottom:4px}.room__suggested-value{font-size:clamp(42px,10vw,72px);font-weight:800;line-height:1;background:linear-gradient(140deg,var(--pp-accent),var(--pp-accent-strong));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:0;overflow-wrap:anywhere}.room__suggested p{margin:10px 0 0;color:var(--pp-ink-soft);font-size:13px;line-height:1.4}.room__suggested--tie .room__suggested-value{font-size:clamp(32px,8vw,48px);color:var(--pp-accent-deep);background:none;-webkit-background-clip:initial;background-clip:initial}.room__wait{color:var(--pp-ink-soft);font-size:14px;font-style:italic}.room__start{display:flex;gap:12px;align-items:center;width:100%;max-width:460px}.room__start mat-form-field{flex:1}.room__start button{border-radius:var(--pp-radius-pill);height:48px;padding:0 22px}.room__rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}.room__loading{display:grid;place-items:center;height:60vh;gap:14px;color:var(--pp-ink-soft)}.room__loading .loader{width:32px;height:32px;border-radius:50%;border:3px solid oklch(84% .03 250deg);border-top-color:var(--pp-accent);animation:spin .7s linear infinite}.seats{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}.seat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px;transition:transform .22s ease}.seat:hover{transform:translateY(-2px)}.seat__person{display:flex;flex-direction:column;align-items:center;gap:2px}.seat__name{font-size:12px;font-weight:600;color:var(--pp-ink);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat__role{font-family:var(--pp-mono);font-size:9px;letter-spacing:0;color:var(--pp-ink-soft)}.seat__card{width:36px;height:52px;border-radius:6px;display:grid;place-items:center;border:1.5px dashed var(--pp-ink-faint);background:var(--pp-paper-2);color:var(--pp-ink-faint);font-size:14px}.seat__card--observer{border-style:dashed;background:transparent;color:var(--pp-ink-soft)}.seat__card--observer mat-icon{font-size:18px;height:18px;width:18px}.seat__card--empty{animation:pp-fade-up .3s ease}.stat{display:flex;flex-direction:column;gap:2px;padding:8px 14px;background:#fff;border-radius:var(--pp-radius-sm);border:1px solid oklch(84% .03 250deg);min-width:80px;flex:1 1 110px}.stat__label{font-family:var(--pp-mono);font-size:10px;color:var(--pp-ink-soft);letter-spacing:0}.stat__value{font-size:24px;font-weight:700;color:var(--pp-ink);letter-spacing:0}.stat__value--accent{color:var(--pp-accent)}.dist{padding:10px;border:1px solid oklch(84% .03 250deg);border-radius:var(--pp-radius-sm);background:#fff}.dist--leader{border-color:var(--pp-accent-line);background:linear-gradient(180deg,white,var(--pp-accent-soft))}.dist__head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;color:var(--pp-ink-soft)}.dist__card{font-weight:800;color:var(--pp-ink)}.dist__bar{height:7px;overflow:hidden;border-radius:var(--pp-radius-pill);background:#d4dfeb}.dist__bar span{display:block;height:100%;min-width:4px;border-radius:inherit;background:linear-gradient(90deg,var(--pp-cyan),var(--pp-accent))}.rail-block{background:#ffffffeb;border:1px solid oklch(84% .03 250deg / .9);border-radius:var(--pp-radius-md);padding:18px;box-shadow:var(--pp-shadow-sm)}.rail-block header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.rail-block header h3{margin:0;font-size:13px;font-weight:600;color:var(--pp-ink-soft);letter-spacing:0;text-transform:uppercase}.rail-block--mod{background:linear-gradient(160deg,#fff,#007fcd0f);background:linear-gradient(160deg,#fff,color(xyz 0.19 0.196 0.672 / 0.059));border-color:var(--pp-accent-line)}.rail-self{display:flex;align-items:center;gap:10px}.rail-self__name{font-weight:600;font-size:15px}.rail-self__role{font-family:var(--pp-mono);font-size:10px;color:var(--pp-ink-soft);letter-spacing:0}.rail-leave{width:100%;margin-top:14px;border-radius:var(--pp-radius-pill)!important}.rail-deck{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px 0;justify-items:center}.rail-hint{margin:8px 0 0;font-size:12px;color:var(--pp-ink-soft)}.rail-hint strong{color:var(--pp-accent)}.rail-action{width:100%;height:44px;border-radius:var(--pp-radius-pill)!important;font-weight:600!important}.rail-row{display:flex;gap:8px;margin-bottom:12px}.rail-row>*{flex:1}.rail-end-as{border-top:1px dashed oklch(84% .03 250deg);padding-top:12px}.rail-end-as__label{font-family:var(--pp-mono);font-size:10px;color:var(--pp-ink-soft);letter-spacing:0;margin-bottom:8px}.rail-end-as__row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.end-as-btn{border:1px solid oklch(84% .03 250deg);background:#fff;border-radius:8px;padding:8px 0;font-weight:600;font-size:13px;cursor:pointer;transition:all .18s ease}.end-as-btn:hover{background:var(--pp-accent-soft);border-color:var(--pp-accent-line);color:var(--pp-accent);transform:translateY(-2px)}.end-as-btn--mode{background:linear-gradient(140deg,var(--pp-cyan),var(--pp-accent) 45%,var(--pp-accent-strong));border-color:transparent;color:#fff}.rail-people{list-style:none;margin:0;padding:0}.rail-people li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed oklch(84% .03 250deg)}.rail-people li:last-child{border-bottom:none}.rail-people__name{flex:1;font-size:13px;font-weight:500}.rail-people__owner{font-family:var(--pp-mono);font-size:10px;letter-spacing:0;color:var(--pp-accent)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:960px){.room__layout{grid-template-columns:1fr}.room__rail{position:static}}@media(max-width:620px){.room{padding:16px}.room__join{margin:36px auto;padding:24px}.room__stage{padding:18px}.room__round-head{flex-direction:column;align-items:stretch;gap:10px}.room__round-head h2{font-size:21px}.room__progress{align-self:flex-start}.room__felt{min-height:156px;border-radius:34px;padding:18px}.room__start{flex-direction:column;align-items:stretch}.room__start button{width:100%}.seats{gap:14px}.seat{min-width:66px}.seat__name{max-width:72px}.rail-row{flex-direction:column}}@media(max-width:420px){.room{padding:12px}.room__stage,.room__rail .rail-block{border-radius:var(--pp-radius-md)}.rail-deck{gap:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}
