/* =========================================================
   AVGUST ROLE PLAY — PUBLIC FX V8
   Clean performance build. Public pages only.
   ========================================================= */

html.site-effects-enabled{
    --fx-purple:185,75,224;
    --fx-pink:222,104,216;
    --fx-gold:239,170,67;
    scroll-behavior:smooth;
}

/* Header styling moved to global-header.css in V9. */

/* ---------- scroll progress ---------- */
html.site-effects-enabled .fx-scroll-progress{
    position:fixed;left:0;top:0;width:100%;height:2px;z-index:2147483640;pointer-events:none;
    transform-origin:0 50%;transform:scaleX(0);will-change:transform;
    background:linear-gradient(90deg,#8229b1,#d850ed 55%,#f0aa54);
    box-shadow:0 0 10px rgba(208,73,238,.62);
}

/* ---------- reveal ---------- */
html.site-effects-enabled.fx-js .fx-reveal{
    opacity:0;
    transform:translate3d(0,14px,0) scale(.995);
    transition:opacity .48s cubic-bezier(.2,.72,.25,1),transform .48s cubic-bezier(.2,.72,.25,1);
    transition-delay:var(--fx-delay,0ms);
}
html.site-effects-enabled.fx-js .fx-reveal.fx-in-view{opacity:1;transform:none}

/* ---------- local 3D card tilt: only the card under the pointer moves ---------- */
html.site-effects-enabled .fx-card{
    --fx-rx:0deg;
    --fx-ry:0deg;
    --fx-tx:0px;
    --fx-ty:0px;
    --fx-scale:1;
    --fx-x:50%;
    --fx-y:50%;
    position:relative!important;
    isolation:isolate;
    transform-origin:center center!important;
    transform:perspective(1050px) translate3d(var(--fx-tx),var(--fx-ty),0) rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) scale(var(--fx-scale))!important;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    transition:transform .22s cubic-bezier(.2,.72,.25,1),border-color .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
html.site-effects-enabled .fx-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    border-radius:inherit;
    opacity:0;
    background:radial-gradient(300px circle at var(--fx-x) var(--fx-y),rgba(211,96,246,.14),transparent 58%);
    transition:opacity .18s ease;
}
html.site-effects-enabled .fx-card.fx-tilt-active{
    --fx-scale:1.012;
    will-change:transform;
    filter:brightness(1.025);
    border-color:rgba(204,91,240,.34)!important;
    box-shadow:0 24px 56px rgba(0,0,0,.30),0 0 0 1px rgba(210,98,247,.07),0 0 34px rgba(176,57,223,.12)!important;
    transition:transform .07s linear,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
html.site-effects-enabled .fx-card.fx-tilt-active::after{opacity:1}

/* Big hero can follow the whole viewport; this is one transform only. */
html.site-effects-enabled .hero-v2.fx-scene-tilt,
html.site-effects-enabled .hero.fx-scene-tilt{
    --fx-scene-rx:0deg;--fx-scene-ry:0deg;--fx-scene-x:0px;--fx-scene-y:0px;
    transform-origin:center center!important;
    transform:perspective(1500px) translate3d(var(--fx-scene-x),var(--fx-scene-y),0) rotateX(var(--fx-scene-rx)) rotateY(var(--fx-scene-ry))!important;
    transition:transform .10s linear!important;
    will-change:transform;
}

/* Cursor light and image polish */
html.site-effects-enabled .news-cover,
html.site-effects-enabled .news-view-image,
html.site-effects-enabled .samp-path-card{overflow:hidden}
html.site-effects-enabled .news-cover img,
html.site-effects-enabled .news-view-image img,
html.site-effects-enabled .samp-path-card img{
    transition:transform .42s cubic-bezier(.2,.72,.25,1),filter .42s ease;
}
html.site-effects-enabled .news-card:hover .news-cover img,
html.site-effects-enabled .news-view-image:hover img,
html.site-effects-enabled .samp-path-card:hover img{transform:scale(1.028);filter:saturate(1.06) contrast(1.02)}

/* Buttons */
html.site-effects-enabled .btn{overflow:hidden;isolation:isolate;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important}
html.site-effects-enabled .btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.22),0 0 16px rgba(180,67,222,.10)}

