/**


 * Focus Grid - Game Styles


 *


 * @file        styles.css


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


 */





/* ---- Screen System ---- */


.screen {


    position: absolute;


    inset: 0;


    display: flex;


    flex-direction: column;


    opacity: 0;


    pointer-events: none;


    transition: opacity 0.3s ease;


    z-index: 1;


}


.screen.active {


    opacity: 1;


    pointer-events: auto;


    z-index: 10;


}


.screen-content {


    flex: 1;


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: safe center;


    padding: 40px 24px;


    text-align: center;


    overflow-y: auto;


}





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


.game-logo-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 6px;


    margin-bottom: 20px;


    width: 72px;


    height: 72px;


}


.logo-cell {


    display: flex;


    align-items: center;


    justify-content: center;


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


    border-radius: 8px;


    font-size: 18px;


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


    animation: logo-pulse 2.5s ease-in-out infinite;


}


.logo-cell.accent {


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    box-shadow: 0 0 16px rgba(255, 217, 61, 0.4);


    animation: logo-glow 2.5s ease-in-out infinite;


}





@keyframes logo-pulse {


    0%, 100% { transform: scale(1); }


    50% { transform: scale(1.05); }


}


@keyframes logo-glow {


    0%, 100% { box-shadow: 0 0 12px rgba(255, 217, 61, 0.3); }


    50% { box-shadow: 0 0 24px rgba(255, 217, 61, 0.6); }


}





.game-title {


    font-size: 48px;


    font-weight: 800;


    letter-spacing: -1px;


    line-height: 1;


    background: linear-gradient(135deg, #fff 0%, #ffd93d 50%, #ff9f43 100%);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    margin-bottom: 8px;


}


.game-subtitle {


    font-size: 16px;


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


    margin-bottom: 24px;


}


.menu-best {


    font-size: 18px;


    color: var(--gp-accent);


    margin-bottom: 24px;


    font-weight: 600;


}





.settings-row {


    display: flex;


    gap: 12px;


    margin-top: 16px;


    justify-content: center;


}


.pause-settings { margin-top: 20px; }





/* ---- Buttons ---- */


.btn {


    display: block;


    width: 220px;


    padding: 16px 32px;


    border: none;


    border-radius: 16px;


    font-size: 20px;


    font-weight: 700;


    cursor: pointer;


    transition: transform 150ms, box-shadow 150ms;


    letter-spacing: 0.5px;


    font-family: inherit;


}


.btn:active { transform: scale(0.95); }


.btn-primary {


    background: linear-gradient(135deg, #ffd93d, #ff9f43);


    color: #1a1640;


    box-shadow: 0 4px 20px rgba(255, 217, 61, 0.3);


}


.btn-primary:active { box-shadow: 0 2px 10px rgba(255, 217, 61, 0.2); }


.btn-secondary {


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


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


    margin-top: 12px;


    font-size: 16px;


    padding: 12px 32px;


}





.icon-btn {


    width: 36px;


    height: 36px;


    border: none;


    border-radius: 10px;


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


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


    font-size: 16px;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: background 150ms;


    flex-shrink: 0;


}


.icon-btn:active { background: rgba(255, 255, 255, 0.15); }


.icon-btn-sm { width: 30px; height: 30px; font-size: 14px; }


.icon-btn.off { opacity: 0.4; }





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


.game-footer {


    margin-top: 16px;


    font-size: 11px;


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


    letter-spacing: 0.5px;


    font-weight: 500;


    flex-shrink: 0;


}


.game-footer a { color: inherit; text-decoration: none; }


.game-footer a:hover { text-decoration: underline; }





/* ---- Back Link ---- */


.back-link {


    display: inline-block;


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


    text-decoration: none;


    font-size: 13px;


    font-weight: 600;


    padding: 6px 14px;


    border-radius: 10px;


    margin-bottom: 12px;


    transition: color 150ms, background 150ms;


}


.back-link:active {


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


    color: #fff;


}


.gameover-back { margin-top: 12px; margin-bottom: 0; }





/* ---- Game Header ---- */


#screen-game { display: flex; flex-direction: column; }





#game-header {


    display: flex;


    align-items: center;


    padding: 10px 12px 6px;


    gap: 8px;


    min-height: 52px;


}


.stat {


    display: flex;


    flex-direction: column;


    min-width: 0;


}


.stat-right { align-items: flex-end; }


.stat-label {


    font-size: 10px;


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


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}


.stat-value {


    font-size: 22px;


    font-weight: 800;


    font-variant-numeric: tabular-nums;


    line-height: 1.1;


}


.header-center {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


}





/* ---- Strikes ---- */


.strikes-display {


    display: flex;


    align-items: center;


    justify-content: center;


}


.strikes-icons {


    font-size: 20px;


    letter-spacing: 4px;


    line-height: 1;


}


.strike-heart { transition: transform 0.2s ease, opacity 0.2s ease; }


.strike-heart.lost {


    opacity: 0.2;


    transform: scale(0.7);


    filter: grayscale(1);


}





/* ---- Round Bar ---- */


#round-bar {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 2px 16px 6px;


    flex-shrink: 0;


}


