/* ==========================================================================
   Staff / Player "cards" — flame + gold T7 theme.
   Consumed by:
     - Meet The Team page   (.team-grid > .dream-card.is-staff)
     - Player Lookup page    (.dream-card.is-player, top of page)
     - MORE drawer top card  (.more-player-card, compact for the drawer)
   Tokens (--fire-*, --gold-*) come from t7-theme.css :root; fallbacks are
   supplied inline so the drawer card still renders on any base.html page.
   ========================================================================== */

:root {
    --card-fire-red: var(--fire-red, #ff0000);
    --card-fire-orange: var(--fire-orange, #ff4500);
    --card-fire-yellow: var(--fire-yellow, #ffd700);
    --card-gold-light: var(--gold-light, #ffdf00);
    --card-gold-dark: var(--gold-dark, #b8860b);
    --card-ink: #ffe9c2;
    --card-muted: #cbb488;
}

/* ---- Meet The Team page -------------------------------------------------- */

.meet-team-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    min-width: 0;
}

.meet-team-header {
    text-align: center;
    margin-bottom: 1.75rem;
    min-width: 0;
}

.meet-team-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    margin: 0 0 0.35rem;
    background: linear-gradient(45deg, var(--card-gold-light), var(--card-fire-yellow) 55%, var(--card-fire-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 22px rgba(255, 69, 0, 0.25);
}

.meet-team-header p {
    color: var(--card-muted);
    margin: 0;
    font-size: 0.98rem;
}

.team-grid {
    display: grid;
    /* min(100%, 300px) keeps the 300px track on normal viewports but collapses
       to the available width below ~331px (iPhone SE 1st-gen / small Androids)
       so a single card never forces horizontal page overflow. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.15rem;
    min-width: 0;
}

.team-empty {
    text-align: center;
    color: var(--card-muted);
    padding: 2.5rem 1rem;
    border: 1px dashed rgba(255, 69, 0, 0.35);
    border-radius: 4px;
    background: rgba(10, 0, 0, 0.4);
}

/* ---- Shared card shell --------------------------------------------------- */

.dream-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 1.1rem 1.15rem 1.2rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 69, 0, 0.4);
    background:
        linear-gradient(180deg, rgba(30, 8, 0, 0.92), rgba(12, 2, 0, 0.96));
    box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.18), 0 12px 32px rgba(0, 0, 0, 0.55);
}

.dream-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-fire-red), var(--card-fire-orange), var(--card-fire-yellow));
    opacity: 0.9;
}

.dream-card.is-staff::after {
    content: "\f06d"; /* fire */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-size: 1.1rem;
    color: var(--card-fire-orange);
    opacity: 0.35;
    filter: drop-shadow(0 0 8px var(--card-fire-red));
    pointer-events: none;
}

.dream-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.dream-card__avatar {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-fire-orange);
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.5);
    background: #0a0000;
}

.dream-card__id {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.dream-card__name {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--card-fire-yellow);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.35);
    margin: 0 0 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dream-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.dream-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 0.16rem 0.5rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--card-gold-light);
    background: rgba(184, 134, 11, 0.14);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dream-card__badge.is-owner {
    color: #0a0000;
    background: linear-gradient(90deg, var(--card-gold-light), var(--card-fire-yellow));
    border-color: var(--card-fire-yellow);
}

.dream-card__badge.is-admin {
    color: #ffdca6;
    border-color: var(--card-fire-orange);
    background: rgba(255, 69, 0, 0.18);
}

.dream-card__badge.is-linked {
    color: #9ff5b0;
    border-color: rgba(80, 220, 120, 0.4);
    background: rgba(40, 120, 60, 0.18);
}

/* Milestone badges (utils/milestone_roles.py registry). The per-badge accent is
   injected inline as --milestone-color; the fallback keeps the chip readable if
   a registry entry ever ships without one. Inherits the base chip's
   max-width/overflow/ellipsis clamping so a long tier title can never widen the
   card grid. */
.dream-card__badge.is-milestone {
    color: var(--milestone-color, var(--card-gold-light));
    border-color: var(--milestone-color, rgba(255, 215, 0, 0.4));
    background: rgba(255, 255, 255, 0.06);
    min-width: 0;
}

/* ---- Stat chips ---------------------------------------------------------- */

.dream-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 0.5rem;
    margin-top: 0.95rem;
    min-width: 0;
}

.dream-stat {
    min-width: 0;
    padding: 0.5rem 0.4rem;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgba(184, 134, 11, 0.28);
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.dream-stat__value {
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--card-fire-yellow);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dream-stat__label {
    display: -webkit-box;
    font-size: 0.6rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--card-muted);
    margin-top: 0.2rem;
    min-height: calc(1.2em * 2);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Servers / leaderboards list ---------------------------------------- */

.dream-card__section-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--card-gold-light);
    margin: 1rem 0 0.4rem;
    font-weight: 800;
}

.dream-card__rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.dream-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.32rem 0.5rem;
    border-radius: 3px;
    background: rgba(255, 69, 0, 0.06);
    border: 1px solid rgba(255, 69, 0, 0.12);
    font-size: 0.82rem;
}

