/*
  LAST KING Rulebook CSS for Twenty Twenty-Four / TT4 child theme
  File name recommendation: assets/css/last-king.css

  Scope:
  - Designed to affect only pages containing .lk-rulebook.
  - Most visual variables are scoped to .lk-rulebook, not :root, to avoid polluting TT4 or Totonoesha styles.
  - Includes TT4 width/spacing overrides only when .lk-rulebook exists.

  Recommended enqueue:
  wp_enqueue_style(
    'last-king-rulebook',
    get_stylesheet_directory_uri() . '/assets/css/last-king.css',
    [],
    filemtime(get_stylesheet_directory() . '/assets/css/last-king.css')
  );
*/

/* =========================================================
   0. TT4 PAGE-WIDTH ADJUSTMENTS
   ========================================================= */

/* Modern browsers: widen only pages that contain LAST KING rulebook */
body:has(.lk-rulebook) {
  background:
    radial-gradient(circle at 20% 0%, rgba(201, 154, 58, .08), transparent 32rem),
    radial-gradient(circle at 90% 18%, rgba(142, 38, 50, .11), transparent 30rem),
    #0e0a0c;
}

body:has(.lk-rulebook) .wp-site-blocks {
  background: transparent;
}

body:has(.lk-rulebook) .wp-block-post-title,
body:has(.lk-rulebook) .entry-title {
  display: none;
}

body:has(.lk-rulebook) .wp-block-post-content,
body:has(.lk-rulebook) .entry-content,
body:has(.lk-rulebook) main .wp-block-group,
body:has(.lk-rulebook) .is-layout-constrained {
  max-width: none;
}

body:has(.lk-rulebook) .wp-block-post-content > .lk-rulebook,
body:has(.lk-rulebook) .entry-content > .lk-rulebook {
  margin-block-start: 0;
  margin-block-end: clamp(32px, 6vw, 72px);
}

/* Fallback for environments where :has() is not desired.
   Add class="last-king-page" to body via template or body_class filter if needed. */
body.last-king-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(201, 154, 58, .08), transparent 32rem),
    radial-gradient(circle at 90% 18%, rgba(142, 38, 50, .11), transparent 30rem),
    #0e0a0c;
}

body.last-king-page .wp-site-blocks {
  background: transparent;
}

body.last-king-page .wp-block-post-title,
body.last-king-page .entry-title {
  display: none;
}

body.last-king-page .wp-block-post-content,
body.last-king-page .entry-content,
body.last-king-page main .wp-block-group,
body.last-king-page .is-layout-constrained {
  max-width: none;
}

/* =========================================================
   TT4 / Gutenberg width override for LAST KING rulebook
   ルールブックを入れたカスタムHTMLブロック自体を全幅化する
   ========================================================= */

body:has(.lk-rulebook) .wp-block-post-content,
body:has(.lk-rulebook) .entry-content {
  max-width: none !important;
  width: 100% !important;
}

body:has(.lk-rulebook) .wp-block-post-content > *,
body:has(.lk-rulebook) .entry-content > * {
  max-width: none !important;
}

/* カスタムHTMLブロックが幅制限される問題を解除 */
body:has(.lk-rulebook) .wp-block-html:has(.lk-rulebook),
body:has(.lk-rulebook) .wp-block-group:has(.lk-rulebook),
body:has(.lk-rulebook) .wp-block-columns:has(.lk-rulebook) {
  max-width: none !important;
  width: 100% !important;
}

/* TT4の layout constrained 対策 */
body:has(.lk-rulebook) .is-layout-constrained > .lk-rulebook,
body:has(.lk-rulebook) .is-layout-flow > .lk-rulebook,
body:has(.lk-rulebook) .wp-block-post-content .lk-rulebook {
  max-width: 1280px !important;
  width: min(1280px, calc(100vw - 48px)) !important;
  margin-inline: auto !important;
}

/* 念のため、記事本文内の横幅変数も広げる */
body:has(.lk-rulebook) {
  --wp--style--global--content-size: 1280px;
  --wp--style--global--wide-size: 1440px;
}

/* =========================================================
   1. DESIGN TOKENS, SCOPED
   ========================================================= */

