/*====================================================
        PREMIUM GAMING UI 2026
====================================================*/

:root{

--white:#FFFFFF;
--blue:#1976D2;
--green:#388E3C;
--orange:#F57C00;
--red:#D32F2F;
--dark:#212121;
--indigo:#6366F1;

--text:#ffffff;
--text-light:#e5e7eb;

--panel:#2b2b2b;
--panel2:#303030;

--border:rgba(255,255,255,.08);

--radius:18px;

--shadow:
0 12px 30px rgba(0,0,0,.35);

}

/*=========================
GLOBAL
=========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
transition:.3s;
}

body{

font-family:Segoe UI,sans-serif;

color:var(--white);

background:

linear-gradient(135deg,
#212121,
#2d2d2d,
#1f1f1f);

}

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

header,
#header,
.navbar{

background:

linear-gradient(
90deg,
#1976D2,
#6366F1);

box-shadow:
0 8px 25px rgba(25,118,210,.35);

}

/*=========================
SIDEBAR
=========================*/

.sidebar,
#sidebar-menu{

background:

linear-gradient(
180deg,
#212121,
#2a2a2a);

border-right:1px solid rgba(255,255,255,.06);

}

/*=========================
CARDS
=========================*/

.card,
.game-card,
.game-item,
article,
section{

background:

linear-gradient(
180deg,
#2b2b2b,
#242424);

border-radius:18px;

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

box-shadow:var(--shadow);

overflow:hidden;

position:relative;

}

.card::before,
.game-card::before{

content:"";

position:absolute;

top:0;
left:0;

height:4px;
width:100%;

background:

linear-gradient(
90deg,
#1976D2,
#6366F1,
#388E3C);

}

.card:hover,
.game-card:hover{

transform:
translateY(-8px);

box-shadow:

0 20px 40px rgba(0,0,0,.45),

0 0 25px rgba(99,102,241,.35);

}

/*=========================
GAME IMAGE
=========================*/

img{

border-radius:15px;

transition:.4s;

}

.game-card:hover img{

transform:scale(1.08);

}

/*=========================
BUTTONS
=========================*/

button,
.btn{

background:

linear-gradient(
90deg,
#1976D2,
#6366F1);

color:#fff;

border:none;

border-radius:12px;

padding:12px 22px;

font-weight:600;

box-shadow:
0 10px 25px rgba(25,118,210,.35);

}

button:hover,
.btn:hover{

background:

linear-gradient(
90deg,
#6366F1,
#1976D2);

transform:translateY(-3px);

}

/*=========================
PLAY BUTTON
=========================*/

.play-btn{

background:

linear-gradient(
90deg,
#388E3C,
#4CAF50);

}

/*=========================
FEATURED BADGE
=========================*/

.badge,
.featured{

background:

linear-gradient(
90deg,
#F57C00,
#ffb74d);

color:#fff;

border-radius:30px;

padding:6px 14px;

}

/*=========================
DELETE BUTTON
=========================*/

.btn-danger{

background:

linear-gradient(
90deg,
#D32F2F,
#ff5252);

}

/*=========================
SEARCH
=========================*/

input,
textarea,
select{

background:#2d2d2d;

color:#fff;

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

border-radius:12px;

padding:12px;

}

input:focus{

border-color:#1976D2;

box-shadow:
0 0 15px rgba(25,118,210,.45);

outline:none;

}

/*=========================
TABLE
=========================*/

table{

width:100%;

border-collapse:collapse;

}

thead{

background:

linear-gradient(
90deg,
#1976D2,
#6366F1);

}

th{

padding:15px;

}

td{

padding:15px;

border-bottom:
1px solid rgba(255,255,255,.06);

}

tbody tr:hover{

background:rgba(99,102,241,.10);

}

/*=========================
LINK
=========================*/

a{

color:#90CAF9;

text-decoration:none;

}

a:hover{

color:#fff;

}

/*=========================
HEADINGS
=========================*/

h1,h2,h3,h4{

color:#fff;

}

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

footer{

background:

linear-gradient(
90deg,
#1976D2,
#6366F1);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#212121;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#1976D2,
#6366F1);

border-radius:20px;

}

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

::selection{

background:#1976D2;

color:#fff;

}

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

@keyframes glow{

0%{
box-shadow:0 0 5px rgba(99,102,241,.2);
}

50%{
box-shadow:0 0 25px rgba(99,102,241,.5);
}

100%{
box-shadow:0 0 5px rgba(99,102,241,.2);
}

}

.game-card:hover{

animation:glow 2s infinite;

}

body{

animation:fade .6s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:none;

}

}

/* === AUTO TAG CARD COLOR START === */
/* generated: 1783748010 */
:root {
    --tag-card-left-rgb: 42, 16, 100;
    --tag-card-bg: #2A1064;
    --tag-card-default-end: #2A1064;
}
/* === AUTO TAG CARD COLOR END === */