﻿.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;
}

.home-app-showcase {
--app-accent: #e52535;
--app-text: #17171a;
--app-muted: #676771;
--app-bg: #f4f4f6;
--app-surface: #fff;
--app-border: rgba(23, 23, 26, .1);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
gap: 10px;
overflow: hidden;
margin: 22px 0 8px;
padding: 10px;
direction: rtl;
border: 1px solid var(--app-border);
border-radius: 15px;
background: var(--app-bg);
color: var(--app-text);
}

.home-app-showcase::before {
content: "";
position: absolute;
top: -90px;
right: -70px;
width: 230px;
height: 230px;
border: 42px solid rgba(229, 37, 53, .045);
border-radius: 50%;
pointer-events: none;
}

.home-app-showcase__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 250px;
padding: 28px 25px;
}

.home-app-showcase__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-bottom: 8px;
color: var(--app-accent);
font-size: .72rem;
font-weight: 900;
}

.home-app-showcase__eyebrow::before {
content: "";
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
}

.home-app-showcase h1 {
max-width: 480px;
margin: 0;
color: var(--app-text);
font-size: 1.55rem !important;
line-height: 1.6;
}

.home-app-showcase__content > p {
max-width: 540px;
margin: 10px 0 16px;
color: var(--app-muted);
font-size: .83rem;
line-height: 2;
}

.home-app-showcase__features {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.home-app-showcase__features span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border: 1px solid var(--app-border);
border-radius: 999px;
background: var(--app-surface);
color: var(--app-text);
font-size: .67rem;
font-weight: 800;
}

.home-app-showcase__features span::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--app-accent);
box-shadow: 0 0 0 3px rgba(229, 37, 53, .1);
}

.home-app-downloads {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border-radius: 11px;
background: #171419;
}

