:root {
  --bg: #ece9df;
  --panel: rgba(255, 255, 255, 0.88);
  --border: #8f8973;
  --border-strong: #7d7866;
  --text: #26231d;
  --muted: #5f584d;
  --link: #1f4aa8;
  --accent: #d9d1b8;
  --accent-strong: #c7b78a;
  --notice: #fff7dc;
  --alert: #f6dfdf;
  --header-top: #fffef8;
  --header-bottom: #e8e0c8;
  --bg-gradient-mid: rgba(236, 233, 223, 0.3);
  --surface-subtle: #fbfaf4;
  --surface-soft: #f3eedf;
  --surface-emphasis: #d6c7a1;
  --menu-bg: #fffdf6;
  --menu-card: #faf7ef;
  --shadow-rgb: 94, 89, 75;
  --page-max-width: 1040px;
  --page-padding: 18px;
  --floating-home-size: 54px;
  --overlay-from: rgba(30, 18, 6, 0.18);
  --overlay-to: rgba(20, 12, 4, 0.32);
}

body[data-theme="town_slate"] {
  --panel: rgba(28, 32, 40, 0.86);
  --text: #e8eaf0;
  --muted: #8890a0;
  --border: rgba(100, 112, 135, 0.45);
  --border-strong: rgba(130, 145, 170, 0.65);
  --link: #a0b8d8;
  --accent: rgba(35, 40, 52, 0.92);
  --accent-strong: rgba(60, 70, 90, 0.85);
  --header-top: rgba(18, 22, 30, 0.93);
  --header-bottom: rgba(28, 32, 42, 0.93);
  --surface-subtle: rgba(22, 26, 35, 0.84);
  --surface-soft: rgba(35, 40, 52, 0.84);
  --surface-emphasis: rgba(60, 70, 90, 0.82);
  --menu-bg: rgba(16, 20, 28, 0.97);
  --menu-card: rgba(25, 30, 40, 0.94);
  --shadow-rgb: 10, 12, 20;
  --notice: rgba(20, 30, 55, 0.92);
  --alert: rgba(65, 12, 12, 0.92);
  --panel-heading-from: rgba(45, 52, 68, 0.96);
  --panel-heading-to: rgba(28, 34, 48, 0.96);
  --panel-heading-text: #d0d8e8;
  --panel-heading-border: rgba(100, 115, 148, 0.60);
  --overlay-from: rgba(18, 22, 38, 0.22);
  --overlay-to: rgba(10, 14, 26, 0.40);
}

/* ========================================
   Day Themes (ライト・昼間系 1〜5)
   ======================================== */

body[data-theme="day_slate"] {
  --bg: #d8dde6;
  --bg-gradient-mid: rgba(215, 224, 236, 0.4);
  --panel: rgba(236, 240, 248, 0.86);
  --text: #1e242e;
  --muted: #566070;
  --border: rgba(125, 145, 168, 0.35);
  --border-strong: rgba(98, 120, 148, 0.55);
  --link: #1e4fa0;
  --accent: rgba(212, 220, 234, 0.72);
  --accent-strong: rgba(186, 200, 220, 0.78);
  --header-top: rgba(240, 245, 252, 0.92);
  --header-bottom: rgba(218, 228, 244, 0.92);
  --surface-subtle: rgba(244, 247, 252, 0.84);
  --surface-soft: rgba(225, 232, 244, 0.84);
  --surface-emphasis: rgba(200, 214, 232, 0.82);
  --menu-bg: rgba(247, 250, 254, 0.97);
  --menu-card: rgba(236, 242, 250, 0.95);
  --shadow-rgb: 72, 86, 108;
  --notice: rgba(218, 234, 252, 0.92);
  --alert: rgba(252, 226, 226, 0.92);
  --panel-heading-from: rgba(236, 241, 250, 0.92);
  --panel-heading-to: rgba(214, 226, 244, 0.92);
  --panel-heading-text: #18222e;
  --panel-heading-border: rgba(118, 148, 182, 0.40);
  --overlay-from: rgba(195, 212, 232, 0.06);
  --overlay-to: rgba(162, 188, 215, 0.13);
}

