/**

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

 */

/* ================================================



   Clock Builder - styles.css



   All classes prefixed with cb-



   ================================================ */







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



.cb-logo {



    font-size: 72px;



    line-height: 1;



    margin-bottom: 8px;



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



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



}



@keyframes cb-pulse {



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



    50% { transform: scale(1.08); }



}







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



.cb-title {



    font-size: 32px;



    font-weight: 800;



    margin-bottom: 4px;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}



.cb-subtitle {



    font-size: 15px;



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



    margin-bottom: 20px;



}



.cb-menu-best {



    font-size: 14px;



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



    margin-bottom: 20px;



    font-weight: 600;



}



.cb-menu-best span {



    color: #ffd93d;



}







/* ---- Difficulty Pills ---- */



.cb-difficulty {



    margin-bottom: 24px;



    width: 100%;



    max-width: 320px;



}



.cb-diff-label {



    font-size: 11px;



    text-transform: uppercase;



    letter-spacing: 1.5px;



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



    font-weight: 600;



    margin-bottom: 8px;



}



.cb-diff-pills {



    display: flex;



    gap: 6px;



    flex-wrap: wrap;



    justify-content: center;



}



.cb-pill {



    padding: 8px 14px;



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



    border-radius: 20px;



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



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



    font-size: 13px;



    font-weight: 600;



    cursor: pointer;



    transition: all 0.2s ease;



    font-family: inherit;



}



.cb-pill:hover {



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



}



.cb-pill.active {



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



    border-color: rgba(255,217,61,0.4);



    color: #ffd93d;



}







/* ---- Game Area ---- */



.cb-game-area {



    flex: 1;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    padding: 8px 16px 16px;



    gap: 12px;



    overflow: hidden;



}







/* ---- Prompt ---- */



.cb-prompt {



    font-size: 18px;



    font-weight: 600;



    color: #fff;



    text-align: center;



    padding: 10px 20px;



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



    border-radius: 12px;



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



    min-height: 48px;



    display: flex;



    align-items: center;



    justify-content: center;



    width: 100%;



    max-width: 340px;



}



.cb-prompt strong {



    color: #ffd93d;



    margin-left: 4px;



}







/* ---- Clock Container ---- */



.cb-clock-wrap {



    display: flex;



    align-items: center;



    justify-content: center;



    flex: 1;



    width: 100%;



    min-height: 0;



}



.cb-clock {



    position: relative;



    width: min(72vw, 300px);



    height: min(72vw, 300px);



    flex-shrink: 0;



}







/* ---- Clock Face ---- */



