/* Bulma onboarding — tutorial adaptativo de novos jogadores */
#onboarding-guide{position:absolute;right:22px;bottom:138px;z-index:85;width:min(620px,calc(100vw - 36px));pointer-events:none;font-family:"Segoe UI",system-ui,sans-serif}
#onboarding-guide[hidden]{display:none!important}
#onboarding-guide .ob-card{position:relative;display:grid;grid-template-columns:178px minmax(0,1fr);min-height:250px;pointer-events:auto;border:1px solid rgba(231,177,92,.30);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(28,20,10,.66) 0%,rgba(29,20,10,.54) 28%,rgba(25,18,10,.37) 54%,rgba(20,14,8,.18) 76%,rgba(13,10,7,.045) 100%);box-shadow:inset 0 1px 0 rgba(255,222,150,.06),0 8px 28px rgba(0,0,0,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
#onboarding-guide .ob-card::before{content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;background:linear-gradient(90deg,rgba(255,195,79,.035),transparent 34%,rgba(94,188,255,.025));z-index:0}
#onboarding-guide .ob-art{position:relative;z-index:1;overflow:hidden;background:radial-gradient(circle at 50% 27%,rgba(63,185,244,.12),transparent 49%),linear-gradient(180deg,rgba(18,28,38,.22),rgba(12,9,7,.05));border-right:1px solid rgba(226,178,99,.13)}
#onboarding-guide .ob-art::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(transparent,rgba(13,10,7,.22));pointer-events:none}
#onboarding-guide .ob-art i{position:absolute;inset:0;background:url("../assets/onboarding/bulma-guide-full.webp?v=1") center bottom/contain no-repeat;filter:drop-shadow(0 8px 14px rgba(0,0,0,.30));image-rendering:auto}
#onboarding-guide .ob-panel{position:relative;z-index:1;padding:16px 18px 15px;min-width:0;background:linear-gradient(180deg,rgba(7,12,20,.10),rgba(7,10,15,.025))}
#onboarding-guide header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#onboarding-guide header div{display:grid;gap:2px}
#onboarding-guide header small{font-size:9px;font-weight:900;letter-spacing:.14em;color:#6fcfff}
#onboarding-guide header b{font:900 18px "Trebuchet MS","Segoe UI",sans-serif;color:#ffe08a}
#onboarding-guide .ob-collapse{width:30px;height:30px;padding:0;border:1px solid rgba(223,179,106,.18);border-radius:8px;background:rgba(20,14,8,.22);color:#b9aa94}
#onboarding-guide .ob-progress-head{display:flex;align-items:center;gap:10px;margin:10px 0 8px}
#onboarding-guide .ob-step-count{font-size:9px;font-weight:900;color:#8197b0;white-space:nowrap;text-transform:uppercase}
#onboarding-guide .ob-flow-bar{height:4px;flex:1;border-radius:99px;background:rgba(111,163,215,.14);overflow:hidden}
#onboarding-guide .ob-flow-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffc84f,#ff8c29,#59c7ff);box-shadow:0 0 8px rgba(255,177,55,.35);transition:width .25s ease}
#onboarding-guide .ob-title{margin:5px 0 7px;font:900 20px/1.1 "Trebuchet MS","Segoe UI",sans-serif;color:#f5f8fd}
#onboarding-guide .ob-text{margin:0;color:#b8c6d8;font-size:12.5px;line-height:1.55}
#onboarding-guide .ob-objective{display:flex;gap:10px;align-items:center;margin-top:13px;padding:9px 10px;border:1px solid rgba(232,181,92,.17);border-radius:8px;background:linear-gradient(90deg,rgba(118,81,35,.16),rgba(20,43,63,.07),transparent)}
#onboarding-guide .ob-objective>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:1px solid rgba(255,202,90,.48);color:#ffd261;box-shadow:0 0 12px rgba(255,161,41,.12)}
#onboarding-guide .ob-objective div{display:grid;min-width:0}
#onboarding-guide .ob-objective small{font-size:8px;letter-spacing:.12em;color:#6fa9d6;font-weight:900}
#onboarding-guide .ob-objective b{font-size:11px;color:#eef5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#onboarding-guide .ob-objective em{font-style:normal;font-size:10px;color:#ffd477;margin-top:2px}
#onboarding-guide .ob-actions{display:flex;justify-content:space-between;gap:8px;margin-top:13px}
#onboarding-guide .ob-actions button{min-height:32px;border-radius:9px;font-size:11px;font-weight:800}
#onboarding-guide .ob-skip{background:transparent;border-color:rgba(118,148,184,.24);color:#8193a9}
#onboarding-guide .ob-next{margin-left:auto;min-width:112px;background:linear-gradient(180deg,#ffd45f,#e9a832);border-color:#e8ae39;color:#211706}
#onboarding-guide.waiting .ob-card{border-color:rgba(93,171,230,.45)}
#onboarding-guide .ob-mini{display:none;pointer-events:auto;width:92px;height:48px;margin-left:auto;border:1px solid rgba(232,181,92,.28);border-radius:999px;background:linear-gradient(180deg,rgba(28,20,10,.62),rgba(13,10,7,.18));box-shadow:0 6px 18px rgba(0,0,0,.16);align-items:center;gap:7px;padding:4px 10px 4px 5px;color:#ffe08a}
#onboarding-guide .ob-mini span{width:38px;height:38px;border-radius:50%;background:url("../assets/onboarding/bulma-guide-full.webp?v=1") center 4%/auto 430% no-repeat,radial-gradient(circle,rgba(59,185,242,.42),rgba(19,38,58,.24));border:1px solid rgba(114,204,255,.30)}
#onboarding-guide .ob-mini b{font-size:11px}
#onboarding-guide.minimized .ob-card{display:none}
#onboarding-guide.minimized .ob-mini{display:flex}
.ob-highlight{outline:1px solid rgba(255,202,80,.52);outline-offset:5px;filter:drop-shadow(0 0 5px rgba(255,201,78,.58)) drop-shadow(0 0 11px rgba(71,179,255,.32))!important;animation:obHighlightPulse 1.15s ease-in-out infinite}
@keyframes obHighlightPulse{0%,100%{outline-color:rgba(255,202,80,.34);filter:drop-shadow(0 0 4px rgba(255,201,78,.42)) drop-shadow(0 0 9px rgba(71,179,255,.24))}50%{outline-color:rgba(255,218,125,.88);filter:drop-shadow(0 0 7px rgba(255,201,78,.76)) drop-shadow(0 0 15px rgba(71,179,255,.44))}}
@media(max-width:760px){
 #onboarding-guide{left:10px;right:10px;bottom:108px;width:auto}
 #onboarding-guide .ob-card{grid-template-columns:92px minmax(0,1fr);min-height:190px}
 #onboarding-guide .ob-art i{background-size:contain;background-position:center bottom}
 #onboarding-guide .ob-panel{padding:12px}
 #onboarding-guide .ob-title{font-size:16px}
 #onboarding-guide .ob-text{font-size:11.5px}
 #onboarding-guide .ob-actions{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){.ob-highlight::after{animation:none}}


/* Bulma minimizada: widget flutuante arrastável */
#onboarding-guide.minimized{
  width:max-content!important;
  max-width:none!important;
}
#onboarding-guide.minimized .ob-mini{
  margin:0!important;
  touch-action:none!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