.round-label {


    font-size: 11px;


    font-weight: 700;


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


    text-transform: uppercase;


    letter-spacing: 0.5px;


    white-space: nowrap;


}


.timer-track {


    flex: 1;


    height: 4px;


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


    border-radius: 2px;


    overflow: hidden;


}


.timer-fill {


    height: 100%;


    width: 100%;


    background: linear-gradient(90deg, var(--gp-success), var(--gp-accent), var(--gp-danger));


    border-radius: 2px;


    transition: width 0.1s linear;


}





/* ---- Target Area ---- */


#target-area {


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 12px;


    padding: 10px 16px;


    flex-shrink: 0;


}


.target-label {


    font-size: 14px;


    font-weight: 700;


    color: var(--gp-accent);


    text-transform: uppercase;


    letter-spacing: 1px;


}


.target-symbol {


    font-size: 40px;


    line-height: 1;


    animation: target-bounce 1.5s ease-in-out infinite;


    filter: drop-shadow(0 0 8px rgba(255, 217, 61, 0.4));


}


@keyframes target-bounce {


    0%, 100% { transform: scale(1); }


    50% { transform: scale(1.1); }


}





/* ---- Grid Area ---- */


#grid-area {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 8px 16px 16px;


    min-height: 0;


}





.grid-container {


    display: grid;


    gap: 6px;


    width: 100%;


    max-width: 360px;


    aspect-ratio: 1;


    max-height: 100%;


}


.grid-3 { grid-template-columns: repeat(3, 1fr); }


.grid-4 { grid-template-columns: repeat(4, 1fr); }


.grid-5 { grid-template-columns: repeat(5, 1fr); }


.grid-6 { grid-template-columns: repeat(6, 1fr); }





/* ---- Grid Cells ---- */


.grid-cell {


    display: flex;


    align-items: center;


    justify-content: center;


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


    border-radius: 12px;


    border: 2px solid transparent;


    cursor: pointer;


    transition: transform 100ms, background 150ms, border-color 150ms;


    aspect-ratio: 1;


    font-size: 28px;


    line-height: 1;


    position: relative;


    overflow: hidden;


}


.grid-cell:active {


    transform: scale(0.92);


}





/* Flash highlight - shows target position during flash phase */


.grid-cell.flash-highlight {


    background: rgba(255, 217, 61, 0.25);


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


    box-shadow: 0 0 20px rgba(255, 217, 61, 0.3);


    animation: cell-flash 0.6s ease-in-out infinite;


}


@keyframes cell-flash {


    0%, 100% { box-shadow: 0 0 16px rgba(255, 217, 61, 0.2); }


    50% { box-shadow: 0 0 28px rgba(255, 217, 61, 0.5); }


}





/* Correct answer */


.grid-cell.correct {


    background: rgba(46, 213, 115, 0.3);


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


    animation: cell-correct 0.5s ease-out;


}


@keyframes cell-correct {


    0% { transform: scale(1); }


    30% { transform: scale(1.15); }


    60% { transform: scale(0.95); }


    100% { transform: scale(1); }


}





/* Wrong answer */


.grid-cell.wrong {


    background: rgba(255, 71, 87, 0.3);


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


    animation: cell-wrong 0.4s ease-out;


}


@keyframes cell-wrong {


    0%, 100% { transform: translateX(0); }


    15% { transform: translateX(-6px); }


    30% { transform: translateX(6px); }


    45% { transform: translateX(-4px); }


    60% { transform: translateX(4px); }


    75% { transform: translateX(-2px); }


    90% { transform: translateX(2px); }


}





/* Disabled state during flash / transition */


.grid-cell.disabled {


    pointer-events: none;


    opacity: 0.85;


}





/* Cell appear animation */


.grid-cell.appear {


    animation: cell-appear 0.25s ease-out;


}


@keyframes cell-appear {


    0% { transform: scale(0.5); opacity: 0; }


    100% { transform: scale(1); opacity: 1; }


}





/* Shuffle animation */


.grid-cell.shuffle {


    animation: cell-shuffle 0.3s ease-out;


}


@keyframes cell-shuffle {


    0% { transform: scale(0.8) rotate(-5deg); opacity: 0.3; }


    100% { transform: scale(1) rotate(0deg); opacity: 1; }


}





/* Grid size specific font sizes */


.grid-5 .grid-cell { font-size: 22px; border-radius: 10px; }


.grid-6 .grid-cell { font-size: 18px; border-radius: 8px; }





/* ---- Flash Overlay ---- */


.flash-overlay {


    position: absolute;


    inset: 0;


    z-index: 20;


    display: flex;


    align-items: center;


    justify-content: center;


    pointer-events: none;


}


.flash-overlay.hidden { display: none !important; }


.flash-text {


    font-size: 20px;


    font-weight: 800;


    color: var(--gp-accent);


    text-shadow: 0 0 20px rgba(255, 217, 61, 0.6);


    letter-spacing: 2px;


    text-transform: uppercase;


    animation: flash-text-pulse 1s ease-in-out infinite;


}


@keyframes flash-text-pulse {


    0%, 100% { opacity: 0.6; }


    50% { opacity: 1; }


}





