/* ═══════════════════════════════════════════════════════
   Direction A — "The Deck" landing hero.
   Dark oklch theme (blue/green/earth); amber is reserved for the press.
   Loaded on every page that shows a deck (homepage + city pages).
   ═══════════════════════════════════════════════════════ */

/* ── World-map hero (homepage): night-themed equirect SVG + city markers ── */
/* Fluid width (--col-wide, up to 1200px): the map has no text-readability ceiling like
   the card below it, so it's free to use the full doubled column on large screens. */
.wmap { width: 100%; max-width: var(--col-wide); margin: 18px auto 0; padding: 0; }
.wmap-frame {
    position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden;
    background: #0C1512;                       /* matches the felt map's sea fill */
    border: 1px solid rgba(217,180,74,0.14); border-radius: 16px;
    box-shadow: 0 28px 70px -34px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.35);
    cursor: grab; touch-action: pan-y;
}
.wmap-frame:active { cursor: grabbing; }
.wmap-pan { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.wmap-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.wmap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wmap-marker { cursor: pointer; outline: none; }
.wmap-dot {
    fill: #D9B44A;                             /* gold — the "draw me" color */
    stroke: rgba(0,0,0,0.55);
    transition: fill .15s;
}
.wmap-halo { fill: rgba(217,180,74,0.16); pointer-events: none; }
.wmap-marker:hover .wmap-dot,
.wmap-marker:focus-visible .wmap-dot { fill: #F0CC6B; }
.wmap-marker:focus-visible .wmap-halo { fill: rgba(217,180,74,0.35); }
.wmap-marker.is-current .wmap-dot { fill: #F5EFDD; }   /* cream = the current city (stands clear of the gold field) */
.wmap-marker.is-current .wmap-halo { fill: rgba(245,239,221,0.28); }
.wmap-controls {
    position: absolute; right: 10px; bottom: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px;
}
.wmap-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(217,180,74,0.20);
    background: rgba(15,44,34,0.85); color: #F5EFDD;
    font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
    transition: background .15s, border-color .15s;
}
.wmap-btn:hover { background: rgba(30,94,69,0.95); border-color: rgba(217,180,74,0.45); }
.wmap-btn:focus-visible { outline: 2px solid #D9B44A; outline-offset: 2px; }
.wmap-btn-reset { font-size: 14px; }
.wmap-tip {
    position: absolute; z-index: 4; transform: translate(-50%, -160%);
    background: rgba(9,14,11,0.94); color: #F5EFDD;
    border: 1px solid rgba(217,180,74,0.22); border-radius: 8px;
    padding: 4px 10px; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px; white-space: nowrap; pointer-events: none;
}
.wmap-caption {
    text-align: center; margin: 9px 0 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: .06em; color: #6E7A72;
}
@media (max-width: 600px) {
    .wmap-frame { border-radius: 12px; }
    .wmap-caption { font-size: 9.5px; }
}
/* key the 44px tap-target on the POINTER, not viewport width — a landscape phone
   is wider than 600px but still needs finger-sized zoom/escape buttons */
@media (pointer: coarse) {
    .wmap-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .wmap-dot { transition: none; }
}

.deck {
    /* "midnight felt" — the dark control panel; the dealt card face is cream (below) */
    --night:  #0E1112;                 /* ink — panel outer, text on gold */
    --panel:  #0F2C22;                 /* felt-900 — control backgrounds */
    --slate:  #14342A;                 /* felt-tinted lift — ghost fallbacks */
    --d-text: #F5EFDD;                 /* cream — panel text */
    --muted:  #9BA8A0;
    --faint:  #6E7A72;
    --ocean:  #6FA3B8;                 /* markets blue-green — info/links/party-selected */
    --jungle: #3E8A67;                 /* felt-300 — kicker, verified, current marker */
    --amber:  #D9B44A;                 /* gold — the press, glow, marks */
    --city:   #F0CC6B;                 /* gold-bright — emphasized city name in title */
    --felt:   #1E5E45;                 /* brand green — price pill, keyline, tags-on-cream */
    --cream:  #F5EFDD;                 /* dealt-card face */
    --hair:   rgba(255,255,255,0.10);
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --serif:'Newsreader', Georgia, serif;
    --sans: 'Schibsted Grotesk', system-ui, sans-serif;
    width: 100%;                 /* fill the column instead of shrink-wrapping (prevents mobile overflow) */
    display: flex;
    justify-content: center;
    padding: 28px 18px 8px;
}

/* Page background + retiring the aurora backdrop are handled globally by
   theme-deck.css (this file is now loaded on every page that shows a deck). */

/* Sizing lives on the shell (not .deck-card itself) so the @container query below
   can read the card's TRUE resolved width. .deck itself is a poor proxy — its own
   width is independently floored/capped by --col-chrome and doesn't track
   .deck-card's fluid --col-wide scaling, so querying it would fire the 2-column
   layout at the wrong moment (confirmed: gave a ~200px, half-broken result
   column at some viewport widths). The shell shares .deck-card's exact width
   formula, so a query against the shell always matches the card's real size. */
.deck-card-shell {
    width: 100%;
    max-width: var(--col-wide);   /* same shared width as the map + footer */
    margin: 0 auto;
    container-type: inline-size;
    container-name: deckcard;
}

.deck-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--night);
    border: 1px solid var(--hair);
    border-radius: 16px;
    box-shadow: 0 28px 70px -34px rgba(0,0,0,.7);
    color: var(--d-text);
    padding: 30px 30px 28px;
    font-family: var(--sans);
}

/* top bar */
.deck-top { display: flex; justify-content: space-between; align-items: center; }
.deck-brand { display: flex; align-items: center; gap: 9px; }
.deck-orb {
    width: 13px; height: 16px; border-radius: 3px;
    background: var(--panel); border: 1.4px solid var(--amber); transform: rotate(8deg);
    box-shadow: 0 0 12px rgba(217,180,74,.4), inset 0 0 0 1px rgba(217,180,74,.14);
}
.deck-wordmark { font-family: var(--serif); font-size: 16px; letter-spacing: .01em; }
.deck-pill {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint);
    border: 1px solid rgba(255,255,255,.14); padding: 5px 9px; border-radius: 20px;
}

