/* Playful anime controls. Loaded last to keep the visual language consistent. */

.anime-chip {
    position: relative;
    color: var(--anime-cream);
    text-decoration: none;
    cursor: pointer;
    border-radius: 18px 13px 19px 14px / 14px 19px 13px 18px;
    box-shadow:
        0 6px 0 rgba(8, 13, 42, 0.38),
        0 12px 24px rgba(3, 8, 28, 0.2);
    transform: rotate(-0.45deg);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.anime-chip:visited {
    color: var(--anime-cream);
}

.anime-chip:nth-child(even) {
    transform: rotate(0.45deg);
}

.anime-chip::after {
    content: "↗";
    position: absolute;
    top: -7px;
    right: -5px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.74);
    border-radius: 50%;
    color: var(--anime-ink);
    background: var(--anime-pink);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 4px 0 rgba(77, 84, 143, 0.45);
}

.anime-chip.giyu::after { background: var(--anime-sky); }
.anime-chip.muichiro::after { background: var(--anime-mint); }
.anime-chip.dazai::after { background: #ead9be; }
.anime-chip.levi::after { background: #d8e1e8; }

.anime-info {
    min-width: 0;
}

.anime-chip:hover {
    z-index: 2;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.46);
    box-shadow:
        0 8px 0 rgba(8, 13, 42, 0.34),
        0 17px 30px rgba(3, 8, 28, 0.28);
    transform: translateY(-4px) rotate(-1.25deg) scale(1.025);
}

.anime-chip:nth-child(even):hover {
    transform: translateY(-4px) rotate(1.25deg) scale(1.025);
}

.anime-chip:active {
    box-shadow: 0 2px 0 rgba(8, 13, 42, 0.38);
    transform: translateY(3px) rotate(0) scale(0.99);
}

.anime-chip:focus-visible {
    outline: 3px solid var(--anime-yellow);
    outline-offset: 4px;
}

/* Chibi blob buttons */
#openBtn,
.btn,
.modal-btn,
.btn-cute,
.game-replay-btn,
.close-text-btn {
    --cute-button-top: var(--anime-sky);
    --cute-button-bottom: var(--anime-lilac);
    --cute-button-shadow: rgba(74, 88, 151, 0.56);
    position: relative;
    overflow: visible !important;
    border: 2px solid rgba(255, 255, 255, 0.52) !important;
    border-radius: 22px 15px 23px 16px / 16px 23px 15px 22px !important;
    color: var(--anime-ink) !important;
    background: linear-gradient(145deg, var(--cute-button-top), var(--cute-button-bottom)) !important;
    box-shadow:
        0 7px 0 var(--cute-button-shadow),
        0 14px 25px rgba(3, 8, 28, 0.23) !important;
    font-family: 'Fredoka', 'Poppins', sans-serif !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

#giftBtn,
#giftEndBtn,
#sendMsgBtn,
#btnGameClaim {
    --cute-button-top: var(--anime-pink);
    --cute-button-bottom: var(--anime-lilac);
    --cute-button-shadow: rgba(157, 88, 143, 0.52);
}

#replayBtn,
#cancelMsgBtn,
.game-replay-btn,
.close-text-btn {
    --cute-button-top: var(--anime-mint);
    --cute-button-bottom: var(--anime-sky);
    --cute-button-shadow: rgba(71, 132, 143, 0.5);
}

#openMsgBtn,
#btnDirectClaim,
#btnPlayGame,
#btnGameWa {
    --cute-button-top: var(--anime-yellow);
    --cute-button-bottom: var(--anime-pink);
    --cute-button-shadow: rgba(160, 115, 105, 0.5);
}

#openBtn::before,
.btn::before,
.modal-btn::before,
.btn-cute::before,
.game-replay-btn::before,
.close-text-btn::before {
    content: "✦";
    position: absolute;
    z-index: 2;
    top: -10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #5e507f;
    background: var(--anime-yellow);
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 4px 0 rgba(78, 85, 144, 0.38);
    pointer-events: none;
}

#openBtn:hover:not(:disabled),
.btn:hover,
.modal-btn:hover,
.btn-cute:hover,
.game-replay-btn:hover,
.close-text-btn:hover {
    filter: saturate(1.08) brightness(1.05);
    box-shadow:
        0 9px 0 var(--cute-button-shadow),
        0 18px 30px rgba(3, 8, 28, 0.29) !important;
    transform: translateY(-3px) rotate(-1deg) scale(1.02);
}

#openBtn:active:not(:disabled),
.btn:active,
.modal-btn:active,
.btn-cute:active,
.game-replay-btn:active,
.close-text-btn:active {
    box-shadow:
        0 2px 0 var(--cute-button-shadow),
        0 6px 12px rgba(3, 8, 28, 0.2) !important;
    transform: translateY(5px) rotate(0) scale(0.99);
}

#openBtn:focus-visible,
.btn:focus-visible,
.modal-btn:focus-visible,
.btn-cute:focus-visible,
.game-replay-btn:focus-visible,
.close-text-btn:focus-visible {
    outline: 3px solid var(--anime-yellow);
    outline-offset: 4px;
}

#openBtn:disabled::before {
    opacity: 0.45;
    filter: grayscale(0.35);
}

.exit-game-btn {
    border-radius: 16px 11px 16px 11px !important;
    transform: rotate(0.5deg);
}

.close-text-btn {
    min-height: 40px;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

@media (max-width: 767px) {
    .anime-chip::after {
        top: -5px;
        right: -3px;
        width: 19px;
        height: 19px;
        font-size: 0.62rem;
    }

    #openBtn::before,
    .btn::before,
    .modal-btn::before,
    .btn-cute::before,
    .game-replay-btn::before,
    .close-text-btn::before {
        top: -8px;
        right: 8px;
        width: 21px;
        height: 21px;
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anime-chip,
    #openBtn,
    .btn,
    .modal-btn,
    .btn-cute,
    .game-replay-btn,
    .close-text-btn {
        transition: none !important;
    }
}