/* 官網新增的樣式：頁首行動按鈕、分組選單、最新消息、遊戲展示、文章內文。
   基礎樣式在 site.css（沿用靜態站）。 */

/* 頁首 */
.head-cta {
  font: 500 14px/1 var(--sans); letter-spacing: .08em; text-decoration: none;
  color: var(--night-deep); background: var(--amber); border-radius: 999px; padding: 11px 16px;
}
.head-cta:hover { background: var(--amber-soft); }
.menu nav { width: 250px; max-height: calc(100vh - 90px); overflow-y: auto; }
.m-plain { list-style: none; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.m-plain a { display: block; padding: 6px 0; color: var(--moon); text-decoration: none; font-size: 15px; font-weight: 500; }
.m-plain a:hover { color: var(--amber-soft); }
.m-plain a[aria-current] { color: var(--amber); }
.m-h { margin: 0 0 6px; font: 500 12px/1 var(--mono); letter-spacing: .2em; color: var(--muted); }

/* 區塊底部的「看全部」 */
.sec-more { margin: 26px 0 0; font-size: 15px; }
.sec-more a { text-decoration: none; }
.sec-more a:hover { text-decoration: underline; }
.empty { color: var(--muted); }

/* 最新消息 */
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.news-filter a {
  font-size: 14px; text-decoration: none; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.news-filter a:hover { border-color: var(--amber); }
.news-filter a[aria-current] { background: var(--amber); border-color: var(--amber); color: var(--night-deep); }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 4px; color: var(--text); text-decoration: none; }
.news-list a:hover .news-title { color: var(--amber-soft); }
.news-list time { font: 500 14px/1.4 var(--mono); color: var(--muted); }
.news-title { flex: 1 1 18em; color: var(--moon); }
.news-cat {
  display: inline-block; font-size: 12.5px; line-height: 1.4; letter-spacing: .06em; text-decoration: none;
  color: var(--night-deep); background: var(--r-blue); border-radius: 4px; padding: 2px 8px;
}
.news-cat-maintenance { background: var(--r-pink); }
.news-cat-feature { background: var(--amber); }
.news-cat-event { background: var(--r-yellow); }
.news-cat-report { background: var(--muted); }
.nav-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.nav-links .page-numbers { color: var(--text); text-decoration: none; padding: 4px 8px; }
.nav-links .current { color: var(--amber); }

/* 遊戲展示 */
.show-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.show-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.show-card:hover { border-color: var(--amber); }
.show-thumb { display: block; aspect-ratio: 16 / 10; background: var(--night-deep); }
.show-thumb img { width: 100%; height: 100%; object-fit: cover; }
.show-blank { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 30% 60%, rgba(242, 181, 68, .25), transparent 40%), var(--night-deep); }
.show-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.show-title { color: var(--moon); font-weight: 500; font-size: 17px; }
.show-tag { align-self: flex-start; font-size: 12.5px; color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 0 8px; }
.show-ex { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.demo-label {
  display: inline-block; margin-right: 10px; font-size: 12.5px; letter-spacing: .08em;
  color: var(--night-deep); background: var(--r-pink); border-radius: 4px; padding: 2px 8px;
}
.demo-frame { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--night-deep); }
.demo-frame iframe { display: block; width: 100%; height: min(80vh, 720px); border: 0; }
.demo-open { margin-bottom: 32px; }

/* 文章與一般頁面的內文 */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.post-meta time { font-family: var(--mono); }
.post-title { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); color: var(--moon); margin: 6px 0 28px; letter-spacing: .04em; }
.entry h2:not(.post-title) { font-family: var(--serif); font-size: 26px; color: var(--moon); margin: 1.8em 0 .7em; }
.entry h3 { font-size: 20px; color: var(--moon); margin: 1.6em 0 .6em; }
.entry ul, .entry ol { padding-left: 1.4em; margin: 0 0 1em; }
.entry img { height: auto; border-radius: 10px; }
.entry figure { margin: 1.6em 0; }
.entry figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; text-align: center; }
.entry blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--amber); color: var(--moon); }
.entry hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry th, .entry td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.entry .wp-block-gallery { gap: 12px; }

/* 首頁的搶先登記區 */
.subscribe-cta { text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(242, 181, 68, .16), transparent 60%), var(--night); }
.subscribe-cta .kicker { justify-content: center; }

@media (max-width: 640px) {
  .head-cta { padding: 10px 12px; font-size: 13px; }
  .news-list a { padding: 14px 0; }
}

/* 首頁主視覺：kv-wide.svg 左右各多畫一個畫面寬的天空、山、海與高架橋。
   --k 是中間主畫面（原 1600 寬）的顯示寬度：跟著版面變寬，但最多 1600px；
   螢幕太矮時以高度為準，確保畫面蓋滿首屏。超過 1600px 的部分只露出延伸的橋。 */
