/**

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

 */

/**



 * Balance Lab - Game Styles



 */







/* ---- Screen System ---- */



.screen {



    position: absolute;



    inset: 0;



    display: flex;



    flex-direction: column;



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.3s ease;



    z-index: 1;



}



.screen.active {



    opacity: 1;



    pointer-events: auto;



    z-index: 10;



}



.screen-content {



    flex: 1;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    padding: 40px 24px;



    text-align: center;



}







/* ---- App Shell ---- */



#app {



    position: relative;



    width: 100%;



    max-width: var(--gp-max-width);



    height: 100vh;



    height: 100dvh;



    margin: 0 auto;



    overflow: hidden;



    background: linear-gradient(170deg, #1a1640 0%, #0f0c29 40%, #1e1245 100%);



}







/* ---- Menu Screen ---- */



.back-to-games-inline {



    display: inline-flex;



    align-items: center;



    gap: 6px;



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



    text-decoration: none;



    font-size: 13px;



    font-weight: 600;



    padding: 8px 14px;



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



    transition: color 150ms, background 150ms;



    margin-bottom: 16px;



}



.back-to-games-inline:active {



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



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



}







.game-logo {



    display: flex;



    gap: 8px;



    margin-bottom: 12px;



}



.logo-emoji {



    font-size: 40px;



    animation: gp-badge-pop 0.6s ease both;



}



.logo-emoji-2 { animation-delay: 0.1s; font-size: 52px; }



.logo-emoji-3 { animation-delay: 0.2s; }







.game-title {



    font-size: 42px;



    font-weight: 900;



    line-height: 1;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 8px;



}



.game-subtitle {



    font-size: 16px;



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



    margin-bottom: 20px;



    letter-spacing: 1px;



}



.menu-best {



    font-size: 14px;



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



    margin-bottom: 24px;



    font-weight: 600;



}







/* ---- Buttons ---- */



.btn {



    display: block;



    width: 220px;



    padding: 16px 32px;



    border: none;



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



    font-size: 20px;



    font-weight: 700;



    cursor: pointer;



    transition: transform 150ms, box-shadow 150ms;



    letter-spacing: 0.5px;



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



    text-decoration: none;



    text-align: center;



}



.btn:active { transform: scale(0.95); }







.btn-primary {



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



    color: #1a1640;



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



}



.btn-secondary {



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



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



    margin-top: 12px;



    font-size: 16px;



    padding: 12px 32px;



}







.icon-btn {



    width: 36px;



    height: 36px;



    border: none;



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



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



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



    font-size: 16px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: background 150ms;



    flex-shrink: 0;



}



.icon-btn:active { background: rgba(255, 255, 255, 0.15); }



.icon-btn-sm { width: 32px; height: 32px; font-size: 14px; }







.settings-row {



    display: flex;



    gap: 8px;



    margin-top: 16px;



}







/* ---- Game Header ---- */



#game-header {



    display: flex;



    align-items: center;



    padding: 10px 12px 6px;



    gap: 8px;



    min-height: 52px;



}



.stat {



    display: flex;



    flex-direction: column;



    min-width: 0;



}



.stat-right { align-items: flex-end; }



.stat-center { align-items: center; flex: 1; }



.stat-label {



    font-size: 10px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



}



.stat-value {



    font-size: 22px;



    font-weight: 800;



    font-variant-numeric: tabular-nums;



    line-height: 1.1;



}







/* ---- Balance Status Bar ---- */



#balance-status {



    padding: 4px 16px 8px;



    text-align: center;



}



#torque-bar-container {



    position: relative;



    height: 8px;



    border-radius: 4px;



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



    margin-bottom: 4px;



    overflow: hidden;



}



#torque-bar-left {



    position: absolute;



    right: 50%;



    top: 0;



    height: 100%;



    background: linear-gradient(90deg, transparent, #ff6b6b);



    border-radius: 4px 0 0 4px;



    width: 0;



    transition: width 0.4s ease;



}



#torque-bar-right {



    position: absolute;



    left: 50%;



    top: 0;



    height: 100%;



    background: linear-gradient(270deg, transparent, #4ecdc4);



    border-radius: 0 4px 4px 0;



    width: 0;



    transition: width 0.4s ease;



}



