/**

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

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

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/* ---- Breathing Stones: Game-specific styles ---- */







:root {



    --bs-bg: #0a0e2a;



    --bs-bg-deep: #060820;



    --bs-accent-warm: #c9a87c;



    --bs-accent-cool: #7b9ec7;



    --bs-text-dim: rgba(255, 255, 255, 0.35);



    --bs-text-soft: rgba(255, 255, 255, 0.6);



    --bs-breathe-in: rgba(120, 180, 220, 0.25);



    --bs-breathe-out: rgba(200, 160, 100, 0.2);



}







body {



    background: var(--bs-bg);



    overflow: hidden;



}







/* Override shared shell background */



.gp-game-shell {



    background: linear-gradient(180deg, #0a0e2a 0%, #0d1235 50%, #0a0e2a 100%);



}







/* ---- HUD ---- */



.bs-hud {



    position: absolute;



    top: 0;



    left: 0;



    right: 0;



    display: flex;



    align-items: center;



    padding: 12px 16px;



    z-index: 20;



    gap: 8px;



}







.bs-hud .gp-stat-value {



    font-size: 18px;



    color: var(--bs-accent-warm);



}







.bs-hud .gp-stat-label {



    font-size: 9px;



    color: var(--bs-text-dim);



}







.bs-back-btn {



    width: 32px;



    height: 32px;



    border: none;



    border-radius: 8px;



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



    color: var(--bs-text-soft);



    font-size: 16px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    text-decoration: none;



    flex-shrink: 0;



}







.bs-sound-btn {



    width: 32px;



    height: 32px;



    border: none;



    border-radius: 8px;



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



    color: var(--bs-text-soft);



    font-size: 14px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    margin-left: auto;



}







.bs-spacer { flex: 1; }







/* ---- Canvas ---- */



.bs-canvas {



    position: absolute;



    inset: 0;



    width: 100%;



    height: 100%;



    display: block;



}







/* ---- Breathing prompt text ---- */



.bs-breath-text {



    position: absolute;



    bottom: 80px;



    left: 50%;



    transform: translateX(-50%);



    font-size: 16px;



    font-weight: 600;



    color: var(--bs-text-soft);



    letter-spacing: 1.5px;



    text-transform: lowercase;



    pointer-events: none;



    z-index: 15;



    transition: opacity 0.8s ease;



    white-space: nowrap;



}







/* ---- Start / Game Over Overlay ---- */



.bs-overlay {



    position: absolute;



    inset: 0;



    z-index: 50;



    background: rgba(6, 8, 32, 0.85);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    text-align: center;



    padding: 40px 24px;



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.6s ease;



}







.bs-overlay.active {



    opacity: 1;



    pointer-events: auto;



}







.bs-overlay-title {



    font-size: 28px;



    font-weight: 300;



    letter-spacing: 3px;



    color: var(--bs-accent-warm);



    margin-bottom: 8px;



}







.bs-overlay-subtitle {



    font-size: 14px;



    color: var(--bs-text-soft);



    margin-bottom: 32px;



    line-height: 1.6;



    max-width: 280px;



}







.bs-overlay-score {



    font-size: 48px;



    font-weight: 200;



    color: var(--bs-accent-warm);



    margin-bottom: 4px;



    font-variant-numeric: tabular-nums;



}







.bs-overlay-score-label {



    font-size: 11px;



    color: var(--bs-text-dim);



    text-transform: uppercase;



    letter-spacing: 2px;



    margin-bottom: 24px;



}







.bs-overlay-stats {



    display: flex;



    gap: 32px;



    margin-bottom: 32px;



}







.bs-overlay-stat-value {



    font-size: 22px;



    font-weight: 300;



    color: var(--bs-accent-cool);



}







.bs-overlay-stat-label {



    font-size: 10px;



    color: var(--bs-text-dim);



    text-transform: uppercase;



    letter-spacing: 1.5px;



    margin-top: 2px;



}







.bs-start-btn {



    display: block;



    padding: 14px 48px;



    border: 1px solid rgba(201, 168, 124, 0.3);



    border-radius: 30px;



    background: rgba(201, 168, 124, 0.08);



    color: var(--bs-accent-warm);



    font-size: 16px;



    font-weight: 500;



    letter-spacing: 2px;



    cursor: pointer;



    transition: background 0.3s, border-color 0.3s;



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



    text-transform: lowercase;



}







.bs-start-btn:active {



    background: rgba(201, 168, 124, 0.15);



    border-color: rgba(201, 168, 124, 0.5);



}







.bs-new-best {



    font-size: 12px;



    color: var(--bs-accent-warm);



    letter-spacing: 2px;



    text-transform: uppercase;



    margin-bottom: 16px;



    opacity: 0;



    transition: opacity 0.5s ease;



}







.bs-new-best.show {



    opacity: 1;



}







/* ---- Footer ---- */



.bs-footer {



    position: absolute;



    bottom: 8px;



    left: 0;



    right: 0;



    text-align: center;



    font-size: 10px;



    color: rgba(255, 255, 255, 0.15);



    letter-spacing: 0.5px;



    z-index: 5;



    pointer-events: none;



}







/* ---- Tap instruction ---- */



.bs-tap-hint {



    position: absolute;



    bottom: 110px;



    left: 50%;



    transform: translateX(-50%);



    font-size: 12px;



    color: var(--bs-text-dim);



    letter-spacing: 1px;



    pointer-events: none;



    z-index: 15;



    opacity: 0;



    transition: opacity 0.5s ease;



    white-space: nowrap;



}







.bs-tap-hint.show {



    opacity: 1;



}







/* ---- Precision popup ---- */



.bs-precision-popup {



    position: absolute;



    font-size: 14px;



    font-weight: 600;



    pointer-events: none;



    z-index: 25;



    opacity: 0;



    animation: bs-popup-float 1.2s ease-out forwards;



    white-space: nowrap;



}







@keyframes bs-popup-float {



    0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.7); }



    15% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }



    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.9); }



}







/* ---- Safe area ---- */



@supports (padding-top: env(safe-area-inset-top)) {



    .bs-hud {



        padding-top: calc(12px + env(safe-area-inset-top));



    }



}







/* ---- Desktop frame ---- */



@media (min-width: 421px) {



    body {



        display: flex;



        align-items: center;



        justify-content: center;



        background: var(--bs-bg-deep);



    }



}