/**


 * Focus Flow - Styles


 *


 * @author      Mike Fairbrother <mike@fairbrother.me>


 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.


 */





/* ---- Game Design Tokens ---- */


:root {


    --ff-energy: #0abde3;


    --ff-energy-glow: rgba(10, 189, 227, 0.5);


    --ff-energy-dim: rgba(10, 189, 227, 0.15);


    --ff-source: #0abde3;


    --ff-target: #ff6b6b;


    --ff-target-done: #2ed573;


    --ff-pipe: rgba(255, 255, 255, 0.12);


    --ff-pipe-connected: rgba(10, 189, 227, 0.3);


    --ff-cell-bg: rgba(255, 255, 255, 0.03);


    --ff-cell-border: rgba(255, 255, 255, 0.06);


    --ff-grid-gap: 3px;


}





/* ---- Logo ---- */


.ff-logo {


    margin: 16px auto 8px;


}


.ff-logo-grid {


    display: grid;


    grid-template-columns: repeat(3, 28px);


    grid-template-rows: repeat(3, 28px);


    gap: 3px;


}


.ff-logo-pipe {


    width: 28px;


    height: 28px;


    border-radius: 4px;


    background: var(--ff-cell-bg);


    border: 2px solid transparent;


    position: relative;


}


.ff-logo-pipe::before,


.ff-logo-pipe::after {


    content: '';


    position: absolute;


    background: var(--ff-energy);


    border-radius: 2px;


}


/* Straight pipe (vertical) */


.ff-pipe-straight::before {


    width: 4px;


    height: 100%;


    top: 0;


    left: 50%;


    transform: translateX(-50%);


}


/* Corner pipe (top-right) */


.ff-pipe-corner::before {


    width: 4px;


    height: 50%;


    top: 0;


    left: 50%;


    transform: translateX(-50%);


}


.ff-pipe-corner::after {


    width: 50%;


    height: 4px;


    top: 50%;


    right: 0;


    transform: translateY(-50%);


}


/* Cross pipe */


.ff-pipe-cross::before {


    width: 4px;


    height: 100%;


    top: 0;


    left: 50%;


    transform: translateX(-50%);


}


.ff-pipe-cross::after {


    width: 100%;


    height: 4px;


    top: 50%;


    left: 0;


    transform: translateY(-50%);


}


/* T-junction */


.ff-pipe-tee::before {


    width: 100%;


    height: 4px;


    top: 50%;


    left: 0;


    transform: translateY(-50%);


}


.ff-pipe-tee::after {


    width: 4px;


    height: 50%;


    bottom: 0;


    left: 50%;


    transform: translateX(-50%);


}





/* Logo rotation helpers */


.ff-r90  { transform: rotate(90deg); }


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


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





.ff-logo-pipe {


    box-shadow: 0 0 8px var(--ff-energy-glow);


    animation: ff-logo-pulse 3s ease-in-out infinite alternate;


}


@keyframes ff-logo-pulse {


    0%   { box-shadow: 0 0 6px var(--ff-energy-dim); }


    100% { box-shadow: 0 0 14px var(--ff-energy-glow); }


}





/* ---- Title ---- */