.hero { background: #08101F; }
.hero-kv {
  --k: max(min(100%, 1600px), 158.42svh);
  inset: auto; bottom: 0; left: calc((100% - var(--k)) * .5 - var(--k));
  width: calc(var(--k) * 3); height: auto; max-width: none; object-fit: fill;
}
@media (max-width: 640px) {
  .hero-kv { left: calc((100% - var(--k)) * .76 - var(--k)); }
}

/* 頁首導覽（2026-10-27 改成遊戲官網式）：桌機橫排＋下拉，遊戲介紹是分組大選單；
   手機收進「選單」按鈕。舊的 .menu（details）已不用。 */
.site-nav { display: flex; }
.nav-top { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: block; padding: 10px 12px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--sans); letter-spacing: .06em; color: var(--moon); text-decoration: none; border-radius: 8px;
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--amber-soft); }
.nav-item.is-current > .nav-link { color: var(--amber); }
.sub-toggle-label::after, .sub-toggle:not(.sub-toggle-label)::after { content: "▾"; margin-left: 4px; color: var(--amber); font-size: 11px; }
.sub-toggle:not(.sub-toggle-label) { border: 0; background: none; color: var(--moon); cursor: pointer; padding: 10px 6px 10px 0; margin-left: -8px; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: 0; min-width: 180px; z-index: 25;
  background: var(--night-deep); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub, .nav-item.open > .nav-sub { display: block; }
.nav-sub ul { list-style: none; margin: 0; padding: 0; }
.nav-sub a { display: block; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 14.5px; white-space: nowrap; }
.nav-sub a:hover, .nav-sub a[aria-current] { color: var(--amber-soft); }
.mega > .nav-sub { left: auto; right: 0; transform: none; width: max-content; max-width: calc(100vw - 32px); padding: 20px 24px; }
.mega-cols { display: grid; grid-template-columns: repeat(6, auto); gap: 8px 32px; }
.nav-toggle { display: none; }

.site-head { gap: 8px; }
.head-cta { margin-left: 8px; white-space: nowrap; }

@media (max-width: 1080px) {
  .nav-toggle {
    display: block; order: 3; cursor: pointer;
    font: 500 14px/1 var(--sans); letter-spacing: .08em; color: var(--moon);
    border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; background: rgba(11, 20, 40, .6);
  }
  .nav-toggle::after { content: " ▾"; color: var(--amber); }
  .nav-toggle[aria-expanded="true"]::after { content: " ▴"; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 70px); overflow-y: auto;
    background: var(--night-deep); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px;
  }
  .site-head.nav-open .site-nav { display: block; }
  .site-head.nav-open { background: var(--night-deep); }
  .nav-top { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .nav-link { padding: 10px 0; font-size: 16px; }
  .sub-toggle:not(.sub-toggle-label), .sub-toggle-label::after { display: none; }
  .sub-toggle-label { cursor: default; }
  .nav-sub, .mega > .nav-sub {
    display: block; position: static; transform: none; width: auto; max-width: none;
    background: none; border: 0; box-shadow: none; padding: 0 0 8px 12px;
  }
  .nav-sub ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .mega-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 18px; }
  .mega-col .m-h { margin-top: 8px; }
}

/* 頁尾分欄 */
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 32px; margin: 18px 0 22px; }
.foot-col .foot-links { margin: 8px 0 0; }

