* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    color: #1a1a1a;
    line-height: 1.6;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.container {
    max-width: 100vw !important; /* Use full viewport width */
    margin: 0 auto;
    padding: 4px !important; /* Minimal padding on mobile */
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
}

header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
}

/* Header icon buttons (Clue Raider style): back (left), reset (right) */
.header-icon-btn {
    position: absolute;
    top: 10px;
    z-index: 100;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.2s;
}
.header-icon-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
}
.back-arrow {
    left: 10px;
    text-decoration: none;
    padding: 0;
}
.back-arrow .back-icon {
    width: 24px;
    height: 24px;
    stroke: white;
}
.header-reset-btn {
    right: 10px;
    padding: 0;
}
.header-reset-btn .reset-icon {
    width: 24px;
    height: 24px;
    stroke: white;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.header-content > div:first-child {
    flex: 1;
    text-align: center;
}

.header-logo {
    max-height: 48px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.palette-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.palette-selector label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.palette-select {
    padding: 8px 12px;
    border: 2px solid #1a1a1a;
    background: #e8e5e0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.palette-select:hover {
    background: #d8d5d0;
}

.palette-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.3);
}

h1 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #666;
}

.game-area {
    display: flex !important;
    gap: 10px !important; /* Minimal gap */
    align-items: flex-start;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box;
    justify-content: flex-start;
}

/* Two columns: puzzle (grid + submit bar) | clues + admin */
.puzzle-section {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    flex: 0 0 auto;
}

/* Desktop: 50/50 - puzzle + submit left, clues + help right; grid fills left column; stable on resize */
@media (min-width: 900px) {
    .game-area {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 16px 28px;
        align-items: start;
        width: 100% !important;
        min-width: 0; /* allow both columns to shrink on narrow desktop */
        box-sizing: border-box;
    }
    .puzzle-section {
        grid-column: 1;
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
        min-width: 0; /* shrink with column */
    }
    .right-column {
        grid-column: 2;
        align-self: start;
        min-width: 0;
        width: 100%; /* take full column so content can shrink */
        overflow-x: auto; /* scroll clues when column is narrow instead of clipping */
        box-sizing: border-box;
    }
    .right-column .objects-section,
    .right-column .objects-section .section {
        min-width: 0;
        overflow-x: visible; /* allow palette to extend so right column can scroll instead of clip */
    }
    .right-column .objects-section .object-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(52px, auto);
        align-items: start;
        gap: 8px 10px;
        min-width: 380px; /* so clue boxes aren't clipped; right column scrolls when narrow */
    }
    .right-column .objects-section .object-palette > * {
        grid-column: span 1;
    }
    /* Grid fills puzzle section at 85% so submit bar fits; container query scales grid + labels */
    .grid-container {
        container-type: inline-size;
        max-width: 85%;
        width: 85%;
        min-width: 260px; /* don't shrink below usable size when window is narrow */
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto; /* scroll to see full grid when viewport is short */
        min-height: min-content; /* full grid always visible or scrollable */
        box-sizing: border-box;
    }
    .grid-container .grid-wrapper {
        width: 100%;
        min-width: 0; /* Allow shrink so wrapper fits container; avoids horizontal scrollbar */
    }
    .grid-container .grid-with-labels {
        min-width: 0;
        flex: 1;
    }
    .grid-container .grid {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
    .grid-container .row-label {
        height: calc((100cqw - 46px) / 7); /* match grid cell height (grid - gaps) / 7 */
        min-height: 0;
    }
    .grid-container .column-label {
        width: calc((100cqw - 46px) / 7);
        min-width: 0;
    }
}

