.home-mag-card {
background: #fff;
border: 1px solid #dedede;
border-radius: 8px;
display: block;
height: 100%;
overflow: hidden;
text-align: right;
text-decoration: none !important;
}

.home-mag-card__img {
aspect-ratio: 16 / 9;
display: block;
object-fit: cover;
width: 100%;
}

.home-mag-card__body {
padding: 8px;
}

.home-mag-card__title {
color: #111;
font-size: .8rem;
line-height: 1.8;
}

.home-mag-card__stats {
color: #666;
display: flex;
font-size: .78rem;
gap: 10px;
margin-top: 6px;
}

.home-mag-all {
border: 1px solid #111;
border-radius: 8px;
color: #111 !important;
display: inline-block;
font-size: .9rem !important;
padding: 6px 14px;
text-decoration: none !important;
}

.theme-dark .home-mag-card {
background: #111;
border-color: #343434;
}

.theme-dark .home-mag-card__title,
.theme-dark .home-mag-all {
color: #fff !important;
}

.theme-dark .home-mag-card__stats {
color: #d0d0d0;
}

.theme-dark .home-mag-all {
border-color: #fff;
}

.newBadg{
background-color: darkorange;
border-radius: 3px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
font-size: 0.7rem;
padding-top: 1px;
padding-bottom: 3px;
}

.lazy-image {
opacity: 0;
transition: opacity .4s ease-out;
}

.lazy-image.loaded {
opacity: 1;
}

.spanArti {
color: black
}

h2, h3, h4 {
font-size: 1.2rem !important
}

h5 {
font-size: 1rem !important
}

.imgRadius10 {
border-radius: 10px !important;
}

.imgTopIcons {
height: 40px !important
}
#divOffline{
display:none!important;
}

#divMafia {
direction: rtl;
margin-top: 10px;
margin-bottom: 10px;
--mafia-bg: #f6f8fb;
--mafia-surface: #ffffff;
--mafia-surface-strong: #111827;
--mafia-text: #111827;
--mafia-muted: #667085;
--mafia-border: rgba(17, 24, 39, .08);
--mafia-shadow: 0 16px 34px rgba(17, 24, 39, .08);
--mafia-red: #d92d20;
--mafia-emerald: #087443;
--mafia-blue: #1d4ed8;
--mafia-amber: #b54708;
--mafia-violet: #6941c6;
--mafia-cyan: #0e7490;
}

#divMafia .mafiaHomePanel {
position: relative;
overflow: hidden;
padding: 12px;
border: 1px solid var(--mafia-border);
border-radius: 8px;
background:
radial-gradient(circle at 12% 10%, rgba(217, 45, 32, .16), transparent 28%),
radial-gradient(circle at 88% 22%, rgba(29, 78, 216, .13), transparent 30%),
linear-gradient(135deg, #ffffff, var(--mafia-bg));
box-shadow: var(--mafia-shadow);
}

#divMafia .mafiaHomePanel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(90deg, rgba(17, 24, 39, .04) 1px, transparent 1px),
linear-gradient(0deg, rgba(17, 24, 39, .04) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 82%);
}

#divMafia .mafiaHomeHeader {
position: relative;
z-index: 1;
}

#divMafia .mafiaHomeHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

#divMafia .mafiaHomeEyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
margin-bottom: 4px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(217, 45, 32, .1);
color: var(--mafia-red);
font-size: .68rem;
font-weight: bold !important;
}

#divMafia .mafiaHomeHeader h1 {
color: var(--mafia-text);
font-size: 1.25rem !important;
line-height: 1.45;
}

#divMafia .mafiaHomeHeader p {
max-width: 520px;
margin: 2px 0 0;
color: var(--mafia-muted);
font-size: .82rem;
line-height: 1.7;
}

#divMafia .mafiaHomePrimary {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 108px;
min-height: 38px;
padding: 8px 14px;
border-radius: 8px;
background: var(--mafia-surface-strong);
color: #fff !important;
box-shadow: 0 10px 22px rgba(17, 24, 39, .18);
font-size: .95rem !important;
text-decoration: none !important;
}

#divMafia .mafiaHomePrimary::before {
content: "\f04b";
margin-left: 8px;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
font-size: .78rem;
}

#divMafia .divGameBoxCol {
margin-top: 10px;
}

#divMafia .mafiaSectionBox {
position: relative;
padding: 18px 9px 5px;
border: 1px solid rgba(17, 24, 39, .09);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,248,251,.76)),
radial-gradient(circle at 100% 0, rgba(217,45,32,.08), transparent 38%);
box-shadow: 0 10px 24px rgba(17, 24, 39, .055);
}

