/* Skills panel and skill cards */

#skills_panel {
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    padding: 0 10px 0 0;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    background-color: rgb(221, 210, 210);
    border-radius: 0 10px 0 0;
}

/* Individual skill card with compact design that expands on hover */
.skill_card {
    box-sizing: border-box;
    height: 96%;
    width: 22%;
    border: 4px solid black;
    border-top: 5px solid black;
    transition: all 0.2s ease;
    border-radius: 15px;
    position: relative;
    font-family: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-optical-sizing: auto;
    font-style: normal;
    z-index: 10000;
}

/* Shared expanded state for both hover and manual modes */
.skills-panel-hover-enabled .skill_card:hover,
.skill_card-expanded {
    height: 300%;
    width: 30%;
    transition: all 0.2s ease;
    box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

/* Active state styling */
.skill_card.active {
    border: 3px solid yellow;
    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.5);
}

/* Skill image section */
.skill_image_place {
    box-sizing: border-box;
    height: 86%;
    width: 100%;
    transition: all 0.2s ease;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background-color: rgb(59, 62, 71);
}

.skills-panel-hover-enabled .skill_card:hover .skill_image_place,
.skill_card-expanded .skill_image_place {
    height: 46%;
    transition: all 0.2s ease;
}

.skill_image_place .skill_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-sizing: border-box;
    border-bottom: 3px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

/* Skill name section */
.skill_name {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 14%;
    width: 100%;
    font-size: 1em;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
    transition: all 0.2s ease;
    background-color: rgb(59, 62, 71);
    color: #FADA7A;
}

.skills-panel-hover-enabled .skill_card:hover .skill_name,
.skill_card-expanded .skill_name {
    height: 6%;
    font-size: 1.2em;
    transition: all 0.2s ease;
    border-radius: 0 0 0 0;
}

.skill_name_text {
    text-align: center;
    flex: 1;
}

/* Skill description section (hidden by default) */
.skill_description {
    box-sizing: border-box;
    height: 0%;
    width: 100%;
    font-size: 1em;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: rgb(247, 247, 197);
    padding: 0;
}

.skills-panel-hover-enabled .skill_card:hover .skill_description,
.skill_card-expanded .skill_description {
    height: 43%;
    transition: all 0.2s ease;
    border-radius: 0;
}

.skill_description_text {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 20% 0 20% 0;
    padding: 3% 10px;
    white-space: pre-line;
    overflow: hidden;
    overflow-y: auto;
    border-bottom: 3px solid black;
    border-top: 3px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    text-indent: 1em;
}

/* Card footer */
.card_footer {
    height: 0%;
    width: 100%;
    transition: all 0.2s ease;
    border-radius: 0 0 10px 10px;
    background-color: rgb(78, 76, 76);
}

.skills-panel-hover-enabled .skill_card:hover .card_footer,
.skill_card-expanded .card_footer {
    height: 5%;
    transition: all 0.2s ease;
}

/* Energy indicator (positioned absolutely) */
.energy_place {
    position: absolute;
    top: -10%;
    left: -7%;
    width: 20%;
    height: 50%;
    transition: all 0.2s ease;
    z-index: 5;
}

.energy_place img {
    width: 100%;
    height: 100%;
    z-index: 6;
    position: inherit;
}

.skills-panel-hover-enabled .skill_card:hover .energy_place,
.skill_card-expanded .energy_place {
    top: -6%;
    left: -8%;
    height: 22%;
    transition: all 0.2s ease;
}

.energy_place .energy_value {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    left: 17%;
    top: 32%;
    transition: all 0.2s ease;
    z-index: 7;
}

.energy_place .energy_on_card_1,
.energy_place .energy_on_card_2,
.energy_place .energy_on_card_3,
.energy_place .energy_on_card_4,
.energy_place .energy_on_card_5 {
    position: absolute;
    background-color: blue;
    z-index: 5;
}

.energy_on_card_1 {
    border-radius: 50%;
    width: 66%;
    height: 50%;
    top: 30%;
    left: 4%;
}

.energy_on_card_2 {
    border-radius: 50%;
    width: 36%;
    height: 45%;
    top: 40%;
    left: 54%;
}

.energy_on_card_3 {
    border-radius: 50%;
    width: 22%;
    height: 14%;
    bottom: 7%;
    left: 50%;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 100%;
}

.energy_on_card_4 {
    border-radius: 50%;
    width: 42%;
    height: 26%;
    top: 14%;
    left: 22%;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 300%;
    border-bottom-right-radius: 200%;
    border-top-right-radius: 50%;
}

.energy_on_card_5 {
    border-radius: 50%;
    width: 19%;
    height: 14%;
    top: 8%;
    left: 60%;
    border-top-left-radius: 300%;
    border-bottom-right-radius: 300%;
    border-bottom-left-radius: 10%;
}

.skills-panel-hover-enabled .skill_card:hover .energy_place .energy_value,
.skill_card-expanded .energy_place .energy_value {
    font-size: 1.5em;
    transition: all 0.2s ease;
}

/* Cooldown indicator (sandclock - positioned absolutely) */
.sandclock_place {
    position: absolute;
    top: -4%;
    right: calc(-10.7%);
    width: 20%;
    height: 50%;
    transition: all 0.2s ease;
    z-index: 5;
}

.sandclock_place img {
    width: 100%;
    height: 100%;
    z-index: 6;
    position: inherit;
}

.skills-panel-hover-enabled .skill_card:hover .sandclock_place,
.skill_card-expanded .sandclock_place {
    top: -1.4%;
    height: 22%;
    transition: all 0.2s ease;
}

