body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 215, 68, .25), transparent 28%),
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.30)),
    url('/assets/fotofinal_v2_pc.webp') center/cover no-repeat fixed !important;
  display: grid;
  place-items: center;
}

html, body { background-color: #000; }
body { overscroll-behavior-y: none; }

@media (max-width: 520px) {
  body { background-position: center bottom !important; }
}

@media (max-width: 700px) {
  body{
    background-image: url('/assets/bg-app-clean.png') !important;
    background-position: center -140px !important;
    background-size: 118% auto !important;
    background-attachment: scroll !important;
  }
}

.app-frame {
  width: 414px;
  max-width: 100vw;
  min-height: 100vh;
  padding: 10px;
}

.phone-shell {
  min-height: calc(100vh - 20px);
  border: 0;
  border-radius: 34px;
  border: 3px solid rgba(255, 206, 72, .92);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.18) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 190, .28),
    inset 0 2px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(0,0,0,.70),
    0 0 26px rgba(255, 200, 40, .22),
    0 0 0 8px rgba(35, 18, 0, .30),
    0 0 0 10px rgba(255, 246, 205, .55),
    0 22px 70px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
}

.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.14)) !important;
  pointer-events: none;
}

.phone-content {
  position: relative;
  z-index: 2;
  padding: 14px 16px 12px;
}

.phone-status { display: none; }

.home-top-actions{
  position: relative;
  z-index: 42;
  width: max-content;
  max-width: 100%;
  margin: 2px 0 8px auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.home-action-chip{
  height: 46px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,12,14,.94), rgba(10,10,12,.94));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 900;
  letter-spacing: .1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.home-action-chip.chip-balance{
  min-width: 124px;
  color: #ffd200;
}

.home-action-chip.chip-balance strong{
  font-size: 27px;
  line-height: 1;
  letter-spacing: .2px;
}

.home-action-chip.chip-deposit{
  min-width: 130px;
  border-color: rgba(255,210,0,.65);
  background: linear-gradient(180deg, #ffd200 0%, #f0b200 100%);
  color: #111;
  box-shadow: 0 8px 20px rgba(255,210,0,.18), inset 0 1px 0 rgba(255,255,255,.45);
}

.home-action-chip.chip-user{
  justify-content: space-between;
  padding: 0 12px;
}

.home-action-chip .chip-caret{
  opacity: .9;
}

.top-user-menu{
  position: relative;
}

.top-user-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,16,19,.97), rgba(10,10,12,.97));
  box-shadow: 0 18px 38px rgba(0,0,0,.48);
  overflow: hidden;
  z-index: 120;
  backdrop-filter: blur(8px);
}

.top-user-dropdown button{
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: #f5f5f5;
  text-align: left;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 700;
}

.top-user-dropdown button:last-child{
  border-bottom: 0;
}

.top-user-dropdown button:hover{
  background: rgba(255,255,255,.08);
}

.top-user-dropdown button.danger{
  color: #ff6161;
}

.bottom-user-menu{
  position: relative;
  height: 100%;
}

.bottom-user-menu > button,
.bottom-user-menu > summary{
  width: 100%;
  height: 100%;
  list-style: none;
  cursor: pointer;
  outline: none;
}

.bottom-user-menu > summary::-webkit-details-marker{
  display: none;
}

.bottom-user-menu > summary{
  display: grid;
  grid-template-rows: 38px 16px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe56d;
  border-radius: 14px;
}

