/*
Theme Name: Skypray Blog Child
Description: Responsive article layout and consolidated Blogger article styles.
Author: Skypray Huang
Template: twentytwentyfive
Version: 2.0.1
Text Domain: skypray-blog-child
*/

:root {
  --skypray-article-max: 900px;
  --skypray-canvas: #f4ede2;
  --skypray-canvas-deep: #eadcca;
  --skypray-paper: #fffaf2;
  --skypray-paper-soft: #fbf3e7;
  --skypray-ink: #382f29;
  --skypray-muted: #75685e;
  --skypray-accent: #a65f43;
  --skypray-accent-dark: #74412f;
  --skypray-border: #dfcdbc;
}

/* Warm, paper-like base palette for the Twenty Twenty-Five child theme. */
body,
.wp-site-blocks {
  background: var(--skypray-canvas);
  color: var(--skypray-ink);
}

.wp-site-blocks > header,
.wp-site-blocks > footer {
  background: linear-gradient(135deg, var(--skypray-canvas-deep), #f2e6d7);
  border-color: var(--skypray-border);
}

.wp-site-blocks > header {
  border-bottom: 1px solid var(--skypray-border);
  box-shadow: 0 4px 18px rgba(94, 67, 49, .07);
}

.wp-site-blocks > footer {
  border-top: 1px solid var(--skypray-border);
}

a:where(:not(.wp-element-button)) {
  color: var(--skypray-accent-dark);
  text-decoration-color: color-mix(in srgb, var(--skypray-accent) 55%, transparent);
  text-underline-offset: .16em;
}

a:where(:not(.wp-element-button)):hover {
  color: var(--skypray-accent);
}

::selection {
  background: #e5bfa7;
  color: #2f241f;
}

.wp-element-button,
.wp-block-button__link {
  background: var(--skypray-accent-dark);
  color: #fffaf3;
  border-radius: 999px;
}

.single-post .wp-block-post-content {
  background: linear-gradient(180deg, rgba(255, 250, 242, .95), rgba(251, 243, 231, .92));
  border-block: 1px solid var(--skypray-border);
}

.single-post .wp-block-post-title,
.archive .wp-block-query-title {
  color: var(--skypray-accent-dark);
}

.wp-block-separator {
  color: var(--skypray-border);
}

/* Unified single-post width. */
.single-post .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  width: 100%;
  max-width: var(--skypray-article-max);
  margin-inline: auto !important;
}

.single-post .entry-content :where(.mgs-article, .sdwrap, .mombasa-guide-v2, .nier-article-wrapper) {
  width: 100%;
  max-width: var(--skypray-article-max);
}

/* Media, long English words, URLs and code must stay inside the article. */
.single-post .entry-content,
.single-post .entry-content :where(p, li, dd, figcaption, a, code, td, th) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.single-post .entry-content :where(img, video, iframe, embed, object, svg) {
  max-width: 100%;
  height: auto;
}

.single-post .entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: normal;
}

/* Responsive article tables.
 * Twenty Twenty-Five renders post content mainly inside .wp-block-post-content.
 * Keep <table> as a real table; never turn the table itself into display:block.
 */
.single-post :where(.entry-content, .wp-block-post-content) :where(.wp-block-table, .mg-table-wrap) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Strong enough to override article-local CSS such as .ai-photo-article table. */
.single-post :where(.entry-content, .wp-block-post-content) table,
.single-post .wp-block-post-content .ai-photo-article table {
  display: table !important;
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed !important;
  box-sizing: border-box;
}

.single-post :where(.entry-content, .wp-block-post-content) table > thead,
.single-post :where(.entry-content, .wp-block-post-content) table > tbody,
.single-post :where(.entry-content, .wp-block-post-content) table > tfoot {
  width: 100%;
}

.single-post :where(.entry-content, .wp-block-post-content) table tr {
  display: table-row !important;
  width: auto !important;
}

