/* ============================================================
   HOME HEROES — design system
   Neon comic arcade: deep navy, electric blue, gold rewards,
   violet/magenta highlights, chunky cards, bold display type.
   Single token layer. No legacy overrides.
   ============================================================ */

/* ---------------- Fonts (self-hosted, offline-safe) ---------------- */

@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/fredoka-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/fredoka-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------- Tokens ---------------- */

:root {
    color-scheme: dark;

    /* Type */
    --font-display: "Fredoka", "Segoe UI", ui-rounded, system-ui, sans-serif;
    --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --step-0: .95rem;
    --step-1: 1.1rem;
    --step-2: 1.35rem;
    --step-3: clamp(1.7rem, 5.5vw, 2.4rem);
    --step-4: clamp(2.1rem, 8vw, 3.2rem);
    --micro: .68rem;

    /* Core palette */
    --bg: #060b1a;
    --bg-2: #0a1230;
    --panel: #0f1c3a;
    --panel-2: #152a4f;
    --panel-3: #1d3765;

    --line: rgba(130, 180, 255, .14);
    --line-strong: rgba(130, 180, 255, .3);

    --text: #f2f7ff;
    --muted: #9db2d4;

    --primary: #23b5ff;
    --primary-2: #2f7bff;
    --cyan: #5fe6ff;
    --accent: #ffb62e;
    --accent-2: #ff7a3c;
    --danger: #ff5c7a;
    --success: #37d98a;
    --violet: #8b5cf6;
    --magenta: #ff4fd8;

    /* Elevation */
    --shadow-sm: 0 .35rem 1rem rgba(2, 8, 20, .35);
    --shadow-md: 0 1rem 2.5rem rgba(2, 8, 20, .45);
    --shadow-lg: 0 1.75rem 4.5rem rgba(2, 8, 20, .58);
    --glow-primary: 0 0 2.2rem rgba(35, 181, 255, .28);
    --glow-accent: 0 0 2.2rem rgba(255, 182, 46, .3);

    --radius-sm: .85rem;
    --radius: 1.25rem;
    --radius-lg: 1.75rem;

    --ease-spring: cubic-bezier(.22, .9, .34, 1);
    --ease-pop: cubic-bezier(.18, .89, .32, 1.35);
}

* {
    box-sizing: border-box;
}

html, body, #app {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    background:
        radial-gradient(52rem 34rem at 88% -8%, rgba(35, 181, 255, .18), transparent 60%),
        radial-gradient(46rem 30rem at -12% 24%, rgba(139, 92, 246, .16), transparent 60%),
        radial-gradient(40rem 26rem at 50% 118%, rgba(255, 182, 46, .1), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Comic halftone + starfield over the whole app */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        radial-gradient(rgba(35, 181, 255, .4) 1px, transparent 1px);
    background-size: 92px 92px, 47px 47px;
    background-position: 7px 9px, 23px 31px;
    mask-image: radial-gradient(95% 75% at 50% 25%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(95% 75% at 50% 25%, #000 30%, transparent 100%);
}

/* Speed-line vignette for depth */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-conic-gradient(from 210deg at 50% 120%, rgba(35, 181, 255, .05) 0deg 2deg, transparent 2deg 8deg);
    mask-image: radial-gradient(80% 55% at 50% 115%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(80% 55% at 50% 115%, #000 0%, transparent 70%);
}

h1, h2, h3 { text-wrap: balance; }

h1:focus { outline: none; }

a { color: var(--primary); }

button {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(35, 181, 255, .55);
    outline-offset: 3px;
}

/* ---------------- Layout shell ---------------- */

.app-shell {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem calc(7.5rem + env(safe-area-inset-bottom));
}

.content {
    width: min(100%, 68rem);
    margin: 0 auto;
}

.content:focus { outline: none; }

.skip-link {
    position: fixed;
    top: -6rem;
    left: 1rem;
    z-index: 200;
    padding: .8rem 1rem;
    background: var(--panel);
    border: 2px solid var(--primary);
    border-radius: .75rem;
}

.skip-link:focus { top: .5rem; }

.app-topbar {
    width: min(100%, 68rem);
    margin: 0 auto 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 44px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-decoration: none;
}

.brand img {
    border-radius: .8rem;
    box-shadow: var(--glow-primary);
}

.brand-accent { color: var(--primary); margin-left: .22rem; }

.topbar-caption { color: var(--muted); font-size: .75rem; }

.topbar-right { display: flex; align-items: center; gap: .6rem; }

.hud-cluster { display: flex; align-items: center; gap: .4rem; }

.hud-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(35, 181, 255, .08);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .8rem;
}

.hud-chip .game-icon { width: 1rem; height: 1rem; }
.hud-chip--level .game-icon { color: var(--primary); }
.hud-chip--coin { color: #ffe0a2; border-color: rgba(255, 182, 46, .3); background: rgba(255, 182, 46, .08); }
.hud-chip--coin .game-icon { color: var(--accent); }
.hud-chip--flame { color: #ffb27a; border-color: rgba(255, 122, 60, .3); background: rgba(255, 122, 60, .08); }
.hud-chip--flame .game-icon { color: var(--accent-2); }

a.hud-chip { text-decoration: none; cursor: pointer; transition: transform .15s var(--ease-spring), border-color .15s ease, box-shadow .15s ease; }
a.hud-chip:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
a.hud-chip:active { transform: scale(.95); }
a.hud-chip:focus-visible { outline: 3px solid rgba(35, 181, 255, .28); outline-offset: 2px; }

.topbar-avatar {
    display: inline-flex;
    border-radius: 1rem;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease;
}

.topbar-avatar:hover { transform: translateY(-2px); box-shadow: var(--glow-primary); }
.topbar-avatar:focus-visible { outline: 3px solid rgba(35, 181, 255, .28); outline-offset: 2px; }

.feedback-toggle { width: 40px; height: 40px; }
.feedback-toggle[aria-pressed="true"] { color: var(--primary); border-color: rgba(35, 181, 255, .45); }

/* ---------------- Bottom navigation ---------------- */

.bottom-nav {
    position: fixed;
    z-index: 20;
    bottom: calc(.6rem + env(safe-area-inset-bottom));
    left: 50%;
    width: min(calc(100% - 1.5rem), 38rem);
    transform: translateX(-50%);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .2rem;
    padding: .4rem;
    border: 1px solid var(--line-strong);
    border-radius: 1.4rem;
    background: rgba(8, 16, 36, .84);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    box-shadow: var(--shadow-lg), 0 0 2.5rem rgba(35, 181, 255, .1);
}

.bottom-nav > a {
    position: relative;
    min-height: 3.5rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .25rem;
    padding: .45rem .1rem;
    border-radius: .9rem;
    color: var(--muted);
    font-size: .6rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.bottom-nav a:active { transform: scale(.94); }

.bottom-nav .game-icon {
    width: 1.35rem;
    height: 1.35rem;
    transition: transform .18s var(--ease-pop), filter .18s ease;
}

.bottom-nav a.active {
    background: linear-gradient(160deg, rgba(35, 181, 255, .22), rgba(47, 123, 255, .16));
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 .35rem 1.1rem rgba(35, 181, 255, .24);
}

.bottom-nav a.active .game-icon {
    color: var(--primary);
    filter: drop-shadow(0 0 .5rem rgba(35, 181, 255, .7));
    transform: translateY(-1px) scale(1.12);
}

.nav-badge {
    position: absolute;
    top: .3rem;
    right: calc(50% - 1.15rem);
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .28rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #2a1600;
    font-size: .62rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px rgba(8, 16, 36, .9), var(--glow-accent);
    animation: badge-pop .35s var(--ease-pop) both;
}

/* ---------------- Buttons ---------------- */

.primary-button, .secondary-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 46px;
    padding: .7rem 1.15rem;
    border: 0;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .14s var(--ease-spring), box-shadow .18s ease, filter .18s ease;
}

.primary-button::after, .secondary-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.primary-button:hover::after, .secondary-button:hover::after { transform: translateX(120%); }

.primary-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    box-shadow: 0 .5rem 1.4rem rgba(35, 140, 255, .38), inset 0 1px rgba(255, 255, 255, .32);
}

.secondary-button {
    background: var(--panel-3);
    color: var(--text);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    border: 1px solid var(--line-strong);
}

.primary-button:hover, .secondary-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.primary-button:active, .secondary-button:active {
    transform: scale(.96);
    filter: brightness(.95);
}

button:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none !important;
    filter: none !important;
}

/* ---------------- Shared cards / headings ---------------- */

.progress-card, .threat-card, .mission-card, .empty-state,
.zone-card, .reward-card, .profile-hero, .leaderboard, .coming-soon,
.boss-card, .streak-card, .wallet-card, .stat-tile, .summary-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(155deg, var(--panel-2), var(--panel) 80%);
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
}

.page-stack, .hero-dashboard {
    display: grid;
    gap: 1.15rem;
    animation: rise-in .5s var(--ease-spring) both;
}

.page-stack > *, .hero-dashboard > *, .profile-grid > * {
    animation: rise-in .5s var(--ease-spring) both;
}

.page-stack > *:nth-child(2), .hero-dashboard > *:nth-child(2) { animation-delay: .06s; }
.page-stack > *:nth-child(3), .hero-dashboard > *:nth-child(3) { animation-delay: .12s; }
.page-stack > *:nth-child(4), .hero-dashboard > *:nth-child(4) { animation-delay: .18s; }
.page-stack > *:nth-child(5), .hero-dashboard > *:nth-child(5) { animation-delay: .24s; }
.page-stack > *:nth-child(6), .hero-dashboard > *:nth-child(6) { animation-delay: .3s; }
.page-stack > *:nth-child(7), .hero-dashboard > *:nth-child(7) { animation-delay: .36s; }
.profile-grid > *:nth-child(2) { animation-delay: .06s; }
.profile-grid > *:nth-child(3) { animation-delay: .12s; }
.profile-grid > *:nth-child(4) { animation-delay: .18s; }

.page-heading { padding: .25rem 0 .5rem; }

.page-heading h1, .admin-page h1, .auth-panel h1 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: .5rem 0 .7rem;
    background: linear-gradient(180deg, #fff, #b7e4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-heading p { margin: 0; max-width: 40rem; color: var(--muted); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    color: var(--accent);
    font-weight: 600;
    font-size: var(--micro);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .35rem 0 .3rem;
}

.section-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 650;
    letter-spacing: -.01em;
}

