/*
 * 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: 30px; }
.pp-brand img { max-height: 28px; max-width: 70%; }
.pp-wordmark { letter-spacing: 3px; text-transform: uppercase; color: #fff; }
/* 'Press Start 2P' has no detail left at half size, so the trademark mark turns to
   mush. It is the one glyph here that is typography rather than pixel art, so it
   gets a real face. The typed greeting cannot take a class — its letters are split
   into one span each by join-stage.js — so the mark is targeted as the last span. */
.tm, .pp-greet-text span:last-child {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.45em; vertical-align: super; letter-spacing: 0;
}
.pp-greet-text { text-transform: uppercase; }
.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; font-size: 24px; }
    .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; }
    /* The cartoon mixer is the pixel .pp-strip's counterpart and needs the same
       `flex: 1 1 auto` here. Without it the panel was held at 100% of --block while
       the mixer took only its content height, which measured as 219px of nothing
       between the colour row and the buttons (the buttons are floored by
       `.pp-beat-2 .pp-panel .pp-row { margin-top: auto }`, so the slack was visible
       rather than collapsed). With the height now reaching the grid, spend it on
       bigger part tiles too — at 64px a two-option group was two stamps in a 640px
       card. */
    main.pp-pair .pp-parts { flex: 1 1 auto; }
    main.pp-pair .pp-parts .ap-options { grid-template-columns: repeat(auto-fill, 88px); grid-auto-rows: 88px; gap: 16px; }
    main.pp-pair .pp-parts .ap-option { width: 88px; height: 88px; padding: 6px; }
}
@media (max-height: 620px) and (orientation: landscape) {
    .pp-brand { flex-basis: 40px; font-size: 20px; }
    .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-parts { padding: 6px 6px 10px; }
    main.pp-pair .pp-parts .ap-options { grid-template-columns: repeat(auto-fill, 52px); grid-auto-rows: 52px; gap: 10px; }
    main.pp-pair .pp-parts .ap-option { width: 52px; height: 52px; padding: 3px; }
    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; }
}

/* The ownership line sits on the pixel stage too, which is a fixed, overflow-hidden
   canvas — so it is pinned rather than flowed, and kept clear of the phone's home
   indicator. Quiet enough not to compete with the stage, legible enough to count. */
.pp-stage .tyga-copyright,
body.pp-join .tyga-copyright {
    position: fixed; left: 0; right: 0;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    text-align: center; font-family: var(--pp-text); font-size: 11px;
    color: rgba(255,255,255,.55); pointer-events: none; z-index: 5;
}