@charset "utf-8";

/*
 * 異世界コンプリートマップ（BEM + 命名整形版）
 * ・CSSはstyle属性へのベタ書きを廃止し、すべてBEMクラスへ集約
 * ・グローバルCSSとの衝突回避のため、全クラス名・keyframes名に接頭辞 isekai- を付与
 *   （BEM: isekai-ブロック__エレメント--モディファイア。領域色は isekai-q1〜4、状態は --empty/--owned/--complete）
 * ・CSSカスタムプロパティ（--accent 等トークン）は :root スコープのため接頭辞なし
 * ・動的値（進捗バー幅）のみ JS から CSSカスタムプロパティ --pct を設定
 * ・対応環境: iOS 17.0+ Safari / Android 8+ Chrome / PC Firefox
 *   （CSSカスタムプロパティ / clamp() / color-mix() / flex-grid gap / -webkit-line-clamp / backdrop-filter[-webkit-併記] / inset）
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── デザイントークン（単一の真実の源）──────────────────────── */
:root {
  --bg: #0C141F;
  --frame: #141D2B;
  --panel: #182437;
  --panel-inset: #101D2B;
  --line: #2A5457;
  --line-soft: #2A4650;
  --accent: #00D7DC;
  --accent-ar: 0,215,220;
  --ink: #E0F0F0;
  --muted: #8FBCBC;
  --muted-2: #6AACAC;
  --warning: #FF6A3D;
  --warning-ar: 255,106,61;
  --warning-lite: #FF9068;
  --reward: #FFE060;
  --shogo: #7FE6B8;
  --q1: #FF9A3C;
  --q2: #FFDD44;
  --q3: #5AFFA0;
  --q4: #C090FF;
  --font-num: "Orbitron","Bahnschrift","DIN Alternate","Segoe UI",sans-serif;
  --font-body: "Yu Gothic UI","Hiragino Kaku Gothic ProN","Segoe UI","Helvetica Neue",sans-serif;
  --fs-num-xl: 30px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-2xs: 12px;  /* 補助情報専用の最小サイズ（12px、文字サイズ改善ガイドライン準拠） */
  --sp-1: 3px;
  --sp-2: 5px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
}

/* 領域カラーのモディファイア（--q と rgb三つ組 --q-ar を供給。任意ブロックに付与） */
.isekai-q1 { --q: var(--q1); --q-ar: 255,154,60; }
.isekai-q2 { --q: var(--q2); --q-ar: 255,221,68; }
.isekai-q3 { --q: var(--q3); --q-ar: 90,255,160; }
.isekai-q4 { --q: var(--q4); --q-ar: 192,144,255; }

/* ── ユーティリティ ── */
.isekai-is-hidden { display: none !important; }
.isekai-is-invisible { visibility: hidden; }
.isekai-num {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  letter-spacing: 0.5px;
}
.isekai-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;
}

body {
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 8px;
  min-height: 100vh;
  font-family: var(--font-body);
  margin-bottom: 30px;
}

/* ── キーフレーム ── */
@keyframes isekai-cmplt {
  0%,100% { border-color: var(--cc1); box-shadow: 0 0 8px var(--cc1),inset 0 0 0 1px rgba(255,255,255,0.45); }
  50% { border-color: var(--cc2); box-shadow: 0 0 20px var(--cc2),inset 0 0 0 1px rgba(255,255,255,0.95); }
}
@keyframes isekai-popIn {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  60% { transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes isekai-popInStatic {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  60% { transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes isekai-overlayIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes isekai-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* レベル数値の明滅。text-shadow のアニメーションは毎フレーム再ペイントを要求するため、
   明滅は opacity で行い、発光そのものは静的な影として保持する。 */
@keyframes isekai-lvPulse {
  0%,100% { opacity: 0.75; }
  50% { opacity: 1; }
}
/* 走査線の移動。top はレイアウトプロパティのため毎フレーム再レイアウトが走る。
   transform に置き換えて合成のみで完結させる。
   走査線ラッパを親と同じ高さにしているため、translateY の % は親の高さ基準になり
   元の top: -2px → 100% と同じ軌道になる。 */
@keyframes isekai-scanLine {
  0% { transform: translateY(-2px); }
  100% { transform: translateY(100%); }
}
@keyframes isekai-barGlow {
  0%,100% { box-shadow: 0 0 4px rgba(var(--accent-ar),0.3); }
  50% { box-shadow: 0 0 10px rgba(var(--accent-ar),0.7); }
}
@keyframes isekai-titleGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(50, 230, 235, 0.5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(50, 230, 235, 0.95)); }
}
@keyframes isekai-slotReveal {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes isekai-almostBlink {
  0%,100% { border-color: var(--q); box-shadow: 0 0 4px var(--q); }
  50% { border-color: var(--reward); box-shadow: 0 0 10px rgba(255,224,96,0.5); }
}
@keyframes isekai-deadlinePulse {
  0%,100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes isekai-narrativeFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes isekai-narrativeGlow {
  0%,100% { text-shadow: 0 0 6px rgba(var(--accent-ar),0.3); }
  50% { text-shadow: 0 0 14px rgba(var(--accent-ar),0.8); }
}
@keyframes isekai-narrativeLine {
  0% { width: 0; }
  100% { width: 80px; }
}
@keyframes isekai-ctaBlink {
  0%,100% { box-shadow: 0 0 12px rgba(var(--accent-ar),0.35); border-color: var(--accent); }
  50% { box-shadow: 0 0 26px rgba(var(--accent-ar),0.95); border-color: #7FFFF2; }
}
@keyframes isekai-procFill {
  to { width: 100%; }
}

/* ── レイアウト: SP 430px基準 / PC(≥768px)拡張 ── */
.isekai-app {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}
.isekai-app__frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: var(--sp-5);
  color: var(--ink);
  background:
    radial-gradient(1px 1px at 15% 20%,rgba(200,255,250,0.45),transparent),
    radial-gradient(1px 1px at 70% 8%,rgba(200,255,250,0.35),transparent),
    radial-gradient(1.5px 1.5px at 40% 45%,rgba(var(--accent-ar),0.28),transparent),
    radial-gradient(1px 1px at 88% 35%,rgba(200,255,250,0.3),transparent),
    radial-gradient(1px 1px at 25% 70%,rgba(192,144,255,0.28),transparent),
    radial-gradient(1.5px 1.5px at 60% 85%,rgba(200,255,250,0.28),transparent),
    radial-gradient(1px 1px at 92% 65%,rgba(255,221,68,0.22),transparent),
    var(--frame);
}
.isekai-app__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.05;
}
/* 走査線本体。transform: translateY(100%) を親の高さ基準にするため要素自体を親と同じ高さにし、
   実際の線は ::before（高さ2px）で描く。 */
.isekai-app__scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  will-change: transform;
  animation: isekai-scanLine 4s linear infinite;
}
.isekai-app__scan-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* ── サイトバー ── */
.isekai-sitebar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid #223444;
}
.isekai-sitebar__home {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-body);
  color: #8AB8C8 !important;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}
.isekai-sitebar__home:hover { color: var(--accent); }
.isekai-sitebar__spacer { flex: 1; }
.isekai-sitebar__info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: rgba(var(--accent-ar),0.08);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 3px 9px;
  cursor: pointer;
  color: #7FD0CC;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
}
.isekai-sitebar__info:hover {
  background: rgba(var(--accent-ar),0.18);
  color: var(--accent);
  border-color: var(--accent);
}
.isekai-sitebar__info-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-2xs);
  font-weight: 800;
  font-style: normal;
}

