/* ===========================================================
   MY COUNTRY
   "Brass & Gunmetal" Theme — v3
   یک هویت بصری واحد: فلز سرد + مدال برنزی
   Part 1 / 4
   =========================================================== */


/*============================================================
=                           ROOT                             =
============================================================*/
@font-face {
    font-family: "Vazirmatn";
    src: url("../font/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../font/Vazirmatn-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../font/Vazirmatn-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("../font/Oswald-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("../font/Oswald-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
:root{

    /* --- برنز/طلایی: رنگ امضادار کل سایت --- */
    --brass:#27a3c9;
    --brass-bright:#27a3c9;
    --brass-dark:#27a3c9;

    /* --- زرشکی: هشدار / زنده بودن --- */
    --crimson:#c23a4e;
    --crimson-bright:#e2536a;

    --success:#3ddc84;
    --warning:#27a3c9;
    --danger:#e2536a;

    /* --- فلز سرد پس‌زمینه --- */
    --bg:#08090c;
    --bg-2:#0e1116;
    --bg-3:#151920;
    --bg-card:#12151b;

    --text:#f1ede1;
    --text-soft:#c7c2b2;
    --muted:#847e6c;

    --border:rgba(201,162,39,.14);
    --border-steel:rgba(255,255,255,.06);

    --shadow-small:
        0 8px 18px rgba(0,0,0,.30);

    --shadow:
        0 14px 34px rgba(0,0,0,.45);

    --shadow-big:
        0 30px 80px rgba(0,0,0,.65);

    --glow-brass:
        0 0 24px #27a3c9;

    --radius:6px;
    --cut:16px;               /* اندازه‌ی برش گوشه‌ها، امضای طرح */

    --container:1200px;

    --font-display:"Oswald","Vazirmatn",system-ui,sans-serif;
    --font-body:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

    --transition:.25s ease;

}


/*============================================================
=                          RESET                             =
============================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

    font-family:inherit;

}


html{

    scroll-behavior:smooth;

    font-family:var(--font-body);

}

body{

    min-height:100vh;

    display:flex;
    flex-direction:column;

    direction:rtl;

    overflow-x:hidden;

    color:var(--text);

    font-family:var(--font-body);

    line-height:1.7;

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;

    background:
    radial-gradient(circle at top,
    #000f13 0%,
    #00131a 38%,
    #000716 100%);

    background-attachment:fixed;

}


/*============================================================
=                      BACKGROUND FX                         =
============================================================*/

/* بافت فلزیِ ظریف به‌جای نویز ساده */
body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background:
    repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    transparent 1px,
    transparent 4px);

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
    circle at 18% 25%,
    rgba(201,162,39,.09),
    transparent 38%),

    radial-gradient(
    circle at 82% 75%,
    rgba(194,58,78,.06),
    transparent 32%);

    z-index:-1;

}


/*============================================================
=                       TYPOGRAPHY                           =
============================================================*/

h1{

    font-family:var(--font-display);

    color:#fdfaf1;

    font-size:48px;

    font-weight:700;

    line-height:1.2;

    letter-spacing:.3px;

    text-shadow:

    0 5px 22px rgba(201,162,39,.22);

    margin-bottom:18px;

}

h2{

    font-family:var(--font-display);

    color:#fdfaf1;

    font-size:27px;

    font-weight:700;

    margin-bottom:14px;

}

h3{

    font-family:var(--font-display);

    color:#fdfaf1;

    font-size:20px;

    font-weight:500;

}

p{

    font-family:var(--font-body);

    color:var(--text-soft);

    margin-bottom:18px;

}

