/* GameKit shared styles — design tokens + common components for all games.
   Load BEFORE the game's own stylesheet so games can override. */

:root {
    --gk-pink: #FF7BAC;
    --gk-purple: #B565D8;
    --gk-blue: #00B4D8;
    --gk-green: #7CB518;
    --gk-yellow: #FCBF49;
    --gk-orange: #F77F00;
    --gk-red: #E63946;
    --gk-cream: #FFF8EC;
    --gk-text: #4A3B5C;
    --gk-white: #FFFFFF;
    --gk-shadow: 0 10px 30px rgba(90, 60, 130, 0.18);
    --gk-font: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; }

body {
    font-family: var(--gk-font);
    color: var(--gk-text);
    touch-action: manipulation;
    overflow: hidden;
}

button, a {
    font-family: inherit;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.gk-hidden { display: none !important; }

/* ── Buttons ── */

.gk-btn {
    min-height: 68px;
    padding: 14px 40px;
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: bold;
    color: var(--gk-white);
    background: linear-gradient(135deg, var(--gk-pink) 0%, var(--gk-purple) 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(181, 101, 216, 0.45);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.gk-btn:hover:not(:disabled)  { transform: translateY(-3px) scale(1.03); }
.gk-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.gk-btn:disabled { opacity: 0.45; cursor: default; }

.gk-btn.gk-secondary {
    background: linear-gradient(135deg, var(--gk-blue) 0%, #5FB0E8 100%);
    box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4);
}

.gk-btn.gk-go {
    background: linear-gradient(135deg, var(--gk-green) 0%, #A2D149 100%);
    box-shadow: 0 6px 20px rgba(124, 181, 24, 0.4);
}

/* ── HUD ── */

.gk-hud {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 900;
    display: flex;
    gap: 10px;
}

.gk-hud-btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s;
}

.gk-hud-btn:hover  { transform: scale(1.1); }
.gk-hud-btn:active { transform: scale(0.92); }

/* ── Cards ── */

.gk-card {
    background: var(--gk-white);
    border-radius: 24px;
    padding: 20px 22px;
    box-shadow: var(--gk-shadow);
}

/* ── Confetti ── */

.gk-confetti-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 950;
}

.gk-confetti-bit {
    position: absolute;
    top: -24px;
    will-change: transform;
    animation: gk-confetti-fall linear forwards;
}
.gk-cf-streamer { border-radius: 3px; }
.gk-cf-emoji { line-height: 1; }

@keyframes gk-confetti-fall {
    from { transform: translate(0, -8vh) rotate(0turn); opacity: 1; }
    to   { transform: translate(var(--drift, 0), 114vh) rotate(var(--spin, 3turn)); opacity: 0.9; }
}

/* ── Firework sparks ── */
.gk-spark {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform;
    box-shadow: 0 0 7px currentColor;
    animation: gk-spark-fly 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes gk-spark-fly {
    0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.15); opacity: 0; }
}

/* ── Celebration overlay ── */

.gk-celebrate {
    position: fixed;
    inset: 0;
    z-index: 940;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 59, 92, 0.45);
    animation: gk-fade-in 0.3s ease-out;
}

/* rotating sunburst + soft glow behind the card */
.gk-celebrate-glow {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
}
.gk-rays {
    width: 160vmax;
    height: 160vmax;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 236, 170, 0.28) 0%, rgba(255, 236, 170, 0) 42%),
        repeating-conic-gradient(from 0deg, rgba(255, 215, 0, 0.16) 0deg 11deg, rgba(255, 215, 0, 0) 11deg 22deg);
    animation: gk-rays-spin 16s linear infinite, gk-fade-in 0.6s ease-out;
    will-change: transform;
}
@keyframes gk-rays-spin { to { transform: rotate(1turn); } }

.gk-celebrate-card {
    position: relative;
    background: var(--gk-white);
    border-radius: 30px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: gk-pop-in 0.5s cubic-bezier(0.18, 1.5, 0.4, 1);
    max-width: min(90vw, 460px);
}

.gk-celebrate-card h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: var(--gk-orange);
    margin-bottom: 6px;
}

.gk-celebrate-card p {
    margin: 10px 0;
    font-size: clamp(1rem, 3.2vw, 1.2rem);
}

.gk-celebrate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 4px;
}

.gk-stars { font-size: 2.8rem; margin: 8px 0 14px; }

.gk-star {
    display: inline-block;
    margin: 0 4px;
    filter: grayscale(1) opacity(0.35);
}

.gk-star.lit {
    filter: none;
    animation: gk-star-pop 0.6s cubic-bezier(0.2, 1.7, 0.35, 1) backwards;
}

@keyframes gk-star-pop {
    0%   { transform: scale(0) rotate(-45deg); }
    55%  { transform: scale(1.4) rotate(10deg); filter: brightness(1.7) drop-shadow(0 0 12px #FFD54A); }
    75%  { transform: scale(0.92) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ── Shared animations ── */

@keyframes gk-pop-in {
    from { opacity: 0; transform: scale(0.7) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes gk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gk-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@keyframes gk-wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

@keyframes gk-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

.gk-bob     { animation: gk-bob 2.6s ease-in-out infinite; }
.gk-wiggle  { animation: gk-wiggle 1.8s ease-in-out infinite; }
.gk-twinkle { animation: gk-twinkle 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .gk-bob, .gk-wiggle, .gk-twinkle { animation: none; }
    .gk-confetti-bit, .gk-spark { display: none; }
    .gk-rays { animation: none; opacity: 0.5; }
    .gk-star.lit { animation: gk-fade-in 0.3s ease-out backwards; }
}