.hero-banner{background:var(--initial-header-bg,#1a1a2e);border-radius:8px;flex-shrink:0;position:relative}.hero-banner--tall{height:var(--banner-height-tall);max-height:var(--banner-height-tall);width:var(--banner-width-tall);max-width:var(--banner-width-tall);flex-shrink:0;margin-top:2px;margin-bottom:2px}.hero-banner--shrunk{height:var(--banner-height-shrunk);max-height:var(--banner-height-shrunk);width:var(--banner-width-shrunk);max-width:var(--banner-width-shrunk);flex-shrink:0;margin-top:0;margin-bottom:0}.hero-banner__viewport{opacity:0;border-radius:8px;width:100%;height:100%;transition:opacity .3s ease-in-out;position:relative;overflow:hidden}.hero-banner__viewport--ready{opacity:1}.hero-banner__slide{border-radius:8px;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}@keyframes heroBannerSlideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes heroBannerSlideIn{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.hero-banner__slide--out{z-index:1;animation:.65s ease-in-out forwards heroBannerSlideOut}.hero-banner__slide--in{z-index:2;animation:.65s ease-in-out forwards heroBannerSlideIn}.hero-banner__img{object-fit:cover;object-position:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.hero-banner__dots{z-index:10;pointer-events:none;justify-content:center;gap:5px;display:flex;position:absolute;bottom:3px;left:0;right:0}.hero-banner__dot{cursor:pointer;pointer-events:all;background:#ffffff73;border:none;border-radius:50%;flex-shrink:0;width:6px;height:6px;padding:0;transition:background .2s,transform .2s}.hero-banner__dot:hover{background:#fffc;transform:scale(1.3)}.hero-banner__dot--active{background:#fffffff2;transform:scale(1.2)}@media (max-width:768px){.hero-banner__dots{display:none}}
.pgl-overlay{z-index:10000;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.2s pgl-fade-in;display:flex;position:fixed;top:0;left:0}@keyframes pgl-fade-in{0%{opacity:0}to{opacity:1}}.pgl-dialog{background:var(--dashboard-card-bg-light,#fff);border-radius:16px;flex-direction:column;width:90%;max-width:640px;max-height:85vh;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000080}.pgl-header{border-bottom:1px solid #00000014;justify-content:space-between;align-items:center;padding:clamp(.75rem,2vw,1.25rem) clamp(1rem,2.5vw,1.5rem);display:flex}.pgl-title{color:var(--dashboard-text,#1e293b);margin:0;font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:700}.pgl-close-btn{color:#64748b;cursor:pointer;background:0 0;border:none;padding:.25rem;font-size:1.5rem;line-height:1;transition:color .2s}.pgl-close-btn:hover{color:#1e293b}.pgl-tabs{border-bottom:1px solid #00000014;padding:0 clamp(1rem,2.5vw,1.5rem);display:flex}.pgl-tab{text-align:center;color:#64748b;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:.75rem .5rem;font-size:.9rem;font-weight:600;transition:color .2s,border-color .2s}.pgl-tab:hover{color:var(--dashboard-text,#1e293b)}.pgl-tab--active{color:var(--dashboard-accent,#3b82f6);border-bottom-color:var(--dashboard-accent,#3b82f6)}.pgl-tab--disabled{opacity:.5;cursor:not-allowed}.pgl-body{flex:1;padding:clamp(.75rem,2vw,1.25rem) clamp(1rem,2.5vw,1.5rem);overflow-y:auto}.pgl-filters{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.pgl-filter-btn{color:#64748b;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000001f;border-radius:20px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:all .2s}.pgl-filter-btn:hover{background:#0000000a}.pgl-filter-btn--active{background:var(--dashboard-accent,#3b82f6);color:#fff;border-color:var(--dashboard-accent,#3b82f6)}.pgl-section-title{text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin:1rem 0 .5rem;font-size:.75rem;font-weight:700}.pgl-lobby-list{flex-direction:column;gap:.5rem;display:flex}.pgl-lobby-row{background:#00000005;border:1px solid #0000000f;border-radius:10px;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:.75rem;padding:.6rem .75rem;transition:background .15s;display:grid}.pgl-lobby-row:hover{background:#0000000a}.pgl-lobby-row--yours{background:#3b82f614;border-color:#3b82f633}.pgl-lobby-row--yours:hover{background:#3b82f61f}.pgl-your-game-badge{text-transform:uppercase;background:var(--dashboard-accent,#3b82f6);color:#fff;vertical-align:middle;border-radius:4px;margin-left:.5rem;padding:.1rem .4rem;font-size:.65rem;font-weight:700}.pgl-lobby-game{text-transform:uppercase;white-space:nowrap;border-radius:4px;padding:.2rem .5rem;font-size:.75rem;font-weight:700}.pgl-lobby-game--chess{color:#1e40af;background:#dbeafe}.pgl-lobby-game--jigsaw{color:#166534;background:#dcfce7}.pgl-lobby-game--sudoku{color:#854d0e;background:#fef9c3}.pgl-lobby-game--racing{color:#991b1b;background:#fee2e2}.pgl-lobby-info{flex-direction:column;gap:.1rem;min-width:0;display:flex}.pgl-lobby-host{color:var(--dashboard-text,#1e293b);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.pgl-lobby-meta{color:#94a3b8;font-size:.75rem}.pgl-lobby-players{color:#64748b;white-space:nowrap;font-size:.8rem}.pgl-lobby-status{text-transform:uppercase;white-space:nowrap;border-radius:4px;padding:.15rem .4rem;font-size:.7rem;font-weight:600}.pgl-lobby-status--waiting{color:#1e40af;background:#dbeafe}.pgl-lobby-status--playing{color:#166534;background:#dcfce7}.pgl-join-btn,.pgl-watch-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:all .15s}.pgl-join-btn{background:var(--dashboard-accent,#3b82f6);color:#fff}.pgl-join-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.pgl-join-btn:disabled,.pgl-watch-btn:disabled{opacity:.5;cursor:not-allowed}.pgl-watch-btn{color:#64748b;background:#0000000f}.pgl-watch-btn:hover:not(:disabled){background:#0000001a}.pgl-empty{text-align:center;color:#94a3b8;padding:2rem 1rem}.pgl-empty-icon{margin-bottom:.5rem;font-size:2.5rem}.pgl-empty-text{margin:0;font-size:.95rem}.pgl-empty-subtext{color:#64748b;margin:.5rem 0 1rem;font-size:.85rem}.pgl-empty-links{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;display:flex}.pgl-empty-link{color:var(--dashboard-text,#1e293b);cursor:pointer;background:#00000005;border:1px solid #0000001a;border-radius:8px;padding:.4rem .75rem;font-size:.85rem;font-weight:600;transition:all .15s}.pgl-empty-link:hover{border-color:var(--dashboard-accent,#3b82f6);color:var(--dashboard-accent,#3b82f6);background:#3b82f61a}.pgl-loading{flex-direction:column;gap:.5rem;padding:1rem 0;display:flex}.pgl-skeleton-row{background:#00000005;border-radius:10px;grid-template-columns:60px 1fr 50px 60px 60px;align-items:center;gap:.75rem;padding:.6rem .75rem;animation:1.5s ease-in-out infinite pgl-pulse;display:grid}.pgl-skeleton-bar{background:#00000014;border-radius:4px;height:1rem}.pgl-skeleton-bar--sm{width:60%}.pgl-skeleton-bar--md{width:80%}.pgl-skeleton-bar--lg{width:100%}@keyframes pgl-pulse{0%,to{opacity:1}50%{opacity:.5}}.pgl-error{color:#ef4444;background:#ef444414;border-radius:8px;margin-bottom:.75rem;padding:.6rem .75rem;font-size:.85rem}.pgl-code-form{flex-direction:column;gap:1rem;padding:1rem 0;display:flex}.pgl-code-hint{color:#64748b;margin:0;font-size:.9rem}.pgl-code-input{text-align:center;letter-spacing:.3em;text-transform:uppercase;color:var(--dashboard-text,#1e293b);background:#00000005;border:2px solid #0000001a;border-radius:10px;padding:1rem;font-family:inherit;font-size:2rem;font-weight:700;transition:border-color .2s,box-shadow .2s}.pgl-code-input:focus{border-color:var(--dashboard-accent,#3b82f6);outline:none;box-shadow:0 0 0 3px #3b82f633}.pgl-code-submit{background:var(--dashboard-accent,#3b82f6);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:.85rem;font-size:1.1rem;font-weight:700;transition:filter .2s,transform .1s}.pgl-code-submit:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.pgl-code-submit:disabled{cursor:not-allowed;opacity:.7;background:#94a3b8}.pgl-code-result{background:#00000005;border:1px solid #0000000f;border-radius:10px;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.pgl-code-result-info{align-items:center;gap:.75rem;display:flex}.pgl-code-result-actions{gap:.5rem;display:flex}.pgl-code-result-actions .pgl-join-btn,.pgl-code-result-actions .pgl-watch-btn{flex:1;padding:.6rem;font-size:.95rem}.pgl-upgrade-prompt{text-align:center;color:#64748b;padding:1.5rem 1rem}.pgl-upgrade-prompt p{margin:0 0 1rem;font-size:.95rem}.pgl-upgrade-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:8px;padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;transition:filter .2s,transform .1s}.pgl-upgrade-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}@media (max-width:768px){.pgl-dialog{width:95%;max-height:90vh}.pgl-lobby-row{grid-template-columns:auto 1fr auto;gap:.5rem}.pgl-lobby-players,.pgl-lobby-status{display:none}.pgl-code-input{font-size:1.5rem}}
