/* Echo guides real game controls through the transparent spotlight. */
#onboarding-bubble.tut-native {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 0 14px;
    padding: 0 !important;
    border: 1px solid rgba(0,243,255,.28);
    border-radius: 14px;
    background: linear-gradient(125deg, rgba(0,243,255,.055), transparent 65%), #07111a;
    box-shadow: inset 0 0 20px rgba(0,243,255,.025);
    overflow: visible !important;
    backdrop-filter: none;
    z-index: 2;
    order: 0;
    flex: 0 0 auto;
}
#onboarding-bubble.tut-native .onboarding-panel-body { padding: 14px; overflow: visible; }
#onboarding-bubble.tut-native::before { display: none; }
#onboarding-bubble.tut-native .tut-header {
    min-height: 42px;
    padding: 0;
    margin-bottom: 8px;
    border: 0;
    gap: 10px;
    flex-wrap: wrap;
}
#onboarding-bubble.tut-native.has-mascot .tut-header { margin-left: 52px; }
#onboarding-bubble.tut-native .tut-title { font-size: 11px; letter-spacing: .8px; text-shadow: none; }
#onboarding-bubble.tut-native .tut-step-idx { font-size: 11px; color: #a1b8c9; font-weight: 600; }
#onboarding-bubble.tut-native #tut-mascot {
    left: 14px; top: 12px; width: 40px; height: 44px; border-radius: 11px;
    box-shadow: none; background: #10313a;
}
#onboarding-bubble.tut-native .tut-mascot-image { transform: scale(2.3); transform-origin: 50% 6%; object-position: 50% 6%; }
#onboarding-bubble.tut-native #onboarding-objective,
#onboarding-bubble.tut-native #tut-dots-el,
#onboarding-bubble.tut-native #tut-arrow { display: none !important; }
#onboarding-bubble.tut-native #onboarding-text {
    min-height: 0; margin: 0; padding: 0;
    font-family: var(--sans); font-size: 13px; line-height: 1.55; color: #d3e3ed;
}
#onboarding-bubble.tut-native .onboarding-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; align-items: center;
}
#onboarding-bubble.tut-native #onboarding-skip {
    order: 2; padding: 8px 0; min-height: 40px; color: #a2bbcd;
    font-size: 11px; text-transform: none; width: auto; flex: 1;
}
#onboarding-bubble.tut-native #onboarding-next {
    flex: 1 1 150px; min-height: 44px; padding: 10px 12px;
    border-radius: 10px; font-size: 12px; box-shadow: none;
}
.tut-native-active .tut-action-target {
    animation: none !important;
    outline: 2px solid rgba(0,243,255,.65);
    outline-offset: 2px;
    filter: none;
}
.tut-single-unit .unit-picker,
.tut-single-unit .unit-picker-pages { display: none; }
.equip-item-card[type="button"] { width: 100%; text-align: left; font-family: inherit; color: inherit; }
.equip-item-card[type="button"]:disabled { cursor: not-allowed; }
.equip-item-card[type="button"]:focus-visible { outline: 2px solid #a4fbff; outline-offset: 3px; }
.tut-native-active .equip-item-card.tut-action-target { outline: none; border-color: rgba(0,243,255,.65); box-shadow: inset 0 0 0 1px rgba(0,243,255,.2); }
.tut-native-active .fleet-card-cta-row .btn-nexus-prime.tut-action-target {
    width: 100% !important; max-width: 100% !important; min-height: 44px;
    font-size: 11px !important; letter-spacing: .7px !important;
}
/* The outer arrow must not create scrollable overflow in cinematic panels. */
#onboarding-overlay #onboarding-bubble:not(.tut-native) { padding: 0 !important; overflow: visible !important; }
#onboarding-overlay #onboarding-bubble:not(.tut-native) .onboarding-panel-body {
    padding: 18px;
    max-height: min(430px, calc(var(--gt-vvh, 100dvh) - 28px));
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; touch-action: pan-y;
    scrollbar-width: thin; scrollbar-color: rgba(0,243,255,.4) transparent;
    border-radius: inherit;
}
#onboarding-overlay.tut-contact-scene #onboarding-bubble .onboarding-panel-body {
    max-height: min(270px, calc(var(--gt-vvh, 100dvh) * .43));
}
.journey-card .journey-steps { display: none; }
.journey-card { padding: 14px; }
.journey-card h2 { font-size: 15px; }
.journey-card p { font-size: 12px; line-height: 1.5; }
@media (max-width: 360px) {
    #onboarding-bubble.tut-native .onboarding-panel-body { padding: 12px; }
    #onboarding-bubble.tut-native .tut-header { gap: 5px; }
    #onboarding-bubble.tut-native #onboarding-next { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tut-action-target { animation: none !important; transition: none !important; }
}