/* Section heads participate in the same cursor tilt without adding layout boxes. */
html.site-effects-enabled .section-head-v2.fx-card,
html.site-effects-enabled .page-head.fx-card{
    border-radius:16px;
    padding:10px 12px;
    margin-left:-12px;
    margin-right:-12px;
    background:linear-gradient(100deg,rgba(134,38,177,.03),transparent 56%,rgba(221,89,226,.02));
}

/* ---------- compact footer ---------- */
html.site-effects-enabled .footer{
    margin-top:18px!important;margin-bottom:14px!important;padding:17px 24px 11px!important;
    grid-template-columns:minmax(250px,1.35fr) minmax(170px,.68fr) minmax(160px,.58fr) auto!important;
    column-gap:26px!important;row-gap:10px!important;align-items:center!important;border-radius:17px!important;
    background:radial-gradient(circle at 8% 30%,rgba(153,42,200,.065),transparent 32%),linear-gradient(145deg,rgba(14,9,19,.97),rgba(8,6,11,.99))!important;
}
html.site-effects-enabled .footer-brand .brand-emblem{width:38px;height:38px}
html.site-effects-enabled .footer-brand .brand-copy b{font-size:13px}
html.site-effects-enabled .footer-brand .brand-copy small{margin-top:4px}
html.site-effects-enabled .footer-brand>p{max-width:340px!important;margin:7px 0 0!important;line-height:1.45!important}
html.site-effects-enabled .footer-nav,html.site-effects-enabled .footer-server{padding-top:0!important}
html.site-effects-enabled .footer-nav>span,html.site-effects-enabled .footer-server>span{margin-bottom:6px!important}
html.site-effects-enabled .footer-links{display:flex!important;flex-wrap:wrap;gap:4px 11px!important;line-height:1.55}
html.site-effects-enabled .footer>a[href*="freekassa"]{display:flex;align-items:center;justify-content:flex-end;opacity:.72;transition:opacity .2s ease,transform .2s ease}
html.site-effects-enabled .footer>a[href*="freekassa"] img{display:block;max-width:88px;max-height:28px;width:auto;height:auto}
html.site-effects-enabled .footer>a[href*="freekassa"]:hover{opacity:1;transform:translateY(-1px)}
html.site-effects-enabled .footer-bottom{grid-column:1/-1!important;padding-top:9px!important;margin-top:1px!important}

/* Back to top */
html.site-effects-enabled .fx-to-top{
    position:fixed;right:18px;bottom:18px;z-index:5000;width:42px;height:42px;border-radius:13px;
    border:1px solid rgba(201,85,237,.24);background:rgba(15,9,20,.78);color:#fff;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;
    opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
}
html.site-effects-enabled .fx-to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
html.site-effects-enabled .fx-to-top:hover{border-color:rgba(215,99,247,.48)}

@media (max-width:980px){
    html.site-effects-enabled .footer{grid-template-columns:1fr 1fr!important;padding:17px 19px 11px!important}
    html.site-effects-enabled .footer>a[href*="freekassa"]{justify-content:flex-start}
}
@media (max-width:620px){
    html.site-effects-enabled .footer{grid-template-columns:1fr!important;gap:11px!important}
    html.site-effects-enabled .footer-links{gap:5px 12px!important}
    html.site-effects-enabled .footer-bottom{gap:8px;flex-wrap:wrap}
}

