/*
  style.css
  整理方針:
  - 元の記述順は維持（カスケード崩れ防止）
  - インデント・改行・余白を統一
  - 主要ブロックごとに見出しコメントを追加
  - 明らかな typo のみ修正: r
ba(...) → rgba(...)
*/

/* =========================================================
   01 Base / 共通
   ========================================================= */

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

/* htmlにも背景を入れて、body外側のベージュ透けを防ぐ */
html {
  background: #0f0f0f;
  height: 100%;
}

:root {
  --header-h: 72px;
  --page-header-h: 64px;
}

html {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
}

body {
  background: #0f0f0f;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  position: fixed;
}

/* =========================================================
   PC等の広い画面でもスマホ幅で表示する
   後方の通常スタイル (.bottom-nav { left:0; } 等) が
   メディアクエリより優先されるため !important で強制上書き
   ========================================================= */
@media (min-width: 500px) {
  body {
    max-width: 430px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
  }

  /* position: fixed の要素もbody幅に合わせる */
  .global-user-frame,
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
  }

  /* 全画面フェード/タイトル/スプラッシュなどのオーバーレイ */
  #splash,
  #title-screen,
  #loading,
  #story-root {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
  }
}
/* =========================================================
   04 Screens / Header / Scroll
   ========================================================= */

.screen {
  display: none;
  height: 100dvh;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--page-header-h, 36px));
  padding-bottom: 0;
  box-sizing: border-box;
}

.screen.active {
  display: flex;
}

.screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.header {
  padding: 14px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  flex-shrink: 0;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 90;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  font-family: "Cinzel", "Noto Serif JP", serif;
  letter-spacing: 2px;
  line-height: 1;
  transform: none;
  position: absolute;
  left: 20px;
}

.back-btn {
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
  background: none;
  border: none;
}


/* =========================================================
   02 Splash / Title / Loading
   ========================================================= */

#splash {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  transition: opacity 0.55s ease;
}

#splash img {
  width: 90%;
  max-width: 480px;
  animation: splash-in 0.6s ease forwards;
}

@keyframes splash-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#title-screen {
  position: fixed;
  inset: 0;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 300;
  cursor: pointer;
  transition: opacity 0.8s ease;
}

@keyframes titleLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes titleLogoPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

#title-screen img {
  width: 80%;
  max-width: 600px;
  position: relative;
  z-index: 2;
  animation: titleLogoIn 1.2s ease-out forwards;
}

#title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  z-index: 1;
}

#title-screen.closing img {
  animation: titleLogoOut 0.45s ease-in forwards;
}

@keyframes titleLogoOut {
  to {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(4px);
  }
}

#title-screen.closing #title-tap-hint {
  animation: titleLogoOut 0.45s ease-in forwards;
}

#title-tap-hint {
  position: relative;
  z-index: 2;
  color: rgba(0,0,0,0.55);
  font-size: 14px;
  letter-spacing: 3px;
  animation: blink 1.5s ease-in-out infinite;
  margin-top: 40px;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes blink {
  0%,100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}


/* =========================================================
   02-B Loading
   ========================================================= */

#loading {
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  flex-direction: column;
  gap: 12px;
}

.loading-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  animation: spin 2s linear infinite;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.5));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-txt {
  font-size: 12px;
  color: #666;
  letter-spacing: 4px;
  margin-top: 20px;
}


/* =========================================================
   03 HUD / Global User Frame
   ========================================================= */

.global-user-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  /* メイン画面：背景画像の上に乗るのでグラデーション */
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* 背景が暗い画面（研究所・基地・設定等）は黒ベタ */
.global-user-frame.hud-dark {
  background: rgba(0,0,0,0.85);
}

.global-user-frame.hidden {
  display: none;
}

/* 左ブロック：Lvサークル＋情報 */
.hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.hud-lv-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hud-lv-label {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  font-family: "Cinzel", serif;
  line-height: 1;
}

.hud-lv-num {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  font-family: "Cinzel", serif;
}

.hud-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hud-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

.hud-id {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  line-height: 1;
}

.hud-exp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-exp-bg {
  width: 140px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.hud-exp-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.hud-exp-text {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  font-family: "Cinzel", serif;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 右ブロック：ジェム・コイン（横並び） */
.hud-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  flex-shrink: 0;
  transform: translateY(-6px);
}

.hud-resource {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.45);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 3px 8px 3px 6px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.hud-res-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.hud-res-val {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: "Cinzel", serif;
  letter-spacing: 0.5px;
  line-height: 1;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   05 Main / Favorite
   ========================================================= */

#screen-main {
  /* 完成版背景は使わず、空・建物・エフェクトを独立レイヤー化 */
  background: #f3efe7;
  position: relative;
  padding-top: 0;
  overflow: hidden;
}

#screen-main > * {
  position: relative;
  z-index: 1;
}

.main-top {
  margin-top: 0;
  padding: 0;
  text-align: center;
  flex-shrink: 0;
}

.main-top img {
  mix-blend-mode: lighten;
}


/* =========================================================
   03 Global User Frame
   ========================================================= */

.user-id-badge {
  display: none;
}


/* =========================================================
   05 Main / Favorite
   ========================================================= */

.favorite-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fav-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

#fav-display {
  perspective: 900px;
}


.fav-inner {
  display: flex;
  align-items: flex-end;
  padding: 0 16px 16px;
  gap: 16px;
  flex: 1;
  position: relative;
  z-index: 1;
 transform-style: preserve-3d;

}

.fav-cut-img {
  max-height: 90vh;
  max-width: 100%;

  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.95))
    drop-shadow(0 0 10px rgba(255,255,255,0.04));
}

.fav-img {
  width: 216px;
  height: 216px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.fav-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 6px;
}

.fav-name {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.fav-stats {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

.fav-empty {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}




/* =========================================================
   06 Bottom Nav / Home / Reload
   ========================================================= */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 4px calc(env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.88);
  border-top: 0.5px solid rgba(255,255,255,0.1);
  gap: 0;
  z-index: 50;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.bottom-nav-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s ease;
  filter: brightness(0.55) saturate(0);
  display: block;
}

/* タップ中（疑似クラス）: activeクラスより詳細度を下げて上書きさせない */
.bottom-nav-item:not(.active):active img {
  transform: scale(0.93);
}

/* 選択中（クラス）: translateYが.bottom-navのoveflowにクリップされないよう親もoverflow:visible */
.bottom-nav-item.active img {
  transform: translateY(-4px) scale(1.1);
  filter: brightness(1.0) saturate(1.0);
}

/* ラベル */
.bottom-nav-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1.5px;
  font-family: "Noto Serif JP", serif;
  margin-top: 2px;
  padding-bottom: 6px;
  transition: color 0.2s ease, font-weight 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.bottom-nav-item.active .bottom-nav-label {
  color: #fff;
  font-weight: 500;
}

/* activeボタンがはみ出せるよう親のoverflowを開放 */
.bottom-nav {
  overflow: visible;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes nav-glow-pulse {
  0%,100% {
    filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 8px rgba(255,255,255,0.6)) drop-shadow(0 0 16px rgba(255,255,255,0.3));
  }

  50% {
    filter: brightness(1.2) saturate(1.4) drop-shadow(0 0 14px rgba(255,255,255,0.9)) drop-shadow(0 0 28px rgba(255,255,255,0.55));
  }
}


/* =========================================================
   06 Bottom Nav / Home / Reload
   ========================================================= */

.bottom-nav-badge {
  display: none;
}

.bottom-nav-item.active .bottom-nav-badge {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}


/* =========================================================
   12 Setting
   ========================================================= */

#screen-setting {
  background: #0f0f0f;
  flex-direction: column;
  min-height: 0;
  height: 100dvh;
  padding-bottom: 0;
  overflow: hidden;
}


/* =========================================================
   04 Screens / Header / Scroll
   ========================================================= */

#screen-setting .screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}


/* =========================================================
   12 Setting
   ========================================================= */

.setting-section {
  margin: 16px 20px 0;
}

.setting-section-title {
  font-size: 11px;
  color: #666;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 0.5px solid rgba(255,255,255,0.07);
}

.setting-row-label {
  color: #ddd;
}

.setting-row-sub {
  font-size: 12px;
  color: #666;
}

.setting-row-arrow {
  color: #555;
  font-size: 12px;
}

.setting-danger {
  border-color: rgba(255,80,80,0.2);
}

.setting-danger .setting-row-label {
  color: #ff6666;
}


/* =========================================================
   11 Friend
   ========================================================= */

#screen-friend {
  background: #0f0f0f;
  overflow-y: auto;
  height: 100%;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.friend-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 12px;
}

.friend-empty-icon {
  font-size: 48px;
  opacity: 0.3;
}

.friend-empty-txt {
  font-size: 14px;
  color: #555;
}


/* =========================================================
   99 Other
   ========================================================= */

.id-area {
  flex-shrink: 0;
  padding: 0 16px 12px;
}

.id-box {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12px;
}

.id-box-label {
  color: #666;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.id-btns {
  display: flex;
  gap: 8px;
}

.id-btn {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 10px;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

#screen-summon {
  background: #0f0f0f;
  overflow-y: auto;
}

#screen-summon.active {
  display: flex;
  flex-direction: column;
}

.summon-counter {
  margin: 12px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.counter-label {
  color: #888;
}

.counter-val {
  font-weight: 500;
  color: #ffffff;
}


/* =========================================================
   01 Base / 共通
   ========================================================= */

canvas {
  display: none;
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.summon-btns {
  display: flex;
  gap: 10px;
  padding: 0 20px;
  margin-top: 8px;
}

#summon-standby {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 145;
  background-image: none;
  background-size: auto;
  background-position: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#summon-standby.active {
  display: flex;
}

#summon-standby::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.75) 100% );
}


/* =========================================================
   99 Other
   ========================================================= */

.standby-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(255,255,255,0.9), 0 2px 16px rgba(0,0,0,0.9);
  animation: blink 1.5s infinite;
}

.standby-skip-btn {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 20px;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.btn-camera {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.btn-summon {
  flex: 2;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 24px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-summon:disabled {
  background: rgba(80,80,80,0.4);
  border-color: rgba(255,255,255,0.1);
  color: #666;
  cursor: not-allowed;
}

#summon-result {
  display: none;
  margin: 16px 20px 120px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  flex-direction: column;
  position: relative;
  z-index: 1;
}

#summon-result.rarity-normal, #summon-result.rarity-bronze, #summon-result.rarity-silver, #summon-result.rarity-gold, #summon-result.rarity-rainbow {
  display: flex;
}

#summon-result.rarity-bronze, #summon-result.rarity-silver {
  background: #000;
  border: none;
}

#summon-result.rarity-gold {
  background: #000;
  border: none;
}

#summon-result.rarity-rainbow {
  background: #000;
  border: none;
  animation: none;
}

#result-info .result-label {
  font-size: 12px;
  color: #aaaaaa;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

#result-info .result-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  text-align: center;
}

#result-chara-visual {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 12px;
}


/* =========================================================
   99 Other
   ========================================================= */

.chara-visual-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.chara-rarity-box {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  pointer-events: none;
}


/* 属性アイコン：ガチャ結果キャラ画像の左上隅に配置 */
.chara-element-corner-icon {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.35))
    drop-shadow(0 3px 8px rgba(0,0,0,0.9));
}

/* =========================================================
   07 Summon / Gacha
   ========================================================= */

#result-chara-visual img:not(.chara-rarity-box):not(.chara-element-corner-icon) {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(255,255,255,0.35);
}

#result-info {
  position: relative;
  z-index: 2;
  padding: 0;
  background: none;
}

#result-info .result-element-badge {
  margin-top: 4px;
  margin-bottom: 16px;
}

#result-info .result-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}

#result-info .save-status {
  font-size: 11px;
  color: #888;
  margin-top: 6px;
}

#result-info #result-stat-table {
  display: table;
}

#result-info #result-opts {
  display: block;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.rarity-bronze {
  background: rgba(205,127,50,0.15);
  border: 0.5px solid rgba(205,127,50,0.5);
}

.rarity-silver {
  background: rgba(192,192,192,0.12);
  border: 0.5px solid rgba(192,192,192,0.5);
}

.rarity-gold {
  background: rgba(255,215,0,0.12);
  border: 0.5px solid rgba(255,215,0,0.5);
}

.rarity-rainbow {
  background: rgba(255,255,255,0.15);
  border: 2px solid #ffffff;
  animation: rborder 2s linear infinite;
}


/* =========================================================
   09 Ten Result
   ========================================================= */

@keyframes rborder {
  0% {
    border-color: #ff0080;
  }

  17% {
    border-color: #ff8000;
  }

  33% {
    border-color: #ffff00;
  }

  50% {
    border-color: #00ff80;
  }

  67% {
    border-color: #0080ff;
  }

  83% {
    border-color: #8000ff;
  }

  100% {
    border-color: #ff0080;
  }
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.rarity-img {
  width: 180px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 8px auto 18px;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.25));
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.result-label {
  font-size: 12px;
  color: #aaaaaa;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.result-name {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
}

.result-element-badge {
  min-height: 36px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.result-element-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.28))
    drop-shadow(0 3px 10px rgba(0,0,0,0.75));
}

.result-element-label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(232,228,220,0.78);
}

.result-element-badge.element-logos .result-element-label { color: rgba(170,210,255,0.9); }
.result-element-badge.element-mystis .result-element-label { color: rgba(220,190,255,0.9); }
.result-element-badge.element-chaos .result-element-label { color: rgba(255,170,145,0.9); }

.result-photo {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.stat-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.stat-table td {
  padding: 4px 6px;
}

.stat-name {
  color: #aaa;
  text-align: left;
}

.stat-val {
  text-align: right;
  font-weight: 500;
}

.stat-total-row td {
  border-top: 0.5px solid rgba(255,255,255,0.15);
  padding-top: 8px;
  font-weight: 500;
}

.opt-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(255,200,50,0.15);
  border: 0.5px solid rgba(255,200,50,0.4);
  border-radius: 20px;
  color: #ffc832;
  margin: 2px;
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.result-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}


/* =========================================================
   05 Main / Favorite
   ========================================================= */

.btn-favorite {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 10px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}


/* =========================================================
   99 Other
   ========================================================= */

.save-status {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}


/* =========================================================
   08 Reveal Modal
   ========================================================= */

#reveal-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}

#reveal-modal.active {
  display: flex;
}

#reveal-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease;
}

#reveal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 1.5s ease;
}

#reveal-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 10;
  text-align: center;
  opacity: 1;
  transform: none;
}

#reveal-content.show {
  opacity: 1;
  transform: none;
}

#reveal-chara-img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(255,255,255,0.6);
  margin-bottom: 16px;
  pointer-events: none;
}

.reveal-rarity-box-img {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.9));
  pointer-events: none;
  display: none;
  z-index: 30;
}

#reveal-name {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255,255,255,0.8);
  text-align: center;
  position: relative;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

#reveal-rarity {
  margin: 0;
  min-height: auto;
  position: relative;
  z-index: 20;
}

.reveal-rarity-img {
  width: 220px;
  max-width: 86vw;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 21;
}

.rarity-band {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

#reveal-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  font-size: 20px;
  animation: float-up 1.5s ease-out forwards;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.5);
  }
}


/* =========================================================
   08 Reveal Modal
   ========================================================= */

#reveal-close-btn {
  background: rgba(255,255,255,0.15);
  border: 0.5px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  padding: 12px 32px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 30;
  animation: blink 1.5s infinite;
}

.reveal-info-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  width: 100%;
  padding: 20px 0 calc(92px + env(safe-area-inset-bottom));
  background: linear-gradient( to top, rgba(0,0,0,0.98) 0%, /* ←ほぼ黒 */ rgba(0,0,0,0.9) 30%, /* ←ここを濃く */ rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0) 100% );
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

.modal {
  background: #1e1e1e;
  border-radius: 20px;
  border: 0.5px solid rgba(255,255,255,0.15);
  padding: 20px 16px;
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.modal h2 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  text-align: center;
}

.modal-sub {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-bottom: 16px;
}

.modal {
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-close-btn:active {
  transform: scale(0.9);
}

.btn-cancel-txt {
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  padding: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 16px;
}

.compare-table th {
  font-size: 11px;
  color: #888;
  padding: 4px 6px;
  text-align: center;
  font-weight: 400;
}

.compare-table th:first-child {
  text-align: left;
}

.compare-table td {
  padding: 5px 6px;
  border-top: 0.5px solid rgba(255,255,255,0.07);
}

.compare-table td:first-child {
  color: #aaa;
}

.compare-table td:nth-child(2), .compare-table td:nth-child(3) {
  text-align: center;
  font-weight: 500;
}

.compare-table td:nth-child(4) {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
}


/* =========================================================
   99 Other
   ========================================================= */

.diff-plus {
  color: #4cff8f;
}

.diff-minus {
  color: #ff5c5c;
}

.diff-new {
  color: #ffc832;
}

.diff-none {
  color: #555;
}

.total-row td {
  border-top: 1px solid rgba(255,255,255,0.2);
  font-weight: 500;
  font-size: 13px;
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

.compare-btns {
  display: flex;
  gap: 10px;
}

.btn-swap {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.btn-keep {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
}

.modal-inner {
  text-align: center;
}

.modal-inner p {
  font-size: 13px;
  color: #aaa;
  margin: 8px 0 20px;
}


/* 購入・ガチャ確認モーダル：白背景/演出背景に埋もれない文字色へ調整 */
#paywall-modal .modal,
#shop-modal .modal,
#shop-confirm-modal .modal,
#summon-confirm-modal .modal,
#gacha-detail-modal .modal {
  color: #d4a840;
}

#paywall-modal .modal h2,
#shop-confirm-modal .modal h2,
#summon-confirm-modal .modal h2 {
  color: #d4a840;
}

#paywall-modal .modal-inner p,
#shop-confirm-modal .modal-inner p,
#summon-confirm-modal .modal-inner p,
#shop-confirm-text,
#summon-confirm-text {
  color: #777;
}

#shop-modal .shop-title,
#shop-modal .shop-item-count,
#shop-modal .shop-item-price,
#gacha-detail-modal .btn-gacha-label,
#gacha-detail-modal .btn-gacha-cost {
  color: #d4a840;
}

#shop-modal .shop-subtitle,
#shop-modal .shop-item-unit,
#shop-modal .shop-note {
  color: #777;
}

#paywall-modal .btn-cancel-txt,
#shop-confirm-modal .btn-cancel-txt,
#summon-confirm-modal .btn-cancel-txt {
  color: #777;
}

.modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-pay {
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 14px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* =========================================================
   結晶ショップ
   ========================================================= */

.shop-modal-inner {
  padding: 0 !important;
  overflow: hidden;
}

.shop-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}

.shop-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.shop-subtitle {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shop-gem-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.shop-list {
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shop-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.shop-item:active {
  background: rgba(255,255,255,0.07);
}

.shop-item-popular {
  background: rgba(255,255,255,0.04);
}

.shop-item-best {
  background: rgba(255,220,100,0.05);
  border-bottom-color: transparent;
}

.shop-item-badge {
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #ccc;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 2px 6px;
}

.shop-item-best .shop-item-badge {
  color: #ffd700;
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.3);
}

.shop-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.shop-item-gem-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
}

.shop-item-count {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.shop-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.shop-item-price {
  font-size: 16px;
  font-weight: 600;
}

.shop-item-unit {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}

.shop-note {
  padding: 12px 20px;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  letter-spacing: 0.03em;
  border-top: 1px solid rgba(255,255,255,0.06);
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

#screen-zukan {
  background: #0f0f0f;
  overflow: hidden;
  height: 100dvh;
}

/* プリモア一覧のみ専用背景を使用。レムナント一覧は従来の暗色背景を維持する。 */
#screen-zukan.is-primoa-mode {
  background-color: #f4efe5;
  background-image: url("../images/primoa_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#screen-zukan.is-remnant-mode {
  background-color: #0f0f0f;
  background-image: none;
}


/* =========================================================
   04 Screens / Header / Scroll
   ========================================================= */

#screen-zukan .header {
  background: #0f0f0f;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

#screen-zukan .zukan-stats, #screen-zukan .zukan-grid {
  flex-shrink: 0;
}

#screen-zukan .zukan-grid {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

#zukan-sub-box {
  padding-top: 12px;
}

.zukan-stats {
  margin: 12px 20px;
  display: flex;
  gap: 8px;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.stat-card {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.stat-card-val {
  font-size: 17px;
  font-weight: 800;
  font-family: "Cinzel", serif;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.7);
}

.stat-card-label {
  font-size: 10px;
  color: #888;
  margin-top: 2px;
}

.c-gold {
  color: #ffd700;
  text-shadow: 0 1px 0 #fff3a0, 0 0 8px rgba(255,215,0,0.5);
}

.c-silver {
  color: #cfd8dc;
  text-shadow: 0 1px 0 #ffffff, 0 0 8px rgba(200,220,255,0.35);
}

.c-bronze {
  color: #cd7f32;
  text-shadow: 0 1px 0 #ffd0a0, 0 0 8px rgba(205,127,50,0.45);
}

.c-rainbow {
  display: inline-block;
  background: linear-gradient( 90deg, #ff4fd8, #9b5cff, #4cc9ff, #4cff8f, #ffe45c, #ff8a4c );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}

.zukan-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  padding: 12px 20px 32px;
}

.zukan-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px;
  border-radius: 18px;
  position: relative;
  overflow: visible;
}

.zukan-card::after {
  content: "";
  position: absolute;
  inset: 0px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}

.zukan-card.bronze::after {
  background-image: url("images/frame_d.png");
}

.zukan-card.silver::after {
  background-image: url("images/frame_g.png");
}

.zukan-card.gold::after {
  background-image: url("images/frame_k.png");
}

.zukan-card.rainbow::after {
  background-image: url("images/frame_r.png");
}

.zukan-card.unknown {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.zukan-card.unknown::after {
  display: none;
}

.zukan-card.rainbow {
  animation: rborder 2s linear infinite;
}

.zukan-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.zukan-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 4px;
  z-index: 2;
}

.card-no {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 9px;
  color: rgba(255,255,255,0.85);
  z-index: 4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.45);
  padding: 2px 5px;
  border-radius: 6px;
}

.card-emoji {
  font-size: 26px;
}

.card-name {
  font-size: 9px;
  color: #fff;
  text-align: center;
  padding: 0 2px;
}

.card-question {
  font-size: 28px;
  color: #333;
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#detail-chara-visual img {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 16px;
  margin-bottom: 10px;
  display: block;
}

.detail-name {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

.detail-rank {
  font-size: 12px;
  margin-top: 2px;
}

.detail-photo {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 10px;
  opacity: 0.85;
  cursor: pointer;
}


/* =========================================================
   99 Other
   ========================================================= */

.btn-set-fav {
  width: 100%;
  margin-top: 14px;
  background: rgba(255,255,255,0.4);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 12px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}


/* ホーム画面設定ボタン */
.btn-set-home {
  background: linear-gradient(135deg, rgba(214,178,92,0.92), rgba(252,246,214,0.82)) !important;
  border: 1px solid rgba(170,132,54,0.72) !important;
  color: #4a3514 !important;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow:
    0 0 12px rgba(214,178,92,0.30),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.btn-set-home:active {
  transform: scale(0.985);
  filter: brightness(0.96);
}


/* =========================================================
   05 Main / Favorite
   ========================================================= */

.fav-title-img {
  width: 180px;
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.35));
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.photo-zoom {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn 0.2s ease;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.photo-zoom img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  transform: scale(0.95);
  animation: zoomIn 0.2s ease forwards;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes zoomIn {
  to {
    transform: scale(1);
  }
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.summon-flash {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 500;
}



.summon-flash.active {
  animation: summonFlash 0.8s ease;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes summonFlash {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

#result-chara-visual img {

}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

@keyframes resultPop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

.compare-chara-visual {
  text-align: center;
  margin: 10px 0 14px;
}

.compare-chara-visual img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  animation: resultPop 0.35s ease;
}

.compare-rarity {
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 600;
  margin: -4px 0 12px;
  text-shadow: 0 0 6px rgba(255,255,255,0.2);
}


/* =========================================================
   06 Bottom Nav / Home / Reload
   ========================================================= */




/* =========================================================
   13 Modal / Dialog
   ========================================================= */

#name-edit-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#name-edit-modal.active {
  display: flex;
}

.name-edit-box {
  background: #1e1e1e;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 24px 20px;
  width: 100%;
  max-width: 360px;
}

.name-edit-title {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 6px;
}

.name-edit-sub {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-bottom: 20px;
}

.name-edit-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.name-edit-input:focus {
  border-color: rgba(255,255,255,0.6);
}

.name-edit-count {
  text-align: right;
  font-size: 11px;
  color: #555;
  margin-top: 6px;
  margin-bottom: 16px;
}

.name-edit-btns {
  display: flex;
  gap: 10px;
}

.name-edit-btn-ok {
  flex: 2;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 13px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.name-edit-btn-cancel {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 13px;
  color: #888;
  font-size: 14px;
  cursor: pointer;
}


/* =========================================================
   11 Friend
   ========================================================= */

.friend-section {
  margin: 16px 20px 0;
}

.friend-section-title {
  font-size: 11px;
  color: #666;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.friend-add-box {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.friend-add-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
}

.friend-add-input:focus {
  border-color: rgba(255,255,255,0.5);
}

.friend-add-btn {
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.friend-status-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}


/* =========================================================
   99 Other
   ========================================================= */

.badge-pending {
  background: rgba(255,180,50,0.15);
  color: #ffc850;
  border: 0.5px solid rgba(255,180,50,0.3);
}

.badge-accepted {
  background: rgba(80,200,120,0.15);
  color: #4cd896;
  border: 0.5px solid rgba(80,200,120,0.3);
}


/* =========================================================
   11 Friend
   ========================================================= */

.friend-card {
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.friend-card:active {
  background: rgba(255,255,255,0.08);
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.friend-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.friend-card-name {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
}

.friend-card-meta {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.friend-card-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #888;
  margin-bottom: 10px;
}


/* =========================================================
   11 Friend
   ========================================================= */

.friend-stat-chip {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 4px 10px;
}

.friend-chara-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.friend-chara-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 0.5px solid rgba(255,255,255,0.1);
}

.friend-chara-photo-empty {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.friend-chara-info {
  flex: 1;
  min-width: 0;
}

.friend-chara-name {
  font-size: 13px;
  color: #ddd;
  margin-bottom: 4px;
}

.friend-chara-stats {
  font-size: 11px;
  color: #888;
  line-height: 1.6;
}

.friend-chara-rarity {
  font-size: 11px;
  margin-bottom: 2px;
}

.friend-req-card {
  background: rgba(255,180,50,0.06);
  border: 0.5px solid rgba(255,180,50,0.2);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.friend-req-name {
  font-size: 14px;
  color: #ddd;
}

.friend-req-btns {
  display: flex;
  gap: 8px;
}

.friend-req-accept {
  background: rgba(80,200,120,0.2);
  border: 0.5px solid rgba(80,200,120,0.4);
  border-radius: 8px;
  padding: 6px 14px;
  color: #4cd896;
  font-size: 12px;
  cursor: pointer;
}

.friend-req-decline {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 14px;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}

.friend-list-empty {
  text-align: center;
  color: #444;
  font-size: 13px;
  padding: 20px 0;
}

.friend-list-layout {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
}

.friend-list-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.friend-list-main {
  min-width: 0;
}

.friend-list-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
}

.friend-chara-caption {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.friend-search-card {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 16px;
  margin-top: 4px;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.friend-search-card-name {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 2px;
}

.friend-search-card-id {
  font-size: 11px;
  color: #666;
  margin-bottom: 12px;
}


/* =========================================================
   11 Friend
   ========================================================= */

.friend-search-send-btn {
  width: 100%;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.friend-search-send-btn:disabled {
  background: rgba(80,80,80,0.3);
  border-color: rgba(255,255,255,0.1);
  color: #555;
  cursor: default;
}

.friend-chara-section {
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.friend-chara-section:active {
  background: rgba(255,255,255,0.08);
}

.friend-photo-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  transform: translateX(-6px);
}

.friend-photo-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient( circle, rgba(160,100,255,0.6) 0%, rgba(120,60,255,0.4) 40%, rgba(80,40,200,0.2) 65%, rgba(0,0,0,0) 80% );
  filter: blur(6px);
  z-index: 0;
}

.friend-photo-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 10px;
}

#friend-my-id {
  color: #888;
  text-decoration: underline;
}

#friend-my-id:active {
  opacity: 0.6;
}

.title-text {
  display: inline-block;
  padding-left: 12px;
  font-size: 9px;
}

.title-icon {
  width: 44px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
  margin-left: 13px;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.4));
}


/* =========================================================
   11 Friend
   ========================================================= */

.friend-icon-img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  display: block;
}

.friend-icon-empty {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.friend-card:active {
  transform: scale(0.98);
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 300000;
}

#toast.show {
  opacity: 1;
}

#glitch-noise {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.4) 2px, transparent 2px, transparent 4px );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}


/* =========================================================
   03 Global User Frame
   ========================================================= */




/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.summon-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 左カラム：バナーリスト */
.summon-banner-list {
  width: 30%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px calc(80px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,0.3);
  border-right: 0.5px solid rgba(255,255,255,0.07);
}

.summon-banner-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
  background: #111;
  line-height: 0;
  flex-shrink: 0;
}

.summon-banner-card.active {
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.summon-banner-card:active {
  transform: scale(0.96);
}

.summon-banner-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.banner-card-title {
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.3px;
  line-height: 1.3;
  padding: 0 2px;
  white-space: normal;
}

.banner-desc-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 6px 5px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  pointer-events: none;
}

/* 右カラム：選択中バナー詳細 */
.summon-detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

.summon-detail-visual {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.summon-detail-visual img {
  width: 100%;
  aspect-ratio: 1024 / 1450;
  max-height: 52vh;
  object-fit: cover;
  display: block;
}

.summon-detail-overlay {
  display: none;
}

.summon-detail-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px 10px;
  flex-shrink: 0;
}

.summon-detail-btns .btn-summon {
  flex: 1;
}

.summon-detail-btns {
  padding-top: 18px;
}

/* =========================================================
   09 Ten Result — モーダル全体
   ========================================================= */

#ten-result-modal .modal,
#ten-result-modal .ten-result-modal-inner {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border-radius: 0;
  background: #0a0a0c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ten-result-header {
  text-align: center;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 8px;
  flex-shrink: 0;
}

.ten-result-title {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}

.ten-result-subtitle {
  font-family: "Cinzel", serif;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 4px;
  margin-top: 3px;
}

.ten-result-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 6px;
  flex: 1;
  min-height: 0;
}

/* カード本体 */
.ten-result-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}

/* キャラ画像 */
.ten-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}


/* 10連結果カード：属性アイコンを左上隅に重ねる */
.ten-card-element-icon {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.28))
    drop-shadow(0 2px 5px rgba(0,0,0,0.9));
}

/* 上部オーバーレイ */
.ten-card-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 4px 0;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.ten-card-rarity-label {
  font-family: "Cinzel", serif;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.4);
  line-height: 1;
}
.ten-rarity-r  { color: #d0d0d0; }
.ten-rarity-sr { color: #ffd700; }
.ten-rarity-ur { color: #ff6ec7; }

.ten-card-type-label {
  font-size: 7px;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.4);
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* NEWバッジ */
.ten-card-new-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7a3fa0, #b060e0, #7a3fa0);
  border: 0.5px solid rgba(255,255,255,0.7);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 10px;
  z-index: 3;
  white-space: nowrap;
}

/* 下部グラデーション＋キャラ名 */
.ten-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 4px 4px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  z-index: 2;
}

.ten-card-name {
  font-size: 8px;
  color: #fff;
  text-align: center;
  display: block;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 裏面（未開封） */
.ten-card-back {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0c;
  position: absolute;
  inset: 0;
}

.ten-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レアリティ別枠・光 */
.ten-result-card.rarity-r {
  border-color: rgba(200,200,200,0.3);
  box-shadow: 0 0 6px rgba(220,220,220,0.15);
}

.ten-result-card.rarity-sr {
  border-color: rgba(220,180,40,0.7);
  box-shadow: 0 0 10px rgba(220,180,40,0.35), 0 0 20px rgba(200,150,20,0.15);
}

.ten-result-card.rarity-ur {
  border-color: rgba(255,255,255,0.8);
  animation: tenUrBorder 3s linear infinite, tenUrGlow 3s linear infinite;
}

@keyframes tenUrGlow {
  0%   { filter: drop-shadow(0 0 6px rgba(255,80,180,0.8)); }
  25%  { filter: drop-shadow(0 0 6px rgba(255,220,80,0.8)); }
  50%  { filter: drop-shadow(0 0 6px rgba(80,255,180,0.8)); }
  75%  { filter: drop-shadow(0 0 6px rgba(100,160,255,0.8)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,80,180,0.8)); }
}

.ten-result-card.rarity-ur::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  background: linear-gradient(45deg,#ff0080,#ff8000,#ffff00,#00ff80,#00cfff,#8000ff,#ff0080);
  filter: blur(6px);
  opacity: 0.65;
  z-index: -1;
  animation: urRainbowGlow 3s linear infinite;
}

@keyframes tenUrBorder {
  0%   { border-color: rgba(255,80,180,0.9); }
  25%  { border-color: rgba(255,220,80,0.9); }
  50%  { border-color: rgba(80,255,180,0.9); }
  75%  { border-color: rgba(100,160,255,0.9); }
  100% { border-color: rgba(255,80,180,0.9); }
}

/* 戻るボタン */
.ten-result-footer {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.ten-result-again-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: "Noto Serif JP", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ten-result-again-btn:active {
  background: rgba(255,255,255,0.18);
}

.ten-result-close-btn {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: "Noto Serif JP", serif;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

/* 基地メニュー（縦並び） */
.kichi-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 16px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.kichi-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 16px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s;
}

.kichi-menu-item:last-child {
  border-bottom: none;
}

.kichi-menu-item:active {
  background: rgba(255,255,255,0.18);
}

.kichi-menu-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
}

.kichi-menu-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.kichi-menu-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.kichi-menu-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}

.kichi-menu-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* 戻るボタン */
.zukan-back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* 旧タブ（互換残し・非表示） */
.zukan-main-tabs {
  display: none;
}

/* 部隊編成 COMING SOON */
.party-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60vh;
  text-align: center;
}

.party-coming-icon {
  font-size: 52px;
  opacity: 0.25;
}

.party-coming-title {
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.25);
}

.party-coming-body {
  font-size: 13px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.35);
}

.card-rarity-label {
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 0.03em;
}

.zukan-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 4px;
}

.zukan-tabs button {
  flex: 1;
  padding: 10px 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: #888;
  font-family: "Noto Serif JP", serif;
}

.zukan-tabs button.active {
  color: #fff;
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.btn-summon-img {
  /* 画像ボタン用（後方互換） */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.btn-summon-img img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  pointer-events: none;
}

.btn-summon-img:active {
  transform: scale(0.95);
  filter: brightness(0.85);
}

.btn-summon-img:disabled {
  filter: grayscale(0.8) brightness(0.5);
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   ガチャ実行ボタン（CSS製）
   ========================================================= */

.btn-gacha {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(30,30,35,0.9);
  color: #fff;
  transition: transform 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 72px;
  overflow: visible;
}

.btn-gacha:active {
  transform: scale(0.96);
  filter: brightness(0.85);
}

.btn-gacha:disabled {
  filter: grayscale(0.8) brightness(0.5);
  cursor: not-allowed;
  transform: none;
}

/* 1回ボタン */
.btn-gacha-single {
  border-color: rgba(200,200,200,0.2);
  background: #0a0a0a;
}

/* 10回ボタン */
.btn-gacha-ten {
  border-color: rgba(200,155,50,0.85);
  background: #0a0a0a;
  box-shadow: 0 0 10px rgba(180,130,30,0.2);
}

/* UR確定の10回ボタン */
.btn-gacha-guaranteed {
  border-color: rgba(220,170,50,1);
  box-shadow: 0 0 14px rgba(200,150,30,0.3);
}

/* 上部の確定バッジ */
.btn-gacha-guarantee-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a0a0a;
  border: 1px solid rgba(200,155,50,0.85);
  color: #d4a840;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.btn-gacha-single .btn-gacha-guarantee-badge {
  display: none;
}

.btn-gacha-label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  font-family: "Noto Serif JP", serif;
}

.btn-gacha-ten .btn-gacha-label {
  color: #fff;
}

.btn-gacha-cost {
  font-size: 12px;
  color: rgba(180,200,255,0.85);
  letter-spacing: 0.5px;
  font-family: "Cinzel", serif;
}

/* 結果画面直前の強白フラッシュ */
.final-gacha-flash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.98) 18%,
      rgba(255,255,255,0.75) 38%,
      rgba(255,255,255,0.25) 62%,
      rgba(255,255,255,0) 100%
    );
  transform: scale(0.15);
  mix-blend-mode: screen;
}

.final-gacha-flash.active {
  animation: finalGachaFlash 0.95s cubic-bezier(.12,.8,.16,1) forwards;
}

@keyframes finalGachaFlash {
  0% {
    opacity: 0;
    transform: scale(0.1);
    filter: blur(0px);
  }

  18% {
    opacity: 1;
    transform: scale(0.45);
    filter: blur(1px);
  }

  42% {
    opacity: 1;
    transform: scale(1.35);
    filter: blur(3px);
  }

  62% {
    opacity: 1;
    transform: scale(2.4);
    filter: blur(6px);
  }

  100% {
    opacity: 0;
    transform: scale(3.2);
    filter: blur(12px);
  }
}


/* =========================================================
   08 Reveal Modal
   ========================================================= */

#reveal-modal.rarity-normal, #reveal-modal.rarity-bronze, #reveal-modal.rarity-silver, #reveal-modal.rarity-gold, #reveal-modal.rarity-rainbow {
  background: #000 !important;
  border: none !important;
  animation: none !important;
  box-shadow: none !important;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

#zukan-grid .zukan-card-overlay, #zukan-grid .card-name {
  display: none !important;
}

#zukan-grid .zukan-card {
  cursor: pointer;
}

.zukan-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

#zukan-grid .zukan-card.unknown {
  cursor: default;
  filter: grayscale(1) brightness(0.45);
}

#zukan-grid .zukan-card.unknown .zukan-card-img {
  opacity: 0.65;
}

#box-grid .zukan-card::after {
  display: none !important;
}

/* =========================================================
   06 Box Grid — 縦長カードデザイン
   ========================================================= */

#box-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 12px 120px;
}

#box-grid .zukan-card-overlay,
#box-grid .card-name {
  display: none !important;
}

#box-grid .box-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* レアリティ：ボーダーなし、ドロップシャドウで表現 */
#box-grid .box-card.rarity-r  {
  border-color: transparent;
  filter: drop-shadow(0 0 5px rgba(220,220,220,0.5));
}
#box-grid .box-card.rarity-sr {
  border-color: transparent;
  filter: drop-shadow(0 0 5px rgba(255,200,50,0.6));
}
#box-grid .box-card.rarity-ur {
  border-color: transparent;
  animation: urGlow 3.8s ease-in-out infinite;
}

/* URシャイン */
#box-grid .box-card.rarity-ur::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent 65%
  );
  transform: skewX(-15deg);
  z-index: 3;
  pointer-events: none;
  animation: urShine 4s ease-in-out infinite;
}

@keyframes urShine {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 130%; opacity: 1; }
  41%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* 下部カラー帯（フェード部分に色を乗せてドロップシャドウと繋げる） */
#box-grid .box-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  z-index: 2;
}

#box-grid .box-card.rarity-r::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200,200,200,0.25) 60%,
    rgba(200,200,200,0.45) 100%
  );
}

#box-grid .box-card.rarity-sr::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,200,50,0.25) 60%,
    rgba(255,200,50,0.45) 100%
  );
}

#box-grid .box-card.rarity-ur::after {
  animation: urAfterGlow 3.8s ease-in-out infinite;
}

@keyframes urAfterGlow {
  0%, 100% {
    background: linear-gradient(to bottom, transparent 0%, rgba(255,80,180,0.25) 60%, rgba(255,80,180,0.45) 100%);
  }
  33% {
    background: linear-gradient(to bottom, transparent 0%, rgba(0,220,160,0.25) 60%, rgba(0,220,160,0.45) 100%);
  }
  67% {
    background: linear-gradient(to bottom, transparent 0%, rgba(80,160,255,0.25) 60%, rgba(80,160,255,0.45) 100%);
  }
}

/* キャラ画像：カード全体を覆う */
#box-grid .box-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
}

/* 上部オーバーレイ（レアリティ・type表示エリア） */
#box-grid .box-card-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 5px 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
}

/* レアリティラベル */
.box-rarity-label {
  font-family: "Cinzel", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.45);
}
.rarity-label-r  { color: #c0c0c0; }
.rarity-label-sr { color: #ffd700; }
.rarity-label-ur { color: #ff6ec7; }

/* 協力者一覧：旧レアリティ文字は使わず、属性アイコンを左上に表示 */
#box-grid .box-rarity-label {
  display: none !important;
}

#box-grid .box-card-element-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: block;
  margin: -4px 0 0 -4px;
  z-index: 4;
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.30))
    drop-shadow(0 2px 5px rgba(0,0,0,0.90));
}



/* 下部グラデーション＋キャラ名 */
#box-grid .box-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 5px 5px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  z-index: 2;
}

.box-card-name {
  font-size: 9px;
  color: #fff;
  text-align: center;
  display: block;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

#detail-modal .stat-table {
  margin-top: 12px;
}

#detail-modal .stat-table td {
  padding: 8px 6px;
  font-size: 13px;
}

#detail-modal .stat-name {
  color: #aaa;
  width: 45%;
}

#detail-modal .stat-val {
  color: #fff;
  font-weight: 700;
  text-align: right;
}

#detail-chara-visual {
  position: relative;
  width: 220px;
  margin: 0 auto;
}

.detail-visual-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto;
}

.detail-main-img {
  width: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

.detail-rarity-corner {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 72px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.85));
  pointer-events: none;
}

#detail-modal #detail-rank {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.detail-rarity-img {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 44px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}



/* =========================================================
   10 Zukan / Detail
   ========================================================= */
   ========================================================= */

.fav-ur-glow {
  animation: favUrGlow 4.5s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8)) drop-shadow(0 0 12px rgba(255,255,255,0.35)) drop-shadow(0 0 32px rgba(150,110,255,0.22));
}


/* =========================================================
   09 Ten Result
   ========================================================= */

@keyframes favUrGlow {
  0%,100% {
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(255,180,255,0.20)) drop-shadow(0 0 22px rgba(180,120,255,0.16)) drop-shadow(0 0 40px rgba(120,180,255,0.10));
  }

  25% {
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(255,220,180,0.28)) drop-shadow(0 0 28px rgba(255,120,220,0.18)) drop-shadow(0 0 48px rgba(180,120,255,0.12));
  }

  50% {
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8)) drop-shadow(0 0 18px rgba(180,255,255,0.30)) drop-shadow(0 0 36px rgba(120,180,255,0.22)) drop-shadow(0 0 54px rgba(180,120,255,0.16));
  }

  75% {
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(255,180,220,0.26)) drop-shadow(0 0 30px rgba(255,120,180,0.18)) drop-shadow(0 0 46px rgba(120,255,220,0.12));
  }
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

.modal-overlay {
  z-index: 2000 !important;
}

.modal-overlay .modal {
  z-index: 2001 !important;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.zukan-stats {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
}

.stat-card-total {
  min-width: 180px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  text-align: center;
}


/* =========================================================
   14 Effects / Toast / Animations
   ========================================================= */

.stat-total-slash {
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  margin-left: 2px;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

.stat-card-total .stat-card-val {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.stat-card-total .stat-card-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}


/* =========================================================
   99 Other
   ========================================================= */

.btn-delete-chara {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,80,80,0.35);
  background: rgba(120,0,0,0.25);
  color: #ff8a8a;
  font-size: 13px;
  letter-spacing: 1px;
}

.btn-delete-ok {
  background: rgba(160,0,0,0.65);
  border: 1px solid rgba(255,80,80,0.45);
  color: #fff;
  border-radius: 14px;
  padding: 12px;
}


/* =========================================================
   13 Modal / Dialog
   ========================================================= */

#delete-confirm-modal {
  z-index: 3000 !important;
}

#delete-confirm-modal .modal {
  z-index: 3001 !important;
}


/* =========================================================
   10 Zukan / Detail
   ========================================================= */

#screen-zukan:not(.show-zukan) #zukan-stats {
  display: none !important;
}


/* =========================================================
   07 Summon / Gacha
   ========================================================= */

.summon-click {
  cursor: pointer;
}

.summon-click img {
  width: 100%;
  display: block;
  pointer-events: none;
}

#ten-result-modal {
  z-index: 3000 !important;
}

/* 10連結果の上にdetail-modalを重ねる */
#detail-modal {
  z-index: 4000 !important;
}


/* =========================================================
   08 Reveal Modal
   ========================================================= */

#reveal-modal {
  z-index: 5000 !important;
}

#reveal-modal.active {
  display: flex !important;
}



/* =========================================================
   任務 Coming Soon
   ========================================================= */

/* =========================================================
   任務画面
   ========================================================= */

/* 2カラムレイアウト */
.ninmu-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* 左カラム：カテゴリ */
.ninmu-left {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.3);
  overflow-y: auto;
}

.ninmu-cat-item {
  width: 100%;
  padding: 18px 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  text-align: center;
  line-height: 1.6;
}

.ninmu-cat-item.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-left: 2px solid rgba(255,255,255,0.8);
}

.ninmu-cat-item:active {
  background: rgba(255,255,255,0.1);
}

/* 右カラム：パネル */
.ninmu-right {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.ninmu-panel {
  padding: 0;
}

/* COMING SOON */
.ninmu-panel-coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  text-align: center;
}

.ninmu-panel-coming-title {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.2);
}

.ninmu-panel-coming-body {
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.25);
}

/* ストーリー チャプターリスト */
.ninmu-chapter-list {
  display: flex;
  flex-direction: column;
}

.ninmu-chapter-item {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.ninmu-chapter-item:active {
  background: rgba(255,255,255,0.12);
}

.ninmu-chapter-label {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}

.ninmu-chapter-title {
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.05em;
}

.ninmu-chapter-locked .ninmu-chapter-label {
  color: rgba(255,255,255,0.2);
}

.ninmu-chapter-locked .ninmu-chapter-title {
  color: rgba(255,255,255,0.25);
}

/* テスト用EXPボタン */
.ninmu-test-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px 16px 0;
}

.ninmu-test-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.2);
  font-family: "Cinzel", serif;
}

.ninmu-test-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 0.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.ninmu-test-btn:active {
  background: rgba(255,255,255,0.35);
  transform: scale(0.97);
}

.ninmu-test-btn-first {
  border-color: rgba(255,200,80,0.45);
  background: rgba(180,120,0,0.15);
}

.ninmu-test-btn-first:active {
  background: rgba(180,120,0,0.32);
}

.ninmu-test-btn-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.ninmu-test-btn-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
}

@keyframes urGlow {
  0%, 100% {
    filter: brightness(1.02) drop-shadow(0 0 6px rgba(255,0,180,0.7));
  }
  33% {
    filter: brightness(1.03) drop-shadow(0 0 6px rgba(0,220,160,0.7));
  }
  67% {
    filter: brightness(1.03) drop-shadow(0 0 6px rgba(80,160,255,0.7));
  }
}


/* =========================================================
   天井カウンター
   ========================================================= */

.pity-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
  flex-shrink: 0;
}

.pity-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
  white-space: nowrap;
}

.pity-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.pity-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,1));
  border-radius: 2px;
  transition: width 0.4s ease;
  width: 0%;
}

.pity-num {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: "Cinzel", serif;
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

.pity-note {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: 6px;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}

/* ガチャボタン内の結晶アイコン */
.btn-gacha-gem-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
}


/* =========================================================
   詳細モーダル 閉じるボタン
   ========================================================= */

.btn-detail-close {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: "Noto Serif JP", serif;
}
/* キャラ詳細：属性アイコンをキャラ左上に小さく固定 */
#detail-modal #detail-chara-visual .detail-visual-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto;
}

#detail-modal #detail-chara-visual .detail-main-img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 16px;
  margin-bottom: 10px;
}

#detail-modal #detail-chara-visual .detail-element-img {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 50px !important;
  max-width: none !important;
  height: 50px !important;
  object-fit: contain;
  margin: 0 !important;
  z-index: 5;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.32))
    drop-shadow(0 2px 6px rgba(0,0,0,0.85));
}

/* 旧レアリティ画像が残っていても表示しない */
#detail-modal #detail-chara-visual .detail-rarity-img {
  display: none !important;
}

/* 削除確認モーダルをキャラ詳細より前面に出す */
#delete-confirm-modal {
  z-index: 6000 !important;
}

#delete-confirm-modal.active {
  display: flex !important;
}

#delete-confirm-modal .modal {
  position: relative;
  z-index: 6001 !important;
}

/* =========================
   UR WARNING
========================= */

#fullscreen-blackout {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9997;
  transition: opacity 0.35s ease;
}

#fullscreen-blackout.active {
  opacity: 1;
  pointer-events: auto;
}

#ur-alert-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#ur-alert-screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* revealより前面 */
#reveal-modal {
  z-index: 9999 !important;
}

.ur-alert-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,0,0,0.05) 0px,
    rgba(255,0,0,0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: urAlertNoise 0.12s linear infinite;
}

.ur-alert-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Cinzel", serif;
  letter-spacing: 0.25em;
}

.ur-alert-warning {
  font-size: 72px;
  font-weight: 900;
  color: #ff2020;
  letter-spacing: 10px;
  text-shadow:
    0 0 12px rgba(255,0,0,0.9),
    0 0 32px rgba(255,0,0,0.7);
  animation: urBlink 0.5s infinite;
}

.ur-alert-sub {
  margin-top: 16px;
  color: #bbb;
  letter-spacing: 4px;
  font-size: 14px;
}

.ur-alert-line {
  width: 280px;
  height: 2px;
  background: #ff2020;
  margin: 20px auto;
  box-shadow: 0 0 16px rgba(255,0,0,0.8);
}

.ur-alert-code {
  color: #666;
  font-size: 12px;
  letter-spacing: 3px;
}

@keyframes urBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes urAlertNoise {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}

/* =========================================================
   キャラ画像 全画面拡大ビュー
   ========================================================= */
#chara-image-viewer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4500 !important;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
  padding: 20px;
}

#chara-image-viewer.active {
  display: flex !important;
  animation: charaViewerFadeIn 0.2s ease;
}

#chara-image-viewer-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8);
}

@keyframes charaViewerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 詳細モーダルの画像ラッパー: タップ可能なことを示す */
#detail-modal .detail-visual-wrap {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

#detail-modal.active {
  z-index: 2000;
}

#limitbreak-modal.active {
  z-index: 3000;
}

#limitbreak-confirm-modal.active {
  z-index: 3100;
}

/* =========================================================
   共鳴モーダル：詳細モーダルより前面に出す
   ========================================================= */

#limitbreak-modal,
#limitbreak-modal.active {
  z-index: 4100 !important;
}

#limitbreak-modal .modal {
  z-index: 4101 !important;
}

#limitbreak-confirm-modal,
#limitbreak-confirm-modal.active {
  z-index: 4200 !important;
}

#limitbreak-confirm-modal .modal {
  z-index: 4201 !important;
}

/* 共鳴完了モーダル */
#limitbreak-complete-modal,
#limitbreak-complete-modal.active {
  z-index: 4300 !important;
}

#limitbreak-complete-modal .modal {
  z-index: 4301 !important;
}

/* =========================================================
   BOXカード：共鳴バッジを画像右上に配置
   ========================================================= */

#box-grid .box-card-lb-badge {
  position: absolute;
  top: 6px;
  right: 5px;
  z-index: 5;

  min-width: 30px;
  padding: 2px 5px;
  border-radius: 999px;

  background: rgba(80, 40, 140, 0.88);
  border: 1px solid rgba(210, 170, 255, 0.75);
  color: #f1dcff;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  text-align: center;

  box-shadow:
    0 0 6px rgba(170, 90, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.65);

  pointer-events: none;
}

/* =========================================================
   BOXカード：共鳴MAX時のUR風発光加工
   ========================================================= */

#box-grid .box-card.lb-max {
  animation: lbMaxGlow 3.8s ease-in-out infinite;
  box-shadow:
    0 0 8px rgba(255,255,255,0.45),
    0 0 14px rgba(180,120,255,0.45),
    0 0 24px rgba(120,210,255,0.28);
}

/* URと同じ斜めシャイン。ただし共鳴MAXは紫〜青寄り */
#box-grid .box-card.lb-max::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;

  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(220,190,255,0.22) 50%,
    rgba(120,210,255,0.10) 55%,
    transparent 65%
  );

  transform: skewX(-15deg);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;

  animation: lbMaxShine 4s ease-in-out infinite;
}

@keyframes lbMaxGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(180,120,255,0.42))
      drop-shadow(0 0 9px rgba(120,210,255,0.28));
  }

  50% {
    filter:
      drop-shadow(0 0 8px rgba(220,190,255,0.62))
      drop-shadow(0 0 14px rgba(120,210,255,0.42));
  }
}

@keyframes lbMaxShine {
  0% {
    left: -75%;
    opacity: 0;
  }

  18% {
    opacity: 0.75;
  }

  42% {
    opacity: 0.25;
  }

  100% {
    left: 130%;
    opacity: 0;
  }
}

/* +5バッジも少し特別感を出す */
#box-grid .box-card.lb-max .box-card-lb-badge {
  background: linear-gradient(90deg, #ff4fd8, #9b5cff, #4cc9ff, #4cff8f, #ffe45c, #ff8a4c) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.9) !important;
  box-shadow:
    0 0 6px rgba(255,255,255,0.9),
    0 0 12px rgba(170,90,255,0.8);
}

/* URかつ共鳴MAXの場合は、UR本来の光を優先する */
#box-grid .box-card.rarity-ur.lb-max {
  animation: urGlow 2.8s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(255,255,255,0.55),
    0 0 18px rgba(255,120,220,0.42),
    0 0 28px rgba(120,200,255,0.38),
    0 0 36px rgba(255,220,120,0.22);
}

/* URの斜めシャインはUR用を維持 */
#box-grid .box-card.rarity-ur.lb-max::before {
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;

  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,180,255,0.16) 56%,
    transparent 66%
  );

  transform: skewX(-15deg);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;

  animation: urShine 3.2s ease-in-out infinite;
}

/* =========================================================
   Main / Notice Button
   ========================================================= */










/* =========================================================
   Notice Modal
   ========================================================= */

.notice-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 160000;
  background: rgba(0,0,0,0.72);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.notice-modal.active {
  display: flex;
}

.notice-panel {
  position: relative;
  width: min(360px, 100%);
  max-height: 72vh;
  overflow-y: auto;

  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(26,26,30,0.96), rgba(6,6,8,0.96));
  box-shadow:
    0 0 32px rgba(255,255,255,0.12),
    0 20px 60px rgba(0,0,0,0.85);

  padding: 18px;
  color: #e8e4dc;
}

.notice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  font-size: 20px;
  cursor: pointer;
}

.notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 34px;
  margin-bottom: 18px;
}

.notice-head img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
}

.notice-title {
  font-size: 18px;
  letter-spacing: 3px;
  font-weight: 600;
}

.notice-sub {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(232,228,220,0.45);
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-item {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

.notice-date {
  font-family: "Cinzel", serif;
  font-size: 10px;
  color: rgba(232,228,220,0.45);
  margin-bottom: 4px;
}

.notice-item-title {
  font-size: 13px;
  color: #fff;
  margin-bottom: 5px;
}

.notice-body {
  font-size: 11px;
  color: rgba(232,228,220,0.62);
  line-height: 1.6;
}

/* =========================================================
   Notice Button / キャラ右側配置
   ========================================================= */









/* =========================================================
   Main / Event Banner
   ========================================================= */

.home-event-banner-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 82px);
  left: 50%;
  transform: translateX(-50%);

  width: calc(100% - 28px);
  max-width: 402px;

  z-index: 12;
  overflow: hidden;

  /* 角丸なし */
  border-radius: 0;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);

  box-shadow:
    0 8px 22px rgba(0,0,0,0.44),
    0 0 16px rgba(255,255,255,0.064);

  touch-action: pan-y;
}

.home-event-banner-item,
.home-event-banner-item img {
  border-radius: 0;
}

.home-event-banner-track {
  display: flex;
  width: 100%;
  transition: transform 0.32s ease;
  will-change: transform;
}

.home-event-banner-item {
  flex: 0 0 100%;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.home-event-banner-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 360;
  object-fit: cover;
}

.home-event-banner-item:active {
  filter: brightness(0.85);
}

.home-event-banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.home-event-banner-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
}

.home-event-banner-dots span.active {
  width: 14px;
  background: rgba(255,255,255,0.9);
}

  .favorite-area {
    top: calc(env(safe-area-inset-top) + 168px);
    bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .fav-cut-img {
    max-height: 58dvh;
    max-width: 108%;
  }

  /* =========================================================
   Main Layout Safe Fix
   バナー追加後のメイン画面崩れ対策
   ========================================================= */

#screen-main {
  height: 100dvh;
  overflow: hidden;
  padding-top: 0;
}

/* バナーは上部に固定 */
.home-event-banner-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 82px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 402px);
  height: auto;
  z-index: 12;
  border-radius: 0;
  overflow: hidden;
}

/* バナー比率を維持 */
.home-event-banner-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 360;
  object-fit: cover;
  border-radius: 0;
}

/* キャラ位置は元の構造のまま。absoluteにしない */
.favorite-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* ここだけで調整 */
  transform: translateY(90px);
  overflow: visible;
}

/* キャラが大きすぎる場合だけ制御 */
.fav-cut-img {
  max-height: 78dvh;
  max-width: 108%;
  object-fit: contain;
}

/* 低い端末だけ少し詰める */
@media (max-height: 700px) {
  .home-event-banner-wrap {
    top: calc(env(safe-area-inset-top) + 78px);
    width: min(calc(100% - 28px), 402px);
  }

  .favorite-area {
    transform: translateY(74px);
  }

  .fav-cut-img {
    max-height: 74dvh;
    max-width: 104%;
  }
}

/* =========================================================
   Home Layout Reset
   ホーム画面の端末差補正
   ========================================================= */

#screen-main {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding-top: 0;
  position: relative;
}

/* バナー */
.home-event-banner-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 84px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 402px);
  z-index: 20;
  border-radius: 0;
  overflow: hidden;
}

.home-event-banner-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 360;
  object-fit: cover;
  border-radius: 0;
}

/* キャラ表示エリア */
.favorite-area {
  position: absolute !important;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 150px);
  bottom: calc(58px + env(safe-area-inset-bottom));

  display: flex;
  justify-content: center;
  align-items: flex-end;

  transform: none !important;
  overflow: visible;
  z-index: 10;
  pointer-events: none;
}

#fav-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.fav-cut-img {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: min(66dvh, 560px);
  object-fit: contain;
}

/* iPhone SE系 */
@media (max-height: 700px) {
  .home-event-banner-wrap {
    top: calc(env(safe-area-inset-top) + 82px);
  }

  .favorite-area {
    top: calc(env(safe-area-inset-top) + 145px);
    bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .fav-cut-img {
    max-height: 61dvh;
    max-width: 90vw;
  }
}


/* =========================================================
   Main / Notice Button - Final
   ========================================================= */







/* =========================================================
   Main / Notice Button - Final v2
   バナーに重ねず、バナー下に独立配置
   ========================================================= */

/* =========================================================
   Main / Notice Button - Final v2
   バナーに重ねず、バナー下に独立配置
   ========================================================= */















/* SE系は少し小さく */


/* =========================================================
   Main / Notice Badge - Final
   ========================================================= */



/* =========================================================
   Character Detail: Battle32向け情報表示
   共鳴Lv / HP / ATK / 移動型 / スキル詳細
   ========================================================= */

#detail-modal .modal {
  max-height: 88vh;
  padding-bottom: 18px;
  overflow-y: auto;
}

#detail-modal .btn-set-home {
  display: block;
  margin: 12px 0 14px;
}

#detail-opts {
  margin-top: 12px;
}

.detail-lb-section {
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.detail-lb-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.detail-lb-info {
  font-size: 10px;
  color: rgba(232,228,220,0.45);
  letter-spacing: 0.5px;
  text-align: right;
}

.detail-lb-row,
.detail-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-lb-row {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.detail-lb-label,
.detail-status-label {
  color: rgba(232,228,220,0.66);
  font-size: 12px;
  letter-spacing: 1px;
}

.detail-lb-val {
  color: #d4a0ff;
  font-family: "Cinzel", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.detail-status-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.detail-status-val {
  color: #fff;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.detail-section-title {
  margin: 16px 0 8px;
  color: rgba(232,228,220,0.58);
  font-size: 11px;
  letter-spacing: 2px;
}

.detail-skill-section {
  margin-bottom: 12px;
}

.detail-skill-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
}

.detail-skill-card.is-ult {
  border-color: rgba(190,120,255,0.28);
  background: rgba(80,30,120,0.16);
}

.detail-skill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.detail-skill-badge {
  flex-shrink: 0;
  min-width: 42px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(232,228,220,0.74);
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
}

.detail-skill-card.is-ult .detail-skill-badge {
  color: #e6c0ff;
  border-color: rgba(210,150,255,0.4);
  background: rgba(150,80,220,0.18);
}

.detail-skill-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}

.detail-skill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 7px;
}

.detail-skill-meta span {
  color: rgba(232,228,220,0.58);
  font-size: 10px;
  line-height: 1.4;
}

.detail-skill-effect {
  color: rgba(210,180,255,0.78);
  font-size: 11px;
  line-height: 1.55;
  margin-bottom: 4px;
}

.detail-skill-desc {
  color: rgba(232,228,220,0.78);
  font-size: 11px;
  line-height: 1.65;
}

.detail-skill-empty {
  color: rgba(232,228,220,0.42);
  font-size: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}

.btn-limit-break {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(190,120,255,0.28);
  background: rgba(150,80,220,0.16);
  color: #d4a0ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-family: "Noto Serif JP", serif;
}

.btn-limit-break-max {
  opacity: 0.62;
  cursor: default;
}
/* =========================================================
   Home Banner - iPhone SE / low height adjust
   小画面端末では上部バナーを縮小する
   ========================================================= */

/* iPhone SE系：高さが低い端末 */
@media (max-height: 700px) {
  .home-event-banner-wrap {
    top: calc(env(safe-area-inset-top) + 78px) !important;
    width: min(calc(100% - 72px), 340px) !important;
  }

  .home-event-banner-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1200 / 360 !important;
    object-fit: cover !important;
  }

  .home-event-banner-dots {
    bottom: 4px !important;
  }

  .favorite-area {
    top: calc(env(safe-area-inset-top) + 138px) !important;
  }

  
}

/* さらに低い端末用 */
@media (max-height: 620px) {
  .home-event-banner-wrap {
    top: calc(env(safe-area-inset-top) + 74px) !important;
    width: min(calc(100% - 92px), 316px) !important;
  }

  .favorite-area {
    top: calc(env(safe-area-inset-top) + 126px) !important;
  }

  
}
/* =========================================================
   Home Notice Button - SE overlap fix
   SE系ではバナー下へ逃がす
   ========================================================= */





/* ===== アプリ全体：ブラウザ標準の長押し/選択/画像ドラッグ対策 ===== */
html,
body,
.screen,
.modal-overlay,
#battle32-root {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 画像の長押し保存メニュー・ドラッグ対策 */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ボタン・カード類も選択されないようにする */
button,
.bottom-nav-item,
.zukan-card,
.box-card,
.party-card,
.b32-party-card,
.b32-cell,
.ninmu-chapter-item,
.kichi-menu-item,
.summon-banner-item,
.home-event-banner-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   Detail Skill Range Preview / スキル範囲ミニ盤面
   ========================================================= */

.detail-range-preview {
  margin: 8px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-range-board {
  display: grid;
  grid-template-columns: repeat(5, 14px);
  grid-template-rows: repeat(5, 14px);
  gap: 3px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}

.detail-range-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.06);
}

.detail-range-cell.self {
  background: rgba(255,230,120,0.95);
  border-color: rgba(255,245,180,1);
  box-shadow: 0 0 8px rgba(255,210,80,0.75);
  border-radius: 50%;
}

.detail-range-cell.target {
  background: rgba(255,90,90,0.55);
  border-color: rgba(255,140,120,0.9);
  box-shadow: 0 0 8px rgba(255,70,70,0.45);
}

.detail-range-cell.ally {
  background: rgba(90,200,255,0.52);
  border-color: rgba(150,230,255,0.9);
  box-shadow: 0 0 8px rgba(90,200,255,0.45);
}

/* =========================================================
   Detail Move Preview / 移動型ミニ盤面
   ========================================================= */

.detail-move-preview-row {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  margin-top: 4px;
}

.detail-move-preview {
  display: flex;
  justify-content: center;
}

.detail-move-board {
  display: grid;
  grid-template-columns: repeat(5, 12px);
  grid-template-rows: repeat(5, 12px);
  gap: 2px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.07);
}

.detail-move-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.045);
}

.detail-move-cell.self {
  background: rgba(255,230,120,0.95);
  border-color: rgba(255,245,180,1);
  box-shadow: 0 0 7px rgba(255,210,80,0.65);
  border-radius: 50%;
}

.detail-move-cell.movable {
  background: rgba(120,170,255,0.55);
  border-color: rgba(160,200,255,0.9);
  box-shadow: 0 0 7px rgba(90,150,255,0.4);
}

/* ガチャ結果では属性表示を画像左上へ移動したため、下部バッジ欄の余白を消す */
#result-info .result-element-badge:empty {
  min-height: 0;
  margin: 0;
}

/* =========================================================
   協力者一覧：キャラ単位カルーセル / 未所持ロック表示
   ========================================================= */
.bottom-nav-notice {
  position: absolute;
  top: 8px;
  right: 26%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff1748;
  box-shadow: 0 0 10px rgba(255,23,72,0.9), 0 0 2px rgba(255,255,255,0.9) inset;
  z-index: 5;
  pointer-events: none;
}

#box-grid.box-carousel {
  display: block;
  padding: 8px 12px 120px;
}

.box-carousel-view {
  position: relative;
  min-height: calc(100dvh - var(--header-h) - var(--page-header-h) - 86px);
  padding: 6px 8px 18px;
}

.box-carousel-count {
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: rgba(232,228,220,0.42);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

.box-carousel-count-slash {
  color: rgba(232,228,220,0.24);
}

.box-carousel-arrow {
  position: fixed;
  top: 48%;
  transform: translateY(-50%);
  z-index: 8;
  width: 34px;
  height: 64px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 54px;
  line-height: 1;
  font-family: "Cinzel", serif;
  cursor: pointer;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95);
  -webkit-tap-highlight-color: transparent;
}

.box-carousel-prev { left: 10px; }
.box-carousel-next { right: 10px; }

@media (min-width: 500px) {
  .box-carousel-prev { left: calc(50% - 215px + 10px); }
  .box-carousel-next { right: calc(50% - 215px + 10px); }
}

.box-carousel-visual {
  position: relative;
  width: min(76vw, 300px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 8px;
  overflow: hidden;
  background: #202020;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.box-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.box-carousel-name {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  margin: 8px 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.box-carousel-name.locked {
  color: rgba(232,228,220,0.28);
  letter-spacing: 5px;
}

.box-carousel-detail {
  width: min(100%, 340px);
  margin: 0 auto;
}

.box-carousel-detail .detail-lb-section {
  margin-bottom: 14px;
}

.box-carousel-detail .detail-skill-section {
  padding-bottom: 12px;
}

.box-carousel-silhouette {
  filter: brightness(0) contrast(1.15) grayscale(1);
  opacity: 0.72;
  transform: scale(1.02);
}

.box-carousel-visual.locked {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.09), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.55)),
    #111;
  border-color: rgba(255,255,255,0.06);
}

.box-carousel-visual.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
  z-index: 1;
  pointer-events: none;
}

.box-carousel-lock-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(232,228,220,0.24);
  background: rgba(0,0,0,0.52);
  color: rgba(232,228,220,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  font-family: "Noto Serif JP", serif;
  z-index: 3;
  box-shadow: 0 0 22px rgba(0,0,0,0.75), 0 0 18px rgba(255,255,255,0.06) inset;
}

.box-carousel-locked-label {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(232,228,220,0.58);
  text-shadow: 0 2px 8px rgba(0,0,0,0.95);
}

.box-carousel-locked-panel {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  border-radius: 12px;
  padding: 28px 14px 26px;
  text-align: center;
  min-height: 220px;
}

.box-carousel-locked-title {
  font-family: "Cinzel", serif;
  color: rgba(232,228,220,0.32);
  font-size: 12px;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.box-carousel-locked-seal {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid rgba(232,228,220,0.16);
  color: rgba(232,228,220,0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  font-size: 22px;
  font-weight: 700;
}

.box-carousel-locked-no,
.box-carousel-locked-text {
  color: rgba(232,228,220,0.28);
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.detail-type-row {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.detail-type-val {
  color: rgba(232,228,220,0.92);
}

.detail-owned-count {
  margin: 10px 0 0;
  text-align: right;
  color: rgba(232,228,220,0.52);
  font-size: 11px;
  letter-spacing: 1px;
}

.btn-limit-break-disabled {
  opacity: 0.45;
  filter: grayscale(1);
}

/* =========================================================
   協力者一覧：共鳴可能ジャンプ通知
   ========================================================= */
.box-limitbreak-jump {
  width: min(100%, 330px);
  margin: 4px auto 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 45, 85, 0.32);
  border-radius: 999px;
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 45, 85, 0.2), transparent 34%),
    rgba(20, 8, 12, 0.82);
  color: rgba(255,255,255,0.88);
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: 0.8px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 23, 72, 0.16);
  -webkit-tap-highlight-color: transparent;
}

.box-limitbreak-jump:active {
  transform: scale(0.985);
  background: rgba(40, 10, 18, 0.95);
}

.box-limitbreak-jump.is-current {
  border-color: rgba(255, 76, 112, 0.58);
  box-shadow:
    0 0 18px rgba(255, 23, 72, 0.28),
    inset 0 0 18px rgba(255, 23, 72, 0.08);
}

.box-limitbreak-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff1748;
  box-shadow: 0 0 10px rgba(255, 23, 72, 0.95);
  flex-shrink: 0;
  animation: box-lb-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes box-lb-dot-pulse {
  0%,100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.28); opacity: 1; }
}

.box-limitbreak-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  color: rgba(255,255,255,0.86);
}

.box-limitbreak-count {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  background: rgba(255, 23, 72, 0.22);
  border: 1px solid rgba(255, 23, 72, 0.42);
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.box-limitbreak-arrow {
  color: rgba(255,255,255,0.66);
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.detail-lb-section.can-limit-break {
  border-color: rgba(255, 45, 85, 0.35);
  box-shadow:
    0 0 18px rgba(255, 23, 72, 0.13),
    inset 0 0 20px rgba(255, 23, 72, 0.045);
}

.detail-lb-ready-badge {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 23, 72, 0.2);
  border: 1px solid rgba(255, 23, 72, 0.42);
  color: rgba(255,255,255,0.95);
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255, 23, 72, 0.2);
}

.btn-limit-break-ready {
  border-color: rgba(255, 45, 85, 0.55) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 38%),
    rgba(255, 23, 72, 0.26) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(255, 23, 72, 0.22);
}

/* =========================================================
   協力者一覧カルーセル：固定ヘッダー / スクロール分離 修正
   ========================================================= */
#screen-zukan #zukan-sub-box {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#screen-zukan #zukan-sub-box .zukan-stats {
  flex-shrink: 0;
}

#box-grid.box-carousel {
  height: calc(100dvh - var(--header-h) - var(--page-header-h) - 78px);
  min-height: 0;
  overflow: hidden;
  padding: 6px 12px 0;
}

.box-carousel-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 8px;
}

.box-carousel-fixed {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  background: #0f0f0f;
  padding-bottom: 10px;
}

.box-carousel-visual {
  width: min(70vw, 260px);
  max-width: 260px;
  margin-bottom: 6px;
}

.box-carousel-name {
  margin: 6px 0 10px;
}

.box-carousel-separator {
  width: min(100%, 340px);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

.box-carousel-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 calc(74px + env(safe-area-inset-bottom));
}

.box-carousel-detail {
  width: min(100%, 340px);
  margin: 0 auto;
}

.detail-element-type-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.22)) drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}

.detail-type-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.detail-element-type-label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: rgba(232,228,220,0.78);
}

.detail-type-val {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media (max-height: 720px) {
  .box-carousel-visual {
    width: min(62vw, 230px);
    max-width: 230px;
  }
  .box-carousel-count {
    margin-bottom: 3px;
  }
  .box-limitbreak-jump {
    margin-top: 2px;
    margin-bottom: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .box-carousel-name {
    margin-bottom: 8px;
  }
}

/* =========================================================
   協力者一覧カルーセル：表示領域拡張 修正
   - パネル画像を縮小
   - 下段スクロール領域の余白を削減
   - ボトムナビ直上まで詳細を使う
   ========================================================= */
#screen-zukan #zukan-sub-box {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#box-grid.box-carousel {
  /* ボトムナビ直上まで使い切る */
  height: calc(100dvh - var(--header-h) - var(--page-header-h) - 0px);
  min-height: 0;
  overflow: hidden;
  padding: 4px 12px 0;
}

.box-carousel-view {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 8px;
}

.box-carousel-fixed {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  background: #0f0f0f;
  padding-bottom: 7px;
}

.box-carousel-visual {
  width: min(58vw, 216px);
  max-width: 216px;
  margin-bottom: 4px;
}

.box-carousel-name {
  margin: 4px 0 7px;
}

.box-carousel-separator {
  width: min(100%, 340px);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.24), transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

.box-carousel-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 calc(74px + env(safe-area-inset-bottom));
}

.box-carousel-count {
  margin-bottom: 4px;
}

.box-limitbreak-jump {
  margin-top: 2px;
  margin-bottom: 6px;
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (max-height: 720px) {
  #box-grid.box-carousel {
    height: calc(100dvh - var(--header-h) - var(--page-header-h) - 0px);
    padding-top: 2px;
  }
  .box-carousel-visual {
    width: min(52vw, 188px);
    max-width: 188px;
  }
  .box-carousel-fixed {
    padding-bottom: 6px;
  }
  .box-carousel-name {
    margin: 3px 0 6px;
  }
  .box-carousel-detail-scroll {
    padding-top: 8px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

@media (max-height: 660px) {
  .box-carousel-visual {
    width: min(48vw, 170px);
    max-width: 170px;
  }
  .box-carousel-count {
    margin-bottom: 2px;
  }
  .box-limitbreak-jump {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 5px;
  }
}


/* =========================================================
   プリモア一覧：画像左右矢印 / スワイプ対応
   ========================================================= */
.box-carousel-visual-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}

.box-carousel-visual-row .box-carousel-visual {
  margin-left: 0;
  margin-right: 0;
}

.box-carousel-arrow {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 32px;
  width: 32px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  z-index: 8;
}

@media (min-width: 500px) {
  .box-carousel-prev,
  .box-carousel-next {
    left: auto !important;
    right: auto !important;
  }
}

@media (max-height: 660px) {
  .box-carousel-visual-row {
    gap: 8px;
  }

  .box-carousel-arrow {
    flex-basis: 28px;
    width: 28px;
    height: 48px;
    font-size: 36px;
  }
}


/* =========================================================
   100 Zeraphia Light Visibility Patch
   - 全体を暗く見せていた黒背景・黒オーバーレイを軽減
   - 白いアルケミア寄りの明るいUIへ寄せる
   - 既存構造は変更せず、末尾上書きのみ
   ========================================================= */

:root {
  --z-light-bg: #f7f6f1;
  --z-light-bg-2: #ffffff;
  --z-light-panel: rgba(255,255,255,0.78);
  --z-light-panel-solid: #ffffff;
  --z-light-border: rgba(24,28,36,0.12);
  --z-light-text: #17181c;
  --z-light-sub: rgba(24,28,36,0.58);
  --z-light-muted: rgba(24,28,36,0.38);
  --z-light-gold: #9e7d35;
}

/* アプリ全体の黒ベースを解除 */
html,
body {
  background: var(--z-light-bg) !important;
  color: var(--z-light-text) !important;
}

/* 各通常画面を明るい白基調へ */
.screen,
#screen-main,
#screen-ninmu,
#screen-summon,
#screen-zukan,
#screen-friend,
#screen-setting {
  background-color: var(--z-light-bg) !important;
  color: var(--z-light-text) !important;
}

/* 汎用ヘッダーを黒ベタから白半透明へ */
.header {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(24,28,36,0.08) !important;
  box-shadow: 0 8px 22px rgba(24,28,36,0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header-title,
.back-btn,
.zukan-back-btn {
  color: var(--z-light-text) !important;
  text-shadow: none !important;
}

/* 上部HUDの黒グラデーションを白グラデーションへ */
.global-user-frame {
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.74) 48%,
      rgba(255,255,255,0) 100%) !important;
}

.global-user-frame.hud-dark {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(24,28,36,0.08) !important;
}

.hud-lv-circle,
.hud-resource {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(24,28,36,0.13) !important;
  box-shadow: 0 6px 16px rgba(24,28,36,0.08) !important;
}

.hud-lv-label,
.hud-id,
.hud-exp-text {
  color: var(--z-light-sub) !important;
}

.hud-lv-num,
.hud-name,
.hud-res-val {
  color: var(--z-light-text) !important;
  text-shadow: none !important;
}

.hud-exp-bg {
  background: rgba(24,28,36,0.12) !important;
}

.hud-exp-fill {
  background: linear-gradient(90deg, #b8984d, #17181c) !important;
}

/* ホーム背景の暗幕をほぼ解除 */
#screen-main::before {
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.04) 34%,
      rgba(255,255,255,0.10) 100%) !important;
}

#screen-main::after {
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,0.34), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(220,200,150,0.10), transparent 42%),
    linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.58 !important;
}

/* ホームのキャラを暗く落としすぎない */
.fav-cut-img {
  filter:
    drop-shadow(0 24px 34px rgba(24,28,36,0.28))
    drop-shadow(0 0 12px rgba(255,255,255,0.35)) !important;
}

.fav-name,
.fav-empty {
  color: var(--z-light-text) !important;
  text-shadow: 0 1px 8px rgba(255,255,255,0.80) !important;
}

.fav-stats,
.fav-label {
  color: var(--z-light-sub) !important;
}

/* 下部ナビを黒ベタから明るいガラス調へ */
.bottom-nav {
  background: rgba(255,255,255,0.92) !important;
  border-top: 1px solid rgba(24,28,36,0.10) !important;
  box-shadow: 0 -10px 24px rgba(24,28,36,0.08) !important;
}

.bottom-nav-item img {
  filter: grayscale(0.35) brightness(0.82) saturate(0.9) !important;
}

.bottom-nav-item.active img {
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 10px rgba(160,126,53,0.22)) !important;
}

.bottom-nav-label {
  color: rgba(24,28,36,0.48) !important;
  text-shadow: none !important;
}

.bottom-nav-item.active .bottom-nav-label {
  color: var(--z-light-text) !important;
}

/* 各メニュー／カード／行の暗さを軽減 */
.setting-row,
.kichi-menu-item,
.ninmu-cat-item,
.ninmu-panel-coming,
.ninmu-test-btn,
.ninmu-chapter-item,
.friend-add-box,
.friend-section,
.friend-search-result,
.friend-card,
.summon-counter,
.summon-banner-item,
.summon-detail,
.pity-counter,
.zukan-stats,
.stat-card,
.party-coming-soon,
.id-box,
.box-carousel-locked-panel,
.detail-lb-section,
.detail-skill-section {
  background: var(--z-light-panel) !important;
  border-color: var(--z-light-border) !important;
  color: var(--z-light-text) !important;
  box-shadow: 0 8px 22px rgba(24,28,36,0.06) !important;
}

.kichi-menu-title,
.ninmu-test-btn-title,
.ninmu-chapter-title,
.friend-section-title,
.setting-row-label,
.summon-detail-title,
.stat-card-val,
.box-carousel-name,
.detail-lb-title,
.detail-skill-title,
.result-name {
  color: var(--z-light-text) !important;
  text-shadow: none !important;
}

.kichi-menu-sub,
.ninmu-test-btn-sub,
.ninmu-panel-coming-body,
.ninmu-chapter-label,
.friend-empty-txt,
.setting-section-title,
.setting-row-sub,
.summon-detail-desc,
.pity-note,
.stat-card-label,
.box-carousel-count,
.box-carousel-count-slash {
  color: var(--z-light-sub) !important;
  text-shadow: none !important;
}

/* 巡行の選択中だけ少し強調 */
.ninmu-cat-item.active,
.ninmu-chapter-item:not(.ninmu-chapter-locked):active,
.kichi-menu-item:active,
.summon-banner-item.active {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(158,125,53,0.32) !important;
  box-shadow:
    0 8px 22px rgba(24,28,36,0.08),
    0 0 0 1px rgba(158,125,53,0.10) inset !important;
}

/* ガチャ画面の画像下部にある黒い説明帯を軽めに */
.summon-detail-overlay,
.banner-desc-overlay,
.box-card-overlay,
.zukan-card-overlay {
  background:
    linear-gradient(to top,
      rgba(255,255,255,0.86) 0%,
      rgba(255,255,255,0.58) 48%,
      rgba(255,255,255,0) 100%) !important;
  color: var(--z-light-text) !important;
}

.summon-detail-visual,
.home-event-banner-item,
.box-carousel-visual,
.zukan-card,
.box-card {
  border-color: rgba(24,28,36,0.10) !important;
  box-shadow: 0 10px 24px rgba(24,28,36,0.10) !important;
}

/* ロック・未所持の暗さを少し緩和 */
#zukan-grid .zukan-card.unknown,
.box-carousel-silhouette,
.box-carousel-visual.locked {
  filter: grayscale(0.75) brightness(0.86) !important;
  opacity: 0.76 !important;
}

/* ボタン類の黒ベタを明るく */
.btn-gacha,
.btn-gacha-single,
.btn-gacha-ten,
.btn-gacha-guaranteed,
.id-btn,
.friend-add-btn,
.name-edit-btn-ok,
.btn-favorite,
.btn-swap,
.btn-keep {
  background: rgba(255,255,255,0.90) !important;
  color: var(--z-light-text) !important;
  border-color: rgba(24,28,36,0.14) !important;
  box-shadow: 0 6px 18px rgba(24,28,36,0.08) !important;
}

.btn-gacha-ten,
.btn-gacha-guaranteed {
  border-color: rgba(158,125,53,0.48) !important;
}

.btn-gacha-label,
.btn-gacha-cost,
.btn-gacha-ten .btn-gacha-label {
  color: var(--z-light-text) !important;
}

/* 入力欄も白基調へ */
input,
textarea,
select,
.friend-add-input,
.name-edit-input {
  background: rgba(255,255,255,0.92) !important;
  color: var(--z-light-text) !important;
  border-color: rgba(24,28,36,0.16) !important;
}

/* モーダル背景は暗すぎない半透明に */
.modal-overlay,
#name-edit-modal,
#shop-modal,
#notice-modal {
  background: rgba(248,247,242,0.64) !important;
}

.modal,
.name-edit-box {
  background: rgba(255,255,255,0.96) !important;
  color: var(--z-light-text) !important;
  border-color: rgba(24,28,36,0.12) !important;
  box-shadow: 0 18px 52px rgba(24,28,36,0.18) !important;
}

/* ローディングだけは白背景にして眩しすぎないグレー文字 */
#loading {
  background: var(--z-light-bg) !important;
}

.loading-txt {
  color: var(--z-light-sub) !important;
}

/* PC幅で見た時の外側影も少し軽く */
@media (min-width: 500px) {
  body {
    box-shadow: 0 0 24px rgba(24,28,36,0.16) !important;
  }
}



/* =========================================================
   101 Zeraphia Light Readability Patch
   - プリモア一覧の黒い画像周りを白基調へ
   - 白背景に飲まれていた詳細テキストを濃色へ
   - 既存構造は変更せず、末尾上書きのみ
   ========================================================= */

:root {
  --z-readable-text: #1b1b1f;
  --z-readable-sub: rgba(27,27,31,0.66);
  --z-readable-muted: rgba(27,27,31,0.46);
  --z-readable-panel: rgba(255,255,255,0.94);
  --z-readable-panel-soft: rgba(255,255,255,0.74);
  --z-readable-border: rgba(27,27,31,0.14);
  --z-readable-gold: #9c7a32;
  --z-readable-purple: #7452b8;
}

/* プリモア一覧：画像エリアの黒背景を撤去 */
#screen-zukan,
#screen-zukan .screen-scroll,
#screen-zukan #zukan-sub-box,
#box-grid.box-carousel,
.box-carousel-view,
.box-carousel-fixed,
.box-carousel-visual-row {
  background: transparent !important;
  background-color: transparent !important;
}

#screen-zukan {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.96) 0%, rgba(248,247,242,0.92) 44%, rgba(238,236,229,0.96) 100%) !important;
}

/* キャラ画像の台座だけ、黒ではなく淡い白グレーに */
.box-carousel-visual {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.96), rgba(238,236,229,0.78) 72%, rgba(226,224,218,0.70)) !important;
  border: 1px solid rgba(27,27,31,0.10) !important;
  box-shadow:
    0 8px 22px rgba(27,27,31,0.10),
    0 0 0 1px rgba(255,255,255,0.70) inset !important;
  overflow: hidden !important;
}

.box-carousel-img {
  background: transparent !important;
}

/* 左右矢印を白背景でも見える黒系へ */
.box-carousel-arrow {
  color: rgba(27,27,31,0.74) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 3px 12px rgba(27,27,31,0.18) !important;
}

.box-carousel-arrow:active {
  color: rgba(27,27,31,0.98) !important;
}

/* 画像下の名前・区切り線 */
.box-carousel-name,
.box-carousel-name.locked {
  color: var(--z-readable-text) !important;
  text-shadow: none !important;
}

.box-carousel-separator {
  background: linear-gradient(to right, transparent, rgba(27,27,31,0.18), transparent) !important;
  box-shadow: none !important;
}

/* 詳細カードを白で少し濃くして、中の文字を読めるように */
.box-carousel-detail,
.box-carousel-detail-scroll {
  color: var(--z-readable-text) !important;
}

.detail-lb-section,
.detail-skill-section,
.detail-skill-card,
.detail-skill-empty,
.box-carousel-locked-panel {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(27,27,31,0.12) !important;
  box-shadow:
    0 8px 22px rgba(27,27,31,0.08),
    0 0 0 1px rgba(255,255,255,0.62) inset !important;
  color: var(--z-readable-text) !important;
}

.detail-skill-card.is-ult {
  background: rgba(248,245,255,0.98) !important;
  border-color: rgba(116,82,184,0.24) !important;
}

/* 詳細テキスト一式：白文字を濃色へ強制 */
.detail-lb-label,
.detail-status-label,
.detail-lb-info,
.detail-section-title,
.detail-skill-meta span,
.detail-skill-desc,
.detail-skill-empty,
.detail-type-row,
.detail-type-val,
.detail-element-type-label,
.detail-owned-count,
.stat-name,
.stat-val {
  color: var(--z-readable-sub) !important;
  text-shadow: none !important;
}

.detail-status-val,
.detail-skill-name,
.detail-lb-title,
.detail-skill-title,
.detail-type-val,
.detail-owned-count strong,
.box-carousel-locked-title {
  color: var(--z-readable-text) !important;
  text-shadow: none !important;
}

.detail-lb-val {
  color: var(--z-readable-purple) !important;
  text-shadow: none !important;
}

.detail-skill-effect {
  color: #5f42a3 !important;
  text-shadow: none !important;
}

.detail-skill-badge {
  background: rgba(27,27,31,0.06) !important;
  border-color: rgba(27,27,31,0.14) !important;
  color: rgba(27,27,31,0.70) !important;
}

.detail-skill-card.is-ult .detail-skill-badge {
  background: rgba(116,82,184,0.12) !important;
  border-color: rgba(116,82,184,0.28) !important;
  color: #5f42a3 !important;
}

/* ステータス行の罫線も白背景用へ */
.detail-lb-row {
  border-bottom-color: rgba(27,27,31,0.10) !important;
}

/* 属性表示が薄くならないように */
.detail-element-type-icon {
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.90))
    drop-shadow(0 2px 5px rgba(27,27,31,0.18)) !important;
}

/* MOVEミニ盤面：白カード内で視認できるように少し濃く */
.detail-range-preview,
.detail-move-preview {
  background: rgba(27,27,31,0.06) !important;
  border-color: rgba(27,27,31,0.10) !important;
}

.detail-range-board,
.detail-move-board {
  background: rgba(27,27,31,0.08) !important;
  border-color: rgba(27,27,31,0.12) !important;
}

.detail-range-cell,
.detail-move-cell {
  background: rgba(255,255,255,0.58) !important;
  border-color: rgba(27,27,31,0.08) !important;
}

.detail-range-cell.self,
.detail-move-cell.self {
  background: #f1c94b !important;
}

.detail-range-cell.target,
.detail-move-cell.movable {
  background: #8fb5ff !important;
}

/* 未所持・ロック時の黒被せを白基調へ */
.box-carousel-visual.locked {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.95), rgba(232,230,224,0.78)) !important;
  border-color: rgba(27,27,31,0.12) !important;
}

.box-carousel-visual.locked::before {
  background:
    linear-gradient(to bottom, transparent, rgba(255,255,255,0.42)),
    repeating-linear-gradient(90deg, rgba(27,27,31,0.035) 0 1px, transparent 1px 7px) !important;
}

.box-carousel-lock-mark {
  background: rgba(255,255,255,0.88) !important;
  color: rgba(27,27,31,0.60) !important;
  border-color: rgba(27,27,31,0.18) !important;
  box-shadow: 0 8px 20px rgba(27,27,31,0.10) !important;
}

.box-carousel-locked-label,
.box-carousel-locked-no,
.box-carousel-locked-text {
  color: rgba(27,27,31,0.58) !important;
  text-shadow: none !important;
}

/* 下部ナビのアイコンが薄すぎたので少し濃く */
.bottom-nav-item img {
  filter: grayscale(0.20) brightness(0.72) saturate(0.95) !important;
  opacity: 0.82 !important;
}

.bottom-nav-item.active img {
  filter: brightness(1.02) saturate(1.06) drop-shadow(0 0 8px rgba(156,122,50,0.20)) !important;
  opacity: 1 !important;
}

.bottom-nav-label {
  color: rgba(27,27,31,0.52) !important;
}

.bottom-nav-item.active .bottom-nav-label {
  color: rgba(27,27,31,0.88) !important;
}

/* 共通の薄すぎる白文字救済 */
#screen-zukan .screen-scroll,
#screen-zukan .screen-scroll * {
  text-shadow: none;
}


/* =========================================================
   101 Zeraphia Gacha UI Polish Patch
   - ガチャ画面の視認性と余白を調整
   - 左の灰色感を除去
   - メインバナーを主役として見せる
   - ボタンと天井表示を上品に整理
   ========================================================= */

#screen-summon {
  background:
    radial-gradient(circle at top center, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(to bottom, #f7f6f1 0%, #f5f4ef 100%) !important;
}

.summon-layout {
  gap: 10px;
  padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  align-items: flex-start;
}

.summon-banner-list {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  gap: 10px;
  padding: 0;
  background: transparent !important;
  border-right: none;
  overflow-x: hidden;
  scrollbar-width: none;
}

.summon-banner-list::-webkit-scrollbar {
  display: none;
}

.summon-banner-card {
  border-radius: 12px;
  border: 1px solid rgba(24,28,36,0.12) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 6px 16px rgba(24,28,36,0.08) !important;
}

.summon-banner-card.active {
  border-color: rgba(158,125,53,0.48) !important;
  box-shadow:
    0 8px 20px rgba(24,28,36,0.10),
    0 0 0 1px rgba(158,125,53,0.16) inset !important;
}

.summon-banner-card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
  background: #fff;
}

.banner-desc-overlay {
  padding: 10px 5px 5px;
  background: linear-gradient(to top, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.60) 52%, rgba(255,255,255,0) 100%) !important;
}

.banner-card-title {
  font-size: 9px;
  line-height: 1.25;
  color: #17181c !important;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.summon-detail {
  min-width: 0;
  gap: 10px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.summon-detail-visual {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(24,28,36,0.10);
  box-shadow: 0 12px 28px rgba(24,28,36,0.10) !important;
}

.summon-detail-visual img {
  width: 100%;
  aspect-ratio: 1145 / 1370;
  max-height: 50dvh;
  object-fit: cover;
  object-position: center top;
  background: #fff;
  display: block;
}

.summon-detail-overlay {
  display: block;
  position: static;
  background: rgba(255,255,255,0.92) !important;
  border-top: 1px solid rgba(24,28,36,0.08);
  padding: 12px 14px 13px;
}

.summon-detail-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #17181c !important;
}

.summon-detail-desc {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(24,28,36,0.60) !important;
}

.summon-detail-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
  flex-shrink: 0;
}

.summon-detail-btns:has(.btn-gacha-guaranteed) {
  grid-template-columns: 1fr;
}

.btn-gacha {
  min-height: 82px;
  border-radius: 16px;
  gap: 6px;
  padding: 14px 10px 12px;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(24,28,36,0.12) !important;
  box-shadow: 0 10px 20px rgba(24,28,36,0.08) !important;
}

.btn-gacha-single {
  background: rgba(255,255,255,0.96) !important;
}

.btn-gacha-ten,
.btn-gacha-guaranteed {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,244,235,0.98) 100%) !important;
  border-color: rgba(158,125,53,0.40) !important;
  box-shadow:
    0 10px 20px rgba(24,28,36,0.08),
    0 0 0 1px rgba(158,125,53,0.08) inset !important;
}

.btn-gacha-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.btn-gacha-cost {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: rgba(77,90,120,0.88) !important;
}

.btn-gacha-gem-icon {
  width: 15px;
  height: 15px;
  margin-right: 2px;
}

.btn-gacha-guarantee-badge {
  background: rgba(255,255,255,0.98) !important;
  color: #9e7d35;
  border-color: rgba(158,125,53,0.52) !important;
  box-shadow: 0 4px 10px rgba(24,28,36,0.08);
}

.pity-counter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 12px 14px;
  margin-top: -2px;
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(24,28,36,0.08) !important;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(24,28,36,0.06) !important;
}

.pity-label {
  font-size: 11px;
  color: rgba(24,28,36,0.62) !important;
  letter-spacing: 0.08em;
}

.pity-bar-wrap {
  height: 6px;
  background: rgba(24,28,36,0.08) !important;
}

.pity-bar-fill {
  background: linear-gradient(90deg, #d8c08d 0%, #9e7d35 100%) !important;
}

.pity-num {
  font-size: 11px;
  color: rgba(24,28,36,0.62) !important;
  min-width: 52px;
}

.pity-note {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(24,28,36,0.56) !important;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  margin-top: -2px;
}

@media (max-width: 380px) {
  .summon-banner-list {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
  }

  .summon-layout {
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .summon-detail-visual img {
    max-height: 46dvh;
  }

  .btn-gacha {
    min-height: 78px;
  }

  .btn-gacha-label {
    font-size: 15px;
  }
}


/* =========================================================
   102 Zeraphia Gacha SE Fit Patch
   - iPhone SEなど縦が短い端末でガチャ画面が潰れないよう調整
   - 14系では現状の見え方を大きく変えない
   ========================================================= */

/* ガチャ画面全体を、固定ヘッダー＋下部ナビの内側で収める */
#screen-summon {
  overflow: hidden !important;
}

#screen-summon .summon-layout {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

/* 通常端末でも少しだけ余白を詰める */
.summon-detail {
  gap: 8px !important;
}

.summon-detail-visual img {
  max-height: 46dvh !important;
}

/* SE / 小型端末向け */
@media (max-width: 380px), (max-height: 700px) {
  :root {
    --page-header-h: 50px;
  }


  #screen-summon .summon-layout {
    gap: 8px !important;
    padding:
      8px
      8px
      calc(68px + env(safe-area-inset-bottom))
      8px !important;
    align-items: flex-start !important;
  }

  .summon-banner-list {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    gap: 8px !important;
  }

  .summon-banner-card {
    border-radius: 9px !important;
  }

  .banner-card-title {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  /* バナーをSEで潰れない高さに制御 */
  .summon-detail-visual {
    border-radius: 14px !important;
  }

  .summon-detail-visual img {
    aspect-ratio: 1145 / 1370 !important;
    max-height: 35dvh !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* タイトル説明はカード下ではなく薄くコンパクト化 */
  .summon-detail-overlay {
    padding: 8px 10px 9px !important;
  }

  .summon-detail-title {
    font-size: 17px !important;
    line-height: 1.15 !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.04em !important;
  }

  .summon-detail-desc {
    font-size: 10px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .summon-detail-btns {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .summon-detail-btns:has(.btn-gacha-guaranteed) {
    grid-template-columns: 1fr !important;
  }

  .btn-gacha {
    min-height: 62px !important;
    border-radius: 13px !important;
    padding: 10px 8px 9px !important;
    gap: 3px !important;
  }

  .btn-gacha-label {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
  }

  .btn-gacha-cost {
    font-size: 11px !important;
  }

  .btn-gacha-gem-icon {
    width: 13px !important;
    height: 13px !important;
  }

  .pity-counter {
    margin-top: 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    column-gap: 8px !important;
  }

  .pity-label,
  .pity-num {
    font-size: 9px !important;
  }

  .pity-bar-wrap {
    height: 5px !important;
  }

  .pity-note {
    font-size: 9px !important;
    line-height: 1.25 !important;
    margin-top: -3px !important;
    padding: 0 6px 4px !important;
  }
}

/* さらに縦がかなり短い端末用。SEでボタン見切れを防ぐ */
@media (max-height: 620px) {
  #screen-summon .summon-layout {
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  .summon-detail {
    gap: 6px !important;
  }

  .summon-detail-visual img {
    max-height: 31dvh !important;
  }

  .summon-detail-overlay {
    padding: 7px 9px !important;
  }

  .summon-detail-title {
    font-size: 16px !important;
  }

  .summon-detail-desc {
    display: none !important;
  }

  .btn-gacha {
    min-height: 58px !important;
    padding: 9px 8px 8px !important;
  }

  .pity-counter {
    padding: 7px 9px !important;
  }

  .pity-note {
    display: none !important;
  }
}



/* =========================================================
   103 Zeraphia Gacha Visual Polish Patch
   - 邂逅画面の上部タイトルの違和感を軽減
   - サムネ列とメインバナー周りの余白・視線導線を整理
   - 「undefined」表示を避けるため title fallback はHTML側で対応
   ========================================================= */

#screen-summon {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98) 0%, rgba(248,247,242,0.96) 44%, rgba(239,237,231,0.98) 100%) !important;
}







#screen-summon .summon-layout {
  gap: 10px !important;
  padding: 12px 10px calc(78px + env(safe-area-inset-bottom)) !important;
  align-items: flex-start !important;
  background: transparent !important;
}

/* 左サムネ列を「帯」ではなく小さな選択レールにする */
#screen-summon .summon-banner-list {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 0 !important;
  gap: 10px !important;
  background: transparent !important;
  border-right: none !important;
  overflow-y: auto !important;
}

#screen-summon .summon-banner-card {
  border-radius: 12px !important;
  border: 1px solid rgba(24,28,36,0.10) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 8px 18px rgba(24,28,36,0.08) !important;
}

#screen-summon .summon-banner-card.active {
  border-color: rgba(158,125,53,0.42) !important;
  box-shadow:
    0 10px 20px rgba(24,28,36,0.08),
    0 0 0 1px rgba(158,125,53,0.14) inset !important;
}

#screen-summon .summon-banner-card img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

#screen-summon .banner-desc-overlay {
  position: static !important;
  padding: 0 !important;
  background: none !important;
}

#screen-summon .banner-card-title {
  display: block !important;
  padding: 4px 3px 6px !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  color: #7f6a45 !important;
  text-align: center !important;
  text-shadow: none !important;
  word-break: keep-all !important;
}

/* 右側メイン */
#screen-summon .summon-detail {
  gap: 10px !important;
  overflow: visible !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

#screen-summon .summon-detail-visual {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(24,28,36,0.08) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 12px 28px rgba(24,28,36,0.08) !important;
}

#screen-summon .summon-detail-visual img {
  width: 100% !important;
  aspect-ratio: 1145 / 1370 !important;
  object-fit: cover !important;
  object-position: center top !important;
  max-height: 45dvh !important;
  display: block !important;
}

#screen-summon .summon-detail-overlay {
  display: none !important;
}

#screen-summon .summon-detail-btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 !important;
}

#screen-summon .summon-detail-btns:has(.btn-gacha-guaranteed) {
  grid-template-columns: 1fr !important;
}

#screen-summon .btn-gacha {
  min-height: 74px !important;
  border-radius: 16px !important;
  padding: 12px 8px 11px !important;
}

#screen-summon .btn-gacha-label {
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
}

#screen-summon .btn-gacha-cost {
  font-size: 12px !important;
}

#screen-summon .pity-counter {
  margin-top: -2px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

#screen-summon .pity-note {
  text-align: center !important;
  padding: 0 6px calc(8px + env(safe-area-inset-bottom)) !important;
  margin-top: -2px !important;
}

/* 小型端末はさらに少し詰める */
@media (max-width: 380px), (max-height: 700px) {


  #screen-summon .summon-layout {
    gap: 8px !important;
    padding: 8px 8px calc(68px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-banner-list {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    gap: 8px !important;
  }

  #screen-summon .summon-banner-card {
    border-radius: 10px !important;
  }

  #screen-summon .banner-card-title {
    font-size: 7px !important;
    padding: 3px 2px 5px !important;
  }

  #screen-summon .summon-detail {
    gap: 8px !important;
  }

  #screen-summon .summon-detail-visual {
    border-radius: 15px !important;
  }

  #screen-summon .summon-detail-visual img {
    max-height: 34dvh !important;
  }

  #screen-summon .summon-detail-btns {
    gap: 8px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 60px !important;
    border-radius: 14px !important;
    padding: 10px 6px 9px !important;
  }

  #screen-summon .btn-gacha-label {
    font-size: 14px !important;
  }

  #screen-summon .btn-gacha-cost {
    font-size: 11px !important;
  }

  #screen-summon .pity-counter {
    padding: 8px 10px !important;
  }

  #screen-summon .pity-note {
    font-size: 9px !important;
    line-height: 1.25 !important;
    padding: 0 4px 4px !important;
  }
}


/* =========================================================
   Gacha screen SE-size fit patch
   - iPhone SE等の小型端末でガチャバナー下部文字が見切れないよう調整
   ========================================================= */
@media (max-width: 380px), (max-height: 700px) {
  #screen-summon .summon-layout {
    gap: 7px !important;
    padding: 8px 7px calc(64px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-banner-list {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    gap: 7px !important;
  }

  #screen-summon .summon-detail {
    gap: 7px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-detail-visual {
    border-radius: 14px !important;
  }

  #screen-summon .summon-detail-visual img {
    max-height: 39dvh !important;
    object-position: center bottom !important;
  }

  #screen-summon .summon-detail-btns {
    gap: 7px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 56px !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
  }

  #screen-summon .btn-gacha-label {
    font-size: 13px !important;
  }

  #screen-summon .btn-gacha-cost {
    font-size: 10px !important;
  }

  #screen-summon .pity-counter {
    padding: 7px 9px !important;
  }

  #screen-summon .pity-note {
    font-size: 8px !important;
    line-height: 1.25 !important;
    padding: 0 2px 2px !important;
  }
}

@media (max-width: 375px) and (max-height: 670px) {
  #screen-summon .summon-detail-visual img {
    max-height: 40dvh !important;
    object-position: center bottom !important;
  }
}


/* =========================================================
   104 Zeraphia Gacha Contain + Header Polish Patch
   - SEサイズでもガチャバナー全体を見切れにくくする
   - 巡行/プリモア/設定/邂逅の左上見出しを統一
   ========================================================= */

/* 左上見出しの共通トーンを統一 */
#screen-ninmu .header-title,
#screen-zukan .header-title,
#screen-summon .header-title,
#screen-setting .header-title {
  left: 18px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #8f7440 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75) !important;
}

#screen-ninmu .header-title::after,
#screen-zukan .header-title::after,
#screen-summon .header-title::after,
#screen-setting .header-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183,155,94,0.85), rgba(183,155,94,0.15));
}

/* ガチャバナーは基本的に全体表示を優先 */
#screen-summon .summon-detail-visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98), rgba(246,244,238,0.96)) !important;
}

#screen-summon .summon-detail-visual img {
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(255,255,255,0.96) !important;
}

/* 小型端末では画像全体表示を最優先しつつ、下の余白を詰める */
@media (max-width: 380px), (max-height: 700px) {
  #screen-ninmu .header-title,
  #screen-zukan .header-title,
  #screen-summon .header-title,
  #screen-setting .header-title {
    font-size: 18px !important;
  }

  #screen-summon .summon-layout {
    gap: 7px !important;
    padding: 8px 7px calc(60px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-banner-list {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    gap: 7px !important;
  }

  #screen-summon .summon-detail {
    gap: 7px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-detail-visual {
    border-radius: 14px !important;
  }

  #screen-summon .summon-detail-visual img {
    max-height: 42dvh !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #screen-summon .summon-detail-btns {
    gap: 7px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 54px !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
  }

  #screen-summon .btn-gacha-label {
    font-size: 13px !important;
  }

  #screen-summon .btn-gacha-cost {
    font-size: 10px !important;
  }

  #screen-summon .pity-counter {
    padding: 7px 9px !important;
    margin-top: -1px !important;
  }

  #screen-summon .pity-label,
  #screen-summon .pity-num {
    font-size: 8px !important;
  }

  #screen-summon .pity-bar-wrap {
    height: 5px !important;
  }

  #screen-summon .pity-note {
    font-size: 8px !important;
    line-height: 1.25 !important;
    padding: 0 2px 2px !important;
    margin-top: -2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* iPhone SE相当。下部ナビ上の無駄な空間を少し詰める */
@media (max-width: 375px) and (max-height: 670px) {
  #screen-summon .summon-detail-visual img {
    max-height: 43dvh !important;
  }

  #screen-summon .summon-detail {
    gap: 6px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 52px !important;
  }

  #screen-summon .pity-note {
    font-size: 7.5px !important;
  }
}


/* =========================================================
   105 Zeraphia Gacha Banner 1145x1000 Fit Patch
   - 新しい横長寄りバナー（1145×1000）をきれいに表示
   - containによる余白を減らし、coverでバナーらしく大きく見せる
   - SEサイズでも上下の重要部分が切れにくいよう表示領域を再調整
   ========================================================= */

/* ガチャ画面のバナー表示枠を、新バナー比率 1145:1000 に合わせる */
#screen-summon .summon-detail-visual {
  aspect-ratio: 1145 / 1000 !important;
  width: 100% !important;
  max-height: 44dvh !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98), rgba(246,244,238,0.96)) !important;
}

/* 1145×1000画像は、containではなくcoverで大きく見せる */
#screen-summon .summon-detail-visual img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1145 / 1000 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  background: rgba(255,255,255,0.96) !important;
}

/* ガチャ画面全体の間隔を少し整理 */
#screen-summon .summon-layout {
  gap: 9px !important;
}

#screen-summon .summon-detail {
  gap: 9px !important;
}

/* 左サムネも新バナー比率に合わせて、潰れ感を減らす */
#screen-summon .summon-banner-card img {
  aspect-ratio: 1145 / 1000 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 小型端末向け。画像は大きく、ボタン/天井は少し詰める */
@media (max-width: 380px), (max-height: 700px) {
  #screen-summon .summon-layout {
    gap: 7px !important;
    padding: 8px 7px calc(60px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-banner-list {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    gap: 7px !important;
  }

  #screen-summon .summon-detail {
    gap: 7px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  #screen-summon .summon-detail-visual {
    aspect-ratio: 1145 / 1000 !important;
    max-height: 41dvh !important;
    border-radius: 14px !important;
  }

  #screen-summon .summon-detail-visual img {
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #screen-summon .summon-detail-btns {
    gap: 7px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 54px !important;
    border-radius: 14px !important;
    padding: 8px 6px !important;
  }

  #screen-summon .btn-gacha-label {
    font-size: 13px !important;
  }

  #screen-summon .btn-gacha-cost {
    font-size: 10px !important;
  }

  #screen-summon .pity-counter {
    padding: 7px 9px !important;
    margin-top: -1px !important;
  }

  #screen-summon .pity-label,
  #screen-summon .pity-num {
    font-size: 8px !important;
  }

  #screen-summon .pity-bar-wrap {
    height: 5px !important;
  }

  #screen-summon .pity-note {
    font-size: 8px !important;
    line-height: 1.25 !important;
    padding: 0 2px 2px !important;
    margin-top: -2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* iPhone SE相当。表示はさらに少しだけ引き締める */
@media (max-width: 375px) and (max-height: 670px) {
  #screen-summon .summon-detail-visual {
    max-height: 42dvh !important;
  }

  #screen-summon .summon-detail {
    gap: 6px !important;
  }

  #screen-summon .btn-gacha {
    min-height: 52px !important;
  }

  #screen-summon .pity-note {
    font-size: 7.5px !important;
  }
}


/* =========================================================
   106 Zeraphia Header Position + Gold Bottom Nav Patch
   - 全メニューの左上見出しを少し下げる
   - ボトムナビの文字色を見出しと同系統のゴールドへ
   ========================================================= */

:root {
  --z-menu-gold: #8f7440;
  --z-menu-gold-soft: rgba(143,116,64,0.62);
  --z-menu-gold-muted: rgba(143,116,64,0.42);
}

/* すべての通常メニュー見出しを少し下げる */
.screen .header {
  padding-top: 20px !important;
  padding-bottom: 12px !important;
  min-height: 58px !important;
  align-items: flex-start !important;
}

/* 左上見出し位置・色を統一 */
.screen .header-title {
  top: 19px !important;
  left: 18px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: var(--z-menu-gold) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* 見出し下の小さなラインも少し下げた位置に自然表示 */
.screen .header-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183,155,94,0.85), rgba(183,155,94,0.15));
}

/* 戻るボタンがある画面も位置を合わせる */
.screen .back-btn,
.screen .zukan-back-btn {
  margin-top: 2px !important;
  color: var(--z-menu-gold-soft) !important;
}

/* ボトムナビ文字色をゴールド系へ */
.bottom-nav-label {
  color: var(--z-menu-gold-muted) !important;
  text-shadow: none !important;
}

.bottom-nav-item.active .bottom-nav-label {
  color: var(--z-menu-gold) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* 非選択アイコンも少しだけゴールド寄りに見せる */
.bottom-nav-item img {
  opacity: 0.78 !important;
}

.bottom-nav-item.active img {
  opacity: 1 !important;
  filter:
    brightness(1.02)
    saturate(1.05)
    sepia(0.10)
    drop-shadow(0 0 8px rgba(143,116,64,0.22)) !important;
}

/* 小型端末では下げ幅を少しだけ控えめに */
@media (max-width: 380px), (max-height: 700px) {
  .screen .header {
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    min-height: 54px !important;
  }

  .screen .header-title {
    top: 17px !important;
    font-size: 18px !important;
  }
}


/* =========================================================
   107 Zeraphia Soft Text + Bottom Nav Position Patch
   - 黒文字をグレー/ゴールド寄りへ変更
   - ボトムナビ画像位置を少し下げる
   ========================================================= */

:root {
  --z-text-main-soft: #4b4640;
  --z-text-sub-soft: rgba(75,70,64,0.62);
  --z-text-muted-soft: rgba(75,70,64,0.42);
  --z-text-gold-soft: #8f7440;
}

/* 白背景上の黒文字を少し柔らかく */
body,
.screen,
.screen-scroll {
  color: var(--z-text-main-soft) !important;
}

/* プリモア一覧まわり：黒を抑えてグレー/ゴールドへ */
.box-carousel-name,
.detail-status-val,
.detail-type-val,
.detail-owned-count strong,
.stat-card-val,
.setting-row-label,
.ninmu-chapter-title,
.ninmu-test-btn-title,
.friend-section-title,
.friend-card-name,
.friend-search-card-name,
.result-name {
  color: var(--z-text-main-soft) !important;
  text-shadow: none !important;
}

.detail-lb-title,
.detail-skill-title,
.detail-section-title,
.detail-lb-val {
  color: var(--z-text-gold-soft) !important;
  text-shadow: none !important;
}

.detail-lb-label,
.detail-status-label,
.detail-lb-info,
.detail-type-row,
.detail-element-type-label,
.detail-owned-count,
.detail-skill-desc,
.detail-skill-meta span,
.stat-name,
.stat-val,
.stat-card-label,
.card-name,
.setting-row-sub,
.ninmu-chapter-label,
.ninmu-test-btn-sub,
.friend-card-meta,
.friend-card-stats,
.friend-chara-name,
.friend-chara-stats,
.box-carousel-count,
.box-carousel-count-slash {
  color: var(--z-text-sub-soft) !important;
  text-shadow: none !important;
}

/* 画像下のキャラ名は主張しすぎない濃度に */
.box-carousel-name {
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* 左右矢印も黒すぎない色へ */
.box-carousel-arrow {
  color: rgba(143,116,64,0.72) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* 詳細カード内の強い黒を少し柔らかく */
.detail-lb-section,
.detail-skill-section,
.detail-skill-card,
.box-carousel-locked-panel {
  color: var(--z-text-main-soft) !important;
}

/* ボトムナビ：画像位置を少し下げる */
.bottom-nav-item {
  justify-content: flex-end !important;
  padding-top: 2px !important;
}

.bottom-nav-item img {
  transform: translateY(4px) !important;
}

/* タップ時も下げ位置を維持 */
.bottom-nav-item:not(.active):active img {
  transform: translateY(4px) scale(0.94) !important;
}

/* 選択中も上に跳ねすぎないようにする */
.bottom-nav-item.active img {
  transform: translateY(0px) scale(1.06) !important;
}

/* ラベルとの間隔を少し詰めて、全体を下に落ち着かせる */
.bottom-nav-label {
  margin-top: -2px !important;
  padding-bottom: 5px !important;
}

/* SEなど小型端末ではさらに少しだけ下げる */
@media (max-width: 380px), (max-height: 700px) {
  .bottom-nav-item img {
    transform: translateY(5px) !important;
  }

  .bottom-nav-item:not(.active):active img {
    transform: translateY(5px) scale(0.94) !important;
  }

  .bottom-nav-item.active img {
    transform: translateY(1px) scale(1.05) !important;
  }

  .bottom-nav-label {
    margin-top: -3px !important;
    padding-bottom: 4px !important;
  }
}

/* =========================================================
   108 Modal / Gacha Decision Button Text Visibility Patch
   - 白背景ボタン上の白文字を、グレー〜ゴールド系へ固定
   - 結晶購入 / 購入確認 / ガチャ確認 / ガチャ実行ボタン対象
   ========================================================= */

:root {
  --z-decision-text: #4b4640;
  --z-decision-gold: #8f7440;
  --z-decision-sub: rgba(75,70,64,0.68);
}

/* 結晶購入・購入確認・ガチャ確認などの決定ボタン */
#paywall-modal .btn-pay,
#shop-confirm-modal .btn-pay,
#summon-confirm-modal .btn-pay,
#limitbreak-confirm-modal .btn-pay,
#limitbreak-complete-modal .btn-pay,
.modal-overlay .btn-pay {
  color: var(--z-decision-gold) !important;
  text-shadow: none !important;
}

/* ボタン内にspan等が入っても白文字に戻らないようにする */
#paywall-modal .btn-pay *,
#shop-confirm-modal .btn-pay *,
#summon-confirm-modal .btn-pay *,
#limitbreak-confirm-modal .btn-pay *,
#limitbreak-complete-modal .btn-pay *,
.modal-overlay .btn-pay * {
  color: var(--z-decision-gold) !important;
  text-shadow: none !important;
}

/* ガチャを引くボタン：通常画面・詳細モーダル・10連結果フッター共通 */
.btn-gacha,
.btn-gacha-single,
.btn-gacha-ten,
.btn-gacha-guaranteed,
#gacha-detail-modal .btn-gacha,
#screen-summon .btn-gacha,
.ten-result-again-btn {
  color: var(--z-decision-text) !important;
  text-shadow: none !important;
}

.btn-gacha-label,
.btn-gacha-ten .btn-gacha-label,
.btn-gacha-cost,
.btn-gacha-guarantee-badge,
#gacha-detail-modal .btn-gacha-label,
#gacha-detail-modal .btn-gacha-cost,
#screen-summon .btn-gacha-label,
#screen-summon .btn-gacha-cost,
.ten-result-again-btn,
.ten-result-again-btn * {
  color: var(--z-decision-gold) !important;
  text-shadow: none !important;
}

/* コスト部分は少しだけ控えめに */
.btn-gacha-cost,
#gacha-detail-modal .btn-gacha-cost,
#screen-summon .btn-gacha-cost {
  color: var(--z-decision-sub) !important;
}

/* disabled時も白ではなく、薄いグレーにする */
.btn-gacha:disabled,
.btn-gacha:disabled .btn-gacha-label,
.btn-gacha:disabled .btn-gacha-cost,
.btn-pay:disabled,
.btn-pay:disabled * {
  color: rgba(75,70,64,0.36) !important;
  text-shadow: none !important;
}


/* =========================================================
   Box Carousel: Home Button
   プリモア一覧の詳細画面からホーム設定できるボタン
   ========================================================= */
.box-carousel-home-btn {
  display: block;
  width: min(100%, 260px);
  margin: 4px auto 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(178,140,58,0.55);
  background: linear-gradient(135deg, rgba(214,178,92,0.96), rgba(252,246,214,0.90));
  color: #4a3514;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: "Noto Serif JP", serif;
  box-shadow:
    0 6px 16px rgba(143,116,64,0.14),
    inset 0 1px 0 rgba(255,255,255,0.60);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.box-carousel-home-btn:active {
  transform: scale(0.985);
  filter: brightness(0.96);
}


/* =========================================================
   Box Carousel: Home Button inside scroll detail
   固定エリアではなく、共鳴Lvカードの直上に配置する
   ========================================================= */
.box-carousel-detail .box-carousel-home-btn-in-detail {
  margin: 0 auto 12px !important;
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   109 Zeraphia / Alchemia Encounter Gacha Effect
   - ガチャ演出を「召喚」ではなく「白いアルケミアでの邂逅」に寄せる
   - 既存DOMとJS導線を維持し、CSS演出だけで世界観を強化
   ========================================================= */

#summon-standby {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,1) 0%, rgba(249,247,240,0.98) 28%, rgba(236,228,207,0.94) 56%, rgba(202,184,142,0.84) 78%, rgba(37,34,28,0.94) 100%) !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,1) 0%, rgba(249,247,240,0.98) 28%, rgba(236,228,207,0.94) 56%, rgba(202,184,142,0.84) 78%, rgba(37,34,28,0.94) 100%) !important;
  background-size: auto !important;
  background-position: center !important;
  overflow: hidden;
  isolation: isolate;
}

#summon-standby::after {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 35%, rgba(143,116,64,0.18) 68%, rgba(0,0,0,0.72) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.28)) !important;
  z-index: 1;
}

.standby-alchemia-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.standby-orbit,
.standby-core,
.standby-light-fragment {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.standby-orbit {
  border-radius: 50%;
  border: 1px solid rgba(143,116,64,0.34);
  box-shadow:
    0 0 18px rgba(255,255,255,0.48),
    inset 0 0 16px rgba(255,255,255,0.35);
}

.standby-orbit-1 {
  width: min(74vw, 318px);
  height: min(74vw, 318px);
  border-top-color: rgba(255,255,255,0.82);
  border-right-color: rgba(143,116,64,0.12);
  animation: standbyOrbitRotate 14s linear infinite;
}

.standby-orbit-2 {
  width: min(54vw, 232px);
  height: min(54vw, 232px);
  border-left-color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(143,116,64,0.18);
  animation: standbyOrbitRotateReverse 9s linear infinite;
}

.standby-orbit-3 {
  width: min(31vw, 132px);
  height: min(31vw, 132px);
  border-color: rgba(255,255,255,0.56);
  animation: standbyPulse 2.6s ease-in-out infinite;
}

.standby-core {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow:
    0 0 18px rgba(255,255,255,0.95),
    0 0 44px rgba(214,188,126,0.65),
    0 0 86px rgba(165,202,255,0.32);
  animation: standbyCoreBeat 1.8s ease-in-out infinite;
}

.standby-light-fragment {
  width: 2px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.92), transparent);
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
  opacity: 0.72;
}

.standby-light-fragment-1 { transform: translate(-120px, -128px) rotate(28deg); }
.standby-light-fragment-2 { transform: translate(104px, 74px) rotate(-36deg); height: 40px; opacity: 0.46; }
.standby-light-fragment-3 { transform: translate(-86px, 104px) rotate(61deg); height: 34px; opacity: 0.5; }

.standby-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(45,42,36,0.9) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 0 18px rgba(255,255,255,0.95) !important;
  font-family: "Cinzel", "Noto Serif JP", serif;
  animation: standbyTextBreath 1.8s ease-in-out infinite !important;
}

.standby-main-copy {
  font-size: 17px;
  letter-spacing: 0.22em;
  font-weight: 700;
}

.standby-sub-copy {
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(143,116,64,0.82);
}

#summon-standby.is-starting .standby-orbit-1,
#summon-standby.is-starting .standby-orbit-2,
#summon-standby.is-starting .standby-orbit-3 {
  animation-duration: 1.1s;
  box-shadow:
    0 0 28px rgba(255,255,255,0.8),
    0 0 78px rgba(214,188,126,0.55),
    inset 0 0 20px rgba(255,255,255,0.55);
}

#summon-standby.is-starting .standby-core {
  animation: standbyStartCore 0.42s ease-out forwards;
}

@keyframes standbyOrbitRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes standbyOrbitRotateReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes standbyPulse {
  0%,100% { opacity: 0.36; transform: translate(-50%, -50%) scale(0.94); }
  50%     { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes standbyCoreBeat {
  0%,100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.8; }
  50%     { transform: translate(-50%, -50%) scale(1.26); opacity: 1; }
}

@keyframes standbyStartCore {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}

@keyframes standbyTextBreath {
  0%,100% { opacity: 0.46; transform: translateY(0); }
  50%     { opacity: 1;    transform: translateY(-2px); }
}

/* Reveal base */
#reveal-modal {
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, #f8f5ed 38%, #eee5d0 74%, #d7c59f 100%) !important;
  overflow: hidden;
  isolation: isolate;
}

#reveal-bg {
  z-index: 1;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal;
  filter: none;
}

#reveal-overlay {
  z-index: 2;
}

#reveal-alchemia-effect {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

#reveal-modal.active #reveal-alchemia-effect {
  opacity: 1;
}

.reveal-circle,
.reveal-axis,
.reveal-wing-light,
.reveal-glyph {
  position: absolute;
  left: 50%;
  top: 42%;
  pointer-events: none;
}

.reveal-circle {
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.76);
  border: 1px solid rgba(143,116,64,0.22);
  box-shadow:
    0 0 18px rgba(255,255,255,0.62),
    inset 0 0 18px rgba(255,255,255,0.45);
}

.reveal-circle-outer { width: min(88vw, 380px); height: min(88vw, 380px); }
.reveal-circle-mid   { width: min(64vw, 276px); height: min(64vw, 276px); }
.reveal-circle-inner { width: min(36vw, 154px); height: min(36vw, 154px); }

.reveal-axis {
  width: 1px;
  height: min(82vw, 350px);
  background: linear-gradient(to bottom, transparent, rgba(143,116,64,0.26), rgba(255,255,255,0.86), rgba(143,116,64,0.24), transparent);
  transform: translate(-50%, -50%);
  opacity: 0.0;
}

.reveal-axis-h {
  transform: translate(-50%, -50%) rotate(90deg);
}

.reveal-wing-light {
  width: 42vw;
  max-width: 180px;
  height: 110px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(12px);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.78), rgba(214,188,126,0.16) 50%, transparent 72%);
}

.reveal-wing-left  { transform: translate(-122%, -42%) rotate(-17deg); }
.reveal-wing-right { transform: translate(22%, -42%) rotate(17deg); }

.reveal-glyph {
  width: 2px;
  height: 68px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.94), transparent);
  box-shadow: 0 0 16px rgba(255,255,255,0.86);
}

.reveal-glyph-1 { transform: translate(-132px, -152px) rotate(34deg); }
.reveal-glyph-2 { transform: translate(122px, -128px) rotate(-44deg); height: 52px; }
.reveal-glyph-3 { transform: translate(-14px, 116px) rotate(90deg); height: 82px; }

#reveal-alchemia-effect.phase-forming .reveal-circle-outer { animation: revealCircleBirth 0.9s cubic-bezier(.16,.8,.18,1) forwards, revealSlowSpin 9s linear infinite 0.9s; }
#reveal-alchemia-effect.phase-forming .reveal-circle-mid   { animation: revealCircleBirth 0.75s cubic-bezier(.16,.8,.18,1) forwards reverse, revealSlowSpinReverse 7.5s linear infinite 0.75s; }
#reveal-alchemia-effect.phase-forming .reveal-circle-inner { animation: revealCirclePulse 1.4s ease-in-out infinite; }

#reveal-alchemia-effect.phase-connect .reveal-axis,
#reveal-alchemia-effect.phase-crack .reveal-axis,
#reveal-alchemia-effect.phase-open .reveal-axis {
  opacity: 0.86;
  animation: revealAxisDraw 0.7s ease-out forwards;
}

#reveal-alchemia-effect.phase-crack .reveal-glyph,
#reveal-alchemia-effect.phase-open .reveal-glyph {
  opacity: 1;
  animation: revealGlyphFall 1.2s ease-out infinite;
}

#reveal-alchemia-effect.phase-open .reveal-wing-light {
  opacity: 1;
  animation: revealWingOpen 1.1s ease-out forwards;
}

#reveal-alchemia-effect.phase-open .reveal-circle-outer,
#reveal-alchemia-effect.phase-open .reveal-circle-mid,
#reveal-alchemia-effect.phase-open .reveal-circle-inner {
  border-color: rgba(143,116,64,0.34);
  box-shadow:
    0 0 24px rgba(255,255,255,0.86),
    0 0 72px rgba(214,188,126,0.44),
    inset 0 0 22px rgba(255,255,255,0.62);
}

#reveal-alchemia-effect.is-new.phase-open .reveal-circle-inner {
  border-color: rgba(214,188,126,0.62);
  box-shadow:
    0 0 26px rgba(255,255,255,0.96),
    0 0 84px rgba(214,188,126,0.72),
    inset 0 0 28px rgba(255,255,255,0.7);
}

#reveal-alchemia-effect.is-known.phase-open .reveal-circle-inner {
  border-color: rgba(164,170,178,0.44);
  box-shadow:
    0 0 22px rgba(255,255,255,0.78),
    0 0 58px rgba(160,170,185,0.36),
    inset 0 0 18px rgba(255,255,255,0.5);
}

@keyframes revealCircleBirth {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-32deg); filter: blur(6px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0); }
}

@keyframes revealCirclePulse {
  0%,100% { opacity: 0.54; transform: translate(-50%, -50%) scale(0.88); }
  50%     { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes revealSlowSpin {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

@keyframes revealSlowSpinReverse {
  from { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes revealAxisDraw {
  0%   { transform: translate(-50%, -50%) scaleY(0.05); opacity: 0; }
  100% { transform: translate(-50%, -50%) scaleY(1); opacity: 0.86; }
}

@keyframes revealGlyphFall {
  0%   { opacity: 0; filter: blur(3px); }
  25%  { opacity: 1; filter: blur(0); }
  100% { opacity: 0; top: 48%; filter: blur(7px); }
}

@keyframes revealWingOpen {
  0%   { opacity: 0; transform: translate(-50%, -42%) scaleX(0.2); }
  100% { opacity: 1; }
}

#reveal-content {
  z-index: 12 !important;
  top: 0;
  bottom: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

#reveal-content:not(.show) #reveal-chara-img,
#reveal-content:not(.show) .reveal-info-box,
#reveal-content:not(.show) #reveal-encounter-label,
#reveal-content:not(.show) #reveal-close-btn {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

#reveal-content.show #reveal-chara-img {
  animation: encounterCharacterIn 0.9s cubic-bezier(.13,.88,.18,1) forwards;
}

#reveal-chara-img {
  width: min(64vw, 260px) !important;
  height: min(64vw, 260px) !important;
  border-radius: 26px !important;
  object-fit: cover !important;
  border: 1px solid rgba(143,116,64,0.22);
  box-shadow:
    0 22px 52px rgba(64,54,36,0.22),
    0 0 50px rgba(255,255,255,0.88),
    0 0 92px rgba(214,188,126,0.36) !important;
  margin-bottom: 96px !important;
}

#reveal-encounter-label {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  text-align: center;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(72,62,43,0.76);
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 14px rgba(255,255,255,0.9);
}

#reveal-encounter-label.is-new {
  color: rgba(143,116,64,0.92);
}

#reveal-encounter-label.is-known {
  color: rgba(83,88,96,0.72);
}

.reveal-info-box {
  padding: 54px 0 calc(92px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top,
    rgba(248,246,239,0.96) 0%,
    rgba(248,246,239,0.88) 42%,
    rgba(248,246,239,0.28) 76%,
    rgba(248,246,239,0) 100%) !important;
  color: #2f2b24;
}

#reveal-name {
  color: rgba(34,32,28,0.94) !important;
  font-family: "Noto Serif JP", serif;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.9) !important;
}

#reveal-encounter-copy {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(84,76,58,0.72);
}

#reveal-encounter-copy.is-new {
  color: rgba(143,116,64,0.84);
}

#reveal-close-btn {
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(143,116,64,0.28) !important;
  color: rgba(76,65,43,0.86) !important;
  box-shadow: 0 8px 22px rgba(64,54,36,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@keyframes encounterCharacterIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.86); filter: blur(10px) brightness(1.8); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.04); filter: blur(0) brightness(1.2); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}

.final-gacha-flash {
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0.98) 20%,
      rgba(232,213,164,0.66) 42%,
      rgba(255,255,255,0.24) 68%,
      rgba(255,255,255,0) 100%) !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #reveal-chara-img {
    width: min(58vw, 220px) !important;
    height: min(58vw, 220px) !important;
    margin-bottom: 88px !important;
  }

  #reveal-encounter-label {
    top: calc(44px + env(safe-area-inset-top));
    font-size: 10px;
  }

  #reveal-name {
    font-size: 20px !important;
  }

  #reveal-encounter-copy {
    font-size: 11px;
  }
}


/* =========================================================
   110 Pure Alchemia Encounter / image-free gacha overrides
   - summon_01〜05、summon_result などの演出画像に依存しない
   - 白い余白・円環・光粒・中心核だけで邂逅を表現する
   ========================================================= */

#summon-standby,
#summon-standby.active {
  background-image:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,1) 0%, rgba(250,248,242,0.98) 26%, rgba(238,230,210,0.95) 54%, rgba(211,192,149,0.78) 76%, rgba(30,28,23,0.96) 100%) !important;
}

#summon-standby::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,0.34) 48%, transparent 66%),
    radial-gradient(circle at 24% 28%, rgba(255,255,255,0.46), transparent 18%),
    radial-gradient(circle at 74% 64%, rgba(214,188,126,0.24), transparent 22%);
  opacity: 0.74;
  animation: alchemiaAmbientDrift 8s ease-in-out infinite;
}

#summon-standby::after {
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 38%, rgba(143,116,64,0.14) 66%, rgba(0,0,0,0.62) 100%) !important;
}

#reveal-bg {
  background-image: none !important;
  opacity: 0 !important;
}

#reveal-modal::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.98), transparent 34%),
    linear-gradient(120deg, transparent 34%, rgba(255,255,255,0.36) 48%, transparent 62%),
    radial-gradient(circle at 50% 86%, rgba(214,188,126,0.18), transparent 36%);
  animation: alchemiaAmbientDrift 7.5s ease-in-out infinite;
}

#reveal-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.88) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(214,188,126,0.48) 0 1px, transparent 1.4px);
  background-size: 58px 58px, 91px 91px;
  background-position: 0 0, 18px 30px;
  animation: alchemiaParticleLift 6s linear infinite;
}

#reveal-alchemia-effect.phase-open {
  animation: alchemiaOpenShock 0.9s cubic-bezier(.12,.82,.16,1) both;
}

.ten-card-alchemia-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.96), rgba(242,235,218,0.92) 48%, rgba(42,37,29,0.96) 100%);
  border: 1px solid rgba(214,188,126,0.34);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.30), 0 0 18px rgba(214,188,126,0.18);
}

.ten-card-alchemia-back::before,
.ten-card-alchemia-back::after,
.ten-card-back-ring,
.ten-card-back-core {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ten-card-alchemia-back::before {
  content: "";
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(143,116,64,0.38);
  box-shadow: 0 0 18px rgba(255,255,255,0.58), inset 0 0 14px rgba(255,255,255,0.34);
}

.ten-card-alchemia-back::after {
  content: "";
  width: 1px;
  height: 82%;
  background: linear-gradient(to bottom, transparent, rgba(143,116,64,0.4), rgba(255,255,255,0.86), rgba(143,116,64,0.32), transparent);
}

.ten-card-back-ring {
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: 0 0 16px rgba(255,255,255,0.62);
}

.ten-card-back-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 14px rgba(255,255,255,0.95), 0 0 34px rgba(214,188,126,0.64);
}

@keyframes alchemiaAmbientDrift {
  0%,100% { transform: translate3d(-1.5%, 0, 0) rotate(0deg); opacity: 0.58; }
  50%     { transform: translate3d(1.5%, -1.5%, 0) rotate(2deg); opacity: 0.86; }
}

@keyframes alchemiaParticleLift {
  from { background-position: 0 42px, 18px 80px; }
  to   { background-position: 0 -96px, 18px -70px; }
}

@keyframes alchemiaOpenShock {
  0%   { filter: blur(0); transform: scale(1); }
  48%  { filter: blur(1px); transform: scale(1.025); }
  100% { filter: blur(0); transform: scale(1); }
}


/* =========================================================
   09-B Ten Result — Alchemia Primor Frame
   10連結果カード用：白いアルケミア世界観フレーム
   ========================================================= */

/* 10連結果全体を、黒いガチャ結果ではなく「白い邂逅記録」へ寄せる */
#ten-result-modal {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.98) 0%, rgba(248,246,239,0.96) 34%, rgba(230,226,214,0.92) 100%);
}

#ten-result-modal .modal,
#ten-result-modal .ten-result-modal-inner {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.98) 0%, rgba(248,246,239,0.98) 42%, rgba(230,226,214,0.96) 100%);
  color: #2d2a24;
}

.ten-result-grid {
  gap: 6px;
  padding: calc(env(safe-area-inset-top) + 10px) 8px 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.78), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.56), rgba(238,234,222,0.32));
}

/* カード本体：細い聖印フレームを重ねる */
.ten-result-card {
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(220,214,198,0.42));
  border: 1px solid rgba(176,151,94,0.46);
  box-shadow:
    0 8px 18px rgba(76,61,32,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.58),
    inset 0 0 18px rgba(255,255,255,0.18);
  isolation: isolate;
}

/* キャラ画像：chara_XX_upをカード内に正しく敷き、自然な上半身表示に戻す */
.ten-card-img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  object-position: center top;
  border-radius: 9px;
  filter:
    saturate(0.96)
    contrast(1.02)
    brightness(1.03);
}

/* 淡い円環・細線の装飾 */
.ten-result-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(224,202,148,0.8) 10% 18%, transparent 18% 82%, rgba(224,202,148,0.8) 82% 90%, transparent 90% 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(224,202,148,0.5) 10% 18%, transparent 18% 82%, rgba(224,202,148,0.5) 82% 90%, transparent 90% 100%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(224,202,148,0.55) 8% 16%, transparent 16% 84%, rgba(224,202,148,0.55) 84% 92%, transparent 92% 100%) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(224,202,148,0.55) 8% 16%, transparent 16% 84%, rgba(224,202,148,0.55) 84% 92%, transparent 92% 100%) right / 1px 100% no-repeat,
    radial-gradient(circle at 50% 12%, transparent 0 17px, rgba(255,255,255,0.12) 18px, transparent 20px),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(240,224,178,0.13) 45%, transparent 47%);
  opacity: 0.9;
}

/* 上から薄い白膜をかけ、旧ダーク感を少し中和 */
.ten-result-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 22%, transparent 72%, rgba(255,255,255,0.08)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.28), transparent 38%);
  mix-blend-mode: screen;
}

/* 属性アイコンはフレームに埋め込むように小さく上品に */
.ten-card-element-icon {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  z-index: 7;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.6))
    drop-shadow(0 2px 4px rgba(60,48,30,0.38));
}

/* NEW：紫帯ではなく、淡金の邂逅印 */
.ten-card-new-badge {
  top: 8px;
  left: 50%;
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92), rgba(230,207,145,0.92), rgba(255,255,255,0.92));
  border: 1px solid rgba(166,132,62,0.52);
  color: #4b3b20;
  box-shadow: 0 0 12px rgba(230,207,145,0.42);
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 7px;
  letter-spacing: 1.4px;
}

/* 名前帯も黒ベタから白い記録板へ */
.ten-card-bottom {
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 13px 4px 5px;
  border-radius: 0 0 9px 9px;
  z-index: 5;
  background:
    linear-gradient(to top, rgba(252,249,240,0.92) 0%, rgba(252,249,240,0.78) 44%, transparent 100%);
}

.ten-card-name {
  color: #2f2b22;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.7),
    0 0 8px rgba(255,255,255,0.55);
}

/* 上部黒グラデーションは不要。属性アイコンとフレームに任せる */
.ten-card-top {
  background: none;
  padding: 0;
}

/* 未開封カードもアルケミアの封印板にする */
.ten-card-back {
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.96) 0%, rgba(246,242,229,0.88) 34%, rgba(215,205,180,0.54) 100%);
  border: 1px solid rgba(181,154,94,0.44);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    inset 0 0 22px rgba(217,197,139,0.25);
}

.ten-card-back-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(174,144,75,0.46);
  box-shadow:
    0 0 0 7px rgba(255,255,255,0.22),
    0 0 22px rgba(225,207,150,0.34);
}

.ten-card-back-ring::before,
.ten-card-back-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(174,144,75,0.34);
  transform: translate(-50%, -50%);
}

.ten-card-back-ring::before {
  width: 76px;
  height: 1px;
}

.ten-card-back-ring::after {
  width: 1px;
  height: 76px;
}

.ten-card-back-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(176,145,73,0.62);
  box-shadow: 0 0 18px rgba(232,211,153,0.72);
}

/* レアリティ別の強弱も、虹やギラつきではなく「接続強度」の差にする */
.ten-result-card.rarity-r {
  border-color: rgba(180,176,164,0.52);
  box-shadow:
    0 7px 16px rgba(72,66,54,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.56);
}

.ten-result-card.rarity-sr {
  border-color: rgba(201,169,91,0.76);
  box-shadow:
    0 8px 20px rgba(146,113,44,0.22),
    0 0 16px rgba(223,195,122,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.64);
}

.ten-result-card.rarity-ur {
  border-color: rgba(246,235,203,0.96);
  animation: tenAlchemiaUrGlow 3.8s ease-in-out infinite;
  box-shadow:
    0 9px 24px rgba(113,90,38,0.24),
    0 0 22px rgba(255,244,212,0.46),
    0 0 34px rgba(180,218,255,0.2),
    inset 0 0 0 1px rgba(255,255,255,0.78);
}

.ten-result-card.rarity-ur::before {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,245,210,0.95) 8% 22%, transparent 22% 78%, rgba(255,245,210,0.95) 78% 92%, transparent 92% 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255,245,210,0.85) 8% 22%, transparent 22% 78%, rgba(255,245,210,0.85) 78% 92%, transparent 92% 100%) bottom / 100% 1px no-repeat,
    radial-gradient(circle at 50% 12%, transparent 0 16px, rgba(255,255,255,0.32) 17px, transparent 21px),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(247,230,177,0.24) 43%, transparent 47%);
  filter: none;
  opacity: 1;
  animation: none;
  z-index: 3;
}

@keyframes tenAlchemiaUrGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 7px rgba(255,244,215,0.58))
      drop-shadow(0 0 14px rgba(177,220,255,0.16));
  }
  50% {
    filter:
      drop-shadow(0 0 13px rgba(255,249,226,0.86))
      drop-shadow(0 0 24px rgba(177,220,255,0.28));
  }
}

/* 旧虹演出を完全に抑制 */
@keyframes tenUrBorder {
  0%, 100% { border-color: rgba(246,235,203,0.96); }
}

@keyframes tenUrGlow {
  0%, 100% { filter: none; }
}

.ten-result-footer {
  background:
    linear-gradient(180deg, rgba(248,246,239,0.2), rgba(248,246,239,0.96));
}

.ten-result-again-btn,
.ten-result-close-btn {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(168,137,72,0.34);
  color: #6b5731;
  box-shadow: 0 4px 14px rgba(94,75,36,0.1);
}

.ten-result-again-btn:active,
.ten-result-close-btn:active {
  background: rgba(241,231,202,0.82);
}



/* =========================================================
   106 Zeraphia Summon UI Luminaria Patch
   - 添付イメージ寄せ：白×淡金×黒ヘッダー、横長バナー、下部黒金ナビ
   - 既存DOM/ガチャロジックは維持し、CSSで画面構成を再整理
   ========================================================= */

:root {
  --zf-ink: #171612;
  --zf-ink-2: #2d2a22;
  --zf-paper: #f7f4ea;
  --zf-paper-2: #ede7d7;
  --zf-gold: #b99a52;
  --zf-gold-2: #d8bf78;
  --zf-line: rgba(146, 116, 55, 0.32);
}

/* 全体の黒金HUD */
.global-user-frame {
  min-height: var(--header-h) !important;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(209,178,98,0.18), transparent 34%),
    linear-gradient(180deg, rgba(20,20,18,0.98) 0%, rgba(11,11,10,0.96) 100%) !important;
  border-bottom: 1px solid rgba(214,185,111,0.32) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
}

.hud-lv-circle {
  width: 46px !important;
  height: 46px !important;
  background:
    radial-gradient(circle, rgba(255,245,205,0.12), rgba(0,0,0,0.82)) !important;
  border: 1px solid rgba(220,190,105,0.72) !important;
  box-shadow: inset 0 0 14px rgba(213,180,90,0.16), 0 0 10px rgba(0,0,0,0.55) !important;
}

.hud-lv-label,
.hud-exp-text,
.hud-id { color: rgba(82,78,73,.68) !important; }
.hud-lv-num,
.hud-name { color: #4b4946 !important; }
.hud-exp-bg { background: rgba(255,255,255,0.16) !important; border: 1px solid rgba(214,185,111,0.18) !important; height: 5px !important; }
.hud-exp-fill { background: linear-gradient(90deg, #96783b, #e4cc7b) !important; }

.hud-resource {
  height: 34px !important;
  min-width: 88px !important;
  border-radius: 18px !important;
  padding: 4px 10px 4px 7px !important;
  background: linear-gradient(180deg, rgba(26,25,22,0.92), rgba(8,8,7,0.92)) !important;
  border: 1px solid rgba(214,185,111,0.36) !important;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.04) !important;
}

.hud-res-val { color: #4b4946 !important; font-size: 14px !important; }
.hud-gem-plus-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(20,18,14,0.95) !important;
  color: #e9d48a !important;
  border: 1px solid rgba(214,185,111,0.44) !important;
}

/* 画面共通ヘッダーを白紙×金線へ。ガチャ画面だけ中央タイトルにする */
.header {
  background:
    linear-gradient(180deg, rgba(250,248,241,0.98), rgba(238,232,218,0.96)) !important;
  border-bottom: 1px solid rgba(154,124,61,0.28) !important;
  box-shadow: 0 2px 12px rgba(85,67,31,0.08) !important;
}

#screen-summon {
  padding-top: calc(var(--header-h) + var(--page-header-h, 36px)) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,1) 0 0, rgba(255,255,255,0) 42%),
    linear-gradient(160deg, rgba(192,164,95,0.10) 0 1px, transparent 1px 100%),
    linear-gradient(25deg, rgba(192,164,95,0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #fbfaf5 0%, #f1ebdc 100%) !important;
  background-size: auto, 210px 210px, 260px 260px, auto !important;
  color: var(--zf-ink) !important;
  overflow: hidden !important;
}

#screen-summon::before,
#screen-summon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#screen-summon::before {
  inset: var(--header-h) 0 0;
  background:
    radial-gradient(circle at 8% 48%, transparent 0 70px, rgba(185,154,82,0.16) 71px, transparent 73px),
    radial-gradient(circle at 92% 56%, transparent 0 76px, rgba(185,154,82,0.13) 77px, transparent 79px),
    linear-gradient(90deg, transparent 0 24px, rgba(178,145,73,0.18) 24px 25px, transparent 25px calc(100% - 25px), rgba(178,145,73,0.18) calc(100% - 25px) calc(100% - 24px), transparent calc(100% - 24px));
  opacity: 0.78;
}






.summon-header-sigil {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(117,89,38,0.42);
  background:
    linear-gradient(90deg, transparent 49%, rgba(117,89,38,0.48) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(117,89,38,0.48) 50%, transparent 51%),
    radial-gradient(circle, transparent 0 10px, rgba(117,89,38,0.28) 11px, transparent 12px),
    radial-gradient(circle, rgba(255,255,255,0.72), rgba(217,199,145,0.20));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.34), 0 0 14px rgba(168,132,59,0.22);
}

.summon-history-btn {
  width: 64px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(133,102,46,0.36);
  background: rgba(255,255,255,0.72);
  color: #6e5a32;
  font-size: 10px;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(97,78,36,0.10), inset 0 0 0 1px rgba(255,255,255,0.62);
}











#screen-summon .summon-layout {
  position: relative;
  z-index: 2;
  flex: 1 1 auto !important;
  display: block !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 10px 18px calc(104px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}

#screen-summon .summon-detail {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#screen-summon .summon-detail-visual {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 36dvh !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(153,124,60,0.32) !important;
  background: #f8f6ed !important;
  box-shadow:
    0 12px 24px rgba(80,62,25,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.58) !important;
}

#screen-summon .summon-detail-visual::before,
#screen-summon .summon-detail-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

#screen-summon .summon-detail-visual::before {
  border: 1px solid rgba(255,255,255,0.46);
  margin: 5px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent) top / 100% 1px no-repeat,
    radial-gradient(circle at 82% 50%, transparent 0 86px, rgba(222,200,140,0.20) 87px, transparent 89px);
}

#screen-summon .summon-detail-visual::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.58) 0%, transparent 18%, transparent 82%, rgba(255,255,255,0.38) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(20,16,8,0.12));
  mix-blend-mode: screen;
}

#screen-summon .summon-detail-visual img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  filter: saturate(0.92) brightness(1.06) contrast(0.98) !important;
  background: #f7f3e7 !important;
}

#screen-summon .summon-detail-overlay {
  display: block !important;
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  top: 16px !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: min(72%, 310px) !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
  color: #2d281d !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 14px rgba(255,255,255,0.65) !important;
}

#screen-summon .summon-detail-title {
  display: block !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: clamp(19px, 5.8vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.06em !important;
  color: #2c281f !important;
  font-weight: 700 !important;
}

#screen-summon .summon-detail-desc {
  display: block !important;
  margin-top: 8px !important;
  font-size: clamp(10px, 3.2vw, 14px) !important;
  letter-spacing: 0.05em !important;
  color: #6f5b31 !important;
}

/* 横サムネイル */
#screen-summon .summon-banner-list {
  order: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 2px 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
  background: transparent !important;
  border: 0 !important;
}
#screen-summon .summon-banner-list::-webkit-scrollbar { display: none; }

#screen-summon .summon-banner-card {
  flex: 0 0 31% !important;
  max-width: 160px !important;
  aspect-ratio: 2.2 / 1 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(143,112,53,0.32) !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 7px 14px rgba(79,59,20,0.12), inset 0 0 0 1px rgba(255,255,255,0.58) !important;
}

#screen-summon .summon-banner-card.active {
  border-color: rgba(180,145,65,0.78) !important;
  box-shadow: 0 8px 18px rgba(104,79,26,0.18), 0 0 0 2px rgba(255,248,221,0.70) inset !important;
}

#screen-summon .summon-banner-card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: brightness(1.05) saturate(0.9) !important;
}

#screen-summon .banner-desc-overlay {
  position: absolute !important;
  inset: auto 0 0 !important;
  padding: 10px 6px 5px !important;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.82)) !important;
}

#screen-summon .banner-card-title {
  color: #3a3327 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* 天井・ボタン */
#screen-summon .pity-counter {
  order: 3 !important;
  margin: 0 !important;
  padding: 13px 14px 15px !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(151,120,57,0.30) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 8px 16px rgba(86,66,24,0.08) !important;
  color: #2f2a20 !important;
}

#screen-summon .pity-label,
#screen-summon .pity-num {
  color: #776136 !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 12px !important;
}

#screen-summon .pity-bar-wrap {
  height: 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #d8d6d0 0%, #c8c6c0 100%) !important;
  border: 1px solid rgba(121,116,104,0.42) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(72,68,59,0.22), 0 1px 0 rgba(255,255,255,0.78) !important;
}

#screen-summon .pity-bar-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #83662e, #e6cc76 70%, #fff2b5) !important;
  box-shadow: 0 0 10px rgba(218,187,92,0.52) !important;
}

#screen-summon .pity-note {
  order: 4 !important;
  margin: -6px 0 0 !important;
  color: rgba(64,56,41,0.72) !important;
  font-size: 11px !important;
  text-align: center !important;
}

#screen-summon .summon-detail-btns {
  order: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  padding: 8px 0 4px !important;
}
#screen-summon .summon-detail-btns:has(.btn-gacha-guaranteed) { grid-template-columns: 1fr !important; }

#screen-summon .btn-gacha {
  min-height: 80px !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(146,113,49,0.46) !important;
  color: #2b271f !important;
  background:
    linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.76) 10px calc(100% - 10px), transparent calc(100% - 10px)),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(236,226,199,0.88)) !important;
  box-shadow: 0 8px 16px rgba(78,58,19,0.12), inset 0 0 0 1px rgba(255,255,255,0.72) !important;
}

#screen-summon .btn-gacha-ten,
#screen-summon .btn-gacha-guaranteed {
  color: #fff8dc !important;
  border-color: rgba(255,231,153,0.74) !important;
  background:
    radial-gradient(circle at 85% 45%, rgba(255,246,202,0.22), transparent 24%),
    linear-gradient(180deg, #b79a50 0%, #806126 100%) !important;
  box-shadow: 0 9px 20px rgba(100,74,22,0.23), inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}

#screen-summon .btn-gacha-label {
  font-family: "Noto Serif JP", serif !important;
  font-size: 25px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}

#screen-summon .btn-gacha-cost {
  margin-top: 8px !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  opacity: 0.92 !important;
}

#screen-summon .btn-gacha-gem-icon {
  width: 18px !important;
  height: 18px !important;
  margin-right: 4px !important;
}

/* 下部ナビ：黒金の重いフッターへ */
.bottom-nav {
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(218,188,100,0.16), transparent 34%),
    linear-gradient(180deg, rgba(30,29,25,0.98), rgba(8,8,7,0.98)) !important;
  border-top: 1px solid rgba(214,185,111,0.34) !important;
  box-shadow: 0 -10px 24px rgba(0,0,0,0.22) !important;
}

.bottom-nav-item {
  min-height: 64px !important;
  justify-content: center !important;
  gap: 2px !important;
}

.bottom-nav-item img {
  width: 42px !important;
  height: 42px !important;
  filter: brightness(0.78) saturate(0.25) sepia(0.35) hue-rotate(350deg) !important;
  opacity: 0.76 !important;
}

.bottom-nav-label {
  font-size: 11px !important;
  color: rgba(231,218,184,0.72) !important;
  padding-bottom: 0 !important;
  letter-spacing: 0.08em !important;
}

.bottom-nav-item.active::before {
  content: "";
  position: absolute;
  inset: -8px 7px -10px;
  border-left: 1px solid rgba(214,185,111,0.34);
  border-right: 1px solid rgba(214,185,111,0.34);
  background: radial-gradient(circle at 50% 18%, rgba(239,211,115,0.25), transparent 50%);
  pointer-events: none;
}

.bottom-nav-item.active img {
  transform: translateY(-6px) scale(1.12) !important;
  filter: brightness(1.18) saturate(0.92) sepia(0.35) hue-rotate(350deg) drop-shadow(0 0 12px rgba(226,195,99,0.74)) !important;
  opacity: 1 !important;
}

.bottom-nav-item.active .bottom-nav-label {
  color: #f5e8bd !important;
  font-weight: 700 !important;
}

@media (max-width: 380px), (max-height: 700px) {
  :root { --page-header-h: 54px; }

  .summon-header-sigil { width: 38px; height: 38px; }
  .summon-history-btn { width: 54px; height: 36px; font-size: 8.5px; }

  .summon-title-panel { padding: 18px 12px 10px; }
  .summon-title-main { font-size: 28px; }
  .summon-title-en { font-size: 9px; letter-spacing: 0.46em; }
  .summon-title-sub { font-size: 11px; }
  #screen-summon .summon-layout { padding: 8px 14px calc(94px + env(safe-area-inset-bottom)) !important; }
  #screen-summon .summon-detail { gap: 9px !important; }
  #screen-summon .summon-detail-visual { max-height: 33dvh !important; }
  #screen-summon .summon-banner-card { flex-basis: 42% !important; }
  #screen-summon .btn-gacha { min-height: 64px !important; }
  #screen-summon .btn-gacha-label { font-size: 20px !important; }
  #screen-summon .btn-gacha-cost { font-size: 12px !important; margin-top: 5px !important; }
  #screen-summon .pity-counter { padding: 10px 12px 12px !important; }
  .bottom-nav { min-height: calc(68px + env(safe-area-inset-bottom)) !important; }
  .bottom-nav-item img { width: 36px !important; height: 36px !important; }
  .bottom-nav-label { font-size: 10px !important; }
}


/* =========================================================
   107 Summon Header Clean Patch
   - 邂逅画面の上部HUDをホームと同じ黒金へ固定
   - 余分な小ヘッダー/黒バー/邂逅履歴ボタンを非表示
   ========================================================= */

/* 添付1枚目に合わせて、上部プレイヤーHUDは常に黒金 */
.global-user-frame,
.global-user-frame.hud-dark {
  min-height: var(--header-h) !important;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(209,178,98,0.18), transparent 34%),
    linear-gradient(180deg, rgba(20,20,18,0.98) 0%, rgba(11,11,10,0.96) 100%) !important;
  border-bottom: 1px solid rgba(214,185,111,0.32) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
}

.global-user-frame .hud-lv-circle {
  width: 46px !important;
  height: 46px !important;
  background:
    radial-gradient(circle, rgba(255,245,205,0.12), rgba(0,0,0,0.82)) !important;
  border: 1px solid rgba(220,190,105,0.72) !important;
  box-shadow: inset 0 0 14px rgba(213,180,90,0.16), 0 0 10px rgba(0,0,0,0.55) !important;
}

.global-user-frame .hud-lv-label,
.global-user-frame .hud-exp-text,
.global-user-frame .hud-id {
  color: rgba(82,78,73,.68) !important;
}

.global-user-frame .hud-lv-num,
.global-user-frame .hud-name,
.global-user-frame .hud-res-val {
  color: #4b4946 !important;
  text-shadow: none !important;
}

.global-user-frame .hud-exp-bg {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(214,185,111,0.18) !important;
  height: 5px !important;
}

.global-user-frame .hud-exp-fill {
  background: linear-gradient(90deg, #96783b, #e4cc7b) !important;
}

.global-user-frame .hud-resource {
  height: 34px !important;
  min-width: 88px !important;
  border-radius: 18px !important;
  padding: 4px 10px 4px 7px !important;
  background: linear-gradient(180deg, rgba(26,25,22,0.92), rgba(8,8,7,0.92)) !important;
  border: 1px solid rgba(214,185,111,0.36) !important;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.04) !important;
}

.global-user-frame .hud-gem-plus-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(20,18,14,0.95) !important;
  color: #e9d48a !important;
  border: 1px solid rgba(214,185,111,0.44) !important;
}

/* 邂逅画面の小ヘッダーは不要。HTMLからも削除済みだが、残っても表示しない */
#screen-summon .summon-page-header,
#screen-summon .summon-header-sigil,
#screen-summon .summon-history-btn {
  display: none !important;
}

/* 小ヘッダー分の余白を削除し、黒バーを発生させない */
#screen-summon {
  padding-top: calc(var(--header-h) + var(--page-header-h, 36px)) !important;
}



@media (max-width: 380px), (max-height: 700px) {
  #screen-summon .summon-title-panel {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }
}



.global-user-frame .hud-resource {
  height: 24px !important;
  min-width: 64px !important;
  border-radius: 12px !important;
  padding: 3px 8px 3px 6px !important;
}

.global-user-frame .hud-res-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}

.global-user-frame .hud-res-val {
  font-size: 12px !important;
  min-width: 26px !important;
}

.global-user-frame .hud-gem-plus-btn {
  width: 18px !important;
  height: 18px !important;
  font-size: 12px !important;
}

/* 邂逅画面の「10回引く」文字色を見やすくする */
#screen-summon .btn-gacha-ten .btn-gacha-label,
#screen-summon .btn-gacha-guaranteed .btn-gacha-label {
  color: #fff6d6 !important;
}

#screen-summon .btn-gacha-ten .btn-gacha-cost,
#screen-summon .btn-gacha-guaranteed .btn-gacha-cost {
  color: rgba(255, 245, 210, 0.95) !important;
}

/* =========================================================
   102 Primor Fullscreen Viewer
   - プリモア一覧の画像タップで chara_XX.webp を全画面表示
   ========================================================= */
.box-carousel-visual.is-clickable {
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.box-carousel-visual.is-clickable:active {
  transform: scale(0.985);
}

.box-carousel-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(27,27,31,0.10);
  color: rgba(27,27,31,0.48);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  box-shadow: 0 4px 12px rgba(27,27,31,0.10);
}

.box-carousel-visual.is-clickable:hover .box-carousel-zoom-hint,
.box-carousel-visual.is-clickable:active .box-carousel-zoom-hint {
  opacity: 1;
}

#primor-fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: 500000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.94);
  animation: primorFullscreenIn .18s ease both;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}

#primor-fullscreen-viewer.closing {
  animation: primorFullscreenOut .18s ease both;
}

.primor-fullscreen-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.08), transparent 36%),
    rgba(0,0,0,0.92);
  pointer-events: none;
}

.primor-fullscreen-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 28px);
  box-sizing: border-box;
  cursor: default;
}

.primor-fullscreen-img {
  max-width: 100%;
  max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 24px 42px rgba(0,0,0,0.92))
    drop-shadow(0 0 18px rgba(255,255,255,0.18));
}

.primor-fullscreen-name {
  margin-top: 14px;
  color: rgba(255,255,255,0.92);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .16em;
  font-family: "Noto Serif JP", serif;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.primor-fullscreen-hint {
  margin-top: 6px;
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  letter-spacing: .12em;
  font-family: "Noto Serif JP", serif;
}

.primor-fullscreen-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.88);
  font-size: 28px;
  line-height: 36px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes primorFullscreenIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes primorFullscreenOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =========================================================
   99 Shinju / Genesis Tree
   ========================================================= */












#shinju-overlay {
  position: fixed;
  inset: 0;
  z-index: 260000;
  display: none;
  align-items: stretch;
  justify-content: center;
  background: rgba(2,7,14,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}
#shinju-overlay.active { display: flex; }
.shinju-panel {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #dfeef8 0%, #f8f6eb 42%, #121826 100%);
  box-shadow: 0 0 40px rgba(0,0,0,0.45);
}
.shinju-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(50% - min(215px, 50vw) + 14px);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.60);
  background: rgba(0,0,0,0.28);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.shinju-visual-wrap {
  position: relative;
  height: 47dvh;
  min-height: 330px;
  max-height: 500px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.92), transparent 38%),
    linear-gradient(180deg, #dcecff 0%, #f9f5df 100%);
}
.shinju-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  display: block;
}
.shinju-visual-glow {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(248,246,235,0.96));
  pointer-events: none;
}
.shinju-content {
  position: relative;
  margin-top: -26px;
  border-radius: 28px 28px 0 0;
  padding: 24px 18px calc(34px + env(safe-area-inset-bottom));
  min-height: 52dvh;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,246,190,0.22), transparent 32%),
    linear-gradient(180deg, rgba(15,23,37,0.98), #080c14 100%);
  border-top: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 -16px 35px rgba(0,0,0,0.22);
}
.shinju-kicker {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .26em;
  color: rgba(214,236,255,0.55);
  text-align: center;
}
.shinju-title {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .22em;
  text-align: center;
  transform: translateX(.11em);
  color: #fff;
  text-shadow: 0 0 18px rgba(200,230,255,0.68);
}
.shinju-stage {
  margin: 12px auto 0;
  width: fit-content;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,236,170,0.38);
  background: rgba(255,236,170,0.08);
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff2bc;
}
.shinju-progress-box {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
}
.shinju-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  letter-spacing: .06em;
}
.shinju-progress-bg {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
}
.shinju-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #dff8ff, #fff2aa);
  box-shadow: 0 0 16px rgba(255,235,150,0.58);
  transition: width .45s ease;
}
.shinju-lore {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,0.66);
  text-align: center;
}
.shinju-items-head {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.72);
}
.shinju-offer-all {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,236,170,0.38);
  background: rgba(255,236,170,0.10);
  color: #fff2bc;
  font-size: 11px;
  font-family: "Noto Serif JP", serif;
}
.shinju-item-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shinju-item-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: 15px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}
.shinju-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,236,170,0.12);
  color: #fff2bc;
  box-shadow: inset 0 0 0 1px rgba(255,236,170,0.22);
}
.shinju-item-body {
  min-width: 0;
  flex: 1 1 auto;
}
.shinju-item-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
}
.shinju-item-desc {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255,255,255,0.50);
}
.shinju-item-exp {
  margin-top: 5px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .06em;
  color: #fff2bc;
}
.shinju-offer-btn {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #edfaff, #fff0a8);
  color: #1e2430;
  font-size: 12px;
  font-weight: 900;
  font-family: "Noto Serif JP", serif;
}
.shinju-item-empty {
  padding: 18px 14px;
  border-radius: 15px;
  background: rgba(255,255,255,0.045);
  border: 1px dashed rgba(255,255,255,0.13);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
  text-align: center;
}
#shinju-toast {
  position: fixed;
  left: 50%;
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 300000;
  transform: translate(-50%, 10px);
  opacity: 0;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 12px;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  white-space: nowrap;
}
#shinju-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#shinju-clear-overlay {
  position: fixed;
  inset: 0;
  z-index: 310000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.34), transparent 32%),
    radial-gradient(circle at 50% 56%, rgba(255,226,128,0.23), transparent 44%),
    rgba(0,0,0,0.86);
}
.shinju-clear-card {
  width: min(360px, 100%);
  padding: 30px 22px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,236,170,0.48);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,244,190,0.24), transparent 34%),
    linear-gradient(168deg, #162032, #080c14);
  text-align: center;
  box-shadow: 0 0 50px rgba(255,230,150,0.20), 0 24px 60px rgba(0,0,0,0.62);
}
.shinju-clear-kicker {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(255,236,170,0.68);
}
.shinju-clear-title {
  margin-top: 8px;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: .22em;
  transform: translateX(.11em);
  color: #fff3b0;
  text-shadow: 0 0 18px rgba(255,220,120,0.82);
}
.shinju-clear-body {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255,255,255,0.68);
}
.shinju-clear-btn {
  margin-top: 22px;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #edfaff, #fff0a8);
  color: #141923;
  font-weight: 900;
  font-family: "Noto Serif JP", serif;
}


/* =========================================================
   Shinju Home Icon Patch
   - ホーム右側、お知らせアイコンの下に神樹入口を配置
   - 表示画像: images/shinju.webp
   ========================================================= */




















/* =========================================================
   Home Right Icons - Unified CSS
   mail / shinju の表示サイズ・影・押下挙動を統一
   ========================================================= */














/* 神樹の旧カード型要素は右側アイコン運用では非表示 */












/* =========================================================
   Shinju Screen Visual Priority Patch
   - 神樹を見せるため、上部ビジュアル領域を拡大
   - 下部情報パネルを白系・半透明・低背に変更
   ========================================================= */
#shinju-overlay {
  background: rgba(246, 250, 255, 0.18) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  color: #263044 !important;
}

.shinju-panel {
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.98), rgba(238,248,255,0.62) 30%, transparent 58%),
    linear-gradient(180deg, #edf8ff 0%, #fbf8ec 54%, #f7f3e8 100%) !important;
  box-shadow: 0 0 32px rgba(120, 140, 170, 0.20) !important;
}

.shinju-close {
  border: 1px solid rgba(255,255,255,0.86) !important;
  background: rgba(64, 70, 82, 0.36) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16) !important;
}

.shinju-visual-wrap {
  height: 66dvh !important;
  min-height: 430px !important;
  max-height: 620px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.98), transparent 36%),
    linear-gradient(180deg, #eaf7ff 0%, #fffaf0 100%) !important;
}

.shinju-visual {
  object-fit: cover !important;
  object-position: center 34% !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.03) !important;
}

.shinju-visual-glow {
  height: 32% !important;
  background: linear-gradient(180deg, transparent, rgba(250, 247, 238, 0.58)) !important;
}

.shinju-content {
  margin: -96px 14px 18px !important;
  border-radius: 28px !important;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  min-height: auto !important;
  max-height: 48dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 248, 210, 0.62), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(248,246,239,0.66)) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow: 0 -8px 28px rgba(80, 95, 120, 0.18), 0 10px 32px rgba(110, 120, 135, 0.14) !important;
  backdrop-filter: blur(15px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.12) !important;
}

.shinju-kicker {
  font-size: 9px !important;
  color: rgba(67, 82, 108, 0.58) !important;
}

.shinju-title {
  margin-top: 3px !important;
  font-size: 25px !important;
  color: #38445a !important;
  text-shadow: 0 0 14px rgba(255,255,255,0.9), 0 2px 10px rgba(140,160,190,0.18) !important;
}

.shinju-stage {
  margin-top: 9px !important;
  padding: 5px 12px !important;
  border-color: rgba(148, 118, 52, 0.38) !important;
  background: rgba(255, 250, 224, 0.62) !important;
  color: #7b6534 !important;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.66) !important;
}

.shinju-progress-box {
  margin-top: 13px !important;
  padding: 12px 13px !important;
  border-color: rgba(97, 119, 150, 0.14) !important;
  background: rgba(255,255,255,0.46) !important;
}

.shinju-progress-head {
  color: rgba(54, 65, 85, 0.62) !important;
}

.shinju-progress-bg {
  height: 8px !important;
  background: rgba(80, 94, 120, 0.15) !important;
}

.shinju-progress-fill {
  background: linear-gradient(90deg, #bfeaff, #e8d890) !important;
  box-shadow: 0 0 14px rgba(230, 210, 126, 0.38) !important;
}

.shinju-lore {
  margin-top: 11px !important;
  color: rgba(50, 58, 75, 0.70) !important;
}

.shinju-items-head {
  margin-top: 16px !important;
  color: rgba(47, 55, 72, 0.76) !important;
}

.shinju-offer-all {
  border-color: rgba(148, 118, 52, 0.36) !important;
  background: rgba(255, 250, 224, 0.62) !important;
  color: #7b6534 !important;
}

.shinju-item-list {
  max-height: 22dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.shinju-item-card,
.shinju-item-empty {
  background: rgba(255,255,255,0.46) !important;
  border-color: rgba(97, 119, 150, 0.14) !important;
  color: rgba(50, 58, 75, 0.70) !important;
}

.shinju-item-name {
  color: #38445a !important;
}

.shinju-item-desc {
  color: rgba(50, 58, 75, 0.58) !important;
}

.shinju-item-icon {
  background: rgba(255, 250, 224, 0.68) !important;
  color: #8c7136 !important;
  box-shadow: inset 0 0 0 1px rgba(148, 118, 52, 0.20) !important;
}

.shinju-item-exp {
  color: #8c7136 !important;
}

.shinju-offer-btn {
  background: linear-gradient(135deg, #faffff, #fff0a8) !important;
  color: #4d4228 !important;
}

@media (max-height: 700px) {
  .shinju-visual-wrap {
    height: 63dvh !important;
    min-height: 370px !important;
  }

  .shinju-content {
    margin-top: -86px !important;
    padding-top: 15px !important;
    max-height: 50dvh !important;
  }

  .shinju-title {
    font-size: 23px !important;
  }

  .shinju-lore {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
}


/* =========================================================
   Shinju Mock Overlay Layout Final
   - モック画像に合わせ、成長段階/EXPを神樹画像の上に重ねる
   - 下部パネルは説明と奉納リストだけにする
   ========================================================= */
#shinju-overlay {
  background: rgba(247, 250, 255, 0.16) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  color: #263044 !important;
}

.shinju-panel {
  position: relative !important;
  width: 100% !important;
  height: 100dvh !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(255,255,255,0.98), rgba(235,247,255,0.66) 28%, transparent 58%),
    linear-gradient(180deg, #eaf7ff 0%, #fbf8ec 58%, #f4efe4 100%) !important;
  box-shadow: none !important;
}

.shinju-close {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 14px) !important;
  right: max(14px, calc((100vw - 430px) / 2 + 14px)) !important;
  z-index: 40 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  background: rgba(58, 64, 76, 0.34) !important;
  color: rgba(255,255,255,0.96) !important;
  font-size: 21px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.shinju-visual-wrap {
  position: relative !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 13%, rgba(255,255,255,0.95), transparent 34%),
    linear-gradient(180deg, #eaf7ff 0%, #fff9ec 100%) !important;
}

.shinju-visual {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.04) !important;
  z-index: 1 !important;
}

.shinju-visual-glow {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 36%, rgba(255,250,238,0.30) 58%, rgba(255,250,238,0.76) 78%, rgba(255,250,238,0.96) 100%),
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.20), transparent 36%) !important;
}

.shinju-hero-info {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: calc(242px + env(safe-area-inset-bottom)) !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 14px 16px 15px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(255,252,220,0.66), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.60), rgba(246,243,234,0.44)) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 12px 34px rgba(78, 92, 120, 0.16), inset 0 0 24px rgba(255,255,255,0.34) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

.shinju-kicker {
  margin: 0 !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.38em !important;
  color: rgba(58, 70, 96, 0.58) !important;
  text-shadow: 0 1px 8px rgba(255,255,255,0.82) !important;
}

.shinju-title {
  margin: 7px 0 0 !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 29px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.20em !important;
  color: #344059 !important;
  text-shadow: 0 0 18px rgba(255,255,255,0.95), 0 2px 14px rgba(120,140,178,0.22) !important;
}

.shinju-stage {
  margin-top: 10px !important;
  padding: 5px 15px !important;
  min-width: 92px !important;
  text-align: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(147, 114, 46, 0.38) !important;
  background: rgba(255, 250, 224, 0.62) !important;
  color: #735d2f !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.70), 0 4px 14px rgba(110, 92, 44, 0.10) !important;
}

.shinju-progress-box {
  width: 100% !important;
  margin-top: 13px !important;
  padding: 11px 13px 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(86, 106, 138, 0.14) !important;
  background: rgba(255,255,255,0.42) !important;
  box-shadow: inset 0 0 20px rgba(255,255,255,0.35) !important;
}

.shinju-progress-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 7px !important;
  color: rgba(50, 62, 86, 0.66) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.shinju-progress-bg {
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(76, 90, 116, 0.16) !important;
}

.shinju-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #c6ecff, #ead98e) !important;
  box-shadow: 0 0 14px rgba(230, 210, 126, 0.42) !important;
}

.shinju-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 8 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: calc(236px + env(safe-area-inset-bottom)) !important;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    radial-gradient(circle at 50% -16%, rgba(255,255,255,0.82), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(247,244,235,0.86)) !important;
  border-top: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow: 0 -10px 34px rgba(78, 92, 120, 0.18) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.08) !important;
}

.shinju-lore {
  margin: 0 !important;
  color: rgba(45, 55, 78, 0.74) !important;
  font-size: 11px !important;
  line-height: 1.72 !important;
  text-align: center !important;
  text-shadow: 0 1px 10px rgba(255,255,255,0.62) !important;
}

.shinju-items-head {
  margin-top: 14px !important;
  color: rgba(48, 58, 78, 0.82) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

.shinju-offer-all {
  border-color: rgba(147, 114, 46, 0.34) !important;
  background: rgba(255, 250, 224, 0.64) !important;
  color: #705a2e !important;
}

.shinju-item-list {
  max-height: 112px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.shinju-item-card,
.shinju-item-empty {
  background: rgba(255,255,255,0.48) !important;
  border-color: rgba(86, 106, 138, 0.14) !important;
  color: rgba(48, 58, 78, 0.70) !important;
}

.shinju-item-name { color: #344059 !important; }
.shinju-item-desc { color: rgba(48, 58, 78, 0.58) !important; }
.shinju-item-exp { color: #816832 !important; }

.shinju-item-icon {
  background: rgba(255, 250, 224, 0.68) !important;
  color: #806735 !important;
  box-shadow: inset 0 0 0 1px rgba(147, 114, 46, 0.20) !important;
}

.shinju-offer-btn {
  background: linear-gradient(135deg, #fbffff, #fff0a8) !important;
  color: #4f4328 !important;
}

@media (max-height: 700px) {
  .shinju-hero-info {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(218px + env(safe-area-inset-bottom)) !important;
    padding: 12px 14px 13px !important;
  }

  .shinju-title {
    font-size: 25px !important;
    margin-top: 5px !important;
  }

  .shinju-stage {
    margin-top: 8px !important;
  }

  .shinju-progress-box {
    margin-top: 10px !important;
    padding: 10px 12px !important;
  }

  .shinju-content {
    max-height: calc(210px + env(safe-area-inset-bottom)) !important;
    padding-top: 15px !important;
  }

  .shinju-lore {
    font-size: 10.5px !important;
    line-height: 1.62 !important;
  }

  .shinju-items-head {
    margin-top: 11px !important;
  }

  .shinju-item-list {
    max-height: 88px !important;
  }
}

/* =========================================================
   Shinju Layout Visibility Patch
   - 成長率/EXPをさらに上へ移動
   - 上部情報の白い大きな背景を撤去
   - 下部パネルの角丸を撤去し、透明度を上げる
   - 神樹画像を隠す白グラデーションを弱める
   ========================================================= */
#shinju-overlay {
  background: rgba(247, 250, 255, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shinju-panel {
  background: transparent !important;
}

.shinju-visual-wrap {
  background: transparent !important;
}

.shinju-visual {
  filter: saturate(1.06) contrast(1.03) brightness(1.02) !important;
}

.shinju-visual-glow {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.00) 34%,
      rgba(255,250,238,0.08) 62%,
      rgba(255,250,238,0.18) 82%,
      rgba(255,250,238,0.30) 100%
    ),
    radial-gradient(circle at 50% 19%, rgba(255,255,255,0.12), transparent 38%) !important;
}

/* 上の情報ブロック：白カードを消し、画像上に直接浮かせる */
.shinju-hero-info {
  left: 28px !important;
  right: 28px !important;
  bottom: auto !important;
  top: calc(env(safe-area-inset-top) + 292px) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shinju-stage {
  margin-top: 0 !important;
  padding: 5px 16px !important;
  background: rgba(255, 250, 224, 0.48) !important;
  border-color: rgba(147, 114, 46, 0.32) !important;
  box-shadow:
    0 4px 14px rgba(255,255,255,0.24),
    0 1px 8px rgba(96, 86, 62, 0.10) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.shinju-progress-box {
  width: 100% !important;
  margin-top: 13px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shinju-progress-head {
  margin-bottom: 7px !important;
  color: rgba(58, 68, 88, 0.70) !important;
  text-shadow: 0 1px 8px rgba(255,255,255,0.70) !important;
}

.shinju-progress-bg {
  height: 8px !important;
  background: rgba(82, 94, 118, 0.18) !important;
  box-shadow: 0 1px 8px rgba(255,255,255,0.34) !important;
}

.shinju-progress-fill {
  background: linear-gradient(90deg, rgba(181,231,255,0.82), rgba(231,210,134,0.86)) !important;
}

/* 下の情報パネル：角丸なし、さらに透過 */
.shinju-content {
  max-height: calc(218px + env(safe-area-inset-bottom)) !important;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.34),
      rgba(250,247,238,0.46)
    ) !important;
  border-top: 1px solid rgba(255,255,255,0.40) !important;
  box-shadow: 0 -8px 22px rgba(78, 92, 120, 0.08) !important;
  backdrop-filter: blur(8px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.03) !important;
}

.shinju-lore {
  color: rgba(46, 56, 76, 0.68) !important;
}

.shinju-items-head {
  color: rgba(48, 58, 78, 0.76) !important;
}

.shinju-offer-all {
  background: rgba(255, 250, 224, 0.42) !important;
}

.shinju-item-card,
.shinju-item-empty {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

.shinju-item-list {
  max-height: 96px !important;
}

@media (max-height: 700px) {
  .shinju-hero-info {
    left: 26px !important;
    right: 26px !important;
    top: calc(env(safe-area-inset-top) + 270px) !important;
    padding: 0 !important;
  }

  .shinju-progress-box {
    margin-top: 11px !important;
    padding: 0 !important;
  }

  .shinju-content {
    max-height: calc(196px + env(safe-area-inset-bottom)) !important;
    padding-top: 14px !important;
  }

  .shinju-item-list {
    max-height: 74px !important;
  }
}


/* =========================================================
   Remnant List / レムナント一覧
   ※ プリモア一覧の既存レイアウトには影響しないよう、
      remnant-carousel 配下だけに限定する。
   ========================================================= */
.zukan-header-switch {
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(160,120,70,0.30);
  border-radius: 999px;
  color: rgba(120,82,36,0.86);
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.zukan-header-switch:active {
  transform: scale(0.96);
  background: rgba(160,120,70,0.10);
}

.remnant-carousel .box-carousel-name {
  letter-spacing: .12em;
}

.remnant-carousel .box-carousel-visual.remnant-owned {
  background: radial-gradient(circle at 50% 35%, rgba(255,245,210,.14), rgba(0,0,0,.28) 70%);
  border-color: rgba(255,230,160,.28);
}

.remnant-carousel .remnant-panel-img {
  object-fit: contain !important;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.88));
}

.remnant-carousel .remnant-detail-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.remnant-carousel .remnant-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.025);
}

.remnant-carousel .remnant-detail-row span {
  font-size: 11px;
  color: rgba(0,0,0,.42);
  letter-spacing: .08em;
}

.remnant-carousel .remnant-detail-row strong {
  font-size: 12px;
  color: rgba(90,62,32,.92);
  font-weight: 600;
  text-align: right;
}

.remnant-carousel .remnant-detail-note {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(0,0,0,.42);
  text-align: center;
}


/* =========================================================
   Remnant Fullscreen Viewer / レムナント全身表示
   ========================================================= */
.remnant-carousel .box-carousel-visual.remnant-owned.is-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.remnant-carousel .remnant-zoom-hint {
  color: rgba(100,70,35,.62);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(160,120,70,.18);
}

#remnant-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 260000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.92);
  animation: remnantFsIn .18s ease both;
  overflow: hidden;
}

#remnant-fullscreen-overlay.closing {
  animation: remnantFsOut .18s ease both;
}

.remnant-fullscreen-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.20), transparent 30%),
    radial-gradient(circle at 50% 68%, rgba(160,120,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(20,18,22,.95), rgba(0,0,0,.98));
  pointer-events: none;
}

.remnant-fullscreen-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.remnant-fullscreen-kicker {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(255,236,190,.56);
  margin-bottom: 10px;
}

.remnant-fullscreen-img {
  width: min(94vw, 390px);
  max-width: 100%;
  max-height: 72dvh;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 38px rgba(0,0,0,.95))
    drop-shadow(0 0 22px rgba(255,255,255,.14));
}

.remnant-fullscreen-info {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,230,170,.22);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28));
  text-align: center;
}

.remnant-fullscreen-no {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,230,170,.58);
  margin-bottom: 5px;
}

.remnant-fullscreen-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 16px rgba(255,255,255,.28);
}

.remnant-fullscreen-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: rgba(255,255,255,.58);
}

.remnant-fullscreen-close {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.36);
  color: rgba(255,255,255,.88);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@keyframes remnantFsIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes remnantFsOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.015); }
}


/* =========================================================
   共鳴モーダル：複数タイプの魂の器選択
   ========================================================= */
.lb-recipe-title {
  text-align: center !important;
}

.lb-vessel-choice-wrap {
  margin: 8px 0 4px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.lb-vessel-choice-title {
  margin: 0 0 7px;
  color: rgba(244,223,154,.92);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}

.lb-vessel-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 7px 0;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.86);
  font-family: inherit;
  cursor: pointer;
}

.lb-vessel-choice.selected {
  background: rgba(244,223,154,.12);
  border-color: rgba(244,223,154,.65);
  box-shadow: 0 0 0 1px rgba(244,223,154,.18) inset;
}

.lb-vessel-choice:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: grayscale(.45);
}

.lb-vessel-choice-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-vessel-choice-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,230,160,.32));
}

.lb-vessel-choice-name {
  font-size: .78rem;
  text-align: left;
}

.lb-vessel-choice-count {
  padding-right: 10px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: .82rem;
}

.lb-vessel-choice.ok .lb-vessel-choice-count { color: #a8f0b6; }
.lb-vessel-choice.ng .lb-vessel-choice-count { color: #ff9b9b; }

/* =========================================================
   Gacha Material Result
   ========================================================= */
.ten-result-card.is-material .ten-card-img,
.ten-result-card.is-material .ten-card-item-img {
  object-fit: contain;
  object-position: center center !important;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  padding: 2px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), rgba(0,0,0,0.16) 64%, rgba(0,0,0,0.34));
}

.ten-card-item-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.86);
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .08em;
}

.detail-item-visual-wrap {
  cursor: default;
}

.detail-item-img {
  object-fit: contain !important;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.2), rgba(0,0,0,0.08) 60%, rgba(0,0,0,0.2));
}

.gacha-material-detail-box {
  margin-top: 12px;
  padding: 16px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}

.gacha-material-detail-title {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}

.gacha-material-detail-count {
  font-family: "Cinzel", serif;
  font-size: 22px;
  color: #fff3c4;
  text-shadow: 0 0 12px rgba(255,220,140,0.35);
}

.gacha-material-detail-total {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* =========================================================
   09-C Ten Result — Item Card Emphasis
   10連結果のアイテム枠を大きく・中央で見栄えよく表示
   ※キャラクターカードには影響しない
   ========================================================= */
.ten-result-card.is-material {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.94) 0%, rgba(247,243,232,0.78) 34%, rgba(218,210,190,0.50) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(224,216,199,0.56));
}

.ten-result-card.is-material::before {
  background:
    radial-gradient(circle at 50% 46%, transparent 0 28%, rgba(224,202,148,0.28) 30%, transparent 36%),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.50), transparent 58%),
    linear-gradient(90deg, transparent 0 10%, rgba(224,202,148,0.80) 10% 18%, transparent 18% 82%, rgba(224,202,148,0.80) 82% 90%, transparent 90% 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(224,202,148,0.50) 10% 18%, transparent 18% 82%, rgba(224,202,148,0.50) 82% 90%, transparent 90% 100%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(224,202,148,0.55) 8% 16%, transparent 16% 84%, rgba(224,202,148,0.55) 84% 92%, transparent 92% 100%) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 8%, rgba(224,202,148,0.55) 8% 16%, transparent 16% 84%, rgba(224,202,148,0.55) 84% 92%, transparent 92% 100%) right / 1px 100% no-repeat;
  opacity: 1;
}

.ten-result-card.is-material::after {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.56), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 28%, transparent 70%, rgba(255,255,255,0.12));
  mix-blend-mode: screen;
}

.ten-result-card.is-material .ten-card-img,
.ten-result-card.is-material .ten-card-item-img {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center center !important;
  transform: translateY(-2px) scale(1.62);
  transform-origin: center center;
  z-index: 4;
  background: transparent;
  filter:
    drop-shadow(0 5px 8px rgba(72,58,32,0.38))
    drop-shadow(0 0 12px rgba(255,245,205,0.62));
}

.ten-result-card.is-material .ten-card-bottom {
  z-index: 7;
  background:
    linear-gradient(to top, rgba(252,249,240,0.94) 0%, rgba(252,249,240,0.70) 42%, transparent 100%);
}

.ten-result-card.is-material .ten-card-item-badge {
  z-index: 8;
}


/* =========================================================
   共鳴モーダル：素材選択省略・実行ボタン
   ========================================================= */
.lb-execute-area {
  margin-top: 14px;
  text-align: center;
}

.lb-execute-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  font-size: .9rem;
  letter-spacing: .12em;
}

.lb-execute-note {
  margin-top: 8px;
  color: rgba(110,101,86,.62);
  font-size: .68rem;
  line-height: 1.5;
}


/* =========================================================
   07-D Summon Banner Pager
   選択中以外の次バナー2件だけを表示し、矢印／スワイプで送る
   ========================================================= */
#screen-summon .summon-banner-list {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 2px 0 8px !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

#screen-summon .summon-banner-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#screen-summon .summon-banner-card.active {
  border-color: rgba(143,112,53,0.32) !important;
  box-shadow: 0 7px 14px rgba(79,59,20,0.12), inset 0 0 0 1px rgba(255,255,255,0.58) !important;
}

#screen-summon .summon-banner-arrow {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(112, 85, 35, 0.82);
  font-family: "Cinzel", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

#screen-summon .summon-banner-arrow:active {
  transform: scale(0.88);
  color: rgba(156, 119, 46, 1);
}

/* =========================================================
   Home Right Icons - unified large size / subtle shadow
   メール・神樹を同サイズに統一し、従来より二回り大きく表示。
   ========================================================= */

#screen-main .home-notice-btn,
#screen-main .shinju-home-entry {
  position: absolute;
  right: 10px;
  width: clamp(88px, 22vw, 98px);
  height: clamp(88px, 22vw, 98px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: visible;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: none;
  animation: none;
  -webkit-tap-highlight-color: transparent;
}

#screen-main .home-notice-btn {
  /* イベントバナーの直下。バナーと重ならないよう少し余白を確保 */
  top: calc(env(safe-area-inset-top) + 202px);
}

#screen-main .shinju-home-entry {
  top: calc(env(safe-area-inset-top) + 300px);
}

#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon {
  display: block;
  object-fit: contain;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: none;
}

/* メール・神樹：同一サイズ */
#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 7px rgba(68, 51, 24, 0.24));
}

#screen-main .home-notice-btn:active > img,
#screen-main .shinju-home-entry:active .shinju-home-entry-icon {
  transform: scale(0.94);
}

#screen-main .home-notice-btn::before,
#screen-main .home-notice-btn::after,
#screen-main .shinju-home-entry::before,
#screen-main .shinju-home-entry::after,
#screen-main .home-notice-btn > img::before,
#screen-main .home-notice-btn > img::after,
#screen-main .shinju-home-entry-icon::before,
#screen-main .shinju-home-entry-icon::after {
  content: none;
  display: none;
}



/* =========================================================
   PICK UP ornament (rich / low-noise)
   ========================================================= */

#reveal-pickup-badge {
  position: absolute;
  top: calc(86px + env(safe-area-inset-top));
  right: 18px;
  z-index: 14;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 7px 14px 8px;
  border-radius: 999px;
  border: 1px solid rgba(173, 136, 60, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,237,218,0.82));
  box-shadow:
    0 8px 22px rgba(103, 82, 36, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 0 18px rgba(227, 198, 127, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#reveal-pickup-badge::before,
#reveal-pickup-badge::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(225,197,124,0.88) 46%, rgba(225,197,124,0) 76%);
  opacity: 0.9;
}

#reveal-pickup-badge span {
  margin: 0 10px;
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(108, 80, 27, 0.95);
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

#reveal-modal.is-pickup #reveal-pickup-badge {
  display: inline-flex;
  animation: pickupBadgeFloatIn 0.55s cubic-bezier(.18,.88,.22,1) both;
}

#reveal-modal.is-pickup #reveal-chara-img {
  border-color: rgba(194, 160, 86, 0.58);
  box-shadow:
    0 22px 52px rgba(64,54,36,0.22),
    0 0 56px rgba(255,255,255,0.92),
    0 0 96px rgba(214,188,126,0.48),
    0 0 0 1px rgba(255,248,228,0.55) inset !important;
}

#reveal-modal.is-pickup .reveal-info-box {
  background: linear-gradient(to top,
    rgba(248,246,239,0.97) 0%,
    rgba(248,246,239,0.92) 42%,
    rgba(248,246,239,0.34) 76%,
    rgba(248,246,239,0) 100%) !important;
}

#reveal-modal.is-pickup #reveal-name {
  text-shadow:
    0 1px 0 rgba(255,255,255,0.94),
    0 0 20px rgba(255,255,255,0.92),
    0 0 26px rgba(222, 195, 131, 0.28) !important;
}

#reveal-modal.is-pickup #reveal-close-btn {
  border-color: rgba(170,133,58,0.34) !important;
  box-shadow: 0 8px 22px rgba(64,54,36,0.12), inset 0 1px 0 rgba(255,255,255,0.94), 0 0 16px rgba(225,198,128,0.12);
}

.ten-result-card.is-pickup {
  border-color: rgba(205, 172, 96, 0.86);
  box-shadow:
    0 10px 24px rgba(146,113,44,0.20),
    0 0 18px rgba(223,195,122,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.72),
    inset 0 0 26px rgba(236, 222, 185, 0.12);
}

.ten-result-card.is-pickup::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 22%, transparent 72%, rgba(255,255,255,0.08)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.3), transparent 38%),
    radial-gradient(circle at 50% 22%, rgba(231, 207, 145, 0.16), transparent 44%);
}

.ten-card-pickup-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px 5px;
  border-radius: 999px;
  border: 1px solid rgba(173, 136, 60, 0.44);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(242,231,201,0.92));
  box-shadow:
    0 4px 10px rgba(101, 79, 33, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.94);
}

.ten-card-pickup-badge span {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6f5520;
  text-shadow: 0 1px 0 rgba(255,255,255,0.92);
}

.ten-result-card.is-pickup .ten-card-name {
  color: #2d271b;
}

@keyframes pickupBadgeFloatIn {
  0% { opacity: 0; transform: translateY(-8px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* =========================================================
   巡行：デイリー表示調整
   ========================================================= */
#ninmu-panel-daily .ninmu-daily-area {
  margin-top: 16px;
}

/* =========================================================
   巡行：DEBUG / ROGUELITE ステージ選択を白・ベージュ基調へ統一
   stage_select.js のインライン指定を !important で上書きする。
   ========================================================= */
#stage-select-modal {
  background:
    radial-gradient(circle at 82% 8%, rgba(255,255,255,.96), transparent 34%),
    linear-gradient(180deg, #fbfaf6 0%, #f4f1e8 100%) !important;
  color: #26324a !important;
  box-shadow: none !important;
}

#stage-select-modal .ss-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,243,232,.97) 100%) !important;
  border-bottom: 1px solid rgba(142,119,77,.22) !important;
  box-shadow:
    0 4px 14px rgba(63,54,39,.08),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

#stage-select-modal .ss-back-btn {
  color: #5b4a2c !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.88) !important;
}

#stage-select-modal .ss-title {
  color: #27344f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.94) !important;
}

#stage-select-modal .ss-list-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,244,236,.88)) !important;
}

#stage-select-modal .ss-list {
  gap: 10px !important;
}

#stage-select-modal .ss-list > div[style*="height:1px"] {
  background: linear-gradient(90deg, transparent, rgba(139,118,81,.22), transparent) !important;
}

#stage-select-modal .ss-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,247,241,.98) 100%) !important;
  border: 1px solid rgba(127,112,87,.18) !important;
  border-radius: 11px !important;
  box-shadow:
    0 5px 14px rgba(55,62,78,.08),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(112,93,65,.05) !important;
  color: #27344f !important;
}

#stage-select-modal .ss-card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.52) 0%, transparent 52%) !important;
}

#stage-select-modal .ss-card:active {
  background:
    linear-gradient(180deg, #fffdf8 0%, #f1eadb 100%) !important;
  border-color: rgba(174,137,67,.38) !important;
  transform: scale(.992);
}

#stage-select-modal .ss-card-no {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(235,231,220,.95)) !important;
  border: 1px solid rgba(119,106,85,.20) !important;
  color: #46536d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(48,55,69,.08) !important;
}

#stage-select-modal .ss-card-name {
  color: #27344f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.86) !important;
}

#stage-select-modal .ss-card-enemy {
  color: #758198 !important;
}

#stage-select-modal .ss-card-reward {
  color: #8a7447 !important;
}

#stage-select-modal .ss-diff-badge {
  background: rgba(255,255,255,.70) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#stage-select-modal .ss-card-arrow {
  color: rgba(55,68,94,.36) !important;
}

/* ローグライト系カードの紫を残しつつ、黒背景だけ排除 */
#stage-select-modal .ss-card[style*="rgba(60,20,120"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,242,252,.98) 100%) !important;
  border-color: rgba(131,93,181,.28) !important;
  box-shadow:
    0 5px 14px rgba(77,58,104,.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 3px 0 0 rgba(139,92,198,.18) !important;
}

#stage-select-modal .ss-card[style*="rgba(60,20,120"] .ss-card-no {
  background:
    linear-gradient(180deg, rgba(252,249,255,.98), rgba(235,225,246,.98)) !important;
  border-color: rgba(132,91,185,.28) !important;
}

#stage-select-modal .ss-card[style*="rgba(60,20,120"] .ss-card-name {
  color: #34405b !important;
}

#stage-select-modal .ss-card[style*="rgba(60,20,120"] .ss-card-enemy {
  color: #7c7294 !important;
}

/* 余白部分も巡行画面と同じアイボリーにする */
#stage-select-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 42%);
  opacity: .8;
}

#stage-select-modal > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 500px) {
  #stage-select-modal {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
  }
}


/* =========================================================
   107 Primor header height fix
   - レムナント切替ボタンをヘッダーの通常フローから外す
   - 共通ヘッダーの高さをボタンサイズに左右されないよう固定
   ========================================================= */

/* 通常画面ヘッダーの最終的な高さを統一 */
.screen .header {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 20px 20px 12px !important;
  box-sizing: border-box !important;
}

/* プリモア画面右側の切替領域をレイアウト計算から除外 */
#screen-zukan .header {
  position: fixed !important;
}

#screen-zukan #zukan-header-back {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* ボタン自体も固定高にし、上下paddingでヘッダーを押し広げない */
#screen-zukan .zukan-header-switch {
  box-sizing: border-box !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  line-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}


/* =========================================================
   共鳴確認モーダル：消失素材の明示・文字視認性改善
   ========================================================= */
#limitbreak-confirm-modal {
  background: rgba(35, 31, 27, 0.48) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#limitbreak-confirm-modal .modal {
  width: min(86vw, 360px) !important;
  padding: 22px 20px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fffefa 0%, #f7f2e8 100%) !important;
  border: 1px solid rgba(151, 128, 84, 0.28) !important;
  box-shadow:
    0 18px 44px rgba(55, 45, 30, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  color: #30394a !important;
}

#limitbreak-confirm-modal .modal h2 {
  margin: 0 0 14px !important;
  color: #26354b !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

#limitbreak-confirm-modal .modal-inner,
#limitbreak-confirm-modal #lb-confirm-text {
  color: #30394a !important;
}

#limitbreak-confirm-modal #lb-confirm-text {
  margin: 0 !important;
}

#limitbreak-confirm-modal .lb-confirm-message {
  margin: 0 0 12px !important;
  color: #4a5360 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-shadow: none !important;
}

#limitbreak-confirm-modal .lb-confirm-consume-box {
  overflow: hidden;
  margin: 0 0 14px;
  border: 1px solid rgba(151, 128, 84, 0.22);
  border-radius: 12px;
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

#limitbreak-confirm-modal .lb-confirm-consume-title {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(151, 128, 84, 0.18);
  background: linear-gradient(180deg, rgba(239,232,216,0.78), rgba(248,244,235,0.64));
  color: #765f32;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: left;
}

#limitbreak-confirm-modal .lb-confirm-consume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(123, 113, 96, 0.12);
}

#limitbreak-confirm-modal .lb-confirm-consume-row:last-child {
  border-bottom: 0;
}

#limitbreak-confirm-modal .lb-confirm-consume-name {
  min-width: 0;
  color: #30394a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

#limitbreak-confirm-modal .lb-confirm-consume-count {
  flex: 0 0 auto;
  color: #9a563f;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#limitbreak-confirm-modal .lb-confirm-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(236, 229, 249, 0.72);
  color: #515b69 !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
}

#limitbreak-confirm-modal .lb-confirm-level strong {
  color: #7650a8;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 15px;
  letter-spacing: .06em;
}

#limitbreak-confirm-modal .lb-confirm-warning {
  margin: 0 0 14px;
  color: #8b7064;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

#limitbreak-confirm-modal .modal-btns {
  gap: 8px !important;
}

#limitbreak-confirm-modal .btn-pay {
  min-height: 44px;
  border: 1px solid rgba(165, 128, 53, 0.46) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #f3d883 0%, #d8b557 100%) !important;
  color: #4b3815 !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important;
  box-shadow:
    0 5px 12px rgba(122, 91, 35, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

#limitbreak-confirm-modal .btn-cancel-txt {
  min-height: 38px;
  margin: 0 !important;
  color: #5f6875 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}


/* =========================================================
   Character Detail / Combo Skill
   ========================================================= */

.detail-combo-section {
  margin-top: 16px;
}

.detail-combo-card {
  border-color: rgba(137, 111, 176, 0.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,243,238,0.96));
  box-shadow:
    0 8px 22px rgba(54, 45, 67, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.detail-combo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(177, 146, 218, 0.11), transparent 34%);
}

.detail-combo-card > * {
  position: relative;
  z-index: 1;
}

.detail-combo-badge {
  min-width: 54px;
  color: #65517e;
  border-color: rgba(112, 84, 145, 0.35);
  background: rgba(117, 88, 151, 0.08);
}

.detail-combo-condition {
  margin: 9px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(120, 105, 134, 0.16);
  border-radius: 8px;
  color: #4b4354;
  background: rgba(250,248,244,0.88);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.detail-combo-meta {
  margin-bottom: 12px;
}

.detail-combo-range-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 10px 0 12px;
}

.detail-combo-range-item {
  min-width: 0;
  padding: 10px 8px 9px;
  border: 1px solid rgba(118, 108, 96, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,241,236,0.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 3px 10px rgba(62,54,46,0.04);
}

.detail-combo-range-title {
  color: #75647e;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
}

.detail-combo-range-label {
  min-height: 30px;
  margin-top: 4px;
  color: #353b4d;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.detail-combo-range-item .detail-range-preview {
  margin-top: 7px;
  justify-content: center;
}

.detail-combo-trigger-board .detail-range-cell.combo-trigger {
  border-color: rgba(137, 92, 178, 0.52);
  background:
    linear-gradient(180deg, rgba(225,211,239,0.96), rgba(197,172,222,0.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 0 5px rgba(132, 83, 178, 0.18);
}

.detail-combo-trigger-board .detail-range-cell.self {
  border-color: rgba(180, 145, 62, 0.62);
  background:
    linear-gradient(180deg, rgba(255,244,198,0.98), rgba(224,190,95,0.92));
}

@media (max-width: 360px) {
  .detail-combo-range-block {
    gap: 6px;
  }

  .detail-combo-range-item {
    padding-left: 5px;
    padding-right: 5px;
  }

  .detail-combo-range-label {
    font-size: 10px;
  }
}


/* =========================================================
   Combo detail range guide visibility fix
   汎用ミニ盤面の !important 上書きより後で、コンボ範囲色を確定する
   ========================================================= */

.detail-combo-trigger-board .detail-range-cell.combo-trigger {
  background:
    linear-gradient(180deg, rgba(224, 207, 241, 0.98), rgba(186, 153, 217, 0.94)) !important;
  border-color: rgba(117, 76, 157, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.76),
    0 0 6px rgba(120, 72, 166, 0.28) !important;
}

.detail-combo-range-item .detail-range-cell.target {
  background:
    linear-gradient(180deg, rgba(164, 197, 255, 0.98), rgba(111, 157, 238, 0.94)) !important;
  border-color: rgba(72, 116, 194, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 0 6px rgba(74, 120, 205, 0.26) !important;
}

.detail-combo-range-item .detail-range-cell.ally {
  background:
    linear-gradient(180deg, rgba(157, 223, 226, 0.98), rgba(94, 187, 193, 0.94)) !important;
  border-color: rgba(58, 143, 150, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 0 6px rgba(60, 157, 164, 0.24) !important;
}

.detail-combo-range-item .detail-range-cell.self,
.detail-combo-trigger-board .detail-range-cell.self {
  background:
    linear-gradient(180deg, rgba(255, 239, 165, 1), rgba(232, 188, 66, 0.98)) !important;
  border-color: rgba(177, 132, 28, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 0 6px rgba(211, 165, 50, 0.28) !important;
}


/* =========================================================
   エリ専用共鳴ボーナス
   ========================================================= */
.lb-recipe-special-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(255,244,196,.55))
    drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

.lb-bonus-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(240,220,168,.22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,240,190,.08), transparent 55%),
    rgba(255,255,255,.025);
}

.lb-bonus-box-title {
  margin-bottom: 9px;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(245,226,180,.82);
}

.lb-bonus-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.lb-bonus-row:first-of-type {
  border-top: 0;
}

.lb-bonus-level {
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: rgba(255,255,255,.48);
}

.lb-bonus-title {
  margin-bottom: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.9);
}

.lb-bonus-summary {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255,255,255,.48);
}

.lb-bonus-state {
  font-size: 9px;
  white-space: nowrap;
  color: rgba(255,255,255,.35);
}

.lb-bonus-row.unlocked .lb-bonus-level,
.lb-bonus-row.unlocked .lb-bonus-state {
  color: rgba(190,225,255,.88);
}

.lb-bonus-row.next {
  margin: 2px -6px;
  padding: 8px 6px;
  border: 1px solid rgba(245,214,145,.32);
  border-radius: 8px;
  background: rgba(245,214,145,.055);
}

.lb-bonus-row.next .lb-bonus-level,
.lb-bonus-row.next .lb-bonus-state {
  color: rgba(255,224,150,.94);
}

.lb-bonus-row.locked {
  opacity: .48;
}

.lb-next-bonus {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(245,214,145,.30);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(245,214,145,.09), rgba(150,115,210,.06));
}

.lb-next-bonus-label {
  margin-bottom: 5px;
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(245,214,145,.72);
}

.lb-next-bonus-title {
  margin-bottom: 5px;
  font-size: 13px;
  color: #fff;
}

.lb-next-bonus-detail {
  font-size: 10px;
  line-height: 1.55;
  color: rgba(255,255,255,.64);
}

/* =========================================================
   共鳴ボーナス一覧 UI修正版
   - Lv.1〜4をすべて確認可能
   - 白背景上でも十分なコントラスト
   - 一覧部分のみスクロール
   ========================================================= */
#limitbreak-modal {
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  background: rgba(25, 25, 28, 0.58) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#limitbreak-modal .modal {
  width: min(92vw, 390px) !important;
  height: min(88dvh, 720px) !important;
  max-height: 88dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fffefa 0%, #f5f0e6 100%) !important;
  border: 1px solid rgba(132, 108, 65, 0.32) !important;
  box-shadow: 0 22px 60px rgba(38, 31, 20, 0.30) !important;
  color: #283141 !important;
}

#limitbreak-modal .modal-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 20px 16px 14px !important;
  text-align: left !important;
}

#limitbreak-modal .modal h2 {
  flex: 0 0 auto !important;
  margin: 0 0 6px !important;
  color: #273247 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
  text-shadow: none !important;
}

#limitbreak-modal .lb-modal-desc {
  flex: 0 0 auto !important;
  margin: 0 0 12px !important;
  color: #717783 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  text-align: center !important;
  text-shadow: none !important;
}

#limitbreak-modal .lb-material-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 3px 16px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(130,106,65,.36) transparent;
}

#limitbreak-modal .lb-material-list::-webkit-scrollbar {
  width: 5px;
}

#limitbreak-modal .lb-material-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(130,106,65,.32);
}

#limitbreak-modal .btn-cancel-txt {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 13px 10px 5px !important;
  border-top: 1px solid rgba(91,82,69,.12) !important;
  color: #596171 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
}

#limitbreak-modal .lb-recipe-box {
  margin: 0 0 12px !important;
  padding: 11px !important;
  border: 1px solid rgba(132,108,65,.18) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.72) !important;
  color: #30394a !important;
}

#limitbreak-modal .lb-recipe-title {
  color: #806a3d !important;
  font-weight: 700 !important;
}

#limitbreak-modal .lb-recipe-row,
#limitbreak-modal .lb-recipe-name,
#limitbreak-modal .lb-recipe-count,
#limitbreak-modal .lb-recipe-owned {
  color: #384152 !important;
  text-shadow: none !important;
}

#limitbreak-modal .lb-bonus-box {
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(151,123,65,.24) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(222,190,119,.15), transparent 52%),
    rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#limitbreak-modal .lb-bonus-box-title {
  margin: 0 0 9px !important;
  color: #9a7834 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-align: center !important;
}

#limitbreak-modal .lb-bonus-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 9px 5px !important;
  border: 0 !important;
  border-top: 1px solid rgba(70,77,90,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

#limitbreak-modal .lb-bonus-row:first-of-type {
  border-top: 0 !important;
}

#limitbreak-modal .lb-bonus-row.next {
  margin: 2px 0 !important;
  padding: 9px 7px !important;
  border: 1px solid rgba(192,145,45,.42) !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgba(249,231,186,.46), rgba(255,255,255,.72)) !important;
  box-shadow: 0 3px 10px rgba(117,86,28,.07) !important;
}

#limitbreak-modal .lb-bonus-row.locked {
  opacity: 1 !important;
}

#limitbreak-modal .lb-bonus-level {
  color: #68778c !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#limitbreak-modal .lb-bonus-title {
  margin: 0 0 3px !important;
  color: #263247 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}

#limitbreak-modal .lb-bonus-summary {
  color: #626b78 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

#limitbreak-modal .lb-bonus-state {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(89,99,114,.22) !important;
  border-radius: 999px !important;
  background: rgba(93,104,120,.07) !important;
  color: #697281 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#limitbreak-modal .lb-bonus-row.unlocked .lb-bonus-level {
  color: #4380a4 !important;
}

#limitbreak-modal .lb-bonus-row.unlocked .lb-bonus-state {
  border-color: rgba(60,137,178,.28) !important;
  background: rgba(74,155,197,.10) !important;
  color: #337ba1 !important;
}

#limitbreak-modal .lb-bonus-row.next .lb-bonus-level {
  color: #af7917 !important;
}

#limitbreak-modal .lb-bonus-row.next .lb-bonus-state {
  border-color: rgba(190,135,32,.38) !important;
  background: rgba(225,177,75,.14) !important;
  color: #9b6b12 !important;
}

@media (max-height: 700px) {
  #limitbreak-modal .modal {
    height: 92dvh !important;
    max-height: 92dvh !important;
  }

  #limitbreak-modal .modal-inner {
    padding-top: 15px !important;
  }

  #limitbreak-modal .lb-bonus-row {
    min-height: 52px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* =========================================================
   103 巡行 / プリモア / 邂逅 / 設定 共通紙背景
   - images/zeraphia_bg_01.webp を4画面の背景に使用
   - 各画面固有のグラデーション背景を末尾で上書き
   ========================================================= */
#screen-ninmu,
#screen-zukan,
#screen-summon,
#screen-setting {
  background-color: #f6f2e8 !important;
  background-image: url("../images/zeraphia_bg_01.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
}

/* スクロール領域は親画面の紙背景を透かす */
#screen-ninmu .screen-scroll,
#screen-zukan .screen-scroll,
#screen-summon .screen-scroll,
#screen-setting .screen-scroll,
#screen-zukan #zukan-sub-box,
#screen-summon .summon-layout {
  background: transparent !important;
  background-color: transparent !important;
}

/* =========================================================
   巡行：ローグライト／ストーリーのステージ選択背景
   ========================================================= */
#stage-select-modal {
  background-color: #f6f1e6 !important;
  background-image:
    linear-gradient(rgba(255, 253, 247, 0.12), rgba(255, 253, 247, 0.12)),
    url("../images/zeraphia_bg_01.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 背景素材が見えるよう、一覧部分の白ベタを解除 */
#stage-select-modal .ss-list-wrap {
  background: rgba(255, 252, 244, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 既存の白い光レイヤーを弱め、紙の滲みを残す */
#stage-select-modal::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,252,244,0.02) 45%,
    rgba(241,233,214,0.10) 100%
  ) !important;
  opacity: 1 !important;
}


/* =========================================================
   2026-07-12 ガチャボタン画像化
   既存のクリック処理・disabled制御はbutton要素のまま維持し、
   表示だけ専用WebP素材へ置き換える。
   ========================================================= */
.btn-gacha.btn-gacha-single,
.btn-gacha.btn-gacha-ten,
#gacha-detail-modal .btn-gacha.btn-gacha-single,
#gacha-detail-modal .btn-gacha.btn-gacha-ten,
#screen-summon .btn-gacha.btn-gacha-single,
#screen-summon .btn-gacha.btn-gacha-ten {
  position: relative;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 340 / 119;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.btn-gacha.btn-gacha-single,
#gacha-detail-modal .btn-gacha.btn-gacha-single,
#screen-summon .btn-gacha.btn-gacha-single {
  background-image: url("../images/gacha_button_shingle.webp") !important;
}

.btn-gacha.btn-gacha-ten,
#gacha-detail-modal .btn-gacha.btn-gacha-ten,
#screen-summon .btn-gacha.btn-gacha-ten {
  background-image: url("../images/gacha_button_ten.webp") !important;
}

/* 文字と結晶アイコンは画像内に含まれるため非表示 */
.btn-gacha:not(.btn-gacha-guaranteed) .btn-gacha-label,
.btn-gacha:not(.btn-gacha-guaranteed) .btn-gacha-cost,
.btn-gacha-guaranteed .btn-gacha-label,
.btn-gacha-guaranteed .btn-gacha-cost {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* UR確定バッジだけは画像上に残す */
.btn-gacha.btn-gacha-guaranteed .btn-gacha-guarantee-badge {
  position: absolute !important;
  top: -7px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 2;
}

.btn-gacha:active {
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(0.96);
}

.btn-gacha:disabled {
  opacity: 0.48 !important;
  filter: grayscale(0.5) !important;
  cursor: not-allowed;
}


/* =========================================================
   2026-07-12 ガチャ画像ボタン responsive fix
   400x140 の実寸比率を維持し、画面幅に応じて2列を均等配置。
   ========================================================= */
#screen-summon .summon-detail-btns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(8px, 2.8vw, 14px) !important;
  width: 100% !important;
  padding-inline: clamp(8px, 3.2vw, 16px) !important;
  margin-top: -4px !important;
  box-sizing: border-box !important;
}

#screen-summon .summon-detail-btns:has(.btn-gacha-guaranteed) {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

#screen-summon .btn-gacha.btn-gacha-single,
#screen-summon .btn-gacha.btn-gacha-ten,
#gacha-detail-modal .btn-gacha.btn-gacha-single,
#gacha-detail-modal .btn-gacha.btn-gacha-ten {
  display: block !important;
  width: 100% !important;
  max-width: 400px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 20 / 7 !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
}

#screen-summon .summon-detail-btns:has(.btn-gacha-guaranteed) .btn-gacha {
  width: min(100%, 196px) !important;
}

#gacha-detail-modal .gacha-detail-btns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

#gacha-detail-modal .btn-gacha {
  width: min(100%, 400px) !important;
}

@media (max-width: 360px) {
  #screen-summon .summon-detail-btns {
    gap: 6px !important;
    padding-inline: 6px !important;
  }
}


/* =========================================================
   2026-07-12 ガチャ画像ボタン 立体シャドウ
   紙素材の繊細さを壊さず、ボタンとしての浮きと押下感を追加。
   ========================================================= */
#screen-summon .btn-gacha.btn-gacha-single,
#screen-summon .btn-gacha.btn-gacha-ten,
#gacha-detail-modal .btn-gacha.btn-gacha-single,
#gacha-detail-modal .btn-gacha.btn-gacha-ten {
  filter:
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.42))
    drop-shadow(0 5px 5px rgba(74, 55, 24, 0.24))
    drop-shadow(0 10px 14px rgba(54, 39, 18, 0.14)) !important;
  transform: translateZ(0);
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease !important;
}

#screen-summon .btn-gacha.btn-gacha-ten,
#gacha-detail-modal .btn-gacha.btn-gacha-ten {
  filter:
    drop-shadow(0 2px 1px rgba(255, 244, 192, 0.34))
    drop-shadow(0 5px 6px rgba(91, 63, 13, 0.30))
    drop-shadow(0 11px 16px rgba(63, 43, 11, 0.16)) !important;
}

#screen-summon .btn-gacha:active,
#gacha-detail-modal .btn-gacha:active {
  transform: translateY(2px) scale(0.985) !important;
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.24))
    drop-shadow(0 2px 3px rgba(65, 45, 18, 0.22))
    brightness(0.97) !important;
}

#screen-summon .btn-gacha:disabled,
#gacha-detail-modal .btn-gacha:disabled {
  opacity: 0.48 !important;
  filter: grayscale(0.5) drop-shadow(0 2px 3px rgba(45, 38, 28, 0.14)) !important;
}

/* =========================================================
   プリモア一覧：レアリティバッジ
   ========================================================= */
.box-carousel-visual.owned { position: relative; }
.box-carousel-rarity-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 7;
  width: clamp(50px, 15vw, 64px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.84;
  filter:
    saturate(0.88)
    brightness(1.01)
    drop-shadow(0 1px 1px rgba(255,255,255,0.42))
    drop-shadow(0 3px 4px rgba(58,43,21,0.25))
    drop-shadow(0 6px 9px rgba(58,43,21,0.12));
}
.box-carousel-rarity-badge.rarity-r { opacity: 0.78; }
.box-carousel-rarity-badge.rarity-sr { opacity: 0.88; }
@media (max-height: 720px) {
  .box-carousel-rarity-badge { right: 4px; bottom: 4px; width: clamp(46px, 14vw, 58px); }
}
@media (max-height: 660px) {
  .box-carousel-rarity-badge { width: clamp(42px, 13vw, 54px); }
}



/* =========================================================
   108 巡行：ステージ実行行をフラットデザインへ統一
   - デイリー実行ボタン
   - CHAPTER配下のステージ選択
   - 特別巡行と同じ、角丸なし・区切り線ベース
   ========================================================= */

/* デイリー：丸角カードを廃止し、特別巡行と同じ行リストへ */
#screen-ninmu .ninmu-daily-area {
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
}

#screen-ninmu .ninmu-test-btn {
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 15px 20px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(115, 99, 70, .16) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
  color: #25334d !important;
  text-align: left !important;
  transform: none !important;
}

#screen-ninmu .ninmu-test-btn:first-child {
  border-top: 0 !important;
}

#screen-ninmu .ninmu-test-btn:active {
  background: rgba(224, 211, 181, .34) !important;
  transform: none !important;
}

#screen-ninmu .ninmu-test-btn-first {
  border-color: rgba(115, 99, 70, .16) !important;
  background: rgba(255,255,255,.62) !important;
}

#screen-ninmu .ninmu-test-btn-title {
  color: #25334d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}

#screen-ninmu .ninmu-test-btn-sub {
  color: rgba(70, 82, 105, .62) !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  line-height: 1.55 !important;
}

/* CHAPTER配下：カードではなく横幅いっぱいの行として表示 */
#stage-select-modal .ss-list-wrap {
  padding: 0 0 calc(40px + env(safe-area-inset-bottom, 20px)) !important;
  background: rgba(255,255,255,.46) !important;
}

#stage-select-modal .ss-list {
  gap: 0 !important;
}

#stage-select-modal .ss-card,
#stage-select-modal .ss-card[style] {
  min-height: 76px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(115, 99, 70, .16) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
  color: #27344f !important;
  transform: none !important;
}

#stage-select-modal .ss-card::before {
  content: none !important;
  display: none !important;
}

#stage-select-modal .ss-card:active,
#stage-select-modal .ss-card[style]:active {
  background: rgba(224, 211, 181, .34) !important;
  border-color: rgba(115, 99, 70, .16) !important;
  transform: none !important;
}

/* ステージ番号を小さな箱ではなく、左側のプレーンな番号表示へ */
#stage-select-modal .ss-card-no,
#stage-select-modal .ss-card[style] .ss-card-no {
  width: 38px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(64, 76, 99, .50) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

#stage-select-modal .ss-card-body {
  gap: 5px !important;
}

#stage-select-modal .ss-card-name,
#stage-select-modal .ss-card[style] .ss-card-name {
  color: #27344f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

#stage-select-modal .ss-card-enemy,
#stage-select-modal .ss-card[style] .ss-card-enemy {
  color: rgba(70, 82, 105, .58) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}

#stage-select-modal .ss-card-reward {
  color: rgba(124, 98, 49, .66) !important;
  font-size: 9px !important;
}

#stage-select-modal .ss-diff-badge,
#stage-select-modal .ss-card[style] .ss-diff-badge {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
}

#stage-select-modal .ss-card-arrow {
  color: rgba(55, 68, 94, .24) !important;
}

/* ローグライトの行も完全に同一形状にする */
#stage-select-modal .ss-card-roguelite {
  background: rgba(255,255,255,.62) !important;
  border-left: 0 !important;
}


/* =========================================================
   109 巡行：ステージ行の押下フィードバック
   - 2px沈み込み
   - 縦方向へごく軽く圧縮
   - 内側シャドウ
   - 背景色の変化
   ========================================================= */

#screen-ninmu .ninmu-test-btn,
#stage-select-modal .ss-card {
  transition:
    transform 90ms ease,
    background-color 90ms ease,
    box-shadow 90ms ease !important;
  transform: translateY(0) scaleY(1) !important;
  transform-origin: center center;
  will-change: transform, box-shadow, background-color;
}

#screen-ninmu .ninmu-test-btn:active,
#stage-select-modal .ss-card:active,
#stage-select-modal .ss-card[style]:active {
  transform: translateY(2px) scaleY(.985) !important;
  background: rgba(214, 201, 171, .38) !important;
  box-shadow:
    inset 0 2px 5px rgba(73, 57, 31, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .32) !important;
}

/* 中の文字・番号もわずかに追従させ、物理的な沈み込み感を補強 */
#screen-ninmu .ninmu-test-btn > *,
#stage-select-modal .ss-card > * {
  transition: transform 90ms ease !important;
  transform: translateY(0);
}

#screen-ninmu .ninmu-test-btn:active > *,
#stage-select-modal .ss-card:active > * {
  transform: translateY(1px);
}

/* キーボード操作時は押下ではなくフォーカスとして表示 */
#screen-ninmu .ninmu-test-btn:focus-visible,
#stage-select-modal .ss-card:focus-visible {
  outline: 1px solid rgba(151, 119, 59, .52);
  outline-offset: -2px;
}


/* =========================================================
   110 巡行：フォントと押下フィードバックの完全統一
   - デイリーの日本語を明朝体へ統一
   - 特別巡行／ストーリーにもデイリー同等の沈み込みを適用
   ========================================================= */

/* デイリーだけブラウザ既定のゴシックへ戻らないよう明示 */
#screen-ninmu .ninmu-test-btn,
#screen-ninmu .ninmu-test-btn-title,
#screen-ninmu .ninmu-test-btn-sub {
  font-family: "Noto Serif JP", serif !important;
}

#screen-ninmu .ninmu-test-btn-sub {
  /* 英数字も周囲の空気感に馴染ませつつ、日本語は明朝を維持 */
  font-family: "Cinzel", "Noto Serif JP", serif !important;
}

/* 特別巡行／ストーリーの行にも、デイリーと同じ打感を適用 */
#screen-ninmu .ninmu-chapter-item {
  transition:
    transform 90ms ease,
    background-color 90ms ease,
    box-shadow 90ms ease !important;
  transform: translateY(0) scaleY(1) !important;
  transform-origin: center center;
  will-change: transform, box-shadow, background-color;
  -webkit-tap-highlight-color: transparent;
}

#screen-ninmu .ninmu-chapter-item:not(.ninmu-chapter-locked):active {
  transform: translateY(2px) scaleY(.985) !important;
  background: rgba(214, 201, 171, .38) !important;
  box-shadow:
    inset 0 2px 5px rgba(73, 57, 31, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .32) !important;
}

/* 見出し文字もデイリーと同じく1px追従 */
#screen-ninmu .ninmu-chapter-item > * {
  transition: transform 90ms ease !important;
  transform: translateY(0);
}

#screen-ninmu .ninmu-chapter-item:not(.ninmu-chapter-locked):active > * {
  transform: translateY(1px);
}

/* 特別巡行／ストーリーの日本語タイトルも明朝体を固定 */
#screen-ninmu .ninmu-chapter-title {
  font-family: "Noto Serif JP", serif !important;
}

#screen-ninmu .ninmu-chapter-label {
  font-family: "Cinzel", "Noto Serif JP", serif !important;
}


/* =========================================================
   111 巡行：デイリー文字を特別巡行と完全一致
   ========================================================= */

/* デイリーのタイトルを .ninmu-chapter-title と同一指定にする */
#screen-ninmu .ninmu-test-btn-title {
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .05em !important;
  line-height: normal !important;
  color: var(--z-text-main-soft) !important;
  text-shadow: none !important;
}

/* 特別巡行側も同じ値を明示し、端末差・継承差をなくす */
#screen-ninmu .ninmu-chapter-title {
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .05em !important;
  line-height: normal !important;
  color: var(--z-text-main-soft) !important;
  text-shadow: none !important;
}

/* ボタン要素由来の太字継承を完全に遮断 */
#screen-ninmu .ninmu-test-btn {
  font-weight: 400 !important;
}


/* =========================================================
   112 巡行：支給素材を使ったモック準拠レイアウト
   junkou_tab.webp / junkou_right.webp
   ========================================================= */
#screen-ninmu {
  background: #f5f0e6;
  color: #4a3c2b;
  overflow: hidden;
}
#screen-ninmu .header {
  background:
    linear-gradient(180deg, rgba(250,248,241,0.98), rgba(238,232,218,0.96)) !important;
  border-bottom: 1px solid rgba(154,124,61,0.28) !important;
  box-shadow: 0 2px 12px rgba(85,67,31,0.08) !important;
}
#screen-ninmu .header-title { color:#6d583b; }
#screen-ninmu .ninmu-layout {
  display:grid;
  grid-template-columns: 106px minmax(0,1fr);
  gap:10px;
  flex:1;
  min-height:0;
  padding:10px 10px calc(86px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 91% 5%, rgba(182,151,91,.09), transparent 20%),
    linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38));
}
#screen-ninmu .ninmu-left {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  background:rgba(244,237,223,.38);
}
#screen-ninmu .ninmu-cat-item {
  position:relative;
  width:100%;
  min-height:98px;
  border:0 !important;
  border-radius:0 !important;
  background: url("../images/junkou_tab.webp") center/100% 100% no-repeat !important;
  color:#4d402f !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 6px !important;
  box-shadow:0 2px 6px rgba(82,59,25,.08) !important;
  opacity:.78;
}
#screen-ninmu .ninmu-cat-item.active {
  opacity:1;
  filter:brightness(1.03) saturate(1.08);
  box-shadow:0 0 0 1px rgba(194,150,63,.28), 0 4px 10px rgba(82,59,25,.12) !important;
}
#screen-ninmu .ninmu-cat-item.active::after {
  content:"✦";
  position:absolute;
  right:-5px;
  top:50%;
  transform:translateY(-50%);
  color:#d5ad50;
  text-shadow:0 0 8px rgba(218,174,72,.72);
}
#screen-ninmu .ninmu-cat-jp { font-size:15px; letter-spacing:.08em; }
#screen-ninmu .ninmu-cat-en { font:8px "Cinzel",serif; letter-spacing:.28em; color:#a68a5e; }
#screen-ninmu .ninmu-right { min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; }
#screen-ninmu .ninmu-panel { width:100%; }
#screen-ninmu .ninmu-daily-area { display:flex; flex-direction:column; gap:8px !important; }
#screen-ninmu .ninmu-test-btn,
#screen-ninmu .ninmu-chapter-item {
  position:relative;
  width:100% !important;
  min-height:124px !important;
  padding:14px 12px 14px 15px !important;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) 76px;
  align-items:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:url("../images/junkou_right.webp") center/100% 100% no-repeat !important;
  box-shadow:0 3px 8px rgba(77,56,28,.12) !important;
  text-align:left !important;
  color:#4b3e2d !important;
}
#screen-ninmu .ninmu-stage-mark { align-self:start; padding-top:4px; color:#9b8666; font-size:17px; }
#screen-ninmu .ninmu-stage-copy { display:flex; flex-direction:column; min-width:0; gap:5px; }
#screen-ninmu .ninmu-test-btn-title { color:#443827 !important; font-size:15px !important; letter-spacing:.06em !important; white-space:normal; }
#screen-ninmu .ninmu-test-btn-sub { color:#776a58 !important; font-size:8px !important; letter-spacing:.08em !important; }
#screen-ninmu .ninmu-test-btn-sub b { display:inline-block; padding:2px 8px; background:#cfc5b5; color:#fff; font-weight:400; letter-spacing:.15em; }
#screen-ninmu .ninmu-test-btn-ex .ninmu-test-btn-sub b { background:#c99d45; }
#screen-ninmu .ninmu-test-btn-sub em { font-style:normal; color:#9a8b77; }
#screen-ninmu .ninmu-stage-drop { font-size:9px; color:#8a7b67; }
#screen-ninmu .ninmu-stage-reward-label { margin-top:5px; font-size:9px; color:#8b6e3c; letter-spacing:.08em; }
#screen-ninmu .ninmu-stage-action {
  justify-self:end;
  align-self:end;
  margin-bottom:4px;
  min-width:72px;
  padding:8px 7px;
  border:1px solid rgba(255,255,255,.7);
  outline:1px solid #b58b38;
  border-radius:18px;
  background:linear-gradient(#c6a351,#a98231);
  color:#fff;
  text-align:center;
  font-size:11px;
  letter-spacing:.08em;
  text-shadow:0 1px 1px rgba(89,55,10,.35);
  box-shadow:0 2px 4px rgba(73,48,13,.18);
}
#screen-ninmu .ninmu-detail-card {
  margin-top:10px;
  min-height:180px;
  padding:12px;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:13px;
  background:url("../images/junkou_right.webp") center/100% 100% no-repeat;
  box-shadow:0 3px 8px rgba(77,56,28,.1);
}
#screen-ninmu .ninmu-detail-visual {
  min-height:150px;
  border:1px solid rgba(166,136,81,.28);
  background:
    linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 30%,#dce1df,transparent 48%),
    linear-gradient(145deg,#eef0e9,#cbd2cd);
  opacity:.78;
}
#screen-ninmu .ninmu-detail-copy { min-width:0; padding:4px 4px 0 0; }
#screen-ninmu .ninmu-detail-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(139,112,69,.18); padding-bottom:6px; }
#screen-ninmu .ninmu-detail-head h3 { margin:0; font-size:15px; font-weight:400; letter-spacing:.08em; }
#screen-ninmu .ninmu-detail-head span { font-size:8px; color:#7f725f; }
#screen-ninmu .ninmu-detail-copy p { margin:9px 0 12px; font-size:9px; line-height:1.8; color:#746855; }
#screen-ninmu .ninmu-detail-reward-title { font-size:9px; color:#765d34; padding-bottom:5px; border-bottom:1px solid rgba(139,112,69,.18); }
#screen-ninmu .ninmu-detail-rewards { display:flex; gap:7px; margin-top:8px; }
#screen-ninmu .ninmu-detail-rewards span { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(143,113,64,.32); background:rgba(255,255,255,.45); color:#aa7e26; font-size:18px; }
#screen-ninmu .ninmu-chapter-list { display:flex; flex-direction:column; gap:8px; }
#screen-ninmu .ninmu-chapter-item { display:flex !important; flex-direction:column; justify-content:center; align-items:flex-start !important; gap:6px; }

/* 特別巡行だけ専用カード背景を使用 */
#screen-ninmu #ninmu-panel-special .ninmu-chapter-item {
  background: url("../images/junkou_special.webp") center / 100% 100% no-repeat !important;
}

#screen-ninmu .ninmu-chapter-label { color:#a3834e !important; font-size:8px !important; letter-spacing:.18em !important; }
#screen-ninmu .ninmu-chapter-title { color:#443827 !important; font-size:15px !important; }
@media (max-height:740px) {
  #screen-ninmu .ninmu-cat-item { min-height:82px; }
  #screen-ninmu .ninmu-test-btn { min-height:108px !important; }
  #screen-ninmu .ninmu-detail-card { min-height:154px; }
  #screen-ninmu .ninmu-detail-visual { min-height:128px; }
}


/* =========================================================
   109 プリモア一覧：キャラクターフレーム重ね表示
   - images/chara_frame.webp をキャラ画像の最前面に配置
   - レアリティバッジと拡大ヒントはフレームより上に表示
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: url("../images/chara_frame.webp") center / 100% 100% no-repeat;
  pointer-events: none;
  user-select: none;
}

#box-grid.box-carousel .box-carousel-rarity-badge {
  z-index: 7;
}

#box-grid.box-carousel .box-carousel-zoom-hint {
  z-index: 8;
}


/* =========================================================
   共鳴モーダル：不足素材の明示
   ========================================================= */
#limitbreak-modal .lb-recipe-row.ng {
  border-radius: 9px !important;
  background: rgba(188, 48, 48, .075) !important;
  box-shadow: inset 3px 0 0 rgba(190, 48, 48, .72) !important;
}

#limitbreak-modal .lb-recipe-row.ng .lb-recipe-name,
#limitbreak-modal .lb-recipe-row.ng .lb-recipe-count,
#limitbreak-modal .lb-vessel-choice.ng .lb-vessel-choice-name,
#limitbreak-modal .lb-vessel-choice.ng .lb-vessel-choice-count {
  color: #bd3838 !important;
  font-weight: 700 !important;
}

#limitbreak-modal .lb-recipe-shortage-label {
  display: block;
  margin-top: 2px;
  color: #c13b3b !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

#limitbreak-modal .lb-lack-box {
  margin: 2px 0 8px;
  padding: 10px 11px;
  border: 1px solid rgba(185, 48, 48, .28);
  border-radius: 11px;
  background: rgba(188, 48, 48, .065);
}

#limitbreak-modal .lb-lack-title {
  margin-bottom: 6px;
  color: #a72f2f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}

/* build927: 不足素材が多い場合は、不足一覧だけを縦スクロール可能にする。 */
#limitbreak-modal .lb-lack-list {
  max-height: 92px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,47,47,.34) transparent;
}

#limitbreak-modal .lb-lack-list::-webkit-scrollbar {
  width: 4px;
}

#limitbreak-modal .lb-lack-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(167,47,47,.30);
}

#limitbreak-modal .lb-lack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
  color: #bd3838;
  font-size: 11px;
  font-weight: 700;
}

#limitbreak-modal .lb-lack-count {
  white-space: nowrap;
  font-family: "Cinzel", "Noto Serif JP", serif;
}

#limitbreak-modal .lb-no-material-shortage {
  color: #a93232 !important;
  font-weight: 700 !important;
}

/* =========================================================
   108 Home HUD / Bottom Nav Ivory Gold Patch
   - ホームモックの白紙・淡金・ブラウン基調へ統一
   ========================================================= */
:root {
  --home-paper: #f7f2e7;
  --home-paper-deep: #e9dfca;
  --home-brown: #5f4b2d;
  --home-brown-soft: #8a7348;
  --home-gold: #b79652;
  --home-gold-light: #ddc98f;
}

.global-user-frame,
.global-user-frame.hud-dark {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.96), transparent 38%),
    linear-gradient(180deg, rgba(250,247,239,0.98), rgba(237,228,210,0.98)) !important;
  border-bottom: 1px solid rgba(153,119,56,0.42) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.82),
    0 5px 14px rgba(91,69,31,0.13) !important;
}

.global-user-frame::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,139,67,0.52) 12%, rgba(176,139,67,0.52) 88%, transparent);
  pointer-events: none;
}

.global-user-frame .hud-lv-circle {
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.96), rgba(245,238,222,0.94) 58%, rgba(222,208,178,0.94)) !important;
  border: 1px solid rgba(151,116,50,0.72) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.52),
    inset 0 0 12px rgba(164,126,57,0.13),
    0 2px 6px rgba(91,69,31,0.12) !important;
}

.global-user-frame .hud-lv-label,
.global-user-frame .hud-exp-text,
.global-user-frame .hud-id {
  color: rgba(103,82,47,0.74) !important;
}

.global-user-frame .hud-lv-num,
.global-user-frame .hud-name,
.global-user-frame .hud-res-val {
  color: var(--home-brown) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
}

.global-user-frame .hud-exp-bg {
  background: rgba(83,69,47,0.38) !important;
  border: 1px solid rgba(132,103,51,0.28) !important;
  box-shadow: inset 0 1px 2px rgba(75,57,26,0.18) !important;
}

.global-user-frame .hud-exp-fill {
  background: linear-gradient(90deg, #a87f32 0%, #d8bb68 70%, #f0df9f 100%) !important;
  box-shadow: 0 0 5px rgba(190,151,66,0.35) !important;
}

.global-user-frame .hud-resource {
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(239,231,214,0.92)) !important;
  border: 1px solid rgba(144,110,49,0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 7px rgba(88,65,27,0.12) !important;
}

.global-user-frame .hud-gem-plus-btn {
  background: linear-gradient(180deg, #fffdf7, #e8dcc2) !important;
  color: #765a2b !important;
  border: 1px solid rgba(145,109,45,0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.bottom-nav {
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.94), transparent 42%),
    linear-gradient(180deg, rgba(249,246,237,0.99), rgba(231,220,198,0.99)) !important;
  border-top: 1px solid rgba(147,111,48,0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 -7px 18px rgba(91,68,29,0.13) !important;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,145,71,0.55) 12%, rgba(183,145,71,0.55) 88%, transparent);
  pointer-events: none;
}

.bottom-nav-item {
  min-height: 64px !important;
  border-right: 1px solid rgba(164,132,72,0.20);
}

.bottom-nav-item:last-child { border-right: 0; }

.bottom-nav-item img {
  filter: sepia(0.58) saturate(0.68) brightness(0.70) contrast(1.08) !important;
  opacity: 0.78 !important;
}

.bottom-nav-label {
  color: rgba(83,65,38,0.82) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.78) !important;
}

.bottom-nav-item.active::before {
  inset: -7px 4px -9px !important;
  border: 1px solid rgba(181,143,66,0.48) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,244,192,0.72), transparent 43%),
    linear-gradient(180deg, rgba(255,252,239,0.88), rgba(232,214,170,0.68)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.52),
    0 0 12px rgba(169,128,49,0.16) !important;
}

.bottom-nav-item.active img {
  filter: sepia(0.42) saturate(1.1) brightness(0.86) contrast(1.08) drop-shadow(0 2px 4px rgba(118,86,31,0.24)) !important;
  opacity: 1 !important;
}

.bottom-nav-item.active .bottom-nav-label {
  color: #6d5227 !important;
  font-weight: 700 !important;
}

@media (max-width: 380px), (max-height: 700px) {
  .bottom-nav {
    min-height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding-top: 5px !important;
  }
}


/* =========================================================
   Shinju growth gauge — ivory / antique gold integration
   ========================================================= */
.shinju-progress-head {
  color: rgba(105, 87, 55, 0.78) !important;
}

.shinju-progress-bg {
  background: linear-gradient(180deg, rgba(168, 164, 151, 0.34), rgba(205, 201, 188, 0.46)) !important;
  border: 1px solid rgba(135, 119, 83, 0.20) !important;
  box-shadow:
    inset 0 1px 2px rgba(92, 82, 60, 0.14),
    0 1px 5px rgba(255,255,255,0.46) !important;
}

.shinju-progress-fill {
  background: linear-gradient(90deg, #a68f50 0%, #d3bd73 50%, #eee0a6 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.48),
    0 0 7px rgba(194, 164, 80, 0.30) !important;
}

/* =========================================================
   110 プリモア／レムナント背景 最終優先指定
   - 共通紙背景（103）の後段上書き対策
   ========================================================= */
#screen-zukan.is-primoa-mode {
  background-color: #f4efe5 !important;
  background-image: url("../images/primoa_bg.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

#screen-zukan.is-remnant-mode {
  background-color: #f4efe5 !important;
  background-image: url("../images/primoa_bg.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* レムナント一覧のスクロール領域・カルーセルは背景素材を透かす */
#screen-zukan.is-remnant-mode .screen-scroll,
#screen-zukan.is-remnant-mode #zukan-sub-box,
#screen-zukan.is-remnant-mode #box-grid.remnant-carousel {
  background: transparent !important;
  background-color: transparent !important;
}


/* =========================================================
   102 Primoa Status Panel Blend Patch
   - プリモア詳細の白すぎるステータスカードを画面になじませる
   - 文字色も読みやすい暖色系へ調整
   ========================================================= */

#screen-zukan.is-primoa-mode .box-carousel-detail,
#screen-zukan.is-primoa-mode .box-carousel-detail-scroll,
#screen-zukan.is-primoa-mode #detail-modal .modal {
  color: #4c4031 !important;
}

#screen-zukan.is-primoa-mode .detail-lb-section,
#screen-zukan.is-primoa-mode .detail-skill-section,
#screen-zukan.is-primoa-mode .detail-skill-card,
#screen-zukan.is-primoa-mode .detail-skill-empty,
#screen-zukan.is-primoa-mode .box-carousel-locked-panel,
#detail-modal .detail-lb-section,
#detail-modal .detail-skill-section,
#detail-modal .detail-skill-card,
#detail-modal .detail-skill-empty {
  background:
    linear-gradient(180deg,
      rgba(247,243,234,0.95) 0%,
      rgba(242,236,226,0.94) 100%) !important;
  border-color: rgba(171,149,114,0.24) !important;
  box-shadow:
    0 8px 20px rgba(93,76,49,0.08),
    0 0 0 1px rgba(255,255,255,0.52) inset !important;
  color: #4c4031 !important;
}

#screen-zukan.is-primoa-mode .detail-skill-card.is-ult,
#detail-modal .detail-skill-card.is-ult {
  background:
    linear-gradient(180deg,
      rgba(243,238,247,0.96) 0%,
      rgba(237,231,243,0.94) 100%) !important;
  border-color: rgba(126,104,173,0.24) !important;
}

#screen-zukan.is-primoa-mode .detail-lb-label,
#screen-zukan.is-primoa-mode .detail-status-label,
#screen-zukan.is-primoa-mode .detail-lb-info,
#screen-zukan.is-primoa-mode .detail-section-title,
#screen-zukan.is-primoa-mode .detail-skill-meta span,
#screen-zukan.is-primoa-mode .detail-skill-desc,
#screen-zukan.is-primoa-mode .detail-skill-empty,
#screen-zukan.is-primoa-mode .detail-type-row,
#screen-zukan.is-primoa-mode .detail-type-val,
#screen-zukan.is-primoa-mode .detail-element-type-label,
#screen-zukan.is-primoa-mode .detail-owned-count,
#screen-zukan.is-primoa-mode .stat-name,
#screen-zukan.is-primoa-mode .stat-val,
#detail-modal .detail-lb-label,
#detail-modal .detail-status-label,
#detail-modal .detail-lb-info,
#detail-modal .detail-section-title,
#detail-modal .detail-skill-meta span,
#detail-modal .detail-skill-desc,
#detail-modal .detail-skill-empty,
#detail-modal .detail-type-row,
#detail-modal .detail-type-val,
#detail-modal .detail-element-type-label,
#detail-modal .detail-owned-count,
#detail-modal .stat-name,
#detail-modal .stat-val {
  color: rgba(92,76,56,0.78) !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-status-val,
#screen-zukan.is-primoa-mode .detail-skill-name,
#screen-zukan.is-primoa-mode .detail-lb-title,
#screen-zukan.is-primoa-mode .detail-skill-title,
#screen-zukan.is-primoa-mode .detail-type-val,
#screen-zukan.is-primoa-mode .detail-owned-count strong,
#screen-zukan.is-primoa-mode .box-carousel-locked-title,
#detail-modal .detail-status-val,
#detail-modal .detail-skill-name,
#detail-modal .detail-lb-title,
#detail-modal .detail-skill-title,
#detail-modal .detail-type-val,
#detail-modal .detail-owned-count strong,
#detail-modal .box-carousel-locked-title {
  color: #4c4031 !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-lb-val,
#detail-modal .detail-lb-val {
  color: #7a5faf !important;
}

#screen-zukan.is-primoa-mode .detail-skill-effect,
#detail-modal .detail-skill-effect {
  color: #7b5f98 !important;
}

#screen-zukan.is-primoa-mode .detail-lb-row,
#detail-modal .detail-lb-row {
  border-bottom-color: rgba(171,149,114,0.18) !important;
}

#screen-zukan.is-primoa-mode .detail-status-grid,
#detail-modal .detail-status-grid {
  gap: 10px;
}

#screen-zukan.is-primoa-mode .detail-status-row,
#detail-modal .detail-status-row {
  min-height: 28px;
}

#screen-zukan.is-primoa-mode .detail-skill-badge,
#detail-modal .detail-skill-badge {
  background: rgba(147,121,80,0.08) !important;
  border-color: rgba(147,121,80,0.18) !important;
  color: rgba(92,76,56,0.78) !important;
}

#screen-zukan.is-primoa-mode .detail-skill-card.is-ult .detail-skill-badge,
#detail-modal .detail-skill-card.is-ult .detail-skill-badge {
  background: rgba(122,95,175,0.10) !important;
  border-color: rgba(122,95,175,0.22) !important;
  color: #6a5396 !important;
}

#screen-zukan.is-primoa-mode .detail-range-preview,
#screen-zukan.is-primoa-mode .detail-move-preview,
#detail-modal .detail-range-preview,
#detail-modal .detail-move-preview {
  background: rgba(120,103,79,0.06) !important;
  border-color: rgba(171,149,114,0.16) !important;
}

#screen-zukan.is-primoa-mode .detail-range-board,
#screen-zukan.is-primoa-mode .detail-move-board,
#detail-modal .detail-range-board,
#detail-modal .detail-move-board {
  background: rgba(120,103,79,0.07) !important;
  border-color: rgba(171,149,114,0.16) !important;
}

#screen-zukan.is-primoa-mode .detail-range-cell,
#screen-zukan.is-primoa-mode .detail-move-cell,
#detail-modal .detail-range-cell,
#detail-modal .detail-move-cell {
  background: rgba(255,255,255,0.46) !important;
  border-color: rgba(171,149,114,0.10) !important;
}


/* =========================================================
   Primoa detail range guide visibility enhancement
   - white-theme generic cells must not wash out state colors
   - self/origin is gold, enemy target is rose, ally target is blue
   ========================================================= */
#screen-zukan.is-primoa-mode .detail-range-cell.self,
#detail-modal .detail-range-cell.self {
  background: #d8ad45 !important;
  border-color: #fff2b6 !important;
  box-shadow:
    0 0 0 2px rgba(126, 91, 25, 0.24),
    0 0 10px rgba(207, 157, 48, 0.70),
    inset 0 0 0 1px rgba(255,255,255,0.72) !important;
  border-radius: 50% !important;
}

#screen-zukan.is-primoa-mode .detail-range-cell.target,
#detail-modal .detail-range-cell.target {
  background: rgba(205, 73, 91, 0.82) !important;
  border-color: rgba(139, 38, 54, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.58),
    0 0 8px rgba(190, 55, 76, 0.46) !important;
}

#screen-zukan.is-primoa-mode .detail-range-cell.ally,
#detail-modal .detail-range-cell.ally {
  background: rgba(74, 153, 205, 0.82) !important;
  border-color: rgba(38, 105, 153, 0.90) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.58),
    0 0 8px rgba(55, 138, 194, 0.44) !important;
}

#screen-zukan.is-primoa-mode .detail-move-cell.self,
#detail-modal .detail-move-cell.self {
  background: #d8ad45 !important;
  border-color: #fff2b6 !important;
  box-shadow:
    0 0 0 2px rgba(126, 91, 25, 0.24),
    0 0 10px rgba(207, 157, 48, 0.68) !important;
  border-radius: 50% !important;
}

#screen-zukan.is-primoa-mode .detail-move-cell.movable,
#detail-modal .detail-move-cell.movable {
  background: rgba(91, 143, 193, 0.76) !important;
  border-color: rgba(45, 96, 146, 0.88) !important;
  box-shadow: 0 0 7px rgba(65, 126, 183, 0.40) !important;
}


/* =========================================================
   103 Primoa Combo Trigger Visibility Patch
   - 反応範囲の combo-trigger 色が白テーマ汎用セルに負けるため再指定
   ========================================================= */

#screen-zukan.is-primoa-mode .detail-combo-trigger-preview,
#detail-modal .detail-combo-trigger-preview {
  background: rgba(120,103,79,0.08) !important;
  border-color: rgba(171,149,114,0.18) !important;
}

#screen-zukan.is-primoa-mode .detail-combo-trigger-board,
#detail-modal .detail-combo-trigger-board {
  background: rgba(120,103,79,0.09) !important;
  border-color: rgba(171,149,114,0.18) !important;
}

#screen-zukan.is-primoa-mode .detail-combo-trigger-board .detail-range-cell.combo-trigger,
#detail-modal .detail-combo-trigger-board .detail-range-cell.combo-trigger {
  background:
    linear-gradient(180deg, rgba(226,210,242,0.98), rgba(191,161,220,0.96)) !important;
  border-color: rgba(119,84,160,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 0 0 1px rgba(255,255,255,0.42),
    0 0 8px rgba(124,84,170,0.34) !important;
}

#screen-zukan.is-primoa-mode .detail-combo-range-item .detail-range-cell.target,
#detail-modal .detail-combo-range-item .detail-range-cell.target {
  background:
    linear-gradient(180deg, rgba(214,108,123,0.98), rgba(192,72,90,0.94)) !important;
  border-color: rgba(145,49,64,0.76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.76),
    0 0 0 1px rgba(255,255,255,0.36),
    0 0 8px rgba(183,63,82,0.28) !important;
}

#screen-zukan.is-primoa-mode .detail-combo-range-item .detail-range-cell.ally,
#detail-modal .detail-combo-range-item .detail-range-cell.ally {
  background:
    linear-gradient(180deg, rgba(131,206,214,0.98), rgba(85,176,185,0.94)) !important;
  border-color: rgba(58,138,145,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.76),
    0 0 0 1px rgba(255,255,255,0.36),
    0 0 8px rgba(64,155,163,0.26) !important;
}

/* =========================================================
   111 Remnant Locked Panel Blend Patch
   - レムナント情報カードの白浮きを抑え、背景へなじませる
   ========================================================= */
#screen-zukan.is-remnant-mode .box-carousel-locked-panel,
#screen-zukan.is-remnant-mode .remnant-locked-panel {
  background:
    linear-gradient(180deg,
      rgba(247, 241, 229, 0.88) 0%,
      rgba(236, 226, 208, 0.84) 100%) !important;
  border: 1px solid rgba(160, 132, 91, 0.26) !important;
  box-shadow:
    0 10px 26px rgba(90, 70, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 0 28px rgba(190, 163, 116, 0.08) !important;
  color: #5c4b36 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#screen-zukan.is-remnant-mode .box-carousel-locked-title {
  color: rgba(83, 65, 43, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42) !important;
}

#screen-zukan.is-remnant-mode .box-carousel-locked-no {
  color: rgba(101, 80, 54, 0.68) !important;
}

#screen-zukan.is-remnant-mode .box-carousel-locked-text {
  color: rgba(92, 72, 49, 0.72) !important;
  line-height: 1.8;
}

#screen-zukan.is-remnant-mode .box-carousel-locked-seal {
  background: rgba(178, 148, 101, 0.10) !important;
  border-color: rgba(143, 111, 69, 0.24) !important;
  color: rgba(96, 73, 45, 0.66) !important;
}


/* =========================================================
   112 Remnant Owned Information Panel Readability
   - 背景に埋もれる情報欄を半透明の羊皮紙カードとして整理
   ========================================================= */
#screen-zukan.is-remnant-mode .remnant-detail-card {
  width: calc(100% - 24px) !important;
  margin: 4px auto 0 !important;
  padding: 10px !important;
  gap: 6px !important;
  border: 1px solid rgba(137, 104, 62, 0.24) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg,
      rgba(250, 246, 237, 0.90) 0%,
      rgba(239, 230, 213, 0.88) 100%) !important;
  box-shadow:
    0 10px 24px rgba(78, 57, 31, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.76),
    inset 0 0 24px rgba(173, 137, 82, 0.07) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row {
  position: relative !important;
  min-height: 38px !important;
  padding: 8px 11px 8px 14px !important;
  border: 1px solid rgba(126, 96, 58, 0.13) !important;
  border-radius: 9px !important;
  background: rgba(255, 253, 247, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 2px 7px rgba(79, 59, 34, 0.045) !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #c9a55d, #98733a);
  opacity: 0.72;
}

#screen-zukan.is-remnant-mode .remnant-detail-row span {
  flex: 0 0 38% !important;
  color: rgba(91, 70, 45, 0.68) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.72) !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row strong {
  flex: 1 1 auto !important;
  color: #4c3822 !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.66) !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row:first-child strong {
  color: #8c682f !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-note {
  margin: 2px 4px 0 !important;
  color: rgba(84, 65, 43, 0.66) !important;
  font-size: 10px !important;
  line-height: 1.65 !important;
}


/* =========================================================
   Remnant Blessing Level / Upgrade
   ========================================================= */
.remnant-blessing-card {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(232,200,122,.34);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(35,27,18,.92), rgba(10,10,10,.92));
}
.remnant-blessing-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.remnant-blessing-head span { font-family:"Cinzel",serif; font-size:10px; letter-spacing:.18em; color:rgba(232,200,122,.72); }
.remnant-blessing-head strong { font-family:"Cinzel",serif; color:#f3d58b; font-size:14px; }
.remnant-blessing-name { font-size:15px; font-weight:700; margin-bottom:10px; color:#fff3cf; }
.remnant-blessing-effect,.remnant-blessing-condition { font-size:12px; line-height:1.7; color:rgba(255,255,255,.78); }
.remnant-blessing-condition { color:rgba(255,255,255,.55); margin-bottom:12px; }
.remnant-blessing-upgrade-material { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; margin-top:8px; border-radius:8px; background:rgba(255,255,255,.05); font-size:12px; }
.remnant-blessing-upgrade-material strong { color:#f3d58b; font-family:"Cinzel",serif; }
.remnant-blessing-upgrade-btn { width:100%; margin-top:9px; padding:11px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:rgba(255,255,255,.35); font-family:"Noto Serif JP",serif; font-weight:700; }
.remnant-blessing-upgrade-btn.ready { color:#201506; background:linear-gradient(180deg,#f3d58b,#bd8c37); border-color:#ffe6a8; box-shadow:0 0 18px rgba(232,200,122,.25); cursor:pointer; }
.remnant-blessing-upgrade-btn:disabled { cursor:not-allowed; }
.remnant-blessing-max { margin-top:10px; text-align:center; padding:10px; border:1px solid rgba(243,213,139,.38); color:#f3d58b; font-family:"Cinzel",serif; font-size:11px; letter-spacing:.12em; }


/* =========================================================
   Remnant Detail: Blessing text layout
   ========================================================= */
#screen-zukan.is-remnant-mode .remnant-detail-row.remnant-detail-row-multiline {
  align-items: flex-start !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row.remnant-detail-row-multiline span {
  flex: 0 0 30% !important;
  padding-top: 1px !important;
}

#screen-zukan.is-remnant-mode .remnant-detail-row.remnant-detail-row-multiline strong {
  text-align: left !important;
  line-height: 1.55 !important;
  font-family: "Noto Serif JP", serif !important;
  letter-spacing: 0.02em !important;
}


/* =========================================================
   Remnant Blessing Level / Upgrade integrated panel
   ========================================================= */
#screen-zukan.is-remnant-mode .remnant-blessing-level-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2px 4px 0;
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-head > span {
  color: rgba(104, 77, 42, 0.66);
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.18em;
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-head > strong {
  color: #8d672c;
  font-family: "Cinzel", serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.04em;
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-head > strong small {
  color: rgba(104, 77, 42, 0.48);
  font-size: 10px;
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 0 4px 5px;
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-track i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(116, 86, 47, 0.13);
  box-shadow: inset 0 1px 2px rgba(80, 53, 22, 0.08);
}

#screen-zukan.is-remnant-mode .remnant-blessing-level-track i.filled {
  background: linear-gradient(90deg, #b88838, #e0bd70);
  box-shadow: 0 0 7px rgba(192, 143, 55, 0.28);
}

#screen-zukan.is-remnant-mode .remnant-blessing-upgrade-area {
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(126, 96, 58, 0.15);
}

#screen-zukan.is-remnant-mode .remnant-blessing-material-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(126, 96, 58, 0.13);
  border-radius: 9px;
  background: rgba(255, 253, 247, 0.52);
}

#screen-zukan.is-remnant-mode .remnant-blessing-material-row span {
  color: rgba(91, 70, 45, 0.70);
  font-size: 10px;
  letter-spacing: 0.08em;
}

#screen-zukan.is-remnant-mode .remnant-blessing-material-row strong {
  color: #735638;
  font-family: "Cinzel", serif;
  font-size: 12px;
}

#screen-zukan.is-remnant-mode .remnant-blessing-material-row strong.is-ready {
  color: #a06f1f;
  text-shadow: 0 0 8px rgba(190, 137, 45, 0.25);
}

#screen-zukan.is-remnant-mode .remnant-blessing-upgrade-btn {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid rgba(119, 91, 54, 0.15);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(224, 216, 199, 0.82), rgba(202, 191, 171, 0.82));
  color: rgba(91, 70, 45, 0.40);
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#screen-zukan.is-remnant-mode .remnant-blessing-upgrade-btn.ready {
  border-color: rgba(163, 111, 26, 0.58);
  background: linear-gradient(180deg, #f0cf7e 0%, #c99739 100%);
  color: #3f290e;
  box-shadow:
    0 5px 12px rgba(112, 74, 20, 0.18),
    inset 0 1px 0 rgba(255, 246, 204, 0.74);
  cursor: pointer;
}

#screen-zukan.is-remnant-mode .remnant-blessing-upgrade-btn.ready:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(92, 57, 12, 0.18);
}

#screen-zukan.is-remnant-mode .remnant-blessing-max {
  padding: 11px 8px;
  border: 1px solid rgba(174, 128, 49, 0.28);
  border-radius: 9px;
  background: rgba(232, 207, 151, 0.20);
  color: #966d2d;
  font-family: "Cinzel", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}


/* =========================================================
   Remnant Blessing: hold to preview Lv.5 maximum
   ========================================================= */
#screen-zukan.is-remnant-mode .remnant-blessing-longpress {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

#screen-zukan.is-remnant-mode .remnant-blessing-longpress.is-max-previewing {
  transform: scale(.985);
  border-color: rgba(174, 128, 50, .52) !important;
  background: rgba(255, 246, 218, .82) !important;
}

#screen-zukan.is-remnant-mode .remnant-blessing-hold-hint {
  display: block;
  margin-top: 2px;
  color: rgba(111, 82, 46, .42);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
}

#remnant-blessing-max-preview {
  position: fixed;
  left: 50%;
  z-index: 250000;
  width: min(310px, calc(100vw - 40px));
  padding: 13px 16px 14px;
  border: 1px solid rgba(163, 116, 42, .42);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 251, 238, .98), rgba(235, 220, 188, .98));
  color: #4f3820;
  text-align: center;
  box-shadow: 0 12px 30px rgba(75, 52, 25, .24), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.96);
  transition: opacity .15s ease, transform .15s ease;
}

#remnant-blessing-max-preview.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#remnant-blessing-max-preview .remnant-blessing-max-preview-label {
  margin-bottom: 5px;
  color: #9b7130;
  font-family: "Cinzel", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

#remnant-blessing-max-preview .remnant-blessing-max-preview-text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}


/* Remnant blessing INV target chooser */
.b32-blessing-target-chooser{display:none;position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.72);align-items:center;justify-content:center;padding:24px}
.b32-blessing-target-chooser.show{display:flex}
.b32-blessing-target-card{width:min(360px,92vw);background:#111;border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:18px;box-shadow:0 16px 50px rgba(0,0,0,.8)}
.b32-blessing-target-title{font-size:16px;text-align:center;letter-spacing:.08em;margin-bottom:14px}
.b32-blessing-target-list{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto}
.b32-blessing-target-btn,.b32-blessing-target-cancel{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;padding:12px;font-family:inherit;font-size:14px}
.b32-blessing-target-cancel{margin-top:14px;color:#aaa;background:transparent}


/* =========================================================
   07-G Summon / Pickup long-press detail
   ========================================================= */
#screen-summon [data-gacha-longpress] {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  position: relative;
}

#screen-summon .summon-longpress-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.56);
  color: rgba(255,255,255,.92);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#screen-summon [data-gacha-longpress]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 66%);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .16s ease, transform .55s linear;
}

#screen-summon [data-gacha-longpress].is-longpressing::after {
  opacity: 1;
  transform: scale(1);
}

#detail-modal.is-gacha-pickup-preview .detail-rank {
  color: #cba85b;
  letter-spacing: .12em;
  font-weight: 700;
}

#detail-modal.is-gacha-pickup-preview .modal::before {
  content: 'PICK UP CHARACTER';
  display: block;
  margin: 0 0 10px;
  color: #b99445;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-align: center;
}

@media (max-height: 700px) {
  #screen-summon .summon-longpress-hint {
    right: 7px;
    bottom: 7px;
    font-size: 8px;
    padding: 4px 7px;
  }
}

/* =========================================================
   Gacha pickup detail: title/name order and image centering fix
   ========================================================= */
#detail-modal .gacha-pickup-title-name {
  display: none;
}

#detail-modal.is-gacha-pickup-preview .gacha-pickup-title-name {
  display: block;
  margin: -2px 0 12px;
  color: #8b7655;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .12em;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 2px 5px rgba(116,88,45,.16);
}

/* キャラ名は見出し直下の専用表示へ集約 */
#detail-modal.is-gacha-pickup-preview #detail-name {
  display: none !important;
}

/* 220pxの親から260px画像が右へはみ出していたため、親ごと260pxで中央固定 */
#detail-modal.is-gacha-pickup-preview #detail-chara-visual {
  width: 260px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#detail-modal.is-gacha-pickup-preview #detail-chara-visual .detail-visual-wrap {
  width: 260px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 auto;
}

#detail-modal.is-gacha-pickup-preview #detail-chara-visual .detail-main-img {
  width: 260px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   神樹：奉納可能通知バッジ
   inventory に奉納可能アイテムが1件以上ある時、
   shinju.js が .has-items を付与して表示する。
   ========================================================= */
#screen-main .shinju-home-entry .shinju-home-entry-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 17px;
  height: 17px;
  display: none;
  border-radius: 50%;
  background: #d92f38;
  border: 2px solid rgba(255, 248, 232, 0.98);
  box-shadow:
    0 1px 4px rgba(70, 15, 18, 0.42),
    0 0 8px rgba(220, 45, 55, 0.42);
  pointer-events: none;
  z-index: 4;
}

#screen-main .shinju-home-entry.has-items .shinju-home-entry-badge {
  display: block;
  animation: shinju-home-notice-pulse 1.8s ease-in-out infinite;
}

@keyframes shinju-home-notice-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 1px 4px rgba(70, 15, 18, 0.42),
      0 0 7px rgba(220, 45, 55, 0.36);
  }
  50% {
    transform: scale(1.12);
    box-shadow:
      0 1px 5px rgba(70, 15, 18, 0.48),
      0 0 13px rgba(235, 50, 60, 0.68);
  }
}

/* =========================================================
   Home right icons - iPhone SE size adjustment
   SE系の狭い画面では、お知らせ・神樹を一回り小さくする。
   ========================================================= */
@media (max-width: 380px) and (max-height: 700px) {
  #screen-main .home-notice-btn,
  #screen-main .shinju-home-entry {
    width: 78px;
    height: 78px;
  }

  #screen-main .shinju-home-entry .shinju-home-entry-badge {
    top: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
  }
}


/* =========================================================
   Home right icons - banner-safe dynamic placement
   JSが実測したイベントバナー下端を基準に配置するため、
   iPhone 14以上を含む画面幅・高さ・Safe Areaの差でも重ならない。
   ========================================================= */
#screen-main {
  --home-banner-bottom: calc(env(safe-area-inset-top) + 202px);
  --home-shinju-top: calc(env(safe-area-inset-top) + 300px);
}

#screen-main .home-notice-btn {
  top: var(--home-banner-bottom) !important;
}

#screen-main .shinju-home-entry {
  top: var(--home-shinju-top) !important;
}

/* =========================================================
   110 巡行：デイリー報酬を画像アイコンで表示
   ========================================================= */
#screen-ninmu .ninmu-stage-reward-label {
  margin-top: 2px;
  font-size: 8px;
  color: #8b6e3c;
  letter-spacing: .1em;
}
#screen-ninmu .ninmu-daily-rewards {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin-top: -2px;
}
#screen-ninmu .ninmu-daily-reward {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  min-width: 34px;
  height: 30px;
}
#screen-ninmu .ninmu-daily-reward img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(91, 64, 25, .18));
}
#screen-ninmu .ninmu-daily-reward b {
  margin: 0 0 2px -2px;
  color: #826a45;
  font-family: "Cinzel", "Noto Serif JP", serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

/* =========================================================
   111 巡行：デイリーカードを「タイトル／区切り線／報酬画像」に整理
   ========================================================= */
#screen-ninmu .ninmu-stage-copy {
  gap: 6px !important;
}

#screen-ninmu .ninmu-test-btn-title {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.35 !important;
}

#screen-ninmu .ninmu-daily-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  background: linear-gradient(
    90deg,
    rgba(166, 135, 78, .42),
    rgba(166, 135, 78, .13)
  );
}

#screen-ninmu .ninmu-daily-rewards {
  margin-top: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
}

#screen-ninmu .ninmu-daily-reward {
  height: 34px !important;
  align-items: flex-end !important;
}

#screen-ninmu .ninmu-daily-reward img {
  width: 32px !important;
  height: 32px !important;
}



/* =========================================================
   112 巡行：デイリー報酬を素材内の横線より下へ配置
   - CSSで追加していた区切り線は使用しない
   - 特別巡行カードと同じ縦位置に報酬を置く
   ========================================================= */
#screen-ninmu #ninmu-panel-daily .ninmu-daily-divider {
  display: none !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-test-btn {
  position: relative !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-stage-copy {
  position: relative !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 88px !important;
  display: block !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-test-btn-title {
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  width: 100% !important;
  margin: 0 !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-daily-rewards {
  position: absolute !important;
  left: 0 !important;
  top: calc(51px + 5mm) !important;
  margin: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-daily-reward {
  height: 32px !important;
  align-items: center !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-daily-reward img {
  width: 28px !important;
  height: 28px !important;
}

#screen-ninmu #ninmu-panel-daily .ninmu-daily-reward b {
  margin: 0 0 0 -1px !important;
  align-self: center !important;
}

/* =========================================================
   100 Login Bonus / 7日周期
   ========================================================= */
body.login-bonus-open {
  overflow: hidden !important;
}

.login-bonus-modal {
  position: fixed;
  inset: 0;
  z-index: 395000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.login-bonus-modal.show {
  display: flex;
}

.login-bonus-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 12, 0.74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.login-bonus-sheet {
  position: relative;
  width: min(402px, calc(100vw - 28px));
  max-width: 100%;
  overflow: hidden;
  padding: 25px 16px 18px;
  border: 1px solid rgba(210, 190, 145, 0.45);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(226, 211, 174, 0.16), transparent 34%),
    linear-gradient(165deg, #1b1b1b 0%, #101010 72%, #0b0b0b 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255,255,255,0.025);
  color: #f4eee2;
  font-family: "Noto Serif JP", serif;
  transform: translateY(7px) scale(.985);
  opacity: 0;
  animation: loginBonusIn .28s ease forwards;
}

.login-bonus-sheet::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(210, 190, 145, 0.10);
  border-radius: 10px;
  pointer-events: none;
}

.login-bonus-kicker {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .30em;
  color: #bca875;
}

.login-bonus-sheet h2 {
  position: relative;
  z-index: 1;
  margin: 7px 0 3px;
  text-align: center;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #fffdf8;
}

.login-bonus-sub {
  position: relative;
  z-index: 1;
  margin: 0 0 17px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(235, 225, 205, .55);
}

.login-bonus-days {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.login-bonus-day {
  position: relative;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(214, 197, 158, .15);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: rgba(242, 235, 220, .72);
}

.login-bonus-day:nth-child(7) {
  grid-column: span 2;
}

.login-bonus-day-num {
  font-family: "Cinzel", serif;
  font-size: 8px;
  letter-spacing: .11em;
  color: rgba(224, 210, 178, .48);
}

.login-bonus-day img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.4));
}

.login-bonus-day b {
  font-family: "Cinzel", serif;
  font-size: 12px;
  color: #e8dec9;
}

.login-bonus-day.is-current {
  border-color: rgba(220, 187, 103, .72);
  background: linear-gradient(160deg, rgba(215, 178, 91, .18), rgba(255,255,255,.035));
  box-shadow: 0 0 18px rgba(197, 153, 58, .12), inset 0 0 12px rgba(213, 174, 83, .06);
}

.login-bonus-day.is-special {
  background: linear-gradient(160deg, rgba(200, 164, 79, .16), rgba(72, 57, 28, .11));
}

.login-bonus-day.is-special b {
  color: #f2d88a;
  font-size: 15px;
}

.login-bonus-day.is-claimed {
  opacity: .68;
}

.login-bonus-check {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(220, 190, 112, .92);
  color: #17130b;
  font-size: 11px;
  font-weight: 700;
}

.login-bonus-today {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(213, 194, 151, .14);
  border-bottom: 1px solid rgba(213, 194, 151, .14);
  background: rgba(255,255,255,.025);
}

.login-bonus-today-label {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .17em;
  color: #ad9562;
}

.login-bonus-today img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.login-bonus-today div {
  display: flex;
  flex-direction: column;
  min-width: 58px;
}

.login-bonus-today b {
  font-family: "Cinzel", serif;
  font-size: 21px;
  line-height: 1;
  color: #f4dda0;
}

.login-bonus-today div span {
  margin-top: 3px;
  font-size: 9px;
  color: rgba(239, 230, 208, .6);
}

.login-bonus-claim-btn {
  position: relative;
  z-index: 1;
  display: block;
  width: min(250px, 82%);
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid rgba(222, 193, 121, .56);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(206, 176, 103, .24), rgba(132, 104, 48, .16));
  color: #fff9e9;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  -webkit-tap-highlight-color: transparent;
}

.login-bonus-claim-btn:active:not(:disabled) {
  transform: translateY(1px) scale(.99);
}

.login-bonus-claim-btn:disabled {
  cursor: default;
  opacity: .72;
}

.login-bonus-status {
  position: relative;
  z-index: 1;
  min-height: 16px;
  margin-top: 9px;
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
  color: rgba(232, 219, 187, .72);
}

.login-bonus-sheet.is-received {
  animation: loginBonusReceive .55s ease;
}

@keyframes loginBonusIn {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes loginBonusReceive {
  0%,100% { filter: brightness(1); }
  45% { filter: brightness(1.28); }
}

@media (max-width: 380px) {
  .login-bonus-sheet { padding: 21px 12px 15px; }
  .login-bonus-days { gap: 5px; }
  .login-bonus-day { min-height: 70px; }
  .login-bonus-day img { width: 24px; height: 24px; }
}


/* =========================================================
   Home Bonus Entry / Bonus Screen
   ========================================================= */

#screen-main .bonus-home-entry {
  position: absolute;
  left: 10px;
  right: auto;
  /* お知らせと左右対称の高さに配置 */
  top: var(--home-banner-bottom, calc(env(safe-area-inset-top) + 202px));
  /* お知らせ・神樹と同じボタン外寸 */
  width: clamp(88px, 22vw, 98px);
  height: clamp(88px, 22vw, 98px);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: visible;
  z-index: 25;
  -webkit-tap-highlight-color: transparent;
}

#screen-main .bonus-home-entry-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(68, 51, 24, 0.24));
  transition: transform 0.18s ease, filter 0.18s ease;
}

#screen-main .bonus-home-entry:active .bonus-home-entry-icon {
  transform: scale(0.94);
}

#screen-main .bonus-home-entry-notice {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6324a;
  border: 2px solid rgba(255,255,255,.94);
  box-shadow: 0 0 9px rgba(214,50,74,.72);
  display: none;
}

#screen-main .bonus-home-entry.has-unclaimed .bonus-home-entry-notice {
  display: block;
}

.bonus-screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(220,194,134,.12), transparent 34%),
    linear-gradient(180deg, #16130f 0%, #0d0c0a 100%);
  color: #f5efe2;
}

.bonus-screen-header {
  background: rgba(15,13,10,.97) !important;
  border-bottom: 1px solid rgba(209,178,116,.18);
}

.bonus-back-btn {
  position: relative;
  z-index: 2;
  color: #c8b693;
  font-family: "Noto Serif JP", serif;
}

.bonus-screen-scroll {
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom));
}

.bonus-page-intro {
  text-align: center;
  padding: 4px 8px 18px;
}

.bonus-page-kicker {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .25em;
  color: #b99a60;
  margin-bottom: 5px;
}

.bonus-page-intro h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .12em;
  margin: 0 0 7px;
}

.bonus-page-intro p {
  color: rgba(238,228,209,.58);
  font-size: 10px;
  line-height: 1.75;
}

.bonus-page-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonus-page-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(202,168,98,.28);
  background:
    linear-gradient(145deg, rgba(255,252,244,.075), rgba(184,145,75,.025)),
    rgba(23,20,16,.92);
  box-shadow: 0 16px 38px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 16px 14px 14px;
}

.bonus-page-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,180,112,.08);
  pointer-events: none;
}

.bonus-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.bonus-card-title-wrap small {
  display: block;
  font-family: "Cinzel", serif;
  color: #b89a66;
  font-size: 8px;
  letter-spacing: .18em;
  margin-bottom: 3px;
}

.bonus-card-title-wrap h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .08em;
  font-weight: 600;
}

.bonus-card-state {
  flex-shrink: 0;
  border: 1px solid rgba(202,168,98,.28);
  padding: 5px 8px;
  font-size: 9px;
  letter-spacing: .06em;
  color: #e5c77e;
  background: rgba(196,151,61,.08);
}

.bonus-card-state.is-claimed {
  color: rgba(234,228,215,.6);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}

.bonus-login-days {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
}

.bonus-login-day {
  min-height: 69px;
  border: 1px solid rgba(198,167,104,.17);
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
}

.bonus-login-day.is-current {
  border-color: rgba(226,190,106,.68);
  background: rgba(204,157,64,.10);
  box-shadow: inset 0 0 17px rgba(211,170,79,.07);
}

.bonus-login-day.is-claimed::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 5px;
  color: #dbc27f;
  font-size: 10px;
}

.bonus-login-day.is-special {
  grid-column: span 2;
}

.bonus-login-day span {
  font-family: "Cinzel", serif;
  font-size: 7px;
  color: rgba(236,225,204,.45);
  letter-spacing: .08em;
}

.bonus-login-day img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.bonus-login-day b {
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: #ebd8a4;
}

.bonus-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
}

.bonus-card-note {
  color: rgba(238,228,209,.48);
  font-size: 9px;
  line-height: 1.6;
}

.bonus-card-action {
  min-width: 96px;
  padding: 9px 12px;
  border: 1px solid rgba(210,176,101,.48);
  background: linear-gradient(180deg, rgba(205,165,78,.18), rgba(141,104,43,.10));
  color: #ead49d;
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
}

.bonus-card-action:disabled {
  opacity: .42;
  cursor: default;
}

.bonus-page-loading,
.bonus-page-error {
  padding: 30px 10px;
  text-align: center;
  color: rgba(238,228,209,.55);
  font-size: 11px;
}

@media (max-width: 380px) and (max-height: 700px) {
  #screen-main .bonus-home-entry {
    width: 84px;
    height: 84px;
    left: 8px;
    right: auto;
  }
}


/* =========================================================
   Bonus Screen - Light / Ivory Theme Override
   ========================================================= */

/* 白〜ベージュ基調のボーナス画面 */
#screen-bonus.bonus-screen,
.bonus-screen {
  background:
    radial-gradient(circle at 50% 4%, rgba(220,184,104,.16), transparent 34%),
    linear-gradient(180deg, #fffdf7 0%, #f7f0e3 52%, #efe4d1 100%) !important;
  color: #5f4b2f !important;
}

/* 見出しバーも白基調へ */
#screen-bonus .bonus-screen-header,
.bonus-screen-header {
  position: relative;
  background: rgba(255,253,247,.97) !important;
  border-bottom: 1px solid rgba(177,139,70,.28) !important;
  box-shadow: 0 2px 10px rgba(105,78,37,.06);
}

/* タイトルは左、戻るボタンは右上へ */
#screen-bonus .bonus-screen-header .header-title {
  left: 20px !important;
  right: auto !important;
  color: #8b6728 !important;
  text-shadow: none !important;
}

#screen-bonus .bonus-back-btn,
.bonus-screen-header .bonus-back-btn {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(177,139,70,.30) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
  color: #8a6a36 !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(105,78,37,.07);
}

#screen-bonus .bonus-screen-scroll {
  background: transparent !important;
}

#screen-bonus .bonus-page-kicker {
  color: #b58b3d !important;
}

#screen-bonus .bonus-page-intro h2 {
  color: #705630 !important;
  text-shadow: none !important;
}

#screen-bonus .bonus-page-intro p {
  color: #9b835f !important;
}

/* ログインボーナスカード */
#screen-bonus .bonus-page-card {
  border: 1px solid rgba(183,145,75,.30) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(230,199,132,.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,240,224,.96)) !important;
  box-shadow:
    0 12px 28px rgba(105,78,37,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#screen-bonus .bonus-page-card::before {
  border-color: rgba(183,145,75,.13) !important;
}

#screen-bonus .bonus-card-title-wrap small {
  color: #b58b3d !important;
}

#screen-bonus .bonus-card-title-wrap h3 {
  color: #705630 !important;
  text-shadow: none !important;
}

#screen-bonus .bonus-card-state {
  color: #9a6f1f !important;
  border-color: rgba(183,145,75,.36) !important;
  background: rgba(218,183,108,.12) !important;
}

#screen-bonus .bonus-card-state.is-claimed {
  color: #9b8a6d !important;
  border-color: rgba(154,132,96,.22) !important;
  background: rgba(126,104,70,.05) !important;
}

/* DAY パネル */
#screen-bonus .bonus-login-day {
  border-color: rgba(183,145,75,.22) !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

#screen-bonus .bonus-login-day.is-current {
  border-color: rgba(191,144,48,.62) !important;
  background: linear-gradient(180deg, rgba(250,235,197,.78), rgba(255,251,240,.86)) !important;
  box-shadow: inset 0 0 16px rgba(207,167,76,.10), 0 2px 8px rgba(130,93,28,.05) !important;
}

#screen-bonus .bonus-login-day span {
  color: #9c835d !important;
}

#screen-bonus .bonus-login-day b {
  color: #8c6521 !important;
}

#screen-bonus .bonus-login-day.is-claimed::after {
  color: #b07c20 !important;
}

#screen-bonus .bonus-card-note {
  color: #9b835f !important;
}

#screen-bonus .bonus-card-action {
  border-color: rgba(183,145,75,.42) !important;
  background: linear-gradient(180deg, #fffaf0 0%, #efe0bd 100%) !important;
  color: #8a6423 !important;
  box-shadow: 0 3px 9px rgba(111,80,29,.08), inset 0 1px 0 rgba(255,255,255,.92);
}

#screen-bonus .bonus-card-action:disabled {
  opacity: .58 !important;
  background: linear-gradient(180deg, #faf6ed 0%, #eee5d6 100%) !important;
  color: #9e8f78 !important;
}

#screen-bonus .bonus-page-loading,
#screen-bonus .bonus-page-error {
  color: #9b835f !important;
}

/* =========================================================
   Bonus Screen Header Gap Fix
   ========================================================= */
#screen-bonus .bonus-screen-header {
  position: fixed !important;
  top: var(--header-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
}

@media (min-width: 500px) {
  #screen-bonus .bonus-screen-header {
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    max-width: 430px !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   Notice Modal - Light / Beige / Gold Theme Override
   ========================================================= */
.notice-modal {
  background: rgba(245, 240, 229, 0.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.notice-panel {
  border: 1px solid rgba(183, 145, 70, 0.38) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 180, 103, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(246, 238, 221, 0.98)) !important;
  box-shadow:
    0 18px 48px rgba(112, 83, 35, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  color: #60491f !important;
}

.notice-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(188, 150, 76, 0.16);
  border-radius: 16px;
  pointer-events: none;
}

.notice-close {
  background: rgba(255, 252, 244, 0.96) !important;
  color: #8b6b2f !important;
  border: 1px solid rgba(184, 145, 72, 0.28) !important;
  box-shadow: 0 2px 8px rgba(98, 72, 29, 0.10) !important;
}

.notice-close:active {
  background: #f2e6cb !important;
}

.notice-head img {
  filter: drop-shadow(0 3px 7px rgba(119, 86, 31, 0.20)) !important;
}

.notice-title {
  color: #6f4e14 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.notice-sub {
  color: #b08a46 !important;
}

.notice-list {
  gap: 10px;
}

.notice-item {
  border: 1px solid rgba(185, 148, 77, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(250,246,236,0.96)) !important;
  box-shadow:
    0 4px 14px rgba(104, 78, 35, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.notice-date {
  color: #b08a46 !important;
}

.notice-item-title {
  color: #5d4316 !important;
  font-weight: 700;
}

.notice-body {
  color: #7b6a4f !important;
}

/* =========================================================
   Shinju Full-Image Visibility Patch
   - 成長段階の全身シルエットを見せるため cover -> contain
   - 余白は神樹画面の白/ベージュ背景になじませる
   ========================================================= */
.shinju-visual-wrap {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.98), rgba(248,243,228,0.72) 38%, rgba(242,235,218,0.88) 100%) !important;
}

.shinju-visual {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 画像の下側を覆いすぎないよう、奉納パネルを低くする */
.shinju-content {
  max-height: calc(92px + env(safe-area-inset-bottom)) !important;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
}

.shinju-lore {
  margin-bottom: 8px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

.shinju-items-head {
  margin-top: 6px !important;
}

.shinju-item-list {
  max-height: 54px !important;
}

/* =========================================================
   111 Home Background / Sky Loop
   使用する背景画像
   - chara_bg_sky.webp       : 06:00〜18:59（昼）横ループ
   - chara_bg_sky_night.webp : 19:00〜05:59（夜）横ループ
   - chara_bg_building.webp  : 固定前景
   ========================================================= */

/* 空全体を左から右へ止まらずループ。 */
#screen-main .home-sky-scroll-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  background: #f3efe7;
}

#screen-main .home-sky-scroll-layer.is-night {
  background: #17243d;
}

#screen-main .home-sky-scroll-track {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: max-content;
  display: flex;
  align-items: stretch;
  will-change: transform;
  animation: home-sky-scroll-ltr 380s linear infinite;
}

#screen-main .home-sky-scroll-img {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

#screen-main .home-sky-scroll-img-mirror {
  transform: scaleX(-1);
}

@keyframes home-sky-scroll-ltr {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* 建物・床は固定。透過部分から動く空が見える。 */
#screen-main .home-bg-building {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* キャラ / ホームUIは背景2レイヤーより前面。 */
#screen-main > .home-notice-btn,
#screen-main > .home-event-banner-wrap,
#screen-main > .shinju-home-entry,
#screen-main > .bonus-home-entry,
#screen-main > .friend-home-entry,
#screen-main > .favorite-area {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  #screen-main .home-sky-scroll-track {
    animation: none !important;
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   108 ROGUELITEカード / クリア条件モーダル
   ========================================================= */
.roguelite-entry-card{position:relative!important;padding-right:12px!important;touch-action:pan-y;-webkit-user-select:none;user-select:none;overflow:hidden}
.roguelite-entry-card > :not(.roguelite-card-boss-art){position:relative;z-index:2}
.roguelite-card-boss-art{position:absolute;right:12px;top:0;bottom:0;width:118px;height:100%;display:flex;align-items:stretch;justify-content:center;pointer-events:none;z-index:1;opacity:.15;mix-blend-mode:multiply;filter:grayscale(.06) saturate(.72) brightness(1.02)}
.roguelite-card-boss-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
.roguelite-card-rewards{position:absolute!important;left:calc(14px + 3mm)!important;right:auto!important;top:auto!important;bottom:6px!important;display:flex;gap:3px;align-items:center;z-index:2}
.roguelite-card-reward{width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px}
.roguelite-card-reward img{width:23px;height:23px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(92,70,36,.18))}
.roguelite-longpress-hint{position:absolute!important;left:auto!important;right:12px!important;top:14px!important;bottom:auto!important;font-size:7.5px;font-weight:500;letter-spacing:.06em;color:rgba(104,78,45,.74);white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.68);text-align:right;z-index:2}
.roguelite-entry-card.is-longpressing{filter:brightness(.96);transform:scale(.992)}
.roguelite-condition-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:390000;display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));box-sizing:border-box;overflow:hidden;touch-action:none}
.roguelite-condition-modal.show{display:flex}
.roguelite-condition-backdrop{position:absolute;inset:0;background:rgba(26,18,8,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.roguelite-condition-sheet{position:relative;width:min(420px,calc(100vw - 20px));max-width:100%;max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;padding:22px 17px 18px;border:1px solid rgba(173,139,82,.45);border-radius:12px;background:linear-gradient(165deg,#fffdf7,#f4eddf);box-shadow:0 24px 70px rgba(49,32,12,.35);color:#5d4b35;font-family:"Noto Serif JP",serif;touch-action:pan-y}
.roguelite-condition-sheet::before{content:"";position:absolute;inset:7px;border:1px solid rgba(181,145,82,.18);border-radius:8px;pointer-events:none}
.roguelite-condition-close{position:sticky;float:right;right:0;top:0;margin:-14px -9px -34px 0;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,253,247,.94);color:#8a7559;font-size:27px;line-height:1;z-index:20;box-shadow:0 1px 8px rgba(49,32,12,.14);touch-action:manipulation}
.roguelite-condition-kicker{text-align:center;font-family:"Cinzel",serif;font-size:9px;letter-spacing:.22em;color:#aa8b5e}
.roguelite-condition-sheet h2{text-align:center;margin:6px 28px 2px;font-size:21px;letter-spacing:.12em;font-weight:600}
.roguelite-condition-sub{text-align:center;font-size:10px;color:#a08a6c;letter-spacing:.08em}
.roguelite-condition-main-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:15px 0 12px}
.roguelite-condition-reward{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;border:1px solid rgba(171,136,78,.22);background:rgba(255,255,255,.54);border-radius:8px;font-size:11px}
.roguelite-condition-reward img{width:28px;height:28px;object-fit:contain;flex-shrink:0}.roguelite-condition-reward span{font-size:9px;line-height:1.35}.roguelite-condition-reward b{font-size:10px}
.roguelite-condition-ranks{display:flex;flex-direction:column;border-top:1px solid rgba(160,125,70,.24)}
.roguelite-rank-row{display:grid;grid-template-columns:42px minmax(0,1fr) 76px;gap:8px;align-items:center;padding:10px 3px;border-bottom:1px solid rgba(160,125,70,.18)}
.roguelite-rank-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:"Cinzel",serif;font-size:19px;font-weight:700;border:1px solid rgba(151,117,64,.28);background:rgba(255,255,255,.58)}
.roguelite-rank-row.rank-s .roguelite-rank-badge{color:#8f671e;border-color:rgba(187,139,39,.55);box-shadow:0 0 13px rgba(194,146,42,.18)}
.roguelite-rank-condition{font-size:11px;line-height:1.55}
.roguelite-rank-reward{text-align:right;font-size:9px;line-height:1.55;color:#8a7353}
.roguelite-rank-reward b{display:block;font-family:"Cinzel",serif;font-size:12px;color:#725b3d}
.roguelite-condition-note{margin-top:11px;text-align:center;font-size:9px;color:#9b8668;letter-spacing:.03em}
@media(max-width:380px){.roguelite-condition-modal{align-items:flex-start;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.roguelite-condition-sheet{width:calc(100vw - 16px);max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));padding:19px 13px 15px}.roguelite-condition-main-rewards{grid-template-columns:repeat(2,minmax(0,1fr))}.roguelite-rank-row{grid-template-columns:38px minmax(0,1fr) 68px;gap:5px}.roguelite-rank-condition{font-size:10px}.roguelite-condition-reward{min-width:0;padding:7px}.roguelite-condition-close{margin:-12px -6px -36px 0}}


/* =========================================================
   巡行：テスト入口
   デイリー巡行カードと同じ意匠。カード全体をタップ領域にする。
   個別の「挑戦する」ボタン・TESTバッジ・左画像窓は置かない。
   ========================================================= */
#screen-ninmu #ninmu-panel-daily .ninmu-test-btn-test-entry {
  margin-top: 10px;
}

#screen-ninmu #ninmu-panel-daily .ninmu-test-btn-test-entry .ninmu-stage-copy {
  min-height: 48px;
  justify-content: center;
}

#screen-ninmu #ninmu-panel-daily .ninmu-test-btn-test-entry .ninmu-test-btn-title {
  margin: 0;
}



/* 巡行：各デイリーカードはカード全体をタップ領域にするため、
   右端の「挑戦する」表示は使わない。 */
#screen-ninmu #ninmu-panel-daily .ninmu-stage-action {
  display: none !important;
}


/* 巡行：上級 → テスト間の余白を、前回より約2mm狭める */
#screen-ninmu #ninmu-panel-daily .ninmu-test-btn-test-entry {
  margin-top: 8.5px !important;
}


/* =========================================================
   Login Bonus Modal - Home visible / White Gold Beige Theme
   2026-08-14
   - ホーム背景をぼかさない
   - 白 / 金 / ベージュ基調
   ========================================================= */

/* 背景は見せたまま。blurは完全に使わない */
.login-bonus-backdrop {
  background: rgba(255, 252, 244, .16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* モーダル本体 */
.login-bonus-sheet {
  border: 1px solid rgba(177, 139, 70, .42) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(231, 199, 129, .28), transparent 38%),
    linear-gradient(160deg, rgba(255,255,255,.985) 0%, rgba(252,247,236,.985) 58%, rgba(241,229,207,.985) 100%) !important;
  box-shadow:
    0 18px 48px rgba(92, 68, 33, .20),
    0 2px 8px rgba(92, 68, 33, .08),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  color: #675235 !important;
}

.login-bonus-sheet::before {
  border-color: rgba(177, 139, 70, .18) !important;
}

.login-bonus-kicker {
  color: #b58a3a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.login-bonus-sheet h2 {
  color: #70562e !important;
  text-shadow: none !important;
}

.login-bonus-sub {
  color: #9a815e !important;
}

/* 7日分カード */
.login-bonus-day {
  border-color: rgba(183, 145, 75, .24) !important;
  background: rgba(255,255,255,.64) !important;
  color: #796444 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}

.login-bonus-day-num {
  color: #9d835c !important;
}

.login-bonus-day img {
  filter: drop-shadow(0 3px 7px rgba(132, 99, 40, .13)) !important;
}

.login-bonus-day b {
  color: #8a6527 !important;
}

.login-bonus-day.is-current {
  border-color: rgba(191, 144, 48, .66) !important;
  background:
    linear-gradient(180deg, rgba(252,239,205,.88), rgba(255,252,244,.92)) !important;
  box-shadow:
    0 3px 12px rgba(141, 101, 30, .08),
    inset 0 0 18px rgba(209, 169, 80, .12) !important;
}

.login-bonus-day.is-special {
  background:
    linear-gradient(160deg, rgba(248,227,178,.78), rgba(255,251,240,.92)) !important;
}

.login-bonus-day.is-special b {
  color: #a66f12 !important;
}

.login-bonus-day.is-claimed {
  opacity: .66;
}

.login-bonus-check {
  background: linear-gradient(180deg, #ddbb69, #bd8730) !important;
  color: #fffdf7 !important;
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 2px 7px rgba(125, 84, 21, .18);
}

/* TODAYエリア */
.login-bonus-today {
  border-top-color: rgba(183,145,75,.22) !important;
  border-bottom-color: rgba(183,145,75,.22) !important;
  background:
    linear-gradient(90deg, transparent, rgba(222,190,121,.12), transparent) !important;
}

.login-bonus-today-label {
  color: #aa7c2c !important;
}

.login-bonus-today b {
  color: #9a6b1e !important;
  text-shadow: 0 1px 0 #fff;
}

.login-bonus-today div span {
  color: #9c8767 !important;
}

/* 受け取るボタン */
.login-bonus-claim-btn {
  border-color: rgba(179, 137, 61, .52) !important;
  background:
    linear-gradient(180deg, #fffdf7 0%, #f6e8c6 55%, #ead5a6 100%) !important;
  color: #806022 !important;
  box-shadow:
    0 5px 14px rgba(112, 79, 27, .11),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.login-bonus-claim-btn:active:not(:disabled) {
  background:
    linear-gradient(180deg, #f7ead0 0%, #ead6a9 100%) !important;
}

.login-bonus-claim-btn:disabled {
  color: #9a896d !important;
  background: linear-gradient(180deg, #faf6ed, #eee5d6) !important;
}

.login-bonus-status {
  color: #8f754f !important;
}

/* 受取完了時も暗色化せず、金色の一瞬の輝きだけにする */
@keyframes loginBonusReceive {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 18px 48px rgba(92, 68, 33, .20),
      0 2px 8px rgba(92, 68, 33, .08),
      inset 0 1px 0 rgba(255,255,255,.98);
  }
  45% {
    filter: brightness(1.06);
    box-shadow:
      0 18px 52px rgba(160, 117, 39, .24),
      0 0 28px rgba(222, 184, 94, .30),
      inset 0 0 24px rgba(255, 237, 183, .34);
  }
}

/* =========================================================
   111 Primoa detail pull-up sheet
   - 詳細ウインドウを上へ引くとキャラ画像が縮小
   - 指を離すと通常 / 展開の2段階へスナップ
   - レムナントには適用しない
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view {
  --primoa-sheet-progress: 0;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual {
  transform-origin: 50% 100%;
  will-change: width, max-width;
}

/* レアリティバッジもキャラ画像と同じ進捗で縮小する。
   width を直接縮め、right/bottom を固定して画像右下へ張り付かせる。 */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge {
  transform: none;
  transform-origin: 100% 100%;
  right: 2px;
  bottom: 2px;
  will-change: width, right, bottom;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-animating .box-carousel-visual,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-animating .box-carousel-rarity-badge,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-animating .box-carousel-name,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-animating .box-carousel-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-animating .box-carousel-detail-scroll {
  transition:
    width .32s cubic-bezier(.22,.78,.24,1),
    max-width .32s cubic-bezier(.22,.78,.24,1),
    transform .32s cubic-bezier(.22,.78,.24,1),
    margin .32s cubic-bezier(.22,.78,.24,1),
    padding .32s cubic-bezier(.22,.78,.24,1),
    flex-basis .32s cubic-bezier(.22,.78,.24,1);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-dragging .box-carousel-visual,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-dragging .box-carousel-rarity-badge,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-dragging .box-carousel-name,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-dragging .box-carousel-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-dragging .box-carousel-detail-scroll {
  transition: none !important;
}

/* 情報ウインドウ上端の「掴める」サイン */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-sheet-handle {
  position: sticky;
  top: 0;
  z-index: 12;
  width: min(100%, 340px);
  height: 18px;
  margin: -2px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(to bottom, rgba(250,247,239,.92), rgba(250,247,239,.54), transparent);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-sheet-handle span {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(137, 111, 70, .34);
  box-shadow: 0 1px 0 rgba(255,255,255,.78), 0 2px 6px rgba(92,68,35,.08);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail-scroll {
  overscroll-behavior-y: contain;
}

/* 展開後は名前周辺を少しだけ圧縮し、情報領域をさらに確保 */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-expanded .box-carousel-name {
  margin-top: 2px !important;
  margin-bottom: 4px !important;
  font-size: 14px;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-expanded .box-carousel-fixed {
  padding-bottom: 4px !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.is-sheet-expanded .box-carousel-detail-scroll {
  padding-top: 4px !important;
}

/* 小さい端末では展開時の画像をさらに少しコンパクトに見せる */
@media (max-height: 700px) {
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-sheet-handle {
    height: 16px;
  }
}


/* =========================================================
   STORY CHAPTER PROGRESSION / 4-stage chapter
   ========================================================= */
#stage-select-modal .ss-story-clear {
  font-family: "Cinzel", serif;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(145, 118, 63, .72);
  vertical-align: middle;
}
#stage-select-modal .ss-card.story-cleared::after {
  content: '✓';
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cinzel", serif;
  font-size: 11px;
  color: rgba(145, 118, 63, .52);
  pointer-events: none;
}

/* ============================================================
   PARTY SELECT — WHITE / GOLD / BEIGE THEME
   ============================================================ */
#party-select-modal {
  background:
    radial-gradient(circle at 50% -12%, rgba(205,174,108,.18), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #f8f1e5 52%, #efe3d0 100%) !important;
  color: #4a4034 !important;
}
#party-select-modal .ps-header {
  background: rgba(255,253,248,.94) !important;
  border-bottom: 1px solid rgba(176,139,71,.28) !important;
  box-shadow: 0 5px 18px rgba(112,88,45,.06) !important;
}
#party-select-modal .ps-title {
  color: #806633 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9) !important;
}
#party-select-modal .ps-sub {
  color: rgba(94,75,48,.58) !important;
}
#party-select-modal .ps-slots-wrap {
  background: rgba(247,239,225,.76) !important;
  border-bottom: 1px solid rgba(176,139,71,.22) !important;
}
#party-select-modal .ps-slot-box,
#party-select-modal .ps-chara-img-wrap {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(165,129,63,.24) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 3px 12px rgba(102,78,36,.06) !important;
}
#party-select-modal .ps-slot.filled .ps-slot-box,
#party-select-modal .ps-chara-card.selected .ps-chara-img-wrap {
  border-color: rgba(177,136,55,.82) !important;
  box-shadow: 0 0 0 2px rgba(218,183,112,.20), 0 5px 16px rgba(119,88,29,.14) !important;
}
#party-select-modal .ps-slot-empty-label {
  color: rgba(131,103,61,.42) !important;
}
#party-select-modal .ps-slot-empty-plus {
  color: #b38d48 !important;
}
#party-select-modal .ps-slot-chara-name {
  color: #fffdf8 !important;
  background: linear-gradient(to top, rgba(86,63,30,.82), rgba(86,63,30,.32), transparent) !important;
  text-shadow: 0 1px 2px rgba(45,31,15,.6) !important;
}
#party-select-modal .ps-slot-remove {
  background: rgba(255,252,245,.92) !important;
  color: #9d7440 !important;
  border: 1px solid rgba(157,116,64,.3) !important;
}
#party-select-modal .ps-list-wrap {
  background: transparent !important;
}
#party-select-modal .ps-chara-name {
  color: rgba(76,60,39,.76) !important;
}
#party-select-modal .ps-chara-check {
  background: rgba(191,153,75,.24) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(81,56,18,.55) !important;
}
#party-select-modal .ps-footer {
  background: rgba(255,252,246,.95) !important;
  border-top: 1px solid rgba(176,139,71,.26) !important;
  box-shadow: 0 -7px 20px rgba(99,73,31,.06) !important;
}
#party-select-modal .ps-btn-cancel {
  border-color: rgba(151,119,66,.30) !important;
  background: #f7efe2 !important;
  color: #806c4f !important;
}
#party-select-modal .ps-btn-cancel:active {
  background: #eee0cc !important;
}
#party-select-modal .ps-btn-start {
  border-color: rgba(161,121,48,.68) !important;
  background: linear-gradient(180deg, #cfaa61 0%, #b7893e 100%) !important;
  color: #fffdf7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 4px 12px rgba(145,102,32,.18) !important;
  text-shadow: 0 1px 2px rgba(93,62,16,.45) !important;
}
#party-select-modal .ps-btn-start:disabled {
  opacity: .38 !important;
  background: linear-gradient(180deg, #d9c9ac 0%, #c8b696 100%) !important;
}
#party-select-modal .ps-btn-start:not(:disabled):active {
  background: linear-gradient(180deg, #bf974e 0%, #a77b35 100%) !important;
}

/* character detail sheet */
.ps-detail-popup {
  background: rgba(74,59,39,.34) !important;
  backdrop-filter: blur(5px) !important;
}
.ps-detail-box {
  background: linear-gradient(180deg, #fffdf9 0%, #f7efe3 100%) !important;
  color: #4e4234 !important;
  border-top: 1px solid rgba(177,137,68,.34) !important;
  box-shadow: 0 -12px 34px rgba(73,52,21,.16) !important;
}
.ps-detail-hero {
  border-bottom-color: rgba(167,128,62,.22) !important;
}
.ps-detail-img {
  border: 1px solid rgba(173,134,67,.32) !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(97,73,36,.10) !important;
}
.ps-detail-name,
.ps-detail-stat-val,
.ps-detail-skill-name,
.ps-detail-move-name {
  color: #57452d !important;
}
.ps-detail-stat-label,
.ps-detail-skill-desc,
.ps-detail-move-desc,
.ps-detail-move-meta {
  color: rgba(88,70,47,.68) !important;
}
.ps-detail-stats,
.ps-detail-skill,
.ps-detail-move-card {
  background: rgba(255,255,255,.64) !important;
  border-color: rgba(168,130,66,.20) !important;
}
.ps-detail-skills-title,
.ps-detail-move-title {
  color: #9a783f !important;
  border-color: rgba(170,132,66,.24) !important;
}
.ps-detail-close {
  background: #f2e7d5 !important;
  color: #806a48 !important;
  border-color: rgba(151,119,66,.28) !important;
}
.ps-detail-close:active {
  background: #e8d8bf !important;
}


/* ============================================================
   Primoa carousel image size normalization
   初回/キャラ切替後で画像サイズが変わらないようにする。
   ============================================================ */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual-row .box-carousel-visual {
  flex: 0 0 auto;
  width: 216px;
  max-width: 216px;
  aspect-ratio: 1 / 1;
}

@media (max-width: 330px) {
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual-row .box-carousel-visual {
    width: 200px;
    max-width: 200px;
  }
}


/* =========================================================
   ROGUELITE CLOSED / SHOOTING ONLY
   ========================================================= */
.roguelite-disabled-entry {
  position: relative;
  cursor: default !important;
  filter: grayscale(.72) brightness(.68);
  opacity: .72;
}
.roguelite-disabled-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4,4,7,.18);
  pointer-events: none;
}
.roguelite-disabled-entry .roguelite-card-rewards {
  opacity: .28;
}
.roguelite-disabled-entry .roguelite-longpress-hint {
  display: none !important;
}
.roguelite-disabled-badge {
  position: relative;
  z-index: 4;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(235,230,240,.68);
}


/* =========================================================
   TEST PLAY — TITLE後 強制お知らせ
   ========================================================= */
.testplay-notice {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    22px
    max(24px, env(safe-area-inset-bottom));
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.testplay-notice.active {
  display: flex;
}

.testplay-notice-panel {
  width: min(100%, 360px);
  padding: 30px 24px 22px;
  border: 1px solid rgba(190, 158, 91, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 181, 118, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(250, 247, 239, 0.98), rgba(237, 230, 214, 0.98));
  color: #2a251d;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255,255,255,0.68);
  text-align: center;
}

.testplay-notice-kicker {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: .32em;
  color: rgba(139, 104, 45, 0.62);
  margin-bottom: 10px;
}

.testplay-notice-title {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #54411f;
}

.testplay-notice-text {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(42, 37, 29, 0.78);
}

.testplay-notice-btn {
  width: 100%;
  margin-top: 24px;
  min-height: 46px;
  border: 1px solid rgba(158, 121, 57, 0.52);
  background: rgba(255,255,255,0.58);
  color: #604c28;
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  letter-spacing: .18em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.testplay-notice-btn:active {
  transform: translateY(1px);
  background: rgba(228, 214, 180, 0.68);
}

.testplay-notice-btn:focus,
.testplay-guide-close:focus {
  outline: none;
}

@media (max-height: 680px) {
  .testplay-notice-panel {
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .testplay-notice-title {
    font-size: 20px;
  }

  .testplay-notice-text {
    margin-top: 14px;
    line-height: 1.7;
  }

  .testplay-notice-btn {
    margin-top: 18px;
  }
}


/* =========================================================
   TEST PLAY NOTICE — 2択ボタン上品化
   ========================================================= */
.testplay-notice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.testplay-notice-actions .testplay-notice-btn {
  width: 100%;
  margin-top: 0 !important;
  min-height: 42px;
  padding: 10px 8px;
  border-radius: 2px;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: none;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease;
}

/* 「わかりました」：控えめ */
.testplay-notice-btn-subtle {
  border: 1px solid rgba(155, 124, 66, 0.38);
  background: rgba(206, 184, 134, 0.12);
  color: rgba(100, 76, 36, 0.88);
}

/* 「協力します」：少しだけ金を効かせるが、主張しすぎない */
.testplay-notice-btn-accent {
  border: 1px solid rgba(155, 124, 66, 0.38);
  background: rgba(206, 184, 134, 0.12);
  color: rgba(100, 76, 36, 0.88);
}

.testplay-notice-actions .testplay-notice-btn:active {
  transform: translateY(1px);
}

.testplay-notice-btn-subtle:active {
  background: rgba(206, 184, 134, 0.22);
}

.testplay-notice-btn-accent:active {
  background: rgba(206, 184, 134, 0.22);
}

@media (max-width: 340px) {
  .testplay-notice-actions {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   TEST PLAY GUIDE — 1段目回答後の遊び方案内
   ========================================================= */
.testplay-guide {
  position: fixed;
  inset: 0;
  z-index: 361;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(24px, env(safe-area-inset-bottom));
  background: rgba(8, 8, 10, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.testplay-guide.active {
  display: flex;
}

.testplay-guide-panel {
  width: min(100%, 390px);
  max-height: min(82dvh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px 22px;
  box-sizing: border-box;
  border: 1px solid rgba(190, 158, 91, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 181, 118, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(250, 247, 239, 0.985), rgba(238, 231, 216, 0.985));
  color: #2a251d;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255,255,255,0.62);
}

.testplay-guide-title {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #55421f;
}

.testplay-guide-lead {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(42,37,29,.70);
}

.testplay-guide-text {
  margin-top: 22px;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .02em;
  color: rgba(42,37,29,.84);
}

.testplay-guide-note {
  color: rgba(116, 84, 35, .78);
}

.testplay-guide-skip {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 22px;
  font-size: 12px;
  color: rgba(42,37,29,.65);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.testplay-guide-skip input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #9a7b43;
}

.testplay-guide-close {
  width: 100%;
  min-height: 42px;
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px solid rgba(155,124,66,.34);
  border-radius: 2px;
  background: rgba(206,184,134,.10);
  color: rgba(95,72,34,.88);
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.testplay-guide-close:active {
  transform: translateY(1px);
  background: rgba(206,184,134,.20);
}

@media (max-height: 680px) {
  .testplay-guide-panel {
    max-height: calc(100dvh - 36px);
    padding-top: 22px;
    padding-bottom: 18px;
  }

  .testplay-guide-text {
    margin-top: 16px;
    line-height: 1.75;
  }

  .testplay-guide-skip {
    margin-top: 16px;
  }

  .testplay-guide-close {
    margin-top: 16px;
  }
}


/* =========================================================
   2026-08-16
   巡行 / 設定 スクロール修正
   iOS Safari / PWA の fixed body + flex/grid 内スクロール対策
   ========================================================= */

/* 画面自身は固定高。スクロールは必ず内部コンテナへ委譲する。 */
#screen-ninmu.active,
#screen-setting.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* 巡行：
   旧 .ninmu-layout の height:100% が残っていると、
   ヘッダー分を含めて100%を確保してしまい、
   右カラムのスクロール領域が正しく縮まらない端末がある。
   flex:1 + height:0 で「残り高さ」に確実に拘束する。 */
#screen-ninmu .ninmu-layout {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#screen-ninmu .ninmu-right {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  pointer-events: auto !important;
  scrollbar-width: thin;
}

/* 左カテゴリも画面高が足りない時だけ縦スクロール可能にする。 */
#screen-ninmu .ninmu-left {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 設定：
   flex子のスクロール領域を height:0 にすることで、
   body/html が position:fixed でも確実に内部スクロールさせる。 */
#screen-setting .screen-scroll {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  pointer-events: auto !important;
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

/* iOSでスクロール開始時に子要素のタップ判定へ吸われにくくする */
#screen-ninmu .ninmu-right *,
#screen-setting .screen-scroll * {
  touch-action: pan-y manipulation;
}


/* =========================================================
   SHOOTING専用 プリモア詳細 / 共鳴
   ========================================================= */
.detail-shooting-section {
  margin-top: 12px;
}

.detail-shooting-card {
  padding: 12px 13px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
}

.detail-shooting-card.detail-shooting-ult {
  border-color: rgba(218,190,118,0.24);
  background:
    linear-gradient(135deg, rgba(218,190,118,0.07), rgba(255,255,255,0.025));
}

.detail-shooting-name {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.94);
}

.detail-shooting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.detail-shooting-grid .detail-status-row {
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.detail-shooting-grid .detail-status-row:last-child {
  border-bottom: 0;
}

.detail-shooting-desc {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255,255,255,.64);
}

.detail-shooting-ult-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.detail-shooting-ult-head strong {
  font-size: 14px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(255,255,255,.95);
}

.detail-shooting-resonance .lb-bonus-box {
  margin-top: 0;
}

.detail-shooting-resonance .lb-bonus-box-title {
  letter-spacing: .16em;
}

/* Strategy用の移動盤面/コンボ情報は新しいプリモア詳細では使用しない。 */
#detail-modal .detail-move-preview-row,
#detail-modal .detail-combo-section {
  display: none;
}


/* =========================================================
   Primoa Shooting Detail Panel Opaque Readability Fix
   - 情報パネルが透けすぎて見えない問題を修正
   - ベージュ / 白 / 金ベースで統一
   ========================================================= */
#screen-zukan.is-primoa-mode .box-carousel-detail,
#screen-zukan.is-primoa-mode .box-carousel-detail-scroll,
#screen-zukan.is-primoa-mode #detail-modal .modal,
#detail-modal .modal {
  color: #5f4b35 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-section,
#detail-modal .detail-shooting-section {
  margin-top: 14px;
}

#screen-zukan.is-primoa-mode .detail-shooting-card,
#detail-modal .detail-shooting-card {
  background:
    linear-gradient(180deg,
      rgba(250, 246, 238, 0.985) 0%,
      rgba(244, 237, 226, 0.975) 100%) !important;
  border: 1px solid rgba(188, 160, 112, 0.34) !important;
  box-shadow:
    0 10px 22px rgba(117, 92, 54, 0.10),
    0 0 0 1px rgba(255,255,255,0.70) inset !important;
  border-radius: 12px !important;
  color: #5f4b35 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-card.detail-shooting-ult,
#detail-modal .detail-shooting-card.detail-shooting-ult {
  background:
    linear-gradient(180deg,
      rgba(253, 250, 244, 0.99) 0%,
      rgba(245, 237, 223, 0.98) 100%) !important;
  border-color: rgba(202, 170, 113, 0.46) !important;
  box-shadow:
    0 12px 24px rgba(117, 92, 54, 0.12),
    0 0 0 1px rgba(255,255,255,0.72) inset,
    0 0 0 1px rgba(215, 188, 138, 0.18) !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-name,
#screen-zukan.is-primoa-mode .detail-shooting-ult-head strong,
#detail-modal .detail-shooting-name,
#detail-modal .detail-shooting-ult-head strong {
  color: #5a4530 !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-desc,
#detail-modal .detail-shooting-desc {
  color: rgba(95, 75, 53, 0.82) !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-grid .detail-status-row,
#detail-modal .detail-shooting-grid .detail-status-row {
  border-bottom: 1px solid rgba(188, 160, 112, 0.18) !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-grid .detail-status-row:last-child,
#detail-modal .detail-shooting-grid .detail-status-row:last-child {
  border-bottom: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-skill-badge,
#detail-modal .detail-skill-badge {
  background: linear-gradient(180deg, rgba(214, 189, 145, 0.24), rgba(229, 212, 181, 0.16)) !important;
  border-color: rgba(181, 147, 93, 0.30) !important;
  color: #7a6040 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-box,
#detail-modal .detail-shooting-resonance .lb-bonus-box,
#screen-zukan.is-primoa-mode .detail-lb-section,
#detail-modal .detail-lb-section {
  background:
    linear-gradient(180deg,
      rgba(249, 245, 237, 0.985) 0%,
      rgba(242, 235, 223, 0.975) 100%) !important;
  border-color: rgba(188, 160, 112, 0.30) !important;
  box-shadow:
    0 10px 22px rgba(117, 92, 54, 0.09),
    0 0 0 1px rgba(255,255,255,0.68) inset !important;
}

#screen-zukan.is-primoa-mode .detail-section-title,
#screen-zukan.is-primoa-mode .detail-status-label,
#screen-zukan.is-primoa-mode .detail-lb-label,
#screen-zukan.is-primoa-mode .detail-lb-info,
#screen-zukan.is-primoa-mode .lb-bonus-box-title,
#screen-zukan.is-primoa-mode .lb-next-bonus-label,
#detail-modal .detail-section-title,
#detail-modal .detail-status-label,
#detail-modal .detail-lb-label,
#detail-modal .detail-lb-info,
#detail-modal .lb-bonus-box-title,
#detail-modal .lb-next-bonus-label {
  color: rgba(114, 88, 55, 0.82) !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-status-val,
#screen-zukan.is-primoa-mode .detail-lb-title,
#screen-zukan.is-primoa-mode .detail-lb-val,
#screen-zukan.is-primoa-mode .lb-bonus-box,
#detail-modal .detail-status-val,
#detail-modal .detail-lb-title,
#detail-modal .detail-lb-val,
#detail-modal .lb-bonus-box {
  color: #5a4530 !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-lb-ready-badge,
#detail-modal .detail-lb-ready-badge {
  background: rgba(201, 170, 113, 0.16) !important;
  color: #8b6840 !important;
  border-color: rgba(188, 160, 112, 0.32) !important;
}


/* =========================================================
   Primoa Shooting Detail Readability Rework v2
   - 項目ごとの箱をやめ、見出しと文字コントラストで整理
   - 共鳴項目の可読性を全面改善
   ========================================================= */
#screen-zukan.is-primoa-mode .box-carousel-detail-scroll,
#detail-modal .box-carousel-detail-scroll {
  padding: 14px 12px calc(74px + env(safe-area-inset-bottom)) !important;
}

#screen-zukan.is-primoa-mode .box-carousel-detail,
#detail-modal .box-carousel-detail {
  width: min(100%, 352px) !important;
  padding: 16px 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(252,249,243,0.96), rgba(245,238,227,0.96)) !important;
  border: 1px solid rgba(197,170,122,0.28) !important;
  box-shadow: 0 14px 30px rgba(110,88,56,0.10), 0 0 0 1px rgba(255,255,255,0.72) inset !important;
  color: #58452f !important;
}

#screen-zukan.is-primoa-mode .detail-lb-section,
#screen-zukan.is-primoa-mode .detail-shooting-card,
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-box,
#detail-modal .detail-lb-section,
#detail-modal .detail-shooting-card,
#detail-modal .detail-shooting-resonance .lb-bonus-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-section,
#screen-zukan.is-primoa-mode .detail-shooting-resonance,
#screen-zukan.is-primoa-mode .detail-lb-section,
#detail-modal .detail-shooting-section,
#detail-modal .detail-shooting-resonance,
#detail-modal .detail-lb-section {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-section-title,
#detail-modal .detail-section-title {
  display: block !important;
  margin: 0 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(190,161,114,0.32) !important;
  color: #8a6841 !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-lb-row,
#screen-zukan.is-primoa-mode .detail-shooting-grid .detail-status-row,
#detail-modal .detail-lb-row,
#detail-modal .detail-shooting-grid .detail-status-row {
  padding: 8px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(190,161,114,0.16) !important;
}

#screen-zukan.is-primoa-mode .detail-lb-row:last-child,
#screen-zukan.is-primoa-mode .detail-shooting-grid .detail-status-row:last-child,
#detail-modal .detail-lb-row:last-child,
#detail-modal .detail-shooting-grid .detail-status-row:last-child {
  border-bottom: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-lb-label,
#screen-zukan.is-primoa-mode .detail-status-label,
#screen-zukan.is-primoa-mode .detail-lb-info,
#screen-zukan.is-primoa-mode .lb-bonus-box-title,
#detail-modal .detail-lb-label,
#detail-modal .detail-status-label,
#detail-modal .detail-lb-info,
#detail-modal .lb-bonus-box-title {
  color: #8a6841 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-status-val,
#screen-zukan.is-primoa-mode .detail-lb-title,
#screen-zukan.is-primoa-mode .detail-lb-val,
#screen-zukan.is-primoa-mode .detail-shooting-name,
#screen-zukan.is-primoa-mode .detail-shooting-ult-head strong,
#detail-modal .detail-status-val,
#detail-modal .detail-lb-title,
#detail-modal .detail-lb-val,
#detail-modal .detail-shooting-name,
#detail-modal .detail-shooting-ult-head strong {
  color: #4f3b28 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

#screen-zukan.is-primoa-mode .detail-lb-val,
#detail-modal .detail-lb-val {
  color: #8c6b42 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-desc,
#screen-zukan.is-primoa-mode .detail-type-row,
#screen-zukan.is-primoa-mode .detail-type-val,
#detail-modal .detail-shooting-desc,
#detail-modal .detail-type-row,
#detail-modal .detail-type-val {
  color: rgba(89, 69, 46, 0.88) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}

#screen-zukan.is-primoa-mode .detail-skill-badge,
#detail-modal .detail-skill-badge {
  background: rgba(201,170,113,0.14) !important;
  border: 1px solid rgba(190,161,114,0.34) !important;
  color: #8a6841 !important;
}

/* 共鳴一覧を完全に見やすくする */
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-box-title,
#detail-modal .detail-shooting-resonance .lb-bonus-box-title {
  margin: 0 0 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(190,161,114,0.32) !important;
  font-size: 13px !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  letter-spacing: .16em !important;
  color: #8a6841 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row,
#detail-modal .detail-shooting-resonance .lb-bonus-row {
  display: grid !important;
  grid-template-columns: 46px 1fr auto !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(190,161,114,0.14) !important;
  background: transparent !important;
  opacity: 1 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row:first-of-type,
#detail-modal .detail-shooting-resonance .lb-bonus-row:first-of-type {
  border-top: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.next,
#detail-modal .detail-shooting-resonance .lb-bonus-row.next {
  padding-left: 8px !important;
  border-left: 3px solid rgba(201,170,113,0.56) !important;
  background: rgba(201,170,113,0.07) !important;
  border-radius: 0 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.locked,
#detail-modal .detail-shooting-resonance .lb-bonus-row.locked {
  opacity: 1 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-level,
#detail-modal .detail-shooting-resonance .lb-bonus-level {
  color: #a07a49 !important;
  font-family: "Cinzel", serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-title,
#detail-modal .detail-shooting-resonance .lb-bonus-title {
  color: #4f3b28 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-summary,
#detail-modal .detail-shooting-resonance .lb-bonus-summary {
  color: rgba(89, 69, 46, 0.86) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-state,
#detail-modal .detail-shooting-resonance .lb-bonus-state {
  color: #8a6841 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.unlocked .lb-bonus-level,
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.unlocked .lb-bonus-state,
#detail-modal .detail-shooting-resonance .lb-bonus-row.unlocked .lb-bonus-level,
#detail-modal .detail-shooting-resonance .lb-bonus-row.unlocked .lb-bonus-state {
  color: #7b633c !important;
}

#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-level,
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-title,
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-summary,
#screen-zukan.is-primoa-mode .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-state,
#detail-modal .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-level,
#detail-modal .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-title,
#detail-modal .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-summary,
#detail-modal .detail-shooting-resonance .lb-bonus-row.locked .lb-bonus-state {
  color: rgba(110, 92, 68, 0.72) !important;
}


/* =========================================================
   Primoa quick resonance button + mobile viewport clipping fix
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 8px;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 220px);
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid rgba(174, 138, 66, 0.58);
  background: linear-gradient(180deg, rgba(252,248,232,0.98), rgba(232,215,166,0.98));
  color: #6e5320;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 14px rgba(131, 104, 50, 0.12), inset 0 1px 0 rgba(255,255,255,0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn:active {
  transform: scale(0.985);
  filter: brightness(0.97);
}

@media (max-width: 499px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .global-user-frame,
  .bottom-nav,
  #splash,
  #title-screen,
  #loading,
  #story-root,
  .screen,
  .screen-scroll {
    width: 100% !important;
    max-width: 100vw !important;
  }

  #screen-zukan,
  #screen-zukan .screen-scroll,
  #box-grid.box-carousel,
  #box-grid.box-carousel .box-carousel-view,
  #box-grid.box-carousel .box-carousel-fixed,
  #box-grid.box-carousel .box-carousel-detail-scroll,
  #box-grid.box-carousel .box-carousel-detail,
  #box-grid.box-carousel .box-carousel-visual-row {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}


/* Primoa fixed action layout cleanup */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 10px;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  width: min(100%, 270px);
  min-height: 48px;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(174, 138, 66, 0.58);
  background: linear-gradient(180deg, rgba(252,248,232,0.98), rgba(232,215,166,0.98));
  color: #6e5320;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 14px rgba(131, 104, 50, 0.12), inset 0 1px 0 rgba(255,255,255,0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn.is-disabled {
  background: linear-gradient(180deg, rgba(250, 225, 232, 0.95), rgba(242, 183, 196, 0.92));
  color: #8b4c5d;
  border-color: rgba(214, 145, 165, 0.62);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn.is-max {
  background: linear-gradient(180deg, rgba(243,243,243,0.98), rgba(225,225,225,0.95));
  color: #7a7467;
  border-color: rgba(172,168,157,0.58);
  cursor: default;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-in-detail {
  display: none !important;
}

/* =========================================================
   Primoa fixed action refinement: vertical + elegant
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0 12px;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 270px);
  min-height: 48px;
  margin: 0;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    0 6px 16px rgba(143, 116, 64, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed:active,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn:active {
  transform: scale(0.985);
  filter: brightness(0.985);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed {
  border: 1px solid rgba(178, 140, 58, 0.56);
  background: linear-gradient(180deg, rgba(250, 244, 223, 0.98), rgba(233, 214, 159, 0.98));
  color: #6a5120;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  border: 1px solid rgba(186, 154, 93, 0.48);
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(243, 235, 214, 0.98));
  color: #705838;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn.is-ready {
  border-color: rgba(178, 140, 58, 0.56);
  background: linear-gradient(180deg, rgba(250, 244, 223, 0.98), rgba(233, 214, 159, 0.98));
  color: #6a5120;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn.is-disabled {
  border-color: rgba(202, 170, 138, 0.42);
  background: linear-gradient(180deg, rgba(250, 243, 238, 0.97), rgba(239, 225, 214, 0.96));
  color: #8c705d;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn.is-max {
  border-color: rgba(179, 170, 150, 0.44);
  background: linear-gradient(180deg, rgba(246, 244, 240, 0.98), rgba(230, 226, 218, 0.96));
  color: #7c7569;
  cursor: default;
}


/* =========================================================
   Primoa fixed area + detail scroll layout fix
   - legacy 100px grid padding removed in index.html
   - default area: image -> name -> home -> 強化 -> separator
   - always reserve a usable information scroll viewport
   ========================================================= */
#screen-zukan.is-primoa-mode #box-grid.box-carousel {
  padding-bottom: 0 !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view {
  min-height: 0 !important;
  overflow: hidden !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail-scroll {
  flex: 1 1 112px !important;
  min-height: 92px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-top: 4px !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail {
  min-height: 100% !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
  gap: 9px !important;
  padding: 6px 0 9px !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  min-height: 42px !important;
  width: min(100%, 270px) !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* The old normalization forced 216px even on short devices.
   Override it here so the detail area never collapses. */
@media (max-height: 800px) {
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual-row .box-carousel-visual {
    width: 188px !important;
    max-width: 188px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-name {
    margin: 3px 0 5px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
    gap: 7px !important;
    padding: 5px 0 7px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-height: 720px) {
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual-row .box-carousel-visual {
    width: 168px !important;
    max-width: 168px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-limitbreak-jump {
    margin-top: 1px !important;
    margin-bottom: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
    gap: 6px !important;
    padding: 4px 0 6px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
    min-height: 38px !important;
    font-size: 12px !important;
  }

  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail-scroll {
    min-height: 96px !important;
  }
}


/* =========================================================
   Primoa actions v315
   - list: [レベルアップ][限界突破] horizontally
   - home setting moved to fullscreen character image viewer
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: min(100%, 304px) !important;
  margin: 0 auto !important;
  padding: 8px 0 10px !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-home-btn-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-quick-lb-btn {
  display: none !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 9px 8px;
  border-radius: 9px;
  border: 1px solid rgba(185, 153, 94, 0.48);
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.99), rgba(240, 229, 201, 0.98));
  color: #6c5228;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .06em;
  text-align: center;
  box-shadow:
    0 4px 10px rgba(122, 94, 48, .08),
    inset 0 1px 0 rgba(255,255,255,.92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn:active {
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow:
    0 2px 6px rgba(122, 94, 48, .08),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-levelup-btn {
  background: linear-gradient(180deg, rgba(253,250,242,.99), rgba(244,237,221,.98));
  color: #79664c;
  border-color: rgba(190,170,135,.44);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-limitbreak-btn.is-ready {
  background: linear-gradient(180deg, rgba(250,243,220,.99), rgba(230,207,148,.98));
  color: #684b17;
  border-color: rgba(177,137,57,.58);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-limitbreak-btn.is-disabled {
  background: linear-gradient(180deg, rgba(250,247,240,.98), rgba(237,230,215,.97));
  color: #88765f;
  border-color: rgba(190,170,140,.38);
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-limitbreak-btn.is-max {
  background: linear-gradient(180deg, rgba(245,243,238,.98), rgba(229,225,217,.97));
  color: #817a6d;
  border-color: rgba(176,170,159,.40);
  cursor: default;
}

.primor-fullscreen-home-btn {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 14px;
  min-width: min(78vw, 250px);
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(216, 189, 127, .62);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,252,241,.96), rgba(231,211,163,.94));
  color: #5f461a;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow:
    0 8px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.88);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.primor-fullscreen-home-btn:active {
  transform: translateY(1px);
  filter: brightness(.98);
}

/* Viewerにボタンを追加した分、画像の最大高を少しだけ抑えて安全に収める。 */
.primor-fullscreen-img {
  max-height: calc(100dvh - 178px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}


/* =========================================================
   Primoa scroll v316
   - 最下部をbottom-navに隠さない
   - 上半分の画像/名前領域でも縦スワイプでシートを展開可能
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail-scroll {
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail::after {
  content: "";
  display: block;
  height: 18px;
  width: 100%;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual-row,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-name {
  touch-action: pan-y !important;
}

/* ボタン自体はタップを優先する */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-fixed-actions button,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-arrow {
  touch-action: manipulation !important;
}

@media (max-height: 720px) {
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-detail-scroll {
    padding-bottom: calc(138px + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(138px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   Bottom nav readability patch
   - icon / label gap: + about 2mm (7-8px)
   - active label stays readable over selected-item glow
   ========================================================= */
.bottom-nav-item{
  overflow:visible;
}

.bottom-nav-label{
  position:relative;
  z-index:3;
  margin-top:6px !important;
  padding-bottom:5px !important;
  line-height:1.05;
}

.bottom-nav-item.active .bottom-nav-label{
  position:relative;
  z-index:4;
  color:#59421f !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 5px rgba(255,250,232,.92) !important;
}

/* active背景・発光は文字より後ろへ */
.bottom-nav-item.active::before{
  z-index:0;
}
.bottom-nav-item img{
  position:relative;
  z-index:2;
}

@media (max-width:380px), (max-height:700px){
  .bottom-nav-label{
    margin-top:5px !important;
    padding-bottom:4px !important;
  }
  .bottom-nav-item.active .bottom-nav-label{
    color:#59421f !important;
  }
}


/* =========================================================
   Bottom nav label size fine tuning
   ========================================================= */
.bottom-nav-label{
  font-size:11.5px !important;
}

@media (max-width:380px), (max-height:700px){
  .bottom-nav-label{
    font-size:11px !important;
  }
}


/* =========================================================
   Unified content headers — centered titles / left back button
   ========================================================= */

/* Standard content headings: always optically centered on screen. */
.screen > .header,
.screen .header {
  position: fixed;
}

.screen .header-title,
#screen-ninmu .header-title,
#screen-zukan .header-title,
#screen-summon .header-title,
#screen-setting .header-title,
#screen-bonus .header-title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: calc(100% - 150px) !important;
  max-width: 250px;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Decorative underline remains centered below the title. */
#screen-ninmu .header-title::after,
#screen-zukan .header-title::after,
#screen-summon .header-title::after,
#screen-setting .header-title::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bonus: same left-side text back button used throughout the game. */
#screen-bonus .bonus-back-btn,
.bonus-screen-header .bonus-back-btn {
  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  min-width: auto !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a7651 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  z-index: 3;
}

#screen-bonus .bonus-back-btn:active,
.bonus-screen-header .bonus-back-btn:active {
  opacity: .62;
}

/* Bonus title is centered and no longer competes with the back button. */
#screen-bonus .bonus-screen-header .header-title {
  color: #8b6728 !important;
  text-shadow: none !important;
}

/* Keep right-side controls usable while title remains truly centered. */
#screen-zukan #zukan-header-back,
#screen-zukan .zukan-header-switch {
  position: relative;
  z-index: 3;
}

@media (max-width: 380px), (max-height: 700px) {
  .screen .header-title,
  #screen-ninmu .header-title,
  #screen-zukan .header-title,
  #screen-summon .header-title,
  #screen-setting .header-title,
  #screen-bonus .header-title {
    width: calc(100% - 132px) !important;
    max-width: 220px;
  }
  #screen-bonus .bonus-back-btn,
  .bonus-screen-header .bonus-back-btn {
    left: 14px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   Home banner swipe/autoplay robustness
   - vertical page gesture remains native
   - horizontal pointer gesture is reserved for banner paging
   ========================================================= */
#home-event-banner-wrap,
#home-event-banner-wrap .home-event-banner-item{
  touch-action: pan-y !important;
}
#home-event-banner-track{
  transform: translate3d(0,0,0);
  backface-visibility:hidden;
}


/* =========================================================
   Shinju Offering Experience v2
   - resource cards removed
   - floating genesis aura + absorption animation
   - compact no-scroll lower UI
   - unified top-left back button
   ========================================================= */
#shinju-overlay .shinju-panel{
  overflow:hidden !important;
}

#shinju-overlay .shinju-close{
  position:absolute !important;
  z-index:40 !important;
  top:calc(env(safe-area-inset-top) + 14px) !important;
  left:18px !important;
  right:auto !important;
  width:auto !important;
  height:32px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#8a7651 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  text-shadow:0 1px 7px rgba(255,255,255,.86) !important;
}
#shinju-overlay .shinju-close:active{
  opacity:.62 !important;
  transform:none !important;
}

#shinju-overlay .shinju-aura-field{
  position:absolute;
  z-index:12;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

#shinju-overlay .shinju-aura-orb{
  position:absolute;
  left:var(--aura-x);
  top:var(--aura-y);
  width:92px;
  height:92px;
  margin:-46px 0 0 -46px;
  opacity:.88;
  transform:translate3d(0,0,0) scale(var(--aura-scale));
  transform-origin:center;
  filter:
    drop-shadow(0 0 8px rgba(255,240,170,.46))
    drop-shadow(0 0 18px rgba(255,224,125,.22));
  animation:shinjuAuraDrift 4.2s ease-in-out var(--aura-delay) infinite alternate;
  will-change:transform,opacity,filter;
}
#shinju-overlay .shinju-aura-orb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.92;
  animation:shinjuAuraBreath 3.1s ease-in-out var(--aura-delay) infinite alternate;
}

@keyframes shinjuAuraDrift{
  0%{transform:translate3d(-4px,4px,0) scale(var(--aura-scale)) rotate(-2deg);opacity:.68}
  50%{transform:translate3d(5px,-7px,0) scale(calc(var(--aura-scale) * 1.05)) rotate(2deg);opacity:.94}
  100%{transform:translate3d(-2px,-12px,0) scale(var(--aura-scale)) rotate(-1deg);opacity:.78}
}
@keyframes shinjuAuraBreath{
  from{filter:brightness(.94) saturate(.94);opacity:.74}
  to{filter:brightness(1.16) saturate(1.06);opacity:1}
}

#shinju-overlay .shinju-aura-orb.is-offering{
  animation:shinjuAuraOffer .72s cubic-bezier(.55,.03,.20,1) var(--offer-delay) forwards !important;
}
#shinju-overlay .shinju-aura-orb.is-offering img{
  animation:none !important;
}
@keyframes shinjuAuraOffer{
  0%{
    transform:translate3d(0,0,0) scale(var(--aura-scale)) rotate(0deg);
    opacity:.92;
    filter:drop-shadow(0 0 10px rgba(255,239,171,.62)) drop-shadow(0 0 20px rgba(255,214,99,.28));
  }
  46%{
    opacity:1;
    filter:brightness(1.35) drop-shadow(0 0 16px rgba(255,247,198,.92)) drop-shadow(0 0 30px rgba(239,190,65,.48));
  }
  100%{
    transform:translate3d(var(--offer-x),var(--offer-y),0) scale(.03) rotate(28deg);
    opacity:0;
    filter:brightness(1.65) blur(2px) drop-shadow(0 0 22px rgba(255,244,179,.94));
  }
}

#shinju-overlay .shinju-content{
  position:absolute !important;
  z-index:20 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:auto !important;
  min-height:94px !important;
  max-height:none !important;
  overflow:hidden !important;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,rgba(255,253,247,.58),rgba(248,242,228,.88)) !important;
  border-top:1px solid rgba(169,136,74,.18) !important;
  box-shadow:0 -8px 24px rgba(84,64,34,.06) !important;
  backdrop-filter:blur(7px) saturate(1.04) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.04) !important;
}
#shinju-overlay .shinju-lore{
  margin:0 0 8px !important;
  font-size:9px !important;
  line-height:1.45 !important;
  text-align:center !important;
  color:rgba(84,72,52,.62) !important;
}
#shinju-overlay .shinju-offering-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
}
#shinju-overlay .shinju-offering-state{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:7px;
  color:#766143;
  white-space:nowrap;
}
#shinju-overlay .shinju-offering-label{
  font-size:10px;
  letter-spacing:.10em;
  color:rgba(92,77,56,.70);
}
#shinju-overlay #shinju-pending-count{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:15px;
  font-weight:500;
  color:#8b6b30;
}
#shinju-overlay #shinju-pending-exp{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:9px;
  letter-spacing:.06em;
  color:rgba(139,107,48,.60);
}
#shinju-overlay .shinju-offer-all{
  flex:0 0 auto;
  min-width:106px;
  height:38px;
  padding:0 15px !important;
  border:1px solid rgba(160,124,58,.30) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,253,246,.90),rgba(247,236,211,.86)) !important;
  color:#806238 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.08em !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.76),0 3px 12px rgba(103,76,33,.06) !important;
}
#shinju-overlay .shinju-offer-all:disabled{
  opacity:.40 !important;
  filter:grayscale(.25);
}
#shinju-overlay[data-offering="1"] .shinju-offer-all{
  pointer-events:none;
}

#shinju-overlay .shinju-progress-fill{
  transition:width .72s cubic-bezier(.22,.61,.36,1) !important;
}
#shinju-overlay.shinju-gauge-receive .shinju-progress-bg{
  animation:shinjuGaugeReceive .72s ease-out;
}
#shinju-overlay.shinju-gauge-receive .shinju-progress-fill{
  filter:brightness(1.16) saturate(1.12);
  box-shadow:0 0 8px rgba(255,231,143,.58),0 0 15px rgba(189,224,245,.34);
}
@keyframes shinjuGaugeReceive{
  0%{box-shadow:0 0 0 rgba(255,235,155,0)}
  32%{box-shadow:0 0 11px rgba(255,239,169,.78),0 0 24px rgba(255,219,111,.34)}
  100%{box-shadow:0 1px 8px rgba(255,255,255,.34)}
}

/* 旧資源一覧は完全撤去 */
#shinju-overlay .shinju-items-head,
#shinju-overlay .shinju-item-list,
#shinju-overlay .shinju-item-card,
#shinju-overlay .shinju-item-empty{
  display:none !important;
}

@media(max-width:380px), (max-height:700px){
  #shinju-overlay .shinju-close{
    top:calc(env(safe-area-inset-top) + 11px) !important;
    left:15px !important;
    font-size:13px !important;
  }
  #shinju-overlay .shinju-aura-orb{
    width:82px;
    height:82px;
    margin:-41px 0 0 -41px;
  }
  #shinju-overlay .shinju-content{
    min-height:88px !important;
    padding:10px 15px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #shinju-overlay .shinju-lore{margin-bottom:6px !important;font-size:8px !important}
  #shinju-overlay .shinju-offering-bar{gap:8px}
  #shinju-overlay .shinju-offering-label{font-size:9px}
  #shinju-overlay #shinju-pending-count{font-size:14px}
  #shinju-overlay #shinju-pending-exp{font-size:8px}
  #shinju-overlay .shinju-offer-all{min-width:96px;height:36px;padding:0 12px !important;font-size:10px !important}
}

@media(prefers-reduced-motion:reduce){
  #shinju-overlay .shinju-aura-orb,
  #shinju-overlay .shinju-aura-orb img{
    animation:none !important;
  }
}


/* ============================================================
   2026-08-16 Scroll stability final patch
   - 設定 / 巡行
   - fixed html/body + fixed header 環境でも縦スクロールを確保
   ============================================================ */

/* 画面はviewportに固定し、コンテンツ領域の実高さを明示する。 */
#screen-ninmu.active,
#screen-setting.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

/* 巡行：ヘッダー下〜ボトムナビ上までを実スクロール領域として確保。 */
#screen-ninmu .ninmu-layout {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: calc(100dvh - var(--header-h) - var(--page-header-h, 64px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--header-h) - var(--page-header-h, 64px)) !important;
  overflow: hidden !important;
}

#screen-ninmu .ninmu-right,
#screen-ninmu .ninmu-left {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

#screen-ninmu .ninmu-right {
  height: 100% !important;
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

/* 設定：screen-scroll自身に明示的な高さを与える。 */
#screen-setting .screen-scroll {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: calc(100dvh - var(--header-h) - var(--page-header-h, 64px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--header-h) - var(--page-header-h, 64px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

/* 子要素が縦スワイプを奪わないようにする。 */
#screen-ninmu .ninmu-right,
#screen-ninmu .ninmu-right *,
#screen-setting .screen-scroll,
#screen-setting .screen-scroll * {
  touch-action: pan-y !important;
}


/* =========================================================
   2026-08-16 Gacha PICKUP visibility fix
   - result card pickup = visible gold aura, no text badge
   - summon skip = brown text only
   ========================================================= */

/* PICK UP文字・バッジは完全非表示 */
#reveal-pickup-badge,
.ten-card-pickup-badge {
  display: none !important;
}

/* 10連結果：PICK UPは外周発光で明確に識別 */
.ten-result-card.is-pickup {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border-color: rgba(205, 164, 72, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(255, 247, 218, 0.96),
    0 0 12px rgba(226, 186, 88, 0.52),
    0 0 28px rgba(226, 186, 88, 0.26),
    0 12px 24px rgba(102, 74, 21, 0.22),
    inset 0 0 0 1px rgba(255,255,255,0.74),
    inset 0 0 22px rgba(239, 215, 150, 0.16) !important;
  animation: tenPickupCardPulse 4.2s ease-in-out infinite !important;
}

/* ふわっとした金色のオーラ */
.ten-result-card.is-pickup::after {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border-radius: 14px !important;
  opacity: 0.95 !important;
  mix-blend-mode: screen !important;
  filter: blur(7px) !important;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,250,232,0.52) 0%, rgba(255,237,188,0.30) 18%, rgba(255,227,156,0.10) 34%, rgba(255,227,156,0) 50%),
    radial-gradient(circle at 72% 34%, rgba(255,247,216,0.34) 0%, rgba(244,216,140,0.18) 20%, rgba(244,216,140,0) 44%),
    radial-gradient(circle at 54% 78%, rgba(255,243,206,0.28) 0%, rgba(236,204,129,0.14) 18%, rgba(236,204,129,0) 42%) !important;
  animation: tenPickupAuraFloat 4.8s ease-in-out infinite !important;
}

/* 金色の内周リング。カード画像を邪魔しない細さ */
.ten-result-card.is-pickup::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 7 !important;
  pointer-events: none !important;
  border-radius: 10px !important;
  border: 1px solid rgba(236, 201, 113, 0.82) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 10px rgba(255, 244, 207, 0.32),
    0 0 8px rgba(239, 204, 113, 0.22) !important;
  opacity: 1 !important;
}

.ten-result-card.is-pickup .ten-card-img {
  filter: brightness(1.045) saturate(1.04) !important;
}

.ten-result-card.is-pickup .ten-card-element-icon {
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,0.88))
    drop-shadow(0 0 11px rgba(230,195,106,0.62))
    drop-shadow(0 2px 4px rgba(60,48,30,0.34)) !important;
}

@keyframes tenPickupCardPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 247, 218, 0.92),
      0 0 10px rgba(226, 186, 88, 0.34),
      0 0 20px rgba(226, 186, 88, 0.18),
      0 12px 24px rgba(102, 74, 21, 0.20),
      inset 0 0 0 1px rgba(255,255,255,0.72),
      inset 0 0 16px rgba(239, 215, 150, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 251, 231, 1),
      0 0 18px rgba(235, 196, 96, 0.72),
      0 0 38px rgba(235, 196, 96, 0.34),
      0 12px 26px rgba(102, 74, 21, 0.26),
      inset 0 0 0 1px rgba(255,255,255,0.82),
      inset 0 0 26px rgba(244, 222, 160, 0.20);
  }
}

@keyframes tenPickupAuraFloat {
  0%, 100% {
    transform: translate3d(-2px, -1px, 0) scale(0.985);
    opacity: 0.58;
  }
  25% {
    transform: translate3d(3px, -3px, 0) scale(1.01);
    opacity: 0.86;
  }
  50% {
    transform: translate3d(1px, 2px, 0) scale(1.03);
    opacity: 0.98;
  }
  75% {
    transform: translate3d(-3px, 3px, 0) scale(1.005);
    opacity: 0.74;
  }
}

/* 単体PICK UP演出も文字なし、周囲の光だけ */
#reveal-modal.is-pickup #reveal-chara-img {
  border-color: rgba(205, 168, 83, 0.72) !important;
  box-shadow:
    0 20px 52px rgba(64,54,36,0.20),
    0 0 42px rgba(255,255,255,0.96),
    0 0 84px rgba(228,199,127,0.58),
    0 0 118px rgba(255,239,198,0.38),
    0 0 0 1px rgba(255,248,228,0.60) inset !important;
}

/* 右下スキップ：白ではなく、背景に馴染むブラウン文字 */
.standby-skip-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  color: rgba(111, 82, 39, 0.94) !important;
  font-family: 'Cinzel', 'Noto Serif JP', serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.90),
    0 0 7px rgba(255,250,235,0.78) !important;
  opacity: 0.86 !important;
  animation: summonSkipBrownPulse 1.8s ease-in-out infinite !important;
}

@keyframes summonSkipBrownPulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; }
}


/* =========================================================
   2026-08-16 PICK UP aura DOM animation
   疑似要素ではなく実DOMを動かして、確実に視認できるゆらぎにする
   ========================================================= */

.ten-result-card.is-pickup {
  overflow: hidden !important;
  animation: tenPickupBreath 3.2s ease-in-out infinite !important;
  will-change: box-shadow;
}

/* ぼわぁっと揺れる金色オーラ */
.ten-card-pickup-aura {
  position: absolute;
  inset: -18% -28%;
  z-index: 6;
  pointer-events: none;
  border-radius: 45%;
  opacity: 0.72;
  mix-blend-mode: screen;
  filter: blur(8px);
  background:
    radial-gradient(ellipse at 28% 30%,
      rgba(255, 252, 236, 0.94) 0%,
      rgba(255, 237, 185, 0.58) 19%,
      rgba(234, 194, 96, 0.20) 38%,
      rgba(234, 194, 96, 0) 58%),
    radial-gradient(ellipse at 74% 64%,
      rgba(255, 247, 216, 0.72) 0%,
      rgba(242, 210, 131, 0.34) 22%,
      rgba(242, 210, 131, 0) 52%);
  transform-origin: center;
  animation: tenPickupAuraWander 3.6s ease-in-out infinite !important;
  will-change: transform, opacity;
}

/* ときどき横切る柔らかい光 */
.ten-card-pickup-glint {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -55%;
  width: 42%;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-12deg);
  filter: blur(3px);
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,248,218,0.10) 18%,
      rgba(255,250,224,0.72) 50%,
      rgba(255,248,218,0.10) 82%,
      rgba(255,255,255,0) 100%);
  animation: tenPickupGlintMove 4.4s ease-in-out infinite !important;
  will-change: left, opacity;
}

/* 画像やラベルはオーラより前面。ただしglintはさらに上 */
.ten-result-card.is-pickup .ten-card-img {
  z-index: 4 !important;
}
.ten-result-card.is-pickup .ten-card-bottom,
.ten-result-card.is-pickup .ten-card-element-icon,
.ten-result-card.is-pickup .ten-card-new-badge {
  z-index: 10 !important;
}

/* 既存の::afterアニメは競合させない */
.ten-result-card.is-pickup::after {
  animation: none !important;
  opacity: 0.18 !important;
}

/* 呼吸するような外周発光 */
@keyframes tenPickupBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,247,218,0.92),
      0 0 8px rgba(226,186,88,0.36),
      0 0 18px rgba(226,186,88,0.18),
      0 10px 22px rgba(102,74,21,0.20),
      inset 0 0 0 1px rgba(255,255,255,0.72) !important;
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,252,235,1),
      0 0 18px rgba(235,196,96,0.88),
      0 0 36px rgba(235,196,96,0.44),
      0 12px 25px rgba(102,74,21,0.26),
      inset 0 0 16px rgba(255,240,195,0.28) !important;
  }
}

/* 見て分かる程度に、左右上下へゆっくり漂わせる */
@keyframes tenPickupAuraWander {
  0%, 100% {
    transform: translate3d(-7px, -4px, 0) scale(0.92) rotate(-2deg);
    opacity: 0.42;
  }
  25% {
    transform: translate3d(7px, -7px, 0) scale(1.02) rotate(2deg);
    opacity: 0.78;
  }
  52% {
    transform: translate3d(5px, 6px, 0) scale(1.10) rotate(0deg);
    opacity: 0.98;
  }
  76% {
    transform: translate3d(-6px, 5px, 0) scale(1.00) rotate(-3deg);
    opacity: 0.68;
  }
}

@keyframes tenPickupGlintMove {
  0%, 14% {
    left: -55%;
    opacity: 0;
  }
  24% {
    opacity: 0.18;
  }
  48% {
    opacity: 0.86;
  }
  68% {
    left: 118%;
    opacity: 0.18;
  }
  76%, 100% {
    left: 118%;
    opacity: 0;
  }
}


/* =========================================================
   111 STORYシューティング：クリアランク / ハイスコア
   既存の淡い紙面デザインを崩さず、右端へ小さく記録を添える。
   ========================================================= */
#stage-select-modal .ss-card-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
#stage-select-modal .ss-card-name-row .ss-diff-badge {
  margin-left: auto;
  opacity: .74;
}
#stage-select-modal .ss-stage-record {
  flex: 0 0 82px;
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding-left: 7px;
  border-left: 1px solid rgba(126,105,70,.10);
  font-family: "Cinzel","Noto Serif JP",serif;
  line-height: 1;
  white-space: nowrap;
}
#stage-select-modal .ss-stage-record-rank,
#stage-select-modal .ss-stage-record-score {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
#stage-select-modal .ss-stage-record span {
  font-size: 6px;
  letter-spacing: .13em;
  color: rgba(113,96,70,.48);
}
#stage-select-modal .ss-stage-record-rank b {
  min-width: 14px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #85735b;
}
#stage-select-modal .ss-stage-record-rank.rank-s b { color: #b88b2f; }
#stage-select-modal .ss-stage-record-rank.rank-a b { color: #a77f3c; }
#stage-select-modal .ss-stage-record-rank.rank-b b { color: #88735d; }
#stage-select-modal .ss-stage-record-rank.rank-c b,
#stage-select-modal .ss-stage-record-rank.rank-d b,
#stage-select-modal .ss-stage-record-rank.rank-e b { color: #7c7469; }
#stage-select-modal .ss-stage-record-rank.rank-none b { color: rgba(112,101,83,.34); }
#stage-select-modal .ss-stage-record-score b {
  text-align: right;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(91,75,51,.78);
  font-variant-numeric: tabular-nums;
}
#stage-select-modal .ss-card.story-cleared::after {
  display: none !important;
}
@media (max-width: 390px) {
  #stage-select-modal .ss-card {
    gap: 9px !important;
    padding-left: 14px !important;
    padding-right: 12px !important;
  }
  #stage-select-modal .ss-card-no {
    width: 30px !important;
  }
  #stage-select-modal .ss-stage-record {
    flex-basis: 76px;
    min-width: 76px;
    padding-left: 5px;
  }
  #stage-select-modal .ss-stage-record span { font-size: 5.5px; }
  #stage-select-modal .ss-stage-record-score b { font-size: 8px; }
}


/* =========================================================
   112 STORYシューティング：MISSION/BOSS表記を削除し、
   ランク / ハイスコアの視認性を優先した版
   ========================================================= */
#stage-select-modal .ss-story-shooting-card{
  gap: 10px;
}
#stage-select-modal .ss-story-shooting-card .ss-card-body{
  flex: 1 1 auto;
}
#stage-select-modal .ss-story-shooting-card .ss-card-name-row{
  display:block;
}
#stage-select-modal .ss-story-shooting-card .ss-stage-record{
  flex: 0 0 112px;
  min-width: 112px;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid rgba(126,105,70,.14);
}
#stage-select-modal .ss-story-shooting-card .ss-stage-record span{
  font-size: 7px;
  letter-spacing: .14em;
}
#stage-select-modal .ss-story-shooting-card .ss-stage-record-rank b{
  font-size: 15px;
}
#stage-select-modal .ss-story-shooting-card .ss-stage-record-score b{
  font-size: 11px;
}
#stage-select-modal .ss-story-shooting-card .ss-card-arrow,
#stage-select-modal .ss-story-shooting-card .ss-lock-icon{
  align-self: center;
}
@media (max-width: 390px) {
  #stage-select-modal .ss-story-shooting-card .ss-stage-record{
    flex-basis: 100px;
    min-width: 100px;
    padding-left: 8px;
  }
  #stage-select-modal .ss-story-shooting-card .ss-stage-record-rank b{
    font-size: 14px;
  }
  #stage-select-modal .ss-story-shooting-card .ss-stage-record-score b{
    font-size: 10px;
  }
}


/* =========================================================
   ELEGANT CRYSTAL SHOP MODAL
   ========================================================= */
#shop-modal{
  background: rgba(22,18,13,.42) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#shop-modal .shop-modal-inner{
  width: min(100%, 338px);
  max-width: 338px;
  padding: 0 !important;
  color: #7b6643 !important;
  background:
    linear-gradient(180deg, rgba(255,252,247,.98) 0%, rgba(247,242,232,.98) 100%) !important;
  border: 1px solid rgba(199,176,129,.52) !important;
  border-radius: 24px !important;
  box-shadow:
    0 18px 40px rgba(75,57,29,.18),
    0 2px 10px rgba(255,255,255,.6),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  overflow: hidden;
}

#shop-modal .shop-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(205,186,144,.36);
  background:
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(247,239,225,.64) 100%);
  text-align:left;
}

#shop-modal .shop-header-main{
  min-width:0;
  flex:1 1 auto;
}

#shop-modal .shop-kicker{
  margin-bottom: 5px;
  font-family: "Cinzel","Noto Serif JP",serif;
  font-size: 10px;
  letter-spacing: .20em;
  color: rgba(168,136,71,.82);
}

#shop-modal .shop-title{
  margin: 0 0 6px;
  font-family:"Noto Serif JP",serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  color: #c8a246 !important;
}

#shop-modal .shop-subtitle{
  justify-content:flex-start;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(130,114,82,.82) !important;
}

#shop-modal .shop-gem-icon{
  width: 15px;
  height: 15px;
}

#shop-modal .shop-close-btn{
  position: static !important;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 1px solid rgba(168,148,110,.28);
  border-radius: 999px;
  background: rgba(115,104,88,.92);
  color: rgba(255,255,255,.92);
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(92,73,47,.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#shop-modal .shop-close-btn:active{
  transform: translateY(1px) scale(.97);
}

#shop-modal .shop-list{
  padding: 12px 12px 8px;
  max-height: 56vh;
  gap: 10px;
  background: transparent;
}

#shop-modal .shop-item{
  min-height: 70px;
  padding: 14px 15px;
  margin: 0;
  border: 1px solid rgba(205,186,144,.28);
  border-radius: 18px;
  border-bottom-width: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(248,243,235,.92) 100%);
  color: #8f6e28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 10px rgba(179,156,110,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

#shop-modal .shop-item:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 14px rgba(179,156,110,.14);
}

#shop-modal .shop-item:active{
  transform: translateY(1px) scale(.995);
  background: linear-gradient(180deg, rgba(250,244,232,.96) 0%, rgba(243,234,216,.98) 100%);
}

#shop-modal .shop-item-popular{
  background:
    linear-gradient(180deg, rgba(255,250,241,.96) 0%, rgba(248,239,220,.98) 100%);
}

#shop-modal .shop-item-best{
  background:
    linear-gradient(180deg, rgba(255,251,236,.98) 0%, rgba(248,236,204,.98) 100%);
  border-color: rgba(201,171,89,.42);
}




#shop-modal .shop-item-left{
  gap: 10px;
  padding-top: 0;
}

#shop-modal .shop-item-gem-icon{
  width: 20px;
  height: 20px;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.55));
}

#shop-modal .shop-item-count{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #c79c34 !important;
}

#shop-modal .shop-item-right{
  gap: 3px;
}

#shop-modal .shop-item-price{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #c79c34 !important;
}

#shop-modal .shop-item-unit{
  font-size: 10px;
  color: rgba(136,118,88,.76) !important;
  letter-spacing: .02em;
}

#shop-modal .shop-note{
  padding: 11px 18px 14px;
  border-top: 1px solid rgba(205,186,144,.28);
  background: rgba(255,255,255,.38);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(142,125,96,.78) !important;
  letter-spacing: .02em;
}

@media (max-width: 390px){
  #shop-modal .shop-modal-inner{ width:min(100%, 332px); }
  #shop-modal .shop-title{ font-size: 22px; }
  #shop-modal .shop-item{ padding: 13px 14px; min-height: 66px; }
  #shop-modal .shop-item-count,
  #shop-modal .shop-item-price{ font-size: 16px; }
}


/* =========================================================
   TEST PLAY — NAVIGATION CHARACTER
   opening_navi.webp を右下のガイド役として配置
   ========================================================= */
.testplay-notice,
.testplay-guide{
  overflow:hidden;
}

.testplay-notice-panel,
.testplay-guide-panel{
  position:relative;
  z-index:3;
}

/* キャラはUI操作を一切奪わない */
.testplay-navi-character{
  position:absolute;
  z-index:4;
  right:max(-8px, calc((100vw - 430px) / 2 - 8px));
  bottom:max(-10px, calc(env(safe-area-inset-bottom) - 6px));
  width:clamp(132px, 36vw, 164px);
  height:auto;
  object-fit:contain;
  object-position:right bottom;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:
    drop-shadow(0 9px 18px rgba(63,49,31,.17))
    drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

/* 1枚目は少し控えめ。下半身を画面外へ逃がして「案内役が覗く」感じ */
.testplay-navi-character-notice{
  width:clamp(128px, 34vw, 154px);
  right:max(-10px, calc((100vw - 430px) / 2 - 10px));
  bottom:-8px;
}

/* 2枚目は案内役として少し存在感を上げる */
.testplay-navi-character-guide{
  width:clamp(142px, 38vw, 174px);
  right:max(-12px, calc((100vw - 430px) / 2 - 12px));
  bottom:-9px;
}

/* 右下のキャラとボタンが完全に重ならないよう、パネルをほんの少し上へ */
.testplay-notice-panel{
  transform:translateY(-18px);
}

.testplay-guide-panel{
  transform:translateY(-14px);
}

/* キャラが重なる右下だけ、ボタン文字の視認性を守る */
.testplay-notice-actions,
.testplay-guide-close,
.testplay-guide-skip{
  position:relative;
  z-index:5;
}

@media (max-width: 360px){
  .testplay-navi-character-notice{
    width:124px;
    right:-18px;
  }
  .testplay-navi-character-guide{
    width:136px;
    right:-20px;
  }
  .testplay-notice-panel{
    transform:translateY(-20px);
  }
  .testplay-guide-panel{
    transform:translateY(-18px);
  }
}

@media (max-height: 680px){
  .testplay-navi-character{
    width:126px;
    right:-14px;
    bottom:-12px;
  }
  .testplay-guide-panel,
  .testplay-notice-panel{
    transform:translateY(-8px);
  }
}


/* =========================================================
   TEST PLAY NAVI v2 — larger + per-screen character
   1画面目: opening_navi_1.webp
   2画面目: opening_navi_2.webp
   ========================================================= */
.testplay-navi-character-notice{
  width:clamp(228px, 62vw, 288px) !important;
  right:max(6px, calc((100vw - 430px) / 2 + 6px)) !important;
  bottom:-26px !important;
}

.testplay-navi-character-guide{
  width:clamp(240px, 66vw, 304px) !important;
  right:max(2px, calc((100vw - 430px) / 2 + 2px)) !important;
  bottom:-28px !important;
}

/* キャラを大きくした分、本文と主要ボタンを少し上へ逃がす */
.testplay-notice-panel{
  transform:translateY(-54px) !important;
}

.testplay-guide-panel{
  transform:translateY(-46px) !important;
}

@media (max-width:360px){
  .testplay-navi-character-notice{
    width:206px !important;
    right:4px !important;
  }
  .testplay-navi-character-guide{
    width:220px !important;
    right:0px !important;
  }
  .testplay-notice-panel{
    transform:translateY(-24px) !important;
  }
  .testplay-guide-panel{
    transform:translateY(-42px) !important;
  }
}

@media (max-height:680px){
  .testplay-navi-character-notice{
    width:188px !important;
    right:2px !important;
    bottom:-24px !important;
  }
  .testplay-navi-character-guide{
    width:200px !important;
    right:-2px !important;
    bottom:-18px !important;
  }
}


/* =========================================================
   TEST PLAY READABILITY v2
   1画面目は短い案内、2画面目は説明文として組版を分離
   ========================================================= */
.testplay-notice-text,
.testplay-guide-lead,
.testplay-guide-text{
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 1画面目：短文なので中央で2ブロック。
   ブラウザに長文を好き勝手に折らせない。 */
.testplay-notice-text{
  max-width: 310px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75 !important;
  letter-spacing: .025em !important;
}

.testplay-notice-line{
  display: block;
}

.testplay-notice-line + .testplay-notice-line{
  margin-top: .22em;
}

/* 2画面目：説明文は左揃え。段落の意味が視線で追えるようにする。 */
.testplay-guide-text{
  text-align: left;
  line-height: 1.78 !important;
  letter-spacing: .01em !important;
}

.testplay-guide-text p{
  margin: 0;
  padding: 0;
}

.testplay-guide-text p + p{
  margin-top: .76em;
}

.testplay-nowrap{
  white-space: nowrap;
}

/* 横幅が狭い端末だけ、無理にnowrapを維持せず自然な改行を許可。 */
@media (max-width: 350px){
  .testplay-nowrap{
    white-space: normal;
  }

  .testplay-notice-text{
    font-size: 13px !important;
    max-width: 280px;
  }

  .testplay-guide-text{
    font-size: 12.5px !important;
    line-height: 1.72 !important;
  }
}


/* =========================================================
   TEST PLAY NAVI SIZE TUNE
   1画面目 / 2画面目で同じサイズに統一
   さらに一回り大きく
   ========================================================= */
.testplay-navi-character-notice,
.testplay-navi-character-guide{
  width: clamp(260px, 70vw, 328px) !important;
  bottom: -28px !important;
}

.testplay-navi-character-notice{
  right: max(0px, calc((100vw - 430px) / 2 + 0px)) !important;
}

.testplay-navi-character-guide{
  right: max(0px, calc((100vw - 430px) / 2 + 0px)) !important;
}

@media (max-width: 360px){
  .testplay-navi-character-notice,
  .testplay-navi-character-guide{
    width: 236px !important;
    right: -4px !important;
    bottom: -26px !important;
  }
}

@media (max-height: 680px){
  .testplay-navi-character-notice,
  .testplay-navi-character-guide{
    width: 214px !important;
    right: -2px !important;
    bottom: -22px !important;
  }
}


/* =========================================================
   TEST PLAY — ADD TO HOME SCREEN GUIDE
   ========================================================= */
.testplay-install-guide-entry{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:2px;
  padding:10px 11px;
  border:1px solid rgba(178,145,83,.26);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,252,246,.92),rgba(246,238,223,.78));
  color:#6f5735;
  text-align:left;
  font-family:"Noto Serif JP",serif;
  cursor:pointer;
}

.testplay-install-guide-entry-copy{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.testplay-install-guide-entry-copy b{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
}

.testplay-install-guide-entry-copy small{
  font-size:10.5px;
  line-height:1.5;
  color:rgba(95,82,63,.66);
}

.testplay-install-guide-entry-arrow{
  flex:0 0 auto;
  font-size:20px;
  color:rgba(154,120,62,.66);
}

.testplay-install-guide-entry{
  position:relative;
  border-color:rgba(177,132,50,.52);
  box-shadow:
    0 5px 16px rgba(111,82,36,.10),
    inset 0 0 0 1px rgba(255,255,255,.48);
  animation:testplayInstallGuideAttention 1.8s ease-in-out infinite;
}

.testplay-install-guide-entry::before{
  content:"まずは①を確認";
  position:absolute;
  top:-9px;
  right:10px;
  padding:2px 8px 3px;
  border-radius:999px;
  background:#8d6b31;
  color:#fffaf0;
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.35;
  box-shadow:0 2px 7px rgba(76,54,20,.18);
  pointer-events:none;
}

.testplay-install-guide-entry-cta{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:4px;
  color:#8a6426;
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
}

.testplay-install-guide-entry:active{
  transform:scale(.985);
  animation:none;
}

@keyframes testplayInstallGuideAttention{
  0%,100%{
    box-shadow:
      0 5px 16px rgba(111,82,36,.10),
      0 0 0 0 rgba(178,137,61,0),
      inset 0 0 0 1px rgba(255,255,255,.48);
  }
  50%{
    box-shadow:
      0 6px 18px rgba(111,82,36,.15),
      0 0 0 4px rgba(178,137,61,.12),
      inset 0 0 0 1px rgba(255,255,255,.60);
  }
}

.install-guide-modal{
  position:fixed;
  inset:0;
  z-index:12050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.install-guide-modal.active{
  display:flex;
}

.install-guide-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,20,15,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.install-guide-sheet{
  position:relative;
  z-index:1;
  width:min(100%,370px);
  max-height:calc(100dvh - 28px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(197,174,128,.48);
  border-radius:20px;
  background:linear-gradient(180deg,#fffdf8 0%,#f7f0e5 100%);
  box-shadow:0 20px 50px rgba(30,23,14,.28);
  color:#6e5839;
}

.install-guide-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 10px;
}

.install-guide-kicker{
  margin-bottom:3px;
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.20em;
  color:rgba(175,139,70,.78);
}

.install-guide-title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.04em;
}

.install-guide-close{
  width:28px;
  height:28px;
  border:1px solid rgba(165,141,101,.26);
  border-radius:50%;
  background:rgba(110,95,74,.92);
  color:#fff;
  font-size:16px;
  line-height:1;
}

.install-guide-progress{
  padding:0 16px 8px;
  font-family:"Cinzel",serif;
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(124,102,69,.58);
}

.install-guide-progress-sep{
  margin:0 3px;
}

.install-guide-visual-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  overflow:hidden;
}

.install-guide-image{
  display:block;
  width:auto;
  max-width:100%;
  max-height:43dvh;
  object-fit:contain;
  border:1px solid rgba(183,160,118,.22);
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(86,65,34,.10);
}

.install-guide-copy{
  padding:11px 16px 8px;
}

.install-guide-step-title{
  margin-bottom:5px;
  font-size:14px;
  font-weight:700;
  color:#755a34;
}

.install-guide-step-text{
  font-size:11.5px;
  line-height:1.68;
  color:rgba(87,74,56,.76);
  word-break:normal;
  line-break:strict;
}

.install-guide-dots{
  display:flex;
  justify-content:center;
  gap:5px;
  padding:2px 0 10px;
}

.install-guide-dots span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(151,126,82,.20);
}

.install-guide-dots span.active{
  background:#b58c3c;
}

.install-guide-actions{
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:8px;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
}

.install-guide-action{
  height:42px;
  border-radius:10px;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  letter-spacing:.04em;
}

.install-guide-action-sub{
  border:1px solid rgba(177,149,95,.30);
  background:rgba(255,255,255,.50);
  color:#8b7554;
}

.install-guide-action-sub:disabled{
  opacity:.35;
}

.install-guide-action-main{
  border:1px solid rgba(185,148,73,.42);
  background:linear-gradient(180deg,#fffaf0 0%,#f3e6ca 100%);
  color:#96702c;
}

@media(max-width:350px){
  .install-guide-modal{ padding:10px; }
  .install-guide-sheet{ max-height:calc(100dvh - 18px); }
  .install-guide-image{ max-height:40dvh; }
  .install-guide-step-text{ font-size:11px; }
}


/* =========================================================
   10連結果 viewport fix v2
   - Safari/PWA/Android すべてで「実際に見えている高さ」に収める
   - 共通 modal-overlay の padding / .modal の max-height を完全上書き
   ========================================================= */

#ten-result-modal.modal-overlay{
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;

  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* dvh非対応ブラウザ向けフォールバック */
@supports not (height: 100dvh){
  #ten-result-modal.modal-overlay{
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
  }
}

#ten-result-modal > .modal.ten-result-modal-inner{
  position:relative !important;

  flex:1 1 auto !important;
  width:100% !important;
  max-width:none !important;

  height:100% !important;
  min-height:0 !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  overflow:hidden !important;
  overflow-y:hidden !important;

  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}

/* 10枚のカード領域。
   footerが出たら、その分だけ自動的に縮んで2段とも必ず画面内に残す */
#ten-result-modal .ten-result-grid{
  flex:1 1 0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;

  gap:5px !important;

  padding:
    calc(env(safe-area-inset-top) + 6px)
    6px
    5px
    6px !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
}

#ten-result-modal .ten-result-card{
  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  box-sizing:border-box !important;
}

/* ボタン領域は固定高を持たせず、必要な分だけ確保 */
#ten-result-modal .ten-result-footer{
  flex:0 0 auto !important;
  min-height:0 !important;
  margin:0 !important;

  padding:
    7px
    9px
    calc(7px + env(safe-area-inset-bottom))
    9px !important;

  gap:6px !important;
  box-sizing:border-box !important;
}

#ten-result-modal .ten-result-again-btn,
#ten-result-modal .ten-result-close-btn{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:34px !important;

  margin:0 !important;
  padding:8px 10px !important;

  font-size:11px !important;
  line-height:1.15 !important;
  box-sizing:border-box !important;
}

/* 縦がかなり短い端末 */
@media (max-height: 700px){
  #ten-result-modal .ten-result-grid{
    gap:3px !important;
    padding:
      calc(env(safe-area-inset-top) + 3px)
      4px
      3px
      4px !important;
  }

  #ten-result-modal .ten-result-footer{
    padding:
      5px
      7px
      calc(5px + env(safe-area-inset-bottom))
      7px !important;
    gap:4px !important;
  }

  #ten-result-modal .ten-result-again-btn,
  #ten-result-modal .ten-result-close-btn{
    min-height:30px !important;
    padding:6px 8px !important;
    font-size:10px !important;
  }
}

/* 横幅が狭い端末も5列を崩さず収納 */
@media (max-width: 360px){
  #ten-result-modal .ten-result-grid{
    gap:3px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  #ten-result-modal .ten-card-element-icon{
    width:20px !important;
    height:20px !important;
  }

  #ten-result-modal .ten-card-name{
    font-size:7px !important;
  }
}


/* =========================================================
   Notice Modal Layout Fix v3
   - 報酬カード追加後の崩れを防止
   - 画像・ボタン・スクロール領域を固定
   ========================================================= */
.notice-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:99990 !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:
    calc(14px + env(safe-area-inset-top))
    14px
    calc(14px + env(safe-area-inset-bottom)) !important;
  overflow:hidden !important;
  background:rgba(245,240,229,.72) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.notice-modal.active{
  display:flex !important;
}

.notice-panel{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  width:min(360px,100%) !important;
  max-width:100% !important;
  height:auto !important;
  max-height:min(78dvh,620px) !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
}

.notice-head{
  flex:0 0 auto !important;
  min-height:52px;
  margin-bottom:12px !important;
  padding-right:42px;
}

.notice-head img{
  width:46px !important;
  height:46px !important;
  max-width:46px !important;
  max-height:46px !important;
  object-fit:contain !important;
  flex:0 0 46px !important;
}

.notice-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:0 0 2px !important;
}

.notice-item{
  flex:0 0 auto !important;
  min-width:0 !important;
  width:100% !important;
  padding:12px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.notice-body{
  overflow-wrap:anywhere;
  word-break:normal;
}

.notice-reward{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  margin-top:12px !important;
  padding:9px 10px !important;
  border:1px solid rgba(185,148,77,.24) !important;
  border-radius:11px !important;
  background:rgba(255,251,241,.76) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.notice-reward-main{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.notice-reward-icon{
  display:block !important;
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

.notice-reward-copy{
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

.notice-reward-label{
  font-size:9px !important;
  line-height:1.2 !important;
  color:#9a7a3b !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

.notice-reward-copy strong{
  display:block !important;
  font-size:13px !important;
  line-height:1.3 !important;
  color:#795719 !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

.notice-reward-btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:78px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:0 12px !important;
  border:1px solid rgba(174,133,54,.40) !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#fff8e8,#f1e1ba) !important;
  color:#795719 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.notice-reward-btn.claimed,
.notice-reward-btn:disabled{
  background:rgba(226,215,192,.36) !important;
  color:rgba(105,90,68,.46) !important;
  border-color:rgba(142,122,89,.18) !important;
}

/* 旧グローバルimg指定の影響を完全に遮断 */
.notice-panel img{
  max-width:100%;
}

.notice-reward img.notice-reward-icon{
  width:30px !important;
  height:30px !important;
}

/* 縦が短い端末 */
@media (max-height:700px){
  .notice-panel{
    max-height:82dvh !important;
    padding:15px !important;
  }
  .notice-head{
    margin-bottom:9px !important;
  }
  .notice-item{
    padding:10px !important;
  }
  .notice-reward{
    margin-top:9px !important;
    padding:8px 9px !important;
  }
}

/* 幅が細い端末 */
@media (max-width:350px){
  .notice-modal{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .notice-panel{
    padding:14px !important;
  }
  .notice-reward-btn{
    min-width:70px !important;
    padding:0 9px !important;
    font-size:10px !important;
  }
  .notice-reward-copy strong{
    font-size:12px !important;
  }
}


/* =========================================================
   GACHA REVEAL — TAP TO CONTINUE
   ボタンではなく、点滅するテキストのみ
   ========================================================= */
#reveal-close-btn,
#reveal-modal.is-pickup #reveal-close-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(86, 76, 58, 0.72) !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-shadow: none !important;
  text-decoration: none !important;

  position: absolute !important;
  left: 50% !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;

  animation: gachaRevealTapBlink 1.65s ease-in-out infinite !important;
}

#reveal-close-btn:active,
#reveal-close-btn:focus,
#reveal-close-btn:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transform: translateX(-50%) !important;
}

@keyframes gachaRevealTapBlink {
  0%, 100% { opacity: 0.30; }
  50% { opacity: 0.92; }
}


/* =========================================================
   NOTICE — unread/read + close interaction fix v9
   ========================================================= */

/* ×ボタンは見た目だけでなく実際にタップ可能にする */
.notice-modal .notice-close {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  z-index: 50 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ホームのお知らせ未読ドット */
#screen-main .home-notice-btn {
  position: absolute !important;
}

#screen-main .home-notice-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  display: none;
  border-radius: 50% !important;
  background: #d84a42 !important;
  border: 2px solid rgba(255,252,244,.96) !important;
  box-shadow:
    0 1px 4px rgba(88,34,28,.28),
    0 0 0 1px rgba(164,52,45,.12) !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
#screen-main .home-notice-badge.show {
  display: block !important;
}


/* 未読カード */
.notice-item {
  position: relative !important;
  cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease;
}

.notice-item.is-unread {
  border-color: rgba(186,143,61,.34) !important;
  background: rgba(255,252,244,.92) !important;
}

.notice-item.is-read {
  opacity: .78;
}

.notice-unread-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d84a42;
  box-shadow: 0 0 0 2px rgba(216,74,66,.10);
  pointer-events: none;
}


/* =========================================================
   120 キャラ図鑑：2階層式（一覧 → 個別情報）
   ========================================================= */
#screen-zukan.is-primoa-index #zukan-sub-box{
  padding-top:8px;
}
#screen-zukan.is-primoa-index #zukan-stats{
  margin:8px 14px 10px;
}
#screen-zukan.is-primoa-index #box-grid.primoa-index-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-content:start;
  gap:10px 5px;
  padding:0 10px calc(112px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overflow-x:hidden;
}
.primoa-index-card{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#5d503e;
  font-family:"Noto Serif JP",serif;
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.primoa-index-card:active{
  transform:scale(.96);
}
.primoa-index-image-wrap{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:rgba(255,253,247,.52);
  border:1px solid rgba(133,107,67,.20);
  box-shadow:0 3px 10px rgba(85,63,30,.08);
}
.primoa-index-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:filter .18s ease,opacity .18s ease,transform .18s ease;
}
.primoa-index-card.is-unowned .primoa-index-image{
  filter:grayscale(1) saturate(0) brightness(.55) contrast(.9);
  opacity:.68;
}
.primoa-index-card.is-unowned .primoa-index-image-wrap{
  background:rgba(35,35,35,.12);
  border-color:rgba(80,76,69,.22);
}
.primoa-index-no{
  position:absolute;
  left:3px;
  bottom:2px;
  z-index:2;
  font-family:"Cinzel",serif;
  font-size:8px;
  line-height:1;
  letter-spacing:.06em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.primoa-index-name{
  display:block;
  min-width:0;
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.01em;
}
.primoa-index-card.is-unowned .primoa-index-name{
  color:rgba(73,67,59,.55);
}

/* 個別ページでは一覧用COLLECTION表示を隠し、従来の育成/詳細UIへ集中させる */
#screen-zukan.is-primoa-detail #zukan-stats{
  display:none!important;
}
#screen-zukan.is-primoa-detail #zukan-sub-box{
  padding-top:0;
  height:100%;
}
#screen-zukan.is-primoa-detail #box-grid.primoa-detail-page{
  padding-bottom:0!important;
}
#screen-zukan.is-primoa-detail .primoa-detail-single{
  justify-content:center;
}
.primoa-detail-unowned-img{
  filter:grayscale(1) saturate(0) brightness(.62) contrast(.92);
  opacity:.82;
}
.primoa-detail-unowned-label{
  position:absolute;
  left:8px;
  top:8px;
  z-index:8;
  padding:3px 7px;
  border:1px solid rgba(95,83,64,.26);
  background:rgba(246,242,232,.82);
  color:rgba(81,70,54,.72);
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  letter-spacing:.08em;
}

/* 個別情報画面の左上戻る */
#screen-zukan #zukan-detail-back{
  position:absolute!important;
  left:16px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:3;
}
#screen-zukan .zukan-detail-back-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:#8a6a32;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  padding:6px 4px 6px 0;
  cursor:pointer;
}
#screen-zukan .zukan-detail-back-btn:active{opacity:.62}
#screen-zukan.is-primoa-detail .header-title{
  left:50%;
  transform:translateX(-50%);
  font-size:18px;
}

@media (max-width:350px){
  #screen-zukan.is-primoa-index #box-grid.primoa-index-grid{
    gap:8px 4px;
    padding-left:7px;
    padding-right:7px;
  }
  .primoa-index-name{font-size:8px}
}

/* v2: キャラ図鑑ではキャラクターIDを表示しない */
#screen-zukan .primoa-index-no{display:none!important;}
#screen-zukan.is-primoa-detail .box-carousel-count{display:none!important;}


/* =========================================================
   121 Home Friend Entry - 導線のみ
   ボーナスの直下 / 神樹と同じ高さ
   ========================================================= */
#screen-main .friend-home-entry {
  position: absolute;
  left: 10px;
  right: auto;
  /* 神樹と同じ実測位置を使う。端末高/Safe Area/バナー実寸の差を吸収 */
  top: var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) !important;
  width: clamp(88px, 22vw, 98px);
  height: clamp(88px, 22vw, 98px);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: visible;
  z-index: 25;
  -webkit-tap-highlight-color: transparent;
}
#screen-main .friend-home-entry-icon {
  display: block;
  /* 元画像の絵柄占有率が他アイコンより大きいため、見た目サイズを統一 */
  width: 84%;
  height: 84%;
  margin: 8% auto 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(68, 51, 24, 0.24));
  transition: transform 0.18s ease, filter 0.18s ease;
}
#screen-main .friend-home-entry:active .friend-home-entry-icon {
  transform: scale(0.94);
}
@media (max-width: 380px), (max-height: 700px) {
  #screen-main .friend-home-entry {
    left: 8px;
    width: 84px;
    height: 84px;
  }
}


/* =========================================================
   Bonus Screen Header Center Fix
   - ボーナス画面だけ見出しを中央固定
   ========================================================= */
#screen-bonus .bonus-screen-header .header-title{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  text-align:center !important;
  white-space:nowrap;
}


/* =========================================================
   122 Friend List Compact Cards / Friend Detail
   ========================================================= */
#screen-friend .friend-card-compact{
  width:100%;
  min-height:66px;
  height:66px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 10px 6px 7px;
  margin:0 0 7px;
  border:1px solid rgba(145,116,67,.18);
  border-radius:7px;
  background:rgba(255,253,247,.78);
  box-shadow:0 2px 8px rgba(72,54,27,.06);
  color:#4b4640;
  text-align:left;
  font-family:"Noto Serif JP",serif;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
#screen-friend .friend-card-compact:active{transform:scale(.99);opacity:.88}
.friend-card-panel{
  flex:0 0 52px;
  width:52px;
  height:52px;
  overflow:hidden;
  border:1px solid rgba(151,119,66,.22);
  background:rgba(237,231,216,.72);
}
.friend-card-panel-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.friend-card-panel-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(91,79,60,.35);
}
.friend-card-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
}
.friend-card-topline,
.friend-card-bottomline{
  min-width:0;
  display:flex;
  align-items:center;
}
.friend-card-topline{gap:8px}
#screen-friend .friend-card-name{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:#4b4640!important;
}
.friend-card-rank{
  flex:0 0 auto;
  font-family:"Cinzel",serif;
  font-size:9px;
  letter-spacing:.08em;
  color:#8a6a32;
  font-weight:600;
}
.friend-card-bottomline{
  justify-content:space-between;
  gap:8px;
  font-size:8.5px;
  line-height:1;
  color:rgba(75,70,64,.58);
}
.friend-card-login{flex:0 0 auto;white-space:nowrap}
.friend-card-highscore{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  font-family:"Cinzel","Noto Serif JP",serif;
  letter-spacing:.02em;
}
.friend-card-chevron{
  flex:0 0 auto;
  color:#aa8b50;
  font-size:20px;
  line-height:1;
  margin-left:1px;
}

/* タップ後の詳細は広く使う */
.friend-profile-detail{
  position:fixed;
  inset:0;
  z-index:260000;
  display:flex;
  justify-content:center;
  align-items:stretch;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.friend-profile-detail.show{opacity:1;pointer-events:auto}
.friend-profile-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(42,35,25,.26);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.friend-profile-detail-sheet{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  height:100dvh;
  background:#f7f2e8;
  overflow:hidden;
  box-shadow:0 0 28px rgba(58,43,20,.18);
}
.friend-profile-detail-head{
  height:64px;
  display:grid;
  grid-template-columns:80px 1fr 80px;
  align-items:center;
  padding:0 14px;
  border-bottom:1px solid rgba(145,116,67,.16);
  background:rgba(255,253,247,.94);
}
.friend-profile-detail-back{
  border:0;
  background:transparent;
  color:#8a6a32;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.friend-profile-detail-title{
  text-align:center;
  font-size:18px;
  font-weight:600;
  color:#6e5730;
  letter-spacing:.08em;
}
.friend-profile-detail-scroll{
  height:calc(100dvh - 64px);
  overflow-y:auto;
  padding:18px 18px calc(40px + env(safe-area-inset-bottom));
}
.friend-profile-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px;
  background:rgba(255,253,247,.72);
  border:1px solid rgba(145,116,67,.17);
}
.friend-profile-panel{
  flex:0 0 112px;
  width:112px;
  height:112px;
  overflow:hidden;
  border:1px solid rgba(145,116,67,.22);
  background:rgba(237,231,216,.7);
}
.friend-profile-panel-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.friend-profile-panel-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Cinzel",serif;
  font-size:9px;
  color:rgba(75,70,64,.35);
}
.friend-profile-main{min-width:0}
.friend-profile-name{
  font-size:19px;
  font-weight:700;
  color:#4b4640;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.friend-profile-rank{
  margin-top:7px;
  font-family:"Cinzel",serif;
  font-size:11px;
  letter-spacing:.12em;
  color:#9a793d;
}
.friend-profile-chara-name{
  margin-top:14px;
  font-size:11px;
  color:rgba(75,70,64,.64);
}
.friend-profile-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.friend-profile-info-card{
  min-height:92px;
  padding:13px;
  border:1px solid rgba(145,116,67,.17);
  background:rgba(255,253,247,.68);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.friend-profile-info-card>span{
  font-family:"Cinzel",serif;
  font-size:9px;
  letter-spacing:.16em;
  color:#a3854f;
}
.friend-profile-info-card>strong{
  margin-top:8px;
  font-size:13px;
  color:#4b4640;
  font-weight:600;
}
.friend-profile-score-card>strong{
  font-family:"Cinzel",serif;
  font-size:18px;
}
.friend-profile-info-card>small{
  margin-top:5px;
  font-size:9px;
  color:rgba(75,70,64,.55);
}


/* =========================================================
   123 Friend Card Tap / Search Result Panel
   ========================================================= */
#screen-friend .friend-card-compact.is-no-favorite{
  cursor:default;
}
#screen-friend .friend-card-compact.is-no-favorite:active{
  transform:none;
  opacity:1;
}
#screen-friend .friend-card-compact.is-no-favorite .friend-card-chevron{
  opacity:.22;
}

#screen-friend .friend-search-card-with-panel{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:68px;
  padding:8px;
}
#screen-friend .friend-search-panel{
  flex:0 0 52px;
  width:52px;
  height:52px;
  overflow:hidden;
  border:1px solid rgba(145,116,67,.20);
  background:rgba(237,231,216,.72);
}
#screen-friend .friend-search-panel-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
#screen-friend .friend-search-panel-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(75,70,64,.34);
}
#screen-friend .friend-search-main{
  flex:1 1 auto;
  min-width:0;
}
#screen-friend .friend-search-card-with-panel .friend-search-card-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#screen-friend .friend-search-card-with-panel .friend-search-send-btn{
  flex:0 0 auto;
  width:auto;
  min-width:82px;
  padding-left:10px;
  padding-right:10px;
}


/* =========================================================
   124 Friend Card Final: information-only
   ========================================================= */
#screen-friend .friend-card-compact{
  cursor:default;
}
#screen-friend .friend-card-compact:active{
  transform:none;
  opacity:1;
}
#screen-friend .friend-card-chevron{
  display:none !important;
}


/* =========================================================
   125 Friend Screen Rich Theme
   - 金 / 白 / ベージュ基調
   - 既存構造は変えず、フレンド画面だけ上書き
   ========================================================= */
#screen-friend{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #f7f2e7 0%, #f1ebdf 46%, #eee6d8 100%);
  color:#5f4f39;
}
#screen-friend .header{
  background:linear-gradient(180deg, rgba(250,246,239,.98) 0%, rgba(244,236,224,.98) 100%) !important;
  border-bottom:1px solid rgba(173,141,84,.28);
  box-shadow:0 5px 16px rgba(125,97,50,.06);
}
#screen-friend .header-title{
  left:50%;
  transform:translateX(-50%);
  color:#8d6a2d;
  font-size:22px;
  letter-spacing:.16em;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
}
#screen-friend .header > div:first-child,
#screen-friend .header > div:last-child{
  width:40px;
}
#screen-friend .screen-scroll{
  padding:18px 18px calc(104px + env(safe-area-inset-bottom));
}

#screen-friend .friend-section{
  position:relative;
  margin:0 0 16px;
  padding:14px 14px 12px;
  border:1px solid rgba(183,152,97,.22);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(248,243,235,.88) 100%);
  box-shadow:
    0 6px 20px rgba(106,83,45,.05),
    inset 0 1px 0 rgba(255,255,255,.75);
}
#screen-friend .friend-section::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(222,196,148,.20) 0%, rgba(222,196,148,0) 20%);
}
#screen-friend .friend-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:#8f6d35;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
#screen-friend .friend-section-title::before{
  content:"";
  width:20px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(185,151,89,0) 0%, rgba(185,151,89,.95) 100%);
}

#screen-friend .friend-list-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:76px;
  border:1px solid rgba(185,151,89,.14);
  border-radius:14px;
  background:rgba(255,255,255,.52);
  color:rgba(121,99,64,.72);
  font-size:13px;
}

#screen-friend #friend-requests-list .friend-req-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(185,151,89,.16);
  border-radius:14px;
  background:rgba(255,255,255,.70);
  box-shadow:0 4px 12px rgba(88,68,33,.04);
}
#screen-friend .friend-req-summary{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
}
#screen-friend .friend-req-avatar{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(185,151,89,.18);
  background:linear-gradient(180deg, #fffdfa 0%, #eee5d7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
#screen-friend .friend-req-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#screen-friend .friend-req-avatar-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(126,103,66,.55);
  font-size:18px;
}
#screen-friend .friend-req-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
#screen-friend .friend-req-name{
  color:#6e5935;
  font-weight:700;
  line-height:1.2;
}
#screen-friend .friend-req-rank{
  color:rgba(118,95,59,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
#screen-friend .friend-req-btns{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
#screen-friend .friend-req-accept,
#screen-friend .friend-req-decline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-family:"Noto Serif JP",serif;
  font-weight:600;
  letter-spacing:.03em;
  box-shadow:0 3px 8px rgba(108,83,42,.07);
}
#screen-friend .friend-req-accept{
  background:linear-gradient(180deg, #d8bf87 0%, #c8a96e 100%);
  border:1px solid rgba(154,119,56,.30);
  color:#fffdf8;
}
#screen-friend .friend-req-decline{
  background:linear-gradient(180deg, #faf8f4 0%, #efe8dc 100%);
  border:1px solid rgba(185,151,89,.24);
  color:#8b6b35;
}

#screen-friend .friend-add-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(185,151,89,.16);
  border-radius:16px;
  background:rgba(255,255,255,.60);
}
#screen-friend .friend-add-input{
  height:38px;
  border:1px solid rgba(193,164,111,.30);
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,244,238,.98) 100%);
  color:#6b593c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90);
}
#screen-friend .friend-add-input::placeholder{
  color:rgba(122,103,74,.52);
}
#screen-friend .friend-add-input:focus{
  border-color:rgba(191,153,84,.60);
  box-shadow:0 0 0 3px rgba(208,180,122,.14);
  background:#fffdfa;
}
#screen-friend .friend-add-btn{
  min-width:64px;
  height:38px;
  border:none;
  border-radius:13px;
  background:linear-gradient(180deg, #e2ca93 0%, #cfae6d 100%);
  color:#fffdfa;
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:
    0 5px 12px rgba(144,108,41,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
}
#screen-friend .friend-add-btn:active{
  transform:translateY(1px);
}
#screen-friend #friend-my-id{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(190,156,95,.18);
  color:#8a6a32;
}

#screen-friend .friend-search-card-with-panel{
  min-height:78px;
  padding:10px;
  border:1px solid rgba(188,154,92,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(247,241,233,.92) 100%);
  box-shadow:0 5px 14px rgba(102,80,43,.05);
}
#screen-friend .friend-search-panel{
  width:56px;
  height:56px;
  flex-basis:56px;
  border-radius:12px;
  border:1px solid rgba(185,151,89,.18);
  background:linear-gradient(180deg, #fffdfa 0%, #eee5d7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
#screen-friend .friend-search-card-name{
  color:#5d4b33;
  font-size:14px;
  font-weight:700;
}
#screen-friend .friend-search-card-id{
  margin-top:4px;
  color:rgba(110,91,58,.64);
  font-size:11px;
}
#screen-friend .friend-search-card-with-panel .friend-search-send-btn{
  min-width:104px;
  min-height:40px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.35;
  white-space:normal;
  word-break:keep-all;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg, #e1c98f 0%, #cba760 100%);
  color:#fffdf8;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 5px 12px rgba(144,108,41,.10);
}
#screen-friend .friend-search-card-with-panel .friend-search-send-btn:disabled{
  background:linear-gradient(180deg, #f3eee6 0%, #e6dece 100%);
  color:rgba(129,111,83,.72);
  box-shadow:none;
}

#screen-friend .friend-card-compact{
  min-height:76px;
  height:auto;
  gap:11px;
  padding:10px 12px 10px 9px;
  margin:0 0 10px;
  border:1px solid rgba(185,151,89,.18);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,243,235,.96) 100%);
  box-shadow:
    0 6px 18px rgba(105,81,43,.06),
    inset 0 1px 0 rgba(255,255,255,.88);
}
#screen-friend .friend-card-compact::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(180deg, rgba(215,185,123,.92) 0%, rgba(192,153,78,.75) 100%);
}
#screen-friend .friend-card-compact{
  position:relative;
  overflow:hidden;
}
#screen-friend .friend-card-panel{
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:12px;
  border:1px solid rgba(191,155,91,.20);
  background:linear-gradient(180deg, #fffefa 0%, #efe6d8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84);
}
#screen-friend .friend-card-body{
  gap:8px;
}
#screen-friend .friend-card-name{
  font-size:16px;
  color:#5f4a2f !important;
  letter-spacing:.02em;
}
#screen-friend .friend-card-rank{
  font-size:10px;
  color:#9a7a42;
  letter-spacing:.12em;
}
#screen-friend .friend-card-bottomline{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  font-size:10px;
  color:rgba(97,80,52,.70);
  line-height:1.2;
}
#screen-friend .friend-card-login{
  color:rgba(97,80,52,.74);
}
#screen-friend .friend-card-highscore{
  text-align:left;
  color:#b28a42;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:10px;
  letter-spacing:.03em;
  max-width:100%;
}

/* 下ナビとのトーン差をやわらげる */
#screen-friend ~ .bottom-nav,
body:has(#screen-friend.active) .bottom-nav{
  background:linear-gradient(180deg, rgba(246,240,232,.98) 0%, rgba(237,227,212,.98) 100%);
  border-top:1px solid rgba(186,151,89,.22);
}
body:has(#screen-friend.active) .bottom-nav .bottom-nav-label{
  color:rgba(126,104,68,.74);
}
body:has(#screen-friend.active) .bottom-nav .bottom-nav-item.active .bottom-nav-label{
  color:#8e6c34;
}
body:has(#screen-friend.active) .bottom-nav .bottom-nav-item img{
  filter:brightness(.66) sepia(.18) saturate(.55);
}
body:has(#screen-friend.active) .bottom-nav .bottom-nav-item.active img{
  filter:brightness(.96) sepia(.36) saturate(.95);
}


/* =========================================================
   Home Friend Entry - responsive alignment safeguard
   フレンドは神樹と同じY座標変数を必ず使用する。
   JSがイベントバナー実寸から --home-shinju-top を更新するため、
   iPhone SE / 14 / Safe Area差で縦位置が分離しない。
   ========================================================= */
#screen-main .friend-home-entry{
  top:var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) !important;
}


/* =========================================================
   Home side icons - visual size normalization
   各アイコン素材の余白量と縦横比が異なるため、見た目サイズを個別補正する。
   クリック領域はボタン外寸のまま、絵柄だけを揃える。
   ========================================================= */
#screen-main .bonus-home-entry-icon,
#screen-main .friend-home-entry-icon,
#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon{
  display:block;
  object-fit:contain;
  margin-left:auto;
  margin-right:auto;
}

/* ボーナスは元素材の横幅がやや細いので少し大きめ */
#screen-main .bonus-home-entry-icon{
  width:108%;
  height:108%;
  margin-top:-4%;
}

/* フレンド / お知らせ / 神樹はほぼ同じ見え寸に揃える */
#screen-main .friend-home-entry-icon,
#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon{
  width:93%;
  height:93%;
  margin-top:3.5%;
}

@media (max-width: 380px) and (max-height: 700px) {
  #screen-main .bonus-home-entry-icon{
    width:108%;
    height:108%;
    margin-top:-4%;
  }
  #screen-main .friend-home-entry-icon,
  #screen-main .home-notice-btn > img,
  #screen-main .shinju-home-entry-icon{
    width:93%;
    height:93%;
    margin-top:3.5%;
  }
}


/* =========================================================
   Home side icons - unified 500x500 assets
   4素材を同一キャンバス・同一余白で作り直したため、個別スケール補正を解除。
   ボタン外寸・画像表示率も4つ完全統一する。
   ========================================================= */
#screen-main .home-notice-btn,
#screen-main .shinju-home-entry,
#screen-main .bonus-home-entry,
#screen-main .friend-home-entry{
  width:clamp(88px,22vw,98px) !important;
  height:clamp(88px,22vw,98px) !important;
}

#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon,
#screen-main .bonus-home-entry-icon,
#screen-main .friend-home-entry-icon{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none;
  filter:drop-shadow(0 5px 7px rgba(68,51,24,.24));
}

#screen-main .home-notice-btn:active > img,
#screen-main .shinju-home-entry:active .shinju-home-entry-icon,
#screen-main .bonus-home-entry:active .bonus-home-entry-icon,
#screen-main .friend-home-entry:active .friend-home-entry-icon{
  transform:scale(.94);
}

/* SE等でも4つを同じ外寸にする */
@media (max-width:380px) and (max-height:700px){
  #screen-main .home-notice-btn,
  #screen-main .shinju-home-entry,
  #screen-main .bonus-home-entry,
  #screen-main .friend-home-entry{
    width:84px !important;
    height:84px !important;
  }

  #screen-main .home-notice-btn > img,
  #screen-main .shinju-home-entry-icon,
  #screen-main .bonus-home-entry-icon,
  #screen-main .friend-home-entry-icon{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
  }
}


/* =========================================================
   Home side icons - background blend tuning
   アンティークシルバー素材を背景の淡い水彩に馴染ませる。
   4アイコンの見え寸は共通のまま、少しだけ引いてコントラストを抑える。
   ========================================================= */
#screen-main .home-notice-btn > img,
#screen-main .shinju-home-entry-icon,
#screen-main .bonus-home-entry-icon,
#screen-main .friend-home-entry-icon{
  width:94% !important;
  height:94% !important;
  margin:3% auto 0 !important;
  opacity:1;
  filter:
    saturate(.88)
    contrast(.92)
    brightness(1.04)
    drop-shadow(0 3px 5px rgba(78,64,45,.14)) !important;
}

/* タップ時も柔らかい質感を維持 */
#screen-main .home-notice-btn:active > img,
#screen-main .shinju-home-entry:active .shinju-home-entry-icon,
#screen-main .bonus-home-entry:active .bonus-home-entry-icon,
#screen-main .friend-home-entry:active .friend-home-entry-icon{
  transform:scale(.95);
  opacity:.92;
}

/* SE等でも同じ見え寸・同じ馴染ませ方 */
@media (max-width:380px) and (max-height:700px){
  #screen-main .home-notice-btn > img,
  #screen-main .shinju-home-entry-icon,
  #screen-main .bonus-home-entry-icon,
  #screen-main .friend-home-entry-icon{
    width:94% !important;
    height:94% !important;
    margin:3% auto 0 !important;
  }
}


/* =========================================================
   2026-08-16 SCROLL STABILITY FIX v15
   巡行 / 設定のスクロール領域を flex-height 依存から切り離す。
   既存の height:0 / calc(100dvh...) 競合を最終定義で無効化。
   ========================================================= */

/* 画面そのものは viewport に固定し、内部だけをスクロールさせる */
#screen-ninmu,
#screen-setting {
  position: relative !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* 巡行：
   ヘッダー下〜ボトムナビ手前までをレイアウト領域として直接確保。
   flex の height:0 / 100% 計算に依存しない。 */
#screen-ninmu .ninmu-layout {
  position: absolute !important;
  top: calc(var(--header-h) + var(--page-header-h, 64px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#screen-ninmu .ninmu-right {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

#screen-ninmu .ninmu-left {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 設定：
   screen-scroll をヘッダー下から画面下まで absolute で確保。
   内容量に関係なくこの要素自身が必ずスクロールコンテナになる。 */
#screen-setting .screen-scroll {
  position: absolute !important;
  top: calc(var(--header-h) + var(--page-header-h, 64px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* 縦スワイプを子要素側で塞がない */
#screen-ninmu .ninmu-right,
#screen-ninmu .ninmu-right *,
#screen-setting .screen-scroll,
#screen-setting .screen-scroll * {
  touch-action: pan-y !important;
}

/* range は横操作を必要とするので例外 */
#screen-setting input[type="range"] {
  touch-action: pan-x !important;
}



/* =========================================================
   Zukan - 強化可能通知ドット
   ========================================================= */
.primoa-index-card{
  position: relative;
}
.primoa-index-limitbreak-dot{
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 8;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e33b3b;
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow:
    0 1px 3px rgba(75,25,18,.28),
    0 0 0 2px rgba(227,59,59,.12);
  pointer-events: none;
}


/* =========================================================
   iOS / Dynamic Viewport Safety v40
   - iPhone Safari / PWA の上下UI変動に 100dvh で追従
   - ノッチ / Home Indicator の safe-area を維持
   ========================================================= */
html,
body {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

#splash,
#title-screen,
#loading,
#summon-standby,
#fullscreen-blackout,
#ur-alert-screen,
#reveal-modal,
#ten-result-modal {
  max-height: 100dvh;
}

#ten-result-modal {
  height: 100dvh;
}

@supports (height: 100dvh) {
  .screen,
  #screen-main,
  #screen-zukan,
  #screen-setting,
  #shinju-overlay,
  .shinju-panel,
  .shinju-visual-wrap,
  .remnant-fullscreen-inner,
  .roguelite-condition-modal {
    max-height: 100dvh;
  }
}


/* =========================================================
   Zukan Limit Break Status v45
   - 名前下に4段階の凸状況を静かなシャンパンゴールドで表示
   - 完凸のみ淡い発光で格を出す
   ========================================================= */
.primoa-index-lb{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:10px;
  margin-top:2px;
  pointer-events:none;
}

.primoa-index-lb-dot{
  position:relative;
  display:block;
  width:6px;
  height:6px;
  border-radius:1px;
  box-sizing:border-box;
  transform:rotate(45deg);
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.primoa-index-lb-dot.is-empty{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(142,112,60,.48);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.30);
}

.primoa-index-lb-dot.is-filled{
  border:1px solid rgba(141,101,32,.72);
  background:
    linear-gradient(135deg,
      #fff9e8 0%,
      #e8ca83 36%,
      #bd8c38 68%,
      #8e652a 100%);
  box-shadow:
    0 1px 2px rgba(83,58,20,.20),
    inset 1px 1px 0 rgba(255,255,255,.55);
}

.primoa-index-lb-unowned{
  opacity:0;
}

/* 完凸：派手に点滅させず、金属の反射のようにゆっくり発光 */
.primoa-index-card.is-max-limitbreak .primoa-index-image-wrap{
  border-color:rgba(190,150,73,.72);
  box-shadow:
    0 3px 11px rgba(85,63,30,.10),
    0 0 0 1px rgba(222,189,116,.20),
    0 0 12px rgba(204,161,76,.20);
  animation:primoaMaxLimitBreakGlow 3.6s ease-in-out infinite;
}

.primoa-index-card.is-max-limitbreak .primoa-index-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(255,235,183,.38);
  box-shadow:
    inset 0 0 10px rgba(255,226,155,.10);
}

.primoa-index-card.is-max-limitbreak .primoa-index-lb-dot.is-filled{
  border-color:rgba(188,145,59,.92);
  background:
    linear-gradient(135deg,
      #fffdf4 0%,
      #f3dc9b 30%,
      #d6a84e 66%,
      #9d6c25 100%);
  box-shadow:
    0 0 5px rgba(236,207,137,.44),
    0 1px 2px rgba(83,58,20,.20),
    inset 1px 1px 0 rgba(255,255,255,.72);
  animation:primoaMaxDiamondRainbow 4.8s linear infinite;
}

@keyframes primoaMaxDiamondRainbow{
  0%{
    filter:brightness(1.06) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(255,105,105,.42),
      0 0 9px rgba(255,175,95,.24),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.72);
  }
  20%{
    filter:brightness(1.10) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(255,220,95,.46),
      0 0 9px rgba(175,235,105,.26),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.74);
  }
  40%{
    filter:brightness(1.12) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(95,230,170,.48),
      0 0 9px rgba(90,205,255,.28),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.76);
  }
  60%{
    filter:brightness(1.12) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(100,175,255,.50),
      0 0 9px rgba(150,120,255,.30),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.76);
  }
  80%{
    filter:brightness(1.10) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(225,115,255,.48),
      0 0 9px rgba(255,115,175,.28),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.74);
  }
  100%{
    filter:brightness(1.06) hue-rotate(0deg);
    box-shadow:
      0 0 4px rgba(255,105,105,.42),
      0 0 9px rgba(255,175,95,.24),
      0 1px 2px rgba(83,58,20,.20),
      inset 1px 1px 0 rgba(255,255,255,.72);
  }
}

.primoa-index-card.is-max-limitbreak .primoa-index-name{
  color:#745725;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}

@keyframes primoaMaxLimitBreakGlow{
  0%,100%{
    box-shadow:
      0 3px 11px rgba(85,63,30,.10),
      0 0 0 1px rgba(222,189,116,.16),
      0 0 9px rgba(204,161,76,.14);
  }
  50%{
    box-shadow:
      0 3px 11px rgba(85,63,30,.10),
      0 0 0 1px rgba(236,203,128,.30),
      0 0 15px rgba(204,161,76,.30);
  }
}

@media (prefers-reduced-motion: reduce){
  .primoa-index-card.is-max-limitbreak .primoa-index-image-wrap,
  .primoa-index-card.is-max-limitbreak .primoa-index-lb-dot.is-filled{
    animation:none;
  }
}

@media (max-width:350px){
  .primoa-index-lb{
    gap:2.5px;
    margin-top:1px;
  }
  .primoa-index-lb-dot{
    width:5px;
    height:5px;
  }
}


/* =========================================================
   Friend remove / confirm
   ========================================================= */
#screen-friend .friend-remove-btn{
  flex:0 0 auto;
  min-width:48px;
  height:30px;
  margin-left:auto;
  padding:0 10px;
  border:1px solid rgba(174,82,82,.30);
  border-radius:8px;
  background:rgba(170,68,68,.06);
  color:#a35a5a;
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  letter-spacing:.08em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#screen-friend .friend-remove-btn:active{
  transform:scale(.96);
  background:rgba(170,68,68,.12);
}

.friend-remove-confirm{
  position:fixed;
  inset:0;
  z-index:270000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.friend-remove-confirm.show{
  opacity:1;
  pointer-events:auto;
}
.friend-remove-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(28,24,19,.36);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.friend-remove-confirm-card{
  position:relative;
  z-index:1;
  width:min(330px,92vw);
  padding:24px 20px 18px;
  border:1px solid rgba(157,126,73,.24);
  border-radius:14px;
  background:#faf6ed;
  box-shadow:0 18px 48px rgba(64,45,20,.18);
  text-align:center;
}
.friend-remove-confirm-kicker{
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.24em;
  color:#a08a63;
}
.friend-remove-confirm-title{
  margin-top:8px;
  color:#5f4c31;
  font-size:14px;
  font-weight:600;
  line-height:1.6;
}
.friend-remove-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
}
.friend-remove-confirm-actions button{
  height:42px;
  border-radius:9px;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  cursor:pointer;
}
.friend-remove-confirm-no{
  border:1px solid rgba(141,116,77,.28);
  background:#fffdf7;
  color:#756344;
}
.friend-remove-confirm-yes{
  border:1px solid rgba(159,66,66,.42);
  background:#a85757;
  color:#fffaf7;
}
.friend-remove-confirm-yes:disabled{
  opacity:.55;
}


/* SPECIAL STAGE ticket */
.shooting-special-ticket-card{position:relative;padding-bottom:18px!important}
.special-ticket-cost{margin-top:8px;font-family:"Cinzel","Noto Serif JP",serif;font-size:10px;letter-spacing:.12em;color:#b69855}
.special-ticket-balance{
  position:absolute;
  right:14px;
  top:13px;
  bottom:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  line-height:1;
  letter-spacing:.07em;
  color:rgba(117,91,48,.72);
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  white-space:nowrap;
}
.special-ticket-balance b{
  margin-left:4px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:12px;
  font-weight:600;
  color:#88682f;
}
.login-bonus-ticket,.bonus-login-ticket{display:block;margin-top:3px;font-size:8px!important;line-height:1.15;color:#b38a39;letter-spacing:.04em}

/* =========================================================
   SCORE ATTACK / すこあた！ v115 RICH UI
   ========================================================= */

#screen-main .score-attack-home-entry{
  position:absolute;
  right:calc(10px + (clamp(88px,22vw,98px) - 76px) / 2);
  top:calc(var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) + clamp(88px,22vw,98px) + 2px);
  bottom:auto;
  z-index:25;
  width:76px;
  height:76px;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}

#score-attack-root{
  display:none;position:fixed;inset:0;z-index:245000;
  width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;
  overflow:hidden;background:#f3ebe2;color:#554b45;
  font-family:"Noto Serif JP",serif;box-sizing:border-box;overscroll-behavior:none;
}
#score-attack-root.show{display:block}
#score-attack-root,#score-attack-root *{box-sizing:border-box}

.score-attack-page{
  position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%;
  min-width:0;overflow:hidden;
  background:
    radial-gradient(circle at 14% 7%,rgba(255,201,224,.34) 0%,rgba(255,201,224,0) 24%),
    radial-gradient(circle at 87% 22%,rgba(246,214,161,.30) 0%,rgba(246,214,161,0) 26%),
    linear-gradient(180deg,#fffaf6 0%,#f8efe9 48%,#f1e6df 100%);
}
.score-attack-bg-deco{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);opacity:.45}
.score-attack-bg-deco-a{width:180px;height:180px;right:-70px;top:88px;background:radial-gradient(circle,rgba(246,157,198,.28),rgba(246,157,198,0) 68%)}
.score-attack-bg-deco-b{width:220px;height:220px;left:-110px;bottom:8%;background:radial-gradient(circle,rgba(226,186,105,.20),rgba(226,186,105,0) 70%)}

.score-attack-head{
  position:relative;z-index:3;
  flex:0 0 calc(64px + env(safe-area-inset-top));
  min-height:calc(64px + env(safe-area-inset-top));
  display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:end;
  padding:env(safe-area-inset-top) 12px 10px;
  border-bottom:1px solid rgba(183,140,144,.20);
  background:linear-gradient(180deg,rgba(255,253,250,.98),rgba(255,249,246,.94));
  box-shadow:0 5px 18px rgba(104,72,66,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.score-attack-head-title{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.score-attack-head-title small{font:7px/1 "Cinzel",serif;letter-spacing:.24em;color:#bd7d97;white-space:nowrap}
.score-attack-head-title strong{margin-top:5px;font-size:19px;line-height:1;font-weight:700;letter-spacing:.08em;color:#985f77;white-space:nowrap}
.score-attack-back{align-self:center;justify-self:start;height:34px;padding:0;border:0;background:transparent;color:#806f67;font:12px "Noto Serif JP",serif;white-space:nowrap}
.score-attack-head-mark{align-self:center;justify-self:end;color:#d8a34a;font-size:15px;opacity:.76}

.score-attack-scroll{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  padding:12px 12px calc(28px + env(safe-area-inset-bottom));
}

/* HERO */
.score-attack-hero{
  position:relative;width:100%;overflow:hidden;
  padding:16px 14px 14px;
  border:1px solid rgba(189,142,145,.19);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,245,248,.76)),
    rgba(255,255,255,.64);
  box-shadow:0 10px 30px rgba(98,61,68,.08);
}
.score-attack-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,0) 33%,rgba(225,171,99,.08));
}
.score-attack-hero-art{position:relative;z-index:2;width:138px;height:108px;margin:0 auto -4px;display:flex;align-items:center;justify-content:center}
.score-attack-hero-glow{position:absolute;width:122px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(250,153,200,.27),rgba(250,153,200,0) 70%);filter:blur(4px)}
.score-attack-hero-art img{position:relative;z-index:2;display:block;width:132px;max-width:38vw;height:auto;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(112,68,86,.12))}
.score-attack-hero-copy{position:relative;z-index:2;text-align:center}
.score-attack-eyebrow{display:block;font:7px "Cinzel",serif;letter-spacing:.25em;color:#c3879f}
.score-attack-hero-copy h2{margin-top:5px;font-size:17px;font-weight:700;letter-spacing:.04em;color:#6c5358}
.score-attack-hero-copy p{margin:7px auto 0;max-width:320px;font-size:9px;line-height:1.75;color:#8c7773}
.score-attack-rule-chips{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.score-attack-rule-chips span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:7px 4px;border:1px solid rgba(191,149,141,.18);border-radius:10px;background:rgba(255,255,255,.70)}
.score-attack-rule-chips b{font:700 11px "Cinzel",serif;color:#98687b}
.score-attack-rule-chips small{margin-top:2px;font:6px "Cinzel",serif;letter-spacing:.12em;color:#b49b91}

/* DIFFICULTY */
.score-attack-mode-card{margin-top:10px;padding:12px;border:1px solid rgba(189,145,129,.18);border-radius:15px;background:rgba(255,255,255,.66);box-shadow:0 6px 20px rgba(87,58,48,.05)}
.score-attack-mode-head{display:flex;justify-content:space-between;align-items:end;gap:8px;margin-bottom:9px}
.score-attack-mode-head>div{display:flex;flex-direction:column;min-width:0}
.score-attack-mode-head small{font:7px "Cinzel",serif;letter-spacing:.18em;color:#b08375}
.score-attack-mode-head strong{margin-top:3px;font-size:12px;color:#66544d}
.score-attack-mode-head>span{font-size:7px;color:#a18c85;white-space:nowrap}
.score-attack-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
.score-attack-tabs button{min-width:0;height:52px;padding:7px 8px;border:1px solid rgba(176,139,126,.24);border-radius:11px;background:linear-gradient(180deg,#fffdfa,#fff9f5);color:#96796f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.score-attack-tabs button small{display:block;font:700 11px "Cinzel",serif;letter-spacing:.12em}
.score-attack-tabs button b{display:block;margin-top:4px;font-size:7px;font-weight:500;color:#aa948c}
.score-attack-tabs button.active{border-color:#df88ad;background:linear-gradient(180deg,#f9c3da 0%,#ec91bb 100%);box-shadow:0 5px 14px rgba(196,97,141,.16)}
.score-attack-tabs button.active small,.score-attack-tabs button.active b{color:#fff}

/* MY BEST */
.score-attack-me{position:relative;margin-top:10px;width:100%;min-width:0;padding:13px;border:1px solid rgba(185,143,126,.20);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,250,247,.74));box-shadow:0 8px 24px rgba(83,56,45,.06);text-align:center;overflow:hidden}
.score-attack-me::before{content:"";position:absolute;left:-36px;top:-54px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(229,180,96,.17),rgba(229,180,96,0) 72%)}
.score-attack-me-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
.score-attack-me-head>div{display:flex;flex-direction:column}
.score-attack-me-head small{font:7px "Cinzel",serif;letter-spacing:.18em;color:#b1887b}
.score-attack-me-head span{margin-top:2px;font-size:11px;font-weight:700;color:#69564f}
.score-attack-me-badge{padding:4px 7px;border:1px solid rgba(211,161,79,.28);border-radius:999px;background:rgba(255,248,222,.74);font:6px "Cinzel",serif;letter-spacing:.10em;color:#ac7c32}
.score-attack-me>strong{position:relative;z-index:2;display:block;margin:8px 0 6px;font:700 30px/1 "Cinzel",serif;letter-spacing:.03em;color:#8c5d6c;text-shadow:0 1px 0 #fff}
.score-attack-my-party-label{position:relative;z-index:2;margin-top:4px;font:6px "Cinzel",serif;letter-spacing:.15em;color:#b09a92}
.score-attack-start{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(270px,86%);height:48px;margin:11px auto 0;padding:0 18px;border:1px solid #dc8eaf;border-radius:24px;background:linear-gradient(180deg,#ffc9df 0%,#ed91ba 100%);color:#fff;box-shadow:0 7px 17px rgba(198,92,139,.20)}
.score-attack-start span{font-size:12px;font-weight:700;letter-spacing:.08em}
.score-attack-start small{margin-top:2px;font:6px "Cinzel",serif;letter-spacing:.16em;opacity:.90}

/* RANKING */
.score-attack-ranking{margin-top:14px;width:100%;min-width:0}
.score-attack-section-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:0 2px 8px}
.score-attack-section-head>div{display:flex;flex-direction:column;min-width:0}
.score-attack-section-head span{font:700 8px "Cinzel",serif;letter-spacing:.15em;color:#a36c82}
.score-attack-section-head strong{margin-top:2px;font-size:12px;color:#66534e}
.score-attack-section-head>small{font-size:7px;color:#a89189;white-space:nowrap}

.score-attack-podium-wrap{position:relative;padding:28px 8px 10px;border:1px solid rgba(189,146,132,.18);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,249,244,.68));box-shadow:0 7px 22px rgba(89,57,48,.05);overflow:hidden}
.score-attack-podium-wrap::before{content:"";position:absolute;left:50%;top:-55px;transform:translateX(-50%);width:190px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(246,207,112,.24),rgba(246,207,112,0) 70%)}
.score-attack-podium-crown{position:absolute;left:0;right:0;top:10px;text-align:center;font:7px "Cinzel",serif;letter-spacing:.18em;color:#c08b37}
.score-attack-podium{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);align-items:end;gap:6px}
.score-attack-podium-card{min-width:0;min-height:112px;padding:8px 4px 7px;overflow:hidden;border:1px solid rgba(181,143,131,.18);border-radius:11px;background:rgba(255,255,255,.76);text-align:center}
.score-attack-podium-card.place-1{min-height:138px;padding-top:11px;border-color:rgba(214,173,77,.34);background:linear-gradient(180deg,#fff4c7 0%,#fffdf5 100%);box-shadow:0 5px 14px rgba(160,118,42,.10)}
.score-attack-podium-card.place-2{min-height:124px;background:linear-gradient(180deg,#f5f5f4,#fff)}
.score-attack-podium-card.place-3{min-height:112px;background:linear-gradient(180deg,#f7e7df,#fff)}
.score-attack-podium-card.is-empty{opacity:.28}
.score-attack-medal{height:24px;font-size:18px;line-height:24px}
.score-attack-podium-card>b{display:block;width:100%;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:700;color:#695954}
.score-attack-podium-card>strong{display:block;margin:3px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px/1.1 "Cinzel",serif;color:#9b6678}

.score-attack-ranking-list-head{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(62px,auto);gap:7px;padding:8px 10px 5px;color:#b09a92;font:6px "Cinzel",serif;letter-spacing:.12em}
.score-attack-ranking-list-head span:last-child{text-align:right}
.score-attack-list{display:flex;flex-direction:column;gap:6px}
.score-attack-row{width:100%;min-width:0;min-height:62px;display:grid;grid-template-columns:26px minmax(0,1fr) minmax(64px,auto);align-items:center;gap:7px;padding:6px 9px;overflow:hidden;border:1px solid rgba(183,145,132,.18);border-radius:10px;background:rgba(255,255,255,.72);box-shadow:0 2px 7px rgba(80,55,46,.025)}
.score-attack-row.is-me{border-color:rgba(222,129,170,.44);background:linear-gradient(180deg,rgba(255,246,250,.94),rgba(255,239,246,.84))}
.score-attack-rank-no{text-align:center;font:700 13px "Cinzel",serif;color:#a37784}
.score-attack-row-main{min-width:0;overflow:hidden}
.score-attack-row-main>b{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#62534e}
.score-attack-row-main em{margin-left:3px;font:700 7px "Cinzel",serif;font-style:normal;color:#dc75a2}
.score-attack-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font:700 12px "Cinzel",serif;color:#8c6370}

.score-attack-party{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;margin-top:4px}
.score-attack-row-main .score-attack-party{justify-content:flex-start}
.score-attack-party span{flex:0 0 28px;width:28px;height:28px;overflow:hidden;border:1px solid rgba(171,133,122,.18);border-radius:6px;background:#eee5df;box-shadow:0 1px 3px rgba(75,53,46,.05)}
.score-attack-party img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.score-attack-party .empty{opacity:.32}
.score-attack-party.is-large span{flex-basis:25px;width:25px;height:25px;border-radius:5px}

.score-attack-loading,.score-attack-empty{width:100%;padding:22px 8px;text-align:center;font-size:9px;line-height:1.7;color:#9f8b84}

.shooting-score-attack-bullet{box-shadow:0 0 7px rgba(244,117,177,.46)!important}

@media (min-width:500px){
  #score-attack-root{left:50%;right:auto;width:430px;max-width:430px;transform:translateX(-50%);box-shadow:0 0 24px rgba(0,0,0,.80)}
}
@media (max-width:380px), (max-height:700px){
  #screen-main .score-attack-home-entry{right:17px;top:calc(var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) + 84px + 4px);bottom:auto;width:70px;height:70px}
  #screen-main .score-attack-home-entry img{width:84%;height:84%;margin:8% auto 0}
  .score-attack-scroll{padding-left:10px;padding-right:10px}
  .score-attack-hero{padding:12px 10px}
  .score-attack-hero-art{height:92px}
  .score-attack-hero-art img{width:116px}
  .score-attack-hero-copy h2{font-size:15px}
  .score-attack-rule-chips span{min-height:40px}
  .score-attack-podium{gap:4px}
  .score-attack-podium-card{padding-left:3px;padding-right:3px}
  .score-attack-party span{flex-basis:25px;width:25px;height:25px}
  .score-attack-party.is-large span{flex-basis:22px;width:22px;height:22px}
  .score-attack-row{grid-template-columns:24px minmax(0,1fr) minmax(58px,auto);padding-left:7px;padding-right:7px}
}


/* v116: イベントページのロゴ撤去 / ランキング最上部 */
.score-attack-ranking-first{
  margin-top:0;
}
.score-attack-hero-compact{
  margin-top:12px;
  padding-top:14px;
  padding-bottom:14px;
}
.score-attack-hero-compact .score-attack-hero-copy{
  padding-top:0;
}
.score-attack-hero-compact .score-attack-rule-chips{
  margin-top:10px;
}

/* 旧ロゴ用レイアウトは未使用 */
.score-attack-hero-art,
.score-attack-hero-glow{
  display:none!important;
}


/* v117: 「同じ弾幕を読み切れ」説明フレームを完全撤去 */
.score-attack-hero,
.score-attack-hero-compact,
.score-attack-rule-chips{
  display:none!important;
}
.score-attack-mode-card{
  margin-top:12px;
}


/* =========================================================
   SCORE ATTACK v118
   1画面完結レイアウト：イベントページ自体はスクロールさせない
   ========================================================= */
#score-attack-root .score-attack-scroll{
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:7px 10px calc(8px + env(safe-area-inset-bottom)) !important;
}

/* ランキングを最優先で上部に圧縮 */
#score-attack-root .score-attack-ranking{
  margin-top:0 !important;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#score-attack-root .score-attack-section-head{
  flex:0 0 auto;
  margin:0 2px 5px !important;
}
#score-attack-root .score-attack-section-head span{
  font-size:7px;
}
#score-attack-root .score-attack-section-head strong{
  font-size:11px;
}
#score-attack-root .score-attack-section-head>small{
  font-size:6px;
}

/* TOP3をかなりコンパクトに */
#score-attack-root .score-attack-podium-wrap{
  flex:0 0 auto;
  padding:20px 6px 6px !important;
  border-radius:12px;
}
#score-attack-root .score-attack-podium-crown{
  top:6px;
  font-size:6px;
}
#score-attack-root .score-attack-podium{
  gap:4px;
}
#score-attack-root .score-attack-podium-card{
  min-height:76px !important;
  padding:5px 3px !important;
  border-radius:8px;
}
#score-attack-root .score-attack-podium-card.place-1{
  min-height:92px !important;
  padding-top:6px !important;
}
#score-attack-root .score-attack-podium-card.place-2{
  min-height:84px !important;
}
#score-attack-root .score-attack-podium-card.place-3{
  min-height:76px !important;
}
#score-attack-root .score-attack-medal{
  height:18px;
  line-height:18px;
  font-size:15px;
}
#score-attack-root .score-attack-podium-card>b{
  margin-top:1px;
  font-size:7px;
}
#score-attack-root .score-attack-podium-card>strong{
  margin:2px 0 3px;
  font-size:9px;
}
#score-attack-root .score-attack-podium-card .score-attack-party{
  margin-top:2px;
}
#score-attack-root .score-attack-podium-card .score-attack-party span{
  flex-basis:20px;
  width:20px;
  height:20px;
  border-radius:4px;
}

/* ランキング一覧は残しつつ、行を薄く */
#score-attack-root .score-attack-ranking-list-head{
  flex:0 0 auto;
  grid-template-columns:24px minmax(0,1fr) minmax(56px,auto);
  padding:5px 7px 3px;
  font-size:5px;
}
#score-attack-root .score-attack-list{
  flex:1 1 auto;
  min-height:0;
  gap:3px;
  overflow:hidden;
}
#score-attack-root .score-attack-row{
  min-height:42px;
  grid-template-columns:22px minmax(0,1fr) minmax(58px,auto);
  gap:5px;
  padding:3px 6px;
  border-radius:7px;
}
#score-attack-root .score-attack-rank-no{
  font-size:11px;
}
#score-attack-root .score-attack-row-main>b{
  font-size:8px;
}
#score-attack-root .score-attack-row>strong{
  font-size:10px;
}
#score-attack-root .score-attack-row .score-attack-party{
  margin-top:2px;
}
#score-attack-root .score-attack-row .score-attack-party span{
  flex-basis:20px;
  width:20px;
  height:20px;
  border-radius:4px;
}

/* 下段：難易度とMY BESTを横並び化 */
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  margin-top:0 !important;
}
#score-attack-root .score-attack-mode-card{
  flex:0 0 auto;
  padding:7px 8px;
  border-radius:10px;
}
#score-attack-root .score-attack-mode-head{
  margin-bottom:5px;
}
#score-attack-root .score-attack-mode-head small{
  font-size:5px;
}
#score-attack-root .score-attack-mode-head strong{
  font-size:9px;
}
#score-attack-root .score-attack-mode-head>span{
  font-size:5px;
}
#score-attack-root .score-attack-tabs{
  gap:5px;
}
#score-attack-root .score-attack-tabs button{
  height:38px;
  padding:4px 6px;
  border-radius:8px;
}
#score-attack-root .score-attack-tabs button small{
  font-size:9px;
}
#score-attack-root .score-attack-tabs button b{
  margin-top:2px;
  font-size:6px;
}

#score-attack-root .score-attack-me{
  flex:0 0 auto;
  padding:7px 9px 8px;
  border-radius:10px;
}
#score-attack-root .score-attack-me-head small{
  font-size:5px;
}
#score-attack-root .score-attack-me-head span{
  font-size:9px;
}
#score-attack-root .score-attack-me-badge{
  padding:2px 5px;
  font-size:5px;
}
#score-attack-root .score-attack-me>strong{
  margin:4px 0 3px;
  font-size:22px;
}
#score-attack-root .score-attack-my-party-label{
  display:none;
}
#score-attack-root #score-attack-my-party .score-attack-party{
  margin-top:2px;
}
#score-attack-root #score-attack-my-party .score-attack-party span{
  flex-basis:24px;
  width:24px;
  height:24px;
}
#score-attack-root .score-attack-start{
  width:min(250px,82%);
  height:36px;
  margin-top:6px;
}
#score-attack-root .score-attack-start span{
  font-size:10px;
}
#score-attack-root .score-attack-start small{
  font-size:5px;
}

/* 低い端末ではさらに圧縮 */
@media (max-height:760px){
  #score-attack-root .score-attack-head{
    flex-basis:calc(56px + env(safe-area-inset-top));
    min-height:calc(56px + env(safe-area-inset-top));
    padding-bottom:7px;
  }
  #score-attack-root .score-attack-head-title strong{font-size:16px}
  #score-attack-root .score-attack-podium-card{min-height:68px !important}
  #score-attack-root .score-attack-podium-card.place-1{min-height:82px !important}
  #score-attack-root .score-attack-podium-card.place-2{min-height:75px !important}
  #score-attack-root .score-attack-row{min-height:38px}
  #score-attack-root .score-attack-row .score-attack-party span{
    flex-basis:18px;width:18px;height:18px;
  }
  #score-attack-root .score-attack-mode-card{padding-top:5px;padding-bottom:5px}
  #score-attack-root .score-attack-tabs button{height:34px}
  #score-attack-root .score-attack-me{padding-top:5px;padding-bottom:6px}
  #score-attack-root .score-attack-me>strong{font-size:19px}
  #score-attack-root .score-attack-start{height:32px;margin-top:4px}
}


/* =========================================================
   SCORE ATTACK v119
   画面全体は固定 / ランキング欄のみ縦スクロール
   TOP3表彰台は撤去
   ========================================================= */
#score-attack-root .score-attack-scroll{
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
}

/* ランキング領域が残り高さを使う */
#score-attack-root .score-attack-ranking{
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:9px 9px 8px;
  border:1px solid rgba(187,145,132,.18);
  border-radius:12px;
  background:rgba(255,255,255,.68);
  box-shadow:0 5px 16px rgba(82,56,48,.045);
}

#score-attack-root .score-attack-section-head{
  flex:0 0 auto;
  margin:0 1px 6px !important;
}

#score-attack-root .score-attack-ranking-list-head{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) minmax(64px,auto);
  gap:7px;
  padding:5px 7px;
  border-bottom:1px solid rgba(185,146,133,.16);
  color:#ad968f;
  font:6px "Cinzel","Noto Serif JP",serif;
  letter-spacing:.08em;
}
#score-attack-root .score-attack-ranking-list-head span:last-child{
  text-align:right;
}

/* ここだけスクロール可能 */
#score-attack-root .score-attack-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:5px 1px 1px;
  gap:4px !important;
  scrollbar-width:thin;
}

/* 表彰台は完全に使わない */
#score-attack-root .score-attack-podium-wrap,
#score-attack-root .score-attack-podium,
#score-attack-root .score-attack-podium-crown{
  display:none !important;
}

/* 行：順位 / プレイヤー+panel3枚 / スコア */
#score-attack-root .score-attack-row{
  flex:0 0 auto;
  min-height:48px !important;
  grid-template-columns:28px minmax(0,1fr) minmax(66px,auto) !important;
  gap:7px !important;
  padding:4px 7px !important;
  border-radius:8px !important;
}
#score-attack-root .score-attack-rank-no{
  font-size:12px !important;
}
#score-attack-root .score-attack-row-main>b{
  font-size:8px !important;
  line-height:1.1;
}
#score-attack-root .score-attack-row .score-attack-party{
  margin-top:3px !important;
  gap:3px !important;
  justify-content:flex-start !important;
}
#score-attack-root .score-attack-row .score-attack-party span{
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  border-radius:4px !important;
}
#score-attack-root .score-attack-row>strong{
  font-size:10px !important;
}

/* 下部UIは固定高でランキングを圧迫しすぎない */
#score-attack-root .score-attack-mode-card{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:6px 8px !important;
  border-radius:9px !important;
}
#score-attack-root .score-attack-mode-head{
  margin-bottom:4px !important;
}
#score-attack-root .score-attack-tabs button{
  height:34px !important;
}
#score-attack-root .score-attack-me{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:6px 8px 7px !important;
  border-radius:9px !important;
}
#score-attack-root .score-attack-me>strong{
  margin:3px 0 2px !important;
  font-size:20px !important;
}
#score-attack-root .score-attack-my-party-label{
  display:none !important;
}
#score-attack-root #score-attack-my-party .score-attack-party{
  margin-top:2px !important;
}
#score-attack-root #score-attack-my-party .score-attack-party span{
  flex-basis:22px !important;
  width:22px !important;
  height:22px !important;
}
#score-attack-root .score-attack-start{
  height:32px !important;
  margin-top:4px !important;
}
#score-attack-root .score-attack-start span{
  font-size:10px !important;
}
#score-attack-root .score-attack-start small{
  font-size:5px !important;
}

/* 低い端末でも画面全体はスクロールさせない */
@media (max-height:700px){
  #score-attack-root .score-attack-head{
    flex-basis:calc(54px + env(safe-area-inset-top)) !important;
    min-height:calc(54px + env(safe-area-inset-top)) !important;
    padding-bottom:6px !important;
  }
  #score-attack-root .score-attack-head-title strong{font-size:15px !important}
  #score-attack-root .score-attack-scroll{gap:6px !important;padding-top:6px !important}
  #score-attack-root .score-attack-ranking{padding:7px !important}
  #score-attack-root .score-attack-row{min-height:43px !important}
  #score-attack-root .score-attack-row .score-attack-party span{
    flex-basis:19px !important;width:19px !important;height:19px !important;
  }
  #score-attack-root .score-attack-tabs button{height:30px !important}
  #score-attack-root .score-attack-me>strong{font-size:17px !important}
  #score-attack-root .score-attack-start{height:29px !important}
}


/* =========================================================
   SCORE ATTACK v120
   ランキング1行を大型化 / 1画面に約5人
   ========================================================= */

/* ランキング欄の高さを確保し、5行前後が見えるサイズ感 */
#score-attack-root .score-attack-ranking{
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* 1行を大きく */
#score-attack-root .score-attack-row{
  min-height:72px !important;
  grid-template-columns:34px minmax(0,1fr) minmax(78px,auto) !important;
  gap:9px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
}

/* 順位 */
#score-attack-root .score-attack-rank-no{
  font-size:16px !important;
}

/* プレイヤー名 */
#score-attack-root .score-attack-row-main>b{
  font-size:10px !important;
  line-height:1.2 !important;
  margin-bottom:4px;
}

/* 編成panelを大きく */
#score-attack-root .score-attack-row .score-attack-party{
  margin-top:3px !important;
  gap:5px !important;
}
#score-attack-root .score-attack-row .score-attack-party span{
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  border-radius:7px !important;
}
#score-attack-root .score-attack-row .score-attack-party img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
}

/* スコアも少し大きく */
#score-attack-root .score-attack-row>strong{
  font-size:13px !important;
}

/* ランキング見出しも列幅に合わせる */
#score-attack-root .score-attack-ranking-list-head{
  grid-template-columns:34px minmax(0,1fr) minmax(78px,auto) !important;
  gap:9px !important;
  padding:6px 9px !important;
  font-size:6px !important;
}

/* ランキング内部だけスクロール */
#score-attack-root .score-attack-list{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  gap:5px !important;
  padding-top:5px !important;
}

/* 低い端末でも極端に小さくしない */
@media (max-height:700px){
  #score-attack-root .score-attack-row{
    min-height:64px !important;
    grid-template-columns:30px minmax(0,1fr) minmax(70px,auto) !important;
    gap:7px !important;
    padding:6px 8px !important;
  }
  #score-attack-root .score-attack-rank-no{
    font-size:14px !important;
  }
  #score-attack-root .score-attack-row-main>b{
    font-size:9px !important;
  }
  #score-attack-root .score-attack-row .score-attack-party span{
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
  }
  #score-attack-root .score-attack-row>strong{
    font-size:12px !important;
  }
  #score-attack-root .score-attack-ranking-list-head{
    grid-template-columns:30px minmax(0,1fr) minmax(70px,auto) !important;
  }
}


/* =========================================================
   SCORE ATTACK v121
   横一列：順位 / プレイヤー名 / [キャラ1][キャラ2][キャラ3] / SCORE
   ========================================================= */

/* 行全体 */
#score-attack-root .score-attack-row{
  min-height:66px !important;
  grid-template-columns:30px minmax(0,1fr) minmax(72px,auto) !important;
  gap:8px !important;
  padding:7px 9px !important;
}

/* プレイヤー名 + 3キャラを横一列 */
#score-attack-root .score-attack-row-main{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  overflow:hidden !important;
}

#score-attack-root .score-attack-row-main>b{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:9px !important;
  line-height:1.15 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* panel画像は横並びで大きく */
#score-attack-root .score-attack-row-main .score-attack-party{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  margin:0 !important;
}

#score-attack-root .score-attack-row-main .score-attack-party span{
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  border-radius:7px !important;
}

#score-attack-root .score-attack-row-main .score-attack-party img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
}

/* SCORE */
#score-attack-root .score-attack-row>strong{
  font-size:12px !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* 見出しも同じ思想で */
#score-attack-root .score-attack-ranking-list-head{
  grid-template-columns:30px minmax(0,1fr) minmax(72px,auto) !important;
  gap:8px !important;
  padding:6px 9px !important;
}
#score-attack-root .score-attack-ranking-list-head span:nth-child(2){
  padding-left:0 !important;
}

/* 小さい端末でも横一列を維持 */
@media (max-width:380px), (max-height:700px){
  #score-attack-root .score-attack-row{
    min-height:60px !important;
    grid-template-columns:26px minmax(0,1fr) minmax(64px,auto) !important;
    gap:6px !important;
    padding:6px 7px !important;
  }
  #score-attack-root .score-attack-row-main{
    gap:6px !important;
  }
  #score-attack-root .score-attack-row-main>b{
    font-size:8px !important;
  }
  #score-attack-root .score-attack-row-main .score-attack-party{
    gap:3px !important;
  }
  #score-attack-root .score-attack-row-main .score-attack-party span{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
  }
  #score-attack-root .score-attack-row>strong{
    font-size:11px !important;
  }
  #score-attack-root .score-attack-ranking-list-head{
    grid-template-columns:26px minmax(0,1fr) minmax(64px,auto) !important;
    gap:6px !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
}


/* =========================================================
   SCORE ATTACK v122
   ランキング見出し簡略化 / プレイヤー名・スコア大型化
   ========================================================= */

/* 「現在のランキング」だけ残す */
#score-attack-root .score-attack-section-head{
  margin:0 1px 8px !important;
  align-items:center !important;
}
#score-attack-root .score-attack-section-head>div{
  display:block !important;
}
#score-attack-root .score-attack-section-head span,
#score-attack-root .score-attack-section-head>small,
#score-attack-root .score-attack-ranking-list-head{
  display:none !important;
}
#score-attack-root .score-attack-section-head strong{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  color:#66534e !important;
}

/* プレイヤー名を大きく */
#score-attack-root .score-attack-row-main>b{
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

/* スコアを大きく */
#score-attack-root .score-attack-row>strong{
  font-size:15px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

/* 少しだけスコア列を広げる */
#score-attack-root .score-attack-row{
  grid-template-columns:30px minmax(0,1fr) minmax(84px,auto) !important;
}

/* 小さい端末でも文字サイズを落としすぎない */
@media (max-width:380px), (max-height:700px){
  #score-attack-root .score-attack-row-main>b{
    font-size:10px !important;
  }
  #score-attack-root .score-attack-row>strong{
    font-size:13px !important;
  }
  #score-attack-root .score-attack-row{
    grid-template-columns:26px minmax(0,1fr) minmax(72px,auto) !important;
  }
}

/* =========================================================
   Bonus Screen Mixed Reward Grid - permanent layout fix v177
   ボーナス一覧はログインボーナスmodalを開いていなくても崩れないよう、
   JS動的styleに依存せず本体CSSでサイズ/グリッドを保証する。
   ========================================================= */
#screen-bonus .bonus-mixed-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  width:100%;
}
#screen-bonus .bonus-mixed-day{
  min-width:0;
  min-height:118px;
  padding:9px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  border:1px solid rgba(214,194,156,.9);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,252,247,.96),rgba(250,244,231,.92));
}
#screen-bonus .bonus-mixed-day.is-current{
  box-shadow:0 0 0 2px rgba(212,178,111,.35) inset;
}
#screen-bonus .bonus-mixed-day.is-claimed{opacity:.72;}
#screen-bonus .bonus-mixed-day.is-special{grid-column:span 2;}
#screen-bonus .bonus-mixed-day > span{
  font-size:10px;
  letter-spacing:.12em;
  color:#b29461;
}
#screen-bonus .bonus-mixed-reward{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  margin-top:7px;
}
#screen-bonus .bonus-mixed-reward img.material{
  display:block!important;
  width:45px!important;
  height:45px!important;
  max-width:45px!important;
  max-height:45px!important;
  object-fit:contain!important;
  margin:0!important;
}
#screen-bonus .bonus-mixed-reward img.ticket{
  display:block!important;
  width:138px!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  margin:0!important;
}
#screen-bonus .bonus-mixed-reward b{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:13px;
  line-height:1;
  color:#9b6a18;
  font-weight:600;
}
#screen-bonus .bonus-mixed-reward small{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-size:7.5px;
  line-height:1.3;
  color:#9c8767;
}
@media(max-width:360px){
  #screen-bonus .bonus-mixed-day{min-height:108px;padding:8px 5px;}
  #screen-bonus .bonus-mixed-reward img.material{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;}
  #screen-bonus .bonus-mixed-reward img.ticket{width:122px!important;}
}


/* =========================================================
   v192 Home notification dots - unified visual size
   ホーム画面周辺の通知ドットを13px・同じ赤/白縁/影に統一。
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .bonus-home-entry-notice,
#bottom-nav-shared .bottom-nav-notice {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #d84a42 !important;
  border: 2px solid rgba(255,252,244,.96) !important;
  box-shadow:
    0 1px 4px rgba(88,34,28,.28),
    0 0 7px rgba(216,74,66,.42) !important;
}

/* 神樹だけ旧SE用指定で15pxへ戻るのを防ぐ */
@media (max-width:380px) and (max-height:700px) {
  #screen-main .home-notice-badge,
  #screen-main .shinju-home-entry .shinju-home-entry-badge,
  #screen-main .bonus-home-entry-notice,
  #bottom-nav-shared .bottom-nav-notice {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
  }
}


/* =========================================================
   v193 Home notification dots - unified pulse
   お知らせ / 神樹の通知ドットを同じ脈動アニメーションに統一。
   ========================================================= */
#screen-main .home-notice-btn.has-unread .home-notice-badge,
#screen-main .home-notice-badge[style*="display: block"],
#screen-main .home-notice-badge[style*="display:block"],
#screen-main .shinju-home-entry.has-items .shinju-home-entry-badge {
  animation: home-notice-dot-pulse-v193 1.8s ease-in-out infinite !important;
}

@keyframes home-notice-dot-pulse-v193 {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 1px 4px rgba(88,34,28,.28),
      0 0 7px rgba(216,74,66,.42);
  }
  50% {
    transform: scale(1.14);
    box-shadow:
      0 1px 5px rgba(88,34,28,.34),
      0 0 13px rgba(235,50,60,.72);
  }
}


/* =========================================================
   SCORE ATTACK v211 - Sasaphia visual integration
   全画面固定・ページ本体非スクロールは既存仕様を維持。
   古紙 / 金属線 / 古典装飾へ寄せ、現代的な丸カード感を抑える。
   ========================================================= */
#score-attack-root{
  --sa-paper:#f3eddf;
  --sa-paper-deep:#e7dcc8;
  --sa-paper-light:#fbf8ef;
  --sa-ink:#5b4932;
  --sa-ink-soft:#8a7452;
  --sa-gold:#a9894c;
  --sa-gold-dark:#765b2f;
  --sa-metal:#8f8370;
  --sa-line:rgba(135,105,56,.42);
}
#score-attack-root .score-attack-page{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.72),transparent 24%),
    radial-gradient(circle at 82% 72%,rgba(153,123,72,.08),transparent 26%),
    repeating-linear-gradient(0deg,rgba(117,88,46,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#f7f2e8 0%,#eee5d5 48%,#e7dcc9 100%) !important;
  color:var(--sa-ink) !important;
}
#score-attack-root .score-attack-bg-deco{
  opacity:.16 !important;
  filter:sepia(.4) saturate(.55) !important;
}

/* 見出し：本編の紙・金線・古典装飾 */
#score-attack-root .score-attack-head{
  background:
    linear-gradient(180deg,rgba(250,247,239,.98),rgba(236,228,212,.97)) !important;
  border-bottom:1px solid var(--sa-line) !important;
  box-shadow:
    0 2px 10px rgba(76,57,30,.10),
    inset 0 -1px 0 rgba(255,255,255,.72) !important;
}
#score-attack-root .score-attack-head::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:44px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#b29152 25%,#8a6d38 50%,#b29152 75%,transparent);
  opacity:.72;
}
#score-attack-root .score-attack-head-title small{
  color:#a58c64 !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.18em !important;
}
#score-attack-root .score-attack-head-title strong{
  color:#765a2d !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.12em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
}
#score-attack-root .score-attack-back{
  color:#7b6645 !important;
  font-family:"Noto Serif JP",serif !important;
}
#score-attack-root .score-attack-head-mark{
  color:#9b7c45 !important;
  opacity:.58 !important;
}

/* コンテンツ間隔は固定画面に収めたまま */
#score-attack-root .score-attack-scroll{
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(145,112,59,.055),transparent 12%,transparent 88%,rgba(145,112,59,.055)) !important;
}

/* 共通カード：丸みを落とし、二重線の古紙パネルへ */
#score-attack-root .score-attack-ranking,
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  position:relative !important;
  border-radius:2px !important;
  border:1px solid rgba(137,107,59,.42) !important;
  background:
    linear-gradient(180deg,rgba(253,250,242,.92),rgba(239,231,215,.90)) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.28),
    inset 0 0 0 4px rgba(141,111,65,.12),
    0 3px 9px rgba(78,58,31,.08) !important;
}
#score-attack-root .score-attack-ranking::before,
#score-attack-root .score-attack-mode-card::before,
#score-attack-root .score-attack-me::before{
  content:"◆";
  position:absolute;
  left:50%;
  top:-7px;
  transform:translateX(-50%);
  padding:0 7px;
  color:#a18450;
  background:#f3ecdf;
  font-size:8px;
  line-height:14px;
  z-index:2;
}

/* セクション見出し */
#score-attack-root .score-attack-section-head strong,
#score-attack-root .score-attack-mode-head strong,
#score-attack-root .score-attack-me-head span{
  color:#725a35 !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
}
#score-attack-root .score-attack-mode-head small,
#score-attack-root .score-attack-me-head small,
#score-attack-root .score-attack-mode-head>span{
  color:#9a8564 !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.08em !important;
}

/* ランキング行：淡色アプリの白カード感を消す */
#score-attack-root .score-attack-row{
  border-radius:1px !important;
  border:0 !important;
  border-bottom:1px solid rgba(143,113,68,.18) !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.42),rgba(244,236,221,.50)) !important;
  box-shadow:none !important;
}
#score-attack-root .score-attack-row.is-me{
  background:
    linear-gradient(90deg,rgba(190,157,92,.16),rgba(252,248,238,.72),rgba(190,157,92,.12)) !important;
  box-shadow:inset 3px 0 0 rgba(164,126,58,.54) !important;
}
#score-attack-root .score-attack-rank-no,
#score-attack-root .score-attack-row>strong{
  color:#725932 !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
}
#score-attack-root .score-attack-row-main>b{
  color:#5c4a34 !important;
  font-family:"Noto Serif JP",serif !important;
}
#score-attack-root .score-attack-row-main em{
  color:#8b6c36 !important;
  border:1px solid rgba(154,119,59,.38) !important;
  border-radius:1px !important;
  background:rgba(239,227,202,.75) !important;
  font-style:normal !important;
  font-size:8px !important;
  padding:1px 4px !important;
}

/* 難易度ボタン：石/金属プレート風。丸みを廃止 */
#score-attack-root .score-attack-tabs{
  gap:6px !important;
}
#score-attack-root .score-attack-tabs button{
  border-radius:1px !important;
  border:1px solid rgba(130,105,70,.38) !important;
  background:
    linear-gradient(180deg,rgba(250,247,239,.98),rgba(224,215,199,.96)) !important;
  color:#6f5d44 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.34),
    0 1px 3px rgba(65,48,27,.08) !important;
}
#score-attack-root .score-attack-tabs button.active{
  border-color:rgba(139,99,35,.62) !important;
  background:
    linear-gradient(180deg,#efe0bd 0%,#d8bd83 48%,#c8a762 100%) !important;
  color:#4e3b21 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,248,224,.42),
    inset 0 -2px 4px rgba(94,65,19,.14),
    0 2px 5px rgba(72,52,25,.12) !important;
}
#score-attack-root .score-attack-tabs button small,
#score-attack-root .score-attack-tabs button b{
  font-family:"Noto Serif JP",serif !important;
}

/* 自己記録：英語バッジを日本語へ統一 */
#score-attack-root .score-attack-me-badge{
  border-radius:1px !important;
  border:1px solid rgba(145,111,53,.38) !important;
  background:rgba(222,204,166,.54) !important;
  color:#73582c !important;
  font-family:"Noto Serif JP",serif !important;
}
#score-attack-root .score-attack-me>strong{
  color:#664a22 !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  text-shadow:0 1px 0 rgba(255,255,255,.72) !important;
}

/* 挑戦ボタン：本編の装飾ボタン寄り。丸みをなくし文字を大型化 */
#score-attack-root .score-attack-start{
  width:min(286px,88%) !important;
  height:44px !important;
  margin-top:7px !important;
  border-radius:2px !important;
  border:1px solid rgba(104,75,32,.68) !important;
  background:
    linear-gradient(180deg,#d9bd7d 0%,#b99552 48%,#9b763a 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,240,194,.30),
    inset 0 -3px 5px rgba(72,43,14,.18),
    0 3px 7px rgba(72,48,20,.16) !important;
  color:#fff9e9 !important;
}
#score-attack-root .score-attack-start::before,
#score-attack-root .score-attack-start::after{
  content:"◆";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,242,203,.72);
  font-size:9px;
}
#score-attack-root .score-attack-start::before{left:14px}
#score-attack-root .score-attack-start::after{right:14px}
#score-attack-root .score-attack-start span{
  font-family:"Noto Serif JP",serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-shadow:0 1px 2px rgba(76,47,17,.48) !important;
}
#score-attack-root .score-attack-start small{
  display:none !important;
}

/* 低い端末でも挑戦ボタン文字は小さくしない */
@media (max-height:700px){
  #score-attack-root .score-attack-start{
    height:38px !important;
  }
  #score-attack-root .score-attack-start span{
    font-size:14px !important;
  }
}


/* =========================================================
   SCORE ATTACK v212 - pink & gold happy palette
   既存のSasaphia統一デザインは維持しつつ、
   色味だけを「薄い桃色 + 金」の祝祭感へ寄せる
   ========================================================= */
#score-attack-root{
  --sa-paper:#f8edf1;
  --sa-paper-deep:#f1dde5;
  --sa-paper-light:#fff8fb;
  --sa-ink:#6f4d58;
  --sa-ink-soft:#a07a86;
  --sa-gold:#c79b53;
  --sa-gold-dark:#9a7437;
  --sa-line:rgba(177,132,74,.34);
}
#score-attack-root .score-attack-page{
  background:
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.82),transparent 24%),
    radial-gradient(circle at 84% 78%,rgba(235,169,195,.22),transparent 28%),
    radial-gradient(circle at 76% 20%,rgba(250,214,225,.24),transparent 20%),
    repeating-linear-gradient(0deg,rgba(185,132,150,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#fff8fb 0%,#f8edf2 45%,#f2e0e8 100%) !important;
  color:var(--sa-ink) !important;
}
#score-attack-root .score-attack-bg-deco{
  opacity:.18 !important;
  filter:sepia(.18) saturate(.95) hue-rotate(-18deg) brightness(1.04) !important;
}

/* header */
#score-attack-root .score-attack-head{
  background:
    linear-gradient(180deg,rgba(255,250,252,.99),rgba(246,231,238,.97)) !important;
  border-bottom:1px solid rgba(194,151,86,.34) !important;
  box-shadow:
    0 2px 10px rgba(112,73,88,.08),
    inset 0 -1px 0 rgba(255,255,255,.84) !important;
}
#score-attack-root .score-attack-head::after{
  background:linear-gradient(90deg,transparent,#d8b36a 25%,#bc904a 50%,#d8b36a 75%,transparent) !important;
}
#score-attack-root .score-attack-head-title small{
  color:#c08aa1 !important;
}
#score-attack-root .score-attack-head-title strong{
  color:#9a6a7c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;
}
#score-attack-root .score-attack-back{
  color:#8b6772 !important;
}
#score-attack-root .score-attack-head-mark{
  color:#caa05a !important;
  opacity:.70 !important;
}

/* cards */
#score-attack-root .score-attack-ranking,
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  border:1px solid rgba(197,155,87,.34) !important;
  background:
    linear-gradient(180deg,rgba(255,251,252,.95),rgba(246,233,238,.92)) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.34),
    inset 0 0 0 4px rgba(214,169,185,.10),
    0 3px 9px rgba(118,79,92,.06) !important;
}
#score-attack-root .score-attack-ranking::before,
#score-attack-root .score-attack-mode-card::before,
#score-attack-root .score-attack-me::before{
  color:#d3a24f !important;
  background:#fbf1f5 !important;
}

/* section heads */
#score-attack-root .score-attack-section-head strong,
#score-attack-root .score-attack-mode-head strong,
#score-attack-root .score-attack-me-head span{
  color:#8c6671 !important;
}
#score-attack-root .score-attack-mode-head small,
#score-attack-root .score-attack-me-head small,
#score-attack-root .score-attack-mode-head>span{
  color:#bb8c9e !important;
}

/* rows */
#score-attack-root .score-attack-row{
  border-bottom:1px solid rgba(208,172,126,.16) !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.48),rgba(249,239,243,.68)) !important;
}
#score-attack-root .score-attack-row.is-me{
  background:
    linear-gradient(90deg,rgba(247,205,220,.42),rgba(255,250,252,.86),rgba(241,204,151,.22)) !important;
  box-shadow:inset 3px 0 0 rgba(206,156,80,.52) !important;
}
#score-attack-root .score-attack-rank-no,
#score-attack-root .score-attack-row>strong{
  color:#916874 !important;
}
#score-attack-root .score-attack-row-main>b{
  color:#76545f !important;
}
#score-attack-root .score-attack-row-main em{
  color:#8b6171 !important;
  border:1px solid rgba(213,165,101,.34) !important;
  background:rgba(253,240,244,.92) !important;
}

/* tabs */
#score-attack-root .score-attack-tabs button{
  border:1px solid rgba(194,152,86,.28) !important;
  background:
    linear-gradient(180deg,rgba(255,252,253,.98),rgba(240,225,231,.95)) !important;
  color:#8b6a75 !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.42),
    0 1px 3px rgba(92,62,72,.06) !important;
}
#score-attack-root .score-attack-tabs button.active{
  border-color:rgba(195,148,72,.56) !important;
  background:
    linear-gradient(180deg,#fbe2ea 0%,#efc5d2 45%,#dfb165 100%) !important;
  color:#67453c !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,247,233,.38),
    inset 0 -2px 4px rgba(140,101,42,.12),
    0 2px 5px rgba(112,74,60,.10) !important;
}

/* personal record */
#score-attack-root .score-attack-me-badge{
  border:1px solid rgba(208,164,92,.36) !important;
  background:rgba(255,239,246,.88) !important;
  color:#a46e82 !important;
}
#score-attack-root .score-attack-me>strong{
  color:#9c6a7d !important;
}

/* start button: happy pink + gold */
#score-attack-root .score-attack-start{
  border:1px solid rgba(165,116,47,.62) !important;
  background:
    linear-gradient(180deg,#ffe2eb 0%,#f5c4d3 44%,#d2a553 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,243,234,.34),
    inset 0 -3px 5px rgba(120,79,28,.16),
    0 3px 7px rgba(116,73,89,.14) !important;
  color:#fffaf0 !important;
}
#score-attack-root .score-attack-start::before,
#score-attack-root .score-attack-start::after{
  color:rgba(255,248,224,.82) !important;
}
#score-attack-root .score-attack-start span{
  color:#fffaf4 !important;
  text-shadow:0 1px 2px rgba(112,67,42,.34) !important;
}

/* ranking/loading/empty text tone */
#score-attack-root .score-attack-loading,
#score-attack-root .score-attack-empty{
  color:#aa7f8e !important;
}


/* =========================================================
   SCORE ATTACK v213 - title logo swap
   ========================================================= */
#score-attack-root .score-attack-head{
  min-height:72px !important;
}
#score-attack-root .score-attack-head::after{
  display:none !important; /* 横線装飾を削除 */
}
#score-attack-root .score-attack-head-title-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  padding:0 46px 0 46px !important; /* 戻るボタン分を避ける */
}
#score-attack-root .score-attack-head-logo{
  display:block !important;
  width:min(280px,72vw) !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 4px rgba(132,92,101,.10)) !important;
}
#score-attack-root .score-attack-head-mark{
  display:none !important;
}

/* 難易度ボタンの補足テキストを完全に除去した後の見た目調整 */
#score-attack-root .score-attack-tabs button{
  min-height:56px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#score-attack-root .score-attack-tabs button b{
  display:none !important;
}
#score-attack-root .score-attack-tabs button small{
  display:block !important;
  font-size:13px !important;
  letter-spacing:.14em !important;
  line-height:1.1 !important;
}


/* SCORE ATTACK v216
   難易度選択枠上部の浮いて見える◇だけ非表示 */
#score-attack-root .score-attack-mode-card::before{
  content:none !important;
  display:none !important;
}


/* =========================================================
   SCORE ATTACK v217
   - タイトルを一回り大きく
   - 難易度選択枠の装飾を他2枠に合わせる
   - 小見出しの可読性を改善
   - ページ非スクロール維持
   ========================================================= */
#score-attack-root .score-attack-scroll{
  overflow:hidden !important;
}

#score-attack-root .score-attack-head{
  min-height:76px !important;
}
#score-attack-root .score-attack-head-title-logo{
  padding:0 44px 0 44px !important;
}
#score-attack-root .score-attack-head-logo{
  width:min(308px,78vw) !important;
  max-width:100% !important;
}

/* 小見出しを見やすいサイズへ */
#score-attack-root .score-attack-section-head small,
#score-attack-root .score-attack-mode-head small,
#score-attack-root .score-attack-me-head small,
#score-attack-root .score-attack-mode-head > span{
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
}
#score-attack-root .score-attack-section-head strong,
#score-attack-root .score-attack-mode-head strong,
#score-attack-root .score-attack-me-head span{
  font-size:14px !important;
  line-height:1.2 !important;
}
#score-attack-root .score-attack-me-badge,
#score-attack-root .score-attack-row-main em{
  font-size:10px !important;
}

/* 難易度選択カードの上中央装飾を、他2枠と同系統で復活 */
#score-attack-root .score-attack-mode-card::before{
  content:"◆" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  transform:translateX(-50%) !important;
  padding:0 7px !important;
  background:#fbf1f5 !important;
  color:#d3a24f !important;
  font-size:8px !important;
  line-height:14px !important;
  z-index:2 !important;
}

/* 難易度選択まわりの小文字も読みやすく */
#score-attack-root .score-attack-tabs button small{
  font-size:15px !important;
  line-height:1.1 !important;
  letter-spacing:.14em !important;
}
#score-attack-root .score-attack-tabs button{
  min-height:58px !important;
}

/* 余白を少しだけ整えて、拡大後も1画面に収める */
#score-attack-root .score-attack-ranking,
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  padding-top:10px !important;
}
@media (max-height:700px){
  #score-attack-root .score-attack-head-logo{
    width:min(292px,76vw) !important;
  }
  #score-attack-root .score-attack-section-head small,
  #score-attack-root .score-attack-mode-head small,
  #score-attack-root .score-attack-me-head small,
  #score-attack-root .score-attack-mode-head > span{
    font-size:10px !important;
  }
  #score-attack-root .score-attack-tabs button small{
    font-size:14px !important;
  }
}


/* =========================================================
   SCORE ATTACK v220
   難易度選択枠の上中央装飾が「浮いて見える」問題を修正。
   カード上辺に食い込む位置へ戻し、背景もカードと同調させる。
   ========================================================= */
#score-attack-root .score-attack-mode-card{
  margin-top:8px !important;
}
#score-attack-root .score-attack-mode-card::before{
  top:0 !important;
  transform:translate(-50%,-50%) !important;
  padding:0 6px !important;
  background:
    linear-gradient(180deg,rgba(255,251,252,.96),rgba(246,233,238,.96)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.45) !important;
}

/* 下の最高記録枠との間も少し詰めて違和感を軽減 */
#score-attack-root .score-attack-me{
  margin-top:8px !important;
}


/* =========================================================
   SCORE ATTACK v221
   難易度選択枠上部の◇から「白い台座」を完全除去。
   上下カードと同じ、枠線上に◇だけが乗る見え方へ統一。
   ========================================================= */
#score-attack-root .score-attack-mode-card::before{
  content:"◆" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  transform:translateX(-50%) !important;

  /* ここが原因だったため完全に無効化 */
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;

  color:#d3a24f !important;
  font-size:8px !important;
  line-height:14px !important;
  z-index:2 !important;
  pointer-events:none !important;
}


/* =========================================================
   SCORE ATTACK v222
   難易度選択枠の角が上にはみ出して見える問題を修正。
   枠全体を少しだけ下げて、区切り線の下に自然に収める。
   ========================================================= */
#score-attack-root .score-attack-mode-card{
  margin-top:14px !important;
}

/* 中央の◇はそのまま枠線の中央に見えるよう維持 */
#score-attack-root .score-attack-mode-card::before{
  top:-7px !important;
}


/* =========================================================
   SCORE ATTACK v224
   セクション間の中央装飾（▼/◆/◇）をすべて撤去して統一。
   対象：
   - ヘッダー下 → ランキング上
   - ランキング下 → 難易度選択上
   - 難易度選択下 → 最高記録上
   ========================================================= */
#score-attack-root .score-attack-ranking::before,
#score-attack-root .score-attack-mode-card::before,
#score-attack-root .score-attack-me::before{
  content:none !important;
  display:none !important;
}

/* 装飾を消した分の余白だけ軽く整える */
#score-attack-root .score-attack-ranking,
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  margin-top:8px !important;
}

/* =========================================================
   SCORE ATTACK v231 - MY BEST SCORE horizontal footer
   ========================================================= */
#score-attack-root .score-attack-me{
  display:grid !important;
  grid-template-columns:64px minmax(68px,auto) 54px minmax(105px,1fr) !important;
  align-items:center !important;
  gap:4px !important;
  padding:8px !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
}
#score-attack-root .score-attack-me-head>div{
  display:block !important;
}
#score-attack-root .score-attack-me-head span{
  display:block !important;
  margin:0 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  word-break:keep-all !important;
  font:700 8px/1.15 "Cinzel",serif !important;
  letter-spacing:.03em !important;
  color:#916874 !important;
}
#score-attack-root .score-attack-me>strong{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:18px !important;
  line-height:1 !important;
}
#score-attack-root .score-attack-my-party-label{
  display:none !important;
}
#score-attack-root #score-attack-my-party{
  min-width:0 !important;
}
#score-attack-root #score-attack-my-party .score-attack-party{
  justify-content:flex-start !important;
  gap:2px !important;
  margin:0 !important;
}
#score-attack-root #score-attack-my-party .score-attack-party span{
  flex:0 0 16px !important;
  width:16px !important;
  height:16px !important;
  border-radius:3px !important;
}
#score-attack-root .score-attack-start{
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  margin:0 !important;
  padding:0 12px !important;
}
#score-attack-root .score-attack-start span{
  white-space:nowrap !important;
  font-size:14px !important;
  letter-spacing:.10em !important;
}
#score-attack-root .score-attack-start::before{left:9px !important}
#score-attack-root .score-attack-start::after{right:9px !important}

@media (min-width:400px){
  #score-attack-root .score-attack-me{
    grid-template-columns:72px minmax(78px,auto) 62px minmax(116px,1fr) !important;
    gap:5px !important;
  }
  #score-attack-root .score-attack-me-head span{font-size:9px !important}
  #score-attack-root .score-attack-me>strong{font-size:20px !important}
  #score-attack-root #score-attack-my-party .score-attack-party span{
    flex-basis:18px !important;width:18px !important;height:18px !important;
  }
}

/* =========================================================
   SCORE ATTACK v232 - BEST SCORE three-row card
   1: title / 2: score + party / 3: challenge button
   ========================================================= */
#score-attack-root .score-attack-me{
  display:grid !important;
  grid-template-columns:auto auto !important;
  grid-template-areas:
    "best-title best-title"
    "best-score best-party"
    "best-button best-button" !important;
  justify-content:center !important;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:5px !important;
  padding:30px 10px 9px !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head{
  grid-area:best-title !important;
  display:block !important;
  position:absolute !important;
  left:10px !important;
  top:9px !important;
  justify-self:auto !important;
  margin:0 !important;
}
#score-attack-root .score-attack-me-head span{
  display:block !important;
  margin:0 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  word-break:keep-all !important;
  font:700 14px/1.2 "Cinzel",serif !important;
  letter-spacing:.10em !important;
  color:#916874 !important;
}
#score-attack-root .score-attack-me>strong{
  grid-area:best-score !important;
  justify-self:end !important;
  margin:0 !important;
  overflow:visible !important;
  font-size:23px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#score-attack-root .score-attack-my-party-label{
  display:none !important;
}
#score-attack-root #score-attack-my-party{
  grid-area:best-party !important;
  justify-self:start !important;
  min-width:0 !important;
}
#score-attack-root #score-attack-my-party .score-attack-party{
  justify-content:flex-start !important;
  gap:3px !important;
  margin:0 !important;
}
#score-attack-root #score-attack-my-party .score-attack-party span{
  flex:0 0 23px !important;
  width:23px !important;
  height:23px !important;
  border-radius:3px !important;
}
#score-attack-root .score-attack-start{
  grid-area:best-button !important;
  justify-self:center !important;
  width:174px !important;
  min-width:0 !important;
  height:35px !important;
  margin:1px 0 0 !important;
  padding:0 14px !important;
}
#score-attack-root .score-attack-start span{
  font-size:14px !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
}

@media (max-height:700px){
  #score-attack-root .score-attack-me{
    row-gap:4px !important;
    padding-top:28px !important;
    padding-bottom:7px !important;
  }
  #score-attack-root .score-attack-me-head{top:8px !important}
  #score-attack-root .score-attack-me>strong{font-size:21px !important}
  #score-attack-root #score-attack-my-party .score-attack-party span{
    flex-basis:21px !important;width:21px !important;height:21px !important;
  }
  #score-attack-root .score-attack-start{height:32px !important}
}

/* =========================================================
   SCORE ATTACK v235 - BEST SCORE heading alignment fix
   BEST SCOREを「難易度を選択」と同じカード内左上位置へ固定。
   ========================================================= */
#score-attack-root .score-attack-me-head{
  position:absolute !important;
  left:8px !important;
  top:10px !important;
  right:auto !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:start !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head>div{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-align:left !important;
  white-space:nowrap !important;
}
@media (max-height:700px){
  #score-attack-root .score-attack-me-head{
    top:10px !important;
  }
}

/* =========================================================
   SCORE ATTACK v236 - BEST SCORE layout hard reset
   - BEST SCORE: left aligned, same card inset as 難易度を選択
   - no absolute positioning
   - score / party on the second row
   - challenge button on the third row
   ========================================================= */
#score-attack-root .score-attack-me{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "best-title best-title"
    "best-score best-party"
    "best-button best-button" !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:8px !important;
  row-gap:5px !important;
  width:100% !important;
  min-height:98px !important;
  padding:10px 8px 8px !important;
  text-align:left !important;
  overflow:hidden !important;
}

#score-attack-root .score-attack-me-head{
  grid-area:best-title !important;
  position:static !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:stretch !important;
  align-self:start !important;
  transform:none !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head>div{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}
#score-attack-root .score-attack-me-head span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  color:#916874 !important;
  text-align:left !important;
  white-space:nowrap !important;
  transform:none !important;
}

#score-attack-root .score-attack-me>strong{
  grid-area:best-score !important;
  position:static !important;
  justify-self:end !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font:700 23px/1 "Cinzel",serif !important;
  letter-spacing:.03em !important;
  transform:none !important;
}

#score-attack-root #score-attack-my-party{
  grid-area:best-party !important;
  position:static !important;
  justify-self:start !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}
#score-attack-root #score-attack-my-party .score-attack-party{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
  margin:0 !important;
  padding:0 !important;
}
#score-attack-root #score-attack-my-party .score-attack-party span{
  flex:0 0 23px !important;
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  min-height:23px !important;
  border-radius:3px !important;
}

#score-attack-root .score-attack-my-party-label{
  display:none !important;
}

#score-attack-root .score-attack-start{
  grid-area:best-button !important;
  position:static !important;
  justify-self:center !important;
  align-self:center !important;
  width:174px !important;
  min-width:174px !important;
  max-width:174px !important;
  height:35px !important;
  min-height:35px !important;
  margin:0 !important;
  padding:0 14px !important;
  transform:none !important;
}
#score-attack-root .score-attack-start span{
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
}

@media (max-height:700px){
  #score-attack-root .score-attack-me{
    min-height:92px !important;
    padding:8px 8px 7px !important;
    row-gap:4px !important;
  }
  #score-attack-root .score-attack-me>strong{
    font-size:21px !important;
  }
  #score-attack-root #score-attack-my-party .score-attack-party span{
    flex-basis:21px !important;
    width:21px !important;
    height:21px !important;
    min-width:21px !important;
    min-height:21px !important;
  }
  #score-attack-root .score-attack-start{
    height:32px !important;
    min-height:32px !important;
  }
}

/* =========================================================
   SCORE ATTACK v122
   BEST SCORE欄を廃止し、挑戦するボタンのみ表示
   ========================================================= */
#score-attack-root .score-attack-me.score-attack-start-only{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:76px !important;
  padding:10px 12px !important;
}
#score-attack-root .score-attack-me.score-attack-start-only::before{
  display:none !important;
}
#score-attack-root .score-attack-me.score-attack-start-only .score-attack-me-head,
#score-attack-root .score-attack-me.score-attack-start-only > strong,
#score-attack-root .score-attack-me.score-attack-start-only .score-attack-my-party-label,
#score-attack-root .score-attack-me.score-attack-start-only #score-attack-my-party{
  display:none !important;
}
#score-attack-root .score-attack-me.score-attack-start-only .score-attack-start{
  width:min(270px,88%) !important;
  margin:0 auto !important;
}
@media (max-height:700px){
  #score-attack-root .score-attack-me.score-attack-start-only{
    min-height:62px !important;
    padding:8px 10px !important;
  }
  #score-attack-root .score-attack-me.score-attack-start-only .score-attack-start{
    height:30px !important;
  }
}


/* ============================================================
   LIMIT BREAK v79 — bulk upgrade + power-up cut-in
   ============================================================ */
.lb-execute-area{
  display:grid!important;
  gap:8px!important;
}
.lb-execute-bulk-btn{
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#a77a2f,#6f4a17)!important;
  border:1px solid rgba(225,191,119,.92)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 24px rgba(111,74,23,.22)!important;
}
.lb-execute-bulk-btn small{
  display:block;
  font-size:9px;
  letter-spacing:.18em;
  opacity:.8;
}
.lb-execute-bulk-btn strong{
  display:block;
  margin-top:3px;
  font-family:"Cinzel",serif;
  font-size:18px;
  letter-spacing:.12em;
}
.lb-execute-single-btn{
  min-height:40px!important;
  background:rgba(126,101,59,.72)!important;
}
.lb-bulk-confirm-hero{
  margin:12px 0;
  min-height:118px;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(145,111,52,.28);
  background:linear-gradient(135deg,rgba(246,231,193,.58),rgba(255,255,255,.72));
}
.lb-bulk-confirm-hero img{
  width:92px;
  height:112px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 7px 10px rgba(75,51,18,.18));
}
.lb-bulk-confirm-hero div{
  display:flex;
  min-width:0;
  flex-direction:column;
}
.lb-bulk-confirm-hero small{
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.2em;
  color:#a07a39;
}
.lb-bulk-confirm-hero strong{
  margin-top:5px;
  font-family:"Cinzel",serif;
  font-size:19px;
  color:#654717;
}
.lb-bulk-confirm-hero span{
  margin-top:5px;
  font-size:10px;
  color:#87704a;
}

.lb-powerup-effect{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:none;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  background:#f8f6f1;
  pointer-events:none;
}
.lb-powerup-effect.show{
  display:flex;
  animation:lbPowerupWhole 2.35s ease both;
}
.lb-powerup-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,233,168,.52),transparent 24%),
    radial-gradient(circle at 50% 50%,rgba(223,194,132,.34),transparent 52%),
    linear-gradient(180deg,#fffdf8,#f3efe6);
}
.lb-powerup-rays{
  position:absolute;
  left:50%;
  top:50%;
  width:120vmax;
  height:120vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,224,142,.18) 0 2deg,transparent 2deg 12deg);
  animation:lbPowerupRays 2.35s linear both;
}
.lb-powerup-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:220px;
  height:220px;
  border:1px solid rgba(255,221,139,.72);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);
  box-shadow:0 0 28px rgba(255,196,76,.38),inset 0 0 22px rgba(255,239,188,.2);
  opacity:0;
}
.lb-powerup-effect.show .ring-a{animation:lbPowerupRing 1.15s .3s ease-out both}
.lb-powerup-effect.show .ring-b{animation:lbPowerupRing 1.35s .55s ease-out both}
.lb-powerup-image-wrap{
  position:absolute;
  inset:5% 0 17%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:3;
}
.lb-powerup-image-wrap img{
  width:min(92vw,500px);
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  transform:translateY(22px) scale(.92);
  filter:brightness(.9) drop-shadow(0 16px 25px rgba(80,58,24,.22));
}
.lb-powerup-effect.show .lb-powerup-image-wrap img{
  animation:lbPowerupCharacter 2.2s .08s cubic-bezier(.16,.8,.2,1) both;
}
.lb-powerup-flash{
  position:absolute;
  inset:0;
  z-index:4;
  background:#fff6d9;
  opacity:0;
}
.lb-powerup-effect.show .lb-powerup-flash{
  animation:lbPowerupFlash 1.55s .52s ease-out both;
}
.lb-powerup-copy{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:9%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#fff7dc;
  text-shadow:0 2px 8px rgba(90,67,29,.38),0 0 12px rgba(230,180,75,.26);
  opacity:0;
  transform:translateY(12px);
}
.lb-powerup-effect.show .lb-powerup-copy{
  animation:lbPowerupCopy 1.45s .68s ease-out both;
}
.lb-powerup-copy small{
  font-family:"Cinzel",serif;
  font-size:9px;
  letter-spacing:.42em;
  color:#dbbb70;
}
.lb-powerup-copy strong{
  margin-top:5px;
  font-family:"Cinzel",serif;
  font-size:clamp(28px,8vw,42px);
  letter-spacing:.12em;
}
.lb-powerup-copy span{
  margin-top:7px;
  font-size:14px;
  letter-spacing:.18em;
}
.lb-powerup-copy b{
  margin-top:7px;
  font-family:"Cinzel",serif;
  font-size:18px;
  letter-spacing:.12em;
  color:#f3d486;
}
@keyframes lbPowerupWhole{
  0%{opacity:0}
  8%,88%{opacity:1}
  100%{opacity:0}
}
@keyframes lbPowerupRays{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(.7);opacity:0}
  25%{opacity:1}
  100%{transform:translate(-50%,-50%) rotate(22deg) scale(1.1);opacity:.28}
}
@keyframes lbPowerupRing{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  22%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}
}
@keyframes lbPowerupCharacter{
  0%{opacity:0;transform:translateY(22px) scale(.92);filter:brightness(.72)}
  25%{opacity:1;transform:translateY(0) scale(1);filter:brightness(.98)}
  48%{filter:brightness(1.8) drop-shadow(0 0 24px rgba(255,221,135,.72))}
  65%,100%{opacity:1;transform:translateY(0) scale(1.035);filter:brightness(1.04) drop-shadow(0 0 16px rgba(255,205,95,.30))}
}
@keyframes lbPowerupFlash{
  0%,30%{opacity:0}
  38%{opacity:.82}
  46%{opacity:0}
  55%{opacity:.42}
  72%,100%{opacity:0}
}
@keyframes lbPowerupCopy{
  0%{opacity:0;transform:translateY(12px)}
  25%,82%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-5px)}
}


/* ============================================================
   LIMIT BREAK v80 — button parity / readability
   ============================================================ */
.lb-execute-area{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

.lb-execute-btn,
.lb-execute-bulk-btn,
.lb-execute-single-btn{
  width:100%!important;
  min-height:54px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 16px!important;
  border-radius:14px!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}

.lb-execute-bulk-btn{
  background:linear-gradient(180deg,#a87824,#875b14)!important;
  color:#fffaf0!important;
  border:1px solid #b98932!important;
  box-shadow:0 4px 12px rgba(93,61,15,.16)!important;
}

.lb-execute-single-btn{
  background:#8a7651!important;
  color:#fffdf8!important;
  border:1px solid #9d875f!important;
  box-shadow:0 4px 12px rgba(76,59,35,.12)!important;
}

.lb-execute-note{
  margin-top:2px!important;
  color:#77664a!important;
  font-size:10px!important;
  line-height:1.5!important;
  text-align:center!important;
  opacity:1!important;
}

/* 確認画面上部：金文字＋白背景をやめ、濃い茶系でコントラストを確保 */
.lb-confirm-message-strong{
  color:#4d3d29!important;
  font-weight:700!important;
  font-size:15px!important;
  letter-spacing:.04em!important;
  text-shadow:none!important;
}

.lb-bulk-confirm-hero-strong{
  background:#f3ead8!important;
  border:1px solid rgba(115,83,34,.34)!important;
  box-shadow:none!important;
}
.lb-bulk-confirm-hero-strong small{
  color:#745522!important;
  font-weight:700!important;
}
.lb-bulk-confirm-hero-strong strong{
  color:#3f3121!important;
  text-shadow:none!important;
}
.lb-bulk-confirm-hero-strong span{
  color:#5f5039!important;
  font-weight:600!important;
}

/* 単発側の「今回解放される効果」も白/金の低コントラストを解消 */
.lb-next-bonus{
  background:#f3ead8!important;
  border:1px solid rgba(115,83,34,.30)!important;
  color:#403321!important;
  box-shadow:none!important;
}
.lb-next-bonus-label{
  color:#6e542a!important;
  font-weight:700!important;
}
.lb-next-bonus-title{
  color:#3c3020!important;
  font-weight:700!important;
  text-shadow:none!important;
}
.lb-next-bonus-detail{
  color:#5d4d37!important;
  opacity:1!important;
  text-shadow:none!important;
}


/* ============================================================
   LIMIT BREAK v81 — readability / Mincho / no confirm image
   ============================================================ */

/* 1枚目の2ボタン：文字コントラストを強化 */
.lb-execute-bulk-btn{
  background:#9f6d16!important;
  color:#fffdf6!important;
  border:1px solid #b17c22!important;
  text-shadow:0 1px 1px rgba(74,46,7,.42)!important;
}
.lb-execute-single-btn{
  background:#786748!important;
  color:#fffdf8!important;
  border:1px solid #8f7a56!important;
  text-shadow:0 1px 1px rgba(58,44,25,.34)!important;
}
.lb-execute-bulk-btn,
.lb-execute-single-btn{
  font-family:"Noto Serif JP",serif!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  opacity:1!important;
}

/* 確認モーダル内を明朝へ統一 */
#limitbreak-confirm-modal,
#limitbreak-confirm-modal *,
#limitbreak-modal,
#limitbreak-modal *{
  font-family:"Noto Serif JP",serif!important;
}

/* 一括確認上部：キャラ画像を使わず、文字だけで中央構成 */
.lb-bulk-confirm-hero.no-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:110px!important;
  grid-template-columns:none!important;
  padding:14px 18px!important;
}
.lb-bulk-confirm-hero.no-image img{
  display:none!important;
}
.lb-bulk-confirm-hero.no-image > div{
  width:100%!important;
  align-items:center!important;
  text-align:center!important;
}
.lb-bulk-confirm-hero.no-image small{
  font-family:"Cinzel","Noto Serif JP",serif!important;
  color:#745522!important;
}
.lb-bulk-confirm-hero.no-image strong{
  font-family:"Noto Serif JP",serif!important;
  font-size:22px!important;
  letter-spacing:.04em!important;
}
.lb-bulk-confirm-hero.no-image span{
  margin-top:8px!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:12px!important;
  color:#58462d!important;
}

/* 一括確認の実行ボタンも明朝＆見やすく */
#lb-confirm-ok-btn{
  font-family:"Noto Serif JP",serif!important;
  font-weight:700!important;
  color:#3c2a10!important;
  text-shadow:none!important;
}


/* ============================================================
   LIMIT BREAK v82 — bulk confirmation effect list
   ============================================================ */
.lb-bulk-effect-list{
  width:100%;
  margin-top:12px;
  display:grid;
  gap:7px;
}
.lb-bulk-effect-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding-top:7px;
  border-top:1px solid rgba(105,77,35,.16);
  text-align:left;
}
.lb-bulk-effect-row:first-child{
  border-top:0;
  padding-top:0;
}
.lb-bulk-effect-row strong{
  font-family:"Noto Serif JP",serif!important;
  font-size:12px!important;
  color:#5d451f!important;
  letter-spacing:.03em!important;
}
.lb-bulk-effect-row span{
  font-family:"Noto Serif JP",serif!important;
  font-size:11px!important;
  line-height:1.55!important;
  color:#463726!important;
  font-weight:500!important;
  letter-spacing:.02em!important;
}


/* ============================================================
   LIMIT BREAK v83 — bulk confirmation matches single layout
   ============================================================ */

/* 一括側も通常1段階強化の「今回解放される限界突破効果」と同じカードを使う */
.lb-bulk-next-bonus{
  margin:12px 0!important;
  padding:12px 14px!important;
  text-align:left!important;
}
.lb-bulk-next-bonus .lb-next-bonus-label{
  margin-bottom:7px!important;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:.04em!important;
}
.lb-bulk-next-row{
  padding:7px 0!important;
  border-top:1px solid rgba(115,83,34,.13)!important;
}
.lb-bulk-next-row:first-of-type{
  border-top:0!important;
  padding-top:2px!important;
}
.lb-bulk-next-row .lb-next-bonus-title{
  margin:0!important;
  font-size:12px!important;
  line-height:1.45!important;
  letter-spacing:.01em!important;
}
.lb-bulk-next-row .lb-next-bonus-detail{
  margin-top:3px!important;
  font-size:9px!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}

/* v81/v82の大きい一括専用ヒーローは確認画面では使用しない */
.lb-bulk-confirm-hero{
  display:none!important;
}

/* 一括でも通常強化と同じLv変化ブロックのサイズ感 */
#limitbreak-confirm-modal .lb-confirm-level{
  font-family:"Noto Serif JP",serif!important;
}
#limitbreak-confirm-modal .lb-confirm-level span{
  font-size:11px!important;
}
#limitbreak-confirm-modal .lb-confirm-level strong{
  font-family:"Noto Serif JP",serif!important;
  font-size:15px!important;
  letter-spacing:.03em!important;
}


/* ============================================================
   LIMIT BREAK v84 — confirmation fits one screen
   一括/単発共通: キャンセルまで画面内。情報過多時は3段階目以降のみスクロール。
   ============================================================ */

#limitbreak-confirm-modal{
  overflow:hidden!important;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom))!important;
}

#limitbreak-confirm-modal .modal-content,
#limitbreak-confirm-modal .modal-card,
#limitbreak-confirm-modal .modal-inner{
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
}

/* 実際の確認カード本体を縦flexにして、外側スクロールを発生させない */
#limitbreak-confirm-modal > div,
#limitbreak-confirm-modal .modal-box{
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
}

/* 確認画面の余白を詰める */
#limitbreak-confirm-modal .lb-confirm-message{
  margin:0 0 8px!important;
  font-size:14px!important;
  line-height:1.35!important;
}

#limitbreak-confirm-modal .lb-next-bonus{
  margin:8px 0!important;
  padding:9px 12px!important;
}

#limitbreak-confirm-modal .lb-next-bonus-label{
  margin-bottom:5px!important;
  font-size:9px!important;
}

#limitbreak-confirm-modal .lb-next-bonus-title{
  font-size:11.5px!important;
  line-height:1.35!important;
}

#limitbreak-confirm-modal .lb-next-bonus-detail{
  margin-top:2px!important;
  font-size:8.5px!important;
  line-height:1.35!important;
}

#limitbreak-confirm-modal .lb-bulk-next-row{
  padding:5px 0!important;
}

#limitbreak-confirm-modal .lb-confirm-consume-box{
  margin:8px 0!important;
}

#limitbreak-confirm-modal .lb-confirm-consume-title{
  min-height:27px!important;
  padding:6px 10px!important;
  font-size:10px!important;
}

#limitbreak-confirm-modal .lb-confirm-consume-row{
  min-height:34px!important;
  padding:7px 10px!important;
}

#limitbreak-confirm-modal .lb-confirm-consume-name,
#limitbreak-confirm-modal .lb-confirm-consume-count{
  font-size:11px!important;
}

#limitbreak-confirm-modal .lb-confirm-level{
  min-height:42px!important;
  margin:7px 0!important;
  padding:8px 10px!important;
}

#limitbreak-confirm-modal .lb-confirm-warning{
  margin:5px 0 8px!important;
  font-size:8.5px!important;
  line-height:1.35!important;
}

#limitbreak-confirm-modal #lb-confirm-ok-btn{
  min-height:46px!important;
  height:46px!important;
  margin-top:6px!important;
  font-size:14px!important;
}

#limitbreak-confirm-modal .modal-cancel-btn,
#limitbreak-confirm-modal .btn-cancel,
#limitbreak-confirm-modal button:last-child{
  min-height:38px!important;
  margin-top:5px!important;
  font-size:13px!important;
}

/* 一括3段階目以降のみ内部スクロール */
.lb-bulk-next-scroll{
  max-height:92px!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  margin-top:4px!important;
  padding-right:4px!important;
  border-top:1px solid rgba(115,83,34,.13)!important;
}

.lb-bulk-next-scroll .lb-bulk-next-row:first-child{
  border-top:0!important;
}

.lb-bulk-next-scroll::-webkit-scrollbar{
  width:3px;
}
.lb-bulk-next-scroll::-webkit-scrollbar-thumb{
  background:rgba(112,82,40,.28);
  border-radius:999px;
}

/* 低い端末ではさらに少し詰める */
@media (max-height:700px){
  #limitbreak-confirm-modal{
    padding:8px!important;
  }
  #limitbreak-confirm-modal .lb-next-bonus{
    margin:6px 0!important;
    padding:7px 10px!important;
  }
  #limitbreak-confirm-modal .lb-confirm-consume-row{
    min-height:31px!important;
    padding:5px 9px!important;
  }
  #limitbreak-confirm-modal .lb-confirm-level{
    min-height:38px!important;
    margin:5px 0!important;
    padding:6px 9px!important;
  }
  #limitbreak-confirm-modal #lb-confirm-ok-btn{
    min-height:42px!important;
    height:42px!important;
  }
  .lb-bulk-next-scroll{
    max-height:72px!important;
  }
}


/* ============================================================
   LIMIT BREAK v85 — primary action text contrast
   ============================================================ */
.lb-execute-bulk-btn,
.lb-execute-single-btn{
  color:#fffaf0!important;
  -webkit-text-fill-color:#fffaf0!important;
  text-shadow:0 1px 2px rgba(48,30,8,.55)!important;
  opacity:1!important;
}

.lb-execute-bulk-btn:disabled,
.lb-execute-single-btn:disabled{
  color:rgba(255,250,240,.72)!important;
  -webkit-text-fill-color:rgba(255,250,240,.72)!important;
}


/* ============================================================
   LIMIT BREAK v87 — strengthen modal fit without scroll
   強化する画面(素材一覧＋効果一覧＋ボタン)を1画面に収める
   ============================================================ */

/* モーダル全体の上下余白を少し圧縮 */
#limitbreak-modal{
  overflow:hidden!important;
  padding:
    max(10px, env(safe-area-inset-top))
    12px
    max(10px, env(safe-area-inset-bottom))!important;
}

/* カード本体を画面内に収める */
#limitbreak-modal .modal-content,
#limitbreak-modal .modal-card,
#limitbreak-modal .modal-inner,
#limitbreak-modal > div,
#limitbreak-modal .modal-box{
  max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
}

/* タイトル・説明 */
#limitbreak-modal h2,
#limitbreak-modal .modal-title{
  margin-bottom:8px!important;
}
#limitbreak-modal .lb-description,
#limitbreak-modal .lb-desc,
#limitbreak-modal .modal-lead{
  margin-bottom:8px!important;
  font-size:11px!important;
  line-height:1.5!important;
}

/* セクション間余白 */
#limitbreak-modal .lb-materials-box,
#limitbreak-modal .lb-list-wrap,
#limitbreak-modal .lb-stage-list,
#limitbreak-modal .lb-panel{
  margin-top:8px!important;
  margin-bottom:8px!important;
}

/* 必要素材ボックスを圧縮 */
#limitbreak-modal .lb-materials-box,
#limitbreak-modal .lb-materials{
  padding:10px 12px!important;
  border-radius:14px!important;
}
#limitbreak-modal .lb-materials-title{
  margin-bottom:6px!important;
  font-size:11px!important;
}
#limitbreak-modal .lb-material-row{
  min-height:38px!important;
  padding:5px 0!important;
  gap:8px!important;
}
#limitbreak-modal .lb-material-row img,
#limitbreak-modal .lb-material-icon{
  width:28px!important;
  height:28px!important;
}
#limitbreak-modal .lb-material-name{
  font-size:11px!important;
  line-height:1.35!important;
}
#limitbreak-modal .lb-material-count{
  font-size:11px!important;
  line-height:1.35!important;
}

/* 効果一覧カード圧縮 */
#limitbreak-modal .lb-list-wrap,
#limitbreak-modal .lb-stage-list{
  padding:10px 10px!important;
  border-radius:14px!important;
}
#limitbreak-modal .lb-stage-row{
  min-height:48px!important;
  padding:7px 8px!important;
}
#limitbreak-modal .lb-stage-row + .lb-stage-row{
  margin-top:2px!important;
}
#limitbreak-modal .lb-stage-label{
  font-size:11px!important;
  min-width:36px!important;
}
#limitbreak-modal .lb-stage-effect,
#limitbreak-modal .lb-stage-desc{
  font-size:10.5px!important;
  line-height:1.4!important;
}
#limitbreak-modal .lb-stage-badge,
#limitbreak-modal .lb-stage-state,
#limitbreak-modal .lb-unlock-pill{
  min-width:64px!important;
  height:28px!important;
  padding:0 10px!important;
  font-size:10px!important;
  border-radius:999px!important;
}

/* アクションボタンエリアを小さくしても視認性確保 */
#limitbreak-modal .lb-execute-area{
  gap:8px!important;
  margin-top:10px!important;
}
#limitbreak-modal .lb-execute-btn,
#limitbreak-modal .lb-execute-bulk-btn,
#limitbreak-modal .lb-execute-single-btn{
  min-height:48px!important;
  height:48px!important;
  font-size:14px!important;
}
#limitbreak-modal .lb-execute-note{
  margin-top:0!important;
  font-size:9px!important;
  line-height:1.35!important;
}

/* キャンセルまで確実に見えるよう下部も少し圧縮 */
#limitbreak-modal .modal-cancel-btn,
#limitbreak-modal .btn-cancel,
#limitbreak-modal button:last-child{
  min-height:36px!important;
  margin-top:6px!important;
  font-size:13px!important;
}

/* 画面高さが低い端末向けの追加圧縮 */
@media (max-height: 760px){
  #limitbreak-modal{
    padding:8px 10px!important;
  }
  #limitbreak-modal .lb-materials-box,
  #limitbreak-modal .lb-materials{
    padding:8px 10px!important;
  }
  #limitbreak-modal .lb-material-row{
    min-height:34px!important;
    padding:4px 0!important;
  }
  #limitbreak-modal .lb-material-row img,
  #limitbreak-modal .lb-material-icon{
    width:24px!important;
    height:24px!important;
  }
  #limitbreak-modal .lb-list-wrap,
  #limitbreak-modal .lb-stage-list{
    padding:8px!important;
  }
  #limitbreak-modal .lb-stage-row{
    min-height:44px!important;
    padding:6px!important;
  }
  #limitbreak-modal .lb-stage-effect,
  #limitbreak-modal .lb-stage-desc{
    font-size:10px!important;
  }
  #limitbreak-modal .lb-stage-badge,
  #limitbreak-modal .lb-stage-state,
  #limitbreak-modal .lb-unlock-pill{
    min-width:60px!important;
    height:26px!important;
    font-size:9px!important;
  }
  #limitbreak-modal .lb-execute-btn,
  #limitbreak-modal .lb-execute-bulk-btn,
  #limitbreak-modal .lb-execute-single-btn{
    min-height:44px!important;
    height:44px!important;
    font-size:13.5px!important;
  }
  #limitbreak-modal .modal-cancel-btn,
  #limitbreak-modal .btn-cancel,
  #limitbreak-modal button:last-child{
    min-height:34px!important;
    font-size:12.5px!important;
  }
}


/* ============================================================
   LIMIT BREAK v88 — TRUE one-screen strengthen layout
   v87では実DOM(class名)と一部selectorが噛み合っていなかったため、
   実際の lb-recipe-* / lb-bonus-* を直接圧縮する。
   ============================================================ */

/* 画面を最大限使う */
#limitbreak-modal{
  padding:
    max(6px, env(safe-area-inset-top))
    8px
    max(6px, env(safe-area-inset-bottom))!important;
}

#limitbreak-modal .modal{
  width:min(94vw,390px)!important;
  height:min(96dvh,760px)!important;
  max-height:96dvh!important;
  overflow:hidden!important;
}

#limitbreak-modal .modal-inner{
  height:100%!important;
  min-height:0!important;
  padding:12px 12px 9px!important;
  overflow:hidden!important;
}

/* タイトル・説明を詰める */
#limitbreak-modal .modal h2{
  margin:0 0 3px!important;
  font-size:17px!important;
  line-height:1.25!important;
}

#limitbreak-modal .lb-modal-desc{
  margin:0 0 7px!important;
  font-size:9.5px!important;
  line-height:1.4!important;
}

/* 中身はスクロールさせず、全要素を同一画面に収める */
#limitbreak-modal .lb-material-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0 2px 4px!important;
}

/* ===== 必要素材 ===== */
#limitbreak-modal .lb-recipe-box{
  margin:0 0 7px!important;
  padding:7px 9px!important;
  border-radius:11px!important;
}

#limitbreak-modal .lb-recipe-title{
  margin:0 0 3px!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}

#limitbreak-modal .lb-recipe-row{
  grid-template-columns:28px minmax(0,1fr) auto!important;
  gap:6px!important;
  min-height:31px!important;
  padding:3px 0!important;
}

#limitbreak-modal .lb-recipe-icon{
  width:24px!important;
  height:24px!important;
}

#limitbreak-modal .lb-recipe-icon img{
  width:24px!important;
  height:24px!important;
}

#limitbreak-modal .lb-recipe-name{
  font-size:10.5px!important;
  line-height:1.25!important;
}

#limitbreak-modal .lb-recipe-count{
  font-size:10.5px!important;
  line-height:1.2!important;
}

/* ===== Lv.1〜4 効果一覧 ===== */
#limitbreak-modal .lb-bonus-box{
  margin:0 0 7px!important;
  padding:7px 9px!important;
  border-radius:11px!important;
}

#limitbreak-modal .lb-bonus-box-title{
  margin:0 0 3px!important;
  font-size:8.5px!important;
  line-height:1.2!important;
}

#limitbreak-modal .lb-bonus-row{
  grid-template-columns:36px minmax(0,1fr) auto!important;
  gap:5px!important;
  min-height:39px!important;
  padding:4px 3px!important;
}

#limitbreak-modal .lb-bonus-row.next{
  margin:1px 0!important;
  min-height:41px!important;
  padding:4px 5px!important;
  border-radius:8px!important;
}

#limitbreak-modal .lb-bonus-level{
  font-size:9.5px!important;
}

#limitbreak-modal .lb-bonus-title{
  margin:0!important;
  font-size:10px!important;
  line-height:1.25!important;
}

/* 現在の画面では summary が本文として見えているためこちらも圧縮 */
#limitbreak-modal .lb-bonus-summary{
  margin:0!important;
  font-size:9px!important;
  line-height:1.25!important;
}

#limitbreak-modal .lb-bonus-state{
  min-width:52px!important;
  min-height:23px!important;
  padding:3px 6px!important;
  font-size:8px!important;
}

/* ===== 実行ボタン ===== */
#limitbreak-modal .lb-execute-area{
  margin-top:6px!important;
  gap:6px!important;
}

#limitbreak-modal .lb-execute-btn,
#limitbreak-modal .lb-execute-bulk-btn,
#limitbreak-modal .lb-execute-single-btn{
  width:100%!important;
  min-height:40px!important;
  height:40px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:12.5px!important;
}

#limitbreak-modal .lb-execute-note{
  margin:0!important;
  font-size:8px!important;
  line-height:1.25!important;
}

/* キャンセルも必ず最下部に固定して見える */
#limitbreak-modal .btn-cancel-txt{
  flex:0 0 auto!important;
  min-height:31px!important;
  margin:0!important;
  padding:7px 8px 2px!important;
  font-size:12px!important;
  line-height:1.2!important;
}

/* さらに縦が小さい端末 */
@media (max-height:720px){
  #limitbreak-modal .modal{
    height:97dvh!important;
    max-height:97dvh!important;
  }

  #limitbreak-modal .modal-inner{
    padding:9px 10px 7px!important;
  }

  #limitbreak-modal .lb-modal-desc{
    margin-bottom:5px!important;
    font-size:9px!important;
  }

  #limitbreak-modal .lb-recipe-box{
    margin-bottom:5px!important;
    padding:5px 8px!important;
  }

  #limitbreak-modal .lb-recipe-row{
    min-height:28px!important;
    padding:2px 0!important;
  }

  #limitbreak-modal .lb-recipe-icon,
  #limitbreak-modal .lb-recipe-icon img{
    width:21px!important;
    height:21px!important;
  }

  #limitbreak-modal .lb-bonus-box{
    margin-bottom:5px!important;
    padding:5px 7px!important;
  }

  #limitbreak-modal .lb-bonus-row{
    min-height:35px!important;
    padding:3px 2px!important;
  }

  #limitbreak-modal .lb-bonus-row.next{
    min-height:37px!important;
    padding:3px 4px!important;
  }

  #limitbreak-modal .lb-execute-btn,
  #limitbreak-modal .lb-execute-bulk-btn,
  #limitbreak-modal .lb-execute-single-btn{
    min-height:37px!important;
    height:37px!important;
    font-size:12px!important;
  }

  #limitbreak-modal .btn-cancel-txt{
    min-height:28px!important;
    padding-top:5px!important;
  }
}


/* ============================================================
   LIMIT BREAK v89 — seamless transition into power-up effect
   決定直後に白カバーを表示し、キャラ一覧の瞬間表示を防ぐ。
   ============================================================ */
.lb-powerup-effect.preparing{
  display:flex!important;
  opacity:1!important;
  background:#f8f6f1!important;
  pointer-events:auto!important;
}
.lb-powerup-effect.preparing .lb-powerup-bg{
  opacity:1!important;
}
.lb-powerup-effect.preparing .lb-powerup-rays,
.lb-powerup-effect.preparing .lb-powerup-ring,
.lb-powerup-effect.preparing .lb-powerup-image-wrap,
.lb-powerup-effect.preparing .lb-powerup-flash,
.lb-powerup-effect.preparing .lb-powerup-copy{
  opacity:0!important;
}
.lb-powerup-effect.preparing::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(159,109,22,.20);
  box-shadow:0 0 0 10px rgba(184,136,51,.05),0 0 28px rgba(184,136,51,.12);
  animation:lbPreparingPulse .8s ease-in-out infinite alternate;
}
@keyframes lbPreparingPulse{
  from{transform:translate(-50%,-50%) scale(.78);opacity:.35}
  to{transform:translate(-50%,-50%) scale(1.08);opacity:.72}
}


/* ============================================================
   TEN GACHA RESULT v90 — footer buttons horizontal 50 / 50
   ============================================================ */
#ten-result-modal .ten-result-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  align-items:stretch!important;
}

#ten-result-modal .ten-result-again-btn,
#ten-result-modal .ten-result-close-btn{
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:7px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  font-family:"Noto Serif JP",serif!important;
}

#ten-result-modal .ten-result-again-btn{
  gap:4px!important;
}

#ten-result-modal .ten-result-again-btn .btn-gacha-gem-icon{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}


/* ============================================================
   TEN GACHA RESULT v91 — button order / retry button 2 lines
   ============================================================ */

/* 左: 戻る / 右: もう一度10回引く */
#ten-result-modal .ten-result-close-btn{
  grid-column:1!important;
  grid-row:1!important;
}

#ten-result-modal .ten-result-again-btn{
  grid-column:2!important;
  grid-row:1!important;
  white-space:normal!important;
  flex-direction:column!important;
  gap:1px!important;
  text-align:center!important;
  line-height:1.2!important;
}

#ten-result-modal .ten-result-again-btn .btn-gacha-gem-icon{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  margin-right:2px!important;
}

#ten-result-modal .ten-result-again-btn .btn-gacha-costline{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  white-space:nowrap!important;
}

#ten-result-modal .ten-result-again-btn .btn-gacha-mainline{
  display:block!important;
  white-space:nowrap!important;
}


/* ============================================================
   SPECIAL STAGE: 楽園 -ノア- / 9 PIECE PANEL v98
   ============================================================ */
.noah-piece-overlay{
  position:fixed;
  inset:0;
  z-index:145000;
  display:none;
  align-items:stretch;
  justify-content:center;
  background:rgba(238,233,223,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.noah-piece-overlay.active{display:flex}

.noah-piece-screen{
  position:relative;
  width:100%;
  max-width:430px;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.98),rgba(246,241,231,.96) 44%,rgba(232,224,210,.96));
  color:#59482e;
  font-family:"Noto Serif JP",serif;
}
.noah-piece-head{
  flex:0 0 auto;
  padding:max(18px,env(safe-area-inset-top)) 18px 10px;
  display:grid;
  grid-template-columns:64px 1fr 64px;
  align-items:center;
  border-bottom:1px solid rgba(125,95,46,.16);
  background:rgba(255,253,247,.76);
}
.noah-piece-back{
  appearance:none;
  border:0;
  background:transparent;
  color:#8b6d3b;
  font:500 12px/1 "Noto Serif JP",serif;
  text-align:left;
  padding:8px 0;
}
.noah-piece-title{
  text-align:center;
}
.noah-piece-title small{
  display:block;
  margin-bottom:3px;
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.25em;
  color:#b39357;
}
.noah-piece-title strong{
  display:block;
  font-size:18px;
  font-weight:500;
  letter-spacing:.12em;
  color:#5e4827;
}
.noah-piece-ticket{
  text-align:right;
  font-size:9px;
  line-height:1.3;
  color:#8b744d;
  white-space:nowrap;
}
.noah-piece-ticket b{
  margin-left:3px;
  font-family:"Cinzel",serif;
  font-size:13px;
  color:#6e5125;
}

.noah-piece-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px 18px;
}
.noah-piece-lead{
  margin-bottom:10px;
  text-align:center;
}
.noah-piece-lead .en{
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.25em;
  color:#b29762;
}
.noah-piece-lead h2{
  margin-top:3px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.12em;
  color:#604b2c;
}
.noah-piece-lead p{
  margin-top:5px;
  font-size:9.5px;
  line-height:1.55;
  color:rgba(91,72,44,.62);
}

.noah-piece-progress{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  margin-bottom:10px;
}
.noah-piece-progress strong{
  font-family:"Cinzel",serif;
  font-size:24px;
  font-weight:500;
  color:#6e542a;
}
.noah-piece-progress span{
  font-family:"Cinzel",serif;
  font-size:11px;
  color:#aa8c57;
}
.noah-piece-progress-label{
  font-size:9px!important;
  font-family:"Noto Serif JP",serif!important;
  letter-spacing:.08em;
}

.noah-puzzle-frame{
  position:relative;
  width:min(100%,340px);
  aspect-ratio:1 / 1;
  margin:0 auto;
  padding:5px;
  border:1px solid rgba(154,119,59,.34);
  background:rgba(255,255,255,.56);
  box-shadow:
    0 10px 30px rgba(80,61,29,.12),
    inset 0 0 0 1px rgba(255,255,255,.8);
}
.noah-puzzle-grid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:2px;
  overflow:hidden;
  background:rgba(85,67,99,.16);
}
.noah-puzzle-piece{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background-image:url("../images/noah.webp");
  background-repeat:no-repeat;
  background-size:300% 300%;
  opacity:1;
  transition:opacity .35s ease,filter .35s ease,transform .35s ease;
}
.noah-puzzle-piece.locked{
  background-image:
    linear-gradient(145deg,rgba(231,227,235,.98),rgba(198,193,211,.98));
}
.noah-puzzle-piece.locked::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.52),transparent 33%),
    linear-gradient(135deg,transparent 49%,rgba(118,100,140,.10) 50%,transparent 51%);
}
.noah-puzzle-piece.locked::after{
  content:"✦";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(105,87,127,.30);
  font-family:"Cinzel",serif;
  font-size:16px;
}
.noah-puzzle-piece.open{
  animation:noahPieceOpen .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes noahPieceOpen{
  0%{opacity:0;filter:brightness(2.2);transform:scale(.92)}
  100%{opacity:1;filter:brightness(1);transform:scale(1)}
}

.noah-piece-note{
  margin:10px auto 0;
  max-width:340px;
  text-align:center;
  font-size:9px;
  line-height:1.55;
  color:rgba(89,70,42,.58);
}
.noah-piece-actions{
  flex:0 0 auto;
  padding:10px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(125,95,46,.15);
  background:rgba(255,253,247,.92);
}
.noah-piece-challenge{
  width:100%;
  min-height:54px;
  border:1px solid rgba(170,128,49,.62);
  border-radius:12px;
  background:linear-gradient(180deg,#c29a4b,#9c742b);
  color:#fffdf7;
  box-shadow:0 6px 18px rgba(105,74,24,.16);
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  text-shadow:0 1px 2px rgba(63,42,9,.45);
}
.noah-piece-challenge small{
  display:block;
  margin-bottom:2px;
  font-size:8px;
  font-weight:400;
  letter-spacing:.10em;
  opacity:.82;
}
.noah-piece-challenge:disabled{
  background:#b9ad96;
  border-color:#c7bda9;
  color:rgba(255,255,255,.72);
  box-shadow:none;
  text-shadow:none;
}
.noah-piece-complete{
  display:none;
  margin-top:8px;
  text-align:center;
  font-size:10px;
  letter-spacing:.08em;
  color:#786032;
}
.noah-piece-complete.show{display:block}

@media(max-height:700px){
  .noah-piece-body{padding-top:9px}
  .noah-piece-lead p{display:none}
  .noah-piece-progress{margin-bottom:6px}
  .noah-puzzle-frame{width:min(100%,300px)}
  .noah-piece-actions{padding-top:7px}
  .noah-piece-challenge{min-height:46px}
}


/* ============================================================
   Noah special stage card watermark v100
   ============================================================ */
.noah-stage-entry-card{
  position:relative;
  overflow:hidden;
}
.noah-stage-entry-card::before{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:92px;
  height:92px;
  background-image:url("../images/noah_stage_watermark.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.18;
  pointer-events:none;
  filter:grayscale(.08) brightness(1.05) saturate(.9);
}
.noah-stage-entry-card > *{
  position:relative;
  z-index:1;
}
.noah-stage-entry-card .special-ticket-balance{
  right:14px;
  top:10px;
}
@media (max-width:390px){
  .noah-stage-entry-card::before{
    width:84px;
    height:84px;
    right:8px;
    opacity:.16;
  }
}


/* ============================================================
   Noah stage watermark tune v101
   ・透かしを大きく、カード高さに合わせる
   ・所持枚数を右上へ
   ・説明文は非表示（HTML側でも削除）
   ============================================================ */
.noah-stage-entry-card{
  min-height:108px;
}

.noah-stage-entry-card::before{
  right:2px;
  top:50%;
  transform:translateY(-50%);
  width:122px;
  height:122px;
  opacity:.22;
  background-position:center right;
  background-size:contain;
}

.noah-stage-entry-card .ninmu-chapter-title{
  padding-right:108px;
}

.noah-stage-entry-card .special-ticket-balance{
  right:12px;
  top:9px;
  bottom:auto;
  z-index:2;
  text-align:right;
  color:rgba(111,85,43,.76);
  text-shadow:0 1px 0 rgba(255,255,255,.86);
}

.noah-stage-entry-card .special-ticket-balance b{
  color:#80602c;
}

.noah-stage-entry-card .special-ticket-cost{
  display:none!important;
}

@media (max-width:390px){
  .noah-stage-entry-card{
    min-height:102px;
  }
  .noah-stage-entry-card::before{
    width:112px;
    height:112px;
    right:0;
    opacity:.2;
  }
  .noah-stage-entry-card .ninmu-chapter-title{
    padding-right:98px;
  }
}


/* ============================================================
   Noah stage watermark tune v102
   ・所持枚数をさらに右へ
   ・透かしを下まで埋めてカード内の空きをなくす
   ============================================================ */
.noah-stage-entry-card::before{
  right:-2px!important;
  top:50%!important;
  width:126px!important;
  height:100%!important;
  min-height:100%!important;
  transform:translateY(-50%)!important;
  background-size:auto 100%!important;
  background-position:right center!important;
}

.noah-stage-entry-card .special-ticket-balance{
  right:6px!important;
  top:8px!important;
}

@media (max-width:390px){
  .noah-stage-entry-card::before{
    right:-2px!important;
    width:118px!important;
    height:100%!important;
    min-height:100%!important;
    background-size:auto 100%!important;
  }
  .noah-stage-entry-card .special-ticket-balance{
    right:5px!important;
  }
}


/* ============================================================
   Noah stage ticket count position v103
   ・端末差を抑えるためカード右端基準 + clamp で横位置を調整
   ・約8mmぶん右へ寄せた見た目
   ============================================================ */
.noah-stage-entry-card .special-ticket-balance{
  right:clamp(-22px,-5.6vw,-16px)!important;
  top:8px!important;
  z-index:3!important;
}

/* 文字だけはカード外へ切れないよう、右側に余白を少し確保 */
.noah-stage-entry-card{
  padding-right:18px!important;
}

@media (max-width:390px){
  .noah-stage-entry-card .special-ticket-balance{
    right:clamp(-20px,-5.2vw,-15px)!important;
  }
}


/* ============================================================
   Noah piece button layout v104
   ・ボタンをフッターではなくパズル下に配置
   ・文言を2行に変更
   ============================================================ */
.noah-piece-body{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.noah-piece-note{
  margin:10px auto 12px;
}
.noah-piece-actions{
  width:min(100%,340px);
  margin:0 auto 0;
  padding:0;
  border-top:0;
  background:transparent;
}
.noah-piece-challenge{
  min-height:72px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.noah-piece-challenge-main{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.05em;
}
.noah-piece-challenge-sub{
  display:block;
  font-size:10px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.04em;
  opacity:.92;
}
.noah-piece-complete{
  margin-top:8px;
}
@media(max-height:700px){
  .noah-piece-actions{
    width:min(100%,300px);
  }
  .noah-piece-challenge{
    min-height:66px;
    padding:8px 10px;
  }
  .noah-piece-challenge-main{
    font-size:12px;
  }
  .noah-piece-challenge-sub{
    font-size:9px;
  }
}


/* ============================================================
   Noah ticket count under challenge button v105
   ============================================================ */
.noah-piece-ticket-status{
  margin-top:7px;
  text-align:center;
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.04em;
  color:rgba(93,72,42,.66);
}
.noah-piece-ticket-status b{
  margin:0 2px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:11px;
  font-weight:600;
  color:#70552c;
}


/* ============================================================
   Noah 9-piece complete popup v108
   ============================================================ */
.noah-complete-popup{
  position:fixed;
  inset:0;
  z-index:190000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  font-family:"Noto Serif JP",serif;
}
.noah-complete-popup.show{display:flex}
.noah-complete-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(239,235,226,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.noah-complete-popup-card{
  position:relative;
  z-index:1;
  width:min(86vw,340px);
  padding:16px 16px 14px;
  border:1px solid rgba(153,117,57,.34);
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.99),rgba(249,245,236,.97) 54%,rgba(236,228,214,.96));
  box-shadow:
    0 18px 45px rgba(77,58,28,.20),
    inset 0 0 0 1px rgba(255,255,255,.8);
  text-align:center;
  color:#5b472d;
  animation:noahCompletePopupIn .5s cubic-bezier(.16,.84,.25,1) both;
}
.noah-complete-popup-kicker{
  font-family:"Cinzel",serif;
  font-size:8px;
  letter-spacing:.28em;
  color:#a5854d;
}
.noah-complete-popup-image-wrap{
  position:relative;
  width:156px;
  height:156px;
  margin:11px auto 10px;
  overflow:hidden;
  border:1px solid rgba(151,116,58,.20);
  border-radius:12px;
  background:rgba(255,255,255,.58);
  box-shadow:0 8px 20px rgba(86,62,28,.12);
}
.noah-complete-popup-image-wrap::before{
  content:"";
  position:absolute;
  inset:-32%;
  z-index:0;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(205,164,80,.12) 0deg 6deg,
    transparent 6deg 18deg
  );
  animation:noahCompleteGlowRotate 7s linear infinite;
}
.noah-complete-popup-image{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.noah-complete-popup-title{
  margin-top:4px;
  font-size:15px;
  font-weight:600;
  line-height:1.7;
  letter-spacing:.04em;
  color:#4f3c24;
}
.noah-complete-popup-close{
  width:100%;
  min-height:42px;
  margin-top:13px;
  border:1px solid rgba(160,120,52,.52);
  border-radius:10px;
  background:linear-gradient(180deg,#b98d3d,#8e6625);
  color:#fffdf8;
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
}
@keyframes noahCompletePopupIn{
  0%{opacity:0;transform:translateY(12px) scale(.94);filter:brightness(1.35)}
  65%{opacity:1;transform:translateY(-2px) scale(1.015)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
}
@keyframes noahCompleteGlowRotate{
  to{transform:rotate(360deg)}
}


/* ============================================================
   Noah complete popup v109
   パネル画像背面の放射エフェクトを削除
   ============================================================ */
.noah-complete-popup-image-wrap::before{
  content:none!important;
  display:none!important;
  animation:none!important;
}


/* =========================================================
   v120 Bonus screen - no scroll / current day emphasis
   ・ボーナス画面は1画面内で完結
   ・文字を増やさず、現在DAYだけ視覚的に強調
   ========================================================= */

/* このページだけスクロール禁止。下部ナビの上までを表示領域として使う */
#screen-bonus{
  overflow:hidden!important;
}

#screen-bonus .bonus-screen-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  padding:12px 16px calc(78px + env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
}

/* 画面上の説明ブロックは省略。タイトル「ボーナス」とカードだけで完結させる */
#screen-bonus .bonus-page-intro{
  display:none!important;
}

#screen-bonus .bonus-page-list{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:0!important;
}

#screen-bonus .bonus-page-card{
  flex:0 1 auto!important;
  width:100%!important;
  max-height:100%!important;
  padding:12px 12px 10px!important;
  overflow:hidden!important;
}

#screen-bonus .bonus-card-head{
  margin-bottom:9px!important;
}

#screen-bonus .bonus-card-title-wrap small{
  font-size:7.5px!important;
  margin-bottom:2px!important;
}

#screen-bonus .bonus-card-title-wrap h3{
  font-size:17px!important;
}

#screen-bonus .bonus-card-state{
  padding:4px 7px!important;
  font-size:8.5px!important;
}

/* 7日分を高さを抑えて1画面へ */
#screen-bonus .bonus-mixed-row{
  gap:7px!important;
}

#screen-bonus .bonus-mixed-day{
  position:relative!important;
  min-height:104px!important;
  padding:7px 5px 7px!important;
  overflow:visible!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}

#screen-bonus .bonus-mixed-reward{
  gap:2px!important;
  margin-top:5px!important;
}

#screen-bonus .bonus-mixed-reward img.material{
  width:40px!important;
  height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
}

#screen-bonus .bonus-mixed-reward img.ticket{
  width:124px!important;
}

#screen-bonus .bonus-mixed-reward b{
  font-size:12px!important;
}

/* 今日：文字を追加せず「金の枠・光・少し浮く」で一目で分かる */
#screen-bonus .bonus-mixed-day.is-current{
  z-index:3!important;
  opacity:1!important;
  transform:translateY(-3px) scale(1.025)!important;
  border:2px solid rgba(190,137,34,.92)!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,244,196,.82),transparent 58%),
    linear-gradient(180deg,#fff8dc 0%,#f4dfaa 100%)!important;
  box-shadow:
    0 0 0 2px rgba(255,252,238,.98) inset,
    0 0 0 3px rgba(206,157,55,.22),
    0 7px 16px rgba(148,100,26,.20),
    0 0 20px rgba(220,176,76,.30)!important;
  filter:saturate(1.08) brightness(1.025)!important;
}

/* 上部の小さな光点だけでCURRENT感を出す。文字は増やさない */
#screen-bonus .bonus-mixed-day.is-current::before{
  content:""!important;
  position:absolute!important;
  top:-5px!important;
  left:50%!important;
  width:8px!important;
  height:8px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  background:#d7a33d!important;
  border:2px solid #fffaf0!important;
  box-shadow:0 0 8px rgba(202,145,34,.62)!important;
  z-index:4!important;
}

/* 受取済みでも「今日」だけは薄くしない */
#screen-bonus .bonus-mixed-day.is-current.is-claimed{
  opacity:1!important;
}

/* 今日以外をほんの少し引かせる */
#screen-bonus .bonus-mixed-day:not(.is-current){
  filter:saturate(.88) brightness(.985)!important;
}

/* フッターも圧縮して下部ナビまでに収める */
#screen-bonus .bonus-card-foot{
  margin-top:9px!important;
  gap:8px!important;
}

#screen-bonus .bonus-card-note{
  font-size:8px!important;
  line-height:1.45!important;
}

#screen-bonus .bonus-card-action{
  min-width:88px!important;
  padding:8px 10px!important;
  font-size:9.5px!important;
}

/* 縦が短い端末ではさらに少しだけ圧縮 */
@media (max-height:700px){
  #screen-bonus .bonus-screen-scroll{
    padding-top:8px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  #screen-bonus .bonus-page-card{
    padding:10px 10px 8px!important;
  }
  #screen-bonus .bonus-card-head{
    margin-bottom:6px!important;
  }
  #screen-bonus .bonus-mixed-row{
    gap:5px!important;
  }
  #screen-bonus .bonus-mixed-day{
    min-height:92px!important;
    padding:6px 4px!important;
  }
  #screen-bonus .bonus-mixed-reward img.material{
    width:35px!important;
    height:35px!important;
    max-width:35px!important;
    max-height:35px!important;
  }
  #screen-bonus .bonus-mixed-reward img.ticket{
    width:108px!important;
  }
  #screen-bonus .bonus-card-foot{
    margin-top:6px!important;
  }
  #screen-bonus .bonus-card-note{
    font-size:7.5px!important;
    line-height:1.35!important;
  }
}


/* =========================================================
   v121 Bonus screen - claimed checkmarks + NEXT marker
   ========================================================= */

/* 旧 is-current ベースではなく、取得済みチェックとNEXTで状態を見せる */
#screen-bonus .bonus-mixed-day{
  position:relative!important;
}

#screen-bonus .bonus-mixed-day.is-claimed{
  opacity:1!important;
  filter:none!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(245,241,233,.96) 100%)!important;
  box-shadow:
    0 0 0 1px rgba(216,206,186,.8) inset,
    0 2px 8px rgba(104,90,62,.06)!important;
}

#screen-bonus .bonus-mixed-day.is-claimed .bonus-mixed-reward{
  opacity:.74!important;
}

#screen-bonus .bonus-mixed-day .bonus-day-check{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  font-size:12px!important;
  line-height:1!important;
  color:#fff!important;
  background:linear-gradient(180deg,#d8ba69 0%,#bc8a2b 100%)!important;
  box-shadow:0 2px 6px rgba(141,101,28,.22)!important;
  z-index:4!important;
}

#screen-bonus .bonus-mixed-day.is-next{
  z-index:3!important;
  opacity:1!important;
  transform:translateY(-3px) scale(1.025)!important;
  border:2px solid rgba(190,137,34,.92)!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,244,196,.82),transparent 58%),
    linear-gradient(180deg,#fff8dc 0%,#f4dfaa 100%)!important;
  box-shadow:
    0 0 0 2px rgba(255,252,238,.98) inset,
    0 0 0 3px rgba(206,157,55,.22),
    0 7px 16px rgba(148,100,26,.20),
    0 0 20px rgba(220,176,76,.30)!important;
  filter:saturate(1.08) brightness(1.025)!important;
}

#screen-bonus .bonus-mixed-day.is-next .bonus-day-next{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:30px!important;
  height:16px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  font-style:normal!important;
  font-size:8px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  color:#fffdf6!important;
  background:linear-gradient(180deg,#d5ac58 0%,#b98229 100%)!important;
  box-shadow:0 2px 6px rgba(141,101,28,.22)!important;
  z-index:5!important;
}

#screen-bonus .bonus-mixed-day:not(.is-next):not(.is-claimed){
  filter:saturate(.88) brightness(.985)!important;
}

/* 旧current用の擬似装飾は使わない */
#screen-bonus .bonus-mixed-day.is-current::before{
  display:none!important;
}

@media (max-height:700px){
  #screen-bonus .bonus-mixed-day .bonus-day-check{
    top:6px!important;
    right:6px!important;
    width:16px!important;
    height:16px!important;
    font-size:11px!important;
  }
  #screen-bonus .bonus-mixed-day.is-next .bonus-day-next{
    top:6px!important;
    right:6px!important;
    min-width:28px!important;
    height:15px!important;
    font-size:7.5px!important;
  }
}


/* =========================================================
   v122 Login Bonus rich layout polish
   ・カードを上品に
   ・DAYラベルをしっかり見せる
   ・NEXT / 受取済みを雑に見せない
   ========================================================= */

#screen-bonus .bonus-page-card{
  border:1px solid rgba(224,211,184,.95)!important;
  background:
    linear-gradient(180deg,rgba(255,255,252,.86) 0%,rgba(251,247,239,.95) 100%)!important;
  box-shadow:
    0 0 0 4px rgba(248,243,233,.9) inset,
    0 6px 18px rgba(90,72,42,.05)!important;
}

#screen-bonus .bonus-card-head{
  align-items:center!important;
  padding-bottom:8px!important;
  border-bottom:1px solid rgba(226,215,190,.72)!important;
}

#screen-bonus .bonus-card-state{
  background:linear-gradient(180deg,#fbf7ef 0%,#f1e6d0 100%)!important;
  border:1px solid rgba(214,194,156,.82)!important;
  color:#a48856!important;
  box-shadow:0 1px 4px rgba(101,79,45,.06)!important;
}

/* 全体グリッド */
#screen-bonus .bonus-mixed-row{
  gap:8px!important;
  margin-top:10px!important;
}

#screen-bonus .bonus-mixed-day{
  position:relative!important;
  min-height:106px!important;
  padding:8px 6px 7px!important;
  border:1px solid rgba(215,197,163,.92)!important;
  border-radius:13px!important;
  background:
    linear-gradient(180deg,rgba(255,254,250,.98) 0%,rgba(250,244,233,.96) 100%)!important;
  box-shadow:
    0 0 0 1px rgba(255,252,244,.82) inset,
    0 4px 10px rgba(98,75,43,.045)!important;
  overflow:hidden!important;
}

/* DAYラベルのための専用ヘッダ */
#screen-bonus .bonus-day-head{
  position:relative!important;
  width:100%!important;
  min-height:17px!important;
  margin-bottom:5px!important;
  padding:0 40px 0 2px!important;
  box-sizing:border-box!important;
}

#screen-bonus .bonus-day-label{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.14em!important;
  color:#b0915d!important;
  font-family:"Cinzel","Noto Serif JP",serif!important;
}

/* 旧 span 直接指定より新ヘッダを優先 */
#screen-bonus .bonus-mixed-day > span{
  display:none!important;
}

#screen-bonus .bonus-mixed-reward{
  gap:3px!important;
  margin-top:2px!important;
}

#screen-bonus .bonus-mixed-reward img.material{
  width:42px!important;
  height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  filter:drop-shadow(0 3px 5px rgba(118,96,58,.09))!important;
}

#screen-bonus .bonus-mixed-reward img.ticket{
  width:128px!important;
  filter:drop-shadow(0 4px 8px rgba(118,96,58,.08))!important;
}

#screen-bonus .bonus-mixed-reward b{
  font-size:12.5px!important;
  color:#a2701f!important;
  letter-spacing:.02em!important;
}

#screen-bonus .bonus-mixed-reward small{
  font-size:7.2px!important;
  line-height:1.28!important;
  color:#a28e70!important;
}

/* 受け取り済み：チェックは右上メダリオンのみ。カード自体は上品に残す */
#screen-bonus .bonus-mixed-day.is-claimed{
  opacity:1!important;
  filter:saturate(.92)!important;
  background:
    linear-gradient(180deg,rgba(255,254,251,.98) 0%,rgba(247,241,229,.97) 100%)!important;
}

#screen-bonus .bonus-mixed-day.is-claimed .bonus-mixed-reward{
  opacity:.82!important;
}

#screen-bonus .bonus-day-check{
  position:absolute!important;
  top:-1px!important;
  right:0!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  font-size:11px!important;
  line-height:1!important;
  color:#fff!important;
  background:linear-gradient(180deg,#d5b86c 0%,#b9862e 100%)!important;
  border:1px solid rgba(255,247,223,.95)!important;
  box-shadow:
    0 2px 5px rgba(144,101,32,.16),
    0 0 0 1px rgba(194,154,73,.18)!important;
  z-index:4!important;
}

/* NEXT：DAYラベルを消さず、右上の細いタブで美しく表示 */
#screen-bonus .bonus-mixed-day.is-next{
  z-index:3!important;
  transform:translateY(-2px)!important;
  border:1px solid rgba(197,143,42,.95)!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,246,214,.92),transparent 45%),
    linear-gradient(180deg,#fffaf0 0%,#f5e0a8 100%)!important;
  box-shadow:
    0 0 0 2px rgba(255,250,235,.98) inset,
    0 0 0 1px rgba(214,174,98,.26),
    0 8px 16px rgba(171,123,34,.14),
    0 0 18px rgba(221,182,97,.18)!important;
  filter:none!important;
}

#screen-bonus .bonus-mixed-day.is-next .bonus-day-label{
  color:#9c7321!important;
  font-weight:700!important;
}

#screen-bonus .bonus-day-next{
  position:absolute!important;
  top:-1px!important;
  right:0!important;
  min-width:34px!important;
  height:17px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-style:normal!important;
  font-size:8px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  color:#fffaf0!important;
  background:linear-gradient(180deg,#d8b15f 0%,#bc852b 100%)!important;
  border:1px solid rgba(255,247,223,.95)!important;
  box-shadow:0 2px 5px rgba(144,101,32,.16)!important;
  z-index:5!important;
}

#screen-bonus .bonus-mixed-day:not(.is-next):not(.is-claimed){
  filter:saturate(.94) brightness(.995)!important;
}

/* 7日目チケットを少しリッチに見せる */
#screen-bonus .bonus-mixed-day.is-special{
  justify-content:flex-start!important;
}

#screen-bonus .bonus-mixed-day.is-special .bonus-mixed-reward{
  gap:4px!important;
}

#screen-bonus .bonus-card-foot{
  margin-top:8px!important;
  padding-top:7px!important;
  border-top:1px solid rgba(226,215,190,.72)!important;
  align-items:flex-end!important;
}

#screen-bonus .bonus-card-note{
  font-size:7.8px!important;
  line-height:1.42!important;
  color:#9b8b6d!important;
}

#screen-bonus .bonus-card-action{
  background:linear-gradient(180deg,#f7f0de 0%,#eadbc0 100%)!important;
  border:1px solid rgba(214,194,156,.82)!important;
  color:#b29d76!important;
  box-shadow:none!important;
}

@media (max-height:700px){
  #screen-bonus .bonus-mixed-day{
    min-height:94px!important;
    padding:7px 5px 6px!important;
  }
  #screen-bonus .bonus-day-head{
    min-height:16px!important;
    margin-bottom:3px!important;
    padding-right:38px!important;
  }
  #screen-bonus .bonus-day-label{
    font-size:9px!important;
  }
  #screen-bonus .bonus-mixed-reward img.material{
    width:36px!important;
    height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
  }
  #screen-bonus .bonus-mixed-reward img.ticket{
    width:112px!important;
  }
  #screen-bonus .bonus-mixed-reward b{
    font-size:11.5px!important;
  }
  #screen-bonus .bonus-day-check{
    width:16px!important;
    height:16px!important;
    font-size:10px!important;
  }
  #screen-bonus .bonus-day-next{
    min-width:30px!important;
    height:15px!important;
    font-size:7px!important;
    padding:0 6px!important;
  }
}


/* =========================================================
   v123 Login Bonus marker unification
   受取済み=[本日受取済み] / 次の報酬=[NEXT] / その他は無印
   ========================================================= */

/* 旧チェック表現を完全に使わない */
#screen-bonus .bonus-day-check,
#screen-bonus .bonus-day-next{
  display:none!important;
}

/* 過去に受け取ったカードは見た目を特別扱いしない */
#screen-bonus .bonus-mixed-day.is-claimed{
  opacity:1!important;
  filter:none!important;
  background:
    linear-gradient(180deg,rgba(255,254,250,.98) 0%,rgba(250,244,233,.96) 100%)!important;
}

#screen-bonus .bonus-mixed-day.is-claimed .bonus-mixed-reward{
  opacity:1!important;
}

/* マーカー共通 */
#screen-bonus .bonus-day-mark{
  position:absolute!important;
  top:-1px!important;
  right:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:17px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  font-style:normal!important;
  font-size:8px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  border:1px solid rgba(255,247,223,.95)!important;
  box-shadow:0 2px 5px rgba(144,101,32,.16)!important;
  z-index:5!important;
  white-space:nowrap!important;
}

/* [本日受取済み] */
#screen-bonus .bonus-day-mark-claimed{
  min-width:58px!important;
  color:#fffaf0!important;
  background:linear-gradient(180deg,#cbb388 0%,#ad8d5b 100%)!important;
}

/* [NEXT] */
#screen-bonus .bonus-day-mark-next{
  min-width:34px!important;
  letter-spacing:.12em!important;
  color:#fffaf0!important;
  background:linear-gradient(180deg,#d8b15f 0%,#bc852b 100%)!important;
}

/* 本日受取済みカードは少しだけ落ち着いた上品さ */
#screen-bonus .bonus-mixed-day.is-today-claimed{
  background:
    linear-gradient(180deg,rgba(255,254,251,.98) 0%,rgba(247,241,229,.97) 100%)!important;
  box-shadow:
    0 0 0 1px rgba(255,252,244,.82) inset,
    0 4px 10px rgba(98,75,43,.045)!important;
}

/* NEXTのみ少し強調 */
#screen-bonus .bonus-mixed-day.is-next{
  z-index:3!important;
  transform:translateY(-2px)!important;
  border:1px solid rgba(197,143,42,.95)!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,246,214,.92),transparent 45%),
    linear-gradient(180deg,#fffaf0 0%,#f5e0a8 100%)!important;
  box-shadow:
    0 0 0 2px rgba(255,250,235,.98) inset,
    0 0 0 1px rgba(214,174,98,.26),
    0 8px 16px rgba(171,123,34,.14),
    0 0 18px rgba(221,182,97,.18)!important;
  filter:none!important;
}

#screen-bonus .bonus-mixed-day.is-next .bonus-day-label{
  color:#9c7321!important;
  font-weight:700!important;
}

@media (max-height:700px){
  #screen-bonus .bonus-day-mark{
    height:15px!important;
    font-size:7px!important;
    padding:0 6px!important;
  }
  #screen-bonus .bonus-day-mark-claimed{
    min-width:50px!important;
  }
  #screen-bonus .bonus-day-mark-next{
    min-width:30px!important;
  }
}


/* =========================================================
   v124 Login Bonus polish
   ・受取済みカードを視覚的に薄く
   ・DAY / 数字を右上で統一（DAY改行N）
   ========================================================= */

/* DAYヘッダは全カード共通で右上配置 */
#screen-bonus .bonus-day-head{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  left:auto!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  z-index:6!important;
  pointer-events:none!important;
}

#screen-bonus .bonus-day-label{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  width:auto!important;
  min-width:26px!important;
  text-align:right!important;
  font-family:"Cinzel","Noto Serif JP",serif!important;
  color:#b0915d!important;
  line-height:1!important;
  letter-spacing:0!important;
}

#screen-bonus .bonus-day-label em{
  display:block!important;
  font-style:normal!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  font-weight:500!important;
}

#screen-bonus .bonus-day-label b{
  display:block!important;
  margin-top:2px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}

/* 報酬部分はDAY表示と干渉しないよう上を少し空ける */
#screen-bonus .bonus-mixed-reward{
  margin-top:18px!important;
}

/* NEXT / 本日受取済みはDAYの左側へ置く */
#screen-bonus .bonus-day-mark{
  position:absolute!important;
  top:0!important;
  right:34px!important;
}

#screen-bonus .bonus-day-mark-claimed{
  right:34px!important;
}

#screen-bonus .bonus-day-mark-next{
  right:34px!important;
}

/* 受取済み報酬は一目で分かる程度に薄くする */
#screen-bonus .bonus-mixed-day.is-today-claimed{
  opacity:.64!important;
  filter:saturate(.72) brightness(.985)!important;
  background:
    linear-gradient(180deg,rgba(248,246,240,.94) 0%,rgba(239,234,224,.92) 100%)!important;
  border-color:rgba(194,181,157,.72)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 2px 7px rgba(92,79,58,.035)!important;
}

#screen-bonus .bonus-mixed-day.is-today-claimed .bonus-mixed-reward{
  opacity:.72!important;
  filter:grayscale(.16)!important;
}

/* 「本日受取済み」マーク自体は読める濃さを維持 */
#screen-bonus .bonus-mixed-day.is-today-claimed .bonus-day-mark-claimed{
  opacity:1!important;
  filter:none!important;
  background:linear-gradient(180deg,#b9aa91 0%,#97866d 100%)!important;
}

/* NEXTカードはDAY表記も同じ右上位置 */
#screen-bonus .bonus-mixed-day.is-next .bonus-day-label{
  color:#9c7321!important;
}

/* DAY7だけ特別な配置にならないよう完全統一 */
#screen-bonus .bonus-mixed-day.is-special .bonus-day-head{
  top:7px!important;
  right:7px!important;
  left:auto!important;
}

#screen-bonus .bonus-mixed-day.is-special .bonus-mixed-reward{
  margin-top:18px!important;
}

@media (max-height:700px){
  #screen-bonus .bonus-day-head{
    top:6px!important;
    right:6px!important;
  }
  #screen-bonus .bonus-day-label em{
    font-size:7.5px!important;
  }
  #screen-bonus .bonus-day-label b{
    font-size:10px!important;
    margin-top:1px!important;
  }
  #screen-bonus .bonus-day-mark,
  #screen-bonus .bonus-day-mark-claimed,
  #screen-bonus .bonus-day-mark-next{
    right:31px!important;
  }
  #screen-bonus .bonus-mixed-reward,
  #screen-bonus .bonus-mixed-day.is-special .bonus-mixed-reward{
    margin-top:16px!important;
  }
}


/* =========================================================
   v125 Login Bonus DAY position only
   DAY表記を全カード左上へ統一
   ========================================================= */
#screen-bonus .bonus-day-head{
  left:7px!important;
  right:auto!important;
  justify-content:flex-start!important;
}

#screen-bonus .bonus-day-label{
  align-items:flex-start!important;
  text-align:left!important;
}

/* NEXT / 本日受取済みは右上のまま維持 */
#screen-bonus .bonus-day-mark,
#screen-bonus .bonus-day-mark-claimed,
#screen-bonus .bonus-day-mark-next{
  right:7px!important;
  left:auto!important;
}

/* DAY7も同じ左上位置 */
#screen-bonus .bonus-mixed-day.is-special .bonus-day-head{
  left:7px!important;
  right:auto!important;
}

@media (max-height:700px){
  #screen-bonus .bonus-day-head{
    left:6px!important;
    right:auto!important;
  }

  #screen-bonus .bonus-day-mark,
  #screen-bonus .bonus-day-mark-claimed,
  #screen-bonus .bonus-day-mark-next{
    right:6px!important;
    left:auto!important;
  }

  #screen-bonus .bonus-mixed-day.is-special .bonus-day-head{
    left:6px!important;
    right:auto!important;
  }
}


/* =========================================================
   v126 Login Bonus badge layout fix
   DAY = 左上 / NEXT・本日受取済み = 右上
   ========================================================= */

/* カードをバッジの基準にする */
#screen-bonus .bonus-mixed-day{
  position:relative!important;
  padding-top:10px!important;
}

/* DAYは左上。DAY7も完全に同じ位置 */
#screen-bonus .bonus-day-head,
#screen-bonus .bonus-mixed-day.is-special .bonus-day-head{
  position:absolute!important;
  top:8px!important;
  left:8px!important;
  right:auto!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  z-index:4!important;
  pointer-events:none!important;
}

#screen-bonus .bonus-day-label{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  min-width:24px!important;
  width:auto!important;
  text-align:left!important;
  color:#b0915d!important;
  font-family:"Cinzel","Noto Serif JP",serif!important;
  line-height:1!important;
}

#screen-bonus .bonus-day-label em{
  display:block!important;
  font-style:normal!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.15em!important;
  font-weight:500!important;
}

#screen-bonus .bonus-day-label b{
  display:block!important;
  margin-top:2px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}

/* バッジはDAYヘッダとは独立してカード右上へ */
#screen-bonus .bonus-day-mark,
#screen-bonus .bonus-day-mark-claimed,
#screen-bonus .bonus-day-mark-next{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  left:auto!important;
  transform:none!important;
  margin:0!important;
  z-index:7!important;
}

/* NEXTは小さく上品に */
#screen-bonus .bonus-day-mark-next{
  min-width:36px!important;
  height:17px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  font-size:7.5px!important;
  letter-spacing:.12em!important;
}

/* 本日受取済みは横長でもカード内に綺麗に収める */
#screen-bonus .bonus-day-mark-claimed{
  min-width:64px!important;
  height:17px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  font-size:7px!important;
  letter-spacing:.04em!important;
}

/* 上部ラベルと報酬画像の間に十分な呼吸を作る */
#screen-bonus .bonus-mixed-reward,
#screen-bonus .bonus-mixed-day.is-special .bonus-mixed-reward{
  margin-top:21px!important;
}

/* NEXTカードのDAYも左上を維持 */
#screen-bonus .bonus-mixed-day.is-next .bonus-day-label{
  color:#9c7321!important;
  font-weight:700!important;
}

/* 短い画面でも左右の役割を崩さない */
@media (max-height:700px){
  #screen-bonus .bonus-day-head,
  #screen-bonus .bonus-mixed-day.is-special .bonus-day-head{
    top:7px!important;
    left:7px!important;
    right:auto!important;
  }

  #screen-bonus .bonus-day-mark,
  #screen-bonus .bonus-day-mark-claimed,
  #screen-bonus .bonus-day-mark-next{
    top:7px!important;
    right:7px!important;
    left:auto!important;
  }

  #screen-bonus .bonus-mixed-reward,
  #screen-bonus .bonus-mixed-day.is-special .bonus-mixed-reward{
    margin-top:19px!important;
  }
}

/* =========================================================
   127 キャラ一覧：縦スクロール修正
   - 一覧グリッド自身ではなく screen-scroll をスクロール領域にする
   - 下部ナビに隠れない余白を維持
   ========================================================= */
#screen-zukan.is-primoa-index .screen-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

#screen-zukan.is-primoa-index #box-grid.primoa-index-grid {
  overflow: visible !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   128 キャラ一覧：縦スクロール根本修正
   - 旧カルーセル用 #zukan-sub-box { height:100%; overflow:hidden; } が
     一覧全体を画面高で切っていたため、一覧モードだけ解除する
   - screen-scroll を唯一の縦スクロール領域として維持
   ========================================================= */
#screen-zukan.is-primoa-index .screen-scroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

#screen-zukan.is-primoa-index #zukan-sub-box {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

#screen-zukan.is-primoa-index #box-grid.primoa-index-grid {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  touch-action: pan-y !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

#screen-zukan.is-primoa-index #box-grid.primoa-index-grid * {
  touch-action: pan-y manipulation;
}


/* =========================================================
   129 邂逅：スクロールなし・1画面固定
   - ヘッダーと下部ナビの間だけを使用
   - ガチャ画面内の縦スクロールを完全停止
   ========================================================= */
#screen-summon{
  overflow:hidden!important;
}

#screen-summon .summon-layout{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
  padding:
    8px
    8px
    calc(78px + env(safe-area-inset-bottom))
    8px!important;
}

#screen-summon .summon-detail{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  gap:6px!important;
}

#screen-summon .summon-detail-visual{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}

#screen-summon .summon-detail-visual img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
}

#screen-summon .summon-banner-list{
  flex:0 0 auto!important;
  overflow:hidden!important;
  -webkit-overflow-scrolling:auto!important;
  touch-action:manipulation!important;
}

#screen-summon .summon-detail-btns,
#screen-summon .pity-counter,
#screen-summon .pity-note{
  flex:0 0 auto!important;
}

/* 縦が短い端末でもスクロールを発生させず収める */
@media (max-height:700px){
  #screen-summon .summon-layout{
    padding:
      6px
      7px
      calc(70px + env(safe-area-inset-bottom))
      7px!important;
  }

  #screen-summon .summon-detail{
    gap:5px!important;
  }

  #screen-summon .summon-detail-btns{
    gap:6px!important;
  }

  #screen-summon .btn-gacha{
    min-height:50px!important;
    padding:7px 5px!important;
  }

  #screen-summon .pity-counter{
    padding-top:3px!important;
    padding-bottom:3px!important;
  }

  #screen-summon .pity-note{
    padding-bottom:2px!important;
  }
}


/* =========================================================
   v146 Character Detail Modal Polish
   - 明確な右上×ボタン
   - 背景をぼかして詳細カードへ視線を集中
   - 単発ガチャ / 10連結果 / 通常詳細で共通適用
   ========================================================= */
#detail-modal.modal-overlay {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 241, 207, 0.18) 0%, rgba(49, 39, 28, 0.30) 42%, rgba(18, 15, 13, 0.68) 100%) !important;
  backdrop-filter: blur(10px) saturate(0.86) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.86) !important;
  padding: 18px !important;
}

#detail-modal > .modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(252,248,240,0.975) 100%) !important;
  border: 1px solid rgba(190, 157, 92, 0.28) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.34),
    0 8px 24px rgba(82,59,28,0.14),
    0 0 0 1px rgba(255,255,255,0.72) inset !important;
  border-radius: 24px !important;
  position: relative !important;
}

#detail-modal .detail-modal-close-x {
  position: sticky;
  top: 0;
  float: right;
  margin: -6px -2px -36px 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(157, 124, 65, 0.34);
  background: rgba(255, 252, 246, 0.94);
  color: #6f5a39;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  box-shadow:
    0 7px 18px rgba(69, 49, 23, 0.16),
    0 0 0 1px rgba(255,255,255,0.72) inset;
  -webkit-tap-highlight-color: transparent;
}

#detail-modal .detail-modal-close-x:active {
  transform: scale(0.92);
  background: rgba(244, 235, 218, 0.98);
}

#detail-modal #detail-chara-visual .detail-main-img {
  box-shadow:
    0 18px 32px rgba(52, 40, 24, 0.24),
    0 4px 12px rgba(52, 40, 24, 0.12) !important;
}
\n\n/* =========================================================
   v147 Detail close / repeat single gacha fix
   ========================================================= */
#detail-modal > .modal {
  position: relative !important;
}

#detail-modal .detail-modal-close-x,
#detail-modal .modal-close-btn.detail-modal-close-x {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(157,124,65,0.34) !important;
  background: rgba(255,252,246,0.96) !important;
  color: #6f5a39 !important;
  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  text-align: center !important;
  display: block !important;
  z-index: 999 !important;
  box-shadow: 0 7px 18px rgba(69,49,23,0.18) !important;
  transform: none !important;
}

#detail-modal .detail-modal-close-x:active {
  transform: scale(0.92) !important;
}


/* =========================================================
   v148 HUD stability / reload button removal
   - HUDを固定2カラム化し、資源表示のtransform依存を廃止
   - 画面再描画・フォント読込時の位置ズレを抑制
   ========================================================= */
.global-user-frame,
.global-user-frame.hud-dark {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-height: var(--header-h) !important;
  height: var(--header-h) !important;
  padding-top: calc(env(safe-area-inset-top) + 8px) !important;
  padding-right: 12px !important;
  padding-bottom: 8px !important;
  padding-left: 12px !important;
  box-sizing: border-box !important;
}

.global-user-frame .hud-left {
  min-width: 0 !important;
  width: auto !important;
  flex: none !important;
  align-self: center !important;
}

.global-user-frame .hud-info {
  min-width: 0 !important;
}

.global-user-frame .hud-name,
.global-user-frame .hud-exp-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.global-user-frame .hud-exp-bg {
  width: clamp(86px, 26vw, 140px) !important;
  max-width: 100% !important;
}

.global-user-frame .hud-right {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

.global-user-frame .hud-right .hud-resource {
  transform: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#sasaphia-reload-btn {
  display: none !important;
}

@media (max-width: 390px) {
  .global-user-frame .hud-lv-circle {
    width: 46px !important;
    height: 46px !important;
  }
  .global-user-frame .hud-left { gap: 7px !important; }
  .global-user-frame .hud-resource { padding-left: 5px !important; padding-right: 6px !important; gap: 4px !important; }
  .global-user-frame .hud-res-val { min-width: 24px !important; font-size: 12px !important; }
  .global-user-frame .hud-res-icon { width: 16px !important; height: 16px !important; min-width: 16px !important; }
}


/* =========================================================
   v150 Home notice badge - unread count
   お知らせは赤ドットではなく、要確認件数を白文字で表示する。
   ========================================================= */
#screen-main .home-notice-badge {
  top: 5px !important;
  right: 5px !important;
  width: auto !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  padding: 0 5px !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: #d84a42 !important;
  border: 2px solid rgba(255,252,244,.98) !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(80,20,18,.28);
}

#screen-main .home-notice-badge.show {
  display: flex !important;
}

@media (max-width:380px) and (max-height:700px) {
  #screen-main .home-notice-badge {
    width: auto !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }
}

/* =========================================================
   v152 Friend request card and request button alignment tune
   お知らせ / 神樹 / フレンド / ボーナスを赤バッジ＋白文字で統一。
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .friend-home-entry .friend-notice-dot,
#screen-main .bonus-home-entry-notice {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: auto !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  padding: 0 5px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: #d84a42 !important;
  border: 2px solid rgba(255,252,244,.98) !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(80,20,18,.28);
  pointer-events: none !important;
  z-index: 8 !important;
}

#screen-main .home-notice-badge.show,
#screen-main .shinju-home-entry.has-items .shinju-home-entry-badge,
#screen-main .friend-home-entry.has-friend-notice .friend-notice-dot,
#screen-main .bonus-home-entry.has-unclaimed .bonus-home-entry-notice {
  display: flex !important;
  animation: home-count-badge-pulse-v151 1.8s ease-in-out infinite !important;
}

@keyframes home-count-badge-pulse-v151 {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (max-width:380px) and (max-height:700px) {
  #screen-main .home-notice-badge,
  #screen-main .shinju-home-entry .shinju-home-entry-badge,
  #screen-main .friend-home-entry .friend-notice-dot,
  #screen-main .bonus-home-entry-notice {
    width: auto !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }
}

/* =========================================================
   v154 User rank label
   ========================================================= */
.global-user-frame .hud-lv-label{
  font-size:8px !important;
  letter-spacing:.9px !important;
  white-space:nowrap;
}


/* =========================================================
   v158 Title Startup Asset Gate
   ========================================================= */
#title-screen #title-tap-hint{
  min-height:20px;
}
#title-screen.closing{
  pointer-events:none;
}


/* =========================================================
   v159 Title loading progress
   ========================================================= */
#title-screen #title-tap-hint{
  margin-top:34px;
  font-size:12px;
  letter-spacing:3px;
}
#title-loading-progress{
  width:min(220px, 64vw);
  margin-top:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease;
  position:relative;
  z-index:2;
  pointer-events:none;
}
#title-loading-progress.active{
  opacity:1;
  visibility:visible;
}
.title-loading-track{
  width:100%;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(93,77,54,.13);
  box-shadow:inset 0 0 0 1px rgba(93,77,54,.06);
}
#title-loading-fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(184,151,90,.72), rgba(126,99,54,.92));
  transition:width .18s ease-out;
}
#title-loading-percent{
  min-width:42px;
  text-align:center;
  color:rgba(76,62,44,.62);
  font-family:"Cinzel", serif;
  font-size:10px;
  letter-spacing:1.4px;
  font-variant-numeric:tabular-nums;
}
#title-screen.closing #title-loading-progress{
  opacity:0;
}


/* v160 staged startup loader */
#title-tap-hint{ white-space:nowrap; }

/* =========================================================
   v161 SHOOTING STAGE CLEAR STATUS
   クリア済みステージを一目で判別できるよう強調
   ========================================================= */
#stage-select-modal .ss-card.story-cleared {
  background: linear-gradient(90deg, rgba(171, 140, 72, .11), rgba(255,255,255,.018) 46%, transparent 100%) !important;
  box-shadow: inset 3px 0 0 rgba(157, 126, 61, .58), inset 0 0 0 1px rgba(157, 126, 61, .13) !important;
}
#stage-select-modal .ss-story-clear {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 1px;
  border: 1px solid rgba(157, 126, 61, .40);
  border-radius: 999px;
  background: rgba(157, 126, 61, .10);
  color: rgba(112, 84, 33, .92) !important;
  font-family: "Cinzel", serif;
  font-size: 8px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  vertical-align: 2px;
  white-space: nowrap;
}
#stage-select-modal .ss-story-clear::before {
  content: '✓';
  font-family: sans-serif;
  font-size: 9px;
  line-height: 1;
}


/* =========================================================
   v196 Gacha material reveal
   - ITEM only centered
   - no frame / panel around item image
   - approx. 1.5x larger than v194
   - character reveal remains unchanged
   ========================================================= */
#reveal-modal.is-material-result .reveal-inner,
#reveal-modal.is-material-result .reveal-content {
  align-items: center !important;
  justify-content: center !important;
}

#reveal-modal.is-material-result #reveal-chara-img {
  width: min(63vw, 237px) !important;
  height: min(63vw, 237px) !important;
  object-fit: contain !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  top: 42% !important;
  transform: translate(-50%, -50%) !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* PICK UP等のキャラ用拡大指定を素材には適用しない */
#reveal-modal.is-material-result.is-pickup #reveal-chara-img {
  width: min(63vw, 237px) !important;
  height: min(63vw, 237px) !important;
}

/* ITEM表示では属性アイコンなどキャラ専用オーバーレイを非表示 */
#reveal-modal.is-material-result .chara-element-corner-icon,
#reveal-modal.is-material-result .reveal-element-icon {
  display: none !important;
}

/* 画像を囲む装飾フレーム類が存在する場合も素材時のみ消す */
#reveal-modal.is-material-result .reveal-frame,
#reveal-modal.is-material-result .reveal-chara-frame,
#reveal-modal.is-material-result .reveal-image-frame,
#reveal-modal.is-material-result .reveal-portrait-frame {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* テキストは下部に残し、画像中央と干渉させない */
#reveal-modal.is-material-result .reveal-name,
#reveal-modal.is-material-result #reveal-name {
  position: absolute !important;
  left: 50% !important;
  bottom: 19% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  text-align: center !important;
}

#reveal-modal.is-material-result .reveal-sub,
#reveal-modal.is-material-result #reveal-sub {
  position: absolute !important;
  left: 50% !important;
  bottom: 14% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  text-align: center !important;
}

@media (max-width: 380px), (max-height: 700px) {
  #reveal-modal.is-material-result #reveal-chara-img,
  #reveal-modal.is-material-result.is-pickup #reveal-chara-img {
    width: min(57vw, 210px) !important;
    height: min(57vw, 210px) !important;
    top: 41% !important;
  }
}


/* =========================================================
   v197 Character reveal fullscreen fix
   - 10連中のNEW/URキャラ表示を含む、キャラ結果は全画面
   - ITEM結果(is-material-result)はv196の中央小型表示を維持
   ========================================================= */
#reveal-modal:not(.is-material-result) #reveal-chara-img,
#reveal-modal:not(.is-material-result).is-pickup #reveal-chara-img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  transform: none;
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 小画面向けの旧220px指定より後段で必ず全画面を優先 */
@media (max-width: 380px), (max-height: 700px) {
  #reveal-modal:not(.is-material-result) #reveal-chara-img,
  #reveal-modal:not(.is-material-result).is-pickup #reveal-chara-img {
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v198 Pity gauge simple style
   - remove outer frame
   - remove white panel background
   - keep gauge / label / count only
   ========================================================= */
#screen-summon .pity-counter {
  margin: 0 !important;
  padding: 6px 4px 5px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#screen-summon .pity-label,
#screen-summon .pity-num {
  font-size: 11px !important;
  color: rgba(92,72,39,.78) !important;
}

#screen-summon .pity-bar-wrap {
  height: 7px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(115,105,87,.24) !important;
}

#screen-summon .pity-bar-fill {
  box-shadow: none !important;
}

#screen-summon .pity-note {
  margin: -2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  color: rgba(92,72,39,.58) !important;
}


/* =========================================================
   v227 CHARACTER INDEX - name readability
   明るい立ち絵・背景でも名前が消えないように固定。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-name{
  color:#4f402f !important;
  font-weight:600 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 3px rgba(255,252,244,.82) !important;
  background:rgba(250,247,239,.72);
  border-radius:2px;
  padding:1px 2px;
  box-sizing:border-box;
}

#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-name{
  color:rgba(62,56,48,.72) !important;
  background:rgba(247,244,236,.68);
}

#screen-zukan.is-primoa-index .primoa-index-card.is-max-limitbreak .primoa-index-name{
  color:#6a4d1f !important;
}
\n\n/* =========================================================
   v235 CHARACTER INDEX - stronger element tint
   属性はカード背景色のみで示す。レアリティバッジは表示しない。
   LIGHT は金系、NEUTRAL は無彩色グレーで明確に分離する。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-card{
  --primoa-element-base: rgba(112,108,101,.14);
  --primoa-element-edge: rgba(96,92,86,.30);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-fire{
  --primoa-element-base: rgba(207,78,55,.23);
  --primoa-element-edge: rgba(184,55,42,.42);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-aqua{
  --primoa-element-base: rgba(61,143,196,.23);
  --primoa-element-edge: rgba(43,117,177,.40);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-wood{
  --primoa-element-base: rgba(91,151,82,.23);
  --primoa-element-edge: rgba(65,126,67,.40);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-light{
  --primoa-element-base: rgba(232,190,60,.27);
  --primoa-element-edge: rgba(206,151,33,.46);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-dark{
  --primoa-element-base: rgba(128,84,174,.25);
  --primoa-element-edge: rgba(97,57,137,.44);
}
#screen-zukan.is-primoa-index .primoa-index-card.element-neutral{
  --primoa-element-base: rgba(92,98,103,.20);
  --primoa-element-edge: rgba(70,76,82,.38);
}

#screen-zukan.is-primoa-index .primoa-index-image-wrap{
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),var(--primoa-element-base)) !important;
  border-color:var(--primoa-element-edge) !important;
  box-shadow:
    inset 0 -12px 20px var(--primoa-element-base),
    0 3px 10px rgba(85,63,30,.08) !important;
}

#screen-zukan.is-primoa-index .primoa-index-image-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    transparent 12%,
    var(--primoa-element-base) 58%,
    var(--primoa-element-edge) 116%
  );
  opacity:.76;
}

#screen-zukan.is-primoa-index .primoa-index-image{
  position:relative;
  z-index:0;
}

/* 未所持でも属性判別は残す。シルエット化との両立のため少しだけ減衰。 */
#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-image-wrap::before{
  opacity:.58;
}


/* =========================================================
   v236 CHARACTER INDEX - element background only
   属性色は画像の背面だけに表示し、キャラクター画像には一切重ねない。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-image-wrap{
  isolation:isolate;
  background:var(--primoa-element-base) !important;
  border-color:rgba(145,128,98,.22) !important;
  box-shadow:0 3px 10px rgba(85,63,30,.08) !important;
}
#screen-zukan.is-primoa-index .primoa-index-image-wrap::before,
#screen-zukan.is-primoa-index .primoa-index-image-wrap::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#screen-zukan.is-primoa-index .primoa-index-image{
  position:relative;
  z-index:1;
  opacity:1;
  mix-blend-mode:normal !important;
}
/* 未所持の既存シルエット処理は維持。属性オーバーレイだけ無効化。 */

/* =========================================================
   build686 CHARACTER INDEX - MENU / filter / sort
   属性・レアリティ・ショットタイプで絞り込み/並び替え。
   ========================================================= */
#screen-zukan .zukan-filter-menu-button{
  position:relative;
  min-width:58px;
  letter-spacing:.10em;
}
#screen-zukan .zukan-filter-menu-button.is-filtered::after{
  content:"";
  position:absolute;
  top:4px;
  right:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b98a35;
  box-shadow:0 0 0 2px rgba(255,250,238,.82);
}
.zukan-filter-menu-layer{
  position:fixed;
  inset:0;
  z-index:12020;
  background:rgba(55,45,31,.06);
  -webkit-tap-highlight-color:transparent;
}
.zukan-filter-popover{
  position:absolute;
  top:calc(var(--header-h) + var(--page-header-h, 64px) - 2px);
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(300px, calc(100vw - 20px));
  padding:14px 14px 12px;
  border:1px solid rgba(151,119,66,.30);
  border-radius:4px;
  background:rgba(250,247,239,.92);
  box-shadow:0 12px 28px rgba(72,54,29,.20), inset 0 0 0 1px rgba(255,255,255,.70);
  color:#5b4932;
  font-family:"Noto Serif JP",serif;
  max-height:calc(100dvh - var(--header-h) - var(--page-header-h, 64px) - 14px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.zukan-filter-section + .zukan-filter-section{
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(153,128,88,.18);
}
.zukan-filter-section-title{
  margin-bottom:7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:#8a6a35;
}
.zukan-filter-chip-grid{
  display:grid;
  gap:6px;
}
.zukan-filter-element-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.zukan-filter-rarity-grid,
.zukan-filter-sort-grid,
.zukan-filter-shot-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.zukan-filter-shot-grid .zukan-filter-chip{
  font-size:8px;
  letter-spacing:.015em;
}
.zukan-filter-chip{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  height:30px;
  padding:0 4px;
  border:1px solid rgba(140,118,82,.22);
  border-radius:3px;
  background:rgba(255,255,255,.58);
  color:#75644e;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.03em;
  cursor:pointer;
}
.zukan-filter-chip.active{
  border-color:rgba(151,111,48,.68);
  background:#f3ead8;
  color:#65491e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.68), 0 2px 5px rgba(95,68,29,.08);
}
.zukan-filter-chip.element-fire.active{background:rgba(207,78,55,.18);border-color:rgba(184,55,42,.45);}
.zukan-filter-chip.element-aqua.active{background:rgba(61,143,196,.18);border-color:rgba(43,117,177,.42);}
.zukan-filter-chip.element-wood.active{background:rgba(91,151,82,.18);border-color:rgba(65,126,67,.42);}
.zukan-filter-chip.element-light.active{background:rgba(232,190,60,.21);border-color:rgba(206,151,33,.48);}
.zukan-filter-chip.element-dark.active{background:rgba(128,84,174,.18);border-color:rgba(97,57,137,.42);}
.zukan-filter-chip.element-neutral.active{background:rgba(92,98,103,.15);border-color:rgba(70,76,82,.38);}
.zukan-filter-chip.rarity-sr.active{background:linear-gradient(120deg,rgba(255,247,213,.95),rgba(239,219,164,.78),rgba(255,250,232,.94));}
.zukan-filter-chip.rarity-r.active{background:rgba(226,218,204,.72);}
.zukan-filter-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(153,128,88,.18);
}
.zukan-filter-action{
  appearance:none;
  -webkit-appearance:none;
  height:34px;
  border-radius:3px;
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.10em;
  cursor:pointer;
}
.zukan-filter-reset{
  border:1px solid rgba(140,118,82,.24);
  background:rgba(255,255,255,.58);
  color:rgba(103,83,55,.72);
}
.zukan-filter-apply{
  border:1px solid rgba(151,111,48,.56);
  background:linear-gradient(180deg,#f5ecd9,#ead8b7);
  color:#65491e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.zukan-filter-chip:active,
.zukan-filter-action:active{
  transform:scale(.97);
}
.primoa-filter-empty{
  grid-column:1/-1;
  padding:46px 12px;
  text-align:center;
  color:rgba(91,75,54,.54);
  font-size:11px;
  letter-spacing:.05em;
}
@media (max-width:360px){
  .zukan-filter-popover{left:50%;right:auto;transform:translateX(-50%);width:calc(100vw - 16px);padding:12px;}
  .zukan-filter-element-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
  .zukan-filter-shot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
  .zukan-filter-chip{font-size:8.5px;}
  .zukan-filter-shot-grid .zukan-filter-chip{font-size:7.6px;}
}


/* =========================================================
   v239 CHARACTER INDEX - vertical element gradient
   属性色は背景レイヤーだけ。上は明るく、下へ向かって属性色を強める。
   キャラクター画像にはオーバーレイしない。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-image-wrap{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.52) 34%,
      var(--primoa-element-base) 72%,
      var(--primoa-element-edge) 100%
    ) !important;
  border-color:rgba(145,128,98,.22) !important;
  box-shadow:0 3px 10px rgba(85,63,30,.08) !important;
}
#screen-zukan.is-primoa-index .primoa-index-image-wrap::before,
#screen-zukan.is-primoa-index .primoa-index-image-wrap::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#screen-zukan.is-primoa-index .primoa-index-image{
  position:relative;
  z-index:1;
  opacity:1;
  mix-blend-mode:normal !important;
}


/* =========================================================
   v240 GLOBAL MENU ICON
   文字の MENU / メニュー を使わず、メニュートリガーは三本線で統一。
   ========================================================= */
.sasaphia-menu-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1em;
  font-family:Arial,Helvetica,sans-serif;
  font-size:21px;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  transform:scaleX(1.08);
  transform-origin:center;
}
#screen-zukan .zukan-filter-menu-button{
  min-width:42px;
  padding-left:9px;
  padding-right:9px;
  letter-spacing:0;
}
#screen-zukan .zukan-filter-menu-button .sasaphia-menu-glyph{
  font-size:20px;
}
.sasaphia-menu-heading-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Arial,Helvetica,sans-serif;
  font-size:22px;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
}

/* =========================================================
   v241 CHARACTER LEVEL UP
   ========================================================= */
#character-levelup-modal{
  z-index:265000;
}
#character-levelup-modal .character-levelup-modal-inner{
  width:min(92vw,390px);
  max-height:min(86dvh,720px);
  overflow-y:auto;
  padding:22px 18px 18px;
  border-radius:10px;
  background:linear-gradient(180deg,#fffdf8 0%,#f5efe4 100%);
  border:1px solid rgba(158,128,78,.30);
  box-shadow:0 20px 60px rgba(35,25,12,.34);
  color:#5f513d;
}
.character-levelup-head{
  text-align:center;
  padding:2px 28px 14px;
  border-bottom:1px solid rgba(150,122,79,.16);
}
.character-levelup-kicker{
  font-family:"Cinzel",serif;
  font-size:9px;
  letter-spacing:.28em;
  color:#b0915f;
  margin-bottom:5px;
}
.character-levelup-head h2{
  margin:0;
  font-size:19px;
  font-weight:600;
  letter-spacing:.08em;
  color:#55462f;
}
.character-levelup-level{
  margin-top:8px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:20px;
  font-weight:700;
  color:#8a682d;
}
.character-levelup-exp{
  margin-top:3px;
  font-size:10px;
  color:rgba(82,67,46,.64);
  letter-spacing:.04em;
}
.character-levelup-materials{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:14px;
}
.chara-level-material-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:8px 9px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(145,118,73,.15);
  border-radius:6px;
}
.chara-level-material-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.chara-level-material-icon.tone-small,
.chara-level-material-icon.tone-medium,
.chara-level-material-icon.tone-large{background:none}
.chara-level-material-icon img{
  display:block;
  width:42px;
  height:42px;
  object-fit:contain;
  object-position:center;
  filter:none;
  opacity:1;
}
.chara-level-material-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.chara-level-material-info strong{
  font-size:12px;
  font-weight:600;
  color:#594a35;
}
.chara-level-material-info span{
  font-size:9.5px;
  color:rgba(91,73,49,.60);
  white-space:nowrap;
}
.chara-level-material-stepper{
  display:grid;
  grid-template-columns:28px 30px 28px;
  align-items:center;
  justify-items:center;
  gap:2px;
}
.chara-level-material-stepper button{
  appearance:none;
  width:28px;
  height:28px;
  border:1px solid rgba(142,112,66,.26);
  border-radius:50%;
  background:#fffdf8;
  color:#775a2b;
  font-size:16px;
  line-height:1;
}
.chara-level-material-stepper button:disabled{
  opacity:.28;
}
.chara-level-material-stepper span{
  font-family:"Cinzel",serif;
  font-size:12px;
  color:#5f5038;
}
.character-levelup-max-btn{
  appearance:none;
  width:100%;
  height:34px;
  margin-top:10px;
  border:1px solid rgba(166,126,56,.35);
  border-radius:5px;
  background:rgba(234,216,180,.34);
  color:#7b5a24;
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
}
.character-levelup-max-btn:disabled{opacity:.38}
.character-levelup-summary{
  margin-top:12px;
  padding:11px 12px;
  border-top:1px solid rgba(150,122,79,.16);
  border-bottom:1px solid rgba(150,122,79,.16);
  background:rgba(255,255,255,.36);
}
.character-levelup-target{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.character-levelup-target span{
  font-size:10px;
  color:rgba(89,72,49,.60);
}
.character-levelup-target strong{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:16px;
  color:#75551f;
}
.character-levelup-target small{
  display:block;
  margin-left:auto;
  font-size:8px;
  color:#a36755;
}
.character-levelup-cost{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  font-size:10px;
  color:#6b5a40;
}
.character-levelup-cost b{
  color:#795a27;
  font-weight:700;
}
#character-levelup-modal.is-coin-short .character-levelup-cost span:last-child,
#character-levelup-modal.is-coin-short .character-levelup-cost span:last-child b{
  color:#a75145;
}
.character-levelup-actions{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:8px;
  margin-top:14px;
}
.character-levelup-actions button{
  appearance:none;
  height:40px;
  border-radius:5px;
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}
.character-levelup-cancel{
  border:1px solid rgba(123,106,79,.20);
  background:rgba(255,255,255,.50);
  color:#75664f;
}
.character-levelup-execute{
  border:1px solid rgba(156,113,45,.50);
  background:linear-gradient(180deg,#ead9b8,#d9bc84);
  color:#5d4218;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
}
.character-levelup-execute:disabled{
  opacity:.40;
  filter:grayscale(.35);
}
@media(max-width:350px){
  #character-levelup-modal .character-levelup-modal-inner{padding-left:12px;padding-right:12px}
  .chara-level-material-row{grid-template-columns:36px minmax(0,1fr) auto;gap:7px;padding-left:7px;padding-right:7px}
  .chara-level-material-icon{width:34px;height:34px}
  .chara-level-material-stepper{grid-template-columns:25px 26px 25px}
  .chara-level-material-stepper button{width:25px;height:25px}
  .chara-level-material-info span{font-size:9px}
}


/* =========================================================
   v246 Character growth notification dots
   レベルアップ / 限界突破を独立判定し、実行可能なボタンだけ通知。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn{
  position:relative;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-notice-dot{
  position:absolute;
  top:5px;
  right:6px;
  z-index:3;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e33b3b;
  border:1.5px solid rgba(255,255,255,.96);
  box-shadow:
    0 1px 3px rgba(75,25,18,.28),
    0 0 0 2px rgba(227,59,59,.10);
  pointer-events:none;
  animation:character-growth-dot-pulse-v246 1.8s ease-in-out infinite;
}
@keyframes character-growth-dot-pulse-v246{
  0%,100%{ transform:scale(1); box-shadow:0 1px 3px rgba(75,25,18,.28),0 0 0 2px rgba(227,59,59,.10); }
  50%{ transform:scale(1.10); box-shadow:0 1px 4px rgba(75,25,18,.32),0 0 0 4px rgba(227,59,59,.06); }
}


/* =========================================================
   v247 Growth notice visibility fix
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn.has-growth-notice{
  position:relative !important;
  overflow:visible !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn.has-growth-notice .box-carousel-action-notice-dot{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  top:4px !important;
  right:5px !important;
  z-index:20 !important;
}


/* =========================================================
   v248 GLOBAL INTERACTION LOCK
   PC: 右クリック/ドラッグ/選択を抑止
   iOS/Android: 長押し時の画像保存・選択・コールアウトを抑止
   入力欄だけは通常操作を維持する。
   ========================================================= */
html,
body,
button,
a,
img,
canvas,
svg,
div,
span,
section,
article,
header,
footer,
nav,
main,
label {
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}

img,
svg,
canvas {
  -webkit-user-drag:none !important;
  user-drag:none !important;
  pointer-events:auto;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
  -webkit-touch-callout:default !important;
  -webkit-user-select:text !important;
  user-select:text !important;
}


/* =========================================================
   v251 LEVEL UP - close button visual
   黒丸を廃止し、育成画面の淡い金・生成りトーンへ統一。
   ========================================================= */
#character-levelup-modal .modal-close-btn{
  top:11px !important;
  right:11px !important;
  width:32px !important;
  height:32px !important;
  border:1px solid rgba(167,137,84,.28) !important;
  border-radius:999px !important;
  background:rgba(255,252,244,.94) !important;
  color:rgba(123,94,48,.78) !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:1 !important;
  box-shadow:0 2px 8px rgba(102,77,38,.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#character-levelup-modal .modal-close-btn:active{
  transform:scale(.95) !important;
  background:rgba(246,235,211,.96) !important;
}


/* =========================================================
   v252 CHARACTER DETAIL - rarity badge contrast
   サイズ・位置は維持したまま、背景との境界だけ少し拾う。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
  opacity:.94 !important;
  filter:
    saturate(.94)
    brightness(1.035)
    drop-shadow(0 0 2px rgba(255,253,246,.98))
    drop-shadow(0 0 4px rgba(255,249,232,.72))
    drop-shadow(0 1px 2px rgba(141,108,51,.20))
    drop-shadow(0 3px 5px rgba(84,62,28,.16)) !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-r{
  opacity:.90 !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-sr{
  opacity:.98 !important;
}


/* =========================================================
   v253 CHARACTER DETAIL - rarity badge shadow boost
   サイズ・位置は維持。バッジの輪郭を少し強める。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
  opacity:.98 !important;
  filter:
    saturate(.98)
    brightness(1.05)
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 5px rgba(255,252,240,.82))
    drop-shadow(0 2px 3px rgba(112,82,36,.30))
    drop-shadow(0 5px 8px rgba(70,48,20,.22)) !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-r{
  opacity:.94 !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-sr{
  opacity:1 !important;
}


/* =========================================================
   v254 CHARACTER DETAIL - rarity badge sticker shadow
   サイズ・位置は維持。暗めの影で「貼ってある」感じを出す。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
  opacity:1 !important;
  filter:
    saturate(1)
    brightness(1.03)
    drop-shadow(0 1px 1px rgba(255,255,255,.22))
    drop-shadow(0 2px 2px rgba(64,45,22,.30))
    drop-shadow(0 4px 4px rgba(50,34,16,.28))
    drop-shadow(1px 6px 7px rgba(38,26,13,.18)) !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-r{
  opacity:.98 !important;
  filter:
    saturate(.95)
    brightness(1.01)
    drop-shadow(0 1px 1px rgba(255,255,255,.16))
    drop-shadow(0 2px 2px rgba(58,51,44,.34))
    drop-shadow(0 4px 5px rgba(43,38,33,.28))
    drop-shadow(1px 6px 7px rgba(35,31,27,.18)) !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge.rarity-sr{
  opacity:1 !important;
  filter:
    saturate(1.02)
    brightness(1.04)
    drop-shadow(0 1px 1px rgba(255,255,255,.22))
    drop-shadow(0 2px 2px rgba(104,72,25,.36))
    drop-shadow(0 4px 5px rgba(79,52,18,.30))
    drop-shadow(1px 6px 8px rgba(60,39,13,.20)) !important;
}


/* =========================================================
   v255 CHARACTER DETAIL - rarity badge size +20%
   R / SR 共通で表示サイズのみ20%拡大。位置・影・素材はそのまま。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
  width:clamp(60px, 18vw, 76.8px) !important;
}
@media (max-width:420px){
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
    width:clamp(55.2px, 16.8vw, 69.6px) !important;
  }
}
@media (max-width:360px){
  #box-grid.box-carousel:not(.remnant-carousel) .box-carousel-rarity-badge{
    width:clamp(50.4px, 15.6vw, 64.8px) !important;
  }
}


/* =========================================================
   v256 CHARACTER DETAIL - elemental background gradient
   一覧画面と同じく、人物画像には色をかけず背景側だけで属性を示唆。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view{
  --detail-element-soft: rgba(125,125,125,.07);
  --detail-element-deep: rgba(110,110,110,.12);
  background:
    linear-gradient(
      180deg,
      rgba(255,253,248,.92) 0%,
      rgba(255,252,245,.72) 22%,
      var(--detail-element-soft) 62%,
      var(--detail-element-deep) 100%
    ) !important;
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-fire{
  --detail-element-soft:rgba(190,91,72,.11);
  --detail-element-deep:rgba(165,70,55,.18);
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-aqua{
  --detail-element-soft:rgba(79,145,187,.11);
  --detail-element-deep:rgba(58,124,170,.18);
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-wood{
  --detail-element-soft:rgba(99,145,94,.11);
  --detail-element-deep:rgba(73,123,72,.18);
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-light{
  --detail-element-soft:rgba(214,176,78,.13);
  --detail-element-deep:rgba(189,145,47,.20);
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-dark{
  --detail-element-soft:rgba(132,96,169,.12);
  --detail-element-deep:rgba(96,61,132,.19);
}
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-view.element-neutral{
  --detail-element-soft:rgba(118,118,118,.065);
  --detail-element-deep:rgba(94,94,94,.12);
}

/* =========================================================
   v256 FULLSCREEN CHARACTER VIEWER - parchment / alchemia
   黒いフレームを廃止。生成り + 属性の淡いグラデーションへ。
   ========================================================= */
#primor-fullscreen-viewer{
  --viewer-element-soft:rgba(125,125,125,.08);
  --viewer-element-deep:rgba(110,110,110,.14);
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.94) 0 16%, rgba(255,252,243,.78) 42%, transparent 67%),
    linear-gradient(180deg, #f9f5eb 0%, #eee4d1 100%) !important;
  color:#675234;
}
#primor-fullscreen-viewer.element-fire{
  --viewer-element-soft:rgba(190,91,72,.12);
  --viewer-element-deep:rgba(164,67,52,.19);
}
#primor-fullscreen-viewer.element-aqua{
  --viewer-element-soft:rgba(79,145,187,.12);
  --viewer-element-deep:rgba(55,119,165,.19);
}
#primor-fullscreen-viewer.element-wood{
  --viewer-element-soft:rgba(99,145,94,.12);
  --viewer-element-deep:rgba(72,119,70,.19);
}
#primor-fullscreen-viewer.element-light{
  --viewer-element-soft:rgba(214,176,78,.14);
  --viewer-element-deep:rgba(187,143,45,.20);
}
#primor-fullscreen-viewer.element-dark{
  --viewer-element-soft:rgba(132,96,169,.13);
  --viewer-element-deep:rgba(96,61,132,.20);
}
#primor-fullscreen-viewer.element-neutral{
  --viewer-element-soft:rgba(118,118,118,.07);
  --viewer-element-deep:rgba(94,94,94,.13);
}
#primor-fullscreen-viewer .primor-fullscreen-bg{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.90) 0%, rgba(255,252,244,.54) 34%, transparent 63%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, var(--viewer-element-soft) 58%, var(--viewer-element-deep) 100%) !important;
}
#primor-fullscreen-viewer .primor-fullscreen-content::before{
  content:"";
  position:absolute;
  inset:16px 12px;
  pointer-events:none;
  border:1px solid rgba(168,134,76,.20);
  border-radius:18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 36px rgba(154,122,70,.045);
}
#primor-fullscreen-viewer .primor-fullscreen-img{
  padding:5px;
  box-sizing:border-box;
  background:rgba(255,253,247,.70);
  border:1px solid rgba(170,137,80,.24);
  box-shadow:
    0 12px 28px rgba(92,69,37,.16),
    0 3px 8px rgba(92,69,37,.10),
    inset 0 0 0 1px rgba(255,255,255,.72);
  filter:none !important;
}
#primor-fullscreen-viewer .primor-fullscreen-name{
  color:#6f5735 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.84) !important;
}
#primor-fullscreen-viewer .primor-fullscreen-close{
  border:1px solid rgba(164,132,77,.30) !important;
  background:rgba(255,252,244,.90) !important;
  color:#7e6035 !important;
  box-shadow:0 3px 10px rgba(89,65,31,.10) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#primor-fullscreen-viewer .primor-fullscreen-home-btn{
  border-color:rgba(183,145,76,.42) !important;
  background:linear-gradient(180deg,rgba(255,253,247,.95),rgba(229,211,171,.90)) !important;
  color:#654a20 !important;
  box-shadow:
    0 6px 16px rgba(100,75,38,.12),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}


/* =========================================================
   v257 CHARACTER DETAIL PANEL - elemental gradient inside frame
   フレーム内の台座背景だけを属性色にする。
   キャラクター画像自体にはオーバーレイ・blendを一切かけない。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual{
  --panel-element-top:rgba(255,255,255,.94);
  --panel-element-mid:rgba(130,130,130,.08);
  --panel-element-bottom:rgba(105,105,105,.16);
  background:
    linear-gradient(
      180deg,
      var(--panel-element-top) 0%,
      rgba(255,255,255,.82) 28%,
      var(--panel-element-mid) 67%,
      var(--panel-element-bottom) 100%
    ) !important;
}

/* FIRE */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-fire{
  --panel-element-mid:rgba(205,94,70,.16);
  --panel-element-bottom:rgba(177,65,49,.28);
}

/* AQUA */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-aqua{
  --panel-element-mid:rgba(78,151,196,.16);
  --panel-element-bottom:rgba(53,123,173,.27);
}

/* WOOD */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-wood{
  --panel-element-mid:rgba(100,151,91,.16);
  --panel-element-bottom:rgba(72,123,68,.27);
}

/* LIGHT */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-light{
  --panel-element-mid:rgba(222,181,74,.18);
  --panel-element-bottom:rgba(194,145,43,.29);
}

/* DARK */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-dark{
  --panel-element-mid:rgba(137,91,181,.17);
  --panel-element-bottom:rgba(96,59,135,.29);
}

/* NEUTRAL */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual.element-neutral{
  --panel-element-mid:rgba(118,118,118,.085);
  --panel-element-bottom:rgba(92,92,92,.16);
}

/* 人物は常に通常描画。背景色を人物に被せない。 */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual .box-carousel-img{
  position:relative;
  z-index:1;
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:none;
}

/* フレームは既存どおり最前面。 */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual::after{
  z-index:6;
}


/* =========================================================
   v258 FULLSCREEN CHARACTER VIEWER
   拡大表示では属性別カラーを使わず、全キャラ共通の生成り背景に統一。
   ========================================================= */
#primor-fullscreen-viewer,
#primor-fullscreen-viewer.element-fire,
#primor-fullscreen-viewer.element-aqua,
#primor-fullscreen-viewer.element-wood,
#primor-fullscreen-viewer.element-light,
#primor-fullscreen-viewer.element-dark,
#primor-fullscreen-viewer.element-neutral{
  --viewer-element-soft:rgba(178,154,118,.08) !important;
  --viewer-element-deep:rgba(150,126,93,.12) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.95) 0 18%, rgba(255,252,244,.80) 44%, transparent 69%),
    linear-gradient(180deg, #fbf8f1 0%, #eee4d4 100%) !important;
}

#primor-fullscreen-viewer .primor-fullscreen-bg{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.90) 0%, rgba(255,252,244,.54) 36%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(214,195,164,.08) 58%, rgba(183,158,122,.12) 100%) !important;
}


/* =========================================================
   v260 GACHA BANNER - IMAGE ONLY
   ガチャバナー上へHTML/CSSで文字を重ねない。
   タイトル・説明・排出率などの文字はバナー画像自体へ含める。
   ========================================================= */
#screen-summon .summon-detail-overlay,
#screen-summon .summon-detail-title,
#screen-summon .summon-detail-desc,
#screen-summon .summon-longpress-hint,
#screen-summon .banner-desc-overlay,
#screen-summon .banner-card-title{
  display:none !important;
}
#screen-summon .summon-detail-visual::before,
#screen-summon .summon-detail-visual::after,
#screen-summon .summon-banner-card::before,
#screen-summon .summon-banner-card::after{
  content:none !important;
}


/* =========================================================
   v261 邂逅 - FULLSCREEN BANNER TEST
   01 = 恒常 / 02 = 限定
   バナーを画面全面へ敷き、左右切替・天井・召喚ボタンを重ねる。
   ========================================================= */
#screen-summon{
  position:relative!important;
  overflow:hidden!important;
  background:#eee7da!important;
}
#screen-summon > .header{
  display:none!important;
}
#screen-summon .summon-layout{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
#screen-summon .summon-detail{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#screen-summon .summon-detail::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  inset:auto 0 0 0!important;
  height:34%!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(18,13,10,0) 0%,rgba(35,25,17,.10) 22%,rgba(26,19,14,.38) 70%,rgba(20,15,11,.54) 100%)!important;
}
#screen-summon .summon-detail-visual{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#eee7da!important;
  box-shadow:none!important;
}
#screen-summon .summon-detail-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* 左右ガチャ切替 */
#screen-summon .summon-banner-list{
  position:absolute!important;
  z-index:12!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  pointer-events:none!important;
  overflow:visible!important;
  background:transparent!important;
}
#screen-summon .summon-banner-arrow{
  pointer-events:auto!important;
  position:absolute!important;
  top:48%!important;
  transform:translateY(-50%)!important;
  width:42px!important;
  height:64px!important;
  min-width:42px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,247,230,.50)!important;
  border-radius:11px!important;
  background:rgba(246,238,222,.68)!important;
  color:#6b5336!important;
  font-family:Georgia,serif!important;
  font-size:42px!important;
  font-weight:400!important;
  line-height:56px!important;
  text-align:center!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85)!important;
  box-shadow:0 5px 18px rgba(38,27,18,.18),inset 0 1px 0 rgba(255,255,255,.72)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
#screen-summon .summon-banner-arrow-prev{ left:10px!important; }
#screen-summon .summon-banner-arrow-next{ right:10px!important; }

/* 天井ゲージをバナー上へ */
#screen-summon .pity-counter{
  position:absolute!important;
  z-index:14!important;
  left:16px!important;
  right:16px!important;
  bottom:calc(158px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  min-height:38px!important;
  margin:0!important;
  padding:7px 11px!important;
  border:1px solid rgba(244,230,200,.46)!important;
  border-radius:10px!important;
  background:rgba(248,242,231,.82)!important;
  box-shadow:0 6px 18px rgba(36,27,20,.16)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
#screen-summon .pity-note{
  position:absolute!important;
  z-index:14!important;
  left:18px!important;
  right:18px!important;
  bottom:calc(137px + env(safe-area-inset-bottom))!important;
  margin:0!important;
  padding:0!important;
  color:rgba(255,250,241,.92)!important;
  font-size:10px!important;
  text-align:right!important;
  text-shadow:0 1px 4px rgba(25,18,13,.75)!important;
}

/* 召喚ボタンをバナー最下部へ */
#screen-summon .summon-detail-btns{
  position:absolute!important;
  z-index:15!important;
  left:14px!important;
  right:14px!important;
  bottom:calc(76px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
}
#screen-summon .btn-gacha{
  min-height:56px!important;
  border-radius:11px!important;
  box-shadow:0 7px 18px rgba(31,23,17,.22)!important;
}

/* 小さい端末でもUI同士が衝突しない */
@media (max-height:700px){
  #screen-summon .summon-banner-arrow{ top:45%!important; height:56px!important; }
  #screen-summon .pity-counter{ bottom:calc(148px + env(safe-area-inset-bottom))!important; }
  #screen-summon .pity-note{ bottom:calc(128px + env(safe-area-inset-bottom))!important; }
  #screen-summon .summon-detail-btns{ bottom:calc(69px + env(safe-area-inset-bottom))!important; }
  #screen-summon .btn-gacha{ min-height:52px!important; }
}


/* =========================================================
   v262 GACHA FULLSCREEN - controls raised
   天井ゲージと召喚ボタンを上へ移動。
   下部ナビとの距離を確保する。
   ========================================================= */
#screen-summon .pity-counter{
  bottom:calc(206px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .pity-note{
  bottom:calc(185px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .summon-detail-btns{
  bottom:calc(124px + env(safe-area-inset-bottom)) !important;
}

@media (max-height:700px){
  #screen-summon .pity-counter{
    bottom:calc(198px + env(safe-area-inset-bottom)) !important;
  }
  #screen-summon .pity-note{
    bottom:calc(178px + env(safe-area-inset-bottom)) !important;
  }
  #screen-summon .summon-detail-btns{
    bottom:calc(119px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   v264 GACHA SCREEN - centered translucent title panel
   ========================================================= */
#screen-summon .summon-center-title-card{
  position:absolute;
  left:50%;
  top:66%;
  transform:translate(-50%,-50%);
  z-index:8;
  min-width:min(60vw,220px);
  max-width:min(72vw,280px);
  padding:15px 22px 17px;
  box-sizing:border-box;
  text-align:center;
  border:1px solid rgba(179,143,73,.48);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,253,242,.74),rgba(239,232,207,.62));
  box-shadow:
    0 8px 24px rgba(52,37,17,.16),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  pointer-events:none;
}
#screen-summon .summon-center-title-card::before{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:10px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(158,120,55,.38),transparent);
}
#screen-summon .summon-center-title-en{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:11px;
  line-height:1.1;
  letter-spacing:.10em;
  color:rgba(80,62,36,.88);
  margin-bottom:10px;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
#screen-summon .summon-center-title-jp{
  font-family:"Noto Serif JP",serif;
  font-size:21px;
  line-height:1.2;
  letter-spacing:.08em;
  font-weight:600;
  color:#4b3820;
  padding-bottom:8px;
  text-shadow:0 1px 0 rgba(255,255,255,.76);
}

/* switch arrows aligned to the title panel */
#screen-summon .summon-banner-arrow{
  top:66% !important;
  transform:translateY(-50%) !important;
  z-index:9 !important;
  width:42px !important;
  height:52px !important;
  border-radius:10px !important;
  border:1px solid rgba(168,132,68,.30) !important;
  background:rgba(255,251,239,.62) !important;
  color:#765a2d !important;
  box-shadow:
    0 5px 16px rgba(55,39,18,.13),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  font-size:31px !important;
}

/* mockに近い縦配置 */
#screen-summon .pity-counter{
  bottom:calc(198px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .pity-note{
  bottom:calc(177px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .summon-detail-btns{
  bottom:calc(112px + env(safe-area-inset-bottom)) !important;
}

@media (max-width:380px){
  #screen-summon .summon-center-title-card{
    top:65%;
    min-width:min(61vw,210px);
    padding:13px 18px 15px;
  }
  #screen-summon .summon-center-title-en{font-size:10px;}
  #screen-summon .summon-center-title-jp{font-size:19px;}
  #screen-summon .summon-banner-arrow{
    top:65% !important;
    width:38px !important;
    height:48px !important;
  }
}


/* =========================================================
   v265 GACHA SCREEN - raise controls / bare arrows
   中央カード・天井・召喚ボタンをさらに上へ。
   左右切替は枠/背景を廃止し、縁取り+影だけで背景から浮かせる。
   ========================================================= */

/* 中央タイトルを少し上へ */
#screen-summon .summon-center-title-card{
  top:61.5% !important;
}

/* 左右切替：背景・フレームなし */
#screen-summon .summon-banner-arrow{
  top:61.5% !important;
  width:48px !important;
  height:62px !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#f3e2a9 !important;
  font-size:42px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-shadow:
    0 2px 1px rgba(57,38,11,.95),
    0 0 3px rgba(57,38,11,.88),
    0 0 8px rgba(255,245,206,.48),
    0 4px 10px rgba(0,0,0,.42) !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.30));
}

/* hover/activeでも箱を出さない */
#screen-summon .summon-banner-arrow:hover,
#screen-summon .summon-banner-arrow:focus,
#screen-summon .summon-banner-arrow:active{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* 下部UI全体を上へ。ボトムナビとの隙間を明確に確保 */
#screen-summon .pity-counter{
  bottom:calc(236px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .pity-note{
  bottom:calc(215px + env(safe-area-inset-bottom)) !important;
}
#screen-summon .summon-detail-btns{
  bottom:calc(146px + env(safe-area-inset-bottom)) !important;
}

@media (max-width:380px){
  #screen-summon .summon-center-title-card{
    top:60.5% !important;
  }
  #screen-summon .summon-banner-arrow{
    top:60.5% !important;
    width:44px !important;
    height:58px !important;
    font-size:39px !important;
  }
}

@media (max-height:700px){
  #screen-summon .pity-counter{
    bottom:calc(226px + env(safe-area-inset-bottom)) !important;
  }
  #screen-summon .pity-note{
    bottom:calc(206px + env(safe-area-inset-bottom)) !important;
  }
  #screen-summon .summon-detail-btns{
    bottom:calc(141px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   v266 GACHA POOL DETAIL
   中央ガラスカードを入口に、排出対象と提供割合を確認できる。
   ========================================================= */
#screen-summon .summon-center-title-card{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  pointer-events:auto !important;
  color:inherit;
}
#screen-summon .summon-center-title-card:active{
  transform:translate(-50%,-50%) scale(.985) !important;
}
#screen-summon .summon-center-title-more{
  margin-top:4px;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  color:rgba(97,75,42,.62);
}
body.is-gacha-pool-detail-open{
  overflow:hidden !important;
}
.gacha-pool-detail-modal{
  position:fixed;
  inset:0;
  z-index:600000;
  display:none;
}
.gacha-pool-detail-modal.is-open{
  display:block;
}
.gacha-pool-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(44,34,23,.42);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.gacha-pool-detail-sheet{
  position:absolute;
  left:50%;
  top:calc(env(safe-area-inset-top) + 18px);
  bottom:calc(env(safe-area-inset-bottom) + 18px);
  transform:translateX(-50%);
  width:min(calc(100vw - 28px),430px);
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(177,141,74,.38);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.96),rgba(255,252,244,.80) 26%,transparent 55%),
    linear-gradient(180deg,#fbf8ef 0%,#eee3d0 100%);
  box-shadow:
    0 22px 64px rgba(48,34,18,.28),
    inset 0 0 0 1px rgba(255,255,255,.72);
  padding:24px 14px 18px;
  display:flex;
  flex-direction:column;
}
.gacha-pool-detail-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:38px;
  height:38px;
  border:1px solid rgba(161,127,69,.26);
  border-radius:50%;
  background:rgba(255,252,244,.72);
  color:#775b34;
  font-size:25px;
  line-height:34px;
  box-shadow:0 3px 10px rgba(67,48,23,.10);
}
.gacha-pool-detail-kicker{
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:9px;
  letter-spacing:.20em;
  text-align:center;
  color:#b18b49;
}
.gacha-pool-detail-title{
  margin:4px 46px 0;
  font-family:"Noto Serif JP",serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:.12em;
  text-align:center;
  color:#5e4829;
}
.gacha-pool-detail-subtitle{
  margin-top:3px;
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  letter-spacing:.12em;
  text-align:center;
  color:rgba(91,69,39,.58);
}
.gacha-pool-rate-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:16px 0 12px;
}
.gacha-pool-rate-box{
  min-width:0;
  padding:9px 4px 8px;
  border:1px solid rgba(174,140,78,.22);
  background:rgba(255,255,255,.48);
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.gacha-pool-rate-box span{
  display:block;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:9px;
  letter-spacing:.06em;
  color:rgba(92,71,42,.64);
}
.gacha-pool-rate-box b{
  display:block;
  margin-top:2px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:17px;
  font-weight:600;
  color:#72552c;
}
.gacha-pool-detail-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:1px 3px 16px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.gacha-pool-section{
  margin-top:10px;
}
.gacha-pool-section:first-child{margin-top:0}
.gacha-pool-section-head{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid rgba(166,128,65,.22);
  background:rgba(244,236,218,.94);
  font-family:"Cinzel","Noto Serif JP",serif;
  color:#72552f;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.gacha-pool-section-head span{
  font-size:10px;
  letter-spacing:.10em;
}
.gacha-pool-section-head b{
  font-size:12px;
  font-weight:600;
}
.gacha-pool-section-list{
  background:rgba(255,255,255,.30);
}
.gacha-pool-entry{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 8px;
  border-bottom:1px solid rgba(158,129,82,.11);
}
.gacha-pool-entry:last-child{border-bottom:none}
.gacha-pool-entry-img{
  flex:0 0 38px;
  width:38px;
  height:38px;
  object-fit:cover;
  border:1px solid rgba(160,127,70,.22);
  background:rgba(255,255,255,.62);
  box-shadow:0 2px 5px rgba(70,50,23,.08);
}
.gacha-pool-entry.is-material .gacha-pool-entry-img{
  object-fit:contain;
  padding:3px;
  box-sizing:border-box;
}
.gacha-pool-entry-main{
  min-width:0;
  flex:1 1 auto;
}
.gacha-pool-entry-name{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-family:"Noto Serif JP",serif;
  font-size:12px;
  color:#58452d;
}
.gacha-pool-entry-meta{
  margin-top:2px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:8px;
  letter-spacing:.08em;
  color:rgba(97,76,48,.50);
}
.gacha-pool-limited{
  flex:0 0 auto;
  padding:2px 5px;
  border:1px solid rgba(161,84,67,.28);
  background:rgba(178,72,57,.07);
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:7px;
  letter-spacing:.06em;
  color:#9b5546;
}
.gacha-pool-entry-rate{
  flex:0 0 64px;
  text-align:right;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:11px;
  color:#72552f;
}
.gacha-pool-detail-note{
  flex:0 0 auto;
  padding:10px 3px 0;
  border-top:1px solid rgba(161,126,68,.15);
  font-size:9px;
  line-height:1.55;
  color:rgba(83,68,49,.58);
}


/* =========================================================
   v267 GACHA - responsive fixed stack
   vh比率で各UIを置かず、ボトムナビからの距離で積み上げる。
   iPhone SE等の低い画面でもタイトル/天井/召喚ボタンが重ならない。
   ========================================================= */
#screen-summon{
  --gacha-nav-clearance:calc(78px + env(safe-area-inset-bottom));
  --gacha-actions-bottom:calc(var(--gacha-nav-clearance) + 30px);
  --gacha-pity-note-bottom:calc(var(--gacha-actions-bottom) + 74px);
  --gacha-pity-bottom:calc(var(--gacha-pity-note-bottom) + 22px);
  --gacha-title-bottom:calc(var(--gacha-pity-bottom) + 58px);
}

#screen-summon .summon-detail-btns{
  bottom:var(--gacha-actions-bottom) !important;
}
#screen-summon .pity-note{
  bottom:var(--gacha-pity-note-bottom) !important;
}
#screen-summon .pity-counter{
  bottom:var(--gacha-pity-bottom) !important;
}
#screen-summon .summon-center-title-card{
  top:auto !important;
  bottom:var(--gacha-title-bottom) !important;
  transform:translateX(-50%) !important;
}
#screen-summon .summon-center-title-card:active{
  transform:translateX(-50%) scale(.985) !important;
}
#screen-summon .summon-banner-arrow{
  top:auto !important;
  bottom:calc(var(--gacha-title-bottom) + 12px) !important;
  transform:none !important;
}

/* 小型端末では各部品そのものを少し圧縮し、位置関係は維持する */
@media (max-height:700px){
  #screen-summon{
    --gacha-nav-clearance:calc(72px + env(safe-area-inset-bottom));
    --gacha-actions-bottom:calc(var(--gacha-nav-clearance) + 24px);
    --gacha-pity-note-bottom:calc(var(--gacha-actions-bottom) + 66px);
    --gacha-pity-bottom:calc(var(--gacha-pity-note-bottom) + 20px);
    --gacha-title-bottom:calc(var(--gacha-pity-bottom) + 50px);
  }
  #screen-summon .summon-center-title-card{
    min-width:min(58vw,205px) !important;
    padding:11px 16px 12px !important;
  }
  #screen-summon .summon-center-title-en{
    margin-bottom:6px !important;
    font-size:9px !important;
  }
  #screen-summon .summon-center-title-jp{
    padding-bottom:5px !important;
    font-size:18px !important;
  }
  #screen-summon .summon-center-title-more{
    font-size:8px !important;
  }
  #screen-summon .summon-banner-arrow{
    bottom:calc(var(--gacha-title-bottom) + 5px) !important;
    font-size:36px !important;
    height:48px !important;
  }
  #screen-summon .summon-detail-btns{
    min-height:54px !important;
  }
}

/* 横幅が狭い端末でもボタン・中央カードを画面内へ固定 */
@media (max-width:375px){
  #screen-summon .summon-detail-btns{
    left:12px !important;
    right:12px !important;
    width:auto !important;
    gap:7px !important;
  }
  #screen-summon .btn-gacha{
    min-width:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #screen-summon .summon-center-title-card{
    width:min(58vw,205px) !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* 提供割合の分類見出し */
.gacha-pool-section-head em{
  font-style:normal;
  font-family:"Noto Serif JP",serif;
  font-size:9px;
  letter-spacing:.03em;
  opacity:.72;
}
.gacha-pool-empty{
  padding:13px 10px;
  text-align:center;
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  color:rgba(91,73,51,.48);
  background:rgba(255,255,255,.20);
}


/* =========================================================
   v268 GACHA POOL - tap character for ability detail
   ========================================================= */
.gacha-pool-entry.is-character{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border-left:0;
  border-right:0;
  border-top:0;
  border-radius:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  background:transparent;
}
.gacha-pool-entry.is-character:active{
  background:rgba(185,148,79,.08);
}
.gacha-pool-entry-chevron{
  flex:0 0 14px;
  margin-left:1px;
  font-family:"Noto Serif JP",serif;
  font-size:22px;
  line-height:1;
  color:rgba(127,96,49,.42);
}

/* 個別行のLIMITEDバッジは使用しない */
.gacha-pool-limited{
  display:none !important;
}

/* ガチャ提供割合から開く能力画面 */
#detail-modal.is-gacha-pool-preview{
  z-index:600100 !important;
}


/* =========================================================
   v269 GACHA POOL - section headings scroll normally
   提供割合の各カテゴリ見出しをsticky解除。
   ========================================================= */
.gacha-pool-section-head{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* =========================================================
   v270 GACHA CHARACTER DETAIL
   名前をブラウン系へ、右下レアリティバッジ追加、
   ガチャプレビューは選択中の凸段階における最大Lv想定。
   ========================================================= */

/* ガチャ詳細のキャラ名：白文字を廃止 */
#detail-modal.is-gacha-pickup-preview #gacha-pickup-title-name,
#detail-modal.is-gacha-pool-preview #gacha-pickup-title-name,
#detail-modal.is-gacha-pickup-preview #detail-name,
#detail-modal.is-gacha-pool-preview #detail-name{
  color:#5b4328 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
}

/* 既存のガチャ用タイトル名も見やすいブラウンへ */
#detail-modal .gacha-pickup-title-name{
  color:#5b4328 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
}

/* キャラ画像 + レアリティバッジ */
#detail-modal .gacha-preview-visual-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
}
#detail-modal .gacha-preview-visual-wrap .chara-visual-wrap{
  position:relative;
  z-index:1;
}
#detail-modal .gacha-preview-rarity-badge{
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:8;
  width:clamp(56px,17vw,72px);
  height:auto;
  pointer-events:none;
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.22))
    drop-shadow(0 2px 2px rgba(64,45,22,.32))
    drop-shadow(0 4px 5px rgba(50,34,16,.26));
}

/* 詳細モーダル内の名前表示を隠す旧指定より優先 */
#detail-modal.is-gacha-pickup-preview #detail-name,
#detail-modal.is-gacha-pool-preview #detail-name{
  display:block !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:21px !important;
  font-weight:600 !important;
  letter-spacing:.10em !important;
  margin-top:8px !important;
}


/* =========================================================
   v271 GACHA CHARACTER DETAIL
   画像下の重複した名前 / rarity / No. 表示を非表示。
   上部のキャラ名だけを残す。
   ========================================================= */
#detail-modal.is-gacha-pickup-preview #detail-name,
#detail-modal.is-gacha-pool-preview #detail-name,
#detail-modal.is-gacha-pickup-preview #detail-rank,
#detail-modal.is-gacha-pool-preview #detail-rank{
  display:none !important;
}

/* =========================================================
   v271 GACHA SCREEN - stronger bottom clearance / responsive
   下部ナビと召喚ボタンの間隔を広げ、
   高さの異なる画面でも下から順に積み上がる構成を維持する。
   ========================================================= */
#screen-summon{
  --gacha-bottom-nav-h:calc(78px + env(safe-area-inset-bottom));
  --gacha-bottom-gap:38px;
  --gacha-actions-bottom:calc(var(--gacha-bottom-nav-h) + var(--gacha-bottom-gap));
  --gacha-actions-h:58px;
  --gacha-pity-note-bottom:calc(var(--gacha-actions-bottom) + var(--gacha-actions-h) + 12px);
  --gacha-pity-bottom:calc(var(--gacha-pity-note-bottom) + 24px);
  --gacha-title-bottom:calc(var(--gacha-pity-bottom) + 58px);
}

#screen-summon .summon-detail-btns{
  bottom:var(--gacha-actions-bottom) !important;
}
#screen-summon .pity-note{
  bottom:var(--gacha-pity-note-bottom) !important;
}
#screen-summon .pity-counter{
  bottom:var(--gacha-pity-bottom) !important;
}
#screen-summon .summon-center-title-card{
  top:auto !important;
  bottom:var(--gacha-title-bottom) !important;
  transform:translateX(-50%) !important;
}
#screen-summon .summon-center-title-card:active{
  transform:translateX(-50%) scale(.985) !important;
}
#screen-summon .summon-banner-arrow{
  top:auto !important;
  bottom:calc(var(--gacha-title-bottom) + 10px) !important;
  transform:none !important;
}

/* iPhone SE 等、高さが短い端末 */
@media (max-height:700px){
  #screen-summon{
    --gacha-bottom-nav-h:calc(70px + env(safe-area-inset-bottom));
    --gacha-bottom-gap:30px;
    --gacha-actions-h:52px;
    --gacha-pity-note-bottom:calc(var(--gacha-actions-bottom) + var(--gacha-actions-h) + 9px);
    --gacha-pity-bottom:calc(var(--gacha-pity-note-bottom) + 21px);
    --gacha-title-bottom:calc(var(--gacha-pity-bottom) + 48px);
  }

  #screen-summon .summon-detail-btns{
    left:10px !important;
    right:10px !important;
    width:auto !important;
    gap:6px !important;
  }

  #screen-summon .btn-gacha{
    min-height:50px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  #screen-summon .summon-center-title-card{
    width:min(58vw,198px) !important;
    min-width:0 !important;
    padding:10px 14px 11px !important;
  }

  #screen-summon .summon-center-title-en{
    margin-bottom:5px !important;
    font-size:9px !important;
  }

  #screen-summon .summon-center-title-jp{
    padding-bottom:4px !important;
    font-size:17px !important;
  }

  #screen-summon .summon-center-title-more{
    font-size:7.5px !important;
  }

  #screen-summon .summon-banner-arrow{
    bottom:calc(var(--gacha-title-bottom) + 2px) !important;
    height:44px !important;
    font-size:34px !important;
  }
}

/* さらに低い画面ではUIの高さだけ圧縮し、位置関係は固定 */
@media (max-height:620px){
  #screen-summon{
    --gacha-bottom-nav-h:calc(66px + env(safe-area-inset-bottom));
    --gacha-bottom-gap:24px;
    --gacha-actions-h:48px;
    --gacha-pity-note-bottom:calc(var(--gacha-actions-bottom) + var(--gacha-actions-h) + 7px);
    --gacha-pity-bottom:calc(var(--gacha-pity-note-bottom) + 19px);
    --gacha-title-bottom:calc(var(--gacha-pity-bottom) + 42px);
  }

  #screen-summon .btn-gacha{
    min-height:46px !important;
  }

  #screen-summon .summon-center-title-card{
    width:min(56vw,188px) !important;
    padding:8px 12px 9px !important;
  }

  #screen-summon .summon-center-title-jp{
    font-size:16px !important;
  }
}

/* 狭い横幅でも左右余白を確保 */
@media (max-width:360px){
  #screen-summon{
    --gacha-bottom-gap:28px;
  }
  #screen-summon .summon-detail-btns{
    left:8px !important;
    right:8px !important;
  }
}


/* =========================================================
   v272 GACHA SCREEN - larger bottom breathing room
   ボトムナビと召喚ボタンの間隔を約3倍へ。
   下から積み上げる構造は維持するため、天井/タイトルも連動して上がる。
   ========================================================= */
#screen-summon{
  --gacha-bottom-gap:112px !important;
}

/* iPhone SEなど短い画面では、崩れ防止のため圧縮しつつ大きめの余白を維持 */
@media (max-height:700px){
  #screen-summon{
    --gacha-bottom-gap:82px !important;
  }
}

@media (max-height:620px){
  #screen-summon{
    --gacha-bottom-gap:64px !important;
  }
}

@media (max-width:360px){
  #screen-summon{
    --gacha-bottom-gap:76px !important;
  }
}

@media (max-width:360px) and (max-height:620px){
  #screen-summon{
    --gacha-bottom-gap:58px !important;
  }
}


/* =========================================================
   v273 GACHA PITY
   天井は、そのガチャのSRプールから1体確定。
   注記は半透明プレートで背景から分離。
   ========================================================= */
#screen-summon .pity-note{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:calc(100vw - 44px) !important;
  min-height:24px !important;
  padding:4px 12px 5px !important;
  box-sizing:border-box !important;
  border:1px solid rgba(155,119,59,.22) !important;
  border-radius:999px !important;
  background:rgba(255,251,239,.78) !important;
  color:#6a4f2c !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:.03em !important;
  text-align:center !important;
  text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
  box-shadow:
    0 3px 12px rgba(57,39,17,.12),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  white-space:nowrap !important;
  z-index:12 !important;
}

@media (max-width:360px){
  #screen-summon .pity-note{
    max-width:calc(100vw - 28px) !important;
    padding-left:9px !important;
    padding-right:9px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   v275 GACHA ARROWS
   左右矢印を少し上へ寄せ、浮きすぎる影を弱める。
   中央タイトルと同じ高さに馴染ませる。
   ========================================================= */
#screen-summon .summon-banner-arrow{
  bottom:calc(var(--gacha-title-bottom) + 24px) !important;
  color:#e9d596 !important;
  text-shadow:
    0 1px 1px rgba(66,45,17,.88),
    0 0 2px rgba(66,45,17,.68),
    0 2px 5px rgba(0,0,0,.22) !important;
  filter:none !important;
  opacity:.96 !important;
}

@media (max-height:700px){
  #screen-summon .summon-banner-arrow{
    bottom:calc(var(--gacha-title-bottom) + 16px) !important;
  }
}

@media (max-height:620px){
  #screen-summon .summon-banner-arrow{
    bottom:calc(var(--gacha-title-bottom) + 12px) !important;
  }
}


/* =========================================================
   v276 GACHA PITY NOTE
   楕円ピル型を廃止。
   左右へ薄くフェードする横長バーに変更し、画面へ馴染ませる。
   ========================================================= */
#screen-summon .pity-note{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(78vw,320px) !important;
  max-width:calc(100vw - 36px) !important;
  min-height:22px !important;
  padding:4px 20px 5px !important;
  box-sizing:border-box !important;
  border:none !important;
  border-radius:0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,251,239,0) 0%,
      rgba(255,251,239,.38) 13%,
      rgba(255,251,239,.74) 28%,
      rgba(255,251,239,.82) 50%,
      rgba(255,251,239,.74) 72%,
      rgba(255,251,239,.38) 87%,
      rgba(255,251,239,0) 100%
    ) !important;
  color:#6a4f2c !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:.03em !important;
  text-align:center !important;
  text-shadow:0 1px 0 rgba(255,255,255,.78) !important;
  box-shadow:none !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  white-space:nowrap !important;
  z-index:12 !important;
}

/* バー中央にだけごく薄い上下罫線。左右へフェード */
#screen-summon .pity-note::before,
#screen-summon .pity-note::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(151,114,55,0) 0%,
      rgba(151,114,55,.18) 22%,
      rgba(151,114,55,.28) 50%,
      rgba(151,114,55,.18) 78%,
      rgba(151,114,55,0) 100%
    );
}
#screen-summon .pity-note::before{ top:0; }
#screen-summon .pity-note::after{ bottom:0; }

@media (max-width:360px){
  #screen-summon .pity-note{
    width:min(84vw,292px) !important;
    max-width:calc(100vw - 24px) !important;
    padding-left:14px !important;
    padding-right:14px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   v277 GACHA BUTTONS - about two sizes smaller
   1回 / 10回ボタンを全体的に一回り以上コンパクト化。
   ========================================================= */
#screen-summon .summon-detail-btns{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(86vw,350px) !important;
  gap:8px !important;
}

#screen-summon .btn-gacha{
  min-height:46px !important;
  height:auto !important;
  padding:6px 10px !important;
  border-radius:4px !important;
}

#screen-summon .btn-gacha-label{
  font-size:17px !important;
  line-height:1.05 !important;
}

#screen-summon .btn-gacha-cost{
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1 !important;
}

#screen-summon .btn-gacha-gem-icon{
  width:13px !important;
  height:13px !important;
}

/* 小型端末ではさらに少しだけ圧縮 */
@media (max-width:375px), (max-height:700px){
  #screen-summon .summon-detail-btns{
    width:min(84vw,326px) !important;
    gap:6px !important;
  }
  #screen-summon .btn-gacha{
    min-height:42px !important;
    padding:5px 8px !important;
  }
  #screen-summon .btn-gacha-label{
    font-size:15px !important;
  }
  #screen-summon .btn-gacha-cost{
    font-size:9px !important;
  }
}


/* =========================================================
   v278 GACHA PITY NOTE - clean text only
   背景バー/ぼかし/罫線を完全撤去。
   文字だけを置き、背景に応じてごく薄い影で可読性を確保。
   ========================================================= */
#screen-summon .pity-note{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  max-width:calc(100vw - 36px) !important;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#6b5130 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  letter-spacing:.03em !important;
  text-align:center !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 0 4px rgba(255,249,235,.62) !important;
  white-space:nowrap !important;
  z-index:12 !important;
}

#screen-summon .pity-note::before,
#screen-summon .pity-note::after{
  content:none !important;
  display:none !important;
}

@media (max-width:360px){
  #screen-summon .pity-note{
    max-width:calc(100vw - 24px) !important;
    font-size:9px !important;
  }
}


/* =========================================================
   v279 GLOBAL USER FRAME
   - 横EXPバーを廃止し、RANK円周へ進捗を内包
   - 資源表示を楕円ピルからクールなフラットHUDへ
   - ヘッダー高は既存のまま
   ========================================================= */

/* --- Rank ring --- */
.global-user-frame .hud-lv-circle{
  --rank-exp:0deg;
  position:relative !important;
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    conic-gradient(
      from -90deg,
      #b98b35 0deg,
      #e1c56f var(--rank-exp),
      rgba(139,112,68,.18) var(--rank-exp),
      rgba(139,112,68,.18) 360deg
    ) !important;
  box-shadow:
    0 2px 7px rgba(92,67,28,.13),
    0 0 0 1px rgba(160,124,58,.16) !important;
}

/* inner ivory disc creates a thin circular EXP gauge */
.global-user-frame .hud-lv-circle::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.98), rgba(249,244,232,.98) 58%, rgba(232,220,194,.96));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.74),
    inset 0 0 0 2px rgba(155,119,54,.10);
  z-index:0;
}

/* subtle outer engraving */
.global-user-frame .hud-lv-circle::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:1px solid rgba(152,116,52,.26);
  pointer-events:none;
}

.global-user-frame .hud-lv-core{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  line-height:1;
}

.global-user-frame .hud-lv-label{
  font-size:7px !important;
  letter-spacing:.12em !important;
  color:rgba(112,83,43,.72) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.78) !important;
}

.global-user-frame .hud-lv-num{
  font-size:20px !important;
  font-weight:600 !important;
  color:#4b4946 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
}

/* horizontal EXP UI removed */
.global-user-frame .hud-exp-text,
.global-user-frame .hud-exp-row,
.global-user-frame .hud-exp-bg,
.global-user-frame .hud-exp-fill{
  display:none !important;
}

.global-user-frame .hud-left{
  gap:9px !important;
}

.global-user-frame .hud-info{
  justify-content:center !important;
  gap:0 !important;
}

.global-user-frame .hud-name{
  font-size:15px !important;
  line-height:1 !important;
  letter-spacing:.11em !important;
  color:#5c4528 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;
}

/* --- Resources: remove pill frames, make them larger + sharper --- */
.global-user-frame .hud-right{
  gap:13px !important;
}

.global-user-frame .hud-resource{
  position:relative !important;
  min-width:74px !important;
  height:32px !important;
  padding:2px 3px 3px !important;
  gap:6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* thin architectural underline; no enclosing capsule */
.global-user-frame .hud-resource::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:1px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(151,116,55,.18) 14%,
      rgba(151,116,55,.48) 50%,
      rgba(151,116,55,.18) 86%,
      transparent 100%
    );
}

.global-user-frame .hud-resource::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:20px;
  height:3px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(194,158,82,.42),transparent);
  filter:blur(.2px);
}

.global-user-frame .hud-res-icon{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  filter:drop-shadow(0 2px 2px rgba(74,55,28,.12));
}

.global-user-frame .hud-res-val{
  min-width:30px !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  color:#4b4946 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;
}

/* plus becomes a small line-control, not a circle pill */
.global-user-frame .hud-gem-plus-btn{
  width:19px !important;
  min-width:19px !important;
  height:19px !important;
  min-height:19px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#96713b !important;
  font-size:17px !important;
  font-weight:400 !important;
  line-height:18px !important;
  box-shadow:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.86) !important;
}

/* Keep the same overall header height; only internal density changes. */
.global-user-frame{
  min-height:var(--header-h) !important;
  box-sizing:border-box !important;
}

@media (max-width:360px){
  .global-user-frame .hud-lv-circle{
    width:47px !important;
    height:47px !important;
    flex-basis:47px !important;
  }
  .global-user-frame .hud-right{
    gap:7px !important;
  }
  .global-user-frame .hud-resource{
    min-width:65px !important;
    gap:4px !important;
  }
  .global-user-frame .hud-res-icon{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
  }
  .global-user-frame .hud-res-val{
    min-width:25px !important;
    font-size:12px !important;
  }
  .global-user-frame .hud-name{
    font-size:13px !important;
  }
}


/* =========================================================
   v280 GLOBAL USER FRAME
   RANK文字を拡大。
   ヘッダー高を変えず、RANK経験値リングを可能な限り大型化。
   ========================================================= */
.global-user-frame .hud-lv-circle{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
}

/* 外周リングをより端まで使う */
.global-user-frame .hud-lv-circle::before{
  inset:3px !important;
}
.global-user-frame .hud-lv-circle::after{
  inset:-1px !important;
}

/* RANKラベルを明確に大きく */
.global-user-frame .hud-lv-label{
  font-size:9px !important;
  letter-spacing:.13em !important;
  font-weight:600 !important;
}

/* 数字とのバランスも少し調整 */
.global-user-frame .hud-lv-num{
  font-size:21px !important;
  margin-top:1px !important;
}

/* 大型化分だけ左側の余白を詰め、ヘッダー全高は維持 */
.global-user-frame .hud-left{
  gap:7px !important;
}
.global-user-frame{
  padding-top:calc(env(safe-area-inset-top) + 5px) !important;
  padding-bottom:5px !important;
}

/* 小型端末でもリングをできるだけ大きく維持 */
@media (max-width:360px){
  .global-user-frame .hud-lv-circle{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
  .global-user-frame .hud-lv-label{
    font-size:8px !important;
  }
  .global-user-frame .hud-lv-num{
    font-size:20px !important;
  }
}


/* =========================================================
   v281 SHOOTING RESULT REWARD
   横3カードを廃止し、報酬を縦リスト表示。
   EXP / COINは確定、追加アイテム最大3枠。
   ========================================================= */
.shooting-result-reward-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  width:100% !important;
}

.shooting-result-reward-item{
  min-height:34px !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:6px 5px !important;
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  border:0 !important;
  border-bottom:1px solid rgba(154,125,74,.14) !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:left !important;
}

.shooting-result-reward-item:last-child{
  border-bottom:0 !important;
}

.shooting-result-reward-icon{
  width:26px !important;
  height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.shooting-result-reward-icon img{
  width:24px !important;
  height:24px !important;
  object-fit:contain !important;
}

.shooting-result-reward-icon > b{
  font-family:"Cinzel",serif !important;
  font-size:10px !important;
  color:#8a6841 !important;
}

.shooting-result-reward-copy{
  min-width:0 !important;
  display:block !important;
}

.shooting-result-reward-copy > b{
  display:block !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:#5d4931 !important;
}

.shooting-result-reward-copy > small{
  display:none !important;
}

.shooting-result-reward-item > strong{
  margin:0 !important;
  min-width:54px !important;
  text-align:right !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:12px !important;
  color:#80643b !important;
}

@media (max-height:700px){
  .shooting-result-reward-item{
    min-height:30px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }
  .shooting-result-reward-icon{
    width:23px !important;
    height:23px !important;
  }
  .shooting-result-reward-icon img{
    width:21px !important;
    height:21px !important;
  }
}


/* =========================================================
   v282 SHOOTING RESULT - fixed fullscreen / no scroll
   EXP + COIN + item x3 = 最大5報酬でも1画面内に収める。
   ========================================================= */

/* Result itself always occupies the viewport and never scrolls. */
#shooting-result,
#shooting-result.show{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
  box-sizing:border-box !important;
}

/* The result card is a fixed-height flex stack. */
#shooting-result .shooting-result-panel{
  width:min(calc(100vw - 20px),430px) !important;
  height:calc(100dvh - 18px) !important;
  max-height:calc(100dvh - 18px) !important;
  min-height:0 !important;
  margin:9px auto !important;
  padding:14px 18px 12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Upper result info stays compact and must not steal reward space. */
#shooting-result .shooting-result-rank{
  flex:0 0 auto !important;
  transform:scale(.84) !important;
  transform-origin:center top !important;
  margin-bottom:-12px !important;
}

#shooting-result .shooting-result-stats{
  flex:0 0 auto !important;
  margin-top:-4px !important;
}

#shooting-result .shooting-result-stat-row{
  min-height:28px !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
}

#shooting-result .shooting-result-time-row{
  min-height:31px !important;
  padding-top:2px !important;
  padding-bottom:2px !important;
}

/* Reward section is allowed up to exactly five compact rows. */
#shooting-result .shooting-result-reward-section{
  flex:0 1 auto !important;
  min-height:0 !important;
  margin-top:5px !important;
}

#shooting-result .shooting-result-reward-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  max-height:160px !important;
  overflow:hidden !important;
}

#shooting-result .shooting-result-reward-item{
  flex:0 0 30px !important;
  min-height:30px !important;
  height:30px !important;
  padding:3px 5px !important;
  box-sizing:border-box !important;
}

#shooting-result .shooting-result-reward-icon{
  width:22px !important;
  height:22px !important;
}

#shooting-result .shooting-result-reward-icon img{
  width:20px !important;
  height:20px !important;
}

#shooting-result .shooting-result-reward-copy > b{
  font-size:11px !important;
}

#shooting-result .shooting-result-reward-item > strong{
  font-size:11px !important;
}

/* First-clear strip is compact when present. */
#shooting-result .shooting-result-first-clear-bar{
  flex:0 0 auto !important;
  min-height:28px !important;
  padding:3px 8px !important;
  margin-top:2px !important;
}

/* Footer buttons always remain visible. */
#shooting-result .shooting-result-actions{
  flex:0 0 auto !important;
  margin-top:auto !important;
  padding-top:7px !important;
  gap:6px !important;
}

#shooting-result .shooting-result-actions button{
  min-height:36px !important;
  height:36px !important;
}

#shooting-result .shooting-result-note{
  display:none !important;
}

/* iPhone SE / short viewport: tighten further without scrolling. */
@media (max-height:650px){
  #shooting-result .shooting-result-panel{
    width:min(calc(100vw - 12px),430px) !important;
    height:calc(100dvh - 10px) !important;
    max-height:calc(100dvh - 10px) !important;
    margin:5px auto !important;
    padding:9px 14px 8px !important;
  }

  #shooting-result .shooting-result-rank{
    transform:scale(.73) !important;
    margin-bottom:-20px !important;
  }

  #shooting-result .shooting-result-stat-row{
    min-height:24px !important;
    padding-top:1px !important;
    padding-bottom:1px !important;
  }

  #shooting-result .shooting-result-time-row{
    min-height:26px !important;
  }

  #shooting-result .shooting-result-reward-section{
    margin-top:3px !important;
  }

  #shooting-result .shooting-result-reward-list{
    max-height:135px !important;
  }

  #shooting-result .shooting-result-reward-item{
    flex-basis:27px !important;
    min-height:27px !important;
    height:27px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }

  #shooting-result .shooting-result-first-clear-bar{
    min-height:25px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }

  #shooting-result .shooting-result-actions{
    padding-top:4px !important;
    gap:4px !important;
  }

  #shooting-result .shooting-result-actions button{
    min-height:32px !important;
    height:32px !important;
  }
}

/* Extra-short landscape-ish/small devices: preserve full-screen fit. */
@media (max-height:580px){
  #shooting-result .shooting-result-panel{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  #shooting-result .shooting-result-rank{
    transform:scale(.66) !important;
    margin-bottom:-25px !important;
  }

  #shooting-result .shooting-result-stat-row{
    min-height:22px !important;
  }

  #shooting-result .shooting-result-time-row{
    min-height:23px !important;
  }

  #shooting-result .shooting-result-reward-list{
    max-height:120px !important;
  }

  #shooting-result .shooting-result-reward-item{
    flex-basis:24px !important;
    min-height:24px !important;
    height:24px !important;
  }

  #shooting-result .shooting-result-reward-icon,
  #shooting-result .shooting-result-reward-icon img{
    width:18px !important;
    height:18px !important;
  }

  #shooting-result .shooting-result-actions button{
    min-height:30px !important;
    height:30px !important;
  }
}


/* =========================================================
   v283 RESULT REWARD
   EXP / COIN are guaranteed fixed rewards.
   SCOREに応じた説明文は完全削除。
   ========================================================= */
#shooting-result .shooting-result-note,
#shooting-result #shooting-result-reward-note,
#shooting-result .shooting-result-reward-note{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#shooting-result .shooting-result-reward-coin .shooting-result-reward-icon img{
  width:21px !important;
  height:21px !important;
  object-fit:contain !important;
}

#shooting-result .shooting-result-reward-exp,
#shooting-result .shooting-result-reward-coin{
  font-weight:600 !important;
}


/* =========================================================
   v288 RANK EXP RING
   12時位置を起点に、経験値が時計回りに蓄積する。
   ========================================================= */
.global-user-frame .hud-lv-circle{
  background:
    conic-gradient(
      from 0deg,
      #b98b35 0deg,
      #e1c56f var(--rank-exp),
      rgba(139,112,68,.18) var(--rank-exp),
      rgba(139,112,68,.18) 360deg
    ) !important;
  transform:rotate(-90deg) !important;
}

.global-user-frame .hud-lv-core{
  transform:rotate(90deg) !important;
}

.global-user-frame .hud-lv-circle::before,
.global-user-frame .hud-lv-circle::after{
  transform:none !important;
}


/* =========================================================
   v289 RANK EXP RING direction fix
   CSS conic-gradient の 0deg は12時位置。
   円自体を回転させず、0deg起点で時計回りに進捗を描く。
   ========================================================= */
.global-user-frame .hud-lv-circle{
  transform:none !important;
  background:
    conic-gradient(
      from 0deg,
      #b98b35 0deg,
      #e1c56f var(--rank-exp),
      rgba(139,112,68,.18) var(--rank-exp),
      rgba(139,112,68,.18) 360deg
    ) !important;
}

.global-user-frame .hud-lv-core{
  transform:none !important;
}


/* =========================================================
   v290 CRYSTAL SHOP
   6商品 + 注記まで、スクロールなしで1画面に収める。
   ========================================================= */
#shop-modal{
  align-items:center !important;
  justify-content:center !important;
  padding:
    max(8px, env(safe-area-inset-top))
    10px
    max(8px, env(safe-area-inset-bottom)) !important;
}

#shop-modal .shop-modal-inner{
  width:min(calc(100vw - 20px), 338px) !important;
  max-width:338px !important;
  height:auto !important;
  max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#shop-modal .shop-header{
  flex:0 0 auto !important;
  padding:14px 16px 11px !important;
}

#shop-modal .shop-kicker{
  margin-bottom:3px !important;
  font-size:9px !important;
}

#shop-modal .shop-title{
  margin-bottom:4px !important;
  font-size:21px !important;
}

#shop-modal .shop-subtitle{
  font-size:11px !important;
  line-height:1.25 !important;
}

#shop-modal .shop-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  padding:9px 12px 7px !important;
  gap:7px !important;
}

#shop-modal .shop-item{
  flex:1 1 0 !important;
  min-height:52px !important;
  max-height:62px !important;
  padding:8px 13px !important;
  border-radius:18px !important;
}

#shop-modal .shop-item-gem-icon{
  width:19px !important;
  height:19px !important;
}

#shop-modal .shop-item-count{
  font-size:16px !important;
}

#shop-modal .shop-item-price{
  font-size:16px !important;
}

#shop-modal .shop-item-unit{
  font-size:9px !important;
}

#shop-modal .shop-note{
  flex:0 0 auto !important;
  padding:8px 14px 10px !important;
  font-size:9px !important;
  line-height:1.3 !important;
}

/* iPhone SE級の低い画面でも6商品すべて表示 */
@media (max-height:650px){
  #shop-modal .shop-modal-inner{
    width:min(calc(100vw - 14px), 332px) !important;
    max-height:calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius:20px !important;
  }

  #shop-modal .shop-header{
    padding:10px 14px 8px !important;
  }

  #shop-modal .shop-kicker{
    margin-bottom:2px !important;
    font-size:8px !important;
  }

  #shop-modal .shop-title{
    margin-bottom:2px !important;
    font-size:19px !important;
  }

  #shop-modal .shop-subtitle{
    font-size:10px !important;
  }

  #shop-modal .shop-close-btn{
    width:26px !important;
    height:26px !important;
    font-size:15px !important;
  }

  #shop-modal .shop-list{
    padding:6px 10px 5px !important;
    gap:5px !important;
  }

  #shop-modal .shop-item{
    min-height:43px !important;
    max-height:50px !important;
    padding:5px 11px !important;
    border-radius:15px !important;
  }

  #shop-modal .shop-item-left{
    gap:7px !important;
  }

  #shop-modal .shop-item-gem-icon{
    width:17px !important;
    height:17px !important;
  }

  #shop-modal .shop-item-count,
  #shop-modal .shop-item-price{
    font-size:14px !important;
  }

  #shop-modal .shop-item-unit{
    font-size:8px !important;
  }

  #shop-modal .shop-note{
    padding:6px 10px 7px !important;
    font-size:8px !important;
    line-height:1.2 !important;
  }
}

@media (max-height:570px){
  #shop-modal .shop-header{
    padding:7px 12px 6px !important;
  }

  #shop-modal .shop-kicker{
    display:none !important;
  }

  #shop-modal .shop-title{
    font-size:17px !important;
  }

  #shop-modal .shop-list{
    padding:4px 9px !important;
    gap:4px !important;
  }

  #shop-modal .shop-item{
    min-height:39px !important;
    max-height:44px !important;
    padding:4px 10px !important;
  }

  #shop-modal .shop-note{
    padding:5px 9px 6px !important;
    font-size:7px !important;
  }
}


/* =========================================================
   v297 GACHA AURA SEQUENCE
   無色でじわっと出現 → ぼわっと発色 → 発光状態を維持
   全画面リビールのレイアウトには触れない独立レイヤー。
   ========================================================= */
#gacha-aura-overlay{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}

.gacha-aura{
  position:absolute;
  left:var(--aura-x,50%);
  top:var(--aura-y,35%);
  width:88px;
  height:88px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  filter:blur(7px) saturate(0);
  transition:
    opacity .48s ease,
    transform .65s cubic-bezier(.16,.68,.23,1),
    filter .65s ease;
}

.gacha-aura-halo,
.gacha-aura-core,
.gacha-aura-spark{
  position:absolute;
  inset:0;
  border-radius:50%;
  transition:
    background .32s ease,
    box-shadow .32s ease,
    opacity .32s ease,
    transform .38s cubic-bezier(.16,.72,.22,1),
    filter .38s ease;
}

/* 無色状態 */
.gacha-aura-halo{
  background:radial-gradient(circle,
    rgba(255,255,255,.72) 0%,
    rgba(236,234,226,.46) 34%,
    rgba(192,190,183,.18) 58%,
    transparent 76%);
  filter:blur(12px);
  opacity:.78;
}

.gacha-aura-core{
  inset:22%;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(229,227,220,.64) 45%,
    rgba(187,185,178,.18) 78%,
    transparent 100%);
  filter:blur(4px);
}

.gacha-aura-spark{
  inset:44%;
  background:rgba(255,255,255,.96);
  box-shadow:0 0 8px rgba(255,255,255,.66);
}

/* 全部いっぺんに、無色でじわっと出現 */
#gacha-aura-overlay.is-neutral-visible .gacha-aura{
  opacity:.94;
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0) saturate(0);
}

/* 発色時だけ一度ボワッと膨らみ、その後その色で維持 */
.gacha-aura.is-colored{
  filter:blur(0) saturate(1);
  animation:gachaAuraColorBloom 520ms cubic-bezier(.14,.72,.22,1) both;
}

/* ITEM = 銀 */
.gacha-aura.omen-silver.is-colored .gacha-aura-halo{
  background:radial-gradient(circle,
    rgba(250,252,255,.98) 0%,
    rgba(183,194,208,.82) 30%,
    rgba(112,126,145,.40) 58%,
    transparent 77%);
  box-shadow:0 0 18px rgba(139,153,172,.42);
}
.gacha-aura.omen-silver.is-colored .gacha-aura-core{
  background:radial-gradient(circle,
    #fff 0%,
    #dce3eb 34%,
    rgba(112,128,150,.78) 68%,
    transparent 100%);
}
.gacha-aura.omen-silver.is-colored .gacha-aura-spark{
  background:#fff;
  box-shadow:
    0 0 9px rgba(255,255,255,.96),
    0 0 18px rgba(141,156,177,.68);
}

/* R = 金 */
.gacha-aura.omen-gold.is-colored .gacha-aura-halo{
  background:radial-gradient(circle,
    rgba(255,248,211,.99) 0%,
    rgba(235,194,91,.86) 30%,
    rgba(186,128,28,.42) 58%,
    transparent 77%);
  box-shadow:0 0 20px rgba(213,159,50,.48);
}
.gacha-aura.omen-gold.is-colored .gacha-aura-core{
  background:radial-gradient(circle,
    #fffdf2 0%,
    #f0d17d 34%,
    rgba(201,145,39,.82) 68%,
    transparent 100%);
}
.gacha-aura.omen-gold.is-colored .gacha-aura-spark{
  background:#fff7cf;
  box-shadow:
    0 0 10px rgba(255,248,213,.98),
    0 0 20px rgba(223,172,66,.80);
}

/* SR = 虹 */
.gacha-aura.omen-rainbow.is-colored .gacha-aura-halo{
  background:
    conic-gradient(
      from 0deg,
      rgba(222,119,169,.84),
      rgba(141,108,218,.88),
      rgba(86,169,224,.88),
      rgba(87,194,159,.86),
      rgba(230,188,84,.88),
      rgba(222,119,169,.84)
    );
  filter:blur(13px);
  opacity:.90;
  box-shadow:
    0 0 20px rgba(119,99,213,.44),
    0 0 30px rgba(78,163,214,.28);
}
.gacha-aura.omen-rainbow.is-colored .gacha-aura-core{
  background:radial-gradient(circle,
    #fff 0%,
    rgba(244,233,255,.98) 22%,
    rgba(125,109,221,.78) 44%,
    rgba(78,170,220,.68) 59%,
    rgba(228,179,82,.60) 75%,
    transparent 100%);
}
.gacha-aura.omen-rainbow.is-colored .gacha-aura-spark{
  background:#fff;
  box-shadow:
    0 0 10px rgba(255,255,255,.98),
    0 0 22px rgba(122,101,219,.82),
    0 0 30px rgba(78,165,214,.52);
}

@keyframes gachaAuraColorBloom{
  0%{
    transform:translate(-50%,-50%) scale(1);
  }
  44%{
    transform:translate(-50%,-50%) scale(1.26);
  }
  100%{
    transform:translate(-50%,-50%) scale(1.08);
  }
}

@media (max-width:380px){
  .gacha-aura{
    width:76px;
    height:76px;
  }
}


/* =========================================================
   v298 AURA COLOR SEPARATION
   ITEM=銀 / R=金 / SR=虹 を明確化。
   結果オープン時にはJS側でオーラを消す。
   ========================================================= */

/* 発色後はグレー化を完全解除 */
#gacha-aura-overlay .gacha-aura.is-colored{
  filter:none !important;
  opacity:1 !important;
}

/* 銀：青みを帯びたメタリックシルバー */
#gacha-aura-overlay .gacha-aura.omen-silver.is-colored .gacha-aura-halo{
  background:radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(224,234,246,.98) 20%,
    rgba(167,184,207,.92) 40%,
    rgba(101,121,149,.68) 61%,
    rgba(73,92,119,.22) 74%,
    transparent 82%) !important;
  box-shadow:
    0 0 14px rgba(255,255,255,.95),
    0 0 28px rgba(135,157,188,.82),
    0 0 42px rgba(82,105,138,.42) !important;
  opacity:1 !important;
}
#gacha-aura-overlay .gacha-aura.omen-silver.is-colored .gacha-aura-core{
  background:radial-gradient(circle,
    #ffffff 0%,
    #edf4fb 24%,
    #c7d5e5 48%,
    #8097b5 72%,
    transparent 100%) !important;
}
#gacha-aura-overlay .gacha-aura.omen-silver.is-colored .gacha-aura-spark{
  background:#ffffff !important;
  box-shadow:
    0 0 10px #ffffff,
    0 0 22px rgba(183,202,225,.95),
    0 0 34px rgba(111,137,172,.62) !important;
}

/* 金：はっきりしたアンバーゴールド */
#gacha-aura-overlay .gacha-aura.omen-gold.is-colored .gacha-aura-halo{
  background:radial-gradient(circle,
    rgba(255,255,244,1) 0%,
    rgba(255,230,132,.99) 20%,
    rgba(231,178,54,.96) 41%,
    rgba(191,127,19,.74) 61%,
    rgba(137,83,7,.25) 74%,
    transparent 82%) !important;
  box-shadow:
    0 0 14px rgba(255,250,215,.98),
    0 0 30px rgba(235,183,58,.88),
    0 0 44px rgba(185,118,16,.48) !important;
  opacity:1 !important;
}
#gacha-aura-overlay .gacha-aura.omen-gold.is-colored .gacha-aura-core{
  background:radial-gradient(circle,
    #fffef1 0%,
    #ffe58b 25%,
    #e7b23b 50%,
    #b97812 74%,
    transparent 100%) !important;
}
#gacha-aura-overlay .gacha-aura.omen-gold.is-colored .gacha-aura-spark{
  background:#fffbe2 !important;
  box-shadow:
    0 0 10px #fff9cc,
    0 0 24px rgba(244,196,74,.98),
    0 0 36px rgba(200,133,20,.72) !important;
}

/* 虹：多色が一目で分かるようリング状に発色 */
#gacha-aura-overlay .gacha-aura.omen-rainbow.is-colored .gacha-aura-halo{
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,.98) 0 14%,
      rgba(255,255,255,.44) 15% 24%,
      transparent 42%),
    conic-gradient(
      from 0deg,
      #ff6f9f 0deg,
      #b778ff 55deg,
      #5aa8ff 115deg,
      #55d5b2 175deg,
      #f4d34f 235deg,
      #ff9a4f 295deg,
      #ff6f9f 360deg) !important;
  box-shadow:
    0 0 15px rgba(255,255,255,.98),
    0 0 31px rgba(139,104,226,.70),
    0 0 46px rgba(82,176,222,.48) !important;
  filter:blur(10px) !important;
  opacity:1 !important;
}
#gacha-aura-overlay .gacha-aura.omen-rainbow.is-colored .gacha-aura-core{
  background:
    radial-gradient(circle,
      #ffffff 0%,
      #f9f0ff 20%,
      #c893ff 39%,
      #69baff 55%,
      #62d4af 69%,
      #f2ce5b 82%,
      transparent 100%) !important;
}
#gacha-aura-overlay .gacha-aura.omen-rainbow.is-colored .gacha-aura-spark{
  background:#ffffff !important;
  box-shadow:
    0 0 11px #ffffff,
    0 0 22px rgba(195,137,255,.98),
    0 0 34px rgba(92,183,255,.90),
    0 0 46px rgba(92,214,173,.58) !important;
}


/* =========================================================
   v299 10-PULL SR SHIMMER RESTORE
   SRキャラの「煌めき」を専用レイヤーで復元。
   ガチャ予告オーラ/全画面リビールとは独立。
   ========================================================= */
#ten-result-modal .ten-result-card{
  position:relative !important;
  overflow:hidden !important;
}

#ten-result-modal .ten-card-sr-shimmer{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}

#ten-result-modal .ten-card-sr-shimmer::before{
  content:"";
  position:absolute;
  top:-18%;
  bottom:-18%;
  left:-62%;
  width:34%;
  opacity:0;
  transform:skewX(-16deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 20%,
    rgba(255,248,224,.88) 48%,
    rgba(255,255,255,.96) 54%,
    rgba(244,224,255,.72) 61%,
    rgba(255,255,255,.10) 82%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(2.5px);
  mix-blend-mode:screen;
  animation:tenSrShimmerSweep 2.8s ease-in-out infinite;
}

#ten-result-modal .ten-card-sr-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.72;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(255,242,195,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 72%, rgba(226,218,255,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 76%, rgba(255,255,255,.90) 0 1px, transparent 2px);
  animation:tenSrSparklePulse 1.9s ease-in-out infinite;
}

#ten-result-modal .ten-result-card.rarity-sr{
  box-shadow:
    0 8px 20px rgba(146,113,44,.22),
    0 0 16px rgba(223,195,122,.26),
    0 0 28px rgba(243,229,181,.16),
    inset 0 0 0 1px rgba(255,255,255,.70) !important;
}

@keyframes tenSrShimmerSweep{
  0%,14%{
    left:-62%;
    opacity:0;
  }
  24%{
    opacity:.28;
  }
  46%{
    opacity:1;
  }
  67%{
    left:126%;
    opacity:.22;
  }
  76%,100%{
    left:126%;
    opacity:0;
  }
}

@keyframes tenSrSparklePulse{
  0%,100%{
    opacity:.34;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.42));
  }
  50%{
    opacity:.92;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.92))
      drop-shadow(0 0 7px rgba(232,213,255,.52));
  }
}


/* =========================================================
   v300 10-PULL SR FRAME EMPHASIS + NEW BADGE POSITION
   SRは外周の発光で高レア感を強調。
   NEWは右上へ寄せ、左上の属性アイコンと干渉させない。
   ========================================================= */

/* SRカード外周の高レア発光 */
#ten-result-modal .ten-result-card.rarity-sr{
  border-color:rgba(223,190,103,.96) !important;
  box-shadow:
    0 0 0 1px rgba(255,249,224,.95),
    0 0 8px rgba(255,241,181,.86),
    0 0 18px rgba(228,190,91,.66),
    0 0 30px rgba(225,190,105,.34),
    0 9px 20px rgba(112,83,31,.18),
    inset 0 0 0 1px rgba(255,255,255,.78) !important;
  animation:tenSrFrameGlow 2.5s ease-in-out infinite !important;
}

/* 内側にも細い発光縁を追加 */
#ten-result-modal .ten-result-card.rarity-sr .ten-card-sr-shimmer{
  inset:1px !important;
  border:1px solid rgba(255,239,181,.54);
  box-shadow:
    inset 0 0 10px rgba(255,245,207,.26),
    inset 0 0 18px rgba(239,219,160,.12);
}

/* SRだけ、ごく薄い四隅の光 */
#ten-result-modal .ten-result-card.rarity-sr .ten-card-sr-shimmer{
  background:
    radial-gradient(circle at 0% 0%, rgba(255,251,226,.62) 0, rgba(255,239,181,.14) 14%, transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(255,251,226,.52) 0, rgba(255,239,181,.12) 14%, transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(255,251,226,.44) 0, rgba(255,239,181,.10) 14%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(255,251,226,.50) 0, rgba(255,239,181,.12) 14%, transparent 30%);
}

@keyframes tenSrFrameGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,249,224,.90),
      0 0 7px rgba(255,241,181,.72),
      0 0 16px rgba(228,190,91,.54),
      0 0 26px rgba(225,190,105,.26),
      0 9px 20px rgba(112,83,31,.16),
      inset 0 0 0 1px rgba(255,255,255,.76) !important;
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,252,236,1),
      0 0 11px rgba(255,244,194,.98),
      0 0 24px rgba(235,199,104,.82),
      0 0 38px rgba(226,190,98,.44),
      0 9px 22px rgba(112,83,31,.20),
      inset 0 0 8px rgba(255,247,217,.32) !important;
  }
}

/* NEWを右上へ。属性アイコンは左上のまま */
#ten-result-modal .ten-card-new-badge{
  top:6px !important;
  left:auto !important;
  right:5px !important;
  transform:none !important;
  z-index:12 !important;
  max-width:calc(100% - 34px);
  padding:1px 5px !important;
  font-size:7px !important;
  letter-spacing:1.1px !important;
}

/* 狭い端末ではさらにコンパクトに */
@media (max-width:360px){
  #ten-result-modal .ten-card-new-badge{
    top:5px !important;
    right:3px !important;
    padding:1px 4px !important;
    font-size:6px !important;
    letter-spacing:.9px !important;
  }
}


/* =========================================================
   v301 10-PULL RARITY FRAME COLORS
   ITEM = current neutral
   R    = gold frame, no effect
   SR   = rainbow frame + glow/shimmer
   ========================================================= */

/* ITEM: keep existing look. No override needed beyond explicitly cancelling rarity styling if mixed data occurs. */
#ten-result-modal .ten-result-card.is-material{
  animation:none !important;
}

/* R = gold frame, static only */
#ten-result-modal .ten-result-card.rarity-r:not(.is-material){
  border-color:#d5ad55 !important;
  box-shadow:
    0 0 0 1px rgba(255,246,213,.72),
    0 7px 16px rgba(91,66,22,.15),
    inset 0 0 0 1px rgba(255,255,255,.62) !important;
  animation:none !important;
}

#ten-result-modal .ten-result-card.rarity-r:not(.is-material)::before{
  opacity:.96 !important;
  filter:none !important;
}

/* SR = rainbow frame. Glow remains animated. */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material){
  border-color:transparent !important;
  background:
    linear-gradient(#fbfaf6,#fbfaf6) padding-box,
    conic-gradient(
      from 0deg,
      #ef8cae,
      #b48df2,
      #74b9ef,
      #74d7ba,
      #e8d064,
      #efa06d,
      #ef8cae
    ) border-box !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.84),
    0 0 10px rgba(184,141,241,.54),
    0 0 18px rgba(102,179,231,.42),
    0 0 28px rgba(223,193,91,.26),
    0 8px 18px rgba(77,61,38,.16),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
  animation:tenSrRainbowFrameGlow 2.4s ease-in-out infinite !important;
}

/* Inner rainbow edge, preserving existing shimmer sweep */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-sr-shimmer{
  border:1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    conic-gradient(
      from 0deg,
      rgba(239,140,174,.78),
      rgba(180,141,242,.74),
      rgba(116,185,239,.74),
      rgba(116,215,186,.72),
      rgba(232,208,100,.74),
      rgba(239,160,109,.74),
      rgba(239,140,174,.78)
    ) border-box !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.20),
    inset 0 0 20px rgba(190,168,240,.10) !important;
}

@keyframes tenSrRainbowFrameGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.80),
      0 0 8px rgba(184,141,241,.42),
      0 0 15px rgba(102,179,231,.32),
      0 0 23px rgba(223,193,91,.18),
      0 8px 18px rgba(77,61,38,.14),
      inset 0 0 0 1px rgba(255,255,255,.70) !important;
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.98),
      0 0 13px rgba(190,148,247,.74),
      0 0 24px rgba(105,190,239,.58),
      0 0 34px rgba(233,205,101,.32),
      0 8px 20px rgba(77,61,38,.16),
      inset 0 0 8px rgba(255,255,255,.28) !important;
  }
}


/* =========================================================
   v302 SR RAINBOW BORDER ONLY
   - ITEM: existing appearance
   - R: gold frame, no effect
   - SR: rainbow border + outer glow only
   - character artwork remains completely unobscured
   ========================================================= */

/* R: gold static frame */
#ten-result-modal .ten-result-card.rarity-r:not(.is-material){
  border:1px solid #d3ad58 !important;
  background:#fbfaf6 !important;
  box-shadow:
    0 0 0 1px rgba(255,247,218,.66),
    0 7px 16px rgba(91,66,22,.14),
    inset 0 0 0 1px rgba(255,255,255,.62) !important;
  animation:none !important;
}

/* SR: remove rainbow fill from the card body */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material){
  position:relative !important;
  border:2px solid transparent !important;
  background:
    linear-gradient(#fbfaf6,#fbfaf6) padding-box,
    conic-gradient(
      from 0deg,
      #ef88ac,
      #b88df2,
      #75bdf0,
      #79d7bc,
      #ead36a,
      #efa06e,
      #ef88ac
    ) border-box !important;
  box-shadow:
    0 0 8px rgba(185,145,244,.50),
    0 0 16px rgba(103,184,234,.38),
    0 0 25px rgba(228,199,98,.22),
    0 8px 18px rgba(76,60,38,.14) !important;
  animation:tenSrBorderGlowV302 2.4s ease-in-out infinite !important;
  overflow:hidden !important;
}

/* Dedicated shimmer layer must NOT paint the whole card.
   Keep only sweep/spark effects; clear any previous rainbow background. */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-sr-shimmer{
  inset:2px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:9 !important;
  pointer-events:none !important;
}

/* Ensure the artwork is above any decorative border layer and remains untouched */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-img{
  z-index:4 !important;
  filter:brightness(1.02) saturate(1.00) !important;
}

/* Keep NEW / element / labels clearly above the shimmer */
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-new-badge,
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-element-icon,
#ten-result-modal .ten-result-card.rarity-sr:not(.is-material) .ten-card-bottom{
  z-index:12 !important;
}

@keyframes tenSrBorderGlowV302{
  0%,100%{
    box-shadow:
      0 0 7px rgba(184,141,241,.42),
      0 0 14px rgba(102,179,231,.30),
      0 0 21px rgba(223,193,91,.16),
      0 8px 18px rgba(76,60,38,.13) !important;
  }
  50%{
    box-shadow:
      0 0 11px rgba(190,148,247,.72),
      0 0 21px rgba(105,190,239,.52),
      0 0 30px rgba(233,205,101,.28),
      0 8px 20px rgba(76,60,38,.15) !important;
  }
}


/* =========================================================
   v305 AURA RING ANCHOR
   召喚演出の外周リングと同じ正方形基準へ固定。
   端末の縦横比が変わっても、配置は真円のまま。
   ========================================================= */
#gacha-aura-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99990 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

#gacha-aura-overlay .gacha-aura-ring-stage{
  position:absolute;
  left:50%;
  top:42%;
  width:min(88vw,380px);
  height:min(88vw,380px);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* オーラはリング上の座標へ配置。画面全体の%は使わない。 */
#gacha-aura-overlay .gacha-aura{
  position:absolute !important;
  width:64px !important;
  height:64px !important;
  margin:0 !important;
  transform:translate(-50%,-50%) scale(.72);
}

/* 既存の出現/発色アニメーションは維持 */
#gacha-aura-overlay.is-neutral-visible .gacha-aura{
  opacity:.94;
  transform:translate(-50%,-50%) scale(1);
}

/* 狭い端末でもリング比率は同じ。オーラだけ少し小さくする。 */
@media (max-width:380px){
  #gacha-aura-overlay .gacha-aura{
    width:58px !important;
    height:58px !important;
  }
}




/* =========================================================
   v318 Detail modal overlay close button
   - ×はスクロール領域の外（#detail-modal直下）へ移動
   - モーダル本文をスクロールしても位置が1pxも動かない
   - 凸タブはsticky解除し、本文と一緒にスクロール
   ========================================================= */

/* 凸ボタン列は画面に残さない。通常コンテンツとして一緒に流す。 */
#detail-modal .gacha-resonance-switch {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* ×はモーダルのスクロール要素ではなくoverlay基準で固定。 */
#detail-modal > .detail-modal-close-x,
#detail-modal > .modal-close-btn.detail-modal-close-x {
  position: absolute !important;
  top: calc(6vh + 12px) !important;
  right: max(
    30px,
    calc((100vw - min(400px, calc(100vw - 36px))) / 2 + 12px)
  ) !important;
  left: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  float: none !important;

  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;

  border-radius: 50% !important;
  border: 1px solid rgba(157,124,65,.34) !important;
  background: rgba(255,252,246,.97) !important;
  color: #6f5a39 !important;

  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 300 !important;
  line-height: 38px !important;
  text-align: center !important;

  display: block !important;
  z-index: 7000 !important;
  box-shadow: 0 7px 18px rgba(69,49,23,.18) !important;
  transform: none !important;

  -webkit-tap-highlight-color: transparent !important;
}

#detail-modal > .detail-modal-close-x:active,
#detail-modal > .modal-close-btn.detail-modal-close-x:active {
  transform: scale(.92) !important;
}

/* 画面が低い端末ではmodal上端が6vhより下がりにくいので少し詰める。 */
@media (max-height: 700px) {
  #detail-modal > .detail-modal-close-x,
  #detail-modal > .modal-close-btn.detail-modal-close-x {
    top: calc(4vh + 12px) !important;
  }
}




/* =========================================================
   v320 GACHA NAVIGATION — TRANSLUCENT GOLD-BROWN TRIANGLE
   背景に溶ける薄い金茶の三角形。ボタン感を消して上品に。
   ========================================================= */
#screen-summon .summon-banner-arrow{
  width:40px !important;
  height:52px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:transparent !important;
  font-size:0 !important;
  line-height:1 !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;

  -webkit-tap-highlight-color:transparent !important;
  transition:
    opacity .18s ease,
    transform .18s ease !important;
}

/* 文字ではなく、CSSの塗り三角形 */
#screen-summon .summon-banner-arrow::before{
  content:"" !important;
  display:block !important;
  width:0 !important;
  height:0 !important;

  border-top:8px solid transparent !important;
  border-bottom:8px solid transparent !important;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.72))
    drop-shadow(0 1px 3px rgba(84,54,24,.14)) !important;

  pointer-events:none !important;
}

/* LEFT */
#screen-summon .summon-banner-arrow-prev{
  left:14px !important;
}
#screen-summon .summon-banner-arrow-prev::before{
  border-right:11px solid rgba(148,105,45,.58) !important;
  border-left:0 !important;
}

/* RIGHT */
#screen-summon .summon-banner-arrow-next{
  right:14px !important;
}
#screen-summon .summon-banner-arrow-next::before{
  border-left:11px solid rgba(148,105,45,.58) !important;
  border-right:0 !important;
}

/* hover/focusは少しだけ濃く。常時ギラつかせない */
#screen-summon .summon-banner-arrow:hover::before,
#screen-summon .summon-banner-arrow:focus-visible::before{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.80))
    drop-shadow(0 1px 4px rgba(84,54,24,.18))
    brightness(.96) !important;
}

#screen-summon .summon-banner-arrow:focus-visible{
  outline:none !important;
}

#screen-summon .summon-banner-arrow:active{
  transform:scale(.91) !important;
  opacity:.72 !important;
}

@media (max-width:360px){
  #screen-summon .summon-banner-arrow-prev{
    left:8px !important;
  }
  #screen-summon .summon-banner-arrow-next{
    right:8px !important;
  }
  #screen-summon .summon-banner-arrow::before{
    border-top-width:7px !important;
    border-bottom-width:7px !important;
  }
  #screen-summon .summon-banner-arrow-prev::before{
    border-right-width:10px !important;
  }
  #screen-summon .summon-banner-arrow-next::before{
    border-left-width:10px !important;
  }
}


/* =========================================================
   v322 CHARACTER DETAIL - rarity badge synchronized shrink
   画像縮小と同じタイミングでR/SRバッジも違和感なく縮小。
   実サイズはJSがinline !importantで連動制御する。
   ========================================================= */
#box-grid.box-carousel:not(.remnant-carousel)
.box-carousel-view.is-sheet-animating
.box-carousel-rarity-badge {
  transition:
    width .32s cubic-bezier(.22,.78,.24,1),
    right .32s cubic-bezier(.22,.78,.24,1),
    bottom .32s cubic-bezier(.22,.78,.24,1) !important;
}


/* =========================================================
   v323 iOS Safari - GACHA translucency fix
   中央タイトルカード / 天井ゲージの「白ベタ化」を避ける。
   backdrop-filter を外し、RGBAそのものの透明度で見せる。
   ========================================================= */

/* 中央タイトルボックス */
#screen-summon .summon-center-title-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,252,240,.48) 0%,
      rgba(236,224,198,.34) 100%
    ) !important;
  border-color:rgba(130,94,45,.34) !important;
  box-shadow:
    0 7px 18px rgba(62,42,20,.12),
    inset 0 1px 0 rgba(255,255,255,.46) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  /* iOS compositingを安定させる */
  isolation:isolate !important;
  -webkit-transform:translateX(-50%) translateZ(0) !important;
  transform:translateX(-50%) translateZ(0) !important;
}

/* 押下時も透過感を維持 */
#screen-summon .summon-center-title-card:active{
  transform:translateX(-50%) translateZ(0) scale(.985) !important;
}

/* 天井ゲージ背景。完全透明ではなく「薄い金茶ガラス」程度に。 */
#screen-summon .pity-counter{
  background:
    linear-gradient(
      90deg,
      rgba(255,251,239,.18) 0%,
      rgba(255,249,234,.38) 14%,
      rgba(248,239,218,.44) 50%,
      rgba(255,249,234,.38) 86%,
      rgba(255,251,239,.18) 100%
    ) !important;
  border:1px solid rgba(135,100,52,.18) !important;
  border-radius:10px !important;
  box-shadow:
    0 4px 12px rgba(66,45,22,.08),
    inset 0 1px 0 rgba(255,255,255,.32) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  isolation:isolate !important;
  -webkit-transform:translateZ(0) !important;
  transform:translateZ(0) !important;
}

/* iOS Safari向け：さらに白濁しにくい単色半透明へ */
@supports (-webkit-touch-callout: none) {
  #screen-summon .summon-center-title-card{
    background:rgba(244,234,211,.42) !important;
  }

  #screen-summon .pity-counter{
    background:rgba(247,239,220,.34) !important;
  }
}


/* =========================================================
   v327 邂逅画面 中央UIの可読性改善
   - 透け感は残す
   - 中央タイトルボックス / 天井ゲージを少し濃く
   - 文字コントラストを上げる
   ========================================================= */

/* 中央タイトルボックス */
#screen-summon .summon-center-title-card{
  background:
    linear-gradient(
      180deg,
      rgba(255,251,239,.76) 0%,
      rgba(239,226,199,.68) 100%
    ) !important;
  border-color:rgba(122,88,44,.42) !important;
  box-shadow:
    0 8px 20px rgba(58,39,18,.16),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* タイトル内テキストを少し濃く */
#screen-summon .summon-center-title-card,
#screen-summon .summon-center-title-card *{
  text-shadow:0 1px 0 rgba(255,255,255,.66) !important;
}

#screen-summon .summon-detail-title{
  color:#4f3823 !important;
}

#screen-summon .summon-detail-desc{
  color:rgba(86,64,39,.76) !important;
}

/* 天井ゲージ */
#screen-summon .pity-counter{
  background:
    linear-gradient(
      90deg,
      rgba(255,250,237,.58) 0%,
      rgba(248,238,215,.70) 18%,
      rgba(243,231,205,.74) 50%,
      rgba(248,238,215,.70) 82%,
      rgba(255,250,237,.58) 100%
    ) !important;
  border-color:rgba(127,92,47,.24) !important;
  box-shadow:
    0 5px 14px rgba(60,41,20,.10),
    inset 0 1px 0 rgba(255,255,255,.56) !important;
}

/* 天井文字・数値のコントラスト */
#screen-summon .pity-counter,
#screen-summon .pity-counter .pity-label,
#screen-summon .pity-counter .pity-num{
  color:#735b3e !important;
  text-shadow:0 1px 0 rgba(255,255,255,.68) !important;
}

/* iOS Safari: 透明すぎない単色寄りに固定 */
@supports (-webkit-touch-callout: none) {
  #screen-summon .summon-center-title-card{
    background:rgba(244,233,208,.72) !important;
  }

  #screen-summon .pity-counter{
    background:rgba(246,236,213,.66) !important;
  }
}


/* =========================================================
   v329 TITLE / HOME BGM toggle
   ========================================================= */
.global-bgm-toggle{
  position:fixed;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom) + 92px);
  z-index:560;
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(250,246,233,.24);
  box-shadow:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  opacity:.72;
}

.global-bgm-toggle .global-bgm-icon{
  display:block;
  width:24px;
  height:24px;
  object-fit:contain;
  opacity:.58;
  filter:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.global-bgm-toggle.is-muted{
  background:rgba(245,241,232,.14);
  opacity:.48;
}

.global-bgm-toggle.is-muted .global-bgm-icon{
  opacity:.32;
}

.global-bgm-toggle:active{
  transform:scale(.94);
  opacity:.9;
}

@media (max-width:380px){
  .global-bgm-toggle{
    right:10px;
    bottom:calc(env(safe-area-inset-bottom) + 86px);
    width:34px;
    height:34px;
  }
  .global-bgm-toggle .global-bgm-icon{
    width:22px;
    height:22px;
  }
}


/* =========================================================
   v332 BGM OFF slash
   OFF時だけスピーカーアイコンに斜線を重ねる
   ========================================================= */
.global-bgm-toggle{
  overflow:visible;
}

.global-bgm-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:27px;
  height:2px;
  border-radius:999px;
  background:rgba(78,58,35,.72);
  opacity:0;
  transform:translate(-50%,-50%) rotate(-45deg);
  transform-origin:center;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  transition:opacity .16s ease;
}

.global-bgm-toggle.is-muted::after{
  opacity:.72;
}

@media (max-width:380px){
  .global-bgm-toggle::after{
    width:24px;
    height:2px;
  }
}


/* =========================================================
   v333 USER FRAME redesign
   RANK円を四角フレームの中に入れず、
   「○──────|」のように円 + 横バーとして分離する。
   ========================================================= */

/* ヘッダー全体を大きな四角い板に見せない */
.global-user-frame{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* 左側は 円 + バー の独立ユニット */
.global-user-frame .hud-left{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  overflow:visible !important;
}

/* RANK円は完全に独立。バーより手前に出す */
.global-user-frame .hud-lv-circle{
  position:relative !important;
  z-index:3 !important;
  flex:0 0 58px !important;
  width:58px !important;
  height:58px !important;
}

/* 名前側だけを細長いフレームにする */
.global-user-frame .hud-info{
  position:relative !important;
  z-index:1 !important;
  height:34px !important;
  min-width:112px !important;
  max-width:150px !important;
  margin-left:5px !important;
  padding:0 18px 0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;

  /* 左辺は作らない。円とは別パーツとして右へ伸びる */
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:1px solid rgba(92,88,82,.22) !important;
  border-left:0 !important;
  border-radius:0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(249,245,233,.18) 0%,
      rgba(247,241,225,.54) 34%,
      rgba(244,236,215,.66) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    3px 3px 10px rgba(76,55,27,.06) !important;
}

/* 円からバーへつながる細い水平線 */
.global-user-frame .hud-info::before{
  content:"" !important;
  position:absolute !important;
  left:-7px !important;
  right:7px !important;
  top:50% !important;
  height:1px !important;
  transform:translateY(-50%) !important;
  background:
    linear-gradient(
      90deg,
      rgba(148,111,49,.16),
      rgba(148,111,49,.34) 25%,
      rgba(148,111,49,.18) 100%
    ) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

/* PLAYER / resource boundary divider removed in UI Foundation v2.1. */
.global-user-frame .hud-info::after{
  content:none !important;
  display:none !important;
}

/* 名前はバー中央に載せる */
.global-user-frame .hud-name{
  position:relative !important;
  z-index:2 !important;
  max-width:118px !important;
  padding:0 !important;
  line-height:1 !important;
}

/* 小型端末でも 円を四角の中へ戻さない */
@media (max-width:390px){
  .global-user-frame .hud-lv-circle{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }

  .global-user-frame .hud-info{
    height:31px !important;
    min-width:96px !important;
    max-width:126px !important;
    margin-left:4px !important;
    padding:0 12px 0 8px !important;
  }

  .global-user-frame .hud-name{
    max-width:100px !important;
    font-size:13px !important;
  }
}


/* =========================================================
   v334 USER FRAME refinement
   「○══════|」に寄せる。塗りつぶし箱ではなく、線だけの横フレーム。
   ========================================================= */

/* 旧ヘッダー全体の下線も消す */
.global-user-frame::after{
  display:none !important;
  content:none !important;
}

/* 左ユニットの間隔をさらに自然に */
.global-user-frame .hud-left{
  gap:0 !important;
}

/* 名前側は背景板をほぼ消して、上下線 + 右端線だけ */
.global-user-frame .hud-info{
  height:32px !important;
  min-width:116px !important;
  max-width:154px !important;
  margin-left:2px !important;
  padding:0 16px 0 12px !important;

  border-top:0 !important;
  border-right:0 !important;
  border-bottom:1px solid rgba(92,88,82,.22) !important;
  border-left:0 !important;
  border-radius:0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.30) 30%,
      rgba(250,250,249,.38) 72%,
      rgba(255,255,255,.10) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    2px 2px 7px rgba(76,55,27,.03) !important;
}

/* 円のすぐ右から自然につなぐ */
.global-user-frame .hud-info::before{
  content:"" !important;
  position:absolute !important;
  left:-5px !important;
  right:auto !important;
  top:50% !important;
  width:7px !important;
  height:1px !important;
  transform:translateY(-50%) !important;
  background:rgba(92,88,82,.22) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* No vertical separator between PLAYER and currency groups. */
.global-user-frame .hud-info::after{
  content:none !important;
  display:none !important;
}

/* RANK円は完全にバーの外側 */
.global-user-frame .hud-lv-circle{
  z-index:4 !important;
  margin:0 !important;
}

/* PLAYER文字を線に対して中央へ */
.global-user-frame .hud-name{
  transform:translateY(.5px) !important;
}

@media (max-width:390px){
  .global-user-frame .hud-info{
    height:30px !important;
    min-width:98px !important;
    max-width:128px !important;
    margin-left:1px !important;
    padding:0 11px 0 9px !important;
  }
}


/* =========================================================
   v335 HEADER cleanup
   head内の誤文字列除去後、上端に白い帯が出ないよう
   USER FRAME自体は完全透明のまま固定。
   ========================================================= */
.global-user-frame{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   v336 BOTTOM NAV translucency
   ヘッダーの軽さに合わせてベージュ面を透過。
   文字は読みづらくならないようコントラストを維持。
   ========================================================= */

.bottom-nav{
  background:
    linear-gradient(
      180deg,
      rgba(248,243,232,.70) 0%,
      rgba(236,225,205,.62) 100%
    ) !important;
  border-top:1px solid rgba(145,109,49,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 -4px 12px rgba(78,57,28,.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 上端の装飾線も少し控えめに */
.bottom-nav::before{
  opacity:.56 !important;
}

/* 非選択文字は背景が透けても読める濃さへ */
.bottom-nav .bottom-nav-label{
  color:rgba(88,67,39,.82) !important;
  font-weight:600 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.86),
    0 0 4px rgba(250,246,235,.54) !important;
}

/* 選択中は少しだけ濃く */
.bottom-nav .bottom-nav-item.active .bottom-nav-label{
  color:#654b24 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 5px rgba(255,248,226,.82) !important;
}

/* アイコンも透過背景で埋もれないようわずかに締める */
.bottom-nav .bottom-nav-item img{
  opacity:.84 !important;
}

.bottom-nav .bottom-nav-item.active img{
  opacity:1 !important;
}

/* 選択中の背景は完全透明にせず、視認性用の薄い紙面だけ残す */
.bottom-nav .bottom-nav-item.active::before{
  background:
    radial-gradient(circle at 50% 24%, rgba(255,248,221,.58), transparent 48%),
    linear-gradient(180deg, rgba(255,252,241,.54), rgba(233,216,176,.40)) !important;
  border-color:rgba(173,133,58,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    0 0 8px rgba(137,101,39,.08) !important;
}

/* iOS Safariでも白ベタ化しにくい単純RGBAに寄せる */
@supports (-webkit-touch-callout: none){
  .bottom-nav{
    background:rgba(241,232,214,.66) !important;
  }
}


/* =========================================================
   v337 GLOBAL HEADER all-screen fix
   HOME以外で復活していた上部の白/ベージュ帯を完全に除去。
   USER FRAMEは全画面共通で背景透明。
   ========================================================= */

/* どの画面でもユーザーフレーム本体は背景を持たない */
body .global-user-frame,
body #global-user-frame,
.screen ~ .global-user-frame,
.global-user-frame{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* 擬似要素で帯・線を復活させない */
.global-user-frame::before,
.global-user-frame::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 各画面側の固定ヘッダーが上部帯として見えるケースも抑制 */
.screen > .header,
.screen .header{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* 画面ごとの余白は維持しつつ、色付きバーだけ消す */
#screen-main .header,
#screen-summon .header,
#screen-zukan .header,
#screen-kichi .header,
#screen-settings .header,
#screen-friend .header,
#screen-ninmu .header,
#screen-party .header{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* RANK円＋PLAYERバー自体の見た目はv334以降を維持 */
.global-user-frame .hud-info{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.02) 0%,
      rgba(248,242,226,.14) 52%,
      rgba(239,229,205,.20) 100%
    ) !important;
}


/* =========================================================
   v338 READABILITY TUNING
   透明感は残しつつ、文字の直下だけ薄い紙面を置いて可読性を確保。
   ========================================================= */

/* PLAYERバー：全面ベタ塗りではなく中央にだけ薄い紙面 */
.global-user-frame .hud-info{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.30) 30%,
      rgba(250,250,249,.38) 72%,
      rgba(255,255,255,.10) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    1px 2px 7px rgba(76,55,27,.05) !important;
}

/* PLAYER文字は色を少し締め、白縁ではなくごく薄い紙面影 */
.global-user-frame .hud-name{
  color:#4b4946 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.94),
    0 0 4px rgba(250,246,235,.74) !important;
}

/* GEM / COIN：文字列の背後にだけ淡いハイライトを置く */
.global-user-frame .hud-resource{
  position:relative !important;
}

.global-user-frame .hud-resource::after{
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(247,239,220,.26) 18%,
      rgba(247,239,220,.58) 50%,
      rgba(247,239,220,.26) 82%,
      transparent 100%
    ) !important;
  height:18px !important;
  bottom:50% !important;
  transform:translateY(50%) !important;
  border-radius:999px !important;
  z-index:-1 !important;
}

.global-user-frame .hud-res-val{
  color:#4b4946 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.94),
    0 0 4px rgba(250,246,235,.72) !important;
}

.global-user-frame .hud-gem-plus-btn{
  color:#7e5d2b !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9) !important;
}

/* ボトムナビ：背景は透過のまま、ほんの少し濃度だけ戻す */
.bottom-nav{
  background:
    linear-gradient(
      180deg,
      rgba(248,243,232,.78) 0%,
      rgba(236,225,205,.70) 100%
    ) !important;
}

/* ラベルは背景に負けないが、黒々しすぎない */
.bottom-nav .bottom-nav-label{
  color:rgba(79,60,36,.88) !important;
  font-weight:650 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 4px rgba(250,246,235,.68) !important;
}

.bottom-nav .bottom-nav-item.active .bottom-nav-label{
  color:#5d431f !important;
  font-weight:700 !important;
}

/* iOS Safari */
@supports (-webkit-touch-callout: none){
  .global-user-frame .hud-info{
    background:rgba(244,235,214,.50) !important;
  }

  .bottom-nav{
    background:rgba(241,232,214,.73) !important;
  }
}


/* =========================================================
   v359 GACHA CENTER — FINAL RUNTIME OVERRIDE
   IMPORTANT: this is in css/style.css, the stylesheet actually loaded by index.html.
   ========================================================= */

/* ===== TITLE: remove every rectangular panel source ===== */
html body #screen-summon .summon-center-title-card{
  -webkit-appearance:none !important;
  appearance:none !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;

  padding:3px 12px 5px !important;
  margin:0 !important;

  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;

  border:0 !important;
  border-width:0 !important;
  border-style:none !important;
  border-color:transparent !important;
  border-radius:0 !important;

  box-shadow:none !important;
  outline:0 !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  overflow:visible !important;
}

/* Kill every old card pseudo layer from v264/v323/v327 etc. */
html body #screen-summon .summon-center-title-card::before,
html body #screen-summon .summon-center-title-card::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
}

/* No background on children either */
html body #screen-summon .summon-center-title-en,
html body #screen-summon .summon-center-title-jp,
html body #screen-summon .summon-center-title-more{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Only a local mist behind the MAIN title text */
html body #screen-summon .summon-center-title-jp{
  position:relative !important;
  color:#3c2a16 !important;
  font-weight:800 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,252,243,.98),
    0 0 9px rgba(255,248,225,.78),
    0 0 15px rgba(238,221,183,.34) !important;
}

html body #screen-summon .summon-center-title-jp::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:142px !important;
  height:42px !important;
  transform:translate(-50%,-50%) rotate(-1.7deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;

  background:
    radial-gradient(
      ellipse at 46% 54%,
      rgba(255,254,249,.64) 0%,
      rgba(252,247,236,.40) 28%,
      rgba(245,233,207,.14) 52%,
      rgba(245,233,207,0) 75%
    ),
    radial-gradient(
      ellipse at 68% 42%,
      rgba(255,250,236,.16) 0%,
      rgba(246,235,210,.05) 44%,
      rgba(246,235,210,0) 70%
    ) !important;

  filter:blur(8px) !important;
  opacity:.94 !important;
}

html body #screen-summon .summon-center-title-en{
  color:rgba(72,52,29,.72) !important;
  font-weight:600 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 4px rgba(255,251,239,.74) !important;
}

html body #screen-summon .summon-center-title-more{
  color:rgba(69,50,29,.76) !important;
  font-weight:600 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 4px rgba(255,251,239,.72) !important;
}

/* ===== PITY: preserve v355 absolute positioning, remove rectangular panel ===== */
html body #screen-summon .pity-counter{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:var(--gacha-pity-bottom) !important;
  transform:translateX(-50%) !important;

  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;

  width:min(88vw,356px) !important;
  min-height:38px !important;
  padding:7px 12px !important;
  margin:0 !important;

  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  z-index:16 !important;
  overflow:visible !important;
  isolation:isolate !important;
}

html body #screen-summon .pity-counter::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:106% !important;
  height:145% !important;
  transform:translate(-50%,-50%) rotate(.35deg) !important;
  z-index:0 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;

  background:
    radial-gradient(
      ellipse at 50% 52%,
      rgba(255,254,249,.70) 0%,
      rgba(251,247,237,.46) 28%,
      rgba(246,238,219,.20) 51%,
      rgba(241,229,201,.07) 64%,
      rgba(241,229,201,0) 78%
    ) !important;

  filter:blur(9px) !important;
  opacity:.95 !important;
}

html body #screen-summon .pity-counter::after{
  content:none !important;
  display:none !important;
}

html body #screen-summon .pity-counter > *{
  position:relative !important;
  z-index:3 !important;
}

html body #screen-summon .pity-note{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:var(--gacha-pity-note-bottom) !important;
  transform:translateX(-50%) !important;

  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:16 !important;
}

/* iOS Safari: no native glass or panel fallback */
@supports (-webkit-touch-callout: none){
  html body #screen-summon .summon-center-title-card{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html body #screen-summon .pity-counter{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   v360 GACHA CENTER — stronger white haze / readability
   ボックス感は戻さず、白い滲みだけを一段強く。
   文字・天井ゲージを背景から明確に分離する。
   ========================================================= */

/* ---------- 中央タイトル ---------- */
html body #screen-summon .summon-center-title-jp::before{
  width:168px !important;
  height:50px !important;
  background:
    radial-gradient(
      ellipse at 46% 54%,
      rgba(255,255,252,.84) 0%,
      rgba(252,248,239,.62) 30%,
      rgba(247,238,217,.30) 52%,
      rgba(242,228,198,.10) 67%,
      rgba(242,228,198,0) 80%
    ),
    radial-gradient(
      ellipse at 68% 42%,
      rgba(255,251,240,.28) 0%,
      rgba(247,237,214,.12) 46%,
      rgba(247,237,214,0) 72%
    ) !important;
  filter:blur(8.5px) !important;
  opacity:1 !important;
}

html body #screen-summon .summon-center-title-en{
  color:rgba(63,45,24,.82) !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.98),
    0 0 8px rgba(250,242,220,.56) !important;
}

html body #screen-summon .summon-center-title-jp{
  color:#352512 !important;
  font-weight:800 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,1),
    0 0 8px rgba(255,249,229,.92),
    0 1px 2px rgba(50,35,17,.12) !important;
}

html body #screen-summon .summon-center-title-more{
  color:rgba(64,46,26,.86) !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.94),
    0 0 7px rgba(249,240,217,.54) !important;
}

/* ---------- 天井まわり ---------- */
html body #screen-summon .pity-counter::before{
  width:110% !important;
  height:168% !important;
  background:
    radial-gradient(
      ellipse at 50% 52%,
      rgba(255,255,252,.86) 0%,
      rgba(252,248,239,.66) 30%,
      rgba(247,239,219,.34) 52%,
      rgba(241,229,201,.12) 66%,
      rgba(241,229,201,0) 80%
    ),
    radial-gradient(
      ellipse at 28% 48%,
      rgba(255,251,239,.30) 0%,
      rgba(247,237,214,.12) 46%,
      rgba(247,237,214,0) 72%
    ),
    radial-gradient(
      ellipse at 76% 48%,
      rgba(255,251,239,.24) 0%,
      rgba(247,237,214,.08) 46%,
      rgba(247,237,214,0) 72%
    ) !important;
  filter:blur(8.5px) !important;
  opacity:1 !important;
}

html body #screen-summon .pity-label,
html body #screen-summon .pity-num{
  color:#4a331a !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.98),
    0 1px 2px rgba(56,39,18,.10) !important;
}

/* ゲージは白霞の中で輪郭が分かる程度にだけ強化 */
html body #screen-summon .pity-bar-wrap{
  height:7px !important;
  background:rgba(92,67,37,.16) !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:
    inset 0 1px 2px rgba(73,51,25,.14),
    0 1px 0 rgba(255,255,255,.74),
    0 0 4px rgba(255,250,236,.70) !important;
}

html body #screen-summon .pity-bar-fill{
  background:
    linear-gradient(
      90deg,
      rgba(172,130,55,.76),
      rgba(225,190,100,.94)
    ) !important;
  box-shadow:
    0 0 5px rgba(191,149,65,.32),
    0 0 8px rgba(255,242,199,.18) !important;
}

/* 天井説明の背後にも、ごく局所的な霞 */
html body #screen-summon .pity-note{
  color:#4e371d !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.98),
    0 0 7px rgba(249,241,219,.50) !important;
}

html body #screen-summon .pity-note::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:190px !important;
  height:30px !important;
  transform:translate(-50%,-50%) rotate(.4deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,251,.62) 0%,
      rgba(251,246,234,.38) 44%,
      rgba(245,233,207,.12) 64%,
      rgba(245,233,207,0) 80%
    ) !important;
  filter:blur(7px) !important;
  opacity:.96 !important;
}

@supports (-webkit-touch-callout: none){
  html body #screen-summon .summon-center-title-jp::before{
    filter:blur(8px) !important;
  }
  html body #screen-summon .pity-counter::before{
    filter:blur(8px) !important;
  }
}


/* =========================================================
   v361 GACHA CENTER — denser white haze
   v360の「箱なし」は維持。
   白い滲みの中心濃度だけをさらに上げ、文字・天井ゲージを背景から分離。
   ========================================================= */

/* ---------- タイトル周辺 ---------- */
html body #screen-summon .summon-center-title-jp::before{
  width:192px !important;
  height:62px !important;
  background:
    radial-gradient(
      ellipse at 46% 54%,
      rgba(255,255,253,.97) 0%,
      rgba(253,250,242,.84) 24%,
      rgba(249,242,224,.56) 43%,
      rgba(244,232,204,.28) 58%,
      rgba(241,226,194,.10) 69%,
      rgba(241,226,194,0) 82%
    ),
    radial-gradient(
      ellipse at 65% 41%,
      rgba(255,252,243,.56) 0%,
      rgba(249,240,219,.24) 42%,
      rgba(249,240,219,0) 70%
    ),
    radial-gradient(
      ellipse at 33% 66%,
      rgba(255,253,245,.44) 0%,
      rgba(247,236,211,.16) 45%,
      rgba(247,236,211,0) 72%
    ) !important;
  filter:blur(7.5px) !important;
  opacity:1 !important;
}

/* 英字と提供割合にも、ごく小さい局所霞を追加 */
html body #screen-summon .summon-center-title-en::before,
html body #screen-summon .summon-center-title-more::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,252,.72) 0%,
      rgba(252,248,239,.48) 38%,
      rgba(247,236,211,.16) 62%,
      rgba(247,236,211,0) 80%
    ) !important;
  filter:blur(6px) !important;
}

html body #screen-summon .summon-center-title-en::before{
  width:150px !important;
  height:28px !important;
}

html body #screen-summon .summon-center-title-more::before{
  width:170px !important;
  height:28px !important;
}

/* 文字自体もさらに少しだけ締める */
html body #screen-summon .summon-center-title-en{
  color:rgba(58,41,22,.88) !important;
}
html body #screen-summon .summon-center-title-jp{
  color:#2f2010 !important;
}
html body #screen-summon .summon-center-title-more{
  color:rgba(58,42,24,.90) !important;
}

/* ---------- 天井カウント周辺 ---------- */
html body #screen-summon .pity-counter::before{
  width:114% !important;
  height:195% !important;
  background:
    radial-gradient(
      ellipse at 50% 52%,
      rgba(255,255,253,.96) 0%,
      rgba(253,250,242,.82) 25%,
      rgba(249,242,224,.54) 44%,
      rgba(244,232,204,.26) 59%,
      rgba(241,226,194,.08) 70%,
      rgba(241,226,194,0) 82%
    ),
    radial-gradient(
      ellipse at 28% 48%,
      rgba(255,252,242,.44) 0%,
      rgba(248,239,217,.18) 45%,
      rgba(248,239,217,0) 72%
    ),
    radial-gradient(
      ellipse at 76% 48%,
      rgba(255,252,242,.36) 0%,
      rgba(248,239,217,.14) 45%,
      rgba(248,239,217,0) 72%
    ) !important;
  filter:blur(7.5px) !important;
  opacity:1 !important;
}

/* ラベルと数値の背後にも局所霞 */
html body #screen-summon .pity-label::before,
html body #screen-summon .pity-num::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:76px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,252,.68) 0%,
      rgba(252,248,239,.42) 42%,
      rgba(247,236,211,0) 80%
    ) !important;
  filter:blur(5.5px) !important;
}

/* ゲージ周辺の白い縁取りを少し強化 */
html body #screen-summon .pity-bar-wrap{
  background:rgba(88,63,34,.18) !important;
  box-shadow:
    inset 0 1px 2px rgba(70,49,24,.15),
    0 1px 0 rgba(255,255,255,.90),
    0 0 6px rgba(255,252,241,.88),
    0 0 10px rgba(248,238,215,.40) !important;
}

/* 天井説明の局所霞をさらに濃く */
html body #screen-summon .pity-note::before{
  width:220px !important;
  height:36px !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,252,.80) 0%,
      rgba(252,248,239,.56) 38%,
      rgba(247,236,211,.20) 62%,
      rgba(247,236,211,0) 82%
    ) !important;
  filter:blur(6.5px) !important;
  opacity:1 !important;
}

html body #screen-summon .pity-label,
html body #screen-summon .pity-num,
html body #screen-summon .pity-note{
  color:#3f2b16 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,1),
    0 1px 2px rgba(48,33,16,.10) !important;
}

/* iOS Safari */
@supports (-webkit-touch-callout: none){
  html body #screen-summon .summon-center-title-jp::before,
  html body #screen-summon .pity-counter::before{
    filter:blur(7px) !important;
  }
}


/* =========================================================
   v362 GACHA NAV — ARROW GLYPH + PAGE DOTS
   左右矢印を➤系のシャープな形に変更。
   背後に局所的な白霞を置き、ページドットを追加。
   ========================================================= */

/* Arrow button itself stays invisible */
html body #screen-summon .summon-banner-arrow{
  pointer-events:auto !important;
  position:absolute !important;
  top:48% !important;

  width:54px !important;
  height:70px !important;
  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:Georgia,"Times New Roman",serif !important;
  font-size:29px !important;
  font-weight:400 !important;
  line-height:1 !important;
  color:rgba(115,79,32,.82) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 4px rgba(255,250,235,.88),
    0 1px 3px rgba(66,44,20,.10) !important;

  filter:none !important;
  opacity:1 !important;
  z-index:3 !important;

  transition:
    transform .18s ease,
    color .18s ease,
    opacity .18s ease !important;
}

/* White blurry halo behind arrow — no circle / no box */
html body #screen-summon .summon-banner-arrow::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:58px !important;
  height:50px !important;
  transform:translate(-50%,-50%) rotate(-4deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:50% !important;

  background:
    radial-gradient(
      ellipse at 48% 52%,
      rgba(255,255,252,.88) 0%,
      rgba(253,249,241,.62) 34%,
      rgba(247,238,217,.28) 55%,
      rgba(243,230,201,.08) 68%,
      rgba(243,230,201,0) 80%
    ) !important;

  filter:blur(7px) !important;
  opacity:.98 !important;
}

/* Previous = same glyph mirrored */
html body #screen-summon .summon-banner-arrow-prev{
  left:9px !important;
  transform:translateY(-50%) rotate(180deg) !important;
}

html body #screen-summon .summon-banner-arrow-next{
  right:9px !important;
  transform:translateY(-50%) !important;
}

html body #screen-summon .summon-banner-arrow:hover,
html body #screen-summon .summon-banner-arrow:focus-visible{
  color:rgba(102,68,25,.96) !important;
  outline:none !important;
}

html body #screen-summon .summon-banner-arrow-prev:active{
  transform:translateY(-50%) rotate(180deg) scale(.90) !important;
  opacity:.72 !important;
}

html body #screen-summon .summon-banner-arrow-next:active{
  transform:translateY(-50%) scale(.90) !important;
  opacity:.72 !important;
}

/* ---------- pager dots ---------- */
html body #screen-summon .summon-banner-dots{
  position:absolute !important;
  left:50% !important;
  bottom:calc(var(--gacha-title-bottom) - 24px) !important;
  transform:translateX(-50%) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  min-height:20px !important;
  padding:2px 10px !important;
  z-index:18 !important;
  pointer-events:auto !important;
}

/* Local haze behind dot row */
html body #screen-summon .summon-banner-dots::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% + 30px) !important;
  height:28px !important;
  transform:translate(-50%,-50%) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,252,.70) 0%,
      rgba(252,248,239,.46) 42%,
      rgba(247,236,211,.14) 64%,
      rgba(247,236,211,0) 82%
    ) !important;
  filter:blur(6px) !important;
}

/* dot buttons */
html body #screen-summon .summon-banner-dot{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:6px !important;
  height:6px !important;
  min-width:6px !important;
  min-height:6px !important;
  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:50% !important;

  background:rgba(109,82,47,.30) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 0 3px rgba(255,250,235,.62) !important;

  transition:
    width .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* active dot = elongated, easy to read */
html body #screen-summon .summon-banner-dot.active{
  width:18px !important;
  border-radius:999px !important;
  background:rgba(165,120,45,.72) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.90),
    0 0 5px rgba(207,166,79,.28) !important;
}

html body #screen-summon .summon-banner-dot:active{
  transform:scale(.90) !important;
}

/* Small screens */
@media (max-width:380px){
  html body #screen-summon .summon-banner-arrow{
    width:48px !important;
    height:64px !important;
    font-size:26px !important;
  }

  html body #screen-summon .summon-banner-arrow-prev{
    left:4px !important;
  }

  html body #screen-summon .summon-banner-arrow-next{
    right:4px !important;
  }

  html body #screen-summon .summon-banner-dots{
    gap:6px !important;
    bottom:calc(var(--gacha-title-bottom) - 21px) !important;
  }
}

@supports (-webkit-touch-callout: none){
  html body #screen-summon .summon-banner-arrow::before{
    filter:blur(6.5px) !important;
  }
}


/* =========================================================
   v364 GACHA POOL CTA
   「提供内容・提供割合」がタップできることを自然に示唆。
   箱にはせず、細いライン + 小さな矢印 + タップ反応。
   ========================================================= */

html body #screen-summon .summon-center-title-more{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  margin:7px auto 0 !important;
  padding:4px 4px 6px !important;

  color:rgba(55,40,23,.88) !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 4px rgba(255,252,242,.82) !important;

  transition:
    transform .16s ease,
    opacity .16s ease !important;
}

/* white haze remains local, not a card */
html body #screen-summon .summon-center-title-more::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:176px !important;
  height:30px !important;
  transform:translate(-50%,-50%) rotate(.4deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:50% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,252,.78) 0%,
      rgba(252,248,239,.50) 38%,
      rgba(247,236,211,.16) 62%,
      rgba(247,236,211,0) 82%
    ) !important;

  filter:blur(6px) !important;
}

/* underline = tappable cue */
html body #screen-summon .summon-center-title-more::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:118px !important;
  height:1px !important;
  transform:translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(157,113,49,.16) 18%,
      rgba(183,136,59,.52) 50%,
      rgba(157,113,49,.16) 82%,
      transparent 100%
    ) !important;

  box-shadow:0 0 3px rgba(206,167,85,.15) !important;
}

/* subtle forward cue */
html body #screen-summon .summon-center-title-more-arrow{
  display:inline-block !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:17px !important;
  line-height:1 !important;
  color:rgba(137,93,34,.78) !important;
  transform:translateY(-1px) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;

  animation:zeraphiaPoolCtaNudge 2.8s ease-in-out infinite !important;
}

@keyframes zeraphiaPoolCtaNudge{
  0%,72%,100%{ transform:translate(0,-1px); opacity:.72; }
  82%{ transform:translate(3px,-1px); opacity:1; }
  90%{ transform:translate(0,-1px); opacity:.82; }
}

/* touch feedback */
html body #screen-summon .summon-center-title-card:active .summon-center-title-more{
  transform:scale(.97) !important;
  opacity:.78 !important;
}

/* keyboard focus without a box */
html body #screen-summon .summon-center-title-card:focus-visible .summon-center-title-more::after{
  width:138px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(175,126,48,.68),
      transparent
    ) !important;
}

@media (prefers-reduced-motion: reduce){
  html body #screen-summon .summon-center-title-more-arrow{
    animation:none !important;
  }
}


/* =========================================================
   v365 GACHA CENTER — brown fade readability
   「提供割合」「天井到達」を白文字 + ブラウンのフェード帯へ。
   箱ではなく、両端と上下が滲んで消えるインク帯。
   ========================================================= */

/* ---------- overall center text readability ---------- */
html body #screen-summon .summon-center-title-en{
  color:rgba(60,42,22,.90) !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.98),
    0 0 8px rgba(249,241,218,.62) !important;
}

html body #screen-summon .summon-center-title-jp{
  color:#2d1f10 !important;
  font-weight:800 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,1),
    0 0 9px rgba(255,248,227,.92),
    0 1px 2px rgba(44,30,14,.12) !important;
}

html body #screen-summon .pity-label,
html body #screen-summon .pity-num{
  color:#3b2814 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,253,245,.98),
    0 1px 2px rgba(49,34,16,.10) !important;
}

/* ---------- 提供内容・提供割合 ---------- */
html body #screen-summon .summon-center-title-more{
  min-width:176px !important;
  min-height:28px !important;
  margin:7px auto 0 !important;
  padding:4px 15px 5px !important;

  color:#fffaf0 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;

  text-shadow:
    0 1px 2px rgba(41,27,13,.86),
    0 0 4px rgba(255,244,213,.16) !important;
}

/* brown ink-fade band, not a hard box */
html body #screen-summon .summon-center-title-more::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:212px !important;
  height:34px !important;
  transform:translate(-50%,-50%) rotate(-.25deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(89,59,31,0) 0%,
      rgba(89,59,31,.32) 10%,
      rgba(75,48,25,.64) 26%,
      rgba(65,40,21,.78) 50%,
      rgba(75,48,25,.64) 74%,
      rgba(89,59,31,.32) 90%,
      rgba(89,59,31,0) 100%
    ) !important;

  box-shadow:none !important;
  filter:blur(2.6px) !important;
  opacity:.94 !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 22%,
      #000 50%,
      rgba(0,0,0,.78) 78%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.78) 22%,
      #000 50%,
      rgba(0,0,0,.78) 78%,
      transparent 100%
    ) !important;
}

/* CTA underline becomes a soft gold hairline */
html body #screen-summon .summon-center-title-more::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:112px !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(229,196,123,.18) 18%,
      rgba(243,213,143,.54) 50%,
      rgba(229,196,123,.18) 82%,
      transparent
    ) !important;
  box-shadow:0 0 3px rgba(240,211,142,.18) !important;
}

html body #screen-summon .summon-center-title-more-arrow{
  color:rgba(255,239,200,.92) !important;
  text-shadow:
    0 1px 2px rgba(42,27,12,.86),
    0 0 4px rgba(255,243,207,.18) !important;
}

/* ---------- 天井到達：... ---------- */
html body #screen-summon .pity-note{
  min-width:252px !important;
  padding:4px 18px !important;

  color:#fffaf0 !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;

  text-shadow:
    0 1px 2px rgba(42,27,12,.90),
    0 0 4px rgba(255,244,213,.14) !important;
}

/* replace white haze with brown fade band */
html body #screen-summon .pity-note::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:286px !important;
  height:36px !important;
  transform:translate(-50%,-50%) rotate(.15deg) !important;
  z-index:-1 !important;
  pointer-events:none !important;

  border:0 !important;
  border-radius:0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(82,53,27,0) 0%,
      rgba(82,53,27,.30) 9%,
      rgba(65,41,21,.62) 24%,
      rgba(55,34,18,.78) 50%,
      rgba(65,41,21,.62) 76%,
      rgba(82,53,27,.30) 91%,
      rgba(82,53,27,0) 100%
    ) !important;

  filter:blur(2.8px) !important;
  opacity:.95 !important;
  box-shadow:none !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.82) 20%,
      #000 50%,
      rgba(0,0,0,.82) 80%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.82) 20%,
      #000 50%,
      rgba(0,0,0,.82) 80%,
      transparent 100%
    ) !important;
}

/* subtle warm line above note */
html body #screen-summon .pity-note::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-2px !important;
  width:126px !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(226,187,105,.42),
      transparent
    ) !important;
  box-shadow:0 0 4px rgba(232,193,108,.14) !important;
}

/* iOS Safari */
@supports (-webkit-touch-callout: none){
  html body #screen-summon .summon-center-title-more::before,
  html body #screen-summon .pity-note::before{
    filter:blur(2.4px) !important;
  }
}


/* =========================================================
   v366 GACHA CENTER — CTA + pity readability refinement
   1) 提供割合の太すぎる文字を軽く
   2) 天井到達テキストの背景フェードを濃くして可読性を確保
   ========================================================= */

/* ---------- 提供内容・提供割合：太さを落として繊細に ---------- */
html body #screen-summon .summon-center-title-more{
  font-weight:500 !important;
  font-size:9.5px !important;
  letter-spacing:.075em !important;

  color:rgba(255,250,240,.96) !important;

  text-shadow:
    0 1px 1px rgba(37,24,12,.72),
    0 0 3px rgba(255,244,213,.10) !important;
}

html body #screen-summon .summon-center-title-more-label{
  font-weight:500 !important;
}

html body #screen-summon .summon-center-title-more-arrow{
  font-weight:400 !important;
  opacity:.90 !important;
}

/* 帯は少しだけ柔らかくして、文字が重たく見えないように */
html body #screen-summon .summon-center-title-more::before{
  background:
    linear-gradient(
      90deg,
      rgba(89,59,31,0) 0%,
      rgba(89,59,31,.24) 10%,
      rgba(75,48,25,.54) 27%,
      rgba(65,40,21,.70) 50%,
      rgba(75,48,25,.54) 73%,
      rgba(89,59,31,.24) 90%,
      rgba(89,59,31,0) 100%
    ) !important;
  filter:blur(2.9px) !important;
}

/* ---------- 天井到達：背景に溶けないよう明確に ---------- */
html body #screen-summon .pity-note{
  min-width:272px !important;
  padding:5px 20px !important;

  color:#fffdf7 !important;
  font-weight:600 !important;
  font-size:10.5px !important;
  letter-spacing:.035em !important;

  text-shadow:
    0 1px 2px rgba(24,15,8,.94),
    0 0 4px rgba(255,246,220,.14) !important;
}

/* 帯の中心濃度を上げ、上下左右は柔らかく消す */
html body #screen-summon .pity-note::before{
  width:304px !important;
  height:40px !important;

  background:
    linear-gradient(
      90deg,
      rgba(70,44,23,0) 0%,
      rgba(70,44,23,.34) 8%,
      rgba(57,35,18,.70) 23%,
      rgba(43,26,14,.88) 50%,
      rgba(57,35,18,.70) 77%,
      rgba(70,44,23,.34) 92%,
      rgba(70,44,23,0) 100%
    ) !important;

  filter:blur(2.6px) !important;
  opacity:.98 !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.88) 16%,
      #000 50%,
      rgba(0,0,0,.88) 84%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.88) 16%,
      #000 50%,
      rgba(0,0,0,.88) 84%,
      transparent 100%
    ) !important;
}

/* 上の細線は少しだけ明るく */
html body #screen-summon .pity-note::after{
  width:136px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(235,198,116,.54),
      transparent
    ) !important;
  box-shadow:0 0 4px rgba(235,198,116,.18) !important;
}

/* iOS Safari */
@supports (-webkit-touch-callout: none){
  html body #screen-summon .pity-note::before{
    filter:blur(2.3px) !important;
  }
}


/* =========================================================
   v367 GACHA PITY NOTE — move label closer to gauge
   「天井到達」テキストだけを上へ8px移動。ゲージ位置は変更しない。
   ========================================================= */
html body #screen-summon .pity-note{
  transform:translate(-50%, -8px) !important;
}

/* =========================================================
   v368 GACHA PITY NOTE — brown text + stronger white haze
   明るい背景上でも読めるよう、文字をブラウン系へ。
   背景の帯は白いぼかしに差し替え、ゲージ位置は変更しない。
   ========================================================= */
html body #screen-summon .pity-note{
  color:#71552e !important;
  font-weight:600 !important;
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.82),
    0 1px 1px rgba(92,72,39,.14) !important;
  filter:none !important;
}

/* 既存の濃い帯を、柔らかな白いぼかしへ置き換える */
html body #screen-summon .pity-note::before{
  width:286px !important;
  height:34px !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.80) 38%,
      rgba(255,255,255,.42) 68%,
      rgba(255,255,255,0) 100%
    ) !important;
  filter:blur(5px) !important;
  opacity:1 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* 白ぼかし化に合わせて上側の飾り線は消す */
html body #screen-summon .pity-note::after{
  content:none !important;
  display:none !important;
}

@supports (-webkit-touch-callout: none){
  html body #screen-summon .pity-note::before{
    filter:blur(4.5px) !important;
  }
}


/* =========================================================
   v369 GACHA ARROW POLISH
   - 左右のページ送り矢印を、主張の弱い上品な記号へ
   ========================================================= */
#screen-summon .summon-banner-arrow{
  width:34px !important;
  height:52px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(118,91,46,.58) !important;
  font-size:34px !important;
  font-weight:300 !important;
  line-height:1 !important;
  opacity:.55 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.65) !important;
  transition:opacity .18s ease, transform .18s ease !important;
}
#screen-summon .summon-banner-arrow:active{
  opacity:.9 !important;
  transform:translateY(-50%) scale(.92) !important;
}


/* v369 final arrow override: thin typographic chevrons */
html body #screen-summon .summon-banner-arrow{
  width:30px !important;
  height:48px !important;
  padding:0 !important;
  font-size:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  opacity:.52 !important;
  text-shadow:none !important;
}
html body #screen-summon .summon-banner-arrow::before{
  display:block !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  filter:none !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:38px !important;
  font-weight:400 !important;
  line-height:1 !important;
  color:rgba(112,83,39,.66) !important;
  text-shadow:
    0 0 4px rgba(255,255,255,.98),
    0 0 10px rgba(255,255,255,.72) !important;
}
html body #screen-summon .summon-banner-arrow-prev::before{ content:"‹" !important; }
html body #screen-summon .summon-banner-arrow-next::before{ content:"›" !important; }
html body #screen-summon .summon-banner-arrow-prev{
  left:10px !important;
  transform:translateY(-50%) !important;
}
html body #screen-summon .summon-banner-arrow-next{
  right:10px !important;
  transform:translateY(-50%) !important;
}
html body #screen-summon .summon-banner-arrow:hover,
html body #screen-summon .summon-banner-arrow:focus-visible{
  opacity:.72 !important;
}
html body #screen-summon .summon-banner-arrow-prev:active,
html body #screen-summon .summon-banner-arrow-next:active{
  opacity:.88 !important;
  transform:translateY(-50%) scale(.92) !important;
}
@media (max-width:360px){
  html body #screen-summon .summon-banner-arrow::before{ font-size:34px !important; }
  html body #screen-summon .summon-banner-arrow-prev{ left:7px !important; }
  html body #screen-summon .summon-banner-arrow-next{ right:7px !important; }
}

/* =========================================================
   v370 GACHA ARROW SOFT LIGHT POOL
   - 水彩背景の明暗に埋もれないよう、矢印の背後へ白い光だまりを追加
   - 記号自体は細いまま、ボタン感を出さず上品に保持
   ========================================================= */
html body #screen-summon .summon-banner-arrow{
  isolation:isolate !important;
  overflow:visible !important;
  opacity:.72 !important;
}

html body #screen-summon .summon-banner-arrow::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:48px !important;
  height:66px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.90) 30%,
    rgba(255,255,255,.58) 54%,
    rgba(255,255,255,.18) 73%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(4px) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

html body #screen-summon .summon-banner-arrow::before{
  position:relative !important;
  z-index:1 !important;
  color:rgba(104,76,34,.82) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 3px rgba(255,255,255,.90) !important;
}

html body #screen-summon .summon-banner-arrow:hover,
html body #screen-summon .summon-banner-arrow:focus-visible{
  opacity:.86 !important;
}

html body #screen-summon .summon-banner-arrow:active{
  opacity:1 !important;
}

@media (max-width:360px){
  html body #screen-summon .summon-banner-arrow::after{
    width:44px !important;
    height:60px !important;
  }
}

/* =========================================================
   v371 GACHA ARROW GEOMETRY FIX
   - ‹ › のフォント字形に依存しないCSS描画へ変更
   - 左右を同一寸法・同一中心座標で描画し、辺との余白を完全対称化
   - v370の白い光だまりは維持
   ========================================================= */
html body #screen-summon .summon-banner-arrow{
  width:30px !important;
  height:48px !important;
}

/* フォント記号を廃止し、同じ10x10pxの線から左右矢印を生成 */
html body #screen-summon .summon-banner-arrow::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:10px !important;
  height:10px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-left:1.6px solid rgba(104,76,34,.84) !important;
  border-bottom:1.6px solid rgba(104,76,34,.84) !important;
  font-size:0 !important;
  line-height:0 !important;
  box-sizing:border-box !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) !important;
  text-shadow:none !important;
  z-index:1 !important;
  transform-origin:50% 50% !important;
}

html body #screen-summon .summon-banner-arrow-prev::before{
  transform:translate(-43%,-50%) rotate(45deg) !important;
}

html body #screen-summon .summon-banner-arrow-next::before{
  transform:translate(-57%,-50%) rotate(225deg) !important;
}

/* ボタン箱そのものも左右で完全対称 */
html body #screen-summon .summon-banner-arrow-prev{
  left:10px !important;
  right:auto !important;
}
html body #screen-summon .summon-banner-arrow-next{
  right:10px !important;
  left:auto !important;
}

@media (max-width:360px){
  html body #screen-summon .summon-banner-arrow-prev{
    left:7px !important;
  }
  html body #screen-summon .summon-banner-arrow-next{
    right:7px !important;
  }
  html body #screen-summon .summon-banner-arrow::before{
    width:9px !important;
    height:9px !important;
  }
}

/* =========================================================
   v372 GACHA ARROW SHARP CHEVRON FIX
   - 旧v363の ::before に残っていた border-radius / background を完全解除
   - 角の丸い「C」形状をやめ、細く鋭いシェブロンへ
   - 左右は同一ジオメトリ、白い光だまりは ::after で維持
   ========================================================= */
html body #screen-summon .summon-banner-arrow::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:11px !important;
  height:11px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;

  background:none !important;
  border-radius:0 !important;
  opacity:1 !important;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.96)) !important;

  border-top:0 !important;
  border-right:0 !important;
  border-left:1.45px solid rgba(98,71,31,.86) !important;
  border-bottom:1.45px solid rgba(98,71,31,.86) !important;

  font-size:0 !important;
  line-height:0 !important;
  text-shadow:none !important;
  z-index:1 !important;
  transform-origin:50% 50% !important;
}

html body #screen-summon .summon-banner-arrow-prev::before{
  transform:translate(-44%,-50%) rotate(45deg) !important;
}
html body #screen-summon .summon-banner-arrow-next::before{
  transform:translate(-56%,-50%) rotate(225deg) !important;
}

@media (max-width:360px){
  html body #screen-summon .summon-banner-arrow::before{
    width:10px !important;
    height:10px !important;
  }
}

/* =========================================================
   v373 TOP HUD READABILITY POLISH
   - PLAYER / crystal / coin readability over bright artwork
   - soft ivory light pools, restrained shadows
   - plus control slightly bolder
   ========================================================= */

/* PLAYER name: brighten the immediate background without making a box */
.global-user-frame .hud-info{
  position:relative !important;
  isolation:isolate !important;
}
.global-user-frame .hud-info::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-16px;
  top:50%;
  width:112px;
  height:42px;
  transform:translateY(-50%);
  pointer-events:none;
  background:radial-gradient(
    ellipse at 42% 50%,
    rgba(255,253,246,.98) 0%,
    rgba(255,252,242,.86) 32%,
    rgba(255,250,238,.45) 58%,
    rgba(255,250,238,0) 78%
  );
  filter:blur(5px);
}
.global-user-frame .hud-name{
  color:#4b4946 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,.98),
    0 0 9px rgba(255,252,242,.88),
    0 1px 2px rgba(61,44,24,.16) !important;
}

/* Resource groups: glow only, no capsule/frame */
.global-user-frame .hud-resource{
  isolation:isolate !important;
}
.global-user-frame .hud-resource::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  width:96px !important;
  height:42px !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
  background:radial-gradient(
    ellipse at center,
    rgba(255,254,249,.98) 0%,
    rgba(255,252,242,.82) 34%,
    rgba(255,249,235,.38) 61%,
    rgba(255,249,235,0) 80%
  ) !important;
  filter:blur(5px) !important;
}

/* restore the existing architectural underline above the glow */
.global-user-frame .hud-resource::after{
  z-index:1 !important;
}

.global-user-frame .hud-res-icon{
  position:relative !important;
  z-index:2 !important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.96))
    drop-shadow(0 2px 2px rgba(74,55,28,.18)) !important;
}
.global-user-frame .hud-res-val{
  position:relative !important;
  z-index:2 !important;
  color:#4b4946 !important;
  font-weight:700 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,.98),
    0 0 8px rgba(255,252,241,.88),
    0 1px 2px rgba(61,44,24,.15) !important;
}

/* crystal + button: retain delicacy, but make the + unmistakable */
.global-user-frame .hud-gem-plus-btn{
  position:relative !important;
  z-index:3 !important;
  color:#68645f !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:18px !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,.98),
    0 0 8px rgba(255,250,236,.80),
    0 1px 2px rgba(74,52,21,.16) !important;
}

@media (max-width:360px){
  .global-user-frame .hud-info::before{
    width:100px;
    height:38px;
  }
  .global-user-frame .hud-resource::before{
    width:82px !important;
    height:38px !important;
  }
  .global-user-frame .hud-gem-plus-btn{
    font-size:18px !important;
  }
}

/* =========================================================
   v374 RANK RING SOFT EDGE
   - 左上RANKリングだけ輪郭が強すぎるため、水彩UIへ馴染ませる
   - 円形は維持しつつ、境界線を弱め、白い霞でエッジを溶かす
   ========================================================= */
.global-user-frame .hud-lv-circle{
  position:relative !important;
  isolation:isolate !important;
  border:1px solid rgba(145,109,49,.24) !important;
  background:rgba(250,247,239,.62) !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.98),
    0 0 10px rgba(255,255,255,.72),
    0 0 18px rgba(255,250,239,.42),
    inset 0 0 7px rgba(255,255,255,.48),
    inset 0 0 1px rgba(122,91,45,.10) !important;
  backdrop-filter:blur(2.5px) !important;
  -webkit-backdrop-filter:blur(2.5px) !important;
}

/* 既存の装飾リングも一段弱め、外周だけ硬く見えないようにする */
.global-user-frame .hud-lv-circle::before,
.global-user-frame .hud-lv-circle::after{
  opacity:.38 !important;
  filter:blur(.45px) !important;
}

.global-user-frame .hud-lv-label,
.global-user-frame .hud-lv-num{
  position:relative !important;
  z-index:2 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.75) !important;
}

/* =========================================================
   v375 BOTTOM NAV — active location emphasis
   現在地を「上昇 + 拡大」で明確化。
   赤丸だけに依存せず、選択中アイコン自体を主役にする。
   ========================================================= */

/* 通常アイコンは既存位置を維持 */
html body .bottom-nav .bottom-nav-item img{
  transition:
    transform .22s cubic-bezier(.22,.8,.28,1.18),
    filter .20s ease,
    opacity .20s ease !important;
  transform-origin:50% 58% !important;
}

/* 選択中：明確に上へ、ひと回り大きく */
html body .bottom-nav .bottom-nav-item.active img{
  transform:translateY(-7px) scale(1.18) !important;
  opacity:1 !important;
  filter:
    brightness(1.06)
    saturate(1.08)
    sepia(.08)
    drop-shadow(0 3px 5px rgba(93,67,30,.20))
    drop-shadow(0 0 10px rgba(255,246,215,.62)) !important;
}

/* 選択中の文字もアイコンに追従して、現在地として一段だけ強く */
html body .bottom-nav .bottom-nav-item.active .bottom-nav-label{
  transform:translateY(-2px) !important;
  color:#5d431f !important;
  font-weight:700 !important;
}

/* 選択中の淡い光だまりは、拡大アイコンの後ろに少し広げる */
html body .bottom-nav .bottom-nav-item.active::before{
  inset:-12px 2px -7px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,249,223,.72) 0%, rgba(255,246,213,.40) 33%, transparent 66%),
    linear-gradient(180deg, rgba(255,252,241,.42), rgba(233,216,176,.24)) !important;
  border-color:rgba(173,133,58,.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    0 0 12px rgba(137,101,39,.07) !important;
}

/* タップ時も選択中の大きさを崩しすぎない */
html body .bottom-nav .bottom-nav-item.active:active img{
  transform:translateY(-6px) scale(1.14) !important;
}

/* 小型端末では少しだけ控えめにしてラベルとの衝突を防ぐ */
@media (max-width:380px), (max-height:700px){
  html body .bottom-nav .bottom-nav-item.active img{
    transform:translateY(-6px) scale(1.15) !important;
  }
  html body .bottom-nav .bottom-nav-item.active:active img{
    transform:translateY(-5px) scale(1.11) !important;
  }
  html body .bottom-nav .bottom-nav-item.active .bottom-nav-label{
    transform:translateY(-1px) !important;
  }
}

/* =========================================================
   v376 BOTTOM NAV — real size emphasis
   transform:scale だけでは透過余白のあるアイコンで拡大感が弱いため、
   選択中は画像そのものの width / height を拡大する。
   ========================================================= */
html body .bottom-nav .bottom-nav-item img{
  width:42px !important;
  height:42px !important;
}

html body .bottom-nav .bottom-nav-item.active img{
  width:50px !important;
  height:50px !important;
  transform:translateY(-7px) !important;
  opacity:1 !important;
  filter:
    brightness(1.06)
    saturate(1.08)
    sepia(.08)
    drop-shadow(0 3px 5px rgba(93,67,30,.20))
    drop-shadow(0 0 10px rgba(255,246,215,.62)) !important;
}

html body .bottom-nav .bottom-nav-item.active:active img{
  width:49px !important;
  height:49px !important;
  transform:translateY(-6px) !important;
}

@media (max-width:380px), (max-height:700px){
  html body .bottom-nav .bottom-nav-item.active img{
    width:48px !important;
    height:48px !important;
    transform:translateY(-6px) !important;
  }
  html body .bottom-nav .bottom-nav-item.active:active img{
    width:47px !important;
    height:47px !important;
    transform:translateY(-5px) !important;
  }
}

/* =========================================================
   v377 BOTTOM NAV — softer vertical lift
   選択中アイコンの実寸拡大は維持しつつ、上方向の移動量を抑える。
   ========================================================= */
html body .bottom-nav .bottom-nav-item.active img{
  transform:translateY(-3px) !important;
}
html body .bottom-nav .bottom-nav-item.active:active img{
  transform:translateY(-2px) !important;
}
@media (max-width:380px), (max-height:700px){
  html body .bottom-nav .bottom-nav-item.active img{
    transform:translateY(-3px) !important;
  }
  html body .bottom-nav .bottom-nav-item.active:active img{
    transform:translateY(-2px) !important;
  }
}

/* =========================================================
   v384 HOME TYPE MENU — canonical shared component
   ボーナス / フレンド / メッセージ / 神聖樹 / スコアアタックを
   同一HTML構造・同一CSSで描画する。
   個別の文字描画CSS・画像アイコンCSS・神聖樹専用疑似要素は使用しない。
   ========================================================= */

/* 5メニュー共通のタップ領域 / 表示基盤 */
#screen-main .home-type-entry{
  width:clamp(88px,22vw,98px) !important;
  height:clamp(88px,22vw,98px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:30 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#60492c !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -webkit-tap-highlight-color:transparent;
}

/* 過去の画像アイコン / button疑似要素を完全停止 */
#screen-main .home-type-entry > img,
#screen-main .bonus-home-entry-icon,
#screen-main .friend-home-entry-icon,
#screen-main .shinju-home-entry-icon{
  display:none !important;
}

#screen-main .home-type-entry::before,
#screen-main .home-type-entry::after{
  content:none !important;
  display:none !important;
}

/* 文字ロゴ：全メニュー完全共通 */
#screen-main .home-type-logo{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:54px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  color:#60492c !important;
  font-family:"Noto Serif JP",serif !important;
  line-height:1 !important;
  text-rendering:geometricPrecision;
  transform:translateY(1px);
  transition:transform .16s ease, opacity .16s ease, filter .16s ease;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.98))
    drop-shadow(0 0 8px rgba(255,255,255,.76))
    drop-shadow(0 2px 2px rgba(92,67,33,.11));
}

/* 全メニュー同じ白い霞 */
#screen-main .home-type-logo::before,
#screen-main .home-type-logo::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  pointer-events:none;
}

#screen-main .home-type-logo::before{
  z-index:-2;
  width:104px;
  height:44px;
  transform:translate(-50%,-50%) rotate(-2deg);
  border-radius:58% 42% 55% 45% / 45% 58% 42% 55%;
  background:radial-gradient(
    ellipse at 48% 50%,
    rgba(255,255,255,.80) 0%,
    rgba(255,253,247,.52) 34%,
    rgba(255,255,255,.22) 58%,
    rgba(255,255,255,.06) 74%,
    rgba(255,255,255,0) 91%
  );
  filter:blur(8px);
}

#screen-main .home-type-logo::after{
  z-index:-3;
  width:116px;
  height:34px;
  transform:translate(-50%,-50%) rotate(3deg);
  border-radius:44% 56% 47% 53% / 58% 43% 57% 42%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.13) 48%,
    rgba(255,255,255,.04) 69%,
    rgba(255,255,255,0) 90%
  );
  filter:blur(12px);
}

/* 頭文字 */
#screen-main .home-type-head{
  display:inline-block !important;
  flex:0 0 auto !important;
  font-size:30px !important;
  font-weight:500 !important;
  letter-spacing:-.14em !important;
  line-height:1 !important;
  transform:translateY(-1px) rotate(-4deg);
  transform-origin:55% 70%;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.88),
    0 2px 3px rgba(79,57,27,.12);
}

/* 残り文字 */
#screen-main .home-type-rest{
  display:inline-block !important;
  flex:0 0 auto !important;
  margin-left:5px !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-.06em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  transform:translateY(3px) rotate(.4deg);
  text-shadow:
    0 0 3px rgba(255,255,255,.94),
    0 1px 2px rgba(79,57,27,.10);
}

#screen-main .home-type-entry:active .home-type-logo{
  transform:translateY(2px) scale(.94);
  opacity:.86;
}

/* 右側は同じ列・同じ外寸へ統一 */
#screen-main .home-notice-btn{
  right:10px !important;
  top:var(--home-banner-bottom, calc(env(safe-area-inset-top) + 205px)) !important;
}

#screen-main .shinju-home-entry{
  right:10px !important;
  top:var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) !important;
}

#screen-main .score-attack-home-entry{
  position:absolute !important;
  right:10px !important;
  top:calc(
    var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
    + clamp(88px,22vw,98px)
    + 8px
  ) !important;
  bottom:auto !important;
}

/* 左側も同一レイヤー */
#screen-main .bonus-home-entry,
#screen-main .friend-home-entry{
  z-index:30 !important;
}

/* 中央キャラはホームメニューより背面 */
#screen-main > .favorite-area{
  z-index:2 !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .home-type-entry{
    width:84px !important;
    height:84px !important;
  }
  #screen-main .home-type-logo{
    height:50px !important;
  }
  #screen-main .home-type-head{
    font-size:27px !important;
  }
  #screen-main .home-type-rest{
    font-size:12px !important;
  }
  #screen-main .score-attack-home-entry{
    top:calc(
      var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
      + 84px
      + 8px
    ) !important;
  }
}


/* =========================================================
   v385 HOME TYPE MENU — single-source text rendering
   5メニューを button[data-home-head][data-home-rest] の1構造へ統一。
   神聖樹の子要素が外部JSに触られても、ラベルはbutton自身の
   ::before / ::after で描画されるため消えない。
   白い霞もbuttonのbackgroundのみで共通管理する。
   ========================================================= */
#screen-main .home-type-entry{
  position:absolute !important;
  width:clamp(88px,22vw,98px) !important;
  height:clamp(88px,22vw,98px) !important;
  display:block !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:30 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#60492c !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(ellipse 58% 31% at 48% 50%,
      rgba(255,255,255,.80) 0%,
      rgba(255,253,247,.50) 36%,
      rgba(255,255,255,.20) 60%,
      rgba(255,255,255,.055) 76%,
      rgba(255,255,255,0) 92%),
    radial-gradient(ellipse 66% 24% at 53% 52%,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.11) 50%,
      rgba(255,255,255,0) 91%) !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.62))
    drop-shadow(0 2px 2px rgba(92,67,33,.08));
}

/* 旧画像・旧文字DOMは表示に使わない。通知バッジ等は除外。 */
#screen-main .home-type-entry > img,
#screen-main .home-type-entry > .home-type-logo,
#screen-main .bonus-home-entry-icon,
#screen-main .friend-home-entry-icon,
#screen-main .shinju-home-entry-icon{
  display:none !important;
}

/* 共通：大きい頭文字 */
#screen-main .home-type-entry::before{
  content:attr(data-home-head) !important;
  display:block !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  z-index:2 !important;
  width:auto !important;
  height:auto !important;
  transform:translateY(-52%) rotate(-4deg) !important;
  transform-origin:55% 70%;
  color:#60492c !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:30px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-.14em !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.88),
    0 2px 3px rgba(79,57,27,.12) !important;
}

/* 共通：残り文字 */
#screen-main .home-type-entry::after{
  content:attr(data-home-rest) !important;
  display:block !important;
  position:absolute !important;
  left:43px !important;
  top:50% !important;
  z-index:2 !important;
  width:auto !important;
  height:auto !important;
  transform:translateY(-25%) rotate(.4deg) !important;
  color:#60492c !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  white-space:pre !important;
  text-align:left !important;
  pointer-events:none !important;
  text-shadow:
    0 0 3px rgba(255,255,255,.94),
    0 1px 2px rgba(79,57,27,.10) !important;
}

/* 2行ロゴも同じコンポーネントの状態差として管理 */
#screen-main .home-type-entry[data-home-lines="2"]::after{
  transform:translateY(-46%) rotate(.4deg) !important;
  line-height:1.18 !important;
  white-space:pre !important;
}

#screen-main .home-type-entry:active{
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.58))
    drop-shadow(0 1px 1px rgba(92,67,33,.07));
  opacity:.88 !important;
}
#screen-main .home-type-entry:active::before,
#screen-main .home-type-entry:active::after{
  transform:translateY(-48%) scale(.95) !important;
}
#screen-main .home-type-entry[data-home-lines="2"]:active::after{
  transform:translateY(-43%) scale(.95) !important;
}

/* 右側の位置だけは役割ごとの既存変数を継続利用 */
#screen-main .home-notice-btn{
  right:10px !important;
  top:var(--home-banner-bottom, calc(env(safe-area-inset-top) + 205px)) !important;
}
#screen-main .shinju-home-entry{
  right:10px !important;
  top:var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) !important;
}
#screen-main .score-attack-home-entry{
  right:10px !important;
  top:calc(var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) + clamp(88px,22vw,98px) + 8px) !important;
  bottom:auto !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .home-type-entry{
    width:84px !important;
    height:84px !important;
  }
  #screen-main .home-type-entry::before{
    left:10px !important;
    font-size:27px !important;
  }
  #screen-main .home-type-entry::after{
    left:38px !important;
    font-size:12px !important;
  }
  #screen-main .score-attack-home-entry{
    top:calc(var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px)) + 84px + 8px) !important;
  }
}

/* =========================================================
   v386 HOME TYPE MENU — stronger soft white haze
   5メニュー共通。円形に見えないよう、横長の霞を大きく・柔らかくする。
   ========================================================= */
#screen-main .home-type-entry{
  background:
    radial-gradient(ellipse 78% 42% at 48% 50%,
      rgba(255,255,255,.94) 0%,
      rgba(255,254,249,.72) 30%,
      rgba(255,255,255,.42) 52%,
      rgba(255,255,255,.16) 72%,
      rgba(255,255,255,0) 96%),
    radial-gradient(ellipse 92% 32% at 54% 54%,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.22) 48%,
      rgba(255,255,255,.06) 72%,
      rgba(255,255,255,0) 98%) !important;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.82))
    drop-shadow(0 0 15px rgba(255,255,255,.38))
    drop-shadow(0 2px 2px rgba(92,67,33,.06)) !important;
}

/* =========================================================
   v386 BOTTOM NAV — active stays white
   現在地は色変更せず、白い光だまりの広がりだけで示す。
   ========================================================= */
html body .bottom-nav .bottom-nav-item.active img{
  opacity:1 !important;
  filter:
    brightness(1.08)
    saturate(1)
    sepia(0)
    drop-shadow(0 2px 4px rgba(72,62,48,.14))
    drop-shadow(0 0 9px rgba(255,255,255,.92)) !important;
}

html body .bottom-nav .bottom-nav-item.active .bottom-nav-label{
  color:rgba(72,62,48,.88) !important;
  font-weight:600 !important;
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.86) !important;
}

html body .bottom-nav .bottom-nav-item.active::before{
  inset:-18px -7px -11px !important;
  background:
    radial-gradient(ellipse 78% 62% at 50% 38%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.68) 34%,
      rgba(255,255,255,.32) 58%,
      rgba(255,255,255,0) 84%) !important;
  border:0 !important;
  box-shadow:
    0 0 18px rgba(255,255,255,.72),
    0 0 28px rgba(255,255,255,.34) !important;
}

/* =========================================================
   v387 BOTTOM NAV — neutral white active halo
   暖色の光だまりを完全に撤去。現在地は「純白の霞」だけで示す。
   背景のベージュが透けて黄ばんで見えないよう中心部は高不透明度。
   ========================================================= */
html body .bottom-nav .bottom-nav-item.active{
  isolation:isolate !important;
}

html body .bottom-nav .bottom-nav-item.active::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  pointer-events:none !important;
  inset:-21px -10px -13px !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(ellipse 76% 60% at 50% 38%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 24%,
      rgba(255,255,255,.84) 44%,
      rgba(255,255,255,.48) 62%,
      rgba(255,255,255,.18) 76%,
      rgba(255,255,255,0) 92%) !important;
  box-shadow:
    0 0 16px rgba(255,255,255,.92),
    0 0 30px rgba(255,255,255,.58) !important;
  backdrop-filter:saturate(0) brightness(1.08) blur(1.5px) !important;
  -webkit-backdrop-filter:saturate(0) brightness(1.08) blur(1.5px) !important;
}

html body .bottom-nav .bottom-nav-item.active img{
  filter:
    brightness(1.03)
    saturate(.72)
    sepia(0)
    drop-shadow(0 1px 3px rgba(70,62,52,.12))
    drop-shadow(0 0 7px rgba(255,255,255,.96)) !important;
}

html body .bottom-nav .bottom-nav-item.active .bottom-nav-label{
  color:rgba(72,62,48,.86) !important;
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 9px rgba(255,255,255,.96) !important;
}

/* =========================================================
   v388 BOTTOM NAV — boundaryless pure-white fog
   選択中の現在地は色を付けず、境界の見えない白い光だまりだけで示す。
   円形 radial-gradient / 暖色 / backdrop-filter は使わない。
   ========================================================= */
html body .bottom-nav .bottom-nav-item.active{
  isolation:isolate !important;
}

html body .bottom-nav .bottom-nav-item.active::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  top:43% !important;
  right:auto !important;
  bottom:auto !important;
  width:92px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  border:0 !important;
  border-radius:46% 54% 50% 50% / 58% 44% 56% 42% !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:
    -22px 2px 20px rgba(255,255,255,.58),
     24px -3px 22px rgba(255,255,255,.52),
      0 8px 24px rgba(255,255,255,.34) !important;
  filter:blur(18px) !important;
  -webkit-filter:blur(18px) !important;
  opacity:.96 !important;
  pointer-events:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 選択中でもアイコンへ黄・セピアを足さない */
html body .bottom-nav .bottom-nav-item.active img{
  position:relative !important;
  z-index:2 !important;
  filter:
    grayscale(1)
    sepia(0)
    saturate(0)
    brightness(.80)
    contrast(.92)
    drop-shadow(0 0 7px rgba(255,255,255,.90)) !important;
}

html body .bottom-nav .bottom-nav-item.active .bottom-nav-label{
  position:relative !important;
  z-index:2 !important;
  color:rgba(72,62,48,.86) !important;
  text-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 11px rgba(255,255,255,.96) !important;
}

/* =========================================================
   v389 BOTTOM NAV — canonical neutral-white current-location haze
   Root fix:
   - no radial/circular halo
   - no warm tint on active state
   - opaque white core + long feathered horizontal fog
   - overrides all legacy gold active-state rules
   ========================================================= */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active{
  isolation:isolate !important;
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  left:50% !important;
  top:48% !important;
  right:auto !important;
  bottom:auto !important;
  width:116px !important;
  height:34px !important;
  transform:translate(-50%,-50%) !important;
  border:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.90) 18%,
      rgba(255,255,255,1) 38%,
      rgba(255,255,255,1) 62%,
      rgba(255,255,255,.90) 82%,
      rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 20px 10px rgba(255,255,255,.78),
    0 0 38px 16px rgba(255,255,255,.42) !important;
  filter:blur(12px) !important;
  -webkit-filter:blur(12px) !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  filter:
    grayscale(1)
    sepia(0)
    saturate(0)
    brightness(.74)
    contrast(1.02)
    drop-shadow(0 0 8px rgba(255,255,255,.96)) !important;
}

html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active .bottom-nav-label{
  position:relative !important;
  z-index:2 !important;
  color:rgba(68,60,50,.90) !important;
  font-weight:600 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,1) !important;
}

/* =========================================================
   v390 TOP HUD + BOTTOM NAV — PURE WHITE HAZE
   - warm ivory/orange haze removed
   - PLAYER / rank / crystal / coin use neutral white mist
   - bottom current-location haze slightly denser and whiter
   ========================================================= */

/* PLAYER name: neutral white fog, no ivory tint */
html body .global-user-frame .hud-info::before{
  left:-20px !important;
  width:126px !important;
  height:48px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.58) 14%,
    rgba(255,255,255,.96) 36%,
    rgba(255,255,255,.98) 62%,
    rgba(255,255,255,.56) 84%,
    rgba(255,255,255,0) 100%) !important;
  filter:blur(10px) !important;
  -webkit-filter:blur(10px) !important;
  opacity:.96 !important;
}

/* Rank ring: remove warm fill/border and dissolve into white mist */
html body .global-user-frame .hud-lv-circle{
  border:1px solid rgba(255,255,255,.58) !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.88),
    0 0 32px rgba(255,255,255,.54),
    inset 0 0 10px rgba(255,255,255,.72) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}
html body .global-user-frame .hud-lv-circle::before,
html body .global-user-frame .hud-lv-circle::after{
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:0 0 8px rgba(255,255,255,.70) !important;
  opacity:.48 !important;
}

/* Crystal / coin groups: same neutral white fog */
html body .global-user-frame .hud-resource::before{
  width:104px !important;
  height:48px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.52) 13%,
    rgba(255,255,255,.96) 36%,
    rgba(255,255,255,.98) 64%,
    rgba(255,255,255,.54) 86%,
    rgba(255,255,255,0) 100%) !important;
  filter:blur(10px) !important;
  -webkit-filter:blur(10px) !important;
  opacity:.96 !important;
}

/* Keep text readable, but make the glow itself neutral white */
html body .global-user-frame .hud-name,
html body .global-user-frame .hud-res-val,
html body .global-user-frame .hud-gem-plus-btn{
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 9px rgba(255,255,255,1),
    0 1px 2px rgba(61,44,24,.14) !important;
}
html body .global-user-frame .hud-res-icon{
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,1))
    drop-shadow(0 0 9px rgba(255,255,255,.88)) !important;
}

/* Bottom nav: same shape as v389, only a little denser / whiter */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
  width:122px !important;
  height:38px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.94) 16%,
    rgba(255,255,255,1) 35%,
    rgba(255,255,255,1) 65%,
    rgba(255,255,255,.94) 84%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 22px 11px rgba(255,255,255,.88),
    0 0 42px 18px rgba(255,255,255,.52) !important;
  filter:blur(13px) !important;
  -webkit-filter:blur(13px) !important;
  opacity:1 !important;
}

@media (max-width:360px){
  html body .global-user-frame .hud-info::before{
    width:112px !important;
    height:44px !important;
  }
  html body .global-user-frame .hud-resource::before{
    width:90px !important;
    height:44px !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
    width:108px !important;
    height:36px !important;
  }
}

/* =========================================================
   v391 TOP HUD — CANONICAL PURE-WHITE MIST
   Root fix for lingering beige/warm cast:
   - create one shared neutral-white haze behind the entire HUD
   - neutralize the RANK inner disc and resource underline/accent
   - preserve artwork visibility with very soft, boundaryless feathering
   ========================================================= */

html body #global-user-frame.global-user-frame{
  position:fixed !important;
  isolation:isolate !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* One continuous white mist instead of several warm local halos. */
html body #global-user-frame.global-user-frame::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-2 !important;
  pointer-events:none !important;
  left:-8% !important;
  right:-8% !important;
  top:-18px !important;
  height:98px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.90) 28%,
    rgba(255,255,255,.68) 58%,
    rgba(255,255,255,.28) 80%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(13px) !important;
  -webkit-filter:blur(13px) !important;
  opacity:.98 !important;
}

/* Remove any second decorative/warm HUD sheet. */
html body #global-user-frame.global-user-frame::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* Local glows only supplement the shared white mist. */
html body #global-user-frame .hud-info::before,
html body #global-user-frame .hud-resource::before{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.56) 18%,
    rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.92) 62%,
    rgba(255,255,255,.54) 82%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(12px) !important;
  -webkit-filter:blur(12px) !important;
}

/* RANK: preserve EXP ring mechanics, but remove ivory/orange fill. */
html body #global-user-frame .hud-lv-circle{
  background:rgba(255,255,255,.20) !important;
  border-color:rgba(255,255,255,.60) !important;
  box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 22px rgba(255,255,255,.90),
    0 0 38px rgba(255,255,255,.48),
    inset 0 0 10px rgba(255,255,255,.70) !important;
}

html body #global-user-frame .hud-lv-circle::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:3px !important;
  z-index:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.98),
    0 0 12px rgba(255,255,255,.82) !important;
  filter:blur(.15px) !important;
  -webkit-filter:blur(.15px) !important;
  opacity:1 !important;
}

html body #global-user-frame .hud-lv-circle::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.42) !important;
  background:transparent !important;
  box-shadow:0 0 9px rgba(255,255,255,.74) !important;
  opacity:.62 !important;
}

/* Resource underline/accent: neutral white/gray, never gold. */
html body #global-user-frame .hud-resource::after{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.16) 14%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.16) 86%,
    transparent 100%
  ) !important;
}

/* Keep the plus readable without a warm glow. */
html body #global-user-frame .hud-gem-plus-btn{
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 1px 2px rgba(35,35,35,.10) !important;
}

/* Bottom nav: one notch denser/whiter, same boundaryless shape. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.98) 15%,
    rgba(255,255,255,1) 34%,
    rgba(255,255,255,1) 66%,
    rgba(255,255,255,.98) 85%,
    rgba(255,255,255,0) 100%
  ) !important;
  box-shadow:
    0 0 25px 12px rgba(255,255,255,.94),
    0 0 48px 20px rgba(255,255,255,.60) !important;
  filter:blur(14px) !important;
  -webkit-filter:blur(14px) !important;
}

/* =========================================================
   v392 GACHA CENTER — PURE WHITE MIST
   Replace lingering ivory/beige haze around the central gacha UI
   with neutral white, boundaryless mist.
   ========================================================= */

/* Main gacha title haze: pure white only. */
html body #screen-summon .summon-center-title-jp::before{
  width:196px !important;
  height:64px !important;
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 14%,
    rgba(255,255,255,.98) 34%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.98) 66%,
    rgba(255,255,255,.72) 86%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(14px) !important;
  -webkit-filter:blur(14px) !important;
  opacity:.96 !important;
}

/* Smaller title lines: same white mist, no cream tint. */
html body #screen-summon .summon-center-title-en::before,
html body #screen-summon .summon-center-title-more::before{
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.64) 18%,
    rgba(255,255,255,.94) 40%,
    rgba(255,255,255,.94) 60%,
    rgba(255,255,255,.64) 82%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(11px) !important;
  -webkit-filter:blur(11px) !important;
  opacity:.94 !important;
}

/* Pity gauge area: remove the remaining warm/ivory veil. */
html body #screen-summon .pity-counter::before{
  width:118% !important;
  height:200% !important;
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.60) 10%,
    rgba(255,255,255,.93) 28%,
    rgba(255,255,255,.99) 50%,
    rgba(255,255,255,.93) 72%,
    rgba(255,255,255,.60) 90%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(15px) !important;
  -webkit-filter:blur(15px) !important;
  opacity:.97 !important;
}

/* Pity explanation: matching white haze. */
html body #screen-summon .pity-note::before{
  width:210px !important;
  height:34px !important;
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.66) 18%,
    rgba(255,255,255,.96) 42%,
    rgba(255,255,255,.96) 58%,
    rgba(255,255,255,.66) 82%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(11px) !important;
  -webkit-filter:blur(11px) !important;
  opacity:.96 !important;
}

/* Remove warm-colored glow from the text itself as well. */
html body #screen-summon .summon-center-title-en,
html body #screen-summon .summon-center-title-jp,
html body #screen-summon .summon-center-title-more,
html body #screen-summon .pity-label,
html body #screen-summon .pity-num,
html body #screen-summon .pity-note{
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 4px rgba(255,255,255,1),
    0 0 9px rgba(255,255,255,.92),
    0 1px 2px rgba(45,45,45,.10) !important;
}

/* Keep the gauge neutral too: no golden haze around the bar. */
html body #screen-summon .pity-bar-wrap{
  box-shadow:
    inset 0 1px 2px rgba(55,55,55,.10),
    0 1px 0 rgba(255,255,255,.88),
    0 0 5px rgba(255,255,255,.82) !important;
}

/* =========================================================
   v393 GACHA CENTER — BROWN LABEL MIST
   「排出内容・提供割合」だけ、白霞からブラウン系の
   ラベル風フェードへ戻す。輪郭のある箱にはせず、
   横方向へ溶ける霞として表示する。
   ========================================================= */
html body #screen-summon .summon-center-title-more{
  color:rgba(255,252,245,.98) !important;
  text-shadow:
    0 1px 1px rgba(45,29,16,.80),
    0 0 3px rgba(54,34,17,.38),
    0 0 8px rgba(255,255,255,.16) !important;
}

html body #screen-summon .summon-center-title-more::before{
  width:176px !important;
  height:30px !important;
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(94,61,31,0) 0%,
    rgba(94,61,31,.22) 10%,
    rgba(80,51,27,.48) 26%,
    rgba(67,42,23,.68) 43%,
    rgba(62,39,21,.74) 50%,
    rgba(67,42,23,.68) 57%,
    rgba(80,51,27,.48) 74%,
    rgba(94,61,31,.22) 90%,
    rgba(94,61,31,0) 100%
  ) !important;
  filter:blur(5.5px) !important;
  -webkit-filter:blur(5.5px) !important;
  opacity:.92 !important;
}

html body #screen-summon .summon-center-title-more-arrow{
  color:rgba(255,251,242,.94) !important;
  text-shadow:0 1px 2px rgba(45,29,16,.60) !important;
}

/* =========================================================
   v394 GACHA CENTER — EN LABEL READABILITY + CTA ARROW ALIGN
   - STANDARD / LIMITED GACHA を暗く濃くして視認性を上げる
   - 「排出内容・提供割合」の › を文字と同じ高さへ揃える
   ========================================================= */
html body #screen-summon .summon-center-title-en{
  color:rgba(58,40,22,.94) !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 3px rgba(255,255,255,.96),
    0 1px 2px rgba(54,37,20,.16) !important;
}

/* CTAはラベルと矢印を同じ行ボックスで揃える */
html body #screen-summon .summon-center-title-more{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  line-height:1 !important;
}

html body #screen-summon .summon-center-title-more-label,
html body #screen-summon .summon-center-title-more-arrow{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

html body #screen-summon .summon-center-title-more-arrow{
  position:relative !important;
  top:0 !important;
  margin:0 !important;
  transform:none !important;
  translate:none !important;
  vertical-align:middle !important;
}

/* =========================================================
   v395 GACHA CENTER — EN KICKER HIGH-CONTRAST
   STANDARD / LIMITED GACHA が明るいキャラ絵に飲まれないよう、
   小さな英字見出しだけを「濃いブラウン + 無彩色の白霞」で独立。
   ========================================================= */
html body #screen-summon .summon-center-title-en{
  position:relative !important;
  z-index:3 !important;
  color:#4a321d !important;
  font-weight:700 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  opacity:1 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 0 2px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,.98),
    0 1px 2px rgba(44,29,17,.22) !important;
}

/* 丸い光ではなく、英字の左右へ長く溶ける白い霞 */
html body #screen-summon .summon-center-title-en::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:50% !important;
  top:50% !important;
  width:148px !important;
  height:24px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.70) 16%,
    rgba(255,255,255,.98) 36%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.98) 64%,
    rgba(255,255,255,.70) 84%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter:blur(7px) !important;
  -webkit-filter:blur(7px) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

/* =========================================================
   v396 HOME TYPE MENU — borderless text haze
   ホーム5メニューの霞を「ボックス背景」から切り離す。
   背景レイヤーを持たず、文字そのものの周囲へ白い光を拡散することで
   直線的な四辺・矩形感を完全に消す。
   ========================================================= */
#screen-main .home-type-entry{
  background:none !important;
  box-shadow:none !important;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.98))
    drop-shadow(0 0 11px rgba(255,255,255,.90))
    drop-shadow(0 0 19px rgba(255,255,255,.62))
    drop-shadow(0 0 28px rgba(255,255,255,.32)) !important;
}

#screen-main .home-type-entry::before{
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.98),
    0 0 13px rgba(255,255,255,.88),
    0 0 21px rgba(255,255,255,.58),
    0 1px 0 rgba(255,255,255,.96),
    0 2px 3px rgba(79,57,27,.10) !important;
}

#screen-main .home-type-entry::after{
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.98),
    0 0 12px rgba(255,255,255,.84),
    0 0 19px rgba(255,255,255,.54),
    0 1px 2px rgba(79,57,27,.08) !important;
}

#screen-main .home-type-entry:active{
  background:none !important;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.94))
    drop-shadow(0 0 10px rgba(255,255,255,.82))
    drop-shadow(0 0 17px rgba(255,255,255,.50)) !important;
}

/* =========================================================
   v397 BOTTOM NAV — PURE WHITE / SIZE-ONLY ACTIVE STATE
   - idle and active icons use the same pure-white treatment
   - idle and active haze use the same neutral white tone
   - active state is distinguished only by icon size
   - remove legacy yellow/gold/sepia tint and vertical jump
   ========================================================= */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

/* Every nav item gets the same boundaryless white mist. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item::before,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  left:50% !important;
  top:48% !important;
  right:auto !important;
  bottom:auto !important;
  width:104px !important;
  height:30px !important;
  transform:translate(-50%,-50%) !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.44) 18%,
    rgba(255,255,255,.82) 38%,
    rgba(255,255,255,.94) 50%,
    rgba(255,255,255,.82) 62%,
    rgba(255,255,255,.44) 82%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 18px 9px rgba(255,255,255,.56),
    0 0 32px 14px rgba(255,255,255,.28) !important;
  filter:blur(12px) !important;
  -webkit-filter:blur(12px) !important;
  opacity:1 !important;
}

/* Idle and active icons are identically white. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item img,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  filter:
    grayscale(1)
    brightness(0)
    invert(1)
    drop-shadow(0 1px 2px rgba(54,48,40,.24))
    drop-shadow(0 0 5px rgba(255,255,255,.96)) !important;
  transform:none !important;
  transition:width .18s ease,height .18s ease,filter .18s ease !important;
}

/* Idle size. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item img{
  width:42px !important;
  height:42px !important;
}

/* Current location: size only. No jump, tint, or extra glow. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  width:50px !important;
  height:50px !important;
  transform:none !important;
}

/* Labels also keep the same neutral treatment. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item .bottom-nav-label,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active .bottom-nav-label{
  position:relative !important;
  z-index:2 !important;
  color:rgba(64,58,50,.90) !important;
  font-weight:500 !important;
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 9px rgba(255,255,255,.98) !important;
}

html body #bottom-nav-shared.bottom-nav .bottom-nav-item:active img,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active:active img{
  transform:none !important;
}

@media (max-width:360px){
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item img{
    width:40px !important;
    height:40px !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
    width:47px !important;
    height:47px !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item::before,
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
    width:94px !important;
    height:28px !important;
  }
}


/* =========================================================
   v398 BOTTOM NAV — BROWN ICONS / WHITE MIST / SIZE-ONLY ACTIVE
   - icon color stays deep brown for both idle and active
   - mist stays neutral white for both idle and active
   - current location differs only by icon size
   ========================================================= */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item img,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  opacity:1 !important;
  /* original dark ornamental artwork is kept deep brown, not white */
  filter:
    brightness(.46)
    sepia(.52)
    saturate(.88)
    hue-rotate(350deg)
    contrast(1.10)
    drop-shadow(0 1px 2px rgba(255,255,255,.92))
    drop-shadow(0 0 5px rgba(255,255,255,.84)) !important;
}

/* White haze remains exactly the same in idle and active states. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item::before,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.48) 17%,
    rgba(255,255,255,.86) 37%,
    rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.86) 63%,
    rgba(255,255,255,.48) 83%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 18px 9px rgba(255,255,255,.60),
    0 0 34px 15px rgba(255,255,255,.30) !important;
  filter:blur(12px) !important;
  -webkit-filter:blur(12px) !important;
}

/* Size is the only active-state difference. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item img{
  width:42px !important;
  height:42px !important;
}
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  width:50px !important;
  height:50px !important;
  transform:none !important;
}

@media (max-width:360px){
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item img{
    width:40px !important;
    height:40px !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
    width:47px !important;
    height:47px !important;
  }
}

/* =========================================================
   v399 BOTTOM NAV — STABLE LAYOUT / HEAVIER LABELS
   - every icon reserves the same footprint, so tab changes never move the row
   - current tab is distinguished by scale only
   - labels are slightly heavier for readability
   ========================================================= */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item img,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  flex:0 0 50px !important;
  transform-origin:center bottom !important;
  transition:transform .18s ease, filter .18s ease !important;
}

/* Idle icon keeps a 50px layout box but is visually 42px. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item:not(.active) img{
  transform:scale(.84) !important;
}

/* Current location: same box, larger artwork only. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
  transform:scale(1) !important;
}

/* Touch feedback is local to the pressed item; no layout-size change. */
html body #bottom-nav-shared.bottom-nav .bottom-nav-item:not(.active):active img{
  transform:scale(.88) !important;
}
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active:active img{
  transform:scale(1.04) !important;
}

html body #bottom-nav-shared.bottom-nav .bottom-nav-item .bottom-nav-label,
html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active .bottom-nav-label{
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.05 !important;
  letter-spacing:.10em !important;
  color:rgba(61,54,46,.96) !important;
  -webkit-font-smoothing:antialiased;
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 8px rgba(255,255,255,.98) !important;
}

@media (max-width:360px){
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item img,
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
    width:47px !important;
    height:47px !important;
    min-width:47px !important;
    min-height:47px !important;
    flex-basis:47px !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item:not(.active) img{
    transform:scale(.8511) !important; /* ~40px visual size */
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active img{
    transform:scale(1) !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item:not(.active):active img{
    transform:scale(.89) !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active:active img{
    transform:scale(1.04) !important;
  }
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item .bottom-nav-label,
  html body #bottom-nav-shared.bottom-nav .bottom-nav-item.active .bottom-nav-label{
    font-size:10.5px !important;
    font-weight:600 !important;
  }
}

/* =========================================================
   v400 CHARACTER INDEX - soft fading name labels
   四角いバー感をなくし、左右・上下とも白い霞へ自然に溶かす。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-name{
  position:relative !important;
  z-index:1 !important;
  isolation:isolate !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:1px 3px !important;
  overflow:visible !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#screen-zukan.is-primoa-index .primoa-index-name::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:-6px;
  right:-6px;
  top:-2px;
  bottom:-2px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.34) 16%,
    rgba(255,255,255,.62) 34%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,.62) 66%,
    rgba(255,255,255,.34) 84%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(3.2px);
  opacity:.96;
}

#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-name{
  background:transparent !important;
}

#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-name::before{
  opacity:.72;
}


/* =========================================================
   v401 Splash / title BGM toggle visibility + frameless control
   - SaSaSa App splash中はスピーカーボタンを表示しない
   - splash終了後（タイトル画面以降）だけ表示
   - 丸いフレーム/背景を廃止し、スピーカーアイコンだけ見せる
   ========================================================= */

/* 初期状態～splashがdisplay:noneになるまでは非表示。
   #splash はボタンより前にあるため sibling selector だけで制御できる。 */
#splash:not([style*="display: none"]) ~ .global-bgm-toggle{
  display:none !important;
}

.global-bgm-toggle{
  width:36px !important;
  height:36px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:.68 !important;
}

.global-bgm-toggle.is-muted{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  opacity:.46 !important;
}

.global-bgm-toggle .global-bgm-icon{
  width:25px !important;
  height:25px !important;
  opacity:.58 !important;
}

.global-bgm-toggle:active{
  transform:scale(.92) !important;
  opacity:.86 !important;
}

@media (max-width:380px){
  .global-bgm-toggle{
    width:34px !important;
    height:34px !important;
  }
  .global-bgm-toggle .global-bgm-icon{
    width:23px !important;
    height:23px !important;
  }
}


/* =========================================================
   v402 HOME RAID ENTRY
   フレンド直下に「レイド / バトル」を追加。
   文字表現は既存 .home-type-entry の共通コンポーネントをそのまま使用。
   ========================================================= */
#screen-main .raid-home-entry{
  position:absolute !important;
  left:10px !important;
  right:auto !important;
  top:calc(
    var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
    + clamp(88px,22vw,98px)
    + 8px
  ) !important;
  bottom:auto !important;
  z-index:30 !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .raid-home-entry{
    left:8px !important;
    top:calc(
      var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
      + 84px
      + 8px
    ) !important;
  }
}


/* =========================================================
   v403 HOME TYPE TYPOGRAPHY — spacing / stepped hierarchy
   - 神聖樹: 頭文字と残り文字の間隔を少し広げる
   - レイドバトル / スコアアタック: 1文字目を上段、2文字目以降を少し下げ、
     ボーナス等と同じ「頭文字→残り文字」の段差を付ける
   ========================================================= */

/* 神聖樹だけ「神」と「聖樹」の間を少し広げる */
#screen-main .shinju-home-entry::after{
  left:48px !important;
}

/* 2行メニューも、1行目の小文字側を頭文字より低く置く。
   2行目はそのまま下へ流して、他メニューと同じ段差感にする。 */
#screen-main .home-type-entry[data-home-lines="2"]::after{
  transform:translateY(-22%) rotate(.4deg) !important;
  line-height:1.18 !important;
}

#screen-main .home-type-entry[data-home-lines="2"]:active::after{
  transform:translateY(-19%) scale(.95) !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .shinju-home-entry::after{
    left:43px !important;
  }
  #screen-main .home-type-entry[data-home-lines="2"]::after{
    transform:translateY(-20%) rotate(.4deg) !important;
  }
  #screen-main .home-type-entry[data-home-lines="2"]:active::after{
    transform:translateY(-17%) scale(.95) !important;
  }
}

/* =========================================================
   v404 HOME TYPE TYPOGRAPHY — Shinju inner spacing
   「神｜聖｜樹」の3文字それぞれに呼吸を持たせる。
   v403の「神」と「聖樹」の間隔は維持しつつ、聖と樹の間も少し広げる。
   ========================================================= */
#screen-main .shinju-home-entry::after{
  letter-spacing:.14em !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .shinju-home-entry::after{
    letter-spacing:.12em !important;
  }
}

/* =========================================================
   v405 RANK EXP RING — restore visible progress
   白い霞は維持しつつ、経験値進捗だけ濃いブラウンの円周で可視化。
   黄味・オレンジ系の発光は使わない。
   ========================================================= */
html body #global-user-frame .hud-lv-circle{
  background:
    conic-gradient(
      from -90deg,
      #654a2c 0deg,
      #755b38 var(--rank-exp),
      rgba(96,78,56,.16) var(--rank-exp),
      rgba(96,78,56,.16) 360deg
    ) !important;
  border:0 !important;
  box-shadow:
    0 0 9px rgba(255,255,255,.98),
    0 0 20px rgba(255,255,255,.78),
    0 1px 4px rgba(76,57,34,.14) !important;
}

html body #global-user-frame .hud-lv-circle::before{
  inset:3px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:
    inset 0 0 7px rgba(255,255,255,1),
    0 0 8px rgba(255,255,255,.74) !important;
}

html body #global-user-frame .hud-lv-circle::after{
  inset:-2px !important;
  border:1px solid rgba(103,80,49,.20) !important;
  box-shadow:0 0 8px rgba(255,255,255,.78) !important;
  opacity:.72 !important;
}

/* =========================================================
   v406 RANK EXP RING — elegant gold / transparent center
   - 経験値リングは12時開始・時計回り
   - 上品なゴールドで進捗を表示
   - 中央は塗らず、背景色を変えない
   ========================================================= */
html body #global-user-frame .hud-lv-circle{
  position:relative !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.90),
    0 0 20px rgba(255,255,255,.55) !important;
  isolation:isolate !important;
}

/* 円周そのものを疑似要素で描画。中央はmaskで完全に抜く。 */
html body #global-user-frame .hud-lv-circle::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:50% !important;
  padding:0 !important;
  background:
    conic-gradient(
      from 0deg,
      #77726b 0deg,
      #a9a49d var(--rank-exp),
      rgba(100,96,91,.14) var(--rank-exp),
      rgba(100,96,91,.14) 360deg
    ) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.2px)) !important;
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.2px)) !important;
  box-shadow:none !important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.86))
    drop-shadow(0 0 3px rgba(95,91,86,.14)) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* 全周の極細金ラインだけを添える。中央色には触れない。 */
html body #global-user-frame .hud-lv-circle::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:50% !important;
  border:1px solid rgba(92,88,82,.18) !important;
  background:transparent !important;
  box-shadow:
    0 0 4px rgba(255,255,255,.68),
    inset 0 0 4px rgba(255,255,255,.48) !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

html body #global-user-frame .hud-lv-core{
  position:relative !important;
  z-index:2 !important;
  background:transparent !important;
}


/* =========================================================
   UI FOUNDATION v2 — preserved unrelated notice reward fit
   (extracted from the old v428 mixed chrome hotfix block)
   ========================================================= */
.notice-reward-main:has(.notice-reward-start-bundle){
  height:auto !important;
  min-height:54px !important;
  overflow:visible !important;
  align-items:flex-start !important;
}
.notice-reward:has(.notice-reward-start-bundle){
  align-items:stretch !important;
  min-height:74px !important;
  overflow:visible !important;
}
.notice-reward-start-bundle{overflow:visible !important;}
.notice-reward-start-row{row-gap:5px !important;}

/* =========================================================
   v437 CHARACTER INDEX — first-row notice dots foreground overlay
   The scroll container itself is mask-faded near the page heading, so a
   descendant z-index cannot escape that compositing mask. The first-row
   growth dots are therefore mirrored into a direct child of #screen-zukan
   only at the initial scroll position. Once scrolling starts, the mirror is
   removed and the original dots dissolve naturally with the cards.
   ========================================================= */
html body:not(.ui-immersive) #screen-zukan > .zukan-top-notice-overlay-v437{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:10000 !important;
  overflow:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
html body:not(.ui-immersive) #screen-zukan > .zukan-top-notice-overlay-v437 .zukan-top-notice-dot-v437{
  position:absolute !important;
  width:11px !important;
  height:11px !important;
  min-width:11px !important;
  min-height:11px !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  background:#e33b3b !important;
  background-color:#e33b3b !important;
  border:1.5px solid rgba(255,255,255,.95) !important;
  box-shadow:0 1px 3px rgba(75,25,18,.28),0 0 0 2px rgba(227,59,59,.12) !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  animation:none !important;
}
html body:not(.ui-immersive) #screen-zukan .primoa-index-limitbreak-dot.is-mirrored-v437{
  opacity:0 !important;
}

/* =========================================================
   v438 HOME SIDE MENU — inward spacing refinement
   Keep the six text-menu entries away from the screen edge while
   preserving their current vertical rhythm and typography.
   ========================================================= */
#screen-main .bonus-home-entry,
#screen-main .friend-home-entry,
#screen-main .raid-home-entry{
  left:18px !important;
  right:auto !important;
}

#screen-main .home-notice-btn,
#screen-main .shinju-home-entry,
#screen-main .score-attack-home-entry{
  right:18px !important;
  left:auto !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .bonus-home-entry,
  #screen-main .friend-home-entry,
  #screen-main .raid-home-entry{
    left:14px !important;
  }
  #screen-main .home-notice-btn,
  #screen-main .shinju-home-entry,
  #screen-main .score-attack-home-entry{
    right:14px !important;
  }
}


/* =========================================================
   v439 COIN HUD — display cap + slight inward alignment
   - 0..999,999: comma-separated exact value
   - 1,000,000+: 999,999↑ (display only; stored value is untouched)
   - add a small right-side breathing space so the coin block sits inward
   ========================================================= */
html body #global-user-frame .hud-right .hud-resource:last-child{
  margin-right:6px !important;
}

/* The capped label is slightly wider; keep it on one line without disturbing HUD height. */
html body #global-user-frame #user-coin{
  white-space:nowrap !important;
  min-width:0 !important;
  font-variant-numeric:tabular-nums !important;
}


/* =========================================================
   v449 BOTTOM NAV NOTICE — move 3mm lower
   Keep the current visual styling and horizontal position;
   only lower the foreground notification dot by exactly 3mm.
   ========================================================= */
html body:not(.ui-immersive) #bottom-nav-shared.bottom-nav > #bnav-zukan-notice.bottom-nav-notice-overlay{
  top:calc(7px + 3mm) !important;
}

/* =========================================================
   v450 Home side-menu notification badges
   - stop pulse animation
   - move badges 5mm lower from the current position
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .friend-home-entry .friend-notice-dot,
#screen-main .bonus-home-entry-notice {
  top: calc(5px + 5mm) !important;
  animation: none !important;
  transform: none !important;
}

#screen-main .home-notice-btn.has-unread .home-notice-badge,
#screen-main .home-notice-badge[style*="display: block"],
#screen-main .home-notice-badge[style*="display:block"],
#screen-main .home-notice-badge.show,
#screen-main .shinju-home-entry.has-items .shinju-home-entry-badge,
#screen-main .friend-home-entry.has-friend-notice .friend-notice-dot,
#screen-main .bonus-home-entry.has-unclaimed .bonus-home-entry-notice {
  animation: none !important;
  transform: none !important;
}

/* =========================================================
   v451 Home side-menu notification badges — 3px right
   v450の静止 + 5mm下げを維持し、通知ドットだけ3px右へ移動。
   right:5px → 2px
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .friend-home-entry .friend-notice-dot,
#screen-main .bonus-home-entry-notice {
  right: 2px !important;
}


/* =========================================================
   v456 Detail modal back button
   - 右上の×を廃止
   - 左上に「＜戻る」を固定配置
   ========================================================= */
#detail-modal > .detail-modal-back-btn{
  position:absolute !important;
  top: calc(6vh + 12px) !important;
  left: max(
    30px,
    calc((100vw - min(400px, calc(100vw - 36px))) / 2 + 12px)
  ) !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  min-width:86px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(157,124,65,.34) !important;
  background:rgba(255,252,246,.97) !important;
  color:#6f5a39 !important;
  font-family:"Noto Serif JP", serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:38px !important;
  letter-spacing:.02em !important;
  text-align:center !important;
  display:block !important;
  z-index:7000 !important;
  box-shadow:0 7px 18px rgba(69,49,23,.18) !important;
  transform:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
#detail-modal > .detail-modal-back-btn:active{
  transform:scale(.96) !important;
}
@media (max-height:700px){
  #detail-modal > .detail-modal-back-btn{
    top: calc(4vh + 12px) !important;
  }
}


/* =========================================================
   v457 Primor fullscreen back button
   - キャラ画像拡大画面の右上×を廃止
   - 左上に「＜戻る」を配置
   ========================================================= */
#primor-fullscreen-viewer .primor-fullscreen-back{
  position:fixed !important;
  top:calc(env(safe-area-inset-top) + 12px) !important;
  left:14px !important;
  right:auto !important;
  z-index:5 !important;
  min-width:82px !important;
  height:38px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#6f5735 !important;
  font-family:"Noto Serif JP", serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:38px !important;
  letter-spacing:.04em !important;
  text-align:left !important;
  box-shadow:none !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
#primor-fullscreen-viewer .primor-fullscreen-back:active{
  opacity:.58 !important;
}


/* =========================================================
   v465 Home side-menu notification badges
   - current positionから 2px 上
   - current positionから 2px 右
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .friend-home-entry .friend-notice-dot,
#screen-main .bonus-home-entry-notice {
  top: calc(5px + 5mm - 2px) !important;
  right: 0 !important;
}



/* =========================================================
   SCORE ATTACK v473 — IVORY / BEIGE / GOLD
   ピンク基調を完全撤去し、ZERAPHIA本編と同じ
   白・生成り・金の静かな高級感へ統一。
   ========================================================= */

#score-attack-root{
  --sa473-bg:#f6f3ec;
  --sa473-paper:#fffdf8;
  --sa473-paper-2:#f4eee2;
  --sa473-beige:#e7dcc8;
  --sa473-line:rgba(155,124,68,.30);
  --sa473-line-strong:rgba(150,113,45,.52);
  --sa473-gold:#b39355;
  --sa473-gold-deep:#87682e;
  --sa473-ink:#4f493f;
  --sa473-muted:#8c8376;
  background:var(--sa473-bg) !important;
  color:var(--sa473-ink) !important;
}

#score-attack-root .score-attack-page{
  background:
    radial-gradient(circle at 50% -4%,rgba(255,255,255,.96) 0%,rgba(255,255,255,0) 35%),
    radial-gradient(circle at 92% 25%,rgba(198,164,95,.08) 0%,rgba(198,164,95,0) 30%),
    linear-gradient(180deg,#fdfbf6 0%,#f7f3eb 48%,#efe8dc 100%) !important;
  color:var(--sa473-ink) !important;
}
#score-attack-root .score-attack-bg-deco{
  opacity:.10 !important;
  filter:none !important;
}
#score-attack-root .score-attack-bg-deco-a{
  background:radial-gradient(circle,rgba(181,145,77,.18),rgba(181,145,77,0) 70%) !important;
}
#score-attack-root .score-attack-bg-deco-b{
  background:radial-gradient(circle,rgba(180,159,117,.12),rgba(180,159,117,0) 72%) !important;
}

/* HEADER */
#score-attack-root .score-attack-head{
  min-height:calc(76px + env(safe-area-inset-top)) !important;
  flex-basis:calc(76px + env(safe-area-inset-top)) !important;
  grid-template-columns:72px minmax(0,1fr) 72px !important;
  padding:env(safe-area-inset-top) 14px 11px !important;
  background:rgba(255,253,248,.96) !important;
  border-bottom:1px solid var(--sa473-line) !important;
  box-shadow:0 4px 18px rgba(78,62,36,.055) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
#score-attack-root .score-attack-head::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  bottom:-1px !important;
  width:62px !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,transparent,var(--sa473-gold),transparent) !important;
  opacity:.82 !important;
}
#score-attack-root .score-attack-head-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
#score-attack-root .score-attack-head-title small{
  display:block !important;
  margin:0 !important;
  font:600 9px/1 "Cinzel",serif !important;
  letter-spacing:.30em !important;
  color:var(--sa473-gold) !important;
}
#score-attack-root .score-attack-head-title strong{
  display:block !important;
  margin-top:7px !important;
  font:500 17px/1 "Noto Serif JP",serif !important;
  letter-spacing:.16em !important;
  color:#5d503d !important;
  text-shadow:none !important;
}
#score-attack-root .score-attack-back{
  color:#716653 !important;
  font:500 12px/1 "Noto Serif JP",serif !important;
  letter-spacing:.04em !important;
}
#score-attack-root .score-attack-head-mark{
  display:block !important;
  justify-self:end !important;
  color:var(--sa473-gold) !important;
  font-size:11px !important;
  opacity:.72 !important;
}

/* BODY / PANELS */
#score-attack-root .score-attack-scroll{
  padding:12px 14px calc(24px + env(safe-area-inset-bottom)) !important;
  background:transparent !important;
  gap:0 !important;
}
#score-attack-root .score-attack-ranking,
#score-attack-root .score-attack-mode-card,
#score-attack-root .score-attack-me{
  position:relative !important;
  margin-top:10px !important;
  border:1px solid var(--sa473-line) !important;
  border-radius:2px !important;
  background:rgba(255,253,248,.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 5px 18px rgba(74,58,34,.04) !important;
}
#score-attack-root .score-attack-ranking{margin-top:0 !important}
#score-attack-root .score-attack-ranking::before,
#score-attack-root .score-attack-mode-card::before,
#score-attack-root .score-attack-me::before{
  content:none !important;
  display:none !important;
}

/* SECTION HEADS */
#score-attack-root .score-attack-section-head,
#score-attack-root .score-attack-mode-head{
  align-items:flex-end !important;
  margin-bottom:9px !important;
}
#score-attack-root .score-attack-section-head span,
#score-attack-root .score-attack-mode-head small{
  display:block !important;
  font:600 8px/1 "Cinzel",serif !important;
  letter-spacing:.22em !important;
  color:var(--sa473-gold) !important;
}
#score-attack-root .score-attack-section-head strong,
#score-attack-root .score-attack-mode-head strong{
  display:block !important;
  margin-top:5px !important;
  font:600 13px/1.25 "Noto Serif JP",serif !important;
  letter-spacing:.07em !important;
  color:#5b5143 !important;
}
#score-attack-root .score-attack-section-head>small,
#score-attack-root .score-attack-mode-head>span{
  font:500 8px/1 "Cinzel","Noto Serif JP",serif !important;
  letter-spacing:.08em !important;
  color:#a0998d !important;
}

/* RANKING */
#score-attack-root .score-attack-ranking{
  padding:10px 10px 9px !important;
  background:linear-gradient(180deg,rgba(255,254,251,.92),rgba(248,244,235,.88)) !important;
}
#score-attack-root .score-attack-list{
  gap:0 !important;
  border-top:1px solid rgba(164,136,84,.16) !important;
}
#score-attack-root .score-attack-row{
  min-height:50px !important;
  padding:6px 8px !important;
  border:0 !important;
  border-bottom:1px solid rgba(155,129,83,.13) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#score-attack-root .score-attack-row:last-child{border-bottom:0 !important}
#score-attack-root .score-attack-row.is-me{
  background:linear-gradient(90deg,rgba(194,159,88,.12),rgba(255,255,255,.40),rgba(194,159,88,.06)) !important;
  box-shadow:inset 2px 0 0 var(--sa473-gold) !important;
}
#score-attack-root .score-attack-rank-no{
  color:#9a7b42 !important;
  font:600 13px/1 "Cinzel",serif !important;
}
#score-attack-root .score-attack-row-main>b{
  color:#554d42 !important;
  font:600 10px/1.2 "Noto Serif JP",serif !important;
}
#score-attack-root .score-attack-row-main em{
  margin-left:5px !important;
  padding:1px 4px !important;
  border:1px solid rgba(165,130,63,.34) !important;
  border-radius:1px !important;
  background:rgba(246,237,217,.68) !important;
  color:#86662d !important;
  font:600 8px/1.2 "Noto Serif JP",serif !important;
  font-style:normal !important;
}
#score-attack-root .score-attack-row>strong{
  color:#6c5730 !important;
  font:600 13px/1 "Cinzel",serif !important;
}
#score-attack-root .score-attack-party{gap:3px !important}
#score-attack-root .score-attack-party span{
  overflow:hidden !important;
  border:1px solid rgba(160,136,91,.22) !important;
  border-radius:2px !important;
  background:#eee8dc !important;
  box-shadow:none !important;
}
#score-attack-root .score-attack-party img{
  filter:saturate(.90) contrast(.98) !important;
}

/* DIFFICULTY */
#score-attack-root .score-attack-mode-card{
  padding:11px 10px 10px !important;
  background:rgba(255,253,248,.78) !important;
}
#score-attack-root .score-attack-tabs{gap:8px !important}
#score-attack-root .score-attack-tabs button{
  min-height:48px !important;
  height:48px !important;
  border:1px solid rgba(154,130,87,.28) !important;
  border-radius:1px !important;
  background:rgba(255,254,251,.76) !important;
  color:#746b5c !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
#score-attack-root .score-attack-tabs button small{
  color:inherit !important;
  font:600 13px/1 "Cinzel",serif !important;
  letter-spacing:.18em !important;
}
#score-attack-root .score-attack-tabs button.active{
  border-color:var(--sa473-line-strong) !important;
  background:linear-gradient(180deg,rgba(246,237,216,.92),rgba(225,207,170,.82)) !important;
  color:#665128 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.66),
    inset 0 -2px 0 rgba(159,124,54,.08) !important;
}

/* CHALLENGE */
#score-attack-root .score-attack-me.score-attack-start-only{
  min-height:66px !important;
  padding:10px 12px !important;
  background:rgba(250,247,239,.80) !important;
}
#score-attack-root .score-attack-start{
  width:min(252px,86%) !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 auto !important;
  border:1px solid rgba(145,108,44,.58) !important;
  border-radius:1px !important;
  background:linear-gradient(180deg,rgba(255,253,246,.98),rgba(239,227,201,.95)) !important;
  color:#765a27 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    0 3px 10px rgba(95,72,30,.07) !important;
}
#score-attack-root .score-attack-start::before,
#score-attack-root .score-attack-start::after{
  content:"—" !important;
  color:rgba(164,128,58,.58) !important;
  font-size:10px !important;
}
#score-attack-root .score-attack-start span{
  color:#6d5427 !important;
  font:600 14px/1 "Noto Serif JP",serif !important;
  letter-spacing:.18em !important;
  text-shadow:none !important;
}
#score-attack-root .score-attack-start:active{
  transform:translateY(1px) !important;
  background:linear-gradient(180deg,#efe2c3,#dfc998) !important;
}

#score-attack-root .score-attack-loading,
#score-attack-root .score-attack-empty{
  color:#938979 !important;
  font:500 10px/1.8 "Noto Serif JP",serif !important;
}

/* SCORE ATTACK弾の桃色グローも金へ */
.shooting-score-attack-bullet{
  box-shadow:
    0 0 5px rgba(208,174,95,.36),
    0 0 10px rgba(208,174,95,.16) !important;
}

@media (max-height:700px){
  #score-attack-root .score-attack-head{
    min-height:calc(68px + env(safe-area-inset-top)) !important;
    flex-basis:calc(68px + env(safe-area-inset-top)) !important;
    padding-bottom:8px !important;
  }
  #score-attack-root .score-attack-head-title strong{
    font-size:15px !important;
    margin-top:5px !important;
  }
  #score-attack-root .score-attack-scroll{padding-top:8px !important}
  #score-attack-root .score-attack-row{min-height:45px !important}
  #score-attack-root .score-attack-tabs button{
    min-height:42px !important;
    height:42px !important;
  }
  #score-attack-root .score-attack-me.score-attack-start-only{
    min-height:56px !important;
    padding:8px 10px !important;
  }
  #score-attack-root .score-attack-start{
    height:36px !important;
    min-height:36px !important;
  }
}


/* =========================================================
   build513 CHARACTER INDEX - NAME SEARCH
   検索ボタンでフォームを開き、入力中にリアルタイム絞り込み。
   ========================================================= */
#screen-zukan #zukan-header-back{
  right:14px;
}
#screen-zukan .zukan-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}
#screen-zukan .zukan-search-button{
  position:relative;
  min-width:38px;
  width:38px;
  padding:0!important;
}
#screen-zukan .zukan-search-glyph{
  position:relative;
  display:block;
  width:15px;
  height:15px;
  margin:0 auto;
  border:1.6px solid currentColor;
  border-radius:50%;
}
#screen-zukan .zukan-search-glyph::after{
  content:"";
  position:absolute;
  width:7px;
  height:1.6px;
  right:-5px;
  bottom:-3px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:left center;
}
#screen-zukan .zukan-search-button.is-open{
  color:#6d5125!important;
  background:rgba(245,235,214,.62)!important;
}
#screen-zukan .zukan-search-button.has-query::after{
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b98a35;
  box-shadow:0 0 0 2px rgba(255,250,238,.82);
}

#screen-zukan .zukan-name-search{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin:0 14px;
  transition:grid-template-rows .18s ease,opacity .14s ease,margin .18s ease;
  overflow:hidden;
}
#screen-zukan .zukan-name-search.open{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:4px;
  margin-bottom:10px;
}
#screen-zukan .zukan-name-search-form{
  min-height:0;
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:42px;
  border:1px solid rgba(145,118,73,.26);
  border-radius:5px;
  background:rgba(255,253,247,.88);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 3px 10px rgba(80,58,28,.05);
  overflow:hidden;
}
#screen-zukan .zukan-name-search-icon{
  position:relative;
  flex:0 0 auto;
  width:14px;
  height:14px;
  margin-left:13px;
  margin-right:10px;
  border:1.4px solid rgba(111,87,50,.60);
  border-radius:50%;
}
#screen-zukan .zukan-name-search-icon::after{
  content:"";
  position:absolute;
  width:6px;
  height:1.4px;
  right:-4px;
  bottom:-3px;
  border-radius:999px;
  background:rgba(111,87,50,.60);
  transform:rotate(45deg);
  transform-origin:left center;
}
#screen-zukan .zukan-name-search-input{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  flex:1 1 auto;
  height:100%;
  padding:0 38px 0 0;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#56462f;
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  letter-spacing:.04em;
  box-shadow:none!important;
}
#screen-zukan .zukan-name-search-input::placeholder{
  color:rgba(92,75,52,.42);
}
#screen-zukan .zukan-name-search-input::-webkit-search-cancel-button{
  display:none;
}
#screen-zukan .zukan-name-search-clear{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  right:5px;
  top:50%;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(91,72,45,.52);
  font-family:Arial,sans-serif;
  font-size:20px;
  line-height:28px;
  opacity:0;
  pointer-events:none;
}
#screen-zukan .zukan-name-search-clear.show{
  opacity:1;
  pointer-events:auto;
}
#screen-zukan .zukan-name-search-clear:active{
  background:rgba(117,93,56,.08);
  transform:translateY(-50%) scale(.92);
}

@media (max-width:360px){
  #screen-zukan #zukan-header-back{right:8px;}
  #screen-zukan .zukan-header-actions{gap:2px;}
  #screen-zukan .zukan-search-button{min-width:34px;width:34px;}
  #screen-zukan .zukan-name-search{margin-left:10px;margin-right:10px;}
}


/* =========================================================
   build517 - iPhone image reliability / progressive zukan
   ========================================================= */
#screen-zukan .primoa-index-image-wrap.zimg-placeholder{
  position:relative;
  overflow:hidden;
}
#screen-zukan .primoa-index-image-wrap.zimg-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.84) 0%,
      rgba(248,244,234,.74) 48%,
      rgba(226,218,198,.54) 100%
    );
  opacity:1;
  transition:opacity .16s ease;
  pointer-events:none;
}
#screen-zukan .primoa-index-image{
  opacity:1;
}
#screen-zukan .primoa-index-image.zimg-lazy:not(.zimg-loaded){
  opacity:0;
}
#screen-zukan .primoa-index-image.zimg-loaded{
  opacity:1;
  transition:opacity .18s ease;
}
#screen-zukan .primoa-index-image-wrap:has(.zimg-loaded)::before{
  opacity:0;
}
#screen-zukan .primoa-index-image.zimg-failed{
  opacity:0;
}

/* :has 非対応ブラウザ向けにも画像が載れば見た目上プレースホルダは隠れる */
#screen-zukan .primoa-index-image{
  position:relative;
  z-index:1;
}

#screen-zukan .zukan-index-load-sentinel{
  grid-column:1 / -1;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#screen-zukan .zukan-index-load-sentinel span{
  display:block;
  width:18px;
  height:1px;
  background:rgba(129,100,55,.22);
  box-shadow:-7px 0 0 rgba(129,100,55,.08),7px 0 0 rgba(129,100,55,.08);
}

/* ランタイム再読込中は消さず、既存の枠・背景を残す */
img.zimg-loading{
  visibility:visible!important;
}
img.zimg-loaded{
  visibility:visible!important;
}


/* build518 - native lazy-loading stabilization
   実URLをsrcに持たせ、ブラウザ標準の画像ローダーを優先する。 */
#screen-zukan .primoa-index-image.zimg-lazy{
  opacity:1!important;
}
#screen-zukan .primoa-index-image.zimg-loading{
  opacity:1!important;
}


/* =========================================================
   build521 - character detail cleanup
   ========================================================= */

/* 戻る：フレームを消し、文字リンクだけにする */
#detail-modal > .detail-modal-back-btn {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #755c39 !important;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em !important;
}
#detail-modal > .detail-modal-back-btn:active {
  transform: none !important;
  opacity: .55 !important;
}

/* ホーム画面に設定：他UIと同じ明朝体 */
#detail-modal .btn-set-home,
#detail-modal .btn-set-fav.btn-set-home {
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

/* ショットタイプ / 共鳴をLEVEL・HP等と同じ1行レイアウトに固定 */
#detail-modal .detail-status-grid .detail-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
#detail-modal .detail-status-grid .detail-status-label {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#detail-modal .detail-status-grid .detail-status-val {
  min-width: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}


/* =========================================================
   build524 - hide element information for unowned characters
   未所持キャラは属性未判明扱い。
   カード背景・縁・オーバーレイから属性色を完全に外す。
   ========================================================= */
#screen-zukan.is-primoa-index .primoa-index-card.is-unowned {
  --primoa-element-base: rgba(224, 220, 211, .34) !important;
  --primoa-element-edge: rgba(137, 130, 118, .24) !important;
}

#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-image-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(250,248,243,.92),
      rgba(226,222,214,.72)
    ) !important;
  border-color: rgba(137,130,118,.24) !important;
  box-shadow:
    inset 0 -12px 20px rgba(151,145,134,.08),
    0 3px 10px rgba(85,63,30,.05) !important;
}

#screen-zukan.is-primoa-index .primoa-index-card.is-unowned .primoa-index-image-wrap::before {
  background:
    linear-gradient(
      180deg,
      transparent 14%,
      rgba(166,160,149,.08) 60%,
      rgba(120,114,104,.14) 116%
    ) !important;
  opacity: .52 !important;
}


/* =========================================================
   build530 - Score Attack party images + 7-char player names
   ========================================================= */

/* SCORE ATTACK:
   row-main内を「名前 / 3人パネル」の2列にして、名前幅を確保する。 */
#score-attack-root .score-attack-row{
  grid-template-columns: 22px minmax(0,1fr) minmax(68px,auto) !important;
  gap: 6px !important;
}
#score-attack-root .score-attack-row-main{
  min-width:0 !important;
  overflow:visible !important;
  display:grid !important;
  grid-template-columns:minmax(70px,1fr) auto !important;
  align-items:center !important;
  gap:6px !important;
}
#score-attack-root .score-attack-row-main>b{
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10px !important;
}
#score-attack-root .score-attack-row-main .score-attack-party{
  margin-top:0 !important;
  justify-content:flex-end !important;
  gap:2px !important;
}
#score-attack-root .score-attack-row-main .score-attack-party span{
  flex:0 0 24px !important;
  width:24px !important;
  height:24px !important;
}
#score-attack-root .score-attack-row-main .score-attack-party img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
}
#score-attack-root .score-attack-row>strong{
  min-width:68px !important;
  font-size:11px !important;
}

@media (max-width:360px){
  #score-attack-root .score-attack-row-main{
    grid-template-columns:minmax(62px,1fr) auto !important;
    gap:4px !important;
  }
  #score-attack-root .score-attack-row-main .score-attack-party span{
    flex-basis:22px !important;
    width:22px !important;
    height:22px !important;
  }
  #score-attack-root .score-attack-row>strong{
    min-width:62px !important;
    font-size:10px !important;
  }
}

/* FRIEND:
   7文字名を省略せず置けるよう、名前側を優先する。
   ランクや解除ボタンは縮めず、カード本文内で名前に十分な幅を確保。 */
#screen-friend .friend-card-topline{
  gap:6px !important;
}
#screen-friend .friend-card-name{
  flex:1 1 auto !important;
  min-width:7em !important;
  max-width:100% !important;
  font-size:14px !important;
  letter-spacing:0 !important;
}
#screen-friend .friend-card-rank{
  flex:0 0 auto !important;
  font-size:9px !important;
}
#screen-friend .friend-req-name,
#screen-friend .friend-search-card-name,
.friend-profile-name{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


/* =========================================================
   build534 - SCORE ATTACK TOP5 ranking layout
   ========================================================= */

/* 上位5名を主役にするため、1行を広げて名前とキャラパネルを大きくする */
#score-attack-root .score-attack-row{
  min-height:58px !important;
  grid-template-columns:24px minmax(0,1fr) minmax(72px,auto) !important;
  gap:8px !important;
  padding:7px 8px !important;
}

#score-attack-root .score-attack-row-main{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(78px,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
}

#score-attack-root .score-attack-row-main>b{
  min-width:0 !important;
  max-width:none !important;
  font-size:12px !important;
  letter-spacing:.01em !important;
  line-height:1.35 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#score-attack-root .score-attack-row-main em{
  font-size:7px !important;
  padding:1px 3px !important;
  margin-left:3px !important;
}

#score-attack-root .score-attack-party{
  gap:3px !important;
}

#score-attack-root .score-attack-row-main .score-attack-party span{
  flex:0 0 36px !important;
  width:36px !important;
  height:36px !important;
  border-radius:8px !important;
}

#score-attack-root .score-attack-row-main .score-attack-party img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  border-radius:8px !important;
}

#score-attack-root .score-attack-row>strong{
  min-width:72px !important;
  font-size:12px !important;
  letter-spacing:.02em !important;
}

/* 6位以下は初期状態で折りたたむ */
#score-attack-root .score-attack-row-extra{
  display:none !important;
}
#score-attack-root .score-attack-list.show-all .score-attack-row-extra{
  display:grid !important;
}

/* ランキング下部の展開ボタン */
#score-attack-root .score-attack-more{
  width:100% !important;
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:5px 0 0 !important;
  padding:6px 10px !important;
  border:0 !important;
  border-top:1px solid rgba(168,137,79,.18) !important;
  background:transparent !important;
  color:#8b734b !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
}
#score-attack-root .score-attack-more small{
  min-width:20px !important;
  padding:1px 5px !important;
  border:1px solid rgba(171,139,78,.28) !important;
  border-radius:999px !important;
  color:#9b7c47 !important;
  font-family:"Cinzel",serif !important;
  font-size:8px !important;
  letter-spacing:0 !important;
}

@media (max-width:360px){
  #score-attack-root .score-attack-row{
    grid-template-columns:22px minmax(0,1fr) minmax(64px,auto) !important;
    gap:5px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  #score-attack-root .score-attack-row-main{
    grid-template-columns:minmax(68px,1fr) auto !important;
    gap:5px !important;
  }
  #score-attack-root .score-attack-row-main>b{
    font-size:11px !important;
  }
  #score-attack-root .score-attack-row-main .score-attack-party span{
    flex-basis:32px !important;
    width:32px !important;
    height:32px !important;
  }
  #score-attack-root .score-attack-row>strong{
    min-width:64px !important;
    font-size:10.5px !important;
  }
}

/* =========================================================
   build547: Shinju screen opaque surface
   - 神聖樹画面から背面のホーム/UIが透けないよう完全不透明化
   - 神聖樹ビジュアル自体の水彩表現は維持
   ========================================================= */
#shinju-overlay {
  background: #f7f4ec !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shinju-panel,
.shinju-visual-wrap {
  background: #f7f4ec !important;
}

.shinju-stage {
  background: #fff9e8 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shinju-content {
  background: linear-gradient(180deg, #fffdf8 0%, #f7f2e8 100%) !important;
  border-top-color: rgba(157, 126, 74, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shinju-offer-all {
  background: #fff8df !important;
}

.shinju-item-card,
.shinju-item-empty {
  background: #fffdf8 !important;
  border-color: rgba(157, 126, 74, 0.14) !important;
}


/* =========================================================
   build554 GACHA PROVIDING-RATE SHEET HEIGHT
   ユーザーフレーム / ボトムナビと干渉しないよう、
   提供割合シートの上下を約1cmずつ内側へ寄せる。
   中央リストは既存どおり内部スクロール。
   ========================================================= */
.gacha-pool-detail-sheet{
  top:calc(env(safe-area-inset-top) + 62px) !important;
  bottom:calc(env(safe-area-inset-bottom) + 66px) !important;
}

/* 低い端末では表示領域を確保しつつHUD/NAVを避ける */
@media (max-height:700px){
  .gacha-pool-detail-sheet{
    top:calc(env(safe-area-inset-top) + 58px) !important;
    bottom:calc(env(safe-area-inset-bottom) + 62px) !important;
    padding-top:20px !important;
    padding-bottom:14px !important;
  }
}


/* =========================================================
   build555 GACHA PROVIDING-RATE SHEET + OWNERSHIP
   HUD / ボトムナビからさらに内側へ寄せる。
   キャラクターごとに4凸到達を5/5とした所有進捗を表示。
   ========================================================= */
.gacha-pool-detail-sheet{
  top:calc(env(safe-area-inset-top) + 76px) !important;
  bottom:calc(env(safe-area-inset-bottom) + 82px) !important;
}

.gacha-pool-entry-owned{
  margin-top:2px;
  font-family:"Noto Serif JP",serif;
  font-size:8px;
  line-height:1.2;
  letter-spacing:.04em;
  color:rgba(113,83,43,.66);
  white-space:nowrap;
}

@media (max-height:700px){
  .gacha-pool-detail-sheet{
    top:calc(env(safe-area-inset-top) + 72px) !important;
    bottom:calc(env(safe-area-inset-bottom) + 80px) !important;
    padding-top:18px !important;
    padding-bottom:12px !important;
  }
  .gacha-pool-entry{
    min-height:50px;
  }
}


/* =========================================================
   build560 CHARACTER INDEX - HEADER BUTTONS / STICKY SEARCH
   - 検索/メニューボタンの楕円フレームを撤去
   - 検索フォームは一覧スクロール中もページヘッダー直下に固定
   ========================================================= */
#screen-zukan.is-primoa-index .zukan-header-switch,
#screen-zukan.is-primoa-index .zukan-search-button,
#screen-zukan.is-primoa-index .zukan-filter-menu-button{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
#screen-zukan.is-primoa-index .zukan-header-switch:active,
#screen-zukan.is-primoa-index .zukan-search-button:active,
#screen-zukan.is-primoa-index .zukan-filter-menu-button:active,
#screen-zukan.is-primoa-index .zukan-search-button.is-open,
#screen-zukan.is-primoa-index .zukan-filter-menu-button.is-filtered{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* 開いた検索欄はスクロールレイヤー内で固定。
   共通HUD(72px) + ページヘッダー(64px) の直下に残す。 */
#screen-zukan.is-primoa-index .zukan-name-search.open{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:calc(var(--header-h) + var(--page-header-h) + 4px) !important;
  z-index:210 !important;
  margin-top:4px !important;
  margin-bottom:10px !important;
  padding-top:3px !important;
  padding-bottom:3px !important;
  background:linear-gradient(
    180deg,
    rgba(250,247,239,.97) 0%,
    rgba(250,247,239,.94) 72%,
    rgba(250,247,239,.82) 100%
  ) !important;
  box-shadow:0 7px 12px rgba(110,88,52,.045) !important;
}

@media (max-width:360px){
  #screen-zukan.is-primoa-index .zukan-name-search.open{
    top:calc(var(--header-h) + var(--page-header-h) + 2px) !important;
  }
}


/* =========================================================
   build561 CHARACTER INDEX - SEARCH POSITION
   検索フォームをキャラ一覧タイトル / 検索 / メニューの直下へ固定。
   sticky は自然配置位置より上へ移動できないため fixed へ変更する。
   ========================================================= */
#screen-zukan.is-primoa-index .zukan-name-search.open{
  position:fixed !important;
  top:calc(var(--header-h) + var(--page-header-h) + 2px) !important;
  left:50% !important;
  right:auto !important;
  width:min(calc(100vw - 24px), 406px) !important;
  margin:0 !important;
  padding:2px 0 4px !important;
  transform:translateX(-50%) !important;
  z-index:225 !important;
  box-sizing:border-box !important;
}

/* fixed化で通常フローから外れるため、先頭キャラが検索欄の下に隠れないよう確保。 */
#screen-zukan.is-primoa-index .zukan-name-search.open + #box-grid{
  margin-top:52px !important;
}

@media (max-width:360px){
  #screen-zukan.is-primoa-index .zukan-name-search.open{
    top:calc(var(--header-h) + var(--page-header-h)) !important;
    width:calc(100vw - 20px) !important;
  }
  #screen-zukan.is-primoa-index .zukan-name-search.open + #box-grid{
    margin-top:50px !important;
  }
}


/* =========================================================
   build571 DARK ATTRIBUTE ICON — supplied artwork
   type_dark.webp はユーザー指定の水彩/月輪アイコンをそのまま表示する。
   単色化フィルターは適用しない。
   ========================================================= */
img[src*="type_dark.webp"]{
  filter:none !important;
}


/* =========================================================
   build574 ECHO TOWER — home left menu placeholder
   将来コンテンツ「残響の塔」。既存HOME TYPE MENUの文字組みを継承し、
   「残」だけを赤、残りの「響の塔」は既存ブラウンのまま表示する。
   ========================================================= */
#screen-main .resonance-tower-home-entry{
  position:absolute !important;
  left:18px !important;
  right:auto !important;
  top:calc(
    var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
    + (clamp(88px,22vw,98px) + 8px) * 2
  ) !important;
  bottom:auto !important;
  z-index:30 !important;
}

/* 「残」だけ赤。残り文字は共通HOME TYPE MENUのブラウンを維持。 */
#screen-main .resonance-tower-home-entry::before{
  color:#a13a35 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.90),
    0 2px 3px rgba(104,38,34,.14) !important;
}

#screen-main .resonance-tower-home-entry::after{
  color:#60492c !important;
  left:49px !important;
  letter-spacing:.08em !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .resonance-tower-home-entry{
    left:14px !important;
    top:calc(
      var(--home-shinju-top, calc(env(safe-area-inset-top) + 300px))
      + (84px + 8px) * 2
    ) !important;
  }
}


/* =========================================================
   build583 HOME TYPE MENU — first-letter tilt only
   - 全メニュー共通で、傾きを付けるのは先頭1文字だけ。2文字目以降は0deg固定。
   - 残響の塔は「残 / 響 / の / 塔」を4等分。
   - 神聖樹は「神 / 聖 / 樹」の字間を均等感を保ちつつ詰める。
   ========================================================= */
#screen-main .home-type-entry.home-type-letterized::before,
#screen-main .home-type-entry.home-type-letterized::after{
  content:none !important;
  display:none !important;
}

#screen-main .home-type-letter-layer{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  z-index:2 !important;
  pointer-events:none !important;
  transform-origin:50% 50% !important;
}

#screen-main .home-type-letter{
  display:inline-block !important;
  position:relative !important;
  font-family:"Noto Serif JP",serif !important;
  color:#60492c !important;
  background:none !important;
  border:0 !important;
  white-space:pre !important;
}

#screen-main .home-type-glyph{
  display:inline-block !important;
  font:inherit !important;
  color:inherit !important;
  line-height:inherit !important;
  text-shadow:inherit !important;
  transform:rotate(var(--home-letter-tilt,0deg)) !important;
  transform-origin:50% 68% !important;
  will-change:transform;
}

#screen-main .home-type-letter.is-head{
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  font-size:30px !important;
  font-weight:500 !important;
  line-height:1 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.88),
    0 2px 3px rgba(79,57,27,.12) !important;
  transform:translateY(-52%) !important;
}

#screen-main .home-type-rest-letter-wrap{
  position:absolute !important;
  left:43px !important;
  top:50% !important;
  display:block !important;
  transform:translateY(-25%) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  text-align:left !important;
  white-space:nowrap !important;
}

#screen-main .home-type-letter-line{
  display:flex !important;
  align-items:baseline !important;
  gap:0 !important;
  height:1em !important;
  white-space:nowrap !important;
}

#screen-main .home-type-letter.is-rest{
  position:relative !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  margin-right:-.06em !important;
  text-shadow:
    0 0 3px rgba(255,255,255,.94),
    0 1px 2px rgba(79,57,27,.10) !important;
}

#screen-main .home-type-letter.is-space{
  width:.56em !important;
  margin-right:0 !important;
}

#screen-main .home-type-line-break{
  display:block !important;
  height:.18em !important;
}

#screen-main .home-type-entry[data-home-lines="2"] .home-type-rest-letter-wrap{
  transform:translateY(-46%) !important;
  line-height:1.18 !important;
}

#screen-main .home-type-entry:active .home-type-letter-layer{
  transform:scale(.95) !important;
}

#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  padding:0 2px !important;
}

#screen-main .shinju-home-entry .shinju-letter-grid{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  display:grid !important;
  /* 神・聖・樹の見た目上の字間を揃えつつ、聖と樹が離れすぎないよう固定幅化 */
  grid-template-columns:34px 18px 18px !important;
  column-gap:1px !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:center !important;
  padding:0 !important;
}

#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .home-type-letter,
#screen-main .shinju-home-entry .shinju-letter-grid .home-type-letter{
  position:static !important;
  left:auto !important;
  top:auto !important;
  margin:0 !important;
  transform:none !important;
}

#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-head,
#screen-main .shinju-home-entry .shinju-letter-grid .is-head{
  font-size:30px !important;
  font-weight:500 !important;
}

#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-head{
  /* build583: 「残」と「相」の間だけ、半角スペース1個分ほど広げる */
  transform:translateX(-4px) !important;
  color:#a13a35 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.90),
    0 2px 3px rgba(104,38,34,.14) !important;
}

#screen-main .shinju-home-entry .shinju-letter-grid .is-head{
  color:#60492c !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 4px rgba(255,255,255,.88),
    0 2px 3px rgba(79,57,27,.12) !important;
}

#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-rest,
#screen-main .shinju-home-entry .shinju-letter-grid .is-rest{
  font-size:13px !important;
  font-weight:600 !important;
  color:#60492c !important;
  margin:0 !important;
  text-shadow:
    0 0 3px rgba(255,255,255,.94),
    0 1px 2px rgba(79,57,27,.10) !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main .home-type-letter.is-head{
    font-size:27px !important;
  }
  #screen-main .home-type-rest-letter-wrap,
  #screen-main .home-type-letter.is-rest{
    font-size:12px !important;
  }
  #screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-head,
  #screen-main .shinju-home-entry .shinju-letter-grid .is-head{
    font-size:27px !important;
  }
  #screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-rest,
  #screen-main .shinju-home-entry .shinju-letter-grid .is-rest{
    font-size:12px !important;
  }
}


/* =========================================================
   build584 HOME SIDE MENU — shared horizontal origin
   レイアウトの基準点を左右それぞれの列で完全統一。
   - 左列: button左端を同一化し、頭文字の開始位置も共通化
   - 右列: button右端を同一化し、頭文字の開始位置も共通化
   - 残響の塔 / 神聖樹の特殊文字組みも、通常メニューと同じ頭文字X座標から開始
   ========================================================= */
#screen-main{
  --home-side-menu-inset:18px;
  --home-side-menu-head-x:12px;
}

/* 左右の列そのものを同じ基準線へ固定 */
#screen-main .bonus-home-entry,
#screen-main .friend-home-entry,
#screen-main .raid-home-entry,
#screen-main .resonance-tower-home-entry{
  left:var(--home-side-menu-inset) !important;
  right:auto !important;
}

#screen-main .home-notice-btn,
#screen-main .shinju-home-entry,
#screen-main .score-attack-home-entry{
  right:var(--home-side-menu-inset) !important;
  left:auto !important;
}

/* 通常メニューの頭文字も同じ開始位置 */
#screen-main .home-type-letter.is-head{
  left:var(--home-side-menu-head-x) !important;
}

/* 残響の塔：先頭「残」を通常メニューと同じXから開始。
   「残→響」だけ半角スペース1個ぶんほど広め、響→の→塔は等間隔。 */
#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid{
  left:var(--home-side-menu-head-x) !important;
  right:auto !important;
  width:auto !important;
  display:grid !important;
  grid-template-columns:33px 13px 13px 13px !important;
  column-gap:4px !important;
  justify-content:start !important;
  justify-items:start !important;
  padding:0 !important;
}
#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-head{
  transform:none !important;
  justify-self:start !important;
}
#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid .is-rest{
  justify-self:start !important;
}

/* 神聖樹：特殊グリッドでも「神」の開始位置は他の右メニューと共通。
   聖と樹は離しすぎず、既存の小さめ字間を維持。 */
#screen-main .shinju-home-entry .shinju-letter-grid{
  left:var(--home-side-menu-head-x) !important;
  right:auto !important;
  width:auto !important;
  display:grid !important;
  grid-template-columns:30px 13px 13px !important;
  column-gap:1px !important;
  justify-content:start !important;
  justify-items:start !important;
  padding:0 !important;
}
#screen-main .shinju-home-entry .shinju-letter-grid .is-head,
#screen-main .shinju-home-entry .shinju-letter-grid .is-rest{
  justify-self:start !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main{
    --home-side-menu-inset:14px;
    --home-side-menu-head-x:10px;
  }
  #screen-main .resonance-tower-home-entry .resonance-tower-letter-grid{
    grid-template-columns:30px 12px 12px 12px !important;
    column-gap:3px !important;
  }
  #screen-main .shinju-home-entry .shinju-letter-grid{
    grid-template-columns:27px 12px 12px !important;
    column-gap:1px !important;
  }
}

/* =========================================================
   build585 HOME SIDE MENU — shared first/second character gap
   全メニュー共通で、1文字目→2文字目の間を少し広めに統一。
   先頭文字の開始位置はbuild584の左右共通基準を維持。
   ========================================================= */
#screen-main{
  --home-side-menu-rest-x:48px;
  --home-side-menu-rest-step:17px;
}

/* 通常メニュー：2文字目の開始位置を共通化 */
#screen-main .home-type-rest-letter-wrap{
  left:var(--home-side-menu-rest-x) !important;
}

/* 残響の塔：残→響も同じ共通ギャップ。響→の→塔は軽く字間を確保。 */
#screen-main .resonance-tower-home-entry .resonance-tower-letter-grid{
  grid-template-columns:
    calc(var(--home-side-menu-rest-x) - var(--home-side-menu-head-x))
    var(--home-side-menu-rest-step)
    var(--home-side-menu-rest-step)
    13px !important;
  column-gap:0 !important;
}

/* 神聖樹：神→聖を他メニューと同じ共通ギャップにし、聖→樹は自然な小字間。 */
#screen-main .shinju-home-entry .shinju-letter-grid{
  grid-template-columns:
    calc(var(--home-side-menu-rest-x) - var(--home-side-menu-head-x))
    var(--home-side-menu-rest-step)
    13px !important;
  column-gap:0 !important;
}

@media (max-width:380px), (max-height:700px){
  #screen-main{
    --home-side-menu-rest-x:43px;
    --home-side-menu-rest-step:16px;
  }
  #screen-main .resonance-tower-home-entry .resonance-tower-letter-grid{
    grid-template-columns:
      calc(var(--home-side-menu-rest-x) - var(--home-side-menu-head-x))
      var(--home-side-menu-rest-step)
      var(--home-side-menu-rest-step)
      12px !important;
  }
  #screen-main .shinju-home-entry .shinju-letter-grid{
    grid-template-columns:
      calc(var(--home-side-menu-rest-x) - var(--home-side-menu-head-x))
      var(--home-side-menu-rest-step)
      12px !important;
  }
}

/* =========================================================
   build597 HOME SIDE MENU — soft white reading haze restore
   左右メニューの文字裏に、境界のない薄い白霞を復元。
   build583以降の letterized DOM を前提に、文字レイヤーの
   疑似要素だけで描画するため文字位置・タップ領域は変えない。
   ========================================================= */
#screen-main .home-type-letter-layer{
  isolation:isolate !important;
}

/* 文字全体を包む、横長で薄い主霞 */
#screen-main .home-type-letter-layer::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  left:50% !important;
  top:50% !important;
  width:108px !important;
  height:44px !important;
  transform:translate(-50%,-50%) rotate(-1deg) !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255,255,255,.54) 0%,
      rgba(255,255,255,.40) 30%,
      rgba(255,255,255,.22) 52%,
      rgba(255,255,255,.08) 70%,
      rgba(255,255,255,0) 90%
    ) !important;
  filter:blur(7px) !important;
  -webkit-filter:blur(7px) !important;
  opacity:.84 !important;
}

/* 中心だけ少し密度を足して、背景が明るい場所でも字が沈まないようにする */
#screen-main .home-type-letter-layer::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  left:50% !important;
  top:50% !important;
  width:88px !important;
  height:28px !important;
  transform:translate(-50%,-50%) rotate(2deg) !important;
  border:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.20) 45%,
      rgba(255,255,255,.06) 68%,
      rgba(255,255,255,0) 88%
    ) !important;
  filter:blur(9px) !important;
  -webkit-filter:blur(9px) !important;
  opacity:.80 !important;
}

/* 霞より文字を必ず前面へ */
#screen-main .home-type-letter-layer .home-type-letter,
#screen-main .home-type-letter-layer .home-type-rest-letter-wrap{
  z-index:1 !important;
}

/* タップ時も霞を消さず、ほんの少しだけ薄くする */
#screen-main .home-type-entry:active .home-type-letter-layer::before{
  opacity:.70 !important;
}
#screen-main .home-type-entry:active .home-type-letter-layer::after{
  opacity:.65 !important;
}

/* 小さい端末では広がりだけ少し抑える */
@media (max-width:380px), (max-height:700px){
  #screen-main .home-type-letter-layer::before{
    width:100px !important;
    height:40px !important;
    filter:blur(7px) !important;
    -webkit-filter:blur(7px) !important;
  }
  #screen-main .home-type-letter-layer::after{
    width:82px !important;
    height:26px !important;
  }
}

/* =========================================================
   build597 巡行 SCROLL MELT — character/settings visual parity
   巡行だけ .screen-scroll ではなく .ninmu-left / .ninmu-right が
   実スクロールコンテナのため、共通v422マスクが届いていなかった。
   左右カラムの上下端を同じ段階で透明化し、見切れを白背景へ溶かす。
   レイアウト寸法・スクロール量・タップ領域は変更しない。
   ========================================================= */
html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-left,
html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-right{
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0,
    rgba(0,0,0,.28) 10px,
    rgba(0,0,0,.55) 22px,
    rgba(0,0,0,.82) 34px,
    #000 48px,
    #000 calc(100% - 58px),
    rgba(0,0,0,.82) calc(100% - 44px),
    rgba(0,0,0,.55) calc(100% - 30px),
    rgba(0,0,0,.28) calc(100% - 18px),
    rgba(0,0,0,.10) calc(100% - 8px),
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0,
    rgba(0,0,0,.28) 10px,
    rgba(0,0,0,.55) 22px,
    rgba(0,0,0,.82) 34px,
    #000 48px,
    #000 calc(100% - 58px),
    rgba(0,0,0,.82) calc(100% - 44px),
    rgba(0,0,0,.55) calc(100% - 30px),
    rgba(0,0,0,.28) calc(100% - 18px),
    rgba(0,0,0,.10) calc(100% - 8px),
    transparent 100%
  ) !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
}

/* 小さい端末では可視領域を食いすぎないよう溶け幅を少し短縮 */
@media (max-width:380px), (max-height:700px){
  html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-left,
  html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-right{
    -webkit-mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0,
      rgba(0,0,0,.36) 8px,
      rgba(0,0,0,.66) 20px,
      #000 36px,
      #000 calc(100% - 46px),
      rgba(0,0,0,.66) calc(100% - 28px),
      rgba(0,0,0,.32) calc(100% - 14px),
      transparent 100%
    ) !important;
    mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0,
      rgba(0,0,0,.36) 8px,
      rgba(0,0,0,.66) 20px,
      #000 36px,
      #000 calc(100% - 46px),
      rgba(0,0,0,.66) calc(100% - 28px),
      rgba(0,0,0,.32) calc(100% - 14px),
      transparent 100%
    ) !important;
  }
}

/* =========================================================
   build597 巡行 INITIAL OFFSET — keep first row out of melt core
   初期表示時に先頭項目が上側マスクの濃い領域へ入り込みすぎないよう、
   左右スクロール内容の開始位置だけを少し下げる。
   スクロール領域・カード寸法・見出し位置は変更しない。
   ========================================================= */
html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-left,
html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-right{
  padding-top:22px !important;
}

/* 右カラム既存の余白を維持 */
html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-right{
  padding-right:2px !important;
  padding-bottom:calc(110px + env(safe-area-inset-bottom)) !important;
}

/* 小さい端末では少しだけ控えめ */
@media (max-width:380px), (max-height:700px){
  html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-left,
  html body:not(.ui-immersive) #screen-ninmu.screen.active .ninmu-right{
    padding-top:18px !important;
  }
}







/* =========================================================
   build651 RANK EXP RING — 12 o'clock → clockwise (fixed)
   - CSS conic-gradient の 0deg は12時方向。from 0deg を明示。
   - --rank-exp は JS 側の 0〜360deg をそのまま時計回りに消費する。
   - 右(3時) → 下(6時) → 左(9時) の順で進む。
   ========================================================= */
html body #global-user-frame .hud-lv-circle{
  position:relative !important;
  background:radial-gradient(circle at 50% 50%, rgba(255,252,245,.44) 0%, rgba(255,248,235,.18) 58%, rgba(255,245,225,0) 80%) !important;
  border:0 !important;
  box-shadow:
    0 0 10px rgba(255,255,255,.84),
    0 0 18px rgba(244,221,166,.45),
    0 0 28px rgba(184,136,44,.26) !important;
  isolation:isolate !important;
}

/* 進捗リング本体：0deg=12時、正方向=時計回り */
html body #global-user-frame .hud-lv-circle::before{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:50% !important;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      #9b702b 0deg,
      #d1a34b calc(var(--rank-exp) * .28),
      #f7e4a4 calc(var(--rank-exp) * .64),
      #e9c873 calc(var(--rank-exp) * .84),
      #b8832f var(--rank-exp),
      rgba(165,132,69,.22) var(--rank-exp),
      rgba(165,132,69,.22) 360deg
    ) !important;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  filter:
    drop-shadow(0 0 1px rgba(255,249,230,.98))
    drop-shadow(0 0 5px rgba(221,181,88,.42))
    drop-shadow(0 0 11px rgba(174,129,38,.22)) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

html body #global-user-frame .hud-lv-circle::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:50% !important;
  border:1px solid rgba(190,150,72,.44) !important;
  background:transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,223,.80),
    inset 0 0 6px rgba(255,244,214,.36),
    0 0 5px rgba(255,255,255,.58),
    0 0 13px rgba(207,166,74,.24) !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

html body #global-user-frame .hud-lv-core{
  position:relative !important;
  z-index:2 !important;
  background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.98) 0%, rgba(255,251,243,.93) 56%, rgba(255,244,224,.50) 100%) !important;
  border-radius:50% !important;
  box-shadow:
    inset 0 0 5px rgba(255,255,255,.74),
    inset 0 0 12px rgba(255,245,220,.24),
    0 0 6px rgba(255,255,255,.28) !important;
}

html body #global-user-frame .hud-lv-label,
html body #global-user-frame .hud-lv-num{
  color:#6b4f22 !important;
  text-shadow:
    0 0 4px rgba(255,255,255,.98),
    0 1px 1px rgba(255,247,227,.62),
    0 0 10px rgba(255,236,190,.28) !important;
}


/* =========================================================
   build652 TOP HUD polish
   - PLAYER name: remove the remaining rectangular frame completely
   - Keep only a boundaryless white haze behind the name
   - RANK EXP ring: preserve 12 o'clock -> clockwise progress,
     but reduce the gold/white glow intensity
   ========================================================= */

/* PLAYER name: no panel, no border, no rectangular shadow. */
html body #global-user-frame .hud-info{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Replace the old horizontal/box-like haze with a soft ellipse. */
html body #global-user-frame .hud-info::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  left:-17px !important;
  right:auto !important;
  top:50% !important;
  width:140px !important;
  height:48px !important;
  transform:translateY(-50%) !important;
  border:0 !important;
  border-radius:50% !important;
  background:radial-gradient(
    ellipse at 48% 50%,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.64) 36%,
    rgba(255,255,255,.30) 62%,
    rgba(255,255,255,.08) 75%,
    rgba(255,255,255,0) 88%
  ) !important;
  box-shadow:none !important;
  filter:blur(7px) !important;
  -webkit-filter:blur(7px) !important;
  opacity:.92 !important;
  pointer-events:none !important;
}

/* No second edge/divider on the player name group. */
html body #global-user-frame .hud-info::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Also remove the legacy underline element if present. */
html body #global-user-frame .hud-sweep-line-player{
  display:none !important;
}

/* RANK circle outer glow: softer than build651. */
html body #global-user-frame .hud-lv-circle{
  box-shadow:
    0 0 6px rgba(255,255,255,.62),
    0 0 11px rgba(239,214,155,.24),
    0 0 16px rgba(179,132,42,.10) !important;
}

/* Keep exact build651 clockwise gradient; only reduce emitted glow. */
html body #global-user-frame .hud-lv-circle::before{
  filter:
    drop-shadow(0 0 1px rgba(255,249,230,.76))
    drop-shadow(0 0 3px rgba(211,171,82,.22))
    drop-shadow(0 0 6px rgba(169,124,34,.10)) !important;
}

html body #global-user-frame .hud-lv-circle::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,248,223,.64),
    inset 0 0 4px rgba(255,244,214,.20),
    0 0 3px rgba(255,255,255,.36),
    0 0 7px rgba(203,161,70,.10) !important;
}

html body #global-user-frame .hud-lv-core{
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.58),
    inset 0 0 8px rgba(255,245,220,.14),
    0 0 3px rgba(255,255,255,.14) !important;
}

html body #global-user-frame .hud-lv-label,
html body #global-user-frame .hud-lv-num{
  text-shadow:
    0 0 3px rgba(255,255,255,.86),
    0 1px 1px rgba(255,247,227,.48),
    0 0 6px rgba(255,236,190,.12) !important;
}

@media (max-width:360px){
  html body #global-user-frame .hud-info::before{
    width:118px !important;
    height:44px !important;
    left:-14px !important;
  }
}


/* =========================================================
   build653 TOP HUD ink sweep lines
   - モック参考: PLAYER / GEM / COIN の区分を見やすくするため
     ペンで走り書いたような細い金ラインを追加
   - build652のフレームレス方針は維持
   - 経験値リングの弱めた発光も維持
   ========================================================= */

/* line anchor */
html body #global-user-frame .hud-info,
html body #global-user-frame .hud-resource{
  position:relative !important;
  overflow:visible !important;
}

html body #global-user-frame .hud-sweep-line{
  display:block !important;
  position:absolute !important;
  pointer-events:none !important;
  z-index:1 !important;
  height:2px !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    rgba(191,160,89,0) 0%,
    rgba(191,160,89,.18) 6%,
    rgba(191,160,89,.60) 20%,
    rgba(182,149,74,.82) 52%,
    rgba(192,160,91,.54) 82%,
    rgba(192,160,91,.14) 94%,
    rgba(192,160,91,0) 100%
  ) !important;
  box-shadow:
    0 0 .5px rgba(255,248,225,.62),
    0 0 2px rgba(201,164,79,.10) !important;
  filter:blur(.08px) !important;
  transform-origin:left center !important;
}

html body #global-user-frame .hud-sweep-line::after{
  content:"" !important;
  position:absolute !important;
  left:12% !important;
  right:8% !important;
  top:0 !important;
  bottom:0 !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    rgba(255,250,236,0) 0%,
    rgba(255,250,236,.16) 20%,
    rgba(255,250,236,.42) 50%,
    rgba(255,250,236,.14) 82%,
    rgba(255,250,236,0) 100%
  ) !important;
  opacity:.8 !important;
}

/* player name group */
html body #global-user-frame .hud-sweep-line-player{
  left:-8px !important;
  width:214px !important;
  bottom:1px !important;
  transform:rotate(-0.55deg) !important;
  opacity:.95 !important;
}

/* gem / coin groups */
html body #global-user-frame .hud-sweep-line-gem,
html body #global-user-frame .hud-sweep-line-coin{
  left:18px !important;
  right:-8px !important;
  bottom:-2px !important;
  width:auto !important;
  opacity:.88 !important;
}

html body #global-user-frame .hud-sweep-line-gem{
  transform:rotate(-0.45deg) !important;
}

html body #global-user-frame .hud-sweep-line-coin{
  transform:rotate(-0.15deg) !important;
}

/* keep line behind the text / icons but visible through the frameless HUD */
html body #global-user-frame .hud-name,
html body #global-user-frame .hud-res-icon,
html body #global-user-frame .hud-res-val,
html body #global-user-frame .hud-gem-plus-btn{
  position:relative !important;
  z-index:2 !important;
}

@media (max-width:360px){
  html body #global-user-frame .hud-sweep-line-player{
    width:178px !important;
    left:-6px !important;
  }
  html body #global-user-frame .hud-sweep-line-gem,
  html body #global-user-frame .hud-sweep-line-coin{
    left:16px !important;
    right:-6px !important;
  }
}


/* =========================================================
   build655 TOP HUD ink sweep lines — thinner stroke
   - build653の長さ・配置・色味は維持
   - 走り書きラインだけ2px → 1pxへ細線化
   ========================================================= */
html body #global-user-frame .hud-sweep-line{
  height:1px !important;
  box-shadow:
    0 0 .35px rgba(255,248,225,.48),
    0 0 1px rgba(201,164,79,.07) !important;
  filter:none !important;
}

html body #global-user-frame .hud-sweep-line::after{
  top:50% !important;
  bottom:auto !important;
  height:.5px !important;
  transform:translateY(-50%) !important;
  opacity:.68 !important;
}


/* =========================================================
   build656 TOP HUD ink sweep lines — ultra thin
   - build655よりさらに細線化
   - 長さ・配置・色味は維持
   ========================================================= */
html body #global-user-frame .hud-sweep-line{
  height:.55px !important;
  box-shadow:
    0 0 .2px rgba(255,248,225,.34),
    0 0 .55px rgba(201,164,79,.04) !important;
  filter:none !important;
}

html body #global-user-frame .hud-sweep-line::after{
  top:50% !important;
  bottom:auto !important;
  height:.22px !important;
  transform:translateY(-50%) !important;
  opacity:.52 !important;
}


/* =========================================================
   build657 PLAYER NAME sweep line tuning
   - プレイヤー名だけ太く見える差を補正
   - 下線を少し下へ
   - 長さを約10%延長
   - 結晶 / コインの線はbuild656のまま
   ========================================================= */
html body #global-user-frame .hud-sweep-line-player{
  width:235px !important;          /* 214px -> 約+10% */
  bottom:-1px !important;          /* 1px -> -1px : 2px下へ */
  height:.44px !important;         /* 見た目の太さを少し細く補正 */
  opacity:.82 !important;
  box-shadow:
    0 0 .14px rgba(255,248,225,.24),
    0 0 .35px rgba(201,164,79,.025) !important;
}

html body #global-user-frame .hud-sweep-line-player::after{
  height:.16px !important;
  opacity:.42 !important;
}

@media (max-width:360px){
  html body #global-user-frame .hud-sweep-line-player{
    width:196px !important;        /* 178px -> 約+10% */
    bottom:-1px !important;
  }
}


/* =========================================================
   build658 PLAYER underline — effective position/length fix
   - index末尾のHUDレイアウト指定と同じ値に統一
   - 実表示長 108px → 119px（約+10%）
   - 下線を既存位置より少し下へ
   - 線の細さはbuild657のまま
   ========================================================= */
html body #global-user-frame .hud-sweep-line-player{
  left:8px !important;
  width:119px !important;
  top:auto !important;
  bottom:-4px !important;
}

@media (max-width:360px){
  html body #global-user-frame .hud-sweep-line-player{
    width:119px !important;
    left:8px !important;
    top:auto !important;
    bottom:-4px !important;
  }
}


/* =========================================================
   build659 PLAYER underline — match currency lines + extend
   - プレイヤー名下線の見た目を結晶/コインの共通線と同じに統一
   - build658の縦位置は維持
   - 現在119pxから約10%延長して131px
   ========================================================= */
html body #global-user-frame .hud-sweep-line-player{
  left:8px !important;
  width:131px !important;
  top:auto !important;
  bottom:-4px !important;
  height:.55px !important;
  opacity:.88 !important;
  box-shadow:
    0 0 .2px rgba(255,248,225,.34),
    0 0 .55px rgba(201,164,79,.04) !important;
  filter:none !important;
  transform:rotate(-0.45deg) !important;
}
html body #global-user-frame .hud-sweep-line-player::after{
  height:.22px !important;
  opacity:.52 !important;
}
@media (max-width:360px){
  html body #global-user-frame .hud-sweep-line-player{
    left:8px !important;
    width:131px !important;
    top:auto !important;
    bottom:-4px !important;
    height:.55px !important;
    opacity:.88 !important;
    transform:rotate(-0.45deg) !important;
  }
}


/* =========================================================
   build661 RANK ring center — transparent
   - RANK文字と数字は維持
   - 中央の白い丸（hud-lv-core）だけを撤去
   - 経験値リングと外周の金線はそのまま
   ========================================================= */
html body #global-user-frame .hud-lv-circle{
  background:transparent !important;
}

html body #global-user-frame .hud-lv-core{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* =========================================================
   build664 HOME side-menu notification dots — direct position fix
   - transform移動ではなく、実効 top/right を直接変更
   - 現在位置から右へドット1個分（19px）
   - 現在位置から下へドット1.5個分（28.5px）
   - サイズ・色・表示条件は変更しない
   ========================================================= */
#screen-main .home-notice-badge,
#screen-main .shinju-home-entry .shinju-home-entry-badge,
#screen-main .bonus-home-entry-notice,
#screen-main .friend-home-entry .friend-notice-dot,
#screen-main .raid-home-entry .raid-notice-dot {
  top: calc(5px + 5mm - 2px + 28.5px) !important;
  right: -19px !important;
  transform: none !important;
  animation: none !important;
}

/* 表示状態の旧アニメーション/transformにも確実に勝つ */
#screen-main .home-notice-btn.has-unread .home-notice-badge,
#screen-main .home-notice-badge[style*="display: block"],
#screen-main .home-notice-badge[style*="display:block"],
#screen-main .home-notice-badge.show,
#screen-main .shinju-home-entry.has-items .shinju-home-entry-badge,
#screen-main .bonus-home-entry.has-unclaimed .bonus-home-entry-notice,
#screen-main .friend-home-entry.has-friend-notice .friend-notice-dot,
#screen-main .raid-home-entry .raid-notice-dot {
  transform: none !important;
  animation: none !important;
}


/* =========================================================
   build667 HUD GEM PLUS — subtle warm brown tone
   - build665をベースに、結晶右の「+」だけ少しブラウン寄りへ
   - サイズ / 位置 / 発光 / タップ領域は変更しない
   ========================================================= */
html body #global-user-frame .hud-gem-plus-btn{
  color:#75634f !important;
}

/* =========================================================
   build671 GACHA excess-copy conversion sequence
   - 10連: 全10枠表示 → 対象枠を元キャラから聖霊花へ変換 → 変換結果ポップアップ
   - build670で末尾CSSが文字列化していたため、実CSSとして再定義
   ========================================================= */
#gacha-conversion-modal.modal-overlay{
  z-index:260000 !important;
  background:rgba(42,35,28,.48) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
  padding:22px !important;
}

#gacha-conversion-modal > .gacha-conversion-modal-inner{
  width:min(360px,92vw) !important;
  max-width:360px !important;
  max-height:min(74dvh,620px) !important;
  margin:0 !important;
  padding:24px 22px 20px !important;
  overflow:auto !important;
  border-radius:2px !important;
  border:1px solid rgba(151,122,77,.34) !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.98),rgba(255,255,255,.82) 42%,rgba(247,242,232,.93) 100%) !important;
  box-shadow:
    0 18px 48px rgba(49,39,26,.18),
    inset 0 0 0 1px rgba(255,255,255,.74) !important;
  color:#584936 !important;
  text-align:center !important;
}

#gacha-conversion-modal .gacha-conversion-kicker{
  margin-bottom:6px !important;
  font-family:"Cinzel",serif !important;
  font-size:8px !important;
  letter-spacing:.30em !important;
  color:#aa8950 !important;
}

#gacha-conversion-modal h2{
  margin:0 0 18px !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:18px !important;
  font-weight:500 !important;
  letter-spacing:.12em !important;
  color:#51412f !important;
}

#gacha-conversion-modal .gacha-conversion-list{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}

#gacha-conversion-modal .gacha-conversion-row{
  display:grid !important;
  grid-template-columns:82px minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  min-height:64px !important;
  padding:8px 10px !important;
  border-top:1px solid rgba(151,122,77,.18) !important;
  border-bottom:1px solid rgba(151,122,77,.10) !important;
  background:rgba(255,255,255,.35) !important;
}

#gacha-conversion-modal .gacha-conversion-visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
}

#gacha-conversion-modal .gacha-conversion-source-img,
#gacha-conversion-modal .gacha-conversion-flower-img{
  width:31px !important;
  height:31px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}

#gacha-conversion-modal .gacha-conversion-source-img{
  border-radius:50% !important;
  object-fit:cover !important;
  box-shadow:0 0 0 1px rgba(139,111,68,.20) !important;
}

#gacha-conversion-modal .gacha-conversion-flower-img{
  filter:drop-shadow(0 2px 5px rgba(122,95,48,.14)) !important;
}

#gacha-conversion-modal .gacha-conversion-arrow{
  font-family:"Cinzel",serif !important;
  font-size:13px !important;
  color:#a78a58 !important;
}

#gacha-conversion-modal .gacha-conversion-message{
  text-align:left !important;
  font-size:11px !important;
  line-height:1.65 !important;
  letter-spacing:.015em !important;
  color:#655541 !important;
}

#gacha-conversion-modal .gacha-conversion-message b{
  color:#463727 !important;
  font-weight:600 !important;
}

#gacha-conversion-modal .gacha-conversion-note{
  margin:15px 0 14px !important;
  font-size:9px !important;
  line-height:1.6 !important;
  color:rgba(91,73,50,.62) !important;
}

#gacha-conversion-modal .gacha-conversion-ok{
  width:100% !important;
  height:42px !important;
  border:1px solid rgba(135,106,61,.42) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.70) !important;
  color:#5d4a34 !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:12px !important;
  letter-spacing:.22em !important;
  cursor:pointer !important;
}

#gacha-conversion-modal .gacha-conversion-ok:active{
  transform:translateY(1px) !important;
  background:rgba(239,231,216,.84) !important;
}

/* 変換前: 結果枠には元キャラを表示する */
#ten-result-modal .ten-result-card.is-converted-excess{
  box-shadow:inset 0 0 0 1px rgba(169,137,79,.26) !important;
}

/* 元キャラが光に溶ける */
#ten-result-modal .ten-result-card.is-conversion-changing{
  overflow:hidden !important;
  animation:tenConversionCardOut671 .24s ease-in both !important;
}
#ten-result-modal .ten-result-card.is-conversion-changing .ten-card-img,
#ten-result-modal .ten-result-card.is-conversion-changing .ten-card-bottom,
#ten-result-modal .ten-result-card.is-conversion-changing .ten-card-element-icon,
#ten-result-modal .ten-result-card.is-conversion-changing .ten-card-new-badge,
#ten-result-modal .ten-result-card.is-conversion-changing .ten-card-item-badge{
  transition:opacity .18s ease,filter .18s ease,transform .18s ease !important;
  opacity:.08 !important;
  filter:brightness(1.8) blur(2px) !important;
  transform:scale(.88) !important;
}

/* 聖霊花へ入れ替わった直後 */
#ten-result-modal .ten-result-card.is-converted-flower{
  overflow:hidden !important;
  border-color:rgba(166,132,70,.36) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.58),
    0 0 14px rgba(192,157,91,.16) !important;
}
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  object-fit:contain !important;
  padding:7% !important;
  filter:drop-shadow(0 3px 8px rgba(128,97,45,.18)) !important;
}
#ten-result-modal .ten-result-card.ten-conversion-arrived{
  animation:tenConversionFlowerIn671 .52s cubic-bezier(.18,.78,.24,1.08) both !important;
}
#ten-result-modal .ten-conversion-glow{
  position:absolute !important;
  inset:-20% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:radial-gradient(circle,rgba(255,252,228,.92) 0%,rgba(233,206,145,.34) 30%,rgba(233,206,145,0) 66%) !important;
  animation:tenConversionGlow671 .58s ease-out both !important;
}
#ten-result-modal .ten-result-card.is-converted-flower > *:not(.ten-conversion-glow){
  position:relative !important;
  z-index:1 !important;
}

@keyframes tenConversionCardOut671{
  0%{transform:scale(1);filter:brightness(1);}
  55%{transform:scale(.96);filter:brightness(1.42);}
  100%{transform:scale(.90);filter:brightness(1.9);}
}
@keyframes tenConversionFlowerIn671{
  0%{transform:scale(.88);filter:brightness(1.8);opacity:.28;}
  58%{transform:scale(1.05);filter:brightness(1.18);opacity:1;}
  100%{transform:scale(1);filter:brightness(1);opacity:1;}
}
@keyframes tenConversionGlow671{
  0%{opacity:0;transform:scale(.55);}
  35%{opacity:1;transform:scale(.92);}
  100%{opacity:0;transform:scale(1.28);}
}

@media (max-width:360px), (max-height:700px){
  #gacha-conversion-modal > .gacha-conversion-modal-inner{
    width:min(340px,94vw) !important;
    max-height:80dvh !important;
    padding:20px 16px 16px !important;
  }
  #gacha-conversion-modal .gacha-conversion-row{
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:8px !important;
    padding:8px !important;
  }
  #gacha-conversion-modal .gacha-conversion-source-img,
  #gacha-conversion-modal .gacha-conversion-flower-img{
    width:29px !important;
    height:29px !important;
  }
}


/* =========================================================
   build672 GACHA converted flower — artwork clarity
   - 聖霊花画像にはフィルターを重ねない
   - 10連の変換後カード / 変換結果ポップアップの花画像のみ対象
   - 変換演出・枠・背景・サイズはbuild671を維持
   ========================================================= */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-img.ten-card-item-img,
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

#gacha-conversion-modal .gacha-conversion-flower-img{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}


/* =========================================================
   build673 GACHA converted flower — raw/crisp artwork
   - Generic material cards enlarge ITEM art with transform:scale(1.62).
     That transform can rasterize square flower art at a small base size and
     make it look soft. Keep the same visual size using geometry instead.
   - No filter / opacity / blend processing on the flower artwork.
   ========================================================= */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-img.ten-card-item-img,
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  left:-31% !important;
  top:-31% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:162% !important;
  height:162% !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  image-rendering:auto !important;
}

/* The conversion-result popup should also show the source asset untouched. */
#gacha-conversion-modal .gacha-conversion-flower-img{
  padding:0 !important;
  background:transparent !important;
  transform:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  image-rendering:auto !important;
}


/* =========================================================
   build674 GACHA converted flower — centered raw artwork
   - build673のleft/top負オフセット方式を廃止
   - 画像の見た目サイズ(162%)は維持しつつ、カード中心を基準に配置
   - scale()は使わず、filter / opacity / blendも引き続き不使用
   ========================================================= */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-img.ten-card-item-img,
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:162% !important;
  height:162% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  image-rendering:auto !important;
}

/* =========================================================
   build675 GACHA converted flower — layer/position repair
   - build671 blanket child positioning pushed flower art behind the
     white card overlays and stretched ITEM / name blocks into normal flow.
   - Restore the same absolute stacking model as ordinary item cards.
   - Keep the build674 raw/no-filter centered flower artwork.
   ========================================================= */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-img.ten-card-item-img,
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:162% !important;
  height:162% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  z-index:6 !important;
}

/* Converted ITEM badge: compact pill, never a full-width block. */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-badge{
  position:absolute !important;
  top:6px !important;
  left:6px !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1px 4px !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:7px !important;
  line-height:1.2 !important;
  letter-spacing:.05em !important;
  white-space:nowrap !important;
  z-index:9 !important;
}

/* Name plate must stay anchored to the bottom like every other result card. */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-bottom{
  position:absolute !important;
  left:4px !important;
  right:4px !important;
  top:auto !important;
  bottom:4px !important;
  width:auto !important;
  margin:0 !important;
  z-index:8 !important;
}

/* Decorative overlays remain below the actual flower artwork. */
#ten-result-modal .ten-result-card.is-converted-flower::before{
  z-index:3 !important;
}
#ten-result-modal .ten-result-card.is-converted-flower::after{
  z-index:2 !important;
}
#ten-result-modal .ten-result-card.is-converted-flower .ten-conversion-glow{
  z-index:5 !important;
}

/* =========================================================
   build676 GACHA converted flower — true centering + badge restore
   - Fix build675 ordering bug: `inset:auto` was declared after left/top,
     resetting the 50% centering coordinates and leaving the artwork at
     its static/top-left position.
   - Keep flower art raw (no filter) and the existing 162% visual size.
   - Restore ITEM badge to the normal material-card size.
   ========================================================= */
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-img.ten-card-item-img,
#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-img{
  position:absolute !important;
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:162% !important;
  height:162% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  z-index:6 !important;
}

#ten-result-modal .ten-result-card.is-converted-flower .ten-card-item-badge{
  position:absolute !important;
  top:6px !important;
  left:6px !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:2px 6px !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:9px !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  z-index:9 !important;
}


/* =========================================================
   build681: move BGM control into Settings menu
   ========================================================= */
.setting-audio-row{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.setting-audio-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:58px;
}
.setting-audio-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:26px;
  padding:0 11px;
  box-sizing:border-box;
  border:1px solid rgba(169,137,78,.48);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#8b6b32;
  font-family:Georgia,"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 5px rgba(82,68,45,.08);
}
.setting-audio-row:active .setting-audio-status{
  transform:translateY(1px);
  opacity:.78;
}
\n\n/* =========================================================
   build688: Settings BGM — text-only ON/OFF + reliable tap feedback
   ========================================================= */
#screen-setting .setting-audio-control{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}
#screen-setting .setting-audio-status{
  display:inline !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#9a7330 !important;
  font-family:Georgia,"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:none !important;
}
#screen-setting .setting-audio-status.is-off{
  color:#8b877f !important;
}
#screen-setting .setting-audio-row:active .setting-audio-status{
  transform:none !important;
  opacity:.58 !important;
}


/* =========================================================
   build700 GACHA STANDBY OPAQUE + 10-PULL HEARTBEAT
   ① TAP TO ENCOUNTER は背面を一切透かさない。
   ② 10連の示唆画面では中心円が心拍のように脈動し、
      既存の最終フラッシュで結果へ遷移する。
   ========================================================= */
#summon-standby,
#summon-standby.active{
  opacity:1 !important;
  background-color:#f3eddf !important;
  background-image:
    radial-gradient(circle at 50% 40%,
      rgb(255,255,255) 0%,
      rgb(250,248,242) 26%,
      rgb(238,230,210) 54%,
      rgb(211,192,149) 76%,
      rgb(30,28,23) 100%) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 背景装飾は上記の完全不透明面の上だけで描画する。 */
#summon-standby::before,
#summon-standby::after{
  pointer-events:none !important;
}

#reveal-modal.is-ten-heartbeat #reveal-alchemia-effect .reveal-circle-inner{
  opacity:1 !important;
  background:radial-gradient(circle,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.08) 52%,
    rgba(214,188,126,.04) 72%,
    transparent 100%) !important;
  border-color:rgba(143,116,64,.31) !important;
  transform-origin:center center !important;
  will-change:transform,box-shadow,opacity;
  animation:gachaTenHeartbeat700 1.05s cubic-bezier(.22,.61,.36,1) infinite !important;
}

#reveal-modal.is-ten-heartbeat #reveal-alchemia-effect .reveal-circle-inner::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid rgba(214,188,126,.24);
  box-shadow:0 0 18px rgba(255,255,255,.50);
  opacity:.22;
  animation:gachaTenHeartbeatEcho700 1.05s ease-out infinite;
}

@keyframes gachaTenHeartbeat700{
  0%{
    transform:translate(-50%,-50%) scale(.94);
    box-shadow:0 0 14px rgba(255,255,255,.54),0 0 34px rgba(214,188,126,.18),inset 0 0 14px rgba(255,255,255,.34);
  }
  12%{
    transform:translate(-50%,-50%) scale(1.075);
    box-shadow:0 0 24px rgba(255,255,255,.88),0 0 62px rgba(214,188,126,.38),inset 0 0 22px rgba(255,255,255,.60);
  }
  24%{
    transform:translate(-50%,-50%) scale(.975);
  }
  39%{
    transform:translate(-50%,-50%) scale(1.13);
    box-shadow:0 0 30px rgba(255,255,255,.98),0 0 78px rgba(214,188,126,.48),inset 0 0 28px rgba(255,255,255,.66);
  }
  55%{
    transform:translate(-50%,-50%) scale(.985);
    box-shadow:0 0 18px rgba(255,255,255,.66),0 0 44px rgba(214,188,126,.24),inset 0 0 17px rgba(255,255,255,.42);
  }
  100%{
    transform:translate(-50%,-50%) scale(.94);
    box-shadow:0 0 14px rgba(255,255,255,.54),0 0 34px rgba(214,188,126,.18),inset 0 0 14px rgba(255,255,255,.34);
  }
}

@keyframes gachaTenHeartbeatEcho700{
  0%,24%{ transform:scale(.94); opacity:0; }
  39%{ transform:scale(1.00); opacity:.42; }
  66%{ transform:scale(1.24); opacity:0; }
  100%{ transform:scale(1.24); opacity:0; }
}


/* =========================================================
   build701 10-PULL LOAD -> HEARTBEAT -> UPGRADE
   5秒の装填中は鼓動なし。
   全10球装填後、3回だけ明確に鼓動し、
   ②で銀→金 / ③で金→虹を開示する。
   ========================================================= */

/* 装填中：中心円は静止。build700の連続鼓動を完全停止。 */
#reveal-modal.is-ten-loading #reveal-alchemia-effect.phase-forming .reveal-circle-inner,
#reveal-modal.is-ten-heartbeat #reveal-alchemia-effect .reveal-circle-inner{
  animation:none !important;
  opacity:.78 !important;
  transform:translate(-50%,-50%) scale(.96) !important;
  transform-origin:center center !important;
  will-change:transform,box-shadow,opacity;
}

#reveal-modal.is-ten-loading #reveal-alchemia-effect .reveal-circle-inner::after,
#reveal-modal.is-ten-heartbeat #reveal-alchemia-effect .reveal-circle-inner::after{
  animation:none !important;
  opacity:0 !important;
}

/* 1球ずつ「装填」される。色は初期示唆色のまま固定。 */
#gacha-aura-overlay.is-ten-loading-sequence .gacha-aura{
  opacity:0 !important;
  transform:translate(-50%,-50%) scale(.34) !important;
  filter:blur(5px) saturate(.55) brightness(1.35) !important;
}

#gacha-aura-overlay.is-ten-loading-sequence .gacha-aura.is-ten-loaded.is-colored{
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(1.08) !important;
  filter:none !important;
  animation:gachaTenLoad701 .48s cubic-bezier(.14,.78,.20,1) both !important;
}

@keyframes gachaTenLoad701{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.30);
    filter:blur(7px) saturate(.35) brightness(1.75);
  }
  48%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.30);
    filter:blur(0) saturate(1.12) brightness(1.22);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
    filter:none;
  }
}

/* 昇格対象だけ、鼓動ピークに合わせて強く弾ける。 */
#gacha-aura-overlay .gacha-aura.is-upgrading{
  animation:gachaTenUpgrade701 .54s cubic-bezier(.14,.75,.20,1) both !important;
  z-index:5;
}

@keyframes gachaTenUpgrade701{
  0%{
    transform:translate(-50%,-50%) scale(1.08);
    filter:brightness(1) saturate(1);
  }
  28%{
    transform:translate(-50%,-50%) scale(1.46);
    filter:brightness(2.25) saturate(.45);
  }
  52%{
    transform:translate(-50%,-50%) scale(.92);
    filter:brightness(1.38) saturate(1.30);
  }
  100%{
    transform:translate(-50%,-50%) scale(1.08);
    filter:none;
  }
}

/* 連続鼓動ではなく、JSから1回ずつ再生する。 */
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-inner{
  animation:gachaTenBeat701 .54s cubic-bezier(.18,.76,.24,1) 1 !important;
}

#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-inner::after{
  opacity:1 !important;
  animation:gachaTenBeatEcho701 .54s ease-out 1 !important;
}

/* 外周もほんの少し呼吸して「画面全体のドクン」に見せる。 */
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-outer,
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-mid{
  animation:gachaTenOuterBeat701 .54s ease-out 1 !important;
}

#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-overlay{
  animation:gachaTenScreenBeat701 .54s ease-out 1 !important;
}

/* 3回目だけ少し強くする。 */
#reveal-modal.ten-heartbeat-beat-3.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-inner{
  animation-name:gachaTenBeatStrong701 !important;
}

@keyframes gachaTenBeat701{
  0%{
    opacity:.76;
    transform:translate(-50%,-50%) scale(.96);
    box-shadow:0 0 15px rgba(255,255,255,.52),0 0 34px rgba(214,188,126,.18),inset 0 0 14px rgba(255,255,255,.30);
  }
  24%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.13);
    box-shadow:0 0 30px rgba(255,255,255,.98),0 0 78px rgba(214,188,126,.50),inset 0 0 26px rgba(255,255,255,.70);
  }
  52%{
    transform:translate(-50%,-50%) scale(.985);
  }
  100%{
    opacity:.80;
    transform:translate(-50%,-50%) scale(.96);
    box-shadow:0 0 16px rgba(255,255,255,.58),0 0 38px rgba(214,188,126,.22),inset 0 0 15px rgba(255,255,255,.34);
  }
}

@keyframes gachaTenBeatStrong701{
  0%{
    opacity:.80;
    transform:translate(-50%,-50%) scale(.96);
  }
  23%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.19);
    box-shadow:0 0 38px rgba(255,255,255,1),0 0 96px rgba(214,188,126,.64),inset 0 0 31px rgba(255,255,255,.78);
  }
  54%{
    transform:translate(-50%,-50%) scale(.99);
  }
  100%{
    opacity:.82;
    transform:translate(-50%,-50%) scale(.96);
  }
}

@keyframes gachaTenBeatEcho701{
  0%{ transform:scale(.88); opacity:.0; }
  23%{ transform:scale(1.00); opacity:.48; }
  100%{ transform:scale(1.42); opacity:0; }
}

@keyframes gachaTenOuterBeat701{
  0%{ filter:brightness(1); }
  25%{ filter:brightness(1.17); }
  100%{ filter:brightness(1); }
}

@keyframes gachaTenScreenBeat701{
  0%,100%{ background:rgba(248,246,239,.72); }
  24%{ background:rgba(255,252,242,.87); }
}


/* =========================================================
   build702 10-PULL "DOK-KUN" HEARTBEAT + RADIAL WHITEOUT
   ・鼓動時は中心円だけでなく10球すべてが縮小→拡大する
   ・1拍を「ドッ→クン」の二段リズムで見せる
   ・フラッシュは全画面矩形を拡大せず、中央の円光が広がって白一色へ
   ========================================================= */

/* 中心円：一度キュッと縮んでから大きく弾け、少し遅れて二発目が来る。 */
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-inner{
  animation:gachaTenDokkunCenter702 .66s cubic-bezier(.16,.78,.20,1) 1 !important;
}

#reveal-modal.ten-heartbeat-beat-3.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-inner{
  animation:gachaTenDokkunCenterStrong702 .68s cubic-bezier(.16,.78,.20,1) 1 !important;
}

@keyframes gachaTenDokkunCenter702{
  0%{
    opacity:.80;
    transform:translate(-50%,-50%) scale(.96);
    box-shadow:0 0 16px rgba(255,255,255,.56),0 0 38px rgba(214,188,126,.21),inset 0 0 15px rgba(255,255,255,.34);
  }
  10%{
    opacity:.86;
    transform:translate(-50%,-50%) scale(.875);
  }
  24%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.145);
    box-shadow:0 0 32px rgba(255,255,255,1),0 0 82px rgba(214,188,126,.54),inset 0 0 28px rgba(255,255,255,.72);
  }
  39%{
    transform:translate(-50%,-50%) scale(.985);
  }
  53%{
    opacity:.98;
    transform:translate(-50%,-50%) scale(1.075);
    box-shadow:0 0 25px rgba(255,255,255,.90),0 0 62px rgba(214,188,126,.40),inset 0 0 22px rgba(255,255,255,.60);
  }
  70%{
    transform:translate(-50%,-50%) scale(.99);
  }
  100%{
    opacity:.80;
    transform:translate(-50%,-50%) scale(.96);
    box-shadow:0 0 16px rgba(255,255,255,.58),0 0 38px rgba(214,188,126,.22),inset 0 0 15px rgba(255,255,255,.34);
  }
}

@keyframes gachaTenDokkunCenterStrong702{
  0%{opacity:.82;transform:translate(-50%,-50%) scale(.96)}
  9%{opacity:.90;transform:translate(-50%,-50%) scale(.855)}
  23%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.205);
    box-shadow:0 0 42px rgba(255,255,255,1),0 0 108px rgba(214,188,126,.70),inset 0 0 34px rgba(255,255,255,.84);
  }
  39%{transform:translate(-50%,-50%) scale(.99)}
  53%{
    transform:translate(-50%,-50%) scale(1.105);
    box-shadow:0 0 31px rgba(255,255,255,.96),0 0 78px rgba(214,188,126,.54),inset 0 0 27px rgba(255,255,255,.70);
  }
  72%{transform:translate(-50%,-50%) scale(.99)}
  100%{opacity:.82;transform:translate(-50%,-50%) scale(.96)}
}

/* 10球も同じ拍で「縮む→弾ける→小さな二拍目」。 */
#gacha-aura-overlay.is-ten-heartbeat-pulse .gacha-aura.is-ten-loaded:not(.is-upgrading){
  animation:gachaTenAuraDokkun702 .66s cubic-bezier(.16,.78,.20,1) 1 !important;
  transform-origin:center center !important;
  will-change:transform,filter,opacity;
}

#gacha-aura-overlay.ten-heartbeat-beat-3.is-ten-heartbeat-pulse .gacha-aura.is-ten-loaded:not(.is-upgrading){
  animation-name:gachaTenAuraDokkunStrong702 !important;
}

@keyframes gachaTenAuraDokkun702{
  0%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1) saturate(1)}
  10%{transform:translate(-50%,-50%) scale(.88);filter:brightness(.96) saturate(.94)}
  24%{transform:translate(-50%,-50%) scale(1.25);filter:brightness(1.42) saturate(1.08)}
  39%{transform:translate(-50%,-50%) scale(1.02);filter:brightness(1.06) saturate(1)}
  53%{transform:translate(-50%,-50%) scale(1.16);filter:brightness(1.24) saturate(1.05)}
  71%{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.05) saturate(1)}
  100%{transform:translate(-50%,-50%) scale(1.08);filter:none}
}

@keyframes gachaTenAuraDokkunStrong702{
  0%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1) saturate(1)}
  9%{transform:translate(-50%,-50%) scale(.84);filter:brightness(.94) saturate(.92)}
  23%{transform:translate(-50%,-50%) scale(1.34);filter:brightness(1.62) saturate(1.12)}
  40%{transform:translate(-50%,-50%) scale(1.01);filter:brightness(1.08) saturate(1)}
  53%{transform:translate(-50%,-50%) scale(1.20);filter:brightness(1.36) saturate(1.08)}
  72%{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.06) saturate(1)}
  100%{transform:translate(-50%,-50%) scale(1.08);filter:none}
}

/* 外周/画面の明滅も二拍に合わせる。 */
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-outer,
#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-alchemia-effect .reveal-circle-mid{
  animation:gachaTenOuterDokkun702 .66s ease-out 1 !important;
}

#reveal-modal.is-ten-heartbeat.is-ten-heartbeat-pulse #reveal-overlay{
  animation:gachaTenScreenDokkun702 .66s ease-out 1 !important;
}

@keyframes gachaTenOuterDokkun702{
  0%,100%{filter:brightness(1);transform:translate(-50%,-50%) scale(1)}
  10%{filter:brightness(.98);transform:translate(-50%,-50%) scale(.992)}
  24%{filter:brightness(1.18);transform:translate(-50%,-50%) scale(1.018)}
  53%{filter:brightness(1.10);transform:translate(-50%,-50%) scale(1.009)}
}

@keyframes gachaTenScreenDokkun702{
  0%,100%{background:rgba(248,246,239,.72)}
  10%{background:rgba(246,244,238,.70)}
  24%{background:rgba(255,252,242,.89)}
  53%{background:rgba(255,251,240,.82)}
}

/*
  build701以前の「全画面divそのものをscaleする」フラッシュを無効化。
  矩形の輪郭が残らないよう、中央の円光(::before)と全面白(::after)を別々に動かす。
*/
#final-gacha-flash.final-gacha-flash{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  opacity:1 !important;
  background:transparent !important;
  transform:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  animation:none !important;
}

#final-gacha-flash.final-gacha-flash::before,
#final-gacha-flash.final-gacha-flash::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
}

/* 中央から生まれる、完全な円形の光。 */
#final-gacha-flash.final-gacha-flash::before{
  left:50%;
  top:50%;
  width:22vmax;
  height:22vmax;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.06);
  transform-origin:center center;
  background:radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 28%,
    rgba(255,252,238,.98) 47%,
    rgba(255,246,216,.76) 66%,
    rgba(255,255,255,.18) 84%,
    rgba(255,255,255,0) 100%);
  filter:blur(.5px);
  will-change:transform,opacity,filter;
}

/* 円光が画面を覆った後だけ、全面白へシームレスに繋ぐ。 */
#final-gacha-flash.final-gacha-flash::after{
  inset:0;
  background:#fff;
  will-change:opacity;
}

#final-gacha-flash.final-gacha-flash.active::before{
  animation:gachaFinalRadialBloom702 1.28s cubic-bezier(.12,.73,.16,1) forwards;
}

#final-gacha-flash.final-gacha-flash.active::after{
  animation:gachaFinalWhiteout702 1.28s ease-in-out forwards;
}

@keyframes gachaFinalRadialBloom702{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.06);filter:blur(.5px)}
  10%{opacity:.95;transform:translate(-50%,-50%) scale(.20);filter:blur(1px)}
  34%{opacity:1;transform:translate(-50%,-50%) scale(1.15);filter:blur(2px)}
  58%{opacity:1;transform:translate(-50%,-50%) scale(4.6);filter:blur(4px)}
  73%{opacity:1;transform:translate(-50%,-50%) scale(7.2);filter:blur(7px)}
  82%{opacity:.70;transform:translate(-50%,-50%) scale(8.4);filter:blur(10px)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9.0);filter:blur(14px)}
}

@keyframes gachaFinalWhiteout702{
  0%,42%{opacity:0}
  58%{opacity:.36}
  68%{opacity:.86}
  73%,79%{opacity:1}
  100%{opacity:0}
}

/* =========================================================
   build752 cross-device app viewport / root scroll guard
   - iOS Safari / iOS PWA / Android Chrome / desktop browsers 共通
   - document自体は絶対にスクロールさせない
   - スクロールは overflow-y:auto / scroll を持つコンテンツだけ許可
   - visualViewport の実高を --sasaphia-app-height に反映
   ========================================================= */
:root{
  --sasaphia-app-height: 100dvh;
}

@supports not (height: 100dvh){
  :root{
    --sasaphia-app-height: 100vh;
  }
}

html{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:var(--sasaphia-app-height) !important;
  min-height:0 !important;
  max-height:var(--sasaphia-app-height) !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  scroll-behavior:auto !important;
}

body{
  position:fixed !important;
  top:0 !important;
  bottom:auto !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--sasaphia-app-height) !important;
  min-height:0 !important;
  max-height:var(--sasaphia-app-height) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
  scroll-behavior:auto !important;
}

/* PCのスマホ幅表示は中央寄せを維持 */
@media (min-width:500px){
  body{
    left:50% !important;
    right:auto !important;
    width:100% !important;
    max-width:430px !important;
    transform:translateX(-50%) !important;
  }
}

/* 通常画面自体はviewportから絶対にはみ出させない */
.screen{
  height:var(--sasaphia-app-height) !important;
  min-height:0 !important;
  max-height:var(--sasaphia-app-height) !important;
  overflow:hidden;
}

/* ホームは常に完全固定 */
#screen-main{
  overflow:hidden !important;
}

/*
  「スクロールを許可された領域」は既存 overflow-y の指定をそのまま使用。
  overscroll-behavior だけ補強し、親documentへのスクロール連鎖を切る。
*/
.screen-scroll,
#screen-friend,
#screen-summon,
.modal,
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
[style*="overflow-y: scroll"],
[style*="overflow-y:scroll"]{
  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch;
}

/* モーダル全体が固定レイヤーの場合、外枠はスクロールさせない */
#splash,
#title-screen,
#loading,
#summon-standby,
#fullscreen-blackout,
#ur-alert-screen,
#reveal-modal,
#ten-result-modal{
  max-height:var(--sasaphia-app-height) !important;
}

/* =========================================================
   build756: 神聖樹の加護 / 3固定スロット
   HP SLOT / ATK SLOT / ULT SLOT
   ========================================================= */
#shinju-overlay .shinju-content{
  min-height:226px !important;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
}

#shinju-overlay .shinju-lore{
  margin:0 0 6px !important;
}

#shinju-overlay .shinju-blessing-section{
  width:100%;
  margin:0 0 9px;
  padding:8px 9px 9px;
  border:1px solid rgba(150,121,67,.18);
  border-radius:14px;
  background:rgba(255,255,255,.36);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}

#shinju-overlay .shinju-blessing-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 7px;
  color:#755f3d;
}

#shinju-overlay .shinju-blessing-head strong{
  font-family:"Noto Serif JP",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
}

#shinju-overlay .shinju-blessing-head span{
  font-size:8px;
  color:rgba(91,75,54,.48);
  letter-spacing:.06em;
}

#shinju-overlay .shinju-blessing-slots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

#shinju-overlay .shinju-blessing-slot{
  position:relative;
  min-width:0;
  height:78px;
  padding:7px 7px 6px;
  border:1px solid rgba(146,119,70,.20);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,242,229,.68));
  box-shadow:0 2px 8px rgba(82,63,35,.035),inset 0 0 0 1px rgba(255,255,255,.45);
  color:#665337;
  text-align:left;
  overflow:hidden;
}

#shinju-overlay .shinju-blessing-slot:active{
  transform:scale(.985);
  opacity:.82;
}

#shinju-overlay .shinju-blessing-slot-kind{
  display:block;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:8px;
  letter-spacing:.10em;
  color:rgba(89,73,49,.58);
  white-space:nowrap;
}

#shinju-overlay .shinju-blessing-slot-effect{
  display:block;
  margin-top:2px;
  font-family:"Noto Serif JP",serif;
  font-size:10px;
  font-weight:600;
  color:#8a6a2f;
  white-space:nowrap;
}

#shinju-overlay .shinju-blessing-character{
  position:absolute;
  left:6px;
  right:6px;
  bottom:5px;
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}

#shinju-overlay .shinju-blessing-character img,
#shinju-overlay .shinju-blessing-plus{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:50%;
}

#shinju-overlay .shinju-blessing-character img{
  object-fit:cover;
  object-position:center 22%;
  border:1px solid rgba(145,116,64,.18);
  background:rgba(255,255,255,.72);
}

#shinju-overlay .shinju-blessing-plus{
  display:grid;
  place-items:center;
  border:1px dashed rgba(142,115,66,.32);
  color:rgba(121,96,55,.52);
  font-size:18px;
  font-weight:300;
}

#shinju-overlay .shinju-blessing-character b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Noto Serif JP",serif;
  font-size:8px;
  font-weight:500;
  color:#5d513f;
}

#shinju-overlay .shinju-blessing-slot.is-assigned{
  border-color:rgba(156,125,63,.32);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(249,241,221,.78));
}

/* キャラ選択モーダル */
#shinju-blessing-picker{
  position:fixed;
  z-index:290000;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));
  background:rgba(30,24,17,.18);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
}
#shinju-blessing-picker.active{display:flex}

#shinju-blessing-picker .shinju-blessing-picker-card{
  width:min(100%,640px);
  max-height:min(82dvh,760px);
  display:flex;
  flex-direction:column;
  padding:16px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius:24px;
  border:1px solid rgba(144,118,72,.22);
  background:rgba(252,248,241,.82);
  box-shadow:0 18px 48px rgba(58,43,21,.14), inset 0 1px 0 rgba(255,255,255,.38);
  overflow:hidden;
}

#shinju-blessing-picker .shinju-blessing-picker-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
#shinju-blessing-picker .shinju-blessing-picker-heading{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
#shinju-blessing-picker .shinju-blessing-picker-head small{
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(98,79,50,.52);
}
#shinju-blessing-picker .shinju-blessing-picker-head strong{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:.08em;
  color:#715836;
}
#shinju-blessing-picker .shinju-blessing-picker-close{
  flex:0 0 auto;
  border:1px solid rgba(141,112,67,.18);
  border-radius:999px;
  background:rgba(255,255,255,.32);
  color:#7a6340;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:11px;
  line-height:1;
  padding:10px 14px;
}

#shinju-blessing-picker .shinju-blessing-picker-grid{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:2px 1px 8px;
}

#shinju-blessing-picker .shinju-blessing-picker-character{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  border:1px solid rgba(137,111,67,.16);
  border-radius:14px;
  background:rgba(255,255,255,.42);
  color:#5c4d39;
  text-align:left;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset;
}
#shinju-blessing-picker .shinju-blessing-picker-character.is-selected{
  border-color:rgba(161,124,57,.56);
  box-shadow:inset 0 0 0 1px rgba(186,145,62,.18), 0 6px 18px rgba(122,95,45,.08);
  background:rgba(251,244,228,.72);
}
#shinju-blessing-picker .shinju-blessing-picker-character.is-used{
  opacity:.42;
  filter:grayscale(.22);
}
#shinju-blessing-picker .shinju-blessing-picker-portrait{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:10px;
  background:rgba(239,233,220,.52);
}
#shinju-blessing-picker .shinju-blessing-picker-portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}
#shinju-blessing-picker .shinju-blessing-picker-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
#shinju-blessing-picker .shinju-blessing-picker-character b,
#shinju-blessing-picker .shinju-blessing-picker-character small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
}
#shinju-blessing-picker .shinju-blessing-picker-character b{
  font-size:11px;
  font-weight:500;
  letter-spacing:.03em;
}
#shinju-blessing-picker .shinju-blessing-picker-character small{
  font-size:9px;
  color:rgba(90,73,50,.56);
}
#shinju-blessing-picker .shinju-blessing-picker-foot{
  flex:0 0 auto;
  padding-top:6px;
}
#shinju-blessing-picker .shinju-blessing-picker-clear{
  width:100%;
  height:42px;
  border:1px solid rgba(138,110,63,.18);
  border-radius:999px;
  background:rgba(255,255,255,.28);
  color:#78664b;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:11px;
  letter-spacing:.05em;
}
#shinju-blessing-picker .shinju-blessing-picker-clear:disabled{opacity:.3}
#shinju-blessing-picker .shinju-blessing-picker-empty{
  grid-column:1/-1;
  padding:34px 10px;
  text-align:center;
  font-size:11px;
  color:rgba(86,71,50,.50);
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
}


@media (min-width:560px){
  #shinju-blessing-picker .shinju-blessing-picker-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:390px){
  #shinju-blessing-picker{padding:10px 8px max(12px,env(safe-area-inset-bottom));}
  #shinju-blessing-picker .shinju-blessing-picker-card{padding:14px 12px calc(12px + env(safe-area-inset-bottom));}
  #shinju-blessing-picker .shinju-blessing-picker-head strong{font-size:16px;}
  #shinju-blessing-picker .shinju-blessing-picker-grid{gap:8px;}
  #shinju-blessing-picker .shinju-blessing-picker-character{padding:7px; gap:6px;}
  #shinju-blessing-picker .shinju-blessing-picker-character b{font-size:10px;}
  #shinju-blessing-picker .shinju-blessing-picker-character small{font-size:8px;}
}

@media(max-width:380px),(max-height:700px){
  #shinju-overlay .shinju-content{
    min-height:208px !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }
  #shinju-overlay .shinju-blessing-section{padding:6px 7px 7px;margin-bottom:7px}
  #shinju-overlay .shinju-blessing-head{margin-bottom:5px}
  #shinju-overlay .shinju-blessing-slot{height:70px;padding:6px}
  #shinju-overlay .shinju-blessing-slot-effect{font-size:9px}
  #shinju-overlay .shinju-blessing-character{height:30px;bottom:4px}
  #shinju-overlay .shinju-blessing-character img,
  #shinju-overlay .shinju-blessing-plus{width:28px;height:28px;flex-basis:28px}
  #shinju-blessing-picker .shinju-blessing-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #shinju-blessing-picker .shinju-blessing-picker-character{padding:7px}
  #shinju-blessing-picker .shinju-blessing-picker-character b{font-size:10px}
  #shinju-blessing-picker .shinju-blessing-picker-character small{font-size:8px}
}

/* =========================================================
   build757 trial: Shinju responsive layout stabilization
   - image area and bottom panel share the viewport instead of overlapping
   - remove fixed minimum panel height
   - compact blessing slots on narrow devices
   ========================================================= */
#shinju-overlay .shinju-panel{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}

#shinju-overlay .shinju-visual-wrap{
  position:relative !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}

#shinju-overlay .shinju-visual{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

#shinju-overlay .shinju-hero-info{
  left:clamp(16px,7vw,28px) !important;
  right:clamp(16px,7vw,28px) !important;
  top:calc(env(safe-area-inset-top) + clamp(220px,40dvh,285px)) !important;
  bottom:auto !important;
}

#shinju-overlay .shinju-content{
  position:relative !important;
  z-index:20 !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  overflow:visible !important;
  padding:clamp(8px,1.5dvh,12px) clamp(10px,4vw,18px)
          calc(clamp(8px,1.5dvh,12px) + env(safe-area-inset-bottom)) !important;
}

#shinju-overlay .shinju-lore{
  margin:0 0 clamp(5px,1dvh,8px) !important;
  font-size:clamp(8px,2.45vw,10px) !important;
  line-height:1.45 !important;
}

#shinju-overlay .shinju-blessing-section{
  margin:0 0 clamp(6px,1.2dvh,9px) !important;
  padding:clamp(6px,1.2dvh,8px) clamp(7px,2.2vw,9px) clamp(7px,1.3dvh,9px) !important;
}

#shinju-overlay .shinju-blessing-head{
  gap:6px !important;
  margin:0 2px clamp(4px,.9dvh,7px) !important;
}

#shinju-overlay .shinju-blessing-slots{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(4px,1.8vw,7px) !important;
}

#shinju-overlay .shinju-blessing-slot{
  min-width:0 !important;
  height:clamp(64px,10.8dvh,78px) !important;
  padding:clamp(5px,1.8vw,7px) !important;
}

#shinju-overlay .shinju-blessing-slot-kind{
  font-size:clamp(6.8px,2.1vw,8px) !important;
  letter-spacing:.07em !important;
}

#shinju-overlay .shinju-blessing-slot-effect{
  margin-top:1px !important;
  font-size:clamp(8.5px,2.6vw,10px) !important;
}

#shinju-overlay .shinju-blessing-character{
  left:clamp(4px,1.7vw,6px) !important;
  right:clamp(4px,1.7vw,6px) !important;
  bottom:clamp(3px,.8dvh,5px) !important;
  height:clamp(27px,4.8dvh,34px) !important;
  gap:clamp(3px,1.3vw,5px) !important;
}

#shinju-overlay .shinju-blessing-character img,
#shinju-overlay .shinju-blessing-plus{
  flex-basis:clamp(24px,8.4vw,32px) !important;
  width:clamp(24px,8.4vw,32px) !important;
  height:clamp(24px,8.4vw,32px) !important;
}

#shinju-overlay .shinju-blessing-character b{
  font-size:clamp(6.8px,2.1vw,8px) !important;
}

#shinju-overlay .shinju-offering-bar{
  min-height:clamp(34px,5.8dvh,42px) !important;
  gap:clamp(6px,2.4vw,12px) !important;
}

#shinju-overlay .shinju-offer-all{
  min-width:clamp(88px,29vw,106px) !important;
  height:clamp(34px,5.6dvh,38px) !important;
  padding:0 clamp(10px,3.2vw,15px) !important;
  font-size:clamp(9px,2.7vw,11px) !important;
}

/* 320px級の細い端末では、未設定枠の説明文を省略して「＋」を主役にする。 */
@media (max-width:340px){
  #shinju-overlay .shinju-content{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #shinju-overlay .shinju-blessing-section{
    padding-left:6px !important;
    padding-right:6px !important;
  }
  #shinju-overlay .shinju-blessing-head span{
    font-size:7px !important;
  }
  #shinju-overlay .shinju-blessing-slot{
    height:64px !important;
    padding:5px !important;
  }
  #shinju-overlay .shinju-blessing-slot.is-empty .shinju-blessing-character{
    left:0 !important;
    right:0 !important;
    justify-content:center !important;
  }
  #shinju-overlay .shinju-blessing-slot.is-empty .shinju-blessing-character b{
    display:none !important;
  }
  #shinju-overlay .shinju-blessing-slot.is-empty .shinju-blessing-plus{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
    font-size:15px !important;
  }
}

/* 低い端末では成長情報を少し上へ逃がして下部UIとの衝突を防ぐ。 */
@media (max-height:620px){
  #shinju-overlay .shinju-hero-info{
    top:calc(env(safe-area-inset-top) + clamp(190px,37dvh,225px)) !important;
  }
  #shinju-overlay .shinju-blessing-slot{
    height:62px !important;
  }
  #shinju-overlay .shinju-lore{
    margin-bottom:4px !important;
  }
}


/* =========================================================
   build758: Shinju full-bleed artwork / SE side-gap fix
   - 1200x2000 (3:5) stage artwork fills the visual viewport width
   - stage-specific focal points preserve roots / canopy during cover crop
   - no horizontal letterboxing on narrow devices such as iPhone SE
   ========================================================= */
#shinju-overlay .shinju-visual-wrap{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  background:#f7f4ec !important;
}

#shinju-overlay .shinju-visual{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center 68% !important;
}

/* 成長段階ごとに重要部分を安全域へ置く。 */
#shinju-overlay .shinju-visual[data-stage="1"]{ object-position:center 76% !important; }
#shinju-overlay .shinju-visual[data-stage="2"]{ object-position:center 72% !important; }
#shinju-overlay .shinju-visual[data-stage="3"]{ object-position:center 66% !important; }
#shinju-overlay .shinju-visual[data-stage="4"]{ object-position:center 58% !important; }
#shinju-overlay .shinju-visual[data-stage="5"]{ object-position:center 56% !important; }

/* 画像上の成長情報もコンテンツ幅ではなく画面幅基準で配置。 */
#shinju-overlay .shinju-hero-info{
  left:clamp(18px,6vw,28px) !important;
  right:clamp(18px,6vw,28px) !important;
}

/* SE級の狭幅では、画像を完全フルブリードにして余白感を消す。 */
@media (max-width:375px){
  #shinju-overlay .shinju-panel,
  #shinju-overlay .shinju-visual-wrap{
    width:100vw !important;
    max-width:100vw !important;
  }

  #shinju-overlay .shinju-visual{
    width:100vw !important;
    min-width:100vw !important;
  }

  #shinju-overlay .shinju-hero-info{
    left:18px !important;
    right:18px !important;
  }
}

/* 低くて細いSE系では根を優先しつつ、上部を切り過ぎない。 */
@media (max-width:375px) and (max-height:700px){
  #shinju-overlay .shinju-visual[data-stage="1"]{ object-position:center 72% !important; }
  #shinju-overlay .shinju-visual[data-stage="2"]{ object-position:center 69% !important; }
  #shinju-overlay .shinju-visual[data-stage="3"]{ object-position:center 63% !important; }
  #shinju-overlay .shinju-visual[data-stage="4"]{ object-position:center 56% !important; }
  #shinju-overlay .shinju-visual[data-stage="5"]{ object-position:center 54% !important; }
}

/* =========================================================
   build764: Shinju blessing UI simplification
   - simpler slot panels with character image as hero
   - no "選択" helper text in picker
   - thinner frames / refined serif look
   ========================================================= */
#shinju-overlay .shinju-blessing-section{
  padding:10px 10px 9px !important;
  border:1px solid rgba(144,118,72,.13) !important;
  border-radius:18px !important;
  background:rgba(255,251,245,.42) !important;
  box-shadow:none !important;
}
#shinju-overlay .shinju-blessing-head{
  margin:0 2px 8px !important;
  align-items:flex-end !important;
}
#shinju-overlay .shinju-blessing-head strong{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.05em !important;
}
#shinju-overlay .shinju-blessing-head span{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:9px !important;
  letter-spacing:.04em !important;
  color:rgba(118,98,70,.42) !important;
}
#shinju-overlay .shinju-blessing-slots{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}
#shinju-overlay .shinju-blessing-slot{
  min-width:0 !important;
  height:auto !important;
  min-height:122px !important;
  padding:8px 8px 9px !important;
  border:1px solid rgba(137,111,67,.14) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.40) !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:6px !important;
}
#shinju-overlay .shinju-blessing-slot-kind{
  position:static !important;
  display:block !important;
  margin:0 !important;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  color:#8c7248 !important;
  text-align:left !important;
}
#shinju-overlay .shinju-blessing-character,
#shinju-overlay .shinju-blessing-character-panel{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:0 !important;
}
#shinju-overlay .shinju-blessing-character-panel{
  flex:1 1 auto !important;
  min-height:60px !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
  border-radius:10px !important;
  background:rgba(241,235,225,.56) !important;
}
#shinju-overlay .shinju-blessing-character-panel img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 18% !important;
}
#shinju-overlay .shinju-blessing-plus{
  width:100% !important;
  height:100% !important;
  flex-basis:auto !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(154,126,78,.55) !important;
  font-size:26px !important;
  line-height:1 !important;
}
#shinju-overlay .shinju-blessing-character b{
  display:none !important;
}
#shinju-overlay .shinju-blessing-slot-effect{
  position:static !important;
  display:block !important;
  margin:0 !important;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  text-align:center !important;
  color:#8f6f3d !important;
}
#shinju-overlay .shinju-blessing-slot.is-assigned{
  border-color:rgba(157,124,64,.22) !important;
  background:rgba(255,252,247,.54) !important;
}

#shinju-blessing-picker{
  background:rgba(28,23,16,.14) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
#shinju-blessing-picker .shinju-blessing-picker-card{
  width:min(100%,620px) !important;
  max-height:min(84dvh,780px) !important;
  padding:15px 15px calc(13px + env(safe-area-inset-bottom)) !important;
  border:1px solid rgba(144,118,72,.14) !important;
  border-radius:24px !important;
  background:rgba(252,248,241,.76) !important;
  box-shadow:0 12px 36px rgba(59,45,21,.08), inset 0 1px 0 rgba(255,255,255,.38) !important;
}
#shinju-blessing-picker .shinju-blessing-picker-head{
  margin-bottom:10px !important;
}
#shinju-blessing-picker .shinju-blessing-picker-head small{
  font-size:10px !important;
  letter-spacing:.12em !important;
}
#shinju-blessing-picker .shinju-blessing-picker-head strong{
  font-size:18px !important;
  font-weight:500 !important;
  letter-spacing:.06em !important;
}
#shinju-blessing-picker .shinju-blessing-picker-close{
  border:1px solid rgba(141,112,67,.14) !important;
  background:rgba(255,255,255,.22) !important;
  font-size:11px !important;
  padding:9px 14px !important;
}
#shinju-blessing-picker .shinju-blessing-picker-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
#shinju-blessing-picker .shinju-blessing-picker-character{
  gap:6px !important;
  padding:8px !important;
  border:1px solid rgba(137,111,67,.12) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.28) !important;
  box-shadow:none !important;
}
#shinju-blessing-picker .shinju-blessing-picker-character.is-selected{
  border-color:rgba(161,124,57,.36) !important;
  background:rgba(251,244,228,.54) !important;
  box-shadow:none !important;
}
#shinju-blessing-picker .shinju-blessing-picker-character.is-used{
  opacity:.45 !important;
}
#shinju-blessing-picker .shinju-blessing-picker-portrait{
  width:100% !important;
  aspect-ratio:1/1 !important;
  border-radius:10px !important;
  background:rgba(239,233,220,.48) !important;
}
#shinju-blessing-picker .shinju-blessing-picker-portrait img{
  object-position:center 18% !important;
}
#shinju-blessing-picker .shinju-blessing-picker-meta{
  gap:0 !important;
}
#shinju-blessing-picker .shinju-blessing-picker-character b{
  text-align:left !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.03em !important;
}
#shinju-blessing-picker .shinju-blessing-picker-character small{
  display:none !important;
}
#shinju-blessing-picker .shinju-blessing-picker-foot{
  padding-top:8px !important;
}
#shinju-blessing-picker .shinju-blessing-picker-clear{
  height:40px !important;
  border:1px solid rgba(138,110,63,.13) !important;
  background:rgba(255,255,255,.20) !important;
  font-size:11px !important;
}

@media (max-width:390px){
  #shinju-overlay .shinju-blessing-slot{
    min-height:108px !important;
    padding:7px 7px 8px !important;
    gap:5px !important;
  }
  #shinju-overlay .shinju-blessing-slot-kind{
    font-size:10px !important;
  }
  #shinju-overlay .shinju-blessing-slot-effect{
    font-size:10px !important;
  }
  #shinju-blessing-picker .shinju-blessing-picker-grid{
    gap:8px !important;
  }
  #shinju-blessing-picker .shinju-blessing-picker-character{
    padding:7px !important;
  }
  #shinju-blessing-picker .shinju-blessing-picker-character b{
    font-size:10px !important;
  }
}


/* =========================================================
   build786 — SHARP UI REFORM / 角丸・楕円撤廃

   ZERAPHIA white UI geometry policy:
   - controls / cards / modals / sheets / tabs are rectilinear
   - thin warm-gold rules + white/ivory paper surfaces
   - rounded rectangles and capsule/pill controls are prohibited
   - true circular symbols/effects (RANK seal, notification dots,
     battle/orbit effects) remain circular by explicit exception
   ========================================================= */

:root{
  --zr-sharp-line:rgba(167,135,79,.34);
  --zr-sharp-line-strong:rgba(158,119,55,.52);
  --zr-sharp-paper:rgba(255,253,248,.86);
  --zr-sharp-paper-pressed:rgba(247,240,226,.92);
  --zr-sharp-text:#6b5434;
}

/* --- Geometry policy ---
   Do NOT flatten every descendant globally: icon primitives and semantic
   indicators (search lens / notification dots / seals) legitimately use circles.
   Rectilinear geometry is applied to controls, cards, panels and modals below.
*/

/* Pseudo-elements used specifically as UI frames follow the same geometry. */
html body .modal::before,
html body .modal::after,
html body .notice-panel::before,
html body .notice-panel::after,
html body .stat-card::before,
html body .stat-card::after,
html body .zukan-card::before,
html body .zukan-card::after,
html body .box-card::before,
html body .box-card::after,
html body .ten-result-card::before,
html body .ten-result-card::after,
html body .summon-banner-card::before,
html body .summon-banner-card::after,
html body .ss-card::before,
html body .ss-card::after{
  border-radius:0 !important;
}

/* --- True circles / effects: not part of the UI-rounding language. --- */
html body .hud-lv-circle,
html body .box-carousel-action-notice-dot,
html body .primoa-index-limitbreak-dot,
html body .zukan-search-glyph,
html body .zukan-name-search-icon,
html body .zukan-search-button.has-query::after,
html body .bottom-nav-notice,
html body .box-limitbreak-dot,
html body .home-event-banner-dots span,
html body .standby-orbit,
html body .standby-core,
html body .reveal-circle,
html body .reveal-wing-light,
html body .gacha-aura,
html body .ten-card-back-ring,
html body .ten-card-back-core,
html body .summon-header-sigil,
html body .box-carousel-lock-mark,
html body .box-carousel-locked-seal,
html body .detail-range-cell.self,
html body .detail-move-cell.self{
  border-radius:50% !important;
}

/* Some effect fragments intentionally use fully rounded geometry. */
html body .standby-light-fragment,
html body .reveal-glyph{
  border-radius:999px !important;
}

/* --- All native controls: never pill / never soft-rounded. --- */
html body button,
html body input:not([type="checkbox"]):not([type="radio"]),
html body select,
html body textarea{
  border-radius:0 !important;
}

/* White-theme action buttons: thin frame, low-noise paper surface. */
#screen-zukan button,
#screen-item button,
#detail-modal button,
#character-levelup-modal button,
#limitbreak-modal button,
#limitbreak-confirm-modal button,
#shinju-overlay button,
#shinju-blessing-picker button,
.notice-panel button{
  box-shadow:none !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn,
.primor-fullscreen-home-btn,
#detail-modal .btn-set-home,
#detail-modal .btn-set-fav.btn-set-home,
#character-levelup-modal .character-levelup-actions button,
#limitbreak-modal .lb-execute-btn,
#limitbreak-modal .modal-cancel-btn,
#limitbreak-confirm-modal .btn-pay,
#limitbreak-confirm-modal .modal-cancel-btn,
#shinju-overlay .shinju-offer-btn,
#shinju-overlay .shinju-offer-all,
#shinju-overlay .shinju-clear-btn,
#shinju-blessing-picker .shinju-blessing-picker-close,
#shinju-blessing-picker .shinju-blessing-picker-clear{
  border-radius:0 !important;
  box-shadow:none !important;
  border:1px solid var(--zr-sharp-line) !important;
  background:var(--zr-sharp-paper) !important;
  color:var(--zr-sharp-text) !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-action-btn:active,
.primor-fullscreen-home-btn:active,
#detail-modal .btn-set-home:active,
#detail-modal .btn-set-fav.btn-set-home:active,
#character-levelup-modal .character-levelup-actions button:active,
#limitbreak-modal .lb-execute-btn:active,
#limitbreak-confirm-modal .btn-pay:active{
  transform:translateY(1px) !important;
  filter:none !important;
  background:var(--zr-sharp-paper-pressed) !important;
}

/* Ready / primary states are expressed with line strength, not rounded gold pills. */
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-limitbreak-btn.is-ready,
#character-levelup-modal .character-levelup-execute,
#limitbreak-modal .lb-execute-btn,
#limitbreak-confirm-modal .btn-pay{
  border-color:var(--zr-sharp-line-strong) !important;
  background:rgba(250,245,232,.92) !important;
}

/* --- Character detail: remove the large soft bottom-sheet silhouette. --- */
#screen-zukan.is-primoa-mode .box-carousel-detail,
#detail-modal .box-carousel-detail{
  border-radius:0 !important;
  box-shadow:none !important;
  border-color:rgba(173,142,89,.24) !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-sheet-handle span{
  height:2px !important;
  border-radius:0 !important;
  background:rgba(133,104,62,.34) !important;
  box-shadow:none !important;
}

#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-visual,
#box-grid.box-carousel:not(.remnant-carousel) .box-carousel-img,
#screen-zukan .primoa-index-image-wrap,
#screen-zukan .primoa-index-image{
  border-radius:0 !important;
}

/* --- Detail / image modal: paper frame, no capsule controls. --- */
#detail-modal .modal,
.modal,
.modal-content,
.modal-card,
.modal-inner,
.modal-box,
#character-levelup-modal .character-levelup-modal-inner,
#limitbreak-modal .modal,
#limitbreak-confirm-modal .modal,
#shinju-blessing-picker .shinju-blessing-picker-card{
  border-radius:0 !important;
}

#detail-modal .modal{
  box-shadow:0 10px 30px rgba(75,57,31,.08) !important;
}

#detail-modal .btn-set-home,
#detail-modal .btn-set-fav.btn-set-home{
  min-height:42px !important;
  padding:10px 18px !important;
}

/* Close controls are square / typographic instead of circular floating buttons. */
.modal-close-btn,
.detail-modal-close-x,
.primor-fullscreen-close,
.remnant-fullscreen-close,
.notice-close,
.shinju-close,
#shinju-blessing-picker .shinju-blessing-picker-close{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* --- Common white UI cards / panels / rows. --- */
.setting-row,
.id-box,
.id-btn,
.summon-counter,
#summon-result,
.result-photo,
.opt-badge,
.btn-favorite,
.stat-card,
.stat-card-total,
.zukan-card,
#box-grid .box-card,
.detail-photo,
.photo-zoom img,
.compare-chara-visual img,
.name-edit-box,
.name-edit-input,
.friend-add-box,
.friend-add-input,
.friend-status-badge,
.friend-card,
.friend-card-compact,
.friend-card-panel,
.friend-stat-chip,
.friend-chara-photo,
.friend-chara-photo-empty,
.friend-req-card,
.friend-search-card,
.friend-chara-section,
.friend-icon-img,
.friend-icon-empty,
.notice-panel,
.notice-item,
.detail-lb-section,
.detail-shooting-card,
.detail-skill-card,
.detail-skill-badge,
.detail-skill-empty,
.detail-range-board,
.detail-move-board,
.box-carousel-locked-panel,
.detail-lb-ready-badge,
.summon-banner-card,
.summon-detail-visual,
.pity-counter,
.gacha-material-detail-box,
.lb-vessel-choice,
.remnant-detail-row,
.remnant-blessing-card,
.remnant-blessing-upgrade-material,
#stage-select-modal .ss-card,
#limitbreak-confirm-modal .lb-confirm-consume-box,
#limitbreak-confirm-modal .lb-confirm-level,
.detail-combo-condition,
.detail-combo-range-item,
.lb-bonus-box,
.lb-bonus-row.next,
.lb-next-bonus,
#limitbreak-modal .lb-recipe-box,
#limitbreak-modal .lb-lack-box,
#character-levelup-modal .chara-level-material-row,
#shinju-overlay .shinju-content,
#shinju-overlay .shinju-hero-info,
#shinju-overlay .shinju-progress-box,
#shinju-overlay .shinju-progress-bg,
#shinju-overlay .shinju-progress-fill,
#shinju-overlay .shinju-item-card,
#shinju-overlay .shinju-item-empty,
#shinju-overlay .shinju-clear-card,
#shinju-overlay .shinju-stage,
#shinju-overlay .shinju-blessing-section,
#shinju-overlay .shinju-blessing-slot,
#shinju-overlay .shinju-blessing-character-panel,
#shinju-blessing-picker .shinju-blessing-picker-character,
#shinju-blessing-picker .shinju-blessing-picker-portrait,
.ten-result-card,
.ten-card-back,
.ten-card-img,
.ten-card-bottom,
.ten-result-again-btn,
.ten-result-close-btn{
  border-radius:0 !important;
}

/* Remove the especially soft 'app card' shadow language where it clashes with sharp geometry. */
#screen-zukan .stat-card,
#screen-zukan .zukan-card,
#screen-zukan .box-carousel-detail,
#detail-modal .modal,
#detail-modal .detail-shooting-card,
#detail-modal .detail-lb-section,
#screen-item .item-inventory-panel,
.notice-panel,
#character-levelup-modal .character-levelup-modal-inner,
#limitbreak-modal .modal,
#limitbreak-confirm-modal .modal,
#shinju-blessing-picker .shinju-blessing-picker-card{
  box-shadow:none !important;
}

/* --- Pills / tabs / chips / counters become rectangular labels. --- */
.zukan-tabs button,
.box-limitbreak-jump,
.box-limitbreak-count,
.detail-lb-ready-badge,
.btn-gacha-guarantee-badge,
.summon-history-btn,
.gacha-resonance-tab,
#stage-select-modal .ss-story-clear,
.ten-card-new-badge,
.ten-card-item-badge,
.ten-card-pickup-badge,
#reveal-pickup-badge,
.shop-item-badge,
.card-no,
.box-rarity-label,
.ten-card-rarity-label,
.ten-card-type-label{
  border-radius:0 !important;
}

/* Progress / meter ends are straight. */
.hud-exp-bg,
.hud-exp-fill,
.pity-bar-wrap,
.pity-bar-fill,
.title-loading-track,
#title-loading-fill,
#screen-summon .pity-bar-wrap,
#screen-summon .pity-bar-fill,
#shinju-overlay .shinju-progress-bg,
#shinju-overlay .shinju-progress-fill{
  border-radius:0 !important;
}

/* HUD resources: remove capsule silhouette. The + remains a simple typographic action. */
.global-user-frame .hud-resource,
.hud-resource{
  border-radius:0 !important;
}
.global-user-frame .hud-gem-plus-btn,
.hud-gem-plus-btn{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Item management is the visual reference: keep its thin rectangular tabs/buttons explicit. */
#screen-item button,
#screen-item .item-tab,
#screen-item .item-category-tab,
#screen-item .item-sell-btn{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* End build786 SHARP UI REFORM */

/* ============================================================
   build795 NOAH / FRAGMENTS OF PARADISE — LOGO PUZZLE REFORM
   - 9欠片をZERAPHIAロゴ1枚の3x3分割として表示
   - 未取得欠片は白いマット紙、取得欠片だけロゴが現れる
   - 紫カード / 金ベタ大ボタン / 強いフレームを廃止
   - iPhone SE高さでも1画面に静かに収める
   ============================================================ */

.noah-piece-overlay{
  background:rgba(243,239,231,.97) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.noah-piece-screen{
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 28%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#faf7f0 0%,#f3ede1 100%) !important;
  color:#574936 !important;
}

/* header: standard ZERAPHIA proportions, no hard frame */
.noah-piece-head{
  position:relative !important;
  flex:0 0 64px !important;
  min-height:64px !important;
  padding:max(8px,env(safe-area-inset-top)) 18px 4px !important;
  grid-template-columns:74px minmax(0,1fr) 74px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:isolate;
}
.noah-piece-head::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:-6%;
  right:-6%;
  top:14px;
  height:72px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.64) 38%,
    rgba(255,255,255,.27) 70%,
    rgba(255,255,255,0) 100%);
  filter:blur(10px);
  -webkit-filter:blur(10px);
}
.noah-piece-back{
  min-width:52px !important;
  height:44px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#837361 !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.015em !important;
  text-shadow:0 0 8px rgba(255,255,255,.82) !important;
}
.noah-piece-title small{
  margin-bottom:4px !important;
  color:#aa8a56 !important;
  font-family:"Cinzel",serif !important;
  font-size:6px !important;
  font-weight:600 !important;
  letter-spacing:.25em !important;
}
.noah-piece-title strong{
  color:#6f5535 !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  text-shadow:0 0 9px rgba(255,255,255,.72) !important;
}
.noah-piece-ticket{
  color:rgba(111,91,64,.68) !important;
  font-size:8px !important;
  letter-spacing:.03em !important;
}
.noah-piece-ticket b{
  color:#765b32 !important;
  font-size:14px !important;
  font-weight:500 !important;
}

/* body: center the composition instead of stretching it to the footer */
.noah-piece-body{
  flex:0 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  overflow:visible !important;
  padding:10px 18px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  box-sizing:border-box !important;
}
.noah-piece-lead{
  margin:0 0 7px !important;
}
.noah-piece-lead .en{
  color:#aa8a56 !important;
  font-size:7px !important;
  letter-spacing:.28em !important;
}
.noah-piece-lead h2{
  margin-top:5px !important;
  color:#66523a !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.10em !important;
}
.noah-piece-lead p{
  margin-top:5px !important;
  color:rgba(91,72,44,.52) !important;
  font-size:9px !important;
  line-height:1.5 !important;
}

.noah-piece-progress{
  margin:2px 0 10px !important;
  gap:6px !important;
}
.noah-piece-progress-label{
  color:rgba(116,92,57,.58) !important;
  font-size:8px !important;
  letter-spacing:.08em !important;
}
.noah-piece-progress strong{
  color:#6e542a !important;
  font-size:23px !important;
  font-weight:400 !important;
}
.noah-piece-progress span:not(.noah-piece-progress-label){
  color:#aa8c57 !important;
  font-size:9px !important;
}

/* Wide logo board: its aspect ratio exactly matches the supplied logo artwork. */
.noah-puzzle-frame{
  position:relative !important;
  width:min(calc(100vw - 36px),354px) !important;
  aspect-ratio:1573 / 679 !important;
  margin:0 auto !important;
  padding:4px !important;
  border:1px solid rgba(154,119,59,.18) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:
    0 10px 30px rgba(91,70,37,.07),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
.noah-puzzle-frame::before{
  content:"";
  position:absolute;
  inset:-18px -14px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.70),rgba(255,255,255,0) 72%);
  filter:blur(8px);
}
.noah-puzzle-grid{
  gap:1px !important;
  background:rgba(149,126,88,.16) !important;
  border-radius:0 !important;
}
.noah-puzzle-piece,
.noah-puzzle-piece.open{
  background-image:url("../images/noah_logo_puzzle.webp") !important;
  background-repeat:no-repeat !important;
  background-size:300% 300% !important;
  background-color:#fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* unopened = a clean sheet covering its exact logo fragment */
.noah-puzzle-piece.locked{
  background-image:none !important;
  background:#f4f0e8 !important;
  filter:none !important;
}
.noah-puzzle-piece.locked::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.56) 52%,rgba(244,239,229,.18) 100%),
    linear-gradient(135deg,rgba(255,255,255,.30),rgba(210,199,181,.08)) !important;
  opacity:1 !important;
}
.noah-puzzle-piece.locked::after{
  content:attr(data-noah-piece) !important;
  left:auto !important;
  top:auto !important;
  right:7px !important;
  bottom:5px !important;
  transform:none !important;
  color:rgba(121,99,66,.22) !important;
  font-family:"Cinzel",serif !important;
  font-size:7px !important;
  font-weight:500 !important;
  letter-spacing:.12em !important;
}
.noah-puzzle-piece.open::before,
.noah-puzzle-piece.open::after{
  content:none !important;
  display:none !important;
}
.noah-puzzle-piece.open{
  animation:noahLogoFragmentOpen795 .62s cubic-bezier(.2,.78,.2,1) both !important;
}
@keyframes noahLogoFragmentOpen795{
  0%{opacity:0;filter:brightness(2.15) blur(5px);transform:scale(.94)}
  58%{opacity:1;filter:brightness(1.15) blur(0);transform:scale(1.012)}
  100%{opacity:1;filter:brightness(1) blur(0);transform:scale(1)}
}

.noah-piece-note{
  margin:10px auto 0 !important;
  max-width:330px !important;
  color:rgba(89,70,42,.48) !important;
  font-size:8px !important;
  line-height:1.55 !important;
  letter-spacing:.025em !important;
}

/* action area: quiet editorial button, no gold slab, no hard footer */
.noah-piece-actions{
  flex:0 0 auto !important;
  width:min(calc(100vw - 48px),330px) !important;
  margin:14px auto max(14px,env(safe-area-inset-bottom)) !important;
  padding:0 !important;
  border:0 !important;
  border-top:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.noah-piece-challenge{
  width:100% !important;
  min-height:58px !important;
  height:auto !important;
  padding:9px 14px !important;
  border:1px solid rgba(163,128,69,.36) !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg,rgba(255,254,250,.96),rgba(245,238,224,.94)) !important;
  color:#6d5531 !important;
  box-shadow:
    0 5px 16px rgba(85,63,31,.07),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  text-shadow:none !important;
  font-family:"Noto Serif JP",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.065em !important;
}
.noah-piece-challenge::before{
  content:"";
  display:block;
  width:42px;
  height:1px;
  margin:0 auto 7px;
  background:linear-gradient(90deg,transparent,rgba(160,126,67,.46),transparent);
}
.noah-piece-challenge small,
.noah-piece-challenge-sub{
  display:block !important;
  margin:0 0 3px !important;
  color:#a18452 !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:7px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  letter-spacing:.16em !important;
  opacity:.88 !important;
}
.noah-piece-challenge-main{
  color:#6d5531 !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  letter-spacing:.065em !important;
}
.noah-piece-challenge:active:not(:disabled){
  transform:translateY(1px) !important;
  background:linear-gradient(180deg,rgba(248,242,231,.98),rgba(239,230,213,.96)) !important;
}
.noah-piece-challenge:disabled{
  border-color:rgba(137,120,94,.18) !important;
  background:rgba(245,241,233,.72) !important;
  color:rgba(106,91,68,.42) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  opacity:.78 !important;
}
.noah-piece-challenge:disabled small,
.noah-piece-challenge:disabled .noah-piece-challenge-sub{
  color:rgba(120,102,76,.42) !important;
}
.noah-piece-ticket-status{
  display:none !important; /* header already owns ticket balance */
}
.noah-piece-complete{
  margin-top:8px !important;
  color:#80673f !important;
  font-size:9px !important;
  letter-spacing:.08em !important;
}

/* compact layout for iPhone SE and other short screens */
@media(max-height:700px){
  .noah-piece-head{
    flex-basis:58px !important;
    min-height:58px !important;
    padding-top:max(5px,env(safe-area-inset-top)) !important;
  }
  .noah-piece-body{
    padding-top:6px !important;
    padding-bottom:4px !important;
  }
  .noah-piece-lead{
    margin-bottom:4px !important;
  }
  .noah-piece-lead p{
    display:none !important;
  }
  .noah-piece-progress{
    margin:0 0 7px !important;
  }
  .noah-puzzle-frame{
    width:min(calc(100vw - 42px),342px) !important;
  }
  .noah-piece-note{
    margin-top:7px !important;
  }
  .noah-piece-actions{
    width:min(calc(100vw - 54px),318px) !important;
    margin-top:11px !important;
    margin-bottom:max(10px,env(safe-area-inset-bottom)) !important;
  }
  .noah-piece-challenge{
    min-height:54px !important;
    padding:7px 12px !important;
  }
}

/* ============================================================
   build796 NOAH / SQUARE LOGO PUZZLE
   - puzzle returns to a true square 3x3 board
   - closed pieces are quiet ivory tiles; no numbering
   - the supplied ZERAPHIA logo is composed on a square master image
   - challenge CTA is reduced to a single line; ticket balance sits below it
   ============================================================ */

.noah-piece-head-spacer{
  grid-column:3;
  width:100%;
  height:1px;
}

/* ticket balance belongs below the action, not in the header */
.noah-piece-ticket{
  display:none !important;
}

.noah-puzzle-frame{
  width:min(calc(100vw - 44px),306px) !important;
  aspect-ratio:1 / 1 !important;
  padding:3px !important;
  border:1px solid rgba(157,126,75,.20) !important;
  background:rgba(255,255,255,.62) !important;
  box-shadow:
    0 8px 26px rgba(76,58,34,.055),
    inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
.noah-puzzle-frame::before{
  inset:-20px !important;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.78),rgba(255,255,255,0) 70%) !important;
  filter:blur(9px) !important;
}
.noah-puzzle-grid{
  width:100% !important;
  height:100% !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:1px !important;
  background:rgba(140,118,84,.15) !important;
}
.noah-puzzle-piece,
.noah-puzzle-piece.open{
  background-image:url("../images/noah_logo_puzzle.webp") !important;
  background-size:300% 300% !important;
  background-repeat:no-repeat !important;
  background-color:#faf8f3 !important;
}
.noah-puzzle-piece.locked{
  background-image:none !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.96) 0%,rgba(250,248,243,.92) 58%,rgba(239,234,224,.72) 100%) !important;
}
.noah-puzzle-piece.locked::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(181,163,135,.035)) !important;
  opacity:1 !important;
}
.noah-puzzle-piece.locked::after{
  content:none !important;
  display:none !important;
}

.noah-piece-note{
  margin-top:9px !important;
}
.noah-piece-actions{
  width:min(calc(100vw - 70px),258px) !important;
  margin:18px auto max(14px,env(safe-area-inset-bottom)) !important;
}
.noah-piece-challenge{
  width:100% !important;
  min-height:46px !important;
  height:46px !important;
  padding:0 14px !important;
  border:1px solid rgba(161,126,67,.35) !important;
  background:rgba(255,253,248,.74) !important;
  color:#6b5230 !important;
  box-shadow:0 4px 14px rgba(84,62,31,.045) !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
  text-shadow:none !important;
}
.noah-piece-challenge::before{
  content:none !important;
  display:none !important;
}
.noah-piece-challenge:active:not(:disabled){
  transform:translateY(1px) !important;
  background:rgba(246,240,228,.88) !important;
}
.noah-piece-ticket-status{
  display:block !important;
  margin-top:8px !important;
  text-align:center !important;
  color:rgba(102,81,53,.55) !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;
  font-size:8px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  letter-spacing:.07em !important;
}
.noah-piece-ticket-status b{
  margin:0 2px !important;
  color:#765b32 !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
}

@media(max-height:700px){
  .noah-puzzle-frame{
    width:min(calc(100vw - 48px),286px) !important;
  }
  .noah-piece-actions{
    width:min(calc(100vw - 78px),246px) !important;
    margin-top:13px !important;
  }
  .noah-piece-challenge{
    min-height:44px !important;
    height:44px !important;
  }
  .noah-piece-ticket-status{
    margin-top:6px !important;
  }
}


/* ============================================================
   build797 NOAH / REFINED PARADISE PUZZLE
   ============================================================ */
#noah-piece-overlay.noah-piece-overlay{
  background:rgba(247,244,237,.985) !important;
}
#noah-piece-overlay .noah-piece-screen{
  background:
    radial-gradient(ellipse at 50% 7%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.74) 31%,rgba(255,255,255,0) 63%),
    linear-gradient(180deg,#fbf9f4 0%,#f5f0e7 100%) !important;
}
#noah-piece-overlay .noah-piece-head{
  flex:0 0 62px !important;
  min-height:62px !important;
  padding:max(7px,env(safe-area-inset-top)) 18px 3px !important;
  grid-template-columns:72px minmax(0,1fr) 72px !important;
  border:0 !important;
  background:transparent !important;
}
#noah-piece-overlay .noah-piece-back{
  min-width:52px !important;height:42px !important;padding:0 !important;
  border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  color:#837361 !important;font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;
  font-size:11px !important;font-weight:500 !important;letter-spacing:.015em !important;
}
#noah-piece-overlay .noah-piece-title small{
  margin:0 0 4px !important;color:#a98955 !important;font-family:"Cinzel","Times New Roman",serif !important;
  font-size:5.5px !important;font-weight:600 !important;letter-spacing:.27em !important;
}
#noah-piece-overlay .noah-piece-title strong{
  color:#6f5535 !important;font-size:15px !important;font-weight:500 !important;letter-spacing:.12em !important;
}
#noah-piece-overlay .noah-piece-body{
  flex:1 1 auto !important;min-height:0 !important;width:100% !important;
  padding:13px 18px max(14px,env(safe-area-inset-bottom)) !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;overflow:hidden !important;box-sizing:border-box !important;
}
#noah-piece-overlay .noah-piece-lead{margin:0 0 7px !important;text-align:center !important;}
#noah-piece-overlay .noah-piece-lead .en{
  margin:0 0 5px !important;color:#ad905f !important;font-family:"Cinzel","Times New Roman",serif !important;
  font-size:6px !important;font-weight:500 !important;letter-spacing:.30em !important;
}
#noah-piece-overlay .noah-piece-lead h2{
  margin:0 !important;color:#5f4c35 !important;font-size:16px !important;font-weight:500 !important;line-height:1.35 !important;letter-spacing:.10em !important;
}
#noah-piece-overlay .noah-piece-lead p{display:none !important;}
#noah-piece-overlay .noah-piece-progress{
  width:min(calc(100vw - 54px),292px) !important;min-height:26px !important;margin:0 0 8px !important;padding:0 2px !important;
  display:flex !important;align-items:baseline !important;justify-content:center !important;gap:6px !important;border:0 !important;background:transparent !important;
}
#noah-piece-overlay .noah-piece-progress-label{margin-right:2px !important;color:rgba(103,83,55,.50) !important;font-size:7px !important;letter-spacing:.12em !important;}
#noah-piece-overlay .noah-piece-progress strong{
  color:#73582f !important;font-family:"Cinzel","Noto Serif JP",serif !important;font-size:22px !important;font-weight:400 !important;line-height:1 !important;
}
#noah-piece-overlay .noah-piece-progress span:not(.noah-piece-progress-label){
  color:#aa8c57 !important;font-family:"Cinzel","Noto Serif JP",serif !important;font-size:8px !important;letter-spacing:.08em !important;
}
#noah-piece-overlay .noah-puzzle-frame{
  position:relative !important;width:min(calc(100vw - 52px),292px) !important;aspect-ratio:1/1 !important;flex:0 0 auto !important;
  margin:0 !important;padding:5px !important;box-sizing:border-box !important;border:1px solid rgba(150,121,76,.22) !important;border-radius:0 !important;
  background:rgba(255,255,255,.68) !important;box-shadow:0 12px 34px rgba(77,58,31,.055),inset 0 0 0 1px rgba(255,255,255,.86) !important;
}
#noah-piece-overlay .noah-puzzle-frame::before{
  content:"" !important;position:absolute !important;z-index:-1 !important;inset:-22px !important;pointer-events:none !important;
  background:radial-gradient(circle at 50% 49%,rgba(255,255,255,.92),rgba(255,255,255,0) 70%) !important;filter:blur(10px) !important;
}
#noah-piece-overlay .noah-puzzle-grid{
  width:100% !important;height:100% !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;gap:1px !important;overflow:hidden !important;border-radius:0 !important;background:rgba(143,119,82,.105) !important;
}
#noah-piece-overlay .noah-puzzle-piece,
#noah-piece-overlay .noah-puzzle-piece.open,
#noah-piece-overlay .noah-puzzle-piece.locked{
  position:relative !important;min-width:0 !important;min-height:0 !important;overflow:hidden !important;border-radius:0 !important;
  background-image:url("../images/noah_logo_puzzle.webp") !important;background-repeat:no-repeat !important;background-size:300% 300% !important;
  background-color:#faf8f3 !important;box-shadow:none !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked{filter:saturate(.35) contrast(.82) !important;}
#noah-piece-overlay .noah-puzzle-piece.locked::before{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:1 !important;display:block !important;
  background:linear-gradient(180deg,rgba(250,248,243,.80),rgba(246,242,234,.84)) !important;opacity:1 !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::after{content:none !important;display:none !important;}
#noah-piece-overlay .noah-puzzle-piece.open{filter:none !important;animation:noahPieceFocus797 .68s cubic-bezier(.20,.76,.20,1) both !important;}
#noah-piece-overlay .noah-puzzle-piece.open::before,#noah-piece-overlay .noah-puzzle-piece.open::after{content:none !important;display:none !important;}
@keyframes noahPieceFocus797{0%{opacity:.18;filter:brightness(2.3) blur(3px)}58%{opacity:1;filter:brightness(1.16) blur(0)}100%{opacity:1;filter:brightness(1) blur(0)}}
#noah-piece-overlay .noah-piece-note{
  margin:10px auto 0 !important;max-width:292px !important;color:rgba(92,74,50,.43) !important;font-size:7.5px !important;line-height:1.45 !important;letter-spacing:.035em !important;text-align:center !important;
}
#noah-piece-overlay .noah-piece-actions{
  flex:0 0 auto !important;width:min(calc(100vw - 84px),238px) !important;margin:18px auto 0 !important;padding:0 !important;
  border:0 !important;background:transparent !important;box-shadow:none !important;text-align:center !important;
}
#noah-piece-overlay .noah-piece-actions::before{
  content:"" !important;display:block !important;width:52px !important;height:1px !important;margin:0 auto 10px !important;
  background:linear-gradient(90deg,transparent,rgba(157,124,70,.30),transparent) !important;
}
#noah-piece-overlay .noah-piece-challenge{
  width:100% !important;height:44px !important;min-height:44px !important;padding:0 14px !important;border:1px solid rgba(160,126,68,.34) !important;
  border-radius:0 !important;background:linear-gradient(180deg,rgba(255,254,250,.96),rgba(247,241,230,.90)) !important;color:#674e2d !important;
  box-shadow:0 5px 16px rgba(80,59,30,.045),inset 0 1px 0 rgba(255,255,255,.92) !important;text-shadow:none !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;font-size:11px !important;font-weight:500 !important;line-height:1 !important;letter-spacing:.12em !important;white-space:nowrap !important;
}
#noah-piece-overlay .noah-piece-challenge::before,#noah-piece-overlay .noah-piece-challenge::after{content:none !important;display:none !important;}
#noah-piece-overlay .noah-piece-challenge:active:not(:disabled){transform:translateY(1px) !important;background:linear-gradient(180deg,rgba(248,242,231,.98),rgba(241,232,216,.94)) !important;}
#noah-piece-overlay .noah-piece-challenge:disabled{
  border-color:rgba(147,128,98,.20) !important;background:rgba(249,246,240,.68) !important;color:rgba(94,77,54,.42) !important;box-shadow:none !important;opacity:1 !important;
}
#noah-piece-overlay .noah-piece-ticket{display:none !important;}
#noah-piece-overlay .noah-piece-head-spacer{display:block !important;grid-column:3 !important;width:100% !important;height:1px !important;}
#noah-piece-overlay .noah-piece-ticket-status{
  display:block !important;margin:7px 0 0 !important;color:rgba(102,82,56,.48) !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;font-size:7.5px !important;font-weight:400 !important;line-height:1.3 !important;letter-spacing:.08em !important;
}
#noah-piece-overlay .noah-piece-ticket-status b{
  margin:0 2px !important;color:#71572f !important;font-family:"Cinzel","Noto Serif JP",serif !important;font-size:10px !important;font-weight:500 !important;
}
#noah-piece-overlay .noah-piece-complete{margin-top:8px !important;color:#81683f !important;font-size:8px !important;letter-spacing:.08em !important;}
@media(max-height:700px){
  #noah-piece-overlay .noah-piece-head{flex-basis:56px !important;min-height:56px !important;padding-top:max(4px,env(safe-area-inset-top)) !important;}
  #noah-piece-overlay .noah-piece-body{padding-top:8px !important;}
  #noah-piece-overlay .noah-piece-lead{margin-bottom:4px !important;}
  #noah-piece-overlay .noah-piece-lead h2{font-size:15px !important;}
  #noah-piece-overlay .noah-piece-progress{width:min(calc(100vw - 60px),278px) !important;min-height:22px !important;margin-bottom:6px !important;}
  #noah-piece-overlay .noah-puzzle-frame{width:min(calc(100vw - 60px),278px) !important;}
  #noah-piece-overlay .noah-piece-note{margin-top:7px !important;}
  #noah-piece-overlay .noah-piece-actions{width:min(calc(100vw - 98px),226px) !important;margin-top:12px !important;}
  #noah-piece-overlay .noah-piece-actions::before{margin-bottom:8px !important;}
  #noah-piece-overlay .noah-piece-challenge{height:42px !important;min-height:42px !important;}
}


/* ============================================================
   build798 NOAH / VISIBLE LOGO + COMPACT ACTION FLOW
   - one faint full logo is always visible behind the 3x3 grid
   - opened pieces reveal the same artwork at full contrast
   - challenge action follows the puzzle instead of sitting at screen bottom
   ============================================================ */
#noah-piece-overlay .noah-piece-body{
  flex:0 0 auto !important;
  min-height:auto !important;
  padding-bottom:0 !important;
  overflow:visible !important;
}

#noah-piece-overlay .noah-puzzle-frame{
  width:min(calc(100vw - 50px),296px) !important;
  padding:3px !important;
  border:1px solid rgba(151,121,75,.16) !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:0 10px 28px rgba(76,57,31,.045),inset 0 0 0 1px rgba(255,255,255,.92) !important;
}
#noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
  isolation:isolate !important;
  gap:0 !important;
  background:#f8f6f1 !important;
}
#noah-piece-overlay .noah-puzzle-grid::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("../images/noah_logo_puzzle.webp?v=798") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  opacity:.25 !important;
  filter:grayscale(1) contrast(.92) !important;
}
#noah-piece-overlay .noah-puzzle-piece{
  z-index:1 !important;
  border:0 !important;
  box-shadow:inset 0 0 0 .5px rgba(137,113,76,.11) !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked{
  background-image:none !important;
  background-color:rgba(250,248,243,.12) !important;
  filter:none !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  display:block !important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(236,229,217,.04)) !important;
  opacity:1 !important;
}
#noah-piece-overlay .noah-puzzle-piece.open{
  background-image:url("../images/noah_logo_puzzle.webp?v=798") !important;
  background-repeat:no-repeat !important;
  background-size:300% 300% !important;
  background-color:#f8f6f1 !important;
  filter:none !important;
  box-shadow:inset 0 0 0 .5px rgba(137,113,76,.10) !important;
}

#noah-piece-overlay .noah-piece-note{
  margin-top:8px !important;
}
#noah-piece-overlay .noah-piece-actions{
  flex:0 0 auto !important;
  width:min(calc(100vw - 104px),218px) !important;
  margin:14px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#noah-piece-overlay .noah-piece-actions::before{
  content:none !important;
  display:none !important;
}
#noah-piece-overlay .noah-piece-challenge{
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  border-color:rgba(157,123,67,.28) !important;
  background:linear-gradient(180deg,rgba(255,254,250,.98),rgba(248,243,234,.94)) !important;
  box-shadow:0 4px 13px rgba(79,58,29,.035),inset 0 1px 0 rgba(255,255,255,.94) !important;
  color:#654c2c !important;
  font-size:11px !important;
  letter-spacing:.13em !important;
}
#noah-piece-overlay .noah-piece-ticket-status{
  margin-top:6px !important;
  font-size:7.5px !important;
  color:rgba(101,81,54,.48) !important;
}

@media(max-height:700px){
  #noah-piece-overlay .noah-puzzle-frame{
    width:min(calc(100vw - 58px),280px) !important;
  }
  #noah-piece-overlay .noah-piece-actions{
    width:min(calc(100vw - 116px),210px) !important;
    margin-top:10px !important;
  }
  #noah-piece-overlay .noah-piece-challenge{
    height:40px !important;
    min-height:40px !important;
  }
}

/* ============================================================
   build799 NOAH / TRUE TWO-SIDED PUZZLE
   CLOSED = ZERAPHIA logo back, OPEN = noah.webp front
   - 0/9 : full logo composed by all nine closed tiles
   - 1/9 : one tile reveals noah.webp, eight remain logo
   - 9/9 : full noah.webp is completed
   - action block stays directly beneath the puzzle
   ============================================================ */
#noah-piece-overlay .noah-piece-screen{
  display:block !important;
  height:100dvh !important;
  overflow:hidden !important;
}
#noah-piece-overlay .noah-piece-body{
  display:block !important;
  flex:none !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:0 !important;
}

/* The board itself remains a strict square. */
#noah-piece-overlay .noah-puzzle-frame{
  width:min(calc(100vw - 54px),286px) !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  padding:4px !important;
  margin:0 auto !important;
  border:1px solid rgba(151,121,75,.18) !important;
  background:rgba(255,255,255,.80) !important;
  box-shadow:0 9px 26px rgba(76,57,31,.045),inset 0 0 0 1px rgba(255,255,255,.94) !important;
}
#noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:1px !important;
  overflow:hidden !important;
  background:rgba(132,108,72,.13) !important;
}
/* build798 used a single logo watermark behind the cells. Remove it:
   every CLOSED cell now owns the corresponding logo fragment itself. */
#noah-piece-overlay .noah-puzzle-grid::before{
  content:none !important;
  display:none !important;
}

#noah-piece-overlay .noah-puzzle-piece{
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background-repeat:no-repeat !important;
  background-size:300% 300% !important;
  background-color:#faf8f3 !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform-origin:center center !important;
}

/* CLOSED / back side: one ninth of the ZERAPHIA logo. */
#noah-piece-overlay .noah-puzzle-piece.locked{
  background-image:url("../images/noah_logo_puzzle.webp?v=799") !important;
  opacity:1 !important;
  filter:none !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::before,
#noah-piece-overlay .noah-puzzle-piece.locked::after{
  content:none !important;
  display:none !important;
}

/* OPEN / front side: the exact same ninth of noah.webp. */
#noah-piece-overlay .noah-puzzle-piece.open{
  background-image:url("../images/noah.webp?v=799") !important;
  opacity:1 !important;
  filter:none !important;
  animation:noahPieceTurn799 .62s cubic-bezier(.22,.72,.18,1) both !important;
}
#noah-piece-overlay .noah-puzzle-piece.open::before,
#noah-piece-overlay .noah-puzzle-piece.open::after{
  content:none !important;
  display:none !important;
}
@keyframes noahPieceTurn799{
  0%{transform:perspective(600px) rotateY(88deg);filter:brightness(1.8);}
  58%{transform:perspective(600px) rotateY(-5deg);filter:brightness(1.08);}
  100%{transform:perspective(600px) rotateY(0deg);filter:brightness(1);}
}

#noah-piece-overlay .noah-piece-note{
  margin:9px auto 0 !important;
}

/* Keep the action physically attached to the puzzle instead of the viewport bottom. */
#noah-piece-overlay .noah-piece-actions{
  position:relative !important;
  inset:auto !important;
  float:none !important;
  flex:none !important;
  width:min(calc(100vw - 96px),230px) !important;
  margin:13px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:center !important;
}
#noah-piece-overlay .noah-piece-actions::before{
  content:none !important;
  display:none !important;
}
#noah-piece-overlay .noah-piece-challenge{
  width:100% !important;
  height:43px !important;
  min-height:43px !important;
  padding:0 12px !important;
  border:1px solid rgba(158,124,67,.31) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(255,254,250,.98),rgba(247,241,230,.93)) !important;
  color:#654c2c !important;
  box-shadow:0 4px 13px rgba(79,58,29,.035),inset 0 1px 0 rgba(255,255,255,.94) !important;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
#noah-piece-overlay .noah-piece-challenge:disabled{
  border-color:rgba(145,123,90,.22) !important;
  background:rgba(252,249,243,.90) !important;
  color:rgba(94,75,50,.48) !important;
  box-shadow:none !important;
  opacity:1 !important;
}
#noah-piece-overlay .noah-piece-ticket-status{
  display:block !important;
  margin:7px 0 0 !important;
  font-size:7.5px !important;
  line-height:1.3 !important;
  letter-spacing:.08em !important;
  color:rgba(102,82,56,.50) !important;
}
#noah-piece-overlay .noah-piece-ticket-status b{
  margin:0 2px !important;
  color:#71572f !important;
  font-size:10px !important;
}

@media(max-height:700px){
  #noah-piece-overlay .noah-piece-head{
    flex-basis:56px !important;
    min-height:56px !important;
  }
  #noah-piece-overlay .noah-piece-body{
    padding-top:7px !important;
  }
  #noah-piece-overlay .noah-puzzle-frame{
    width:min(calc(100vw - 62px),276px) !important;
  }
  #noah-piece-overlay .noah-piece-actions{
    width:min(calc(100vw - 112px),218px) !important;
    margin-top:10px !important;
  }
  #noah-piece-overlay .noah-piece-challenge{
    height:41px !important;
    min-height:41px !important;
  }
  #noah-piece-overlay .noah-piece-ticket-status{
    margin-top:5px !important;
  }
}

/* ============================================================
   build800 NOAH / ONE LOGO, NINE WINDOWS
   The back side is ONE continuous ZERAPHIA logo image across the whole board.
   Locked cells are transparent windows over that single image.
   Open cells replace only their own 1/9 with the matching noah.webp fragment.
   ============================================================ */
#noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
  isolation:isolate !important;
  gap:0 !important;
  background-color:#faf8f3 !important;
  background-image:url("../images/noah_logo_puzzle.webp?v=800") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
}
#noah-piece-overlay .noah-puzzle-grid::before{
  content:none !important;
  display:none !important;
}

#noah-piece-overlay .noah-puzzle-piece{
  z-index:1 !important;
  box-sizing:border-box !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  box-shadow:inset 0 0 0 .5px rgba(132,108,72,.13) !important;
}

/* CLOSED: no individual logo image. The one large logo lives on the grid itself. */
#noah-piece-overlay .noah-puzzle-piece.locked{
  background-image:none !important;
  background-color:transparent !important;
  filter:none !important;
  opacity:1 !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::before,
#noah-piece-overlay .noah-puzzle-piece.locked::after{
  content:none !important;
  display:none !important;
}

/* OPEN: reveal the corresponding one ninth of noah.webp over the logo. */
#noah-piece-overlay .noah-puzzle-piece.open{
  background-image:url("../images/noah.webp?v=800") !important;
  background-size:300% 300% !important;
  background-repeat:no-repeat !important;
  background-color:#faf8f3 !important;
  filter:none !important;
  opacity:1 !important;
  animation:noahPieceTurn800 .62s cubic-bezier(.22,.72,.18,1) both !important;
}
#noah-piece-overlay .noah-puzzle-piece.open::before,
#noah-piece-overlay .noah-puzzle-piece.open::after{
  content:none !important;
  display:none !important;
}

/* Explicit fragment coordinates so later/global CSS can never center every tile. */
#noah-piece-overlay .noah-puzzle-piece:nth-child(1){background-position:0% 0% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(2){background-position:50% 0% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(3){background-position:100% 0% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(4){background-position:0% 50% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(5){background-position:50% 50% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(6){background-position:100% 50% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(7){background-position:0% 100% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(8){background-position:50% 100% !important;}
#noah-piece-overlay .noah-puzzle-piece:nth-child(9){background-position:100% 100% !important;}

@keyframes noahPieceTurn800{
  0%{transform:perspective(620px) rotateY(88deg);filter:brightness(1.65);}
  58%{transform:perspective(620px) rotateY(-4deg);filter:brightness(1.06);}
  100%{transform:perspective(620px) rotateY(0deg);filter:brightness(1);}
}

/* ============================================================
   build801 NOAH / QUIET CONTRAST FOR NOTE + ACTION
   Keep the pale, premium paper language but restore readability,
   especially when the challenge button is disabled at 0 tickets.
   ============================================================ */
#noah-piece-overlay .noah-piece-note{
  margin:10px auto 0 !important;
  max-width:300px !important;
  color:rgba(83,65,43,.70) !important;
  font-size:8.5px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:.045em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.70) !important;
}

#noah-piece-overlay .noah-piece-actions{
  width:min(calc(100vw - 92px),236px) !important;
  margin:12px auto 0 !important;
}

#noah-piece-overlay .noah-piece-challenge{
  height:44px !important;
  min-height:44px !important;
  border:1px solid rgba(148,109,50,.45) !important;
  background:linear-gradient(180deg,rgba(255,253,247,.99),rgba(246,238,224,.98)) !important;
  color:#5c4324 !important;
  box-shadow:
    0 4px 12px rgba(74,53,24,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  letter-spacing:.10em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.68) !important;
}
#noah-piece-overlay .noah-piece-challenge:active:not(:disabled){
  transform:translateY(1px) !important;
  background:linear-gradient(180deg,rgba(249,243,232,.99),rgba(241,230,211,.98)) !important;
}

/* Disabled means unavailable, not illegible. */
#noah-piece-overlay .noah-piece-challenge:disabled{
  border-color:rgba(145,112,61,.34) !important;
  background:linear-gradient(180deg,rgba(252,249,242,.98),rgba(245,238,226,.96)) !important;
  color:rgba(83,64,39,.68) !important;
  box-shadow:
    0 3px 10px rgba(70,50,24,.035),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  opacity:1 !important;
}

#noah-piece-overlay .noah-piece-ticket-status{
  margin:7px 0 0 !important;
  color:rgba(84,66,43,.67) !important;
  font-size:8.2px !important;
  line-height:1.35 !important;
  letter-spacing:.07em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}
#noah-piece-overlay .noah-piece-ticket-status b{
  color:#654820 !important;
  font-size:10.5px !important;
  font-weight:500 !important;
}

@media(max-height:700px){
  #noah-piece-overlay .noah-piece-note{
    margin-top:8px !important;
    font-size:8.2px !important;
  }
  #noah-piece-overlay .noah-piece-actions{
    width:min(calc(100vw - 104px),226px) !important;
    margin-top:10px !important;
  }
  #noah-piece-overlay .noah-piece-challenge{
    height:42px !important;
    min-height:42px !important;
    font-size:11px !important;
  }
  #noah-piece-overlay .noah-piece-ticket-status{
    margin-top:5px !important;
    font-size:8px !important;
  }
}

/* =========================================================
   build813: Shinju growth stage label integration
   - move growth stage text below EXP gauge
   - remove framed badge treatment
   - replace it with a soft white haze
   ========================================================= */
#shinju-overlay .shinju-hero-info{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

#shinju-overlay .shinju-progress-box{
  order:1 !important;
  margin-top:0 !important;
}

#shinju-overlay .shinju-stage{
  order:2 !important;
  position:relative !important;
  align-self:center !important;
  width:auto !important;
  min-width:0 !important;
  margin:7px auto 0 !important;
  padding:4px 30px 5px !important;
  border:0 !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.68) 34%,
      rgba(255,253,246,.40) 58%,
      rgba(255,255,255,0) 82%) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(103,82,49,.88) !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:.12em !important;
  text-align:center !important;
  text-shadow:
    0 1px 7px rgba(255,255,255,.96),
    0 0 12px rgba(255,255,255,.76) !important;
}

@media (max-height:700px){
  #shinju-overlay .shinju-stage{
    margin-top:5px !important;
    padding-top:3px !important;
    padding-bottom:4px !important;
  }
}


/* =========================================================
   build829 CLOSE BUTTON — frame removal
   お知らせ / キャラ詳細レベルアップの × はタップ領域を維持しつつ、
   四角・丸のフレーム、背景、影を表示しない。
   ========================================================= */
#notice-modal .notice-panel .notice-close,
#notice-modal .notice-panel .notice-close:active{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#character-levelup-modal .modal-close-btn,
#character-levelup-modal .modal-close-btn:active{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* =========================================================
   build830 LIMIT BREAK — SHARP / QUIET LUXURY
   角丸・楕円を廃止。細い罫線と余白だけで階層を作る。
   素材アイコンそのものの形状は変更しない。
   ========================================================= */
#limitbreak-modal .modal,
#limitbreak-modal .modal-inner,
#limitbreak-modal .lb-recipe-box,
#limitbreak-modal .lb-bonus-box,
#limitbreak-modal .lb-bonus-row,
#limitbreak-modal .lb-material-card,
#limitbreak-modal .lb-lack-box,
#limitbreak-modal .lb-vessel-choice,
#limitbreak-modal .lb-execute-btn,
#limitbreak-modal .lb-execute-bulk-btn,
#limitbreak-modal .lb-execute-single-btn,
#limitbreak-modal .lb-bonus-state,
#limitbreak-modal button{
  border-radius:0 !important;
}

#limitbreak-modal .modal{
  background:linear-gradient(180deg,rgba(255,254,250,.995),rgba(248,245,237,.99)) !important;
  border:1px solid rgba(139,112,70,.26) !important;
  box-shadow:0 18px 46px rgba(28,24,18,.20) !important;
}

#limitbreak-modal .modal-inner{
  position:relative !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,0) 24%),
    transparent !important;
}

#limitbreak-modal .modal h2{
  color:#3d3932 !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-shadow:none !important;
}

#limitbreak-modal .lb-modal-desc{
  color:rgba(73,69,62,.58) !important;
  letter-spacing:.035em !important;
}

/* 必要素材：カードではなく、上下の細線で区切る */
#limitbreak-modal .lb-recipe-box{
  border:0 !important;
  border-top:1px solid rgba(141,116,77,.22) !important;
  border-bottom:1px solid rgba(141,116,77,.22) !important;
  background:rgba(255,255,255,.28) !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-recipe-title{
  color:#7b6440 !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:600 !important;
  letter-spacing:.13em !important;
}

#limitbreak-modal .lb-recipe-row{
  border-top:1px solid rgba(92,83,69,.075) !important;
}

#limitbreak-modal .lb-recipe-row:first-of-type{
  border-top:0 !important;
}

#limitbreak-modal .lb-recipe-name,
#limitbreak-modal .lb-recipe-count,
#limitbreak-modal .lb-recipe-owned{
  color:#514d46 !important;
  text-shadow:none !important;
}

/* 効果一覧：外枠を直線化し、選択中だけ左の金線で示す */
#limitbreak-modal .lb-bonus-box{
  border:0 !important;
  border-top:1px solid rgba(141,116,77,.22) !important;
  border-bottom:1px solid rgba(141,116,77,.22) !important;
  background:rgba(255,255,255,.20) !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-bonus-box-title{
  color:#826a43 !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
}

#limitbreak-modal .lb-bonus-row{
  border:0 !important;
  border-top:1px solid rgba(86,78,66,.09) !important;
  background:transparent !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-bonus-row:first-of-type{
  border-top:0 !important;
}

#limitbreak-modal .lb-bonus-row.next{
  border:0 !important;
  border-top:1px solid rgba(166,131,70,.28) !important;
  border-bottom:1px solid rgba(166,131,70,.28) !important;
  border-left:2px solid rgba(159,117,46,.72) !important;
  background:linear-gradient(90deg,rgba(201,166,102,.095),rgba(255,255,255,.12) 58%,transparent) !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-bonus-level{
  color:#736f68 !important;
  font-family:"Cinzel","Noto Serif JP",serif !important;
  font-weight:500 !important;
}

#limitbreak-modal .lb-bonus-title{
  color:#3f3b35 !important;
  font-weight:600 !important;
}

#limitbreak-modal .lb-bonus-summary{
  color:#6f6a61 !important;
}

/* 「次回解放」「未解放」：ピル廃止。縦罫線 + 文字のみ */
#limitbreak-modal .lb-bonus-state,
#limitbreak-modal .lb-bonus-row.unlocked .lb-bonus-state,
#limitbreak-modal .lb-bonus-row.next .lb-bonus-state{
  min-width:54px !important;
  min-height:0 !important;
  padding:2px 0 2px 8px !important;
  border:0 !important;
  border-left:1px solid rgba(104,96,83,.18) !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#817b72 !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;
}

#limitbreak-modal .lb-bonus-row.unlocked .lb-bonus-state{
  color:#596f73 !important;
  border-left-color:rgba(75,112,116,.22) !important;
}

#limitbreak-modal .lb-bonus-row.next .lb-bonus-state{
  color:#946d2c !important;
  border-left-color:rgba(159,117,46,.34) !important;
}

#limitbreak-modal .lb-bonus-row.next .lb-bonus-level{
  color:#946d2c !important;
}

/* 実行ボタン：楕円感をなくし、紙面上の横長ボタンへ */
#limitbreak-modal .lb-execute-btn,
#limitbreak-modal .lb-execute-bulk-btn,
#limitbreak-modal .lb-execute-single-btn{
  border:1px solid rgba(161,126,64,.34) !important;
  background:linear-gradient(180deg,rgba(250,246,236,.98),rgba(243,237,223,.98)) !important;
  color:#6d5630 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82) !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:500 !important;
  letter-spacing:.06em !important;
}

#limitbreak-modal .lb-execute-btn:active,
#limitbreak-modal .lb-execute-bulk-btn:active,
#limitbreak-modal .lb-execute-single-btn:active{
  background:#eee7d8 !important;
  box-shadow:none !important;
}

#limitbreak-modal .btn-cancel-txt{
  border:0 !important;
  border-top:1px solid rgba(93,84,70,.13) !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#5b5750 !important;
  font-family:"Noto Serif JP",serif !important;
  font-weight:500 !important;
  letter-spacing:.05em !important;
}

/* 不足表示 / 器選択も同じ直線ルール */
#limitbreak-modal .lb-lack-box{
  border:1px solid rgba(146,82,75,.20) !important;
  background:rgba(151,74,65,.035) !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-vessel-choice{
  border:0 !important;
  border-top:1px solid rgba(91,82,69,.10) !important;
  border-bottom:1px solid rgba(91,82,69,.10) !important;
  background:transparent !important;
  box-shadow:none !important;
}

#limitbreak-modal .lb-vessel-choice.selected{
  border-color:rgba(160,124,61,.36) !important;
  border-left:2px solid rgba(160,124,61,.68) !important;
  background:rgba(195,157,86,.06) !important;
  box-shadow:none !important;
}

/* 確認・完了も同フローなので丸みを残さない */
#limitbreak-confirm-modal .modal,
#limitbreak-confirm-modal .modal-inner,
#limitbreak-confirm-modal .lb-next-bonus,
#limitbreak-confirm-modal .lb-confirm-consume-box,
#limitbreak-confirm-modal .lb-confirm-level,
#limitbreak-confirm-modal .btn-pay,
#limitbreak-confirm-modal .btn-cancel-txt,
#limitbreak-complete-modal .modal,
#limitbreak-complete-modal .modal-inner,
#limitbreak-complete-modal .btn-pay{
  border-radius:0 !important;
}


/* =========================================================
   build831 GACHA PROVIDE-RATE CLOSE BUTTON
   提供割合モーダル右上×のフレームを撤廃。
   文字の×だけを残し、上品で軽い見た目へ。タップ領域は維持。
   ========================================================= */
#gacha-pool-detail-modal .gacha-pool-detail-close,
#gacha-pool-detail-modal .gacha-pool-detail-close:active,
#gacha-pool-detail-modal .gacha-pool-detail-close:hover,
#gacha-pool-detail-modal .gacha-pool-detail-close:focus-visible{
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  color:#775b34 !important;
  font-size:25px !important;
  line-height:34px !important;
  padding:0 !important;
}


/* =========================================================
   build832 GACHA POOL CHARACTER DETAIL CLOSE
   提供割合から開いたキャラ詳細だけ、左上「＜戻る」を廃止。
   右上にフレーム無しの×を置き、閉じると提供割合一覧へ戻る。
   ========================================================= */
#detail-modal.is-gacha-pool-preview > .detail-modal-back-btn{
  top:calc(6vh + 10px) !important;
  left:auto !important;
  right:max(
    30px,
    calc((100vw - min(400px, calc(100vw - 36px))) / 2 + 10px)
  ) !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  color:#6f5a39 !important;
  font-size:0 !important;
  line-height:40px !important;
  text-align:center !important;
  opacity:.90 !important;
}
#detail-modal.is-gacha-pool-preview > .detail-modal-back-btn::before{
  content:"×" !important;
  display:block !important;
  width:40px !important;
  height:40px !important;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:22px !important;
  font-weight:400 !important;
  line-height:38px !important;
  letter-spacing:0 !important;
  color:#6f5a39 !important;
  text-shadow:none !important;
}
#detail-modal.is-gacha-pool-preview > .detail-modal-back-btn:active{
  transform:none !important;
  opacity:.52 !important;
}
@media (max-height:700px){
  #detail-modal.is-gacha-pool-preview > .detail-modal-back-btn{
    top:calc(4vh + 10px) !important;
  }
}

/* =========================================================
   build833 STORY STAGE SELECT — ELEMENT PREVIEW
   ステージ選択カードに主な出現属性(上位2)と、BOSS属性を表示。
   属性アイコンはtype_XXXX.webpを原色のまま使用する。
   ========================================================= */
#stage-select-modal .ss-story-shooting-card{
  min-height:92px !important;
}
#stage-select-modal .ss-stage-elements{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:3px;
  min-width:0;
}
#stage-select-modal .ss-stage-element-line{
  display:flex;
  align-items:center;
  min-height:20px;
  gap:5px;
  white-space:nowrap;
}
#stage-select-modal .ss-stage-element-label{
  flex:0 0 auto;
  font-family:"Noto Serif JP",serif;
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.055em;
  color:rgba(98,82,59,.62);
}
#stage-select-modal .ss-stage-element-icons{
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-width:0;
}
#stage-select-modal .ss-stage-element-icon{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 20px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
#stage-select-modal .ss-stage-boss-element-line .ss-stage-element-label{
  color:rgba(94,69,43,.76);
}
#stage-select-modal .ss-stage-boss-element-line .ss-stage-element-icon{
  width:21px;
  height:21px;
  flex-basis:21px;
}
@media (max-width:390px){
  #stage-select-modal .ss-story-shooting-card{
    min-height:96px !important;
  }
  #stage-select-modal .ss-stage-element-label{
    font-size:8px;
    letter-spacing:.035em;
  }
  #stage-select-modal .ss-stage-element-icon{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
  #stage-select-modal .ss-stage-boss-element-line .ss-stage-element-icon{
    width:19px;
    height:19px;
    flex-basis:19px;
  }
}

/* =========================================================
   build834 STAGE SELECT — DEFAULT ELEMENT PREVIEW COMPONENT
   STORY / DAILY / SPECIAL EVENT 共通のステージ属性表示。
   基本は上位2属性。属性限定バリア対象属性は必ず表示する。
   ========================================================= */
.shooting-stage-elements{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:3px;
  min-width:0;
}
.shooting-stage-element-line{
  display:flex;
  align-items:center;
  min-height:20px;
  gap:5px;
  white-space:nowrap;
}
.shooting-stage-element-label{
  flex:0 0 auto;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.055em;
  color:rgba(98,82,59,.62);
}
.shooting-stage-element-icons{
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-width:0;
}
.shooting-stage-element-icon{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 20px;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.shooting-stage-boss-element-line .shooting-stage-element-label{
  color:rgba(94,69,43,.76);
}
.shooting-stage-boss-element-line .shooting-stage-element-icon{
  width:21px;
  height:21px;
  flex-basis:21px;
}
@media (max-width:390px){
  .shooting-stage-element-label{
    font-size:8px;
    letter-spacing:.035em;
  }
  .shooting-stage-element-icon{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
  .shooting-stage-boss-element-line .shooting-stage-element-icon{
    width:19px;
    height:19px;
    flex-basis:19px;
  }
}

/* =========================================================
   build928 LIMIT BREAK — SHORTAGE LIST SCROLL FIX
   不足一覧が親領域にクリップされるケースを修正。
   必要素材・効果一覧は維持し、不足欄だけ残り高を使ってスクロールする。
   ========================================================= */
#limitbreak-modal .lb-material-list{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#limitbreak-modal .lb-recipe-box,
#limitbreak-modal .lb-bonus-box{
  flex:0 0 auto !important;
}

#limitbreak-modal .lb-lack-box{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#limitbreak-modal .lb-lack-title{
  flex:0 0 auto !important;
}

#limitbreak-modal .lb-lack-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}

#limitbreak-modal .lb-lack-row{
  flex:0 0 auto !important;
}


/* ============================================================
   build956 NOAH / CENTERED PUZZLE LOGO + CUSTOM IMAGE
   - locked state shows one centered logo across the whole 3x3 board
   - preserve logo aspect ratio
   - open pieces reveal noah.webp in 9 slices
   - use the user-provided puzzle logo asset
   ============================================================ */
#noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
}

#noah-piece-overlay .noah-puzzle-grid::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("../images/noah_puzzle_logo.webp?v=957") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:84% auto !important;
  opacity:1 !important;
}

#noah-piece-overlay .noah-puzzle-piece{
  position:relative !important;
  z-index:1 !important;
}

#noah-piece-overlay .noah-puzzle-piece.locked{
  background-image:none !important;
  background-color:transparent !important;
  filter:none !important;
}

#noah-piece-overlay .noah-puzzle-piece.locked::before,
#noah-piece-overlay .noah-puzzle-piece.locked::after{
  content:none !important;
  display:none !important;
}

#noah-piece-overlay .noah-puzzle-piece.open{
  background-image:url("../images/noah.webp?v=957") !important;
  background-repeat:no-repeat !important;
  background-size:300% 300% !important;
  background-color:#f8f6f1 !important;
}


/* ============================================================
   build958 NOAH / TRUE 3x3 LOGO BACK + THIN FRAME
   - the logo back is sliced by the nine actual cells
   - original aspect ratio is preserved; the logo is centered
   - remove the thick nested frame and make the 3x3 seams visible
   ============================================================ */
#noah-piece-overlay .noah-puzzle-frame{
  width:min(calc(100vw - 54px),286px) !important;
  aspect-ratio:1 / 1 !important;
  padding:2px !important;
  margin:0 auto !important;
  border:1px solid rgba(145,116,73,.18) !important;
  background:#f4f0e8 !important;
  box-shadow:none !important;
}

#noah-piece-overlay .noah-puzzle-frame::before{
  content:none !important;
  display:none !important;
}

#noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:repeat(3,minmax(0,1fr)) !important;
  gap:2px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  background:rgba(147,118,76,.18) !important;
}

#noah-piece-overlay .noah-puzzle-grid::before{
  content:none !important;
  display:none !important;
}

#noah-piece-overlay .noah-puzzle-piece,
#noah-piece-overlay .noah-puzzle-piece.locked,
#noah-piece-overlay .noah-puzzle-piece.open{
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
  background-color:#fff !important;
}

/* Locked = back side. Each cell clips one ninth of the same full-size logo canvas. */
#noah-piece-overlay .noah-puzzle-piece.locked{
  background-image:none !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  width:300% !important;
  height:300% !important;
  pointer-events:none !important;
  background-image:url("../images/noah_puzzle_logo.webp?v=958") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% auto !important;
  opacity:1 !important;
}
#noah-piece-overlay .noah-puzzle-piece.locked::after{
  content:none !important;
  display:none !important;
}

/* column offsets */
#noah-piece-overlay .noah-puzzle-piece:nth-child(3n+1).locked::before{ left:0 !important; }
#noah-piece-overlay .noah-puzzle-piece:nth-child(3n+2).locked::before{ left:-100% !important; }
#noah-piece-overlay .noah-puzzle-piece:nth-child(3n).locked::before{ left:-200% !important; }

/* row offsets */
#noah-piece-overlay .noah-puzzle-piece:nth-child(-n+3).locked::before{ top:0 !important; }
#noah-piece-overlay .noah-puzzle-piece:nth-child(n+4):nth-child(-n+6).locked::before{ top:-100% !important; }
#noah-piece-overlay .noah-puzzle-piece:nth-child(n+7).locked::before{ top:-200% !important; }

/* Open = front side / Noah. Keep the existing inline 0/50/100% background positions. */
#noah-piece-overlay .noah-puzzle-piece.open{
  background-image:url("../images/noah.webp?v=958") !important;
  background-repeat:no-repeat !important;
  background-size:300% 300% !important;
  animation:noahPieceTurn799 .62s cubic-bezier(.22,.72,.18,1) both !important;
}
#noah-piece-overlay .noah-puzzle-piece.open::before,
#noah-piece-overlay .noah-puzzle-piece.open::after{
  content:none !important;
  display:none !important;
}

@media(max-height:700px){
  #noah-piece-overlay .noah-puzzle-frame{
    width:min(calc(100vw - 60px),278px) !important;
  }
}

/* =========================================================
   build970 GACHA CTA MOTION — final cascade override
   - page arrows: move outward once per second without touching fixed transform
   - probability CTA: lighter type + rightward nudge
   ========================================================= */
html body #screen-summon .summon-center-title-more,
html body #screen-summon .summon-center-title-more-label{
  font-weight:400 !important;
  letter-spacing:.045em !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html body #screen-summon .summon-center-title-more{
  font-size:10px !important;
}

html body #screen-summon .summon-center-title-more-arrow{
  font-weight:400 !important;
  opacity:1 !important;
  left:0;
  will-change:left;
  animation:gacha970RateArrowNudge 1s ease-in-out infinite !important;
}

html body #screen-summon .summon-banner-arrow-prev{
  margin-left:0;
  will-change:margin-left;
  animation:gacha970PagerLeft 1s ease-in-out infinite !important;
}

html body #screen-summon .summon-banner-arrow-next{
  margin-right:0;
  will-change:margin-right;
  animation:gacha970PagerRight 1s ease-in-out infinite !important;
}

@keyframes gacha970PagerLeft{
  0%,64%,100%{margin-left:0;}
  78%{margin-left:-9px;}
  90%{margin-left:-3px;}
}

@keyframes gacha970PagerRight{
  0%,64%,100%{margin-right:0;}
  78%{margin-right:-9px;}
  90%{margin-right:-3px;}
}

@keyframes gacha970RateArrowNudge{
  0%,64%,100%{left:0;}
  78%{left:8px;}
  90%{left:3px;}
}

@media (prefers-reduced-motion:reduce){
  html body #screen-summon .summon-banner-arrow-prev,
  html body #screen-summon .summon-banner-arrow-next,
  html body #screen-summon .summon-center-title-more-arrow{
    animation:none !important;
  }
}

/* =========================================================
   build979 GACHA conversion modal — fixed frame / list-only scroll
   - 外枠・見出し・注記・OKボタンは固定
   - 変換結果一覧だけ縦スクロール
   ========================================================= */
#gacha-conversion-modal > .gacha-conversion-modal-inner{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#gacha-conversion-modal .gacha-conversion-kicker,
#gacha-conversion-modal h2,
#gacha-conversion-modal .gacha-conversion-note,
#gacha-conversion-modal .gacha-conversion-ok{
  flex:0 0 auto !important;
}

#gacha-conversion-modal .gacha-conversion-list{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding-right:3px !important;
}

/* 一覧だけスクロールしても末尾のカードが窮屈にならない */
#gacha-conversion-modal .gacha-conversion-list::after{
  content:"" !important;
  display:block !important;
  flex:0 0 1px !important;
  height:1px !important;
}


/* ============================================================
   build1046 CHARACTER DETAIL — ULT ELEMENT ICON ONLY
   ULT名の直後に属性アイコンだけを表示。
   ============================================================ */
.detail-shooting-ult-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
}

.detail-shooting-ult-head > strong{
  flex:0 1 auto;
  min-width:0;
}

.detail-shooting-ult-head .detail-ult-element-icon{
  display:block;
  flex:0 0 auto;
  width:18px;
  height:18px;
  object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 1px 2px rgba(48,37,62,.15));
}


/* build1302: pickup trial buttons - preserve existing centered action position.
   Reserve height for two action rows so the pity counter/title never overlap. */
#screen-summon:has(#summon-detail-btns > .gacha-trial-entry){
  --gacha-actions-h:104px;
}
#screen-summon #summon-detail-btns:has(> .gacha-trial-entry){
  left:50% !important;
  right:auto !important;
  bottom:var(--gacha-actions-bottom) !important;
  transform:translateX(-50%) !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  width:min(86vw,350px) !important;
  visibility:visible !important;
  opacity:1 !important;
}
#screen-summon #summon-detail-btns > .gacha-trial-entry{
  grid-column:1/-1 !important;
  width:calc(50% - 4px) !important;
  min-height:40px !important;
  justify-self:center !important;
}


/* =========================================================
   build1339 — 残響の塔：ホーム入口を設置し、
   塔専用の10層プレビューを表示。階層進捗は未実装。
   ========================================================= */
#screen-resonance-tower.resonance-tower-screen{background:#f6f3ed;color:#51483e;font-family:"Noto Serif JP",serif}
#screen-resonance-tower .resonance-tower-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:18px 17px calc(125px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
#screen-resonance-tower .resonance-tower-hero{position:relative;overflow:hidden;text-align:center;padding:25px 10px 24px;border:1px solid rgba(131,113,82,.17);background:radial-gradient(ellipse at 50% 10%,rgba(255,255,255,.97),rgba(243,240,231,.91) 62%,rgba(223,215,197,.50));}
#screen-resonance-tower .resonance-tower-hero:before{content:"";position:absolute;left:50%;top:33px;width:116px;height:152px;transform:translateX(-50%);border:1px solid rgba(157,131,85,.20);clip-path:polygon(50% 0%,80% 18%,80% 100%,20% 100%,20% 18%);pointer-events:none}
#screen-resonance-tower .resonance-tower-kicker{font:9px/1.5 "Cinzel",serif;letter-spacing:.23em;color:#988268}
#screen-resonance-tower .resonance-tower-crest{font:32px/1.25 "Cinzel",serif;color:#a88d64;margin:15px auto 6px;opacity:.85}
#screen-resonance-tower .resonance-tower-hero h2{font-size:25px;font-weight:500;letter-spacing:.18em;margin:6px 0 10px;color:#514337}
#screen-resonance-tower .resonance-tower-hero p{font-size:11px;letter-spacing:.075em;line-height:1.7;margin:0;color:#87755f}
#screen-resonance-tower .resonance-tower-meta{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:17px}
#screen-resonance-tower .resonance-tower-meta span{font-size:10px;letter-spacing:.04em;padding:5px 8px;border:1px solid #dcd2c2;background:rgba(255,255,255,.5);color:#776550}
#screen-resonance-tower .resonance-tower-rules{padding:16px 3px 14px;border-bottom:1px solid #dfd6c6}
#screen-resonance-tower .resonance-tower-rules h3,#screen-resonance-tower .resonance-tower-section-head h3{margin:0 0 7px;font-size:14px;font-weight:600;letter-spacing:.1em;color:#554534}
#screen-resonance-tower .resonance-tower-rules p{margin:5px 0;font-size:11px;line-height:1.85;color:#756856}
#screen-resonance-tower .resonance-tower-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:24px 0 12px}
#screen-resonance-tower .resonance-tower-section-head h3{margin:0}
#screen-resonance-tower .resonance-tower-section-head span{font-size:10px;color:#9d896d}
#screen-resonance-tower .resonance-tower-floor-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#screen-resonance-tower .resonance-tower-floor{appearance:none;display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid #ded5c5;background:linear-gradient(160deg,#fffdfa,#f1eee6);padding:13px 10px;border-radius:0;min-height:73px;box-shadow:0 2px 6px rgba(77,61,38,.035);color:#665746;font-family:inherit;cursor:pointer;}
#screen-resonance-tower .resonance-tower-floor:focus-visible{outline:2px solid #a78c61;outline-offset:2px}
#screen-resonance-tower .resonance-tower-floor.is-selected{border-color:#b79d72;background:#fffaf0;box-shadow:inset 0 0 0 1px #e2d5b9}
#screen-resonance-tower .resonance-tower-floor.is-trial{border-color:#cfba9e;background:linear-gradient(160deg,#f8f0e5,#f2e8dc)}
#screen-resonance-tower .resonance-tower-floor.is-final{border-color:#b49483;background:linear-gradient(160deg,#f3e9e6,#e9dacf)}
#screen-resonance-tower .resonance-tower-floor-no{font:19px/1 "Cinzel",serif;color:#95805e;min-width:36px;flex:0 0 36px}
#screen-resonance-tower .resonance-tower-floor.is-trial .resonance-tower-floor-no{color:#a7775c}
#screen-resonance-tower .resonance-tower-floor.is-final .resonance-tower-floor-no{color:#8f5d55}
#screen-resonance-tower .resonance-tower-floor-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
#screen-resonance-tower .resonance-tower-floor-name{font-size:12px;font-weight:600;letter-spacing:.08em;white-space:nowrap}
#screen-resonance-tower .resonance-tower-floor-label{font-size:10px;color:#9f8a70}
#screen-resonance-tower .resonance-tower-detail{margin-top:17px;padding:19px 17px 20px;background:#fcfaf6;border:1px solid #d9cfbf;text-align:center}
#screen-resonance-tower .resonance-tower-detail-no{font:18px "Cinzel",serif;letter-spacing:.12em;color:#998367}
#screen-resonance-tower .resonance-tower-detail h3{font-size:17px;font-weight:500;letter-spacing:.12em;margin:8px 0;color:#64513c}
#screen-resonance-tower .resonance-tower-detail p{font-size:11px;line-height:1.8;color:#7e6d58;margin:12px 0}
#screen-resonance-tower .resonance-tower-detail button{font:12px "Noto Serif JP",serif;border:1px solid #c8b69a;background:#eae3d7;color:#9a8d79;min-width:175px;padding:12px;border-radius:0;opacity:1;cursor:not-allowed}
#screen-resonance-tower .resonance-tower-dev-note{font-size:10px!important;color:#a0927e!important;margin-top:15px!important}
@media(max-width:365px){#screen-resonance-tower .resonance-tower-scroll{padding-left:12px;padding-right:12px}#screen-resonance-tower .resonance-tower-floor{gap:6px;padding:12px 7px}#screen-resonance-tower .resonance-tower-floor-no{font-size:16px;min-width:31px;flex-basis:31px}#screen-resonance-tower .resonance-tower-floor-name{font-size:11px}}


/* ============================================================
   build1442: 楽園 -ノア- コンテンツ画面（欠片パズル）リニューアル
   - 背景: images/bg_noah.webp
   - 金の装飾枠＋大理石タイルの3×3パズル、鍵アイコン
   - 長円形の金縁「ノアに挑戦する」ボタン
   DOMは従来の #noah-piece-overlay のまま。CSSのみ。
   ============================================================ */
html body #noah-piece-overlay.noah-piece-overlay{
  --zn-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 3 L57 30 L30 57 L3 30Z' fill='rgba(250,248,244,.85)' stroke='%239c958b' stroke-width='1.6'/%3E%3Cpath d='M30 9 L51 30 L30 51 L9 30Z' fill='none' stroke='%23b9b2a7' stroke-width='.8'/%3E%3Crect x='21' y='27' width='18' height='14' rx='2' fill='%238f887e'/%3E%3Cpath d='M24.5 27 v-4 a5.5 5.5 0 0 1 11 0 v4' fill='none' stroke='%238f887e' stroke-width='2.6'/%3E%3Ccircle cx='30' cy='33' r='2' fill='%23f4f1ec'/%3E%3Crect x='29.2' y='33' width='1.6' height='4.5' fill='%23f4f1ec'/%3E%3C/svg%3E");
  --zn-flourish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c9a35a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 56 V18 Q4 4 18 4 H56'/%3E%3Cpath d='M10 56 V22 Q10 10 22 10 H56' stroke-width='.8'/%3E%3Cpath d='M4 30 Q16 28 18 18 Q28 16 30 4' stroke-width='1.1'/%3E%3C/g%3E%3Cpath d='M18 18 l3 -7 l3 7 l7 3 l-7 3 l-3 7 l-3 -7 l-7 -3z' fill='%23d1ad62'/%3E%3C/svg%3E");
  --zn-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1 L23 17 L39 20 L23 23 L20 39 L17 23 L1 20 L17 17Z' fill='%23c9a35a'/%3E%3Cpath d='M20 9 L21.5 18.5 L31 20 L21.5 21.5 L20 31 L18.5 21.5 L9 20 L18.5 18.5Z' fill='%23f3dfaa' opacity='.9'/%3E%3C/svg%3E");
  --zn-gold:#c9a35a;
  --zn-gold-deep:#9c7634;
  --zn-ink:#3b2e1d;
  background:#f6f1e6 url("../images/bg_noah.webp") center top/cover no-repeat !important;
}
html body #noah-piece-overlay.noah-piece-overlay::before,
html body #noah-piece-overlay.noah-piece-overlay::after{
  content:none !important;
}
html body #noah-piece-overlay.noah-piece-overlay .noah-piece-screen{
  position:relative !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:460px !important;
  height:100% !important;
  margin:0 auto !important;
  padding:max(10px,env(safe-area-inset-top,0px)) 16px max(14px,env(safe-area-inset-bottom,0px)) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:
    radial-gradient(ellipse 85% 34% at 50% 14%,rgba(255,253,246,.78),rgba(255,253,246,0) 75%),
    radial-gradient(ellipse 70% 20% at 50% 78%,rgba(255,253,246,.55),rgba(255,253,246,0) 80%) !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--zn-ink) !important;
}

/* ---------- ヘッダー ---------- */
html body #noah-piece-overlay .noah-piece-head{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:64px !important;
  margin:0 !important;
  padding:6px 0 0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-piece-head::before{
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:22px;
  height:22px;
  transform:translateX(-50%);
  background:var(--zn-star) center/contain no-repeat;
}
html body #noah-piece-overlay .noah-piece-back{
  position:absolute !important;
  left:0 !important;
  top:10px !important;
  width:auto !important;
  height:auto !important;
  padding:6px 4px !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  font:500 15px/1 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.06em !important;
  color:var(--zn-ink) !important;
  text-shadow:0 0 6px rgba(255,255,255,.95),0 0 2px #fff !important;
}
html body #noah-piece-overlay .noah-piece-head-spacer{display:none !important}
html body #noah-piece-overlay .noah-piece-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
  margin:18px 0 0 !important;
}
html body #noah-piece-overlay .noah-piece-title small{
  font:600 10px/1 "Cinzel",serif !important;
  letter-spacing:.3em !important;
  text-indent:.3em !important;
  color:#6e5530 !important;
  text-shadow:0 0 6px #fff !important;
}
html body #noah-piece-overlay .noah-piece-title strong{
  font:600 27px/1.15 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.1em !important;
  color:var(--zn-ink) !important;
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px #fff !important;
}

/* ---------- リード ---------- */
html body #noah-piece-overlay .noah-piece-body{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  flex:1 1 auto !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
}
html body #noah-piece-overlay .noah-piece-lead{
  margin:16px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
  background:none !important;
}
html body #noah-piece-overlay .noah-piece-lead .en{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font:600 9.5px/1 "Cinzel",serif !important;
  letter-spacing:.3em !important;
  color:#6e5530 !important;
  text-shadow:0 0 6px #fff !important;
}
html body #noah-piece-overlay .noah-piece-lead .en::before,
html body #noah-piece-overlay .noah-piece-lead .en::after{
  content:"";
  width:44px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(156,118,52,.8));
}
html body #noah-piece-overlay .noah-piece-lead .en::after{transform:scaleX(-1)}
html body #noah-piece-overlay .noah-piece-lead h2{
  margin:8px 0 0 !important;
  font:600 25px/1.25 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.08em !important;
  color:var(--zn-ink) !important;
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px #fff !important;
}
/* モックに合わせて説明文は出さない（同じ内容は下の注記にある） */
html body #noah-piece-overlay .noah-piece-lead p{display:none !important}

/* ---------- 完成状況 ---------- */
html body #noah-piece-overlay .noah-piece-progress{
  position:relative !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:10px !important;
  margin:2px 0 0 !important;
  padding:12px 60px 0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-piece-progress::before{
  content:"✦";
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  font-size:9px;
  line-height:10px;
  text-align:center;
  color:var(--zn-gold-deep);
}
html body #noah-piece-overlay .noah-piece-progress::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  height:1px;
  background:
    linear-gradient(90deg,transparent,rgba(156,118,52,.75)) left/52px 1px no-repeat,
    linear-gradient(270deg,transparent,rgba(156,118,52,.75)) right/52px 1px no-repeat;
  pointer-events:none;
}
html body #noah-piece-overlay .noah-piece-progress-label{
  font:600 15px/1 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.08em !important;
  color:var(--zn-ink) !important;
  text-shadow:0 0 6px #fff !important;
}
html body #noah-piece-overlay #noah-piece-progress-now{
  font:600 42px/1 "Cinzel","Noto Serif JP",serif !important;
  background:linear-gradient(180deg,#f0d89a 0%,#c99a45 50%,#9c7330 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
html body #noah-piece-overlay .noah-piece-progress > span:last-child{
  font:500 20px/1 "Cinzel",serif !important;
  color:var(--zn-ink) !important;
}

/* ---------- パズル枠 ---------- */
html body #noah-piece-overlay .noah-puzzle-frame{
  position:relative !important;
  box-sizing:border-box !important;
  width:min(82%,318px) !important;
  aspect-ratio:1/1 !important;
  height:auto !important;
  margin:6px auto 0 !important;
  padding:12px !important;
  overflow:visible !important;
  background:rgba(255,253,248,.35) !important;
  border:0 !important;
  border-radius:2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),
    0 0 0 2px var(--zn-gold),
    0 0 0 4px rgba(255,251,238,.9),
    0 0 0 5px rgba(201,163,90,.75),
    0 8px 26px rgba(120,90,40,.22) !important;
}
/* 四隅の唐草（左上の飾りを回転して4隅へ） */
html body #noah-piece-overlay .noah-puzzle-frame::before{
  content:"";
  position:absolute;
  inset:-14px;
  pointer-events:none;
  z-index:3;
  background:
    var(--zn-flourish) 0 0/38px 38px no-repeat,
    var(--zn-flourish) 100% 0/38px 38px no-repeat,
    var(--zn-flourish) 0 100%/38px 38px no-repeat,
    var(--zn-flourish) 100% 100%/38px 38px no-repeat;
  -webkit-mask:none;
}
/* 上下左右中央の星飾り */
html body #noah-piece-overlay .noah-puzzle-frame::after{
  content:"";
  position:absolute;
  inset:-15px;
  pointer-events:none;
  z-index:3;
  background:
    var(--zn-star) 50% 0/26px 26px no-repeat,
    var(--zn-star) 50% 100%/26px 26px no-repeat,
    var(--zn-star) 0 50%/26px 26px no-repeat,
    var(--zn-star) 100% 50%/26px 26px no-repeat;
}
html body #noah-piece-overlay .noah-puzzle-grid{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  grid-template-rows:repeat(3,1fr) !important;
  gap:5px !important;
  width:100% !important;
  height:100% !important;
  background:none !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-puzzle-piece{
  position:relative !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:3px !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 1px rgba(190,180,165,.7),
    0 2px 5px rgba(90,70,40,.14) !important;
}

/* ---- 案A：ロゴ(noah_logo_puzzle.webp)は盤面全体に1枚で敷く ----
   9分割せずに敷くので、マスの境目でロゴの線が切れたりずれたりしない。
   未獲得のマスは細い線で区切るだけ。獲得したマスだけノアの一枚絵で覆う。 */
html body #noah-piece-overlay .noah-puzzle-grid{
  isolation:isolate !important;
  overflow:hidden !important;
  gap:2px !important;
  border-radius:3px !important;
  background:none !important;
}
html body #noah-piece-overlay .noah-puzzle-grid::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(118deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 50%),
    linear-gradient(62deg,rgba(226,221,214,0) 52%,rgba(226,221,214,.45) 58%,rgba(226,221,214,0) 63%),
    linear-gradient(160deg,#fdfcfa,#f3f0eb 55%,#faf8f5) !important;
  opacity:1 !important;
}
html body #noah-piece-overlay .noah-puzzle-grid::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:url("../images/noah_logo_puzzle.webp") center/100% 100% no-repeat !important;
  mix-blend-mode:multiply;
  opacity:.62 !important;
}
/* 9枚そろったらロゴは不要 */
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked))::after{
  content:none !important;
  display:none !important;
}

/* ---- 未獲得：透明なマス（細い区切り線＋淡い光沢）、上下段に鍵 ---- */
html body #noah-piece-overlay .noah-puzzle-piece.locked{
  z-index:1 !important;
  background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 0 0 1px rgba(196,186,170,.6) !important;
}
html body #noah-piece-overlay .noah-puzzle-piece.locked::before{
  content:none !important;
  display:none !important;
}
html body #noah-piece-overlay .noah-puzzle-piece.locked::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  z-index:2 !important;
  display:block !important;
  width:32px !important;
  height:32px !important;
  transform:translate(-50%,-50%) !important;
  background:var(--zn-lock) center/contain no-repeat !important;
  opacity:.9 !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(n+4):nth-child(-n+6).locked::after{
  content:none !important;
  display:none !important;
}

/* ---- 獲得済み：ノアの一枚絵(noah.webp)の同じ位置 ----
   すき間2pxも計算に入れて切り出すので、隣のマスと絵がずれない */
html body #noah-piece-overlay .noah-puzzle-piece.open{
  z-index:1 !important;
  background-image:none !important;
  background-color:#f8f6f1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,226,.5),
    0 0 0 1px rgba(201,163,90,.8) !important;
}
html body #noah-piece-overlay .noah-puzzle-piece.open::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:calc(300% + 4px) !important;
  height:calc(300% + 4px) !important;
  pointer-events:none !important;
  background:url("../images/noah.webp") center/100% 100% no-repeat !important;
  opacity:1 !important;
}
html body #noah-piece-overlay .noah-puzzle-piece.open::after{
  content:none !important;
  display:none !important;
}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(3n+1).open::before{left:0 !important}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(3n+2).open::before{left:calc(-100% - 2px) !important}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(3n).open::before{left:calc(-200% - 4px) !important}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(-n+3).open::before{top:0 !important}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(n+4):nth-child(-n+6).open::before{top:calc(-100% - 2px) !important}
html body #noah-piece-overlay .noah-puzzle-piece:nth-child(n+7).open::before{top:calc(-200% - 4px) !important}

/* 9枚そろったら継ぎ目をなくし、一枚絵として見せる */
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)){
  gap:0 !important;
}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece{
  border-radius:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece.open::before{
  width:300% !important;
  height:300% !important;
}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece:nth-child(3n+2).open::before{left:-100% !important}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece:nth-child(3n).open::before{left:-200% !important}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece:nth-child(n+4):nth-child(-n+6).open::before{top:-100% !important}
html body #noah-piece-overlay .noah-puzzle-grid:not(:has(.noah-puzzle-piece.locked)) .noah-puzzle-piece:nth-child(n+7).open::before{top:-200% !important}

/* ---------- 注記・ボタン ---------- */
html body #noah-piece-overlay .noah-piece-note{
  position:relative !important;
  margin:14px 0 0 !important;
  padding:0 0 14px !important;
  font:500 12.5px/1.5 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  color:var(--zn-ink) !important;
  text-align:center !important;
  text-shadow:0 0 8px #fff,0 0 3px #fff !important;
  background:none !important;
}
html body #noah-piece-overlay .noah-piece-note::after{
  content:"✦";
  position:absolute;
  left:50%;
  bottom:0;
  width:200px;
  transform:translateX(-50%);
  font-size:9px;
  line-height:10px;
  color:var(--zn-gold-deep);
  text-align:center;
  background:
    linear-gradient(90deg,transparent,rgba(156,118,52,.75)) left center/88px 1px no-repeat,
    linear-gradient(270deg,transparent,rgba(156,118,52,.75)) right center/88px 1px no-repeat;
}
html body #noah-piece-overlay .noah-piece-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  margin:6px 0 0 !important;
  padding:6px 0 4px !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-piece-challenge{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:min(84%,300px) !important;
  height:62px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#fffdf7 0%,#f7eedb 60%,#efe1c3 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.95),
    inset 0 0 0 4px rgba(255,251,240,.9),
    inset 0 0 0 5px rgba(201,163,90,.8),
    0 0 0 2px var(--zn-gold),
    0 0 0 4px rgba(255,250,236,.9),
    0 0 0 5px rgba(156,118,52,.7),
    0 6px 18px rgba(120,90,40,.25) !important;
  font:600 21px/1 "Noto Serif JP","Yu Mincho",serif !important;
  letter-spacing:.14em !important;
  text-indent:.14em !important;
  color:var(--zn-ink) !important;
  text-shadow:0 1px 0 #fff !important;
  cursor:pointer;
}
html body #noah-piece-overlay .noah-piece-challenge::before,
html body #noah-piece-overlay .noah-piece-challenge::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  transform:translateY(-50%) !important;
  background:var(--zn-star) center/contain no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #noah-piece-overlay .noah-piece-challenge::before{left:22px !important}
html body #noah-piece-overlay .noah-piece-challenge::after{right:22px !important}
html body #noah-piece-overlay .noah-piece-challenge:active{transform:translateY(1px);filter:brightness(.97)}
html body #noah-piece-overlay .noah-piece-challenge:disabled{filter:grayscale(.6);opacity:.7}
/* 所持チケットはボタンの下に小さく */
html body #noah-piece-overlay .noah-piece-ticket-status{
  display:flex !important;
  gap:8px !important;
  margin:6px 0 0 !important;
  font:500 11px/1.2 "Noto Serif JP",serif !important;
  color:#5b4527 !important;
  text-shadow:0 0 6px #fff,0 0 2px #fff !important;
  background:none !important;
}
html body #noah-piece-overlay .noah-piece-ticket-status b{font-weight:700 !important;color:#7a5420 !important}
html body #noah-piece-overlay .noah-piece-complete{
  font:600 13px/1.4 "Noto Serif JP",serif !important;
  color:#7a5420 !important;
  text-shadow:0 0 6px #fff !important;
}

@media (max-height:740px){
  html body #noah-piece-overlay .noah-piece-head{min-height:52px !important}
  html body #noah-piece-overlay .noah-piece-title strong{font-size:23px !important}
  html body #noah-piece-overlay .noah-piece-lead h2{font-size:20px !important;margin-top:5px !important}
  html body #noah-piece-overlay #noah-piece-progress-now{font-size:34px !important}
  html body #noah-piece-overlay .noah-puzzle-frame{width:min(100%,286px) !important;padding:9px !important}
  html body #noah-piece-overlay .noah-puzzle-piece.locked::after{width:26px !important;height:26px !important}
  html body #noah-piece-overlay .noah-piece-note{margin-top:10px !important;font-size:12px !important}
  html body #noah-piece-overlay .noah-piece-challenge{height:52px !important;font-size:18px !important}
}

/* ============================================================
   build1443: ノア画面でも上部ユーザーフレーム／下部ボトムナビを表示
   無貌の天使・DAILYのステージ選択(z-index:210)と同じ扱いにする。
   背景は全面に敷き、中身はフレームとナビの間に収める。
   ============================================================ */
html body #noah-piece-overlay.noah-piece-overlay{
  z-index:210 !important;
}
html body #noah-piece-overlay.noah-piece-overlay .noah-piece-screen{
  position:absolute !important;
  top:var(--header-h,72px) !important;
  bottom:var(--bottom-nav-h,76px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100% !important;
  max-width:460px !important;
  height:auto !important;
  padding:2px 16px 10px !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
html body #noah-piece-overlay .noah-piece-screen::-webkit-scrollbar{display:none}
/* フレームとナビの間に収めるため、全体を一段コンパクトに */
html body #noah-piece-overlay .noah-piece-head{min-height:46px !important;padding-top:2px !important}
html body #noah-piece-overlay .noah-piece-head::before{top:-2px;width:16px;height:16px}
html body #noah-piece-overlay .noah-piece-back{top:6px !important;font-size:14px !important}
html body #noah-piece-overlay .noah-piece-title{margin-top:10px !important;gap:3px !important}
html body #noah-piece-overlay .noah-piece-title strong{font-size:22px !important}
html body #noah-piece-overlay .noah-piece-body{gap:6px !important}
html body #noah-piece-overlay .noah-piece-lead{margin-top:8px !important}
html body #noah-piece-overlay .noah-piece-lead h2{font-size:20px !important;margin-top:5px !important}
html body #noah-piece-overlay .noah-piece-progress{padding-top:9px !important}
html body #noah-piece-overlay #noah-piece-progress-now{font-size:34px !important}
html body #noah-piece-overlay .noah-piece-progress-label{font-size:13px !important}
html body #noah-piece-overlay .noah-puzzle-frame{
  width:min(76%,290px) !important;
  padding:10px !important;
  margin-top:4px !important;
}
html body #noah-piece-overlay .noah-puzzle-piece.locked::after{width:28px !important;height:28px !important}
html body #noah-piece-overlay .noah-piece-note{margin-top:10px !important;padding-bottom:12px !important;font-size:12px !important}
html body #noah-piece-overlay .noah-piece-actions{margin-top:2px !important;padding-top:4px !important}
html body #noah-piece-overlay .noah-piece-challenge{height:52px !important;font-size:18px !important}
@media (max-height:740px){
  html body #noah-piece-overlay .noah-piece-head{min-height:40px !important}
  html body #noah-piece-overlay .noah-piece-title{margin-top:6px !important}
  html body #noah-piece-overlay .noah-piece-title strong{font-size:19px !important}
  html body #noah-piece-overlay .noah-piece-lead{margin-top:4px !important}
  html body #noah-piece-overlay .noah-piece-lead h2{font-size:17px !important}
  html body #noah-piece-overlay #noah-piece-progress-now{font-size:28px !important}
  html body #noah-piece-overlay .noah-puzzle-frame{width:min(66%,240px) !important;padding:8px !important;margin-top:14px !important}
  html body #noah-piece-overlay .noah-puzzle-piece.locked::after{width:22px !important;height:22px !important}
  html body #noah-piece-overlay .noah-piece-challenge{height:46px !important;font-size:16px !important}
}

/* build1462: フレンド検索結果のRANK表示（フレンド一覧のRANKと同じ書体・色） */
#screen-friend .friend-search-card-rank{
  margin-top:3px;
  font-family:"Cinzel","Noto Serif JP",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  color:#9a7a42;
  line-height:1.2;
  white-space:nowrap;
}
#screen-friend .friend-search-card-rank b{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:#7a5a26;
}
#screen-friend .friend-search-card-rank + .friend-search-card-id{
  margin-top:2px;
}


/* build1499: パーティ編成のキャラ詳細では、画像下にキャラ名を明確表示する。 */
#detail-modal.is-shooting-party-detail .detail-name{
  display:block !important;
  margin:10px 0 0 !important;
  color:#8a6a32 !important;
  font:700 22px/1.35 "Noto Serif JP",serif !important;
  letter-spacing:.10em !important;
  text-align:center !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;
}
#detail-modal.is-shooting-party-detail #detail-rank{
  display:none !important;
}
/* build1463: フレンドのホーム設定キャラ詳細（閲覧専用） */
#detail-modal.is-friend-character-detail .detail-lb-action-block,
#detail-modal.is-friend-character-detail .btn-limit-break,
#detail-modal.is-friend-character-detail .btn-set-fav,
#detail-modal.is-friend-character-detail .btn-delete-chara{
  display:none !important;
}
#detail-modal.is-friend-character-detail #detail-rank{
  display:block !important;
  margin:2px 0 0 !important;
  font:600 11px/1.4 "Noto Serif JP",serif !important;
  letter-spacing:.08em !important;
  color:#8a6a32 !important;
}
/* フレンド一覧：キャラアイコンをタップできることを示す */
#screen-friend .friend-card-panel.friend-card-panel-tappable{
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#screen-friend .friend-card-panel.friend-card-panel-tappable::after{
  content:"";
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.2' fill='none' stroke='%238a6a32' stroke-width='1.6'/%3E%3Cpath d='M10.2 10.2 L13.4 13.4' stroke='%238a6a32' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/11px 11px no-repeat;
  box-shadow:0 0 0 1px rgba(170,132,70,.75),0 1px 3px rgba(60,40,15,.25);
  pointer-events:none;
}
#screen-friend .friend-card-panel.friend-card-panel-tappable:active{
  transform:scale(.96);
}


/* =========================================================
   build1503 GACHA CONFIRM MODAL POLISH
   スクリーンショット完成イメージに寄せた、淡色・矩形・文字主役の確認モーダル
   ========================================================= */
#summon-confirm-modal{
  padding:24px 18px !important;
  background:rgba(248,246,240,0.56) !important;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  align-items:center !important;
  justify-content:center !important;
}

#summon-confirm-modal .modal.summon-confirm-shell{
  width:min(100%, 332px) !important;
  max-width:332px !important;
  padding:0 !important;
  border-radius:0 !important;
  border:1px solid rgba(223,216,203,0.96) !important;
  background:rgba(255,255,255,0.93) !important;
  color:#847b6c !important;
  box-shadow:0 18px 42px rgba(168,155,126,0.14) !important;
  overflow:hidden !important;
}

#summon-confirm-modal .summon-confirm-inner{
  padding:26px 28px 24px !important;
  text-align:center !important;
}

#summon-confirm-modal .summon-confirm-copy{
  padding:18px 8px 10px !important;
}

#summon-confirm-modal .modal-inner p,
#summon-confirm-modal #summon-confirm-text,
#summon-confirm-modal .summon-confirm-text{
  margin:0 !important;
  color:#8d8578 !important;
  font-family:"Noto Serif JP", serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:2.05 !important;
  letter-spacing:.045em !important;
  text-align:center !important;
  white-space:normal !important;
}

#summon-confirm-modal .summon-confirm-actions{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  padding-top:18px !important;
}

#summon-confirm-modal .summon-confirm-yes,
#summon-confirm-modal .summon-confirm-no,
#summon-confirm-modal .btn-pay,
#summon-confirm-modal .btn-cancel-txt{
  appearance:none;
  -webkit-appearance:none;
  width:100% !important;
  min-height:auto !important;
  margin:0 !important;
  padding:6px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease;
}

#summon-confirm-modal .summon-confirm-yes,
#summon-confirm-modal .btn-pay{
  color:#b49459 !important;
  font-family:"Noto Serif JP", serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  letter-spacing:.12em !important;
}

#summon-confirm-modal .summon-confirm-no,
#summon-confirm-modal .btn-cancel-txt{
  color:#6d6b67 !important;
  font-family:"Noto Serif JP", serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
}

#summon-confirm-modal .summon-confirm-yes:active,
#summon-confirm-modal .summon-confirm-no:active,
#summon-confirm-modal .btn-pay:active,
#summon-confirm-modal .btn-cancel-txt:active{
  transform:scale(0.98);
  opacity:.78;
}

@media (max-width:380px){
  #summon-confirm-modal{
    padding:20px 16px !important;
  }
  #summon-confirm-modal .modal.summon-confirm-shell{
    width:min(100%, 316px) !important;
  }
  #summon-confirm-modal .summon-confirm-inner{
    padding:24px 24px 22px !important;
  }
  #summon-confirm-modal .modal-inner p,
  #summon-confirm-modal #summon-confirm-text,
  #summon-confirm-modal .summon-confirm-text{
    font-size:13.5px !important;
    line-height:2 !important;
  }
}