/* ---- Countdown Overlay ---- */


.countdown-overlay {


    position: absolute;


    inset: 0;


    z-index: 25;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(0, 0, 0, 0.5);


    backdrop-filter: blur(4px);


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


}


.countdown-overlay.hidden { display: none !important; }


.countdown-num {


    font-size: 80px;


    font-weight: 800;


    color: var(--gp-accent);


    text-shadow: 0 0 30px rgba(255, 217, 61, 0.6);


    animation: countdown-pop 0.8s ease-out;


}


@keyframes countdown-pop {


    0% { transform: scale(2); opacity: 0; }


    30% { transform: scale(1); opacity: 1; }


    80% { transform: scale(1); opacity: 1; }


    100% { transform: scale(0.8); opacity: 0; }


}





/* ---- Score Popup ---- */


.score-popup {


    position: absolute;


    font-size: 18px;


    font-weight: 800;


    color: var(--gp-accent);


    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);


    pointer-events: none;


    z-index: 20;


    animation: score-float 0.9s ease-out forwards;


    white-space: nowrap;


    left: 50%;


    transform: translateX(-50%);


}


@keyframes score-float {


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


    20%  { transform: translateX(-50%) translateY(-10px) scale(1.1); opacity: 1; }


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


}





/* ---- Game Overlay (Pause) ---- */


.game-overlay {


    position: absolute;


    inset: 0;


    z-index: 50;


    background: rgba(0, 0, 0, 0.75);


    backdrop-filter: blur(6px);


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


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    pointer-events: none;


    transition: opacity 0.2s ease;


}


.game-overlay.active {


    opacity: 1;


    pointer-events: auto;


}


.overlay-content {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 4px;


}


.overlay-title {


    font-size: 28px;


    font-weight: 800;


    margin-bottom: 20px;


}





/* ---- Modal (Help) ---- */


.modal-overlay {


    position: fixed;


    inset: 0;


    z-index: 150;


    background: rgba(0, 0, 0, 0.7);


    backdrop-filter: blur(4px);


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


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    pointer-events: none;


    transition: opacity 0.25s ease;


    padding: 20px;


}


.modal-overlay.active { opacity: 1; pointer-events: auto; }


.modal-content {


    background: linear-gradient(170deg, #1e1650, #150f35);


    border: 1px solid rgba(255, 255, 255, 0.08);


    border-radius: 20px;


    padding: 28px 24px;


    max-width: 360px;


    width: 100%;


    max-height: 80vh;


    overflow-y: auto;


    position: relative;


    transform: scale(0.9);


    transition: transform 0.25s ease;


}


.modal-overlay.active .modal-content { transform: scale(1); }


.modal-close {


    position: absolute;


    top: 12px;


    right: 16px;


    width: 32px;


    height: 32px;


    border: none;


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


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


    font-size: 16px;


    border-radius: 8px;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


}


.modal-title { font-size: 22px; font-weight: 800; margin-bottom: 20px; }


.help-section { margin-bottom: 14px; text-align: left; }


.help-text { font-size: 14px; color: var(--gp-text-secondary); line-height: 1.5; }


.help-text strong { color: var(--gp-text-primary); }





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


.gameover-title { font-size: 36px; font-weight: 800; margin-bottom: 8px; }


.new-best-badge {


    font-size: 18px;


    font-weight: 700;


    color: var(--gp-accent);


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


    padding: 6px 20px;


    border-radius: 20px;


    margin-bottom: 16px;


    animation: badge-pop 0.5s ease-out;


}


@keyframes badge-pop {


    0%  { transform: scale(0); opacity: 0; }


    60% { transform: scale(1.2); }


    100% { transform: scale(1); opacity: 1; }


}


.hidden { display: none !important; }





.final-score-block, .final-best-block { margin-bottom: 6px; }


.final-label {


    display: block;


    font-size: 12px;


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


    text-transform: uppercase;


    letter-spacing: 1px;


    font-weight: 600;


}


.final-value {


    font-size: 52px;


    font-weight: 800;


    line-height: 1.1;


    font-variant-numeric: tabular-nums;


}


.final-value-small { font-size: 26px; color: var(--gp-text-secondary); }


.final-stats {


    display: flex;


    gap: 20px;


    margin: 20px 0 16px;


    flex-wrap: wrap;


    justify-content: center;


}


.final-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.final-stat-num {


    font-size: 22px;


    font-weight: 800;


    font-variant-numeric: tabular-nums;


}


.final-stat-label {


    font-size: 10px;


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


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-top: 2px;


}





/* ---- Particles ---- */


.particle {


    position: fixed;


    width: 6px;


    height: 6px;


    border-radius: 50%;


    pointer-events: none;


    animation: particle-fly 0.65s ease-out forwards;


    z-index: 200;


}


@keyframes particle-fly {


    0%   { transform: translate(0, 0) scale(1); opacity: 1; }


    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }


}





/* ---- Responsive: Desktop ---- */


@media (min-width: 421px) {


    .grid-container {


        max-width: 340px;


    }


}





/* ---- Safe Areas ---- */


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


    #game-header {


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


    }


}