/* ── ヒーロー ── */
.isekai-hero {
  position: relative;
  /* 上下の余白を揃える（タイトル上・ピル上下を var(--sp-4)=8px で統一） */
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-3);
  text-align: center;
  background: radial-gradient(ellipse 70% 100% at 50% 0%,rgba(var(--accent-ar),0.09),transparent);
}
/* ロゴ画像版のタイトル */
.isekai-hero__logo {
  display: block;
  width: min(100%, 320px);
  height: auto;
  margin: 0 auto;
  animation: isekai-titleGlow 5s ease-in-out infinite;
  transform: scale(1.13);
}
.isekai-hero__deadline-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  flex-wrap: nowrap;
}
.isekai-hero__deadline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 10px;
  border: 2px solid var(--warning);
  border-radius: 12px;
  background: rgba(var(--warning-ar),0.12);
  white-space: nowrap;
  flex-shrink: 0;
  animation: isekai-deadlinePulse 2s ease-in-out infinite;
}
.isekai-hero__deadline-label {
  font-size: var(--fs-xs);
  color: var(--warning-lite);
  font-weight: 600;
}
.isekai-hero__deadline-icon {
  font-size: var(--fs-xs);
  color: var(--warning);
}
.isekai-hero__deadline-days {
  font-size: var(--fs-sm);
  color: var(--warning);
  font-weight: 800;
}

/* ── 注意バナー ── */
.isekai-notice {
  display: none;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
}
.isekai-notice.isekai-is-visible { display: flex; }
.isekai-notice--warning {
  border: 2px solid var(--warning);
  background: rgba(var(--warning-ar),0.10);
}
.isekai-notice__icon {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1.4;
}
.isekai-notice__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #FFCDB5;
}
.isekai-notice__lead {
  color: var(--warning-lite);
  font-weight: 800;
}
.isekai-notice__em {
  color: var(--reward);
  font-weight: 800;
}

