/* 超獸戰隊大百科 — 懷舊樣式 */
:root{
  --line:#999;
  --panel:#ccc;
  --panel-2:#e6e6e6;
  --tab:#c0c0c0;
  --ink:#111;
  --muted:#666;
  --link:#4646d8;
  --cjk-sans:"Microsoft JhengHei","微軟正黑體","PingFang TC","Heiti TC","Noto Sans TC","Noto Sans CJK TC",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--cjk-sans);color:var(--ink);background:#fff;
  display:grid;grid-template-columns:153px minmax(0,1fr);min-height:100vh;
}
img{max-width:100%;height:auto}
a{color:var(--link)}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:6px 10px;z-index:9}
.skip:focus{left:0}

/* ===== 左欄 ===== */
.side{
  background:#000 url(../images/leftback.gif) no-repeat 0 0;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
}
html[lang="en"] .side{background-image:url(../images/en/leftback.gif)}  /* 英文版左欄背景 */
.side img{display:block}
.side .foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:10px}
.side .lang{color:#ffd400;font:bold 13px/1 var(--cjk-sans);padding:5px 4px;align-self:center;text-decoration:none;border-top:1px solid #ffd400;border-bottom:1px solid #ffd400}
.side .lang:hover{text-decoration:underline}
.side .mail{color:#bbb;font:12px/1 Arial,sans-serif;padding:0 4px;text-decoration:none}
.side .mail:hover{color:#fff}

/* ===== 頂部 banner ===== */
.banner{
  height:100px;background:url(../images/banline.gif);
  display:flex;align-items:center;justify-content:space-between;overflow:hidden;
}
.banner .tiles{display:grid;grid-template-columns:repeat(9,50px);grid-auto-rows:50px;flex:none}
.banner .tiles img{display:block;width:50px;height:50px}
.banner > img{flex:none}

/* ===== 主選單 / 子選單 ===== */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #888}
.tabs a{
  background:var(--tab);border:1px solid #888;border-bottom:0;margin-left:-1px;
  text-align:center;padding:2px 0;color:#000;text-decoration:none;font:16px/1.4 var(--cjk-sans);
}
.tabs a:hover{background:#ddd}
.tabs a[aria-current]{background:#fff;margin-bottom:-1px}
.sub{display:flex;padding:4px 0}
.sub a{flex:1;text-align:center;color:var(--link);text-decoration:none;font:15px/1.5 var(--cjk-sans)}
.sub a+a{border-left:1px solid #999}
.sub a:hover{text-decoration:underline}
.sub a[aria-current]{color:#000}

/* ===== 內容 ===== */
/* 右欄：內容不足一屏時，頁底貼到視窗最底 */
.col{display:flex;flex-direction:column;min-height:100vh;min-width:0}   /* 只限右欄，避免影響瀏覽器擴充功能加入的元素 */
main{padding:20px 31px 20px 20px;max-width:1180px;flex:1 0 auto}
.bar{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  text-align:center;letter-spacing:.3em;padding:3px;margin:0 0 20px;font:normal 16px/1.5 var(--cjk-sans);
}
* + .bar{margin-top:36px}
.txt{font-size:13px;line-height:1.75}
.txt p{margin:0 0 .9em}
.txt p:last-child{margin-bottom:0}
h3.name{margin:0 0 8px;font:900 21px/1.3 var(--cjk-sans)}
h3.name span{font-size:16px}

/* 大卡：左淡色條 + 文字 + 右照片 */
.card{
  display:grid;grid-template-columns:60px minmax(0,1fr) 157px;
  border:1px solid var(--line);margin-bottom:20px;background:#fff;
}
.card .strip{width:60px;height:100%;object-fit:cover;object-position:top;display:block}
.card .txt{padding:8px 12px;max-width:46em}
.card .pic{display:block;width:157px;height:auto}

/* 小卡：照片 + 文字 */
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:20px;margin-bottom:20px}
.mini{display:grid;grid-template-columns:auto minmax(0,1fr);border:1px solid var(--line);align-items:start}
.mini > img{display:block}
.mini .txt{padding:8px 12px}
.mini h3.name{font-size:17px}
.mini.noimg{grid-template-columns:minmax(0,1fr)}   /* 沒有圖片的頭腦獸 */
.mini .ep{color:var(--muted);font-size:13px;margin-top:6px}   /* 登場集數 */

/* 故事 */
.story{display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:16px}
.story h3{font:900 18px/1.4 var(--cjk-sans);margin:0 0 10px}
.story section + section{margin-top:30px}
.story .txt{padding-left:10px;font-size:14px}
.stills{display:flex;flex-direction:column;gap:18px;margin:0;padding:0}
.stills figure{margin:0;border:1px solid #555;background:#000;width:122px}
.stills img{display:block;width:120px;height:100px}
.stills figcaption{color:#eee;font:13px/1.45 var(--cjk-sans);padding:4px 6px;text-align:center}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px;background:var(--panel-2)}
.tbl th,.tbl td{border:1px solid #aaa;padding:3px 5px;text-align:left;vertical-align:top}
.tbl thead th{background:#d0d0d0;font-weight:normal;letter-spacing:.2em}
.tbl tbody th{font-weight:normal;background:#d6d6d6;white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl.cast{min-width:560px}
.tbl.eps{min-width:860px}
.tbl.eps td:nth-child(2),.tbl.eps td:nth-child(4),.tbl.eps td:nth-child(5),.tbl.eps td:nth-child(6){white-space:nowrap}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;font-size:14px;margin:0 0 10px}
.facts div{display:flex;gap:10px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}

/* 演員 */
.layout2{display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:16px;align-items:start}
.portraits{display:flex;flex-direction:column;gap:18px}
.portrait{margin:0;width:122px;border:1px solid #888;background:#e0e0e0;text-align:center}
.portrait img{display:block;width:120px;height:120px}
.portrait .who{background:#000;color:#fff;font:13px/1.6 var(--cjk-sans);letter-spacing:.2em}
.portrait figcaption{font-size:13px;line-height:1.6}
.profile{display:grid;grid-template-columns:140px minmax(0,1fr);border:1px solid var(--line);margin-bottom:16px;background:#000;color:#eee}
.profile img{display:block;width:140px;height:140px}
.profile dl{margin:0;padding:10px 16px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;font-size:14px;align-content:center}
.profile dt{color:#aaa}
.profile dd{margin:0}

/* 下載 */
.downloads{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:20px;margin-bottom:10px}
.dl{margin:0;border:1px solid var(--line);background:var(--panel-2)}
.dl img{display:block;width:100%;height:auto}
.dl a,.dlrow a{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px}
.dl a img,.dlrow a img{width:24px;height:24px}
.icons{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;margin-bottom:10px}
.icons figure{margin:0;text-align:center;font:13px/1.8 var(--cjk-sans);letter-spacing:.2em}
.icons figure img{display:block;margin:0 auto 4px;image-rendering:pixelated}
.dlrow{border:1px solid var(--line);background:var(--panel-2);display:inline-block}
.music{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.music ol{margin:0;padding-left:2em;font-size:14px;line-height:2}
.credits{font-size:13px;line-height:1.9;margin:16px 0 0;padding:10px 14px;border:1px solid var(--line);background:var(--panel-2)}
.credits h4{margin:0 0 4px;font:900 15px/1.5 var(--cjk-sans)}

/* 圖片集 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:18px;margin:0 0 10px;padding:0}
.gallery figure{margin:0;border:1px solid #555;background:#000;max-width:142px}
.gallery img{display:block;width:140px;height:140px}
.gallery figcaption{color:#eee;font:13px/1.5 var(--cjk-sans);padding:4px;text-align:center}
.special{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;border:1px solid var(--line);padding:12px;margin-bottom:20px;align-items:start}
.special .pics{display:flex;flex-direction:column;gap:8px}
.special h3{margin:0 0 10px;font:900 20px/1.4 var(--cjk-sans);color:#e00000}

/* 首頁 */
.intro{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.intro .badge{text-align:center;font:900 15px/1.8 var(--cjk-sans);letter-spacing:.3em;color:#555}
.intro .badge img{display:block;margin:0 auto 8px}
.intro .txt{font-size:15px;line-height:1.9}

/* 頁尾 */
footer{margin-top:10px;font-size:13px;line-height:1.8}
footer .fnote{background:#ccc;color:#999;text-align:center;padding:6px 10%}
footer .fcredit{background:#9c9c9c;border-top:1px solid #636363;color:#00c;text-align:center;padding:4px 10%}
footer .fcredit a{color:#00c}
footer .fcredit a:hover{color:#000}

/* ===== 手機 ===== */
@media (max-width:760px){
  body{grid-template-columns:minmax(0,1fr)}
  .col{min-height:0}
  .side{position:static;height:auto;flex-direction:row;align-items:center;background:#000}
  .side img{width:105px;height:auto}
  .side .foot{align-items:flex-end;padding:0 4px 0 0;gap:8px}
  .side .lang{align-self:flex-end}
  .banner{height:64px}
  .banner > img{height:64px;width:auto}
  .banner .tiles{grid-template-columns:repeat(9,32px);grid-auto-rows:32px}
  .banner .tiles img{width:32px;height:32px}
  .tabs a{font-size:14px;padding:7px 0}
  .sub{flex-wrap:wrap}
  .sub a{padding:4px 0}
  main{padding:16px}
  .card{grid-template-columns:40px minmax(0,1fr)}
  .card .strip{width:40px}
  .card .pic{grid-column:1 / -1;margin:0 auto 10px}
  .story,.layout2{grid-template-columns:minmax(0,1fr)}
  .stills,.portraits{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .profile{grid-template-columns:1fr}
  .profile img{margin:0 auto}
  .facts{grid-template-columns:1fr}
  .music{grid-template-columns:1fr}
  .music > img{margin:0 auto}
  .intro{grid-template-columns:1fr}
  .special{grid-template-columns:1fr}
  .special .pics{flex-direction:row;justify-content:center}
}
@media (max-width:420px){
  .tabs{grid-template-columns:repeat(3,1fr)}
  .tabs a{border-bottom:1px solid #888}
  .tabs a[aria-current]{margin-bottom:0}
}

/* 英文版字距 */
html[lang="en"] .bar{letter-spacing:.12em}
html[lang="en"] .intro .badge{letter-spacing:.04em}
html[lang="en"] .portrait .who{letter-spacing:.02em}
html[lang="en"] .icons figure{letter-spacing:0}
html[lang="en"] .tbl thead th{letter-spacing:.02em}