:root{--font-family:"Inter", system-ui, sans-serif;--font-family-heading:"Plus Jakarta Sans", system-ui, sans-serif;--color-brand:#5b5ef7;--color-brand-hover:#4547e0;--color-brand-light:#ededfd;--color-ok:#22c55e;--color-degraded:#f59e0b;--color-error:#ef4444;--color-ok-bg:#f0fdf4;--color-degraded-bg:#fffbeb;--color-error-bg:#fef2f2;--pico-primary:var(--color-brand);--pico-primary-hover:var(--color-brand-hover);--pico-primary-focus:rgba(91,94,247,.25);--pico-primary-inverse:#fff;--pico-background-color:#f8f8ff;--pico-card-background-color:#fff;--pico-card-border-color:#e8e8f0;--section-gap:3rem}[data-theme=dark]{--color-brand-light:rgba(91,94,247,.15);--color-ok-bg:rgba(34,197,94,.12);--color-degraded-bg:rgba(245,158,11,.12);--color-error-bg:rgba(239,68,68,.12);--pico-background-color:#12121a;--pico-card-background-color:#1c1c28;--pico-card-border-color:#2a2a3c}body{font-family:var(--font-family)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);letter-spacing:-.02em;font-weight:700}header{border-bottom:1px solid var(--pico-card-border-color);margin-bottom:var(--section-gap);padding-block:1rem}.brand{font-family:var(--font-family-heading);color:var(--color-brand);letter-spacing:-.02em;font-size:1.15rem}.theme-toggle{padding:.35rem .9rem;font-size:.85rem}.hero{text-align:center;padding-block:3rem 2rem}.hero h1{margin-bottom:.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:800}.hero p{color:var(--pico-muted-color);font-size:1.15rem}.health-card{flex-direction:column;gap:1rem;max-width:36rem;display:flex}.health-status{border-radius:var(--pico-border-radius);border:1px solid var(--pico-card-border-color);padding:1.25rem 1.5rem}.health-status.status-ok{background-color:var(--color-ok-bg);border-color:var(--color-ok)}.health-status.status-degraded{background-color:var(--color-degraded-bg);border-color:var(--color-degraded)}.health-status.status-error{background-color:var(--color-error-bg);border-color:var(--color-error)}.health-status header{border:none;align-items:center;gap:.6rem;margin-bottom:.75rem;padding:0;display:flex}.status-dot{background-color:currentColor;border-radius:50%;flex-shrink:0;width:.65rem;height:.65rem;display:inline-block}.status-ok .status-dot{color:var(--color-ok)}.status-degraded .status-dot{color:var(--color-degraded)}.status-error .status-dot{color:var(--color-error)}.health-status dl{grid-template-columns:auto 1fr;gap:.35rem 1.5rem;margin:0;display:grid}.health-status dl div{display:contents}.health-status dt{color:var(--pico-muted-color);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;font-weight:600}.health-status dd{margin:0;font-size:.95rem}.section-description{color:var(--pico-muted-color);margin-bottom:1.5rem;font-size:.9rem}.click-counter{flex-direction:column;align-items:flex-start;gap:1.25rem;max-width:28rem;display:flex}.click-display{background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);flex-direction:column;align-items:flex-start;gap:.25rem;width:100%;padding:1.25rem 1.75rem;display:flex}.click-count{font-family:var(--font-family-heading);letter-spacing:-.04em;color:var(--color-brand);font-size:clamp(2.5rem,8vw,4rem);font-weight:800;line-height:1}.click-count.click-error{color:var(--color-error)}.click-label{text-transform:uppercase;letter-spacing:.06em;color:var(--pico-muted-color);font-size:.8rem;font-weight:600}.click-btn{font-family:var(--font-family-heading);letter-spacing:-.01em;min-width:9rem;padding:.65rem 2rem;font-size:1.05rem;font-weight:700;transition:transform 80ms,box-shadow 80ms}.click-btn:active:not(:disabled){transform:scale(.96)}.click-hint{color:var(--pico-muted-color);margin:0;font-size:.8rem;line-height:1.5}footer{border-top:1px solid var(--pico-card-border-color);margin-top:var(--section-gap);color:var(--pico-muted-color);text-align:center;padding-block:1.5rem;font-size:.875rem}:root{--card-bg:#fff;--card-border:#d4d6e2;--card-shadow:0 1px 3px rgba(20,20,60,.12);--card-red:#d23a3a;--card-black:#1a1a2c;--card-back-bg:linear-gradient(135deg, #5b5ef7 0%, #3133b8 100%);--card-back-pattern:repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);--felt-color:#1f6f3e;--felt-color-dark:#134524}[data-theme=dark]{--card-bg:#f5f5fb;--card-border:#2a2a3c;--card-shadow:0 1px 3px rgba(0,0,0,.5);--felt-color:#144a2a}.nav-user{align-items:center;gap:.75rem;font-size:.9rem;display:inline-flex}.nav-user button{margin:0;padding:.3rem .8rem;font-size:.8rem}.auth-page{justify-content:center;padding-block:2rem 4rem;display:flex}.auth-card{background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);width:100%;max-width:26rem;padding:2rem 2.25rem;box-shadow:0 8px 24px rgba(20,20,60,.06)}.auth-card h1{margin-bottom:1.25rem;font-size:1.6rem}.auth-card form label{margin-bottom:.85rem;display:block}.auth-card footer{text-align:left;color:var(--pico-muted-color);border-top:none;margin-top:1rem;padding:1rem 0 0;font-size:.9rem}.auth-error{background:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--pico-border-radius);color:var(--color-error);margin:.75rem 0;padding:.6rem .9rem;font-size:.9rem}.dashboard{flex-direction:column;gap:2.5rem;display:flex}.dashboard-actions{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.5rem;display:grid}.dashboard-card{background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);padding:1.5rem}.dashboard-card h2{margin-bottom:.5rem;font-size:1.25rem}.dashboard-card p{color:var(--pico-muted-color);margin-bottom:1rem;font-size:.9rem}.dashboard-card form label{margin-bottom:.75rem;display:block}.dashboard-card button{margin:0}.invite-banner{background:var(--color-brand-light);border-radius:var(--pico-border-radius);border:1px dashed var(--color-brand);word-break:break-all;margin-top:1rem;padding:.85rem 1rem;font-size:.9rem;line-height:1.6}.invite-link{background:rgba(0,0,0,.05);border-radius:.25rem;padding:.15rem .4rem;font-size:.85rem}.dashboard-empty{color:var(--pico-muted-color);font-style:italic}.game-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.game-row a{border-radius:var(--pico-border-radius);border:1px solid var(--pico-card-border-color);background:var(--pico-card-background-color);color:inherit;grid-template-columns:8rem 1fr auto;align-items:center;gap:1rem;padding:.85rem 1rem;text-decoration:none;transition:border-color .12s,transform .12s;display:grid}.game-row a:hover{border-color:var(--color-brand);transform:translateY(-1px)}.game-row-phase{text-transform:uppercase;letter-spacing:.06em;color:var(--color-brand);font-size:.8rem;font-weight:600}.game-row-players{color:var(--pico-color);font-size:.95rem}.badge{text-transform:uppercase;letter-spacing:.05em;background:rgba(0,0,0,.06);border-radius:999px;padding:.2rem .55rem;font-size:.75rem;font-weight:600}.badge-turn{background:var(--color-ok-bg);color:var(--color-ok);border:1px solid var(--color-ok)}.card{background:var(--card-bg);border:1px solid var(--card-border);width:3.5rem;height:5rem;box-shadow:var(--card-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.5rem;justify-content:center;align-items:center;margin:0;padding:0;transition:transform .12s,box-shadow .12s;display:inline-flex;position:relative}.card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 4px 10px rgba(20,20,60,.18)}.card-red{color:var(--card-red)}.card-black{color:var(--card-black)}.card-selected{border-color:var(--color-brand);transform:translateY(-10px);box-shadow:0 6px 14px rgba(91,94,247,.4)}.card-rank{font-family:var(--font-family-heading);font-size:.85rem;font-weight:700;line-height:1;position:absolute;top:.25rem;left:.4rem}.card-rank-corner{inset:auto .4rem .25rem auto;transform:rotate(180deg)}.card-suit{font-size:1.5rem;line-height:1}.card-back{background:var(--card-back-bg);color:transparent}.card-back-pattern{background-image:var(--card-back-pattern);border-radius:.3rem;position:absolute;inset:.35rem}.playfield{flex-direction:column;gap:1.25rem;display:flex}.playfield-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.playfield-header h1{margin:0 0 .25rem;font-size:1.5rem}.playfield-subtitle{color:var(--pico-muted-color);margin:0;font-size:.95rem}.playfield-meta{text-align:right;flex-direction:column;align-items:flex-end;gap:.4rem;font-size:.85rem;display:flex}.playfield-error{text-align:center;padding:2rem}.invite-hint{color:var(--pico-muted-color);margin:0;font-size:.8rem}.invite-hint code{background:rgba(0,0,0,.06);border-radius:.25rem;padding:.1rem .4rem}.opponents{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;display:grid}.opponent{background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);flex-direction:column;gap:.6rem;padding:.85rem 1rem;display:flex}.opponent header{border:none;justify-content:space-between;align-items:baseline;margin:0;padding:0;display:flex}.hand-count{color:var(--pico-muted-color);font-size:.8rem}.opponent-hand{flex-wrap:wrap;gap:.15rem;display:flex}.opponent-hand .card{cursor:default;border-radius:.25rem;width:1.5rem;height:2.2rem}.opponent-hand .card:hover{box-shadow:var(--card-shadow);transform:none}.opponent-hand .card-back-pattern{border-radius:.15rem;inset:.15rem}.centre-table{background:linear-gradient(135deg, var(--felt-color) 0%, var(--felt-color-dark) 100%);border-radius:var(--pico-border-radius);color:#f1f9f4;padding:1.5rem}.lobby-panel,.finished-panel{flex-direction:column;align-items:center;gap:.75rem;display:flex}.lobby-panel button{margin:0}.finished-panel h2{color:#fff;margin:0}.table-piles{justify-content:center;gap:2.5rem;display:flex}.pile{flex-direction:column;align-items:center;gap:.5rem;display:flex}.pile-label{text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.85);font-size:.8rem}.your-melds,.your-hand{background:var(--pico-card-background-color);border:1px solid var(--pico-card-border-color);border-radius:var(--pico-border-radius);padding:1rem 1.25rem}.your-melds h3,.your-hand h3{text-transform:uppercase;letter-spacing:.05em;color:var(--pico-muted-color);margin:0 0 .75rem;font-size:1rem}.hand-fan{flex-wrap:wrap;gap:.4rem;padding-top:.6rem;display:flex}.action-bar{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.action-bar button{flex:none;margin:0}.rummy-btn{background:var(--color-error);border-color:var(--color-error);letter-spacing:.04em;font-weight:700}.rummy-btn:hover:not(:disabled){background:#c82a2a;border-color:#c82a2a}.action-hint{color:var(--pico-muted-color);margin:.75rem 0 0;font-size:.85rem;line-height:1.5}.meld-list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.meld{align-items:center;gap:.75rem;display:flex}.meld-label{text-transform:uppercase;letter-spacing:.05em;color:var(--pico-muted-color);min-width:4.5rem;font-size:.75rem}.meld-cards{flex-wrap:wrap;gap:.2rem;display:flex}.meld-cards .card{cursor:default;border-radius:.3rem;width:2.4rem;height:3.4rem}.meld-cards .card:hover{box-shadow:var(--card-shadow);transform:none}.meld-cards .card-rank{font-size:.65rem;top:.15rem;left:.25rem}.meld-cards .card-rank-corner{inset:auto .25rem .15rem auto}.meld-cards .card-suit{font-size:.95rem}.meld-empty{color:var(--pico-muted-color);margin:0;font-size:.85rem;font-style:italic}