/**

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

 */

/* ---- One Line - Game Styles ---- */







/* Logo */



.ol-logo {



    margin: 20px 0 12px;



    filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.3));



}







.ol-title {



    font-size: 36px;



    font-weight: 900;



    background: linear-gradient(135deg, #64c8ff, #a78bfa, #f472b6);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 6px;



}







.ol-subtitle {



    color: var(--gp-text-secondary);



    font-size: 14px;



    margin-bottom: 20px;



    font-weight: 500;



}







.menu-best {



    font-size: 14px;



    color: var(--gp-text-secondary);



    margin-bottom: 28px;



    font-weight: 600;



}



.menu-best span {



    color: var(--gp-accent);



}







.ol-sound-row {



    margin-top: 20px;



    display: flex;



    gap: 12px;



    justify-content: center;



}







/* Game Container */



#game-container {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 8px;



    position: relative;



    touch-action: none;



}







#game-canvas {



    display: block;



    max-width: 100%;



    max-height: 100%;



    border-radius: var(--gp-radius-md);



}







/* Info Bar */



.ol-info-bar {



    text-align: center;



    padding: 6px 16px;



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-text-secondary);



    letter-spacing: 0.5px;



}







/* Action Bar */



.ol-action-bar {



    display: flex;



    justify-content: center;



    gap: 12px;



    padding: 8px 16px 16px;



}







.ol-action-btn {



    padding: 10px 24px;



    border: none;



    border-radius: var(--gp-radius-sm);



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



    color: var(--gp-text-secondary);



    font-size: 14px;



    font-weight: 700;



    cursor: pointer;



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



    transition: background var(--gp-transition-fast), transform var(--gp-transition-fast);



}



.ol-action-btn:active {



    transform: scale(0.95);



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



}







/* Win / Game Over Screens */



.ol-win-title {



    font-size: 32px;



    font-weight: 900;



    background: linear-gradient(135deg, #64c8ff, #a78bfa);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 24px;



}







.ol-stats-grid {



    display: flex;



    gap: 16px;



    margin-bottom: 28px;



}







.ol-stat-box {



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



    border-radius: var(--gp-radius-md);



    padding: 16px 20px;



    display: flex;



    flex-direction: column;



    align-items: center;



    min-width: 80px;



}







.ol-stat-num {



    font-size: 26px;



    font-weight: 800;



    color: var(--gp-accent);



    font-variant-numeric: tabular-nums;



}







.ol-stat-lbl {



    font-size: 11px;



    color: var(--gp-text-secondary);



    text-transform: uppercase;



    letter-spacing: 1px;



    margin-top: 4px;



    font-weight: 600;



}







/* Daily Badge */



.ol-daily-badge {



    display: inline-block;



    background: linear-gradient(135deg, #64c8ff, #a78bfa);



    color: #1a1640;



    font-size: 13px;



    font-weight: 800;



    padding: 6px 18px;



    border-radius: 20px;



    margin-bottom: 20px;



    letter-spacing: 0.5px;



    text-transform: uppercase;



}







/* Help sections */



.help-section {



    margin-bottom: 18px;



    text-align: left;



}



.help-section h4 {



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-accent);



    margin-bottom: 6px;



}



.help-section p {



    font-size: 13px;



    color: var(--gp-text-secondary);



    line-height: 1.5;



}







/* Sound button muted state */



.sound-off {



    opacity: 0.4;



}







/* Completion animation */



@keyframes ol-pulse {



    0% { transform: scale(1); }



    50% { transform: scale(1.05); }



    100% { transform: scale(1); }



}







.ol-complete-pulse {



    animation: ol-pulse 0.6s ease-in-out;



}







/* Leaderboard */

.ol-leaderboard {

    width: 100%;

    max-width: 340px;

    margin-top: 16px;

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

    border-radius: 16px;

    padding: 16px;

}

.ol-lb-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--gp-accent);

    text-align: center;

}

.ol-lb-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.ol-lb-loading {

    text-align: center;

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

    padding: 16px;

    font-size: 0.85rem;

}

.ol-lb-entry {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    border-radius: 10px;

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

    transition: background 0.2s;

}

.ol-lb-entry.ol-lb-me {

    background: rgba(255,224,74,0.1);

    border: 1px solid rgba(255,224,74,0.25);

}

.ol-lb-rank {

    font-size: 0.85rem;

    font-weight: 700;

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

    width: 22px;

    text-align: center;

    flex-shrink: 0;

}

.ol-lb-entry:nth-child(1) .ol-lb-rank { color: #ffe04a; }

.ol-lb-entry:nth-child(2) .ol-lb-rank { color: #c0c0c0; }

.ol-lb-entry:nth-child(3) .ol-lb-rank { color: #cd7f32; }

.ol-lb-name {

    flex: 1;

    font-size: 0.85rem;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.ol-lb-time {

    font-size: 0.8rem;

    color: var(--gp-accent);

    font-weight: 600;

    flex-shrink: 0;

}

.ol-lb-score {

    font-size: 0.75rem;

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

    flex-shrink: 0;

}



/* Daily Done Screen */

.ol-done-icon {

    font-size: 48px;

    margin-bottom: 12px;

}

.ol-done-msg {

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

    font-size: 0.9rem;

    margin-bottom: 16px;

}



/* Name Input */

.ol-name-msg {

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

    font-size: 0.9rem;

    margin-bottom: 12px;

}

.ol-name-input {

    width: 100%;

    max-width: 260px;

    padding: 12px 16px;

    border: 2px solid rgba(255,255,255,0.15);

    border-radius: var(--gp-radius-sm);

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

    color: var(--gp-text-primary);

    font-size: 1rem;

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

    text-align: center;

    outline: none;

    margin-bottom: 16px;

    transition: border-color 0.2s;

}

.ol-name-input:focus {

    border-color: var(--gp-accent);

}



/* Safe area padding for action bar */



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



    .ol-action-bar {



        padding-bottom: calc(16px + env(safe-area-inset-bottom));



    }



}