:root{
    --bg:#06110b;
    --surface:#0d1f14;
    --surface2:#112a1a;
    --card:#ffffff;
    --card2:#f3f8f4;
    --green:#16a34a;
    --green2:#22c55e;
    --lime:#a3e635;
    --dark:#052e16;
    --text:#0f172a;
    --muted:#64746a;
    --line:#d7e5dc;
    --white:#ffffff;
    --red:#ef233c;
    --yellow:#facc15;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
}

.appShell{
    width:min(1480px,100%);
    margin:0 auto;
    min-height:100vh;
    background:var(--bg);
}

/* HEADER APP */
.appHeader{
    position:sticky;
    top:0;
    z-index:60;
    min-height:76px;
    background:var(--bg);
    border-bottom:1px solid #173822;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 26px;
}

.appBrand{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--white);
}

.appBrand span{
    width:48px;
    height:48px;
    border-radius:14px;
    background:var(--green);
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:20px;
}

.appBrand strong{
    display:flex;
    flex-direction:column;
    font-size:17px;
    line-height:1.05;
}

.appBrand small{
    color:#b7d4c1;
    font-size:11px;
    margin-top:4px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.appNav{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    padding:8px;
    border-radius:999px;
    border:1px solid #1b3f28;
}

.appNav a{
    color:#dff5e5;
    font-size:13px;
    font-weight:800;
    padding:10px 13px;
    border-radius:999px;
}

.appNav a:hover{
    background:var(--green);
    color:var(--white);
}

.menuBtn{
    display:none;
    background:var(--lime);
    color:#06110b;
    border:0;
    border-radius:12px;
    padding:10px 14px;
    font-size:20px;
    font-weight:900;
}

/* HERO */
.appHero{
    position:relative;
    overflow:hidden;
    min-height:calc(100vh - 76px);
    padding:26px;
    background:var(--bg);
}

.heroSlides{
    position:absolute;
    inset:0;
    z-index:0;
}

.heroSlide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center 18%;
    opacity:0;
    transform:scale(1.02);
    transition:opacity 1s ease, transform 6s ease;
}

.heroSlide.is-active{
    opacity:.38;
    transform:scale(1.08);
}

.appHeroShade{
    position:absolute;
    inset:0;
    z-index:1;
    background:#06110bcc;
}

.heroAppGrid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    grid-template-rows:auto auto;
    gap:18px;
    width:min(1280px,100%);
    margin:0 auto;
}

/* MAIN PLAYER CARD */
.playerAppCard,
.voteAppModule,
.topAppModule,
.rankAppBoard,
.storyCard,
.profileAppCard,
.scarsoAppCard,
.videoAppCard,
.galleryAppItem,
.socialAppGrid a,
.commentAppForm,
.fanAppComment{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:30px;
}

.playerAppCard{
    grid-row:span 2;
    padding:20px;
    border:1px solid #225b35;
    background:#f8fff9;
}

