:root {
  --wood-dark: #3b1b0a;
  --wood-mid: #6e3516;
  --wood-light: #b96a2f;
  --wood-gold: #e1a44f;
  --cream: #fff0c9;
  --cream-2: #ffe4a8;
  --green: #32c64a;
  --green-dark: #13942f;
  --blue: #4aabef;
  --blue-dark: #1878c5;
  --amber: #ffb21d;
  --red: #e85246;
  --text: #46230e;
  --shadow: 0 8px 0 rgba(65, 29, 8, .55), 0 16px 28px rgba(24, 53, 21, .24);
  --nav-height: 78px;
  --hud-height: 112px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #173d24; font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: var(--text); overflow: hidden; }
button, input { font: inherit; }
textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .58; }
.hidden { display: none !important; }

body {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(18, 47, 26, .14), rgba(18, 47, 26, .14)),
    url("assets/fundo.png") center / cover no-repeat fixed,
    #142f1e;
}

.app-shell {
  position: relative;
  width: min(100vw, 470px);
  height: 100dvh;
  max-height: 980px;
  overflow: hidden;
  isolation: isolate;
  background: #75c971 url("assets/fundo.png") center top / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 90px rgba(0,0,0,.45);
}

.startup-loader {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 28px calc(56px + env(safe-area-inset-bottom, 0));
  background:
    linear-gradient(to bottom, rgba(20, 42, 18, .03), rgba(20, 42, 18, .08) 58%, rgba(19, 36, 15, .46)),
    url("assets/fundo.png") center top / cover no-repeat;
  transition: opacity .45s ease, visibility .45s ease;
}

.startup-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-loader-content {
  width: min(100%, 390px);
  display: grid;
  justify-items: center;
  gap: 13px;
  filter: drop-shadow(0 6px 4px rgba(65, 34, 6, .35));
}

.startup-loader h1 {
  margin: 0;
  color: #ffe26a;
  font-size: clamp(42px, 13vw, 62px);
  line-height: .95;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 5px 0 #714012, 0 0 16px rgba(255, 255, 255, .28);
}

.startup-progress {
  width: 100%;
  height: 24px;
  padding: 4px;
  border-radius: 999px;
  border: 3px solid #684016;
  background: linear-gradient(#754318, #472509);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 7px 0 rgba(60, 31, 8, .34);
  overflow: hidden;
}

.startup-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(45deg, #ffe05b 0 14px, #ffbd2d 14px 28px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 18px rgba(255, 210, 56, .68);
  animation: startupLoad 10s linear forwards;
}

.startup-loading-text {
  color: #fff8c7;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 3px 0 #5a2e0d;
}

@keyframes startupLoad { to { width: 100%; } }

.garden-background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)), url("assets/fundo.png");
  background-size: cover;
  background-position: center top;
}

.garden-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.05), transparent 42%, rgba(17,78,29,.1));
}

.cloud {
  position: absolute;
  width: 86px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  filter: blur(.2px);
  opacity: .24;
  animation: drift 24s linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 40px; height: 40px; left: 16px; bottom: 7px; }
.cloud::after { width: 48px; height: 48px; right: 10px; bottom: 2px; }
.cloud-a { top: 80px; left: -100px; }
.cloud-b { top: 170px; left: -160px; transform: scale(.7); animation-duration: 34s; animation-delay: -12s; }
@keyframes drift { to { transform: translateX(700px); } }

.leaf-sway { position: absolute; font-size: 25px; opacity: .35; animation: leafSway 3s ease-in-out infinite alternate; }
.leaf-sway-a { left: 7%; top: 18%; }
.leaf-sway-b { right: 8%; top: 36%; animation-delay: -1.2s; }
@keyframes leafSway { to { transform: rotate(18deg) translateY(4px); } }

.ambient-bee { position: absolute; font-size: 20px; z-index: 0; animation: ambientFlight 10s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); opacity: .38; }
.ambient-bee-a { top: 18%; left: 8%; }
.ambient-bee-b { top: 28%; right: 10%; animation-delay: -4s; animation-duration: 13s; }
@keyframes ambientFlight { 0%,100% { transform: translate(0,0) rotate(-5deg); } 35% { transform: translate(34px,-18px) rotate(6deg); } 70% { transform: translate(-18px,22px) rotate(-8deg); } }

.wood-panel {
  position: relative;
  border: 3px solid #4a220d;
  background:
    repeating-linear-gradient(3deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #b66b31 0%, #8b481f 45%, #713516 100%);
  box-shadow: inset 0 0 0 2px #dfa45c, inset 0 -9px 15px rgba(55,20,4,.18), var(--shadow);
  border-radius: 24px;
}

.wood-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 220, 155, .16);
  border-radius: inherit;
  pointer-events: none;
}

