@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
:root {
  --bg:#070c12; --ocean:#091520; --gold:#d4a843; --gold2:#f0c96a;
  --border:#1e1608; --txt:#c8b98a; --panel:rgba(7,12,18,0.95);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--txt);font-family:'Crimson Text',serif;height:100vh;overflow:hidden;user-select:none;}

/* ── Custom scrollbars (Webkit + Firefox) ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:rgba(7,12,18,0.6);}
::-webkit-scrollbar-thumb{background:#2a2010;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#4a3a1a;}
::-webkit-scrollbar-corner{background:transparent;}
*{scrollbar-width:thin;scrollbar-color:#2a2010 rgba(7,12,18,0.6);}

/* ── MOBILE ── */
/* mobile queries moved to bottom */

/* TOP BAR: removed - everything lives in bottom controls */

/* MAP */
#map-container{position:fixed;top:0;touch-action:none;left:0;right:0;bottom:0;background:var(--ocean);overflow:hidden;cursor:grab;}
#map-container.dragging{cursor:grabbing;}
#map-svg{width:100%;height:100%;}
.territory{stroke-linejoin:round;stroke-linecap:round;cursor:pointer;transition:fill 0.5s ease, filter 100ms ease-out;}
.territory:hover{filter:brightness(1.25);}
.territory.selected{filter:brightness(1.35);}
.border-line{fill:none;stroke-linejoin:round;pointer-events:none;}
.map-label{font-family:'Cinzel',serif;fill:rgba(255,243,210,0.65);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(7,12,18,0.9);stroke-width:3px;letter-spacing:0.5px;}
.city-dot{cursor:pointer;}
/* City labels use Crimson Text italic - distinct from territory Cinzel labels */
.city-label{font-family:'Crimson Text',serif;font-style:italic;fill:rgba(255,230,140,0.88);pointer-events:none;dominant-baseline:middle;paint-order:stroke;stroke:rgba(7,12,18,0.95);stroke-width:2.5px;}

/* CONTROLS */
#controls{position:fixed;bottom:0;left:0;right:0;height:224px;background:rgba(7,12,18,0.97);border-top:1px solid var(--border);padding:8px 20px 12px;z-index:200;backdrop-filter:blur(12px);}

#ctrl-title{font-family:'Cinzel',serif;font-size:14px;letter-spacing:6px;color:#8a7040;text-transform:uppercase;white-space:nowrap;min-width:200px;font-weight:600;text-shadow:0 0 20px rgba(212,168,67,0.15);}
#ctrl-logo{
  height:80px;width:auto;object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(212,168,67,0.25));
  display:block;
}
#epoch-row{position:relative;height:46px;margin-bottom:3px;}
.epoch-mk{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:0.75;transition:opacity 0.2s;transform:translateX(-50%);}
.epoch-mk:hover{opacity:1;}
.epoch-mk.active{opacity:1;}
.epoch-dot{width:10px;height:10px;border-radius:50%;background:#7a6430;border:2px solid #b09050;transition:all 0.2s;}
.epoch-mk.active .epoch-dot{background:var(--gold);border-color:var(--gold2);box-shadow:0 0 8px rgba(212,168,67,0.7);}
.epoch-lbl{font-family:'Cinzel',serif;font-size:12px;color:#a08a52;white-space:nowrap;}
.epoch-mk.active .epoch-lbl{color:var(--gold);}
#tl-wrap{position:relative;height:6px;margin-bottom:36px;}
#tl-start-lbl,#tl-end-lbl{display:none;}
#thumb-year{position:absolute;top:calc(100% + 8px);transform:translateX(-50%);font-family:'Cinzel',serif;font-size:24px;font-weight:700;color:#fff5c8;white-space:nowrap;pointer-events:none;text-shadow:0 0 18px rgba(255,230,140,0.55);letter-spacing:1px;line-height:1;}
#tl-track{position:absolute;inset:0;top:50%;height:2px;transform:translateY(-50%);background:#1a1508;border-radius:2px;}
#tl-fill{position:absolute;top:50%;left:0;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,#5a3a08,var(--gold));border-radius:2px;pointer-events:none;}
#tl-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--gold2);border:2px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(212,168,67,0.5);pointer-events:none;}
@media (max-width:768px){#tl-thumb{width:18px;height:18px;}}
#tl-input{position:absolute;inset:-10px 0;opacity:0;cursor:pointer;width:100%;touch-action:none;}
#btn-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.btn-group-left{display:flex;align-items:center;gap:7px;border:1px solid rgba(212,168,67,0.12);border-radius:3px;padding:5px 10px;}
.btn-group-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;}
.btn-group-right{display:flex;align-items:center;gap:8px;}
#layer-btns{display:flex;align-items:center;gap:7px;border:1px solid rgba(212,168,67,0.12);border-radius:3px;padding:5px 10px;}
#play-btns{display:flex;align-items:center;gap:7px;border:1px solid rgba(212,168,67,0.12);border-radius:3px;padding:5px 10px;}
.btn{font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.6px;padding:5px 13px;border:1px solid #2a2010;background:rgba(90,60,20,0.08);color:#6a5a3a;border-radius:2px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.btn:hover{background:rgba(212,168,67,0.15);border-color:var(--gold);color:var(--gold2);}
.btn:active{transform:scale(0.96);}
.btn.on{background:rgba(212,168,67,0.2);border-color:var(--gold2);color:var(--gold2);}
.btn.on-all{background:rgba(212,168,67,0.38);border-color:#f0d060;color:#f0d060;}
.btn-pleiades{letter-spacing:1.5px;font-size:11px;}
.btn-events{letter-spacing:1.5px;font-size:11px;}
.event-marker{pointer-events:all;}
.btn-play{padding:5px 18px;font-size:14px;border-color:#4a3a1a;color:#8a7040;}
.btn-play:hover{border-color:var(--gold2);color:var(--gold2);}
.btn-play.on{background:rgba(212,168,67,0.25);border-color:var(--gold2);color:var(--gold2);}
.btn-sp{flex:1;}

/* LEGEND */
#legend{position:fixed;top:14px;left:14px;background:var(--panel);border:1px solid var(--border);padding:1em 1.2em;z-index:550;border-radius:2px;backdrop-filter:blur(10px);width:200px;min-width:150px;max-width:500px;overflow:hidden;max-height:calc(100vh - 80px);font-size:13px;}
#legend-inner{overflow-y:auto;height:100%;}
#legend-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#3a2e18;font-size:10px;user-select:none;}
#legend-resize:hover{color:var(--gold);}
#legend h4{font-family:'Cinzel',serif;font-size:0.72em;letter-spacing:1.5px;color:#6a5a32;text-transform:uppercase;margin-bottom:0.6em;}
.leg-item{display:flex;align-items:center;gap:0.6em;margin-bottom:0.35em;font-size:1em;color:#8a7a52;line-height:1.3;}
.leg-sw{width:1em;height:0.75em;border-radius:1px;flex-shrink:0;border:1px solid rgba(255,255,255,0.07);}
.leg-div{height:1px;background:var(--border);margin:0.5em 0;}
.leg-prec{display:flex;align-items:center;gap:0.6em;margin-bottom:0.35em;font-size:0.9em;color:#6a5a32;line-height:1.4;}
.pl{width:1.8em;height:2px;border-radius:1px;flex-shrink:0;}
.leg-sym{display:flex;align-items:center;gap:0.5em;margin-bottom:0.35em;font-size:0.9em;color:#6a5a32;line-height:1.4;}
.leg-type-icon{font-size:0.95em;color:#7a6a42;width:1.2em;text-align:center;flex-shrink:0;}

/* TOOLTIP — Phase 3 + C1 fade animation */
#tooltip{position:fixed;background:var(--panel);border:1px solid #2a2010;border-radius:2px;padding:14px 16px 13px;width:280px;z-index:300;display:none;opacity:0;transform:translateY(5px);transition:opacity 140ms ease-out,transform 140ms ease-out;backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,0.65);pointer-events:none;}
#tooltip.tt-visible{opacity:1;transform:translateY(0);}
#tooltip.pinned{border-color:var(--gold);box-shadow:0 8px 30px rgba(0,0,0,0.65),0 0 0 1px rgba(212,168,67,0.25);pointer-events:all;}
#tt-snap,#tt-minimize,#tt-close{display:none;}
#tooltip.pinned #tt-snap,#tooltip.pinned #tt-minimize,#tooltip.pinned #tt-close{display:block;}
#tooltip.minimized > *:not(#tt-header){display:none !important;}
#tt-type-icon{font-size:12px;color:#7a6a42;flex-shrink:0;line-height:1;}
#tooltip h3{font-family:'Cinzel',serif;font-size:16px;color:var(--gold2);line-height:1.3;flex:1;min-width:0;}
.tt-sub{font-size:13px;font-style:italic;color:#9a8a62;margin-bottom:8px;}
.tt-div{height:1px;background:#1e1608;margin:6px 0;}
/* Kontext-Bereich */
.tt-section-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;color:#7a6a4a;text-transform:uppercase;margin-bottom:4px;}
.tp-ai-note{font-size:10px;color:#5a4a2a;font-style:italic;margin-top:6px;line-height:1.4;}
.tt-context-list{list-style:none;margin:0 0 2px 0;padding:0;}
.tt-context-list li{font-size:13px;color:#c8b882;padding:2px 0 2px 0;line-height:1.4;list-style:none;}
.ctx-label{font-size:11px;letter-spacing:0.8px;color:#8a7a52;text-transform:uppercase;margin-right:5px;font-family:'Cinzel',serif;}
.tt-context-list li::before{content:'•';position:absolute;left:0;color:#5a4a2a;}
/* Herrscher-Bereich */
.tt-ruler{font-size:14px;color:#d4a843;margin-bottom:2px;}
.tt-ruler-years{font-size:12px;color:#9a8a62;margin-left:4px;}
.tt-loading{font-size:13px;color:#7a6a4a;font-style:italic;}
/* Detail-Zeilen */
.tt-row{display:flex;justify-content:space-between;font-size:13px;color:#9a8a62;margin-bottom:2px;}
.tt-row span:last-child{color:#c8b882;}
/* Links */
.tt-links{margin-top:7px;padding-top:6px;border-top:1px solid #1a1a2a;display:flex;flex-direction:column;gap:3px;}
.tt-wiki{font-size:12px;color:#3a5a7a;display:flex;align-items:center;gap:5px;cursor:pointer;}
.tt-wiki:hover{color:#6a9aba;}
#tt-goto-year{margin-top:6px;width:calc(100% - 28px);padding:5px 8px;background:rgba(212,168,67,0.08);border:1px solid rgba(212,168,67,0.3);border-radius:3px;color:#a08030;font-family:'Cinzel',serif;font-size:10px;cursor:pointer;text-align:left;}
#tt-goto-year:hover{background:rgba(212,168,67,0.16);color:var(--gold2);border-color:var(--gold);}
.wiki-i{width:14px;height:14px;border-radius:50%;background:#1a3a5a;display:flex;align-items:center;justify-content:center;font-size:8px;color:#6a9aba;font-style:italic;flex-shrink:0;}
.prec-b{display:inline-block;font-size:12px;padding:2px 6px;border-radius:2px;}
.p1{background:rgba(160,120,60,0.2);color:#a07840;border:1px solid rgba(160,120,60,0.3);}
.p2{background:rgba(100,140,80,0.2);color:#80a060;border:1px solid rgba(100,140,80,0.3);}
.p3{background:rgba(80,120,160,0.2);color:#6090b0;border:1px solid rgba(80,120,160,0.3);}

/* LOADING */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;}
#loading h2{font-family:'Cinzel',serif;font-size:13px;letter-spacing:5px;color:#4a3a20;margin-bottom:14px;}
#lb-wrap{width:180px;height:2px;background:#1a1508;border-radius:2px;}
#lb{height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width 0.3s;}
#loading p{font-size:11px;color:#2a2010;margin-top:10px;font-style:italic;}
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:500;}

/* ── MOBILE ── */
/* mobile queries moved to bottom */
/* ── Herrscher klickbar ── */
.tt-ruler-link{cursor:pointer;transition:color .15s;}
.tt-ruler-link:hover{color:var(--gold2);}

/* ── C4: Timeline step easing (only while .tl-stepping, not during drag) ── */
#tl-wrap.tl-stepping #tl-fill{transition:width 120ms ease-out;}
#tl-wrap.tl-stepping #tl-thumb{transition:left 120ms ease-out;}
#tl-wrap.tl-stepping #thumb-year{transition:left 120ms ease-out;}

/* ── C6: Panel scroll gradient ── */
.tp-body{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 28px),transparent);}

/* ── C7: Panel hierarchy — active panel pops forward ── */
.terr-panel.active-panel,.ruler-panel-float.active-panel{box-shadow:0 16px 48px rgba(0,0,0,0.85);z-index:450;border-color:rgba(212,168,67,0.75);}

/* ── Herrscher Detail-Panels (draggable, mehrere) ── */
.ruler-panel-float{position:fixed;z-index:500;background:var(--panel);border:1px solid var(--gold);border-radius:3px;padding:0;min-width:220px;max-width:420px;box-shadow:0 8px 30px rgba(0,0,0,0.7);display:flex;flex-direction:column;}
.rp-drag-handle{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 8px;border-bottom:1px solid #1e1608;cursor:move;user-select:none;}
.rp-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);}
.rp-close{color:#5a4a2a;cursor:pointer;font-size:15px;line-height:1;}
.rp-close:hover{color:var(--gold);}
.rp-header-flag{height:20px;width:auto;max-width:36px;object-fit:contain;border:1px solid rgba(255,255,255,0.12);border-radius:2px;flex-shrink:0;}
.rp-ruler-name{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);padding:8px 14px 2px;line-height:1.3;flex-shrink:0;}
.rp-title-group{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden;}
.rp-type-icon{font-size:11px;color:#7a6a42;flex-shrink:0;}
.rp-years{font-size:13px;color:#9a8a62;padding:2px 14px 4px;flex-shrink:0;}
.rp-links{padding:6px 14px 12px;display:flex;flex-direction:column;gap:3px;flex-shrink:0;}
.rp-link{font-size:13px;color:#5a8aaa;text-decoration:none;}
.rp-link:hover{color:#8abada;}
.rp-link-uncertain{color:#9a8a62;font-style:italic;}
.rp-link-uncertain:hover{color:#c4a87a;}

/* ── Territory Panels (multi-open floating) ── */
.terr-panel{position:fixed;z-index:400;background:var(--panel);border:1px solid var(--gold);border-radius:3px;width:280px;min-width:200px;max-width:420px;box-shadow:0 8px 30px rgba(0,0,0,0.7);display:flex;flex-direction:column;overflow:hidden;}
.tp-handle{display:flex;align-items:center;padding:9px 12px 7px;border-bottom:1px solid #1e1608;cursor:move;user-select:none;gap:5px;}
.tp-flag{height:18px;width:auto;max-width:32px;object-fit:contain;border:1px solid rgba(255,255,255,0.12);border-radius:2px;flex-shrink:0;display:none;}
.tp-title-group{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden;}
.tp-type-icon{font-size:11px;color:#7a6a42;flex-shrink:0;}
.tp-name{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tp-btn{color:#5a4a2a;cursor:pointer;font-size:13px;line-height:1;padding:0 3px;flex-shrink:0;}
.tp-btn:hover{color:var(--gold);}
.tp-body{padding:10px 14px 12px;overflow-y:auto;max-height:calc(100vh - 200px);}
.tp-sub{font-size:13px;font-style:italic;color:#9a8a62;margin-bottom:8px;}
.tp-desc{font-size:12px;color:#9a8a62;line-height:1.5;margin:6px 0;padding:6px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-style:italic;display:none;}
.tp-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#3a2e18;font-size:10px;user-select:none;}
.tp-resize:hover{color:var(--gold);}

/* ── Snap-to-top: panel collapses to title bar ── */
.terr-panel.snapped .tp-body,
.ruler-panel-float.snapped .rp-body,
.ruler-panel-float.snapped .rp-links,
.ruler-panel-float.snapped .rp-mode-btns,
.ruler-panel-float.snapped .rp-resize,
#tooltip.snapped > *:not(#tt-header){display:none!important;}
.terr-panel.snapped,
.ruler-panel-float.snapped,
#tooltip.snapped{width:auto;min-width:120px;max-width:260px;cursor:default;border-color:#4a3a1a;}
.terr-panel.snapped .tp-handle,
.ruler-panel-float.snapped .rp-drag-handle,
#tooltip.snapped #tt-header{cursor:default;border-bottom:none;}

/* ── Einklapp-Button ── */
#ctrl-toggle{position:absolute;top:-26px;right:20px;background:rgba(7,12,18,0.95);border:1px solid var(--border);border-bottom:none;color:#6a5a3a;font-size:11px;padding:3px 10px;cursor:pointer;border-radius:3px 3px 0 0;font-family:'Cinzel',serif;z-index:201;}
#ctrl-toggle:hover{color:var(--gold);}
#ctrl-body{transition:max-height .3s ease;}
#controls.collapsed #ctrl-body{display:none;}
#controls.collapsed{height:auto!important;padding-bottom:4px;}
#controls.collapsed #ctrl-toggle{top:-26px;}

/* ── Zeitraum-Auswahl ── */
#era-select-row{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:5px;flex-wrap:wrap;}
.era-sel-btn{padding:4px 10px;font-size:11px;}
.era-sel-btn.active{background:rgba(212,168,67,0.2);border-color:var(--gold);color:var(--gold2);}
@media (max-width:768px){.era-sel-btn{padding:3px 8px;font-size:10px;}}

/* ── Legende Header + Toggle ── */
#legend-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6em;border-bottom:1px solid var(--border);padding-bottom:0.4em;}
#legend-title{font-family:'Cinzel',serif;font-size:1em;letter-spacing:2px;color:#8a7a52;text-transform:uppercase;user-select:none;}
#legend-toggle{background:none;border:none;color:#5a4a2a;font-size:14px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;}
#legend-toggle:hover{color:var(--gold);}
#legend.collapsed #legend-inner{display:none;}
#legend.collapsed #legend-header{margin-bottom:0;border-bottom:none;padding-bottom:0;}
#legend.collapsed{min-height:0;padding:0.5em 1.2em;}
#legend.collapsed #legend-resize{display:none;}

/* ── Herrscher-Bild im Panel ── */
.rp-img{width:100%;flex:1;min-height:120px;object-fit:cover;object-position:top;display:block;}

/* ── Tooltip Header ── */
#tt-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
#tooltip.pinned #tt-header{cursor:move;user-select:none;}

/* ── Floating event/city panels — match #tooltip.pinned exactly ── */
.tt-float{position:fixed;background:var(--panel);border:1px solid var(--gold);border-radius:2px;padding:14px 16px 13px;width:280px;z-index:500;box-shadow:0 8px 30px rgba(0,0,0,0.65),0 0 0 1px rgba(212,168,67,0.25);pointer-events:all;backdrop-filter:blur(12px);}
.tt-float-hdr{display:flex;align-items:center;gap:6px;margin-bottom:4px;cursor:move;user-select:none;}
.tt-float h3{font-family:'Cinzel',serif;font-size:16px;color:var(--gold2);line-height:1.3;flex:1;min-width:0;margin:0;}
.tt-float.snapped>.tt-float-hdr~*,.tt-float.minimized>.tt-float-hdr~*{display:none!important;}
.tt-float.snapped,.tt-float.minimized{padding:0;}
.tt-float.snapped .tt-float-hdr,.tt-float.minimized .tt-float-hdr{padding:7px 10px;margin-bottom:0;border-bottom:none;}
.tt-float.snapped{width:auto;min-width:120px;max-width:260px;border-color:#4a3a1a;}
.tt-float.snapped .tt-float-hdr{cursor:default;}
#tt-flag{height:22px;width:auto;max-width:36px;object-fit:contain;border:1px solid rgba(255,255,255,0.12);border-radius:2px;flex-shrink:0;}
#tt-event-img{display:none;width:calc(100% + 32px);margin:6px -16px 0;height:130px;object-fit:cover;object-position:center top;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

/* ── Territory Beschreibung ── */
#tt-desc{font-size:12px;color:#9a8a62;line-height:1.5;margin:6px 0;padding:6px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-style:italic;}

/* ── Hauptstadt-Link ── */
.tt-capital-link{color:#9a8a62;text-decoration:none;}
.tt-capital-link:hover{color:var(--gold);}

/* ── Herrscher-Panel Buttons ── */
.rp-btn{color:#5a4a2a;cursor:pointer;font-size:13px;line-height:1;padding:0 3px;}
.rp-btn:hover{color:var(--gold);}
.rp-drag-handle{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 8px;border-bottom:1px solid #1e1608;cursor:move;user-select:none;gap:4px;}
.rp-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rp-body{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;}
.ruler-panel-float{overflow:hidden;}

/* ── Resize Handle ── */
.rp-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#3a2e18;font-size:10px;user-select:none;}
.rp-resize:hover{color:var(--gold);}


/* ── Territories Overview ── */
#terr-list-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid #3a3020;background:transparent;
  color:#5a4a2a;font-size:10px;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
  flex-shrink:0;margin-left:8px;vertical-align:middle;
  font-family:'Crimson Text',serif;letter-spacing:0;
}
#terr-list-btn:hover{border-color:var(--gold);color:var(--gold);}

/* Overlay — same pattern as intro */
#terr-overlay{
  position:fixed;inset:0;z-index:900;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);backdrop-filter:blur(0px);
  transition:background .25s ease, backdrop-filter .25s ease;
}
#terr-overlay.visible{background:rgba(7,12,18,0.72);backdrop-filter:blur(8px);}

#terr-panel{
  position:relative;
  width:min(860px,92vw);max-height:82vh;
  background:rgba(7,12,18,0.97);
  border:1px solid rgba(212,168,67,0.18);border-radius:3px;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
}
#terr-overlay.visible #terr-panel{opacity:1;transform:translateY(0);}

#terr-header{
  padding:22px 28px 16px;border-bottom:1px solid #1e1608;flex-shrink:0;
}
#terr-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:#5a4a2a;font-size:18px;
  cursor:pointer;line-height:1;padding:2px 4px;
}
#terr-close:hover{color:var(--gold);}
#terr-header h2{
  font-family:'Cinzel',serif;font-size:15px;letter-spacing:3px;
  color:var(--gold2);text-transform:uppercase;margin-bottom:4px;
}
#terr-header p{font-size:12px;color:#5a4a2a;line-height:1.5;}

#terr-search-row{
  padding:10px 28px;border-bottom:1px solid #1e1608;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#terr-search{
  flex:1;background:rgba(255,255,255,0.03);border:1px solid #2a2010;
  border-radius:2px;padding:5px 10px;color:var(--txt);font-size:13px;
  font-family:'Crimson Text',serif;outline:none;
}
#terr-search:focus{border-color:#4a3a1a;}
#terr-search::placeholder{color:#3a3020;}
#terr-count-lbl{font-size:11px;color:#3a3020;white-space:nowrap;flex-shrink:0;}

#terr-table-wrap{overflow-y:auto;flex:1;min-height:0;}
.terr-table{width:100%;border-collapse:collapse;font-size:13px;}
.terr-table thead th{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;
  color:#4a3a1a;text-transform:uppercase;padding:8px 12px 7px;
  text-align:left;border-bottom:1px solid #1e1608;
  position:sticky;top:0;background:rgba(7,12,18,0.98);
}
.terr-table thead th.to-num{text-align:right;}
.terr-table tbody tr{border-bottom:1px solid rgba(30,22,8,0.5);}
.terr-table tbody tr:hover{background:rgba(212,168,67,0.04);}
.to-name{padding:7px 12px;color:#b0a070;font-size:13px;white-space:nowrap;}
.to-cell{padding:7px 12px;color:#6a5a3a;font-size:12px;}
.to-num{text-align:right;}
.to-link{
  color:#3a5070;font-size:11px;text-decoration:none;margin-left:5px;
  opacity:0.7;vertical-align:middle;transition:color .12s,opacity .12s;
}
.to-link:hover{color:var(--gold2);opacity:1;}
.to-qid{color:#3a5070;text-decoration:none;font-size:11px;font-family:'Courier New',monospace;}
.to-qid:hover{color:var(--gold2);}
.to-type{font-size:10px;letter-spacing:0.5px;padding:2px 5px;border-radius:2px;font-family:'Cinzel',serif;}
.to-type-ruler_based  {background:rgba(80,120,60,0.2); color:#7aaa5a;}
.to-type-multi_context{background:rgba(80,100,150,0.2);color:#7a9acd;}
.to-type-context_only {background:rgba(100,80,30,0.2); color:#9a8050;}
.to-period{white-space:nowrap;color:#5a5040;font-size:11px;min-width:130px;}

/* ── Eingeklappte Steuerung: Karte füllt ganzen Bildschirm ── */
#controls.collapsed ~ #map-container,
body:has(#controls.collapsed) #map-container { bottom: 0 !important; }
#controls.collapsed { height: auto !important; padding: 4px 20px !important; }

/* ── Info button (i) next to title ── */
#tour-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid #3a3020;background:transparent;
  color:#5a4a2a;font-size:10px;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
  flex-shrink:0;margin-right:4px;vertical-align:middle;
}
#tour-btn:hover{border-color:var(--gold);color:var(--gold);}
#info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid #3a3020;background:transparent;
  color:#5a4a2a;font-family:'Crimson Text',serif;font-size:11px;font-style:italic;font-weight:600;
  cursor:pointer;line-height:1;transition:border-color .15s,color .15s;
  flex-shrink:0;margin-right:8px;vertical-align:middle;
}
#info-btn:hover{border-color:var(--gold);color:var(--gold);}

/* ── Intro overlay ── */
#intro-overlay{
  position:fixed;inset:0;z-index:900;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);backdrop-filter:blur(0px);
  transition:background .25s ease, backdrop-filter .25s ease;
}
#intro-overlay.visible{
  background:rgba(7,12,18,0.72);backdrop-filter:blur(8px);
}

/* ── Intro panel ── */
#intro-panel{
  position:relative;
  width:min(560px,90vw);max-height:88vh;
  background:rgba(7,12,18,0.97);
  border:1px solid rgba(212,168,67,0.2);border-radius:3px;
  padding:36px 40px 30px;
  overflow-y:auto;
  opacity:0;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  font-family:'Crimson Text',serif;
}
#intro-overlay.visible #intro-panel{opacity:1;transform:translateY(0);}

#intro-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:#5a4a2a;font-size:18px;
  cursor:pointer;line-height:1;padding:2px 4px;
}
#intro-close:hover{color:var(--gold);}

#intro-logo{
  display:block;margin:0 auto 24px;
  width:80%;max-width:380px;height:auto;
  filter:drop-shadow(0 0 18px rgba(212,168,67,0.3));
}

#intro-body{font-size:14px;color:#b0a070;line-height:1.75;margin-bottom:20px;text-align:center;}
#intro-body p{margin-bottom:14px;}
#intro-body p:last-child{margin-bottom:0;}
#intro-body ul{margin:8px auto 14px;color:#9a8a62;display:inline-block;text-align:left;}
#intro-body li{margin-bottom:5px;}
#intro-body a{color:#6a8aaa;text-decoration:none;}
#intro-body a:hover{color:var(--gold2);}

/* ── Expand row (More / Updates) ── */
#intro-expand-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;gap:12px;
}
#intro-more-toggle,
#intro-updates-toggle{
  font-size:12px;color:#5a4a2a;cursor:pointer;letter-spacing:0.5px;
  transition:color .15s;
}
#intro-more-toggle:hover,
#intro-updates-toggle:hover{color:var(--gold);}
#intro-more-toggle.open,
#intro-updates-toggle.open{color:#8a7040;}

#intro-more-content,
#intro-updates-content{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
#intro-more-content.open{max-height:700px;}
#intro-updates-content.open{max-height:700px;}

#intro-more-inner,
#intro-updates-inner{
  border-top:1px solid #1e1608;padding-top:18px;margin-top:4px;
  margin-bottom:18px;
}
#intro-more-inner h2,
#intro-updates-inner h2{
  font-family:'Cinzel',serif;font-size:13px;letter-spacing:2px;
  color:#8a7040;text-transform:uppercase;margin-bottom:14px;
}
#intro-more-inner p,
#intro-more-inner li,
#intro-updates-inner p,
#intro-updates-inner li{font-size:13px;color:#7a6a4a;line-height:1.7;}
#intro-more-inner p,
#intro-updates-inner p{margin-bottom:10px;}
#intro-more-inner ul,
#intro-updates-inner ul{margin:6px 0 12px 18px;}
#intro-more-inner li,
#intro-updates-inner li{margin-bottom:4px;}
#intro-updates-inner strong{color:#9a8a62;}
#intro-updates-inner a{color:#6a8aaa;text-decoration:none;}
#intro-updates-inner a:hover{color:var(--gold2);}

/* ── Actions ── */
#intro-actions{
  display:flex;justify-content:center;gap:12px;
  border-top:1px solid #1e1608;padding-top:16px;margin-top:4px;
}
#intro-explore{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;
  padding:7px 18px;border:1px solid #3a2e18;background:transparent;
  color:#7a6a42;border-radius:2px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
#intro-explore:hover{border-color:var(--gold);color:var(--gold2);background:rgba(212,168,67,0.08);}
#intro-tour{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;
  padding:7px 18px;border:1px solid #2a2010;background:transparent;
  color:#5a4a2a;border-radius:2px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
#intro-tour:hover{border-color:var(--gold);color:var(--gold2);background:rgba(212,168,67,0.06);}
#intro-trail{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;
  padding:7px 18px;border:1px solid #2a2010;background:transparent;
  color:#5a4a2a;border-radius:2px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
#intro-trail:hover{border-color:var(--gold);color:var(--gold2);background:rgba(212,168,67,0.06);}

/* ── Guided Tour ── */
#tour-hl{
  position:fixed;border-radius:4px;z-index:800;
  pointer-events:none;opacity:0;
  transition:opacity .2s ease;
}
#tour-hl.tr-on{opacity:1;}

#tour-tt{
  position:fixed;width:300px;z-index:850;
  background:rgba(7,12,18,0.97);
  border:1px solid rgba(212,168,67,0.35);border-radius:3px;
  padding:18px 20px 16px;
  font-family:'Crimson Text',serif;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
#tour-tt.tr-on{opacity:1;pointer-events:all;}
#tour-tt .tt-count{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;color:#5a4a2a;text-transform:uppercase;margin-bottom:6px;}
#tour-tt .tt-title{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);margin-bottom:8px;line-height:1.3;}
#tour-tt .tt-body{font-size:14px;color:#b0a070;line-height:1.65;margin-bottom:14px;white-space:pre-line;}
#tour-tt .tt-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1e1608;padding-top:12px;}
#tour-tt .tt-skip{background:none;border:none;color:#3a3020;font-size:11px;font-family:'Cinzel',serif;letter-spacing:0.5px;cursor:pointer;padding:0;transition:color .15s;}
#tour-tt .tt-skip:hover{color:#6a5a3a;}
#tour-tt .tt-next,#tour-tt .tt-skip.tt-equal{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;padding:5px 14px;border:1px solid #3a2e18;background:transparent;color:#8a7a4a;border-radius:2px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
#tour-tt .tt-next:hover,#tour-tt .tt-skip.tt-equal:hover{border-color:var(--gold);color:var(--gold2);background:rgba(212,168,67,0.08);}

/* arrow pointing down (tooltip above target) */
#tour-tt.tr-arr-down::before{
  content:'';position:absolute;bottom:-9px;
  left:var(--arrow-x,150px);transform:translateX(-50%);
  border:9px solid transparent;border-bottom:0;
  border-top-color:rgba(212,168,67,0.35);
}
#tour-tt.tr-arr-down::after{
  content:'';position:absolute;bottom:-7px;
  left:var(--arrow-x,150px);transform:translateX(-50%);
  border:7px solid transparent;border-bottom:0;
  border-top-color:rgba(7,12,18,0.97);
}
/* arrow pointing left (tooltip right of target) */
#tour-tt.tr-arr-left::before{
  content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  border:9px solid transparent;border-left:0;
  border-right-color:rgba(212,168,67,0.35);
}
#tour-tt.tr-arr-left::after{
  content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-left:0;
  border-right-color:rgba(7,12,18,0.97);
}

/* ── Minimized HUD ── */
#min-hud{
  position:fixed;top:14px;right:14px;z-index:550;
  display:none;align-items:center;gap:14px;
}
body:has(#controls.collapsed) #min-hud{display:flex;}
#min-logo,#min-year{pointer-events:none;}
#min-year-input{
  width:88px;padding:4px 8px;
  background:rgba(7,12,18,0.82);border:1px solid rgba(212,168,67,0.35);border-radius:3px;
  color:#d4a843;font-family:'Cinzel',serif;font-size:13px;text-align:center;
  outline:none;
  -moz-appearance:textfield;
}
#min-year-input::-webkit-outer-spin-button,
#min-year-input::-webkit-inner-spin-button{-webkit-appearance:none;}
#min-year-input:focus{border-color:var(--gold);}
#min-year{
  font-family:'Cinzel',serif;font-size:28px;font-weight:700;
  color:#fff5c8;white-space:nowrap;
  text-shadow:0 0 20px rgba(255,230,140,0.5),0 2px 8px rgba(0,0,0,0.8);
  letter-spacing:1px;
}
#min-logo{
  height:54px;width:auto;
  filter:drop-shadow(0 0 10px rgba(212,168,67,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}

/* ══════════════════════════════════════════════════════
   MOBILE — Bottom Strip + Drawer + Bottom Sheet
   ══════════════════════════════════════════════════════ */

/* Desktop: hide mobile-only elements */
#m-year { display: none; }
#m-more { display: none; }

/* ── Bottom Sheet ── */
#m-sheet {
  position: fixed; bottom: -100%; left: 0; right: 0;
  height: 62vh; z-index: 600;
  background: rgba(7,12,18,0.97);
  border-top: 1px solid rgba(212,168,67,0.35);
  border-radius: 12px 12px 0 0;
  transition: bottom .3s ease;
  display: none; flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.7);
}
#m-sheet.open { bottom: 72px; }
@media (max-width: 768px) { #m-sheet { display: flex; } }

#m-sheet-handle {
  width: 40px; height: 4px; background: #3a3020; border-radius: 2px;
  margin: 10px auto 6px; flex-shrink: 0; cursor: pointer;
}
#m-sheet-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
#m-sheet-nav-label {
  flex: 1; font-family: 'Cinzel', serif; font-size: 13px;
  color: var(--gold2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#m-sheet-back {
  background: none; border: none; color: #5a4a2a; font-size: 18px;
  cursor: pointer; padding: 4px 6px; line-height: 1; display: none;
}
#m-sheet-back:hover { color: var(--gold); }
#m-sheet-close {
  background: none; border: none; color: #5a4a2a; font-size: 15px;
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
#m-sheet-close:hover { color: var(--gold); }
#m-sheet-scroll { flex: 1; overflow-y: auto; padding: 10px 14px 24px; }

/* Sheet content */
.ms-title { font-family: 'Cinzel', serif; font-size: 17px; color: var(--gold2); margin-bottom: 4px; line-height: 1.3; }
.ms-sub   { font-size: 13px; font-style: italic; color: #9a8a62; margin-bottom: 8px; }
.ms-desc  { font-size: 13px; color: #9a8a62; line-height: 1.6; margin: 8px 0; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-style: italic; }
.ms-ctx   { margin: 8px 0; }
.ms-ctx-row { font-size: 13px; color: #c8b882; padding: 2px 0; line-height: 1.5; }
.ms-section-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.5px; color: #7a6a4a; text-transform: uppercase; margin: 10px 0 4px; }
.ms-ruler { font-size: 15px; color: #d4a843; margin-bottom: 0; cursor: pointer; padding: 6px 0; border-bottom: 1px solid rgba(30,22,8,0.4); }
.ms-ruler:active { color: var(--gold2); }
.ms-ruler-years { font-size: 12px; color: #9a8a62; margin-left: 5px; }
.ms-row { display: flex; justify-content: space-between; font-size: 13px; color: #9a8a62; margin-bottom: 4px; padding: 3px 0; }
.ms-row span:last-child { color: #c8b882; }
.ms-links { margin-top: 14px; padding-top: 10px; border-top: 1px solid #1e1608; display: flex; flex-direction: column; gap: 6px; }
.ms-link  { font-size: 13px; color: #5a8aaa; text-decoration: none; }
.ms-link:hover { color: #8abada; }
.ms-goto-year { margin-top: 10px; width: 100%; padding: 8px 12px; background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.3); border-radius: 3px; color: #a08030; font-family: 'Cinzel', serif; font-size: 13px; cursor: pointer; text-align: left; }
.ms-goto-year:hover { background: rgba(212,168,67,0.16); color: var(--gold2); }
.ms-ruler-img { height: 220px; width: auto; max-width: 100%; object-fit: contain; object-position: top center; display: block; margin-bottom: 10px; border-radius: 3px; }
.ms-ruler-name { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold2); margin-bottom: 4px; }
.ms-years-big  { font-size: 14px; color: #9a8a62; margin-bottom: 10px; }
.ms-loading    { font-size: 13px; color: #7a6a4a; font-style: italic; }

/* ── Collapsed controls: map fills screen ── */
#controls.collapsed { height: auto !important; padding: 4px 10px !important; }
body:has(#controls.collapsed) #map-container { bottom: 0 !important; }

/* ── Tooltip Modus-Buttons ── */
.tt-mode-btns{position:absolute;bottom:6px;right:6px;display:flex;gap:4px;}
.tt-mode-btn{
  background:rgba(7,12,18,0.7);
  border:1px solid var(--border);
  color:#5a4a2a;
  cursor:pointer;
  font-size:13px;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;
  user-select:none;
  -webkit-user-select:none;
}
.tt-mode-btn:hover{color:var(--gold);border-color:var(--gold);}
.tt-mode-btn.active{color:var(--gold2);border-color:var(--gold2);background:rgba(212,168,67,0.15);}

/* ── Tooltip resize handle ── */
#tooltip{position:fixed;overflow:visible;}
#tooltip .tt-resize{
  position:absolute;bottom:0;right:0;
  width:16px;height:16px;
  cursor:nwse-resize;
  display:none;
}
#tooltip.resize-mode .tt-resize{display:block;}
#tooltip.resize-mode{cursor:default;}

/* ── Herrscher Panel Modus-Buttons ── */
.rp-mode-btns{display:flex;gap:4px;padding:4px 10px 8px;justify-content:flex-end;}
.rp-mode-btn{
  background:rgba(7,12,18,0.7);
  border:1px solid var(--border);
  color:#5a4a2a;
  cursor:pointer;
  font-size:12px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;
}
.rp-mode-btn.active{color:var(--gold2);border-color:var(--gold2);}

/* ══════════════════════════════════════════
   MOBILE (≤768px) — Bottom Strip + Drawer
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Tour tooltip: narrower to avoid overflow */
  #tour-tt { width: 260px !important; }

  /* Controls: bottom strip with collapsible drawer */
  #controls {
    height: auto !important;
    overflow: visible !important;
    padding: 4px 8px 6px !important;
  }
  #ctrl-body {
    max-height: 80px;
    overflow: hidden;
  }

  /* Keep ctrl-body visible on mobile even when .collapsed */
  #controls.collapsed #ctrl-body { display: block !important; max-height: 80px; overflow: hidden; }
  #controls.collapsed { padding: 4px 8px 6px !important; }

  /* Map stays full height — strip overlays it */
  #map-container { bottom: 0 !important; }

  /* Timeline: compact */
  #tl-wrap { height: 16px; margin: 3px 0 16px; }
  #thumb-year { display: none; }
  #epoch-row  { display: none; }

  /* Button row: single strip line */
  #btn-row { flex-wrap: nowrap; gap: 4px; padding: 0; align-items: center; }
  .btn-group-left  { border: none; padding: 0; gap: 3px; flex-shrink: 0; }
  .btn-group-center { display: none; }
  .btn-group-right { flex-shrink: 0; gap: 4px; }
  #layer-btns { display: none; border: none; padding: 0; }
  #play-btns  { border: none; padding: 0; gap: 4px; }

  /* Strip: hide ±100, year input, speed, backward play, period selector */
  #s-100b, #s-100f { display: none; }
  #year-input { display: none; }
  #s-2h, #s-1h, #sh, #s1, #s2, #s3 { display: none; }
  #era-select-row { display: none; }
  #ctrl-toggle { display: none; }

  /* m-year: compact year display in strip */
  #m-year {
    display: inline-block;
    font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
    color: #d4a843; white-space: nowrap; min-width: 68px; text-align: center;
    flex-shrink: 0; padding: 0 2px;
    text-shadow: 0 0 10px rgba(212,168,67,0.35);
  }
  #m-more {
    display: flex !important; align-items: center; justify-content: center;
    position: absolute; top: -28px; right: 8px; z-index: 210;
    font-size: 12px; padding: 2px 8px; min-height: 22px; min-width: 28px;
    border-radius: 4px 4px 0 0; border: 1px solid var(--border); border-bottom: none;
    background: rgba(7,12,18,0.97); color: #6a5a3a; cursor: pointer;
  }
  #tl-start-lbl, #tl-end-lbl {
    display: block; position: absolute; top: calc(100% + 3px);
    font-family: 'Cinzel', serif; font-size: 9px; color: #7a6830;
    white-space: nowrap; pointer-events: none; line-height: 1;
  }
  #tl-start-lbl { left: 0; }
  #tl-end-lbl   { right: 0; text-align: right; }

  /* Touch buttons: flex-centered so text sits at midpoint regardless of height */
  .btn { display: inline-flex; align-items: center; justify-content: center;
         font-size: 11px; padding: 4px 7px; min-height: 32px; min-width: 28px;
         touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn-play { padding: 4px 12px; }
  .btn:focus { outline: none; box-shadow: none; }

  /* Drawer: show everything when .m-open */
  #controls.m-open #ctrl-body { max-height: 480px; overflow-y: auto; touch-action: pan-y; }

  #controls.m-open #era-select-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px;
  }
  #controls.m-open #btn-row { flex-wrap: wrap; justify-content: center; gap: 4px; }

  /* 1 — step buttons */
  #controls.m-open .btn-group-left {
    order: 1; width: 100%; justify-content: center; flex-wrap: wrap; gap: 4px;
    border: 1px solid rgba(212,168,67,0.12); border-radius: 3px; padding: 4px 8px;
  }
  /* 2 — play + events/pleiades stacked */
  #controls.m-open .btn-group-right {
    order: 2; width: 100%; flex-direction: column; align-items: stretch; gap: 4px;
    border: none; padding: 0;
  }
  #controls.m-open #play-btns {
    order: 1; flex-wrap: wrap; justify-content: center;
    border: 1px solid rgba(212,168,67,0.12); border-radius: 3px; padding: 4px 8px;
  }
  #controls.m-open #layer-btns {
    order: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
    border: 1px solid rgba(212,168,67,0.12); border-radius: 3px; padding: 4px 8px;
  }
  /* 3 — logo + menu last */
  #controls.m-open .btn-group-center {
    order: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    width: 100%; position: static; transform: none;
  }

  /* reveal hidden buttons in drawer */
  #controls.m-open #s-100b, #controls.m-open #s-100f { display: inline-flex; }
  #controls.m-open #year-input { display: inline-block; width: 68px; }
  #controls.m-open #s-2h, #controls.m-open #s-1h { display: inline-flex; }
  #controls.m-open #sh, #controls.m-open #s1,
  #controls.m-open #s2, #controls.m-open #s3 { display: inline-flex; }
  #m-more.open { color: var(--gold2); border-color: var(--gold); }

  /* Desktop floating panels: hidden on mobile — use sheet */
  .terr-panel { display: none !important; }
  .ruler-panel-float { display: none !important; }
  #tooltip { display: none !important; }
  #tooltip-bar { display: none !important; }

  /* HUD: hidden on mobile (year shown in strip) */
  #min-hud { display: none !important; }

  /* Legend: compact, top-left */
  #legend { top: 10px; left: 10px; width: 150px; font-size: 11px; bottom: auto; }
  #legend.collapsed { display: block; }

  /* Cities: larger tap targets */
  .city-dot { r: 6; }
}

/* ── Trails ── */
.btn-trails{letter-spacing:1.5px;font-size:11px;}
.btn-trails.on{background:rgba(212,168,67,0.2);border-color:var(--gold2);color:var(--gold2);}

#trail-panel{
  position:fixed;bottom:146px;left:230px;
  width:360px;background:var(--panel);border:1px solid var(--gold);border-radius:3px;
  z-index:600;box-shadow:0 8px 30px rgba(0,0,0,0.7);backdrop-filter:blur(12px);
  display:none;flex-direction:column;overflow:hidden;
}
#trail-panel-hdr{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 7px;border-bottom:1px solid var(--border);flex-shrink:0;
}
#trail-panel-name{
  font-family:'Cinzel',serif;font-size:10px;color:var(--gold);
  letter-spacing:1.5px;text-transform:uppercase;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#trail-panel-counter{font-size:11px;color:#7a6a4a;flex-shrink:0;}
#trail-panel-img{width:100%;height:130px;object-fit:cover;object-position:center top;display:none;flex-shrink:0;}
#trail-panel-body{padding:10px 14px 8px;overflow-y:auto;max-height:160px;}
#trail-step-title{
  font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);
  margin-bottom:6px;line-height:1.3;
}
#trail-progress{display:flex;gap:5px;margin-bottom:8px;}
.trail-dot{width:6px;height:6px;border-radius:50%;background:#2a2010;border:1px solid #3a3020;transition:background .2s;}
.trail-dot.done{background:#5a4a2a;border-color:#7a6a42;}
.trail-dot.active{background:var(--gold);border-color:var(--gold2);}
#trail-step-desc{font-size:12px;color:#9a8a62;line-height:1.6;}
#trail-panel-footer{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 10px;border-top:1px solid var(--border);flex-shrink:0;
}
#trail-btn-prev,#trail-btn-next{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.5px;
  padding:5px 11px;background:rgba(212,168,67,0.07);
  border:1px solid rgba(212,168,67,0.25);color:var(--gold2);
  border-radius:2px;cursor:pointer;transition:background .12s;flex-shrink:0;
}
#trail-btn-prev:hover,#trail-btn-next:hover{background:rgba(212,168,67,0.16);}
#trail-btn-prev:disabled{opacity:.3;cursor:default;}
#trail-btn-next.trail-btn-finish{border-color:rgba(212,168,67,0.5);color:var(--gold);}
#trail-wiki-btn{flex:1;justify-content:center;cursor:pointer;}

#trail-menu{
  position:fixed;display:none;
  background:var(--panel);border:1px solid var(--gold);border-radius:3px;
  z-index:700;box-shadow:0 4px 20px rgba(0,0,0,0.65);min-width:220px;overflow:hidden;
}
#trail-menu.open{display:block;}
#trail-menu-hint{
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);text-align:center;padding:7px 12px 4px;opacity:0.7;
  animation:trailHintPulse 1s ease-in-out 3;
}
@keyframes trailHintPulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
.trail-menu-item{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.trail-menu-item:last-child{border-bottom:none;}
.trail-menu-item:hover{background:rgba(212,168,67,0.08);}
.trail-menu-title{font-family:'Cinzel',serif;font-size:13px;color:var(--gold2);}
.trail-menu-sub{font-size:11px;color:#7a6a4a;margin-top:2px;}

/* Trail related links (mobile tap-to-open) */
#trail-related{padding:0 14px 8px;display:flex;flex-direction:column;gap:5px;}
#trail-rel-terr,#trail-rel-ev{
  font-size:12px;color:var(--gold2);cursor:pointer;
  padding:4px 10px;background:rgba(212,168,67,0.07);
  border:1px solid rgba(212,168,67,0.2);border-radius:2px;
  transition:background .12s;text-align:left;
}
#trail-rel-terr:hover,#trail-rel-ev:hover{background:rgba(212,168,67,0.15);}

/* ── Smartphone (≤480px) ── */
@media (max-width: 480px) {
  #controls { padding: 4px 6px 5px !important; }
  .btn { font-size: 11px; padding: 3px 6px; min-height: 30px; }
  #m-year { font-size: 12px; min-width: 58px; }
  #legend { width: 130px; font-size: 10px; }
  .city-dot { r: 5; }
  #trail-panel{
    width: 100vw;
    left: 0;
    bottom: 0;
    max-height: 52vh;
    border-radius: 3px 3px 0 0;
  }
  #trail-panel-body{flex:1;max-height:none;overflow-y:auto;}
}

/* ══════════════════════════════════════════
   SEARCH OVERLAY (B1)
   ══════════════════════════════════════════ */
#search-overlay {
  position: fixed; inset: 0; z-index: 950;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
  background: rgba(0,0,0,0); backdrop-filter: blur(0px);
  transition: background .2s ease, backdrop-filter .2s ease;
}
#search-overlay.visible {
  background: rgba(7,12,18,0.65); backdrop-filter: blur(6px);
}
#search-box {
  width: min(560px, 92vw);
  background: rgba(7,12,18,0.97);
  border: 1px solid rgba(212,168,67,0.22);
  border-radius: 3px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.75);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  overflow: hidden;
}
#search-overlay.visible #search-box { opacity: 1; transform: translateY(0); }

#search-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #1e1608;
}
#search-icon { font-size: 17px; color: #4a3a1a; flex-shrink: 0; }
#search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--txt); font-size: 15px; font-family: 'Crimson Text', serif;
}
#search-input::placeholder { color: #3a3020; }
#search-meta { font-size: 11px; color: #3a3020; white-space: nowrap; flex-shrink: 0; }
#search-close {
  background: none; border: none; color: #3a3020;
  font-size: 16px; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
}
#search-close:hover { color: var(--gold); }

#search-results { max-height: 380px; overflow-y: auto; }
.sr-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(30,22,8,0.4);
  transition: background .1s ease;
}
.sr-row:hover, .sr-row.sr-active { background: rgba(212,168,67,0.07); }
.sr-icon { font-size: 11px; flex-shrink: 0; width: 14px; text-align: center; }
.sr-icon-territory { color: #d4a843; }
.sr-icon-ruler     { color: #8ab0da; }
.sr-icon-event     { color: #e05828; }
.sr-icon-settlement{ color: #d4a855; }
.sr-label { flex: 1; font-size: 13px; color: #c8b98a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub   { font-size: 11px; color: #5a4a2a; white-space: nowrap; flex-shrink: 0; }
.sr-year  { font-size: 11px; color: #3a3020; white-space: nowrap; flex-shrink: 0; font-family: 'Cinzel', serif; }
.sr-empty { padding: 18px 14px; color: #4a3a1a; font-size: 13px; text-align: center; }

#search-hint {
  padding: 7px 14px;
  font-size: 10px; color: #2a2018; letter-spacing: 0.5px;
  border-top: 1px solid #1e1608;
  text-align: center;
}

/* Search button — round, matches info-btn / terr-list-btn style */
#search-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid #3a3020;background:transparent;
  color:#5a4a2a;font-size:12px;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
  flex-shrink:0;margin-left:8px;vertical-align:middle;
}
#search-btn:hover{border-color:var(--gold);color:var(--gold);}