:root{
  --bg:#070b16;--panel:#0e1527;--panel2:#141d33;--grid:#10131a;--slot:#1a1f29;
  --text:#f7f9ff;--muted:#91a1bf;--accent:#37e6c4;--accent2:#a970ff;--danger:#ff5b88;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0%,#172546 0,#0a1020 38%,var(--bg) 72%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
body{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;overscroll-behavior:none}
.app{width:min(94vw,560px);padding:18px 0 36px;text-align:center;margin:0 auto}
.brand{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px;text-align:left}
.logo{font-size:clamp(38px,11vw,64px);font-weight:950;letter-spacing:.18em;line-height:.9;text-shadow:0 0 24px rgba(55,230,196,.2)}
.logo span{color:var(--accent)}
.modeTag{font-size:12px;font-weight:800;color:var(--accent);background:rgba(55,230,196,.08);border:1px solid rgba(55,230,196,.25);border-radius:999px;padding:7px 10px;letter-spacing:.05em;text-transform:uppercase}
.topstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.accountTotals{display:flex;justify-content:center;gap:8px;margin:8px 0 12px;flex-wrap:wrap}.accountPill{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(6,31,73,.88);border:1px solid rgba(82,210,255,.28);font-size:12px;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.16)}.accountPill b{font-size:15px}.accountPill img{width:20px;height:20px;object-fit:contain}.menuTotals{display:flex;justify-content:center;gap:9px;margin:7px 0 15px;flex-wrap:wrap}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:9px 6px;min-width:0}
.stat b{display:block;font-size:clamp(19px,5vw,25px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat small{display:block;color:var(--muted);font-size:10px;margin-top:2px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.progressWrap{height:7px;background:#18223a;border-radius:99px;overflow:hidden;margin:10px 2px 13px}.progress{height:100%;width:100%;background:linear-gradient(90deg,var(--accent),#5fa8ff,var(--accent2));transform-origin:left;transition:width .2s linear}
.last{min-height:22px;color:#c2cbe0;font-size:13px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boardWrap{position:relative}
.board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;padding:10px;background:linear-gradient(145deg,#0f131a,#0a0d13);border:1px solid rgba(255,255,255,.055);border-radius:24px;box-shadow:0 18px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.025);user-select:none;touch-action:none}
.tile{min-width:0;min-height:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:18px;font-size:clamp(34px,12vw,68px);font-weight:950;color:#07101c;position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.45),0 8px 18px rgba(0,0,0,.15);transition:filter .15s ease,transform .15s ease}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 45%,rgba(0,0,0,.06));pointer-events:none}
.tile.empty{background:linear-gradient(145deg,#1b2029,#151922)!important;box-shadow:inset 0 1px 5px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);color:transparent}
.tile.spawn{animation:spawn .23s cubic-bezier(.2,1.5,.45,1)}
.tile.result{animation:result .32s ease-out}
@keyframes spawn{0%{transform:scale(.25);opacity:.2}75%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes result{0%{transform:scale(.65);filter:brightness(1.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.floatScore{position:absolute;z-index:10;font-weight:950;font-size:28px;color:#fff;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.7);animation:floatScore .75s ease-out forwards}
@keyframes floatScore{0%{transform:translate(-50%,-20%) scale(.7);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-140%) scale(1.08);opacity:0}}
.shake{animation:shake .22s linear}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.status{min-height:26px;margin:12px 0 8px;font-weight:800;font-size:16px}.status.good{color:var(--accent)}.status.hot{color:#ffcf66}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px}
button{border:0;border-radius:14px;padding:13px 15px;font-weight:900;font-size:14px;cursor:pointer;color:var(--text);background:#1a2742;border:1px solid rgba(255,255,255,.08)}button.primary{color:#07131c;background:linear-gradient(135deg,var(--accent),#69bfff);border:0}.hint{opacity:.6;font-size:12px;margin-top:13px}
.overlay{position:fixed;inset:0;background:rgba(3,6,14,.83);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:30}.overlay.hidden{display:none}.modal{width:min(94vw,540px);background:linear-gradient(180deg,#141e35,#0c1324);border:1px solid rgba(255,255,255,.1);border-radius:25px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.5);text-align:left}.modal h2{font-size:30px;margin:0 0 4px}.modal p{color:var(--muted);margin:0 0 18px;line-height:1.4}.modeGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.modeBtn{padding:14px 7px;text-align:center}.modeBtn.active{outline:2px solid var(--accent);background:rgba(55,230,196,.1)}.modeBtn strong{display:block;font-size:15px}.modeBtn small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.choices{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.choice.active{background:var(--accent2);color:white;border-color:transparent}.choice{padding:10px 14px}.choice.locked{opacity:.35;cursor:not-allowed;filter:grayscale(.8);position:relative}.choice.locked::after{content:" 🔒";font-size:11px}
.choices.targetList,.choices.timeList,.choices.movesList,.choices.pointsList{display:flex;flex-direction:column;gap:8px;flex-wrap:nowrap}
.targetChoice,.timeChoice,.movesChoice,.pointsChoice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;text-align:left}
.targetChoice .targetName,.timeChoice .timeName,.movesChoice .movesName,.pointsChoice .pointsName{font-size:18px;font-weight:950;white-space:nowrap}
.targetChoice .targetRecord,.timeChoice .timeRecord,.movesChoice .movesRecord,.pointsChoice .pointsRecord{font-size:12px;color:var(--muted);font-weight:800;text-align:right;line-height:1.35}
.targetChoice.active .targetRecord,.timeChoice.active .timeRecord,.movesChoice.active .movesRecord,.pointsChoice.active .pointsRecord{color:rgba(255,255,255,.9)}
.targetChoice.completed .targetName::after{content:"  ✓";color:var(--accent)}.targetChoice.locked .targetRecord{color:var(--muted)}
.modal .primary{width:100%;margin-top:6px}.summary{text-align:center}.summary .big{font-size:52px;font-weight:950;color:var(--accent);margin:12px 0 0}.summary .sub{color:var(--muted);margin-bottom:18px}

#menu{align-items:flex-start;justify-content:center;background:linear-gradient(180deg,#070b16 0,#0a1020 52%,#070b16 100%);backdrop-filter:none;overflow:auto}
#menu .modal{margin:0 auto;width:min(94vw,560px);min-height:100vh;background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px 0 34px}
#menu .modal h2{font-size:44px;letter-spacing:.04em;margin-top:0}
#menu .choices{margin-bottom:16px}
.tutorialBtn{width:100%;margin-top:8px;background:rgba(169,112,255,.12);border:1px solid rgba(169,112,255,.4)}
.adSlot{width:100%;min-height:96px;margin:24px auto 0;border:1px dashed rgba(255,255,255,.25);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.025)}
.interstitial{position:fixed;inset:0;z-index:80;background:rgba(3,6,14,.96);display:flex;align-items:center;justify-content:center;padding:20px}.interstitial.hidden{display:none}.interstitialBox{width:min(92vw,420px);min-height:520px;border:1px dashed rgba(255,255,255,.28);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);background:#0d1425}.interstitialBox strong{color:var(--text);font-size:22px}.interstitialBox button{margin-top:20px;min-width:180px}
#tutorial{align-items:flex-start;overflow:auto}.tutorialModal{width:min(94vw,560px);margin:12px auto;background:linear-gradient(180deg,#141e35,#0c1324);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:18px}.tutorialBoardWrap{position:relative;margin:14px 0}.tutorialBoard{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;padding:10px;background:linear-gradient(145deg,#0f131a,#0a0d13);border:1px solid rgba(255,255,255,.055);border-radius:24px;box-shadow:0 18px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025);position:relative;overflow:visible}.tutorialTile{min-width:0;min-height:0;aspect-ratio:1;border-radius:18px;background:linear-gradient(145deg,#1b2029,#151922);box-shadow:inset 0 1px 5px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);display:flex;align-items:center;justify-content:center;font-weight:950;font-size:clamp(34px,12vw,68px);color:#07101c;position:relative;overflow:hidden}.tutorialTile.filled{box-shadow:inset 0 1px rgba(255,255,255,.45),0 8px 18px rgba(0,0,0,.15)}.tutorialTile.filled::after,.tutorialMotionTile::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 45%,rgba(0,0,0,.06));pointer-events:none}.tutorialPairBox{position:absolute;border:4px solid #ffd84d;border-radius:18px;box-shadow:0 0 24px rgba(255,216,77,.5);pointer-events:none;z-index:15;transition:opacity .18s ease}.tutorialText{min-height:72px;color:#d9e1f3;line-height:1.45;font-size:15px}.tutorialControls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tutorialControls button{width:100%}.tutorialControls button:disabled{opacity:.35;cursor:default}.tutorialBadge{color:#ffd84d;font-weight:950}.tutorialArrow{font-size:34px;text-align:center;color:var(--accent);min-height:40px}.tutorialStep{color:var(--muted);font-size:12px;font-weight:850;margin-top:4px}.tutorialMotionLayer{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible}.tutorialMotionTile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:18px;font-size:clamp(34px,12vw,68px);font-weight:950;color:#07101c;box-shadow:inset 0 1px rgba(255,255,255,.45),0 12px 28px rgba(0,0,0,.3);transition:transform .23s cubic-bezier(.22,.82,.28,1),opacity .12s ease;will-change:transform;overflow:hidden}.tutorialResult{animation:tutorialResult .38s ease-out}@keyframes tutorialResult{0%{transform:scale(.55);filter:brightness(1.8)}65%{transform:scale(1.13)}100%{transform:scale(1)}}.tutorialXP{position:absolute;z-index:20;font-weight:1000;font-size:34px;color:#fff;text-shadow:0 2px 14px #000;pointer-events:none;animation:tutorialXP .9s ease-out forwards;white-space:nowrap}@keyframes tutorialXP{0%{transform:translate(-50%,-15%) scale(.55);opacity:0}18%{opacity:1;transform:translate(-50%,-35%) scale(1.18)}100%{transform:translate(-50%,-180%) scale(1);opacity:0}}


.recordIcons{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:2px}.recordDatum{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.recordIcon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:currentColor}.recordIcon svg{width:16px;height:16px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.iconXP{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:18px;padding:0 4px;border-radius:6px;background:linear-gradient(135deg,#37e6c4,#69bfff);color:#07131c;font-size:10px;font-weight:1000;font-style:italic;letter-spacing:-.04em;box-shadow:0 0 12px rgba(55,230,196,.18)}.recordEmpty{opacity:.72}
.statIcon{height:15px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--muted);margin-top:3px}.statIcon .recordIcon svg{width:14px;height:14px}.statIcon .iconXP{transform:scale(.88)}
.board.ghosting .tile:not(.empty){background:var(--slot-bg,#171c25)!important;color:transparent!important;box-shadow:var(--slot-shadow,inset 0 0 0 1px rgba(255,255,255,.025))!important}.board.ghosting .tile:not(.empty)::after{display:none}
.motionLayer{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible}.motionTile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:18px;font-size:clamp(34px,12vw,68px);font-weight:950;color:#07101c;box-shadow:inset 0 1px rgba(255,255,255,.45),0 12px 28px rgba(0,0,0,.3);transition:transform .23s cubic-bezier(.22,.82,.28,1),opacity .12s ease;will-change:transform;overflow:hidden}.motionTile::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 45%,rgba(0,0,0,.06));pointer-events:none}.motionTile.merging{filter:brightness(1.08)}
.comboBurst{position:absolute;z-index:18;pointer-events:none;transform:translate(-50%,-50%);width:90px;height:90px;display:flex;align-items:center;justify-content:center}.comboBurst .ring{position:absolute;inset:20%;border:4px solid rgba(255,255,255,.95);border-radius:50%;animation:burstRing .7s cubic-bezier(.12,.7,.18,1) forwards;box-shadow:0 0 30px rgba(255,255,255,.35)}.comboBurst .burstCore{position:relative;z-index:3;font-weight:1000;text-align:center;color:white;text-shadow:0 2px 14px #000;animation:burstCore .75s ease-out forwards;line-height:1}.comboBurst .burstExpr{display:block;font-size:12px;opacity:.88;margin-bottom:3px}.comboBurst .burstXP{display:block;font-size:25px}.comboBurst.tier2{width:130px;height:130px}.comboBurst.tier2 .burstXP{font-size:32px}.comboBurst.tier3{width:180px;height:180px}.comboBurst.tier3 .burstXP{font-size:42px}.comboBurst.tier4{width:235px;height:235px}.comboBurst.tier4 .burstXP{font-size:54px}.comboBurst.tier3 .ring,.comboBurst.tier4 .ring{border-width:6px;box-shadow:0 0 48px rgba(255,255,255,.5)}.burstParticle{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:burstParticle .72s cubic-bezier(.12,.7,.2,1) forwards}.tier2 .burstParticle{width:10px;height:10px}.tier3 .burstParticle{width:12px;height:12px}.tier4 .burstParticle{width:14px;height:14px}@keyframes burstParticle{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.05);opacity:0}}@keyframes burstRing{0%{transform:scale(.15);opacity:1}70%{opacity:.8}100%{transform:scale(1.25);opacity:0}}@keyframes burstCore{0%{transform:scale(.35);opacity:0}25%{transform:scale(1.18);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}

@media(max-width:520px){.modeGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.board{gap:7px;padding:7px}.tile{border-radius:14px}.topstats{gap:5px}.stat{padding:8px 3px}}

.wallet{display:flex;align-items:center;gap:7px;background:rgba(55,230,196,.09);border:1px solid rgba(55,230,196,.28);border-radius:999px;padding:8px 12px;font-weight:950;cursor:pointer}.gem{font-size:18px;filter:drop-shadow(0 0 7px rgba(55,230,196,.5))}.gemFly{position:absolute;z-index:25;font-size:24px;font-weight:950;color:#74f5e2;pointer-events:none;animation:gemFly .9s ease-in forwards;text-shadow:0 0 15px rgba(55,230,196,.8)}@keyframes gemFly{0%{transform:translate(-50%,-30%) scale(.7);opacity:0}18%{opacity:1;transform:translate(-50%,-65%) scale(1.2)}100%{transform:translate(-50%,-240%) scale(.8);opacity:0}}
.shopGrid{display:grid;gap:9px;margin:14px 0}.shopItem{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:12px}.shopItem strong{display:block}.shopItem small{color:var(--muted);display:block;margin-top:3px}.shopBuy{white-space:nowrap}.boosted{color:#ffd45f!important;border-color:rgba(255,212,95,.35)!important;background:rgba(255,212,95,.08)!important}.gemStreak{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);font-size:22px;font-weight:950;color:#ffd45f;text-shadow:0 0 20px rgba(255,212,95,.8);animation:streakPop .8s ease-out forwards;pointer-events:none}@keyframes streakPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-100%) scale(1)}}

/* v6.2 — tabuleiro padronizado, perfil e temas */
.board,.tutorialBoard{background:var(--board-bg, #0d1118);border-color:var(--board-border,rgba(255,255,255,.045));box-shadow:var(--board-shadow,0 14px 44px rgba(0,0,0,.28));}
.tile.empty,.tutorialTile:not(.filled){background:var(--slot-bg,#171c25)!important;box-shadow:var(--slot-shadow,inset 0 0 0 1px rgba(255,255,255,.025));}
.menuTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.menuTop h2{margin:0!important}.menuTools{display:flex;gap:8px}.iconBtn{width:46px;height:46px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:22px}.profileMini{display:flex;align-items:center;gap:9px;min-width:0}.avatarMini{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--panel2);border:2px solid rgba(255,255,255,.12)}.profileMini span{font-weight:900;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profilePhoto{width:92px;height:92px;border-radius:50%;object-fit:cover;background:var(--panel2);border:3px solid var(--accent);display:block;margin:10px auto}.field{display:block;margin:12px 0}.field span{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-bottom:6px}.field input{width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text);font:inherit}.themeList{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.themeCard{text-align:left;min-height:82px}.themeCard.active{outline:2px solid var(--accent)}.themeSwatches{display:flex;gap:5px;margin-top:8px}.themeSwatches i{width:18px;height:18px;border-radius:50%;display:block}
body.theme-synth{--bg:#09051a;--panel:#170b2d;--panel2:#251044;--text:#fff5ff;--muted:#bca6d8;--accent:#21e7ff;--accent2:#ff42d0;--board-bg:#110820;--slot-bg:#1c0d2d;--board-border:rgba(255,61,221,.35);--slot-shadow:inset 0 0 0 2px rgba(31,225,255,.18);background:radial-gradient(circle at 50% 0,#28104b 0,#100722 45%,#05030c 100%)}
body.theme-pastel{--bg:#fff9ea;--panel:#fffdf6;--panel2:#f5eadb;--text:#594e55;--muted:#8e7e84;--accent:#7edfc0;--accent2:#e895c1;--board-bg:#f6efe3;--slot-bg:#fffaf0;--board-border:rgba(120,100,90,.12);--slot-shadow:0 4px 9px rgba(120,90,70,.12),inset 0 0 0 1px rgba(120,90,70,.08);background:#fff9ea}
body.theme-pastel button{color:#594e55;background:#f5eadb;border-color:rgba(90,70,80,.12)} body.theme-pastel button.primary{color:#37424a}.theme-pastel .modal,.theme-pastel .tutorialModal{background:#fffdf6}.theme-pastel .overlay{background:rgba(255,249,234,.92)}
body.theme-cyber{--bg:#020b09;--panel:#071a15;--panel2:#0b251e;--text:#dffff3;--muted:#78aa9a;--accent:#4dff9b;--accent2:#4ec9ff;--board-bg:#061711;--slot-bg:#0a2119;--board-border:rgba(77,255,155,.35);--slot-shadow:inset 0 0 0 1px rgba(77,255,155,.16);background:radial-gradient(circle at 50% 0,#0a3024 0,#03130f 48%,#010806 100%)}
body.theme-cyber .board,body.theme-cyber .tutorialBoard{box-shadow:0 0 28px rgba(77,255,155,.12),inset 0 0 0 1px rgba(77,255,155,.08)}


/* v6.3 — correções de navegação, loja e temas */
body{background:var(--page-bg,radial-gradient(circle at 50% 0%,#172546 0,#0a1020 38%,#070b16 72%));}
#menu{background:var(--menu-bg,linear-gradient(180deg,#070b16 0,#0a1020 52%,#070b16 100%));}

/* Loja como uma página, e não como card/modal central */
#shop{
  align-items:flex-start;
  justify-content:center;
  padding:0;
  overflow-y:auto;
  background:var(--page-bg,linear-gradient(180deg,#070b16,#0a1020 52%,#070b16));
  backdrop-filter:none;
}
#shop .modal{
  width:min(94vw,560px);
  min-height:100vh;
  margin:0 auto;
  padding:24px 0 44px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#shop .modal h2{margin-top:0}
#shop .shopItem{background:var(--shop-item-bg,rgba(255,255,255,.035))}

/* Tema claro precisa clarear também as páginas-base */
body.theme-pastel{
  --page-bg:#fff9ea;
  --menu-bg:#fff9ea;
  --shop-item-bg:rgba(120,90,70,.035);
}
body.theme-pastel #menu,
body.theme-pastel #shop{background:#fff9ea}
body.theme-pastel .adSlot{background:rgba(120,90,70,.025);border-color:rgba(120,90,70,.2)}
body.theme-pastel .last{color:#786b70}
body.theme-pastel .progressWrap{background:#eadfce}

body.theme-synth{
  --page-bg:radial-gradient(circle at 50% 0,#28104b 0,#100722 45%,#05030c 100%);
  --menu-bg:linear-gradient(180deg,#16082d,#09051a 60%,#05030c);
}
body.theme-cyber{
  --page-bg:radial-gradient(circle at 50% 0,#0a3024 0,#03130f 48%,#010806 100%);
  --menu-bg:linear-gradient(180deg,#071f18,#020b09 60%,#010806);
}

/* Garante área de gesto consistente em Android */
.board{touch-action:none;-ms-touch-action:none}


/* v6.4 — durante o movimento, a casa nunca desaparece: só a lajota sai dela */
.tutorialTile:not(.filled){background:var(--slot-bg,#171c25)!important;box-shadow:var(--slot-shadow,inset 0 0 0 1px rgba(255,255,255,.025))!important}


/* v6.6 — identidade visual única, Loja ilustrada e tutorial rolável */
:root{--emerald:#28dd79;--emerald2:#92ffad;--deep:#061a3e;--deep2:#0a2b63;--gold:#ffd44f;--cardBlue:#0d3978}
html,body{background:#06152f url("../../backgrounds/classica.webp") center top/cover fixed no-repeat;color:#f7fbff}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,13,39,.14),rgba(3,14,36,.82) 72%,#041126)}
#menu,#shop,#tutorial{background:linear-gradient(180deg,rgba(4,24,66,.88),rgba(3,17,48,.95));backdrop-filter:blur(7px)}
#menu .modal{padding-top:16px}.newTop{align-items:center}.menuBrand{display:flex;align-items:center;justify-content:center;gap:4px;min-width:120px}.menuBrand img{width:62px;height:52px;object-fit:contain}.menuBrand h2{font-size:34px!important;text-shadow:0 3px 0 #071b45}.menuLead{color:#d7edff!important;text-align:center;font-weight:750}
.modeBtn,.targetChoice,.timeChoice,.movesChoice,.pointsChoice{background:linear-gradient(180deg,rgba(18,67,139,.95),rgba(8,42,94,.95));border:1px solid rgba(93,203,255,.4);box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.18)}
.modeBtn.active,.choice.active{background:linear-gradient(135deg,#1acb72,#38aeea)!important;color:white;outline:2px solid #9affbb}.tutorialBtn{background:linear-gradient(180deg,#123e86,#0a2c68);border-color:rgba(106,211,255,.45);font-size:15px}.tutorialBtn:hover{filter:brightness(1.08)}
.wallet{background:linear-gradient(180deg,#0d4d54,#083d42);border-color:rgba(86,255,149,.55);box-shadow:0 0 20px rgba(40,221,121,.13)}.gemIconImg{width:25px;height:25px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(71,255,139,.65))}
.primary{background:linear-gradient(180deg,#53ec6a,#13b848)!important;color:#062a1c!important;border:2px solid #8aff9b!important;box-shadow:0 5px 0 #087c36,0 8px 18px rgba(0,0,0,.25)!important}
/* SHOP */
#shop{align-items:flex-start;overflow:auto}.shopPage{width:min(94vw,560px);min-height:100vh;margin:0 auto;padding:14px 0 38px}.shopHero{min-height:162px;position:relative;display:flex;align-items:center;gap:10px;padding:20px 112px 20px 66px;border-radius:26px;background:linear-gradient(135deg,#0c54aa,#0a2c69);border:1px solid rgba(91,207,255,.45);box-shadow:0 15px 34px rgba(0,0,0,.25);overflow:hidden;text-align:left}.shopHero:after{content:"";position:absolute;right:-38px;top:-52px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(66,255,136,.24),transparent 67%)}.shopHero>img{position:absolute;right:-8px;bottom:-2px;width:145px;height:125px;object-fit:contain;z-index:2}.shopHero span{font-size:12px;font-weight:1000;letter-spacing:.16em;color:#7effa8}.shopHero h2{margin:3px 0 4px;font-size:29px;line-height:1}.shopHero p{margin:0;color:#d5eaff;font-size:12px}.roundBack{position:absolute;left:14px;top:16px;z-index:5;width:43px;height:43px;border-radius:14px;padding:0;background:linear-gradient(180deg,#42d6ff,#1687d1);border:2px solid #85ecff;color:#fff;font-size:25px;box-shadow:0 4px 0 #075c9e}
.shopWallet{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:90%;margin:-19px auto 16px;position:relative;z-index:4;background:#092957;border:2px solid rgba(86,255,149,.6);padding:8px 22px;border-radius:999px;box-shadow:0 9px 26px rgba(0,0,0,.28)}.shopWallet img{width:40px;height:40px;object-fit:contain}.shopWallet small{display:block;font-size:9px;color:#9cd8ff;font-weight:900;letter-spacing:.12em}.shopWallet strong{font-size:23px;color:white}.shopSectionTitle{text-align:left;margin:20px 3px 9px;font-size:19px}.benefitGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.benefitGrid .shopItem{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:118px;padding:12px;background:linear-gradient(150deg,#103e7b,#09265a);border:1px solid rgba(88,196,255,.35);border-radius:18px}.benefitGrid .shopItem span{flex:1}.benefitGrid .shopItem strong{font-size:14px}.benefitGrid .shopItem small{color:#a9cceb}.benefitGrid .shopBuy{width:100%;margin-top:8px;background:linear-gradient(180deg,#3ee56b,#13a846);border-color:#66fb88;color:#07351d}.packageGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.packageCard{position:relative;min-height:300px;border-radius:23px;padding:38px 10px 12px;overflow:hidden;text-align:center;border:2px solid rgba(255,255,255,.2);box-shadow:0 12px 26px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.25)}.packageCard:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.27),transparent 35%);pointer-events:none}.packageCard.p1{background:linear-gradient(160deg,#11aeb0,#087080)}.packageCard.p2{background:linear-gradient(160deg,#137bc9,#184a9c)}.packageCard.p3{background:linear-gradient(160deg,#b439d1,#6826a4)}.packageCard.p4{background:linear-gradient(160deg,#f0782d,#a83a24)}.packTag{position:absolute;left:10px;right:10px;top:10px;padding:6px;border-radius:999px;background:rgba(4,22,55,.68);font-weight:1000;letter-spacing:.05em}.packageCard img{width:100%;height:155px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 10px 8px rgba(0,0,0,.25))}.packageCard strong{display:block;font-size:32px;line-height:1;color:white;text-shadow:0 3px 0 rgba(0,0,0,.35)}.packageCard small{display:block;font-weight:950;letter-spacing:.12em;color:#d8edff;margin:3px 0 8px}.packageCard button{width:100%;padding:10px;background:linear-gradient(180deg,#49df69,#16a842);color:#06341b;opacity:1;border:2px solid #79ff93}.shopNote{display:flex;align-items:center;gap:11px;margin:15px 0;padding:12px 14px;border-radius:18px;background:rgba(7,37,83,.88);border:1px solid rgba(83,211,255,.3);text-align:left;font-size:12px;line-height:1.35}.shopNote img{width:50px;height:50px;object-fit:contain}.shopBottomBack{width:100%;margin-top:3px}
/* TUTORIAL ROLÁVEL */
#tutorial{align-items:flex-start;overflow:auto;padding:0}.tutorialPage{width:min(94vw,560px);min-height:100vh;margin:0 auto;padding:14px 0 42px}.tutorialHero{position:relative;min-height:190px;border-radius:26px;padding:30px 155px 24px 66px;background:linear-gradient(135deg,#0d56a9,#0a2c68);border:1px solid rgba(94,213,255,.45);overflow:hidden;text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.28)}.tutorialHero img{position:absolute;width:170px;height:150px;object-fit:contain;right:-6px;bottom:-5px}.tutorialHeroText span{font-size:11px;font-weight:1000;letter-spacing:.16em;color:#7effa8}.tutorialHero h2{font-size:36px;margin:4px 0 2px}.tutorialHero p{margin:0;color:#d9ecff;font-weight:800}.ruleCard{position:relative;margin-top:11px;padding:15px;border-radius:21px;background:linear-gradient(155deg,rgba(11,55,116,.97),rgba(6,31,75,.98));border:1px solid rgba(75,184,255,.36);box-shadow:0 9px 20px rgba(0,0,0,.18);text-align:left}.ruleN{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#75f28a,#20bd5d);color:#07361d;font-size:18px;font-weight:1000}.ruleCopy{padding-left:45px}.ruleCopy h3{margin:1px 0 5px;font-size:18px}.ruleCopy p{margin:0;color:#c9e1f8;font-size:13px;line-height:1.45}.ruleCard>img{display:block;width:100%;margin-top:12px;border-radius:15px;border:1px solid rgba(113,205,255,.25)}.gemRule{border-color:rgba(83,255,132,.45);box-shadow:0 0 24px rgba(28,219,105,.08)}.infoRule{display:flex;gap:12px;margin-top:11px;padding:15px;border-radius:20px;background:rgba(7,40,89,.95);border:1px solid rgba(92,187,255,.28);text-align:left}.infoIcon{flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#1e9ed7,#1ccd73);font-size:25px}.infoRule h3{margin:2px 0 5px}.infoRule p{margin:0;color:#c5ddf4;font-size:13px;line-height:1.45}.modesGuide{margin-top:11px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#113a77,#09285b);border:1px solid rgba(80,195,255,.32);text-align:left}.modesGuide h3{margin:0 0 10px}.guideGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.guideGrid div{padding:11px;border-radius:14px;background:rgba(2,20,52,.5)}.guideGrid b{display:block;color:#7effa8;font-size:13px}.guideGrid span{display:block;color:#bdd6ee;font-size:11px;margin-top:3px}.benefitExplain{display:flex;align-items:center;gap:12px;margin-top:11px;padding:15px;border-radius:20px;background:linear-gradient(135deg,#0b4b56,#073c46);border:1px solid rgba(83,255,132,.32);text-align:left}.benefitExplain img{width:70px;height:70px;object-fit:contain}.benefitExplain h3{margin:0 0 4px}.benefitExplain p{margin:0;color:#c9ead9;font-size:12px;line-height:1.4}.tutorialDone{width:100%;margin-top:13px;padding:15px;font-size:16px}
/* remove tema antigo da experiência visual */
#settings{display:none!important}body.theme-synth,body.theme-pastel,body.theme-cyber{--text:#f7fbff;--muted:#9dbbd8;--accent:#28dd79;--accent2:#36aeea;--board-bg:#0a234d;--slot-bg:#0b2b59;background:#06152f url("../../backgrounds/classica.webp") center top/cover fixed no-repeat!important}.theme-pastel .modal,.theme-pastel .tutorialModal{background:transparent}.theme-pastel .overlay{background:linear-gradient(180deg,rgba(4,24,66,.88),rgba(3,17,48,.95))}.theme-pastel .tutorialText{color:#eaf6ff}
@media(max-width:390px){.shopHero{padding-right:95px}.shopHero>img{width:120px}.tutorialHero{padding-right:120px}.tutorialHero img{width:135px}.packageCard{min-height:275px}.packageCard img{height:135px}.guideGrid{grid-template-columns:1fr}}



/* =========================================================
   v7.0 — identidade visual única em todas as telas
   ========================================================= */
:root{
  --nine-blue:#071b43;--nine-blue2:#0d3372;--nine-card:#0a2a5c;
  --nine-line:rgba(90,205,255,.34);--nine-green:#28df78;
  --nine-gold:#ffc643;--nine-soft:#b9d9f4;
}
html,body{background:#06152f url("../../backgrounds/classica.webp") center top/cover fixed no-repeat;color:#f7fbff}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,14,42,.25),rgba(3,14,38,.72));pointer-events:none}
.app{width:min(94vw,560px);padding:12px 0 34px}
.brand{align-items:center;padding:10px 12px;margin:0 0 10px;border-radius:22px;background:linear-gradient(135deg,rgba(9,49,105,.94),rgba(5,28,68,.94));border:1px solid var(--nine-line);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.logo{font-size:clamp(32px,9vw,49px);letter-spacing:.13em;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.logo span{color:#54ef93}
.wallet{position:relative;background:linear-gradient(180deg,#0a3b72,#082653)!important;border:2px solid rgba(85,255,148,.6)!important;color:#fff!important;box-shadow:0 5px 16px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12);transition:transform .18s ease,filter .18s ease}
.wallet.gemPulse{animation:walletPulse .55s cubic-bezier(.16,.82,.3,1)}
@keyframes walletPulse{0%{transform:scale(1)}35%{transform:scale(1.18);filter:brightness(1.35)}70%{transform:scale(.96)}100%{transform:scale(1)}}
.gemIconImg{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(74,255,120,.52))}
.modeTag{color:#8fffb4;background:#0a2d5f;border:1px solid rgba(80,255,145,.35)}
.topstats{gap:8px}.stat{background:linear-gradient(160deg,rgba(13,53,112,.96),rgba(7,31,74,.96));border:1px solid var(--nine-line);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.progressWrap{background:#071d44;border:1px solid rgba(87,198,255,.2)}
.last{color:#cae3f7}.status{color:#f2f8ff}.status.good{color:#7effa8}.status.hot{color:#ffd85d}
.board{background:linear-gradient(145deg,rgba(5,23,55,.98),rgba(8,39,82,.98));border:2px solid rgba(79,196,255,.34);box-shadow:0 17px 42px rgba(0,0,0,.36),inset 0 0 35px rgba(34,137,255,.08)}
.tile.empty{background:linear-gradient(145deg,#0a2d5d,#071f45)!important;box-shadow:inset 0 0 0 1px rgba(97,197,255,.09),inset 0 5px 12px rgba(0,0,0,.22)!important}
.actions button,.primary{box-shadow:0 6px 0 rgba(0,0,0,.22)}
button.primary{background:linear-gradient(180deg,#48ed7a,#18b94f);color:#052f19;border:1px solid #72ff98}
#changeMode{background:linear-gradient(180deg,#1e82d0,#0d5da8);border-color:#55bfff}
.hint{color:#a9c9e4}
.adSlot{min-height:84px;background:linear-gradient(145deg,rgba(8,34,76,.82),rgba(5,25,58,.82));border:1px dashed rgba(111,210,255,.42);color:#81b6db;border-radius:18px}
.adSlot:before{content:var(--nine-i18n-ad,"AD");display:inline-grid;place-items:center;width:28px;height:20px;border:1px solid rgba(128,208,255,.4);border-radius:6px;margin-right:8px;font-size:9px;color:#8dc8ed}

/* menus e overlays */
.overlay{background:linear-gradient(180deg,rgba(2,14,39,.86),rgba(3,14,35,.96));backdrop-filter:blur(8px)}
#menu .modal,.modal,.tutorialModal{background:linear-gradient(160deg,rgba(10,42,90,.96),rgba(5,25,62,.98));border:1px solid var(--nine-line);box-shadow:0 24px 64px rgba(0,0,0,.42)}
#menu .modal{background:transparent;border:0;box-shadow:none}
.newTop{padding:12px;border-radius:22px;background:linear-gradient(135deg,#0b3b80,#071f4c);border:1px solid var(--nine-line);box-shadow:0 10px 28px rgba(0,0,0,.23)}
.menuLead{color:#c8e3f6!important;text-align:center;font-weight:700}
.modeGrid{gap:9px}.modeBtn{min-height:78px;background:linear-gradient(160deg,#0d3b78,#082759);border:1px solid rgba(88,197,255,.28)}
.modeBtn small{color:#acd0ea}.choice{background:linear-gradient(160deg,#0c376f,#082552);border-color:rgba(91,198,255,.25)}
.targetChoice .targetRecord,.timeChoice .timeRecord,.movesChoice .movesRecord,.pointsChoice .pointsRecord{color:#afd0e9}
.iconBtn{background:linear-gradient(180deg,#1d8bd2,#0c5a9e)!important;border:1px solid #5ac8ff!important;color:#fff!important}
.profilePhoto{background:#0b2b5b;border-color:#54ed93}.field input{background:#081f47;border-color:rgba(95,199,255,.28);color:#fff}.field span{color:#a7cee8}
.summary .big{color:#71ff9a;text-shadow:0 0 20px rgba(76,255,138,.2)}
#gameOver .modal{position:relative;overflow:hidden;text-align:center}
#gameOver .modal:before{content:"";position:absolute;right:-25px;top:-22px;width:126px;height:126px;background:url("../../personagem/lajotinha-masc/confiante.webp") center/contain no-repeat;opacity:.26;pointer-events:none}
.interstitial{background:rgba(1,8,24,.97)}.interstitialBox{background:linear-gradient(160deg,#0b326c,#061b43);border:1px dashed rgba(112,208,255,.45)}

/* recompensa voando até o HUD */
.flyingGem{position:fixed;z-index:120;width:30px;height:30px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 12px rgba(77,255,130,.9));transform:translate(-50%,-50%) scale(.55);opacity:0;transition:left .68s cubic-bezier(.18,.78,.26,1),top .68s cubic-bezier(.18,.78,.26,1),transform .68s cubic-bezier(.18,.78,.26,1),opacity .15s ease}
.flyingGem.launch{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
.flyingGem.arrive{transform:translate(-50%,-50%) scale(.38);opacity:.25}
.gemRewardLabel{position:fixed;z-index:119;color:#8affaa;font-size:17px;font-weight:1000;pointer-events:none;text-shadow:0 3px 12px #001;animation:rewardLabel .72s ease-out forwards}
@keyframes rewardLabel{0%{transform:translate(-50%,0) scale(.7);opacity:0}20%{opacity:1;transform:translate(-50%,-18px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-70px) scale(.9)}}

/* loja/tutorial mantêm a mesma família visual */
.shopPage,.tutorialPage{padding-top:12px}.shopHero,.tutorialHero{background:linear-gradient(135deg,#0d4a97,#092b68);border-color:rgba(91,207,255,.47)}
.shopSectionTitle,.modesGuide h3,.benefitExplain h3{color:#f4f9ff}.shopNote{background:linear-gradient(135deg,#0b4250,#07323d)}
.ruleCard{background:linear-gradient(150deg,#0d3976,#082654);border-color:rgba(90,196,255,.32)}.ruleCopy p{color:#c6e0f3}.ruleCopy h3{color:#fff}

/* tela de perfil com mascote */
#profile .modal:before{content:"";display:block;width:94px;height:76px;margin:-8px auto 0;background:url("../../personagem/lajotinha-masc/confiante.webp") center/contain no-repeat}

/* slots reservados para mobile ads */
.mobileAdNote{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0;color:#7eaed1;font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}

@media(max-width:420px){
  .brand{padding:9px}.wallet{padding:7px 9px}.modeTag{font-size:9px;padding:6px 8px}.logo{font-size:31px}
  .flyingGem{width:27px;height:27px}
}


/* =========================================================
   v7.2 — splash + interface visual baseada nos assets reais
   ========================================================= */
html,body{background:#bceeff url("../../backgrounds/classica.webp") center top/cover fixed no-repeat!important;color:#12365d}
body:before{display:none!important}

.gameSplash{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#bceeff url("../../backgrounds/classica.webp") center center/cover no-repeat;
  transition:opacity .45s ease,visibility .45s ease;
}
.gameSplash.hideSplash{opacity:0;visibility:hidden;pointer-events:none}
/* v7.11.242: splash web apenas no navegador; o app usa o splash nativo. */
html[data-nine-platform="android"] .gameSplash,
html[data-nine-platform="ios"] .gameSplash{display:none!important}


.splashScene{
  width:min(90vw,560px);
  height:min(92dvh,880px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(20px,4.5vh,54px);
  padding:clamp(20px,4vh,46px) 18px;
  position:relative;
  z-index:2;
}
.splashLogo{
  display:block;
  width:min(78%,430px);
  max-height:22dvh;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(24,89,127,.18));
  flex:0 0 auto;
}
.splashMascot{
  display:block;
  width:min(62%,330px);
  max-height:43dvh;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(24,89,127,.18));
  flex:0 1 auto;
}
.splashLoader{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  width:min(72%,360px);
  text-align:center;
  z-index:2;
  padding:0;
  flex:0 0 auto;
}
.splashBar{
  height:20px;
  padding:3px;
  background:rgba(255,255,255,.92);
  border:3px solid #2b67a6;
  border-radius:999px;
  box-shadow:0 5px 14px rgba(43,103,166,.18);
  overflow:hidden;
}
.splashProgress{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#38df87,#82ec66);
  box-shadow:inset 0 2px rgba(255,255,255,.55);
  transition:width .12s linear;
}

/* Em telas largas, mantém composição compacta e central em vez de esticar a arte. */
@media (min-width:700px) and (orientation:landscape){
  .splashScene{
    width:min(52vw,620px);
    height:min(88dvh,760px);
    gap:clamp(14px,2.8vh,30px);
    padding:18px;
  }
  .splashLogo{
    width:min(68%,390px);
    max-height:22dvh;
  }
  .splashMascot{
    width:min(48%,285px);
    max-height:42dvh;
  }
  .splashLoader{
    width:min(58%,330px);
  }
}

@media (max-height:650px){
  .splashScene{gap:14px;padding:12px}
  .splashLogo{max-height:20dvh}
  .splashMascot{max-height:40dvh}
}


#menu{background:transparent!important;backdrop-filter:none!important;align-items:flex-start;overflow:auto}
#menu .homeScreen{width:min(94vw,560px);min-height:100vh;margin:0 auto;padding:16px 0 32px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.homeHud,.gameHeaderAssets{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin:2px 0 8px}
.homeHudAsset,.hudAsset{position:relative;min-width:0;height:58px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;overflow:visible}
.homeHudAsset img,.hudAsset img{width:100%;height:100%;object-fit:fill;display:block;filter:drop-shadow(0 5px 7px rgba(24,89,127,.15))}
.homeHudAsset b,.hudAsset b{position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);font-size:clamp(17px,5vw,25px);color:#fff;text-shadow:0 2px 2px #06375c;white-space:nowrap}
.homeHudAsset:nth-child(2) b,.hudGemAsset b{left:55%}
.homeLogo{text-align:center;margin:9px auto 0}.homeLogo img{width:min(78vw,390px);height:auto;filter:drop-shadow(0 10px 14px rgba(34,102,162,.2))}
.homeTagline{margin:0 auto 5px!important;text-align:center!important;color:#147f87!important;font-weight:1000!important;letter-spacing:.05em;font-size:14px!important}
.homeMascotRow{height:105px;display:flex;justify-content:center;align-items:center;margin:0 0 -2px}.homeMascot{height:115px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(41,112,139,.18))}
.assetButton{width:100%;height:58px;margin:8px 0 0;border:0!important;border-radius:18px!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:white!important;font-weight:1000!important;font-size:18px!important;text-shadow:0 2px 2px rgba(0,50,85,.55);box-shadow:none!important;padding:0 20px!important}
.assetGreen{}.assetTeal{}.assetBlue{}
.homeSectionTitle{font-weight:1000;color:#20588b;text-align:center;margin:17px 0 8px;letter-spacing:.06em}
.homeModes{gap:8px}.homeModes .modeBtn{background:rgba(255,255,255,.78)!important;color:#17466e!important;border:2px solid rgba(78,176,205,.25)!important;border-radius:16px!important;box-shadow:0 5px 12px rgba(57,132,165,.11)!important}.homeModes .modeBtn.active{background:linear-gradient(180deg,#35d8c9,#19aeb9)!important;color:#fff!important;outline:none!important;border-color:#55e7db!important}
#menu .choices{margin:9px 0 5px}#menu .choice{background:rgba(255,255,255,.82)!important;color:#17466e!important;border:1px solid rgba(55,145,194,.24)!important}#menu .choice.active{background:linear-gradient(180deg,#42d8c6,#1cafbd)!important;color:#fff!important}
.homeBottomTools{display:flex;justify-content:center;margin-top:10px}.homeSmallButton{min-width:180px;background:rgba(255,255,255,.78)!important;color:#17466e!important;border:2px solid rgba(55,145,194,.2)!important;box-shadow:0 5px 12px rgba(57,132,165,.1)!important}.hiddenAvatar{display:none!important}
.homeAd,.adSlot{background:rgba(255,255,255,.42)!important;border:2px dashed rgba(53,129,173,.26)!important;color:#5585a5!important}

/* jogo: usar a mesma família visual da Home */
.gamePage{padding-top:8px}.gameHeaderAssets{margin-bottom:1px}.gameMiniTitle{text-align:center;height:50px;margin:-3px 0 1px}.gameMiniTitle img{height:50px;width:auto}
.accountTotals{display:none!important}.topstats{margin-top:4px}.stat{background:rgba(255,255,255,.72)!important;border:1px solid rgba(46,136,175,.18)!important;box-shadow:0 5px 14px rgba(53,122,159,.08)!important}.stat b{color:#17466e}.statIcon,.stat small{color:#5283a1!important}.board{background:rgba(20,85,124,.35)!important;border:3px solid rgba(255,255,255,.82)!important;box-shadow:0 12px 28px rgba(41,115,145,.18)!important}.tile.empty{background:rgba(255,255,255,.34)!important}.last,.status,.hint{color:#215c80!important}.progressWrap{background:rgba(255,255,255,.55)!important}.actions button:not(.primary){background:rgba(255,255,255,.76)!important;color:#17466e!important;border-color:rgba(49,140,183,.23)!important}

/* overlays coerentes com o fundo claro */
#shop,#tutorial,#profile,#gameOver{background:rgba(218,247,255,.92)!important;color:#153e64}.modal,.tutorialPage,.shopPage{color:#153e64}.shopHero,.tutorialHero{background:rgba(255,255,255,.68)!important;border-color:rgba(49,145,187,.22)!important}.shopHero h2,.tutorialHero h2{color:#17466e}.shopHero p,.tutorialHero p{color:#4c7897!important}.ruleCard,.infoRule,.modesGuide,.benefitExplain{background:rgba(255,255,255,.77)!important;color:#17466e!important;border-color:rgba(57,144,184,.18)!important}.ruleCopy h3,.infoRule h3,.modesGuide h3,.benefitExplain h3{color:#17466e!important}.ruleCopy p,.infoRule p,.guideGrid span,.benefitExplain p{color:#4f7693!important}.guideGrid div{background:rgba(213,244,249,.65)!important}

@media(max-width:390px){.homeHudAsset,.hudAsset{height:52px}.homeMascotRow{height:92px}.homeMascot{height:102px}.assetButton{height:54px}.homeLogo img{width:76vw}}


/* =========================================================
   v7.2.2 — telas exclusivas: Home OU partida
   ========================================================= */

/* O tabuleiro não pode existir visualmente atrás da Home. */
.gamePage{
  display:none;
}
body.nine-playing .gamePage{
  display:block;
}
body.nine-playing #menu{
  display:none!important;
}

/* Na Home, nenhum conteúdo da partida participa do layout. */
body:not(.nine-playing) .gamePage{
  display:none!important;
}

/* Home ocupa a altura inteira no desktop. */
@media (min-width: 700px){
  #menu{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }
  #menu .homeScreen{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    padding-top:clamp(10px,1.4vh,18px);
    padding-bottom:clamp(10px,1.4vh,18px);
  }
}

/* Em telas menores continua rolável normalmente. */
@media (max-width: 699px){
  #menu{
    min-height:100dvh;
    overflow-y:auto;
  }
  #menu .homeScreen{
    min-height:100dvh;
  }
}


/* =========================================================
   v7.3 — interface leve, progressão e loja visual
   ========================================================= */
.homeMascotRow{height:84px}.homeMascot{height:96px}
.homeSectionTitle{margin:10px 0 5px;color:#17466e}
.homeModes{grid-template-columns:repeat(4,1fr)!important;gap:5px!important}
.homeModes .modeBtn{
  min-height:74px!important;padding:5px 2px!important;background:transparent!important;
  border:0!important;box-shadow:none!important;color:#17466e!important;outline:none!important;
}
.homeModes .modeBtn.active{background:transparent!important;border:0!important;box-shadow:none!important;color:#087f87!important}
.homeModes .modeBtn img{width:40px;height:40px;object-fit:contain;display:block;margin:0 auto 2px;filter:drop-shadow(0 3px 3px rgba(32,102,132,.14))}
.homeModes .modeBtn strong{font-size:11px!important}
.homeModes .modeBtn small{display:none}
#menu .choices{margin:5px 0 7px}
#menu .choice{
  background:rgba(255,255,255,.56)!important;border:1px solid rgba(51,138,170,.18)!important;
  box-shadow:none!important;border-radius:14px!important;padding:20px 12px!important;
}
#menu .choice.active{background:rgba(255,255,255,.82)!important;color:#0b7f87!important;border-color:rgba(23,177,184,.42)!important}
#menu .choice.locked{opacity:.48}
.homeQuickTools{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.homeTool{
  min-width:0;padding:5px 2px!important;background:transparent!important;border:0!important;box-shadow:none!important;
  color:#17466e!important;font-size:10px!important;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.homeTool img{width:38px;height:38px;object-fit:contain}
.homeTool.profileTool img{border-radius:50%;border:2px solid rgba(32,132,165,.22);background:rgba(255,255,255,.7)}
.homeTool span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.homeAd{display:none!important}

/* tutorial legível no fundo claro */
.tutorialHeroText span,.guideGrid b,.benefitExplain h3{color:#147f87!important}
.ruleCopy b,.ruleCopy strong,.infoRule b{color:#17466e!important}
.ruleN{color:#fff!important;background:linear-gradient(180deg,#20c8ba,#159ca5)!important}
.ruleCard>img{height:180px;object-fit:contain;background:transparent!important;border:0!important}
.tutorialPage{padding-bottom:30px}

/* loja */
.shopSectionTitle{color:#17466e!important}
.benefitGroups{display:flex;flex-direction:column;gap:15px}
.benefitGroupTitle{font-size:13px;font-weight:1000;letter-spacing:.08em;color:#147f87;margin:2px 2px 6px;text-transform:uppercase}
.benefitGridVisual{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.benefitCard{
  position:relative;padding:7px;border-radius:18px;background:rgba(255,255,255,.66);
  border:1px solid rgba(52,145,180,.18);box-shadow:0 5px 14px rgba(44,111,144,.08);text-align:center;
}
.benefitCard img{width:100%;height:95px;object-fit:contain;display:block}
.benefitCard strong{display:block;color:#17466e;font-size:12px;margin-top:1px}
.benefitCard small{display:block;color:#5d8198;font-size:10px;min-height:24px;margin:2px 0 5px}
.benefitCard button{width:100%;padding:8px;border-radius:12px;background:rgba(21,171,178,.1)!important;color:#0b6972!important;border:1px solid rgba(21,171,178,.25)!important;box-shadow:none!important}
.benefitCard.adBenefit button{background:rgba(24,155,211,.12)!important;color:#17628d!important}
.packageCard .packTag{background:transparent!important;color:#fff!important;text-shadow:0 2px 3px rgba(0,0,0,.45);border:0!important}
.packageCard small,.packageCard strong{color:#fff!important}
.shopNote{background:transparent!important;border:1px solid rgba(53,129,173,.22)!important;box-shadow:none!important;color:#456f89!important}
#shop .adSlot{display:none!important}

/* jogo */
.gameStats3{grid-template-columns:repeat(3,1fr)!important}
.gameStat .statIcon img{width:22px;height:22px;object-fit:contain}
.gameVerbose{display:none!important}
.board.ghosting .tile:not(.empty){
  background:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 0 0 1px rgba(55,145,180,.08)!important;
}
.gamePage{padding-bottom:110px!important}
.gameBannerFixed{
  position:fixed!important;left:50%!important;transform:translateX(-50%)!important;bottom:0!important;
  width:min(94vw,560px)!important;min-height:72px!important;height:72px!important;margin:0!important;
  z-index:24!important;border-radius:16px 16px 0 0!important;background:rgba(238,251,255,.96)!important;
  box-shadow:0 -4px 18px rgba(40,112,145,.14)!important;
}
body:not(.nine-playing) .gameBannerFixed{display:none!important}

/* profile/settings */
.profilePhotoPick{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#147f87;font-size:11px;font-weight:900}
.profilePhotoPick .profilePhoto{margin:5px auto 4px}
.nativeConnect{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}
.nativeConnect button{font-size:11px;padding:10px 6px;background:rgba(255,255,255,.72)!important;color:#17466e!important}
.nativeNote{display:block;color:#62839a;text-align:center;margin-bottom:8px}
.plainBack{width:100%;margin-top:7px;background:rgba(255,255,255,.72)!important;color:#17466e!important}
.settingRow{display:flex;align-items:center;justify-content:space-between;padding:13px;border-radius:16px;background:rgba(255,255,255,.68)}
.settingRow small{display:block;color:#62839a;margin-top:2px}
.switch input{display:none}.switch span{display:block;width:52px;height:29px;border-radius:999px;background:#a9c6d4;position:relative;transition:.2s}
.switch span:after{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:#21bd88}.switch input:checked+span:after{left:26px}
.dangerZone{margin-top:12px;padding:13px;border-radius:16px;border:1px solid rgba(207,76,76,.22);background:rgba(255,255,255,.56)}
.dangerZone p{font-size:12px!important;margin:5px 0 8px!important;color:#6b7d89!important}
.dangerButton{width:100%;background:#fff2f2!important;color:#a02e2e!important;border:1px solid #e8a3a3!important}

/* powerup rápido */
.quickBoostModal{background:#eefbff!important;color:#17466e!important}
.quickBoostHead{display:flex;align-items:center;justify-content:space-between}.quickBoostHead h2{margin:0}
.miniClose{width:38px;height:38px;padding:0;border-radius:12px;background:#fff!important;color:#17466e!important;border:2px solid #17466e!important}
.quickBoostGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quickBoostGrid .benefitCard img{height:80px}
.hidden{display:none!important}

@media(max-width:380px){
  .homeModes .modeBtn img{width:34px;height:34px}.homeModes .modeBtn strong{font-size:9px!important}
  .homeTool img{width:34px;height:34px}.homeTool{font-size:9px!important}
  .ruleCard>img{height:150px}
}


/* =========================================================
   v7.4 — perfil, fim de jogo e balanceamento visual
   ========================================================= */
#settings .modal,#profile .modal{background:#f5fdff!important;color:#17466e!important;border:1px solid rgba(40,132,166,.18)!important;box-shadow:0 22px 60px rgba(40,92,120,.22)!important}
.profileModal{padding:0!important;overflow:hidden;border-radius:26px!important}
.profileTopbar{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;background:linear-gradient(135deg,#d9f8ff,#eefcff);border-bottom:1px solid rgba(52,139,173,.12)}
.profileTopbar span{font-size:10px;font-weight:1000;letter-spacing:.16em;color:#1597a3}.profileTopbar h2{margin:2px 0 0!important;font-size:27px!important;color:#17466e!important}
.profilePhotoPick{padding:17px 18px 6px}.profilePhotoRing{position:relative;width:108px;height:108px;margin:auto}
.profilePhotoRing .profilePhoto{width:108px;height:108px;margin:0!important;border:4px solid #fff!important;box-shadow:0 6px 22px rgba(35,116,151,.18);background:#e5f6fa!important}
.photoEditBadge{position:absolute;right:-2px;bottom:2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#19b3bb;color:#fff;border:3px solid #fff;font-size:15px}
.profileNameField{padding:0 18px}.profileNameField input{background:#fff!important;color:#17466e!important;border:1px solid rgba(38,130,164,.2)!important}
.profileConnectTitle{padding:4px 18px 6px;font-size:11px;font-weight:1000;color:#1597a3;letter-spacing:.08em;text-transform:uppercase}
.nativeConnect{padding:0 18px;margin:0!important}.nativeConnect button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;text-align:left;background:#fff!important;border:1px solid rgba(46,134,167,.16)!important}
.nativeConnect button span{grid-row:1/3;font-size:20px}.nativeConnect button b{font-size:11px}.nativeConnect button small{font-size:9px;color:#6e8999}
.nativeNote{padding:8px 18px 0}.profileSave{width:calc(100% - 36px)!important;margin:12px 18px 18px!important}

.gameOverCard{width:min(92vw,460px)!important;background:linear-gradient(180deg,#effbff,#dff8ff)!important;color:#17466e!important;border:1px solid rgba(52,145,180,.18)!important;border-radius:28px!important;padding:22px!important;box-shadow:0 24px 70px rgba(36,96,125,.26)!important}
#gameOver .modal:before{display:none!important}
.gameOverEyebrow{font-size:10px;font-weight:1000;letter-spacing:.17em;color:#1597a3;margin-bottom:4px}
.gameOverCard h2{font-size:34px!important;color:#17466e!important;margin:0 0 16px!important}
.gameOverXp{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 14px;padding:14px 18px;width:max-content;min-width:210px;border-radius:22px;background:#fff;box-shadow:0 7px 20px rgba(36,105,139,.1)}
.gameOverXp img{width:56px;height:56px;object-fit:contain}.gameOverXp small{display:block;font-size:9px;font-weight:1000;color:#6791a8;letter-spacing:.09em}.gameOverXp strong{display:block;font-size:42px;line-height:1;color:#17466e}
.endMetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:4px 0 13px}
.endMetric{padding:11px 5px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(49,139,172,.13)}
.endMetric img{width:28px;height:28px;object-fit:contain}.endMetric b{display:block;font-size:18px;color:#17466e}.endMetric small{display:block;font-size:9px;color:#6c899a}
.endSubClean{margin:0 0 10px!important;color:#638196!important;font-size:12px!important}
.gameOverPrimary{width:100%!important;margin-top:3px!important}.gameOverSecondary{width:100%;margin-top:7px;background:#fff!important;color:#17466e!important;border:1px solid rgba(48,136,168,.16)!important}
#gameOver{background:rgba(218,247,255,.89)!important;backdrop-filter:blur(8px)!important}

/* Mina */
.homeTool img[src*="icone-mina"]{width:42px;height:42px}
.shopHero span{color:#1597a3!important}

/* Saldo insuficiente nos benefícios */
.benefitCard.noBalance{opacity:.62}
.benefitCard.noBalance button{background:#eef4f6!important;color:#78909b!important;border-color:#d9e5e8!important;cursor:not-allowed}
.quickBalanceMsg{grid-column:1/-1;padding:9px 10px;border-radius:13px;background:#fff7f7;color:#8b5960;font-size:11px;text-align:center;border:1px solid #f0dddd}


/* v7.4.3 — Mina vende gemas; power-ups só durante a partida */
#shop .shopSectionTitle:first-of-type{display:none!important}
.mineUseNote{display:flex;align-items:center;gap:12px;margin:12px 0 9px;padding:12px 14px;border-radius:18px;background:transparent;border:1px solid rgba(53,129,173,.2);text-align:left}
.mineUseNote img{width:46px;height:46px;object-fit:contain}
.mineUseNote strong{display:block;color:#17466e;font-size:13px}
.mineUseNote small{display:block;color:#5c7f94;font-size:11px;line-height:1.4;margin-top:3px}
.mineRewardOnly{grid-template-columns:1fr!important;margin-bottom:12px}
.mineRewardOnly .benefitCard{max-width:280px;width:100%;margin:0 auto}


/* =========================================================
   v7.4.7 — Home em dois estados:
   1) seleção de modo 2x2
   2) modo selecionado em linha + níveis
   ========================================================= */

#menu .homeScreen{
  position:relative;
  padding-bottom:108px!important;
}

#menu .homeSectionTitle{
  transition:.28s ease;
}

/* ESTADO INICIAL — 2x2 grande */
#menu:not(.mode-selected) .homeModes{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:12px 0 0!important;
}
#menu:not(.mode-selected) .homeModes .modeBtn{
  min-height:150px!important;
  border:1px solid rgba(22,133,161,.7)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.18)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  padding:14px!important;
  box-shadow:0 5px 18px rgba(42,120,150,.06)!important;
  transition:
    transform .32s cubic-bezier(.22,.8,.2,1),
    min-height .32s ease,
    padding .32s ease,
    border .25s ease,
    background .25s ease;
}
#menu:not(.mode-selected) .homeModes .modeBtn img{
  width:82px!important;
  height:82px!important;
  object-fit:contain!important;
  margin:0!important;
  transition:.32s ease;
}
#menu:not(.mode-selected) .homeModes .modeBtn strong{
  font-size:14px!important;
  line-height:1.1!important;
}
#menu:not(.mode-selected) #choices{
  max-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  margin:0!important;
  pointer-events:none!important;
  transform:translateY(18px);
  transition:max-height .34s ease,opacity .2s ease,transform .32s ease,margin .32s ease;
}

/* ESTADO APÓS SELECIONAR UM MODO */
#menu.mode-selected .homeSectionTitle{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0!important;
}
#menu.mode-selected .homeModes{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 10px!important;
  transform:translateY(0);
}
#menu.mode-selected .homeModes .modeBtn{
  min-height:82px!important;
  padding:6px 2px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  transition:.32s cubic-bezier(.22,.8,.2,1);
}
#menu.mode-selected .homeModes .modeBtn img{
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  margin:0!important;
}
#menu.mode-selected .homeModes .modeBtn strong{
  font-size:11px!important;
}
#menu.mode-selected .homeModes .modeBtn.active{
  transform:translateY(-2px);
}
#menu.mode-selected #choices{
  max-height:800px!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:auto!important;
  transform:translateY(0);
  margin:0!important;
  transition:max-height .42s ease,opacity .28s .08s ease,transform .34s ease;
}

/* Na seleção inicial, logo/mascote ficam presentes.
   Ao escolher modo, compactamos essa área para abrir espaço aos níveis. */
#menu .homeLogo,
#menu .homeMascotRow,
#menu .menuLead{
  transition:max-height .34s ease,opacity .24s ease,margin .34s ease,transform .34s ease;
  overflow:hidden;
}
#menu.mode-selected .homeLogo{
  max-height:0!important;
  opacity:0;
  margin:0!important;
  transform:translateY(-24px);
}
#menu.mode-selected .homeMascotRow{
  max-height:0!important;
  opacity:0;
  margin:0!important;
  transform:translateY(-18px);
}
#menu.mode-selected .menuLead{
  max-height:0!important;
  opacity:0;
  margin:0!important;
}

/* HUD permanece no topo em ambos os estados */
#menu .homeTopHud{
  margin-bottom:10px;
}

/* Barra inferior fixa */
#menu .homeQuickTools{
  position:fixed!important;
  left:50%!important;
  bottom:max(10px,env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  width:min(calc(100vw - 28px),620px)!important;
  z-index:40!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:4px!important;
  padding:9px 8px 7px!important;
  margin:0!important;
  border-radius:16px!important;
  background:rgba(135,205,222,.42)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 7px 24px rgba(36,103,131,.12)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#menu .homeTool{
  padding:2px!important;
  min-height:52px!important;
}
#menu .homeTool img{
  width:34px!important;
  height:34px!important;
}
#menu .homeTool span{
  font-size:9px!important;
  font-weight:900!important;
  color:#17466e!important;
}

/* níveis deixam espaço livre da barra inferior */
#menu.mode-selected #choices{
  padding-bottom:18px;
}

/* desktop */
@media (min-width:700px){
  #menu:not(.mode-selected) .homeModes{
    max-width:600px;
    margin:14px auto 0!important;
  }
  #menu:not(.mode-selected) .homeModes .modeBtn{
    min-height:170px!important;
  }
  #menu:not(.mode-selected) .homeModes .modeBtn img{
    width:92px!important;height:140px!important;
  }
  #menu.mode-selected .homeModes{
    max-width:620px;
    margin:0 auto 10px!important;
  }
  #menu.mode-selected #choices{
    max-width:620px;
    margin:0 auto!important;
  }
}

/* telas pequenas */
@media (max-width:380px){
  #menu:not(.mode-selected) .homeModes{gap:9px!important}
  #menu:not(.mode-selected) .homeModes .modeBtn{min-height:126px!important}
  #menu:not(.mode-selected) .homeModes .modeBtn img{width:68px!important;height:68px!important}
  #menu.mode-selected .homeModes .modeBtn img{width:42px!important;height:42px!important}
  #menu .homeQuickTools{width:calc(100vw - 18px)!important}
}


/* =========================================================
   v7.4.8 — refinamentos Home/HUD
   ========================================================= */
.homeHudAsset img,
.hudAsset img{
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}

.modeSelectRow{display:block;position:relative}
.homeModeBack{display:none!important}

#menu.mode-selected .modeSelectRow{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  max-width:620px;
  margin:20px auto 10px!important;
}
#menu.mode-selected .homeModeBack{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#menu.mode-selected .homeModeBack img{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
}
#menu.mode-selected .homeModes{
  margin:0!important;
  max-width:none!important;
}
#menu.mode-selected .homeModes .modeBtn.active{
  background:rgba(135,205,222,.42)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  border-radius:14px!important;
  box-shadow:0 4px 14px rgba(36,103,131,.10)!important;
}

/* Desktop com pouca altura útil: compacta a Home para evitar scrollbar */
@media (min-width:700px) and (max-height:760px){
  #menu .homeScreen{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    padding-top:6px!important;
    padding-bottom:88px!important;
  }
  #menu .homeTopHud{margin-bottom:4px!important}
  #menu .homeHudAsset{height:48px!important}
  #menu .homeLogo{margin:0!important}
  #menu .homeLogo img{max-height:150px!important;width:auto!important}
  #menu .menuLead{margin:0!important;font-size:12px!important}
  #menu .homeMascotRow{height:62px!important;margin:0!important}
  #menu .homeMascot{height:66px!important}
  #menu .homeSectionTitle{margin:4px 0 5px!important;font-size:16px!important}
  #menu:not(.mode-selected) .homeModes{
    gap:8px!important;
    margin:4px auto 0!important;
  }
  #menu:not(.mode-selected) .homeModes .modeBtn{
    min-height:112px!important;
    padding:7px!important;
  }
  #menu:not(.mode-selected) .homeModes .modeBtn img{
    width:60px!important;height:60px!important;
  }
  #menu.mode-selected .modeSelectRow{margin:12px auto 8px!important}
  #menu.mode-selected .homeModes .modeBtn{min-height:66px!important}
  #menu.mode-selected .homeModes .modeBtn img{width:40px!important;height:40px!important}
  #menu.mode-selected #choices{padding-bottom:4px!important}
  #menu .homeQuickTools{bottom:6px!important;padding:6px 8px 5px!important}
  #menu .homeTool{min-height:44px!important}
  #menu .homeTool img{width:28px!important;height:28px!important}
}


/* v7.4.9 - ajustes finais Home / níveis / tutorial */
#menu .choice{padding:20px 12px!important}
.targetChoice .targetRecord,
.timeChoice .timeRecord,
.movesChoice .movesRecord,
.pointsChoice .pointsRecord{color:#17466e!important}
.targetChoice.active .targetRecord,
.timeChoice.active .timeRecord,
.movesChoice.active .movesRecord,
.pointsChoice.active .pointsRecord{color:#0b7f87!important}
#tutorialCloseTop{
  background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
}


/* =========================================================
   v7.5.0 — ajustes finais: game viewport, áudio e teclado
   ========================================================= */

/* HUD: preservar proporção original, sem deformação */
.homeHudAsset img,
.hudAsset img{
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Ajustes */
.settingsModal,.infoModal{background:#f5fdff!important;color:#17466e!important;border:1px solid rgba(40,132,166,.18)!important}
.settingsHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.settingsHead span{font-size:10px;font-weight:1000;letter-spacing:.16em;color:#1597a3}
.settingsHead h2{margin:2px 0 0!important;color:#17466e!important;font-size:28px!important}
.volumeSetting{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:11px;padding:12px;margin:9px 0;border-radius:17px;background:rgba(255,255,255,.78);border:1px solid rgba(45,139,173,.14)}
.volumeIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:linear-gradient(145deg,#d9f8ff,#effcff);box-shadow:inset 0 0 0 1px rgba(47,143,177,.12)}
.volumeTitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.volumeTitle strong{font-size:13px}.volumeTitle b{font-size:11px;color:#1597a3}
.volumeSlider{width:100%;height:8px;appearance:none;-webkit-appearance:none;border-radius:999px;background:linear-gradient(90deg,#29c8ba var(--vol,70%),rgba(64,133,158,.18) var(--vol,70%));outline:none}
.volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #16a8b2;box-shadow:0 3px 9px rgba(32,107,134,.22)}
.volumeSlider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #16a8b2;box-shadow:0 3px 9px rgba(32,107,134,.22)}
.settingsLinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.languageSetting{display:flex;align-items:center;gap:12px;margin:12px 0 14px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid rgba(45,139,173,.14)}
.languageSetting .volumeMain{flex:1;min-width:0}.languageSetting .volumeTitle{margin-bottom:6px}.nineLanguageSelect{width:100%;height:42px;border-radius:11px;border:1px solid rgba(45,139,173,.28);background:#fff;color:#17466e;font:800 13px/1 system-ui,-apple-system,Segoe UI,Arial,sans-serif;padding:0 34px 0 12px;outline:none}.nineLanguageSelect:focus{border-color:#1597a3;box-shadow:0 0 0 3px rgba(21,151,163,.12)}
.settingsLinks button{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:7px;text-align:left;padding:11px;background:#fff!important;color:#17466e!important;border:1px solid rgba(45,139,173,.14)!important}
.settingsLinks button>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#dff7fb;color:#1597a3;font-weight:1000}
.settingsLinks button div strong{display:block;font-size:12px}.settingsLinks button div small{display:block;font-size:9px;color:#6c899a;margin-top:2px}.settingsLinks button>b{font-size:22px;color:#84a9ba}
.infoModal{max-width:430px!important}.aboutLogo{text-align:center;margin:4px 0 14px}.aboutLogo img{width:min(68%,260px);height:auto}.infoModal p{color:#587a8f!important;line-height:1.55!important}
.aboutFacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.aboutFacts div{padding:11px;border-radius:14px;background:#fff;border:1px solid rgba(45,139,173,.12)}.aboutFacts small{display:block;font-size:9px;color:#7392a4;font-weight:900}.aboutFacts strong{display:block;margin-top:3px;color:#17466e}

/* Desktop com pouca altura útil (~695px): reduzir a largura do tabuleiro,
   pois ele é quadrado e é o elemento que determina a altura total. */
@media (min-width:700px) and (max-height:780px){
  body.nine-playing{overflow:hidden!important}
  body.nine-playing .gamePage{
    width:min(92vw,420px)!important;
    height:100dvh!important;
    padding:3px 0 78px!important;
    overflow:hidden!important;
  }
  body.nine-playing .gameHeaderAssets{margin:0 0 -1px!important}
  body.nine-playing .hudAsset{height:48px!important}
  body.nine-playing .gameMiniTitle{height:34px!important;margin:-2px 0 0!important}
  body.nine-playing .gameMiniTitle img{height:34px!important}
  body.nine-playing .topstats{margin:2px 0!important;gap:5px!important}
  body.nine-playing .stat{padding:4px 3px!important;border-radius:12px!important}
  body.nine-playing .stat b{font-size:17px!important}
  body.nine-playing .statIcon{margin-top:0!important;height:13px!important}
  body.nine-playing .statIcon img{width:16px!important;height:16px!important}
  body.nine-playing .progressWrap{height:4px!important;margin:5px 2px 6px!important}
  body.nine-playing .board{gap:7px!important;padding:7px!important;border-radius:18px!important}
  body.nine-playing .tile{border-radius:13px!important;font-size:clamp(30px,7vh,52px)!important}
  body.nine-playing .actions{margin-top:5px!important;gap:7px!important}
  body.nine-playing .actions button{padding:9px 8px!important;font-size:11px!important}
  body.nine-playing .gameBannerFixed{height:62px!important;min-height:62px!important}
}


/* v7.5.1 — correções Loja / Ajustes */
#closeShop{
  background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
}
#settings:not(.hidden),
#aboutModal:not(.hidden),
#supportModal:not(.hidden){
  display:grid!important;
  z-index:10050!important;
}
#settings .settingsModal{
  position:relative!important;
  z-index:10051!important;
  max-height:min(88dvh,720px)!important;
  overflow:auto!important;
}


/* v7.5.3 — movimento sem zoom visual */
.motionTile{
  transform-origin:center center!important;
}
.motionTile.merging{
  filter:none!important;
}


/* v7.5.6 — gema maior, mais lenta e direcionada ao HUD visível */
.flyingGem{
  width:42px!important;
  height:42px!important;
  transition:left 1.15s cubic-bezier(.18,.78,.26,1),
             top 1.15s cubic-bezier(.18,.78,.26,1),
             transform 1.15s cubic-bezier(.18,.78,.26,1),
             opacity .18s ease!important;
}
.flyingGem.launch{transform:translate(-50%,-50%) scale(1.25)!important}
.flyingGem.arrive{transform:translate(-50%,-50%) scale(.5)!important}


/* v7.5.8 — resultado da rodada */
#gameOver{background:rgba(213,244,252,.92)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.resultScreen{width:min(92vw,470px)!important;max-height:min(94dvh,820px)!important;overflow:auto!important;background:linear-gradient(180deg,#f5fdff 0%,#e9fbff 100%)!important;color:#17466e!important;border:1px solid rgba(48,137,171,.15)!important;border-radius:30px!important;padding:20px!important;box-shadow:0 24px 70px rgba(33,95,124,.24)!important}
.resultScreen.resultWin{background:linear-gradient(180deg,#f7fff3 0%,#ecffe9 100%)!important}
.resultEyebrow{font-size:10px;font-weight:1000;letter-spacing:.16em;color:#1697a4;text-align:center}
.resultScreen.resultWin .resultEyebrow{color:#27a94e}
.resultScreen h2{text-align:center;font-size:36px!important;color:#17466e!important;margin:3px 0 12px!important}
.resultTop{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:10px;min-height:135px}
.resultMascot{width:100%;max-width:150px;max-height:150px;object-fit:contain;justify-self:center;filter:drop-shadow(0 9px 10px rgba(38,105,130,.12))}
.resultXpCard{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 12px;border-radius:22px;background:#fff;box-shadow:0 6px 18px rgba(40,108,138,.08)}
.resultXpCard img{width:56px;height:56px;object-fit:contain}.resultXpCard small{display:block;font-size:9px;font-weight:1000;letter-spacing:.08em;color:#7092a3}.resultXpCard strong{display:block;font-size:42px;line-height:1;color:#17466e}
.resultMotivation{margin:12px 0 10px;padding:13px 15px;border-radius:18px;background:linear-gradient(180deg,#fff4f8,#ffeaf2);color:#17466e;font-size:16px;font-weight:1000;text-align:center;border:1px solid rgba(226,105,145,.16)}
.resultScreen.resultWin .resultMotivation{background:linear-gradient(180deg,#e7fff0,#d8ffea);color:#16733b;border-color:rgba(66,190,111,.18)}
.unlockBanner{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,#fff7bf,#ffe98a);color:#17466e;border:1px solid rgba(218,174,45,.25)}
.unlockBanner .unlockIcon{font-size:34px}.unlockBanner strong{display:block;font-size:16px}.unlockBanner small{display:block;font-size:10px;margin-top:2px;color:#6b6b48}
.gameOverPrimary,.nextLevelButton,.gameOverSecondary{width:100%!important;margin-top:7px!important}
.nextLevelButton{background:linear-gradient(180deg,#43ec62,#16c946)!important;color:#07351a!important}
.gameOverSecondary{background:#fff!important;color:#17466e!important;border:1px solid rgba(47,138,171,.14)!important}
@media(max-height:720px){
  .resultScreen{max-height:96dvh!important;padding:14px!important}
  .resultScreen h2{font-size:30px!important}
  .resultTop{min-height:105px}
  .resultMascot{max-width:115px;max-height:115px}
  .resultXpCard{padding:10px}.resultXpCard img{width:45px;height:45px}.resultXpCard strong{font-size:34px}
  .resultMotivation{padding:10px;font-size:14px}
}


/* v7.5.10 — desbloqueio visual de nível */
.unlockBanner{
  display:block!important;
  margin:10px 0!important;
  padding:12px 14px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fff8c9,#ffe88a)!important;
  color:#17466e!important;
  border:1px solid rgba(218,174,45,.24)!important;
}
.unlockBanner.hidden{display:none!important}
.unlockHeader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:left;
}
.unlockCrown{font-size:34px;filter:drop-shadow(0 3px 3px rgba(174,116,0,.15))}
.unlockHeader strong{display:block;font-size:16px;color:#17466e}
.unlockHeader small{display:block;font-size:10px;color:#675f45;margin-top:1px}
.unlockLevels{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:9px;
  margin-top:10px;
}
.levelPill{
  border-radius:999px;
  padding:8px 10px;
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:0;
  box-shadow:none;
}
.levelPill small{
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
  line-height:1;
  margin-bottom:3px;
}
.levelPill strong{font-size:13px;line-height:1}
.levelCurrent{
  background:#dff2ff;
  color:#245e9b;
  border:1px solid rgba(62,132,197,.13);
}
.levelNext{
  width:100%;
  background:linear-gradient(180deg,#ffe33b,#ffd51f)!important;
  color:#17466e!important;
  border:1px solid rgba(210,164,0,.16)!important;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .16s ease,filter .16s ease;
}
.levelNext:active{transform:translateY(1px) scale(.985)}
.levelNext:hover{filter:brightness(1.03)}
.levelArrow{
  font-size:25px;
  font-weight:1000;
  color:#0e9b70;
}
.unlockHint{
  margin-top:6px;
  text-align:center;
  font-size:9px;
  font-weight:900;
  color:#168948;
}


/* v7.5.11 — benefícios mais visuais */
.quickBoostModal{background:linear-gradient(180deg,#f2fcff,#e8f9ff)!important;color:#17466e!important;border:1px solid rgba(38,133,166,.16)!important;border-radius:28px!important;padding:20px!important}
.quickBoostHead h2{font-size:28px!important;color:#17466e!important}.quickBoostModal>p{color:#6a88a0!important;font-size:12px!important;margin:0 0 14px!important}
.quickBoostGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.quickBoostGrid .benefitCard{position:relative!important;overflow:hidden!important;min-height:220px!important;padding:10px!important;border-radius:22px!important;text-align:center!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 9px 22px rgba(32,105,137,.12)!important;opacity:1!important;display:flex!important;flex-direction:column!important;align-items:center!important}
.quickBoostGrid .benefitCard[data-boost="m5"]{background:linear-gradient(160deg,#22c7c8,#1097ad)!important}
.quickBoostGrid .benefitCard[data-boost="m10"]{background:linear-gradient(160deg,#31b9e6,#2475c8)!important}
.quickBoostGrid .benefitCard[data-boost="l4"]{background:linear-gradient(160deg,#ffcf4c,#f29b20)!important}
.quickBoostGrid .benefitCard[data-boost="l3x3"]{background:linear-gradient(160deg,#c95be0,#8a42c3)!important}
.quickBoostGrid .benefitCard[data-boost="l6"]{background:linear-gradient(160deg,#ff7c45,#e34e55)!important}
.quickBoostGrid .benefitCard[data-boost="t15"]{background:linear-gradient(160deg,#20c5bb,#138ba8)!important}
.quickBoostGrid .benefitCard[data-boost="t30"]{background:linear-gradient(160deg,#4ea2f0,#365bc0)!important}
.quickBoostGrid .benefitCard img{width:100%!important;height:108px!important;object-fit:contain!important;margin:0 auto 5px!important;filter:drop-shadow(0 6px 8px rgba(25,62,81,.18))!important}
.quickBoostGrid .benefitCard strong{color:#fff!important;font-size:15px!important;line-height:1.1!important;margin-top:2px!important;text-shadow:0 2px 3px rgba(0,0,0,.18)!important}
.quickBoostGrid .benefitCard small{color:rgba(255,255,255,.88)!important;font-size:10px!important;line-height:1.3!important;min-height:28px!important;margin:5px 0 9px!important}
.quickBoostGrid .benefitCard .shopBuy{margin-top:auto!important;width:100%!important;min-height:42px!important;border-radius:14px!important;padding:9px 8px!important;font-size:13px!important;font-weight:1000!important}
.quickBoostGrid .benefitCard:not(.noBalance) .shopBuy{background:linear-gradient(180deg,#43ef68,#16c746)!important;color:#07391a!important;border:1px solid rgba(255,255,255,.62)!important;box-shadow:0 4px 0 rgba(7,113,48,.35),0 6px 12px rgba(6,92,38,.16)!important}
.quickBoostGrid .benefitCard.noBalance{filter:saturate(.72)!important}
.quickBoostGrid .benefitCard.noBalance .shopBuy{background:linear-gradient(180deg,#edf2f4,#dce6ea)!important;color:#8aa1ad!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important;cursor:not-allowed!important}
.quickBoostGrid .benefitCard.noBalance small{color:rgba(255,255,255,.8)!important}
@media(max-width:390px){.quickBoostGrid{gap:8px!important}.quickBoostGrid .benefitCard{min-height:200px!important;padding:8px!important}.quickBoostGrid .benefitCard img{height:92px!important}}
@media(max-height:700px){.quickBoostModal{max-height:92dvh!important;overflow:auto!important}}


/* v7.5.12 — usar assets/tiles durante a partida */
.tile.tileAsset{
  background-color:transparent!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  color:transparent!important;
}
.tile.tileAsset::after{display:none!important}

.motionTile.motionAsset{
  background-color:transparent!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  color:transparent!important;
}
.motionTile.motionAsset::after{display:none!important}


/* =========================================================
   v7.5.13 — cards Próxima X–Y montados 100% em HTML/CSS
   ========================================================= */
.quickBoostGrid .benefitCard.tileBenefit{
  padding:0!important;
  min-height:255px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
  border:2px solid rgba(255,255,255,.65)!important;
  box-shadow:0 10px 24px rgba(30,92,120,.16)!important;
  filter:none!important;
}

.tileBenefit .tileBenefitTop{
  width:100%;
  min-height:132px;
  padding:10px 10px 8px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:4px;
  position:relative;
}
.tileBenefit.tile46 .tileBenefitTop{
  background:linear-gradient(145deg,#cf63f2 0%,#7447ec 100%);
}
.tileBenefit.tile35 .tileBenefitTop{
  background:linear-gradient(145deg,#2bdc8c 0%,#00a87f 100%);
}
.tileBenefit.tile67 .tileBenefitTop{
  background:linear-gradient(145deg,#35b8ff 0%,#0878da 100%);
}

.tileBenefit .tileStack{
  position:relative;
  width:122px;
  height:88px;
  margin:auto;
}
.tileBenefit .tileStack img{
  position:absolute!important;
  width:68px!important;
  height:68px!important;
  object-fit:contain!important;
  margin:0!important;
  filter:drop-shadow(0 5px 6px rgba(15,35,60,.28))!important;
}
.tileBenefit .tileStack img:nth-child(1){left:0;top:18px;transform:rotate(-7deg)}
.tileBenefit .tileStack img:nth-child(2){left:34px;top:2px;transform:rotate(4deg)}
.tileBenefit .tileStack img:nth-child(3){left:65px;top:22px;transform:rotate(8deg)}
.tileBenefit.twoTiles .tileStack img:nth-child(1){left:12px;top:16px}
.tileBenefit.twoTiles .tileStack img:nth-child(2){left:58px;top:4px}

.tileBenefit .tileBenefitTitle{
  text-align:center;
  align-self:center;
  color:#fff;
  text-shadow:0 3px 4px rgba(23,45,95,.35);
}
.tileBenefit .tileBenefitTitle small{
  display:block!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  min-height:auto!important;
  margin:0!important;
  line-height:1!important;
}
.tileBenefit .tileBenefitTitle strong{
  display:block!important;
  color:#ffd43a!important;
  font-size:31px!important;
  line-height:.95!important;
  margin:5px 0 0!important;
  text-shadow:
    0 2px 0 #fff,
    0 4px 0 rgba(17,59,117,.45),
    0 6px 8px rgba(0,0,0,.22)!important;
}

.tileBenefit .tileBenefitBody{
  width:100%;
  flex:1 1 auto;
  padding:9px 10px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  background:linear-gradient(180deg,#fbfeff,#edfaff);
}
.tileBenefit.tile46 .tileBenefitBody{background:linear-gradient(180deg,#fffaff,#f2e8ff)}
.tileBenefit.tile35 .tileBenefitBody{background:linear-gradient(180deg,#f8fff7,#eaffdd)}
.tileBenefit.tile67 .tileBenefitBody{background:linear-gradient(180deg,#f8fdff,#e4f5ff)}

.tileBenefit .tileBenefitDesc{
  min-height:50px;
  padding:8px 8px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:11px;
  line-height:1.25;
  font-weight:900;
  color:#17466e;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(55,136,170,.14);
}

.tileBenefit .shopBuy{
  position:relative;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:48px!important;
  border-radius:16px!important;
  font-size:19px!important;
  font-weight:1000!important;
}
.tileBenefit .shopBuy img{
  width:28px!important;
  height:28px!important;
  object-fit:contain!important;
  margin:0!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))!important;
}
.tileBenefit:not(.noBalance) .shopBuy{
  background:linear-gradient(180deg,#4af268,#12bf3d)!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.72)!important;
  box-shadow:0 4px 0 #087b2e,0 6px 12px rgba(6,87,35,.2)!important;
}
.tileBenefit.noBalance .shopBuy{
  background:linear-gradient(180deg,#cdd7de,#aebbc4)!important;
  color:#eaf0f3!important;
  border:2px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.5)!important;
}
.tileBenefit.noBalance .shopBuy img{
  filter:grayscale(1) brightness(1.15) contrast(.75)!important;
}
.tileBenefit .missingBalance{
  display:block;
  text-align:center;
  font-size:10px;
  color:#6a8292;
  font-weight:800;
  margin-top:-2px;
}

@media(max-width:390px){
  .quickBoostGrid .benefitCard.tileBenefit{min-height:230px!important}
  .tileBenefit .tileBenefitTop{min-height:118px}
  .tileBenefit .tileStack{width:105px;height:78px}
  .tileBenefit .tileStack img{width:58px!important;height:58px!important}
  .tileBenefit .tileStack img:nth-child(1){left:0;top:16px}
  .tileBenefit .tileStack img:nth-child(2){left:29px;top:2px}
  .tileBenefit .tileStack img:nth-child(3){left:54px;top:18px}
  .tileBenefit.twoTiles .tileStack img:nth-child(1){left:10px}
  .tileBenefit.twoTiles .tileStack img:nth-child(2){left:49px}
  .tileBenefit .tileBenefitTitle strong{font-size:27px!important}
  .tileBenefit .tileBenefitTitle small{font-size:11px!important}
}


@media(max-width:600px){
  .quickBoostGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .quickBoostGrid .benefitCard.tileBenefit{min-height:235px!important}
  .tileBenefit .tileBenefitTop{
    min-height:126px!important;padding:8px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:4px!important
  }
  .tileBenefit .tileStack{width:118px!important;height:74px!important;margin:0 auto!important;flex:0 0 74px!important}
  .tileBenefit .tileStack img{width:58px!important;height:58px!important}
  .tileBenefit .tileStack img:nth-child(1){left:4px!important;top:14px!important}
  .tileBenefit .tileStack img:nth-child(2){left:32px!important;top:0!important}
  .tileBenefit .tileStack img:nth-child(3){left:58px!important;top:15px!important}
  .tileBenefit.twoTiles .tileStack{width:104px!important}
  .tileBenefit.twoTiles .tileStack img:nth-child(1){left:8px!important;top:13px!important}
  .tileBenefit.twoTiles .tileStack img:nth-child(2){left:45px!important;top:1px!important}

  .tileBenefit .tileBenefitTitle{width:100%!important;text-align:center!important}
  .tileBenefit .tileBenefitTitle small{display:inline!important;font-size:12px!important;margin-right:3px!important}
  .tileBenefit .tileBenefitTitle strong{
    display:inline!important;font-size:23px!important;line-height:1!important;margin:0!important;
    text-shadow:0 1px 0 #fff,0 3px 0 rgba(17,59,117,.38),0 4px 6px rgba(0,0,0,.18)!important
  }

  .tileBenefit .tileBenefitBody{padding:8px!important;gap:6px!important}
  .tileBenefit .tileBenefitDesc{min-height:52px!important;padding:7px 6px!important;font-size:10px!important;line-height:1.2!important;border-radius:14px!important}
  .tileBenefit .shopBuy{min-height:42px!important;font-size:16px!important;border-radius:14px!important}
  .tileBenefit .shopBuy img{width:24px!important;height:24px!important}

  .quickBoostGrid .benefitCard:not(.tileBenefit){min-height:205px!important;padding:10px!important}
  .quickBoostGrid .benefitCard:not(.tileBenefit)>img{height:140px!important;margin-bottom:2px!important}
  .quickBoostGrid .benefitCard:not(.tileBenefit) small{min-height:26px!important;margin:3px 0 6px!important}
}
@media(max-width:380px){
  .quickBoostGrid{gap:8px!important}
  .quickBoostGrid .benefitCard.tileBenefit{min-height:220px!important}
  .tileBenefit .tileBenefitTop{min-height:116px!important}
  .tileBenefit .tileStack{width:104px!important;height:68px!important;flex-basis:68px!important}
  .tileBenefit .tileStack img{width:52px!important;height:52px!important}
  .tileBenefit .tileBenefitTitle small{font-size:11px!important}
  .tileBenefit .tileBenefitTitle strong{font-size:21px!important}
}


/* v7.5.17 — anúncio recompensado no mesmo padrão dos cards da Mina */
.mineRewardOnly{
  display:block!important;
  margin:14px 0 18px!important;
}
.mineRewardOnly .benefitCard{
  width:min(100%,340px)!important;
  margin:0 auto!important;
  min-height:360px!important;
  padding:14px!important;
  border-radius:24px!important;
  background:linear-gradient(160deg,#28c6c8 0%,#128ba6 100%)!important;
  border:2px solid rgba(255,255,255,.55)!important;
  box-shadow:0 10px 24px rgba(31,102,135,.16)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  overflow:hidden!important;
}
.mineRewardOnly .benefitCard .rewardTitle{
  color:#fff!important;
  font-size:22px!important;
  font-weight:1000!important;
  text-shadow:0 2px 3px rgba(0,0,0,.18)!important;
  margin:0 0 8px!important;
}
.mineRewardOnly .rewardVisual{
  width:100%;
  height:165px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
}
.mineRewardOnly .rewardPlay{
  width:82px;
  height:82px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  display:grid;
  place-items:center;
  color:#1597c8;
  font-size:42px;
  box-shadow:0 7px 16px rgba(24,80,112,.18);
}
.mineRewardOnly .rewardGem{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}
.mineRewardOnly .rewardGem img{
  width:88px!important;
  height:88px!important;
  object-fit:contain!important;
  margin:0!important;
  filter:drop-shadow(0 7px 10px rgba(19,72,45,.2))!important;
}
.mineRewardOnly .rewardGem strong{
  color:#fff!important;
  font-size:44px!important;
  line-height:1!important;
  text-shadow:0 3px 4px rgba(0,0,0,.2)!important;
}
.mineRewardOnly .benefitCard .rewardLabel{
  color:#fff!important;
  font-size:14px!important;
  font-weight:1000!important;
  letter-spacing:.04em;
  margin:0 0 8px!important;
}
.mineRewardOnly .benefitCard .rewardDesc{
  color:rgba(255,255,255,.9)!important;
  font-size:11px!important;
  line-height:1.35!important;
  margin:0 0 14px!important;
  min-height:42px!important;
}
.mineRewardOnly .benefitCard .shopBuy{
  width:100%!important;
  margin-top:auto!important;
  min-height:48px!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#49ef69,#16c746)!important;
  color:#07391a!important;
  border:2px solid rgba(255,255,255,.72)!important;
  box-shadow:0 4px 0 #087c2e,0 6px 12px rgba(6,91,36,.18)!important;
  font-size:14px!important;
  font-weight:1000!important;
}
@media(max-width:420px){
  .mineRewardOnly .benefitCard{
    width:min(100%,300px)!important;
    min-height:330px!important;
  }
  .mineRewardOnly .rewardVisual{height:145px}
  .mineRewardOnly .rewardPlay{width:70px;height:70px;font-size:36px}
  .mineRewardOnly .rewardGem img{width:76px!important;height:76px!important}
  .mineRewardOnly .rewardGem strong{font-size:38px!important}
}


/* v7.5.18 — assinatura Aggio Games */
#gameSplash .aggioSplashBrand{
  width:min(34vw,170px);
  max-width:170px;
  min-width:105px;
  margin-top:12px;
  opacity:.9;
}
@media(max-height:700px){
  #gameSplash .aggioSplashBrand{width:min(28vw,135px);margin-top:8px}
}


.aboutAggio{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.aboutAggio span{
  font-size:11px;
  font-weight:800;
  color:#6f8da0;
}
.aboutAggio a{display:inline-flex}
.aboutAggio img{
  width:150px;
  max-width:70vw;
  height:auto;
}


/* v7.5.19 — Aggio Games visível no splash e Sobre */
#gameSplash .aggioSplashBrand{
  display:block!important;
  flex:0 0 auto;
  width:min(34vw,170px)!important;
  min-width:105px;
  height:auto!important;
  margin-top:0!important;
  opacity:.88!important;
  object-fit:contain;
}
.aboutAggio{
  padding-top:14px;
  border-top:1px solid rgba(45,139,173,.12);
}
.aboutAggio img{
  display:block!important;
  width:150px!important;
  height:auto!important;
}


/* v1.0.0 — assinatura discreta no carregamento */
#gameSplash .aggioSplashBrand{
  opacity:.16!important;
  filter:saturate(.55)!important;
}


/* App nativo: respeita recortes/status/navigation bars sem mudar a cópia Web original.
   Capacitor 8 injeta --safe-area-inset-* no Android moderno; usamos como fallback
   porque alguns Android WebViews não reportam env(safe-area-inset-*) corretamente. */
html[data-nine-platform="android"] body,html[data-nine-platform="ios"] body{
  padding-top:max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  padding-left:max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  padding-right:max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
  padding-bottom:max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}
html[data-nine-platform="android"] .gameBannerFixed,html[data-nine-platform="ios"] .gameBannerFixed{
  bottom:max(10px, env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}

/* =========================================================
   APP v0.3 — fullscreen Android + Home sem rolagem fantasma
   ========================================================= */
html[data-nine-platform="android"] #menu,
html[data-nine-platform="ios"] #menu{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}

html[data-nine-platform="android"] #menu .homeScreen,
html[data-nine-platform="ios"] #menu .homeScreen{
  box-sizing:border-box!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overscroll-behavior:none;
  scrollbar-width:none;
}
html[data-nine-platform="android"] #menu .homeScreen::-webkit-scrollbar,
html[data-nine-platform="ios"] #menu .homeScreen::-webkit-scrollbar{
  display:none;
}

/* Em alturas normais o conteúdo cabe: trava a Home sem deslocamento vertical.
   Se uma tela realmente baixa precisar, o media query abaixo libera rolagem. */
@media (min-height:720px){
  html[data-nine-platform="android"] #menu .homeScreen,
  html[data-nine-platform="ios"] #menu .homeScreen{
    overflow-y:hidden!important;
  }
}

@media (max-height:719px){
  html[data-nine-platform="android"] #menu .homeScreen,
  html[data-nine-platform="ios"] #menu .homeScreen{
    overflow-y:auto!important;
  }
}

/* Tutorial/Mina começam naturalmente no topo após ocultar a status bar. */
html[data-nine-platform="android"] .tutorialPage,
html[data-nine-platform="android"] .shopPage,
html[data-nine-platform="ios"] .tutorialPage,
html[data-nine-platform="ios"] .shopPage{
  padding-top:max(10px,env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px))!important;
}


/* =========================================================
   Gem Streak + Conquistas
   ========================================================= */
.homeQuickTools{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.homeToolSvg{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 6px;border-radius:16px;background:linear-gradient(180deg,#f8feff,#dcf8ff);border:1px solid rgba(45,139,173,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 6px 14px rgba(31,124,158,.10)}
.homeToolSvg svg{width:36px;height:36px;display:block;filter:drop-shadow(0 5px 7px rgba(24,89,127,.15))}
#achievements{background:rgba(218,247,255,.98)!important;color:#17466e!important}
.achievementsPage{min-height:100%;padding:18px 18px 24px;overflow:auto}
.achievementsHero{background:rgba(255,255,255,.82);border:1px solid rgba(49,140,183,.18);border-radius:26px;padding:18px 18px 16px;display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;position:relative;box-shadow:0 10px 26px rgba(57,132,165,.12);margin-bottom:18px}
.achievementsHero .roundBack{position:absolute;left:12px;top:12px}
.achievementsHeroIcon{width:74px;height:74px;border-radius:20px;background:linear-gradient(180deg,#f7fdff,#e2fbff);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(47,143,177,.12),0 6px 18px rgba(31,124,158,.10);margin-left:46px}
.achievementsHeroIcon svg{width:58px;height:58px;display:block}
.achievementsHeroText span{display:block;font-size:11px;font-weight:1000;letter-spacing:.16em;color:#1597a3}
.achievementsHeroText h2{margin:4px 0 6px!important;font-size:34px!important;color:#17466e!important;line-height:.95}
.achievementsHeroText p{margin:0!important;color:#587a98;font-size:16px!important;line-height:1.18!important}
.achievementsList{display:grid;gap:12px}
.achievementCard{display:grid;grid-template-columns:84px 1fr;gap:14px;background:rgba(255,255,255,.84);border:1px solid rgba(49,140,183,.16);border-radius:22px;padding:14px;align-items:center;box-shadow:0 8px 22px rgba(57,132,165,.10)}
.achievementBadge{display:grid;place-items:center}
.achievementBadgeInner{width:72px;height:72px;border-radius:20px;background:linear-gradient(180deg,#effcff,#dbf7ff);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(47,143,177,.12)}
.achievementBadgeInner svg{width:52px;height:52px;display:block}
.achievementCard.locked{filter:grayscale(.5) saturate(.72);opacity:.78}
.achievementCard.unlocked{border-color:rgba(58,165,88,.25);box-shadow:0 10px 24px rgba(34,148,84,.12)}
.achievementTitleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.achievementTitleRow h3{margin:0!important;font-size:22px!important;color:#17466e!important;line-height:1.04}
.achievementStatus{font-size:12px;font-weight:1000;white-space:nowrap;color:#4e7490}
.achievementCard.unlocked .achievementStatus{color:#1f9657}
.achievementDesc{margin:6px 0 10px!important;color:#5d7c97;font-size:15px!important;line-height:1.24!important}
.achievementMeta{font-size:13px;font-weight:900;color:#1f9657}
.achievementProgressTop{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:900;color:#4d7490}
.achievementProgressTop strong{font-size:13px;color:#17466e}
.achievementBar{height:9px;border-radius:999px;background:rgba(31,126,161,.11);overflow:hidden;margin-top:6px}
.achievementBar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#36dccb,#2ca3ff)}
.achievementToast{position:fixed;left:50%;top:84px;transform:translate(-50%,-14px);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);color:#17466e;border:1px solid rgba(49,140,183,.18);border-radius:20px;padding:12px 15px;box-shadow:0 16px 32px rgba(24,86,120,.22);opacity:0;transition:transform .25s ease,opacity .25s ease;z-index:100700;pointer-events:none;max-width:min(92vw,420px)}
.achievementToast.show{opacity:1;transform:translate(-50%,0)}
.achievementToastIcon{width:42px;height:42px;display:grid;place-items:center;flex:none}
.achievementToastIcon svg{width:40px;height:40px;display:block}
.achievementToastCopy span{display:block;font-size:11px;font-weight:1000;letter-spacing:.12em;color:#1597a3}
.achievementToastCopy strong{display:block;margin-top:1px;font-size:18px;line-height:1.05}
.gemStreakFlying{object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.30)) drop-shadow(0 0 12px rgba(85,255,220,.55));will-change:transform,opacity}
@media (max-width:430px){
  .homeQuickTools{gap:6px}
  .homeTool span{font-size:12px}
  .homeToolSvg{width:52px;height:52px}
  .homeToolSvg svg{width:33px;height:33px}
  .achievementsHero{grid-template-columns:78px 1fr}
  .achievementsHeroIcon{width:68px;height:68px}
  .achievementCard{grid-template-columns:74px 1fr}
  .achievementBadgeInner{width:64px;height:64px}
  .achievementTitleRow h3{font-size:19px!important}
}



/* =========================================================
   v7.5.7 — correções Home 5 itens + rolagem Conquistas
   ========================================================= */
/* Os cinco atalhos da Home permanecem sempre na mesma linha. */
#menu .homeQuickTools{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:4px!important;
}
#menu .homeTool{
  min-width:0!important;
}
#menu .homeTool span{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* A própria camada de Conquistas é a área rolável.
   Isso funciona de forma consistente no navegador e na WebView Android. */
#achievements{
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y!important;
  padding:0!important;
}
#achievements .achievementsPage{
  width:min(94vw,560px)!important;
  min-height:100dvh!important;
  height:auto!important;
  margin:0 auto!important;
  padding:14px 0 calc(30px + env(safe-area-inset-bottom,0px))!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
#achievements .achievementsHero{
  margin-left:0!important;
  margin-right:0!important;
}
#achievements .achievementsList{
  padding-bottom:4px;
}

@media(max-width:430px){
  #menu .homeQuickTools{gap:2px!important;padding-left:5px!important;padding-right:5px!important}
  #menu .homeTool{padding-left:0!important;padding-right:0!important}
  #menu .homeTool img{width:31px!important;height:31px!important}
  #menu .homeToolSvg{width:44px!important;height:44px!important;margin-bottom:3px!important}
  #menu .homeToolSvg svg{width:30px!important;height:30px!important}
  #menu .homeTool span{font-size:8px!important}
}



/* =========================================================
   v7.6 — Ajustes padronizados + Easter Egg de telemetria
   ========================================================= */
#settings{
  align-items:flex-start!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding-top:max(12px,env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px))!important;
  padding-bottom:max(18px,env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px))!important;
}
#settings .settingsModal{
  position:relative;
  width:min(94vw,540px)!important;
  margin:0 auto 18px!important;
}
.settingsHeadMain{
  display:block!important;
  position:relative;
  text-align:center;
  margin-bottom:14px!important;
  min-height:138px;
}
.settingsHeadMain .miniClose{
  position:absolute;
  right:0;
  top:0;
  z-index:3;
}
.settingsTitleBlock{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:0 58px;
}
.settingsMascotEgg{
  display:block;
  width:min(178px,44vw);
  height:102px;
  object-fit:contain;
  object-position:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:manipulation;
  filter:drop-shadow(0 8px 12px rgba(31,105,137,.14));
  transition:transform .12s ease,filter .12s ease;
}
.settingsMascotEgg:active{
  transform:scale(.95);
  filter:drop-shadow(0 4px 7px rgba(31,105,137,.12));
}
.settingsHeadMain h2{
  margin:1px 0 0!important;
  color:#17466e!important;
  font-size:30px!important;
  line-height:1!important;
}

#telemetryModal{
  z-index:120!important;
  align-items:flex-start!important;
  overflow-y:auto!important;
  padding-top:max(12px,env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px))!important;
  padding-bottom:max(18px,env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px))!important;
  background:rgba(218,247,255,.96)!important;
}
.telemetryModalCard{
  width:min(94vw,520px)!important;
  margin:0 auto!important;
  background:#f5fdff!important;
  color:#17466e!important;
  border:1px solid rgba(40,132,166,.18)!important;
  box-shadow:0 22px 60px rgba(40,92,120,.22)!important;
}
.telemetryIntro{
  margin:0 0 12px!important;
  color:#66889b!important;
  font-size:12px!important;
}
.telemetryGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 14px;
}
.telemetryStat{
  padding:11px 12px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(45,139,173,.13);
  text-align:left;
}
.telemetryStat small{
  display:block;
  color:#7694a5;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.telemetryStat strong{
  display:block;
  color:#17466e;
  font-size:22px;
  margin-top:2px;
}
.telemetryModesTitle{
  margin:15px 0 8px;
  font-size:13px;
  color:#1597a3;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.telemetryModes{
  display:grid;
  gap:7px;
}
.telemetryModeRow{
  display:grid;
  grid-template-columns:1.2fr repeat(3,.8fr);
  gap:5px;
  align-items:center;
  padding:9px 10px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(45,139,173,.12);
  font-size:11px;
  color:#5d7f93;
}
.telemetryModeRow.header{
  background:transparent;
  border:0;
  padding:0 10px 3px;
  font-size:9px;
  font-weight:1000;
  text-transform:uppercase;
  color:#7896a6;
}
.telemetryModeRow b{color:#17466e}
.telemetryEmpty{
  padding:16px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(45,139,173,.13);
  color:#66889b;
  text-align:center;
  font-size:13px;
}
@media(max-width:390px){
  .settingsHeadMain{min-height:126px}
  .settingsMascotEgg{height:92px}
  .settingsTitleBlock{padding:0 48px}
  .telemetryModeRow{grid-template-columns:1.1fr repeat(3,.75fr);font-size:10px;padding:8px 7px}
}



/* =========================================================
   v7.7 — Conquistas: botão protagonista + cabeçalho fluido/safe-area
   ========================================================= */
/* A barra inferior mantém todos os rótulos alinhados pelo rodapé.
   O atalho Conquistas pode saltar para fora da barra, no estilo de um botão principal. */
#menu .homeQuickTools{
  overflow:visible!important;
  align-items:end!important;
}
#menu #achievementsBtn{
  align-self:end!important;
  justify-content:flex-end!important;
  overflow:visible!important;
  position:relative!important;
  z-index:3!important;
  min-height:58px!important;
}
#menu #achievementsBtn .homeToolSvg{
  width:64px!important;
  height:64px!important;
  margin:-28px auto 3px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#ffffff,#e7fbff)!important;
  border:2px solid rgba(255,255,255,.85)!important;
  box-shadow:0 9px 20px rgba(34,104,138,.20),inset 0 0 0 1px rgba(45,139,173,.10)!important;
}
#menu #achievementsBtn .homeToolSvg svg{
  width:43px!important;
  height:43px!important;
}

/* A camada inteira continua rolável; o topo ganha folga real para câmera/notch. */
#achievements .achievementsPage{
  padding-top:max(
    42px,
    calc(env(safe-area-inset-top,0px) + 18px),
    calc(var(--safe-area-inset-top,0px) + 18px)
  )!important;
  padding-bottom:max(
    22px,
    calc(env(safe-area-inset-bottom,0px) + 18px),
    calc(var(--safe-area-inset-bottom,0px) + 18px)
  )!important;
}

/* Cabeçalho deixa de parecer o primeiro card. */
#achievements .achievementsHero{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:4px 2px 14px 58px!important;
  min-height:140px!important;
  display:block!important;
  position:relative!important;
  margin:0 0 12px!important;
}
#achievements .achievementsHeroIcon{
  width:72px!important;
  height:72px!important;
  margin:0 12px 0 0!important;
  float:left!important;
  border-radius:19px!important;
}
#achievements .achievementsHeroIcon svg{
  width:52px!important;
  height:52px!important;
}
#achievements .achievementsHeroText{
  padding-top:2px!important;
  text-align:left!important;
}
#achievements .achievementsHeroText h2{
  margin:2px 0 4px!important;
}
#achievements .achievementsHeroText p{
  margin:0!important;
}

/* Mesmo botão voltar visual da Mina. */
#achievementsCloseTop{
  position:absolute!important;
  left:0!important;
  top:3px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
  background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  z-index:5!important;
}

/* Voltar final é apenas uma ação textual, sem faixa/fundo escuro. */
#achievementsDone{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  color:#17466e!important;
  text-shadow:none!important;
  height:auto!important;
  min-height:44px!important;
  margin:10px 0 0!important;
  padding:11px!important;
}

/* Telemetria por nível */
.telemetryLevelsTitle{
  margin:18px 0 8px;
  color:#1597a3;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.telemetryLevels{
  display:grid;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
}
.telemetryLevelRow{
  min-width:430px;
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr .8fr;
  gap:6px;
  align-items:center;
  padding:8px 10px;
  border-radius:13px;
  background:#fff;
  border:1px solid rgba(45,139,173,.12);
  color:#66889b;
  font-size:10px;
}
.telemetryLevelRow b{color:#17466e;font-size:11px}
.telemetryLevelRow.header{
  background:transparent;
  border:0;
  padding-top:2px;
  padding-bottom:2px;
  color:#7694a5;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@media(max-width:430px){
  #menu #achievementsBtn .homeToolSvg{
    width:58px!important;
    height:58px!important;
    margin-top:-24px!important;
  }
  #menu #achievementsBtn .homeToolSvg svg{width:39px!important;height:39px!important}
  #achievements .achievementsHero{
    padding-left:54px!important;
  }
  #achievements .achievementsHeroIcon{
    width:64px!important;
    height:64px!important;
  }
  #achievements .achievementsHeroText h2{font-size:31px!important}
  #achievements .achievementsHeroText p{font-size:14px!important}
}



/* =========================================================
   v7.7.1 — bloqueio de zoom sem bloquear rolagem
   ========================================================= */
/* Permite pan/scroll, mas não oferece pinch-zoom ao navegador/WebView. */
html,body{
  touch-action:pan-x pan-y;
  -ms-touch-action:pan-x pan-y;
}
/* O tabuleiro continua recebendo o gesto exclusivo do jogo. */
#board,.board{
  touch-action:none!important;
  -ms-touch-action:none!important;
}


/* =========================================================
   v7.7.4 — tutorial inicial + cabeçalhos limpos + Mina compacta + imagens + teclado
   ========================================================= */
/* Conquista desbloqueada já é identificada pela cor e pela data. */
.achievementCard.unlocked .achievementStatus{display:none!important}

/* Mina e Como Jogar seguem o cabeçalho fluido de Conquistas. */
#shop .shopPage,#tutorial .tutorialPage{
  padding-top:max(42px,calc(env(safe-area-inset-top,0px) + 18px),calc(var(--safe-area-inset-top,0px) + 18px))!important;
  padding-bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 18px),calc(var(--safe-area-inset-bottom,0px) + 18px))!important;
}
#shop .shopHero,#tutorial .tutorialHero{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  min-height:140px!important;
  padding:4px 92px 14px 58px!important;
  margin:0 0 8px!important;
  overflow:visible!important;
  display:block!important;
  position:relative!important;
}
#shop .shopHero:after{display:none!important}
#shop .shopHero>img,#tutorial .tutorialHero>img{
  width:76px!important;
  height:76px!important;
  right:4px!important;
  bottom:8px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 6px 9px rgba(31,105,137,.12));
}
#shop .shopHero h2,#tutorial .tutorialHero h2{
  margin:7px 0 4px!important;
  font-size:32px!important;
  line-height:1!important;
  color:#17466e!important;
}
#shop .shopHero p{margin:0!important;color:#587a98!important;font-size:13px!important;line-height:1.2!important}
#closeShop,#tutorialCloseTop{
  position:absolute!important;
  left:0!important;
  top:3px!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
  background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  z-index:5!important;
}
#tutorial .tutorialHero{padding-right:92px!important}

/* Mina: pacotes compactos, o card inteiro é a ação. */
#shop .packageGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
#shop .packageCard{
  min-height:146px!important;
  aspect-ratio:auto!important;
  padding:9px 8px 10px!important;
  border-radius:18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  cursor:pointer!important;
  user-select:none!important;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,filter .12s ease!important;
}
#shop .packageCard:active{transform:scale(.97)!important;filter:brightness(.96)!important}
#shop .packageCard:before{opacity:.65!important}
/* As ilustrações dos pacotes permanecem; somente o botão interno foi removido. */
#shop .packageCard button{display:none!important}
#shop .packageCard img{
  display:block!important;
  width:min(82%,92px)!important;
  height:72px!important;
  object-fit:contain!important;
  margin:0 auto 1px!important;
  position:relative!important;
  z-index:1!important;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.22))!important;
}
#shop .packageCard .packTag{
  position:static!important;
  padding:0!important;
  margin:0!important;
  font-size:12px!important;
  line-height:1.05!important;
  letter-spacing:.04em!important;
}
#shop .packageCard strong{
  display:block!important;
  font-size:19px!important;
  line-height:1.05!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}
#shop .packageCard small{
  display:inline!important;
  font-size:9px!important;
  letter-spacing:.08em!important;
  margin:0!important;
}
@media(min-width:500px){
  #shop .packageGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #shop .packageCard{min-height:142px!important;padding-left:6px!important;padding-right:6px!important}
  #shop .packageCard img{width:min(88%,86px)!important;height:68px!important}
}
#shopPackageStatus{min-height:16px;margin:7px 2px 0;text-align:center;color:#6a8798;font-size:10px;font-weight:800}

/* Vídeo recompensado: sem botão interno; o card inteiro é clicável e compacto. */
.mineRewardOnly{margin:10px 0 14px!important}
.mineRewardOnly .benefitCard{
  width:min(100%,330px)!important;
  min-height:178px!important;
  padding:12px!important;
  border-radius:20px!important;
  cursor:pointer!important;
  justify-content:center!important;
  transition:transform .12s ease,filter .12s ease!important;
}
.mineRewardOnly .benefitCard:active{transform:scale(.985)!important;filter:brightness(.97)!important}
.mineRewardOnly .benefitCard .rewardTitle{font-size:17px!important;margin:0 0 5px!important}
.mineRewardOnly .rewardVisual{height:80px!important;gap:10px!important}
.mineRewardOnly .rewardPlay{width:54px!important;height:54px!important;border-radius:16px!important;font-size:28px!important}
.mineRewardOnly .rewardGem img{width:54px!important;height:54px!important}
.mineRewardOnly .rewardGem strong{font-size:30px!important}
.mineRewardOnly .benefitCard .rewardLabel{font-size:11px!important;margin:0 0 3px!important}
.mineRewardOnly .benefitCard .rewardDesc{font-size:10px!important;min-height:0!important;margin:0!important}
.mineRewardOnly .benefitCard .shopBuy{display:none!important}

/* Primeira partida — tutorial interativo obrigatório. */
#firstPlayTutorial{
  z-index:135!important;
  align-items:flex-start!important;
  overflow-y:auto!important;
  background:rgba(218,247,255,.98)!important;
  padding:max(18px,calc(env(safe-area-inset-top,0px) + 14px),calc(var(--safe-area-inset-top,0px) + 14px)) 14px max(20px,env(safe-area-inset-bottom,0px))!important;
  color:#17466e!important;
}
.firstPlayTutorialPage{
  width:min(94vw,520px);
  min-height:calc(100dvh - 48px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
}
.firstPlayTutorialHead{text-align:center;margin:0 8px 10px}
.firstPlayTutorialHead .demoStep{display:block;color:#1597a3;font-size:10px;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}
.firstPlayTutorialHead h2{margin:4px 0 4px!important;color:#17466e!important;font-size:29px!important;line-height:1.05}
.firstPlayTutorialHead p{margin:0!important;color:#63849a!important;font-size:13px!important;line-height:1.35!important}
.firstPlayBoardWrap{position:relative;width:min(88vw,430px);margin:8px auto 10px;touch-action:none!important;user-select:none;-webkit-user-select:none}
.firstPlayBoard{
  position:relative;
  width:100%;
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:8px;
  padding:8px;
  border-radius:24px;
  background:#0a234d;
  box-shadow:0 14px 34px rgba(32,97,128,.18),inset 0 0 0 1px rgba(255,255,255,.18);
  overflow:hidden;
}
.firstPlaySlot{border-radius:17px;background:#0b2b59;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.firstPlayDemoTile{
  position:absolute;
  z-index:5;
  border-radius:17px;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.18));
  transition:left .43s cubic-bezier(.2,.82,.28,1),top .43s cubic-bezier(.2,.82,.28,1),opacity .16s ease,transform .18s ease;
  pointer-events:none;
}
.firstPlayDemoTile.mergeOut{opacity:0;transform:scale(.72)}
.firstPlayResultTile{animation:firstPlayResult .4s ease-out}
@keyframes firstPlayResult{0%{transform:scale(.45);opacity:.2}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.firstPlayArrow{
  position:absolute;
  z-index:20;
  left:50%;top:50%;
  width:78px;height:78px;
  margin:-39px 0 0 -39px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#16aeb8;
  box-shadow:0 8px 24px rgba(19,105,139,.24);
  font-size:52px;font-weight:1000;
  pointer-events:none;
}
.firstPlayArrow.right{animation:demoArrowRight 1.05s ease-in-out infinite alternate}
.firstPlayArrow.left{animation:demoArrowLeft 1.05s ease-in-out infinite alternate}
.firstPlayArrow.up{animation:demoArrowUp 1.05s ease-in-out infinite alternate}
.firstPlayArrow.down{animation:demoArrowDown 1.05s ease-in-out infinite alternate}
.firstPlayArrow.left span{transform:rotate(180deg)}
.firstPlayArrow.up span{transform:rotate(-90deg)}
.firstPlayArrow.down span{transform:rotate(90deg)}
@keyframes demoArrowRight{from{translate:-34px 0}to{translate:34px 0}}
@keyframes demoArrowLeft{from{translate:34px 0}to{translate:-34px 0}}
@keyframes demoArrowUp{from{translate:0 34px}to{translate:0 -34px}}
@keyframes demoArrowDown{from{translate:0 -34px}to{translate:0 34px}}
.firstPlayArrow.wrong{animation:demoWrong .32s ease!important}
@keyframes demoWrong{0%,100%{scale:1}30%{scale:.86}65%{scale:1.12}}
.firstPlayEffect{
  position:absolute;z-index:25;left:50%;top:50%;translate:-50% -50%;
  max-width:88%;padding:9px 14px;border-radius:15px;background:rgba(5,42,82,.92);color:#fff;
  font-size:16px;font-weight:1000;text-align:center;box-shadow:0 7px 20px rgba(0,0,0,.22);opacity:0;pointer-events:none;
}
.firstPlayEffect.show{animation:demoEffect 1s ease forwards}
@keyframes demoEffect{0%{opacity:0;scale:.7}16%,72%{opacity:1;scale:1}100%{opacity:0;scale:.94}}
.firstPlayHint{text-align:center;min-height:56px;padding:2px 12px}
.firstPlayHint strong{display:block;color:#17466e;font-size:16px}
.firstPlayHint span{display:block;color:#6c8b9d;font-size:11px;margin-top:4px}
.firstPlayHint.tryAgain strong{color:#d35f52}
.firstPlayDone{
  width:min(94vw,460px);margin:auto;text-align:center;padding:18px 18px 24px;
}
.firstPlayDone img{display:block;width:min(240px,58vw);height:220px;object-fit:contain;margin:0 auto -6px;filter:drop-shadow(0 10px 14px rgba(35,105,139,.16))}
.firstPlayDone h2{color:#17466e!important;font-size:34px!important;margin:0 0 8px!important}
.firstPlayDone p{color:#63849a!important;margin:0 0 18px!important;font-size:14px!important}
.firstPlayDone button{width:min(100%,340px);margin:0 auto;display:block;font-size:18px;padding:15px}
@media(max-width:390px){
  #shop .shopHero,#tutorial .tutorialHero{padding-right:78px!important}
  #shop .shopHero>img,#tutorial .tutorialHero>img{width:66px!important;height:66px!important}
  #shop .packageCard{min-height:88px!important}
  .firstPlayTutorialPage{justify-content:flex-start;padding-top:8px}
  .firstPlayBoardWrap{width:min(90vw,370px)}
  .firstPlayArrow{width:68px;height:68px;margin:-34px 0 0 -34px;font-size:45px}
  .firstPlayDone img{height:190px}
}



/* =========================================================
   v7.7.5 — seleção de níveis sempre rolável
   A Home principal continua travada; ao escolher um modo, a
   área de conteúdo passa a aceitar wheel/trackpad/toque.
   ========================================================= */
#menu.mode-selected{
  overflow:hidden!important;
}
#menu.mode-selected .homeScreen{
  box-sizing:border-box!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y!important;
  scrollbar-width:thin;
  padding-bottom:max(126px,calc(108px + env(safe-area-inset-bottom,0px)),calc(108px + var(--safe-area-inset-bottom,0px)))!important;
}
#menu.mode-selected #choices{
  overflow:visible!important;
  padding-bottom:24px!important;
}
/* Mesmo em telas altas/desktop, o estado de níveis prevalece
   sobre as regras que removem a rolagem da Home. */
@media (min-height:720px){
  #menu.mode-selected .homeScreen{overflow-y:auto!important}
}
@media (min-width:700px) and (max-height:760px){
  #menu.mode-selected .homeScreen{overflow-y:auto!important}
}


/* =========================================================
   v7.7.6 — economia de gemas douradas + níveis progressivos
   Gemas verdes = gameplay; douradas = personalização.
   As artes dos pacotes ainda são provisórias e serão refeitas.
   ========================================================= */
#shop .shopWallets{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:4px 0 14px!important;
}
#shop .shopWallets .shopWallet{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:7px 11px!important;
  justify-content:flex-start!important;
  border-radius:17px!important;
  box-shadow:0 7px 18px rgba(31,105,137,.10)!important;
}
#shop .shopWallets .shopWallet img{width:34px!important;height:34px!important;flex:0 0 34px}
#shop .shopWallets .shopWallet small{font-size:8px!important}
#shop .shopWallets .shopWallet strong{font-size:20px!important}
#shop .greenWallet{background:linear-gradient(180deg,#0d5b58,#094743)!important;border-color:rgba(78,240,139,.62)!important}
#shop .goldWallet{background:linear-gradient(180deg,#735612,#4c3809)!important;border-color:rgba(255,215,83,.78)!important}
.goldGemIcon{filter:sepia(1) saturate(5) hue-rotate(350deg) brightness(1.14) contrast(1.04) drop-shadow(0 0 7px rgba(255,205,56,.42))!important}

.gemConversionIntro{
  margin:-2px 2px 8px;
  color:#66879a;
  font-size:11px;
  line-height:1.35;
  text-align:left;
}
.gemConversionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gemConversionCard{
  min-height:78px;
  padding:8px 7px;
  border:1px solid rgba(40,149,177,.20);
  border-radius:17px;
  background:rgba(255,255,255,.74);
  box-shadow:0 6px 16px rgba(33,109,137,.07);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:4px;
  cursor:pointer;
  color:#17466e;
  -webkit-tap-highlight-color:transparent;
}
.gemConversionCard:active{transform:scale(.98)}
.gemConversionCard.noBalance{opacity:.46;filter:grayscale(.22);cursor:not-allowed}
.gemConversionSide{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.gemConversionSide img{width:30px;height:30px;object-fit:contain}
.gemConversionSide strong{font-size:15px;line-height:1.05;margin-top:1px}
.gemConversionSide small{font-size:7px;font-weight:1000;letter-spacing:.06em;color:#6f8b9d}
.gemConversionArrow{font-size:18px;font-weight:1000;color:#d3a21d}
#gemConversionStatus{min-height:16px;margin:6px 2px 0;text-align:center;color:#6a8798;font-size:10px;font-weight:800}

/* Os pacotes Punhado→Cofre passam a representar a moeda dourada.
   O filtro é somente provisório enquanto as artes definitivas não chegam. */
#shop .packageCard.goldPackage img{
  filter:sepia(1) saturate(4.8) hue-rotate(350deg) brightness(1.12) contrast(1.03) drop-shadow(0 6px 5px rgba(0,0,0,.22))!important;
}
#shop .packageCard.goldPackage small{color:#fff4ba!important}
#shop .goldShopNote{border-color:rgba(231,182,40,.36)!important;background:rgba(80,57,5,.82)!important}
#shop .goldShopNote img{filter:sepia(1) saturate(5) hue-rotate(350deg) brightness(1.14) contrast(1.04)!important}
@media(max-width:390px){
  #shop .shopWallets{gap:6px}
  #shop .shopWallets .shopWallet{padding:6px 8px!important}
  .gemConversionCard{min-height:72px;padding:7px 5px}
  .gemConversionSide img{width:27px;height:27px}
}


/* =========================================================
   v7.7.7 — skins de lajotas / primeira skin Dominó
   ========================================================= */
.tileSkinIntro{margin:-2px 2px 8px;color:#66879a;font-size:11px;line-height:1.35;text-align:left}
.tileSkinGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tileSkinCard{position:relative;min-height:126px;padding:10px;border:1px solid rgba(40,149,177,.20);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 7px 18px rgba(33,109,137,.08);cursor:pointer;color:#17466e;-webkit-tap-highlight-color:transparent;overflow:hidden}
.tileSkinCard:active{transform:scale(.985)}
.tileSkinCard.selected{border-color:rgba(227,174,25,.62);box-shadow:0 8px 20px rgba(205,151,13,.16),inset 0 0 0 1px rgba(255,215,83,.45)}
.tileSkinCard.locked{background:rgba(255,255,255,.69)}
.tileSkinCardHead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.tileSkinCardHead strong{font-size:13px;line-height:1.1}.tileSkinCardHead span{font-size:19px}
.tileSkinPreview{display:flex;justify-content:center;align-items:center;gap:4px;min-height:58px}
.tileSkinMini{width:46px;height:46px;background-size:100% 100%;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 3px 3px rgba(0,0,0,.16))}
.tileSkinMini:nth-child(2){transform:translateY(-4px) scale(1.07)}
.tileSkinMeta{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:7px;min-height:21px;font-size:9px;font-weight:1000;letter-spacing:.05em;color:#6d8c9e;text-transform:uppercase}
.tileSkinMeta .price{color:#9a7410}.tileSkinMeta .active{color:#1b9460}.tileSkinMeta .owned{color:#247ca0}
.tileSkinMeta img{width:18px;height:18px;object-fit:contain}
.tileSkinMeta .miniGold{filter:sepia(1) saturate(5) hue-rotate(350deg) brightness(1.14) contrast(1.04)!important}
#tileSkinStatus{min-height:16px;margin:6px 2px 0;text-align:center;color:#6a8798;font-size:10px;font-weight:800}
@media(max-width:390px){.tileSkinCard{min-height:116px;padding:8px}.tileSkinMini{width:41px;height:41px}}


/* =========================================================
   v7.7.8 — conquistas por categoria + recompensas + raridade de skins
   ========================================================= */
.achievementGroup{display:grid;gap:10px}
.achievementGroup+.achievementGroup{margin-top:24px}
.achievementGroupHeader{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:2px 4px 0}
.achievementGroupTitle{margin:0!important;color:#17466e!important;font-size:20px!important;line-height:1.05!important}
.achievementGroupCount{font-size:10px;font-weight:1000;letter-spacing:.08em;color:#6b8c9e;text-transform:uppercase;white-space:nowrap}
.achievementMetaRow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.achievementReward{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:4px 8px;border-radius:999px;background:rgba(40,149,177,.08);border:1px solid rgba(40,149,177,.12);font-size:10px;font-weight:1000;color:#52788e;white-space:nowrap}
.achievementReward img{width:17px;height:17px;object-fit:contain}
.achievementReward.gold{color:#8a6811;background:rgba(244,194,43,.10);border-color:rgba(212,158,15,.16)}
.achievementReward.gold img{filter:sepia(1) saturate(5) hue-rotate(350deg) brightness(1.14) contrast(1.04)}
.achievementReward.received::after{content:var(--nine-i18n-received,"RECEBIDA");font-size:8px;letter-spacing:.06em;opacity:.72;margin-left:2px}
.achievementCard.locked .achievementReward{opacity:.82}
.achievementToastCopy small{display:block;margin-top:3px;font-size:10px;font-weight:1000;color:#9a7410}

/* Skins: a arte especial substitui completamente a lajota clássica. */
.tileSkinCardHead{justify-content:flex-start!important;margin-bottom:4px!important}
.tileSkinCardHead strong{font-size:14px!important}
.tileSkinRarity{display:inline-flex;align-items:center;min-height:19px;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:1000;letter-spacing:.10em;text-transform:uppercase;margin-bottom:5px;border:1px solid transparent}
.tileSkinRarity.rarity-common{color:#687b86;background:rgba(103,123,134,.08);border-color:rgba(103,123,134,.14)}
.tileSkinRarity.rarity-rare{color:#167f9f;background:rgba(27,156,194,.09);border-color:rgba(27,156,194,.17)}
.tileSkinRarity.rarity-epic{color:#7752a7;background:rgba(119,82,167,.09);border-color:rgba(119,82,167,.16)}
.tileSkinRarity.rarity-legendary{color:#9a7410;background:rgba(224,170,24,.10);border-color:rgba(224,170,24,.18)}
.tileSkinRarity.rarity-supreme{color:#a33d66;background:rgba(194,61,111,.09);border-color:rgba(194,61,111,.16)}


/* =========================================================
   v7.7.9 — catálogo de skins por raridade
   ========================================================= */
.tileSkinGrid{display:block!important}
.tileSkinRarityGroup{margin:0 0 14px}
.tileSkinRarityGroup+.tileSkinRarityGroup{margin-top:18px}
.tileSkinRarityHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:7px 13px;margin:0 1px 9px;border-radius:14px;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(31,114,151,.14);box-shadow:0 5px 14px rgba(26,112,147,.07)}
.tileSkinRarityHeader strong{font-size:13px;letter-spacing:.08em}
.tileSkinRarityHeader span{font-size:11px;letter-spacing:.04em;white-space:nowrap}
.tileSkinRarityHeader.rarity-common{color:#245c78;background:linear-gradient(100deg,rgba(210,239,248,.96),rgba(243,251,253,.96))}
.tileSkinRarityHeader.rarity-rare{color:#24784d;background:linear-gradient(100deg,rgba(214,247,226,.96),rgba(245,252,247,.96))}
.tileSkinRarityHeader.rarity-epic{color:#7752a7;background:linear-gradient(100deg,rgba(235,221,251,.96),rgba(250,246,253,.96))}
.tileSkinRarityHeader.rarity-legendary{color:#8e6710;background:linear-gradient(100deg,rgba(255,237,174,.96),rgba(255,250,232,.96))}
.tileSkinRarityHeader.rarity-mythic{color:#9d3a66;background:linear-gradient(100deg,rgba(255,215,236,.96),rgba(255,245,250,.96))}
.tileSkinRarityCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tileSkinCard{min-height:120px}
.tileSkinCardHead{margin-bottom:7px!important}
.tileSkinCardHead strong{font-size:14px!important}
.tileSkinPreview{min-height:61px}
.tileSkinMeta{margin-top:6px}
/* A raridade pertence à faixa do grupo, não ao card individual. */
.tileSkinRarity{display:none!important}
@media(max-width:390px){.tileSkinRarityHeader{min-height:34px;padding:6px 10px}.tileSkinRarityCards{gap:7px}.tileSkinCard{min-height:112px}}


/* v7.8.0 — conquistas com evolução do Lajotinha + coleta manual de gemas */
.achievementBadgeInner{overflow:hidden}
.achievementBadgeInner img{width:100%;height:100%;object-fit:contain;display:block}
.achievementBadgeFallback{width:52px;height:52px;display:grid;place-items:center}
.achievementBadgeFallback svg{width:52px;height:52px;display:block}
.achievementCard.canClaim{cursor:pointer}
.achievementCard.canClaim .achievementRewardWrap{box-shadow:0 0 0 2px rgba(255,193,49,.18);background:rgba(255,245,209,.78)}
.achievementCard.canClaim:hover .achievementRewardWrap{transform:translateY(-1px)}
.achievementRewardWrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:10px 12px;border-radius:16px;background:rgba(247,250,252,.92);border:1px solid rgba(49,140,183,.12);transition:transform .18s ease,box-shadow .18s ease}
.achievementRewardWrap.claimed{opacity:.68;background:rgba(245,248,250,.72)}
.achievementRewardInfo{display:flex;align-items:center;gap:10px;min-width:0}
.achievementRewardInfo img{width:26px;height:26px;object-fit:contain;flex:none}
.achievementRewardText{display:flex;flex-direction:column;gap:1px;min-width:0}
.achievementRewardText small{font-size:11px;font-weight:1000;letter-spacing:.08em;color:#6c8797;text-transform:uppercase}
.achievementRewardText strong{font-size:18px;line-height:1;color:#17466e}
.achievementRewardState{font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#1597a3;white-space:nowrap}
.achievementRewardWrap.claimed .achievementRewardState{color:#6f8696}
.achievementCollectGem{position:fixed;left:0;top:0;pointer-events:none;z-index:100400;will-change:left,top,width,height,opacity,transform;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(255,228,115,.35))}


/* v7.8.1 — evolução do Lajotinha na Home */
#homeEvolutionMascot{object-fit:contain;object-position:center bottom}


/* =========================================================
   v7.8.2 — Trajetória do Lajotinha
   ========================================================= */
#homeEvolutionMascot{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease}
#homeEvolutionMascot:active{transform:scale(.96)}
#trajectory{background:var(--bg,linear-gradient(180deg,#dff8ff,#eefcff))!important;color:#17466e;overflow:hidden}
.trajectoryPage{height:100dvh;max-width:760px;margin:0 auto;display:flex;flex-direction:column;background:transparent}
.trajectoryHeader{position:relative;z-index:3;flex:none;min-height:94px;padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;background:rgba(228,249,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(36,117,157,.12)}
.trajectoryBack{width:42px;height:42px;border:0;background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat;padding:0}
.trajectoryTitle{text-align:center;min-width:0}
.trajectoryTitle h2{margin:0!important;color:#17466e!important;font-size:29px!important;line-height:1}
.trajectoryPlayer{display:block;margin-top:6px;color:#56809a;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trajectoryScroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 28px)}
.trajectoryList{display:flex;flex-direction:column}
.trajectoryItem{min-height:116px;display:grid;grid-template-columns:minmax(118px,43%) 1fr;align-items:center;gap:18px;padding:14px 4px;border-bottom:1px solid rgba(46,113,148,.13);position:relative}
.trajectoryItem:first-child{border-top:1px solid rgba(46,113,148,.13)}
.trajectoryMascot{height:100px;width:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 7px 8px rgba(36,102,132,.14));transition:opacity .2s ease,filter .2s ease}
.trajectoryItem.locked .trajectoryMascot{opacity:.18;filter:grayscale(1) drop-shadow(0 5px 6px rgba(36,102,132,.06))}
.trajectoryItem.locked .trajectoryInfo{opacity:.28}
.trajectoryItem.current::before{content:var(--nine-i18n-current,"ATUAL");position:absolute;left:4px;top:7px;padding:3px 7px;border-radius:999px;background:rgba(31,180,160,.14);color:#188c82;font-size:9px;font-weight:1000;letter-spacing:.12em}
.trajectoryInfo{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.trajectoryStage{font-size:15px;font-weight:1000;color:#17466e;line-height:1.12}
.trajectoryXp{display:flex;align-items:center;gap:7px;font-size:21px;font-weight:1000;color:#1c749b}
.trajectoryXp img{width:30px;height:30px;object-fit:contain}
.trajectoryXp small{font-size:11px;font-weight:1000;color:#62859a;letter-spacing:.06em}
.trajectoryNext{font-size:10px;font-weight:800;color:#7995a4;line-height:1.2}
@media(max-width:390px){
  .trajectoryHeader{padding-left:12px;padding-right:12px}
  .trajectoryScroll{padding-left:14px;padding-right:14px}
  .trajectoryItem{grid-template-columns:115px 1fr;gap:12px;min-height:108px}
  .trajectoryMascot{height:92px}.trajectoryStage{font-size:14px}.trajectoryXp{font-size:18px}
}

/* =========================================================
   v7.8.2 — popup padrão do Nine (substitui alert/confirm)
   ========================================================= */
#nineGamePopup{background:rgba(19,62,91,.46)!important;z-index:2147483646!important}
.nineGamePopupCard{width:min(88vw,390px);margin:auto;padding:22px 20px 18px;border-radius:24px;background:rgba(244,253,255,.98);border:1px solid rgba(48,145,181,.22);box-shadow:0 18px 50px rgba(20,74,105,.28);text-align:center;color:#17466e}
.nineGamePopupMascot{width:82px;height:82px;object-fit:contain;margin:-4px auto 4px;display:block}
.nineGamePopupCard h3{margin:4px 0 8px!important;font-size:23px!important;color:#17466e!important}
.nineGamePopupCard p{margin:0 auto 18px!important;font-size:14px!important;line-height:1.38!important;color:#587b92!important;max-width:310px}
.nineGamePopupActions{display:flex;gap:10px;justify-content:center}
.nineGamePopupActions button{flex:1;min-height:46px;border-radius:15px;font-size:13px;font-weight:1000}
.ninePopupCancel{background:rgba(255,255,255,.86)!important;color:#3e6f8c!important;border:1px solid rgba(54,130,166,.22)!important}
.ninePopupOk{background:linear-gradient(180deg,#38d7c8,#19aeb9)!important;color:#fff!important;border:0!important}


/* =========================================================
   v7.8.2.1 — correção visual da Trajetória
   ========================================================= */
#trajectory.overlay{
  padding:0!important;
  align-items:stretch!important;
  justify-content:center!important;
  backdrop-filter:none!important;
  background:#dff8ff!important;
}
.trajectoryPage{
  width:min(100%,680px)!important;
  max-width:680px!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:100vh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#e7faff 0%,#dff6ff 100%)!important;
}
.trajectoryHeader{
  position:relative!important;
  z-index:4!important;
  flex:0 0 auto!important;
  min-height:78px!important;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 14px 9px!important;
  display:grid!important;
  grid-template-columns:44px 1fr 44px!important;
  align-items:center!important;
  background:rgba(232,250,255,.97)!important;
  border-bottom:1px solid rgba(45,119,153,.13)!important;
  box-shadow:0 3px 10px rgba(31,102,135,.05)!important;
}
.trajectoryBack{
  width:40px!important;
  height:40px!important;
}
.trajectoryTitle h2{
  font-size:25px!important;
  line-height:1!important;
}
.trajectoryPlayer{
  margin-top:4px!important;
  font-size:11px!important;
}
.trajectoryScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 18px)!important;
  scrollbar-width:thin;
}
.trajectoryList{
  display:block!important;
  width:100%!important;
}
.trajectoryItem{
  box-sizing:border-box!important;
  width:100%!important;
  height:126px!important;
  min-height:126px!important;
  max-height:126px!important;
  display:grid!important;
  grid-template-columns:142px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 6px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid rgba(48,116,149,.15)!important;
  position:relative!important;
}
.trajectoryItem:first-child{
  border-top:0!important;
}
.trajectoryMascot{
  width:132px!important;
  height:112px!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  justify-self:center!important;
  margin:0!important;
}
.trajectoryInfo{
  min-width:0!important;
  gap:3px!important;
  justify-content:center!important;
}
.trajectoryStage{
  font-size:15px!important;
  line-height:1.08!important;
}
.trajectoryXp{
  gap:5px!important;
  font-size:18px!important;
  line-height:1!important;
}
.trajectoryXp img{
  width:25px!important;
  height:25px!important;
}
.trajectoryXp small{
  font-size:9px!important;
}
.trajectoryNext{
  margin-top:2px!important;
  font-size:9px!important;
  max-width:270px!important;
}
.trajectoryItem.locked .trajectoryMascot{
  opacity:.22!important;
  filter:grayscale(1) saturate(.25)!important;
}
.trajectoryItem.locked .trajectoryInfo{
  opacity:.28!important;
}
.trajectoryItem.current{
  background:rgba(255,255,255,.28)!important;
}
.trajectoryItem.current::before{
  left:8px!important;
  top:7px!important;
  font-size:8px!important;
  padding:2px 6px!important;
}
@media(max-width:430px){
  .trajectoryPage{width:100%!important}
  .trajectoryScroll{padding-left:10px!important;padding-right:10px!important}
  .trajectoryItem{
    height:116px!important;
    min-height:116px!important;
    max-height:116px!important;
    grid-template-columns:122px minmax(0,1fr)!important;
    gap:6px!important;
  }
  .trajectoryMascot{
    width:116px!important;
    height:102px!important;
  }
  .trajectoryStage{font-size:14px!important}
  .trajectoryXp{font-size:17px!important}
}


/* =========================================================
   v7.8.3 — ajustes finais Home / Mina / Conquistas / Níveis
   ========================================================= */

/* Barra inferior */
#menu .homeTool img{width:42px!important;height:42px!important}
#menu .homeToolSvg{width:auto!important;height:auto!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
#menu .homeToolSvg img{width:42px!important;height:42px!important;display:block}
#menu .homeTool.profileTool img{border:0!important;border-radius:0!important;background:transparent!important}

/* Mina — saldos */
#shop .shopWallet{
  background:#fff!important;
  box-shadow:0 5px 14px rgba(42,105,135,.08)!important;
  border-width:2px!important;
  border-style:solid!important;
}
#shop .shopWallet.greenWallet{border-color:rgba(24,190,103,.62)!important}
#shop .shopWallet.goldWallet{border-color:rgba(227,177,32,.68)!important}
#shop .goldShopNote{background:transparent!important}
#shop .shopNote.goldShopNote{box-shadow:none!important}

/* Mina — cards de imagem */
.mineRewardOnly{display:block!important}
.mineImageCard,.goldPackageImage{
  display:block;width:100%;padding:0!important;margin:0;border:0!important;background:transparent!important;
  box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mineImageCard img,.goldPackageImage img{
  display:block;width:100%;height:auto;object-fit:contain;filter:none!important;
}
.mineImageCard:active,.goldPackageImage:active{transform:scale(.985)}
#shop .packageGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#shop .packageGrid .goldPackageImage{border-radius:20px;overflow:hidden}
#shopPackageStatus{min-height:17px;text-align:center;color:#6d8797;font-size:10px;font-weight:850}
@media(max-width:380px){#shop .packageGrid{gap:7px}}

/* Mina — skins: preview usa a arte 3×3 existente */
.tileSkinSheetPreview{display:block;width:100%;max-width:138px;aspect-ratio:1/1;object-fit:contain;margin:0 auto;filter:drop-shadow(0 4px 5px rgba(0,0,0,.15))}
.tileSkinCard{min-height:162px!important}
.tileSkinPreview{min-height:108px!important}

/* v7.9.9 — correção dos cards da Mina
   Os cards pequenos não podem usar slices de 76px/76px, senão o topo domina toda a área. */
#shop .gemConversionCard,
#shop .tileSkinCard{
  overflow:hidden!important;
}
#shop .gemConversionCard{
  --white-frame-top-h:32px;
  --white-frame-bottom-h:32px;
  min-height:86px!important;
  padding:11px 10px 12px!important;
}
#shop .tileSkinCard{
  --white-frame-top-h:42px;
  --white-frame-bottom-h:42px;
  min-height:168px!important;
  padding:12px 12px 14px!important;
}
#shop .gemConversionSide,
#shop .gemConversionArrow,
#shop .tileSkinCardHead,
#shop .tileSkinPreview,
#shop .tileSkinMeta{
  position:relative;
  z-index:1;
}
@media(max-width:390px){
  #shop .gemConversionCard{
    --white-frame-top-h:28px;
    --white-frame-bottom-h:28px;
    min-height:78px!important;
    padding:9px 7px 10px!important;
  }
  #shop .tileSkinCard{
    --white-frame-top-h:38px;
    --white-frame-bottom-h:38px;
    min-height:154px!important;
    padding:10px 10px 12px!important;
  }
}

/* Botões inferiores iguais ao de Conquistas */
#shop .shopBottomBack,#tutorial .tutorialDone{
  width:100%!important;height:58px!important;margin:12px 0 0!important;border:0!important;border-radius:18px!important;
  background-image:none!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  background-color:transparent!important;color:#fff!important;font-weight:1000!important;font-size:18px!important;
  text-shadow:0 2px 2px rgba(0,50,85,.55)!important;box-shadow:none!important;
}

/* Conquistas — cabeçalho */
.achievementsHeroIcon{
  background:transparent!important;box-shadow:none!important;border:0!important;
}
.achievementsHeroIcon img{width:62px;height:62px;object-fit:contain;display:block}
.achievementsHeroText h2{margin-top:0!important}

/* Conquistas — card segue assets/cards/card-conquistas.webp */
.achievementsList{gap:10px!important}
.achievementCard{
  min-height:180px!important;
  grid-template-columns:148px minmax(0,1fr)!important;
  gap:8px!important;
  padding:16px 22px 16px 12px!important;
  border:0!important;
  border-radius:24px!important;
  background:transparent url("../../cards/card-conquistas.webp") center/100% 100% no-repeat!important;
  box-shadow:none!important;
  overflow:hidden!important;
  align-items:center!important;
}
.achievementCard.locked{filter:grayscale(.5)!important;opacity:.58!important}
.achievementCard.unlocked{filter:none!important;opacity:1!important}
.achievementBadge{width:142px!important;height:148px!important;display:grid!important;place-items:center!important}
.achievementBadgeInner{
  width:138px!important;height:138px!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important;display:grid!important;place-items:center!important;
}
.achievementBadgeInner img{
  width:136px!important;height:136px!important;object-fit:contain!important;
  filter:drop-shadow(0 6px 7px rgba(31,89,119,.15));
}
.achievementBadgeFallback{width:88px!important;height:88px!important}
.achievementTitleRow h3{font-size:23px!important}
.achievementDesc{font-size:14px!important;margin:5px 0 8px!important}
.achievementMeta{font-size:12px!important;margin:2px 0 7px!important}
.achievementStatus{display:none!important}
.achievementRewardWrap{
  margin-top:7px!important;padding:8px 10px!important;min-height:60px!important;border-radius:15px!important;
  background:rgba(248,252,255,.70)!important;border:1px solid rgba(56,123,163,.14)!important;box-shadow:none!important;
}
.achievementRewardInfo img{width:39px!important;height:39px!important}
.achievementRewardText small{font-size:9px!important}
.achievementRewardText strong{font-size:22px!important}
.achievementRewardState{
  padding:8px 12px;border-radius:12px;background:rgba(204,247,222,.65);border:1px solid rgba(49,176,105,.20);
  color:#159355!important;font-size:10px!important;
}
.achievementCard.canClaim .achievementRewardState{background:rgba(220,247,255,.78);color:#147e9c!important}
.achievementProgressWrap{margin-top:6px}
.achievementProgressTop{font-size:10px!important}
@media(max-width:430px){
  .achievementCard{grid-template-columns:116px minmax(0,1fr)!important;min-height:154px!important;padding:12px 15px 12px 8px!important}
  .achievementBadge{width:112px!important;height:126px!important}
  .achievementBadgeInner{width:110px!important;height:118px!important}
  .achievementBadgeInner img{width:110px!important;height:116px!important}
  .achievementTitleRow h3{font-size:18px!important}
  .achievementDesc{font-size:12px!important}
  .achievementRewardWrap{min-height:52px!important;padding:6px 8px!important}
  .achievementRewardInfo img{width:31px!important;height:31px!important}
  .achievementRewardText strong{font-size:18px!important}
  .achievementRewardState{padding:6px 8px!important;font-size:8px!important}
}

/* Níveis: mesmo vocabulário visual do Alvo */
.choice{position:relative!important}
.choice.locked::after{display:none!important;content:none!important}
.choice.locked{opacity:.45!important;filter:grayscale(.75)!important;padding-right:54px!important}
.choice.locked .targetRecord,.choice.locked .timeRecord,.choice.locked .movesRecord,.choice.locked .pointsRecord{
  position:absolute!important;right:13px!important;top:50%!important;transform:translateY(-50%)!important;
  width:32px!important;height:32px!important;display:grid!important;place-items:center!important;
}
.levelLockIcon{width:27px!important;height:27px!important;object-fit:contain!important}
.levelNameVisual{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:950}
.levelNameVisual .recordIcon{width:24px;height:24px}
.levelNameVisual .recordIcon svg{width:22px;height:22px}
.levelNameVisual .levelXpMark{font-weight:1000;font-size:16px;color:#6949cd}


/* Meta abaixo do tabuleiro */
.status.gameGoal{font-weight:950!important;color:#256a8d!important;letter-spacing:.02em}

/* Splash HTML: visual consistente, sem ícone gigante */
.gameSplash .splashLogo{visibility:visible}


/* =========================================================
   v7.8.4 — refinamento Mina / Conquistas / Modos
   ========================================================= */

/* Mina */
#shop .shopWallet small,
#shop .shopWallet strong{color:#17466e!important}
#mineRewardAd{
  width:40%!important;
  max-width:240px!important;
  min-width:150px!important;
  margin:0 auto 14px!important;
}
#mineRewardAd .mineImageCard{width:100%!important;max-width:none!important}
.tileSkinPreview{
  min-height:82px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.tileSkinFan{
  position:relative;
  width:118px;
  height:82px;
  margin:0 auto;
}
.tileSkinFanTile{
  position:absolute;
  left:50%;
  top:50%;
  width:66px;
  height:66px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;
  filter:drop-shadow(0 4px 5px rgba(27,70,93,.20));
  transform-origin:50% 92%;
}
.tileSkinFanTile:nth-child(1){transform:translate(-72%,-44%) rotate(-18deg)}
.tileSkinFanTile:nth-child(2){z-index:2;transform:translate(-50%,-52%) rotate(0deg)}
.tileSkinFanTile:nth-child(3){transform:translate(-28%,-44%) rotate(18deg)}
.tileSkinCard{min-height:143px!important}

/* Conquistas — layout do modelo enviado */
.achievementCard{
  min-height:174px!important;
  grid-template-columns:180px minmax(0,1fr)!important;
  gap:12px!important;
  padding:14px 25px 14px 10px!important;
  align-items:center!important;
}
.achievementBadge{
  width:178px!important;
  height:146px!important;
}
.achievementBadgeInner{
  width:174px!important;
  height:144px!important;
}
.achievementBadgeInner img{
  width:168px!important;
  height:140px!important;
  object-fit:contain!important;
}
.achievementBody{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "title title"
    "desc desc"
    "reward date"!important;
  column-gap:14px!important;
  align-items:center!important;
}
.achievementTitleRow{grid-area:title!important;display:block!important}
.achievementTitleRow h3{
  margin:0!important;
  font-size:26px!important;
  line-height:1.02!important;
  color:#17466e!important;
}
.achievementDesc{
  grid-area:desc!important;
  margin:5px 0 8px!important;
  color:#6483a4!important;
  font-size:15px!important;
  line-height:1.18!important;
}
.achievementMeta{
  grid-area:date!important;
  margin:0!important;
  max-width:124px!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:1000!important;
  color:#5c6f84!important;
}
.achievementRewardWrap{
  grid-area:reward!important;
  width:min(100%,330px)!important;
  min-height:58px!important;
  margin:0!important;
  padding:7px 10px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:9px!important;
  background:rgba(248,252,255,.74)!important;
  border:1px solid rgba(55,120,160,.16)!important;
}
.achievementRewardInfo{gap:8px!important}
.achievementRewardInfo img{
  width:44px!important;
  height:44px!important;
}
.achievementRewardText small{display:none!important}
.achievementRewardText strong{
  font-size:25px!important;
  color:#17466e!important;
}
.achievementRewardState{
  font-size:10px!important;
  padding:8px 12px!important;
  border-radius:12px!important;
}
.achievementProgressWrap{
  grid-area:reward!important;
  width:min(100%,330px)!important;
  margin:0!important;
}
.achievementCard.locked .achievementMeta{display:none!important}
@media(max-width:500px){
  .achievementCard{
    grid-template-columns:128px minmax(0,1fr)!important;
    min-height:144px!important;
    gap:5px!important;
    padding:10px 14px 10px 7px!important;
  }
  .achievementBadge{width:126px!important;height:124px!important}
  .achievementBadgeInner{width:124px!important;height:122px!important}
  .achievementBadgeInner img{width:121px!important;height:120px!important}
  .achievementTitleRow h3{font-size:18px!important}
  .achievementDesc{font-size:11px!important;margin:3px 0 6px!important}
  .achievementBody{column-gap:6px!important}
  .achievementRewardWrap{min-height:48px!important;padding:5px 7px!important}
  .achievementRewardInfo img{width:33px!important;height:33px!important}
  .achievementRewardText strong{font-size:18px!important}
  .achievementRewardState{font-size:8px!important;padding:6px 7px!important}
  .achievementMeta{max-width:78px!important;font-size:8px!important}
}

/* Records dos níveis */
.iconXP{
  min-width:auto!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#17466e!important;
  font-size:11px!important;
  font-style:normal!important;
  letter-spacing:0!important;
  font-weight:1000!important;
}
.recordDatum.recordMeta .recordMetaLabel{
  color:#17466e;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
}
.choice.active .iconXP,
.choice.active .recordMetaLabel{color:rgba(255,255,255,.96)!important}
.pointsChoice.active{
  background:#7356d8!important;
  border-color:#8e79e8!important;
  color:#fff!important;
}



/* v7.8.5 — Troféu central + Trajetória */
#menu #achievementsBtn{position:relative!important;overflow:visible!important}
#menu #achievementsBtn .homeToolSvg{
  width:76px!important;height:76px!important;margin:-34px auto 1px!important;
  display:grid!important;place-items:center!important;background:transparent!important;
  border:0!important;box-shadow:none!important;overflow:visible!important;
}
#menu #achievementsBtn .homeToolSvg img{
  width:76px!important;height:76px!important;object-fit:contain!important;display:block!important;
  filter:drop-shadow(0 6px 7px rgba(28,86,121,.18))!important;
}
#menu #achievementsBtn > span:last-child{margin-top:-1px!important}
.trajectoryItem.locked .trajectoryMascot{
  opacity:.4!important;
  filter:grayscale(.6) drop-shadow(0 5px 6px rgba(36,102,132,.06))!important;
}


/* v7.8.6 — cards bloqueados mostram somente progresso */
.achievementCard.locked .achievementRewardWrap{display:none!important}



/* =========================================================
   v7.9 — refinamento final: frames 3 partes + resultados + popups
   ========================================================= */
.sliceFrame{position:relative;width:100%;isolation:isolate;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.sliceFrame__skin{position:absolute;inset:0;z-index:-1;pointer-events:none;display:grid;grid-template-rows:92px minmax(0,1fr) 92px}
.sliceFrame__top,.sliceFrame__middle,.sliceFrame__bottom{width:100%;min-width:0;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.sliceFrame__middle{background-repeat:repeat-y}
.frameWhite .sliceFrame__top{background-image:url("../../ui/frames/card-branco-top.webp")}
.frameWhite .sliceFrame__middle{background-image:url("../../ui/frames/card-branco-middle.webp")}
.frameWhite .sliceFrame__bottom{background-image:url("../../ui/frames/card-branco-bottom.webp")}
.frameVictory .sliceFrame__top{background-image:url("../../ui/frames/card-vitoria-top.webp")}
.frameVictory .sliceFrame__middle{background-image:url("../../ui/frames/card-vitoria-middle.webp")}
.frameVictory .sliceFrame__bottom{background-image:url("../../ui/frames/card-vitoria-bottom.webp")}
.sliceFrame__content{position:relative;padding:28px 24px 30px}

/* Resultado: Lajotinha + XP ficam fora do quadro, como no protótipo aprovado. */
#gameOver .resultScreen{width:min(94vw,500px)!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;max-height:96dvh!important}
#gameOver .resultTop{position:relative;z-index:3;margin:0 14px -18px;min-height:128px;overflow:visible!important}
#gameOver .resultMascot{width:150px!important;height:150px!important;max-width:42vw!important;max-height:150px!important;object-fit:contain!important;display:block!important}
#gameOver .resultXpCard{background:rgba(255,255,255,.96)!important;border:1px solid rgba(48,137,171,.13);box-shadow:0 8px 20px rgba(42,107,137,.11)!important}
#gameOver .resultBodyFrame{padding-top:12px}
#gameOver .resultBodyFrame .sliceFrame__content{padding:36px 22px 27px}
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__top{background-image:url("../../ui/frames/card-vitoria-top.webp")}
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__middle{background-image:url("../../ui/frames/card-vitoria-middle.webp")}
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__bottom{background-image:url("../../ui/frames/card-vitoria-bottom.webp")}
#gameOver .endMetrics{gap:10px!important}
#gameOver .endMetric{background:rgba(255,255,255,.96)!important;border:1px solid rgba(48,137,171,.13)!important;border-radius:19px!important;box-shadow:0 7px 17px rgba(40,108,138,.08)!important;padding:12px 6px!important}
.resultMotivation{display:flex!important;align-items:center;justify-content:center;gap:9px}
.resultMotivationIcon{width:30px;height:30px;object-fit:contain;flex:none}
.unlockCrown{display:inline-grid!important;place-items:center;width:44px;height:44px;flex:none}
.unlockCrown img{width:44px;height:44px;object-fit:contain;display:block}
.gameOverPrimary,.nextLevelButton{background-image:none!important;background-color:transparent!important;background-size:100% 100%!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important}
.gameOverSecondary{background-image:none!important;background-color:transparent!important;background-size:100% 100%!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important;color:#fff!important;text-shadow:0 2px 2px rgba(0,50,85,.45)!important}

/* Perfil e Ajustes usam o mesmo frame branco escalável. */
#profile .profileModal,#settings .settingsModal{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
#profile .sliceFrame__content,#settings .sliceFrame__content{padding:28px 22px 30px}
#profile .profileTopbar{background:transparent!important;border-bottom:0!important;padding:3px 0 14px!important}
#settings .settingsHeadMain{padding-top:0!important}
#saveProfile{background-image:none!important;background-color:transparent!important;background-size:100% 100%!important;border:0!important;box-shadow:none!important;height:58px!important;color:#072f20!important}
#closeProfileTop,#closeSettings{background:transparent url("../../botoes/bt-voltar.webp") center/contain no-repeat!important;border:0!important;box-shadow:none!important;color:transparent!important;font-size:0!important;width:44px!important;height:44px!important;padding:0!important}
.settingsLinks button{background-image:none!important;background-size:100% 100%!important;background-color:transparent!important;border:0!important;color:#fff!important}

#resetProgress{background-color:#d94d4d!important;background-image:none!important;background-size:100% 100%!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important;color:#fff!important;min-height:54px}

/* Corrige a conquista desbloqueada e protege imagens de outros popups contra vazamento. */
.achievementToast{overflow:hidden!important}
.achievementToastIcon{width:48px!important;height:48px!important;overflow:hidden!important;flex:0 0 48px!important}
.achievementToastIcon img,.achievementToastIcon svg{display:block!important;width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important}
.nineGamePopupMascot{max-width:82px!important;max-height:82px!important}
.quickBoostModal img,.infoModal img,.telemetryModalCard img{max-width:100%;object-fit:contain}

@media(max-width:390px){
  .sliceFrame__skin{grid-template-rows:78px minmax(0,1fr) 78px}
  #gameOver .resultTop{margin-bottom:-14px;min-height:112px}
  #gameOver .resultMascot{width:122px!important;height:122px!important}
  #gameOver .resultBodyFrame .sliceFrame__content{padding:31px 15px 22px}
}



/* =========================================================
   v7.5.21 — resultado compacto + frames 1526x91 / 1526x16
   ========================================================= */

/* Os novos TOP/BOTTOM têm proporção 1526x91.
   Em vez de forçar 78/92px, a altura acompanha a largura real,
   evitando distorção e emendas visíveis. */
.sliceFrame__skin{
  display:flex!important;
  flex-direction:column!important;
  grid-template-rows:none!important;
}
.sliceFrame__top,
.sliceFrame__bottom{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1526 / 91!important;
  flex:0 0 auto!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
.sliceFrame__middle{
  width:100%!important;
  min-height:16px!important;
  flex:1 1 auto!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}

/* Resultado: remove o texto auxiliar e compacta o conteúdo. */
#gameOver .resultEyebrow{
  display:none!important;
}
#gameOver .resultBodyFrame{
  padding-top:4px!important;
}
#gameOver .resultBodyFrame .sliceFrame__content{
  padding:20px 18px 18px!important;
}
#gameOver .resultScreen h2{
  margin:0 0 8px!important;
  font-size:32px!important;
  line-height:1.05!important;
}

/* Motivação sem caixa/borda/cor de fundo. */
#gameOver #resultMotivation,
#gameOver .resultMotivation,
#gameOver .resultScreen.resultWin .resultMotivation{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:3px 2px!important;
  margin:5px 0!important;
  color:#17466e!important;
}
#gameOver .resultScreen.resultWin #resultMotivation,
#gameOver .resultScreen.resultWin .resultMotivation{
  color:#17466e!important;
}
#gameOver .resultMotivationIcon{
  width:27px!important;
  height:27px!important;
}

/* Desbloqueio sem caixa/borda/cor de fundo. */
#gameOver #unlockBanner,
#gameOver .unlockBanner{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:3px 0!important;
  margin:5px 0!important;
}
#gameOver .unlockHeader{
  gap:7px!important;
}
#gameOver .unlockCrown,
#gameOver .unlockCrown img{
  width:38px!important;
  height:38px!important;
}
#gameOver .unlockLevels{
  margin-top:5px!important;
  gap:7px!important;
}
#gameOver .levelPill{
  padding:7px 8px!important;
}
#gameOver .unlockHint{
  margin-top:3px!important;
}

/* Cards das métricas mais compactos. */
#gameOver .endMetrics{
  gap:8px!important;
  margin:3px 0 7px!important;
}
#gameOver .endMetric{
  padding:8px 5px!important;
  border-radius:17px!important;
}
#gameOver .endMetric img{
  width:25px!important;
  height:25px!important;
}
#gameOver .endMetric b{
  font-size:17px!important;
}
#gameOver .endMetric small{
  font-size:8px!important;
}

/* Texto secundário e botões ocupam menos altura. */
#gameOver .endSubClean{
  margin:4px 0 5px!important;
  line-height:1.2!important;
}
#gameOver .gameOverPrimary,
#gameOver .nextLevelButton,
#gameOver .gameOverSecondary{
  min-height:50px!important;
  height:50px!important;
  margin-top:4px!important;
  padding:0 15px!important;
}

/* Evita que o resultado Web fique cortado em alturas comuns de notebook. */
#gameOver{
  padding:6px!important;
  align-items:center!important;
  overflow:auto!important;
}
#gameOver .resultScreen{
  width:min(94vw,500px)!important;
  max-height:none!important;
  overflow:visible!important;
}
#gameOver .resultTop{
  min-height:108px!important;
  margin:0 14px -12px!important;
}
#gameOver .resultMascot{
  width:126px!important;
  height:126px!important;
  max-height:126px!important;
}
#gameOver .resultXpCard{
  padding:10px 12px!important;
}
#gameOver .resultXpCard img{
  width:48px!important;
  height:48px!important;
}
#gameOver .resultXpCard strong{
  font-size:36px!important;
}

/* Compactação adicional para telas baixas. */
@media (max-height:760px){
  #gameOver{
    align-items:flex-start!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }
  #gameOver .resultTop{
    min-height:88px!important;
    margin-bottom:-10px!important;
  }
  #gameOver .resultMascot{
    width:102px!important;
    height:102px!important;
    max-height:102px!important;
  }
  #gameOver .resultXpCard{
    padding:7px 10px!important;
  }
  #gameOver .resultXpCard img{
    width:42px!important;
    height:42px!important;
  }
  #gameOver .resultXpCard strong{
    font-size:31px!important;
  }
  #gameOver .resultBodyFrame .sliceFrame__content{
    padding:15px 14px 13px!important;
  }
  #gameOver .resultScreen h2{
    font-size:28px!important;
    margin-bottom:6px!important;
  }
  #gameOver .endMetric{
    padding:6px 4px!important;
  }
  #gameOver #resultMotivation,
  #gameOver .resultMotivation{
    padding:1px 0!important;
    margin:3px 0!important;
    font-size:14px!important;
  }
  #gameOver #unlockBanner,
  #gameOver .unlockBanner{
    padding:1px 0!important;
    margin:3px 0!important;
  }
  #gameOver .unlockCrown,
  #gameOver .unlockCrown img{
    width:34px!important;
    height:34px!important;
  }
  #gameOver .levelPill{
    padding:5px 7px!important;
  }
  #gameOver .gameOverPrimary,
  #gameOver .nextLevelButton,
  #gameOver .gameOverSecondary{
    min-height:45px!important;
    height:45px!important;
  }
}



/* =========================================================
   v7.5.22 — ajuste fino solicitado para resultado
   ========================================================= */
@media (max-height:760px){
  #gameOver #unlockBanner,
  #gameOver .unlockBanner{
    padding:30px 0!important;
    margin:3px 0!important;
  }

  #gameOver .resultBodyFrame .sliceFrame__content{
    padding:20px 25px!important;
  }

  #gameOver .resultTop{
    min-height:88px!important;
    margin-bottom:0!important;
  }
}

/* Mantém a meta do próximo nível legível em telas estreitas. */
#gameOver #unlockNextLevel{
  line-height:1.05!important;
  overflow-wrap:anywhere;
}
#gameOver #unlockNextLevelBtn small{
  line-height:1!important;
}

/* Em aparelhos muito baixos, preserva os valores acima mas reduz
   somente elementos periféricos para evitar corte vertical. */
@media (max-height:650px){
  #gameOver .resultMascot{
    width:92px!important;
    height:140px!important;
    max-height:140px!important;
  }
  #gameOver .resultXpCard{
    padding:6px 9px!important;
  }
  #gameOver .resultXpCard img{
    width:38px!important;
    height:38px!important;
  }
  #gameOver .resultXpCard strong{
    font-size:29px!important;
  }
  #gameOver .resultScreen h2{
    font-size:26px!important;
    margin-bottom:4px!important;
  }
  #gameOver .endMetric{
    padding:5px 4px!important;
  }
  #gameOver .gameOverPrimary,
  #gameOver .nextLevelButton,
  #gameOver .gameOverSecondary{
    min-height:42px!important;
    height:42px!important;
  }
}



/* =========================================================
   v7.5.23 — elimina emenda dos slice frames + botão vermelho
   ========================================================= */

/* Sobrepõe os slices em 2px para eliminar a linha de antialias/rounding.
   O efeito é aplicado a todos os frames (Ajustes, Jogador e Resultado). */
.sliceFrame__top{
  position:relative!important;
  z-index:3!important;
}
.sliceFrame__middle{
  position:relative!important;
  z-index:2!important;
  margin-top:-2px!important;
  margin-bottom:-2px!important;
  min-height:20px!important;
}
.sliceFrame__bottom{
  position:relative!important;
  z-index:3!important;
}

/* Botão vermelho: somente o asset, sem preenchimento CSS por baixo. */
#resetProgress,
.dangerButton{
  background-color:transparent!important;
}

/* Garante que o asset do botão não receba cor de fallback. */
#resetProgress{
  background-image:none!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:100% 100%!important;
  border:0!important;
  box-shadow:none!important;
}



/* =========================================================
   v7.5.24 — botões responsivos em 3 slices horizontais
   LEFT + MIDDLE + RIGHT
   ========================================================= */

/* O elemento mantém texto/ícone e recebe os três slices por pseudo-elementos.
   As pontas nunca esticam; somente o miolo ocupa a largura variável. */
.sliceButton,
.gameOverPrimary,
.nextLevelButton,
.gameOverSecondary,
#savePlayer,
#resetProgress,
.btnGreen,
.btnBlue,
.btnYellow,
.btnRed{
  --btn-left:none;
  --btn-middle:none;
  --btn-right:none;
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

.sliceButton::before,
.gameOverPrimary::before,
.nextLevelButton::before,
.gameOverSecondary::before,
#savePlayer::before,
#resetProgress::before,
.btnGreen::before,
.btnBlue::before,
.btnYellow::before,
.btnRed::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    var(--btn-left) left center / auto 100% no-repeat,
    var(--btn-right) right center / auto 100% no-repeat;
}

.sliceButton::after,
.gameOverPrimary::after,
.nextLevelButton::after,
.gameOverSecondary::after,
#savePlayer::after,
#resetProgress::after,
.btnGreen::after,
.btnBlue::after,
.btnYellow::after,
.btnRed::after{
  content:"";
  position:absolute;
  /* 2px de sobreposição evita linha entre ponta e miolo */
  left:calc(var(--btn-cap, 50px) - 2px);
  right:calc(var(--btn-cap, 50px) - 2px);
  top:0;
  bottom:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--btn-middle);
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}

/* VERDE */
.sliceButton.green,
.btnGreen,
.gameOverPrimary,
#savePlayer{
  --btn-left:url("../../botoes/bt-verde-left.webp");
  --btn-middle:url("../../botoes/bt-verde-middle.webp");
  --btn-right:url("../../botoes/bt-verde-right.webp");
}

/* AZUL */
.sliceButton.blue,
.btnBlue,
.gameOverSecondary{
  --btn-left:url("../../botoes/bt-azul-left.webp");
  --btn-middle:url("../../botoes/bt-azul-middle.webp");
  --btn-right:url("../../botoes/bt-azul-right.webp");
}

/* AMARELO */
.sliceButton.yellow,
.btnYellow,
.nextLevelButton,
#unlockNextLevelBtn{
  --btn-left:url("../../botoes/bt-amarelo-left.webp");
  --btn-middle:url("../../botoes/bt-amarelo-middle.webp");
  --btn-right:url("../../botoes/bt-amarelo-right.webp");
}

/* VERMELHO */
.sliceButton.red,
.btnRed,
#resetProgress{
  --btn-left:url("../../botoes/bt-vermelho-left.webp");
  --btn-middle:url("../../botoes/bt-vermelho-middle.webp");
  --btn-right:url("../../botoes/bt-vermelho-right.webp");
}

/* Classes utilitárias para qualquer botão novo */
.btnGreen,.btnBlue,.btnYellow,.btnRed{
  min-height:50px;
  padding:0 28px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

/* Mantém o conteúdo acima dos slices. */
.sliceButton > *,
.gameOverPrimary > *,
.nextLevelButton > *,
.gameOverSecondary > *,
#savePlayer > *,
#resetProgress > *,
.btnGreen > *,
.btnBlue > *,
.btnYellow > *,
.btnRed > *{
  position:relative;
  z-index:1;
}

/* Para botões de ~45–60px de altura, 50px de cap é uma boa base.
   Pode ser alterado individualmente com --btn-cap. */
.gameOverPrimary,
.nextLevelButton,
.gameOverSecondary,
#savePlayer,
#resetProgress,
.btnGreen,.btnBlue,.btnYellow,.btnRed{
  --btn-cap:50px;
}



/* =========================================================
   v7.5.25 — botões definitivos em 3 slices horizontais
   Assets em assets/botoes/
   caps: 70x105px | middle: 19x105px
   ========================================================= */

:root{
  --nine-btn-cap:70px;
  --nine-btn-h:105px;
  --nine-btn-mid:19px;
}

/* Base para qualquer botão que use os novos assets.
   LEFT/RIGHT preservam a proporção 70x105; somente o miolo cresce. */
.sliceButton,
.assetButton,
.gameOverPrimary,
.nextLevelButton,
.gameOverSecondary,
.profileSave,
#savePlayer,
#resetProgress,
.dangerButton,
.btnGreen,
.btnBlue,
.btnYellow,
.btnRed{
  --btn-left:none;
  --btn-middle:none;
  --btn-right:none;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Pontas */
.sliceButton::before,
.assetButton::before,
.gameOverPrimary::before,
.nextLevelButton::before,
.gameOverSecondary::before,
.profileSave::before,
#savePlayer::before,
#resetProgress::before,
.dangerButton::before,
.btnGreen::before,
.btnBlue::before,
.btnYellow::before,
.btnRed::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    var(--btn-left) left center / auto 100% no-repeat,
    var(--btn-right) right center / auto 100% no-repeat;
}

/* Miolo.
   Sobreposição de 2px nas junções evita fio de antialias. */
.sliceButton::after,
.assetButton::after,
.gameOverPrimary::after,
.nextLevelButton::after,
.gameOverSecondary::after,
.profileSave::after,
#savePlayer::after,
#resetProgress::after,
.dangerButton::after,
.btnGreen::after,
.btnBlue::after,
.btnYellow::after,
.btnRed::after{
  content:"";
  position:absolute;
  left:calc(var(--nine-btn-cap) * var(--btn-scale,1) - 2px);
  right:calc(var(--nine-btn-cap) * var(--btn-scale,1) - 2px);
  top:0;
  bottom:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--btn-middle);
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}

/* CORES */
.assetGreen,
.assetTeal,
.sliceButton.green,
.btnGreen,
.gameOverPrimary,
.profileSave,
#savePlayer{
  --btn-left:url("../../botoes/bt-verde-left.webp");
  --btn-middle:url("../../botoes/bt-verde-middle.webp");
  --btn-right:url("../../botoes/bt-verde-right.webp");
}

.assetBlue,
.sliceButton.blue,
.btnBlue,
.gameOverSecondary{
  --btn-left:url("../../botoes/bt-azul-left.webp");
  --btn-middle:url("../../botoes/bt-azul-middle.webp");
  --btn-right:url("../../botoes/bt-azul-right.webp");
}

.assetYellow,
.sliceButton.yellow,
.btnYellow,
.nextLevelButton,
#unlockNextLevelBtn{
  --btn-left:url("../../botoes/bt-amarelo-left.webp");
  --btn-middle:url("../../botoes/bt-amarelo-middle.webp");
  --btn-right:url("../../botoes/bt-amarelo-right.webp");
}

.assetRed,
.sliceButton.red,
.btnRed,
#resetProgress,
.dangerButton{
  --btn-left:url("../../botoes/bt-vermelho-left.webp");
  --btn-middle:url("../../botoes/bt-vermelho-middle.webp");
  --btn-right:url("../../botoes/bt-vermelho-right.webp");
}

/* Mantém conteúdo acima das imagens */
.sliceButton > *,
.assetButton > *,
.gameOverPrimary > *,
.nextLevelButton > *,
.gameOverSecondary > *,
.profileSave > *,
#savePlayer > *,
#resetProgress > *,
.dangerButton > *,
.btnGreen > *,
.btnBlue > *,
.btnYellow > *,
.btnRed > *{
  position:relative;
  z-index:1;
}

/* Escala das pontas acompanha a altura real de cada botão.
   58px/105px, 54px/105px etc. ficam proporcionais. */
.assetButton{ --btn-scale:calc(58 / 105); }
@media(max-width:390px){
  .assetButton{ --btn-scale:calc(54 / 105); }
}
.gameOverPrimary,
.nextLevelButton,
.gameOverSecondary,
.profileSave,
#savePlayer,
#resetProgress,
.dangerButton,
.btnGreen,.btnBlue,.btnYellow,.btnRed{
  --btn-scale:calc(50 / 105);
}

/* Botão vermelho sem qualquer preenchimento CSS por baixo. */
#resetProgress,
.dangerButton{
  background-color:transparent!important;
  color:#fff!important;
}



/* =========================================================
   v7.5.26 — ajuste fino dos botões + rolagem mobile
   ========================================================= */

/* Variável de sobreposição. O padrão continua 2px. */
.sliceButton::after,
.assetButton::after,
.gameOverPrimary::after,
.nextLevelButton::after,
.gameOverSecondary::after,
.profileSave::after,
#savePlayer::after,
#resetProgress::after,
.dangerButton::after,
.btnGreen::after,
.btnBlue::after,
.btnYellow::after,
.btnRed::after{
  left:calc(var(--nine-btn-cap) * var(--btn-scale,1) - var(--btn-overlap,2px))!important;
  right:calc(var(--nine-btn-cap) * var(--btn-scale,1) - var(--btn-overlap,2px))!important;
}

/* Nos dois locais em que ainda aparecia um vão, o miolo avança mais
   para baixo das pontas, sem alterar visualmente os outros botões. */
#achievementsDone{
  --btn-overlap:9px;
}
#gameOver .gameOverPrimary,
#gameOver .gameOverSecondary,
#gameOver .nextLevelButton{
  --btn-overlap:9px;
}

/* Branco — mesmo sistema 70x105 / 19x105. */
.sliceButton.white,
.btnWhite,
#changeMode{
  --btn-left:url("../../botoes/bt-branco-left.webp");
  --btn-middle:url("../../botoes/bt-branco-middle.webp");
  --btn-right:url("../../botoes/bt-branco-right.webp");
}

/* Botões do tabuleiro */
#newGame,
#changeMode{
  --btn-scale:calc(50 / 105);
  --btn-overlap:5px;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  min-height:50px!important;
  height:50px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:0;
}
#newGame{
  --btn-left:url("../../botoes/bt-verde-left.webp");
  --btn-middle:url("../../botoes/bt-verde-middle.webp");
  --btn-right:url("../../botoes/bt-verde-right.webp");
  color:#07351a!important;
  text-shadow:none!important;
}
#changeMode{
  --btn-left:url("../../botoes/bt-branco-left.webp");
  --btn-middle:url("../../botoes/bt-branco-middle.webp");
  --btn-right:url("../../botoes/bt-branco-right.webp");
  color:#17466e!important;
  text-shadow:none!important;
}
#newGame::before,
#changeMode::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    var(--btn-left) left center / auto 100% no-repeat,
    var(--btn-right) right center / auto 100% no-repeat;
}
#newGame::after,
#changeMode::after{
  content:"";
  position:absolute;
  left:calc(70px * var(--btn-scale) - var(--btn-overlap))!important;
  right:calc(70px * var(--btn-scale) - var(--btn-overlap))!important;
  top:0;
  bottom:0;
  z-index:-2;
  pointer-events:none;
  background-image:var(--btn-middle);
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}

/* Modo Tempo no celular: a rolagem acontece na Home inteira.
   Nenhum limite de altura/overflow no bloco de níveis. */
@media (max-width:699px){
  #menu.mode-selected{
    overflow:hidden!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
  #menu.mode-selected .homeScreen{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    padding-bottom:max(
      150px,
      calc(130px + env(safe-area-inset-bottom,0px)),
      calc(130px + var(--safe-area-inset-bottom,0px))
    )!important;
  }
  #menu.mode-selected #choices,
  #menu.mode-selected #choices.timeList{
    display:flex!important;
    flex-direction:column!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    flex:none!important;
    padding-bottom:36px!important;
    touch-action:pan-y!important;
  }
}


/* =========================================================
   EVOLUTION v2 — evolução manual do Lajotinha
   ========================================================= */
.homeMascotRow{
  position:relative!important;
  overflow:visible!important;
}
.evolutionReadyBubble{
  position:absolute!important;
  left:50%!important;
  bottom:60%!important;
  transform:translateX(18px)!important;
  width:112px!important;
  height:68px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:8!important;
  cursor:pointer!important;
  overflow:visible!important;
  animation:evolutionBubbleFloat 1.35s ease-in-out infinite alternate;
}
.evolutionReadyBubble.hidden{display:none!important}
.evolutionReadyBubble img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
  filter:drop-shadow(0 5px 7px rgba(37,101,132,.14))!important;
}
.evolutionReadyBubble span{
  position:absolute!important;
  left:50%!important;
  top:43%!important;
  transform:translate(-50%,-50%)!important;
  width:76%!important;
  color:#17466e!important;
  font-size:11px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  text-align:center!important;
  white-space:normal!important;
  pointer-events:none!important;
}
@keyframes evolutionBubbleFloat{
  from{transform:translateX(18px) translateY(0)}
  to{transform:translateX(18px) translateY(-5px)}
}
.trajectoryItem.evolutionFrom .trajectoryMascot{
  animation:evolutionOldPulse .62s ease-in-out 1;
}
.trajectoryItem.evolutionTarget{
  opacity:1!important;
}
.trajectoryItem.evolutionTarget .trajectoryMascot{
  opacity:.4!important;
  filter:grayscale(.6) drop-shadow(0 5px 6px rgba(36,102,132,.06))!important;
}
.trajectoryItem.evolutionReveal .trajectoryMascot{
  animation:evolutionReveal 1.05s cubic-bezier(.16,.82,.22,1) forwards!important;
}
.trajectoryItem.evolutionReveal .trajectoryInfo{
  animation:evolutionInfoReveal .9s ease forwards!important;
}
@keyframes evolutionOldPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes evolutionReveal{
  0%{
    opacity:.4;
    filter:grayscale(.6) drop-shadow(0 5px 6px rgba(36,102,132,.06));
    transform:scale(.88);
  }
  48%{
    opacity:1;
    filter:grayscale(0) brightness(1.2) drop-shadow(0 9px 16px rgba(31,180,160,.32));
    transform:scale(1.12);
  }
  100%{
    opacity:1;
    filter:grayscale(0) drop-shadow(0 7px 8px rgba(36,102,132,.14));
    transform:scale(1);
  }
}
@keyframes evolutionInfoReveal{
  0%{opacity:.28}
  55%,100%{opacity:1}
}
@media(max-width:390px){
  .evolutionReadyBubble{
    width:98px!important;
    height:60px!important;
    transform:translateX(15px)!important;
  }
  @keyframes evolutionBubbleFloat{
    from{transform:translateX(15px) translateY(0)}
    to{transform:translateX(15px) translateY(-4px)}
  }
  .evolutionReadyBubble span{font-size:10px!important}
}


/* =========================================================
   v7.9.1 — rolagem dos níveis + frames + alerta Conquistas
   ========================================================= */

/* Mobile/App: a página inteira do menu volta a ser a única área rolável.
   Assim os últimos níveis passam completamente acima da toolbar fixa. */
@media (max-width:699px){
  #menu.mode-selected{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  #menu.mode-selected .homeScreen{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    touch-action:pan-y!important;
    padding-bottom:max(
      205px,
      calc(180px + env(safe-area-inset-bottom,0px)),
      calc(180px + var(--safe-area-inset-bottom,0px))
    )!important;
  }
  #menu.mode-selected #choices,
  #menu.mode-selected #choices.timeList,
  #menu.mode-selected #choices.movesList,
  #menu.mode-selected #choices.targetList,
  #menu.mode-selected #choices.pointsList{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    flex:none!important;
    padding-bottom:70px!important;
    touch-action:pan-y!important;
  }
}

/* Corrige a emenda de 1px nas três partes do botão Voltar. */
#achievementsDone{
  --btn-overlap:12px!important;
}

/* Jogador e Ajustes usam exatamente o mesmo quadro-base do Game Over. */
#profile .profileModal,
#settings .settingsModal{
  width:min(94vw,500px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
#profile .frameWhite .sliceFrame__top,
#settings .frameWhite .sliceFrame__top{
  background-image:url("../../ui/frames/card-branco-top.webp")!important;
}
#profile .frameWhite .sliceFrame__middle,
#settings .frameWhite .sliceFrame__middle{
  background-image:url("../../ui/frames/card-branco-middle.webp")!important;
}
#profile .frameWhite .sliceFrame__bottom,
#settings .frameWhite .sliceFrame__bottom{
  background-image:url("../../ui/frames/card-branco-bottom.webp")!important;
}

/* Troféu: brilho pulsante apenas quando existe recompensa para coletar.
   A arte deve ser salva em assets/icones/raios-trofeu.webp */
#menu #achievementsBtn .homeToolSvg{
  isolation:isolate!important;
}
#menu #achievementsBtn .homeToolSvg::before{
  content:"";
  position:absolute;
  left:50%;
  top:-10px;
  width:140%;
  height:140%;
  transform:translate(-50%,-50%) scale(.70);
  background:url("../../icones/raios-trofeu.webp") center/contain no-repeat;
  opacity:0;
  pointer-events:none;
  z-index:-1;
}
#menu #achievementsBtn.hasReward .homeToolSvg::before{
  animation:achievementTrophyGlow 1.05s ease-in-out infinite alternate;
}
#menu #achievementsBtn .homeToolSvg img{
  position:relative!important;
  z-index:2!important;
}
@keyframes achievementTrophyGlow{
  0%{
    transform:translate(-50%,-50%) scale(.70);
    opacity:.5;
  }
  100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
  }
}
@media (prefers-reduced-motion:reduce){
  #menu #achievementsBtn.hasReward .homeToolSvg::before{
    animation:none!important;
    transform:translate(-50%,-50%) scale(1)!important;
    opacity:.75!important;
  }
}


/* =========================================================
   v7.9.2 — recompensas, Game Over, HUD, Ajustes e Mina
   ========================================================= */
.homeHudAsset b,.hudAsset b{left:57%!important}
.homeHudAsset:nth-child(2) b,.hudGemAsset b{left:57%!important}

.achievementCard.canClaim .achievementRewardState{
  --reward-btn-scale:calc(42 / 105);
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  min-width:100px!important;height:42px!important;padding:0 16px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:#17466e!important;font-weight:1000!important;z-index:0!important;
}
.achievementCard.canClaim .achievementRewardState::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url("../../botoes/bt-amarelo-left.webp") left center/auto 100% no-repeat,
    url("../../botoes/bt-amarelo-right.webp") right center/auto 100% no-repeat;
}
.achievementCard.canClaim .achievementRewardState::after{
  content:"";position:absolute;
  left:calc(70px * var(--reward-btn-scale) - 7px);right:calc(70px * var(--reward-btn-scale) - 7px);
  top:0;bottom:0;z-index:-2;pointer-events:none;
  background:url("../../botoes/bt-amarelo-middle.webp") center/auto 100% repeat-x;
}


.volumeIcon{padding:5px!important;background:transparent!important;box-shadow:none!important}
.volumeIcon img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.settingsLinks button>span{background:transparent!important;border-radius:0!important}
.settingsLinks button>span img{width:30px!important;height:30px!important;object-fit:contain!important;display:block!important}
.settingsLinks button div strong{color:#1597a3!important}
#profile .profileTopbar,#settings .settingsHeadMain{position:relative!important;padding-left:52px!important}
#closeProfileTop,#closeSettings{
  position:absolute!important;left:0!important;right:auto!important;top:0!important;width:44px!important;height:44px!important;
}

.tileSkinCard{position:relative!important}
.tileSkinCard.selected .tileSkinMeta{min-height:0!important;height:0!important;margin:0!important}
.tileSkinCheck{
  position:absolute!important;top:9px!important;right:9px!important;width:27px!important;height:27px!important;
  object-fit:contain!important;z-index:4!important;filter:drop-shadow(0 3px 4px rgba(21,133,105,.18))!important;
}


/* =========================================================
   v7.9.3 — avatar, Gem Streak e botões
   ========================================================= */

/* Foto do jogador na toolbar: mesmo espaço do ícone, corte circular. */
#menu .homeTool.profileTool #avatarMini{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

/* Todos os botões que usam assets verdes, azuis ou vermelhos têm texto branco. */
.assetGreen,.assetTeal,.assetBlue,.assetRed,
.sliceButton.green,.sliceButton.blue,.sliceButton.red,
.btnGreen,.btnBlue,.btnRed,
.gameOverPrimary,.gameOverSecondary,
.profileSave,#savePlayer,#resetProgress,.dangerButton{
  color:#fff!important;
}
.assetGreen *,.assetTeal *,.assetBlue *,.assetRed *,
.sliceButton.green *,.sliceButton.blue *,.sliceButton.red *,
.btnGreen *,.btnBlue *,.btnRed *,
.gameOverPrimary *,.gameOverSecondary *,
.profileSave *,#savePlayer *,#resetProgress *,.dangerButton *{
  color:#fff!important;
}

/* Tamanho solicitado para as artes das conquistas. */
.achievementBadgeInner img{
  height:120px!important;
}


/* v7.9.4 — botões, Ajustes e skin Chocolate */
#achievementsDone,#saveProfile{color:#fff!important}
#achievementsDone *,#saveProfile *{color:#fff!important}
.settingsLinks button div strong{color:#1597a3!important}
.settingsLinks button div small{color:#6c899a!important}
.settingsLinks button>b{color:#84a9ba!important}
.choice.active .levelNameVisual .levelXpMark{color:#6949cd!important}


/* =========================================================
   v7.9.6 — popup padrão totalmente personalizado
   ========================================================= */
#nineGamePopup .nineGamePopupCard{
  width:min(90vw,430px)!important;
  margin:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  color:#17466e!important;
}
#nineGamePopup .nineGamePopupFrame{
  position:relative!important;
  width:100%!important;
  isolation:isolate!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#nineGamePopup .nineGamePopupFrameSkin{
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  display:grid!important;
  grid-template-rows:92px minmax(0,1fr) 92px!important;
}
#nineGamePopup .nineGamePopupFrameTop,
#nineGamePopup .nineGamePopupFrameMiddle,
#nineGamePopup .nineGamePopupFrameBottom{
  width:100%!important;
  min-width:0!important;
  background-position:center!important;
  background-size:100% 100%!important;
}
#nineGamePopup .nineGamePopupFrameTop{
  background:url("../../ui/frames/card-branco-top.webp") center/100% 100% no-repeat!important;
}
#nineGamePopup .nineGamePopupFrameMiddle{
  background:url("../../ui/frames/card-branco-middle.webp") center/100% 100% repeat-y!important;
}
#nineGamePopup .nineGamePopupFrameBottom{
  background:url("../../ui/frames/card-branco-bottom.webp") center/100% 100% no-repeat!important;
}
#nineGamePopup .nineGamePopupFrameContent{
  position:relative!important;
  padding:28px 24px 30px!important;
  text-align:center!important;
}
#nineGamePopup .nineGamePopupMascot{
  width:92px!important;
  height:78px!important;
  object-fit:contain!important;
  display:block!important;
  margin:-8px auto 2px!important;
}
#nineGamePopup .nineGamePopupActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  margin-top:15px!important;
}
#nineGamePopup .nineGamePopupActions.singleAction{
  grid-template-columns:1fr!important;
}
#nineGamePopup .ninePopupOk,
#nineGamePopup .ninePopupCancel{
  --btn-scale:calc(50 / 105);
  --btn-overlap:7px;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  height:50px!important;
  min-height:50px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-weight:1000!important;
  z-index:0!important;
}
#nineGamePopup .ninePopupOk{color:#fff!important}
#nineGamePopup .ninePopupCancel{color:#17466e!important}
#nineGamePopup .ninePopupOk::before,
#nineGamePopup .ninePopupCancel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
#nineGamePopup .ninePopupOk::after,
#nineGamePopup .ninePopupCancel::after{
  content:"";
  position:absolute;
  left:calc(70px * var(--btn-scale) - var(--btn-overlap));
  right:calc(70px * var(--btn-scale) - var(--btn-overlap));
  top:0;
  bottom:0;
  z-index:-2;
  pointer-events:none;
  background-position:center;
  background-size:auto 100%;
  background-repeat:repeat-x;
}
#nineGamePopup .ninePopupOk::before{
  background:
    url("../../botoes/bt-verde-left.webp") left center/auto 100% no-repeat,
    url("../../botoes/bt-verde-right.webp") right center/auto 100% no-repeat!important;
}
#nineGamePopup .ninePopupOk::after{
  background-image:url("../../botoes/bt-verde-middle.webp")!important;
}
#nineGamePopup .ninePopupCancel::before{
  background:
    url("../../botoes/bt-branco-left.webp") left center/auto 100% no-repeat,
    url("../../botoes/bt-branco-right.webp") right center/auto 100% no-repeat!important;
}
#nineGamePopup .ninePopupCancel::after{
  background-image:url("../../botoes/bt-branco-middle.webp")!important;
}


/* =========================================================
   v7.9.7 — fundos personalizados adicionais
   ========================================================= */
:root{
  --white-frame-top-h:76px;
  --white-frame-bottom-h:76px;
}
.quickBoostModal,
#aboutModal .infoModal,
#supportModal .infoModal,
#tutorial .ruleCard,
#tutorial .benefitExplain,
#shop .gemConversionCard,
#shop .tileSkinCard,
#gameOver .resultXpCard,
#gameOver .endMetric{
  position:relative!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:
    url("../../ui/frames/card-branco-top.webp"),
    url("../../ui/frames/card-branco-middle.webp"),
    url("../../ui/frames/card-branco-bottom.webp")!important;
  background-repeat:no-repeat,repeat-y,no-repeat!important;
  background-position:top center,center center,bottom center!important;
  background-size:100% var(--white-frame-top-h),100% calc(100% - (var(--white-frame-top-h) + var(--white-frame-bottom-h))),100% var(--white-frame-bottom-h)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.quickBoostModal,
#aboutModal .infoModal,
#supportModal .infoModal{
  padding:24px 20px 24px!important;
}
#tutorial .ruleCard,
#tutorial .benefitExplain{
  padding:18px 18px 20px!important;
}
#shop .gemConversionCard,
#shop .tileSkinCard{
  padding:14px 14px 16px!important;
}
#gameOver .resultXpCard{
  padding:12px 14px!important;
}
#gameOver .endMetric{
  padding:10px 8px!important;
}
#gameOver .endMetric small,
#gameOver .endMetric b,
#gameOver .resultXpCard small,
#gameOver .resultXpCard strong{
  position:relative;
  z-index:1;
}
#gameOver .endMetric img,
#gameOver .resultXpCard img{
  position:relative;
  z-index:1;
}

/* Botões fechar personalizados em Sobre e Suporte */
#closeAbout,
#closeSupport{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("../../botoes/bt-fechar.webp") center/contain no-repeat!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  padding:0!important;
}
#closeAbout::before,
#closeSupport::before{
  content:none!important;
}

/* Refinos visuais */
.quickBoostHead,
#aboutModal .settingsHead,
#supportModal .settingsHead{
  margin-bottom:10px!important;
}
#shop .gemConversionCard .buyBtn,
#shop .tileSkinCard .buyBtn{
  position:relative;
  z-index:1;
}


/* =========================================================
   v7.9.8 — varredura final de fundos / cards residuais
   ========================================================= */

/* Telas longas usam a arte oficial de fundo em vez de cor/gradiente puro. */
#achievements,
#tutorial,
#shop,
#firstPlayTutorial,
#trajectory.overlay{
  background-color:#bceeff!important;
  background-image:url("../../backgrounds/classica.webp")!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
#trajectory .trajectoryPage{
  background:transparent!important;
}

/* Frame branco reaproveitado nos cards que ainda estavam 100% em CSS. */
#tutorial .modesGuide,
#telemetryModal .telemetryModalCard,
#telemetryModal .telemetryStat,
#aboutModal .aboutFacts>div,
.achievementToast{
  --nine-residual-card-top:38px;
  --nine-residual-card-bottom:38px;
  position:relative!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:
    url("../../ui/frames/card-branco-top.webp"),
    url("../../ui/frames/card-branco-middle.webp"),
    url("../../ui/frames/card-branco-bottom.webp")!important;
  background-repeat:no-repeat,repeat-y,no-repeat!important;
  background-position:top center,center center,bottom center!important;
  background-size:
    100% var(--nine-residual-card-top),
    100% calc(100% - (var(--nine-residual-card-top) + var(--nine-residual-card-bottom))),
    100% var(--nine-residual-card-bottom)!important;
  box-shadow:none!important;
}
#tutorial .modesGuide{
  --nine-residual-card-top:44px;
  --nine-residual-card-bottom:44px;
  padding:18px 18px 20px!important;
}
#tutorial .guideGrid div{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#telemetryModal .telemetryModalCard{
  --nine-residual-card-top:72px;
  --nine-residual-card-bottom:72px;
  padding:26px 22px 28px!important;
  overflow:visible!important;
}
#telemetryModal .telemetryStat{
  --nine-residual-card-top:24px;
  --nine-residual-card-bottom:24px;
  padding:12px 13px!important;
}
#aboutModal .aboutFacts>div{
  --nine-residual-card-top:24px;
  --nine-residual-card-bottom:24px;
  padding:12px!important;
}
.achievementToast{
  --nine-residual-card-top:30px;
  --nine-residual-card-bottom:30px;
  background-color:transparent!important;
}

/* O toast continua recortando a arte da conquista, mas não usa caixa CSS branca. */
.achievementToastIcon{
  position:relative!important;
  z-index:1!important;
}
.achievementToastCopy{
  position:relative!important;
  z-index:1!important;
}

/* Dentro do card de conquista, a recompensa deixa de criar um segundo "card CSS". */
.achievementRewardWrap,
.achievementCard.canClaim .achievementRewardWrap,
.achievementRewardWrap.claimed{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Fechar da Telemetria segue o mesmo padrão de Sobre/Suporte. */
#closeTelemetry{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent url("../../botoes/bt-fechar.webp") center/contain no-repeat!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  padding:0!important;
}
#closeTelemetry::before{content:none!important}

/* =========================================================
   v7.9.10 — HUD da música + cards da Mina com slice frame real
   ========================================================= */
.gameHeaderAssets{grid-template-columns:1fr 1fr auto!important;align-items:center!important}
.musicHudButton{
  width:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:0 3px;border:0;border-radius:16px;background:rgba(255,255,255,.9);color:#17466e;
  box-shadow:0 6px 16px rgba(24,89,127,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.musicHudButton:active{transform:scale(.97)}
.musicHudButton img{width:21px;height:21px;object-fit:contain;display:block}
.musicHudButton span{font-size:8px;line-height:1;font-weight:1000;letter-spacing:.04em}
@media(max-width:390px){
  .gameHeaderAssets{grid-template-columns:1fr 1fr 48px!important;gap:7px!important}
  .musicHudButton{width:48px;height:48px;border-radius:14px}
  .musicHudButton span{font-size:7px}
}

/* Cards pequenos da Mina agora usam o mesmo componente sliceFrame real,
   evitando o aspecto de top.webp esticado. */
#shop .gemConversionCard,
#shop .tileSkinCard{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#shop .mineMiniFrame{
  width:100%;
  overflow:hidden!important;
}
#shop .mineMiniFrame .sliceFrame__skin{
  grid-template-rows:32px minmax(0,1fr) 32px!important;
}
#shop .mineMiniFrame .sliceFrame__content{
  padding:11px 10px 12px!important;
}
#shop .gemConversionInner{
  min-height:78px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:4px;
  color:#17466e;
}
#shop .tileSkinCard .mineMiniFrame .sliceFrame__skin{
  grid-template-rows:40px minmax(0,1fr) 40px!important;
}
#shop .tileSkinCard .mineMiniFrame .sliceFrame__content{
  padding:12px 12px 14px!important;
}
#shop .tileSkinCardInner{
  min-height:136px;
  color:#17466e;
}
#shop .tileSkinCard.selected .mineMiniFrame{
  filter:drop-shadow(0 8px 16px rgba(205,151,13,.14));
}
#shop .tileSkinCard.locked .mineMiniFrame{opacity:.9}
#shop .tileSkinCard.selected .tileSkinMeta .owned,
#shop .tileSkinCard.selected .tileSkinMeta .active{color:#c08908!important}
@media(max-width:390px){
  #shop .mineMiniFrame .sliceFrame__skin{grid-template-rows:28px minmax(0,1fr) 28px!important}
  #shop .mineMiniFrame .sliceFrame__content{padding:9px 8px 10px!important}
  #shop .gemConversionInner{min-height:70px}
  #shop .tileSkinCard .mineMiniFrame .sliceFrame__skin{grid-template-rows:36px minmax(0,1fr) 36px!important}
  #shop .tileSkinCard .mineMiniFrame .sliceFrame__content{padding:10px 10px 12px!important}
  #shop .tileSkinCardInner{min-height:124px}
}



/* =========================================================
   v7.9.11 — correções finais de frames pequenos
   ========================================================= */
#shop .mineUseNote{
  background:transparent!important;
  border:1px solid rgba(53,129,173,.2)!important;
  box-shadow:none!important;
  background-image:none!important;
}
#shop .gemConversionCard,
#shop .tileSkinCard,
#tutorial .ruleCard,
#gameOver .resultXpCard,
#gameOver .endMetric{
  display:block!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
#shop .gemConversionCard .mineMiniFrame{width:100%!important}
#shop .gemConversionCard .mineMiniFrame .sliceFrame__skin{grid-template-rows:30px minmax(0,1fr) 30px!important}
#shop .gemConversionCard .mineMiniFrame .sliceFrame__content{padding:10px 9px 11px!important}
#shop .gemConversionInner{min-height:72px!important}
#tutorial .ruleCard{margin-top:11px!important}
#tutorial .tutorialRuleFrame .sliceFrame__skin{grid-template-rows:44px minmax(0,1fr) 44px!important}
#tutorial .tutorialRuleFrame .sliceFrame__content{padding:18px 18px 20px!important}
#tutorial .tutorialRuleInner{text-align:left;color:#17466e}
#tutorial .tutorialRuleInner .ruleCopy h3{color:#17466e!important}
#tutorial .tutorialRuleInner .ruleCopy p{color:#4f7693!important}
#tutorial .tutorialRuleInner > img{display:block;width:100%;margin-top:12px;border-radius:15px;border:0!important;height:auto;max-height:180px;object-fit:contain;background:transparent!important}
#gameOver .resultXpFrame .sliceFrame__skin{grid-template-rows:36px minmax(0,1fr) 36px!important}
#gameOver .resultXpFrame .sliceFrame__content{padding:12px 14px!important}
#gameOver .resultXpInner{display:flex;align-items:center;justify-content:center;gap:10px;color:#17466e}
#gameOver .endMetricFrame .sliceFrame__skin{grid-template-rows:30px minmax(0,1fr) 30px!important}
#gameOver .endMetricFrame .sliceFrame__content{padding:10px 8px!important}
#gameOver .endMetricInner{text-align:center;color:#17466e}
#gameOver .endMetricInner img{width:28px;height:28px;object-fit:contain}
#gameOver .endMetricInner b{display:block;font-size:18px;color:#17466e}
#gameOver .endMetricInner small{display:block;font-size:9px;color:#6c899a}
@media(max-width:390px){
  #shop .gemConversionCard .mineMiniFrame .sliceFrame__skin{grid-template-rows:28px minmax(0,1fr) 28px!important}
  #shop .gemConversionCard .mineMiniFrame .sliceFrame__content{padding:8px 7px 9px!important}
  #tutorial .tutorialRuleFrame .sliceFrame__skin{grid-template-rows:38px minmax(0,1fr) 38px!important}
  #tutorial .tutorialRuleFrame .sliceFrame__content{padding:16px 16px 18px!important}
  #gameOver .resultXpFrame .sliceFrame__skin{grid-template-rows:32px minmax(0,1fr) 32px!important}
  #gameOver .endMetricFrame .sliceFrame__skin{grid-template-rows:26px minmax(0,1fr) 26px!important}
}



/* =========================================================
   v7.9.12 — notas da Mina + WIN branco
   ========================================================= */
/* shopNote e goldShopNote voltam ao mesmo caráter visual do mineUseNote. */
#shop .shopNote,
#shop .shopNote.goldShopNote,
#shop .goldShopNote{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:12px 0 9px!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  text-align:left!important;
  background:transparent!important;
  background-image:none!important;
  border:1px solid rgba(53,129,173,.2)!important;
  box-shadow:none!important;
  color:#5c7f94!important;
}
#shop .shopNote img,
#shop .shopNote.goldShopNote img{width:46px!important;height:46px!important;object-fit:contain!important}
#shop .shopNote span,
#shop .shopNote.goldShopNote span{color:#5c7f94!important}
#shop .shopNote b,
#shop .shopNote.goldShopNote b{color:#17466e!important}


/* A versão WIN usa card branco no sliceFrame__skin. */
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__top{background-image:url("../../ui/frames/card-branco-top.webp")!important}
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__middle{background-image:url("../../ui/frames/card-branco-middle.webp")!important}
#gameOver .resultScreen.resultWin .resultBodyFrame .sliceFrame__bottom{background-image:url("../../ui/frames/card-branco-bottom.webp")!important}




/* =========================================================
   v7.9.13 — centralização dos cards de recompensa
   ========================================================= */
/* Recompensa da Mina: manter um único card centralizado. */
#mineRewardAd{
  width:100%!important;
  max-width:none!important;
  display:flex!important;
  justify-content:center!important;
  align-items:stretch!important;
  margin:0 auto 14px!important;
}
#mineRewardAd .mineImageCard{
  width:min(100%,280px)!important;
  max-width:280px!important;
  margin:0 auto!important;
  flex:none!important;
}

/* Recompensas em Conquistas: manter o card centralizado no bloco. */
.achievementRewardWrap,
.achievementProgressWrap{
  margin:0 auto!important;
  justify-self:center!important;
  align-self:center!important;
}
.achievementRewardWrap{max-width:330px!important}



/* =========================================================
   v7.9.16 — seleção de níveis: scroll único + safe bottom
   ========================================================= */
/* Em modo selecionado, somente a homeScreen rola. Isso elimina o
   conflito histórico entre #menu e .homeScreen e garante que a lista
   Tempo (1–10 min) alcance os últimos níveis acima da toolbar fixa. */
@media (max-width:699px){
  #menu.mode-selected,
  html[data-nine-platform="android"] #menu.mode-selected,
  html[data-nine-platform="ios"] #menu.mode-selected{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    touch-action:auto!important;
  }

  #menu.mode-selected .homeScreen,
  html[data-nine-platform="android"] #menu.mode-selected .homeScreen,
  html[data-nine-platform="ios"] #menu.mode-selected .homeScreen{
    box-sizing:border-box!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
    padding-bottom:max(
      190px,
      calc(170px + env(safe-area-inset-bottom,0px)),
      calc(170px + var(--safe-area-inset-bottom,0px))
    )!important;
    scroll-padding-bottom:max(
      190px,
      calc(170px + env(safe-area-inset-bottom,0px)),
      calc(170px + var(--safe-area-inset-bottom,0px))
    )!important;
  }
  #menu.mode-selected .homeScreen::-webkit-scrollbar,
  html[data-nine-platform="android"] #menu.mode-selected .homeScreen::-webkit-scrollbar,
  html[data-nine-platform="ios"] #menu.mode-selected .homeScreen::-webkit-scrollbar{
    display:none!important;
  }

  #menu.mode-selected #choices,
  #menu.mode-selected #choices.timeList,
  #menu.mode-selected #choices.movesList,
  #menu.mode-selected #choices.targetList,
  #menu.mode-selected #choices.pointsList{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    flex:none!important;
    margin:0!important;
    padding-bottom:0!important;
    touch-action:pan-y!important;
  }

  /* Spacer estrutural: fica dentro do fluxo rolável e garante que o último
     card consiga subir completamente acima da toolbar, independentemente
     da altura do aparelho. */
  #menu.mode-selected #choices::after{
    content:"";
    display:block;
    flex:0 0 max(
      128px,
      calc(108px + env(safe-area-inset-bottom,0px)),
      calc(108px + var(--safe-area-inset-bottom,0px))
    );
    width:100%;
    pointer-events:none;
  }
}



/* =========================================================
   v7.9.17 — onboarding Home + seleção de níveis + gestos
   ========================================================= */
.homeModeCta{
  width:min(92%,520px);margin:14px auto 20px;min-height:72px;padding:14px 22px;
  border:2px solid rgba(24,128,157,.42);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(225,249,255,.94));
  box-shadow:0 10px 28px rgba(36,103,131,.16),inset 0 1px rgba(255,255,255,.9);
  color:#126f87;font-size:17px;font-weight:1000;letter-spacing:.025em;text-align:center;
  position:relative;overflow:hidden;
}
.homeModeCta::after{content:"›";display:inline-block;margin-left:10px;font-size:28px;line-height:.6;vertical-align:-2px}
.homeModeCta.firstAttention{animation:homeModeCtaPulse 1.65s ease-in-out 3}
@keyframes homeModeCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025);box-shadow:0 13px 32px rgba(36,103,131,.23),0 0 0 7px rgba(92,213,224,.09)}}
#menu.mode-selected .homeModeCta{display:none!important}

/* Home de entrada: deixa uma única ação principal clara. */
#menu:not(.mode-selected) .homeSectionTitle,
#menu:not(.mode-selected) .modeSelectRow,
#menu:not(.mode-selected) #choices{display:none!important}

/* Seleção de modo/nível: saem logo + HUD; Lajotinha continua como atalho da Trajetória. */
#menu.mode-selected .homeHud,
#menu.mode-selected .homeLogo{display:none!important}
#menu.mode-selected .homeMascotRow{
  display:flex!important;max-height:none!important;height:140px!important;opacity:1!important;
  overflow:visible!important;margin:2px auto 3px!important;transform:none!important;
  align-items:center!important;justify-content:center!important;position:relative!important;
}
#menu.mode-selected .homeMascot{height:86px!important;max-height:86px!important;width:auto!important;object-fit:contain!important}
#menu.mode-selected .modeSelectRow{margin:4px auto 8px!important}

@media (max-width:699px){
  #menu:not(.mode-selected) .homeScreen{padding-bottom:max(104px,calc(88px + env(safe-area-inset-bottom,0px)))!important}
  #menu.mode-selected .homeScreen{padding-top:max(6px,env(safe-area-inset-top,0px))!important}
}


/* =========================================================
   v7.10.0 — Home, modos, Mina, missões e frames
   ========================================================= */
#menu:not(.mode-selected) .homeMascotRow{height:178px!important;margin:2px 0 4px!important}
#menu:not(.mode-selected) .homeMascot{height:190px!important;max-height:190px!important;filter:drop-shadow(0 13px 14px rgba(41,112,139,.20))}
#menu.mode-selected .homeMascotRow{height:140px!important}
.evolutionReadyBubble{bottom:60%!important}
.modeDescription{display:none;margin:2px auto 9px;max-width:590px;padding:0 16px;text-align:center;color:#587f96;font-size:12px;font-weight:800;line-height:1.35}
#menu.mode-selected .modeDescription{display:block}
#menu .choice.active,#menu .choice.active *{color:#17466e!important}
#menu .choice.active .levelXpMark{color:#6949cd!important}
#menu .choice.active .recordMetaLabel{color:#567b91!important}
#menu .choice.active .iconXP{color:#6949cd!important}

/* Recompensa de conquistas: largura sempre contida na coluna do card. */
.achievementBody{min-width:0!important;width:100%!important;overflow:hidden!important}
.achievementRewardWrap,.achievementProgressWrap{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:7px 0 0!important;justify-self:stretch!important;overflow:hidden!important}
.achievementRewardInfo{min-width:0!important;max-width:100%!important;overflow:hidden!important}
.achievementRewardState{flex:none!important}

/* Missões do dia */
.dailyMissionsBlock{margin:10px 0 24px;padding:14px;border:1px solid rgba(47,135,177,.14);border-radius:22px;background:rgba(255,255,255,.58)}
.dailyMissionsHead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.dailyMissionsHead small{display:block;color:#6e91a5;font-size:8px;font-weight:1000;letter-spacing:.08em}
.dailyMissionsHead h3{margin:2px 0 0!important;color:#17466e!important;font-size:21px!important}
.dailyMissionsHead>span{color:#5f8499;font-size:11px;font-weight:1000}
.dailyMissionsList{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dailyMissionCard{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;min-width:0;padding:9px;border-radius:15px;background:rgba(248,252,255,.86);border:1px solid rgba(51,135,174,.12)}
.dailyMissionCard.done{background:rgba(225,250,237,.85);border-color:rgba(49,176,105,.18)}
.dailyMissionIcon img{width:34px;height:34px;object-fit:contain}
.dailyMissionCopy{min-width:0}.dailyMissionCopy strong{display:block;color:#17466e;font-size:11px;line-height:1.25}.dailyMissionDescription{display:block;margin-top:2px;color:#5f7f93;font-size:10px;font-weight:normal;line-height:1.2}.dailyMissionCopy small{display:block;margin-top:4px;color:#6d8a9c;font-size:9px;font-weight:900}
.dailyMissionProgress{height:5px;margin-top:7px;border-radius:999px;background:rgba(64,135,167,.11);overflow:hidden}.dailyMissionProgress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#27c3b7,#32b8d6)}
@media(max-width:430px){.dailyMissionsList{grid-template-columns:1fr}.dailyMissionsBlock{padding:11px}.dailyMissionCard{grid-template-columns:34px 1fr}.dailyMissionIcon img{width:30px;height:30px}}

/* Mina como hub de itens valiosos */
#shop .mineHero h2{font-size:31px!important}#shop .mineHero p{max-width:340px!important}
.mineTabs{position:sticky;top:0;z-index:9;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:4px 0 14px;padding:7px;border-radius:20px;background:rgba(223,247,252,.94);backdrop-filter:blur(9px);border:1px solid rgba(43,130,168,.12)}
.mineTab{min-width:0;border:0;background:transparent;padding:6px 3px;border-radius:14px;color:#17466e;font-weight:1000;font-size:9px}.mineTab img{display:block;width:39px;height:39px;object-fit:contain;margin:0 auto 2px}.mineTab span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mineTab.active{background:rgba(255,255,255,.88);box-shadow:0 5px 13px rgba(43,118,151,.12);color:#078794}.mineTabPanel{display:none}.mineTabPanel.active{display:block}
.mineComingSoon{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 22px;border-radius:24px;background:rgba(255,255,255,.68);border:1px solid rgba(45,128,168,.13)}.mineComingSoon img{width:96px;height:96px;object-fit:contain}.mineComingSoon h3{color:#17466e!important;font-size:25px!important;margin:8px 0 5px!important}.mineComingSoon p{max-width:440px;color:#5e8298!important;font-size:13px!important}
.missionUnlock{display:block;color:#36758f;font-size:9px;font-weight:1000;line-height:1.25;text-align:center;padding:5px 6px;border-radius:10px;background:rgba(224,245,251,.9);border:1px solid rgba(39,138,175,.13)}

/* Popups de Ajustes usando frame branco top/middle/bottom real. */
.framedSettingsModal{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.settingsInfoFrame{width:100%!important;min-height:100%!important}.settingsInfoFrame .sliceFrame__skin{grid-template-rows:44px minmax(0,1fr) 44px!important}.settingsInfoFrame .sliceFrame__content{padding:22px 24px!important;color:#17466e!important}
#aboutModal .infoModal p,#supportModal .infoModal p,#telemetryModal .telemetryIntro{color:#5d7f94!important}
#aboutModal .settingsHead h2,#supportModal .settingsHead h2,#telemetryModal .settingsHead h2{color:#17466e!important}
@media(max-width:430px){.settingsInfoFrame .sliceFrame__skin{grid-template-rows:34px minmax(0,1fr) 34px!important}.settingsInfoFrame .sliceFrame__content{padding:17px 17px!important}}

/* Primeiro tutorial: botão verde oficial left/middle/right. */
#firstPlayGo.sliceButton.green{width:min(100%,260px)!important;margin:0 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;color:#fff!important}


/* v7.11.18 — mobile + backgrounds + saldos compactos */
#shop .shopWallets.threeWallets .shopWallet{background:#fff!important;min-height:76px!important;align-items:center!important}
#shop .shopWallets.threeWallets .shopWallet>div{min-width:0!important}
#shop .shopWallets.threeWallets .shopWallet span{display:block;margin-top:2px;color:#6c8b9d;font-size:7px;font-weight:800;line-height:1.12;white-space:normal}
#shop .greenWallet{border-color:#64d99a!important}#shop .goldWallet{border-color:#f0c74a!important}#shop .purpleWallet{border-color:#ba68dd!important}
.currencyRoleGrid{display:none!important}
.backgroundSelectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.backgroundChoice{position:relative;padding:8px;border:1px solid rgba(40,149,177,.18);border-radius:18px;background:rgba(255,255,255,.78);cursor:pointer;overflow:hidden;color:#17466e;text-align:center}
.backgroundChoice img{display:block;width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:13px;margin:0 0 7px}
.backgroundChoice strong{display:block;font-size:11px}.backgroundChoice.selected{box-shadow:0 0 0 3px rgba(30,180,170,.25)}
.backgroundChoice .backgroundCheck{position:absolute;right:12px;top:12px;width:30px;height:30px;object-fit:contain;margin:0}
.backgroundChoice.locked{cursor:default;opacity:.78}.backgroundChoice.locked>img:first-child{filter:grayscale(.6) brightness(.9)}
.backgroundDualUnlock{margin-top:7px}.backgroundUnlockOr{display:block;margin:4px 0 6px;color:#6e8c9f;font-size:8px;font-weight:1000;letter-spacing:.05em}.backgroundGoldUnlock{width:100%;min-height:36px;border:0;border-radius:12px;padding:7px 8px;background:linear-gradient(180deg,#ffe76a,#ffc526);color:#17466e;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;box-shadow:0 4px 8px rgba(170,120,0,.13)}.backgroundGoldUnlock img{width:22px!important;height:22px!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;margin:0!important;filter:none!important}.backgroundGoldUnlock b{font-size:13px}.backgroundOr{display:block;margin:5px 0;color:#7893a2;font-size:8px;font-weight:1000}
.backgroundChoice.isNew::after{content:var(--nine-i18n-new,"NOVO");position:absolute;left:12px;top:12px;z-index:5;padding:3px 7px;border-radius:999px;background:#f2b91f;color:#fff;font-size:7px;font-weight:1000;letter-spacing:.06em;box-shadow:0 3px 8px rgba(144,100,7,.28)}
.gameHeaderAssets #walletAsset.hudMineAsset.hasNewMineItem{isolation:isolate!important}
.gameHeaderAssets #walletAsset.hudMineAsset.hasNewMineItem::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,rgba(255,217,72,.8) 0,rgba(255,217,72,.34) 48%,rgba(255,217,72,0) 72%);transform:translate(-50%,-50%) scale(.72);animation:mineNewItemGlow 1.05s ease-in-out infinite alternate;z-index:0;pointer-events:none}
.gameHeaderAssets #walletAsset.hudMineAsset.hasNewMineItem img{position:relative;z-index:1}
.backgroundMission{margin-top:7px;text-align:left;padding:7px 8px;border-radius:11px;background:rgba(225,246,251,.88);border:1px solid rgba(43,130,168,.10);font-size:10px}
.backgroundMission b{display:block;font-size:10px;color:#17466e;line-height:1.25}.backgroundMission small{display:block;margin-top:2px;font-size:10px;color:#5d8298;line-height:1.3}.backgroundMissionBar{height:5px;margin-top:6px;border-radius:999px;background:rgba(67,130,158,.14);overflow:hidden}.backgroundMissionBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20bbb5,#38b9da)}.backgroundMissionCount{display:block;margin-top:4px;font-size:10px;font-weight:1000;color:#4e778e;text-align:right}.backgroundMissionDone{color:#148b68!important}.backgroundMissionSkinLocked{color:#8b7280!important}
body.nine-playing{background-image:var(--nine-game-background,url("../../backgrounds/classica.webp"))!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}
body.nine-playing .gamePage{background-image:none!important;background-color:transparent!important}
.gamePage{background-image:var(--nine-game-background,url("../../backgrounds/classica.webp"))!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:scroll!important}
.homeModeCta{display:block!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
#firstPlayGo.sliceButton.green{--btn-scale:calc(52 / 105)!important;--btn-overlap:9px!important;min-height:52px!important;padding:0 38px!important;overflow:hidden!important}
@media(max-width:390px){
 #firstPlayGo.sliceButton.green{width:min(88%,250px)!important;min-height:48px!important;--btn-scale:calc(48 / 105)!important;padding:0 34px!important;font-size:16px!important}
 .achievementCard{grid-template-columns:104px minmax(0,1fr)!important;padding:8px!important;gap:5px!important}
 .achievementBadge{width:102px!important;height:102px!important}.achievementBadgeInner{width:100px!important;height:100px!important}.achievementBadgeInner img{width:98px!important;height:98px!important}
 .achievementBody{overflow:visible!important}.achievementRewardWrap{gap:4px!important;padding:5px!important;overflow:visible!important}.achievementRewardInfo{gap:4px!important;overflow:visible!important}.achievementRewardInfo img{width:27px!important;height:27px!important;flex:none!important}.achievementRewardText strong{font-size:16px!important}.achievementRewardState{font-size:7px!important;padding:5px 5px!important}.achievementMeta{font-size:7px!important;max-width:68px!important}
 #shop .shopWallets.threeWallets .shopWallet{padding:6px!important;gap:4px!important}.shopWallets.threeWallets .shopWallet img{width:25px!important;height:25px!important}.shopWallets.threeWallets .shopWallet strong{font-size:14px!important}.shopWallets.threeWallets .shopWallet span{font-size:6px!important}
}

/* =========================================================
   v7.10.1 — Mina, popups, missões e DEV Mode
   ========================================================= */
/* Cabeçalho da Mina: encapsula o ícone para centralização vertical real. */
#shop .mineHero{align-items:center!important;position:relative!important;padding-right:96px!important;}
#shop .mineHeroIconWrap{position:absolute!important;right:8px!important;top:0!important;bottom:0!important;width:82px!important;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;}
#shop .mineHeroIconWrap img{display:block!important;width:78px!important;height:78px!important;object-fit:contain!important;}
@media(max-width:430px){#shop .mineHero{padding-right:82px!important}#shop .mineHeroIconWrap{right:4px!important;width:72px!important}#shop .mineHeroIconWrap img{width:68px!important;height:68px!important}}

/* Sobre / Suporte / Telemetria: remover definitivamente o frame legado do container externo. */
#aboutModal .infoModal.framedSettingsModal,
#supportModal .infoModal.framedSettingsModal,
#telemetryModal .telemetryModalCard.framedSettingsModal{
  background:none!important;background-image:none!important;background-color:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;
}
#aboutModal .settingsInfoFrame,#supportModal .settingsInfoFrame,#telemetryModal .settingsInfoFrame{margin:0!important;}

/* Feedback de missão concluída — fora do tabuleiro. */
.nineCelebrationTray{position:fixed;z-index:100520;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:center;gap:8px;pointer-events:none;transform:translate(-50%,-50%);min-width:58px;min-height:58px}
.dailyMissionCelebration{position:relative;z-index:1;width:56px;height:56px;object-fit:contain;pointer-events:none;transform:translate(0,0) scale(.22);opacity:0;filter:drop-shadow(0 7px 12px rgba(34,108,151,.28))}
.dailyMissionCelebration.play{animation:nineDailyMissionStar 2180ms cubic-bezier(.2,.9,.2,1) both}
.achievementCelebration{position:relative;z-index:2;width:58px;height:58px;object-fit:contain;pointer-events:none;transform:translate(0,0) scale(.22);opacity:0;filter:drop-shadow(0 7px 12px rgba(34,108,151,.30))}
.achievementCelebration.play{animation:nineAchievementTrophy 2180ms cubic-bezier(.2,.9,.2,1) both}
@keyframes nineAchievementTrophy{0%{opacity:0;transform:scale(.22) rotate(-8deg)}18%{opacity:1;transform:scale(1.12) rotate(5deg)}48%{opacity:1;transform:scale(.96) rotate(-2deg)}78%{opacity:1;transform:scale(1.03) rotate(0)}100%{opacity:0;transform:scale(.88) rotate(0)}}
@keyframes nineDailyMissionStar{
  0%{opacity:0;transform:translate(0,0) scale(.22) rotate(-10deg)}
  12%{opacity:1;transform:translate(0,0) scale(1.14) rotate(7deg)}
  23%{transform:translate(-3px,0) scale(1.02) rotate(-5deg)}
  31%{transform:translate(3px,0) scale(1.05) rotate(5deg)}
  39%{transform:translate(-2px,0) scale(1.01) rotate(-3deg)}
  52%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  82%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(0,-3px) scale(.72) rotate(7deg)}
}

/* DEV Mode interno. */
#nineDevAuth,#nineDevPanel{z-index:100600!important}
.nineDevCard{width:min(92vw,520px);max-height:min(88vh,720px);overflow:auto;color:#17466e}
.nineDevTitle{margin:0 0 5px;font-size:26px}.nineDevLead{margin:0 0 16px;color:#5d7f94;font-size:12px}
.nineDevField{display:grid;gap:5px;margin:10px 0}.nineDevField span{font-size:9px;font-weight:1000;letter-spacing:.08em;color:#5f8297}.nineDevField input,.nineDevField select{width:100%;height:44px;border:1px solid rgba(47,135,177,.25);border-radius:12px;background:#fff;color:#17466e;padding:0 12px;font:800 14px Arial,sans-serif;outline:none}
.nineDevActions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}.nineDevActions button,.nineDevTool button{min-height:42px;border:0;border-radius:12px;padding:8px 13px;font-weight:1000;cursor:pointer}.nineDevPrimary{background:#13a9c1;color:#fff}.nineDevSecondary{background:#edf6fa;color:#17466e}
.nineDevError{min-height:18px;margin-top:6px;color:#b63333;font-size:10px;font-weight:900}
.nineDevGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.nineDevTool{padding:11px;border-radius:15px;background:rgba(238,249,252,.9);border:1px solid rgba(47,135,177,.15)}.nineDevTool strong{display:block;font-size:12px;margin-bottom:7px}.nineDevTool select{width:100%;height:38px;margin-bottom:7px;border:1px solid rgba(47,135,177,.2);border-radius:10px;background:#fff;color:#17466e;padding:0 8px;font-weight:800}.nineDevTool button{width:100%;background:#fff;color:#147c9b;border:1px solid rgba(47,135,177,.18)}
.nineDevBadge{display:inline-block;padding:3px 7px;border-radius:999px;background:#fff1b8;color:#775b00;font-size:8px;font-weight:1000;letter-spacing:.08em;margin-bottom:9px}
.nineDevToolButtons{display:grid;gap:6px}.nineDevToolButtons button{margin:0!important}.nineDevToolButtons .nineDevAccountAction{background:#13a9c1!important;color:#fff!important;border-color:#13a9c1!important}.nineDevToolButtons .nineDevMissionAction{background:#e9f9ee!important;color:#19733b!important;border-color:rgba(25,115,59,.18)!important}.nineDevPanelStatus{min-height:18px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.7);color:#4f7693;font-size:9px;font-weight:900}.nineDevPanelStatus.error{color:#b63333;background:#fff0f0}.nineDevPreviewTag{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;padding:2px 5px;border-radius:999px;background:#fff1b8;color:#775b00;font-size:7px;font-weight:1000;letter-spacing:.06em;vertical-align:middle}
@media(max-width:430px){.nineDevGrid{grid-template-columns:1fr}}


/* =========================================================
   v7.10.3 — toast de conquista fora do fluxo do layout
   ========================================================= */
.achievementToast{
  position:fixed!important;
  left:50%!important;
  top:84px!important;
  right:auto!important;
  bottom:auto!important;
  width:min(92vw,420px)!important;
  max-width:420px!important;
  margin:0!important;
  box-sizing:border-box!important;
  transform:translate(-50%,-14px)!important;
  z-index:100700!important;
  pointer-events:none!important;
}
.achievementToast.show{
  transform:translate(-50%,0)!important;
}


/* =========================================================
   v7.10.5 — mascotes, Trajetória, headers e frames reais
   ========================================================= */
/* Mina: alinhamento solicitado do ícone. */
#shop .mineHeroIconWrap{align-items:baseline!important;}

/* Como Jogar usa a mesma estrutura de header da Mina. */
#tutorial .tutorialMineHero{align-items:center!important;position:relative!important;padding-right:96px!important;margin:0 0 14px!important;}
#tutorial .tutorialMineHero h2{font-size:31px!important;margin:0!important;color:#17466e!important;}
#tutorial .tutorialMineHero p{max-width:340px!important;margin:4px 0 0!important;color:#4c7897!important;font-size:12px!important;font-weight:800!important;}
#tutorial .tutorialMineHero .mineHeroIconWrap{position:absolute!important;right:8px!important;top:0!important;bottom:0!important;width:82px!important;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;}
#tutorial .tutorialMineHero .mineHeroIconWrap img{display:block!important;width:72px!important;height:72px!important;object-fit:contain!important;}
@media(max-width:430px){#tutorial .tutorialMineHero{padding-right:82px!important}#tutorial .tutorialMineHero .mineHeroIconWrap{right:4px!important;width:72px!important}#tutorial .tutorialMineHero .mineHeroIconWrap img{width:64px!important;height:64px!important}}

/* Seleção Masc/Fem na Mina. */
.mascotSelectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;}
.mascotChoice{border:0!important;background:transparent!important;padding:0!important;min-width:0;cursor:pointer;color:#17466e;}
.mascotChoice .mineMiniFrame .sliceFrame__content{min-height:210px;padding:14px 12px 16px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mascotChoice img{width:126px;height:126px;object-fit:contain;display:block;filter:drop-shadow(0 8px 9px rgba(38,105,130,.13));}
.mascotChoice strong{font-size:17px;margin-top:4px}.mascotChoice small{font-size:9px;font-weight:1000;letter-spacing:.06em;color:#66879a;margin-top:5px}
.mascotChoice.selected small{color:#128a87}.mascotChoice.selected{transform:translateY(-2px)}
.mascotChoice.selected .mineMiniFrame{filter:drop-shadow(0 7px 10px rgba(31,180,160,.18));}
.mascotSelectionStatus{min-height:20px;margin-top:8px;text-align:center;color:#4e8198;font-size:10px;font-weight:900;}
@media(max-width:390px){.mascotChoice .mineMiniFrame .sliceFrame__content{min-height:180px}.mascotChoice img{width:105px;height:105px}}

/* Imagens CSS que também seguem o mascote selecionado. */
body[data-nine-mascot="fem"] #profile .modal:before{background-image:url("../../personagem/lajotinha-fem/confiante.webp")!important;}
body[data-nine-mascot="fem"] #gameOver .modal:before{background-image:url("../../personagem/lajotinha-fem/confiante.webp")!important;}
body[data-nine-mascot="menino"] #profile .modal:before,body[data-nine-mascot="menino"] #gameOver .modal:before{background-image:url("../../personagem/menino/confiante.webp")!important;}
body[data-nine-mascot="menina"] #profile .modal:before,body[data-nine-mascot="menina"] #gameOver .modal:before{background-image:url("../../personagem/menina/confiante.webp")!important;}
body[data-nine-mascot="gato"] #profile .modal:before,body[data-nine-mascot="gato"] #gameOver .modal:before{background-image:url("../../personagem/gato/confiante.webp")!important;}
body[data-nine-mascot="cachorro"] #profile .modal:before,body[data-nine-mascot="cachorro"] #gameOver .modal:before{background-image:url("../../personagem/cachorro/confiante.webp")!important;}


/* Trajetória: bloqueia completamente rolagem/toque enquanto evolui. */
#trajectory.isEvolving{touch-action:none!important;overscroll-behavior:none!important;}
#trajectory.isEvolving .trajectoryScroll{overflow:hidden!important;touch-action:none!important;pointer-events:none!important;}
#trajectory.isEvolving .trajectoryBack{pointer-events:none!important;opacity:.45!important;}
.trajectoryEvolutionSpotlight{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(24,78,106,.34);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .28s ease;}
.trajectoryEvolutionSpotlight.hidden{display:none!important}.trajectoryEvolutionSpotlight.play{opacity:1;}
.trajectoryEvolutionStage{position:relative;width:min(86vw,430px);min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;}
.trajectoryEvolutionStage>span{font-size:11px;font-weight:1000;letter-spacing:.2em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);margin-bottom:6px;}
.trajectoryEvolutionStage>strong{min-height:34px;margin-top:8px;color:#fff;font-size:25px;line-height:1.1;text-shadow:0 3px 12px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;}
.trajectoryEvolutionSpotlight.reveal .trajectoryEvolutionStage>strong{opacity:1;transform:translateY(0);}
.trajectoryEvolutionVisual{position:relative;width:250px;height:250px;}
.trajectoryEvolutionVisual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(10,67,91,.30));}
.trajectoryEvolutionOld{opacity:1;transform:scale(1);}
.trajectoryEvolutionNew{opacity:0;transform:scale(.55);filter:brightness(1.3) drop-shadow(0 18px 26px rgba(112,255,218,.5))!important;}
.trajectoryEvolutionSpotlight.play .trajectoryEvolutionOld{animation:nineEvolutionOld .95s cubic-bezier(.3,.02,.5,1) forwards;}
.trajectoryEvolutionSpotlight.reveal .trajectoryEvolutionNew{animation:nineEvolutionNew 1.15s cubic-bezier(.16,.85,.22,1) forwards;}
.trajectoryEvolutionRays{position:absolute;left:50%;top:50%;width:min(92vw,500px);height:min(92vw,500px);transform:translate(-50%,-50%) scale(.7);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.88) 0 4%,rgba(130,255,219,.34) 16%,rgba(92,218,255,.13) 35%,transparent 66%);opacity:0;}
.trajectoryEvolutionSpotlight.play .trajectoryEvolutionRays{animation:nineEvolutionRays 2.25s ease-in-out both;}
@keyframes nineEvolutionOld{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(.35) rotate(-5deg)}}
@keyframes nineEvolutionNew{0%{opacity:0;transform:scale(.45)}35%{opacity:1;transform:scale(1.14)}65%{transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes nineEvolutionRays{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}30%{opacity:.75;transform:translate(-50%,-50%) scale(.9)}70%{opacity:.5;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:.15;transform:translate(-50%,-50%) scale(1.12)}}

/* Cards que agora usam TOP / MIDDLE / BOTTOM como elementos reais. */
.achievementToast,.telemetryStat,#aboutModal .aboutFacts>div{background:none!important;background-image:none!important;background-color:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
.achievementToast{overflow:visible!important;}
.achievementToastFrame{width:100%!important}.achievementToastFrame .sliceFrame__content{padding:14px 17px!important;}
.achievementToastInner{display:flex;align-items:center;gap:12px;min-height:62px;}
.telemetryStat .residualMiniFrame,.aboutFact .residualMiniFrame{width:100%!important;height:100%!important;}
.telemetryStat .residualMiniFrame .sliceFrame__content{padding:12px 13px!important;height:100%;box-sizing:border-box;}
.aboutFact .residualMiniFrame .sliceFrame__content{padding:12px!important;height:100%;box-sizing:border-box;}
.residualMiniFrame .sliceFrame__skin{display:flex!important;flex-direction:column!important;}
.residualMiniFrame .sliceFrame__top,.residualMiniFrame .sliceFrame__bottom{aspect-ratio:1526 / 91!important;flex:0 0 auto!important;}
.residualMiniFrame .sliceFrame__middle{flex:1 1 auto!important;min-height:8px!important;}

/* Raios do troféu à frente, pulsando somente entre 30% e 70% de opacidade. */
#menu #achievementsBtn .homeToolSvg::before{z-index:3!important;}
#menu #achievementsBtn .homeToolSvg img{z-index:2!important;}
@keyframes achievementTrophyGlow{
  0%{transform:translate(-50%,-50%) scale(.72);opacity:.30;}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.70;}
}
@media (prefers-reduced-motion:reduce){#menu #achievementsBtn.hasReward .homeToolSvg::before{opacity:.55!important;}}

/* v7.10.5 — coleta local das recompensas diárias; futura RPC mantém a mesma UI. */
.dailyMissionReward{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}.dailyMissionReward span{display:flex;align-items:center;gap:4px;color:#177c72;font-size:11px;font-weight:1000}.dailyMissionReward span img{width:20px;height:20px;object-fit:contain}.dailyMissionReward button,.dailyBonusReward button{min-height:30px;border:0;border-radius:10px;background:#18aeb1;color:#fff;padding:0 10px;font-size:9px;font-weight:1000;cursor:pointer}.dailyMissionReward button:disabled,.dailyBonusReward button:disabled{background:#d8e6eb;color:#78909d;cursor:default}.dailyMissionCard.claimed{opacity:.72}.dailyCompletionBonus{margin-top:10px}.dailyBonusFrame .sliceFrame__content{padding:13px 15px!important}.dailyBonusInner{display:flex;align-items:center;justify-content:space-between;gap:12px}.dailyBonusInner>div:first-child{display:flex;flex-direction:column;gap:3px}.dailyBonusInner small{font-size:8px;font-weight:1000;letter-spacing:.08em;color:#6c8797}.dailyBonusInner strong{font-size:15px;color:#17466e}.dailyBonusInner span{font-size:9px;color:#638397;font-weight:800}.dailyBonusReward{display:grid;grid-template-columns:28px auto;align-items:center;justify-items:center;gap:2px 5px;flex:none}.dailyBonusReward img{width:28px;height:28px;object-fit:contain}.dailyBonusReward b{font-size:17px;color:#9a7410}.dailyBonusReward button{grid-column:1/-1;min-width:86px}@media(max-width:430px){.dailyBonusInner{align-items:flex-start;flex-direction:column}.dailyBonusReward{grid-template-columns:28px auto 1fr;width:100%;justify-content:start}.dailyBonusReward button{grid-column:auto;margin-left:auto}}


/* =========================================================
   v7.10.6 — evolução cadenciada, Mina com novidades e daily
   ========================================================= */
/* Como Jogar: cabeçalho realmente idêntico ao da Mina, sem caixa branca. */
#tutorial .tutorialMineHero{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  min-height:140px!important;
  padding:4px 96px 14px 58px!important;
  margin:0 0 8px!important;
  overflow:visible!important;
  display:block!important;
  position:relative!important;
}
#tutorial .tutorialMineHero .mineHeroIconWrap{align-items:baseline!important;}
@media(max-width:430px){#tutorial .tutorialMineHero{padding:4px 82px 14px 58px!important;}}

/* Trajetória: mantém a evolução antiga em destaque antes da troca e segura a nova por mais tempo. */
.trajectoryEvolutionSpotlight.play .trajectoryEvolutionOld{animation:nineEvolutionOld 1.5s cubic-bezier(.3,.02,.5,1) forwards!important;}
.trajectoryEvolutionSpotlight.reveal .trajectoryEvolutionNew{animation:nineEvolutionNew 1.15s cubic-bezier(.16,.85,.22,1) forwards!important;}
.trajectoryEvolutionSpotlight.play .trajectoryEvolutionRays{animation:nineEvolutionRays 4.1s ease-in-out both!important;}
@keyframes nineEvolutionOld{
  0%{opacity:1;transform:scale(1)}
  18%{opacity:1;transform:scale(1.08)}
  58%{opacity:1;transform:scale(1.08)}
  78%{opacity:.72;transform:scale(1.03)}
  100%{opacity:0;transform:scale(.34) rotate(-5deg)}
}

/* Troféu: raios um pouco mais altos e pulso máximo de 85%. */
#menu #achievementsBtn .homeToolSvg::before{top:-4px!important;}
@keyframes achievementTrophyGlow{
  0%{transform:translate(-50%,-50%) scale(.72);opacity:.30;}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.85;}
}
@media (prefers-reduced-motion:reduce){#menu #achievementsBtn.hasReward .homeToolSvg::before{opacity:.65!important;}}
#menu #profileBtn{position:relative!important;isolation:isolate!important;overflow:visible!important;}
#menu #profileBtn .profileFriendBadge{position:absolute;right:8px;top:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,#ff6b75,#dc1f39);color:#fff;font-size:10px;font-weight:1000;line-height:1;border:2px solid #fff;box-shadow:0 4px 10px rgba(176,18,43,.28);z-index:5;pointer-events:none;}
#menu #profileBtn.hasFriendRequest .profileFriendBadge{display:flex;animation:profileFriendBadgePulse 1.05s ease-in-out infinite alternate;}
@keyframes profileFriendBadgePulse{0%{transform:scale(.96);}100%{transform:scale(1.08);}}
@media (prefers-reduced-motion:reduce){#menu #profileBtn.hasFriendRequest .profileFriendBadge{animation:none!important;transform:none!important;}}

/* Mina: sinal próprio para item desbloqueado e ainda não visualizado. */
#menu #shopBtn{position:relative!important;isolation:isolate!important;overflow:visible!important;}
#menu #shopBtn::before{
  content:"";position:absolute;left:50%;top:20px;width:58px;height:58px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.72);opacity:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,242,152,.88) 0 18%,rgba(255,207,71,.46) 36%,rgba(255,191,42,.14) 58%,transparent 72%);
  filter:drop-shadow(0 0 8px rgba(255,193,42,.42));
}
#menu #shopBtn.hasNewMineItem::before{animation:mineNewItemGlow 1.15s ease-in-out infinite alternate;}
#menu #shopBtn>img,#menu #shopBtn>span{position:relative;z-index:1;}
@keyframes mineNewItemGlow{0%{opacity:.35;transform:translate(-50%,-50%) scale(.72)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}
.mineTab{position:relative!important;overflow:visible!important;}
.mineTab.hasNew::after{content:var(--nine-i18n-new,"NOVO");position:absolute;right:-2px;top:-5px;padding:2px 5px;border-radius:999px;background:#f2b91f;color:#fff;font-size:6px;font-weight:1000;letter-spacing:.05em;box-shadow:0 3px 7px rgba(144,100,7,.22);z-index:4;}
.tileSkinCard.isNew::after,.mascotChoice.isNew::after{content:var(--nine-i18n-new,"NOVO");position:absolute;right:7px;top:7px;padding:4px 7px;border-radius:999px;background:#f2b91f;color:#fff;font-size:7px;font-weight:1000;letter-spacing:.08em;box-shadow:0 4px 9px rgba(144,100,7,.22);z-index:7;}
.mascotChoice{position:relative!important;}
@media (prefers-reduced-motion:reduce){#menu #shopBtn.hasNewMineItem::before{animation:none!important;opacity:.65!important;transform:translate(-50%,-50%) scale(1)!important;}}



/* =========================================================
   v7.10.7 — pendências UI + novidades persistentes
   ========================================================= */
/* Dicas: lâmpada pura, sem simulação CSS de luz/fundo. */
#tutorialBtn,#tutorialBtn img,#tutorial .tutorialMineHero .mineHeroIconWrap,#tutorial .tutorialMineHero .mineHeroIconWrap img{background:transparent!important;box-shadow:none!important;filter:none!important;}
#tutorial .tutorialMineHero .mineHeroIconWrap::before,#tutorial .tutorialMineHero .mineHeroIconWrap::after{display:none!important;content:none!important;}
/* Mantém a correção solicitada para o alinhamento do ícone da Mina. */
#shop .mineHeroIconWrap{align-items:baseline!important;}
/* Mascote selecionado usa o mesmo check visual das skins. */
.mascotChoice .mascotCheck{width:34px!important;height:34px!important;object-fit:contain!important;margin-top:4px!important;filter:none!important;}
/* Android/iOS: Home deve ter o mesmo destaque do mascote da versão Web. */
html[data-nine-platform="android"] #menu:not(.mode-selected) .homeMascotRow,
html[data-nine-platform="ios"] #menu:not(.mode-selected) .homeMascotRow{height:178px!important;max-height:none!important;padding:5px 0!important;overflow:visible!important;}
html[data-nine-platform="android"] #menu:not(.mode-selected) .homeMascot,
html[data-nine-platform="ios"] #menu:not(.mode-selected) .homeMascot{height:190px!important;max-height:190px!important;width:auto!important;object-fit:contain!important;}


/* =========================================================
   v7.11.0 — economia em 3 moedas + Mina durante a partida
   Verde = economia / Dourada = cosméticos / Roxa = estratégia
   ========================================================= */
.purpleGemIcon{filter:hue-rotate(205deg) saturate(1.75) brightness(.92) drop-shadow(0 0 7px rgba(158,91,255,.42))!important}
#shop .purpleWallet{background:linear-gradient(180deg,#5b2b87,#3c1a63)!important;border-color:rgba(190,119,255,.72)!important}
.shopWallets.threeWallets{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
.shopWallets.threeWallets .shopWallet{min-width:0!important;padding:8px 7px!important;gap:6px!important}
.shopWallets.threeWallets .shopWallet img{width:31px!important;height:31px!important;object-fit:contain!important}
.shopWallets.threeWallets .shopWallet small{font-size:6px!important;letter-spacing:.03em!important}
.shopWallets.threeWallets .shopWallet strong{font-size:15px!important}
.currencyRoleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 15px}
.currencyRole{padding:10px 8px;border-radius:16px;background:rgba(255,255,255,.64);border:1px solid rgba(41,119,160,.12);text-align:center;color:#17466e}
.currencyRole img{width:40px;height:40px;object-fit:contain}.currencyRole b{display:block;font-size:10px;margin-top:4px}.currencyRole span{display:block;font-size:8px;line-height:1.25;color:#64869a;margin-top:2px}
.greenPackageGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 14px}
.greenPackageCard{border:0;background:transparent;padding:0;cursor:pointer}
.greenPackageCard .sliceFrame__content{padding:8px!important}
.greenPackageInner{display:flex;align-items:center;gap:9px;text-align:left}.greenPackageInner img{width:62px;height:62px;object-fit:contain}.greenPackageInner small{display:block;color:#64869a;font-size:8px;font-weight:900}.greenPackageInner strong{display:block;color:#17466e;font-size:18px;line-height:1}.greenPackageInner em{display:block;color:#178b59;font-style:normal;font-size:8px;font-weight:1000;margin-top:3px}
.currencyConversionSectionTitle{margin-top:16px!important}
#purpleConversionGrid{margin-top:7px}
.gameHeaderAssets #walletAsset.hudMineAsset{width:64px!important;min-width:64px!important;height:58px!important;overflow:visible!important}
.gameHeaderAssets #walletAsset.hudMineAsset img{width:58px!important;height:58px!important;object-fit:contain!important;filter:drop-shadow(0 4px 7px rgba(19,85,119,.18))!important}
.gameHeaderAssets #walletAsset.hudMineAsset b{display:none!important}
#quickBoost .quickBoostHeadBalances{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:7px 0 11px}
#quickBoost .quickCurrency{display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.74);border:1px solid rgba(43,116,155,.12);border-radius:12px;padding:6px;color:#17466e;font-size:10px;font-weight:1000}
#quickBoost .quickCurrency img{width:22px;height:22px;object-fit:contain}
.quickBoostGrid .shopBuy img.purpleCostIcon{width:22px!important;height:22px!important;margin:0 4px 0 0!important;display:inline-block!important;vertical-align:middle!important}
.quickBoostGrid .shopBuy{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important}
.quickBoostConversion{margin:6px 0 12px;padding:10px 0 11px;border-top:1px solid rgba(43,116,155,.14);border-bottom:1px solid rgba(43,116,155,.14)}
.quickBoostConversion h3{margin:0 0 3px;color:#17466e;font-size:11px;text-align:center}
.quickBoostConversion>p{margin:0 0 8px!important;color:#64869a!important;font-size:8px!important;text-align:center!important;line-height:1.25!important}
#quickPurpleConversionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.quickPurpleConvertBtn{border:1px solid rgba(43,116,155,.14);background:rgba(255,255,255,.8);border-radius:12px;min-height:48px;padding:5px 6px;display:flex;align-items:center;justify-content:center;gap:4px;color:#17466e;font-weight:1000;cursor:pointer}
.quickPurpleConvertBtn img{width:20px;height:20px;object-fit:contain}.quickPurpleConvertBtn .quickConvertArrow{opacity:.55;margin:0 1px}.quickPurpleConvertBtn:disabled{opacity:.42;cursor:default}
#quickConversionStatus{min-height:13px;margin-top:5px;text-align:center;color:#5d4387;font-size:8px;font-weight:900}
.repositionPanel{display:flex;flex-direction:column;align-items:center;gap:7px;margin:6px auto 8px;width:min(100%,466px);position:relative;z-index:8}.repositionPanel.hidden{display:none!important}
.repositionHint{width:100%;box-sizing:border-box;background:rgba(65,30,98,.96);color:#fff;padding:11px 14px;border:2px solid rgba(211,168,255,.82);border-radius:15px;font-size:11px;font-weight:1000;box-shadow:0 7px 18px rgba(35,13,60,.2),0 0 0 3px rgba(185,113,255,.10);text-align:center;line-height:1.25}
.repositionConfirm{min-width:210px!important;min-height:46px!important;margin:0!important;color:#604b00!important;font-size:12px!important;font-weight:1000!important}.repositionConfirm.hidden{display:none!important}
body.nine-repositioning #board{touch-action:manipulation!important}body.nine-repositioning #board .tile{cursor:pointer!important}body.nine-repositioning #board .tile.repositionSource{outline:3px dashed rgba(135,62,208,.98)!important;outline-offset:-6px!important;filter:brightness(1.08) drop-shadow(0 0 9px rgba(157,82,224,.38))!important}body.nine-repositioning #board .tile.repositionTarget{outline:3px dashed rgba(31,169,157,.98)!important;outline-offset:-6px!important;background-color:rgba(91,223,208,.17)!important;box-shadow:inset 0 0 0 4px rgba(95,218,205,.18)!important}body.nine-repositioning #board .tile.empty:not(.repositionTarget){box-shadow:inset 0 0 0 1px rgba(125,88,170,.15)!important}
@media(max-width:390px){.shopWallets.threeWallets{gap:4px!important}.shopWallets.threeWallets .shopWallet{padding:6px 4px!important}.shopWallets.threeWallets .shopWallet img{width:27px!important;height:27px!important}.currencyRoleGrid{gap:5px}.currencyRole{padding:8px 5px}.greenPackageInner img{width:52px;height:52px}.greenPackageInner strong{font-size:15px}}
/* v7.11.71 — título POWER-UPS + artes oficiais dos benefícios */
#quickBoost .quickBoostSectionTitle{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:15px 0 11px!important;color:#17466e;font-size:17px;line-height:1;
  font-weight:1000;letter-spacing:.075em;text-align:center;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
#quickBoost .quickBoostSectionTitle::before,#quickBoost .quickBoostSectionTitle::after{
  content:"";height:1px;flex:1 1 auto;max-width:72px;border-radius:999px;
  background:linear-gradient(90deg,rgba(31,157,185,0),rgba(31,157,185,.34));
}
#quickBoost .quickBoostSectionTitle::after{transform:scaleX(-1)}
#quickBoost .quickBoostSectionTitle span{white-space:nowrap}
#quickBoost .quickBoostGrid .benefitCard>img.powerupHeroArt{
  width:100%!important;height:132px!important;object-fit:contain!important;
  margin:0 auto 4px!important;filter:drop-shadow(0 7px 9px rgba(25,62,81,.18))!important;
}
#quickBoost .tileBenefit .powerupTileHero{
  width:100%!important;height:118px!important;object-fit:contain!important;margin:0 auto!important;
  filter:drop-shadow(0 7px 9px rgba(20,42,72,.22))!important;position:relative;z-index:1;
}
#quickBoost .tileBenefit .tileBenefitTop{display:flex!important;align-items:center!important;justify-content:center!important;padding:7px 10px!important}
@media(max-width:430px){
  #quickBoost .quickBoostSectionTitle{font-size:15px;gap:8px;margin:13px 0 9px!important}
  #quickBoost .quickBoostSectionTitle::before,#quickBoost .quickBoostSectionTitle::after{max-width:52px}
  #quickBoost .quickBoostGrid .benefitCard>img.powerupHeroArt{height:116px!important}
  #quickBoost .tileBenefit .powerupTileHero{height:105px!important}
}

/* v7.11.6 — Mina da Partida / reposicionamento */
#quickBoost{align-items:flex-start!important;overflow-y:auto!important;padding:14px!important}
#quickBoost .quickBoostModal{width:min(94vw,560px)!important;max-height:none!important;margin:auto!important;padding:0!important;background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
#quickBoost .quickBoostMainFrame{width:100%!important}
#quickBoost .quickBoostMainFrame .sliceFrame__skin{grid-template-rows:58px minmax(0,1fr) 58px!important}
#quickBoost .quickBoostScroll{box-sizing:border-box;padding:24px 20px 28px!important;max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-gutter:stable both-edges}
#quickBoost .quickBoostScroll::-webkit-scrollbar{width:6px}#quickBoost .quickBoostScroll::-webkit-scrollbar-thumb{background:rgba(93,129,152,.38);border-radius:999px}
#quickBoost .quickBoostGrid .benefitCard.noBalance .shopBuy{color:#5d8198!important}
#quickBoost .quickBoostGrid .benefitCard.noBalance .shopBuy span{color:#5d8198!important}
#quickBoost .quickBoostGrid .benefitCard[data-boost="reposition"]{order:-20!important}
#quickBoost .quickBoostGrid .benefitCard[data-boost="reposition"] strong{font-size:13px!important}
#quickBoost .quickBoostGrid .benefitCard[data-boost="reposition"] strong,#quickBoost .quickBoostGrid .benefitCard[data-boost="reposition"] small{color:#5d8198!important;text-shadow:none!important}
@media(max-width:430px){#quickBoost{padding:8px!important}#quickBoost .quickBoostScroll{max-height:calc(100dvh - 16px)!important;padding:20px 14px 24px!important}#quickBoost .quickBoostMainFrame .sliceFrame__skin{grid-template-rows:46px minmax(0,1fr) 46px!important}}
/* v7.11.8 — Mina da Partida / cartões / reposicionar */
.purpleGemIcon{filter:none!important}
#shop .shopWallet.purpleWallet{background:#fff!important;border-color:rgba(153,73,224,.72)!important;box-shadow:0 5px 14px rgba(92,45,138,.10)!important}
#shop .greenPackageGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#shop .greenPackageCard{display:block;width:100%;padding:0!important;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;border-radius:20px!important;overflow:hidden!important}
#shop .greenPackageCard img{display:block;width:100%;height:auto;object-fit:contain;filter:none!important}
#shop .greenPackageCard{position:relative!important}
#shop .greenPackagePrice{
  position:absolute;
  left:8%;
  right:8%;
  bottom:8%;
  height:15.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
  white-space:nowrap;
  color:#fff;
  font-family:inherit;
  font-size:clamp(14px,4.7vw,27px);
  font-weight:1000;
  line-height:1;
  letter-spacing:-.02em;
  text-shadow:
    0 2px 0 #061c57,
    2px 0 0 #061c57,
    -2px 0 0 #061c57,
    0 -2px 0 #061c57,
    0 4px 5px rgba(0,0,0,.28);
}
@media(min-width:700px){
  #shop .greenPackagePrice{font-size:clamp(18px,2.2vw,30px)}
}

#quickBoost .quickBoostGrid .benefitCard .shopBuy{--btn-scale:calc(46 / 105)!important;--btn-overlap:9px!important;width:100%!important;min-height:46px!important;padding:0 22px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;white-space:nowrap!important}
#quickBoost .quickBoostGrid .benefitCard .shopBuy img{filter:none!important}
#quickBoost .quickBoostGrid .benefitCard:not(.noBalance) .shopBuy{color:#17466e!important}
#quickBoost .quickBoostGrid .benefitCard.noBalance .shopBuy{color:#93a5b1!important;opacity:.78!important;cursor:not-allowed!important}
#quickBoost .quickBoostGrid .benefitCard.noBalance .shopBuy span{color:inherit!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileBenefitTop{overflow:hidden!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileStack{width:112px!important;height:84px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileStack img{width:64px!important;height:64px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileStack img:nth-child(1){left:2px!important;top:16px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileStack img:nth-child(2){left:28px!important;top:3px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit .tileStack img:nth-child(3){left:52px!important;top:20px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit.twoTiles .tileStack img:nth-child(1){left:14px!important;top:14px!important}
#quickBoost .quickBoostGrid .benefitCard.tileBenefit.twoTiles .tileStack img:nth-child(2){left:48px!important;top:4px!important}
#repositionPanel.repositionPanel{position:absolute!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;width:min(calc(100% - 26px),466px)!important;margin:0!important;z-index:18!important;pointer-events:none!important}
#repositionPanel.repositionPanel>*{pointer-events:auto!important}
#confirmReposition.repositionConfirm{--btn-scale:calc(46 / 105)!important;--btn-overlap:9px!important;min-width:230px!important;min-height:46px!important;padding:0 28px!important;color:#17466e!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
#confirmReposition.repositionConfirm.hidden{display:none!important}
@media(max-width:390px){#repositionPanel.repositionPanel{width:min(calc(100% - 18px),466px)!important}}


/* =========================================================
   v7.11.2 — Jogador em tela completa + progresso da Mina
   ========================================================= */
#profile{align-items:flex-start!important;justify-content:center!important;overflow:auto!important;background:rgba(218,247,255,.92)!important;padding:0 14px 26px!important;backdrop-filter:none!important;}
#profile .playerPage{width:min(94vw,560px);min-height:100%;margin:0 auto;padding:18px 0 28px;color:#17466e;}
#profile .playerHero{display:grid!important;grid-template-columns:minmax(0,1fr) 88px!important;align-items:center!important;gap:14px!important;min-height:118px!important;padding:10px 0 12px 72px!important;margin:0 0 12px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;}
#profile .playerHero .roundBack{position:absolute!important;left:0!important;top:16px!important;z-index:10!important;}
#profile .playerHeroIdentity{min-width:0;align-self:center;padding-top:0;}
#profile .playerHeroIdentity>small{display:block;font-size:8px;font-weight:1000;letter-spacing:.12em;color:#1597a3;margin-bottom:3px;}
#profile .profileNameEditTrigger{display:flex;align-items:center;gap:7px;max-width:100%;padding:0!important;border:0!important;background:transparent!important;color:#17466e!important;text-align:left!important;box-shadow:none!important;}
#profile .profileNameEditTrigger #profileHeaderName{font-size:clamp(21px,6vw,34px);font-weight:1000;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#profile .profilePencil{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:rgba(255,255,255,.78);border:1px solid rgba(39,132,167,.15);font-size:14px;color:#128d98;}
#profile .playerHeroIdentity p{display:none!important;}
#profile .playerHeroPhoto{position:relative;display:block;width:80px;height:80px;justify-self:end;cursor:pointer;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;z-index:12!important;touch-action:manipulation!important;}
#profile .playerHeroPhoto .profilePhoto{pointer-events:none!important;width:80px!important;height:80px!important;margin:0!important;border:4px solid rgba(255,255,255,.96)!important;box-shadow:0 7px 18px rgba(35,116,151,.18)!important;background:#e5f6fa!important;}
#profile .playerHeroPhoto .photoEditBadge{pointer-events:none!important;position:absolute;right:-1px;bottom:1px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#13a8ae;color:white;border:3px solid #dff7fb;font-size:12px;font-weight:1000;}
#profile .profileNameEditor{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin:0 0 12px;padding:11px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(43,130,168,.12);}
#profile .profileNameEditor.hidden{display:none!important;}
#profile .profileNameEditor .field{margin:0!important;}
#profile .profileNameEditor input{background:#fff!important;color:#17466e!important;border:1px solid rgba(38,130,164,.2)!important;}
#profile .profileInlineSave{--btn-scale:calc(44 / 105)!important;--btn-overlap:4px!important;height:44px!important;min-height:44px!important;min-width:156px!important;padding:0 34px!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;font-size:13px!important;font-weight:1000!important;color:#fff!important;}
#profile .playerSection{margin:0 0 12px;padding:14px;border-radius:21px;background:rgba(255,255,255,.62);border:1px solid rgba(43,130,168,.12);}
#profile .playerSectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px;}
#profile .playerSectionHead small{display:block;color:#1597a3;font-size:8px;font-weight:1000;letter-spacing:.1em;}
#profile .playerSectionHead h3{margin:2px 0 0!important;color:#17466e!important;font-size:20px!important;}
#profile .playerSectionHead>span{font-size:8px;font-weight:900;color:#7591a2;}
#profile .playerConnections{padding:0!important;}
#profile .playerConnections button{background:rgba(255,255,255,.82)!important;}
#profile .nativeNote{display:block;padding:8px 1px 0!important;color:#718d9c!important;font-size:9px!important;font-weight:800!important;}
#profile .profileMascotShowcase{display:flex;align-items:center;justify-content:center;margin:-4px 0 10px;padding:0;min-height:150px;}
#profile .profileMascotShowcase img{width:min(48vw,176px);height:min(48vw,176px);object-fit:contain;display:block;filter:drop-shadow(0 10px 12px rgba(38,105,130,.14));}
#profile .profileMascotShowcaseCopy{display:none!important;}
#profile .playerStatsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
#profile .playerStatsGrid article{min-width:0;padding:10px 8px;border-radius:14px;background:rgba(225,246,251,.72);border:1px solid rgba(43,130,168,.09);display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:'icon label' 'icon value';align-items:center;column-gap:7px;text-align:left;}
#profile .playerStatsGrid .profileStatIcon{grid-area:icon;width:39px;height:39px;object-fit:contain;justify-self:center;align-self:center;}
#profile .playerStatsGrid small{grid-area:label;display:block;font-size:7px;font-weight:1000;color:#7190a1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#profile .playerStatsGrid strong{grid-area:value;display:block;margin-top:2px;color:#17466e;font-size:17px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#profile .playerHighlights{display:grid;grid-template-columns:1fr;gap:7px;margin-top:8px;}
#profile .playerHighlights>div{padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.78);border:1px solid rgba(43,130,168,.09);display:flex;align-items:center;justify-content:space-between;gap:10px;}
#profile .playerHighlights span{display:block;font-size:8px;font-weight:1000;color:#7190a1;letter-spacing:.04em;}
#profile .playerHighlights b{display:block;margin:0;font-size:14px;color:#17466e;}
#profile .profileRecentRounds{display:grid;gap:6px;}
#profile .profileRoundRow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 9px;border-radius:13px;background:rgba(248,252,255,.86);border:1px solid rgba(51,135,174,.10);}
#profile .profileRoundMode{width:36px;height:36px;display:grid;place-items:center;border-radius:0;background:transparent;font-size:0;}
#profile .profileRoundMode img{width:28px;height:28px;object-fit:contain;display:block;}
#profile .profileRoundCopy{min-width:0;}.profileRoundCopy strong{display:block;font-size:10px;color:#17466e;}.profileRoundCopy small{display:block;margin-top:2px;font-size:8px;color:#718d9c;font-weight:850;}
#profile .profileRoundResult{text-align:right;}.profileRoundResult b{display:block;font-size:11px;color:#17466e;}.profileRoundResult small{display:block;font-size:7px;font-weight:1000;color:#6c8b9d;margin-top:2px;}
#profile .profileHistoryEmpty{padding:15px;text-align:center;color:#6f8b9d;font-size:10px;font-weight:850;}
#profile .playerBottomBack{width:100%!important;margin-top:4px!important;}
@media(max-width:390px){#profile .playerHero{grid-template-columns:minmax(0,1fr) 72px!important;gap:10px!important;padding-left:62px!important}#profile .playerHeroPhoto{width:68px!important;height:68px!important}#profile .playerHeroPhoto .profilePhoto{width:68px!important;height:68px!important}#profile .playerStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}#profile .profileNameEditor{grid-template-columns:1fr;}#profile .profileInlineSave{width:100%!important;}#profile .profileMascotShowcase img{width:min(48vw,138px);height:min(48vw,138px);}#profile .profileNameEditTrigger #profileHeaderName{font-size:clamp(20px,5.8vw,28px);}}

/* Mina: progresso da coleção */
.mineCollectionProgress{margin:0 0 14px;padding:12px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(43,130,168,.12);}
.mineCollectionProgressHead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:9px;}.mineCollectionProgressHead small{display:block;font-size:7px;font-weight:1000;letter-spacing:.1em;color:#1597a3}.mineCollectionProgressHead strong{display:block;font-size:17px;color:#17466e;margin-top:1px}.mineCollectionProgressHead b{font-size:11px;color:#128d98;white-space:nowrap}
.mineCollectionProgressGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mineCollectionStat{min-width:0;padding:8px;border-radius:13px;background:rgba(229,247,251,.76);border:1px solid rgba(43,130,168,.08)}.mineCollectionStat span{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:8px;font-weight:1000;color:#567b90}.mineCollectionStat span b{font-size:9px;color:#17466e}.mineCollectionBar{height:5px;margin-top:6px;border-radius:999px;background:rgba(67,130,158,.12);overflow:hidden}.mineCollectionBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#20bbb5,#38b9da)}

/* Feedback central quando algo novo é liberado na Mina. */
.mineUnlockToast{position:fixed;left:50%;top:50%;z-index:100760;transform:translate(-50%,-50%) scale(.78);width:min(86vw,340px);pointer-events:none;opacity:0;}
.mineUnlockToast.show{animation:nineMineUnlockToast 2.65s cubic-bezier(.2,.8,.2,1) both}.mineUnlockToast .sliceFrame__content{padding:17px 20px!important;text-align:center!important}.mineUnlockToast small{display:block;font-size:8px;font-weight:1000;letter-spacing:.12em;color:#1597a3}.mineUnlockToast strong{display:block;margin-top:4px;font-size:20px;color:#17466e}.mineUnlockToast span{display:block;margin-top:4px;font-size:9px;font-weight:850;color:#68899a}.mineUnlockToast img{width:48px;height:48px;object-fit:contain;margin:0 auto 5px;display:block}
@keyframes nineMineUnlockToast{0%{opacity:0;transform:translate(-50%,-46%) scale(.72)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}20%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-54%) scale(.92)}}


/* =========================================================
   v7.11.11 — frames oficiais TOP / MIDDLE / BOTTOM em popups
   ========================================================= */
#nineGamePopup .nineGamePopupFrameSkin,
#nineGamePopup .nineGamePopupFrameTop,
#nineGamePopup .nineGamePopupFrameMiddle,
#nineGamePopup .nineGamePopupFrameBottom{display:none!important;}
#nineGamePopup .nineGamePopupFrameContent{padding:28px 24px 30px!important;}

/* Todo popup que usa o frame branco deve usar os 3 arquivos como slices reais. */
#nineGamePopup .sliceFrame__skin,
#nineDevAuth .sliceFrame__skin,
#nineDevPanel .sliceFrame__skin,
#quickBoost .quickBoostMainFrame .sliceFrame__skin,
#aboutModal .settingsInfoFrame .sliceFrame__skin,
#supportModal .settingsInfoFrame .sliceFrame__skin,
#telemetryModal .settingsInfoFrame .sliceFrame__skin{
  display:flex!important;
  flex-direction:column!important;
  grid-template-rows:none!important;
}
#nineGamePopup .sliceFrame__top,
#nineGamePopup .sliceFrame__bottom,
#nineDevAuth .sliceFrame__top,
#nineDevAuth .sliceFrame__bottom,
#nineDevPanel .sliceFrame__top,
#nineDevPanel .sliceFrame__bottom,
#quickBoost .quickBoostMainFrame .sliceFrame__top,
#quickBoost .quickBoostMainFrame .sliceFrame__bottom,
#aboutModal .settingsInfoFrame .sliceFrame__top,
#aboutModal .settingsInfoFrame .sliceFrame__bottom,
#supportModal .settingsInfoFrame .sliceFrame__top,
#supportModal .settingsInfoFrame .sliceFrame__bottom,
#telemetryModal .settingsInfoFrame .sliceFrame__top,
#telemetryModal .settingsInfoFrame .sliceFrame__bottom{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1526/91!important;
  flex:0 0 auto!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#nineGamePopup .sliceFrame__middle,
#nineDevAuth .sliceFrame__middle,
#nineDevPanel .sliceFrame__middle,
#quickBoost .quickBoostMainFrame .sliceFrame__middle,
#aboutModal .settingsInfoFrame .sliceFrame__middle,
#supportModal .settingsInfoFrame .sliceFrame__middle,
#telemetryModal .settingsInfoFrame .sliceFrame__middle{
  width:100%!important;
  min-height:20px!important;
  flex:1 1 auto!important;
  margin-top:-2px!important;
  margin-bottom:-2px!important;
  background-size:100% 100%!important;
  background-repeat:repeat-y!important;
  background-position:center!important;
}
/* Remove fundos antigos compostos por CSS dos containers externos. */
#nineGamePopup .nineGamePopupCard,
#nineDevAuth .nineDevCard,
#nineDevPanel .nineDevCard,
#quickBoost .quickBoostModal,
#aboutModal .infoModal,
#supportModal .infoModal,
#telemetryModal .telemetryModalCard{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* v7.11.14 — preço visual de personalização */
.tileSkinMeta .miniGold{height:22px!important;width:22px!important;object-fit:contain!important;filter:none!important;margin-right:5px!important;vertical-align:middle!important}
.tileSkinMeta .price{font-size:12px!important;line-height:22px!important;font-weight:1000!important;vertical-align:middle!important}

/* =========================================================
   v7.11.73 — safe-area, notificações, continue e personagens
   v7.11.75 — Save offline Android V3 atômico
   ========================================================= */
/* Edge 40 Neo / punch-hole: HUD sempre abaixo da câmera no app nativo. */
html[data-nine-platform="android"] body.nine-playing .gamePage,
html[data-nine-platform="ios"] body.nine-playing .gamePage{
  box-sizing:border-box!important;
  padding-top:max(36px,calc(env(safe-area-inset-top,0px) + 8px),calc(var(--safe-area-inset-top,0px) + 8px))!important;
}
/* Notificações ancoradas pela DIREITA; o conjunto cresce para a esquerda. */
.nineCelebrationTray{left:auto!important;display:flex!important;flex-direction:row!important;justify-content:flex-end!important;transform:translateY(-50%)!important;max-width:calc(100vw - 24px)!important;}
/* Continue existe apenas no GAME OVER. WIN recebe hidden via JS. */
#gameOver .continuePanel{padding:0!important;margin:8px 0 12px!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;}
#gameOver .continuePanel.hidden{display:none!important;}
#gameOver .continuePanelFrame .sliceFrame__content{padding:12px 14px!important;}
#gameOver .continuePanelHead{display:flex;align-items:center;gap:9px;text-align:left;margin-bottom:9px;}
#gameOver .continuePanelHead img{width:42px;height:42px;object-fit:contain;}
#gameOver .continuePanelHead strong{display:block;font-size:13px;color:#17466e;}
#gameOver .continuePanelHead small{display:block;font-size:10px;color:#698b9d;margin-top:2px;line-height:1.25;}
#gameOver .continueActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#gameOver .continueAdButton,#gameOver .continueGemButton{min-height:48px;border:0;border-radius:15px;font-weight:1000;font-size:11px;cursor:pointer;}
#gameOver .continueAdButton{background:#ffd341;color:#17466e;}
#gameOver .continueGemButton{background:#edf9fc;color:#17466e;border:1px solid rgba(42,134,170,.16);display:flex;align-items:center;justify-content:center;gap:6px;}
#gameOver .continueGemButton img{width:23px;height:23px;object-fit:contain;}
#gameOver .continueGemButton:disabled{opacity:.45;}
#gameOver .continueNoBalance{margin-top:7px;text-align:center;font-size:9px;font-weight:850;color:#7c617b;}
#gameOver .resultScreen.resultWin #continuePanel{display:none!important;}
/* Personagens bloqueados: preço OU missão. */
.mascotSelectionGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch;}
.mascotChoice{position:relative!important;min-width:0;}
.mascotChoice .mineMiniFrame,.mascotChoice .mineMiniFrame .sliceFrame__content{height:100%;}
.mascotChoice .mascotMainPreview{width:126px;height:126px;object-fit:contain;display:block;filter:drop-shadow(0 8px 9px rgba(38,105,130,.13));}
.mascotChoice.mascotOwned{cursor:pointer;}
.mascotChoice.mascotLocked{cursor:default;}
.mascotChoice.mascotLocked .mineMiniFrame .sliceFrame__content{justify-content:flex-start!important;min-height:330px!important;}
.mascotUnlockOr{margin-top:2px!important;font-size:7px!important;color:#6c899a!important;letter-spacing:.08em!important;}
.mascotGoldUnlock{margin-top:8px;width:100%;min-height:40px;border:0;border-radius:13px;background:linear-gradient(180deg,#ffe76a,#ffc526);color:#17466e;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:0 4px 8px rgba(170,120,0,.13);}
.mascotGoldUnlock img{width:25px!important;height:25px!important;margin:0!important;filter:none!important;}
.mascotGoldUnlock b{font-size:14px;}
.mascotOr{display:block;margin:6px 0 4px;font-size:8px;font-weight:1000;color:#80a1b2;}
.mascotMissionBox{width:100%;padding:8px;border-radius:12px;background:rgba(226,247,252,.78);border:1px solid rgba(42,134,170,.10);box-sizing:border-box;text-align:left;}
.mascotMissionBox>b{display:block;font-size:10px;color:#17466e;}.mascotMissionBox>span{display:block;margin-top:2px;font-size:8px;line-height:1.25;color:#66879a;font-weight:800;}
.mascotMissionBar{height:6px;margin-top:7px;border-radius:999px;background:rgba(62,131,160,.14);overflow:hidden;}.mascotMissionBar i{display:block;height:100%;background:linear-gradient(90deg,#24c7b6,#32b4d7);border-radius:inherit;}.mascotMissionBox>small{display:block;margin-top:4px;text-align:right;font-size:8px;color:#17466e;font-weight:1000;}
/* Reposicionar: custo igual ao +10 movimentos, branco 17px mesmo no mobile. */
#quickBoost .benefitCard[data-boost="reposition"] .powerupCost strong{color:#fff!important;font-size:17px!important;}
@media(max-width:430px){#quickBoost .benefitCard[data-boost="reposition"] .powerupCost strong{font-size:17px!important}.mascotChoice.mascotLocked .mineMiniFrame .sliceFrame__content{min-height:300px!important}.mascotChoice .mascotMainPreview{width:105px;height:105px}}


/* VC23 - saldo persistente de personalizacao e conversao rapida na Mina */
#shop .mineQuickWallet[hidden],#shop .mineQuickExchangePopup[hidden]{display:none!important}
#shop .mineQuickWallet{position:sticky;top:0;z-index:14;display:flex;align-items:center;gap:7px;min-height:51px;padding:7px 9px;margin:4px 0 2px;border-radius:15px;background:rgba(221,245,252,.97);border:1px solid rgba(32,113,164,.25);box-shadow:0 4px 12px rgba(15,60,103,.12);backdrop-filter:blur(9px)}
#shop .mineQuickCurrency{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:5px;min-width:0;color:#113e61;font-weight:900;font-size:clamp(12px,3vw,17px)}
#shop .mineQuickCurrency img{width:25px;height:25px;object-fit:contain;flex-shrink:0}
#shop .mineQuickCurrency strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shop .mineQuickExchangeBtn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:94px;min-height:37px;padding:6px 10px;border:1px solid #247a91;border-radius:11px;background:linear-gradient(#13bdcb,#047f9d);color:#fff;font-weight:900;font-size:12px;box-shadow:0 3px 0 #115475}
#shop .mineQuickExchangeBtn span:first-child{font-size:21px;line-height:1}
#shop .minePageV710.mineQuickWalletActive .mineTabs{top:51px;z-index:13}
#shop .mineQuickExchangePopup{position:sticky;top:51px;z-index:15;margin:5px 0 8px;padding:11px;border:1px solid #78acc7;border-radius:17px;background:#edfaff;box-shadow:0 6px 22px rgba(10,64,100,.24)}
#shop .mineQuickExchangeHead{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:9px;color:#194464;font-size:14px}
#shop .mineQuickExchangeHead button{min-width:31px;min-height:31px;border:0;border-radius:9px;background:#d1eaf4;color:#174365;font-size:23px}
#shop .mineQuickExchangeOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#shop .mineQuickExchangeOption{display:flex;align-items:center;justify-content:space-around;gap:2px;min-width:0;min-height:65px;padding:7px 3px;border:1px solid #90c9d8;border-radius:12px;background:#fff;color:#164c72;font-weight:900;font-size:12px}
#shop .mineQuickExchangeOption span{display:flex;align-items:center;flex-direction:column;gap:2px}
#shop .mineQuickExchangeOption img{width:23px;height:23px;object-fit:contain}
#shop .mineQuickExchangeOption:disabled{opacity:.45;filter:grayscale(.55)}
#shop .mineQuickExchangeStatus{min-height:0;margin:5px 0 0;color:#174d64;font-size:12px}


/* VC23A - botao Trocar da Mina em verde padrao e texto branco em botoes verdes/azuis */
.sliceButton.green,.sliceButton.blue,.assetGreen,.assetBlue,.gameOverPrimary,.gameOverSecondary,#savePlayer,#newGame,.btnGreen,.btnBlue{color:#fff!important;text-shadow:0 2px 2px rgba(0,50,85,.45)!important;}
#shop .mineQuickExchangeBtn{--btn-scale:calc(50 / 105);--btn-overlap:9px;min-width:112px;min-height:50px;padding:0 18px!important;border:0!important;border-radius:0!important;background:none!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;color:#fff!important;font-weight:1000!important;font-size:12px;line-height:1;text-shadow:0 2px 2px rgba(0,50,85,.45)!important;}
#shop .mineQuickExchangeBtn span:first-child{font-size:18px;line-height:1;}


/* VC23B - saldos da Mina abaixo das abas */
#shop .mineTabs{top:0;z-index:15;}
#shop .minePageV710.mineQuickWalletActive .mineTabs{top:0;z-index:15;}
#shop .mineQuickWallet{top:88px;z-index:14;margin-top:-6px;}
#shop .mineQuickExchangePopup{top:143px;z-index:16;}
@media(max-width:430px){#shop .mineQuickWallet{top:84px;}#shop .mineQuickExchangePopup{top:139px;}}