#torque-bar-center {



    position: absolute;



    left: 50%;



    top: 0;



    width: 2px;



    height: 100%;



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



    transform: translateX(-50%);



    z-index: 2;



}



#torque-indicator {



    position: absolute;



    top: 50%;



    left: 50%;



    width: 12px;



    height: 12px;



    border-radius: 50%;



    background: var(--gp-accent);



    box-shadow: 0 0 8px var(--gp-accent-glow);



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



    transition: left 0.4s ease;



    z-index: 3;



}



#balance-text {



    font-size: 12px;



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



    font-weight: 600;



}







/* ---- Canvas Area ---- */



#canvas-container {



    flex: 1;



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 0 8px;



    min-height: 0;



}



#game-canvas {



    width: 100%;



    max-width: 400px;



    touch-action: none;



}







/* ---- Weight Tray ---- */



#weight-tray {



    padding: 8px 16px;



    min-height: 100px;



}



#tray-label {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



    margin-bottom: 8px;



    text-align: center;



}



#tray-weights {



    display: flex;



    flex-wrap: wrap;



    gap: 8px;



    justify-content: center;



    min-height: 56px;



}



.tray-weight {



    width: 56px;



    height: 56px;



    border-radius: 14px;



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



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



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    cursor: grab;



    transition: transform 150ms, box-shadow 150ms, background 150ms;



    user-select: none;



    touch-action: none;



    position: relative;



}



.tray-weight:active { cursor: grabbing; }



.tray-weight.dragging {



    opacity: 0.4;



    transform: scale(0.9);



}



.tray-weight .weight-emoji {



    font-size: 24px;



    line-height: 1;



}



.tray-weight .weight-label {



    font-size: 10px;



    font-weight: 800;



    color: var(--gp-accent);



    margin-top: 1px;



}



.tray-weight.placed {



    opacity: 0.3;



    pointer-events: none;



}







/* ---- Level Actions ---- */



#level-actions {



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 4px 16px 16px;



    gap: 8px;



}



