* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070a; font-family: 'Segoe UI', 'DejaVu Sans', sans-serif; color: #cfd8e3; }
#cv { position: absolute; inset: 0; display: block; }

.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3, 5, 9, 0.88); z-index: 50; }
.panel { background: #10151d; border: 1px solid #2a3644; border-radius: 10px; padding: 34px 44px; text-align: center; box-shadow: 0 0 60px rgba(0,0,0,.8); min-width: 380px; }
.panel h1 { font-size: 44px; letter-spacing: 8px; color: #e8eef6; font-weight: 800; }
.panel h1 span { color: #4da6ff; }
.tag { color: #6c7d92; margin: 8px 0 22px; font-size: 13px; letter-spacing: 1px; }
input { background: #0a0e14; border: 1px solid #2a3644; color: #e8eef6; padding: 10px 12px; border-radius: 6px; font-size: 15px; width: 220px; margin: 4px 6px; text-align: center; }
input:focus { outline: none; border-color: #4da6ff; }
button { background: #1c2836; border: 1px solid #3a4d63; color: #cfe3f7; padding: 10px 18px; border-radius: 6px; font-size: 14px; cursor: pointer; letter-spacing: 1px; }
button:hover { background: #26374b; border-color: #4da6ff; }
button:disabled { opacity: 0.4; cursor: default; }
#btnCreate, #btnJoin { margin-top: 8px; }
.or { color: #44525f; margin: 10px 0; font-size: 12px; }
.err { color: #ff6b6b; min-height: 20px; margin-top: 14px; font-size: 13px; }
.roomcode { font-size: 20px; color: #9fb4cc; margin-bottom: 12px; letter-spacing: 3px; }
.roomcode b { color: #ffd24a; font-size: 26px; letter-spacing: 6px; }
#playerList { list-style: none; margin: 10px 0 18px; }
#playerList li { padding: 6px 0; font-size: 15px; }
#playerList li .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
#playerList li .you { color: #6c7d92; font-size: 11px; margin-left: 6px; }
#waitHint { color: #5b6b7d; font-size: 12px; margin-top: 12px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 26px; padding: 10px 16px; background: linear-gradient(rgba(6,9,13,.92), rgba(6,9,13,.55) 80%, transparent); z-index: 10; pointer-events: none; }
.res { font-size: 22px; font-weight: 700; color: #eef4fa; display: flex; align-items: baseline; gap: 6px; min-width: 120px; }
.res .ico { font-size: 18px; }
.res .mat { color: #4dd2ff; }
.res .en { color: #ffd24a; }
.res i { font-style: normal; font-size: 11px; color: #6c7d92; font-weight: 400; }
#walltimer { margin: 0 auto; font-size: 14px; letter-spacing: 2px; color: #8fa3ba; }
#walltimer b { font-size: 24px; color: #ffb64a; margin-left: 6px; font-variant-numeric: tabular-nums; }
#walltimer.danger b { color: #ff5d5d; }
#walltimer.down b { color: #ff5d5d; }
#playerchips { display: flex; gap: 10px; }
.chip { display: flex; align-items: center; gap: 6px; background: rgba(16,21,29,.85); border: 1px solid #2a3644; padding: 4px 10px; border-radius: 20px; font-size: 13px; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }
.chip.dead { opacity: 0.45; text-decoration: line-through; }

#buildmenu { position: absolute; right: 12px; top: 64px; width: 210px; background: rgba(13, 17, 24, 0.92); border: 1px solid #2a3644; border-radius: 8px; padding: 10px; z-index: 10; }
.bm-title { font-size: 11px; letter-spacing: 3px; color: #6c7d92; margin-bottom: 8px; }
.bb { display: flex; align-items: center; width: 100%; margin: 3px 0; padding: 8px 10px; font-size: 13px; background: #131b25; border: 1px solid #263447; border-radius: 5px; text-align: left; }
.bb b { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #1f2c3d; border: 1px solid #3a4d63; border-radius: 4px; margin-right: 8px; font-size: 11px; color: #9fc3e8; }
.bb .cost { margin-left: auto; font-size: 11px; color: #8b6f3a; }
.bb:hover { background: #1b2836; }
.bb.danger { border-color: #5c2b2b; color: #ffb0b0; }
.bb.danger:hover { background: #3a1d1d; border-color: #a04040; }
.bb.active { border-color: #4da6ff; background: #16283c; }
.bb.poor { opacity: 0.45; }
.bm-sep { height: 1px; background: #263447; margin: 8px 0; }
#factoryInfo { font-size: 11px; color: #7fd0ff; margin-top: 8px; }
#factoryInfo .fbar { height: 5px; background: #0a0e14; border-radius: 3px; margin-top: 4px; overflow: hidden; }
#factoryInfo .fbar div { height: 100%; background: #4da6ff; }

#minimap { position: absolute; left: 12px; bottom: 34px; background: #070a0e; border: 1px solid #2a3644; border-radius: 4px; z-index: 10; cursor: pointer; }

#flash { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-size: 52px; font-weight: 900; letter-spacing: 10px; color: #ff5d5d; text-shadow: 0 0 40px rgba(255, 60, 60, 0.7); opacity: 0; pointer-events: none; z-index: 30; transition: opacity 0.25s; }
#flash.show { opacity: 1; }

#toast { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background: rgba(30, 12, 12, 0.9); border: 1px solid #6b2c2c; color: #ffb0b0; padding: 8px 18px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 40; }
#toast.show { opacity: 1; }

#hintbar { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; color: #47576a; padding: 8px; background: linear-gradient(transparent, rgba(6,9,13,.8)); z-index: 9; letter-spacing: 0.5px; }

#overTitle.win { color: #ffd24a; }
#overTitle.lose { color: #ff5d5d; }