/* 登入時 WordPress 的管理列會蓋住固定在頂端的頁首 */
.admin-bar .site-head { top: 32px; }
.admin-bar .exit { top: calc(max(14px, env(safe-area-inset-top)) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-head { top: 46px; }
  .admin-bar .exit { top: calc(max(14px, env(safe-area-inset-top)) + 46px); }
}
@media (max-width: 600px) {
  /* 這個寬度管理列不再固定，會跟著頁面捲走 */
  .admin-bar .site-head:not(.header-solid) { top: 46px; }
  .admin-bar .header-solid { top: 0; }
  /* 快速離開必須隨時按得到：留在管理列下方，捲動後多一點空隙也沒關係 */
  .admin-bar .exit { top: calc(max(14px, env(safe-area-inset-top)) + 46px); }
}

/* 燈油帳簿（/ledger/）：夜裡的站務室，桌上一盞燈，旁邊攤著秀蘭姨的帳簿 */
.lg-desk { background: radial-gradient(ellipse at 18% 30%, rgba(242, 181, 68, .10), transparent 55%), var(--night); }
.lg-now { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; }
.lg-lamp {
  position: relative; width: 150px; height: 190px; margin: 0 auto;
  border-radius: 46% 46% 18px 18px / 60% 60% 18px 18px;
  border: 2px solid rgba(244, 241, 234, .35); background: rgba(11, 20, 40, .6);
  box-shadow: 0 0 calc(90px * var(--glow)) calc(24px * var(--glow)) rgba(242, 181, 68, calc(.45 * var(--glow)));
}
.lg-lamp::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 92px; height: 14px; transform: translateX(-50%); border-radius: 4px; background: var(--line); }
.lg-flame {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 58px; transform: translate(-50%, -40%);
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(circle at 50% 70%, #FFF4D6, var(--amber) 55%, rgba(242, 181, 68, 0) 75%);
  opacity: calc(.45 + .55 * var(--glow));
  animation: lg-flicker 3.4s ease-in-out infinite;
}
@keyframes lg-flicker { 0%, 100% { transform: translate(-50%, -40%) scale(1); } 50% { transform: translate(-50%, -42%) scale(1.04, .97); } }
@media (prefers-reduced-motion: reduce) { .lg-flame { animation: none; } }
.lg-now-text h2 { margin-bottom: 18px; }
.lg-now-text h2 strong { color: var(--amber); font-weight: 600; }
.lg-bar { height: 12px; border-radius: 999px; background: var(--night-deep); border: 1px solid var(--line); overflow: hidden; }
.lg-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber-soft)); border-radius: 999px; }
.lg-figs { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 20px 0 0; }
.lg-figs dt { font-size: 13.5px; color: var(--muted); letter-spacing: .06em; }
.lg-figs dd { margin: 2px 0 0; font: 500 22px/1.3 var(--mono); color: var(--moon); }
.lg-note { color: var(--muted); font-size: 14.5px; margin-top: 18px; }
.lg-say { margin: 40px 0 0; max-width: 640px; padding: 20px 24px; border-left: 3px solid var(--r-pink); background: rgba(28, 44, 80, .7); border-radius: 0 12px 12px 0; }
.lg-say blockquote { margin: 0; }
.lg-say p { margin: 0; font-family: var(--serif); font-size: 17.5px; color: var(--moon); line-height: 1.9; }
.lg-say figcaption { margin-top: 10px; font-size: 14px; color: var(--r-pink); }
.lg-say figcaption span { margin-left: 10px; color: var(--muted); font-size: 12.5px; }
.lg-group { margin-top: 28px; }
.lg-group h3, .lg-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 18px; color: var(--moon); margin: 0 0 10px; }
.lg-sub { margin-top: 32px; }
.lg-place { font-family: var(--serif); }
.lg-real { font-size: 14px; color: var(--muted); font-weight: 400; }
.lg-sum { margin-left: auto; font: 500 15px/1 var(--mono); color: var(--amber-soft); }
.lg-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg-rows li { display: grid; grid-template-columns: 1fr auto 8.5em; gap: 4px 16px; align-items: baseline; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.lg-name { color: var(--text); }
.lg-name small { display: block; color: var(--muted); font-size: 13.5px; }
.lg-orig { color: var(--muted); font: 14px/1.4 var(--mono); white-space: nowrap; }
.lg-month { text-align: right; font: 500 15px/1.4 var(--mono); color: var(--moon); white-space: nowrap; }
.lg-empty { color: var(--muted); }
.lg-pages { display: grid; gap: 16px; margin-top: 24px; }
.lg-page { background: #F4EEDC; color: #2B2A28; border-radius: 6px; padding: 0 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.lg-page summary { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none; }
.lg-page summary::-webkit-details-marker { display: none; }
.lg-page summary::before { content: "▸"; color: #8A6A2E; }
.lg-page[open] summary::before { content: "▾"; }
.lg-page-m { font: 600 19px/1.3 var(--serif); }
.lg-page-c { margin-left: auto; font: 500 14px/1 var(--mono); color: #8A6A2E; }
.lg-page[open] { padding-bottom: 24px; }
.lg-page .lg-figs dt, .lg-page .lg-real, .lg-page .lg-name small, .lg-page .lg-orig, .lg-page .lg-empty { color: #6B665C; }
.lg-page .lg-figs dd, .lg-page .lg-group h3, .lg-page .lg-sub, .lg-page .lg-name, .lg-page .lg-month { color: #2B2A28; }
.lg-page .lg-sum { color: #8A6A2E; }
.lg-page .lg-rows, .lg-page .lg-rows li { border-color: #D8CDB2; }
.lg-page .lg-say { background: rgba(255, 255, 255, .55); border-left-color: #C76B86; }
.lg-page .lg-say p { color: #2B2A28; }
.lg-page .lg-say figcaption { color: #A24F68; }
.lg-page .lg-say figcaption span { color: #6B665C; }
.lg-stamps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.lg-stamps li { font: 600 13px/1 var(--sans); color: #B0413E; border: 2px solid #B0413E; border-radius: 6px; padding: 8px 10px; transform: rotate(-3deg); opacity: .85; }
.lg-foot { padding: 40px 0; text-align: center; }
@media (max-width: 640px) {
  .lg-now { grid-template-columns: 1fr; gap: 28px; }
  .lg-lamp { width: 120px; height: 152px; }
  .lg-rows li { grid-template-columns: 1fr auto; }
  .lg-orig { grid-column: 1; grid-row: 2; }
  .lg-month { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .lg-page { padding: 0 16px; }
}

/* 遊戲展示：不內嵌時，截圖點了開全頁 demo */
.demo-shot { position: relative; display: block; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--night-deep); }
.demo-shot img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.demo-shot:hover img, .demo-shot:focus-visible img { opacity: .85; }
.demo-shot-cta {
  position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px;
  background: rgba(11, 20, 40, .85); color: var(--amber-soft); font-size: 14px; letter-spacing: .04em;
}
.demo-shot:hover .demo-shot-cta { background: var(--amber); color: var(--night-deep); }