/* FOOTDRAFT game-specific styles.
   Loaded after WebClientBase's app-base.css (see App.razor). */

/* ---------------------------------------------------------------------------
   Full-screen, app-like behavior (phones; emulated on desktop browsers)
   - The page itself never scrolls or zooms.
   - No pull-to-refresh / rubber-band overscroll.
   - No double-tap zoom, no long-press selection menus.
   --------------------------------------------------------------------------- */
html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;                 /* the page (document) never scrolls */
    overscroll-behavior: none;        /* no pull-to-refresh / rubber-band */
    touch-action: manipulation;       /* no double-tap-to-zoom */
    -webkit-user-select: none;
    user-select: none;                /* no long-press text selection menus */
    -webkit-touch-callout: none;      /* no iOS long-press Copy/Share/Save popup */
    -webkit-tap-highlight-color: transparent;
}

/* Block image drag / drag-to-save. */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Lock the body in place so mobile Safari can't drag the whole page around. */
body {
    position: fixed;
    inset: 0;
}

/* Keep real controls selectable/usable even though selection is disabled globally. */
button,
input,
textarea,
select {
    -webkit-user-select: auto;
    user-select: auto;
}

/* ---------------------------------------------------------------------------
   Arsenal tiles (in-match warhead buttons)
   Give the raised keys a tactile press: they sink into their bottom "lip"
   (see TileStyle) and brighten on tap, reinforcing that they're real buttons.
   --------------------------------------------------------------------------- */
.arsenal-tile {
    transition: transform 0.07s ease, filter 0.07s ease;
}
.arsenal-tile:active {
    transform: translateY(2px);
    filter: brightness(1.12);
}

/* ---------------------------------------------------------------------------
   Portrait phone-width column
   FOOTDRAFT is a portrait game. Constrain the UI to a phone-width column so it
   feels native on phones and is emulated as a centered column on desktop.
   Higher specificity than the Tailwind .max-w-2xl utility, so this wins.
   --------------------------------------------------------------------------- */
header > .container,
main.container {
    max-width: 26rem;
}

/* The main content region is the ONLY scroll surface, and only when a view is
   taller than the screen. Everything else stays put. The transparent top bar
   floats over the top of this area. */
