:root{
  --bg:#070b14; --bg2:#0d1424;
  --ink:#eaf0ff; --ink-dim:#9fb0cc; --ink-faint:#8a99b5;
  --panel:rgba(15,22,38,.86); --panel-solid:#0f1626;
  --line:rgba(150,175,220,.16);
  --accent:#ffb454; --accent2:#7fd4ff;
  --ocean-a:#12325c; --ocean-b:#0a1a33;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --r:14px;
  --font-head:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Yu Gothic UI","Segoe UI",sans-serif;
  --font-num:"Rajdhani","Segoe UI",Roboto,sans-serif;
  font-synthesis:none;
}
/* ---------- 見出し書体（Google Fonts より woff2 を同梱。OFL：vendor/fonts/OFL-*.txt）----------
   Zen Kaku Gothic Antique 900 = かな＋見出し語のサブセットのみ／Rajdhani 700 = 数字用(latin) */
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/Rajdhani-700.latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.54.woff2") format("woff2");unicode-range:U+3028-303f, U+3094-3096, U+309f-30a0, U+30ee, U+30f7-30fa, U+30ff, U+3105-312f, U+3131-3163, U+3165-318e, U+3190-31bb, U+31c0-31c7;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.61.woff2") format("woff2");unicode-range:U+a8, U+2032, U+2261, U+2282, U+3090, U+30f1, U+339c, U+535c, U+53d9, U+56a2, U+56c1, U+5806, U+589f, U+59d0, U+5a7f, U+60e0, U+639f, U+65af, U+68fa, U+69ae, U+6d1b, U+6ef2, U+71fb, U+725d, U+7262, U+75bc, U+7768, U+7940, U+79bf, U+7bed, U+7d68, U+7dfb, U+814b, U+8207, U+83e9, U+8494, U+8526, U+8568, U+85ea, U+86d9, U+87ba, U+8861, U+887f, U+8fe6, U+9059, U+9061, U+916a, U+976d, U+97ad, U+9ece;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.65.woff2") format("woff2");unicode-range:U+b1, U+309b, U+4e5e, U+51f1, U+5506, U+55c5, U+58cc, U+59d1, U+5c51, U+5ef7, U+6284, U+62d7, U+6689, U+673d, U+6a2b, U+6a8e, U+6a9c, U+6d63, U+6dd1, U+70b8, U+7235, U+72db, U+72f8, U+7560, U+7c9b, U+7ce7, U+7e1e, U+80af, U+82eb, U+8463, U+8499, U+85dd, U+86ee, U+8a60, U+8a6e, U+8c79, U+8e87, U+8e8a, U+8f5f, U+9010, U+918d, U+9190, U+965b, U+97fb, U+9ab8, U+9bad, U+9d3b, U+9d5c, U+9dfa, U+9e93;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.77.woff2") format("woff2");unicode-range:U+2207, U+25ef, U+309c, U+4e4f, U+5146, U+51dd, U+5351, U+540a, U+5629, U+5eb5, U+5f04, U+5f13, U+60dc, U+6212, U+63b4, U+642c, U+6627, U+66a6, U+66c7, U+66fd, U+674e, U+6b96, U+6c4e, U+6df3, U+6e67, U+6f84, U+72fc, U+733f, U+7c97, U+7db1, U+7e4d, U+816b, U+82d1, U+84cb, U+854e, U+8607, U+86c7, U+871c, U+8776, U+8a89, U+8fc4, U+91a4, U+9285, U+9685, U+9903, U+9b31, U+9f13, U+ff42, U+ff74, U+ff91;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.79.woff2") format("woff2");unicode-range:U+25b3, U+30f5, U+4eae, U+4f46, U+4f51, U+5203, U+52ff, U+55a7, U+564c, U+565b, U+57f9, U+5805, U+5b64, U+5e06, U+5f70, U+5f90, U+60e8, U+6182, U+62f3, U+62fe, U+63aa, U+64a4, U+65d7, U+673a, U+6851, U+68cb, U+68df, U+6d1e, U+6e58, U+6e9d, U+77b3, U+7832, U+7c3f, U+7db4, U+7f70, U+80aa, U+80c6, U+8105, U+819d, U+8276, U+8679, U+8986, U+8c9d, U+8fc5, U+916c, U+9665, U+9699, U+96c0, U+9a19, U+ff8b;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.94.woff2") format("woff2");unicode-range:U+2015, U+2190, U+4e43, U+5019, U+5247, U+52e7, U+5438, U+54b2, U+55ab, U+57f7, U+5bd2, U+5e8a, U+5ef6, U+6016, U+60b2, U+6162, U+6319, U+6551, U+6607, U+66b4, U+675f, U+67d4, U+6b20, U+6b53, U+6ce3, U+719f, U+75b2, U+770b, U+7720, U+77ac, U+79d2, U+7af9, U+7d05, U+7dca, U+8056, U+80f8, U+81f3, U+8352, U+885d, U+8a70, U+8aa4, U+8cbc, U+900f, U+9084, U+91e3, U+9451, U+96c4, U+99c6, U+9ad4, U+ff70;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.105.woff2") format("woff2");unicode-range:U+25, U+25a0, U+4e26, U+4f4e, U+5341, U+56f2, U+5bbf, U+5c45, U+5c55, U+5c5e, U+5dee, U+5e9c, U+5f7c, U+6255, U+627f, U+62bc, U+65cf, U+661f, U+666e, U+66dc, U+67fb, U+6975, U+6a4b, U+6b32, U+6df1, U+6e29, U+6fc0, U+738b, U+7686, U+7a76, U+7a81, U+7c73, U+7d75, U+7dd2, U+82e5, U+82f1, U+85ac, U+888b, U+899a, U+8a31, U+8a8c, U+8ab0, U+8b58, U+904a, U+9060, U+9280, U+95b2, U+984d, U+9ce5, U+ff18;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.106.woff2") format("woff2");unicode-range:U+30f6, U+50ac, U+5178, U+51e6, U+5224, U+52dd, U+5883, U+5897, U+590f, U+5a5a, U+5bb3, U+5c65, U+5e03, U+5e2b, U+5e30, U+5eb7, U+6271, U+63f4, U+64ae, U+6574, U+672b, U+679a, U+6a29-6a2a, U+6ca2, U+6cc1, U+6d0b, U+713c, U+74b0, U+7981, U+7a0b, U+7bc0, U+7d1a, U+7d61, U+7fd2, U+822c, U+8996, U+89aa, U+8cac, U+8cbb, U+8d77, U+8def, U+9020, U+9152, U+9244, U+9662, U+967a, U+96e3, U+9759, U+ff16;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.109.woff2") format("woff2");unicode-range:U+266a, U+4f11, U+533a, U+5343, U+534a, U+53cd, U+5404, U+56f3, U+5b57-5b58, U+5bae, U+5c4a, U+5e0c, U+5e2f, U+5eab, U+5f35, U+5f79, U+614b, U+6226, U+629e, U+65c5, U+6625, U+6751, U+6821, U+6b69, U+6b8b, U+6bce, U+6c42, U+706b, U+7c21, U+7cfb, U+805e, U+80b2, U+82b8, U+843d, U+8853, U+88c5, U+8a3c, U+8a66, U+8d8a, U+8fba, U+9069, U+91cf, U+9752, U+975e, U+9999, U+ff0f-ff10, U+ff14-ff15;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.112.woff2") format("woff2");unicode-range:U+4e16, U+4e3b, U+4ea4, U+4ee4, U+4f4d, U+4f4f, U+4f55, U+4f9b, U+5317, U+5358, U+53c2, U+53e4, U+548c, U+571f, U+59cb, U+5cf6, U+5e38, U+63a2, U+63b2, U+6559, U+662d, U+679c, U+6c7a, U+72b6, U+7523, U+767d, U+770c, U+7a2e, U+7a3f, U+7a7a, U+7b2c, U+7b49, U+7d20, U+7d42, U+8003, U+8272, U+8a08, U+8aac, U+8cb7, U+8eab, U+8ee2, U+9054-9055, U+90fd, U+914d, U+91cd, U+969b, U+97f3, U+984c, U+ff06;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.115.woff2") format("woff2");unicode-range:U+7c, U+3080, U+4ee5, U+5148, U+516c, U+521d, U+5225, U+529b, U+52a0, U+53ef, U+56de, U+56fd, U+5909, U+591a, U+5b66, U+5b9f, U+5bb6, U+5bfe, U+5e73, U+5e83, U+5ea6, U+5f53, U+6027, U+610f, U+6210, U+6240, U+660e, U+66f4, U+66f8, U+6709, U+6771, U+697d, U+69d8, U+6a5f, U+6c34, U+6cbb, U+73fe, U+756a, U+7684, U+771f, U+793a, U+7f8e, U+898f, U+8a2d, U+8a71, U+8fd1, U+9078, U+9577, U+96fb, U+ff5e;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.116.woff2") format("woff2");unicode-range:U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c, U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c, U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279, U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868, U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6, U+9ad8, U+ff1a, U+ff1f;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.117.woff2") format("woff2");unicode-range:U+4e, U+a0, U+3000, U+300c-300d, U+4e00, U+4e0a, U+4e2d, U+4e8b, U+4eba, U+4f1a, U+5165, U+5168, U+5185, U+51fa, U+5206, U+5229, U+524d, U+52d5, U+5408, U+554f, U+5831, U+5834, U+5927, U+5b9a, U+5e74, U+5f0f, U+60c5, U+65b0, U+65b9, U+6642, U+6700, U+672c, U+682a, U+6b63, U+6c17, U+7121, U+751f, U+7528, U+753b, U+76ee, U+793e, U+884c, U+898b, U+8a18, U+9593, U+95a2, U+ff01, U+ff08-ff09;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.118.woff2") format("woff2");unicode-range:U+21-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2-b3, U+b7, U+bb, U+c9, U+cd, U+d6, U+d8, U+dc, U+e0-e5, U+e7-ed, U+ef, U+f1-f4, U+f6, U+f8, U+fa, U+fc-fd, U+103, U+14d, U+1b0, U+300-301, U+1ebf, U+1ec7, U+2013-2014, U+201c-201d, U+2039-203a, U+203c, U+2048-2049, U+2113, U+2122, U+65e5, U+6708, U+70b9;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.119.woff2") format("woff2");unicode-range:U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;}
@font-face{font-family:"Zen Kaku Gothic Antique";font-style:normal;font-weight:900;font-display:swap;src:url("../vendor/fonts/ZenKakuGothicAntique-900.base.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}   /* display:flex/grid 指定が hidden属性に勝つ罠を根治 */
html,body{height:100%}
body{
  background:
    radial-gradient(42% 32% at 18% 72%, rgba(120,90,210,.13), transparent 70%),
    radial-gradient(36% 36% at 82% 26%, rgba(70,150,220,.12), transparent 70%),
    radial-gradient(30% 24% at 68% 88%, rgba(220,140,90,.07), transparent 70%),
    radial-gradient(120% 120% at 50% -10%, #10203c 0%, var(--bg) 55%, #04060c 100%);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#stage{position:fixed;inset:0;overflow:hidden}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#globe.grabbing{cursor:grabbing}

/* ---------- ヘッダー ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(6,10,20,.78) 0%, rgba(6,10,20,0) 100%);
  pointer-events:none;
}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brandtxt h1{font-size:20px;font-weight:900;letter-spacing:.06em;line-height:1.1;font-family:var(--font-head)}
.brandtxt p{font-size:11px;color:var(--ink-dim);letter-spacing:.14em}
#clock{margin-left:auto;text-align:right;line-height:1}
#ageBig{font-variant-numeric:tabular-nums;font-weight:800}
#ageNum{font-size:34px;color:var(--accent);font-family:var(--font-num);font-weight:700;letter-spacing:.02em}
#ageBig .unit{font-size:12px;color:var(--ink-dim);margin-left:4px}
#periodTag{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px;background:#334;color:#fff;
}
.period-icon{width:22px;height:18px;object-fit:contain;flex:none;filter:invert(1)}
#periodTag.light .period-icon{filter:none}
.topbtns{display:flex;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:var(--shadow);
}
.pill b{color:var(--accent)}
.pill:hover{border-color:var(--accent)}
.pill .lbl{}
#helpBtn{padding:8px 12px;font-weight:800}

/* ---------- 右の操作ボタン ---------- */
/* 右は詳細パネルが使うので、操作ツールはヘッダー直下の左に置く（衝突回避） */
#tools{position:absolute;left:14px;top:74px;z-index:15;
  display:flex;flex-direction:column;gap:8px}
.tbtn{
  width:42px;height:42px;border-radius:12px;font-size:18px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  backdrop-filter:blur(8px);box-shadow:var(--shadow);display:grid;place-items:center;
}
.tbtn:hover{border-color:var(--accent)}
.tbtn.on{background:var(--accent);color:#1a1207;border-color:var(--accent)}

/* ---------- ツールチップ ---------- */
#tip{
  position:absolute;z-index:30;pointer-events:none;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;
  padding:6px 10px;font-size:13px;font-weight:700;box-shadow:var(--shadow);
  transform:translate(-50%,-140%);white-space:nowrap;
}
#tip .t-sub{font-size:11px;color:var(--ink-dim);font-weight:500}

/* ---------- この時代のいきもの ---------- */
#eralist{
  position:absolute;left:14px;bottom:118px;z-index:15;width:230px;max-height:44vh;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(10px);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
}
.el-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;font-size:12px;font-weight:800;color:var(--ink-dim);
  letter-spacing:.08em;border-bottom:1px solid var(--line)}
#el-collapse{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:14px;
  min-width:36px;min-height:36px;display:grid;place-items:center;border-radius:8px}