.liveBadge{
    display:inline-flex;
    background:var(--dark);
    color:var(--lime);
    padding:9px 13px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.playerTop{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:22px;
    align-items:stretch;
}

.playerImage{
    height:520px;
    border-radius:28px;
    overflow:hidden;
    background:var(--surface);
}

.playerImage img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.playerData{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.appKicker{
    display:inline-flex;
    width:max-content;
    background:var(--green);
    color:var(--white);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.playerData h1{
    font-size:clamp(50px,7vw,94px);
    line-height:.88;
    margin:18px 0;
    color:var(--dark);
    text-transform:uppercase;
    letter-spacing:-4px;
}

.playerData p{
    font-size:18px;
    line-height:1.65;
    color:var(--muted);
    margin:0 0 22px;
}

.quickStats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.quickStats div{
    background:var(--card2);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
}

.quickStats strong{
    display:block;
    color:var(--dark);
    font-size:24px;
}

.quickStats small{
    display:block;
    color:var(--muted);
    margin-top:5px;
    font-weight:700;
}

.appActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}

.appActions a,
.profileAppCard a,
.miniLinks a{
    background:var(--dark);
    color:var(--white);
    padding:13px 16px;
    border-radius:999px;
    font-weight:900;
}

.appActions a:first-child{
    background:var(--green);
}

/* SIDE MODULES */
.voteAppModule,
.topAppModule{
    padding:20px;
    border:1px solid #1f5731;
    background:#f8fff9;
}

.moduleHead{
    display:flex;
    flex-direction:column;
    margin-bottom:16px;
}

.moduleHead span{
    color:var(--green);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.moduleHead strong{
    color:var(--dark);
    font-size:24px;
    line-height:1.1;
}

.appForm{
    display:grid;
    gap:12px;
}

.appForm label{
    font-size:13px;
    font-weight:900;
}

input,
select,
textarea{
    width:100%;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--text);
    border-radius:18px;
    padding:15px;
    font-size:16px;
    outline:none;
}

textarea{
    min-height:130px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--green);
}

button{
    border:0;
    background:var(--green);
    color:var(--white);
    border-radius:18px;
    padding:15px 18px;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

button:hover{
    background:var(--dark);
}

.appNote{
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
    margin:12px 0 0;
}

.msg{
    min-height:22px;
    font-weight:900;
}

.msg.ok{color:var(--green)}
.msg.bad{color:var(--red)}

/* TOP 3 */
.topAppList{
    display:grid;
    gap:12px;
}

.topAppItem{
    display:grid;
    grid-template-columns:42px 48px 1fr;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--white);
}

.placeNum{
    width:38px;
    height:38px;
    background:var(--dark);
    color:var(--white);
    border-radius:14px;
    display:grid;
    place-items:center;
    font-weight:900;
}

.placeFlag{
    font-size:30px;
}

.placeInfo strong{
    display:block;
    color:var(--dark);
}

.placeInfo span{
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.place1{border-left:8px solid var(--lime)}
.place2{border-left:8px solid var(--green)}
.place3{border-left:8px solid var(--yellow)}

/* SECTIONS */
.appSection{
    padding:78px 26px;
    width:min(1280px,100%);
    margin:0 auto;
    background:var(--bg);
}

.appSoft{
    background:var(--surface);
    width:100%;
    max-width:none;
}

.appSoft > *{
    width:min(1280px,100%);
    margin-left:auto;
    margin-right:auto;
}

.appSectionHead{
    text-align:center;
    max-width:780px;
    margin:0 auto 34px;
}

.appSectionHead span{
    display:inline-flex;
    background:var(--lime);
    color:#06110b;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

.appSectionHead h2{
    color:var(--white);
    font-size:clamp(36px,5vw,62px);
    margin:14px 0 10px;
    line-height:.95;
    text-transform:uppercase;
    letter-spacing:-2px;
}

.appSectionHead p{
    color:#b7d4c1;
    font-size:17px;
    line-height:1.65;
    margin:0;
}

/* RANKING */
.rankAppBoard{
    padding:18px;
    border:1px solid #1f5731;
    background:#f8fff9;
}

.rankAppRow{
    display:grid;
    grid-template-columns:52px 1fr 90px;
    gap:14px;
    align-items:center;
    padding:14px 4px;
    border-bottom:1px solid var(--line);
}

.rankAppRow:last-child{
    border-bottom:0;
}

.rankPos{
    width:42px;
    height:42px;
    border-radius:14px;
    background:var(--dark);
    color:var(--white);
    display:grid;
    place-items:center;
    font-weight:900;
}

.rankMain strong{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--dark);
    margin-bottom:8px;
}

.rankBar{
    height:10px;
    background:#d7eadc;
    border-radius:999px;
    overflow:hidden;
}

.rankBar span{
    display:block;
    height:100%;
    background:var(--green);
}

.rankVotes{
    text-align:right;
}

.rankVotes b,
.rankVotes small{
    display:block;
}

.rankVotes small{
    color:var(--muted);
}

/* CONTENT CARDS */
.appSplit{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:22px;
    width:min(1280px,100%);
    margin:0 auto;
}

.storyCard,
.profileAppCard,
.scarsoAppCard{
    padding:24px;
    background:#f8fff9;
    border:1px solid #1f5731;
}

.storyCard h2{
    color:var(--dark);
    font-size:clamp(34px,4.8vw,58px);
    line-height:.95;
    margin:16px 0;
    text-transform:uppercase;
    letter-spacing:-1.5px;
}

.storyCard p,
.scarsoAppCard p,
.profileAppCard p{
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}

.profileAppCard img{
    width:100%;
    height:330px;
    object-fit:cover;
    border-radius:24px;
    display:block;
}

.profileAppCard h3,
.scarsoAppCard h3{
    color:var(--dark);
    font-size:30px;
    margin:18px 0 6px;
}

.scarsoIcon{
    width:120px;
    height:120px;
    border-radius:34px;
    background:var(--green);
    color:var(--white);
    display:grid;
    place-items:center;
    font-size:42px;
    font-weight:900;
}

.miniLinks{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* VIDEOS */
.appGridTwo{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.videoAppCard{
    overflow:hidden;
    background:#f8fff9;
    border:1px solid #1f5731;
}

.videoAppCard iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
    display:block;
    background:#000;
}

.videoAppCard div{
    padding:18px;
}

.videoAppCard h3{
    color:var(--dark);
    font-size:22px;
    margin:0 0 8px;
}

.videoAppCard p{
    color:var(--muted);
    line-height:1.6;
    margin:0;
}

/* GALLERY */
.galleryAppGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.galleryAppItem{
    overflow:hidden;
    background:#f8fff9;
    border:1px solid #1f5731;
}

.galleryAppItem img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.galleryAppItem div{
    padding:16px;
}

.galleryAppItem h3{
    color:var(--dark);
    margin:0 0 8px;
}

.galleryAppItem p{
    color:var(--muted);
    margin:0;
    line-height:1.5;
}

/* SOCIAL */
.socialAppGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.socialAppGrid a{
    min-height:150px;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid #1f5731;
    border-top:8px solid var(--green);
    background:#f8fff9;
}

.socialAppGrid b{
    color:var(--dark);
    font-size:25px;
    margin-bottom:6px;
}

.socialAppGrid span{
    color:var(--muted);
    font-weight:800;
}

/* COMMENTS */
.commentAppGrid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:20px;
}

.commentAppForm,
.fanAppComment{
    padding:20px;
    background:#f8fff9;
    border:1px solid #1f5731;
}

.commentAppForm{
    display:grid;
    gap:12px;
}

.commentAppList{
    display:grid;
    gap:14px;
}

.fanAppComment strong{
    color:var(--dark);
    font-size:18px;
}

.fanAppComment small{
    display:block;
    color:var(--muted);
    margin:6px 0 10px;
}

.fanAppComment p{
    color:var(--muted);
    line-height:1.6;
    margin:0;
}

.appEmpty{
    background:#f8fff9;
    border:1px dashed #95b79f;
    border-radius:20px;
    padding:22px;
    color:var(--muted);
}

/* FOOTER */
.appFooter{
    background:var(--bg);
    color:var(--white);
    border-top:1px solid #173822;
    padding:28px 26px;
    display:flex;
    justify-content:space-between;
    gap:16px;
}

.appFooter span{
    color:#b7d4c1;
}

/* FLAGS */
.flag{
    font-size:22px;
    margin-right:8px;
}

select{
    font-weight:700;
}

/* ADMIN */
.adminBody{
    background:#eef7f1;
    color:var(--text);
}
.adminWrap{
    width:min(1120px,calc(100% - 28px));
    margin:30px auto;
}
.adminCard{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    margin-bottom:18px;
}
.adminNav{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 18px;
}
.adminNav a{
    background:var(--dark);
    color:#fff;
    padding:10px 14px;
    border-radius:12px;
}
table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}
th,td{
    border-bottom:1px solid var(--line);
    padding:10px;
    text-align:left;
    font-size:14px;
}
th{
    background:var(--dark);
    color:#fff;
}
.adminInput{
    background:#fff;
    color:var(--text);
    border:1px solid var(--line);
}
.actionBtn{
    display:inline-block;
    padding:7px 10px;
    border-radius:8px;
    background:var(--green);
    color:white;
    margin:2px;
    font-size:12px;
}
.danger{
    background:var(--red);
}

@media(max-width:1050px){
    .heroAppGrid,
    .playerTop,
    .appSplit,
    .commentAppGrid{
        grid-template-columns:1fr;
    }

    .playerAppCard{
        grid-row:auto;
    }

    .playerImage{
        height:420px;
    }

    .appGridTwo,
    .galleryAppGrid,
    .socialAppGrid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .appHeader{
        padding:12px 16px;
    }

    .menuBtn{
        display:block;
    }

    .appNav{
        display:none;
        position:absolute;
        top:76px;
        left:16px;
        right:16px;
        background:var(--surface);
        border:1px solid #1b3f28;
        border-radius:20px;
        padding:14px;
        flex-direction:column;
        align-items:stretch;
    }

    .appNav.open{
        display:flex;
    }

    .appHero{
        padding:16px;
    }

    .playerData h1{
        font-size:48px;
        letter-spacing:-1px;
    }

    .quickStats,
    .topAppList{
        grid-template-columns:1fr;
    }

    .rankAppRow{
        grid-template-columns:42px 1fr;
    }

    .rankVotes{
        grid-column:2;
        text-align:left;
    }

    .appFooter{
        flex-direction:column;
    }
}

/* =========================================================
   HERO TIPO CASINO / SPORTSBOOK / LIVE SCOREBOARD
   Solo afecta el hero.
   ========================================================= */

.casinoHero {
    position: relative;
    min-height: calc(100vh - 76px);
    background: #06110b;
    padding: 22px;
    overflow: hidden;
}

.casinoShade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(6, 17, 11, .82);
}

