:root {
    /* Verbs */
    --color-verb-v1: #dc2626;
    --color-verb-v2: #ef4444;
    --color-verb-inf: #f87171;
    --color-verb-aux: #b91c1c;

    /* Nouns & Pronouns */
    --color-noun: #16a34a;
    --color-pronoun: #2563eb;
    --color-pronoun-subject: #1d4ed8;

    /* Modifiers */
    --color-adjective: #0891b2;
    --color-adverb: #7c3aed;
    --color-numeral: #06b6d4;
    --color-article: #c084fc;
    --color-determiner: #a78bfa;

    /* Structure words */
    --color-preposition: #ea580c;
    --color-conjunction: #6b7280;
    --color-particle: #fbbf24;

    /* Special */
    --color-question: #db2777;
    --color-time: #9333ea;

    /* Phrase brackets */
    --bracket-prep: #ea580c;
    --bracket-noun: #16a34a;
    --bracket-verb: #dc2626;
    --bracket-time: #9333ea;
    --bracket-adverb: #7c3aed;

    /* Word breakdown */
    --color-root: #000000;
    --color-affix: rgba(0, 0, 0, 0.5);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.word {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
    display: inline-block;
    margin: 0.125rem;
    position: relative;
}

.word:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Word type colors */
.word-verb-v1 { background-color: var(--color-verb-v1); color: white; }
.word-verb-v2 { background-color: var(--color-verb-v2); color: white; }
.word-verb-inf { background-color: var(--color-verb-inf); color: white; }
.word-verb-aux { background-color: var(--color-verb-aux); color: white; }
.word-noun { background-color: var(--color-noun); color: white; }
.word-pronoun { background-color: var(--color-pronoun); color: white; }
.word-pronoun-subject { background-color: var(--color-pronoun-subject); color: white; }
.word-adjective { background-color: var(--color-adjective); color: white; }
.word-adverb { background-color: var(--color-adverb); color: white; }
.word-numeral { background-color: var(--color-numeral); color: white; }
.word-article { background-color: var(--color-article); color: white; }
.word-determiner { background-color: var(--color-determiner); color: white; }
.word-preposition { background-color: var(--color-preposition); color: white; }
.word-conjunction { background-color: var(--color-conjunction); color: white; }
.word-particle { background-color: var(--color-particle); color: black; }
.word-question { background-color: var(--color-question); color: white; }
.word-time { background-color: var(--color-time); color: white; }
.word-punctuation {
    background-color: transparent;
    color: #1f2937;
    padding: 0;
    margin: 0;
    margin-left: -0.125rem;
    margin-right: 0.25rem;
    font-size: 1.5rem;
    cursor: default;
    display: inline-block;
}
.word-punctuation:hover {
    transform: none;
    box-shadow: none;
}

.role-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.5rem;
    opacity: 0.7;
}

.breakdown-part {
    padding: 0.5rem;
    margin: 0.25rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.breakdown-root {
    background-color: #f3f4f6;
    font-weight: 600;
}

.breakdown-prefix {
    background-color: #dbeafe;
    font-weight: 500;
}

.breakdown-suffix {
    background-color: #fce7f3;
    font-weight: 500;
}

.sentence-container {
    font-size: 1.75rem;
    line-height: 3rem;
    margin: 3rem 0 2rem 0;
    padding-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

#wordDetail {
    transition: all 0.3s;
}

.audio-btn {
    cursor: pointer;
    transition: transform 0.2s;
}

.audio-btn:hover {
    transform: scale(1.1);
}

.hidden {
    display: none;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.fill-blank {
    display: inline-block;
    min-width: 120px;
    border-bottom: 2px solid #9333ea;
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
}

.blank-option {
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.blank-option:hover {
    border-color: #9333ea;
    background-color: #f3e8ff;
}

.blank-option.selected {
    border-color: #9333ea;
    background-color: #9333ea;
    color: white;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
}

.legend-color {
    width: 40px;
    height: 20px;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

/* Phrase grouping */
.phrase-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    position: relative;
    padding: 2rem 0.5rem 0.25rem 0.5rem;
    margin: 0.25rem 0.25rem 0.25rem 0.25rem;
    gap: 0.25rem;
}

/* Prepositional phrases - curved dotted arc */
.phrase-prep::before {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 5%;
    right: 5%;
    height: 1.5rem;
    border: none;
    border-top: 3px dotted var(--bracket-prep);
    border-left: 3px dotted var(--bracket-prep);
    border-right: 3px dotted var(--bracket-prep);
    border-radius: 50% 50% 0 0;
}

/* Noun phrases - square solid brackets */
.phrase-noun::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    height: 0.75rem;
    border: none;
    border-top: 3px solid var(--bracket-noun);
    border-left: 3px solid var(--bracket-noun);
    border-right: 3px solid var(--bracket-noun);
    border-radius: 0;
}

/* Time phrases - angled dashed connectors */
.phrase-time::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: -5px;
    right: -5px;
    height: 0.75rem;
    border: none;
    border-top: 3px dashed var(--bracket-time);
    border-left: 3px dashed var(--bracket-time);
    border-right: 3px dashed var(--bracket-time);
    border-radius: 0;
    clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%, calc(100% - 5px) 100%, calc(100% - 13px) 3px, 13px 3px, 5px 100%);
}

/* Verb phrases - if any remain as single groups */
.phrase-verb::before {
    content: '';
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    height: 0.75rem;
    border: none;
    border-top: 4px solid var(--bracket-verb);
    border-left: 4px solid var(--bracket-verb);
    border-right: 4px solid var(--bracket-verb);
    border-radius: 0;
}

/* Adverb phrases - wavy underline */
.phrase-adverb::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bracket-adverb);
    border-radius: 1px;
}

.phrase-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.phrase-label-prep { background-color: var(--bracket-prep); color: white; }
.phrase-label-noun { background-color: var(--bracket-noun); color: white; }
.phrase-label-verb { background-color: var(--bracket-verb); color: white; }
.phrase-label-time { background-color: var(--bracket-time); color: white; }
.phrase-label-adverb { background-color: var(--bracket-adverb); color: white; }

/* Verb frame connector for split verbs */
.verb-frame-container {
    position: relative;
    display: contents;
}

/* Verb frame - solid line over V1 */
.verb-frame-line-solid {
    height: 0;
    border-top: 4px solid var(--color-verb-v1);
    top: 0.5rem;
    z-index: 1;
}

/* Verb frame - dashed line in between */
.verb-frame-line-dashed {
    height: 0;
    border-top: 3px dashed var(--color-verb-v1);
    top: 0.5rem;
    z-index: 1;
}

/* Verb frame - solid line over V2 with arrow */
.verb-frame-line-solid-arrow {
    height: 0;
    border-top: 4px solid var(--color-verb-v1);
    top: 0.5rem;
    z-index: 1;
    position: relative;
}

.verb-frame-line-solid-arrow::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid var(--color-verb-v1);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.verb-frame-label {
    top: -0.75rem;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--color-verb-v1);
    color: white;
    white-space: nowrap;
    opacity: 0.9;
    z-index: 2;
    pointer-events: all;
}

.phrases-hidden .phrase-group::before,
.phrases-hidden .phrase-label,
.phrases-hidden .verb-frame-line-solid,
.phrases-hidden .verb-frame-line-dashed,
.phrases-hidden .verb-frame-line-solid-arrow,
.phrases-hidden .verb-frame-label {
    display: none;
}

/* Toggle switch style */
#situationMode:checked ~ div {
    background-color: #6366f1;
}
#situationMode:checked ~ div .dot {
    transform: translateX(100%);
}

/* Screen reader only - for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}