:root { --bg-color: #1e293b; --text-color: #f8fafc; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); overflow: hidden; display: flex; justify-content: center; align-items: center; }
#loading { color: #94a3b8; font-size: 1.2rem; font-weight: bold; text-align: center; line-height: 1.5; padding: 20px;}
#game-container { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#revealed-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease-in-out; z-index: 1; pointer-events: none; background-color: #0f172a; }
#revealed-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8)); z-index: -1; }
#revealed-image { max-width: 80%; max-height: 60vh; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); margin-bottom: 2rem; border: 4px solid rgba(255, 255, 255, 0.2); display: none; }
#revealed-title { color: white; font-size: 3rem; font-weight: bold; text-shadow: 2px 4px 8px rgba(0,0,0,0.8); text-align: center; margin: 0; padding: 0 20px; }
#map-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transition: background-color 0.4s; }
svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); }
.province { stroke: #ffffff; stroke-width: 1px; cursor: grab; transition: filter 0.2s, fill-opacity 0.4s; }
.province:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.5)); stroke-width: 2px; }
.province:active, .province.dragging { cursor: grabbing; stroke: #fff; stroke-width: 2.5px; filter: brightness(1.3) drop-shadow(0 20px 25px rgba(0,0,0,0.6)); z-index: 100; }
.map-faded .province:not(.dragging) { fill-opacity: 0.3; stroke-opacity: 0.3; }
#tooltip { position: absolute; background: rgba(15, 23, 42, 0.9); color: white; padding: 8px 16px; border-radius: 8px; font-weight: bold; font-size: 1rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 30; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); }