@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;500;600&family=PT+Sans+Narrow:wght@400;700&display=swap");
/* #84 WiK Codex — Shared UI — dark theme + reusable fixed page visuals (2026-10-12)
   Load AFTER css/styles.css, and BEFORE any page-specific stylesheet.
   Opt-in only: body.site-ui-page. The finished homepage is unchanged.
   No gap property. Calculator output, data logic, tabs and grids are untouched. */

/* Shared neutral-black surface. */
body.site-ui-page {
  background: linear-gradient(180deg, #0c0c0c 0%, #080808 52%, #040404 100%);
  color: #eae8e3;
}
body.site-ui-page::before { content: none; }
body.site-ui-page .page-shell { padding-top: 0.55rem; padding-bottom: 1.5rem; }

/* Fixed header visual: opt in per page with .has-page-visual.
   The image, position and height are set by the page-specific class below.
   Pages without this class retain the standard neutral-black background. */
body.site-ui-page.has-page-visual {
  --page-visual-image: none;
  --page-visual-height: clamp(320px, 44svh, 390px);
  --page-visual-position: center top;
}
body.site-ui-page.has-page-visual::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--page-visual-height);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.10) 100%),
    var(--page-visual-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, var(--page-visual-position);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.65) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.65) 72%, transparent 100%);
}
body.site-ui-page.has-page-visual .page-shell {
  position: relative;
  z-index: 1;
}

/* Page background images — add only an image rule per new page. */
body.site-ui-page.sanctuary-visual {
  --page-visual-image: url("../assets/bg/sanctuary-bg.webp");
  --page-visual-position: 58% top;
}
body.site-ui-page.t10-visual {
  --page-visual-image: url("../assets/bg/t10-bg.webp");
  --page-visual-position: 58% top;
}
body.site-ui-page.duel-visual {
  --page-visual-image: url("../assets/bg/alliance-duel-bg.webp");
  --page-visual-position: 58% top;
}
/* 勝敗試算：固定背景画像 */
body.site-ui-page.estimator-visual {
  --page-visual-image: url("../assets/bg/alliance-duel-estimator-bg.webp");
  --page-visual-position: 58% top;
}

/* 「1. 現在の対戦状況」以降を画面幅いっぱいの黒背景にする */
body.site-ui-page.estimator-visual .estimator-day-panel {
  background: #050505;
  box-shadow: 0 0 0 100vmax #050505;
  clip-path: inset(0 -100vmax);
}
/* Database background */
body.site-ui-page.database-visual {
  --page-visual-image: url("../assets/bg/database-bg.webp");
  --page-visual-position: 58% top;
}

