/* my colours = flag colours (red, green, black) */
body { font-family: Verdana, Tahoma, sans-serif; background:#fdfaf3; color:#222; margin:0; }
html[lang=ar] body { font-family: Tahoma, Arial, sans-serif; font-size:17px; }
header { background:#00732f; color:white; padding:15px 20px; border-bottom:6px solid #000; border-left:20px solid #ff0000; }
header h1 { margin:0 0 5px 0; font-size:26px; }
#langBtn { float:right; padding:6px 12px; font-size:16px; cursor:pointer; }
html[dir=rtl] #langBtn { float:left; }
html[dir=rtl] header { border-left:none; border-right:20px solid #ff0000; }
nav { padding:8px 20px; background:#eee; }
nav button, nav a { margin:3px; padding:5px 9px; border:1px solid #888; background:white; font:inherit; font-size:14px; cursor:pointer; color:#00732f; text-decoration:none; display:inline-block; }
nav button.on { background:#00732f; color:white; }
main { max-width:850px; margin:auto; padding:10px 20px; }
#decades a { margin:0 8px; color:#00732f; font-weight:bold; }
.decade h2 { border-bottom:2px dashed #999; color:#b00; }
.event { border-left:4px solid #00732f; margin:10px 0; padding:6px 10px; background:white; cursor:pointer; }
html[dir=rtl] .event { border-left:none; border-right:4px solid #00732f; }
.event:hover { background:#e8f5e9; }
.event b { color:#555; }
.hidden { display:none !important; }
#popup { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
.box { background:white; max-width:500px; margin:80px auto; padding:20px; border:3px solid #000; }
#closeBtn { float:right; }
html[dir=rtl] #closeBtn { float:left; }
.date { color:#888; }
.small { font-size:13px; color:#555; }
.note { background:#fffbe6; border:1px dashed #cc9; padding:8px; }
.mapwrap { border:2px solid #000; background:#d6eef8; }
svg { width:100%; height:auto; display:block; }
svg polygon { stroke:#333; stroke-width:1; cursor:pointer; }
svg polygon:hover { stroke-width:3; }
svg text { font-size:11px; font-family:Tahoma, sans-serif; pointer-events:none; }
.lf { cursor:pointer; }
.cols { display:flex; gap:20px; flex-wrap:wrap; }
.anthem { flex:1; min-width:260px; background:white; border:2px solid #00732f; padding:10px; line-height:2; text-align:center; }
#flagBox { flex:1; min-width:260px; }
.fc { border:2px solid #000; margin-bottom:8px; padding:8px; background:white; }
.fc span.sw { display:inline-block; width:24px; height:16px; border:1px solid #000; vertical-align:middle; }
#cards { display:flex; flex-wrap:wrap; gap:10px; }
.card { width:240px; background:white; border:2px solid #333; padding:10px; }
.card .big { font-size:24px; font-weight:bold; color:#b00; }
.card .big.now { color:#00732f; }
.q { background:white; border:1px solid #ccc; padding:8px; margin:8px 0; }
.q label { display:block; }
.right { background:#e8f5e9; } .wrong { background:#ffebee; }
.score { font-size:20px; font-weight:bold; }
textarea { width:100%; max-width:600px; font:inherit; }
footer { text-align:center; font-size:13px; padding:20px; color:#666; }

/* QA fixes oct 21: visible keyboard focus */
a:focus-visible, button:focus-visible, .event:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid #ff9800; outline-offset:2px; }
svg [tabindex]:focus { outline:none; stroke:#ff9800; stroke-width:4; }
#decades { line-height:2; }
/* timeline challenge */
#gList { padding:0; list-style:none; max-width:600px; }
.gcard { display:flex; align-items:center; gap:8px; background:white; border:2px solid #333; margin:6px 0; padding:6px 8px; }
.gcard .gtext { flex:1; }
.gcard .handle { cursor:grab; font-size:20px; padding:4px 6px; touch-action:none; user-select:none; color:#00732f; }
.gcard.dragging { opacity:0.6; border-style:dashed; }
.gbtns button { padding:4px 8px; margin:0 2px; cursor:pointer; }
#game > button { padding:6px 12px; font:inherit; cursor:pointer; }