@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --bg-color: #050505;
    --text-color: #e0e0e0;
    --neon-cyan: #0ff;
    --neon-red: #f00;
    --accent-glow: rgba(0, 255, 255, 0.4);
    --font-main: 'Orbitron', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    width: 100vw;
}

/* Transitions */
.view-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5rem;
    min-height: 100vh;
    transition: opacity 0.5s ease-in-out;
}

.view-hidden {
    display: none;
    opacity: 0;
}

/* Landing Screen */
#landing-screen {
    position: relative;
    z-index: 10;
}

.background-beams {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050505 100%);
    z-index: -1;
}

.content {
    text-align: center;
}

h1.glitch-text {
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: 0.5rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    margin-bottom: 1rem;
}

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #888;
    letter-spacing: 0.1rem;
}

.variety-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.variety-selector.secondary {
    margin-bottom: 3rem;
}

.variety-btn {
    background: transparent;
    border: 1px solid #444;
    color: #666;
    padding: 0.5rem 1rem;
    font-family: var(--font-main);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.1rem;
}

.variety-btn.active {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.variety-btn:hover:not(.active) {
    border-color: #888;
    color: #888;
}

.neon-button {
    background: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 1rem 2.5rem;
    font-family: var(--font-main);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 5px var(--neon-cyan);
    letter-spacing: 0.2rem;
}

.neon-button:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 30px var(--neon-cyan);
}

.downloads-section {
    margin-top: 4rem;
}

.download-header {
    font-size: 0.8rem;
    color: #888;
    font-weight: bold;
    letter-spacing: 0.3rem;
    margin-bottom: 2rem;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

.downloads-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.downloads-container.legacy {
    gap: 0.5rem;
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 1.5rem auto 0;
    padding: 0.75rem 0;
    overflow-x: auto;
}

.device-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.device-link img {
    width: 32px;
    height: 32px;
    filter: invert(1) brightness(2) drop-shadow(0 0 2px var(--neon-cyan));
    opacity: 0.6;
    transition: all 0.3s ease;
}

.downloads-container.legacy .device-link img {
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.device-label {
    font-size: 0.5rem;
    color: #555;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease;
}

.downloads-container.legacy .device-label {
    display: none;
}

.device-link:hover {
    transform: translateY(-3px);
}

.device-link:hover img {
    filter: invert(1) brightness(2) drop-shadow(0 0 8px var(--neon-cyan));
    opacity: 1;
}

.device-link:hover .device-label {
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
}

/* Content Pages */
.content-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5rem 2rem;
    overflow-y: auto;
}

.page-container {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.text-content {
    margin-top: 4rem;
    text-align: left;
    line-height: 1.8;
    color: #bbb;
    font-family: monospace;
}

.text-content p {
    margin-bottom: 1.5rem;
}

/* Support Page Specifics */
.faq-item {
    margin-bottom: 2rem;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 1.5rem;
}

.faq-question {
    display: block;
    color: var(--neon-cyan);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
}

.faq-answer {
    font-size: 0.85rem;
    color: #888;
}

.support-contact-section {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid #333;
}

.support-info-list {
    margin-top: 1.5rem;
    list-style: none;
    padding-left: 0;
}

.support-info-list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.85rem;
}

.support-info-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--neon-cyan);
}

.blank-page {
    background-color: var(--bg-color);
}

.footer {
    padding: 4rem 0 2rem;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: #444;
}

.footer-nav {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.footer-nav a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}

.footer-nav a:hover {
    color: var(--neon-cyan);
}

/* Instructions Section */
.instructions-section {
    margin-top: 6rem;
    max-width: 900px;
    width: 90%;
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 4rem;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 1.5rem;
    color: var(--neon-cyan);
    letter-spacing: 0.5rem;
    margin-bottom: 2rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.mission-brief {
    font-family: monospace;
    color: #888;
    line-height: 1.6;
    margin-bottom: 4rem;
}

.mission-brief p {
    margin-bottom: 1rem;
}

.subsection-title {
    font-size: 1rem;
    color: #555;
    letter-spacing: 0.3rem;
    margin-bottom: 2rem;
}

.piece-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
}

