:root { --bg:#050505; --text:#fff; --primary:#facc15; --card-bg:#1a1a1a; --border:#333; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body { 
    margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg); color: var(--text); 
    height: 100dvh; overflow: hidden; 
    display: flex; justify-content: center; 
}

.app-container { width: 100%; max-width: 600px; height: 100%; display: flex; flex-direction: column; position: relative; }
.hidden { display:none !important; }
.view { flex:1; display:flex; flex-direction:column; width:100%; height:100%; }

/* --- LOGIN SCREEN --- */
.center-content { margin:auto; text-align:center; padding:30px; width:100%; max-width:400px; }
.input { width:100%; padding:15px; font-size:18px; border-radius:12px; border:1px solid var(--border); background:#222; color:white; margin-bottom:15px; text-align:center; outline:none; }
.btn { width:100%; padding:15px; font-size:16px; font-weight:bold; border-radius:12px; border:none; cursor:pointer; background:#333; color:white; transition:0.1s; display:block; }
.btn-primary { background:var(--primary); color:black; }
.btn:active { transform:scale(0.98); }

/* Toggle Switch */
.toggle-wrapper { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; color:#aaa; font-size:14px; }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(22px); }

/* --- GAME UI --- */
.game-layout { display: flex; flex-direction: column; height: 100%; }

/* 1. Timer Bar (Top) */
.timer-container { padding: 10px 20px; background: #000; flex-shrink: 0; }
.timer-track { width: 100%; height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
.timer-bar { height: 100%; background: var(--primary); width: 0%; transition: width 0.1s linear; }

/* 2. Cards Area (Middle) */
.card-area { 
    flex: 1; overflow-y: auto; 
    padding: 15px; 
    display: flex; flex-direction: column; gap: 10px; 
    justify-content: center; /* Center vertically if few cards */
}

.word-row { 
    background: var(--card-bg); 
    padding: 15px 20px; border-radius: 12px; 
    display: flex; align-items: center; justify-content: space-between; 
    border-left: 6px solid #444; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.word-row.cat-1 { border-color: #3b82f6; } /* Person */
.word-row.cat-2 { border-color: #ef4444; } /* Place */
.word-row.cat-3 { border-color: #22c55e; } /* Object */
.word-row.cat-4 { border-color: #f97316; } /* Action */
.word-row.cat-5 { border-color: #a855f7; } /* Nature */

.cat-label { font-size: 11px; text-transform: uppercase; color: #888; font-weight: bold; margin-bottom: 2px; }
.word-text { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.sub-text { font-size: 13px; color: #666; font-style: italic; }

/* 3. Bottom Controls (Portrait) */
.controls-bar { 
    padding: 20px; background: #000; flex-shrink: 0; 
    display: flex; flex-direction: column; gap: 10px; 
}
.big-btn { 
    height: 70px; font-size: 24px; text-transform: uppercase; 
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.admin-link { color: #444; text-decoration: none; font-size: 12px; text-align: center; margin-top: 10px; display: block; }


/* --- DASHBOARD LANDSCAPE LAYOUT --- */
@media (orientation: landscape) {
    .app-container { max-width: 900px; } /* Wider */
    
    .game-layout { 
        flex-direction: row; /* Side by Side */
        padding: 10px; gap: 15px;
    }
    
    /* LEFT: Cards (70%) */
    .card-area { 
        width: 70%; 
        padding: 0; 
        justify-content: center;
    }
    .word-row { padding: 10px 15px; margin-bottom: 0; } /* Slightly tighter */
    .word-text { font-size: 20px; }
    
    /* RIGHT: Dashboard (30%) */
    .dashboard-panel {
        width: 30%;
        display: flex; flex-direction: column; 
        gap: 15px;
        background: #111;
        border-radius: 15px;
        padding: 15px;
        border: 1px solid #333;
    }
    
    /* Move Timer & Buttons into Dashboard */
    .timer-container { padding: 0; background: transparent; margin-bottom: 10px; }
    
    /* Hide Portrait controls, show Landscape ones */
    .controls-bar { display: none; }
    
    .dash-btn {
        flex: 1; /* Grow to fill space */
        width: 100%;
        background: var(--primary); color: #000;
        font-weight: 900; font-size: 22px;
        border: none; border-radius: 10px;
        cursor: pointer;
    }
    .dash-btn:active { transform: scale(0.98); opacity: 0.9; }
    
    .dash-score {
        background: #222; color: #fff;
        padding: 10px; border-radius: 10px; text-align: center;
        font-family: monospace; font-size: 14px; color: #888;
    }
}

/* Helper to hide dashboard in portrait */
.dashboard-panel { display: none; }
@media (orientation: landscape) { .dashboard-panel { display: flex; } }