.cb-clock-face {



    position: relative;



    width: 100%;



    height: 100%;



    border-radius: 50%;



    background: radial-gradient(circle at 40% 35%, #2a2260, #1a1440 70%);



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



    box-shadow:



        0 0 30px rgba(255, 217, 61, 0.08),



        inset 0 0 40px rgba(0, 0, 0, 0.3);



    touch-action: none;



}







/* ---- Clock Numbers ----



   Positioned absolutely using left/top percentages.



   Numbers sit on a circle at ~40% radius from center.



   Calculated: left = 50 + 40*sin(angle), top = 50 - 40*cos(angle)



   where angle = i * 30 degrees



*/



.cb-number {



    position: absolute;



    width: 28px;



    height: 28px;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 18px;



    font-weight: 700;



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



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



    pointer-events: none;



    user-select: none;



}



/* 12: sin(0)=0, cos(0)=1 => left:50%, top:10% */



.cb-number[data-n="12"] { left: 50%; top: 10%; }



/* 1: sin(30)=0.5, cos(30)=0.866 => left:70%, top:15.4% */



.cb-number[data-n="1"]  { left: 70%; top: 15.4%; }



/* 2: sin(60)=0.866, cos(60)=0.5 => left:84.6%, top:30% */



.cb-number[data-n="2"]  { left: 84.6%; top: 30%; }



/* 3: sin(90)=1, cos(90)=0 => left:90%, top:50% */



.cb-number[data-n="3"]  { left: 90%; top: 50%; }



/* 4: sin(120)=0.866, cos(120)=-0.5 => left:84.6%, top:70% */



.cb-number[data-n="4"]  { left: 84.6%; top: 70%; }



/* 5: sin(150)=0.5, cos(150)=-0.866 => left:70%, top:84.6% */



.cb-number[data-n="5"]  { left: 70%; top: 84.6%; }



/* 6: sin(180)=0, cos(180)=-1 => left:50%, top:90% */



.cb-number[data-n="6"]  { left: 50%; top: 90%; }



/* 7: sin(210)=-0.5, cos(210)=-0.866 => left:30%, top:84.6% */



.cb-number[data-n="7"]  { left: 30%; top: 84.6%; }



/* 8: sin(240)=-0.866, cos(240)=-0.5 => left:15.4%, top:70% */



.cb-number[data-n="8"]  { left: 15.4%; top: 70%; }



/* 9: sin(270)=-1, cos(270)=0 => left:10%, top:50% */



.cb-number[data-n="9"]  { left: 10%; top: 50%; }



/* 10: sin(300)=-0.866, cos(300)=0.5 => left:15.4%, top:30% */



.cb-number[data-n="10"] { left: 15.4%; top: 30%; }



/* 11: sin(330)=-0.5, cos(330)=0.866 => left:30%, top:15.4% */



.cb-number[data-n="11"] { left: 30%; top: 15.4%; }







/* ---- Tick Marks ---- */



.cb-tick {



    position: absolute;



    bottom: 50%;



    left: 50%;



    width: 1px;



    height: 50%;



    margin-left: -0.5px;



    transform-origin: 50% 100%;



    pointer-events: none;



}



.cb-tick::after {



    content: '';



    position: absolute;



    top: 2px;



    left: 0;



    width: 100%;



    height: 6px;



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



    border-radius: 1px;



}



.cb-tick-major::after {



    height: 10px;



    width: 2px;



    left: -0.5px;



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



}







/* ---- Clock Hands ---- */



.cb-hand {



    position: absolute;



    bottom: 50%;



    left: 50%;



    transform-origin: 50% 100%;



    transform: translateX(-50%) rotate(0deg);



    border-radius: 4px;



    cursor: grab;



    transition: none;



    z-index: 5;



    touch-action: none;



}



.cb-hand:active {



    cursor: grabbing;



}



.cb-hand-hour {



    width: 8px;



    height: 28%;



    background: linear-gradient(to top, #ffd93d, #ffec80);



    box-shadow: 0 0 10px rgba(255, 217, 61, 0.4);



    z-index: 6;



    border-radius: 4px 4px 2px 2px;



}



.cb-hand-minute {



    width: 5px;



    height: 38%;



    background: linear-gradient(to top, #ff6b6b, #ff9090);



    box-shadow: 0 0 10px rgba(255, 107, 107, 0.4);



    z-index: 7;



    border-radius: 3px 3px 2px 2px;



}







/* Hand grab area - invisible expanded hit target */



.cb-hand::after {



    content: '';



    position: absolute;



    top: -24px;



    left: -22px;



    right: -22px;



    bottom: -14px;



    border-radius: 8px;



}







/* ---- Center Dot ---- */



.cb-center-dot {



    position: absolute;



    top: 50%;



    left: 50%;



    width: 14px;



    height: 14px;



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



    border-radius: 50%;



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



    box-shadow: 0 0 8px rgba(255, 217, 61, 0.5);



    z-index: 10;



    pointer-events: none;



}







/* ---- Active hand glow ---- */



.cb-hand.cb-dragging {



    filter: brightness(1.3) drop-shadow(0 0 12px currentColor);



}



.cb-hand-hour.cb-dragging {



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



}



.cb-hand-minute.cb-dragging {



    box-shadow: 0 0 20px rgba(255, 107, 107, 0.7);



}







/* ---- Feedback animations ---- */



.cb-clock.cb-correct {



    animation: cb-flash-correct 0.6s ease;



}



@keyframes cb-flash-correct {



    0% { box-shadow: none; }



    30% { box-shadow: 0 0 40px rgba(46, 213, 115, 0.6); }



    100% { box-shadow: none; }



}



.cb-clock-face.cb-correct-face {



    animation: cb-border-correct 0.6s ease;



}



@keyframes cb-border-correct {



    0% { border-color: rgba(255, 217, 61, 0.3); }



    30% { border-color: #2ed573; }



    100% { border-color: rgba(255, 217, 61, 0.3); }



}







.cb-clock.cb-wrong {



    animation: cb-shake 0.5s ease;



}



@keyframes cb-shake {



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



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



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



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



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



    75% { transform: translateX(-3px); }



    90% { transform: translateX(3px); }



}



.cb-clock-face.cb-wrong-face {



    animation: cb-border-wrong 0.5s ease;



}



@keyframes cb-border-wrong {



    0% { border-color: rgba(255, 217, 61, 0.3); }



    20% { border-color: #ff4757; }



    100% { border-color: rgba(255, 217, 61, 0.3); }



}







/* ---- Hand selection toggle ---- */



.cb-hand-select {



    display: flex;



    gap: 8px;



    margin-bottom: 2px;



}



.cb-sel-btn {



    padding: 8px 20px;



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



    border-radius: 20px;



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



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



    font-size: 14px;



    font-weight: 700;



    font-family: inherit;



    cursor: pointer;



    transition: all 0.2s ease;



}



.cb-sel-hour.active {



    background: rgba(255,217,61,0.18);



    border-color: rgba(255,217,61,0.5);



    color: #ffd93d;



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



}



.cb-sel-minute.active {



    background: rgba(255,107,107,0.18);



    border-color: rgba(255,107,107,0.5);



    color: #ff6b6b;



    box-shadow: 0 0 12px rgba(255,107,107,0.15);



}







/* Selected hand pulsing glow */



.cb-hand-hour.cb-selected {



    box-shadow: 0 0 14px rgba(255,217,61,0.6);



    filter: brightness(1.15);



}



.cb-hand-minute.cb-selected {



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



    filter: brightness(1.15);



}







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



.cb-controls {



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 8px;



    width: 100%;



}



.cb-hand-hint {



    font-size: 12px;



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



    font-weight: 500;



    transition: opacity 0.3s ease;



}



.cb-check-btn {



    width: 180px;



    font-size: 18px;



    padding: 14px 32px;



}







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



.cb-stats-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px;



    margin: 20px 0 28px;



    width: 100%;



    max-width: 280px;



}



.cb-stat-box {



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 16px 8px;



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



    border-radius: 12px;



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



}



.cb-stat-num {



    font-size: 28px;



    font-weight: 800;



    color: #ffd93d;



    line-height: 1.1;



}



.cb-stat-lbl {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



    margin-top: 4px;



}







/* ---- Help Sections ---- */



.cb-help-section {



    margin-bottom: 16px;



}



.cb-help-section h4 {



    font-size: 14px;



    font-weight: 700;



    color: #ffd93d;



    margin-bottom: 6px;



}



.cb-help-section p {



    font-size: 13px;



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



    line-height: 1.5;



}







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



@media (max-height: 640px) {



    .cb-clock {



        width: min(56vw, 240px);



        height: min(56vw, 240px);



    }



    .cb-prompt {



        font-size: 16px;



        padding: 8px 16px;



        min-height: 40px;



    }



    .cb-number {



        font-size: 15px;



    }



    .cb-check-btn {



        padding: 10px 24px;



        font-size: 16px;



    }



}







@media (max-height: 540px) {



    .cb-clock {



        width: min(44vw, 200px);



        height: min(44vw, 200px);



    }



    .cb-game-area {



        padding: 4px 12px 8px;



        gap: 6px;



    }



}