/* PlayMoz Lite UI v4 - local, lightweight, mobile-first */ :root {
    --gp-red:#e50914;
    --gp-red2:#b81d24;
    --gp-bg:#0a0a0a;
    --gp-card:rgba(255,255,255,.045)
}

html {
    font-size:15px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%
}

body {
    overflow-x:hidden;
    overscroll-behavior-x:none;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:.92rem;
    line-height:1.45
}

button,a,input {
    touch-action:manipulation
}

button {
    font:inherit
}

img {
    display:block;
    max-width:100%;
    height:auto;
    contain-intrinsic-size:160px 100px
}

.tap {
    min-width:40px;
    min-height:40px
}

.no-scrollbar::-webkit-scrollbar {
    display:none
}

.no-scrollbar {
    -ms-overflow-style:none;
    scrollbar-width:none
}

/* compact typography */ .text-xs {
    font-size:.69rem!important
}

.text-sm {
    font-size:.78rem!important
}

.text-base {
    font-size:.88rem!important
}

.text-lg {
    font-size:1rem!important
}

.text-xl {
    font-size:1.12rem!important
}

.text-2xl {
    font-size:1.3rem!important
}

.text-3xl {
    font-size:1.55rem!important
}

.text-4xl {
    font-size:1.9rem!important
}

/* images */ img.lazy,img.img-loading {
    opacity:.25;
    background:linear-gradient(90deg,#151515 25%,#222 37%,#151515 63%);
    background-size:400% 100%;
    animation:gpShimmer 1.25s ease infinite;
    filter:saturate(.75)
}

img.img-loaded {
    opacity:1;
    animation:none;
    filter:none
}

img.img-error {
    opacity:.8;
    background:#151515;
    object-fit:contain
}

@keyframes gpShimmer {
    0% {
        background-position:100% 0
    }

    100% {
        background-position:-100% 0
    }

}

/* cards */ .gp-card {
    background:var(--gp-card);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}

.gp-card:hover {
    transform:translateY(-2px);
    border-color:rgba(229,9,20,.42);
    box-shadow:0 12px 34px rgba(229,9,20,.08)
}

.gp-glass {
    background:rgba(10,10,10,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px)
}

/* player */ #playerContainer {
    min-height:180px;
    box-shadow:0 16px 50px rgba(0,0,0,.35)
}

#playerContainer.player-theater {
    position:relative;
    z-index:80;
    width:min(100vw,1600px);
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
    border-radius:0;
    box-shadow:0 24px 70px rgba(0,0,0,.65)
}

.player-tools {
    opacity:1!important
}

.player-tool-btn {
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    transition:.18s
}

.player-tool-btn:hover {
    background:var(--gp-red);
    transform:translateY(-1px)
}

.player-hint {
    font-size:.68rem;
    color:#9ca3af
}

/* loading */ .gp-page-loader {
    position:fixed;
    inset:0;
    background:#080808;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .25s ease,visibility .25s ease
}

.gp-page-loader.hide {
    opacity:0;
    visibility:hidden;
    pointer-events:none
}

.gp-spinner {
    width:38px;
    height:38px;
    border:3px solid rgba(229,9,20,.22);
    border-top-color:var(--gp-red);
    border-radius:50%;
    animation:gpSpin .7s linear infinite
}

@keyframes gpSpin {
    to {
        transform:rotate(360deg)
    }

}

.animate-slide-up {
    animation:gpSlide .35s ease both
}

.animate-slide-up.is-visible {
    animation-play-state:running
}

@keyframes gpSlide {
    from {
        opacity:0;
        transform:translateY(10px)
    }

    to {
        opacity:1;
        transform:none
    }

}

