/* Chum Crews — public directory + crew management.
   Reuses quest.css tokens (--void, --gold, --glint, fonts). */
.crews-body { overflow: auto; min-height: 100%; display: flex; justify-content: center; padding: 24px 16px 60px; }
.crews-wrap { position: relative; z-index: 1; width: 100%; max-width: 640px; }

.crews-home {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--dim);
    text-decoration: none;
    margin-bottom: 18px;
}
.crews-home:hover, .crews-home:focus-visible { color: var(--gold); outline: none; }

.crews-title {
    text-align: center;
    font-size: clamp(16px, 5vw, 24px);
    color: var(--gold);
    text-shadow: 2px 2px 0 #703808;
    margin-bottom: 4px;
}
.crews-sub {
    text-align: center;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--glint);
    margin-bottom: 24px;
}
/* entangled twin orbs flanking the subtitle (sprite library's first field trip) */
.sub-orb { display: inline-block; vertical-align: middle; margin: 0 9px; min-width: 24px; min-height: 24px; }
.sub-orb svg { display: block; }
/* narrow phones: smaller orbs + tighter margins so the subtitle doesn't wrap
   and split the twins (11px pixel font + flanks ≈ 365px at full size) */
@media (max-width: 430px) {
    .sub-orb { margin: 0 4px; min-width: 16px; min-height: 16px; }
}

.crews-head { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.crews-h2 { font-size: 12px; color: var(--glint); white-space: nowrap; }
.crews-rule { flex: 1 1 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--win-line) 0 8px, transparent 8px 14px); }

/* ---------- cards / shared controls ---------- */
.crew-card {
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 8px;
    box-shadow: inset 0 0 0 3px var(--win-line), 0 6px 0 rgba(0, 0, 0, 0.45);
    padding: 18px;
    margin-bottom: 14px;
}
.crew-p { font-size: 17px; line-height: 1.5; margin-bottom: 14px; color: var(--ink); }
.crew-row { display: flex; gap: 8px; }
.crew-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: rgba(4, 4, 28, 0.85);
    border: 3px solid var(--frame);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'DotGothic16', monospace;
    font-size: 17px;
    padding: 9px 11px;
}
.crew-input:focus-visible { outline: none; border-color: var(--glint); }
.crew-input::placeholder { color: #5a60a0; }
.crew-tag-input { text-transform: uppercase; letter-spacing: 0.14em; }
select.crew-input { appearance: none; cursor: pointer; }
.crew-area { resize: vertical; line-height: 1.4; }
.crew-btn {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--win-top), var(--win-bot));
    border: 3px solid var(--frame);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.6;
    padding: 10px 12px;
    cursor: pointer;
}
.crew-btn:hover, .crew-btn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.crew-btn.gold { border-color: var(--gold); color: var(--gold); }
.crew-btn.danger { border-color: var(--danger); color: var(--danger); }
.crew-btn.danger:hover, .crew-btn.danger:focus-visible { background: var(--danger); color: #200; }
.crew-btn:disabled { opacity: 0.45; cursor: default; }
.crew-msg { font-size: 15px; line-height: 1.5; color: var(--dim); min-height: 1.2em; margin-top: 6px; }
.crew-msg.err { color: var(--danger); }
.crew-msg.ok { color: var(--gold); }
.crew-empty { color: var(--dim); font-size: 15px; text-align: center; padding: 16px 0; }

.crew-session-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; }
.crew-session-bar .crew-whoami { flex: 1 1 auto; }
.crew-whoami { font-size: 14px; color: var(--dim); word-break: break-all; }

/* ---------- found-a-crew form ---------- */
.crew-form { display: flex; flex-direction: column; gap: 12px; }
.crew-label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--dim); }
.crew-hint { opacity: 0.7; font-size: 12px; }
.crew-grid2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .crew-grid2 { grid-template-columns: 1fr 1fr; } }
#f-save { align-self: flex-start; }

