/*
Copyright (c) 2025, nDot.io - Ivan Honis | info@ndot.io
All rights reserved.


This software and its entire source code are protected by copyright law.
Without the prior explicit written permission of the author, it is
STRICTLY FORBIDDEN to:

- copy or reproduce this software or any part of it,
- modify, adapt, translate, or create derivative works based on it,
- distribute, publish, or make it available to the public in any form,
- use it for commercial or non-commercial purposes,
- incorporate it into any other software, product, or service.

This software is provided "as is", without any express or implied
warranty of any kind, including but not limited to fitness for a
particular purpose or merchantability. In no event shall the author
be liable for any claim, damages, or other liability arising from,
out of, or in connection with the software or the use or other
dealings in the software.
*/

:root {
    --bg-canvas: #000000;
    --ui-bg: rgba(255, 255, 255, 1);
    --ui-border: #e4e4e7;
    --text-dark: #18181b;
    --text-muted: #71717a;
    --orange-primary: #f97316;
    --orange-hover: #ea580c;
    --orange-dark: #c2410c;
    --green-text: #16a34a;
}

body {
    margin: 0;
    background-color: var(--bg-canvas);
    color: var(--text-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

#menuBtn {
    position: absolute;
    top: 15px;
    left: 18px;
    z-index: 60;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--orange-primary);
}

#menuBtn:hover {
    transform: scale(1.05);
    background: #fff;
}

#controls {
    position: absolute;
    top: 15px;
    left: 15px;
    display: none;
    background: var(--ui-bg);
    color: var(--text-dark);
    padding: 55px 15px 15px 15px;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--orange-primary);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 70;
    width: 245px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-panel-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 30px;
    padding: 0;
    margin: 0;
}

