:root { --bg:#000; --app-bg:#121212; --text:#fff; --primary:#facc15; --danger:#ff4444; --success:#22c55e; }
* { box-sizing:border-box; user-select:none; -webkit-tap-highlight-color:transparent; }

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

.app-container {
    width: 100%; max-width: 800px; height: 100%;
    background: var(--app-bg); 
    display: flex; flex-direction: column;
    box-shadow: 0 0 40px rgba(255,255,255,0.05);
}

.hidden { display:none !important; }
.view { width:100%; height:100%; display:flex; flex-direction:column; }
.center-content { margin:auto; text-align:center; padding:30px; width:100%; }

/* --- TIME TOGGLE --- */
.time-selector {
    display: inline-flex; background: #333; 
    border-radius: 12px; padding: 4px; margin-top: 15px;
}
.time-btn {
    background: transparent; border: none; color: #aaa;
    padding: 10px 20px; font-size: 18px; font-weight: bold;
    border-radius: 8px; cursor: pointer;
}
.time-btn.active {
    background: var(--primary); color: #000;
}

/* --- HOME & RESULT MENU LAYOUT --- */
.menu-layout {
    display: flex; flex-direction: column;
    height: 100%; justify-content: center; align-items: center;
    padding: 30px; text-align: center;
}
.menu-left, .menu-right { width: 100%; }

/* --- GAME LAYOUT --- */
.top-bar { display:flex; padding:10px 20px; align-items:center; height:60px; gap:15px; flex-shrink: 0; }
.timer-track { flex: 1; height: 12px; background: #333; border-radius: 10px; overflow: hidden; position: relative; }
.timer-bar { height: 100%; background: var(--primary); width: 100%; transition: width 0.1s linear; }
.score-pill { font-size: 28px; font-weight: 800; color: var(--primary); min-width: 40px; text-align: right; }
.btn-icon { background:transparent; border:none; color:#666; font-size:24px; padding:0 10px; cursor:pointer; }

.game-flex {
    flex: 1; display: flex; 
    flex-direction: column; /* Default: Stacked */
    position: relative; overflow: hidden;
}

.word-area { 
    flex: 1; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; 
    text-align: center; padding: 10px; 
}
.category-pill { font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: #666; margin-bottom: 10px; }
.word-giant { font-size: 14vmin; font-weight: 900; line-height: 1.1; word-wrap: break-word; padding: 0 20px; }

.controls-area { padding: 20px; width: 100%; flex-shrink: 0; background: var(--app-bg); }
.action-grid { display: flex; gap: 15px; width: 100%; }

.btn-pass, .btn-correct {
    flex: 1; height: 75px; border-radius: 15px;
    font-size: 18px; text-transform: uppercase; font-weight: 800; border: none;
    cursor: pointer; transition: transform 0.1s;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.btn-pass { background: #3f1010; color: var(--danger); border: 2px solid var(--danger); }
.btn-correct { background: var(--success); color: #000; }
.btn-pass:active, .btn-correct:active { transform: scale(0.95); opacity: 0.8; }
.btn-svg { width: 28px; height: 28px; fill: currentColor; }

/* --- LANDSCAPE TRANSFORMATION --- */
@media (orientation: landscape) {
    .top-bar { height: 50px; padding: 5px 20px; }

    /* 1. Split Home/Result Screen */
    .menu-layout { flex-direction: row; gap: 40px; text-align: left; }
    .menu-left { flex: 1; text-align: right; display: flex; flex-direction: column; justify-content: center;}
    .menu-right { flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: center;}
    
    /* 2. Split Game Screen */
    .game-flex { flex-direction: row; }
    .word-area { width: 80%; padding: 20px; }
    .word-giant { font-size: 12vmin; } 

    .controls-area { 
        width: 140px; height: 100%; padding: 10px; 
        display: flex; align-items: center; border-left: 1px solid #333;
    }
    .action-grid { flex-direction: column; height: 100%; width: 100%; gap: 10px; }
    .btn-pass, .btn-correct { height: 100%; font-size: 14px; border-radius: 10px; }
    .btn-svg { width: 32px; height: 32px; }
}

/* UI Elements */
.input { width:100%; padding:15px; font-size:18px; border-radius:12px; border:1px solid #333; 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; }
.btn-primary { background:var(--primary); color:black; }
.btn-giant { padding:20px; font-size:24px; text-transform:uppercase; letter-spacing:1px; margin-top:20px; }
.final-score-num { font-size: 20vmin; font-weight: 900; color: var(--primary); margin: 20px 0; }
.status-box { padding:15px; background:#222; border-radius:12px; margin:20px 0; font-size:14px; color:#aaa; line-height:1.6; }