#el-body{overflow-y:auto;padding:6px}
#eralist.collapsed #el-body{display:none}
.el-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;cursor:pointer;
  width:100%;text-align:left;background:none;border:none;color:inherit;font:inherit}
.el-item:hover{background:rgba(255,255,255,.06)}
.el-emoji{font-size:19px;width:26px;text-align:center;flex:none}
.el-name{font-size:13px;font-weight:700;line-height:1.15}
.el-name small{display:block;font-size:10px;color:var(--ink-faint);font-weight:500}
.el-got{margin-left:auto;color:var(--accent);font-size:12px;flex:none}

/* ---------- 生物詳細 ---------- */
#detail{
  position:absolute;right:14px;top:76px;z-index:25;width:330px;max-width:calc(100vw - 28px);
  max-height:calc(100vh - 210px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
}
.close{position:absolute;right:8px;top:8px;z-index:2;width:30px;height:30px;border-radius:8px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--ink);cursor:pointer;font-size:14px}
.close:hover{background:rgba(255,80,80,.25)}
.d-hero{padding:20px 18px 14px;background:linear-gradient(135deg,var(--era-c,#345) 0%, rgba(10,16,30,.2) 100%);
  border-radius:var(--r) var(--r) 0 0;position:relative}
.d-emoji{font-size:52px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.d-head{font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.35);
  display:inline-block;padding:3px 9px;border-radius:999px;margin-top:10px}
.d-name{font-size:23px;font-weight:900;margin-top:8px;line-height:1.15;font-family:var(--font-head)}
.d-taxon{font-size:12px;font-style:italic;color:var(--ink-dim);margin-top:2px}
.d-body{padding:14px 18px 20px}
.d-blurb{font-size:14px;line-height:1.72;color:#dde6f7}
.d-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.d-cell{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px}
.d-cell .k{font-size:10px;color:var(--ink-faint);letter-spacing:.06em}
.d-cell .v{font-size:14px;font-weight:700;margin-top:2px}
.d-size{margin:12px 0}
.d-size .bar{height:9px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden;margin-top:5px}
.d-size .fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:5px}
.d-facts{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.d-fact{font-size:12.5px;line-height:1.55;color:#cfd9ee;padding-left:20px;position:relative}
.d-fact:before{content:"🔎";position:absolute;left:0;top:0}
.d-where{font-size:11.5px;color:var(--ink-dim);margin-top:12px;line-height:1.5}
.d-collect{margin-top:14px;width:100%;padding:11px;border-radius:12px;border:none;cursor:pointer;
  font-size:14px;font-weight:800;background:var(--accent);color:#1a1207}
.d-collect.got{background:rgba(255,255,255,.08);color:var(--ink-dim);border:1px solid var(--line)}
.d-src{font-size:10px;color:var(--ink-faint);margin-top:12px;line-height:1.5}

/* ---------- タイムライン ---------- */
#timeline{position:absolute;left:0;right:0;bottom:0;z-index:18;
  padding:10px 16px 12px;
  background:linear-gradient(0deg, rgba(6,10,20,.92) 40%, rgba(6,10,20,0) 100%);
  display:flex;align-items:center;gap:12px}
#tl-controls{display:flex;gap:6px;flex:none}
.tlc{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;font-size:15px;display:grid;place-items:center}
.tlc:hover{border-color:var(--accent)}
#playBtn.on{background:var(--accent);color:#1a1207}
#tl-track{position:relative;flex:1;height:46px;margin-top:2px}
#tl-bands{position:absolute;left:0;right:0;top:14px;height:20px;border-radius:6px;overflow:hidden;display:flex;
  filter:saturate(.6) brightness(.9)}   /* 公式色は詳細/図鑑で使い、帯は彩度を落として目に優しく */
.tl-band{height:100%;position:relative}
.tl-band+.tl-band{box-shadow:inset 1px 0 0 rgba(0,0,0,.4)}
.tl-band span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:10px;font-weight:800;color:rgba(0,0,0,.6);white-space:nowrap;pointer-events:none}
#tl-ticks{position:absolute;left:0;right:0;top:14px;height:20px;pointer-events:none}
/* 目盛りは帯の上下だけに刻み、中央(=紀名ラベルの高さ)は空ける。
   #tl-bands は filter で合成レイヤになり span を目盛りより前に出せないため、線側をよける。 */
.tl-tick{position:absolute;top:0;width:2px;height:20px;transform:translateX(-1px);
  background:linear-gradient(rgba(255,255,255,.6) 0 5px, rgba(255,255,255,0) 5px 15px, rgba(255,255,255,.6) 15px 20px)}
.tl-tick.has{background:linear-gradient(rgba(255,255,255,.95) 0 5px, rgba(255,255,255,0) 5px 15px, rgba(255,255,255,.95) 15px 20px)}
#tl-events{position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none}
.tl-ev{position:absolute;top:0;font-size:11px;transform:translateX(-50%);opacity:.85}
#tl-handle{position:absolute;top:8px;width:2px;height:32px;background:var(--accent);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 8px var(--accent)}
#tl-handle.kbd{box-shadow:0 0 0 2px var(--accent2), 0 0 10px var(--accent)}
.tl-flag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent)}
#tl-range{position:absolute;left:0;right:0;top:8px;height:32px;width:100%;margin:0;
  opacity:0;cursor:pointer}
