/* -------- SCOPED FOR HEARTFELT KIDS --------
   Three changes were made to this block when the program was installed on
   12 August 2026, and nothing else in this stylesheet was touched.

   1  The global * reset is now fenced inside the program. Left as it was it
      would have reset the header, the footer, and every page it loaded on.

   2  The Google Fonts @import is gone. It fetched Quicksand from
      fonts.googleapis.com, which would have told Google the address of every
      child who opened this page. The Privacy page promises that no other
      company sees a child arrive, and that promise is only worth anything if
      it is true on every page. The program now uses the site's own faces,
      which are already loaded and are served from our own server.

   3  :root became the program's own element, and every value in it is now a
      HeartFelt Kids token from tokens.css. This is what makes the program
      look like the rest of the site rather than a page from somewhere else.
      Change a brand colour in tokens.css and this changes with it.
   -------------------------------------------------------------------- */
.hf-word-module,
.hf-word-module *,
.hf-word-module *::before,
.hf-word-module *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hf-word-module {
    --hf-primary: var(--heart);
    --hf-primary-light: #F07C85;
    --hf-primary-dark: #C13F4A;
    --hf-secondary: var(--sky);
    --hf-secondary-dark: #1F62B0;
    --hf-secondary-light: var(--sky-soft);
    --hf-accent: var(--gold);
    --hf-accent-dark: #D99F2E;
    --hf-accent-light: var(--gold-soft);
    --hf-bg: var(--cream);
    --hf-card-bg: var(--panel);
    --hf-text: var(--navy);
    --hf-text-light: var(--body);
    --hf-shadow: var(--shadow);
    --hf-radius: var(--radius-lg);
    --hf-radius-sm: var(--radius);
    --hf-transition: 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
    --hf-font: var(--font-body);
}

/* -------- CONTAINER -------- */
.hf-word-module {
    font-family: var(--hf-font);
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 20px 36px;
    background: var(--hf-bg);
    border-radius: var(--hf-radius);
    box-shadow: var(--hf-shadow);
    transition: var(--hf-transition);
    position: relative;
    overflow: hidden;
}

/* subtle decorative heart accent */
.hf-word-module::before {
    content: '♥';
    position: absolute;
    top: -18px;
    right: -6px;
    font-size: 120px;
    color: rgba(242, 107, 138, 0.06);
    pointer-events: none;
    line-height: 1;
    transform: rotate(8deg);
}

/* -------- HEADER -------- */
.hf-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.hf-module-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hf-primary);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hf-module-title .heart-icon {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    animation: hf-heart-pulse 2.4s ease-in-out infinite;
}
@keyframes hf-heart-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.18);
    }
}

.hf-module-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hf-text-light);
    background: rgba(108, 196, 196, 0.16);
    padding: 6px 18px;
    border-radius: 40px;
    letter-spacing: 0.02em;
}

/* -------- WORD DISPLAY -------- */
.hf-word-display {
    text-align: center;
    padding: 28px 12px 18px;
    background: var(--hf-card-bg);
    border-radius: var(--hf-radius-sm);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    border: 2px solid rgba(242, 107, 138, 0.10);
}

.hf-word-part-of-speech {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hf-secondary);
    background: rgba(108, 196, 196, 0.12);
    padding: 2px 16px;
    border-radius: 30px;
    margin-bottom: 6px;
}

.hf-word-text {
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--hf-text);
    letter-spacing: -0.02em;
    word-break: break-word;
    transition: var(--hf-transition);
}
@media (max-width: 520px) {
    .hf-word-text {
        font-size: 3rem;
    }
}
@media (max-width: 400px) {
    .hf-word-text {
        font-size: 2.4rem;
    }
}

.hf-word-counter {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hf-text-light);
    opacity: 0.6;
    margin-top: 6px;
    letter-spacing: 0.04em;
}

/* -------- LETTER-BY-LETTER SPELLING AREA -------- */
.hf-spelling-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    padding: 20px 12px 14px;
    min-height: 70px;
    background: rgba(247, 201, 72, 0.08);
    border-radius: var(--hf-radius-sm);
    margin: 16px 0 18px;
    border: 2px dashed rgba(247, 201, 72, 0.25);
    transition: var(--hf-transition);
}
.hf-spelling-area--hidden {
    display: none;
}

.hf-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--hf-font);
    color: var(--hf-text);
    background: var(--hf-card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    border: 2px solid transparent;
    text-transform: uppercase;
}
.hf-letter--highlight {
    background: var(--hf-primary);
    color: #fff;
    transform: scale(1.12) translateY(-4px);
    box-shadow: 0 8px 24px rgba(242, 107, 138, 0.35);
    border-color: var(--hf-primary-dark);
}
.hf-letter--done {
    background: rgba(108, 196, 196, 0.14);
    color: var(--hf-secondary-dark);
    border-color: rgba(108, 196, 196, 0.20);
}
@media (max-width: 460px) {
    .hf-letter {
        width: 36px;
        height: 44px;
        font-size: 1.6rem;
    }
    .hf-spelling-area {
        gap: 4px 6px;
        padding: 14px 8px 10px;
    }
}