.home-app-downloads::after {
content: "";
position: absolute;
inset: 0;
opacity: .2;
border-radius: inherit;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(135deg, #000, transparent 80%);
pointer-events: none;
}

.home-app-downloads__heading {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 1px 3px 4px;
}

.home-app-downloads__heading span {
color: #fff;
font-size: .78rem;
font-weight: 900;
}

.home-app-downloads__heading small {
color: rgba(255, 255, 255, .45);
font-size: .6rem;
}

.home-app-download {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 28px;
align-items: center;
gap: 12px;
min-height: 83px;
padding: 11px 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 10px;
background: rgba(255, 255, 255, .07);
color: #fff !important;
text-align: right;
text-decoration: none !important;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-app-download::before {
content: "";
position: absolute;
right: 0;
top: 15px;
bottom: 15px;
width: 3px;
border-radius: 3px 0 0 3px;
background: var(--download-color);
}

.home-app-download--ios {
--download-color: #b9c2d0;
}

.home-app-download--android {
--download-color: #3ddc84;
}

.home-app-download:hover {
border-color: color-mix(in srgb, var(--download-color) 45%, transparent);
background: rgba(255, 255, 255, .11);
color: #fff !important;
text-decoration: none !important;
transform: translateY(-2px);
}

.home-app-download:focus-visible {
outline: 2px solid var(--download-color);
outline-offset: 2px;
}

.home-app-download__icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 13px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.home-app-download__icon img {
display: block;
width: 31px;
height: 31px;
border-radius: 0;
object-fit: contain;
}

.home-app-download__text {
display: flex;
flex-direction: column;
min-width: 0;
}

.home-app-download__text small {
margin-bottom: 1px;
color: rgba(255, 255, 255, .53);
font-size: .62rem;
font-weight: 400;
}

.home-app-download__text strong {
overflow: hidden;
color: #fff;
font-size: .94rem;
font-weight: 900;
line-height: 1.65;
text-overflow: ellipsis;
white-space: nowrap;
}

.home-app-download__text > span {
color: var(--download-color);
font-size: .64rem;
font-weight: 800;
}

.home-app-download__arrow {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: .8rem;
transition: transform .2s ease, background .2s ease;
}

.home-app-download:hover .home-app-download__arrow {
background: var(--download-color);
color: #121214;
transform: translateX(-3px);
}

.theme-dark .home-app-showcase {
--app-text: #f6f3f7;
--app-muted: #b9b1bb;
--app-bg: #151217;
--app-surface: #201b22;
--app-border: rgba(255, 255, 255, .09);
}

.theme-dark .home-app-downloads {
border: 1px solid rgba(255, 255, 255, .05);
background: #0f0d10;
}

@media (max-width: 760px) {
.home-app-showcase {
grid-template-columns: 1fr;
}

.home-app-showcase__content {
min-height: auto;
padding: 20px 16px 14px;
}

.home-app-showcase h1 {
font-size: 1.25rem !important;
}

.home-app-downloads {
padding: 12px;
}
}

@media (max-width: 430px) {
.home-app-showcase {
margin-top: 16px;
padding: 7px;
border-radius: 12px;
}

.home-app-showcase__content {
padding: 17px 12px 11px;
}

.home-app-showcase__content > p {
font-size: .78rem;
}

.home-app-downloads__heading {
display: block;
}

.home-app-downloads__heading small {
display: block;
margin-top: 2px;
}

.home-app-download {
grid-template-columns: 48px minmax(0, 1fr) 26px;
gap: 9px;
min-height: 76px;
padding: 9px 10px;
}

.home-app-download__icon {
width: 48px;
height: 48px;
}

.home-app-download__icon img {
width: 28px;
height: 28px;
}

.home-app-download__text strong {
font-size: .85rem;
}
}

@media (prefers-reduced-motion: reduce) {
.home-app-showcase *,
.home-app-showcase *::before,
.home-app-showcase *::after {
transition: none !important;
}
}

.home-paths {
--paths-text: #17171a;
--paths-muted: #6b6b74;
--paths-bg: #f5f5f7;
--paths-card: #fff;
--paths-border: rgba(23, 23, 26, .1);
margin: 26px 0 10px;
padding: 10px;
direction: rtl;
border: 1px solid var(--paths-border);
border-radius: 15px;
background: var(--paths-bg);
color: var(--paths-text);
}

.home-paths__header {
display: grid;
grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.2fr);
align-items: end;
gap: 22px;
padding: 17px 17px 20px;
}

.home-paths__eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 5px;
color: #e52535;
font-size: .7rem;
font-weight: 900;
}

.home-paths__eyebrow::before {
content: "";
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
}

.home-paths__header h2 {
margin: 0;
color: var(--paths-text);
font-size: 1.3rem !important;
line-height: 1.6;
}

.home-paths__header > p {
max-width: 590px;
margin: 0;
color: var(--paths-muted);
font-size: .78rem;
line-height: 1.95;
}

.home-paths__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.home-path {
--path-color: #a16308;
position: relative;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 30px;
align-items: center;
gap: 13px;
min-height: 134px;
padding: 18px;
overflow: hidden;
border: 1px solid var(--paths-border);
border-radius: 11px;
background: var(--paths-card);
color: var(--paths-text) !important;
text-align: right;
text-decoration: none !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-path::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: var(--path-color);
transform: scaleY(.36);
transition: transform .2s ease;
}

.home-path::after {
content: "";
position: absolute;
left: -42px;
bottom: -62px;
width: 130px;
height: 130px;
border: 25px solid color-mix(in srgb, var(--path-color) 7%, transparent);
border-radius: 50%;
pointer-events: none;
}

.home-path--shop {
--path-color: #b36b00;
}

.home-path--mafia {
--path-color: #dc2637;
}

.home-path--cafe {
--path-color: #07856d;
}

.home-path--online {
--path-color: #6649c7;
}

.home-path:hover {
z-index: 1;
border-color: color-mix(in srgb, var(--path-color) 42%, var(--paths-border));
box-shadow: 0 14px 30px rgba(23, 23, 26, .09);
color: var(--paths-text) !important;
text-decoration: none !important;
transform: translateY(-3px);
}