.btn-check {



    width: 260px;



    padding: 14px 32px;



    font-size: 18px;



    background: linear-gradient(135deg, #2ed573, #1abc9c);



    color: #fff;



    box-shadow: 0 4px 16px rgba(46, 213, 115, 0.3);



}



.btn-check:disabled {



    opacity: 0.4;



    cursor: not-allowed;



    transform: none !important;



}



.btn-reset {



    background: none;



    border: none;



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



    font-size: 13px;



    font-weight: 600;



    cursor: pointer;



    padding: 6px 16px;



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



}



.btn-reset:active { color: var(--gp-text-primary); }







/* ---- Overlays ---- */



.game-overlay {



    position: absolute;



    inset: 0;



    z-index: 50;



    background: rgba(0, 0, 0, 0.75);



    backdrop-filter: blur(6px);



    -webkit-backdrop-filter: blur(6px);



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.2s ease;



}



.game-overlay.active {



    opacity: 1;



    pointer-events: auto;



}



.overlay-content {



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 4px;



}



.overlay-title {



    font-size: 28px;



    font-weight: 800;



    margin-bottom: 20px;



    color: var(--gp-success);



}



.fail-title {



    color: var(--gp-danger);



}



.bonus-text {



    font-size: 16px;



    color: var(--gp-accent);



    font-weight: 700;



    margin-bottom: 16px;



}



.fail-hint {



    font-size: 14px;



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



    margin-bottom: 16px;



    max-width: 280px;



    line-height: 1.4;



}







/* ---- Modal ---- */



.modal-overlay {



    position: fixed;



    inset: 0;



    z-index: 150;



    background: rgba(0, 0, 0, 0.7);



    backdrop-filter: blur(4px);



    -webkit-backdrop-filter: blur(4px);



    display: flex;



    align-items: center;



    justify-content: center;



    opacity: 0;



    pointer-events: none;



    transition: opacity 0.25s ease;



    padding: 20px;



}



.modal-overlay.active {



    opacity: 1;



    pointer-events: auto;



}



.modal-content {



    background: linear-gradient(170deg, #1e1650, #150f35);



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



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



    padding: 28px 24px;



    max-width: 360px;



    width: 100%;



    max-height: 80vh;



    overflow-y: auto;



    position: relative;



    transform: scale(0.9);



    transition: transform 0.25s ease;



}



.modal-overlay.active .modal-content {



    transform: scale(1);



}



.modal-close {



    position: absolute;



    top: 12px;



    right: 16px;



    width: 32px;



    height: 32px;



    border: none;



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



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



    font-size: 20px;



    border-radius: 8px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



}



.modal-title {



    font-size: 22px;



    font-weight: 800;



    margin-bottom: 20px;



}



.help-section {



    margin-bottom: 14px;



}



.help-emoji-row {



    font-size: 28px;



    margin-bottom: 6px;



}



.help-text {



    font-size: 14px;



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



    line-height: 1.5;



}







/* ---- Game Over Screen ---- */



.gameover-title {



    font-size: 32px;



    font-weight: 900;



    margin-bottom: 8px;



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



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}



.hidden { display: none !important; }



#new-best-badge {



    background: linear-gradient(135deg, var(--gp-fire-a), var(--gp-fire-b));



    color: #fff;



    font-size: 14px;



    font-weight: 800;



    padding: 4px 16px;



    border-radius: 20px;



    margin-bottom: 12px;



    animation: gp-badge-pop 0.5s ease both;



}



.final-score-block {



    display: flex;



    flex-direction: column;



    align-items: center;



    margin-bottom: 8px;



}



.final-label {



    font-size: 12px;



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



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



}



.final-value {



    font-size: 48px;



    font-weight: 900;



    color: var(--gp-accent);



}



.final-value-small {



    font-size: 28px;



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



}



.final-best-block {



    display: flex;



    flex-direction: column;



    align-items: center;



    margin-bottom: 20px;



}



.final-stats {



    display: flex;



    gap: 32px;



    margin-bottom: 24px;



}



.final-stat {



    display: flex;



    flex-direction: column;



    align-items: center;



}



.final-stat-num {



    font-size: 24px;



    font-weight: 800;



}



.final-stat-label {



    font-size: 11px;



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



    text-transform: uppercase;



    letter-spacing: 0.5px;



}



.gameover-back {



    margin-top: 16px;



}







/* ---- Pause Settings ---- */



.pause-settings {



    margin-top: 16px;



    justify-content: center;



}







/* ---- Footer ---- */



.game-footer {



    margin-top: 24px;



    font-size: 11px;



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



    letter-spacing: 0.5px;



    font-weight: 500;



}



.game-footer a {



    color: inherit;



    text-decoration: none;



}







/* ---- Drag Ghost ---- */



#drag-ghost {



    position: fixed;



    z-index: 1000;



    pointer-events: none;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    width: 60px;



    height: 60px;



    border-radius: 14px;



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



    border: 2px solid var(--gp-accent);



    box-shadow: 0 4px 24px rgba(255, 217, 61, 0.3);



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



    opacity: 0;



    transition: opacity 100ms;



}



#drag-ghost.visible {



    opacity: 1;



}



#drag-ghost .weight-emoji {



    font-size: 24px;



    line-height: 1;



}



#drag-ghost .weight-label {



    font-size: 10px;



    font-weight: 800;



    color: var(--gp-accent);



}







/* ---- Level Intro Animation ---- */



@keyframes level-enter {



    from { opacity: 0; transform: scale(0.9); }



    to { opacity: 1; transform: scale(1); }



}



#screen-game.active {



    animation: level-enter 0.3s ease;



}







/* ---- Balanced Flash ---- */



@keyframes balanced-flash {



    0%, 100% { box-shadow: none; }



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



}







/* ---- Safe Area ---- */



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



    #game-header {



        padding-top: calc(10px + env(safe-area-inset-top));



    }



}







/* ---- Desktop Frame ---- */



@media (min-width: 421px) {



    body {



        display: flex;



        align-items: center;



        justify-content: center;



        background: #080620;



    }



    #app {



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



        box-shadow: 0 0 60px rgba(30, 20, 80, 0.5);



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



        max-height: 900px;



    }



}