/* ==========================================================================
   END PRESENTATION SURFACES
   Spec: docs/superpowers/specs/2026-07-25-end-presentation-catalog-design.md §5.4

   The glass layer behind the end-of-game icon + label. ONE markup (see
   resources/views/partials/game-end-overlay.blade.php), eight surfaces
   differentiated purely by CSS.

   Loaded by BOTH the six arena blades AND the Filament admin preview —
   Filament never loads app.css, so this file must stay outside the Vite
   bundle (same pattern as public/css/game-arena.css). Bump ?v= in EVERY
   consumer blade when this file changes.

   Sizing: --u = 1% of the board's width, via container queries. The parent
   that carries .end-surface-host establishes the container.

   THEMING NOTE (Task 4.2, site multi-theme system, 2026-08): every colour in
   this file is deliberately LITERAL, not a site --color-* token, and that is
   correct rather than an oversight. Two independent reasons:

   1. Per this file's own design spec (§ "Ölçek kısıtı"), the surface must
      guarantee its own contrast against ~28 board skins ranging from #fffbdc
      to #101826 — the near-opaque dark glass panels below exist BECAUSE they
      are self-contained and don't depend on what's rendered behind them.
      Making them also vary by the SITE'S six colour families would reintroduce
      exactly the contrast problem this file was built to solve (now 6
      families × 2 modes × 28 board skins instead of just 28 board skins).
   2. --acc/--tint/--lbl (defined per .overlay-victory/-defeat/-draw above) are
      this component's OWN local result-accent system — victory gold, defeat
      red, draw grey — a fixed outcome vocabulary independent of site theme,
      same category as gamification.css's win/loss colours (Task 4.1). The
      member_classic surface (below) is additionally pinned to legacy master
      values by an explicit "byte-for-byte parity" requirement in its own
      comment — nothing in that surface may be re-themed.

   The rgba(var(--acc), X)/rgba(var(--tint), X) calls below are NOT literal
   colours — --acc/--tint are already CSS custom properties (see above),
   just local ones, not site theme tokens. A naive hex/rgba() grep still
   counts them as "literal" (30 of this file's matches), which is expected
   and does not indicate un-tokenised chrome.
   ========================================================================== */

.end-surface-host { container-type: inline-size; }

/* Base: the overlay box itself is inert; each surface paints its own layers. */
.game-end-overlay {
    --u: 1cqw;
    --acc: 255, 212, 121;   /* result accent, overridden below */
    --tint: 44, 36, 10;     /* result tint for gradients */
    --lbl: #ffe3a8;         /* label colour */
}

/* Fallback when container queries are unavailable (very old WebViews):
   1cqw resolves to 0 there, which would collapse every size to zero. */
@supports not (container-type: inline-size) {
    .game-end-overlay { --u: 5.6px; }
}