.dream-row__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--card-ink);
}

.dream-row__value {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--card-fire-yellow);
    white-space: nowrap;
}

.dream-row__rank {
    flex: 0 0 auto;
    font-weight: 900;
    color: var(--card-gold-light);
}

.dream-card__note {
    margin-top: 0.8rem;
    font-size: 0.68rem;
    color: var(--card-muted);
    opacity: 0.85;
}

/* ---- Player Lookup top card (self) -------------------------------------- */

.player-lookup-selfcard {
    max-width: 1200px;
    margin: 0 auto 1.25rem;
    min-width: 0;
}

.dream-card.is-player .dream-card__stats {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

/* ==========================================================================
   MORE drawer — compact player card (replaces the old profile hero block)
   ========================================================================== */

.more-player-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    margin: 0.5rem 1.1rem 0.85rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 69, 0, 0.4);
    background: linear-gradient(180deg, rgba(30, 8, 0, 0.9), rgba(10, 2, 0, 0.94));
    box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.18), 0 10px 26px rgba(0, 0, 0, 0.5);
    padding: 0.95rem 1rem 1.05rem;
}

@media (max-width: 640px) {
    .more-player-card { margin-inline: 0.9rem; }
}

.more-player-card .site-drawer-stat {
    flex: 0 0 auto;
    text-align: right;
}

.more-player-card .site-more-progress-shell {
    margin-top: 0.85rem;
}

.more-player-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-fire-red), var(--card-fire-orange), var(--card-fire-yellow));
}

.more-player-card__top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.more-player-card__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-fire-orange);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

.more-player-card__idcol {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.more-player-card__kicker {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--card-gold-light);
    font-weight: 800;
}