#divMafia .mafiaSectionBox--quick {
overflow: visible;
padding-right: 0;
padding-left: 0;
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.8)),
radial-gradient(circle at 100% 0, rgba(29,78,216,.08), transparent 38%);
}

#divMafia .mafiaSectionTitle {
position: absolute;
top: 0;
right: 9px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 10px;
border: 1px solid rgba(17, 24, 39, .08);
border-radius: 999px;
background: #fff;
color: #1f2937;
box-shadow: 0 6px 16px rgba(17, 24, 39, .08);
font-size: .76rem;
font-weight: bold !important;
line-height: 1.4;
z-index: 2;
}

#divMafia .divIndexGameBox.mafia-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent !important;
background-image: none !important;
box-shadow: none;
overflow: visible;
margin-top:0px;
}

#divMafia .aMafiaBtnClass {
position: relative;
display: flex !important;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0;
min-width: 0;
width: 100%;
max-width: none !important;
grid-column: auto !important;
height: 50px;
min-height: 50px;
padding: 7px 8px;
overflow: hidden;
border: 1px solid var(--mafia-border);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72)),
radial-gradient(circle at 100% 0, var(--action-soft, rgba(217, 45, 32, .12)), transparent 52%),
radial-gradient(circle at 0 100%, rgba(17, 24, 39, .035), transparent 48%);
color: var(--mafia-text) !important;
box-shadow: 0 10px 24px rgba(17, 24, 39, .06);
text-align: right;
text-decoration: none !important;
line-height: 1.75;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#divMafia button.aMafiaBtnClass {
border-color: var(--mafia-border);
font-weight: bold !important;
cursor: pointer;
}

#divMafia .aMafiaBtnClass::before {
display: none;
}

#divMafia .aMafiaBtnClass::after {
content: "";
position: absolute;
inset: 0;
border-top: 3px solid var(--action, var(--mafia-red));
background: linear-gradient(90deg, var(--action-soft, rgba(217, 45, 32, .08)), transparent 58%);
pointer-events: none;
}

#divMafia .aMafiaBtnClass:hover,
#divMafia .aMafiaBtnClass:focus {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--action, var(--mafia-red)) 42%, transparent);
box-shadow: 0 16px 32px rgba(17, 24, 39, .12);
outline: none;
}

#divMafia .mafiaActionKicker {
display: none;
}

#divMafia .aMafiaBtnClass strong {
position: relative;
z-index: 1;
display: block;
margin-top: 0;
color: inherit;
font-size: .78rem;
font-weight: bold !important;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

#divMafia .newBadg {
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
min-height: 11px;
padding: 0 3px;
border-radius: 0 0 4px 0;
background: #16a34a;
color: #fff;
box-shadow: 0 4px 10px rgba(22, 163, 74, .25);
font-size: .45rem;
line-height: 1.2;
transform: rotate(-12deg);
transform-origin: center;
}

#divMafia .mafiaActionHost { --action: var(--mafia-red); --action-soft: rgba(217, 45, 32, .11); }
#divMafia .mafiaActionScenario { --action: var(--mafia-blue); --action-soft: rgba(29, 78, 216, .1); }
#divMafia .mafiaActionCustom { --action: var(--mafia-violet); --action-soft: rgba(105, 65, 198, .11); }
#divMafia .mafiaActionRoles { --action: var(--mafia-emerald); --action-soft: rgba(8, 116, 67, .11); }
#divMafia .mafiaActionTicket { --action: var(--mafia-amber); --action-soft: rgba(181, 71, 8, .12); }
#divMafia .mafiaActionRoom { --action: var(--mafia-cyan); --action-soft: rgba(14, 116, 144, .11); }
#divMafia .mafiaActionTv { --action: #be123c; --action-soft: rgba(190, 18, 60, .1); }
#divMafia .mafiaActionVote { --action: #7c2d12; --action-soft: rgba(124, 45, 18, .12); }

#divMafia .mafiaActionHost::before { content: "\f0e7"; }
#divMafia .mafiaActionScenario::before { content: "\f02d"; }
#divMafia .mafiaActionCustom::before { content: "\f1de"; }
#divMafia .mafiaActionRoles::before { content: "\f0c0"; }
#divMafia .mafiaActionTicket::before { content: "\f3ff"; }
#divMafia .mafiaActionRoom::before { content: "\f086"; }
#divMafia .mafiaActionTv::before { content: "\f26c"; }
#divMafia .mafiaActionVote::before { content: "\f772"; }

#divMafia .dz-category-swiper {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 2px 0 4px;
overflow: hidden !important;
touch-action: pan-x;
overscroll-behavior-inline: contain;
}

