/* ============================================
   Tält & Träd CSS
   Board uses a CSS grid with clue column/row + N×N cells.
   Columns: 2rem (row clue) + repeat(N, 1fr)
   ============================================ */

:root {
    --tents-tree:        var(--color-emerald-600);   /* #059669 */
    --tents-tent:        #EA580C;                    /* Orange 600 – ingen design-system-ekvivalent */
    --tents-match:       var(--color-emerald-600);
    --tents-tree-bg:     var(--color-accent-green);  /* Emerald 100 */
    --tents-tree-border: var(--color-emerald-300);   /* #6EE7B7 */
    --tents-hover-bg:    #F0FDF4;                    /* Green 50 – ingen design-system-ekvivalent */
    --tents-tent-bg:     #FFF7ED;                    /* Orange 50 – ingen design-system-ekvivalent */
    --tents-tent-border: #FED7AA;                    /* Orange 200 – ingen design-system-ekvivalent */
}

/* ─── Board container ─── */
.tents-board {
    display: grid;
    gap: 3px;
    position: relative;
    background: #F0FDF4;
    border-radius: 12px;
    padding: 10px 30px 30px 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    touch-action: manipulation;
    user-select: none;
}

/* ─── Clue numbers ─── */
.tents-corner {
    width: 2rem;
    height: 2rem;
}

.tents-col-clue,
.tents-row-clue {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
}

.tents-col-clue {
    align-self: end;
    margin-bottom: 2px;
    justify-self: center;
}

.tents-row-clue {
    justify-self: center;
    margin-right: 2px;
}

.tents-clue--match {
    background: var(--tents-tree-border);
    color: var(--color-text-secondary);
    transform: scale(1.15);
}

.tents-clue--over {
    background: var(--color-error-bg);
    color: var(--color-error);
}

/* ─── Cells ─── */
.tents-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1.5px solid var(--color-border-main, #CBD5E1);
    background: var(--color-bg-primary, #fff);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.tents-cell:hover:not(.tents-cell--tree) {
    background: var(--tents-hover-bg);
    border-color: var(--tents-tree-border);
}

.tents-cell--tree {
    background: var(--tents-tree-bg);
    border-color: var(--tents-tree-border);
    cursor: default;
}

.tents-cell--tree:hover {
    background: var(--tents-tree-bg);
    border-color: var(--tents-tree-border);
}

.tents-cell--tent {
    background: var(--tents-tent-bg);
    border-color: var(--tents-tent-border);
}

.tents-cell--grass {
    background: var(--color-bg-secondary, #F8FAFC);
    border-color: var(--color-border-main, #E2E8F0);
}

.tents-cell--error {
    background: var(--color-error-bg) !important;
    border-color: var(--color-error) !important;
    animation: tents-shake 0.3s ease;
}

@keyframes tents-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-3px); }
    75%       { transform: translateX(3px); }
}

/* ─── Icons inside cells ─── */
.tents-icon {
    width: 68%;
    height: 68%;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}

.tents-icon--tree {
    color: var(--tents-tree, #16A34A);
}

.tents-icon--tent {
    color: var(--tents-tent, #EA580C);
    animation: tents-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tents-icon--grass {
    color: var(--color-text-light);
    width: 44%;
    height: 44%;
}

@keyframes tents-pop {
    from { transform: scale(0.3) rotate(-8deg); opacity: 0.4; }
    to   { transform: scale(1)   rotate(0deg);  opacity: 1;   }
}