/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Theme tokens. Light by default; dark follows the OS unless the user picked a
   theme with the header toggle (stored as data-theme on <html>). The four
   category colours are the same in both themes. */
:root {
    color-scheme: light;
    --bg: #f8f9fa;
    --text: #333333;
    --heading: #2c3e50;
    --muted: #7f8c8d;
    --panel-bg: #ffffff;
    --panel-shadow: rgba(0, 0, 0, 0.1);
    --tile-bg: #ffffff;
    --tile-border: #dddddd;
    --tile-text: #2c3e50;
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --selected-border: #2c3e50;
    --eraser-bg: #ecf0f1;
    --eraser-text: #7f8c8d;
    --btn-secondary: #95a5a6;
    --btn-secondary-hover: #7f8c8d;
    --error-bg: #f8d7da;   --error-text: #721c24;   --error-border: #f5c6cb;
    --success-bg: #d4edda; --success-text: #155724; --success-border: #c3e6cb;
    --info-bg: #e3f2fd;    --info-text: #1565c0;    --info-border: #bbdefb;
    --partial-bg: #fff3cd; --partial-text: #856404;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #121417;
        --text: #e4e6eb;
        --heading: #f1f3f5;
        --muted: #9aa4ad;
        --panel-bg: #1e2227;
        --panel-shadow: rgba(0, 0, 0, 0.5);
        --tile-bg: #2a2f36;
        --tile-border: #3a414a;
        --tile-text: #e4e6eb;
        --input-bg: #15181c;
        --input-border: #3a414a;
        --selected-border: #f1f3f5;
        --eraser-bg: #3a414a;
        --eraser-text: #c9d1d9;
        --btn-secondary: #4a525c;
        --btn-secondary-hover: #5a636e;
        --error-bg: #3d1f23;   --error-text: #f5b7bd;   --error-border: #6b2a31;
        --success-bg: #1c3324; --success-text: #a8e0b8; --success-border: #2d5a3a;
        --info-bg: #182a3d;    --info-text: #9ccbf7;    --info-border: #24476b;
        --partial-bg: #3a3118; --partial-text: #f2d98a;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121417;
    --text: #e4e6eb;
    --heading: #f1f3f5;
    --muted: #9aa4ad;
    --panel-bg: #1e2227;
    --panel-shadow: rgba(0, 0, 0, 0.5);
    --tile-bg: #2a2f36;
    --tile-border: #3a414a;
    --tile-text: #e4e6eb;
    --input-bg: #15181c;
    --input-border: #3a414a;
    --selected-border: #f1f3f5;
    --eraser-bg: #3a414a;
    --eraser-text: #c9d1d9;
    --btn-secondary: #4a525c;
    --btn-secondary-hover: #5a636e;
    --error-bg: #3d1f23;   --error-text: #f5b7bd;   --error-border: #6b2a31;
    --success-bg: #1c3324; --success-text: #a8e0b8; --success-border: #2d5a3a;
    --info-bg: #182a3d;    --info-text: #9ccbf7;    --info-border: #24476b;
    --partial-bg: #3a3118; --partial-text: #f2d98a;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: 640px;
    margin: 0 auto;
    padding: 12px 16px;
}

/* Header */
header {
    position: relative;
    text-align: center;
    margin-bottom: 6px;
    padding: 0 36px; /* keeps the centred title clear of the theme toggle */
}

header h1 {
    font-size: 1.8rem;
    color: var(--heading);
    font-weight: 700;
}

.date-badge {
    background: #3498db;
    color: white;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

.theme-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid var(--tile-border);
    border-radius: 50%;
    background: var(--panel-bg);
    color: var(--heading);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    border-color: var(--muted);
}

/* Reusable panel card */
.panel {
    background: var(--panel-bg);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--panel-shadow);
    margin-bottom: 8px;
}

.panel h2 {
    color: var(--heading);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.instruction {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 12px;
}

.panel-actions,
.reveal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text);
}

textarea:focus {
    outline: none;
    border-color: #3498db;
}

