/**
 * PWHL Goalie Match — purple deck memory game.
 * Card back: PWHL purple Lattice (docs/design spec section 6 — deep violet,
 * lavender lines, explicitly NOT pink).
 */

body.ingoal-pwhl-match { background: #1B102F; }

.pm-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--ig-space-xl, 32px) 24px 80px;
    font-family: var(--ig-font-ui, 'Inter', sans-serif);
    background: linear-gradient(180deg, #2B1A4E 0%, #1B102F 320px);
}

.pm-preview-note {
    background: #C9A654;
    color: #1B102F;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    text-align: center;
    margin: 0 0 18px;
}
.pm-preview-note code { font-family: monospace; }

.pm-hero { text-align: center; margin-bottom: 22px; }
.pm-hero__title {
    font-family: var(--ig-font-heading, 'Inter', sans-serif);
    font-size: var(--ig-text-5xl, 42px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 8px;
}
.pm-hero__sub {
    font-size: 16px;
    line-height: 1.5;
    color: #BAA4E2;
    max-width: 560px;
    margin: 0 auto;
}

/* ---------------- HUD ---------------- */
.pm-hud { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pm-btn {
    font-family: var(--ig-font-ui, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #fff;
    background: #4B2E83;
    border: 1px solid rgba(186,164,226,.4);
    border-radius: var(--ig-radius-sm, 4px);
    padding: 10px 18px;
    min-height: 44px;
    cursor: pointer;
}
.pm-btn:hover { background: #5d3aa3; }
.pm-hud__size { display: flex; align-items: center; gap: 8px; }
.pm-hud__size span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: #BAA4E2;
}
.pm-hud__size select {
    font-family: var(--ig-font-ui, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(186,164,226,.12);
    border: 1px solid rgba(186,164,226,.4);
    border-radius: var(--ig-radius-sm, 4px);
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
}
.pm-hud__size select option { color: var(--ig-text-primary, #1a2332); }
.pm-hud__stats {
    margin-left: auto;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    color: #BAA4E2;
    font-variant-numeric: tabular-nums;
}
#pmBest { color: rgba(255,255,255,.5); }

/* ---------------- Grid ---------------- */
.pm-board-wrap { position: relative; }
.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    border-radius: 20px;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 40%, rgba(186,164,226,.10), transparent 60%),
        linear-gradient(165deg, #241541 0%, #1B102F 100%);
    box-shadow: inset 0 2px 18px rgba(0,0,0,.3);
    user-select: none;
    -webkit-user-select: none;
}
.pm-noscript { color: #BAA4E2; padding: 40px; text-align: center; grid-column: 1 / -1; }

/* ---------------- Cards ---------------- */
.pm-card {
    aspect-ratio: 5 / 7;
    perspective: 900px;
    cursor: pointer;
}
.pm-card__inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.3,.8,.3,1);
}
.pm-card.is-up .pm-card__inner { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
    .pm-card__inner { transition: none; }
}
.pm-card__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* back: purple Lattice */
.pm-card__back {
    background:
        repeating-linear-gradient(45deg, rgba(186,164,226,.17) 0px, rgba(186,164,226,.17) 1.5px, transparent 1.5px, transparent 11px),
        repeating-linear-gradient(-45deg, rgba(186,164,226,.17) 0px, rgba(186,164,226,.17) 1.5px, transparent 1.5px, transparent 11px),
        linear-gradient(180deg, #2B1A4E 0%, #1B102F 100%);
    border: 1px solid rgba(186,164,226,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-card__gem {
    width: 42%;
    aspect-ratio: 1;
    transform: rotate(45deg);
    background: linear-gradient(180deg, #2B1A4E, #1B102F);
    border: 1px solid rgba(186,164,226,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-card__gem span {
    transform: rotate(-45deg);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #EDF4FA;
    text-align: center;
    line-height: 1.1;
}
.pm-card__gem small { display: block; font-size: 8px; color: #BAA4E2; letter-spacing: 1px; }

/* front: goalie face */
.pm-card__front {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #2B1A4E 0%, #1B102F 100%);
    border: 1px solid rgba(186,164,226,.35);
    color: #fff;
}
.pm-card__front::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--team2, #BAA4E2), var(--team, #2B1A4E));
}
.pm-card__photo {
    position: absolute;
    inset: 8% 6% 24%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pm-card__photo img {
    width: 86%;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
    pointer-events: none;
}
.pm-card__name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    text-align: center;
    background: rgba(27,16,47,.82);
    border-top: 1px solid rgba(186,164,226,.25);
    padding: 5px 4px 6px;
}
.pm-card__name .last {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-card__name .team {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #BAA4E2;
}

.pm-card.is-matched { cursor: default; }
.pm-card.is-matched .pm-card__front {
    border-color: #C9A654;
    box-shadow: 0 0 0 2px rgba(201,166,84,.45);
}
.pm-card.is-matched .pm-card__inner { animation: pm-pop .4s ease; }
@keyframes pm-pop {
    0% { transform: rotateY(180deg) scale(1); }
    50% { transform: rotateY(180deg) scale(1.06); }
    100% { transform: rotateY(180deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pm-card.is-matched .pm-card__inner { animation: none; }
}

/* ---------------- Win banner ---------------- */
.pm-won {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(27,16,47,.78);
    border-radius: 20px;
    z-index: 50;
}
.pm-won h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 50px;
    letter-spacing: 4px;
    color: #fff;
    margin: 0;
}
.pm-won p { color: #BAA4E2; margin: 0; font-size: 15px; }
.pm-won .pm-btn { min-width: 150px; }

/* ---------------- About ---------------- */
.pm-about { max-width: 680px; margin: 26px auto 0; }
.pm-about details {
    border: 1px solid rgba(186,164,226,.3);
    border-radius: var(--ig-radius-md, 8px);
    padding: 14px 18px;
    background: rgba(186,164,226,.07);
}
.pm-about summary { font-weight: 600; color: #fff; cursor: pointer; }
.pm-about p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); margin: 12px 0 0; }
.pm-about a { color: #BAA4E2; }

@media (max-width: 700px) {
    .pm-page { padding-left: 12px; padding-right: 12px; }
    .pm-hero__title { font-size: 30px; }
    .pm-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
    .pm-card__name .last { font-size: 12px; }
}

/* --------------------------------------------------------------------------
 * Member leaderboard + cross-link — shared by Goalie Match and Goalie
 * Partners. Deliberately self-contained rather than borrowing .gs-leader
 * from goalie-solitaire.css, which these pages don't load. Sizes follow the
 * legibility floor (secondary text >= 14px), so they run a little larger
 * than the hub's copy of the same component.
 * ----------------------------------------------------------------------- */
.gs-leader { max-width: 720px; margin: 38px auto 0; }
.gs-leader__title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 6px;
}
.gs-leader__sub { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.84); margin: 0 0 18px; }
.gs-leader__sub a { color: #BAA4E2; }
.gs-leader__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gs-leader__board {
    padding: 18px 20px;
    border: 1px solid rgba(186,164,226,.28);
    border-radius: 14px;
    background: rgba(43,26,78,.5);
}
.gs-leader__board h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 12px;
}
.gs-leader__board h3 span {
    display: block;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: #C9A654;
}
.gs-leader__board ol { margin: 0; padding: 0; list-style: none; counter-reset: lb; }
.gs-leader__board li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    counter-increment: lb;
    font-size: 15px;
    color: rgba(255,255,255,.88);
    padding: 6px 0;
    border-bottom: 1px solid rgba(186,164,226,.14);
}
.gs-leader__board li:last-child { border-bottom: 0; }
.gs-leader__board li::before {
    content: counter(lb) '.';
    color: #BAA4E2;
    font-weight: 700;
    min-width: 22px;
}
.gs-leader__board li span { flex: 1; }
.gs-leader__board li strong { color: #fff; font-variant-numeric: tabular-nums; }

.pm-crosslink {
    max-width: 720px;
    margin: 34px auto 0;
    padding: 24px;
    border: 1px solid rgba(186,164,226,.3);
    border-radius: 14px;
    background: rgba(43,26,78,.5);
    text-align: center;
}
.pm-crosslink h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 10px;
}
.pm-crosslink p {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,.86);
    margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
 * Members lock — shown in place of the board when a visitor can't play yet.
 * Sits over a blurred, non-interactive deck so the page still shows what is
 * being withheld; the panel states the terms and the release date.
 * ----------------------------------------------------------------------- */
.pm-board-wrap.is-locked { position: relative; }
/* A locked visitor never gets the engine, so the grid is dealt no cards and
   would collapse to nothing — the absolutely-positioned panel then overflows
   into the sections above and below. Hold the box open, and hide the HUD:
   its New Game button and size select have no JS bound behind the lock. */
.pm-board-wrap.is-locked .pm-hud { display: none; }
.pm-board-wrap.is-locked .pm-grid {
    min-height: 430px;
    filter: blur(6px) saturate(.7);
    opacity: .5;
    pointer-events: none;
    user-select: none;
}
.pm-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 3;
}
.pm-lock__panel {
    max-width: 520px;
    width: 100%;
    padding: 28px 26px 24px;
    text-align: center;
    border: 1px solid rgba(201,166,84,.45);
    border-radius: 16px;
    background: rgba(20,12,36,.94);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.pm-lock__tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 13px;
    border: 1px solid rgba(201,166,84,.55);
    border-radius: 999px;
    background: rgba(201,166,84,.12);
    color: #C9A654;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pm-lock__title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 8px;
}
.pm-lock__blurb {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255,255,255,.86);
    margin: 0 0 14px;
}
.pm-lock__terms {
    font-size: 17px;
    line-height: 1.55;
    color: #fff;
    margin: 0 0 20px;
}
.pm-lock__terms strong { color: #C9A654; }
.pm-lock__actions { margin: 0 0 12px; }
.pm-btn--gold {
    background: #C9A654;
    border-color: #C9A654;
    color: #1B102F;
    font-weight: 700;
}
.pm-lock__login {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    color: #BAA4E2;
}
.pm-lock__note,
.pm-lock__alt {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.82);
    margin: 10px 0 0;
}
.pm-lock__note a,
.pm-lock__alt a { color: #BAA4E2; }

@media (max-width: 600px) {
    .pm-lock { position: static; padding: 0; }
    .pm-board-wrap.is-locked .pm-grid { display: none; }
    .pm-lock__panel { padding: 24px 20px; }
}