/* MBTIブロックブラスト（仮名・2026-10-01・スラッグ blockpz）— 全画面のひとり用ブロックパズル。接頭辞 bkp-
   画面の重ね（タイトル・結果・ランキングなど）は MBTIスイカゲーム（css/gyuzoo.css）と同じ作り */
html, body.bkpb { margin: 0; height: 100%; overflow: hidden; background: #f7e2b0; overscroll-behavior: none; }
body.bkpb { font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif; color: #5a3b1c; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bkp, .bkp * { box-sizing: border-box; }
.bkp { position: fixed; inset: 0; display: flex; justify-content: center; align-items: stretch; background: radial-gradient(circle at 20% 10%, #fff6d8 0, transparent 40%), repeating-linear-gradient(45deg, #f7e2b0 0 18px, #f3dba2 18px 36px); }
.bkp button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
.bkp-boot { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.bkp-boot b { font-size: 28px; font-weight: 900; color: #e0662a; text-shadow: 0 3px 0 #fff; }
.bkp-boot span { font-size: 14px; color: #8a6a3a; line-height: 1.8; }

/* ---- 本体 ---- */
.bkp-app { position: relative; width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
@media (min-width: 600px) { .bkp-app { box-shadow: 0 0 0 4px #fff, 0 12px 40px rgba(120, 70, 20, .25); } }
/* 背景（きせかえ）。絵（images/blockpz/bg-*.webp）があれば --bkp-art で重ねる */
.bkp-app { background: radial-gradient(circle at 15% 8%, rgba(255, 255, 255, .5) 0, transparent 35%), repeating-linear-gradient(92deg, rgba(150, 90, 40, .05) 0 3px, transparent 3px 22px), linear-gradient(180deg, #f6d9a4 0%, #ecc283 100%); }
.bkp-app[data-bg="sky"] { background: radial-gradient(60px 26px at 12% 10%, #fff 60%, transparent 62%), radial-gradient(70px 30px at 86% 18%, #fff 60%, transparent 62%), radial-gradient(54px 22px at 20% 94%, #fff 60%, transparent 62%), linear-gradient(180deg, #bfe6ff 0%, #e8f5ff 50%, #ffe1ee 100%); }
.bkp-app[data-bg="candy"] { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .35) 0 25%, transparent 0 50%) 0 0 / 44px 44px, linear-gradient(180deg, #ffe9f1 0%, #fff6ea 55%, #ffd9e6 100%); }
.bkp-app[data-bg="night"] { background: radial-gradient(1.5px 1.5px at 20% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 22%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 45% 6%, #fff7c2 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 8% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 92% 86%, #fff 50%, transparent 51%), linear-gradient(180deg, #1c2458 0%, #34397a 55%, #4f4590 100%); }
.bkp-app.has-art { background: var(--bkp-art) center / cover no-repeat; }
.bkp-app[data-bg="night"] .bkp-goal { color: #6a4520; }

/* 上の帯: 一時停止・点・遊び方の札 */
.bkp-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 2px; min-height: 62px; }
.bkp-ib { flex: none; width: 44px; height: 44px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 3px 0 #e2b866, 0 4px 10px rgba(120, 70, 20, .15); display: flex; align-items: center; justify-content: center; color: #b0621e; font-size: 18px; font-weight: 900; }
.bkp-ib:active { transform: translateY(2px); box-shadow: 0 1px 0 #e2b866; }
.bkp-ib svg { width: 20px; height: 20px; }
.bkp-sc { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bkp-sc b { font-size: 32px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px #b0621e; paint-order: stroke fill; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.bkp-sc small { margin-top: 3px; font-size: 11px; font-weight: 800; color: #8a5a22; background: rgba(255, 255, 255, .85); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.bkp-sc.is-pop b { animation: bkpPop .28s ease-out; }
@keyframes bkpPop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bkp-mode { flex: none; width: 52px; min-height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 #e2b866; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 900; color: #b0621e; line-height: 1.2; text-align: center; padding: 2px; }
.bkp-mode b { font-size: 14px; color: #e0662a; }
/* コンボの札（点の下・消さない手があと何回で切れるかの点つき） */
.bkp-combo { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 3; display: none; align-items: center; gap: 6px; background: linear-gradient(90deg, #ff6a8a, #ff9a3c); color: #fff; font-size: 12.5px; font-weight: 900; border-radius: 99px; padding: 3px 10px; box-shadow: 0 3px 8px rgba(200, 60, 40, .3); pointer-events: none; white-space: nowrap; }
.bkp-combo.is-on { display: flex; animation: bkpPop .3s ease-out; }
.bkp-combo i { display: inline-flex; gap: 3px; }
.bkp-combo i u { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.bkp-combo i u.is-off { background: rgba(255, 255, 255, .35); }
/* ステージの目標 */
.bkp-goal { flex: none; display: none; align-items: center; gap: 8px; margin: 2px 12px 0; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 #e2b866; font-size: 12.5px; font-weight: 900; color: #8a5a22; }
.bkp-app.is-stage .bkp-goal { display: flex; }
.bkp-goal .bkp-bar { flex: 1; min-width: 40px; }
.bkp-goal em { font-style: normal; white-space: nowrap; }
.bkp-goal strong { white-space: nowrap; color: #e0662a; }
.bkp-goal strong.is-low { color: #e0313f; animation: bkpPulse .8s ease-in-out infinite; }

/* 盤面（canvas 1枚に 盤・下の3つ・持っている形・演出を描く） */
.bkp-stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
.bkp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bkp-stage.bkp-shake canvas { animation: bkpShake .35s ease-out; }
@keyframes bkpShake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }

/* 大きい文字の知らせ（コンボ・全消し・クリア） */
.bkp-toast { position: absolute; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; text-align: center; white-space: nowrap; }
.bkp-toast img { position: absolute; left: 50%; top: 50%; width: 320px; max-width: 90vw; z-index: -1; animation: bkpFx 1.3s ease-out forwards; }
.bkp-toast b { display: block; font-size: 38px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px #e0662a; paint-order: stroke fill; animation: bkpT 1.2s ease-out forwards; }
.bkp-toast small { display: block; font-size: 16px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px #b0621e; paint-order: stroke fill; animation: bkpT 1.2s ease-out forwards; }
.bkp-toast.is-c2 b { -webkit-text-stroke-color: #ff7a2a; }
.bkp-toast.is-c3 b { -webkit-text-stroke-color: #ff3d6e; font-size: 42px; }
.bkp-toast.is-c4 b { -webkit-text-stroke-color: #9a3dff; font-size: 46px; color: #fff6a8; }
.bkp-toast.is-all b { font-size: 50px; -webkit-text-stroke: 9px #ff3d6e; color: #fff6a8; animation-duration: 1.8s; }
.bkp-toast.is-all small { font-size: 20px; animation-duration: 1.8s; }
.bkp-toast.is-all img { animation-duration: 1.9s; }
.bkp-toast.is-warn b { font-size: 22px; -webkit-text-stroke: 6px #e0313f; }
@keyframes bkpT { 0% { transform: scale(.3); opacity: 0; } 16% { transform: scale(1.18); opacity: 1; } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes bkpFx { 0% { transform: translate(-50%, -50%) scale(.3) rotate(-20deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.05) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
.bkp-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #8a5a22; font-size: 15px; z-index: 4; pointer-events: none; }

/* ---- 画面（タイトル・一時停止・結果・図鑑など）: 上から重ねる1枚 ---- */
.bkp-scr { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); animation: bkpIn .22s ease-out; }
.bkp-scr[hidden] { display: none; }
@keyframes bkpIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.bkp-scr.is-dim { background: rgba(60, 35, 10, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bkp-scr.is-paper { background: #fff8e6; }
.bkp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bkp-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.bkp-hd { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.bkp-hd h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 900; color: #b0621e; text-align: center; }
.bkp-hd .bkp-ib { width: 40px; height: 40px; }
.bkp-hd .bkp-sp { width: 40px; flex: none; }

.bkp-b { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 0; border-radius: 18px; font-size: 17px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff9a4a, #f0702a); box-shadow: 0 5px 0 #c4541a, 0 8px 16px rgba(196, 84, 26, .3); text-decoration: none; letter-spacing: .5px; }
.bkp-b:active { transform: translateY(3px); box-shadow: 0 2px 0 #c4541a; }
.bkp-b--sub { color: #b0621e; background: #fff; box-shadow: 0 5px 0 #e2b866, 0 8px 16px rgba(120, 70, 20, .12); }
.bkp-b--sub:active { box-shadow: 0 2px 0 #e2b866; }
.bkp-b--x { background: linear-gradient(180deg, #333, #111); box-shadow: 0 5px 0 #000; }
.bkp-b--green { background: linear-gradient(180deg, #6ad07a, #3fae55); box-shadow: 0 5px 0 #2f8a41; }
.bkp-b[disabled] { opacity: .5; filter: grayscale(.5); }
.bkp-b small { font-size: 12px; font-weight: 800; opacity: .9; }
.bkp-row { display: flex; gap: 8px; }
.bkp-row > * { flex: 1; }

/* タイトル */
.bkp-title { background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #c9ecff 0%, #fff4d6 52%, #ffe6a6 100%); }
.bkp-app.is-title .bkp-top, .bkp-app.is-title .bkp-evo { visibility: hidden; }
.bkp-tt-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bkp-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #b0621e; font-size: 12.5px; font-weight: 900; text-decoration: none; box-shadow: 0 2px 0 #e2b866; }
.bkp-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 4px; border-radius: 99px; background: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 900; color: #8a5a22; max-width: 60%; box-shadow: 0 2px 0 #e2b866; }
.bkp-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff3cf; }
.bkp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkp-chip em { font-style: normal; color: #e0662a; white-space: nowrap; }
.bkp-logo { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0; }
.bkp-logo h1 { margin: 0; line-height: .95; text-align: center; font-weight: 900; color: #fff; -webkit-text-stroke: 9px #e0662a; paint-order: stroke fill; text-shadow: 0 6px 0 #c4541a; transform: rotate(-3deg); }
.bkp-logo h1 span { display: block; font-size: clamp(34px, 11vw, 50px); letter-spacing: 1px; }
.bkp-logo h1 span + span { font-size: clamp(36px, 12vw, 56px); color: #ffe066; -webkit-text-stroke-color: #b0621e; letter-spacing: 1px; white-space: nowrap; }
.bkp-logo img.bkp-logo-art { max-width: 88%; max-height: 32vh; }
.bkp-logo p { margin: 8px 0 0; font-size: 13px; font-weight: 900; color: #8a5a22; background: rgba(255, 255, 255, .85); border-radius: 99px; padding: 4px 14px; }
.bkp-parade { display: flex; align-items: flex-end; justify-content: center; margin-top: 10px; min-height: 58px; }
.bkp-parade img { border-radius: 50%; margin: 0 -4px; animation: bkpHop 1.6s ease-in-out infinite; box-shadow: 0 3px 6px rgba(120, 70, 20, .2); }
@keyframes bkpHop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px); } 50% { transform: translateY(0); } }
.bkp-menu { flex: none; display: flex; flex-direction: column; gap: 10px; }
.bkp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bkp-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 0 #e2b866; color: #b0621e; font-size: 12px; font-weight: 900; }
.bkp-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 #e2b866; }
.bkp-tile i { font-style: normal; font-size: 22px; line-height: 1; }
.bkp-tile .bkp-dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #ff4f6d; box-shadow: 0 0 0 2px #fff; }
.bkp-qbar { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .92); border-radius: 14px; padding: 8px 12px; font-size: 12.5px; font-weight: 800; color: #8a5a22; box-shadow: 0 3px 0 #e2b866; border: 0; width: 100%; text-align: left; }
.bkp-qbar b { color: #e0662a; }
/* SGC1002 ガチャの入口（お題のバーの横）とレアの印 */
.bkp-qrow { display: flex; gap: 8px; }
.bkp-qrow .bkp-qbar { flex: 1; min-width: 0; }
.bkp-gcpill { position: relative; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #ff8ac0, #ffb84d); color: #fff; font-size: 13.5px; font-weight: 900; box-shadow: 0 3px 0 #d9608a; text-shadow: 0 1px 0 rgba(160, 50, 90, .35); }
.bkp-gcpill:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9608a; }
.bkp-gcpill i { font-style: normal; font-size: 17px; line-height: 1; }
.bkp-gcpill .bkp-dot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #ff4f6d; box-shadow: 0 0 0 2px #fff; }
.bkp-gcpill .bkp-dot[hidden] { display: none; }
.bkp-gcbar { background: linear-gradient(90deg, #fff4fa, #fff8e6); box-shadow: 0 3px 0 #f0a8c8; }
.bkp-gcbar b { color: #d0408a; }
.bkp-gtag { display: inline-block; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 10px; line-height: 1.5; color: #fff; background: #b3a08a; vertical-align: 1px; }
.bkp-gtag--r { background: linear-gradient(90deg, #4aa8ff, #8f6bff); }
.bkp-gtag--sr { background: linear-gradient(90deg, #b46bff, #ff5fb2); }
.bkp-gtag--ur { background: linear-gradient(90deg, #ff7a7a, #ffd36e, #7ee08a, #6ec8ff, #b98bff); color: #4a2a10; }
.bkp-qbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 一時停止・設定 */
.bkp-panel { margin: auto; width: 100%; max-width: 360px; background: #fff8e6; border-radius: 26px; padding: 18px 16px 16px; box-shadow: 0 0 0 5px #fff, 0 16px 40px rgba(60, 35, 10, .35); display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow-y: auto; }
.bkp-panel h2 { margin: 0 0 4px; text-align: center; font-size: 22px; font-weight: 900; color: #b0621e; }
.bkp-set { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: #8a5a22; min-height: 44px; }
.bkp-set label { flex: none; width: 5.5em; }
.bkp-set input[type=range] { flex: 1; min-width: 0; accent-color: #f0702a; height: 28px; }
.bkp-sw { flex: none; margin-left: auto; width: 56px; height: 32px; border-radius: 99px; border: 0; background: #e8d6b0; position: relative; }
.bkp-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: left .15s; }
.bkp-sw.is-on { background: #f0702a; }
.bkp-sw.is-on::after { left: 27px; }
.bkp-note { font-size: 11.5px; color: #9a7a4a; line-height: 1.7; margin: 0; }

/* 遊び方 */
.bkp-how { display: flex; flex-direction: column; gap: 10px; }
.bkp-how li { list-style: none; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 10px 12px; font-size: 13.5px; font-weight: 800; line-height: 1.6; color: #6a4520; box-shadow: 0 3px 0 #f0d9a8; }
.bkp-how ol { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bkp-how li b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f0702a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.bkp-how .bkp-pair { display: flex; align-items: center; gap: 2px; flex: none; }
.bkp-how .bkp-pair img { width: 30px; height: 30px; border-radius: 50%; }

/* チュートリアル（最初の1回。盤面の上に重ねる吹き出し） */
.bkp-tut { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.bkp-tut-box { position: absolute; left: 12px; right: 12px; top: 74px; margin: 0 auto; max-width: 380px; background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: 0 0 0 4px #ffd36a, 0 10px 24px rgba(120, 70, 20, .25); pointer-events: auto; display: flex; flex-direction: column; gap: 8px; animation: bkpIn .25s ease-out; }
.bkp-tut-box p { margin: 0; font-size: 14.5px; font-weight: 900; line-height: 1.6; color: #6a4520; }
.bkp-tut-box p small { display: block; font-size: 12px; font-weight: 800; color: #9a7a4a; }
.bkp-tut-box .bkp-row .bkp-b { min-height: 42px; font-size: 14.5px; }
.bkp-tut-step { font-size: 11px; font-weight: 900; color: #e0662a; letter-spacing: 1px; }
.bkp-hand { position: absolute; width: 46px; height: 46px; font-size: 40px; line-height: 1; pointer-events: none; animation: bkpHand 2.2s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
@keyframes bkpHand { 0% { transform: translateX(-60px); } 45% { transform: translateX(60px); } 60% { transform: translateX(60px) scale(.85); } 75%, 100% { transform: translateX(60px); } }

/* 結果 */
.bkp-res { background: radial-gradient(circle at 50% 20%, rgba(255, 244, 200, .97), rgba(255, 232, 170, .97)); }
.bkp-over { position: absolute; left: 0; right: 0; top: 38%; text-align: center; z-index: 12; pointer-events: none; }
.bkp-over b { display: inline-block; font-size: 44px; font-weight: 900; color: #fff; -webkit-text-stroke: 9px #d6452f; paint-order: stroke fill; animation: bkpOv .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bkpOv { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: scale(1) rotate(-4deg); } }
.bkp-rs-h { text-align: center; margin: 4px 0 6px; }
.bkp-rs-h small { display: block; font-size: 13px; font-weight: 900; color: #b0621e; }
.bkp-rs-h b { display: block; font-size: 54px; font-weight: 900; line-height: 1.05; color: #fff; -webkit-text-stroke: 9px #e0662a; paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.bkp-rs-h em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(90deg, #ff5a7a, #ff9a4a); border-radius: 99px; padding: 3px 12px; animation: bkpPulse 1s ease-in-out infinite; }
@keyframes bkpPulse { 50% { transform: scale(1.08); } }
.bkp-rs-best { font-size: 12.5px; font-weight: 800; color: #8a5a22; text-align: center; }
.bkp-card { background: #fff; border-radius: 18px; padding: 12px; margin: 0 0 10px; box-shadow: 0 3px 0 #f0d9a8; }
.bkp-card h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 900; color: #b0621e; display: flex; align-items: center; gap: 6px; }
.bkp-card h3 small { margin-left: auto; font-size: 11.5px; color: #a58a5a; }
.bkp-top1 { display: flex; align-items: center; gap: 12px; }
.bkp-top1 img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.bkp-top1 p { margin: 0; font-size: 12.5px; font-weight: 800; color: #8a5a22; line-height: 1.6; }
.bkp-top1 p b { display: block; font-size: 18px; color: #6a4520; }
.bkp-zrow { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.bkp-zrow img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.bkp-zrow img.is-no { filter: brightness(0) opacity(.2); }
.bkp-zrow img.is-new { box-shadow: 0 0 0 3px #ff5a7a; animation: bkpPulse .9s ease-in-out infinite; }
.bkp-join { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, #fff1d6, #ffe0ec); border-radius: 18px; padding: 12px; margin: 0 0 10px; font-size: 12.5px; font-weight: 800; color: #8a4a5a; line-height: 1.6; }
.bkp-join .bkp-b { min-height: 44px; font-size: 14.5px; }

/* お題 */
.bkp-q { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed #f0d9a8; }
.bkp-q:first-child { border-top: 0; }
.bkp-q-b { flex: 1; min-width: 0; }
.bkp-q-b p { margin: 0 0 5px; font-size: 13.5px; font-weight: 900; color: #6a4520; line-height: 1.45; }
.bkp-bar { height: 9px; border-radius: 99px; background: #f3e4c4; overflow: hidden; }
.bkp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb13a, #f0702a); }
.bkp-q-b small { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #a58a5a; }
.bkp-q-r { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 76px; }
.bkp-q-r em { font-style: normal; font-size: 12px; font-weight: 900; color: #c85a1a; }
.bkp-q-r button { width: 100%; min-height: 38px; border-radius: 12px; border: 0; font-size: 13px; font-weight: 900; color: #fff; background: #f0702a; box-shadow: 0 3px 0 #c4541a; }
.bkp-q-r button[disabled] { background: #e3d3b4; box-shadow: none; color: #fff; }
.bkp-q-r button.is-got { background: #6ad07a; box-shadow: none; }

/* 図鑑 */
.bkp-zk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bkp-zc { background: #fff; border-radius: 16px; padding: 8px 4px; text-align: center; box-shadow: 0 3px 0 #f0d9a8; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bkp-zc img { width: 58px; height: 58px; border-radius: 50%; }
.bkp-zc b { font-size: 11.5px; font-weight: 900; color: #6a4520; line-height: 1.3; }
.bkp-zc small { font-size: 10px; font-weight: 800; color: #a58a5a; }
.bkp-zc.is-no img { filter: brightness(0) opacity(.2); }
.bkp-zc.is-no b { color: #c8b48a; }
.bkp-zc.is-top { grid-column: span 3; flex-direction: row; justify-content: center; gap: 12px; background: linear-gradient(135deg, #fff5c8, #ffe28a); }
.bkp-zc.is-top img { width: 72px; height: 72px; }
.bkp-stat { display: flex; gap: 8px; margin: 0 0 10px; }
.bkp-stat div { flex: 1; background: #fff; border-radius: 14px; padding: 8px; text-align: center; box-shadow: 0 3px 0 #f0d9a8; }
.bkp-stat small { display: block; font-size: 10.5px; font-weight: 800; color: #a58a5a; }
.bkp-stat b { font-size: 18px; font-weight: 900; color: #e0662a; }

/* ランキング */
.bkp-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f3e4c4; border-radius: 14px; padding: 4px; margin: 0 0 10px; }
.bkp-tabs button { border: 0; background: none; border-radius: 11px; min-height: 38px; font-size: 13px; font-weight: 900; color: #a0703a; }
.bkp-tabs button.is-on { background: #fff; color: #e0662a; box-shadow: 0 2px 5px rgba(120, 70, 20, .12); }
.bkp-rk { list-style: none; margin: 0; padding: 0; }
.bkp-rk li { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-top: 1px dashed #f0d9a8; min-height: 52px; }
.bkp-rk li:first-child { border-top: 0; }
.bkp-rk li.is-me { background: #fff1c8; border-radius: 12px; }
.bkp-rk li > b { flex: none; width: 28px; text-align: center; font-size: 16px; font-weight: 900; color: #c85a1a; }
.bkp-rk li.is-1 > b, .bkp-rk li.is-2 > b, .bkp-rk li.is-3 > b { font-size: 0; }
.bkp-rk li.is-1 > b::after { content: "1"; font-size: 15px; color: #fff; background: #f2b31c; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.bkp-rk li.is-2 > b::after { content: "2"; font-size: 15px; color: #fff; background: #a8b4c0; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.bkp-rk li.is-3 > b::after { content: "3"; font-size: 15px; color: #fff; background: #d08a4a; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.bkp-rk .bkp-av { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff3cf; }
.bkp-rk span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 900; color: #6a4520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkp-rk em { flex: none; font-style: normal; font-size: 15px; font-weight: 900; color: #e0662a; font-variant-numeric: tabular-nums; }
.bkp-rk .bkp-lv { flex: none; width: 24px; height: 24px; border-radius: 50%; }
.bkp-rk-me { flex: none; margin-top: 8px; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; font-weight: 900; color: #8a5a22; text-align: center; box-shadow: 0 3px 0 #f0d9a8; }
.bkp-empty { text-align: center; color: #a58a5a; font-size: 13px; font-weight: 800; padding: 26px 0; line-height: 1.8; }

/* きせかえ */
.bkp-sk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bkp-skc { position: relative; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 3px 0 #f0d9a8; display: flex; flex-direction: column; gap: 6px; border: 3px solid transparent; }
.bkp-skc.is-on { border-color: #f0702a; }
.bkp-skc canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; display: block; }
.bkp-skc b { font-size: 12.5px; font-weight: 900; color: #6a4520; }
.bkp-skc button { min-height: 36px; border-radius: 11px; border: 0; font-size: 12.5px; font-weight: 900; color: #fff; background: #f0702a; box-shadow: 0 3px 0 #c4541a; }
.bkp-skc button.is-eq { background: #fff; color: #b0621e; box-shadow: 0 0 0 2px #f0d9a8 inset; }
.bkp-skc button[disabled] { background: #e3d3b4; box-shadow: none; }
.bkp-sec { font-size: 14px; font-weight: 900; color: #b0621e; margin: 12px 0 8px; }
.bkp-sec:first-child { margin-top: 0; }
.bkp-bal { flex: none; text-align: center; font-size: 13px; font-weight: 900; color: #8a5a22; margin: 0 0 8px; }
.bkp-bal b { color: #e0662a; font-size: 16px; }

/* 確認（下からのシート） */
.bkp-sheet { position: absolute; inset: 0; z-index: 40; background: rgba(60, 35, 10, .45); display: flex; align-items: flex-end; justify-content: center; }
.bkp-sheet > div { width: 100%; max-width: 520px; background: #fff8e6; border-radius: 24px 24px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; animation: bkpUp .2s ease-out; }
.bkp-sheet p { margin: 0; text-align: center; font-size: 15px; font-weight: 900; color: #6a4520; line-height: 1.6; }
@keyframes bkpUp { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bkp-msg { position: absolute; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: rgba(60, 35, 10, .9); color: #fff; font-size: 13px; font-weight: 800; border-radius: 99px; padding: 9px 16px; max-width: 90%; text-align: center; pointer-events: none; animation: bkpIn .2s ease-out; }

/* 低い画面（ブラウザの帯込みで 560〜680） */
@media (max-height: 700px) {
	.bkp-top { min-height: 52px; padding-top: 6px; }
	.bkp-ib { width: 40px; height: 40px; }
	.bkp-sc b { font-size: 26px; }
	.bkp-next { width: 52px; height: 52px; }
	.bkp-next canvas { width: 38px; height: 38px; }
	.bkp-evo { min-height: 32px; padding-bottom: 5px; }
	.bkp-evo img { width: 22px; height: 22px; }
	.bkp-parade { min-height: 44px; margin-top: 6px; }
	.bkp-logo p { margin-top: 4px; }
	.bkp-tile { min-height: 50px; }
	.bkp-b { min-height: 48px; }
	.bkp-rs-h b { font-size: 44px; }
}
@media (max-height: 600px) {
	.bkp-parade { display: none; }
	.bkp-logo h1 span { font-size: 34px; }
	.bkp-logo h1 span + span { font-size: 38px; }
	.bkp-tile { min-height: 44px; font-size: 11px; }
	.bkp-tile i { font-size: 18px; }
}
@media (max-width: 360px) {
	.bkp-evo img { width: 22px; height: 22px; }
	.bkp-evo span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bkp-parade img, .bkp-hand, .bkp-rs-h em, .bkp-zrow img.is-new { animation: none; }
}

/* ===== ここから このゲームだけの画面 ===== */
.bkp-app.is-title .bkp-top, .bkp-app.is-title .bkp-goal, .bkp-app.is-title .bkp-combo { visibility: hidden; }
.bkp-title { background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #ffeec2 0%, #fff6dc 50%, #f7d98e 100%); }
.bkp-logo h1 { margin: 0; line-height: .98; text-align: center; font-weight: 900; transform: rotate(-3deg); }
.bkp-logo h1 span { display: block; font-size: clamp(30px, 9vw, 44px); color: #fff; -webkit-text-stroke: 8px #8a6cf0; paint-order: stroke fill; text-shadow: 0 5px 0 #5b43b8; letter-spacing: 2px; }
.bkp-logo h1 .bkp-l2 { font-size: clamp(30px, 9.6vw, 52px); white-space: nowrap; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none; }
.bkp-l2 i { font-style: normal; display: inline-block; -webkit-text-stroke: 7px #5a3b1c; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(90, 59, 28, .55); animation: bkpBob 2.4s ease-in-out infinite; }
.bkp-l2 i:nth-child(2n) { animation-delay: .2s; } .bkp-l2 i:nth-child(3n) { animation-delay: .4s; }
@keyframes bkpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.bkp-logo img.bkp-logo-art { max-width: 92%; max-height: 30vh; }
.bkp-parade span { display: inline-block; margin: 0 1px; animation: bkpHop 1.6s ease-in-out infinite; }
.bkp-parade img, .bkp-parade .bkp-ic { border-radius: 8px; display: block; box-shadow: 0 3px 6px rgba(120, 70, 20, .2); }
.bkp-ic { display: inline-block; border-radius: 6px; }
.bkp-b--purple { background: linear-gradient(180deg, #a48cff, #7b5ce8); box-shadow: 0 5px 0 #5a3fc0, 0 8px 16px rgba(90, 63, 192, .3); }
.bkp-b--purple:active { box-shadow: 0 2px 0 #5a3fc0; }
.bkp-b--green:active { box-shadow: 0 2px 0 #2f8a41; }
.bkp-b--cont { background: linear-gradient(180deg, #ff7aa0, #f0507a); box-shadow: 0 5px 0 #c03058, 0 8px 16px rgba(192, 48, 88, .3); }
.bkp-menu .bkp-row .bkp-b { flex-direction: column; gap: 0; line-height: 1.2; font-size: 16px; }
.bkp-menu .bkp-row .bkp-b small { font-size: 11px; }
.bkp-tabs { grid-template-columns: 1fr 1fr 1fr; }

/* 遊び方の小さい形 */
.bkp-mini { position: relative; display: inline-block; flex: none; }
.bkp-mini i { position: absolute; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .4); }
.bkp-how li > span:nth-child(2) { flex: none; min-width: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.bkp-how .bkp-pair img { border-radius: 6px; }
.bkp-anis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bkp-anis span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bkp-anis img { border-radius: 9px; }
.bkp-anis small { font-size: 10.5px; font-weight: 800; color: #8a5a22; }
.bkp-stat div { min-width: 0; }

/* チュートリアルの指（下の形 → 盤へ） */
.bkp-hand { position: absolute; z-index: 16; width: 40px; height: 40px; font-size: 34px; line-height: 1; pointer-events: none; animation: bkpHand 2s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
@keyframes bkpHand { 0%, 12% { transform: translate(0, 0) scale(1); } 22% { transform: translate(0, 0) scale(.85); } 70% { transform: translate(var(--dx), var(--dy)) scale(.85); } 80%, 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
.bkp-tut-box { top: 8px; }

/* 結果（ステージ） */
.bkp-rs-t { font-size: 46px !important; }
.bkp-res.is-fail .bkp-rs-t { -webkit-text-stroke-color: #8a7a9a !important; }
.bkp-stars { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.bkp-stars i { font-style: normal; font-size: 46px; line-height: 1; color: #e8d9b8; -webkit-text-stroke: 3px #c9b48a; }
.bkp-stars i.is-on { color: #ffd23a; -webkit-text-stroke-color: #c68a00; animation: bkpStar .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.bkp-stars i:nth-child(2) { font-size: 56px; margin-top: -8px; }
@keyframes bkpStar { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }

/* ステージ一覧 */
.bkp-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 6px; padding: 4px 2px 10px; }
.bkp-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 0; color: #fff; }
.bkp-node b { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; background: radial-gradient(circle at 35% 30%, #ffc27a, #f0702a); box-shadow: 0 4px 0 #c4541a, 0 6px 10px rgba(196, 84, 26, .25); }
.bkp-node.is-done b { background: radial-gradient(circle at 35% 30%, #a3e5a9, #3fae55); box-shadow: 0 4px 0 #2f8a41, 0 6px 10px rgba(47, 138, 65, .25); }
.bkp-node.is-lock b { background: #e3d3b4; box-shadow: 0 4px 0 #c9b48a; font-size: 18px; }
.bkp-node:active b { transform: translateY(2px); }
.bkp-node span { display: flex; gap: 0; font-size: 12px; line-height: 1; }
.bkp-node span i { font-style: normal; color: #e3d3b4; }
.bkp-node span i.is-on { color: #ffb800; }
.bkp-node small { position: absolute; top: -4px; right: 2px; font-size: 13px; }
.bkp-st-h { font-size: 17px !important; color: #b0621e !important; }
.bkp-st-pv { width: min(220px, 46vh); height: auto; aspect-ratio: 1; margin: 0 auto; display: block; }
.bkp-st-g { font-size: 15px !important; }
.bkp-st-g small { font-size: 11.5px; color: #9a7a4a; font-weight: 800; }
.bkp-rk-c { flex: none; font-size: 10.5px; font-weight: 900; color: #fff; background: #ff7a9a; border-radius: 99px; padding: 1px 7px; }

@media (max-height: 700px) {
	.bkp-top { min-height: 54px; padding-top: 6px; }
	.bkp-sc b { font-size: 28px; }
	.bkp-mode { min-height: 40px; }
	.bkp-stars i { font-size: 38px; } .bkp-stars i:nth-child(2) { font-size: 46px; }
	.bkp-rs-t { font-size: 38px !important; }
}
@media (max-height: 600px) {
	.bkp-logo h1 span { font-size: 28px; }
	.bkp-logo h1 .bkp-l2 { font-size: 32px; }
	.bkp-logo p { font-size: 11.5px; padding: 3px 10px; margin-top: 4px; }
	.bkp-menu { gap: 7px; }
	.bkp-b { min-height: 44px; font-size: 15.5px; }
	.bkp-qbar { padding: 6px 10px; }
	.bkp-goal { padding: 4px 8px; font-size: 11.5px; }
	.bkp-st-pv { width: min(170px, 34vh); }
	.bkp-map { gap: 8px 4px; }
	.bkp-node b { width: 46px; height: 46px; }
}
.bkp-parade img { margin: 0; animation: none; }
.bkp-demo { width: min(46vw, 21vh); height: auto; aspect-ratio: 1; margin-top: 12px; transform: rotate(4deg); filter: drop-shadow(0 8px 14px rgba(120, 70, 20, .25)); }
.bkp-mode b { font-size: 16px; line-height: 1.1; }
@media (max-height: 700px) { .bkp-demo { display: none; } }
@media (max-height: 700px) {
	.bkp-tut-box { padding: 8px 12px; gap: 5px; }
	.bkp-tut-box p { font-size: 13px; line-height: 1.5; }
	.bkp-tut-box p small { display: none; }
	.bkp-tut-box .bkp-row .bkp-b { min-height: 36px; font-size: 13.5px; }
}