/* ======================================================
   BULLFROG FRONTEND FINALIZATION V4
====================================================== */

:root{
    --bf-final-lime:#c8ff4d;
    --bf-final-green:#6dff9b;
    --bf-final-aqua:#58ead4;
    --bf-final-gold:#e8c76c;
    --bf-final-text:#f5fff7;
    --bf-final-muted:#819288;
    --bf-final-line:rgba(194,255,105,.13);
}

/* Better rendering everywhere */

html{
    scroll-behavior:smooth;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    overflow-x:hidden;
}

/* Never let decorative layers block interaction */

[class*="v3-"][class*="bg"],
[class*="v3-"][class*="glow"],
[class*="v3-"][class*="ring"],
[id*="Particles"],
[id*="Atmosphere"],
[id*="Grid"],
[id*="Scan"],
[id*="Glow"],
[id*="Heat"]{
    pointer-events:none !important;
}

/* Navigation polish */

header a,
nav a{
    -webkit-tap-highlight-color:transparent;
}

a,
button{
    touch-action:manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid rgba(200,255,77,.62);
    outline-offset:3px;
}

/* Prevent tiny mobile tap targets */

@media(max-width:760px){

    header nav a{
        min-height:40px;
        display:inline-flex;
        align-items:center;
    }

    button,
    [role="button"]{
        min-height:42px;
    }

}

/* Image performance and containment */

img{
    max-width:100%;
}

img:not([width]):not([height]){
    height:auto;
}

/* Smoother product cards */

.bf-feature-card,
.bf-mini-card,
.pond-v3-product,
.swamp-v3-module,
.leaderboard-v3-rank,
.hatchery-v3-capsule,
.missions-v3-card,
.lock-v3-step,
.burn-v3-step{
    will-change:transform;
}

/* Disable expensive motion for accessibility */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

}

/* ======================================================
   HOMEPAGE V4 PRODUCT ART
====================================================== */

.bf-platform-feature .bf-feature-card,
.bf-platform-grid .bf-mini-card{
    position:relative;
    isolation:isolate;
}

.bf-v4-product-art{
    position:absolute;
    inset:0;

    z-index:-2;

    overflow:hidden;

    border-radius:inherit;

    pointer-events:none;
}

.bf-v4-product-art:after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(1,7,4,.12),
            rgba(1,7,4,.38) 38%,
            rgba(1,7,4,.93) 88%
        );
}

.bf-v4-product-art img,
.bf-v4-product-art video{
    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.52;

    filter:
        brightness(.69)
        saturate(.86);

    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;
}

.bf-feature-card:hover
.bf-v4-product-art img,
.bf-feature-card:hover
.bf-v4-product-art video,
.bf-mini-card:hover
.bf-v4-product-art img,
.bf-mini-card:hover
.bf-v4-product-art video{
    transform:scale(1.045);

    opacity:.66;

    filter:
        brightness(.79)
        saturate(1);
}

.bf-v4-product-art + *{
    position:relative;
}

/* Feature cards can carry stronger art */

.bf-platform-feature
.bf-feature-card{
    min-height:310px;
}

/* Secondary cards become mini cinematic windows */

.bf-platform-grid
.bf-mini-card{
    min-height:155px;

    overflow:hidden;

    background:
        rgba(2,12,7,.72);
}

.bf-platform-grid
.bf-mini-card
.bf-v4-product-art:after{
    background:
        linear-gradient(
            90deg,
            rgba(1,7,4,.92) 0%,
            rgba(1,7,4,.78) 42%,
            rgba(1,7,4,.45) 100%
        );
}

/* Burn gets fire tint */

.bf-v4-burn-art:after{
    background:
        linear-gradient(
            90deg,
            rgba(10,3,1,.92),
            rgba(15,4,1,.63),
            rgba(15,4,1,.35)
        ) !important;
}

/* Leaderboard gets gold tint */

.bf-v4-gold-art:after{
    background:
        linear-gradient(
            90deg,
            rgba(5,7,3,.92),
            rgba(10,10,4,.64),
            rgba(20,16,5,.35)
        ) !important;
}

/* Product state pill */

.bf-v4-state{
    position:absolute;

    right:14px;
    top:14px;

    z-index:5;

    padding:6px 8px;

    border-radius:999px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(1,7,4,.62);

    backdrop-filter:blur(10px);

    color:#dce9df;

    font-size:7px;

    font-weight:950;

    letter-spacing:.10em;
}

.bf-v4-state.live{
    color:#c8ff4d;

    border-color:
        rgba(200,255,77,.16);
}

.bf-v4-state.preview{
    color:#e8c76c;

    border-color:
        rgba(232,199,108,.16);
}

/* ======================================================
   MOBILE V4
====================================================== */

@media(max-width:650px){

    .bf-platform-feature
    .bf-feature-card{
        min-height:285px;
    }

    .bf-platform-grid
    .bf-mini-card{
        min-height:145px;
    }

    .bf-v4-state{
        top:10px;
        right:10px;
    }

}

/* ======================================================
   BULLFROG FINAL QA V4.1
   SAFE SITE-WIDE MICRO POLISH
====================================================== */

/* Prevent accidental horizontal layout breakage. */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

/* More resilient media rendering. */

img,
video,
canvas,
svg{
    max-width:100%;
}

video,
img{
    vertical-align:middle;
}

/* Protect long addresses / hashes / RPC values. */

code,
pre,
address,
[data-address],
[class*="address"],
[class*="hash"]{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Keep interactive controls above decorative layers. */

a,
button,
input,
select,
textarea,
[role="button"]{
    position:relative;
}

/* Consistent cursor behavior. */

a[href],
button:not(:disabled),
[role="button"]{
    cursor:pointer;
}

/* Disabled really means disabled visually. */

button:disabled,
input:disabled,
select:disabled{
    cursor:not-allowed;
    opacity:.55;
}

/* Clean native button typography inheritance. */

button,
input,
select,
textarea{
    font:inherit;
}

/* Better touch behavior without killing browser gestures. */

button,
a{
    -webkit-tap-highlight-color:
        rgba(200,255,77,.08);
}

/* Avoid focus clipping inside cards. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    position:relative;
    z-index:50;
}

/* Prevent decorative V3/V4/V9 layers from blocking anything. */

[id*="Particles"],
[id*="Atmosphere"],
[id*="Grid"],
[id*="Scan"],
[id*="Glow"],
[id*="Heat"],
[class*="-ring"],
[class*="-hero-bg"],
[class*="-product-art"]{
    pointer-events:none !important;
}

/* Ensure actual links inside visual product cards remain clickable. */

.bf-feature-card,
.bf-mini-card,
.pond-v3-product,
.swamp-v3-module{
    pointer-events:auto;
}

/* Stable card animation performance. */

.bf-feature-card,
.bf-mini-card,
.pond-v3-product,
.swamp-v3-module,
.missions-v3-card,
.hatchery-v3-capsule,
.leaderboard-v3-rank{
    transform:translateZ(0);
    backface-visibility:hidden;
}

/* Stop extremely long navs from breaking smaller screens. */

header nav,
nav{
    max-width:100%;
}

/* ======================================================
   TABLET
====================================================== */

@media(max-width:900px){

    header{
        max-width:100%;
    }

    header nav,
    nav{
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }

    header nav::-webkit-scrollbar,
    nav::-webkit-scrollbar{
        display:none;
    }

}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:650px){

    body{
        min-width:0;
    }

    p{
        overflow-wrap:anywhere;
    }

    input,
    select,
    textarea{
        max-width:100%;
    }

    button,
    a[role="button"]{
        max-width:100%;
    }

}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

}