/**


 * Pattern Lock - 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.


 */





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


.pl-logo {


    display: flex;


    gap: 10px;


    margin-bottom: 16px;


    justify-content: center;


}


.pl-logo-peg {


    width: 36px;


    height: 36px;


    border-radius: 50%;


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


}


.pl-logo-peg:nth-child(2) { animation-delay: 0.15s; }


.pl-logo-peg:nth-child(3) { animation-delay: 0.3s; }


.pl-logo-peg:nth-child(4) { animation-delay: 0.45s; }


.pl-peg-red { background: #ff5a6a; box-shadow: 0 0 12px rgba(255,90,106,0.5); }


.pl-peg-blue { background: #4a9eff; box-shadow: 0 0 12px rgba(74,158,255,0.5); }


.pl-peg-green { background: #3de882; box-shadow: 0 0 12px rgba(61,232,130,0.5); }


.pl-peg-yellow { background: #ffe04a; box-shadow: 0 0 12px rgba(255,224,74,0.5); }





@keyframes pl-logo-pulse {


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


    50% { transform: scale(1.15); }


}





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


.pl-title {


    font-size: 2.4rem;


    font-weight: 800;


    line-height: 1.1;


    margin-bottom: 6px;


    background: linear-gradient(135deg, var(--gp-accent), #ff9f43);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


}


.pl-subtitle {


    font-size: 1rem;


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


    margin-bottom: 20px;


}





/* ---- Menu Stats ---- */


.pl-menu-stats {


    display: flex;


    gap: 24px;


    margin-bottom: 24px;


}


.pl-menu-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.pl-menu-stat-val {


    font-size: 1.4rem;


    font-weight: 700;


    color: var(--gp-accent);


}


.pl-menu-stat-lbl {


    font-size: 0.7rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


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


    margin-top: 2px;


}





/* ---- Mode Toggle ---- */


.pl-toggle-group {


    display: flex;


    gap: 0;


    border-radius: 12px;


    overflow: hidden;


    margin-bottom: 20px;


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


}


.pl-toggle-btn {


    flex: 1;


    padding: 10px 16px;


    font-size: 0.85rem;


    font-weight: 600;


    background: transparent;


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


    border: none;


    cursor: pointer;


    transition: all 0.2s;


    white-space: nowrap;


}


.pl-toggle-btn.active {


    background: var(--gp-accent);


    color: #1a1a2e;


}





/* ---- Guess Board ---- */


.pl-guess-board {


    flex: 1;


    overflow-y: auto;


    padding: 8px 12px 4px;


    display: flex;


    flex-direction: column;


    gap: 4px;


    -ms-overflow-style: none;


    scrollbar-width: none;


}


.pl-guess-board::-webkit-scrollbar { display: none; }





.pl-guess-row {


    display: flex;


    align-items: center;


    gap: 6px;


    padding: 4px 6px;


    border-radius: 10px;


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


    min-height: 40px;


    transition: background 0.2s;


}


.pl-guess-row.pl-row-active {


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


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


}


.pl-guess-row.pl-row-used {


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


}


.pl-row-number {


    width: 18px;


    font-size: 0.65rem;


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


    text-align: center;


    flex-shrink: 0;


}





.pl-guess-pegs {


    display: flex;


    gap: 4px;


    flex-shrink: 0;


}


.pl-guess-peg {


    width: 28px;


    height: 28px;


    border-radius: 50%;


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


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


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 0.95rem;


    transition: all 0.25s;


}


.pl-guess-peg.pl-peg-filled {


    border-color: transparent;


}





/* ---- Feedback mini grid ---- */


.pl-feedback {


    display: grid;


    grid-template-columns: 1fr 1fr;


    grid-template-rows: 1fr 1fr;


    gap: 3px;


    width: 26px;


    height: 26px;


    flex-shrink: 0;


    margin-left: auto;


}


.pl-fb-peg {


    width: 10px;


    height: 10px;


    border-radius: 50%;


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


}


.pl-fb-peg.pl-fb-black {


    background: #fff;


    box-shadow: 0 0 4px rgba(255,255,255,0.6);


}


.pl-fb-peg.pl-fb-white {


    background: transparent;


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


}





/* ---- Current Guess Area ---- */


.pl-current-guess {


    padding: 8px 16px 4px;


    display: flex;


    align-items: center;


    gap: 10px;


    flex-shrink: 0;


}


.pl-current-slots {


    display: flex;


    gap: 8px;


    flex: 1;


    justify-content: center;


}


.pl-current-slot {


    width: 42px;


    height: 42px;


    border-radius: 50%;


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


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


    display: flex;


    align-items: center;


    justify-content: center;


    cursor: pointer;


    transition: all 0.2s;


    font-size: 1.3rem;


}


.pl-current-slot.pl-slot-filled {


    border-style: solid;


    border-color: transparent;


    transform: scale(1.05);


}


.pl-current-slot.pl-slot-next {


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


    animation: pl-slot-pulse 1.2s ease-in-out infinite;


}


@keyframes pl-slot-pulse {


    0%, 100% { box-shadow: 0 0 0 0 rgba(255,224,74,0.3); }


    50% { box-shadow: 0 0 0 6px rgba(255,224,74,0); }


}





.pl-submit-btn {


    padding: 10px 20px;


    font-size: 0.85rem;


    flex-shrink: 0;


}


.pl-submit-btn:disabled {


    opacity: 0.3;


    pointer-events: none;


}





/* ---- Picker ---- */


.pl-picker {


    display: flex;


    justify-content: center;


    gap: 8px;


    padding: 8px 12px 12px;


    flex-wrap: wrap;


    flex-shrink: 0;


}


.pl-pick-item {


    width: 44px;


    height: 44px;


    border-radius: 50%;


    border: 3px solid transparent;


    cursor: pointer;


    transition: all 0.15s;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.5rem;


    -webkit-tap-highlight-color: transparent;


}


.pl-pick-item:active {


    transform: scale(0.9);


}


.pl-pick-item.pl-pick-color {


    box-shadow: 0 2px 8px rgba(0,0,0,0.3);


}


.pl-pick-item.pl-pick-color:hover,


.pl-pick-item.pl-pick-color:active {


    box-shadow: 0 0 16px rgba(255,255,255,0.2);


}


.pl-pick-item.pl-pick-emoji {


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


    border-radius: 12px;


}


.pl-pick-item.pl-pick-emoji:hover,


.pl-pick-item.pl-pick-emoji:active {


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


}





/* ---- Result Screens ---- */


.pl-win-icon, .pl-lose-icon {


    font-size: 3.5rem;


    margin-bottom: 8px;


    animation: pl-result-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);


}


@keyframes pl-result-pop {


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


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


}





.pl-result-title {


    font-size: 1.8rem;


    font-weight: 800;


    margin-bottom: 8px;


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


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


}


.pl-result-lose {


    background: linear-gradient(135deg, var(--gp-danger), #ff9f43);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


}





.pl-new-best {


    background: var(--gp-accent);


    color: #1a1a2e;


    padding: 4px 16px;


    border-radius: 20px;


    font-size: 0.85rem;


    font-weight: 700;


    margin-bottom: 12px;


    animation: pl-best-bounce 0.6s ease;


}


@keyframes pl-best-bounce {


    0% { transform: scale(0); }


    50% { transform: scale(1.2); }


    100% { transform: scale(1); }


}





.pl-result-stats {


    display: flex;


    gap: 24px;


    margin: 16px 0;


}


.pl-result-stat {


    display: flex;


    flex-direction: column;


    align-items: center;


}


.pl-result-num {


    font-size: 1.8rem;


    font-weight: 700;


    color: var(--gp-accent);


}


.pl-result-lbl {


    font-size: 0.7rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


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


    margin-top: 2px;


}





.pl-solution-row {


    display: flex;


    gap: 8px;


    justify-content: center;


    margin: 12px 0 20px;


}


.pl-solution-peg {


    width: 40px;


    height: 40px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.4rem;


    animation: pl-sol-reveal 0.4s ease backwards;


}


.pl-solution-peg:nth-child(2) { animation-delay: 0.1s; }


.pl-solution-peg:nth-child(3) { animation-delay: 0.2s; }


.pl-solution-peg:nth-child(4) { animation-delay: 0.3s; }


@keyframes pl-sol-reveal {


    0% { transform: scale(0) rotateY(90deg); opacity: 0; }


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


}





.pl-lose-msg {


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


    font-size: 0.9rem;


    margin-bottom: 4px;


}


.pl-done-msg {


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


    font-size: 0.95rem;


    margin-bottom: 16px;


}





/* ---- Daily Badge ---- */


.pl-daily-badge {


    background: linear-gradient(135deg, #b44aff, #4a9eff);


    color: #fff;


    padding: 4px 16px;


    border-radius: 20px;


    font-size: 0.8rem;


    font-weight: 600;


    margin-bottom: 12px;


    display: inline-block;


}





/* ---- Leaderboard ---- */


.pl-leaderboard {


    width: 100%;


    max-width: 340px;


    margin-top: 16px;


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


    border-radius: 16px;


    padding: 16px;


}


.pl-lb-title {


    font-size: 1rem;


    font-weight: 700;


    margin-bottom: 12px;


    color: var(--gp-accent);


    text-align: center;


}


.pl-lb-list {


    display: flex;


    flex-direction: column;


    gap: 6px;


}


.pl-lb-loading {


    text-align: center;


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


    padding: 16px;


    font-size: 0.85rem;


}


.pl-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;


}


.pl-lb-entry.pl-lb-me {


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


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


}


.pl-lb-rank {


    font-size: 0.85rem;


    font-weight: 700;


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


    width: 22px;


    text-align: center;


    flex-shrink: 0;


}


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


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


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


.pl-lb-name {


    flex: 1;


    font-size: 0.85rem;


    font-weight: 600;


    overflow: hidden;


    text-overflow: ellipsis;


    white-space: nowrap;


}


.pl-lb-time {


    font-size: 0.8rem;


    color: var(--gp-accent);


    font-weight: 600;


    flex-shrink: 0;


}


.pl-lb-guesses {


    font-size: 0.75rem;


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


    flex-shrink: 0;


}





/* ---- Name Input ---- */


.pl-name-msg {


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


    font-size: 0.9rem;


    margin-bottom: 12px;


}


.pl-name-input {


    width: 100%;


    max-width: 240px;


    padding: 12px 16px;


    border-radius: 12px;


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


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


    color: #fff;


    font-size: 1rem;


    text-align: center;


    outline: none;


    margin-bottom: 16px;


    transition: border-color 0.2s;


}


.pl-name-input:focus {


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


}


.pl-name-input::placeholder {


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


}





/* ---- Help pegs ---- */


.pl-help-peg {


    display: inline-block;


    width: 14px;


    height: 14px;


    border-radius: 50%;


    vertical-align: middle;


    margin-right: 4px;


}


.pl-help-peg-black {


    background: #fff;


    box-shadow: 0 0 4px rgba(255,255,255,0.5);


}


.pl-help-peg-white {


    background: transparent;


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


}





/* ---- Row submit animation ---- */


.pl-row-submit-anim .pl-guess-peg {


    animation: pl-peg-lock 0.3s ease;


}


@keyframes pl-peg-lock {


    0% { transform: scale(1); }


    50% { transform: scale(1.15); }


    100% { transform: scale(1); }


}





/* ---- Win confetti ---- */


.pl-confetti {


    position: fixed;


    top: -10px;


    width: 8px;


    height: 8px;


    border-radius: 2px;


    animation: pl-confetti-fall linear forwards;


    pointer-events: none;


    z-index: 9999;


}


@keyframes pl-confetti-fall {


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


    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }


}





/* Toast container uses shared styles from styles.css */





/* ---- Responsive ---- */


@media (max-height: 620px) {


    .pl-guess-peg {


        width: 24px;


        height: 24px;


        font-size: 0.8rem;


    }


    .pl-current-slot {


        width: 36px;


        height: 36px;


        font-size: 1.1rem;


    }


    .pl-pick-item {


        width: 38px;


        height: 38px;


        font-size: 1.2rem;


    }


    .pl-guess-row {


        min-height: 34px;


        padding: 2px 6px;


    }


    .pl-feedback {


        width: 22px;


        height: 22px;


    }


    .pl-fb-peg {


        width: 8px;


        height: 8px;


    }


    .pl-guess-board {


        gap: 2px;


        padding: 4px 10px 2px;


    }


}





@media (max-height: 520px) {


    .pl-guess-peg {


        width: 20px;


        height: 20px;


        font-size: 0.7rem;


    }


    .pl-current-slot {


        width: 32px;


        height: 32px;


    }


    .pl-pick-item {


        width: 34px;


        height: 34px;


        font-size: 1.05rem;


    }


}