.section-heading > .game-icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }

.section-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--muted);
    font-size: var(--micro);
    font-weight: 700;
    letter-spacing: .14em;
}

.count-badge {
    display: grid;
    place-items: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .45rem;
    border: 1px solid var(--line-strong);
    border-radius: .65rem;
    background: rgba(35, 181, 255, .1);
    color: var(--primary);
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .8rem;
}

.game-icon {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------------- Welcome / loading ---------------- */

.welcome-card {
    position: relative;
    overflow: hidden;
    margin-top: 12vh;
    padding: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--panel-2), var(--panel) 70%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), var(--shadow-lg), var(--glow-primary);
    animation: rise-in .5s var(--ease-spring) both;
}

.welcome-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(35, 181, 255, .16) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: sheen 2.8s ease-in-out infinite;
}

.welcome-card h1 {
    position: relative;
    margin: .65rem 0 1rem;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff, #b7e4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------- Auth / profile picker ---------------- */

.auth-panel {
    width: min(100%, 48rem);
    margin: 0 auto;
    padding: .5rem 0 2rem;
    animation: rise-in .5s var(--ease-spring) both;
}

.auth-panel header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}

.auth-art {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    height: auto;
    align-self: center;
    filter: drop-shadow(0 1rem 2rem rgba(2, 8, 20, .5));
}

.auth-panel header p { color: var(--muted); max-width: 26rem; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.profile-card {
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(150deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
    color: var(--text);
    cursor: pointer;
    transition: transform .16s var(--ease-spring), border-color .16s ease, box-shadow .16s ease;
}

.profile-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.profile-card:active { transform: scale(.96); }

.profile-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(35, 181, 255, .24), var(--shadow-md), var(--glow-primary);
}

.profile-card strong { font-family: var(--font-display); font-size: var(--step-1); }
.profile-card small { color: var(--muted); font-size: .72rem; }

.player-title {
    display: inline-block;
    margin-top: .1rem;
    padding: .12rem .5rem;
    border: 1px solid rgba(255, 182, 46, .35);
    border-radius: 999px;
    background: rgba(255, 182, 46, .1);
    color: #ffe0a2;
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
}

.profile-hero h2 {
    margin: 0 0 .15rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
}

.profile-hero p { margin: .35rem 0 0; color: var(--muted); font-size: .8rem; }

.wallet-card {
    display: grid;
    gap: .75rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, rgba(21, 42, 79, .9), rgba(15, 28, 58, .95));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
    scroll-margin-top: 5rem;
}

.progress-card, .streak-card { scroll-margin-top: 5rem; }

.wallet-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.wallet-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .2rem .6rem;
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgba(6, 14, 33, .5);
}

.wallet-entry-copy { font-size: .82rem; }
.wallet-entry-deltas { display: inline-flex; gap: .35rem; }
.wallet-entry time { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }

.wallet-delta {
    padding: .1rem .4rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .7rem;
    font-style: normal;
    font-weight: 650;
}

.wallet-delta--xp { color: #bfe6ff; background: rgba(35, 181, 255, .14); }
.wallet-delta--coin { color: #ffe0a2; background: rgba(255, 182, 46, .14); }

.profile-links { display: grid; gap: .55rem; }

.streak-copy small { color: var(--muted); font-size: .66rem; }

/* Push notification opt-in on the profile page. */
.push-card {
    display: grid;
    gap: .6rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, rgba(21, 42, 79, .9), rgba(15, 28, 58, .95));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
}

.push-copy { margin: 0; color: var(--muted); font-size: .82rem; }
.push-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.push-actions > * { flex: 1 1 12rem; }
.push-state { display: inline-flex; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: .78rem; }
.push-note { color: #8bd9ff; font-size: .74rem; }

.pin-form {
    display: grid;
    gap: .85rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(21, 42, 79, .92), rgba(15, 28, 58, .96));
    box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, .06);
}

.pin-form label { font-weight: 650; }
.pin-form small { color: var(--muted); font-size: .8rem; }