/* Mobile override - must come after base definition */
@media (max-width: 768px) {
    .puzzle-section {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

.grid-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #e8e5e0;
    padding: 10px 10px 0 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 0;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    overflow-x: auto; /* When resized narrow, scroll to see all columns */
    overflow-y: auto; /* When viewport is short, scroll to see full grid */
    min-width: 0;
    min-height: min-content; /* Don't shrink below grid height so full grid is shown */
}
/* Below desktop: cap width and center so grid doesn't stretch on narrow viewports */
@media (max-width: 899px) {
    .grid-container {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.grid-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: min-content; /* Don't shrink below grid + labels so horizontal scroll works */
}

.row-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
    padding-left: 0;
    margin-left: 0;
}

.row-label {
    width: 30px;
    height: calc((500px - 12px) / 7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
}

.grid-with-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
    padding-left: 0;
}

.column-labels {
    display: flex;
    gap: 2px;
    padding-left: 0;
    margin-left: 0;
    height: 30px;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.column-label {
    width: calc((500px - 12px) / 7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
}

/* Highlight layer when user clicks an unallocated row/column label (no placement in that row/col yet) */
.unallocated-highlight-layer {
    position: absolute;
    inset: 0;
    background: rgba(255, 224, 102, 0.35);
    pointer-events: none;
    z-index: 0;
    border-radius: 2px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0.75px;
    background: rgba(26, 26, 26, 0.3);
    padding: 0.75px;
    width: 500px;
    height: 500px;
    overflow: hidden; /* Prevent shapes (e.g. ring) from spilling out and forming overlay */
}

.grid.no-lines {
    gap: 0;
    background: transparent;
    padding: 0;
}

.grid-wrapper.no-labels .row-labels,
.grid-wrapper.no-labels .column-labels {
    display: none;
}

/* Hide player-placed indicators when grid lines are hidden */
.container.hide-indicators .grid-cell.player-placed::before,
.container.hide-indicators .grid-cell.player-placed::after {
    display: none;
}

/* Completed view - hide ALL indicators, ticks, and marks */
.grid-container.completed-view .grid-cell::before,
.grid-container.completed-view .grid-cell::after {
    display: none !important;
    content: '' !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: none !important;
}

.grid-container.completed-view .grid-cell.player-placed::before,
.grid-container.completed-view .grid-cell.player-placed::after,
.grid-container.completed-view .grid-cell.placement-correct::before,
.grid-container.completed-view .grid-cell.placement-correct::after,
.grid-container.completed-view .grid-cell.placement-incorrect::before,
.grid-container.completed-view .grid-cell.placement-incorrect::after,
.grid-container.completed-view .grid-cell.has-object::before,
.grid-container.completed-view .grid-cell.has-object::after {
    display: none !important;
    content: '' !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: none !important;
}

.grid-container.completed-view .cell-marks {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure completed view cells have no visual indicators at all */
.grid-container.completed-view .grid-cell {
    position: relative;
}

.grid-container.completed-view .grid-cell *::before,
.grid-container.completed-view .grid-cell *::after {
    /* Allow shape pseudo-elements (like concentric rings) to display */
    /* Only hide indicator pseudo-elements, not shape elements */
}

/* Exception: Allow concentric shape inner rings to display in completed view */
.grid-container.completed-view .grid-cell .shape-concentric::before,
.grid-container.completed-view .grid-cell .shape-concentric::after {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.grid-container.completed-view .grid-cell .shape-concentric .inner-circle-3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Completed puzzle view - main display grid when puzzle is solved (same size as puzzle grid during play) */
/* Use same sizing as play mode: no width overrides, inherit 85% + container query from 900px media query */
.grid-container.completed-view {
    border: 4px solid #333;
    border-radius: 8px;
    padding: 10px 10px 0 10px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden; /* no horizontal scrollbar - center content instead */
    max-width: 100%; /* prevent overflow */
}

/* Keep same flex layout - no gap so grid has even padding (labels collapsed) */
.grid-container.completed-view > .grid-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.grid-container.completed-view .grid-wrapper {
    position: relative;
    width: auto;
    flex-shrink: 0;
    margin: 0;
    align-self: center;
}

.grid-container.completed-view .grid.no-lines {
    width: 500px !important;
    height: 500px !important;
    min-width: 500px !important;
    flex-shrink: 0 !important;
    gap: 0;
    background: transparent;
    padding: 0;
}

/* Make completed view grid cells look exactly like solution grid cells */
.grid-container.completed-view .grid-cell {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.grid-container.completed-view .grid-cell .shape {
    width: 100%;
    height: 100%;
}

/* Hide labels and remove their space in completed view - even padding around grid */
.grid-container.completed-view .row-labels,
.grid-container.completed-view .column-labels {
    visibility: hidden;
    pointer-events: none;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}
.grid-container.completed-view .grid-with-labels {
    gap: 0 !important;
    min-width: 500px !important;
    flex-shrink: 0 !important;
}

/* Share buttons container - always below puzzle, never to the side */
.share-buttons {
    display: none !important; /* Hidden by default - never show unless in completed view */
    flex-direction: row; /* Internal layout: text + buttons centered */
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    padding: 8px 20px 15px;
    clear: both;
    order: 999; /* Ensure it appears last in flex container */
    flex-shrink: 0; /* Don't shrink */
    box-sizing: border-box;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
}

/* Only show buttons when in completed view - this is the ONLY way they appear */
.grid-container.completed-view .share-buttons {
    display: flex !important;
    visibility: visible !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

/* When puzzle is complete: hide submit bar, center content, no scrollbar */
.puzzle-section:has(.grid-container.completed-view) {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.puzzle-section:has(.grid-container.completed-view) .submit-bar {
    display: none !important;
}

.grid-container.completed-view .share-retry-btn {
    display: none !important; /* removed - causes color issues when pressed */
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    width: auto;
    height: auto;
}

/* Text centered under puzzle; head row = medal + "PUZZLE SOLVED" */
.share-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 12px;
    text-align: center;
}

.share-text-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.share-text-medal {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.share-text-main {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: normal;
    color: #333;
    line-height: 1.2;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

.share-text-sub {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: normal;
    color: #666;
    line-height: 1.2;
}

/* Buttons group on the right */
.share-buttons-group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.share-buttons button {
    padding: 0;
    font-size: 0;
    border: 2px solid #8B7355;
    border-radius: 50%;
    background: white;
    color: #8B7355;
    cursor: pointer;
    transition: all 0.2s;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.share-buttons button:hover {
    background: #f5f5f5;
    border-color: #6B5B3D;
    color: #6B5B3D;
    transform: translateY(-2px);
}

.share-buttons button:active {
    transform: translateY(0);
}

.share-buttons button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
}

.share-buttons button:hover {
    background: #333;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.share-buttons button:active {
    transform: translateY(0);
}

/* Mobile responsive for share buttons */
@media (max-width: 768px) {
    .share-buttons {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 15px;
        padding: 12px 12px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .share-text {
        align-items: center;
        text-align: center;
        padding-left: 0;
        padding-right: 8px;
        min-width: 0;
        flex: 0 0 auto;
    }
    
    .share-text-main {
        font-size: 20px;
    }
    
    .share-text-sub {
        font-size: 14px;
    }
    
    .share-buttons-group {
        gap: 10px;
        flex-shrink: 0;
    }
    
    .share-buttons {
        padding: 12px 12px 12px 12px !important;
        gap: 8px !important;
    }
    
    .share-buttons button {
        width: 44px;
        height: 44px;
    }
    
    .share-buttons button svg {
        width: 18px;
        height: 18px;
    }
    
    .grid-container.completed-view {
        padding: 8px 8px 0 8px !important;
        border-width: 3px;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
}

/* Mobile responsive styles */
@media (max-width: 1024px) {
    .game-area {
        flex-direction: column;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .puzzle-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    
    .right-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box !important;
    }
    
    .solution-section {
        width: 100%;
    }
}

@media (max-width: 768px) {
    body {
        overscroll-behavior-y: none; /* Prevent drag-up so grid top doesn't go under header */
    }
    .container {
        padding: 2px;
    }
    
    header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
        margin-bottom: 6px;
        padding-bottom: 6px;
        padding-top: 2px;
    }
    
    .back-arrow {
        top: 2px !important;
        left: 2px !important;
        width: 36px !important;
        height: 36px !important;
    }
    .back-arrow .back-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .header-reset-btn {
        top: 2px !important;
        right: 2px !important;
        width: 36px !important;
        height: 36px !important;
    }
    .header-reset-btn .reset-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .header-content {
        flex-direction: column;
        gap: 6px;
        justify-content: center;
    }
    
    .header-content > div:first-child {
        width: 100%;
    }
    
    h1 {
        font-size: 20px;
        margin-bottom: 1px;
    }
    
    .header-logo {
        max-height: 32px;
    }
    
    .subtitle {
        font-size: 9px;
        letter-spacing: 0.5px;
    }
    
    .palette-selector {
        font-size: 11px;
    }
    
    .palette-selector label {
        font-size: 11px;
    }
    
    .palette-select {
        padding: 5px 8px;
        font-size: 11px;
    }
    
    .game-area {
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .puzzle-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
    }
    
    .right-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .objects-section,
    .help-panel {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .help-panel-body {
        overflow-x: hidden;
    }
    .solution-revealed {
        overflow-x: hidden;
    }
    
    .grid-container {
        width: 100%;
        padding: 1px 1px 0 1px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
        box-shadow: none !important;
    }
    
    .grid-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .grid-with-labels {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .objects-section {
        margin-top: -1px !important;
    }
    
    .grid-wrapper {
        width: 100%;
        box-sizing: border-box;
        gap: 1px;
    }
    
    .row-labels {
        flex-shrink: 0;
        gap: 0;
        padding-top: 0;
    }
    
    .grid-with-labels {
        gap: 0;
    }
    
    .column-labels {
        gap: 0;
        padding-left: 0;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: 18px !important;
        line-height: 18px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .grid {
        width: calc(100vw - 4px - 2px - 18px - 1px - 2px); /* container padding + grid-container padding - row labels width - gap - safety margin */
        max-width: calc(100vw - 4px - 2px - 18px - 1px - 2px);
        height: auto;
        aspect-ratio: 1;
        padding: 0.5px;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Main display solved grid: use same responsive sizing as play grid on mobile */
    .grid-container.completed-view .grid.no-lines {
        width: calc(100vw - 4px - 2px - 18px - 1px - 2px) !important;
        max-width: calc(100vw - 4px - 2px - 18px - 1px - 2px) !important;
        height: auto !important;
        min-width: 0 !important;
    }
    .grid-container.completed-view,
    .grid-container.completed-view .grid-wrapper {
        min-width: 0 !important;
    }
    .grid-container.completed-view .grid-with-labels {
        min-width: 0 !important;
    }
    
    .grid-container {
        margin-bottom: -1px !important;
    }
    
    .objects-section {
        margin-top: -1px !important;
    }
    
    .row-label {
        width: 18px;
        font-size: 11px;
        height: calc((100vw - 4px - 2px - 18px - 1px - 2px - 1px) / 7); /* Match grid cell height */
    }
    
    .column-label {
        width: calc((100vw - 4px - 2px - 18px - 1px - 2px - 1px) / 7); /* Match grid cell width */
        font-size: 11px;
        height: 18px;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .grid {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .objects-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1px !important;
        padding-top: 0 !important;
        margin-top: -5px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    .objects-section .section {
        padding: 0 2px 8px 2px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .objects-section .section h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    .column-labels {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: 18px !important;
        line-height: 18px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .grid-container {
        margin-bottom: 0 !important;
    }
    
    .submit-bar {
        margin-bottom: 0 !important;
        flex-wrap: nowrap !important;
        max-width: 100%;
        padding: 8px 10px;
        gap: 8px;
    }
    .submit-bar .submit-control-bar {
        flex-wrap: nowrap !important;
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }
    .submit-bar .submit-control-group-left,
    .submit-bar .submit-control-area,
    .submit-bar .submit-control-group-right {
        flex-shrink: 0;
        min-width: 0;
    }
    .submit-bar .submit-control-group-left {
        gap: 6px;
    }
    .submit-bar .submit-control-group-right {
        gap: 6px;
    }
    .submit-bar .puzzle-timer-in-bar {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 13px;
    }
    .submit-bar .submit-btn-primary,
    .submit-bar #check-solution,
    .submit-bar #undo-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    .submit-bar .submit-btn-primary {
        padding: 6px 12px 6px 6px;
    }
    .submit-bar .submit-btn-x {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .object-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(44px, auto);
        align-items: start;
        gap: 4px 5px !important;
        padding: 0 2px 0 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .object-palette > * {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        grid-column: span 1;
    }
    
    .objects-section .section {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .palette-object-wrapper {
        grid-template-columns: 42px 1fr;
        align-items: flex-start;
        gap: 4px 6px !important;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        overflow: hidden;
        padding: 3px 4px !important;
        border-width: 1px;
        border-radius: 4px;
    }
    .palette-status-dot-cell {
        min-width: 12px;
    }
    .palette-status-dot-cell.palette-border-marks::before,
    .palette-status-dot-cell.palette-border-placed::before,
    .palette-status-dot-cell.palette-border-correct::before,
    .palette-status-dot-cell.palette-border-incorrect::before {
        width: 8px;
        height: 8px;
    }
    
    .palette-object-wrapper .palette-object {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .palette-object-wrapper .palette-object-clues {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow: visible;
        word-break: break-word;
        padding-left: 4px;
    }
    
    .palette-object-clues {
        font-size: 12px;
        gap: 3px;
    }
    /* Keep tick/indicator visible on mobile (first item to the right of icon) */
    .palette-object-clues .palette-object-tick,
    .palette-object-clues .palette-object-indicator {
        flex-shrink: 0 !important;
        min-width: 12px;
        min-height: 12px;
    }
    .palette-object-clues .palette-object-indicator {
        min-width: 8px;
        min-height: 8px;
    }
    
    .palette-clue {
        padding: 1px 2px;
    }
    
    /* Compact visual clue blocks so at least 2 fit per row on mobile */
    .palette-clue-visual {
        gap: 1px;
    }
    .clue-visual-column-box {
        min-width: 18px !important;
        width: 18px !important;
        min-height: 16px !important;
        height: 16px !important;
    }
    .clue-visual-column-box .clue-visual-col-letter {
        font-size: 12px !important;
    }
    .clue-visual-column .clue-visual-col-arrow {
        width: 8px !important;
        height: 4px !important;
        max-width: 8px !important;
        max-height: 4px !important;
    }
    .clue-visual-row-box {
        min-width: 22px !important;
        width: 22px !important;
        min-height: 16px !important;
        height: 16px !important;
    }
    .clue-visual-row-box .clue-visual-row-num {
        font-size: 12px !important;
    }
    .clue-visual-row .clue-visual-row-arrow {
        width: 6px !important;
        height: 10px !important;
        max-width: 6px !important;
        max-height: 10px !important;
    }
    .clue-visual-direction-center {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    .clue-visual-direction-north .clue-visual-direction-arrow,
    .clue-visual-direction-south .clue-visual-direction-arrow {
        width: 14px !important;
        height: 8px !important;
        max-width: 14px !important;
        max-height: 8px !important;
    }
    .clue-visual-direction-east .clue-visual-direction-arrow,
    .clue-visual-direction-west .clue-visual-direction-arrow {
        width: 8px !important;
        height: 14px !important;
        max-width: 8px !important;
        max-height: 14px !important;
    }
    /* Mobile: 4px square + 2px gap + 18px center + 2px gap + 4px square = 30px (even spacing, no overlap) */
    .clue-visual-next-to-grid {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        flex-shrink: 0;
    }
    .clue-visual-next-to-center {
        width: 18px !important;
        height: 18px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .clue-visual-next-to-edge-square {
        width: 4px !important;
        height: 4px !important;
    }
    /* Center edge squares so they're balanced around the center icon */
    .clue-visual-next-to-edge-n {
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .clue-visual-next-to-edge-e {
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .clue-visual-next-to-edge-s {
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .clue-visual-next-to-edge-w {
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .clue-visual-between-rows .clue-visual-row-box {
        min-width: 42px !important;
        width: auto !important;
        padding: 0;
    }
    .clue-visual-between-cols .clue-visual-column-box {
        min-width: 36px !important;
        min-height: 20px !important;
        width: auto !important;
        height: auto !important;
        padding: 3px 3px;
    }
    .clue-visual-edge-grid {
        grid-template-columns: repeat(5, 4px);
        grid-template-rows: repeat(5, 4px);
        padding: 1px;
    }
    .clue-visual-edge-cell {
        width: 4px;
        height: 4px;
        min-width: 4px;
        min-height: 4px;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .palette-object {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .drag-preview {
        width: 30px;
        height: 30px;
        box-sizing: border-box;
    }
    
    .section {
        padding: 5px;
        margin-bottom: 5px;
        margin-top: 0;
    }
    
    .objects-section .section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .section h2 {
        font-size: 12px;
        margin-bottom: 5px;
        padding-bottom: 2px;
    }
    
    .btn-primary, .btn-secondary {
        padding: 6px;
        font-size: 10px;
        margin-bottom: 3px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1px 1px 1px 0 !important;
    }
    
    header {
        margin-bottom: 3px;
        padding-bottom: 3px;
        padding-top: 1px;
    }
    
    .back-arrow {
        top: 1px !important;
        left: 1px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .back-arrow .back-icon {
        width: 18px !important;
        height: 18px !important;
    }
    .header-reset-btn {
        top: 1px !important;
        right: 1px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .header-reset-btn .reset-icon {
        width: 18px !important;
        height: 18px !important;
    }
    h1 {
        font-size: 16px;
    }
    
    .header-logo {
        max-height: 28px;
    }
    
    .subtitle {
        font-size: 8px;
    }
    
    .grid-container {
        padding: 0.5px 0.5px 0 0 !important;
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
        box-shadow: none !important;
    }
    
    .grid-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .grid-with-labels {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .objects-section {
        margin-top: -1px !important;
    }
    
    .grid-wrapper {
        width: 100%;
        box-sizing: border-box;
        gap: 0.5px;
        margin-left: 0;
        padding-left: 0;
    }
    
    .row-labels {
        flex-shrink: 0;
        gap: 0;
        padding-top: 0;
    }
    
    .grid-with-labels {
        gap: 0.5px;
    }
    
    .column-labels {
        gap: 0;
        padding-left: 0;
        margin-left: 0;
    }
    
    .grid {
        width: calc(100vw - 1px - 14px - 2px - 4px); /* container padding - row labels width - gap - safety margin */
        max-width: calc(100vw - 1px - 14px - 2px - 4px);
        height: auto;
        aspect-ratio: 1;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }
    
    .row-label {
        width: 14px;
        font-size: 10px;
        height: calc((100vw - 1px - 14px - 2px - 4px) / 7); /* Match grid cell height */
        padding-left: 0;
        margin-left: 0;
    }
    
    .column-label {
        width: calc((100vw - 1px - 14px - 2px - 4px) / 7); /* Match grid cell width */
        font-size: 10px;
        height: 14px;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }
    
    .grid {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .objects-section {
        padding: 0;
        padding-top: 0;
        margin-top: -2px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
    
    .objects-section .section {
        padding-top: 0;
        margin-top: 0;
        padding-left: 4px;
        padding-right: 4px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
    }
    
    .objects-section .section h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 3px !important;
    }
    
    .column-labels {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: 12px !important;
        line-height: 12px !important;
    }
    
    .grid-with-labels {
        gap: 0 !important;
    }
    
    .object-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(40px, auto);
        align-items: start;
        gap: 3px 4px !important;
        padding: 0 2px 0 2px !important;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .object-palette > * {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        grid-column: span 1;
    }
    
    .objects-section .section {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .palette-object-wrapper {
        grid-template-columns: 42px 1fr;
        align-items: flex-start;
        gap: 3px 4px !important;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
        overflow: hidden;
        padding: 2px 3px !important;
        border-width: 1px;
        border-radius: 4px;
    }
    .palette-status-dot-cell {
        min-width: 10px;
    }
    .palette-status-dot-cell.palette-border-marks::before,
    .palette-status-dot-cell.palette-border-placed::before,
    .palette-status-dot-cell.palette-border-correct::before,
    .palette-status-dot-cell.palette-border-incorrect::before {
        width: 6px;
        height: 6px;
    }
    
    .palette-object-wrapper .palette-object {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .palette-object-wrapper .palette-object-clues {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow: visible;
        word-break: break-word;
        padding-left: 4px;
    }
    
    .palette-object-clues {
        padding-top: 0;
        font-size: 10px;
        gap: 2px;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
    
    .palette-object-tick {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
        font-size: 9px;
        flex-shrink: 0 !important;
    }
    .palette-object-indicator {
        width: 8px;
        height: 8px;
        min-width: 8px;
        min-height: 8px;
        flex-shrink: 0 !important;
    }
    
    .palette-clue {
        padding: 1px 2px;
        font-size: 10px;
        border-radius: 1px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        line-height: 1.15;
    }
    /* Only text-block clues take full width so they wrap; visual clues stay auto and flow in a row */
    .palette-object-clues .palette-clue-text-block {
        width: 100%;
    }
    /* Visual clue letters/numbers: keep readable on phone */
    .clue-visual-column-box .clue-visual-col-letter,
    .clue-visual-row-box .clue-visual-row-num {
        font-size: 12px !important;
    }
    
    .global-clues {
        margin-bottom: 4px;
        padding: 2px 3px;
        font-size: 8px;
    }
    
    .palette-object {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        aspect-ratio: 1 / 1 !important;
        margin-left: 0;
        padding-left: 0;
        overflow: hidden;
    }
    
    .drag-preview {
        width: 27px;
        height: 27px;
        box-sizing: border-box;
    }
    
    .section {
        padding: 3px;
        margin-bottom: 3px;
        margin-top: 0;
    }
    
    .objects-section .section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .section h2 {
        font-size: 10px;
        margin-bottom: 3px;
        padding-bottom: 1px;
    }
    
    .btn-primary, .btn-secondary {
        padding: 4px;
        font-size: 8px;
        margin-bottom: 2px;
    }
}

/* Keep 2 columns even on very small phones so compact padding can fit two cards per row */
/* (Single-column removed; tight padding at 768px/480px allows 2 columns to fit) */

/* Drag preview */
.drag-preview {
    width: 33px;
    height: 33px;
    background: #e8e5e0;
    border: 2px solid #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.drag-preview .shape {
    width: 100%;
    height: 100%;
}

.grid-cell {
    /* Background color is set via inline styles in JavaScript with !important */
    /* Removing CSS default to avoid conflicts - all cells get inline background-color */
    position: relative;
    cursor: pointer;
    overflow: hidden; /* Keep shape (e.g. ring) inside cell; prevents huge oval overlay */
    transition: opacity 0.2s, box-shadow 0.2s;
    touch-action: pan-y; /* allow vertical scroll on mobile */
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.grid-cell:hover {
    opacity: 0.9;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.grid-cell.has-object {
    cursor: move;
}

.grid-cell.has-object:not([draggable="true"]) {
    cursor: not-allowed;
}

/* Visual indicator for player-placed objects */
.grid-cell.player-placed {
    position: relative;
}

.grid-cell.player-placed::before {
    display: none; /* Hide default black dot - we use green tick/red cross instead */
}

.grid-cell.player-placed:not(.placement-correct):not(.placement-incorrect)::before {
    display: none; /* Ensure black dot never shows */
}

.grid-cell.placement-correct::before {
    content: '✓' !important;
    background: #4CAF50 !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    width: 16px !important;
    height: 16px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 3px rgba(76, 175, 80, 0.3) !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 20 !important;
}

.grid-cell.placement-incorrect::before {
    content: '✗' !important;
    background: #f44336 !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    width: 16px !important;
    height: 16px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 3px rgba(244, 67, 54, 0.3) !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 20 !important;
}

.grid-cell.player-placed::after {
    /* Removed border overlay - was causing cells to appear darker */
    /* The ::before dot indicator is sufficient to mark player-placed objects */
    display: none;
}

/* Player-placed objects keep their border regardless of row/column usage */

.grid-cell.drag-over {
    background: #e0e0e0;
    border: 2px dashed #1a1a1a;
}

/* Placeable cells (empty cells where objects can be placed) are white */
/* When a row/column is used (has player-placed object), cells in that row/column are no longer placeable */
.grid-cell.placeable:not(.has-object):not(.drag-over) {
    background: #ffffff !important;
}

/* Non-placeable cells (in used row/column) use normal grid background */
/* Background is set via inline style in updateRowColumnCrossHatching() with !important */
.grid-cell.non-placeable:not(.has-object):not(.drag-over) {
    cursor: not-allowed;
    /* Removed opacity: 0.7 - was causing cells to appear different from normal background */
}

/* Cells with objects keep their normal appearance (background is covered by object) */
.grid-cell.has-object {
    /* Objects override background color */
}

/* Highlight the cell when user clicks the clue for an already-placed object */
.grid-cell.placed-cell-highlight {
    box-shadow: inset 0 0 0 3px #ff9800;
    z-index: 2;
    position: relative;
}

/* Cell marks */
.cell-marks {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
}

.cell-mark {
    width: 20px;
    height: 20px;
    background: white;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
}

/* X mark: same size as other marks, same position (top-right via .cell-marks) */
.cell-mark.mark-x {
    font-size: 14px;
    font-weight: bold;
}

.cell-mark.highlighted {
    background: #FFE066;
    border: 2px solid #1a1a1a;
    box-shadow: 0 0 4px rgba(255, 224, 102, 0.8);
    transform: scale(1.15);
}

/* Mark Dialog - permanently hidden (no longer used); !important prevents any script from showing it */
#mark-dialog.mark-dialog,
.mark-dialog {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: flex-start;
    justify-content: flex-start;
}

.mark-dialog-content {
    background: #ffffff !important;
    border: 3px solid #1a1a1a;
    border-radius: 6px;
    padding: 8px;
    width: 210px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    position: fixed;
    opacity: 1 !important;
    z-index: 1001;
    isolation: isolate;
    box-sizing: border-box;
    flex-shrink: 0; /* prevent flex from shrinking/growing when parent is flex */
}

.mark-dialog-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: -1;
    border-radius: 6px;
    pointer-events: none;
}

.mark-dialog-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-bottom: 8px;
}

.mark-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a1a;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 3px;
    transition: background 0.15s;
}

.mark-dialog-close:hover {
    background: #f0f0f0;
}

/* Feedback Dialog (replaces sidebar) */
.feedback-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.feedback-dialog-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.feedback-dialog-content {
    position: relative;
    background: #e8e5e0;
    border: 3px solid #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.feedback-dialog.feedback-success .feedback-dialog-content {
    border-color: #4caf50;
    background: #e8f5e9;
}
.feedback-dialog.feedback-success .feedback-dialog-title {
    color: #2e7d32;
}
.feedback-dialog.feedback-error .feedback-dialog-content {
    border-color: #f44336;
    background: #ffebee;
}
.feedback-dialog.feedback-error .feedback-dialog-title {
    color: #c62828;
}
.feedback-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}
.feedback-dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.feedback-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a1a;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s;
}
.feedback-dialog-close:hover {
    background: rgba(0, 0, 0, 0.08);
}
.feedback-dialog-message {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.feedback-dialog-actions {
    display: flex;
    justify-content: flex-end;
}

/* Help Dialog (Clue Raider style) */
.help-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.help-dialog-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.help-dialog-content {
    position: relative;
    background: #e8e5e0;
    border: 3px solid #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.help-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.help-dialog-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.help-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a1a1a;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s;
}
.help-dialog-close:hover {
    background: rgba(0, 0, 0, 0.08);
}
.help-dialog-body {
    flex: 1;
    overflow: visible;
    margin-bottom: 16px;
    padding-right: 4px;
}
.help-dialog-body .help-section {
    margin-bottom: 16px;
}
.help-dialog-body .help-section:last-child {
    margin-bottom: 0;
}
.help-dialog-body .help-section h3 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    border-bottom: 1px solid rgba(26, 26, 26, 0.3);
    padding-bottom: 4px;
}
.help-dialog-body .help-section p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}
.help-dialog-body .help-section p:last-child {
    margin-bottom: 0;
}
.help-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Help panel (Clue Raider style): light grey outer frame, white content */
.help-panel {
    background: #e8e5e0;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.help-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: none;
    letter-spacing: 0.02em;
    background: #e0ddd8;
    border-bottom: 1px solid #1a1a1a;
    user-select: none;
    color: #4a4a4a;
}
.help-panel-header:hover {
    background: #d5d2cc;
}
.help-panel-title {
    flex: 1;
}
.help-panel-toggle {
    font-size: 18px;
    line-height: 1;
    width: 24px;
    text-align: center;
    font-weight: normal;
}
.help-panel.collapsed .help-panel-toggle {
    transform: rotate(-90deg);
}
.help-panel-body {
    padding: 14px 12px 12px 12px;
    min-width: 0;
    background: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #4a4a4a;
    -webkit-user-select: text;
    user-select: text;
}
.help-panel.collapsed .help-panel-body {
    display: none;
}
.help-panel-content {
    min-width: 0;
    overflow-wrap: break-word;
}
/* Footer: difficulty and ID below a separator line at bottom of help panel */
.help-panel-footer {
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 26, 26, 0.2);
}
.help-panel-footer .help-puzzle-info {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.help-puzzle-info {
    margin-bottom: 0;
    padding-bottom: 0;
}
.help-puzzle-info .difficulty-badge-in-help {
    font-size: 0.9em;
}
.help-puzzle-hex-id {
    margin-top: 6px;
    font-size: 0.8em;
    font-family: ui-monospace, monospace;
    color: #666;
    letter-spacing: 0.05em;
}

/* Shape legend under difficulty: each shape (black & white) with name */
.help-shape-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    align-items: center;
}
.help-shape-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.help-shape-legend-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
.help-shape-legend-icon .shape {
    width: 18px;
    height: 18px;
    filter: brightness(0);
}
/* Force small circle to stay in its box (createShapeElement sets position:absolute + 50% inline) */
.help-shape-legend-icon .shape.shape-small_circle {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}
.help-shape-legend-name {
    font-size: 12px;
    color: #333;
    text-transform: capitalize;
}

/* Next To diagram: 3×3 grid, center dot, valid arrows, diagonal × */
.help-next-to-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
}
.help-next-to-grid {
    display: grid;
    grid-template-columns: repeat(3, 28px);
    grid-template-rows: repeat(3, 28px);
    gap: 2px;
    background: #e8e4de;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
}
.help-next-to-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}
.help-next-to-center {
    color: #1a1a1a;
}
.help-next-to-valid {
    color: #2e7d32;
}
.help-next-to-diagonal {
    color: #999;
    font-size: 16px;
}
.help-next-to-wrap p {
    margin: 0;
}

/* Visual clue types: icon + explanation rows */
.help-clue-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
.help-clue-type-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.help-clue-type-icon {
    flex-shrink: 0;
    width: 72px;
    min-width: 72px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2efe9;
    border: 1px solid #e5e0d8;
    border-radius: 6px;
    padding: 4px;
    overflow: visible;
}
.help-clue-type-icon .palette-clue {
    transform: scale(0.9);
}
.help-clue-type-text {
    flex: 1;
    min-width: 0;
}
.help-clue-type-name {
    font-weight: 600;
    font-size: 13px;
    color: #3d3329;
    margin-bottom: 2px;
}
.help-clue-type-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #333;
}

/* Help action blocks (Place / Mark / X) at top of help - Clue Raider style */
.help-action-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.help-action-block {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f2efe9;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    box-sizing: border-box;
}
.help-action-block-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #1a1a1a;
}
.help-action-block-icon svg {
    width: 20px;
    height: 20px;
}
.help-action-block-letter {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}
.help-action-block-x {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
}
.help-action-block-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.help-action-block-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a4a4a;
}
.help-action-block-desc {
    font-size: 11px;
    line-height: 1.4;
    color: #4a4a4a;
}

.help-panel-content .help-section {
    margin-bottom: 18px;
}
.help-panel-content .help-section:last-child {
    margin-bottom: 0;
}
/* Clue Raider / Sherlockify style: headings large serif uppercase, paragraphs sans-serif */
.help-panel-content .help-section h3 {
    margin: 0 0 10px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3d3329;
    border-bottom: none;
    padding-bottom: 0;
}
.help-panel-content .help-section p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
}
.help-panel-content .help-section p:last-child {
    margin-bottom: 0;
}
.help-panel-actions {
    display: none; /* Admin and Debug buttons hidden */
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(26, 26, 26, 0.2);
}
.help-palette-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(26, 26, 26, 0.2);
    flex-wrap: wrap;
}
.help-palette-label {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}
.help-palette-select {
    min-width: 120px;
    padding: 4px 8px;
    font-size: 13px;
}
.help-rules-section {
    margin-top: 12px;
}
.help-rules-section h2 {
    margin: 0 0 6px 0;
    font-size: 14px;
}
.help-rules-section .rules {
    font-size: 13px;
    line-height: 1.4;
}
.submit-mode-section {
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid rgba(26, 26, 26, 0.2);
}
.submit-mode-section .submit-mode-toggle-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.help-panel-btn.active {
    background: rgba(76, 175, 80, 0.3);
    border-color: #4caf50;
    color: #2e7d32;
}
.help-admin-content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(26, 26, 26, 0.2);
}
.help-admin-content .human-solver-section,
.help-admin-content .solution-section {
    margin-bottom: 0;
}
.help-admin-content .human-solver-section:last-child,
.help-admin-content .solution-section:last-child {
    margin-bottom: 0;
}
/* Start Solving under solution grid: minimal spacing */
.help-admin-content .solution-footer {
    margin-top: 6px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.help-admin-content .solution-footer .btn-primary {
    width: 100%;
    max-width: 100%;
}
/* Solution grid in help admin: larger (not tiny), minimal spacing */
.help-admin-content .solution-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.help-admin-content .solution-section .solution-container {
    gap: 0;
    width: 100%;
    max-width: 100%;
}
.help-admin-content .solution-section .solution-wrapper {
    padding: 6px 6px 0 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* Solution grid same size as puzzle grid (500px × 500px) */
.help-admin-content .solution-section .solution-grid {
    width: 500px;
    height: 500px;
    min-width: 500px;
    max-width: 500px;
    margin-left: 0;
    margin-right: 0;
}
/* When panel is narrower than grid, scale down to fit */
@media (max-width: 600px) {
    .help-admin-content .solution-section .solution-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 1;
    }
}
.help-admin-content .solution-header {
    margin-bottom: 4px;
}
.help-admin-content .solution-header h2 {
    margin-bottom: 0;
}
.help-debug-content {
    margin-top: 12px;
    padding: 10px;
    background: #1a1a1a;
    color: #e0e0e0;
    font-size: 11px;
    border-radius: 4px;
    max-height: 300px;
    overflow: auto;
}
.help-debug-pre {
    margin: 0 0 8px 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
}
.help-debug-hide {
    font-size: 11px;
    padding: 4px 8px;
}

.mark-dialog-body {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mark-dialog-top-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

.mark-shapes-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin: 0;
    padding: 0;
}

.mark-shape-btn {
    width: 42px;
    height: 42px;
    border: 2px solid #1a1a1a;
    background: #ffffff !important;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 3px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 1 !important;
}

.mark-shape-btn.marked::after {
    content: '✓';
    position: absolute;
    top: -3px;
    right: -3px;
    background: #4caf50;
    color: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #1a1a1a;
    z-index: 10;
    line-height: 1;
}

.mark-shape-btn.selected::after {
    content: '✓';
    position: absolute;
    top: -3px;
    right: -3px;
    background: #4caf50;
    color: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #1a1a1a;
    z-index: 10;
    line-height: 1;
}

.mark-shape-btn.selected.marked::after {
    /* If both selected and marked, keep the checkmark */
    background: #4caf50;
}

.mark-shape-btn > * {
    position: relative;
    z-index: 1;
}

.mark-shape-btn:hover {
    background: #f8f8f8;
    transform: scale(1.08);
}

.mark-shape-btn.selected {
    background: #ffffff !important;
    border-color: #1a1a1a;
    border-width: 2px;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.6);
}

.mark-x-btn.selected {
    background: #ffffff !important;
    border-color: #1a1a1a;
    border-width: 2px;
    color: #1a1a1a !important;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.6);
}

.mark-x-btn.selected::after {
    content: '✓';
    position: absolute;
    top: -3px;
    right: -3px;
    background: #4caf50;
    color: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #1a1a1a;
    z-index: 10;
    line-height: 1;
}

.mark-x-btn {
    width: 42px;
    height: 42px;
    border: 2px solid #1a1a1a;
    background: #ffffff !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    opacity: 1 !important;
    position: relative;
}

.mark-x-btn:hover {
    background: #f8f8f8;
    transform: scale(1.08);
}

.mark-x-btn.selected {
    background: #ff6b6b;
    border-color: #1a1a1a;
    border-width: 3px;
    color: #ffffff;
    box-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.mark-x-btn.marked::after {
    content: '✓';
    position: absolute;
    top: -3px;
    right: -3px;
    background: #4caf50;
    color: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #1a1a1a;
    z-index: 10;
    line-height: 1;
}

/* Mark as Candidate button (orange, above shapes) */
.btn-mark-candidate {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    background: #ff9800; /* Orange */
    color: white;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    cursor: pointer;
    flex: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-mark-candidate:hover {
    background: #fb8c00; /* Darker orange on hover */
}

.btn-mark-candidate:active {
    background: #f57c00; /* Even darker on click */
}

.btn-mark-x {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    background: #f44336; /* Red */
    color: white;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    cursor: pointer;
    flex: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.btn-mark-x:hover {
    background: #e53935; /* Darker red on hover */
}

.btn-mark-x:active {
    background: #d32f2f; /* Even darker on click */
}

.btn-mark-x.active {
    background: #c62828; /* Darker red when X is marked */
    box-shadow: 0 0 4px rgba(244, 67, 54, 0.6);
}

/* Place Object button (below shapes) */
.btn-place-object {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    background: #4CAF50; /* Green */
    color: white;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-place-object:hover:not(:disabled) {
    background: #45a049; /* Darker green on hover */
}

.btn-place-object:active:not(:disabled) {
    background: #3d8b40; /* Even darker on click */
}

.btn-place-object:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Row and column label styling for used rows/columns */
.row-label.row-used,
.column-label.col-used {
    position: relative;
    opacity: 0.8;
}

.row-label.row-used::after,
.column-label.col-used::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(26, 26, 26, 0.4);
    transform: translateY(-50%);
    z-index: 1;
}

.objects-section {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-top: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    min-width: 0;
}

.sidebar {
    width: 0 !important; /* Hide sidebar on desktop - it's empty anyway */
    flex: 0 0 0 !important;
    display: none !important; /* Completely hide it */
    gap: 0;
}

@media (max-width: 1024px) {
    .sidebar {
        display: flex !important;
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

.section {
    background: #e8e5e0;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 0;
}

.objects-section .section {
    padding-top: 0;
    padding-bottom: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
    background: #f5f5f5;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.section h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 4px;
}

.clues-section-header {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.3;
}
.clue-display-mode.segmented-control {
    display: inline-flex;
    align-items: stretch;
    margin-bottom: 10px;
    background: #e8e5e0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}
.clue-display-mode .segmented-control-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    color: #555;
}
.clue-display-mode .segmented-control-segment:not(:last-child) {
    border-right: 1px solid #ccc;
}
.clue-display-mode .segmented-control-segment:hover {
    color: #1a1a1a;
}
.clue-display-mode .segmented-control-segment input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.clue-display-mode .segmented-control-segment:has(input:checked) {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Instruction row under clues */
.clues-instruction-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    padding-left: 4px; /* match .object-palette padding so line aligns with clue section */
}
.clues-instruction-row .clue-mode-toggle.clue-mode-question {
    margin-top: 0;
    margin-right: 0;
}
.clues-instruction-text {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    min-width: 0;
}
@media (max-width: 768px) {
    .clues-instruction-row {
        flex-wrap: nowrap; /* keep ? and text on same line on mobile */
        padding-left: 4px; /* match object-palette padding on mobile */
    }
}
@media (max-width: 480px) {
    .clues-instruction-row {
        padding-left: 4px; /* match palette so aligns with clue section */
    }
}
.clue-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    color: #1a1a1a;
}
.clue-mode-toggle input {
    cursor: pointer;
}
/* Question-mark clue mode: hide checkbox, show ? button */
.clue-mode-toggle.clue-mode-question .clue-mode-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.clue-mode-toggle.clue-mode-question {
    margin-top: 4px;
    margin-right: 6px;
}
.clue-mode-toggle.clue-mode-question .clue-mode-question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.35em;
    padding: 0 0.4em;
    border-radius: 999px;
    background: #e8e8e8;
    color: #333;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.clue-mode-toggle.clue-mode-question:hover .clue-mode-question-icon {
    background: #d0d0d0;
    color: #1a1a1a;
}
.clue-mode-toggle.clue-mode-question:focus-within .clue-mode-question-icon {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .clue-mode-toggle.clue-mode-question {
        margin-top: 8px;
        margin-right: 10px;
    }
    .clue-mode-toggle.clue-mode-question .clue-mode-question-icon {
        min-width: 2em;
        height: 1.85em;
        font-size: 1.25em;
        padding: 0 0.5em;
    }
}
.objects-section .section h2 {
    margin-bottom: 6px;
    margin-top: 0;
    padding-top: 0;
}

.object-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(52px, auto);
    align-items: start;
    gap: 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 4px 0 4px;
    overflow: hidden;
    min-width: 0;
}
.object-palette.clue-mode-both {
    align-items: stretch;
}
/* In both mode: stretch wrappers to fill row, and clues section to fill wrapper */
.object-palette.clue-mode-both .palette-object-wrapper {
    align-items: stretch;
    min-height: 100%;
}
.object-palette.clue-mode-both .palette-object-wrapper .palette-object-clues.clue-mode-both {
    min-height: 56px;
}

/* Visual-only mode: stretch row pairs, min-height on clues so boxes with no clues align */
.object-palette.clue-mode-visual-only {
    align-items: stretch;
}
.object-palette.clue-mode-visual-only .palette-object-wrapper {
    align-items: stretch;
    min-height: 100%;
}
.object-palette.clue-mode-visual-only .palette-object-wrapper.clue-mode-visual-only .palette-object-clues {
    min-height: 40px;
}

.object-palette > * {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    grid-column: span 1;
}

/* Clue row: bordered box with icon (dot over top-left), clues */
.palette-object-wrapper {
    display: grid;
    grid-template-columns: 50px 1fr; /* Icon cell (dot 12px + gap 2px + icon 36px), clues */
    align-items: flex-start;
    gap: 6px 4px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 8px 6px;
    margin-left: 0;
    background-color: #fff;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.palette-object-wrapper.clue-mode-visual-only {
    align-items: center;
}
/* Icon cell: dot | gap | shape, all within column to avoid overlapping adjacent clue boxes */
.palette-icon-cell {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
}
/* Status dot at center-left of shape icon (slight gap, within card bounds): black = marks, orange = placed, green = correct, red = incorrect */
.palette-status-dot-cell {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    order: -1;
}
.palette-status-dot-cell.palette-border-marks::before,
.palette-status-dot-cell.palette-border-placed::before,
.palette-status-dot-cell.palette-border-correct::before,
.palette-status-dot-cell.palette-border-incorrect::before {
    content: '';
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.palette-status-dot-cell.palette-border-marks::before { background: #1a1a1a; }
.palette-status-dot-cell.palette-border-placed::before { background: #ff9800; }
.palette-status-dot-cell.palette-border-correct::before { background: #27ae60; }
.palette-status-dot-cell.palette-border-incorrect::before { background: #e74c3c; }
.palette-object-wrapper:hover {
    border-color: #4a9eff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Selected state: clue box highlighted */
.palette-object-wrapper.selected {
    border-color: #4a9eff !important;
    background-color: #e3f2fd !important;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3) !important;
}
.palette-object-wrapper.selected .palette-object {
    border: 4px solid #ff9800 !important;
    box-shadow: none !important;
}
.palette-object-wrapper[style*="pointer-events: none"] {
    cursor: default;
}

.palette-object-wrapper .palette-object {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
}

.palette-object-wrapper .palette-object-clues {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow: visible;
    word-break: break-word;
    padding-left: 4px; /* Small gap so first visual clue doesn't run into the icon */
}

.palette-object-clues {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    text-align: left;
    color: #1a1a1a;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
.palette-object-clues .palette-clue {
    flex: 0 0 auto;
    min-width: 0;
}
.palette-object-clues .palette-clue-text-block {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.palette-object-clues.clue-mode-both {
    flex-direction: column;
    align-items: flex-start;
}
.palette-object-clues.clue-mode-both .palette-clue-text-block {
    width: 100%;
}
.palette-clue-visuals-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Status dot in clue box: orange = placed, green = correct, red = incorrect */
.clue-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e67e22;
}
.clue-status-dot-orange {
    background: #e67e22;
}
.clue-status-dot-correct {
    background: #27ae60;
}
.clue-status-dot-incorrect {
    background: #e74c3c;
}

.palette-clue {
    padding: 2px 3px;
    border-radius: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
}
/* Prevent direction clue from being clipped on mobile (keep visible, reserve min width) */
.palette-clue:has(.clue-visual-direction) {
    overflow: visible;
    min-width: 24px;
    flex-shrink: 0;
}
/* Prevent empty-rect badge from being clipped */
.palette-clue:has(.clue-visual-empty-rect) {
    overflow: visible;
}

/* Visual language for clues: "in column X" = letter + vertical cells; "in row Y" = number + horizontal cells */
.palette-clue-visual {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
    gap: 2px;
}
/* Column: letter in vertical box with thin vertical line behind (top to bottom) */
.clue-visual-column,
.clue-visual-between-cols {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: center;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 28px;
}
.clue-visual-column .clue-visual-col-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: #1a1a1a;
    z-index: 0;
    pointer-events: none;
}
/* Range: multiple vertical lines behind the letter box (one per column), spread across the block */
.clue-visual-between-cols .clue-visual-col-lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    z-index: 0;
    pointer-events: none;
}
.clue-visual-between-cols .clue-visual-col-lines .clue-visual-col-line {
    width: 1px;
    min-width: 1px;
    background: #1a1a1a;
    align-self: stretch;
    flex: 0 0 auto;
}
.clue-visual-column-box {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
    padding: 0;
}
.clue-visual-column-box .clue-visual-col-letter {
    font-weight: bold;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1;
    color: #1a1a1a;
    display: block;
    text-transform: uppercase;
}
@media (min-width: 769px) {
    .clue-visual-column-box .clue-visual-col-letter {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .clue-visual-column-box {
        min-width: 20px;
        min-height: 18px;
        width: 20px;
        height: 18px;
    }
    .clue-visual-column-box .clue-visual-col-letter {
        font-size: 13px;
    }
}
/* Row: number in horizontal box with thin horizontal line behind (left to right); same line length as column */
.clue-visual-row,
.clue-visual-between-rows {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: center;
    padding-left: 2px;
    padding-right: 2px;
    min-width: 28px;
}
.clue-visual-row .clue-visual-row-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background: #1a1a1a;
    z-index: 0;
    pointer-events: none;
}
/* Range: multiple horizontal lines behind the number box (one per row), spread across the block, extend slightly past box */
.clue-visual-between-rows .clue-visual-row-lines {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    z-index: 0;
    pointer-events: none;
}
.clue-visual-between-rows .clue-visual-row-lines .clue-visual-row-line {
    height: 1px;
    min-height: 1px;
    background: #1a1a1a;
    width: 100%;
    min-width: 100%;
    flex: 0 0 auto;
}
.clue-visual-between-rows {
    min-height: 24px;
}
.clue-visual-row-box {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 20px;
    width: 26px;
    height: 20px;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
    padding: 0;
}
.clue-visual-row-box .clue-visual-row-num {
    font-weight: bold;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1;
    color: #1a1a1a;
    display: block;
}
@media (min-width: 769px) {
    .clue-visual-row-box .clue-visual-row-num {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .clue-visual-row-box {
        min-width: 24px;
        min-height: 18px;
        width: 24px;
        height: 18px;
    }
    .clue-visual-row-box .clue-visual-row-num {
        font-size: 13px;
    }
}
/* Between rows: same layout as fixed row (horizontal: left arrow | box | right arrow) */
.clue-visual-between-rows {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: center;
}
.clue-visual-between-rows .clue-visual-row-box {
    min-width: 34px !important;
    width: auto !important;
    padding: 0;
}
.clue-visual-between-rows .clue-visual-row-num {
    white-space: nowrap;
    font-size: inherit;
}
@media (max-width: 768px) {
    .clue-visual-between-rows .clue-visual-row-box {
        min-width: 36px !important;
        width: auto !important;
        padding: 0;
    }
}
/* Clue cards: give clues column enough room so two clues fit on one line without squashing text.
   Root cause: min-width:0 let the clues column shrink and forced wrap; we fix by (1) smaller icon
   so clues get more space, (2) moderate box sizes so "d" and "5-7" stay readable. */
@media (max-width: 768px) {
    .palette-object-clues .clue-visual-column-box {
        min-width: 20px !important;
        width: 20px !important;
        min-height: 18px !important;
        height: 18px !important;
    }
    .palette-object-clues .clue-visual-between-rows .clue-visual-row-box {
        min-width: 42px !important;
        width: auto !important;
        padding: 0 !important;
    }
    .palette-object-clues .clue-visual-between-cols .clue-visual-column-box {
        min-width: 38px !important;
        width: auto !important;
    }
    .palette-object-clues .clue-visual-row-box {
        min-width: 24px !important;
        width: 24px !important;
        min-height: 18px !important;
        height: 18px !important;
    }
}
.clue-visual-between-rows .clue-visual-cell {
    width: 10px;
    height: 8px;
    border: 1px solid #1a1a1a;
    border-radius: 1px;
    background: #888;
    display: block;
}
.clue-visual-range {
    font-weight: bold;
    font-size: 0.85em;
    line-height: 1;
}
/* Next to [shape]: large recognizable shape in center, small square markers on each edge with even gap */
.clue-visual-next-to {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Container: 5px square + 1px gap + 24px center + 1px gap + 5px square = 36px each side */
.clue-visual-next-to-grid {
    position: relative;
    width: 36px;
    height: 36px;
}
.clue-visual-next-to-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}
.clue-visual-next-to-center .clue-visual-next-to-shape {
    width: 90% !important;
    height: 90% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
/* Small squares on each edge (5px), 1px gap from center so they don't overlap */
.clue-visual-next-to-edge-square {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid #1a1a1a;
    border-radius: 1px;
    background: #fff;
    box-sizing: border-box;
}
.clue-visual-next-to-edge-n {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.clue-visual-next-to-edge-e {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.clue-visual-next-to-edge-s {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.clue-visual-next-to-edge-w {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.clue-visual-next-to-label {
    font-size: 0.8em;
    line-height: 1;
    margin-left: 3px;
    color: #1a1a1a;
}
/* Between columns: same layout as fixed column (vertical: up arrow | box | down arrow) */
.clue-visual-between-cols {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: center;
}
.clue-visual-between-cols .clue-visual-column-box {
    min-width: 34px !important;
    width: auto !important;
    min-height: 20px;
    height: auto;
    padding: 3px 3px;
}
.clue-visual-between-cols .clue-visual-col-letter {
    white-space: nowrap;
    font-size: inherit;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .clue-visual-between-cols .clue-visual-column-box {
        min-width: 38px !important;
        min-height: 20px;
        padding: 3px 3px;
    }
}
.clue-visual-between-cols .clue-visual-cell {
    width: 8px;
    height: 10px;
    border: 1px solid #1a1a1a;
    border-radius: 1px;
    background: #888;
    display: block;
}
.clue-visual-between-cols .clue-visual-range {
    font-weight: bold;
    font-size: 0.95em;
}
/* On edge of grid: 5×5 grid with outer cells greyed */
.clue-visual-edge-grid {
    display: grid;
    grid-template-columns: repeat(5, 5px);
    grid-template-rows: repeat(5, 5px);
    gap: 1px;
    border: 1px solid #1a1a1a;
    border-radius: 1px;
    padding: 1px;
    background: #fff;
    box-sizing: content-box;
}
.clue-visual-edge-cell {
    width: 5px;
    height: 5px;
    min-width: 5px;
    min-height: 5px;
    box-sizing: border-box;
}
.clue-visual-edge-outer {
    background: #888;
    border-radius: 0;
}
.clue-visual-edge-inner {
    background: #fff;
}
/* Directional: shape icon + arrow (north = ↑ over shape, south = shape over ↓, east = shape →, west = ← shape) */
.clue-visual-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    align-self: center;
    flex-shrink: 0;
    min-width: 24px;
    min-height: 34px;
}
.clue-visual-direction-north,
.clue-visual-direction-south {
    flex-direction: column;
}
.clue-visual-direction-east,
.clue-visual-direction-west {
    flex-direction: row;
}
.clue-visual-direction .clue-visual-direction-arrow {
    flex-shrink: 0;
    color: #1a1a1a;
    display: block;
    overflow: hidden;
}
.clue-visual-direction-north .clue-visual-direction-arrow,
.clue-visual-direction-south .clue-visual-direction-arrow {
    width: 18px !important;
    height: 10px !important;
    max-width: 18px !important;
    max-height: 10px !important;
}
.clue-visual-direction-east .clue-visual-direction-arrow,
.clue-visual-direction-west .clue-visual-direction-arrow {
    width: 10px !important;
    height: 18px !important;
    max-width: 10px !important;
    max-height: 18px !important;
}
/* position: relative so absolute shapes (e.g. small_circle 50%) are sized to this box, not a distant ancestor - prevents huge oval overlay */
.clue-visual-direction-center {
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
.clue-visual-direction-center .clue-visual-direction-shape {
    width: 90% !important;
    height: 90% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
.clue-visual-direction-label {
    font-size: 0.8em;
    line-height: 1;
    color: #1a1a1a;
}
/* Isolated shape: 3×3 grid, centre = shape, others = × (no adjacent cells) */
.clue-visual-isolated {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.clue-visual-isolated-grid {
    display: inline-grid;
    grid-template-columns: repeat(3, 14px);
    grid-template-rows: repeat(3, 14px);
    gap: 1px;
    line-height: 0;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: #f8f8f8;
}
.clue-visual-isolated-grid .iso-cell {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
}
.clue-visual-isolated-grid .iso-cell .clue-visual-isolated-shape {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
}
.clue-visual-isolated-grid .iso-cell .clue-visual-isolated-shape svg {
    width: 100%;
    height: 100%;
}
.clue-visual-isolated-grid .iso-x {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    color: #888;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 1px;
}
.clue-visual-isolated-grid .iso-x::after {
    content: '\00D7';
}
.clue-visual-isolated .clue-visual-next-to-label {
    display: none; /* icon only, no wording */
}

/* Area of N empty cells: 2 dashed cells with circular badge on top right; optionally "count ×" prefix */
.clue-visual-empty-rect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 6px 4px 4px; /* room for badge so it isn't cut off */
}
.clue-visual-empty-rect-count {
    font-size: 0.8em;
    color: #1a1a1a;
    line-height: 1;
}
.clue-visual-empty-rect-cell-wrap {
    position: relative;
    display: inline-flex;
    gap: 2px;
}
.clue-visual-empty-rect-cell {
    display: block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background: #fff;
    border: 1px dashed #666;
    border-radius: 2px;
    box-sizing: border-box;
}
.clue-visual-empty-rect-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
}

.global-clues {
    display: none; /* No longer used - generic clues are in palette */
}

.global-clue {
    font-size: 10px;
    color: #1a1a1a;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

/* Explicit square so triangles/diamonds (clip-path) render correctly */
.palette-object {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    cursor: grab;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.2s;
    touch-action: pan-y; /* allow vertical scroll on mobile */
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    overflow: hidden;
}

.palette-object-placed {
    position: relative;
}

/* Status shown by dot only; icon always has thin black border */

.palette-object .shape {
    flex-shrink: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Fill square so triangles/diamonds render correctly */
    box-sizing: border-box;
    overflow: hidden;
}

/* Palette clues in black and white (controlled by PALETTE_CLUES_BLACK_AND_WHITE in script.js) */
.object-palette.palette-clues-bw .palette-object {
    background-color: #f0f0f0 !important;
}
/* Shapes are drawn in one dark grey via createShapeElement(..., { forceColor }) - no filter needed */
.object-palette.palette-clues-bw .palette-object.selected {
    background-color: #e0e0e0 !important;
}

/* Small circle in palette: show as full centered circle (same as when placed on grid) */
.palette-object .shape-small_circle {
    width: 50% !important;
    height: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50%;
    position: absolute;
}

.palette-object:hover {
    transform: scale(1.1);
}

.palette-object:active {
    cursor: grabbing;
}

.palette-object.dragging {
    opacity: 0.5;
}

/* Selected shape icon: orange highlight */
.palette-object.selected {
    background-color: #fff3e0 !important;
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 2px #ff9800;
}

/* Label at top left corner of palette objects */
.palette-label {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #1a1a1a;
    background: white;
    padding: 2px 4px;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
    line-height: 1;
}

.palette-coordinate {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 4px;
    border-radius: 2px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    border: 1px solid rgba(26, 26, 26, 0.2);
    text-align: center;
}

.palette-object {
    flex-direction: column;
    justify-content: center;
}

/* Solution section */
.solver-solution-container {
    display: flex;
    flex-direction: column; /* Stacked: solver on top, solution below */
    gap: 15px; /* Minimal gap */
    align-items: stretch;
    flex: 1 1 0% !important; /* Equal space with puzzle section (50/50) */
    min-width: 0;
    width: auto;
    max-width: none !important;
    margin-top: 0;
    box-sizing: border-box;
}

.human-solver-section {
    width: 100%;
    position: relative;
    margin-bottom: 0;
    flex: 1; /* Take available space */
    min-width: 0; /* Allow shrinking */
}

.solution-section {
    width: 100%;
    position: relative;
    flex: 1; /* Equal space with puzzle section */
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.solution-section .solution-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.solution-section .solution-container .solution-content {
    flex: 1;
    min-height: 0;
}

@media (min-width: 1025px) {
    .solver-solution-container {
        flex-direction: column; /* Stacked: solver on top, solution below */
        align-items: stretch;
    }
    
    .human-solver-section {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    
    .solution-section {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 1024px) {
    .solver-solution-container {
        margin-top: 0;
    }
    
    .human-solver-section {
        width: 100%;
        max-width: none;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 3px solid #1a1a1a;
    }
    
    .solution-section {
        width: 100%;
        max-width: none;
    }
}

.rules-section-bottom {
    width: 100%;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 3px solid #1a1a1a;
}

.bottom-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px 0;
}

.bottom-buttons button {
    min-width: 150px;
}

/* Submit mode: bar with Submit button + attempt dots (styled per reference image) */
.submit-control-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.submit-control-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.submit-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.attempts-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}
.attempts-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}
.attempt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.attempt-dot.active {
    background: #6ab04c;
}

/* Submit bar block (Clue Raider style): light grey box containing Place/Mark/X controls */
.submit-bar {
    width: 100%;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 14px 8px 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
}
.submit-bar .submit-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: 36px;
    align-self: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* Single-line submit bar on small/medium viewports so timer + X + Undo don't wrap */
@media (max-width: 900px) {
    .submit-bar {
        flex-wrap: nowrap !important;
    }
    .submit-bar .submit-control-bar {
        flex-wrap: nowrap !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .submit-bar .submit-control-group-right {
        margin-left: auto;
        flex-shrink: 0;
    }
}
.submit-bar .submit-control-group,
.submit-bar .submit-control-group-left,
.submit-bar .submit-control-area,
.submit-bar .submit-control-group-right,
.submit-bar .attempts-indicator,
.submit-bar .check-solution-area {
    display: flex;
    align-items: center;
    min-height: 36px;
}
.submit-bar .submit-control-group-left {
    gap: 10px;
}
.submit-bar button,
.submit-bar .submit-btn-primary,
.submit-bar .submit-btn-secondary,
.submit-bar #check-solution,
.submit-bar #undo-btn {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
/* Timer on submit bar (Clue Raider style): white pill with clock icon + time */
.puzzle-timer-in-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fffdf2;
    border: 1px solid #e0e0e0;
    border-radius: 9999px;
    flex-shrink: 0;
}
.puzzle-timer-in-bar .puzzle-timer-icon {
    flex-shrink: 0;
    color: #555;
}
/* Clue Raider: click icon to hide/show time */
.puzzle-timer-in-bar.timer-hidden .puzzle-timer-value {
    display: none;
}
.submit-bar .submit-control-bar .puzzle-timer-in-bar {
    margin: 0 4px;
}
/* Timer as button: same look as pill, no default button styling */
button.puzzle-timer-in-bar.submit-timer-toggle {
    cursor: pointer;
    font: inherit;
    border: 1px solid #e0e0e0;
}
button.puzzle-timer-in-bar.submit-timer-toggle:hover {
    background: #f5f5f5;
    border-color: #ddd;
}

.submit-bar-separator {
    display: inline-flex;
    align-self: center;
    width: 1px;
    height: 24px;
    background: #d4d4d4;
    flex-shrink: 0;
}
.submit-bar .submit-control-group-right {
    margin-left: auto;
    gap: 8px;
}
.submit-bar .submit-btn-primary,
.submit-bar #check-solution,
.submit-bar #undo-btn,
.submit-bar .submit-control-group-right .submit-btn-secondary:not(.submit-btn-x) {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Check Solution / Place block (Clue Raider style): pill, light cream, grey border */
.submit-bar #check-solution {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid #e0e0e0;
    background: #fffdf2;
    color: #333;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.submit-bar #check-solution:hover {
    background: #f5f5f5;
    border-color: #ddd;
}
/* Submit button: pill, light cream, icon in dark circle */
.submit-bar .submit-btn-primary {
    padding: 6px 16px 6px 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid #e0e0e0;
    background: #fffdf2;
    color: #333;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.submit-bar .submit-btn-primary .submit-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}
.submit-bar .submit-btn-primary:hover {
    background: #f5f5f5;
    border-color: #ddd;
}
.submit-bar .submit-btn-primary:not(:has(.submit-btn-icon)) {
    padding: 6px 16px;
}
.submit-bar .submit-btn-primary.submit-available .submit-btn-icon {
    background: #fff;
    color: #6ab04c;
}
/* Submit button goes green when all items placed */
.submit-bar .submit-btn-primary.submit-available {
    background: #6ab04c;
    color: #fff;
    border-color: #5a9e3e;
}
.submit-bar .submit-btn-primary.submit-available:hover {
    background: #5a9e3e;
    border-color: #5a9e3e;
}
/* X button (Mark X block): circular pill, light cream */
.submit-bar .submit-btn-x {
    width: 36px;
    height: 36px;
    padding: 0;
    min-width: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fffdf2;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.submit-bar .submit-btn-x:hover {
    background: #f5f5f5;
    border-color: #ddd;
}
.submit-bar .submit-btn-x.active {
    background: #6ab04c;
    color: #fff;
    border-color: #5a9e3e;
}
.submit-bar .submit-btn-x.active:hover {
    background: #5a9e3e;
    border-color: #5a9e3e;
}
.submit-bar .submit-btn-x:disabled {
    background: #e8e8e8;
    color: #999;
    border-color: #ddd;
    cursor: not-allowed;
}
/* Undo button: pill, same Place/Mark/X style */
.submit-bar #undo-btn,
.submit-bar .submit-control-group-right .submit-btn-secondary:not(.submit-btn-x) {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid #e0e0e0;
    background: #fffdf2;
    color: #333;
    border-radius: 9999px;
    cursor: pointer;
    min-width: 0;
}
.submit-bar #undo-btn:hover,
.submit-bar .submit-control-group-right .submit-btn-secondary:not(.submit-btn-x):hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ddd;
}
.submit-bar .submit-btn-secondary.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
/* X button stays green when active (override .submit-btn-secondary.active) */
.submit-bar .submit-btn-x.submit-btn-secondary.active {
    background: #6ab04c;
    color: #fff;
    border-color: #5a9e3e;
}
.submit-bar .submit-btn-x.submit-btn-secondary.active:hover {
    background: #5a9e3e;
    border-color: #5a9e3e;
}
.submit-bar .submit-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Non–submit-bar secondary (e.g. other pages) keep original size */
.submit-btn-secondary {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #1a1a1a;
    background: #e8e6e3;
    color: #1a1a1a;
    border-radius: 6px;
    cursor: pointer;
    min-width: 48px;
}
.submit-btn-secondary:hover {
    background: #d8d5d0;
}
.submit-btn-secondary.active {
    background: #1a1a1a;
    color: #fff;
}

.solver-container {
    position: relative;
    overflow: hidden;
    width: 100%; /* Ensure full width */
}

.solver-container .section {
    width: 100% !important; /* Force full width */
    max-width: none !important; /* Remove any max-width limits */
    padding: 8px 8px !important; /* Absolute minimal padding */
    box-sizing: border-box;
}

.solution-container .section {
    padding: 12px 15px; /* Same reduced padding for consistency */
}

.solver-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

/* Make pause and reset buttons smaller and on same line */
#pause-human-solve,
#reset-human-solve {
    width: auto !important;
    min-width: 70px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
}

/* Keep pause and reset buttons together on same line */
.solver-header {
    flex-wrap: nowrap; /* Prevent wrapping */
}

.solver-header .btn-secondary {
    display: inline-block !important;
    flex-shrink: 0;
}

.solver-header h2 {
    margin-bottom: 0;
    flex: 1;
}

.solver-content {
    display: flex;
    flex-direction: column; /* Steps on top, grid below */
    gap: 15px; /* Reduced gap */
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.solver-steps {
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    max-height: 600px !important; /* Much longer scrollable area */
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid #1a1a1a;
    padding: 8px 8px !important; /* Even less horizontal padding */
    background: white;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    -webkit-user-select: text !important; /* Allow text selection */
    user-select: text !important;
}

.solver-step {
    padding: 6px 8px !important; /* Even less horizontal padding */
    margin-bottom: 6px;
    border-left: 4px solid #1a1a1a;
    background: #f5f5f5;
    border-radius: 2px;
    line-height: 1.3;
    word-wrap: break-word;
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
    -webkit-user-select: text !important; /* Allow text selection */
    user-select: text !important;
}

.solver-step-description {
    width: 100%;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: text !important; /* Allow text selection */
    user-select: text !important;
}

.solver-step-number {
    -webkit-user-select: text !important; /* Allow text selection */
    user-select: text !important;
}

.solver-step:last-child {
    margin-bottom: 0;
}

.solver-step-number {
    font-weight: bold;
    color: #1a1a1a;
    margin-right: 8px;
}

.solver-step-description {
    color: #333;
}

.solver-grid-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: white;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    width: 100%;
}

#solver-grid-inner {
    width: 100%;
    max-width: 400px; /* Reasonable max size */
    aspect-ratio: 1; /* Keep it square */
    height: auto;
}

@media (max-width: 1024px) {
    .solver-grid-wrapper {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    #solver-grid-inner {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 1;
    }
}


.solution-section {
    flex: 1;
    min-width: 0;
    position: relative;
    margin-top: 20px;
}

/* Spoiler cover: card-style box (light off-white, rounded, border, shadow) */
.solution-spoiler-cover {
    padding: 20px 24px;
    text-align: left !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #f8f6f2;
    border: 1px solid #c4b8a8;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.solution-spoiler-cover .solution-show-btn {
    margin-left: 0;
}
.solution-spoiler-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 600;
    color: #3d3329;
    margin: 0 0 12px 0;
    padding-top: 0;
    letter-spacing: 0.5px;
    text-align: left;
}
.solution-spoiler-text {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    margin: 0 0 16px 0;
    line-height: 1.5;
    text-align: left;
}
.solution-show-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #3d3329;
    background: #f0ebe4;
    border: 1px solid #c4b8a8;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.solution-show-btn:hover {
    background: #e8e2d9;
    border-color: #a89b8a;
}
.solution-show-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(61, 51, 41, 0.12);
    font-style: normal;
    font-size: 14px;
    color: #3d3329;
}
.solution-revealed {
    margin-top: 12px;
    position: relative;
}
/* Solution display: light-grey box with rounded corners, thin border, headings */
.solution-display-box {
    position: relative;
    background: #ebe9e5;
    border: 1px solid #c4b8a8;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.solution-display-box .solution-header {
    margin-bottom: 14px;
}
.solution-display-box .solution-header h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 600;
    color: #3d3329;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.solution-display-box .solution-close-btn {
    top: 12px;
    right: 12px;
}
.solution-grid-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.solution-grid-wrapper .solution-row-labels,
.solution-grid-wrapper .solution-column-labels {
    display: none;
}
.solution-grid-wrapper .row-labels,
.solution-grid-wrapper .column-labels {
    pointer-events: none;
    cursor: default;
}
.solution-grid-wrapper .row-label,
.solution-grid-wrapper .column-label {
    font-size: 13px;
    color: #3d3329;
}
.solution-grid-wrapper .row-labels {
    padding-top: 0;
}
.solution-grid-wrapper .row-label {
    height: calc((420px - 6px) / 7);
    min-height: 20px;
}
.solution-grid-wrapper .column-labels {
    height: 26px;
}
.solution-grid-wrapper .column-label {
    width: calc((420px - 6px) / 7);
    min-width: 20px;
    height: 26px;
}
.solution-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #3d3329;
    background: #f0ebe4;
    border: 1px solid #c4b8a8;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.solution-close-btn:hover {
    background: #e8e2d9;
}
.solution-close-btn:hover {
    background: #d4c9bb;
    color: #2a1f18;
}
.solution-revealed .solution-content {
    max-height: none;
    min-height: 320px;
    opacity: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.solution-revealed .solution-container {
    overflow: visible;
}

.solution-section::before {
    display: none; /* Remove top border on desktop since it's side by side */
}

@media (max-width: 1024px) {
    .solution-section::before {
        display: block;
    }
}

@media (max-width: 1024px) {
    .game-area {
        flex-direction: column;
    }
    
    .solution-section {
        width: 100%;
        margin-top: 40px;
        padding-top: 40px;
        border-top: 3px solid #1a1a1a;
    }
    
    .solution-section::before {
        display: block;
        content: '';
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #1a1a1a 20%, #1a1a1a 80%, transparent);
    }
}

.solution-container {
    position: relative;
    overflow: hidden;
}

.solution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.solution-header h2 {
    margin-bottom: 0;
}

.solution-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.solution-toggle .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.solution-toggle.active .toggle-icon {
    transform: rotate(180deg);
}

.solution-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.solution-content.hidden {
    max-height: 0;
    opacity: 0;
}

.solution-content:not(.hidden) {
    max-height: 80vh; /* Allow solution grid to use equal space */
    opacity: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.solution-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.02) 0%, rgba(26, 26, 26, 0.05) 100%);
    border-radius: 8px;
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.solution-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(26, 26, 26, 0.1);
    border-radius: 8px;
    pointer-events: none;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 0.75px;
    background: rgba(26, 26, 26, 0.3);
    padding: 0.75px;
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Equal size to puzzle grid: fill available space up to 500px */
    min-width: 0;
}

.solution-grid:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* SOLUTION section: white inner grid box on light-grey display */
.solution-section .solution-wrapper {
    border: 1px solid #c4b8a8;
    border-radius: 6px;
    padding: 10px 10px 0 10px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
}
.solution-display-box .solution-wrapper {
    display: inline-block;
}
.solution-section .solution-wrapper::before {
    display: none;
}
/* Help section solution grid: show grid lines (same as main puzzle grid), ensure visible size */
.solution-section .solution-grid {
    gap: 0.75px;
    background: rgba(26, 26, 26, 0.3);
    padding: 0.75px;
    box-shadow: none;
    border-radius: 0;
    transition: none;
    min-width: 280px;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    flex-shrink: 0;
}
.solution-section .solution-wrapper {
    flex: 0 0 auto;
    min-width: 0;
}
.solution-section .solution-grid:hover {
    transform: none;
    box-shadow: none;
}
.solution-section .solution-grid .grid-cell,
.solution-section .solution-grid .solution-cell {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.solution-section .solution-grid .grid-cell .shape,
.solution-section .solution-grid .solution-cell .shape {
    width: 100%;
    height: 100%;
}

.solution-cell {
    cursor: default;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.solution-cell:hover {
    opacity: 1;
    box-shadow: none;
}

.solution-cell .shape {
    animation: fadeInShape 0.6s ease forwards;
    opacity: 0;
}

/* Ensure concentric shapes render properly in solution grid with all inner rings */
.solution-cell .shape-concentric::before,
.solution-cell .shape-concentric::after {
    display: block !important;
    content: '' !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.solution-cell .shape-concentric .inner-circle-3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Small circles need to preserve their positioning transform */
.solution-cell .shape-small_circle {
    animation: fadeInShapeSmallCircle 0.6s ease forwards;
    opacity: 0;
}

@keyframes fadeInShape {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInShapeSmallCircle {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        /* Don't override transform - let inline styles handle positioning */
    }
}

/* Subtle stagger animation for solution cells - rows fade in sequentially */
.solution-grid[style*="display"] .solution-cell .shape:not(.shape-small_circle) {
    animation-delay: calc(var(--row-index, 0) * 0.03s + var(--col-index, 0) * 0.01s);
}

.solution-grid[style*="display"] .solution-cell .shape-small_circle {
    animation-delay: calc(var(--row-index, 0) * 0.03s + var(--col-index, 0) * 0.01s);
}

@media (max-width: 768px) {
    /* Constrain solution display in help panel to prevent overflow */
    .solution-display-box {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding: 12px;
        box-sizing: border-box;
    }
    .solution-display-box .solution-wrapper {
        display: block !important;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .solution-section .solution-wrapper {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .solution-section .solution-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto;
        aspect-ratio: 1;
    }
    .solution-grid-wrapper {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }
    .solution-grid-wrapper .grid-with-labels {
        min-width: 0;
        flex: 1;
    }
    .solution-grid-wrapper .row-label {
        height: 28px;
        min-height: 20px;
    }
    .solution-grid-wrapper .column-labels {
        height: 22px;
    }
    .solution-grid-wrapper .column-label {
        width: 28px;
        min-width: 20px;
        height: 22px;
    }
    .solution-section {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .solution-wrapper {
        padding: 15px;
    }
    
    .solution-header {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .solution-display-box {
        padding: 10px;
    }
    .solution-section {
        margin-top: 15px;
        padding-top: 15px;
    }
    
    .solution-wrapper {
        padding: 10px;
    }
    
    .solution-header {
        margin-bottom: 10px;
    }
    
    .solution-toggle {
        padding: 6px 12px;
        font-size: 12px;
    }
}

.rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

.rule {
    padding: 10px;
    background: #f9f9f9;
    border-left: 3px solid #1a1a1a;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule-number {
    font-weight: 600;
    color: #666;
    margin-right: 4px;
    flex-shrink: 0;
    min-width: 24px;
}

.rule-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-right: 4px;
}

.rule-badge-placed {
    background: #2196F3;
    color: white;
}

.rule-badge-all {
    background: #FF9800;
    color: white;
}

.rule-text {
    flex: 1;
}

.rule-checkmark {
    color: #4caf50;
    font-weight: bold;
    font-size: 16px;
    display: none; /* Hidden by default, shown via inline style when constraint satisfied */
    min-width: 20px;
    text-align: center;
    margin-left: 8px;
}

.rule.valid {
    border-left-color: #4caf50;
    background: #e8f5e9;
}

.rule.valid .rule-checkmark {
    display: inline-block !important; /* Show checkmark when constraint is satisfied */
}

.rule.invalid {
    border-left-color: #f44336;
    background: #ffebee;
}

.rule.invalid .rule-checkmark {
    display: none !important; /* Hide checkmark when constraint not satisfied */
}

.btn-primary, .btn-secondary {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #1a1a1a;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
}

.btn-primary {
    background: #1a1a1a;
    color: white;
}

.btn-primary:hover {
    background: #333;
}

.btn-secondary {
    background: #e8e5e0;
    color: #1a1a1a;
}

.btn-secondary:hover {
    background: #d0ccc5;
}

/* Mode buttons */
.mode-btn {
    flex: 1;
}

.mode-btn.active {
    background: #1a1a1a;
    color: white;
}

.mode-btn.active:hover {
    background: #333;
    background: #f5f5f5;
}

.feedback {
    padding: 15px;
    border: 2px solid #1a1a1a;
    background: #e8e5e0;
    min-height: 50px;
    font-size: 14px;
    display: none;
}

.feedback.show {
    display: block;
}

.feedback.success {
    border-color: #4caf50;
    background: #e8f5e9;
    color: #2e7d32;
}

.feedback.error {
    border-color: #f44336;
    background: #ffebee;
    color: #c62828;
}

/* Submit feedback: visible below submit bar (sidebar feedback is hidden on desktop) */
.submit-feedback {
    margin-top: 10px;
    padding: 12px 14px;
    border: 2px solid #1a1a1a;
    background: #e8e5e0;
    font-size: 14px;
    line-height: 1.4;
    display: none;
    min-height: 0;
}
.submit-feedback.show {
    display: block;
}
.submit-feedback.success {
    border-color: #4caf50;
    background: #e8f5e9;
    color: #2e7d32;
}
.submit-feedback.error {
    border-color: #f44336;
    background: #ffebee;
    color: #c62828;
}

/* Shape rendering */
.shape {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5; /* Below cross-hatching overlay */
}

/* Right-angled triangle */
.shape-triangle {
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border: none;
    box-sizing: border-box;
}

/* Quarter circle - base styles, rotation handled by JavaScript */
.shape-quarter {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Concentric circles - 3 inner circles */
/* aspect-ratio keeps ring circular in non-square containers (e.g. palette with visual clues); overflow prevents huge oval overlay */
.shape-concentric {
    border-radius: 50%;
    border: 2px solid;
    position: relative;
    background: transparent; /* Empty ring space is transparent to show cell background */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-sizing: border-box;
}

.shape-concentric::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    border: 2px solid var(--inner-border-color, #1a1a1a);
    background: var(--inner1-bg, #ffffff);
    box-sizing: border-box;
}

.shape-concentric::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 50%;
    border: 2px solid var(--inner-border-color, #1a1a1a);
    background: var(--inner2-bg, #1a1a1a);
    box-sizing: border-box;
}

.shape-concentric .inner-circle-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: 25%;
    border-radius: 50%;
    border: 2px solid var(--inner-border-color, #1a1a1a);
    background: var(--inner3-bg, #ffffff);
    box-sizing: border-box;
}

/* Semi-circle - base styles, rotation handled by JavaScript */
.shape-semi_circle {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Small circle - same size as middle ring of concentric rings (50% of cell) */
.shape-small_circle {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Diamond - 45° rotated square */
.shape-diamond {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Arc segment - thin curved stroke */
.shape-arc_segment {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Rotation classes */
.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}