#tl-eralabels{display:none}

/* ---------- モーダル ---------- */
.modal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(4,7,14,.72);backdrop-filter:blur(4px);padding:20px}
.modal[hidden]{display:none}   /* hidden属性が.modalのdisplayに負けるのを修正 */
.modal-card{width:min(860px,96vw);max-height:88vh;overflow:hidden;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:18px;font-weight:900;font-family:var(--font-head)}
.modal-head .close{position:static;margin-left:auto}
#dexProgress{font-size:13px;color:var(--ink-dim);font-weight:700}
#dexGrid{overflow-y:auto;padding:16px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.dex-cell{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;padding:6px;text-align:center;position:relative;transition:transform .1s;color:inherit;font:inherit}
.dex-cell:hover{transform:translateY(-2px);border-color:var(--accent)}
.dex-cell .dc-emoji{font-size:30px}
.dex-cell.locked .dc-emoji{filter:brightness(0) invert(1);opacity:.26}
.dex-cell .dc-name{font-size:10.5px;font-weight:700;line-height:1.15}
.dex-cell.locked .dc-name{color:var(--ink-faint)}
.dex-cell .dc-era{position:absolute;top:4px;right:4px;width:24px;height:20px;padding:2px;border-radius:6px;object-fit:contain;background:rgba(255,255,255,.88)}
.dex-cell.locked .dc-era{opacity:.34}
#helpBody{padding:18px;overflow-y:auto}
#helpBody ul{list-style:none;display:flex;flex-direction:column;gap:12px}
#helpBody li{font-size:14px;line-height:1.65;color:#dde6f7}
#helpBody .steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:step}
#helpBody .steps li{counter-increment:step;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;
  padding:14px 14px 12px;font-size:13px;line-height:1.6;color:#cfd9ee}