.home-path:hover::before {
transform: scaleY(1);
}

.home-path:focus-visible {
outline: 2px solid var(--path-color);
outline-offset: 2px;
}

.home-path__number {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: color-mix(in srgb, var(--path-color) 10%, transparent);
color: var(--path-color);
font-size: .75rem;
font-weight: 900;
letter-spacing: .04em;
}

.home-path__content {
display: flex;
flex-direction: column;
min-width: 0;
}

.home-path__content small {
margin-bottom: 3px;
color: var(--path-color);
font-size: .65rem;
font-weight: 900;
}

.home-path__content h3 {
margin: 0;
color: var(--paths-text);
font-size: .94rem !important;
line-height: 1.7;
}

.home-path__content > span {
margin-top: 3px;
color: var(--paths-muted);
font-size: .67rem;
line-height: 1.7;
}

.home-path__arrow {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--paths-bg);
color: var(--paths-text);
font-size: .78rem;
transition: transform .2s ease, background .2s ease, color .2s ease;
}

.home-path:hover .home-path__arrow {
background: var(--path-color);
color: #fff;
transform: translateX(-3px);
}

.theme-dark .home-paths {
--paths-text: #f6f3f7;
--paths-muted: #b9b1bb;
--paths-bg: #151217;
--paths-card: #1d191f;
--paths-border: rgba(255, 255, 255, .09);
}

.theme-dark .home-path:hover {
box-shadow: 0 16px 32px rgba(0, 0, 0, .2);
}

@media (max-width: 700px) {
.home-paths {
margin-top: 20px;
padding: 7px;
border-radius: 12px;
}

.home-paths__header {
grid-template-columns: 1fr;
gap: 7px;
padding: 14px 11px 16px;
}

.home-paths__header h2 {
font-size: 1.12rem !important;
}

.home-paths__grid {
grid-template-columns: 1fr;
gap: 7px;
}

.home-path {
grid-template-columns: 40px minmax(0, 1fr) 28px;
gap: 10px;
min-height: 104px;
padding: 13px;
}

.home-path__number {
width: 40px;
height: 40px;
border-radius: 10px;
}

.home-path__content h3 {
font-size: .83rem !important;
}
}

@media (prefers-reduced-motion: reduce) {
.home-path,
.home-path::before,
.home-path__arrow {
transition: none !important;
}
}

.home-faq {
--faq-accent: #e52535;
--faq-accent-soft: rgba(229, 37, 53, .09);
--faq-bg: #f5f5f7;
--faq-card: #fff;
--faq-text: #17171a;
--faq-muted: #6d6d75;
--faq-border: rgba(23, 23, 26, .1);
display: grid;
grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
gap: 10px;
margin: 32px 0 20px;
padding: 10px;
direction: rtl;
border: 1px solid var(--faq-border);
border-radius: 14px;
background: var(--faq-bg);
color: var(--faq-text);
}

.home-faq__intro {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 100%;
overflow: hidden;
padding: 24px 20px;
border-radius: 10px;
background: #17171a;
color: #fff;
}

.home-faq__intro::after {
content: "؟";
position: absolute;
left: -12px;
bottom: -86px;
color: rgba(255, 255, 255, .055);
font-size: 15rem;
font-weight: 900;
line-height: 1;
transform: rotate(-9deg);
pointer-events: none;
}

.home-faq__eyebrow {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 14px;
color: #ff9aa3;
font-size: .72rem;
font-weight: 800;
}

.home-faq__eyebrow::before {
content: "";
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--faq-accent);
}

.home-faq__intro h2 {
position: relative;
z-index: 1;
max-width: 280px;
margin: 0;
color: #fff;
font-size: 1.35rem !important;
line-height: 1.6;
}

.home-faq__intro p {
position: relative;
z-index: 1;
margin: 10px 0 18px;
color: rgba(255, 255, 255, .68);
font-size: .82rem;
line-height: 1.9;
}

