/* Share card + Instagram Story image — shared stylesheet for pk-story.js.
   Currently used by pick.php only. predict.php and results.php still carry their own inline
   copies of these rules; if they're ever switched over, this file is the one to keep.

   Classes use a pk- prefix, NOT share- — ad-blocker social filter lists hide elements like
   .share-row (display:none), which once blanked the card + image.
   Colours are hardcoded hex (not CSS vars) so the html2canvas image matches exactly. */

.pk-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    color: #e8e8e8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pk-card-header {
    background: #111;
    border-bottom: 2px solid #c8102e;
    padding: .85rem 1rem;
}
.pk-brand {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e0213f;
    margin-bottom: .2rem;
}
.pk-event-name { font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: #f2f2f2; }
.pk-event-meta { font-size: .8rem; color: #a0a0a0; margin-top: .2rem; }
.pk-event-meta strong { color: #e8e8e8; }
.pk-row { padding: .55rem 1rem; border-bottom: 1px solid #262626; }
.pk-row:last-child { border-bottom: none; }
.pk-wc {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin-bottom: .12rem;
}
/* Name, then the method/round pill always on its own line beneath it */
.pk-line { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.pk-pick {
    min-width: 0;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.25;
    color: #86efac;
    overflow-wrap: anywhere;
}
.pk-arrow { font-size: .7rem; margin-right: .35rem; }
.pk-pill {
    margin-left: 1.05rem; /* lines up with the name (past the ▶) and the "vs" line */
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #86efac;
    background: #15281c;
    border: 1px solid #2f5f3f;
    border-radius: 4px;
    padding: .12rem .45rem;
    white-space: nowrap;
}
.pk-opp { font-size: .8rem; color: #9a9a9a; margin-top: .08rem; padding-left: 1.05rem; overflow-wrap: anywhere; }
.pk-no-pick { font-size: .85rem; color: #6a6a6a; overflow-wrap: anywhere; }
.pk-card-footer {
    background: #111;
    border-top: 1px solid #262626;
    padding: .5rem 1rem;
    font-size: .7rem;
    color: #707070;
    text-align: center;
    letter-spacing: .04em;
}

/* Picked fighter's flag behind the right side of the row, faded into the card colour towards
   the left. On screen this is CSS only (fade layer over var(--flag), set inline); for the PNG,
   PkStory.composeFlags() pre-draws the same look on a canvas, because html2canvas draws
   gradient-over-image backgrounds with seams/banding.
   ESPN flags are 500×500 squares: a 3:2 (or 2:1) flag inside transparent padding + a dark frame.
   Sizing the flag to 135% of the box width (not `cover`) crops the padding/frame away. */
.pk-row { position: relative; overflow: hidden; }
.pk-row > :not(.pk-flag) { position: relative; z-index: 1; }
.pk-flag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 65%;
    background-image: linear-gradient(to right, #1a1a1a 0%, rgba(26,26,26,.9) 50%, rgba(26,26,26,.62) 100%), var(--flag);
    background-size: 100% 100%, 135% auto;
    background-position: 0 0, center;
    background-repeat: no-repeat;
    z-index: 0;
}
/* Results-style red-tinted row (results.php's .pk-wrong) — composeFlags() matches this fade */
.pk-wrong { background: #2a1619; }
.pk-wrong .pk-flag {
    background-image: linear-gradient(to right, #2a1619 0%, rgba(42,22,25,.9) 50%, rgba(42,22,25,.62) 100%), var(--flag);
}

/* Story image — off-screen only. Laid out at 540×960 CSS px and rendered at 2× → exactly
   1080×1920 (Instagram Story 9:16). Top/bottom padding keeps the card clear of Instagram's
   Story overlays (profile bar at top, reply bar at bottom).
   Rows are flex:1 so they always fill the height, whatever the fight count. */
.pk-story {
    box-sizing: border-box;
    width: 540px;
    height: 960px;
    padding: 84px 18px 96px;
    background: linear-gradient(180deg, #2a0a10 0%, #0f0f0f 32%, #0f0f0f 72%, #200709 100%);
    display: flex;
    flex-direction: column;
}
.pk-story .pk-card { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; }
.pk-story .pk-card-header { padding: .9rem 1rem; }
/* Row-major grid: main event top-left, co-main top-right, next pair on the next line… One grid
   (not two column divs) so left/right fights on a line share a height and stay aligned.
   Column/row counts are set inline by JS; pk-right / pk-last-line are added by JS too. */
.pk-story-grid { flex: 1; display: grid; min-height: 0; }
.pk-story .pk-row.pk-right { border-left: 1px solid #262626; }
.pk-story .pk-row.pk-last-line { border-bottom: none; }
.pk-story .pk-filler {
    border-left: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}
/* Top-aligned (not centred) so the weight class + name line up across each left/right pair,
   even when only one of them has a method/round pill */
.pk-story .pk-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: .45rem .75rem .2rem;
}
.pk-story .pk-line { gap: .12rem; }
.pk-story .pk-card-header .pk-event-name { font-size: 1.25rem; }
.pk-story .pk-wc   { font-size: .66rem; }
.pk-story .pk-pick { font-size: 1.05rem; }
.pk-story .pk-opp  { font-size: .82rem; }
.pk-story .pk-pill { font-size: .64rem; padding: .04rem .38rem; }