#helpBody .steps li::before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#1a1207;font-family:var(--font-num);font-weight:700;font-size:16px;margin-bottom:8px}
#helpBody .steps strong{display:block;font-size:15px;font-weight:900;font-family:var(--font-head);color:var(--ink);margin-bottom:4px}
#helpBody .tips{margin-top:14px;font-size:13px;line-height:1.75;color:#cfd9ee}
#helpBody .tips b{color:var(--ink)}
#helpBody .src{margin-top:16px;font-size:11px;color:var(--ink-faint);line-height:1.6}
#helpBody a{color:var(--accent2)}

/* ---------- ローダー ---------- */
#loader{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;background:var(--bg);
  transition:opacity .5s;color:var(--ink-dim)}
#loader.hide{opacity:0;pointer-events:none}
.spinner{width:58px;height:58px;border-radius:50%;position:relative;
  background:
    linear-gradient(rgba(200,225,255,.45),rgba(200,225,255,.45)) center/100% 1.5px no-repeat,
    radial-gradient(circle at 35% 32%, #1f5c99 0%, #0d2a52 55%, #07182f 100%);
  box-shadow:inset -7px -7px 16px rgba(0,0,0,.45), 0 0 0 1.5px rgba(127,212,255,.45), 0 0 30px rgba(110,190,255,.28)}
.spinner::before,.spinner::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(210,230,255,.65);animation:meridian 1.8s cubic-bezier(.45,0,.55,1) infinite}
.spinner::after{animation-delay:-.9s}
@keyframes meridian{0%{transform:scaleX(1);opacity:.55}50%{transform:scaleX(.05);opacity:.95}100%{transform:scaleX(1);opacity:.55}}

