/**

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

 */

/* Thread - Euler Path Game Styles */







/* Logo */



.thread-logo {



    margin-bottom: 16px;



}



#logo-canvas {



    width: 120px;



    height: 120px;



}







/* Title */



.thread-title {



    font-size: 48px;



    font-weight: 800;



    letter-spacing: -1px;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 4px;



}



.thread-subtitle {



    font-size: 15px;



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



    font-weight: 500;



    margin-bottom: 20px;



}



.menu-best {



    font-size: 13px;



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



    margin-bottom: 24px;



    font-weight: 600;



}







/* Sound toggle row */



.thread-sound-row {



    margin-top: 16px;



    display: flex;



    justify-content: center;



}



.thread-sound-row .gp-icon-btn {



    width: 44px;



    height: 44px;



    font-size: 20px;



}



.thread-sound-row .gp-icon-btn.muted {



    opacity: 0.4;



}







/* Game container */



#game-container {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 8px;



    touch-action: none;



}



#game-canvas {



    border-radius: 16px;



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



}







/* Game screen layout */



#screen-game {



    flex-direction: column;



}







/* Info bar */



.thread-info-bar {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 16px;



    padding: 8px 16px 20px;



    font-size: 14px;



    font-weight: 600;



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



}







/* Win / Fail screens */



.thread-win-title {



    font-size: 32px;



    font-weight: 800;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 24px;



}



.thread-fail-title {



    font-size: 32px;



    font-weight: 800;



    color: var(--gp-danger);



    margin-bottom: 8px;



}



.thread-fail-msg {



    font-size: 14px;



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



    margin-bottom: 24px;



}







/* Stats grid */



.thread-stats-grid {



    display: flex;



    gap: 16px;



    margin-bottom: 28px;



}



.thread-stat-box {



    display: flex;



    flex-direction: column;



    align-items: center;



    min-width: 70px;



}



.thread-stat-num {



    font-size: 28px;



    font-weight: 800;



    color: #fff;



}



.thread-stat-lbl {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



}







/* Daily badge */



.thread-daily-badge {



    display: inline-block;



    padding: 6px 16px;



    border-radius: 20px;



    background: linear-gradient(135deg, rgba(255, 217, 61, 0.2), rgba(255, 159, 67, 0.2));



    border: 1px solid rgba(255, 217, 61, 0.3);



    color: var(--gp-accent);



    font-size: 13px;



    font-weight: 700;



    letter-spacing: 0.5px;



    margin-bottom: 24px;



}







/* Help sections */



.help-section {



    margin-bottom: 16px;



}



.help-section h4 {



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-accent);



    margin-bottom: 4px;



}



.help-section p {



    font-size: 13px;



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



    line-height: 1.5;



}







/* Node pulse animation */



@keyframes thread-pulse {



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



    50% { transform: scale(1.25); }



}