.single-post :where(.entry-content, .wp-block-post-content) table :where(td, th) {
  display: table-cell !important;
  min-width: 0;
  padding: .55rem .65rem;
  white-space: normal !important;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

/* The article uses two-column source/description tables. Give both columns
 * useful space while forcing them to occupy the full table width. */
.single-post :where(.entry-content, .wp-block-post-content) table:has(thead tr:first-child > :nth-child(2):last-child) th:first-child,
.single-post :where(.entry-content, .wp-block-post-content) table:has(thead tr:first-child > :nth-child(2):last-child) td:first-child {
  width: 38% !important;
}
.single-post :where(.entry-content, .wp-block-post-content) table:has(thead tr:first-child > :nth-child(2):last-child) th:nth-child(2),
.single-post :where(.entry-content, .wp-block-post-content) table:has(thead tr:first-child > :nth-child(2):last-child) td:nth-child(2) {
  width: 62% !important;
}

@media (max-width: 640px) {
  .single-post :where(.entry-content, .wp-block-post-content) table {
    font-size: .95em;
  }
  .single-post :where(.entry-content, .wp-block-post-content) table :where(td, th) {
    padding: .5rem .55rem;
  }
}

html { scroll-behavior: smooth; }
.toc-wrap a { text-decoration: none; }
.toc-wrap a:hover { text-decoration: underline; }

/* Shared software-download article components. */
.sdtoast { margin-top: 8px; font-size: 14px; opacity: 0; transition: opacity .2s ease; }
.sdtoast.show { opacity: 1; }
.sdwrap { margin: 0 auto; line-height: 1.8; font-size: 16px; }
.sdwrap h2, .sdwrap h3 { scroll-margin-top: 80px; }
.sdhero, .sdbox { border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px; background: #fff; }
.sdbox { margin-top: 14px; }
.sdnote { border-left: 4px solid #ff4d4f; padding: 10px 12px; background: #fff7f7; border-radius: 10px; margin-top: 12px; }
.sdtags { display: flex; flex-wrap: wrap; gap: 8px; }
.sdtag { display: inline-block; border: 1px solid #eaeaea; padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.sdtoc ul { margin: 8px 0 0 18px; }
.sdtoc a { text-decoration: none; }
.copyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copybtn { border: 1px solid #ddd; background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.copybtn:hover { background: #f7f7f7; }
pre.sdcmd { white-space: pre-wrap; word-break: break-word; background: #0b1020; color: #e6edf3; padding: 12px; border-radius: 12px; overflow: auto; margin: 10px 0 0; }
.sdwrap code { background: #f3f4f6; padding: 2px 6px; border-radius: 6px; }
.sdtable { width: 100%; border-collapse: collapse; }
.sdtable th, .sdtable td { border: 1px solid #eee; padding: 10px; text-align: left; vertical-align: top; }

/* Metal Gear story article. */
.mgs-article {
  --mgs-accent: #52653b;
  --mgs-accent-dark: #2f3c27;
  --mgs-accent-soft: #edf1e8;
  --mgs-gold: #a67c36;
  --mgs-text: #262923;
  --mgs-muted: #666d61;
  --mgs-border: #d9dfd2;
  --mgs-paper: #fbfcf8;
  color: var(--mgs-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 17px;
  line-height: 1.9;
  margin: 0 auto;
}
.mgs-article * { box-sizing: border-box; }
.mgs-article p { margin: 0 0 1.15em; }
.mgs-article strong { color: var(--mgs-accent-dark); }
.mgs-article h2 { margin: 2.5em 0 .9em; padding: .62em .8em; border-left: 7px solid var(--mgs-accent); border-bottom: 1px solid var(--mgs-border); background: linear-gradient(90deg, var(--mgs-accent-soft), rgba(237,241,232,.2)); color: var(--mgs-accent-dark); font-size: 1.55em; line-height: 1.45; }
.mgs-article h3 { position: relative; margin: 2em 0 .75em; padding-left: 1.05em; color: #39452f; font-size: 1.22em; line-height: 1.5; }
.mgs-article h3::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 1em; border-radius: 4px; background: var(--mgs-gold); }
.mgs-article ul, .mgs-article ol { margin: .6em 0 1.3em; padding-left: 1.5em; }
.mgs-article li { margin: .35em 0; }
.mgs-hero { padding: 1.4em 1.5em; margin: 0 0 1.8em; border: 1px solid var(--mgs-border); border-radius: 14px; background: linear-gradient(135deg, rgba(47,60,39,.96), rgba(82,101,59,.9)), #34422d; color: #fff; box-shadow: 0 10px 28px rgba(35,45,29,.16); }
.mgs-hero .mgs-kicker { margin: 0 0 .45em; color: #e3d3ad; font-size: .83em; letter-spacing: .11em; text-transform: uppercase; }
.mgs-hero h1 { margin: 0 0 .55em; color: #fff; font-size: 2em; line-height: 1.35; }
.mgs-hero p { margin: 0; color: rgba(255,255,255,.9); font-size: .98em; }
.mgs-meta { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; }
.mgs-meta span { display: inline-block; padding: .28em .75em; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; font-size: .82em; }
.mgs-warning, .mgs-note { margin: 1.4em 0; padding: 1em 1.1em; border-radius: 10px; }
.mgs-warning { border-left: 6px solid #a54338; background: #fff2ef; color: #63312b; }
.mgs-warning strong { color: #8b3027; }
.mgs-note { border-left: 6px solid var(--mgs-gold); background: #fff9ec; color: #5e5137; }
.mgs-note strong { color: #6d5725; }
.mgs-toc { margin: 1.5em 0 2em; padding: 1.2em 1.25em; border: 1px solid var(--mgs-border); border-radius: 12px; background: var(--mgs-paper); box-shadow: 0 4px 14px rgba(35,45,29,.07); }
.mgs-toc h2 { margin: 0 0 .65em; padding: 0; border: 0; background: none; font-size: 1.42em; }
.mgs-toc ol { columns: 2; column-gap: 2em; margin: .5em 0 0; padding-left: 1.4em; }
.mgs-toc li { break-inside: avoid; margin: .45em 0; }
.mgs-toc a { color: #40552f; text-decoration: none; border-bottom: 1px dotted #91a181; }
.mgs-toc a:hover { color: #1f2c18; border-bottom-style: solid; }

/* Stable desktop timeline: the content column may shrink without overflowing. */
.mgs-timeline { position: relative; width: 100%; max-width: 100%; margin: 1.2em 0 1.6em; padding: 0; }
.mgs-timeline::before { content: ""; position: absolute; left: 2.75rem; top: .7em; bottom: .7em; width: 2px; background: #c8d1bf; }
.mgs-time { position: relative; display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: 1.1em; align-items: start; width: 100%; min-width: 0; margin: 0 0 1em; }
.mgs-time > span { position: relative; z-index: 2; display: inline-flex; justify-content: center; min-width: 5.5rem; max-width: 100%; padding: .2em .5em; border-radius: 999px; background: var(--mgs-accent); color: #fff; font-size: .82em; font-weight: 700; white-space: nowrap; }
.mgs-time > div { min-width: 0; padding: .7em .9em; border: 1px solid var(--mgs-border); border-radius: 9px; background: #fff; overflow-wrap: anywhere; }
.mgs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; margin: 1.1em 0; }
.mgs-card { min-width: 0; padding: 1em 1.05em; border: 1px solid var(--mgs-border); border-radius: 10px; background: #fafbf8; }
.mgs-card h3 { margin: .05em 0 .45em; }
.mgs-card p { margin: 0; font-size: .96em; }
.mgs-quote { margin: 1.5em 0; padding: 1.25em 1.4em; border-top: 1px solid #c9b07a; border-bottom: 1px solid #c9b07a; color: #4c432f; background: #fffaf0; text-align: center; font-size: 1.12em; font-weight: 700; }
.mgs-back { display: inline-block; margin-top: .7em; color: var(--mgs-muted); font-size: .88em; text-decoration: none; }
.mgs-back:hover { color: var(--mgs-accent-dark); }
.mgs-section { scroll-margin-top: 1.5em; }
.mgs-footer { margin-top: 2.5em; padding: 1em 1.1em; border-top: 1px solid var(--mgs-border); color: var(--mgs-muted); font-size: .88em; }

/* Mombasa guide article. */
.mombasa-guide-v2 { --mg-brown:#5b2f23; --mg-brown2:#7d4b34; --mg-gold:#c89b3c; --mg-sand:#fff8e8; --mg-cream:#f7ead0; --mg-ink:#2b2520; --mg-muted:#6b5b4b; --mg-blue:#244b63; --mg-green:#34523d; --mg-red:#7b2f2f; --mg-orange:#9a5c1f; --mg-gray:#495057; font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; color:var(--mg-ink); line-height:1.92; font-size:17px; margin:0 auto; }
.mombasa-guide-v2 * { box-sizing: border-box; }
.mg-hero { background:linear-gradient(135deg,#321812,#6b3b29 55%,#b88735); color:#fff; border-radius:22px; padding:32px 28px; margin:22px 0 26px; box-shadow:0 14px 30px rgba(60,35,20,.24); position:relative; overflow:hidden; }
.mg-hero::after { content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border:34px solid rgba(255,255,255,.08); border-radius:50%; }
.mg-hero::before { content:""; position:absolute; left:-80px; bottom:-90px; width:210px; height:210px; background:rgba(255,255,255,.06); border-radius:42% 58% 60% 40%; }
.mg-kicker { letter-spacing:.16em; font-size:13px; opacity:.88; margin-bottom:8px; position:relative; z-index:1; }
.mg-title { font-size:30px; font-weight:900; line-height:1.35; margin:0 0 12px; position:relative; z-index:1; }
.mg-sub { font-size:17px; opacity:.96; margin:0; max-width:790px; position:relative; z-index:1; }
.mg-card, .mg-toc, .mg-note, .mg-box { background:var(--mg-sand); border:1px solid #ead8b8; border-radius:18px; padding:22px; margin:22px 0; box-shadow:0 6px 18px rgba(80,45,20,.08); }
.mg-toc { background:linear-gradient(180deg,#fffaf0,#f4e2be); }
.mg-toc-title { font-weight:900; color:var(--mg-brown); font-size:22px; margin-bottom:10px; }
.mg-toc ol { margin:8px 0 0 1.2em; padding:0; columns:2; column-gap:36px; }
.mg-toc li { break-inside:avoid; margin:5px 0; }
.mg-toc a { color:#5c351f; text-decoration:none; border-bottom:1px dotted #a67b3b; }
.mombasa-guide-v2 h2 { margin:36px 0 16px; padding:12px 16px; border-left:8px solid var(--mg-gold); background:linear-gradient(90deg,#f3dfb8,rgba(243,223,184,.24)); border-radius:12px; color:var(--mg-brown); font-size:26px; line-height:1.35; }
.mombasa-guide-v2 h3 { margin:27px 0 10px; color:var(--mg-blue); font-size:21px; border-bottom:2px solid #ead8b8; padding-bottom:5px; }
.mombasa-guide-v2 h4 { margin:18px 0 8px; color:#4f3525; font-size:18px; }
.mombasa-guide-v2 p { margin:10px 0; }
.mombasa-guide-v2 ul, .mombasa-guide-v2 ol { padding-left:1.35em; margin:8px 0 14px; }
.mombasa-guide-v2 li { margin:5px 0; }
.mg-highlight { background:#fff3cf; border-left:6px solid var(--mg-gold); padding:14px 16px; border-radius:10px; margin:16px 0; font-weight:700; color:#4b2c1d; }
.mg-warning { background:#fff0ea; border-left:6px solid #a44a32; padding:14px 16px; border-radius:10px; margin:16px 0; color:#5a2b21; }
.mg-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0; }
.mg-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0; }
.mg-mini, .mg-company { min-width:0; background:#fff; border:1px solid #ead8b8; border-radius:15px; padding:16px; }
.mg-mini b { color:var(--mg-brown); }
.mg-company { border-radius:16px; position:relative; overflow:hidden; }
.mg-company::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--mg-gold); }
.mg-company.black::before { background:#2f3437; } .mg-company.red::before { background:#a13a32; } .mg-company.white::before { background:#c9c0a3; } .mg-company.orange::before { background:#d1842c; }
.mg-company-title { font-weight:900; color:var(--mg-brown); font-size:20px; margin-bottom:4px; }
.mg-table-wrap { margin:18px 0; border-radius:15px; border:1px solid #e4d0ac; }
.mg-table { width:100%; border-collapse:collapse; background:#fff; min-width:720px; }
.mg-table th { background:#6b3b29; color:#fff; text-align:left; padding:11px; }
.mg-table td { border-top:1px solid #ead8b8; padding:10px; vertical-align:top; }
.mg-table tr:nth-child(even) td { background:#fffaf0; }
.mg-tag { display:inline-block; background:#6b3b29; color:#fff; border-radius:999px; padding:2px 10px; font-size:13px; margin-right:4px; white-space:nowrap; }
.mg-tag.gold { background:#b88735; } .mg-tag.blue { background:#244b63; } .mg-tag.red { background:#8c3a31; } .mg-tag.green { background:#34523d; }
.mg-phase { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #ead8b8; border-radius:14px; padding:14px; margin:12px 0; }
.mg-phase-num { flex:0 0 auto; background:#6b3b29; color:white; border-radius:50%; width:36px; height:36px; text-align:center; line-height:36px; font-weight:900; }
.mg-footer { font-size:14px; color:var(--mg-muted); border-top:1px dashed #c9aa75; margin-top:30px; padding-top:14px; }

/* NieR story article. */
.nier-article-wrapper { --nier-bg:#f3f0e8; --nier-card:#fffaf0; --nier-text:#2d2922; --nier-muted:#6c6255; --nier-accent:#7b5f3a; --nier-accent-dark:#4b3925; --nier-line:#d9ccb8; --nier-shadow:rgba(70,55,35,.16); box-sizing:border-box; margin:0 auto; padding:18px; background:linear-gradient(180deg,#eee8dc 0%,#f7f3ea 38%,#efe7d8 100%); color:var(--nier-text); font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif; line-height:1.9; border-radius:18px; }
.nier-article-wrapper * { box-sizing:border-box; }
.nier-hero { background:radial-gradient(circle at top left,rgba(255,255,255,.55),transparent 36%),linear-gradient(135deg,#3b3127 0%,#75624b 48%,#b8a27e 100%); color:#fff8e8; padding:34px 28px; border-radius:18px; box-shadow:0 12px 30px var(--nier-shadow); margin-bottom:24px; position:relative; overflow:hidden; }
.nier-hero::after { content:"YoRHa"; position:absolute; right:-8px; bottom:-32px; font-size:88px; font-weight:800; letter-spacing:.08em; color:rgba(255,255,255,.09); pointer-events:none; }
.nier-kicker { display:inline-block; margin-bottom:10px; padding:4px 12px; border:1px solid rgba(255,255,255,.42); border-radius:999px; font-size:.92rem; letter-spacing:.08em; color:#fff2d2; }
.nier-hero h1 { margin:0; font-size:clamp(1.72rem,4.8vw,2.75rem); line-height:1.35; letter-spacing:.03em; }
.nier-subtitle { margin:14px 0 0; max-width:760px; color:#f7ead0; font-size:1.05rem; }
.nier-meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.nier-meta span { padding:5px 10px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:.9rem; color:#fff8e8; }
.nier-section { background:var(--nier-card); border:1px solid var(--nier-line); border-radius:16px; padding:24px 26px; margin:20px 0; box-shadow:0 8px 22px rgba(70,55,35,.08); }
.nier-section h2 { margin:0 0 14px; padding-left:14px; border-left:6px solid var(--nier-accent); color:var(--nier-accent-dark); font-size:clamp(1.32rem,3.6vw,1.75rem); line-height:1.45; }
.nier-section p { margin:0 0 1.05em; } .nier-section p:last-child { margin-bottom:0; }
.nier-note { background:#ede4d3; border-left:5px solid #8a6a42; color:#3c3024; padding:14px 16px; border-radius:12px; margin:16px 0; }
.nier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; }
.nier-card { min-width:0; background:#f6eedf; border:1px solid #dfd0bb; border-radius:14px; padding:14px; }
.nier-card strong { display:block; color:#573f25; margin-bottom:4px; font-size:1.03rem; }
.nier-card span { display:block; color:var(--nier-muted); font-size:.95rem; line-height:1.7; }
.nier-quote { margin:18px 0 4px; padding:18px 20px; border-radius:14px; background:linear-gradient(135deg,#4b4032,#7a664c); color:#fff5dc; font-size:1.08rem; font-weight:600; letter-spacing:.02em; }
.nier-spoiler { display:inline-block; margin-bottom:10px; padding:4px 10px; border-radius:8px; background:#6d442f; color:#fff7e8; font-size:.88rem; font-weight:700; }

@media (max-width: 760px) {
  :root { --skypray-article-max: 100%; }
  .single-post .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { width: 100%; }
  .mg-title { font-size:25px; }
  .mg-toc ol { columns:1; }
  .mg-grid, .mg-grid-3 { grid-template-columns:1fr; }
  .mombasa-guide-v2 { font-size:16px; }
  .mombasa-guide-v2 h2 { font-size:23px; }
  .mg-table { min-width:720px; }
}

@media (max-width: 720px) {
  .nier-article-wrapper { padding:10px; border-radius:12px; }
  .nier-hero { padding:26px 18px; }
  .nier-section { padding:20px 16px; margin:16px 0; }
  .nier-grid { grid-template-columns:1fr; }
  .nier-hero::after { font-size:56px; bottom:-20px; }
}

@media (max-width: 700px) {
  .mgs-article { font-size:16px; line-height:1.82; }
  .mgs-hero { padding:1.15em 1em; border-radius:10px; }
  .mgs-hero h1 { font-size:1.55em; }
  .mgs-article h2 { font-size:1.3em; padding:.55em .65em; }
  .mgs-article h3 { font-size:1.13em; }
  .mgs-toc { padding:1em; }
  .mgs-toc ol { columns:1; }
  .mgs-grid { grid-template-columns:1fr; }
  .mgs-timeline::before { display:none; }
  .mgs-time { grid-template-columns:minmax(0,1fr); gap:.45em; }
  .mgs-time > span { justify-self:start; min-width:0; width:auto; padding:.25em .7em; }
}