/* ---------- シルエット（PhyloPic, 黒シルエット→白く反転） ---------- */
.silimg{ display:block;object-fit:contain }
.d-sil{ width:104px;height:74px;filter:brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,.45)) }
.dc-sil{ width:44px;height:34px;filter:brightness(0) invert(1);opacity:.92 }
.dex-cell.locked .dc-sil{ opacity:.26 }
.sr-sil{ width:32px;height:24px;flex:none;filter:brightness(0) invert(1);opacity:.85 }
.el-sil{ width:26px;height:20px;flex:none;filter:brightness(0) invert(1);opacity:.9 }
.tip-sil{ display:inline-block;width:24px;height:16px;vertical-align:-3px;margin-right:2px;filter:brightness(0) invert(1) }
/* シルエット画像がまだ無い種のフォールバック絵文字も白1色に揃える（白い群れの中でカラー絵文字が浮くのを防ぐ）。
   assets/sil/<id>.png が届けば silDiv() 側が自動で優先されるので、この指定は繋ぎのまま残してよい。 */
.el-emoji,.sr-emoji,.dc-emoji,.tip-emoji{ filter:brightness(0) invert(1) }
.d-emoji{ filter:brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,.5)) }
.tip-emoji{ display:inline-block;width:22px;text-align:center;vertical-align:-2px;margin-right:2px }

