/* The tackle box's compartments, one per minigame; one can expand (is-expanded). */

/* minigames.js places the tray over the open box; flat, it's centred. */
.minigames-tray {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(6px, 1.2vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.minigames.is-flat .minigames-tray {
    width: min(900px, calc(100% - 32px));
    height: 68%;
    padding: 16px;
    border: 4px solid #16263d;
    border-radius: 18px;
    background: #1f5a4e;
}

/* Clear plastic wells tinted by --hue. */
.minigame {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    border: 3px solid rgba(220, 240, 255, 0.55);
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
        hsla(var(--hue), 75%, 55%, 0.32);
    box-shadow:
        inset 0 -6px 14px rgba(0, 10, 25, 0.35),
        0 4px 10px rgba(0, 10, 25, 0.3);
    backdrop-filter: blur(3px) saturate(1.3);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.minigames.is-open .minigame {
    animation: minigame-pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.minigames.is-open .minigame:nth-child(2) { animation-delay: 0.035s; }
.minigames.is-open .minigame:nth-child(3) { animation-delay: 0.07s; }
.minigames.is-open .minigame:nth-child(4) { animation-delay: 0.105s; }
.minigames.is-open .minigame:nth-child(5) { animation-delay: 0.14s; }
.minigames.is-open .minigame:nth-child(6) { animation-delay: 0.175s; }

.minigame:hover {
    border-color: #fff;
    background-color: hsla(var(--hue), 80%, 60%, 0.45);
}

@keyframes minigame-pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.85);
    }
}

.minigame-lid {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-width: 0;
    padding: 8px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.minigame-lid:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: -3px;
}

.minigame-name {
    font: clamp(15px, 1.9vw, 30px) / 1.05 "Titan One", sans-serif;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.18em #16263d;
    filter: drop-shadow(0 0.08em 0 rgba(10, 20, 35, 0.5));
    transition: scale 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.minigame-hook {
    font: clamp(11px, 1vw, 16px) / 1.2 sans-serif;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 10, 25, 0.9), 0 0 6px rgba(0, 10, 25, 0.7);
}

.minigame-lid:hover .minigame-name,
.minigame-lid:focus-visible .minigame-name {
    scale: 1.08;
}

.minigames-tray.has-expanded .minigame:not(.is-expanded) {
    display: none;
}

.minigame.is-expanded {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    flex-direction: column;
    background-color: hsla(var(--hue), 70%, 30%, 0.75);
}

.minigame.is-expanded .minigame-lid {
    flex: none;
    padding-top: clamp(12px, 3vh, 32px);
}

.minigame.is-expanded .minigame-name {
    font-size: clamp(22px, 3.2vw, 48px);
}

.minigame-more {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 34em;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 40px) clamp(12px, 3vh, 32px);
    color: #fff;
    font: clamp(14px, 1.3vw, 20px) / 1.5 sans-serif;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 10, 25, 0.8);
}

.minigame-more p {
    margin: 0.5em 0 0;
}

.minigame-back {
    margin-top: 0.5em;
    color: #ffe28a;
    font: 700 14px/1.4 sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) and (orientation: portrait) {
    .minigames-tray {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .minigame-hook {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .minigames.is-open .minigame {
        animation: none;
    }

    .minigame-name {
        transition: none;
    }
}