/**

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

 */

/* ---- Thought Trails - Game Styles ---- */







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



.tt-logo {



    margin-bottom: 16px;



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



}



.tt-logo-svg {



    display: block;



}







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



.tt-title {



    font-size: 36px;



    font-weight: 900;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 6px;



    letter-spacing: -0.5px;



}



.tt-subtitle {



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



    font-size: 14px;



    font-weight: 500;



    margin-bottom: 24px;



    letter-spacing: 0.3px;



}







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



.tt-menu-stats {



    display: flex;



    gap: 32px;



    margin-bottom: 28px;



}



.tt-menu-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.tt-menu-stat-val {



    font-size: 28px;



    font-weight: 800;



    color: var(--gp-accent);



    font-variant-numeric: tabular-nums;



}



.tt-menu-stat-lbl {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



}







/* ---- Difficulty Selector ---- */



.tt-difficulty-selector {



    display: flex;



    gap: 6px;



    margin-bottom: 28px;



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



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



    padding: 4px;



}



.tt-diff-btn {



    flex: 1;



    padding: 10px 16px;



    border: none;



    border-radius: 12px;



    background: transparent;



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



    font-size: 14px;



    font-weight: 700;



    cursor: pointer;



    transition: all var(--gp-transition-fast);



    font-family: var(--gp-font-stack);



}



.tt-diff-btn.active {



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



    color: var(--gp-accent);



    box-shadow: 0 2px 12px rgba(255, 217, 61, 0.15);



}



.tt-diff-btn:active {



    transform: scale(0.95);



}







/* ---- Canvas Container ---- */



#canvas-container {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 8px;



    position: relative;



    overflow: hidden;



}



#game-canvas {



    display: block;



    width: 100%;



    height: 100%;



    touch-action: none;



}







/* ---- Game Controls ---- */



.tt-controls {



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 8px 16px 16px;



    gap: 12px;



    min-height: 56px;



}



.tt-ctrl-btn {



    padding: 10px 20px;



    border: none;



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



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



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



    font-size: 14px;



    font-weight: 700;



    cursor: pointer;



    transition: all var(--gp-transition-fast);



    font-family: var(--gp-font-stack);



}



.tt-ctrl-btn:active {



    transform: scale(0.95);



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



}



.tt-ctrl-primary {



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



    color: #1a1640;



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



}



.tt-ctrl-primary:active {



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



}



.tt-completion {



    font-size: 14px;



    font-weight: 700;



    color: var(--gp-success);



    text-align: center;



    min-height: 20px;



}







/* ---- Complete Screen ---- */



.tt-complete-title {



    font-size: 32px;



    font-weight: 900;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 28px;



}



.tt-stats-grid {



    display: flex;



    gap: 16px;



    margin-bottom: 32px;



}



.tt-stat-box {



    display: flex;



    flex-direction: column;



    align-items: center;



    background: var(--gp-bg-surface);



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



    padding: 16px 20px;



    min-width: 80px;



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



}



.tt-stat-num {



    font-size: 26px;



    font-weight: 800;



    color: var(--gp-accent);



    font-variant-numeric: tabular-nums;



}



.tt-stat-lbl {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



    margin-top: 4px;



}







/* ---- 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: var(--gp-text-secondary);



    line-height: 1.5;



}







/* ---- Safe Area (bottom controls) ---- */



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



    .tt-controls {



        padding-bottom: calc(16px + env(safe-area-inset-bottom));



    }



}