/* ---------- 検索モーダル ---------- */
.search-card{ width:min(560px,96vw);max-height:82vh }
.search-head{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line) }
.search-icon{ font-size:18px }
#searchInput{ flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:11px 13px;font-size:16px;outline:none }
#searchInput:focus{ border-color:var(--accent2) }
.search-head .close{ position:static }
#searchResults{ overflow-y:auto;padding:8px;max-height:64vh }
.sr-item{ display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;
  width:100%;text-align:left;background:none;border:none;color:inherit;font:inherit }
.sr-item:hover,.sr-item.active{ background:rgba(255,255,255,.08) }
.sr-emoji{ font-size:22px;width:32px;text-align:center;flex:none }
.sr-name{ font-size:14px;font-weight:700;line-height:1.2 }
.sr-name small{ display:block;font-size:11px;color:var(--ink-dim);font-weight:500;font-style:italic }
.sr-era{ margin-left:auto;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;flex:none }
.sr-empty{ padding:20px;text-align:center;color:var(--ink-faint);font-size:13px }

/* ---------- 定点モードの地域バー ---------- */
#regionbar{ position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:22;
  display:flex;align-items:center;gap:8px;padding:8px 12px;max-width:calc(100vw - 20px);
  background:var(--panel);border:1px solid var(--accent);border-radius:16px;
  backdrop-filter:blur(10px);box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center }