#onboarding-guide.dragging .ob-mini{
  cursor:grabbing!important;
  filter:brightness(1.08) drop-shadow(0 4px 10px rgba(0,0,0,.28));
}


/* Bulma: minimizar continua arrastável e agora pode ser fechada de verdade. */
#onboarding-guide .ob-head-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
#onboarding-guide .ob-close,
#onboarding-guide .ob-mini-close{
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(223,179,106,.22);
  background:rgba(20,14,8,.35);
  color:#c7b89e;
  font:800 11px/1 Arial,sans-serif;
  cursor:pointer;
  pointer-events:auto;
}
#onboarding-guide .ob-close{
  width:30px;
  height:30px;
  border-radius:8px;
}
#onboarding-guide .ob-close:hover,
#onboarding-guide .ob-mini-close:hover{
  color:#fff;
  border-color:rgba(233,92,92,.62);
  background:rgba(111,29,33,.42);
}
#onboarding-guide .ob-mini-close{display:none}
#onboarding-guide.minimized .ob-mini-close{
  position:absolute;
  display:grid;
  right:-7px;
  top:-7px;
  z-index:5;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(13,10,7,.92);
  box-shadow:0 3px 9px rgba(0,0,0,.42);
  touch-action:manipulation;
}
#onboarding-guide.minimized .ob-mini{
  position:relative;
  z-index:2;
}