.more-player-card__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.more-player-card__name h2 {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0;
    color: var(--card-fire-yellow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-player-card__sub {
    font-size: 0.82rem;
    color: var(--card-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.more-player-card__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
    min-width: 0;
}

.more-player-card__chip {
    min-width: 0;
    text-align: center;
    padding: 0.4rem 0.3rem;
    border-radius: 3px;
    border: 1px solid rgba(184, 134, 11, 0.28);
    background: rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.more-player-card__chip b {
    display: block;
    font-size: 0.95rem;
    color: var(--card-fire-yellow);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-player-card__chip span {
    display: -webkit-box;
    font-size: 0.56rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--card-muted);
    margin-top: 0.15rem;
    min-height: calc(1.2em * 2);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {
    .team-grid { grid-template-columns: 1fr; }
    .dream-card__avatar { width: 50px; height: 50px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   THE SAME COMPACT CARD, INSIDE THE HUB'S AVATAR DROPDOWN
   (templates/hub/_hub_user_card.html, 2026-07-31)

   The hub's account menu shows the viewer's card at the head of the dropdown
   that already hangs off the top-right avatar. It reuses EVERY
   `.more-player-card*` rule above rather than authoring a second card — see the
   partial's header for why that is the whole point of the design.

   This block is the short list of things that are true in a 340px popover and
   were not true in a full-width drawer. It is scoped to `.hub-user-card` so the
   live MORE drawer is untouched.

   1. THE 13px TYPE FLOOR. `tests/test_hub_column_contract.py` holds hub CHROME
      to a 13.0px floor with a `CHROME_EXCEPTIONS` list that is EMPTY and a test
      that fails if it grows past four entries. Two rules above are below it —
      `.more-player-card__kicker` at 0.62rem (9.92px) and
      `.more-player-card__chip span` at 0.56rem (8.96px) — because the drawer
      predates that floor. They are raised here rather than excepted: an
      exception list is where a floor goes to die.

      MEASURED after the raise, in Chromium, with a hostile 58-character
      character name and all four chips rendered — smallest text on the card at
      every width is 13.00px (`.more-player-card__kicker`, "Your Card"), and the
      card's internal horizontal overflow and its worst descendant escape are
      both 0px at 360 / 390 / 414 / 1440.
   2. NO OUTER MARGIN. `.more-player-card` sets `margin: .5rem 1.1rem .85rem`
      for the drawer's gutters. Inside `.hub-dropdown` (padding: 0.5rem) that
      would inset the card 17.6px on each side of an already narrow popover.
   3. THE NAME CLAMPS WITHOUT AN <h2>. `.more-player-card__name h2` carries the
      size and the ellipsis in the drawer; the partial uses a <span> because the
      card sits inside `role="menu"`, so the clamp is re-declared for it. 40
      characters is the shell's roster contract for a game-supplied name and
      `max-width` plus `text-overflow` is what enforces it visually — the string
      is never trusted, only ever rendered as text.
   ───────────────────────────────────────────────────────────────────────── */
.hub-user-card {
    margin: 0 0 0.4rem;
    padding: 0.7rem 0.75rem 0.8rem;
    min-width: 0;
    overflow: hidden;
}

/* The popover is `min-width: 260px` and clamped to the viewport, so the card
   must never be the thing that widens it. */
.hub-user-card .more-player-card__top { gap: 0.6rem; }

.hub-user-card .more-player-card__avatar {
    width: 44px;
    height: 44px;
}

/* The no-avatar fallback is a glyph box, not an <img>. Sized and centred to
   match the image it replaces so the row does not reflow between the two. */
.hub-user-card-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: var(--card-fire-orange);
    font-size: 1.05rem;
}

/* (1) — the floor. */
.hub-user-card .more-player-card__kicker { font-size: 13px; }
.hub-user-card .more-player-card__chip span {
    font-size: 13px;
    /* The drawer reserves two lines for a wrapped chip label. At 13px in a
       70px track the four labels this card can render all fit on one, and a
       reserved second line would be 15.6px of empty box per chip. */
    min-height: 0;
}
.hub-user-card .more-player-card__chip b { font-size: 15px; }

/* (3) — the name, clamped. */
.hub-user-card-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    font-size: 15px;
    font-weight: 900;
    color: var(--card-fire-yellow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-user-card .more-player-card__sub { font-size: 13px; }

/* The two degraded states and the footer link. All three are full-width rows
   under the identity block, so they wrap rather than push the popover wider. */
.hub-user-card-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--card-muted);
    overflow-wrap: break-word;
    word-break: break-word;
}
.hub-user-card-note i { flex: 0 0 auto; margin-top: 0.15rem; color: var(--card-fire-orange); }

.hub-user-card-action,
.hub-user-card-full {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 44px so it is a real target on a phone, where this menu is the only
       route to the profile and to the linking page. */
    min-height: 44px;
    margin-top: 0.55rem;
    padding: 0.4rem 0.5rem;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--card-fire-yellow);
    border: 1px solid rgba(184, 134, 11, 0.32);
    background: rgba(0, 0, 0, 0.32);
}
.hub-user-card-action:hover,
.hub-user-card-full:hover {
    background: rgba(255, 69, 0, 0.16);
    color: #fff;
    text-decoration: none;
}
.hub-user-card-action i,
.hub-user-card-full i { flex: 0 0 auto; color: var(--card-fire-orange); }
.hub-user-card-action span,
.hub-user-card-full span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Pre-purchase redemption notice (templates/_redemption_notice.html)

   Styled as INFORMATION, not an error: a player scanning a subscription tier
   must register it without feeling blocked. The `--viewer` modifier escalates
   to a warning tone and is used only when the viewer's own resolved server is
   one of the restricted ones.

   Layout rules this must never break (public pages are verified at
   360/390/414/768/1280): the row is a flex with `min-width: 0` on the text
   column and wrapping text, so a long "A, B, C and D" server list wraps
   instead of forcing horizontal page scroll.
   ───────────────────────────────────────────────────────────────────────── */
.redemption-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-left: 3px solid rgba(96, 165, 250, 0.75);
    border-radius: 10px;
    background: rgba(30, 58, 95, 0.28);
    color: #dbeafe;
    font-size: 0.86rem;
    line-height: 1.45;
    overflow: hidden;
}

.redemption-notice__icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: #93c5fd;
}

.redemption-notice__body {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.redemption-notice__headline {
    display: block;
    font-weight: 700;
    color: #eff6ff;
}

.redemption-notice__detail {
    display: block;
    margin-top: 0.15rem;
    color: rgba(219, 234, 254, 0.82);
    font-size: 0.82rem;
}

/* Viewer is standing on a restricted server right now. */
.redemption-notice--viewer {
    border-color: rgba(251, 191, 36, 0.42);
    border-left-color: rgba(251, 191, 36, 0.9);
    background: rgba(120, 53, 15, 0.34);
    color: #fef3c7;
}

.redemption-notice--viewer .redemption-notice__icon { color: #fbbf24; }
.redemption-notice--viewer .redemption-notice__headline { color: #fffbeb; }
.redemption-notice--viewer .redemption-notice__detail { color: rgba(254, 243, 199, 0.85); }

/* Compact variant for inside a product/tier card. */
.redemption-notice--card {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.74rem;
    gap: 0.4rem;
}

.redemption-notice--card .redemption-notice__detail {
    font-size: 0.7rem;
}

@media (max-width: 480px) {
    .redemption-notice { font-size: 0.8rem; padding: 0.6rem 0.7rem; }
    .redemption-notice__detail { font-size: 0.76rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MORE-menu subscriber badge, loud variant.

   Lives here rather than in mobile-bottom-nav.css so the accompanying
   base.html change is pure markup (one class name) and can be applied
   independently. The plain red count badge was not enough: a subscriber with
   6 pending perks did not notice it and could not find the dashboard at all
   (owner report 2026-07-29). Adds a slow halo pulse, disabled under
   prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */
.site-more-action-badge--loud {
    background: #f59e0b;
    color: #1c1207;
    box-shadow: 0 0 0 2px rgba(8, 15, 32, 0.96), 0 0 0 4px rgba(245, 158, 11, 0.45);
    animation: palbot-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes palbot-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(8, 15, 32, 0.96), 0 0 0 4px rgba(245, 158, 11, 0.45); }
    50%      { box-shadow: 0 0 0 2px rgba(8, 15, 32, 0.96), 0 0 0 8px rgba(245, 158, 11, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .site-more-action-badge--loud { animation: none; }
}