:root {
  --gold: #e8c46a;
  --gold-soft: #f3e1ad;
  --ink: #1b1d2e;
  --panel: rgba(20, 24, 44, 0.72);
  --panel-strong: rgba(18, 21, 38, 0.9);
  --line: rgba(232, 196, 106, 0.35);
  --text: #f5f1e6;
  --muted: #b9b6c9;
  --r3: #7fb4ff;
  --r4: #c79bff;
  --r5: #ffc95a;
  --danger: #ff5a6a;
  --el: #e8c46a;
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --font-en: 'Cinzel', serif;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0e1020; color: var(--text); font-family: var(--font); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 画面全体を固定して、スマホで横にずれたり引っ張れたりしないようにする */
body { position: fixed; inset: 0; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* スマホアプリ（js/platform.js）とスマホのブラウザ：長押しで文字が選択されたり、メニューが出たりしないようにする（入力欄は除く）。
   Chrome は文字をタップすると「タップして検索」が立ち上がるので、ブラウザでも文字を選べないようにする */
.is-app body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.is-app input, .is-app textarea { -webkit-user-select: text; user-select: text; }
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.c-pyro { color: #ff7a4d; } .c-hydro { color: #4db3ff; } .c-electro { color: #c38bff; } .c-cryo { color: #a8ecff; } .c-anemo { color: #6fe8bf; }
.rar { letter-spacing: -1px; font-size: 0.85em; }
.rar.r3 { color: var(--r3); } .rar.r4 { color: var(--r4); } .rar.r5 { color: var(--r5); }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 16px; font-weight: 700;
  cursor: pointer; transition: transform 0.12s, background 0.2s, border-color 0.2s;
}
.btn small { font-size: 12px; color: var(--muted); font-weight: 500; }
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: var(--gold); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* サーバーの返事を待っている間（js/ui.js の op）。決定のボタンを薄くして、押しても進まないことが分かるようにする */
body.op-busy, body.op-busy .btn { cursor: progress; }
body.op-busy .btn.primary:not(:disabled) { opacity: 0.55; }
.btn.primary { background: linear-gradient(180deg, #f5e3b0, #d9b25a); color: #3a2c10; border-color: #fff3c8; }
.btn.primary small { color: #6b5320; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #fff0c6, #e8c46a); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ffb3bb; border-color: rgba(255, 90, 106, 0.35); }
.btn.big { font-size: 20px; padding: 14px 36px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 16px; cursor: pointer; }

/* ---------- 画面共通 ---------- */
.screen { position: fixed; inset: 0; display: flex; z-index: 20; }
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 22, 0.55); backdrop-filter: blur(4px); padding: 16px; }
/* 窓（設定・説明など）は、iPhone のアプリの横向きでカメラの切り欠きに掛からないよう、左右にその分も空ける（ブラウザでは 0） */
.overlay { padding-left: calc(16px + var(--sl)); padding-right: calc(16px + var(--sr)); }
.overlay.dark { background: radial-gradient(ellipse at center, #1c2146 0%, #070814 80%); }
.dialog { background: var(--panel-strong); border: 1px solid var(--line); border-radius: 18px; padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; min-width: min(360px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.dialog.wide { width: min(620px, 100%); }
.transfer-code { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text);
  font: 12px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; resize: vertical; flex-shrink: 0; min-height: 72px; }
.transfer-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.transfer-status:empty { display: none; }
.transfer-status.bad { color: var(--danger); }
.note.bad { color: var(--danger); }
.dialog h2 { margin: 0 0 6px; font-size: 24px; text-align: center; color: var(--gold-soft); }
.dialog h3 { margin: 10px 0 0; color: var(--gold-soft); font-size: 16px; }

/* ---------- ホーム ---------- */
#screen-home { padding: 20px 0 20px 6vw; background: linear-gradient(90deg, rgba(10, 12, 28, 0.78) 0%, rgba(10, 12, 28, 0.35) 40%, transparent 60%); }
.home-panel { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }
/* 縦中央にそろえるが、画面の高さが足りないときは上端から並べる（上にはみ出した部分はスクロールでも戻れないため） */
#screen-home, #screen-hero { align-items: flex-start; overflow-y: auto; }
.home-panel, .hero-panel { margin-block: auto; }
.logo-en { font-family: var(--font-en); font-weight: 800; font-size: 36px; letter-spacing: 3px; white-space: nowrap; color: var(--gold-soft); text-shadow: 0 2px 20px rgba(232, 196, 106, 0.45); line-height: 1; }
.logo-ja { margin-top: 8px; font-size: 18px; letter-spacing: 12px; color: var(--text); }
.home-status { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.hs-row { display: flex; justify-content: space-between; align-items: baseline; }
.hs-lv { font-family: var(--font-en); font-size: 26px; font-weight: 800; color: var(--gold-soft); }
.hs-gems, .gems { color: #9fe0ff; font-weight: 800; }
.exp-line { height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
.exp-line .fill { height: 100%; background: linear-gradient(90deg, #9fe0ff, #e8c46a); }
.hs-exp, .hs-best, .hs-cap { font-size: 12px; color: var(--muted); }
.hs-cap { color: var(--gold-soft); }
.hs-stats { display: flex; gap: 14px; font-size: 14px; }
.hs-slots { display: flex; gap: 8px; }
.mini-slot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--el); color: var(--el); background: rgba(0, 0, 0, 0.3); }
.mini-slot.empty { border-style: dashed; color: var(--muted); border-color: rgba(255, 255, 255, 0.25); }
.hs-weapon { font-size: 14px; display: flex; gap: 8px; align-items: center; }
.home-main { justify-content: flex-start; padding-left: 26px; }
/* メニュー：主なものは1行ずつ、主人公と設定は2つ並べる */
.home-menu { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.home-menu > .btn { grid-column: span 6; justify-content: flex-start; padding-left: 26px; white-space: nowrap; min-width: 0; }
/* 主人公・ガイド・設定は3つ並べる */
.home-menu > .btn.half, .home-menu > .btn.third { justify-content: center; padding-left: 8px; padding-right: 8px; }
.home-menu > .btn.half { grid-column: span 3; }
.home-menu > .btn.third { grid-column: span 2; }
.home-menu > .btn.half small, .home-menu > .btn.third small { display: none; }
a.btn { text-decoration: none; }
.home-menu > .btn small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 背景の3Dが明るくても読めるよう、メニューのボタンには濃い下地を敷き、説明文も明るめにする */
.home-menu > .btn:not(.primary) { background: rgba(14, 17, 36, 0.82); border-color: rgba(232, 196, 106, 0.45); }
.home-menu > .btn:not(.primary):hover:not(:disabled) { background: rgba(34, 38, 66, 0.92); }
.home-menu > .btn:not(.primary) small { color: #d8d3e8; }
.home-menu > .btn.danger { color: #ffc2c9; }
.sortie { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.sortie label { font-size: 13px; color: var(--muted); }
.sortie select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-family: inherit; font-size: 16px; /* 16px未満だとiPhoneがタップ時に自動拡大する */ }
.sortie .btn { grid-column: 1 / -1; }

/* ---------- ページ（星降り・装備） ---------- */
.page { width: 100%; height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(10, 12, 28, 0.85), rgba(10, 12, 28, 0.7)); overflow: auto; }
.page-head { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(12, 14, 30, 0.9); z-index: 2; }
.page-head h2 { margin: 0; flex: 1; font-size: 22px; color: var(--gold-soft); letter-spacing: 4px; }

#screen-gacha .page { background: linear-gradient(180deg, rgba(6, 8, 24, 0.55), rgba(6, 8, 24, 0.78)), url('../assets/ui/gacha-bg.webp') center 40% / cover no-repeat; }
#screen-gacha .page-head { background: rgba(8, 10, 26, 0.72); backdrop-filter: blur(6px); }
/* 星降りのバナーは背景の星空が透けるよう半透明にする */
#screen-gacha .banner-card { background: radial-gradient(ellipse at 80% 20%, rgba(255, 201, 90, 0.28), transparent 60%), linear-gradient(135deg, rgba(42, 47, 99, 0.62), rgba(23, 26, 54, 0.5) 60%, rgba(58, 34, 80, 0.62)); backdrop-filter: blur(3px); }
#screen-gacha .feat { background: rgba(6, 8, 24, 0.45); }
.gacha-body { max-width: 900px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.banner-card { border-radius: 20px; padding: 28px; background: radial-gradient(ellipse at 80% 20%, rgba(255, 201, 90, 0.35), transparent 60%), linear-gradient(135deg, #2a2f63, #171a36 60%, #3a2250); border: 1px solid rgba(255, 201, 90, 0.5); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.banner-title { font-size: 32px; font-weight: 800; color: var(--gold-soft); letter-spacing: 6px; }
.banner-sub { color: var(--muted); margin: 4px 0 18px; }
.featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.feat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border-left: 4px solid var(--el); }
.feat-type { font-size: 11px; color: var(--muted); }
.feat-name { font-weight: 800; }
.gacha-info { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gacha-info .pity { color: var(--gold-soft); font-weight: 700; margin-top: 4px; }
.pull-row { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.pull-btn { flex-direction: column; gap: 2px; min-width: 180px; }
/* 履歴は引くボタンと離して左端に置く */
.pull-row .history-btn { margin-right: auto; align-self: center; }
/* 星降りの履歴：1回ごとに1行。同じ回（11連など）の先頭だけ日時を出し、上に線を引く */
.gh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gh-row { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 4px 12px; align-items: center; padding: 6px 10px; border-left: 3px solid var(--el); font-size: 14px; }
.gh-row.first { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.gh-row.first:first-child { margin-top: 0; }
.gh-row.r4 { background: linear-gradient(90deg, rgba(199, 155, 255, 0.16), transparent 70%); }
.gh-row.r5 { background: linear-gradient(90deg, rgba(255, 201, 90, 0.22), transparent 70%); }
.gh-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gh-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.gh-item small { font-size: 11px; color: var(--muted); }
.gh-tag { font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--gold-soft); border: 1px solid var(--line); }
.gh-tag.pickup { color: #fff; border-color: transparent; background: linear-gradient(180deg, #ff8a7a, #d8324a); }
@media (max-width: 600px) {
  .gh-row { grid-template-columns: 1fr auto; }
  .gh-date { grid-column: 1 / -1; }
  .gh-date:empty { display: none; }
}

/* 星降り演出：星空の絵を背景に、光の演出は Canvas（.ga-canvas）に描く */
#gacha-anim { flex-direction: column; gap: 24px; overflow: hidden; }
#gacha-anim.overlay.dark { background: #04050d; backdrop-filter: none; }
#gacha-anim > .gacha-results, #gacha-anim > .gacha-actions { position: relative; z-index: 2; }
.ga-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ga-sky::before { content: ""; position: absolute; inset: -4%; background: url('../assets/ui/gacha-bg.webp') center 40% / cover no-repeat; opacity: 0; }
/* 周辺を少し暗くして、中央の光とカードを引き立てる */
.ga-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(2, 3, 12, 0.65) 100%); }
.ga-sky.active::before { animation: gaSkyIn 1.2s ease-out forwards, gaSkyDrift 24s ease-in-out 1.2s infinite alternate; }
@keyframes gaSkyIn { from { opacity: 0; transform: scale(1.12); filter: brightness(0.5); } to { opacity: 1; transform: scale(1.04); filter: brightness(1); } }
@keyframes gaSkyDrift { from { opacity: 1; transform: scale(1.04) translate(0, 0); } to { opacity: 1; transform: scale(1.08) translate(-1%, -0.6%); } }
.ga-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ga-stage { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ga-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }

.gacha-results { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 1000px; perspective: 1200px; }
.g-card { width: 150px; height: 220px; position: relative; animation: cardIn 0.4s backwards cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(0.8); } }
.g-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.5, 1); }
.g-card.flipped .g-inner { transform: rotateY(180deg); }
.g-card.instant .g-inner { transition: none; }
.g-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
/* 四隅のL字の飾り（--corner の色・--cl の長さ）。カードの表と裏の内側の枠に使う */
.g-back::before, .g-front::before {
  content: ""; position: absolute; inset: 5px; border-radius: 10px; pointer-events: none; --cl: 14px;
  border: 1px solid color-mix(in srgb, var(--corner) 45%, transparent);
  background:
    linear-gradient(var(--corner), var(--corner)) top left / var(--cl) 2px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top left / 2px var(--cl) no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / var(--cl) 2px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 2px var(--cl) no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / var(--cl) 2px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 2px var(--cl) no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / var(--cl) 2px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 2px var(--cl) no-repeat;
}
/* 裏：星空に金の紋章 */
.g-back { --corner: var(--gold); display: grid; place-items: center; border: 2px solid rgba(232, 196, 106, 0.7);
  background:
    radial-gradient(1.5px 1.5px at 22% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 76% 30%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 30% 78%, #fff 50%, transparent), radial-gradient(1px 1px at 70% 84%, #fff 50%, transparent),
    radial-gradient(circle at 50% 50%, rgba(232, 196, 106, 0.22), transparent 45%),
    radial-gradient(circle at 50% 40%, #3a4284, #161a3a 70%); }
.g-emblem { width: 56px; height: 56px; transform: rotate(45deg); border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(232, 196, 106, 0.5), inset 0 0 12px rgba(232, 196, 106, 0.4);
  background: radial-gradient(circle, rgba(232, 196, 106, 0.5) 0 12%, transparent 14%); outline: 1px solid rgba(232, 196, 106, 0.45); outline-offset: 6px; }
.g-card.charging .g-back { animation: charge 0.35s ease-in-out infinite alternate; border-color: var(--rc); }
@keyframes charge { from { box-shadow: 0 0 10px var(--rc); transform: scale(1); } to { box-shadow: 0 0 40px 8px var(--rc); transform: scale(1.05); } }

/* 表：レア度の色（--rc）の二重枠、属性の色（--el）の光、四隅の飾り */
.g-front { --corner: var(--rc); transform: rotateY(180deg); padding: 30px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; border: 2px solid var(--rc);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--el) 35%, transparent), transparent 55%), linear-gradient(160deg, #283063 0%, #161a3a 60%, #0d1024 100%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.45), inset 0 0 26px rgba(0, 0, 0, 0.6); }
.g-card.flipped .g-front { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.45), inset 0 0 26px rgba(0, 0, 0, 0.6), 0 0 24px -4px var(--rc); }
.g-card.r4 .g-front { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--el) 30%, transparent), transparent 55%), linear-gradient(160deg, #4d3183 0%, #241a4c 60%, #130e2c 100%); }
.g-card.r5 .g-front {
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, #fff6d8 50%, transparent), radial-gradient(1.5px 1.5px at 84% 20%, #fff6d8 50%, transparent),
    radial-gradient(1px 1px at 14% 70%, #fff6d8 50%, transparent), radial-gradient(1.5px 1.5px at 88% 64%, #fff6d8 50%, transparent),
    radial-gradient(circle at 50% 38%, rgba(255, 214, 130, 0.5), transparent 58%),
    linear-gradient(160deg, #86602a 0%, #3e2917 58%, #1d130c 100%); }
.g-card.r5.flipped { animation: fiveGlow 1.6s ease-in-out infinite; border-radius: 14px; }
@keyframes fiveGlow { 50% { filter: drop-shadow(0 0 14px #ffd27a); } }
/* めくった瞬間に光が一度走る。★5 は虹色の光がずっと流れる */
.g-front::after { content: ""; position: absolute; inset: -30% -60%; pointer-events: none; transform: translateX(-70%);
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 58%); }
.g-card.flipped .g-front::after { animation: gShine 0.9s 0.3s ease-out both; }
.g-card.r5.flipped .g-front::after { animation: gShine 2.8s 0.3s ease-in-out infinite;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 236, 190, 0.45) 44%, rgba(255, 170, 240, 0.3) 50%, rgba(150, 220, 255, 0.35) 56%, transparent 64%); }
@keyframes gShine { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* 上のリボン（アビリティ／武器／PICK UP） */
.g-ribbon { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); padding: 2px 14px; font-size: 10px; font-weight: 800; letter-spacing: 2px; white-space: nowrap; color: #1b1d2e;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc)); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%); }
.g-ribbon.pickup { color: #fff; background: linear-gradient(180deg, #ff8a7a, #d8324a); }
/* 初めて手に入れた物：右上の角に斜めの帯 */
.g-new { position: absolute; top: 12px; right: -26px; width: 92px; transform: rotate(45deg); padding: 1px 0; z-index: 1;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff; background: linear-gradient(180deg, #ff7686, #e0304a); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
/* 属性の色に光るメダル。★4以上は後ろで光輪が回る */
.g-icon { position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0 4px; border: 2px solid var(--el);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--el) 45%, #0c0e22) 0%, #0c0e22 72%);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 0 4px color-mix(in srgb, var(--rc) 75%, transparent), 0 0 18px color-mix(in srgb, var(--el) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--el) 50%, transparent); }
.g-icon span { font-size: 28px; font-weight: 800; color: #fff; text-shadow: 0 0 10px var(--el), 0 0 3px var(--el); }
.g-card.r4 .g-icon::before, .g-card.r5 .g-icon::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; z-index: -1; animation: gSpin 14s linear infinite;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc) 70%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%, #000 68%, transparent 72%); mask: radial-gradient(circle, transparent 55%, #000 57%, #000 68%, transparent 72%); }
@keyframes gSpin { to { transform: rotate(360deg); } }
.g-name { font-weight: 800; font-size: 15px; line-height: 1.3; flex: 1; display: flex; align-items: center; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
/* 星の両側に細い線 */
.g-stars { display: flex; align-items: center; gap: 6px; color: var(--rc); font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 8px var(--rc); }
.g-stars::before, .g-stars::after { content: ""; width: 16px; height: 1px; background: linear-gradient(90deg, transparent, var(--rc)); }
.g-stars::after { transform: scaleX(-1); }
.g-tag { font-size: 11px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; color: var(--gold-soft); background: rgba(0, 0, 0, 0.45); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); }
.gacha-actions { display: flex; gap: 12px; }

/* 装備 */
.equip-body { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 20px 24px 40px; max-width: 1200px; margin: 0 auto; width: 100%; }
.eq-stats { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; align-self: start; }
.eq-stats h3 { margin: 4px 0 10px; font-size: 15px; color: var(--gold-soft); }
.eq-stats dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin: 0 0 16px; font-size: 14px; }
.eq-stats dt { color: var(--muted); }
.eq-stats dd { margin: 0; font-weight: 700; text-align: right; }
.weapon-card { background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wc-name { font-weight: 800; font-size: 15px; }
.eq-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eq-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.eq-slot { position: relative; }
.eq-slot-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.15); background: var(--panel); color: var(--text); cursor: pointer; }
.eq-slot.sel .eq-slot-main { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.25); }
.eq-slot .slot-key { font-size: 11px; color: var(--muted); }
.eq-glyph { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--el); border: 2px solid var(--el); background: rgba(0, 0, 0, 0.3); }
.eq-slot.empty .eq-glyph { border-style: dashed; color: var(--muted); border-color: rgba(255, 255, 255, 0.3); }
.eq-name { font-weight: 700; font-size: 14px; }
.eq-remove { position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); color: var(--muted); cursor: pointer; }
.eq-remove:hover { color: #fff; border-color: var(--danger); }
.eq-detail { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--el); border-radius: 14px; padding: 14px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.eq-detail.empty { color: var(--muted); border-left-color: var(--line); }
.eq-detail p { margin: 0; color: var(--muted); }
.d-head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.d-head .rank { margin-left: auto; color: var(--gold-soft); font-weight: 800; }
.d-skill { display: flex; align-items: center; gap: 8px; }
.d-skill .key, .el-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, 0.12); }
.el-badge { background: var(--el); color: #1b1d2e; border-radius: 50%; }
.tabs { display: flex; gap: 6px; }
.tab { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.tab.on { background: var(--gold); color: #3a2c10; border-color: var(--gold); }
.alchemy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); background: var(--panel); }
.al-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; font-size: 13px; }
.al-text b { font-size: 15px; }
.alchemy .btn { padding: 8px 18px; }
.al4-list { display: flex; flex-direction: column; gap: 8px; }
.al4-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.al4-name { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.al4-name .muted { font-size: 12px; }
.al4-row .btn { flex: none; padding: 8px 14px; }
.item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.item { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--panel); color: var(--text); cursor: pointer; }
.item.weapon { grid-template-rows: auto auto auto; }
.item:hover:not(:disabled) { border-color: var(--gold); }
.item.r4 { background: linear-gradient(90deg, rgba(199, 155, 255, 0.18), var(--panel)); }
.item.r5 { background: linear-gradient(90deg, rgba(255, 201, 90, 0.22), var(--panel)); }
.item.locked { opacity: 0.38; cursor: not-allowed; }
.item.equipped { border-color: var(--gold); }
.it-glyph { grid-row: 1 / -1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--el); border: 2px solid var(--el); background: rgba(0, 0, 0, 0.3); }
.item.weapon .it-glyph { --el: #e8e2d0; }
.it-name { font-weight: 800; }
.it-sub, .it-sub2 { font-size: 12px; color: var(--muted); }
.it-mark { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #3a2c10; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* ---------- リザルト・ヘルプ ---------- */
.result-wave { text-align: center; font-family: var(--font-en); font-size: 30px; font-weight: 800; color: var(--gold-soft); }
.result-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 6px 0; font-size: 16px; }
.result-list dt { color: var(--muted); }
.result-list dd { margin: 0; font-weight: 800; text-align: right; }
.help-table { border-collapse: collapse; font-size: 14px; }
.help-table th { text-align: left; padding: 6px 14px 6px 0; color: var(--gold-soft); white-space: nowrap; }
.help-table td { padding: 6px 0; }
.reaction-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; user-select: none; }
#hud button { pointer-events: auto; }
.hud-tl { position: absolute; left: 24px; top: 20px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.hud-wave { font-family: var(--font-en); font-size: 28px; font-weight: 800; color: var(--gold-soft); }
.hud-sub { font-size: 14px; }
.hud-sub.gem { color: #9fe0ff; font-weight: 800; }
.hud-tr { position: absolute; right: 20px; top: 20px; }

#hud-boss { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, 60vw); text-align: center; }
.boss-name { font-weight: 800; margin-bottom: 4px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.boss-bar { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
.boss-bar .fill { height: 100%; background: linear-gradient(90deg, #ff4d5e, #ff9a5c); transition: width 0.15s; }

.hud-bottom { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(440px, 50vw); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-lv { font-family: var(--font-en); font-weight: 800; font-size: 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); align-self: flex-start; }
.hp-bar { width: 100%; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); position: relative; overflow: hidden; }
.hp-bar .fill { height: 100%; background: linear-gradient(90deg, #6fe07a, #b6f06c); transition: width 0.15s; }
.hp-bar .fill.low { background: linear-gradient(90deg, #ff4d5e, #ff8a5c); }
.hp-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.exp-bar { width: 100%; height: 4px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; overflow: hidden; }
.exp-bar .fill { height: 100%; background: #9fe0ff; }

.hud-br { position: absolute; right: 28px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hud-slots { display: flex; gap: 12px; }
.slot { position: relative; width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--el); background: rgba(10, 12, 28, 0.7); display: grid; place-items: center; color: var(--el); font-weight: 800; font-size: 24px; transition: transform 0.15s, box-shadow 0.15s; }
.slot.active { transform: scale(1.18); box-shadow: 0 0 18px var(--el); background: rgba(10, 12, 28, 0.9); }
.slot.empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); color: var(--muted); }
.slot-cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0, 0, 0, 0.6) calc(var(--p, 0) * 360deg), transparent 0); }
.slot-glyph { position: relative; z-index: 1; }
.slot-wrap { position: relative; }
.slot-wrap .slot-key { position: absolute; top: -8px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #1b1d2e; font-size: 12px; display: grid; place-items: center; z-index: 2; }
.slot-name { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; white-space: nowrap; color: var(--text); text-shadow: 0 1px 3px #000; opacity: 0; }
.slot.active .slot-name { opacity: 1; }
.hud-actions { display: flex; gap: 20px; align-items: flex-end; margin-top: 8px; }
.action { position: relative; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 12, 28, 0.75); border: 2px solid rgba(255, 255, 255, 0.6); }
.action .key { position: absolute; bottom: -8px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #1b1d2e; font-weight: 800; font-size: 12px; display: grid; place-items: center; z-index: 2; }
.action.skill { width: 80px; height: 80px; border-color: var(--el); box-shadow: inset 0 0 18px color-mix(in srgb, var(--el) 50%, transparent); }
.action.skill .cd-mask { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0, 0, 0, 0.7) calc(var(--p, 0) * 360deg), transparent 0); }
.cd-num { position: relative; z-index: 1; font-weight: 800; font-size: 22px; text-shadow: 0 1px 3px #000; }
.action.burst { width: 100px; height: 100px; }
.action.burst .ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--el) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.12) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.action.burst::after { content: '奥'; font-weight: 800; font-size: 30px; color: var(--el); opacity: 0.35; }
.action.burst.ready { box-shadow: 0 0 24px var(--el), inset 0 0 22px var(--el); animation: pulse 1.2s infinite; }
.action.burst.ready::after { opacity: 1; }
@keyframes pulse { 50% { box-shadow: 0 0 36px var(--el), inset 0 0 28px var(--el); } }
.action.potion { width: 62px; height: 62px; border-color: #7dff9a; box-shadow: inset 0 0 14px rgba(125, 255, 154, 0.35); }
.potion-glyph { font-size: 27px; font-weight: 800; color: #7dff9a; text-shadow: 0 0 8px rgba(125, 255, 154, 0.7); }
/* 個数は左下（右下はキーの札。2026-10-17 ユーザーの依頼で右上から移した） */
.potion-count { position: absolute; bottom: -6px; left: -6px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #7dff9a; color: #10301a; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.action.potion.empty { opacity: 0.45; filter: grayscale(1); }
.action-names { display: flex; gap: 16px; font-size: 11px; color: var(--muted); text-shadow: 0 1px 2px #000; }
/* クールタイム中は属性の文字を灰色にし、使えるときだけ属性の色にする（円の枠は属性の色のまま。PC・スマホ共通） */
.slot.cooling .slot-glyph { color: #8d909c; text-shadow: 0 0 3px #000, 0 0 2px #000; }
/* PC のクールタイム：暗い背景に黒い影では見えないので、回復した分を中心から半透明の白い扇で埋めていく（円がすべて白っぽくなったら使える）。
   白はどの属性の色（橙・青・紫・水色・緑）とも「効く」の黄色い光とも分かれる。明けた瞬間に金色に光らせる（スマホは名前の下のバー） */
body:not(.touch) .slot-cd::after, body:not(.touch) .action.skill .cd-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.2s;
  background: conic-gradient(transparent calc(var(--p, 0) * 360deg), rgba(255, 255, 255, 0.3) 0); }
body:not(.touch) .slot.cooling .slot-cd::after, body:not(.touch) .action.skill.cooling .cd-mask::after { opacity: 1; }
body:not(.touch) .slot.cd-ready, body:not(.touch) .action.skill.cd-ready { animation: cdReady 0.6s ease-out; }
@keyframes cdReady { 0% { box-shadow: 0 0 0 0 rgba(255, 224, 102, 0.95), 0 0 24px 8px rgba(255, 224, 102, 0.9); filter: brightness(1.6); } 100% { box-shadow: 0 0 0 14px rgba(255, 224, 102, 0), 0 0 0 0 rgba(255, 224, 102, 0); filter: none; } }

/* 画面外の敵の方向：赤い三角（右向きを基準に回転させる）。影は外側の要素に付けて、切り抜いた形に沿わせる */
#hud-arrows { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.enemy-arrow { position: absolute; left: 0; top: 0; width: 22px; height: 26px; margin: -13px 0 0 -11px; filter: drop-shadow(0 0 3px rgba(255, 30, 50, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); will-change: transform; }
.enemy-arrow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ff6b74, #ff2438); clip-path: polygon(100% 50%, 0 0, 22% 50%, 0 100%); }
.enemy-arrow.boss { width: 36px; height: 44px; margin: -22px 0 0 -18px; animation: bossArrow 0.9s ease-in-out infinite; }
@keyframes bossArrow { 50% { filter: drop-shadow(0 0 8px rgba(255, 60, 30, 1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); } }
.enemy-arrow.boss::before { background: linear-gradient(90deg, #ff8a4a, #e0102a); }
.enemy-arrow.lock, .enemy-arrow.lock.boss { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255, 74, 74, 1)); animation: none; } /* ロックオンしている敵 */
#hud-stamina { position: absolute; left: calc(50% + 70px); top: 50%; width: 8px; height: 90px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; opacity: 0; transition: opacity 0.3s; transform: translateY(-40%); }
#hud-stamina.show { opacity: 1; }
#hud-stamina .fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 1) * 100%); background: #ffd84a; }
#hud-stamina.low .fill { background: #ff6a3d; }

#banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.4s; white-space: nowrap; max-width: 96vw; overflow: hidden; pointer-events: none; }
#banner.show { opacity: 1; animation: bannerIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes bannerIn { from { transform: translateX(-50%) scale(1.4); letter-spacing: 20px; } }
.b-title { font-family: var(--font-en), var(--font); font-size: 44px; font-weight: 800; color: var(--gold-soft); text-shadow: 0 0 20px rgba(0, 0, 0, 0.6), 0 2px 4px #000; }
.b-sub { font-size: 16px; text-shadow: 0 2px 4px #000; margin-top: 4px; }
#banner.boss .b-title, #banner.dead .b-title { color: #ff8a8a; }
#banner.burst .b-title { color: var(--el); font-size: 50px; }
#banner.level .b-title { color: #fff1a8; }
#banner.clear .b-title { color: #bfffe0; }

#toast { position: fixed; z-index: 96; pointer-events: none; top: 62%; left: 50%; transform: translateX(-50%); max-width: 90vw; text-align: center; padding: 8px 18px; border-radius: 999px; background: rgba(10, 12, 28, 0.8); font-size: 14px; opacity: 0; transition: opacity 0.25s; }
#toast.show { opacity: 1; }
#lock-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 12px; background: rgba(10, 12, 28, 0.75); font-weight: 700; opacity: 0; transition: opacity 0.3s; }
#lock-hint.show { opacity: 1; }
.hud-help { position: absolute; left: 20px; bottom: 20px; font-size: 12px; line-height: 1.8; background: rgba(10, 12, 28, 0.55); padding: 8px 12px; border-radius: 10px; color: var(--muted); }
.hud-help b { color: var(--text); }
.hud-help.hide { display: none; }

#hurt-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9; box-shadow: inset 0 0 120px 30px rgba(255, 40, 60, 0.6); opacity: 0; }
#hurt-flash.on { animation: hurt 0.45s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }

/* ダメージ数字 */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.fx-flash { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; }
.fx-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle, transparent 25%, rgba(8, 4, 20, 0.95) 100%); }
.dmg { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 20px; white-space: nowrap; text-shadow: 0 0 3px #000, 0 2px 3px #000; will-change: transform; }
.dmg.crit { font-size: 28px; }
.dmg.amp { font-size: 30px; }
.dmg.resist { font-size: 15px; opacity: 0.7; }
.dmg.reaction { font-size: 22px; letter-spacing: 2px; }
.dmg.hurt { font-size: 22px; }
.dmg.heal { font-size: 20px; }
.dmg.dodge { font-size: 18px; font-style: italic; }

/* ---------- 主人公の選択 ---------- */
#screen-hero { touch-action: pan-y; padding: 20px 0 20px 6vw; background: linear-gradient(90deg, rgba(10, 12, 28, 0.78) 0%, rgba(10, 12, 28, 0.35) 40%, transparent 60%); }
.hero-panel { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }
.hero-top { display: flex; align-items: center; gap: 12px; }
.hero-back { flex: none; }
.hero-title { margin: 0; font-size: 16px; color: var(--gold-soft); }
.hero-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-opt { padding: 16px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.12s; }
.hero-opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.hero-opt[aria-checked="true"] { border-color: var(--gold); background: rgba(232, 196, 106, 0.18); color: var(--gold-soft); box-shadow: 0 0 18px rgba(232, 196, 106, 0.3); }
.hero-desc { margin: 0; line-height: 1.5; font-size: 14px; color: var(--text); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
/* コスチューム：いつもの服＋スキンを横に並べる。持っていない物には値段、着ている物には印 */
/* いつもの服＋コスチュームを1段に並べる（数が増えても段を増やさない。スマホ横向きで決定のボタンが画面の外へ出ないように） */
.hero-skins { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.skin-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color 0.2s, background 0.2s; min-width: 0; }
.skin-opt:hover { border-color: var(--gold); }
.skin-opt[aria-checked="true"] { border-color: var(--gold); background: rgba(232, 196, 106, 0.18); color: var(--gold-soft); }
.skin-opt img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.skin-opt .skin-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-opt .skin-tag { font-size: 10px; font-weight: 700; color: var(--gold-soft); white-space: nowrap; }
.skin-opt .skin-tag.paid { color: #ffb3d0; }
.skin-opt .skin-tag.reward { color: #9fe3d2; } /* クリアでもらえる物（まだ持っていない） */
.shop-skin-thumb { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.skin-opt.special::after { content: '特別'; position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 6px; font-size: 9px; background: linear-gradient(135deg, #f3d27a, #c8963a); color: #2a1c05; }
.hero-name { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--gold-soft); }
.hero-name input { flex: 1; min-width: 0; font: 16px var(--font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.hero-name input:focus { outline: none; border-color: var(--gold); }

/* ---------- 狭い画面 ---------- */
@media (max-width: 600px) {
  #screen-home, #screen-hero { padding: 16px; align-items: flex-end; background: linear-gradient(0deg, rgba(10, 12, 28, 0.9) 50%, transparent); }
  #screen-hero .logo { display: none; }
  .logo-en { font-size: 32px; }
  .equip-body { grid-template-columns: 1fr; padding: 16px; }
  .eq-slots { grid-template-columns: repeat(2, 1fr); }
  .hud-help { display: none; }
}

/* ---------- スマホ横持ち（高さが低い画面） ---------- */
@media (max-height: 520px) {
  #screen-home { padding: calc(16px + var(--st)) calc(16px + var(--sr)) 10px calc(16px + var(--sl)); overflow: auto; background: linear-gradient(90deg, rgba(10, 12, 28, 0.85) 0%, rgba(10, 12, 28, 0.6) 55%, transparent 72%); }
  #screen-hero { padding: 10px calc(16px + var(--sr)) 10px calc(16px + var(--sl)); overflow: auto; }
  #screen-hero .logo { display: none; }
  .hero-panel { width: min(360px, 52vw); gap: 8px; }
  .hero-title { font-size: 14px; margin: 0; }
  .hero-opt { padding: 10px; font-size: 15px; }
  .hero-desc { font-size: 13px; }
  .hero-back { padding: 6px 14px; font-size: 14px; }
  .hero-name input { padding: 6px 10px; }
  .hero-skins { gap: 6px; }
  .skin-opt { padding: 3px 2px; gap: 1px; font-size: 11px; }
  .skin-opt img { width: 34px; height: 34px; }
  /* 左の列：ロゴ・ステータス、右の列：冒険（一番大きなボタン）とほかのメニュー */
  /* 幅は右上の「お知らせ」「プレゼント」の分（右の余白12px＋2つのボタン約126px＋間16px）を空ける（アプリは左右に切り欠きの余白が入る）。
     縦は中央。「お知らせ」「プレゼント」の上端を「冒険」のボタンに合わせる（js/ui.js の placeHomeCorner） */
  .home-panel { width: min(640px, 72vw, calc(100vw - var(--sl) - var(--sr) - 170px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; align-items: start; }
  .logo { grid-column: 1; }
  .home-status { grid-column: 1; padding: 10px 12px; gap: 5px; }
  /* 冒険はスクロールしなくても押せるよう、右の列の一番上に置く */
  .home-main { grid-column: 2; grid-row: 1; }
  /* 左のステータスと右のメニューを同じ高さにそろえ（下端をそろえる）、余った分はボタンの間に均等に分ける */
  .home-status, .home-menu { grid-row: 2; align-self: stretch; }
  .home-menu { grid-column: 2; gap: 7px; align-content: space-between; }
  .logo-en { font-size: 26px; letter-spacing: 2px; }
  .logo-ja { font-size: 12px; letter-spacing: 8px; margin-top: 4px; }
  .hs-lv { font-size: 20px; }
  .hs-stats { font-size: 12px; gap: 10px; }
  .mini-slot { width: 28px; height: 28px; font-size: 12px; }
  .btn { padding: 8px 16px; font-size: 14px; }
  .btn.big { font-size: 17px; padding: 10px 24px; }
  .home-menu > .btn { padding: 9px 12px 9px 16px; }
  .home-menu > .btn small { font-size: 12px; }
  .home-main { padding: 12px 20px; }
  .logo-en { font-size: 22px; }
  .hs-best, .hs-cap { font-size: 11px; }
  .page-head { padding: 8px calc(16px + var(--sr)) 8px calc(16px + var(--sl)); }
  .page-head h2 { font-size: 18px; }
  /* 左右は iPhone のカメラの切り欠きの分も空ける（アプリは横向きで左右に余白が入る） */
  .gacha-body { padding: 12px calc(16px + var(--sr)) 24px calc(16px + var(--sl)); gap: 12px; }
  .banner-card { padding: 14px 16px; }
  .banner-title { font-size: 22px; }
  .banner-sub { margin-bottom: 10px; }
  .featured { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
  .feat { padding: 6px 8px; font-size: 13px; }
  .gacha-info { padding: 10px 12px; font-size: 12px; }
  #gacha-anim { gap: 10px; }
  .gacha-results { max-height: calc(100vh - 80px); overflow: auto; gap: 8px; padding: 6px; }
  .g-card { width: 100px; height: 126px; }
  .g-front { padding: 22px 5px 6px; gap: 2px; }
  .g-back::before, .g-front::before { inset: 3px; border-radius: 11px; --cl: 9px; }
  .g-emblem { width: 34px; height: 34px; outline-offset: 4px; }
  .g-ribbon { top: 6px; font-size: 8px; padding: 1px 10px; letter-spacing: 1px; }
  .g-new { top: 7px; right: -30px; font-size: 8px; }
  .g-icon { width: 30px; height: 30px; margin: 2px 0 1px; }
  .g-icon span { font-size: 15px; }
  .g-card.r4 .g-icon::before, .g-card.r5 .g-icon::before { inset: -8px; }
  .g-name { font-size: 11px; line-height: 1.2; }
  .g-stars { font-size: 11px; gap: 3px; }
  .g-stars::before, .g-stars::after { width: 8px; }
  .g-tag { font-size: 8px; padding: 0 5px; }
  .equip-body { grid-template-columns: 210px 1fr; gap: 12px; padding: 12px calc(16px + var(--sr)) 24px calc(16px + var(--sl)); }
  .eq-stats { padding: 10px 12px; font-size: 12px; }
  .eq-stats dl { font-size: 12px; gap: 3px 8px; margin-bottom: 10px; }
  .eq-slot-main { padding: 8px 6px 10px; gap: 4px; }
  .eq-glyph { width: 36px; height: 36px; font-size: 16px; }
  .eq-name { font-size: 12px; }
  .eq-slot .slot-key { font-size: 10px; }
  .eq-remove { top: auto; bottom: 4px; right: 4px; font-size: 10px; padding: 1px 6px; }
  .eq-slot-main { padding-bottom: 18px; }
  .eq-detail { font-size: 12px; padding: 10px 12px; }
  .item-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
  .dialog { padding: 16px 20px; gap: 8px; }
  .dialog h2 { font-size: 20px; }
  .result-wave { font-size: 22px; }
  .result-list { font-size: 14px; }
  .hud-wave { font-size: 20px; }
  .hud-sub { font-size: 12px; }
  .b-title { font-size: 30px; }
  #banner.burst .b-title { font-size: 34px; }
  #banner { top: 18%; }
}

/* ---------- タッチ操作 ---------- */
#touch-controls { display: none; }
body.touch #touch-controls { display: block; }
body.touch .hud-help, body.touch #lock-hint, body.touch .action-names { display: none; }
body.touch [data-vkey] { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.touch [data-vkey].pressed { filter: brightness(1.35); transform: scale(0.92); }
body.touch .slot.active.pressed { transform: scale(1.05); }

/* スマホでは一時停止ボタンを左上に置き、右上を属性の切り替えに空ける（ウェーブ表示はその右） */
body.touch .hud-tl { left: calc(66px + var(--sl)); top: calc(10px + var(--st)); }
body.touch .hud-tr { left: calc(14px + var(--sl)); right: auto; top: calc(10px + var(--st)); }
/* ボスの名前と体力ゲージは画面のいちばん上に（下げると画面の真ん中に寄って見づらい。2026-10-07） */
body.touch #hud-boss { top: calc(4px + var(--st)); width: 36vw; }
/* スマホではボタンと重ならないよう、HPバーを左上（ウェーブ表示の下）に置く */
body.touch .hud-bottom { left: calc(20px + var(--sl)); top: calc(80px + var(--st)); bottom: auto; transform: none; width: 180px; align-items: flex-start; }
body.touch .hud-lv { font-size: 13px; }

body.touch .hud-br, body.touch .hud-actions { display: contents; }
/* スマホのボタンは原神スマホ版と同じ比率にする。単位 --u は画面の高さの1%（縦持ちで巨大にならないよう幅でも抑える）。
   サイズと位置は原神の画面から測った値（直径、右端・下端から中心までの距離）で、calc の中の数字がそれ */
body.touch #hud { --u: min(1vh, 0.6vw); }
@supports (height: 1dvh) { body.touch #hud { --u: min(1dvh, 0.6dvw); } }
/* 右側の操作ボタン（攻撃・ジャンプ・回避・星術・奥義・回復薬）は、原神の比率から右下の角を基準に全体を1.04倍にする（大きさも間隔も）。
   右上の属性のボタンの真下に収まる大きさ（1.25 だとスマホの横向きで属性のボタンと高さが重なり、内側へ大きく広がった） */
body.touch #hud { --b: calc(var(--u) * 1.04); }
/* 属性の切り替え：原神のキャラ切り替えの位置に縦に並べる（アイコンの左に名前、その下に星術のクールタイム）。
   ジャンプボタンに名前が隠れないよう、原神より上（一時停止ボタンを退避させた右上）から並べる */
body.touch .hud-slots { position: absolute; top: calc(var(--st) + 5 * var(--u)); right: calc(var(--sr) + 16.5 * var(--u)); flex-direction: column; gap: calc(2.3 * var(--u)); }
body.touch .slot { width: calc(9.6 * var(--u)); height: calc(9.6 * var(--u)); font-size: calc(4 * var(--u)); border-width: 2px; }
body.touch .slot.active { transform: scale(1.12); }
body.touch .slot-wrap .slot-key { display: none; }
body.touch .slot-name { display: block; opacity: 0.8; left: auto; bottom: auto; right: calc(100% + 1.8 * var(--u)); top: 50%; transform: translateY(-65%);
  font-size: calc(2.7 * var(--u)); font-weight: 800; text-align: right; }
body.touch .slot.active .slot-name { opacity: 1; }
body.touch .slot-name::after { content: ""; position: absolute; right: 0; top: calc(100% + 0.5 * var(--u)); width: calc(9 * var(--u)); height: calc(0.5 * var(--u)); min-height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--el) calc((1 - var(--p, 0)) * 100%), rgba(0, 0, 0, 0.45) 0); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); }
/* 名前の部分も含めて行ごとタップできるようにする */
body.touch .slot::before { content: ""; position: absolute; top: calc(-1 * var(--u)); bottom: calc(-1 * var(--u)); right: 0; width: calc(22 * var(--u)); }
body.touch .slot.good::after { top: 50%; left: calc(100% + 0.8 * var(--u)); transform: translateY(-50%); font-size: calc(2.4 * var(--u)); }
/* 原神スマホ版と同じ配置：中央=攻撃、右上=ジャンプ、右下=回避、左=スキル、その左下=爆発 */
/* 配置（2026-10-12 の配置図）：右の列にジャンプ・回避（右端を属性のボタンにそろえる）、その左に攻撃、攻撃の左に奥義、
   属性のボタンの下の段に回復薬・ロックオン、術は左下に小さく（属性を切り替えて戦うと術はあまり使わないため）。数字は中心の位置と直径 */
body.touch .action.skill { position: absolute; right: calc(var(--sr) + (50 - 4.5) * var(--b)); bottom: calc((11 - 4.5) * var(--b)); width: calc(9 * var(--b)); height: calc(9 * var(--b)); }
body.touch .action.burst { position: absolute; right: calc(var(--sr) + (53 - 5.5) * var(--b)); bottom: calc((28 - 5.5) * var(--b)); width: calc(11 * var(--b)); height: calc(11 * var(--b)); }
body.touch .action.burst::after { font-size: calc(3.8 * var(--b)); }
body.touch .action.skill::after { content: "術"; font-weight: 800; font-size: calc(3.6 * var(--b)); color: var(--el); }
body.touch .action.skill .cd-num { font-size: calc(3.2 * var(--b)); }
body.touch .action.skill.cooling::after { content: none; }
/* 回復薬：攻撃ボタンの左上 */
body.touch .action.potion { position: absolute; right: calc(var(--sr) + (45 - 4.25) * var(--b)); bottom: calc((39 - 4.25) * var(--b)); width: calc(8.5 * var(--b)); height: calc(8.5 * var(--b)); }
body.touch .potion-glyph { font-size: calc(4 * var(--b)); }
body.touch .action.potion .key { display: none; }
body.touch .action .key { width: 18px; height: 18px; font-size: 10px; bottom: -4px; right: -2px; }
/* 星術・奥義の E・Q（キーボードのキー）は、スマホでは出さない。コントローラーで遊んでいる間だけ、そのボタンの名前を出す */
body.touch:not(.pad-in-use) .action .key { display: none; }

#joy-zone { position: absolute; left: 0; bottom: 0; width: 40%; height: 72%; pointer-events: auto; touch-action: none; }
/* 移動パッド：常に見える位置に表示し、触れた場所へ移動する */
#joy-base { position: fixed; left: calc(90px + var(--sl)); top: calc(100% - 90px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 12, 28, 0.25) 40%, rgba(10, 12, 28, 0.55) 100%); border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.15); pointer-events: none; transition: transform 0.12s; }
#joy-base::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.35); }
#joy-base .joy-arrow { position: absolute; width: 0; height: 0; border: 7px solid transparent; opacity: 0.85; }
#joy-base .up { left: 50%; top: 4px; margin-left: -7px; border-bottom: 9px solid #fff; border-top-width: 0; }
#joy-base .down { left: 50%; bottom: 4px; margin-left: -7px; border-top: 9px solid #fff; border-bottom-width: 0; }
#joy-base .left { top: 50%; left: 4px; margin-top: -7px; border-right: 9px solid #fff; border-left-width: 0; }
#joy-base .right { top: 50%; right: 4px; margin-top: -7px; border-left: 9px solid #fff; border-right-width: 0; }
#joy-base.active { transform: scale(1.06); border-color: #fff; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d9deef 60%, #aab2cc); border: 3px solid var(--el); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); }
.joy-label { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; }

.t-btn { position: absolute; border-radius: 50%; background: rgba(40, 44, 60, 0.38); border: 2px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.92); display: grid; place-items: center; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); }
.t-btn svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.t-btn svg .fill { fill: currentColor; stroke: none; }
/* 攻撃ボタンだけは押しやすさのため、原神の実測（直径15.7）より少し大きい 17.5。中心の位置は原神と同じ */
.t-attack { right: calc(var(--sr) + (37 - 8.5) * var(--b)); bottom: calc((24 - 8.5) * var(--b)); width: calc(17 * var(--b)); height: calc(17 * var(--b)); border-color: color-mix(in srgb, var(--el) 70%, #fff); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 0 18px color-mix(in srgb, var(--el) 40%, transparent); }
.t-attack svg { width: 56%; height: 56%; }
.t-jump { right: calc(var(--sr) + 16.5 * var(--u)); bottom: calc((38 - 6) * var(--b)); width: calc(12 * var(--b)); height: calc(12 * var(--b)); }
.t-lock { right: calc(var(--sr) + (34 - 4.25) * var(--b)); bottom: calc((39 - 4.25) * var(--b)); width: calc(8.5 * var(--b)); height: calc(8.5 * var(--b)); }
.t-lock svg { width: 60%; height: 60%; }
.t-dash { right: calc(var(--sr) + 16.5 * var(--u)); bottom: calc((12 - 6) * var(--b)); width: calc(12 * var(--b)); height: calc(12 * var(--b)); }

/* 縦持ちのスマホには横向きを促す */
/* ---------- 暗転（洞窟・塔の出入り） ---------- */
.curtain { position: fixed; inset: 0; z-index: 60; background: #03040a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.curtain.on { opacity: 1; pointer-events: auto; }
.curtain.slow { transition-duration: 0.8s; }
.curtain-title { font-size: 30px; font-weight: 800; letter-spacing: 6px; color: var(--gold-soft); text-shadow: 0 0 24px rgba(232, 196, 106, 0.45); opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; text-align: center; padding: 0 16px; }
.curtain-sub { font-size: 16px; letter-spacing: 4px; color: var(--muted); opacity: 0; transition: opacity 0.5s ease 0.35s; text-align: center; padding: 0 16px; }
.curtain.on.titled .curtain-title { opacity: 1; transform: none; }
.curtain.on.titled .curtain-sub { opacity: 1; }

#rotate-hint { display: none; position: fixed; inset: 0; z-index: 100; background: #0e1020; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.rotate-icon { font-size: 64px; color: var(--gold-soft); animation: spin 2s ease-in-out infinite; }
#rotate-hint p { font-size: 18px; font-weight: 700; margin: 0; }
@keyframes spin { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate-hint { display: flex; } }

.first-bonus { padding: 10px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 201, 90, 0.35), rgba(255, 201, 90, 0.08)); border: 1px solid var(--r5); color: #fff3c8; font-weight: 800; text-align: center; }

/* 使い分けヒント：反応を起こせる属性のスロットを光らせる */
.slot.good { box-shadow: 0 0 0 3px #fff3a0, 0 0 18px 6px #ffe066; animation: goodPulse 1s ease-in-out infinite; }
.slot.good::after { content: "効く"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #ffe066; color: #3a2c10; }
@keyframes goodPulse { 50% { box-shadow: 0 0 0 3px #fff3a0, 0 0 26px 10px #ffe066; } }

/* 戦い方のコツ */
.tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tips li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.6; }
.tip-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(232, 196, 106, 0.2); color: var(--gold-soft); border: 1px solid var(--line); }
.glow-demo { padding: 0 6px; border-radius: 6px; background: #ffe066; color: #3a2c10; font-weight: 800; }
.k-touch { display: none; }
body.touch .k-touch { display: inline; }
body.touch .k-pc { display: none; }
#tutorial { z-index: 45; }
@media (max-height: 520px) {
  .tips { gap: 6px; }
  .tips li { font-size: 12px; padding: 6px 10px; line-height: 1.45; }
  .tip-icon { width: 28px; height: 28px; }
}
/* スキップは演出の邪魔にならない右上へ */
#btn-gacha-skip { position: fixed; right: calc(20px + var(--sr)); top: calc(16px + var(--st)); z-index: 5; }

/* ---------- 拡大・横スクロール対策 ---------- */
/* スクロールできる場所は縦方向だけにする（横にはみ出した分は隠す） */
.screen, .page, .overlay, .dialog, .gacha-results, #screen-home { max-width: 100vw; overflow-x: hidden; }
.page, .dialog, .gacha-results, #screen-home { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.equip-body, .gacha-body, .home-panel, .item-list, .featured { min-width: 0; max-width: 100%; }
.eq-main, .eq-stats { min-width: 0; }
img, svg, canvas { max-width: 100%; }
/* スマホではヒントがボタンに重ならないよう、画面の上寄りに出す */
body.touch #toast { top: 36%; max-width: 60vw; font-size: 13px; }

/* 強化アイテムの効果表示 */
.hud-buffs { display: flex; gap: 8px; align-self: flex-start; min-height: 0; }
.buff-chip { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, 0.15) 0); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.buff-chip::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(12, 14, 30, 0.85); }
.buff-glyph { position: relative; color: var(--c); font-weight: 800; font-size: 16px; line-height: 1; }
.buff-sec { position: absolute; bottom: -7px; right: -6px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; background: #fff; color: #1b1d2e; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.buff-chip.ending { animation: buffBlink 0.5s steps(2) infinite; }
@keyframes buffBlink { 50% { opacity: 0.35; } }
body.touch .buff-chip { width: 28px; height: 28px; }
body.touch .buff-glyph { font-size: 13px; }
.dmg.buff { font-size: 22px; letter-spacing: 1px; }
.item-help { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; font-size: 13px; }
.item-help li { display: flex; align-items: center; gap: 8px; }
.item-help .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--c); border: 2px solid var(--c); font-size: 12px; flex: none; }

/* ---------- 冒険（章の選択） ---------- */
.sortie { grid-template-columns: auto 1fr auto; }
.sortie .btn { grid-column: auto; padding-left: 18px; padding-right: 18px; }
.stage-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 18px calc(20px + var(--sr)) 32px calc(20px + var(--sl)); max-width: 1200px; margin: 0 auto; width: 100%; }
.stage-parts { flex-wrap: wrap; padding: 14px calc(20px + var(--sr)) 0 calc(20px + var(--sl)); max-width: 1200px; margin: 0 auto; width: 100%; }
.stages-top { position: sticky; top: 0; z-index: 2; background: rgba(12, 14, 30, 0.98); }
.stages-top:has(.stage-parts:not([hidden])) { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.stages-top + .stage-list { padding-top: 12px; }
.stage-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--el) 35%, transparent), transparent 60%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--el) 55%, transparent); }
.stage-card.locked { filter: grayscale(0.85); opacity: 0.6; }
.stage-card.cleared { border-color: var(--gold); }
.st-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.st-chapter { font-weight: 800; color: var(--el); letter-spacing: 2px; }
.st-head > * { white-space: nowrap; }
.st-done { color: var(--gold-soft); font-weight: 800; }
.st-done:not(.hard) { margin-left: auto; }
.st-name { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: 2px; }
.st-name .el-badge { letter-spacing: 0; }
.st-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1; }
.st-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--text); }
.st-meta span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.stage-card .btn { align-self: flex-end; }
.result-stage { text-align: center; color: var(--muted); font-weight: 700; letter-spacing: 2px; }

/* ---------- 会話シーン ---------- */
.dialogue { position: fixed; inset: 0; z-index: 42; display: flex; align-items: flex-end; justify-content: center; padding: 0 calc(16px + var(--sr)) 24px calc(16px + var(--sl));
  background: linear-gradient(0deg, rgba(8, 10, 22, 0.75) 0%, rgba(8, 10, 22, 0.15) 45%, transparent 70%); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dlg-box { --sp: #e8e2d0; position: relative; width: min(860px, 100%); min-height: 120px; padding: 22px 26px 26px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 26, 50, 0.92), rgba(14, 16, 34, 0.95)); border: 1px solid rgba(232, 196, 106, 0.45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: dlgIn 0.25s ease-out; }
@keyframes dlgIn { from { transform: translateY(16px); opacity: 0; } }
.dlg-speaker { position: absolute; top: -18px; left: 22px; display: flex; align-items: center; gap: 8px; }
.dlg-speaker[hidden] { display: none; }
/* 立ち絵（胸から上）：枠の左下に置き、頭が枠の上へはみ出す。立ち絵があるときは、名前と文章をその右へずらす */
.dlg-box { --pt: 200px; }
.dlg-portrait { position: absolute; left: 12px; bottom: 0; width: var(--pt); height: var(--pt); object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.dlg-portrait[hidden] { display: none; }
.dlg-portrait.pt-in { animation: ptIn 0.28s ease-out; }
@keyframes ptIn { from { opacity: 0; transform: translateX(-14px); } }
.dlg-box.has-pt { padding-left: calc(var(--pt) + 28px); }
.dlg-box.has-pt .dlg-speaker { left: calc(var(--pt) + 22px); }
.dlg-avatar[hidden] { display: none; }
.dlg-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #1b1d2e; background: var(--sp); box-shadow: 0 0 12px color-mix(in srgb, var(--sp) 60%, transparent); border: 2px solid #fff; }
.dlg-name { padding: 4px 14px; border-radius: 999px; background: #1b1d2e; border: 1px solid var(--sp); color: var(--sp); font-weight: 800; letter-spacing: 2px; font-size: 14px; }
.dlg-text { margin: 6px 0 0; font-size: 17px; line-height: 1.8; min-height: 3.6em; white-space: pre-wrap; }
.dlg-box.narr { text-align: center; }
.dlg-box.narr .dlg-text { color: var(--gold-soft); font-style: italic; margin-top: 0; }
.dlg-next { position: absolute; right: 18px; bottom: 10px; color: var(--gold-soft); font-size: 12px; animation: dlgNext 0.9s ease-in-out infinite; }
@keyframes dlgNext { 50% { transform: translateY(4px); opacity: 0.5; } }
.dlg-skip { position: absolute; top: calc(14px + var(--st)); right: calc(16px + var(--sr)); z-index: 1; }
/* 会話の間は右上の属性のボタンを隠す（スマホではスキップと重なる） */
body:has(#dialogue:not([hidden])) #hud-slots { visibility: hidden; }
@media (max-width: 640px) {
  .dlg-box { --pt: 120px; }
}
@media (max-height: 520px) {
  .dialogue { padding-bottom: 12px; }
  .dlg-box { --pt: 136px; min-height: 90px; padding: 18px 20px 20px; }
  .dlg-box.has-pt { padding-left: calc(var(--pt) + 22px); }
  .dlg-text { font-size: 14px; line-height: 1.6; }
  .stage-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding-top: 12px; }
  .st-name { font-size: 18px; }
  .stage-card { padding: 12px; gap: 6px; }
}

/* ---------- 星降りの切り替え・解放のお知らせ ---------- */
.banner-switch { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.banner-kind-btn { --el: #e8c46a; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 40px 10px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); background: rgba(255, 255, 255, 0.05); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; min-width: 0; }
.banner-kind-btn .bk-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.banner-kind-btn .bk-name { font-size: 16px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner-kind-btn .bk-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.banner-kind-btn.on { background: color-mix(in srgb, var(--el) 28%, #1b1d2e); border-color: var(--el); box-shadow: 0 0 14px color-mix(in srgb, var(--el) 40%, transparent); }
.banner-kind-btn.on .bk-label { color: color-mix(in srgb, var(--el) 70%, #fff); }
.banner-kind-btn[aria-expanded="true"] { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
/* ピックアップの一覧（ボタンの下に開く） */
.banner-menu { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(12, 14, 30, 0.94); border: 1px solid var(--line); animation: bmOpen 0.18s ease-out; }
@keyframes bmOpen { from { opacity: 0; transform: translateY(-6px); } }
.bm-part-title { margin: 0 0 6px; font-size: 13px; color: var(--gold-soft); letter-spacing: 1px; }
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bm-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--el) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--el) 22%, transparent), rgba(255, 255, 255, 0.03) 70%); color: var(--text); font-family: inherit; text-align: left; cursor: pointer; overflow: visible; }
.bm-card::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--el); }
.bm-card.on { border-color: var(--el); box-shadow: 0 0 12px color-mix(in srgb, var(--el) 45%, transparent); background: color-mix(in srgb, var(--el) 32%, #1b1d2e); }
.bm-card.locked { opacity: 0.45; cursor: not-allowed; border-style: dashed; background: rgba(255, 255, 255, 0.03); }
.bm-chapter { font-size: 11px; font-weight: 800; color: var(--muted); }
.bm-name { font-size: 14px; font-weight: 800; }
.bm-five { font-size: 11px; color: var(--r5, #ffd84a); }
/* スマホの幅：2つのボタンを同じ幅にして名前は折り返す。一覧は2列で詰めて並べる */
@media (max-width: 520px) {
  .banner-switch { grid-template-columns: 1fr 1fr; gap: 8px; }
  .banner-kind-btn { padding: 8px 28px 8px 12px; }
  .banner-kind-btn .bk-name { white-space: normal; font-size: 14px; line-height: 1.25; }
  .banner-kind-btn .bk-caret { right: 10px; }
  .banner-menu { padding: 10px 8px; }
  .bm-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .bm-card { padding: 6px 8px 6px 12px; }
  .bm-name { font-size: 13px; }
}
.new-badge { position: absolute; top: -8px; right: -6px; padding: 1px 6px; border-radius: 999px; background: #ff5a6a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 0 8px rgba(255, 90, 106, 0.7); animation: newPulse 1.2s ease-in-out infinite; }
@keyframes newPulse { 50% { transform: scale(1.12); } }
#btn-gacha { position: relative; }
#btn-gacha.has-new::after { content: "NEW"; position: absolute; top: -8px; right: 14px; padding: 2px 8px; border-radius: 999px; background: #ff5a6a; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; animation: newPulse 1.2s ease-in-out infinite; }
.banner-card.limited { background: radial-gradient(ellipse at 85% 15%, color-mix(in srgb, var(--el) 55%, transparent), transparent 60%), linear-gradient(135deg, #2a2f63, #171a36 60%, #3a2250); border-color: var(--el); }
.banner-kind { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--el); color: #1b1d2e; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.locked-note { margin-top: 10px; font-size: 13px; color: var(--gold-soft); }
/* 1行に収める：幅が足りないときは、カードの幅（cqi）と文字数（--len、ui.js で設定）から文字を小さくする */
.stage-card { container-type: inline-size; }
.st-unlock { font-size: min(12px, calc(100cqi / var(--len, 24))); white-space: nowrap; font-weight: 700; color: var(--gold-soft); }
.stage-card.cleared .st-unlock { color: var(--muted); }
.unlock-line { text-align: center; padding: 8px 12px; border-radius: 12px; background: rgba(255, 201, 90, 0.15); border: 1px dashed var(--r5); color: #fff3c8; font-weight: 800; }
.unlock-notice { z-index: 46; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--el) 30%, #1c2146) 0%, rgba(7, 8, 20, 0.92) 75%); }
.unlock-box { text-align: center; border-color: var(--el); box-shadow: 0 0 60px color-mix(in srgb, var(--el) 40%, transparent); animation: unlockIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes unlockIn { from { transform: scale(0.7); opacity: 0; } }
.unlock-kicker { align-self: center; padding: 3px 14px; border-radius: 999px; background: #ff5a6a; color: #fff; font-weight: 800; letter-spacing: 3px; }
.unlock-name { font-size: 28px; font-weight: 800; letter-spacing: 4px; color: var(--el); text-shadow: 0 0 18px color-mix(in srgb, var(--el) 60%, transparent); }
.unlock-box .featured { text-align: left; }
.unlock-actions { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
@media (max-height: 520px) {
  .unlock-name { font-size: 20px; }
  .banner-kind-btn { padding: 6px 34px 6px 12px; }
  .banner-kind-btn .bk-name { font-size: 14px; }
}

/* ---------- 試練（無限の試練・星の洞窟・星環の塔） ---------- */
#btn-trials { position: relative; }
#btn-trials.has-new::after { content: "NEW"; position: absolute; top: -8px; right: 14px; padding: 2px 8px; border-radius: 999px; background: #ff5a6a; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; animation: newPulse 1.2s ease-in-out infinite; }
.trials { display: flex; flex-direction: column; gap: 12px; padding: 16px calc(20px + var(--sr)) 32px calc(20px + var(--sl)); max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.trial-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 16px;
  background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--el) 30%, transparent), transparent 60%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--el) 55%, transparent); }
.trial-card.locked { filter: grayscale(0.8); opacity: 0.65; }
.trial-title { font-size: 19px; font-weight: 800; letter-spacing: 3px; color: var(--el, var(--gold-soft)); display: flex; align-items: center; gap: 10px; }
.trial-card.locked .trial-title { color: var(--text); }
.trial-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.trial-lock { font-weight: 800; color: var(--gold-soft); font-size: 14px; }
.trial-stat { font-weight: 800; font-size: 15px; }
.trial-note { font-size: 12px; color: var(--muted); }
.trial-row { display: flex; gap: 10px; align-items: center; }
.trial-row select { flex: 1; background: var(--panel-strong); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-family: inherit; font-size: 16px; }
.new-badge.inline { position: static; animation: none; }
.cave-levels { display: flex; flex-direction: column; gap: 8px; }
.cave-level { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name btn" "best btn" "reward btn"; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(127, 232, 255, 0.25); }
.cave-level.locked { opacity: 0.5; }
.cl-name { grid-area: name; font-size: 14px; }
.cl-rec { margin-left: 8px; font-size: 11px; color: var(--muted); }
.cl-best { grid-area: best; font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.cl-reward { grid-area: reward; font-size: 12px; color: var(--gold-soft); }
.cave-level .btn { grid-area: btn; padding: 8px 18px; }
.rank-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-family: var(--font-en); font-weight: 800; font-size: 14px; color: #1b1d2e; background: #9aa4b8; }
.rank-badge.rS { background: linear-gradient(135deg, #fff1a8, #ffc95a); box-shadow: 0 0 10px rgba(255, 201, 90, 0.7); }
.rank-badge.rA { background: #c79bff; }
.rank-badge.rB { background: #7fb4ff; }
.rank-badge.rC { background: #9ee0b0; }
.rank-badge.big { width: 72px; height: 72px; border-radius: 16px; font-size: 44px; }
.cave-result { display: flex; align-items: center; justify-content: center; gap: 18px; }
.tower-next { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid color-mix(in srgb, var(--el) 50%, transparent); font-size: 13px; }
.tn-floor { font-family: var(--font-en); font-size: 30px; font-weight: 800; color: var(--gold-soft); min-width: 72px; text-align: center; }
.trial-card > .btn { align-self: flex-end; }
/* 星縛りの試練：今週の型（★4の一覧）と証の交換所 */
.bind-week { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bind-week small { color: var(--muted); }
.bind-week .el-badge { margin-left: 6px; }
.bind-kit { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.bind-kit-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "el item" "el own"; gap: 0 8px; align-items: center; font-size: 13px; }
.bind-kit-row .el-badge { grid-area: el; }
.bk-item { grid-area: item; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.bk-own { grid-area: own; font-size: 11px; color: var(--gold-soft); }
.bind-kit-row.rental .bk-own { color: var(--muted); }
/* 星縛りの試練のお守り（いつもの装備とは別の枠）：型を見るの一覧と、付け替えの窓（一覧があるので広く） */
.bind-charm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bind-charm-head .btn { margin-left: auto; }
.bind-charms { display: flex; flex-direction: column; gap: 6px; }
.info-dialog:has(.bind-charm-list) { width: min(760px, 100%); }
.bind-charm-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bind-charm-tools { display: flex; justify-content: flex-end; }
.bind-charm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.bind-tier { border-color: rgba(159, 224, 200, 0.3); }
.bind-ex { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(159, 224, 200, 0.3); }
.bind-ex-head { display: flex; justify-content: space-between; font-size: 14px; }
.bind-ex-head span { color: #9fe0c8; font-weight: 800; }
.bind-ex-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bind-ex-row .bx-name { flex: 1; min-width: 120px; display: flex; flex-direction: column; font-size: 13px; }
.bind-ex-row .bx-name small { font-size: 11px; color: var(--muted); }
.bind-ex-row select { background: var(--panel-strong); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-family: inherit; font-size: 14px; }
.bind-ex-row .btn { padding: 6px 12px; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.result-actions .btn { flex: 1; min-width: 140px; }
.hud-timer { font-family: var(--font-en); font-size: 22px; font-weight: 800; color: #9ff0ff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
@media (max-height: 520px) {
  .trials { gap: 8px; padding-top: 10px; }
  .trial-card { padding: 8px 12px; gap: 6px; }
  .trial-title { font-size: 16px; }
  .cave-level { padding: 6px 10px; }
  .hud-timer { font-size: 16px; }
  body.touch .hud-bottom { top: calc(96px + var(--st)); }
}

/* ---------- ショップ ---------- */
.shop-body { padding: 12px calc(20px + var(--sr)) 32px calc(20px + var(--sl)); display: flex; flex-direction: column; gap: 10px; max-width: 820px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.shop-body h3 { margin: 8px 0 0; }
.shop-body .note { margin: 0; }
.shop-list { display: flex; flex-direction: column; gap: 8px; }
.shop-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); }
.shop-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--c); border: 2px solid var(--c); background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.shop-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-name { font-weight: 800; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-effect { font-size: 13px; color: var(--c); }
.shop-desc { margin: 0; font-size: 12px; color: var(--muted); }
.shop-own { font-size: 13px; color: var(--gold-soft); font-weight: 700; }
.shop-buy { display: flex; gap: 8px; justify-content: flex-end; }
.shop-buy .btn { min-width: 84px; padding: 4px 14px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }

/* ---------- 戦いの準備 ---------- */
#prep { z-index: 44; }
#prep-body { display: flex; flex-direction: column; gap: 12px; }
#prep-body h2 { margin: 0; text-align: center; }
#prep-body .note { margin: 0; text-align: center; }
.prep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.prep-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; }
.prep-item .shop-icon { width: 40px; height: 40px; font-size: 18px; flex: none; }
.prep-item.on { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.prep-name { display: flex; flex-direction: column; font-weight: 800; flex: 1; min-width: 0; }
.prep-name small { font-weight: 500; font-size: 12px; color: var(--muted); }
.prep-check { font-size: 12px; font-weight: 800; color: var(--c); min-width: 2.5em; text-align: right; }
.prep-potion { text-align: center; font-size: 14px; color: #7dff9a; font-weight: 700; }
.prep-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- 設定 ---------- */
.settings-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; }
.settings-box h2 { margin: 0; text-align: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; }
.switch { min-width: 76px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.08); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.switch[aria-pressed="true"] { background: linear-gradient(180deg, #f5e3b0, #d9b25a); color: #3a2c10; border-color: #fff3c8; }
.seg { display: flex; gap: 4px; flex-shrink: 0; }
.seg .switch { min-width: 0; padding: 6px 12px; }
/* カメラの距離・高さのゲージ（両端に「近い／遠い」などの目安） */
.cam-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; max-width: 320px; }
.cam-slider small { flex: none; font-size: 11px; color: var(--muted); }
.cam-slider input[type="range"] { flex: 1; min-width: 0; accent-color: #e8c46a; cursor: pointer; }
.switch[aria-checked="true"] { background: linear-gradient(180deg, #f5e3b0, #d9b25a); color: #3a2c10; border-color: #fff3c8; }
.set-hint { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.set-links { display: flex; flex-direction: column; gap: 8px; }
@media (max-height: 520px) {
  .settings-box { gap: 8px; }
  .set-row { padding: 6px 12px; }
  .set-links { display: grid; grid-template-columns: 1fr 1fr; }
  .set-links .btn small { display: none; }
}

/* ---------- 素材・強化 ---------- */
.enh-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--gold-soft); }
.enh-line .el-badge { background: var(--el, #e8e2d0); }
.enh-btn { margin-left: auto; padding: 4px 14px; font-size: 13px; }
.mat-bag { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mat-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); font-size: 12px; font-weight: 700; }
.mat-cell .el-badge { background: var(--el); }
#enhance-body { display: flex; flex-direction: column; gap: 10px; }
#enhance-body h3 { margin: 4px 0 0; font-size: 15px; }
.enh-head { display: flex; align-items: center; gap: 10px; font-size: 18px; justify-content: center; }
.enh-head .el-badge { background: var(--el); }
.enh-level { display: flex; align-items: baseline; justify-content: center; gap: 14px; font-family: var(--font-en); font-weight: 800; }
.enh-now { font-size: 30px; color: var(--muted); }
.enh-next { font-size: 38px; color: var(--gold-soft); text-shadow: 0 0 14px rgba(232, 196, 106, 0.5); }
.enh-arrow { font-size: 22px; color: var(--muted); }
.enh-max { font-family: var(--font); font-size: 16px; color: var(--gold-soft); }
.enh-pips { display: flex; gap: 5px; justify-content: center; }
.pip { width: 22px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.pip.hard { box-shadow: inset 0 0 0 1px rgba(199, 155, 255, 0.5); }
.pip.final { box-shadow: inset 0 0 0 1px rgba(255, 120, 140, 0.6); }
.pip.on { background: var(--gold); box-shadow: none; }
.enh-effect { margin: 0; text-align: center; font-weight: 700; }
.enh-cost { display: flex; flex-direction: column; gap: 6px; }
.cost-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border-left: 4px solid var(--el); }
.cost-icon { font-size: 18px; color: var(--el); width: 22px; text-align: center; }
.cost-name { display: flex; flex-direction: column; flex: 1; min-width: 0; font-weight: 700; }
.cost-name small { font-weight: 500; font-size: 11px; color: var(--muted); }
.cost-num { font-weight: 800; color: #7dff9a; }
.cost-row.short .cost-num { color: #ff7a8a; }
.st-mat { font-size: 12px; color: var(--muted); }
.st-actions { display: flex; flex-direction: column; gap: 8px; }
.st-actions .btn { width: 100%; }
.hard-btn { display: flex; flex-direction: column; align-items: center; line-height: 1.2; background: linear-gradient(180deg, #6a3a8a, #3e2060); border-color: #c79bff; color: #f2e4ff; }
.hard-btn small { color: #d8c0f0; }
.boss-btn { background: linear-gradient(180deg, #8a3a4a, #551f2e); border-color: #ff9aa8; color: #ffe4e8; }
.boss-btn small { color: #f0c0c8; }
.st-done.hard { color: #d6b0ff; }
.result-mats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.mat-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--el); color: var(--el); background: rgba(0, 0, 0, 0.3); }
.shop-card.locked { opacity: 0.55; }
/* 強化のボタンは、内容が長くてもいつも下に見えるようにする */
#enhance-body .prep-actions { position: sticky; bottom: -18px; margin: 0 -4px -18px; padding: 10px 4px 14px; background: linear-gradient(0deg, rgba(18, 21, 38, 0.98) 70%, rgba(18, 21, 38, 0)); }
@media (max-height: 520px) {
  #enhance-body { gap: 6px; }
  #enhance-body > .note { display: none; }
  .enh-now { font-size: 22px; }
  .enh-next { font-size: 28px; }
  .cost-row { padding: 5px 10px; }
}

/* ---------- 強敵 ---------- */
.cl-boss { font-size: 12px; font-weight: 800; color: #ffb0d8; }
.mat-bag { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mat-cell.core .el-badge { color: #3a2c10; }
.test-list { display: flex; flex-direction: column; gap: 8px; }
.test-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(199, 155, 255, 0.35); }
.test-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.test-name small { font-size: 11px; color: var(--muted); }
.test-row .btn { padding: 6px 12px; font-size: 13px; }
.test-row.locked { opacity: 0.55; } /* 強敵挑戦：まだ倒していない強敵 */

/* ショップのタブ・試練の列 */
.shop-tabs { padding: 2px 0 4px; }
.shop-tabs .tab { flex: 1; max-width: 200px; font-size: 15px; }
/* スマホ横向き（アプリは左右に切り欠きの余白が入る）：タブの名前を1行に収める */
@media (max-height: 520px) { .shop-tabs .tab { white-space: nowrap; font-size: 14px; padding-left: 8px; padding-right: 8px; min-width: 0; } }

/* ---------- 星紋（武器のサブステータス） ---------- */
.crest-line { color: var(--text); }
.sub-badge { font-weight: 800; color: #ffc8ef; }
.sub-none { color: var(--muted); }
.mat-bag { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#crest-body { display: flex; flex-direction: column; gap: 10px; }
.crest-icon { font-size: 22px; color: var(--el); }
.crest-weapon { text-align: center; font-weight: 800; }
.crest-compare { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
.crest-card { flex: 1 1 200px; max-width: 280px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.crest-card.new { border-color: #ff9ee0; box-shadow: 0 0 16px rgba(255, 158, 224, 0.35); }
.cc-title { font-size: 12px; color: var(--muted); font-weight: 800; }
#crest-body > .crest-card { max-width: 320px; }

/* ---------- アカウント（ログイン・新規登録・再設定・はじめての引き継ぎ。js/account.js） ---------- */
#auth { z-index: 90; }
.auth-box { width: min(420px, 100%); box-sizing: border-box; }
.auth-logo { text-align: center; margin-bottom: 4px; }
.auth-logo .logo-en { font-size: 28px; }
.auth-logo .logo-ja { font-size: 14px; letter-spacing: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
/* 16px未満だとiPhoneが入力時に自動拡大する */
.auth-field input { font: 16px var(--font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.auth-field input:focus { border-color: var(--gold); outline: none; }
.auth-notice { color: var(--gold-soft); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link { background: none; border: none; padding: 4px 0; color: var(--gold-soft); font: 13px var(--font); text-decoration: underline; cursor: pointer; }
.auth-choice { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.auth-choice h3 { margin: 0; }
.auth-choice .note { margin: 0; }
/* ログイン中は、縦持ちでも入力できるよう「横向きにしてください」を出さない */
body:has(#auth:not([hidden])) #rotate-hint { display: none; }
/* 入力中（js/main.js の fitToKeyboard）：画面をキーボードの上の見えている部分に合わせ、その中でスクロールできるようにする。
   ロゴは隠して、入力欄の場所を広くする */
html.typing .overlay { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-height, 100%); align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.typing .overlay > .dialog { max-height: none; margin: auto 0; }
html.typing .auth-logo { display: none; }
.set-account { font-weight: 500; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; text-align: right; }
#sync-status { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; max-width: calc(100vw - 32px);
  padding: 8px 16px; border-radius: 999px; background: rgba(60, 14, 22, 0.9); border: 1px solid rgba(255, 90, 106, 0.5); color: #ffd6da; font-size: 13px; text-align: center; }

/* ---------- 戦闘の前の読み込み中（js/main.js の waitForMonsters） ---------- */
#loading { z-index: 80; }
.loading-box { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.loading-title { font-size: 16px; font-weight: 800; letter-spacing: 2px; color: var(--gold-soft); }
.loading-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.loading-bar .fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #d9b25a, #fff0c6); transition: width 0.15s; }
.loading-num { font-family: var(--font-en); font-size: 13px; color: var(--muted); }

/* ---------- キー設定・コントローラー設定（js/ui.js の showKeys・showPadKeys・bindingsTable） ---------- */
body.touch .pc-only { display: none; }
/* HUD のボタンの札：「右クリック」など長い名前でも収まるよう、文字に合わせて横に伸ばす */
.action .key { width: auto; min-width: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; white-space: nowrap; }
.keys-dialog .set-head .keys-reset { grid-column: 1; grid-row: 1; justify-self: start; padding: 6px 14px; font-size: 13px; }
.keys-dialog .set-head h2 { grid-row: 1; margin: 0; }
.keys-table, .keys-col { display: flex; flex-direction: column; gap: 6px; }
.keys-head, .keys-row { display: grid; grid-template-columns: 1fr 150px 150px; gap: 8px; align-items: center; }
.keys-head { font-size: 12px; color: var(--muted); padding: 0 10px; }
.keys-row { padding: 4px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.keys-row.unset { border-color: rgba(255, 90, 106, 0.6); }
.keys-name { font-size: 14px; font-weight: 700; }
.key-btn { font: 700 14px var(--font); padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-btn:hover { border-color: var(--gold); }
.key-btn.empty { color: var(--muted); font-weight: 500; }
.keys-row.unset .key-btn.empty:first-of-type { color: #ffb3bb; }
.key-btn.waiting { border-color: var(--gold); color: var(--gold-soft); animation: keyWait 0.8s ease-in-out infinite alternate; }
@keyframes keyWait { to { background: rgba(232, 196, 106, 0.18); } }
/* 広い画面では、表を2列に並べてスクロールを無くす（狭い画面では1列で、2列目の見出しは出さない） */
@media (min-width: 640px) {
  .dialog.keys-dialog { width: min(1040px, 100%); }
  .keys-table { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .keys-head, .keys-row { grid-template-columns: minmax(0, 1fr) 120px 120px; }
}
@media (max-width: 639px) { .keys-col + .keys-col .keys-head { display: none; } }
/* コントローラー設定：つないでいるか・使うか・視点の速さを1段に（横幅が足りないときは、つないでいるかを別の段にして文字が切れないように） */
.pad-status { margin: 0; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-prefs { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .pad-prefs { grid-template-columns: minmax(0, 1fr) auto auto; } }
@media (min-width: 640px) and (max-width: 799px) {
  .pad-prefs { grid-template-columns: auto auto; justify-content: start; }
  .pad-status { grid-column: 1 / -1; }
}
.pad-prefs .set-row { padding: 6px 12px; gap: 8px; }
.pad-prefs .set-row > span { white-space: nowrap; }
.pad-prefs .seg .switch { padding: 4px 10px; }
/* iPhone の Safari は、スクロールする窓の中の段を縮めてしまい、中身が枠の外へはみ出す。縮めないようにし、端で弾んで空白が出るのも止める */
.keys-dialog > * { flex-shrink: 0; }
.dialog.keys-dialog { overscroll-behavior: contain; }
/* スマホの横向き（低い画面）：表と上の段を詰めて、1画面に収める */
@media (max-height: 520px) {
  .dialog.keys-dialog { padding: 10px 18px; gap: 6px; }
  .keys-dialog h2 { font-size: 18px; }
  .keys-dialog .set-head .btn { padding: 4px 14px; font-size: 13px; }
  .keys-table, .keys-col { gap: 3px; }
  .keys-head, .keys-row { grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 6px; }
  .keys-head { line-height: 1.2; }
  .keys-row { padding: 2px 8px; }
  .keys-name { font-size: 12px; }
  .key-btn { font-size: 12px; padding: 2px 6px; line-height: 1.4; }
  .pad-prefs .set-row { padding: 3px 10px; min-height: 0; }
  .pad-prefs .switch, .pad-prefs .seg .switch { padding: 2px 10px; line-height: 1.4; font-size: 13px; }
}
/* iPhone の Safari の横向き（アドレスバーの分だけ低い）：さらに詰める。列の見出し（メイン・サブ）は外す */
@media (max-height: 380px) {
  .dialog.keys-dialog { padding: 8px 16px; gap: 4px; }
  .keys-dialog .set-head .btn { padding: 2px 12px; }
  .keys-table, .keys-col { gap: 2px; }
  .keys-head { display: none; }
  .key-btn { padding: 1px 6px; line-height: 1.3; }
  .pad-prefs .set-row { padding: 1px 10px; }
}
/* 戦闘のボタンに出す、割り当てたキー・ボタンの名前。PC の属性スロットは「十字↑」など長い名前でも収まるよう、文字に合わせて横に伸ばす */
.slot-wrap .slot-key { width: auto; min-width: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; white-space: nowrap; }
.t-btn .key { display: none; position: absolute; bottom: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: #fff; color: #1b1d2e; font-weight: 800; font-size: 10px; place-items: center; white-space: nowrap; }
/* スマホの画面でコントローラーを使っている間（js/main.js の refreshKeyLabels）：攻撃・回避・ジャンプ・回復薬にも出し、属性スロットは丸の右に出す。
   右に出していた「効く」は、丸の左上へ */
body.touch.pad-in-use .t-btn .key, body.touch.pad-in-use .action.potion .key { display: grid; }
/* 属性スロットの札は、丸の右に少し間をあけて固定（今の属性の丸が大きくなっても、札の大きさ・位置は変わらない） */
body.touch.pad-in-use .slot-wrap .slot-key { display: grid; top: 50%; left: calc(100% + 2 * var(--u)); transform: translateY(-50%); height: 18px; min-width: 18px; font-size: 10px; }
body.touch.pad-in-use .slot.good::after { left: auto; right: calc(100% - 2 * var(--u)); top: calc(-1.5 * var(--u)); transform: none; }
/* 十字キーの向き（js/keybinds.js の padLabelPart）。文字だと端末で大きさがそろわないので、図形で描く */
.dpad { display: inline-block; width: 0.8em; height: 0.8em; background: currentColor; vertical-align: -0.08em; }
.dpad-up { clip-path: polygon(50% 6%, 100% 94%, 0 94%); }
.dpad-down { clip-path: polygon(0 6%, 100% 6%, 50% 94%); }
.dpad-left { clip-path: polygon(6% 50%, 94% 0, 94% 100%); }
.dpad-right { clip-path: polygon(6% 0, 94% 50%, 6% 100%); }
/* コントローラーでメニューを操作している間（js/padNav.js）：選んでいる物をはっきり見せる */
/* コントローラーで今選んでいる物は赤い枠（装備中・選択中の物の金色の枠と見分けるため） */
body.pad-nav :focus { outline: 3px solid #ff4a4a; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 74, 74, 0.28); }
/* 星降りの結果の画面：閉じる・もう1回・もう11回を横に並べる（狭い画面では折り返す） */
.gacha-actions { flex-wrap: wrap; justify-content: center; align-items: center; }
.gacha-actions .pull-btn { min-width: 140px; }

/* ---------- ジェムの購入（js/billing.js） ---------- */
.purchase-box { width: min(480px, 100%); }
.gem-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 16px; color: var(--gold-soft); }
.gem-balance span { font-size: 13px; color: var(--muted); }
.gem-state { padding: 16px 0; }
.gem-state .btn { margin-top: 8px; }
.gem-rules { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 2px; }
.gem-foot { display: flex; justify-content: flex-end; }
.gem-pack .shop-name { font-size: 20px; color: #bfe9ff; }
.gem-confirm { display: flex; justify-content: center; align-items: baseline; gap: 16px; padding: 8px 0; }
.gem-confirm b { font-size: 28px; color: #bfe9ff; }
.gem-confirm span { font-size: 22px; font-weight: 800; color: var(--gold-soft); }
.gem-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gem-history li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.gem-history b { color: #bfe9ff; }
.gem-history small { grid-column: 1 / -1; color: var(--danger); }
.birth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.birth-fields select { font: 16px var(--font); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.birth-fields select:focus { border-color: var(--gold); outline: none; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--gold-soft); }
.auth-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); }
.auth-agree input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.auth-agree a { color: var(--gold-soft); }

/* ---------- ジェムの内訳と、有償ジェム限定の品 ---------- */
.gems-split { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-align: right; letter-spacing: 0; }
.page-head .gems { text-align: right; line-height: 1.25; }
.paid-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #3a1d05; background: linear-gradient(180deg, #ffd98a, #f0a93c); vertical-align: middle; }
.paid-pull { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(240, 169, 60, 0.16), rgba(20, 24, 44, 0.72)); border: 1px solid rgba(240, 169, 60, 0.5); }
.paid-pull-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.paid-pull-info .note { margin: 0; }
.paid-pull-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--gold-soft); }
.paid-pull .pull-btn { flex: none; }
.paid-card { border-color: rgba(240, 169, 60, 0.5); }
@media (max-width: 560px) {
  .paid-pull { flex-direction: column; align-items: stretch; }
}

/* 設定の「fps を表示」：画面の左下に小さく（操作の邪魔にならないよう、押せない） */
.fps-view { position: fixed; left: 6px; bottom: 6px; z-index: 9999; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #d8f5c8; font: 700 12px/1.4 ui-monospace, monospace; pointer-events: none; }
/* 画質は選べる数が多いので、狭いときはボタンを名前の下の行に回す（名前が1文字ずつ折り返さないように） */
.set-quality { flex-wrap: wrap; }
.set-quality > span { flex: 1 0 9em; }

/* 星降りの結果：ボタンの横に残りのジェム */
.ga-gems { padding: 6px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(159, 224, 255, 0.35); line-height: 1.25; text-align: right; font-size: 18px; }
.ga-gems[hidden] { display: none; }
.ga-gems-label { display: block; font-size: 11px; color: var(--muted); text-align: left; }
/* ポーズ画面：スマホの横向きなど低い画面では、カメラの設定まで1画面に収まるよう詰める */
@media (max-height: 520px) {
  #pause .dialog { padding: 10px 18px; gap: 4px; }
  #pause .dialog h2 { margin: 0; font-size: 18px; }
  #pause .dialog > .btn { padding-top: 6px; padding-bottom: 6px; }
  #pause .set-row { padding: 4px 10px; }
  #pause .seg .switch { padding: 4px 10px; }
  #pause .cam-slider input[type="range"] { height: 18px; }
}

/* ---------- 説明の窓（ⓘ ボタンを押したときだけ出す。js/ui.js の infoBtn） ---------- */
.info-btn { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: rgba(0, 0, 0, 0.25); color: var(--muted); font: italic 800 13px/1 Georgia, serif; letter-spacing: 0; cursor: pointer; vertical-align: middle; }
.info-btn:hover, .info-btn:focus-visible { color: var(--gold-soft); }
/* 指で押しやすいように、見た目より広く反応させる */
.info-btn { position: relative; }
.info-btn::after { content: ""; position: absolute; inset: -8px; }
#info-pop { z-index: 95; }
.info-dialog { width: min(480px, 100%); box-sizing: border-box; }
.info-dialog h3 { margin: 0; color: var(--gold-soft); }
.info-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); }

/* ---------- 試練（1列。説明は ⓘ、層・段・強敵は小さなボタンで選ぶ） ---------- */
.tr-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.tr-head { flex: 1 1 auto; display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.tr-head .trial-title { align-self: center; }
.tr-head .trial-stat { font-size: 13px; color: var(--gold-soft); }
.tr-top .trial-row select { min-width: 150px; padding: 8px 10px; }
.tr-top > .btn, .tr-pick > .btn { padding: 8px 20px; }
.tr-btns { display: flex; gap: 6px; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.tr-line { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: 13px; }
.tr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); background: rgba(0, 0, 0, 0.25); color: var(--text); font: 700 13px var(--font); cursor: pointer; }
.tr-chip.on { background: color-mix(in srgb, var(--el) 30%, rgba(0, 0, 0, 0.3)); border-color: var(--el); color: #fff; box-shadow: 0 0 8px color-mix(in srgb, var(--el) 50%, transparent); }
.tr-chip:disabled { opacity: 0.4; cursor: default; }
.rank-badge.mini { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.tr-pick { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid color-mix(in srgb, var(--el) 30%, transparent); }
.tr-pick-info { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.tr-pick-info .cl-best { display: inline-flex; margin-left: 10px; }
.tr-pick .rank-badge { width: 20px; height: 20px; font-size: 12px; }
.trial-card.locked { padding-top: 8px; padding-bottom: 8px; }
.trial-card.locked .trial-title { font-size: 16px; }
.info-dialog .bind-ex-row .bx-name { min-width: 140px; }
.shop-own { font-size: 12px; }
.gem-pack .shop-name { font-size: 18px; }
.gem-pack .shop-desc { font-size: 12px; }
/* 値段ボタンは「1個 ◆250」の1行にして、品物1つを1段に収める */
.shop-buy .btn { flex-direction: row-reverse; gap: 6px; min-height: 0; padding: 7px 14px; }
.shop-buy .btn small { font-size: 11px; opacity: 0.8; }

/* ---------- 装備：属性タブ（アビリティ・武器のタブの下）。選んだ属性の分だけ並べる ---------- */
.el-tabs { gap: 6px; flex-wrap: wrap; }
.el-tab { min-width: 52px; padding: 6px 14px; color: var(--el); border-color: color-mix(in srgb, var(--el) 45%, transparent); }
.el-tab.on { background: var(--el); border-color: var(--el); color: #1b1d2e; }
.alchemy { padding: 8px 12px; gap: 8px; }
.alchemy .al-text { flex: 1 1 120px; }
.alchemy .btn.small { padding: 6px 12px; }
.eq-stats h3 .info-btn { margin-left: 4px; }
/* 名前と所持数を1行に並べて、品物1つの段を低くする（狭いときは折り返す） */
.shop-info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.shop-card { grid-template-columns: 34px 1fr auto; padding: 6px 12px; }
.shop-card .shop-icon { width: 34px; height: 34px; font-size: 16px; }

/* ---------- 星降り：見出しの右に「通常／ピックアップ」、天井までの回数はいつも見せる ---------- */
#screen-gacha .page-head h2 { flex: none; }
.gacha-switch { flex: 1; display: flex; gap: 6px; min-width: 0; }
.gs-btn { --el: #e8c46a; position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--el) 45%, transparent); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 800 14px var(--font); white-space: nowrap; cursor: pointer; }
.gs-btn.on { background: color-mix(in srgb, var(--el) 30%, #1b1d2e); border-color: var(--el); box-shadow: 0 0 12px color-mix(in srgb, var(--el) 40%, transparent); }
.gs-btn .bk-caret { font-size: 10px; color: var(--muted); }
.pull-row { align-items: center; }
.pull-row .history-btn { margin-right: 0; }
.gacha-side .pity { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 10px; font-size: 13px; color: var(--gold-soft); font-weight: 700; }
.gacha-side .pity .info-btn { grid-column: 2; grid-row: 1 / span 2; }
.pity b, .ga-pity b { font-size: 1.25em; color: #fff3c8; }
.paid-pull-title .info-btn { margin-left: 2px; }
/* 結果の画面：残りのジェムの横に、天井までの回数 */
.ga-pity { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 201, 90, 0.35); font-size: 13px; font-weight: 700; color: var(--gold-soft); line-height: 1.35; }
.ga-pity[hidden] { display: none; }
@media (max-width: 560px) {
  #screen-gacha .page-head { flex-wrap: wrap; }
  .gacha-switch { order: 3; flex-basis: 100%; }
}
@media (max-height: 520px) {
  .gs-btn { padding: 5px 12px; font-size: 13px; }
  .pull-row { gap: 10px; }
}
.paid-pull-sure { font-size: 14px; font-weight: 800; color: #fff3c8; }

/* ---------- 設定：横に広く使って2列。小さな補足は ⓘ の中 ---------- */
.settings-box { width: min(900px, 100%); box-sizing: border-box; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-items: start; }
.set-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.set-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
#settings .set-quality { flex-wrap: nowrap; }
#settings .set-quality > span { flex: none; }
#settings .cam-slider { max-width: none; }
#settings .set-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#settings .set-links .btn { padding: 8px 12px; font-size: 14px; }
/* 途中で改行しない言葉のかたまり（「コントローラー｜設定」のように、折り返すときは かたまりの間で改行する）。
   ボタン（.btn）は中身を横に並べるので、かたまりは .words で1つにまとめてから、その中で折り返す（まとめないと、かたまりが左右に並んでそれぞれの中で折り返す） */
.words { text-align: center; }
.word { display: inline-block; white-space: nowrap; }
#settings .set-links .btn small { display: none; }
@media (max-width: 640px) {
  .set-grid { grid-template-columns: 1fr; }
  #settings .set-quality { flex-wrap: wrap; }
}
@media (max-height: 520px) {
  .settings-box h2 { font-size: 18px; }
  #settings .set-row { padding: 5px 12px; min-height: 0; }
  #settings .switch { padding: 4px 12px; }
  #settings .set-links .btn { padding: 6px 10px; }
}
.set-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.set-head h2 { grid-column: 2; }
.set-head .btn { grid-column: 3; justify-self: end; padding: 6px 20px; font-size: 14px; }
/* 星降りの一覧：探し方（ストーリー／属性）のタブ */
.bm-find .tab { flex: 1; max-width: 240px; }
.el-tab { position: relative; }
.part-tabs { gap: 6px; flex-wrap: wrap; }
.part-tab { position: relative; padding: 6px 16px; }
.part-tab.dim:not(.on) { opacity: 0.5; } /* まだ1つも開いていない部 */
/* 設定：スマホの横向き（幅が狭い）でも、画質のボタン・カメラのゲージが枠からはみ出さないように縮める */
.set-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
#settings .set-row { min-width: 0; }
#settings .seg { flex-shrink: 1; min-width: 0; }
#settings .seg .switch { padding: 5px 9px; }
#settings .cam-slider { flex: 1 1 0; min-width: 0; }
/* スマホではキー設定が無いので、退会を横いっぱいの1段にして穴を作らない（PC は6つで2列×3段） */
body.touch #settings #btn-delete-account { grid-column: span 2; }
@media (max-width: 760px) {
  #settings .set-row { padding-left: 10px; padding-right: 10px; gap: 8px; }
  #settings .seg { gap: 3px; }
  #settings .seg .switch { padding: 4px 7px; font-size: 13px; }
  #settings .cam-slider { gap: 4px; }
}
#settings .set-row > span:first-child { flex: none; white-space: nowrap; }
#settings .set-account { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 520px) {
  .settings-box { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
  #settings .set-grid, #settings .set-col, #settings .set-links { gap: 6px; }
  #settings .set-row { padding-top: 3px; padding-bottom: 3px; }
  #settings .switch { padding-top: 3px; padding-bottom: 3px; }
  #settings .set-links .btn { padding-top: 5px; padding-bottom: 5px; }
}

/* ---------- 強化：横に広く使って2列（左：段階と効果／右：必要な素材） ---------- */
#enhance .dialog { width: min(860px, 100%); box-sizing: border-box; }
.enh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px 20px; align-items: center; }
.enh-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#enhance-body h3 { display: flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .enh-grid { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  #enhance-body { padding-top: 12px; padding-bottom: 12px; }
  #enhance-body h3 { font-size: 13px; margin: 0; }
  .enh-col { gap: 5px; }
  .cost-row { padding: 4px 10px; }
  .mat-cell { padding: 3px 2px; }
  #enhance-body .prep-actions { padding-top: 6px; padding-bottom: 8px; }
  #enhance-body .prep-actions .btn { padding-top: 6px; padding-bottom: 6px; }
}
.enh-cost.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.enh-cost.two .cost-row { gap: 6px; padding-left: 8px; padding-right: 8px; }
@media (max-height: 520px) {
  #enhance-body .prep-actions { bottom: -12px; margin-bottom: -12px; }
}
/* 素材名・数は1行に（幅が狭いときに1文字ずつ折り返さないように） */
.cost-name { white-space: nowrap; }
.cost-name small { white-space: normal; }
.cost-num { flex: none; white-space: nowrap; }
@media (max-width: 760px) {
  .enh-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px 12px; }
  .pip { width: 14px; }
  .enh-pips { gap: 3px; }
  .enh-effect { font-size: 13px; }
  .enh-cost.two .cost-row { gap: 4px; padding: 4px 6px; font-size: 13px; }
  .enh-cost.two .cost-icon { width: 14px; font-size: 14px; }
  .enh-cost.two .cost-num { font-size: 12px; }
}
/* とても低い画面（ブラウザのバーが出ているスマホの横向きなど）では「手持ちの素材」の見出しを省く */
@media (max-height: 360px) { #enhance-body .enh-bag-title { display: none; } }

/* ---------- 星降り：左にピックアップの札、右に引くボタンと回数、下に有償の★5確定 ---------- */
.gacha-body { max-width: 1100px; }
.gacha-main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; align-items: stretch; }
.gacha-side { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.gacha-side .pull-btn { width: 100%; min-width: 0; }
.gacha-side .pity { justify-content: center; }
.gacha-side .history-btn { align-self: center; padding: 6px 24px; font-size: 14px; }
.gacha-side .first-bonus { padding: 6px 10px; font-size: 12px; }
.paid-pull .paid-pull-info { gap: 2px; }
@media (max-width: 640px) { .gacha-main { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  .gacha-body { gap: 10px; padding-bottom: 12px; }
  .gacha-main { grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; }
  .gacha-side { gap: 6px; }
  .gacha-side .pull-btn { padding: 7px 12px; }
  .gacha-side .history-btn { padding: 4px 20px; }
  .banner-card { padding: 10px 14px; }
  .banner-kind { margin-bottom: 2px; }
  .banner-title { font-size: 20px; letter-spacing: 4px; }
  .banner-sub { margin: 2px 0 8px; font-size: 13px; }
  /* 常設の★5は数が多いので、横に並べて指で送る（縦に伸ばさない） */
  .gacha-main .featured { display: flex; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; }
  .gacha-main .feat { flex: none; min-width: 160px; }
  .locked-note { margin-top: 6px; font-size: 12px; }
  .paid-pull { padding: 6px 12px; gap: 10px; }
  .paid-pull .pull-btn { padding: 6px 14px; min-width: 0; }
}
.paid-pull-left { margin-left: 12px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.gacha-main .featured { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.gacha-main .featured::-webkit-scrollbar { height: 4px; }
.gacha-main .featured::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 2px; }
/* とても低い画面（ブラウザのバーが出ているスマホの横向きなど） */
@media (max-height: 360px) {
  #screen-gacha .page-head { padding-top: 5px; padding-bottom: 5px; }
  .gacha-body { padding-top: 8px; gap: 8px; }
  .banner-card .banner-kind { display: none; }
  .banner-sub { margin-bottom: 6px; font-size: 12px; }
  .feat { padding: 4px 8px; }
  .gacha-side { gap: 4px; }
  .gacha-side .pull-btn { padding: 4px 12px; }
  .gacha-side .history-btn { padding: 3px 18px; }
}

/* ---------- 装備：上にステータスと武器の帯、左にスロット（2×2）と詳細、右に属性タブと一覧、下に素材 ---------- */
#screen-equip .page { overflow: hidden; }
.equip-body { flex: 1; min-height: 0; box-sizing: border-box; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "status status" "weapon weapon" "left right" "mats mats"; gap: 8px 14px; padding: 10px calc(18px + var(--sr)) 10px calc(18px + var(--sl)); }
.eq-statusbar { grid-area: status; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; padding: 6px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.eq-stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; }
.eq-stat small { color: var(--muted); font-size: 11px; }
.eq-weaponbar { grid-area: weapon; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--el); }
.eq-weaponbar .el-badge { flex: none; }
.wb-mat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.wb-mat small { font-size: 10px; color: var(--muted, #b9b3a3); }
.wb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-main .wc-name { display: flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.wb-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-btns { flex: none; display: flex; gap: 6px; }
.eq-left { grid-area: left; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.eq-right { grid-area: right; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.eq-right .item-list { flex: 1; min-height: 0; overflow-y: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding-right: 2px; }
.eq-list-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; color: var(--gold-soft); }
.eq-list-head .el-tabs { margin-left: auto; }
.eq-mats { grid-area: mats; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gold-soft); }
.eq-mats .mat-bag { flex: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.eq-mats .mat-cell { flex-direction: row; justify-content: center; gap: 6px; padding: 3px 4px; font-size: 11px; white-space: nowrap; }
.eq-mats .mat-cell .el-badge { min-width: 18px; height: 18px; font-size: 10px; }
/* スロット：2×2。丸・名前を横に並べて低くする */
.equip-body .eq-slots { grid-template-columns: 1fr 1fr; gap: 6px; }
.equip-body .eq-slot-main { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 8px; border-radius: 12px; text-align: left; }
.equip-body .eq-slot-main .slot-key { position: absolute; top: 3px; right: 8px; font-size: 10px; }
.equip-body .eq-glyph { flex: none; width: 32px; height: 32px; font-size: 14px; }
.equip-body .eq-name { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 8px; }
.equip-body .eq-remove { top: auto; bottom: 4px; right: 4px; font-size: 10px; padding: 1px 6px; }
.equip-body .eq-detail { padding: 8px 12px; gap: 4px; font-size: 12px; }
.equip-body .d-head { font-size: 14px; flex-wrap: wrap; gap: 6px; }
.equip-body .d-head .rank { font-size: 12px; }
.equip-body .d-skill { align-items: flex-start; }
.equip-body .d-skill .key { min-width: 20px; height: 20px; font-size: 11px; flex: none; }
.equip-body .item { padding: 6px 8px; grid-template-columns: 34px 1fr; column-gap: 8px; }
.equip-body .it-glyph { width: 34px; height: 34px; font-size: 14px; }
.equip-body .alchemy { padding: 6px 10px; }
@media (max-width: 640px) {
  #screen-equip .page { overflow: auto; }
  .equip-body { flex: none; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "status" "weapon" "left" "right" "mats"; }
  .eq-left, .eq-right .item-list { overflow: visible; }
  .eq-weaponbar { flex-wrap: wrap; }
  .eq-mats { flex-direction: column; align-items: stretch; }
  .eq-mats .mat-bag { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 520px) {
  .equip-body { gap: 6px 12px; padding-top: 6px; padding-bottom: 6px; }
  .eq-statusbar { padding: 3px 12px; }
  .eq-weaponbar { padding: 4px 10px; }
  .eq-right .item-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .equip-body .eq-list-head .el-tab { padding: 3px 10px; min-width: 40px; }
}
/* 素材の帯：属性の素材は数が2つあるので、幅は中身に合わせる（等分だと重なる） */
.eq-mats .mat-bag { display: flex; justify-content: space-between; gap: 4px; min-width: 0; }
.eq-mats .mat-cell { flex: none; }
/* 中で送る一覧のスクロールバーは細く目立たなく */
.eq-left, .eq-right .item-list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.eq-left::-webkit-scrollbar, .eq-right .item-list::-webkit-scrollbar { width: 4px; }
.eq-left::-webkit-scrollbar-thumb, .eq-right .item-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 2px; }
.equip-body .d-skill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.equip-body .d-skill .key { display: inline-grid; margin-right: 6px; vertical-align: middle; }
.equip-body .d-head .enh-btn { margin-left: 0; padding: 2px 12px; font-size: 12px; }
.eq-mats { gap: 6px; }
.eq-mats .mat-cell { gap: 4px; padding: 3px 5px; }
.equip-body .d-head { flex-wrap: nowrap; white-space: nowrap; }
.equip-body .d-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.equip-body .d-head .rar { font-size: 11px; }
.eq-mats .mat-bag { gap: 3px; }
@media (max-height: 520px) { .eq-left { gap: 6px; } }
/* 幅が狭いとき：素材は数を2段に重ねて横幅を抑える */
@media (max-width: 760px) {
  .eq-statusbar { gap: 2px 10px; }
  .eq-stat { font-size: 12px; gap: 4px; }
  .eq-mats .mat-cell { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: center; gap: 0 4px; padding: 2px 6px; font-size: 10px; line-height: 1.2; }
  .eq-mats .mat-cell .el-badge { grid-row: 1 / span 2; }
}
/* とても低い画面：武器の2行目を省き、スロットを低くする */
@media (max-height: 360px) {
  .wb-sub { display: none; }
  .equip-body .eq-glyph { width: 26px; height: 26px; font-size: 12px; }
  .equip-body .eq-slot-main { padding: 3px 8px; }
  .equip-body .eq-name { padding-top: 6px; font-size: 12px; }
  .eq-weaponbar .btn.small { padding: 4px 10px; }
}
@media (max-height: 360px) {
  .equip-body { gap: 4px 10px; }
  .eq-left { gap: 4px; }
  .equip-body .eq-slots { gap: 4px; }
  .equip-body .eq-detail { padding: 4px 10px; gap: 2px; }
  .eq-weaponbar { padding: 2px 10px; }
}

/* ---------- 冒険：1章を横長の1段に（左：章の情報、右：3つのボタンを縦に。3段分の高さを確保） ---------- */
.stage-parts { flex-wrap: wrap; }
.stage-list { grid-template-columns: 1fr; max-width: 920px; gap: 10px; }
.stage-part-title { margin: 0; font-size: 15px; color: var(--gold-soft); }
.stage-card { flex-direction: row; align-items: stretch; gap: 14px; padding: 12px 14px; }
.st-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.st-name { font-size: 20px; }
.st-name .info-btn { letter-spacing: 0; }
.st-lock { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.stage-card .st-actions { flex: none; width: 190px; justify-content: center; gap: 6px; }
.stage-card .st-actions .btn { padding-top: 7px; padding-bottom: 7px; }
.st-unlock { font-size: 12px; white-space: normal; }
@media (max-width: 600px) {
  .stage-card { flex-direction: column; }
  .stage-card .st-actions { width: auto; }
}
@media (max-height: 520px) {
  .stage-list { gap: 8px; }
  .stage-card { padding: 8px 12px; gap: 12px; }
  .st-info { gap: 4px; }
  .st-name { font-size: 17px; }
  .stage-card .st-actions { width: 170px; gap: 5px; }
  .stage-card .st-actions .btn { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
  .stage-parts .tab { padding: 5px 14px; font-size: 13px; }
  .stage-parts { padding-top: 8px; }
  .stages-top:has(.stage-parts:not([hidden])) { padding-bottom: 8px; }
}
/* 装備：上の段（ステータスの4つのまとまり＋武器の帯。幅が足りないときは縦に重ねる） */
.equip-body { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top" "left right" "mats mats"; }
.eq-top { grid-area: top; display: flex; gap: 8px 12px; min-width: 0; }
.eq-statusbar { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 0 16px; padding: 4px 14px; }
.eq-stat-group { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-content: center; }
.eq-stat-group .eq-stat { display: contents; }
.eq-stat-group small { font-size: 11px; color: var(--muted); white-space: nowrap; align-self: center; }
.eq-stat-group b { font-size: 13px; text-align: right; white-space: nowrap; }
.eq-weaponbar { flex: 1; min-width: 0; }
.wb-main .wc-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .eq-top { flex-direction: column; }
  .eq-statusbar { justify-content: space-between; }
}
@media (max-width: 640px) {
  .equip-body { grid-template-areas: "top" "left" "right" "mats"; }
  .eq-statusbar { flex-wrap: wrap; gap: 4px 16px; }
}
.eq-stat-lv { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; align-self: center; }
.eq-stat-lv small { font-size: 11px; color: var(--muted); }
.eq-stat-lv b { font-family: var(--font-en); font-size: 22px; line-height: 1; color: var(--gold-soft); }
.eq-statusbar { align-items: center; padding-top: 3px; padding-bottom: 3px; }
.eq-stat-group { line-height: 1.25; }
@media (max-height: 520px) {
  .equip-body .eq-glyph { width: 28px; height: 28px; font-size: 13px; }
  .equip-body .eq-slot-main { padding-top: 4px; padding-bottom: 4px; }
  .equip-body .eq-name { padding-top: 6px; }
  .equip-body .eq-detail { padding: 6px 12px; gap: 3px; }
}
@media (max-height: 360px) {
  .eq-statusbar { padding-top: 1px; padding-bottom: 1px; }
  .eq-stat-group { line-height: 1.12; }
  .eq-stat-group b { font-size: 12px; }
  .eq-stat-lv b { font-size: 18px; }
  .equip-body .eq-glyph { width: 24px; height: 24px; font-size: 11px; }
  .equip-body .eq-slot-main { padding-top: 2px; padding-bottom: 2px; }
  .equip-body .eq-name { padding-top: 5px; }
  .equip-body .d-head { font-size: 13px; }
}
@media (max-height: 360px) { .equip-body .eq-slot-main .slot-key { display: none; } .equip-body .eq-name { padding-top: 0; } }
.wb-atk { margin-left: 8px; font-weight: 800; color: var(--text); white-space: nowrap; }
.wb-atk small { font-size: 11px; font-weight: 500; color: var(--muted); }
/* 冒険：3列（左：章の情報／真ん中：ボス素材・解放と出撃／右：ハード・ボスのみ） */
.st-mid { flex: 1.1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.st-mid .st-go { width: 100%; padding-top: 7px; padding-bottom: 7px; }
.stage-card .st-actions { width: 160px; }
@media (max-width: 600px) { .st-mid { flex: none; } }
@media (max-height: 520px) {
  .st-mid { gap: 4px; }
  .st-mid .st-go { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
  .stage-card .st-actions { width: 150px; }
  .st-mat, .st-unlock { font-size: 11px; }
}
.stage-card .st-actions .btn small { white-space: nowrap; font-size: 11px; }
@media (max-height: 520px) { .stage-card .st-actions .btn { padding-left: 8px; padding-right: 8px; } .stage-card .st-actions .btn small { font-size: 10px; } }

/* ---------- 装備：一覧を外したので、左にスロット（2×2）、右に詳細を大きく ---------- */
#screen-equip .page { overflow: auto; }
.equip-body { flex: 1 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; max-width: 1100px; }
.eq-left, .eq-right { overflow: visible; }
.equip-body .eq-slots { height: 100%; grid-auto-rows: 1fr; gap: 8px; }
.equip-body .eq-slot-main { height: 100%; padding: 10px 12px; }
.equip-body .eq-glyph { width: 40px; height: 40px; font-size: 17px; }
.equip-body .eq-name { font-size: 15px; padding-top: 10px; }
.equip-body .eq-slot.empty .eq-name { color: var(--muted); font-size: 13px; }
.equip-body .eq-detail { height: 100%; box-sizing: border-box; padding: 10px 14px; gap: 6px; font-size: 13px; justify-content: center; }
.equip-body .eq-detail.empty { align-items: flex-start; }
.equip-body .d-head { font-size: 16px; }
.equip-body .d-skill { white-space: normal; }
.d-bonus { display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--gold-soft); }
.d-bonus small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.d-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
/* 選択画面：画面いっぱいに広げて、大きめのカードで選ぶ */
#pick { z-index: 42; padding: 10px calc(10px + var(--sr)) 10px calc(10px + var(--sl)); }
.pick-dialog { width: min(1100px, 100%); height: 100%; max-height: none; box-sizing: border-box; padding: 14px 18px; gap: 10px; overflow: hidden; }
.pick-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pick-head h2 { margin: 0; font-size: 18px; color: var(--gold-soft); }
.pick-tabs-label { margin-left: auto; font-size: 13px; color: var(--muted, #b9b3a3); display: inline-flex; align-items: center; gap: 4px; }
.pick-head .pick-tabs-label + .el-tabs { margin-left: 0; }
.pick-head .el-tabs { margin-left: auto; }
.pick-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-content: start; padding: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.pick-item { grid-template-rows: auto; align-items: start; padding: 10px 12px; }
.pick-item .it-glyph { grid-row: 1 / span 5; align-self: center; }
.pick-item .it-name { font-size: 15px; }
.pick-item .it-sub2 { font-size: 11px; color: var(--muted); }
.pick-item .it-sub2.sub-badge { color: #ffc8ef; }
/* 武器の一覧：カードの右に「強化」「星紋」（装備しないまま使える）。それぞれの窓は一覧より手前に出す */
.pick-list.weapons { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pick-cell { display: flex; gap: 6px; min-width: 0; }
.pick-cell > .pick-item { flex: 1; min-width: 0; }
.pick-btns { flex: none; display: flex; flex-direction: column; gap: 4px; }
.pick-btns .btn { flex: 1; padding: 2px 10px; line-height: 1.2; white-space: nowrap; }
.pick-btns small { font-size: 11px; color: var(--muted); }
#enhance, #crest, #alchemy4 { z-index: 43; }
@media (max-height: 520px) {
  .equip-body .eq-glyph { width: 32px; height: 32px; font-size: 14px; }
  .equip-body .eq-slot-main { padding: 6px 10px; }
  .equip-body .eq-name { font-size: 13px; padding-top: 8px; }
  .equip-body .eq-detail { padding: 6px 12px; gap: 3px; font-size: 12px; }
  .equip-body .d-head { font-size: 14px; }
  .pick-dialog { padding: 8px 12px; gap: 6px; }
  .pick-head h2 { font-size: 15px; }
  .pick-head .el-tab { padding: 3px 12px; }
  .pick-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
  .pick-item { padding: 6px 10px; }
  .pick-item .it-name { font-size: 13px; }
}
@media (max-width: 640px) { .equip-body { grid-template-columns: 1fr; } }
/* 冒険：出撃ボタンも右のハード・ボスのみと同じ2行の作りにして、高さをそろえる */
.st-mid .st-go { flex-direction: column; line-height: 1.2; padding-left: 8px; padding-right: 8px; }
.st-mid .st-go small { font-size: 11px; white-space: nowrap; }
.st-mid .st-go.primary small { color: #5a4416; }
@media (max-height: 520px) { .st-mid .st-go small { font-size: 10px; } }
@media (max-height: 520px) { .pick-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-height: 520px) { .pick-list.weapons { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.d-bonus { flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
@media (max-height: 360px) {
  .equip-body .eq-detail { font-size: 11px; gap: 2px; }
  .d-actions .btn.small { padding: 3px 10px; }
}

/* ---------- 星紋：スクロールせずに収まるよう、見出しを1行に・説明は ⓘ ---------- */
#crest .dialog { width: min(720px, 100%); box-sizing: border-box; }
.crest-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.crest-head .crest-weapon { margin-left: 10px; font-size: 15px; }
.crest-compare { flex-wrap: nowrap; align-items: center; }
.crest-card { padding: 10px 12px; }
.crest-note { margin: 0; text-align: center; font-size: 12px; }
#crest-body .prep-actions { align-items: center; }
.crest-have { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-height: 520px) {
  #crest-body { gap: 8px; }
  .crest-card { padding: 6px 10px; gap: 2px; }
}
#crest-body > .crest-card { flex: none; width: 100%; box-sizing: border-box; }
/* 冒険：出撃ボタンを右の「ボスのみ」と同じ高さに（真ん中と右の列を下にそろえる） */
.st-mid, .stage-card .st-actions { justify-content: flex-end; }

/* 星降り（PCなど縦に余裕がある画面）：通常の星降りは★5が多いので、一覧を小さめの札にして枠の中で送る（全体を1画面に収める） */
@media (min-height: 521px) {
  .gacha-main .banner-card:not(.limited) { padding: 20px 24px; display: flex; flex-direction: column; }
  .gacha-main .banner-card:not(.limited) .banner-title { font-size: 26px; }
  .gacha-main .banner-card:not(.limited) .banner-sub { margin-bottom: 12px; font-size: 14px; }
  .gacha-main .banner-card:not(.limited) .featured { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; max-height: calc(100vh - 372px); overflow-y: auto; padding-right: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
  .gacha-main .banner-card:not(.limited) .feat { padding: 5px 9px; font-size: 13px; gap: 0; }
  .gacha-main .banner-card:not(.limited) .feat-type { font-size: 10px; }
  .gacha-main .banner-card:not(.limited) .locked-note { margin-top: 8px; }
}
@media (min-height: 521px) { #screen-gacha .gacha-body { padding-top: 16px; padding-bottom: 16px; gap: 14px; } }
/* 星降り（PC）：画面を広く使い、文字も大きめに（スクロールしない範囲で） */
@media (min-height: 521px) and (min-width: 900px) {
  #screen-gacha .gacha-body { max-width: 1400px; padding-left: 32px; padding-right: 32px; gap: 18px; }
  .gacha-main { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .gacha-main .banner-card { padding: 24px 30px; }
  .gacha-main .banner-card .banner-title { font-size: 32px; }
  .gacha-main .banner-card .banner-sub { font-size: 16px; margin-bottom: 16px; }
  .gacha-main .banner-card .feat { font-size: 15px; padding: 10px 14px; }
  .gacha-main .banner-card .feat-type { font-size: 12px; }
  .gacha-main .banner-card:not(.limited) .featured { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: calc(100vh - 432px); }
  .gacha-main .banner-card:not(.limited) .feat { padding: 7px 12px; font-size: 14px; }
  .gacha-main .banner-card .locked-note { font-size: 14px; }
  .gacha-side { gap: 14px; }
  .gacha-side .pull-btn { padding: 14px 18px; font-size: 18px; }
  .gacha-side .pull-btn small { font-size: 13px; }
  .gacha-side .pity { font-size: 15px; }
  .gacha-side .history-btn { font-size: 15px; padding: 8px 28px; }
  .paid-pull { padding: 14px 22px; }
  .paid-pull-title { font-size: 18px; }
  .paid-pull-sure { font-size: 16px; }
  .paid-pull-left { font-size: 14px; }
  .paid-pull .pull-btn { padding: 12px 26px; font-size: 17px; }
  .gs-btn { padding: 8px 20px; font-size: 15px; }
}
@media (min-height: 521px) and (min-width: 900px) {
  .gacha-main .banner-card:not(.limited) { padding: 24px 30px; }
  .gacha-main .banner-card:not(.limited) .banner-title { font-size: 32px; }
  .gacha-main .banner-card:not(.limited) .banner-sub { font-size: 16px; margin-bottom: 14px; }
  .gacha-main .banner-card:not(.limited) .feat-type { font-size: 11px; }
}

/* 星降り：ピックアップの選択画面（重ねて開く。一覧はこの中だけで送る） */
#banner-pick { z-index: 42; padding: 10px calc(10px + var(--sr)) 10px calc(10px + var(--sl)); }
/* 縦にだけ送る（札の NEW の印が右上にはみ出す分は余白で受ける） */
#banner-pick-body .banner-menu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 2px 0; background: none; border: none; animation: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
#banner-pick-body .bm-find { margin-left: auto; }
#banner-pick-body .bm-find .tab { flex: none; }
/* とても低い画面：引くボタンを1行（「1回星降り ◆160」）にして、右の列を低くする */
@media (max-height: 360px) {
  .gacha-side .pull-btn { flex-direction: row; gap: 8px; padding: 6px 10px; white-space: nowrap; }
  .gacha-side .pull-btn small { font-size: 11px; }
  .gacha-body { padding-bottom: 6px; }
}
@media (max-height: 360px) { .gacha-main .banner-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ---------- 装備（PC）：画面を広く使い、文字も大きめに（スクロールしない範囲で） ---------- */
@media (min-height: 521px) and (min-width: 900px) {
  .equip-body { max-width: 1300px; gap: 14px 18px; padding: 16px 32px; }
  .eq-top { gap: 14px; }
  .eq-statusbar { padding: 10px 20px; gap: 0 26px; }
  .eq-stat-lv small { font-size: 13px; }
  .eq-stat-lv b { font-size: 34px; }
  .eq-stat-group { line-height: 1.4; gap: 0 12px; }
  .eq-stat-group small { font-size: 13px; }
  .eq-stat-group b { font-size: 17px; }
  .eq-weaponbar { padding: 10px 16px; gap: 14px; }
  .eq-weaponbar .el-badge { min-width: 32px; height: 32px; font-size: 15px; }
  .wb-main .wc-name { font-size: 18px; }
  .wb-atk { font-size: 17px; }
  .wb-atk small { font-size: 13px; }
  .wb-sub { font-size: 14px; }
  .wb-btns .btn.small { padding: 8px 18px; font-size: 15px; }
  /* スロットは画面の高さに合わせて大きく（2段で詳細と同じ高さ） */
  .equip-body .eq-slots { gap: 12px; }
  .equip-body .eq-slot-main { min-height: clamp(110px, calc((100vh - 360px) / 2), 210px); padding: 14px 18px; gap: 14px; border-radius: 16px; }
  .equip-body .eq-glyph { width: 60px; height: 60px; font-size: 24px; }
  .equip-body .eq-name { font-size: 19px; padding-top: 12px; }
  .equip-body .eq-slot.empty .eq-name { font-size: 15px; }
  .equip-body .eq-slot-main .slot-key { font-size: 12px; top: 8px; right: 12px; }
  .equip-body .eq-remove { font-size: 12px; padding: 3px 10px; bottom: 8px; right: 8px; }
  .equip-body .eq-detail { padding: 18px 22px; gap: 10px; font-size: 15px; border-radius: 16px; }
  .equip-body .d-head { font-size: 21px; gap: 10px; }
  .equip-body .d-head .el-badge { min-width: 30px; height: 30px; font-size: 14px; }
  .equip-body .d-head .rank { font-size: 14px; }
  .equip-body .d-skill .key { min-width: 26px; height: 26px; font-size: 14px; margin-right: 8px; }
  .d-bonus { font-size: 15px; gap: 4px 22px; }
  .d-actions .btn.small { padding: 9px 20px; font-size: 15px; }
  .eq-mats { font-size: 15px; gap: 12px; }
  .eq-mats .mat-cell { font-size: 14px; padding: 6px 12px; gap: 8px; }
  .eq-mats .mat-cell .el-badge { min-width: 24px; height: 24px; font-size: 12px; }
}
/* 装備（PC）：文字を大きくした分、幅が足りないときはステータスと武器の帯を上下に（武器の2行目を切らさない） */
@media (min-height: 521px) and (min-width: 900px) {
  .eq-top { flex-direction: column; }
  .eq-statusbar { justify-content: space-between; }
}
@media (min-height: 521px) and (min-width: 900px) and (max-width: 1199px) {
  .eq-mats .mat-cell { font-size: 12px; padding: 4px 8px; gap: 5px; }
  .eq-mats .mat-cell .el-badge { min-width: 20px; height: 20px; font-size: 11px; }
}

/* ---------- ホーム（PC）：左にロゴとステータス、右に冒険とメニュー（スクロールしないように2列） ---------- */
@media (min-height: 521px) and (min-width: 900px) {
  .home-panel { width: min(780px, 56vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; align-items: start; }
  .home-panel .logo { grid-column: 1; grid-row: 1; }
  .home-main { grid-column: 2; grid-row: 1; align-self: center; }
  /* 左のステータスと右のメニューは同じ高さにそろえ、余った分はボタンの間に均等に */
  .home-status { grid-column: 1; grid-row: 2; align-self: stretch; }
  .home-menu { grid-column: 2; grid-row: 2; align-self: stretch; align-content: space-between; }
}
@media (min-height: 521px) and (min-width: 900px) {
  .home-panel .logo { min-width: 0; }
  .home-panel .logo-en { font-size: clamp(22px, 2.6vw, 38px); white-space: nowrap; }
}

/* ---------- 証の交換（ショップのタブ）と、試練からの入り口 ---------- */
.shop-mark-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); font-size: 14px; }
.shop-mark-head .shop-icon { width: 34px; height: 34px; font-size: 16px; }
.shop-mark-head b { font-size: 18px; color: var(--c); }
.bind-ex-btn { position: relative; border-color: rgba(159, 224, 200, 0.6); color: #cff5e6; }
.bind-ex-btn .bx-count { padding: 0 8px; border-radius: 999px; background: rgba(159, 224, 200, 0.2); font-weight: 800; }
.bind-ex-btn.ready { background: linear-gradient(180deg, rgba(159, 224, 200, 0.35), rgba(60, 120, 100, 0.35)); border-color: #9fe0c8; box-shadow: 0 0 12px rgba(159, 224, 200, 0.45); }
.bind-ex-btn .new-badge { top: -10px; right: -6px; white-space: nowrap; }
/* 星降りの結果（スマホ横向き）：閉じる・もう1回・もう11回・残りのジェム・天井までの回数を1行に */
@media (max-height: 520px) and (min-width: 601px) {
  .gacha-actions { flex-wrap: nowrap; gap: 8px; }
  .gacha-actions .btn { flex: 0 1 auto; min-width: 0; padding: 6px 14px; font-size: 14px; white-space: nowrap; }
  .gacha-actions .pull-btn { min-width: 0; padding: 5px 16px; }
  .gacha-actions .pull-btn small { font-size: 11px; }
  .ga-gems { flex: none; padding: 4px 10px; font-size: 15px; }
  .ga-gems .gems-split { font-size: 10px; }
  .ga-gems-label { font-size: 10px; }
  .ga-pity { flex: none; padding: 4px 10px; font-size: 11px; line-height: 1.3; white-space: nowrap; }
}

/* iPhone の Safari など：画面の高さ（vh）はバーを除いた見えている高さより大きく計算されるので、
   窓の高さは見えている高さ（dvh）に合わせる（上が隠れて「閉じる」まで戻れなくなるのを防ぐ） */
.dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.overlay { height: 100vh; height: 100dvh; bottom: auto; }
/* 装備：スロットの名前が長くても（「空き（押して装備）」など）、欄が中身の幅まで広がって詳細に重ならないように */
.equip-body .eq-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equip-body .eq-slot, .equip-body .eq-slot-main { min-width: 0; }
.equip-body .eq-slot-main { overflow: hidden; }

/* 星降りのカード：★の横に今の重ね具合（昇華 4/6 など。上限は目立たせる） */
.feat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feat-dup { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.feat-dup.max { color: #ffb0d8; }

/* ---------- 装備：マイセット（武器の帯とアビリティの間）。素材の欄は外した（強化の画面で見られる） ---------- */
.equip-body { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top top" "presets presets" "left right"; }
.eq-presets { grid-area: presets; display: flex; align-items: center; gap: 8px 10px; min-width: 0; }
.eqp-label { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--gold-soft); }
.eqp-list { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.eqp-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; gap: 6px; }
.eqp-btn.on { background: color-mix(in srgb, var(--gold) 28%, #1b1d2e); border-color: var(--gold); color: #fff3c8; box-shadow: 0 0 10px rgba(232, 196, 106, 0.35); }
.eqp-btn.empty { border-style: dashed; color: var(--muted); }
.eqp-btn small { font-size: 10px; }
.eqp-edit { flex: none; }
/* マイセットの編集 */
.preset-dialog { width: min(820px, 100%); height: auto; }
.pe-note { margin: 0; font-size: 12px; }
.pe-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.pe-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.pe-name { min-width: 0; font: 700 16px var(--font); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--text); }
.pe-name:focus { outline: none; border-color: var(--gold); }
.pe-items { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; font-size: 12px; }
.pe-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--el, #e8e2d0) 50%, transparent); white-space: nowrap; }
.pe-chip b { color: var(--el); }
.pe-chip.weapon { color: var(--gold-soft); }
.pe-btns { display: flex; gap: 6px; }
@media (max-width: 640px) {
  .equip-body { grid-template-areas: "top" "presets" "left" "right"; grid-template-rows: none; }
  .eq-presets { flex-wrap: wrap; }
  .pe-row { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  .eq-presets { gap: 6px; }
  .eqp-btn { padding: 4px 8px; font-size: 12px; }
  .pe-row { padding: 6px 8px; gap: 8px; }
  .pe-name { font-size: 16px; padding: 4px 8px; }
}
/* スマホ横向き：ページは送らず、スロットと詳細を残りの高さに収める。
   詳細は「強化」「アビリティを変更」を名前の行の右に置いて1行低くする（「スロット○」は左の枠が光っているので省く） */
@media (max-height: 520px) and (min-width: 641px) {
  #screen-equip .page { overflow: hidden; }
  .equip-body { flex: 1 1 auto; min-height: 0; }
  .equip-body .eq-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 8px; }
  .equip-body .eq-detail > * { grid-column: 1 / -1; }
  .equip-body .eq-detail > .d-head { grid-column: 1; min-width: 0; }
  .equip-body .eq-detail > .d-actions { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
  .equip-body .d-head .rank { display: none; }
  .equip-body .d-actions .d-long { display: none; }
}
@media (min-height: 521px) and (min-width: 900px) {
  .eqp-label { font-size: 15px; }
  .eqp-btn { padding: 8px 14px; font-size: 15px; }
}
/* マイセットのボタンの大きさ（.btn.small より優先させる） */
@media (max-height: 520px) { .eq-presets .eqp-btn, .eq-presets .eqp-edit { padding: 4px 8px; font-size: 12px; } }
@media (max-height: 360px) { .eq-presets .eqp-btn, .eq-presets .eqp-edit { padding: 1px 8px; } .eq-presets .eqp-label { font-size: 12px; } }
@media (min-height: 521px) and (min-width: 900px) { .eq-presets .eqp-btn, .eq-presets .eqp-edit { padding: 8px 14px; font-size: 15px; } }
/* マイセットが5つ並ぶので、幅が狭いときは空きの「＋登録」を省く（空きは点線の枠でわかる） */
@media (max-width: 899px) { .eqp-btn small { display: none; } .eq-presets .eqp-btn { padding-left: 4px; padding-right: 4px; } }

/* 選択画面のカード：2行にまとめる（はみ出す分は「…」で省く） */
.pick-item { grid-template-rows: auto auto; row-gap: 2px; }
.pick-item .it-glyph { grid-row: 1 / span 2; }
.pick-item .it-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.pick-item .it-line .it-name { margin-right: 6px; }
.pick-item .it-line .rar { font-size: 11px; margin-right: 6px; }
.pick-item .it-line .it-sub { font-size: 12px; }
.pick-item .it-line.it-sub2 { padding-right: 0; }
.pick-item .sub-badge { color: #ffc8ef; }
@media (max-height: 520px) { .pick-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
/* 2行のカードは横に長いので、1枚の幅を広くとる（スマホ横向きは2枚・PCは3枚並び） */
.pick-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-height: 520px) { .pick-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
/* 幅が狭いとき（1枚の幅が300px前後）：技の種類を省き、丸と余白・文字を少し小さくして2行に収める */
@media (max-width: 760px) {
  .pick-item { grid-template-columns: 28px 1fr; column-gap: 6px; padding: 5px 8px; }
  .pick-item .it-glyph { width: 28px; height: 28px; font-size: 12px; }
  .pick-item .it-line .it-name { font-size: 12px; margin-right: 4px; }
  .pick-item .it-line .rar { font-size: 9px; margin-right: 4px; letter-spacing: -1px; }
  .pick-item .it-line .it-sub { font-size: 11px; }
  .pick-item .it-line.it-sub2 { font-size: 10px; }
  .pick-item .it-kind { display: none; }
  .pick-list { gap: 5px; }
}
/* 星降りのカードの ⓘ（重ねていない・強化していないときの性能） */
.feat-name { display: flex; align-items: center; gap: 6px; }
.feat .info-btn { width: 18px; height: 18px; font-size: 11px; }

/* ---------- 一時停止：横に広く使って2列（左：再開・コツ・撤退／右：音・画質・カメラ）。狭い画面では1列 ---------- */
#pause .pause-dialog { width: min(820px, 100%); }
.pause-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px 16px; align-items: start; }
.pause-main, .pause-set { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pause-main #btn-resume { padding-top: 18px; padding-bottom: 18px; font-size: 18px; }
#btn-retreat small { font-size: 0.8em; font-weight: 600; opacity: 0.85; }
.pause-sound { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pause-sound .btn { padding-left: 6px; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pause .pause-row > span { flex: 0 0 auto; white-space: nowrap; }
#pause .pause-row .seg, #pause .pause-row .cam-slider { flex: 1 1 auto; max-width: none; justify-content: flex-end; }
#pause .pause-row .seg .switch { flex: 1; padding-left: 6px; padding-right: 6px; }
@media (max-width: 600px) { .pause-grid { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  #pause .pause-dialog { padding: 10px 16px; gap: 6px; }
  .pause-grid, .pause-main, .pause-set { gap: 6px; }
  .pause-main .btn, .pause-sound .btn { padding-top: 7px; padding-bottom: 7px; }
  .pause-main #btn-resume { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-height: 360px) {
  #pause .pause-dialog h2 { font-size: 16px; }
  .pause-main .btn, .pause-sound .btn { padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
  .pause-main #btn-resume { padding-top: 10px; padding-bottom: 10px; }
  #pause .set-row { padding: 2px 10px; }
  #pause .seg .switch { padding-top: 3px; padding-bottom: 3px; }
}
@media (min-height: 521px) and (min-width: 900px) {
  #pause .pause-dialog { width: min(900px, 100%); }
  .pause-main .btn, .pause-sound .btn { font-size: 16px; }
  .pause-main #btn-resume { font-size: 20px; padding-top: 22px; padding-bottom: 22px; }
}

/* ---------- 戦闘の結果（クリア・撤退・戦闘不能）：横に広く使って2列。ボタンは下に固定し、中身が多いときは真ん中だけ動かす ---------- */
#result .dialog { width: min(820px, 100%); overflow: hidden; }
.result-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.result-head h2 { margin: 0; }
.result-head .note { flex-basis: 100%; margin: 0; text-align: center; }
.result-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px 22px; align-items: center; }
.result-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.result-scroll .result-list { margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.result-actions { flex: none; align-items: center; }
.result-actions .info-btn { flex: none; min-width: 0; }
@media (max-width: 600px) { .result-scroll { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  #result .dialog { padding: 10px 18px; gap: 8px; }
  .result-head h2 { font-size: 20px; }
  .result-main { gap: 6px; }
  .result-scroll .first-bonus { padding: 5px 12px; font-size: 13px; }
  .result-scroll .unlock-line { padding: 4px 10px; font-size: 13px; }
  .result-scroll .result-list { gap: 4px 16px; padding: 8px 14px; }
  .result-actions .btn { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-height: 360px) {
  .result-head h2 { font-size: 17px; }
  .result-head .result-stage { font-size: 12px; }
  .result-scroll .result-wave { font-size: 18px; }
  .result-scroll .result-list { font-size: 13px; gap: 2px 14px; padding: 6px 12px; }
  .result-actions .btn { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
}
@media (min-height: 521px) and (min-width: 900px) {
  #result .dialog { width: min(900px, 100%); }
  .result-scroll .result-list { font-size: 18px; }
  .result-actions .btn { font-size: 17px; padding-top: 14px; padding-bottom: 14px; }
}
@media (max-height: 360px) {
  .result-main { gap: 4px; }
  .result-scroll .result-mats { font-size: 12px; gap: 4px; }
  .result-scroll .mat-chip { padding: 1px 8px; }
}

/* ---------- 戦い方のコツ・戦いの準備・解放のお知らせ：横に広く使い、スマホの横向きでもスクロールなしで収める ---------- */
#tutorial .dialog, #prep .dialog { width: min(820px, 100%); }
#unlock-notice .dialog { width: min(720px, 100%); }
@media (min-width: 601px) {
  .tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips li { margin: 0; }
}
@media (max-height: 520px) {
  #tutorial .dialog, #prep .dialog, #unlock-notice .dialog { padding: 12px 18px; gap: 8px; }
  #tutorial .dialog h2, #prep-body h2, #unlock-notice .dialog h2 { margin: 0; font-size: 18px; }
  #prep-body { gap: 8px; }
  .prep-list { gap: 8px; }
  .prep-item { padding: 6px 10px; }
  .prep-item .shop-icon { width: 32px; height: 32px; font-size: 15px; }
  .prep-actions .btn, .unlock-actions .btn, #btn-tutorial-ok { padding-top: 8px; padding-bottom: 8px; }
  .unlock-kicker { padding: 1px 12px; font-size: 12px; }
  .unlock-box .note { margin: 0; }
  .unlock-actions { margin-top: 2px; }
}
@media (max-height: 360px) {
  #tutorial .dialog, #prep .dialog, #unlock-notice .dialog { padding: 8px 14px; gap: 6px; }
  #tutorial .dialog h2, #prep-body h2, #unlock-notice .dialog h2 { font-size: 16px; }
  .tips li { font-size: 11.5px; padding: 5px 8px; line-height: 1.4; gap: 8px; }
  .tip-icon { width: 24px; height: 24px; font-size: 12px; }
  #prep-body .note, .unlock-box .note { font-size: 12px; }
  .prep-item { padding: 4px 8px; }
  .prep-name small { font-size: 11px; }
  .prep-potion { font-size: 12px; }
  .prep-actions .btn, .unlock-actions .btn, #btn-tutorial-ok { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
  .unlock-name { font-size: 18px; letter-spacing: 2px; }
}
@media (min-height: 521px) and (min-width: 900px) {
  #tutorial .dialog, #prep .dialog { width: min(900px, 100%); }
  .tips li { font-size: 15px; }
}
@media (max-height: 360px) { #prep-body, .prep-list { gap: 5px; } }
#unlock-notice .featured { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); justify-content: center; }

/* ---------- 洞窟の結果：上段＝ランクとタイム｜ランク別クリア報酬、下段＝素材・解放と撃破数などの1行 ---------- */
.result-scroll.cave-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.cave-layout .cave-bottom { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.cave-rewards { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.cr-head { font-size: 13px; font-weight: 800; color: var(--gold-soft); }
.cr-head small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.cr-row { display: grid; grid-template-columns: 24px 1fr auto 5.2em; align-items: center; gap: 10px; padding: 2px 6px; border-radius: 8px; font-size: 14px; }
.cr-row .rank-badge { width: 22px; height: 22px; font-size: 13px; }
.cr-time { color: var(--muted); }
.cr-gems { font-weight: 800; text-align: right; }
.cr-state { font-size: 12px; font-weight: 700; text-align: right; color: var(--muted); }
.cr-row.done { opacity: 0.6; }
.cr-row.now { background: linear-gradient(90deg, rgba(255, 201, 90, 0.3), rgba(255, 201, 90, 0.06)); }
.cr-row.now .cr-gems, .cr-row.now .cr-state { color: #fff3c8; }
.cr-row.cr-clear { grid-template-columns: 1fr auto 5.2em; border-top: 1px dashed var(--line); border-radius: 0; margin-top: 2px; padding-top: 5px; }
.cr-row.cr-clear .cr-state { color: #fff3c8; }
.cave-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.result-stats span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); min-width: 0; }
.result-stats small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.result-stats b { white-space: nowrap; }
@media (max-width: 600px) { .result-scroll.cave-layout { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  .cave-layout .cave-result { gap: 12px; }
  .cave-left { gap: 5px; }
  .cave-layout .rank-badge.big { width: 56px; height: 56px; font-size: 34px; border-radius: 12px; }
  .cave-rewards { padding: 5px 10px; gap: 1px; }
  .cr-row { font-size: 13px; padding: 1px 6px; }
  .result-stats span { padding: 4px 10px; }
}
@media (max-height: 360px) {
  .cave-layout .rank-badge.big { width: 46px; height: 46px; font-size: 28px; }
  .cr-head { font-size: 12px; }
  .cr-row { font-size: 12px; gap: 8px; }
  .cr-row .rank-badge { width: 18px; height: 18px; font-size: 11px; }
  .result-stats span { padding: 2px 8px; font-size: 13px; }
  .result-stats small { font-size: 11px; }
}
@media (min-height: 521px) and (min-width: 900px) {
  .cr-row { font-size: 16px; padding: 4px 8px; }
  .cr-head { font-size: 15px; }
  .result-stats span { padding: 10px 14px; font-size: 17px; }
  .result-stats small { font-size: 13px; }
}

/* ---------- お守り（js/ui.js の showCharms・js/charms.js） ---------- */
#charms { z-index: 42; padding: 10px calc(10px + var(--sr)) 10px calc(10px + var(--sl)); }
.charm-dialog { gap: 8px; }
.charm-head h2 { display: flex; align-items: center; gap: 6px; }
.charm-head .tabs { margin-left: auto; }
.charm-have { font-weight: 800; font-size: 14px; white-space: nowrap; }
.charm-locked, .charm-rates { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.charm-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; }
.charm-slot { position: relative; min-width: 0; }
.charm-slot-main { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.charm-slot.sel .charm-slot-main { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.25); }
.charm-slot.locked { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.charm-slot .slot-key { font-size: 11px; color: var(--muted); }
.cs-name { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.charm-total { align-self: center; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.charm-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 10px; }
.charm-list { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; align-content: start; padding: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.charm-gift { grid-column: 1 / -1; }
.charm-chip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
div.charm-chip { cursor: default; }
.charm-chip.r5 { background: linear-gradient(90deg, rgba(255, 201, 90, 0.2), var(--panel)); }
.charm-chip.r4 { background: linear-gradient(90deg, rgba(199, 155, 255, 0.16), var(--panel)); }
.charm-chip.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 196, 106, 0.35); }
.cc-glyph { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #1a1420; background: var(--c); }
.cc-line { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; }
.cc-line b { font-size: 14px; margin-right: 6px; }
.cc-line small { color: var(--muted); font-size: 11px; }
.cc-sub { font-size: 12px; color: var(--muted); }
.cc-lock { position: absolute; bottom: 4px; right: 6px; font-size: 11px; }
.charm-detail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); font-size: 14px; }
.charm-detail.empty { align-items: center; justify-content: center; text-align: center; }
.charm-detail .d-head { font-size: 15px; gap: 8px; }
.charm-lock { margin-left: auto; }
.charm-lock.on { border-color: var(--gold); color: var(--gold-soft); }
.charm-lv { display: flex; align-items: baseline; gap: 6px; }
.charm-lv .enh-now { font-size: 22px; color: #fff; }
.charm-breaks { display: inline-flex; gap: 4px; margin-left: auto; align-self: center; }
.charm-detail .enh-effect { margin: 0; font-weight: 700; text-align: left; }
.charm-detail .enh-cost { display: flex; flex-direction: column; gap: 4px; }
.charm-detail .cost-row { padding: 4px 10px; font-size: 13px; }
.charm-detail .d-actions { margin-top: auto; flex-wrap: wrap; }
.charm-shop { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; align-content: start; padding: 2px; }
.charm-buy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--panel); }
.charm-buy .cc-line { padding-right: 0; }
.charm-buy .btn { grid-column: 3; grid-row: 1 / span 2; }
.charm-buy .cc-sub { font-size: 11px; }
.charm-ex-list { display: flex; flex-direction: column; gap: 10px; }
.charm-ex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 16px; }
.charm-ex .muted { font-size: 13px; }
.charm-ex .btn { margin-left: auto; }
.charm-reveal { display: flex; justify-content: center; }
.charm-reveal .charm-chip { min-width: 240px; }
.charm-reveal.r5 .charm-chip { box-shadow: 0 0 24px rgba(255, 201, 90, 0.6); }
/* 装備の画面の入口（ステータスの帯の右端） */
.eq-charms { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.eq-charms:hover { border-color: var(--gold); }
.eq-charms.new { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232, 196, 106, 0.35); }
@media (max-height: 520px) {
  .charm-dialog { padding: 8px 12px; gap: 6px; }
  .charm-slot-main { padding: 3px 8px; }
  .cs-name { font-size: 12px; }
  .charm-chip { padding: 4px 8px; }
  .cc-glyph { width: 26px; height: 26px; font-size: 13px; }
  .cc-line b { font-size: 13px; }
  .cc-sub { font-size: 11px; }
  .charm-main { grid-template-columns: minmax(0, 1fr) minmax(0, 270px); gap: 8px; }
  .charm-detail { padding: 6px 10px; gap: 3px; font-size: 13px; }
  .charm-lv .enh-now { font-size: 18px; }
  .charm-detail .cost-row { padding: 2px 8px; }
  .charm-ex { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 600px) {
  .charm-main { grid-template-columns: 1fr; }
  .charm-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charm-total { grid-column: 1 / -1; }
}
@media (min-height: 521px) and (min-width: 900px) {
  .charm-main { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .charm-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
  .cc-line b { font-size: 16px; }
  .cc-sub { font-size: 13px; }
  .charm-detail { font-size: 16px; padding: 14px 16px; }
  .eq-charms { font-size: 14px; }
}
.charm-slot .charm-slot-main { padding-right: 46px; }
.charm-detail .d-head b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.charm-detail .d-head .rar { white-space: nowrap; }
.charm-lock { white-space: nowrap; flex: none; }
@media (max-height: 520px) {
  .charm-shop { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
  .charm-buy { padding: 4px 8px; }
}
/* 確認の窓（js/ui.js の askConfirm）。上のバー・切り欠きに隠れないよう、少し下げて真ん中に */
#confirm-pop { z-index: 96; padding: calc(12px + var(--st)) 12px 12px; }
.confirm-dialog { width: min(520px, 100%); box-sizing: border-box; padding: 16px 20px; gap: 8px; }
.confirm-dialog h3 { margin: 0; color: var(--gold-soft); }
.confirm-dialog .info-text { margin: 0; font-size: 13px; line-height: 1.5; }
.confirm-dialog .prep-actions { margin-top: 2px; }
.charm-confirm-type { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--panel); border-left: 4px solid var(--c); }
.charm-confirm-type small { color: var(--muted); }
.charm-fodder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.cf-item { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 8px; background: var(--panel); border-left: 3px solid var(--c); font-size: 12px; white-space: nowrap; }
.cf-glyph { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #1a1420; background: var(--c); flex: none; }
/* ヒウチの炉：低い画面（iPhone の Safari でバーが出ているときなど）でも8種がスクロールなしで収まるように */
@media (max-height: 360px) {
  .charm-dialog { padding: 6px 10px; gap: 4px; }
  .charm-head .tab { padding: 3px 12px; }
  .charm-rates { font-size: 12px; }
  .charm-shop { gap: 4px; }
  .charm-buy { padding: 2px 8px; }
  .charm-buy .cc-glyph { width: 22px; height: 22px; font-size: 12px; }
  .charm-buy .cc-line b { font-size: 12px; }
  .charm-buy .btn { padding: 3px 10px; }
  .charm-ex { padding: 6px 10px; }
  .confirm-dialog { padding: 10px 14px; gap: 5px; }
}
/* まとめて打つ・まとめて打ち直す */
.charm-buy-btns { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 3px; }
.charm-buy .charm-buy-btns .btn { padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.charm-ex-btns { margin-left: auto; display: flex; gap: 8px; }
.cct-count { margin-left: auto; font-size: 18px; color: var(--gold-soft); }
.charm-results .cf-item { justify-content: flex-start; }
.charm-results .rar { font-size: 10px; letter-spacing: -2px; }
@media (max-height: 360px) {
  .charm-buy .charm-buy-btns { gap: 2px; }
  .charm-buy .charm-buy-btns .btn { padding: 1px 8px; font-size: 11px; }
}
/* お焚き上げ（4段）・打ち直しも、低い画面でスクロールなしに */
@media (max-height: 520px) {
  .charm-ex-list { gap: 6px; }
  .charm-ex { padding: 5px 12px; }
  .charm-ex .btn { padding: 5px 14px; font-size: 13px; }
}
@media (max-height: 360px) {
  .charm-ex-list { gap: 4px; }
  .charm-ex { padding: 2px 10px; font-size: 13px; }
  .charm-ex .btn { padding: 3px 12px; font-size: 12px; }
}
/* 幅の狭い画面：見出しの行（タブ4つ・手持ち・閉じる）を1段に */
@media (max-width: 720px) {
  .charm-head { gap: 6px; flex-wrap: nowrap; }
  .charm-head h2 { font-size: 14px; white-space: nowrap; }
  .charm-head .tabs { gap: 4px; }
  .charm-head .tab { padding: 3px 9px; font-size: 12px; }
  .charm-have { font-size: 12px; }
  .charm-head .btn.small { padding: 4px 10px; }
}

/* とくに低い画面（667×340 など）：主人公の画面にコスチュームの欄が増えた分、すき間を詰めて1画面に収める */
@media (max-height: 360px) {
  .hero-panel { gap: 6px; }
  .skin-opt img { width: 30px; height: 30px; }
}

/* ---------- お知らせとプレゼント（ホームの右上のボタンと、開く窓。js/inbox.js） ---------- */
/* 右上に置く（ホームの左のメニューの高さを変えない＝スマホ横向きでもスクロールしない） */
.home-corner { position: absolute; top: calc(14px + var(--st)); right: calc(16px + var(--sr)); display: flex; gap: 10px; z-index: 2; }
.corner-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; padding: 9px 10px 7px; border-radius: 14px;
  border: 1px solid rgba(232, 196, 106, 0.45); background: rgba(14, 17, 36, 0.82); color: var(--text); font-family: inherit; font-weight: 700; cursor: pointer; }
.corner-btn:hover { background: rgba(34, 38, 66, 0.92); }
.cb-icon { font-size: 24px; line-height: 1; }
.cb-label { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.corner-btn.has-badge::after { content: attr(data-badge); position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #ff5a6a; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(10, 12, 28, 0.9); animation: newPulse 1.2s ease-in-out infinite; }

/* 窓：大きく開き、一覧と本文はそれぞれの中でだけ動かす（窓そのものは動かない） */
.inbox-box { position: relative; width: min(980px, 100%); height: min(640px, 90vh); padding: 18px 22px; gap: 12px; overflow: hidden; }
.ib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ib-head .tab { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.ib-head .btn { padding: 6px 20px; font-size: 14px; }
.ib-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ff5a6a; color: #fff; font-size: 11px; display: grid; place-items: center; }
.ib-empty { margin: auto; text-align: center; }

/* お知らせ：左に一覧、右に本文 */
.nt-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 14px; }
.nt-list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.nt-row { position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; padding: 8px 22px 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font-family: inherit; cursor: pointer; }
.nt-row.on { border-color: var(--gold); background: rgba(232, 196, 106, 0.12); }
.nt-row.unread::before { content: ""; position: absolute; top: 10px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a6a; }
.nt-title { grid-column: 1 / -1; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-date { font-size: 11px; color: var(--muted); align-self: center; }
.nt-cat { justify-self: start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(159, 224, 255, 0.15); color: #9fe0ff; white-space: nowrap; }
.nt-cat.c-update { background: rgba(232, 196, 106, 0.18); color: var(--gold-soft); }
.nt-cat.c-maint { background: rgba(255, 170, 90, 0.18); color: #ffb470; }
.nt-cat.c-event { background: rgba(111, 232, 191, 0.16); color: #6fe8bf; }
.nt-cat.c-apology { background: rgba(255, 90, 106, 0.18); color: #ff9aa5; }
.nt-view { min-width: 0; overflow-y: auto; padding: 2px 6px 6px 14px; border-left: 1px solid var(--line); }
.nt-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.nt-view h3 { margin: 6px 0 10px; font-size: 19px; color: var(--gold-soft); }
.nt-body p { margin: 0; line-height: 1.7; font-size: 15px; overflow-wrap: anywhere; }
.nt-body .nt-h { margin-top: 8px; font-weight: 800; color: var(--gold-soft); }

/* プレゼント */
.gf-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.gf-top { display: flex; align-items: center; gap: 10px; }
.gf-top .note { flex: 1; margin: 0; }
.gf-top .btn { padding: 6px 16px; font-size: 14px; }
.gf-list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.gf-card { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(232, 196, 106, 0.35);
  background: linear-gradient(90deg, rgba(232, 196, 106, 0.1), rgba(255, 255, 255, 0.02)); }
.gf-card.done { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.gf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gf-title { font-weight: 800; font-size: 16px; }
.gf-msg { font-size: 13px; color: var(--muted); white-space: pre-line; }
.gf-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gf-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; }
.gf-item i { font-style: normal; color: var(--c); }
.gf-item b { color: var(--gold-soft); }
.gf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gf-side .btn { padding: 8px 18px; font-size: 14px; }
.gf-until { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gf-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(20, 24, 48, 0.96);
  border: 1px solid var(--gold); color: var(--gold-soft); font-weight: 700; font-size: 14px; width: max-content; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* スマホ縦：一覧の下に本文 */
@media (max-width: 600px) {
  .home-corner { gap: 8px; }
  .corner-btn { min-width: 64px; padding: 7px 8px 5px; }
  .cb-icon { font-size: 20px; }
  .inbox-box { height: calc(100dvh - 32px); padding: 14px; }
  .nt-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); }
  .nt-view { border-left: 0; border-top: 1px solid var(--line); padding: 10px 2px 0; }
  .gf-card { flex-direction: column; align-items: stretch; }
  .gf-side { flex-direction: row; justify-content: space-between; align-items: center; }
  .gf-top { flex-wrap: wrap; }
}
/* スマホ横：窓を画面いっぱいに近く、文字とボタンを少し小さく */
@media (max-height: 520px) {
  /* 上端を「冒険」のボタン（ホームの上の余白 16px）にそろえ、文字と幅を小さめに */
  .home-corner { top: calc(16px + var(--st)); right: calc(12px + var(--sr)); gap: 8px; }
  .corner-btn { min-width: 52px; padding: 5px 6px 4px; gap: 2px; border-radius: 12px; }
  .cb-icon { font-size: 17px; }
  .cb-label { font-size: 10px; letter-spacing: 0; }
  /* 上下を少し空ける（Android のアプリは、画面の上の時刻・電波の表示が窓に重なるため） */
  .inbox-box { height: calc(100dvh - 64px); padding: 10px 16px; gap: 8px; }
  .ib-head .tab { font-size: 13px; padding: 5px 14px; }
  .ib-head .btn { padding: 5px 16px; font-size: 13px; }
  .nt-row { padding: 6px 20px 6px 8px; }
  .nt-view h3 { font-size: 16px; margin: 4px 0 6px; }
  .nt-body p { font-size: 13px; line-height: 1.6; }
  .gf-card { padding: 8px 12px; gap: 10px; }
  .gf-title { font-size: 14px; }
  .gf-item { font-size: 12px; padding: 2px 7px; }
  .gf-side .btn, .gf-top .btn { padding: 5px 14px; font-size: 13px; }
}
/* PC の大きな画面：ボタンを大きく */
@media (min-width: 1280px) and (min-height: 700px) {
  .home-corner { top: calc(22px + var(--st)); right: calc(28px + var(--sr)); gap: 14px; }
  .corner-btn { min-width: 92px; padding: 12px 14px 9px; border-radius: 16px; }
  .cb-icon { font-size: 30px; }
  .cb-label { font-size: 14px; }
}

/* 数字が電話番号と見なされてリンクにされても（iPhone の自動リンク）、色を変えず、押しても発信しない（index.html の format-detection の念のため） */
a[href^="tel:"], a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none; }

/* メニューのコントローラーのボタンの印（星降りの1回・11回、装備の属性タブの LB・RB）。コントローラーで遊んでいる間だけ出す。
   書き方はつないでいる物に合わせる（js/main.js の body[data-pad-style]） */
.pad-hint { display: none; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: #fff; color: #1b1d2e; font: 800 11px/20px var(--font); text-align: center; flex: none; align-self: center; }
body.pad-in-use .pad-hint { display: inline-block; }
.pull-btn { position: relative; }
.pull-btn .pad-hint { position: absolute; top: -8px; right: -6px; }
.pad-hint[data-pad-hint="Pad0"]::after { content: "A"; }
.pad-hint[data-pad-hint="Pad1"]::after { content: "B"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad0"]::after { content: "✕"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad1"]::after { content: "○"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad0"]::after { content: "B"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad1"]::after { content: "A"; }
.pad-hint[data-pad-hint="Pad2"]::after { content: "X"; }
.pad-hint[data-pad-hint="Pad3"]::after { content: "Y"; }
.pad-hint[data-pad-hint="Pad4"]::after { content: "LB"; }
.pad-hint[data-pad-hint="Pad5"]::after { content: "RB"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad2"]::after { content: "□"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad3"]::after { content: "△"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad4"]::after { content: "L1"; }
body[data-pad-style="ps"] .pad-hint[data-pad-hint="Pad5"]::after { content: "R1"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad2"]::after { content: "Y"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad3"]::after { content: "X"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad4"]::after { content: "L"; }
body[data-pad-style="nintendo"] .pad-hint[data-pad-hint="Pad5"]::after { content: "R"; }

/* ---------- 物語の振り返り（冒険の見出しのボタンと、章を選ぶ窓。js/ui.js の openReplay） ---------- */
.replay-pop { z-index: 60; }
#screen-stages .page-head .stages-side { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#screen-stages .page-head .stages-side .gems { margin-left: 0; }
.replay-btn { flex: none; padding: 5px 14px; white-space: nowrap; }
.dialog.replay-dialog { width: min(820px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.replay-dialog h3 { margin: 0; }
.replay-parts { flex-wrap: wrap; }
.replay-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; overflow-y: auto; min-height: 0; }
.replay-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--el); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.replay-card:hover { border-color: var(--gold); border-left-color: var(--el); }
.replay-card small { font-size: 12px; color: var(--muted); }
.replay-card b { font-size: 16px; color: var(--gold-soft); }
.replay-empty { margin: 0; color: var(--muted); }
/* 振り返りの間は後ろを暗くし、左上に章の名前 */
.dialogue.replay { background: radial-gradient(ellipse at 50% 30%, rgba(40, 36, 80, 0.9), rgba(8, 10, 22, 0.97)); backdrop-filter: blur(6px); }
.dialogue.replay::before { content: attr(data-title); position: absolute; top: 16px; left: calc(20px + var(--sl)); font-size: 15px; font-weight: 700; color: var(--gold-soft); letter-spacing: 0.08em; }
@media (max-height: 520px) {
  .replay-btn { padding: 2px 12px; font-size: 13px; }
  #screen-stages .page-head .stages-side { gap: 2px; }
  /* スマホの横向き：部のタブを詰めて、シーズンのボタンと合わせて2行に収める */
  #screen-stages .stage-parts { gap: 5px; }
  #screen-stages .stage-parts .tab { padding: 4px 10px; }
  .dialog.replay-dialog { padding: 14px 18px; gap: 8px; }
  .replay-card { padding: 8px 12px; }
  .replay-card b { font-size: 14px; }
}

/* ログインボーナス（js/ui.js の showLoginBonus）：7日分を横に並べ、今日の枠を光らせる */
.dialog.lb-box { width: min(960px, 100%); gap: 14px; animation: unlockIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lb-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--gold-soft); }
.lb-total { font-size: 14px; color: var(--muted); white-space: nowrap; }
.lb-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.lb-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 150px; padding: 10px 6px 20px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: center; }
.lb-cell.last { border-color: rgba(232, 196, 106, 0.6); background: linear-gradient(180deg, rgba(232, 196, 106, 0.16), rgba(255, 255, 255, 0.03)); }
.lb-cell.today { border: 2px solid var(--gold); background: linear-gradient(180deg, rgba(232, 196, 106, 0.28), rgba(232, 196, 106, 0.06));
  box-shadow: 0 0 24px rgba(232, 196, 106, 0.45); animation: lbGlow 1.6s ease-in-out infinite; }
.lb-cell.got { opacity: 0.55; }
.lb-day { font-weight: 800; font-size: 14px; letter-spacing: 1px; }
.lb-cell.today .lb-day { color: var(--gold-soft); }
.lb-items { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.lb-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; line-height: 1.3; }
.lb-item i { font-style: normal; font-size: 26px; line-height: 1; color: var(--c); }
.lb-item b { font-size: 15px; color: var(--gold-soft); }
.lb-item.lb-gem b { font-size: 18px; }
.lb-stamp { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap;
  background: rgba(20, 24, 48, 0.96); border: 1px solid var(--line); color: var(--muted); }
.lb-cell.today .lb-stamp { border-color: var(--gold); color: var(--gold-soft); animation: lbStamp 0.5s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.lb-got { margin: 4px 0 0; text-align: center; font-weight: 700; color: var(--gold-soft); }
@keyframes lbGlow { 50% { box-shadow: 0 0 36px rgba(232, 196, 106, 0.7); } }
@keyframes lbStamp { from { transform: translateX(-50%) scale(2.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* スマホ縦：4つと3つの2段 */
@media (max-width: 600px) {
  .lb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }
  .lb-cell { min-height: 112px; }
  .lb-item i { font-size: 20px; }
}
/* スマホ横：1段のまま低く */
@media (max-height: 520px) {
  .dialog.lb-box { gap: 8px; padding: 12px 16px; }
  .lb-head h2 { font-size: 18px; }
  .lb-grid { gap: 6px; }
  .lb-cell { min-height: 0; gap: 4px; padding: 6px 4px 16px; }
  .lb-item { font-size: 10px; }
  .lb-item i { font-size: 18px; }
  .lb-item b { font-size: 13px; }
  .lb-item.lb-gem b { font-size: 14px; }
  .lb-got { margin: 2px 0 0; font-size: 13px; }
}

/* 品のアイコンの絵（js/icons.js の itemIcon）。絵が無い品は今までどおり記号の文字 */
.item-ico { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* ショップ・戦いの準備・交換所：絵のときは丸い枠をやめて、少し大きく出す */
.shop-icon:has(> .item-ico) { border: 0; background: none; box-shadow: none; }
.shop-icon > .item-ico { width: 132%; height: 132%; flex: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent)); }
/* 文の中に並ぶ所（素材・プレゼント・結果）は、文字より少し大きいくらい */
.mat-chip .item-ico, .gf-item .item-ico { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.45em; margin-right: 1px; }
.cost-icon:has(> .item-ico) { width: 26px; height: 26px; flex: none; }
.crest-icon:has(> .item-ico) { width: 30px; height: 30px; display: inline-block; vertical-align: middle; }
.buff-glyph:has(> .item-ico) { width: 22px; height: 22px; }
body.touch .buff-glyph:has(> .item-ico) { width: 18px; height: 18px; }
/* ログインボーナス */
.lb-item .lb-ico { width: 46px; height: 46px; }
.lb-item.lb-gem .lb-ico { width: 52px; height: 52px; }
.lb-head h2 .lb-head-ico { width: 38px; height: 38px; }
/* 各属性の品：5つの絵を横に少しずつ重ねる */
.lb-fan { display: flex; justify-content: center; }
.lb-fan > * { width: 30px; height: 30px; flex: none; }
.lb-fan > * + * { margin-left: -14px; }
.lb-fan > .item-glyph { width: auto; height: auto; margin-left: 2px; font-style: normal; font-size: 18px; color: var(--c); }
.lb-head h2 .item-glyph.lb-head-ico { width: auto; height: auto; }
.lb-cell .lb-halo { position: absolute; left: 50%; top: 32%; width: 96%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0.45; z-index: 0; }
.lb-cell .item-glyph.lb-halo { display: none; }
.lb-cell > .lb-day, .lb-cell > .lb-items { position: relative; z-index: 1; }
.lb-cell > .lb-stamp { z-index: 2; }
@media (max-width: 600px) {
  .lb-item .lb-ico { width: 34px; height: 34px; }
  .lb-item.lb-gem .lb-ico { width: 38px; height: 38px; }
}
@media (max-height: 520px) {
  .lb-item .lb-ico { width: 32px; height: 32px; }
  .lb-item.lb-gem .lb-ico { width: 36px; height: 36px; }
  .lb-head h2 .lb-head-ico { width: 28px; height: 28px; }
}
@media (max-height: 520px) {
  .lb-fan > .item-ico { width: 22px; height: 22px; }
  .lb-fan > * + * { margin-left: -11px; }
}
/* ショップの絵は丸い枠より少し大きめに。ジェムの包みは量の違いが見えるよう、さらに大きく */
.shop-card .shop-icon:has(> .item-ico) { width: 40px; height: 40px; }
.gem-pack .shop-icon:has(> .item-ico) { width: 56px; height: 56px; }
/* ジェムの数（js/ui.js の gemAmt）：◆ の代わりに、文字の高さに合わせたジェムの絵 */
.gem-amt { display: inline-flex; align-items: center; gap: 0.15em; white-space: nowrap; }
.gem-amt .gem-ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 0 3px rgba(159, 224, 255, 0.45)); }
.gem-amt .item-glyph.gem-ico { width: auto; height: auto; filter: none; }
/* 黄色いボタンの上では、光の代わりに細い濃い縁で形を見せる */
.btn.primary .gem-ico { filter: drop-shadow(0 0 1px rgba(16, 20, 60, 0.9)) drop-shadow(0 0 1px rgba(16, 20, 60, 0.6)); }

/* 属性の記号（js/ui.js の elMark・elBadge・elFill。絵は assets/icons/el-属性.webp） */
/* 札：記号＋属性の文字を横に（色の丸はやめて、文字を属性の色に） */
.el-badge.el-badge-mark { background: none; border-radius: 0; padding: 0; min-width: 0; height: auto; gap: 3px; display: inline-flex; align-items: center; color: var(--el); vertical-align: middle; }
.el-badge-mark .el-mark { width: 1.6em; height: 1.6em; flex: none; }
.el-badge-mark .item-glyph.el-mark { display: none; }
.el-tab .el-mark { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.45em; margin-right: 3px; }
/* 丸い枠の中：記号の輪を枠にするので、今の丸い線は消す。属性の文字は右下に小さな札で */
:is(.slot, .mini-slot, .g-icon, .eq-glyph, .it-glyph):has(> .el-fill) { position: relative; border-color: transparent; }
.el-fill { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.item-glyph.el-fill { display: none; }
.el-tag { position: absolute; right: -6px; bottom: -6px; z-index: 2; padding: 1px 5px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.3;
  background: rgba(10, 12, 28, 0.92); border: 1px solid var(--el); color: var(--el); text-shadow: none; }
.g-icon .el-tag { font-size: 13px; }
.mini-slot .el-tag { font-size: 10px; padding: 0 4px; right: -7px; bottom: -7px; }
/* 戦闘の4つの丸：記号は時間の扇の下。文字は右下の札で、使えるときは白・クールタイム中は灰色。記号もクールタイム中は灰色に */
.slot > .el-fill { z-index: 0; transition: filter 0.2s; }
.slot:has(> .el-fill) { background: rgba(10, 12, 28, 0.55); }
.slot:has(> .el-fill) .slot-cd { inset: 4px; }
.slot:has(> .el-fill) .slot-glyph { position: absolute; right: -6px; bottom: -6px; z-index: 2; padding: 1px 6px; border-radius: 999px; font-size: 13px; line-height: 1.3;
  background: rgba(10, 12, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.7); color: #fff; }
.slot.cooling > .el-fill { filter: grayscale(1) brightness(1.25) contrast(1.1); }
/* 残り時間の暗い扇は薄めに（灰色の記号の形が見えるように） */
.slot:has(> .el-fill) .slot-cd { background: conic-gradient(rgba(0, 0, 0, 0.35) calc(var(--p, 0) * 360deg), transparent 0); }
.slot.cooling:has(> .el-fill) .slot-glyph { color: #8d909c; border-color: #6b6e7a; text-shadow: none; }
body.touch .slot:has(> .el-fill) .slot-glyph { font-size: calc(2.2 * var(--u)); right: calc(-1 * var(--u)); bottom: calc(-1 * var(--u)); }
@media (max-height: 520px) {
  .g-icon .el-tag { font-size: 9px; padding: 0 3px; right: -5px; bottom: -5px; }
}
/* 記号だけ（装備の詳しい欄・星降りのピックアップ） */
.el-solo { display: inline-flex; flex: none; }
.el-solo .el-mark { width: 30px; height: 30px; }
.feat-name .el-solo .el-mark { width: 24px; height: 24px; }
.g-icon:has(> .el-fill) { background: transparent; box-shadow: none; }
/* 奥義のボタン：真ん中に今の属性の記号（たまる輪の内側）。たまるまでは灰色、たまったら属性の色。「奥」の字は左下の小さな札に */
.action.burst > .el-fill { position: absolute; inset: 20%; width: 60%; height: 60%; z-index: 0; filter: grayscale(1) brightness(1.1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.action.burst.ready > .el-fill { filter: none; opacity: 1; }
.action.burst:has(> .el-fill)::after { position: absolute; left: -4px; bottom: -6px; z-index: 2; padding: 1px 6px; border-radius: 999px; font-size: 13px; line-height: 1.3;
  background: rgba(10, 12, 28, 0.92); border: 1px solid #6b6e7a; color: #8d909c; opacity: 1; }
.action.burst.ready:has(> .el-fill)::after { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
body.touch .action.burst:has(> .el-fill)::after { font-size: calc(2.2 * var(--b)); }
/* 奥義：たまったら記号を大きく */
.action.burst.ready > .el-fill { inset: 12%; width: 76%; height: 76%; }
/* 星術のボタン：今の属性の記号。クールタイム中は灰色にして、残りの秒数を上に重ねる */
.action.skill > .el-fill { position: absolute; inset: 8%; width: 84%; height: 84%; z-index: 0; transition: filter 0.2s; }
.action.skill.cooling > .el-fill { filter: grayscale(1) brightness(1.25) contrast(1.1); }
.action.skill:has(> .el-fill) .cd-mask { background: conic-gradient(rgba(0, 0, 0, 0.35) calc(var(--p, 0) * 360deg), transparent 0); }
.action.skill:has(> .el-fill) .cd-num { z-index: 2; text-shadow: 0 0 4px #000, 0 1px 3px #000, 0 0 2px #000; }
/* 武器の欄の素材：記号だけ */
.wb-mat .el-solo .el-mark { width: 26px; height: 26px; }
/* 星降りのピックアップのカード：名前が折り返さないよう少し広く */
.gacha-main .featured { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* 戦闘の回復薬：回復薬の絵 */
.potion-glyph:has(> .item-ico) { width: 72%; height: 72%; display: block; filter: drop-shadow(0 0 6px rgba(125, 255, 154, 0.55)); }