:root {
    --bg: #1e1e2e; --panel: #2a2a3a; --text: #fff;
    --red: #ff4444; --blue: #4488ff; --gold: #ffd700;
    --green: #2ecc71;
    --font-header: 'Luckiest Guy', cursive;
    --font-body: 'Nunito', sans-serif;
    --tile-bg: #f4e1d2; --tile-text: #333;
}

* { box-sizing: border-box; touch-action: manipulation; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); overflow: hidden; width: 100vw; height: 100dvh; overscroll-behavior: none;}

.hidden { display: none !important; }
.hidden-ui { display: none; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0;}

.text-gold { color: var(--gold); } .text-aaa { color: #aaa; }
.fs-30 { font-size: 3rem; font-family: var(--font-header); letter-spacing: 1px; }
.fs-12 { font-size: 1.2rem; }
.mb-20 { margin-bottom: 20px; } .mt-20 { margin-top: 20px; }
.w-200 { width: 200px; } .w-100 { width: 100px; } .flex-1 { flex: 1; }
.fw-bold { font-weight: bold; } .bg-overlay { background: rgba(0,0,0,0.9); }

h1, h2, h3 { font-family: var(--font-header); letter-spacing: 1px; margin:0; }

.login-container { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.input-box { padding: 15px; font-size: 1.5rem; font-family: var(--font-body); border-radius: 10px; border: 2px solid #555; background: #333; color: white; text-align: center; width: 80%; max-width: 300px; margin-bottom: 20px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; }
.input-box:focus { outline: none; border-color: var(--gold); }
.emoji-btn { cursor: pointer; opacity: 0.4; transition: transform 0.2s; padding-bottom: 5px; user-select: none; }
.emoji-btn.selected { opacity: 1; transform: scale(1.3); border-bottom: 3px solid var(--gold); }

.btn { padding: 0 10px; height: 50px; font-size: clamp(0.9rem, 2vh, 1.2rem); border: none; border-radius: 50px; font-weight: bold; cursor: pointer; transition: transform 0.1s; color: white; display: flex; align-items: center; justify-content: center; font-family: var(--font-header); letter-spacing: 1px; flex-shrink: 0;}
.btn:active { transform: scale(0.95); }
.btn-gold { background: var(--gold); color: black; } .btn-green { background: var(--green); } .btn-blue { background: var(--blue); } .btn-orange { background: #ff9800; }

/* IRONCLAD HOST LAYOUT (20 / 80 SPLIT) */
body.host { display: flex; flex-direction: row; height: 100dvh; overflow: hidden; width: 100vw; }
.sidebar { flex: 0 0 clamp(200px, 25vw, 250px); background: var(--panel); border-right: 2px solid #444; padding: 15px; display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; position: relative; z-index: 20; box-sizing:border-box;}
.board-container { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-width: 0; background: #111; z-index: 10; }
.grid-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; min-height: 0; width: 100%;}

/* 30x30 TV GRID */
.grid-view { display: grid; grid-template-columns: repeat(30, 1fr); grid-template-rows: repeat(30, 1fr); aspect-ratio: 1; height: 100%; max-width: 100%; border: 2px solid #555; background: #000; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
.cell { border: 1px solid #222; display: flex; align-items: center; justify-content: center; font-weight: 900 !important; font-family: var(--font-body) !important; font-size: clamp(0.5rem, 2vmin, 1.2rem); color: #444; position: relative; text-transform: uppercase !important; }

/* COLOR CODED WARFARE TILES */
.cell.team-a { background: #800000; color: white; border: 1px solid #ff4444; box-shadow: inset 0 0 10px rgba(255,0,0,0.5); }
.cell.team-b { background: #000080; color: white; border: 1px solid #4488ff; box-shadow: inset 0 0 10px rgba(0,0,255,0.5); }
.cell.team-sys { background: #444; color: #ffd700; border: 1px solid #888; }
.cell.staged { background: var(--gold) !important; color: black !important; border: 2px solid white !important; z-index: 10; font-size: clamp(1rem, 3vmin, 1.5rem) !important;}

/* SMART DROP CURSOR HIGHLIGHTS */
.cell.cursor-highlight { background: rgba(255,215,0,0.3); border: 2px solid var(--gold); z-index: 5; }
.cell.cursor-h { border-right: 4px solid var(--gold); }
.cell.cursor-v { border-bottom: 4px solid var(--gold); }

.cell-score { position: absolute; bottom: 0; right: 1px; font-size: 0.4em; color: rgba(255,255,255,0.6); }
.fs-btn { position: absolute; top: 10px; left: 10px; background: none; border: 1px solid #555; color: #aaa; width: 40px; height: 40px; border-radius: 8px; font-size: 1.5rem; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; }

.sudden-death-glow { animation: red-alert 1s infinite alternate; }
@keyframes red-alert { 0% { box-shadow: inset 0 0 0px red; } 100% { box-shadow: inset 0 0 150px red; } }

/* PLAYER UI - FLUID DYNAMIC FIX */
body.player { position: relative; height: 100dvh; width: 100vw; overflow: hidden; display: flex; flex-direction: column;}
.rack-area { flex: 0 0 80px; background: var(--panel); display: flex; align-items: center; justify-content: center; gap: clamp(2px, 1vw, 5px); padding: 5px; border-bottom: 2px solid #444; z-index: 20; width: 100%; box-sizing: border-box;}
.map-area { flex: 1; background: #000; touch-action: none; overflow: hidden; z-index: 10; position: relative; width: 100%; min-height: 0;}
.map-content { transform-origin: 0 0; position: absolute; }
.map-size-large { width: 1200px; height: 1200px; } 

.controls-area { flex: 0 0 auto; background: var(--panel); padding: 10px; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid #444; z-index: 20; width: 100%; box-sizing: border-box;}
.battle-log { flex: 0 0 auto; height: 40px; background: #111; border-top: 1px solid #444; display: flex; align-items: center; padding: 0 10px; overflow: hidden; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #aaa; z-index: 20; width: 100%; box-sizing: border-box; padding-bottom: max(0px, env(safe-area-inset-bottom));}

.tile { width: clamp(35px, 12vw, 45px); height: clamp(35px, 12vw, 45px); background: var(--tile-bg); color: var(--tile-text); font-weight: 900 !important; font-family: var(--font-body) !important; font-size: clamp(1rem, 4vw, 1.4rem); display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 3px 0 #cbb; position: relative; text-transform: uppercase !important; cursor: pointer; transition: 0.1s; flex-shrink: 0;}
.tile.selected { border: 3px solid var(--gold); transform: scale(1.1); box-shadow: 0 5px 10px rgba(0,0,0,0.5); }
.tile-score { position: absolute; bottom: 2px; right: 3px; font-size: 0.5rem; color: #555; }

.coord-row { display: flex; justify-content: space-between; align-items: center; color: #aaa; font-size: 0.9rem; font-weight:bold; }
.coord-val { color: var(--gold); font-weight: bold; font-family: var(--font-body); font-size: clamp(1rem, 3vw, 1.2rem); letter-spacing: 1px; }
.action-row { display: flex; gap: 10px; width: 100%; align-items: center; }
.log-entry { animation: slideIn 0.3s ease-out; white-space: nowrap; font-weight: bold; }
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.orientation-warning { position: fixed; inset: 0; background: var(--bg); z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.orientation-warning h1 { font-size: 5rem; margin: 0 0 20px 0; } .orientation-warning h2 { font-size: 2rem; color: var(--gold); font-family: var(--font-header); }
@media (orientation: portrait) { body.host #landscape-warning { display: flex !important; } body.host .host-ui-wrap { display: none !important; } }