:root {
  --ink: #1a1209;
  --gold: #b8860b;
  --gold-light: #d4a017;
  --parchment: #f0e8d5;
  --parchment-dark: #ddd0b5;
  --shadow: rgba(26,18,9,0.15);
  --border: #c5b48a;
  --scroll-bg: #fdf8ef;
  --accent: #c8501a;
  --accent-light: #e0693a;
  /* DBサイトのトグルカラー */
  --c-main-bg:#fff0f3;   --c-main-border:#e8a0b8;   --c-main-text:#a03050;
  --c-damage-bg:#fff8ee; --c-damage-border:#ddb860;  --c-damage-text:#8a5010;
  --c-buff-bg:#eef4ff;   --c-buff-border:#90b4e8;    --c-buff-text:#1a3888;
  --c-debuff-bg:#fff0ee; --c-debuff-border:#e89080;  --c-debuff-text:#aa2818;
  --c-special-bg:#f4eeff;--c-special-border:#b090d8; --c-special-text:#5820a0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  background: var(--parchment);
  color: var(--ink);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at top, #f5ead0 0%, var(--parchment) 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23c5b48a' fill-opacity='0.1'%3E%3Cpath d='M30 0L60 30L30 60L0 30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ── HEADER ── */
header {
  background: linear-gradient(180deg, #1a1209 0%, #2d1e0a 60%, #3d2a10 100%);
  padding: 20px 24px 14px;
  text-align: center;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(184,134,11,0.04) 20px, rgba(184,134,11,0.04) 21px);
}
header h1 {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.25em;
  text-shadow: 0 0 30px rgba(212,160,23,0.4), 2px 2px 4px rgba(0,0,0,0.6);
  position: relative;
}
.header-deco {
  width: 100px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 6px auto 0;
  position: relative;
}
.header-deco::before, .header-deco::after {
  content: '◆'; position: absolute; top: -6px; color: var(--gold); font-size: 10px;
}
.header-deco::before { left: 0; }
.header-deco::after  { right: 0; }

/* ── MAIN ── */
.main-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 14px 60px;
}

/* ── INTRO ── */
.intro-box {
  background: var(--scroll-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 28px;
  text-align: center;
  box-shadow: 0 4px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
}
.intro-box::before, .intro-box::after {
  content: ''; position: absolute; width: 36px; height: 36px;
  border-color: var(--gold); border-style: solid;
}
.intro-box::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.intro-box::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.intro-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin-bottom: 10px;
}
.intro-desc {
  font-size: 13px;
  line-height: 1.8;
  color: #5a4a30;
  margin-bottom: 20px;
}
.kamon {
  font-size: 40px;
  display: block;
  margin: 0 auto 12px;
  line-height: 1;
  opacity: 0.85;
}

