/* Cluster-specific layout; identity and base components come from main.css. */
.word-cluster h1 { max-width: 26ch; }
.word-cluster .lead { max-width: 65ch; }
.word-cluster .section-heading { max-width: 55rem; }
.word-cluster .filter-chip { min-width: 2.75rem; }
.word-cluster mark { padding: 0; border-radius: 0.15em; background: var(--color-accent-soft); color: var(--color-primary-strong); font-weight: 800; }
.cluster-summary { margin-block: var(--space-lg) 0; }
.cluster-summary .chip { white-space: normal; }
.cluster-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: 0; list-style: none; }
.cluster-links li { max-width: 100%; }
.cluster-links .chip, .cluster-summary .chip { min-height: 2.75rem; }
.cluster-links [aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.cluster-links--alphabet .chip { justify-content: center; min-width: 3.4rem; min-height: 3.4rem; font-family: var(--font-heading); font-size: var(--text-xl); }
.cluster-family-group + .cluster-family-group { margin-top: var(--space-xl); }
.cluster-family-card { justify-content: center; font: 700 var(--text-xl)/1.45 var(--font-heading); text-decoration: none; }
.cluster-explorer, .cluster-game { max-width: var(--container-narrow); margin-inline: auto; }
.cluster-explorer { gap: var(--space-md); }
.cluster-word { display: grid; place-items: center; min-height: 8rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-primary-soft); font: 700 clamp(1.5rem, 6vw, 3.8rem)/1.3 var(--font-heading); text-align: center; overflow-wrap: anywhere; touch-action: pan-y pinch-zoom; user-select: none; }
.cluster-word > span { max-width: 100%; }
.cluster-explorer-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); font-weight: 700; }
.cluster-explorer-controls .button { min-width: 3rem; }
.cluster-example-group .chip-list { margin-block: 0; }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) { position: relative; overflow: hidden; padding: clamp(1rem, 3vw, 1.75rem); border-color: rgba(90, 70, 214, 0.2); background: linear-gradient(145deg, var(--color-surface) 0 68%, var(--color-primary-soft) 100%); box-shadow: var(--shadow-md); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends)::before { position: absolute; top: -5rem; right: -4rem; width: 11rem; height: 11rem; border-radius: 50%; background: rgba(255, 211, 92, 0.2); content: ""; pointer-events: none; }
.cluster-explorer-kicker { position: relative; display: flex; align-items: center; gap: 0.7rem; margin-bottom: clamp(0.8rem, 2vw, 1.1rem); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; }
.cluster-explorer-letter { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 2px solid var(--color-text); border-radius: 0.75rem; background: var(--color-accent); box-shadow: 0.18rem 0.18rem 0 var(--color-text); color: var(--color-text); font: 800 var(--text-xl)/1 var(--font-heading); transform: rotate(-3deg); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-word { position: relative; min-height: clamp(9rem, 28vw, 12.5rem); border: 2px solid rgba(90, 70, 214, 0.18); background: radial-gradient(circle at 88% 16%, rgba(255, 211, 92, 0.3) 0 2.6rem, transparent 2.65rem), linear-gradient(145deg, #f1efff, var(--color-primary-soft)); box-shadow: inset 0 0 0 0.35rem rgba(255, 255, 255, 0.48); font-size: clamp(2.15rem, 10vw, 4.75rem); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-word:focus-visible { outline: 0.2rem solid var(--color-primary); outline-offset: 0.2rem; }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-word mark { padding: 0.02em 0.1em 0.04em; border-radius: 0.2em; background: var(--color-accent); box-shadow: 0.06em 0.08em 0 rgba(23, 32, 51, 0.14); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-explorer-controls { position: relative; gap: clamp(1rem, 6vw, 2.5rem); margin-block: clamp(0.9rem, 2.5vw, 1.2rem) clamp(1.1rem, 3vw, 1.45rem); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-explorer-controls .button { width: 3.5rem; min-width: 3.5rem; height: 3.5rem; padding: 0; border: 2px solid rgba(90, 70, 214, 0.42); border-radius: 50%; background: var(--color-primary-soft); box-shadow: 0 0.2rem 0 rgba(64, 48, 173, 0.18); color: var(--color-primary-strong); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-explorer-controls .button:hover { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0.28rem 0 rgba(64, 48, 173, 0.24); transform: translateY(-0.12rem); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-explorer-controls .button:active { box-shadow: 0 0.08rem 0 rgba(64, 48, 173, 0.18); transform: translateY(0.1rem); }
.cluster-arrow-icon { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cluster-explorer-position { display: grid; min-width: 7.5rem; justify-items: center; gap: 0.45rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.cluster-explorer-position progress { width: 7.5rem; height: 0.45rem; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--color-border); color: var(--color-primary); }
.cluster-explorer-position progress::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--color-border); }
.cluster-explorer-position progress::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--color-primary); transition: width var(--transition-fast); }
.cluster-explorer-position progress::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--color-primary); transition: width var(--transition-fast); }
.cluster-example-picker { position: relative; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.cluster-example-picker > p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 800; text-align: center; }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .cluster-example-group .chip-list { justify-content: center; gap: 0.55rem; }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .filter-chip { padding-inline: 1rem; box-shadow: 0 0.12rem 0 rgba(23, 32, 51, 0.1); }
:is(.cluster-explorer--letters, .cluster-explorer--families, .cluster-explorer--blends) .filter-chip[aria-pressed="true"] { box-shadow: 0 0.2rem 0 var(--color-primary-strong); transform: translateY(-0.1rem); }
.cluster-syllable-picker { position: relative; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.cluster-syllable-picker > p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 800; text-align: center; }
.cluster-syllable-picker .filter-chips { justify-content: center; gap: 0.55rem; }
.cluster-syllable-picker .filter-chip { min-width: 3.75rem; font: 800 var(--text-md)/1 var(--font-heading); }
:is(.cluster-explorer--families, .cluster-explorer--blends) { border-color: rgba(8, 124, 116, 0.22); background: linear-gradient(145deg, var(--color-surface) 0 68%, var(--color-secondary-soft) 100%); }
:is(.cluster-explorer--families, .cluster-explorer--blends) .cluster-explorer-letter { width: auto; min-width: 3.4rem; padding-inline: 0.65rem; border-color: var(--color-secondary-strong); background: var(--color-secondary-soft); box-shadow: 0.18rem 0.18rem 0 var(--color-secondary-strong); color: var(--color-secondary-strong); transform: rotate(-2deg); }
:is(.cluster-explorer--families, .cluster-explorer--blends) .cluster-word { border-color: rgba(8, 124, 116, 0.22); background: radial-gradient(circle at 88% 16%, rgba(255, 211, 92, 0.28) 0 2.6rem, transparent 2.65rem), linear-gradient(145deg, #edfbf8, var(--color-secondary-soft)); }
:is(.cluster-explorer--families, .cluster-explorer--blends) .cluster-syllable-picker .filter-chip[aria-pressed="true"] { border-color: var(--color-secondary); background: var(--color-secondary); box-shadow: 0 0.2rem 0 var(--color-secondary-strong); color: #fff; }
.cluster-example-picker strong { color: var(--color-primary-strong); font-family: var(--font-heading); }
.cluster-game-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-block: var(--space-md); }
.cluster-slots, .cluster-letter-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-block: var(--space-lg); }
.cluster-slots { flex-wrap: nowrap; gap: 0.25rem; }
.cluster-slot, .cluster-letter { display: inline-grid; place-items: center; width: 2.8rem; min-height: 3rem; flex-shrink: 0; border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); font: 700 var(--text-xl)/1 var(--font-heading); }
.cluster-slot { flex-shrink: 1; min-width: 0; border-style: dashed; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: clamp(1rem, 5vw, 1.6rem); }
.cluster-slots--long { gap: 0.125rem; }
.cluster-slots--long .cluster-slot { font-size: clamp(0.875rem, 2.6vw, 1.5rem); }
.cluster-slot.is-fixed { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.cluster-slot.is-filled { border-style: solid; border-color: var(--color-success); color: var(--color-success); background: var(--color-success-soft); }
.cluster-letter { cursor: pointer; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); touch-action: manipulation; user-select: none; transition: transform var(--transition-fast), background var(--transition-fast); }
.cluster-letter:hover:not(:disabled) { border-color: var(--color-primary); transform: translateY(-2px); }
.cluster-letter:active:not(:disabled) { transform: translateY(1px); }
.cluster-letter:disabled { opacity: 0.38; box-shadow: none; cursor: default; }
.cluster-letter.is-error { border-color: var(--color-error); background: var(--color-error-soft); }
.cluster-feedback { min-height: 1.65em; margin-block: var(--space-md) 0; font-weight: 700; }
.cluster-feedback.is-error { color: var(--color-error); }
.cluster-feedback.is-success { color: var(--color-success); }
.cluster-game [data-composer-next] { margin-top: var(--space-md); }
.cluster-sentence-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.cluster-sentences { display: grid; grid-template-columns: 1fr; gap: var(--space-md); list-style: none; padding: 0; }
.cluster-sentences .card { display: block; margin: 0; font-size: var(--text-lg); line-height: var(--leading-copy); }
.cluster-email { max-width: 42rem; gap: var(--space-sm); }
.cluster-email label { font-weight: 700; }
.cluster-email input[type="email"] { width: 100%; min-height: 3rem; padding: var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.cluster-email .cluster-consent { display: flex; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-sm); font-weight: 400; min-height: 2.75rem; cursor: pointer; }
.cluster-consent input { flex-shrink: 0; width: 1.4rem; height: 1.4rem; accent-color: var(--color-primary); margin-top: 0.15rem; }
.cluster-email .button { align-self: flex-start; white-space: normal; }
.cluster-email p { margin: 0; }
.cluster-spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cluster-spin 800ms linear infinite; }
@keyframes cluster-spin { to { transform: rotate(360deg); } }
@media (min-width: 48rem) { .cluster-sentences { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cluster-slot, .cluster-letter { width: 3rem; min-height: 3.25rem; } }
@media (prefers-reduced-motion: reduce) { .word-cluster *, .word-cluster *::before, .word-cluster *::after { animation: none !important; transition: none !important; } }