/* ===========================================================================
   Zip Game — CSS dédié
   Charge en complément de main.css + games.css (auto via IS_GAME_PAGE)
   =========================================================================== */

.zip-board-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    padding: .25rem;
}

.zip-board {
    --zip-size: 5;
    --zip-cell: clamp(38px, calc((min(92vw, 540px) - 8px) / var(--zip-size)), 78px);
    display: grid;
    grid-template-columns: repeat(var(--zip-size), var(--zip-cell));
    grid-auto-rows: var(--zip-cell);
    gap: 4px;
    padding: 8px;
    background: var(--af-surface-soft, #eef2f7);
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
    user-select: none;
    touch-action: none;
}

[data-theme="dark"] .zip-board {
    background: #0f172a;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05);
}

.zip-cell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #d6dde6;
    border-radius: 8px;
    padding: 0;
    color: inherit;
    font-weight: 800;
    font-size: clamp(.95rem, 2vw, 1.4rem);
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
    cursor: pointer;
}

[data-theme="dark"] .zip-cell {
    background: #1e293b;
    border-color: #334155;
}

.zip-cell:hover            { background: #f1f5ff; }
[data-theme="dark"] .zip-cell:hover { background: #273548; }

.zip-cell:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Numbered cells */
.zip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-weight: 800;
    font-size: clamp(.85rem, 1.8vw, 1.2rem);
    box-shadow: 0 2px 6px rgba(99, 102, 241, .35);
}
.zip-num-start { background: #10b981; box-shadow: 0 2px 6px rgba(16, 185, 129, .4); }
.zip-num-end   { background: #ef4444; box-shadow: 0 2px 6px rgba(239, 68, 68, .4); }

/* Active path */
.zip-cell.is-active {
    background: #c7d2fe;
    border-color: #6366f1;
}
[data-theme="dark"] .zip-cell.is-active {
    background: #312e81;
    border-color: #818cf8;
}
.zip-cell.is-head {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
    z-index: 2;
}

/* Path edges (visual ribbon between adjacent cells) */
.zip-cell.is-active::before,
.zip-cell.is-active::after {
    content: "";
    position: absolute;
    background: #6366f1;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
.zip-cell.edge-up::before    { top: -6px;    left: 50%; transform: translateX(-50%); width: 28%; height: 12px; }
.zip-cell.edge-down::after   { bottom: -6px; left: 50%; transform: translateX(-50%); width: 28%; height: 12px; }
.zip-cell.edge-left::before  { left: -6px;   top: 50%;  transform: translateY(-50%); height: 28%; width: 12px; }
.zip-cell.edge-right::after  { right: -6px;  top: 50%;  transform: translateY(-50%); height: 28%; width: 12px; }

/* Cells holding both vertical AND horizontal edges need both pseudo-elements
   to morph: split rules so up/left use ::before, down/right use ::after.
   The above selectors already enforce that split. */

/* Make sure pseudo-elements don't clash with the .zip-num pill */
.zip-cell .zip-num { position: relative; z-index: 2; }

/* Error flash */
.zip-cell.is-error {
    animation: zip-shake .38s ease;
    background: #fee2e2;
    border-color: #ef4444;
}
[data-theme="dark"] .zip-cell.is-error {
    background: #7f1d1d;
    border-color: #ef4444;
}

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

/* Hint pulse */
.zip-cell.zip-hint-pulse {
    animation: zip-hint 1.6s ease;
}
@keyframes zip-hint {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, .6); background: #fef3c7; }
}