/* ==========================================================================
   Noos Pipes — pipes.css
   Lobby + game styles (split out of pipes.php)
   ========================================================================== */

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

:root {
    --bg: #f8fafc;
    --accent: #38bdf8;
    --dark: #1e293b;
    --pipe-bg: #334155;
    --pipe-color: #94a3b8;
    --flow-color: #38bdf8;
    --gold: #fbbf24;
    --danger: #ef4444;
    --ok: #10b981;
}

body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    background: var(--bg);
    color: var(--dark);
    overflow-x: hidden;
}

/* ==========================================================================
   LOBBY
   ========================================================================== */

.lobby-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }

.lobby-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 18px;
    font-weight: 700;
    color: #64748b;
}
.lobby-summary strong { color: var(--dark); }

.continue-btn {
    background: #f59e0b;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}
.continue-btn[hidden] { display: none; }

.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
}

.puzzle-card {
    background: white;
    padding: 25px 15px;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .02);
    border: 2px solid transparent;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    will-change: transform;
}
.puzzle-card:hover,
.puzzle-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
    opacity: 1;
}
.puzzle-card.is-done { opacity: .6; }
.puzzle-card.is-done:hover { opacity: 1; }

.card-meta { font-size: 12px; color: #94a3b8; font-weight: 600; min-height: 16px; }
.card-meta b { color: var(--dark); }

/* Gold standard */
.puzzle-card.perfect-glow {
    border-color: var(--gold) !important;
    background: linear-gradient(145deg, #ffffff, #fffdf5) !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, .1) !important;
}
.puzzle-card.perfect-glow:hover { box-shadow: 0 12px 30px rgba(251, 191, 36, .25) !important; }

.puzzle-icon-pipe {
    width: 50px;
    height: 50px;
    background: #0f172a;
    border-radius: 10px;
    position: relative;
    margin-bottom: 12px;
    transition: transform .3s ease;
}
.puzzle-card:hover .puzzle-icon-pipe { transform: scale(1.1); }
.puzzle-icon-pipe::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 10px;
    background: var(--accent);
    top: 20px;
    left: 0;
    border-radius: 0 5px 5px 0;
}
.perfect-glow .puzzle-icon-pipe { background: var(--gold) !important; box-shadow: 0 0 15px rgba(251, 191, 36, .4); }
.perfect-glow .puzzle-icon-pipe::after { background: #fff !important; box-shadow: 0 0 5px rgba(255, 255, 255, .8); }

/* In-progress */
.puzzle-card.is-progressing { border-color: #f59e0b; background: #fffdfa; }
.puzzle-card.is-progressing .puzzle-icon-pipe { background: #f59e0b !important; animation: pulseScale 2s infinite ease-in-out; }
@keyframes pulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Difficulty pills */
.diff-pill { font-size: 10px; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin-top: 4px; }
.diff-easy    { background: #dcfce7; color: #88b04b; }
.diff-medium  { background: #fef9c3; color: #f59e0b; }
.diff-hard    { background: #ffedd5; color: #ef4444; }
.diff-extreme { background: #fee2e2; color: #7c3aed; }

/* Seals & stars */
.status-icon { position: absolute; top: -12px; right: -12px; z-index: 10; }
.completion-seal {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 3px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}
.completion-seal.seal-progress { background: #f59e0b; }
.perfect-star {
    background: var(--gold) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, .4) !important;
    font-size: 14px;
    animation: star-pulse 2s infinite ease-in-out;
}
@keyframes star-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ==========================================================================
   GAME LAYOUT / HUD
   ========================================================================== */

.game-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    min-height: auto;
    touch-action: manipulation;
}

.move-counter-ui {
    background: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    margin-bottom: 8px;
    color: var(--dark);
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 14px;
}
#move-count { color: var(--accent); font-size: 1.2em; }
.perfect-par { font-size: .9em; color: #94a3b8; border-left: 2px solid #f1f5f9; padding-left: 20px; }
.perfect-par strong { color: var(--gold); }

/* Par progress bar */
.par-wrap { width: min(92vw, 360px); margin-bottom: 6px; }
.par-wrap[hidden] { display: none; }
.par-track { height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.par-fill { height: 100%; width: 0; background: var(--gold); border-radius: 99px; transition: width .25s ease, background .25s ease; }
.par-fill.over { background: var(--danger); }
.par-label { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 700; color: #94a3b8; }

/* ==========================================================================
   GRID + TILES
   ========================================================================== */

#pipe-grid {
    display: grid;
    gap: 1px;
    background: #0f172a;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    width: min(95vw, 500px);
    height: min(95vw, 500px);
    margin: 5px auto 15px auto;
    user-select: none;
    -webkit-user-select: none;
}

.tile {
    width: 100%;
    height: 100%;
    background: var(--pipe-bg);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; z-index: 12; }

/* Rotating layer — drawn once in base orientation, turned with CSS */
.t-in {
    position: absolute;
    inset: 0;
    transform: rotate(var(--a, 0deg));
    transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}

.p-seg, .p-center {
    position: absolute;
    background-color: var(--pipe-color);
    z-index: 2;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.p-top    { top: 0;     left: 35%;  width: 30%; height: 50%; }
.p-right  { top: 35%;   right: 0;   width: 50%; height: 30%; }
.p-bottom { bottom: 0;  left: 35%;  width: 30%; height: 50%; }
.p-left   { top: 35%;   left: 0;    width: 50%; height: 30%; }
.p-center { top: 35%;   left: 35%;  width: 30%; height: 30%; z-index: 3; }

/* Powered pipes: colour + dashed flowing texture (non-colour cue) */
.tile.active .p-seg,
.tile.active .p-center {
    background-color: var(--flow-color);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 10px);
    background-size: 14px 14px;
    box-shadow: 0 0 15px var(--flow-color);
    animation: flow-drift 1.2s linear infinite;
    transition-delay: calc(var(--d, 0) * 45ms);
}
@keyframes flow-drift { to { background-position: 14px 0; } }

.tile.is-start { background: rgba(16, 185, 129, .15); box-shadow: inset 0 0 0 2px var(--ok); }
.tile.is-end   { background: rgba(244, 63, 94, .15);  box-shadow: inset 0 0 0 2px #f43f5e; }

/* Hinted / locked */
.tile.is-hinted { box-shadow: inset 0 0 0 3px var(--gold); z-index: 10; cursor: default; }
.tile.is-hinted::before {
    content: '📌';
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: clamp(8px, 2.2vw, 12px);
    z-index: 6;
    pointer-events: none;
}

/* Open-end nubs (easy / medium only) */
.nub { position: absolute; background: var(--danger); border-radius: 2px; opacity: 0; z-index: 4; pointer-events: none; transition: opacity .15s; }
.n-0 { top: 0;    left: 42%; width: 16%; height: 12%; }
.n-1 { right: 0;  top: 42%;  width: 12%; height: 16%; }
.n-2 { bottom: 0; left: 42%; width: 16%; height: 12%; }
.n-3 { left: 0;   top: 42%;  width: 12%; height: 16%; }
#pipe-grid.show-open .tile.o-0 .n-0,
#pipe-grid.show-open .tile.o-1 .n-1,
#pipe-grid.show-open .tile.o-2 .n-2,
#pipe-grid.show-open .tile.o-3 .n-3 { opacity: .85; }

/* Win wave: ripples out from the Source by depth */
#pipe-grid.win-wave .p-seg,
#pipe-grid.win-wave .p-center {
    animation: win-pulse .55s ease-out calc(var(--d, 0) * 40ms) both;
}
@keyframes win-pulse {
    0%   { filter: brightness(1); }
    45%  { filter: brightness(2); }
    100% { filter: brightness(1.1); }
}

/* ==========================================================================
   CONTROLS / TOAST
   ========================================================================== */

.game-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    width: min(92vw, 600px);
}

.btn-game {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: white;
    font-family: inherit;
    font-weight: 700;
    color: var(--dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-game:focus-visible { outline: 3px solid var(--accent); }
.btn-game:disabled { opacity: .45; cursor: default; }
.btn-game.armed { background: #fee2e2; color: var(--danger); }
.btn-game.icon-only { flex: 0 0 auto; min-width: 48px; }

.pipes-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    background: var(--dark);
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 9999;
}
.pipes-toast.show { opacity: 1; transform: translate(-50%, 0); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.key-hint { margin-top: 10px; font-size: 12px; color: #94a3b8; text-align: center; }

/* ==========================================================================
   RESPONSIVE + REDUCED MOTION
   ========================================================================== */

@media (max-width: 600px) {
    #pipe-grid { padding: 4px; border-radius: 8px; }
    .perfect-par { padding-left: 15px; }
    .key-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .t-in { transition: none; }
    .tile.active .p-seg,
    .tile.active .p-center { animation: none; transition-delay: 0s; }
    #pipe-grid.win-wave .p-seg,
    #pipe-grid.win-wave .p-center { animation: none; }
    .puzzle-card.is-progressing .puzzle-icon-pipe,
    .perfect-star { animation: none; }
    .par-fill, .pipes-toast { transition: none; }
}