a{

    font-family:var(--font-body);

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

li{

    font-family:var(--font-body);

}

span{

    font-family:var(--font-body);

}

strong,
b{

    font-family:inherit;

    font-weight:700;

}

img{

    display:block;

    max-width:100%;

}


/*============================================================
=                         HELPERS                            =
============================================================*/

.container{

    width:min(var(--container),95%);

    margin:auto;

}

.page-content{

    padding-top:120px;

}

.space{

    height:120px;

}

.new{

    position:relative;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-right:3px solid var(--brass);

    border-radius:var(--radius);

    padding:24px;

    margin:24px;

    color:var(--text);

    font-family:var(--font-body);

    box-shadow:var(--shadow);

}


/*============================================================
=                  DIVIDER — شورون برنزی                     =
============================================================*/

.divider-line{

    width:100%;

    height:14px;

    margin:35px 0;

    position:relative;

    background:

    linear-gradient(

    to right,

    transparent,

    var(--brass),

    transparent

    );

    -webkit-mask:

    repeating-linear-gradient(
    90deg,
    #000 0 8px,
    transparent 8px 10px);

    mask:

    repeating-linear-gradient(
    90deg,
    #000 0 8px,
    transparent 8px 10px);

    opacity:.8;

}


/*============================================================
=                       SELECTION                            =
============================================================*/

::selection{

    background:var(--brass);

    color:#0b0c0f;

}
/*============================================================
=                         HEADER                             =
============================================================*/

header{

    position:fixed;

    top:12px;

    left:50%;

    transform:translateX(-50%);

    width:min(1180px,95%);

    z-index:9999;

    clip-path:none;

    backdrop-filter:blur(22px);

    background:

    linear-gradient(
    180deg,
    rgba(21,25,32,.92),
    rgba(12,15,20,.88));

    border:1px solid rgba(201,162,39,.10);

    box-shadow:

    0 16px 48px rgba(0,0,0,.60),

    inset 0 1px 0 rgba(255,255,255,.04);

    transition:.35s;

}

header:hover{

    box-shadow:

    0 20px 60px rgba(0,0,0,.65),

    0 0 35px rgba(201,162,39,.14);

}


/*============================================================
=                    HEADER CONTAINER                        =
============================================================*/

.header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    min-height:82px;

    padding:0 8px;

}


/*============================================================
=                          BRAND                             =
============================================================*/

.brand{

    display:flex;

    align-items:center;

    gap:16px;

    margin-left:auto;

    font-family:var(--font-display);

    font-weight:700;

    letter-spacing:.4px;

}

.brand img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid var(--brass);

    transition:.35s;

    box-shadow:

    0 0 16px rgba(201,162,39,.45),

    0 0 32px rgba(201,162,39,.18);

}

.brand img:hover{

    transform:

    rotate(-5deg)

    scale(1.08);

}


/*============================================================
=                       NAVIGATION                           =
============================================================*/

nav{

    display:flex;

    align-items:center;

    gap:6px;

    font-family:var(--font-display);

}

nav a{

    position:relative;

    padding:10px 18px;

    color:#f1ede1;

    font-family:var(--font-display);

    border-radius:4px;

    font-size:14px;

    font-weight:500;

    letter-spacing:.3px;

    transition:.25s;

}

nav a:hover{

    background:rgba(201,162,39,.08);

    transform:translateY(-2px);

}

nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--brass);

    transition:.30s;

}

nav a:hover::after{

    width:70%;

    left:15%;

}


/*============================================================
=                     ONLINE PLAYERS                         =
============================================================*/

.online-box{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:3px;

    background:#151920;

    border:1px solid var(--border-steel);

    color:#fff;

    font-family:var(--font-display);

    font-size:14px;

    font-weight:700;

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.04),

    0 0 20px rgba(61,220,132,.08);

}

.online-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4ade80;

    animation:pulse 1.5s infinite;

}

.online-count{

    color:#4ade80;

}


/*============================================================
=                       USER MENU                            =
============================================================*/

.build-wrap{

    position:relative;

    display:flex;

    align-items:center;

}

.build-btn{

    background:none;

    border:none;

    color:#fff;

    font-family:var(--font-display);

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    padding:12px 18px;

    border-radius:4px;

    transition:.25s;

}

.build-btn:hover{

    background:rgba(201,162,39,.08);

}


/*============================================================
=                     DROPDOWN MENU                          =
============================================================*/

.build-menu{

    position:fixed;
    top:54px;
    right:30px;
    min-width:220px;
    overflow:hidden;
    opacity:0;
    visibility: hidden;
    pointer-events:none;
    transform:translateY(10px);
    border-radius:6px;
    background:#12151b;
    border:1px solid var(--border);
    box-shadow:
    0 15px 40px rgba(0,0,0,.55);
    transition:
    opacity .30s,
    transform .30s;

}

