.fl-board {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 8px;
    background: #0f172a;
    border-radius: 16px;
    box-shadow: 0 12px 32px var(--shadow);
    touch-action: none;
    user-select: none;
}

.fl-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #1e293b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fl-seg {
    position: relative;
    z-index: 1;
    transition: opacity 0.1s ease;
}

/* A path cell is a round knob; the fl-con bars link it to its neighbours
   so the whole line reads as one continuous pipe. */
.fl-seg.fl-path {
    width: 38%;
    height: 38%;
    border-radius: 50%;
}

.fl-seg.fl-dot {
    width: 66%;
    height: 66%;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Connector bars — sized to span the 3px grid gap toward the neighbour. */
.fl-con { position: absolute; display: none; z-index: 0; }
.fl-con.fl-on { display: block; }
.fl-con.fl-up    { left: 31%; width: 38%; top: -3px;    height: calc(50% + 3px); }
.fl-con.fl-down  { left: 31%; width: 38%; bottom: -3px; height: calc(50% + 3px); }
.fl-con.fl-left  { top: 31%;  height: 38%; left: -3px;  width: calc(50% + 3px); }
.fl-con.fl-right { top: 31%;  height: 38%; right: -3px; width: calc(50% + 3px); }

@media (max-width: 480px) {
    .fl-board { max-width: 340px; gap: 2px; padding: 6px; }
}