/* ── result accents ─────────────────────────────────────────────────── */
.game-end-overlay.overlay-victory { --acc: 255, 212, 121; --tint: 44, 36, 10; --lbl: #ffe3a8; }
.game-end-overlay.overlay-defeat  { --acc: 255, 138, 138; --tint: 48, 14, 14; --lbl: #ffd0d0; }
.game-end-overlay.overlay-draw    { --acc: 203, 213, 225; --tint: 26, 30, 40; --lbl: #e6edf7; }

/* ── shared element defaults ────────────────────────────────────────── */
.game-end-overlay__medal { display: contents; }   /* only `medallion` opts out */
.game-end-overlay__scrim,
.game-end-overlay__tint  { display: none; }        /* only B-family surfaces opt in */
.game-end-overlay__rule  { display: none; }
.game-end-overlay__reason {
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .66);
    white-space: nowrap;
    font-size: calc(var(--u) * 3.1);
}
.game-end-overlay__text { color: var(--lbl); }

/* Click-to-dismiss WITHOUT swallowing the board.
   The root is pointer-events:none so the board stays usable after the game ends.
   The plate opts back in — and because a pointer-events:none element still
   RECEIVES BUBBLED events from pointer-events:auto descendants, the root's
   @click="showOverlay = false" fires when the plate is clicked. Clicking the
   board around the plate passes straight through. */
.game-end-overlay__inner { pointer-events: auto; }

/* The rematch button is the one child that must not dismiss (it uses @click.stop). */
.game-end-overlay__rematch {
    pointer-events: auto;
    cursor: pointer;
    appearance: none;
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 1.4);
    margin-top: calc(var(--u) * 1.6);
    padding: calc(var(--u) * 2.2) calc(var(--u) * 5);
    border-radius: 999px;
    font-size: calc(var(--u) * 3.4);
    font-weight: 700;
    letter-spacing: .03em;
    color: #0b0d13;
    background: linear-gradient(180deg, rgba(var(--acc), 1) 0%, rgba(var(--acc), .82) 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3.4) rgba(0, 0, 0, .45);
    transition: transform .14s ease, filter .14s ease;
}
.game-end-overlay__rematch:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
.game-end-overlay__rematch:active:not(:disabled) { transform: translateY(0); }
.game-end-overlay__rematch:disabled { opacity: .45; cursor: not-allowed; }
.game-end-overlay__rematch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── pending: an offer is out, waiting on the opponent ───────────────────
   A light travels the button's rim. The angle is animated (not the element),
   because rotating the pseudo-element would rotate its rim mask too and a pill
   is not square — the ring would visibly wobble. --end-rematch-ang is registered
   below so the angle can interpolate at all; an unregistered custom property
   animates in discrete jumps.

   Waiting is not the same as unavailable: a pending button keeps FULL opacity
   even while :disabled, otherwise the guest plane (which cannot cancel) would
   look broken rather than busy. */
@property --end-rematch-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.game-end-overlay__rematch.is-pending {
    position: relative;
    isolation: isolate;
}
.game-end-overlay__rematch.is-pending:disabled {
    opacity: 1;
    cursor: progress;
}
/* Mute the fill while waiting: the button is no longer the call to action, and a
   white light cannot read against a full-brightness gold pill. */
.game-end-overlay__rematch.is-pending {
    background: linear-gradient(180deg, rgba(var(--acc), .42) 0%, rgba(var(--acc), .28) 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.game-end-overlay__rematch.is-pending::before {
    content: '';
    position: absolute;
    inset: calc(var(--u) * -0.55);
    border-radius: inherit;
    padding: max(3px, calc(var(--u) * 0.75));
    background: conic-gradient(from var(--end-rematch-ang),
        rgba(255, 255, 255, 0) 0deg,
        rgba(255, 255, 255, 0) 186deg,
        rgba(var(--acc), .55) 250deg,
        rgba(255, 255, 255, .85) 320deg,
        #fff 350deg,
        rgba(255, 255, 255, 0) 360deg);
    /* Ring, not disc: punch the middle out so only the rim lights up. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    /* Reads as LIGHT rather than a coloured border. */
    filter: drop-shadow(0 0 calc(var(--u) * 1.1) rgba(255, 255, 255, .85))
            drop-shadow(0 0 calc(var(--u) * 2.4) rgba(var(--acc), .6));
    animation: end-rematch-orbit 1.15s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes end-rematch-orbit {
    to { --end-rematch-ang: 360deg; }
}

/* No @property (older WebViews): the conic angle cannot interpolate, so swap the
   travelling light for a breathing rim rather than leaving a frozen arc. */
@supports not (background: conic-gradient(from var(--end-rematch-ang), red, blue)) {
    .game-end-overlay__rematch.is-pending::before {
        background: rgba(255, 255, 255, .9);
        animation: end-rematch-pulse 1.15s ease-in-out infinite;
    }
}
@keyframes end-rematch-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: .9; }
}

/* ══════════════════════════════════════════════════════════════════════
   SURFACE: none — no layer at all (legacy look; fails WCAG, kept for parity)
   ═════════════════════════════════════════════════════════════════════ */
.game-end-overlay--surface-none {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
}
.game-end-overlay--surface-none .game-end-overlay__inner { background: none; }

/* ══════════════════════════════════════════════════════════════════════
   FAMILY A — compact plates. Board stays visible; game-end-flash unaffected.
   ═════════════════════════════════════════════════════════════════════ */

/* ── A1 · glass_badge — horizontal pill ─────────────────────────────── */
.game-end-overlay--surface-glass_badge {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-glass_badge .game-end-overlay__inner {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3.6);
    padding: calc(var(--u) * 3.2) calc(var(--u) * 6.4) calc(var(--u) * 3.2) calc(var(--u) * 4.6);
    border-radius: 999px;
    background: rgba(9, 11, 17, .76);
    backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(150%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 2.6)) saturate(150%);
    border: 1px solid rgba(var(--acc), .34);
    box-shadow:
        0 calc(var(--u) * 2.4) calc(var(--u) * 7) rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 calc(var(--u) * 8) rgba(var(--acc), .10);
}
.game-end-overlay--surface-glass_badge .game-end-overlay__fallback { font-size: calc(var(--u) * 9.4); }
.game-end-overlay--surface-glass_badge .game-end-overlay__icon     { width: calc(var(--u) * 11); }
.game-end-overlay--surface-glass_badge .game-end-overlay__text     { font-size: calc(var(--u) * 5); }

/* ── A2 · vertical_card — stacked card (default for computer/guest) ──── */
.game-end-overlay--surface-vertical_card {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-vertical_card .game-end-overlay__inner {
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 1.9);
    padding: calc(var(--u) * 6.4) calc(var(--u) * 8) calc(var(--u) * 5.6);
    min-width: calc(var(--u) * 46);
    border-radius: calc(var(--u) * 4.4);
    background: linear-gradient(160deg,
        rgba(10, 12, 18, .80) 0%, rgba(var(--tint), .80) 52%, rgba(10, 12, 18, .80) 100%);
    backdrop-filter: blur(calc(var(--u) * 3)) saturate(140%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 3)) saturate(140%);
    border: 1px solid rgba(var(--acc), .40);
    box-shadow:
        0 calc(var(--u) * 3.4) calc(var(--u) * 9) rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 0 calc(var(--u) * 12) rgba(var(--acc), .13);
}
.game-end-overlay--surface-vertical_card .game-end-overlay__fallback { font-size: calc(var(--u) * 17); }
.game-end-overlay--surface-vertical_card .game-end-overlay__text     { font-size: calc(var(--u) * 5.4); }
.game-end-overlay--surface-vertical_card .game-end-overlay__rule {
    display: block;
    width: calc(var(--u) * 13);
    height: max(2px, calc(var(--u) * 0.45));
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--acc), .95), transparent);
}

