/* =====================================================
   MAJÓWKA 2026 - 3D CAMPFIRE SCENE
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: 'Press Start 2P', monospace;
}

/* =====================================================
   CANVAS
   ===================================================== */

#scene-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

#scene-canvas:active {
    cursor: grabbing;
}

/* =====================================================
   LOADING SCREEN
   ===================================================== */

#loading-screen {
    position: fixed;
    inset: 0;
    background: #0a0a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 1.5s ease-out;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-text {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2vw, 18px);
    color: #ff8844;
    margin-bottom: 30px;
    animation: loaderPulse 1s ease-in-out infinite alternate;
}

@keyframes loaderPulse {
    from { opacity: 0.5; text-shadow: 0 0 10px rgba(255,100,0,0.3); }
    to   { opacity: 1;   text-shadow: 0 0 30px rgba(255,100,0,0.8); }
}

.loader-bar {
    width: clamp(200px, 50vw, 400px);
    height: 8px;
    background: #222;
    border: 2px solid #ff6600;
    overflow: hidden;
}

.loader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff4400, #ffcc00);
    transition: width 0.3s;
}

/* =====================================================
   HUD OVERLAY
   ===================================================== */

#hud {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-in 1s;
}

#hud.visible {
    opacity: 1;
}

.title-3d {
    font-size: clamp(16px, 3.5vw, 36px);
    color: #ffdd66;
    text-shadow:
        4px 4px 0 #cc6600,
        -2px -2px 0 #aa4400,
        0 0 30px rgba(255,180,0,0.6),
        0 0 60px rgba(255,100,0,0.3);
    letter-spacing: 3px;
    animation: titleGlow 3s ease-in-out infinite alternate;
    white-space: nowrap;
}

.subtitle-3d {
    font-size: clamp(6px, 1.2vw, 11px);
    color: #ff8844;
    margin-top: 10px;
    text-shadow: 2px 2px 0 #882200, 0 0 15px rgba(255,100,0,0.4);
    white-space: nowrap;
}

@keyframes titleGlow {
    0%   { text-shadow: 4px 4px 0 #cc6600, 0 0 20px rgba(255,180,0,0.5); }
    100% { text-shadow: 4px 4px 0 #cc6600, 0 0 40px rgba(255,180,0,0.9), 0 0 80px rgba(255,80,0,0.4); }
}

/* =====================================================
   PRESET PANEL
   ===================================================== */

#preset-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
}

#preset-toggle {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 10px 16px;
    background: rgba(0,0,0,0.7);
    color: #ffcc00;
    border: 2px solid #ff6600;
    cursor: pointer;
    transition: all 0.2s;
}

#preset-toggle:hover {
    background: rgba(255,80,0,0.3);
}

#preset-list {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(0,0,0,0.85);
    border: 2px solid #ff6600;
    display: flex;
    flex-direction: column;
}

#preset-list.hidden {
    display: none;
}

#preset-list::-webkit-scrollbar { width: 6px; }
#preset-list::-webkit-scrollbar-track { background: #111; }
#preset-list::-webkit-scrollbar-thumb { background: #ff6600; }

.preset-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 8px 10px;
    background: transparent;
    color: #ffaa44;
    border: none;
    border-bottom: 1px solid #331100;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s;
}

.preset-btn:hover {
    background: rgba(255,80,0,0.25);
    color: #ffee66;
}

.preset-btn.active {
    background: rgba(255,80,0,0.4);
    color: #ffffff;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    #preset-panel { bottom: 10px; right: 10px; }
    #preset-toggle { font-size: 8px; padding: 8px 12px; }
    #preset-list { width: 220px; max-height: 40vh; }
    .preset-btn { font-size: 6px; padding: 6px 8px; }
}

/* =====================================================
   CONTROLS HINT
   ===================================================== */

#controls-hint {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 200;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.8;
    color: rgba(255, 170, 68, 0.7);
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-in 3s;
}

#controls-hint.visible {
    opacity: 1;
}

#controls-hint .hint-line {
    margin-bottom: 2px;
}

#fire-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ff6600;
    text-shadow: 0 0 20px rgba(255, 80, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 300;
}

#fire-indicator.show {
    opacity: 1;
}

@media (max-width: 768px) {
    #controls-hint {
        bottom: 10px;
        left: 10px;
        font-size: 5px;
    }
}

/* =====================================================
   REGISTRATION BUTTON (matches preset style)
   ===================================================== */

