/* バッジモンスター（バジモン）— 画面（接頭辞 bj-）。2026-10-05 */
:root {
	--bj-navy: #1d3a5c; --bj-navy2: #12263f; --bj-cream: #fff8e7; --bj-cream2: #f3e6c4; --bj-mustard: #f2b632; --bj-teal: #2aa79b; --bj-red: #e2574c;
	--bj-ink: #1f2430; --bj-hp: #4cc35a; --bj-hpm: #f0c23a; --bj-hpl: #e2574c;
	--bj-font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1a2b; overscroll-behavior: none; }
.bj-body { font-family: var(--bj-font); color: var(--bj-ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
.bj-app { position: relative; width: 100%; max-width: 520px; height: 100%; height: 100dvh; margin: 0 auto; overflow: hidden; background: #000; }
@media (min-width: 700px) {
	.bj-body { background: radial-gradient(circle at 30% 20%, #2c5b86 0, #12263f 55%, #0b1626 100%); }
	.bj-app { box-shadow: 0 0 0 3px #0b1626, 0 20px 60px rgba(0,0,0,.6); }
}
.bj-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bj-ui { position: absolute; inset: 0; pointer-events: none; }
.bj-ui > * { pointer-events: auto; }

/* 読み込み */
.bj-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bj-navy2); color: #fff; z-index: 50; transition: opacity .4s; }
.bj-load.is-done { opacity: 0; pointer-events: none; }
.bj-load__in { text-align: center; font-weight: 700; }
.bj-load__badge { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #f6f1ff 13% 55%, #cfc6e8 56% 70%, #9aa3b5 71%); box-shadow: 0 0 22px rgba(255,255,255,.55); animation: bjSpin 1.6s linear infinite; }
.bj-load__bar { width: 180px; height: 8px; margin: 10px auto 0; background: rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; }
.bj-load__bar i { display: block; height: 100%; width: 0; background: var(--bj-mustard); transition: width .2s; }
@keyframes bjSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* タイトル */
.bj-title { position: absolute; inset: 0; background: #7fc6ee center / cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px calc(28px + env(safe-area-inset-bottom)); }
.bj-title__logo { position: absolute; top: max(4%, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; }
.bj-title__logo b { display: inline-block; font-size: clamp(54px, 17vw, 84px); font-weight: 800; letter-spacing: .02em; color: #ffd23f; -webkit-text-stroke: 7px var(--bj-navy); paint-order: stroke fill; text-shadow: 0 6px 0 var(--bj-navy), 0 10px 18px rgba(0,0,0,.35); transform: rotate(-3deg); }
.bj-title__logo b img { height: 1em; }
.bj-title__logo small { display: block; margin-top: 2px; font-size: clamp(15px, 4.6vw, 20px); font-weight: 800; color: #fff; -webkit-text-stroke: 4px #1b7f77; paint-order: stroke fill; letter-spacing: .2em; }
.bj-title__btns { width: 100%; max-width: 320px; display: grid; gap: 10px; }
.bj-title__note { margin: 10px 0 0; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); text-align: center; }

/* ボタン */
.bj-btn { display: block; width: 100%; padding: 14px 16px; border: 3px solid var(--bj-navy); border-radius: 16px; background: var(--bj-cream); color: var(--bj-navy); font: 800 17px/1.2 var(--bj-font); box-shadow: 0 4px 0 var(--bj-navy); cursor: pointer; text-align: center; }
.bj-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bj-navy); }
.bj-btn--main { background: linear-gradient(180deg, #ffd860, #f2b632); }
.bj-btn--sub { background: #e9f4f2; }
.bj-btn[disabled] { opacity: .45; }

/* 地図の上の操作 */
.bj-pad { position: absolute; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 150px; height: 150px; }
.bj-pad button { position: absolute; width: 52px; height: 52px; border: 3px solid rgba(18,38,63,.85); border-radius: 14px; background: rgba(255,248,231,.82); color: var(--bj-navy); font: 800 20px/1 var(--bj-font); box-shadow: 0 3px 0 rgba(18,38,63,.85); touch-action: none; }
.bj-pad button.is-on { background: #ffd860; transform: translateY(2px); box-shadow: 0 1px 0 rgba(18,38,63,.85); }
.bj-pad .u { left: 49px; top: 0; } .bj-pad .d { left: 49px; bottom: 0; } .bj-pad .l { left: 0; top: 49px; } .bj-pad .r { right: 0; top: 49px; }
.bj-ab { position: absolute; right: 14px; bottom: calc(26px + env(safe-area-inset-bottom)); width: 140px; height: 120px; }
.bj-ab button { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(18,38,63,.85); font: 800 20px/1 var(--bj-font); box-shadow: 0 3px 0 rgba(18,38,63,.85); touch-action: none; }
.bj-ab .a { right: 0; top: 0; background: rgba(255,216,96,.92); color: var(--bj-navy); }
.bj-ab .b { left: 0; bottom: 0; background: rgba(233,244,242,.9); color: var(--bj-navy); font-size: 15px; }
.bj-ab button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(18,38,63,.85); }
.bj-hud { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.bj-hud__place { padding: 6px 12px; border-radius: 12px; background: rgba(18,38,63,.78); color: #fff; font-size: 13px; font-weight: 800; opacity: 0; transition: opacity .5s; }
.bj-hud__place.is-on { opacity: 1; }
.bj-hud__menu { pointer-events: auto; padding: 8px 14px; border: 3px solid var(--bj-navy); border-radius: 12px; background: var(--bj-cream); color: var(--bj-navy); font: 800 14px/1 var(--bj-font); box-shadow: 0 3px 0 var(--bj-navy); }
.bj-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .22s; }
.bj-fade.is-on { opacity: 1; }
.bj-fade.is-white { background: #fff; }

/* 会話 */
.bj-talk { position: absolute; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 118px; padding: 16px 18px 18px; border: 4px solid var(--bj-navy); border-radius: 18px; background: var(--bj-cream); box-shadow: 0 5px 0 var(--bj-navy), inset 0 0 0 3px #fff; font-size: 16px; line-height: 1.65; font-weight: 700; z-index: 36; }
.bj-talk__who { position: absolute; top: -16px; left: 16px; padding: 3px 12px; border: 3px solid var(--bj-navy); border-radius: 10px; background: var(--bj-mustard); color: var(--bj-navy); font-size: 13px; font-weight: 800; }
.bj-talk__txt { white-space: pre-wrap; min-height: 2.6em; }
.bj-talk__next { position: absolute; right: 16px; bottom: 8px; color: var(--bj-navy); font-size: 13px; animation: bjBob .8s ease-in-out infinite; }
@keyframes bjBob { 50% { transform: translateY(3px); } }
.bj-choice { position: absolute; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); min-width: 150px; padding: 8px; border: 4px solid var(--bj-navy); border-radius: 16px; background: var(--bj-cream); box-shadow: 0 4px 0 var(--bj-navy); z-index: 37; display: grid; gap: 6px; }
.bj-choice button { padding: 11px 14px; border: 0; border-radius: 10px; background: #fff; color: var(--bj-navy); font: 800 15px/1.2 var(--bj-font); text-align: left; }
.bj-choice button:active, .bj-choice button:focus-visible { background: #ffe9a6; outline: none; }

/* 全面の画面（メニュー・バッジ帳・店など） */
.bj-sheet { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bj-cream); }
.bj-sheet__head { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: var(--bj-navy); color: #fff; }
.bj-sheet__head h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; }
.bj-sheet__head button { padding: 7px 12px; border: 2px solid #fff; border-radius: 10px; background: transparent; color: #fff; font: 800 14px/1 var(--bj-font); }
.bj-sheet__body { flex: 1; overflow-y: auto; padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.bj-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bj-menu .bj-btn { padding: 18px 10px; font-size: 16px; }
.bj-menu .bj-btn small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; opacity: .7; }
.bj-info { margin: 12px 0 0; padding: 12px; border: 2px dashed var(--bj-cream2); border-radius: 12px; font-size: 13px; line-height: 1.6; }

.bj-mon { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border: 3px solid var(--bj-navy); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--bj-navy); width: 100%; text-align: left; font-family: var(--bj-font); color: var(--bj-ink); }
.bj-mon.is-dead { background: #f1e3e1; }
.bj-mon.is-sel { background: #fff3c9; }
.bj-mon__img { width: 62px; height: 62px; flex: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 55%, #e8eef5 56%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bj-mon__img img { width: 116%; height: 116%; object-fit: contain; }
.bj-mon__main { flex: 1; min-width: 0; }
.bj-mon__nm { font-size: 15px; font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bj-mon__lv { font-size: 12px; color: #586174; }
.bj-type { display: inline-block; padding: 1px 7px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.bj-hpbar { position: relative; height: 9px; margin-top: 5px; border-radius: 6px; background: #3b4252; overflow: hidden; }
.bj-hpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bj-hp); border-radius: 6px; transition: width .45s; }
.bj-hpbar.is-mid i { background: var(--bj-hpm); } .bj-hpbar.is-low i { background: var(--bj-hpl); }
.bj-mon__hp { font-size: 12px; font-weight: 800; margin-top: 2px; color: #2d3446; }
.bj-st { display: inline-block; padding: 0 6px; border-radius: 6px; background: #8a5ab8; color: #fff; font-size: 11px; }

.bj-detail { text-align: center; }
.bj-detail__art { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.bj-detail__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.12)); }
.bj-detail table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.bj-detail td { padding: 6px 8px; border-bottom: 1px solid var(--bj-cream2); text-align: left; }
.bj-detail td:last-child { text-align: right; font-weight: 800; }
.bj-detail p { text-align: left; font-size: 14px; line-height: 1.7; }
.bj-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bj-move { padding: 9px 8px; border: 3px solid var(--bj-navy); border-radius: 12px; background: #fff; text-align: left; font-family: var(--bj-font); color: var(--bj-ink); }
.bj-move b { display: block; font-size: 14px; } .bj-move small { font-size: 11px; color: #5a6275; }

.bj-dex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bj-dex__c { position: relative; aspect-ratio: 1 / 1.18; border: 3px solid var(--bj-navy); border-radius: 14px; background: #fff; padding: 4px; text-align: center; font-family: var(--bj-font); color: var(--bj-ink); }
.bj-dex__c .bj-badge { width: 76%; margin: 4px auto 2px; }
.bj-dex__c b { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-dex__c small { position: absolute; top: 4px; left: 7px; font-size: 10px; color: #8a90a0; font-weight: 800; }
.bj-dex__c.is-none { background: #efe6d0; color: #a69c84; }
.bj-dex__sum { margin: 0 0 10px; font-weight: 800; color: var(--bj-navy); }

/* バッジ（絵が届くまでは CSS の缶バッジ） */
.bj-badge { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 9%; background: conic-gradient(from 210deg, var(--rim1, #c9a24a), var(--rim2, #f6e2a0), var(--rim1, #c9a24a), var(--rim2, #f6e2a0), var(--rim1, #c9a24a)); box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.35); }
.bj-badge > span { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--en, #f7f3ff) 11% 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), inset 0 6px 10px rgba(255,255,255,.55); }
.bj-badge > span img { width: 130%; height: 130%; margin: -15%; object-fit: contain; }
.bj-badge > span::after { content: ''; position: absolute; left: 12%; top: 8%; width: 46%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.55); transform: rotate(-25deg); }
.bj-badge.is-blank > span { background: radial-gradient(circle at 35% 30%, #fff 0 14%, #f4f0ff 15% 60%, #e6e0f7 61%); animation: bjGlow 1.8s ease-in-out infinite; }
.bj-badge.is-dim > span img { filter: brightness(0) opacity(.25); }
.bj-badge.is-art { background: none; padding: 0; box-shadow: none; }
.bj-badge.is-art > img { width: 100%; height: 100%; object-fit: contain; }
@keyframes bjGlow { 50% { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 0 18px rgba(255,255,255,.9); } }

/* 戦闘 */
.bj-bt { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; background: #000; }
.bj-bt__scene { position: relative; flex: 1 1 56%; min-height: 0; background: #7fc6ee center / cover no-repeat; overflow: hidden; }
.bj-bt__scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18)); pointer-events: none; }
.bj-bt__foe, .bj-bt__me { position: absolute; transition: transform .35s, opacity .35s, filter .2s; }
.bj-bt__foe { right: 4%; top: 15%; width: 46%; aspect-ratio: 1; }
.bj-bt__me { left: 2%; bottom: 2%; width: 52%; aspect-ratio: 1; }
.bj-bt__foe img, .bj-bt__me img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(0,0,0,.18)); }
.bj-bt__me img { transform: scaleX(-1); }
.bj-bt__foe::before, .bj-bt__me::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 3%; height: 11%; border-radius: 50%; background: rgba(0,0,0,.18); filter: blur(2px); }
.bj-bt__foe.is-hit, .bj-bt__me.is-hit { animation: bjHit .45s; }
.bj-bt__foe.is-out { transform: translateY(30%); opacity: 0; }
.bj-bt__me.is-out { transform: translateY(30%); opacity: 0; }
.bj-bt__foe.is-in, .bj-bt__me.is-in { animation: bjIn .45s ease-out; }
.bj-bt__foe.is-gone { opacity: 0; transform: scale(.2); }
@keyframes bjHit { 0%, 100% { filter: none; transform: translateX(0); } 20% { filter: brightness(3); transform: translateX(-6%); } 40% { transform: translateX(5%); } 60% { filter: brightness(2.2); transform: translateX(-3%); } }
@keyframes bjIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bj-box { position: absolute; width: 56%; padding: 8px 12px 10px; border: 3px solid var(--bj-navy); border-radius: 14px; background: rgba(255,248,231,.96); box-shadow: 0 3px 0 var(--bj-navy); }
.bj-box--foe { left: 3%; top: max(4%, env(safe-area-inset-top)); }
.bj-box--me { right: 3%; bottom: 5%; width: 54%; }
.bj-box__nm { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-weight: 800; font-size: 15px; }
.bj-box__nm small { font-size: 12px; color: #4f586b; }
.bj-box__hp { font-size: 12px; font-weight: 800; text-align: right; margin-top: 2px; }
.bj-box__exp { height: 4px; margin-top: 4px; border-radius: 3px; background: #c9ccd6; overflow: hidden; }
.bj-box__exp i { display: block; height: 100%; background: #3f9fe0; transition: width .5s; }
.bj-box__mini { width: 26px; height: 26px; flex: none; }
.bj-bt__fx { position: absolute; width: 46%; aspect-ratio: 1; pointer-events: none; background-repeat: no-repeat; background-size: 400% 200%; }
.bj-bt__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.bj-bt__flash.is-on { animation: bjFlash .35s; }
@keyframes bjFlash { 30% { opacity: .8; } }
.bj-bt__badge { position: absolute; left: 50%; top: 42%; width: 30%; transform: translate(-50%, -50%); transition: transform .3s; }
.bj-bt__badge.is-wob { animation: bjWob .55s ease-in-out; }
@keyframes bjWob { 25% { transform: translate(-50%, -50%) rotate(-14deg); } 75% { transform: translate(-50%, -50%) rotate(14deg); } }
.bj-bt__badge.is-ok { animation: bjOk .8s ease-out forwards; }
@keyframes bjOk { 40% { transform: translate(-50%, -50%) scale(1.3); filter: brightness(1.8); } 100% { transform: translate(-50%, -50%) scale(1.1); } }
.bj-bt__panel { flex: 0 0 auto; position: relative; padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); background: var(--bj-navy); }
.bj-bt__msg { min-height: 82px; padding: 12px 14px; border: 3px solid #fff; border-radius: 14px; background: var(--bj-cream); font-size: 16px; line-height: 1.6; font-weight: 700; white-space: pre-wrap; }
.bj-bt__cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bj-bt__cmds .bj-btn { padding: 13px 8px; font-size: 16px; }
.bj-bt__cmds .bj-btn--fight { grid-column: span 2; background: linear-gradient(180deg, #ff9a7a, #e2574c); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.bj-bt__cmds .bj-btn--invite { background: linear-gradient(180deg, #fff, #e9e3ff); }
.bj-mv { padding: 10px 8px; border: 3px solid var(--bj-navy); border-radius: 12px; background: #fff; text-align: left; font-family: var(--bj-font); color: var(--bj-ink); box-shadow: 0 3px 0 var(--bj-navy); }
.bj-mv b { display: block; font-size: 15px; }
.bj-mv small { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; font-weight: 800; color: #5a6275; }
.bj-mv[disabled] { opacity: .45; }
.bj-mv:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bj-navy); }

/* 相棒えらび・進化・印 */
.bj-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bj-pick button { padding: 6px 4px 10px; border: 3px solid var(--bj-navy); border-radius: 16px; background: #fff; font-family: var(--bj-font); color: var(--bj-ink); box-shadow: 0 3px 0 var(--bj-navy); }
.bj-pick button img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bj-pick button b { display: block; font-size: 14px; }
.bj-pick button.is-sel { background: #fff3c9; }
.bj-evo { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #2d4f7a 0, #0e1b2c 70%); color: #fff; }
.bj-evo__art { position: relative; width: 70%; max-width: 320px; aspect-ratio: 1; }
.bj-evo__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bj-evo__art .is-old { animation: bjEvoOld 3s forwards; }
.bj-evo__art .is-new { opacity: 0; animation: bjEvoNew 3s forwards; }
@keyframes bjEvoOld { 0%, 20% { filter: none; opacity: 1; } 30%, 45%, 60%, 75% { filter: brightness(0) invert(1); opacity: 1; } 37%, 52%, 67% { filter: brightness(0) invert(1); opacity: .2; } 85%, 100% { opacity: 0; filter: brightness(0) invert(1); } }
@keyframes bjEvoNew { 0%, 30% { opacity: 0; } 37%, 52%, 67% { opacity: .8; filter: brightness(0) invert(1); } 45%, 60%, 75% { opacity: 0; } 85% { opacity: 1; filter: brightness(0) invert(1); } 100% { opacity: 1; filter: none; } }
.bj-evo .bj-talk { position: absolute; }
.bj-crack { position: absolute; inset: 15%; border-radius: 50%; pointer-events: none; }
.bj-end { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: radial-gradient(circle at 50% 35%, #fff4c7 0, #f2b632 45%, #c27a17 100%); text-align: center; }
.bj-end h2 { margin: 0; font-size: 26px; color: var(--bj-navy); }
.bj-end p { margin: 0; font-weight: 700; line-height: 1.7; color: #2b2b2b; }
.bj-leader { width: 150px; height: 150px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(145deg, #a47448, #5f3e22 55%, #3e2814); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(255,255,255,.8); animation: bjIn .6s ease-out; }
.bj-leader i { width: 60%; height: 60%; background: radial-gradient(circle at 50% 70%, #c8b49a 0 26%, transparent 27%), radial-gradient(circle at 35% 45%, #b49a7e 0 22%, transparent 23%), radial-gradient(circle at 63% 40%, #d6c3a6 0 22%, transparent 23%); }

/* 店 */
.bj-shop__row { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; border: 3px solid var(--bj-navy); border-radius: 14px; background: #fff; }
.bj-shop__row img { width: 44px; height: 44px; object-fit: contain; }
.bj-shop__row .bj-ic { width: 44px; height: 44px; flex: none; background-size: 400% 400%; }
.bj-shop__row div { flex: 1; } .bj-shop__row b { display: block; font-size: 15px; } .bj-shop__row small { font-size: 11px; color: #5a6275; }
.bj-shop__row button { padding: 9px 12px; border: 3px solid var(--bj-navy); border-radius: 10px; background: var(--bj-mustard); color: var(--bj-navy); font: 800 14px/1 var(--bj-font); }
.bj-money { font-weight: 800; color: var(--bj-navy); margin: 0 0 10px; }
.bj-toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; background: rgba(18,38,63,.92); color: #fff; font-weight: 800; font-size: 14px; z-index: 60; pointer-events: none; animation: bjToast 1.8s forwards; white-space: nowrap; }
@keyframes bjToast { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.bj-input { width: 100%; padding: 12px; border: 3px solid var(--bj-navy); border-radius: 12px; font: 800 18px/1 var(--bj-font); text-align: center; -webkit-user-select: text; user-select: text; }
@media (max-height: 700px) {
	.bj-talk { min-height: 96px; font-size: 15px; padding: 12px 14px 14px; }
	.bj-bt__msg { min-height: 64px; font-size: 15px; padding: 8px 12px; }
	.bj-bt__cmds .bj-btn, .bj-mv { padding: 9px 8px; }
	.bj-pad { transform: scale(.86); transform-origin: left bottom; }
	.bj-ab { transform: scale(.86); transform-origin: right bottom; }
}

/* ---------- 第3段（10/5）: 毎日の遊び・試練の塔・ランキング・きせかえ・観戦 ---------- */
.bj-daily h3, .bj-sheet__body h3 { margin: 16px 0 8px; font-size: 15px; color: var(--bj-navy); }
.bj-daily > .bj-btn { margin-bottom: 6px; }
.bj-btn small { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; opacity: .75; }
.bj-quest { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; border: 2px solid var(--bj-cream2); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; }
.bj-quest span { flex: 1; } .bj-quest b { font-size: 12px; color: #b8542a; white-space: nowrap; }
.bj-quest em { font-style: normal; font-size: 12px; color: #8a90a0; white-space: nowrap; }
.bj-quest button { padding: 7px 10px; border: 3px solid var(--bj-navy); border-radius: 10px; background: var(--bj-mustard); color: var(--bj-navy); font: 800 13px/1 var(--bj-font); }
.bj-quest.is-done { border-color: #f2b632; background: #fffbe8; }
.bj-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.bj-tabs button { flex: 1; padding: 9px; border: 3px solid var(--bj-navy); border-radius: 10px; background: #fff; color: var(--bj-navy); font: 800 14px/1 var(--bj-font); }
.bj-tabs button.is-on { background: var(--bj-mustard); }
.bj-rank { list-style: none; margin: 0; padding: 0; }
.bj-rank li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 5px; border-radius: 10px; background: #fff; border: 2px solid var(--bj-cream2); font-weight: 700; }
.bj-rank li b { width: 28px; text-align: center; color: var(--bj-navy); } .bj-rank li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-rank li em { font-style: normal; color: #b8542a; } .bj-rank li small { color: #8a90a0; font-size: 11px; }
.bj-rank li.is-me { border-color: var(--bj-mustard); background: #fff7d6; }
.bj-skins { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-skins button { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 3px solid var(--bj-navy); border-radius: 12px; background: #fff; color: var(--bj-navy); font: 800 13px/1.2 var(--bj-font); }
.bj-skins button img { width: 36px; height: 36px; object-fit: contain; }
.bj-skins button.is-on { background: var(--bj-mustard); }
.bj-end--tw { overflow-y: auto; justify-content: flex-start; padding-top: max(28px, env(safe-area-inset-top)); }
.bj-end--tw h2 { margin-top: 8px; }
.bj-twteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.bj-twteam > div { padding: 6px; border: 3px solid var(--bj-navy); border-radius: 14px; background: rgba(255,255,255,.92); text-align: center; font-size: 12px; }
.bj-twteam > div.is-dead { opacity: .45; }
.bj-twteam img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bj-twteam b { display: block; font-size: 13px; }
.bj-twfloors { width: 100%; max-width: 420px; display: grid; gap: 5px; }
.bj-twfloors > div { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.85); font-size: 13px; text-align: left; }
.bj-twfloors small { color: #8a5a20; font-weight: 800; } .bj-twfloors b { flex: 1; }
.bj-twfloors span img { width: 30px; height: 30px; object-fit: contain; }
.bj-rainbow .bj-talk, .bj-rainbow .bj-bt__msg { border-image: linear-gradient(90deg,#ff7a7a,#ffd36e,#7ee08a,#6ec8ff,#b98bff) 1; }
.is-wtview .bj-pad, .is-wtview .bj-ab, .is-wtview .bj-hud__menu { display: none !important; }
.bj-bt--view .bj-bt__msg { min-height: 54px; font-size: 14px; }
.bj-wtwait { background: var(--bj-navy2); color: #fff; }
/* 観戦の「配信中」の札（右上・固定）と重ならないように */
.bj-sheet__head { padding-right: 104px; }
.bj-hud { right: 104px; }
@media (min-width: 700px) { .bj-sheet__head { padding-right: 14px; } .bj-hud { right: 10px; } }

/* 届いたバッジの絵（10/5） */
.bj-showimg { position: absolute; left: 50%; top: 18%; width: min(46vw, 220px); transform: translateX(-50%); z-index: 35; pointer-events: none; animation: bjIn .4s ease-out; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.bj-showimg img { width: 100%; display: block; }
.bj-bag { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1024 / 560; margin: 0 auto 10px; overflow: hidden; }
.bj-bag > img { position: absolute; left: 0; top: 0; width: 100%; }
.bj-bag__b { position: absolute; width: 12.5%; }
.bj-bag__b .bj-badge { width: 100%; }
.bj-dexhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bj-dexhead img { width: 64px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.bj-dexhead .bj-dex__sum { margin: 0; } .bj-dexhead small { font-size: 11px; color: #6a7080; font-weight: 700; }
.bj-pg { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1024 / 1536; margin: 0 auto; background: center / 100% 100% no-repeat; }
.bj-pg__s { position: absolute; width: 21.9%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.bj-pg__s .bj-badge { width: 100%; }
.bj-pg__n { position: absolute; width: 18.75%; height: 2.6%; display: flex; align-items: center; justify-content: center; font-size: clamp(9px, 2.6vw, 12px); font-weight: 800; color: #4a3410; white-space: nowrap; overflow: hidden; pointer-events: none; }
.bj-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-weight: 800; color: var(--bj-navy); }
.bj-pager button { padding: 8px 14px; border: 3px solid var(--bj-navy); border-radius: 10px; background: #fff; color: var(--bj-navy); font: 800 14px/1 var(--bj-font); }
.bj-pager button[disabled] { opacity: .35; }
.bj-sfx { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 400% 200%; background-position: 0 0; z-index: 3; }
.bj-bt__badge, .bj-evo__art { position: relative; }
.bj-bt__badge { position: absolute; }
@media (max-height: 700px) {
	.bj-end--tw { gap: 8px; padding-top: 14px; }
	.bj-end--tw h2 { font-size: 20px; margin: 0; }
	.bj-end--tw p { font-size: 13px; line-height: 1.5; }
	.bj-twteam { max-width: 300px; } .bj-twteam b { font-size: 11px; }
	.bj-twfloors > div { padding: 2px 8px; font-size: 12px; } .bj-twfloors span img { width: 24px; height: 24px; }
}

/* ---------- 10/5 出会いの演出（野生: 画面が2回光る→白紙のバッジが回りながら現れ、光って割れ、中から精霊が出る／トレーナー: 「！」→紋章の帯が走り、紋が押される）。タップで飛ばせる ---------- */
.bj-enc { position: absolute; inset: 0; z-index: 70; overflow: hidden; pointer-events: auto; --tc: #ffe58a; }
.bj-enc.is-white { background: #fff; }
.bj-enc.is-white > * { visibility: hidden; }
.bj-enc.is-out { background: #fff; opacity: 0; transition: opacity .38s ease-out; pointer-events: none; }
.bj-enc__dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(20,30,60,.35), rgba(6,10,24,.92)); opacity: 0; animation: bjEncDim .35s .22s forwards; }
.bj-enc__flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: bjEncFlash .32s linear; }
.bj-enc__ring { position: absolute; left: 50%; top: 46%; width: 70vmin; max-width: 360px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); border: 3px solid var(--tc); box-shadow: 0 0 24px var(--tc), inset 0 0 24px var(--tc); opacity: 0; animation: bjEncRing .55s .3s ease-out forwards; }
.bj-enc__badge { position: absolute; left: 50%; top: 46%; width: 34vmin; max-width: 170px; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.15) rotate(-220deg); opacity: 0; animation: bjEncBadge .62s .24s cubic-bezier(.2, .9, .3, 1.2) forwards, bjEncShake .16s .7s 2 linear; }
.bj-enc__badge img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px var(--tc)) drop-shadow(0 0 22px var(--tc)); animation: bjEncGlow .3s .62s forwards; }
.bj-enc__shards i { position: absolute; left: 50%; top: 46%; width: 17vmin; max-width: 85px; aspect-ratio: 1; margin: -8.5vmin 0 0 -8.5vmin; background: center / 200% 200% no-repeat; opacity: 0; clip-path: polygon(50% 50%, 0 0, 100% 0); filter: brightness(1.6) drop-shadow(0 0 6px var(--tc)); animation: bjEncShard .38s .86s ease-out forwards; }
.bj-enc__burst { position: absolute; left: 50%; top: 46%; width: 30vmin; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, #fff 0 45%, var(--tc) 62%, rgba(255,255,255,0) 72%); animation: bjEncBurst .3s .86s ease-in forwards; }
@keyframes bjEncDim { to { opacity: 1; } }
@keyframes bjEncFlash { 0% { opacity: 0; } 18% { opacity: .95; } 38% { opacity: 0; } 62% { opacity: .9; } 100% { opacity: 0; } }
@keyframes bjEncRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes bjEncBadge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-220deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes bjEncShake { 25% { margin-left: -5px; } 75% { margin-left: 5px; } }
@keyframes bjEncGlow { to { filter: brightness(2.4) drop-shadow(0 0 14px var(--tc)) drop-shadow(0 0 40px #fff); } }
@keyframes bjEncShard { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-46vmin) scale(.6) rotate(90deg); } }
@keyframes bjEncBurst { 0% { transform: translate(-50%, -50%) scale(0); } 100% { transform: translate(-50%, -50%) scale(9); } }
/* トレーナー: 紺と金の帯が左右から交互に走る → 紋が押される → 光る */
.bj-enc--tr .bj-enc__bands { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); }
.bj-enc--tr .bj-enc__bands i { display: block; background: linear-gradient(90deg, #1d3a5c, #24507e 70%, #f2b632 70% 73%, #1d3a5c 73%); transform: translateX(-105%); animation: bjEncBandL .42s cubic-bezier(.6, 0, .3, 1) forwards; }
.bj-enc--tr .bj-enc__bands i:nth-child(even) { background: linear-gradient(270deg, #1d3a5c, #24507e 70%, #f2b632 70% 73%, #1d3a5c 73%); transform: translateX(105%); animation-name: bjEncBandR; }
.bj-enc--tr .bj-enc__bands i:nth-child(2) { animation-delay: .04s; } .bj-enc--tr .bj-enc__bands i:nth-child(3) { animation-delay: .08s; } .bj-enc--tr .bj-enc__bands i:nth-child(4) { animation-delay: .12s; } .bj-enc--tr .bj-enc__bands i:nth-child(5) { animation-delay: .16s; } .bj-enc--tr .bj-enc__bands i:nth-child(6) { animation-delay: .2s; }
.bj-enc--evil .bj-enc__bands i { background: linear-gradient(90deg, #2a1418, #4a1e24 70%, #c94f45 70% 73%, #2a1418 73%); }
.bj-enc--evil .bj-enc__bands i:nth-child(even) { background: linear-gradient(270deg, #2a1418, #4a1e24 70%, #c94f45 70% 73%, #2a1418 73%); }
.bj-enc--tr .bj-enc__flash { animation: none; }
.bj-enc--tr .bj-enc__emb { position: absolute; left: 50%; top: 44%; width: 38vmin; max-width: 190px; aspect-ratio: 1; transform: translate(-50%, -50%) scale(2.6); opacity: 0; animation: bjEncStamp .26s .56s cubic-bezier(.5, 0, .7, 1.4) forwards; }
.bj-enc--tr .bj-enc__emb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(255,230,150,.7)); }
.bj-enc--tr .bj-enc__name { position: absolute; left: 0; right: 0; top: calc(44% + min(21vmin, 105px)); text-align: center; font: 800 clamp(15px, 4.6vw, 22px)/1.3 'M PLUS Rounded 1c', sans-serif; color: #fff; text-shadow: 0 2px 0 #0b1626, 0 0 10px rgba(0,0,0,.6); opacity: 0; animation: bjEncName .25s .7s forwards; padding: 0 16px; }
.bj-enc--tr .bj-enc__burst { animation-delay: 1s; }
@keyframes bjEncBandL { to { transform: translateX(0); } }
@keyframes bjEncBandR { to { transform: translateX(0); } }
@keyframes bjEncStamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bjEncName { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bj-enc__skip { position: absolute; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); font: 700 11px/1 'M PLUS Rounded 1c', sans-serif; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* 戦闘の始まり: 精霊がバッジの光から形になる */
.bj-bt__foe.is-emerge { animation: bjEmerge .6s ease-out; }
.bj-bt__foe.is-emerge::after { content: ''; position: absolute; left: 50%; top: 55%; width: 90%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(circle, rgba(255,255,255,.95) 0 30%, var(--tc, #ffe58a) 50%, rgba(255,255,255,0) 70%); animation: bjEmergeLight .6s ease-out forwards; pointer-events: none; }
@keyframes bjEmerge { 0% { transform: scale(.06); filter: brightness(6); opacity: .9; } 55% { transform: scale(1.14); filter: brightness(2.2); opacity: 1; } 100% { transform: scale(1); filter: none; } }
@keyframes bjEmergeLight { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .bj-enc *, .bj-bt__foe.is-emerge, .bj-bt__foe.is-emerge::after { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* 10/5: 会話の窓が出ている間は十字キーとA・Bを隠す（窓の上に▲とAがはみ出して見えていた。窓はタップで進む） */
.bj-pad, .bj-ab { transition: opacity .15s; }
.bj-ui:has(> .bj-talk) .bj-pad, .bj-ui:has(> .bj-talk) .bj-ab { opacity: 0; pointer-events: none; }