/* ── 統合ステータスボード ── */
.isekai-board {
  margin-bottom: var(--sp-3);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--panel);
  padding: var(--sp-5) var(--sp-6);
  overflow: hidden;
}
.isekai-board__shogo {
  font-size: var(--fs-lg);
  color: var(--shogo);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 0 8px rgba(127,230,184,0.35);
  margin-bottom: var(--sp-2);
}
.isekai-board__bar {
  height: 8px;
  background: var(--panel-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  animation: isekai-barGlow 2s ease-in-out infinite;
}
.isekai-board__bar-fill {
  height: 100%;
  width: var(--pct,0);
  background: linear-gradient(90deg,#2F8F7A,var(--shogo));
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.isekai-board__next {
  font-size: var(--fs-xs);
  color: #6FBFA8;
  margin-top: var(--sp-2);
  line-height: 1.4;
  font-weight: 500;
}
.isekai-board__divider {
  height: 1px;
  background: var(--line-soft);
  margin: var(--sp-5) 0;
}
.isekai-board__stats {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
}
.isekai-board__quads {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}
.isekai-board__quads-col { flex: 1; }
.isekai-board__radar { flex-shrink: 0; }

/* ステータス3列 */
.isekai-stat {
  flex: 1;
  text-align: center;
}
.isekai-stat--divided {
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.isekai-stat__label {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2px;
}
.isekai-stat__value {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  letter-spacing: 0.5px;
  font-size: var(--fs-num-xl);
  line-height: 1.1;
  color: var(--accent);
  font-weight: 800;
}
/* 発光は静的な影として保持し、明滅は opacity のみで行う（合成のみで完結する） */
.isekai-stat__value--pulse {
  text-shadow: 0 0 16px rgba(var(--accent-ar),0.75);
  will-change: opacity;
  animation: isekai-lvPulse 3s ease-in-out infinite;
}
.isekai-stat__unit {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
}
.isekai-stat__note {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
}
.isekai-stat--reward .isekai-stat__value.top { color: var(--reward); }
.isekai-stat--reward .isekai-stat__note { color: var(--reward); font-weight: 700; }

/* 領域バー（ボード内） */
.isekai-qbar__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
/* 領域アイコン画像（実体72x72の正方形を縮小表示）。
   インラインフローで隣のテキストと並ぶため vertical-align で行揃えする。 */
.isekai-qbar__icon {
  width: 18px;
  height: 18px;
  vertical-align: -0.15em;
  object-fit: contain;
}
.isekai-qbar__name {
  font-size: var(--fs-body);
  color: var(--q);
  font-weight: 800;
}
.isekai-qbar__count {
  margin-left: auto;
  font-size: var(--fs-body);
  color: var(--q);
  font-weight: 800;
}
.isekai-qbar__track {
  height: 12px;
  background: var(--panel-inset);
  border: 1px solid #2A4A4A;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.isekai-qbar__fill {
  height: 100%;
  width: var(--pct,0);
  background: var(--q);
  box-shadow: 0 0 5px var(--q);
  transition: width 0.5s;
}
.isekai-qbar + .isekai-qbar { margin-top: var(--sp-4); }
/* 領域アイコンを重ねるための基準。SVGと同じ寸法にし、アイコンは % 位置で絶対配置する */
.isekai-radar {
  position: relative;
  width: 170px;
  height: 170px;
}
.isekai-radar__svg { width: 170px; height: 170px; }
/* 頂点ラベルの領域アイコン。left/top は JS が viewBox 座標から % で算出して付与する。
   translate(-50%,-50%) で中心合わせするため、サイズ変更時に座標の再計算が不要。 */
.isekai-radar__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%,-50%);
  object-fit: contain;
  pointer-events: none;
}
.isekai-radar__poly {
  fill: rgba(var(--accent-ar),0.12);
  stroke: var(--accent);
  stroke-width: 2;
}

/* ── タブ ── */
.isekai-tabs {
  display: flex;
  gap: 1px;
  border-bottom: 2px solid var(--q,var(--accent));
}
.isekai-tab {
  flex: 1;
  padding: var(--sp-4) var(--sp-1);
  /* 他の--fs-xs適用箇所（12px）より少し小さくし、「王道・世界観」等の長い領域名が折り返すのを防ぐ */
  font-size: 11px;
  font-family: inherit;
  /* 非選択タブも領域カラーで淡く色づけし「選べる項目」であることを示す */
  /* 選択中タブとの見分けやすさを優先し、非選択タブの文字色は彩度・明度を落とす */
  background: linear-gradient(180deg,rgba(var(--q-ar),0.12),#111D2B 70%);
  color: color-mix(in srgb,var(--q) 12%,var(--muted-2));
  border: 2px solid rgba(var(--q-ar),0.4);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: background 0.15s ease,color 0.15s ease,border-color 0.15s ease,padding-top 0.15s ease;
}
/* 非選択タブは一段低く（引っ込んで）見せ、選択タブとの高低差で切替可能と分かるようにする */
.isekai-tab:not(.isekai-tab--active) {
  padding-top: var(--sp-2);
}
.isekai-tab:not(.isekai-tab--active):hover {
  background: linear-gradient(180deg,rgba(var(--q-ar),0.28),#16273A 70%);
  border-color: rgba(var(--q-ar),0.85);
  color: var(--q);
  padding-top: var(--sp-4);
}
.isekai-tab:active { transform: translateY(1px); }
.isekai-tab--active {
  background: var(--panel);
  color: var(--q);
  border-color: var(--q);
  border-bottom: 2px solid var(--panel);
  font-weight: 800;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -3px 10px rgba(var(--q-ar),0.35);
}
/* タブは font-size 11px かつ 430px以下で折り返すため、他スロットより控えめなサイズに留める
   （大きくしすぎると行の高さを押し上げ、折り返し時にタブ高がずれる）。 */
.isekai-tab__icon {
  width: 15px;
  height: 15px;
  margin-right: 2px;
  vertical-align: -0.15em;
  object-fit: contain;
}
.isekai-tab__count {
  opacity: 0.7;
  margin-left: 2px;
  font-size: var(--fs-xs);
}

/* ── 領域パネル ── */
.isekai-panel {
  border: 2px solid var(--q);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--panel);
  padding: var(--sp-5);
  box-shadow: 0 0 10px rgba(var(--q-ar),0.12);
}
.isekai-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.isekai-panel__id {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.isekai-panel__icon {
  width: 22px;
  height: 22px;
  vertical-align: -0.15em;
  object-fit: contain;
}
.isekai-panel__title {
  font-size: 16px;
  color: var(--q);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(var(--q-ar),0.4);
}
/* 領域名の正式名/短縮名の出し分け（既定は正式名。狭幅端末用の切替は下部の @media 参照） */
.isekai-panel__title-short { display: none; }
.isekai-panel__badge {
  font-size: var(--fs-sm);
  color: var(--q);
  padding: 2px 8px;
  border: 2px solid var(--q);
  border-radius: 4px;
  background: rgba(var(--q-ar),0.1);
  font-weight: 700;
}
.isekai-panel__meta { text-align: right; }
.isekai-panel__owned {
  font-size: 16px;
  color: var(--q);
  font-weight: 800;
  line-height: 1.1;
}
.isekai-panel__rank {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.isekai-panel__rank-val { color: var(--q); }
.isekai-panel__bar {
  height: 12px;
  background: var(--panel-inset);
  border: 1px solid rgba(var(--q-ar),0.35);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  box-shadow: 0 0 6px rgba(var(--q-ar),0.25);
}
.isekai-panel__bar-fill {
  height: 100%;
  width: var(--pct,0);
  background: var(--q);
  box-shadow: 0 0 5px var(--q);
  transition: width 0.5s;
}
.isekai-panel__next {
  font-size: var(--fs-sm);
  color: #6AA6A6;
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.isekai-panel__next-name { color: var(--q); font-weight: 700; }
.isekai-panel__next-rem { color: var(--reward); font-weight: 800; }

/* ── バインダー／本 ── */
.isekai-binder-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-auto-rows: 128px;
  column-gap: 3px;
  row-gap: 5px;
  /* 50タイル分のレイアウト・ペイントをこのグリッド内に閉じ込め、
     内側の変化がページ全体の再計算に波及しないようにする（スクロール・タブ切替の負荷軽減）。
     grid-auto-rows で高さが確定しているため size コンテインメントは付けない。 */
  contain: layout paint;
}
.isekai-book {
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease,box-shadow 0.15s ease;
}
.isekai-book:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.isekai-book:active { transform: scale(0.97); }
.isekai-book--reveal { animation: isekai-slotReveal 0.3s ease-out; }
.isekai-book--empty { border: 1px dashed #365A62; }
.isekai-book--owned {
  border: 1px solid rgba(var(--q-ar),0.6);
  box-shadow: 0 0 3px rgba(var(--q-ar),0.15);
}
.isekai-book--complete {
  border: 3px solid;
  --cc1: var(--q);
  --cc2: #FFFFFF;
  box-shadow: 0 0 10px rgba(var(--q-ar),0.5);
  animation: isekai-cmplt 2s ease-in-out infinite;
}
.isekai-book__cover {
  position: relative;
  flex: 1;
  min-height: 0;
}
.isekai-book__label { padding: 2px 3px; }
.isekai-book--empty .isekai-book__label {
  background: rgba(12,22,36,0.92);
  border-top: 1px solid #22323E;
}
.isekai-book--owned .isekai-book__label {
  background: color-mix(in srgb,var(--q) 18%,#000);
  border-top: 1px solid rgba(var(--q-ar),0.35);
}
.isekai-book--complete .isekai-book__label {
  background: linear-gradient(180deg,rgba(var(--q-ar),0.32),color-mix(in srgb,var(--q) 25%,#000));
}
/* 5列グリッドの限られたタイル幅に収めるため、--fs-xs（12px）の例外として11pxを維持する */
.isekai-book__title {
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 27px;
}
.isekai-book--empty .isekai-book__title { color: #7AACAC; font-weight: 500; }
.isekai-book--owned .isekai-book__title { color: var(--q); font-weight: 600; }
.isekai-book--complete .isekai-book__title { color: #FFFFFF; font-weight: 700; }

/* 書影 */
.isekai-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* メイン画面のバインダーのみ未購入をグレースケール表示。作品詳細ダイアログはカラー表示にする */
.isekai-book--empty .isekai-cover__img {
  filter: grayscale(90%) brightness(0.65);
}

/* ── 凡例 ── */
.isekai-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  color: #89B1B1;
  font-weight: 500;
}
.isekai-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.isekai-legend__swatch {
  display: inline-block;
  width: 11px;
  height: 15px;
  border-radius: 2px;
}
.isekai-legend__swatch--empty {
  background: rgba(var(--accent-ar),0.12);
  border: 1px dashed #4A7078;
}
.isekai-legend__swatch--owned {
  background: rgba(var(--accent-ar),0.2);
  border: 1px solid rgba(var(--accent-ar),0.7);
}
.isekai-legend__swatch--complete {
  background: rgba(var(--accent-ar),0.25);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 5px rgba(255,255,255,0.7);
}

/* ── シェア ── */
.isekai-share {
  border: 1px solid #294550;
  border-radius: var(--r-md);
  background: var(--panel);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-3);
}
.isekai-share__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.isekai-share__text { min-width: 0; flex: 1; }
.isekai-share__title {
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 700;
}
.isekai-share__summary {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-weight: 500;
}
.isekai-share__actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.isekai-share__btn {
  background: transparent;
  color: #89B1B1;
  border: 1px solid #365A5A;
  font-size: var(--fs-sm);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: color 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease;
}
.isekai-share__btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-ar),0.25);
}
.isekai-share__toast {
  display: none;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(var(--accent-ar),0.12);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--accent);
  text-align: center;
}
.isekai-share__toast.isekai-is-open { display: block; }

/* ── 期間終了後の最終結果画面 ──
   通常時は非表示。#app に isekai-app--ended が付くと本編セクションを隠し、この画面のみ表示する。 */
.isekai-ended {
  text-align: center;
  padding: 0 0 var(--sp-6);
}
.isekai-app--ended .isekai-hero__deadline-wrap,
.isekai-app--ended .isekai-guest,
.isekai-app--ended .isekai-notice,
.isekai-app--ended .isekai-board,
.isekai-app--ended .isekai-tabs,
.isekai-app--ended .isekai-panel,
.isekai-app--ended .isekai-legend,
.isekai-app--ended .isekai-share,
.isekai-app--ended .isekai-bookmark {
  display: none;
}
.isekai-app--ended .isekai-ended { display: block; }
.isekai-ended__lead {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  letter-spacing: 1px;
}
.isekai-ended__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--warning);
  letter-spacing: 2px;
  margin-top: var(--sp-2);
}
.isekai-ended__period {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  margin-top: var(--sp-2);
}
.isekai-ended__card {
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: 0 0 16px rgba(var(--accent-ar),0.15);
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
}
.isekai-ended__card-label {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
  letter-spacing: 2px;
}
.isekai-ended__shogo {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--shogo);
  line-height: 1.35;
  text-shadow: 0 0 8px rgba(127,230,184,0.35);
  margin: var(--sp-2) 0 var(--sp-4);
}
.isekai-ended__stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-6);
}
.isekai-ended__stat { flex: 1; max-width: 110px; }
.isekai-ended__stat--divided {
  border-left: 1px solid #294550;
  border-right: 1px solid #294550;
}
.isekai-ended__stat-label {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2px;
}
.isekai-ended__stat-value {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  letter-spacing: 0.5px;
  font-size: var(--fs-num-xl);
  line-height: 1.1;
  font-weight: 800;
  color: var(--accent);
}
.isekai-ended__stat-unit {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
}
.isekai-ended__stat-note {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
  margin-top: 2px;
}
.isekai-ended__thanks {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  margin-bottom: var(--sp-5);
}
.isekai-ended__share {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
}
.isekai-ended__guest {
  display: none;
  text-align: left;
  margin-top: var(--sp-5);
}
.isekai-ended__guest.isekai-is-visible { display: flex; }
.isekai-ended__stat--reward .isekai-ended__stat-value { color: var(--reward); }
.isekai-ended__stat--reward .isekai-ended__stat-note { color: var(--reward); font-weight: 700; }

