/* ==========================================================================
   Tarot Spread Styles
   ========================================================================== */

/* Page Layout
   ========================================================================== */

.spread-page {
    overflow-y: scroll;
    font-family: monospace;
}

.spread-container {
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 25px;
}

/* Header
   ========================================================================== */

.spread-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spread-header h1 {
    order: 2;
    flex: 2;
    margin: 0.2em;
    text-align: center;
    background: rgb(97, 197, 151);
    color: black;
    border-radius: 15px;
}

.spread-header a {
    flex: 1;
    padding: 15px;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.spread-header a:hover {
    background: rgb(2, 2, 39);
}

.reset-spread-button {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.spread-header a:hover .reset-spread-button {
    transform: rotate(-120deg);
}

.spread-header a:has(.reset-spread-button) {
    order: 3;
}

@media (max-width: 400px) {
    .spread-header h1 {
        order: 3;
    }

    .spread-header a {
        margin: 1.34em 0 0 0;
    }

    .spread-header a:has(.reset-spread-button) {
        order: 2;
    }
}

/* Card Slot
   ========================================================================== */

.spread-card-slot {
    display: flex;
    flex-direction: column;
    flex: 1 0 250px;
}

.slot-label {
    text-align: center;
}

.slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.slot-filled {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.slot-filled .spread-card {
    width: 100%;
    min-width: 0;
}

/* Card Action Button Container
   ========================================================================== */

.card-action-button {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: center;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 25/44;
    margin-bottom: 1em;
    border: 3px double rgb(75, 89, 193);
    border-radius: 15px;
}

.card-action-default,
.card-action-search {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    overflow: hidden;
}

/* Draw and Search Buttons
   ========================================================================== */

.draw-card-button,
.search-card-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    cursor: pointer;
}

.draw-card-button {
    flex: 2;
}

.search-card-button {
    flex: 1;
}

.draw-card-button svg {
    width: 30%;
    height: 30%;
}

.search-card-button svg {
    width: 20%;
    height: auto;
}

.draw-card-button:hover,
.search-card-button:hover {
    background: rgb(2, 2, 39);
}

.draw-card-button:hover svg,
.search-card-button:hover svg,
.search-draw-button:hover svg {
    animation: twinkle 3s linear infinite;
}

/* Search Header
   ========================================================================== */

.search-header {
    display: flex;
    align-items: stretch;
}

.search-back-button,
.search-draw-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 15px;
    cursor: pointer;
}

.search-back-button svg,
.search-draw-button svg {
    width: 20px;
    height: 20px;
}

.search-back-button:hover,
.search-draw-button:hover {
    background: rgb(2, 2, 39);
}

.spread-header a:hover .icon-back path,
.search-back-button:hover .icon-back path {
    fill: rgb(104, 116, 204);
}

/* Suit List
   ========================================================================== */

.suit-list {
    display: flex;
    flex-direction: column;
    transition: flex 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}

.suit-list:not(.collapsed) {
    flex: 1;
    justify-content: space-around;
    padding: 0 0 10px 0;
    gap: 5px;
}

.suit-list.collapsed {
    flex: 0 0 auto;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Suit Buttons
   ========================================================================== */

.suit-button {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-height: 50px;
    padding: 5px 15px;
    overflow: hidden;
    border: none;
    border-radius: 15px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: flex 0.3s ease, opacity 0.3s ease, padding 0.3s ease, max-height 0.3s ease;
}

.suit-button:hover {
    background: rgb(2, 2, 39);
}

.suit-button.active {
    flex: 0 0 auto;
    background: rgb(57, 20, 116);
    cursor: default;
    pointer-events: none;
}

.suit-button.hidden {
    flex: 0 0 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.suit-button svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.suit-button span {
    font-size: 0.9em;
}

/* Card List
   ========================================================================== */

.card-list {
    display: flex;
    flex-direction: column;
    flex: 0;
    justify-content: flex-start;
    padding-top: 0;
    overflow: hidden;
    transition: flex 0.3s ease, padding 0.3s ease;
}

.card-list.expanded {
    flex: 1 1 auto;
    align-self: stretch;
    padding-top: 5px;
    overflow-y: auto;
}

.card-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 0.85em;
    cursor: pointer;
}

.card-list-item:hover {
    background: rgb(2, 2, 39);
}

.card-list-item.placed {
    opacity: 0.5;
}

.card-list-item.highlighted {
    background: rgb(2, 2, 39);
}

.card-list-item .card-list-name {
    flex: 1;
}

.card-list-item .reverse-toggle {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.card-list-item .reverse-toggle:hover {
    background: rgb(250, 197, 52);
    fill: rgb(57, 20, 116);
    opacity: 1;
}

/* Card Image
   ========================================================================== */

.spread-card-slot .card-image {
    align-self: center;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 25/44;
    border-radius: 15px;
    object-fit: cover;
    transition: all 0.7s;
}

/* Card Name Row
   ========================================================================== */

.card-name-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 4px 10px;
    border-radius: 15px;
    background: rgb(75, 89, 193);
    transition: background 0.2s ease;
    min-height: 76px;
}

.card-name-row .spread-elements {
    justify-self: start;
    margin-left: 5px;
}

.card-name-row .card-name {
    justify-self: center;
    margin: 0;
    text-align: center;
}

.card-name-row .edit-card-btn {
    justify-self: end;
    width: 18px;
    height: 18px;
    opacity: 0;
    stroke: black;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.card-name-row:hover .edit-card-btn {
    opacity: 0.5;
}

.card-name-row .edit-card-btn:hover {
    opacity: 1;
}

/* Card Elements
   ========================================================================== */

.spread-elements {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.element-wrapper {
    display: flex;
}

.element-wrapper .element-icon {
    stroke: rgb(157, 166, 233);
}

/* Keywords
   ========================================================================== */

.spread-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.keyword-badge {
    padding: 5px;
    background: rgb(154, 226, 72);
    color: black;
}

/* Animations
   ========================================================================== */

@keyframes twinkle {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* Card Draw Animation */

.card-image.drawing {
    animation: card-draw 0.5s ease-out;
}

.card-image.drawing.card-reversed {
    animation: card-draw-reversed 0.5s ease-out;
}

@keyframes card-draw {
    from {
        transform: scale(3) rotate(30deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes card-draw-reversed {
    from {
        transform: scale(3) rotate(210deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

/* Card Reset Animation */

.card-image.resetting {
    animation: card-reset 0.5s ease-in forwards;
}

.card-image.resetting.card-reversed {
    animation: card-reset-reversed 0.5s ease-in forwards;
}

@keyframes card-reset {
    from {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: scale(3) rotate(-30deg);
        opacity: 0;
    }
}

@keyframes card-reset-reversed {
    from {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }

    to {
        transform: scale(3) rotate(150deg);
        opacity: 0;
    }
}