.hud {
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--hud-height);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px 0;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.profile-badge { position: relative; flex: 0 0 72px; height: 78px; filter: drop-shadow(0 7px 3px rgba(48,24,6,.35)); }
.profile-letter {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(#ff806c, #f25267); color: white; font-size: 30px; font-weight: 900;
  border: 5px solid #ffe093; outline: 3px solid #754018; text-shadow: 0 3px 0 rgba(120,20,20,.28);
}
.profile-level {
  position: absolute; bottom: -5px; left: 16px; width: 38px; height: 25px; display: grid; place-items: center;
  color: #fff; font-weight: 900; background: #3d1e0d; border: 3px solid #8c541f; border-radius: 13px;
}
.resource-stack { flex: 1; min-width: 0; padding-top: 2px; }
.resource-row {
  height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 13px;
  color: #ffe98d; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 #3a1a0a;
  border: 3px solid #4b240d; background: linear-gradient(#7e421d,#4d250e); box-shadow: inset 0 0 0 2px #a86730; border-radius: 16px;
}
.resource-row + .resource-row { margin-top: 4px; }
.resource-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; background: center / contain no-repeat; color: transparent; font-size: 0; }
.honey-icon { background-image: url("assets/icongotamel.png"); filter: drop-shadow(0 2px 0 #6a3b08); }
.money-icon { background-image: url("assets/icondinheiro.png"); filter: drop-shadow(0 2px 0 #0b661d); }
.cash-mini { display: inline-block; width: 22px; height: 21px; vertical-align: -4px; background: url("assets/icondinheiro.png") center / contain no-repeat; color: transparent; font-size: 0; }
.reward-money-icon { width: 68px; height: 68px; margin: auto; background: url("assets/icondinheiro.png") center / contain no-repeat; color: transparent; font-size: 0; transform: rotate(-4deg); }
.cash-stack-art { width: 62px; height: 58px; background: url("assets/icondinheiro.png") center / contain no-repeat; color: transparent; font-size: 0; transform: rotate(-4deg); }
.money-value { color: #6bea68; }
.resource-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wood-icon-button {
  border: 3px solid #4c250e; border-radius: 16px; background: linear-gradient(#a35b2a,#6e3517); box-shadow: inset 0 0 0 2px #d28a45, 0 6px 0 #3b1a09;
}
.hud-menu-button {
  width: 50px;
  height: 50px;
  display: grid;
  place-content: center;
  gap: 5px;
  margin-top: 4px;
  background: url("assets/botaoiconmenu.png") center / contain no-repeat;
  border: 0;
  box-shadow: none;
}
.hud-menu-button span { display: none; }

.screen-stack { position: absolute; inset: 0; }
.screen {
  position: absolute; inset: 0; display: none; padding: calc(var(--hud-height) + 2px) 12px calc(var(--nav-height) + env(safe-area-inset-bottom, 0) + 10px);
  overflow-y: auto; overscroll-behavior: none; scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: block; animation: screenIn .25s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(7px); } }

.stats-panel { padding: 8px; border-radius: 18px; margin-bottom: 8px; }
.stats-row { display: grid; grid-template-columns: 34% 1fr; gap: 8px; align-items: center; }
.stats-row + .stats-row { margin-top: 8px; }
.stat-label {
  height: 38px; border-radius: 15px; display: grid; place-items: center; color: white; font-size: 17px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.35); border: 2px solid #e9f3ff; box-shadow: inset 0 -5px 8px rgba(0,0,0,.14);
}
.stat-label.blue { background: linear-gradient(#62bdf4,#257dcc); }
.stat-label.amber { background: linear-gradient(#ffc94d,#ef9411); }
.progress-shell, .production-rate {
  position: relative; height: 38px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 3px solid #ffdda0; background: #4c2711; color: white; font-weight: 900; font-size: 18px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(45deg,#9d4d2a 0 14px,#743718 14px 28px); transition: width .35s ease; }
.progress-shell > span { position: relative; z-index: 2; }
.progress-star { color: #ffd437; text-shadow: 0 2px 0 #87490e; }
.production-rate { background: linear-gradient(#fff4d9,#ffe2a3); color: #48230e; }
.production-rate strong { font-size: 19px; }
.production-rate small { font-size: 14px; }
.drop-mini { width: 20px; height: 24px; display: inline-block; background: url("assets/icongotamel.png") center / contain no-repeat; color: transparent; font-size: 0; vertical-align: -5px; filter: drop-shadow(0 2px 0 #6a3b08); }

.tutorial-card { margin: 0 4px 10px; padding: 14px 14px 12px; background: linear-gradient(#fff6dc,#ffdca1); color: #4e2914; border-color: #61300f; }
.tutorial-card::before { border-color: rgba(97,48,15,.15); }
.tutorial-step {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%); min-width: 70px; padding: 5px 14px; border-radius: 14px;
  background: linear-gradient(#ffc844,#e89412); color: #4b260d; border: 3px solid #8e4a0d; font-weight: 900; text-align: center; box-shadow: 0 4px 0 rgba(72,31,4,.35);
}
.tutorial-copy { text-align: center; }
.tutorial-copy h2 { margin: 4px 0 6px; font-size: 20px; }
.tutorial-copy p { margin: 4px 0; font-weight: 700; font-size: 15px; line-height: 1.25; }
.tutorial-hint { color: #96632f; font-size: 13px !important; }
.tutorial-progress { text-align: center; font-weight: 900; color: #27702a; margin-top: 6px; }

.board-wrap {
  position: relative;
  width: min(100%, 292px);
  padding: 18px 18px 16px;
  margin: 0 auto 8px;
  border: 0;
  border-radius: 18px;
  background: none;
  box-shadow: none;
  isolation: isolate;
}
.board-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/fundoslots.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; touch-action: none; }
.bee-cell {
  position: relative; aspect-ratio: 1; min-height: 0; border: 2px solid rgba(78, 39, 14, .72); border-radius: 10px; background: linear-gradient(145deg, #7b421e, #5a2c12 62%, #47220d); box-shadow: inset 0 3px 7px rgba(42, 18, 5, .38), 0 1px 0 rgba(255, 209, 130, .22);
  display: grid; place-items: center; overflow: hidden; user-select: none;
}
.bee-cell::after { content: none; }
.bee-cell.occupied { cursor: grab; }
.bee-cell.selected { outline: 4px solid #ffd83f; outline-offset: -3px; box-shadow: 0 0 20px #ffbf22, inset 0 4px 9px rgba(0,0,0,.35); }
.bee-cell.merge-target { animation: mergePulse .8s ease-in-out infinite alternate; }
@keyframes mergePulse { to { box-shadow: 0 0 20px #fff65c, inset 0 4px 9px rgba(0,0,0,.35); transform: scale(1.03); } }
.bee-card { width: 86%; height: 86%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; pointer-events: none; }
.bee-card svg,.bee-card .bee-sprite { width: 68%; max-height: 66%; filter: drop-shadow(0 4px 2px rgba(0,0,0,.3)); }
.bee-sprite { display:block; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); transform-origin:center; }
.bee-level-label { position: absolute; bottom: 2px; padding: 2px 7px; border-radius: 8px; color: white; background: rgba(54,23,7,.84); font-size: clamp(9px, 2.4vw, 12px); font-weight: 900; border: 1px solid rgba(255,211,116,.35); }
.level-badge { position: absolute; top: 1px; right: 1px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(#fff06c,#e99312); border: 2px solid #6a320b; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #52250a; }
.honey-drip-board { position: absolute; right: 16px; top: -4px; width: 42px; height: 19px; border-radius: 0 0 14px 14px; background: #ffae13; box-shadow: inset 0 -3px 0 #df7d08; }
.honey-drip-board::after { content: ""; position: absolute; right: 5px; top: 12px; width: 10px; height: 20px; border-radius: 0 0 8px 8px; background: inherit; }

.purchase-panel { display: grid; grid-template-columns: 96px 1fr; gap: 9px; padding: 8px; margin-bottom: 6px; }
.bee-offer-card { border-radius: 18px; overflow: hidden; border: 2px solid #4b230d; background: linear-gradient(#9c5326,#713516); position: relative; min-height: 92px; display: grid; place-items: center; }
.bee-offer-art { width: 82px; height: 70px; }
.bee-offer-level { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px; text-align: center; background: rgba(117,53,17,.92); color: white; font-size: 14px; font-weight: 900; }
.purchase-actions { display: flex; flex-direction: column; gap: 8px; }
.price-row { flex: 1; min-height: 40px; border-radius: 17px; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(#fff3d3,#ffdba0); border: 2px solid #6b3512; font-size: 18px; font-weight: 900; }
.price-row strong { background: #51280f; color: white; padding: 5px 11px; border-radius: 12px; }

.button {
  min-height: 42px; border: 3px solid rgba(72,32,8,.72); border-radius: 18px; color: white; font-weight: 900; font-size: 18px; text-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -6px 0 rgba(0,0,0,.15), 0 5px 0 rgba(59,25,5,.38); transition: transform .08s ease, filter .15s;
}
.button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.12), 0 2px 0 rgba(59,25,5,.38); }
.button.green { background: linear-gradient(#4ee45d,#1cac38); }
.button.blue { background: linear-gradient(#64c3fb,#267fc9); }
.button.red { background: linear-gradient(#f06c5f,#c73432); }
.button.small { min-height: 36px; padding: 6px 18px; font-size: 15px; display: block; margin: 8px auto 0; }
.button.huge { width: 100%; min-height: 52px; font-size: 24px; }
.buy-button.tutorial-highlight { animation: buttonGlow .85s ease-in-out infinite alternate; }
@keyframes buttonGlow { to { box-shadow: 0 0 0 5px rgba(255,236,65,.8), 0 0 27px #ffe33b, inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(0,0,0,.15); } }

.drag-ghost { position: fixed; z-index: 200; width: 82px; height: 82px; pointer-events: none; transform: translate(-50%,-50%) scale(1.08); opacity: .94; filter: drop-shadow(0 10px 8px rgba(0,0,0,.35)); }

.bottom-nav {
  position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0)); padding: 7px 6px env(safe-area-inset-bottom, 0);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  background: linear-gradient(#8d4c23,#5a2b10); border-top: 3px solid #3c1b08; box-shadow: inset 0 3px 0 #d38a45, 0 -8px 20px rgba(28,66,23,.18);
}
.nav-button { border: 0; border-radius: 14px; background: transparent; color: white; text-shadow: 0 2px 0 #321405; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12px; font-weight: 900; min-width: 0; }
.nav-button.active { background: linear-gradient(#ffc23e,#d78112); box-shadow: inset 0 0 0 3px #ffe69a, 0 0 0 2px #6a330e, 0 0 16px rgba(255,184,34,.55); transform: translateY(-5px); }
.nav-icon {
  width: 36px;
  height: 32px;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 0 rgba(50, 20, 4, .45));
}
.nav-icon-friends { background-image: url("assets/iconamigos.png"); }
.nav-icon-apiary { background-image: url("assets/iconapiario.png"); }
.nav-icon-game { background-image: url("assets/iconjogo.png"); }
.nav-icon-game { transform: scaleX(-1); }
.nav-icon-shop { background-image: url("assets/iconloja.png"); }
.nav-icon-menu { background-image: url("assets/iconmenudebaixo.png"); }

/* Apiário */
.apiary-screen { padding-left: 8px; padding-right: 8px; }
.apiary-bonus-chip { position: absolute; top: calc(var(--hud-height) + 5px); left: 10px; width: 86px; padding: 7px; text-align: center; background: linear-gradient(#ff853a,#df4b18); border: 3px solid #8b370c; border-radius: 17px; color: white; font-weight: 900; box-shadow: 0 6px 0 rgba(71,26,3,.35); z-index: 3; }
.apiary-bonus-chip span { display:block; font-size: 20px; }
.apiary-bonus-chip small { display:block; }
.apiary-stage { position: relative; min-height: 500px; display: grid; place-items: center; padding-top: 34px; overflow:hidden; }
.jar-scene { position: relative; width: min(70vw, 300px); height: 360px; display: flex; align-items: flex-end; justify-content: center; }
.jar { position: relative; width: 76%; height: 82%; border: 10px solid rgba(222,248,247,.78); border-top-width: 13px; border-radius: 24% 24% 30% 30% / 10% 10% 16% 16%; background: linear-gradient(90deg,rgba(255,255,255,.25),rgba(195,248,244,.1) 40%,rgba(255,255,255,.2)); overflow: hidden; box-shadow: inset 10px 0 14px rgba(255,255,255,.2), inset -10px 0 18px rgba(86,142,140,.12), 0 15px 20px rgba(28,66,31,.26); backdrop-filter: blur(1px); }
.jar::before { content:""; position:absolute; left:8%; right:8%; top:8px; height:20px; border:5px solid rgba(226,250,246,.75); border-radius:50%; box-shadow: 0 8px 0 rgba(124,178,169,.2); z-index:4; }
.jar-lid-rim { position:absolute; z-index:6; top:68px; width:65%; height:38px; border:8px solid rgba(230,250,247,.82); border-radius:50%; box-shadow: 0 5px 0 rgba(105,155,152,.26); display:block; }
.jar-shine { position:absolute; z-index:5; left:14%; top:17%; width:12%; height:56%; border-radius:50%; background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.04)); transform:rotate(3deg); }
.jar-honey { position:absolute; left:0; right:0; bottom:0; height:0%; background:linear-gradient(#ffc32b,#f49c09 55%,#df7c00); transition:height .8s ease; box-shadow:inset 0 10px 16px rgba(255,241,91,.4); }
.honey-wave { position:absolute; left:-5%; top:-12px; width:110%; height:28px; background:rgba(255,215,59,.75); border-radius:50%; animation: wave 2.4s ease-in-out infinite alternate; }
@keyframes wave { to { transform: translateY(5px) skewX(3deg); } }
.jar-bubbles i { position:absolute; bottom:8%; width:8px; height:8px; border-radius:50%; background:rgba(255,239,100,.38); animation:bubble 4s linear infinite; }
.jar-bubbles i:nth-child(1){left:30%; animation-delay:-1s}.jar-bubbles i:nth-child(2){left:55%; width:12px;height:12px;animation-delay:-2.3s}.jar-bubbles i:nth-child(3){left:70%; animation-delay:-.4s}.jar-bubbles i:nth-child(4){left:42%; width:6px;height:6px;animation-delay:-3s}
@keyframes bubble { from { transform:translateY(0); opacity:0;} 20%{opacity:1} to{transform:translateY(-260px);opacity:0;} }
.flying-bee { position:absolute; left:50%; top:45%; z-index:8; width:58px; height:54px; filter:drop-shadow(0 4px 3px rgba(0,0,0,.22)); opacity:0; --scale:.9; --sx:-210px; --sy:-180px; --ex:240px; --ey:-160px; animation:beeCarry 7.2s ease-in-out infinite; }
.flying-bee .bee-sprite { width:100%; height:100%; }
.flight-two .bee-sprite,.flight-four .bee-sprite { transform:scaleX(1); }
.bee-carry-pot { position:absolute; left:22px; top:36px; width:22px; height:25px; background:url("assets/iconapiario.png") center / contain no-repeat; filter:drop-shadow(0 2px 1px rgba(65,31,8,.28)); animation:carryPot 7.2s ease-in-out infinite; }
.flight-one{--sx:-230px;--sy:-185px;--ex:240px;--ey:-125px;animation-delay:0s}
.flight-two{--sx:220px;--sy:-165px;--ex:-245px;--ey:-135px;animation-delay:-1.7s}
.flight-three{--sx:-235px;--sy:110px;--ex:235px;--ey:95px;--scale:.78;animation-delay:-3.4s}
.flight-four{--sx:230px;--sy:95px;--ex:-235px;--ey:120px;--scale:.82;animation-delay:-5.1s}
@keyframes beeCarry{
  0%{transform:translate(var(--sx),var(--sy)) scale(var(--scale)) rotate(-9deg);opacity:0}
  10%{opacity:1}
  44%{transform:translate(-18px,-42px) scale(var(--scale)) rotate(5deg);opacity:1}
  55%{transform:translate(0,-24px) scale(var(--scale)) rotate(-2deg);opacity:1}
  72%{transform:translate(34px,-58px) scale(var(--scale)) rotate(6deg);opacity:1}
  100%{transform:translate(var(--ex),var(--ey)) scale(var(--scale)) rotate(10deg);opacity:0}
}
@keyframes carryPot{
  0%,48%{opacity:1;transform:translateY(0) scale(.95)}
  56%{opacity:0;transform:translateY(48px) scale(.7)}
  100%{opacity:0;transform:translateY(48px) scale(.7)}
}
.upgrade-arrow { position:absolute; right:0; bottom:75px; width:76px; border:0; background:transparent; color:white; text-shadow:0 2px 0 #3c1b08; font-weight:900; }
.upgrade-arrow span { display:grid;place-items:center;width:62px;height:62px;margin:auto;border-radius:50%;background:linear-gradient(#78a848,#406f25);border:4px solid #294718;box-shadow:inset 0 0 0 3px #9ec86b,0 6px 0 rgba(49,25,5,.35);color:#ffb52d;font-size:45px;line-height:1; }
.upgrade-arrow small { display:block;margin-top:4px;padding:3px 5px;border-radius:8px;background:#673515;font-size:12px; }
.apiary-controls { margin:-34px 4px 0; padding:9px; z-index:10; }
.jar-counter { text-align:center; color:#ffe3a1; font-size:20px; font-weight:900; text-shadow:0 2px 0 #3a1a08; margin-bottom:8px; }
.apiary-rate-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px; }
.apiary-rate-grid div { min-width:0;padding:7px 5px;border-radius:12px;background:linear-gradient(#fff1cf,#ffd99d);border:2px solid #6a3512;text-align:center;font-weight:900; }
.apiary-rate-grid span { display:block;color:#7b4b23;font-size:10px;line-height:1.05; }
.apiary-rate-grid strong { display:block;color:#188a2d;font-size:12px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.apiary-controls .button { width:100%; }
.apiary-controls .button + .button { margin-top:7px; }
.conversion-note { margin-top:7px;text-align:center;color:#ffe5b1;font-size:11px;font-weight:700; }
.apiary-tutorial { position:absolute; left:16px; right:16px; bottom:calc(var(--nav-height) + 14px); z-index:20; }

/* Amigos */
.section-title { padding:12px 10px; text-align:center; margin-bottom:10px; }
.section-title h1 { margin:0 0 7px;color:white;text-shadow:0 3px 0 #4a210c;font-size:25px; }
.yield-chip { margin:auto; width:max-content; max-width:100%; padding:6px 14px; border-radius:15px; background:#6b3515; color:#ffc942; font-weight:900; }
.yield-chip small { color:#ffe6b2; font-size:10px; }
.invite-progress { display:grid;gap:5px;margin-top:9px;color:#fff3c9;font-size:12px;font-weight:900;text-shadow:0 2px 0 rgba(56,24,5,.45); }
.friends-card,.commission-card,.shop-card,.menu-card { padding:12px; margin-bottom:12px; }
.segmented-control { display:grid;grid-template-columns:1fr 1fr;background:#4b240e;border:3px solid #3a1a08;border-radius:18px;overflow:hidden;margin-bottom:14px; }
.segment { border:0;background:transparent;color:white;padding:10px;font-weight:900;font-size:19px; }
.segment.active { background:linear-gradient(#ffc449,#e89512);color:#54260c; }
.friend-tab-content { display:none; }
.friend-tab-content.active { display:block; }
.friend-tab-content h2,.commission-card h2 { color:#fff0ca;text-align:center;text-shadow:0 2px 0 #3a1b09;margin:4px 0 11px; }
.referral-link-box { display:grid;grid-template-columns:1fr 52px;gap:8px;align-items:center;padding:10px;border-radius:17px;background:linear-gradient(#fff1d2,#ffd99c);border:2px solid #6c3612; }
.referral-link-box code { color:#4e290f;font-weight:900;font-size:12px;overflow-wrap:anywhere; }
.round-copy-button { width:47px;height:47px;border-radius:50%;border:3px solid #175d9e;background:linear-gradient(#6ac7ff,#2380cf);color:white;font-size:25px;font-weight:900;box-shadow:inset 0 0 0 2px #b9e6ff,0 4px 0 rgba(50,25,5,.3); }
.friend-tab-content .button { width:70%;display:block;margin:12px auto 4px; }
.invited-by { text-align:center;color:#fff1c4;font-weight:700;font-size:12px; }
.bonus-summary { background:linear-gradient(#fff1ce,#ffd998);border:2px solid #61300f;border-radius:16px;padding:15px;display:flex;justify-content:space-between;align-items:center; }
.bonus-summary strong { color:#138f2b;font-size:20px; }
.muted-copy { color:#ffe8bd;font-size:12px;text-align:center;line-height:1.35; }
.commission-list { display:grid;gap:7px; }
.commission-row { display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:8px;background:linear-gradient(#fff0ca,#ffd69a);border:2px solid #6c3512;border-radius:14px;padding:7px 12px;font-weight:900; }
.commission-badge { width:34px;height:34px;display:grid;place-items:center;background:linear-gradient(#ffd850,#ee9411);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);color:#5b2a08; }
.commission-rate { color:#158b2b;font-size:19px; }

/* Loja */
.shop-card h1,.menu-card h1 { text-align:center;color:white;text-shadow:0 3px 0 #4b210b;margin:4px 0 14px;font-size:28px; }
.shop-pay-box { position:relative;background:linear-gradient(#6a3516,#4b240e);border:2px solid #8d5225;border-radius:20px;padding:13px 84px 13px 18px;color:#ffe7b1; }
.shop-pay-box span { display:block;font-weight:800; }
.shop-pay-box strong { display:block;font-size:32px;color:white;margin-top:3px; }
.cash-stack-art { position:absolute;right:22px;top:50%;transform:translateY(-50%) rotate(-4deg); }
.plan-list { display:grid;gap:9px;margin:12px 0; }
.plan-card {
  width:100%;
  display:grid;
  gap:4px;
  padding:11px 13px;
  border-radius:16px;
  border:3px solid #6a3512;
  background:linear-gradient(#fff4d3,#ffd99b);
  color:#4d260d;
  text-align:left;
  box-shadow:0 4px 0 rgba(66,28,7,.28);
}
.plan-card strong { font-size:25px;color:#16872e;line-height:1; }
.plan-card span { font-size:17px;font-weight:900; }
.plan-card small { color:#8a5a2f;font-weight:800;line-height:1.2; }
.plan-card.selected {
  border-color:#1f8f33;
  background:linear-gradient(#e9ffce,#bff289);
  box-shadow:0 0 0 3px rgba(255,235,78,.85), 0 4px 0 rgba(29,89,25,.34);
}
.slider-row { display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-top:14px; }
.slider-step { width:44px;height:44px;border-radius:15px;border:3px solid #6a3512;background:linear-gradient(#c17637,#87451f);color:#fff2bf;font-size:28px;font-weight:900;box-shadow:0 4px 0 #4c230c; }
#shopSlider { width:100%;accent-color:#ffc12d; }
.slider-limits { display:flex;justify-content:space-between;color:#ffe7bb;font-weight:900;padding:3px 51px 10px; }
.receive-box { background:linear-gradient(#fff2d1,#ffdda4);border:2px solid #60300f;border-radius:18px;padding:12px; }
.receive-box span { display:block;color:#187b2b;font-weight:900;font-size:18px; }
.receive-box strong { display:block;color:#2a991e;font-size:39px;line-height:1.05;margin-top:3px; }
.shop-line { display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding:10px 12px;border-radius:15px;background:linear-gradient(#fff0c8,#ffd89b);border:2px solid #66320f;font-weight:900; }
.first-bonus-line strong { color:#218b2a; }
.total-line { background:#54280f;color:white;font-size:20px; }
.total-line strong { font-size:25px; }
.demo-payment-note { color:#ffe0a7;text-align:center;font-size:11px;margin:10px 0; }
.shop-card > .button { width:100%; }

/* Menu */
.menu-card { margin-top:20px; }
.menu-mascot { position:absolute;width:100px;height:80px;top:-48px;left:4px;filter:drop-shadow(0 5px 3px rgba(0,0,0,.25)); }
.menu-row { width:100%;min-height:72px;display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:9px 12px;margin-bottom:10px;border-radius:18px;border:2px solid #693411;background:linear-gradient(#fff1d0,#ffd99f);text-align:left;color:#4c260d;box-shadow:0 4px 0 rgba(60,25,5,.28); }
.menu-row-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:24px;color:white;border:2px solid rgba(70,30,5,.35); }
.green-icon{background:#45bd4a}.blue-icon{background:#38a9e8}.purple-icon{background:#9858d6}.amber-icon{background:#eea81e}
.menu-row-copy { display:flex;flex-direction:column;min-width:0; }
.menu-row-copy strong { font-size:19px; }
.menu-row-copy small { color:#8b5d36;font-weight:700;white-space:normal; }
.menu-row-arrow { font-size:40px;color:#2d9e35; }
.toggle { width:68px;height:36px;position:relative;display:inline-block; }
.toggle input { opacity:0;width:0;height:0; }
.toggle span { position:absolute;inset:0;border-radius:999px;background:#9b8f7a;border:2px solid #5f3517;transition:.2s;box-shadow:inset 0 3px 5px rgba(0,0,0,.25); }
.toggle span::before { content:"";position:absolute;width:27px;height:27px;left:3px;top:2px;border-radius:50%;background:#fff6d8;box-shadow:0 2px 3px rgba(0,0,0,.35);transition:.2s; }
.toggle input:checked + span { background:#36be43; }
.toggle input:checked + span::before { transform:translateX(31px); }
.menu-card > .button { width:75%;display:block;margin:14px auto 0; }
.version-label { text-align:center;color:#ffe5b2;font-size:11px;margin-top:10px; }

/* Roleta */
.wheel-card { padding:13px;margin-bottom:12px;text-align:center; }
.wheel-card h1 { color:white;text-shadow:0 3px 0 #4a210c;margin:4px 0 10px;font-size:25px; }
.wheel-balance,.wheel-spins { margin:8px 0;padding:10px;border-radius:15px;background:linear-gradient(#fff0ca,#ffd89b);border:2px solid #66320f;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:10px; }
.wheel-balance strong,.wheel-spins strong { color:#16872e;font-size:22px; }
.wheel-stage { position:relative;width:250px;height:250px;margin:10px auto 12px;display:grid;place-items:center; }
.wheel-pointer { position:absolute;top:-2px;left:50%;width:0;height:0;transform:translateX(-50%);border-left:14px solid transparent;border-right:14px solid transparent;border-top:30px solid #f54637;filter:drop-shadow(0 3px 0 rgba(62,24,5,.35));z-index:2; }
.money-wheel { position:relative;width:220px;height:220px;border-radius:50%;border:8px solid #5a2a0d;background:conic-gradient(#ffe66b 0 45deg,#40bd48 45deg 90deg,#ffd18a 90deg 135deg,#2fa6e9 135deg 180deg,#ffe66b 180deg 225deg,#40bd48 225deg 270deg,#ffd18a 270deg 315deg,#2fa6e9 315deg 360deg);box-shadow:inset 0 0 0 7px rgba(255,255,255,.38),0 9px 0 rgba(58,24,5,.34);transition:transform 1.85s cubic-bezier(.14,.72,.11,1); }
.money-wheel::after { content:"";position:absolute;inset:72px;border-radius:50%;background:url("assets/icondinheiro.png") center / 62px auto no-repeat,linear-gradient(#fff4d4,#ffc55b);border:5px solid #6d3511;box-shadow:0 3px 0 rgba(66,28,7,.32); }
.money-wheel.spinning { transform:rotate(var(--wheel-turn)); }
.money-wheel span { position:absolute;left:50%;top:50%;width:72px;margin-left:-36px;margin-top:-10px;color:#4c250d;font-size:11px;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.6);transform-origin:36px 10px; }
.money-wheel span:nth-child(1){transform:rotate(22.5deg) translateY(-83px)}
.money-wheel span:nth-child(2){transform:rotate(67.5deg) translateY(-83px)}
.money-wheel span:nth-child(3){transform:rotate(112.5deg) translateY(-83px)}
.money-wheel span:nth-child(4){transform:rotate(157.5deg) translateY(-83px)}
.money-wheel span:nth-child(5){transform:rotate(202.5deg) translateY(-83px)}
.money-wheel span:nth-child(6){transform:rotate(247.5deg) translateY(-83px)}
.money-wheel span:nth-child(7){transform:rotate(292.5deg) translateY(-83px)}
.money-wheel span:nth-child(8){transform:rotate(337.5deg) translateY(-83px)}
.wheel-card .button { width:100%;margin-top:8px; }

/* Modais */
.modal-backdrop { position:absolute;inset:0;z-index:100;background:rgba(18,32,12,.72);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px;animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } }
.welcome-modal,.upgrade-modal,.order-modal,.withdrawal-modal,.confirm-modal { width:min(100%,430px);padding:22px 18px;text-align:center;animation:popIn .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes popIn { from { transform:scale(.8) translateY(20px);opacity:0; } }
.welcome-modal { padding-top:36px; }
.welcome-modal h1 { margin:0;color:#fff4d5;text-shadow:0 4px 0 #4b210a;font-size:31px;line-height:1.06; }
.welcome-modal h1 span { color:#ffc22d;font-size:44px; }
.welcome-bee { position:absolute;width:110px;height:90px;right:7px;top:-54px;filter:drop-shadow(0 6px 3px rgba(0,0,0,.3)); }
.reward-box { margin:18px 0 12px;display:grid;grid-template-columns:95px 1fr;align-items:center;background:radial-gradient(circle,#fff786,#ffbd1d 68%,#df7c08);border:3px solid #7b3e0d;border-radius:20px;padding:15px;box-shadow:inset 0 0 24px rgba(255,255,255,.5); }
.reward-money-icon { font-size:68px; }
.reward-box small { display:block;font-weight:900;font-size:19px; }
.reward-box strong { display:block;color:#128729;font-size:40px;text-shadow:0 2px 0 white; }
.welcome-modal p,.order-modal p,.withdrawal-modal p,.confirm-modal p { background:linear-gradient(#fff1d0,#ffdda2);border:2px solid #63310f;border-radius:15px;padding:12px;font-weight:800;line-height:1.3; }
.honey-corner { position:absolute;background:#ffb017;box-shadow:inset 0 -4px 0 #da7907; }
.honey-corner.top-left { left:18px;top:-1px;width:70px;height:18px;border-radius:0 0 15px 15px; }
.honey-corner.top-right { right:18px;top:-1px;width:70px;height:18px;border-radius:0 0 15px 15px; }
.honey-corner.bottom-right { right:18px;bottom:-1px;width:58px;height:17px;border-radius:14px 14px 0 0; }
.upgrade-modal h1,.order-modal h1,.withdrawal-modal h1,.confirm-modal h1 { color:white;text-shadow:0 3px 0 #4a210a;margin:0 0 15px;font-size:26px; }
.upgrade-block { border-radius:16px;padding:9px;margin-bottom:9px;border:2px solid #48220d;color:#ffe7ba;background:#56270f; }
.upgrade-block.next { background:linear-gradient(#277b2d,#174b1c); }
.upgrade-block span { display:block;font-weight:800; }
.upgrade-block strong { display:block;font-size:32px;margin-top:3px; }
.upgrade-cost { display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#fff0cc,#ffd99c);border:2px solid #5d2d0e;border-radius:16px;padding:10px 14px;font-size:20px;font-weight:900; }
.upgrade-cost strong { background:#51270e;color:white;padding:6px 10px;border-radius:12px; }
.upgrade-level { display:inline-block;margin:11px auto;padding:5px 14px;border:2px solid #5f2e0e;border-radius:10px;background:#e8af5f;font-weight:900; }
.modal-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px; }
.order-ticket { display:grid;gap:6px;background:#4e250e;border:2px solid #8d5526;border-radius:16px;padding:12px;text-align:left;color:#ffe7b5; }
.order-ticket div { display:flex;justify-content:space-between;gap:10px; }
.order-ticket strong { color:white; }
.order-ticket .pending { color:#ffd23c; }
.payer-form { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0;text-align:left; }
.payer-form label { display:grid;gap:4px;color:#ffe8bd;font-size:11px;font-weight:900;text-transform:uppercase; }
.payer-form input {
  width:100%;
  min-height:42px;
  border:2px solid #653112;
  border-radius:12px;
  padding:8px 10px;
  background:#fff4d5;
  color:#4d260d;
  font-weight:800;
}
.payer-form label:first-child,.payer-form label:nth-child(3) { grid-column:1 / -1; }
.pix-box {
  display:grid;
  gap:8px;
  margin:11px 0;
  padding:10px;
  border-radius:15px;
  background:#fff0ca;
  border:2px solid #66320f;
  text-align:left;
}
.pix-box strong { color:#4d260d; }
.pix-box textarea {
  width:100%;
  min-height:86px;
  resize:none;
  border:2px solid #6d3715;
  border-radius:12px;
  padding:8px;
  color:#3b1b0a;
  background:white;
  font-size:11px;
  font-weight:800;
}
.pix-qr { width:150px;height:150px;object-fit:contain;margin:auto;border-radius:10px;background:white;padding:6px; }

.toast-container { position:absolute;z-index:300;left:50%;bottom:calc(var(--nav-height) + 16px);transform:translateX(-50%);width:min(92%,420px);display:grid;gap:8px;pointer-events:none; }
.toast { padding:11px 14px;border-radius:14px;background:rgba(55,25,8,.95);border:2px solid #d69042;color:white;font-weight:800;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.3);animation:toastIn .25s ease,toastOut .3s ease 2.7s forwards; }
.toast.success { background:rgba(17,113,39,.95); }
.toast.error { background:rgba(158,42,34,.95); }
@keyframes toastIn { from { opacity:0;transform:translateY(10px); } }
@keyframes toastOut { to { opacity:0;transform:translateY(10px); } }

.confetti-layer { position:absolute;inset:0;z-index:250;pointer-events:none;overflow:hidden; }
.confetti { position:absolute;top:-20px;width:10px;height:18px;border-radius:3px;animation:confettiFall 1.8s linear forwards; }
@keyframes confettiFall { to { transform:translate(var(--drift),110vh) rotate(720deg);opacity:.2; } }

@media (max-height: 760px) {
  :root { --hud-height: 104px; --nav-height: 74px; }
  .hud { padding-top:5px; transform:scale(.86); transform-origin:top left; width:116%; }
  .stats-panel { padding:7px; }
  .stat-label,.progress-shell,.production-rate { height:36px; }
  .board-wrap { padding:7px; }
  .purchase-panel { grid-template-columns:88px 1fr; }
  .bee-offer-card { min-height:76px; }
  .nav-icon { font-size:22px;height:25px; }
  .apiary-stage { min-height:500px; }
  .jar-scene { height:365px; }
}

@media (min-width: 700px) and (min-height: 900px) {
  .app-shell { border-radius: 28px; }
}