/* Hive Rush (protótipo): mesma direção de arte da UI da Capivara Comilona ("LAGOA"):
   tudo é um adesivo de bala — borda branca, anel e sombra dura na cor do contorno,
   preenchimento bicolor cortado no meio, faixa de brilho nos botões, letra branca
   contornada. Nada de sombra borrada. Tamanhos em px "de design" (1280×720 e 375 de
   largura): #ui tem zoom:var(--k), calculado no <head> conforme o modo (desk/port/land). */
/* Letras que o Lilita One e o Fredoka não têm (ą ę ś ż ń ğ ş İ… do polonês e do turco):
   vêm de uma fonte grossa do sistema, e não da fina padrão, pra não destoar no meio da palavra. */
@font-face{font-family:"HR Heavy";src:local("Arial Black"),local("ArialBlack"),local("Arial-Black"),local("Segoe UI Black"),local("SegoeUI-Black"),local("Roboto Black"),local("Roboto-Black");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"HR Semi";src:local("Segoe UI Semibold"),local("SegoeUI-Semibold"),local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Medium"),local("Roboto-Medium");unicode-range:U+0100-024F,U+1E00-1EFF}
:root{
  --ink:#3A1E0E;--navy:#1D5B99;--navy2:#18528C;--navyD:#143F6E;--blue:#2F93E0;--blue2:#2585CF;
  --gold:#FFD23F;--gold2:#FFC21F;--grn:#5ED04A;--grn2:#4CC23A;--grnD:#2C9A28;
  --red:#FF5A4E;--red2:#F0473B;--redD:#C2362C;--car:#E8955A;--carD:#DE8A4E;
  --grey:#C9D3DE;--grey2:#B9C4D1;--gi:var(--ink);
  --honey:#FFB21E;--honey2:#F29A12;
  --display:"Lilita One","HR Heavy","Fredoka",system-ui,sans-serif;--body:"Fredoka","HR Semi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --spring:cubic-bezier(.3,1.55,.5,1);--out:cubic-bezier(.5,0,.8,.4)
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#4f9443;font-family:var(--body);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;color:var(--ink)}
canvas{display:block}
button{font:inherit;color:inherit;padding:0;margin:0;border:0;background:none;cursor:pointer;appearance:none;-webkit-appearance:none;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}
img:not([src]){visibility:hidden}
.gl{display:block;width:100%;height:100%;overflow:visible}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- peças básicas (iguais às da capivara) ---------- */
.stk{border:3px solid #fff;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink)}
.txt{font-family:var(--display);font-weight:400;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.btn{position:relative;isolation:isolate;overflow:hidden;font-family:var(--display);border:3px solid #fff;border-radius:16px;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink);transition:transform .08s,box-shadow .08s}
.btn::after{content:"";position:absolute;left:8%;right:8%;top:4px;height:36%;border-radius:10px;background:rgba(255,255,255,.38);pointer-events:none}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--ink),0 2px 0 3px var(--ink)}
.btn > *{position:relative;z-index:1}
.rbtn{width:58px;height:58px;border-radius:50%;padding:7px;background:linear-gradient(var(--blue) 0 50%,var(--blue2) 50%);--gf:#fff;--gh:var(--blue)}
.b-go{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%);color:#fff}
.b-go .txt{-webkit-text-stroke:6px var(--ink)}
.b-go.off{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
.b-sec{background:linear-gradient(#F1F5FA 0 50%,#DCE4EE 50%)}
.b-red{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
.b-link{font:28px var(--display)}
.b-link.danger{font:600 16px var(--body);color:var(--redD);-webkit-text-stroke:0;text-decoration:underline;text-underline-offset:3px}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes buyPulse{50%{transform:scale(1.06) rotate(-1.5deg)}}
@keyframes no{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
.no{animation:no .35s}

/* ---------- camadas ---------- */
#view{position:fixed;inset:0;width:100%;height:100%}
#world{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
#ui{position:fixed;inset:0;pointer-events:none;z-index:2;zoom:var(--k)}
#sparks{position:fixed;inset:0;pointer-events:none;z-index:6}
/* Desktop muito largo (ou janela baixa): o jogo para em 2:1 e sobra moldura dos lados (regra do
   Playgama). O transform faz da #stage o bloco das camadas fixas (inset:0 = o palco). No celular
   deitado continua tela cheia. */
@media (min-aspect-ratio: 2/1) and (hover: hover) and (pointer: fine) {
  html,body{background:#24120A}
  #stage{position:fixed;top:0;bottom:0;left:calc(50% - 100vh);width:200vh;transform:translateZ(0);overflow:hidden}
}
#hud,#goals,#cargo,#swarmChip{z-index:1}#dragHint{z-index:2}#toasts{z-index:3}#starfx{z-index:4}#confetti{z-index:5}.screen{z-index:10}
#ui.playing #hud,#ui.playing #goals,#ui.playing #cargo,#ui.playing #swarmChip{opacity:1;transition:opacity .3s}
#hud,#goals,#cargo,#swarmChip{opacity:0}

/* ---------- HUD (desktop) ---------- */
#hud{position:absolute;left:calc(20px + var(--sl));right:calc(20px + var(--sr));top:calc(18px + var(--st));height:64px}
.pill{position:absolute;height:50px;min-width:118px;padding:0 20px 0 46px;display:flex;align-items:center;font-size:32px;border-radius:26px;background:linear-gradient(var(--blue) 0 50%,var(--blue2) 50%);color:#fff}
.pill .cico{position:absolute;left:-30px;top:-14px;width:76px;height:76px;transform:rotate(-14deg);filter:drop-shadow(0 4px 0 var(--ink))}
.pill.bump{animation:bump .2s ease-out}
.pill.bump .cico{animation:icoWag .3s var(--spring)}
@keyframes bump{40%{transform:scale(1.07)}}
@keyframes icoWag{50%{transform:rotate(-26deg) scale(1.12)}}
#hud .honey{left:24px;top:6px;background:linear-gradient(var(--honey) 0 50%,var(--honey2) 50%)}
.plus{position:absolute;left:100%;top:50%;margin-left:12px;font-size:28px;font-style:normal;white-space:nowrap;opacity:0;pointer-events:none}
.plus.on{animation:plus 1.2s ease-out}
.plus.minus{color:#FFB0A8}
@keyframes plus{0%{opacity:0;transform:translateY(-30%) scale(.5)}14%{opacity:1;transform:translateY(-50%) scale(1.15)}70%{opacity:1;transform:translateY(-60%) scale(1)}100%{opacity:0;transform:translateY(-110%)}}
/* dia: disco com o número + trilho do sol até a lua */
#hud .daybar{position:absolute;left:50%;top:10px;width:470px;margin-left:-235px;display:flex;align-items:center}
#hud .dno{position:relative;z-index:2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%)}
#hud .track{position:relative;flex:1;height:30px;margin-left:-14px;border-radius:16px;background:var(--navyD);overflow:visible}
#hud .track .night{position:absolute;top:3px;bottom:3px;right:3px;width:calc(var(--n,23%) - 3px);border-radius:0 12px 12px 0;background:repeating-linear-gradient(-45deg,#2B4F86 0 8px,#24467A 8px 16px)}
#hud .track > i{position:absolute;left:14px;top:3px;bottom:3px;width:calc((100% - 17px) * var(--t,0));border-radius:12px;background:linear-gradient(#FFE27A 0 45%,var(--gold2) 45%)}
#hud .track.dark > i{background:linear-gradient(#9FB8F0 0 45%,#7C98E0 45%)}
#hud .sunmoon{position:absolute;top:50%;width:44px;height:44px;transform:translate(-50%,-55%);left:calc(30px + (100% - 44px) * var(--t,0));filter:drop-shadow(0 3px 0 var(--ink))}
#hud .sunmoon img{width:100%;height:100%}
#hud .hbtns{position:absolute;right:0;top:0;display:flex;gap:12px}
/* metas */
#goals{position:absolute;left:calc(26px + var(--sl));top:calc(96px + var(--st));display:flex;flex-direction:column;gap:12px}
.goal{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 50px;border-radius:24px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);color:#fff;white-space:nowrap}
.goal .gico{position:absolute;left:-8px;top:-8px;width:56px;height:56px;filter:drop-shadow(0 3px 0 var(--ink))}
.goal .gico img,.goal .gico svg{width:100%;height:100%}
.goal .gt{display:none;font:600 15px var(--body);color:#CFE6FF}
.goal b{font-size:22px}
.goal .gbar{width:64px;height:12px;border-radius:7px;background:var(--navyD);box-shadow:0 0 0 2px var(--ink);overflow:hidden}
.goal .gbar i{display:block;height:100%;width:0;background:linear-gradient(#9AF07A 0 45%,var(--grn) 45%);transition:width .3s}
.goal .gchk{display:none;position:absolute;right:-12px;top:-12px;width:34px;height:34px;border-radius:50%;padding:4px;background:var(--grn);box-shadow:0 0 0 3px var(--ink)}
.goal.done{background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
.goal.done .gt{color:#EFFFE6}
.goal.done .gbar{display:none}
.goal.done .gchk{display:block;animation:pop .5s var(--spring)}
.goal.flash{animation:bought .6s var(--spring)}
/* carga de pólen: anel cônico em volta do ícone */
#cargo{position:absolute;left:calc(26px + var(--sl));bottom:calc(26px + var(--sb));width:124px;height:150px}
#cargo .ring{position:absolute;left:0;top:0;width:124px;height:124px;border-radius:50%;background:conic-gradient(var(--rc,var(--gold)) 0 var(--p,0%),var(--navyD) var(--p,0%) 100%);box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink)}
#cargo .ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#FFF4CF 0 55%,#FFE19A 56%);border:3px solid var(--ink)}
#cargo img{position:absolute;left:14px;top:12px;width:96px;height:96px;filter:drop-shadow(0 3px 0 rgba(58,30,14,.35))}
#cargo .cnum{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:36px;padding:0 12px;border-radius:18px;display:flex;align-items:baseline;gap:2px;font-size:24px;line-height:30px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);color:#fff;white-space:nowrap}
#cargo .cnum small{font-size:16px;opacity:.8}
#cargo.full .ring{--rc:var(--red);animation:pulse .6s ease-in-out infinite alternate}
#cargo.full .cnum{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
@keyframes pulse{to{transform:scale(1.05)}}
/* enxame: abelhas + barrinha da próxima */
#swarmChip{position:absolute;left:calc(176px + var(--sl));bottom:calc(32px + var(--sb));height:50px;padding:0 18px 0 50px;display:flex;align-items:center;gap:10px;font-size:30px;border-radius:26px;background:linear-gradient(var(--blue) 0 50%,var(--blue2) 50%);color:#fff}
#swarmChip .cico{position:absolute;left:-26px;top:-16px;width:76px;height:76px;filter:drop-shadow(0 4px 0 var(--ink))}
.cico img,.gico img,.ri img,.t-ico img,.sunmoon img{display:block;width:100%;height:100%;object-fit:contain}
#swarmChip .nb{width:70px;height:14px;border-radius:8px;background:var(--navyD);box-shadow:0 0 0 2px var(--ink);overflow:hidden}
#swarmChip .nb i{display:block;height:100%;width:0;background:linear-gradient(#9AF07A 0 45%,var(--grn) 45%);transition:width .25s}
#swarmChip.bump{animation:bump .25s ease-out}

/* ---------- toasts ---------- */
#toasts{position:absolute;left:0;right:0;top:calc(98px + var(--st));display:flex;justify-content:center}
.toast{position:absolute;display:flex;align-items:center;gap:8px;height:64px;padding:0 24px 0 10px;border-radius:34px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);white-space:nowrap;animation:toastIn .5s var(--spring)}
.toast.out{animation:toastOut .26s var(--out) forwards}
.toast .t-ico{width:62px;height:62px;margin:-8px 0;flex:none;filter:drop-shadow(0 3px 0 rgba(20,63,110,.6))}
.toast .t-ico img{width:100%;height:100%}
.toast .t-txt{display:flex;flex-direction:column;line-height:1.05;padding-left:4px}
.toast b{font-size:26px}
.toast small{font:600 15px var(--body);color:#CFE6FF}
.toast.bad{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
.toast.bad small{color:#FFE2DE}
.toast.night{background:linear-gradient(#3B4C8C 0 50%,#33437E 50%)}
.toast.good{background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
@keyframes toastIn{0%{transform:translateY(-30px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-20px) scale(.85);opacity:0}}

/* ---------- meta cumprida (estrela) ---------- */
#starfx{position:absolute;left:50%;top:40%;width:360px;height:360px;margin:-180px 0 0 -180px;display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;pointer-events:none}
#starfx.on{visibility:visible;animation:fxLife 2.2s linear forwards}
@keyframes fxLife{0%{opacity:0}6%{opacity:1}84%{opacity:1}100%{opacity:0}}
#starfx .burst{position:absolute;inset:-50px;border-radius:50%;background:repeating-conic-gradient(rgba(255,231,120,.6) 0 10deg,rgba(255,231,120,0) 10deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%)}
#starfx.on .burst{animation:spin 6s linear infinite,burstIn .6s var(--spring)}
@keyframes burstIn{from{scale:.2}}
#starfx .bigstar{position:relative;width:160px;height:160px;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 0 var(--ink));transform:rotate(-8deg)}
#starfx.on .bigstar{animation:starIn .7s var(--spring)}
@keyframes starIn{0%{transform:scale(.1) rotate(-200deg)}100%{transform:rotate(-8deg)}}
#starfx .st-title{position:relative;margin-top:-4px;font-size:48px;line-height:1;-webkit-text-stroke:8px var(--ink);text-shadow:0 5px 0 var(--ink);white-space:nowrap}
#starfx.on .st-title{animation:pop .55s .15s var(--spring) backwards}
#starfx .st-sub{position:relative;margin-top:10px;padding:6px 16px;border-radius:20px;background:var(--navy);font-size:22px;white-space:nowrap}
#starfx.on .st-sub{animation:pop .5s .3s var(--spring) backwards}
#confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#confetti i{position:absolute;top:-50px;width:30px;height:30px;scale:var(--s);filter:drop-shadow(0 3px 0 var(--ink));animation:fall var(--d) var(--w) cubic-bezier(.3,.1,.6,1) backwards}
@keyframes fall{0%{top:-50px;transform:translateX(0) rotate(0)}100%{top:105%;transform:translateX(var(--x)) rotate(var(--r))}}
.spark{position:absolute;width:calc(28px * var(--k));height:calc(28px * var(--k));margin:calc(-14px * var(--k)) 0 0 calc(-14px * var(--k));filter:drop-shadow(0 2px 0 var(--ink));animation:spark .7s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(calc(var(--dx) * var(--k)),calc(var(--dy) * var(--k))) rotate(var(--r)) scale(var(--s));opacity:0}}

/* ---------- dica de arrastar ---------- */
#dragHint{position:absolute;left:50%;bottom:calc(150px + var(--sb));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .3s;pointer-events:none}
#dragHint.on{opacity:1}
#dragHint .dh-hand{width:78px;height:78px;filter:drop-shadow(0 4px 0 rgba(58,30,14,.5));animation:dragMove 2s ease-in-out infinite}
@keyframes dragMove{0%{transform:translate(-56px,10px) rotate(-14deg)}12%{transform:translate(-56px,14px) rotate(-14deg) scale(.9)}50%{transform:translate(56px,-6px) rotate(10deg) scale(.9)}62%{transform:translate(56px,-10px) rotate(10deg) scale(1)}100%{transform:translate(-56px,10px) rotate(-14deg)}}
#dragHint b{font-size:30px;white-space:nowrap}

/* ---------- camada do mundo (sem zoom): pops, seta, joystick ---------- */
.wpop{position:absolute;transform:translate(-50%,-50%);font:calc(26px * var(--k)) var(--display);color:#fff;-webkit-text-stroke:calc(5px * var(--k)) var(--ink);paint-order:stroke fill;white-space:nowrap;animation:wpop 1s ease-out forwards}
.wpop.minus{color:#FFB0A8}.wpop.bee{color:#C8F59A;font-size:calc(30px * var(--k))}.wpop.small{font-size:calc(20px * var(--k))}
@keyframes wpop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
#homeArrow{position:absolute;width:calc(64px * var(--k));height:calc(64px * var(--k));margin:calc(-32px * var(--k)) 0 0 calc(-32px * var(--k));display:none}
#homeArrow .tip{position:absolute;inset:0;border-radius:50%;background:linear-gradient(var(--honey) 0 50%,var(--honey2) 50%);border:3px solid #fff;box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink);display:grid;place-items:center}
#homeArrow .tip img{width:80%;height:80%}
#homeArrow .dir{position:absolute;left:50%;top:50%;width:calc(30px * var(--k));height:calc(30px * var(--k));margin:calc(-15px * var(--k));transform:rotate(var(--a)) translateY(calc(-46px * var(--k)));--gf:#fff}
#homeArrow.night .tip{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
#homeArrow.on{display:block;animation:nudge .7s ease-in-out infinite alternate}
@keyframes nudge{to{scale:1.08}}
#joy{position:absolute;width:calc(116px * var(--k));height:calc(116px * var(--k));margin:calc(-58px * var(--k)) 0 0 calc(-58px * var(--k));border-radius:50%;border:calc(3px * var(--k)) solid rgba(255,255,255,.8);background:rgba(20,63,110,.22);box-shadow:0 0 0 calc(3px * var(--k)) rgba(58,30,14,.35);display:none}
#joy i{position:absolute;left:50%;top:50%;width:calc(50px * var(--k));height:calc(50px * var(--k));margin:calc(-25px * var(--k)) 0 0 calc(-25px * var(--k));border-radius:50%;background:linear-gradient(#fff 0 50%,#E4ECF5 50%);border:calc(3px * var(--k)) solid #fff;box-shadow:0 0 0 calc(3px * var(--k)) var(--ink),0 calc(4px * var(--k)) 0 calc(3px * var(--k)) var(--ink)}
#joy.on{display:block}

/* ---------- telas ---------- */
.screen{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}
.screen.on{pointer-events:auto;opacity:1;visibility:visible;transition:opacity .2s}
.screen .box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--mk,1))}
.screen.on .box{animation:boxIn .5s var(--spring)}
@keyframes boxIn{from{transform:translate(-50%,-50%) scale(calc(var(--mk,1) * .7));opacity:0}}
.rays{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#6CC6FF 0 22%,#2F8FDF 58%,#1D5B99 100%)}
.rays::before{content:"";position:absolute;left:50%;top:42%;width:2400px;height:2400px;margin:-1200px 0 0 -1200px;background:repeating-conic-gradient(rgba(255,255,255,.1) 0 9deg,rgba(255,255,255,0) 9deg 20deg);animation:spin 90s linear infinite}
.rays.honey{background:radial-gradient(circle at 50% 42%,#FFE07A 0 20%,#F5A623 58%,#B8620E 100%)}
.ribbon{position:relative;white-space:nowrap;margin-bottom:6px;align-self:center}
.ribbon span{position:relative;z-index:1;display:block;background:linear-gradient(var(--red) 0 50%,var(--red2) 50%);font-size:46px;padding:6px 40px 12px;border:3px solid #fff;border-radius:12px;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px var(--ink);-webkit-text-stroke:7px var(--ink)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:26px;width:56px;height:56px;background:var(--redD);border:3px solid var(--ink)}
.ribbon::before{left:-36px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,30% 50%)}
.ribbon::after{right:-36px;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.panel{background:#fff;border-radius:26px;border:3px solid #fff;box-shadow:0 0 0 3px var(--ink),0 8px 0 3px var(--ink);color:var(--ink)}
.p-head{position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:6px 28px 10px;border-radius:14px;font-size:34px;white-space:nowrap;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%)}

/* título */
#title .box{width:640px;display:flex;flex-direction:column;align-items:center;gap:8px}
.logo{position:relative;margin:0 0 4px;display:flex;flex-direction:column;align-items:center;font-weight:400;line-height:.86;transform:rotate(-3deg)}
@keyframes dropFloat{to{transform:rotate(4deg) translateY(-8px)}}
.t-tag{margin-top:4px;font-size:26px}
.t-hero{width:360px;height:220px;display:grid;place-items:center;margin:4px 0 8px}
.t-hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 0 rgba(20,63,110,.45));animation:heroBob 2.4s ease-in-out infinite alternate}
@keyframes heroBob{to{transform:translateY(-10px) rotate(-2deg)}}
#playBtn{width:360px;height:84px;font-size:40px;animation:buyPulse 1.4s ease-in-out infinite}
#newGame{margin-top:10px}

/* resultado do dia */
#results .box{width:620px;display:flex;flex-direction:column;align-items:center}
.d-stars{display:flex;align-items:flex-end;margin:4px 0 10px}
.d-stars .gl{width:100px;height:100px;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 0 var(--ink))}
.d-stars .gl:nth-child(1){transform:rotate(-14deg)}.d-stars .gl:nth-child(3){transform:rotate(14deg)}
.d-stars .gl:nth-child(2){width:134px;height:134px;margin:0 -8px 26px}
#results.on .d-stars .gl{animation:starIn .7s var(--spring) backwards}
#results.on .d-stars .gl:nth-child(1){animation-delay:.15s}#results.on .d-stars .gl:nth-child(2){animation-delay:.35s}#results.on .d-stars .gl:nth-child(3){animation-delay:.55s}
.r-list{width:100%;padding:18px 22px 14px;display:flex;flex-direction:column;gap:8px}
.r-row{display:flex;align-items:center;gap:12px;font:600 21px var(--body)}
.r-row .ri{width:44px;height:44px;flex:none}
.r-row .ri img,.r-row .ri svg{width:100%;height:100%}
.r-row span{flex:1}
.r-row b{font:28px var(--display);font-variant-numeric:tabular-nums}
.r-row.bad b{color:var(--redD)}
.r-row.bonus b{color:var(--grnD)}
.r-row .rg{display:flex;gap:2px;width:auto}
.r-row .rg .gl{width:26px;height:26px;--gs:#D7DEE8}
.r-total{margin-top:6px;padding-top:12px;border-top:3px dashed #D7DEE8;display:flex;align-items:center;justify-content:center;gap:10px}
.r-total .gl{width:58px;height:58px;filter:drop-shadow(0 3px 0 var(--ink))}
.r-total b{font-size:54px;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill}
.r-perfect{position:absolute;right:-26px;top:96px;padding:8px 16px;border-radius:14px;font-size:26px;transform:rotate(8deg);background:linear-gradient(var(--gold) 0 50%,var(--gold2) 50%);display:none}
#results.perfect .r-perfect{display:block;animation:pop .5s 1s var(--spring) backwards}
#results .b-go{margin-top:22px;width:340px;height:80px;font-size:38px}

/* loja da colmeia (gestão entre os dias) */
#shop .box{width:880px;display:flex;flex-direction:column;align-items:center}
.shop-h{position:relative;z-index:2;align-self:center;display:flex;align-items:center;gap:10px;padding:6px 26px 10px;border-radius:12px;font-size:36px;transform:rotate(-2deg);background:repeating-linear-gradient(0deg,var(--car) 0 14px,var(--carD) 14px 16px,var(--car) 16px 30px)}
.shop-h::before,.shop-h::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#7A4420;box-shadow:inset 0 2px 0 #C98A5A}
.shop-h::before{left:10px}.shop-h::after{right:10px}
.shop-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin:-8px 0 12px;padding:0 6px}
.shop-top .pill{position:relative;background:linear-gradient(var(--gold) 0 50%,var(--gold2) 50%);padding-left:52px}
.shop-top .pill .cico{left:-26px;top:-13px}
.shop-top .stars{display:flex;align-items:center;gap:6px;font-size:28px}
.shop-top .stars .gl{width:44px;height:44px;filter:drop-shadow(0 3px 0 var(--ink))}
.cards{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.card{position:relative;isolation:isolate;display:grid;grid-template-columns:96px 1fr auto;grid-template-rows:1fr auto 1fr;align-items:center;column-gap:10px;min-height:104px;padding:8px 12px 8px 8px;border-radius:18px;background:linear-gradient(#FFFFFF 0 50%,#F2F7FF 50%);color:var(--ink)}
.c-ico{grid-row:1/4;position:relative;width:92px;height:86px;border-radius:14px;background:var(--tc,#FFE6A6);border:3px solid var(--ink);display:grid;place-items:center}
.c-ico img{width:96px;height:96px;object-fit:contain;margin-top:-10px;filter:drop-shadow(0 3px 0 rgba(58,30,14,.3))}
.card[data-id=wings]{--tc:#CFE8FF}.card[data-id=pouch]{--tc:#FFC896}.card[data-id=nursery]{--tc:#FFC6D0}
.card[data-id=sting]{--tc:#FFE08A}.card[data-id=machines]{--tc:#D8C8FF}.card[data-id=garden]{--tc:#C8F0B0}
.c-name{grid-column:2;grid-row:1;align-self:end;font:24px var(--display);line-height:1}
.pips{grid-column:2;grid-row:2;display:flex;gap:3px;margin:6px 0}
.pips i{width:13px;height:13px;transform:rotate(45deg) scale(.8);border:2px solid var(--ink);border-radius:3px;background:#DCE6F2}
.pips i.on{background:var(--gold)}
.pips i.on.new{animation:pipPop .6s var(--spring)}
@keyframes pipPop{0%{transform:rotate(45deg) scale(.2)}100%{transform:rotate(45deg) scale(.8)}}
.c-fx{grid-column:2;grid-row:3;align-self:start;font:600 14px/1.1 var(--body);color:#5B6B80}
.c-fx b{color:var(--grnD)}
.buy{grid-column:3;grid-row:1/4;width:118px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(var(--gold) 0 50%,var(--gold2) 50%);color:#fff;font-size:24px;line-height:1}
.buy b{-webkit-text-stroke:4.5px var(--ink);paint-order:stroke fill;font-weight:400;display:flex;align-items:center;gap:4px}
.buy b .gl{width:26px;height:26px;flex:none}
.buy small{font:600 12px var(--body);color:var(--ink);opacity:.7}
.buy.off{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
.buy[data-len="5"]{font-size:21px}.buy[data-len="6"]{font-size:18px}
.buy .prog{display:none;position:absolute;left:0;bottom:0;height:7px;width:0;background:var(--grn);border-top:2px solid var(--ink);border-right:2px solid var(--ink);z-index:0}
.buy.off .prog{display:block}
.card.ok .buy{animation:buyPulse 1.2s ease-in-out infinite}
.card.rec{background:linear-gradient(#FFFDF0 0 50%,#FFF4CF 50%)}
.rec-tag{display:none;position:absolute;right:-12px;top:-14px;width:38px;height:38px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 3px var(--ink);place-items:center;font-size:26px;-webkit-text-stroke:4px var(--ink);transform:rotate(10deg);z-index:2}
.card.rec .rec-tag{display:grid}
.maxl{display:none;grid-column:3;grid-row:1/4;width:118px;height:62px;place-items:center;font-size:28px;background:var(--grn);border-radius:16px;border:3px solid #fff;box-shadow:0 0 0 3px var(--ink);transform:rotate(-4deg)}
.card.max{background:linear-gradient(#F2FFE9 0 50%,#E2F7D2 50%)}
.card.max .buy{display:none}.card.max .maxl{display:grid}
.card.bought{animation:bought .6s var(--spring)}
@keyframes bought{0%{transform:scale(1)}25%{transform:scale(1.07) rotate(-1deg)}55%{transform:scale(.97)}100%{transform:scale(1)}}
#shop .b-go{margin-top:26px;width:400px;height:82px;font-size:36px}

/* pausa */
#pause .box{width:440px}
#pause .panel{position:relative;padding:48px 30px 28px;display:flex;flex-direction:column;align-items:center;gap:18px}
#pause .toggles{display:flex;gap:22px}
.tg{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 16px var(--body)}
.tg-ico{width:78px;height:78px;border-radius:50%;padding:12px;background:linear-gradient(var(--blue) 0 50%,var(--blue2) 50%);--gf:#fff}
.tg.off .tg-ico{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
#pause .b-go{width:300px;height:72px;font-size:32px}

/* ---------- celular em pé ---------- */
[data-mode=port] #hud{left:calc(12px + var(--sl));right:calc(12px + var(--sr));top:calc(12px + var(--st));height:112px}
[data-mode=port] #hud .honey{left:28px;top:4px;height:46px;font-size:28px}
[data-mode=port] #hud .daybar{left:0;right:0;top:64px;width:auto;margin-left:0}
[data-mode=port] #hud .rbtn{width:52px;height:52px}
[data-mode=port] #goals{left:calc(12px + var(--sl));right:calc(12px + var(--sr));top:calc(140px + var(--st));flex-direction:row;justify-content:center;gap:8px}
[data-mode=port] .goal{height:40px;padding:0 10px 0 38px;gap:6px}
[data-mode=port] .goal .gico{left:-6px;top:-6px;width:44px;height:44px}
[data-mode=port] .goal .gt{display:none}
[data-mode=port] .goal b{font-size:19px}
[data-mode=port] .goal .gbar{width:34px}
[data-mode=port] #cargo{left:50%;margin-left:-62px;bottom:calc(20px + var(--sb))}
[data-mode=port] #swarmChip{left:calc(30px + var(--sl));bottom:calc(64px + var(--sb));padding:0 12px 0 44px;height:44px;font-size:26px}
[data-mode=port] #swarmChip .nb{width:44px}
[data-mode=port] #toasts{top:calc(196px + var(--st))}
[data-mode=port] .toast b{font-size:22px}
[data-mode=port] #title .box{width:360px}
[data-mode=port] .t-hero{width:300px;height:190px}
[data-mode=port] #playBtn{width:320px}
[data-mode=port] #results .box{width:350px}
[data-mode=port] .ribbon span{font-size:34px;padding:6px 26px 10px}
[data-mode=port] .r-row{font-size:17px}
[data-mode=port] .r-row b{font-size:24px}
[data-mode=port] #results .b-go{width:300px}
[data-mode=port] #shop .box{width:356px;top:auto;bottom:calc(10px + var(--sb));transform:translate(-50%,0) scale(var(--mk,1));transform-origin:50% 100%}
[data-mode=port] .cards{grid-template-columns:1fr;gap:14px}
[data-mode=port] .card{grid-template-columns:76px 1fr auto;min-height:84px}
[data-mode=port] .c-ico{width:72px;height:68px}
[data-mode=port] .c-ico img{width:78px;height:78px}
[data-mode=port] .c-name{font-size:20px}
[data-mode=port] .c-fx{font-size:12px}
[data-mode=port] .buy{width:96px;height:56px}
[data-mode=port] .maxl{width:96px;height:56px}
[data-mode=port] #shop .b-go{width:320px;height:70px;font-size:30px;margin-top:18px}
[data-mode=port] #starfx .st-title{font-size:38px}

/* ---------- celular deitado ---------- */
[data-mode=land] #hud{height:52px;top:calc(8px + var(--st))}
[data-mode=land] #goals{top:calc(70px + var(--st));gap:10px}
[data-mode=land] .goal{height:38px}
[data-mode=land] #toasts{top:calc(70px + var(--st))}
[data-mode=land] #cargo{transform:scale(.85);transform-origin:0 100%}
[data-mode=land] .cards{gap:14px 16px}
#homeArrow .dir .gl{transform:rotate(-90deg)}

/* ---------- ajustes de leitura (toast e dicas quebram linha em tela estreita) ---------- */
.toast{max-width:calc(100% - 24px)}
.toast .t-txt{white-space:normal}
[data-mode=port] .toast{height:auto;min-height:56px;padding:8px 18px 8px 8px}
[data-mode=port] .toast small{font-size:13px}
[data-mode=port] #dragHint{bottom:calc(190px + var(--sb));width:calc(100% - 40px)}
[data-mode=port] #dragHint b{font-size:24px;white-space:normal;text-align:center}
[data-mode=port] .goal .gbar{display:none}
[data-mode=port] .goal{padding:0 12px 0 40px}
[data-mode=port] #cargo{left:auto;right:calc(10px + var(--sr));margin-left:0;bottom:calc(14px + var(--sb));transform:scale(.82);transform-origin:100% 100%}
[data-mode=port] #swarmChip{left:calc(34px + var(--sl));bottom:calc(30px + var(--sb))}
[data-mode=port] .shop-h{font-size:26px;white-space:nowrap}
[data-mode=port] .shop-top{margin:6px 0 12px}

/* ======================= colônias: missão, painel, chips, setas ======================= */
#mission,#panel{z-index:1}
#ui.playing #mission{opacity:1;transition:opacity .3s}
#mission{opacity:0;position:absolute;left:calc(26px + var(--sl));top:calc(92px + var(--st));display:flex;align-items:center;gap:10px;min-width:300px;max-width:430px;height:58px;padding:0 16px 0 62px;border-radius:30px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);color:#fff}
#mission .mico{position:absolute;left:-10px;top:-10px;width:70px;height:70px;filter:drop-shadow(0 3px 0 var(--ink))}
#mission .mico img{width:100%;height:100%;object-fit:contain}
#mission .mtxt{display:flex;flex-direction:column;line-height:1.05;flex:1;min-width:0}
#mission .mtxt small{font:600 13px var(--body);color:#9FD0FF;text-transform:uppercase;letter-spacing:.06em}
#mission .mtxt b{font:600 17px var(--body);white-space:normal}
#mission .mnum{font-size:22px;white-space:nowrap}
#mission .mbar{position:absolute;left:62px;right:18px;bottom:-7px;height:12px;border-radius:7px;background:var(--navyD);box-shadow:0 0 0 2px var(--ink);overflow:hidden}
#mission .mbar i{display:block;height:100%;width:0;background:linear-gradient(#9AF07A 0 45%,var(--grn) 45%);transition:width .3s}
#mission.flash{animation:bought .6s var(--spring)}
/* painel de gestão: desktop = placa lateral à direita, celular em pé = gaveta embaixo */
#panel{position:absolute;right:calc(22px + var(--sr));top:calc(104px + var(--st));width:400px;display:flex;flex-direction:column;align-items:stretch;gap:14px;transform:translateX(calc(100% + 80px));transition:transform .3s var(--out);pointer-events:none}
#panel.on{transform:none;transition:transform .55s var(--spring);pointer-events:auto}
.pn-h{position:relative;align-self:center;display:flex;align-items:center;gap:8px;padding:6px 24px 10px;border-radius:12px;font-size:30px;white-space:nowrap;transform:rotate(-2deg);background:repeating-linear-gradient(0deg,var(--car) 0 14px,var(--carD) 14px 16px,var(--car) 16px 30px)}
.pn-h::before,.pn-h::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#7A4420;box-shadow:inset 0 2px 0 #C98A5A}
.pn-h::before{left:9px}.pn-h::after{right:9px}
.pn-ico{width:46px;height:46px;margin:-10px 0 -10px -6px}
.pn-ico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(58,30,14,.4))}
.pn-cards{display:flex;flex-direction:column;gap:14px}
#panel .card{min-height:92px;grid-template-columns:88px 1fr auto}
#panel .c-ico{width:84px;height:76px}
#panel .c-ico img{width:88px;height:88px}
.card .c-fx b{color:var(--grnD)}
.card.big{background:linear-gradient(#FFFDF0 0 50%,#FFF4CF 50%)}
.card.big .buy{width:128px;height:70px;font-size:26px;background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
.card.big .buy.off{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
#panel .card.info{grid-template-columns:88px 1fr}
.card.info .c-fx{font-size:15px}
.flydrop{position:absolute;width:calc(30px * var(--k));height:calc(30px * var(--k));margin:calc(-15px * var(--k)) 0 0 calc(-15px * var(--k));filter:drop-shadow(0 2px 0 var(--ink));animation:flydrop var(--d) cubic-bezier(.5,0,.7,1) forwards}
@keyframes flydrop{0%{transform:translate(0,0) scale(.4)}30%{transform:translate(var(--mx),var(--my)) scale(1.15)}100%{transform:translate(var(--tx),var(--ty)) scale(.7)}}
/* chips presos ao mundo (sem zoom: tamanhos vezes --k) */
.wchip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:calc(3px * var(--k));height:calc(38px * var(--k));padding:0 calc(12px * var(--k)) 0 calc(36px * var(--k));border-radius:calc(20px * var(--k));background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);color:#fff;white-space:nowrap;border-width:calc(3px * var(--k));box-shadow:0 0 0 calc(3px * var(--k)) var(--ink),0 calc(4px * var(--k)) 0 calc(3px * var(--k)) var(--ink);pointer-events:none}
.wchip .wi{position:absolute;left:calc(-8px * var(--k));top:calc(-8px * var(--k));width:calc(44px * var(--k));height:calc(44px * var(--k));filter:drop-shadow(0 calc(3px * var(--k)) 0 var(--ink))}
.wchip .wi img,.wchip .wi svg{width:100%;height:100%}
.wchip b{font-size:calc(21px * var(--k));-webkit-text-stroke:calc(4px * var(--k)) var(--ink)}
.wchip small{font:calc(15px * var(--k)) var(--display);opacity:.8}
.wchip .wbar{display:none;position:absolute;left:calc(30px * var(--k));right:calc(12px * var(--k));bottom:calc(-6px * var(--k));height:calc(8px * var(--k));border-radius:5px;background:var(--navyD);box-shadow:0 0 0 calc(2px * var(--k)) var(--ink);overflow:hidden}
.wchip .wbar i{display:block;height:100%;background:linear-gradient(#FFE27A 0 45%,var(--gold2) 45%)}
.wchip.store .wbar{display:block}
.wchip.store{background:linear-gradient(var(--honey) 0 50%,var(--honey2) 50%)}
.wchip.cost{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
.wchip.cost.ok{background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%);animation:nudge .7s ease-in-out infinite alternate}
.wchip.nest{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
/* setas na borda da tela */
.sarrow{position:absolute;width:calc(60px * var(--k));height:calc(60px * var(--k));margin:calc(-30px * var(--k)) 0 0 calc(-30px * var(--k));display:none}
.sarrow .tip{position:absolute;inset:0;border-radius:50%;background:linear-gradient(var(--honey) 0 50%,var(--honey2) 50%);border:calc(3px * var(--k)) solid #fff;box-shadow:0 0 0 calc(3px * var(--k)) var(--ink),0 calc(5px * var(--k)) 0 calc(3px * var(--k)) var(--ink);display:grid;place-items:center}
.sarrow .tip img{width:84%;height:84%;object-fit:contain}
.sarrow .dir{position:absolute;left:50%;top:50%;width:calc(30px * var(--k));height:calc(30px * var(--k));margin:calc(-15px * var(--k));transform:rotate(var(--a)) translateY(calc(-44px * var(--k)));--gf:#fff}
.sarrow .dir .gl{transform:rotate(-90deg)}
.sarrow.alert .tip{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
.sarrow.alert .dir{--gf:#FF8A80}
.sarrow.goal .tip{background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
.sarrow.on{display:block;animation:nudge .7s ease-in-out infinite alternate}
/* vitória */
#win .box{width:620px;display:flex;flex-direction:column;align-items:center}
#win .w-sub{font-size:30px;margin:4px 0 18px}
#win .b-go{width:380px;height:80px;font-size:34px}

[data-mode=port] #mission{left:calc(12px + var(--sl));right:calc(12px + var(--sr));top:calc(138px + var(--st));min-width:0;max-width:none;height:52px;padding-left:54px}
[data-mode=port] #mission .mico{width:60px;height:60px;left:-8px;top:-8px}
[data-mode=port] #mission .mtxt b{font-size:15px}
[data-mode=port] #mission .mtxt small{display:none}
[data-mode=port] #toasts{top:calc(206px + var(--st))}
[data-mode=port] #panel{left:calc(10px + var(--sl));right:calc(10px + var(--sr));top:auto;bottom:calc(10px + var(--sb));width:auto;transform:translateY(calc(100% + 60px))}
[data-mode=port] #panel.on{transform:none}
[data-mode=port] .pn-h{font-size:24px}
[data-mode=port] .pn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
[data-mode=port] #panel .card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;justify-items:center;text-align:center;padding:6px 6px 8px;min-height:0;row-gap:2px}
[data-mode=port] #panel .c-ico{grid-row:auto;width:62px;height:54px}
[data-mode=port] #panel .c-ico img{width:66px;height:66px;margin-top:-12px}
[data-mode=port] #panel .c-name{grid-column:auto;grid-row:auto;font-size:15px;align-self:center}
[data-mode=port] #panel .pips{grid-column:auto;grid-row:auto;margin:2px 0}
[data-mode=port] #panel .c-fx{display:none}
[data-mode=port] #panel .buy,[data-mode=port] #panel .maxl{grid-column:auto;grid-row:auto;width:100%;height:44px;font-size:20px}
[data-mode=port] #panel .card.big{grid-column:1/-1;grid-template-columns:62px 1fr auto;grid-template-rows:auto auto;text-align:left;justify-items:start}
[data-mode=port] #panel .card.big .c-ico{grid-row:1/3}
[data-mode=port] #panel .card.big .c-fx{display:block;grid-column:2;grid-row:2;font-size:12px}
[data-mode=port] #panel .card.big .buy{grid-column:3;grid-row:1/3;width:110px;height:56px}
[data-mode=port] #panel .card.info{grid-column:1/-1;grid-template-columns:62px 1fr;text-align:left;justify-items:start}
[data-mode=port] #panel .card.info .c-ico{grid-row:1/3}
[data-mode=port] #panel .card.info .c-fx{display:block;grid-column:2;font-size:13px}
[data-mode=port] body.panel-on #cargo,[data-mode=port] body.panel-on #swarmChip{opacity:0;transform:scale(.7);transition:.2s}
[data-mode=land] #mission{top:calc(68px + var(--st));height:48px}
[data-mode=land] #panel{top:calc(64px + var(--st));width:340px}
[data-mode=land] #panel .card{min-height:74px}

body.panel-on #dragHint{opacity:0}
.wchip.cost .wbar{display:block}
.wchip.cost .wbar i{background:linear-gradient(#FFE27A 0 45%,var(--gold2) 45%)}

/* chips: ancorados por left/top (o translate fica fixo) */
.wchip{transform:translate(-50%,-100%)}
.wchip.workers{background:linear-gradient(var(--blue) 0 50%,var(--blue2) 50%)}
.wchip.workers.hit{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%);animation:nudge .35s ease-in-out infinite alternate}
.wpop.alert{color:#FF5A4E;font-size:calc(40px * var(--k));-webkit-text-stroke:calc(6px * var(--k)) var(--ink)}

/* ======================= celular em pé: compacto ======================= */
[data-mode=port] #hud{top:calc(10px + var(--st));height:52px}
[data-mode=port] #hud .honey{left:26px;top:4px;height:44px;min-width:96px;padding:0 14px 0 40px;font-size:24px}
[data-mode=port] #hud .honey .cico{left:-24px;top:-10px;width:60px;height:60px}
[data-mode=port] #hud .daybar{left:150px;right:62px;top:8px;width:auto;margin-left:0}
[data-mode=port] #hud .dno{width:40px;height:40px;font-size:20px}
[data-mode=port] #hud .track{height:22px;margin-left:-10px}
[data-mode=port] #hud .sunmoon{width:32px;height:32px}
[data-mode=port] #hud .rbtn{width:46px;height:46px;padding:6px}
[data-mode=port] #mission{top:calc(70px + var(--st));height:42px;padding:0 12px 0 46px;gap:6px}
[data-mode=port] #mission .mico{width:48px;height:48px;left:-6px;top:-6px}
[data-mode=port] #mission .mtxt b{font-size:13px}
[data-mode=port] #mission .mnum{font-size:17px}
[data-mode=port] #mission .mbar{left:46px;right:14px;height:9px;bottom:-5px}
[data-mode=port] #toasts{top:calc(124px + var(--st))}
[data-mode=port] .toast{min-height:46px;padding:6px 14px 6px 6px;border-radius:26px}
[data-mode=port] .toast .t-ico{width:46px;height:46px;margin:-6px 0}
[data-mode=port] .toast b{font-size:17px}
[data-mode=port] .toast small{font-size:12px}
[data-mode=port] #cargo{transform:scale(.62);right:calc(4px + var(--sr));bottom:calc(4px + var(--sb))}
[data-mode=port] #swarmChip{left:calc(28px + var(--sl));bottom:calc(16px + var(--sb));height:40px;padding:0 12px 0 40px;font-size:22px}
[data-mode=port] #swarmChip .cico{width:56px;height:56px;left:-20px;top:-12px}
[data-mode=port] #dragHint{bottom:calc(120px + var(--sb))}
[data-mode=port] #dragHint b{font-size:20px}
[data-mode=port] #dragHint .dh-hand{width:56px;height:56px}
[data-mode=port] #starfx{transform:scale(.7)}
/* painel: fileira de cartões pequenos embaixo */
[data-mode=port] #panel{gap:8px;bottom:calc(8px + var(--sb))}
[data-mode=port] .pn-h{font-size:19px;padding:4px 18px 7px}
[data-mode=port] .pn-ico{width:34px;height:34px;margin:-8px 0 -8px -4px}
[data-mode=port] .pn-cards{grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:7px}
[data-mode=port] #panel .card{padding:4px 4px 6px;border-radius:14px;border-width:2px;box-shadow:0 0 0 2px var(--ink),0 4px 0 2px var(--ink)}
[data-mode=port] #panel .c-ico{width:46px;height:40px;border-width:2px;border-radius:10px}
[data-mode=port] #panel .c-ico img{width:50px;height:50px;margin-top:-10px}
[data-mode=port] #panel .c-name{font-size:12px;line-height:1.05;min-height:2.1em;display:flex;align-items:center}
[data-mode=port] #panel .pips{gap:1px;margin:1px 0}
[data-mode=port] #panel .pips i{width:9px;height:9px;border-width:1.5px}
[data-mode=port] #panel .buy,[data-mode=port] #panel .maxl{height:32px;font-size:15px;border-radius:11px;border-width:2px;box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink)}
[data-mode=port] #panel .buy b{-webkit-text-stroke:3.5px var(--ink)}
[data-mode=port] #panel .buy b .gl{width:16px;height:16px}
[data-mode=port] #panel .buy small{display:none}
[data-mode=port] #panel .rec-tag{width:26px;height:26px;font-size:18px;right:-8px;top:-10px}
/* um cartão só (colônia, lugar, ninho): deitado, com o texto */
[data-mode=port] #panel[data-n="1"] .card{grid-template-columns:52px 1fr auto;grid-template-rows:auto auto auto;justify-items:start;text-align:left;column-gap:8px;padding:6px 8px}
[data-mode=port] #panel[data-n="1"] .c-ico{grid-row:1/4}
[data-mode=port] #panel[data-n="1"] .c-name{grid-column:2;grid-row:1;min-height:0;font-size:15px}
[data-mode=port] #panel[data-n="1"] .pips{grid-column:2;grid-row:2}
[data-mode=port] #panel[data-n="1"] .c-fx{display:block;grid-column:2;grid-row:3;font-size:12px}
[data-mode=port] #panel[data-n="1"] .buy,[data-mode=port] #panel[data-n="1"] .maxl{grid-column:3;grid-row:1/4;width:92px;height:44px;font-size:18px}
[data-mode=port] #panel[data-n="1"] .card.info{grid-template-columns:52px 1fr}
[data-mode=port] .wchip{transform:translate(-50%,-100%) scale(.82)}

/* botões do HUD recebem clique (o #ui inteiro é pointer-events:none) */
#hud .hbtns{pointer-events:auto}
/* painel: rola quando não cabe (roda do mouse e dedo) */
#panel{max-height:calc(100% - 128px - var(--st) - var(--sb))}
.pn-cards{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:4px 10px 14px;margin:0 -10px;scrollbar-width:thin;scrollbar-color:rgba(58,30,14,.5) transparent}
.pn-cards::-webkit-scrollbar{width:8px}
.pn-cards::-webkit-scrollbar-thumb{background:rgba(58,30,14,.45);border-radius:4px}
#panel .card{flex:none}
[data-mode=port] #panel{max-height:46%}
[data-mode=port] .pn-cards{padding:4px 8px 8px;margin:0 -8px}

/* "!" do cartão recomendado: o scroller corta o que sai da caixa, então ele ganha
   folga em cima e à direita (e a tag encosta um pouco mais no cartão) */
.pn-cards{padding:16px 22px 14px 10px;margin:-12px -22px 0 -10px}
/* Cartão crescendo (pulso do tutorial, compra) passa um pouco da lista: nunca vira rolagem para o lado. */
.pn-cards{overflow-x:hidden}
#panel .rec-tag{right:-10px;top:-12px}
[data-mode=port] .pn-cards{padding:12px 12px 8px 8px;margin:-8px -12px 0 -8px}
[data-mode=port] #panel .rec-tag{right:-7px;top:-9px}

/* ======================= página inicial (3D vivo atrás) ======================= */
#title{background:none}
#title .t-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(29,91,153,.55) 0,rgba(29,91,153,0) 34%,rgba(29,91,153,0) 52%,rgba(20,63,110,.72) 100%)}
#title .t-top{position:absolute;left:0;right:0;top:calc(26px + var(--st));display:flex;flex-direction:column;align-items:center;gap:4px}
#title .logo{animation:logoBob 3.2s ease-in-out infinite alternate}
@keyframes logoBob{to{transform:rotate(-1.5deg) translateY(-6px)}}
#title .t-tag{font-size:24px}
#title .t-bottom{position:absolute;left:50%;bottom:calc(26px + var(--sb));transform:translateX(-50%);width:560px;display:flex;flex-direction:column;align-items:center;gap:14px}
.t-done{display:flex;align-items:center;gap:10px;padding:6px 20px 6px 8px;border-radius:30px;background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%);color:#fff}
.t-done .td-ico{width:54px;height:54px;margin:-10px 0}
.t-done .td-ico img{width:100%;height:100%}
.t-done .td-txt{display:flex;flex-direction:column;line-height:1.05}
.t-done b{font-size:26px}
.t-done small{font:600 15px var(--body);color:#EFFFE6}
.t-done.pop{animation:pop .55s var(--spring)}
.t-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ts{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 6px;border-radius:22px;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%);color:#fff;font-size:20px}
.ts i{width:38px;height:38px;margin:-6px 0;display:grid;place-items:center}
.ts i img,.ts i svg{width:100%;height:100%}
.ts.honey{background:linear-gradient(var(--honey) 0 50%,var(--honey2) 50%)}
.t-days{display:flex;align-items:center;gap:8px;color:#fff;font:600 16px var(--body);text-shadow:0 2px 0 rgba(20,63,110,.8)}
.t-days .tdp{display:flex;gap:4px}
.t-days .tdp i{width:30px;height:30px;opacity:.35;filter:grayscale(1)}
.t-days .tdp i.on{opacity:1;filter:drop-shadow(0 2px 0 var(--ink))}
.t-days .tdp i img{width:100%;height:100%}
.tstreak{margin-left:6px;padding:3px 12px;border-radius:14px;font-size:16px;background:linear-gradient(var(--red) 0 50%,var(--red2) 50%)}
#title #playBtn{width:380px;height:86px;font-size:40px;animation:buyPulse 1.4s ease-in-out infinite}
.t-lock{display:flex;align-items:center;gap:12px;padding:8px 26px 10px 10px;border-radius:26px;background:linear-gradient(#3B4C8C 0 50%,#33437E 50%);color:#fff}
.t-lock .tl-ico{width:70px;height:70px;animation:heroBob 2.4s ease-in-out infinite alternate}
.t-lock .tl-ico img{width:100%;height:100%}
.t-lock .tl-txt{display:flex;flex-direction:column;line-height:1.05}
.t-lock .tl-txt > b:first-child{font-size:28px}
.t-lock small{font:600 15px var(--body);color:#CFE0FF;margin-top:4px}
.t-lock .tl-cd{font-size:40px;letter-spacing:.04em}
.t-row{display:flex;gap:28px}
.mb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.mb .rbtn{width:66px;height:66px;padding:9px}
.mb small{font-size:17px}
.mb .badge{position:absolute;right:-6px;top:-8px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;display:grid;place-items:center;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 3px var(--ink);font-size:18px;font-style:normal;-webkit-text-stroke:3.5px var(--ink)}
/* modos e conquistas */
#modes .box,#ach .box{width:620px;display:flex;flex-direction:column;align-items:center;gap:12px}
.m-list,.a-list{width:100%;display:flex;flex-direction:column;gap:12px;max-height:min(470px,calc(100vh / var(--k) - 250px));overflow-y:auto;padding:6px 12px 10px;overscroll-behavior:contain}
.mode,.a-row{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:18px;background:linear-gradient(#FFFFFF 0 50%,#F2F7FF 50%);color:var(--ink)}
.m-ico,.a-ico{position:relative;flex:none;width:64px;height:64px;border-radius:14px;border:3px solid var(--ink);background:#FFE6A6;display:grid;place-items:center}
.m-ico img,.a-ico img{width:70px;height:70px;object-fit:contain;margin-top:-8px}
.a-ico svg{width:40px;height:40px}
.m-lock{position:absolute;right:-10px;bottom:-10px;width:32px;height:32px}
.m-txt,.a-txt{flex:1;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.m-txt b,.a-txt b{font:22px var(--display)}
.m-txt small,.a-txt small{font:600 14px var(--body);color:#5B6B80}
.m-tag{flex:none;padding:5px 12px;border-radius:12px;font-size:17px;background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
.mode.locked{background:linear-gradient(#EEF2F7 0 50%,#E2E8F0 50%)}
.mode.locked .m-ico{filter:grayscale(.85);opacity:.75}
.mode.locked .m-tag{background:linear-gradient(var(--grey) 0 50%,var(--grey2) 50%)}
.a-count{font-size:24px;margin-top:-4px}
.a-bar{display:block;margin-top:6px;height:10px;border-radius:6px;background:#DCE6F2;box-shadow:0 0 0 2px var(--ink);overflow:hidden}
.a-bar i{display:block;height:100%;background:linear-gradient(#9AF07A 0 45%,var(--grn) 45%)}
.a-chk{flex:none;min-width:44px;display:grid;place-items:center}
.a-chk svg{width:40px;height:40px;--gf:var(--grn)}
.a-chk b{font:15px var(--display);white-space:nowrap}
.a-row.got{background:linear-gradient(#FFFDF0 0 50%,#FFF4CF 50%)}
.a-row.got .a-ico{background:#FFD23F}
.a-row:not(.got) .a-ico img{filter:grayscale(.7);opacity:.7}
.a-row.secret .a-ico{background:#C9D3DE}
#modes .back,#ach .back{width:240px;height:62px;font-size:28px;color:var(--ink)}
#modes .back .txt,#ach .back .txt{color:#fff}
#opts .box{width:440px}
#opts .panel{position:relative;padding:50px 30px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
#opts .toggles{display:flex;gap:26px}
#opts .tg small{font:600 15px var(--body)}
#opts .back{width:260px;height:66px;font-size:30px}
#pause .tomenu{font-size:22px;color:#fff}

[data-mode=port] #title .t-top{top:calc(30px + var(--st))}
[data-mode=port] #title .t-tag{font-size:18px}
[data-mode=port] #title .t-bottom{width:360px;gap:10px}
[data-mode=port] #title #playBtn{width:320px;height:76px;font-size:32px}
[data-mode=port] .ts{height:36px;font-size:17px;padding:0 10px 0 4px}
[data-mode=port] .ts i{width:32px;height:32px}
[data-mode=port] .t-done b{font-size:21px}
[data-mode=port] .t-lock .tl-cd{font-size:32px}
[data-mode=port] .t-lock .tl-txt > b:first-child{font-size:22px}
[data-mode=port] #modes .box,[data-mode=port] #ach .box{width:360px}
[data-mode=port] .m-txt b,[data-mode=port] .a-txt b{font-size:18px}
[data-mode=port] .m-txt small,[data-mode=port] .a-txt small{font-size:12px}
[data-mode=port] .m-tag{font-size:13px;padding:4px 8px}
[data-mode=port] .m-ico,[data-mode=port] .a-ico{width:52px;height:52px}
[data-mode=port] .m-ico img,[data-mode=port] .a-ico img{width:58px;height:58px}
[data-mode=port] .m-list,[data-mode=port] .a-list{max-height:calc(100vh / var(--k) - 230px)}
[data-mode=land] #title .t-top{top:calc(8px + var(--st))}
[data-mode=land] #title .t-bottom{bottom:calc(10px + var(--sb));gap:8px}
[data-mode=land] #title .t-stats,[data-mode=land] #title .t-days{display:none !important}

/* fora do jogo: sem chips do mapa, setas e analógico */
body:not(.playing) #world .wchip,body:not(.playing) #world .sarrow,body:not(.playing) #world .wpop{display:none}
#title .t-top{top:calc(14px + var(--st))}
#title .t-bottom{gap:10px;bottom:calc(20px + var(--sb))}
#title .t-row{margin-top:2px}
@media (max-height:760px){[data-mode=desk] #title .t-tag{display:none}}

/* ── página inicial em coluna: logo em cima, Jogar e botões embaixo, nada se sobrepõe.
   Números do save: canto de cima à esquerda no PC, abaixo do logo no celular em pé. */
#title.screen{display:flex;flex-direction:column;align-items:center;padding:calc(14px + var(--st)) calc(16px + var(--sr)) calc(30px + var(--sb)) calc(16px + var(--sl))}
[data-mode] #title .t-top,[data-mode] #title .t-bottom{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto}
[data-mode] #title .t-bottom{margin-top:auto;gap:12px}
#title .t-row{margin-top:6px}
.t-info{display:flex;flex-direction:column;align-items:center;gap:8px}
.t-days{flex-wrap:wrap}
[data-mode=port] #title .t-bottom{gap:10px}
[data-mode=port] #title .t-row{margin-top:8px}
[data-mode=port] #title.screen{padding-bottom:calc(44px + var(--sb))}
[data-mode=desk] #title.screen{padding-bottom:calc(40px + var(--sb))}
/* celular deitado: pouca altura → logo menor, botões redondos numa coluna à direita */
[data-mode=land] #title.screen{padding-bottom:calc(14px + var(--sb))}
[data-mode=land] #title .t-tag{display:none}
[data-mode=land] #title .t-bottom{position:static;gap:8px}
[data-mode=land] #title #playBtn{width:300px;height:70px;font-size:30px}
[data-mode=land] #title .t-row{position:absolute;right:calc(16px + var(--sr));bottom:calc(12px + var(--sb));flex-direction:column;gap:10px;margin:0}
[data-mode=land] #title .mb .rbtn{width:54px;height:54px;padding:7px}
[data-mode=land] #title .mb small{font-size:14px}

/* ícones de modos/conquistas: já vêm recortados e centrados (centerIcons); só cabem na moldura */
.m-ico img,.a-ico img,[data-mode=port] .m-ico img,[data-mode=port] .a-ico img{width:84%;height:84%;margin:0;object-fit:contain}
.a-ico{overflow:hidden}
.m-lock{right:-6px;bottom:-6px;width:28px;height:28px}
/* idioma: bandeira no botão redondo das Opções e lista com bandeirinhas */
.flag{display:inline-flex;width:30px;height:20px;border-radius:5px;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--ink)}
.flag svg{width:100%;height:100%;display:block}
.tlang .tg-ico{display:grid;place-items:center}
.tg-ico .flag{width:46px;height:31px;border:2px solid #fff;box-shadow:0 0 0 2px var(--ink)}
#langs .box{width:560px;display:flex;flex-direction:column;align-items:center;gap:14px}
.l-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:min(520px,calc(100vh / var(--k) - 230px));overflow-y:auto;padding:6px 10px 10px;overscroll-behavior:contain}
.lg{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border-radius:16px;background:linear-gradient(#FFFFFF 0 50%,#F2F7FF 50%);color:var(--ink);text-align:left;cursor:pointer}
.lg b{font:600 20px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg .flag{width:36px;height:24px}
.lg.on{background:linear-gradient(#DFFFD0 0 50%,#C3F2AC 50%)}
.lg:active{transform:translateY(2px)}
#langs .back{width:240px;height:62px;font-size:28px;color:var(--ink)}
#langs .back .txt{color:#fff}
[data-mode=port] #langs .box{width:360px}
[data-mode=port] .lg{height:50px;gap:10px;padding:0 10px}
[data-mode=port] .lg b{font-size:17px}
[data-mode=port] .l-grid{gap:8px;max-height:calc(100vh / var(--k) - 210px)}
#opts .toggles{gap:20px}

/* QA de idiomas */
/* coreano: quebra só entre palavras (sem isso o Chrome parte a palavra no meio: "바구/니") */
html[lang=ko] body{word-break:keep-all;overflow-wrap:break-word}
/* nome dos cartões da loja: ocupa a largura do cartão e quebra em até 2 linhas; o fitText
   (ui.js) só encolhe quando uma palavra sozinha não cabe (alemão, holandês...) */
#panel .card .c-name{min-width:0;max-width:100%;overflow-wrap:normal;word-break:normal}
[data-mode=port] #panel .card .c-name{align-self:stretch;text-align:center;justify-content:center}
/* logo do título: imagem (src/swarm/img, feita em tools/hive-logo); empilhado, e numa linha no celular deitado */
#title .logo{margin:0;line-height:0;transform:none}
#title .logo img{display:block;height:auto;filter:drop-shadow(0 8px 10px rgba(40,14,0,.35))}
#title .logo .lf{width:270px}
#title .logo .lw{display:none}
[data-mode=port] #title .logo .lf{width:236px}
[data-mode=land] #title .logo .lf{display:none}
[data-mode=land] #title .logo .lw{display:block;width:330px}

/* missão no celular em pé: pílula pequena (ícone + número + barrinha) embaixo do mel;
   abre com o texto por uns segundos quando muda ou quando é tocada */
#ui.playing #mission{pointer-events:auto;cursor:pointer}
[data-mode=port] #mission{right:auto;left:calc(12px + var(--sl));top:calc(66px + var(--st));height:40px;min-width:86px;max-width:calc(100% - 24px);padding:0 12px 0 44px;gap:6px}
[data-mode=port] #mission:not(.open) .mtxt{display:none}
[data-mode=port] #mission .mico{width:46px;height:46px;left:-6px;top:-6px}
[data-mode=port] #mission .mnum{font-size:16px}
[data-mode=port] #mission .mbar{left:44px;right:12px;height:8px;bottom:-5px}
[data-mode=port] #mission.open{animation:pop .4s var(--spring)}

/* mini tutorial: instrução fixa no topo, seta pulando em cima do alvo, cartão da loja pulsando */
#coach{position:absolute;left:50%;top:calc(172px + var(--st));z-index:2;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw / var(--k) - 24px));padding:8px 18px 8px 8px;border-radius:28px;background:linear-gradient(#FFFFFF 0 50%,#FFF4D6 50%);color:var(--ink);opacity:0;transform:translateX(-50%) scale(.9);transition:opacity .25s,transform .25s var(--spring);pointer-events:none}
#coach.on{opacity:1;transform:translateX(-50%) scale(1)}
#coach.pop{animation:none}
#coach.on.pop .c-ico{animation:pop .5s var(--spring)}
#coach .c-ico{flex:none;width:46px;height:46px;border-radius:50%;background:#FFE6A6;box-shadow:0 0 0 3px var(--ink);display:grid;place-items:center;overflow:hidden}
#coach .c-ico img{width:112%;height:112%;object-fit:contain}
#coach b{font:600 18px var(--body);line-height:1.15}
#coach .c-dots{flex:none;display:flex;gap:4px;margin-left:2px}
#coach .c-dots i{width:8px;height:8px;border-radius:50%;background:#EAD9B0;box-shadow:0 0 0 1.5px rgba(58,30,14,.35)}
#coach .c-dots i.on{background:var(--honey2)}
[data-mode=port] #coach{top:calc(66px + var(--st));padding:5px 12px 5px 5px;gap:8px;border-radius:24px}
[data-mode=port] #coach .c-ico{width:36px;height:36px}
[data-mode=port] #coach b{font-size:14px}
[data-mode=port] #coach .c-dots{display:none}
[data-mode=land] #coach{top:calc(140px + var(--st))}
#tpoint{position:absolute;width:0;height:0;display:none;pointer-events:none;z-index:3}
#tpoint.on{display:block}
#tpoint i{position:absolute;left:calc(-26px * var(--k));top:calc(-82px * var(--k));width:calc(52px * var(--k));height:calc(52px * var(--k));transform:rotate(90deg);--gf:var(--honey);filter:drop-shadow(0 3px 0 rgba(58,30,14,.55));animation:tpBounce .55s ease-in-out infinite alternate}
#tpoint .ring{position:absolute;left:calc(-34px * var(--k));top:calc(-17px * var(--k));width:calc(68px * var(--k));height:calc(34px * var(--k));border-radius:50%;border:calc(4px * var(--k)) solid #FFF6D8;animation:tpRing 1.1s ease-out infinite}
@keyframes tpBounce{from{translate:0 0}to{translate:0 calc(-16px * var(--k))}}
@keyframes tpRing{from{transform:scale(.45);opacity:1}to{transform:scale(1.35);opacity:0}}
#panel .card.ftue{animation:ftueCard .7s ease-in-out infinite alternate;z-index:2}
#panel .card.ftue .buy{box-shadow:0 0 0 3px var(--ink),0 0 0 9px #FFE36B,0 6px 0 3px var(--ink)}
@keyframes ftueCard{from{transform:scale(1)}to{transform:scale(1.06)}}
/* PC com a loja aberta à direita: a instrução do tutorial vai um pouco pra esquerda */

/* pausa com as mesmas opções do título (som, música, idioma); a lista de idiomas abre por cima */
#pause .tg small{font:600 15px var(--body)}
#pause .toggles{gap:20px}
#langs{z-index:12}
/* lista de idiomas sem rolagem: a caixa inteira encolhe pra caber (fit); celular deitado em 3 colunas */
.l-grid,[data-mode=port] .l-grid{max-height:none;overflow:visible}
[data-mode=land] #langs .box{width:720px}
[data-mode=land] .l-grid{grid-template-columns:repeat(3,1fr)}

/* embaixo no celular em pé: tudo à esquerda — a rainha (pólen carregado) no canto e a
   quantidade de abelhas logo acima dela */
[data-mode=port] #cargo{left:calc(6px + var(--sl));right:auto;margin-left:0;bottom:calc(6px + var(--sb));transform:scale(.62);transform-origin:0 100%}
[data-mode=port] #swarmChip{left:calc(30px + var(--sl));bottom:calc(112px + var(--sb))}

/* ══ Grade padrão do HUD (todos os formatos) ═════════════════════════════════
   Medidas por formato: --m = margem da borda, --ph = altura das pílulas e botões,
   --ic = círculo do ícone dentro da pílula, --g = espaço entre as peças.
   Linha 1: mel · dia · pausa. Linha 2: missão (ou a instrução do tutorial).
   Linha 3: avisos, centrados. Embaixo à esquerda: rainha no canto e abelhas logo acima.
   A loja encosta na mesma margem. Todas as pílulas com o ícone num círculo por dentro. */
html[data-mode]{--g:12px}
html[data-mode=desk]{--m:20px;--ph:56px;--ic:46px;--fz:28px;--cargo-k:1}
html[data-mode=land]{--m:10px;--ph:44px;--ic:36px;--fz:22px;--cargo-k:.7}
html[data-mode=port]{--m:10px;--ph:44px;--ic:36px;--fz:22px;--cargo-k:.62}

[data-mode] #hud{display:flex;align-items:center;gap:var(--g);left:calc(var(--m) + var(--sl));right:calc(var(--m) + var(--sr));top:calc(var(--m) + var(--st));height:var(--ph);padding:0}
[data-mode] #hud .honey{position:relative;left:auto;top:auto;flex:none;height:var(--ph);min-width:0;padding:0 18px 0 calc(var(--ph) + 4px);font-size:var(--fz);border-radius:calc(var(--ph) / 2)}
[data-mode] #hud .honey .cico{left:calc((var(--ph) - var(--ic)) / 2);top:50%;width:var(--ic);height:var(--ic);padding:calc(var(--ic) * .17);box-sizing:border-box;transform:translateY(-50%);border-radius:50%;background:#FFF1C2;box-shadow:0 0 0 2.5px var(--ink);filter:none}
[data-mode] #hud .honey.bump .cico{animation:none}
[data-mode] #hud .daybar{position:relative;left:auto;right:auto;top:auto;width:auto;max-width:470px;margin:0 auto;flex:1 1 auto;min-width:0}
[data-mode=desk] #hud .daybar{position:absolute;left:50%;top:50%;width:470px;transform:translate(-50%,-50%)}
[data-mode] #hud .dno{width:var(--ph);height:var(--ph);font-size:calc(var(--fz) * .9)}
[data-mode] #hud .hbtns{position:relative;right:auto;top:auto;flex:none;margin-left:auto}
[data-mode] #hud .rbtn{width:var(--ph);height:var(--ph);padding:calc(var(--ph) * .16)}

[data-mode] #mission{left:calc(var(--m) + var(--sl));right:auto;top:calc(var(--m) + var(--st) + var(--ph) + var(--g));height:var(--ph);min-width:0;padding:0 18px 0 calc(var(--ph) + 4px);gap:10px;border-radius:calc(var(--ph) / 2)}
[data-mode] #mission .mico{left:calc((var(--ph) - var(--ic)) / 2);top:50%;width:var(--ic);height:var(--ic);transform:translateY(-50%);border-radius:50%;background:#FFE6A6;box-shadow:0 0 0 2.5px var(--ink);display:grid;place-items:center;overflow:hidden;filter:none}
[data-mode] #mission .mico img{width:118%;height:118%;object-fit:contain}
[data-mode] #mission .mtxt,[data-mode] #mission .mnum{margin-top:calc(var(--ph) * -.17)}
[data-mode] #mission .mtxt small{display:none}
[data-mode] #mission .mtxt b{font-size:calc(var(--fz) * .62)}
[data-mode] #mission .mnum{font-size:calc(var(--fz) * .75);line-height:1}
[data-mode] #mission .mbar{left:calc(var(--ph) + 4px);right:18px;bottom:calc(var(--ph) * .16);height:calc(var(--ph) * .15);box-shadow:0 0 0 1.5px var(--ink)}

[data-mode] #coach{left:calc(var(--m) + var(--sl));top:calc(var(--m) + var(--st) + var(--ph) + var(--g));min-height:var(--ph);transform:scale(.92);transform-origin:0 50%}
[data-mode] #coach.on{transform:none}
[data-mode] #toasts{top:calc(var(--m) + var(--st) + 2 * (var(--ph) + var(--g)))}

[data-mode] #panel{right:calc(var(--m) + var(--sr))}
[data-mode=desk] #panel,[data-mode=land] #panel{top:calc(var(--m) + var(--st) + var(--ph) + var(--g))}
[data-mode=port] #panel{left:calc(var(--m) + var(--sl));bottom:calc(var(--m) + var(--sb))}

[data-mode] #cargo{left:calc(var(--m) + var(--sl));right:auto;margin-left:0;bottom:calc(var(--m) + var(--sb));transform:scale(var(--cargo-k));transform-origin:0 100%}
[data-mode] #swarmChip{left:calc(var(--m) + var(--sl));bottom:calc(var(--m) + var(--sb) + 150px * var(--cargo-k) + var(--g));height:var(--ph);padding:0 18px 0 calc(var(--ph) + 4px);font-size:var(--fz);border-radius:calc(var(--ph) / 2)}
[data-mode] #swarmChip .cico{left:calc((var(--ph) - var(--ic)) / 2);top:50%;width:var(--ic);height:var(--ic);transform:translateY(-50%);border-radius:50%;background:#FFE6A6;box-shadow:0 0 0 2.5px var(--ink);overflow:hidden;filter:none;display:grid;place-items:center}
[data-mode] #swarmChip .cico img{width:120%;height:120%;object-fit:contain}
/* loja aberta: no celular em pé a rainha e as abelhas somem atrás da gaveta; deitado e no PC
   os avisos centram no espaço que sobra à esquerda da loja */
html[data-mode=port] body.panel-on #ui.playing #cargo,html[data-mode=port] body.panel-on #ui.playing #swarmChip{opacity:0;pointer-events:none}
html[data-mode=land] body.panel-on #toasts{right:calc(340px + var(--m) + var(--g))}
html[data-mode=desk] body.panel-on #toasts{right:calc(400px + var(--m) + var(--g))}

/* ícones 3D dentro dos círculos sem cortar (cortado parecia fora do centro) */
[data-mode] #mission .mico img,[data-mode] #swarmChip .cico img,#coach .c-ico img{width:100%;height:100%}
#cargo img{left:15px;top:13px;width:94px;height:94px}

/* loja no celular deitado: coluna estreita, cartões numa linha só (ícone · nome · preço);
   as 5 compras cabem sem rolar */
[data-mode=land] #panel{width:290px;gap:6px}
[data-mode=land] #panel .pn-h{font-size:20px;padding:4px 18px 7px}
[data-mode=land] #panel .pn-cards{gap:6px;padding-top:8px}
[data-mode=land] #panel .card{min-height:0;height:50px;grid-template-columns:42px 1fr auto;grid-template-rows:1fr;column-gap:8px;padding:4px 6px 4px 5px;border-radius:14px}
[data-mode=land] #panel .c-ico{grid-row:1;width:40px;height:40px;border-radius:10px;border-width:2.5px}
[data-mode=land] #panel .c-ico img{width:46px;height:46px;margin-top:-4px}
[data-mode=land] #panel .c-name{grid-row:1;align-self:center;font-size:15px;line-height:1.05}
[data-mode=land] #panel .pips,[data-mode=land] #panel .c-fx{display:none}
[data-mode=land] #panel .buy,[data-mode=land] #panel .card.big .buy{grid-row:1;width:78px;height:38px;font-size:18px}
[data-mode=land] #panel .buy small{display:none}
[data-mode=land] #panel .buy b .gl{width:18px;height:18px}
[data-mode=land] #panel .card.info{height:auto;grid-template-columns:42px 1fr;grid-template-rows:auto auto;padding:6px}
[data-mode=land] #panel .card.info .c-ico{grid-row:1/3}
[data-mode=land] #panel .card.info .c-fx{display:block;grid-column:2;grid-row:2;font-size:12px}
[data-mode=land] #panel .pn-cards{gap:5px}
[data-mode=land] #panel .card{height:44px;padding:3px 6px 3px 4px}
[data-mode=land] #panel .c-ico{width:36px;height:36px}
[data-mode=land] #panel .c-ico img{width:42px;height:42px}
[data-mode=land] #panel .buy,[data-mode=land] #panel .card.big .buy{height:34px;font-size:17px}
[data-mode=land] #panel{max-height:calc(100% - var(--m) * 2 - var(--ph) - var(--g) - var(--st) - var(--sb))}

/* ninho pintado pelo perigo comparado ao enxame (como bicho de nível alto nos MMORPGs):
   verde fácil · amarelo parelho · laranja difícil · vermelho perigoso (pulsando) */
.wchip.nest.t-easy{background:linear-gradient(var(--grn) 0 50%,var(--grn2) 50%)}
.wchip.nest.t-even{background:linear-gradient(#FFD23F 0 50%,#F2B414 50%)}
.wchip.nest.t-hard{background:linear-gradient(#FF8A3D 0 50%,#E8642A 50%)}
.wchip.nest.t-deadly{background:linear-gradient(var(--red) 0 50%,var(--red2) 50%);animation:nudge .5s ease-in-out infinite alternate}

/* resumo do dia: linhas brancas com ícone, nome e número; botão do próximo dia */
#dayend .box{width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}
.de-rows{width:100%;display:flex;flex-direction:column;gap:8px}
.de-row{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px 0 8px;border-radius:18px;background:linear-gradient(#FFFFFF 0 50%,#F2F7FF 50%);color:var(--ink);animation:pop .45s var(--spring) backwards}
.de-row:nth-child(2){animation-delay:.08s}.de-row:nth-child(3){animation-delay:.16s}.de-row:nth-child(4){animation-delay:.24s}.de-row:nth-child(5){animation-delay:.32s}.de-row:nth-child(6){animation-delay:.4s}
.de-ico{flex:none;width:42px;height:42px;border-radius:50%;background:#FFE6A6;box-shadow:0 0 0 2.5px var(--ink);display:grid;place-items:center;overflow:hidden;padding:4px;box-sizing:border-box;--gf:var(--honey)}
.de-ico img{width:110%;height:110%;object-fit:contain}
.de-l{flex:1;font:600 18px var(--body)}
.de-v{font:26px var(--display);white-space:nowrap}
.de-row.good .de-v{color:var(--grnD)}
.de-row.bad .de-v{color:#D9481F}
#dayend .de-next{width:340px;height:76px;font-size:34px;margin-top:6px;animation:buyPulse 1.4s ease-in-out infinite}
#dayend .de-menu{font-size:20px;color:#fff}
[data-mode=port] #dayend .box{width:360px}
[data-mode=port] .de-row{height:48px}
[data-mode=port] .de-l{font-size:15px}
[data-mode=port] .de-v{font-size:22px}
[data-mode=port] #dayend .de-next{width:300px;height:66px;font-size:28px}

/* anúncio premiado (portais): botão dourado com o triângulo de vídeo (×2 do resumo, oferta do 2×) */
.b-ad{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(var(--gold) 0 50%,var(--gold2) 50%);color:#fff;--gf:#fff}
.b-ad .txt{-webkit-text-stroke:6px var(--ink)}
.b-ad .ad-ico{flex:none;width:34px;height:34px;filter:drop-shadow(0 3px 0 var(--ink))}
.busy .b-ad{opacity:.6;pointer-events:none;animation:none}
#dayend .de-double{width:340px;height:64px;font-size:28px;animation:buyPulse 1.4s ease-in-out infinite}
#dayend .de-double .num{font-size:28px}
[data-mode=port] #dayend .de-double{width:300px;height:58px;font-size:24px}
[data-mode=port] #dayend .de-double .num{font-size:24px}
/* oferta do 2× de mel: a gota grande com o 2×, o que o vídeo dá e o botão de assistir */
#boost .box{width:460px;display:flex;flex-direction:column;align-items:center;gap:14px}
#boost .bo-hero{position:relative;width:150px;height:150px;display:grid;place-items:center;animation:bump 1.4s ease-in-out infinite}
#boost .bo-drop{position:absolute;inset:0;filter:drop-shadow(0 6px 0 var(--ink))}
#boost .bo-hero .txt{position:relative;margin-top:34px;font-size:50px;-webkit-text-stroke:8px var(--ink)}
#boost .bo-txt{max-width:420px;text-align:center;font-size:26px;line-height:1.2}
#boost .bo-watch{width:320px;height:76px;font-size:34px;animation:buyPulse 1.4s ease-in-out infinite}
#boost .bo-watch .ad-ico{width:40px;height:40px}
#boost .bo-no{font-size:20px;color:#fff}
[data-mode=port] #boost .box{width:330px}
[data-mode=port] #boost .bo-txt{font-size:21px}
[data-mode=port] #boost .bo-watch{width:280px;height:66px;font-size:28px}
/* botão 2× do HUD: dourado e pulsando enquanto é oferta (triângulo de vídeo no canto); valendo,
   fica azul e o mel dourado dentro dele esvazia com o tempo que falta */
#hud #boostBtn{display:grid;place-items:center;padding:0;background:linear-gradient(var(--gold) 0 50%,var(--gold2) 50%);animation:buyPulse 1.4s ease-in-out infinite;--gf:#fff}
#hud #boostBtn .txt{position:relative;z-index:1;font-size:calc(var(--ph,58px) * .4);line-height:1;-webkit-text-stroke:4px var(--ink)}
#hud #boostBtn .bo-ad{position:absolute;right:2px;bottom:2px;z-index:1;width:36%;height:36%;filter:drop-shadow(0 2px 0 var(--ink))}
#hud #boostBtn .bo-ring{position:absolute;inset:0;background:conic-gradient(var(--gold) 0 var(--p,0%),transparent var(--p,0%));display:none}
#hud #boostBtn.on{animation:none;background:linear-gradient(var(--navy) 0 50%,var(--navy2) 50%)}
#hud #boostBtn.on .bo-ring{display:block}
#hud #boostBtn.on .bo-ad{display:none}

/* loja no PC: mais estreita e concisa — cartões numa linha (ícone · nome e efeito · preço) */
[data-mode=desk] #panel{width:330px;gap:8px}
[data-mode=desk] #panel .pn-h{font-size:24px;padding:4px 20px 8px}
[data-mode=desk] #panel .pn-cards{gap:7px;padding-top:8px}
[data-mode=desk] #panel .card{min-height:0;height:62px;grid-template-columns:50px 1fr auto;grid-template-rows:1fr 1fr;column-gap:10px;padding:5px 8px 5px 6px;border-radius:16px}
[data-mode=desk] #panel .c-ico{grid-row:1/3;width:48px;height:48px;border-radius:12px;border-width:2.5px}
[data-mode=desk] #panel .c-ico img{width:54px;height:54px;margin-top:-5px}
[data-mode=desk] #panel .c-name{grid-row:1;align-self:end;font-size:17px;line-height:1.05}
[data-mode=desk] #panel .c-fx{grid-row:2;align-self:start;font-size:12px}
[data-mode=desk] #panel .pips{display:none}
[data-mode=desk] #panel .buy,[data-mode=desk] #panel .card.big .buy{grid-row:1/3;width:86px;height:42px;font-size:19px}
[data-mode=desk] #panel .buy small{display:none}
[data-mode=desk] #panel .buy b .gl{width:20px;height:20px}
[data-mode=desk] #panel .card.info{height:auto;padding:8px}
html[data-mode=desk] body.panel-on #toasts{right:calc(330px + var(--m) + var(--g))}

/* caixa do evento (polinizar): no lugar da missão, com barra de tempo que fica vermelha no fim */
#evbox{position:absolute;left:calc(var(--m) + var(--sl));top:calc(var(--m) + var(--st) + var(--ph) + var(--g));z-index:2;display:flex;align-items:center;gap:10px;min-height:var(--ph);padding:5px 16px 5px 5px;border-radius:calc(var(--ph) / 2);background:linear-gradient(#FFFFFF 0 50%,#FFF4D6 50%);color:var(--ink);opacity:0;transform:scale(.9);transform-origin:0 50%;transition:opacity .2s,transform .25s var(--spring);pointer-events:none}
#evbox.on{opacity:1;transform:none}
#evbox .c-ico{flex:none;width:var(--ic);height:var(--ic);border-radius:50%;background:#FFE6A6;box-shadow:0 0 0 2.5px var(--ink);display:grid;place-items:center;overflow:hidden}
#evbox .c-ico img{width:100%;height:100%;object-fit:contain}
#evbox .ev-txt{display:flex;flex-direction:column;gap:4px;min-width:150px}
#evbox b{font:600 calc(var(--fz) * .62) var(--body);line-height:1.1}
#evbox .ev-bar{display:block;height:9px;border-radius:5px;background:#E8DDBE;box-shadow:0 0 0 1.5px var(--ink);overflow:hidden}
#evbox .ev-bar i{display:block;height:100%;width:100%;background:linear-gradient(#9AF07A 0 45%,var(--grn) 45%);transition:width .15s linear}
#evbox.hurry .ev-bar i{background:linear-gradient(#FFB0A0 0 45%,var(--red) 45%)}
#evbox.hurry{animation:nudge .35s ease-in-out infinite alternate}
.wpop.gold{color:#FFD23F;font-size:calc(30px * var(--k))}
/* subtítulo dos avisos: branco com contorno escuro (igual ao título), legível em qualquer cor de fundo */
.toast small,.toast.bad small,.toast.good small,.toast.night small{color:#fff;font-weight:700;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;letter-spacing:.01em}