* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin:0; background:#0f1115; color:#eee; display:flex; flex-direction:column; min-height:100vh; }
header, footer { background:#161a21; padding:0.75rem 1rem; display:flex; gap:1rem; align-items:center; }
header h1 { font-size:1.1rem; margin:0; flex:1; }
main { flex:1; display:grid; grid-template-columns: 2fr 3fr 2fr; gap:0.75rem; padding:0.75rem; }
.panel { background:#1d232c; padding:0.75rem; border:1px solid #2b3542; border-radius:6px; min-height:200px; }
#resources { display:grid; grid-template-columns:1fr; gap:0.4rem; font-size:0.8rem; }
.resource { display:flex; flex-direction:column; gap:0.15rem; }
.resource-label { display:flex; justify-content:space-between; font-weight:600; }
.bar { position:relative; height:12px; background:#2c3744; border-radius:4px; overflow:hidden; }
.bar-fill { position:absolute; top:0; left:0; height:100%; background:linear-gradient(90deg,#3a7bd5,#00d2ff); transition:width 0.4s; }
.bar.danger .bar-fill { background:linear-gradient(90deg,#d53a3a,#ff9800); }
#event-card { background:#222a33; border:1px solid #2d3947; padding:0.75rem; border-radius:6px; min-height:220px; display:flex; flex-direction:column; gap:0.5rem; }
#choices { display:flex; flex-direction:column; gap:0.5rem; }
.choice-btn { background:#2e3a47; border:1px solid #425467; padding:0.5rem 0.6rem; color:#eee; border-radius:4px; text-align:left; cursor:pointer; font-size:0.8rem; }
.choice-btn:hover { background:#3a4a59; }
#event-sources { margin-top:0.5rem; background:#202830; border:1px solid #2d3946; padding:0.4rem 0.6rem; border-radius:4px; }
#rival-counter { margin-top:0.5rem; background:#272f38; border:1px solid #394651; padding:0.5rem 0.6rem; border-radius:4px; font-size:0.65rem; display:flex; flex-direction:column; gap:0.35rem; }
#rival-counter h4 { margin:0 0 0.25rem 0; font-size:0.7rem; letter-spacing:0.5px; color:var(--accent,#3a7bd5); }
#counter-options { display:flex; flex-direction:column; gap:0.4rem; }
.counter-btn { background:#34414e; border:1px solid #4a5c6c; padding:0.4rem 0.5rem; border-radius:4px; color:#e4ecf2; text-align:left; cursor:pointer; font-size:0.65rem; }
.counter-btn:hover { background:#3d4d5b; }
#event-sources summary { cursor:pointer; font-weight:600; color:var(--accent,#3a7bd5); }
#event-sources ul { list-style:disc; margin:0.4rem 0 0 1.1rem; padding:0; display:flex; flex-direction:column; gap:0.25rem; }
#event-sources li { font-size:0.65rem; line-height:1.15; opacity:0.85; }
#nextTurnBtn { margin-top:0.75rem; padding:0.6rem 1rem; background:#3a7bd5; color:#fff; border:none; border-radius:4px; cursor:pointer; font-weight:600; }
#nextTurnBtn:disabled { background:#2c4d78; opacity:0.6; cursor:not-allowed; }
#log { font-size:0.7rem; }
#logList { list-style:none; padding:0; margin:0; display:flex; flex-direction:column-reverse; gap:0.35rem; max-height:70vh; overflow:auto; }
footer { gap:0.5rem; }
footer button { background:#2e3a47; color:#eee; border:1px solid #455567; padding:0.4rem 0.75rem; border-radius:4px; cursor:pointer; }
footer button:hover { background:#3b4b5a; }
@media (max-width: 1100px){ main { grid-template-columns:1fr; } #log { order:3; } }

/* Tooltips */
.gd-tooltip { position:fixed; z-index:1000; background:#12171d; border:1px solid #314557; padding:0.55rem 0.65rem; border-radius:6px; max-width:300px; font-size:0.68rem; line-height:1.2; box-shadow:0 4px 14px rgba(0,0,0,0.5); pointer-events:none; opacity:0; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease; }
.gd-tooltip.visible { opacity:1; transform:translateY(0); }
.gd-tooltip h4 { margin:0 0 0.25rem 0; font-size:0.72rem; color:#d6e7f5; }
.gd-tooltip .sources { margin-top:0.35rem; opacity:0.75; font-style:italic; }

/* Period Overlay */
.period-overlay { position:fixed; inset:0; background:radial-gradient(circle at 50% 45%, rgba(25,32,40,0.95), #040607 85%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1.5rem; gap:1rem; z-index:2000; animation:fadeIn .6s ease; }
.period-overlay h2 { font-size:2rem; margin:0; letter-spacing:1px; }
.period-overlay p { max-width:760px; font-size:0.9rem; line-height:1.4; margin:0 auto; }
.period-overlay button { background:#3a7bd5; border:none; padding:0.75rem 1.2rem; border-radius:6px; color:#fff; font-weight:600; cursor:pointer; }
.period-overlay button:hover { background:#2f6bbd; }
@keyframes fadeIn { from { opacity:0; transform:scale(1.02); } to { opacity:1; transform:scale(1); } }

/* Thematic palettes per period (body gets class) */
body.period-1500 { --accent:#b08d36; --bg:#12100b; --panel:#1d1910; }
body.period-1600 { --accent:#3a7bd5; --bg:#10151d; --panel:#1b2733; }
body.period-1700 { --accent:#8b5cf6; --bg:#140f1c; --panel:#231a31; }
body.period-1760 { --accent:#d5533a; --bg:#1a0f0f; --panel:#2a1816; }
body.period-1815 { --accent:#2fa37d; --bg:#0e1815; --panel:#152520; }
body.period-1870 { --accent:#d5b13a; --bg:#111111; --panel:#1f1f1f; }

body[class*="period-"] header, body[class*="period-"] footer { background:var(--panel); }
body[class*="period-"] .panel { background:var(--panel); border-color:rgba(255,255,255,0.06); }
body[class*="period-"] #nextTurnBtn { background:var(--accent); }
body[class*="period-"] .bar-fill { background:linear-gradient(90deg,var(--accent), #ffffff40); }
body[class*="period-"] a, body[class*="period-"] .choice-btn:hover { color:var(--accent); }

/* Map */
#map { position:relative; display:flex; flex-direction:column; gap:0.4rem; font-size:0.65rem; }
#worldMap { background:#182027; border:1px solid #2b3742; border-radius:4px; box-shadow:0 0 0 1px #202a33 inset; }
#worldMap path, #worldMap circle { transition:fill 0.6s, stroke 0.6s, opacity 0.6s; cursor:default; }
#worldMap path:hover, #worldMap circle:hover { stroke:#d1dee8; }
.map-legend { display:grid; grid-template-columns:1fr; gap:0.3rem; background:#202830; padding:0.4rem 0.5rem; border:1px solid #2d3946; border-radius:4px; }
.map-legend .swatch { display:inline-block; width:14px; height:10px; margin-right:6px; border-radius:2px; vertical-align:middle; }
.sw-power { background:linear-gradient(90deg,#273d55,#4f8ad8); }
.sw-gdp { background:linear-gradient(90deg,#342755,#8b5cf6); }
.sw-colony { background:linear-gradient(90deg,#3d2e1a,#d58b3a); }

/* Dynamic intensity classes applied via JS */
.intensity-0 { fill:#263038 !important; opacity:0.35; }
.intensity-1 { fill:#2e3c47 !important; }
.intensity-2 { fill:#365061 !important; }
.intensity-3 { fill:#3e667b !important; }
.intensity-4 { fill:#47809b !important; }
.intensity-5 { fill:#4f9bc0 !important; }
.intensity-gdp { fill:#4b3a69 !important; }
.intensity-gdp-high { fill:#8b5cf6 !important; }
.colony-low { fill:#3d2e1a !important; }
.colony-mid { fill:#8a5a22 !important; }
.colony-high { fill:#d58b3a !important; }