body[data-theme="day_roof"] {
  --bg: #e6ddd2;
  --bg-gradient-mid: rgba(236, 226, 212, 0.4);
  --panel: rgba(250, 245, 238, 0.86);
  --text: #28200e;
  --muted: #6a5840;
  --border: rgba(168, 148, 115, 0.35);
  --border-strong: rgba(145, 122, 88, 0.55);
  --link: #1a4590;
  --accent: rgba(235, 224, 206, 0.72);
  --accent-strong: rgba(215, 198, 172, 0.78);
  --header-top: rgba(254, 250, 244, 0.92);
  --header-bottom: rgba(240, 230, 212, 0.92);
  --surface-subtle: rgba(254, 252, 246, 0.84);
  --surface-soft: rgba(242, 234, 218, 0.84);
  --surface-emphasis: rgba(222, 208, 185, 0.82);
  --menu-bg: rgba(255, 252, 246, 0.97);
  --menu-card: rgba(248, 242, 230, 0.95);
  --shadow-rgb: 108, 88, 60;
  --notice: rgba(224, 238, 255, 0.92);
  --alert: rgba(255, 228, 220, 0.92);
  --panel-heading-from: rgba(230, 212, 185, 0.92);
  --panel-heading-to: rgba(208, 188, 158, 0.92);
  --panel-heading-text: #241808;
  --panel-heading-border: rgba(175, 148, 108, 0.55);
  --overlay-from: rgba(235, 218, 195, 0.06);
  --overlay-to: rgba(215, 195, 165, 0.13);
}

body[data-theme="day_green"] {
  --bg: #d5e4d0;
  --bg-gradient-mid: rgba(210, 232, 205, 0.4);
  --panel: rgba(232, 246, 230, 0.86);
  --text: #182a16;
  --muted: #4a6844;
  --border: rgba(108, 152, 98, 0.35);
  --border-strong: rgba(82, 128, 70, 0.55);
  --link: #1a5820;
  --accent: rgba(205, 235, 200, 0.72);
  --accent-strong: rgba(178, 218, 170, 0.78);
  --header-top: rgba(238, 250, 235, 0.92);
  --header-bottom: rgba(215, 240, 210, 0.92);
  --surface-subtle: rgba(242, 252, 240, 0.84);
  --surface-soft: rgba(220, 242, 215, 0.84);
  --surface-emphasis: rgba(192, 228, 185, 0.82);
  --menu-bg: rgba(244, 254, 242, 0.97);
  --menu-card: rgba(230, 248, 226, 0.95);
  --shadow-rgb: 50, 88, 42;
  --notice: rgba(210, 238, 255, 0.92);
  --alert: rgba(255, 226, 220, 0.92);
  --panel-heading-from: rgba(185, 232, 175, 0.92);
  --panel-heading-to: rgba(158, 215, 145, 0.92);
  --panel-heading-text: #102010;
  --panel-heading-border: rgba(105, 168, 88, 0.55);
  --overlay-from: rgba(190, 225, 182, 0.06);
  --overlay-to: rgba(160, 205, 150, 0.13);
}

body[data-theme="day_water"] {
  --bg: #ccdde6;
  --bg-gradient-mid: rgba(205, 228, 238, 0.4);
  --panel: rgba(228, 244, 250, 0.86);
  --text: #162428;
  --muted: #426878;
  --border: rgba(82, 148, 168, 0.35);
  --border-strong: rgba(58, 125, 148, 0.55);
  --link: #0a5070;
  --accent: rgba(195, 232, 244, 0.72);
  --accent-strong: rgba(165, 215, 232, 0.78);
  --header-top: rgba(232, 250, 255, 0.92);
  --header-bottom: rgba(205, 238, 250, 0.92);
  --surface-subtle: rgba(238, 252, 255, 0.84);
  --surface-soft: rgba(210, 240, 250, 0.84);
  --surface-emphasis: rgba(178, 225, 242, 0.82);
  --menu-bg: rgba(240, 254, 255, 0.97);
  --menu-card: rgba(222, 246, 254, 0.95);
  --shadow-rgb: 40, 88, 108;
  --notice: rgba(210, 235, 255, 0.92);
  --alert: rgba(255, 226, 220, 0.92);
  --panel-heading-from: rgba(172, 225, 242, 0.92);
  --panel-heading-to: rgba(142, 208, 228, 0.92);
  --panel-heading-text: #0e2030;
  --panel-heading-border: rgba(88, 162, 188, 0.55);
  --overlay-from: rgba(182, 218, 235, 0.06);
  --overlay-to: rgba(150, 198, 220, 0.13);
}