/* Colour palette */
.palette {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.palette-label {
    font-weight: 600;
    color: var(--heading);
}

.color-selector {
    display: flex;
    gap: 10px;
}

.color-btn {
    width: 56px;
    height: 44px;
    border: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #2c3e50;
}

.color-btn:hover {
    transform: scale(1.08);
}

.color-btn.selected {
    border-color: var(--selected-border);
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.color-btn.yellow { background: #f1c40f; }
.color-btn.green  { background: #2ecc71; color: white; }
.color-btn.blue   { background: #3498db; color: white; }
.color-btn.purple { background: #9b59b6; color: white; }
.color-btn.eraser { background: var(--eraser-bg); color: var(--eraser-text); font-size: 16px; }

.color-btn .count {
    pointer-events: none;
}

/* The whole count (e.g. "4/4") flashes red on an over-fill attempt, then fades back. */
.count {
    transition: color 3s ease;
}

.count.flash {
    color: #e74c3c;
    transition: none; /* snap to red instantly; removing the class fades back */
}

.count.snap {
    transition: none; /* used to snap back to base immediately */
}

/* Grid */
.grid-container {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    /* Size the (square) board to the smaller of width and leftover height so
       the whole app fits without scrolling on desktop and mobile. The max()
       floors the height term so the board never collapses on short viewports. */
    width: min(480px, 92vw, max(220px, calc(100vh - 290px)));
}

.grid-cell {
    aspect-ratio: 1 / 1;
    background: var(--tile-bg);
    border: 2px solid var(--tile-border);
    color: var(--tile-text);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    padding: 6px;
    /* Never break words mid-way; app.js shrinks the font to fit instead. */
    overflow-wrap: normal;
    word-break: keep-all;
    overflow: hidden;
    text-transform: uppercase;
    user-select: none;
}

.grid-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--panel-shadow);
}

/* Assigned colours (mirror HomeConnections palette) */
.grid-cell.yellow { background: #f1c40f; color: #2c3e50; border-color: #d4ac0d; }
.grid-cell.green  { background: #2ecc71; color: white; border-color: #27ae60; }
.grid-cell.blue   { background: #3498db; color: white; border-color: #2980b9; }
.grid-cell.purple { background: #9b59b6; color: white; border-color: #8e44ad; }

/* Buttons */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn.primary { background: #3498db; color: white; }
.btn.primary:hover:not(:disabled) { background: #2980b9; }
.btn.secondary { background: var(--btn-secondary); color: white; }
.btn.secondary:hover:not(:disabled) { background: var(--btn-secondary-hover); }

.solving-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Reveal / check */
.reveal-output {
    margin-top: 12px;
}

.reveal-output .category {
    display: block;
    padding: 12px;
    margin: 8px 0;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
}

.reveal-output .category.yellow { background: #f1c40f; color: #2c3e50; }
.reveal-output .category.green  { background: #2ecc71; color: white; }
.reveal-output .category.blue   { background: #3498db; color: white; }
.reveal-output .category.purple { background: #9b59b6; color: white; }

.reveal-output .category-title {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.reveal-output .category-words {
    font-size: 16px;
}

.check-result {
    text-align: center;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.check-result.all-correct { background: var(--success-bg); color: var(--success-text); }
.check-result.partial { background: var(--partial-bg); color: var(--partial-text); }

/* Status banner */
.feedback-message {
    text-align: center;
    margin: 6px 0;
    padding: 0;
    border-radius: 8px;
    font-weight: 600;
}

.feedback-message:not(:empty) {
    padding: 8px;
    margin: 8px 0;
}

.feedback-message.error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.feedback-message.success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.feedback-message.info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* Responsive */
@media (max-width: 600px) {
    .container { padding: 8px 10px; }
    /* Reserve room for the toggle on the right only, so the title stays on one line */
    header { padding: 0 34px 0 0; }
    header h1 { font-size: 1.35rem; }
    .date-badge { font-size: 0.95rem; padding: 2px 10px; }
    .theme-toggle { width: 28px; height: 28px; font-size: 14px; }
    .grid-cell { font-size: 12px; }
    .grid { width: min(92vw, max(220px, calc(100vh - 265px))); }
    .color-btn { width: 48px; height: 38px; }
    .palette { gap: 8px; }
    .btn { padding: 10px 16px; font-size: 14px; }
}

/* Short viewports: shrink the board further so nothing scrolls */
@media (max-height: 700px) {
    header h1 { font-size: 1.5rem; }
    .panel { padding: 8px 12px; margin-bottom: 8px; }
    .grid-container { margin: 8px 0; }
}