/* In-flow hints: no backdrop, fixed layer, scroll lock or inaccessible target. */
.onboarding-note {
  position:relative; display:grid; gap:12px; min-width:0; max-width:100%;
  margin:0 0 14px; padding:16px; border:1px solid #839c60; border-left:4px solid #c5ed8f;
  border-radius:14px; background:#23312b; color:#f3f6ea; text-align:left;
  box-shadow:0 4px 16px #0002;
}
.onboarding-label { display:block; color:#c2dea2; font-size:11px; font-weight:800; letter-spacing:.08em; margin-bottom:7px; }
.onboarding-note h2 { margin:0 0 7px; color:#f3f6ea; font-size:20px; line-height:1.2; letter-spacing:-.3px; text-wrap:pretty; }
.onboarding-note p { margin:0; color:#dce5d7; font-size:15px; line-height:1.45; text-wrap:pretty; }
.onboarding-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.onboarding-actions button { min-height:44px; padding:9px 13px; border:1px solid #738566; border-radius:9px; background:#d1edaa; color:#1b281d; font-size:14px; font-weight:750; }
.onboarding-actions button+button { color:#d9e2d4; background:transparent; border-color:transparent; font-weight:500; }
.onboarding-actions button:focus-visible { outline:3px solid #ecffce; outline-offset:3px; }
.onboarding-target { outline:2px solid #bfdc8a; outline-offset:4px; }
.workshop-action.onboarding-target,.battle-actions.onboarding-target { border-radius:16px; }
.battle-actions.onboarding-target { outline:none; }
.onboarding-note + .onboarding-target { scroll-margin-top:20px; }
.onboarding-target + .onboarding-note { margin-top:14px; }
.battle-actions > .onboarding-note { width:100%; }
@media(max-width:420px) {
  .onboarding-note { padding:13px; gap:9px; border-radius:12px; }
  .onboarding-note h2 { font-size:18px; }
  .onboarding-note p { font-size:15px; }
  .onboarding-actions { gap:4px; }
}