.casinoHeroGrid {
    position: relative;
    z-index: 2;
    width: min(1360px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 18px;
    align-items: stretch;
}

.casinoMain {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 16px;
}

.casinoTicker {
    height: 48px;
    background: #0d1f14;
    border: 1px solid #1f5731;
    border-radius: 18px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #dff5e5;
}

.casinoTicker span {
    align-self: stretch;
    display: grid;
    place-items: center;
    background: #16a34a;
    color: #ffffff;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 1000;
}

.casinoTicker marquee {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;
}

.casinoPlayerPanel {
    background: #f8fff9;
    border: 1px solid #1f5731;
    border-radius: 34px;
    padding: 18px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 22px;
}

.casinoPlayerPhoto {
    position: relative;
    height: 510px;
    border-radius: 28px;
    overflow: hidden;
    background: #052e16;
}

.casinoPlayerPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .98;
}

.playerNumber {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 78px;
    height: 78px;
    background: #16a34a;
    color: #ffffff;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 1000;
    border: 4px solid #ffffff;
}

.casinoPlayerInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.casinoLabel {
    width: max-content;
    background: #a3e635;
    color: #06110b;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.casinoPlayerInfo h1 {
    color: #052e16;
    font-size: clamp(54px, 7vw, 104px);
    line-height: .86;
    margin: 20px 0;
    text-transform: uppercase;
    letter-spacing: -4px;
}

