/* Tutorial do piloto — destaque sem escurecer o HUD, o inventário ou a Estação Atlas. */
#btnTutorial.hud-btn {
    padding: 0;
    color: #9ef1ff;
    background: linear-gradient(150deg, rgba(7, 63, 80, .95), rgba(4, 20, 36, .95));
    border-color: rgba(84, 209, 244, .6);
    font: 900 23px 'Orbitron', system-ui, sans-serif;
    flex-shrink: 0;
}
#btnTutorial.hud-btn:hover { border-color: #adfaff; box-shadow: 0 0 18px rgba(77, 220, 253, .2); }

.so-guide { position: fixed; inset: 0; z-index: 3000; pointer-events: none; font-family: 'Rajdhani', Arial, sans-serif; }
.so-guide.hidden { display: none !important; }
.so-guide-shield { position: absolute; inset: 0; pointer-events: auto; }
/* A camada bloqueia cliques no mundo, mas não acrescenta película escura.
   Escurecer o shield E o box-shadow do foco deixava até os botões ilegíveis. */
.so-guide-shield,
.so-guide[data-has-target="false"] .so-guide-shield,
.so-guide[data-overlay="dim"] .so-guide-shield,
.so-guide[data-overlay="clear"] .so-guide-shield { background: transparent; }
.so-guide-spotlight {
    position: fixed; z-index: 1; display: none; pointer-events: none;
    border: 3px solid #76f0ff; border-radius: 12px;
    box-shadow: inset 0 0 10px rgba(82, 219, 247, .18),
        0 0 0 3px rgba(91, 241, 255, .25),
        0 0 24px 4px rgba(68, 223, 255, .64);
}
/* A área destacada permanece em suas cores originais. A proteção contra
   comandos involuntários continua na shield transparente. */
.so-guide-card {
    position: fixed; z-index: 2; width: min(395px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px); overflow-y: auto;
    pointer-events: auto; padding: 23px 24px 17px;
    border: 1px solid rgba(85, 212, 247, .7); border-radius: 18px;
    background: linear-gradient(153deg, rgba(13, 42, 62, .99), rgba(2, 11, 23, .995) 75%);
    box-shadow: 0 24px 78px rgba(0, 0, 0, .82), inset 0 1px rgba(208, 251, 255, .07), 0 0 28px rgba(28, 179, 234, .15);
    color: #e9f8ff; box-sizing: border-box; user-select: text;
}
.so-guide-heading { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.so-guide-brand { color: #82eaff; font: 800 10px 'Orbitron', system-ui, sans-serif; letter-spacing: .6px; }
.so-guide-brand span { color: #7198ae; }
.so-guide-step { color: #7fc7dd; font: 700 12px 'Rajdhani', sans-serif; white-space: nowrap; }
.so-guide-progress { width: 100%; height: 4px; margin: 13px 0 20px; overflow: hidden; background: rgba(126, 207, 241, .15); border-radius: 8px; }
.so-guide-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17bcdb, #9fffee); transition: width .2s ease-out; }
.so-guide-card h2 { margin: 0 0 11px; font: 800 clamp(16px, 3vw, 20px)/1.35 'Orbitron', system-ui, sans-serif; letter-spacing: .2px; color: #f1fdff; }
.so-guide-card p { margin: 0; }
#soGuideDescription { font: 600 17px/1.38 'Rajdhani', Arial, sans-serif; color: #c0d8e6; }
.so-guide-tip { display: flex; gap: 9px; margin: 18px 0 20px; padding: 10px 12px; border-radius: 9px; background: rgba(53, 198, 234, .075); border: 1px solid rgba(67, 179, 220, .2); color: #9cdee9; font: 600 14px/1.3 'Rajdhani', Arial, sans-serif; }
.so-guide-tip > span:first-child { color: #60edda; font-size: 17px; }

.so-guide-helper { margin: -6px 0 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(86, 209, 243, .22); background: rgba(15, 36, 56, .55); }
.so-guide-helper.hidden { display: none !important; }
.so-guide-helper button { width: 100%; cursor: pointer; border: 1px solid rgba(109, 226, 255, .42); border-radius: 9px; padding: 10px 12px; color: #061724; background: linear-gradient(125deg, rgba(96, 233, 255, .96), rgba(173, 255, 243, .94)); font: 800 10px 'Orbitron', system-ui, sans-serif; letter-spacing: .4px; }
.so-guide-helper button:hover { filter: brightness(1.05); }
.so-guide-helper button:focus-visible { outline: 2px solid #f3c16e; outline-offset: 2px; }
.so-guide-helper p { margin: 9px 0 0; color: #8fbfd4; font: 600 13px/1.3 'Rajdhani', Arial, sans-serif; }
.so-guide-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.so-guide-actions button { cursor: pointer; border: 1px solid rgba(84, 198, 229, .38); border-radius: 9px; padding: 10px 12px; color: #c5e9f5; background: rgba(31, 72, 96, .34); font: 800 10px 'Orbitron', system-ui, sans-serif; letter-spacing: .3px; white-space: nowrap; }
.so-guide-actions button:focus-visible { outline: 2px solid #f3c16e; outline-offset: 2px; }
.so-guide-actions button:disabled { opacity: .3; cursor: default; }
.so-guide-actions button:hover:not(:disabled) { border-color: #8beaff; background: rgba(60, 144, 169, .3); }
.so-guide-nav { display: flex; gap: 8px; }
#soGuideNext { border-color: #5fdaec; color: #071d29; background: linear-gradient(125deg, #67e9ff, #a8fff0); }
#soGuideNext:hover { background: #dbffff; color: #041d28; }
#soGuideSkip { color: #96b9ca; border-color: transparent; background: transparent; padding-left: 0; }
.so-guide-keyhint { margin-top: 14px !important; text-align: right; color: #6892a6; font: 600 12px 'Rajdhani', Arial, sans-serif; }
@media (max-width: 650px) {
    .so-guide-card { padding: 15px 16px 12px; border-radius: 14px; }
    .so-guide-progress { margin: 9px 0 11px; }
    .so-guide-card h2 { margin-bottom: 8px; }
    #soGuideDescription { font-size: 15px; line-height: 1.27; }
    .so-guide-tip { margin: 10px 0 12px; padding: 8px; font-size: 13px; }
    .so-guide-helper { margin: -2px 0 12px; padding: 8px; }
    .so-guide-helper button { padding: 9px 8px; font-size: 9px; }
    .so-guide-helper p { font-size: 12px; }
    .so-guide-actions button { padding: 9px 8px; font-size: 9px; }
    .so-guide-keyhint { margin-top: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { .so-guide-progress > span { transition: none; } }


#btnShop.hud-btn.tutorial-pulse {
    animation: soTutorialPulse 1.15s ease-in-out infinite;
    border-color: rgba(148, 245, 255, .92);
    box-shadow: 0 0 0 1px rgba(167, 246, 255, .28), 0 0 18px rgba(81, 228, 255, .28), 0 0 30px rgba(81, 228, 255, .15);
}
#btnShop.hud-btn.tutorial-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 1px solid rgba(148, 245, 255, .5);
    animation: soTutorialRing 1.15s ease-out infinite;
    pointer-events: none;
}
@keyframes soTutorialPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes soTutorialRing {
    0% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.22); }
}