:root {

    --ocean-dark: #075985;
    --ocean: #08a9d6;
    --ocean-light: #72e0f5;

    --yellow: #ffd92f;
    --yellow-dark: #e6b800;

    --card: #ffffff;
    --text: #073b4c;
    --muted: #66838d;

    --shadow: rgba(0, 55, 80, 0.25);

    --page-padding: 24px;
}


/* ===== NIGHT THEME ===== */

body.night {

    --ocean-dark: #061f2d;
    --ocean: #0b4057;
    --ocean-light: #164e63;

    --card: #123747;
    --text: #ffffff;
    --muted: #a7c4cc;

    --shadow: rgba(0, 0, 0, 0.45);

}


/* ===== RESET ===== */

* {
    box-sizing: border-box;
}


/* ===== BODY ===== */

body {

    margin: 0;
    padding: 0 var(--page-padding) 40px;

    min-height: 100vh;

    font-family:
        'Trebuchet MS',
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.25) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 80% 60%,
            rgba(255, 255, 255, 0.18) 0 7px,
            transparent 8px
        ),
        linear-gradient(
            180deg,
            var(--ocean-light),
            var(--ocean)
        );

    transition:
        background 0.4s ease,
        color 0.4s ease;
}


/* ===== HEADER ===== */

.header {

    max-width: 1100px;

    margin: 0 auto;

    padding: 30px 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* ===== LOGO ===== */

.logo {

    display: flex;

    align-items: center;

    gap: 14px;
}


.logo-icon {

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    background: var(--yellow);

    border: 4px solid var(--ocean-dark);

    border-radius: 16px;

    font-size: 28px;

    box-shadow:
        0 5px 0 var(--ocean-dark);
}


.logo h1 {

    margin: 0;

    font-size: 32px;

    line-height: 1;

    color: white;

    text-shadow:
        2px 2px 0 var(--ocean-dark);
}


.logo p {

    margin: 5px 0 0;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 5px;

    color: white;
}


/* ===== THEME BUTTON ===== */

.theme-button {

    padding: 11px 16px;

    border: 3px solid var(--ocean-dark);

    border-radius: 12px;

    background: var(--card);

    color: var(--text);

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 4px 0 var(--ocean-dark);

    transition:
        transform 0.15s,
        box-shadow 0.15s;
}


.theme-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 6px 0 var(--ocean-dark);
}


.theme-button:active {

    transform: translateY(3px);

    box-shadow:
        0 1px 0 var(--ocean-dark);
}


/* ===== CONTROLS ===== */

.controls {

    max-width: 1100px;

    margin: 0 auto 18px;

    padding: 14px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    background: rgba(255, 255, 255, 0.2);

    border: 2px solid rgba(255, 255, 255, 0.35);

    border-radius: 18px;

    backdrop-filter: blur(5px);
}


.control-group {

    display: flex;

    align-items: center;

    gap: 10px;
}


/* ===== CONTROL BUTTONS ===== */

.control-button,
.stop-button {

    padding: 10px 16px;

    border: 3px solid var(--ocean-dark);

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

    color: var(--text);

    background: var(--card);

    box-shadow:
        0 4px 0 var(--ocean-dark);

    transition:
        transform 0.15s,
        box-shadow 0.15s;
}


.control-button:hover,
.stop-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 6px 0 var(--ocean-dark);
}


.control-button:active,
.stop-button:active {

    transform: translateY(3px);

    box-shadow:
        0 1px 0 var(--ocean-dark);
}


/* ===== SPEED DISPLAY ===== */

.speed-display {

    min-width: 65px;

    padding: 5px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--yellow);

    border: 3px solid var(--ocean-dark);

    border-radius: 10px;
}


.speed-display span {

    font-size: 20px;

    font-weight: bold;
}


.speed-display small {

    font-size: 8px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* ===== STOP BUTTON ===== */

.stop-button {

    background: #ff6868;

    color: white;
}


/* ===== STATUS ===== */

.status {

    max-width: 1100px;

    margin: 0 auto 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    color: white;

    font-size: 14px;

    font-weight: bold;
}


.status-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #b8f5ff;

    box-shadow:
        0 0 8px #ffffff;
}


/* ===== CHARACTER GRID ===== */

.board {

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}


/* ===== CHARACTER CARD ===== */

