/* アズトロ — 小さく、洗練。数字は大きく。 */
:root {
  --bg: #0a0a16;
  --bg2: #12122a;
  --panel: rgba(255, 255, 255, 0.055);
  --panel-line: rgba(255, 255, 255, 0.09);
  --ink: #f4f1e8;
  --sub: #a7a5b8;
  --gold: #d8b84a;
  --gold-deep: #8a5a00;
  --danger: #ff5a4a;
  --cell: min(15.2vw, 68px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg) 62%) fixed, var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  min-height: 100dvh;
}
#app { max-width: 480px; margin: 0 auto; padding: 0 14px calc(20px + env(safe-area-inset-bottom)); position: relative; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h2, h3 { margin: 0; }

.screen { display: none; animation: fadein 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.screen.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- 共通 ---- */
.btn-gold {
  background: linear-gradient(180deg, #eeda8a, var(--gold) 55%, #b8933a);
  color: #241a02; font-weight: 700; border-radius: 999px;
  padding: 13px 28px; font-size: 16px; letter-spacing: 0.06em;
  box-shadow: 0 6px 24px rgba(216, 184, 74, 0.25), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s;
}
.btn-gold:active { transform: scale(0.97); }
.btn-gold.big { font-size: 19px; padding: 16px 54px; }
.btn-gold:disabled { filter: grayscale(0.7) brightness(0.7); box-shadow: none; }
.btn-ghost {
  border: 1px solid var(--panel-line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 11px 22px; font-size: 14px;
}
.err { color: #ff8d80; font-size: 13px; margin: 8px 0 0; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); margin: 2px 0 12px; }
.chk input { width: 16px; height: 16px; }
.sep-line { border: none; border-top: 1px solid var(--panel-line); margin: 20px 0; }
.err.center { text-align: center; }
.note { color: var(--sub); font-size: 12px; line-height: 1.7; margin-top: 16px; }
.sec-title { font-size: 13px; color: var(--sub); letter-spacing: 0.14em; margin: 22px 0 10px; font-weight: 600; }

/* ---- タイトル ---- */
.title-wrap { text-align: center; padding: 15dvh 0 40px; }
.title-kicker { font-size: 12px; letter-spacing: 0.5em; color: var(--gold); font-weight: 600; }
.title-logo {
  font-size: 76px; line-height: 1.1; margin: 10px 0 4px; font-weight: 800; letter-spacing: 0.08em;
  background: linear-gradient(180deg, #ffffff, #cfd2ff 55%, #8f93c9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 42px rgba(140, 140, 255, 0.25);
}
.title-catch { color: var(--sub); font-size: 15px; margin: 0 0 26px; letter-spacing: 0.05em; }
.title-orbs { display: flex; gap: 10px; justify-content: center; margin-bottom: 34px; }
.title-tip { color: var(--sub); font-size: 12.5px; margin-top: 26px; min-height: 1.5em; }
.title-tip::before { content: "TIP："; color: var(--gold); }
.title-foot { color: #5c5a70; font-size: 11px; letter-spacing: 0.3em; margin-top: 8dvh; }
.title-guide { margin-top: 10px; font-size: 12px; }
.title-guide a { color: #8a86a8; text-decoration: underline; text-underline-offset: 3px; }

/* ---- 玉（オーブ） ---- */
.orb {
  width: var(--cell); height: var(--cell); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; flex: none;
  box-shadow: inset -4px -6px 10px rgba(0,0,0,0.45), inset 3px 4px 8px rgba(255,255,255,0.35), 0 3px 8px rgba(0,0,0,0.4);
}
.orb i { font-style: normal; font-weight: 800; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.55); font-size: calc(var(--cell) * 0.38); }
.orb-0 { background: radial-gradient(circle at 34% 30%, #ffb3a7, #ff4b3a 55%, #7a0d08); }
.orb-1 { background: radial-gradient(circle at 34% 30%, #a8d4ff, #3aa0ff 55%, #0b3377); }
.orb-2 { background: radial-gradient(circle at 34% 30%, #a9f5c0, #3ddc6a 55%, #0b5a24); }
.orb-3 { background: radial-gradient(circle at 34% 30%, #fff3b0, #ffd84a 55%, #8a5a00); }
.orb-4 { background: radial-gradient(circle at 34% 30%, #dfb3ff, #b25cff 55%, #3d0a7a); }
.title-orbs .orb { --cell: 44px; }

/* ---- 認証 ---- */
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 20px; padding: 26px 22px; margin-top: 10dvh; backdrop-filter: blur(8px); }
.panel .title-kicker { text-align: center; }
.panel-title { text-align: center; font-size: 30px; margin: 6px 0 20px; letter-spacing: 0.1em; }
.seg { display: flex; background: rgba(0,0,0,0.3); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.seg-btn { flex: 1; padding: 9px; border-radius: 999px; color: var(--sub); font-weight: 600; font-size: 14px; transition: all 0.3s; }
.seg-btn.on { background: rgba(255,255,255,0.12); color: var(--ink); }
.fld { display: block; margin-bottom: 14px; }
.fld span { display: block; font-size: 11.5px; color: var(--sub); margin-bottom: 6px; letter-spacing: 0.05em; }
.fld input {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--panel-line); border-radius: 12px;
  color: var(--ink); font-size: 16px; padding: 12px 14px; outline: none;
}
.fld input:focus { border-color: rgba(216,184,74,0.6); }
#form-auth .btn-gold { width: 100%; margin-top: 6px; }

/* ---- ホーム（ゲームホーム化 2026-11-01） ----
   世界が主役: 章のキービジュアルの上にパーティが立ち、主アクションは
   「つづきから冒険」1つ。通貨は上部の細いHUD、行き先は下ドックのみ、
   アカウント系はプロフィールシートの中。1ビューポートにスクロール無しで収める。 */
.tb-logout { color: var(--sub); font-size: 12px; }
#scr-home.active { display: flex; flex-direction: column; height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)); }
.home-hero {
  position: relative; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--panel-line); background: #0d0d20;
  display: flex; flex-direction: column;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,18,0.42) 0%, rgba(6,6,18,0.04) 34%, rgba(6,6,18,0.55) 68%, rgba(6,6,18,0.88) 100%); }
.home-hero.theme-sea .hero-shade { background: linear-gradient(180deg, rgba(2,10,28,0.5) 0%, rgba(2,16,38,0.08) 34%, rgba(2,14,34,0.6) 68%, rgba(1,8,22,0.92) 100%); }
.hero-top { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 6px; padding: calc(46px + env(safe-area-inset-top, 0px)) 10px 0; }
.hud { display: flex; gap: 5px; flex-wrap: nowrap; flex: none; }
.hud-item { flex: none; display: inline-flex; align-items: center; gap: 4px; background: rgba(8,8,22,0.62); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 5px 9px; font-size: 12.5px; white-space: nowrap; backdrop-filter: blur(6px); }
.hud-item b { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.hud-ic { font-size: 12px; }
.hud-lab { font-size: 10px; color: var(--sub); letter-spacing: 0.08em; white-space: nowrap; }
.profile-btn { margin-left: auto; width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgba(8,8,22,0.62); border: 1px solid rgba(216,184,74,0.55); display: grid; place-items: center; color: var(--gold); backdrop-filter: blur(6px); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.profile-btn svg { width: 24px; height: 24px; }
.profile-btn:active { transform: scale(0.93); }
.hero-body { position: relative; z-index: 2; margin-top: auto; padding: 0 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-chapter { font-size: 12.5px; letter-spacing: 0.34em; color: var(--gold); font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin-bottom: 12px; }
.home-hero.theme-sea .hero-chapter { color: #8fd8ff; }
.hero-party { display: flex; justify-content: center; margin-bottom: 14px; }
.hero-token { width: 54px; height: 54px; box-shadow: 0 8px 18px rgba(0,0,0,0.55); }
.hero-token + .hero-token { margin-left: -10px; }
.hero-next { margin-bottom: 12px; }
.next-label { display: block; font-size: 10.5px; letter-spacing: 0.3em; color: var(--sub); margin-bottom: 3px; }
.next-stage { display: block; font-size: 19px; font-weight: 800; letter-spacing: 0.04em; text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.hero-cta { width: 100%; max-width: 320px; min-height: 56px; }
.bonus-claim { margin-top: 12px; min-height: 52px; display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg, rgba(216,184,74,0.22), rgba(216,184,74,0.08)); border: 1px solid rgba(216,184,74,0.6); border-radius: 999px; padding: 9px 18px 9px 14px; position: relative; animation: bonusPulse 2.6s ease-in-out infinite; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.bonus-claim[hidden] { display: none; }
.bonus-claim:active { transform: scale(0.98); }
@keyframes bonusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,184,74,0); } 50% { box-shadow: 0 0 0 6px rgba(216,184,74,0.13); } }
.bc-gift { font-size: 19px; }
.bc-text { display: flex; flex-direction: column; align-items: flex-start; }
.bc-main { font-weight: 800; font-size: 14.5px; }
.bc-sub { font-size: 11.5px; color: var(--sub); }
.bc-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ff5a4a; border: 2px solid #14142a; }
.bonus-done { margin: 14px 0 0; font-size: 12px; color: var(--sub); letter-spacing: 0.06em; }
.bonus-done[hidden] { display: none; }
.home-foot { text-align: center; color: #5c5a70; font-size: 11px; letter-spacing: 0.24em; margin: 10px 0 0; flex: none; }

/* プロフィールシート（下から静かに上がるボトムシート） */
.profile-bg { position: fixed; inset: 0; z-index: 60; background: rgba(4,4,12,0.6); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); }
.profile-bg[hidden] { display: none; }
.profile-card { width: 100%; max-width: 480px; background: #171730; border: 1px solid var(--panel-line); border-bottom: none; border-radius: 22px 22px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: sheetIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sheetIn { from { transform: translateY(26px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.profile-grab { width: 42px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.22); margin: 2px auto 14px; }
.profile-name { font-size: 19px; font-weight: 800; text-align: center; }
.profile-sub { text-align: center; color: var(--sub); font-size: 11.5px; margin: 3px 0 14px; letter-spacing: 0.1em; }
.profile-rows { display: grid; gap: 8px; }
.profile-row { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 15px 16px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; min-height: 52px; box-sizing: border-box; }
.profile-row .pr-arrow { color: var(--sub); }
.profile-row.danger { color: #ff8d80; }
.profile-close { width: 100%; margin-top: 12px; min-height: 48px; }

/* ログインボーナス・セレモニー */
.bonus-ceremony { position: fixed; inset: 0; z-index: 70; background: rgba(4,4,12,0.72); display: flex; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(3px); }
.bonus-ceremony[hidden] { display: none; }
.bc-inner { text-align: center; width: 100%; max-width: 340px; }
.bc-stage { position: relative; width: 118px; height: 118px; margin: 0 auto 6px; }
.bc-stamp { width: 118px; height: 118px; border-radius: 50%; border: 3px solid var(--gold); background: radial-gradient(circle at 34% 28%, rgba(238,218,138,0.35), rgba(20,16,4,0.9) 70%); display: grid; place-items: center; color: var(--gold); font-size: 44px; box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
.bonus-ceremony.play .bc-stamp { animation: stampIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes stampIn { from { opacity: 0; scale: 1.35; } to { opacity: 1; scale: 1; } }
.bc-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.bc-particle { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffe9a8, var(--gold) 60%, #8a5a00); opacity: 0; }
.bc-particle.gem { border-radius: 3px; background: radial-gradient(circle at 34% 30%, #cfe4ff, #3aa0ff 60%, #0b3377); }
.bonus-ceremony.play .bc-particle { animation: bcFly 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bcFly { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
.bc-title { font-size: 20px; letter-spacing: 0.08em; margin: 8px 0 0; }
.bc-rewards { text-align: left; }
.bonus-ceremony.play .bc-rewards .reward-row { animation: riseIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bonus-ceremony.play .bc-rewards .reward-row:nth-child(2) { animation-delay: 0.08s; }
.bonus-ceremony.play .bc-rewards .reward-row:nth-child(3) { animation-delay: 0.16s; }
.bc-close { margin-top: 16px; min-width: 180px; min-height: 50px; }

/* ---- サブ画面ヘッダ ---- */
/* 上部 44px は CENTERチップ（右上 fixed・高さ28px＋余白）の帯。
   旧 16px ではサブ画面の通貨チップがチップ本体に重なっていた（土台パスで解消）。 */
.subbar { display: flex; align-items: center; gap: 10px; padding: 44px 0 6px; }
.subbar h2 { font-size: 18px; letter-spacing: 0.06em; white-space: nowrap; flex: none; }
.subbar .back { flex: none; }
.subbar .chips { margin-left: auto; display: flex; gap: 6px; flex: none; }
.subbar .chip { white-space: nowrap; flex: none; }
.back { font-size: 19px; color: var(--sub); width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 1px solid var(--panel-line); line-height: 1; }
.chip { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px 11px; font-size: 13px; }
.chip b { font-variant-numeric: tabular-nums; }

/* ---- ステージ ---- */
.stage-list { display: grid; gap: 10px; margin-top: 12px; }
.chapter-head { font-size: 13px; color: var(--sub); letter-spacing: 0.14em; margin: 16px 0 2px; font-weight: 600; }
.stage-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 13px 15px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.stage-card:active { transform: scale(0.99); }
.stage-card.locked { opacity: 0.45; }
.stage-card .orb { --cell: 46px; }
.stage-main { flex: 1; min-width: 0; }
.stage-label { display: block; font-size: 11px; color: var(--gold); letter-spacing: 0.16em; font-weight: 700; }
.stage-enemy { display: block; font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-meta { display: block; font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.stage-state { font-size: 12px; color: var(--gold); white-space: nowrap; font-weight: 700; }
.stage-state.clear { color: #7dd87d; }
.soon-card { background: rgba(255,255,255,0.025); border: 1px dashed rgba(255,255,255,0.12); border-radius: 16px; padding: 15px 17px; color: var(--sub); }
.soon-card .sc-name { color: var(--ink); font-weight: 700; font-size: 15px; }
.soon-card .sc-boss { font-size: 12.5px; margin-top: 3px; }
.soon-tag { float: right; font-size: 11px; border: 1px solid var(--panel-line); padding: 3px 9px; border-radius: 999px; }

/* ---- キャラ ---- */
.party-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.slot {
  aspect-ratio: 3/4.1; border-radius: 14px; border: 1px dashed rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; color: #55536b; font-size: 22px; overflow: hidden; position: relative; padding: 0;
}
.slot.filled { border: 1px solid var(--panel-line); }
.slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.slot .slot-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; padding: 10px 4px 4px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); color: #fff; text-align: center; }
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.char-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; overflow: hidden; text-align: left; padding: 0; transition: transform 0.25s; }
.char-card:active { transform: scale(0.98); }
.char-card.in-party { border-color: rgba(216,184,74,0.65); box-shadow: 0 0 0 1px rgba(216,184,74,0.4); }
.char-card img { width: 100%; aspect-ratio: 3/3.4; object-fit: cover; object-position: top; display: block; }
.char-card.unowned img { filter: brightness(0) opacity(0.55); }
.char-meta { display: block; padding: 7px 9px 9px; }
.char-name { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.35; min-height: 2.6em; }
.char-sub { font-size: 10.5px; color: var(--sub); margin-top: 2px; display: flex; justify-content: space-between; }
.rarity { color: var(--gold); letter-spacing: 0.05em; }
.attr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }

/* ---- 召喚 ---- */
.gacha-hero { text-align: center; padding: 30px 0 8px; }
.gacha-orbs { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.gacha-orbs .orb { --cell: 52px; }
.gacha-catch { font-size: 19px; font-weight: 800; letter-spacing: 0.05em; margin: 0 0 8px; }
.gacha-rates { color: var(--sub); font-size: 12.5px; line-height: 1.9; margin: 0; }
.gacha-note { color: var(--sub); font-size: 12px; line-height: 1.7; margin: 6px 0 0; }
/* 画面の意味を短く示すキャプション（土台パス: 説明壁でなく1〜2行） */
.cap-line { color: var(--sub); font-size: 12.5px; line-height: 1.75; margin: 2px 2px 0; }
.gacha-btns { display: grid; gap: 11px; margin-top: 24px; }
.gacha-btns .btn-gold { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; }
.gacha-btns .btn-gold span { font-size: 14px; }

/* ---- ランキング ---- */
.rank-list { display: grid; gap: 8px; margin-top: 12px; }
.rank-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 13px; padding: 12px 15px; }
.rank-row.me { border-color: rgba(216,184,74,0.6); }
.rank-no { font-size: 19px; font-weight: 800; width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.rank-no.top { color: var(--gold); }
.rank-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-me { margin-top: 14px; }
.empty-note { color: var(--sub); text-align: center; padding: 34px 0; font-size: 13.5px; line-height: 1.9; }

/* ---- ショップ ---- */
.shop-list { display: grid; gap: 10px; margin-top: 12px; }
.shop-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 15px 17px; }
.shop-amt { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-kind { color: var(--sub); font-size: 12px; }
.shop-price { margin-left: auto; text-align: right; }
.shop-yen { font-size: 16px; font-weight: 700; }
.soon-btn { margin-top: 4px; font-size: 11px; color: var(--sub); border: 1px solid var(--panel-line); border-radius: 999px; padding: 4px 12px; }
.buy-btn { margin-top: 4px; font-size: 12px; font-weight: 700; color: #1a1206; background: linear-gradient(180deg, #ffd84a, #e8a91c); border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer; }

/* ---- ショップ: 課金の欄（形のみ・2026-10-29） ---- */
.shop-banner { margin-top: 12px; background: linear-gradient(120deg, rgba(216,184,74,0.13), rgba(216,184,74,0.04)); border: 1px solid rgba(216,184,74,0.4); border-radius: 14px; padding: 13px 15px; }
.shop-banner-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #241a02; background: var(--gold); border-radius: 999px; padding: 2px 10px; }
.shop-banner-text { margin: 9px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink); }
.shop-wallet { margin-top: 12px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 13px 15px; }
.shop-wallet-head { font-size: 11px; color: var(--sub); letter-spacing: 0.14em; font-weight: 600; margin-bottom: 8px; }
.shop-wallet-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.shop-wallet-row + .shop-wallet-row { border-top: 1px solid rgba(255,255,255,0.05); }
.shop-wallet-kind { font-size: 13px; font-weight: 600; }
.shop-wallet-total { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.shop-wallet-break { margin-left: auto; font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-wallet-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--sub); }
.shop-sec-note { color: var(--sub); font-size: 12px; line-height: 1.7; margin: -4px 0 0; }
.shop-icon { font-size: 24px; flex: none; }
.shop-main { flex: 1; min-width: 0; }
.shop-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.shop-detail { display: block; font-size: 11.5px; color: var(--sub); margin-top: 3px; line-height: 1.55; }
.shop-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; border-radius: 999px; padding: 2px 8px; }
.shop-badge.rec { color: var(--gold); border: 1px solid rgba(216,184,74,0.55); background: rgba(216,184,74,0.08); }
.shop-badge.muted { color: var(--sub); border: 1px solid var(--panel-line); }
.shop-tax { font-size: 10.5px; color: var(--sub); margin-left: 4px; }
.shop-yen-tbd { color: var(--sub); font-size: 14px; }
.shop-card-tbd { border-style: dashed; opacity: 0.82; }
.shop-list-muted .shop-card { opacity: 0.62; }
.shop-notices { margin-top: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-line); border-radius: 14px; padding: 13px 15px; }
.shop-notices-head { font-size: 11px; color: var(--sub); letter-spacing: 0.14em; font-weight: 600; }
.shop-notices ul { margin: 9px 0 2px; padding-left: 17px; }
.shop-notices li { font-size: 12px; line-height: 1.8; color: #d9d7e4; }
.soon-btn:disabled { cursor: default; }

/* ---- バトル ---- */
#scr-battle { position: relative; }
.battle-head { display: flex; align-items: center; gap: 10px; padding: 14px 0 8px; }
.bh-stage { font-weight: 800; letter-spacing: 0.08em; }
.bh-turn { margin-left: auto; color: var(--sub); font-size: 13px; }
.bh-turn b { color: var(--ink); font-size: 16px; }
.enemy-zone { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; padding: 14px; }
.enemy-visual {
  width: 92px; height: 92px; border-radius: 50%; flex: none; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset -8px -12px 22px rgba(0,0,0,0.55), inset 5px 7px 16px rgba(255,255,255,0.22), 0 8px 22px rgba(0,0,0,0.45);
}
.enemy-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.enemy-visual span { font-size: 34px; font-weight: 800; color: rgba(255,255,255,0.92); text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.enemy-visual.hit { animation: hitshake 0.3s; }
@keyframes hitshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.enemy-info { flex: 1; min-width: 0; }
.enemy-name { font-size: 17px; font-weight: 800; margin-bottom: 7px; }
.enemy-atk { font-size: 12px; color: var(--sub); margin-top: 6px; }
.enemy-atk b { color: #ff9d8a; }
.bar { position: relative; height: 17px; border-radius: 999px; background: rgba(0,0,0,0.45); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.bar > div { height: 100%; border-radius: 999px; transition: width 0.45s cubic-bezier(0.22,1,0.36,1); }
.bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.7); font-variant-numeric: tabular-nums; }
.hp-enemy > div { background: linear-gradient(90deg, #c93a2e, #ff7a4d); }
.hp-party > div { background: linear-gradient(90deg, #1f9d55, #5ad67f); }
.party-zone { margin-top: 12px; }
.party-chars { display: flex; gap: 8px; margin-top: 10px; }
.pchar { flex: 0 0 calc((100% - 24px) / 4); position: relative; border-radius: 13px; overflow: hidden; border: 1px solid var(--panel-line); padding: 0; aspect-ratio: 1/1.06; background: #000; }
.pchar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pchar .gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,0.6); }
.pchar .gauge > div { height: 100%; background: var(--gold); transition: width 0.3s; }
.pchar.ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(216,184,74,0.45); animation: readyPulse 1.2s ease-in-out infinite; }
@keyframes readyPulse { 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 6px rgba(216,184,74,0.2); } }
.pchar .pname { position: absolute; left: 0; right: 0; bottom: 5px; font-size: 9px; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; padding: 6px 2px 1px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.move-timer { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); margin: 14px 0 8px; overflow: hidden; }
#move-timer-fill { height: 100%; width: 0%; background: var(--gold); }
.board {
  position: relative; margin: 4px auto 0; touch-action: none; user-select: none; -webkit-user-select: none;
  background: rgba(255,255,255,0.03); border: 1px solid var(--panel-line); border-radius: 18px;
}
.board .orb { position: absolute; left: 0; top: 0; transition: transform 0.16s ease, opacity 0.18s ease, scale 0.18s ease; will-change: transform; }
.board .orb.vanish { opacity: 0; scale: 0.4; }
.board .orb.dragging { transition: none; z-index: 5; filter: brightness(1.15); }
.battle-hint { text-align: center; color: var(--sub); font-size: 12px; margin-top: 10px; }
.float-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.float-num {
  position: absolute; font-weight: 800; font-size: 21px; text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  animation: floatup 0.95s cubic-bezier(0.22,1,0.36,1) forwards; white-space: nowrap;
}
.float-num.heal { color: #7dd87d; }
.float-num.enemy { color: #ff8d80; font-size: 17px; }
@keyframes floatup { from { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; } to { opacity: 0; transform: translateY(-38px); } }

/* ---- モーダル / トースト ---- */
.modal { position: fixed; inset: 0; background: rgba(4,4,12,0.72); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 50; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-card { background: #171730; border: 1px solid var(--panel-line); border-radius: 20px; padding: 24px 20px; width: 100%; max-width: 430px; max-height: 88dvh; overflow-y: auto; animation: fadein 0.35s cubic-bezier(0.22,1,0.36,1); }
.modal-card h3 { font-size: 20px; text-align: center; letter-spacing: 0.06em; }
.modal-card .center { text-align: center; }
.reward-rows { display: grid; gap: 7px; margin: 16px 0; }
.reward-row { display: flex; justify-content: space-between; background: rgba(255,255,255,0.05); border-radius: 11px; padding: 10px 14px; font-size: 14px; }
.reward-row b { font-variant-numeric: tabular-nums; }
.modal-btns { display: grid; gap: 9px; margin-top: 16px; }
.gacha-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; margin-top: 14px; }
.gacha-results .char-card { animation: fadein 0.5s both; }
.badge-new { position: absolute; top: 6px; left: 6px; background: var(--gold); color: #241a02; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; z-index: 2; }
.badge-dup { position: absolute; top: 6px; left: 6px; background: #7a3ad0; color: #fff; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; z-index: 2; }
.char-card { position: relative; }
.detail-img { width: 100%; border-radius: 14px; aspect-ratio: 4/4.6; object-fit: cover; object-position: top; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.detail-stats.four { grid-template-columns: repeat(4, 1fr); }
.detail-stats div { background: rgba(255,255,255,0.05); border-radius: 11px; padding: 9px 4px; text-align: center; }
.detail-stats .ds-label { font-size: 10px; color: var(--sub); display: block; }
.detail-stats .ds-num { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 育成の見える化（土台パス）: キャラ詳細の経験値バーと伸びの表示 */
.char-lv { color: var(--gold); font-weight: 800; margin-right: 5px; font-variant-numeric: tabular-nums; }
.growth-box { background: rgba(244, 200, 106, 0.07); border: 1px solid rgba(244, 200, 106, 0.25); border-radius: 13px; padding: 11px 13px; margin: 0 0 12px; text-align: left; }
.growth-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.growth-lv { color: var(--gold); font-weight: 900; font-size: 16px; letter-spacing: 0.04em; }
.growth-next { color: var(--sub); font-size: 11.5px; }
.exp-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 8px 0; }
.exp-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b98a2e, var(--gold)); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.growth-stats { font-size: 13px; font-variant-numeric: tabular-nums; }
.growth-stats b { color: var(--gold); font-size: 15px; }
.growth-src { color: var(--sub); font-size: 11.5px; line-height: 1.7; margin-top: 5px; }
.reward-row.growth-row.lvup b { color: var(--gold); }
.detail-text { font-size: 13px; line-height: 1.8; color: #d9d7e4; }
.detail-text .dt-head { color: var(--gold); font-size: 11px; letter-spacing: 0.14em; display: block; margin-top: 10px; }
.toast {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #23233f; border: 1px solid var(--panel-line); color: var(--ink); border-radius: 999px;
  padding: 11px 22px; font-size: 13.5px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.5); white-space: nowrap;
}
.toast[hidden] { display: none; }

/* ================= AZRIONデザインシステム ================= */

/* ---- ドック (MENISCUS): 浮いたプレート＋窪み＋金の玉 ----
   バトル画面・タイトル・認証では自動で隠れる（dock.js が .dock-off を付け外し）。 */
.az-dock {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%);
  width: min(452px, calc(100vw - 24px)); height: 64px; z-index: 40;
  display: flex; background: #171730; border: 1px solid var(--panel-line); border-radius: 26px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* 玉はバーの上端より上に飛び出す。その見た目どおり掴めるよう、ヒット領域を上へ広げる */
.az-dock::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px; }
.az-dock.dock-off {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.32s;
}
.az-dock button {
  flex: 1; height: 100%; padding: 0; position: relative; z-index: 2;
  color: var(--sub); font-size: 10px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.az-dock .dic { display: grid; place-items: center; transition: opacity 0.25s; }
.az-dock .dic svg { width: 22px; height: 22px; display: block; }
.az-dock .dock-label { line-height: 1; }
.az-dock button.on { color: var(--gold); }
.dock-skin {
  position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.dock-skin-path { fill: #171730; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.dock-bead {
  position: absolute; left: 0; top: 0; z-index: 3; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(180deg, #eeda8a, var(--gold) 55%, #b8933a); color: #241a02;
  display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 8px 22px rgba(216, 184, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  will-change: transform;
}
.dock-bead .bead-ic { display: none; }
.dock-bead .bead-ic.on { display: grid; place-items: center; }
.dock-bead .bead-ic svg { width: 22px; height: 22px; display: block; }
.az-dock.mn-on { background: transparent; border-color: transparent; box-shadow: none; }
.az-dock.mn-on button .dock-label { opacity: 0; transform: translateY(3px); transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.az-dock.mn-on button.on { color: var(--gold); font-weight: 700; }
.az-dock.mn-on button.on .dock-label { opacity: 1; transform: none; }
.az-dock.mn-on button.on .dic { opacity: 0; }
/* ドック実効高さ = 本体64 + 下10 + 玉の張り出し34 + 当たり帯30。
   旧 102px では一覧の最終行が玉・当たり帯に数px かすっていた（土台パスで解消）。 */
body.dock-on #app { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
body.dock-on .toast { bottom: calc(94px + env(safe-area-inset-bottom)); }

/* ---- VERSO: 認証パネルを斜めの刃が覆って切替 ----
   刃は夜色、先行エッジに金の縫い目が1本。入力値は切替で保持される。 */
.auth-panel { position: relative; overflow: hidden; }
.verso-blade {
  position: absolute; top: 0; bottom: 0; left: -8%; right: -8%; z-index: 60;
  background: linear-gradient(155deg, #1b1b36, #0c0c1c 70%);
  overflow: hidden; pointer-events: none;
  visibility: hidden; transform: translateX(112%) skewX(-7deg);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
}
.verso-blade.show { visibility: visible; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: auto; }
.verso-blade.from-left { transform: translateX(-112%) skewX(-7deg); }
.verso-blade.cover { transform: translateX(0) skewX(-7deg); }
.verso-blade.exit { transform: translateX(-112%) skewX(-7deg); }
.verso-blade.from-left.exit { transform: translateX(112%) skewX(-7deg); }
.verso-seam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--gold); box-shadow: 0 0 18px rgba(216, 184, 74, 0.5);
}
.verso-blade.from-left .verso-seam { left: auto; right: 0; }
.verso-inner {
  position: absolute; inset: 0; transform: skewX(7deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.verso-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.4em; color: rgba(216, 184, 74, 0.8); }
.verso-title { font-size: 28px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); }
.verso-in { animation: verso-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes verso-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Aguante: 長押し確定（10回召喚のみ） ----
   輪郭ボタンに金の液体が満ちる。離せば排水して何も起きない。 */
#btn-gacha10.ag-btn {
  position: relative; overflow: hidden;
  background: rgba(216, 184, 74, 0.06); border: 1.5px solid rgba(216, 184, 74, 0.6);
  color: var(--gold); box-shadow: none; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#btn-gacha10.ag-btn:active { transform: none; background: rgba(216, 184, 74, 0.06); }
#btn-gacha10.ag-btn:disabled { filter: none; opacity: 1; }
.gacha-btns .btn-gold.ag-btn .ag-label, .gacha-btns .btn-gold.ag-btn .ag-tinta { font-size: 16px; }
.gacha-btns .btn-gold.ag-btn .ag-pct { font-size: 12px; }
.ag-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 0;
  background: linear-gradient(180deg, #eeda8a, var(--gold) 60%, #b8933a);
}
.ag-liquid::before {
  content: ""; position: absolute; top: -5px; left: -10%; right: -10%; height: 10px;
  background: inherit; border-radius: 50%;
  animation: ag-wave 2.6s ease-in-out infinite alternate;
}
@keyframes ag-wave { from { transform: translateX(-7px) scaleX(1.05); } to { transform: translateX(7px) scaleX(1.05); } }
.ag-label { position: relative; z-index: 1; }
.ag-tinta {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  color: #241a02; font-weight: 700; clip-path: inset(100% 0 0 0); pointer-events: none;
}
.ag-pct {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 3;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold);
  min-width: 3em; text-align: right; pointer-events: none;
}
.gacha-alt {
  justify-self: center; color: var(--sub); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px;
}

/* ===== アズトロ: 引っ張りバトル ===== */
.title-tokens { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.token-face { display: inline-block; border-radius: 50%; border: 3px solid #888; overflow: hidden; width: 46px; height: 46px; background: #000; flex: none; }
.token-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gacha-orbs .token-face { width: 56px; height: 56px; }
.attr-ring-0 { border-color: #ff4b3a; } .attr-ring-1 { border-color: #3aa0ff; } .attr-ring-2 { border-color: #3ddc6a; } .attr-ring-3 { border-color: #ffd84a; } .attr-ring-4 { border-color: #b25cff; }
.title-note { color: var(--sub); font-size: 12px; margin: 0 0 26px; }
.arena { position: relative; border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; touch-action: none; height: min(52svh, 470px); min-height: 330px; margin-top: 12px; background: radial-gradient(ellipse 90% 60% at 50% 0%, #1b1b30 0%, #10101e 58%, #0a0a16 100%); }
.aim-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#aim-line { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 7 6; }
#aim-dot { fill: var(--gold); }
#arena-tokens { position: absolute; inset: 0; }
.token { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid #888; overflow: hidden; background: #000; pointer-events: none; will-change: transform; }
.token img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.token-glyph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 30px; font-weight: 800; color: rgba(255,255,255,0.92); text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.char-token { box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.char-token.active { box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(216,184,74,0.55); }
.token.hit { animation: hitflash 0.3s; }
@keyframes hitflash { 30% { filter: brightness(1.9); } }
.enemy-token.lunge { animation: lunge 0.38s ease; }
@keyframes lunge { 35% { scale: 1.12; } }
.pchar.turn-now { border-color: var(--gold); }

/* ===== Webアプリ化 2026-10-28（body.game-app スコープ＝本編のみ。ガイド/規約は app.css を読まない） ===== */
html { overscroll-behavior: none; }
body.game-app { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body.game-app #app { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top, 0px); }
body.game-app .modal-card, body.game-app .sheet { overscroll-behavior: contain; touch-action: pan-y; }
body.game-app .arena { touch-action: none; }

/* ================= 品質改修 2026-10-28：分かりやすさ＋手応え（数値不変） ================= */

/* 音 ON/OFF */
.btn-sound { font-size: 11.5px; color: var(--sub); border: 1px solid var(--panel-line); background: var(--panel); border-radius: 999px; padding: 5px 12px; }
.btn-sound.off { opacity: 0.55; }
.battle-head .btn-sound { margin-left: 2px; }

/* アリーナ：奥行きと質感 */
.arena {
  background:
    radial-gradient(ellipse 120% 46% at 50% 108%, rgba(96, 84, 170, 0.20), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 0%, #1e1e36 0%, #121222 55%, #0a0a16 100%);
  box-shadow: inset 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 -30px 52px rgba(0, 0, 0, 0.5);
}
.arena::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 105% 92% at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
}
.arena.boss { border-color: rgba(255, 90, 74, 0.42); }
#arena-tokens { z-index: 1; }
#fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.aim-svg { z-index: 5; }
.arena.wall-l { box-shadow: inset 16px 0 26px -8px rgba(216, 184, 74, 0.55), inset 0 -30px 52px rgba(0, 0, 0, 0.5); }
.arena.wall-r { box-shadow: inset -16px 0 26px -8px rgba(216, 184, 74, 0.55), inset 0 -30px 52px rgba(0, 0, 0, 0.5); }
.arena.wall-t { box-shadow: inset 0 16px 26px -8px rgba(216, 184, 74, 0.55), inset 0 -30px 52px rgba(0, 0, 0, 0.5); }
.arena.wall-b { box-shadow: inset 0 -16px 26px -8px rgba(216, 184, 74, 0.55), inset 0 20px 42px rgba(0, 0, 0, 0.38); }

/* 軌道プレビュー（反射込み） */
#aim-path { stroke: #ffd968; stroke-width: 3; fill: none; stroke-dasharray: 0.5 8; stroke-linecap: round; opacity: 0.95; }
#aim-path.strong { stroke: #ffab3d; }
#aim-b1 { fill: none; stroke: rgba(255, 217, 104, 0.85); stroke-width: 1.6; }
#aim-hit { fill: none; stroke: #ffd968; stroke-width: 2; opacity: 0.9; }
.token.targeted { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(216, 184, 74, 0.7); }
.aim-chip {
  position: absolute; z-index: 6; transform: translate(-50%, -160%);
  background: rgba(10, 10, 22, 0.9); border: 1px solid var(--gold); color: #ffe9a8;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
.aim-chip.good { border-color: #ffab3d; color: #ffcf7a; }
.aim-chip.bad { border-color: #5a6f9a; color: #a9bedd; }
.aim-chip.link { border-color: #57c785; color: #a5e8bf; }

/* 連携・連鎖バナー */
.combo-banner { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); z-index: 6; text-align: center; pointer-events: none; }
.combo-banner[hidden] { display: none; }
.combo-banner span { display: block; }
#combo-main { font-size: 27px; font-weight: 800; color: var(--gold); letter-spacing: 0.06em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); }
#combo-sub { font-size: 12px; color: #e8e4d2; margin-top: 2px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.combo-banner.show { animation: comboPop 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes comboPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.88); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.03); }
  26% { transform: translateX(-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ダメージ・タグ表示 */
.float-num.dmg-strong { color: #ffb03a; font-size: 29px; }
.float-num.dmg-weak { color: #9fb4d8; font-size: 15px; }
.float-num.dmg-link { color: #ffd968; }
.float-tag {
  position: absolute; font-weight: 800; font-size: 13px; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  animation: floatup 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.float-tag.eff-up { color: #ffb03a; }
.float-tag.eff-down { color: #9fb4d8; font-size: 12px; }
.float-tag.skill { color: #e9d8ff; font-size: 16px; }

/* 敵の弱点・意図タグ */
.enemy-tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.etag { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--panel-line); color: var(--sub); }
.etag.weak { color: #ffcf7a; border-color: rgba(255, 171, 61, 0.55); background: rgba(255, 171, 61, 0.08); }
.etag.danger { color: #ff9d8a; border-color: rgba(255, 90, 74, 0.6); background: rgba(255, 90, 74, 0.08); animation: readyPulse 1.1s ease-in-out infinite; }

/* スキル使用可能の明示 */
.pchar .skill-tag {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--gold); color: #241a02; font-size: 9.5px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.pchar .buff-tag {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: #7a3ad0; color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* 敵攻撃時のシェイク */
.party-zone.shake { animation: hitshake 0.3s; }

/* 初戦ガイド */
.tut-overlay { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.tut-overlay[hidden] { display: none; }
.tut-card {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  background: rgba(16, 16, 32, 0.97); border: 1px solid rgba(216, 184, 74, 0.55);
  border-radius: 14px; padding: 12px 14px; pointer-events: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: fadein 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tut-step { font-size: 10.5px; color: var(--gold); letter-spacing: 0.18em; font-weight: 700; }
.tut-card p { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.65; }
.tut-card .btn-gold { padding: 9px 22px; font-size: 13.5px; }
.tut-arrow {
  position: absolute; transform: translateX(-50%); color: var(--gold); font-size: 21px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); pointer-events: none;
  animation: tutBounce 1s ease-in-out infinite;
}
.tut-arrow[hidden] { display: none; }
@keyframes tutBounce { 50% { transform: translateX(-50%) translateY(9px); } }
.token.tut-ring { animation: tutRing 1.1s ease-in-out infinite; }
@keyframes tutRing { 50% { box-shadow: 0 0 0 5px rgba(216, 184, 74, 0.35), 0 0 26px rgba(216, 184, 74, 0.85); } }

/* ボスイントロ */
.boss-intro {
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(96, 12, 12, 0.55), rgba(5, 2, 4, 0.9) 76%);
}
.boss-intro[hidden] { display: none; }
.boss-intro.show { animation: fadein 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* 第2章「海淵の底」の登場演出は深海の色に（同じ作法・章の世界だけ変える） */
.boss-intro.sea { background: radial-gradient(ellipse at 50% 40%, rgba(10, 52, 96, 0.55), rgba(2, 6, 14, 0.92) 76%); }
.boss-intro.sea .bi-kicker { color: #7cc7ff; }
.arena.boss.sea { border-color: rgba(87, 200, 255, 0.45); }
/* 物語文（勝利・敗北モーダル内の小さな一節） */
.story-line { color: #cfe3ff; font-size: 12.5px; line-height: 1.7; margin: 8px 6px 0; }
.bi-kicker { color: #ff8d70; letter-spacing: 0.42em; font-size: 11px; font-weight: 700; }
.bi-name { font-size: 28px; font-weight: 800; margin: 10px 16px 6px; line-height: 1.35; }
.bi-sub { color: var(--sub); font-size: 12.5px; }

/* 結果・召喚の小ネタ */
.result-title { color: var(--gold); font-weight: 800; font-size: 17px; letter-spacing: 0.14em; margin: 4px 0 0; }
.gacha-flavor { color: var(--gold); font-size: 13px; margin: 8px 0 0; }

/* 初戦ガイドのカードはドラッグを通す（ボタンだけ触れる） */
.tut-card .btn-gold { pointer-events: auto; }

/* ================= リアル化改修 2026-10-29：質感・光と影・奥行き・環境（描画のみ） ================= */

/* ---- アリーナ背景層（.arena-bg）: 観客席 → 柱廊 → 床 → 光 ---- */
.arena-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.arena-stands {
  position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background:
    radial-gradient(rgba(214, 205, 255, 0.10) 1px, transparent 1.5px) 0 0 / 11px 9px,
    radial-gradient(rgba(216, 184, 74, 0.07) 1px, transparent 1.5px) 5px 5px / 14px 11px,
    linear-gradient(180deg, #04040a 0%, #101020 58%, #191930 100%);
}
.arena-stands::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(0, 0, 0, 0.38) 12px 13.5px);
  box-shadow: inset 0 -14px 18px rgba(4, 4, 10, 0.55);
}
.arena-arches {
  position: absolute; left: 0; right: 0; top: 25%; height: 21%;
  background:
    linear-gradient(180deg, rgba(25, 25, 48, 0) 0%, rgba(12, 12, 24, 0.55) 62%, rgba(10, 10, 20, 0.92) 96%),
    repeating-linear-gradient(90deg, rgba(3, 3, 8, 0.5) 0 8px, rgba(140, 132, 205, 0.07) 8px 9.5px, transparent 9.5px 46px),
    linear-gradient(180deg, #20203a, #131328);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}
.arena-arches::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, transparent, rgba(216, 184, 74, 0.35) 30%, rgba(216, 184, 74, 0.5) 50%, rgba(216, 184, 74, 0.35) 70%, transparent);
}
.arena-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background:
    radial-gradient(ellipse 78% 40% at 50% 4%, rgba(216, 184, 74, 0.13), transparent 66%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, #1a1a2e 0%, #11111f 46%, #08080f 100%);
  box-shadow: inset 0 18px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.arena-floor::before {
  content: ""; position: absolute; left: 50%; top: 16%; width: 72%; height: 46%;
  transform: translateX(-50%);
  border: 1px solid rgba(216, 184, 74, 0.15); border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(216, 184, 74, 0.05);
}
.arena-floor::after {
  content: ""; position: absolute; left: 50%; top: 25%; width: 46%; height: 29%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 50%;
}
.arena-beam {
  position: absolute; top: -6%; width: 44%; height: 74%; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 241, 203, 0.085), rgba(255, 241, 203, 0.015) 62%, transparent 88%);
  filter: blur(7px);
}
.arena-beam.beam-l { left: 2%; clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); }
.arena-beam.beam-r { right: 2%; clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); }
.arena-motes {
  position: absolute; inset: 0; z-index: 1; opacity: 0.55;
  background:
    radial-gradient(rgba(255, 246, 214, 0.5) 1px, transparent 1.6px) 12px 30px / 67px 59px,
    radial-gradient(rgba(214, 205, 255, 0.4) 1px, transparent 1.6px) 40px 8px / 83px 71px,
    radial-gradient(rgba(255, 246, 214, 0.32) 1px, transparent 1.6px) 70px 52px / 97px 79px;
  animation: motesDrift 9s ease-in-out infinite alternate;
}
@keyframes motesDrift { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* ---- トークン: 接地影＋球面の陰影（既存キャラ絵は無変更、演出側で厚くする） ---- */
.token-shadow {
  position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 72%);
  filter: blur(1.5px);
}
.token::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.26), transparent 44%),
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 -7px 11px rgba(0, 0, 0, 0.38), inset 0 3px 6px rgba(255, 255, 255, 0.16);
}
.char-token.flying { filter: brightness(1.07) saturate(1.06); }
.token-face { position: relative; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
.token-face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.36));
}

/* ---- バトル画面の面の質感 ---- */
.enemy-zone {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028) 60%, rgba(0, 0, 0, 0.12)), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -18px 30px rgba(0, 0, 0, 0.26), 0 10px 24px rgba(0, 0, 0, 0.22);
}
.enemy-visual { box-shadow: inset -8px -12px 22px rgba(0, 0, 0, 0.55), inset 5px 7px 16px rgba(255, 255, 255, 0.22), 0 10px 24px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.05); }
.enemy-visual::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.22), transparent 46%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.34));
}
.bar > div { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(0, 0, 0, 0.32); }
.pchar { box-shadow: 0 5px 13px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* ---- ヒットの重さ: アリーナのごく小さな揺れ＋数字の厚み ---- */
.arena.hit-shake { animation: arenaShakeSm 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
.arena.hit-shake-strong { animation: arenaShakeLg 0.21s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes arenaShakeSm { 30% { transform: translate(1px, 0.5px); } 65% { transform: translate(-0.5px, -0.5px); } }
@keyframes arenaShakeLg { 25% { transform: translate(2px, 1px); } 60% { transform: translate(-1.5px, -1px); } 85% { transform: translate(0.5px, 0.5px); } }
.float-num.dmg-strong {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 176, 58, 0.45);
  animation: floatupStrong 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes floatupStrong {
  from { opacity: 0; transform: translateY(8px) scale(1.22); }
  18% { opacity: 1; transform: translateY(2px) scale(1.05); }
  to { opacity: 0; transform: translateY(-38px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .arena-motes { animation: none; }
  .arena.hit-shake, .arena.hit-shake-strong { animation: none; }
}

/* ================= 戦闘画面ビューポート収納 2026-10-29（オーナー実機判定） =================
   戦闘画面を実機ビューポート（390×844基準）に完全収納する。
   #scr-battle を高さ100%のフレックス列にし、アリーナだけが伸縮する。
   固定高さの積み上げ（head＋敵＋味方＋arena 52svh＋hint）がセーフエリア分
   あふれてスクロールしていたのが溢れの原因。レイアウトと密度のみの変更。 */
#scr-battle.active {
  display: flex; flex-direction: column;
  height: 100%; max-height: 100%; overflow: hidden;
}
/* --- ヘッダー: 1行に圧縮（ステージ名は省略表示で折り返さない） --- */
#scr-battle .battle-head { flex: none; padding: 6px 0 4px; gap: 8px; }
#scr-battle .battle-head .back { width: 30px; height: 30px; font-size: 16px; }
#scr-battle .bh-stage {
  flex: 1; min-width: 0; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#scr-battle .bh-turn { margin-left: 0; font-size: 11.5px; white-space: nowrap; }
#scr-battle .bh-turn b { font-size: 14px; }
#scr-battle .battle-head .btn-sound { padding: 4px 10px; font-size: 10.5px; white-space: nowrap; }

/* --- 敵パネル: 細いストリップ（アイコン46px＋名前/攻撃を1行＋HPバー＋タグ1行） --- */
#scr-battle .enemy-zone {
  flex: none; gap: 10px; padding: 8px 10px; border-radius: 14px;
  border-color: rgba(216, 184, 74, 0.22);
}
#scr-battle .enemy-visual { width: 46px; height: 46px; }
#scr-battle .enemy-visual span { font-size: 20px; }
#scr-battle .enemy-info {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px; row-gap: 3px; align-items: center;
}
#scr-battle .enemy-name {
  grid-column: 1; grid-row: 1; font-size: 14.5px; margin: 0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#scr-battle .enemy-atk { grid-column: 2; grid-row: 1; margin: 0; font-size: 11px; white-space: nowrap; }
#scr-battle .bar.hp-enemy { grid-column: 1 / -1; grid-row: 2; height: 13px; }
#scr-battle .enemy-tags { grid-column: 1 / -1; grid-row: 3; margin-top: 1px; flex-wrap: nowrap; overflow: hidden; }
#scr-battle .etag { font-size: 9.5px; padding: 2px 7px; white-space: nowrap; }

/* --- 味方: HPバーは細く、カードは小型化してアリーナ上縁に重ねる --- */
#scr-battle .party-zone { flex: none; margin-top: 7px; position: relative; z-index: 6; }
#scr-battle .bar.hp-party { height: 13px; }
#scr-battle .party-chars { margin-top: 6px; gap: 6px; margin-bottom: -15px; }
#scr-battle .pchar {
  flex: 0 0 46px; width: 46px; height: 46px; aspect-ratio: auto;
  border-radius: 11px; background: #171730;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#scr-battle .pchar .pname { font-size: 8px; bottom: 4px; }
#scr-battle .pchar .skill-tag { font-size: 8.5px; padding: 1px 6px; top: 2px; }
#scr-battle .pchar .buff-tag { font-size: 8px; padding: 1px 5px; bottom: 8px; }

/* --- アリーナ: 残りの高さをすべて使う（固定高さ廃止） --- */
#scr-battle .arena {
  flex: 1 1 auto; min-height: 0; height: auto; margin-top: 0;
  box-shadow: inset 0 1px 0 rgba(216, 184, 74, 0.28), inset 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 -30px 52px rgba(0, 0, 0, 0.5);
}
#scr-battle .battle-hint {
  flex: none; margin: 6px 0 0; font-size: 11px; line-height: 1.45; min-height: 16px;
}

/* --- チュートリアル: 表示中はアリーナ下に専用スペースを確保し、カードはそこに置く。
       盤面（アリーナ）には一切重ならない。確保は .tut-on クラスでバトル中持続させ、
       ドラッグ開始でカードが消えても盤面が跳ねないようにする（JS: initTutorial/tutDone）。 --- */
#scr-battle.tut-on .arena { margin-bottom: 104px; }
#scr-battle .tut-card {
  left: 2px; right: 2px; bottom: 2px;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px;
  padding: 9px 12px; border-radius: 12px;
}
#scr-battle .tut-step { flex: 1 1 100%; font-size: 9.5px; }
#scr-battle .tut-card p { flex: 1 1 180px; margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; }
#scr-battle .tut-card .btn-gold { padding: 8px 18px; font-size: 12.5px; margin-top: 4px; }
#scr-battle .float-layer { z-index: 7; }

/* ================= ゲームらしさ：派手さ×洗練 2026-10-29（演出のみ） =================
   派手さは「光と動きの質」で作る。色は属性色と金のみ、バウンス/ドカーンは使わない。 */

/* ヒット閃光: ヒット点から広がる属性色の光（アリーナ内のみ） */
.hit-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.hit-flash.on { animation: hitFlashAnim 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hitFlashAnim { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }
#scr-battle .aim-svg { z-index: 6; }
#scr-battle .aim-chip { z-index: 7; }
#scr-battle .combo-banner { z-index: 7; }

/* 残像: 高速飛行中のキャラが薄い像を残す */
.trail-ghost {
  position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden;
  border: 3px solid #888; background: #000; pointer-events: none; z-index: 0;
  animation: ghostFade 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.trail-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@keyframes ghostFade { from { opacity: 0.5; scale: 1; } to { opacity: 0; scale: 0.84; } }

/* 狙い中の溜め: 引くほど金の光が満ちる */
.char-token.charging { animation: chargePulse 0.45s ease-in-out infinite alternate; filter: brightness(1.16) saturate(1.1); }
@keyframes chargePulse {
  from { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(216, 184, 74, 0.45); }
  to { box-shadow: 0 0 0 2px var(--gold), 0 0 calc(20px + var(--charge, 0) * 28px) rgba(216, 184, 74, 0.85); }
}
/* 番のキャラ: 静かに呼吸する金のオーラ */
.char-token.active { animation: activeAura 1.9s ease-in-out infinite; }
@keyframes activeAura {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(216, 184, 74, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(216, 184, 74, 0.6), 0 4px 14px rgba(0, 0, 0, 0.45); }
}
/* スキルの溜め: 一瞬膨らんで光を集める */
.token.skill-charge { animation: skillChargeAnim 0.27s cubic-bezier(0.22, 1, 0.36, 1) both; z-index: 3; }
@keyframes skillChargeAnim {
  0% { scale: 1; filter: brightness(1); }
  70% { scale: 1.16; filter: brightness(1.4) drop-shadow(0 0 16px rgba(255, 233, 168, 0.9)); }
  100% { scale: 1.07; filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 233, 168, 0.6)); }
}

/* HPバー: 光沢の帯が静かに流れる */
.bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.26) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: barSheen 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes barSheen { 0%, 52% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

/* スキル準備完了のカード: 金の光沢が縁を流れる */
#scr-battle .pchar.ready::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 233, 168, 0.35) 50%, transparent 68%);
  transform: translateX(-130%);
  animation: barSheen 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* 通常ヒットの数字にも温かい光を */
.float-num.dmg-hit { color: #ffe9a8; text-shadow: 0 0 12px rgba(255, 217, 104, 0.35), 0 2px 6px rgba(0, 0, 0, 0.8); }
/* 連携・連鎖バナーのグロー強化 */
#combo-main { text-shadow: 0 0 18px rgba(216, 184, 74, 0.65), 0 2px 10px rgba(0, 0, 0, 0.75); }
/* ボス名の残光 */
.bi-name { text-shadow: 0 0 26px rgba(255, 90, 74, 0.45), 0 2px 10px rgba(0, 0, 0, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .bar::after, #scr-battle .pchar.ready::after { animation: none; }
  .char-token.active, .char-token.charging { animation: none; }
  .trail-ghost { animation-duration: 0.01s; }
  .hit-flash.on { animation-duration: 0.08s; }
}

/* ================= 追加品質条件 2026-10-29：長押し全廃／ビット文法／盤面拡大 ================= */

/* --- 長押しポップアップ全廃（プレイ面）: コールアウト・選択・画像ドラッグを止める。
       入力欄（input/textarea）の長押しペーストだけは対象外に残す。 --- */
body.game-app #app, body.game-app #az-dock {
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}
body.game-app input, body.game-app textarea {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
body.game-app img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
#arena, #arena *, .token, .pchar, .party-zone, .enemy-zone {
  -webkit-touch-callout: none !important;
  user-select: none !important; -webkit-user-select: none !important;
}

/* --- 盤面は「縮めて入れる」ではなく画面いっぱいに大きく:
       戦闘画面だけ左右の余白を詰め、アリーナの幅も最大化する（高さはフレックスで最大化済み） --- */
#scr-battle.active { margin: 0 -6px; }

/* --- ビット絵の文法（質感のみ・公式絵そのものには触れない）:
       HPゲージをドット刻みのセグメント表示にし、エフェクト火花は canvas 側で
       四角いビット粒子として描く（app.js FX）。狙い線のドット軌道と合わせて
       「ドットの刻み」をUI/演出の共通文法にする。 --- */
.hp-enemy > div {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 6px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 8px),
    linear-gradient(90deg, #c93a2e, #ff7a4d);
}
.hp-party > div {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 6px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 8px),
    linear-gradient(90deg, #1f9d55, #5ad67f);
}
/* チュートリアル/バナーの縁に、ドット刻みの金のドットライン */
#scr-battle .tut-card { border-style: solid; outline: 1px dotted rgba(216, 184, 74, 0.35); outline-offset: -5px; }
#combo-main { letter-spacing: 0.1em; }
.stage-card .orb.orb-img { overflow: hidden; padding: 0; }
.stage-card .orb.orb-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 50%; }

/* ================= 再点検 2026-10-29：CENTERチップ被りの自タイトル側回避 =================
   共通キット（center-kit）のチップは右上固定で、戦闘ヘッダー右側の
   ターン表示と音ボタンに被っていた。他タイトルの「上部に帯を確保」は
   本作ではアリーナ（flex で残り高さを全使用）をその分だけ圧迫するため採用しない。
   本作は戦闘画面の間だけチップとそのメニューを隠す（app.js の show() が
   body.battle-active を付け外しする。:has は show() を経ない着地への保険）。
   戦闘は数分の没入画面で CENTER 操作は不要、画面を離れれば即座に戻る。
   ヘッダー高・アリーナ面積・収納は一切変えない。 */
body.battle-active #azc-chip, body.battle-active #azc-menu { display: none !important; }
body:has(#scr-battle.active) #azc-chip, body:has(#scr-battle.active) #azc-menu { display: none !important; }
/* ホームではプロフィール入口をヒーロー内の金アイコン1つに統一する
   （土台パス 2026-11-01: CENTERチップとの二重入口を解消。バトルと同じ流儀）。 */
body.home-active #azc-chip, body.home-active #azc-menu { display: none !important; }
body:has(#scr-home.active) #azc-chip, body:has(#scr-home.active) #azc-menu { display: none !important; }

/* ================= ショップ作り込み 2026-10-29（キャラ購入・進行アイテム） ================= */
.shop-char-face {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #888; overflow: hidden;
  flex: none; background: #000; box-shadow: 0 5px 13px rgba(0, 0, 0, 0.45);
}
.shop-char-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.shop-char-name { font-size: 15.5px; font-weight: 700; }

/* ================= ネイティブアプリ級の演出 2026-10-29（表現のみ） =================
   方針: 既存の fadein（opacity+6pxグライド）/押下スケールの土台の上に、
   「要素が順に現れる」「物が置かれる」感触だけを静かに足す。
   イージングは全て cubic-bezier(0.22,1,0.36,1)、バウンス・ドカーンは使わない。
   transform は既存レイアウトと競合しないよう、登場演出は scale/translate
   プロパティ（transform と独立）で組む。 */

/* カード群のスタッガー登場: 画面が開く/リストが描かれるたび、上から静かに順に現れる */
@keyframes riseIn { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
#scr-home.active .home-hero { animation: riseIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
#scr-home.active .hero-body > * { animation: riseIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
#scr-home.active .hero-body > *:nth-child(2) { animation-delay: 0.05s; }
#scr-home.active .hero-body > *:nth-child(3) { animation-delay: 0.09s; }
#scr-home.active .hero-body > *:nth-child(4) { animation-delay: 0.13s; }
#scr-home.active .hero-body > *:nth-child(5) { animation-delay: 0.17s; }
#scr-home.active .hero-body > *:nth-child(6) { animation-delay: 0.21s; }
.stage-card, .shop-card, .char-card { animation: riseIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stage-list .stage-card:nth-child(2), .shop-list .shop-card:nth-child(2) { animation-delay: 0.03s; }
.stage-list .stage-card:nth-child(3), .shop-list .shop-card:nth-child(3) { animation-delay: 0.06s; }
.stage-list .stage-card:nth-child(4), .shop-list .shop-card:nth-child(4) { animation-delay: 0.09s; }
.stage-list .stage-card:nth-child(5), .shop-list .shop-card:nth-child(5) { animation-delay: 0.12s; }
.stage-list .stage-card:nth-child(n+6), .shop-list .shop-card:nth-child(n+6) { animation-delay: 0.15s; }

/* バトル入場のカスケード: ヘッダー→敵→味方→盤面の順に 0.05s 刻みで静かに揃う */
#scr-battle.active .battle-head { animation: riseIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
#scr-battle.active .enemy-zone { animation: riseIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
#scr-battle.active .party-zone { animation: riseIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
#scr-battle.active .arena { animation: riseIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }

/* トークンの出現: 盤面に「置かれる」感触（scaleプロパティのみ＝配置transformと競合しない） */
@keyframes tokenIn { from { opacity: 0; scale: 0.55; } to { opacity: 1; scale: 1; } }
.token { animation: tokenIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* モーダル: 既存 fadein に僅かなスケールを足し「カードが浮かび上がる」形に */
.modal-card { animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); scale: 0.97; } to { opacity: 1; transform: none; scale: 1; } }

/* トースト: 下から静かに滑り込む（中央寄せ transform とは独立の translate で） */
.toast { animation: toastIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes toastIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* 押下の手応えの追加分: スキルアイコンにも沈み込みを */
.pchar { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.pchar:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  #scr-home.active .home-hero, #scr-home.active .hero-body > *,
  .stage-card, .shop-card, .char-card,
  #scr-battle.active .battle-head, #scr-battle.active .enemy-zone, #scr-battle.active .party-zone, #scr-battle.active .arena,
  .token, .modal-card, .toast, .bonus-claim, .bc-particle,
  .bonus-ceremony.play .bc-stamp, .bonus-ceremony.play .bc-rewards .reward-row { animation: none; }
}

/* ---- 指名解放（ポストガチャ） ---- */
.lib-box { margin-top: 34px; border-top: 1px solid var(--panel-line); padding-top: 20px; }
.lib-head { display: flex; align-items: center; gap: 9px; }
.lib-head h3 { font-size: 19px; letter-spacing: 0.06em; }
.lib-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; color: #241a02; background: var(--gold); border-radius: 999px; padding: 2px 9px; }
.lib-state { margin-left: auto; font-size: 11.5px; color: var(--sub); }
.lib-catch { font-size: 14px; line-height: 1.85; margin: 12px 0 0; }
.lib-prices { color: var(--sub); font-size: 12.5px; line-height: 1.9; margin: 8px 0 0; }
.lib-prices b { color: var(--ink); }
.lib-note { color: var(--sub); font-size: 12.5px; line-height: 1.8; margin: 10px 0 0; }
.lib-target { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid rgba(216,184,74,0.45); border-radius: 14px; padding: 10px 12px; margin-top: 14px; }
.lib-target img { width: 54px; height: 62px; object-fit: cover; object-position: top; border-radius: 9px; }
.lib-target-main { flex: 1; min-width: 0; }
.lib-target-name { font-size: 14.5px; font-weight: 700; }
.lib-gauge { height: 8px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.lib-gauge span { display: block; height: 100%; background: linear-gradient(90deg, #eeda8a, var(--gold)); border-radius: 999px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.lib-remain { font-size: 12.5px; color: var(--sub); }
.lib-remain b { color: var(--gold); font-size: 15px; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lib-chip { padding: 9px 16px; font-size: 13.5px; }
.lib-chip:disabled { opacity: 0.45; cursor: default; }
.lib-buy { display: inline-block; margin-top: 12px; color: var(--gold); font-size: 13.5px; font-weight: 700; }
.lib-grid .char-card.unowned img { filter: none; }
.lib-boost-list { display: grid; gap: 8px; margin-top: 10px; }
.lib-boost-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 7px 10px; }
.lib-boost-row img { width: 38px; height: 44px; object-fit: cover; object-position: top; border-radius: 7px; }
.lib-boost-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-boost-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-boost-sub { font-size: 11.5px; color: var(--sub); }

/* === コインショップ大型化（ITEM-SHOP-SPEC・フラッグシップ選択欄の文法） === */
.azs-balance { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 10px 14px; }
.azs-balance-label { font-size: 11px; letter-spacing: .08em; color: var(--sub); font-weight: 700; }
.azs-balance-num { font-size: 20px; font-variant-numeric: tabular-nums; }
.azs-stage { display: flex; align-items: center; gap: 4px; margin-top: 16px; }
.azs-arrow { appearance: none; border: none; background: none; font-size: 30px; line-height: 1; color: var(--sub); cursor: pointer; padding: 10px 6px; flex: none; transition: transform .25s cubic-bezier(.22,.8,.3,1), color .25s; -webkit-tap-highlight-color: transparent; }
.azs-arrow:active { transform: scale(.9); color: var(--ink); }
.azs-focus { flex: 1; height: 218px; border-radius: 20px; border: 1px solid var(--panel-line); display: flex; align-items: center; justify-content: center; transition: background .45s cubic-bezier(.22,.8,.3,1); overflow: hidden; }
.azs-focus .shop-ic { width: 132px; height: 132px; animation: azsIn .5s cubic-bezier(.22,.8,.3,1) both; }
.azs-char-ring { width: 168px; height: 168px; border-radius: 50%; border: 4px solid #888; overflow: hidden; display: block; animation: azsIn .5s cubic-bezier(.22,.8,.3,1) both; background: #1a1a2e; }
.azs-char-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes azsIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.azs-info { text-align: center; margin-top: 16px; }
.azs-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sub); }
.azs-name { font-size: 22px; letter-spacing: .03em; margin-top: 4px; }
.azs-effect { font-size: 13px; color: var(--sub); line-height: 1.7; margin-top: 8px; min-height: 2.6em; }
.azs-price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; }
.azs-price-unit { font-size: 13px; font-weight: 700; color: var(--sub); }
.azs-owned { font-size: 12.5px; color: var(--gold, #d8b84a); font-weight: 700; min-height: 1.4em; margin-top: 4px; }
.azs-action { width: 100%; margin-top: 10px; padding: 14px 26px; font-size: 16px; }
.azs-action:disabled { opacity: .45; cursor: default; }
.azs-subaction { width: 100%; margin-top: 9px; padding: 12px 20px; font-size: 14px; }
.azs-note { font-size: 11.5px; color: var(--sub); margin-top: 10px; }
.azs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.azs-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--panel-line); transition: background .3s, width .3s cubic-bezier(.22,.8,.3,1); }
.azs-dot.on { background: var(--ink); width: 18px; }
.azs-strip { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-top: 14px; padding-bottom: 6px; }
.azs-thumb { position: relative; appearance: none; width: 52px; height: 52px; flex: none; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .25s cubic-bezier(.22,.8,.3,1), border-color .25s; -webkit-tap-highlight-color: transparent; padding: 0; }
.azs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.azs-thumb .shop-ic { width: 30px; height: 30px; }
.azs-thumb.on { border-color: var(--ink); transform: translateY(-2px); }
.azs-thumb-owned { position: absolute; right: 3px; bottom: 3px; font-size: 9px; font-weight: 700; color: #fff; background: #a07d2c; border-radius: 99px; padding: 1px 5px; }
.assist-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 10px 12px; }
.assist-chip { appearance: none; border: 1px solid var(--panel-line); background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; border-radius: 99px; padding: 8px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: border-color .25s, background .25s; }
.assist-chip .assist-state { font-size: 10.5px; letter-spacing: .08em; color: var(--sub); }
.assist-chip.armed { border-color: #a07d2c; background: rgba(217,164,65,.14); }
.assist-chip.armed .assist-state { color: #a07d2c; }
.assist-note { font-size: 11px; color: var(--sub); line-height: 1.6; flex: 1; min-width: 180px; }
.azs-picker-row { width: 100%; text-align: center; }

/* ================= 楽しさパス 2026-11-01：コンボ／ギミック／光沢 =================
   動きの作法は従来どおり「スッと」: 小さな移動と光の走りだけ。爆発的な拡縮はしない。 */

/* ---- コンボメーター（アリーナ右上・常駐表示） ---- */
.combo-meter {
  position: absolute; right: 10px; top: 10px; z-index: 6; pointer-events: none;
  display: flex; align-items: baseline; gap: 5px;
  background: rgba(8, 8, 18, 0.66); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; padding: 4px 12px 5px;
  font-variant-numeric: tabular-nums;
}
.combo-meter[hidden] { display: none; }
.combo-meter b { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; }
.combo-meter .cm-label { font-size: 9px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.65); font-weight: 700; }
.combo-meter em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); }
.combo-meter.heat1 { border-color: rgba(255, 216, 74, 0.55); }
.combo-meter.heat1 b { color: #ffe9a8; }
.combo-meter.heat2 { border-color: rgba(255, 171, 61, 0.8); box-shadow: 0 0 14px rgba(255, 150, 40, 0.25); }
.combo-meter.heat2 b, .combo-meter.heat2 em { color: #ffab3d; }
.combo-meter.heat3 { border-color: rgba(255, 90, 58, 0.9); box-shadow: 0 0 18px rgba(255, 80, 40, 0.4); }
.combo-meter.heat3 b, .combo-meter.heat3 em { color: #ff7a4d; }
.combo-meter.pop { animation: comboMeterPop 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes comboMeterPop { 35% { transform: scale(1.13); } }

/* ---- クリティカル数字／シールド数字 ---- */
.float-num.crit {
  color: #ffd84a; font-size: 33px; letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 190, 40, 0.65), 0 0 3px rgba(255, 240, 190, 0.9);
  animation: floatCrit 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes floatCrit {
  from { opacity: 0; transform: translateY(10px) scale(1.45) rotate(-2deg); }
  16% { opacity: 1; transform: translateY(2px) scale(1.04) rotate(0deg); }
  to { opacity: 0; transform: translateY(-40px) scale(1); }
}
.float-num.dmg-shield { color: #a9c6e8; font-size: 14px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(140, 190, 255, 0.4); }
.float-tag.enrage { color: #ff8d70; }

/* ---- 敵シールドバー ---- */
.bar.hp-shield { height: 12px; margin-top: 5px; }
.bar.hp-shield[hidden] { display: none; }
.bar.hp-shield > div { background: linear-gradient(90deg, #7fa8d8, #d5e7ff); }
.bar.hp-shield span { font-size: 9px; }
.etag.shield { color: #bcd6f7; border-color: rgba(140, 190, 255, 0.55); background: rgba(120, 170, 255, 0.08); }

/* ---- 敵トークンのギミック表現 ---- */
.foe-shield-ring {
  position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 3px solid rgba(165, 205, 255, 0.9);
  box-shadow: 0 0 16px rgba(140, 190, 255, 0.45), inset 0 0 18px rgba(140, 190, 255, 0.3);
  transition: opacity 0.3s;
}
.weak-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 34%, #fff7d6, #ffd84a 55%, #e8a91c);
  box-shadow: 0 0 12px rgba(255, 205, 60, 0.95), 0 0 3px rgba(255, 240, 190, 1);
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: weakPulse 1.25s ease-in-out infinite;
}
@keyframes weakPulse { 50% { box-shadow: 0 0 20px rgba(255, 205, 60, 1), 0 0 5px rgba(255, 240, 190, 1); } }
.weak-dot.locked { animation: none; background: radial-gradient(circle at 38% 34%, #ffffff, #ffe9a8 55%, #ffd84a); box-shadow: 0 0 22px rgba(255, 216, 74, 1), 0 0 6px #fff; }
.enemy-token.enraged { animation: enragePulse 0.85s ease-in-out infinite; }
@keyframes enragePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 90, 58, 0.55), 0 0 14px rgba(255, 70, 40, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(255, 90, 58, 0.95), 0 0 26px rgba(255, 70, 40, 0.65); }
}
.enemy-token.dying { animation: foeDie 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes foeDie { to { transform: scale(1.3); filter: brightness(2.4); opacity: 0; } }
.enemy-token.dying { animation-name: foeDie; }
/* foeDie は placeTokens の transform 指定と競合するため、死亡時は transform をアニメーション側が上書きする */
.sub-token { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25); z-index: 2; }

/* ---- トークンの光沢（ゲーム特有のツヤ） ---- */
.token::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 42%, transparent 62%);
}
.token .token-glyph { position: relative; z-index: 0; }

/* ---- スキル使用可能：光の走り ---- */
.pchar.ready::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 244, 200, 0.4) 50%, transparent 68%);
  background-size: 250% 100%;
  animation: readyShine 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes readyShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.pchar .buff-tag.gold { background: linear-gradient(135deg, #8a6a1f, #d8b84a); color: #1d1503; }

/* ---- キャラカードの光沢＋レアリティ枠 ---- */
.char-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 38%, transparent 55%);
}
.char-card .char-meta { position: relative; z-index: 2; }
.char-card.rar-5 { border-color: rgba(255, 216, 74, 0.8); box-shadow: 0 0 0 1px rgba(255, 216, 74, 0.4), 0 0 18px rgba(255, 190, 40, 0.22); }
.char-card.rar-4 { border-color: rgba(196, 208, 238, 0.55); box-shadow: 0 0 0 1px rgba(196, 208, 238, 0.18); }
.gacha-results .char-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 250, 225, 0.45) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: cardSweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes cardSweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.detail-img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* ---- クリティカル時のひと際大きな揺れ（上限は小さく保つ） ---- */
.arena.hit-shake-crit { animation: arenaShakeCrit 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes arenaShakeCrit { 22% { transform: translate(3px, 1.5px); } 55% { transform: translate(-2.5px, -1.5px); } 82% { transform: translate(1px, 0.5px); } }

@media (prefers-reduced-motion: reduce) {
  .arena.hit-shake-crit { animation: none; }
  .pchar.ready::after, .gacha-results .char-card::after { animation: none; }
  .weak-dot { animation: none; }
  .enemy-token.enraged { animation: none; }
}

/* ================= 指名解放の視覚化（2026-11-01 召喚の分かりやすさパス） =================
   基準: 文章を読まずに見た目で分かる。通貨アイコン＋数字が主役。 */
/* アズコイン アイコン（金貨＋A） */
.azc-ico { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex: none; }
.azc-ico svg { width: 100%; height: 100%; display: block; }
.azc-ico circle { fill: #d8b44a; stroke: #8a6d1f; stroke-width: 1.6; }
.azc-ico text { fill: #241a02; font-size: 11.5px; font-weight: 800; font-family: inherit; }
/* キャラ名の分割表示（称号＝小／本体名＝1行・割れない） */
.cn-title { display: block; font-size: 9.5px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cn-main { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
/* スケルトン（数値の取得中） */
.skl { display: inline-block; border-radius: 6px; background: linear-gradient(100deg, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 60%); background-size: 200% 100%; animation: sklMove 1.2s linear infinite; vertical-align: middle; }
.skl-num { width: 74px; height: 22px; }
.skl-num.sm { width: 52px; height: 16px; }
@keyframes sklMove { from { background-position: 180% 0; } to { background-position: -20% 0; } }
/* 残高パネル */
.bal-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.bal-cell { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; padding: 10px 12px 12px; }
.bal-lab { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sub); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.bal-sub { display: block; font-size: 10.5px; color: var(--gold); margin-top: 2px; white-space: nowrap; }
.bal-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.25; margin-top: 3px; font-variant-numeric: tabular-nums; }
.bal-num small { font-size: 13px; color: var(--sub); font-weight: 700; }
.bal-state { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.state-chip { font-size: 11px; font-weight: 800; color: #241a02; background: var(--gold); border-radius: 999px; padding: 3px 10px; }
.bal-state-txt { font-size: 12px; color: var(--sub); }
.bal-cta { display: block; text-align: center; margin-top: 10px; text-decoration: none; }
/* ステップ表示（タップの一本道） */
.lib-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.lstep { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sub); opacity: 0.55; }
.lstep i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; }
.lstep.on { color: var(--gold); opacity: 1; }
.lstep.on i { background: var(--gold); border-color: var(--gold); color: #241a02; }
.larr { color: var(--sub); opacity: 0.5; font-size: 14px; }
/* フォーカスパネル（指名中の仲間） */
.focus-panel { margin-top: 14px; background: var(--panel); border: 1px solid rgba(216,184,74,0.5); border-radius: 16px; padding: 12px; }
.fp-main { display: flex; gap: 12px; align-items: center; }
.fp-main img { width: 62px; height: 72px; object-fit: cover; object-position: top; border-radius: 10px; flex: none; }
.fp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-title { display: block; font-size: 10.5px; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-name { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.lib-gauge.big { height: 12px; margin: 9px 0 7px; }
.fp-remain { font-size: 14px; color: var(--sub); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fp-remain b { color: var(--gold); font-size: 24px; font-weight: 800; line-height: 1; }
.fp-frac { font-size: 11.5px; }
.focus-none { text-align: center; border-style: dashed; border-color: var(--panel-line); }
.focus-none-txt { font-size: 15px; font-weight: 800; margin: 6px 0 0; }
.focus-none-sub { font-size: 12px; color: var(--sub); margin: 7px 0 4px; line-height: 1.7; }
/* 不足の見え方 */
.shortfall { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: rgba(216,184,74,0.1); border: 1px solid rgba(216,184,74,0.45); border-radius: 12px; padding: 9px 11px; }
.sf-txt { flex: 1; font-size: 13px; }
.sf-txt b { color: var(--gold); font-size: 16px; }
.sf-btn { text-decoration: none; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
/* ジェム換算（従の置き方） */
.bal-cell-wide { grid-column: 1 / -1; }
/* ジェムで入れる（第2ラウンド）: コイン側と同型の正規の操作群。
   見出しに所持数を置き、各ボタンに「払う個数 → 増えるゲージ」を明記する。 */
.gem-sec { margin-top: 14px; border-top: 1px solid var(--panel-line); padding-top: 12px; }
.gem-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gem-sec-name { font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gem-own { font-size: 12px; color: var(--sub); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gem-own b { color: #8fd8ff; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gem-actions { margin-top: 9px; }
.gem-short .sf-btn { cursor: pointer; }
.gem-arrow { opacity: 0.6; }
.gem-plus { color: var(--ink); }
/* 仲間カード（2列・主役） */
.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.pick-card { position: relative; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; overflow: hidden; text-align: left; padding: 0; transition: transform 0.25s; }
.pick-card:active { transform: scale(0.98); }
.pick-card img { width: 100%; aspect-ratio: 3/2.6; object-fit: cover; object-position: top; display: block; }
.pick-card.rar-5 { border-color: rgba(255,216,74,0.55); }
.pick-card.is-target { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold), 0 0 16px rgba(216,184,74,0.25); }
.pick-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--gold); color: #241a02; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.pick-meta { display: block; padding: 8px 10px 10px; }
.pick-name { display: block; font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.pick-line { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.pick-remain { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--sub); }
.pick-remain b { color: var(--gold); font-size: 16.5px; font-weight: 800; }
/* しくみ行 */
.how-row { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 18px; padding: 13px 4px; background: none; border: none; border-top: 1px solid var(--panel-line); color: var(--sub); font-size: 13.5px; font-weight: 700; }
.how-arr { font-size: 17px; }
.how-body { text-align: left; font-size: 13.5px; line-height: 1.9; color: var(--sub); }
.how-body strong { color: var(--ink); }
.how-body p { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { .skl { animation: none; } }

/* ================= ボタンの感触・統一（2026-11-01 質上げパス） =================
   全画面のボタン／行／チップに、同じ「押した感じ」を付ける。
   作法: Apple式の静かな沈み（scale + 明度）だけ。バウンス・跳ね・ドカーン禁止。
   イージングは全アプリ共通の cubic-bezier(0.22, 1, 0.36, 1) に統一する。
   レイアウト・文言・導線は変えない（感触と選択状態の見分けだけ）。 */
:root { --press-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* 押下フィードバックが無かった要素へ付与＋既存のバラバラな遷移を統一 */
.btn-ghost, .back, .seg-btn, .slot, .buy-btn, .profile-row, .assist-chip,
.btn-sound, .how-row, .sf-btn, .az-dock button {
  transition: transform 0.18s var(--press-ease), filter 0.18s var(--press-ease),
    background-color 0.18s var(--press-ease), border-color 0.18s var(--press-ease),
    box-shadow 0.18s var(--press-ease);
}
.btn-gold { transition: transform 0.18s var(--press-ease), box-shadow 0.18s var(--press-ease), filter 0.18s var(--press-ease); }
.char-card, .pick-card { transition: transform 0.18s var(--press-ease), filter 0.18s var(--press-ease), border-color 0.18s var(--press-ease), box-shadow 0.18s var(--press-ease); }
.stage-card { transition: transform 0.18s var(--press-ease), filter 0.18s var(--press-ease); }

/* 押した瞬間：わずかに沈んで明るくなる（無効時は押せない見た目のまま） */
.btn-gold:active:not(:disabled) { transform: scale(0.97); filter: brightness(1.07); }
.btn-ghost:active:not(:disabled) { transform: scale(0.97); filter: brightness(1.25); }
.back:active { transform: scale(0.9); filter: brightness(1.3); }
.seg-btn:active { filter: brightness(1.3); }
.slot:active { transform: scale(0.95); filter: brightness(1.15); }
.buy-btn:active:not(:disabled) { transform: scale(0.94); filter: brightness(1.06); }
.profile-row:active { transform: scale(0.99); filter: brightness(1.18); }
.assist-chip:active { transform: scale(0.96); filter: brightness(1.2); }
.btn-sound:active { transform: scale(0.94); filter: brightness(1.25); }
.how-row:active { filter: brightness(1.35); }
.sf-btn:active { transform: scale(0.96); filter: brightness(1.1); }
.stage-card:active:not(:disabled) { transform: scale(0.985); filter: brightness(1.07); }
.char-card:active, .pick-card:active { transform: scale(0.98); filter: brightness(1.07); }
.profile-btn:active { transform: scale(0.93); filter: brightness(1.15); }
.bonus-claim:active { transform: scale(0.98); filter: brightness(1.08); }

/* ドック: 玉と滑りの仕組みには触らず、アイコンだけが軽く沈む */
.az-dock button .dic { transition: transform 0.18s var(--press-ease), opacity 0.25s; }
.az-dock button:active .dic { transform: scale(0.85); }

/* 小さいボタンのタップ面だけを広げる（見た目の大きさ・レイアウトは不変） */
.back, .btn-sound { position: relative; }
.back::after, .btn-sound::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; }

/* 選択中状態の見分けを少しだけ強くする（色と太さのみ） */
.seg-btn.on { background: rgba(255, 255, 255, 0.16); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* ================= ノースクロール化 2026-11-01（全画面ページスクロール禁止） =================
   ゲームの作法で収める: 章タブ（ステージ）／タブ＋ページ送り（編成・図鑑）／
   欄タブ（ショップ）。文言・導線・数値は不変。寸法は 375×812 実測で詰めた。 */
.view-tabs { margin: 8px 0 2px; }
.view-tabs .seg-btn { padding: 8px 2px; font-size: 12px; white-space: nowrap; }

/* ホーム: 100dvh 計算でなくコンテナ(#app)実寸に合わせる（24pxはみ出しの是正） */
#scr-home.active { height: 100%; }

/* ---- ステージ選択: 1章表示＋2列タイル ---- */
#scr-stages .assist-bar { margin-top: 8px; padding: 7px 10px; }
#scr-stages .assist-chip { padding: 6px 11px; font-size: 12px; }
#scr-stages .assist-note { font-size: 10px; line-height: 1.5; }
#scr-stages .stage-list { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
#scr-stages .chapter-head { grid-column: 1 / -1; margin: 2px 0 0; }
#scr-stages .soon-card { grid-column: 1 / -1; }
#scr-stages .stage-card { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 10px; border-radius: 14px; }
#scr-stages .stage-card .orb { --cell: 30px; }
#scr-stages .stage-enemy { font-size: 13.5px; }
#scr-stages .stage-meta { font-size: 9.5px; line-height: 1.42; }
#scr-stages .stage-state { font-size: 11px; }
#scr-stages .stage-state br { display: none; }

/* ---- 編成・図鑑: タブ＋ページ送り＋カードを締める ---- */
#scr-party .cap-line { line-height: 1.6; }
#scr-party .sec-title { margin: 13px 0 7px; }
#scr-party .slot { aspect-ratio: 1 / 1.02; }
#scr-party .char-grid { gap: 8px; }
#scr-party .char-card img { aspect-ratio: auto; height: 56px; }
#scr-party .char-meta { padding: 5px 8px 7px; }
#scr-party .char-name { min-height: 2.5em; font-size: 11px; }
.grid-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; min-height: 34px; }
.pager-btn { border: 1px solid var(--panel-line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; transition: transform 0.18s var(--press-ease), filter 0.18s var(--press-ease); }
.pager-btn:active:not(:disabled) { transform: scale(0.95); filter: brightness(1.2); }
.pager-btn:disabled { opacity: 0.35; }
.pager-dots { display: flex; gap: 6px; }
.pager-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--panel-line); transition: background 0.3s, width 0.3s var(--press-ease); }
.pager-dot.on { background: var(--gold); width: 16px; }

/* ---- ランキング: 行を締めて全行＋自分を1画面に ---- */
#scr-ranking .rank-list { gap: 6px; margin-top: 6px; }
#scr-ranking .rank-row { padding: 7px 14px; }
#scr-ranking .rank-me { margin-top: 7px; }

/* ---- ショップ: 欄タブ＋各欄を締める ---- */
#scr-shop .shop-banner { margin-top: 6px; padding: 8px 12px; }
#scr-shop .shop-banner-tag { padding: 1px 10px; }
#scr-shop .shop-banner-text { margin-top: 6px; font-size: 12px; line-height: 1.55; }
#scr-shop .shop-wallet { margin-top: 6px; padding: 9px 12px; }
#scr-shop .shop-wallet-head { margin-bottom: 4px; }
#scr-shop .shop-wallet-row { padding: 2px 0; }
#scr-shop .shop-wallet-total { font-size: 17px; }
#scr-shop .shop-wallet-note { margin-top: 4px; line-height: 1.5; }
#shop-pane-gem .shop-sec-note { margin-top: 8px; }
#scr-shop .shop-sec-note { font-size: 11.5px; line-height: 1.6; }
#scr-shop .sec-title { margin: 12px 0 7px; }
#scr-shop .shop-list { gap: 8px; margin-top: 8px; }
#scr-shop .shop-card { padding: 8px 11px; gap: 9px; border-radius: 14px; }
#scr-shop .shop-amt { font-size: 20px; }
#scr-shop .shop-detail { font-size: 11px; line-height: 1.42; }
#shop-pane-gem .shop-yen, #shop-pane-packs .shop-yen { font-size: 15px; }
#scr-shop .shop-notices { margin-top: 4px; }
/* ジェム/コインパックは2列タイルで収める（価格行は下段に回す。
   タイル内では通貨アイコンが種別名と重複するため視覚的にのみ省略し、本文幅を確保する） */
#shop-pane-gem .shop-list, #shop-pane-packs .shop-list { grid-template-columns: 1fr 1fr; }
#shop-pane-gem .shop-card, #shop-pane-packs .shop-card { flex-wrap: wrap; }
#shop-pane-gem .shop-icon, #shop-pane-packs .shop-icon { display: none; }
#shop-pane-gem .shop-price, #shop-pane-packs .shop-price { width: 100%; margin-left: 0; text-align: left; display: flex; align-items: center; gap: 8px; }
#shop-pane-gem .shop-price br, #shop-pane-packs .shop-price br { display: none; }
#shop-pane-gem .soon-btn, #shop-pane-packs .soon-btn,
#shop-pane-gem .buy-btn, #shop-pane-packs .buy-btn { margin-top: 0; margin-left: auto; }
#scr-shop .azs-balance { margin-top: 7px; padding: 6px 13px; }
#scr-shop .azs-balance-num { font-size: 19px; }
#scr-shop .azs-stage { margin-top: 5px; }
#scr-shop .azs-focus { height: 94px; }
#scr-shop .azs-char-ring { width: 78px; height: 78px; }
#scr-shop .azs-focus .shop-ic { width: 66px; height: 66px; }
#scr-shop .azs-info { margin-top: 5px; }
#scr-shop .azs-name { font-size: 18px; margin-top: 2px; }
#scr-shop .azs-effect { margin-top: 4px; font-size: 12px; line-height: 1.5; min-height: 0; }
#scr-shop .azs-price { font-size: 20px; margin-top: 2px; }
#scr-shop .azs-owned { margin-top: 2px; font-size: 12px; }
#scr-shop .azs-action { margin-top: 5px; padding: 9px 26px; font-size: 15px; }
#scr-shop .azs-subaction { margin-top: 5px; padding: 8px 20px; }
#scr-shop .azs-note { margin-top: 5px; font-size: 11px; line-height: 1.45; }
/* サムネイル列が選択UIそのものであるため、位置ドットは視覚的にのみ省略する */
#scr-shop .azs-dots { display: none; }
#scr-shop .azs-strip { margin-top: 5px; }
#scr-shop .azs-thumb { width: 36px; height: 36px; border-radius: 10px; }
/* サブアクション（強化の実を使う）表示時だけフォーカス段を畳む */
#scr-shop.azs-sub-open .azs-focus { height: 64px; }
#scr-shop.azs-sub-open .azs-char-ring { width: 52px; height: 52px; }
#scr-shop.azs-sub-open .azs-focus .shop-ic { width: 44px; height: 44px; }

/* ================= 召喚・指名解放 アプリ化（2026-11-01） =================
   1画面固定・ページスクロールなし。動くのはキャラ選択カルーセルだけ。
   残高／ゲージ／あと○○／投入ボタンは常時見える固定部に置く。 */
/* ヒーローはキャッチ1行に圧縮（オーブはカルーセルが主役になる） */
#scr-gacha.lib-on .gacha-hero { padding: 8px 0 0; }
#scr-gacha.lib-on .gacha-orbs { display: none; }
#scr-gacha.lib-on .gacha-catch { font-size: 16.5px; margin: 0; }
.lib-box.lib-app { margin-top: 4px; border-top: none; padding-top: 0; }
/* 残高パネル: 3セル1行・常時表示 */
.lib-app .bal-panel { grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 8px; }
.lib-app .bal-cell { padding: 7px 9px 8px; border-radius: 12px; }
.lib-app .bal-lab { font-size: 10px; gap: 4px; }
.lib-app .bal-num { font-size: 19px; margin-top: 1px; line-height: 1.2; }
.lib-app .bal-num small { font-size: 11.5px; }
.lib-app .bal-num .skl-num { width: 44px; height: 17px; }
.lib-app .bal-cta { margin-top: 8px; padding: 11px 16px; font-size: 14.5px; }
.lib-app .bal-state { margin-top: 8px; }
/* ステップ表示は細く、状態は右端に寄せる */
.lib-app .lib-steps { margin-top: 9px; justify-content: flex-start; gap: 5px; }
.lib-app .lstep { font-size: 11px; gap: 4px; }
.lib-app .lstep i { width: 17px; height: 17px; font-size: 10.5px; }
.lib-app .lib-state { margin-left: auto; font-size: 11px; }
/* キャラ選択カルーセル（画面内で唯一動く部分） */
.lib-carousel { margin: 4px -14px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.lib-carousel::-webkit-scrollbar { display: none; }
.lib-track { display: flex; gap: 10px; width: max-content; min-width: 100%; box-sizing: border-box; padding: 6px calc(50% - 52px); }
.lib-slide { flex: none; width: 104px; scroll-snap-align: center; background: none; border: none; padding: 0; text-align: center; opacity: 0.5; transform: scale(0.85); transition: transform 0.3s var(--press-ease), opacity 0.3s var(--press-ease); }
.lib-slide.is-center { opacity: 1; transform: scale(1); }
.lib-slide .sl-img { display: block; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--panel-line); background: var(--panel); }
.lib-slide .sl-img img { width: 104px; height: 106px; object-fit: cover; object-position: top; display: block; }
.lib-slide.rar-5 .sl-img { border-color: rgba(255, 216, 74, 0.4); }
.lib-slide.is-center .sl-img { border-color: rgba(216, 184, 74, 0.7); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(216, 184, 74, 0.35); }
.lib-slide.is-target .sl-img { border-color: var(--gold); }
.sl-badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--gold); color: #241a02; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.sl-name { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-line { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 1px; font-size: 11px; color: var(--sub); white-space: nowrap; }
.sl-line .azc-ico { width: 13px; height: 13px; }
.sl-remain { display: inline-flex; align-items: center; gap: 3px; }
.sl-remain b { color: var(--gold); font-size: 12.5px; font-weight: 800; }
/* 詳細（選択中のキャラ） */
.lib-detail { margin-top: 4px; background: var(--panel); border: 1px solid rgba(216, 184, 74, 0.5); border-radius: 14px; padding: 8px 12px 9px; }
.d-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.d-namebox { min-width: 0; display: flex; flex-direction: column; }
.d-name { font-size: 18px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-remain { font-size: 13px; color: var(--sub); display: flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.d-remain b { color: var(--gold); font-size: 23px; font-weight: 800; line-height: 1; }
.lib-detail .lib-gauge.big { height: 10px; margin: 7px 0 4px; }
.d-frac { font-size: 11px; color: var(--sub); min-height: 13px; }
/* 投入ボタン群（固定部） */
.lib-app .lib-actions { margin-top: 8px; flex-wrap: nowrap; gap: 7px; }
.lib-app .lib-chip { flex: 1; padding: 9px 6px; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.lib-app .lib-chip.grow { flex: 1.45; }
.lib-app .shortfall { margin-top: 8px; padding: 7px 10px; }
.lib-app .sf-txt { font-size: 12px; }
.lib-app .sf-btn { padding: 7px 12px; font-size: 12px; }
/* ジェム投入: 4チップ1行・2段組（払う個数 → 増えるゲージ） */
.lib-app .gem-sec { margin-top: 8px; padding-top: 8px; }
.lib-app .gem-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 0; }
.lib-app .gem-actions .lib-chip { flex-direction: column; gap: 0; padding: 6px 2px 7px; line-height: 1.35; }
.gc-cost { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; }
.gem-plus { font-size: 10.5px; color: var(--gold); font-weight: 700; }
.gem-plus.dark { color: #241a02; }
/* 未指名のときの指名ボタン */
.lib-designate { display: block; width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; }
.lib-designate:disabled { filter: grayscale(0.7) brightness(0.7); box-shadow: none; }
/* 下部の副導線（育成加速／しくみ）は1行ボタンに畳む */
.lib-subrows { display: flex; gap: 8px; margin-top: 9px; }
.lib-subrow { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 11px; font-size: 12.5px; font-weight: 700; color: var(--sub); transition: transform 0.18s var(--press-ease), filter 0.18s var(--press-ease); }
.lib-subrow:active { transform: scale(0.98); filter: brightness(1.2); }
.lib-app #lib-error { margin-top: 8px; }
/* 召喚アプリ化: 折返しで高さが増える箇所を1行に固定（2026-11-01 追補） */
.lib-app .lib-steps { flex-wrap: nowrap; }
.lib-app .lstep { white-space: nowrap; }
.lib-app .lib-state { white-space: nowrap; }
.lib-subrow { white-space: nowrap; font-size: 12px; overflow: hidden; }

/* ================= 召喚・指名解放 品質パス（2026-11-01） =================
   お金が動く画面の格上げ。構造（1画面固定・動くのはカルーセルだけ）と
   数値は前パスのまま。上げるのは見た目と演出だけ：
   ①星空と観測所の気配 ②中央キャラの存在感（大きく・属性の後光・足下の光）
   ③ゲージの光と数字の同期 ④解放セレモニーの格上げ。
   動きは transform / opacity 中心、「スッ」だけ。全体の寸法は締めて相殺し、
   375×812 ノースクロールを維持する。 */

/* ---- ① 世界観: 星空レイヤー（静止画グラデーション＋明滅は opacity のみ） ---- */
#scr-gacha.lib-on { position: relative; }
#scr-gacha.lib-on::before {
  content: ""; position: absolute; left: -14px; right: -14px; top: 0; height: 440px;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(1.6px 1.6px at 7% 10%, rgba(255, 255, 255, 0.85), transparent 65%),
    radial-gradient(1.1px 1.1px at 19% 26%, rgba(255, 255, 255, 0.45), transparent 65%),
    radial-gradient(1.3px 1.3px at 31% 7%, rgba(214, 222, 255, 0.6), transparent 65%),
    radial-gradient(1px 1px at 44% 19%, rgba(255, 255, 255, 0.4), transparent 65%),
    radial-gradient(1.5px 1.5px at 57% 5%, rgba(255, 244, 200, 0.7), transparent 65%),
    radial-gradient(1.1px 1.1px at 66% 24%, rgba(255, 255, 255, 0.45), transparent 65%),
    radial-gradient(1.4px 1.4px at 76% 11%, rgba(255, 255, 255, 0.65), transparent 65%),
    radial-gradient(1px 1px at 85% 30%, rgba(214, 222, 255, 0.4), transparent 65%),
    radial-gradient(1.6px 1.6px at 93% 8%, rgba(255, 255, 255, 0.8), transparent 65%),
    radial-gradient(1.1px 1.1px at 13% 44%, rgba(255, 255, 255, 0.35), transparent 65%),
    radial-gradient(1.2px 1.2px at 90% 47%, rgba(255, 255, 255, 0.4), transparent 65%),
    radial-gradient(72% 44% at 50% -8%, rgba(96, 84, 190, 0.20), transparent 70%),
    radial-gradient(48% 30% at 50% 33%, rgba(216, 184, 74, 0.055), transparent 70%);
  animation: libStars 5.5s ease-in-out infinite alternate;
}
@keyframes libStars { from { opacity: 0.7; } to { opacity: 1; } }
#scr-gacha.lib-on > * { position: relative; z-index: 1; }

/* ---- 寸法の締め直し（ステージを大きくする分をここで相殺） ---- */
#scr-gacha.lib-on .gacha-hero { padding-top: 3px; }
#scr-gacha.lib-on .gacha-catch { font-size: 15.5px; letter-spacing: 0.14em; }
.lib-app .bal-panel { margin-top: 6px; }
.lib-app .bal-cell { padding: 6px 9px 7px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); }
.lib-app .lib-steps { margin-top: 6px; }
.lib-app .lstep i { width: 16px; height: 16px; }
.lib-app .lib-actions { margin-top: 7px; }
.lib-app .gem-sec { margin-top: 7px; padding-top: 7px; }
.lib-subrows { margin-top: 7px; }
.lib-subrow { padding: 8px 12px; }

/* ---- ② カルーセル: 全スライド同じ舞台（高さ132px）に立ち、中央だけが大きくなる ----
   画像は足下アンカーで拡縮するので、舞台の高さは誰が中央でも変わらない。 */
.lib-carousel { margin-top: 2px; }
.lib-track { padding: 5px calc(50% - 52px); }
.lib-slide { position: relative; z-index: 1; opacity: 0.48; transform: none; transition: opacity 0.3s var(--press-ease); }
.lib-slide.is-center { opacity: 1; z-index: 3; }
.lib-slide .sl-img { height: 132px; border: none; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.lib-slide.is-center .sl-img, .lib-slide.is-target .sl-img { box-shadow: none; border-color: transparent; }
.lib-slide .sl-img::before {
  content: ""; position: absolute; left: 50%; bottom: -6px; z-index: 0;
  width: 156px; height: 156px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--attr) 0%, transparent 66%);
  opacity: 0; transform: translateX(-50%) scale(0.55);
  transition: opacity 0.4s var(--press-ease), transform 0.45s var(--press-ease);
}
.lib-slide.is-center .sl-img::before { opacity: 0.32; transform: translateX(-50%) scale(1); }
.lib-slide.rar-5.is-center .sl-img::before { opacity: 0.5; animation: libHaloBreath 3.4s ease-in-out infinite; }
@keyframes libHaloBreath { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.58; } }
.lib-slide .sl-img::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; z-index: 0;
  width: 122px; height: 22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--attr) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s var(--press-ease);
}
.lib-slide.is-center .sl-img::after { opacity: 0.36; }
.lib-slide.rar-5.is-center .sl-img::after { opacity: 0.55; }
.lib-slide .sl-pic {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  width: 104px; height: 106px; border-radius: 13px;
  transform: translateX(-50%) scale(0.8); transform-origin: 50% 100%;
  transition: transform 0.34s var(--press-ease), box-shadow 0.34s var(--press-ease);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.lib-slide .sl-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 13px; border: 1px solid var(--panel-line); }
.lib-slide.rar-5 .sl-pic img { border-color: rgba(255, 216, 74, 0.4); }
.lib-slide.is-center .sl-pic { transform: translateX(-50%) scale(1.245); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(216, 184, 74, 0.16); }
.lib-slide.rar-5.is-center .sl-pic { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 190, 40, 0.3); }
.lib-slide.rar-5.is-center .sl-pic img { border-color: rgba(255, 216, 74, 0.85); }
.lib-slide.is-target .sl-pic img { border-color: var(--gold); }
.lib-slide .sl-badge { z-index: 2; }
.sl-name { margin-top: 4px; }
.lib-slide.is-center .sl-name { color: #ffffff; }
.lib-slide.is-center .sl-line .rarity { text-shadow: 0 0 10px rgba(255, 216, 74, 0.5); }

/* ---- 詳細パネル: 属性の光のライン＋レアリティの格 ---- */
.lib-detail { position: relative; overflow: hidden; margin-top: 3px; padding: 7px 12px 8px;
  background: linear-gradient(180deg, rgba(25, 25, 50, 0.72), rgba(13, 13, 28, 0.72)); }
.lib-detail::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--attr) 50%, transparent); opacity: 0.55;
}
.lib-detail.rar-5 { border-color: rgba(255, 216, 74, 0.78); box-shadow: 0 0 18px rgba(255, 190, 40, 0.13), 0 10px 26px rgba(0, 0, 0, 0.35); }
.lib-detail.rar-4 { border-color: rgba(196, 208, 238, 0.5); }
.d-name { font-size: 17px; }
.lib-detail .lib-gauge.big { margin: 6px 0 3px; }

/* ---- ③ ゲージ: 光の芯＋投入時の光の走り＋満タン間際の静かな熱 ---- */
.lib-gauge.big { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.lib-gauge.big > span { position: relative; background: linear-gradient(90deg, #d9b64a, #ffe98f 60%, var(--gold)); box-shadow: 0 0 10px rgba(255, 216, 74, 0.35); }
.lib-gauge.big > span.gauge-flash::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: libGaugeSweep 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes libGaugeSweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.lib-detail.gauge-hot .lib-gauge.big > span { animation: libGaugeHot 1.7s ease-in-out infinite; }
@keyframes libGaugeHot { 0%, 100% { box-shadow: 0 0 8px rgba(255, 216, 74, 0.4); } 50% { box-shadow: 0 0 17px rgba(255, 216, 74, 0.78); } }

/* ---- チップを押した瞬間の光（一度だけ・静か） ---- */
.lib-chip.chip-hit { animation: libChipHit 0.38s var(--press-ease); }
@keyframes libChipHit {
  0% { filter: brightness(1.45); box-shadow: 0 0 0 1.5px rgba(255, 216, 74, 0.8), 0 0 14px rgba(255, 216, 74, 0.35); }
  100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255, 216, 74, 0), 0 0 0 rgba(255, 216, 74, 0); }
}

/* ---- ④ 解放セレモニー: 後光＋光の粒＋名前札 ---- */
.lib-ceremony { position: relative; text-align: center; }
.lc-halo {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--attr) 0%, transparent 66%);
  opacity: 0; transform: translate(-50%, -50%) scale(0.8);
  animation: libCeremonyHalo 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
.lib-ceremony.rar-5 .lc-halo { background: radial-gradient(circle, rgba(255, 216, 74, 0.8) 0%, var(--attr) 46%, transparent 70%); }
@keyframes libCeremonyHalo { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 0.34; transform: translate(-50%, -50%) scale(1); } }
.lib-ceremony.rar-5 .lc-halo { animation-name: libCeremonyHalo5; }
@keyframes libCeremonyHalo5 { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } }
.lc-motes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lc-motes i {
  position: absolute; bottom: 24%; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 6px rgba(255, 220, 120, 0.9);
  opacity: 0; animation: libMote 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes libMote { 0% { opacity: 0; transform: translateY(10px); } 22% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(-52px); } }
.lc-kicker { position: relative; z-index: 1; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--gold); margin: 2px 0 10px; }
.lib-ceremony .gacha-results { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 4px; }
.lib-ceremony .gacha-results .char-card { width: 168px; flex: none; animation: libCeremonyIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes libCeremonyIn { from { opacity: 0; transform: translateY(14px) scale(0.965); } to { opacity: 1; transform: none; } }
.lc-line { position: relative; z-index: 1; margin: 13px 0 0; font-size: 14.5px; }
.lc-line b { color: var(--gold); font-size: 16px; }
.lc-flavor { position: relative; z-index: 1; margin: 5px 0 0; font-size: 12px; color: var(--sub); }
.lib-ceremony .modal-btns { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #scr-gacha.lib-on::before, .lib-slide.rar-5.is-center .sl-img::before,
  .lib-detail.gauge-hot .lib-gauge.big > span, .lc-motes i { animation: none; }
  .lc-halo { animation: none; opacity: 0.45; }
  .lib-ceremony .gacha-results .char-card { animation: none; }
  .lib-chip.chip-hit { animation: none; }
}

/* ================= 召喚・指名解放 品質パス第2弾（2026-11-01） =================
   龍大の実機判定「いいけど、まだ。もっと豪華に派手に！背景も全て。
   ボタンは見えるように！」を受けた格上げ第2弾。
   豪華さ＝光の量と層と密度。動きは滑らかなイージングだけ（バウンス・
   安い点滅なし）。常時アニメーションは transform / opacity 中心に絞る。
   構造・数値は不変。絶対配置の装飾だけを足すので画面高は増えない。
   ボタン類は不透明な地＋強い輪郭に変え、派手な背景の上でも埋もれさせない。 */

/* ---- ① 背景: 星空を濃く、星雲を3色に、舞台裏に回る光の放射と光柱 ---- */
#scr-gacha.lib-on::before {
  height: 640px;
  background:
    radial-gradient(1.8px 1.8px at 6% 8%, rgba(255, 255, 255, 0.95), transparent 65%),
    radial-gradient(1.2px 1.2px at 12% 31%, rgba(188, 210, 255, 0.6), transparent 65%),
    radial-gradient(1.4px 1.4px at 18% 15%, rgba(255, 233, 168, 0.8), transparent 65%),
    radial-gradient(1px 1px at 24% 42%, rgba(255, 255, 255, 0.45), transparent 65%),
    radial-gradient(1.6px 1.6px at 30% 5%, rgba(214, 222, 255, 0.75), transparent 65%),
    radial-gradient(1.1px 1.1px at 37% 22%, rgba(255, 255, 255, 0.5), transparent 65%),
    radial-gradient(1.3px 1.3px at 43% 11%, rgba(255, 244, 200, 0.65), transparent 65%),
    radial-gradient(1px 1px at 50% 34%, rgba(188, 210, 255, 0.45), transparent 65%),
    radial-gradient(1.7px 1.7px at 56% 6%, rgba(255, 255, 255, 0.9), transparent 65%),
    radial-gradient(1.2px 1.2px at 63% 26%, rgba(255, 233, 168, 0.6), transparent 65%),
    radial-gradient(1.4px 1.4px at 70% 13%, rgba(255, 255, 255, 0.6), transparent 65%),
    radial-gradient(1px 1px at 77% 38%, rgba(214, 222, 255, 0.45), transparent 65%),
    radial-gradient(1.6px 1.6px at 83% 7%, rgba(255, 244, 200, 0.8), transparent 65%),
    radial-gradient(1.1px 1.1px at 89% 24%, rgba(255, 255, 255, 0.5), transparent 65%),
    radial-gradient(1.5px 1.5px at 95% 16%, rgba(255, 255, 255, 0.85), transparent 65%),
    radial-gradient(1.2px 1.2px at 9% 55%, rgba(255, 255, 255, 0.4), transparent 65%),
    radial-gradient(1.3px 1.3px at 91% 52%, rgba(188, 210, 255, 0.45), transparent 65%),
    radial-gradient(60% 34% at 16% 2%, rgba(124, 92, 255, 0.30), transparent 70%),
    radial-gradient(56% 32% at 86% 8%, rgba(64, 110, 255, 0.22), transparent 70%),
    radial-gradient(70% 30% at 50% 96%, rgba(38, 178, 190, 0.13), transparent 70%),
    radial-gradient(34% 26% at 50% 47%, rgba(255, 205, 92, 0.13), transparent 70%),
    radial-gradient(74% 46% at 50% -8%, rgba(96, 84, 190, 0.24), transparent 70%);
}
#scr-gacha.lib-on::after {
  content: ""; position: absolute; left: 50%; top: 84px; z-index: 0; pointer-events: none;
  width: 500px; height: 500px; margin-left: -250px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0.05) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: libRaysSpin 80s linear infinite;
}
@keyframes libRaysSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#scr-gacha.lib-on .gacha-catch { text-shadow: 0 0 18px rgba(140, 130, 255, 0.4), 0 2px 12px rgba(0, 0, 0, 0.65); }

/* ---- ② 舞台: 中央キャラを巡る軌道リング＋足下の魔法陣＋漂う光の粒 ---- */
.lib-slide .sl-pic::before, .lib-slide .sl-pic::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 110px; height: 110px; border-radius: 50%;
  border: 1.5px solid transparent;
  opacity: 0; transition: opacity 0.4s var(--press-ease);
}
.lib-slide .sl-pic::before { border-top-color: var(--attr); border-bottom-color: var(--attr); }
.lib-slide .sl-pic::after { border-left-color: var(--attr); border-right-color: var(--attr); }
.lib-slide.is-center .sl-pic::before {
  opacity: 0.65; animation: libOrbit 15s linear infinite;
}
.lib-slide.is-center .sl-pic::after {
  opacity: 0.4; animation: libOrbitRev 21s linear infinite;
}
.lib-slide.rar-4.is-center .sl-pic::before { border-top-color: #c4d2ee; border-bottom-color: #c4d2ee; }
.lib-slide.rar-4.is-center .sl-pic::after { border-left-color: #c4d2ee; border-right-color: #c4d2ee; }
.lib-slide.rar-5.is-center .sl-pic::before {
  border-top-color: #ffd84a; border-bottom-color: #ffd84a; opacity: 0.95;
  animation-duration: 10s;
}
.lib-slide.rar-5.is-center .sl-pic::after {
  border-left-color: #ffd84a; border-right-color: #ffd84a; opacity: 0.6;
  animation-duration: 14s;
}
@keyframes libOrbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes libOrbitRev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }
/* 足下の魔法陣: 同心リング＋中心の光（第1弾の床グローから作り替え）
   第1弾の ::after は left:50% のまま中心合わせが無く、柔らかいグローでは
   目立たなかったが、リング状にしたことで右に寄って見えたため中央寄せする */
.lib-slide .sl-img::after {
  width: 176px; height: 44px; bottom: -12px; transform: translateX(-50%);
  background:
    radial-gradient(50% 50% at 50% 50%, transparent 55%, var(--attr) 57.5%, var(--attr) 59.5%, transparent 62%),
    radial-gradient(50% 50% at 50% 50%, transparent 34%, var(--attr) 36.5%, transparent 39.5%),
    radial-gradient(50% 50% at 50% 50%, var(--attr) 0%, transparent 68%);
}
.lib-slide.rar-5.is-center .sl-img::after { animation: libCirclePulse 3.6s ease-in-out infinite; }
@keyframes libCirclePulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.85; } }
.lib-slide.is-center .sl-img::before { opacity: 0.4; }
.lib-slide.rar-5.is-center .sl-img::before { opacity: 0.6; }
/* 漂う光の粒（舞台まわり・9つだけ・transform/opacity のみ） */
.lib-box.lib-app { position: relative; }
.lib-motes { position: absolute; left: -6px; right: -6px; top: 84px; height: 228px; z-index: 0; overflow: hidden; pointer-events: none; }
.lib-motes i {
  position: absolute; bottom: 10%; width: 3.5px; height: 3.5px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 7px rgba(255, 220, 120, 0.9);
  opacity: 0; animation: libMoteFloat 7s ease-in-out infinite;
}
.lib-motes i:nth-child(3n) { background: #bcd2ff; box-shadow: 0 0 7px rgba(160, 190, 255, 0.9); }
@keyframes libMoteFloat {
  0% { opacity: 0; transform: translate3d(0, 12px, 0); }
  30% { opacity: 0.85; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(7px, -66px, 0); }
}
.lib-app .bal-panel, .lib-app .bal-cta, .lib-app .lib-steps, .lib-app .lib-carousel,
.lib-app .lib-detail, .lib-app .lib-actions, .lib-app .gem-sec, .lib-app .shortfall,
.lib-app .lib-subrows, .lib-app #lib-error { position: relative; z-index: 1; }

/* ---- ③ 詳細パネル: ★5 の斜めの光の走り＋名前のグロー ---- */
.lib-detail.rar-5::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 236, 170, 0.11) 50%, transparent 58%);
  background-size: 280% 100%;
  animation: libSheen 4.6s ease-in-out infinite;
}
@keyframes libSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -130% 0; } }
.lib-detail.rar-5 .d-name { text-shadow: 0 0 15px rgba(255, 214, 90, 0.4); }
.lib-detail.rar-4::before { opacity: 0.8; }

/* ---- ④ ゲージの宝石感: 多段グラデ＋芯の光＋先端の宝石＋満タン間際のシマー ---- */
.lib-gauge.big { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 216, 74, 0.32); }
.lib-gauge.big > span {
  background: linear-gradient(90deg, #8a6a1c, #d8b84a 34%, #ffe98f 62%, #fff3c4 82%, #d8b84a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(120, 84, 10, 0.45), 0 0 12px rgba(255, 216, 74, 0.42);
}
.lib-gauge.big > span::before {
  content: ""; position: absolute; right: -2px; top: 50%; pointer-events: none;
  width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff8dd 0%, rgba(255, 220, 120, 0.9) 42%, transparent 72%);
}
.lib-detail.gauge-hot .lib-gauge.big > span {
  background-size: 200% 100%;
  animation: libGaugeHot2 1.7s ease-in-out infinite;
}
@keyframes libGaugeHot2 {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(120, 84, 10, 0.45), 0 0 9px rgba(255, 216, 74, 0.45); background-position: 0% 0; }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(120, 84, 10, 0.45), 0 0 19px rgba(255, 216, 74, 0.85); background-position: 100% 0; }
}

/* ---- ⑤ ボタンは埋もれさせない: 不透明な地・強い輪郭・濃い影 ---- */
.lib-app .lib-chip.btn-ghost, .lib-boost-row .lib-chip.btn-ghost {
  background: linear-gradient(180deg, #28284e, #15152e);
  border-color: rgba(214, 222, 255, 0.38); color: #ffffff; font-weight: 700;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.lib-app .lib-chip:disabled { opacity: 0.62; filter: saturate(0.55); }
.lib-app .btn-gold, .lib-ceremony .btn-gold {
  background: linear-gradient(180deg, #f4e294, #e3c565 45%, var(--gold) 68%, #a8842f);
  box-shadow: 0 8px 24px rgba(216, 184, 74, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(146, 110, 26, 0.5);
}
.lib-subrow {
  background: linear-gradient(180deg, #222244, #12122a);
  border-color: rgba(214, 222, 255, 0.24); color: #eceaf7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lib-subrow .how-arr { color: var(--gold); }
.lib-app .bal-cell {
  background: linear-gradient(180deg, rgba(40, 40, 78, 0.88), rgba(18, 18, 40, 0.88));
  border-color: rgba(214, 222, 255, 0.16);
}
.lib-app .bal-num { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.lib-app .lstep.on i { box-shadow: 0 0 10px rgba(216, 184, 74, 0.6); }

/* ---- ⑥ 解放セレモニーの規模: 回る光線＋光柱＋広がる輪＋カードのグロー ---- */
.lib-ceremony { overflow: hidden; }
.lib-ceremony::before {
  content: ""; position: absolute; left: 50%; top: 158px; z-index: 0; pointer-events: none;
  width: 450px; height: 450px; margin: -225px 0 0 -225px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 160, 0.075) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 64%);
  mask-image: radial-gradient(circle, #000 0%, transparent 64%);
  animation: libRaysSpin 48s linear infinite;
}
.lib-ceremony::after {
  content: ""; position: absolute; left: 50%; top: -16px; bottom: -16px; z-index: 0; pointer-events: none;
  width: 176px; margin-left: -88px; opacity: 0.55;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 232, 170, 0.11) 30%, rgba(255, 232, 170, 0.16) 55%, transparent 100%);
}
.lib-ceremony.rar-5::after { opacity: 0.95; }
.lc-ring {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 198px; height: 198px; margin: -99px 0 0 -99px; border-radius: 50%;
  border: 1.5px solid rgba(255, 224, 150, 0.85); opacity: 0;
  animation: libRing 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.lc-ring.r2 { border-color: var(--attr); animation-delay: 0.34s; animation-duration: 1.75s; }
@keyframes libRing {
  0% { opacity: 0; transform: scale(0.6); }
  22% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.52); }
}
.lib-ceremony .gacha-results .char-card {
  position: relative; z-index: 1;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 214, 90, 0.16);
}
.lib-ceremony.rar-5 .gacha-results .char-card {
  border-color: rgba(255, 216, 74, 0.9);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 48px rgba(255, 196, 48, 0.38);
}
.lc-halo { width: 300px; height: 300px; }
.lc-kicker { text-shadow: 0 0 13px rgba(255, 216, 74, 0.5); }
.lc-kicker::before, .lc-kicker::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 36px; height: 1px; margin: 0 10px 2px;
}
.lc-kicker::before { background: linear-gradient(90deg, transparent, rgba(255, 216, 74, 0.75)); }
.lc-kicker::after { background: linear-gradient(90deg, rgba(255, 216, 74, 0.75), transparent); }
.lc-motes i { box-shadow: 0 0 9px rgba(255, 220, 120, 1); }

@media (prefers-reduced-motion: reduce) {
  #scr-gacha.lib-on::after, .lib-ceremony::before,
  .lib-slide.is-center .sl-pic::before, .lib-slide.is-center .sl-pic::after,
  .lib-slide.rar-5.is-center .sl-img::after, .lib-motes i,
  .lib-detail.rar-5::after, .lc-ring { animation: none; }
  .lib-slide.is-center .sl-pic::before { opacity: 0.4; }
  .lib-slide.is-center .sl-pic::after { opacity: 0.25; }
  .lc-ring { display: none; }
}

/* ================= 冒険UIゲーム化 2026-11-02 =================
   オーナー実機指摘（冒険ページが書類みたい／開始画面がちゃっちぃ／
   ドックの金の玉が文字とボタンに被る）への対応。対象は3点だけ:
   ① ステージ選択をマップ型に（章の世界のアート全面＋道筋のノード）
   ② バトル前画面 #scr-versus 新設（敵の世界が全面、味方と出発ボタン1つ）
   ③ 召喚（指名解放）の縦寸法を詰め直し、ジェム行を金の玉の帯から外す
   ステージデータ・報酬・進行・課金・付与の数値と経路は一切変えない。
   寸法の担保は verify-azutoro/adventure-ui/geom.mjs（実コードの寸法検証）。 */

/* ---- ① ステージ選択: 世界が全面、HUD はその上に浮く ---- */
#scr-stages { position: relative; overflow: hidden; }
#scr-stages.active { display: flex; flex-direction: column; height: 100%; }
#scr-stages .stages-bg {
  position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; z-index: 0;
  background-size: cover; background-position: top center; background-color: #0d0d20;
}
#scr-stages .stages-bg.soon { background-image: none; background: radial-gradient(120% 90% at 50% 0%, #1c1c3c, #0a0a16 65%); }
.stages-bg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 6, 18, 0.58) 0%, rgba(6, 6, 18, 0.22) 30%, rgba(6, 6, 18, 0.42) 62%, rgba(6, 6, 18, 0.9) 100%); }
#stages-bg.sea .stages-bg-shade { background: linear-gradient(180deg, rgba(2, 10, 28, 0.62) 0%, rgba(2, 16, 38, 0.25) 30%, rgba(2, 14, 34, 0.5) 62%, rgba(1, 8, 22, 0.93) 100%); }
#scr-stages > .subbar, #scr-stages > .assist-bar, #scr-stages > .view-tabs, #scr-stages > #stage-list { position: relative; z-index: 1; }
#scr-stages .subbar h2 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
#scr-stages .assist-bar { background: rgba(10, 10, 24, 0.68); backdrop-filter: blur(6px); }
#scr-stages .view-tabs { background: rgba(8, 8, 20, 0.55); backdrop-filter: blur(6px); }

/* マップ領域（flex で残り高さを全部使う＝構造的にスクロールしない） */
#scr-stages #stage-list { display: block; position: relative; flex: 1; min-height: 0; margin: 0; }
.smap-head { position: absolute; top: 4px; right: 4px; z-index: 3; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-align: right; pointer-events: none; }
.smap-chapter { font-size: 17px; font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92); }
.smap-bossname { font-size: 11px; font-weight: 700; color: #ffd98a; letter-spacing: 0.1em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.92); }
.smap-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.smap-path polyline { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.smap-path polyline.done { stroke: var(--gold); stroke-dasharray: none; stroke-width: 3.5; filter: drop-shadow(0 0 5px rgba(216, 184, 74, 0.65)); }

/* 道筋のノード: 敵の顔（属性リング）＋面ラベル＋クリア★。現在の面が主役に光る */
.snode { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 96px; padding: 0; pointer-events: none; }
.snode-ring, .snode-label { pointer-events: auto; }
.snode.locked .snode-ring, .snode.locked .snode-label { pointer-events: none; }
.snode-ring { position: relative; width: 60px; height: 60px; flex: none; border-radius: 50%; border: 3px solid var(--attr, #888); overflow: hidden; background: #171730; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(0, 0, 0, 0.35); transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.snode-ring img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.snode-ring i { font-style: normal; font-size: 23px; font-weight: 800; color: var(--attr, #fff); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65); }
.snode:active .snode-ring { transform: scale(0.92); }
.snode-label { margin-top: -9px; z-index: 2; background: rgba(8, 8, 20, 0.88); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.snode-name { margin-top: 4px; max-width: 158px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); }
.snode-star { margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.92); white-space: nowrap; }
.snode-check { position: absolute; top: 5px; right: 5px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: #2f9e4f; border: 2px solid #d9ffe2; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.snode-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 5, 12, 0.55); font-size: 19px; }
.snode.locked .snode-ring img { filter: grayscale(0.85) brightness(0.55); }
.snode.locked { opacity: 0.8; }
.snode.current .snode-ring { border-color: #fff; animation: snodePulse 1.8s ease-in-out infinite; }
.snode.current .snode-label { background: var(--gold); color: #241a02; border-color: #ffe98f; }
@keyframes snodePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 13px rgba(255, 216, 74, 0.5), 0 8px 18px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 2.5px var(--gold), 0 0 27px rgba(255, 216, 74, 0.95), 0 8px 18px rgba(0, 0, 0, 0.55); }
}
/* BOSS 面: 大きく、金の二重枠＋炎の後光で別格に */
.snode.boss .snode-ring { width: 86px; height: 86px; border-width: 4px; border-color: #ffd84a; box-shadow: 0 0 0 2.5px rgba(201, 58, 46, 0.85), 0 0 32px rgba(255, 90, 58, 0.5), 0 10px 22px rgba(0, 0, 0, 0.6); }
.snode.boss .snode-label { background: linear-gradient(180deg, #ff7a4d, #c93a2e); color: #fff; border-color: rgba(255, 255, 255, 0.45); font-size: 11px; padding: 3px 10px; }
.snode.boss .snode-name { font-size: 13.5px; color: #ffd98a; }
.snode.boss .snode-check { top: 10px; right: 10px; }
/* 未公開章のパネル（世界色の上に浮かせる） */
.smap-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 0 24px; }
.smap-soon-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.3em; color: #241a02; background: var(--gold); border-radius: 999px; padding: 4px 13px 4px 16px; }
.smap-soon-name { font-size: 24px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85); }
.smap-soon-boss { font-size: 13px; color: var(--sub); }
/* 背の低い画面（667級）ではノードを一回り締める */
@media (max-height: 700px) {
  .snode-ring { width: 52px; height: 52px; }
  .snode.boss .snode-ring { width: 74px; height: 74px; }
  .snode-name { font-size: 11px; }
  .smap-chapter { font-size: 15.5px; }
}

/* ---- ② バトル前画面 VERSUS: 敵の世界が全面、情報は下部に浮く ----
   ドック対象外の画面（dock.js の DEST に無い）＝ドック自体が出ない。
   CENTER チップは戦闘画面と同じ作法でこの画面の間だけ隠す。 */
body:has(#scr-versus.active) #azc-chip, body:has(#scr-versus.active) #azc-menu { display: none !important; }
#scr-versus.active { display: flex; flex-direction: column; height: 100%; }
.vs-wrap { position: relative; flex: 1; min-height: 0; margin: 0 -14px; overflow: hidden; background: #0d0d20; display: flex; flex-direction: column; }
.vs-bg { position: absolute; inset: 0; }
.vs-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; animation: vsBgIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes vsBgIn { from { transform: scale(1.07); opacity: 0.55; } to { transform: none; opacity: 1; } }
.vs-kanji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 150px; font-weight: 800; color: rgba(255, 255, 255, 0.88); text-shadow: 0 10px 44px rgba(0, 0, 0, 0.65); }
.vs-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 6, 18, 0.52) 0%, rgba(6, 6, 18, 0.05) 30%, rgba(6, 6, 18, 0.48) 58%, rgba(6, 6, 18, 0.94) 100%); }
.vs-wrap.sea .vs-shade { background: linear-gradient(180deg, rgba(2, 10, 28, 0.55) 0%, rgba(2, 16, 38, 0.06) 30%, rgba(2, 14, 34, 0.55) 58%, rgba(1, 8, 22, 0.95) 100%); }
.vs-wrap.boss .vs-shade { background: linear-gradient(180deg, rgba(20, 4, 4, 0.5) 0%, rgba(6, 6, 18, 0.05) 30%, rgba(10, 4, 10, 0.5) 58%, rgba(4, 2, 8, 0.95) 100%); }
.vs-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; }
.vs-back { background: rgba(8, 8, 22, 0.62); backdrop-filter: blur(6px); }
.vs-stage-chip { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; background: rgba(8, 8, 22, 0.62); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 5px 12px; backdrop-filter: blur(6px); }
.vs-body { position: relative; z-index: 2; margin-top: auto; padding: 0 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vs-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.5em; padding-left: 0.5em; color: #ff9a80; text-shadow: 0 0 15px rgba(255, 90, 58, 0.85); margin-bottom: 5px; }
.vs-kicker[hidden] { display: none; }
.vs-name { font-size: 29px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.28; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.92); }
.vs-wrap.boss .vs-name { font-size: 31px; color: #ffe9b0; }
.vs-intro { margin: 9px 0 0; font-size: 13px; line-height: 1.7; color: #ece8da; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92); max-width: 322px; }
.vs-intro[hidden] { display: none; }
.vs-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 13px; }
.vs-stat { display: inline-flex; align-items: center; gap: 4px; background: rgba(8, 8, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 999px; padding: 5px 11px; font-size: 12px; white-space: nowrap; backdrop-filter: blur(6px); }
.vs-stat b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vs-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.vs-reward { margin-top: 11px; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.92); }
.vs-party-row { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.vs-party-lab { font-size: 10.5px; letter-spacing: 0.3em; padding-left: 0.3em; color: #c9c6d8; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.vs-party { display: flex; justify-content: center; }
.vs-token { width: 50px; height: 50px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); }
.vs-token + .vs-token { margin-left: -8px; }
.vs-scroll { font-size: 11px; font-weight: 800; color: #e8c56a; background: rgba(217, 164, 65, 0.16); border: 1px solid rgba(160, 125, 44, 0.75); border-radius: 999px; padding: 3px 10px; }
.vs-scroll[hidden] { display: none; }
.vs-cta { width: 100%; max-width: 330px; min-height: 58px; margin-top: 17px; font-size: 20px; }
#scr-versus.active .vs-body > * { animation: riseIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
#scr-versus.active .vs-body > *:nth-child(2) { animation-delay: 0.04s; }
#scr-versus.active .vs-body > *:nth-child(3) { animation-delay: 0.08s; }
#scr-versus.active .vs-body > *:nth-child(4) { animation-delay: 0.12s; }
#scr-versus.active .vs-body > *:nth-child(5) { animation-delay: 0.16s; }
#scr-versus.active .vs-body > *:nth-child(6) { animation-delay: 0.2s; }
#scr-versus.active .vs-body > *:nth-child(7) { animation-delay: 0.24s; }

/* ---- ③ 召喚（指名解放）: 縦の詰め直し ----
   玉の帯（画面下端から 108px + セーフエリア）より上にジェム行を収める。
   カルーセルの舞台は 132px → 126px（中央の拡大率も同比 1.245 → 1.19）。
   残りは各ブロックの余白を 1〜2px ずつ削る分散圧縮で、見た目の比率は保つ。 */
.lib-box.lib-app { margin-top: 2px; }
#scr-gacha.lib-on .gacha-hero { padding-top: 2px; }
.lib-app .bal-panel { margin-top: 5px; }
.lib-app .bal-cell { padding: 5px 9px 6px; }
.lib-app .bal-num { font-size: 18px; }
.lib-app .lib-steps { margin-top: 5px; }
.lib-track { padding: 3px calc(50% - 52px); }
.lib-slide .sl-img { height: 126px; }
.lib-slide.is-center .sl-pic { transform: translateX(-50%) scale(1.19); }
.sl-name { margin-top: 3px; }
.lib-detail { margin-top: 2px; padding: 6px 12px 7px; }
.lib-detail .lib-gauge.big { margin: 5px 0 2px; }
.lib-app .lib-actions { margin-top: 6px; }
.lib-app .shortfall { margin-top: 6px; padding: 6px 10px; }
.lib-app .gem-sec { margin-top: 6px; padding-top: 6px; }
.lib-app .gem-actions .lib-chip { padding: 5px 2px 6px; }
.lib-subrows { margin-top: 6px; }
.lib-subrow { padding: 7px 12px; }

@media (prefers-reduced-motion: reduce) {
  .snode.current .snode-ring { animation: none; }
  .vs-bg img { animation: none; }
  #scr-versus.active .vs-body > * { animation: none; }
}