.pin-form input {
    width: 100%;
    min-height: 3.6rem;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: rgba(6, 14, 33, .92);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .5em;
    text-align: left;
    padding: 0 1.25rem;
    caret-color: var(--primary);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pin-form input:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(35, 181, 255, .22);
    box-shadow: var(--glow-primary);
}

/* ---------------- Avatars ---------------- */

.hero-avatar, .avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--primary), #175dc8);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 .65rem 1.5rem rgba(2, 8, 20, .4);
}

.hero-avatar img, .avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

.hero-avatar--sm, .avatar--sm { width: 2.6rem; height: 2.6rem; border-radius: .9rem; font-size: 1.1rem; }
.hero-avatar--md, .avatar--md { width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
.hero-avatar--lg, .large-avatar { width: 5.5rem; height: 5.5rem; border-radius: 1.6rem; font-size: 2.3rem; }

/* ---------------- Hero dashboard ---------------- */

.hero-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .9rem;
    padding: .25rem 0;
}

.hero-header h1 {
    margin: .1rem 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -.01em;
}

.hero-header p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .06em;
}

.icon-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .9rem;
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    color: var(--muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform .14s var(--ease-spring), color .18s ease, box-shadow .18s ease;
}

.icon-button:hover { color: var(--primary); box-shadow: var(--glow-primary); }
.icon-button:active { transform: scale(.9); }

.daily-briefing {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid rgba(35, 181, 255, .28);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 90% 35%, rgba(47, 123, 255, .38) 0, transparent 62%),
        linear-gradient(125deg, #14294b, #0c1836);
    box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, .07);
}

.daily-briefing > div { position: relative; z-index: 1; }

.daily-briefing h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.12;
    margin: .7rem 0;
}

.daily-briefing h2 span { color: var(--cyan); }
.daily-briefing p { color: #b4c8d9; font-size: .9rem; max-width: 26rem; margin-bottom: 1.2rem; }
.daily-briefing > img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 1rem 2rem rgba(2, 8, 20, .55)); }

.briefing-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 44px;
    padding: .65rem 1.1rem;
    border-radius: var(--radius-sm);
    color: #06263a;
    background: linear-gradient(120deg, var(--cyan), var(--primary));
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 .5rem 1.4rem rgba(35, 181, 255, .35);
    transition: transform .14s var(--ease-spring), filter .18s ease;
}

.briefing-link:hover { color: #06263a; filter: brightness(1.08); transform: translateY(-1px); }

/* Progress */
.progress-card { padding: 1.15rem; }

.stat-line, .reward-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .6rem;
}

.stat-line strong { color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; }
.stat-line span { color: var(--muted); font-weight: 500; font-size: .8rem; }

.progress-track {
    height: .7rem;
    overflow: hidden;
    margin: .8rem 0;
    border-radius: 999px;
    background: #061426;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}

.progress-track span {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-2), var(--primary) 55%, var(--cyan));
    box-shadow: 0 0 1rem rgba(35, 181, 255, .55);
    transition: width .8s var(--ease-spring);
    animation: xp-fill .9s var(--ease-spring) both;
}

.progress-track span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite;
}

.progress-card small { color: var(--muted); font-weight: 500; }

/* Streak */
.streak-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-color: rgba(255, 122, 60, .38);
    background: linear-gradient(140deg, rgba(255, 122, 60, .14), rgba(255, 182, 46, .07)), linear-gradient(155deg, var(--panel-2), var(--panel));
}

.streak-flame {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 1rem;
    color: var(--accent-2);
    background: radial-gradient(circle at 50% 70%, rgba(255, 122, 60, .35), rgba(255, 182, 46, .08));
    box-shadow: var(--glow-accent);
    animation: flame-flicker 2.4s ease-in-out infinite;
}

.streak-flame .game-icon { width: 1.7rem; height: 1.7rem; }
.streak-copy { display: grid; gap: .15rem; }
.streak-copy strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #ffd76a; line-height: 1; }
.streak-copy span { color: var(--muted); font-size: .76rem; }

.streak-days { display: flex; gap: .3rem; margin-left: auto; }
.streak-day {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .14);
}
.streak-day.on {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(255, 182, 46, .18), var(--glow-accent);
}

/* ---------------- Threat ---------------- */

.threat-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    overflow: hidden;
}

.threat-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .3rem;
    background: var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.threat-card::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 182, 46, .16), transparent 65%);
    pointer-events: none;
}

.threat-card strong { display: block; font-family: var(--font-display); font-size: .95rem; }
.threat-card small { display: block; color: var(--muted); font-size: .74rem; margin-top: .3rem; }

.threat-card.threat-uwaga::before { background: var(--accent); }
.threat-card.threat-niebezpieczenstwo::before,
.threat-card.threat-krytycznie::before { background: var(--danger); }
.threat-card.threat-bezpiecznie::before { background: var(--success); }
.threat-card.threat-stabilnie::before { background: var(--primary); }

.threat-card.threat-uwaga::after { background: radial-gradient(circle, rgba(255, 182, 46, .18), transparent 65%); }
.threat-card.threat-niebezpieczenstwo::after,
.threat-card.threat-krytycznie::after { background: radial-gradient(circle, rgba(255, 92, 122, .2), transparent 65%); }
.threat-card.threat-bezpiecznie::after { background: radial-gradient(circle, rgba(55, 217, 138, .16), transparent 65%); }

.threat-value { color: var(--accent); font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.threat-card.threat-niebezpieczenstwo .threat-value,
.threat-card.threat-krytycznie .threat-value { color: var(--danger); }
.threat-card.threat-bezpiecznie .threat-value { color: var(--success); }
.threat-card.threat-stabilnie .threat-value { color: var(--primary); }

.threat-bezpiecznie { color: var(--success); }
.threat-stabilnie { color: #78d4ff; }
.threat-uwaga { color: var(--accent); }
.threat-niebezpieczeństwo, .threat-niebezpieczenstwo, .threat-krytycznie { color: var(--danger); }

/* The chaos card is a link: it points at the messiest zone. */
a.threat-card { text-decoration: none; color: inherit; cursor: pointer; transition: transform .16s var(--ease-spring), border-color .16s ease, box-shadow .18s ease; }
a.threat-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
a.threat-card:focus-visible { outline: 3px solid rgba(35, 181, 255, .28); outline-offset: 2px; }

.threat-value { display: inline-flex; align-items: center; gap: .4rem; }
.threat-value .game-icon { width: 1.3rem; height: 1.3rem; }

/* Hero header stat line: level, XP, streak and coins right under the name. */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .85rem;
    margin: .4rem 0 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
}

.hero-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.hero-meta .game-icon { width: 1rem; height: 1rem; }
.hero-meta span:nth-child(1) .game-icon { color: var(--primary); }
.hero-meta span:nth-child(2) .game-icon { color: var(--cyan); }
.hero-meta span:nth-child(3) .game-icon { color: var(--accent-2); }
.hero-meta span:nth-child(4) .game-icon { color: var(--accent); }

.progress-track--slim { height: .4rem; max-width: 22rem; margin: .5rem 0 0; }

/* ---------------- Mission control link ---------------- */

.mission-control-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 182, 46, .42);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 182, 46, .16), rgba(255, 122, 60, .12));
    color: #ffcf68;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .85rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .1);
    transition: transform .14s var(--ease-spring), box-shadow .18s ease, filter .18s ease;
}