.rb-label{ font-size:12px;font-weight:800;color:var(--accent) }
#rb-chips{ display:flex;gap:6px;flex-wrap:wrap;justify-content:center }
.rb-chip{ background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;cursor:pointer }
.rb-chip:hover{ border-color:var(--accent) }
.rb-chip.on{ background:var(--accent);color:#1a1207;border-color:var(--accent) }
.rb-exit{ background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:12px;font-weight:700;padding:4px 6px }
.rb-exit:hover{ color:#fff }

/* ---------- フォーカス表示（キーボード操作） ---------- */
.pill:focus-visible,.tbtn:focus-visible,.tlc:focus-visible,.close:focus-visible,.d-collect:focus-visible,
.el-item:focus-visible,.dex-cell:focus-visible,#el-collapse:focus-visible,#helpBody a:focus-visible,#tl-range:focus-visible{
  outline:2px solid var(--accent2);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- レスポンシブ ---------- */
@media (max-width:720px){
  #topbar{flex-wrap:wrap;gap:4px 8px;padding:8px 10px 6px}
  .brand{min-width:0;flex-shrink:1;order:0}
  .brandtxt p{display:none}
  .brandtxt h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbtns{flex-shrink:0;order:1;margin-left:auto}
  /* 年代＋時代ピルは2行目の左寄せ（ブランド名と重ねない） */
  #clock{order:2;flex-basis:100%;margin-left:0;text-align:left;display:flex;align-items:center;gap:8px;min-width:0}
  #ageBig{display:inline-flex;align-items:baseline;flex:none}
  #ageNum{font-size:24px}
  #periodTag{margin-top:0;font-size:11px;padding:2px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #helpBody .steps{grid-template-columns:1fr}
  /* タイムライン: 潰れる紀名は消し（現在の紀はクロックのピルが示す）、帯とハンドルを太く、イベントは点に */
  #timeline{padding:8px 10px 10px;gap:8px}
  .tl-band span{display:none}
  #tl-track{height:54px}
  #tl-bands,#tl-ticks{top:18px;height:22px}
  .tl-tick{width:1px;background:rgba(255,255,255,.3);transform:none}
  .tl-tick.has{background:rgba(255,255,255,.55);box-shadow:none}
  #tl-events{top:4px;height:12px}
  .tl-ev{font-size:0;width:6px;height:6px;border-radius:50%;top:4px;transform:translateX(-50%);background:rgba(255,255,255,.75);opacity:1}
  .tl-ev.extinction{background:#ff8a65}
  .tl-ev.radiation{background:#8ee0a0}
  #tl-handle{top:12px;height:36px;width:4px;transform:translateX(-2px);border-radius:2px}
  .tl-flag{width:18px;height:18px;top:-9px}
  #tl-range{top:8px;height:46px}
  .pill .lbl{display:none}
  #tools{top:84px;left:8px;right:auto;bottom:auto;transform:none;flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 16px)}
  .tbtn{background:rgba(18,26,44,.94);border-color:rgba(180,200,235,.3);width:40px;height:40px}
  #regionbar{top:132px;left:8px;right:8px;transform:none;max-width:none;border-radius:14px;padding:7px 10px;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  #rb-chips{flex-wrap:nowrap;justify-content:flex-start}   /* 中央寄せだと左へはみ出して✕解除と重なる */
  .rb-chip{flex:none}
  .rb-label{display:none}
  .rb-exit{flex:none;order:-1}
  #eralist{width:180px;bottom:112px;max-height:34vh}
  #detail{top:auto;bottom:112px;right:8px;left:8px;width:auto;max-height:56vh}
  /* 詳細を開いたらリストを隠して重なりを避ける（ツールはトップバー直下で常に触れる） */
  body.det-open #eralist{display:none}
  .tlc{width:42px;height:42px}
  .close{width:38px;height:38px}
  /* モーダル見出しは1行に収める（375pxで「わたしの古生物 / 図鑑」と2行に折れていた） */
  .modal{padding:12px}
  .modal-head{gap:8px;padding:12px}
  .modal-head h2{font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #dexProgress{font-size:11px;white-space:nowrap;flex:none}
}
@media (max-width:720px) and (orientation:landscape){
  #eralist{max-height:40vh}
  #detail{max-height:74vh}
}