/*
 * Pixel Frame — the signup UI kit (/auth/join and /auth/join/welcome).
 * Design: the canvas "PixelPerfect Signup — Pixel UI Kit & Flow". Each page sets --pp-brand
 * (the hub's theme colour) inline; every other token derives from it here.
 */
/* ── Pixel Frame: the one UI kit (GDD canvas "PixelPerfect Signup — Pixel UI Kit & Flow") ──
   1 ONE FRAME: every surface is a fill + a 4px ink border with notched corners + a hard
     shadow straight down. No radius, no blur, no gradient, nothing see-through.
   2 4PX GRID.  3 TWO FACES (above).  4 SELECTED = PRESSED: sinks 4px, loses its shadow,
     border turns white.  5 ONE GROUP, DEAD CENTRE: logo pinned top, pips pinned bottom,
     everything else is one group centred on both axes; on wide screens beat 2 is two
     equal-height blocks centred as a pair. */
html, body { height: 100%; margin: 0; }
/* The hub theme paints body with var(--body-bg) !important; set that variable instead of out-shouting it. */
body.pp-join { --body-bg: var(--pp-brand); background: var(--pp-brand); color: #fff; font-family: var(--pp-text); overflow: hidden; }


/* Stage: header, ONE centred group, pips. Exactly one screen; the page never scrolls. */
.pp-stage { position: relative; z-index: 1; height: 100vh; height: 100dvh; margin: 0 auto; box-sizing: border-box; padding: 0 16px;
            display: flex; flex-direction: column; }
.pp-brand { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; font-family: var(--pp-display); font-size: 12px; }
.pp-brand img { max-height: 28px; max-width: 70%; }
.pp-center { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.pp-dots { flex: 0 0 48px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.pp-dots span { width: 8px; height: 8px; background: var(--pp-panel); box-shadow: 0 0 0 2px var(--pp-soft); }
.pp-dots span.done { background: #fff; box-shadow: none; }
.pp-dots span.on { width: 24px; background: #fff; box-shadow: 0 4px 0 0 var(--pp-drop); }

/* The crowd (beat 0) fills the window behind everything; dims once the player has a face. */
.pp-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; transition: opacity .5s ease; }
.pp-field canvas { display: block; width: 100%; height: 100%; }
body.pp-past-hero .pp-field { opacity: .12; }
.pp-scrim { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 0; }
.pp-scrim-top { top: 0; height: 96px; background: linear-gradient(var(--pp-brand) 40%, transparent); }
.pp-scrim-bottom { bottom: 0; height: 30vh; background: linear-gradient(transparent, var(--pp-brand) 60%); }

/* The face. Mounted from first paint, never unmounted; hidden (not removed) at beat 0. */
.pp-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
main[data-beat="0"] .pp-slot { display: none; }
main[data-beat="1"] .pp-avatar { animation: pp-drop 360ms steps(6, end) both; }
@keyframes pp-drop { from { transform: translateY(-48px); opacity: 0; } to { transform: none; opacity: 1; } }

.pp-controls { display: flex; flex-direction: column; align-items: center; min-height: 0; max-width: 100%; }
.pp-beat { display: none; flex-direction: column; align-items: center; gap: 20px; min-height: 0; max-width: 100%; }
main[data-beat="0"] .pp-beat-0, main[data-beat="1"] .pp-beat-1, main[data-beat="2"] .pp-beat-2, main[data-beat="3"] .pp-beat-3,
main[data-beat="4"] .pp-beat-4, main[data-beat="5"] .pp-beat-5, main[data-beat="sent"] .pp-beat-sent { display: flex; }

/* Greeting: the RPG dialogue box. Pops in on whole steps, types, then blinks ▼. */
.pp-greet { max-width: min(560px, calc(100vw - 48px)); box-sizing: border-box; padding: 18px 20px 20px; background: var(--pp-paper); color: var(--pp-ink);
            font-family: var(--pp-display); font-size: 13px; line-height: 1.9; text-align: center; }
.pp-greet .pp-hl { color: var(--pp-brand); }
.pp-greet-text span { visibility: hidden; }
.pp-greet-text span.on { visibility: visible; }
.pp-greet-next { display: inline-block; margin-left: 8px; color: var(--pp-brand); visibility: hidden; }
.pp-greet.done .pp-greet-next { visibility: visible; animation: pp-blink 1s steps(1) infinite; }
@keyframes pp-blink { 50% { opacity: 0; } }
.pp-greet.pending { visibility: hidden; }
.pp-greet.pop { animation: pp-pop 320ms steps(4, end) both; }
@keyframes pp-pop { 0% { transform: scale(.2); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pp-login { color: #fff; font-size: 15px; }

main.pp-pair .pp-avatar { --av: min(160px, 20dvh); }

.pp-card { max-width: 360px; padding: 20px; background: var(--pp-panel); text-align: center; }
.pp-card h2 { font-family: var(--pp-display); font-size: 12px; line-height: 1.6; font-weight: 400; margin: 0 0 10px; }
.pp-card p { margin: 6px 0; color: var(--pp-soft); font-size: 15px; }
.pp-card a { color: #fff; font-weight: 700; }

/* Short or narrow phones: shorter header, smaller face. */
@media (max-height: 700px) and (orientation: portrait), (max-width: 370px) {
    .pp-brand { flex-basis: 48px; }
    .pp-dots { flex-basis: 32px; }
    .pp-center { gap: 16px; }
    main.pp-pair .pp-avatar { --av: min(112px, 17dvh); }
    .pp-greet { font-size: 11px; padding: 12px 14px 14px; line-height: 1.8; }
    .pp-btn { font-size: 11px; padding: 14px 14px; }
    .pp-tab { font-size: 13px; }
    .pp-panel { padding: 10px; gap: 8px; }
    .pp-swatch { width: 24px; }
    .pp-swatch::before { left: 5px; }
}
/* Tablets upright: a bigger card and bigger tiles. */
@media (min-width: 600px) and (orientation: portrait) and (min-height: 800px) {
    .pp-panel { width: min(560px, calc(100vw - 64px)); }
    main.pp-pair .pp-avatar { --av: min(240px, 22dvh); }
    .pp-strip { grid-template-columns: repeat(auto-fill, 60px); grid-auto-rows: 60px; }
    .pp-opt { width: 60px; height: 60px; }
    .pp-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .pp-tab { padding: 8px 12px; }
}
/* Wide screens and phones held sideways: beat 2 is two EQUAL-HEIGHT blocks, the face and
   the card, centred together as one pair. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) and (max-height: 620px) {
    .pp-greet { font-size: 18px; padding: 26px 30px 28px; }
    .pp-btn { font-size: 15px; padding: 20px 26px; }
    main[data-beat="1"] .pp-avatar { --av: min(360px, 42dvh); }
    main.pp-pair .pp-center { --block: min(600px, calc(100dvh - 180px), 40vw); flex-direction: row; align-items: center; gap: 48px; }
    main.pp-pair .pp-avatar { --av: var(--block); }
    main.pp-pair .pp-controls, main.pp-pair .pp-beat { height: calc(var(--block) + 8px); }
    main.pp-pair .pp-panel { width: min(640px, 46vw); height: 100%; padding: 20px; gap: 16px; }
    main.pp-pair .pp-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    main.pp-pair .pp-tab { padding: 9px 11px; font-size: 16px; }
    main.pp-pair .pp-strip { flex: 1 1 auto; grid-template-columns: repeat(auto-fill, 60px); grid-auto-rows: 60px; }
    main.pp-pair .pp-opt { width: 60px; height: 60px; }
}
@media (max-height: 620px) and (orientation: landscape) {
    .pp-brand { flex-basis: 40px; }
    .pp-dots { flex-basis: 28px; }
    main[data-beat="1"] .pp-avatar { --av: min(200px, 40dvh); }
    main.pp-pair .pp-center { --block: min(calc(100dvh - 84px), 38vw); gap: 24px; }
    main.pp-pair .pp-panel { width: min(640px, 54vw); padding: 8px; gap: 6px; }
    main.pp-pair .pp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; padding: 4px 4px 6px; }
    main.pp-pair .pp-tab { padding: 3px 4px; font-size: 13px; min-height: 28px; }
    main.pp-pair .pp-strip { grid-template-columns: repeat(auto-fill, 40px); grid-auto-rows: 40px; gap: 14px; padding: 6px 6px 10px; }
    main.pp-pair .pp-opt { width: 40px; height: 40px; }
    main.pp-pair .pp-swatch { height: 36px; min-height: 36px; }
    main.pp-pair .pp-swatch::before { top: 9px; }
    main.pp-pair .pp-swatch[aria-checked="true"]::before { top: 13px; }
    main.pp-pair .pp-panel .pp-btn { min-height: 40px; padding: 10px 14px; }
    .pp-greet { font-size: 11px; padding: 10px 16px 12px; line-height: 1.7; }
    .pp-btn { font-size: 11px; padding: 12px 16px; min-height: 44px; }
    .pp-center { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Beats 3-5: name it, the reveal, claim it ─────────────────────────────── */
/* The handle plate: the face wears the name from beat 3 on. */
.pp-plate { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--pp-ink); color: #fff;
            font-family: var(--pp-text); font-size: 20px; font-weight: 700; box-shadow: 0 8px 0 0 var(--pp-drop); max-width: 100%; }
.pp-plate[hidden] { display: none; }
.pp-plate .pp-cc { font-family: var(--pp-display); font-size: 9px; color: var(--pp-gold); }
main.pp-pair.pp-has-plate .pp-avatar { --av: min(140px, 17dvh); }

.pp-title { margin: 0; font-family: var(--pp-display); font-size: 11px; line-height: 1.7; font-weight: 400; text-align: center; }
.pp-title .pp-hl { color: var(--pp-gold); }
.pp-label { display: flex; flex-direction: column; gap: 8px; font-family: var(--pp-display); font-size: 10px; line-height: 1.4; }
.pp-input { appearance: none; margin: 4px; padding: 12px; background: var(--pp-paper); color: var(--pp-ink); font-family: var(--pp-text); font-size: 18px;
            min-height: 48px; box-sizing: border-box; width: calc(100% - 8px); }
.pp-input:focus { --line: var(--pp-gold); outline: none; }
.pp-input[aria-invalid="true"] { --line: #fff; }
select.pp-input { cursor: pointer; padding-right: 36px;
                  background-image: linear-gradient(45deg, transparent 50%, var(--pp-ink) 50%), linear-gradient(135deg, var(--pp-ink) 50%, transparent 50%);
                  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.pp-status { min-height: 20px; margin: -4px 0 0; font-size: 15px; }
.pp-status.no { color: var(--pp-gold); }
.pp-dob { display: flex; gap: 12px; }
.pp-dob .pp-input { width: 64px; text-align: center; flex: 0 0 auto; }
.pp-dob .pp-input:last-child { width: auto; flex: 1 1 auto; }
.pp-legal { margin: 0; font-size: 13px; line-height: 1.4; color: var(--pp-soft); text-align: center; }
.pp-legal a { color: #fff; }
.pp-error { margin: 0; min-height: 18px; font-size: 15px; color: var(--pp-gold); text-align: center; }
.pp-beat-2 .pp-panel .pp-row, .pp-beat-4 .pp-panel .pp-row { margin-top: auto; }
.pp-beat-3 .pp-panel, .pp-beat-5 .pp-panel, .pp-beat-sent .pp-panel { justify-content: center; }

/* The board: real hub members, then YOU under it as NEW (never an invented rank). */
.pp-board { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 4px 4px 8px; flex: 1 1 auto; }
.pp-board-row { display: flex; gap: 12px; align-items: center; padding: 6px 12px; background: var(--pp-tile); font-size: 17px; }
.pp-board-row .pp-rank { width: 40px; flex: 0 0 auto; font-family: var(--pp-display); font-size: 10px; }
.pp-board-row img, .pp-board-row svg { width: 36px; height: 36px; flex: 0 0 auto; image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.pp-board-row .pp-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-board-row.is-you { --line: #fff; background: var(--pp-gold); color: var(--pp-ink); font-weight: 700; }
.pp-board-empty { margin: 0; font-size: 15px; color: var(--pp-soft); text-align: center; }

/* Small-screen fit for beats 3-5 (measured on a 320x568 phone). */
.pp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pp-legend { float: none; width: auto; margin: 0; padding: 0 0 8px; font-family: var(--pp-display); font-size: 10px; line-height: 1.4; color: #fff; }
.pp-dob .pp-input { min-width: 0; }
main[data-beat="4"] .pp-avatar, main[data-beat="5"] .pp-avatar, main[data-beat="sent"] .pp-avatar { --av: min(96px, 12dvh); }
@media (max-height: 700px) and (orientation: portrait), (max-width: 370px) {
    main[data-beat="5"] .pp-avatar, main[data-beat="sent"] .pp-avatar, main[data-beat="4"] .pp-avatar { --av: min(72px, 10dvh); }
    main.pp-has-plate .pp-slot { gap: 10px; }
    .pp-plate { font-size: 17px; padding: 6px 12px; }
    .pp-input { min-height: 44px; padding: 10px; font-size: 17px; }
    .pp-legal { font-size: 12px; }
}

/* Fields scroll inside the card on very short screens; the action row stays pinned. */
.pp-fields { display: flex; flex-direction: column; gap: 12px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px 4px; }
.pp-panel > .pp-fields { flex-shrink: 1; }
.pp-board-you { padding: 0 4px 6px; }
@media (max-height: 700px) and (orientation: portrait), (max-width: 370px) {
    .pp-fields { gap: 8px; }
    .pp-beat-5 .pp-panel { padding: 8px; gap: 6px; }
    .pp-title { font-size: 10px; }
}
@media (max-height: 620px) and (orientation: landscape) {
    .pp-fields { gap: 6px; }
    .pp-legal { display: none; }
    .pp-title { font-size: 10px; }
    .pp-input { min-height: 40px; padding: 8px 10px; font-size: 16px; }
    body.pp-past-hero .pp-greet { font-size: 11px; }
}

/* Wide screens: from beat 3 the left block is face + plate, together exactly the card's height. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) and (max-height: 620px) {
    main.pp-pair.pp-has-plate[data-beat] .pp-avatar { --av: min(calc(var(--block) - 76px), 40vw); }
    main.pp-pair.pp-has-plate .pp-slot { height: calc(var(--block) + 8px); justify-content: center; }
}