.crossword-tool {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.crossword-tool__masthead {
text-align: center;
margin: 0 0 var(--space-xl);
}
.crossword-tool__eyebrow {
font-family: var(--font-display);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.crossword-tool__title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 3.4rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0 0 var(--space-md);
text-wrap: balance;
}
.crossword-tool__subtitle {
font-size: clamp(1rem, 2.5vw, 1.1rem);
color: var(--color-text-muted);
max-width: 56ch;
margin: 0 auto;
line-height: 1.6;
}
.crossword-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
margin: 0 0 var(--space-lg);
padding: 0 0 var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.crossword-levels {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.crossword-level {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: var(--space-sm) var(--space-md);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.crossword-level:hover:not(.is-active),
.crossword-level:focus-visible:not(.is-active) {
border-color: var(--color-primary);
}
.crossword-level.is-active {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-solid));
}
.crossword-level__name {
font-family: var(--font-display);
font-size: var(--font-size-md);
font-weight: 700;
color: var(--color-text);
}
.crossword-level__hint {
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.crossword-timer {
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
}
.crossword-timer span { color: var(--color-text); }
.crossword-stage {
display: flex;
gap: var(--space-xl);
align-items: flex-start;
}
.crossword-board {
flex: 0 0 auto;
}
.crossword-grid-wrap {
position: relative;
overflow: auto;
padding: 14px;
}
.crossword-grid {
display: grid;
grid-template-columns: repeat(var(--cols, 12), minmax(0, var(--xw-cell)));
gap: 0;
--xw-cell: 34px;
width: max-content;
margin: 0 auto;
}
.crossword-grid.is-complete {
outline: 2px solid var(--color-success);
outline-offset: 10px;
border-radius: var(--radius-sm);
}
.xw-cell {
position: relative;
aspect-ratio: 1;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
}
.xw-cell--block {
background: transparent;
border: none;
}
.xw-num {
position: absolute;
top: 1px;
left: 2px;
font-family: var(--font-display);
font-size: 0.55rem;
line-height: 1;
color: var(--color-text-muted);
pointer-events: none;
z-index: 1;
}
.xw-input {
width: 100%;
height: 100%;
border: none;
background: transparent;
text-align: center;
text-transform: uppercase;
font-family: var(--font-display);
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text);
caret-color: var(--color-primary);
padding: 0;
cursor: pointer;
}
.xw-input:focus { outline: none; }
.xw-input::selection { background: transparent; color: inherit; }
.xw-cell.is-active-word { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-solid)); }
.xw-cell.is-active { background: color-mix(in srgb, var(--color-primary) 34%, var(--color-surface-solid)); }
.xw-cell.is-correct .xw-input { color: var(--color-primary); }
.xw-cell.is-revealed .xw-input { color: var(--color-primary); }
.xw-cell.is-wrong .xw-input { color: var(--color-danger); }
.crossword-clue-bar {
display: flex;
align-items: stretch;
margin: 0 14px var(--space-xs);
width: 0;
min-width: calc(100% - 28px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-solid));
overflow: hidden;
transition: opacity var(--transition-fast);
}
.crossword-clue-bar[hidden] { display: none; }
.crossword-clue-bar.is-idle { opacity: 0.55; }
.crossword-clue-bar__nav {
flex: 0 0 auto;
width: 2.2rem;
background: none;
border: none;
font-size: var(--font-size-xl);
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.crossword-clue-bar__nav:hover,
.crossword-clue-bar__nav:focus-visible {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.crossword-clue-bar__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-xs);
background: none;
border: none;
text-align: left;
cursor: pointer;
}
.crossword-clue-bar__label {
flex: 0 0 auto;
font-family: var(--font-display);
font-size: var(--font-size-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
white-space: nowrap;
}
.crossword-clue-bar__text {
font-family: var(--font-serif);
font-size: var(--font-size-md);
line-height: 1.4;
color: var(--color-text);
min-height: 2.8em;
}
.crossword-clues {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
min-width: 0;
}
.crossword-clue-heading {
font-family: var(--font-display);
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
padding: 0 0 var(--space-xs);
border-bottom: 1px solid var(--color-border);
}
.crossword-clue-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 540px;
overflow-y: auto;
}
.crossword-clue {
display: flex;
align-items: baseline;
gap: var(--space-xs);
border-radius: var(--radius-sm);
}
.crossword-clue.is-active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.crossword-clue__btn {
flex: 1 1 auto;
display: flex;
gap: var(--space-sm);
align-items: baseline;
width: 100%;
padding: 3px var(--space-sm);
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: var(--font-serif);
font-size: var(--font-size-sm);
line-height: 1.35;
color: var(--color-text);
}
.crossword-clue__num {
flex: 0 0 auto;
min-width: 1.5em;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.crossword-clue.is-solved .crossword-clue__text { color: var(--color-text-muted); }
.crossword-clue.is-solved .crossword-clue__num { color: var(--color-success); }
.crossword-clue__link {
flex: 0 0 auto;
padding: 0 var(--space-sm);
color: var(--color-primary);
text-decoration: none;
font-size: var(--font-size-sm);
align-self: center;
}
.crossword-clue__link:hover { color: var(--color-primary-hover); }
.crossword-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin: var(--space-lg) 0 0;
align-items: center;
}
.crossword-button {
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--color-primary-contrast);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.crossword-button:hover,
.crossword-button:focus-visible { background: var(--color-primary-hover); }
.crossword-button--ghost {
background: var(--color-surface-solid);
border-color: var(--color-border);
color: var(--color-text);
}
.crossword-button--ghost:hover,
.crossword-button--ghost:focus-visible {
background: var(--color-surface-solid);
border-color: var(--color-primary);
color: var(--color-primary);
}
.crossword-reveal-group { position: relative; }
.crossword-reveal-menu[hidden] { display: none; }
.crossword-reveal-menu {
position: absolute;
bottom: calc(100% + var(--space-xs));
left: 0;
z-index: 5;
display: flex;
flex-direction: column;
min-width: 160px;
padding: var(--space-xs);
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.crossword-reveal-menu button {
padding: var(--space-sm) var(--space-md);
background: none;
border: none;
border-radius: var(--radius-sm);
text-align: left;
font-family: var(--font-sans);
font-size: var(--font-size-md);
color: var(--color-text);
cursor: pointer;
}
.crossword-reveal-menu button:hover,
.crossword-reveal-menu button:focus-visible {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-solid));
color: var(--color-primary);
}
.crossword-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
font-family: var(--font-serif);
font-style: italic;
color: var(--color-text-muted);
}
.crossword-error {
padding: var(--space-md);
color: var(--color-danger);
font-family: var(--font-serif);
}
.crossword-complete {
margin: var(--space-lg) 0 0;
padding: var(--space-md) var(--space-lg);
border-left: 3px solid var(--color-success);
background: color-mix(in srgb, var(--color-success) 6%, transparent);
border-radius: var(--radius-sm);
}
.crossword-complete__title {
font-family: var(--font-display);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-success);
margin: 0 0 var(--space-xs);
}
.crossword-complete__body {
font-family: var(--font-serif);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0;
}
.crossword-complete__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin: var(--space-md) 0 0;
}
.crossword-gate { display: none; }
.crossword-gate__title {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-sm);
text-align: center;
}
.crossword-gate__body {
font-family: var(--font-serif);
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-muted);
max-width: 46ch;
margin: 0 auto var(--space-lg);
text-align: center;
}
.crossword-gate__links {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.crossword-link {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
@media (width <= 960px) {
.crossword-stage { flex-direction: column; }
.crossword-clues { width: 100%; }
}
@media (width <= 768px) {
.crossword-grid {
--xw-cell: clamp(22px, calc((100vw - 2.5rem) / var(--cols, 13)), 34px);
}
}
@media (width <= 380px) {
.crossword-app { display: none; }
.crossword-gate { display: block; }
}