#reg-panel {
    opacity: 1;
    pointer-events: auto;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

#reg-panel.visible {
    opacity: 1;
    pointer-events: auto;
}

#reg-toggle {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 10px 16px;
    background: rgba(0,0,0,0.7);
    color: #ffcc00;
    border: 2px solid #ff6600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

#reg-toggle:hover {
    background: rgba(255,80,0,0.3);
    box-shadow: 0 0 15px rgba(255,80,0,0.3);
}

/* =====================================================
   REGISTRATION FORM OVERLAY
   ===================================================== */

#reg-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(5, 5, 20, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    backdrop-filter: blur(6px);
}

#reg-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

#reg-form-container {
    position: relative;
    width: clamp(300px, 85vw, 480px);
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(15, 12, 30, 0.95);
    border: 2px solid #ff6600;
    border-radius: 4px;
    padding: 30px 25px;
    box-shadow: 0 0 40px rgba(255, 80, 0, 0.25), inset 0 0 30px rgba(0,0,0,0.5);
    transform: translateY(40px);
    transition: transform 0.5s ease;
}

#reg-overlay.visible #reg-form-container {
    transform: translateY(0);
}

.reg-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 18px;
    color: #ff6600;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
}

.reg-close:hover {
    color: #ffcc00;
    transform: scale(1.2);
}

.reg-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(10px, 2vw, 16px);
    color: #ffdd66;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 2px 2px 0 #882200, 0 0 20px rgba(255,100,0,0.4);
    line-height: 1.6;
}

.reg-field {
    margin-bottom: 18px;
}

.reg-field label {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(6px, 1.1vw, 9px);
    color: #ff8844;
    margin-bottom: 6px;
    text-shadow: 1px 1px 0 #000;
}

.reg-field input[type="text"],
.reg-field textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(7px, 1.2vw, 10px);
    color: #ffe0aa;
    background: rgba(30, 20, 10, 0.8);
    border: 2px solid #663300;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.reg-field input[type="text"]:focus,
.reg-field textarea:focus {
    border-color: #ff6600;
    box-shadow: 0 0 12px rgba(255, 80, 0, 0.3);
}

.reg-field textarea {
    resize: vertical;
    min-height: 60px;
}

.reg-field input[type="file"] {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(6px, 1vw, 8px);
    color: #ffaa44;
    cursor: pointer;
}

.reg-field input[type="file"]::file-selector-button {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(6px, 1vw, 8px);
    padding: 6px 12px;
    background: rgba(255, 80, 0, 0.2);
    color: #ffcc00;
    border: 1px solid #ff6600;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.2s;
}

.reg-field input[type="file"]::file-selector-button:hover {
    background: rgba(255, 80, 0, 0.4);
}

.reg-avatar-preview {
    margin-top: 8px;
    width: 80px;
    height: 80px;
    border: 2px dashed #663300;
    border-radius: 2px;
    background: rgba(20, 15, 5, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    image-rendering: pixelated;
}

.reg-avatar-preview.has-image {
    display: flex;
}

.reg-avatar-preview img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.reg-submit {
    display: block;
    width: 100%;
    padding: 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 1.4vw, 12px);
    color: #ffee66;
    background: linear-gradient(180deg, rgba(255,80,0,0.35), rgba(180,40,0,0.35));
    border: 2px solid #ff6600;
    border-radius: 2px;
    cursor: pointer;
    text-shadow: 1px 1px 0 #882200;
    transition: all 0.3s;
    margin-top: 10px;
}

.reg-submit:hover {
    background: linear-gradient(180deg, rgba(255,100,0,0.55), rgba(200,60,0,0.55));
    box-shadow: 0 0 20px rgba(255, 80, 0, 0.4);
    transform: translateY(-1px);
}

.reg-submit:active {
    transform: translateY(1px);
}

.reg-success {
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(8px, 1.4vw, 12px);
    color: #88ff88;
    text-shadow: 0 0 15px rgba(80, 255, 80, 0.4);
    padding: 20px;
    line-height: 2;
}

.reg-success.hidden {
    display: none;
}

/* Scrollbar for form container */
#reg-form-container::-webkit-scrollbar { width: 5px; }
#reg-form-container::-webkit-scrollbar-track { background: #111; }
#reg-form-container::-webkit-scrollbar-thumb { background: #ff6600; }