@media (pointer:coarse),(prefers-reduced-motion:reduce){
    html.site-effects-enabled .fx-card,
    html.site-effects-enabled .fx-card.fx-tilt-active,
    html.site-effects-enabled .hero-v2.fx-scene-tilt,
    html.site-effects-enabled .hero.fx-scene-tilt{transform:none!important;will-change:auto!important}
    html.site-effects-enabled.fx-js .fx-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   V10 — LIGHTER SECTION SURFACES / CLEAN PAGE HEAD
   Removes the heavy rectangular background around public sections
   and fixes the inner-page heading geometry.
   ========================================================= */

/* Large home/public sections should not look like giant dark rectangles. */
html.site-effects-enabled .section.section-v2{
    position:relative!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
}
html.site-effects-enabled .section.section-v2::before,
html.site-effects-enabled .section.section-v2::after{
    content:none!important;
    display:none!important;
}

/* Keep the heading area airy: only a barely visible purple wash. */
html.site-effects-enabled .section-head-v2.fx-card{
    padding:12px 14px!important;
    margin-left:-14px!important;
    margin-right:-14px!important;
    border:0!important;
    border-radius:18px!important;
    background:linear-gradient(105deg,rgba(137,42,178,.045),rgba(18,7,25,.018) 55%,transparent 100%)!important;
    box-shadow:none!important;
}
html.site-effects-enabled .section-head-v2.fx-card.fx-tilt-active{
    background:linear-gradient(105deg,rgba(156,50,198,.065),rgba(22,8,30,.025) 58%,transparent 100%)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.10)!important;
}

/* Inner page header: correct padding/vertical alignment and a softer surface. */
html.site-effects-enabled .page-head{
    min-height:146px!important;
    padding:28px 32px!important;
    margin-bottom:18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:0!important;
    overflow:hidden!important;
    border:1px solid rgba(191,78,232,.16)!important;
    border-radius:22px!important;
    background:
        radial-gradient(circle at 91% 24%,rgba(183,68,226,.08),transparent 22%),
        linear-gradient(110deg,rgba(28,10,39,.34),rgba(10,6,15,.24) 62%,rgba(22,7,29,.25))!important;
    box-shadow:0 14px 42px rgba(0,0,0,.10)!important;
    transform:none!important;
    filter:none!important;
}
html.site-effects-enabled .page-head::before{
    opacity:.22!important;
}
html.site-effects-enabled .page-head::after{
    opacity:.45!important;
}
html.site-effects-enabled .page-head .page-kicker{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px!important;
    color:#a56db8;
    font:800 9px/1 Montserrat,Inter,sans-serif;
    letter-spacing:1.55px;
    text-transform:uppercase;
}
html.site-effects-enabled .page-head .page-kicker::before{
    content:"";
    width:18px;
    height:1px;
    background:linear-gradient(90deg,#c64bed,transparent);
}
html.site-effects-enabled .page-head h1{
    position:relative;
    z-index:2;
    margin:0!important;
    padding:0!important;
    line-height:1.08!important;
}
html.site-effects-enabled .page-head p{
    position:relative;
    z-index:2;
    margin:11px 0 0!important;
    padding:0!important;
    max-width:680px!important;
}

@media (max-width:760px){
    html.site-effects-enabled .page-head{
        min-height:0!important;
        padding:22px 20px!important;
        border-radius:18px!important;
    }
    html.site-effects-enabled .section-head-v2.fx-card{
        margin-left:-8px!important;
        margin-right:-8px!important;
        padding:10px 8px!important;
    }
}


/* =========================================================
   V11 — restore cursor tilt for inner page hero headers
   (news / how to play) like the main page cards.
   ========================================================= */
html.site-effects-enabled .page-head.fx-card{
    --fx-rx:0deg;
    --fx-ry:0deg;
    --fx-tx:0px;
    --fx-ty:0px;
    transform:perspective(1100px) translate3d(var(--fx-tx),var(--fx-ty),0) rotateX(var(--fx-rx)) rotateY(var(--fx-ry)) scale(var(--fx-scale,1))!important;
    filter:none!important;
    will-change:auto;
}
html.site-effects-enabled .page-head.fx-card.fx-tilt-active{
    --fx-scale:1.008;
    will-change:transform;
    box-shadow:0 20px 48px rgba(0,0,0,.15),0 0 0 1px rgba(210,98,247,.06),0 0 28px rgba(176,57,223,.10)!important;
}
html.site-effects-enabled .page-head.fx-card .page-kicker,
html.site-effects-enabled .page-head.fx-card h1,
html.site-effects-enabled .page-head.fx-card p{
    transform:translateZ(16px);
}