.ff-title {


    font-size: 48px;


    font-weight: 900;


    line-height: 1;


    margin: 12px 0 6px;


    background: linear-gradient(135deg, #0abde3 0%, #48dbfb 50%, #0abde3 100%);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    filter: drop-shadow(0 2px 12px var(--ff-energy-glow));


}


.ff-subtitle {


    font-size: 15px;


    color: var(--gp-text-secondary);


    margin-bottom: 20px;


    letter-spacing: 1px;


    font-weight: 500;


}





/* ---- Menu Stats ---- */


.ff-menu-stats {


    display: flex;


    gap: 32px;


    margin-bottom: 24px;


}


.ff-menu-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.ff-menu-stat-val {


    font-size: 28px;


    font-weight: 800;


    color: var(--ff-energy);


    font-variant-numeric: tabular-nums;


}


.ff-menu-stat-lbl {


    font-size: 11px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}





/* ---- Mode Toggle ---- */


.ff-mode-toggle {


    display: flex;


    gap: 4px;


    background: rgba(255, 255, 255, 0.05);


    border-radius: var(--gp-radius-md);


    padding: 4px;


    margin-bottom: 16px;


}


.ff-mode-btn {


    flex: 1;


    padding: 10px 20px;


    border: none;


    border-radius: 12px;


    font-size: 14px;


    font-weight: 700;


    color: var(--gp-text-secondary);


    background: transparent;


    cursor: pointer;


    transition: all 0.2s ease;


    font-family: var(--gp-font-stack);


}


.ff-mode-btn.active {


    background: var(--ff-energy);


    color: #0f0c29;


    box-shadow: 0 2px 12px var(--ff-energy-glow);


}





/* ---- Size Selector ---- */


.ff-size-selector {


    display: flex;


    gap: 8px;


    margin-bottom: 24px;


}


.ff-size-btn {


    padding: 8px 18px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: var(--gp-radius-sm);


    font-size: 14px;


    font-weight: 700;


    color: var(--gp-text-secondary);


    background: rgba(255, 255, 255, 0.04);


    cursor: pointer;


    transition: all 0.15s ease;


    font-family: var(--gp-font-stack);


}


.ff-size-btn.active {


    border-color: var(--ff-energy);


    color: var(--ff-energy);


    background: var(--ff-energy-dim);


}


.ff-size-selector.hidden {


    display: none;


}





/* ---- Grid Area ---- */


.ff-grid-area {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 12px;


}


.ff-grid {


    display: grid;


    gap: var(--ff-grid-gap);


    user-select: none;


    -webkit-user-select: none;


}





/* ---- Cell ---- */


.ff-cell {


    position: relative;


    width: 100%;


    aspect-ratio: 1;


    background: var(--ff-cell-bg);


    border: 1px solid var(--ff-cell-border);


    border-radius: 6px;


    cursor: pointer;


    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);


    overflow: hidden;


}


.ff-cell:active {


    transform: scale(0.92);


}


.ff-cell.ff-connected {


    background: var(--ff-pipe-connected);


    border-color: rgba(10, 189, 227, 0.2);


}


.ff-cell.ff-locked {


    cursor: default;


}





/* Pipe SVG inside cell */


.ff-cell svg {


    position: absolute;


    inset: 0;


    width: 100%;


    height: 100%;


    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);


}





/* Pipe segments */


.ff-pipe-seg {


    stroke: var(--ff-pipe);


    stroke-width: 6;


    stroke-linecap: round;


    fill: none;


    transition: stroke 0.4s ease, filter 0.4s ease;


}


.ff-connected .ff-pipe-seg {


    stroke: var(--ff-energy);


    filter: drop-shadow(0 0 6px var(--ff-energy-glow));


}





/* Source node */


.ff-source-node {


    position: absolute;


    inset: 20%;


    border-radius: 50%;


    background: var(--ff-source);


    box-shadow: 0 0 12px var(--ff-energy-glow), 0 0 24px var(--ff-energy-dim);


    animation: ff-source-pulse 2s ease-in-out infinite;


    z-index: 2;


}


@keyframes ff-source-pulse {


    0%, 100% { box-shadow: 0 0 8px var(--ff-energy-glow), 0 0 16px var(--ff-energy-dim); transform: scale(1); }


    50%      { box-shadow: 0 0 16px var(--ff-energy-glow), 0 0 32px var(--ff-energy-dim); transform: scale(1.08); }


}





/* Target node */


.ff-target-node {


    position: absolute;


    inset: 22%;


    border-radius: 50%;


    border: 3px solid var(--ff-target);


    background: rgba(255, 107, 107, 0.15);


    box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);


    z-index: 2;


    transition: all 0.5s ease;


}


.ff-target-node.ff-reached {


    border-color: var(--ff-target-done);


    background: rgba(46, 213, 115, 0.2);


    box-shadow: 0 0 14px rgba(46, 213, 115, 0.4);


    animation: ff-target-reached 0.5s ease forwards;


}


@keyframes ff-target-reached {


    0%  { transform: scale(1); }


    50% { transform: scale(1.2); }


    100% { transform: scale(1); }


}





/* Energy flow animation */


.ff-cell.ff-flowing .ff-pipe-seg {


    stroke: var(--ff-energy);


    filter: drop-shadow(0 0 8px var(--ff-energy-glow));


    animation: ff-energy-flow 1.5s ease-in-out infinite;


}


@keyframes ff-energy-flow {


    0%, 100% { filter: drop-shadow(0 0 6px var(--ff-energy-glow)); }


    50%      { filter: drop-shadow(0 0 14px var(--ff-energy-glow)) drop-shadow(0 0 20px var(--ff-energy-dim)); }


}





/* Flow particle animation on completion */


.ff-flow-particle {


    position: absolute;


    width: 4px;


    height: 4px;


    border-radius: 50%;


    background: var(--ff-energy);


    box-shadow: 0 0 6px var(--ff-energy-glow);


    pointer-events: none;


    z-index: 5;


}