/* ── A3 · ribbon — edge-to-edge band ────────────────────────────────── */
.game-end-overlay--surface-ribbon {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-ribbon .game-end-overlay__inner {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 5.4) calc(var(--u) * 4);
    background: linear-gradient(90deg,
        rgba(9, 11, 17, .62) 0%, rgba(9, 11, 17, .84) 22%,
        rgba(9, 11, 17, .84) 78%, rgba(9, 11, 17, .62) 100%);
    backdrop-filter: blur(calc(var(--u) * 2.8)) saturate(145%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 2.8)) saturate(145%);
    border-top: 1px solid rgba(var(--acc), .42);
    border-bottom: 1px solid rgba(var(--acc), .42);
    box-shadow: 0 0 calc(var(--u) * 10) rgba(0, 0, 0, .4),
                inset 0 0 calc(var(--u) * 14) rgba(var(--acc), .10);
}
.game-end-overlay--surface-ribbon .game-end-overlay__fallback { font-size: calc(var(--u) * 11); }
.game-end-overlay--surface-ribbon .game-end-overlay__text     { font-size: calc(var(--u) * 6); }
.game-end-overlay--surface-ribbon .game-end-overlay__rematch  { margin-top: 0; }

/* ── A4 · medallion — circle + label pill ───────────────────────────── */
.game-end-overlay--surface-medallion {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-medallion .game-end-overlay__inner {
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 3);
}
.game-end-overlay--surface-medallion .game-end-overlay__medal {
    display: grid;
    place-items: center;
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, rgba(var(--acc), .22), rgba(8, 10, 16, .82) 62%);
    backdrop-filter: blur(calc(var(--u) * 3.2)) saturate(150%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 3.2)) saturate(150%);
    border: calc(var(--u) * .36) solid rgba(var(--acc), .5);
    box-shadow:
        0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, .55),
        inset 0 0 calc(var(--u) * 8) rgba(var(--acc), .16),
        0 0 calc(var(--u) * 7) rgba(var(--acc), .20);
}
.game-end-overlay--surface-medallion .game-end-overlay__fallback { font-size: calc(var(--u) * 16); }
.game-end-overlay--surface-medallion .game-end-overlay__text {
    font-size: calc(var(--u) * 5);
    padding: calc(var(--u) * 2.2) calc(var(--u) * 5.4);
    border-radius: 999px;
    background: rgba(9, 11, 17, .76);
    backdrop-filter: blur(calc(var(--u) * 2.6));
    -webkit-backdrop-filter: blur(calc(var(--u) * 2.6));
    border: 1px solid rgba(var(--acc), .32);
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .5),
                inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ══════════════════════════════════════════════════════════════════════
   FAMILY B — full-board. Highest contrast, but MUTES game-end-flash.
   ═════════════════════════════════════════════════════════════════════ */