/* -------- CONTENT CARDS (definition & example) -------- */
.hf-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0 22px;
    position: relative;
    z-index: 2;
}
@media (max-width: 600px) {
    .hf-content-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.hf-content-card {
    background: var(--hf-card-bg);
    border-radius: var(--hf-radius-sm);
    padding: 18px 20px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    border: 2px solid var(--line);
    transition: var(--hf-transition);
}
.hf-content-card--definition .hf-content-card-label {
    color: var(--hf-primary-dark);
}
.hf-content-card--example .hf-content-card-label {
    color: var(--hf-secondary-dark);
}

.hf-content-card-label {
    font-size: var(--t-eyebrow-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--t-eyebrow-ls);
    color: var(--soft);
    margin-bottom: 6px;
}

.hf-content-card-text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--hf-text);
    font-weight: 500;
}
.hf-content-card-text .hf-example-word {
    font-weight: 700;
    color: var(--hf-primary);
}
@media (max-width: 480px) {
    .hf-content-card-text {
        font-size: 0.95rem;
    }
}

/* -------- ACTION BUTTONS -------- */
.hf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 12px;
    position: relative;
    z-index: 2;
}

.hf-btn {
    font-family: var(--hf-font);
    font-weight: 700;
    font-size: var(--t-button-size);
    padding: 12px 28px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    transition: var(--hf-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    background: var(--hf-card-bg);
    color: var(--hf-text);
    border: 2px solid rgba(0, 0, 0, 0.05);
    min-height: 52px;
    flex: 0 1 auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.01em;
}
.hf-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.hf-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hf-btn:disabled {
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
}

.hf-btn--primary {
    background: var(--hf-primary);
    color: #fff;
    border-color: var(--hf-primary);
    box-shadow: 0 4px 18px rgba(242, 107, 138, 0.30);
}
.hf-btn--primary:hover {
    background: var(--hf-primary-dark);
    border-color: var(--hf-primary-dark);
    box-shadow: 0 8px 30px rgba(242, 107, 138, 0.40);
}

.hf-btn--secondary {
    background: var(--hf-secondary);
    color: #fff;
    border-color: var(--hf-secondary);
    box-shadow: 0 4px 18px rgba(108, 196, 196, 0.30);
}
.hf-btn--secondary:hover {
    background: var(--hf-secondary-dark);
    border-color: var(--hf-secondary-dark);
    box-shadow: 0 8px 30px rgba(108, 196, 196, 0.40);
}

.hf-btn--accent {
    background: var(--hf-accent);
    color: var(--hf-text);
    border-color: var(--hf-accent);
    box-shadow: 0 4px 18px rgba(247, 201, 72, 0.30);
}
.hf-btn--accent:hover {
    background: var(--hf-accent-dark);
    border-color: var(--hf-accent-dark);
    box-shadow: 0 8px 30px rgba(247, 201, 72, 0.40);
}

.hf-btn--outline {
    background: transparent;
    border: 2px solid var(--hf-primary);
    color: var(--hf-primary);
}
.hf-btn--outline:hover {
    background: var(--hf-primary);
    color: #fff;
}

.hf-btn--small {
    font-size: 0.8rem;
    padding: 8px 18px;
    min-height: 40px;
}

.hf-btn-icon {
    font-size: 1.2rem;
    line-height: 1;
}

@media (max-width: 540px) {
    .hf-actions {
        gap: 10px;
    }
    .hf-btn {
        font-size: var(--t-button-size);
        padding: 10px 18px;
        min-height: 48px;
        flex: 1 1 calc(50% - 10px);
        min-width: 120px;
    }
    .hf-btn--small {
        flex: 0 1 auto;
        min-width: auto;
    }
}
@media (max-width: 380px) {
    .hf-btn {
        font-size: var(--t-button-size);
        padding: 8px 14px;
        min-height: 48px;
        gap: 4px;
    }
}

/* -------- STATUS / FEEDBACK -------- */
.hf-status {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hf-secondary);
    min-height: 1.8em;
    padding: 6px 0 2px;
    transition: var(--hf-transition);
    position: relative;
    z-index: 2;
}
.hf-status--speaking {
    color: var(--hf-primary);
}
.hf-status--spelling {
    color: var(--hf-accent);
}

/* -------- RESPONSIVE TWEAKS -------- */
@media (max-width: 480px) {
    .hf-word-module {
        padding: 16px 12px 24px;
        border-radius: 20px;
    }
    .hf-module-title {
        font-size: 1.2rem;
    }
    .hf-module-date {
        font-size: 0.75rem;
        padding: 4px 14px;
    }
    .hf-content-card {
        padding: 14px 16px 16px;
    }
    .hf-word-text {
        font-size: 2.8rem;
    }
}

/* -------- UTILITIES -------- */
.hf-hidden {
    display: none !important;
}
.hf-text-center {
    text-align: center;
}
.hf-mt-8 {
    margin-top: 8px;
}
.hf-mb-8 {
    margin-bottom: 8px;
}

/* scrollbar styling (optional) */
.hf-word-module::-webkit-scrollbar {
    width: 6px;
}
.hf-word-module::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}
.hf-word-module::-webkit-scrollbar-thumb {
    background: var(--hf-secondary-light);
    border-radius: 10px;
}