@charset "UTF-8";
/* MUGABET lobby: identidade própria, inspirada na estrutura visual fornecida. */
:root { --ink: #080d0c; --ink-raised: #101613; --panel: #111815; --panel-soft: #18211d; --line: rgba(220, 239, 229, .09); --line-strong: rgba(220, 239, 229, .17); --text: #f2f6f3; --muted: #88968e; --teal: #18e68a; --teal-soft: rgba(24, 230, 138, .11); --amber: #f6bd53; --radius: 9px; --font: Arial, "Segoe UI", sans-serif; }
body { background: var(--ink); font-size: 13px; }
.button { border-radius: 5px; }
.button.primary { background: #14d97e; color: #031c10; }
.topbar { height: 62px; padding: 0 18px; gap: 22px; background: #101513; border-bottom-color: #202722; }
.topbar .brand { font-size: 25px; letter-spacing: 3px; }
.topbar .brand-mark { width: 33px; height: 33px; }
.menu-toggle { width: 29px; height: 36px; border: 0; color: #bbc4bd; }
.menu-toggle:hover { background: var(--teal-soft); }
.install-bar, .drawer-filters, .drawer-clock { display: none; }
.header-search { width: 36px; height: 36px; border: 0; color: #d5ddd7; }
.header-search:hover { color: var(--teal); background: transparent; }
.main-nav { gap: 8px; margin-left: 0; }
.main-nav a { padding: 0 14px; border-radius: 5px; font-size: 12px; }
.main-nav a.active { background: #0ca956; color: #fff; }
.main-nav a.active::after { display: none; }
.main-nav a[data-route="wallet"], .main-nav a[data-route="admin"] { display: none; }
.top-actions { gap: 12px; }
.balance-pill { flex-direction: row; align-items: center; gap: 8px; min-width: 132px; padding: 8px 11px; border-color: transparent; background: #0b100e; }
.balance-pill span { color: #17d17e; font-size: 0; }
.balance-pill span::after { content: "R$"; padding: 3px 5px; border-radius: 3px; background: #124a30; font-size: 10px; }
.balance-pill span i { display: none; }
.balance-pill strong { font-size: 12px; }
.sound-control .icon-button { width: 29px; }
.avatar { border-color: #334139; background: #222c26; color: #b3c4b8; }
.profile-menu { top: 57px; right: 18px; background: #141e18; }
.side-navigation { position: fixed; z-index: 25; top: 62px; bottom: 0; left: 0; width: 172px; padding: 16px 10px; overflow-y: auto; background: #101513; border-right: 1px solid #1c241f; scrollbar-width: none; }
.side-navigation::-webkit-scrollbar, .side-menu::-webkit-scrollbar { width: 0; height: 0; display: none; }
.drawer-mobile-tabs { display: none; }
.side-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 10px 12px; border-radius: 5px; background: transparent; color: #c2cac4; font-size: 11px; text-align: left; }
.side-link .icon { width: 17px; height: 17px; color: #7c8a81; }
.side-link:hover, .side-link.active { background: #1b2520; color: #fff; }
.side-link.active .icon, .side-link:hover .icon { color: var(--teal); }
.side-link.bonus-link { margin-bottom: 14px; }
.side-promos { display: flex; gap: 5px; margin-bottom: 16px; }
.side-promos button { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; min-height: 53px; padding: 9px; border-radius: 5px; background: linear-gradient(120deg, #4e3e24, #2e2a1e); color: #e3ddcd; font-size: 9px; text-align: left; }
.side-promos button + button { background: linear-gradient(120deg, #44324f, #2b2433); }
.side-promos .icon { width: 18px; height: 18px; color: #e4bd5f; }
.side-menu { display: flex; flex-direction: column; gap: 3px; }
.side-arrow { margin-left: auto; color: #5e6e63; font-size: 17px; }
.side-navigation a[data-route="wallet"], .side-navigation a[data-route="admin"] { display: none; }
#vip-button .icon { color: #e9da3b; }
.support-link { margin-top: 12px; }
.support-link .icon { color: #1ad77e; }
.side-responsible { display: flex; gap: 9px; margin-top: 22px; padding: 14px 6px; border-top: 1px solid var(--line); color: #7f9185; font-size: 9px; }
.side-responsible .icon { width: 17px; }
.side-responsible small { font-size: 8px; color: #52645a; }
main { max-width: none; margin-left: 172px; padding: 0 18px; }
.view { padding: 16px 0 40px; }
.hero-carousel { position: relative; overflow: hidden; border-radius: 7px; }
.hero-track { display: flex; width: 100%; transition: transform .4s ease; }
.hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; min-width: 0; min-height: 228px; padding: 18px 16px; overflow: hidden; border: 0; border-radius: 8px; background: radial-gradient(ellipse at 80% 40%, #176146, transparent 53%), linear-gradient(115deg, #0e3025, #071c14); }
.hero-content { align-self: center; min-width: 0; }
.hero h1, .hero h2 { margin: 8px 0; font: 900 clamp(22px, 1.7vw, 30px)/.95 Arial, sans-serif; letter-spacing: -1px; }
.hero h1 em, .hero h2 em { color: #16e397; }
.hero-content .eyebrow { font-size: 8px; }
.hero-content > p:not(.eyebrow) { font-size: 11px; }
.hero-actions { margin-top: 18px; }
.hero-actions .button, .hero-content > .button { min-height: 34px; padding: 8px 14px; font-size: 10px; }
.hero-note { margin-top: 15px; }
.hero-visual { min-height: 150px; }
.slot-cabinet { width: 146px; padding: 10px 8px 8px; border-radius: 12px; }
.slot-top { font-size: 10px; padding-bottom: 9px; }
.slot-top strong { font-size: 19px; }
.slot-column > div { height: 26px; min-height: 26px; }
.slot-column .symbol-seven { font-size: 18px; }
.slot-column .symbol-gem::before { width: 14px; height: 18px; }
.slot-column .symbol-diamond::before { width: 14px; height: 14px; }
.slot-footer { font-size: 5px; padding-top: 9px; }
.halo { width: 150px; height: 150px; }
@media (min-width: 701px) {
  .menu-toggle { display: none; }
  .hero-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transform: none !important; }
  .carousel-arrow, .carousel-dots { display: none; }
  .promo-wheel .roulette-symbol { width: 96px; height: 96px; }
  .promo-wheel > strong { font-size: 12px; }
  .sports-orb .icon { width: 96px; height: 96px; }
}
.floating-label { top: 0; }
.carousel-arrow { position: absolute; z-index: 5; top: calc(50% - 16px); display: grid; place-items: center; width: 28px; height: 38px; border-radius: 4px; background: #0008; color: #fff; font-size: 26px; }
.carousel-arrow:hover { background: #18e68a; color: #041b0f; }
.carousel-arrow.previous { left: 8px; }
.carousel-arrow.next { right: 8px; }
.carousel-dots { position: absolute; z-index: 4; bottom: 12px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.carousel-dots button { width: 6px; height: 6px; padding: 0; border-radius: 5px; background: #ffffff50; }
.carousel-dots button.active { width: 23px; background: #fff; }
.promo-cashback { background: radial-gradient(ellipse at 75% 55%, #5f1f20, transparent 55%), linear-gradient(110deg, #1d2021, #311616); }
.promo-cashback h2 em { color: #ffca4b; }
.promo-wheel { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; }
.promo-wheel .roulette-symbol { position: relative; top: auto; right: auto; width: 140px; height: 140px; transform: rotateX(35deg) rotateZ(-18deg); }
.promo-wheel > strong { color: #ffdca3; font-size: 15px; text-align: center; }
.promo-sports { background: radial-gradient(ellipse at 75% 45%, #164568, transparent 55%), linear-gradient(115deg, #0b233a, #0c141d); }
.sports-orb { display: grid; place-items: center; }
.sports-orb .icon { width: 145px; height: 145px; stroke-width: .8; color: #84dbc4; filter: drop-shadow(0 0 25px #1de09340); transform: rotate(-15deg); }
.lobby-welcome { display: flex; align-items: center; gap: 12px; padding: 14px 5px 4px; color: #a6b2aa; font-size: 11px; }
.lobby-welcome .icon { width: 18px; }
.recent-wins { padding: 20px 0 17px; }
.recent-wins h2 { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; }
.recent-wins h2 > span { padding: 2px 5px; border-radius: 3px; background: #17251c; color: #6b8674; font-size: 7px; font-weight: 400; letter-spacing: .6px; }
.recent-wins h2 .icon { color: #d7ded9; width: 18px; }
.win-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.win-card { display: flex; gap: 9px; padding: 7px; overflow: hidden; border-radius: 5px; background: #121815; }
.mini-game { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 56px; border-radius: 4px; color: #fff2c1; font-size: 26px; font-weight: 900; }
.win-card > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.win-card strong { color: #14d780; font-size: 11px; }
.win-card span:not(.mini-game) { overflow: hidden; margin: 3px 0; color: #c5cec7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.win-card small { color: #6f7c73; font-size: 9px; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; }
.category-tabs { gap: 9px; padding: 0; border: 0; overflow-x: auto; }
.category-tabs button, .category-tabs a { display: flex; align-items: center; gap: 7px; padding: 11px 17px; border-radius: 5px; background: #151d18; color: #a4afa7; font-size: 11px; white-space: nowrap; }
.category-tabs button .icon, .category-tabs a .icon { width: 14px; height: 14px; }
.category-tabs button.active, .category-tabs a.active { background: #f5a724; color: #17220f; box-shadow: none; }
.balance-pill::after { content: "⌄"; color: #8d9b92; font-size: 16px; line-height: 1; }
.hot-badge { position: absolute; z-index: 4; top: 10px; left: 10px; padding: 3px 6px; border-radius: 3px; background: #ff3b30; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.game-collection { display: none; }
.game-search { display: flex; align-items: center; gap: 9px; width: 245px; padding: 0 13px; border: 1px solid #28332b; border-radius: 4px; color: #718279; }
.game-search .icon { width: 16px; }
.game-search input { width: 100%; height: 38px; border: 0; outline: 0; background: transparent; color: #d9e3dc; font-size: 10px; }
.game-search input::placeholder { color: #6f7d74; }
.games-section { padding-top: 12px; }
.section-heading { margin-bottom: 15px; }
.section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; letter-spacing: -.2px; }
.section-heading h2 .icon { width: 17px; color: #d8e0da; }
.section-count { color: #6d8073; font-size: 8px; letter-spacing: 1px; }
.game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.game-card { border-color: #263029; border-radius: 6px; background: #111713; }
.game-card:hover { transform: translateY(-3px); border-color: #1ad887; }
.game-art { height: 240px; }
.game-art > strong { bottom: 20px; font-size: 26px; }
.game-meta { padding: 10px 12px; }
.game-meta h3 { font-size: 11px; }
.game-meta p { font-size: 8px; }
.lobby-bottom { margin-top: 22px; padding-top: 16px; }
.site-footer { max-width: none; margin-left: 172px; padding: 22px 18px; background: #0d120f; }
.navigation-overlay { position: fixed; z-index: 24; inset: 62px 0 0; background: #0009; backdrop-filter: blur(3px); }
body.drawer-open { overflow: hidden; }
@media (min-width: 1500px) { .hero { min-height: 250px; } .game-art { height: 290px; } .slot-cabinet { width: 168px; } .slot-column > div { height: 30px; } }
@media (max-width: 1000px) and (min-width: 701px) { .side-navigation { width: 145px; } main, .site-footer { margin-left: 145px; } .topbar { gap: 13px; } .hero { padding: 25px; } .game-art { height: 190px; } .game-art > strong { font-size: 21px; } .game-toolbar { flex-wrap: wrap; } .win-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  body { padding-bottom: 68px; }
  .topbar { height: 58px; padding: 0 12px; gap: 9px; }
  .menu-toggle { width: 25px; flex-shrink: 0; }
  .menu-toggle .icon { width: 22px; }
  .topbar .brand { gap: 6px; font-size: 20px; }
  .topbar .brand-mark { width: 27px; height: 27px; }
  .top-actions { gap: 7px; }
  .sound-control, .avatar { display: none; }
  .balance-pill { min-width: 0; gap: 5px; padding: 7px 8px; }
  .balance-pill span::after { font-size: 9px; }
  .balance-pill strong { font-size: 10px; }
  .side-navigation { z-index: 31; top: 58px; bottom: 65px; width: min(310px, 82vw); padding: 14px 12px; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 15px 0 50px #0008; }
  body.drawer-open .side-navigation { transform: translateX(0); }
  .navigation-overlay { z-index: 30; inset: 58px 0 65px; }
  .drawer-mobile-tabs { display: flex; gap: 13px; margin-bottom: 20px; }
  .drawer-mobile-tabs a { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1; padding: 12px 6px; border-radius: 5px; font-size: 12px; }
  .drawer-mobile-tabs a.active { background: #0ca956; }
  .drawer-mobile-tabs a .icon { width: 17px; }
  .side-promos button { flex-direction: row; align-items: center; min-height: 49px; font-size: 10px; }
  .side-link { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
  .side-navigation { display: flex; flex-direction: column; overflow: hidden; }
  .side-menu { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .side-responsible { display: none; }
  .install-bar { position: sticky; z-index: 22; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 12px; background: linear-gradient(90deg, #ff4b2b, #ffb000); color: #fff; font-size: 12px; font-weight: 750; }
  .install-bar button { flex-shrink: 0; min-height: 30px; padding: 6px 14px; border-radius: 16px; background: #fff; color: #1b1b1b; font-size: 12px; font-weight: 800; }
  .topbar { top: 42px; }
  .side-navigation { top: 100px; }
  .navigation-overlay { inset: 100px 0 65px; }
  .drawer-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
  .drawer-filters button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 58px; padding: 8px 4px; border-radius: 6px; background: #1a211d; color: #d5ddd8; font-size: 11px; }
  .drawer-filters .icon { width: 16px; height: 16px; }
  .drawer-clock { position: static; flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 6px; background: #171e1b; color: #c5cfc8; font-size: 13px; }
  main { margin-left: 0; padding: 0 11px; overflow: hidden; }
  .view { padding-top: 10px; }
  .hero-track { display: flex; gap: 0; }
  .hero-track > .hero { display: block; flex: 0 0 100%; width: 100%; min-height: 214px; padding: 22px 18px; border-radius: 0; }
  .carousel-arrow { display: grid; }
  .carousel-dots { display: flex; }
  .hero h1, .hero h2 { margin: 10px 0; font-size: 34px; letter-spacing: -1.4px; }
  .hero-content { z-index: 2; align-self: center; max-width: 62%; }
  .hero-content > p:not(.eyebrow) { display: none; }
  .hero-content .eyebrow { font-size: 6px; }
  .hero-content > p:not(.eyebrow) { font-size: 9px; }
  .hero-actions { margin-top: 12px; }
  .hero-actions .button { min-height: 29px; padding: 7px 9px; font-size: 8px; }
  .hero-actions .button.ghost { display: none; }
  .hero-note { margin-top: 10px; font-size: 7px; }
  .hero-note small { font-size: 7px; }
  .hero-note .icon { width: 13px; }
  .hero-visual { position: absolute; right: -28px; bottom: 0; left: auto; width: 48%; height: 100%; opacity: .75; }
  .slot-cabinet { top: 52%; left: 47%; width: 150px; padding: 10px 8px 8px; }
  .slot-top { font-size: 7px; letter-spacing: 3px; }
  .slot-top strong { font-size: 13px; letter-spacing: .5px; }
  .slot-column > div { height: 26px; min-height: 26px; }
  .slot-column .symbol-seven { font-size: 19px; }
  .slot-column .symbol-gem::before { width: 13px; height: 18px; }
  .slot-column .symbol-diamond::before { width: 14px; height: 14px; }
  .slot-footer { display: none; }
  .halo { width: 175px; height: 175px; }
  .floating-label, .coin { display: none; }
  .promo-wheel { position: absolute; right: 20px; top: 30px; opacity: .7; transform: scale(.75); }
  .promo-wheel > strong { display: none; }
  .sports-orb { position: absolute; right: 25px; top: 60px; opacity: .6; }
  .sports-orb .icon { width: 100px; height: 100px; }
  .lobby-welcome { gap: 8px; padding: 13px 2px 0; font-size: 9px; }
  .recent-wins { padding: 18px 0 13px; }
  .recent-wins h2 { font-size: 14px; }
  .recent-wins h2 > span { font-size: 6px; }
  .win-list { display: flex; gap: 9px; width: 100%; max-width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .win-card { flex: 0 0 205px; }
  .game-toolbar { position: relative; display: block; padding: 8px 40px 8px 0; }
  .category-tabs { gap: 7px; padding-right: 4px; scrollbar-width: none; }
  .category-tabs button { padding: 10px 12px; font-size: 10px; }
  .game-search { position: absolute; right: 0; top: 8px; width: 34px; height: 35px; padding: 0; justify-content: center; border: 0; color: var(--teal); }
  .game-search input { position: absolute; right: 0; width: 0; padding: 0; opacity: 0; }
  .game-search:focus-within { z-index: 2; width: 100%; padding: 0 10px; background: #121b15; }
  .game-search:focus-within input { position: static; width: 100%; opacity: 1; }
  .games-section { padding-top: 9px; }
  .section-heading { margin-bottom: 11px; }
  .section-heading h2 { font-size: 14px; }
  .game-grid { display: flex; gap: 10px; width: 100%; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .game-card { flex: 0 0 46%; scroll-snap-align: start; }
  .game-art { height: 210px; }
  .game-art > strong { bottom: 13px; left: 9px; font-size: 15px; }
  .game-collection { top: 9px; left: 9px; font-size: 5px; letter-spacing: .7px; }
  .game-meta { padding: 8px; }
  .game-meta h3 { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .game-meta p { font-size: 6px; }
  .card-symbols { top: 29%; right: -22%; transform: rotate(-14deg) scale(.6); }
  .sun-symbol { top: 30%; right: -2%; transform: scale(.65); }
  .roulette-symbol { top: 27%; right: -12%; transform: rotateX(35deg) rotateZ(-18deg) scale(.64); }
  .crash-art { top: 23px; right: -3px; width: 100%; }
  .round-play { right: 7px; bottom: 8px; width: 25px; height: 25px; }
  .round-play .icon { width: 12px; }
  .lobby-bottom { gap: 9px; }
  .lobby-bottom p strong { font-size: 10px; }
  .lobby-bottom p span { font-size: 8px; }
  .site-footer { margin-left: 0; padding: 20px 13px; }
  .bottom-nav { grid-template-columns: repeat(5, 1fr); height: 66px; background: #0c120ff5; }
  .bottom-nav a, .bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; color: #7e8b82; font-size: 9px; }
  .bottom-nav a .icon, .bottom-nav button > .icon { width: 22px; height: 22px; }
  .bottom-nav a.active { color: #16e385; }
  .bottom-nav a.active::before { display: none; }
  .affiliate-circle { display: grid; place-items: center; width: 48px; height: 48px; margin-top: -25px; border: 3px solid #0c120f; border-radius: 50%; background: #075d36; color: #24e58c; box-shadow: 0 0 20px #16e38520; }
  .affiliate-circle .icon { width: 23px; height: 23px; }
  .affiliate-nav > span:last-child { margin-top: -1px; }
  .toast-region { bottom: 80px; }
}
@media (max-width: 380px) { .topbar { padding: 0 9px; gap: 7px; } .topbar .brand { font-size: 18px; } .balance-pill { padding: 6px; } .game-art { height: 150px; } .game-art > strong { font-size: 13px; } }
@media (min-width: 701px) {
  .menu-toggle, .carousel-arrow, .carousel-dots, .install-bar { display: none; }
  .hero-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transform: none !important; }
  .promo-wheel .roulette-symbol { width: 92px; height: 92px; }
  .promo-wheel > strong { font-size: 11px; }
  .sports-orb .icon { width: 92px; height: 92px; }
}
@media (max-width: 700px) {
  .header-search { display: none; }
  .hero-content { max-width: 54%; }
  .hero-track > .hero h1, .hero-track > .hero h2 { font-size: 26px; }
  .hero-visual { right: 0; width: 42%; }
  .slot-cabinet { left: 58%; width: 118px; }
  .carousel-arrow { top: auto; bottom: 24px; width: 24px; height: 30px; }
  .category-tabs a { flex-shrink: 0; padding: 10px 12px; font-size: 10px; }
}