@font-face { font-family: Bricolage; src: url(assets/bricolage.woff2) format('woff2'); font-display: swap; }
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; } /* o user-select:none global impede digitar em inputs no Safari/iOS */
html { background: linear-gradient(#4a3f58 0%, #8c4a58 30%, #b85a4e 50%, #e8964a 76%, #f2c25a 100%) #8c4a58; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; font-family: Bricolage, system-ui, sans-serif; color: #fff; }
#stage { position: fixed; inset: 0; background: linear-gradient(#4a3f58 0%, #8c4a58 30%, #b85a4e 50%, #e8964a 76%, #f2c25a 100%); touch-action: none; overflow: hidden; }
.slots, .items, .fx-layer { position: absolute; inset: 0; pointer-events: none; }
.slot { position: absolute; left: 0; top: 0; background: url(assets/slot.webp) center/100% 100% no-repeat; opacity: .75; }
.egg-slot { filter: hue-rotate(40deg); box-shadow: 0 0 14px #ffe9a055; border-radius: 16px; }
.egg-slot::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: 7%; height: 12%; border-radius: 50%; background: radial-gradient(#00000059, #0000 70%); pointer-events: none; }
.egg-track { position: absolute; left: 8%; right: 8%; bottom: -10px; height: 6px; background: #0006; border-radius: 3px; overflow: hidden; }
.egg-bar { height: 100%; background: #7dff8f; width: 0; }
.item { position: absolute; left: 0; top: 0; will-change: transform; }
.item.dragging { z-index: 5; filter: drop-shadow(0 6px 6px #0008); }
.item.ghost { opacity: .2; }
.pop, .body, .outline, .lock { position: absolute; inset: 0; }
.body, .outline { background-repeat: no-repeat; }
.outline { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lock { inset: 2% auto auto 4%; display: none; background-repeat: no-repeat; }
@keyframes lock-on { 0% { transform: scale(2.4); opacity: 0; } 55% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lock-off { 0% { transform: scale(1) rotate(0); opacity: 1; } 40% { transform: scale(1.5) rotate(-18deg); } 100% { transform: scale(1.8) translateY(-30%) rotate(12deg); opacity: 0; } }
@keyframes lock-glow { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 10px #ffd45a) brightness(1.25); } }
.lock.lock-on { animation: lock-on .38s ease-out; }
.lock.lock-off { animation: lock-off .65s ease-in forwards; }
.pop.lock-glow { animation: lock-glow .6s ease-out; }
.spawn { position: absolute; left: 0; top: 0; transition: transform .06s; }
.spawn.pressed { filter: brightness(1.2) drop-shadow(0 0 8px #fff8); }
.spawn-dim, .spawn-lit { position: absolute; background-repeat: no-repeat; left: 5%; top: 5%; }
.spawn-dim { opacity: .55; }
.spawn-dim { filter: saturate(.5) brightness(.9); }
.hud { position: absolute; left: calc(var(--col-x) + var(--col-w) * .06); width: calc(var(--col-w) * .5); top: var(--hud-top); height: var(--hud-h); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-top: calc(var(--hud-h) * .08); pointer-events: none; }
.coin { display: flex; align-items: center; gap: 8px; font-size: calc(var(--hud-h) * .3); font-weight: 800; text-shadow: 0 2px 0 #0008, 0 0 4px #0008; }
.coin-unit { display: inline-block; align-self: flex-start; margin: 1px 0 0 4px; padding: .1em .75em; border-radius: 999px; font-size: calc(var(--hud-h) * .095); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: #ffe9b0; background: #00000033; box-shadow: inset 0 0 0 1px #ffe9b02e; text-shadow: 0 1px 0 #0009; }
.coin.tap, .coin-unit.tap { pointer-events: auto; cursor: pointer; }
.coin-unit:empty { background: none; box-shadow: none; }
.coin-unit:empty::before { content: '\200b'; }
.coin-icon { width: 34px; height: 34px; background-repeat: no-repeat; }
.bonus-btn { position: absolute; width: 60px; height: 60px; padding: 0; border: 0; background: none; display: grid; place-items: center; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.bonus-chip { position: absolute; padding: 4px 8px; background: #0007; border-radius: 12px; font-size: 14px; pointer-events: none; }
.float { position: absolute; font-weight: 800; -webkit-text-stroke: .08em #2a1a00; paint-order: stroke fill; text-shadow: 0 2px 0 #0009; white-space: nowrap; pointer-events: none; z-index: 9; }
.ring { position: absolute; border: 4px solid; border-radius: 50%; pointer-events: none; }
.bar { position: absolute; right: calc(var(--col-x) + var(--col-w) * .05); top: calc(var(--hud-top) + var(--hud-h) * .06); width: calc(var(--col-w) * .44); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--hud-h) * .05); }
.bar { grid-template-rows: calc(var(--hud-h) * .55) calc(var(--hud-h) * .38); }
.bar button { --c1: #4ae070; --c2: #1fa043; --rim: #8ff2a6; position: relative; display: grid; place-items: center; padding: 3px 2px; border: 2px solid var(--rim); border-radius: 13px; font: 800 clamp(10px, calc(var(--hud-h) * .13), 14px) Bricolage, system-ui; color: #fff; letter-spacing: .04em; background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 0 0 1.5px #1b1230, 0 4px 6px #0006, inset 0 -4px 0 #00000026, inset 0 2px 4px #ffffff40; text-shadow: 0 1px 2px #0007; transition: transform .07s ease-out, box-shadow .07s ease-out; }
.bar button::before { content: ''; position: absolute; left: 10%; right: 10%; top: 3px; height: 26%; border-radius: 9px 9px 50% 50% / 9px 9px 8px 8px; background: linear-gradient(#ffffff38, #ffffff05); pointer-events: none; }
.bar button:active { transform: translateY(2px); box-shadow: 0 0 0 1.5px #1b1230, 0 1px 2px #0006, inset 0 -2px 0 #00000026, inset 0 2px 4px #ffffff40; }
.bar .big { grid-template-rows: 1fr auto; row-gap: 2px; padding-bottom: 5px; }
.bar .big .t-lab { font-size: clamp(10px, calc(var(--hud-h) * .115), 13px); }
.bar .small { grid-template-columns: auto auto; column-gap: 5px; justify-content: center; }
.bar .small .t-ico .ico { zoom: .92; }
.bar .small .t-lab { font-size: clamp(10px, calc(var(--hud-h) * .115), 13px); letter-spacing: .02em; }
.bar .upgrades-btn { --c1: #4ae070; --c2: #1fa043; --rim: #8ff2a6; }
.bar .upgrades-btn .t-ico .ico { filter: drop-shadow(0 1px 0 #0a4a1c) drop-shadow(0 0 2px #0a4a1c); }
.bar .shop-btn { --c1: #a67bff; --c2: #6a3fd6; --rim: #cdb4ff; }
.bar .navy { --c1: #3c4a8f; --c2: #222b5c; --rim: #6677bd; }
.shop-ico { position: absolute; right: 4px; bottom: 4px; width: clamp(18px, calc(var(--hud-h) * .24), 30px); aspect-ratio: 1; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M4 14 6 5h28l2 9z' fill='%23ff8a4c'/><path d='M4 14h8v3a4 4 0 0 1-8 0zM12 14h8v3a4 4 0 0 1-8 0zM20 14h8v3a4 4 0 0 1-8 0zM28 14h8v3a4 4 0 0 1-8 0z' fill='%23fff3d6'/><path d='M7 21h26v15H7z' fill='%23ffd6a0'/><path d='M16 36V25h8v11z' fill='%23a85b2e'/><path d='M4 14 6 5h28l2 9z M7 21h26v15H7z' fill='none' stroke='%232d1b17' stroke-width='2' stroke-linejoin='round'/></svg>") center/contain no-repeat; filter: drop-shadow(0 1px 0 #0006); pointer-events: none; }
.modal-layer { position: absolute; inset: 0; background: #000b; display: grid; place-items: center; z-index: 20; }
.modal-layer[hidden] { display: none; }
.modal { width: min(92%, 420px); background: #5a3a30; border: 4px solid #2d1b17; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px #8a5e4a, 0 10px 30px #000a; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 800; background: #3d261f; letter-spacing: .03em; }
.x { border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; }
.modal-body { padding: 14px 16px; display: grid; gap: 10px; }
.modal-body p { margin: 0; }
.row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.info { display: grid; flex: 1; min-width: 0; }
.row .buy { flex: none; width: 92px; text-align: center; }
.buy, .prize, .modal-body button { padding: 10px 14px; border: 3px solid #5b3a2a; border-radius: 12px; font: 800 14px Bricolage, system-ui; color: #fff; background: linear-gradient(#35d65f, #1fa043); text-shadow: 0 1px 0 #0006; box-shadow: 0 3px 0 #2d1b17; }
.buy:disabled { background: #6b5a55; color: #c9b9b3; }
.danger { background: #c0392b !important; }
.langs { display: flex; gap: 8px; }
.langs button { flex: 1; }
.toggle { background: #7a5546 !important; }
.toggle.on { background: #3aa856 !important; }
.blocked { position: fixed; inset: 0; z-index: 50; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; background: linear-gradient(#4a3f58, #b85a4e); }
.blocked h1 { margin: 0; font-size: 24px; }
.blocked p { margin: 0; max-width: 360px; line-height: 1.4; }
.blocked button { padding: 12px 22px; border: 3px solid #5b3a2a; border-radius: 12px; font: 800 15px Bricolage, system-ui; color: #0b3a1a; background: linear-gradient(#35d65f, #1fa043); box-shadow: 0 3px 0 #2d1b17; }
.rotate { display: none; position: absolute; inset: 0; z-index: 40; place-items: center; text-align: center; padding: 24px; font-size: 20px; font-weight: 800; background: linear-gradient(#4a3f58, #b85a4e); }
@media (orientation: landscape) and (max-height: 520px) { .rotate { display: grid; } }

.t-ico { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 0; font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 #000a; }
.t-ico { position: relative; z-index: 1; }
.t-ico .ico { filter: drop-shadow(0 1px 0 #0006); }
.t-lab { position: relative; z-index: 1; font-size: clamp(9px, calc(var(--hud-h) * .1), 12px); letter-spacing: .05em; line-height: 1; }
.modal-body.ow { gap: 12px; padding-top: 12px; }
.ow-away { justify-self: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #ffe9b0; background: #0000004d; box-shadow: inset 0 0 0 1px #ffe9b033; }
.ow-stage { position: relative; height: 128px; display: grid; place-items: center; margin: -2px -16px -6px; overflow: hidden; }
.ow-rays { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(#ffd84a40 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: ow-spin 14s linear infinite; }
.ow-stage::before { content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #ffd84a66, transparent 65%); }
.ow-coin { position: relative; filter: drop-shadow(0 6px 0 #0005); animation: ow-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, ow-bob 2.4s ease-in-out .5s infinite; }
.ow-tag { position: absolute; top: 14px; right: 22px; display: grid; justify-items: center; padding: 6px 10px 5px; border: 3px solid #1b5a2a; border-radius: 12px; color: #0b3a1a; background: linear-gradient(#a6ff9e, #3fc45e); box-shadow: 0 3px 0 #1b5a2a; transform: rotate(10deg); animation: ow-stamp .45s cubic-bezier(.3, 1.8, .5, 1) .45s both; }
.ow-tag b { font-size: 24px; line-height: .9; }
.ow-tag span { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ow-sum { display: grid; justify-items: center; gap: 2px; }
.ow-lead { margin: 0; font-size: 14px; font-weight: 700; opacity: .8; }
.ow-num { font-size: 54px; font-weight: 800; line-height: 1; color: #ffd84a; text-shadow: 0 3px 0 #7a4a10, 0 5px 0 #0005, 0 0 20px #ffb80055; font-variant-numeric: tabular-nums; }
.big-sub { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.big-unit { padding: .15em .8em; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: #ffe9b0; background: #0000004d; box-shadow: inset 0 0 0 1px #ffe9b038; }
.big-coins { font-size: 14px; font-weight: 700; opacity: .8; }
.ow-egg { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: #3d261f; box-shadow: inset 0 0 0 2px #ffd84a99; animation: ow-glow 1.6s ease-in-out infinite; }
.ow-egg-pic { flex: none; background-repeat: no-repeat; animation: ow-wiggle 1.6s ease-in-out infinite; }
.ow-egg-tx { display: grid; gap: 1px; }
.ow-egg-tx b { color: #fff3c4; }
.ow-egg-tx small { font-size: 12px; opacity: .75; }
.modal-body button.ow-go { padding: 13px 14px; font-size: 18px; letter-spacing: .03em; }
@keyframes ow-spin { to { transform: rotate(360deg); } }
@keyframes ow-pop { from { transform: scale(.2); opacity: 0; } }
@keyframes ow-bob { 50% { transform: translateY(-5px); } }
@keyframes ow-stamp { from { transform: rotate(10deg) scale(2.2); opacity: 0; } }
@keyframes ow-glow { 50% { box-shadow: inset 0 0 0 2px #ffd84a, 0 0 14px #ffd84a55; } }
@keyframes ow-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .ow-rays, .ow-coin, .ow-tag, .ow-egg, .ow-egg-pic { animation: none; } }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 60vh; overflow: auto; }
.bg-card { display: grid; gap: 6px; padding: 8px; border: 3px solid #2d1b17; border-radius: 12px; background: #3d261f; text-align: center; }
.bg-card.on { border-color: #7dff8f; }
.swatch { height: 64px; border-radius: 8px; border: 2px solid #0006; }
.goals { display: grid; gap: 10px; margin-bottom: 10px; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: #3d261f; }
.goal.done { opacity: .6; }
.gbar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #0006; overflow: hidden; }
.gbar i { display: block; height: 100%; background: #7dff8f; width: 0; }
.replant { display: grid; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 12px; background: #3d261f; }
.replant small { color: #e8d8cf; }

.stats { display: grid; gap: 6px; margin-bottom: 12px; }
.stat { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: #3d261f; }

/* ---- acabamento ---- */
.slot { opacity: .92; filter: brightness(1.05); }
.slot.ready { animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { filter: hue-rotate(40deg) brightness(1.5) drop-shadow(0 0 10px #ffe27a); } }
.rps { white-space: nowrap; margin: 5px 0 0 4px; font-size: calc(var(--hud-h) * .14); font-weight: 700; color: #ffe9b0cc; text-shadow: 0 1px 0 #0009; }
.rps.long { font-size: calc(var(--hud-h) * .115); }
.rps-n { font-weight: 800; color: #fff3cf; }
.rps-u { font-weight: 600; opacity: .85; }
.rps-s { font-weight: 700; opacity: .7; margin-left: .05em; }
.spawn-ring { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(#7dff8f calc(var(--p, 0) * 1%), #00000040 0); -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); mask: radial-gradient(circle, transparent 66%, #000 68%); }
.spawn-ring.full { background: #ff9f1a; animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.spawn.hint { animation: tapglow 1.1s ease-in-out infinite; }
@keyframes tapglow { 50% { filter: brightness(1.3) drop-shadow(0 0 12px #fff9); } }
.spawn-hint { position: absolute; left: 0; top: 0; text-align: center; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #0009, 0 0 6px #0009; pointer-events: none; white-space: nowrap; }
.bonus-chip { display: grid; gap: 3px; min-width: 0; background: linear-gradient(#00000099, #000000bb); border: 2px solid #ffd45a; font-weight: 800; }
.chip-bar { height: 4px; border-radius: 2px; background: #ffffff33; overflow: hidden; }
.chip-bar i { display: block; height: 100%; background: #ffd45a; }
.combo { position: absolute; left: calc(var(--col-x) + var(--col-w) * .06); top: calc(var(--hud-top) + var(--hud-h) * .8); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; row-gap: 2px; font-size: calc(var(--hud-h) * .15); opacity: 0; transition: opacity .15s; pointer-events: none; text-shadow: 0 2px 0 #0009; }
.combo.on { opacity: 1; }
.hud.combo-on .seed-chip { visibility: hidden; }
.combo small { font-weight: 800; letter-spacing: .12em; color: #ffe9b0; }
.combo b { font-size: 1.8em; line-height: 1; color: #fff; -webkit-text-stroke: .05em #2a1a00; paint-order: stroke fill; }
.combo-bar { grid-column: 1 / -1; width: 100%; min-width: 80px; height: 6px; border-radius: 3px; background: #0006; overflow: hidden; }
.combo-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd45a, #ff7a1a); }
.bar button { position: relative; }
.dot { position: absolute; top: -7px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; font-size: 11px; line-height: 1; border-radius: 8px; background: #ff3b30; border: 2px solid #fff; box-shadow: 0 1px 3px #0008; animation: pulse 1.2s infinite; }
.dot[hidden] { display: none; }
.modal { background: linear-gradient(#6a4538, #4e3128); border: 4px solid #2d1b17; box-shadow: 0 0 0 3px #b98a62, 0 0 0 6px #2d1b17, 0 14px 36px #000b; animation: modal-in .22s ease-out; }
.modal-head { background: linear-gradient(#4a2f26, #35201a); border-bottom: 3px solid #2d1b17; font-size: 17px; text-shadow: 0 2px 0 #0008; }
@keyframes modal-in { from { transform: translateY(18px) scale(.94); opacity: 0; } }
.modal-layer { backdrop-filter: blur(2px); }
.eff { color: #ffe9b0; }
.row-head { display: flex; align-items: center; gap: 8px; }
.row-head .lv { color: #cdb9ae; white-space: nowrap; flex: none; }
.row-head b { min-width: 0; }
.modal-body button.info-btn { flex: none; margin-left: auto; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #8a6a5a; background: #3d261f; box-shadow: none; font: italic 800 13px Georgia, serif; color: #ffe9b0; text-shadow: none; }
.modal-body button.info-btn.on { background: #c0861e; color: #fff; }
.more { display: grid; gap: 3px; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: #0003; }
.more[hidden], .rp-list[hidden] { display: none; }
.more .desc { color: #e8d8cf; line-height: 1.25; }
.more .gain { color: #9fe6a0; }
.need { height: 7px; margin-top: 4px; border-radius: 3px; background: #0006; overflow: hidden; }
.need[hidden] { display: block; visibility: hidden; }
.need.full i { background: #7dff8f; }
.need i { display: block; height: 100%; background: #d9a929; }
.buy.can { animation: can 1.2s ease-in-out infinite; }
@keyframes can { 50% { box-shadow: 0 3px 0 #2d1b17, 0 0 14px #7dff8f; filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .spawn.hint, .buy.can, .slot.ready, .dot, .modal, .egg-slot::before { animation: none; } }
.bonus-chip[hidden], .combo[hidden], .bonus-btn[hidden] { display: none; }
.discover { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
.discover-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #00000030, #000000a8); }
.discover-rays { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(#ffe27a55 0 8deg, #ffe27a00 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.discover-stage { position: absolute; left: 0; right: 0; top: 42%; transform-origin: 50% 40%; display: grid; justify-items: center; gap: 6px; will-change: transform, opacity; }
.discover-title { font-size: clamp(22px, 7vmin, 40px); font-weight: 800; letter-spacing: .06em; color: #ffe27a; -webkit-text-stroke: .12em #4a2a00; paint-order: stroke fill; text-shadow: 0 4px 0 #0009; }
.discover-pic { background-repeat: no-repeat; filter: drop-shadow(0 0 22px #ffe27a) drop-shadow(0 0 6px #fff) drop-shadow(0 8px 10px #000a); }
.discover-name { font-size: clamp(20px, 6vmin, 34px); font-weight: 800; color: #fff; -webkit-text-stroke: .1em #2a1a00; paint-order: stroke fill; text-shadow: 0 3px 0 #0009; }
.discover-level { padding: 3px 16px; border-radius: 14px; font-weight: 800; font-size: clamp(14px, 4vmin, 22px); color: #3a2a05; background: linear-gradient(#ffe27a, #e8a417); border: 3px solid #5b3a2a; box-shadow: 0 3px 0 #2d1b17; }
.confetti { position: absolute; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; }
.hero { display: flex; align-items: center; gap: 14px; }
.hero-pic { flex: none; background-repeat: no-repeat; }
.hero-meta { display: grid; gap: 6px; justify-items: start; }
.hero-meta b { font-size: 22px; }
.chip { padding: 2px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; color: #2a1a00; border: 2px solid #2d1b17; }
.detail-box { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #3d261f; }
.detail-box small, .lock-note { color: #e8d8cf; }
.attr-row { display: flex; justify-content: space-between; gap: 8px; }
.attr-row b { color: #7dff8f; }
.ico { display: inline-block; flex: none; background-repeat: no-repeat; }
.bonus-btn .ico { position: relative; filter: drop-shadow(0 3px 3px #0008); }
.bonus-glow { position: absolute; inset: -14px; border-radius: 50%; background: repeating-conic-gradient(#ffe27a99 0 12deg, #ffe27a00 12deg 30deg); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip-row { display: flex; align-items: center; gap: 6px; }
.crystal-n { margin-left: 1px; }
.bonus-big { display: grid; place-items: center; margin: 4px 0; }
.bonus-big .ico { filter: drop-shadow(0 0 14px #ffe27a) drop-shadow(0 4px 4px #0008); }
@media (prefers-reduced-motion: reduce) { .bonus-glow, .bonus-btn { animation: none; } }
.lock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lock-note { flex: 1; }
.modal-body button.lock-btn { flex: none; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border-radius: 14px; background: #7a5546; }
.modal-body button.lock-btn.on { background: #c0861e; }
.lock-btn .ico { filter: drop-shadow(0 1px 0 #0006); }
.modal-body button.close-btn { background: linear-gradient(#8a6a5a, #6a4c3e); }
.dot.left { right: auto; left: -6px; }
.bar .green.can { animation: can 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bar .green.can { animation: none; } }

@media (max-height: 700px) { .t-ico .ico { zoom: .72; } }

/* luva do Jardineiro: acompanha o monstro que ela leva */
.glove { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; filter: drop-shadow(0 4px 3px #0008); transition: opacity .25s; }
.glove.out { opacity: 0; }

.rp-level { color: #ffe9b0; font-weight: 700; }
.rp-bar { height: 10px; border-radius: 6px; background: #0006; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: #d9a929; border-radius: 6px; transition: width .3s; }
.rp-bar.full i { background: #7dff8f; }

.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.picks[hidden], .bonus-running[hidden] { display: none; }
.modal-body button.pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: 12px; line-height: 1.2; }
.modal-body button.pick b { font-size: 13px; }
.modal-body button.pick:disabled { opacity: .45; filter: grayscale(.6); }
.bonus-running { margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: #5b3a2a; color: #ffd86b; font: 800 13px Bricolage, system-ui; text-align: center; }

/* Opções */
.opt-title { font: 800 11px Bricolage, system-ui; letter-spacing: .08em; color: #d8b894; margin-top: 4px; }
.opt-group { display: grid; gap: 8px; padding: 8px; border-radius: 14px; background: #3d261f; }
.modal-body button.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #4d3128; box-shadow: none; border-width: 2px; text-align: left; }
.pill { position: relative; flex: none; width: 54px; height: 28px; border-radius: 14px; background: #2a1812; transition: background .15s; }
.pill u { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #c9b9b3; transition: transform .15s, background .15s; }
.switch.on .pill { background: #2f9e4f; }
.switch.on .pill u { transform: translateX(26px); background: #fff; }
.modal-body button.toggle { box-shadow: none; padding: 9px 6px; }
.modal-body .opt-group button.stats-btn, .modal-body .opt-group button.credits-btn, .modal-body .opt-group button.cloud-btn, .modal-body .opt-group button.install-btn { background: #4d3128; box-shadow: none; border-width: 2px; }
.modal-body button.danger.quiet { background: transparent !important; color: #ff9d90; border-color: #7a3a32; box-shadow: none; text-shadow: none; margin-top: 4px; }
.version { text-align: center; font: 700 11px Bricolage, system-ui; color: #a98f80; padding-top: 2px; }

/* Depuração */
.dbg-status { font: 700 12px Bricolage, system-ui; color: #ffd86b; }
.dbg-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-body button.dbg-btn { flex: 1 1 30%; padding: 8px 6px; font-size: 12px; box-shadow: none; border-width: 2px; background: #4d3128; }
.dbg-input { padding: 9px 10px; border-radius: 10px; border: 2px solid #5b3a2a; background: #2a1812; color: #fff; font: 700 14px Bricolage, system-ui; min-width: 0; flex: 1 1 100%; }
.dbg-text { min-height: 70px; border-radius: 10px; border: 2px solid #5b3a2a; background: #2a1812; color: #fff; font: 11px monospace; padding: 8px; }
.dbg-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 60vh; overflow: auto; }
.dbg-cell { display: grid; justify-items: center; gap: 1px; text-align: center; font: 700 10px Bricolage, system-ui; }
.dbg-cell.off { opacity: .35; }
.dbg-cell b { color: #ffd86b; }
.dbg-pic { background-repeat: no-repeat; }

/* Janelas altas (depuração, galeria): o corpo rola dentro da tela e o cabeçalho fica visível */
.modal { display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; }
.modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* Padrão do fundo: mais transparente e rolando devagar na diagonal; sem animação para quem pede menos movimento */
.bg-pattern { position: absolute; left: calc(var(--ps, 300px) * -1); top: calc(var(--ps, 300px) * -1); right: 0; bottom: 0; background-repeat: repeat; opacity: .55; pointer-events: none; will-change: transform; } /* o movimento vem de bgMotion.ts */
.bg-pattern[hidden] { display: none; }

/* nuvem e outros aparelhos */
.cl-status{font-weight:700;margin:0 0 6px}
.cl-msg{color:#ffb4b4;min-height:1.2em;margin:0 0 6px;font-size:.9em}
.cl-grid{display:grid;gap:8px;margin:8px 0 12px}
.cl-btn{width:100%}
.cl-card{display:grid;gap:8px;padding:12px;margin-bottom:4px;border-radius:14px;background:#3d261f;box-shadow:inset 0 0 0 2px #0004}
.cl-card .cl-status{margin:0;font-size:14px;opacity:.85}
.modal-body button.cl-switch{width:100%;padding:12px 14px;font-size:16px;background:#7a5546}
.modal-body button.cl-switch.on{background:linear-gradient(#35d65f,#1fa043)}
.cl-more{display:grid;gap:8px}
.cl-more[hidden]{display:none}
.modal-body button.cl-link{background:none;border:0;box-shadow:none;color:#ffe9b0;text-shadow:none;padding:6px;font-size:14px;opacity:.9}
.modal-body button.cl-opt{display:grid;gap:2px;padding:14px;text-align:left}
.cl-opt b{font-size:16px}
.cl-opt small{font-size:13px;font-weight:600;opacity:.85}
.cl-ask{line-height:1.4}
.cl-btn.primary{background:linear-gradient(#58c46a,#2f9a48)}
.cl-btn.quiet{opacity:.75}
.cl-code{font:700 1.9em/1.2 ui-monospace,monospace;letter-spacing:.14em;text-align:center;background:rgba(0,0,0,.35);border-radius:12px;padding:12px;margin:10px 0;user-select:all;word-break:break-all}
.cl-qr{background:#fff;border-radius:12px;padding:8px;width:min(62vw,220px);margin:8px auto}
.cl-qr svg{display:block;width:100%;height:auto}
.cl-input{width:100%;box-sizing:border-box;text-transform:uppercase;margin:8px 0}
.cl-cmp{display:grid;gap:4px;margin:8px 0}
.cl-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:6px;font-size:.88em;align-items:center}
.cl-row.head{opacity:.8;font-size:.8em}
.cl-row b{text-align:right}
.cl-alt{background:rgba(255,255,255,.14)}

/* aviso de fim de combo (cresce com o tamanho do combo) */
.combo-fx { position: absolute; z-index: 10; display: grid; justify-items: center; gap: .1em; pointer-events: none; text-align: center; white-space: nowrap; will-change: transform, opacity; }
.combo-fx > * { position: relative; }
.combo-rays { position: absolute !important; left: 50%; top: 50%; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--cc) 45%, transparent) 0 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 68%); mask: radial-gradient(circle, #000 12%, transparent 68%); z-index: -1; }
.combo-fx-title { font-weight: 800; letter-spacing: .08em; font-size: .62em; color: #fff; -webkit-text-stroke: .12em #2a1a00; paint-order: stroke fill; text-shadow: 0 .08em 0 #0009; }
.combo-fx-num { font-weight: 800; line-height: .95; font-size: 2.4em; color: var(--cc); -webkit-text-stroke: .1em #2a1a00; paint-order: stroke fill; text-shadow: 0 .06em 0 #0009, 0 0 .5em color-mix(in srgb, var(--cc) 70%, transparent); }
.tier2 .combo-fx-num { font-size: 3em; }
.tier3 .combo-fx-num { font-size: 3.6em; color: #ffe27a; text-shadow: 0 .06em 0 #0009, 0 0 .35em #ff9f1a, 0 0 .9em #ff5a1a; }
.tier4 .combo-fx-num { font-size: 4em; color: #ffd0a0; text-shadow: 0 .06em 0 #0009, 0 0 .35em #ff5a3c, 0 0 1em #ff1a1a; }
.tier5 .combo-fx-num { font-size: 4.4em; color: #f3cfff; text-shadow: 0 .06em 0 #0009, 0 0 .35em #d96bff, 0 0 1em #7a2bff; }
.tier6 .combo-fx-num { font-size: 4.8em; color: #ffffff; text-shadow: 0 .06em 0 #0009, 0 0 .3em #8ff3ff, 0 0 1em #2bb5ff, 0 0 1.6em #ffe27a; }
.combo-fx-coins { display: flex; align-items: center; gap: .3em; font-weight: 800; font-size: .8em; color: #fff; -webkit-text-stroke: .1em #2a1a00; paint-order: stroke fill; text-shadow: 0 .06em 0 #0009; }
.combo-fx-unit { justify-self: center; min-width: 1em; padding: .12em .8em; border-radius: 999px; font-size: .5em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: #ffe9b0; background: #0000006b; box-shadow: inset 0 0 0 1px #ffe9b03d; text-shadow: 0 .08em 0 #000a; }
.combo-fx-unit:empty { visibility: hidden; }
.combo-fx-unit:empty::before { content: '\200b'; }
.combo-fx-coins i { display: block; flex: none; }

/* indicador de sementes (verde-água, diferente do dourado das moedas): multiplicador permanente e ganho do Replantar */
.seed-chip { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .35em; max-width: calc(var(--col-w) * .4); margin: calc(var(--hud-h) * .03) 0 0 4px; padding: .14em .6em .14em .4em; border: 2px solid #0b5a4a; border-radius: 16px; font: 800 calc(var(--hud-h) * .135) Bricolage, system-ui; color: #eafff8; background: linear-gradient(#27c9a4, #138a74); text-shadow: 0 1px 0 #0009; box-shadow: 0 2px 0 #06352c; cursor: pointer; }
.seed-chip[hidden] { display: none; }
.seed-chip .seed-ic { font-size: 1.1em; }
.seed-chip.ready { animation: seed-pulse 1.4s ease-in-out infinite; }
@keyframes seed-pulse { 50% { transform: scale(1.06); box-shadow: 0 2px 0 #06352c, 0 0 14px #3dffd0; filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .seed-chip.ready { animation: none; box-shadow: 0 2px 0 #06352c, 0 0 10px #3dffd0; } }

/* roleta do bônus (abertura de caixa) */
.modal.bare { background: none; border: 0; box-shadow: none; overflow: visible; animation: none; max-height: none; }
.modal.bare .modal-head { display: none; }
.modal.bare .modal-body { padding: 0; overflow: visible; }
.rl-body { padding: 0; }
.rl-title { text-align: center; font-size: 34px; font-weight: 800; letter-spacing: .06em; color: #ffe27a; -webkit-text-stroke: .08em #2a1a00; paint-order: stroke fill; text-shadow: 0 3px 0 #0009, 0 0 18px #ff9f1a; margin: 0 0 12px !important; animation: rl-title-in .35s ease-out; }
@keyframes rl-title-in { from { transform: scale(.6); opacity: 0; } }
.modal.bare .rl-view { box-shadow: 0 8px 30px #000c; }
.rl-view { position: relative; overflow: hidden; border-radius: 14px; background: #1f1420; border: 3px solid #5b3a2a; height: 142px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rl-strip { display: flex; height: 100%; align-items: center; will-change: transform; }
.rl-card { flex: none; box-sizing: border-box; height: 118px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-right: 2px solid #0006; border-bottom: 5px solid var(--rc, #8a8f98); background: linear-gradient(#3a2a3c, #2a1c2c); font-weight: 800; text-shadow: 0 1px 0 #000a; }
.rl-card b { font-size: 20px; line-height: 1; }
.rl-card small { font-size: 12px; color: #ffe9b0; }
.rl-card.common { --rc: #9aa3ad; }
.rl-card.rare { --rc: #4aa8ff; background: linear-gradient(#26405e, #1b2d44); }
.rl-card.epic { --rc: #b45cff; background: linear-gradient(#45285e, #301a44); }
.rl-card.legendary { --rc: #ffc23a; background: linear-gradient(#5e4a1c, #443412); }
.rl-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #ffe27a; z-index: 2; border-radius: 2px; }
.rl-view.landed .rl-mark { animation: rl-flash .5s ease-out 2; }
@keyframes rl-flash { 50% { box-shadow: 0 0 22px #fff, 0 0 44px var(--rc, #ffe27a); } }
.rl-card.win { animation: rl-win .9s ease-in-out infinite; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--rc), 0 0 22px var(--rc); }
@keyframes rl-win { 50% { transform: scale(1.08); filter: brightness(1.25); } }
.rl-result { margin: 14px 0 4px !important; text-align: center; font-size: 22px; font-weight: 800; opacity: 0; transform: translateY(8px) scale(.9); transition: all .3s; -webkit-text-stroke: .06em #2a1a00; paint-order: stroke fill; text-shadow: 0 2px 0 #0009; }
.rl-result.show { opacity: 1; transform: none; }
.rl-result.common { color: #e6ebf2; }
.rl-result.rare { color: #7cc2ff; }
.rl-result.epic { color: #d39bff; }
.rl-result.legendary { color: #ffd45a; text-shadow: 0 2px 0 #0009, 0 0 14px #ff9f1a; }
@media (prefers-reduced-motion: reduce) { .rl-card.win, .rl-view.landed .rl-mark { animation: none; } }

/* Prestígio: explicação em blocos */
.rp-what { font-size: 13px; line-height: 1.35; }
.rp-gain { padding: 8px 10px; border-radius: 10px; background: linear-gradient(#1f6f5e, #145446); border: 2px solid #27c9a4; color: #eafff8; font-weight: 800; font-size: 14px; text-align: center; text-shadow: 0 1px 0 #0008; }
.rp-gain[hidden], .rp-have[hidden], .rp-level[hidden], .rp-bar[hidden] { display: none; }
.rp-have { color: #7dffd9 !important; font-weight: 700; }
.rp-list { display: grid; gap: 3px; }
.rp-loses { color: #ffb4a8 !important; }
.rp-keeps { color: #b6f5c0 !important; }
.rp-tip { color: #ffe9b0 !important; }

/* abertura do ovo */
.eg-body { grid-template-columns: minmax(0, 1fr); padding: 0; text-align: center; }
.eg-title { margin: 0 0 4px !important; font-size: 32px; font-weight: 800; letter-spacing: .06em; color: var(--ec, #ffe27a); -webkit-text-stroke: .08em #2a1a00; paint-order: stroke fill; text-shadow: 0 3px 0 #0009, 0 0 18px var(--ec, #ff9f1a); animation: rl-title-in .35s ease-out; }
.eg-stage { position: relative; height: 230px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; place-items: center; overflow: visible; }
.eg-stage > * { grid-area: 1 / 1; }
.eg-egg, .eg-mon { background-repeat: no-repeat; filter: drop-shadow(0 6px 6px #000a); }
.eg-egg { filter: drop-shadow(0 0 14px var(--ec)) drop-shadow(0 6px 6px #000a); }
.eg-mon { opacity: 0; filter: drop-shadow(0 0 16px var(--ec)) drop-shadow(0 6px 6px #000a); }
.eg-mon.show { opacity: 1; }
.eg-flash { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(circle, #fff, #fff0 70%); opacity: 0; pointer-events: none; }
.eg-conf { position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; }
.eg-name, .eg-lvl, .eg-gems { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.eg-name.show, .eg-lvl.show, .eg-gems.show { opacity: 1; transform: none; }
.eg-name { margin: 2px 0 0 !important; font-size: 24px; font-weight: 800; color: #fff; -webkit-text-stroke: .07em #2a1a00; paint-order: stroke fill; text-shadow: 0 2px 0 #0009; }
.eg-lvl { margin: 0 !important; font-size: 15px; font-weight: 800; color: var(--ec); text-shadow: 0 1px 0 #000a; }
.eg-gems { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 4px; padding: 6px 16px 6px 10px; border-radius: 999px; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(#6a2bb0, #44167e); border: 3px solid #b88bff; box-shadow: 0 3px 0 #1d0a3a, 0 0 18px #9a5cff88; text-shadow: 0 1px 0 #000a; }
.eg-btn { margin: 14px auto 0; min-width: 160px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.eg-btn.show { opacity: 1; pointer-events: auto; }

.eg-slot { min-width: 0; overflow: hidden; width: 100%; align-self: center; }
.eg-card { gap: 3px; }
.eg-card-pic { background-repeat: no-repeat; filter: drop-shadow(0 3px 3px #0009); }
.eg-card b { font-size: 14px; }
.eg-card-gems { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: #e8d2ff; }
.eg-card-gems .ico { flex: none; }
.eg-stage .rl-view { height: 168px; }
.eg-stage .rl-card { height: 142px; }

/* Slot do ovo vazio: silhueta sutil de ovo, indica que só cabe um ovo ali */
.egg-slot::before { content: ''; position: absolute; left: 50%; top: 49%; width: 60%; height: 76%; transform: translate(-50%, -50%); opacity: .75; transition: opacity .3s; pointer-events: none; animation: egg-breathe 2.8s ease-in-out infinite;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'><path d='M30 4 C46 4 56 38 56 54 C56 68 44 76 30 76 C16 76 4 68 4 54 C4 38 14 4 30 4Z' fill='%23ffe9a0' fill-opacity='.16' stroke='%23fff3c4' stroke-opacity='.8' stroke-width='3' stroke-dasharray='7 6' stroke-linecap='round'/></svg>") center/contain no-repeat; }
.egg-slot.filled::before, .egg-slot.filled::after { opacity: 0; animation: none; }
@keyframes egg-breathe { 50% { transform: translate(-50%, -52%) scale(1.04); opacity: 1; } }

/* Tela do ovo chocando */
.ei-body { text-align: left; }
.ei-top { display: flex; align-items: center; gap: 14px; }
.ei-egg { flex: none; background-repeat: no-repeat; filter: drop-shadow(0 0 10px var(--ec)) drop-shadow(0 4px 4px #0008); animation: ei-bob 2.4s ease-in-out infinite; }
@keyframes ei-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
.ei-side { display: grid; gap: 2px; min-width: 0; }
.ei-level { font-size: 13px; color: var(--ec); letter-spacing: .04em; text-transform: uppercase; }
.ei-left { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; }
.ei-at { opacity: .75; font-size: 12px; }
.ei-bar { position: relative; height: 18px; border-radius: 9px; background: #2a1812; border: 2px solid #2d1b17; overflow: hidden; }
.ei-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(var(--ec), color-mix(in srgb, var(--ec) 60%, #000)); transition: width .4s linear; }
.ei-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; text-shadow: 0 1px 0 #000a; }
.ei-heat { font-size: 12px; opacity: .8; }
.ei-h { margin: 4px 0 0; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.ei-table { display: grid; gap: 5px; }
.ei-row { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: #0003; border-left: 4px solid #aab; font-size: 13px; }
.ei-row.rare { border-color: #4aa8ff; } .ei-row.epic { border-color: #b45cff; } .ei-row.legendary { border-color: #ffc23a; background: #ffc23a1f; }
.ei-tier { font-weight: 800; }
.ei-mon, .ei-gem { display: inline-flex; align-items: center; gap: 5px; }
.ei-mon i { width: 30px; height: 30px; display: block; background-repeat: no-repeat; flex: none; }
.ei-chance { font-weight: 800; opacity: .8; min-width: 34px; text-align: right; }
.ei-note { font-size: 11px; opacity: .65; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ei-egg { animation: none; } }

/* Aviso de versão nova */
.update-bar { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(94vw, 420px); padding: 8px 8px 8px 14px; border-radius: 14px; font: 700 13px Bricolage, system-ui; color: #fff; background: linear-gradient(#6a4538, #4e3128); border: 3px solid #2d1b17; box-shadow: 0 0 0 2px #b98a62, 0 8px 24px #000a; animation: modal-in .22s ease-out; }
.update-bar button { padding: 7px 12px; border-radius: 10px; border: 2px solid #2d1b17; font: 800 13px Bricolage, system-ui; color: #fff; cursor: pointer; }
.update-go { background: linear-gradient(#35d65f, #1fa043); box-shadow: 0 2px 0 #2d1b17; }
.update-later { background: #4d3128; padding: 7px 10px !important; }

/* Convite para instalar */
.install-nudge { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 59; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; width: min(94vw, 420px); padding: 10px 10px 10px 14px; border-radius: 14px; font: 700 13px/1.3 Bricolage, system-ui; color: #fff; background: linear-gradient(#6a4538, #4e3128); border: 3px solid #2d1b17; box-shadow: 0 0 0 2px #b98a62, 0 8px 24px #000a; animation: modal-in .22s ease-out; }
.install-nudge button { padding: 8px 12px; border-radius: 10px; border: 2px solid #2d1b17; font: 800 13px Bricolage, system-ui; color: #fff; cursor: pointer; }
.nudge-yes { background: linear-gradient(#35d65f, #1fa043); box-shadow: 0 2px 0 #2d1b17; }
.nudge-no { background: #4d3128; }

/* raridade do monstro do ovo */
.ei-rar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.ei-rar-chip { padding: 1px 7px; border-radius: 999px; border: 2px solid #fff; font-size: 11px; font-weight: 800; background: #0004; }
.eg-card-rar { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 7px; border-radius: 999px; color: #1b0f08; text-shadow: none; }

.bonus-total { text-align: center; padding: 10px; border-radius: 12px; background: #3d261f; box-shadow: inset 0 0 0 1px #ffe9b02e; }
.bonus-total small { display: block; opacity: .75; font-weight: 700; }
.bonus-total b { font-size: 26px; color: #ffe9b0; }
.bonus-sec { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.bonus-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #3d261f; }
.bonus-row span small { display: block; opacity: .65; font-size: 12px; }
.bonus-row b { color: #7dff8f; white-space: nowrap; }
.cl-msg:empty{display:none}
.modal-body button.cl-btn.quiet{background:#7a5546;opacity:1}
@media (min-height: 701px) { .bar .upgrades-btn .t-ico .ico { zoom: 1.2; } }

/* Tela de abertura */
#splash { position: fixed; inset: 0; z-index: 100; background: #2a2150; transition: opacity .45s ease-out; }
#splash img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-user-drag: none; }
#splash::before { content: none; position: absolute; inset: -30px; background: url(assets/splash.webp) center / cover; filter: blur(26px) brightness(.55); }
#splash img { position: relative; }
/* tela mais larga que a arte (tablet, computador): arte inteira no centro, com ela mesma desfocada ao fundo */
@media (min-aspect-ratio: 3/5) { #splash::before { content: ''; } #splash img { object-fit: contain; } }
#splash.out { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #splash { transition: none; } }