/**

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

 */

.sb-logo {



    font-size: 64px;



    margin-bottom: 8px;



    text-align: center;



    filter: drop-shadow(0 4px 20px rgba(108, 192, 255, 0.3));



}



.sb-title {



    font-size: 28px;



    font-weight: 800;



    text-align: center;



    background: linear-gradient(135deg, #6cc0ff, #a78bfa);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 4px;



}



.sb-subtitle {



    font-size: 14px;



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



    text-align: center;



    margin-bottom: 16px;



}



.menu-best {



    font-size: 13px;



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



    text-align: center;



    margin-bottom: 20px;



}







/* Difficulty selector */



.sb-difficulty {



    margin: 0 0 20px;



    text-align: center;



}



.sb-diff-label {



    font-size: 11px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 1px;



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



    margin-bottom: 8px;



}



.sb-diff-pills {



    display: flex;



    gap: 6px;



    justify-content: center;



    flex-wrap: wrap;



}



.sb-pill {



    padding: 8px 14px;



    border-radius: 20px;



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



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



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



    font-size: 12px;



    font-weight: 700;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



}



.sb-pill.active {



    background: linear-gradient(135deg, rgba(108,192,255,0.2), rgba(167,139,250,0.15));



    border-color: rgba(108,192,255,0.35);



    color: #6cc0ff;



}







/* Game area */



#game-area {



    display: flex;



    flex-direction: column;



    align-items: center;



    flex: 1;



    padding: 12px 16px 20px;



    position: relative;



    overflow-y: auto;



}







/* Sentence area (top) */



.sb-sentence-area {



    width: 100%;



    max-width: 400px;



    min-height: 100px;



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



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



    border-radius: 16px;



    padding: 16px;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    margin-bottom: 8px;



    transition: border-color 200ms;



}



.sb-sentence-area.sb-has-words {



    border-color: rgba(108,192,255,0.3);



}



.sb-sentence-area.sb-correct {



    border-color: #2ed573;



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



}



.sb-sentence-area.sb-wrong {



    border-color: #ff4757;



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



    animation: sb-shake 400ms ease;



}







.sb-sentence-slots {



    display: flex;



    flex-wrap: wrap;



    gap: 8px;



    justify-content: center;



    align-items: center;



    min-height: 44px;



    width: 100%;



}







.sb-sentence-hint {



    font-size: 13px;



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



    text-align: center;



    margin-top: 4px;



}



.sb-sentence-hint.sb-hidden {



    display: none;



}







/* Placed word chip (in sentence area) */



.sb-placed-word {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    padding: 10px 16px;



    border-radius: 12px;



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



    border: 2px solid rgba(108,192,255,0.35);



    color: #fff;



    font-size: 16px;



    font-weight: 700;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



    -webkit-tap-highlight-color: transparent;



    user-select: none;



    animation: sb-place-in 200ms ease;



}



.sb-placed-word:active {



    transform: scale(0.93);



}







@keyframes sb-place-in {



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



    60% { transform: scale(1.05); }



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



}







/* Divider */



.sb-divider {



    width: 60px;



    height: 3px;



    border-radius: 2px;



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



    margin: 12px 0;



}







/* Streak indicator */



.sb-streak {



    font-size: 13px;



    font-weight: 700;



    color: #ffd93d;



    text-align: center;



    min-height: 20px;



    margin-bottom: 8px;



    transition: all 200ms;



}







/* Word bank (bottom) */



.sb-word-bank {



    display: flex;



    flex-wrap: wrap;



    gap: 10px;



    justify-content: center;



    align-items: center;



    width: 100%;



    max-width: 400px;



    padding: 8px 0;



    min-height: 60px;



}







/* Word chip (in bank) */



.sb-word-chip {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    padding: 12px 18px;



    border-radius: 14px;



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



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



    color: #fff;



    font-size: 17px;



    font-weight: 700;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



    -webkit-tap-highlight-color: transparent;



    user-select: none;



    min-height: 48px;



}



.sb-word-chip:active {



    transform: scale(0.93);



}



.sb-word-chip.sb-used {



    opacity: 0.2;



    pointer-events: none;



    transform: scale(0.9);



    border-color: transparent;



}







/* Action buttons */



.sb-actions {



    display: flex;



    gap: 12px;



    margin-top: 16px;



    width: 100%;



    max-width: 400px;



}



.sb-action-btn {



    flex: 1;



    padding: 14px 16px;



    border-radius: 14px;



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



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



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



    font-size: 15px;



    font-weight: 700;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



    -webkit-tap-highlight-color: transparent;



}



.sb-action-btn:active {



    transform: scale(0.96);



}



.sb-action-submit {



    background: linear-gradient(135deg, rgba(108,192,255,0.2), rgba(167,139,250,0.15));



    border-color: rgba(108,192,255,0.35);



    color: #6cc0ff;



}



.sb-action-submit:disabled {



    opacity: 0.3;



    pointer-events: none;



}







/* Feedback animations */



@keyframes sb-shake {



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



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



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



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



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



}







@keyframes sb-bounce {



    0% { transform: scale(1); }



    40% { transform: scale(1.08); }



    100% { transform: scale(1); }



}







.sb-word-chip.sb-correct-flash {



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



    border-color: #2ed573;



    color: #2ed573;



}







/* Game over stats */



.sb-stats-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 10px;



    margin: 20px 0;



}



.sb-stat-box {



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



    border-radius: 12px;



    padding: 14px 8px;



    text-align: center;



}



.sb-stat-num {



    display: block;



    font-size: 24px;



    font-weight: 800;



    color: #fff;



}



.sb-stat-lbl {



    font-size: 10px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 0.5px;



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



    margin-top: 2px;



}







/* Level transition */



.sb-level-up {



    position: absolute;



    top: 50%;



    left: 50%;



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



    font-size: 28px;



    font-weight: 800;



    color: #ffd93d;



    pointer-events: none;



    opacity: 0;



    z-index: 10;



}



.sb-level-up.show {



    animation: sb-level-float 1200ms ease forwards;



}



@keyframes sb-level-float {



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



    20% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; }



    70% { opacity: 1; }



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



}







/* Responsive adjustments */



@media (max-height: 600px) {



    .sb-sentence-area { min-height: 80px; padding: 10px; }



    .sb-word-chip { padding: 10px 14px; font-size: 15px; min-height: 42px; }



    .sb-placed-word { padding: 8px 12px; font-size: 14px; }



    .sb-divider { margin: 6px 0; }



}