.piece-card {
    background: #080808;
    border: 1px solid #1a1a1a;
    padding: 1.5rem;
    transition: border-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.piece-card:hover {
    border-color: #333;
}

/* Crop individual tiles out of the in-game 1024×1024 sprite sheet
   (8 cols × 8 rows of 128 px tiles). We render at 64 px so the sheet
   is scaled to 512×512 and each tile occupies a 64×64 cell. The
   per-piece classes below set background-position to pick the
   cardinal-orientation tile listed in game.js's TILE_POS_MAP. */
.piece-img {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-bottom: 0.75rem;
    align-self: center;
    background-image: url(../assets/alc_tiles.png);
    background-repeat: no-repeat;
    background-size: 512px 512px;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.35));
}

/* col, row → background-position: -col*64 px -row*64 px. Source of
   truth: game.js TILE_POS_MAP (n* fields = cardinal orientation). */
.piece-img.tile-K { background-position: -384px  -64px; } /* King            6,1 */
.piece-img.tile-L { background-position:    0px -128px; } /* Laser           0,2 */
.piece-img.tile-T { background-position: -384px    0px; } /* TriangularMirror 6,0 */
.piece-img.tile-M { background-position:    0px  -64px; } /* Mirror          0,1 */
.piece-img.tile-B { background-position: -256px -192px; } /* Block           4,3 */
.piece-img.tile-H { background-position: -192px    0px; } /* Hypercube       3,0 */
.piece-img.tile-Y { background-position: -448px  -64px; } /* Hypergon        7,1 */
.piece-img.tile-S { background-position: -128px -128px; } /* Stunner         2,2 */
.piece-img.tile-V { background-position: -128px  -64px; } /* BeamSplitter    2,1 */
.piece-img.tile-W { background-position: -256px  -64px; } /* OneWayMirror    4,1 */
.piece-img.tile-O { background-position: -128px    0px; } /* FullyMirrorOct  2,0 */
.piece-img.tile-P { background-position: -256px    0px; } /* PartlyMirrorOct 4,0 */
.piece-img.tile-X { background-position: -256px -128px; } /* Bomb            4,2 */

/* Same 64×64 footprint as the sprite-cropped .piece-img cells, but
   sourced from a separate GIF rather than the tile sheet — used for
   pieces whose tile-sheet rendering doesn't match the original art
   (e.g. the LC Block, which is a square with a single mirrored side). */
.piece-img-gif {
    display: inline-block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.75rem;
    align-self: center;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.35));
}

.piece-name {
    display: block;
    color: var(--neon-cyan);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
}

.piece-desc {
    font-size: 0.75rem;
    color: #777;
    line-height: 1.5;
}

.piece-more {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    color: var(--neon-cyan);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.piece-more:hover { border-bottom-color: var(--neon-cyan); }

/* Per-piece sections on instructions_*.html — image + paragraph
   block, anchor target for "More info" links from the roster. */
.piece-doc {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #1a1a1a;
    scroll-margin-top: 5rem;
}

.piece-doc .piece-img {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.piece-doc-body {
    flex: 1 1 auto;
}

.piece-doc-name {
    color: var(--neon-cyan);
    font-size: 0.95rem;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 4px var(--neon-cyan);
}

.rule-list {
    list-style: square;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: #999;
    font-size: 0.85rem;
}
.rule-list li { margin-bottom: 0.5rem; }

/* Piece art on instructions_*.html — uses the original site's GIFs
   (small, ~30–50 px source). Pinned to a 64 px box so all pieces
   line up no matter the source dimensions. */
.piece-art {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
    background: #050505;
    padding: 4px;
    border: 1px solid #1a1a1a;
}
.piece-art-thin { object-fit: contain; }

.board-figure {
    margin: 1.5rem 0 2.5rem 0;
    text-align: center;
}

.board-img {
    max-width: 100%;
    height: auto;
    border: 1px solid #222;
    image-rendering: pixelated;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.08);
}

.board-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #666;
    font-family: monospace;
    letter-spacing: 0.05rem;
}

/* Game Screen */
#game-screen {
    flex-direction: column;
    padding: 2rem;
}

.game-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.mini-logo {
    color: var(--neon-cyan);
    font-size: 1.5rem;
    text-shadow: 0 0 5px var(--neon-cyan);
}

.text-button {
    background: transparent;
    border: none;
    color: #666;
    font-family: var(--font-main);
    cursor: pointer;
    transition: color 0.3s;
}

.text-button:hover {
    color: var(--neon-red);
}

.game-container {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    height: calc(100vh - 150px);
}

.board-wrapper {
    flex: 1;
    background: #111;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    position: relative;
}