/* ---------- crew cards (directory + mine) ---------- */
.crew-item { padding: 16px 18px; }
.crew-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.crew-emblem {
    flex: 0 0 auto;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 4px;
    padding: 5px 7px;
    letter-spacing: 1px;
}
.crew-name { flex: 1 1 auto; min-width: 40%; font-size: 19px; color: var(--ink); }
.crew-count { flex: 0 0 auto; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--dim); }
.crew-policy {
    flex: 0 0 auto;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 2px solid currentColor;
}
.policy-open { color: #8ff0a4; }
.policy-request { color: var(--glint); }
.policy-invite { color: var(--dim); }
.crew-desc { font-size: 15px; color: var(--dim); line-height: 1.5; margin-top: 8px; }
.crew-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crew-role {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 2px solid currentColor;
}
.role-leader { color: var(--gold); }
.role-member { color: var(--glint); }

/* leader panel inside my-crew cards */
.crew-panel { margin-top: 14px; border-top: 2px solid var(--win-line); padding-top: 12px; }
.crew-panel-h {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--glint);
    margin-bottom: 8px;
}
.crew-line {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(4, 4, 28, 0.55);
    border: 2px solid var(--win-line);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 15px;
}
.crew-line .who { flex: 1 1 auto; min-width: 0; color: var(--ink); word-break: break-all; }
.crew-line .note { flex: 1 1 100%; order: 5; font-size: 13px; color: var(--dim); }
.crew-line .vactions { display: flex; gap: 6px; flex: 0 0 auto; }
.vbtn {
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--win-line);
    border-radius: 5px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 1.4;
    padding: 9px 11px;
    cursor: pointer;
}
.vbtn.ok:hover, .vbtn.ok:focus-visible { color: #8ff0a4; border-color: #8ff0a4; outline: none; }
.vbtn.warn:hover, .vbtn.warn:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.vbtn.bad:hover, .vbtn.bad:focus-visible { color: var(--danger); border-color: var(--danger); outline: none; }

/* settings editor */
.crew-settings { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.crew-settings[hidden] { display: none; }

#auth-login[hidden], #auth-whoami[hidden], #mine-section[hidden], #found-section[hidden], #netq-section[hidden] { display: none; }

.crews-foot {
    margin-top: 40px;
    text-align: center;
    font-family: 'DotGothic16', monospace;
    font-size: 13px;
    color: var(--dim);
}
.crews-foot .f-title { display: block; font-size: 8px; margin-bottom: 8px; color: var(--dim); }

/* ================= crew quests ================= */
.qstatus {
    flex: 0 0 auto;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 2px solid currentColor;
}
.qs-voting { color: var(--glint); }
.qs-active { color: #8ff0a4; }
.qs-results { color: var(--gold); }
.qs-validated { color: #c8a2ff; }
.qs-archived { color: var(--dim); }
.qs-featured { color: var(--gold); }
/* ---- quest card: marketing zones up top, mechanics grouped below ---- */
.quest-item {
    background: linear-gradient(180deg, rgba(8, 8, 40, 0.55), rgba(4, 4, 28, 0.55));
    border: 2px solid var(--win-line);
    border-radius: 10px;
    padding: 20px 18px;
    margin-bottom: 16px;
    /* major zones are the direct children; this gap groups them. Tight rhythm
       within a zone is handled by each zone's own gap. */
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.quest-item > * { margin: 0; }

/* header: status eyebrow -> headline -> tagline */
.qi-head { display: flex; flex-direction: column; gap: 11px; }
.qi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qi-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(13px, 4vw, 18px);
    color: var(--gold);
    line-height: 1.6;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(248, 204, 80, 0.45), 2px 2px 0 #703808;
}
.qi-tagline {
    font-size: clamp(15px, 3.6vw, 18px);
    color: var(--ink);
    line-height: 1.6;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.qi-desc {
    font-size: 15px;
    color: var(--dim);
    line-height: 1.72;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* inline hero video — framed like the quest page instead of a bare link */
.quest-video { border: 3px solid var(--frame); border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4); }
.quest-video video { display: block; width: 100%; height: auto; }

/* ---- prize showcase: reads like loot, not a caption ---- */
.qi-loot {
    display: flex; flex-direction: column; gap: 11px;
    background: rgba(4, 4, 28, 0.5);
    border: 2px solid var(--gold-deep);
    border-radius: 10px;
    padding: 15px;
    box-shadow: inset 0 0 26px rgba(248, 204, 80, 0.1);
}
.qi-loot-label { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1.5px; line-height: 1.6; text-shadow: 0 0 9px currentColor; }
.qi-loot-label.won { color: var(--gold); }
.qi-loot-label.all { color: var(--glint); }
.qi-loot-hint { font-family: 'DotGothic16', monospace; font-size: 12px; letter-spacing: 0.03em; color: var(--dim); text-shadow: none; -webkit-font-smoothing: antialiased; }
.qi-prize-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 11px; }
.qi-prize { display: flex; flex-direction: column; background: rgba(4, 4, 28, 0.65); border: 2px solid var(--gold-deep); border-radius: 8px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.qi-prize:hover { transform: translateY(-3px); box-shadow: 0 0 16px rgba(248, 204, 80, 0.35); }
.qi-prize-img { aspect-ratio: 3 / 4; background: #04041c; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qi-prize-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qi-prize-noimg { color: var(--gold); font-size: 30px; }
.qi-prize-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.qi-prize-body b { color: var(--gold); font-size: 14px; line-height: 1.4; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; }
.qi-prize-note { color: var(--dim); font-size: 12.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.qi-prize-all { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.qi-prize-all li { font-size: 15px; color: var(--glint); line-height: 1.5; padding-left: 18px; position: relative; -webkit-font-smoothing: antialiased; }
.qi-prize-all li::before { content: '\25C6'; position: absolute; left: 0; top: 4px; color: var(--gold-deep); font-size: 9px; }
.qi-prize-plain { font-size: 15px; color: var(--ink); line-height: 1.6; }

/* party/RSVP + mechanics zones keep their own tight internal rhythm; each
   zone's gap owns the spacing, so zero the legacy per-element margins. */
.qi-muster { display: flex; flex-direction: column; gap: 8px; }
.qi-detail { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--win-line); padding-top: 14px; }
.qi-detail .quest-meta { font-size: 13.5px; }
.qi-foot { display: flex; flex-direction: column; gap: 12px; }
.qi-foot:empty { display: none; }
.qi-muster > *, .qi-detail > *, .qi-foot > * { margin: 0; }

/* host / leader management row — set apart from the primary flow controls */
.qi-manage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--win-line); }
.qi-manage .crew-hint { flex: 1 1 140px; }

/* mini-game quest: play link + standings (standings reuse .lb-* leaderboard rows) */
.qi-game { display: flex; flex-direction: column; gap: 10px; }
.qi-play { align-self: flex-start; text-decoration: none; }
.qi-standings { display: flex; flex-direction: column; gap: 3px; }

/* friends tab: gamer tag + connection rows */
.friend-tag { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--gold); margin-bottom: 8px; }
.tag-at { align-self: center; color: var(--dim); font-size: 18px; padding: 0 2px; }
.friend-invite-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
#tab-friends .crew-card { margin-bottom: 14px; }

.quest-meta { font-size: 15px; color: var(--dim); line-height: 1.65; }
.quest-meta b { color: var(--ink); font-weight: normal; }
.quest-results { font-size: 15px; color: var(--ink); background: rgba(8, 8, 40, 0.6); border-left: 3px solid var(--gold); padding: 9px 11px; border-radius: 0 6px 6px 0; line-height: 1.65; }

.qvote-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qvote {
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--win-line);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    padding: 12px 13px;
    min-height: 44px;
    justify-content: center;
    cursor: pointer;
}
.qvote:hover, .qvote:focus-visible { color: var(--glint); border-color: var(--glint); outline: none; }
.qvote.mine { color: var(--gold); border-color: var(--gold); }
.qreport { width: 100%; }
.qreport textarea { width: 100%; min-height: 52px; }
.role-chip {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    letter-spacing: 1px;
    padding: 3px 5px;
    border-radius: 3px;
    border: 2px solid var(--danger);
    color: var(--danger);
    margin-left: 6px;
    vertical-align: middle;
}
.role-chip.alt { border-color: var(--glint); color: var(--glint); }
a.crew-btn { text-decoration: none; display: inline-block; }
.newquest-toggle { margin-top: 8px; }
.newquest-form { display: none; flex-direction: column; gap: 8px; margin-top: 10px; }
.newquest-form.show { display: flex; }

/* ================= player class ================= */
#class-area { margin-top: 12px; }
.class-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
@media (min-width: 520px) { .class-grid { grid-template-columns: repeat(3, 1fr); } }
.class-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    background: rgba(4, 4, 28, 0.6);
    border: 2px solid var(--win-line);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-family: 'DotGothic16', monospace;
}
.class-card:hover, .class-card:focus-visible { border-color: currentColor; outline: none; transform: translateY(-2px); transition: transform .12s ease; }
.class-name { font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; }
.class-world { font-size: 13px; color: var(--dim); }
.class-flavor { font-size: 14px; color: var(--ink); line-height: 1.45; }
.class-titles { font-size: 12px; color: var(--dim); }
.cls-knight { color: #8ff0a4; }
.cls-demolitionist { color: var(--rose, #ff70b8); }
.cls-commander { color: var(--glint); }
.class-current { font-size: 15px; color: var(--ink); }
.class-chip {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 2px solid currentColor;
}
.class-swap {
    background: none;
    border: none;
    color: var(--dim);
    font-family: 'DotGothic16', monospace;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.class-swap:hover, .class-swap:focus-visible { color: var(--gold); outline: none; }
.qvote.gold { color: var(--gold); border-color: var(--gold); }
/* spacing inside the quest card's foot is owned by the flex-gap zone */

/* let people copy emails from rosters/requests */
.crews-body, .crews-body * { -webkit-user-select: text; user-select: text; }

/* ================= display names + copy polish ================= */
.who-email { font-size: 12px; color: var(--dim); opacity: 0.75; word-break: break-all; }
.crew-line .who .who-email { display: inline-block; }
.name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--dim); }
.name-input { flex: 1 1 140px; min-width: 0; background: rgba(4,4,28,0.85); border: 2px solid var(--win-line); border-radius: 6px; color: var(--ink); font-family: 'DotGothic16', monospace; font-size: 16px; padding: 7px 9px; }
.name-input:focus-visible { outline: none; border-color: var(--glint); }
.name-row .crew-btn { font-size: 8px; padding: 8px 10px; }
.nowwhat { color: #8ff0a4; }
.qvote { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.qvote-hint { font-family: 'DotGothic16', monospace; font-size: 11px; letter-spacing: 0; color: var(--dim); text-transform: none; }
.qvote.mine .qvote-hint { color: var(--gold); opacity: 0.8; }

/* ================= muster / RSVP ================= */
.muster-locked { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); margin-top: 8px; }
.muster-count .in { color: #8ff0a4; }
.muster-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.date-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: rgba(8,8,40,0.7); border: 2px solid var(--win-line); border-radius: 6px;
    color: var(--ink); font-family: 'DotGothic16', monospace; font-size: 14px; padding: 6px 9px; cursor: pointer;
}
.date-chip small { color: var(--dim); font-size: 11px; }
.date-chip.picked { border-color: #8ff0a4; color: #8ff0a4; }
.date-chip.picked small { color: #8ff0a4; }
.date-chip[disabled] { cursor: default; opacity: 0.8; }
/* RSVP is the key social ask, not a footnote — a bold, centered, three-segment
   control with golden accents and an unmistakable "this is my answer" state. */
.rsvp-prompt { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px; line-height: 1.6; color: var(--gold); text-shadow: 0 0 8px rgba(248, 204, 80, 0.4); }
.rsvp-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.rsvp-btn {
    flex: 1 1 72px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--win-line);
    border-radius: 8px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 1.5;
    padding: 15px 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}
/* all three read equal + unselected by default (bright, bordered) so nothing
   looks pre-chosen; colour only appears on hover and on your actual pick */
/* hover only recolours the unselected buttons; a chosen one keeps its fill */
.rsvp-btn:not(.mine):hover, .rsvp-btn:not(.mine):focus-visible { border-color: var(--gold); color: var(--gold); background: rgba(248, 204, 80, 0.08); outline: none; transform: translateY(-2px); }
.rsvp-btn.mine:hover, .rsvp-btn.mine:focus-visible { transform: translateY(-2px); outline: none; }
/* selected: filled + glowing in the answer's colour (green go / gold maybe / red no) */
.rsvp-in.mine { background: linear-gradient(180deg, #56f0a0, #1f9f62); border-color: #7dffc0; color: #04170c; box-shadow: 0 0 16px rgba(77, 255, 158, 0.5); }
.rsvp-maybe.mine { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color: #ffe08a; color: #201004; box-shadow: 0 0 16px rgba(248, 204, 80, 0.5); }
.rsvp-out.mine { background: linear-gradient(180deg, #ff7a7a, #c23b3b); border-color: #ff9a9a; color: #200800; box-shadow: 0 0 14px rgba(255, 106, 106, 0.45); }
@media (prefers-reduced-motion: reduce) { .rsvp-btn { transition: none; } .rsvp-btn:hover { transform: none; } }
.muster-manage { margin-top: 10px; }
.muster-manage summary { font-size: 13px; color: var(--glint); cursor: pointer; }

/* date builder: native calendar/clock pickers + a chip shortlist */
.date-builder { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.date-build-list { display: flex; flex-wrap: wrap; gap: 7px; }
.date-build-list:empty { display: none; }
.build-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(8, 8, 40, 0.7); border: 2px solid var(--glint); border-radius: 7px;
    color: var(--ink); font-family: 'DotGothic16', monospace; font-size: 14px; padding: 6px 9px;
    letter-spacing: 0.02em; -webkit-font-smoothing: antialiased;
}
.build-chip-x {
    background: none; border: none; color: var(--dim);
    font-family: 'DotGothic16', monospace; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 1px;
}
.build-chip-x:hover, .build-chip-x:focus-visible { color: var(--danger); outline: none; }
.date-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.date-pick, .time-pick {
    flex: 1 1 130px; min-width: 0;
    color-scheme: dark; /* dark native calendar/time popups */
    font-family: 'DotGothic16', monospace; font-size: 16px; /* >=16px avoids iOS zoom */
}
.date-add-row .crew-btn { flex: 0 0 auto; }

/* ================= XP meters + leaderboard ================= */
.me-progress { margin-top: 12px; }
.meter-wrap { margin: 12px 0 4px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.meter-label { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; color: var(--glint); }
.meter-xp { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--gold); }
.meter-track { height: 12px; border: 2px solid var(--frame); border-radius: 4px; background: rgba(4,4,28,0.8); overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--glint) 0 8px, #4890c8 8px 12px); transition: width 0.6s ease; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 2px solid var(--win-line); border-radius: 6px; margin-bottom: 5px; background: rgba(4,4,28,0.5); font-size: 15px; }
.lb-row.me { border-color: var(--gold); }
.lb-rank { flex: 0 0 auto; width: 20px; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--dim); }
.lb-name { flex: 1 1 auto; color: var(--ink); word-break: break-all; }
.lb-title { font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 3px 5px; border-radius: 3px; border: 2px solid currentColor; margin-left: 4px; }
.lb-xp { flex: 0 0 auto; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--gold); }

/* ================= season story ================= */
.season-panel .crew-panel-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.season-prog { font-family: 'DotGothic16', monospace; font-size: 12px; color: var(--dim); letter-spacing: 0; }
.beat { border-left: 3px solid var(--win-line); padding: 6px 10px; margin-bottom: 8px; }
.beat.unlocked { border-left-color: var(--gold); background: rgba(8,8,40,0.5); }
.beat.locked { opacity: 0.7; }
.beat-title { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); margin-bottom: 4px; }
.beat.locked .beat-title { color: var(--dim); }
.beat-line { font-size: 15px; color: var(--ink); line-height: 1.5; margin-bottom: 3px; }
.beat-need { font-size: 13px; color: var(--dim); }
.prize-won b { color: var(--gold); }
.prize-all b { color: var(--glint); }

/* use normal document scroll so the scrollbar is visible (override the
   cinematic's fixed-viewport lock inherited from quest.css) */
html { height: auto; overflow-y: scroll; }
.crews-body { overflow: visible; height: auto; min-height: 100vh; }

/* ================= typography pass ================= */
/* Under body's -webkit-font-smoothing:none, DotGothic16 renders thin and its
   characters sit tight — antialias the reading + heading copy (including the
   quest titles) and open up letter/line spacing so nothing feels squeezed. */
.crew-p, .crew-desc, .crew-hint, .crew-label, .crew-msg, .crew-empty,
.crew-whoami, .who-email, .crew-line .who, .crew-line .note, .quest-meta,
.quest-results, .beat-line, .beat-need, .lb-name, .class-flavor, .class-world,
.class-titles, .class-current, .qvote-hint, .date-chip, .crews-foot,
.crew-input, .name-input, .season-prog, .class-swap, .muster-manage summary,
.crew-name {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.045em;
}
.crew-p, .crew-desc, .quest-meta, .quest-results, .beat-line { line-height: 1.72; }
.crew-line .who, .crew-line .note { line-height: 1.6; }
.crew-name { line-height: 1.45; }

/* Press Start 2P pixel headings: their glyphs butt together and the line box
   is cramped, so wrapped titles (e.g. "The First Spark") get vertically
   crushed. Add tracking + leading. Keep them crisp (no antialiasing). */
.crews-h2, .crew-panel-h, .beat-title {
    letter-spacing: 1.5px;
    line-height: 1.6;
}
.beat-title { margin-bottom: 8px; }
.beat { padding: 11px 13px; }
.beat-line { margin-bottom: 4px; }

/* section headers glow like lit signage, matching the quest page
   (.crews-title carries its neon via the .neon-gold class in the markup) */
.crews-h2, .crew-panel-h { text-shadow: 0 0 9px rgba(128, 232, 255, 0.4); }

/* live quest status chips pulse like small neon signs */
.qstatus { animation: cc-neon-pulse 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .qstatus { animation: none; } }

/* ================= top-level tabs + crew switcher ================= */
.crews-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.crews-tabs[hidden] { display: none; }
.crews-tab {
    flex: 1 1 120px;
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--win-line);
    border-radius: 8px;
    color: var(--dim);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.4;
    padding: 13px 12px;
    cursor: pointer;
}
.crews-tab:hover, .crews-tab:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.crews-tab.active { color: var(--gold); border-color: var(--gold); background: rgba(248, 204, 80, 0.08); box-shadow: 0 0 12px rgba(248, 204, 80, 0.25); }
#tab-mine[hidden], #tab-directory[hidden] { display: none; }

.crew-switch { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.crew-switch-pill {
    background: rgba(8, 8, 40, 0.85);
    border: 2px solid var(--win-line);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 1.5;
    padding: 13px 12px;
    min-height: 44px; /* touch-target floor */
    cursor: pointer;
}
.crew-switch-pill:hover, .crew-switch-pill:focus-visible { color: var(--glint); border-color: var(--glint); outline: none; }
.crew-switch-pill.active { color: var(--gold); border-color: var(--gold); background: rgba(248, 204, 80, 0.08); }

/* ================= pending actions (notification center) ================= */
#pending-area {
    margin-top: 14px;
    border: 2px solid var(--gold);
    border-radius: 8px;
    background: rgba(248, 204, 80, 0.07);
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
#pending-area[hidden] { display: none; }
.pending-head {
    font-size: 9px;
    letter-spacing: 1.5px;
    line-height: 1.6;
    color: var(--gold);
    text-shadow: 0 0 9px rgba(248, 204, 80, 0.5);
    animation: cc-neon-pulse 2.8s ease-in-out infinite;
    align-self: flex-start;
    padding: 3px 6px;
    border-radius: 4px;
}
/* which crew's banner each group of actions flies under */
.pending-crew {
    font-size: 8px;
    letter-spacing: 1.5px;
    line-height: 1.6;
    color: var(--glint);
    text-shadow: 0 0 8px rgba(128, 232, 255, 0.4);
    margin-top: 4px;
}
.pending-item {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(4, 4, 28, 0.55);
    border: 2px solid var(--win-line);
    border-radius: 6px;
    color: var(--ink);
    font-family: 'DotGothic16', monospace;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    padding: 9px 11px;
    cursor: pointer;
}
.pending-item:hover, .pending-item:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
/* whatever a pending item scrolls you to (a card, a vote row, the RSVP row)
   flashes gold so the eye lands exactly on the thing to do */
.pinged { animation: card-ping 1.8s ease; border-radius: 6px; }
/* pending-action jumps anchor the section to the top of the viewport —
   leave a little headroom so it doesn't kiss the screen edge */
.rsvp-prompt, .qvote-row, .rsvp-row, .quest-results, .lock-label, .quest-item, .crew-item {
    scroll-margin-top: 18px;
}
@keyframes card-ping {
    0%, 60% { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(248, 204, 80, 0.55); }
    100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pending-head { animation: none; }
    .pinged { animation: none; box-shadow: 0 0 0 3px var(--gold); }
}

/* explicit vote-state feedback on quest cards */
.vote-confirm { color: #8ff0a4; }
.vote-confirm b { color: #8ff0a4; }
.rsvp-prompt.vote-needed { animation: cc-neon-pulse 2.8s ease-in-out infinite; align-self: flex-start; padding: 3px 6px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .rsvp-prompt.vote-needed { animation: none; } }

/* onward routes on the quest card */
.qi-links { display: flex; flex-wrap: wrap; gap: 8px; }
.qi-links .crew-btn { text-decoration: none; }

/* ---- crew invitations (2026-07-13) ---- */
.crew-invite-row { display: flex; gap: 8px; margin-top: 6px; }
.crew-invite-row .crew-input { flex: 1; min-width: 0; }
.crew-invited { border-color: rgba(248, 204, 80, 0.65); }
.crew-invited .crew-item-head .crew-name { color: var(--gold, #f8cc50); }

/* shared-link landing card — a cyan-edged "you followed a link" panel */
.join-card { border-color: rgba(128, 232, 255, 0.6); box-shadow: 0 0 18px rgba(128, 232, 255, 0.18); }
.join-card .crew-panel-h { color: var(--cyan, #80e8ff); }