/*
 * Drosat Play Kit theme — a bright "sticker / toy box" skin for the fun games.
 * Re-skins the Arcade Kit chrome only on pages with <body class="ak-game pk-fun">:
 * cream paper, chunky ink outlines, hard offset shadows and a playful font.
 * The game's own colour comes from the mount() accent (--ak-accent).
 */

.pk-fun {
    --pk-ink: #2b2350;
    --pk-paper: #fff8ec;
    --pk-paper-2: #ffefd6;
    --pk-sun: #ffc93c;
    --pk-pink: #ff6f91;
    --pk-mint: #3ddc97;
    --pk-sky: #4cc9f0;
    --pk-grape: #8e6cff;
    --pk-red: #ff5a5f;
    --pk-line: 3px solid var(--pk-ink);
    --pk-pop: 0 5px 0 var(--pk-ink);
    --pk-pop-sm: 0 3px 0 var(--pk-ink);
    --pk-font: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
    --ak-font: var(--pk-font);
    --ak-font-num: 'Baloo Bhaijaan 2', 'Fredoka', system-ui, sans-serif;
    font-family: var(--pk-font);
    background: var(--pk-paper);
}

#pk-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.pk-canvas {
    display: block;
}

/* ───────────── HUD: white stickers ───────────── */
.pk-fun .ak-brand,
.pk-fun .ak-chip,
.pk-fun .ak-stat,
.pk-fun .ak-icon-btn {
    border: var(--pk-line);
    background: #fff;
    color: var(--pk-ink);
    box-shadow: var(--pk-pop-sm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pk-fun .ak-icon-btn {
    border-radius: 14px;
    background: var(--ak-accent);
    color: #fff;
}

.pk-fun .ak-icon-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.pk-fun .ak-brand__title {
    font-weight: 800;
    font-size: 15px;
}

.pk-fun .ak-logo-plate {
    box-shadow: none;
}

.pk-fun .ak-chip {
    height: 38px;
    color: var(--pk-ink);
    font-size: 14px;
}

.pk-fun .ak-chip .ak-svg {
    color: var(--ak-accent);
}

.pk-fun .ak-stat {
    font-weight: 800;
    font-size: 18px;
}

.pk-fun .ak-stat--gold { --ak-stat-color: #f5a700; }
.pk-fun .ak-stat--red { --ak-stat-color: var(--pk-red); }
.pk-fun .ak-stat--green { --ak-stat-color: #1fbf7a; }
.pk-fun .ak-stat--cyan { --ak-stat-color: #1aa7d6; }

.pk-fun .ak-stat.is-bump {
    border-color: var(--pk-ink);
    background: var(--pk-sun);
}

.pk-fun .ak-lives {
    color: var(--pk-red);
}

.pk-fun .ak-lives .is-lost {
    opacity: 0.2;
}

/* ───────────── Question: a paper card with a ribbon ───────────── */
.pk-fun .ak-question {
    border: var(--pk-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pk-pop);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 12px 18px 12px;
}

.pk-fun .ak-question__tag {
    background: var(--ak-accent);
    color: #fff;
    border: 2px solid var(--pk-ink);
    font-size: 12px;
    padding: 1px 12px;
    margin-top: -26px;
    box-shadow: 0 2px 0 var(--pk-ink);
}

.pk-fun .ak-question__text {
    color: var(--pk-ink);
    font-weight: 800;
    line-height: 1.45;
}

.pk-fun .ak-question__hint {
    color: #7a7096;
}

.pk-fun .ak-question.is-pulse {
    animation: pk-wiggle 0.5s ease;
}

/* ───────────── Feedback / toast: bouncy stickers ───────────── */
.pk-fun .ak-feedback,
.pk-fun .ak-toast {
    border: var(--pk-line);
    box-shadow: var(--pk-pop);
    color: var(--pk-ink);
    background: #fff;
}

.pk-fun .ak-feedback--good { background: var(--pk-mint); }
.pk-fun .ak-feedback--bad { background: var(--pk-pink); color: #fff; }
.pk-fun .ak-feedback--gold { background: var(--pk-sun); }

.pk-fun .ak-feedback.is-show {
    transform: translate(-50%, -50%) scale(1) rotate(-3deg);
}

/* ───────────── Buttons ───────────── */
.pk-fun .ak-btn {
    border: var(--pk-line);
    border-radius: 18px;
    box-shadow: var(--pk-pop);
    font-weight: 800;
    color: var(--pk-ink);
    transition: transform 0.1s ease;
}

.pk-fun .ak-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--pk-ink);
}

.pk-fun .ak-btn--primary {
    background: var(--ak-accent);
    color: #fff;
    text-shadow: 0 2px 0 rgba(43, 35, 80, 0.35);
}

.pk-fun .ak-btn--gold {
    background: var(--pk-sun);
}

.pk-fun .ak-btn--ghost {
    background: #fff;
}

.pk-fun .ak-btn--primary:hover:not(:disabled),
.pk-fun .ak-btn--gold:hover:not(:disabled),
.pk-fun .ak-btn--ghost:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--pk-ink);
    background-image: none;
}

/* ───────────── Modals: confetti paper ───────────── */
.pk-fun .ak-modal {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 201, 60, 0.55) 0 7px, transparent 8px),
        radial-gradient(circle at 82% 12%, rgba(255, 111, 145, 0.55) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 85%, rgba(76, 201, 240, 0.55) 0 8px, transparent 9px),
        radial-gradient(circle at 20% 78%, rgba(61, 220, 151, 0.55) 0 6px, transparent 7px),
        color-mix(in srgb, color-mix(in srgb, var(--ak-accent) 62%, #2b2350) 80%, transparent);
    background-size: 220px 220px, 260px 260px, 240px 240px, 200px 200px, auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.pk-fun .ak-modal__card {
    border: 4px solid var(--pk-ink);
    border-radius: 28px;
    background: var(--pk-paper);
    box-shadow: 0 10px 0 var(--pk-ink);
    color: var(--pk-ink);
    animation: pk-drop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.pk-fun .ak-modal__exit {
    border: var(--pk-line);
    background: #fff;
    color: var(--pk-ink);
    box-shadow: var(--pk-pop-sm);
}

.pk-fun .ak-modal__exit:hover {
    background: var(--pk-sun);
    border-color: var(--pk-ink);
}

.pk-fun .ak-modal__logo .ak-logo-plate {
    border: var(--pk-line);
    box-shadow: var(--pk-pop-sm);
}

.pk-fun .ak-modal__hero {
    width: 92px;
    height: 92px;
    border: 4px solid var(--pk-ink);
    border-radius: 50%;
    background: var(--ak-accent);
    box-shadow: 0 6px 0 var(--pk-ink);
    font-size: 48px;
    color: #fff;
    animation: pk-bob 2.4s ease-in-out infinite;
}

.pk-fun .ak-modal__hero--win { background: var(--pk-sun); color: var(--pk-ink); }
.pk-fun .ak-modal__hero--lose { background: var(--pk-pink); color: #fff; }

.pk-fun .ak-modal__title {
    color: var(--pk-ink);
    font-weight: 800;
    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.25;
}

.pk-fun .ak-modal__desc {
    color: #5d5480;
    font-weight: 600;
    font-size: 16px;
}

.pk-fun .ak-modal__label {
    color: var(--pk-ink);
    font-weight: 800;
    font-size: 14px;
}

.pk-fun .ak-session {
    border: 2px solid var(--pk-ink);
    background: #fff;
    color: var(--pk-ink);
}

.pk-fun .ak-tip {
    border: var(--pk-line);
    border-radius: 18px;
    background: #fff;
    color: var(--pk-ink);
    box-shadow: var(--pk-pop-sm);
    font-size: 14px;
}

.pk-fun .ak-tip:nth-child(3n+1) { background: #fff3c4; }
.pk-fun .ak-tip:nth-child(3n+2) { background: #ffe0ea; }
.pk-fun .ak-tip:nth-child(3n+3) { background: #d9f6ff; }

.pk-fun .ak-tip__icon {
    border: 2px solid var(--pk-ink);
    border-radius: 50%;
    background: #fff;
    color: var(--pk-ink);
}

.pk-fun .ak-level-pick,
.pk-fun .ak-stats__item,
.pk-fun .ak-board,
.pk-fun .ak-menu-item,
.pk-fun .ak-level {
    border: var(--pk-line);
    background: #fff;
    color: var(--pk-ink);
    box-shadow: var(--pk-pop-sm);
}

.pk-fun .ak-level-pick__kicker,
.pk-fun .ak-stats__label,
.pk-fun .ak-board__empty {
    color: #7a7096;
}

.pk-fun .ak-stats__value { color: var(--pk-ink); }
.pk-fun .ak-stats__item--gold { background: #fff3c4; }
.pk-fun .ak-stats__item--blue { background: #d9f6ff; }
.pk-fun .ak-stats__item--green { background: #d4f8e6; }
.pk-fun .ak-stats__item--gold .ak-stats__value,
.pk-fun .ak-stats__item--blue .ak-stats__value,
.pk-fun .ak-stats__item--green .ak-stats__value { color: var(--pk-ink); }

.pk-fun .ak-stars {
    color: #e6dccb;
    font-size: 48px;
    gap: 10px;
    -webkit-text-stroke: 2px var(--pk-ink);
}

.pk-fun .ak-stars .is-on {
    color: var(--pk-sun);
    filter: none;
}

.pk-fun .ak-board__row:nth-child(-n+3) { background: #fff3c4; }
.pk-fun .ak-board__rank { color: var(--pk-ink); }
.pk-fun .ak-board__score { color: var(--ak-accent); font-weight: 800; }

.pk-fun .ak-menu-item .ak-svg { color: var(--ak-accent); }
.pk-fun .ak-menu-item:hover { background: #fff3c4; border-color: var(--pk-ink); }

.pk-fun .ak-level:hover:not(:disabled) {
    background: #fff3c4;
    border-color: var(--pk-ink);
    transform: translateY(-3px) rotate(-1deg);
}

.pk-fun .ak-level.is-current {
    background: color-mix(in srgb, var(--ak-accent) 18%, #fff);
    border-color: var(--pk-ink);
    box-shadow: 0 5px 0 var(--pk-ink);
}

.pk-fun .ak-level__num {
    background: var(--ak-accent);
    color: #fff;
    border: 2px solid var(--pk-ink);
}

.pk-fun .ak-level__stars { color: #e6dccb; }
.pk-fun .ak-level__stars .is-on { color: #f5a700; }

.pk-fun .ak-keys {
    border: 2px solid var(--pk-ink);
    background: #fff;
    color: var(--pk-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ───────────── Touch pads: big candy buttons ───────────── */
.pk-fun .ak-pad {
    width: 72px;
    height: 72px;
    border: 4px solid var(--pk-ink);
    border-radius: 24px;
    background: #fff;
    color: var(--pk-ink);
    box-shadow: 0 6px 0 var(--pk-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 30px;
    opacity: 0.92;
}

.pk-fun .ak-pad--accent { background: var(--ak-accent); color: #fff; }
.pk-fun .ak-pad--gold { background: var(--pk-sun); color: var(--pk-ink); }

.pk-fun .ak-pad.is-active,
.pk-fun .ak-pad:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 var(--pk-ink);
    background: var(--pk-sun);
}

@keyframes pk-drop {
    0% { opacity: 0; transform: translateY(-40px) rotate(-4deg) scale(0.9); }
    100% { opacity: 1; transform: none; }
}

@keyframes pk-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes pk-wiggle {
    0% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-50%) rotate(-1.5deg) scale(1.02); }
    60% { transform: translateX(-50%) rotate(1deg); }
    100% { transform: translateX(-50%) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pk-fun .ak-modal__hero,
    .pk-fun .ak-modal__card,
    .pk-fun .ak-question.is-pulse {
        animation: none;
    }
}