.build-wrap.open .build-menu{

    opacity:1;

    pointer-events:auto;
    visibility: visible;
    transform:translateY(0);

}

.menu-item{

    display:flex;

    align-items:center;

    padding:14px 18px;

    color:#f1ede1;

    font-family:var(--font-body);

    font-size:14px;

    border-bottom:1px solid var(--border-steel);

    transition:.25s;

}

.menu-item:last-child{

    border-bottom:none;

}

.menu-item:hover{

    background:#1a2028;

    padding-right:24px;

    border-right:2px solid var(--brass);

}


/*============================================================
=              BUTTONS — کارت نشان، برش‌خورده                =
============================================================*/

.button,

#v{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:16px 52px;
    margin-top: 20px;
    margin-right: 390px;
    width: 300px;
    border:none;

    cursor:pointer;

    color:#171200;

    font-family:var(--font-display);

    font-weight:700;

    letter-spacing:.4px;

    font-size:17px;

    clip-path:

    polygon(
    14px 0, 100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%, 0 14px);

    background:

    linear-gradient(
    135deg,
    var(--brass-bright),
    var(--brass));

    box-shadow:

    0 10px 26px rgba(201,162,39,.32);

    transition:.25s;

}

.button:hover,

#v:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 18px 40px rgba(201,162,39,.45);

}


/*============================================================
=                      ANIMATIONS                            =
============================================================*/

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(74,222,128,.60);

    }

    70%{

        box-shadow:0 0 0 12px transparent;

    }

    100%{

        box-shadow:0 0 0 0 transparent;

    }

}
/*============================================================
=                       MAIN CONTENT                         =
============================================================*/

main{

    flex:1;

    width:100%;

    padding:40px 0 70px;

    position:relative;

    z-index:2;

    font-family:var(--font-body);

}


/*============================================================
=                       HERO SECTION                         =
============================================================*/

.hero{

    text-align:center;

    margin-bottom:60px;

}

.hero h1{

    font-family:var(--font-display);

    font-size:54px;

    letter-spacing:.5px;

    margin-bottom:20px;

    color:#fdfaf1;

    text-shadow:

    0 0 26px rgba(201,162,39,.28);

}

.hero p{

    font-family:var(--font-body);

    width:min(750px,90%);

    margin:auto;

    color:var(--text-soft);

    font-size:18px;

    line-height:2;

}


/*============================================================
=               CARD — نشان برش‌خورده                       =
============================================================*/

.card{

    position:relative;

    overflow:hidden;

    padding:45px;

    font-family:var(--font-body);

    clip-path:

    polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));

    background:

    linear-gradient(

    180deg,

    rgba(22,26,33,.98),

    rgba(15,18,24,.98)

    );

    border:1px solid var(--border);

    box-shadow:

    0 25px 70px rgba(0,0,0,.55),

    inset 0 0 0 1px rgba(255,255,255,.02);

    animation:cardShow .8s ease;

}


/*============================================================
=                    CARD LIGHT EFFECT                       =
============================================================*/

.card::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-170px;

    top:-220px;

    background:

    radial-gradient(

    circle,

    rgba(201,162,39,.14),

    transparent 70%

    );

    pointer-events:none;

}

.card::after{

    content:"";

    position:absolute;

    width:26px;

    height:26px;

    left:0;

    top:0;

    background:var(--brass);

    clip-path:polygon(0 0, 100% 0, 0 100%);

    opacity:.9;

}


/*============================================================
=                      CARD CONTENT                          =
============================================================*/

.card>*{

    position:relative;

    z-index:2;

}

.card h1{

    font-family:var(--font-display);

    font-size:42px;

    margin-bottom:20px;

}

.card h2{

    font-family:var(--font-display);

    font-size:26px;

    margin-top:35px;

    margin-bottom:18px;

    padding-right:16px;

    border-right:3px solid var(--brass);

}

.card p{

    font-family:var(--font-body);

    color:var(--text-soft);

    line-height:2;

    font-size:17px;

}

.card strong{

    color:var(--brass-bright);

}


/*============================================================
=                      LIST STYLE                            =
============================================================*/

.card ul{

    margin-top:30px;

    display:grid;

    gap:14px;

}