/* Shared header — values matched to the finished homepage. */
body.site-ui-page .site-header { min-height: 3.35rem; }
body.site-ui-page .brand-mark { width: 2.85rem; height: 2.85rem; margin-right: 0.52rem; }
body.site-ui-page .brand-kicker {
  color: var(--gold-2);
  font-size: 0.56rem;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: 0.085em;
}
body.site-ui-page .brand-title {
  color: #edeae2;
  font-size: 0.84rem;
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: 0.005em;
}
body.site-ui-page .language-toggle {
  min-height: 2.75rem;
  padding: 0 0.55rem;
  background: rgba(15, 15, 15, 0.25);
  color: #e0d4be;
  font-size: 0.78rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.site-ui-page .language-icon { stroke-width: 1.5; }
body.site-ui-page .language-menu {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(20, 20, 20, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
}
body.site-ui-page .language-option { font-weight: 500; }
body.site-ui-page .language-option.is-active { background: #c6a575; color: #131511; }
body.site-ui-page .language-toggle:focus-visible,
body.site-ui-page .language-option:focus-visible { outline: 2px solid #d3b586; outline-offset: 2px; }

/* Shared hierarchy: apply only to screens that opt in. */
body.site-ui-page .back-link {
  min-height: 2.5rem;
  color: #e1c389;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
}
body.site-ui-page .section-kicker {
  color: var(--gold-2);
  font-size: 0.62rem;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: 0.19em;
}
body.site-ui-page .site-footer { margin-top: 2.2rem; color: rgba(234, 232, 227, 0.6); font-weight: 450; }
body.site-ui-page .site-footer-disclaimer { color: rgba(228, 231, 220, 0.53); font-size: 0.625rem; line-height: 1.5; }

/* Alliance Duel Outcome Estimator — page header only. Calculation layout stays in styles.css. */
/* Match Sanctuary, T10 and Alliance Duel title hierarchy. */
body.site-ui-page.estimator-visual .estimator-main { margin-top: 0.3rem; }
body.site-ui-page.estimator-visual .estimator-intro { margin-top: 0.75rem; }
body.site-ui-page.estimator-visual .estimator-page-title {
  margin: 0.32rem 0 0;
  color: #f0eee9;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
body.site-ui-page.estimator-visual .estimator-page-text {
  margin: 0.48rem 0 0;
  color: #c0c7c0;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Sanctuary trial only. All input/output geometry remains managed by styles.css. */
body.site-ui-page .sanctuary-main { margin-top: 0.3rem; }
body.site-ui-page .sanctuary-intro { margin-top: 0.75rem; }
body.site-ui-page .sanctuary-page-title {
  margin-top: 0.32rem;
  color: #f0eee9;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
body.site-ui-page .sanctuary-page-text {
  margin-top: 0.48rem;
  color: #c0c7c0;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
body.site-ui-page .sanctuary-panel {
  margin-top: 1.12rem;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 1.2rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 48%, rgba(0, 0, 0, 0.045)),
    rgba(10, 10, 10, 0.64);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1.2rem 2.25rem rgba(0, 0, 0, 0.22);
}
body.site-ui-page .sanctuary-field-label { color: #c0c7c0; font-weight: 500; }
body.site-ui-page .sanctuary-breakdown-title { color: #f0eee9; font-size: 1rem; font-weight: 500; }
body.site-ui-page .sanctuary-stage-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 10, 0.30);
}
body.site-ui-page .sanctuary-stage-title { font-weight: 550; }

/* Russian text: follow the newly approved homepage font choice. */
html[lang="ru"] body.site-ui-page .sanctuary-page-title {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-page-text {
  font-family: "PT Sans", sans-serif;
  font-size: 0.79rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .section-kicker { letter-spacing: 0.08em; }
html[lang="ru"] body.site-ui-page .language-current { letter-spacing: 0; }

/* Russian Sanctuary calculator typography: text only, preserve numeric scale. */
html[lang="ru"] body.site-ui-page .sanctuary-panel {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-field-label {
  font-size: 0.79rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-select {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-submit {
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-total-label {
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-total-range {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-resource-name {
  font-size: 0.70rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-time-label {
  font-size: 0.79rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-breakdown-title {
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-stage-title {
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-detail-label {
  font-family: "PT Sans Narrow", sans-serif;
  font-size: 0.73rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-detail-values p {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page .sanctuary-resource-compact,
html[lang="ru"] body.site-ui-page .sanctuary-resource-exact,
html[lang="ru"] body.site-ui-page .sanctuary-time-value {
  font-family: var(--font-main);
}

/* Alliance Duel Outcome Estimator — Russian typography only. No layout overrides. */
/* Russian: compact Cyrillic font without excessive tracking.
   No changes to grid geometry, numeric font sizes or fixed result panel. */
html[lang="ru"] body.site-ui-page.estimator-visual .estimator-main,
html[lang="ru"] body.site-ui-page.estimator-visual .estimator-sticky-summary {
  font-family: "PT Sans", sans-serif;
}
html[lang="ru"] body.site-ui-page.estimator-visual :is(
  .estimator-main, .estimator-sticky-summary
) :is(button, input, select, textarea) {
  font-family: "PT Sans", sans-serif;
}
html[lang="ru"] body.site-ui-page.estimator-visual .estimator-page-title {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page.estimator-visual .estimator-page-text {
  font-family: "PT Sans", sans-serif;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page.estimator-visual :is(
  .estimator-section-title,
  .estimator-task-name,
  .estimator-sticky-summary-title
) {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  letter-spacing: 0;
}
html[lang="ru"] body.site-ui-page.estimator-visual :is(
  .estimator-day-tab,
  .estimator-mode-tab,
  .estimator-section-help,
  .estimator-section-reset,
  .estimator-task-rule,
  .estimator-task-meta,
  .estimator-field-label,
  .estimator-score-label,
  .estimator-result-label,
  .estimator-gap-status,
  .estimator-base-status-label,
  .estimator-base-status-value,
  .estimator-base-link,
  .estimator-reverse-label,
  .estimator-reverse-help,
  .estimator-duration-grid label,
  .estimator-sticky-summary-label,
  .estimator-summary-note,
  .estimator-reset-all
) {
  letter-spacing: 0;
  word-spacing: 0;
}

/* Preserve the established digit styles and compact single-line time outputs. */
html[lang="ru"] body.site-ui-page.estimator-visual :is(
  .estimator-gap-value,
  .estimator-summary-value,
  .estimator-task-points,
  .estimator-row-points,
  .estimator-score-input,
  .estimator-number-input,
  .estimator-duration-input
) {
  font-family: var(--font-main);
}

/* Preserve handset spacing without disturbing two-column level selectors. */

/* Tips index — shared UI without background image */
body.site-ui-page.tips-index-page .tips-main {
  margin-top: 0.3rem;
}

body.site-ui-page.tips-index-page .tips-intro {
  margin-top: 0.75rem;
}

body.site-ui-page.tips-index-page .tips-page-title {
  margin: 0.32rem 0 0;
  color: #f0eee9;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}

body.site-ui-page.tips-index-page .tips-page-text {
  margin: 0.48rem 0 0;
  color: #c0c7c0;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Tips index — Russian typography */
html[lang="ru"] body.site-ui-page.tips-index-page .tips-main {
  font-family: "PT Sans", sans-serif;
}

html[lang="ru"] body.site-ui-page.tips-index-page .tips-page-title {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="ru"] body.site-ui-page.tips-index-page .tips-page-text {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="ru"] body.site-ui-page.tips-index-page .tips-card-title {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

@media (max-width: 380px) {
  body.site-ui-page.tips-index-page .tips-page-title {
    font-size: 1.3rem;
  }

  html[lang="ru"] body.site-ui-page.tips-index-page .tips-page-title {
    font-size: 1.36rem;
  }
}


/* Database — page typography */
body.site-ui-page.database-visual .database-main {
  margin-top: 0.3rem;
}

body.site-ui-page.database-visual .database-intro {
  margin-top: 0.75rem;
}

body.site-ui-page.database-visual .database-page-title {
  margin: 0.32rem 0 0;
  color: #f0eee9;
  font-size: 1.34rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}

body.site-ui-page.database-visual .database-page-text {
  margin: 0.48rem 0 0;
  color: #c0c7c0;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Database — Russian typography */
html[lang="ru"] body.site-ui-page.database-visual .database-page-title {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: 0;
}

html[lang="ru"] body.site-ui-page.database-visual .database-page-text {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0;
}

html[lang="ru"] body.site-ui-page.database-visual :is(
  .database-tab,
  .database-panel-title,
  .database-breakdown-title,
  .database-table th
) {
  font-family: "PT Sans Narrow", "PT Sans", sans-serif;
  letter-spacing: 0;
}

html[lang="ru"] body.site-ui-page.database-visual :is(
  .database-panel-subtitle,
  .database-panel-note,
  .database-field-label,
  .database-submit,
  .database-total-label,
  .database-total-exact-unit,
  .database-page-button,
  .database-page-status,
  .exclusive-weapon-prerequisite-title,
  .exclusive-weapon-prerequisite-text,
  .exclusive-weapon-hero-name,
  .exclusive-weapon-weapon-name
) {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0;
}

@media (max-width: 380px) {
  body.site-ui-page.database-visual .database-page-title {
    font-size: 1.3rem;
  }

  html[lang="ru"] body.site-ui-page.database-visual .database-page-title {
    font-size: 1.36rem;
  }
}

@media (max-width: 380px) {
  body.site-ui-page .page-shell { padding-left: 0.83rem; padding-right: 0.83rem; }
  body.site-ui-page .sanctuary-page-title { font-size: 1.3rem; }
  html[lang="ru"] body.site-ui-page .sanctuary-page-title { font-size: 1.36rem; }
  body.site-ui-page.estimator-visual .estimator-page-title { font-size: 1.3rem; }
  html[lang="ru"] body.site-ui-page.estimator-visual .estimator-page-title { font-size: 1.36rem; }
}
@media (min-width: 700px) {
  body.site-ui-page .page-shell { padding-left: 1.45rem; padding-right: 1.45rem; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.site-ui-page .sanctuary-panel { background: rgba(18, 18, 18, 0.96); }
}

/* Database — Dark Glassmorphism */

/* 上部カテゴリメニュー */
body.site-ui-page.database-visual .database-tab {
  background: rgba(10, 11, 12, 0.66);
  border-color: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

/* 選択中のカテゴリ */
body.site-ui-page.database-visual .database-tab.is-active {
  background: linear-gradient(
    135deg,
    rgba(195, 155, 79, 0.24),
    rgba(10, 11, 12, 0.70)
  );
  border-color: rgba(214, 170, 79, 0.72);
}

/* 計算パネル全体 */
body.site-ui-page.database-visual .database-panel {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.008) 60%
    ),
    rgba(7, 8, 9, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 36px rgba(0, 0, 0, 0.28);
}

/* 必要素材の合計 */
body.site-ui-page.database-visual .database-total-card {
  background: rgba(9, 10, 11, 0.52);
}

/* 計算結果の内訳一覧 */
body.site-ui-page.database-visual .database-table-wrap {
  background: rgba(8, 9, 10, 0.42);
}