/* ============================================================
   TPRRPG Design System — tpr.css
   Tokens, backgrounds, nav/footer shell, component classes.
   Does NOT use body[data-page="…"] rules — page-specific
   styles use scoped .tpr-* component classes instead.
   ============================================================ */

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Restore normal document flow (old theme locked overflow:hidden) */
    overflow-x: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    padding-top: 68px; /* clear fixed navbar */
    min-height: 100vh;
    transition: background .4s ease;
    color: var(--bs-body-color);
}

img {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

/* --- Body backgrounds -------------------------------------- */
html[data-bs-theme="dark"] body {
    background:
        radial-gradient(1100px 560px at 82% -12%, rgba(124,77,255,.20), transparent 60%),
        radial-gradient(900px 520px at -4% 6%,   rgba(34,211,238,.15), transparent 55%),
        radial-gradient(700px 500px at 50% 120%, rgba(236,72,153,.12), transparent 60%),
        #080b14;
}

html[data-bs-theme="light"] body {
    background:
        radial-gradient(1000px 600px at 85% -12%, rgba(124,77,255,.10), transparent 60%),
        radial-gradient(800px  520px at -5%  4%,  rgba(6,182,212,.12),  transparent 55%),
        #eef1f8;
}

/* --- Pokéball watermark (re-homed from dead #sidebar) ------- */
/* Faint rotated Pokéball silhouette fixed in bottom-right.     */
/* Gated to dark theme only so light mode stays clean.         */
html[data-bs-theme="dark"] body::before {
    content: '';
    position: fixed;
    bottom: -8%;
    right: -6%;
    width: 48vmin;
    height: 48vmin;
    background-image: url('./../images/Pokeball smooth style.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
    opacity: .07;
    transform: rotate(-30deg);
    pointer-events: none;
    z-index: 0;
}

/* --- Scrollbar --------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
html[data-bs-theme="dark"]  ::-webkit-scrollbar-thumb { background: rgba(124,77,255,.4); border-radius: 8px; }
html[data-bs-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; }

/* --- Nav --------------------------------------------------- */
.tpr-nav {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background .4s, border-color .4s;
    z-index: 1050;
}
html[data-bs-theme="dark"]  .tpr-nav { background: rgba(10,14,24,.75)  !important; border-bottom: 1px solid rgba(124,77,255,.28); }
html[data-bs-theme="light"] .tpr-nav { background: rgba(255,255,255,.82) !important; border-bottom: 1px solid rgba(15,23,42,.10); }

.tpr-nav .nav-link {
    font-weight: 600;
    letter-spacing: .1px;
    border-radius: 9px;
    transition: background .15s, color .15s;
}
.tpr-nav .nav-link:hover,
.tpr-nav .nav-link:focus { background: rgba(124,77,255,.14); }

.tpr-nav .dropdown-menu {
    border: 1px solid rgba(124,77,255,.22);
}
html[data-bs-theme="dark"] .tpr-nav .dropdown-menu {
    background: rgba(12,16,28,.95);
    backdrop-filter: blur(12px);
}

/* Brand gradient text */
.tpr-brand {
    background: linear-gradient(92deg, #22d3ee, #7c4dff 45%, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* CSS Pokéball logo (no image needed) */
.tpr-ball {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-block;
    border-radius: 50%;
    background: linear-gradient(#ef4358 0 50%, #f2f4f8 50% 100%);
    border: 2.5px solid #11142a;
    box-shadow: 0 4px 14px rgba(124,77,255,.45);
    flex-shrink: 0;
}
.tpr-ball::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: #11142a;
}
.tpr-ball::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 11px; height: 11px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #f2f4f8;
    border: 2.5px solid #11142a;
}

/* Stat chips in navbar */
.tpr-stat {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 20px;
    letter-spacing: .2px;
    white-space: nowrap;
}
html[data-bs-theme="dark"]  .tpr-stat { background: rgba(255,255,255,.07); }
html[data-bs-theme="light"] .tpr-stat { background: rgba(0,0,0,.06); }

/* Notification bell badge */
.tpr-bell { position: relative; }
.tpr-bell .tpr-notif {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    border-radius: 9px;
    background: #ec4899;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* --- Footer ------------------------------------------------ */
.tpr-foot {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .4s, border-color .4s;
    position: relative;
    z-index: 1;
}
html[data-bs-theme="dark"]  .tpr-foot { background: rgba(10,14,24,.55); border-top: 1px solid rgba(124,77,255,.20); }
html[data-bs-theme="light"] .tpr-foot { background: rgba(255,255,255,.65); border-top: 1px solid rgba(15,23,42,.08); }

.tpr-foot a { text-decoration: none; opacity: .75; transition: opacity .15s, color .15s; }
.tpr-foot a:hover { opacity: 1; color: #22d3ee; }

/* --- CTA button -------------------------------------------- */
.tpr-cta { transition: transform .12s, filter .2s, box-shadow .2s; }
.tpr-cta:hover  { transform: translateY(-2px); filter: brightness(1.07); }
.tpr-cta:active { transform: translateY(0); }

/* --- Card -------------------------------------------------- */
.tpr-card {
    border: 1px solid rgba(124,77,255,.18);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    transition: border-color .15s, transform .12s, box-shadow .15s;
}
.tpr-card:hover {
    border-color: rgba(124,77,255,.38);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* --- Avatar ------------------------------------------------ */
.tpr-av { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.tpr-av:hover { transform: scale(1.06); }

/* --- Floating orb animation -------------------------------- */
@keyframes tprFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
.tpr-orb { animation: tprFloat 4s ease-in-out infinite; }

/* --- Section wrapper (replaces .content card) -------------- */
.tpr-section {
    background: var(--bs-body-bg);
    border: 1px solid rgba(124,77,255,.18);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* --- Aesthetic Pokémon corner images (auth pages) ---------- */
/* Keep these hooks intact — they're referenced in login/register/activate markup */
.aesthetic-pokemon-1,
.aesthetic-pokemon-2 {
    position: fixed;
    bottom: 0;
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    width: clamp(120px, 14vw, 200px);
}
.aesthetic-pokemon-1 { left: 0; }
.aesthetic-pokemon-2 { right: 0; }
html[data-bs-theme="light"] .aesthetic-pokemon-1,
html[data-bs-theme="light"] .aesthetic-pokemon-2 { opacity: .35; }

/* --- Gradient accent text ---------------------------------- */
.tpr-accent {
    background: linear-gradient(92deg, #22d3ee, #7c4dff 45%, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}