:root{color-scheme:light;--ink:#1d2f5c;--ink-soft:#3f4c68;--ink-light:#6a7690;--primary-blue:#2465ed;--font-base:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--paper:rgba(255,255,255,.96);--gold:#f0b429;--round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}
*{box-sizing:border-box}
html{background:#eef5fc;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#eef5fc;font-family:var(--font-base);line-height:1.75}
a{color:var(--primary-blue);text-underline-offset:3px}
.page{width:min(100%,480px);margin:0 auto;padding:0 16px 40px;position:relative;background:#fff;min-height:100vh}
.hero-banner{display:block;width:100%;height:auto;border-radius:18px;filter:drop-shadow(0 12px 24px rgba(95,60,20,.18))}
.hero-card{position:relative;margin-top:14px;padding:16px 18px;overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:20px;color:#fff;background:linear-gradient(128deg,#102b5c 0%,#3152bd 55%,#7042c8 100%);text-align:center;box-shadow:0 12px 28px rgba(34,43,105,.22)}
.hero-card::before,.hero-card::after{position:absolute;width:96px;height:96px;border:1px solid rgba(255,255,255,.34);transform:rotate(45deg);content:""}
.hero-card::before{top:-70px;left:-45px}.hero-card::after{right:-49px;bottom:-72px}
.hero-card>*{position:relative;z-index:1}
.kicker{display:block;color:#ffd98a;font-size:10px;font-weight:900;letter-spacing:.18em}
.hero-card h1{margin:4px 0 0;font-family:var(--round);font-size:17px;font-weight:800;line-height:1.5;text-shadow:0 2px 8px rgba(24,25,100,.3)}
.hero-card p{margin:8px 0 0;color:#d8efff;font-size:11px;font-weight:700}
.campaign-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.campaign-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border:1px solid #dce7f5;border-radius:999px;background:#f2f7ff;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}
.card{margin-top:14px;overflow:hidden;border:1px solid #e5edf7;border-radius:20px;background:var(--paper);scroll-margin-top:84px}
.card-head{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:16px;color:var(--ink);background:#f2f7ff;border-bottom:1px solid #e5edf7}
.tone-violet .card-head{background:linear-gradient(105deg,#315ccf 0%,#7044dc 55%,#9c2fa7 100%)}
.tone-amber .card-head{background:linear-gradient(105deg,#c2410c 0%,#e8801f 55%,#f0b429 100%)}
.tone-pink .card-head{background:linear-gradient(105deg,#6a42d6 0%,#9c2fa7 56%,#c42e78 100%)}
.section-number{flex:none;color:var(--primary-blue);font-size:14px;font-weight:800;letter-spacing:.04em}
.card-head h2{margin:0;font-family:var(--font-base);font-size:19px;font-weight:800;letter-spacing:.03em;line-height:1.4;text-align:center}
.card-body{padding:18px 16px}
.card-body p{margin:0 0 12px;color:var(--ink-soft);font-size:15px;font-weight:600;line-height:1.75}
.card-body p:last-child{margin-bottom:0}
.card-body p strong{color:#2c467f}
.lead{color:var(--ink);font-size:18px!important;font-weight:800;text-align:center;line-height:1.6}
.steps{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:center;min-height:61px;padding:10px 12px;border-radius:14px;background:#f3f6fd}
.step-number{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#fff;background:var(--primary-blue);font-size:16px;font-weight:800}
.step-copy strong{display:block;color:var(--ink);font-size:16px;font-weight:800;line-height:1.5}
.step-copy span{display:block;margin-top:4px;color:var(--ink-soft);font-size:15px;font-weight:600;line-height:1.75}
.period{margin:0 0 14px;padding:14px 16px;border-radius:16px;color:#fff;background:#102b5c;text-align:center}
.period-label{display:block;color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em}
.period-value{display:block;margin-top:3px;font-size:clamp(17px,5vw,22px);font-weight:900;line-height:1.35}
.table-shell{overflow-x:auto;border:1px solid #d9d2e8;border-radius:13px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.5}
thead th{padding:8px 8px;color:#fff;background:linear-gradient(105deg,#315ccf,#7044dc);font-size:10px;font-weight:900;letter-spacing:.02em;text-align:left;line-height:1.35;vertical-align:middle}
td,tbody th{padding:9px 8px;border-top:1px solid #e6e2f0;vertical-align:middle;text-align:left}
tbody th{color:var(--ink);background:#f7f5fc;font-size:11px;font-weight:900}
tbody tr:first-child td,tbody tr:first-child th{border-top:0}
td{color:#354a77;font-weight:700}
.note{margin:12px 0 0;padding:10px 12px;border:2px solid var(--gold);border-radius:6px 16px 6px 16px;background:linear-gradient(135deg,#fffbe2,#fff4e6);color:#6b4a12;font-size:11px;font-weight:700;line-height:1.65}
figure{margin:0;min-width:0}
figure img{display:block;width:100%;height:auto}
.shot{margin-top:14px}
.shot a{display:block;overflow:hidden;border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.shot.chart{max-width:340px;margin-inline:auto}
.shot.chart a{background:#0b1a33}
figcaption{padding:8px 0 0;text-align:center;line-height:1.5}
figcaption strong{display:block;color:var(--ink);font-size:15px;font-weight:800}
figcaption span{display:block;color:var(--ink-soft);font-size:11px}
.info{display:grid;gap:10px}
.info article{padding:14px;border-left:3px solid #85b6ff;border-radius:5px 14px 14px 5px;background:#f5f9ff}
.info h3{margin:0 0 8px;color:var(--ink);font-size:16px;font-weight:800;line-height:1.5}
.info p{font-size:15px;line-height:1.75;margin:0 0 8px}
.reward-stage{width:fit-content;margin:0 auto 10px;padding:6px 18px;border-radius:999px;color:#334d96;background:#edf0ff;font-size:12px;font-weight:900}
.divider{margin-top:18px;padding-top:18px;border-top:1px dashed #d9cdb8}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:14px}
.card-grid.three>:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
.reward-background>a{display:block;aspect-ratio:2/3;overflow:hidden;border-radius:14px;background:#eaf7ff;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.reward-background img{width:100%;height:100%;object-fit:cover}
.toggle{margin-top:14px;overflow:hidden;border:1px solid #d4caf6;border-radius:12px;background:#faf8ff}
.toggle summary{position:relative;display:flex;min-height:40px;align-items:center;justify-content:center;padding:9px 40px;cursor:pointer;list-style:none;color:#fff;background:linear-gradient(105deg,#6347d8 0%,#9635bd 100%);font-size:12px;font-weight:900;letter-spacing:.04em;text-align:center}
.toggle summary::-webkit-details-marker{display:none}
.toggle summary::after{position:absolute;right:11px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);content:"⌄";font-size:13px;line-height:1;transition:transform .2s ease}
.toggle[open] summary::after{transform:rotate(180deg)}
.toggle summary:focus-visible{outline:3px solid #1cc7dc;outline-offset:-3px}
.toggle-body{padding:10px}
.toggle-body p{margin:0 0 8px;font-size:11px}

/* Flutter BattleV2CardView: base → photo → UI; no effect/hologram layers.
   Layered frames use photoWindow L .055 / T .038 / R .945 / B .962.
   Source: oshiai_flutter/lib/game/battle_card_v2/widgets/battle_v2_card.dart */
.card-preview-item{container-type:inline-size;width:100%}
.card-preview-item img{display:block;border:0;background:transparent}
.card-preview{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:14px;box-shadow:0 8px 18px #0000003d;isolation:isolate;line-height:1.2;color:#fff}
.card-preview .card-preview-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-preview-photo{position:absolute;left:5.5%;top:3.8%;width:89%;height:92.4%;overflow:hidden}
.card-preview .card-preview-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:translateY(-3.246753%) scale(1.04);transform-origin:top center}
.card-preview .card-preview-attribute{position:absolute;left:7.2%;top:5.6%;width:10.5cqw;height:auto}
.card-preview .card-preview-rarity{position:absolute;right:7.2%;top:5.6%;width:14cqw;height:auto}
.card-preview .card-preview-rarity-sr{width:15.8cqw}
.card-preview-moves{position:absolute;left:7.8%;right:7.8%;top:55%;font-size:5.064cqw;font-weight:900}
.card-preview-move+.card-preview-move{margin-top:.23em}
.card-preview-move-heading{display:flex;align-items:center;gap:.2em;height:1.6em;white-space:nowrap}
.card-preview .card-preview-move-icon{width:1.28em;height:1.28em;flex:none;object-fit:contain}
.card-preview-move-name{flex:1;min-width:0}
.card-preview-move-name,.card-preview-damage,.card-preview-uses,.card-preview-move-detail,.card-preview-name{-webkit-text-stroke:2px #132b3b;paint-order:stroke fill;text-shadow:0 1px 2px #132b3b}
.card-preview-damage{font-size:1.02em}
.card-preview-uses{color:#fff0ba;font-size:.86em;margin-left:.35em}
.card-preview-uses small{font-size:.66em;margin-right:.06em}
.card-preview-move-detail{padding-left:1.9em;font-size:.78em;font-weight:800;line-height:1.16;min-height:1.48em}
.card-preview-name{position:absolute;left:7.8%;right:7.8%;bottom:6.5%;padding:.2em .3em;line-height:1.4;overflow:hidden;text-overflow:ellipsis;font-size:4.22cqw;font-weight:800;background:linear-gradient(90deg,transparent,#0f1c2a5c 18%,#0f1c2a52 82%,transparent);white-space:nowrap}

@media print{nav{display:none}.card{break-inside:avoid;box-shadow:none}body{background:#fff}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toggle summary::after{transition:none}}

.card-preview .card-preview-foreground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* /about_battle_mode/ と同じヘッダー・パンくず・アプリ案内 */
/* グローバル固定トップバー */
.global-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0 -16px 16px;
  padding: 10px 16px;
  min-height: 68px;
  background: #fff;
  border-bottom: 1px solid #e5edf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  flex-shrink: 0;
  text-decoration: none;
}

.brand-badge {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-blue);
}

.nav-link.cta-btn {
  background: var(--primary-blue);
  color: #fff;
  padding: 0 12px;
  border-radius: 10px;
}

/* パンくずリスト */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 6px 0 14px;
  padding: 4px 2px;
}

.breadcrumb a {
  color: var(--primary-blue);
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb span.sep {
  color: var(--ink-light);
}

/* CTAセクション */
.cta-banner {
  position: relative;
  margin-top: 32px;
  padding: 28px 18px;
  border: 1px solid #dceaff;
  border-radius: 16px;
  color: var(--ink);
  background: #edf5ff;
  text-align: center;
  scroll-margin-top: 84px;
}

.cta-banner::after {
  content: none;
}

.cta-banner > * {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  margin: 0 0 6px;
  font-family: var(--font-base);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

.cta-banner p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

.store-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.store-link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.store-link:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.store-link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 44px;
  object-fit: contain;
}

/* フッター */
footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #dce7f5;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.copyright { color: var(--ink-soft); }
.brand-mark { display: block; width: 64px; height: auto; }
.nav-links { margin: 0; }
a:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 3px; }
@media (max-width: 359px) {
  .global-bar { gap: 8px; padding-inline: 12px; }
  .brand-logo { flex-direction: column; gap: 1px; align-items: flex-start; }
  .brand-mark { width: 58px; }
  .nav-links { gap: 6px; }
  .nav-link.cta-btn { padding-inline: 10px; }
}

/* シーズン3固有: 読みやすさのための文字サイズ・季節フレームの重ね順・補足ブロック */
.card-body .lead{color:var(--ink);font-size:18px;font-weight:800;text-align:center;line-height:1.6}
table{font-size:14px;line-height:1.55}
thead th{font-size:13px;font-weight:800;line-height:1.4}
tbody th{font-size:14px;font-weight:800}
tbody th small{display:block;margin-top:2px;color:var(--ink-soft);font-size:12px;font-weight:700}
td{white-space:nowrap}
figcaption span{font-size:13px;font-weight:600}
.reward-stage{font-size:14px;font-weight:800}
.sub-divider{margin-top:16px;padding-top:16px;border-top:1px dashed #dce7f5}
.card-preview-photo{z-index:1;-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.card-preview .card-preview-foreground{z-index:2}
.card-preview .card-preview-attribute,.card-preview .card-preview-rarity,.card-preview-moves,.card-preview-name{z-index:3}
footer p{margin:0 0 4px}
.note{font-size:15px;line-height:1.7;margin-top:14px}

/* シーズン4: 補足文字を読める大きさへ */
table{font-size:14px}
thead th{font-size:13px}
tbody th{font-size:14px}
tbody th small{display:block;margin-top:2px;font-size:13px;font-weight:700}
.note{font-size:14px}
figcaption span{font-size:13px}
.reward-stage{font-size:14px}

/* 語の途中で折り返さない（対応ブラウザのみ） */
.card-body,.maintenance{word-break:auto-phrase;text-wrap:pretty}

/* 開催期間とメンテナンス */
.campaign-header .period{margin:14px 0 0}
.maintenance{margin:10px 0 0;padding:12px 14px;border:2px solid #d9a441;border-radius:14px;background:#fff8e6;color:#5c4210;font-size:15px;font-weight:700;line-height:1.7}
.maintenance strong{display:block;font-size:16px;font-weight:800}

/* ダンジョン */
.dungeon-list{display:grid;gap:12px}
.dungeon{position:relative;isolation:isolate;display:flex;align-items:center;min-height:160px;overflow:hidden;border:2px solid #aa884b;border-radius:14px;background-color:#131525;background-size:cover;background-position:center}
.dungeon::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(90deg,#0b112af5 0%,#0b112ad9 58%,#0b112a22 100%)}
.dungeon-copy{width:100%;padding:14px 12px;color:#fff;text-shadow:0 1px 5px #000}
.dungeon-number{display:block;color:#ffe1a6;font-size:12px;font-weight:800;letter-spacing:.04em}
.dungeon h3{margin:5px 0 8px;font-size:17px;font-weight:800;line-height:1.5}
.card-body .dungeon p{display:flex;gap:12px;margin:0;color:#fff;font-size:14px}
.dungeon p span{color:#ffe1a6;letter-spacing:.05em}
.card-body .dungeon .dungeon-meta{margin-top:2px;font-size:13px}
.dungeon-number{font-size:13px}
.dungeon.gate{background-image:url('https://public.oshi-ai.com/game_assets/v2/images/dungeon/backgrounds/bg_20261111_d1.webp?v=1');background-position:center 31%}
.dungeon.greenhouse{background-image:url('https://public.oshi-ai.com/game_assets/v2/images/dungeon/backgrounds/bg_20261111_d2.webp?v=1');background-position:center 31%}
.sub-title{margin:22px 0 10px;padding-left:10px;border-left:4px solid #85b6ff;color:var(--ink);font-size:17px;font-weight:800;line-height:1.5}
.plain-list{margin:0 0 12px;padding-left:1.2em;color:var(--ink-soft);font-size:15px;font-weight:600;line-height:1.75}
.plain-list li+li{margin-top:4px}

/* 育成ドラマの舞台 */
.scene{margin:0 0 14px;overflow:hidden;border-radius:14px;aspect-ratio:16/9;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.scene img{width:100%;height:100%;object-fit:cover;object-position:center 40%}