/* ── MODE SELECT ── */
.mode-select-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
@media(max-width: 520px) { .mode-select-wrap { grid-template-columns: 1fr; } }
.mode-card {
  background: var(--scroll-bg);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 16px 14px 14px;
  text-align: left;
  position: relative;
  box-shadow: 0 2px 8px var(--shadow);
}
.mode-card-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px;
  background: rgba(184,134,11,0.15);
  border: 1px solid rgba(184,134,11,0.35);
  color: var(--gold);
  border-radius: 20px;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.mode-card-badge-detail {
  background: rgba(200,80,26,0.12);
  border-color: rgba(200,80,26,0.3);
  color: var(--accent);
}
.mode-card-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.15em;
  margin-bottom: 7px;
}
.mode-card-desc {
  font-size: 11px;
  line-height: 1.8;
  color: #5a4a30;
  margin-bottom: 12px;
}
.mode-card-target {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: #9a7a50;
  font-style: italic;
}
.btn-mode {
  display: block; width: 100%;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px; letter-spacing: 0.2em;
  padding: 9px 12px;
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s; border: none;
}
.btn-mode-simple {
  background: linear-gradient(135deg, #5a4020, #3d2a10);
  color: var(--gold-light);
  border: 1px solid var(--gold);
}
.btn-mode-simple:hover {
  background: linear-gradient(135deg, #7a5a30, #5a4020);
  box-shadow: 0 3px 10px rgba(184,134,11,0.25);
}
.btn-mode-detail {
  background: linear-gradient(135deg, var(--accent), #a03a10);
  color: #fff;
  box-shadow: 0 3px 10px rgba(200,80,26,0.3);
}
.btn-mode-detail:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 4px 14px rgba(200,80,26,0.4);
  transform: translateY(-1px);
}

/* ── QUIZ CARD ── */
.quiz-card {
  background: var(--scroll-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 26px 22px;
  box-shadow: 0 4px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.progress-bar-wrap {
  height: 3px;
  background: var(--parchment-dark);
  border-radius: 2px;
  margin-bottom: 18px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  border-radius: 2px;
  transition: width 0.4s ease;
}
.quiz-mode-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #9a7a50;
  margin-bottom: 3px;
}
.q-num {
  font-size: 10px;
  color: #9a7a50;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
.q-text {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(15px, 3.5vw, 18px);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 20px;
}
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
@media(max-width: 480px) { .options-grid { grid-template-columns: 1fr; } }
.option-btn {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 11px 13px;
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  position: relative;
}
.option-btn:hover {
  border-color: var(--gold);
  background: rgba(184,134,11,0.04);
  transform: translateY(-1px);
}
.option-btn.selected {
  border-color: var(--accent);
  background: rgba(200,80,26,0.05);
}
.option-label {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}

/* ── RESULT ── */
.result-box { animation: fadeIn 0.4s ease; }
.result-header {
  text-align: center;
  background: linear-gradient(180deg, #1a1209, #2d1e0a);
  border-radius: 4px 4px 0 0;
  padding: 20px 20px 16px;
  border: 1px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.result-header::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px);
}
.result-eyebrow {
  font-size: 10px;
  color: #9a7a50;
  letter-spacing: 0.35em;
  margin-bottom: 6px;
  position: relative;
}
.result-name {
  font-family: 'Shippori Mincho', serif;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(212,160,23,0.4);
  position: relative;
  line-height: 1.4;
}
.result-body {
  background: var(--scroll-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 16px;
}

/* ── ROLE CARDS ── */
.role-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.role-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px 10px 14px;
  box-shadow: 0 1px 4px var(--shadow);
  position: relative;
  font-size: 12px;
}
/* 役割ごとの左ボーダー色 = DBサイトのカテゴリ色に対応 */
.role-card[data-role="attacker"] { background: var(--c-damage-bg); border-color: var(--c-damage-border); }
.role-card[data-role="attacker"]::before { background: var(--c-damage-text); }
.role-card[data-role="defender"] { background: var(--c-buff-bg); border-color: var(--c-buff-border); }
.role-card[data-role="defender"]::before { background: var(--c-buff-text); }
.role-card[data-role="healer"]   { background: var(--c-main-bg); border-color: var(--c-main-border); }
.role-card[data-role="healer"]::before { background: var(--c-main-text); }
.role-card[data-role="support"]  { background: var(--c-special-bg); border-color: var(--c-special-border); }
.role-card[data-role="support"]::before { background: var(--c-special-text); }
.role-card[data-role="speed"]    { background: var(--c-debuff-bg); border-color: var(--c-debuff-border); }
.role-card[data-role="speed"]::before { background: var(--c-debuff-text); }
.role-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: 4px 0 0 4px;
}
.role-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.role-label {
  font-family: 'Shippori Mincho', serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.role-card[data-role="attacker"] .role-label { color: var(--c-damage-text); }
.role-card[data-role="defender"] .role-label { color: var(--c-buff-text); }
.role-card[data-role="healer"]   .role-label { color: var(--c-main-text); }
.role-card[data-role="support"]  .role-label { color: var(--c-special-text); }
.role-card[data-role="speed"]    .role-label { color: var(--c-debuff-text); }
.role-desc { font-size: 10px; color: #9a7a50; }
.role-hime-name {
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(13px, 3vw, 16px);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
  line-height: 1.4;
}
.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

/* ── COMPACT SECTIONS ── */
.result-section { margin-top: 7px; }
.result-section-title {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.25em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.result-desc {
  font-size: 12px;
  line-height: 1.7;
  color: #4a3a22;
}

/* ── STAT CHIPS ── */
.stat-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.stat-chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid;
}
.stat-chip.attr    { background: rgba(184,134,11,0.1); border-color: rgba(184,134,11,0.3); color: #7a5a10; }
.stat-chip.skill   { background: var(--c-buff-bg); border-color: var(--c-buff-border); color: var(--c-buff-text); }
.stat-chip.region  { background: rgba(40,100,40,0.07); border-color: rgba(40,100,40,0.2); color: #285028; }

/* ── STATS GRID ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 5px;
}
.stat-item {
  text-align: center;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--parchment-dark);
  border-radius: 3px;
  padding: 4px 2px;
}
.stat-item-label { font-size: 9px; color: #9a7a50; display: block; margin-bottom: 1px; }
.stat-item-val   { font-family: 'Shippori Mincho', serif; font-size: 13px; color: var(--ink); font-weight: 600; }

/* ── RUNNERS ── */
.runner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--parchment-dark);
}
.runner-item:last-child { border-bottom: none; }
.runner-name { font-family: 'Shippori Mincho', serif; font-size: 12px; flex: 1; }
.runner-chips { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.runner-chip {
  font-size: 9px; padding: 1px 5px;
  border-radius: 20px;
  background: rgba(184,134,11,0.1);
  border: 1px solid rgba(184,134,11,0.25);
  color: #7a5a10;
}

/* ── BUTTONS ── */
.btn-start {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, #a03a10 100%);
  color: #fff;
  font-family: 'Shippori Mincho', serif;
  font-size: 15px; letter-spacing: 0.3em;
  padding: 11px 36px;
  border: none; border-radius: 3px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(200,80,26,0.4);
  transition: all 0.2s;
}
.btn-start:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  transform: translateY(-1px);
}
.btn-retry {
  display: block; width: 100%;
  margin-top: 20px;
  background: linear-gradient(135deg, #3d2a10, #2d1e0a);
  color: var(--gold-light);
  font-family: 'Shippori Mincho', serif;
  font-size: 13px; letter-spacing: 0.3em;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 3px; cursor: pointer;
  transition: all 0.2s;
}
.btn-retry:hover {
  background: linear-gradient(135deg, #5a4020, #3d2a10);
  box-shadow: 0 3px 10px rgba(184,134,11,0.2);
}

.hidden { display: none !important; }

/* ── DBサイト準拠 スキルタグ（.stag-*） ── */
.stag { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; margin:1px 1px; border:1px solid; white-space:nowrap; }
.stag-main    { background:var(--c-main-bg);    border-color:var(--c-main-border);    color:var(--c-main-text); }
.stag-damage  { background:var(--c-damage-bg);  border-color:var(--c-damage-border);  color:var(--c-damage-text); }
.stag-buff    { background:var(--c-buff-bg);    border-color:var(--c-buff-border);    color:var(--c-buff-text); }
.stag-debuff  { background:var(--c-debuff-bg);  border-color:var(--c-debuff-border);  color:var(--c-debuff-text); }
.stag-special { background:var(--c-special-bg); border-color:var(--c-special-border); color:var(--c-special-text); }
.stag-row { display:flex; flex-wrap:wrap; gap:2px; margin-top:4px; }

/* ── 特技効果 敵・味方色分け ── */
.effect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 3px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.6;
}
.effect-enemy {
  background: #fff0ee;
  border: 1px solid #e89080;
}
.effect-ally {
  background: #eef4ff;
  border: 1px solid #90b4e8;
}
.effect-target {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.effect-enemy .effect-target { color: #aa2818; }
.effect-ally  .effect-target { color: #1a3888; }
.effect-text {
  font-size: 11px;
  color: var(--ink);
  flex: 1;
}

/* ── ステータス カラーバー ── */
.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 8px;
  margin-top: 5px;
}
.stat-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.stat-val {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 600;
}
.stat-label-s {
  font-size: 9px;
  color: #9a7a50;
  text-align: right;
  line-height: 1;
}
.stat-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--parchment-dark);
  overflow: hidden;
  width: 100%;
}
.stat-fill { height: 100%; border-radius: 2px; }
.fill-sougou   { background: linear-gradient(90deg, #c0392b, #e05040); }
.fill-tairyoku { background: linear-gradient(90deg, #27ae60, #48c870); }
.fill-kinkou   { background: linear-gradient(90deg, #2980b9, #50a0d0); }
.fill-kinbou   { background: linear-gradient(90deg, #8e44ad, #a860c8); }
.fill-mabou    { background: linear-gradient(90deg, #d4820a, #e8a030); }
.fill-hayasa   { background: linear-gradient(90deg, #16a085, #30c8a8); }


/* ── シェアボタン（DBサイトの ol-btn 準拠） ── */
.share-wrap {
  background: linear-gradient(180deg, #1a1209 0%, #2d1e0a 60%, #3d2a10 100%);
  border: 1px solid rgba(184,134,11,0.35);
  border-radius: 4px;
  padding: 8px 12px 10px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.share-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px);
}
.share-label {
  display: block;
  font-size: 9px;
  color: #9a7840;
  letter-spacing: 0.25em;
  margin-bottom: 6px;
  position: relative;
}
.share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  align-items: center;
  position: relative;
}
/* ol-btnと同一定義 */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 2px;
  text-decoration: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: opacity 0.15s, filter 0.15s;
  line-height: 1.6;
  cursor: pointer;
  border: 1px solid;
  background: none;
}
.share-btn:hover { opacity: 0.75; filter: brightness(1.15); }
.share-icon { font-style: normal; line-height: 1; }
/* X：ol-xと同一 */
.share-x {
  background: rgba(0,0,0,0.3);
  border-color: rgba(200,200,200,0.3);
  color: #cccccc;
}
/* LINE：ol-lineと同一 */
.share-line {
  background: rgba(0,195,0,0.15);
  border-color: rgba(0,195,0,0.35);
  color: #40c840;
}
/* Facebook：ol-otherと同一 */
.share-fb {
  background: rgba(100,120,200,0.12);
  border-color: rgba(100,120,200,0.3);
  color: #9090c8;
}
/* Instagram：ol-goodsと同一 */
.share-ig {
  background: rgba(214,51,132,0.2);
  border-color: rgba(214,51,132,0.4);
  color: #e06090;
}