body[data-theme="day_magic"] {
  --bg: #ddd5ea;
  --bg-gradient-mid: rgba(228, 218, 242, 0.4);
  --panel: rgba(244, 238, 254, 0.86);
  --text: #201828;
  --muted: #6248a0;
  --border: rgba(148, 115, 188, 0.35);
  --border-strong: rgba(122, 88, 168, 0.55);
  --link: #5820a0;
  --accent: rgba(228, 215, 248, 0.72);
  --accent-strong: rgba(208, 188, 238, 0.78);
  --header-top: rgba(250, 246, 255, 0.92);
  --header-bottom: rgba(235, 224, 252, 0.92);
  --surface-subtle: rgba(252, 248, 255, 0.84);
  --surface-soft: rgba(238, 228, 252, 0.84);
  --surface-emphasis: rgba(218, 200, 245, 0.82);
  --menu-bg: rgba(252, 249, 255, 0.97);
  --menu-card: rgba(244, 235, 254, 0.95);
  --shadow-rgb: 80, 48, 120;
  --notice: rgba(218, 228, 255, 0.92);
  --alert: rgba(255, 226, 220, 0.92);
  --panel-heading-from: rgba(215, 192, 248, 0.92);
  --panel-heading-to: rgba(188, 162, 232, 0.92);
  --panel-heading-text: #160e28;
  --panel-heading-border: rgba(148, 105, 215, 0.55);
  --overlay-from: rgba(210, 192, 238, 0.06);
  --overlay-to: rgba(185, 162, 220, 0.13);
}

body[data-theme="town_roof"] {
  --panel: rgba(20, 28, 38, 0.86);
  --text: #dce4f0;
  --muted: #7888a0;
  --border: rgba(80, 100, 130, 0.45);
  --border-strong: rgba(105, 130, 165, 0.65);
  --link: #88b0d8;
  --accent: rgba(25, 35, 50, 0.92);
  --accent-strong: rgba(45, 60, 82, 0.85);
  --header-top: rgba(14, 20, 30, 0.93);
  --header-bottom: rgba(22, 30, 44, 0.93);
  --surface-subtle: rgba(18, 25, 36, 0.84);
  --surface-soft: rgba(28, 38, 55, 0.84);
  --surface-emphasis: rgba(50, 68, 92, 0.82);
  --menu-bg: rgba(12, 18, 28, 0.97);
  --menu-card: rgba(20, 28, 42, 0.94);
  --shadow-rgb: 5, 10, 20;
  --notice: rgba(15, 25, 55, 0.92);
  --alert: rgba(65, 12, 12, 0.92);
  --panel-heading-from: rgba(35, 50, 72, 0.96);
  --panel-heading-to: rgba(22, 32, 50, 0.96);
  --panel-heading-text: #c8d8f0;
  --panel-heading-border: rgba(80, 110, 155, 0.60);
  --overlay-from: rgba(10, 16, 30, 0.26);
  --overlay-to: rgba(6, 10, 20, 0.44);
}

body[data-theme="town_green"] {
  --panel: rgba(14, 26, 10, 0.86);
  --text: #d8ecd0;
  --muted: #708860;
  --border: rgba(70, 110, 50, 0.45);
  --border-strong: rgba(95, 140, 68, 0.65);
  --link: #88c870;
  --accent: rgba(18, 34, 12, 0.92);
  --accent-strong: rgba(38, 62, 25, 0.85);
  --header-top: rgba(10, 20, 8, 0.93);
  --header-bottom: rgba(18, 32, 12, 0.93);
  --surface-subtle: rgba(12, 22, 8, 0.84);
  --surface-soft: rgba(22, 38, 15, 0.84);
  --surface-emphasis: rgba(42, 68, 28, 0.82);
  --menu-bg: rgba(8, 18, 6, 0.97);
  --menu-card: rgba(14, 26, 10, 0.94);
  --shadow-rgb: 5, 15, 2;
  --notice: rgba(12, 35, 10, 0.92);
  --alert: rgba(65, 12, 12, 0.92);
  --panel-heading-from: rgba(30, 55, 20, 0.96);
  --panel-heading-to: rgba(18, 36, 12, 0.96);
  --panel-heading-text: #c0e0a8;
  --panel-heading-border: rgba(70, 118, 45, 0.60);
  --overlay-from: rgba(8, 22, 5, 0.20);
  --overlay-to: rgba(5, 14, 3, 0.36);
}

body[data-theme="town_water"] {
  --panel: rgba(10, 28, 28, 0.86);
  --text: #cce8e8;
  --muted: #609090;
  --border: rgba(55, 110, 110, 0.45);
  --border-strong: rgba(75, 142, 140, 0.65);
  --link: #70c0c0;
  --accent: rgba(12, 36, 36, 0.92);
  --accent-strong: rgba(28, 68, 65, 0.85);
  --header-top: rgba(6, 20, 20, 0.93);
  --header-bottom: rgba(12, 32, 32, 0.93);
  --surface-subtle: rgba(8, 22, 22, 0.84);
  --surface-soft: rgba(16, 38, 38, 0.84);
  --surface-emphasis: rgba(32, 68, 65, 0.82);
  --menu-bg: rgba(5, 16, 16, 0.97);
  --menu-card: rgba(10, 26, 26, 0.94);
  --shadow-rgb: 2, 12, 12;
  --notice: rgba(8, 30, 35, 0.92);
  --alert: rgba(65, 12, 12, 0.92);
  --panel-heading-from: rgba(22, 55, 52, 0.96);
  --panel-heading-to: rgba(12, 36, 34, 0.96);
  --panel-heading-text: #a8d8d8;
  --panel-heading-border: rgba(55, 120, 118, 0.60);
  --overlay-from: rgba(5, 20, 20, 0.22);
  --overlay-to: rgba(3, 12, 12, 0.38);
}