.lk-rulebook {
  --lk-bg: #140f12;
  --lk-bg-2: #20171b;
  --lk-panel: #2a1d22;
  --lk-panel-2: #37252b;
  --lk-ink: #f4eadb;
  --lk-muted: #cbb9a2;
  --lk-dim: #917e6c;
  --lk-gold: #c99a3a;
  --lk-gold-2: #f1ce72;
  --lk-red: #8e2632;
  --lk-red-2: #c84a55;
  --lk-black: #0b0b0f;
  --lk-ash: #4b4543;
  --lk-line: rgba(241, 206, 114, .22);
  --lk-line-strong: rgba(241, 206, 114, .46);
  --lk-shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --lk-radius: 18px;
  --lk-radius-sm: 12px;
  --lk-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lk-serif: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;

  width: min(1280px, calc(100vw - 48px));
  max-width: 1280px;
  margin-inline: auto;
  margin-block: clamp(18px, 4vw, 48px);
  color: var(--lk-ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(201, 154, 58, .17), transparent 32rem),
    radial-gradient(circle at 90% 14%, rgba(142, 38, 50, .22), transparent 30rem),
    linear-gradient(135deg, #0e0a0c 0%, var(--lk-bg) 42%, #21151a 100%);
  font-family: var(--lk-font);
  line-height: 1.8;
  border-radius: 24px;
  overflow: clip;
  box-shadow: var(--lk-shadow);
  border: 1px solid rgba(241, 206, 114, .18);
  isolation: isolate;
}

.lk-rulebook,
.lk-rulebook * {
  box-sizing: border-box;
}

.lk-rulebook :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, table, pre) {
  margin-block-start: 0;
}

.lk-rulebook a {
  color: var(--lk-gold-2);
  text-decoration: none;
  text-underline-offset: .18em;
}

.lk-rulebook a:hover {
  text-decoration: underline;
}

.lk-rulebook strong {
  color: var(--lk-ink);
}

/* =========================================================
   2. HERO
   ========================================================= */

.lk-hero {
  position: relative;
  padding: clamp(36px, 6vw, 76px) clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--lk-line);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)),
    radial-gradient(circle at top right, rgba(241, 206, 114, .20), transparent 26rem);
}

.lk-hero::after {
  content: "♔";
  position: absolute;
  right: clamp(18px, 6vw, 84px);
  bottom: -34px;
  color: rgba(241, 206, 114, .11);
  font-family: var(--lk-serif);
  font-size: clamp(120px, 20vw, 260px);
  line-height: 1;
  pointer-events: none;
}

.lk-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: var(--lk-gold-2);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--lk-line-strong);
  border-radius: 999px;
  padding: .35em .8em;
  background: rgba(0, 0, 0, .18);
}

.lk-title {
  margin: .35em 0 .08em;
  font-family: var(--lk-serif);
  font-size: clamp(3rem, 10vw, 7.4rem);
  line-height: .92;
  letter-spacing: .05em;
  color: var(--lk-ink);
  text-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}

.lk-subtitle {
  margin: 0;
  color: var(--lk-muted);
  font-size: clamp(1rem, 2vw, 1.28rem);
  max-width: 760px;
}

.lk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.lk-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .28em .78em;
  border: 1px solid rgba(244, 234, 219, .16);
  border-radius: 999px;
  color: var(--lk-muted);
  background: rgba(255, 255, 255, .04);
  font-size: .9rem;
}

/* =========================================================
   3. LAYOUT AND TOC
   ========================================================= */

.lk-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.lk-toc-wrap {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 18px;
  border-right: 1px solid var(--lk-line);
  background: rgba(0, 0, 0, .18);
  scrollbar-color: rgba(241, 206, 114, .35) rgba(0, 0, 0, .18);
}

.lk-toc-title {
  margin: 0 0 12px;
  color: var(--lk-gold-2);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lk-toc {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-toc a {
  display: block;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--lk-muted);
  font-size: .88rem;
  line-height: 1.35;
}

.lk-toc a:hover,
.lk-toc a:focus-visible {
  color: var(--lk-ink);
  background: rgba(241, 206, 114, .10);
  text-decoration: none;
  outline: none;
}

.lk-content {
  padding: clamp(20px, 4vw, 54px);
  min-width: 0;
}

/* =========================================================
   4. SECTIONS
   ========================================================= */

.lk-section {
  scroll-margin-top: 24px;
  margin: 0 0 clamp(30px, 6vw, 72px);
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
    rgba(42, 29, 34, .82);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.lk-section.lk-section--major {
  border-color: rgba(241, 206, 114, .36);
  background:
    linear-gradient(180deg, rgba(201, 154, 58, .10), rgba(255, 255, 255, .02)),
    rgba(42, 29, 34, .9);
}

.lk-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
}

.lk-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #1b1114;
  background: linear-gradient(135deg, var(--lk-gold-2), var(--lk-gold));
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(201, 154, 58, .22);
}