.sandclock_place .sandclock_1 {
    background-color: blue;
    position: absolute;
    width: 96%;
    height: 44%;
    top: 8%;
    left: 2%;
    z-index: 5;
    /* clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
    /* reverted: */
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.sandclock_place .sandclock_2 {
    background-color: blue;
    position: absolute;
    width: 92%;
    height: 25%;
    top: 42%;
    left: 3%;
    z-index: 5;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.sandclock_place .sandclock_3 {
    background-color: blue;
    position: absolute;
    width: 83%;
    height: 25%;
    top: 62%;
    left: 8%;
    z-index: 5;
}

.sandclock_place .sandclock_4 {
    background-color: blue;
    position: absolute;
    width: 92%;
    height: 12%;
    bottom: 5%;
    left: 3%;
    z-index: 5;

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.current_cooldown, .cooldown {
    position: absolute;
    width: 30%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    left: 35%;
    transition: all 0.2s ease;
    z-index: 7;
}

.current_cooldown {
    top: -3%;
}

.cooldown {
    top: 48%;
}

.skills-panel-hover-enabled .skill_card:hover .current_cooldown, 
.skills-panel-hover-enabled .skill_card:hover .cooldown,
.skill_card-expanded .current_cooldown,
.skill_card-expanded .cooldown {
    font-size: 1.5em;
    transition: all 0.2s ease;
}


/* Coins pouch (positioned absolutely) */
.coins_pouch_place {
    position: absolute;
    bottom: -30%;
    right: -7%;
    width: 20%;
    height: 30%;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.coins_pouch_place img {
    width: 100%;
    height: 100%;
    z-index: 6;
    position: inherit;
}

.skills-panel-hover-enabled .skill_card:hover .coins_pouch_place,
.skill_card-expanded .coins_pouch_place {
    bottom: -0.5%;
    right: -7%;
    height: 16%;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.2s ease, opacity 0.3s ease;
}

.skills-panel-hover-enabled .skill_card:hover .coins_pouch_place:hover,
.skill_card-expanded .coins_pouch_place:hover {
    width: 24%;
    height: 20%;
}

.coins_pouch_place .pouch_1,
.coins_pouch_place .pouch_2 {
    position: absolute;
    background-color: rgb(59, 62, 71);
    z-index: 5;
}

.coins_pouch_place .pouch_1 {
    border-radius: 50%;
    width: 83%;
    height: 79%;
    top: 18%;
    left: 7%;
    border-bottom-right-radius: 33%;
    border-top-left-radius: 90%;
    border-top-right-radius: 84%;
}

.coins_pouch_place .pouch_2 {
    border-radius: 10%;
    width: 32%;
    height: 19%;
    top: 3%;
    left: 32%;
}

.coins_amount {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    left: 23%;
    top: 35%;
    transition: all 0.2s ease;
    z-index: 7;
}

.skills-panel-hover-enabled .skill_card:hover .coins_amount,
.skill_card-expanded .coins_amount {
    font-size: 1.5em;
    transition: all 0.2s ease;
}

/* Expand/collapse arrow for manual mode */
.card-expand-arrow {
    position: absolute;
    bottom: 0.5%;
    left: 5%;
    width: 2em;
    height: 2em;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10002;
    pointer-events: none;
}

.card-expand-arrow::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid white;
    transition: transform 0.2s ease;
}

.card-expand-arrow.arrow-down::before {
    transform: rotate(180deg);
}

/* Show arrow on hover only when hover mode is disabled */
.skills-panel-hover-disabled .skill_card:hover .card-expand-arrow {
    opacity: 1;
    pointer-events: auto;
}

/* Keep arrow visible when card is expanded */
.skill_card-expanded .card-expand-arrow {
    opacity: 1;
    pointer-events: auto;
}

.card-expand-arrow:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}


/* Smooth scrollbar for description on hover */
.skill_description::-webkit-scrollbar {
    width: 6px;
}

.skill_description::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.skill_description::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.skill_description::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}


.before_skill_name {
    width: 11%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.after_skill_name {
    width: 11%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skill_params {
    height: 10%;
    width: 100%;
    display: flex;
    background-color: rgb(59, 62, 71);
}

.skill_param {
    width: 33%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

/* Skill Cast Animation */
.skill-cast-container {
    position: absolute;
    top: 25vh;
    width: 12vw;
    height: auto;
    z-index: 100;
    pointer-events: none;
}

.skill-cast-container.right {
    right: 3vw;
}

.skill-cast-container.left {
    left: 3vw;
}

.skill-cast-container .skill_panel {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px 5px rgba(255, 255, 100, 0.7);
}

@keyframes skill-cast-appear-right {
    from {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }
}

@keyframes skill-cast-disappear-right {
    from {
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }
    to {
        transform: translateX(100%) scale(0.8);
        opacity: 0;
    }
}

@keyframes skill-cast-appear-left {
    from {
        transform: translateX(-100%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }
}

@keyframes skill-cast-disappear-left {
    from {
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }
    to {
        transform: translateX(-100%) scale(0.8);
        opacity: 0;
    }
}

.skill-cast-appearing-right {
    animation: skill-cast-appear-right 0.3s ease-out forwards;
}

.skill-cast-disappearing-right {
    animation: skill-cast-disappear-right 0.4s ease-in forwards;
}

.skill-cast-appearing-left {
    animation: skill-cast-appear-left 0.3s ease-out forwards;
}

.skill-cast-disappearing-left {
    animation: skill-cast-disappear-left 0.4s ease-in forwards;
}