.tutorial-arrow {
    position: fixed;
    font-size: 2.5vh;
    color: #c8d264;
    text-shadow: 0 0 6px #c8d264, 0 0 12px #c8d264;
    animation: tutorialArrowBounce 0.8s infinite ease-in-out;
    z-index: 999;
    pointer-events: none;
}

.tutorial-arrow-info {
    position: absolute;
    left: 1.8vh;
    top: 4vh;
    z-index: 1001;
}

.tutorial-arrow-chat {
    position: absolute;
    left: 6.3vh;
    top: 4vh;
}

.tutorial-arrow-map {
    margin-top: 5.9vh;
    margin-left: 0vh;
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

.tutorial-arrow-skill {
    margin-top: 5.9vh;
    margin-left: 5.5vh;
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

.tutorial-arrow-stat {
    margin-top: 10.4vh;
    margin-left: 5.5vh;
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

.tutorial-arrow-tissue {
    margin-top: 10.4vh;
    margin-left: 0vh;
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

@keyframes tutorialArrowBounceRight {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(0.5vh); opacity: 1; }
}

@keyframes tutorialArrowBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-0.5vh); opacity: 1; }
}

.player-action.tutorial-glow::after {
    content: "\25B2";
    position: absolute;
    bottom: -3.8vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2vh;
    color: #c8d264;
    text-shadow: 0 0 6px #c8d264, 0 0 12px #c8d264;
    animation: tutorialArrowBounceUp 0.8s infinite ease-in-out;
    pointer-events: none;
    z-index: 999;
}

@keyframes tutorialArrowBounceUp {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50% { transform: translateX(-50%) translateY(-0.5vh); opacity: 1; }
}

.skill-panel {
    position: relative;
}

.tutorial-arrow-lvlup {
    position: absolute;
    top: 6.8vh;
    left: 32.4vh;
    animation: tutorialArrowBounce 0.8s infinite ease-in-out;
}

.tutorial-arrow-exit {
    margin-left: 13.5vh;
    margin-top: -8.5vh;
}

.tutorial-arrow-exit-3 {
    margin-left: 14.5vh;
    margin-top: -8.5vh;
}

.tutorial-arrow-material {
    position: absolute;
    left: 13vh;
    margin-top: -3.2vh;
    top: 50%;
    transform: translateY(-50%);
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

.tutorial-arrow-transit {
    margin-top: 8.5vh;
    margin-left: 8.7vh;
}

.tutorial-arrow-quest {
    margin-top: 30.6vh;
    margin-left: 36vh;
    animation: tutorialArrowBounceRight 0.8s infinite ease-in-out;
}

.directive-accordion {
    position: fixed;
    bottom: calc(100vh - 34vh);
    margin-left: -26.5vh;
    width: 20vh;
    max-height: 29vh;
    overflow-y: auto;
    z-index: 90;
    pointer-events: auto;
    font-family: monospace;
}

.directive-accordion.hidden {
    display: none;
}

.directive-heading {
    display: flex;
    align-items: center;
    gap: 0.5vh;
    padding: 0.3vh 0.8vh;
    margin-bottom: 0.3vh;
    font-size: 1.1vh;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15vh;
    color: #c8d264;
    opacity: 0.6;
    cursor: pointer;
    font-family: monospace;
}

.directive-heading:hover {
    opacity: 0.9;
}

.directive-heading-chevron {
    font-size: 0.9vh;
}

.directive-row {
    margin-bottom: 0.3vh;
}

.directive-header {
    display: flex;
    align-items: center;
    gap: 0.5vh;
    padding: 0.4vh 0.8vh;
    background: rgba(10, 14, 10, 0.75);
    border: 1px solid rgba(200, 210, 100, 0.3);
    border-radius: 0.3vh;
    cursor: pointer;
    font-size: 1.2vh;
    color: #c8d264;
    text-shadow: 0 0 4px rgba(200, 210, 100, 0.4);
    transition: background 0.2s;
}

.directive-header:active {
    background: rgba(20, 28, 20, 0.85);
}

.directive-header.expanded,
.directive-header.has-subtitle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(200, 210, 100, 0.15);
}

.directive-chevron {
    font-size: 1vh;
    width: 1.2vh;
    flex-shrink: 0;
}

.directive-title {
    flex-shrink: 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15vh;
}

.directive-progress {
    flex-shrink: 0;
    opacity: 0.6;
    font-size: 1.2vh;
}

.directive-active-mission {
    padding: 0.3vh 0.8vh 0.4vh 0.8vh;
    background: rgba(10, 14, 10, 0.7);
    border: 1px solid rgba(200, 210, 100, 0.15);
    border-top: none;
    border-bottom-left-radius: 0.3vh;
    border-bottom-right-radius: 0.3vh;
    color: #c8d264;
    font-size: 1.2vh;
    text-shadow: 0 0 6px rgba(200, 210, 100, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.directive-missions {
    background: rgba(10, 14, 10, 0.7);
    border: 1px solid rgba(200, 210, 100, 0.3);
    border-top: none;
    border-bottom-left-radius: 0.3vh;
    border-bottom-right-radius: 0.3vh;
    padding: 0.3vh 0;
}

.directive-mission {
    display: flex;
    align-items: center;
    gap: 0.5vh;
    padding: 0.3vh 0.8vh 0.3vh 0.8vh;
    font-size: 1.2vh;
    color: #8f9a48;
    cursor: pointer;
    transition: color 0.15s;
}

.directive-mission:active {
    color: #c8d264;
}

.directive-mission.active {
    color: #c8d264;
    text-shadow: 0 0 6px rgba(200, 210, 100, 0.5);
}

.directive-mission.active .mission-status {
    animation: missionPulse 1.5s infinite ease-in-out;
}

.directive-mission.done {
    color: #6b7a35;
    cursor: default;
    opacity: 0.6;
}

.mission-status {
    width: 1.4vh;
    flex-shrink: 0;
    text-align: center;
    font-size: 1vh;
}

.mission-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes missionPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}