:root {
  --bg: #17110c;
  --panel: #241a12;
  --panel-edge: #3a2b1c;
  --text: #e8dcc8;
  --muted: #a08e72;
  --torch: #e8912d;
  --torch-dark: #a35f14;
  --danger: #c25547;
  --victory: #d9b64a;
}

* { box-sizing: border-box; }

html, body {
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
}

/* --- 画面別テーマ: 場面に合わせて空気を変える --- */
/* ホーム = 朝の拠点。明るく暖かい */
body.page-home {
  --bg: #241a10;
  --panel: #332619;
  --panel-edge: #52402a;
  --torch: #f5b04a;
  --muted: #b8a488;
}
/* エディタ = 掘削現場。落ち着いた暗さ（真っ黒すぎない程度に） */
body.page-editor {
  --bg: #1a130c;
  --panel: #271d13;
  --panel-edge: #45341f;
}
/* 一覧・攻略 = 探索の道中。標準の洞窟 */
body.page-raid { --bg: #150e14; --panel: #221726; --panel-edge: #3a2a40; }
/* ランキング = 栄光の間。金色がかる */
body.page-ranking {
  --bg: #1c1508;
  --panel: #2b2110;
  --panel-edge: #4c3c1c;
  --torch: #e8c04a;
}
/* 図鑑 = 古い書庫。紫がかった静けさ */
body.page-collection {
  --bg: #131019;
  --panel: #1f1a2a;
  --panel-edge: #363050;
  --torch: #a88ae8;
}
/* ショップ = 夜市。赤紫の灯り */
body.page-shop {
  --bg: #1a0e12;
  --panel: #291820;
  --panel-edge: #4a2c38;
  --torch: #e87a5a;
}

img { image-rendering: pixelated; }

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

.icon {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  display: inline-block;
  flex-shrink: 0;
}
.icon-fill {
  fill: currentColor;
  stroke: none;
}
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-atk, .icon-combat { color: #f0a53c; }
.icon-hp { color: #e06c75; }
.icon-pdef { color: #8fb6df; }
.icon-mdef { color: #b58cff; }
.icon-energy { color: #ffd35a; }
.icon-boost { color: #ff8b3d; }
.icon-guild { color: #d9b64a; }
.icon-rank { color: var(--victory); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: #0f0a06;
  border-bottom: 2px solid var(--panel-edge);
  /* ナビは常に画面上部に固定（チュートリアル中は既存ルールが relative に上書きする） */
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px 14px;
}
.header-right-user { margin-left: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.brand-emblem { width: 36px; height: 36px; border-radius: 4px; }
.brand-name { font-weight: bold; letter-spacing: 0.1em; }

.nav { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.nav a,
.nav-link-button {
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  padding: 4px 2px;
}
.nav-link-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}
.nav a:hover,
.nav-link-button:hover,
.nav-link-button[aria-expanded="true"],
.nav-tab.is-active { color: var(--torch); }
.language-switcher {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.language-switcher-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}
.language-switcher select {
  max-width: 120px;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  padding: 4px 8px;
  font: inherit;
}
.nav-menu-panel .language-switcher {
  width: 100%;
  padding: 8px 10px;
}
.nav-menu-panel .language-switcher-label {
  width: 100%;
  justify-content: space-between;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
}
.nav-tab .icon { font-size: 1em; }
.nav-menu-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.nav-menu-button:hover,
.nav-menu-button[aria-expanded="true"] {
  color: var(--torch);
  border-color: var(--torch);
}
.nav-menu-button.is-open {
  position: relative;
  z-index: 130;
}
.nav-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.6);
}
.nav-menu-backdrop[hidden] { display: none; }
.nav-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  width: min(260px, calc(100vw - 48px));
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--panel);
  border-left: 2px solid var(--torch);
  border-radius: 0;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55);
  padding: 72px 8px 10px;
  transform: translateX(0);
  transition: transform 160ms ease-out;
}
.nav-menu-panel[hidden] {
  display: block;
  transform: translateX(100%);
  pointer-events: none;
  visibility: hidden;
}
.nav-menu-panel .nav-logout {
  display: block;
  margin: 0;
}
.nav-menu-panel a,
.nav-menu-panel .linklike {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  text-align: left;
}
.nav-menu-panel a:hover,
.nav-menu-panel .linklike:hover {
  color: var(--torch);
  background: rgba(200, 168, 106, 0.16);
}
/* ドット絵ロゴ: ヒーロー（ランディング/ログイン）とドロワー上部。pixelated補間でドットの輪郭を保つ */
.hero-logo {
  display: block; margin: 0 auto;
  width: min(410px, 92%); height: auto;
  image-rendering: pixelated;
}
.nav-menu-logo {
  display: block; width: 200px; height: auto; margin: 0 10px 10px;
  image-rendering: pixelated;
}
/* ドロワー内のサイト情報グループ: ゲーム導線と混ざらないよう罫線＋小見出し＋小さめリンクで分離 */
.nav-menu-divider {
  border: 0;
  border-top: 1px solid var(--panel-edge);
  margin: 8px 10px;
}
.nav-menu-section-title {
  margin: 0;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.nav-menu-panel a.nav-menu-sub {
  min-height: 34px;
  padding: 4px 10px 4px 18px;
  font-size: 13px;
  color: var(--text);
}
.nav-menu-panel a.nav-menu-sub:hover { color: var(--torch); }
.mobile-only, .nav-mobile-public { display: none; }
@media (max-width: 600px) {
  /* 狭幅ではヘッダを縦積みにし、ナビ項目のタップ領域を確保（CJKの縦折返し防止） */
  .site-header {
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
  }
  .header-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-right { display: contents; }
  .brand { min-width: 0; }
  .brand-emblem { width: 32px; height: 32px; }
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
  }
  .nav-utility { display: none; }
  .mobile-only { display: inline-block; }
  .nav-auth,
  .nav-logout {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .nav-mobile-public { display: flex; }
  .site-header-auth {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .site-header-auth .header-right-user { display: contents; }
  .site-header-auth .nav-main {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: none;
    overflow: visible;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: #0f0a06;
    border-top: 2px solid var(--panel-edge);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
  }
  .site-header-auth ~ main.container {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .nav-main {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 1px;
  }
  .nav-main::-webkit-scrollbar { display: none; }
  .nav-main a,
  .nav-main .nav-link-button { padding: 8px 6px; }
  .site-header-auth .nav-main a,
  .site-header-auth .nav-main .nav-link-button,
  .site-header-auth .nav-main .nav-menu-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: 0;
    padding: 5px 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
    text-align: center;
  }
  .site-header-auth .nav-main .icon {
    font-size: 1.4em;
  }
  .site-header-auth .nav-main .nav-label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .nav-menu-panel {
    width: min(240px, calc(100vw - 44px));
    z-index: 160;
    padding-top: 24px;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
  .nav-menu-backdrop { z-index: 150; }
  .nav-menu-button.is-open { z-index: 170; }
  .tutorial-overlay { z-index: 1000; }
  body.tutorial-active .site-header-auth { display: block; }
  .nav-auth { gap: 8px; }
  .nav-auth a { padding: 8px 4px; }
  .nav-logout .linklike {
    min-height: 36px;
    padding: 8px 4px;
  }
  .nav-menu-panel .nav-logout .linklike {
    min-height: 44px;
    padding: 8px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel { transition: none; }
}

.inline-form { display: inline; }

.linklike {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.linklike:hover { color: var(--torch); }

.container { max-width: 760px; margin: 0 auto; padding: 16px; }

/* ナビ下の全画面共通お知らせ（右→左に流れるマーキー） */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
  padding: 5px 0;
  font-size: 0.95rem;
}
.marquee-track {
  display: inline-block;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }  /* 読みたいとき止める */
.marquee-item { margin: 0 40px; color: var(--text); font-weight: bold; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }  /* トラックは内容2周ぶんなので-50%で継ぎ目なくループ */
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
}

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.panel.narrow { max-width: 420px; margin: 32px auto; }

h1 { font-size: 1.3rem; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 16px 0 8px; color: var(--torch); }

.meta { color: var(--muted); font-size: 0.85rem; }

.statusbar {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.messages { list-style: none; margin: 12px auto; max-width: 760px; padding: 0 16px; }
.msg { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; }
.msg.success { background: #253a1e; border: 1px solid #4c7a3d; }
.msg.error { background: #3a1e1e; border: 1px solid var(--danger); }

.banner {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: bold;
}
.banner.highlight { background: #3a2b12; border: 2px solid var(--torch-dark); color: var(--torch); }
.banner.victory { background: #3a3212; border: 2px solid var(--victory); color: var(--victory); }
.banner.defeat { background: #2c1c18; border: 2px solid var(--danger); color: #e0a49b; }
/* 初踏破EXPボーナス: 「未踏破を巡るのが最高効率」を刷り込む主役級の強調 */
.banner.first-clear-exp {
  background: linear-gradient(90deg, #3a2b12, #4a3a10);
  border: 2px solid var(--torch);
  color: var(--torch);
  animation: first-clear-glow 1.2s ease-in-out 2;
}
@keyframes first-clear-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 190, 80, 0); }
  50% { box-shadow: 0 0 18px rgba(232, 190, 80, 0.55); }
}
.banner.mutation { background: #14262b; border: 2px solid #4fa8b8; color: #9fd8e4; }

/* ショップの購入制限表示（機能スイッチ/商品ごとのトグルがOFFの時） */
.shop-restricted { color: var(--danger, #e05656); font-weight: bold; margin: 4px 0; }

/* 贈り物箱（運営→プレイヤー）: 開封前の期待感を出す金縁パネル */
.gift-box { border: 2px solid var(--torch, #d4a017); }
.gift-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gift-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gift-message { color: var(--torch, #d4a017); }
.gift-form { display: flex; flex-direction: column; gap: 8px; }
.gift-form-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gift-item-groups { align-items: stretch; flex-direction: column; }
.gift-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 攻撃力低下の演出（棘の罠）: HPバー付近に浮かぶ赤いダメージ数字と混同されないよう、
   浮遊させず「⚔ 攻撃」欄そのものを背景色つきでフラッシュさせ、バッジを通常テキストとして
   その場に追加する（ファイターボックスは縦が狭く、浮遊テキストだとHPバーや名前と
   重なって表示が崩れ、かえって誤認を悪化させたため実測で不採用にした） */
#raider-atk-wrap { display: inline-block; padding: 0 2px; border-radius: 3px; }
.atk-down-badge { color: #f0a53c; font-weight: bold; }
#raider-atk-wrap.atk-down {
  color: #f0a53c; background: rgba(240, 165, 60, 0.25);
  animation: atk-down-flash 0.9s ease;
}
@keyframes atk-down-flash {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.35; }
  50% { opacity: 1; transform: scale(1.15); }
}

.btn {
  display: inline-block;
  background: var(--panel-edge);
  color: var(--text);
  border: 2px solid #55402a;
  border-radius: 6px;
  padding: 8px 16px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--torch); }
.btn.primary { background: var(--torch-dark); border-color: var(--torch); }
.btn.danger { background: rgba(194, 85, 71, 0.25); border-color: var(--danger); color: #f0b8b0; }
.btn.danger:hover { background: rgba(194, 85, 71, 0.4); }
.btn.icon-only {
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.field { display: block; margin-bottom: 12px; }
input[type="text"], input[type="password"] {
  width: 100%;
  max-width: 320px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  display: block;
}

.alt-link { margin-top: 14px; color: var(--muted); }

/* --- ランディング --- */
.hero {
  text-align: center;
  padding: 32px 16px 8px;
}
.hero-emblem { width: 96px; height: 96px; border-radius: 10px; image-rendering: pixelated; }
.hero-title { font-size: 1.8rem; letter-spacing: 0.08em; margin: 12px 0 4px; }
.hero-tagline { color: var(--muted); font-size: 1.05rem; margin: 0 auto 18px; max-width: 30em; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn.big { padding: 12px 28px; font-size: 1.05rem; }

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.how-step { text-align: center; }
.how-step img { width: 72px; height: 72px; image-rendering: pixelated; border-radius: 8px; }
.how-step h3 { margin: 8px 0 4px; font-size: 1rem; color: var(--torch); }
.how-step p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* --- エディタ --- */
.palette { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; position: relative; }
.editor-category-pane:not([hidden]) { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.palette-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
}
.palette-btn.selected { border-color: var(--torch); box-shadow: 0 0 6px var(--torch-dark); }
.palette-section-title { grid-column: 1 / -1; margin-top: 8px; font-weight: bold; color: var(--muted); }
.palette-btn .piece-name { font-size: 0.8rem; text-align: center; line-height: 1.2; }
.palette-btn .piece-meta { display: flex; align-items: center; gap: 2px; font-size: 0.7rem; color: var(--muted); }
.palette-btn .piece-size { font-size: 0.7rem; color: var(--muted); }
.tile-count { font-size: 0.7rem; color: var(--muted); min-height: 1em; }
.tile-count.over { color: var(--danger); font-weight: bold; }
.editor-warn-banner {
  background: rgba(200, 60, 60, 0.14); border: 1px solid var(--danger); color: var(--danger);
  border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; font-size: 0.85rem; font-weight: bold;
}

@media (max-width: 600px) {
  .editor-category-tabs .arena-tab-btn {
    padding: 6px 4px;
    font-size: 0.8rem;
  }
  /* キット系（テーマ塗りチップ）と同じ横1列＋スワイプの見た目に統一（縦の折返しをやめる） */
  .editor-category-pane:not([hidden]) {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .palette-btn {
    padding: 3px 4px;
    gap: 1px;
    border-width: 1px;
    flex: 0 0 auto;
  }
  /* #palette で詳細度を上げ、無条件版(.palette .piece-preview 40px)を確実に上書きする
     （同じ詳細度のクラス2つだとソース順で無条件側が後勝ちしてしまい縮小が効かなかった） */
  #palette .piece-preview {
    width: 32px;  /* 480px以下でのマスサイズ(.cell 32px)に合わせる */
    height: 32px;
  }
  .palette-btn .piece-name {
    font-size: 0.68rem;
    line-height: 1.15;
  }
  .palette-btn .piece-meta,
  .palette-btn .piece-size,
  .palette-btn .tile-count {
    font-size: 0.65rem;
  }
  .palette.can-scroll-left .palette-scroll-hint-left,
  .palette.can-scroll-right .palette-scroll-hint-right {
    opacity: 1;
    animation: palette-hint-nudge 1.3s ease-in-out 2;
  }
}

/* 横スクロール中のパレットの端に重ねる「まだ続きがある」ヒント（初期状態は透明。PC幅では折返し表示のためcan-scroll-*が付かず常に透明のまま） */
.palette-scroll-hint {
  display: flex;
  opacity: 0;
  transition: opacity 0.15s ease;
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 6, 3, 0.72);
  color: var(--torch, #c8a86a);
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transform: translateY(-50%);
}
.palette-scroll-hint-left { left: 2px; --nudge-x: -4px; }
.palette-scroll-hint-right { right: 2px; --nudge-x: 4px; }
@keyframes palette-hint-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
  50% { transform: translateY(-50%) translateX(var(--nudge-x, 4px)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .palette-scroll-hint { animation: none; }
}

/* 踏破成功率メーター */
.chance-meter {
  margin: 14px 0;
  padding: 12px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
}
.chance-head { display: flex; justify-content: space-between; align-items: baseline; }
.chance-head #chance-value { font-size: 1.3rem; font-weight: bold; }
.chance-bar {
  position: relative;
  height: 14px;
  background: #2a1e13;
  border-radius: 7px;
  overflow: hidden;
  margin: 8px 0;
}
.chance-fill { height: 100%; width: 0; transition: width 0.3s; background: var(--muted); }
.chance-fill.ok { background: var(--victory); }
.chance-fill.ng { background: var(--danger); }
.chance-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
  opacity: 0.8;
}
.chance-ok { color: var(--victory); }
.chance-bad { color: #e0a49b; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 48px);
  gap: 2px;
  margin: 12px 0;
  overflow-x: auto;
  padding-bottom: 4px;
  width: max-content;
  max-width: 100%;
}
.cell {
  width: 48px;
  height: 48px;
  border: 1px solid #000;
  background-size: cover;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.cell:hover { outline: 2px solid var(--torch); }
.cell.entrance::after {
  content: "入";
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--torch);
  font-size: 11px;
  padding: 0 3px;
  border-radius: 3px;
}

/* --- 日報・一覧 --- */
.counter-row { list-style: none; display: flex; gap: 16px; padding: 0; flex-wrap: wrap; }
.counter-row li { color: var(--muted); }

.log-list, .dungeon-list, .event-list { list-style: none; padding: 0; margin: 0; }
.pagination { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 16px 0; }
.log {
  padding: 8px 10px;
  border-bottom: 1px solid var(--panel-edge);
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.log time { color: var(--muted); font-size: 0.8rem; margin-left: auto; }
.replay-link { font-size: 0.8rem; text-decoration: none; color: var(--torch); white-space: nowrap; }
.replay-link:hover { text-decoration: underline; }
.log-cleared strong { color: #e0a49b; }
.log-repelled strong { color: var(--torch); }

.badge.npc {
  background: #2b3a4a;
  border: 1px solid #4a6a8a;
  color: #a8c8e8;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}

.badge.new {
  background: #3a2b12;
  border: 1px solid var(--torch);
  color: var(--torch);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}

/* 初踏破ボーナス対象（探索一覧・詳細）: 新着より一段目立つ金色 */
.badge.first-clear {
  background: #4a3a10;
  border: 1px solid var(--torch);
  color: #ffd97a;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* アリーナATBの連続行動バッジ（素早さ2倍で2回連続攻撃などの強調表示） */
.badge.chain {
  background: #3a1a2b;
  border: 1px solid #d86a9a;
  color: #f0a8c8;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* 運営ダンジョンの日替わり変異バッジ */
.badge.mutation {
  background: #14262b;
  border: 1px solid #4fa8b8;
  color: #9fd8e4;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}

.badge.title {
  background: #3a3212;
  border: 1px solid var(--victory);
  color: var(--victory);
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
}

.title-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.title-list { list-style: none; padding: 0; margin: 10px 0 0; }
.title-list li {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--panel-edge); border-radius: 8px;
}

/* ランキング: 部門ごとに枠で区切り、行をカード化。上位3位はメダル色 */
.rank-section {
  margin: 14px 0; padding: 12px 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--panel-edge); border-radius: 10px;
}
.rank-section h2 { margin-top: 0; }
.rank-list { list-style: none; padding: 0; margin: 10px 0 0; }
.rank-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--panel-edge);
  border-left: 4px solid var(--panel-edge);
  border-radius: 8px;
}
.rank-list li:last-child { margin-bottom: 0; }
.rank-no {
  flex-shrink: 0; width: 1.9em; height: 1.9em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: bold; font-size: 0.9em;
  background: var(--panel-edge); color: var(--text);
}
.rank-list li:nth-child(1) { border-left-color: #d9b64a; }
.rank-list li:nth-child(1) .rank-no { background: linear-gradient(135deg, #b08a3c, #e8c96a); color: #40300a; }
.rank-list li:nth-child(2) { border-left-color: #b9b9c4; }
.rank-list li:nth-child(2) .rank-no { background: linear-gradient(135deg, #8f8f98, #d9d9e0); color: #2c2c33; }
.rank-list li:nth-child(3) { border-left-color: #b87a44; }
.rank-list li:nth-child(3) .rank-no { background: linear-gradient(135deg, #8a5a30, #c98950); color: #33200e; }
.rank-main { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.rank-stats { margin-left: auto; color: var(--muted); white-space: nowrap; font-size: 0.9em; }

.review-box {
  margin-top: 20px;
  padding: 14px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
}
.star-select { display: flex; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.star-option { cursor: pointer; }
.tag-select { display: flex; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.tag-option {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.85rem;
}

.dungeon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--panel-edge);
  flex-wrap: wrap;
}
.dungeon-info { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

/* 推奨Lvチップ: 小さなmeta行に埋もれさせず、目立つ独立バッジにする */
.lv-chip {
  display: inline-block;
  font-weight: bold;
  color: var(--victory);
  background: rgba(217, 182, 74, 0.14);
  border: 1px solid var(--victory);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.lv-chip.big { font-size: 1.15rem; padding: 4px 16px; }

/* 推奨Lvを大きく下回るダンジョンは行を赤枠で警告 */
.dungeon-row.underleveled {
  border: 2px solid var(--danger);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(194, 85, 71, 0.08);
}

/* 🎉 レベルアップの前後ステータス表示（攻略結果・枠付き） */
.levelup-box {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid var(--victory);
  border-radius: 10px;
  background: rgba(217, 182, 74, 0.08);
}
.levelup-head { margin: 0 0 8px; font-size: 1.05rem; }
.levelup-table { width: 100%; border-collapse: collapse; }
.levelup-table th,
.levelup-table td { padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.levelup-table th { text-align: left; color: var(--muted); font-weight: normal; }
.levelup-table .lu-before { color: var(--muted); }
.levelup-table .lu-arrow { color: var(--muted); padding: 4px 2px; }
.levelup-table .lu-after { font-weight: bold; }
.levelup-table .lu-delta { color: var(--victory); font-weight: bold; }

/* ⭐ あなたへのおすすめ ヒーローカード（探索ペイン最上部） */
.dungeon-recommended {
  border: 2px solid var(--torch);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 4px 0 18px;
  background: linear-gradient(160deg, rgba(232, 145, 45, 0.16), rgba(0, 0, 0, 0.12));
  box-shadow: 0 0 0 1px rgba(232, 145, 45, 0.25) inset;
}
.dungeon-recommended.underleveled { border-color: var(--danger); }
.dungeon-recommended .reco-eyebrow {
  margin: 0 0 4px;
  font-weight: bold;
  color: var(--torch);
  letter-spacing: 0.04em;
}
.dungeon-recommended .reco-name { text-decoration: none; }
.dungeon-recommended .reco-name strong { font-size: 1.5rem; line-height: 1.3; }
.dungeon-recommended .reco-lv { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.dungeon-recommended .reco-meta { margin: 4px 0 10px; }
.dungeon-recommended .btn.primary.big { font-size: 1.1rem; padding: 10px 22px; }

/* 踏破報酬の目安: 一覧で「どれくらい稼げるか」をひと目で（金＝torch色で強調） */
.reward-est { color: var(--torch); font-weight: bold; }
.reward-est-big { font-size: 1.1rem; margin: 2px 0 10px; }
/* 周回逓減中の注記（本日すでに挑んだダンジョンは報酬が減る） */
.reward-diminish { color: var(--danger, #c46a5a); font-weight: normal; font-size: 0.85em; }

/* エディタ: 公開/非公開の状態表示 */
.editor-status { margin: 14px 0 4px; }
.status-pill { font-weight: bold; padding: 1px 10px; border-radius: 999px; font-size: 0.9rem; }
.status-pill.status-public { background: #1f3320; color: #8fd39f; border: 1px solid var(--victory, #6fbf73); }
.status-pill.status-private { background: #2c2418; color: #d8b676; border: 1px solid var(--panel-edge); }

/* ホーム: 自分のダンジョンへの入口（探索一覧から除外したぶんの代替導線） */
.own-dungeon-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-edge);
}

/* ソート＆フィルタダイアログの推奨Lv絞り込みプルダウン */
#sort-filter-dialog select {
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.95rem;
}
#sort-filter-dialog select:focus { border-color: var(--torch, #c8a86a); outline: none; }

.search-form { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.search-form input[type="search"] {
  flex: 1;
  min-width: 160px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.tag-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.share-hint code {
  background: #0f0a06;
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.event-list li { padding: 6px 0; border-bottom: 1px dashed var(--panel-edge); }

.rewards { margin-top: 16px; }

/* --- 攻略リプレイ演出 --- */
.replay-arena {
  background: #0c0805;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
/* 終了後もマップ+進行履歴+自分のHP表示は残す（結果と一緒に「どう動いたか」を見られる統一画面）。
   消えるのは敵との遭遇演出とスキップボタンだけ */
.replay-arena.done .battle-encounter,
.replay-arena.done #replay-skip { display: none; }
/* チーム戦（一斉乱戦）: 再生終了後はスキップボタンを消す（duel側と同じ規約） */
.melee-arena.done #melee-skip { display: none; }

/* スキップ/結果へボタンは画面右下に固定: 遭遇演出の出現・消滅や履歴の伸長でページの高さが
   変わってもボタンの位置が動かない（再生中に押しにくいというUX指摘への対応）。
   再生終了後は同じ位置がスキップ→「結果へ」（最下部ジャンプ）に入れ替わる */
#replay-skip, #replay-jump-bottom, #melee-skip {
  position: fixed;
  right: 14px;
  bottom: 20px;
  z-index: 90;  /* ヘッダー(100)・ドロワー(120)・ダイアログ(1000)より下、通常コンテンツより上 */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
#replay-jump-bottom { display: none; }
.replay-arena.done #replay-jump-bottom { display: inline-block; }
/* 「結果へ」で最下部に飛んだとき、固定ボタン自身が最終行のボタン類に重ならないよう
   結果ブロックの下端にボタン1個ぶんの余白を確保する */
#result-body { padding-bottom: 56px; }
@media (max-width: 600px) {
  /* ログイン中のモバイルは下部固定ナビがあるため、その上に載せる。
     page-popup（エディタのプレビュー攻略・ショップの購入前デモ）はナビ自体を
     非表示にしているので持ち上げない（ヘッダーが display:none でもDOMには残るため
     クラス存在だけで判定すると空中に浮く。レビュー指摘） */
  body:not(.page-popup) .site-header-auth ~ main #replay-skip,
  body:not(.page-popup) .site-header-auth ~ main #replay-jump-bottom,
  body:not(.page-popup) .site-header-auth ~ main #melee-skip {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* 被弾演出: ダンジョン・アリーナ個人戦の両陣営パネルに乱戦と同じシェイクを適用 */
.fighter { position: relative; }
.fighter.hit { animation: melee-shake 0.3s; }

/* モンスターハウス/群れ: 同時に現れた面子の一斉表示（登場感を出す小さな跳ね）。
   個別戦闘が始まっても一覧は隠さず残し、倒した個体はグレーアウトする
   （アリーナの乱戦.melee-card.faintedと同じ扱い。2体以上同時出現時に
   「どれが倒れたか」を一目で分かるようにする） */
.house-pack { display: flex; gap: 8px; align-items: center; justify-content: center; }
.house-pack[hidden] { display: none; }  /* displayのflexよりhiddenを優先（.battle-encounterと同じ規約） */
.house-pack img { width: 52px; height: 52px; image-rendering: pixelated;
                  animation: house-appear 0.5s ease-out; transition: filter 0.3s, opacity 0.3s; }
.house-pack img.fainted { filter: grayscale(1) brightness(0.55); opacity: 0.65; }
@keyframes house-appear {
  0% { transform: translateY(-14px) scale(1.3); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.replay-stage {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.replay-sprite {
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
  border-radius: 8px;
}
.replay-sprite.enter { animation: replay-enter 0.35s steps(3, jump-none); }
.replay-sprite.boss { width: 150px; height: 150px; filter: drop-shadow(0 0 10px var(--torch-dark)); }
.replay-sprite.defeated { filter: grayscale(1) brightness(0.4); transition: filter 0.3s; }
@keyframes replay-enter {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.replay-map {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 26px);
  gap: 1px;
  justify-content: center;
  margin: 0 auto 12px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.rmap-cell {
  width: 26px;
  height: 26px;
  background-size: cover;
  position: relative;
  border: 1px solid #000;
}
.rmap-cell.entrance::before {
  content: "入";
  position: absolute;
  top: 0; left: 1px;
  font-size: 8px;
  color: var(--torch);
}
.rmap-cell.token {
  outline: 3px solid var(--torch);
  outline-offset: -1px;
  z-index: 2;
  box-shadow: 0 0 8px var(--torch);
}
.rmap-cell.token::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 3px #000;
  font-size: 14px;
}
/* 移動方向に合わせた向き（JSがdir-*クラスを付与） */
.rmap-cell.token.dir-n::after { content: "▲"; }
.rmap-cell.token.dir-s::after { content: "▼"; }
.rmap-cell.token.dir-w::after { content: "◀"; }
.rmap-cell.token.dir-e::after { content: "▶"; }
.rmap-cell.death { outline: 3px solid var(--danger); }
.rmap-cell.death::after {
  content: "💀"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.replay-caption { font-size: 1.05rem; min-height: 1.4em; text-align: center; }

/* 地図 + 進行履歴の横並び */
.replay-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.replay-history {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 200px;
  max-height: 286px;
  overflow-y: auto;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
}
.hist-row {
  padding: 5px 8px;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border-left: 3px solid transparent;
}
.hist-row.current {
  background: #2a1e10;
  color: var(--text);
  border-left-color: var(--torch);
  box-shadow: inset 0 0 8px rgba(232, 145, 45, 0.25);
}
.hist-ico { display: inline-block; width: 1.4em; }
.hist-str { color: #c8a86a; font-size: 0.78rem; }

/* バトルステージ（あるけみすと風） */
.battle-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px auto;
  padding: 12px;
  background: #140d08;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  max-width: 460px;
}
.battle-stage.boss {
  border-color: var(--danger);
  box-shadow: 0 0 16px rgba(194, 87, 71, 0.4);
  animation: boss-shake 0.5s steps(2) 1;
}
@keyframes boss-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.fighter { flex: 1; text-align: center; max-width: 170px; }
.fighter-name { font-weight: bold; margin-bottom: 4px; }
.enemy-img { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 6px; }
.battle-stage.boss .enemy-img { width: 88px; height: 88px; }
.hpbar { height: 10px; background: #3a2a1a; border-radius: 5px; overflow: hidden; margin: 5px 0; }
.hpfill { height: 100%; width: 100%; transition: width 0.4s ease; }
.hpfill.raider { background: var(--victory); }
.hpfill.enemy { background: var(--danger); }
.fighter-stat { font-size: 0.8rem; color: var(--muted); }
.hp-figure { color: var(--text); font-weight: bold; }
.battle-vs { font-weight: bold; color: var(--torch); font-size: 1.1rem; }
/* 遭遇中のみ表示するVS+敵側パネル（自分側は#battle-stageに常時表示） */
.battle-encounter { display: flex; align-items: center; gap: 10px; }
.battle-encounter[hidden] { display: none; }

@media (max-width: 480px) {
  .replay-map { grid-template-columns: repeat(var(--grid-size), 22px); }
  .rmap-cell { width: 22px; height: 22px; }
  .replay-history { max-height: 160px; min-width: 100%; }
}
.replay-verdict { font-weight: bold; min-height: 1.4em; font-size: 1.2rem; }
.replay-verdict.win { color: var(--victory); }
.replay-verdict.lose { color: var(--danger); }

/* --- アリーナ: タブ・ポイント/順位の強調表示・対戦相手候補カード --- */
/* 対戦とランキングをタブで分離し、TOP画面を整理する */
.arena-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.arena-tab-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 10px 8px; border: 2px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.18); color: var(--muted); font-weight: bold; cursor: pointer;
  font-size: 1rem; text-align: center; text-decoration: none;
}
.arena-tab-btn:hover { border-color: var(--torch, #c8a86a); }
.arena-tab-btn.is-active {
  color: var(--torch); border-color: var(--torch, #c8a86a); background: rgba(200, 168, 106, 0.12);
}

/* TOP画面のポイントと順位は他のmeta行に埋もれさせず、専用の大きめ表示にする */
.arena-record { margin: 6px 0 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.arena-record-pt { font-size: 1.5rem; font-weight: bold; color: var(--torch); }
.arena-record-pt .pt-unit { font-size: 0.9rem; margin-left: 2px; }
.arena-record-rank { font-size: 1.15rem; font-weight: bold; color: var(--victory); }
.fatigue-meter {
  width: min(150px, 100%);
  display: flex; flex-direction: column; gap: 2px;
  color: var(--muted); font-size: 0.75rem;
}
.fatigue-meter-head { display: flex; justify-content: center; line-height: 1.2; }
.fatigue-bar {
  height: 6px; overflow: hidden; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--panel-edge);
}
.fatigue-bar > span {
  display: block; height: 100%; min-width: 0;
  background: #4a7a58;
}
.fatigue-meter.mid .fatigue-bar > span { background: var(--torch, #c8a86a); }
.fatigue-meter.high .fatigue-bar > span { background: var(--danger, #c25547); }
.monster-row .fatigue-meter { margin-left: auto; }

/* 対戦相手候補: モンスター画像・格・勝利時ポイントを載せた枠カードを横並びグリッドで */
.arena-candidates {
  margin: 8px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.arena-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center;
  padding: 10px 8px; border: 2px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.arena-card:hover { border-color: var(--torch, #c8a86a); }
.arena-card-head { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.arena-card-head strong { font-size: 0.95rem; word-break: break-word; }
/* 相手の「格」バッジ: 格上=警戒色、互角=中立、格下=落ち着いた色 */
.tier-badge { font-size: 0.72rem; font-weight: bold; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.tier-badge.tier-up { background: #3a1f1a; color: #e8a08f; border: 1px solid var(--danger, #c46a5a); }
.tier-badge.tier-even { background: #2a2618; color: #d8c48a; border: 1px solid var(--panel-edge); }
.tier-badge.tier-down { background: #1c2a20; color: #8fc79f; border: 1px solid #4a7a58; }
.arena-card-team { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.arena-mon { display: flex; flex-direction: column; align-items: center; width: 46px; }
.arena-mon-img { width: 44px; height: 44px; border-radius: 6px; image-rendering: pixelated; }
.arena-mon-name { font-size: 0.62rem; color: var(--muted); line-height: 1.1; margin-top: 2px; word-break: break-word; }
.arena-card-meta { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.pt-reward { font-size: 0.9rem; font-weight: bold; color: var(--victory); }

@media (max-width: 600px) {
  /* 対戦相手候補カード: 1行に3枚前後入るよう縮小し、5枚が2行程度に収まるようにする */
  .arena-candidates { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
  .arena-card { padding: 6px 4px; gap: 3px; }
  .arena-card-head strong { font-size: 0.72rem; }
  .tier-badge { font-size: 0.58rem; padding: 1px 5px; }
  .arena-mon { width: 34px; }
  .arena-mon-img { width: 32px; height: 32px; }
  .arena-mon-name { font-size: 0.52rem; }
  .arena-card-meta { gap: 1px; }
  .arena-card-meta .meta { font-size: 0.62rem; }
  .pt-reward { font-size: 0.68rem; }
}

/* 対戦結果: 獲得ポイントの強調 */
.arena-points-earned { font-size: 1.15rem; margin: 8px 0; }
.arena-points-earned strong { color: var(--torch); font-size: 1.35rem; }

/* --- アリーナ・チーム戦「一斉乱戦」: 3体が同時に殴り合う専用ステージ ---
   ダンジョン探索の1対1画面と差別化するため、両チームを上下に対面配置し
   攻撃の踏み込み・被弾シェイク・ダメージフロート・戦闘不能をカード単位で演出する */
.melee-arena { margin: 10px 0; }
.melee-team { display: flex; justify-content: center; gap: 12px; }
.melee-card {
  position: relative; width: 112px; padding: 8px 6px 6px; text-align: center;
  border: 2px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.melee-card img { width: 64px; height: 64px; image-rendering: pixelated; }
.melee-name { font-size: 0.72rem; font-weight: bold; line-height: 1.2; min-height: 2.4em; word-break: break-word; }
.melee-hpnum { font-size: 0.72rem; color: var(--muted); }
/* 攻撃の踏み込み: 自陣（下段）は上へ、敵陣（上段）は下へ＝互いに相手へ向かう */
.melee-card.mine-side.acting { transform: translateY(-8px) scale(1.06); border-color: var(--torch); }
.melee-card.enemy-side.acting { transform: translateY(8px) scale(1.06); border-color: var(--torch); }
.melee-card.hit { animation: melee-shake 0.3s; }
@keyframes melee-shake {
  0%, 100% { margin-left: 0; background: rgba(0, 0, 0, 0.25); }
  25% { margin-left: -5px; background: rgba(196, 90, 74, 0.4); }
  75% { margin-left: 5px; background: rgba(196, 90, 74, 0.4); }
}
.melee-card.fainted { filter: grayscale(1) brightness(0.55); opacity: 0.65; }
.dmg-float {
  position: absolute; left: 50%; top: 6px; margin-left: -18px;
  color: #ff8a75; font-weight: bold; font-size: 1.05rem; pointer-events: none;
  animation: dmg-rise 0.7s ease-out forwards;
}
@keyframes dmg-rise {
  from { opacity: 1; top: 6px; }
  to { opacity: 0; top: -18px; }
}
.melee-vs { text-align: center; margin: 8px 0; color: var(--torch); font-weight: bold; }

/* --- 図鑑・モンスター --- */
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.codex-card {
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
}
.codex-card img { width: 64px; height: 64px; border-radius: 6px; }
.codex-card.undiscovered img { filter: brightness(0.08); animation: none; }
.codex-card.seen img { filter: grayscale(0.9) brightness(0.6); }
.codex-name { font-weight: bold; margin-top: 4px; font-size: 0.78rem; }
.codex-card .meta { font-size: 0.68rem; }

@media (max-width: 600px) {
  .codex-grid {
    grid-template-columns: repeat(auto-fill, minmax(53px, 1fr));
    gap: 4px;
  }
  .codex-card {
    padding: 4px;
  }
  .codex-card img { width: 40px; height: 40px; }
  .codex-name {
    font-size: 0.6rem;
    line-height: 1.15;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .codex-card .meta {
    font-size: 0.54rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --- ドット絵アニメーション: 2コマ調の上下ボブで「生きている」感を出す --- */
@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes idle-sway {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-3px) scaleX(1.04); }
}
.codex-card img, .monster-icon {
  animation: idle-bob 1.1s steps(2, jump-none) infinite;
}
.codex-card:nth-child(2n) img { animation: idle-sway 1.4s steps(2, jump-none) infinite; }
.codex-card:nth-child(3n) img { animation-duration: 0.9s; }
.monster-row:nth-child(2n) .monster-icon { animation-delay: 0.4s; }
.codex-card img:hover, .monster-icon:hover {
  animation: idle-bob 0.3s steps(2, jump-none) infinite;
}

/* --- 外観テーマ: 床は実写テクスチャ画像＋ピースへの色フィルタで質感ごと差し替える。
   stone=無印（画像なし・暗い単色のまま＝課金テーマとの見た目の差別化）。
   課金テーマはEntitlement所有時のみエディタで選択可 --- */
/* 外観テーマ: ピース（通路・部屋）のフィルタ＋岩盤（セル地の床テクスチャ）の両方を塗り替える。
   ダンジョン全体（.theme-X 内の子孫）とマス単位塗り（.piece-cell.theme-X 自身）の両対応。
   背景色は画像読み込み前・失敗時のフォールバック地色として残す */
.theme-bone .piece { filter: saturate(0.1) brightness(1.5); }
.theme-bone .piece-cell, .piece-cell.theme-bone {
  background: #4d4741 url("img/theme_floor_bone.9a3c2ca325f8.webp") center / cover no-repeat;
}
.theme-coral .piece { filter: saturate(2.2) hue-rotate(300deg) brightness(1.05); }
.theme-coral .piece-cell, .piece-cell.theme-coral {
  background: #2e1522 url("img/theme_floor_coral.090980254abe.webp") center / cover no-repeat;
}
.theme-lava .piece { filter: saturate(2.6) hue-rotate(-30deg) brightness(0.95) contrast(1.1); }
.theme-lava .piece-cell, .piece-cell.theme-lava {
  background: #260d07 url("img/theme_floor_lava.49b7e5636181.webp") center / cover no-repeat;
}
.theme-ice .piece { filter: saturate(1.8) hue-rotate(170deg) brightness(1.3); }
.theme-ice .piece-cell, .piece-cell.theme-ice {
  background: #0f1c2b url("img/theme_floor_ice.b54f00dcdaf7.webp") center / cover no-repeat;
}
.theme-ruins .piece { filter: saturate(1.4) hue-rotate(75deg) brightness(0.92); }
.theme-ruins .piece-cell, .piece-cell.theme-ruins {
  background: #17220e url("img/theme_floor_ruins.3361cc4a092b.webp") center / cover no-repeat;
}
/* マス単位塗りは全体テーマより常に優先（specificity＋後勝ちで保証する上書きブロック） */
.piece-cell.theme-bone {
  background: #4d4741 url("img/theme_floor_bone.9a3c2ca325f8.webp") center / cover no-repeat;
}
.piece-cell.theme-bone .piece { filter: saturate(0.1) brightness(1.5); }
.piece-cell.theme-coral {
  background: #2e1522 url("img/theme_floor_coral.090980254abe.webp") center / cover no-repeat;
}
.piece-cell.theme-coral .piece { filter: saturate(2.2) hue-rotate(300deg) brightness(1.05); }
.piece-cell.theme-lava {
  background: #260d07 url("img/theme_floor_lava.49b7e5636181.webp") center / cover no-repeat;
}
.piece-cell.theme-lava .piece { filter: saturate(2.6) hue-rotate(-30deg) brightness(0.95) contrast(1.1); }
.piece-cell.theme-ice {
  background: #0f1c2b url("img/theme_floor_ice.b54f00dcdaf7.webp") center / cover no-repeat;
}
.piece-cell.theme-ice .piece { filter: saturate(1.8) hue-rotate(170deg) brightness(1.3); }
.piece-cell.theme-ruins {
  background: #17220e url("img/theme_floor_ruins.3361cc4a092b.webp") center / cover no-repeat;
}
.piece-cell.theme-ruins .piece { filter: saturate(1.4) hue-rotate(75deg) brightness(0.92); }
/* 「石造り」も明示塗りできる（全体テーマの上書きとして） */
.piece-cell.theme-stone { background: #241c14; }
.piece-cell.theme-stone .piece { filter: none; }

/* エディタのテーマ塗りチップ（ラベルは独立行・チップは横一列に並べる） */
.theme-paint { margin: 8px 0; }
/* パレットのキット系タブ（flex折返し行）内に置くため単独の全幅行にする
   （nowrapの塗りチップ行がタブ列の幅を広げないように、地図列にあった頃と同じ制約をかける） */
.editor-category-pane .theme-paint { flex: 1 1 100%; min-width: 0; }
.theme-paint-label { display: block; margin-bottom: 6px; }
/* 6テーマを常に一列に（狭い画面でも折り返さず、はみ出す場合は横スクロール） */
.theme-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.theme-chips .theme-chip { flex: 0 0 auto; }
.theme-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.theme-chip.over { border-color: var(--danger); }
.theme-chip.over .theme-stock { color: var(--danger); font-weight: bold; }
.theme-stock { display: block; font-size: 11px; line-height: 1.2; opacity: 0.9; }
.theme-paint .theme-chip.selected {
  border-color: var(--torch, #c8a86a); box-shadow: 0 0 6px rgba(200, 168, 106, 0.6);
}
/* !importantは .btn.small.selected の緑上書き対策（選択中もテーマ色を保ち、枠の光で選択を示す） */
.theme-chip.chip-stone { background: #241c14 !important; color: #d8c496 !important; border-color: #6a5c44; }
.theme-chip.chip-bone  { background: #4d4741 !important; color: #efe9dc !important; border-color: #8a8378; }
.theme-chip.chip-coral { background: #2e1522 !important; color: #f0a8c8 !important; border-color: #a85a80; }
.theme-chip.chip-lava  { background: #260d07 !important; color: #ff9a6a !important; border-color: #b0522a; }
.theme-chip.chip-ice   { background: #0f1c2b !important; color: #9ccfff !important; border-color: #4a7f9f; }
.theme-chip.chip-ruins { background: #17220e !important; color: #b8d89a !important; border-color: #5c8a4a; }

/* エディタの色塗り（色の道・課金機能）: プリセットスウォッチ＋自由な色ピッカー */
.color-paint { margin: 8px 0; }
.color-paint-label { display: block; margin-bottom: 6px; }
.color-swatches { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; align-items: center; }
.color-swatch {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 2px solid var(--border, #6a5c44); font-size: 0;
}
.color-swatch.color-erase {
  width: auto; height: auto; border-radius: 6px; font-size: 12px; padding: 4px 8px;
}
.color-swatch.selected {
  border-color: var(--torch, #c8a86a); box-shadow: 0 0 6px rgba(200, 168, 106, 0.6);
}
#color-custom {
  flex: 0 0 auto; width: 32px; height: 28px; padding: 0; border: 2px solid var(--border, #6a5c44);
  border-radius: 6px; background: none; cursor: pointer;
}

/* エディタの音符配置（音符の坑道・課金機能） */
.note-paint { margin: 8px 0; }
.note-paint-label { display: block; margin-bottom: 6px; }
.note-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.note-chips .note-chip { flex: 0 0 auto; }
.note-chip.selected {
  border-color: var(--torch, #c8a86a); box-shadow: 0 0 6px rgba(200, 168, 106, 0.6);
}
/* マス上の音符マーク（エディタ・リプレイ共通） */
.note-mark {
  position: absolute; top: 2px; right: 2px; font-size: 11px; color: var(--torch, #c8a86a);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 2;
}

/* --- 祝福の紙吹雪（課金演出）: 踏破時のゴールの一言を画面全体で祝う ---
   絵文字の帯ではなく、画面全体に舞う紙吹雪片＋きらめきで祝う（JSが個数分の
   .confetti-piece/.confetti-sparkle を動的生成してこの器に流し込む） */
.confetti-burst {
  position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden;
}
.confetti-piece {
  position: absolute; top: -6vh; opacity: 0;
  animation: confetti-fall var(--cf-dur, 3.2s) linear var(--cf-delay, 0s) forwards;
}
.confetti-piece.square { border-radius: 1px; }
.confetti-piece.streamer { border-radius: 2px; }
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(var(--cf-sway, 0px), 112vh) rotate(var(--cf-rot, 360deg)); opacity: 0; }
}
.confetti-sparkle {
  position: absolute; width: 10px; height: 10px; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%);
  animation: confetti-twinkle 1.6s ease-in-out var(--cf-delay, 0s) forwards;
}
@keyframes confetti-twinkle {
  0%   { transform: scale(0.2); opacity: 0; }
  40%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}
.goal-message.blessed {
  border: 1px solid var(--torch, #c8a86a); border-radius: 8px; padding: 10px 14px;
  background: rgba(200, 168, 106, 0.12);
}

/* --- モンスター名前変更（名前変更券） --- */
.rename-form { display: flex; gap: 4px; justify-content: center; }
.rename-form input { width: 8.5em; font-size: 12px; }

/* --- 遊び方ガイド: 明るい紙のようなページ（あるけみすと式の読み物） --- */
body.page-guide {
  background:
    linear-gradient(rgba(255, 250, 238, 0.55), rgba(255, 246, 226, 0.72)),
    url("img/bg_home.4b3f533b7411.webp") center / cover no-repeat fixed #e8dcc2;
}
.page-guide .panel {
  background: rgba(255, 253, 246, 0.94);
  color: #3a2f22;
  border: 1px solid #d8c9a6;
  box-shadow: 0 2px 10px rgba(90, 70, 40, 0.12);
}
.page-guide .panel h1, .page-guide .panel h2 { color: #7a5a1e; }
.page-guide .meta { color: #8a7a5e; }
.guide-hero { text-align: center; }
.guide-emblem { width: 72px; height: 72px; }
.guide-mons { display: flex; justify-content: center; gap: 18px; margin: 10px 0; flex-wrap: wrap; }
.guide-mons img { width: 56px; height: 56px; animation: idle-bob 1.1s steps(2, jump-none) infinite; }
.guide-mons img:nth-child(2n) { animation: idle-sway 1.4s steps(2, jump-none) infinite; }
.guide-list { list-style: none; padding: 0; text-align: left; }
.guide-list li { margin: 10px 0; line-height: 1.9; }
.guide-step { position: relative; }
.guide-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.guide-link-card {
  display: block;
  padding: 12px;
  border: 1px solid #d8c9a6;
  border-radius: 8px;
  background: rgba(120, 90, 40, 0.08);
  text-decoration: none;
  color: #3a2f22;
}
.guide-link-card strong { display: block; color: #7a5a1e; margin-bottom: 4px; }
.guide-link-card span { display: block; color: #8a7a5e; font-size: 0.9rem; }
.guide-link-card:hover { border-color: #b88a32; }
.guide-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin-right: 6px;
  background: #c8a86a; color: #fff; border-radius: 50%; font-size: 0.9em;
}
.guide-side {
  float: right; width: 84px; height: 84px; margin: 0 0 8px 14px;
  animation: idle-bob 1.3s steps(2, jump-none) infinite;
}
.guide-outro h2 { letter-spacing: 0.06em; }
.guide-cta { text-align: center; margin-top: 18px; }
.update-entry { border-bottom: 1px dashed #d8c9a6; padding-bottom: 12px; margin-bottom: 12px; }
.update-entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.update-entry h2 { color: #8a7a5e; }
@media (max-width: 680px) {
  .guide-link-grid { grid-template-columns: 1fr; }
}

/* --- 封鎖中コンテンツ（アリーナ等）: ナビ押下でダイアログ --- */
/* .tutorial-overlayを使う全ダイアログ共通: display:flexよりhidden属性を優先させる
   （新しいダイアログを追加する時も、この1行が効くのでCSS追加は不要） */
.tutorial-overlay[hidden] { display: none; }
.sealed-card { text-align: center; }
/* 封鎖中コンテンツ: ナビ以外（ホームのステータス行など）でも使えるよう a 全般に効かせる */
a.nav-sealed { opacity: 0.65; text-decoration: none; color: var(--text); }
a.nav-sealed::after { content: "🔒"; font-size: 0.75em; margin-left: 2px; }

/* --- ゴールド（汎用通貨）。アイコンは金色の「G」 --- */
.gold {
  display: inline-block;
  min-width: 1.15em;
  text-align: center;
  font-weight: bold;
  color: #40300a;
  background: linear-gradient(135deg, #b08a3c, #e8c96a);
  border-radius: 50%;
  line-height: 1.15;
  font-size: 0.95em;
}

/* --- エディタ: 最大深度・ダンジョン評価の強調表示 --- */
#dungeon-meta {
  display: inline-block;
  font-size: 1.08rem;
  font-weight: bold;
  color: var(--torch, #c8a86a);
  background: rgba(200, 168, 106, 0.14);
  border: 1px solid var(--torch, #c8a86a);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 6px 0;
  letter-spacing: 0.02em;
}
#dungeon-meta:empty { display: none; }

/* --- 絆（重ね捕獲の合成カウンタ。極=上限到達） --- */
.badge.kizuna { background: #6a4fa0; color: #fff; }
.badge.kizuna.maxed {
  background: linear-gradient(135deg, #b08a3c, #e8c96a);
  color: #40300a; font-weight: bold;
  box-shadow: 0 0 6px rgba(232, 201, 106, 0.7);
}
.kizuna-label { display: inline-flex; align-items: center; gap: 3px; }
.kizuna-num {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  min-width: 1.5em; min-height: 1.5em; padding: 0 3px;
  border-radius: 50%; background: #6a4fa0; color: #fff;
  font-size: 0.72em; font-weight: bold; line-height: 1;
}

/* --- 全体チャット --- */
.chat-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.chat-tab-btn {
  flex: 1; padding: 10px 8px; border: 2px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.18); color: var(--muted); font-weight: bold; cursor: pointer;
  font-size: 1rem;
}
.chat-tab-btn:hover { border-color: var(--torch, #c8a86a); }
.chat-tab-btn.is-active {
  color: var(--torch); border-color: var(--torch, #c8a86a); background: rgba(200, 168, 106, 0.12);
}
.chat-tab-panel[hidden] { display: none; }
.chat-list {
  list-style: none; padding: 8px; margin: 0 0 10px;
  max-height: 56vh; overflow-y: auto;
  border: 1px solid var(--panel-edge, #555); border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: 4px;
}
.chat-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.chat-line.mine { background: rgba(200, 168, 106, 0.12); border-radius: 4px; }
.chat-time { color: var(--muted, #999); font-size: 11px; flex-shrink: 0; }
.chat-name { font-weight: bold; color: var(--torch, #c8a86a); flex-shrink: 0; text-decoration: none; }
.chat-text { word-break: break-word; }
.chat-report { display: inline; margin: 0; }
.chat-report button {
  background: none; border: none; cursor: pointer; opacity: 0.4; font-size: 12px; padding: 0 2px;
}
.chat-report button:hover { opacity: 1; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; }

/* --- ホーム: ニュースのタブ（世界のできごと / 運営からのお知らせ） --- */
.news-tabs { display: flex; gap: 8px; margin: 4px 0 10px; }
/* 最新50件を出すため固定高さでスクロール（枠を広げすぎない）。少ない時はmax-heightで縮む */
.news-panes .news-list { display: none; max-height: 320px; overflow-y: auto; padding-right: 6px; }
.news-panes[data-active-tab="world"] .tab-world { display: flex; }
.news-panes[data-active-tab="official"] .tab-official { display: flex; }

/* --- エディタ: 運営ダンジョン切替（しばいぬ(運営)本人とsuperuserのみ表示） --- */
.operator-switcher { display: flex; flex-direction: column; gap: 10px; }
.operator-dungeon-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  max-height: 220px; overflow-y: auto;
}
.operator-dungeon-list li { display: flex; align-items: center; gap: 6px; }
.operator-dungeon-list .btn.selected { outline: 2px solid var(--accent, #d4a017); }

/* --- 捕獲モンスター: タブ + 縦カード --- */
.monster-tabs { display: flex; gap: 8px; margin: 10px 0; }
.monster-cards {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.monster-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; text-align: center;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.monster-card.rare { border-color: #b08a3c; }
.monster-card .monster-icon { width: 64px; height: 64px; }
.monster-card .card-action { margin-top: auto; padding-top: 6px; }
.monster-deploy-badge.is-hidden { visibility: hidden; }
.monster-card-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: inherit; text-decoration: none; width: 100%;
}
/* 配備予定は独立行にせず、通常フローのまま左上に寄せる（幅が狭いカードでも
   アイコンと重ならないよう絶対配置は避ける） */
.monster-deploy-badge { align-self: flex-start; font-size: 0.65rem; padding: 2px 5px; }
/* 必要EXPはLv行に添える小さな注記（独立行にしない） */
.monster-exp-inline { font-size: 0.85em; }
/* タブ切替: アクティブなタブのボタンだけ見せる */
.monster-cards .card-action { display: none; }
.monster-cards[data-active-tab="upgrade"] .tab-upgrade { display: block; }
.monster-cards[data-active-tab="release"] .tab-release { display: block; }
@media (max-width: 600px) {
  /* 枠を現状のさらに半分程度へ: 列幅・アイコン・余白・文字を大きく縮小 */
  .monster-cards { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px; }
  .monster-card { padding: 6px 4px; gap: 2px; font-size: 0.7rem; }
  .monster-card .monster-icon { width: 30px; height: 30px; }
  .monster-card .meta { font-size: 0.62rem; }
  .monster-deploy-badge { font-size: 0.55rem; padding: 1px 4px; }
}

.monster-detail-panel { max-width: 680px; margin: 0 auto; }
.monster-detail-back { margin-top: 0; }
.monster-detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.monster-detail-icon {
  width: 128px;
  height: 128px;
  border-radius: 8px;
  image-rendering: pixelated;
}
.monster-detail-summary { flex: 1; min-width: 220px; }
.monster-detail-summary h1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.monster-power { text-align: center; margin: 18px 0 8px; }
.monster-power-value { font-size: 2.5rem; font-weight: bold; color: var(--torch); line-height: 1; }
.monster-radar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0; }
.monster-radar-svg { width: 220px; height: 220px; overflow: visible; }
.monster-radar-grid { fill: none; stroke: var(--panel-edge); stroke-width: 1; }
.monster-radar-axis { stroke: var(--panel-edge); stroke-width: 1; }
.monster-radar-label { fill: var(--muted); font-size: 9px; }
.monster-radar-data {
  fill: rgba(200, 168, 106, 0.35); stroke: var(--torch); stroke-width: 2;
  transform-origin: 100px 100px;
  animation: monster-radar-grow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* 詳細画面を開いた瞬間、ステータス形状が中心からグーンと伸びて出てくる演出 */
@keyframes monster-radar-grow {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .monster-radar-data { animation: none; }
}
.monster-radar-legend { list-style: none; padding: 0; display: flex; gap: 16px; color: var(--muted); font-size: 0.85rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 600px) {
  /* 詳細画面がスマホ一画面に収まるよう、画像・文字・レーダーチャートを縮小 */
  .monster-detail-header { gap: 8px; }
  .monster-detail-icon { width: 56px; height: 56px; }
  .monster-detail-summary { min-width: 0; }
  .monster-detail-summary h1 { font-size: 1rem; gap: 3px; margin-bottom: 2px; }
  .monster-detail-summary p { font-size: 0.78rem; margin: 2px 0; }
  .monster-power { margin: 6px 0 2px; }
  .monster-power h2 { font-size: 0.8rem; margin: 0 0 2px; }
  .monster-power-value { font-size: 1.35rem; }
  .monster-radar { margin: 4px 0; gap: 4px; }
  .monster-radar-svg { width: 132px; height: 132px; }
  .monster-radar-legend { font-size: 0.65rem; gap: 6px 8px; }
}

.monster-list { list-style: none; padding: 0; }
.monster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--panel-edge);
  flex-wrap: wrap;
}
.monster-icon { width: 48px; height: 48px; border-radius: 6px; }
.monster-info { display: flex; flex-direction: column; }
.monster-row form { margin-left: auto; }

/* --- 番人の配置 --- */
.guard-section {
  margin: 12px 0;
  padding: 12px;
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
}
.guard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.guard-row select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
}

/* --- ショップ・法務 --- */
.shop-list { list-style: none; padding: 0; }
.shop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--panel-edge);
  flex-wrap: wrap;
}
.shop-info { display: flex; flex-direction: column; gap: 2px; }
.age-check { display: block; margin-top: 14px; color: var(--muted); cursor: pointer; }

.site-footer {
  max-width: 760px;
  margin: 24px auto;
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--panel-edge);
}
.site-footer a { color: var(--muted); font-size: 0.8rem; text-decoration: none; }
.site-footer a:hover { color: var(--torch); }

.legal h2 { margin-top: 20px; }
.legal-table { border-collapse: collapse; width: 100%; }
.legal-table th, .legal-table td {
  border: 1px solid var(--panel-edge);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal-table th { width: 30%; color: var(--muted); font-weight: normal; }

select[name="theme"] {
  background: #0f0a06;
  border: 2px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font: inherit;
  display: block;
}

/* --- 初回チュートリアル --- */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* 背景のゲーム画面が見える程度に薄く */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
}
/* チュートリアル中はヘッダーを暗幕より前面に出し、案内対象のメニューをはっきり見せる */
body.tutorial-active .site-header {
  position: relative;
  z-index: 1001;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.tutorial-card {
  background: var(--panel);
  border: 2px solid var(--torch);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
/* gameConfirm/gameAlertの本文はJS側で\nを使って複数行にできる（textContent設定のため<br>は使えない） */
#game-confirm-message, #game-alert-message { white-space: pre-line; }
.tutorial-card h2 { color: var(--torch); margin-top: 0; }
.info-dialog-body {
  max-height: min(56vh, 420px);
  overflow-y: auto;
  padding-right: 6px;
}
.explore-hub-card {
  max-width: 600px;
  border-color: var(--torch);
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(232, 145, 45, 0.2), 0 16px 36px rgba(0, 0, 0, 0.68);
}
.explore-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.explore-hub-head h2 { margin: 0; }
.explore-hub-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
}
.explore-hub-close:hover {
  color: var(--torch);
  border-color: var(--torch);
}
.explore-hub-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.explore-hub-link {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 18px;
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -58px 46px rgba(0, 0, 0, 0.34);
}
.explore-hub-link:hover {
  color: #fff;
  border-color: var(--torch);
  filter: brightness(1.08);
}
.explore-hub-link strong {
  font-size: 1.32rem;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85);
}
.explore-hub-link span {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.92rem;
  line-height: 1.45;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 0 12px rgba(0, 0, 0, 0.9);
}
.explore-hub-dungeon {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.88)), url("img/bg_list.e39613a458b4.webp");
}
.explore-hub-arena {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.88)), url("img/bg_arena.126d02382b27.webp");
}
.explore-hub-world {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.88)), url("img/bg_world.a1e9e40c1f81.webp");
}
.explore-hub-monsters {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.88)), url("img/bg_monsters.eecf317aaf94.webp");
}
.explore-hub-amulets {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.74) 48%, rgba(0, 0, 0, 0.88)), url("img/bg_shop.fd6b407abe2a.webp");
}
.explore-hub-link.explore-hub-sealed {
  opacity: 0.86;
  filter: grayscale(0.32);
}
.explore-hub-link.explore-hub-sealed:hover {
  filter: grayscale(0.32) brightness(1.06);
}
.explore-hub-sealed.nav-sealed::after { content: none; }
@media (max-width: 600px) {
  .explore-hub-card { max-width: 100%; }
  .explore-hub-link {
    min-height: 96px;
    padding: 14px;
  }
  .explore-hub-link strong { font-size: 1.16rem; }
  .explore-hub-link span { font-size: 0.86rem; }
}
.dialog-mon {
  display: block; width: 88px; height: 88px; margin: 0 auto 6px;
  animation: idle-bob 1.1s steps(2, jump-none) infinite;
}

/* --- キャラ立ち絵（アバター） --- */
.status-top { display: flex; gap: 14px; align-items: flex-start; }
.status-main { flex: 1; }
.status-avatar {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; flex-shrink: 0;
}
.status-avatar-edit { font-size: 11px; color: var(--torch, #c8a86a); }
/* ショップのテーマ・紙吹雪プレビュー */
.theme-preview { display: inline-flex; gap: 2px; margin-top: 6px; }
.theme-preview .piece-cell {
  display: block; width: 36px; height: 36px; border: 1px solid #000; border-radius: 3px;
}
/* 別タブ専用ページ（プレビュー攻略など）: ナビを隠して「どの画面？」の迷子を防ぐ */
.page-popup .site-header { display: none; }

/* 危険警告バッジ（推奨Lv大幅未満での挑戦など） */
.badge.danger { border-color: var(--danger, #c25547); color: #e08476; background: rgba(194, 85, 71, 0.15); }

/* 開拓ブースト中の炎バッジ（新規7日間＋ショップ延長） */
.badge.boost { border-color: #c86a2d; color: #f5b04a; background: rgba(200, 106, 45, 0.15); }

/* 開拓団: 団員リストと操作列 */
.guild-members { list-style: none; padding: 0; margin: 10px 0; }
.guild-members li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid rgba(184, 168, 136, 0.3);
}
.guild-controls { margin-top: 14px; }

/* 開拓者登録: 見習い坑夫の立ち絵をはじめるボタンの左に */
.signup-start { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
/* 開拓者登録タイトル: 見習い坑夫の立ち絵（枠なし）を左に添えて中央寄せ */
.signup-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.signup-title img { width: 56px; height: 56px; object-fit: contain; }
/* 立ち絵の枠: 画像があれば画像、無ければ色付き背景に絵文字プレースホルダ */
.avatar-ph {
  display: block; position: relative; width: 76px; height: 76px; border-radius: 8px;
  border: 2px solid var(--torch, #c8a86a); overflow: hidden;
}
.avatar-ph img { width: 100%; height: 100%; object-fit: contain; }
.avatar-ph-emoji {
  position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 40px;
}
.avatar-option .avatar-ph { width: 96px; height: 96px; }
.avatar-option .avatar-ph-emoji { font-size: 52px; }
.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin: 14px 0;
}
.avatar-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  background: rgba(255, 253, 246, 0.6);
}
.avatar-option:hover { background: rgba(255, 246, 226, 0.9); }
.avatar-option.selected { border-color: var(--torch, #c8a86a); box-shadow: 0 0 8px rgba(200, 168, 106, 0.5); }
.avatar-option input { display: none; }
.avatar-option.locked { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.avatar-option.locked:hover { background: rgba(255, 253, 246, 0.6); }
.avatar-style {
  font-size: 11px; color: #6a5c44; border: 1px solid #b8a888;
  border-radius: 8px; padding: 1px 8px; background: rgba(255, 253, 246, 0.8);
}
.avatar-label { font-weight: bold; color: #3a2f22; }
.tutorial-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.tutorial-progress { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 600px) {
  .tutorial-card { padding: 16px 14px; }
  .tutorial-controls {
    gap: 10px;
    flex-wrap: wrap;
  }
  .tutorial-controls .btn,
  .tutorial-controls button {
    min-height: 44px;
  }
}

/* ソート＆フィルタダイアログ: fieldset/チェックボックス項目の見た目 */
#sort-filter-dialog fieldset {
  border: 1px solid rgba(184, 168, 136, 0.4); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px;
}
#sort-filter-dialog legend { padding: 0 6px; color: var(--torch); font-size: 0.85rem; }
#sort-filter-dialog fieldset label { display: block; margin: 4px 0; cursor: pointer; }
#sort-filter-dialog .filter-checks label.check-option { display: flex; align-items: center; gap: 6px; }

/* 日替わりの日報ダイアログ: 中身が長くなりがちなので少し広めにし、本文だけスクロールさせる */
.daily-report-card { max-width: 560px; }
.daily-report-gains {
  list-style: none; margin: 10px 0; padding: 10px 12px; display: flex; flex-wrap: wrap;
  gap: 6px 16px; background: rgba(200, 168, 106, 0.12); border-radius: 8px;
}
.daily-report-gains li { color: var(--torch); }
.daily-report-scroll {
  margin-top: 10px;
  padding-right: 4px; border-top: 1px solid var(--panel-edge); padding-top: 10px;
}
.daily-report-scroll h1 { font-size: 1.1rem; margin-top: 0; }

/* チュートリアル中に該当ナビを光らせる */
.nav a.tut-highlight {
  color: #1a120a;
  background: var(--torch);
  border-radius: 4px;
  padding: 2px 8px;
  animation: idle-bob 0.6s steps(2, jump-none) infinite;
}

@media (max-width: 480px) {
  /* 10×10 が 375px 幅に収まるセルサイズ（横スクロール不要で全体を編集できる） */
  .grid { grid-template-columns: repeat(var(--grid-size), 32px); gap: 1px; }
  .cell { width: 32px; height: 32px; }
  .cell.entrance::after { font-size: 9px; }
}

/* --- ホーム状態パネル（Lv/攻防/EXPバー/立ち絵） --- */
.status-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.status-head .icon,
.status-stats .icon,
.status-row .icon,
.status-shortcut-label .icon {
  margin-right: 3px;
}
.status-user-link { font-weight: 700; }
.status-lv { font-size: 1.4rem; font-weight: bold; color: var(--torch); }
.status-power { font-weight: bold; }
.status-bonus { color: #7bd88f; font-weight: 800; }
.status-amulet { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.status-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 14px; }
.status-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.status-shortcut {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 0.82rem; line-height: 1.3;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: rgba(0, 0, 0, 0.18); color: var(--text); text-decoration: none;
}
.status-shortcut-label { color: var(--muted); }
.status-shortcut-link { color: var(--torch); text-decoration: none; font-weight: 700; }
.status-shortcut-link:hover { text-decoration: underline; }
.status-shortcut:hover { border-color: var(--torch); background: rgba(200, 168, 106, 0.1); }
/* 開拓団の項目: ラベル（⛺所属開拓団）は枠なしのプレーンテキスト、団名/未所属のリンクだけをボタン化 */
.status-shortcut-guild { border: none; background: none; padding: 0; gap: 6px; }
.status-shortcut-guild:hover { border: none; background: none; }
.status-shortcut-guild .status-shortcut-link {
  padding: 4px 10px; border: 1px solid var(--panel-edge); border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}
.status-shortcut-guild .status-shortcut-link:hover {
  text-decoration: none; border-color: var(--torch); background: rgba(200, 168, 106, 0.1);
}
.status-exp { margin: 8px 0; }
.status-exp-bar {
  height: 8px; background: #2a1e13; border-radius: 5px; overflow: hidden; margin-bottom: 3px;
}
.status-exp-fill { height: 100%; background: var(--torch); transition: width 0.4s ease; }
.status-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; font-size: 14px; }
.status-stats span,
.status-row span,
.status-shortcut-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* プレイヤーID（タップで表示切替。既定は伏字なので誤って見せてしまう事故がない） */
.player-id-chip {
  background: none; border: 1px solid var(--panel-edge, #555); color: var(--text-muted, #999);
  border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; width: fit-content;
}
.player-id-chip:hover { border-color: var(--torch, #d4a017); color: var(--text, #ddd); }
.player-id-value { font-variant-numeric: tabular-nums; }
.status-style { font-weight: bold; }
.style-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.btn.small { padding: 2px 10px; font-size: 13px; }
.btn.small.icon-only { padding: 0; }
.btn.small.selected { background: #3a6; color: #fff; }

/* --- 資材ピース描画（通路/部屋/ゴール。rotはtransform回転） --- */
/* overflowはvisible必須: 結合部屋（大部屋ファミリー/一体型）の床はセルの外まで
   延長して枠と隙間の暗い分断を埋めるため、hiddenだと延長が切られて境界線が見える */
.piece-cell { background: #241c14; padding: 0; overflow: visible; touch-action: none; }
.piece {
  position: absolute; inset: 0;
  transform: rotate(calc(var(--rot, 0) * 90deg));
  pointer-events: none;
}
.piece-ghost {
  opacity: 0.5;
  pointer-events: none;
  z-index: 4;
}
.piece-cell, .rmap-cell.piece-cell, .cell.piece-cell { position: relative; }
.piece::before, .piece::after { content: none; position: absolute; background: #c9b184; }
/* I通路: 縦バー（rot1で横になる） */
.piece.pk1::before { content: ""; left: 34%; right: 34%; top: 0; bottom: 0; }
/* L通路: 上半分の縦バー + 右半分の横バー（rot0 = 北+東） */
.piece.pk2::before { content: ""; left: 34%; right: 34%; top: 0; bottom: 34%; }
.piece.pk2::after { content: ""; top: 34%; bottom: 34%; left: 34%; right: 0; }
/* T通路: 横バー全幅 + 下半分の縦バー（rot = 閉じている向き。rot0 = 北が閉） */
.piece.pk3::before { content: ""; left: 34%; right: 34%; top: 34%; bottom: 0; }
.piece.pk3::after { content: ""; top: 34%; bottom: 34%; left: 0; right: 0; }
/* ＋通路: 十字 */
.piece.pk4::before { content: ""; left: 34%; right: 34%; top: 0; bottom: 0; }
.piece.pk4::after { content: ""; top: 34%; bottom: 34%; left: 0; right: 0; }
/* 小部屋(1D): 部屋の矩形 + 北向きの扉バー */
.piece.pk5::before { content: ""; inset: 22%; background: #d8c496; border: 2px solid #8a7550; }
.piece.pk5::after { content: ""; left: 40%; right: 40%; top: 0; bottom: 72%; }
/* 広間(4D): 大きい明るの矩形（全方位に開口）。接続仕様は十字路と同じ全方向なので、通路スジも縦横クロスで描く */
.piece.pk6::before { content: ""; inset: 10%; background: #e2cfa2; border: 2px solid #8a7550; }
.piece.pk6::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 100% no-repeat,
    linear-gradient(#c9b184, #c9b184) left center / 100% 20% no-repeat;
}
/* ゴール部屋(1D): 部屋 + 宝箱アイコン（回転打ち消し） */
.piece.pk7::before { content: ""; inset: 18%; background: #f0d9a8; border: 2px solid #b08a3c; }
.piece.pk7::after { content: ""; left: 40%; right: 40%; top: 0; bottom: 72%; }
/* 噴水広場(4D): 広間サイズの明るい矩形（青系の縁で水を表現）。開口は全方向なので通路スジも縦横クロス */
.piece.pk8::before { content: ""; inset: 10%; background: #cfe0e8; border: 2px solid #4a7f9f; }
.piece.pk8::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 100% no-repeat,
    linear-gradient(#c9b184, #c9b184) left center / 100% 20% no-repeat;
}
/* 果樹園(1D): 部屋の矩形（緑系） */
.piece.pk9::before { content: ""; inset: 22%; background: #cfe3bf; border: 2px solid #5c8a4a; }
.piece.pk9::after { content: ""; left: 40%; right: 40%; top: 0; bottom: 72%; }
/* 宝部屋(1D): 部屋の矩形（金系・濃い縁） */
.piece.pk10::before { content: ""; inset: 20%; background: #f3dc9a; border: 2px solid #a07414; }
.piece.pk10::after { content: ""; left: 40%; right: 40%; top: 0; bottom: 72%; }
.piece.pk21::before, .piece.pk22::before {
  content: "";
  top: var(--e-n, 10%); right: var(--e-e, 10%);
  bottom: var(--e-s, 10%); left: var(--e-w, 10%);
  background: #e2cfa2; border-style: solid;
  /* 接続辺はJSが極薄色（--bc-*）を入れる。区切って見えると一体型が伝わらないため */
  border-top-color: var(--bc-n, #8a7550); border-right-color: var(--bc-e, #8a7550);
  border-bottom-color: var(--bc-s, #8a7550); border-left-color: var(--bc-w, #8a7550);
  border-top-width: var(--b-n, 2px); border-right-width: var(--b-e, 2px);
  border-bottom-width: var(--b-s, 2px); border-left-width: var(--b-w, 2px);
}
.piece.pk22::after { content: ""; left: 36%; right: 36%; top: 0; bottom: 66%; background: #f7e7b5; border: 1px solid #8a7550; }
/* プレハブ部屋のプレビュー（マーケット/団ショップ/パレット）: サイズ差が一目で分かるよう
   長部屋=縦長・中部屋=中くらい・大部屋=ほぼ全面＋3×3格子で描き分ける（レビュー指摘） */
.piece.pk25::before, .piece.pk39::before {
  content: ""; inset: 8% 30%; background: #e2cfa2; border: 2px solid #8a7550;
}
.piece.pk26::before, .piece.pk40::before, .piece.pk28::before, .piece.pk29::before, .piece.pk30::before,
.piece.pk31::before, .piece.pk32::before {
  content: ""; inset: 16%; background: #e2cfa2; border: 2px solid #8a7550;
}
.piece.pk28::before { background: #260d07; border-color: #b4512f; }
.piece.pk29::before { background: #0f1c2b; border-color: #83bfe0; }
.piece.pk30::before { background: #2e1522; border-color: #cf6f92; }
.piece.pk31::before { background: #4d4741; border-color: #d8d0c8; }
.piece.pk32::before { background: #17220e; border-color: #7a9352; }
.piece.pk33::before, .piece.pk34::before, .piece.pk35::before,
.piece.pk36::before, .piece.pk37::before {
  content: ""; inset: 24%; border: 2px solid #d8c496; border-radius: 4px;
}
.piece.pk33::before { background: #260d07 url("img/theme_floor_lava.49b7e5636181.webp") center / cover no-repeat; border-color: #b4512f; }
.piece.pk34::before { background: #0f1c2b url("img/theme_floor_ice.b54f00dcdaf7.webp") center / cover no-repeat; border-color: #83bfe0; }
.piece.pk35::before { background: #2e1522 url("img/theme_floor_coral.090980254abe.webp") center / cover no-repeat; border-color: #cf6f92; }
.piece.pk36::before { background: #4d4741 url("img/theme_floor_bone.9a3c2ca325f8.webp") center / cover no-repeat; border-color: #d8d0c8; }
.piece.pk37::before { background: #17220e url("img/theme_floor_ruins.3361cc4a092b.webp") center / cover no-repeat; border-color: #7a9352; }
.piece.pk33::after, .piece.pk34::after, .piece.pk35::after,
.piece.pk36::after, .piece.pk37::after {
  content: ""; left: 30%; right: 30%; top: 16%; height: 10%; border: 2px solid #c9b184; border-bottom: 0; border-radius: 8px 8px 0 0;
  background: transparent;
}
.piece.pk27::before, .piece.pk41::before {
  content: ""; inset: 6%; background: #e2cfa2; border: 2px solid #8a7550;
}
.piece.pk25::after, .piece.pk26::after, .piece.pk28::after, .piece.pk29::after,
.piece.pk30::after, .piece.pk31::after, .piece.pk32::after,
.piece.pk39::after, .piece.pk40::after, .piece.pk41::after {
  content: ""; left: 40%; right: 40%; top: 0; bottom: 72%;
}
.piece.pk27::after {
  content: ""; inset: 6%;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 28% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 31%, #c9b184 31% 34.5%),
    repeating-linear-gradient(0deg, transparent 0 31%, #c9b184 31% 34.5%);
}
/* プレハブ点線は外周だけに描く（内側の辺まで描くとセルごとに区切られて見えるため。
   内側の辺はJSが--pf/--pfbを打ち消し、隣セルの点線と繋がるようセル境界までのばす） */
.prefab-cell::after {
  content: ""; position: absolute;
  top: var(--pf-n, 3px); right: var(--pf-e, 3px);
  bottom: var(--pf-s, 3px); left: var(--pf-w, 3px);
  border-style: dashed; border-color: rgba(240, 217, 168, 0.75);
  border-top-width: var(--pfb-n, 1px); border-right-width: var(--pfb-e, 1px);
  border-bottom-width: var(--pfb-s, 1px); border-left-width: var(--pfb-w, 1px);
  pointer-events: none; z-index: 2;
}
.prefab-preview.prefab-k25 .piece, .prefab-preview.prefab-k39 .piece { transform: rotate(270deg) scaleX(0.62); }
.prefab-preview.prefab-k26 .piece, .prefab-preview.prefab-k40 .piece { transform: rotate(270deg) scale(0.82); }
.prefab-preview.prefab-k27 .piece, .prefab-preview.prefab-k41 .piece { transform: rotate(270deg) scale(0.96); }
.prefab-preview.prefab-k28 .piece, .prefab-preview.prefab-k29 .piece,
.prefab-preview.prefab-k30 .piece, .prefab-preview.prefab-k31 .piece,
.prefab-preview.prefab-k32 .piece { transform: rotate(270deg) scale(0.82); }
.prefab-preview.theme-lava { background: #260d07; }
.prefab-preview.theme-ice { background: #0f1c2b; }
.prefab-preview.theme-coral { background: #2e1522; }
.prefab-preview.theme-bone { background: #4d4741; }
.prefab-preview.theme-ruins { background: #17220e; }
.piece.pk23::before {
  content: "";
  top: var(--e-n, 10%); right: var(--e-e, 10%);
  bottom: var(--e-s, 10%); left: var(--e-w, 10%);
  background: #f0d9a8; border-style: solid;
  border-top-color: var(--bc-n, #b08a3c); border-right-color: var(--bc-e, #b08a3c);
  border-bottom-color: var(--bc-s, #b08a3c); border-left-color: var(--bc-w, #b08a3c);
  border-top-width: var(--b-n, 2px); border-right-width: var(--b-e, 2px);
  border-bottom-width: var(--b-s, 2px); border-left-width: var(--b-w, 2px);
}
/* 大広間の床は全方向接続（十字路型）なので、広間pk6と同じ縦横クロスの通路スジを描く。
   これが無いと「単体では十字路にも」の使い方で通路と繋がっているのに閉じた箱に見える（レビュー指摘）。
   隣接セルと結合した際はスジ同士が格子状に繋がり、歩ける床であることが読める */
.piece.pk23::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#d9bd80, #d9bd80) center top / 20% 100% no-repeat,
    linear-gradient(#d9bd80, #d9bd80) left center / 100% 20% no-repeat;
}
.piece.pk24::before { content: ""; inset: 18%; background: #dec79a; border: 2px solid #8a7550; }
.piece.pk24::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 50% no-repeat,
    linear-gradient(#c9b184, #c9b184) right center / 50% 20% no-repeat;
}
.piece.pk38::before { content: ""; inset: 18%; background: #dec79a; border: 2px solid #8a7550; }
.piece.pk38::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 50% no-repeat,
    linear-gradient(#c9b184, #c9b184) center bottom / 20% 50% no-repeat,
    linear-gradient(#c9b184, #c9b184) left center / 50% 20% no-repeat,
    linear-gradient(#c9b184, #c9b184) right center / 50% 20% no-repeat;
}
.piece-chest {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 60%; transform: rotate(calc(var(--rot, 0) * -90deg));
}
.palette .piece-preview {
  position: relative; display: block; width: 40px; height: 40px;
  background: #241c14; border-radius: 4px; overflow: hidden;
}
.rmap-cell.goal-reached { outline: 2px solid gold; }

/* --- 探索の灯り: 通ったマスが暗→明に点いていく（未踏は暗いまま） --- */
.rmap-cell .piece { transition: filter 0.6s ease; }
.rmap-cell.dim { background: #0d0a06; }
.rmap-cell.dim .piece { filter: brightness(0.22) saturate(0.5); }
.rmap-cell.dim.entrance::after { opacity: 0.35; }
.hist-row br + .hist-ico { margin-left: 0; }

/* 公開ライン未満のグレーアウト */
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

/* --- ショップ --- */
.shop-price { color: var(--torch, #c8a86a); font-weight: bold; margin-left: 6px; }
.shop-recommend {
  background: #3a3212;
  border: 1px solid var(--torch, #c8a86a);
  color: #ffd97a;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}
.age-check { display: block; margin: 4px 0 14px; }
/* カテゴリタブ: アクティブなペインだけ表示（フォームはDOMに残るのでage-check連動は全タブに効く） */
.shop-tabs { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.shop-panes .shop-pane { display: none; }
.shop-panes[data-active-tab="utility"] [data-shoppane="utility"],
.shop-panes[data-active-tab="theme"] [data-shoppane="theme"],
.shop-panes[data-active-tab="fun"] [data-shoppane="fun"] { display: flex; flex-direction: column; gap: 8px; }

/* --- マーケット --- */
/* タブ: 交換所（デフォルト） / 自分のお店（P2P取引所） / ショップ（課金） */
.market-tabs, .explore-tabs { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.market-panes .market-pane { display: none; }
.market-panes[data-active-tab="exchange"] [data-pane="exchange"],
.market-panes[data-active-tab="store"] [data-pane="store"],
.market-panes[data-active-tab="shop"] [data-pane="shop"] { display: block; }

/* 探索タブ: 探索（デフォルト） / ランキング */
.explore-panes .explore-pane { display: none; }
.explore-panes[data-active-tab="reco"] [data-pane="explore"],
.explore-panes[data-active-tab="explore"] [data-pane="explore"],
.explore-panes[data-active-tab="ranking"] [data-pane="ranking"] { display: block; }

/* --- 運営バランスページ: 種族/育成ステータス/資材/定数早見表の4タブ、
   その内側にモンスター育成ステータスの通常/レアタブ・プレイシミュレータの探索者/モンスタータブ --- */
.balance-panes [data-balpane] { display: none; }
.balance-panes[data-active-tab="species"] [data-balpane="species"],
.balance-panes[data-active-tab="mon"] [data-balpane="mon"],
.balance-panes[data-active-tab="piece"] [data-balpane="piece"] { display: block; }
.balance-panes[data-active-tab="const"] .ops-columns[data-balpane="const"] { display: grid; }
.mon-stat-tabs, .sim-tabs { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.mon-stat-panes .mon-stat-pane { display: none; }
.mon-stat-panes[data-active-tab="normal"] [data-monpane="normal"],
.mon-stat-panes[data-active-tab="rare"] [data-monpane="rare"] { display: block; }
.sim-panes .sim-pane { display: none; }
.sim-panes[data-active-tab="explorer"] [data-simpane="explorer"],
.sim-panes[data-active-tab="monster"] [data-simpane="monster"] { display: block; }

.market-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.market-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #555; border-radius: 8px; padding: 8px 12px;
}
.market-row.locked { opacity: 0.55; }
.market-row .piece-preview,
.exchange-confirm-item .piece-preview {
  position: relative; display: block; width: 40px; height: 40px;
  background: #241c14; border-radius: 4px; overflow: hidden; flex-shrink: 0;
}
.market-info { display: flex; flex-direction: column; flex: 1; }
/* 交換所の資材名の横に添えるマスの大きさ表記（（1マス）。名前より小さく控えめに） */
.piece-size { font-size: 0.72em; font-weight: normal; color: var(--muted); margin-left: 2px; }
.piece-effect { color: var(--torch, #c8a86a); font-size: 0.8rem; }
.start-tools { margin: 8px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#move-start.selected { background: #3a6; color: #fff; }

/* --- 画面ごとの雰囲気背景 ---
   ダンジョン関連（エディタ/一覧/攻略）= 暗いオーバーレイの地下、
   それ以外 = 薄いオーバーレイで昼の地上（明るい雰囲気）を見せる。
   画像が未生成/読み込み失敗でもグラデーション＋地色で成立する */
body {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_default.709b6abe693f.webp") center / cover no-repeat fixed #574433;
}
body.page-home {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_home.4b3f533b7411.webp") center / cover no-repeat fixed #574433;
}
body.page-collection {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_collection.4c7ed5431368.webp") center / cover no-repeat fixed #574433;
}
body.page-market {
  background:
    linear-gradient(rgba(28, 20, 12, 0.40), rgba(24, 17, 10, 0.58)),
    url("img/bg_market.deed3dac4fca.webp") center / cover no-repeat fixed #574433;
}
body.page-shop {
  background:
    linear-gradient(rgba(28, 20, 12, 0.40), rgba(24, 17, 10, 0.58)),
    url("img/bg_shop.fd6b407abe2a.webp") center / cover no-repeat fixed #574433;
}
body.page-ranking,
body.page-profile {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_ranking.e69c9a65b134.webp") center / cover no-repeat fixed #574433;
}
/* ダンジョン関連は暗い雰囲気のまま（画像自体が暗色なのでオーバーレイは薄めで絵を見せる） */
body.page-editor {
  background:
    linear-gradient(rgba(12, 8, 5, 0.72), rgba(12, 8, 5, 0.80)),
    url("img/bg_editor.76b921496894.webp") center / cover no-repeat fixed #0c0805;
}
body.page-list {
  background:
    linear-gradient(rgba(12, 8, 5, 0.70), rgba(12, 8, 5, 0.78)),
    url("img/bg_list.e39613a458b4.webp") center / cover no-repeat fixed #0c0805;
}
body.page-raid {
  background:
    linear-gradient(rgba(12, 8, 5, 0.66), rgba(12, 8, 5, 0.76)),
    url("img/bg_raid.e009802ebfbb.webp") center / cover no-repeat fixed #0c0805;
}
body.page-guild {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_guild.3e2d15f31c51.webp") center / cover no-repeat fixed #574433;
}
body.page-monsters {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_monsters.eecf317aaf94.webp") center / cover no-repeat fixed #574433;
}
body.page-arena {
  background:
    linear-gradient(rgba(28, 20, 12, 0.42), rgba(24, 17, 10, 0.60)),
    url("img/bg_arena.126d02382b27.webp") center / cover no-repeat fixed #574433;
}

/* --- ワールドダンジョン --- */
body.page-world {
  background:
    linear-gradient(rgba(12, 8, 5, 0.58), rgba(12, 8, 5, 0.72)),
    url("img/bg_world.a1e9e40c1f81.webp") center / cover no-repeat fixed #0c0805;
}
.world-companions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px; margin: 8px 0 12px;
}
.world-companion {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  border: 2px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.18);
}
.world-companion:hover { border-color: var(--torch, #c8a86a); }
.world-companion:has(input:checked) {
  border-color: var(--torch, #c8a86a);
  box-shadow: 0 0 6px rgba(200, 168, 106, 0.4);
  background: rgba(200, 168, 106, 0.08);
}
.world-companion img { width: 44px; height: 44px; border-radius: 6px; background: #241c14; }
.world-comp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.world-entry-foot { margin-top: 6px; }
.world-record { font-size: 1.1rem; }
.rank-group-icon {
  width: 22px; height: 22px; object-fit: contain; vertical-align: middle;
  border-radius: 4px; background: #241c14; margin-right: 2px;
}
/* 今日の深さランキング: 縦並びタブ（全体／ソロ／連れモンスター別） */
.rank-tabs { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; }
.rank-tab-list { display: flex; flex-direction: column; gap: 4px; flex: 0 0 168px; }
.rank-tab-btn {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.18); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.rank-tab-btn:hover { border-color: var(--torch, #c8a86a); }
.rank-tab-btn.active {
  background: var(--torch, #c8a86a); border-color: var(--torch, #c8a86a);
  color: #241a10; font-weight: bold;
}
.rank-tab-btn.active .meta { color: #241a10; opacity: 0.75; }
.rank-tab-panels { flex: 1; min-width: 0; }
.rank-tab-panel { display: none; }
.rank-tab-panel.active { display: block; }
.rank-mine {
  background: rgba(255, 255, 255, 0.06); border: 1px dashed var(--torch, #c8a86a);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 10px;
}
/* border-left-colorには触れない: 上位3位のメダル色（金銀銅）をis-meで潰さないため */
.rank-list li.is-me { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--torch, #c8a86a); }
/* TOP10圏外の自分の順位行の前に挟む区切り（アリーナのランキングタブ） */
.rank-list li.rank-gap {
  background: none; border: none; justify-content: center;
  padding: 0; margin-bottom: 6px; color: var(--muted); letter-spacing: 4px;
}
.rank-scope-toggle { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
@media (max-width: 680px) {
  .rank-tabs { flex-direction: column; }
  .rank-tab-list { flex: 0 0 auto; width: 100%; }
}
/* ワールドのリプレイ: 入口は「上り階段」・ゴールは「下り階段」の見立て */
body.page-world-replay .rmap-cell.entrance::before { content: "⬆"; font-size: 10px; }

/* --- お守り（護石）: レアリティ別の縁取り。N<R<SR<UR<LRの序列が一目で分かるように --- */
.amulet-slots, .amulet-stones, .amulet-storage {
  list-style: none; padding: 0; margin: 8px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.amulet-card {
  position: relative;
  border: 2px solid var(--panel-edge); border-radius: 8px; padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 6px;
}
.amulet-card.empty { align-items: center; justify-content: center; opacity: 0.6; min-height: 72px; }
.amulet-title { font-size: 0.98rem; line-height: 1.25; }
.amulet-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amulet-rarity { font-size: 0.95rem; }
.amulet-effects { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--muted); }
.amulet-card .card-action { display: flex; gap: 6px; flex-wrap: wrap; }
.amulet-card-action { display: flex; justify-content: flex-end; margin-top: auto; }
@media (max-width: 600px) {
  /* 狭幅では180pxのminmaxが1列に潰れてカードが横いっぱいになるため、2列に収まる幅へ縮小 */
  .amulet-slots, .amulet-stones, .amulet-storage {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px;
  }
  .amulet-card { padding: 7px 8px; gap: 4px; }
  .amulet-title { font-size: 0.82rem; }
  .amulet-rarity { font-size: 0.8rem; }
  .amulet-effects { font-size: 0.72rem; }
  .amulet-select { font-size: 0.72rem; }
}
.amulet-stone-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}
.amulet-select { font-size: 0.82rem; color: var(--muted); }
.amulet-lock-badge {
  position: absolute; top: 8px; right: 8px; font-size: 1rem;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
.amulet-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.amulet-vault-tabs {
  display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap;
}
.amulet-vault-tab-btn {
  background: #0f0a06; color: var(--text); border: 1px solid var(--panel-edge);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit;
}
.amulet-vault-tab-btn:hover { border-color: var(--torch, #c8a86a); }
.amulet-vault-tab-btn.is-active {
  background: var(--panel-edge); border-color: var(--torch, #c8a86a); color: var(--torch, #c8a86a);
}
.amulet-vault-tab-panel[hidden] { display: none; }
#amulet-sort-filter-dialog fieldset {
  border: 1px solid rgba(184, 168, 136, 0.4); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px;
}
#amulet-sort-filter-dialog legend { padding: 0 6px; color: var(--torch); font-size: 0.85rem; }
#amulet-sort-filter-dialog fieldset label { display: block; margin: 4px 0; cursor: pointer; }
#amulet-sort-filter-dialog .filter-checks label.check-option { display: flex; align-items: center; gap: 6px; }
.amulet-card.rarity-N { border-color: #7a7a7a; }
.amulet-card.rarity-R { border-color: #4f8fd8; box-shadow: 0 0 5px rgba(79, 143, 216, 0.35); }
.amulet-card.rarity-SR {
  border-color: #a05fd8; box-shadow: 0 0 6px rgba(160, 95, 216, 0.45);
}
.amulet-card.rarity-UR {
  border-color: #d8a940; box-shadow: 0 0 7px rgba(216, 169, 64, 0.5);
}
.amulet-card.rarity-LR {
  border-color: #e85a5a;
  background: linear-gradient(135deg, rgba(232, 90, 90, 0.15), rgba(216, 169, 64, 0.12));
  box-shadow: 0 0 10px rgba(232, 90, 90, 0.6);
}
.amulet-card.rarity-N .amulet-rarity { color: #b5b5b5; }
.amulet-card.rarity-R .amulet-rarity { color: #7bb2f5; }
.amulet-card.rarity-SR .amulet-rarity { color: #c496f5; }
.amulet-card.rarity-UR .amulet-rarity { color: #f0c869; }
.amulet-card.rarity-LR .amulet-rarity { color: #ff8a8a; font-weight: bold; }
.amulet-reveal-dialog-card { max-width: min(920px, 96vw); }
.amulet-reveal-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; margin-top: 12px;
}
.amulet-reveal-stage { min-height: 170px; display: flex; align-items: center; justify-content: center; }
.amulet-reveal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.amulet-reveal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amulet-reveal-summary {
  margin: 8px 0 2px; color: #f0d58a; font-size: 1.08rem; font-weight: 800; text-align: center;
}
.amulet-reveal-card {
  min-width: 0; text-align: center; animation: amuletRevealPop 360ms ease-out both;
  padding: 8px 9px; gap: 4px;
}
.amulet-reveal-card .amulet-title { font-size: 0.86rem; padding: 0; }
.amulet-reveal-card .amulet-rarity { font-size: 0.82rem; }
.amulet-reveal-card .meta { font-size: 0.72rem; margin: 0; }
.amulet-reveal-card .amulet-effects { font-size: 0.74rem; line-height: 1.35; }
.amulet-reveal-card.rarity-N { animation-duration: 260ms; }
.amulet-reveal-card.rarity-R { animation: amuletRevealPop 320ms ease-out both, amuletGlowBlue 1.6s ease-in-out infinite alternate; }
.amulet-reveal-card.rarity-SR { animation: amuletRevealPop 380ms ease-out both, amuletGlowViolet 1.25s ease-in-out infinite alternate; }
.amulet-reveal-card.rarity-UR { animation: amuletRevealPop 460ms ease-out both, amuletGlowGold 1s ease-in-out infinite alternate; }
.amulet-reveal-card.rarity-LR {
  animation: amuletRevealLegend 620ms ease-out both, amuletGlowLegend 0.85s ease-in-out infinite alternate;
}
.amulet-reveal-card.rarity-failed {
  position: relative; overflow: hidden;
  border-color: #d34f4f; background: linear-gradient(180deg, rgba(92, 24, 24, 0.32), rgba(20, 13, 13, 0.9));
  box-shadow: 0 0 0 1px rgba(211, 79, 79, 0.28), inset 0 0 24px rgba(0, 0, 0, 0.36);
  filter: grayscale(0.75) saturate(0.65); animation: amuletRevealCrack 420ms ease-out both;
}
.amulet-reveal-card.rarity-failed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 102, 102, 0.42) calc(50% - 1px), rgba(255, 102, 102, 0.42) calc(50% + 1px), transparent calc(50% + 1px));
}
.amulet-reveal-card.rarity-failed .amulet-title {
  color: #ff8d8d;
}
.amulet-reveal-card.rarity-failed .amulet-title::before {
  content: "✕"; display: block; margin-bottom: 2px; color: #ff6666; font-size: 1.35rem; line-height: 1;
}
.amulet-appraise-slot {
  min-width: 0; text-align: center; padding: 10px; gap: 8px;
}
.amulet-appraise-question {
  display: block; font-size: 2.2rem; line-height: 1; color: var(--torch, #c8a86a);
}
.amulet-boost-input {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.82rem; color: var(--muted);
}
.amulet-boost-input input {
  width: 72px; padding: 5px 6px; border-radius: 6px;
  border: 1px solid var(--panel-edge); background: #0f0a06; color: var(--text);
}
.amulet-boost-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; color: var(--muted); font-size: 0.9rem;
}
.amulet-vault-full-warning { color: var(--danger, #c25547); font-weight: bold; }
@media (max-width: 760px) {
  .amulet-reveal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amulet-reveal-footer { flex-direction: column; align-items: stretch; }
  .amulet-reveal-footer .btn { width: 100%; text-align: center; }
  .amulet-boost-summary { flex-direction: column; align-items: stretch; }
}
@keyframes amuletRevealPop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes amuletRevealLegend {
  0% { opacity: 0; transform: scale(0.82) rotate(-1deg); }
  60% { opacity: 1; transform: scale(1.06) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes amuletRevealCrack {
  0% { opacity: 0; transform: translateX(-7px) rotate(-1deg); }
  25% { opacity: 1; transform: translateX(6px) rotate(1deg); }
  48% { transform: translateX(-4px) rotate(-0.6deg); filter: grayscale(0.9) brightness(0.75); }
  70% { transform: translateX(2px) rotate(0.4deg); filter: grayscale(0.75) brightness(1.06); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes amuletGlowBlue {
  from { box-shadow: 0 0 6px rgba(79, 143, 216, 0.35); }
  to { box-shadow: 0 0 16px rgba(79, 143, 216, 0.65); }
}
@keyframes amuletGlowViolet {
  from { box-shadow: 0 0 8px rgba(160, 95, 216, 0.45); }
  to { box-shadow: 0 0 22px rgba(196, 150, 245, 0.78); }
}
@keyframes amuletGlowGold {
  from { box-shadow: 0 0 10px rgba(216, 169, 64, 0.55); }
  to { box-shadow: 0 0 30px rgba(240, 200, 105, 0.9); }
}
@keyframes amuletGlowLegend {
  from { box-shadow: 0 0 14px rgba(232, 90, 90, 0.65), 0 0 22px rgba(216, 169, 64, 0.35); }
  to { box-shadow: 0 0 34px rgba(255, 138, 138, 0.95), 0 0 48px rgba(240, 200, 105, 0.75); }
}

/* --- ページ別アクセント: パネル上辺の色でも画面を見分けられるように --- */
body.page-home .panel, body.page-list .panel, body.page-market .panel,
body.page-shop .panel, body.page-collection .panel, body.page-monsters .panel,
body.page-guild .panel, body.page-arena .panel, body.page-world .panel,
body.page-amulets .panel,
body.page-ranking .panel, body.page-profile .panel { border-top-width: 3px; }
body.page-home .panel { border-top-color: #b98a3e; }
body.page-list .panel { border-top-color: #7a6a4f; }
body.page-market .panel { border-top-color: #4f8fa8; }
body.page-shop .panel { border-top-color: #b8642f; }
body.page-collection .panel { border-top-color: #8a7fb8; }
body.page-monsters .panel { border-top-color: #6fa054; }
body.page-guild .panel { border-top-color: #d98e3c; }
body.page-world .panel { border-top-color: #9a4a3c; }
body.page-arena .panel { border-top-color: #b8503c; }
body.page-amulets .panel { border-top-color: #a05fd8; }
body.page-ranking .panel, body.page-profile .panel { border-top-color: #c9a53e; }

/* --- ログイン画面: あるけみすと式（紋章・人数・ランキング・お知らせを見せる玄関） --- */
.login-count { margin: 4px 0 12px; }
.login-count strong { color: var(--torch, #c8a86a); font-size: 1.2em; }
.login-avatars { display: flex; gap: 14px; justify-content: center; margin: 4px 0 10px; }
.login-avatars img {
  width: 72px; height: 72px; border-radius: 10px; object-fit: contain;
  border: 2px solid var(--panel-edge); background: #241c14;
}
.login-panel { max-width: 460px; margin-left: auto; margin-right: auto; }
.login-panel h2 { margin-top: 0; }
.login-panel input[type="text"], .login-panel input[type="password"] {
  width: 100%; box-sizing: border-box;
}
.login-btn { width: 100%; margin-top: 6px; }
/* Googleでログイン: あるけみすと式の区切り線+専用ボタン */
.login-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
  color: var(--muted); font-size: 0.85rem;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--panel-edge);
}
.google-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box; background: #fff; color: #3c4043;
  border: 1px solid #dadce0; font-weight: 500;
}
.google-login-btn:hover { background: #f8f9fa; }
.google-logo { width: 20px; height: 20px; flex-shrink: 0; }
.rank-list .avatar-ph.rank-avatar { width: 36px; height: 36px; flex-shrink: 0; }

/* --- テスト公開の合言葉ゲート（門番）: 画面全体を黒90%で覆う --- */
.gate-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.gate-card {
  width: min(400px, 92vw);
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 12px;
  padding: 20px 24px; text-align: center;
}
.gate-monban { width: 132px; height: 132px; display: block; margin: 0 auto 8px; }
.gate-say { margin: 0 0 12px; line-height: 1.7; }
.gate-error { color: #e0604e; font-weight: bold; margin: 0 0 8px; }
.gate-form input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: #0f0a06; color: var(--text); text-align: center; font-size: 1rem;
}

/* --- 動画リワード広告（行動力+5）: 行動力0の時だけ出る視聴ボタン ---*/
.ad-energy-form, .ad-arena-form { display: inline-block; margin-left: 8px; }
.ad-energy-btn, .ad-arena-btn { background: #2e6b4f; border-color: #2e6b4f; color: #fff; }
.ad-energy-btn:disabled, .ad-arena-btn:disabled { opacity: 0.6; }
.ad-placeholder-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ad-placeholder-card {
  width: min(320px, 92vw);
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 12px;
  padding: 28px 24px; text-align: center;
}
.ad-placeholder-count { font-size: 2.5rem; font-weight: bold; margin: 8px 0 0; }

/* --- PCレイアウト: 広い画面では枠を横に並べて幅を活かす（モバイルは従来通り縦積み） --- */
@media (min-width: 1100px) {
  body.page-home .container,
  body.page-guild .container,
  body.page-arena .container,
  body.page-list .container,
  body.page-market .container,
  body.page-collection .container,
  body.page-monsters .container { max-width: min(94vw, 1280px); }
  body.page-editor .container { max-width: min(96vw, 1200px); }
  /* 1枚パネル中心の画面は従来幅のまま（横に伸ばすと間延びする） */
  body.page-single .container { max-width: 760px; }

  /* 高さの違うパネル群を2カラムへ流し込む（新聞の段組み方式）。
     固定表示のオーバーレイ類は .cols の外に置くこと（段の中では位置が壊れる） */
  .cols { columns: 2; column-gap: 16px; }
  .cols > * { break-inside: avoid; }

  /* ダンジョン探索: 一覧をカード2列に、ランキングの部門も2列に */
  body.page-list .dungeon-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-list .dungeon-list > .dungeon-row {
    border: 1px solid var(--panel-edge); border-radius: 8px; padding: 12px 14px;
    background: rgba(0, 0, 0, 0.12); align-content: start;
  }
  body.page-list .explore-panes[data-active-tab="ranking"] [data-pane="ranking"] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start;
  }
  body.page-list [data-pane="ranking"] > h1,
  body.page-list [data-pane="ranking"] > p.meta { grid-column: 1 / -1; }
  body.page-list [data-pane="ranking"] > .rank-section { margin: 0 0 14px; }

  /* マーケット: 商品リストを2列に（開拓団の団ショップには適用しない） */
  body.page-market .market-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.page-market .market-row { margin: 0; }

  /* エディタ: 地図を左、パレット・公開ライン・操作を右の2ペインに */
  .editor-cols {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(320px, 1fr);
    grid-template-areas: "map tools" "map info";
    column-gap: 22px;
    align-items: start;
  }
  .editor-map { grid-area: map; }
  .editor-tools { grid-area: tools; }
  .editor-info { grid-area: info; }
  /* 色の道/音符の坑道チップ行（nowrap）が地図列の幅を広げないように（幅は地図側に合わせる） */
  .editor-map .color-paint, .editor-map .note-paint { width: 0; min-width: 100%; }

  /* ホームのチャットは高さ固定: ポーリングで高さが変わると段組みが再配分されて
     パネルが左右に飛び移るため（multicolの再バランス対策） */
  body.page-home #chat .chat-list { height: 56vh; max-height: none; }
}

/* --- 画面ごとのチュートリアルチップ（スポットライト式）。
   対象と上部メニュー以外をグレーアウトし、矢印が対象を指す --- */
.tut-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 80;
}
.tut-spotlight { position: relative; z-index: 85; }
.tut-tip {
  position: absolute;
  top: 72px;
  left: 50%;
  z-index: 90;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  color: #222;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  text-align: left;
}
.tut-tip::before {
  /* 吹き出しの三角（既定は下向き＝すぐ下の説明対象を指す） */
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: none;
  border-top: 8px solid #fff;
}
.tut-tip.arrow-up::before {
  /* 対象の下に出た場合は上向き矢印 */
  bottom: auto;
  top: -8px;
  border-top: none;
  border-bottom: 8px solid #fff;
}
.tut-tip h3 { margin: 0 0 6px; color: #111; }
.tut-tip p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.6; }
.tut-tip-actions { text-align: center; }

/* --- 棘の通路（I通路型・赤いトゲ模様） --- */
.piece.pk11::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, #c9b184 0 6px, #b3543f 6px 10px);
}

/* --- 特殊資材（モンスター素材の複合コスト。docs/monster-materials-design.md） --- */
/* 骨の隠し通路(I通路型): 白骨色のバー＋横縞（湧きなしの安全な廊下） */
.piece.pk12::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, #e8e2d2 0 7px, #b9b09a 7px 9px);
}
/* 魔晶の大部屋(4D): 広間サイズの紫水晶の間。開口は全方向なので通路スジも縦横クロス */
.piece.pk13::before { content: ""; inset: 10%; background: #d9c8ec; border: 2px solid #7a4fa8; }
.piece.pk13::after {
  content: ""; inset: 0;
  background:
    linear-gradient(#c9b184, #c9b184) center top / 20% 100% no-repeat,
    linear-gradient(#c9b184, #c9b184) left center / 100% 20% no-repeat;
}
/* 落とし穴(I通路型): 通路の中央に暗い穴 */
.piece.pk14::before { content: ""; left: 34%; right: 34%; top: 0; bottom: 0; }
.piece.pk14::after {
  content: ""; left: 38%; right: 38%; top: 38%; bottom: 38%;
  background: #17100a; border-radius: 50%; border: 2px solid #5a4a34;
}
/* 王の間(1D): 金縁の玉座の間＋扉バー */
.piece.pk15::before { content: ""; inset: 14%; background: #eadb9e; border: 3px double #a0741a; }
.piece.pk15::after { content: ""; left: 40%; right: 40%; top: 0; bottom: 72%; }

/* --- デバフ通路5種（すべてI通路型。系統素材の複合コストで交換） --- */
/* 毒霧の通路: 緑がかった靄のバー */
.piece.pk16::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(60deg, #9db584 0 6px, #5f7a4a 6px 10px);
}
/* 呪詛の回廊: 紫の禍々しい縞 */
.piece.pk17::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, #a58bb8 0 6px, #5d3f78 6px 10px);
}
/* 蜘蛛糸の通路: 白い糸の網目 */
.piece.pk18::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, #d9d5c8 0 3px, #a9a394 3px 5px);
}
/* 惑わしの通路: ゆらめく虹色の霞 */
.piece.pk19::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(30deg, #b8a9d9 0 5px, #89b8c9 5px 9px, #c9b189 9px 13px);
}
/* 見張りの眼: 暗い通路（アイコンの眼が主役） */
.piece.pk20::before {
  content: ""; left: 34%; right: 34%; top: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, #8a8296 0 6px, #4a4356 6px 10px);
}

/* --- エディタ: 接続不整合の赤マーカー（口が向き合っていない） --- */
.conn-err { position: absolute; background: #e33; z-index: 3; border-radius: 2px; }
.conn-err.dir-n { top: 0; left: 28%; right: 28%; height: 4px; }
.conn-err.dir-s { bottom: 0; left: 28%; right: 28%; height: 4px; }
.conn-err.dir-w { left: 0; top: 28%; bottom: 28%; width: 4px; }
.conn-err.dir-e { right: 0; top: 28%; bottom: 28%; width: 4px; }

/* --- ホーム: ミッション・ニュース・新着・レビュー --- */
.mission-list, .news-list, .newcomer-list, .review-list {
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.mission-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #555; border-radius: 8px; padding: 6px 12px;
}
.mission-row.claimed { opacity: 0.6; }
.mission-row > span:first-child { flex: 1; }
.news-list li, .newcomer-list li, .review-list li { font-size: 0.92rem; }
/* 称号獲得ニュース: 獲得当日は先頭にピン留めされるので、金色の背景で一目でわかるようにする */
.news-list li.news-title {
  background: linear-gradient(135deg, rgba(184, 138, 60, 0.35), rgba(232, 201, 106, 0.2));
  border-left: 3px solid #e8c96a;
  border-radius: 4px;
  padding: 2px 6px;
}

/* --- ナビの未読バッジ --- */
.nav-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 3px;
  border-radius: 50%;
  background: #e33;
  vertical-align: super;
}

/* --- ダンジョン詳細: 霧掛かり見取り図（掘削の輪郭のみ） --- */
.fog-map-wrap { margin: 10px 0; }
.fog-map {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 16px);
  gap: 1px;
  width: max-content;
  filter: blur(0.4px);
  opacity: 0.85;
}
.fog-cell { width: 16px; height: 16px; background: #17110b; border-radius: 2px; }
.fog-cell.dug { background: #6b5a41; box-shadow: inset 0 0 4px rgba(255, 200, 120, 0.35); }
.fog-cell.entrance { background: #c8a86a; }

/* --- 通報・ゴールの一言 --- */
.report-box { margin-top: 12px; }
.report-box select { margin-right: 6px; }
.goal-message {
  border: 1px dashed #b08a3c;
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(176, 138, 60, 0.08);
}

/* --- 色違い（レア個体） --- */
/* 色違い（レア）: 常時金色に光り、登場時はまばゆく明滅して目立たせる（ダンジョン・アリーナ共通） */
.enemy-img.rare, .monster-icon.rare, .melee-card img.rare, .capture-mon-img.rare {
  filter: drop-shadow(0 0 6px gold);
  animation: rare-appear 0.9s ease-out, rare-glow 1.8s ease-in-out 0.9s infinite;
}
@keyframes rare-appear {
  0% { filter: drop-shadow(0 0 2px gold) brightness(3); transform: scale(1.25); }
  60% { filter: drop-shadow(0 0 18px gold) brightness(1.6); }
  100% { filter: drop-shadow(0 0 6px gold) brightness(1); transform: scale(1); }
}
@keyframes rare-glow {
  0%, 100% { filter: drop-shadow(0 0 5px gold); }
  50% { filter: drop-shadow(0 0 16px gold) brightness(1.35); }
}
.monster-row.rare { border: 1px solid #b08a3c; border-radius: 8px; }
.log-comment { margin-left: 6px; }

/* --- 踏破の証 --- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.proof-card {
  display: flex; gap: 5px; align-items: center;
  border: 1px solid #b08a3c; border-radius: 6px; padding: 5px 7px; background: rgba(176,138,60,.08);
}
.proof-ico { font-size: 15px; flex-shrink: 0; }
.proof-body { display: flex; flex-direction: column; min-width: 0; }
.proof-body strong { font-size: 0.78rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-body .meta { font-size: 0.68rem; line-height: 1.2; }

/* --- 捕獲結果ダイアログ --- */
.capture-dialog-card { max-width: min(920px, 96vw); }
/* 色違いを含む捕獲は、ダイアログ全体を金色の縁取りで強調する（紙吹雪と合わせて気づきやすくする） */
.capture-dialog-card.rare-capture {
  border-color: var(--torch);
  box-shadow: 0 0 24px rgba(200, 168, 106, 0.55);
}
.capture-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  max-height: 330px;
  overflow-y: auto;
  padding: 2px 4px 2px 0;
}
.capture-card {
  border: 2px solid var(--panel-edge);
  border-radius: 8px;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.capture-card.rare {
  border-color: #d8a940;
  box-shadow: 0 0 7px rgba(216, 169, 64, 0.5);
  background: rgba(176, 138, 60, 0.12);
}
.capture-mon-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: auto;
}
.capture-name {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.capture-status,
.capture-bond {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}
.capture-status.new { color: var(--torch); font-weight: bold; }
@media (max-width: 760px) {
  .capture-dialog-card { max-width: min(520px, 96vw); }
  .capture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 330px; }
  .capture-mon-img { width: 72px; height: 72px; }
}

/* --- 管理者デバッグ --- */
.nav-debug { color: #c84; font-weight: bold; }
.debug-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; margin-top: 6px; }
.debug-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.debug-actions form { margin: 0; }
.sim-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 8px 0; }
.sim-form label { display: flex; flex-direction: column; font-size: 13px; gap: 2px; }
.sim-result { margin-top: 12px; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
.sim-nums { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; }
.sim-nums strong { font-size: 18px; }

/* --- 運営ダッシュボード --- */
/* 運営・デバッグはPC専用画面: 幅を最大限使い、パネルを2〜3カラムに敷き詰める */
body.page-wide main.container { max-width: min(96vw, 1720px); }
.ops-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 14px;
  align-items: start;
}
.ops-columns > .panel { margin: 0; height: 100%; box-sizing: border-box; }
.ops-full { grid-column: 1 / -1; }

/* 運営のサブナビ（ページ切替）とバランス台帳テーブル */
.ops-nav { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.ops-nav .btn.selected { background: #3a6; color: #fff; }
.balance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.balance-table th, .balance-table td {
  border: 1px solid var(--panel-edge, #555);
  padding: 4px 8px;
  text-align: left;
  vertical-align: middle;
}
.balance-table thead th { background: rgba(200, 168, 106, 0.14); }
.balance-table .piece-preview {
  position: relative; display: inline-block; width: 26px; height: 26px;
  background: #241c14; border-radius: 4px; overflow: hidden; vertical-align: middle;
}

.ops-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ops-bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ops-bar-label { width: 4.5em; text-align: right; flex-shrink: 0; }
.ops-bar { flex: 1; height: 14px; background: rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; }
.ops-bar-fill { height: 100%; background: #c84; border-radius: 4px; min-width: 2px; }
.balance-mon-thumb {
  width: 28px; height: 28px; object-fit: cover; border-radius: 6px;
  vertical-align: middle; margin-right: 6px; background: #241c14;
}
.ops-kpi-pager, .ops-kpi-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
.ops-kpi-pager input[type="month"] {
  min-height: 30px; padding: 3px 6px; border: 1px solid var(--panel-edge, #555); border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
}
.btn.disabled {
  opacity: 0.45; pointer-events: none; filter: grayscale(0.6);
}
.ops-kpi-chart {
  display: flex; align-items: flex-end; gap: 3px;
  min-height: 260px; padding: 10px 4px 0;
  border-left: 1px solid var(--panel-edge, #555);
  border-bottom: 1px solid var(--panel-edge, #555);
  overflow-x: auto;
}
.ops-kpi-col {
  flex: 1 0 22px; min-width: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ops-kpi-barbox {
  width: 100%; height: 220px; display: flex; align-items: flex-end;
}
.ops-kpi-bar {
  width: 100%; min-height: 2px;
  background: linear-gradient(180deg, #e0b35a, #b65f3c);
  border-radius: 4px 4px 0 0;
}
.ops-kpi-day {
  display: block; height: 1.2em; font-size: 11px; color: var(--muted, #777);
}
.ops-kpi-summary span {
  min-width: 120px;
}

/* --- キャッシュ削除（☰メニュー）: 確認ダイアログとロゴ付きローディング画面 --- */
.cache-clear-notes {
  margin: 10px 0; padding-left: 18px;
  font-size: 13px; line-height: 1.7; color: var(--muted, #b7a98f);
}
.cache-clear-notes strong { color: var(--torch); }
.cache-clear-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
}
.cache-loading {
  position: fixed; inset: 0; z-index: 1200; /* tutorial-overlay(1000)より前面 */
  background: var(--bg, #17110c);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.cache-loading[hidden] { display: none; }
.cache-loading img {
  width: min(72vw, 340px); image-rendering: pixelated;
}
.cache-loading p { color: var(--muted, #b7a98f); font-size: 14px; }
.cache-loading-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(232, 145, 45, 0.2); border-top-color: var(--torch, #e8912d);
  animation: cache-spin 0.9s linear infinite;
}
@keyframes cache-spin { to { transform: rotate(360deg); } }

/* --- 交換所: 個数指定確認ダイアログ --- */
.exchange-confirm-card {
  max-width: 420px;
}
.exchange-confirm-item {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 10px;
}
.exchange-stepper {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0;
}
.exchange-step-btn {
  min-width: 44px; min-height: 44px; padding: 0;
}
.exchange-qty-display,
.exchange-qty-editor {
  min-width: 76px; min-height: 44px;
  border: 1px solid var(--panel-edge, #555);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink, #2a1d13);
  font: inherit;
  font-weight: 700;
  text-align: center;
}
.exchange-qty-display {
  cursor: pointer;
}
.exchange-cost-lines {
  margin-top: 6px;
}
.exchange-errors {
  min-height: 1.4em;
  color: #c33;
  font-weight: 700;
}
.exchange-errors p {
  margin: 4px 0;
}