/* ── オーバーレイ共通 ── */
.isekai-overlay {
  display: none;
  position: fixed;
  inset: 0;
  animation: isekai-overlayIn 0.3s ease-out;
}
.isekai-overlay.isekai-is-open { display: block; }
.isekai-overlay--z1 { z-index: 9997; }
.isekai-overlay--z2 { z-index: 9998; }
.isekai-overlay--z3 { z-index: 9999; }
.isekai-overlay__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.isekai-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.isekai-dialog--pop { animation: isekai-popInStatic 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Info ダイアログ */
.isekai-info {
  width: 360px;
  max-width: 92%;
  max-height: 86vh;
  /* モバイルブラウザのアドレスバー等でvhが実際の表示高さより大きく計算されダイアログが画面外にはみ出すため、
     対応環境で実表示域を反映するdvhを優先採用する（dvh未対応環境はvh指定のままフォールバック） */
  max-height: 86dvh;
  overflow-y: auto;
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  background: linear-gradient(170deg,#182437 0%,#101A28 100%);
  box-shadow: 0 0 50px rgba(var(--accent-ar),0.18);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.isekai-info__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.isekai-info__title {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 700;
}
.isekai-info__close {
  cursor: pointer;
  color: #7FA8A8;
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
}
.isekai-info__lead {
  font-size: 14px;
  color: #9EC4C4;
  line-height: 1.75;
  margin-bottom: var(--sp-5);
}
.isekai-info__accent { color: var(--accent); font-weight: 700; }
/* リード末尾の補足（自動記録の注記） */
.isekai-info__lead-note {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: #7A9AA2;
}
/* ダイアログ内の小見出し（実施期間／四つの領域） */
.isekai-info__section-title {
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.isekai-info__period {
  font-size: var(--fs-sm);
  color: #8FB6B6;
  line-height: 1.8;
  margin-bottom: var(--sp-6);
}
.isekai-info__period-date { color: #FF8080; font-weight: 700; }
.isekai-info__quads {
  font-size: var(--fs-sm);
  color: #7FA8B6;
  line-height: 1.7;
  margin-bottom: var(--sp-6);
}
.isekai-info__quad { margin-bottom: var(--sp-4); }
.isekai-info__quad:last-child { margin-bottom: 0; }
.isekai-info__quad-icon {
  width: 19px;
  height: 19px;
  margin-right: 3px;
  vertical-align: -0.15em;
  object-fit: contain;
}
/* 各領域の説明文（1字下げて世界観の語りとして見せる） */
.isekai-info__quad-desc {
  display: block;
  padding-left: 1em;
  color: #8FB6B6;
  line-height: 1.7;
}
.isekai-info__quad-name { color: #CFE4E4; }
.isekai-info__notes {
  font-size: 13px;
  color: #7A9AA2;
  line-height: 1.7;
  margin-bottom: 14px;
}
.isekai-info__reward {
  border: 1px solid rgba(255,224,96,0.4);
  border-radius: 8px;
  background: rgba(255,224,96,0.06);
  padding: 12px 14px;
}
.isekai-info__reward-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.isekai-info__reward-title {
  font-family: var(--font-num);
  font-feature-settings: "tnum";
  font-size: var(--fs-body);
  letter-spacing: 1px;
  color: var(--reward);
  font-weight: 700;
}
.isekai-info__reward-body {
  font-size: 14px;
  color: #E8D9A8;
  line-height: 1.7;
}
.isekai-info__reward-em { color: var(--reward); font-weight: 800; }
.isekai-info__reward-em2 { color: var(--reward); font-weight: 700; }
.isekai-info__reward-page {
  color: #FFF0C0 !important;
  text-decoration: underline !important;
}

/* 称号ダイアログ */
.isekai-shogo {
  width: 340px;
  max-width: 90%;
  border: 3px solid var(--reward);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  background: linear-gradient(170deg,#241D05 0%,#15100A 100%);
  text-align: center;
  box-shadow: 0 0 40px rgba(255,224,96,0.25),0 0 80px rgba(255,224,96,0.1);
  overflow: hidden;
}
.isekai-shogo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 0%,rgba(255,224,96,0.06) 50%,transparent 100%);
  background-size: 200% 100%;
  animation: isekai-shimmer 3s linear infinite;
  pointer-events: none;
}
.isekai-shogo__analyze {
  font-size: var(--fs-md);
  color: #CBB87A;
  line-height: 1.9;
  padding: 8px 0;
}
.isekai-shogo__kicker {
  font-size: var(--fs-body);
  letter-spacing: 4px;
  color: #CC9930;
  margin-bottom: var(--sp-5);
  font-weight: 600;
}
.isekai-shogo__lead {
  font-size: var(--fs-body);
  color: #CBB87A;
  margin-bottom: var(--sp-6);
}
.isekai-shogo__grant {
  font-size: 16px;
  color: #E8DCAE;
  line-height: 1.7;
  margin-bottom: 14px;
  font-weight: 700;
}
.isekai-shogo__name {
  font-size: 20px;
  font-weight: 900;
  color: #FFD040;
  text-shadow: 0 0 16px rgba(255,208,64,0.6);
}
.isekai-shogo__rule {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--reward),transparent);
  margin: 0 auto var(--sp-6);
}
.isekai-shogo__sub {
  font-size: var(--fs-body);
  color: #CC9930;
  margin-bottom: 16px;
  font-weight: 500;
}
.isekai-shogo__actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
}
.isekai-shogo__btn {
  font-size: var(--fs-body);
  padding: 8px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}
.isekai-shogo__btn--close {
  background: transparent;
  color: var(--reward);
  border: 1px solid rgba(255,224,96,0.4);
}
.isekai-shogo__btn--share{
  padding: 8px 24px;
  background: rgba(255,224,96,0.15);
  border: 2px solid var(--reward);
  color: var(--reward);
}

/* 作品詳細ダイアログ */
.isekai-book-dialog {
  width: 320px;
  max-width: 92%;
  max-height: 88vh;
  /* Info ダイアログと同様、対応環境ではdvhを優先採用しモバイルブラウザでの画面外はみ出しを回避する */
  max-height: 88dvh;
  overflow-y: auto;
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 20px;
  background: linear-gradient(170deg,#182437 0%,#101A28 100%);
  box-shadow: 0 0 50px rgba(var(--accent-ar),0.18);
}
.isekai-book-dialog__close-row { text-align: right; margin-bottom: -6px; }
.isekai-book-dialog__close {
  background: none;
  border: none;
  color: #7AACAC;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 2px 4px;
}
.isekai-book-dialog__cat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.isekai-book-dialog__cat-icon {
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  object-fit: contain;
}
.isekai-book-dialog__cat-name {
  font-size: var(--fs-xs);
  color: var(--q);
  font-weight: 700;
  letter-spacing: 1px;
}
.isekai-book-dialog__cover {
  position: relative;
  width: 124px;
  height: 176px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto var(--sp-6);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.isekai-book-dialog__title {
  font-size: var(--fs-lg);
  color: #E6F2F2;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  margin-bottom: var(--sp-4);
}
.isekai-book-dialog__title a {
  color: var(--ink) !important;
  text-decoration: none;
}
.isekai-book-dialog__status-row { text-align: center; margin-bottom: 16px; }
.isekai-book-dialog__status {
  font-size: var(--fs-xs);
  border-radius: 10px;
  padding: 2px 10px;
  font-weight: 700;
  border: 1px solid;
}
.isekai-book-dialog__status--empty { color: #7AACAC; }
.isekai-book-dialog__status--owned { color: var(--q); }
.isekai-book-dialog__status--complete { color: #FFFFFF; }
.isekai-book-dialog__status--restricted {
  color: var(--warning);
  border-color: var(--warning);
}

.isekai-book-dialog__cta {
  display: block;
  width: 100%;
  font-size: var(--fs-md);
  padding: 11px;
  background: rgba(var(--accent-ar),0.14);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  color: var(--accent) !important;
}
/* セーフサーチ制限時：非活性ボタン＋説明文 */
.isekai-book-dialog__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(120,130,140,0.10);
  border-color: #4A5560;
  color: #8A97A3;
}
.isekai-book-dialog__restricted-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #9AA7B2;
  text-align: center;
}
.isekai-book-dialog__restricted-note b { color: var(--warning); }
.isekai-book-dialog__safesearch-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.isekai-book-dialog__safesearch-btn {
  flex: 1;
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-1);
  background: rgba(var(--accent-ar),0.08);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: #7FD0CC;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
}
.isekai-book-dialog__safesearch-btn:hover {
  background: rgba(var(--accent-ar),0.18);
  color: var(--accent);
  border-color: var(--accent);
}
/* ダイアログ内のセーフサーチ制限書影 */
.isekai-book-dialog__cover--restricted {
  background: linear-gradient(145deg,#1A2028,#11151B);
  display: flex;
  align-items: center;
  justify-content: center;
}
.isekai-book-dialog__restricted-icon { font-size: 40px; opacity: 0.6; filter: grayscale(60%); }


/* ナラティブ */
.isekai-narrative {
  width: 360px;
  max-width: 92%;
  border: 2px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  background: linear-gradient(170deg,#132838 0%,#0C1826 100%);
  text-align: center;
  box-shadow: 0 0 60px rgba(var(--accent-ar),0.2),0 0 120px rgba(10,22,36,0.8);
  overflow: hidden;
}
.isekai-narrative::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 0%,rgba(var(--accent-ar),0.04) 50%,transparent 100%);
  background-size: 200% 100%;
  animation: isekai-shimmer 4s linear infinite;
  pointer-events: none;
}
.isekai-narrative__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.06;
}
.isekai-n-line { animation: isekai-narrativeFade 0.8s ease-out both; }
.isekai-n-line:nth-child(2) { animation-delay: 0.3s; }
.isekai-n-line:nth-child(3) { animation-delay: 0.7s; }
.isekai-n-line:nth-child(4) { animation-delay: 1.0s; }
.isekai-n-line:nth-child(5) { animation-delay: 2.4s; }
.isekai-n-line:nth-child(7) { animation-delay: 2.7s; }
.isekai-n-line:nth-child(8) { animation-delay: 3.0s; }
.isekai-n-line:nth-child(9) { animation-delay: 3.3s; }
.isekai-n-line:nth-child(10) { animation-delay: 3.6s; }
.isekai-narrative__boot {
  font-size: var(--fs-sm);
  letter-spacing: 6px;
  color: #3A8A8A;
  margin-bottom: var(--sp-6);
  font-weight: 600;
}
.isekai-narrative__connect {
  font-size: var(--fs-md);
  color: #CDEEE6;
  line-height: 1.7;
  margin-bottom: var(--sp-1);
  font-weight: 700;
}
.isekai-narrative__proc { margin-bottom: var(--sp-4); }
.isekai-proc-bar {
  width: 130px;
  height: 4px;
  margin: 1px auto 0;
  background: #0D2028;
  border: 1px solid #1C4A4A;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.isekai-proc-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,#0A8F84,var(--accent));
  border-radius: var(--r-sm);
  animation: isekai-procFill 0.85s ease-out 1.05s forwards;
}
.isekai-narrative__done {
  font-size: var(--fs-lg);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(var(--accent-ar),0.6);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
}
.isekai-n-hr {
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  margin: var(--sp-5) auto;
  animation: isekai-narrativeLine 1s ease-out 2.5s both;
}
.isekai-narrative__db {
  font-size: var(--fs-sm);
  color: #7BA8A2;
  line-height: 1.7;
  margin-bottom: var(--sp-1);
}
.isekai-narrative__db-em { color: var(--accent); font-weight: 800; }
.isekai-narrative__region {
  font-size: var(--fs-xs);
  color: #6F9494;
  line-height: 1.7;
  margin-bottom: var(--sp-1);
}
.isekai-narrative__region--q1 { color: var(--q1); }
.isekai-narrative__region--q2 { color: var(--q2); }
.isekai-narrative__region--q3 { color: var(--q3); }
.isekai-narrative__region--q4 { color: var(--q4); }
.isekai-narrative__grant {
  font-size: var(--fs-sm);
  color: #9FC0C0;
  line-height: 1.7;
  margin-bottom: var(--sp-3);
}
.isekai-narrative__grant-em {
  color: var(--reward);
  font-weight: 700;
  animation: isekai-narrativeGlow 3s ease-in-out infinite;
}
.isekai-narrative__limit {
  font-size: var(--fs-xs);
  color: #A86A6A;
  margin-bottom: 14px;
  font-weight: 500;
}
.isekai-narrative__limit-days { font-weight: 800; }
.isekai-narrative__cta-line { opacity: 0; animation: isekai-narrativeFade 0.5s ease-out 3.7s both; }
.isekai-narrative__cta {
  display: inline-block;
  text-decoration: none;
  font-size: var(--fs-md);
  padding: 10px 40px;
  background: linear-gradient(135deg,#1A3A4A,#0C1826);
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 3px;
  animation: isekai-ctaBlink 1.1s ease-in-out infinite;
}

/* ── 未ログイン（ゲスト）状態 ──────────────────────────────
   購入データはログイン後にのみ取得できるため、
   ・作品ラインナップ（価値）は見せる ＝ 離脱を抑える
   ・個人の記録（レベル・収集数・順位）はマスクする ＝ ログイン動機をつくる
   という方針で表示を切り替える。 */
.isekai-guest {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: linear-gradient(180deg,rgba(var(--accent-ar),0.16),rgba(var(--accent-ar),0.06));
}
.isekai-guest__icon {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1.4;
}
.isekai-guest__body { flex: 1; min-width: 0; }
.isekai-guest__lead {
  font-size: var(--fs-body);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}
.isekai-guest__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #B6D8D8;
  margin-bottom: var(--sp-4);
}
.isekai-guest__cta {
  font-size: var(--fs-md);
  padding: var(--sp-5) var(--sp-6);
  background: var(--accent);
  color: #08222A;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(var(--accent-ar),0.45);
  width: fit-content;
  margin: 16px auto;
}
.isekai-guest__cta a {
  text-align: center;
  color: #08222A !important;
  text-decoration: none;
}
.isekai-guest__cta:hover { background: #7FFFF2; }
.isekai-guest__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted-2);
  margin-top: var(--sp-6);
  text-align: center;
}

/* マスクした数値（?表示） */
.isekai-stat__value--masked {
  color: var(--muted-2);
  font-weight: 700;
}
.isekai-stat__lock {
  font-size: var(--fs-2xs);
  color: var(--muted-2);
}

/* 購入状況が不明な本タイル（未購入とは区別し、書影はカラーのまま） */
.isekai-book--unknown { border: 1px dashed #3D6470; }
.isekai-book--unknown .isekai-book__label {
  background: rgba(12,22,36,0.92);
  border-top: 1px solid #22323E;
}
.isekai-book--unknown .isekai-book__title {
  color: #9DC3C3;
  font-weight: 500;
}

/* ── セーフサーチによる表示制限（書影のみマスク。タイトル欄は通常タイルと同じ） ── */
.isekai-book__cover--restricted {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg,#1A2028,#11151B);
}
.isekai-book__restricted-icon { font-size: 22px; opacity: 0.6; filter: grayscale(60%); }

/* 画面下に常駐するログイン導線（SPでも常に到達できるようにする） */
.isekai-guestbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9996;
  padding: var(--sp-4) var(--sp-5);
  /* 画面下に常駐する要素に backdrop-filter を付けると、スクロールのたびに
     背後のスナップショット取得とブラー再計算が走りWebViewで顕著に重くなる。
     元の背景も不透明度0.94でほぼ不透明だったため、不透明色に置き換えてブラーを廃止する。 */
  background: rgb(10,18,28);
  border-top: 2px solid var(--accent);
}
.isekai-guestbar__inner {
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.isekai-guestbar__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: #B6D8D8;
}
.isekai-guestbar__cta {
  flex-shrink: 0;
  font-size: var(--fs-body);
  padding: var(--sp-4) var(--sp-5);
  background: var(--accent);
  color: #08222A;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.isekai-guestbar__cta:hover { background: #7FFFF2; }
/* 下部バーに隠れないよう本文末尾に余白を確保（未ログイン時のみ） */
.isekai-app--guest { padding-bottom: 76px; }

/* 作品詳細ダイアログ内のログインリンク（未ログイン時のみ表示） */
.isekai-book-dialog__login {
  text-align: center;
  color: var(--accent);
}

/* ナラティブ内のゲスト用ボタン列 */
.isekai-narrative__actions {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 誤タップ防止のため広めに確保（§5.17.4） */
  align-items: center;
}
.isekai-narrative__sub {
  background: transparent;
  border: 1px solid #365A5A;
  color: #89B1B1;
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.isekai-narrative__sub:hover { color: var(--accent); border-color: var(--accent); }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ブックマーク訴求 */
.isekai-bookmark {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(var(--accent-ar),0.06);
  font-size: var(--fs-xs);
  color: var(--muted-2);
  text-align: center;
  line-height: 1.6;
}
.isekai-bookmark__em {
  color: var(--accent);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── 期間終了後トロフィー確認リンク ── */
.isekai-ended__trophy { margin-top: var(--sp-4); text-align: center; }
.isekai-ended__trophy.isekai-is-visible { display: block; }
.isekai-ended__trophy-cta {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: var(--sp-4) var(--sp-6);
  background: var(--reward);
  color: #2A2000;
  border-radius: var(--r-md);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(255,224,96,0.45);
}
.isekai-ended__trophy-cta:hover { background: #FFF0A0; }

/* PC調節 */
@media (min-width: 768px) {
  .isekai-app { max-width: 680px; }
  .isekai-binder-grid { grid-template-columns: repeat(8,1fr); }
  .isekai-hero__title { max-width: 560px; margin: 0 auto; }
  .isekai-hero__logo {
    width: min(100%, 620px);
    transform: scale(1.0);
  }
}

/* ── 極小〜中間幅端末（iPhone SE=375px 等〜410px程度）専用: タブが横一列　4個だと文字が見切れるため2×2に組み替える ──
   「王道・世界観」等の長い領域名は横一列レイアウトだと381〜410px幅で領域名自体が2行に折り返し、
   購入数と合わせて3行になってしまう（フォントをこれ以上小さくすると最小フォント11pxの基準を下回るため縮小では解決できない）。
   411px以上（iPhone Plus/Max等の大型スマホ・タブレット）は横幅に余裕があるため影響なく、この幅域のみの限定対応。 */
@media (max-width: 410px) {
  .isekai-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
    border-bottom: none;
  }
  .isekai-tab {
    border-radius: var(--r-sm);
    border-bottom: 2px solid rgba(var(--q-ar),0.4);
    padding: var(--sp-3) var(--sp-1);
    position: static;
    margin-bottom: 0;
    box-shadow: none;
  }
  .isekai-tab:not(.isekai-tab--active) {
    padding-top: var(--sp-3);
  }
  .isekai-tab:not(.isekai-tab--active):hover {
    padding-top: var(--sp-3);
  }
  .isekai-tab--active {
    border-bottom: 2px solid var(--q);
    box-shadow: 0 0 8px rgba(var(--q-ar),0.35);
  }
  /* タブが単独ブロックになるため、領域パネル側にも上辺の枕・角丸を戻す */
  .isekai-panel {
    border-top: 2px solid var(--q);
    border-radius: var(--r-md);
    margin-top: var(--sp-3);
  }
}

/* ── SP幅（〜390px）専用: バインダー見出し行のテキスト密集を緩和 ── */
@media (max-width: 390px) {
  .isekai-panel__rank-label { display: none; }
  /* 領域名もタブと同じ短縮名に揃え、見出し行の文字量をさらに減らす */
  .isekai-panel__title-full { display: none; }
  .isekai-panel__title-short { display: inline; }
}

/* ── SP全域（〜430px）専用: タブラベルの折り返しを制御 ── */
@media (max-width: 430px) {
  .isekai-tab {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  .isekai-tab__count { display: block; }
}