#board-canvas {
    image-rendering: auto;
    max-width: 100%;
    max-height: 100%;
    /* Suppress the "Save Image" / selection callout iOS shows on a
       long press over a canvas, and the grey tap highlight Android
       paints on quick taps. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.game-controls {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Side panel that hosts the player indicator + control buttons —
   ported from the in-server WebContent build. Uses neutral greys so
   it sits visually under the neon page chrome. */
#panel {
    width: 160px;
    background: #1a1a2a;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.indicator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    aspect-ratio: 1;
    width: 60px;
    margin: 0 auto;
}

.player-sq {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    transition: transform 0.2s;
}

.player-sq.red { background: #ff0000; }
.player-sq.green { background: #00ff00; }
.player-sq.blue { background: #5080ff; }
.player-sq.purple { background: #9050e0; }
.player-sq.active { transform: scale(1.1); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
.player-sq.dim { transform: scale(0.6); opacity: 0.5; }

.pips {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    transition: background 0.2s;
}
.pip.active { background: white; }

.btn-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    margin-bottom: auto;
}

#panel button {
    height: 60px;
    background: #2a2a38;
    border: none;
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background 0.1s, transform 0.05s;
    /* Suppress iOS / Android long-press behaviours: copy/paste
       callout, text selection, and the highlight overlay. The
       FIRE button is press-and-hold; without these the OS menu
       hijacks the gesture mid-fire. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#panel button:hover:not(:disabled) { background: #3a3a48; }
#panel button:active:not(:disabled) { transform: translateY(2px); }
#panel button:disabled { opacity: 0.2; cursor: default; }
#panel button svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}

.btn-label {
    font-family: var(--font-main);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: #ccd;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

#overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    visibility: hidden;
}
#overlay.visible { visibility: visible; }

.win-card {
    background: #000;
    border: 3px solid white;
    padding: 30px 60px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0,0,0,1);
}
.win-title { font-size: 32px; font-weight: bold; margin-bottom: 10px; color: #fff; }

#bad-action-toast {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    z-index: 50;
    white-space: nowrap;
}
#bad-action-toast.show { opacity: 1; }

/* Responsive Design */
@media (max-width: 768px) {
    h1.glitch-text {
        font-size: 2.5rem;
        letter-spacing: 0.2rem;
    }

    .subtitle {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    .variety-selector {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 0 auto 1.5rem;
    }

    .variety-btn {
        width: 100%;
        max-width: 250px;
    }

    .neon-button {
        width: 90%;
        padding: 1rem;
        font-size: 1rem;
    }

    .downloads-container {
        gap: 1rem;
    }

    .downloads-container.legacy {
        gap: 0.4rem;
    }

    .device-link img {
        width: 28px;
        height: 28px;
    }

    .downloads-container.legacy .device-link img {
        width: 18px;
        height: 18px;
    }

    /* Phone portrait: let the board span edge-to-edge so the user
       gets the largest possible play surface. Override the parent
       #game-screen's 2rem horizontal padding with a negative margin
       on the container — the header and footer keep their padding
       (only the board widens). */
    #game-screen {
        padding-left: 0;
        padding-right: 0;
    }
    .game-header {
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }
    .game-container {
        flex-direction: column;
        height: auto;
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .board-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        max-width: 100vw;
        height: auto;
        border-left: none;
        border-right: none;
    }

    #board-canvas {
        width: 100%;
        height: auto;
    }

    .game-controls {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Phone-portrait panel: indicator + four buttons need to fit
       inside the viewport without overflowing.  Distribute the
       available space with space-between, shrink the indicator's
       margin, and let the buttons flex (still capped by the
       per-button max-width below) so a 320 px-wide phone doesn't
       push the rightmost button off screen. */
    #panel {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px;
        box-sizing: border-box;
    }

    .btn-panel {
        flex: 1 1 auto;
        flex-direction: row;
        justify-content: space-around;
        gap: 8px;
        margin: 0;
        min-width: 0;
    }

    #panel button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 64px;
        height: 52px;
    }
    #panel button svg {
        width: 28px;
        height: 28px;
    }

    .piece-grid {
        grid-template-columns: 1fr;
    }

    .view-active {
        padding-top: 3rem;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    h1.glitch-text {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
    }

    /* Stack the LASERCHESS title above the SOUND / DISCONNECT
       buttons on narrow phones — at this width the row layout
       runs the title into the buttons (or pushes a button off
       screen). flex-wrap with the title forced to full width
       drops the buttons onto their own row, right-aligned. */
    .game-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    .mini-logo {
        flex: 1 0 100%;
        text-align: center;
    }
    #btn-sound,
    #btn-end-game,
    #btn-exit {
        flex: 0 0 auto;
    }
}

/* ---- Download page (WebSite/download/*.html) ---- */

.download-card {
    margin: 3rem auto 0;
    max-width: 520px;
    padding: 2.5rem 2rem;
    border: 1px solid #1a1a1a;
    background: #080808;
    text-align: center;
}

.download-icon {
    width: 128px;
    height: 128px;
    margin: 0 auto 1.5rem;
    filter: invert(1) brightness(2) drop-shadow(0 0 6px var(--neon-cyan));
    opacity: 0.85;
}

/* Vision Pro visor: animated hazy blue cloud overlay mimicking the
   external EyeSight display on the real device. Three radial-gradient
   "blobs" drift with different periods so the motion never repeats
   exactly. Screen blend mode fills the transparent visor interior with
   the cloud while leaving the icon's white outline untouched (screen
   of any colour with white is white). */
.visor-frame {
    position: relative;
    display: inline-block;
    margin: 0 auto 1.5rem;
    line-height: 0;
}

.visor-frame .download-icon {
    margin: 0;
    display: block;
}

.visor-haze {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.haze-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(12px);
    will-change: transform, opacity;
}

.haze-blob.haze-a {
    width: 60%; height: 42%;
    left: 6%; top: 28%;
    background: radial-gradient(circle, rgba(80, 180, 255, 0.95), rgba(80, 180, 255, 0) 70%);
    animation: visor-drift-a 9s ease-in-out infinite alternate;
}

.haze-blob.haze-b {
    width: 55%; height: 40%;
    left: 38%; top: 30%;
    background: radial-gradient(circle, rgba(60, 130, 255, 0.95), rgba(60, 130, 255, 0) 70%);
    animation: visor-drift-b 11s ease-in-out infinite alternate;
}

.haze-blob.haze-c {
    width: 48%; height: 32%;
    left: 26%; top: 38%;
    background: radial-gradient(circle, rgba(170, 225, 255, 0.85), rgba(170, 225, 255, 0) 70%);
    animation: visor-drift-c 13s ease-in-out infinite alternate;
}

@keyframes visor-drift-a {
    0%   { transform: translate(-3%, -2%) scale(1);    opacity: 0.75; }
    100% { transform: translate(6%, 3%)   scale(1.1);  opacity: 1; }
}

@keyframes visor-drift-b {
    0%   { transform: translate(4%, 2%)   scale(1.05); opacity: 0.85; }
    100% { transform: translate(-7%, -1%) scale(0.95); opacity: 1; }
}

@keyframes visor-drift-c {
    0%   { transform: translate(0%, 3%)   scale(0.95); opacity: 0.7; }
    100% { transform: translate(-2%, -4%) scale(1.15); opacity: 0.95; }
}

.download-blurb {
    color: #888;
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Generic store badge — bordered, centered, fixed-height pill. The
   per-store classes paint the brand colour without me having to ship
   the official badge artwork yet. Swap each for the real PNG when
   you've grabbed them from Apple / Google / Microsoft brand pages. */
.store-badge {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    background: transparent;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.25);
}
.store-badge:hover {
    background: var(--neon-cyan);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--neon-cyan);
}

.store-apple  { border-color: #fff;   color: #fff;   box-shadow: 0 0 8px rgba(255,255,255,0.25); }
.store-apple:hover  { background: #fff; color: #000; }
.store-google { border-color: #34a853; color: #34a853; box-shadow: 0 0 8px rgba(52,168,83,0.3); }
.store-google:hover { background: #34a853; color: #000; }
.store-ms     { border-color: #00a4ef; color: #00a4ef; box-shadow: 0 0 8px rgba(0,164,239,0.3); }
.store-ms:hover     { background: #00a4ef; color: #000; }

.store-note {
    margin-top: 1rem;
    color: #555;
    font-size: 0.7rem;
    font-style: italic;
}

.download-meta {
    margin-top: 0.6rem;
    color: #888;
    font-size: 0.7rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.download-back {
    margin-top: 2.5rem;
    font-size: 0.8rem;
}
.download-back a {
    color: var(--neon-cyan);
    text-decoration: none;
    opacity: 0.75;
}
.download-back a:hover { opacity: 1; }