.lk-section h2,
.lk-section h3,
.lk-section h4 {
  margin: 0;
  color: var(--lk-ink);
  line-height: 1.35;
}

.lk-section h2 {
  font-family: var(--lk-serif);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: .04em;
}

.lk-section h3 {
  margin-top: 26px;
  margin-bottom: 10px;
  color: var(--lk-gold-2);
  font-size: 1.16rem;
}

.lk-section h4 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--lk-muted);
  font-size: 1rem;
}

.lk-section p {
  margin: 0 0 1em;
  color: var(--lk-muted);
}

.lk-section ul,
.lk-section ol {
  color: var(--lk-muted);
  padding-left: 1.3em;
}

.lk-section li + li {
  margin-top: .35em;
}

/* =========================================================
   5. CALLOUTS
   ========================================================= */

.lk-note,
.lk-warning,
.lk-rule,
.lk-flavor {
  margin: 18px 0;
  padding: 16px 18px;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-line);
}

.lk-note {
  background: rgba(255, 255, 255, .04);
}

.lk-warning {
  border-color: rgba(200, 74, 85, .42);
  background: rgba(142, 38, 50, .16);
}

.lk-rule {
  border-color: rgba(241, 206, 114, .38);
  background: rgba(201, 154, 58, .11);
}

.lk-flavor {
  color: var(--lk-muted);
  font-family: var(--lk-serif);
  font-size: 1.08rem;
  border-left: 4px solid var(--lk-gold);
  background: rgba(0, 0, 0, .18);
}

/* =========================================================
   6. TABLES AND CODE
   ========================================================= */

.lk-table-wrap {
  overflow-x: auto;
  margin: 16px 0 22px;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-line);
}

.lk-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  color: var(--lk-muted);
  background: rgba(0, 0, 0, .14);
}

.lk-table th,
.lk-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(241, 206, 114, .13);
  text-align: left;
  vertical-align: top;
}

.lk-table th {
  color: var(--lk-gold-2);
  background: rgba(0, 0, 0, .24);
  font-weight: 800;
  white-space: nowrap;
}

.lk-table tr:last-child td {
  border-bottom: 0;
}

.lk-code {
  margin: 16px 0;
  padding: 16px;
  border-radius: var(--lk-radius-sm);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--lk-muted);
  background: rgba(0, 0, 0, .26);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: auto;
  white-space: pre;
}

/* =========================================================
   7. CARDS, STEPS, CHIPS
   ========================================================= */

.lk-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lk-card {
  padding: 16px;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius-sm);
  background: rgba(0, 0, 0, .16);
}

.lk-card-title {
  margin: 0 0 8px;
  color: var(--lk-gold-2);
  font-weight: 900;
}

.lk-step-list {
  counter-reset: lk-step;
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.lk-step-list li {
  counter-increment: lk-step;
  position: relative;
  padding: 14px 14px 14px 54px;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-radius-sm);
  background: rgba(0, 0, 0, .15);
  color: var(--lk-muted);
}

.lk-step-list li::before {
  content: counter(lk-step);
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--lk-gold);
  color: #1b1114;
  font-weight: 900;
}

.lk-arrow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .28em .72em;
  border-radius: 999px;
  border: 1px solid var(--lk-line);
  color: var(--lk-muted);
  background: rgba(0, 0, 0, .14);
  font-size: .92rem;
}

.lk-chip--gold {
  color: var(--lk-gold-2);
  border-color: rgba(241, 206, 114, .38);
}

/* =========================================================
   8. FIELD DIAGRAM
   ========================================================= */

.lk-field-board {
  max-width: 780px;
  margin: 20px auto;
  padding: 22px;
  border: 1px solid var(--lk-line-strong);
  border-radius: 24px;
  background:
    radial-gradient(circle at center, rgba(241, 206, 114, .10), transparent 14rem),
    rgba(0, 0, 0, .18);
}

.lk-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    ". vanguard ."
    "left throne right"
    ". rear ."
    "outer . valhalla";
  gap: 14px;
  align-items: stretch;
}

.lk-field {
  min-height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--lk-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .13));
}

.lk-field strong {
  display: block;
  color: var(--lk-ink);
  font-family: var(--lk-serif);
  font-size: 1.1rem;
}

