*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#fff;color:#1d2a3a;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;gap:14px;align-items:center;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid #e3e9f0}
header .back{color:#1a6fd6;text-decoration:none;font-weight:600}#info{color:#64748b;font-size:12px;margin-left:auto}
#globe{position:fixed;inset:0;touch-action:none}
#legend{position:fixed;left:10px;top:56px;z-index:4;font-size:11px;color:#64748b;background:rgba(255,255,255,.85);padding:4px 8px;border-radius:8px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#1a6fd6;vertical-align:-1px}.dot.approx{background:#fff;border:2px dashed #f08a24}
.pin{transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;border-radius:999px;background:#1a6fd6;color:#fff;font:600 11px/1 -apple-system,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,40,90,.35);border:2px solid #fff;user-select:none;-webkit-user-select:none}
.pin.approx{background:#fff7ee;color:#c25e00;border:2px dashed #f08a24}.pin:hover{filter:brightness(1.1);z-index:9}
aside{position:fixed;z-index:6;right:12px;top:60px;bottom:76px;width:360px;background:#fff;border:1px solid #e3e9f0;border-radius:14px;box-shadow:0 8px 30px rgba(20,40,80,.15);display:flex;flex-direction:column;overflow:hidden}
.hidden{display:none!important}.ph{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid #eef2f6}.ph b{flex:1}
.ph button{border:0;background:#eef2f6;border-radius:50%;width:30px;height:30px;font-size:14px}
#pnote{font-size:11px;color:#c25e00;padding:0 14px}#pnote:empty{display:none}#pnote{padding-top:6px}
#plist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
#plist li{display:flex;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid #f2f5f8}#plist li.cur{background:#eaf3ff}
#plist .pl{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:#1a6fd6;color:#fff;font-size:13px}
#plist .t{flex:1;min-width:0}#plist .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#plist .m{font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pmore{margin:8px;padding:8px;border:1px solid #d5dde6;background:#f7f9fb;border-radius:8px}
footer{position:fixed;z-index:6;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid #e3e9f0}
footer button{width:40px;height:40px;border-radius:50%;border:0;background:#1a6fd6;color:#fff;font-size:16px;flex:none}#bfav{background:#eef2f6;color:#e0a100}
#bnow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}#beng{font-size:10px;color:#94a3b8}#bvol{width:90px}
@media (max-width:700px){aside{left:0;right:0;top:auto;bottom:64px;width:auto;height:55vh;border-radius:16px 16px 0 0}#legend{font-size:10px}}

.ph button,#plist .pl,footer button{display:grid;place-items:center;padding:0;line-height:0;-webkit-appearance:none;appearance:none}
#plist .pl svg,footer button svg{display:block}
#bfav{font-size:20px;line-height:0}
.vl{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#456;flex:none;white-space:nowrap}.vl svg{display:block}

/* header: back + title, one line */
header{flex-wrap:nowrap;white-space:nowrap}header .back,header .ttl{flex:none}
/* footer: independent two-line bar */
#legal{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:6px 12px max(6px,env(safe-area-inset-bottom));text-align:center;font-size:10.5px;line-height:15px;color:#8a97a8;background:#f4f7fa;border-top:1px solid #dfe6ee}
#legal #info{color:#64748b;margin:0;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#legal a{color:#6b84a6;text-decoration:none}#legal a:hover{text-decoration:underline}
/* player island: liquid glass */
footer#bar{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 24px);max-width:640px;bottom:calc(48px + env(safe-area-inset-bottom));padding:8px 14px 8px 8px!important;border-radius:24px;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 34px rgba(20,50,100,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.gsl{position:relative;width:110px;height:32px;flex:none;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.gtr{position:absolute;left:9px;right:9px;top:14px;height:4px;border-radius:2px;background:rgba(30,60,100,.15);overflow:hidden}.gfill{height:100%;background:#1a6fd6}
.gth{position:absolute;top:7px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,30,70,.35)}
aside{bottom:calc(122px + env(safe-area-inset-bottom))}
@media (max-width:700px){.gsl{width:84px}.vl #bvp{font-size:10px}aside{bottom:calc(118px + env(safe-area-inset-bottom));height:calc(100vh - 190px - env(safe-area-inset-bottom));max-height:55vh}}
#legend{top:calc(44px + env(safe-area-inset-top))}
header h1.ttl{font-size:inherit;margin:0;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
header{display:grid;grid-template-columns:1fr auto 1fr}header .back{justify-self:start}header .ttl{text-align:center}
header .back svg{display:inline-block;width:1.4em;height:.85em;margin-right:.25em;vertical-align:-.05em}
/* carousel layout: transparent header (title only) + era arrows at mid-viewport */
header{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;pointer-events:none}
header .ttl{grid-column:2;pointer-events:auto;text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.8)}
header .back{position:fixed;top:50%;transform:translateY(-50%);left:max(6px,env(safe-area-inset-left));right:auto;z-index:7;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:8px 10px;box-sizing:border-box;border-radius:22px;background:rgba(255,255,255,.72);box-shadow:0 1px 6px rgba(0,0,0,.12);-webkit-tap-highlight-color:transparent}
header .back.fwd{left:auto;right:max(6px,env(safe-area-inset-right));flex-direction:column-reverse}
header .back svg,header .back.fwd svg{margin:0!important;width:22px;height:13px}
@media (max-width:480px){header .back{padding:6px;font-size:11px;min-width:44px}}
/* Aqua glass era pills */
header .back{overflow:hidden;color:#fff;text-shadow:0 1px 1px rgba(0,40,110,.55);border:1px solid rgba(255,255,255,.55);
background:linear-gradient(180deg,rgba(120,180,255,.55) 0%,rgba(40,120,230,.55) 55%,rgba(70,160,255,.62) 100%);
-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
box-shadow:0 3px 10px rgba(0,50,130,.28),inset 0 -6px 10px rgba(160,215,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s,filter .12s}
header .back::before{content:"";position:absolute;left:8%;right:8%;top:2px;height:46%;border-radius:20px 20px 12px 12px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.12))}
header .back>*{position:relative}
header .back:hover{filter:brightness(1.08)}
header .back:active{transform:translateY(-50%) scale(.95);filter:brightness(.92);box-shadow:0 1px 4px rgba(0,50,130,.3),inset 0 2px 8px rgba(0,40,120,.35)}
/* globe: back pill lives in the header (top-left), small Aqua */
header .back{position:relative;top:auto;left:auto;transform:none;grid-column:1;grid-row:1;justify-self:start;flex-direction:row;gap:4px;min-width:44px;min-height:32px;padding:5px 12px;border-radius:16px;font-size:13px}
header .ttl{grid-row:1}
header .back svg{width:16px;height:10px}
header .back::before{border-radius:14px 14px 8px 8px}
header .back:active{transform:scale(.95)}
/* clear glass pills (override Aqua gel): transparent, original blue arrow/year */
header .back{color:#1a6fd6;text-shadow:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(20,40,80,.12),inset 0 1px 0 rgba(255,255,255,.7)}
header .back::before{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
header .back:active{filter:brightness(.95);box-shadow:0 1px 3px rgba(20,40,80,.15),inset 0 1px 4px rgba(20,40,80,.12)}
/* lighter chevron */
header .back{color:#4d8fdf;font-weight:500}
header .back svg.chev{width:9px;height:15px}