.bottom-user-menu .bottom-label-user{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.bottom-user-menu .chip-caret{
  font-size: 10px;
  opacity: .95;
}

.bottom-user-menu .top-user-dropdown{
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
}

@media (max-width: 520px) {
  html, body { height: 100%; overflow-x: hidden; overflow-y: auto; }
  
  .app-frame { height: auto; min-height: 100svh; padding: 0; position: relative; }
  
  .app-frame::before{
    content: none;
    display: none;
  }
  body{
    display:grid;
    place-items:start center;
    padding: 10px 0;
  }
  .phone-shell { display: flex; flex-direction: column; min-height: 100svh; height: auto; z-index: 1; }
  
  .phone-content { flex: 1 1 auto; height: auto; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; }
  .phone-content{ min-height: 0; }
  
  .bottom-app { margin-top: auto; }
  
  .phone-content { padding: 10px 12px calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
  
  .bottom-app { padding: 1px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; height: 66px !important; }
  .bottom-app button { grid-template-rows: 34px 14px !important; }
  
  .phone-shell::before{
    background: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.14)) !important;
  }

  
  body{
    
    background-image: url('/assets/bg-app-clean-tall-feather3.png?v=mobile2') !important;
    
    background-position: calc(50% + 10px) -195px !important;
    background-size: 110% auto !important;
    background-attachment: scroll !important;
  }

  
  .logo-area { margin: 0 !important; }
  
  .logo-shield{
    transform: translateY(-22px) !important;
    min-height: unset !important;
    width: 100% !important;
    position: relative;
    top: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  .logo-emblema-img{
    width: min(342px, 85.5vw) !important;
    max-height: 42vh !important;
    transform: translateX(15px) translateY(-37px) scale(.806) !important;
    margin: 0 auto 2px !important;
    filter: none !important;
    image-rendering: auto !important;
  }
  
  .logo-year{
    display: block !important;
    top: calc(67% - 59px) !important;
    width: 100% !important;
    left: calc(50% - 2px) !important;
    font-size: clamp(54px, 15.4vw, 82px) !important;
    letter-spacing: 1px;
    text-shadow: 0 10px 22px rgba(0,0,0,.65);
  }

  
  .hero-prizes { display: none !important; }

  .menu-grid-app, .points-card, .rules-btn { position: relative; top: 0 !important; }
  .home-bottom{
    margin-top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .menu-grid-app {
    margin-top: 0 !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
    padding-top: 0 !important;
    background-image: none !important;
  }
  
  .menu-grid-app .tile-label{
    font-size: 102% !important;
    margin-top: -3px !important;
    letter-spacing: .2px;
  }

  
  .points-card{
    background: rgba(10,10,10,.46) !important;
    border: 0 !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.40),
      inset 0 -10px 22px rgba(0,0,0,.22),
      0 18px 40px rgba(0,0,0,.45),
      0 0 0 2px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(8px);
  }
  .points-left{
    gap: 10px !important;
    align-items: center !important;
  }
  .points-left strong{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .7px !important;
    text-shadow: none !important;
  }
  #mypos{
    display: inline-flex !important;
    margin-top: 4px !important;
    transform: translateY(2px) !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 224, 116, .16) !important;
    border: 1px solid rgba(255, 224, 116, .35) !important;
    color: rgba(255,255,255,.92) !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
  }
  #mypos::after{
    content: "";
    display: inline-block;
    width: 34px;
    height: 6px;
    margin-left: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,245,190,.95), rgba(255,206,72,.95));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 2px 6px rgba(0,0,0,.35);
    vertical-align: middle;
  }
  .points-number{
    font-family: "Arial Black", Impact, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 26px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
  }
  .check-ball{
    background: linear-gradient(180deg,#fff6c2 0%, #ffd45a 45%, #d99a00 100%) !important;
    border: 2px solid rgba(90, 58, 0, .75) !important;
    box-shadow: none !important;
    color: #1b1200 !important;
    font-weight: 1000 !important;
  }

  
  .bottom-app{
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    background:
      radial-gradient(220px 120px at 50% 0%, rgba(255,224,116,.22), rgba(255,224,116,0) 60%),
      linear-gradient(180deg, #2cff6a 0%, #00c24b 28%, #009b3a 68%, #006d28 100%) !important;
    border: 2px solid rgba(255, 224, 116, .35) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 -10px 24px rgba(0,0,0,.45),
      0 18px 55px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(10px);
  }
  .bottom-app button,
  .bottom-app button:hover,
  .bottom-app button:active{
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }
  .bottom-app button::before,
  .bottom-app button::after{
    content: none !important;
    display: none !important;
    animation: none !important;
  }
  
  .menu-grid-app { margin-top: auto !important; }
  .points-card { margin-top: 8px !important; }
  .rules-btn { margin: 4px auto 2px !important; }
  
  .menu-grid-app, .points-card { transform: none !important; }
  .rules-btn{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: normal !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .rules-btn{
    font-family: "Arial Black", Impact, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 1000 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
  }
  
  .rules-btn,
  .rules-btn:hover,
  .rules-btn:active{
    animation: none !important;
    filter: none !important;
    background:
      radial-gradient(220px 60px at 50% 15%, rgba(255,255,255,.78), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, #fff3b0 0%, #ffd45a 38%, #f0b308 70%, #b87300 100%) !important;
    border: 2px solid rgba(88, 54, 0, .92) !important;
    color: #1b1200 !important;
    letter-spacing: .8px !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.22),
      0 2px 10px rgba(0,0,0,.45) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.55),
      inset 0 -10px 18px rgba(0,0,0,.18),
      0 10px 18px rgba(0,0,0,.32),
      0 0 16px rgba(255, 200, 40, .18) !important;
  }
  .rules-btn::before,
  .rules-btn::after{
    content: none !important;
    animation: none !important;
    display: none !important;
  }
  .app-tile { height: 82px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; }
  .points-card { margin-top: 3px !important; min-height: 54px !important; padding: 2px 8px !important; }
  
  .logo-year::before { height: clamp(288px, 80vw, 544px) !important; transform: translateX(-50%) translateY(167px) !important; }
  
  .phone-shell{
    width: min(414px, 100%) !important;
    margin: 0 auto !important;
    border-radius: 34px !important;
    border: 3px solid rgba(255, 206, 72, .92) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 245, 190, .28),
      inset 0 2px 0 rgba(255,255,255,.16),
      0 0 0 1px rgba(0,0,0,.70),
      0 0 26px rgba(255, 200, 40, .22),
      0 0 0 8px rgba(35, 18, 0, .30),
      0 0 0 10px rgba(255, 246, 205, .55),
      0 22px 70px rgba(0,0,0,.45) !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .phone-shell::before{ background: none !important; }
  .modal-page { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  
  .points-card{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .points-left strong{
    font-size: 14px !important;
    line-height: 1.15;
    letter-spacing: .6px;
    white-space: nowrap;
  }
  .rules-btn:active{ transform: scale(.98) !important; }
}

@media (min-width: 521px) and (max-width: 700px) {
  .logo-shield { transform: translateY(65px) !important; }
}

.logo-area {
  text-align: center;
  margin: 10px 0 8px;
  position: relative;
  z-index: 30;
  overflow: visible;
}

/* LOCK FINAL (desktop): congela layout aprovado e evita sobrescrita por regras antigas */
@media (min-width: 701px){
  .app-frame .phone-content{
    padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.6vw, 20px) clamp(12px, 1.8vw, 20px) !important;
  }

  .brand-emblem-bg{
    top: -16px !important;
    width: clamp(253px, 27.5vw, 451px) !important;
  }

  .brand-subtitle-overlay{
    top: clamp(68px, 8.5vw, 96px) !important;
    width: clamp(240px, 35vw, 500px) !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .brand-year-overlay{
    top: clamp(122px, 15vw, 170px) !important;
    width: clamp(130px, 16vw, 260px) !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .app-frame .home-bottom{
    width: min(860px, 100%) !important;
    margin: auto auto 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .app-frame .menu-grid-app .app-tile,
  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    min-height: 84px !important;
    height: 84px !important;
    top: 0 !important;
  }

  .app-frame .menu-grid-app .app-tile:not(.points-tile) > span{
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon{
    transform: translateY(-1px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-number{
    transform: translateY(-5px) !important;
  }

  .app-frame .menu-grid-app .pc-only{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .pc-only > span img{
    height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    text-align: center !important;
    width: 100% !important;
  }
}

.logo-area{ display:none !important; }

.logo-shield { 
  margin: auto; 
  background: transparent; 
  border: 0; 
  border-radius: 0; 
  clip-path: none; 
  box-shadow: none; 
  width: min(320px, 92vw); 
  min-height: clamp(200px, 55vw, 320px); 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: flex-start; 
  position: relative;
  z-index: 30;
  overflow: visible;
  transform: translateY(65px);
} 

.logo-emblema-img{ 
  display: block; 
  width: 143%; 
  max-width: none;
  height: auto; 
  margin: 0 auto 10px; 
  transform: translateX(-80px) translateY(-37px) scale(.806) !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); 
} 

@media (min-width: 521px){
  
  .logo-shield{
    width: min(560px, 96vw) !important;
    min-height: clamp(240px, 34vw, 380px) !important;
    transform: translateY(-62px) !important;
  }
  .logo-emblema-img{
    width: 125% !important;
    max-width: 620px;
    transform: translateX(-113px) translateY(-37px) scale(.806) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .logo-year{
    top: calc(67% - 64px) !important;
    width: min(520px, 92%) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateX(-68px) !important;
  }
  .rules-btn{
    transform: none !important;
    width: min(420px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.logo-title {
  display: none;
  font-size: 50px;
  line-height: .82;
  font-weight: 1000;
  color: #ffdf33;
  text-shadow: 0 4px 0 #986700, 0 9px 16px #000;
  letter-spacing: -1px;
}

.logo-ribbon {
  display: none;
  margin: 6px auto;
  width: 230px;
  padding: 5px 8px;
  background: linear-gradient(135deg,#ffe061,#e5a40d);
  color: #1b1300;
  font-size: 24px;
  font-weight: 1000;
  border-radius: 5px;
  transform: rotate(-1deg);
  box-shadow: 0 4px 0 #6b3e00;
}

.logo-year {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(74% - 52px);
  transform: translate(-50%, -50%);
  width: 88%;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.logo-year img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.62));
}

.logo-year::before{
  content: none !important;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: none !important;
  height: clamp(18px, 5vw, 34px);
  aspect-ratio: 3 / 2;
  background: none !important;
  pointer-events: none;
  z-index: -1;
}

.hero-prizes {
  height: 206px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  margin-top: 30px;
  position: relative;
  transform: translateY(-30px);
  z-index: 5;
  pointer-events: none;
}

.hero-badge{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 92%);
  z-index: 6;
  pointer-events: none;
}
.hero-badge img{ width:100%; height:auto; display:block; }

/* Limpa camadas visuais extras */
.brand-subtitle-overlay{
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
  width: clamp(349px, 57vw, 666px);
  height: clamp(81px, 15.1vw, 172px);
  overflow: visible;
}

.brand-subtitle-overlay canvas{
  display: block;
  width: 100%;
  height: 100%;
}

.brand-emblem-bg{
  position: absolute;
  left: 50%;
  top: -43px;
  transform: translateX(-50%);
  width: clamp(306px, 54vw, 504px);
  height: auto;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  z-index: 28;
}

.brand-year-overlay{
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  z-index: 29;
  pointer-events: none;
  width: clamp(168px, 21.6vw, 264px);
  height: clamp(48px, 7.2vw, 89px);
  overflow: visible;
}

.brand-year-overlay canvas{
  display: block;
  width: 100%;
  height: 100%;
}

body.brand-raster-logo .brand-subtitle-overlay,
body.brand-raster-logo .brand-year-overlay{
  display: none !important;
}
[hidden].brand-subtitle-overlay,
[hidden].brand-year-overlay,
body.brand-raster-logo .phone-content > .brand-subtitle-overlay,
body.brand-raster-logo .phone-content > .brand-year-overlay,
html.force-pc body.brand-raster-logo .phone-content > .brand-subtitle-overlay,
html.force-pc body.brand-raster-logo .phone-content > .brand-year-overlay{
  display: none !important;
}
.hero-badge,
.hero-badge img{
  display: none !important;
}

.hero-prizes-img{
  display: block;
  width: calc(min(92vw, 520px) * 1.508325);
  max-width: none;
  height: auto;
  margin: 0 auto;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) contrast(1.08) saturate(1.06);
  transform: translate(-15px, 20px) translateZ(0);
  backface-visibility: hidden;
}
@media (max-width: 520px){
  .hero-prizes-img{
    width: 119.34vw;
    max-width: 119.34vw;
    margin-left: -4.42vw;
    margin-top: 0;
    position: relative;
    top: -2px;
    transform: none !important;
    image-rendering: auto;
    filter: none !important;
  }
  .hero-prizes{
    height: auto !important;
    margin-top: 30px !important;
    transform: translateY(-30px);
  }
}

.cash-stack {
  width: 88px;
  height: 54px;
  background: linear-gradient(#eaffef, #71c885);
  border: 2px solid #d8ffe4;
  border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 16px rgba(0,0,0,.48);
  position: relative;
}

.cash-stack::after {
  content: "100";
  color: #168141;
  font-weight: 1000;
  font-size: 24px;
  position: absolute;
  left: 22px;
  top: 12px;
}

.coin-stack {
  width: 56px;
  height: 52px;
  background:
    radial-gradient(circle at 50% 15%, #fff3a0, #e6a800 45%, #9c6200 80%);
  border-radius: 50%;
  box-shadow:
    -12px 18px 0 -4px #e6a800,
    -20px 28px 0 -6px #e6a800,
    12px 18px 0 -4px #e6a800,
    20px 28px 0 -6px #e6a800;
}

.ball-main {
  font-size: 88px;
  line-height: 1;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
  margin-bottom: 2px;
}

.trophy-main {
  font-size: 78px;
  line-height: 1;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
  margin-bottom: 5px;
}

.trophy-main img{
  height: 78px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
}

.menu-grid-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 6px;
  position: relative;
  z-index: 20;
}

.app-tile {
  min-height: 82px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 18px;
  color: #fff;
  font-weight: 1000;
  font-size: 18px;
  text-shadow: 0 2px 5px #000;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(0,0,0,.44);
}

.app-tile span {
  display: block;
  font-size: 30px;
  margin-bottom: 4px;
}

.app-tile span img{
  height: 40px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain;
}

.app-tile img.tile-icon-palpitar{
  height: 43.2px;
  image-rendering: -webkit-optimize-contrast;
  margin-top: -4px;
  transform: translateY(0px);
  object-fit: contain;
}

.app-tile .tile-label{
  display: block;
  margin-top: -10px;
  line-height: 1;
  letter-spacing: .2px;
}
.menu-grid-app .tile-label{
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3px !important;
  white-space: nowrap;
}
.menu-grid-app .tile-label img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

.modal-hero .hero-title img,
.bottom-app .bottom-label img,
.points-left strong img,
#mypos img,
.rules-btn .raster-text{
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.bottom-app .bottom-label img{
  max-width: 100%;
  margin: 0 auto;
}
.modal-hero .hero-title img{
  max-width: 100%;
}

.app-tile .tile-label.meus{
  margin-top: -14px;
}

.app-tile .tile-label.palpitar{
  margin-top: -9px;
  font-size: 87%;
}

.app-tile .tile-label-tight{
  margin-top: -14px;
}

.app-tile .tile-icon-down{
  margin-top: -4px;
  height: 48px;
  width: auto;
}

.app-tile .tile-label.shift-up-8{
  margin-top: -15px;
}

.app-tile span.tile-icon-up-5{
  position: relative !important;
  top: -5px !important;
}

.app-tile span.tile-icon-up-3{
  position: relative !important;
  top: -3px !important;
}

.app-tile span.tile-icon-down-3{
  position: relative !important;
  top: 3px !important;
}

.app-tile span.tile-icon-up-3 img,
.app-tile span.tile-icon-up-5 img{
  position: relative !important;
  top: inherit !important;
}

  
  .menu-grid-app button[onclick*="openPage('palpitar')"]{ position: relative !important; top: -5px !important; }
  .menu-grid-app button[onclick*="openPage('meus')"]{ position: relative !important; top: -5px !important; }
  .menu-grid-app button[onclick*="premiacao"] span.tile-icon-up-3 img{ height: 48px !important; width: auto !important; transform: translateY(5px) !important; transform-origin: center !important; }
  .menu-grid-app button[onclick*="ranking"] span.tile-icon-down-3 img{ height: 48px !important; width: auto !important; transform: translateY(0px) !important; transform-origin: center !important; }
  .menu-grid-app button[onclick*="openPage('meus')"] img.tile-icon-down{ position: relative !important; top: -3px !important; }

.app-tile.gold {
  background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30);
}

.menu-grid-app button[onclick*="palpitar"].app-tile.gold{
  background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30);
}

.app-tile.green {
  background: linear-gradient(135deg, #15b450, #075d28 70%, #13a549);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 18px rgba(120,255,170,.22),
    0 0 0 2px rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.44),
    0 0 18px rgba(30, 255, 120, .28);
}

.points-card {
  margin-top: 13px;
  min-height: 72px;
  border-radius: 18px;
  border: 0;
  background: linear-gradient(135deg, rgba(0,82,29,.88), rgba(0,27,13,.92));
  box-shadow: 0 8px 18px rgba(0,0,0,.48);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
}

.points-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.points-left > div{
  min-width: 0;
}

.points-icon {
  font-size: 42px;
}

.points-icon img{
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}

.points-left strong {
  display: block;
  font-size: 15px;
  line-height: 1.05;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 1000;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.points-left small {
  display: block;
  color: #ffe66a;
  font-weight: 1000;
  line-height: 1.1;
  font-size: 11px;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.points-number {
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -.02em;
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-stroke: 0 transparent;
  text-shadow:
    0 2px 0 rgba(0,0,0,.70),
    0 8px 14px rgba(0,0,0,.55);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#mypoints{ font-size: 31px !important; }

.check-ball {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #553700;
  background: linear-gradient(#fff078, #e0a000);
  font-size: 22px;
  font-weight: 1000;
}

.rules-btn {
  width: calc(88% - 40px);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 11px auto 8px;
  border: 2px solid rgba(88, 54, 0, .80);
  border-radius: 24px;
  color: #2b1900;
  background:
    radial-gradient(260px 70px at 50% 15%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fff3b0 0%, #ffd45a 38%, #f0b308 70%, #b87300 100%);
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .7px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow:
    0 1px 0 rgba(255,255,255,.22),
    0 2px 10px rgba(0,0,0,.45);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -12px 20px rgba(0,0,0,.16),
    0 14px 26px rgba(0,0,0,.40),
    0 0 18px rgba(255, 200, 40, .20);
  transform: translateX(40px);
}

.bottom-app {
  height: 70px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  padding: 1px 10px 15px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(0,55,20,.92), rgba(0,24,10,.92));
  border: 1px solid rgba(255,215,68,.28);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 26px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}

.bottom-app button {
  background: transparent;
  border: 0;
  color: #ffe56d;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
  padding: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 38px 16px;
  place-items: center;
  overflow: visible;
  border-radius: 14px;
}

.bottom-app .bottom-label{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 16px;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  justify-self: center;
  align-self: center;
  transform: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.65);
}
.bottom-app .bottom-label img{
  width: auto;
  height: 100%;
}
.bottom-app button.active {
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.bottom-app span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe045;
  font-size: 25px;
  margin: 0;
  line-height: 1;
  height: 38px;
  width: 100%;
}
.bottom-app button > span{
  justify-self: center;
  align-self: center;
  transform: none;
}
.bottom-app span.icon-bola { font-size: 28px; }
.bottom-app img.bottom-icon-bola{
  height: 32px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  object-fit: contain;
}
.bottom-app button:nth-child(2) img{ height: 32px !important; }
.bottom-app img.bottom-icon-home{
  height: 32px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  margin-top: 0;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.bottom-app img.bottom-icon-chat{
  height: 32px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  margin-top: 0;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.bottom-app img.bottom-icon-perfil{
  height: 32px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.bottom-app button::after { content: none !important; }

body.modal-open .bottom-app { display: grid !important; }

.modal-page { 
  position: absolute; 
  top: 0;
  right: 0;
  left: 0;
  bottom: 86px;
  background: #060a07; 
  border: 2px solid rgba(255, 208, 62, .88); 
  border-radius: inherit; 
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 190, .45),
    0 0 0 1px rgba(90, 58, 0, .85),
    0 14px 30px rgba(0,0,0,.45),
    0 0 20px rgba(255, 190, 45, .18);
  z-index: 10; 
  padding: 16px 16px 18px; 
  overflow-y: auto; 
  backdrop-filter: none; 
  display: none; 
} 

.modal-page.active { display: block; }

.modal-page h2 {
  margin: 6px 0 12px;
  font-size: 22px;
  letter-spacing: .2px;
}

.modal-mini-nav{
  position: static;
  transform: none;
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid rgba(255, 208, 62, .78);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 52%),
    linear-gradient(135deg, rgba(0,0,0,.64), rgba(0,0,0,.46));
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 190, .16),
    0 6px 12px rgba(0,0,0,.34);
  z-index: 80;
}

.modal-mini-nav button{
  width: 46px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 208, 62, .82);
  background: linear-gradient(135deg, #17ae4e, #075d28 70%, #129a46);
  color: #fff;
  font-weight: 1000;
  letter-spacing: .1px;
  text-shadow: 0 2px 4px rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 3px 8px rgba(0,0,0,.26);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.modal-mini-nav button img{
  display: none !important;
}

.modal-mini-nav button span{
  font-size: 9px;
  line-height: 1;
}

.modal-mini-nav button:active{
  transform: translateY(2px) scale(.99);
  filter: brightness(.95);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.34),
    0 2px 6px rgba(0,0,0,.26);
}

.modal-mini-balance{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 0 10px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 208, 62, .72);
  background: linear-gradient(135deg, rgba(11, 73, 35, .95), rgba(7, 45, 23, .95));
  color: #fff3c2;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.modal-mini-balance-label{
  font-size: 9px;
  opacity: .88;
}

.modal-mini-balance-value{
  font-size: 10px;
  color: #ffe56d;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

@media (max-width: 520px){
  .modal-mini-nav{
    gap: 3px;
    padding: 2px;
  }

  .modal-mini-nav button{
    width: 40px;
    height: 22px;
  }

  .modal-mini-nav button span{
    font-size: 8px;
  }

  .modal-mini-balance{
    padding: 0 8px;
    height: 22px;
    gap: 3px;
  }

  .modal-mini-balance-label{
    font-size: 8px;
  }

  .modal-mini-balance-value{
    font-size: 9px;
  }
}

.modal-hero{
  position: relative;
  overflow: visible;
  border-radius: 12px;
  padding: 3px 8px;
  border: 1px solid rgba(255,215,68,.52);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,215,68,.18) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.34));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -12px 20px rgba(0,0,0,.28),
    0 18px 45px rgba(0,0,0,.50),
    0 0 18px rgba(255, 200, 40, .16);
  backdrop-filter: blur(10px);
}
.modal-hero::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 100%),
    radial-gradient(260px 120px at 24% 14%, rgba(255,255,255,.26), rgba(255,255,255,0) 62%);
  transform: rotate(-14deg);
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events:none;
}
.modal-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 120px at 50% 0%, rgba(255, 220, 90, .20), rgba(255, 220, 90, 0) 62%),
    radial-gradient(6px 6px at 14% 28%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%),
    radial-gradient(5px 5px at 30% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 65%),
    radial-gradient(4px 4px at 46% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%);
  opacity: .65;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.modal-hero > *{ position: relative; z-index: 1; }
.modal-header .modal-hero{ margin-right: 0; }
.modal-hero .hero-row{
  display:flex;
  align-items:center;
  gap: 0;
}
.modal-hero .hero-ico{
  display: none !important;
}
.modal-hero .hero-ico img{ display: none !important; }
.modal-hero .hero-title{
  margin: 0;
  font-weight: 1000;
  letter-spacing: .45px;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 5px #000;
}
.modal-hero .hero-sub{
  display: none !important;
}
.premium-body{ margin-top: 4px; }
.premium-body.regras{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rules-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rule-item{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255, 206, 72, .60);
  background:
    radial-gradient(240px 120px at 22% 12%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    radial-gradient(260px 140px at 76% 18%, rgba(255, 220, 90, .14), rgba(255, 220, 90, 0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.42));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(0,0,0,.40),
    0 0 18px rgba(255, 200, 40, .12);
}
.rule-item::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 100%);
  transform: rotate(-14deg);
  opacity: .35;
  mix-blend-mode: screen;
  pointer-events:none;
}
.rule-item > *{ position: relative; z-index: 1; }
.rule-bullet{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: #2a1a00;
  background: linear-gradient(180deg, #fff7b8 0%, #ffd35a 45%, #e2a10b 100%);
  border: 2px solid rgba(88, 54, 0, .68);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 10px 18px rgba(0,0,0,.35);
}
.rule-title{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.rule-desc{
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.90);
}
.rule-desc b{ color: #ffe56d; }
.rules-note{
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 206, 72, .32);
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.35;
}
.rules-note b{ color: #ffe56d; }
.premium-body.fill{
  min-height: calc(100% - 118px);
  display: flex;
  flex-direction: column;
}
.premium-body.premios{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.premium-body.premios #prizes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.prize-hero-card{
  border-radius: 18px;
  border: 2px solid rgba(255, 206, 72, .78);
  background:
    radial-gradient(260px 130px at 50% 0%, rgba(255,240,160,.28), rgba(255,240,160,0) 62%),
    linear-gradient(180deg, rgba(18,18,22,.94), rgba(8,8,12,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 26px rgba(0,0,0,.48),
    0 0 24px rgba(255,200,40,.22);
  padding: 14px 14px 16px;
  text-align: center;
}
.prize-hero-label{
  color: #ffe56d;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.prize-hero-value{
  color: #121212;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: .3px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid rgba(88, 54, 0, .72);
  background: linear-gradient(180deg, #fff7b8 0%, #ffd35a 45%, #e2a10b 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58), 0 10px 18px rgba(0,0,0,.34);
}
.prize-grid{
  display: grid;
  gap: 10px;
}
.premios-extra{
  margin-top: auto;
  padding-top: 14px;
  text-align: center;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.premios-extra b{ color: #ffe56d; }

.prize-line{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: .35px;
  color: rgba(255,255,255,.96);
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 2px 8px rgba(0,0,0,.55);
  -webkit-text-stroke: .35px rgba(0,0,0,.55);
  border-radius: 18px;
  border: 2px solid rgba(255, 206, 72, .62);
  background:
    radial-gradient(240px 120px at 25% 12%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%),
    radial-gradient(240px 120px at 75% 22%, rgba(255, 220, 90, .14), rgba(255, 220, 90, 0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.42));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -14px 24px rgba(0,0,0,.25),
    0 16px 34px rgba(0,0,0,.45),
    0 0 18px rgba(255, 190, 40, .14);
}
.prize-line::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 100%);
  transform: rotate(-14deg);
  opacity:.45;
  mix-blend-mode: screen;
  pointer-events:none;
}
.prize-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(6px 6px at 14% 32%, rgba(255,255,255,.20), rgba(255,255,255,0) 65%),
    radial-gradient(5px 5px at 32% 22%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%),
    radial-gradient(4px 4px at 48% 34%, rgba(255,255,255,.14), rgba(255,255,255,0) 65%),
    radial-gradient(220px 120px at 50% 0%, rgba(255, 220, 90, .16), rgba(255, 220, 90, 0) 62%);
  opacity:.65;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.prize-line b{
  position: relative;
  z-index: 1;
  font-size: 19px;
  letter-spacing: .35px;
  color: #1b1200;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(88, 54, 0, .75);
  background: linear-gradient(180deg, #fff7b8 0%, #ffd35a 45%, #e2a10b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 10px 18px rgba(0,0,0,.35);
}
.premium-empty{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(255,215,68,.34);
  background: linear-gradient(180deg, rgba(8,12,11,.56), rgba(8,12,11,.34));
  color: rgba(255,255,255,.95);
}
.prize-line .prize-label{
  position: relative;
  z-index: 1;
  color: #f3f6fb;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3px;
}
#meus #mypreds .premium-empty,
#palpitar #games > p{
  margin: 0;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 1000;
  letter-spacing: .35px;
  line-height: 1.16;
  color: #f8fbff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.88),
    0 3px 10px rgba(0,0,0,.58);
  -webkit-text-stroke: .4px rgba(0,0,0,.62);
}

/* Esconde a mensagem de "Nenhum jogo cadastrado." atrás do fundo, sem remover lógica */
#palpitar #games > p{
  position: absolute !important;
  z-index: -10 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mensagem alternativa no PALPITAR em formato de pílula (fonte padrão) */
#palpitar #games .no-games-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: fit-content;
  max-width: 100%;
  padding: 0 20px;
  margin: 8px auto 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 208, 62, .75);
  background: linear-gradient(180deg, rgba(8,12,11,.72), rgba(8,12,11,.52));
  color: #f2f6fa;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Botão único para estado sem jogos */
#palpitar #games .no-games-rules-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  width: fit-content;
  max-width: 100%;
  padding: 0 20px;
  margin: 8px auto 0;
  border-radius: 9999px;
  border: 2px solid rgba(255, 208, 62, .95);
  background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30);
  color: #13100a;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(0,0,0,.44);
}

.podium{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}
.podium .pod{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px 10px;
  min-height: 150px;
  border: 3px solid rgba(255, 206, 72, .75);
  background:
    radial-gradient(260px 140px at 50% 0%, rgba(255, 240, 160, .22), rgba(255, 240, 160, 0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.56));
  text-align:center;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.12),
    0 20px 40px rgba(0,0,0,.55),
    0 0 26px rgba(255, 200, 40, .18);
}
.pod .pod-medal{
  position: relative;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(54, 33, 0, .82);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.58),
    inset 0 -8px 14px rgba(0,0,0,.18),
    0 10px 18px rgba(0,0,0,.42);
}

.pod .pod-medal::before,
.pod .pod-medal::after{
  content:"";
  position: absolute;
  top: -16px;
  width: 15px;
  height: 26px;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(180deg, #108f49, #075f32);
  z-index: -1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.pod .pod-medal::before{
  left: 15px;
  transform: rotate(-14deg);
}

.pod .pod-medal::after{
  right: 15px;
  transform: rotate(14deg);
  background: linear-gradient(180deg, #ffd84f, #c98b00);
}

.pod .pod-medal span{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.24);
  color: #1b1200;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.pod .pod-medal.medal-1{
  background: radial-gradient(circle at 32% 22%, #fff8bd 0%, #ffe45f 28%, #f4b717 62%, #a96800 100%);
}

.pod .pod-medal.medal-2{
  background: radial-gradient(circle at 32% 22%, #ffffff 0%, #e8edf4 30%, #aeb7c5 66%, #68717d 100%);
}

.pod .pod-medal.medal-3{
  background: radial-gradient(circle at 32% 22%, #ffe0b7 0%, #d78b39 34%, #9c541d 68%, #5d2b10 100%);
}
.podium .pod::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 100%);
  transform: rotate(-14deg);
  opacity:.45;
  mix-blend-mode: screen;
  pointer-events:none;
}
.podium .pod > *{ position: relative; z-index: 1; }
.pod .pod-rank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 16px;
  color: #1b1200;
  border: 2px solid rgba(88, 54, 0, .75);
  background: linear-gradient(180deg, #fff7b8 0%, #ffd35a 45%, #e2a10b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 10px 18px rgba(0,0,0,.35);
}
.pod .pod-name{
  margin-top: 10px;
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pod .pod-points{
  margin-top: 8px;
  opacity: .96;
  font-size: 13px;
  letter-spacing: .25px;
}
.pod.p1{
  transform: translateY(-8px);
  min-height: 182px;
  border-color: rgba(255, 206, 72, 1);
  background:
    radial-gradient(280px 160px at 50% 0%, rgba(255, 255, 210, .32), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(60,35,0,.70), rgba(0,0,0,.56));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.12),
    0 18px 40px rgba(0,0,0,.50),
    0 0 36px rgba(255, 200, 40, .30);
}
.pod.p2{ opacity: .96; min-height: 160px; }
.pod.p3{ opacity: .94; min-height: 150px; }

.rank-section-title{
  margin-top: 14px;
  margin-bottom: 8px;
  color: #ffe56d;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.rank-table-wrap{
  margin-top: 8px;
  border: 2px solid rgba(255, 206, 72, .55);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.55));
}

.rank-table{
  width: 100%;
  border-collapse: collapse;
}

.rank-table thead th{
  background: rgba(255, 206, 72, .16);
  color: #ffe56d;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .35px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 206, 72, .28);
}

.rank-table tbody td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.rank-table tbody tr:last-child td{
  border-bottom: 0;
}

.rank-table .col-pos{
  width: 88px;
  color: #ffe56d;
}

.rank-pos-badge{
  min-width: 46px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 226, 96, .42);
  background: rgba(255, 226, 96, .08);
  color: #ffe56d;
  font-weight: 1000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.rank-pos-badge.top-1{
  color: #1b1200;
  background: linear-gradient(180deg, #fff2a0, #f2b91e);
  border-color: rgba(255,245,180,.88);
}

.rank-pos-badge.top-2{
  color: #111820;
  background: linear-gradient(180deg, #f8fbff, #aeb8c6);
  border-color: rgba(255,255,255,.78);
}

.rank-pos-badge.top-3{
  color: #fff8ec;
  background: linear-gradient(180deg, #d98b3d, #7b3d15);
  border-color: rgba(255,204,150,.72);
}

.rank-table .col-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-table .col-points{
  width: 95px;
  text-align: right;
  color: #ffe56d;
}

.rank-table tbody tr.me{
  background: rgba(255, 206, 72, .12);
}

.pred-list .pred-item{
  background: rgba(0,0,0,.62);
  border: 2px solid rgba(255, 206, 72, .65);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -16px 24px rgba(0,0,0,.22),
    0 18px 45px rgba(0,0,0,.55),
    0 0 22px rgba(255, 200, 40, .14);
  backdrop-filter: blur(10px);
}
.pred-item .pred-meta{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-weight: 1000;
}
.pred-item .pred-badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 206, 72, .55);
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.30));
  font-size: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    0 10px 18px rgba(0,0,0,.35);
}
.pred-item .pred-score{
  padding: 8px 14px;
  border-radius: 14px;
  border: 2px solid rgba(88, 54, 0, .70);
  background: linear-gradient(180deg, #fff7b8 0%, #ffd35a 45%, #e2a10b 100%);
  color: #111;
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: 16px;
  min-width: 72px;
  text-align: center;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 12px 22px rgba(0,0,0,.40);
}
.pred-item .pred-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,68,.32), transparent);
  margin-top: 12px;
}

#resultsGames .result-item{
  margin: 14px 0 !important;
  padding: 14px !important;
}

#resultsGames .result-score-row{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

#resultsGames .result-game-date{
  margin-top: 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 233, 145, .95);
  letter-spacing: .2px;
}

