/* 中文註解：前台共用導覽、頁尾與內容版型，不依賴 Bulma 或外部字型。 */
.site-nav{ background:var(--site-surface); border-bottom:1px solid var(--site-line); color:var(--site-ink); }
.site-nav-inner{ width:min(1160px,calc(100% - 80px)); min-height:84px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; flex-shrink:0; }
.site-brand img{ width:94px; height:28px; object-fit:cover; border:1px solid var(--site-line); }
.site-brand-name{ font-size:16px; font-weight:500; letter-spacing:2px; line-height:1.4; }
.site-brand-name small{ display:block; font-size:8px; letter-spacing:2px; color:var(--site-muted); margin-top:4px; }
.site-nav .navbar-menu{ display:flex; align-items:center; gap:23px; }
.site-nav-link{ display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:31px 0 28px; border-bottom:2px solid transparent; font-size:11px; letter-spacing:.6px; color:#687463; text-decoration:none; white-space:nowrap; }
.site-nav-link:hover,.site-nav-link[aria-current="page"]{ color:var(--site-accent-dark); border-bottom-color:var(--site-accent); }
.site-nav .navbar-burger{ display:none; background:none; border:1px solid var(--site-line); width:38px; height:36px; padding:9px; }
.site-nav .navbar-burger span{ display:block; height:1px; background:var(--site-accent-dark); margin:4px 0; }
.site-footer{ color:var(--site-muted); background:var(--site-paper); }
.site-footer-inner{ width:min(1160px,calc(100% - 80px)); margin:auto; border-top:1px solid var(--site-line); padding:25px 0; display:flex; justify-content:space-between; gap:18px; font-size:10px; letter-spacing:1px; }
.site-footer-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;min-width:0}
.site-footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px}
.site-footer-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 0;color:var(--site-muted);font-size:12px;text-decoration:none;white-space:nowrap}
.site-footer-links a:hover{color:var(--site-accent-dark);text-decoration:underline;text-underline-offset:4px}
.site-footer-links a:focus-visible{outline:2px solid var(--site-accent);outline-offset:4px}
#navigation-status{ background:#f1e7df; color:#8a5348; border:1px solid #e1cfc5; margin:20px auto; width:min(1160px,calc(100% - 40px)); padding:15px; font-size:13px; }
#navigation-status[hidden]{ display:none; }
.portal{ --paper:var(--site-paper); --ink:var(--site-ink); --muted:var(--site-muted); --accent:var(--site-accent); --line:var(--site-line); min-height:calc(100vh - 158px); }
.collection-section{ padding:38px 0 65px; }
.collection-heading{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:22px; }
.collection-heading h2{ font-size:21px; font-weight:500; letter-spacing:1px; margin:0; }
.collection-heading p{ font-size:11px; color:var(--site-muted); margin:5px 0 0; }
.collection-count{ border:1px solid var(--site-line); font-size:11px; padding:6px 12px; color:var(--site-muted); }
.collection-scroll{ overflow-x:auto; border-block:1px solid var(--site-line); }
.collection-table{ width:100%; border-collapse:collapse; text-align:left; min-width:690px; }
.collection-table th{ font-size:10px; letter-spacing:1px; font-weight:500; color:var(--site-muted); background:#e9ece3; padding:16px 18px; }
.collection-table td{ font-size:12px; padding:21px 18px; border-top:1px solid var(--site-line); }
.collection-table tbody tr:hover{ background:#eceee5; }
.collection-table td:first-child{ min-width:200px; font-weight:500; }
.collection-table td:nth-child(2){ color:var(--site-muted); }
.collection-season{ background:#e6eadd; color:#64765c; padding:4px 9px; font-size:10px; white-space:nowrap; }
.collection-stars{ color:#a88753; letter-spacing:2px; white-space:nowrap; }
.profile-layout{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; padding:54px 0 70px; align-items:start; }
.profile-image{ border:1px solid var(--site-line); padding:10px; background:#e9ece3; }
.profile-image img{ display:block; width:100%; height:auto; }
.profile-note{ font-size:10px; color:var(--site-muted); margin:10px 0 0; }
.profile-copy{ padding:15px 0; }
.profile-copy h2{ font-size:30px; font-weight:500; letter-spacing:2px; margin:0 0 20px; }
.profile-copy>p{ color:var(--site-muted); font-size:13px; line-height:2; }
.profile-details{ margin:30px 0; border-top:1px solid var(--site-line); }
.profile-details>div{ display:grid; grid-template-columns:80px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--site-line); font-size:12px; }
.profile-details dt{ color:var(--site-muted); }.profile-details dd{ margin:0; }
.profile-links{ display:flex; gap:20px; flex-wrap:wrap; margin-top:25px; font-size:12px; color:var(--site-accent-dark); }
@media(max-width:1080px) {
  .site-nav-inner{ flex-wrap:wrap; gap:0; padding:18px 0; min-height:76px; }
  .site-nav .navbar-burger{ display:block; margin-left:auto; }
  .site-nav .navbar-menu{ display:none; flex-basis:100%; flex-wrap:wrap; justify-content:center; padding-top:18px; gap:0 8px; }
  .site-nav .navbar-menu.is-active{ display:flex; }
  .site-nav-link{ padding:13px 18px; margin-right:0; }
  .site-brand-name{ font-size:14px; }
}
@media(max-width:800px) {
  .site-nav-inner,.site-footer-inner{ width:calc(100% - 40px); }
  .profile-layout{ grid-template-columns:1fr; gap:25px; padding:30px 0 45px; }
  .profile-copy{ padding:0; }.profile-copy h2{ font-size:25px; }
  .collection-section{ padding:28px 0 45px; }
}
@media(max-width:500px) {
  .site-brand img{ width:70px; height:25px; }.site-brand-name{ font-size:12px;letter-spacing:1px; }
  .site-brand-name small{ font-size:7px; }.site-brand{ gap:9px; }
  .site-nav-link{ font-size:11px; }.site-footer-inner{ font-size:9px; }
  .collection-heading h2{ font-size:18px; }.collection-heading{ gap:12px; }
}
/* 中文註解：遊戲清單沿用全站色票，桌面雙欄、手機單欄；每款遊戲保留獨立的紀錄區。 */
.games-content{padding-top:38px;padding-bottom:64px}.games-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.games-heading h2{font-size:24px;font-weight:500;margin:8px 0 0}.games-heading>span{font-size:11px;color:var(--site-muted)}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.game-record{border:1px solid var(--site-line);background:var(--site-surface);padding:28px;min-width:0}.game-record-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.game-record-top .portal-eyebrow{font-size:9px;margin:0}.game-record-tag{border:1px solid var(--site-line);padding:4px 8px;font-size:10px;color:var(--site-muted);white-space:nowrap}.game-record h2{font-size:26px;font-weight:500;line-height:1.4;margin:28px 0 6px}.game-record p{font-size:12px;line-height:1.9;color:var(--site-muted)}.game-record .game-record-gametitle{font-size:11px;margin:0 0 20px;color:var(--site-accent-dark)}@media(max-width:700px){.games-grid{grid-template-columns:1fr}.game-record{padding:22px}.games-content{padding-top:28px}.game-record h2{font-size:24px}}
/* 中文註解：遊戲頁 Banner 使用 WWdanya 截圖，保留右側人物，左右漸層襯托標題；亮暗主題皆適用。 */
.games-page .games-banner{position:relative;isolation:isolate;min-height:380px;display:flex;align-items:center;padding-block:48px;background:#29243b;color:#fff;overflow:hidden}.games-banner:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,22,39,.88) 0%,rgba(24,22,39,.72) 32%,rgba(24,22,39,.12) 70%),url('../img/WWdanya.png') center 38%/cover no-repeat}.games-banner .portal-crumb,.games-banner .portal-eyebrow{color:#e3d7f0}.games-banner .portal-subtitle{color:#eee7f5}.games-banner h1{color:#fff;text-shadow:0 2px 12px #17122166}.games-banner .portal-wrap{position:relative}[data-theme=dark] .news-hero.games-banner{background:#29243b}@media(max-width:600px){.games-page .games-banner{min-height:330px;padding-block:34px}.games-banner:before{background:linear-gradient(90deg,rgba(24,22,39,.88),rgba(24,22,39,.45)),url('../img/WWdanya.png') 60% center/cover no-repeat}}
/* 中文註解：橫幅圖片縮為原 cover 顯示尺寸的 75%，等比例保留更多原圖；漸層仍鋪滿整個橫幅。 */
.games-banner:before{background-size:100% 100%,max(75%,calc(380px * 1.778 * .75)) auto;background-color:#29243b}.games-page .games-banner{min-height:380px}
@media(max-width:600px){.games-banner:before{background-size:100% 100%,max(75%,calc(330px * 1.778 * .75)) auto}}
/* 中文註解：取景範圍由前次位置往原圖上方移動約 25%，維持目前 75% 縮放。 */
.games-banner:before{background-position:center center,center 23%}
@media(max-width:600px){.games-banner:before{background-position:center center,60% 35%}}
/* 中文註解：遊戲卡片內圖片等比例顯示完整截圖，不沿用 Banner 的縮放與取景設定。 */
.game-record-image{display:block;width:100%;height:auto;margin-top:26px;border:1px solid var(--site-line)}
/* 中文註解：資料庫卡片文字保留管理員輸入的換行。 */
.game-record-content{white-space:pre-wrap;overflow-wrap:anywhere}
/* 中文註解：卡片標題可進入各自的詳細頁；圖片保留完整比例，文字保留換行。 */
.game-record .game-title-link:hover{color:var(--site-accent-dark);text-decoration:underline;text-underline-offset:5px}.game-detail-content{padding-block:40px 64px}.game-detail-copy{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2;color:var(--site-ink);margin-bottom:28px}.game-detail-image{display:block;width:100%;height:auto;border:1px solid var(--site-line);margin:0 0 30px}.game-detail-content>.portal-back{display:inline-block;margin-top:24px}

/* 中文註解：遊戲卡片與詳細頁皆顯示資料庫中的發布日期。 */
.game-published-date{display:block;font-size:11px;color:var(--site-muted);margin:12px 0 20px}
/* 中文註解：動畫與歌單使用各自 Banner，獨立於遊戲頁的圖片縮放和取景設定。 */
.portal .collection-banner{position:relative;isolation:isolate;min-height:360px;display:flex;align-items:center;overflow:hidden;background:#18221e;color:#fff;padding-block:45px}.collection-banner:before{content:"";position:absolute;inset:0;z-index:-1;background-repeat:no-repeat}.anime-banner:before{background-image:linear-gradient(90deg,rgba(14,28,20,.9),rgba(14,28,20,.65) 35%,rgba(14,28,20,.08) 75%),url('../img/kancolle.JPG');background-position:center,center 40%;background-size:cover}.music-banner:before{background-color:#161922;background-image:linear-gradient(90deg,#161922 5%,rgba(22,25,34,.92) 30%,rgba(22,25,34,.3) 68%,rgba(22,25,34,.08)),url('../img/utalist.png');background-position:center,right center;background-size:cover,auto 100%}.collection-banner .portal-crumb,.collection-banner .portal-eyebrow{color:#dce6d5}.collection-banner h1{color:#fff;text-shadow:0 2px 12px #0006}.collection-banner .portal-subtitle{color:#e4e9e1}[data-theme=dark] .news-hero.collection-banner{background:#18221e}@media(max-width:600px){.portal .collection-banner{min-height:330px;padding-block:34px}.anime-banner:before{background-position:center,60% center}.music-banner:before{background-position:center,65% center;background-size:cover,auto 100%;background-image:linear-gradient(90deg,rgba(22,25,34,.88),rgba(22,25,34,.55)),url('../img/utalist.png')}}
/* 中文註解：動畫表格共用欄位選單；桌面不裁切選單，窄畫面選單沿用固定定位。 */
.anime-filter-wrap{overflow:visible}.anime-filter-table th{white-space:nowrap}.anime-filter-table th:nth-child(1),.anime-filter-table th:nth-child(2){width:28%}.anime-filter-table th:nth-child(3){width:13%}.anime-filter-table th:nth-child(4){width:13%}.anime-filter-table th:nth-child(5){width:18%}.anime-filter-table td{overflow-wrap:anywhere}.anime-filter-table [data-filter-empty] td{text-align:center;padding:28px}@media(max-width:800px){.anime-filter-wrap{overflow-x:auto}.anime-filter-table{min-width:800px}}
/* 中文註解：各內頁 Banner 統一採動畫推薦高度；內容較長時允許自然撐開，避免文字被裁切。 */
.portal .news-hero{min-height:360px;display:flex;align-items:center;padding-block:45px}.games-banner:before{background-size:100% 100%,max(75%,calc(360px * 1.778 * .75)) auto}
@media(max-width:600px){.portal .news-hero{min-height:330px;padding-block:34px}.games-banner:before{background-size:100% 100%,max(75%,calc(330px * 1.778 * .75)) auto}}
/* 中文註解：關於作者 Banner 使用 profile.jpg，沿用共用高度、文字與深色漸層。 */
.profile-banner:before{background-image:linear-gradient(90deg,rgba(24,21,33,.92),rgba(24,21,33,.7) 35%,rgba(24,21,33,.22) 80%),url('../img/profile.jpg');background-position:center,center center;background-size:cover}
@media(max-width:600px){.profile-banner:before{background-position:center,60% center}}
/* 中文註解：profile 原圖 1216×760，中線位於 380px；以完整上半部比例呈現，下半部由 Banner 邊界裁掉。 */
.portal .news-hero.profile-banner{min-height:0;aspect-ratio:1216/380;padding-block:20px}.profile-banner:before{background-position:center,left top;background-size:100% 100%,100% auto}.profile-banner h1{font-size:clamp(24px,4vw,54px);margin-bottom:12px}.profile-banner h1 span{font-size:clamp(11px,1.4vw,16px);margin-top:10px}.profile-banner .portal-eyebrow{margin-bottom:10px}
@media(max-width:600px){.portal .news-hero.profile-banner{padding-block:8px}.profile-banner .portal-crumb,.profile-banner .portal-eyebrow,.profile-banner .portal-subtitle{display:none}.profile-banner h1{font-size:clamp(20px,5vw,30px);margin:0}.profile-banner h1 span{font-size:10px;margin-top:5px}}
/* 中文註解：作者 Banner 恢復共用高度；上半圖等比例縮放置中，完整原圖背景層以雙倍高度呈現，上半部恰好落在可視區。 */
.portal .news-hero.profile-banner{aspect-ratio:auto;min-height:360px;padding-block:45px}.profile-banner:before{background-color:#181521;background-position:center,center top;background-size:100% 100%,auto 200%;background-repeat:no-repeat}
@media(max-width:600px){.portal .news-hero.profile-banner{min-height:330px;padding-block:34px}.profile-banner:before{background-size:100% 100%,100% auto;background-position:center,center top}.profile-banner .portal-crumb,.profile-banner .portal-eyebrow,.profile-banner .portal-subtitle{display:block}}
/* 中文註解：窄螢幕以留白保留完整上半圖，避免為填滿固定高度而露出下半部。 */
.profile-banner:before{height:min(360px,31.25vw);top:50%;bottom:auto;transform:translateY(-50%);background-size:100% 100%,auto 200%;background-position:center,center top}
@media(max-width:600px){.profile-banner:before{height:min(330px,31.25vw);background-size:100% 100%,auto 200%;background-position:center,center top}}
/* 中文註解：作者 Banner 上半圖改靠右對齊，保留既有縮放與高度。 */
.profile-banner:before{background-position:center,right top}
@media(max-width:600px){.profile-banner:before{background-position:center,right top}}
/* 中文註解：角色名稱欄使用較寬標籤，完整顯示遊戲名稱。 */
.profile-details>.profile-character{grid-template-columns:minmax(120px,160px) minmax(0,1fr)}.profile-character dd{overflow-wrap:anywhere}
/* 中文註解：所有個人資料列共用同一個標籤寬度，依最長欄位自動撐開；內容統一對齊，窄畫面可橫向捲動。 */
.profile-details{display:grid;grid-template-columns:max-content minmax(150px,1fr);column-gap:24px;overflow-x:auto}.profile-details>div,.profile-details>.profile-character{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:24px}.profile-details dt{white-space:nowrap}.profile-details dd{margin:0;overflow-wrap:anywhere}
/* 中文註解：動畫名稱連到對應詳細頁，保留鍵盤焦點與原有表格篩選。 */
.anime-detail-link{display:inline-block}.anime-detail-link:hover{text-decoration:underline;text-underline-offset:4px;color:var(--site-accent-dark)}
/* 中文註解：各主要頁面底部提供一致的返回入口連結，與內容保持間距。 */
.page-home-return{padding-top:20px;padding-bottom:36px}.page-home-return .portal-back{display:inline-block;padding:8px 0}
/* 中文註解：遊戲分頁沿用歌單風格，長遊戲名稱允許手機版換行。 */
.games-tabs{margin-bottom:26px}.games-tabs>a{white-space:normal}@media(max-width:520px){.games-tabs>a{flex-basis:auto;flex:1 1 100%;text-align:left;padding:11px 12px}}

/* Keep the three collection pages close to the home link below their banner. */
:is(.games-page,.anime-page,.playlist-page) > .news-hero + .page-home-return{
  padding-top:12px;
  padding-bottom:0;
}
:is(.games-page,.anime-page,.playlist-page) > .news-hero + .page-home-return + :is(.games-content,.collection-section,.playlist-content){
  padding-top:12px;
}

/* Keep narrow pages within the viewport; wide tables scroll in their own wrappers. */
@media(max-width:1080px){
  html{overflow-x:clip}
  #main-content,.portal-wrap,.portal-wrap>*,.news-layout>*,.profile-layout>*,.games-grid>*{min-width:0}
  .portal-wrap{max-width:calc(100% - 40px)}
  .portal img{max-width:100%}
  .portal h1,.portal h2,.portal h3,.news-row-title,.game-record-content{overflow-wrap:anywhere}
  .site-brand{min-width:0;flex-shrink:1}
  .site-brand-name{min-width:0;overflow-wrap:anywhere}
  .site-footer-inner,.collection-heading,.games-heading,.crafting-result-heading,.playlist-note{flex-wrap:wrap}
  .collection-scroll,.anime-filter-wrap,.playlist-table-wrap,.crafting-table-wrap,.profile-details{min-width:0;max-width:100%}
}
@media(max-width:800px){
  .profile-layout,.news-layout{grid-template-columns:minmax(0,1fr)}
}

/* Game titles supplement the category tag without adding a narrow grid column. */
.news-row .news-game-tag{max-width:100%;margin-right:8px;vertical-align:middle;white-space:normal;overflow-wrap:anywhere;letter-spacing:.3px}