.lk-field span {
  display: block;
  color: var(--lk-dim);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-field--vanguard { grid-area: vanguard; }
.lk-field--left { grid-area: left; }
.lk-field--right { grid-area: right; }
.lk-field--rear { grid-area: rear; }
.lk-field--throne {
  grid-area: throne;
  min-height: 116px;
  border-color: rgba(241, 206, 114, .55);
  background:
    radial-gradient(circle at center, rgba(241, 206, 114, .22), transparent 62%),
    linear-gradient(180deg, rgba(201, 154, 58, .14), rgba(0, 0, 0, .16));
}
.lk-field--outer { grid-area: outer; border-style: dashed; }
.lk-field--valhalla { grid-area: valhalla; border-style: dashed; }

.lk-field--throne::before {
  content: "♔";
  display: block;
  color: var(--lk-gold-2);
  font-size: 2.1rem;
  line-height: 1;
}

/* =========================================================
   9. MOVEMENT DIAGRAM
   ========================================================= */

.lk-move-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 10px;
  max-width: 440px;
  margin: 18px auto;
}

.lk-move-cell {
  min-height: 70px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--lk-line);
  background: rgba(0, 0, 0, .16);
  color: var(--lk-muted);
  text-align: center;
}

.lk-move-cell.is-active {
  border-color: rgba(241, 206, 114, .55);
  background: rgba(201, 154, 58, .16);
  color: var(--lk-ink);
  font-weight: 800;
}

.lk-move-cell.is-empty {
  border-color: transparent;
  background: transparent;
}

/* =========================================================
   10. ROTATION DIAGRAM
   ========================================================= */

.lk-rotation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 20px 0;
}

.lk-mini-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, 1fr));
  grid-template-areas:
    ". top ."
    "left center right"
    ". bottom .";
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--lk-line);
  background: rgba(0, 0, 0, .14);
}

.lk-mini {
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(241, 206, 114, .20);
  color: var(--lk-muted);
  background: rgba(255, 255, 255, .035);
  font-size: .82rem;
  text-align: center;
}

.lk-mini.top { grid-area: top; }
.lk-mini.left { grid-area: left; }
.lk-mini.right { grid-area: right; }
.lk-mini.bottom { grid-area: bottom; }
.lk-mini.center { grid-area: center; color: var(--lk-gold-2); }

.lk-rotation-arrow {
  color: var(--lk-gold-2);
  font-size: 2rem;
  font-weight: 900;
}

/* =========================================================
   11. FOOTER
   ========================================================= */

.lk-footer-note {
  padding: 28px clamp(20px, 4vw, 54px) 42px;
  border-top: 1px solid var(--lk-line);
  color: var(--lk-dim);
  background: rgba(0, 0, 0, .18);
  font-size: .92rem;
}

.lk-footer-note p {
  margin: 0;
}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
  .lk-rulebook {
    width: min(100% - 20px, 1280px);
    margin-block: 12px 36px;
  }

  .lk-layout {
    display: block;
  }

  .lk-toc-wrap {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--lk-line);
  }

  .lk-toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lk-grid-2,
  .lk-rotation {
    grid-template-columns: 1fr;
  }

  .lk-rotation-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

@media (max-width: 640px) {
  .lk-rulebook {
    width: 100%;
    margin-block: 0 28px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .lk-hero {
    padding-inline: 18px;
  }

  .lk-content {
    padding-inline: 14px;
  }

  .lk-section {
    border-radius: 14px;
  }

  .lk-toc {
    grid-template-columns: 1fr;
  }

  .lk-field-board {
    padding: 12px;
  }

  .lk-field-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "vanguard vanguard"
      "left right"
      "throne throne"
      "rear rear"
      "outer valhalla";
  }

  .lk-field {
    min-height: 74px;
  }

  .lk-table {
    min-width: 520px;
  }
}

/* =========================================================
   13. PRINT
   ========================================================= */

@media print {
  body:has(.lk-rulebook),
  body.last-king-page {
    background: #fff !important;
  }

  .lk-rulebook {
    width: 100%;
    margin: 0;
    color: #1a1a1a;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .lk-hero,
  .lk-section,
  .lk-footer-note,
  .lk-card,
  .lk-note,
  .lk-warning,
  .lk-rule,
  .lk-flavor,
  .lk-table-wrap,
  .lk-field-board,
  .lk-mini-field,
  .lk-move-cell {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
  }

  .lk-toc-wrap {
    display: none;
  }

  .lk-layout {
    display: block;
  }

  .lk-section {
    break-inside: avoid;
    border-color: #bbb;
  }

  .lk-table,
  .lk-table th,
  .lk-table td {
    color: #1a1a1a;
    border-color: #bbb;
  }
}