#resultsGames .pred-score{
  min-width: 110px;
  font-size: 26px;
  padding: 10px 16px;
  border-radius: 12px;
}

.pay-box{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,215,68,.35);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
}

.pay-box label{
  display:block;
  font-weight: 900;
  margin: 10px 0 6px;
}

.pay-box select,
.pay-box input,
.pay-box textarea{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #fff;
}

.pay-box textarea{ min-height: 92px; resize: vertical; }
.pay-box input::placeholder,
.pay-box textarea::placeholder{ color: rgba(255,255,255,.55); }

.pay-box #pixPayload{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.25;
}

.pay-primary{
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#ffe56d,#e2a10b);
  color: #111;
  font-weight: 1000;
  padding: 12px;
}

.pay-secondary{
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 900;
  padding: 12px;
}

.wallet-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.wallet-inline-modal{
  margin-top: 10px;
  border: 1px solid rgba(255, 215, 68, .35);
  border-radius: 14px;
  background: rgba(0,0,0,.42);
  padding: 10px;
}

.wallet-inline-card h3{
  margin: 0 0 8px;
  font-size: 18px;
}

.wallet-inline-card label{
  margin-top: 8px;
}

.wallet-balance-value{
  font-size: 28px;
  font-weight: 1000;
  color: #ffe56d;
  margin-bottom: 10px;
}

/* Layout novo: depósito/saque no estilo app de cassino */
.wallet-shell{
  max-width: 640px;
  margin: 8px auto 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(14,14,16,.95), rgba(10,10,12,.95));
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

.wallet-hero{
  text-align: center;
  margin-bottom: 10px;
}

.wallet-hero-icon{
  width: 74px;
  height: 74px;
  margin: 0 auto 8px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: linear-gradient(180deg, #ffd200 0%, #e7ab00 100%);
  color: #111;
  box-shadow: 0 12px 24px rgba(255, 210, 0, .2);
}

.wallet-hero h3{
  margin: 0;
  font-size: 40px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.wallet-label{
  margin-top: 12px;
  margin-bottom: 6px;
  display: block;
  color: rgba(255,255,255,.84);
  font-weight: 700;
}

.wallet-shell input,
.wallet-shell textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(40,40,44,.75), rgba(31,31,35,.75));
  color: #fff;
  padding: 13px 14px;
}

.quick-values{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.quick-values button{
  border-radius: 10px;
  border: 1px solid rgba(18, 180, 96, .45);
  background: linear-gradient(180deg, rgba(7,66,38,.9), rgba(6,44,26,.9));
  color: #ffd200;
  font-weight: 900;
  padding: 11px 8px;
  white-space: nowrap;
  word-break: keep-all;
}

.wallet-shell .pay-secondary{
  background: linear-gradient(180deg, #0f8f4b 0%, #0a6e38 100%);
  border: 1px solid rgba(18, 180, 96, .55);
  color: #fff;
}

.wallet-shell .pay-primary{
  background: linear-gradient(180deg, #ffd200 0%, #f0b200 100%);
  color: #111;
  box-shadow: 0 10px 20px rgba(255, 210, 0, .2);
}

.pix-action-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.pix-action-row .pay-secondary{
  width: 100%;
  margin: 0 !important;
  min-height: 54px;
}

.wallet-shell #pixPayload{
  min-height: 86px;
  font-size: 12px;
}

.pix-qr-wrap{
  margin-top: 12px;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28,28,32,.74), rgba(18,18,22,.74));
}

.pix-qr-wrap img{
  width: min(220px, 70vw);
  max-width: 220px;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.pix-qr-fallback{
  width: 100%;
  border: 1px solid rgba(255, 208, 62, .45);
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.86);
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.wallet-inline-modal{
  position: fixed;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.55);
  padding: 14px;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
}

.wallet-inline-card{
  width: min(620px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,16,18,.97), rgba(10,10,12,.97));
  padding: 16px;
}

#walletWithdrawModal{
  position: fixed !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: #000 !important;
  z-index: 999999 !important;
}

#walletWithdrawModal .wallet-inline-card{
  transform: none !important;
  margin: 0 !important;
  width: min(620px, calc(100% - 8px)) !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
}

#deposito.withdraw-open .wallet-shell,
#deposito.withdraw-open #walletBalanceModal{
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Desktop: versão compacta do modal de saque para evitar rolagem */
@media (min-width: 701px){
  html:not(.force-pc) #walletWithdrawModal{
    padding: 8px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .wallet-inline-card{
    width: min(560px, calc(100% - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .wallet-inline-card h3{
    margin: 0 0 8px !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  html:not(.force-pc) #walletWithdrawModal .wallet-balance-panel{
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .wallet-balance-panel strong{
    font-size: 22px !important;
    margin-top: 2px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .wallet-inline-card label{
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    font-size: 16px !important;
  }

  html:not(.force-pc) #walletWithdrawModal input{
    padding: 9px 12px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .quick-values{
    margin-top: 8px !important;
    gap: 6px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .quick-values button{
    padding: 8px 6px !important;
    min-height: 36px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  html:not(.force-pc) #walletWithdrawModal .pay-primary,
  html:not(.force-pc) #walletWithdrawModal .pay-secondary{
    margin-top: 8px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  html:not(.force-pc) #pagamento.modal-page,
  html:not(.force-pc) #deposito.modal-page{
    padding-bottom: 24px !important;
  }

  html:not(.force-pc) #pagamento .pay-box{
    max-width: 560px !important;
    margin: 8px auto 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  html:not(.force-pc) #pagamento .pay-primary,
  html:not(.force-pc) #pagamento .pay-secondary{
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  html:not(.force-pc) #deposito .wallet-shell{
    max-width: 560px !important;
    margin: 6px auto 0 !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  html:not(.force-pc) #deposito .wallet-label{
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    font-size: 15px !important;
  }

  html:not(.force-pc) #deposito input,
  html:not(.force-pc) #deposito textarea{
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  html:not(.force-pc) #deposito #pixPayload{
    min-height: 70px !important;
  }

  html:not(.force-pc) #deposito .quick-values{
    margin-top: 8px !important;
    gap: 6px !important;
  }

  html:not(.force-pc) #deposito .quick-values button{
    min-height: 36px !important;
    padding: 8px 6px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  html:not(.force-pc) #deposito .pay-primary,
  html:not(.force-pc) #deposito .pay-secondary{
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
}

.wallet-inline-card h3{
  text-align: center;
  margin: 4px 0 12px;
  font-size: 32px;
  font-weight: 1000;
}

.wallet-balance-panel{
  border: 1px solid rgba(18, 180, 96, .45);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(7,66,38,.9), rgba(6,44,26,.9));
  margin-bottom: 10px;
}

.wallet-balance-panel small{
  display: block;
  color: rgba(255,255,255,.75);
}

.wallet-balance-panel strong{
  display: block;
  margin-top: 4px;
  color: #ffd200;
  font-size: 30px;
  font-weight: 1000;
}

/* Hover nos botões (desktop/mouse) */
.quick-values button,
.wallet-shell .pay-primary,
.wallet-shell .pay-secondary,
.wallet-inline-card .pay-primary,
.wallet-inline-card .pay-secondary,
.home-action-chip,
.modal-mini-nav button,
.modal-mini-nav .modal-mini-balance{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    border-color .16s ease;
}

@media (hover: hover) and (pointer: fine){
  .quick-values button:hover,
  .wallet-shell .pay-primary:hover,
  .wallet-shell .pay-secondary:hover,
  .wallet-inline-card .pay-primary:hover,
  .wallet-inline-card .pay-secondary:hover,
  .home-action-chip:hover,
  .modal-mini-nav button:hover,
  .modal-mini-nav .modal-mini-balance:hover{
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 10px 22px rgba(0,0,0,.32);
  }
}

.quick-values button:active,
.wallet-shell .pay-primary:active,
.wallet-shell .pay-secondary:active,
.wallet-inline-card .pay-primary:active,
.wallet-inline-card .pay-secondary:active,
.home-action-chip:active,
.modal-mini-nav button:active,
.modal-mini-nav .modal-mini-balance:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(.96);
}

.modal-header{
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 1px 0 2px;
  background: linear-gradient(to bottom, rgba(6,10,7,.98) 0%, rgba(6,10,7,.94) 70%, rgba(6,10,7,0) 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,215,68,.10);
  position: relative;
}

.modal-header:empty{
  display: none;
}

.close-page {
  display: none !important;
}

.game-card, .rank-line, .prize-line {
  background: rgba(0,80,30,.48);
  border: 2px solid rgba(255,215,68,.55);
  border-radius: 16px;
  padding: 12px;
  margin: 10px 0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 8px 16px rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.40);
}

.team-line {
  display: grid;
  grid-template-columns: 54px 1fr auto 1fr 54px;
  align-items: center;
  gap: 8px;
  font-weight: 1000;
  text-align: center;
}