main {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Respect the home-indicator / bottom safe area. */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

/* ===========================================================================
   Legacy "stadium" design system (fd-*) — shared across the loading screen,
   finding-opponent dialog and the in-match view. (The match view also restates
   the match-specific pieces locally so it works the moment it mounts.)
   =========================================================================== */
:root {
    --fd-red: #ff2e43;  --fd-red-deep: #7a0d18;
    --fd-blue: #2b8bff; --fd-blue-deep: #0b2f63;
    --fd-gold: #ffd23f; --fd-gold-deep: #c8860a;
    --fd-ink: #070b10;
}

.fd-display { font-family: 'Lilita One', system-ui, sans-serif; letter-spacing: 0.5px; }
.fd-cond { font-family: 'Barlow Condensed', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1.5px; }

/* Stadium backdrop: warm glow up top, cool glow below, a faint pitch in the middle. */
.fd-stadium {
    background:
        radial-gradient(115% 55% at 50% -10%, rgba(255,46,67,0.30), transparent 62%),
        radial-gradient(115% 55% at 50% 110%, rgba(43,139,255,0.30), transparent 62%),
        radial-gradient(80% 50% at 50% 45%, rgba(46,204,113,0.10), transparent 70%),
        linear-gradient(180deg, #0a0f15 0%, #0c2418 50%, #0a0f15 100%),
        var(--fd-ink);
}

/* Chunky gold 3D action button. */
.fd-roll {
    background: linear-gradient(180deg, #ffe27a, #f5a623);
    color: #5a2d00;
    box-shadow: 0 6px 0 #b3600a, 0 10px 18px -6px rgba(245,166,35,0.7), inset 0 2px 0 rgba(255,255,255,0.6);
    transition: transform 0.07s, box-shadow 0.07s;
}
.fd-roll:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #b3600a, inset 0 2px 0 rgba(255,255,255,0.6); }
.fd-roll:disabled { filter: grayscale(0.5) brightness(0.8); opacity: 0.65; }

/* Blue secondary 3D button (e.g. the menu Play action also uses fd-roll; this is for variety). */
.fd-btn-blue {
    background: linear-gradient(180deg, #4ea0ff, #1d6fe0);
    color: #fff;
    box-shadow: 0 6px 0 var(--fd-blue-deep), 0 10px 18px -6px rgba(43,139,255,0.6), inset 0 2px 0 rgba(255,255,255,0.5);
    transition: transform 0.07s, box-shadow 0.07s;
}
.fd-btn-blue:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--fd-blue-deep), inset 0 2px 0 rgba(255,255,255,0.5); }

/* Chunky panel/card. */
.fd-card {
    background: linear-gradient(180deg, rgba(20,28,38,0.96), rgba(10,15,21,0.96));
    border: 2px solid rgba(255,255,255,0.10);
    box-shadow: 0 14px 38px -12px #000, inset 0 1px 0 rgba(255,255,255,0.12);
}

@keyframes fd-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes fd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@keyframes fd-radar { 0% { transform: scale(0.5); opacity: 0.85; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes fd-sheen { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.fd-float { animation: fd-float 2.6s ease-in-out infinite; }
.fd-victory-pop { animation: fd-pop 0.4s cubic-bezier(.2,1.3,.4,1) both; }
.fd-ball-spin { animation: fd-spin 1.1s linear infinite; display: inline-block; }
.fd-radar-ring { position: absolute; inset: 0; border-radius: 9999px; border: 3px solid var(--fd-gold); animation: fd-radar 1.8s ease-out infinite; }

/* Gold sheen sweep for the wordmark. */
.fd-wordmark {
    background: linear-gradient(100deg, #ffd23f 0%, #fff6cf 45%, #ffd23f 60%, #f5a623 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: fd-sheen 4.5s linear infinite;
    text-shadow: 0 4px 0 rgba(0,0,0,0.18);
}

/* ===========================================================================
   38-0-20 theme — minimal dark / emerald look, copying the 38-0.app aesthetic.
   Additive: used by the menu, lobby, draft and standings (league) screens.
   =========================================================================== */
:root {
    --t38-emerald: #34d39a; --t38-emerald-deep: #1f8f68;
    --t38-amber: #e9b949;
    --t38-line: rgba(255,255,255,0.08);
}
.t38-bg {
    background:
        radial-gradient(72% 46% at 50% 40%, rgba(52,211,154,0.07), transparent 70%),
        #07100b;
}
/* faint centre-circle pitch watermark behind the wordmark */
.t38-pitch::before {
    content: ""; position: absolute; left: 50%; top: 40%; width: 46vmin; height: 46vmin;
    transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 9999px; pointer-events: none;
}
.t38-display { font-family: 'Inter', system-ui, sans-serif; font-weight: 900; letter-spacing: -0.025em; }
.t38-label   { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.t38-hyphen  { color: var(--t38-emerald); }
/* Primary CTA — bevelled "3D key" treatment: gradient face, solid bottom lip, glow. Sinks on press. */
.t38-cta {
    background: linear-gradient(180deg, #46e2ab, #22b07e); color: #05140d; font-weight: 800;
    border-radius: 14px; transition: filter .12s, transform .06s, box-shadow .06s;
    box-shadow: 0 4px 0 var(--t38-emerald-deep), 0 10px 24px -10px rgba(52,211,154,0.6), inset 0 2px 0 rgba(255,255,255,0.4);
}
.t38-cta:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--t38-emerald-deep), inset 0 2px 0 rgba(255,255,255,0.4); }
.t38-cta:disabled { filter: grayscale(0.6) brightness(0.7); opacity: .55; box-shadow: none; }
.t38-ghost {
    background: rgba(255,255,255,0.04); color: #fff; font-weight: 700;
    border: 1px solid var(--t38-line); border-radius: 14px; transition: background .12s;
}
.t38-ghost:active:not(:disabled) { background: rgba(255,255,255,0.09); }
.t38-ghost:disabled { opacity: .5; }
/* Amber sibling of .t38-cta — same bevel recipe in gold. */
.t38-cta-amber {
    background: linear-gradient(180deg, #f3cd6b, #d99e2b); color: #1a1303; font-weight: 800;
    border-radius: 14px; transition: filter .12s, transform .06s, box-shadow .06s;
    box-shadow: 0 4px 0 #8a6414, 0 10px 24px -10px rgba(233,185,73,0.6), inset 0 2px 0 rgba(255,255,255,0.45);
}
.t38-cta-amber:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a6414, inset 0 2px 0 rgba(255,255,255,0.45); }
.t38-cta-amber:disabled { filter: grayscale(0.6) brightness(0.7); opacity: .55; box-shadow: none; }
/* Compact metagame tile (the in-season hub row around the simmed matchday). */
.t38-meta-tile {
    background: rgba(255,255,255,0.04); border: 1px solid var(--t38-line); border-radius: 14px;
    color: #fff; transition: background .12s;
}
.t38-meta-tile:active { background: rgba(255,255,255,0.09); }
.t38-card { background: rgba(255,255,255,0.025); border: 1px solid var(--t38-line); border-radius: 16px; }
.t38-row  { border-bottom: 1px solid rgba(255,255,255,0.06); }
.t38-me   { background: rgba(52,211,154,0.10); }
.t38-turn { box-shadow: 0 0 0 1px rgba(52,211,154,0.5) inset; background: rgba(52,211,154,0.08); }
.t38-pill { border: 1px solid rgba(233,185,73,0.45); color: var(--t38-amber); border-radius: 9999px; font-weight: 700; letter-spacing: 0.14em; }
.t38-input { background: rgba(0,0,0,0.4); color:#fff; border: 1px solid var(--t38-line); border-radius: 12px; }
.t38-tap { transition: transform .07s; } .t38-tap:active { transform: scale(0.97); }
/* Spun-squad reveal: each element fades + rises in. With an animation-delay (set inline per element)
   the club/year appear first, then the players unfold one-by-one — a touch of suspense on each spin.
   `both` fill-mode keeps the element hidden until its delay elapses. */
@keyframes t38-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.t38-reveal { animation: t38-rise .45s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .t38-reveal { animation-duration: .01s; } }
/* position badge + OVR-chip colours (draft player list) — OVR chip is coloured by position, per the ref */
.t38-pos-gk  { background:#e0b84e; color:#1a1205; }
.t38-pos-def { background:#3b82f6; color:#fff; }
.t38-pos-mid { background:#34d39a; color:#04210f; }
.t38-pos-fwd { background:#e0564f; color:#fff; }

/* ===========================================================================
   Meta-game elevation — the top-grossing-casual layer: persistent currency HUD,
   big bevelled hub tiles, claim badges, gold "marquee" treatments and the
   coin-burst / pulse feedback that makes earning and spending feel tactile.
   =========================================================================== */
:root { --t38-hud-h: 3.4rem; }

/* Overlays and the hub slide UNDER the fixed HUD; this pads their content clear of it. */
.t38-under-hud { padding-top: calc(var(--t38-hud-h) + env(safe-area-inset-top) + 0.75rem) !important; }

/* The HUD bar itself: blurred near-black with an emerald hairline. */
.t38-hud {
    background: linear-gradient(180deg, rgba(7,16,11,0.97), rgba(7,16,11,0.88));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(52,211,154,0.18);
    padding-top: env(safe-area-inset-top);
}
/* Currency / level capsule: inset bevel so the numbers sit "in" the bar. */
.t38-hud-pill {
    background: rgba(0,0,0,0.45); border: 1px solid var(--t38-line); border-radius: 9999px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.06);
    font-weight: 800; font-variant-numeric: tabular-nums;
}
/* The ⊕ "get more" button inside a pill: a tiny emerald bevel key. */
.t38-hud-plus {
    width: 1.15rem; height: 1.15rem; border-radius: 9999px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #46e2ab, #22b07e); color: #05140d; font-weight: 900; font-size: 0.7rem;
    box-shadow: 0 2px 0 var(--t38-emerald-deep), inset 0 1px 0 rgba(255,255,255,0.45);
    transition: transform .06s, box-shadow .06s;
}
.t38-hud-plus:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--t38-emerald-deep), inset 0 1px 0 rgba(255,255,255,0.45); }

/* Big hub tile: gradient face, layered depth shadow, inset highlight; sinks + brightens on press. */
.t38-tile-xl {
    background: linear-gradient(165deg, rgba(255,255,255,0.075), rgba(255,255,255,0.015));
    border: 1px solid var(--t38-line); border-radius: 20px; color: #fff;
    box-shadow: 0 12px 30px -14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.12);
    min-height: 5.5rem; position: relative;
    transition: transform .07s, filter .07s;
}
.t38-tile-xl:active { transform: translateY(1px) scale(0.985); filter: brightness(1.12); }
/* Hero variant (the NEXT MATCHDAY card): emerald radial glow + a faint pitch line. */
.t38-tile-hero {
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(52,211,154,0.16), transparent 60%),
        linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012));
    border: 1px solid rgba(52,211,154,0.22); border-radius: 20px; color: #fff;
    box-shadow: 0 14px 34px -14px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.10);
    position: relative; overflow: hidden;
}
.t38-tile-hero::before {
    content: ""; position: absolute; left: 50%; top: -38vmin; width: 60vmin; height: 60vmin;
    transform: translateX(-50%); border: 1px solid rgba(255,255,255,0.05); border-radius: 9999px; pointer-events: none;
}

/* Red claim badge (count or dot), ringed in the page background so it pops off any tile corner. */
.t38-badge {
    position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e0564f; color: #fff; font-size: 0.68rem; font-weight: 800; border-radius: 9999px;
    border: 2px solid #07100b; animation: fd-pop 0.3s cubic-bezier(.2,1.3,.4,1) both;
}
.t38-badge-dot { min-width: 0.8rem; height: 0.8rem; padding: 0; }

/* Gold "marquee" card + button: amber bevel with a slow shine sweep. */
.t38-marquee {
    background:
        radial-gradient(120% 100% at 50% -30%, rgba(233,185,73,0.18), transparent 60%),
        linear-gradient(165deg, rgba(233,185,73,0.10), rgba(255,255,255,0.015));
    border: 1px solid rgba(233,185,73,0.55); border-radius: 20px; position: relative; overflow: hidden;
}
.t38-marquee-btn {
    background: linear-gradient(180deg, #f3cd6b, #d99e2b); color: #1a1303; font-weight: 800;
    border-radius: 14px; position: relative; overflow: hidden;
    box-shadow: 0 4px 0 #8a6414, 0 10px 24px -10px rgba(233,185,73,0.6), inset 0 2px 0 rgba(255,255,255,0.45);
    transition: transform .06s, box-shadow .06s;
}
.t38-marquee-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a6414, inset 0 2px 0 rgba(255,255,255,0.45); }
.t38-marquee-btn:disabled { filter: grayscale(0.45) brightness(0.75); opacity: .6; box-shadow: none; }

/* Shine sweep across a claimable button / gold card (diagonal highlight that loops). */
.t38-shine { position: relative; overflow: hidden; }
.t38-shine::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
    background-size: 220% 100%; animation: fd-sheen 2.8s linear infinite;
}

/* Currency-changed pulse on a HUD pill. */
@keyframes t38-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
.t38-pulse { animation: t38-pulse 0.4s cubic-bezier(.2,.9,.3,1.2) both; }

/* Coin burst: short-lived 🪙 spans that fly up-and-right toward the HUD's coin pill.
   The layout is a fixed phone column with the coins pill always top-right, so a fixed
   direction reads as "flying to the counter" without any coordinate measuring. */
@keyframes t38-fly {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(26vw, -52vh) scale(0.4); }
}
.t38-fly-coin {
    position: fixed; pointer-events: none; z-index: 70; font-size: 1.15rem;
    animation: t38-fly 0.65s cubic-bezier(.2,.7,.3,1) both;
}
.t38-fly-coin:nth-child(2) { animation-delay: 0.07s; }
.t38-fly-coin:nth-child(3) { animation-delay: 0.14s; }

/* Tabular numerals for tickers (countdowns, balances) so digits don't jitter. */
.t38-countdown { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
    .t38-pulse, .t38-fly-coin, .t38-badge { animation: none; }
    .t38-shine::after { animation: none; background: none; }
}