/* Legibilidade premium: conteúdo sempre opaco e acima da HUD, inclusive no celular. */
#onboarding-guide:not(.minimized){
  z-index:2147481000;
  isolation:isolate;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.78));
}
#onboarding-guide .ob-card{
  background:#101927;
  border:2px solid #f1cb78;
  box-shadow:0 22px 66px rgba(0,0,0,.88),0 0 0 2px rgba(9,13,24,.8),inset 0 1px 0 rgba(255,235,165,.20);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#onboarding-guide .ob-art{
  background:radial-gradient(circle at 48% 22%,#314868 0%,#192b3e 52%,#101622 100%);
}
#onboarding-guide .ob-panel{
  background:linear-gradient(160deg,#16283c 0%,#0e1929 55%,#121722 100%);
  color:#fff;
}
#onboarding-guide .ob-title{
  color:#fff5d6;
  text-shadow:0 2px 3px #000,0 0 12px rgba(0,0,0,.75);
  font-size:21px;
  line-height:1.22;
}
#onboarding-guide .ob-text{
  color:#f5f8ff;
  font-size:14px;
  font-weight:600;
  line-height:1.65;
  text-shadow:0 1px 2px #000;
}
#onboarding-guide .ob-step-count{font-size:11px;color:#e3ebff}
#onboarding-guide header small{color:#86d9ff;font-size:10px}
#onboarding-guide header b{color:#ffdb85;font-size:20px}
#onboarding-guide .ob-objective{
  background:#263950;
  border:1px solid #e9bf6b;
  box-shadow:inset 0 0 16px rgba(0,0,0,.24);
}
#onboarding-guide .ob-objective small{color:#8bd9ff;font-size:10px}
#onboarding-guide .ob-objective b{
  color:#fff;
  font-size:13px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.4;
}
#onboarding-guide .ob-objective em{font-size:12px;font-weight:800;color:#ffe391}
#onboarding-guide .ob-skip{background:#27354a;color:#edf4ff;border:1px solid #849fbc}
#onboarding-guide .ob-close,#onboarding-guide .ob-collapse{background:#25344a;color:#fff;border-color:#859bb7}
#onboarding-guide .ob-mini{background:#142237;border:1px solid #eec778;box-shadow:0 8px 25px #000b}
@media(max-width:760px){
  #onboarding-guide:not(.minimized){
    left:8px;right:8px;top:8px;bottom:auto;
    width:auto;
    max-height:calc(100dvh - 16px);
  }
  #onboarding-guide .ob-card{
    grid-template-columns:clamp(65px,19vw,100px) minmax(0,1fr);
    min-height:0;
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
  }
  #onboarding-guide .ob-panel{padding:12px 13px 14px}
  #onboarding-guide .ob-title{font-size:18px;line-height:1.2}
  #onboarding-guide .ob-text{font-size:13px;line-height:1.5}
  #onboarding-guide .ob-objective b{font-size:12px}
  #onboarding-guide .ob-art i{background-position:center bottom}
}


/* Dica de combate: pulsação dourada forte no Beam e Blast, visível no mobile. */
#onboarding-guide~#hud [data-act="beam-slot"].ob-highlight,
[data-act="beam-slot"].ob-highlight,
[data-act="blast-slot"].ob-highlight{
  position:relative;
  outline:3px solid #ffdd56!important;
  outline-offset:3px;
  box-shadow:0 0 0 3px #633700,0 0 24px 8px #ffb400bf,inset 0 0 20px #ffd64c7d!important;
  animation:dboTutorialAttackGold .8s ease-in-out infinite!important;
  z-index:999;
}
@keyframes dboTutorialAttackGold{
  0%,100%{filter:brightness(1.1) drop-shadow(0 0 8px #ffb400);outline-color:#e2a21c}
  50%{filter:brightness(1.75) drop-shadow(0 0 24px #ffdf4b);outline-color:#fff6ab}
}

/* Zona de descarte da Bulma arrastável */
#ob-drop-zone{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2147480000;padding:17px 26px;border:2px dashed #e3b55e;border-radius:18px;background:#241b23e8;color:#ffe3ae;font:800 14px Arial,sans-serif;opacity:0;pointer-events:none;transition:opacity .16s,background .16s}
#ob-drop-zone.visible{opacity:1}
#ob-drop-zone.target{background:#a33335ef;border-color:#fff}