#divMafia .dz-category-swiper .swiper-slide {
width: auto !important;
}

#divMafia .dz-category-items {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}

#divMafia .dz-icon-box {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 44px;
padding: 9px 12px;
border: 1px solid var(--mafia-border);
border-radius: 999px;
background: #fff;
color: var(--mafia-text) !important;
box-shadow: 0 8px 18px rgba(17, 24, 39, .05);
font-size: .74rem !important;
line-height: 1.5;
white-space: nowrap;
text-decoration: none !important;
transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

#divMafia .dz-icon-box:hover,
#divMafia .dz-icon-box:focus {
transform: translateY(-1px);
border-color: rgba(217, 45, 32, .25);
background: #fff7f6;
outline: none;
}

.theme-dark #divMafia {
--mafia-bg: #111827;
--mafia-surface: #171f2b;
--mafia-surface-strong: #f8fafc;
--mafia-text: #f8fafc;
--mafia-muted: #b7c0cc;
--mafia-border: rgba(255, 255, 255, .1);
--mafia-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.theme-dark #divMafia .mafiaHomePanel {
background:
radial-gradient(circle at 12% 10%, rgba(248, 113, 113, .15), transparent 28%),
radial-gradient(circle at 88% 22%, rgba(56, 189, 248, .11), transparent 30%),
linear-gradient(135deg, #141b26, #0b1017);
}

.theme-dark #divMafia .mafiaHomePanel::before {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}

.theme-dark #divMafia .mafiaHomePrimary {
color: #111827 !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.theme-dark #divMafia .aMafiaBtnClass,
.theme-dark #divMafia .dz-icon-box {
box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.theme-dark #divMafia .aMafiaBtnClass {
background:
linear-gradient(135deg, rgba(23, 31, 43, .96), rgba(17, 24, 39, .84)),
radial-gradient(circle at 100% 0, var(--action-soft, rgba(217, 45, 32, .13)), transparent 54%);
}

.theme-dark #divMafia .dz-icon-box {
background: rgba(23, 31, 43, .92);
}

.theme-dark #divMafia .mafiaSectionBox {
border-color: rgba(255, 255, 255, .1);
background:
linear-gradient(135deg, rgba(17,24,39,.92), rgba(11,16,23,.86)),
radial-gradient(circle at 100% 0, rgba(248,113,113,.12), transparent 38%);
box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.theme-dark #divMafia .mafiaSectionBox--quick {
background:
linear-gradient(135deg, rgba(17,24,39,.92), rgba(11,16,23,.86)),
radial-gradient(circle at 100% 0, rgba(56,189,248,.12), transparent 38%);
}

.theme-dark #divMafia .mafiaSectionTitle {
border-color: rgba(255, 255, 255, .1);
background: #171f2b;
color: #f8fafc;
box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.theme-dark #divMafia .newBadg {
background: #22c55e;
color: #07130b;
box-shadow: 0 4px 12px rgba(34, 197, 94, .22);
}

.theme-dark #divMafia .dz-icon-box:hover,
.theme-dark #divMafia .dz-icon-box:focus {
background: rgba(217, 45, 32, .13);
}

@media (min-width: 768px) and (max-width: 991.98px) {
#divMafia .divIndexGameBox.mafia-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}

#divMafia .aMafiaBtnClass {
height: 48px;
min-height: 48px;
}
}

@media (max-width: 767.98px) {
#divMafia {
margin-top: 10px;
}

#divMafia .mafiaHomePanel {
padding: 10px;
}

#divMafia .mafiaHomeHeader {
display: flex;
align-items: center;
gap: 8px;
}

#divMafia .mafiaHomeHeader h1 {
font-size: 1.06rem !important;
}

#divMafia .mafiaHomeHeader p {
display: none;
}

#divMafia .mafiaHomePrimary {
width: auto;
min-width: 92px;
margin-top: 0;
min-height: 34px;
padding: 6px 10px;
font-size: .76rem !important;
}

#divMafia .divIndexGameBox.mafia-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
overflow: visible;
}

#divMafia .aMafiaBtnClass {
grid-column: span 2 !important;
height: 48px;
min-height: 48px;
padding: 6px 7px;
}

#divMafia .aMafiaBtnClass strong {
font-size: .55rem;
line-height: 1.34;
}

#divMafia .mafiaActionKicker {
display: none;
}

#divMafia .dz-icon-box {
min-width: 72px;
min-height: 44px;
padding: 9px 10px;
font-size: .7rem !important;
}
}

@media (max-width: 360px) {
#divMafia .aMafiaBtnClass {
height: 50px;
min-height: 50px;
}
}