:root {
  color-scheme: dark;
  --bg: #0c1017;
  --panel: #151b25;
  --line: #334154;
  --gold: #e6bd64;
  --text: #f5f2e9;
  --muted: #aeb8c8;
  --accent: #d54e3d;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; line-height: 1.75; }
body { margin: 0; background: radial-gradient(circle at 50% 0, #283143 0, #0c1017 38rem); min-height: 100vh; }
a { color: inherit; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 10; background: #fff; color: #111; padding: 12px; }
.skip-link:focus { top: 12px; }
.content-site-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); background: rgba(12, 16, 23, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.content-brand { display: flex; align-items: center; gap: 9px; min-width: 44px; min-height: 44px; text-decoration: none; font-size: 15px; }
.content-brand img { width: 34px; height: 34px; border-radius: 9px; }
.content-brand b { font-size: 18px; color: var(--gold); }
.content-site-header nav { display: flex; gap: 5px; }
.content-site-header nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; }
.content-site-header nav a[aria-current="page"] { background: #252f3f; color: var(--gold); }
main { width: min(880px, calc(100% - 32px)); margin: 0 auto; }
.content-hero { padding: 52px 0 28px; }
.content-hero > p { color: var(--gold); font-weight: 900; letter-spacing: .2em; margin: 0; }
.content-hero h1 { font-size: clamp(32px, 8vw, 54px); line-height: 1.2; margin: 4px 0 10px; }
.content-hero span { color: var(--muted); }
.content-type-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 20px; }
.content-type-tabs a { display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); text-align: center; text-decoration: none; font-size: 13px; font-weight: 800; }
.content-type-tabs a[aria-current="page"] { border-color: #a77a2c; background: linear-gradient(145deg, #3b2e19, #202633); color: var(--gold); }
.content-list { display: grid; gap: 14px; padding-bottom: 60px; }
.content-card { background: linear-gradient(145deg, #19212d, #111720); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.content-card > a { display: grid; grid-template-columns: minmax(140px, 28%) 1fr; min-height: 156px; text-decoration: none; }
.content-card img { width: 100%; height: 100%; object-fit: cover; }
.content-card div { padding: 18px; }
.content-card h2 { font-size: 21px; line-height: 1.4; margin: 4px 0; }
.content-card p:not(.content-meta) { color: var(--muted); margin: 4px 0; }
.content-card time, .content-article time { color: var(--muted); font-size: 13px; }
.content-meta { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--gold); font-size: 12px; font-weight: 800; }
.content-meta b { background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 999px; }
.content-article .content-meta a { display: inline-grid; place-items: center; min-height: 44px; }
.content-article { width: min(760px, 100%); margin: 0 auto; padding: 48px 0 80px; }
.content-article > header { position: relative; }
.content-admin-edit { position: absolute; top: 0; right: 0; display: inline-grid; place-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #8e7139; border-radius: 11px; background: #2b2418; color: var(--gold); font-size: 13px; font-weight: 900; text-decoration: none; }
.content-article > header.admin-edit-enabled .content-meta { padding-right: 128px; }
.content-article header h1 { font-size: clamp(30px, 7vw, 48px); line-height: 1.35; margin: 10px 0; }
.content-lead { font-size: 18px; color: var(--muted); }
.content-hero-image { display: block; width: 100%; max-height: 460px; object-fit: cover; margin: 26px 0; border-radius: 20px; border: 1px solid var(--line); }
.content-hero-note { margin: -17px 2px 24px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: right; }
.content-body { font-size: 17px; }
.content-body h2 { font-size: 27px; line-height: 1.4; margin: 46px 0 12px; border-left: 5px solid var(--gold); padding-left: 14px; }
.content-body h3 { font-size: 22px; margin: 34px 0 10px; }
.content-body h4 { font-size: 18px; }
.content-body p, .content-body li { overflow-wrap: anywhere; }
.content-body img { display: block; max-width: 100%; height: auto; margin: 22px auto; border-radius: 14px; }
.content-body blockquote { margin: 24px 0; padding: 10px 18px; border-left: 4px solid var(--gold); background: #171e29; color: #dce2ed; }
.content-body pre { overflow: auto; background: #070a0f; padding: 16px; border-radius: 12px; }
.content-body code { background: #070a0f; padding: 2px 5px; border-radius: 4px; }
.content-body a { color: #8ecbff; }
.content-table-wrap { width: 100%; margin: 22px 0 30px; overflow-x: auto; border: 1px solid #46546a; border-radius: 13px; background: #111720; -webkit-overflow-scrolling: touch; }
.content-table-wrap:focus-visible { outline: 3px solid #e6bd64aa; outline-offset: 2px; }
.content-table-wrap table { width: 100%; border-collapse: collapse; color: var(--text); font-size: 15px; line-height: 1.5; }
.content-table-wrap th, .content-table-wrap td { padding: 11px 12px; border-right: 1px solid #334154; border-bottom: 1px solid #334154; vertical-align: middle; }
.content-table-wrap td { text-align: left; overflow-wrap: anywhere; }
.content-table-wrap th:last-child, .content-table-wrap td:last-child { border-right: 0; }
.content-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-table-wrap th { color: #201605; background: linear-gradient(#ebc96d, #c89431); font-weight: 900; text-align: center; white-space: nowrap; }
.content-table-wrap tbody tr:nth-child(even) { background: #1a2230; }
.content-table-wrap .align-center { text-align: center; }
.content-table-wrap .align-right { text-align: right; font-variant-numeric: tabular-nums; }
.content-table-wrap .cell-compact { white-space: nowrap; overflow-wrap: normal; }
.content-share { display: flex; justify-content: flex-end; align-items: center; gap: 5px; min-height: 44px; margin: 20px 0 4px; color: var(--muted); }
.content-share > span { margin-right: 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.content-share button { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 9px; border: 1px solid #3f4c5e; border-radius: 999px; color: #dce3ed; background: #151d28; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.content-share button:hover, .content-share button:focus-visible { border-color: #a9823b; color: var(--gold); background: #222a36; }
.content-share-status { min-width: 0; color: var(--gold); font-size: 11px; }
.shogi-demo { margin: 30px auto; padding: 14px; border: 1px solid #806532; border-radius: 18px; background: linear-gradient(145deg, #252b36, #10151d); box-shadow: 0 16px 40px #0005; }
.shogi-demo-context { width: min(100%, 560px); margin: 0 auto 10px; padding: 7px 10px; border: 1px solid #66583f; border-radius: 9px; color: #e9d7ae; background: #111821; font-size: 12px; font-weight: 800; line-height: 1.45; text-align: center; }
.shogi-demo-stage { width: min(100%, 560px); margin: 0 auto; }
.shogi-demo-frame { --shogi-piece-width: 46px; --shogi-piece-height: 50px; display: grid; gap: 7px; }
.shogi-demo-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 7px; min-width: 0; padding: 7px 10px; border: 1px solid #536070; border-radius: 9px; color: #f2f4f7; background: linear-gradient(135deg, #222c39, #161d27); }
.shogi-demo-player.sente { border-color: #8c703a; background: linear-gradient(135deg, #352916, #1e1c1a); }
.shogi-demo-player > span { color: #e9bd60; font-size: 12px; font-weight: 900; white-space: nowrap; }
.shogi-demo-player > strong { min-width: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.3; }
.shogi-demo-player > small { color: #b9c1cd; font-size: 11px; font-weight: 700; white-space: nowrap; }
.shogi-demo-hand { display: flex; align-items: center; min-height: calc(var(--shogi-piece-height) + 10px); padding: 5px 10px; border: 4px solid #684116; border-radius: 7px; color: #f5d89f; background: linear-gradient(#321b08a6, #321b08a6), url('/assets/content/shogi-komadai-wood-v1.jpg') center / cover no-repeat; box-shadow: inset 0 0 16px #160b0699, 0 3px 7px #0006; }
.shogi-demo-hand.gote { flex-direction: row-reverse; }
.shogi-demo-hand > b { flex: 0 0 auto; min-width: 68px; font-size: 13px; letter-spacing: .04em; }
.shogi-demo-hand.gote > b { text-align: right; }
.shogi-demo-hand-pieces { display: flex; flex: 1; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; }
.shogi-demo-hand.gote .shogi-demo-hand-pieces { justify-content: flex-end; }
.shogi-demo-hand-piece { position: relative; display: inline-flex; align-items: flex-end; width: var(--shogi-piece-width); height: var(--shogi-piece-height); }
.shogi-demo-hand-piece .shogi-demo-piece { width: var(--shogi-piece-width); height: var(--shogi-piece-height); }
.shogi-demo-hand-piece small { position: absolute; right: -3px; bottom: 0; padding: 0 2px; border-radius: 5px; color: #201204; background: #efc87ddd; font-size: 11px; font-weight: 900; line-height: 17px; }
.shogi-demo-hand-empty { color: #e9c98d; font-size: 12px; font-weight: 700; }
.shogi-demo-board-shell { --board-pad-top: 13px; --board-pad-right: 13px; --board-pad-bottom: 5px; --board-pad-left: 8px; position: relative; width: 100%; min-width: 0; margin-inline: auto; }
.shogi-demo-file-labels { position: absolute; z-index: 4; top: 2px; left: var(--board-pad-left); right: var(--board-pad-right); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); height: 9px; color: #fff0bd; font-size: 8px; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 2px #160900, 0 0 2px #160900; pointer-events: none; }
.shogi-demo-rank-labels { position: absolute; z-index: 4; top: var(--board-pad-top); right: 1px; bottom: var(--board-pad-bottom); display: grid; grid-template-rows: repeat(9, minmax(0, 1fr)); width: 10px; color: #fff0bd; font-size: 8px; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 2px #160900, 0 0 2px #160900; pointer-events: none; }
.shogi-demo-file-labels span, .shogi-demo-rank-labels span { display: grid; place-items: center; min-width: 0; min-height: 0; }
.shogi-demo-board-shell > .shogi-demo-board { width: 100%; min-width: 0; }
.shogi-demo-board { position: relative; isolation: isolate; display: grid; grid-template: repeat(9, minmax(0, 1fr)) / repeat(9, minmax(0, 1fr)); aspect-ratio: 1176 / 1255; box-sizing: border-box; padding: var(--board-pad-top) var(--board-pad-right) var(--board-pad-bottom) var(--board-pad-left); border: 0; border-radius: 7px; overflow: hidden; background: #d8a353; box-shadow: inset 0 0 12px #3a1b087d, 0 4px 10px #0008; }
.shogi-demo-board::before { content: ''; position: absolute; z-index: 0; inset: -14px; background: url('/assets/content/shogi-board-article-v1.webp') center / 100% 100% no-repeat; filter: blur(9px); transform: scale(1.035); pointer-events: none; }
.shogi-demo-cell { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; min-height: 0; border-right: 1px solid #33200dcc; border-bottom: 1px solid #33200dcc; }
.shogi-demo-cell:nth-child(-n+9) { border-top: 1px solid #33200dcc; }
.shogi-demo-cell:nth-child(9n+1) { border-left: 1px solid #33200dcc; }
.content-body .shogi-demo-piece { position: relative; top: -2px; display: block; max-width: none; width: var(--shogi-piece-width); height: var(--shogi-piece-height); margin: 0; border-radius: 0; object-fit: contain; overflow: visible; filter: drop-shadow(0 2px 1px #5a351577); transform-origin: center; user-select: none; }
.shogi-demo-piece.gote { transform: rotate(180deg); }
.shogi-demo-piece.departing { opacity: 0; }
.shogi-demo-moving-piece { position: absolute; z-index: 3; display: grid; place-items: center; width: var(--shogi-piece-width); height: var(--shogi-piece-height); margin: 0; pointer-events: none; }
.shogi-demo-moving-piece .shogi-demo-piece { width: 100%; height: 100%; transform: none; }
.shogi-demo-moving-piece .shogi-demo-piece.gote { transform: rotate(180deg); }
.shogi-demo figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.shogi-demo figcaption > span:first-child { color: var(--text); font-weight: 800; }
.shogi-demo-status { white-space: nowrap; }
.shogi-demo-result { width: min(100%, 560px); box-sizing: border-box; margin: 10px auto 0; padding: 10px 12px; border: 1px solid #4d5968; border-radius: 11px; color: #dce3ec; background: #151d28; font-size: 13px; line-height: 1.55; }
.shogi-demo-result.is-pending, .shogi-demo-result.is-context { color: #c9d0da; }
.shogi-demo-result.is-playing { border-color: #8b6a32; color: #f0d48e; }
.shogi-demo-result.is-finished { border-color: #c69a3c; background: linear-gradient(135deg, #3a2b17, #171b22 72%); box-shadow: inset 3px 0 #d2a644; }
.shogi-demo-result > strong { display: block; margin-bottom: 5px; color: #f2d078; font-size: 15px; }
.shogi-demo-result-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 4px 0; font-weight: 900; }
.shogi-demo-result-score .winner { color: #fff0a9; }
.shogi-demo-result-score .loser { color: #b7bec8; text-align: right; }
.shogi-demo-result-score.draw { display: block; color: #f4d886; font-size: 17px; text-align: center; }
.shogi-demo-result small { display: block; color: #d3d9e1; font-size: 12px; }
.shogi-demo-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.shogi-demo-controls button { min-height: 44px; border: 1px solid #6f7888; border-radius: 11px; background: #202936; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.shogi-demo-controls button:first-child { border-color: #b88a35; background: linear-gradient(#e3bd64, #ba8326); color: #201605; }
.shogi-demo-controls button:disabled { opacity: .7; cursor: wait; }
.shogi-piece-guides { margin: 30px 0 38px; padding: 16px; border: 1px solid #806532; border-radius: 18px; background: linear-gradient(145deg, #252b36, #10151d); box-shadow: 0 16px 40px #0005; }
.content-body .shogi-piece-guides > header h2 { margin: 0; padding: 0; border: 0; font-size: 24px; }
.shogi-piece-guides > header p { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.shogi-guide-key { display: inline-block; width: 16px; height: 16px; margin: 0 6px -3px 0; border: 2px solid #fff2a0; border-radius: 50%; background: #e75a3dbf; box-shadow: 0 0 7px #ffbd54; }
.shogi-piece-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shogi-piece-guide-card { display: grid; grid-template: auto 1fr / minmax(145px, 58%) minmax(0, 1fr); gap: 5px 12px; align-items: start; min-width: 0; margin: 0; padding: 10px; border: 1px solid #6f5930; border-radius: 14px; background: #111822; }
.shogi-piece-guide-stage { grid-row: 1 / 3; width: 100%; max-width: 190px; margin: auto; }
.content-body .shogi-piece-guide-card h3 { align-self: end; margin: 4px 0 0; color: #f4d684; font-size: 17px; line-height: 1.35; }
.shogi-piece-guide-card > p { margin: 0; color: #d5dbe5; font-size: 13px; line-height: 1.55; }
.shogi-piece-guide-board { position: relative; display: grid; grid-template: repeat(5, minmax(0, 1fr)) / repeat(5, minmax(0, 1fr)); width: 100%; aspect-ratio: 1176 / 1255; overflow: hidden; border: 3px solid #825522; border-radius: 5px; background: #d8a353 url('/assets/content/shogi-board-article-v1.webp') center / 180% 180% no-repeat; box-shadow: 0 3px 8px #0008; }
.shogi-piece-guide-cell { position: relative; display: grid; place-items: center; min-width: 0; z-index: 1; }
.shogi-piece-guide-cell.target::before { content: ''; position: absolute; inset: 20%; border: 2px solid #fff1a2; border-radius: 50%; background: #df4e36c9; box-shadow: 0 0 8px #f2a33e; }
.shogi-piece-guide-cell.origin { z-index: 3; }
.shogi-piece-guide-cell.origin .shogi-demo-piece { width: 91%; height: 104%; object-fit: contain; filter: drop-shadow(0 2px 2px #4d2b0d99); }
.shogi-guide-arrows { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.shogi-guide-arrows path { fill: none; stroke: #fff6ad; stroke-width: .09; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #742007); }
.shogi-guide-arrows marker path { fill: #fff6ad; stroke: none; filter: none; }
.content-cta { margin: 44px 0; padding: 22px; background: linear-gradient(135deg, #352715, #1a2130); border: 1px solid #87672e; border-radius: 18px; text-align: center; }
.content-cta a { display: grid; place-items: center; min-height: 52px; border-radius: 13px; background: linear-gradient(#edc868, #c8942a); color: #201605; font-weight: 900; text-decoration: none; }
.content-back a { display: inline-grid; place-items: center; min-height: 44px; color: var(--muted); }
.content-empty { padding: 60px 0; color: var(--muted); }
footer { display: flex; justify-content: center; gap: 12px; padding: 24px max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
footer a { display: grid; place-items: center; min-height: 44px; padding: 0 10px; color: var(--muted); }
@media (max-width: 600px) {
  .content-site-header { align-items: flex-start; }
  .content-brand span { display: none; }
  .content-site-header nav { width: 100%; justify-content: flex-end; }
  .content-site-header nav a { padding: 0 7px; font-size: 12px; }
  .content-card > a { grid-template-columns: 1fr; }
  .content-card img { height: 180px; }
  .content-hero { padding-top: 34px; }
  .content-type-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-article { padding-top: 30px; }
  .content-admin-edit { position: static; width: max-content; margin: 0 0 8px auto; }
  .content-article > header.admin-edit-enabled .content-meta { padding-right: 0; }
  .content-body { font-size: 16px; }
  .content-table-wrap { margin-inline: -4px; width: calc(100% + 8px); }
  .content-table-wrap table { font-size: 12.5px; }
  .content-table-wrap th, .content-table-wrap td { padding: 9px 7px; }
  .shogi-demo { margin-inline: -4px; padding: 9px; }
  .shogi-demo-frame { gap: 5px; }
  .shogi-demo-player { grid-template-columns: auto minmax(0, 1fr); gap: 3px 7px; padding: 6px 8px; }
  .shogi-demo-player > strong { font-size: 15px; }
  .shogi-demo-player > small { grid-column: 2; white-space: normal; }
  .shogi-demo-hand { min-height: calc(var(--shogi-piece-height) + 6px); padding: 3px 6px; border-width: 3px; }
  .shogi-demo-hand > b { min-width: 61px; font-size: 11px; }
  .shogi-demo-file-labels, .shogi-demo-rank-labels { font-size: 7px; }
  .shogi-demo-board { border-radius: 5px; }
  .shogi-demo figcaption { align-items: flex-start; flex-direction: column; gap: 2px; }
  .shogi-demo-result-score { grid-template-columns: 1fr; gap: 2px; }
  .shogi-demo-result-score > span:nth-child(2) { display: none; }
  .shogi-demo-result-score .loser { text-align: left; }
  .shogi-piece-guides { margin-inline: -4px; padding: 10px; }
  .shogi-piece-guide-grid { grid-template-columns: 1fr; gap: 9px; }
  .shogi-piece-guide-card { grid-template-columns: minmax(155px, 56%) minmax(0, 1fr); padding: 8px; }
  .shogi-piece-guide-stage { max-width: 180px; }
  footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}