.onboarding-entry { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; padding:12px 16px; border:1px solid rgb(190 153 91 / 35%); border-radius:12px; background:linear-gradient(120deg,rgb(43 28 50 / 90%),rgb(18 13 26 / 95%)); }
.onboarding-entry small { display:block; margin-top:4px; color:var(--muted,#b1a5bc); }
.onboarding-entry-actions { display:flex; flex-wrap:wrap; gap:8px; }
.onboarding-entry.is-profile { flex-direction:column; align-items:stretch; }
.onboarding-guide { position:fixed; left:8px; top:8px; z-index:110; width:min(360px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; overscroll-behavior:contain; padding:14px; border:1px solid #8c7052; border-radius:16px; background:linear-gradient(145deg,#261a30,#100d18); box-shadow:0 12px 36px #0009; color:#f0e5da; font-size:14px; line-height:1.45; }
.onboarding-guide[hidden],.onboarding-highlight[hidden] { display:none; }
.onboarding-mentor { display:flex; align-items:center; gap:10px; }
.onboarding-mentor .identity-avatar { flex-shrink:0; border-radius:50%; overflow:hidden; outline:1px solid #b28b57; }
.onboarding-mentor > div { flex:1; min-width:0; overflow-wrap:anywhere; }
.onboarding-mentor strong,.onboarding-mentor small { display:block; }
.onboarding-mentor small { color:#baaabb; font-size:11px; }
.onboarding-fold { flex-shrink:0; width:32px; height:32px; border:1px solid #665367; border-radius:50%; color:inherit; background:#36283d; cursor:pointer; }
.onboarding-copy h2 { margin:12px 0 6px; font-size:17px; }
.onboarding-copy p { margin:0 0 10px; overflow-wrap:anywhere; }
.onboarding-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.onboarding-actions .primary-button,.onboarding-actions .secondary-button { min-height:34px; padding:7px 12px; font-size:12px; }
.onboarding-skip { border:0; background:transparent; color:#c9b6cb; padding:6px 0; cursor:pointer; font-size:11px; text-decoration:underline; }
.onboarding-error { color:#ffb3ac; }
.onboarding-placement-note,.onboarding-exit-tip { font-size:12px; color:#d1bc91; }
.onboarding-placement-note { margin:10px 0 0; }
.onboarding-placement-note[hidden] { display:none; }
.onboarding-placement-note button { background:none; border:0; color:inherit; text-decoration:underline; cursor:pointer; }
.onboarding-guide { display:flex; flex-direction:column; }
.onboarding-copy { min-height:0; overflow-y:auto; }
.onboarding-mentor,.onboarding-actions,.onboarding-placement-note { flex-shrink:0; }
.onboarding-term { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; vertical-align:middle; }
.onboarding-term .ui-icon { width:22px; height:22px; flex-shrink:0; object-fit:contain; }
.onboarding-focus { position:fixed; inset:0; z-index:108; pointer-events:none; }
.onboarding-focus[hidden] { display:none; }
@media(min-width:1200px) and (min-height:700px) {
  .onboarding-focus > div { position:fixed; pointer-events:none; background:rgb(0 0 0 / 7%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
  .onboarding-term .ui-icon { width:26px; height:26px; }
}
.onboarding-live { font-size:11px; color:#d1bc91; }
.onboarding-highlight { position:fixed; z-index:109; pointer-events:none; border:2px solid #d7b66d; border-radius:10px; box-shadow:0 0 12px #ddae5b66; }
.onboarding-guide.is-collapsed { width:min(270px,calc(100vw - 16px)); padding:8px; }
.onboarding-guide.is-battle { width:min(310px,calc(100vw - 16px)); padding:10px; font-size:12px; }
.onboarding-guide.is-battle .onboarding-copy h2 { font-size:14px; margin-top:6px; }
.onboarding-guide.is-battle .onboarding-mentor .identity-avatar { --avatar-size:32px !important; }
@media(max-width:760px),(max-height:600px) {
  .onboarding-entry { align-items:stretch; flex-direction:column; padding:10px 12px; }
  .onboarding-guide { font-size:13px; padding:10px; max-height:min(420px,calc(100dvh - 16px)); }
  .onboarding-guide.is-battle .onboarding-copy { max-height:88px; overflow:auto; }
  .onboarding-guide.is-battle .onboarding-mentor { gap:6px; }
  .onboarding-guide.is-battle .onboarding-actions { gap:6px; }
  .onboarding-guide.is-collapsed { width:210px; }
}
@media(min-width:1200px) and (min-height:700px) {
  .onboarding-guide:not(.is-battle):not(.is-collapsed) { width:clamp(420px,30vw,560px); padding:22px; font-size:17px; line-height:1.55; }
  .onboarding-guide:not(.is-battle):not(.is-collapsed) .onboarding-copy h2 { font-size:23px; }
  .onboarding-guide:not(.is-battle):not(.is-collapsed) .onboarding-mentor .identity-avatar { --avatar-size:64px !important; }
  .onboarding-guide:not(.is-battle):not(.is-collapsed) .onboarding-mentor small { font-size:13px; }
  .onboarding-guide:not(.is-battle):not(.is-collapsed) .onboarding-actions button { min-height:42px; font-size:14px; padding:9px 15px; }
}
@media(prefers-reduced-motion:no-preference) { .onboarding-highlight { transition:left .15s,top .15s,width .15s,height .15s; } }
.home-page:has(> .onboarding-entry) { grid-template-rows:auto auto minmax(0,1fr) auto; }
@media(max-width:760px) { .onboarding-entry:not(.is-profile) { flex-direction:row; align-items:center; gap:8px; margin:0; } .onboarding-entry:not(.is-profile) strong { font-size:12px; } .onboarding-entry:not(.is-profile) small { font-size:10px; } .onboarding-entry:not(.is-profile) button { padding:8px; font-size:11px; } }
/* Readable desktop dialogue; the compact battle variant keeps mobile controls free. */
.onboarding-guide.is-battle { width:min(340px,calc(100vw - 16px)); padding:12px; font-size:13px; }
.onboarding-guide.is-battle .onboarding-mentor .identity-avatar { --avatar-size:40px !important; }
.onboarding-guide.is-battle .onboarding-copy { max-height:150px; overflow:auto; }
.onboarding-guide.is-battle .onboarding-copy h2 { font-size:15px; margin:8px 0 5px; }
.onboarding-guide.is-battle .onboarding-live { display:none; }
@media(max-width:760px),(max-height:600px) {
  .onboarding-guide.is-battle { width:min(310px,calc(100vw - 16px)); padding:6px; }
  .onboarding-guide.is-battle .onboarding-mentor .identity-avatar { --avatar-size:24px !important; }
  .onboarding-guide.is-battle .onboarding-mentor strong { font-size:11px; }
  .onboarding-guide.is-battle .onboarding-mentor small { font-size:9px; }
  .onboarding-guide.is-battle .onboarding-fold { width:24px; height:24px; }
  .onboarding-guide.is-battle .onboarding-copy { max-height:58px; overflow:auto; }
  .onboarding-guide.is-battle .onboarding-copy h2 { font-size:13px; margin:3px 0 2px; }
  .onboarding-guide.is-battle .onboarding-copy p { font-size:11px; line-height:1.3; margin-bottom:3px; }
  .onboarding-guide.is-battle .onboarding-actions { gap:6px; }
  .onboarding-guide.is-battle .onboarding-actions button { min-height:24px; padding:3px 5px; font-size:10px; }
}