@media (max-width: 768px) {
    #reg-form-container {
        padding: 20px 16px;
    }
    .reg-title {
        font-size: 10px;
    }
    #reg-panel {
    opacity: 1;
    pointer-events: auto;
        bottom: 12px;
    }
    #reg-toggle {
        font-size: 8px;
        padding: 8px 12px;
    }
}

/* =================== ADMIN PANEL =================== */
#admin-btn { position:fixed; bottom:12px; left:12px; z-index:500; }
#admin-btn button {
    font-family:"Press Start 2P",monospace; font-size:9px;
    background:rgba(6,6,20,0.85); color:#ff8844; border:1px solid #ff6600;
    padding:8px 14px; cursor:pointer; transition:all .3s;
}
#admin-btn button:hover { background:#ff6600; color:#000; }

#list-btn { position:fixed; bottom:12px; left:140px; z-index:500; }
#list-btn button {
    font-family:"Press Start 2P",monospace; font-size:9px;
    background:rgba(6,6,20,0.85); color:#ffd080; border:1px solid #ff6600;
    padding:8px 14px; cursor:pointer; transition:all .3s;
}
#list-btn button:hover { background:#ff6600; color:#000; }

.panel-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.92);
    z-index:2000; display:none; align-items:center; justify-content:center;
    opacity:0; transition:opacity .4s;
}
.panel-overlay.show { display:flex; opacity:1; }

.panel-box {
    background:#0a0a18; border:2px solid #ff6600; max-width:900px; width:95%;
    max-height:85vh; overflow-y:auto; padding:24px; position:relative;
}
.panel-box::-webkit-scrollbar { width:5px; }
.panel-box::-webkit-scrollbar-track { background:#111; }
.panel-box::-webkit-scrollbar-thumb { background:#ff6600; }

.panel-close {
    position:absolute; top:10px; right:14px; font-size:20px;
    color:#ff6600; cursor:pointer; z-index:10;
}
.panel-close:hover { color:#fff; }

.panel-title {
    font-family:"Press Start 2P",monospace; font-size:clamp(10px,2vw,16px);
    color:#ffdd66; text-align:center; margin-bottom:16px;
}

.pw-form { text-align:center; margin:30px 0; }
.pw-form input {
    font-family:"Press Start 2P",monospace; font-size:10px;
    background:#111; color:#ffd080; border:1px solid #555;
    padding:10px 16px; width:200px; text-align:center;
}
.pw-form input:focus { border-color:#ff6600; outline:none; }
.pw-form button {
    font-family:"Press Start 2P",monospace; font-size:9px;
    background:#ff6600; color:#000; border:none;
    padding:10px 18px; cursor:pointer; margin-left:8px;
}
.pw-form .pw-error { color:#ff4444; font-size:8px; margin-top:8px; font-family:"Press Start 2P",monospace; }

.reg-table { width:100%; border-collapse:collapse; font-family:"Press Start 2P",monospace; font-size:8px; }
.reg-table th { background:#1a1200; color:#ffcc00; padding:8px 6px; text-align:left; border-bottom:2px solid #ff6600; }
.reg-table td { padding:8px 6px; color:#ddd; border-bottom:1px solid #222; vertical-align:middle; }
.reg-table tr:hover { background:rgba(255,102,0,0.08); }
.reg-table img.av { width:36px; height:36px; object-fit:cover; border-radius:4px; border:1px solid #444; }

.admin-actions button {
    font-family:"Press Start 2P",monospace; font-size:7px;
    padding:4px 8px; cursor:pointer; border:1px solid; margin:2px;
}
.btn-edit { background:none; color:#44aaff; border-color:#44aaff; }
.btn-edit:hover { background:#44aaff; color:#000; }
.btn-del { background:none; color:#ff4444; border-color:#ff4444; }
.btn-del:hover { background:#ff4444; color:#000; }

.edit-row input, .edit-row textarea {
    font-family:monospace; font-size:11px; background:#111;
    color:#ffd080; border:1px solid #555; padding:4px 6px; width:100%;
}
.btn-save { background:none; color:#44ff88; border-color:#44ff88; }
.btn-save:hover { background:#44ff88; color:#000; }
.btn-cancel { background:none; color:#999; border-color:#666; }

@media (max-width:768px) {
    .reg-table { font-size:7px; }
    .reg-table th, .reg-table td { padding:5px 3px; }
    #list-btn { left:12px; bottom:48px; }
}