/* World Human History — UI */
:root {
  --ink: #16202b; --ink2: #1e2a37; --ink3: #2a3848; --gold: #f0c14b; --gold2: #c9a13b;
  --paper: #fbf8f1; --paper2: #f3eee2; --txt: #1f2328; --mut: #6b6f76; --line: #e2dccd;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 10px 30px rgba(10, 20, 30, .25);
  --top-h: 116px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #d5dde2; font-family: var(--sans); color: var(--txt); }
button, input, select { font: inherit; }
svg { display: block; }
#map { position: absolute; inset: var(--top-h) 0 0 0; }

/* ---------- top bar ---------- */
#top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: #eee6d4;
  background: linear-gradient(180deg, #121b25 0%, #1a2632 100%); box-shadow: 0 4px 18px rgba(0,0,0,.35); border-bottom: 1px solid #0c131a; }
.bar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 14px; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; }
.brand:hover .logo { color: #f0c14b; }
.brand .logo { width: 30px; height: 30px; color: #e8dcc0; flex: none; }
.brand b { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; color: #f4ecd9; }
.brand small { display: block; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #9fb0bf; margin-top: -2px; }
.now { margin-left: 8px; min-width: 190px; text-align: center; }
#nowDate { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--gold); line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
#nowEra { font-size: 11px; color: #9fb0bf; letter-spacing: .4px; margin-top: 3px; white-space: nowrap; }
.datebox { display: flex; align-items: center; background: #0f1720; border: 1px solid #334456; border-radius: 9px; overflow: hidden; }
.datebox input { width: 200px; background: transparent; border: 0; color: #f3ead7; padding: 8px 10px; outline: none; font-size: 13.5px; }
.datebox input::placeholder { color: #7b8a99; }
.datebox input.bad { background: rgba(192, 57, 43, .25); }
.ib { width: 34px; height: 34px; border: 0; background: transparent; color: #e6dcc6; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.ib:hover { background: rgba(255,255,255,.08); }
.ib svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ib.play { background: var(--gold); color: #1a1a1a; width: 38px; height: 38px; border-radius: 50%; }
.ib.play:hover { background: #ffd566; }
.ib.play svg { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.ib.play .i-pause { display: none; } body.playing .ib.play .i-pause { display: block; } body.playing .ib.play .i-play { display: none; }
.transport { display: flex; align-items: center; gap: 4px; }
.transport select, .pop select { background: #0f1720; color: #e6dcc6; border: 1px solid #334456; border-radius: 7px; padding: 6px 6px; font-size: 12.5px; cursor: pointer; }
.tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tb { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid #334456; background: #1b2835; color: #eadfc8; border-radius: 8px; cursor: pointer; font-size: 13px; }
.tb:hover, .tb.on { background: #243546; border-color: #4b6178; }
.tb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; letter-spacing: .3px; }
.pill.on { background: rgba(46, 204, 113, .18); color: #7ee2a8; border: 1px solid rgba(46,204,113,.4); }
.pill.off { background: rgba(255,255,255,.07); color: #a9b4bf; border: 1px solid #3a4a5a; }

.tlwrap { display: flex; align-items: stretch; gap: 4px; padding: 0 10px 0 10px; height: 60px; }
#timeline { position: relative; flex: 1; min-width: 0; border-radius: 6px; overflow: visible; }
.tl-canvas { display: block; touch-action: none; }
.tlz { width: 26px; border: 1px solid #334456; background: #16212c; color: #d6cbb3; border-radius: 6px; cursor: pointer; font-size: 15px; padding: 0; }
.tlz:hover { background: #22303e; }
.tl-tip { position: absolute; top: 62px; background: #0c131a; color: #f0e6d0; font-size: 12px; padding: 5px 8px; border-radius: 6px; pointer-events: none; display: none; white-space: nowrap; z-index: 5; box-shadow: var(--shadow); }

/* ---------- map overlays ---------- */
.maptip { position: absolute; z-index: 5; pointer-events: none; display: none; background: rgba(251,248,241,.96); border: 1px solid var(--line); padding: 6px 9px; border-radius: 7px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-width: 280px; }
.maptip span { color: var(--mut); font-size: 11.5px; } .maptip i { color: #6b4e16; font-size: 12px; }
#loading { position: absolute; top: calc(var(--top-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 15; background: rgba(22,32,43,.9); color: #eadfc8; padding: 6px 14px 6px 10px; border-radius: 20px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
#loading span { width: 12px; height: 12px; border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 40; background: #16202b; color: #f3ead7; padding: 10px 16px; border-radius: 9px; font-size: 13px; box-shadow: var(--shadow); max-width: 80vw; }
#activeBar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 12; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 70vw; pointer-events: none; }
#activeBar button { pointer-events: auto; border: 0; border-radius: 18px; padding: 6px 12px 6px 9px; background: rgba(22,32,43,.9); color: #f3ead7; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 7px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
#activeBar button:hover { background: #22303e; }
#activeBar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.maplibregl-ctrl-group { border-radius: 9px !important; }
.maplibregl-ctrl-bottom-right { bottom: 6px; }

/* units & battles */
.unit { display: flex; align-items: center; gap: 5px; pointer-events: auto; cursor: pointer; transition: opacity .4s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.unit.ended { opacity: .55; }
.u-icon { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid #fff; display: grid; place-items: center; }
.u-icon svg { width: 19px; height: 19px; fill: #fff; }
.k-navy .u-icon { border-radius: 6px; }
.k-people .u-icon { border-radius: 40% 40% 50% 50%; }
.u-dir { position: absolute; inset: -9px; pointer-events: none; transition: transform .2s; }
.u-dir::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 8px solid var(--c); border-top: 0; }
.u-lab { background: rgba(251,248,241,.95); border-radius: 6px; padding: 3px 7px; font-size: 11.5px; line-height: 1.25; max-width: 190px; border-left: 3px solid var(--c, #333); }
.unit .u-lab { border-left-color: currentColor; }
.u-lab b { display: block; font-weight: 600; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-lab span { display: block; color: #555; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-lab em { display: block; color: #7a5a17; font-size: 10.5px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-lab em:empty { display: none; }
.battle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.b-icon { width: 24px; height: 24px; border-radius: 50%; background: #1d1d1d; border: 2px solid #f0c14b; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.b-icon svg { width: 15px; height: 15px; fill: #f0c14b; }
.b-lab { font-size: 11px; font-weight: 600; color: #1d1d1d; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; }
.b-lab span { font-weight: 400; margin-left: 5px; color: #6b4e16; }
.battle.fresh .b-icon { animation: blast 1s ease-out infinite; background: #b3261e; }
@keyframes blast { 0% { box-shadow: 0 0 0 0 rgba(240,80,40,.8); } 100% { box-shadow: 0 0 0 18px rgba(240,80,40,0); } }
.ev-badge { display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; }
.ev-badge .ev-dot { width: 14px; height: 14px; border-radius: 50%; background: #c0392b; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); position: relative; z-index: 1; }
.ev-badge .pulse { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: rgba(192,57,43,.5); animation: pulse 1.8s ease-out infinite; }
.ev-badge.t-migration .ev-dot { background: #1f8a70; } .ev-badge.t-migration .pulse { background: rgba(31,138,112,.5); }
.ev-badge.t-exploration .ev-dot { background: #7d3c98; } .ev-badge.t-exploration .pulse { background: rgba(125,60,152,.5); }
.ev-badge.t-colonization .ev-dot { background: #2e86c1; } .ev-badge.t-colonization .pulse { background: rgba(46,134,193,.5); }
.ev-badge.t-conquest .ev-dot { background: #d35400; } .ev-badge.t-epidemic .ev-dot { background: #444; }
.ev-badge.pt .ev-dot { background: var(--c); } .ev-badge.pt .pulse { background: var(--c); opacity: .5; }
/* eventi puntuali (js/events.js makePin): icona per tipo nel colore del tipo */
.ev-pin { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ev-pin .b-icon { width: 26px; height: 26px; background: var(--c); border-color: #fff; }
.ev-pin .b-icon svg { fill: #fff; width: 15px; height: 15px; }
.ev-pin.approx .b-icon { border-style: dashed; }
.ev-pin.sel .b-icon { box-shadow: 0 0 0 3px rgba(240,193,75,.9), 0 2px 6px rgba(0,0,0,.4); }
.ev-pin.nolab .b-lab { display: none; } .ev-pin:hover .b-lab { display: block !important; }
.maplibregl-marker.ev-pin { z-index: 2; } .ev-pin:hover { z-index: 5; }
.ev-name { background: rgba(22,32,43,.88); color: #f3ead7; font-size: 11.5px; padding: 3px 8px; border-radius: 12px; white-space: nowrap; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- drawers ---------- */
.drawer { position: absolute; top: calc(var(--top-h) + 10px); bottom: 10px; width: 370px; z-index: 18; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.drawer.left { left: 10px; } .drawer.right { right: 10px; width: 390px; }
.dr-head { display: flex; align-items: center; padding: 12px 14px 8px 16px; border-bottom: 1px solid var(--line); background: var(--paper2); }
.dr-head h2 { margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.1; font-weight: 700; flex: 1; }
.x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #777; width: 30px; height: 30px; border-radius: 7px; }
.x:hover { background: rgba(0,0,0,.06); }
.dr-tools { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.dr-tools input[type=search] { width: 100%; padding: 8px 10px; border: 1px solid #d5ccb9; border-radius: 8px; background: #fff; outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { border: 1px solid #d5ccb9; background: #fff; border-radius: 14px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.chips button.off { opacity: .45; }
.chips i { width: 8px; height: 8px; border-radius: 50%; }
.chk { font-size: 12.5px; color: #555; display: flex; align-items: center; gap: 6px; }
.hits:empty { display: none; }
.hits { padding: 8px 14px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 5px; }
.hits button { border: 0; background: #ece5d3; border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.evlist { overflow: auto; flex: 1; padding: 6px 0; }
.evitem { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; padding: 8px 14px 8px 12px; cursor: pointer; border-bottom: 1px solid #eee7d8; align-items: center; }
.evitem:hover { background: #f4efe2; }
.evitem.cur { background: #fbf1d6; }
.evitem .bar { width: 4px; height: 100%; border-radius: 3px; padding: 0; }
.evitem b { font-size: 13.5px; font-weight: 600; display: block; }
.evitem small { color: var(--mut); font-size: 11.5px; }
.evitem .pl { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d5ccb9; background: #fff; cursor: pointer; display: grid; place-items: center; }
.evitem .pl:hover { background: var(--gold); border-color: var(--gold2); }
.evitem .pl svg { width: 12px; height: 12px; fill: #333; }
.evsec { padding: 10px 14px 4px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a7a55; font-weight: 600; }

.rbody { overflow: auto; flex: 1; padding: 12px 16px 20px; font-size: 13.5px; line-height: 1.5; }
.rbody .sub { color: var(--mut); font-size: 12.5px; margin: -4px 0 10px; }
.rbody .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(0,0,0,.2); }
.kv { display: grid; grid-template-columns: 112px 1fr; gap: 5px 10px; margin: 8px 0 12px; }
.kv dt { color: var(--mut); font-size: 12px; padding-top: 1px; } .kv dd { margin: 0; }
.ruler { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.ruler .t { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: #8a7a55; font-weight: 600; }
.ruler .n { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.15; }
.ruler .d { color: var(--mut); font-size: 12px; }
.ruler .pn { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; }
.ruler .pn button { border: 0; background: #f1ebdc; border-radius: 6px; padding: 3px 7px; cursor: pointer; font-size: 11.5px; max-width: 48%; text-align: left; }
.ruler .pn button:hover { background: #e8dfc8; }
.rbody h3 { font-family: var(--serif); font-size: 18px; margin: 16px 0 6px; }
.rbody ul { padding-left: 18px; margin: 4px 0; }
.rbody a { color: #1f5fa8; }
.note { background: #f4efe2; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #555; margin: 10px 0; }
.btn { border: 0; border-radius: 8px; padding: 8px 13px; background: var(--ink2); color: #f3ead7; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.btn.gold { background: var(--gold); color: #1d1d1d; font-weight: 600; }
.btn:hover { filter: brightness(1.1); }
.sides { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sides span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px 3px 6px; font-size: 12px; }
.sides i { width: 11px; height: 11px; border-radius: 50%; }
.ulist li, .blist li { margin-bottom: 5px; }
.blist li { cursor: pointer; } .blist li:hover { color: #9a6b00; }
.cert { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.cert.high { background: #d9f2e1; color: #1d6b3a; } .cert.medium { background: #fbeccb; color: #8a5a00; } .cert.low { background: #f8d9d6; color: #8b2a20; }
.src { font-size: 12px; } .src li { word-break: break-word; }

/* layers popover */
.pop { position: absolute; z-index: 30; top: calc(var(--top-h) - 56px + 50px); right: 12px; width: 300px; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; border: 1px solid var(--line); font-size: 13px; }
.pop h4 { margin: 4px 0 8px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a7a55; }
.basegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.basegrid button { border: 1px solid #d5ccb9; background: #fff; border-radius: 9px; padding: 8px; cursor: pointer; text-align: left; font-size: 12.5px; }
.basegrid button small { display: block; color: var(--mut); font-size: 10.5px; }
.basegrid button.on { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(240,193,75,.5); }
.basegrid button:disabled { opacity: .45; cursor: not-allowed; }
.pop label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.pop input[type=range] { width: 100%; }

/* date picker */
.dp-pop { position: fixed; z-index: 50; width: 300px; background: var(--paper); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; border: 1px solid var(--line); font-size: 13px; }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dp-era { display: flex; border: 1px solid #d5ccb9; border-radius: 8px; overflow: hidden; }
.dp-era button { border: 0; background: #fff; padding: 6px 9px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.dp-era button.on { background: var(--ink2); color: #f3ead7; }
.dp-step { border: 1px solid #d5ccb9; background: #fff; width: 28px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 16px; }
.dp-year { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #d5ccb9; border-radius: 7px; font-size: 15px; font-weight: 600; text-align: center; }
.dp-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 8px; }
.dp-months button, .dp-days button { border: 1px solid #e3dccb; background: #fff; border-radius: 6px; padding: 5px 0; cursor: pointer; font-size: 12px; }
.dp-months button.on, .dp-days button.on { background: var(--gold); border-color: var(--gold2); font-weight: 600; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 8px; }
.dp-days span { text-align: center; font-size: 10.5px; color: var(--mut); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-prev { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.dp-go { border: 0; background: var(--gold); border-radius: 8px; padding: 7px 16px; font-weight: 600; cursor: pointer; }
.dp-note { font-size: 10.5px; color: var(--mut); margin-top: 8px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(10,16,22,.55); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(760px, 100%); max-height: 86vh; overflow: auto; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 26px; font-size: 14px; line-height: 1.55; }
.modal-box .x { position: absolute; right: 12px; top: 10px; }
.modal-box h2 { font-family: var(--serif); font-size: 30px; margin: 0 0 6px; }
.modal-box h3 { font-family: var(--serif); font-size: 20px; margin: 18px 0 6px; }
.modal-box table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.modal-box td, .modal-box th { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
kbd { background: #fff; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; }

[hidden] { display: none !important; }

/* responsive */
@media (max-width: 1250px) { .brand small, .tb span { display: none; } .datebox input { width: 150px; } .now { min-width: 150px; } }
@media (max-width: 900px) {
  :root { --top-h: 150px; }
  .bar { flex-wrap: wrap; height: auto; padding: 8px 10px; gap: 8px; }
  .brand div { display: none; } .now { min-width: 0; margin: 0; text-align: left; } #nowDate { font-size: 22px; }
  .tools { margin-left: auto; } .datebox input { width: 120px; }
  .drawer, .drawer.right { width: auto; left: 8px; right: 8px; top: auto; height: 55vh; }
}

.unit.nolab .u-lab, .battle.nolab .b-lab { display: none; }
.battle:not(.fresh) .b-icon { width: 20px; height: 20px; } .battle:not(.fresh) .b-icon svg { width: 12px; height: 12px; }
.unit:hover, .battle:hover { z-index: 5; } .unit:hover .u-lab, .battle:hover .b-lab { display: block !important; }

body.globe #map { background: radial-gradient(ellipse at center, #1b2d40 0%, #0a121b 70%); }

.battle.old { opacity: .6; } .battle.old .b-lab span { display: none; }
.maplibregl-marker.unit { z-index: 3; } .maplibregl-marker.battle { z-index: 2; } .maplibregl-marker.ev-badge { z-index: 1; }

/* credits & suggestions */
#credits { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; z-index: 11; font-size: 11.5px; color: #3c4650; background: rgba(251,248,241,.82); padding: 3px 12px; border-radius: 12px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
#credits b { font-weight: 600; } #credits a { color: #1f5fa8; text-decoration: none; } #credits a:hover { text-decoration: underline; }
#activeBar { bottom: 34px; flex-wrap: nowrap; max-width: 62vw; overflow: hidden; }
#activeBar button { max-width: 300px; white-space: nowrap; }
#activeBar button span { overflow: hidden; text-overflow: ellipsis; }
#activeBar i { flex: none; }
.sugg-box { width: min(520px, 100%); }
.sugg-intro { color: #555; font-size: 13.5px; margin: 0 0 12px; }
#suggForm label { display: block; font-size: 12.5px; color: #555; margin-bottom: 10px; }
#suggForm label.chk { display: flex; }
#suggForm input[type=text], #suggForm select, #suggForm textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #d5ccb9; border-radius: 8px; background: #fff; font-size: 14px; color: #1f2328; }
#suggForm textarea { resize: vertical; min-height: 110px; }
.sugg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 900px) { #credits { font-size: 10.5px; bottom: 2px; } }

.cert.prob { background: #e8e1f5; color: #5b3f8c; }

#activeBar { display: none !important; }

#legend { position: absolute; left: 12px; bottom: 44px; z-index: 11; background: rgba(255,255,255,.88); color: #2a2a2a; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#legend b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6d5a43; }
#legend span { display: flex; align-items: center; gap: 7px; }
#legend .ln { width: 22px; height: 0; border-top: 2px solid #4b4b4b; display: inline-block; }
#legend .ln.dash { border-top-style: dashed; opacity: .7; }
#legend .dot { width: 8px; height: 8px; border-radius: 50%; background: #2b2b2b; display: inline-block; margin-right: -3px; }
#legend .dot.cap { background: #f0c14b; box-shadow: 0 0 0 1.5px #2b2b2b; margin-left: 4px; }
@media (max-width: 700px) { #legend { display: none; } }

/* ---------- ricerca globale (js/search.js) ---------- */
.gsearch { position: relative; display: flex; align-items: center; flex: 0 1 262px; min-width: 120px; background: #0f1720; border: 1px solid #334456; border-radius: 9px; }
.bar > .brand, .bar > .transport { flex-shrink: 0; }
/* il campo data si restringe un po' insieme alla ricerca (prima delle etichette dei pulsanti) */
.bar > .datebox { flex: 0 0.6 auto; min-width: 118px; } .bar > .datebox input { flex: 1 1 auto; min-width: 0; }
.gsearch .ib { width: 30px; height: 34px; color: #9fb0bf; }
.gsearch input { width: 100%; min-width: 0; background: transparent; border: 0; color: #f3ead7; padding: 8px 10px 8px 0; outline: none; font-size: 13.5px; }
.gsearch input::placeholder { color: #7b8a99; }
.gsearch input::-webkit-search-cancel-button { filter: invert(.7); }
.gsearch:focus-within { border-color: #6a5a2e; box-shadow: 0 0 0 2px rgba(240,193,75,.25); }
.gs-res { position: absolute; top: calc(100% + 6px); left: 0; width: 420px; max-height: min(66vh, 560px); overflow-y: auto; z-index: 45; background: var(--paper); color: var(--txt); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 4px 0 6px; }
.gs-sec { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); padding: 9px 14px 3px; }
.gs-it { display: flex; align-items: center; gap: 10px; padding: 6px 14px; cursor: pointer; }
.gs-it.on { background: #f6ecd2; }
.gs-it svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #7a6232; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gs-it div { min-width: 0; }
.gs-it b { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-it small { display: block; color: var(--mut); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-battle svg { stroke: #a93226; } .gs-event svg { stroke: #1f5fa8; } .gs-ruler svg { stroke: #b7950b; }
.gs-empty { padding: 12px 14px; color: var(--mut); font-size: 13px; }
/* priorità: prima spariscono le etichette secondarie (Esporta, Suggerimenti), poi il nome dell'app,
   infine (sotto 1366 px) le etichette principali Eventi e Livelli */
@media (max-width: 1720px) { #exportBtn span { display: none; } }
@media (max-width: 1600px) { .brand div { display: none; } }
@media (max-width: 1365px) { .tb span { display: none; } }
/* 901-1100 px: con la ricerca e «Esporta» la barra non entrava più (fino a 140 px di scorrimento orizzontale) */
@media (min-width: 901px) and (max-width: 1100px) { .bar { gap: 8px; } .now { min-width: 120px; margin-left: 0; } .bar > .datebox { min-width: 90px; } .datebox input { width: 96px; } #netPill { display: none; } }
/* schermi stretti: solo la lente, che si espande sopra la barra */
@media (max-width: 1150px) {
  .gsearch { flex: none; min-width: 0; background: transparent; border-color: transparent; }
  .gsearch .ib { width: 34px; color: #e6dcc6; }
  .gsearch input { display: none; }
  .gsearch.open { position: absolute; top: 10px; left: 8px; right: 8px; z-index: 46; background: #0f1720; border-color: #6a5a2e; }
  .gsearch.open input { display: block; flex: 1; width: auto; font-size: 16px; }
}
@media (max-width: 900px) {
  .gsearch.open { top: 8px; }
  .gs-res { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 70px); }
}
/* ---- Layer Battaglie (js/battles.js) ---- */
.cert.unv { background: #e6e6e6; color: #555; }
.rbody .miss { color: var(--mut); font-style: italic; }
/* ===== Esporta / stampa (js/export.js) ===== */
#exportPop { z-index: 31; }
#exportPop.busy { opacity: .7; pointer-events: none; }
#exportPop .exrow { justify-content: space-between; }
#exportPop select { background: #fff; color: var(--txt); border: 1px solid #d5ccb9; border-radius: 7px; padding: 5px 6px; font-size: 12.5px; }
#exportPop .extxt { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 7px 9px; border: 1px solid #d5ccb9; border-radius: 8px; background: #fff; font-size: 13px; }
#exportPop .exrow2 { display: flex; gap: 8px; margin-bottom: 8px; }
#exportPop .exrow2 select { flex: 1; }
#exportPop .btn { width: 100%; }
#about .about-acts { margin-top: 14px; }
#exportPop .exnote { font-size: 11px; color: var(--mut); margin: 8px 0 0; }
#printSheet { display: none; }
@media print {
  body.printing > *:not(#printSheet) { display: none !important; }
  body.printing { background: #fff !important; overflow: visible !important; }
  body.printing #printSheet { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; }
  body.printing #printSheet img { max-width: 100%; max-height: 100%; object-fit: contain; }
}
/* ---------- «Cosa è successo qui?» (js/here.js) ---------- */
.here-menu { position: absolute; z-index: 25; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; min-width: 200px; font-size: 13px; }
.here-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--txt); }
.here-menu button:hover { background: #f1ebdc; }
.here-coord { color: var(--mut); font-size: 11.5px; padding: 2px 10px 6px; }
.here-marker { width: 30px; height: 40px; cursor: default; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.here-marker svg { width: 100%; height: 100%; }
.here-marker path { fill: #c0392b; stroke: #fff; stroke-width: 1.5; }
.here-marker circle { fill: #fff; }
.here-gps button { font-size: 16px; line-height: 29px; }
.here-gps button.busy span { display: inline-block; animation: herePulse 1s ease-in-out infinite; }
@keyframes herePulse { 50% { opacity: .3; } }
.here-prog { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin: 6px 0 10px; }
.here-bar { height: 6px; background: #ece5d3; border-radius: 4px; overflow: hidden; }
.here-bar i { display: block; height: 100%; background: var(--gold2); transition: width .2s; }
.here-pt { font-size: 12px; color: var(--mut); margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.here-mini { border: 0; background: #f1ebdc; border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 12px; margin-left: auto; }
.here-mini:hover { background: #e8dfc8; }
.here-gov { list-style: none; padding: 0 !important; margin: 4px 0; }
.here-gov li { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 6px 6px; border-bottom: 1px solid #eee7d8; cursor: pointer; border-radius: 6px; }
.here-gov li:hover { background: #f4efe2; }
.here-gov li.cur { background: #fbf1d6; }
.here-gov li.gap { cursor: default; color: var(--mut); font-style: italic; font-size: 12.5px; }
.here-gov li.gap:hover { background: transparent; }
.here-gov .d { font-size: 12px; color: #6b5a3a; font-variant-numeric: tabular-nums; padding-top: 1px; }
.here-gov .e .sw { margin-right: 5px; }
.here-gov .ru { color: #6b5a3a; }
.here-gov .near { color: #8a5a00 !important; background: #fbeccb; border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.here-gov small, .here-list small { color: var(--mut); }
.here-list { list-style: none; padding: 0 !important; }
.here-list > li { padding: 6px 0; border-bottom: 1px solid #eee7d8; }
.here-list li[data-here-jump] { cursor: pointer; } .here-list li[data-here-jump]:hover { background: #f4efe2; }
.here-list ul { list-style: none; padding-left: 10px !important; margin: 3px 0 0; font-size: 12.5px; }
.here-list ul li { cursor: pointer; padding: 1px 0; } .here-list ul li:hover { color: #9a6b00; }
.here-list ul li.more { cursor: default; }
.here-names { font-size: 12.5px; margin-top: 2px; } .here-names span { cursor: pointer; } .here-names span:hover { color: #9a6b00; }
.here-names i { color: var(--mut); font-style: normal; margin: 0 5px; }
.here-empty { color: var(--mut); font-size: 12.5px; font-style: italic; margin: 4px 0; }
.here-hint { color: var(--mut); font-size: 11.5px; margin-bottom: 2px; }
.here-time { color: var(--mut); font-size: 11.5px; margin-top: 6px; }
.rbody h3 small { font-family: var(--sans); font-size: 11.5px; color: var(--mut); font-weight: 400; }
.here-back { margin-bottom: 10px; }
@media (max-width: 900px) { .here-gov li { grid-template-columns: 92px 1fr; } }
/* ---------- OpenHistoricalMap (js/ohm.js) ---------- */
.pop label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pop label .lay-note { display: block; color: var(--mut); font-size: 11px; margin-left: 2px; }
/* ---------- glaciazioni ---------- */
#glacialChip { position: absolute; top: calc(var(--chip-top, var(--top-h)) + 12px); left: 12px; z-index: 12; background: rgba(22,32,43,.88); color: #e8f1f7; border-radius: 10px; padding: 6px 11px 6px 30px; font-size: 12px; line-height: 1.3; box-shadow: 0 3px 10px rgba(0,0,0,.25); cursor: help; max-width: 60vw; }
#glacialChip::before { content: "❄"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9cc0d8; font-size: 14px; }
#glacialChip b { display: block; font-weight: 600; color: #fff; }
#glacialChip span { color: #9fb6c7; }
#glacialChip[hidden] { display: none; }
#paeChip { position: absolute; top: calc(var(--chip-top, var(--top-h)) + 58px); left: 12px; z-index: 12; background: rgba(36,48,26,.88); color: #eef3e4; border-radius: 10px; padding: 5px 11px 5px 30px; font-size: 12px; line-height: 1.3; box-shadow: 0 3px 10px rgba(0,0,0,.25); cursor: help; max-width: 60vw; }
#glacialChip[hidden] + #paeChip { top: calc(var(--chip-top, var(--top-h)) + 12px); }
#paeChip::before { content: "\2766"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #b5c98a; font-size: 14px; }
#paeChip b { display: block; font-weight: 600; color: #fff; }
#paeChip span { color: #c3cfa9; }
#paeChip[hidden] { display: none; }
/* ---------- salto al cambio di confini (js/changes.js) ---------- */
@media (max-width: 520px) { .transport { gap: 1px; } .transport .chg-btn { width: 30px; } }
/* ===== Condividi (js/share.js) ===== */
@media (max-width: 1720px) { #shareBtn span, #compareBtn span, #oldmapsBtn span { display: none; } }
/* adattamento progressivo della barra (fitBar in js/ui.js) */
.bar.fit1 .tb span { display: none; }
.bar.fit2 .brand div, .bar.fit2 #nowEra { display: none; } .bar.fit2 .now { min-width: 0; }
.bar.fit3 #netPill { display: none; }
.bar.fit4 .transport .chg-btn, .bar.fit4 #speedSel { display: none; }
.bar.fit5 .tools { gap: 3px; } .bar.fit5 .tb { padding: 0 6px; }
@media (min-width: 901px) and (max-width: 1450px) { .bar { gap: 8px; padding: 0 10px; } .tb { padding: 0 9px; } .now { min-width: 140px; margin-left: 0; } }
@media (min-width: 901px) and (max-width: 1100px) { .transport .chg-btn { display: none; } }   /* restano PagSu/PagGiù */
@media (max-width: 420px) { .tools { gap: 4px; } }
#sharePop { width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; z-index: 31; }
#sharePop .shrow { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
#sharePop .shrow input, #sharePop .shrow textarea { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 9px; border: 1px solid #d5ccb9; border-radius: 8px; background: #fff; color: var(--txt); font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; }
#sharePop .shrow textarea { resize: none; }
#sharePop .shrow .btn { white-space: nowrap; flex: none; }
#sharePop .shrow .btn.gold, #sharePop .shrow > .btn { flex: 1; justify-content: center; }
#sharePop .shnote { font-size: 11px; color: var(--mut); margin: 0 0 10px; line-height: 1.4; }
#sharePop [hidden] { display: none !important; }
@media (max-width: 480px) { #sharePop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; } }
/* incorporata in un iframe: footer compatto, niente link alla pagina dei suggerimenti */
.embedded #credits { font-size: 10px; bottom: 2px; padding: 1px 9px; max-width: calc(100% - 16px); white-space: normal; text-align: center; line-height: 1.5; }
@media (min-width: 620px) { .embedded #credits { white-space: nowrap; } }
.embedded #suggLink { display: none; }
.embedded .drawer { bottom: 34px; }   /* il pannello non copre il footer con il link alla app */
#embedOpen { color: #1f5fa8; margin-left: 6px; font-weight: 600; text-decoration: none; }
#embedOpen:hover { text-decoration: underline; }
/* ---------- «Confronta»: vista divisa prima/dopo (js/compare.js) ---------- */
#map.cmp-on > .maplibregl-canvas-container { position: absolute; inset: 0; z-index: 0; }   /* i marker della principale restano sotto la vista B */
.cmp-map { position: absolute; inset: 0; z-index: 1; }
.cmp-map .maplibregl-canvas { outline: none; }
.cmp-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.cmp-line { position: absolute; top: 0; bottom: 0; left: -11px; width: 22px; pointer-events: auto; cursor: ew-resize; touch-action: none; will-change: transform; }
.cmp-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(22,32,43,.35), 0 0 8px rgba(0,0,0,.35); }
.cmp-handle { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--ink2); color: var(--gold); border: 2px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.4); display: grid; place-items: center; outline: none; }
.cmp-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-handle:focus-visible { box-shadow: 0 0 0 3px rgba(240,193,75,.85), 0 3px 12px rgba(0,0,0,.4); }
.cmp-line:hover .cmp-handle, .cmp-line.drag .cmp-handle { background: #2b3c4e; }
.cmp-h .cmp-line { top: -11px; bottom: auto; left: 0; right: 0; width: auto; height: 22px; cursor: ns-resize; }
.cmp-h .cmp-line::before { top: 10px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
.cmp-h .cmp-handle svg { transform: rotate(90deg); }
.cmp-lab { position: absolute; top: 0; left: 0; pointer-events: auto; background: rgba(22,32,43,.9); color: #f3ead7; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.3); will-change: transform; }
.cmp-a { padding: 5px 12px; }
.cmp-lab b { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1.1; white-space: nowrap; }
.cmp-b { padding: 4px; max-width: min(360px, calc(100% - 16px)); }
.cmp-row { display: flex; align-items: center; gap: 2px; }
.cmp-in { width: 128px; min-width: 0; background: #0f1720; border: 1px solid #334456; border-radius: 7px; color: var(--gold); font-family: var(--serif); font-size: 21px; font-weight: 700; padding: 1px 8px; text-align: center; outline: none; }
.cmp-in:focus { border-color: var(--gold2); }
.cmp-in.bad { background: rgba(192,57,43,.35); }
.cmp-b.loading .cmp-in { opacity: .6; }
.cmp-ib { width: 32px; height: 32px; flex: none; border: 0; border-radius: 7px; background: transparent; color: #eadfc8; cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; padding: 0; }
.cmp-ib:hover { background: #2b3c4e; }
.cmp-ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-ras { padding: 4px 8px 4px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.cmp-ras[hidden] { display: none; }
.cmp-title { font-weight: 600; color: #fff; }
.cmp-op { display: flex; align-items: center; gap: 8px; color: #b9c6d2; }
.cmp-op input { flex: 1; min-width: 80px; }
.cmp-attr { color: #9fb0bf; font-size: 10.5px; } .cmp-attr a { color: #d9c48c; }
@media (max-width: 700px) {
  .cmp-lab b { font-size: 19px; } .cmp-in { width: 104px; font-size: 18px; }
  .cmp-ib { width: 34px; height: 34px; }
  .cmp-handle { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}
/* ---------- immagini nei pannelli (js/images.js, solo online) ---------- */
.whh-img-row { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.whh-img { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #f1ebdc; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.whh-img img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.whh-img.ok img { opacity: 1; }
.whh-img.flag { width: 84px; height: 56px; } .whh-img.arms { width: 56px; height: 56px; background: transparent; border-color: transparent; }
.whh-img.rul { float: right; width: 60px; height: 76px; margin: 0 0 6px 10px; }
.whh-img.rul img { object-fit: cover; object-position: top; }
.ruler.has-portrait { display: flow-root; }
/* ---------- «Mappe antiche» (js/oldmaps.js) ---------- */
.om-pop { width: 360px; max-width: calc(100vw - 24px); max-height: calc(100% - var(--top-h) - 40px); overflow-y: auto; padding: 10px 12px 8px; }
.om-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: -10px; background: var(--paper); padding: 2px 0 6px; z-index: 1; }
.om-head h4 { margin: 0; }
.om-tabs { display: flex; border: 1px solid #d5ccb9; border-radius: 8px; overflow: hidden; }
.om-tabs button { border: 0; background: #fff; padding: 4px 9px; cursor: pointer; font-size: 12px; }
.om-tabs button.on { background: var(--ink2); color: #f3ead7; }
.om-note, .om-off, .om-src { margin: 4px 0 8px; font-size: 11.5px; color: var(--mut); line-height: 1.4; }
.om-off { color: #8a3b2b; background: #f7e9e2; border-radius: 8px; padding: 7px 9px; }
.om-src { margin: 8px 0 2px; }
.om-src a, .cmp-attr a { color: inherit; }
.om-list { list-style: none; margin: 0; padding: 0; }
.om-sep { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #8a7a55; margin: 8px 0 4px; }
.om-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 6px 7px; cursor: pointer; color: var(--txt); }
.om-item:hover { background: #fff; border-color: #e3dccb; }
.om-item.on { background: #fff6dc; border-color: var(--gold2); }
.om-item:disabled { opacity: .5; cursor: not-allowed; }
.om-item b { grid-column: 1; font-size: 13px; font-weight: 600; line-height: 1.25; }
.om-item .om-dist { grid-column: 2; grid-row: 1; font-size: 10.5px; color: var(--mut); white-space: nowrap; align-self: start; padding-top: 2px; }
.om-item .om-meta, .om-item .om-orig, .om-item .om-tag { grid-column: 1 / -1; font-size: 11px; color: var(--mut); line-height: 1.3; }
.om-item .om-orig { font-size: 10.5px; color: #8b8f96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-item .om-tag { justify-self: start; color: #6d5a21; background: #f4e7bf; border-radius: 5px; padding: 0 5px; font-size: 10.5px; }
#oldmapsBtn.om-offline { opacity: .6; }
.om-load { position: absolute; z-index: 6; left: 50%; bottom: 34px; transform: translateX(-50%); background: rgba(22,32,43,.9); color: #f3ead7; border-radius: 10px; padding: 7px 12px; font-size: 12.5px; box-shadow: 0 3px 12px rgba(0,0,0,.3); pointer-events: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); text-align: center; }
.om-load small { flex-basis: 100%; color: #b9c6d2; font-size: 11px; }
.om-spin { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--gold); border-radius: 50%; animation: om-spin .8s linear infinite; flex: none; }
@keyframes om-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .om-pop { right: 8px; left: 8px; width: auto; max-width: none; } }

/* Livelli: il popover non esce dallo schermo, scorre in verticale */
#layersPop { max-height: calc(100vh - var(--top-h) - 20px); max-height: calc(100dvh - var(--top-h) - 20px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c9bd9f transparent; }
#layersPop::-webkit-scrollbar { width: 8px; }
#layersPop::-webkit-scrollbar-thumb { background: #c9bd9f; border-radius: 8px; border: 2px solid var(--paper); }
#layersPop::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) { #layersPop { top: calc(var(--top-h) + 4px); right: 8px; width: min(320px, calc(100vw - 16px)); } }

/* Mappe antiche: alone pulsante quando c'è una mappa storica per il periodo/zona correnti */
#oldmapsBtn { position: relative; }
#oldmapsBtn .om-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: #1a1a1a; font: 700 10px/16px var(--sans); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #1a2632; pointer-events: none; }
#oldmapsBtn.om-avail { border-color: var(--gold); color: #ffe9a8; background: #2b3441; box-shadow: 0 0 6px 1px rgba(240,193,75,.55); animation: om-glow 1.9s ease-in-out infinite; }
#oldmapsBtn.om-avail svg { stroke: var(--gold); }
@keyframes om-glow { 0%, 100% { box-shadow: 0 0 4px 0 rgba(240,193,75,.45), 0 0 0 0 rgba(240,193,75,.5); } 50% { box-shadow: 0 0 14px 3px rgba(240,193,75,.85), 0 0 0 6px rgba(240,193,75,0); } }
#oldmapsBtn.om-offline.om-avail { animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #oldmapsBtn.om-avail { animation: none; box-shadow: 0 0 10px 2px rgba(240,193,75,.7); } }

/* ---------- benvenuto e tutorial iniziale (js/tutorial.js) ---------- */
.tut-welcome { z-index: 90; background: rgba(10,16,22,.62); }
.tut-wbox { width: min(540px, 100%); text-align: center; padding: 26px 28px 22px; }
.tut-wbox .tut-logo { width: 46px; height: 46px; color: var(--ink2); margin: 0 auto 6px; }
.tut-wbox h2 { font-size: 31px; line-height: 1.1; margin: 0 0 10px; }
.tut-wbox p { margin: 0 0 10px; text-align: left; }
.tut-wbox .tut-wsub { color: var(--mut); font-size: 13px; }
.tut-wact { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.tut-wact .btn { padding: 10px 20px; font-size: 14px; }
.tut-ov { position: fixed; inset: 0; z-index: 95; }
.tut-ov.tut-dim { background: rgba(10,16,22,.62); }
.tut-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(10,16,22,.62); outline: 2px solid var(--gold); outline-offset: 0; pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; }
.tut-card { position: fixed; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px 12px; font-size: 13.5px; line-height: 1.5; max-height: calc(100vh - 24px); overflow: auto; }
.tut-card h3 { font-family: var(--serif); font-size: 21px; line-height: 1.15; margin: 0 0 5px; }
.tut-card p { margin: 0 0 12px; }
.tut-count { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a7a55; font-weight: 600; margin-bottom: 3px; }
.tut-nav { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tut-nav > span { flex: 1; }
.tut-nav .btn:disabled { opacity: .4; cursor: default; }
.tut-skip { border: 0; background: transparent; color: var(--mut); cursor: pointer; font-size: 12.5px; padding: 6px 2px; text-decoration: underline; }
.tut-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 13.5px; }
.tut-card :focus-visible, .tut-welcome :focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tut-spot { transition: none; } }
@media (max-width: 480px) { .tut-wbox { padding: 22px 18px 18px; } .tut-wbox h2 { font-size: 26px; } }

/* ---------- rifinitura app (16/10) ---------- */
/* la barra misura la propria altezza (syncTopH in js/ui.js → --top-h): mappa, pannelli e indicatori partono sotto il suo bordo reale */
.tb { white-space: nowrap; }
.pill { white-space: nowrap; }
/* data corrente: si restringe fino al min-width e tronca con «…» invece di finire sotto il campo data */
.bar > .now { overflow: hidden; }
#nowDate, #nowEra { overflow: hidden; text-overflow: ellipsis; }
/* 1920 px: con tutte le etichette il campo di ricerca scendeva a 120 px; restano «Eventi», «Livelli», «Mappe antiche» */
@media (max-width: 2100px) { #shareBtn span, #compareBtn span, #exportBtn span { display: none; } }
/* con l'elenco Eventi aperto, indicatori e legende si spostano a destra del pannello invece di finirci sotto */
/* (ora lo fa js/panels.js: ogni scheda va nel posto libero più vicino) */
/* telefoni: tre righe fisse (data + campo + lente / comandi del tempo / strumenti) invece di 4–5 righe variabili */
@media (max-width: 600px) {
  .bar { gap: 6px 8px; padding: 6px 8px; }
  .bar > .brand { order: 0; } .brand .logo { width: 26px; height: 26px; }
  .bar > .now { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; }
  #nowDate { font-size: 21px; }
  .bar > .datebox { order: 2; flex: 0 1 150px; min-width: 0; } .datebox input { width: auto; }
  .bar > .gsearch { order: 3; }
  .bar > .transport { order: 4; flex: 1 0 100%; justify-content: space-between; }
  .bar > .tools { order: 5; flex: 1 0 100%; justify-content: space-between; margin-left: 0; }
  #netPill { display: none; }
}
/* pannello Eventi: risultati «Stati e luoghi» (stesso indice della ricerca globale) */
.evplace { width: 100%; border: 0; border-bottom: 1px solid #eee7d8; background: transparent; text-align: left; font: inherit; color: var(--txt); }
.evplace:hover, .evplace:focus-visible { background: #f4efe2; outline: none; }
/* tastiera: anello di focus visibile sui comandi (solo con la tastiera, non al clic) */
.tb:focus-visible, .ib:focus-visible, .tlz:focus-visible, .x:focus-visible, .btn:focus-visible, .evitem .pl:focus-visible, #typeChips button:focus-visible, .pop button:focus-visible, .pop input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.transport select:focus-visible, .datebox:focus-within { outline: 2px solid rgba(240,193,75,.7); outline-offset: 1px; }
.evitem:focus-visible { outline: 2px solid var(--gold2); outline-offset: -2px; background: #f4efe2; }
/* telefoni e tablet: i popover (Mappe antiche, Esporta…) partono sotto la timeline, non sopra il suo bordo */
@media (max-width: 900px) { .pop { top: calc(var(--top-h) + 4px); } }

/* ---------- schede mobili (js/panels.js) ---------- */
.pop.pn { --pp: 14px; padding: 0 var(--pp) 12px; }
.om-pop.pn { --pp: 12px; padding-bottom: 8px; }
.pn-grip { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 3; height: 32px; margin: 0 calc(-1 * var(--pp, 14px)) 6px; padding: 0 5px 0 var(--pp, 14px);
  background: var(--paper2); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; user-select: none; -webkit-user-select: none; touch-action: none; }
.pn-t { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a7a55; }
.pn-x { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #777; font-size: 21px; line-height: 1; cursor: pointer; }
.pn-x:hover { background: rgba(128, 128, 128, .22); }
.pn-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.om-pop.pn .om-head { top: 32px; }
.om-pop.pn .om-head h4 { display: none; }
.om-pop.pn .om-head { justify-content: flex-start; }
.pn-h, .pn-card { touch-action: none; user-select: none; -webkit-user-select: none; }
.pn-card { pointer-events: auto !important; }
.pn-card > .pn-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; font-size: 17px; color: inherit; opacity: .7; }
.pn-card > .pn-x:hover { opacity: 1; }
#glacialChip.pn-card, #paeChip.pn-card { padding-right: 26px; }
#legend.pn-card { padding-right: 26px; }
.ohm-leg.pn-card .ohm-leg-b { padding-right: 26px; }
.pn-card > .pn-x:focus-visible { opacity: 1; }
.pn-dragging { box-shadow: 0 14px 38px rgba(10, 20, 30, .45) !important; opacity: .95; }
.pn-bad { outline: 2px dashed #c0392b; outline-offset: 2px; }
.pn-off { visibility: hidden !important; pointer-events: none !important; }
.pn-closed { display: none !important; }
@media (min-width: 600px) {
  .pn-grip, .dr-head.pn-h, .pn-card, .cmp-ocard .cmp-b { cursor: grab; }
  .pn-grip::before { content: "\283f"; color: #b3a582; font-size: 15px; margin-right: 2px; }
  .pn-dragging, .pn-dragging .pn-grip, .pn-dragging .dr-head { cursor: grabbing; }
  #glacialChip.pn-card, #paeChip.pn-card { cursor: grab; }
}

/* ---------- mappa antica: scheda in basso a destra, mobile; un solo anno (quello dell'atlante) ---------- */
.cmp-gl { display: none; }
.cmp-ocard .cmp-gl { display: block; padding: 0 2px 0 4px; color: #8d9db0; font-size: 16px; line-height: 1; }
.cmp-ocard .cmp-b { top: auto; left: auto; right: 56px; bottom: 36px; transform: none; width: min(372px, calc(100% - 24px)); max-width: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.cmp-ocard .cmp-swap { display: none; }
.cmp-ocard .cmp-in { flex: 1; width: auto; }
.cmp-warn { margin-top: 3px; padding: 5px 7px; border-radius: 7px; background: rgba(192, 100, 43, .28); color: #ffe3c9; font-size: 11.5px; line-height: 1.35; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.cmp-warn[hidden] { display: none; }
.cmp-warn span { flex: 1 1 100%; }
.cmp-warn button { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; cursor: pointer; }
.cmp-warn button:hover { background: rgba(255, 255, 255, .22); }
.cmp-warn button[hidden] { display: none; }
@media (max-width: 600px) { .cmp-ocard .cmp-b { right: 50px; bottom: 34px; } .cmp-ocard .cmp-gl { display: none; } }

/* pulsanti Eventi animati / Battaglie sulla mappa (js/ui.js initDyn) */
#dynToggles { position: absolute; left: 12px; top: calc(var(--top-h, 118px) + 10px); z-index: 12; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100vw - 24px); align-items: flex-start; }
#dynToggles > button { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(22,32,43,.25); border-radius: 18px; padding: 6px 12px 6px 9px; background: rgba(251,248,241,.95); color: #22303e; font-size: 12.5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
#dynToggles > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#dynToggles > button.on { background: #16202b; color: #f0c14b; border-color: #16202b; }
#dynHint { flex-basis: 100%; max-width: 300px; background: #fff7df; border: 1px solid #e0c46c; color: #4b3a10; font-size: 12px; border-radius: 8px; padding: 6px 26px 6px 10px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#dynHint button { position: absolute; right: 4px; top: 2px; border: 0; background: none; font-size: 15px; cursor: pointer; color: #6b5a2a; }
body.left-open #dynToggles { left: 392px; }

/* «Riproduci evento» (js/eventplay.js) */
body.ev-focus #activeBar, body.ev-focus #dynToggles { display: none; }
#evFocus, #nhFocus { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--top-h, 118px) + 10px); z-index: 20; background: rgba(22,32,43,.94); color: #f3ead7; border-radius: 12px; padding: 8px 10px 6px; min-width: 300px; max-width: min(760px, calc(100vw - 24px)); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#evFocus .ef-head, #nhFocus .ef-head { display: flex; align-items: center; gap: 10px; }
#evFocus .ef-title, #nhFocus .ef-title { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#evFocus .ef-btns, #nhFocus .ef-btns { display: flex; gap: 4px; }
#evFocus button, #nhFocus button { border: 0; background: #2c3d4f; color: #f3ead7; border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 13px; }
#evFocus button.on, #nhFocus button.on { background: #f0c14b; color: #16202b; }
#evFocus button:disabled, #nhFocus button:disabled { opacity: .45; cursor: default; }
#evFocus .ef-prog, #nhFocus .ef-prog { height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; margin-top: 6px; overflow: hidden; }
#evFocus .ef-prog i, #nhFocus .ef-prog i { display: block; height: 100%; width: 0; background: #f0c14b; }
#evCap, #nhCap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 54px; z-index: 20; max-width: min(640px, calc(100vw - 24px)); background: rgba(251,248,241,.97); color: #1d1d1d; border-left: 4px solid #f0c14b; border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#evCap small, #nhCap small { display: block; color: #6b4e16; font-weight: 600; font-size: 12px; margin-bottom: 2px; }
@media (min-width: 900px) { body.right-open #evFocus, body.right-open #evCap, body.right-open #nhFocus, body.right-open #nhCap { left: calc(50% - 200px); } }
#nhFocus .nh-msg { font-size: 12px; color: #f0c14b; margin-top: 4px; }
#nhFocus .nh-msg[hidden] { display: none; }

/* video guida */
.about-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 40px 6px 0; } .about-acts .btn { margin: 0; }
.video-box { width: min(960px, calc(100vw - 24px)); max-width: none; }
.video-box video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; display: block; }
.video-note { font-size: 12px; color: #6b6355; margin: 8px 0 0; }
.tut-wact { flex-wrap: wrap; }

/* fumetto della battaglia (js/battleballoon.js) */
.bb-wrap { pointer-events: none; z-index: 6; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.bb-wrap > * { animation: bbIn .35s cubic-bezier(.2,1.6,.4,1); transform-origin: 50% 100%; }
.maplibregl-marker.bb-wrap { z-index: 6; }
.bb-bubble { width: 270px; background: #fffdf5; border: 3px solid #111; border-radius: 26px; padding: 6px 8px 7px; position: relative; }
.bb-tail { width: 0; height: 0; margin: -3px auto 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 18px solid #111; position: relative; }
.bb-tail::after { content: ""; position: absolute; left: -8px; top: -21px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #fffdf5; }
.bb-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bb-svg text { font: 900 15px/1 "Comic Sans MS", "Chalkboard SE", "Bangers", system-ui, sans-serif; text-anchor: middle; fill: #b3261e; stroke: #111; stroke-width: .6px; }
.bb-svg .bb-w2 { font-size: 13px; fill: #1f5fa8; animation: bbWord 1.1s ease-in-out infinite alternate; transform-origin: 200px 40px; }
.bb-l { animation: bbL 1.1s ease-in-out infinite; }
.bb-r { animation: bbR 1.1s ease-in-out infinite; }
.bb-bob { animation: bbBob .45s ease-in-out infinite alternate; }
.bb-burst { animation: bbBurst 1.1s ease-in-out infinite; transform-origin: 130px 62px; transform-box: view-box; }
.bb-dust circle { fill: #e9dfc6; stroke: #8a6d3b; stroke-width: 1.5; }
.bb-dust { animation: bbDust 1.1s ease-in-out infinite; transform-origin: 130px 115px; transform-box: view-box; }
.bb-smoke circle { fill: #ececec; stroke: #999; stroke-width: 1; opacity: .9; }
.bb-smoke { animation: bbSmoke 1.4s ease-out infinite; }
.bb-helm { animation: bbHelm 1.6s ease-in infinite; }
.bb-helm.h2 { animation-delay: .7s; animation-name: bbHelm2; }
.bb-waves { animation: bbWave 1.2s linear infinite; }
.bb-cap { text-align: center; font-size: 12.5px; line-height: 1.3; color: #1d1d1d; margin-top: 2px; }
.bb-cap b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; }
.bb-cap span { color: #6b4e16; font-weight: 600; margin-left: 4px; }
.bb-cap small { display: block; color: #444; }
.bb-note { position: absolute; right: 16px; top: 6px; font-size: 9px; color: #8a7a5a; font-style: italic; }
@keyframes bbIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bbL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@keyframes bbR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }
@keyframes bbBob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(4deg); } }
@keyframes bbBurst { 0%, 30% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.12); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
@keyframes bbDust { 0%, 100% { transform: scale(.4); opacity: 0; } 45%, 70% { transform: scale(1.15); opacity: 1; } }
@keyframes bbSmoke { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-16px); opacity: 0; } }
@keyframes bbHelm { 0% { transform: translate(120px, 104px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(70px, 6px) rotate(-540deg); opacity: 0; } }
@keyframes bbHelm2 { 0% { transform: translate(140px, 104px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(196px, 10px) rotate(500deg); opacity: 0; } }
@keyframes bbWord { from { transform: rotate(-8deg) scale(.9); } to { transform: rotate(6deg) scale(1.1); } }
@keyframes bbWave { from { transform: translateX(0); } to { transform: translateX(-30px); } }
#evFocus .ef-btns button, #nhFocus .ef-btns button { white-space: nowrap; }
.ef-voices { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 180px; overflow: auto; }
.ef-voices[hidden] { display: none; }
.ef-voices button { text-align: left; }
.ef-voices button.on { background: #f0c14b; color: #16202b; }
.ef-voices small { color: #c9d3dd; font-size: 11px; }
#evFocus .ef-prog, #nhFocus .ef-prog { cursor: pointer; height: 6px; }