/* compact responsive layout */ @media(max-width:639px) {
    html {
        font-size:14px
    }

    .text-3xl {
        font-size:1.4rem!important
    }

    .text-4xl {
        font-size:1.65rem!important
    }

    .text-2xl {
        font-size:1.22rem!important
    }

    header {
        padding-left:max(9px,env(safe-area-inset-left));
        padding-right:max(9px,env(safe-area-inset-right));
        padding-top:7px;
        padding-bottom:7px
    }

    main {
        padding-left:9px!important;
        padding-right:9px!important;
        padding-top:10px!important
    }

    .fixed.right-4 {
        right:9px!important
    }

    .fixed.bottom-20 {
        bottom:70px!important
    }

    .fixed.right-4>a {
        width:42px!important;
        height:42px!important
    }

    .fixed.right-4 i {
        font-size:17px!important
    }

    .fixed.right-4 span.text-2xl {
        font-size:17px!important
    }

    .rounded-2xl {
        border-radius:13px
    }

    .rounded-xl {
        border-radius:10px
    }

    #playerContainer {
        border-radius:12px;
        margin-bottom:14px
    }

    #playerContainer.player-theater {
        position:fixed;
        top:0;
        left:0;
        margin:0;
        transform:none;
        width:100vw;
        height:100dvh;
        z-index:99990;
        border-radius:0;
        aspect-ratio:auto
    }

    #playerContainer.player-theater #playerWrapper,#playerContainer.player-theater .video-js {
        height:100%!important
    }

    .player-tool-btn {
        width:38px;
        height:38px;
        border-radius:10px
    }

}

@media(max-width:360px) {
    html {
        font-size:13px
    }

    .px-5 {
        padding-left:.6rem!important;
        padding-right:.6rem!important
    }

    .py-3 {
        padding-top:.55rem!important;
        padding-bottom:.55rem!important
    }

    .gap-4 {
        gap:.55rem!important
    }

    .gap-3 {
        gap:.45rem!important
    }

    .w-16,.h-16 {
        width:50px!important;
        height:50px!important
    }

}

@media(min-width:1280px) {
    main {
        max-width:1440px;
        margin-inline:auto;
        width:100%
    }

}

@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important
    }

}

/* Busca instantânea e player */ .channel-card[hidden], #liveSearchEmpty[hidden] {
    display:none!important
}

#liveSearchStatus {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.player-theater {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:9990!important;
    background:#000!important;
    border-radius:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important
}

.player-theater iframe,.player-theater video,.player-theater .video-js {
    max-height:100dvh!important
}

.gp-player-open {
    overflow:hidden!important
}

@media(max-width:420px) {
    #liveSearchStatus {
        font-size:10px
    }

    .channel-card {
        padding:.65rem!important
    }

    .channel-card h3 {
        font-size:.78rem!important
    }

}

/* PlayMoz Lite Channels v9 — visual bridge with main app */ :root {
    --gp-red:#ff2c55;
    --gp-red2:#8b5cf6;
    --gp-bg:#08090d;
    --gp-card:#11141b
}

body,body.theme-dark {
    background:#08090d!important;
    color:#f7f8fb!important;
    font-family:"Avenir Next","Segoe UI",Inter,system-ui,-apple-system,sans-serif!important;
    font-weight:650
}

.app-shell {
    padding-bottom:24px!important
}

.topbar {
    height:60px!important;
    padding:0 max(14px,calc((100vw - 1180px)/2))!important;
    background:linear-gradient(180deg,rgba(8,9,13,.96),rgba(8,9,13,.78))!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    backdrop-filter:blur(18px)!important
}

.brand-mark {
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:0 8px 22px rgba(255,44,85,.18)!important
}

.brand-mark img {
    border-radius:12px!important
}

.top-actions .icon-btn {
    background:#12151d!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.08)!important
}

.content {
    max-width:1180px!important;
    padding:20px 18px 36px!important
}