.card li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 20px;

    border-radius:4px;

    background:#171b22;

    border:1px solid var(--border-steel);

    border-right:3px solid transparent;

    font-family:var(--font-body);

    transition:.30s;

}

.card li::before{

    content:"✔";

    color:var(--brass-bright);

    font-size:16px;

    font-weight:bold;

}

.card li:hover{

    transform:translateX(-6px);

    background:#1b212a;

    border-right-color:var(--brass);

    box-shadow:

    0 10px 25px rgba(0,0,0,.30);

}


/*============================================================
=                      MUTED TEXT                            =
============================================================*/

.muted{

    font-family:var(--font-body);

    color:var(--muted);

    font-size:14px;

    letter-spacing:.2px;

}


/*============================================================
=                      INFO GRID                             =
============================================================*/

.info-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

    margin-top:35px;

}

.info-card{

    padding:22px;

    border-radius:4px;

    border-top:2px solid var(--brass-dark);

    font-family:var(--font-body);

    background:

    linear-gradient(

    180deg,

    #191d24,

    #131720

    );

    border:1px solid var(--border-steel);

    border-top:2px solid var(--brass-dark);

    transition:.30s;

}

.info-card:hover{

    transform:translateY(-6px);

    border-top-color:var(--brass);

    box-shadow:

    0 18px 40px rgba(0,0,0,.35);

}

.info-card h3{

    font-family:var(--font-display);

    margin-bottom:12px;

}

.info-card p{

    margin:0;

}


/*============================================================
=                     BUTTON AREA                            =
============================================================*/

.card-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}


/*============================================================
=                      ANIMATION                             =
============================================================*/

@keyframes cardShow{

    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.98);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}
/*============================================================
=                     MARTYR PAGE                            =
============================================================*/

.martyr-page{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:30px;

    padding:50px 20px;

    min-height:100vh;

    font-family:var(--font-body);

}

.martyr-content-box{

    flex:1;

}


/*============================================================
=                     MARTYR CARD                            =
============================================================*/

.martyr-card{

    width:min(920px,100%);

    position:relative;

    overflow:hidden;

    padding:48px;

    font-family:var(--font-body);

    clip-path:

    polygon(
    22px 0, 100% 0,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    0 100%, 0 22px);

    background:

    linear-gradient(
    180deg,
    #181b20,
    #0f1216);

    border:1px solid var(--border);

    box-shadow:

    0 25px 60px rgba(0,0,0,.60);

}

.martyr-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle at top right,
    rgba(201,162,39,.11),
    transparent 35%);

    pointer-events:none;

}

.martyr-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(201,162,39,.18);

    clip-path:

    polygon(
    22px 0, 100% 0,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    0 100%, 0 22px);

    pointer-events:none;

}


/*============================================================
=                     HEADER                                =
============================================================*/

.martyr-header{

    text-align:center;

    margin-bottom:40px;

}

.martyr-header h1{

    font-family:var(--font-display);

    color:var(--brass-bright);

    font-size:36px;

    margin-bottom:15px;

}

.martyr-header h2{

    font-family:var(--font-display);

    font-size:24px;

    font-weight:500;

    color:#fdfaf1;

}


/*============================================================
=                     FLAGS                                 =
============================================================*/

.title-flags{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-bottom:25px;

}

.flag{

    width:160px;

    transition:.35s;

    filter:

    drop-shadow(0 0 15px rgba(255,255,255,.06));

}

.flag:hover{

    transform:

    scale(1.06);

}


/*============================================================
=                     CONTENT                               =
============================================================*/

.martyr-content{

    font-family:var(--font-body);

    font-size:18px;

    line-height:2.3;

    color:#d9d4c6;

}

.martyr-content p{

    margin-bottom:22px;

}


/*============================================================
=                    BLOCKQUOTE                             =
============================================================*/

blockquote{

    margin:35px 0;

    padding:22px 24px;

    background:#181b20;

    border-right:4px solid var(--brass);

    color:var(--brass-bright);

    font-family:var(--font-body);

    font-size:18px;

    line-height:2;

}


/*============================================================
=                     ENDING                                =
============================================================*/

.ending{

    margin-top:40px;

    text-align:center;

    font-family:var(--font-display);

    font-size:20px;

    letter-spacing:.3px;

    color:var(--brass-bright);

}


