:root {
    --bg-color: #121212;
    --text-color: #ffffff;
    --accent-color: #3b82f6; /* Default Blue */
    --p1-color: #e63946; /* Red-ish */
    --p2-color: #4361ee; /* Blue-ish */
    --p1-bg-active: #2a1a1c;
    --p2-bg-active: #1a1e2e;
    --p1-bg-idle: #1a1a1a;
    --p2-bg-idle: #1a1a1a;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.15);
    --font-main: 'Outfit', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main Container - Responsive Layout */
.app-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row; /* Default to horizontal split (Landscape logic) */
}

/* Portrait Handling logic for mobile if strictly needed, 
   but user asked for horizontal use. 
   We will keep it responsive. If screen is narrow (portrait), switch to column?
   User said "mobile phone horizontally used", so we assume landscape orientation 
   even if physically portrait. But CSS row is best for Left/Right split.
   If strictly portrait (width < height), we might want Top/Bottom split.
*/
@media (max-aspect-ratio: 1/1) {
    .app-container {
        flex-direction: column;
    }
    .control-bar {
        width: 100% !important;
        height: 60px !important;
        flex-direction: row !important;
    }
}

/* Player Sections */
.player-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.4s ease, filter 0.3s ease;
    user-select: none;
    overflow: hidden;
}

#player1 {
    background-color: var(--p1-bg-idle);
    border-right: 1px solid rgba(255,255,255,0.05);
}

#player2 {
    background-color: var(--p2-bg-idle);
    border-left: 1px solid rgba(255,255,255,0.05);
}

/* Active State Styling */
.player-section.active {
    filter: brightness(1.2);
}

#player1.active {
    background-color: var(--p1-color);
}
#player2.active {
    background-color: var(--p2-color);
}

/* Timer Typography */
.timer {
    font-family: var(--font-mono);
    font-size: clamp(3rem, 15vw, 10rem);
    font-weight: 700;
    z-index: 2;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.player-section.active .timer {
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.player-section:not(.active) .timer {
    opacity: 0.6;
}

.status-label {
    margin-top: 10px;
    font-size: 1.2rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.key-hint {
    margin-top: 5px;
    font-size: 0.8rem;
    opacity: 0.3;
    display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
    .key-hint {
        display: block;
    }
}

/* Control Bar (Center) */
.control-bar {
    width: 80px;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 10;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.icon-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.icon-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.icon-btn.main-action {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    padding: 15px;
    transform: scale(1.1);
}

.icon-btn.main-action:hover {
    transform: scale(1.2);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
}

.hidden {
    display: none;
}

/* Modal Styling */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: #1e1e1e;
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 2px; /* For border gradient if needed */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 500;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.setting-group {
    margin-bottom: 20px;
}

.setting-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

.setting-group input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
    font-family: var(--font-mono);
}

.setting-group input:focus {
    outline: 2px solid var(--accent-color);
    border-color: transparent;
}

.divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 20px 0;
}

.key-bind-btn {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.3);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: background 0.2s;
}

.key-bind-btn:hover {
    background: rgba(255,255,255,0.1);
}

.key-bind-btn.listening {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: flex-end;
}

.primary-btn {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s;
}

.primary-btn:hover {
    filter: brightness(1.1);
}

/* Touch Ripple Effect */
.ripple-container {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}