/**


 * Echo - Game Styles


 *


 * @author Mike Fairbrother


 */





/* ---- Game Logo ---- */


.game-logo {


    margin-bottom: 16px;


}


.logo-pads {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 6px;


    width: 80px;


    margin: 0 auto;


}


.logo-pad {


    width: 34px;


    height: 34px;


    border-radius: 8px;


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


}


.logo-red { background: #ff4757; animation-delay: 0s; }


.logo-blue { background: #3b82f6; animation-delay: 0.5s; }


.logo-green { background: #2ed573; animation-delay: 1s; }


.logo-yellow { background: #ffd93d; animation-delay: 1.5s; }





@keyframes logo-pulse {


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


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


}





/* ---- Title ---- */


.game-title {


    font-size: 48px;


    font-weight: 900;


    letter-spacing: -1px;


    margin-bottom: 4px;


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


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


}


.game-subtitle {


    font-size: 16px;


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


    margin-bottom: 20px;


    font-weight: 500;


}


.menu-best {


    font-size: 14px;


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


    margin-bottom: 24px;


    font-weight: 600;


}


.menu-best span {


    color: var(--gp-accent);


}


.settings-row {


    display: flex;


    gap: 12px;


    justify-content: center;


    margin-top: 16px;


}





/* ---- Status Area ---- */


#status-area {


    display: flex;


    flex-direction: column;


    align-items: center;


    padding: 16px 16px 8px;


    min-height: 80px;


    justify-content: center;


}


.status-text {


    font-size: 22px;


    font-weight: 800;


    text-align: center;


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


    min-height: 32px;


}


.status-watching {


    color: var(--gp-accent);


}


.status-playing {


    color: var(--gp-success);


}


.status-echo {


    color: #e056fd;


    animation: echo-pulse 0.6s ease-in-out infinite alternate;


}


.status-fail {


    color: var(--gp-danger);


}


.status-success {


    color: var(--gp-success);


}





@keyframes echo-pulse {


    from { text-shadow: 0 0 10px rgba(224, 86, 253, 0.3); }


    to { text-shadow: 0 0 25px rgba(224, 86, 253, 0.7); }


}





/* Sequence dots */


#sequence-dots {


    display: flex;


    gap: 6px;


    justify-content: center;


    flex-wrap: wrap;


    margin-top: 8px;


    min-height: 14px;


    max-width: 320px;


}


.seq-dot {


    width: 10px;


    height: 10px;


    border-radius: 50%;


    opacity: 0.3;


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


}


.seq-dot.active {


    opacity: 1;


    transform: scale(1.3);


}


.seq-dot.completed {


    opacity: 0.7;


}


.seq-dot-red { background: #ff4757; }


.seq-dot-blue { background: #3b82f6; }


.seq-dot-green { background: #2ed573; }


.seq-dot-yellow { background: #ffd93d; }





/* ---- Pad Container ---- */


#pad-container {


    flex: 1;


    display: flex;


    align-items: center;


    justify-content: center;


    padding: 16px;


}


.pad-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 12px;


    width: 100%;


    max-width: 320px;


    aspect-ratio: 1;


}





/* ---- Pads ---- */


.pad {


    position: relative;


    border: none;


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


    cursor: pointer;


    transition: transform 0.1s ease, filter 0.1s ease;


    overflow: hidden;


    outline: none;


    -webkit-tap-highlight-color: transparent;


}


.pad:active {


    transform: scale(0.95);


}


.pad.disabled {


    pointer-events: none;


}





.pad-glow {


    position: absolute;


    inset: 0;


    border-radius: inherit;


    opacity: 0;


    transition: opacity 0.15s ease;


}





/* Red */


.pad-red {


    background: linear-gradient(145deg, #cc2233, #991122);


    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.15);


}


.pad-red .pad-glow {


    background: radial-gradient(circle at center, #ff6b7a 0%, #ff4757 50%, transparent 70%);


    box-shadow: 0 0 40px rgba(255, 71, 87, 0.6), inset 0 0 30px rgba(255, 130, 140, 0.3);


}


.pad-red.lit {


    background: linear-gradient(145deg, #ff6b7a, #ff4757);


    box-shadow: 0 0 50px rgba(255, 71, 87, 0.7);


}


.pad-red.lit .pad-glow { opacity: 1; }





/* Blue */


.pad-blue {


    background: linear-gradient(145deg, #2563b0, #1a4a8a);


    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);


}


.pad-blue .pad-glow {


    background: radial-gradient(circle at center, #60a5fa 0%, #3b82f6 50%, transparent 70%);


    box-shadow: 0 0 40px rgba(59, 130, 246, 0.6), inset 0 0 30px rgba(96, 165, 250, 0.3);


}


.pad-blue.lit {


    background: linear-gradient(145deg, #60a5fa, #3b82f6);


    box-shadow: 0 0 50px rgba(59, 130, 246, 0.7);


}


.pad-blue.lit .pad-glow { opacity: 1; }





/* Green */


.pad-green {


    background: linear-gradient(145deg, #22a85c, #188a45);


    box-shadow: 0 4px 20px rgba(46, 213, 115, 0.15);


}


.pad-green .pad-glow {


    background: radial-gradient(circle at center, #5be89a 0%, #2ed573 50%, transparent 70%);


    box-shadow: 0 0 40px rgba(46, 213, 115, 0.6), inset 0 0 30px rgba(91, 232, 154, 0.3);


}


.pad-green.lit {


    background: linear-gradient(145deg, #5be89a, #2ed573);


    box-shadow: 0 0 50px rgba(46, 213, 115, 0.7);


}


.pad-green.lit .pad-glow { opacity: 1; }





/* Yellow */


.pad-yellow {


    background: linear-gradient(145deg, #d4b020, #b8960a);


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


}


.pad-yellow .pad-glow {


    background: radial-gradient(circle at center, #ffe66d 0%, #ffd93d 50%, transparent 70%);


    box-shadow: 0 0 40px rgba(255, 217, 61, 0.6), inset 0 0 30px rgba(255, 230, 109, 0.3);


}


.pad-yellow.lit {


    background: linear-gradient(145deg, #ffe66d, #ffd93d);


    box-shadow: 0 0 50px rgba(255, 217, 61, 0.7);


}


.pad-yellow.lit .pad-glow { opacity: 1; }





/* Pad lit animation */


.pad.lit {


    animation: pad-pop 0.2s ease-out;


}


@keyframes pad-pop {


    0% { transform: scale(1); }


    50% { transform: scale(1.06); }


    100% { transform: scale(1); }


}





/* Wrong pad flash */


.pad.wrong {


    animation: pad-shake 0.4s ease;


}


@keyframes pad-shake {


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


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


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


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


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


}





/* ---- Round Bonus ---- */


.round-bonus {


    position: absolute;


    bottom: 80px;


    left: 50%;


    transform: translateX(-50%);


    font-size: 24px;


    font-weight: 800;


    color: var(--gp-accent);


    text-shadow: 0 2px 10px rgba(255, 217, 61, 0.5);


    pointer-events: none;


    z-index: 20;


}


.round-bonus.echo-bonus {


    color: #e056fd;


    text-shadow: 0 2px 10px rgba(224, 86, 253, 0.5);


}


.round-bonus.show {


    animation: bonus-float 1.2s ease-out forwards;


}


@keyframes bonus-float {


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


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


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


}


.hidden { display: none !important; }





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


.gameover-title {


    font-size: 36px;


    margin-bottom: 8px;


    color: var(--gp-danger);


}


.new-best-badge {


    display: inline-block;


    padding: 6px 20px;


    border-radius: 20px;


    background: linear-gradient(135deg, var(--gp-accent), var(--gp-fire-b));


    color: #1a1640;


    font-size: 14px;


    font-weight: 800;


    margin-bottom: 16px;


    animation: gp-badge-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);


}


.final-score-block, .final-best-block {


    margin-bottom: 8px;


}


.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: 48px;


    font-weight: 900;


    color: var(--gp-accent);


    line-height: 1.1;


}


.final-value-small {


    font-size: 28px;


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


}


.final-stats {


    display: flex;


    gap: 24px;


    justify-content: center;


    margin: 20px 0;


}


.final-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.final-stat-num {


    font-size: 24px;


    font-weight: 800;


}


.final-stat-label {


    font-size: 11px;


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


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





/* Correct sequence display */


.correct-sequence {


    margin: 12px 0 20px;


    padding: 12px 16px;


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


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


}


.correct-label {


    display: block;


    font-size: 12px;


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


    margin-bottom: 8px;


    font-weight: 600;


}


.correct-dots {


    display: flex;


    gap: 6px;


    justify-content: center;


    flex-wrap: wrap;


}


.correct-dot {


    width: 18px;


    height: 18px;


    border-radius: 4px;


}


.correct-dot-red { background: #ff4757; }


.correct-dot-blue { background: #3b82f6; }


.correct-dot-green { background: #2ed573; }


.correct-dot-yellow { background: #ffd93d; }


.correct-dot.was-next {


    outline: 2px solid white;


    outline-offset: 2px;


}





.gameover-back {


    margin-top: 12px;


}





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


.help-section {


    margin-bottom: 16px;


}


.help-pads-demo {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 4px;


    width: 60px;


    margin: 0 auto 10px;


}


.demo-pad {


    width: 26px;


    height: 26px;


    border-radius: 6px;


}


.demo-red { background: #ff4757; }


.demo-blue { background: #3b82f6; }


.demo-green { background: #2ed573; }


.demo-yellow { background: #ffd93d; }


.help-text {


    font-size: 14px;


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


    line-height: 1.5;


}


.help-text strong {


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


}





/* ---- Sound off icon ---- */


.sound-off {


    opacity: 0.4;


}





/* ---- Screen game layout ---- */


#screen-game {


    display: flex;


    flex-direction: column;


}