:root {
    --neon-blue: #00f3ff;
    --neon-pink: #ff00ea;
    --dark-bg: #0b0c10;
    --panel-bg: rgba(11, 12, 16, 0.85);
    --text: #ffffff;
}

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

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through if not on a panel */
}

/* Make UI elements clickable */
.panel, button, input {
    pointer-events: auto;
}

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
    border-radius: 8px;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.hidden {
    display: none !important;
}

/* Login Screen */
#login-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    text-align: center;
}

#login-screen h1 {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
    margin-top: 0;
}

input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    outline: none;
}

input:focus {
    box-shadow: 0 0 5px var(--neon-blue);
}

button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    background: transparent;
    color: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

button:hover {
    background: var(--neon-blue);
    color: black;
    box-shadow: 0 0 10px var(--neon-blue);
}

button:disabled {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
    background: transparent;
    box-shadow: none;
}

.row {
    display: flex;
    gap: 10px;
}
.row input { width: 60%; }
.row button { width: 40%; }

/* Game UI */
#game-ui {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 250px;
}

#room-info {
    font-weight: bold;
    color: var(--neon-pink);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-pink);
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.toggle-btn.active {
    background: var(--neon-blue);
    color: black;
}

/* Ludo UI */
#ludo-ui {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 300px;
}

#turn-indicator {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

#dice-result {
    font-size: 2em;
    font-weight: bold;
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
    margin: 10px 0;
}

#gravity-event {
    color: var(--neon-blue);
    font-style: italic;
    min-height: 20px;
}

/* Chat Panel */
#chat-panel {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 5px;
    font-size: 0.9em;
}

.chat-msg { margin-bottom: 5px; word-break: break-word; }
.chat-time { color: #888; font-size: 0.8em; margin-right: 5px; }
.chat-user { font-weight: bold; color: var(--neon-blue); margin-right: 5px; }

.chat-input-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

#chat-input { margin: 0; width: 70%; flex-grow: 1; }
#btn-send-chat { margin: 0; width: 30%; flex-basis: 60px; }

/* Video Grid */
#video-grid {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.video-container {
    position: relative;
    width: 150px;
    height: 112px;
    background: #000;
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    overflow: hidden;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 0.8em;
    text-align: center;
    padding: 2px 0;
}

/* Crosshair for 3D navigation */
#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(0, 243, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    display: none;
}

/* Instructions overlay */
#instructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0,0,0,0.8);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--neon-blue);
    color: white;
    display: none;
    pointer-events: none;
    z-index: 100;
}

@media (max-width: 768px) {
    #chat-panel { width: 200px; height: 200px; bottom: 10px; right: 10px; }
    #video-grid { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; }
    .video-container { width: 100px; height: 75px; }
    #game-ui { width: 200px; }
}