.casinoPlayerInfo p {
    color: #52645a;
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 24px;
}

.casinoStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.casinoStatsGrid div {
    background: #ffffff;
    border: 1px solid #d7e5dc;
    border-radius: 22px;
    padding: 18px;
}

.casinoStatsGrid small {
    display: block;
    color: #64746a;
    font-weight: 800;
    margin-bottom: 8px;
}

.casinoStatsGrid strong {
    display: block;
    color: #052e16;
    font-size: 24px;
    line-height: 1.05;
}

.casinoLiveBoard,
.casinoVoteMachine,
.casinoTop3,
.casinoMiniRanking {
    background: #f8fff9;
    border: 1px solid #1f5731;
    border-radius: 28px;
    padding: 18px;
}

.casinoBoardHead,
.machineTop {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.casinoBoardHead span,
.machineTop span {
    color: #16a34a;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.casinoBoardHead strong,
.machineTop strong {
    color: #052e16;
    font-size: 24px;
    line-height: 1.05;
}

.liveVoteList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.liveVoteItem {
    display: grid;
    grid-template-columns: 42px 1fr 52px;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #d7e5dc;
    border-radius: 18px;
    padding: 10px;
}

.liveVoteItem b {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #edf7f0;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.liveVoteItem span {
    color: #052e16;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.25;
}

.liveVoteItem small {
    color: #64746a;
    text-align: right;
    font-weight: 800;
}

.casinoSide {
    display: grid;
    gap: 16px;
    align-content: start;
}

.casinoVoteMachine {
    border: 3px solid #16a34a;
}

.casinoVoteMachine button {
    background: #16a34a;
}

.casinoVoteMachine button:hover {
    background: #052e16;
}

.slotTopList {
    display: grid;
    gap: 10px;
}

.slotTopItem {
    display: grid;
    grid-template-columns: 52px 54px 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #d7e5dc;
}

.slotTopItem.place1 {
    border-left: 8px solid #a3e635;
}

.slotTopItem.place2 {
    border-left: 8px solid #16a34a;
}

.slotTopItem.place3 {
    border-left: 8px solid #facc15;
}

.slotPlace {
    height: 42px;
    border-radius: 14px;
    background: #052e16;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 1000;
}

.slotFlag {
    font-size: 34px;
}

.slotCountry strong {
    display: block;
    color: #052e16;
    font-size: 16px;
}

.slotCountry span {
    color: #64746a;
    font-size: 13px;
    font-weight: 800;
}

.casinoRankMini {
    display: grid;
    grid-template-columns: 32px 1fr 70px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
}

.casinoRankMini span {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #052e16;
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 1000;
}

.casinoRankMini b {
    color: #052e16;
    font-size: 14px;
}

.casinoRankMini strong {
    text-align: right;
    color: #052e16;
    font-size: 14px;
}

.casinoMiniBar {
    height: 8px;
    background: #d7eadc;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}

.casinoMiniBar i {
    display: block;
    height: 100%;
    background: #16a34a;
}

@media(max-width: 1150px) {
    .casinoHeroGrid {
        grid-template-columns: 1fr;
    }

    .casinoPlayerPanel {
        grid-template-columns: 1fr;
    }

    .casinoPlayerPhoto {
        height: 420px;
    }
}

@media(max-width: 760px) {
    .casinoHero {
        padding: 14px;
    }

    .casinoPlayerInfo h1 {
        font-size: 48px;
        letter-spacing: -1px;
    }

    .casinoStatsGrid,
    .liveVoteList {
        grid-template-columns: 1fr;
    }

    .liveVoteItem {
        grid-template-columns: 42px 1fr;
    }

    .liveVoteItem small {
        grid-column: 2;
        text-align: left;
    }
}

/* =========================================================
   CASINO GAMER WIDGETS / BANDERAS / ICONOS
   Solo mejora el hero tipo app casino-scoreboard.
   ========================================================= */

.casinoHero {
    background: #041208 !important;
}

.casinoShade {
    background: rgba(4, 18, 8, .86) !important;
}

/* Ticker más gamer */
.casinoTicker {
    border: 2px solid #22c55e !important;
    background: #081f10 !important;
    border-radius: 22px !important;
}

.casinoTicker span {
    background: #22c55e !important;
    color: #041208 !important;
    font-size: 13px !important;
}

.casinoTicker marquee {
    color: #d9ffe2 !important;
}

/* Tira de banderas estilo jackpot */
.flagJackpotStrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.flagChip {
    background: #f8fff9;
    border: 2px solid #1f5731;
    border-radius: 18px;
    padding: 10px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 8px;
}

.flagChip b {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #e8f8ec;
    display: grid;
    place-items: center;
    font-size: 24px;
}

.flagChip span {
    color: #052e16;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flagChip small {
    background: #052e16;
    color: #ffffff !important;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 1000;
}

/* Panel jugador más gamer */
.casinoPlayerPanel {
    border: 3px solid #22c55e !important;
    background: #f8fff9 !important;
}

.casinoPlayerPhoto {
    border: 3px solid #052e16 !important;
}

.playerNumber {
    background: #22c55e !important;
    color: #041208 !important;
    border: 4px solid #ffffff !important;
}

.casinoLabel {
    background: #a3e635 !important;
    color: #041208 !important;
}

/* Widgets gamer */
.casinoWidgetGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.casinoWidget {
    background: #f8fff9;
    border: 2px solid #1f5731;
    border-radius: 22px;
    padding: 14px;
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 10px;
}

.widgetIcon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 25px;
    background: #e8f8ec;
}

.casinoWidget small {
    display: block;
    color: #64746a !important;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.casinoWidget strong {
    display: block;
    color: #052e16;
    font-size: 22px;
    line-height: 1;
    margin-top: 5px;
}

.widgetGreen {
    border-left: 8px solid #22c55e;
}

.widgetLime {
    border-left: 8px solid #a3e635;
}

.widgetYellow {
    border-left: 8px solid #facc15;
}

.widgetRed {
    border-left: 8px solid #ef233c;
}

/* Máquina de voto */
.casinoVoteMachine {
    background: #f8fff9 !important;
    border: 4px solid #22c55e !important;
    position: relative;
    overflow: hidden;
}

.casinoVoteMachine::before {
    content: "🎰";
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 42px;
    opacity: .18;
}

.casinoVoteMachine select {
    font-weight: 900 !important;
    font-size: 17px !important;
}

.casinoVoteMachine button {
    background: #22c55e !important;
    color: #041208 !important;
    border: 3px solid #052e16 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Top 3 estilo slot */
.casinoTop3 {
    border: 3px solid #a3e635 !important;
}

.slotTopItem {
    background: #ffffff !important;
    border: 2px solid #d7e5dc !important;
    border-radius: 22px !important;
}

.slotPlace {
    background: #041208 !important;
    color: #a3e635 !important;
}

.slotFlag {
    width: 54px;
    height: 54px;
    background: #e8f8ec;
    border: 2px solid #d7e5dc;
    border-radius: 18px;
    display: grid;
    place-items: center;
}

.slotFlag span {
    font-size: 34px;
    line-height: 1;
}

.slotTopItem.place1 {
    border-left: 10px solid #a3e635 !important;
}

.slotTopItem.place2 {
    border-left: 10px solid #22c55e !important;
}

.slotTopItem.place3 {
    border-left: 10px solid #facc15 !important;
}

/* Live votes más tipo tablero */
.casinoLiveBoard {
    border: 3px solid #1f5731 !important;
}

.liveVoteItem {
    border: 2px solid #d7e5dc !important;
}

.liveVoteItem b {
    font-size: 25px !important;
}

/* Mini ranking */
.casinoMiniRanking {
    border: 3px solid #1f5731 !important;
}

.casinoRankMini span {
    background: #041208 !important;
    color: #a3e635 !important;
}

.casinoMiniBar i {
    background: #22c55e !important;
}

/* Banderas grandes */
.placeFlag,
.slotFlag,
.flagChip b,
.liveVoteItem b {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Responsive */
@media(max-width: 1150px) {
    .flagJackpotStrip,
    .casinoWidgetGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 760px) {
    .flagJackpotStrip,
    .casinoWidgetGrid {
        grid-template-columns: 1fr;
    }

    .flagChip {
        grid-template-columns: 42px 1fr 50px;
    }
}

/* =========================================================
   DARK CASINO GAMER MODE
   Todo oscuro, app gamer, casino scoreboard.
   No cambia PHP ni estructura.
   ========================================================= */

:root{
    --dark-bg:#020804;
    --dark-bg-2:#06110b;
    --dark-panel:#0b1f13;
    --dark-panel-2:#102b1a;
    --dark-card:#0f2618;
    --dark-card-2:#132f1e;
    --dark-line:#234b31;
    --dark-line-2:#2f6b43;
    --dark-text:#f2fff5;
    --dark-muted:#9fc5aa;
    --dark-green:#22c55e;
    --dark-green-2:#16a34a;
    --dark-lime:#a3e635;
    --dark-yellow:#facc15;
    --dark-red:#ef233c;
    --dark-white:#ffffff;
}

/* Fondo global */
body,
.appShell,
.appSection,
.appSoft,
.adminBody {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Header */
.appHeader,
.topbar,
.main-header {
    background: var(--dark-bg-2) !important;
    border-bottom: 2px solid var(--dark-green) !important;
}

.appBrand,
.appBrand strong,
.appBrand small,
.brand,
.brand strong,
.brand small {
    color: var(--dark-text) !important;
}

.appBrand span,
.brand span,
.brand-mark {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Navegación */
.appNav,
nav,
.nav {
    background: var(--dark-panel) !important;
    border-color: var(--dark-line) !important;
}

.appNav a,
nav a,
.nav a {
    color: var(--dark-text) !important;
}

.appNav a:hover,
nav a:hover,
.nav a:hover {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.menuBtn,
.navCta,
.header-cta {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
}

/* Hero oscuro */
.appHero,
.casinoHero,
.hero {
    background: var(--dark-bg) !important;
}

.appHeroShade,
.casinoShade,
.heroShade {
    background: rgba(2, 8, 4, .88) !important;
}

.heroSlide.is-active {
    opacity: .28 !important;
}

/* Ticker */
.casinoTicker {
    background: var(--dark-panel) !important;
    border: 2px solid var(--dark-green) !important;
    color: var(--dark-text) !important;
}

.casinoTicker span {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.casinoTicker marquee {
    color: var(--dark-text) !important;
}

/* Paneles principales */
.playerAppCard,
.voteAppModule,
.topAppModule,
.rankAppBoard,
.storyCard,
.profileAppCard,
.scarsoAppCard,
.videoAppCard,
.galleryAppItem,
.socialAppGrid a,
.commentAppForm,
.fanAppComment,
.casinoPlayerPanel,
.casinoLiveBoard,
.casinoVoteMachine,
.casinoTop3,
.casinoMiniRanking,
.casinoWidget,
.flagChip,
.liveVoteItem,
.slotTopItem,
.casinoStatsGrid div,
.quickStats div,
.card,
.voteBox,
.vote-card,
.scoreboard,
.ranking,
.rankingBoard,
.infoBox,
.adminCard {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Paneles destacados */
.casinoPlayerPanel,
.casinoVoteMachine,
.casinoTop3,
.casinoMiniRanking,
.rankAppBoard,
.playerAppCard {
    border-color: var(--dark-green) !important;
}

/* Tarjetas internas */
.flagChip b,
.liveVoteItem b,
.slotFlag,
.widgetIcon,
.topAppItem,
.rankAppRow,
.casinoRankMini,
.appEmpty {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Textos fuertes */
.casinoPlayerInfo h1,
.playerData h1,
.appSectionHead h2,
.storyCard h2,
.profileAppCard h3,
.scarsoAppCard h3,
.videoAppCard h3,
.galleryAppItem h3,
.socialAppGrid b,
.placeInfo strong,
.slotCountry strong,
.casinoRankMini b,
.casinoRankMini strong,
.rankMain strong,
.rankVotes b,
.casinoStatsGrid strong,
.quickStats strong,
.casinoBoardHead strong,
.machineTop strong,
.moduleHead strong,
.casinoWidget strong,
.infoBox h3,
.card h3 {
    color: var(--dark-text) !important;
}

/* Textos secundarios */
.casinoPlayerInfo p,
.playerData p,
.appSectionHead p,
.storyCard p,
.scarsoAppCard p,
.profileAppCard p,
.videoAppCard p,
.galleryAppItem p,
.socialAppGrid span,
.placeInfo span,
.slotCountry span,
.liveVoteItem small,
.casinoStatsGrid small,
.quickStats small,
.appNote,
.note,
small,
.fanAppComment p,
.fanAppComment small,
.commentAppList small,
.card p,
.infoBox p {
    color: var(--dark-muted) !important;
}

/* Etiquetas */
.liveBadge,
.appKicker,
.casinoLabel,
.casinoBoardHead span,
.machineTop span,
.moduleHead span,
.appSectionHead span,
.pill,
.kicker,
.sectionLabel,
.scarsoBadge,
.worldBadge {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
    border-color: var(--dark-lime) !important;
}

/* Botones */
button,
.appActions a,
.profileAppCard a,
.miniLinks a,
.socialButtons a,
.bigBtn {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
    border-color: var(--dark-green) !important;
}

button:hover,
.appActions a:hover,
.profileAppCard a:hover,
.miniLinks a:hover {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
}

/* Botón rojo de votar si existe */
.appActions a:first-child,
.casinoVoteMachine button {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Inputs */
input,
select,
textarea {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border: 2px solid var(--dark-line) !important;
}

input::placeholder,
textarea::placeholder {
    color: #6f9279 !important;
}

select option {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--dark-green) !important;
}

/* Números y posiciones */
.playerNumber,
.placeNum,
.slotPlace,
.rankPos,
.num,
.miniPos,
.medal {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Top 3 */
.place1,
.slotTopItem.place1 {
    border-left-color: var(--dark-lime) !important;
}

.place2,
.slotTopItem.place2 {
    border-left-color: var(--dark-green) !important;
}

.place3,
.slotTopItem.place3 {
    border-left-color: var(--dark-yellow) !important;
}

/* Barras */
.rankBar,
.casinoMiniBar,
.bar,
.progress,
.miniBar {
    background: var(--dark-card-2) !important;
}

.rankBar span,
.casinoMiniBar i,
.bar i,
.progress span,
.miniBar span {
    background: var(--dark-green) !important;
}

/* Banderas y chips */
.flagChip small {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.flagChip span {
    color: var(--dark-text) !important;
}

.liveVoteItem span {
    color: var(--dark-text) !important;
}

/* Galería */
.galleryAppItem div,
.galleryCaption,
.galleryItem div {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.galleryAppItem img,
.profileAppCard img,
.playerImage img,
.casinoPlayerPhoto img,
.newsCard img {
    filter: brightness(.88) contrast(1.08) !important;
}

/* Footer */
.appFooter,
footer,
.footer {
    background: var(--dark-bg-2) !important;
    border-top: 2px solid var(--dark-green) !important;
    color: var(--dark-text) !important;
}

.appFooter span,
footer span,
.footer p,
.footer-links a {
    color: var(--dark-muted) !important;
}

/* Admin oscuro */
.adminWrap {
    color: var(--dark-text) !important;
}

.adminNav a,
.actionBtn {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.danger {
    background: var(--dark-red) !important;
    color: var(--dark-white) !important;
}

table,
th,
td {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

th {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.adminInput {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Menú móvil oscuro */
@media(max-width:760px) {
    .appNav,
    nav {
        background: var(--dark-panel) !important;
        border: 2px solid var(--dark-green) !important;
    }
}

/* =========================================================
   DARK CASINO GAMER MODE
   Todo oscuro, app gamer, casino scoreboard.
   No cambia PHP ni estructura.
   ========================================================= */

:root{
    --dark-bg:#020804;
    --dark-bg-2:#06110b;
    --dark-panel:#0b1f13;
    --dark-panel-2:#102b1a;
    --dark-card:#0f2618;
    --dark-card-2:#132f1e;
    --dark-line:#234b31;
    --dark-line-2:#2f6b43;
    --dark-text:#f2fff5;
    --dark-muted:#9fc5aa;
    --dark-green:#22c55e;
    --dark-green-2:#16a34a;
    --dark-lime:#a3e635;
    --dark-yellow:#facc15;
    --dark-red:#ef233c;
    --dark-white:#ffffff;
}

/* Fondo global */
body,
.appShell,
.appSection,
.appSoft,
.adminBody {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Header */
.appHeader,
.topbar,
.main-header {
    background: var(--dark-bg-2) !important;
    border-bottom: 2px solid var(--dark-green) !important;
}

.appBrand,
.appBrand strong,
.appBrand small,
.brand,
.brand strong,
.brand small {
    color: var(--dark-text) !important;
}

.appBrand span,
.brand span,
.brand-mark {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Navegación */
.appNav,
nav,
.nav {
    background: var(--dark-panel) !important;
    border-color: var(--dark-line) !important;
}

.appNav a,
nav a,
.nav a {
    color: var(--dark-text) !important;
}

.appNav a:hover,
nav a:hover,
.nav a:hover {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.menuBtn,
.navCta,
.header-cta {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
}

/* Hero oscuro */
.appHero,
.casinoHero,
.hero {
    background: var(--dark-bg) !important;
}

.appHeroShade,
.casinoShade,
.heroShade {
    background: rgba(2, 8, 4, .88) !important;
}

.heroSlide.is-active {
    opacity: .28 !important;
}

/* Ticker */
.casinoTicker {
    background: var(--dark-panel) !important;
    border: 2px solid var(--dark-green) !important;
    color: var(--dark-text) !important;
}

.casinoTicker span {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.casinoTicker marquee {
    color: var(--dark-text) !important;
}

/* Paneles principales */
.playerAppCard,
.voteAppModule,
.topAppModule,
.rankAppBoard,
.storyCard,
.profileAppCard,
.scarsoAppCard,
.videoAppCard,
.galleryAppItem,
.socialAppGrid a,
.commentAppForm,
.fanAppComment,
.casinoPlayerPanel,
.casinoLiveBoard,
.casinoVoteMachine,
.casinoTop3,
.casinoMiniRanking,
.casinoWidget,
.flagChip,
.liveVoteItem,
.slotTopItem,
.casinoStatsGrid div,
.quickStats div,
.card,
.voteBox,
.vote-card,
.scoreboard,
.ranking,
.rankingBoard,
.infoBox,
.adminCard {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Paneles destacados */
.casinoPlayerPanel,
.casinoVoteMachine,
.casinoTop3,
.casinoMiniRanking,
.rankAppBoard,
.playerAppCard {
    border-color: var(--dark-green) !important;
}

/* Tarjetas internas */
.flagChip b,
.liveVoteItem b,
.slotFlag,
.widgetIcon,
.topAppItem,
.rankAppRow,
.casinoRankMini,
.appEmpty {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Textos fuertes */
.casinoPlayerInfo h1,
.playerData h1,
.appSectionHead h2,
.storyCard h2,
.profileAppCard h3,
.scarsoAppCard h3,
.videoAppCard h3,
.galleryAppItem h3,
.socialAppGrid b,
.placeInfo strong,
.slotCountry strong,
.casinoRankMini b,
.casinoRankMini strong,
.rankMain strong,
.rankVotes b,
.casinoStatsGrid strong,
.quickStats strong,
.casinoBoardHead strong,
.machineTop strong,
.moduleHead strong,
.casinoWidget strong,
.infoBox h3,
.card h3 {
    color: var(--dark-text) !important;
}

/* Textos secundarios */
.casinoPlayerInfo p,
.playerData p,
.appSectionHead p,
.storyCard p,
.scarsoAppCard p,
.profileAppCard p,
.videoAppCard p,
.galleryAppItem p,
.socialAppGrid span,
.placeInfo span,
.slotCountry span,
.liveVoteItem small,
.casinoStatsGrid small,
.quickStats small,
.appNote,
.note,
small,
.fanAppComment p,
.fanAppComment small,
.commentAppList small,
.card p,
.infoBox p {
    color: var(--dark-muted) !important;
}

/* Etiquetas */
.liveBadge,
.appKicker,
.casinoLabel,
.casinoBoardHead span,
.machineTop span,
.moduleHead span,
.appSectionHead span,
.pill,
.kicker,
.sectionLabel,
.scarsoBadge,
.worldBadge {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
    border-color: var(--dark-lime) !important;
}

/* Botones */
button,
.appActions a,
.profileAppCard a,
.miniLinks a,
.socialButtons a,
.bigBtn {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
    border-color: var(--dark-green) !important;
}

button:hover,
.appActions a:hover,
.profileAppCard a:hover,
.miniLinks a:hover {
    background: var(--dark-lime) !important;
    color: var(--dark-bg) !important;
}

/* Botón rojo de votar si existe */
.appActions a:first-child,
.casinoVoteMachine button {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Inputs */
input,
select,
textarea {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border: 2px solid var(--dark-line) !important;
}

input::placeholder,
textarea::placeholder {
    color: #6f9279 !important;
}

select option {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--dark-green) !important;
}

/* Números y posiciones */
.playerNumber,
.placeNum,
.slotPlace,
.rankPos,
.num,
.miniPos,
.medal {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

/* Top 3 */
.place1,
.slotTopItem.place1 {
    border-left-color: var(--dark-lime) !important;
}

.place2,
.slotTopItem.place2 {
    border-left-color: var(--dark-green) !important;
}

.place3,
.slotTopItem.place3 {
    border-left-color: var(--dark-yellow) !important;
}

/* Barras */
.rankBar,
.casinoMiniBar,
.bar,
.progress,
.miniBar {
    background: var(--dark-card-2) !important;
}

.rankBar span,
.casinoMiniBar i,
.bar i,
.progress span,
.miniBar span {
    background: var(--dark-green) !important;
}

/* Banderas y chips */
.flagChip small {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.flagChip span {
    color: var(--dark-text) !important;
}

.liveVoteItem span {
    color: var(--dark-text) !important;
}

/* Galería */
.galleryAppItem div,
.galleryCaption,
.galleryItem div {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.galleryAppItem img,
.profileAppCard img,
.playerImage img,
.casinoPlayerPhoto img,
.newsCard img {
    filter: brightness(.88) contrast(1.08) !important;
}

/* Footer */
.appFooter,
footer,
.footer {
    background: var(--dark-bg-2) !important;
    border-top: 2px solid var(--dark-green) !important;
    color: var(--dark-text) !important;
}

.appFooter span,
footer span,
.footer p,
.footer-links a {
    color: var(--dark-muted) !important;
}

/* Admin oscuro */
.adminWrap {
    color: var(--dark-text) !important;
}

.adminNav a,
.actionBtn {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.danger {
    background: var(--dark-red) !important;
    color: var(--dark-white) !important;
}

table,
th,
td {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

th {
    background: var(--dark-green) !important;
    color: var(--dark-bg) !important;
}

.adminInput {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-line) !important;
}

/* Menú móvil oscuro */
@media(max-width:760px) {
    .appNav,
    nav {
        background: var(--dark-panel) !important;
        border: 2px solid var(--dark-green) !important;
    }
}