/*============================================================
=                     INFO BOXES                            =
============================================================*/

.martyr-info{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:40px;

}

.info-box{

    padding:22px;

    border-radius:4px;

    background:#141821;

    border:1px solid var(--border-steel);

    font-family:var(--font-body);

    transition:.30s;

}

.info-box:hover{

    transform:translateY(-5px);

    border-color:rgba(201,162,39,.25);

    box-shadow:

    0 18px 35px rgba(0,0,0,.35);

}

.info-box span{

    display:block;

    color:var(--muted);

    margin-bottom:10px;

    font-size:13px;

}

.info-box strong{

    color:#fff;

    font-family:var(--font-display);

    font-size:18px;

}


/*============================================================
=                     SIDE IMAGES                           =
============================================================*/

.side-image{

    width:210px;

    position:sticky;

    top:130px;

    border:3px solid var(--brass-dark);

    box-shadow:

    0 0 30px rgba(201,162,39,.22);

    transition:.35s;

}

.side-image:hover{

    transform:scale(1.03);

    border-color:var(--brass);

}

.left-image{

    margin-right:10px;

}

.right-image{

    margin-left:10px;

}


/*============================================================
=                 OFFICIAL CHANNEL                          =
============================================================*/

.official-channel{

    margin-top:45px;

    text-align:center;

    padding:35px;

    border-radius:4px;

    font-family:var(--font-body);

    background:

    linear-gradient(
    180deg,
    #1b1e24,
    #121519);

    border:1px solid rgba(201,162,39,.22);

}

.official-channel h3{

    font-family:var(--font-display);

    color:var(--brass-bright);

    margin-bottom:12px;

}

.channel-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:15px 34px;

    clip-path:

    polygon(
    12px 0, 100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%, 0 12px);

    background:

    linear-gradient(
    135deg,
    #1f9d55,
    #168546);

    color:#fff;

    font-family:var(--font-display);

    font-weight:700;

    transition:.30s;

}

.channel-btn:hover{

    transform:

    translateY(-4px);

}


/*============================================================
=                      FOOTER                               =
============================================================*/

footer{

    margin-top:80px;

    background:

    linear-gradient(
    180deg,
    #0e1116,
    #07080a);

    border-top:1px solid var(--border);

    padding:45px 0;

    font-family:var(--font-body);

}

.footer-about{

    width:min(900px,92%);

    margin:auto;

    text-align:center;

}

.footer-about h3{

    font-family:var(--font-display);

    margin-bottom:15px;

}

.ad{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

    margin:25px 0;

}

.ad a{

    color:#fff;

    font-family:var(--font-display);

    font-weight:bold;

    transition:.25s;

}

.ad a:hover{

    color:var(--brass-bright);

}


/*============================================================
=                   RESPONSIVE                              =
============================================================*/

@media(max-width:1100px){

    .side-image{

        display:none;

    }

}

@media(max-width:900px){

    .card,

    .martyr-card{

        padding:28px;

    }

    h1{

        font-size:36px;

    }

}

@media(max-width:700px){

    header{

        width:96%;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

    }

    .brand{

        margin:auto;

    }

    .card,

    .martyr-card{

        padding:20px;

    }

}


/*============================================================
=                    SCROLLBAR                              =
============================================================*/

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-track{

    background:#0c0e12;

}

::-webkit-scrollbar-thumb{

    background:var(--brass-dark);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--brass);

}
/*============================================================
=              SIGNATURE / AAA GAME EFFECTS                 =
============================================================*/

/* ---------- Floating Glow ---------- */

.glow{

    position:relative;

    overflow:hidden;

}

.glow::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    left:-150px;

    top:-150px;

    background:

    radial-gradient(circle,

    rgba(201,162,39,.22),

    transparent 70%);

    transition:.5s;

}

.glow:hover::before{

    left:20%;

    top:-50px;

}


/* ---------- Glass Panels ---------- */

.glass{

    backdrop-filter:blur(18px);

    background:

    rgba(255,255,255,.03);

    border:

    1px solid rgba(255,255,255,.07);

}


/* ---------- Neon Border → مرز برنزی ---------- */