/* ---- Game Footer Actions ---- */


.ff-game-footer {


    display: flex;


    justify-content: center;


    padding: 8px 16px 16px;


    gap: 12px;


}


.ff-action-btn {


    padding: 8px 20px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: var(--gp-radius-sm);


    font-size: 13px;


    font-weight: 600;


    color: var(--gp-text-secondary);


    background: rgba(255, 255, 255, 0.05);


    cursor: pointer;


    transition: all 0.15s ease;


    font-family: var(--gp-font-stack);


}


.ff-action-btn:active {


    background: rgba(255, 255, 255, 0.1);


    transform: scale(0.95);


}





/* ---- Complete Overlay ---- */


.ff-complete-icon {


    width: 64px;


    height: 64px;


    border-radius: 50%;


    background: linear-gradient(135deg, var(--ff-energy), #48dbfb);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 32px;


    color: #0f0c29;


    font-weight: 900;


    margin-bottom: 8px;


    box-shadow: 0 4px 24px var(--ff-energy-glow);


    animation: gp-badge-pop 0.5s ease forwards;


}


.ff-complete-stats {


    display: flex;


    gap: 24px;


    margin: 16px 0;


}


.ff-cstat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.ff-cstat-val {


    font-size: 24px;


    font-weight: 800;


    color: var(--ff-energy);


    font-variant-numeric: tabular-nums;


}


.ff-cstat-lbl {


    font-size: 11px;


    color: var(--gp-text-secondary);


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}


.ff-new-best {


    color: var(--gp-accent);


    font-weight: 800;


    font-size: 16px;


    margin-bottom: 8px;


    animation: gp-badge-pop 0.6s ease forwards;


}





/* ---- Help Modal ---- */


.ff-help-section {


    display: flex;


    align-items: flex-start;


    gap: 14px;


    margin-bottom: 16px;


    text-align: left;


}


.ff-help-section p {


    font-size: 14px;


    color: var(--gp-text-secondary);


    line-height: 1.5;


}


.ff-help-icon {


    width: 36px;


    height: 36px;


    min-width: 36px;


    border-radius: 8px;


    background: var(--ff-energy-dim);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 18px;


    color: var(--ff-energy);


}


.ff-help-source {


    background: radial-gradient(circle, var(--ff-energy), var(--ff-energy-dim));


    border-radius: 50%;


}


.ff-help-subtitle {


    font-size: 16px;


    font-weight: 700;


    margin: 20px 0 12px;


    color: var(--gp-text-primary);


}


.ff-help-pipes {


    display: flex;


    justify-content: space-around;


    gap: 8px;


}


.ff-help-pipe-demo {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 6px;


}


.ff-help-pipe-demo span {


    font-size: 11px;


    color: var(--gp-text-secondary);


}


.ff-pipe-preview {


    width: 36px;


    height: 36px;


    border-radius: 6px;


    background: var(--ff-cell-bg);


    border: 1px solid var(--ff-cell-border);


    position: relative;


}


.ff-pipe-preview::before,


.ff-pipe-preview::after {


    content: '';


    position: absolute;


    background: var(--ff-energy);


    border-radius: 2px;


}


.ff-pipe-preview.ff-pipe-straight::before {


    width: 4px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);


}


.ff-pipe-preview.ff-pipe-corner::before {


    width: 4px; height: 50%; top: 0; left: 50%; transform: translateX(-50%);


}


.ff-pipe-preview.ff-pipe-corner::after {


    width: 50%; height: 4px; top: 50%; right: 0; transform: translateY(-50%);


}


.ff-pipe-preview.ff-pipe-tee::before {


    width: 100%; height: 4px; top: 50%; left: 0; transform: translateY(-50%);


}


.ff-pipe-preview.ff-pipe-tee::after {


    width: 4px; height: 50%; bottom: 0; left: 50%; transform: translateX(-50%);


}


.ff-pipe-preview.ff-pipe-cross::before {


    width: 4px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);


}


.ff-pipe-preview.ff-pipe-cross::after {


    width: 100%; height: 4px; top: 50%; left: 0; transform: translateY(-50%);


}





/* ---- Subtle grid background pattern ---- */


.ff-grid-area::before {


    content: '';


    position: absolute;


    inset: 0;


    background:


        radial-gradient(circle at 50% 30%, var(--ff-energy-dim) 0%, transparent 60%);


    pointer-events: none;


    opacity: 0.4;


}





/* ---- Responsive: cell size by grid ---- */


/* Grid sizing is handled dynamically in JS */