/**

 * @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.

 */

/*



 * Drift - Game-Specific Styles



 * Calm momentum steering through space



 */







/* ---- Override shell background for deep space ---- */



#app.gp-game-shell {



    background: #0a0820;



}







/* ---- Menu Screen ---- */



.drift-logo {



    position: relative;



    width: 120px;



    height: 120px;



    margin: 0 auto 24px;



}







.drift-logo-orb {



    position: absolute;



    top: 50%;



    left: 50%;



    width: 28px;



    height: 28px;



    border-radius: 50%;



    background: radial-gradient(circle at 40% 35%, #b8e0ff, #6ec6ff 40%, #3a8fd4 80%);



    box-shadow:



        0 0 20px rgba(110, 198, 255, 0.6),



        0 0 60px rgba(110, 198, 255, 0.3);



    transform: translate(-50%, -50%);



    animation: drift-orb-pulse 3s ease-in-out infinite;



}







.drift-logo-ring {



    position: absolute;



    top: 50%;



    left: 50%;



    border-radius: 50%;



    border: 1.5px solid rgba(110, 198, 255, 0.2);



    transform: translate(-50%, -50%);



}







.drift-logo-ring-1 {



    width: 60px;



    height: 60px;



    animation: drift-ring-pulse 3s ease-in-out infinite;



}



.drift-logo-ring-2 {



    width: 90px;



    height: 90px;



    border-color: rgba(160, 130, 255, 0.15);



    animation: drift-ring-pulse 3s ease-in-out 0.5s infinite;



}



.drift-logo-ring-3 {



    width: 120px;



    height: 120px;



    border-color: rgba(100, 220, 200, 0.1);



    animation: drift-ring-pulse 3s ease-in-out 1s infinite;



}







@keyframes drift-orb-pulse {



    0%, 100% { box-shadow: 0 0 20px rgba(110, 198, 255, 0.6), 0 0 60px rgba(110, 198, 255, 0.3); }



    50% { box-shadow: 0 0 30px rgba(110, 198, 255, 0.8), 0 0 80px rgba(110, 198, 255, 0.4); }



}







@keyframes drift-ring-pulse {



    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }



    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }



}







.drift-title {



    font-size: 48px;



    font-weight: 200;



    letter-spacing: 12px;



    text-transform: uppercase;



    color: rgba(180, 210, 255, 0.9);



    text-shadow: 0 0 40px rgba(110, 198, 255, 0.3);



    margin-bottom: 8px;



}







.drift-subtitle {



    font-size: 14px;



    color: rgba(160, 180, 220, 0.5);



    letter-spacing: 4px;



    text-transform: lowercase;



    margin-bottom: 32px;



}







.drift-menu-stats {



    display: flex;



    gap: 40px;



    margin-bottom: 32px;



}







.drift-menu-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}







.drift-menu-stat-val {



    font-size: 28px;



    font-weight: 700;



    color: rgba(180, 210, 255, 0.8);



    font-variant-numeric: tabular-nums;



}







.drift-menu-stat-lbl {



    font-size: 10px;



    color: rgba(160, 180, 220, 0.4);



    text-transform: uppercase;



    letter-spacing: 2px;



    margin-top: 2px;



}







.drift-sound-toggle {



    margin-top: 16px;



}







.drift-sound-toggle .gp-icon-btn {



    font-size: 18px;



    width: 42px;



    height: 42px;



    border-radius: 50%;



    background: rgba(110, 198, 255, 0.08);



    color: rgba(160, 180, 220, 0.5);



    transition: all 0.3s ease;



}







.drift-sound-toggle .gp-icon-btn.active {



    background: rgba(110, 198, 255, 0.15);



    color: rgba(180, 210, 255, 0.9);



}







/* ---- Game Screen ---- */



#screen-game {



    background: #0a0820;



}







#screen-game .gp-hud {



    position: relative;



    z-index: 20;



    background: linear-gradient(to bottom, rgba(10, 8, 32, 0.9) 0%, rgba(10, 8, 32, 0) 100%);



    padding-bottom: 16px;



}







#screen-game .gp-stat-label {



    color: rgba(160, 180, 220, 0.4);



}







#screen-game .gp-stat-value {



    color: rgba(180, 210, 255, 0.8);



    font-weight: 600;



}







#game-canvas {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    z-index: 1;



    touch-action: none;



}







.drift-thrust-indicator {



    position: fixed;



    width: 48px;



    height: 48px;



    border-radius: 50%;



    border: 1.5px solid rgba(110, 198, 255, 0.3);



    pointer-events: none;



    z-index: 15;



    opacity: 0;



    transform: translate(-50%, -50%) scale(0.5);



    transition: opacity 0.15s ease, transform 0.15s ease;



}







.drift-thrust-indicator.active {



    opacity: 1;



    transform: translate(-50%, -50%) scale(1);



}







/* ---- Game Over ---- */



.drift-gameover-icon {



    font-size: 48px;



    color: rgba(180, 210, 255, 0.6);



    margin-bottom: 8px;



    animation: drift-gameover-spin 4s linear infinite;



}







@keyframes drift-gameover-spin {



    from { transform: rotate(0deg); }



    to { transform: rotate(360deg); }



}







.drift-complete-stats {



    display: flex;



    gap: 28px;



    margin: 16px 0 24px;



}







.drift-cstat {



    display: flex;



    flex-direction: column;



    align-items: center;



}







.drift-cstat-val {



    font-size: 24px;



    font-weight: 700;



    color: rgba(180, 210, 255, 0.9);



    font-variant-numeric: tabular-nums;



}







.drift-cstat-lbl {



    font-size: 10px;



    color: rgba(160, 180, 220, 0.4);



    text-transform: uppercase;



    letter-spacing: 1.5px;



    margin-top: 2px;



}







.drift-new-best {



    color: rgba(100, 220, 200, 0.9);



    font-size: 14px;



    font-weight: 700;



    letter-spacing: 2px;



    text-transform: uppercase;



    margin-bottom: 16px;



    animation: drift-best-glow 1.5s ease-in-out infinite;



}







@keyframes drift-best-glow {



    0%, 100% { text-shadow: 0 0 10px rgba(100, 220, 200, 0.3); }



    50% { text-shadow: 0 0 20px rgba(100, 220, 200, 0.6); }



}







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



.drift-help-section {



    display: flex;



    align-items: flex-start;



    gap: 14px;



    margin-bottom: 18px;



    text-align: left;



}







.drift-help-icon {



    font-size: 22px;



    color: rgba(110, 198, 255, 0.6);



    flex-shrink: 0;



    width: 30px;



    text-align: center;



    line-height: 1.4;



}







.drift-help-section p {



    font-size: 13px;



    color: rgba(200, 210, 230, 0.7);



    line-height: 1.5;



}







.drift-help-section strong {



    color: rgba(180, 210, 255, 0.9);



}







/* ---- Overlay color overrides for zen feel ---- */



#overlay-gameover .gp-overlay-title,



#overlay-pause .gp-overlay-title {



    color: rgba(180, 210, 255, 0.9);



}







/* ---- Scrollbar hide for canvas ---- */



#screen-game::-webkit-scrollbar {



    display: none;



}







/* ---- Pause button subtle styling ---- */



#btn-pause {



    color: rgba(160, 180, 220, 0.4);



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



}







/* ---- Sound off state indicator ---- */



.drift-sound-off {



    opacity: 0.4;



}