.neon{

    border:

    1px solid rgba(201,162,39,.4);

    box-shadow:

    0 0 10px rgba(201,162,39,.22),

    inset 0 0 10px rgba(201,162,39,.05);

}


/* ---------- Card Hover ---------- */

.card:hover{

    transform:

    translateY(-8px);

    box-shadow:

    0 40px 90px rgba(0,0,0,.55),

    0 0 40px rgba(201,162,39,.14);

}


/* ---------- Animated Gradient — نوار مدال متحرک ---------- */

.animated-border{

    position:relative;

}

.animated-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    padding:2px;

    background:

    linear-gradient(

    90deg,

    var(--brass-dark),

    var(--brass-bright),

    var(--brass-dark));

    background-size:300%;

    animation:borderMove 6s linear infinite;

    mask:

    linear-gradient(#000 0 0) content-box,

    linear-gradient(#000 0 0);

    mask-composite:exclude;

}


/* ---------- Shine Effect ---------- */

.shine{

    position:relative;

    overflow:hidden;

}

.shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

    to right,

    transparent,

    rgba(255,255,255,.10),

    transparent);

}

.shine:hover::after{

    animation:shineMove .9s;

}


/* ---------- Button Pulse ---------- */

#v::before{

    content:"";

    position:absolute;

    inset:-8px;

    border:2px solid rgba(201,162,39,.30);

    clip-path:

    polygon(
    14px 0, 100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%, 0 14px);

    animation:buttonPulse 2s infinite;

}


/* ---------- Floating ---------- */

.float{

    animation:floating 5s ease-in-out infinite;

}


/* ---------- Fade Up ---------- */

.fade-up{

    animation:fadeUp .8s ease both;

}


/* ---------- Rotate Glow ---------- */

.rotate-light{

    position:relative;

}

.rotate-light::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:

    conic-gradient(

    transparent,

    rgba(201,162,39,.16),

    transparent);

    animation:rotateGlow 8s linear infinite;

}


/*============================================================
=                     KEYFRAMES                             =
============================================================*/

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

@keyframes shineMove{

100%{

left:170%;

}

}

@keyframes buttonPulse{

0%{

transform:scale(.95);

opacity:1;

}

100%{

transform:scale(1.15);

opacity:0;

}

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes rotateGlow{
 
 100%{
 
 transform:
 
 translate(-50%,-50%)
 
 rotate(360deg);
 
 }
 
 }


/*============================================================
=                         SHOP SECTION                         =
============================================================*/

#shopSection {
    margin-top: 30px;
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.shop-item {
    position: relative;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-right: 3px solid var(--brass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.shop-item-info h3 {
    font-family: var(--font-display);
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--brass-bright);
}

.shop-item-info p {
    font-size: 15px;
    color: var(--text-soft);
    margin-bottom: 10px;
}

.price {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(39, 163, 201, 0.15);
    border: 1px solid var(--brass);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--brass-bright);
}

.shop-quantity {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 15px;
}

.shop-quantity input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-steel);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    text-align: center;
}

.shop-quantity input:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 2px rgba(39, 163, 201, 0.2);
}

.shop-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--brass-bright), var(--brass));
    border: none;
    border-radius: 4px;
    color: #171200;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(39, 163, 201, 0.3);
    width: 100%;
}

.shop-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(39, 163, 201, 0.45);
}

.shop-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: linear-gradient(135deg, #555, #444);
    color: #888;
}

.shop-message {
    margin-top: 20px;
    padding: 14px 20px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 15px;
    display: none;
    animation: fadeUp 0.3s ease;
}

.shop-message.success {
    display: block;
    background: rgba(61, 220, 132, 0.15);
    border: 1px solid var(--success);
    color: var(--success);
}

.shop-message.error {
    display: block;
    background: rgba(226, 83, 106, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.shop-message.info {
    display: block;
    background: rgba(39, 163, 201, 0.15);
    border: 1px solid var(--brass);
    color: var(--brass-bright);
}

@media (max-width: 700px) {
    .shop-items {
        grid-template-columns: 1fr;
    }
    
    .shop-item {
        padding: 20px;
    }
    
    .shop-quantity {
        flex-direction: column;
    }
    
    .shop-quantity input {
        width: 100%;
    }
}