/* Patch 40: a real transparent spotlight, with the guide outside the action. */
#onboarding-overlay.tut-spotlight-mode {
    position: fixed;
    inset: auto !important;
    left: var(--spot-vx, 0px) !important; top: var(--spot-vy, 0px) !important;
    width: var(--spot-vw, 100vw); height: var(--spot-vh, 100dvh);
    pointer-events: none;
    overflow: visible;
}
#onboarding-overlay.tut-spotlight-mode > svg { display: block !important; pointer-events: none; }
#onboarding-overlay.tut-spotlight-mode #tut-mask-dim {
    fill: rgba(0, 4, 10, .8) !important;
    opacity: 1 !important; backdrop-filter: none !important;
}
#onboarding-overlay.tut-spotlight-mode #tut-guide,
#onboarding-overlay.tut-spotlight-mode #tut-signal { display: none !important; }
#onboarding-overlay.tut-spotlight-mode #tut-target-ring {
    position: absolute; pointer-events: none;
    border: 2px solid #56f6ff; border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(0,243,255,.14), 0 0 20px rgba(0,243,255,.26);
    animation: none !important; transition: none !important;
    transform: none !important; background: transparent;
}
#onboarding-overlay.tut-spotlight-mode #tut-target-ring::before,
#onboarding-overlay.tut-spotlight-mode #tut-target-ring::after { display: none !important; animation: none !important; }
#onboarding-overlay.tut-spotlight-mode #onboarding-bubble.tut-spotlight {
    position: absolute !important;
    inset: auto !important;
    left: var(--spot-left, 12px) !important;
    top: var(--spot-top, 12px) !important;
    width: var(--spot-width, 350px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0; z-index: 3; pointer-events: auto;
    border-color: rgba(77,240,255,.65);
    background: linear-gradient(135deg, #0b2630, #060f17 72%);
    box-shadow: 0 16px 50px rgba(0,0,0,.65), inset 0 1px rgba(111,246,255,.09);
}
#onboarding-overlay.tut-spotlight-mode #onboarding-bubble .onboarding-panel-body {
    padding: 14px;
    max-height: var(--spot-body-max, calc(100dvh - 24px));
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; touch-action: pan-y;
    scrollbar-width: thin; scrollbar-color: rgba(0,243,255,.4) transparent;
    border-radius: inherit;
}
#onboarding-overlay.tut-spotlight-mode #onboarding-text { font-size: 14px; line-height: 1.5; }
#onboarding-overlay #onboarding-bubble.tut-spotlight::after {
    content: ''; position: absolute; width: 12px; height: 12px;
    background: #0a1e28; border-top: 1px solid rgba(77,240,255,.65); border-left: 1px solid rgba(77,240,255,.65);
    pointer-events: none;
}
#onboarding-bubble.tut-spotlight[data-side="below"]::after { left: calc(var(--spot-arrow-x) - 6px); top: -7px; transform: rotate(45deg); }
#onboarding-bubble.tut-spotlight[data-side="above"]::after { left: calc(var(--spot-arrow-x) - 6px); bottom: -7px; transform: rotate(225deg); }
#onboarding-bubble.tut-spotlight[data-side="right"]::after { left: -7px; top: calc(var(--spot-arrow-y) - 6px); transform: rotate(-45deg); }
#onboarding-bubble.tut-spotlight[data-side="left"]::after { right: -7px; top: calc(var(--spot-arrow-y) - 6px); transform: rotate(135deg); }
#onboarding-overlay #onboarding-bubble.tut-spotlight[data-side="center"]::after { display: none; }
@media (max-height: 440px) {
    #onboarding-bubble.tut-spotlight #tut-mascot { display: none; }
    #onboarding-bubble.tut-spotlight.has-mascot .tut-header { margin-left: 0; min-height: 22px; }
    #onboarding-overlay.tut-spotlight-mode #onboarding-bubble .onboarding-panel-body { padding: 10px 12px; }
}