body[data-theme="town_magic"] {
  --panel: rgba(20, 14, 48, 0.86);
  --text: #ddd0f8;
  --muted: #8870c0;
  --border: rgba(100, 75, 175, 0.45);
  --border-strong: rgba(130, 100, 210, 0.65);
  --link: #b090e8;
  --accent: rgba(28, 18, 62, 0.92);
  --accent-strong: rgba(55, 38, 110, 0.85);
  --header-top: rgba(14, 8, 38, 0.93);
  --header-bottom: rgba(22, 14, 55, 0.93);
  --surface-subtle: rgba(16, 10, 42, 0.84);
  --surface-soft: rgba(28, 18, 65, 0.84);
  --surface-emphasis: rgba(55, 38, 110, 0.82);
  --menu-bg: rgba(10, 6, 30, 0.97);
  --menu-card: rgba(18, 12, 48, 0.94);
  --shadow-rgb: 15, 5, 30;
  --notice: rgba(15, 10, 55, 0.92);
  --alert: rgba(65, 12, 12, 0.92);
  --panel-heading-from: rgba(45, 28, 100, 0.96);
  --panel-heading-to: rgba(28, 16, 68, 0.96);
  --panel-heading-text: #c8b0f0;
  --panel-heading-border: rgba(110, 80, 200, 0.60);
  --overlay-from: rgba(15, 5, 32, 0.24);
  --overlay-to: rgba(10, 3, 22, 0.42);
}

.password-meter {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.password-meter-count {
  font-weight: 700;
}

.password-meter-rules {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.password-meter-rule {
  color: var(--muted);
}

.password-meter-rule::before {
  content: "×";
  display: inline-block;
  width: 1.1em;
  color: #d48080;
  font-weight: 700;
}

.password-meter-rule[data-valid="true"] {
  color: color-mix(in srgb, var(--text) 72%, #7ecf94 28%);
}

.password-meter-rule[data-valid="true"]::before {
  content: "✓";
  color: #7ecf94;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, var(--bg-gradient-mid) 180px, var(--bg) 180px),
    var(--bg);
  color: var(--text);
  font-family: "Verdana", "Geneva", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}


a {
  color: var(--link);
}

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--page-padding);
}

body.admin-dungeon-balance-page .page {
  max-width: none;
  width: 100%;
}

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--header-top) 88%, transparent) 0%, color-mix(in srgb, var(--header-bottom) 88%, transparent) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), 0.12);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 50;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.site-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.locale-switch-select {
  min-width: 92px;
  height: 30px;
  padding: 2px 24px 2px 8px;
  border: 1px solid var(--border-strong);
  background: var(--menu-bg);
  color: var(--text);
  font: inherit;
  line-height: 1;
  text-align-last: center;
  box-sizing: border-box;
}

.locale-switch-select option {
  background: var(--menu-bg);
  color: var(--text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-exploration-page .site-header {
  display: none;
}

.mobile-exploration-page .page-body {
  padding-top: 0;
}

.link-button {
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.inline-button-form {
  display: inline;
  margin: 0;
}

.panel {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 rgba(var(--shadow-rgb), 0.08);
}

.panel-heading-link {
  color: inherit;
  text-decoration: none;
}

.panel-heading-link:hover {
  text-decoration: underline;
}

.panel-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -16px -16px 16px;
  padding: 8px 16px;
  background: var(--accent);
  border-bottom: 1px solid var(--border);
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.panel p:last-child {
  margin-bottom: 0;
}

.site-footer {
  margin: 24px 0 0;
  padding: 14px 12px 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(var(--shadow-rgb), 0.1);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.site-footer-links a {
  color: var(--text);
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer-copy {
  margin: 0;
  color: var(--text);
  opacity: 0.85;
}

.legal-document {
  line-height: 1.8;
}

.legal-document-updated {
  margin: -2px 0 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal-document-section {
  margin-top: 22px;
}

.legal-document-section h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}

.legal-document-section p,
.legal-document-section ul {
  margin: 8px 0 0;
}

.legal-document-section ul {
  padding-left: 1.35rem;
}

.legal-document-contact {
  margin-top: 24px;
  text-align: center;
}