/* ── B1 · member_classic — byte-for-byte today's member arena look ─────
   pointer-events:auto restores TODAY's member behaviour exactly: the whole
   layer is clickable-to-dismiss and the board underneath is NOT reachable. */
.game-end-overlay--surface-member_classic {
    pointer-events: auto;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 4px;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, .68) 0%, rgba(var(--tint), .72) 50%, rgba(0, 0, 0, .68) 100%);
    border: 2px solid rgba(var(--acc), .55);
    box-shadow: inset 0 0 60px rgba(var(--acc), .16);
}
.game-end-overlay--surface-member_classic .game-end-overlay__inner {
    display: grid;
    justify-items: center;
    gap: .55rem;
}

/* LEGACY PARITY OVERRIDE — member_classic is the ONE surface that opts out of the
   shared --acc/--tint/--lbl tokens. The member arena predates this catalogue, so it
   keeps master's exact values (resources/css/app.css @ 0d150f3a) and nothing changes
   for players who already know this screen. Every other surface must keep using the
   shared tokens; do not copy this pattern.

   Two asymmetries worth knowing before editing:
     - draw is NOT symmetrical with victory/defeat — its border alpha is .48 (not .55)
       and its glow alpha .14 (not .16), so both are overridden explicitly below.
     - the label was ONE colour for all three results; the shared tokens make it
       per-result, so --lbl is pinned to the same wheat for each.

   Same specificity (0-2-0) as the shared accent rules, so this must stay BELOW them. */
.game-end-overlay--surface-member_classic.overlay-victory { --acc: 255, 215, 0;   --tint: 36, 30, 8;  --lbl: rgb(245, 222, 179); }
.game-end-overlay--surface-member_classic.overlay-defeat  { --acc: 220, 38, 38;   --tint: 40, 9, 9;   --lbl: rgb(245, 222, 179); }
.game-end-overlay--surface-member_classic.overlay-draw {
    --acc: 156, 163, 175;
    --tint: 23, 26, 34;
    --lbl: rgb(245, 222, 179);
    border-color: rgba(156, 163, 175, .48);
    box-shadow: inset 0 0 60px rgba(156, 163, 175, .14);
}

