/* ==========================================================
   KidKey: A colorful keyboard game for kids
   Style file (game.css) — separate from the HTML markup
   Uses playful gradients, pops, glows and shake animations.
   ========================================================== */

:root {
    --bg-1: #6366f1;
    --bg-2: #d946ef;
    --bg-3: #f59e0b;
    --ink: #ffffff;
    --key-face: #ffecc7;
    --key: #f4c66b;
    --key-text: #5b21b6;
    --key-border: #b98b4a;
    --hit: #22c55e;
    --hit-text: #ffffff;
    --wrong: #ef4444;
    --glow: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: 'Fredoka', 'Comic Sans MS', 'Segoe UI', cursive, sans-serif;
    color: #fff;
    overflow-x: hidden;
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
    background-attachment: fixed;
}

/* Floating background blobs for a playful feel */
.bg-blob { position: fixed; border-radius: 50%; filter: blur(70px); opacity: 0.4; z-index: 0; pointer-events: none; }
.blob-a { width: 300px; height: 300px; top: -80px; left: -80px;  background: #22d3ee; }
.blob-b { width: 260px; height: 260px; bottom: -60px; right: -60px; background: #fb923c; }
.blob-c { width: 180px; height: 180px; top: 40%;  left: 55%;   background: #ffd166; }

/* Centered game shell */
.shell {
    position: relative; z-index: 1;
    width: min(100% - 2rem, 1080px);
    margin-inline: auto;
    padding: 2rem 1rem 4rem;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.6rem; min-height: 100%;
}

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.brand { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.back-link {
    color: #fff; text-decoration: none; font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.6rem 1.1rem; border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: transform .2s, background .2s;
}
.back-link:hover { background: rgba(255,255,255,0.35); transform: translateY(-2px); }

/* Score pills */
.pills { display: flex; gap: 0.7rem; }
.pill {
    background: rgba(0,0,0,0.22); border: 2px solid rgba(255,255,255,0.35);
    border-radius: 999px; padding: 0.45rem 1rem; font-weight: 800; font-size: 1.05rem;
    display: flex; align-items: center; gap: 0.4rem; backdrop-filter: blur(4px);
}
.pill.clickable { cursor: pointer; border-color: rgba(255,255,255,0.6); transition: background .2s; }
.pill.clickable:hover { background: rgba(255,255,255,0.3); }
.pill.muted { opacity: 0.55; }

/* --- Center stage (target display) --- */
.stage {
    width: 100%; max-width: 620px;
    background: rgba(255,255,255,0.16);
    border: 3px dashed rgba(255,255,255,0.5);
    border-radius: 2.4rem; padding: 1.6rem 1.2rem; text-align: center;
    backdrop-filter: blur(6px); min-height: 190px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
}
.stage-title { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 800; color: rgba(255,255,255,0.85); }
.target-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.2rem; }
.target-letter { font-size: 6rem; font-weight: 900; line-height: 1; text-shadow: 0 5px 0 rgba(0,0,0,0.2); min-width: 5rem; }
.target-emoji { font-size: 3.4rem; line-height: 1; }
.target-word { font-size: 1.7rem; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,0.15); margin-top: 0.4rem; }
.feedback { font-size: 1.15rem; font-weight: 700; margin-top: 0.6rem; min-height: 1.4em; color: #fff; }
.feedback.good { color: #bbf7d0; }
.feedback.bad { color: #fecaca; }

/* Progress bar */
.progress-track { width: 100%; max-width: 480px; height: 14px; background: rgba(0,0,0,0.25); border-radius: 999px; overflow: hidden; border: 2px solid rgba(255,255,255,0.35); }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4ade80, #facc15); border-radius: 999px; transition: width 0.3s ease; }

/* ---------- The keyboard ---------- */
.keyboard {
    width: 100%; max-width: 780px;
    background: rgba(20,20,50,0.55);
    border: 3px solid rgba(255,255,255,0.25);
    border-radius: 1.6rem; padding: 1rem 1rem 1.2rem;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
}
.kb-row { display: flex; justify-content: center; gap: 0.45rem; margin-bottom: 0.45rem; }
.kb-row:last-child { margin-bottom: 0; }
/* A single key */
.key {
    flex: 1 1 0; min-width: 0; height: 56px; max-width: 70px; border-radius: 12px;
    background: linear-gradient(180deg, var(--key-face), var(--key));
    border: 2px solid var(--key-border);
    box-shadow: 0 4px 0 var(--key-border), 0 8px 14px rgba(0,0,0,0.25);
    font-family: inherit; font-size: 1.5rem; font-weight: 900; color: var(--key-text);
    cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease, background 0.25s ease;
    user-select: none; -webkit-user-select: none;
}
.key:hover { filter: brightness(1.06); transform: translateY(-2px); }
.key.space { flex: 6 1 0; max-width: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.3em; color: #7c3aed; }
.key.key-spacer { background: transparent; border: 2px dashed rgba(255,255,255,0.2); box-shadow: none; color: rgba(255,255,255,0.5); cursor: default; }
.key.key-spacer:hover { filter: none; transform: none; }

/* Pressed visually (the big color-fill moment) */
.key.pressed {
    background: linear-gradient(180deg, #ffffff, var(--hit)) !important; color: var(--hit-text) !important;
    transform: translateY(4px) scale(1.15);
    box-shadow: 0 0 0 0 var(--key-border), 0 0 26px var(--glow);
    z-index: 3; border-color: #ffffff;
    animation: pop 0.35s ease;
}
/* Matched the target — extra glow */
.key.match {
    background: linear-gradient(180deg, #a7f3d0, var(--hit)) !important; color: var(--hit-text) !important;
    box-shadow: 0 0 0 0 var(--key-border), 0 0 28px 6px rgba(34,197,94,0.85) !important;
    transform: translateY(4px) scale(1.18); border-color: #bbf7d0;
    animation: pop 0.4s ease, wiggle 0.5s forwards;
}
/* Wrong key (challenge mode) */
.key.wrong {
    background: linear-gradient(180deg, #fca5a5, #ef4444) !important; color: #fff !important;
    border-color: #7f1d1d; box-shadow: 0 0 22px 4px rgba(239,68,68,0.8);
    animation: shake 0.4s ease;
}
.key.space.pressed { background: linear-gradient(180deg, #ffffff, #22d3ee) !important; color: #155e75 !important; border-color: #ffffff; }

/* ---------- Animations ---------- */
@keyframes pop {
    0% { transform: translateY(4px) scale(1); } 50% { transform: translateY(4px) scale(1.35); } 100% { transform: translateY(4px) scale(1.15); }
}
@keyframes wiggle {
    0%,100% { transform: translateY(4px) scale(1.18) rotate(0); }
    25% { transform: translateY(4px) scale(1.18) rotate(-8deg); }
    75% { transform: translateY(4px) scale(1.18) rotate(8deg); }
}
@keyframes shake {
    0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}
@keyframes floatUp {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1.3); opacity: 0; }
}
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; }
}
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* Little celebration text that floats up from the display */
.float-star { position: absolute; top: 30%; left: 50%; font-size: 2.6rem; font-weight: 900; animation: floatUp 1s ease forwards; pointer-events: none; z-index: 10; }

/* Mode toggle buttons */
.modes { display: flex; gap: 0.7rem; }
.mode-btn {
    font-family: inherit; font-size: 1.05rem; font-weight: 800;
    padding: 0.7rem 1.5rem; border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.mode-btn:hover { transform: translateY(-2px); }
.mode-btn.active { background: #fff; color: #7c3aed; }
.mode-btn.disabled { opacity: 0.55; cursor: not-allowed; }

/* Message banner (winning / restart) */
.banner { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 50; visibility: hidden; opacity: 0; transition: opacity 0.3s; }
.banner.show { visibility: visible; opacity: 1; }
.banner-card { background: #ffffff; color: #7c3aed; border-radius: 2rem; padding: 2.4rem 2.8rem; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.4); animation: popIn 0.45s ease; max-width: 90vw; }
.banner-card h2 { font-size: 2.4rem; margin-bottom: 0.5rem; }
.banner-card p { font-size: 1.2rem; margin-bottom: 1.4rem; }
.big-btn { font-family: inherit; font-size: 1.3rem; font-weight: 900; padding: 0.9rem 2.4rem; border: none; border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #a855f7); color: #fff; cursor: pointer; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.big-btn:hover { transform: translateY(-2px) scale(1.03); }
.error-msg { font-size: 1.2rem; color: #fecaca; }

/* Confetti (simple emoji drops) */
.confetti { position: fixed; top: -40px; font-size: 1.6rem; z-index: 60; pointer-events: none; animation: fall linear forwards; }

/* Mobile responsiveness */
@media (max-width: 640px) {
    .key { height: 46px; font-size: 1.05rem; border-radius: 9px; }
    .key.space { font-size: 0.7rem; }
    .target-letter { font-size: 4.4rem; }
    .target-emoji { font-size: 2.6rem; }
    .brand { font-size: 1.15rem; }
    .pills { flex-wrap: wrap; }
    .pill { font-size: 0.9rem; padding: 0.4rem 0.8rem; }
}