@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

    body {
        font-family: 'Rubik', sans-serif;
        margin: 0;
        padding: 0;
    }

    input,
    ::placeholder {
        font-family: inherit;
    }

    .page-header,
    .page-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .page-header img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 300px;
        margin-top: 35px;
    }

    .page-footer img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 200px;
        margin-top: -15px;
    }

    .form-page {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        container-type: inline-size;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
    }

    .form-page.active {
        opacity: 1;
        transform: translateY(0);
    }

    .hidden {
        display: none !important;
    }

    h2 {
        max-width: 500px;
        text-align: center;
        color: #333333;
        font-size: clamp(15px, 5.1cqw, 24px);
        margin: 15px auto;
    }

    p, .congratulations-text {
        max-width: 400px;
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        color: #444444;
        font-size: clamp(9px, 3cqw, 15px);
        line-height: 1.6;
        margin: 0 auto 20px;
        padding: 0 15px;
    }

    .field-container {
        display: block;
        width: min(85%, 900px);
        margin: 0 auto;
        box-sizing: border-box;
    }

    .field-label {
        display: block;
        color: #333333;
        font-size: clamp(14px, 4.5cqw, 22px);
        font-weight: 600;
        line-height: 1.25;
        margin: 30px 0 6px;
    }

    .field-example {
        display: block;
        color: #808080;
        font-style: italic;
        font-size: clamp(12px, 3.8cqw, 18px);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .input-field {
        display: block;
        width: min(85%, 900px);
        margin: 5px auto 25px auto;
        font-size: clamp(17px, 4.3cqw, 20px);
        border: 1px solid #000000;
        border-radius: 5px;
        padding: 16px 18px;
        background-color: #f7f8fa;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    input[type="text"]:focus,
    .input-field:focus {
        outline: none;
        border-color: #cb2030;
        box-shadow: 0 0 0 1px #cb2030;
    }

    input.input-error {
        border-color: #cb2030 !important;
        box-shadow: 0 0 0 1px #cb2030 !important;
        background-color: #fff5f5 !important;
    }

    .required-star {
        color: #cb2030;
    }

    .error-message {
        display: none;
        color: #cb2030;
        font-size: 14px;
        font-weight: 500;
        margin: -20px auto 20px auto;
        width: min(85%, 900px);
    }

    .input-error + .error-message {
        display: block;
    }

    button {
        display: block;
        width: min(45%, 200px);
        padding: 14px 10px;
        font-family: inherit;
        font-size: clamp(13px, 4.3cqw, 20px);
        font-weight: 600;
        color: #ffffff;
        background-color: #1a1a1a;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
        white-space: nowrap;
    }

    button:hover {
        background-color: #cb2030;
    }

    button:active {
        transform: scale(0.98);
    }

    .button-group {
        display: flex;
        width: min(85%, 900px);
        margin: 60px auto 20px auto;
    }

    .button-group button {
        width: min(48%, 200px);
        margin: 0;
    }

    .button-group.align-right {
        justify-content: flex-end;
    }

    .button-group.align-left {
        justify-content: flex-start;
    }

    .word-search-container {
        width: 90%;
        max-width: 580px;
        margin: 20px auto;
        padding: clamp(12px, 4vw, 24px);
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        text-align: center;
        font-family: 'Rubik', sans-serif;
        box-sizing: border-box;
    }

    .word-search-container h3 {
        margin: 0 0 16px 0;
        color: #1e293b;
        font-size: clamp(1rem, 3.5vw, 1.3rem);
        font-weight: 700;
    }

    .word-bank {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        justify-content: center;
        margin: 0 0 24px 0;
    }

    .word-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: clamp(20px, 4vw, 28px);
        background-color: #f1f5f9;
        color: #475569;
        padding: 2px 0;
        border-radius: 20px;
        font-size: clamp(0.42rem, 1.8vw, 0.75rem);
        font-weight: 600;
        letter-spacing: normal;
        border: 1px solid #e2e8f0;
        transition: all 0.25s ease;
        box-sizing: border-box;
    }

    .word-chip.found {
        background-color: #10b981;
        color: #ffffff;
        border-color: #059669;
        text-decoration: line-through;
        opacity: 0.85;
        transform: scale(0.96);
    }

    .word-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: clamp(2.5px, 1.2vw, 8px);
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
    }

    .grid-cell {
        aspect-ratio: 1;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: clamp(2px, 0.6vw, 6px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: clamp(0.5rem, 2.5vw, 0.95rem);
        color: #334155;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .grid-cell:hover {
        background-color: #cbd5e1;
    }

    .grid-cell.selected {
        background-color: #fef08a;
        border-color: #facc15;
        color: #854d0e;
    }

    .grid-cell.found-cell {
        background-color: #a7f3d0;
        border-color: #34d399;
        color: #065f46;
    }

    .completion-card {
        background: #ffffff;
        border: 2px solid #cb2030;
        border-radius: 16px;
        padding: 30px 20px;
        margin: 20px auto;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        max-width: 400px;
        box-sizing: border-box;
    }

    .completion-card h4 {
        margin: 0 0 10px 0;
        color: #cb2030;
        font-size: clamp(1.4rem, 4vw, 1.8rem);
        font-weight: 800;
        text-align: center;
    }

    .completion-card p {
        margin: 0 0 20px 0;
        color: #334155;
        font-size: clamp(0.95rem, 3vw, 1.1rem);
        line-height: 1.5;
        text-align: center;
    }

    .btn-card-submit {
        width: 100% !important;
        max-width: 250px;
        margin: 0 auto !important;
        padding: 12px 16px !important;
        background-color: #1a1a1a !important;
        font-size: 16px !important;
    }

    .btn-card-submit:hover {
        background-color: #cb2030 !important;
    }

    .your-name {
        color: #cb2030;
    }

    .congratulations-text {
        text-align: center;
    }