.mission-control-link:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: var(--shadow-md), var(--glow-accent); }
.mission-control-link:active { transform: scale(.97); }

/* ---------------- Admin approvals ---------------- */

.admin-links { display: grid; gap: .75rem; }

.approvals-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(35, 181, 255, .4);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(35, 181, 255, .14), rgba(47, 123, 255, .1));
    color: #8bd9ff;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .85rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .08);
    transition: transform .14s var(--ease-spring), filter .18s ease, box-shadow .18s ease;
}

.approvals-link:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: var(--shadow-md), var(--glow-primary); }
.approvals-link:active { transform: scale(.97); }
.approvals-link .count-badge { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #2a1600; box-shadow: 0 0 0 2px rgba(8, 16, 36, .8); }

.approval-grid { display: grid; gap: 1rem; }

.approval-card {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(155deg, var(--panel-2), var(--panel) 80%);
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
}

.approval-card h3 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; }
.approval-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.approval-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.approval-actions .primary-button, .approval-actions .secondary-button { min-height: 42px; padding: .55rem .9rem; font-size: .76rem; }

/* ---------------- Missions ---------------- */

.missions-section h2 {
    margin: 1.1rem 0 .6rem;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 650;
}

.mission-grid { display: grid; gap: 1rem; }

.mission-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: 1.25rem;
    overflow: hidden;
    transition: transform .16s var(--ease-spring), border-color .16s ease, box-shadow .18s ease;
}

.mission-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.mission-card::before {
    content: "";
    position: absolute;
    top: 1.3rem;
    left: 0;
    width: 3px;
    height: 2.1rem;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--primary), var(--primary-2));
}

.mission-card.available-card::before { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

.mission-card h3, .mission-card h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; line-height: 1.3; }
.mission-card p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.55; }

.mission-topline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }

.zone-tag {
    max-width: 100%;
    padding: .28rem .65rem;
    border-radius: 999px;
    background: rgba(35, 181, 255, .13);
    border: 1px solid rgba(35, 181, 255, .28);
    color: #8bd9ff;
    font-size: .64rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mission-details { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .72rem; color: var(--muted); }
.mission-details .game-icon { width: 1rem; height: 1rem; margin-right: .2rem; }

.boss-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .5rem;
    border: 1px solid rgba(255, 92, 122, .34);
    border-radius: .5rem;
    background: rgba(255, 92, 122, .14);
    color: #ffb3bf;
    font-weight: 650;
}

.boss-chip .game-icon { width: .95rem; height: .95rem; margin-right: 0; color: var(--danger); }

.mission-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .65rem;
    border-top: 1px solid var(--line);
    padding-top: .85rem;
}

.reward-row { justify-content: flex-start; flex-wrap: wrap; gap: .45rem; font-size: .74rem; }

.reward-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .55rem;
    border-radius: .55rem;
    font-family: var(--font-display);
    font-weight: 600;
}