.home-faq__chips {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.home-faq__chips span {
padding: 5px 9px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
color: rgba(255, 255, 255, .84);
font-size: .68rem;
}

.home-faq__all {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 22px;
width: 100%;
margin-top: auto;
padding-top: 22px;
color: #fff !important;
font-size: .82rem !important;
text-decoration: none !important;
}

.home-faq__all span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--faq-accent);
transition: transform .2s ease;
}

.home-faq__all:hover span {
transform: translateX(-3px);
}

.home-faq__list {
display: flex;
flex-direction: column;
gap: 6px;
}

.home-faq__item {
overflow: hidden;
border: 1px solid var(--faq-border);
border-radius: 9px;
background: var(--faq-card);
transition: border-color .2s ease, box-shadow .2s ease;
}

.home-faq__item[open] {
border-color: rgba(229, 37, 53, .32);
box-shadow: 0 8px 24px rgba(23, 23, 26, .055);
}

.home-faq__item summary {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 24px;
align-items: center;
gap: 10px;
min-height: 58px;
padding: 9px 12px;
color: var(--faq-text);
cursor: pointer;
list-style: none;
user-select: none;
}

.home-faq__item summary::-webkit-details-marker {
display: none;
}

.home-faq__item summary:focus-visible {
outline: 2px solid var(--faq-accent);
outline-offset: -3px;
}

.home-faq__number {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--faq-accent-soft);
color: var(--faq-accent);
font-size: .7rem;
font-weight: 900;
}

.home-faq__question {
font-size: .88rem;
font-weight: 800;
line-height: 1.75;
}

.home-faq__toggle {
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--faq-bg);
}

.home-faq__toggle::before,
.home-faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 1.5px;
border-radius: 2px;
background: var(--faq-text);
transform: translate(-50%, -50%);
transition: transform .2s ease;
}

.home-faq__toggle::after {
transform: translate(-50%, -50%) rotate(90deg);
}

.home-faq__item[open] .home-faq__toggle {
background: var(--faq-accent);
}

.home-faq__item[open] .home-faq__toggle::before,
.home-faq__item[open] .home-faq__toggle::after {
background: #fff;
}

.home-faq__item[open] .home-faq__toggle::after {
transform: translate(-50%, -50%) rotate(0);
}

.home-faq__answer {
margin: 0 54px 0 12px;
padding: 0 0 15px;
border-top: 1px solid var(--faq-border);
}

.home-faq__answer p {
margin: 12px 0 8px;
color: var(--faq-muted);
font-size: .8rem;
line-height: 2;
}

.home-faq__answer a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--faq-accent) !important;
font-size: .76rem !important;
text-decoration: none !important;
}

.theme-dark .home-faq {
--faq-accent: #ff4d5d;
--faq-accent-soft: rgba(255, 77, 93, .12);
--faq-bg: #151217;
--faq-card: #1d191f;
--faq-text: #f5f2f6;
--faq-muted: #b9b1bb;
--faq-border: rgba(255, 255, 255, .09);
}

.theme-dark .home-faq__intro {
background: #0f0d10;
border: 1px solid rgba(255, 255, 255, .06);
}

@media (max-width: 700px) {
.home-faq {
grid-template-columns: 1fr;
margin-top: 24px;
padding: 7px;
border-radius: 12px;
}

.home-faq__intro {
min-height: auto;
padding: 20px 16px;
}

.home-faq__intro h2 {
max-width: none;
font-size: 1.18rem !important;
}

.home-faq__intro p {
margin-bottom: 12px;
}

.home-faq__all {
margin-top: 18px;
padding-top: 0;
}

.home-faq__item summary {
grid-template-columns: 28px minmax(0, 1fr) 22px;
gap: 8px;
min-height: 54px;
padding: 8px 9px;
}

.home-faq__number {
width: 28px;
height: 28px;
}

.home-faq__question {
font-size: .8rem;
}

.home-faq__answer {
margin-right: 45px;
}
}

@media (prefers-reduced-motion: reduce) {
.home-faq *,
.home-faq *::before,
.home-faq *::after {
transition: none !important;
}
}

.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;
}
}