.close-panel-btn:hover {
    color: var(--orange-dark);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.control-group { margin-bottom: 24px; }

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.highlight-blue, .highlight-red { color: var(--orange-dark) !important; }

.current-value {
    color: var(--orange-dark);
    font-family: monospace;
    font-weight: bold;
    background: #f4f4f5;
    border: 1px solid #e4e4e7;
    padding: 3px 8px;
    border-radius: 4px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: #888;
}

.limit-label { min-width: 25px; text-align: center; color: #aaa; font-weight: 600; }
.sub-label { display: block; font-size: 8px; color: #ccc; margin-top: 2px; }

input[type=range] {
    flex-grow: 1; cursor: pointer; height: 6px;
    background: #e4e4e7; border-radius: 3px; appearance: none;
}
input[type=range]::-webkit-slider-thumb {
    appearance: none; width: 18px; height: 18px;
    background: #fff; border: 2px solid var(--orange-primary);
    border-radius: 50%; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
input[type=range]::-webkit-slider-thumb:hover {
    background: var(--orange-primary); transform: scale(1.1);
}
#stickiness, #bhMassInput { accent-color: var(--orange-primary); }

hr { border: 0; border-top: 1px solid #eee; margin: 20px 0; }

button {
    width: 100%; padding: 12px; margin-top: 8px;
    background: #fff; color: var(--orange-primary);
    border: 1px solid var(--orange-primary);
    border-radius: 6px; cursor: pointer; font-weight: 700;
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.2s;
    display: flex; justify-content: center; align-items: center;
}

.btn-icon { width: 18px; height: 18px; margin-right: 10px; stroke-width: 2; }

button:hover {
    background: var(--orange-primary); color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); transform: translateY(-1px);
}

button.share-btn, .modal-btn { background: var(--orange-primary); color: white; border: none; }
button.share-btn:hover, .modal-btn:hover { background: var(--orange-dark); color: white; }

button.energy {
    border-color: var(--orange-dark); color: var(--orange-dark);
    background: #fff5f0;
}
button.energy:hover {
    background: var(--orange-dark); color: white; border-color: var(--orange-dark);
}

#debug {
    font-size: 10px; color: #999; margin-top: 15px;
    font-family: monospace; text-align: center;
    border-top: 1px solid #eee; padding-top: 10px;
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px); z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}

.modal-box {
    background: #ffffff; color: var(--text-dark);
    padding: 30px;
    width: 90%;
    max-width: 420px;
    border-radius: 12px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    font-family: 'Segoe UI', sans-serif;
    border-top: 6px solid var(--orange-primary);
    margin: 0 15px;
}

.modal-box h1 {
    margin-top: 0; font-size: 24px;
    text-transform: uppercase; letter-spacing: 1px;
    color: black; margin-bottom: 20px; font-weight: 800;
}

.modal-box p { font-size: 15px; line-height: 1.6; color: #555; margin-bottom: 30px; }

span[style*="#80ff8c"] { color: var(--green-text) !important; font-weight: 800 !important; }

.modal-btn {
    background: var(--orange-primary); color: #fff;
    padding: 16px 32px; font-size: 15px; font-weight: 700;
    border-radius: 6px; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2); border: none;
}
.modal-btn:hover {
    background: var(--orange-hover); transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}

.hidden { display: none !important; }
#winModal h1 { color: var(--orange-dark); }
.share-modal-btn {
    background: transparent !important; border: 1px solid #ddd !important;
    color: #666 !important; margin-top: 15px; display: block; width: 100%;
}
.share-modal-btn:hover {
    border-color: var(--orange-primary) !important; color: var(--orange-primary) !important;
    background: transparent !important;
}

.tooltip { position: relative; display: inline-block; cursor: help; margin-left: 6px; }
.tooltip-icon {
    display: inline-flex; justify-content: center; align-items: center;
    width: 16px; height: 16px; background: #fff; color: var(--orange-primary);
    border-radius: 50%; font-size: 11px; font-weight: bold;
    font-family: monospace; border: 1px solid var(--orange-primary);
    transition: all 0.2s;
}
.tooltip:hover .tooltip-icon { background: var(--orange-primary); color: #fff; }
.tooltip-text {
    visibility: hidden; width: 240px; background-color: #ffffff;
    color: #444; text-align: left; border-radius: 6px; padding: 15px;
    position: absolute; z-index: 1000; top: 135%; left: 50%;
    transform: translateX(-15%); font-size: 11px; line-height: 1.5;
    border: 1px solid #eee; border-left: 3px solid var(--orange-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }

@media (max-width: 600px) {
    .tooltip {
        display: inline-block;
    }
    .tooltip-text {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 320px;
        background-color: #ffffff;
        z-index: 10000;
        box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.6);
        border: 2px solid var(--orange-primary);
    }
    .tooltip .tooltip-text::after {
        display: none;
    }
}

#brand-logo { position: absolute; bottom: 20px; left: 20px; z-index: 40; opacity: 0.6; }
.logo-link { font-size: 16px; font-weight: 700; color: #ffffff; text-decoration: none; transition: color 0.2s; }
.logo-accent { color: var(--orange-primary); }

button,
#energyBtn,
#menuBtn,
#shareBtn,
#restartBtn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

#energyBtn {
    position: absolute;
    top: 75px;
    left: 18px;
    z-index: 60;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--orange-primary);
    transition: all 0.2s;
}
#energyBtn:hover {
    transform: scale(1.05);
    background: #fff;
    color: var(--orange-dark);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
}
#energyBtn:active {
    transform: scale(0.95);
}

#shareBtn {
    position: absolute;
    top: 135px;
    left: 18px;
    z-index: 60;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: var(--orange-primary);
    transition: all 0.2s;
}
#shareBtn:hover {
    transform: scale(1.05);
    background: #fff;
    color: var(--orange-dark);
}

#restartBtn {
    position: absolute;
    top: 195px;
    left: 18px;
    z-index: 60;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 22px;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.2s;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#restartBtn:hover {
    transform: scale(1.05);
    background: #fff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}