/*
  妖怪退治（Best Fiends 型の つなげるパズル）。ひらめき日和と 同じ トークン（styles.css の :root）を 使う。
  クラスは すべて .yk 〜 / yk- で はじめ、ほかの 画面と ぶつからないようにする。
  5色は 黄・緑・赤・青・紫（枠・ゲージ・なぞる線の 色。文字には 使わない）。色だけで 見分けない よう、絵柄の 形も ちがう。
*/
:root { --yk-yellow: #f2b705; --yk-green: #2f9e55; --yk-red: #e2463a; --yk-blue: #2f7be0; --yk-purple: #8a4fd0; }
.yk [hidden] { display: none !important; }
.yk-dango { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -.35em; }

/* ---------- タブ：妖怪退治（鳥居の 参道。いつも 次の ステージが 目の前に） ---------- */
.yk-shrine-body { gap: 10px; }
.yk-path { position: relative; flex: 1; min-height: 300px; overflow: hidden; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); isolation: isolate; }
.yk-path-bg, .yk-path-zoom { position: absolute; inset: 0; z-index: -1; background: center 46% / cover no-repeat; transform-origin: 50% 46%; }
.yk-path-zoom { opacity: 0; }
.yk-path::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(40 20 60 / .25), transparent 25%, transparent 55%, rgb(40 20 60 / .35)); pointer-events: none; }
.yk-path-head { padding: 10px 10px 0; }
.yk-path-title { display: inline-block; padding: 4px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 88%, transparent); font-weight: 700; font-size: var(--fs-md); line-height: 1.35; }
.yk-path-title small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }
.yk-ahead { position: relative; margin: 0 12px 12px; padding: 0 14px 12px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); text-align: center; box-shadow: 0 10px 30px rgb(40 20 60 / .3); }
.yk-ahead-foes { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: clamp(80px, 15dvh, 130px); margin-top: calc(-1 * clamp(56px, 11dvh, 96px)); }
.yk-ahead-foes img { max-height: 100%; max-width: 46%; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35)); animation: yk-idle 2.6s ease-in-out infinite; }
.yk-ahead-foes.boss img { max-width: 80%; }
.yk-ahead-no { margin-top: 4px; color: var(--primary); font-weight: 700; font-size: var(--fs-sm); }
.yk-ahead-no span { color: var(--ink-soft); font-weight: 500; }
.yk-ahead h1 { font-size: var(--fs-xl); }
.yk-ahead-meta { color: var(--ink-soft); font-size: var(--fs-sm); }
.yk-go { margin-top: 8px; }
.yk-ahead-left { margin-top: 6px; color: var(--ink-soft); font-size: var(--fs-xs); }
.yk-ahead-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.yk-ahead-foot .yk-ahead-left { margin: 0; text-align: left; }
.yk-practice-btn { flex: none; min-height: var(--tap); white-space: nowrap; }
.yk-ahead.done .btn { margin-top: 4px; }
.yk-ahead.done { padding-top: 14px; }
.yk-ahead-shadow { height: 110px; margin: -80px auto 0; filter: brightness(0) drop-shadow(0 0 10px #b48cff); opacity: .8; }
.yk-party-strip { flex: none; display: flex; align-items: center; gap: 6px; min-height: var(--tap-lg); padding: 6px 10px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); color: inherit; }
.yk-mini { display: grid; justify-items: center; }
.yk-mini img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--c); background: #fff; }
.yk-mini b { font-size: var(--fs-xs); line-height: 1.2; }
.yk-strip-go { margin-left: auto; font-weight: 700; color: var(--primary); white-space: nowrap; }
.yk-shrine.advancing .yk-path-zoom { animation: yk-walk-past 1.2s cubic-bezier(.5, 0, .7, 1) forwards; }
.yk-shrine.advancing .yk-path-bg { animation: yk-walk-in 1.6s cubic-bezier(.2, .8, .3, 1) both; }
.yk-shrine.advancing .yk-ahead { animation: yk-come-near .8s 1s cubic-bezier(.3, 1.4, .5, 1) both; }
.yk-shrine.advancing .yk-path::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgb(255 250 235 / .95), rgb(255 250 235 / 0) 55%); animation: yk-glow 1.4s .5s ease-out both; }
@keyframes yk-walk-past { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(3); filter: blur(6px); } }
@keyframes yk-walk-in { 0% { transform: scale(.55); filter: brightness(1.3) blur(3px); } 100% { transform: scale(1); filter: none; } }
@keyframes yk-come-near { from { opacity: 0; transform: translateY(-60px) scale(.4); } }
@keyframes yk-glow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- タブ：なかま（1画面: 顔の 切りかえ → 選んだ 仲間 → 強化ボタン） ---------- */
.yk-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px var(--pad) 0; }
.yk-tab { position: relative; display: grid; justify-items: center; gap: 0; min-height: 66px; padding: 4px 2px; border-radius: var(--r-sm); border: 2px solid transparent; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-soft); }
.yk-tab img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--c); background: #fff; }
.yk-tab span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.yk-tab b { font-size: var(--fs-xs); line-height: 1.2; }
.yk-tab.on { border-color: var(--c); background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--c); }
.yk-tab.can::after { content: '↑'; position: absolute; top: 2px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; }
.yk-hero { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--c); box-shadow: var(--shadow); }
.yk-hero.yk-pop { animation: yk-card-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.yk-hero-fig { flex: none; width: auto; height: clamp(96px, 20dvh, 170px); max-width: 30%; object-fit: contain; filter: drop-shadow(0 4px 4px rgb(40 20 80 / .18)); }
.yk-hero-info { flex: 1; min-width: 0; display: grid; gap: 6px; }
.yk-card-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.yk-card-name strong { font-size: var(--fs-xl); }
.yk-color { padding: 0 10px; border-radius: 999px; background: var(--c); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.yk-evo { color: #b98400; font-size: var(--fs-sm); letter-spacing: -.1em; }
.yk-stats-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.yk-stats-list div { padding: 4px; border-radius: 10px; background: var(--surface-soft); text-align: center; }
.yk-stats-list dt { font-size: var(--fs-xs); color: var(--ink-soft); }
.yk-stats-list dd { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; }
.yk-card-skill { font-size: var(--fs-sm); line-height: 1.4; }
.yk-card-skill strong { display: block; color: var(--secondary); }
.yk-card-skill small { margin-left: 6px; color: var(--ink-soft); font-size: var(--fs-xs); }
.yk-req { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); }
.yk-req h2 { font-size: var(--fs-md); margin-bottom: 6px; }
.yk-req-list { display: flex; flex-wrap: wrap; gap: 6px; }
.yk-need { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 10px 0 2px; border-radius: 999px; background: #ffe1e1; color: #9a2222; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.yk-need img, .yk-need .yk-dango { width: 26px; height: 26px; vertical-align: 0; }
.yk-need.ok { background: #dff5e5; color: #1e6b37; }
.yk-need.ok::after { content: '✓'; margin-left: 2px; }
.yk-need.rare:not(.ok) { background: #f3e8ff; color: var(--secondary); }
.yk-evo-tag { font-style: normal; margin-right: 6px; padding: 0 8px; border-radius: 6px; background: var(--gold); color: #3a2400; font-weight: 700; }
.yk-card-fav { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-soft); }
.yk-card-fav img { width: 24px; height: 24px; }
.yk-book { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.yk-book li { position: relative; display: grid; justify-items: center; padding: 6px 2px; border-radius: var(--r-sm); background: var(--surface-soft); }
.yk-book li.rare { background: linear-gradient(135deg, #fff6d6, #f3e8ff); color: #261736; }
.yk-book li.none img { filter: grayscale(1) opacity(.35); }
.yk-book img { width: 48px; height: 48px; }
.yk-book small { font-size: var(--fs-xs); }
.yk-book li b { position: absolute; top: 2px; right: 8px; font-size: var(--fs-md); }

/* ---------- 重ねる 画面（説明・結果）。主ボタンは 下に 固定、背景を 押しても 閉じない ---------- */
.yk-modal { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 14px; background: rgb(30 15 45 / .55); animation: yk-fade-in .2s; }
.yk-modal-card { display: flex; flex-direction: column; width: 100%; max-width: 420px; max-height: 100%; overflow: auto; padding: 18px 16px 14px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px rgb(0 0 0 / .25); text-align: center; animation: yk-pop-in .3s cubic-bezier(.3, 1.4, .5, 1); }
.yk-modal-card.yk-intro { overflow: hidden; padding-bottom: 0; }
.yk-modal-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.yk-modal-dock { flex: none; display: grid; gap: 8px; padding: 10px 0 14px; border-top: 1px solid var(--line); background: var(--surface); }
.yk-modal-card > .yk-modal-dock { border-top: 0; padding-bottom: 0; }
.yk-modal-card h2 { margin: 0 0 6px; font-size: var(--fs-xl); }
.yk-modal-card h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 6px; font-size: var(--fs-md); color: var(--secondary); text-align: left; }
.yk-modal-card h3 small { font-size: var(--fs-sm); color: var(--ink); font-weight: 700; margin-right: auto; margin-left: 8px; }
.yk-modal-card p { margin: 0 0 10px; color: var(--ink-soft); }
.yk-modal-card strong { color: var(--ink); }
.yk-si-no { margin: 0 !important; color: var(--primary) !important; font-weight: 700; font-size: var(--fs-sm); }
.yk-si-no span { color: var(--ink-soft); font-weight: 500; }
.yk-speech { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-soft); text-align: left; }
.yk-speech img { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.yk-speech p { margin: 0 !important; color: var(--ink) !important; font-size: var(--fs-md); }
.yk-goal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yk-goal-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 999px; background: var(--surface-soft); font-weight: 700; font-size: var(--fs-sm); }
.yk-gi { width: 28px; height: 28px; }
.yk-si-foes { display: grid; gap: 6px; text-align: left; }
.yk-si-foes li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-soft); }
.yk-si-foes li > img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.yk-si-foes details { font-size: var(--fs-sm); }
.yk-si-foes summary { color: var(--secondary); font-weight: 700; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.yk-si-foes details small { display: block; color: var(--ink-soft); line-height: 1.5; }
.yk-si-shop { color: var(--primary); font-weight: 700; font-size: var(--fs-sm); }
.yk-boosts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.yk-boost { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 6px; min-height: var(--tap-lg); padding: 6px 8px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); }
.yk-boost img { width: 36px; height: 36px; grid-row: 1 / span 2; }
.yk-boost > span { display: grid; }
.yk-boost strong { font-size: var(--fs-sm); line-height: 1.3; }
.yk-boost small { display: none; }
.yk-boost em { grid-column: 2; font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.yk-boost.on { border-color: var(--primary); background: var(--primary-soft); }
.yk-boost.on em { color: var(--primary); }
.yk-boost:disabled { opacity: .55; }
.yk-si-lv { margin-top: 10px !important; font-size: var(--fs-sm); }
.yk-si-lv.low { color: var(--ng) !important; font-weight: 700; }
.yk-si-lv a { color: var(--primary); }
.yk-si-help { color: var(--secondary) !important; font-size: var(--fs-sm); }
.yk-si-energy { margin: 0 !important; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); }
.yk-free { padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); }
.yk-row { display: flex; gap: 10px; margin-top: 4px; }
.yk-row .btn { flex: 1; }
.yk-how { display: grid; gap: 8px; margin: 8px 0 12px; padding: 0; text-align: left; }
.yk-how li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-soft); list-style: none; font-size: var(--fs-md); line-height: 1.5; }
.yk-how img, .yk-how .yk-dango { width: 42px; height: 42px; object-fit: contain; flex: none; }
.yk-how img.round { border-radius: 50%; background: #fff; }
.yk-how b { color: var(--primary); }
.yk-how .big { flex: none; width: 42px; text-align: center; font-size: 1.5rem; color: var(--secondary); }
.yk-result-fig { width: 40%; max-width: 160px; margin: -6px auto 2px; }
.yk-stars { font-size: 2.2rem; letter-spacing: .1em; color: var(--gold); }
.yk-stars .off { color: var(--line); }
.yk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.yk-stats div { padding: 6px 4px; border-radius: var(--r-sm); background: var(--surface-soft); }
.yk-stats small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }
.yk-stats b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.yk-wallet-line { font-size: var(--fs-sm); margin: -2px 0 0 !important; }
.yk-skill-face { width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 50%; border: 4px solid var(--gold); background: #fff; }
.yk-drops { margin: 6px 0 10px; }
.yk-drops p { margin: 0 0 4px !important; font-weight: 700; color: var(--ink) !important; }
.yk-drop { display: inline-grid; justify-items: center; gap: 1px; margin: 0 6px; animation: yk-pop-in .5s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.yk-drop img { width: 64px; height: 64px; }
.yk-drop b { font-size: var(--fs-sm); }
.yk-drop em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #261736; background: linear-gradient(90deg, #f9b, #fd6, #8df); padding: 0 8px; border-radius: 999px; }
.yk-drop.rare img { filter: drop-shadow(0 0 8px #ffd85a); animation: yk-hint 1.2s ease-in-out 3; }
.yk-energy { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 4px; border-radius: 999px; background: var(--surface-soft); border: 2px solid var(--line); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }
.yk-energy img { width: 26px; height: 26px; }
.yk-energy b { font-size: var(--fs-lg); }
.yk-energy small { margin-left: 4px; color: var(--ink-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---------- タブ：ショップ ---------- */
.yk-wallet { display: flex; align-items: center; gap: 8px; min-height: var(--tap-lg); padding: 6px 14px; border-radius: var(--r-md); background: #f6eaff; color: #261736; font-weight: 700; }
.yk-wallet .yk-dango { width: 32px; height: 32px; }
.yk-wallet span { flex: 1; color: #55406a; font-size: var(--fs-sm); }
.yk-wallet b { font-size: var(--fs-2xl); }
.yk-shop-list { display: grid; gap: 8px; }
.shop-item { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.shop-item > img { width: 44px; height: 44px; flex: none; }
.shop-item > div { flex: 1; min-width: 0; display: grid; }
.shop-item strong { font-size: var(--fs-md); }
.shop-item strong small { font-size: var(--fs-xs); color: var(--ink-soft); margin-left: 4px; }
.shop-item > div > small { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.45; }
.shop-item .btn { flex: none; min-width: 84px; }
.freeze-have { flex: none; display: grid; gap: 4px; }
.energy-panel { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
/* ショップの 回復: 気力と 体力を 2段に。左に 残り、右に ボタン */
.shop .energy-panel { grid-template-columns: 104px 1fr; align-items: center; padding: 10px; gap: 8px; }
.shop .energy-big { margin: 0; }
.shop .energy-big b { font-size: 1.8rem; }
.shop .energy-big small { font-size: var(--fs-xs); text-align: center; line-height: 1.3; }
.energy-actions { display: grid; gap: 6px; }
.energy-actions .btn { min-height: var(--tap); font-size: var(--fs-md); padding: 4px 8px; }
.energy-actions .ad-note { margin-top: -2px; }

/* ---------- バトル（画面枠の 上に 重ねる） ---------- */
.yk-layer { position: absolute; inset: 0; z-index: 60; background: var(--bg) var(--app-bg) center / cover; }
/* 盤面の 大きさ: 幅（左右 16px は 戻るジェスチャーと ぶつからない よう あける）と、
   高さ（上の 段・妖怪・目標・仲間・下の 余白 ≒ 306px を 引いた 残り）の 小さい方。味方の HP の 段は 2026-10-08 に なくした */
.yk-battle { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(132px, 1fr) auto auto auto auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); --board: min(calc(min(100vw, var(--screen-w)) - 32px), 460px, calc(100dvh - 344px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.yk-bar { display: flex; align-items: center; gap: 8px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); }
.yk-icon-btn { flex: none; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink-soft); font-weight: 700; }
.yk-bar-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yk-moves { flex: none; padding: 0 12px; border-radius: var(--r-sm); background: var(--primary); color: #fff; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; box-shadow: 0 3px 0 var(--primary-press); }
.yk-moves b { font-size: var(--fs-xl); margin: 0 3px; font-variant-numeric: tabular-nums; }
.yk-moves.danger { animation: yk-pulse 1s infinite; }
@media (prefers-color-scheme: dark) { .yk-moves { color: #1a0f24; } }

.yk-field { position: relative; overflow: hidden; background: center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 8px; }
.yk-field::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 0), rgb(255 245 250 / .55)); }
.yk-field > * { position: relative; }
.yk-wave { position: absolute; top: 4px; left: 8px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.yk-sum { position: absolute; z-index: 3; top: 4px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 2px 14px; border-radius: var(--r-sm); background: var(--surface); border: 3px solid var(--gold); white-space: nowrap; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow); }
.yk-sum b { font-size: var(--fs-2xl); line-height: 1; color: var(--primary); }
.yk-foes { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 100%; padding-top: 20px; }
.yk-foe { position: relative; flex: 1; max-width: 150px; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; transition: opacity .5s, filter .5s; }
.yk-foe.boss { max-width: 240px; }
.yk-foe-img { flex: 1; min-height: 0; max-height: 140px; width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .3)); transform-origin: 50% 90%; animation: yk-idle 2.6s ease-in-out infinite; }
.yk-foe.boss .yk-foe-img { max-height: 180px; }
.yk-foe.enter .yk-foe-img { animation: yk-enter .6s cubic-bezier(.3, 1.5, .5, 1), yk-idle 2.6s .6s ease-in-out infinite; }
.yk-foe-img.hurt { animation: yk-hurt .3s; }
.yk-foe-img.lunge { animation: yk-lunge .45s; }
.yk-foe.gone { opacity: 0; filter: brightness(3) blur(3px); }
.yk-foe-name { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .8), 0 0 6px rgb(0 0 0 / .5); }
.yk-tags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.yk-tag { display: inline-flex; align-items: center; gap: 1px; padding: 0 8px 0 2px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; }
.yk-tag img { width: 22px; height: 22px; }
.yk-tag.weak { background: #dff5e5; color: #1e6b37; }
.yk-tag.immune { background: #ffe1e1; color: #9a2222; }
.yk-count { position: absolute; z-index: 2; top: 0; right: 0; padding: 0 8px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.yk-count b { font-size: var(--fs-lg); color: var(--secondary); margin-left: 2px; }
.yk-count.danger { border-color: var(--yk-red); animation: yk-pulse 1s infinite; }
.yk-count.danger b { color: var(--yk-red); }
.yk-team { display: flex; align-items: center; gap: 8px; padding: 2px 16px 4px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.yk-team .yk-hp > span { background: linear-gradient(#8ee6a6, #2f9e55); }
.yk-team .yk-hp.low > span { background: linear-gradient(#ffb199, #e2463a); }
.yk-team b { flex: none; white-space: nowrap; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.yk-hp { position: relative; width: 100%; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); border: 2px solid var(--surface); overflow: hidden; }
.yk-hp.foe { margin-top: 3px; height: 12px; }
.yk-hp > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff9fb0, #e2463a); transition: width .35s ease-out; }
.yk-hp > i { position: absolute; inset: 0 auto 0 0; background: #fff8; transition: width .9s .25s ease-out; }
.yk-goals { display: flex; justify-content: center; gap: 8px; padding: 4px 8px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.yk-goal { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--surface-soft); font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.yk-goal img { width: 28px; height: 28px; }
.yk-goal.done { background: #dff5e5; color: #1e6b37; }
.yk-goals { flex-wrap: wrap; }
.yk-goal-tag { padding: 2px 6px; border-radius: 8px; background: var(--secondary); color: #fff; font-size: var(--fs-xs); }
.yk-party { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px 16px 2px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.yk-member { position: relative; display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; min-height: var(--tap); }
.yk-face { width: 100%; max-width: 52px; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c); background: #fff; object-fit: cover; transition: transform .15s; }
.yk-gauge { width: 100%; max-width: 52px; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.yk-gauge > span { display: block; height: 100%; background: var(--c); transition: width .3s; }
.yk-ready { position: absolute; top: -6px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--gold); color: #3a2400; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; opacity: 0; }
.yk-member.ready .yk-face { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); animation: yk-ready 1.2s ease-in-out infinite; }
.yk-member.ready .yk-ready { opacity: 1; }
.yk-member.attack .yk-face { animation: yk-attack .35s ease-out; }

/* 盤面（7×7） */
.yk-board-wrap { position: relative; width: var(--board); height: var(--board); margin: 4px auto 0; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 3px solid var(--line); box-shadow: var(--shadow); }
.yk-board { position: absolute; inset: 0; overflow: hidden; border-radius: 15px; background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); background-size: calc(100% / 7) calc(100% / 7); }
.yk-tile { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: calc(100% / 7); padding: 3px; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); transition: transform .3s cubic-bezier(.5, 0, .75, 1.3); }
.yk-tile.no-anim { transition: none; }
.yk-tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: transform .12s, filter .12s; filter: drop-shadow(0 2px 1px rgb(0 0 0 / .2)); }
.yk-tile.sel img { transform: scale(1.2); filter: brightness(1.15) drop-shadow(0 0 6px #fff) drop-shadow(0 0 3px var(--gold)); }
.yk-tile.dim img { filter: grayscale(.6) opacity(.4); }
.yk-tile.hint img { animation: yk-hint 1s ease-in-out infinite; }
.yk-tile.pop { animation: yk-pop .28s ease-in forwards; }
.yk-tile.flip img { animation: yk-flip .4s ease-out; }
.yk-num { position: absolute; right: 0; bottom: 0; min-width: 1.5em; padding: 0 .2em; border-radius: 999px; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; font-size: clamp(14px, 3.8vw, 18px); line-height: 1.25; text-align: center; }
.yk-sp { position: absolute; inset: 0; pointer-events: none; }
.yk-sp::before { content: ''; position: absolute; inset: 2%; border-radius: 50%; border: 3px dashed var(--gold); box-shadow: 0 0 8px var(--gold); animation: yk-spin 3s linear infinite; }
.yk-sp::after { content: attr(data-k); position: absolute; left: -2px; top: -2px; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--primary); color: #fff; border: 2px solid #fff; font-weight: 700; font-size: clamp(11px, 3.2vw, 14px); line-height: 1; box-shadow: 0 2px 3px rgb(0 0 0 / .3); }
.yk-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.yk-trace polyline { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #fff); opacity: .85; }
.yk-chain { position: absolute; pointer-events: none; transform: translate(-50%, -130%); padding: 2px 12px; border-radius: 999px; background: var(--surface); border: 3px solid var(--primary); color: var(--ink); font-weight: 700; font-size: var(--fs-md); white-space: nowrap; box-shadow: var(--shadow); text-align: center; }
.yk-chain small { display: block; font-size: var(--fs-xs); color: var(--primary); }
.yk-board-fx { position: absolute; width: calc(100% / 2.3); pointer-events: none; transform: translate(-50%, -50%) scale(.3); animation: yk-burst .55s ease-out forwards; }

/* 文字の 演出 */
.yk-dmg { position: absolute; z-index: 35; transform: translate(-50%, -50%); pointer-events: none; font-weight: 700; font-size: 2rem; color: #fff; -webkit-text-stroke: 3px var(--night); paint-order: stroke; animation: yk-dmg 1s ease-out forwards; white-space: nowrap; }
.yk-dmg.weak { color: #ffe08a; font-size: 2.4rem; }
.yk-dmg.weak::before { content: '弱点 '; font-size: .5em; vertical-align: middle; }
.yk-dmg.resist { color: #ddd; font-size: 1.3rem; }
.yk-dmg.heal { color: #8ee6a6; font-size: 1.6rem; }
.yk-dmg.hurt { color: #ff9a8a; font-size: 1.6rem; }
.yk-hit { position: absolute; left: 50%; top: 45%; width: 110%; max-width: 220px; pointer-events: none; transform: translate(-50%, -50%) scale(.3); animation: yk-burst .6s ease-out forwards; }
.yk-banner { position: absolute; left: 50%; top: 42%; z-index: 20; transform: translate(-50%, -50%); pointer-events: none; text-align: center; white-space: nowrap; font-weight: 700; font-size: 2.2rem; line-height: 1.2; color: #fff; -webkit-text-stroke: 4px var(--secondary); paint-order: stroke; animation: yk-banner 1.1s ease-out forwards; }
.yk-banner small { display: block; font-size: .45em; -webkit-text-stroke: 3px var(--secondary); }
.yk-banner.gold { color: #ffe08a; -webkit-text-stroke-color: var(--primary); }
.yk-toast { position: absolute; left: 50%; bottom: calc(var(--board) / 2); z-index: 45; transform: translateX(-50%); padding: 10px 18px; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--primary); color: var(--ink); font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); animation: yk-banner 1.9s ease-out forwards; pointer-events: none; }
.yk-shake { animation: yk-shake .35s; }
.yk-layer.flash-red::after { content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: rgb(226 70 58 / .3); animation: yk-fade-out .45s forwards; }
.yk-layer.flash-white::after { content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: rgb(255 255 255 / .6); animation: yk-fade-out .5s forwards; }
.yk-cutin { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; background: linear-gradient(transparent 30%, color-mix(in srgb, var(--c) 35%, rgb(255 255 255 / .85)) 30%, color-mix(in srgb, var(--c) 35%, rgb(255 255 255 / .85)) 70%, transparent 70%); animation: yk-fade-out .3s 1.2s forwards; }
.yk-cutin img { position: absolute; left: 0; top: 50%; height: 46%; transform: translateY(-50%); animation: yk-cut-slide 1.4s cubic-bezier(.2, .9, .3, 1) forwards; }
.yk-cutin p { position: relative; margin: 0 0 0 32%; font-weight: 700; font-size: 2rem; color: #fff; -webkit-text-stroke: 4px var(--c); paint-order: stroke; animation: yk-cut-text 1.4s ease-out forwards; }

/* 動き */
@keyframes yk-card-pop { 40% { transform: scale(1.03); } }
@keyframes yk-idle { 50% { transform: translateY(-3px); } }
@keyframes yk-hurt { 0%, 100% { transform: none; } 30% { transform: translateX(-10px) rotate(-3deg); filter: brightness(2); } 60% { transform: translateX(8px) rotate(2deg); } }
@keyframes yk-lunge { 40% { transform: translateY(22px) scale(1.18); } }
@keyframes yk-enter { from { opacity: 0; transform: scale(.4) translateY(-40px); } }
@keyframes yk-attack { 40% { transform: translateY(-12px) scale(1.12); } }
@keyframes yk-ready { 50% { transform: translateY(-3px); } }
@keyframes yk-pulse { 50% { box-shadow: 0 0 12px var(--yk-red); } }
@keyframes yk-hint { 50% { transform: scale(1.14); filter: brightness(1.2); } }
@keyframes yk-pop { 40% { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(1.35); opacity: 1; } 100% { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(0); opacity: 0; } }
@keyframes yk-flip { 50% { transform: scaleX(0); } }
@keyframes yk-spin { to { transform: rotate(360deg); } }
@keyframes yk-burst { 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
@keyframes yk-dmg { 0% { transform: translate(-50%, -20%) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -140%); opacity: 0; } }
@keyframes yk-banner { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%); opacity: 0; } }
@keyframes yk-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(2px, -1px); } }
@keyframes yk-fade-out { to { opacity: 0; } }
@keyframes yk-fade-in { from { opacity: 0; } }
@keyframes yk-pop-in { from { transform: scale(.85); opacity: 0; } }
@keyframes yk-cut-slide { 0% { transform: translate(-100%, -50%); } 25% { transform: translate(-5%, -50%); } 75% { transform: translate(5%, -50%); } 100% { transform: translate(120%, -50%); } }
@keyframes yk-cut-text { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* 動きを 減らす: 画面の ゆれ・フラッシュ・カットインを 止める */
@media (prefers-reduced-motion: reduce) {
  .yk *, .yk *::before, .yk *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html.reduce-motion .yk-shake { animation: none; }
html.reduce-motion .yk-layer.flash-red::after, html.reduce-motion .yk-layer.flash-white::after { display: none; }

/* 低い 画面（高さ 700px 以下）: なかまの 絵と 数字を 少し 詰める */
@media (max-height: 700px) {
  .yk-hero { padding: 8px; }
  .yk-hero-fig { height: 100px; }
  .yk-stats-list div { padding: 2px; }
  .yk-stats-list dd { font-size: var(--fs-sm); }
  .yk-tab { min-height: 60px; }
  .yk-tab img { width: 40px; height: 40px; }
  .yk-req { padding: 6px 10px; }
  .yk-req h2 { margin-bottom: 4px; }
}

/* ---------- 修行（クリアした ステージの 遊び直し。2026-10-08） ---------- */
.yk-practice { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.yk-practice-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-lg); padding: 4px 12px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; }
.yk-practice-item img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.yk-practice-item span { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.yk-practice-item small { color: var(--ink-soft); font-size: var(--fs-xs); }
.yk-practice-item em { flex: none; font-style: normal; color: var(--gold); font-size: var(--fs-lg); letter-spacing: .05em; }
.yk-practice-item em i { font-style: normal; color: var(--line); }
.yk-practice-tag { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--secondary); color: #fff; font-style: normal; font-size: var(--fs-xs); }
.yk-si-how { margin: 6px auto 0; }

/* ---------- 数字ぴったりが 盤面に ある とき（うっすら 光る） ---------- */
.yk-sum small { font-size: var(--fs-xs); color: var(--primary); font-weight: 700; }
.yk-sum.can { animation: yk-sum-can 1.6s ease-in-out infinite; }
@keyframes yk-sum-can { 50% { box-shadow: 0 0 14px var(--gold), var(--shadow); } }

/* ---------- はじめての 1-1: 最初の 1手を 指で 案内 ---------- */
.yk-guide { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.yk-guide-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yk-guide-line polyline { fill: none; stroke: var(--yk-yellow); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 2 18; opacity: .9; filter: drop-shadow(0 0 6px #fff); animation: yk-guide-dash 1s linear infinite; }
.yk-guide-hand { position: absolute; left: 0; top: 0; font-size: 44px; line-height: 1; transform: translate(var(--x0), var(--y0)); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)); animation: yk-guide-hand 2.2s ease-in-out infinite; }
/* 妖怪の 姿・名前・体力を 隠さないよう、盤の すぐ 上（なかまの 列の 上）に 出す */
.yk-guide-note { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + 4px); margin: 0; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface); border: 3px solid var(--yk-yellow); box-shadow: var(--shadow); color: var(--ink); text-align: center; line-height: 1.4; }
.yk-guide-note b { display: block; font-size: var(--fs-md); }
.yk-guide-note small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }
@keyframes yk-guide-dash { to { stroke-dashoffset: -20; } }
@keyframes yk-guide-hand { 0%, 15% { transform: translate(calc(var(--x0) - 6px), var(--y0)); opacity: 0; } 25% { opacity: 1; } 75% { transform: translate(calc(var(--x1) - 6px), var(--y1)); opacity: 1; } 90%, 100% { transform: translate(calc(var(--x1) - 6px), var(--y1)); opacity: 0; } }

/* ---------- 負けの 画面: 足りなかった もの ---------- */
.yk-short { display: grid; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
.yk-short li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-soft); font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.yk-short li span { min-width: 0; }
.yk-short img { width: 36px; height: 36px; object-fit: contain; }
.yk-short b { font-size: var(--fs-2xl); color: var(--primary); margin: 0 2px; }
.yk-lose-tip { color: var(--ink) !important; text-align: left; }
/* 結果（勝ち・負け）: 中身は スクロール、ボタンは 下に 固定。絵は 低い 画面で 小さく */
.yk-result .yk-result-fig { width: auto; max-width: 40%; height: clamp(72px, 17dvh, 150px); object-fit: contain; }
.yk-lose .yk-result-fig { height: clamp(64px, 12dvh, 110px); }
.yk-result .yk-modal-dock .btn { white-space: normal; }
.yk-lose .btn-stack small { font-size: var(--fs-xs); font-weight: 500; }
.yk-lose .yk-row .btn { font-size: var(--fs-md); padding-inline: 8px; }

/* v1.9 H3: 属性の 札は 色の 地に 白文字（黄 1.8:1）を やめ、うすい 地＋本文の 色＋色の 枠に */
.yk-color { background: color-mix(in srgb, var(--c) 28%, var(--surface)); color: var(--ink); border: 2px solid var(--c); }
/* v1.9 H2: 文字「大」の ショップは 気力・体力の 枠を 1列に（ボタンの 文が 4行に 折れていた） */
html.text-large .shop .energy-panel { grid-template-columns: 1fr; justify-items: stretch; text-align: center; }
/* 出陣は 大きく 主役、やめるは 下の 文字リンク（2026-10-11） */
.yk-go-col { display: grid; gap: 2px; margin-top: 6px; }
.yk-go-col .yk-sortie { width: min(100%, 340px); min-height: 72px; margin: 0 auto; }
.yk-go-col .btn-ghost { min-height: 44px; }
.yk-connect-guide { display: block; width: 100%; max-width: 420px; height: auto; margin: 8px auto 14px; border-radius: 16px; }
.concise-details { margin: 10px 0; text-align: left; }
.concise-details > summary { cursor: pointer; min-height: 48px; padding: 12px 4px; font-weight: 700; color: var(--secondary); }

/* ===== v3.0（設計 v0.2）: 地域・連勝の 鈴・巻物・進化・シール帳・続ける・ショップの おすすめ ===== */
.yk-path-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.yk-head-chips { display: flex; gap: 4px; flex: none; }
.yk-bell, .yk-scrolls { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 2px 8px 2px 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.yk-bell img, .yk-scrolls img { width: 26px; height: 26px; object-fit: contain; }
.yk-bell.on { color: #8a5a10; background: #fff1c2; box-shadow: 0 0 0 2px #f2c45a inset; }
.yk-bell.on img { animation: yk-bell-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes yk-bell-ring { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: 14deg; } 90% { rotate: -12deg; } 95% { rotate: 6deg; } }
.yk-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; font-style: normal; background: #e9f3ea; color: #2c6a3b; vertical-align: 1px; }
.yk-kind.kind-easy { background: #e3f4ff; color: #22608f; }
.yk-kind.kind-hard { background: #ffe7d6; color: #a1431b; }
.yk-kind.kind-boss { background: #ffe0ea; color: #a1123f; }
.yk-kind.kind-superhard { background: linear-gradient(90deg, #ffd34d, #ff7aa8); color: #4a0f22; }
.yk-ahead.kind-hard, .yk-ahead.kind-boss, .yk-ahead.kind-superhard { box-shadow: 0 0 0 3px #f2a65a, 0 10px 30px rgb(40 20 60 / .3); }
.yk-ahead-meta { font-variant-numeric: tabular-nums; }
.yk-mini.can { box-shadow: 0 0 0 2px #f2c45a; border-radius: 12px; }
.yk-bar-bell { width: 20px; height: 20px; vertical-align: -4px; margin-left: 4px; }
.yk-member.drained { animation: yk-drain .9s ease; }
@keyframes yk-drain { 0%, 100% { filter: none; } 40% { filter: grayscale(1) brightness(.6); transform: scale(.94); } }

/* なかま: おだんごの 皿 */
.yk-plate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yk-plate-bar { flex: 1 0 100%; height: 10px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; }
.yk-plate-bar i { display: block; height: 100%; width: var(--fill); background: linear-gradient(90deg, #f6a6c1, #e05a8a, #f2c45a); border-radius: inherit; transition: width .5s ease; }
.yk-stats-list dd small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 500; }
.yk-album-link { display: inline-flex; align-items: center; gap: 4px; }

/* ふしぎ絵巻 */
.album .screen-head.album-head { flex-direction: column; align-items: center; gap: 0; padding-bottom: 0; }
.album-title { margin: 0; line-height: 0; }
.album-title img { width: min(260px, 70vw); height: auto; }
.album-season { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.album-season b { color: var(--primary); font-size: var(--fs-lg); }
.album-season em { font-style: normal; color: #8a5a10; background: #fff1c2; padding: 1px 8px; border-radius: 99px; }
.album-pages { display: flex; gap: 4px; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; }
.album-tab { flex: none; display: grid; justify-items: center; min-height: 48px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--fs-xs); }
.album-tab small { font-size: 11px; color: var(--ink-soft); }
.album-tab.on { background: #fff1c2; border-color: #d39b3a; font-weight: 700; color: #3d2f20; }
.album-tab.done { box-shadow: inset 0 -3px 0 #f2c45a; }
.album-sheet { padding: 10px; border-radius: var(--r-lg); background: linear-gradient(#fffaf0, #fbf1dc); border: 2px solid #e2c78d; box-shadow: inset 0 0 0 4px #fff8; color: #3d2f20; }
.album-sheet h2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 6px; font-size: var(--fs-lg); color: inherit; }
.album-sheet h2 small { font-size: var(--fs-xs); color: #7a6243; }
.album-done-mark { height: 30px; width: auto; animation: yk-pop-in .5s cubic-bezier(.3, 1.4, .5, 1); }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.album-cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 6px 2px 4px; border-radius: 14px; background: #fff; border: 1px dashed #d8c39a; min-height: 112px; }
.album-cell img { width: min(74px, 19vw); height: min(74px, 19vw); object-fit: contain; border-radius: 50%; }
.album-cell small { font-size: 12px; line-height: 1.3; text-align: center; }
.album-cell.none { background: #f3ead6; }
.album-cell.none small { color: #a8977a; }
.album-q { display: grid; place-items: center; width: min(74px, 19vw); height: min(74px, 19vw); border-radius: 50%; background: #e6dbc3; color: #b8a682; font-size: 28px; font-weight: 700; }
.album-stars { font-style: normal; font-size: 10px; letter-spacing: -1px; color: #c9a14a; }
.album-cell.star-4.got, .album-cell.star-5.got { border: 2px solid #e2b24a; background: radial-gradient(circle at 50% 30%, #fffbe8, #fff1c9); }
.album-cell.star-5.got img { box-shadow: 0 0 0 3px #f2c45a, 0 0 14px #ffd76a; }
.album-cell.gold img { box-shadow: 0 0 0 3px #f2c45a, 0 0 16px #ffd76a; filter: saturate(1.2) brightness(1.05); }
.album-dup { position: absolute; top: 4px; right: 6px; font-size: 11px; color: #7a6243; }
.album-sheet.complete .album-cell img { animation: album-wiggle 3s ease-in-out infinite; }
.album-sheet.complete .album-cell:nth-child(odd) img { animation-delay: -1.2s; }
@keyframes album-wiggle { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: 4deg; translate: 0 -3px; } }
.album-goshuin { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.album-goshuin img { width: 48px; height: 48px; flex: none; }
.album-goshuin > div { flex: 1; min-width: 0; }
.album-goshuin strong { display: block; }
.album-goshuin strong b { color: #b3264e; font-size: var(--fs-lg); }
.album-goshuin small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.album-how { margin-top: 10px; }

/* シールを 開ける */
.yk-reveal-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 6px 0 10px; padding: 0; }
.yk-reveal-list li { display: grid; justify-items: center; gap: 2px; width: 104px; animation: yk-reveal-in .6s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--k) * 260ms + 200ms); }
.yk-reveal-card { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff, #f6ecd7); box-shadow: 0 4px 10px #0002; }
.yk-reveal-card img { width: 84px; height: 84px; object-fit: contain; border-radius: 50%; }
.yk-reveal-list li.star-4 .yk-reveal-card, .yk-reveal-list li.star-5 .yk-reveal-card, .yk-reveal-list li.gold .yk-reveal-card { box-shadow: 0 0 0 3px #f2c45a, 0 0 18px #ffd76a; }
.yk-reveal-list b { font-size: var(--fs-sm); }
.yk-reveal-list i { font-style: normal; font-size: 11px; color: #c9a14a; letter-spacing: -1px; }
.yk-reveal-list small { font-size: var(--fs-xs); color: var(--ink-soft); }
.new-tag { font-style: normal; color: #fff; background: #d81b5e; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; margin-left: 4px; }
@keyframes yk-reveal-in { 0% { transform: rotateY(90deg) scale(.6); opacity: 0; } 60% { transform: rotateY(-10deg) scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
.yk-page-done { margin: 4px 0 8px; }
.yk-page-done img { width: min(260px, 70vw); height: auto; animation: yk-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: .8s; }
.yk-page-done p, .yk-album-complete { font-size: var(--fs-sm); color: #6b4a1a; }
.yk-reveal .yk-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: center; }
.yk-reveal .yk-reveal-ok { min-height: 56px; }

/* 勝った とき・続ける */
.yk-result-hero { display: grid; place-items: center; }
.yk-gifts { display: grid; gap: 6px; list-style: none; margin: 8px 0 4px; padding: 0; text-align: left; }
.yk-gift { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface-soft); }
.yk-gift img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.yk-gift strong { display: block; font-size: var(--fs-sm); }
.yk-gift small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.yk-cont-foe { display: grid; justify-items: center; gap: 4px; margin-bottom: 4px; }
.yk-cont-foe img { height: 96px; object-fit: contain; filter: drop-shadow(0 4px 6px #0004); animation: yk-idle 2.6s ease-in-out infinite; }
.yk-cont-foe .yk-hp { width: 70%; height: 12px; }
.yk-cont-foe .yk-hp span { display: block; height: 100%; background: linear-gradient(90deg, #ff8a5c, #e2463a); border-radius: inherit; }
.yk-cont-foe b { font-size: var(--fs-sm); color: #a1123f; }
.yk-cont h2 { font-size: calc(var(--fs-xl) * 1.15); color: #c0174f; }
.yk-cont-lead { font-size: var(--fs-sm); }
.yk-cont-bell { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-sm); color: #8a5a10; }
.yk-cont-main { display: grid; gap: 2px; }
.yk-cont-main .img-skin-main { min-height: 70px; }
.yk-cont-price { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.yk-cont-price b { font-size: var(--fs-lg); color: var(--ink); }
.yk-cont-price small { margin-left: 8px; font-size: var(--fs-xs); }
.yk-si-bell { display: flex; align-items: center; gap: 8px; text-align: left; font-size: var(--fs-xs); color: #8a5a10; background: #fff8e1; padding: 6px 8px; border-radius: var(--r-sm); }
.yk-sheet .yk-shop-list { text-align: left; }
.shop-item.starter { border: 2px solid #f2a65a; }
.yk-tag-hot { font-style: normal; display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #d81b5e; color: #fff; font-size: 11px; vertical-align: 2px; }

/* ショップの おすすめ */
.shop-feature { display: grid; gap: 8px; margin-bottom: 10px; }
.shop-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: linear-gradient(120deg, #fff8e6, #fff0f5); border: 1px solid #e7c98f; color: #3d2f20; }
.shop-card > img { width: 56px; height: 56px; flex: none; object-fit: contain; }
.shop-card > div { flex: 1; min-width: 0; }
.shop-card strong { display: block; font-size: var(--fs-sm); }
.shop-card small { display: block; font-size: var(--fs-xs); color: #6b5638; }
.shop-card.pass.on { border-color: #3f8f5a; background: linear-gradient(120deg, #f1fbef, #fff8e6); }
.shop-on { color: #2c6a3b !important; font-weight: 700; }
.shop-meter { display: block; height: 8px; margin: 4px 0 1px; border-radius: 99px; background: #efe4cc; overflow: hidden; }
.shop-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, #f29a4a); border-radius: inherit; }
.shop-card.piggy.full { box-shadow: 0 0 0 3px #f2c45a, 0 0 16px #ffd76a; }
.shop-card .btn { flex: none; }
.reduce-motion .yk-bell.on img, .reduce-motion .yk-reveal-list li, .reduce-motion .album-sheet.complete .album-cell img { animation: none; }
/* v3.0: 陣の 数は 左上の 札で 出すので 目標の 行は 出さない（妖怪の 絵の 高さを 取る）。名前と 相性の 札を 小さく */
.yk-battle .yk-goals { display: none; }
.yk-foe-name { font-size: var(--fs-xs); line-height: 1.3; }
.yk-foe .yk-tag { font-size: 12px; line-height: 1.35; padding: 0 6px 0 1px; }
.yk-foe .yk-tag img { width: 18px; height: 18px; }
.yk-foe .yk-count { top: -2px; }
.yk-foe .yk-count { top: auto; bottom: 46px; right: 0; padding: 0 6px; font-size: 11px; }
.yk-foe .yk-count b { font-size: var(--fs-md); }
.album-season { padding: 2px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); }
.yk-plate-bar { order: 2; }
.party .yk-req h2 { margin-bottom: 2px; }
.party .yk-growth-preview { margin: 0 0 4px; font-size: var(--fs-xs); }
.yk-path-title small { white-space: nowrap; }
.text-xlarge .yk-path-title, .text-large .yk-path-title { font-size: var(--fs-sm); }
.text-xlarge .yk-path-title small { font-size: 12px; }
.text-xlarge .yk-ahead-foes { height: clamp(64px, 11dvh, 100px); margin-top: calc(-1 * clamp(40px, 7dvh, 70px)); }
.text-xlarge .yk-ahead-meta { font-size: var(--fs-xs); }