.team-line span{
  min-width: 0;
  max-width: 100%;
  font-size: clamp(12px, 3.7vw, 16px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 360px){
  .team-line{ grid-template-columns: 50px 1fr auto 1fr 50px; }
  .crest-box{ width: 50px; height: 50px; }
  .crest{ width: 50px; height: 50px; }
}
.team-line b{
  font-size: 14px;
  letter-spacing: .2px;
  opacity: .95;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid rgba(255, 206, 72, .55);
  background: rgba(0,0,0,.35);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 8px 14px rgba(0,0,0,.30);
}

.crest-box{
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.crest {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

.game-card > .result-game-date{
  width: 100%;
  margin: 8px auto 0;
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  color: rgba(255, 233, 145, .96);
}

.pred-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.game-card-closed{
  opacity: .82;
}

.prediction-closed{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(255, 206, 72, .55);
  background: rgba(0,0,0,.46);
  color: #ffe56d;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}

.pred-field label{
  display:block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.88);
  margin: 0 0 6px 2px;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 2px 6px rgba(0,0,0,.55);
  -webkit-text-stroke: .35px rgba(0,0,0,.55);
}

.pred-field input{
  display:block;
}

.pred-inputs input {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid rgba(255, 206, 72, .55);
  background: rgba(0,0,0,.45);
  color: #fff;
  text-align: center;
  font-size: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 8px 16px rgba(255,255,255,.06),
    0 10px 18px rgba(0,0,0,.35);
}

.pred-inputs button, .mini-btn {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(#ffe56d,#e2a10b);
  color: #111;
  font-weight: 1000;
  padding: 6px 8px;
  min-width: 44px;
  font-size: 12px;
  line-height: 1;
  align-self: end;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 18px rgba(0,0,0,.35);
  border: 2px solid rgba(88, 54, 0, .70);
}

@media(max-width:420px){
  .app-frame { padding: 0; }
  .phone-shell {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .logo-shield { width: 260px; min-height: 150px; }
  .logo-title { font-size: 46px; }
  .logo-ribbon { font-size: 22px; width: 215px; }
  .logo-year { font-size: 43.2px; }
}

@media (max-width: 520px){
  .bottom-app{
    background:
      radial-gradient(220px 120px at 50% 0%, rgba(255,224,116,.22), rgba(255,224,116,0) 60%),
      linear-gradient(180deg, #2cff6a 0%, #00c24b 28%, #009b3a 68%, #006d28 100%) !important;
    border: 6px solid rgba(255, 206, 72, 1) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 246, 205, .92),
      inset 0 2px 0 rgba(255,255,255,.40),
      inset 0 0 18px rgba(255,255,255,.14),
      inset 0 -10px 22px rgba(0,0,0,.22),
      0 18px 40px rgba(0,0,0,.55),
      0 0 0 2px rgba(0,0,0,.55),
      0 0 0 5px rgba(255, 246, 205, .55),
      0 0 18px rgba(255, 170, 0, .45),
      0 0 0 8px rgba(35, 18, 0, .30) !important;
  }
}

@media (max-width: 520px){
  button.rules-btn,
  button.rules-btn:hover,
  button.rules-btn:active{
    background:
      radial-gradient(220px 60px at 50% 15%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, #fff3b0 0%, #ffd45a 38%, #f0b308 70%, #b87300 100%) !important;
    border: 2px solid rgba(88, 54, 0, .92) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.55),
      inset 0 -10px 18px rgba(0,0,0,.18),
      0 10px 18px rgba(0,0,0,.32),
      0 0 16px rgba(255, 200, 40, .18) !important;
    filter: none !important;
    color: #1b1200 !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.22),
      0 2px 10px rgba(0,0,0,.45) !important;
    -webkit-text-stroke: 0 transparent !important;
    letter-spacing: .7px !important;
    animation: none !important;
  }
  
  button.rules-btn::after{
    content: none !important;
    display: none !important;
    animation: none !important;
  }
  button.rules-btn::before{
    content: "" !important;
    position: absolute !important;
    inset: 2px 6px 55% 6px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 520px){
  img.logo-emblema-img{
    
    width: 119vw !important;
    max-width: none !important;
    transform: translateX(-37px) translateY(-37px) scale(.806) !important;
    filter: none !important;
  }
}

@media (max-width: 700px){
  html, body{ height: 100svh !important; overflow: hidden !important; }
  
  body{
    background: url('/assets/fotofinal_v2_pc.webp') center/cover no-repeat fixed !important;
    background-attachment: scroll !important;
  }
  
  .phone-shell{
    border: 0 !important;
    
    box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
  }
  
  .phone-shell::before{ background: none !important; }
  .phone-shell::after{ content: none !important; display: none !important; }
  .logo-area::before{ content: none !important; display: none !important; }
  
  .logo-area{ display: none !important; }
  .logo-area .logo-shield{ margin: 0 auto !important; }
  
  .hero-prizes{ display: block !important; }
  
  .hero-prizes{
    margin-top: 0 !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
    margin-bottom: -90px !important;
    background-image: none !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .hero-prizes-img{
    display: block !important;
    width: 110% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 auto !important;
    transform: translateX(-40px) translateY(87px) scale(1.20) !important;
    
    
    filter: none !important;
  }
  
  .phone-content{ padding-top: 0 !important; }
  .phone-content{ transform: translateY(-15px) !important; }
  
  .home-bottom{
    transform: translateY(83px) !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  .menu-grid-app{
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  .menu-grid-app .app-tile{ transform: none !important; }
  .menu-grid-app button[onclick*="openPage('palpitar')"],
  .menu-grid-app button[onclick*="openPage('meus')"],
  .menu-grid-app button[onclick*="openPage('ranking')"],
  .menu-grid-app button[onclick*="openPage('premiacao')"]{
    position: relative !important;
    top: 12px !important;
  }
  
  .menu-grid-app button[onclick*="openPage('ranking')"],
  .menu-grid-app button[onclick*="openPage('premiacao')"]{
    top: 14px !important;
  }
  .points-card{ margin-top: 7px !important; position: relative !important; top: 4px !important; }
  .rules-btn{ margin-top: 8px !important; margin-bottom: 14px !important; }
  .rules-btn{ width: calc(100% - 80px) !important; margin-left: 40px !important; margin-right: 40px !important; box-sizing: border-box !important; }
  .bottom-app{ position: relative !important; top: 9px !important; }
  
  .phone-content{ overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  

}

@media (max-width: 520px){
  .phone-shell::before{ content: none !important; display: none !important; }
}


/* Reset final para eliminar regras antigas conflitantes */
@media (max-width: 700px){
  .phone-content{
    transform: none !important;
    padding: 10px 12px 14px !important;
  }

  .hero-prizes{
    margin: 0 0 12px !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero-prizes-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    filter: none !important;
  }

  .home-bottom{
    transform: none !important;
    margin-top: 0 !important;
    z-index: 10 !important;
  }

  .menu-grid-app{
    margin: 0 !important;
    gap: 10px !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .menu-grid-app .app-tile{
    position: static !important;
    top: auto !important;
    transform: none !important;
    min-height: 72px !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .menu-grid-app .app-tile span{
    margin: 0 !important;
  }

  .menu-grid-app .app-tile span:empty{
    display: none !important;
  }

  .menu-grid-app .tile-label{
    margin: 0 !important;
    height: auto !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: .2px !important;
  }

  .menu-grid-app button[onclick*="palpitar"].app-tile.gold{
    background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
  }

  .menu-grid-app .points-tile{
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .menu-grid-app .points-tile .points-left{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .menu-grid-app .points-tile .points-left strong{
    font-size: 30px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .menu-grid-app .points-tile .points-left small{
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .menu-grid-app .points-tile .points-number{
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .menu-grid-app .pc-only{
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  .bottom-app{
    position: static !important;
    top: auto !important;
    margin-top: 10px !important;
    height: 64px !important;
    padding: 4px 8px 8px !important;
  }
}

/* Override final: 1 fundo apenas + sem "raio de luz" nos botões */
@media (max-width: 700px){
  body{
    --mobile-bg-lift: -2px;
    background-color: #000 !important;
    background-image: url('/assets/imagemfd.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center calc(0px - var(--mobile-bg-lift)) !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  .hero-prizes{
    display: none !important;
  }

  body::before,
  body::after,
  .phone-shell::before,
  .phone-shell::after,
  .logo-area::before,
  .logo-area::after,
  .hero-prizes::before,
  .hero-prizes::after{
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .menu-grid-app .app-tile::before,
  .menu-grid-app .app-tile::after,
  .rules-btn::before,
  .rules-btn::after,
  .bottom-app button::before,
  .bottom-app button::after,
  button::before,
  button::after{
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }

  .menu-grid-app .app-tile,
  .rules-btn,
  .bottom-app button{
    animation: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Override final desktop: neutraliza gambiarras mobile e limpa layout PC */
@media (min-width: 900px){
  body{
    background: #000 url('/assets/fotofinal_v2_pc.webp') center center / cover no-repeat fixed !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }

  .app-frame{
    width: min(1222px, 96vw) !important;
    max-width: 1222px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .phone-shell{
    width: 100% !important;
    aspect-ratio: 1222 / 551 !important;
    min-height: 551px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .phone-shell::before,
  .phone-shell::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .phone-content{
    height: 100% !important;
    min-height: 100% !important;
    padding: 22px 24px 14px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-prizes{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .hero-prizes-img{
    display: none !important;
  }

  .home-bottom{
    transform: none !important;
    margin: 0 auto !important;
    width: min(760px, 100%) !important;
    z-index: 10 !important;
  }

  .menu-grid-app{
    width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }

  .menu-grid-app .app-tile{
    position: static !important;
    top: auto !important;
    transform: none !important;
    min-height: 82px !important;
    height: auto !important;
    padding: 8px !important;
    gap: 4px !important;
  }

  .menu-grid-app .tile-label,
  .menu-grid-app .tile-label.palpitar,
  .menu-grid-app .tile-label.meus,
  .menu-grid-app .tile-label.shift-up-8{
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 14px !important;
  }

  .menu-grid-app button[onclick*="openPage('palpitar')"],
  .menu-grid-app button[onclick*="openPage('meus')"],
  .menu-grid-app button[onclick*="openPage('ranking')"],
  .menu-grid-app button[onclick*="openPage('premiacao')"]{
    position: static !important;
    top: auto !important;
  }

  .menu-grid-app .points-tile,
  .menu-grid-app .pc-only{
    grid-column: auto !important;
    min-height: 82px !important;
    height: auto !important;
  }

  .menu-grid-app .points-tile{
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .menu-grid-app .points-tile .points-left{
    min-width: 0 !important;
    gap: 8px !important;
  }

  .menu-grid-app .points-tile .points-left strong{
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .menu-grid-app .points-tile .points-left small{
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .menu-grid-app .points-tile .points-number{
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .bottom-app{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(760px, 100%) !important;
    margin: 10px auto 0 !important;
    height: 66px !important;
    padding: 4px 8px 8px !important;
  }

  /* Remove banner/fogos dentro do botão PALPITAR */
  .menu-grid-app button[onclick*="palpitar"].app-tile.gold{
    background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
  }
}

/* Hard reset final: remove moldura/limite retangular e brilho correndo */
.app-frame{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

.phone-shell{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.phone-shell::before,
.phone-shell::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.app-frame button::before,
.app-frame button::after,
.app-frame .app-tile::before,
.app-frame .app-tile::after,
.app-frame .rules-btn::before,
.app-frame .rules-btn::after,
.app-frame .bottom-app button::before,
.app-frame .bottom-app button::after{
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Oculta barras de rolagem visíveis em toda a interface */
.app-frame,
.app-frame *{
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* IE/Edge legado */
}

.app-frame *::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* Desce os botões da home até a base (PC + mobile) */
.app-frame .phone-content{
  display: flex !important;
  flex-direction: column !important;
}

.app-frame .home-bottom{
  margin-top: auto !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

.app-frame .bottom-app{
  margin-top: 8px !important;
}

@media (max-width: 700px){
  .app-frame .phone-content{
    min-height: 100svh !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-frame .bottom-app{
    position: static !important;
    top: auto !important;
  }
}

/* Imagem editada no PC: 10px acima da bola */
.pc-overlay-edit{
  display: none;
}

@media (min-width: 900px){
  .app-frame .phone-content{
    position: relative !important;
  }

  .pc-overlay-edit{
    display: block !important;
    position: absolute;
    left: 50%;
    bottom: 276px;
    transform: translateX(-50%);
    width: 358px;
    height: 358px;
    z-index: 6;
    pointer-events: none;
  }

  .pc-overlay-edit img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Sobe todo o conjunto de botões em 30px */
  .app-frame .home-bottom,
  .app-frame .bottom-app{
    transform: translateY(-30px) !important;
  }

  /* PC: mantém ícones estritamente dentro dos botões */
  .app-frame .menu-grid-app .app-tile{
    overflow: hidden !important;
  }

  .app-frame .menu-grid-app .app-tile > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .app-tile > span img{
    max-width: 100% !important;
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }

  .app-frame .menu-grid-app .app-tile .tile-label,
  .app-frame .menu-grid-app .app-tile .tile-label.meus,
  .app-frame .menu-grid-app .app-tile .tile-label.palpitar,
  .app-frame .menu-grid-app .app-tile .tile-label.shift-up-8{
    margin: 0 !important;
  }

  .app-frame .bottom-app{
    overflow: hidden !important;
    padding: 4px 8px 8px !important;
    gap: 8px !important;
    transform: translateY(-35px) !important;
    border: 2px solid rgba(255, 208, 62, .92) !important;
    border-radius: 20px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 244, 190, .45),
      0 0 0 1px rgba(90, 58, 0, .88),
      0 12px 24px rgba(0,0,0,.36),
      0 0 16px rgba(255, 190, 45, .18) !important;
  }

  .app-frame .bottom-app button{
    overflow: visible !important;
    display: grid !important;
    grid-template-rows: 38px 16px !important;
    align-items: center !important;
    height: 100% !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .app-frame .bottom-app button > span{
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    transform: none !important;
    align-self: end !important;
  }

  .app-frame .bottom-app button > span img{
    max-height: 32px !important;
    height: 32px !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
  }

  .app-frame .bottom-app .bottom-label{
    height: 16px !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    transform: none !important;
    align-self: start !important;
    justify-self: center !important;
    padding: 0 !important;
  }

  .app-frame .bottom-app .bottom-label img{
    height: 16px !important;
    width: auto !important;
  }

  /* PC: mesma moldura dourada nos botões */
  .app-frame .menu-grid-app .app-tile{
    border: 2px solid rgba(255, 208, 62, .90) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 244, 190, .42),
      0 0 0 1px rgba(90, 58, 0, .82),
      0 10px 20px rgba(0,0,0,.36),
      0 0 16px rgba(255, 190, 45, .18) !important;
  }

  .app-frame .bottom-app button.active{
    background: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
  }

  /* PC: manta/moldura somente na área dos botões */
  .app-frame .home-bottom{
    position: relative !important;
  }

  .app-frame .home-bottom::after{
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 208, 62, .92);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.46) 45%, rgba(0,0,0,.36)),
      radial-gradient(140% 90% at 50% 0%, rgba(255,210,100,.05), rgba(255,210,100,0) 62%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 244, 190, .45),
      inset 0 1px 0 rgba(255,255,255,.14),
      0 0 0 1px rgba(90, 58, 0, .88),
      0 18px 34px rgba(0,0,0,.45),
      0 0 20px rgba(255, 190, 45, .22);
    pointer-events: none;
    z-index: 0;
  }

  .app-frame .home-bottom > *{
    position: relative;
    z-index: 1;
  }

  body.modal-open .app-frame .home-bottom::after{
    display: none;
  }

}

/* Estabilização responsiva (PC/TV + Mobile) */
@media (min-width: 701px){
  .brand-subtitle-overlay{
    top: 72px !important;
    transform: translateX(-50%) scale(.65) !important;
    transform-origin: top center !important;
  }

  .brand-year-overlay{
    top: 124px !important;
    transform: translateX(-50%) scale(.65) !important;
    transform-origin: top center !important;
  }

  .brand-emblem-bg{
    top: -55px !important;
    width: clamp(236px, 41.6vw, 388px) !important;
  }
}

@media (min-width: 900px){
  .app-frame{
    width: min(96vw, 1222px) !important;
    max-width: 1222px !important;
  }

  .phone-shell{
    aspect-ratio: 1222 / 551 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .phone-content{
    padding:
      clamp(12px, 1.8vw, 22px)
      clamp(12px, 2vw, 24px)
      clamp(8px, 1.2vw, 14px) !important;
  }

  .pc-overlay-edit{
    width: clamp(260px, 29vw, 358px) !important;
    height: clamp(260px, 29vw, 358px) !important;
    bottom: clamp(238px, 40%, 294px) !important;
  }

  .brand-subtitle-overlay{
    top: calc(clamp(60px, 11%, 88px) + 4px) !important;
  }

  .brand-year-overlay{
    top: calc(clamp(123px, 22%, 171px) + 4px) !important;
  }

  .home-bottom,
  .bottom-app{
    width: min(760px, 100%) !important;
  }

  .app-frame .home-bottom::after{
    inset: clamp(-8px, -0.9vw, -6px) !important;
  }

  .app-frame .bottom-app{
    transform: translateY(-4px) !important;
  }

}

@media (max-width: 700px){
  .app-frame{
    width: min(100vw, 420px) !important;
  }

  .phone-content{
    padding-left: clamp(10px, 3.2vw, 14px) !important;
    padding-right: clamp(10px, 3.2vw, 14px) !important;
  }

  .menu-grid-app{
    gap: clamp(8px, 2.4vw, 12px) !important;
  }

  .bottom-app{
    height: clamp(62px, 12vw, 72px) !important;
  }
}

/* PC final: ícone no PALPITAR + ícones dos 6 botões em +10% */
@media (min-width: 900px){
  .app-frame .menu-grid-app button[onclick*="openPage('palpitar')"] > span img{
    max-height: 30.6px !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
  }

  .app-frame .menu-grid-app button[onclick*="openPage('meus')"] > span img,
  .app-frame .menu-grid-app button[onclick*="openPage('ranking')"] > span img,
  .app-frame .menu-grid-app button[onclick*="openPage('premiacao')"] > span img,
  .app-frame .menu-grid-app button[onclick*="openPage('regras')"] > span img{
    max-height: 38px !important; /* +5% adicional */
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon img{
    height: 46px !important; /* 42 -> 46 (+~10%) */
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
  }
}

/* Efeito de clique (afundar/voltar) nos 6 botões da grade principal */
.app-frame .menu-grid-app .app-tile{
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease !important;
  will-change: transform, box-shadow, filter;
  touch-action: manipulation;
}

.app-frame .menu-grid-app .app-tile:active,
.app-frame .menu-grid-app .app-tile.is-pressing{
  transform: translateY(3px) scale(.992) !important;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 3px 9px rgba(0,0,0,.36) !important;
  filter: brightness(.94) saturate(.98) !important;
}

.app-frame .menu-grid-app .app-tile:focus-visible{
  outline: 2px solid rgba(255, 226, 99, .95);
  outline-offset: 2px;
}

/* Ajuste direto: sobe 30px os 4 botões superiores */
.app-frame .menu-grid-app button[onclick*="openPage('palpitar')"],
.app-frame .menu-grid-app button[onclick*="openPage('meus')"],
.app-frame .menu-grid-app button[onclick*="openPage('ranking')"],
.app-frame .menu-grid-app button[onclick*="openPage('premiacao')"]{
  transform: translateY(-60px) !important;
}

/* Ajuste: fonte da pontuação + fonte/ícones do menu inferior */
.app-frame .menu-grid-app .points-tile .points-left strong{
  font-size: 18px !important;
}

.app-frame .menu-grid-app .points-tile .points-left small{
  font-size: 13px !important;
}

.app-frame .menu-grid-app .points-tile .points-number{
  font-size: 46px !important;
}

.app-frame .menu-grid-app .points-tile .points-icon img{
  height: 58px !important;
  width: auto !important;
}

.app-frame .bottom-app button{
  grid-template-rows: 46px 22px !important;
}

.app-frame .bottom-app button > span{
  height: 46px !important;
  min-height: 46px !important;
}

.app-frame .bottom-app button > span img{
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
}

.app-frame .bottom-app button > span{
  position: relative !important;
  top: -5px !important;
}

.app-frame .bottom-app .bottom-label{
  height: 22px !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  position: relative !important;
  top: -14px !important;
}

.app-frame .bottom-app .bottom-label img{
  height: 22px !important;
  width: auto !important;
}

@media (max-width: 700px){
  .app-frame .menu-grid-app .points-tile .points-left strong{ font-size: 16px !important; }
  .app-frame .menu-grid-app .points-tile .points-left small{ font-size: 12px !important; }
  .app-frame .menu-grid-app .points-tile .points-number{ font-size: 40px !important; }
  .app-frame .menu-grid-app .points-tile .points-icon img{ height: 50px !important; }
  .app-frame .bottom-app button{ grid-template-rows: 40px 20px !important; }
  .app-frame .bottom-app button > span{ height: 40px !important; min-height: 40px !important; }
  .app-frame .bottom-app button > span img{ height: 36px !important; max-height: 36px !important; }
  .app-frame .bottom-app .bottom-label{ height: 20px !important; font-size: 14px !important; }
  .app-frame .bottom-app .bottom-label img{ height: 20px !important; }
}

/* Sobe o conjunto inferior em 4px */
.app-frame .bottom-app{
  transform: translateY(-4px) !important;
}

.app-frame .menu-grid-app .pc-only{
  position: relative !important;
  top: -8px !important;
}

.app-frame .menu-grid-app .pc-only{
  min-height: 32px !important;
  height: 32px !important;
  width: calc(100% - 60px) !important;
  margin-left: 30px !important;
  margin-right: 30px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(86, 54, 0, .92) !important;
  background:
    radial-gradient(120px 24px at 50% 8px, rgba(255,255,255,.52), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #ffe789 0%, #f0ba22 45%, #c37c00 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -7px 10px rgba(0,0,0,.20),
    0 4px 10px rgba(0,0,0,.28) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-frame .menu-grid-app .pc-only > span{
  display: none !important;
}

.app-frame .menu-grid-app .pc-only .tile-label{
  margin: 0 !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Fix final: manter sempre o menu inferior no estilo verde escuro */
.app-frame .bottom-app{
  background: linear-gradient(180deg, rgba(0,56,25,.94) 0%, rgba(0,38,17,.94) 52%, rgba(0,24,10,.96) 100%) !important;
  border: 2px solid rgba(255, 208, 62, .80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(8px) !important;
}

.app-frame .bottom-app button.active{
  background: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

@media (max-width: 700px){
  .app-frame .bottom-app{
    background: linear-gradient(180deg, rgba(0,56,25,.94) 0%, rgba(0,38,17,.94) 52%, rgba(0,24,10,.96) 100%) !important;
    border: 2px solid rgba(255, 208, 62, .80) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 24px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(8px) !important;
  }
}

/* Ajuste solicitado: descer 30px os 5 botões acima de "VER TODAS REGRAS" */
.app-frame .menu-grid-app button[onclick*="openPage('palpitar')"],
.app-frame .menu-grid-app button[onclick*="openPage('meus')"],
.app-frame .menu-grid-app button[onclick*="openPage('ranking')"],
.app-frame .menu-grid-app button[onclick*="openPage('premiacao')"]{
  transform: translateY(-22px) !important;
}

.app-frame .menu-grid-app .points-tile{
  transform: translateY(37px) !important;
}

/* Mobile responsivo: estica somente a grama (faixa inferior), sem deformar a imagem principal */
@media (max-width: 700px){
  .app-frame{
    position: relative !important;
    overflow: hidden !important;
  }

  .app-frame::after{
    content: "" !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: clamp(110px, 18svh, 170px);
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 55%, rgba(0,0,0,.16) 100%),
      url('/assets/imagemfd.webp') center calc(100% + 6px) / 100% clamp(160px, 24svh, 230px) no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.92) 82%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.92) 82%, rgba(0,0,0,1) 100%);
    filter: saturate(1.06) contrast(1.02);
  }

  .app-frame .phone-shell{
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Ajuste solicitado: sobe todo o conjunto mostrado em 30px (mobile) */
@media (max-width: 700px){
  .app-frame .home-bottom{
    transform: translateY(-30px) !important;
  }

  .app-frame .bottom-app{
    transform: translateY(-30px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left{
    position: relative !important;
    top: -5px !important;
  }

  .app-frame .menu-grid-app .points-tile .points-number{
    position: relative !important;
    top: -5px !important;
  }
}

/* Padrão solicitado: todos os botões com borda dourada */
.app-frame button{
  border: 2px solid rgba(255, 208, 62, .92) !important;
  box-sizing: border-box !important;
}

/* PC: desce 20px os 6 botões abaixo do emblema (override final) */
@media (min-width: 701px){
  .app-frame .menu-grid-app button[onclick*="openPage('palpitar')"],
  .app-frame .menu-grid-app button[onclick*="openPage('meus')"],
  .app-frame .menu-grid-app button[onclick*="openPage('ranking')"],
  .app-frame .menu-grid-app button[onclick*="openPage('premiacao')"],
  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    top: 0 !important;
    transform: translateY(0px) !important;
  }

  .app-frame .menu-grid-app .app-tile:active,
  .app-frame .menu-grid-app .app-tile.is-pressing{
    transform: translateY(3px) scale(.992) !important;
  }
}

/* PC: correção final de cortes no texto (pontuação + botão de regras) */
@media (min-width: 701px){
  .app-frame .menu-grid-app{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
  }

  .app-frame .menu-grid-app .points-tile{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon img{
    height: 44px !important;
    width: auto !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left{
    min-width: 0 !important;
    gap: 8px !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left > div{
    min-width: 0 !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left strong{
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left small{
    font-size: 11px !important;
  }

  .app-frame .menu-grid-app .pc-only{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
  }
}

/* PC: remove overlay que gera as duas linhas verticais no fundo */
@media (min-width: 900px){
  .pc-overlay-edit{
    display: none !important;
  }
}

/* PC: botão "VER TODAS REGRAS" no mesmo padrão dos demais */
@media (min-width: 701px){
  .app-frame .menu-grid-app .pc-only{
    min-height: 82px !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.22),
      0 8px 18px rgba(0,0,0,.44) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transform: translateY(0px) !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .app-frame .menu-grid-app .pc-only > span img{
    height: 28px !important;
    width: auto !important;
    display: block !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    margin: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    letter-spacing: .2px !important;
    line-height: 1 !important;
    text-shadow: 0 2px 5px #000 !important;
    text-transform: none !important;
  }
}

/* PC: desce 6px todo o conjunto dos 6 botões */
@media (min-width: 701px){
  .app-frame .home-bottom{
    transform: translateY(6px) !important;
  }
}

/* ===== Camada Responsiva Final (TV / PC / Celular) ===== */
@media (min-width: 701px){
  .pc-overlay-edit{
    display: none !important;
  }

  .app-frame{
    width: min(96vw, 1360px) !important;
    max-width: 1360px !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
  }

  .phone-shell{
    min-height: calc(100vh - 8px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .phone-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.6vw, 20px) clamp(12px, 1.8vw, 20px) !important;
  }

  .brand-emblem-bg{
    top: -16px !important;
    width: clamp(253px, 27.5vw, 451px) !important;
  }

  .brand-subtitle-overlay{
    top: clamp(68px, 8.5vw, 96px) !important;
    width: clamp(240px, 35vw, 500px) !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .brand-year-overlay{
    top: clamp(122px, 15vw, 170px) !important;
    width: clamp(130px, 16vw, 260px) !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .app-frame .home-bottom{
    width: min(860px, 100%) !important;
    margin: auto auto 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .app-frame .menu-grid-app .app-tile,
  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    min-height: 84px !important;
    height: 84px !important;
    top: 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .app-tile{
    padding: 8px !important;
  }

  .app-frame .menu-grid-app .pc-only{
    border-radius: 18px !important;
    border: 2px solid rgba(255,255,255,.22) !important;
    background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.22),
      0 8px 18px rgba(0,0,0,.44) !important;
    color: #fff !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    color: #fff !important;
    text-shadow: 0 2px 5px #000 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .app-frame .menu-grid-app .points-tile{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    padding: 8px 10px !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon img{
    height: 44px !important;
    width: auto !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left strong{
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .app-frame .menu-grid-app .points-tile .points-left small{
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .app-frame .menu-grid-app .points-tile .points-number{
    font-size: 42px !important;
    line-height: 1 !important;
    min-width: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
    font-variant-numeric: tabular-nums !important;
    transform: translateY(-5px) !important;
  }

  .app-frame .bottom-app{
    position: static !important;
    width: min(860px, 100%) !important;
    margin: 10px auto 0 !important;
    transform: none !important;
    height: 70px !important;
    padding: 4px 8px 8px !important;
    border-radius: 20px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px){
  .app-frame{
    width: min(100vw, 430px) !important;
    max-width: 430px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .phone-shell{
    min-height: 100svh !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .phone-content{
    padding: 10px 12px calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .brand-emblem-bg{
    top: clamp(-22px, -6vw, -10px) !important;
    width: clamp(220px, 76vw, 340px) !important;
  }

  .brand-subtitle-overlay{
    top: clamp(54px, 14vw, 74px) !important;
    width: clamp(250px, 76vw, 360px) !important;
    transform: translateX(-50%) scale(.72) !important;
  }

  .brand-year-overlay{
    top: clamp(102px, 24vw, 132px) !important;
    width: clamp(130px, 34vw, 190px) !important;
    transform: translateX(-50%) scale(.72) !important;
  }

  .app-frame .home-bottom{
    width: 100% !important;
    margin-top: auto !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .points-tile .points-number{
    min-width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
    font-variant-numeric: tabular-nums !important;
    transform: translateY(-5px) !important;
  }

  .app-frame .menu-grid-app{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .app-frame .menu-grid-app .app-tile{
    min-height: 78px !important;
    height: 78px !important;
    padding: 8px !important;
  }

  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    grid-column: 1 / -1 !important;
    min-height: 74px !important;
    height: 74px !important;
    margin: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .pc-only{
    border-radius: 14px !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .app-frame .menu-grid-app .pc-only > span img{
    height: 24px !important;
    width: auto !important;
    display: block !important;
  }

  .app-frame .bottom-app{
    position: sticky !important;
    bottom: 0 !important;
    transform: none !important;
    height: 66px !important;
    margin-top: 10px !important;
  }
}

/* PC: sobe 4px todos os ícones dos 6 botões e iguala o ícone de REGRAS ao de MEUS PALPITES */
@media (min-width: 701px){
  .app-frame .menu-grid-app .app-tile:not(.points-tile) > span{
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon{
    transform: translateY(-1px) !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-4px) !important;
    width: auto !important;
    height: 30px !important;
    min-width: 0 !important;
  }

  .app-frame .menu-grid-app .pc-only > span img{
    height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  .app-frame .menu-grid-app .pc-only{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    text-align: center !important;
    width: 100% !important;
  }
}

/* LOCK DEFINITIVO (EOF): regra única para TV/PC/MOBILE */
:root{
  --ui-dpr-fix: 1;
}

@media (min-width: 701px){
  .app-frame{
    width: min(1280px, calc(100vw - 16px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .phone-shell{
    min-height: calc(100vh - 10px) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  .phone-content{
    padding: 14px 18px 14px !important;
    display: block !important;
  }

  .app-frame .phone-content > .brand-emblem-bg{
    top: -53px !important;
    width: 403px !important;
  }

  .app-frame .phone-content > .brand-subtitle-overlay{
    top: 78px !important;
    width: 420px !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .app-frame .phone-content > .brand-year-overlay{
    top: 156px !important;
    width: 210px !important;
    transform: translateX(-50%) scale(.65) !important;
  }

  .app-frame .home-bottom,
  .app-frame .menu-grid-app,
  .app-frame .bottom-app{
    width: min(860px, calc(100vw - 24px)) !important;
  }

  .app-frame .home-bottom{
    margin: 260px auto 0 !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
  }

  .app-frame .menu-grid-app{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .app-tile,
  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    min-height: 86px !important;
    height: 86px !important;
    top: 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app button[onclick*="openPage('palpitar')"],
  .app-frame .menu-grid-app button[onclick*="openPage('meus')"],
  .app-frame .menu-grid-app button[onclick*="openPage('ranking')"],
  .app-frame .menu-grid-app button[onclick*="openPage('premiacao')"]{
    top: 0 !important;
  }

  .app-frame .menu-grid-app .app-tile:not(.points-tile) > span{
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-icon{
    transform: translateY(3px) !important;
  }

  .app-frame .menu-grid-app .points-tile .points-number{
    transform: translateY(-5px) !important;
    line-height: 1 !important;
  }

  .app-frame .menu-grid-app .pc-only{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .pc-only > span img{
    display: block !important;
    margin: 0 auto !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    width: 100% !important;
    text-align: center !important;
    margin-top: -2px !important;
  }

  .app-frame .bottom-app{
    height: 72px !important;
    margin: 10px auto 0 !important;
    transform: translateY(-8px) !important;
    top: auto !important;
  }
}

@media (max-width: 700px){
  .app-frame{
    width: min(100vw, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .phone-content{
    padding: 10px 10px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-frame .phone-content > .brand-emblem-bg{
    top: -36px !important;
    width: clamp(240px, 60vw, 340px) !important;
  }

  .app-frame .phone-content > .brand-subtitle-overlay{
    top: 66px !important;
    width: clamp(260px, 62vw, 360px) !important;
    transform: translateX(-50%) scale(.72) !important;
  }

  .app-frame .phone-content > .brand-year-overlay{
    top: 132px !important;
    width: clamp(140px, 30vw, 190px) !important;
    transform: translateX(-50%) scale(.72) !important;
  }

  .app-frame .home-bottom,
  .app-frame .menu-grid-app,
  .app-frame .bottom-app{
    width: min(860px, calc(100vw - 16px)) !important;
  }

  .app-frame .home-bottom{
    margin: auto auto 0 !important;
    transform: none !important;
    top: 0 !important;
  }

  .app-frame .menu-grid-app{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .app-frame .menu-grid-app .app-tile,
  .app-frame .menu-grid-app .points-tile,
  .app-frame .menu-grid-app .pc-only{
    min-height: 74px !important;
    height: 74px !important;
    top: 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app .pc-only{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .app-frame .menu-grid-app .pc-only > span{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateY(-4px) !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    width: 100% !important;
    text-align: center !important;
    margin-top: -2px !important;
  }

  .app-frame .bottom-app{
    height: 66px !important;
    transform: translateY(-8px) !important;
  }
}

/* Mobile retro: replica visual original solicitado (print) */
@media (max-width: 700px){
  html.force-pc body{
    background: #0a0a0a !important;
    display: grid !important;
    place-items: start center !important;
    padding: 0 !important;
  }

  html.force-pc .app-frame{
    width: min(100vw, 430px) !important;
    max-width: 430px !important;
    min-height: 100svh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #111 !important;
  }

  html.force-pc .phone-shell{
    min-height: 100svh !important;
    border-radius: 0 !important;
    border: 2px solid rgba(246, 238, 200, .95) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.7) !important;
    background: #0c0c0c !important;
    overflow: hidden !important;
  }

  html.force-pc .phone-shell::before{
    content: none !important;
    display: none !important;
  }

  html.force-pc .phone-content{
    min-height: 100svh !important;
    padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    background: url('/assets/imagemfd.webp') center top / cover no-repeat !important;
    overflow: hidden !important;
  }

  html.force-pc .pc-overlay-edit,
  html.force-pc .phone-status,
  html.force-pc .app-frame::after{
    display: none !important;
  }

  html.force-pc .app-frame .phone-content > .brand-emblem-bg{
    top: -6px !important;
    width: clamp(270px, 71.8vw, 321px) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) !important;
    z-index: 22 !important;
  }

  html.force-pc .app-frame .phone-content > .brand-subtitle-overlay{
    top: 84px !important;
    width: clamp(255px, 67.5vw, 352px) !important;
    height: clamp(80px, 20.8vw, 110px) !important;
    transform: translateX(-50%) scale(1) !important;
    z-index: 23 !important;
  }

  html.force-pc .brand-year-overlay{
    top: 124px !important;
    width: clamp(96px, 24vw, 128px) !important;
    transform: translateX(-50%) scale(.52) !important;
    z-index: 23 !important;
  }

  html.force-pc .home-bottom{
    margin-top: auto !important;
    transform: none !important;
    gap: 6px !important;
    width: 100% !important;
    z-index: 40 !important;
  }

  html.force-pc .menu-grid-app{
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 40 !important;
  }

  html.force-pc .menu-grid-app .app-tile{
    min-height: 66px !important;
    height: 66px !important;
    border-radius: 14px !important;
    border: 2px solid rgba(255, 214, 90, .95) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -12px 16px rgba(0,0,0,.18),
      0 5px 10px rgba(0,0,0,.45) !important;
    padding: 3px 4px !important;
    gap: 0 !important;
  }

  html.force-pc .menu-grid-app .app-tile.green{
    background: linear-gradient(180deg, #10a95a 0%, #058c47 50%, #03763b 100%) !important;
  }

  html.force-pc .menu-grid-app .app-tile.gold{
    background: linear-gradient(180deg, #f6d85d 0%, #e8be30 54%, #ce9d11 100%) !important;
  }

  html.force-pc .menu-grid-app .app-tile > span{
    margin-bottom: 0 !important;
    transform: translateY(1px) !important;
  }

  html.force-pc .menu-grid-app .app-tile .tile-label,
  html.force-pc .menu-grid-app .app-tile .tile-label.meus,
  html.force-pc .menu-grid-app .app-tile .tile-label.palpitar,
  html.force-pc .menu-grid-app .app-tile .tile-label.shift-up-8{
    margin-top: -1px !important;
    font-size: clamp(18px, 4.9vw, 24px) !important;
    line-height: 1 !important;
    letter-spacing: .4px !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.72) !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
  }

  html.force-pc .menu-grid-app .points-tile{
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #08a953 0%, #07894a 56%, #056c3b 100%) !important;
    padding: 4px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-left{
    gap: 7px !important;
    min-width: 0 !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-icon img{
    height: 32px !important;
    width: auto !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-left strong{
    font-size: clamp(13px, 3.3vw, 16px) !important;
    letter-spacing: .4px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translateY(3px) !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-left small{
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 3px !important;
    padding: 0 !important;
    font-size: clamp(10px, 2.8vw, 13px) !important;
    letter-spacing: .6px !important;
    color: rgba(255,255,255,.96) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-left small::after{
    content: "" !important;
    display: inline-block !important;
    width: 34px !important;
    height: 6px !important;
    margin-left: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #fff7c7 0%, #ffd95c 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      0 1px 4px rgba(0,0,0,.4) !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-number{
    font-size: clamp(42px, 9.6vw, 56px) !important;
    line-height: .8 !important;
    font-weight: 1000 !important;
    min-width: 32px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.58) !important;
    transform: translateX(-50px) !important;
    align-self: center !important;
  }

  html.force-pc .menu-grid-app .pc-only{
    grid-column: 1 / -1 !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 208, 62, .95) !important;
    background: linear-gradient(180deg, #f6de65 0%, #efc836 50%, #c69200 100%) !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transform: translate(30px, -18px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 0 0 1px rgba(122, 81, 0, .75),
      0 3px 8px rgba(0,0,0,.3) !important;
  }

  html.force-pc .menu-grid-app .pc-only > span{
    display: none !important;
  }

  html.force-pc .menu-grid-app .pc-only .tile-label{
    font-size: clamp(18px, 4.4vw, 21px) !important;
    line-height: 1 !important;
    letter-spacing: .4px !important;
    color: #1a1200 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    transform: none !important;
  }

  html.force-pc .bottom-app{
    margin-top: 8px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    border: 2px solid rgba(255, 208, 62, .80) !important;
    background: linear-gradient(180deg, rgba(0,56,25,.94) 0%, rgba(0,38,17,.94) 52%, rgba(0,24,10,.96) 100%) !important;
    padding: 3px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    position: relative !important;
    bottom: auto !important;
    transform: translateY(-18px) !important;
    z-index: 41 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 10px 24px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(8px) !important;
  }

  html.force-pc .bottom-app button{
    border-radius: 12px !important;
    border: 2px solid rgba(255, 208, 62, .80) !important;
    background: linear-gradient(180deg, rgba(0,74,34,.92), rgba(0,45,21,.94)) !important;
    grid-template-rows: 24px 15px !important;
    padding: 1px 1px !important;
    gap: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    color: #fff !important;
  }

  html.force-pc .bottom-app button > span{
    height: 24px !important;
    min-height: 24px !important;
    transform: translateY(8px) !important;
  }

  html.force-pc .bottom-app button > span img{
    max-height: 25px !important;
    height: 25px !important;
    width: auto !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    transform: none !important;
  }

  html.force-pc .bottom-app img.bottom-icon-home,
  html.force-pc .bottom-app img.bottom-icon-chat{
    max-height: 27px !important;
    height: 27px !important;
    width: auto !important;
    transform: none !important;
  }

  html.force-pc .bottom-app .bottom-label{
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: .2px !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.75) !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    transform: translateY(16px) !important;
  }

  html.force-pc .bottom-app button.active{
    background: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
  }
}

/* Ajuste de legibilidade: mini menu do modal (Início/Jogos/Chat/Saldo) */
.modal-mini-nav{
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 12px !important;
  transform: translateX(-3px) !important;
  border: 1px solid rgba(255, 224, 116, .92) !important;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,245,190,.22), rgba(255,245,190,0) 56%),
    linear-gradient(135deg, rgba(18, 12, 0, .82), rgba(7, 6, 0, .66)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255, 214, 92, .24),
    0 10px 20px rgba(0,0,0,.42),
    0 0 18px rgba(255, 200, 52, .18) !important;
}

.modal-mini-nav button{
  width: 58px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 218, 98, .92) !important;
  background:
    linear-gradient(180deg, #38dd7d 0%, #13a64e 42%, #0b6f35 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 4px 10px rgba(0,0,0,.34),
    0 0 10px rgba(40, 220, 120, .12) !important;
}

.modal-mini-nav button span{
  font-size: 11px !important;
  letter-spacing: .2px !important;
}

.modal-mini-balance{
  height: 30px !important;
  padding: 0 12px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 219, 104, .96) !important;
  background:
    radial-gradient(110% 100% at 50% 0%, rgba(255,245,196,.22), rgba(255,245,196,0) 58%),
    linear-gradient(135deg, #1b6f3a 0%, #0f4c29 48%, #0a321b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -10px 14px rgba(0,0,0,.22),
    0 4px 10px rgba(0,0,0,.32),
    0 0 12px rgba(255, 206, 70, .16) !important;
}

.modal-mini-balance-label{
  font-size: 11px !important;
}

.modal-mini-balance-value{
  font-size: 13px !important;
}

/* Em modo force-pc, deixa os rótulos inferiores um pouco maiores */
html.force-pc .bottom-app .bottom-label{
  font-size: 14.5px !important;
  transform: translateY(14px) !important;
}

html.force-pc .bottom-app{
  transform: translate(-6px, -25px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 28px rgba(0,0,0,.48),
    0 0 18px rgba(255, 206, 70, .14) !important;
}

/* Nitidez dos rótulos do menu principal */
html.force-pc .bottom-app .bottom-label{
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .15px !important;
  line-height: 1 !important;
  transform: translateY(14px) !important;
  margin-top: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.75) !important;
  -webkit-text-stroke: 0 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
  filter: none !important;
}

@media (max-width: 520px){
  .modal-mini-nav button{
    width: 50px !important;
    height: 28px !important;
  }

  .modal-mini-nav button span{
    font-size: 10px !important;
  }

  .modal-mini-balance{
    height: 28px !important;
    padding: 0 10px !important;
  }

  .modal-mini-balance-label{
    font-size: 10px !important;
  }

  .modal-mini-balance-value{
    font-size: 12px !important;
  }
}

/* Correção final: "VER TODAS AS REGRAS" sem corte */
@media (min-width: 701px){
  .app-frame .menu-grid-app .pc-only{
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 16px !important;
    overflow: visible !important;
  }

  .app-frame .menu-grid-app .pc-only .tile-label{
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.05 !important;
    letter-spacing: .2px !important;
  }
}

@media (min-width: 701px){
  html.force-pc .menu-grid-app .pc-only{
    transform: translate(0, -18px) !important;
  }

  html.force-pc .menu-grid-app .pc-only .tile-label{
    font-size: clamp(12.5px, 2.5vw, 15px) !important;
    line-height: 1.08 !important;
    letter-spacing: .15px !important;
  }
}

/* Regra única do botão "VER TODAS AS REGRAS" (evita conflito com .pc-only) */
@media (min-width: 701px){
  .app-frame .menu-grid-app button[onclick*="openPage('regras')"]{
    min-height: 45px !important;
    height: 45px !important;
    padding: 0 8px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    transform: none !important;
  }

  .app-frame .menu-grid-app button[onclick*="openPage('regras')"] > span{
    display: none !important;
  }

  .app-frame .menu-grid-app button[onclick*="openPage('regras')"] > span img{
    display: none !important;
  }

  .app-frame .menu-grid-app button[onclick*="openPage('regras')"] .tile-label{
    margin: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(9.5px, 1.05vw, 11px) !important;
    line-height: 1.02 !important;
    letter-spacing: .1px !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    height: auto !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Override absoluto do botão de regras (independente de media query/conflitos antigos) */
.app-frame .menu-grid-app .rules-tile{
  grid-column: 1 / -1 !important;
  min-height: 41px !important;
  height: 41px !important;
  max-width: calc(100% - 72px) !important;
  width: calc(100% - 72px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(0,0,0,.44) !important;
}

.app-frame .menu-grid-app .rules-tile > span{
  display: none !important;
}

.app-frame .menu-grid-app .rules-tile > span img{
  display: none !important;
}

.app-frame .menu-grid-app .rules-tile .rules-label{
  width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  font-size: 9.33px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  color: #fff !important;
  text-shadow: 0 2px 5px #000 !important;
  -webkit-text-stroke: 0 !important;
}

html.force-pc .app-frame .menu-grid-app .rules-tile .rules-label{
  font-size: 9.33px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

/* Correção de emenda/corte vertical no fundo */
html.force-pc .app-frame .phone-content{
  background-position: center 2px !important;
  background-repeat: no-repeat !important;
  background-size: 112% auto !important;
}

@media (min-width: 701px){
  .pc-overlay-edit{
    display: none !important;
  }
}

/* Override máximo: em force-pc o botão de regras deve ficar 50% do card padrão (84px -> 42px) */
html.force-pc .app-frame .menu-grid-app .rules-tile{
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  width: calc(100% - 96px) !important;
  max-width: calc(100% - 96px) !important;
  border-radius: 999px !important;
  padding: 0 8px !important;
  align-self: center !important;
  transform: translate(-2px, -23px) !important;
}

html.force-pc .app-frame .menu-grid-app .rules-tile .rules-label{
  min-height: 14px !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  color: #1a1200 !important;
  text-shadow: none !important;
}

/* ===== Override Cirurgico: somente botao VER TODAS AS REGRAS ===== */
#rulesTile.rules-tile{
  grid-column: 1 / -1 !important;
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  width: calc(100% - 96px) !important;
  max-width: calc(100% - 96px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 8px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 208, 62, .95) !important;
  background: linear-gradient(135deg, #ffe263, #c08000 70%, #ffcc30) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(0,0,0,.44) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  transform: translate(-2px, 0) !important;
}

#rulesTile.rules-tile > span,
#rulesTile.rules-tile > span img{
  display: none !important;
}

#rulesTileLabel.rules-label{
  width: 100% !important;
  min-height: 14px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: center !important;
  font-size: 12.42px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #1a1200 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  transform: none !important;
}

/* Fix do corte no mini-menu dos modais em larguras estreitas */
.modal-hero .hero-row{
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.modal-hero .hero-row > div:first-child{
  min-width: 0 !important;
}

.modal-mini-nav{
  max-width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.modal-mini-nav button{
  width: 46px !important;
  height: 26px !important;
}

.modal-mini-nav button span{
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
  font-size: 10.6px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.modal-mini-balance{
  margin-left: auto !important;
  min-width: 118px !important;
  height: 28px !important;
  padding: 0 12px !important;
  gap: 5px !important;
  justify-content: center !important;
}

.modal-mini-balance-label{
  font-size: 10px !important;
}

.modal-mini-balance-value{
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  white-space: nowrap !important;
}

@media (max-width: 420px){
  .modal-mini-nav{
    gap: 3px !important;
    padding: 3px !important;
  }

  .modal-mini-nav button{
    width: 42px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  .modal-mini-nav button span{
    font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  .modal-mini-balance{
    min-width: 94px !important;
    height: 24px !important;
    padding: 0 9px !important;
    gap: 3px !important;
    border-radius: 8px !important;
  }

  .modal-mini-balance-label{
    display: none !important;
  }

  .modal-mini-balance-value{
    font-size: 11px !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    white-space: nowrap !important;
  }
}

/* Override forte: texto de Início/Jogos/Chat no mesmo estilo do saldo */
.modal-page .modal-mini-nav button span{
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: #ffe56d !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
  -webkit-text-stroke: 0 !important;
}

@media (max-width: 420px){
  .modal-page .modal-mini-nav button span{
    font-size: 9.2px !important;
    color: #ffe56d !important;
  }
}

/* Trava final: somente texto dos 3 botões do mini-menu */
.modal-page .modal-mini-nav button .mini-nav-txt{
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: #ffe56d !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}

@media (max-width: 420px){
  .modal-page .modal-mini-nav button .mini-nav-txt{
    font-size: 10.2px !important;
  }
}

/* Ajuste fino: PREMIAÇÃO -2% */
.menu-grid-app button[onclick*="premiacao"] .tile-label{
  font-size: 98% !important;
}

#premiacao .hero-title{
  font-size: 13.72px !important;
}

/* Trava cirúrgica do PREMIAÇÃO (prioridade máxima por ID) */
#premiacaoTileLabel{
  font-size: 98% !important;
  line-height: 1 !important;
  transform: translateY(-3px) !important;
}

#premiacaoHeroTitle{
  font-size: 13.72px !important;
  line-height: 1 !important;
}

html.force-pc #premiacaoTileLabel{
  font-size: clamp(17.64px, 4.802vw, 23.52px) !important; /* -2% do clamp base */
}

/* Ajuste cirúrgico: ícone do RANKING +2px para cima */
.menu-grid-app button[onclick*="openPage('ranking')"] span.tile-icon-down-3{
  transform: translateY(-2px) !important;
}

/* Bola do "Jogos" no padrão (sem nitidez forçada) */
.bottom-app img.bottom-icon-bola,
.app-tile img.tile-icon-palpitar{
  image-rendering: auto !important;
}

html.force-pc .bottom-app button > span img.bottom-icon-bola{
  image-rendering: auto !important;
}

/* Ajuste solicitado: ícones Início e Chat +8% */
.bottom-app img.bottom-icon-home,
.bottom-app img.bottom-icon-chat{
  height: 34.56px !important;
  max-height: 34.56px !important;
  width: auto !important;
  transform: translateY(-2px) !important;
}

html.force-pc .bottom-app img.bottom-icon-home,
html.force-pc .bottom-app img.bottom-icon-chat{
  height: 29.16px !important;
  max-height: 29.16px !important;
  width: auto !important;
  transform: translateY(-2px) !important;
}

/* ===== SANITY LOCK: Desktop only (não afeta mobile) ===== */
@media (min-width: 701px){
  html:not(.force-pc) .app-frame{
    width: min(1280px, calc(100vw - 16px)) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html:not(.force-pc) .app-frame .home-bottom,
  html:not(.force-pc) .app-frame .menu-grid-app,
  html:not(.force-pc) .app-frame .bottom-app{
    width: min(860px, calc(100vw - 24px)) !important;
  }

  html:not(.force-pc) .app-frame .home-bottom{
    margin: 260px auto 0 !important;
    transform: none !important;
  }

  html:not(.force-pc) .app-frame .menu-grid-app{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    transform: none !important;
  }

  html:not(.force-pc) .app-frame .menu-grid-app .points-tile #mypos{
    display: inline-block !important;
    transform: translateY(8px) !important;
  }

  html:not(.force-pc) .app-frame .menu-grid-app .app-tile,
  html:not(.force-pc) .app-frame .menu-grid-app .points-tile{
    min-height: 86px !important;
    height: 86px !important;
    top: 0 !important;
    transform: none !important;
  }

  html:not(.force-pc) .app-frame .menu-grid-app .points-tile{
    grid-column: 2 / span 1 !important;
  }

  html:not(.force-pc) #rulesTile.rules-tile{
    grid-column: 3 / span 1 !important;
    min-height: 86px !important;
    height: 86px !important;
    max-height: 86px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  html:not(.force-pc) .app-frame .bottom-app{
    position: static !important;
    margin: 8px auto 0 !important;
    height: 61.6px !important;
    min-height: 61.6px !important;
    transform: translate(1px, -2px) !important;
  }
}

/* ===== Match exato do formato: botão REGRAS igual ao card PREMIAÇÃO (PC) ===== */
@media (min-width: 701px){
  html.force-pc #rulesTile.rules-tile{
    grid-column: 1 / -1 !important;
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    transform: none !important;
  }

  html:not(.force-pc) #rulesTile.rules-tile{
    grid-column: 3 / span 1 !important;
    min-height: 86px !important;
    height: 86px !important;
    max-height: 86px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    transform: none !important;
  }

  #rulesTile.rules-tile > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #rulesTile.rules-tile > span img{
    display: block !important;
    width: auto !important;
    height: 40px !important;
    object-fit: contain !important;
  }

  #rulesTileLabel.rules-label{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: .2px !important;
    color: #fff !important;
    text-shadow: 0 2px 5px #000 !important;
    transform: none !important;
  }

  html:not(.force-pc) .bottom-app button:nth-child(1) > span,
  html:not(.force-pc) .bottom-app button:nth-child(3) > span{
    transform: translateY(-5px) !important;
  }

  html:not(.force-pc) .bottom-app button:nth-child(1) .bottom-label,
  html:not(.force-pc) .bottom-app button:nth-child(3) .bottom-label{
    transform: translateY(-5px) !important;
  }

  html:not(.force-pc) .bottom-app button:nth-child(1) .bottom-label{
    transform: translateY(-2px) !important;
  }

  html:not(.force-pc) .bottom-app button:nth-child(3) .bottom-label{
    transform: translateY(-2px) !important;
  }
}

/* Ajuste solicitado: PALPITAR / MEUS PALPITES / RANKING +20% */
.menu-grid-app button[onclick*="openPage('palpitar')"] .tile-label,
.menu-grid-app button[onclick*="openPage('meus')"] .tile-label,
.menu-grid-app button[onclick*="openPage('ranking')"] .tile-label{
  font-size: 120% !important;
}

/* Ajuste solicitado: VER TODAS AS REGRAS + ícone +20% */
#rulesTileLabel.rules-label{
  font-size: 120% !important;
}

#rulesTile.rules-tile > span img{
  height: 48px !important;
}

/* ===== FINAL LOCK: REGRAS no mesmo formato de PREMIAÇÃO ===== */
@media (min-width: 701px){
  #rulesTile.rules-tile{
    grid-column: 1 / span 1 !important;
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    transform: none !important;
  }

  #rulesTile.rules-tile > span{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #rulesTile.rules-tile > span img{
    display: block !important;
    width: auto !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  #rulesTileLabel.rules-label{
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .2px !important;
    color: #fff !important;
    text-shadow: 0 2px 5px #000 !important;
    transform: none !important;
  }
}

/* ===== Mobile lock: evitar quebra e exagero no botão de regras ===== */
@media (max-width: 700px){
  html.force-pc #rulesTile.rules-tile{
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 3px 7px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
    transform: translate(-2px, 0) !important;
  }

  html.force-pc #rulesTile.rules-tile > span img{
    height: 24px !important;
  }

  html.force-pc #rulesTileLabel.rules-label{
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
}

/* Ajuste solicitado: menu do perfil com Voltar e saldo maior (somente desktop/tablet) */
@media (min-width: 701px){
  .modal-page .modal-mini-nav{
    gap: 10px !important;
  }

  .modal-page .modal-mini-nav button{
    width: 78px !important;
    height: 34px !important;
  }

  .modal-page .modal-mini-nav .modal-mini-balance{
    min-width: 270px !important;
    height: 50px !important;
    padding: 0 18px !important;
    gap: 12px !important;
    border-radius: 14px !important;
    border: 2px solid rgba(255, 219, 104, 1) !important;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,245,196,.26), rgba(255,245,196,0) 58%),
      linear-gradient(135deg, #1f7c44 0%, #135e33 48%, #0c3f23 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -12px 16px rgba(0,0,0,.24),
      0 6px 16px rgba(0,0,0,.36),
      0 0 18px rgba(255, 206, 70, .28) !important;
  }

  .modal-page .modal-mini-balance-label{
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    color: #fff5c7 !important;
  }

  .modal-page .modal-mini-balance-value{
    font-size: 25px !important;
    font-weight: 1000 !important;
    letter-spacing: .4px !important;
    color: #ffd85c !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.2),
      0 2px 8px rgba(0,0,0,.62) !important;
  }

  .modal-page .modal-mini-withdraw{
    min-width: 132px !important;
    height: 50px !important;
    border-radius: 14px !important;
    border: 2px solid rgba(255, 219, 104, 1) !important;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,245,196,.26), rgba(255,245,196,0) 58%),
      linear-gradient(135deg, #1f7c44 0%, #135e33 48%, #0c3f23 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -12px 16px rgba(0,0,0,.24),
      0 6px 16px rgba(0,0,0,.36),
      0 0 18px rgba(255, 206, 70, .28) !important;
    color: #fff5c7 !important;
    font-size: 21px !important;
    font-weight: 1000 !important;
    letter-spacing: .45px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.55) !important;
    padding: 0 14px !important;
  }

  .modal-page .modal-mini-withdraw .mini-nav-txt{
    font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: .4px !important;
    color: #fff5c7 !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.18),
      0 2px 6px rgba(0,0,0,.55) !important;
  }
}

/* ===== Fix responsivo final (mobile) ===== */
@media (max-width: 700px){
  html, body{
    overflow-x: hidden !important;
  }

  .modal-hero{
    display: grid !important;
    grid-template-rows: auto auto !important;
    row-gap: 6px !important;
  }

  .modal-hero .hero-row{
    position: relative !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 !important;
  }

  .modal-hero .hero-row > div:first-child{
    width: 100% !important;
    text-align: center !important;
  }

  .modal-hero .hero-title{
    width: 100% !important;
    text-align: center !important;
  }

  .modal-page .modal-mini-nav{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 2px !important;
    margin: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    position: static !important;
    translate: none !important;
    border-width: 1px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.25) !important;
    z-index: 5 !important;
  }

  .modal-page .modal-mini-nav button,
  .modal-page .modal-mini-withdraw,
  .modal-page .modal-mini-nav .modal-mini-balance{
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
    border-width: 1px !important;
    border-radius: 8px !important;
  }

  .modal-page .modal-mini-nav button,
  .modal-page .modal-mini-withdraw,
  .modal-page .modal-mini-nav .modal-mini-balance{
    border: 1px solid rgba(255, 219, 104, .98) !important;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,245,196,.20), rgba(255,245,196,0) 58%),
      linear-gradient(135deg, #1f7c44 0%, #135e33 48%, #0c3f23 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 -8px 12px rgba(0,0,0,.20),
      0 4px 10px rgba(0,0,0,.28),
      0 0 10px rgba(255, 206, 70, .18) !important;
  }

  .modal-page .modal-mini-nav button .mini-nav-txt,
  .modal-page .modal-mini-withdraw .mini-nav-txt,
  .modal-page .modal-mini-nav .modal-mini-balance-label,
  .modal-page .modal-mini-nav .modal-mini-balance-value{
    color: #fff5c7 !important;
    font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
    text-shadow:
      0 1px 0 rgba(255,255,255,.14),
      0 2px 5px rgba(0,0,0,.55) !important;
  }

  .modal-page .modal-mini-withdraw .mini-nav-txt,
  .modal-page .modal-mini-nav button .mini-nav-txt{
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .1px !important;
  }

  .modal-page .modal-mini-nav .modal-mini-balance{
    padding: 0 6px !important;
    gap: 0 !important;
    margin-left: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  .modal-page .modal-mini-nav > *{
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  .modal-page .modal-mini-balance-label{
    display: none !important;
  }

  .modal-page .modal-mini-balance-value{
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: .1px !important;
    line-height: 1 !important;
  }

  html.force-pc body{
    padding: 0 !important;
    place-items: start stretch !important;
  }

  html.force-pc .app-frame{
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html.force-pc .phone-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  html.force-pc .phone-content{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.force-pc .home-bottom,
  html.force-pc .menu-grid-app,
  html.force-pc .bottom-app{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.force-pc .bottom-app{
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-top: 6px !important;
    padding: 3px 4px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
  }

  html.force-pc .bottom-app button{
    min-width: 0 !important;
    padding: 0 !important;
  }

  html.force-pc .bottom-app .bottom-label{
    font-size: 11px !important;
    letter-spacing: 0 !important;
    transform: translateY(12px) !important;
  }
}

/* Lock final: Voltar / Saque / Saldo idênticos no mobile */
@media (max-width: 700px){
  html.force-pc .modal-page .modal-mini-nav{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  html.force-pc .modal-page .modal-mini-nav > button,
  html.force-pc .modal-page .modal-mini-nav > .modal-mini-withdraw,
  html.force-pc .modal-page .modal-mini-nav > .modal-mini-balance{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid rgba(255, 219, 104, .98) !important;
    border-radius: 8px !important;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(255,245,196,.20), rgba(255,245,196,0) 58%),
      linear-gradient(135deg, #1f7c44 0%, #135e33 48%, #0c3f23 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 -8px 12px rgba(0,0,0,.20),
      0 4px 10px rgba(0,0,0,.28),
      0 0 10px rgba(255, 206, 70, .18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html.force-pc .modal-page .modal-mini-nav > .modal-mini-balance-label{
    display: none !important;
  }

  html.force-pc .modal-page .modal-mini-nav > button .mini-nav-txt,
  html.force-pc .modal-page .modal-mini-nav > .modal-mini-withdraw .mini-nav-txt,
  html.force-pc .modal-page .modal-mini-nav > .modal-mini-balance .modal-mini-balance-value{
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #fff5c7 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html.force-pc .modal-page .modal-mini-nav > .modal-mini-balance .modal-mini-balance-value{
    display: block !important;
    width: 100% !important;
  }
}

/* Menu de usuário no rodapé (perfil) */
.bottom-app > .bottom-user-menu{
  min-width: 0;
}

.bottom-app .top-user-dropdown{
  min-width: 182px;
  z-index: 240;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, rgba(16,16,19,.68), rgba(10,10,12,.62));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bottom-app .top-user-dropdown button,
html.force-pc .bottom-app .top-user-dropdown button,
html:not(.force-pc) .bottom-app .top-user-dropdown button{
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f5f5f5 !important;
  display: block !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.bottom-app .top-user-dropdown button:last-child{
  border-bottom: 0 !important;
}

.bottom-app .top-user-dropdown button:hover{
  background: rgba(255,255,255,.08) !important;
}

.bottom-app .top-user-dropdown button.danger{
  color: #ff6161 !important;
}

/* Garantia final: permitir abrir dropdown do botão Davison acima da barra inferior */
.bottom-app,
.app-frame .bottom-app,
html.force-pc .bottom-app,
html:not(.force-pc) .app-frame .bottom-app{
  overflow: visible !important;
}

/* Lock: Perfil idêntico a Início/Apostar/Entrar */
.bottom-app{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.bottom-app > button,
.bottom-app > details.bottom-user-menu{
  min-width: 0 !important;
  width: 100% !important;
}

.bottom-app > details.bottom-user-menu{
  display: block !important;
  height: 100% !important;
}

.bottom-app > details.bottom-user-menu > summary#homeBottomUserBtn{
  list-style: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-rows: 38px 16px !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

.bottom-app > details.bottom-user-menu > summary#homeBottomUserBtn::-webkit-details-marker{
  display: none !important;
}

.bottom-app > details.bottom-user-menu > summary#homeBottomUserBtn > span{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.bottom-app > details.bottom-user-menu > summary#homeBottomUserBtn .bottom-label-user{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Perfil como botão normal, idêntico aos demais */
.bottom-app > .bottom-user-menu{
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.bottom-app > .bottom-user-menu > #homeBottomUserBtn{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #ffe56d !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: 38px 16px !important;
  place-items: center !important;
}

.bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
}

/* Lock solicitado: todos os saldos alinhados à direita */
.modal-mini-nav .modal-mini-balance{
  margin-left: auto !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.modal-mini-nav .modal-mini-balance-label,
.modal-mini-nav .modal-mini-balance-value{
  text-align: right !important;
}

.wallet-balance-value{
  width: 100% !important;
  text-align: right !important;
}

.wallet-balance-panel{
  text-align: right !important;
}

.wallet-balance-panel small,
.wallet-balance-panel strong{
  text-align: right !important;
}

/* Ajuste solicitado: no mobile, manter somente 2 botões curtos (Voltar e Saldo) */
@media (max-width: 700px){
  .modal-page .modal-mini-nav,
  html.force-pc .modal-page .modal-mini-nav{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }

  .modal-page .modal-mini-nav > button:first-child,
  html.force-pc .modal-page .modal-mini-nav > button:first-child{
    flex: 0 0 auto !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }

  .modal-page .modal-mini-nav > .modal-mini-balance,
  html.force-pc .modal-page .modal-mini-nav > .modal-mini-balance{
    flex: 0 0 auto !important;
    width: 114px !important;
    min-width: 114px !important;
    max-width: 114px !important;
    margin-left: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Lock final solicitado */
@media (min-width: 701px){
  .app-tile img.tile-icon-palpitar{
    transform: translateY(5px) !important;
  }
}

.top-user-menu,
.bottom-user-menu{
  position: relative !important;
  z-index: 99990 !important;
}

.top-user-dropdown,
.bottom-app .top-user-dropdown{
  z-index: 99999 !important;
}

.bottom-app,
.phone-content{
  overflow: visible !important;
}

/* Ajuste solicitado: descer ícone e nome do Perfil em +10px */
html:not(.force-pc) .bottom-app .bottom-user-menu > #homeBottomUserBtn > span{
  transform: translateY(5px) !important;
}

html:not(.force-pc) .bottom-app .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
  transform: translateY(8px) !important;
}

html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
  transform: translateY(19px) !important;
}

html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
  transform: translateY(24px) !important;
}

.bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Alinha Perfil igual ao botão Entrar no mobile/tablet */
html:not(.force-pc) .bottom-app .bottom-user-menu > #homeBottomUserBtn > span{
  transform: translateY(-5px) !important;
}

html:not(.force-pc) .bottom-app .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
  transform: translateY(-2px) !important;
}

/* Ajuste final: Perfil com mesmo alinhamento visual dos outros no mobile */
@media (max-width: 700px){
  html.force-pc .bottom-app{
    transform: translateY(-2px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Sobe apenas as caixas internas dos botões */
  html.force-pc .bottom-app > button,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn{
    transform: translateY(-3px) !important;
  }

  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn{
    grid-template-rows: 34px 14px !important;
    border: 2px solid rgba(255, 208, 62, .80) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(0,74,34,.92), rgba(0,45,21,.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
    height: 34px !important;
    transform: translateY(9px) !important;
  }

  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
    height: 14px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    transform: translateY(14px) !important;
  }

  /* Desce somente Início / Apostar / Entrar em 3px */
  html.force-pc .bottom-app > button:nth-child(1) > span,
  html.force-pc .bottom-app > button:nth-child(2) > span,
  html.force-pc .bottom-app > button:nth-child(3) > span{
    transform: translateY(9px) !important;
  }

  /* Ajuste fino solicitado: desce só o ícone do botão Entrar em +3px */
  html.force-pc .bottom-app > button:nth-child(3) > span{
    transform: translateY(12px) !important;
  }

  html.force-pc .bottom-app > button:nth-child(1) .bottom-label,
  html.force-pc .bottom-app > button:nth-child(2) .bottom-label,
  html.force-pc .bottom-app > button:nth-child(3) .bottom-label{
    transform: translateY(14px) !important;
  }
}

#homeMenuProfileBtn .menu-profile-icon{
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  margin-right: 6px;
}

#homeMenuProfileBtn .menu-profile-icon::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9b59ff;
}

/* LOCK FINAL: desce somente o ícone do botão Entrar em 3px */
html.force-pc .bottom-app > button:nth-child(3) > span > img.bottom-icon-perfil,
html:not(.force-pc) .bottom-app > button:nth-child(3) > span > img.bottom-icon-perfil{
  transform: translateY(5px) !important;
}

#homeMenuProfileBtn .menu-profile-icon::after{
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 10px;
  height: 7px;
  border-radius: 8px 8px 3px 3px;
  border: 2px solid #9b59ff;
  border-top: 0;
  box-sizing: border-box;
}

/* Clean lock: títulos do menu inferior com mesma fonte e tamanho */
@media (max-width: 700px){
  html.force-pc .bottom-app{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html.force-pc .bottom-app > button,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn{
    display: grid !important;
    grid-template-rows: 34px 14px !important;
    place-items: center !important;
  }

  html.force-pc .bottom-app > button > span,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(9px) !important;
  }

  html.force-pc .bottom-app > button .bottom-label,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
    width: 100% !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: translateY(14px) !important;
    font-family: "Arial Black", "Segoe UI", Arial, sans-serif !important;
    font-size: 11.33px !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  /* Início com fundo verde igual ao Apostar */
html.force-pc .bottom-app > button:nth-child(1),
  html.force-pc .bottom-app > button:nth-child(1).active{
    background: linear-gradient(180deg, rgba(0,74,34,.92), rgba(0,45,21,.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  /* Centraliza os textos da faixa de pontuação */
  html.force-pc .menu-grid-app .points-tile .points-left > div{
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transform: translateX(-80px) !important;
  }

  html.force-pc .menu-grid-app .points-tile .points-left strong,
  html.force-pc .menu-grid-app .points-tile .points-left small{
    text-align: center !important;
    justify-content: center !important;
  }

  /* Força troféu 20px à direita */
  html.force-pc .menu-grid-app .points-tile .points-icon{
    transform: none !important;
    margin-left: 90px !important;
  }
}

/* PADRÃO FINAL: ícones do menu inferior com altura uniforme */
.app-frame .bottom-app > button > span > img,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span > img{
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* LOCK FINAL ABSOLUTO: Perfil desce +10px (ícone e nome) */
@media (max-width: 700px){
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
    transform: translateY(19px) !important;
  }

  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
    transform: translateY(24px) !important;
  }
}

@media (min-width: 701px){
  .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
    transform: translateY(10px) !important;
  }

  .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
    transform: translateY(10px) !important;
  }
}

/* LOCK DEFINITIVO DO PERFIL (evita disputa com regras antigas) */
html.force-pc .bottom-app .bottom-user-menu #homeBottomUserBtn > span{
  transform: translateY(19px) !important;
}

html.force-pc .bottom-app .bottom-user-menu #homeBottomUserBtn .bottom-label-user{
  transform: translateY(24px) !important;
}

/* LOCK: dropdown do Perfil sempre na frente (mobile) */
@media (max-width: 700px){
  .home-bottom,
  .menu-grid-app{
    position: relative !important;
    z-index: 10 !important;
  }

  .bottom-app,
  html.force-pc .bottom-app{
    position: relative !important;
    z-index: 99980 !important;
    overflow: visible !important;
  }

  .bottom-user-menu,
  .top-user-menu{
    position: relative !important;
    z-index: 99990 !important;
  }

  .bottom-app .top-user-dropdown,
  .top-user-dropdown{
    position: absolute !important;
    z-index: 99999 !important;
  }

  /* Mobile: menu do Perfil abre para cima */
  .bottom-user-menu .top-user-dropdown,
  .bottom-app .top-user-dropdown{
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
  }
}

/* Fundo full-screen definitivo (mobile): cobre a tela inteira */
@media (max-width: 700px){
  .app-frame::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .app-frame .home-bottom::after{
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.force-pc .phone-content,
  html:not(.force-pc) .phone-content{
    background-image: url('/assets/imagemfd.webp'), url('/assets/imagemfd.webp') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center 2px, center 2px !important;
    background-size: 112% auto, cover !important;
  }
}

/* Telas altas (ex.: 392x900): evita faixa preta no fim */
@media (max-width: 700px) and (min-height: 820px){
  html.force-pc .app-frame .phone-content,
  html.force-pc .phone-content,
  html:not(.force-pc) .phone-content{
    background-image: url('/assets/imagemfd.webp'), url('/assets/imagemfd.webp') !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center 2px, center 2px !important;
    background-size: 112% auto, cover !important;
  }
}

/* "VER TODAS AS REGRAS" translúcido */
#rulesTile.rules-tile,
#rulesTile.rules-tile:hover,
#rulesTile.rules-tile:active{
  background:
    radial-gradient(220px 60px at 50% 15%, rgba(255,255,255,.78), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fff3b0 0%, #ffd45a 38%, #f0b308 70%, #b87300 100%) !important;
  border: 2px solid rgba(88, 54, 0, .92) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 10px 18px rgba(0,0,0,.32),
    0 0 16px rgba(255, 200, 40, .18) !important;
  filter: none !important;
}

/* Regra definitiva: menu do Perfil sempre abre para cima (todas as telas) */
.bottom-user-menu .top-user-dropdown,
.bottom-app .top-user-dropdown{
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  max-height: min(60vh, 320px) !important;
  overflow-y: auto !important;
}

/* Lock final do menu de perfil: compacto, sem scroll e translúcido */
#homeTopUserMenu.top-user-dropdown{
  min-width: 0 !important;
  width: clamp(142px, 46vw, 182px) !important;
  max-width: clamp(142px, 46vw, 182px) !important;
  max-height: none !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, rgba(8,10,14,.72), rgba(8,10,14,.62)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Melhora de legibilidade no mobile: texto do menu de perfil */
@media (max-width: 700px){
  #homeTopUserMenu.top-user-dropdown{
    background: linear-gradient(180deg, rgba(8,10,14,.82), rgba(8,10,14,.74)) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #homeTopUserMenu.top-user-dropdown button{
    padding: 11px 12px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .1px !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

#homeMenuProfileBtn{
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #ffe56d !important;
  }
}

/* Faixa abaixo de "VER TODAS AS REGRAS" (mobile) */
.mobile-ticker{
  display: none;
}

@media (min-width: 701px){
  #mobileTicker.mobile-ticker{
    display: block !important;
    width: 100% !important;
    margin: 8px 0 6px 0 !important;
    padding: 3px 0 !important;
    border: 1px solid rgba(255, 220, 120, .42) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(7, 36, 20, .62), rgba(7, 36, 20, .50)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 40 !important;
  }

  #mobileTicker .mobile-ticker-track{
    position: relative !important;
    display: block !important;
    height: 22px !important;
    overflow: hidden !important;
  }

  #mobileTicker .mobile-ticker-track span{
    position: absolute !important;
    top: -1px !important;
    left: 100% !important;
    white-space: nowrap !important;
    display: inline-block !important;
    color: #ffe56d !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    text-shadow: none !important;
    will-change: transform !important;
    animation: mobileTickerRunDesktop 18s linear infinite !important;
  }
}

@keyframes mobileTickerRunDesktop{
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-100% - 100vw), 0, 0); }
}

@media (max-width: 700px){
  /* Desce o bloco superior de botões sem esconder a faixa */
  .home-bottom > .menu-grid-app{
    padding-top: 34px !important;
  }

  #mobileTicker.mobile-ticker{
    display: block !important;
    width: 100% !important;
    margin: -2px 0 4px 0 !important;
    padding: 2px 0 !important;
    border: 1px solid rgba(255, 220, 120, .45) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(7, 36, 20, .66), rgba(7, 36, 20, .52)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 40 !important;
  }

  #mobileTicker .mobile-ticker-track{
    position: relative !important;
    display: block !important;
    height: 20px !important;
    overflow: hidden !important;
  }

  #mobileTicker .mobile-ticker-track span{
    position: absolute !important;
    top: -2px !important;
    left: 100% !important;
    white-space: nowrap !important;
    display: inline-block !important;
    color: #ffe56d !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14.3px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    text-shadow: none !important;
    will-change: transform !important;
    animation: mobileTickerRun 16s linear infinite !important;
  }
}

@keyframes mobileTickerRun{
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-100% - 100vw), 0, 0); }
}

/* Medalha da seção MINHA PONTUAÇÃO: maior e destaque premium */
.app-frame .menu-grid-app .points-tile .points-icon img.score-medal-icon{
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
}

/* LOCK FINAL ABSOLUTO: ícones da barra inferior iguais e alinhados */
.app-frame .bottom-app > button > span,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  transform: none !important;
}

.app-frame .bottom-app > button > span > img,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span > img,
.app-frame .bottom-app img.bottom-icon-home,
.app-frame .bottom-app img.bottom-icon-bola,
.app-frame .bottom-app img.bottom-icon-chat,
.app-frame .bottom-app img.bottom-icon-resultado,
.app-frame .bottom-app img.bottom-icon-perfil{
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  transform: none !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Padrão visual: os 4 cards sempre verdes com efeito 3D no clique/ativo */
.app-frame .bottom-app > button,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn{
  background: linear-gradient(180deg, #13a85a 0%, #0b7f44 60%, #086734 100%) !important;
  border: 2px solid rgba(255, 220, 80, .92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 14px rgba(0,0,0,.34) !important;
}

.app-frame .bottom-app > button .bottom-label,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}

.app-frame .bottom-app > button.active,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn.active{
  background: linear-gradient(180deg, #17b764 0%, #0b8a48 58%, #075f31 100%) !important;
  border: 2px solid rgba(255, 232, 118, .98) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.40),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 10px 20px rgba(0,0,0,.40),
    0 0 10px rgba(255, 220, 90, .30) !important;
  transform: translateY(-1px) !important;
}

.app-frame .bottom-app > button.active .bottom-label,
.app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn.active .bottom-label-user{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.68) !important;
}

/* Dropdown do perfil: versão limpa e profissional */
#homeTopUserMenu.top-user-dropdown{
  border-radius: 14px !important;
}

#homeTopUserMenu.top-user-dropdown button{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}

#homeTopUserMenu .menu-ico{
  display: inline-flex;
  width: 14px;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  opacity: .95;
}

#homeTopUserMenu .top-user-balance-line{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  color: #ffe56d;
  background: rgba(255,214,90,.08);
}

/* Menu lateral mobile */
.mobile-menu-toggle{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2147483000;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(255, 220, 80, .95);
  background: linear-gradient(180deg, #13a85a 0%, #08743d 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.mobile-menu-toggle span,
.bottom-hamburger-icon i{
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.mobile-side-backdrop{
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-side-menu{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483001;
  width: min(82vw, 318px);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7, 42, 24, .98), rgba(4, 21, 14, .98));
  border-left: 2px solid rgba(255, 220, 90, .92);
  box-shadow: -18px 0 34px rgba(0,0,0,.48);
  transform: translateX(110%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

body.side-menu-open .mobile-side-menu{
  transform: translateX(0);
}

.mobile-side-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.mobile-side-head strong{
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #ffe56d;
  line-height: 1;
}

.mobile-side-head small{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.76);
}

.mobile-side-head button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 3px;
}

.mobile-side-nav{
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.mobile-side-nav button{
  min-height: 44px;
  border: 1px solid rgba(255, 220, 90, .38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  color: #fff;
  text-align: left;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-side-nav button.danger{
  color: #ff7777;
  border-color: rgba(255, 119, 119, .42);
}

.bottom-hamburger-icon{
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
}

.bottom-user-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 42px !important;
}

.bottom-user-icon img{
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.45)) !important;
}

@media (min-width: 701px){
  .mobile-menu-toggle{
    display: none !important;
  }
}

@media (max-width: 700px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.side-menu-open{
    overflow: hidden !important;
    touch-action: none;
  }

  html.force-pc .phone-content{
    overflow: hidden !important;
    padding-top: 6px !important;
  }

  body.modal-open html.force-pc .phone-content,
  body.modal-open .phone-content{
    overflow: hidden !important;
  }

  html.force-pc .app-frame .phone-content > .brand-emblem-bg{
    top: 10px !important;
    width: clamp(292px, 78vw, 344px) !important;
    z-index: 22 !important;
  }

  html.force-pc .app-frame .phone-content > .brand-subtitle-overlay{
    display: block !important;
    top: 106px !important;
    width: clamp(250px, 70vw, 330px) !important;
    height: clamp(54px, 15vw, 74px) !important;
    transform: translateX(-50%) scale(.82) !important;
    z-index: 24 !important;
    opacity: 1 !important;
  }

  html.force-pc .app-frame .phone-content > .brand-year-overlay{
    display: block !important;
    top: 154px !important;
    width: clamp(122px, 35vw, 154px) !important;
    height: clamp(34px, 9vw, 44px) !important;
    transform: translateX(-50%) scale(.88) !important;
    z-index: 24 !important;
    opacity: 1 !important;
  }

  html.force-pc .home-bottom{
    margin-top: auto !important;
  }

  html.force-pc .home-bottom > .menu-grid-app{
    padding-top: 10px !important;
  }

  .app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span.bottom-hamburger-icon,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span.bottom-hamburger-icon{
    transform: none !important;
    height: 42px !important;
  }

  .app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span.bottom-user-icon,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn > span.bottom-user-icon{
    transform: none !important;
    height: 42px !important;
  }

  .app-frame .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user,
  html.force-pc .bottom-app > .bottom-user-menu > #homeBottomUserBtn .bottom-label-user{
    transform: translateY(12px) !important;
  }
}

/* Faixa superior: baixar app */
.top-download-bar{
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 2147482990 !important;
  display: flex !important;
  justify-content: flex-start !important;
  pointer-events: none !important;
}
.top-download-btn{
  pointer-events: auto !important;
  min-height: 42px !important;
  padding: 0 14px 0 12px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 226, 96, .96) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.32), transparent 28%),
    linear-gradient(180deg, #18bd69 0%, #0b8d4d 55%, #066637 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.38),
    0 0 0 0 rgba(255, 222, 90, .38) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  animation: apkDownloadPulse 2.2s ease-in-out infinite !important;
}
.top-download-btn::before{
  content: "↓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 21px !important;
  height: 21px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.95) !important;
  color: #08733f !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}
.top-download-btn:active{
  transform: translateY(1px) scale(.99) !important;
}

.home-account-summary{
  position: absolute !important;
  top: 13px !important;
  left: 158px !important;
  right: 66px !important;
  z-index: 2147482988 !important;
  min-height: 42px !important;
  padding: 5px 12px 5px 10px !important;
  border-radius: 15px !important;
  border: 2px solid rgba(255, 226, 96, .90) !important;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.25), transparent 30%),
    linear-gradient(180deg, #129654 0%, #08723d 58%, #044b29 100%) !important;
  box-shadow:
    0 9px 20px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -4px 0 rgba(0,0,0,.16) !important;
  color: #fff !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  text-align: left !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

.home-account-summary[hidden]{
  display: none !important;
}

.home-account-name{
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.62) !important;
}

.home-account-balance{
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin-top: 2px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.home-account-balance img{
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) !important;
  flex: 0 0 auto !important;
}

.home-account-balance strong{
  color: #ffe56d !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.70) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 380px){
  .home-account-summary{
    left: 143px !important;
    right: 59px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .home-account-name{
    font-size: 12px !important;
  }

  .home-account-balance strong{
    font-size: 14px !important;
  }
}

@keyframes apkDownloadPulse{
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -5px 0 rgba(0,0,0,.18),
      0 8px 18px rgba(0,0,0,.38),
      0 0 0 0 rgba(255, 222, 90, .34);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 -5px 0 rgba(0,0,0,.18),
      0 10px 22px rgba(0,0,0,.42),
      0 0 0 7px rgba(255, 222, 90, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .top-download-btn{
    animation: none !important;
  }
}

/* Ajuste final do modal de saque: respiro entre labels, inputs e ações */
#walletWithdrawModal .wallet-inline-card{
  padding: 18px 16px !important;
}

#walletWithdrawModal .wallet-inline-card h3{
  margin: 0 0 16px !important;
}

#walletWithdrawModal .wallet-balance-panel{
  margin-bottom: 14px !important;
  text-align: left !important;
  padding-left: 14px !important;
}

#walletWithdrawModal .wallet-balance-panel small,
#walletWithdrawModal .wallet-balance-panel strong{
  text-align: left !important;
}

#walletWithdrawModal .wallet-inline-card label{
  display: block !important;
  margin: 12px 0 7px !important;
  line-height: 1.2 !important;
}

#walletWithdrawModal input{
  display: block !important;
  margin: 0 0 12px !important;
}

#walletWithdrawModal .quick-values{
  margin: 10px 0 16px !important;
  gap: 9px !important;
}

#walletWithdrawModal .pay-primary{
  margin-top: 14px !important;
}

#walletWithdrawModal .pay-secondary{
  margin-top: 10px !important;
}