.reward-chip .game-icon { width: 1rem; height: 1rem; }
.reward-chip--xp { color: #9be8d4; background: rgba(105, 223, 196, .1); }
.reward-chip--coin { color: #f4ce8d; background: rgba(247, 195, 103, .1); }

/* Difficulty tiers */
.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .24rem .6rem;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .04em;
    border: 1px solid transparent;
}

.difficulty-stars { letter-spacing: .05em; }
.difficulty-tiny { color: #9fe8c8; background: rgba(55, 217, 138, .12); border-color: rgba(55, 217, 138, .3); }
.difficulty-easy { color: #8bd9ff; background: rgba(35, 181, 255, .12); border-color: rgba(35, 181, 255, .3); }
.difficulty-medium { color: #ffcf68; background: rgba(255, 182, 46, .12); border-color: rgba(255, 182, 46, .3); }
.difficulty-hard { color: #ffb27a; background: rgba(255, 122, 60, .13); border-color: rgba(255, 122, 60, .32); }
.difficulty-epic { color: #e4a6ff; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .4); box-shadow: 0 0 1rem rgba(139, 92, 246, .22); }

/* Status pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: max-content;
    max-width: 100%;
    padding: .26rem .6rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .02em;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
}

.status-pill .game-icon { width: .95rem; height: .95rem; }
.status-available { color: #ffcf68; background: rgba(255, 182, 46, .12); border-color: rgba(255, 182, 46, .3); }
.status-assigned, .status-claimed { color: #8bd9ff; background: rgba(35, 181, 255, .12); border-color: rgba(35, 181, 255, .3); }
.status-pending { color: #ffb27a; background: rgba(255, 122, 60, .14); border-color: rgba(255, 122, 60, .34); }
.status-completed { color: #7df0aa; background: rgba(55, 217, 138, .12); border-color: rgba(55, 217, 138, .3); }
.status-expired, .status-cancelled { color: #ff9ba6; background: rgba(255, 92, 122, .12); border-color: rgba(255, 92, 122, .3); }

/* Participation tags: who a mission is for. */
.part-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.part-tag .game-icon { width: .9rem; height: .9rem; }
.part-tag--solo { color: #b9c8dc; background: rgba(148, 176, 214, .12); border-color: rgba(148, 176, 214, .28); }
.part-tag--pair { color: #8bd9ff; background: rgba(35, 181, 255, .12); border-color: rgba(35, 181, 255, .3); }
.part-tag--team { color: #c7b6ff; background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .34); }
.part-tag--pool { color: #ffd76a; background: rgba(255, 197, 61, .13); border-color: rgba(255, 197, 61, .34); }
.part-tag--boss { color: #ffb3bf; background: rgba(255, 92, 122, .14); border-color: rgba(255, 92, 122, .34); }
.detail-overdue { color: #ffb3bf; font-weight: 650; }

/* Tab strip at the top of the mission hub. */
.tab-row {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: .95rem;
    background: #0c192c;
}

.tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-display);
    font-weight: 650;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .12s var(--ease-spring);
}

.tab-button .game-icon { width: 1rem; height: 1rem; }

.tab-button:active { transform: scale(.95); }

.tab-button.active {
    background: linear-gradient(135deg, rgba(35, 181, 255, .3), rgba(47, 123, 255, .22));
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 .3rem .9rem rgba(35, 181, 255, .22);
}

.tab-count {
    min-width: 1.35rem;
    padding: .05rem .3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #eaf6ff;
    font-size: .68rem;
    text-align: center;
}

.mission-card .primary-button, .mission-card .secondary-button { width: 100%; }

/* ---------------- Empty states ---------------- */

.empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-weight: 500;
    border-style: dashed;
    background: rgba(21, 42, 79, .55);
    box-shadow: none;
}

.empty-state > .game-icon { width: 2.4rem; height: 2.4rem; color: var(--primary); margin-bottom: .8rem; filter: drop-shadow(0 0 1rem rgba(35, 181, 255, .5)); }
.empty-state h1, .empty-state h2, .empty-state h3 { color: var(--text); font-family: var(--font-display); font-size: var(--step-1); margin: .3rem 0; }
.empty-state p { font-size: .86rem; margin: .5rem 0; }
.empty-state a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 650; }

/* ---------------- Tabs ---------------- */

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: max-content;
    max-width: 100%;
    padding: .45rem .75rem;
    border: 1px solid rgba(35, 181, 255, .3);
    border-radius: 999px;
    background: rgba(35, 181, 255, .1);
    color: #8bd9ff;
    font-size: .78rem;
    font-weight: 600;
}

.filter-chip .game-icon { width: 1rem; height: 1rem; }
.filter-chip strong { color: #fff; }

.filter-clear {
    border: 0;
    padding: .1rem .2rem;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.filter-clear:hover { color: #fff; }

/* ---------------- Map / zones ---------------- */

.zone-grid { display: grid; gap: .85rem; }

.zone-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: 1.15rem;
    overflow: hidden;
    transition: transform .16s var(--ease-spring), border-color .16s ease, box-shadow .18s ease;
}

.zone-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

a.zone-card { text-decoration: none; color: inherit; cursor: pointer; }

.zone-percent .game-icon { display: block; margin: .4rem 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--primary); }

.zone-card h2 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; }
.zone-card strong { overflow-wrap: anywhere; }

.zone-icon {
    width: 3.1rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(35, 181, 255, .2), rgba(47, 123, 255, .12));
    border: 1px solid rgba(35, 181, 255, .25);
    box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

.zone-icon img { width: 1.7rem; height: 1.7rem; }

.zone-percent { text-align: right; color: #d2e1ef; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.zone-percent small { display: block; color: var(--muted); font-size: .62rem; font-weight: 500; }

.zone-bar {
    height: .45rem;
    margin-top: .45rem;
    max-width: none;
    overflow: hidden;
    border-radius: 999px;
    background: #061426;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}

.zone-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-2), var(--primary), var(--cyan));
    transition: width .8s var(--ease-spring);
}

.zone-bezpiecznie .zone-bar span { background: linear-gradient(90deg, #1f9d68, var(--success)); }
.zone-stabilnie .zone-bar span { background: linear-gradient(90deg, var(--primary-2), var(--primary)); }
.zone-uwaga .zone-bar span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.zone-niebezpieczeństwo .zone-bar span, .zone-krytycznie .zone-bar span { background: linear-gradient(90deg, #ff3d63, var(--danger)); }

.zone-card.zone-krytycznie, .zone-card.zone-niebezpieczeństwo { border-color: rgba(255, 92, 122, .4); }
.zone-card.zone-krytycznie::after, .zone-card.zone-niebezpieczeństwo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 6rem;
    height: 6rem;
    margin-top: -3rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 92, 122, .22), transparent 65%);
    pointer-events: none;
    animation: hotspot-pulse 2.2s ease-in-out infinite;
}

.zone-card.zone-krytycznie .zone-icon { border-color: rgba(255, 92, 122, .45); box-shadow: 0 0 1.4rem rgba(255, 92, 122, .3); }

/* ---------------- Heroes / leaderboard ---------------- */

.profile-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(47, 123, 255, .35), transparent 65%), linear-gradient(155deg, var(--panel-2), var(--panel) 80%);
}

.profile-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% -30%, rgba(35, 181, 255, .22), transparent 60%);
}

.profile-hero > * { position: relative; }

.profile-hero .hero-avatar { margin: 0 auto .6rem; }

.profile-hero h2 { margin: .2rem 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; }
.profile-hero > span { color: var(--muted); font-weight: 650; letter-spacing: .06em; }
.profile-hero .progress-track { margin: 1rem 0; }

/* The team page reuses .profile-hero but needs a stacked, centred card instead of the profile row. */
.profile-hero--summary { display: block; }
.profile-hero--summary .hero-stats { width: 100%; }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }

.stat-tile {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: .85rem .4rem;
    border-radius: var(--radius-sm);
    background: rgba(10, 25, 40, .45);
    text-align: center;
}

.stat-tile strong { color: var(--accent); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.stat-tile span { color: var(--muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }

.leaderboard { overflow: hidden; padding: .4rem 0; }

.leader-row {
    display: grid;
    grid-template-columns: 1.9rem 2.75rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(104, 190, 255, .1);
    transition: background .15s ease;
}

.leader-row:last-child { border-bottom: 0; }
.leader-row:hover { background: rgba(35, 181, 255, .05); }

.leader-row > span { color: var(--accent); font-family: var(--font-display); font-weight: 700; }
.leader-row > strong { overflow-wrap: anywhere; font-size: .92rem; font-weight: 650; }

.leader-player { display: grid; gap: .05rem; min-width: 0; }
.leader-player strong { overflow-wrap: anywhere; font-size: .92rem; font-weight: 650; }
.leader-player span { color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .04em; }
.leader-row b { color: #78d4ff; font-family: var(--font-display); font-weight: 650; font-size: .85rem; }

.leader-row.top-one { background: linear-gradient(90deg, rgba(255, 182, 46, .14), transparent 72%); border-bottom-color: rgba(255, 182, 46, .28); }
.leader-row.top-one > span { color: #ffd76a; text-shadow: 0 0 1rem rgba(255, 182, 46, .7); }
.leader-row.top-two > span { color: #d5e2f7; }
.leader-row.top-three > span { color: #e0a26b; }

.leader-row.last-place { background: linear-gradient(90deg, rgba(255, 92, 122, .1), transparent 72%); }
.leader-row.last-place > span { color: #ffb3bf; }
.leader-row.last-place b { color: var(--muted); }
.leader-row.last-place .game-icon { width: 1.35rem; height: 1.35rem; }

/* ---------------- Team chronicle ---------------- */

.period-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.summary-grid { display: grid; gap: .9rem; }

.summary-card { display: grid; gap: .6rem; padding: 1rem 1.1rem; }

.summary-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.summary-head strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.summary-totals { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }

.summary-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.summary-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .55rem;
    align-items: center;
    padding: .45rem .1rem;
    border-top: 1px solid rgba(104, 190, 255, .1);
    font-size: .84rem;
}

.summary-item:first-child { border-top: 0; }
.summary-item > span:nth-child(2) { overflow-wrap: anywhere; }
.summary-item time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-item .status-pill { font-size: .62rem; padding: .2rem .45rem; }

.summary-empty { color: var(--muted); font-size: .82rem; }

@media (max-width: 420px) {
    .summary-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .summary-item .status-pill { display: none; }
}

.coming-soon {
    padding: 1.3rem;
    color: #ffcf68;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: .08em;
    border: 1px dashed rgba(255, 182, 46, .4);
    background: rgba(255, 182, 46, .06);
}

.coming-soon small { display: block; margin-top: .3rem; color: var(--muted); font-family: var(--font-body); font-weight: 400; letter-spacing: .02em; }

/* ---------------- Rewards ---------------- */

.wallet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-color: rgba(255, 182, 46, .34);
    background: linear-gradient(110deg, rgba(255, 182, 46, .14), rgba(15, 28, 58, .7)), linear-gradient(155deg, var(--panel-2), var(--panel));
}

.wallet-card strong { display: flex; align-items: center; gap: .5rem; color: #ffe0a2; font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; }
.wallet-card strong .game-icon { width: 1.8rem; height: 1.8rem; color: var(--accent); }
.wallet-card strong small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.wallet-card a:not(.briefing-link) { display: inline-flex; align-items: center; min-height: 44px; color: #ffde9a; font-size: .8rem; font-weight: 650; text-decoration: none; }

.reward-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.reward-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto auto auto;
    gap: .7rem;
    padding: 1.2rem;
    overflow: hidden;
    transition: transform .16s var(--ease-spring), border-color .16s ease, box-shadow .18s ease;
}

.reward-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.reward-card > .reward-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 6rem;
    border-radius: var(--radius-sm);
    background: radial-gradient(ellipse at center, rgba(255, 182, 46, .22), rgba(21, 42, 79, .9) 75%);
}

.reward-card > .reward-art img { width: 3.4rem; height: 3.4rem; filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .35)); }
.reward-card h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; }
.reward-card p { margin: 0; color: var(--muted); font-size: .85rem; }
.reward-card strong { display: inline-flex; align-items: center; gap: .35rem; color: #f6d593; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.reward-card strong .game-icon { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.reward-card strong span { font-family: var(--font-body); font-size: .72rem; font-weight: 500; color: var(--muted); }
.reward-note { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.reward-card .primary-button { min-height: 46px; font-size: .74rem; }
.reward-card .primary-button:disabled { background: var(--panel-3); color: var(--muted); box-shadow: none; opacity: 1; }

/* ---------------- Achievements / badges ---------------- */

.badge-summary {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255, 182, 46, .34);
    border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(255, 182, 46, .12), rgba(15, 28, 58, .7)), linear-gradient(155deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
}

.badge-summary-art {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 1.1rem;
    color: var(--accent);
    background: radial-gradient(circle at 50% 70%, rgba(255, 182, 46, .3), rgba(255, 182, 46, .06));
    box-shadow: var(--glow-accent);
}

.badge-summary-art .game-icon { width: 1.9rem; height: 1.9rem; }
.badge-summary strong { display: block; margin: .15rem 0 .4rem; color: #ffe0a2; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.badge-summary strong small { color: var(--muted); font-size: .9rem; font-weight: 500; }
.badge-hint { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; }

.badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.badge-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: 1.4rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .06);
    text-align: center;
    transition: transform .16s var(--ease-spring), box-shadow .18s ease, border-color .16s ease;
}

.badge-card:hover { transform: translateY(-2px); }

.badge-medal {
    width: 4.2rem;
    height: 4.2rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
}

.badge-medal .game-icon { width: 2rem; height: 2rem; }
.badge-card h2 { margin: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; }
.badge-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.badge-state { margin-top: .2rem; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.badge-card.earned { border-color: rgba(255, 182, 46, .4); box-shadow: var(--shadow-md), 0 0 1.6rem rgba(255, 182, 46, .18); }
.badge-card.earned .badge-medal { border-color: transparent; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #2a1600; box-shadow: var(--glow-accent); }
.badge-card.earned .badge-state { color: var(--accent); }
.badge-card.locked { opacity: .72; }
.badge-card.locked .badge-medal { opacity: .5; }
.badge-card.is-new { animation: badge-pop .5s var(--ease-pop) both; }

.badge-ribbon {
    position: absolute;
    top: .7rem;
    right: .7rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--success), #1f9d68);
    color: #04231a;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: 0 0 1rem rgba(55, 217, 138, .5);
}

@media (min-width: 700px) {
    .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------- Boss ---------------- */

.boss-card {
    position: relative;
    min-height: 12rem;
    padding: 1.5rem 10rem 1.5rem 1.5rem;
    overflow: hidden;
    border-color: rgba(255, 92, 61, .5);
    background:
        radial-gradient(ellipse at right, rgba(255, 92, 61, .32), transparent 62%),
        linear-gradient(155deg, #1c2f4e, #14203c);
    box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, .08);
}

.boss-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, rgba(255, 92, 61, .06) 0 10px, transparent 10px 20px);
    mask-image: radial-gradient(80% 80% at 85% 30%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 80% at 85% 30%, #000, transparent 75%);
}

.boss-art {
    position: absolute;
    top: 1.2rem;
    right: .25rem;
    width: 9rem;
    height: 9rem;
    filter: drop-shadow(0 .5rem 1.2rem rgba(0, 0, 0, .5));
    pointer-events: none;
    animation: boss-breathe 3.4s ease-in-out infinite;
}

.boss-card h2 { position: relative; margin: .4rem 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; text-transform: uppercase; }
.boss-card p { position: relative; max-width: none; color: #b7c8d8; font-size: .86rem; }
.boss-card .eyebrow { color: #ffcc8d; }
.boss-card strong { color: #ffd76a; font-family: var(--font-display); font-weight: 650; letter-spacing: .04em; }

.boss-bar {
    position: relative;
    height: .95rem;
    margin: .8rem 0 .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: #061426;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}

.boss-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff3d63, #ff7a3c 55%, var(--accent));
    box-shadow: 0 0 1rem rgba(255, 110, 80, .6);
    transition: width .8s var(--ease-spring);
    animation: xp-fill .9s var(--ease-spring) both;
}

.boss-card.boss-critical { border-color: var(--danger); animation: boss-shake .5s var(--ease-spring); }
.boss-card.boss-critical .boss-bar span { background: linear-gradient(90deg, var(--danger), #ff2d55); }
.boss-hp-line { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; position: relative; }
.boss-hp-line em { color: var(--danger); font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .1em; }

.boss-card.boss-defeated {
    border-color: rgba(55, 217, 138, .55);
    background: radial-gradient(ellipse at right, rgba(55, 217, 138, .24), transparent 62%), linear-gradient(155deg, #16302f, #10202c);
}

.boss-card.boss-defeated .boss-art { animation: none; filter: grayscale(.35) drop-shadow(0 .5rem 1.2rem rgba(0, 0, 0, .5)); opacity: .7; }
.boss-card.boss-defeated .boss-bar span { background: linear-gradient(90deg, #1f9d68, var(--success)); box-shadow: 0 0 1rem rgba(55, 217, 138, .5); }
.boss-defeated-label { color: var(--success); font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }

/* ---------------- Completion overlay ---------------- */

.completion-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 10, 21, .88);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    animation: overlay-in .25s ease-out;
}

.completion-burst {
    position: relative;
    width: min(100%, 28rem);
    padding: 2rem;
    overflow: hidden;
    border: 2px solid var(--primary);
    border-radius: 2rem;
    background: radial-gradient(circle at 50% 0, #2b5a8f, #0a1d34 65%), var(--panel);
    text-align: center;
    box-shadow: 0 0 4rem rgba(35, 181, 255, .35), var(--shadow-lg);
    animation: reward-in .45s var(--ease-pop) both;
}

.completion-burst::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 18% 85%, rgba(35, 181, 255, .2), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(255, 182, 46, .18), transparent 45%);
}

.completion-burst h2 {
    position: relative;
    margin: .6rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff, #b7e4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.completion-burst p { position: relative; color: var(--muted); }
.completion-burst .primary-button { position: relative; width: 100%; margin-top: .5rem; }

.completion-rewards {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
}

.completion-rewards .reward-chip { font-size: 1.05rem; padding: .5rem .85rem; }

.completion-burst--levelup {
    border-color: var(--accent);
    background: radial-gradient(circle at 50% 0, #6b4a12, #1a1226 68%), var(--panel);
    box-shadow: 0 0 5rem rgba(255, 182, 46, .45), var(--shadow-lg);
}

.completion-burst--levelup h2 { background: linear-gradient(180deg, #fff, #ffe08a); -webkit-background-clip: text; background-clip: text; }
.completion-burst--pending { border-color: var(--accent-2); box-shadow: 0 0 4rem rgba(255, 122, 60, .3), var(--shadow-lg); }
.completion-burst--pending h2 { background: linear-gradient(180deg, #fff, #ffc79a); -webkit-background-clip: text; background-clip: text; }

.completion-burst--boss {
    border-color: var(--success);
    background: radial-gradient(circle at 50% 0, #14513f, #0a1d2a 68%), var(--panel);
    box-shadow: 0 0 5rem rgba(55, 217, 138, .4), var(--shadow-lg);
}

.completion-burst--boss h2 { background: linear-gradient(180deg, #fff, #9ff0c4); -webkit-background-clip: text; background-clip: text; }

.boss-defeat-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .2rem auto .4rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--success), #1f9d68);
    color: #04231a;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: 0 0 2rem rgba(55, 217, 138, .5);
    animation: pop-in .5s .15s var(--ease-pop) both;
}

.boss-defeat-badge .game-icon { width: 1.2rem; height: 1.2rem; }

.level-up-badge {
    position: relative;
    display: inline-grid;
    place-items: center;
    margin: .2rem auto .4rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #2a1600;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .08em;
    box-shadow: var(--glow-accent);
    animation: pop-in .5s .15s var(--ease-pop) both;
}

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
    position: absolute;
    top: -1rem;
    left: var(--x, 50%);
    width: .55rem;
    height: .8rem;
    border-radius: 2px;
    background: var(--c, var(--accent));
    opacity: .95;
    animation: confetti-fall var(--d, 1.6s) var(--delay, 0s) linear both;
}

/* ---------------- Admin / mission form ---------------- */

.admin-page h1 {
    margin: .5rem 0 1.1rem;
    font-family: var(--font-display);
    font-size: var(--step-3);
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff, #b7e4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .5rem; color: var(--muted); text-decoration: none; font-weight: 650; }
.back-link:hover { color: var(--primary); }

.admin-hero { margin-bottom: 1.25rem; }

.admin-hero h1 {
    margin: .4rem 0 .5rem;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    text-transform: none;
    background: linear-gradient(180deg, #fff, #b7e4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-hero p { margin: 0; max-width: 40rem; color: var(--muted); }

.form-section { display: grid; gap: .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: 0; padding-bottom: 0; }

.form-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
}

.form-section-title .game-icon { width: 1.25rem; height: 1.25rem; color: var(--primary); }

.mission-form {
    max-width: 44rem;
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, .06);
}

.mission-form label { display: grid; gap: .4rem; font-weight: 650; }

.mission-form input, .mission-form textarea, .mission-form select {
    width: 100%;
    min-height: 3rem;
    padding: .75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(6, 14, 33, .9);
    color: #fff;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mission-form input:focus, .mission-form textarea:focus, .mission-form select:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(35, 181, 255, .2);
}

.mission-form textarea { resize: vertical; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.form-row > * { min-width: 0; }

.form-hint { color: var(--muted); font-size: .78rem; line-height: 1.45; }

.mission-form .checkbox-label { grid-template-columns: auto 1fr; align-items: center; }
.mission-form .checkbox-label input { width: 1.5rem; min-height: 1.5rem; accent-color: var(--primary); }

/* Admin library editors */

.editor-panel { margin-bottom: 1.5rem; }

.assignee-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.assignee-picker label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-weight: 650;
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .14s var(--ease-spring);
}
.assignee-picker label:hover { border-color: var(--line-strong); }
.assignee-picker label:has(input:checked) { border-color: var(--primary); background: rgba(35, 181, 255, .14); color: #8bd9ff; }
.assignee-picker input { width: 1.35rem; min-height: 1.35rem; accent-color: var(--primary); }

.day-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.day-chip-row label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    padding: .45rem .5rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: rgba(255, 255, 255, .03);
    font-weight: 650;
    font-size: .74rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.day-chip-row label:hover { border-color: var(--line-strong); }
.day-chip-row label:has(input:checked) { border-color: var(--primary); background: rgba(35, 181, 255, .14); color: #8bd9ff; }
.day-chip-row input { position: absolute; width: 0; height: 0; opacity: 0; }

.reward-preview img { width: 3.4rem; height: 3.4rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

.library-inactive { opacity: .62; }

.waiting-note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
}

.waiting-note .game-icon { width: 1rem; height: 1rem; color: var(--accent); }

/* ---------------- Messages, toasts, skeletons ---------------- */

.form-error {
    margin-top: .8rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 92, 122, .38);
    border-radius: var(--radius-sm);
    background: rgba(179, 33, 50, .24);
    color: #ff9ba6;
    box-shadow: var(--shadow-sm);
    font-size: .88rem;
}

.form-error a { display: inline-flex; align-items: center; min-height: 44px; margin: .2rem .4rem; }
.form-error .secondary-button { display: flex; margin-top: .5rem; }

.success-message {
    padding: .9rem 1rem;
    border: 1px solid rgba(55, 217, 138, .38);
    border-radius: var(--radius-sm);
    background: rgba(55, 217, 138, .14);
    color: #7df0aa;
    font-weight: 600;
    font-size: .88rem;
}

.toast-region {
    position: fixed;
    z-index: 90;
    top: max(1rem, env(safe-area-inset-top));
    right: 1rem;
    left: 1rem;
    display: grid;
    gap: .5rem;
    justify-items: center;
    pointer-events: none;
}

.toast {
    width: min(100%, 30rem);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: rgba(15, 28, 58, .96);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    font-size: .88rem;
    animation: toast-in .35s var(--ease-pop) both;
}

.toast .game-icon { width: 1.2rem; height: 1.2rem; }
.toast--success { border-color: rgba(55, 217, 138, .45); color: #7df0aa; }
.toast--success .game-icon { color: var(--success); }
.toast--error { border-color: rgba(255, 92, 122, .45); color: #ff9ba6; }
.toast--error .game-icon { color: var(--danger); }

.skeleton { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
}

.skeleton-line { height: .9rem; border-radius: .5rem; background: rgba(255, 255, 255, .08); }
.skeleton-line.short { width: 45%; }
.skeleton-line.medium { width: 70%; }
.skeleton-block { height: 4.5rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); }
.skeleton-card { display: grid; gap: .75rem; padding: 1.25rem; }
.skeleton-grid { display: grid; gap: 1rem; }

/* ---------------- Validation & errors ---------------- */

.valid.modified:not([type=checkbox]) { outline: 2px solid var(--success); }
.invalid, .validation-message { color: #ff6673; }

#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 1000;
    right: .75rem;
    bottom: calc(6.5rem + env(safe-area-inset-bottom));
    left: .75rem;
    padding: 1rem 2.75rem 1rem 1rem;
    border-radius: var(--radius-sm);
    background: #b32132;
    color: #fff;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .4);
}

#blazor-error-ui .dismiss { position: absolute; top: .6rem; right: .85rem; cursor: pointer; }

.blazor-error-boundary { padding: 1rem; border-radius: var(--radius-sm); background: #b32132; color: #fff; }
.blazor-error-boundary::after { content: "Wystąpił błąd."; }

/* ---------------- Loading screen ---------------- */

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto;
    margin: auto;
    filter: drop-shadow(0 0 1.5rem rgba(35, 181, 255, .45));
}

.loading-progress circle {
    fill: none;
    stroke: #17395e;
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Ładowanie"); }

/* ---------------- Keyframes ---------------- */

@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes sheen {
    0% { transform: translateX(-100%); }
    55% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

@keyframes xp-fill {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

@keyframes badge-pop {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hotspot-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes flame-flicker {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-2px) scale(1.06); filter: brightness(1.15); }
}

@keyframes boss-breathe {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-6px) rotate(-1.5deg); }
}

@keyframes boss-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

@keyframes overlay-in {
    from { opacity: 0; }
}

@keyframes reward-in {
    from { opacity: 0; transform: scale(.78); }
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0) rotate(-30deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes confetti-fall {
    0% { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--drift, 0px), 22rem, 0) rotate(720deg); }
}

/* ---------------- Responsive ---------------- */

@media (min-width: 700px) {
    .mission-grid, .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reward-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-links, .approval-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-dashboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero-dashboard > * { grid-column: 1 / -1; }
    .hero-dashboard > .progress-card, .hero-dashboard > .threat-card, .hero-dashboard > .streak-card { grid-column: auto; }
    .hero-dashboard > .streak-card { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
    .app-shell { padding-left: 12rem; padding-right: 2rem; }
    .bottom-nav {
        left: 1.25rem;
        top: 7rem;
        bottom: auto;
        width: 9.5rem;
        transform: none;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        padding: .5rem;
    }
    .bottom-nav > a { display: flex; justify-content: flex-start; gap: .85rem; padding: .8rem; font-size: .8rem; }
    .bottom-nav a.active { justify-content: flex-start; }
    .nav-badge { top: 50%; right: .7rem; margin-top: -.6rem; }
}

@media (max-width: 480px) {
    .app-topbar { margin-bottom: 1.4rem; }
    .topbar-caption { display: none; }
    .hud-cluster { display: none; }
    .daily-briefing { grid-template-columns: 1fr; padding: 1.4rem; }
    .daily-briefing > img { position: absolute; right: -3.5rem; top: -.7rem; width: 15rem; opacity: .25; }
    .daily-briefing h2 { max-width: 16rem; }
    .daily-briefing p { max-width: 19rem; }
    .auth-panel header { grid-template-columns: minmax(0, 1fr); gap: .35rem; text-align: center; }
    .auth-art { grid-column: 1; grid-row: auto; width: min(15rem, 68%); margin: 0 auto .6rem; }
    .auth-panel h1 { font-size: 2.1rem; }
    .reward-card { padding: .9rem; }
    .profile-hero { padding: 1.4rem 1rem; }
    .stat-tile { padding: .7rem .3rem; }
    .stat-tile span { letter-spacing: .02em; }
    .boss-card { padding: 1.2rem; padding-top: 7rem; }
    .boss-art { width: 7rem; height: 7rem; top: -.25rem; right: 1rem; }
    .wallet-card { flex-direction: column; align-items: stretch; padding: 1rem; }
    .form-row { grid-template-columns: 1fr; }
    .zone-card { gap: .6rem; padding: 1rem; }
    .hero-header > div:nth-child(2) { min-width: 0; }
    .hero-header h1 { overflow-wrap: anywhere; }
    .hero-stats { gap: .4rem; }
    .stat-tile strong { font-size: 1rem; }
    .streak-days { display: none; }
}

/* ---------------- Mission hub ---------------- */

/* The Boss tab is a link to its own screen, styled like the tabs beside it. */
.tab-button--link { color: #ffcc8d; }
.tab-button--link:hover { color: #fff; }

.hub-tools { display: flex; justify-content: flex-end; }

.link-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .2rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    cursor: pointer;
}

.link-button:hover { color: #fff; }
.link-button[disabled] { opacity: .5; cursor: default; }
.link-button .game-icon { width: .95rem; height: .95rem; }

.section-hint { margin: -.2rem 0 .1rem; color: var(--muted); font-size: .8rem; }

/* ---------------- Map sections ---------------- */

.map-section { display: grid; gap: .55rem; }
.map-section .zone-grid { margin-top: .1rem; }

/* ---------------- Boss list on the dashboard ---------------- */

.boss-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.boss-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem .75rem;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: #0c192c;
}

.boss-list-item strong { display: block; font-family: var(--font-display); font-size: .9rem; color: #ffd76a; }
.boss-list-item small { color: var(--muted); font-size: .72rem; }
.boss-list-item .boss-bar { grid-column: 1 / -1; height: .6rem; margin: 0; }
.boss-list-item.boss-critical { border-color: rgba(255, 92, 122, .5); }
.boss-list-item.boss-critical .boss-bar span { background: linear-gradient(90deg, var(--danger), #ff2d55); }
.boss-list-item.boss-defeated { border-color: rgba(55, 217, 138, .5); }
.boss-list-item.boss-defeated .boss-bar span { background: linear-gradient(90deg, #1f9d68, var(--success)); box-shadow: 0 0 1rem rgba(55, 217, 138, .5); }

.boss-hp-inline { font-family: var(--font-display); font-size: .76rem; color: #ffd76a; white-space: nowrap; }

/* ---------------- All-tasks editor ---------------- */

.bulk-filters {
    display: grid;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #0c192c;
}

.bulk-filters label {
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 650;
}

.bulk-filters input[type="search"],
.bulk-filters select {
    min-height: 44px;
    padding: .5rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: .7rem;
    background: #081426;
    color: var(--text);
    font: inherit;
    font-size: .86rem;
}

.bulk-toggles { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }

.bulk-list { display: grid; gap: .6rem; }

.bulk-row {
    display: grid;
    gap: .55rem;
    padding: .75rem .8rem;
    border: 1px solid var(--line);
    border-radius: .95rem;
    background: #0c192c;
}

.bulk-row--dirty { border-color: rgba(255, 197, 61, .55); box-shadow: inset 0 0 0 1px rgba(255, 197, 61, .18); }
.bulk-row--off { opacity: .62; }

.bulk-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.bulk-name {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: .45rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: .7rem;
    background: #081426;
    color: var(--text);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 650;
}

.bulk-active { white-space: nowrap; }

.bulk-row-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bulk-row-grid label {
    display: grid;
    gap: .2rem;
    min-width: 0;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 650;
}

.bulk-row-grid select,
.bulk-row-grid input {
    min-width: 0;
    min-height: 44px;
    padding: .45rem .55rem;
    border: 1px solid var(--line-strong);
    border-radius: .7rem;
    background: #081426;
    color: var(--text);
    font: inherit;
    font-size: .84rem;
}

.bulk-row-actions { display: flex; justify-content: flex-end; }

.form-hint--warn { color: var(--accent); }

.bulk-savebar {
    position: fixed;
    z-index: 25;
    left: 50%;
    bottom: calc(5.1rem + env(safe-area-inset-bottom));
    width: min(calc(100% - 1.5rem), 38rem);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: 1.2rem;
    background: rgba(8, 16, 36, .94);
    backdrop-filter: blur(1.2rem);
    -webkit-backdrop-filter: blur(1.2rem);
    box-shadow: var(--shadow-lg);
}

.bulk-savebar-count {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 650;
}

.bulk-savebar .primary-button,
.bulk-savebar .secondary-button { width: auto; padding: 0 .9rem; }

/* Room for the fixed save bar above the bottom navigation. */
.admin-page--bulk { padding-bottom: 9rem; }

@media (max-width: 480px) {
    .bulk-row-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}