/* headline */
.deck-head { margin-top: 30px; }
.deck-kicker {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    color: var(--jungle); text-transform: uppercase;
}
.deck-title {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(27px, 7vw, 33px); line-height: 1.12; margin: 8px 0 0;
}
.deck-title em { font-style: italic; color: var(--city); }

/* city selector (homepage: starts on New York City; switch city or pick Anywhere) */
.deck-cityrow { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.deck-cityselect {
    flex: 1; min-width: 0; cursor: pointer;
    font-family: var(--mono); font-size: 12px; color: var(--d-text);
    background: #0A0F0C;
    border: 1px solid rgba(217,180,74,.16); border-radius: 8px;
    padding: 9px 10px;
}
.deck-cityselect:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* the native dropdown list would otherwise inherit light UA colors in some browsers */
.deck-cityselect option, .deck-cityselect optgroup { background: #0F1712; color: #F5EFDD; }

/* control row */
.deck-control { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deck-toggle {
    display: inline-flex; background: #0A0F0C;
    border: 1px solid rgba(217,180,74,.16); border-radius: 11px; padding: 3px;
}
.deck-seg {
    border: none; cursor: pointer; font-family: var(--sans);
    font-size: 12.5px; font-weight: 600; padding: 9px 15px; border-radius: 8px;
    background: transparent; color: var(--muted); transition: background .15s, color .15s;
}
.deck-seg.is-active { background: var(--amber); color: var(--night); font-weight: 700; }
.deck-seg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.deck-slider-wrap { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 180px; }
.deck-slider-wrap.is-hidden { display: none; }
#deckBudget { flex: 1; accent-color: var(--amber); height: 3px; cursor: pointer; }
#deckBudget:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
.deck-budget-read { font-family: var(--mono); font-size: 15px; color: var(--amber); min-width: 54px; text-align: right; }
.deck-pp { font-size: 10px; color: var(--faint); }
.deck-caption { font-family: var(--mono); font-size: 9.5px; color: #63706A; margin-top: 7px; letter-spacing: .04em; }

/* party-size selector (secondary control; ocean = selected) */
.deck-party { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.deck-party-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.deck-pseg {
    border: 1px solid rgba(217,180,74,.16); cursor: pointer; font-family: var(--mono);
    font-size: 11px; padding: 6px 11px; border-radius: 8px;
    background: #0A0F0C; color: var(--muted);
    transition: background .15s, color .15s, border-color .15s;
}
.deck-pseg:hover { color: var(--d-text); }
.deck-pseg.is-active { background: var(--amber); color: var(--night); border-color: var(--amber); font-weight: 700; }
.deck-pseg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── the dealt card on a faux deck (two offset edges behind it) ── */
.deck-stage { position: relative; margin-top: 26px; }
/* ghost cards = the deck the dealt card sits on: felt-900 with a 45° gold hairline lattice (a real card-back). */
.deck-ghost { position: absolute; left: 0; right: 0; top: 0; height: 64%; border-radius: 16px;
    background:
        repeating-linear-gradient(45deg, rgba(217,180,74,.10) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(217,180,74,.10) 0 1px, transparent 1px 9px),
        #0F2C22;
}
.deck-ghost-2 { inset: 16px 16px auto; top: 16px; border: 1px solid rgba(217,180,74,.22); }
.deck-ghost-1 { inset: 8px 8px auto;   top: 8px;  border: 1px solid rgba(217,180,74,.28); }

/* THE SIGNATURE: the dealt card is a LIGHT cream face on the dark felt table —
   the only large light surface on the page. Felt keyline + gold aura frame it. */
.deck-deal {
    position: relative;
    overflow: hidden;                              /* clips the shine sweep + keyline corners */
    background: linear-gradient(168deg, #FBF7EC, #F1E9D4);
    color: #1A1D1A;
    border: 1px solid rgba(26,29,26,.18); border-radius: 16px;
    padding: 28px 28px 24px;                        /* supersized */
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(217,180,74,.35), 0 0 44px -8px rgba(217,180,74,.28);
    transition: transform .2s ease, opacity .18s ease;   /* exit only; reveal uses @keyframes */
    transform-origin: center 62%;
}
/* inner felt keyline — the printed border of a real card */
.deck-deal::after {
    content: ""; position: absolute; inset: 7px; z-index: 0; pointer-events: none;
    border: 1.5px solid rgba(30,94,69,.32); border-radius: 11px;
}
/* moving glare that sweeps across on reveal (bright so it reads on the light face) */
.deck-deal::before {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(105deg, transparent 33%, rgba(255,251,240,.72) 48%, transparent 63%);
    transform: translateX(-130%);
}
/* quick shrink-out before the next card is dealt */
.deck-deal.is-dealing { transform: scale(.92) translateY(8px); opacity: 0; }
/* the BIG reveal */
.deck-deal.is-revealing { animation: deckPop .62s cubic-bezier(.2,.8,.25,1) both, deckGlow .85s ease both; }
.deck-deal.is-revealing::before { animation: deckShine .7s ease .1s both; }
.deck-deal.is-revealing .deck-price { animation: pillPop .5s cubic-bezier(.2,1.5,.45,1) .16s both; }

@keyframes deckPop {
    0%   { opacity: 0; transform: scale(.84) translateY(16px); }
    55%  { opacity: 1; transform: scale(1.05)  translateY(0); }
    78%  { transform: scale(.99); }
    100% { transform: scale(1); }
}
@keyframes deckGlow {
    0%   { box-shadow: 0 0 0 1px rgba(217,180,74,.75), 0 0 66px 10px rgba(217,180,74,.6), 0 30px 70px -30px rgba(0,0,0,.85); }
    100% { box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(217,180,74,.35), 0 0 44px -8px rgba(217,180,74,.28); }
}
@keyframes deckShine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes pillPop  { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ── Deck shuffle "tell": the faux-deck ghost cards riffle while a card is dealt (the "show") ── */
.deck-stage.is-shuffling .deck-ghost-1 { animation: ghostRiffleA .5s ease both; }
.deck-stage.is-shuffling .deck-ghost-2 { animation: ghostRiffleB .5s ease both; }
@keyframes ghostRiffleA {
    0%,100% { transform: translateX(0) rotate(0); }
    28%     { transform: translateX(-14px) rotate(-2.4deg); }
    60%     { transform: translateX(7px)  rotate(1.5deg); }
}
@keyframes ghostRiffleB {
    0%,100% { transform: translateX(0) rotate(0); }
    28%     { transform: translateX(12px) rotate(2.2deg); }
    60%     { transform: translateX(-7px) rotate(-1.4deg); }
}

/* ── First-load arrival: the hero card is "dealt" onto the table with a flourish, so there's
   motion the moment the page opens (not only after the first press). ── */
.deck-deal.is-intro { animation: deckDealIn .95s cubic-bezier(.16,.84,.24,1) both, deckGlow 1.15s ease both; }
.deck-deal.is-intro::before { animation: deckShine .95s ease .2s both; }
.deck-deal.is-intro .deck-price { animation: pillPop .6s cubic-bezier(.2,1.5,.45,1) .35s both; }
@keyframes deckDealIn {
    0%   { opacity: 0; transform: translateY(46px) rotate(-7deg) scale(.84); }
    58%  { opacity: 1; transform: translateY(0)   rotate(1.8deg) scale(1.045); }
    80%  { transform: rotate(-0.6deg) scale(.99); }
    100% { transform: none; }
}

/* ── card-face content: dark ink on the cream face ── */
.deck-deal-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 2; }
.deck-code { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; color: #4E5B52; }   /* the date ledger: THU · JUL 17 · DALLAS */
.deck-price {
    font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--cream);
    background: var(--felt); padding: 5px 13px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 5px 14px -5px rgba(30,94,69,.65);
}
/* corner pips — like a real playing card ("DTD ♦" top-left, rotated bottom-right) */
.deck-pip {
    position: absolute; z-index: 3; font-family: var(--mono); font-size: 9px;
    letter-spacing: .1em; color: rgba(30,94,69,.6); pointer-events: none; user-select: none;
}
.deck-pip.tl { top: 12px; left: 15px; }
.deck-pip.br { bottom: 10px; right: 15px; transform: rotate(180deg); }
/* Honest "closest match" note: shown only when the deck relaxed the budget/city filters. */
.deck-relaxed {
    position: relative; z-index: 2;
    display: flex; align-items: flex-start; gap: 6px;
    margin: 14px 0 0; padding: 7px 11px;
    font-size: 12.5px; line-height: 1.4; font-weight: 600;
    color: #6B5410;
    background: rgba(217,180,74,.16);
    border: 1px solid rgba(217,180,74,.5);
    border-radius: 9px;
}
.deck-relaxed::before { content: "≈"; font-weight: 700; opacity: .85; }
.deck-relaxed[hidden] { display: none; }
.deck-deal-title { position: relative; z-index: 2; font-family: var(--serif); font-weight: 500; color: #1A1D1A; font-size: clamp(26px, 5.2vw, 31px); line-height: 1.16; margin: 16px 0 0; min-height: 64px; }
.deck-blurb { position: relative; z-index: 2; font-size: 15px; line-height: 1.55; color: #3A423C; margin: 11px 0 0; min-height: 46px; }
.deck-tags { position: relative; z-index: 2; display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.deck-tag {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--felt);
    background: rgba(30,94,69,.10); border: 1px solid rgba(30,94,69,.28);
    padding: 5px 10px; border-radius: 6px;
}
/* the activity's DB id styled as a collector number — quiet groundwork for future "collect the deck" accounts */
.deck-tag.deck-num { color: #8A6D1F; background: rgba(217,180,74,.14); border-color: rgba(217,180,74,.42); }
.deck-meta {
    position: relative; z-index: 2;
    display: flex; gap: 14px; margin-top: 18px; padding-top: 16px; flex-wrap: wrap;
    border-top: 1px solid rgba(26,29,26,.14);
    font-family: var(--mono); font-size: 11.5px; color: #5A665D;
}
.deck-meta a { color: var(--felt); text-decoration: none; font-weight: 600; }
.deck-meta a:hover { text-decoration: underline; }
.deck-verified { color: var(--felt); }

/* the press — deliberately tap-only, no mandatory swipe. Competitor research
   (WCAG 2.5.1 + Bumble's 2026 industry-wide swipe removal citing user
   "exhaustion") validates this as an accessibility requirement, not just a
   style choice: don't "improve" this into a swipe-to-deal gesture. */
.deck-cta {
    margin-top: 22px; border: none; cursor: pointer; width: 100%;
    font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .01em;
    color: var(--night); background: var(--amber);
    padding: 17px; border-radius: 13px;
    box-shadow: 0 12px 30px -10px var(--amber); transition: transform .12s, filter .15s;
}
.deck-cta:hover { filter: brightness(1.05); }
.deck-cta:active { transform: scale(.985); }
.deck-cta:focus-visible { outline: 2px solid var(--d-text); outline-offset: 3px; }
.deck-cta:disabled { opacity: .7; cursor: default; }
.deck-microcopy { text-align: center; font-size: 12px; color: var(--faint); margin-top: 11px; }

/* ── The Daily Draw: email capture block ── */
.deck-email { margin: 26px 0 0; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; }
.de-k { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--jungle); text-transform: uppercase; }
.de-row { display: flex; gap: 9px; margin-top: 10px; }
.deck-email input[type="email"] {
    flex: 1; min-width: 0; background: #0A0F0C; color: var(--cream);
    border: 1px solid rgba(217,180,74,.18); border-radius: 9px;
    font-family: var(--mono); font-size: 12.5px; padding: 11px 12px;
}
.deck-email input[type="email"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.de-btn {
    background: var(--amber); border: none; border-radius: 9px; color: var(--night);
    font-family: var(--sans); font-weight: 700; font-size: 13px; padding: 0 16px;
    cursor: pointer; white-space: nowrap; transition: filter .15s;
}
.de-btn:hover { filter: brightness(1.05); }
.de-btn:focus-visible { outline: 2px solid var(--d-text); outline-offset: 2px; }
.de-btn:disabled { opacity: .6; cursor: default; }
.de-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot — off-screen */
.de-fine { font-size: 11px; color: var(--faint); margin-top: 9px; line-height: 1.5; }
.de-fine.is-ok  { color: var(--jungle); }
.de-fine.is-err { color: #E0996B; }

@media (prefers-reduced-motion: reduce) {
    .deck-deal { transition: opacity .2s ease; }
    .deck-deal.is-dealing { transform: none; }
    .deck-deal.is-revealing,
    .deck-deal.is-revealing::before,
    .deck-deal.is-revealing .deck-price { animation: none !important; }
    .deck-deal.is-revealing { opacity: 1; }
    /* No shuffle riffle or deal-in flourish when reduced motion is requested. */
    .deck-stage.is-shuffling .deck-ghost-1,
    .deck-stage.is-shuffling .deck-ghost-2,
    .deck-deal.is-intro,
    .deck-deal.is-intro::before,
    .deck-deal.is-intro .deck-price { animation: none !important; }
    .deck-deal.is-intro { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .deck-card { padding: 24px 18px 22px; }
    .deck-head { margin-top: 24px; }
    .deck-deal { padding: 22px 20px 20px; }
    .deck-deal-title { min-height: 0; }
    /* the corner pips are a flourish for the larger card; on a tight phone card
       they crowd the date ledger, so retire them under 600px. */
    .deck-pip { display: none; }
    /* stack the email row so the input + button each get a full-width 44px target */
    .de-row { flex-direction: column; }
    .deck-email input[type="email"] { min-height: 44px; }
    .de-btn { min-height: 44px; padding: 0 16px; }
    /* 44px minimum touch target (thumb-zone research) for the filter rows + city menu. */
    .deck-seg { min-height: 44px; padding: 0 16px; }
    .deck-pseg { min-height: 44px; padding: 0 13px; }
    .deck-cityselect { min-height: 44px; }
}

/* ── Wide layout: once the card has genuinely grown (not just a slightly-wider
   single column), split it into a control panel (left) beside the dealt card
   (right) — like a console next to its display — instead of stretching one
   long vertical strip. Below the threshold this is a no-op; everything stays
   the same single stacked column it always was. Placed last in the file so it
   wins source-order ties against the base rules above at equal specificity. ── */
@container deckcard (min-width: 900px) {
    .deck-card {
        display: grid;
        grid-template-columns: minmax(300px, 380px) 1fr;
        column-gap: 44px;
        align-items: start;
        padding: 38px 40px 36px;
    }
    .deck-configurator { display: flex; flex-direction: column; min-width: 0; }
    .deck-result       { display: flex; flex-direction: column; min-width: 0; }
    .deck-stage        { margin-top: 0; }        /* was spaced below the party row; now top of its own column */

    /* The panel is now a self-contained "console," not a strip that continues into
       the stage below — give its groups real breathing room instead of mobile-tight
       spacing, and size the controls up a notch. Both close the height gap against
       the taller result column AND read as a deliberately wide design, not a stretch. */
    .deck-wordmark   { font-size: 17px; }
    .deck-head       { margin-top: 40px; }
    .deck-title      { font-size: 36px; }
    .deck-cityrow    { margin-top: 34px; }
    .deck-cityselect { padding: 12px 14px; font-size: 13px; }
    .deck-control    { margin-top: 38px; }
    .deck-seg        { padding: 11px 18px; font-size: 13px; }
    .deck-caption    { margin-top: 10px; }
    .deck-party      { margin-top: 30px; gap: 8px; }
    .deck-pseg       { padding: 9px 14px; font-size: 11.5px; }
}