/*
 * sansretenue.com — Bottom-nav "Pinball arcade"
 *
 * Paradigme UNIQUE à ce site (anti-fingerprint cross-domain).
 * Préfixe `srn-pbl-` exclusif. Palette noir verre + chrome + LED rouge/cyan.
 *
 * Inspiration : barre de bumpers et flippers de flipper années 70-80.
 * Les tabs sont des "bumpers" circulaires chromés, le centre est la "bille"
 * en relief. LEDs rouge/cyan en bordure simulent le tilt.
 *
 * Refonte 2026-05-02 — pas de mutualisation _common/.
 */

:root {
    --srn-pbl-glass:   #0d0d0d;
    --srn-pbl-glass-2: #1a1a1f;
    --srn-pbl-chrome:  #c8cdd2;
    --srn-pbl-chrome-d:#7a8086;
    --srn-pbl-led-r:   #ff2a3d;
    --srn-pbl-led-c:   #3df0ff;
    --srn-pbl-amber:   #ffb036;
    --srn-pbl-text:    #e6e9ec;
}

.srn-pbl-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    height: calc(72px + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background:
        linear-gradient(180deg,
            var(--srn-pbl-glass-2) 0%,
            var(--srn-pbl-glass) 100%);
    border-top: 2px solid var(--srn-pbl-chrome-d);
    box-shadow:
        inset 0 1px 0 var(--srn-pbl-chrome),
        0 -6px 16px rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 6px;
    gap: 4px;
}

/* LED strip — alternating red/cyan dots along the very top */
.srn-pbl-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        var(--srn-pbl-led-r) 0 6px,
        transparent 6px 14px,
        var(--srn-pbl-led-c) 14px 20px,
        transparent 20px 28px);
    filter: drop-shadow(0 0 3px var(--srn-pbl-led-r))
            drop-shadow(0 0 3px var(--srn-pbl-led-c));
    pointer-events: none;
}

/* Bumper buttons */
.srn-pbl-bumper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--srn-pbl-text);
    font-family: "VT323", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.srn-pbl-bumper-disc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff 0%, var(--srn-pbl-chrome) 35%, var(--srn-pbl-chrome-d) 100%);
    box-shadow:
        inset 0 -3px 4px rgba(0, 0, 0, .4),
        0 1px 3px rgba(0, 0, 0, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .12s ease, transform .12s ease;
}

.srn-pbl-bumper-disc svg {
    width: 18px;
    height: 18px;
    stroke: var(--srn-pbl-glass);
    fill: none;
    stroke-width: 2;
}

.srn-pbl-bumper:active .srn-pbl-bumper-disc {
    transform: scale(.92);
    box-shadow:
        inset 0 0 6px rgba(255, 42, 61, .8),
        0 0 8px var(--srn-pbl-led-r);
}

.srn-pbl-bumper[aria-current="page"] .srn-pbl-bumper-disc {
    box-shadow:
        inset 0 0 6px rgba(61, 240, 255, .55),
        0 0 8px var(--srn-pbl-led-c);
}

.srn-pbl-bumper[aria-current="page"] {
    color: var(--srn-pbl-led-c);
    text-shadow: 0 0 4px var(--srn-pbl-led-c);
}

/* Center "ball" launcher — slightly larger, amber LED */
.srn-pbl-launch .srn-pbl-bumper-disc {
    width: 44px;
    height: 44px;
    box-shadow:
        inset 0 -4px 6px rgba(0, 0, 0, .4),
        0 0 10px var(--srn-pbl-amber);
}
.srn-pbl-launch .srn-pbl-bumper-disc svg {
    width: 22px;
    height: 22px;
}

body.srn-pbl-padded { padding-bottom: 90px; }

@media (min-width: 768px) {
    .srn-pbl-bar { display: none; }
    body.srn-pbl-padded { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .srn-pbl-bar::before { filter: none; }
}