.character-card {

    position: relative;

    overflow: hidden;

    background: var(--card);

    border: 4px solid var(--ocean-dark);

    border-radius: 20px;

    box-shadow:
        0 7px 0 var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease;
}


/* ===== CARD HOVER ===== */

.character-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 0 var(--shadow);
}


/* ===== IMAGE AREA ===== */

.image-container {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 12px;

    background: rgba(0, 180, 220, 0.12);
}


.cast {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    cursor: pointer;

    transition:
        transform 0.2s ease;
}


.cast:hover {

    transform: scale(1.06);
}


/* ===== PLAY ICON ===== */

.play-icon {

    position: absolute;

    right: 15px;
    bottom: 15px;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--yellow);

    border: 3px solid var(--ocean-dark);

    color: var(--ocean-dark);

    font-size: 16px;

    pointer-events: none;

    box-shadow:
        0 3px 0 var(--ocean-dark);
}


/* ===== CHARACTER INFO ===== */

.character-info {

    padding: 12px 15px 15px;

    text-align: left;
}


.character-info h2 {

    margin: 0;

    font-size: 18px;
}


.character-info p {

    margin: 3px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* ===== HIDE AUDIO ===== */

audio {

    display: none;
}


/* =========================================
   PLAYING STATE
   ========================================= */

.character-card.play {

    background: #fff1a8;

    border-color: var(--yellow);

    animation:
        playingPulse 1s infinite;
}


.character-card.play .play-icon {

    background: #35d07f;

    color: white;

    border-color: #147d49;

    transform: rotate(0deg);
}


.character-card.play .cast {

    transform: scale(1.05);
}


.character-card.play .character-info h2 {

    color: #176b45;
}


/* ===== PLAYING LABEL ===== */

.character-card.play::before {

    content: "▶ PLAYING";

    position: absolute;

    z-index: 2;

    top: 10px;
    left: 10px;

    padding: 5px 8px;

    background: #35d07f;

    color: white;

    border: 2px solid #147d49;

    border-radius: 7px;

    font-size: 10px;

    font-weight: bold;
}


/* ===== PLAYING ANIMATION ===== */

@keyframes playingPulse {

    0% {

        box-shadow:
            0 7px 0 var(--shadow);

    }

    50% {

        box-shadow:
            0 7px 0 var(--shadow),
            0 0 0 7px rgba(255, 217, 47, 0.35);

    }

    100% {

        box-shadow:
            0 7px 0 var(--shadow);

    }
}


/* ===== FOOTER ===== */

footer {

    max-width: 1100px;

    margin: 35px auto 0;

    padding-top: 20px;

    text-align: center;

    color: white;

    border-top:
        2px solid rgba(255, 255, 255, 0.25);
}


footer p {

    margin: 0 0 4px;

    font-weight: bold;
}


footer span {

    font-size: 12px;

    opacity: 0.8;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

    .board {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 16px;

    }

    .header {

        padding-top: 25px;

    }

    .logo h1 {

        font-size: 27px;

    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    body {

        --page-padding: 12px;

    }


    .header {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

    }


    .logo {

        justify-content: center;

    }


    .logo h1 {

        font-size: 25px;

    }


    .logo p {

        font-size: 10px;

    }


    .theme-button {

        width: 100%;

    }


    .controls {

        flex-direction: column;

        gap: 12px;

    }


    .control-group {

        width: 100%;

        justify-content: center;

    }


    .stop-button {

        width: 100%;

    }


    .board {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

    }


    .character-card {

        border-width: 3px;

        border-radius: 15px;

    }


    .character-info {

        padding: 9px 10px 11px;

    }


    .character-info h2 {

        font-size: 15px;

    }


    .character-info p {

        font-size: 11px;

    }


    .play-icon {

        width: 34px;
        height: 34px;

        right: 9px;
        bottom: 9px;

        font-size: 13px;

    }

}


/* =========================================
   SMALL PHONE
   ========================================= */

@media (max-width: 400px) {

    .board {

        grid-template-columns: 1fr;

    }

    .character-card {

        display: grid;

        grid-template-columns: 120px 1fr;

    }

    .image-container {

        aspect-ratio: 1 / 1;

    }

    .character-info {

        display: flex;

        flex-direction: column;

        justify-content: center;

    }

}