/*
Theme Name: MobPlay HubGames
Theme URI: https://mobplaygames.com.br/
Author: MobPlay Games
Description: Tema mobile-first para o HubGames da MobPlay, inspirado no layout de referência fornecido.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mobplay-hubgames
*/

:root{
    --mp-bg:#f5f6fb;
    --mp-card:#ffffff;
    --mp-text:#171724;
    --mp-muted:#6f7080;
    --mp-purple:#6356e8;
    --mp-purple-2:#8f5cff;
    --mp-soft:#e9e7ff;
    --mp-border:#e5e5ec;
    --mp-shadow:0 10px 30px rgba(63,57,126,.08);
    --mp-radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--mp-bg);
    color:var(--mp-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;height:auto}

.mp-app{
    min-height:100vh;
    padding-bottom:92px;
}

.mp-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(248,249,253,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(229,229,236,.7);
}

.mp-header-inner{
    max-width:1180px;
    margin:0 auto;
    min-height:104px;
    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.mp-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.mp-logo{
    width:58px;
    height:58px;
    border-radius:18px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(145deg,#6d5df0,#a650df);
    box-shadow:0 10px 22px rgba(99,86,232,.25);
    color:#fff;
}

.mp-logo svg{width:31px;height:31px}
.mp-brand-text{min-width:0}
.mp-brand-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:25px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.7px;
}
.mp-brand-title .mp-gradient{
    background:linear-gradient(90deg,#4f42d9,#9b4fe8);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.mp-platform{
    padding:6px 10px;
    border-radius:999px;
    background:#eeeaff;
    color:#6849d9;
    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
}
.mp-brand-sub{
    margin-top:6px;
    color:var(--mp-muted);
    font-size:15px;
    font-weight:600;
}

.mp-header-actions{display:flex;gap:10px}
.mp-icon-btn{
    width:58px;
    height:58px;
    border:1px solid #dfe0e7;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    color:#15151d;
    box-shadow:0 4px 15px rgba(0,0,0,.03);
}
.mp-icon-btn svg{width:26px;height:26px}

.mp-main{
    max-width:1180px;
    margin:0 auto;
    padding:22px 16px 30px;
}

.mp-hero{
    min-height:180px;
    border-radius:28px;
    background:linear-gradient(135deg,#6b5be8,#9855e6);
    color:#fff;
    padding:28px;
    box-shadow:var(--mp-shadow);
    margin-bottom:20px;
}
.mp-hero h1{margin:0 0 8px;font-size:30px;letter-spacing:-1px}
.mp-hero p{margin:0;opacity:.9;max-width:600px}

.mp-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:24px 4px 12px;
}
.mp-section-title h2{margin:0;font-size:21px;letter-spacing:-.4px}
.mp-section-title a{font-size:14px;color:var(--mp-purple);font-weight:700}

.mp-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.mp-game-card{
    background:var(--mp-card);
    border:1px solid rgba(229,229,236,.8);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--mp-shadow);
}
.mp-game-thumb{
    aspect-ratio:1.35;
    background:linear-gradient(135deg,#e9e7ff,#f8e9ff);
    display:grid;
    place-items:center;
    overflow:hidden;
}
.mp-game-thumb img{width:100%;height:100%;object-fit:cover}
.mp-game-body{padding:12px}
.mp-game-body h3{font-size:15px;margin:0 0 4px}
.mp-game-body p{font-size:12px;color:var(--mp-muted);margin:0}

.mp-empty{
    min-height:calc(100vh - 250px);
    background:#fff;
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b4b5bd;
    text-align:center;
    padding:30px;
}
.mp-empty strong{display:block;color:#777;font-size:18px;margin-bottom:6px}

.mp-content{
    background:#fff;
    border-radius:24px;
    padding:24px;
    box-shadow:var(--mp-shadow);
}
.mp-content h1,.mp-content h2,.mp-content h3{letter-spacing:-.5px}

.mp-bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:100;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-top:1px solid #e8e8ee;
    padding:8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
}
.mp-bottom-inner{
    max-width:760px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
}
.mp-nav-item{
    min-height:72px;
    border-radius:25px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#191921;
    font-size:13px;
    font-weight:700;
}
.mp-nav-item svg{width:25px;height:25px;stroke-width:2}
.mp-nav-item.is-active{
    background:#e9e8ff;
    color:#5647d9;
}
.mp-nav-item.is-active svg{stroke-width:2.3}

@media (min-width:700px){
    .mp-main{padding-left:24px;padding-right:24px}
    .mp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
    .mp-bottom-nav{left:50%;right:auto;bottom:18px;width:min(760px,calc(100% - 36px));transform:translateX(-50%);border:1px solid #e5e5ed;border-radius:30px;box-shadow:0 15px 45px rgba(35,31,87,.12);padding:8px}
    .mp-app{padding-bottom:40px}
}