/* ── B2 · soft_glass_plate — light scrim + opaque centre plate ───────── */
.game-end-overlay--surface-soft_glass_plate {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-soft_glass_plate .game-end-overlay__scrim {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 1.4);
    backdrop-filter: blur(calc(var(--u) * 1.1)) saturate(85%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 1.1)) saturate(85%);
    background: rgba(6, 8, 13, .36);
}
.game-end-overlay--surface-soft_glass_plate .game-end-overlay__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 1.8);
    padding: calc(var(--u) * 6) calc(var(--u) * 8.4) calc(var(--u) * 5.2);
    min-width: calc(var(--u) * 48);
    border-radius: calc(var(--u) * 4);
    background: linear-gradient(160deg,
        rgba(8, 10, 16, .86) 0%, rgba(var(--tint), .86) 52%, rgba(8, 10, 16, .86) 100%);
    backdrop-filter: blur(calc(var(--u) * 3.4)) saturate(150%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 3.4)) saturate(150%);
    border: 1px solid rgba(var(--acc), .42);
    box-shadow:
        0 calc(var(--u) * 4) calc(var(--u) * 11) rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 0 calc(var(--u) * 13) rgba(var(--acc), .14);
}
.game-end-overlay--surface-soft_glass_plate .game-end-overlay__fallback { font-size: calc(var(--u) * 16); }
.game-end-overlay--surface-soft_glass_plate .game-end-overlay__text     { font-size: calc(var(--u) * 5.4); }
.game-end-overlay--surface-soft_glass_plate .game-end-overlay__rule {
    display: block;
    width: calc(var(--u) * 14);
    height: max(2px, calc(var(--u) * 0.45));
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--acc), .95), transparent);
}

/* ── B3 · light_pool — edgeless radial darkening, masked blur ────────── */
.game-end-overlay--surface-light_pool {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
}
.game-end-overlay--surface-light_pool .game-end-overlay__scrim {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 1.4);
    backdrop-filter: blur(calc(var(--u) * 2.4)) saturate(120%);
    -webkit-backdrop-filter: blur(calc(var(--u) * 2.4)) saturate(120%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%,
        #000 0%, #000 24%, rgba(0, 0, 0, .55) 42%, transparent 62%);
    mask-image: radial-gradient(circle at 50% 50%,
        #000 0%, #000 24%, rgba(0, 0, 0, .55) 42%, transparent 62%);
}
.game-end-overlay--surface-light_pool .game-end-overlay__tint {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 1.4);
    background: radial-gradient(circle at 50% 50%,
        rgba(4, 5, 9, .86) 0%, rgba(4, 5, 9, .80) 22%,
        rgba(var(--tint), .55) 40%, transparent 64%);
}
.game-end-overlay--surface-light_pool .game-end-overlay__inner {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 1.7);
}
.game-end-overlay--surface-light_pool .game-end-overlay__fallback {
    font-size: calc(var(--u) * 17);
    filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(var(--acc), .45));
}
.game-end-overlay--surface-light_pool .game-end-overlay__text {
    font-size: calc(var(--u) * 5.6);
    text-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.6) rgba(0, 0, 0, .8);
}
.game-end-overlay--surface-light_pool .game-end-overlay__rule {
    display: block;
    width: calc(var(--u) * 15);
    height: max(2px, calc(var(--u) * 0.45));
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--acc), .95), transparent);
}

/* ── reduced motion: no transforms on the rematch button ────────────── */
@media (prefers-reduced-motion: reduce) {
    .game-end-overlay__rematch { transition: none; }
    .game-end-overlay__rematch:hover:not(:disabled) { transform: none; }
    /* Keep the pending STATE visible (it is information, not decoration) but stop
       it moving: a steady rim instead of a travelling light. */
    .game-end-overlay__rematch.is-pending::before {
        animation: none;
        background: rgba(255, 255, 255, .85);
    }
}