.hero {
    padding:24px!important;
    border-radius:22px!important;
    background:radial-gradient(420px 210px at 90% 10%,rgba(139,92,246,.14),transparent 60%),linear-gradient(145deg,#151821,#0d0f15)!important;
    border-color:rgba(255,255,255,.075)!important
}

.hero h1 {
    font-size:clamp(27px,4vw,42px)!important;
    letter-spacing:-1.5px!important
}

.hero h1 span {
    color:#ff5978!important
}

.hero p {
    font-size:11px!important;
    color:#8e96a7!important
}

.hero-time strong {
    font-size:31px!important
}

.segmented {
    background:#11141b!important;
    border:1px solid rgba(255,255,255,.07)!important;
    padding:3px!important;
    border-radius:13px!important
}

.segmented a {
    font-size:10px!important;
    color:#7f8798!important;
    padding:9px 13px!important
}

.segmented a.active {
    background:#fff!important;
    color:#090a0d!important;
    box-shadow:none!important
}

.section-head h2 {
    font-size:18px!important
}

.eyebrow {
    font-size:8px!important;
    letter-spacing:1.25px!important;
    color:#ff6a85!important
}

.games-grid,.channel-grid {
    gap:10px!important
}

.game-card,.channel-card {
    background:#11141b!important;
    border:1px solid rgba(255,255,255,.075)!important;
    border-radius:17px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.13)!important
}

.game-card:hover,.channel-card:hover {
    border-color:rgba(255,44,85,.28)!important;
    box-shadow:0 15px 34px rgba(0,0,0,.22)!important
}

.match,.channel-main {
    color:#f7f8fb!important
}

.channel-logo,.crest {
    background:#171a22!important;
    border-color:rgba(255,255,255,.07)!important
}

.channel-info h3,.team strong {
    font-size:11px!important;
    font-weight:850!important
}

.channel-info p,.game-bottom,.competition,.live-count {
    font-size:8px!important;
    color:#788193!important
}

.watch,.search-input button,.primary-btn {
    background:linear-gradient(135deg,#ff2c55,#d91f68)!important;
    border-radius:10px!important
}

.chips a,.status-tab,.filter-btn,.outline-btn {
    background:#12151d!important;
    border-color:rgba(255,255,255,.08)!important;
    color:#a4abb8!important;
    font-size:9px!important
}

.chips a.active,.status-tab.active {
    background:#fff!important;
    color:#0b0c10!important
}

.search-modal {
    background:rgba(0,0,0,.76)!important
}

.search-box {
    background:#11141b!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#fff!important;
    border-radius:20px!important
}

.search-input {
    background:#171a22!important;
    border-color:rgba(255,255,255,.08)!important
}

.search-input input {
    color:#fff!important
}

.bottom-nav,[data-theme-toggle] {
    display:none!important
}

.fixed.right-4.bottom-20 {
    bottom:18px!important;
    gap:8px!important
}

.fixed.right-4.bottom-20>a {
    width:40px!important;
    height:40px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.28)!important
}

.fixed.right-4.bottom-20 i,.fixed.right-4.bottom-20 span.text-2xl {
    font-size:15px!important
}

@media(max-width:650px) {
    .content {
        padding:14px 10px 28px!important
    }

    .hero {
        padding:18px!important;
        border-radius:18px!important
    }

    .hero h1 {
        font-size:27px!important
    }

    .hero-time {
        margin-top:14px!important
    }

    .games-grid,.channel-grid {
        grid-template-columns:1fr 1fr!important;
        gap:8px!important
    }

    .channel-main {
        padding:10px!important;
        gap:9px!important
    }

    .channel-logo {
        width:46px!important;
        height:46px!important;
        flex-basis:46px!important;
        border-radius:12px!important
    }

    .game-card {
        padding:11px!important
    }

    .match {
        grid-template-columns:1fr 42px 1fr!important;
        min-height:108px!important
    }

    .team .crest {
        width:52px!important;
        height:52px!important;
        border-radius:14px!important
    }

    .section-head {
        margin:21px 0 10px!important
    }

    .topbar {
        height:54px!important
    }

    .brand-mark {
        width:34px!important;
        height:34px!important;
        min-width:34px!important
    }

}

@media(max-width:380px) {
    .games-grid,.channel-grid {
        grid-template-columns:1fr!important
    }

    .fixed.right-4.bottom-20 {
        right:8px!important
    }

}