/* メン地下不思議のダンジョン（page-mentika.php）2026-09-30
   スマホ縦・片手。上に状態・真ん中に盤・下に十字と操作（低い画面では盤が縮み、操作は画面内に固定） */
html, body.mkb { margin: 0; padding: 0; height: 100%; background: #0c0716; overscroll-behavior: none; }
body.mkb { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; color: #fff; -webkit-text-size-adjust: 100%; }
.mk, .mk * { box-sizing: border-box; }
.mk { position: fixed; inset: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
	--pb: clamp(40px, min(13.5vw, 8.6vh), 64px); }
@supports (height: 1svh) { .mk { --pb: clamp(40px, min(13.5vw, 8.6svh), 64px); } }
.mk button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk a { color: #ffb3dc; }
.mk-boot { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.mk-boot b { font-size: 22px; letter-spacing: .04em; color: #ffd34d; }
.mk-boot span { color: #cbb8ff; font-size: 14px; }

/* ---------- ゲーム画面 ---------- */
.mk-game { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mk-game[hidden] { display: none; }
.mk-hud { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px 10px; background: linear-gradient(#22143a, #160c26); border-bottom: 1px solid rgba(255,255,255,.08); }
.mk-hud__fl { display: flex; flex-direction: column; line-height: 1.05; min-width: 52px; }
.mk-hud__fl b { font-size: 21px; font-weight: 900; color: #ffd34d; text-shadow: 0 0 10px rgba(255,211,77,.45); }
.mk-hud__fl small { font-size: 9.5px; color: #cbb8ff; white-space: nowrap; max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
.mk-hud__st { flex: 1 1 auto; min-width: 0; }
.mk-hud__row { display: flex; gap: 8px; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; align-items: baseline; margin-bottom: 3px; }
.mk-hud__lv { color: #9fd3ff; }
.mk-hud__hpn { color: #fff; }
.mk-hud__bat { color: #b8f58a; }
.mk-hud__bat.is-low { color: #ff6b81; animation: mkBlink 1s infinite; }
.mk-hud__g { color: #ffd34d; margin-left: auto; }
.mk-hpbar { height: 8px; border-radius: 5px; background: #2d2144; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.mk-hpbar i { display: block; height: 100%; width: 100%; border-radius: 5px; background: linear-gradient(90deg, #36d27a, #9bffb9); transition: width .25s; }
.mk-hpbar i.is-yel { background: linear-gradient(90deg, #f2b21c, #ffe066); }
.mk-hpbar i.is-red { background: linear-gradient(90deg, #e8243f, #ff7a8c); }
.mk-hud__menu { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #2b1c46; font-size: 22px; font-weight: 900; line-height: 1; }

.mk-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0c0716; }
.mk-cv { position: absolute; inset: 0; display: block; }
.mk-mini { position: absolute; top: 6px; right: 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.mk-status { position: absolute; top: 6px; left: 6px; right: 150px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.mk-status span { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: rgba(20,10,35,.72); border: 1px solid rgba(255,255,255,.14); }
/* VW1002 ログ欄: 濃い背景で床と重ならない・最新の文は切らない（古い文はタップで記録） */
.mk-log { position: absolute; left: 6px; right: 6px; bottom: 6px; background: rgba(9,4,18,.96); border: 1px solid rgba(255,190,240,.28); border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.5; min-height: 2.2em; max-height: none; overflow: visible; cursor: pointer; box-shadow: 0 -2px 14px rgba(0,0,0,.55); }
.mk-log p { margin: 0; color: #fff; }
.mk-log p + p { margin-top: 2px; }
.mk-log p.is-old { color: #a898cc; }
.mk-log.is-more::before { content: '▲記録'; position: absolute; top: -9px; right: 10px; padding: 0 6px; border-radius: 6px; font-size: 9.5px; font-weight: 800; line-height: 1.6; color: #2a1440; background: #ffd34d; }
.mk-nt.is-bn { background: linear-gradient(90deg, #ff9a2e, #ff5fb2); color: #fff; }
.mk-log.is-new { animation: mkLogIn .25s ease-out; }
.mk-quick { position: absolute; right: 8px; bottom: calc(5em + 6px); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mk-qbtn { border: 0; border-radius: 99px; padding: 9px 16px; font-weight: 900; font-size: 14px; background: #ff5fb2; color: #fff; box-shadow: 0 4px 0 #a3226c, 0 0 18px rgba(255,95,178,.45); }
.mk-qbtn--stairs { background: #ffd34d; color: #3a2400; box-shadow: 0 4px 0 #b58a00, 0 0 22px rgba(255,211,77,.6); animation: mkPulse 1.2s infinite; font-size: 16px; }
.mk-qbtn--send { background: #8f6bff; box-shadow: 0 4px 0 #4f32b8; }
.mk-qbtn--sub { background: #3b2a5e; box-shadow: 0 3px 0 #1c1233; font-size: 12.5px; padding: 7px 12px; }

.mk-ctl { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(#170d28, #0f0819); border-top: 1px solid rgba(255,255,255,.08); }
.mk.is-left .mk-ctl { flex-direction: row-reverse; }
.mk-pad { display: grid; grid-template-columns: repeat(3, var(--pb)); grid-template-rows: repeat(3, var(--pb)); gap: 5px; flex: 0 0 auto; touch-action: none; }
.mk-pad__b, .mk-pad__c { position: relative; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(#34245a, #261842); box-shadow: 0 3px 0 #0b0614; padding: 0; touch-action: none; }
.mk-pad__b i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(var(--pb) * .34); line-height: 1; color: #e9dcff; pointer-events: none; }
.mk-pad__b--1 i { transform: rotate(45deg); } .mk-pad__b--2 i { transform: rotate(90deg); } .mk-pad__b--3 i { transform: rotate(135deg); }
.mk-pad__b--4 i { transform: rotate(180deg); } .mk-pad__b--5 i { transform: rotate(225deg); } .mk-pad__b--6 i { transform: rotate(270deg); } .mk-pad__b--7 i { transform: rotate(315deg); }
.mk-pad__b--1, .mk-pad__b--3, .mk-pad__b--5, .mk-pad__b--7 { background: linear-gradient(#2c1f4b, #211539); }
.mk-pad__b--1 i, .mk-pad__b--3 i, .mk-pad__b--5 i, .mk-pad__b--7 i { color: #bda8ec; }
.mk-pad__b i svg { width: 44%; height: 44%; display: block; }
.mk-pad__b--1 i svg, .mk-pad__b--3 i svg, .mk-pad__b--5 i svg, .mk-pad__b--7 i svg { width: 38%; height: 38%; }
.mk-pad__c { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a3478, #2a1a47); }
.mk-pad__c b { font-size: 10.5px; font-weight: 800; color: #d9c9ff; }
.mk-pad .is-press { transform: translateY(2px); box-shadow: 0 1px 0 #0b0614; background: linear-gradient(#5a3f96, #3d2a6a); }
.mk-acts { flex: 1 1 auto; max-width: 200px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(var(--pb) * 1.55) calc(var(--pb) * 1.2); gap: 6px; }
.mk-btn { border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(#34245a, #241640); box-shadow: 0 3px 0 #0b0614; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.mk-btn b { font-size: 15px; font-weight: 900; }
.mk-btn small { font-size: 9.5px; color: #cbb8ff; font-weight: 700; }
.mk-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0614; }
.mk-btn--call { grid-column: 1 / 3; background: linear-gradient(#ff6fbd, #d9348e); border-color: #ff9ad5; box-shadow: 0 4px 0 #8d1b58, 0 0 16px rgba(255,95,178,.35); }
.mk-btn--call b { font-size: 19px; letter-spacing: .08em; }
.mk-btn--call small { color: #ffe2f2; }
.mk-btn--dir.is-on { background: linear-gradient(#ffd34d, #e0a800); color: #3a2400; }
.mk-btn--dir.is-on small { color: #5a3c00; }

/* 演出 */
.mk-float { position: absolute; left: 0; right: 0; top: 16%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.mk-toast { background: rgba(20,10,35,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 8px 16px; text-align: center; animation: mkPop .3s ease-out; transition: opacity .35s, transform .35s; }
.mk-toast b { display: block; font-size: 17px; font-weight: 900; }
.mk-toast small { display: block; font-size: 11.5px; color: #cbb8ff; }
.mk-toast.is-lv { border-color: #9fd3ff; box-shadow: 0 0 20px rgba(120,190,255,.45); }
.mk-toast.is-lv b { color: #9fd3ff; }
.mk-toast.is-bad b { color: #ff7a8c; }
.mk-toast.is-out { opacity: 0; transform: translateY(-10px); }
.mk-banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; padding: 14px 10px; background: linear-gradient(90deg, rgba(20,8,40,0), rgba(20,8,40,.92) 20%, rgba(20,8,40,.92) 80%, rgba(20,8,40,0)); animation: mkBan .45s ease-out; transition: opacity .5s; pointer-events: none; }
.mk-banner em { display: block; font-style: normal; font-size: 13px; letter-spacing: .3em; color: #ffd34d; font-weight: 900; }
.mk-banner b { display: block; font-size: 22px; font-weight: 900; text-shadow: 0 0 14px rgba(255,95,178,.6); }
.mk-banner small { display: block; font-size: 12.5px; color: #e6dbff; margin-top: 4px; padding: 0 16px; }
.mk-banner.is-floor em { font-size: 34px; letter-spacing: .06em; }
.mk-banner.is-boss { background: linear-gradient(90deg, rgba(60,0,20,0), rgba(60,0,20,.94) 15%, rgba(60,0,20,.94) 85%, rgba(60,0,20,0)); }
.mk-banner.is-boss em { color: #ff4d6d; font-size: 16px; animation: mkBlink .5s 4; }
.mk-banner.is-mh b, .mk-banner.is-bad b { color: #ff7a8c; }
.mk-banner.is-win b { color: #ffd34d; }
.mk-banner.is-out { opacity: 0; }
.mk-cheki { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; animation: mkCheki .5s cubic-bezier(.2,1.4,.4,1); transition: opacity .45s; pointer-events: none; }
.mk-cheki__card { width: 170px; padding: 12px 10px 14px; background: #fff; color: #2a1640; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 30px rgba(255,154,213,.5); display: flex; flex-direction: column; align-items: center; gap: 6px; transform: rotate(-4deg); }
.mk-cheki__card b { font-size: 14px; font-weight: 900; }
.mk-cheki__card small { font-size: 10.5px; color: #6b4d8f; line-height: 1.35; }
.mk-cheki p { margin: 10px 0 0; font-weight: 900; color: #ff9ad5; text-shadow: 0 0 10px rgba(255,154,213,.7); }
.mk-cheki.is-out { opacity: 0; }
.mk-note { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); z-index: 90; background: rgba(20,10,35,.95); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 10px 16px; font-size: 13.5px; max-width: 88vw; text-align: center; }

/* 演出の札（1枚ずつ・上寄せ・小さめ） */
.mk-nt { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); z-index: 4; max-width: min(86%, 380px); background: rgba(20,10,35,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 5px 14px; text-align: center; pointer-events: none; animation: mkNt .18s ease-out; transition: opacity .2s, transform .2s; }
.mk-nt b { display: block; font-size: 15px; font-weight: 900; line-height: 1.3; }
.mk-nt small { display: block; font-size: 11px; color: #cbb8ff; line-height: 1.3; }
.mk-nt em { display: block; font-style: normal; font-size: 11px; letter-spacing: .12em; color: #ffd34d; font-weight: 900; }
.mk-nt.is-out { opacity: 0; transform: translateX(-50%) translateY(-6px); }
.mk-nt.is-lv { border-color: #9fd3ff; box-shadow: 0 0 14px rgba(120,190,255,.4); } .mk-nt.is-lv b { color: #9fd3ff; }
.mk-nt.is-bad b { color: #ff7a8c; }
.mk-nt.is-band { width: min(86%, 380px); }
.mk-nt.is-floor em { font-size: 20px; letter-spacing: .04em; }
.mk-nt.is-boss { background: rgba(70,0,22,.94); border-color: #ff4d6d; } .mk-nt.is-boss em { color: #ff4d6d; } .mk-nt.is-boss small { color: #ffd6de; }
.mk-nt.is-mh b, .mk-nt.is-bad b { color: #ff7a8c; }
.mk-nt.is-win b { color: #ffd34d; }
.mk-nt.is-cheki { border-color: #ff9ad5; box-shadow: 0 0 16px rgba(255,154,213,.45); }
.mk-nt__cheki { display: flex; align-items: center; gap: 10px; text-align: left; }
.mk-nt__cheki em { color: #ff9ad5; letter-spacing: 0; }
.mk-nt__cheki b { font-size: 13px; }
@keyframes mkNt { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
@media (max-height: 640px) { .mk-nt { top: 34px; padding: 4px 12px; } .mk-nt b { font-size: 13.5px; } }

/* 顔（図鑑・結果） */
.mk-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(30,10,40,.6); border: 2px solid rgba(255,255,255,.8); flex: 0 0 auto; object-fit: cover; }
.mk-av { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 35%, #4a3478, #1f1433); }
.mk-av img { position: absolute; left: 50%; bottom: -4%; width: 108%; height: auto; transform: translateX(-50%); }
.mk-av b { position: relative; z-index: 1; font-size: 40%; color: #8f80ad; }
.mk-av.is-dark { filter: none; background: #1b1430; }
.mk-av.is-boss { border-color: #ffd34d; box-shadow: 0 0 12px rgba(255,211,77,.5); }
.mk-av.is-dark { color: #6b5c86; border-color: #3b2f52; text-shadow: none; }
.mk-av--me { vertical-align: middle; margin: 0 8px 0 0; border-color: #7fd8ff; }
.mk-res > .mk-av--me { margin: 0 auto 6px; }

/* ---------- 下から出る画面 ---------- */
.mk-sheet { position: fixed; inset: 0; z-index: 60; }
.mk-sheet[hidden] { display: none; }
.mk-sheet__bg { position: absolute; inset: 0; background: rgba(5,2,12,.6); }
.mk-sheet__box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; max-height: 88dvh; display: flex; flex-direction: column; background: linear-gradient(#24163d, #180e2a); border-radius: 20px 20px 0 0; border-top: 1px solid rgba(255,255,255,.14); transform: translateY(100%); transition: transform .22s ease-out; max-width: 640px; margin: 0 auto; }
.mk-sheet.is-open .mk-sheet__box { transform: translateY(0); }
.mk-sheet__x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); font-size: 20px; line-height: 1; z-index: 2; }
.mk-sheet__in { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
.mk-sheet h3 { margin: 0 44px 10px 0; font-size: 18px; font-weight: 900; }
.mk-sheet h3 small { font-size: 12px; color: #cbb8ff; font-weight: 700; margin-left: 6px; }
.mk-hint { font-size: 12px; color: #cbb8ff; line-height: 1.6; margin: 8px 0; }
.mk-hint.is-bad { color: #ff8fa0; }
.mk-empty { color: #cbb8ff; font-size: 13px; }
.mk-ilist { display: flex; flex-direction: column; gap: 6px; }
.mk-irow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); min-height: 46px; }
.mk-irow.is-eq { border-color: rgba(255,211,77,.5); background: rgba(255,211,77,.08); }
.mk-irow__n { flex: 1 1 auto; font-size: 14px; font-weight: 800; }
.mk-irow em { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 99px; background: #ffd34d; color: #3a2400; font-weight: 900; white-space: nowrap; }
.mk-irow em.is-shop { background: #ff5fb2; color: #fff; }
.mk-ichip { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #1a1024; border: 1px solid rgba(0,0,0,.3); }
.mk-ichip { background: rgba(255,255,255,.08); overflow: hidden; }
.mk-ichip img { width: 118%; height: 118%; }
.mk-ichip.is-big { width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
.mk-idet { display: flex; gap: 12px; align-items: center; }
.mk-idet b { display: block; font-size: 17px; font-weight: 900; }
.mk-idet small { color: #cbb8ff; font-size: 12px; }
.mk-idet__d { font-size: 13px; line-height: 1.6; color: #efe6ff; margin: 10px 0; }
.mk-ibtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.mk-b { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(#3b2966, #2a1b4a); box-shadow: 0 3px 0 #0b0614; font-weight: 900; font-size: 14.5px; text-decoration: none; color: #fff !important; }
.mk-b small { font-size: 10.5px; font-weight: 700; color: #d9c9ff; }
.mk-b:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b0614; }
.mk-b--main { background: linear-gradient(#ff6fbd, #d9348e); border-color: #ff9ad5; box-shadow: 0 4px 0 #8d1b58, 0 0 18px rgba(255,95,178,.35); }
.mk-b--main small { color: #ffe2f2; }
.mk-b--gold { background: linear-gradient(#ffe066, #f2b21c); color: #3a2400 !important; border-color: #fff0a8; box-shadow: 0 4px 0 #9a7000; }
.mk-b--ghost { background: transparent; box-shadow: none; width: 100%; margin-top: 6px; }
.mk-b--sub { background: linear-gradient(#2e2250, #221840); }
.mk-b--bad { background: linear-gradient(#5a1f35, #3e1426); border-color: rgba(255,120,140,.4); }
.mk-b[disabled] { opacity: .5; }
.mk-menu { display: flex; flex-direction: column; gap: 8px; }
.mk-dirpick { display: grid; grid-template-columns: 1fr repeat(3, 44px); grid-template-rows: repeat(3, 34px); gap: 4px; align-items: center; margin: 6px 0; }
.mk-dirpick span { grid-row: 1 / 4; font-size: 12px; color: #cbb8ff; padding-right: 8px; }
.mk-dirpick button { height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #2b1c46; font-weight: 900; }
.mk-dirpick button.is-on { background: #ffd34d; color: #3a2400; }
.mk-dirpick__me { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; color: #ff9ad5; }
.mk-bigmap { display: block; margin: 0 auto; border-radius: 10px; }
.mk-loglist { max-height: 60vh; overflow-y: auto; font-size: 13px; line-height: 1.55; }
.mk-loglist p { margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px dashed rgba(255,255,255,.08); }
.mk-setrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; font-weight: 800; }
.mk-setrow > div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mk-setrow.is-col { flex-direction: column; align-items: stretch; }
.mk-setrow.is-col > div { justify-content: flex-start; }
.mk-chipbtn { border-radius: 99px; border: 1px solid rgba(255,255,255,.18); background: #2b1c46; padding: 7px 13px; font-size: 13px; font-weight: 800; min-height: 36px; }
.mk-chipbtn small { display: block; font-size: 10px; color: #cbb8ff; }
.mk-chipbtn.is-on { background: #ff5fb2; border-color: #ff9ad5; }
.mk-chipbtn.is-lock { opacity: .45; }
.mk-help h4 { margin: 14px 0 4px; color: #ffd34d; font-size: 14.5px; }
.mk-help p { margin: 0; font-size: 13px; line-height: 1.7; color: #efe6ff; }
.mk-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mk-tabs button { flex: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #2b1c46; padding: 9px; font-weight: 900; }
.mk-tabs button.is-on { background: #ff5fb2; }
.mk-rank ol { list-style: none; margin: 0; padding: 0; }
.mk-rank li { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.mk-rank li em { font-style: normal; width: 28px; text-align: center; font-weight: 900; color: #ffd34d; }
.mk-rank li span { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rank li small { color: #cbb8ff; font-size: 11px; }
.mk-rank li b { font-weight: 900; min-width: 64px; text-align: right; }
.mk-rank li.is-me { background: rgba(255,95,178,.15); border-radius: 8px; }
.mk-rank__me { font-weight: 900; color: #ff9ad5; text-align: center; }
.mk-qlist { display: flex; flex-direction: column; gap: 8px; }
.mk-q { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mk-q b { display: block; font-size: 14px; }
.mk-q small { color: #ffd34d; font-size: 11.5px; font-weight: 800; }
.mk-q em { font-style: normal; font-size: 12px; color: #9fe3b0; font-weight: 900; white-space: nowrap; }
.mk-q em.is-yet { color: #8f80ad; }
.mk-q .mk-b { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.mk-q.is-done { border-color: rgba(255,211,77,.5); }
.mk-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mk-skin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.mk-skin b { font-size: 12px; }
.mk-skin small { font-size: 10.5px; color: #ffd34d; font-weight: 800; }
.mk-skin.is-on { border-color: #ff9ad5; background: rgba(255,95,178,.14); }
.mk-sw { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.6); }
.mk-sw--live { background: linear-gradient(135deg, #2e2345, #8a6fd1); }
.mk-sw--neon { background: linear-gradient(135deg, #07030f, #ff3fd1); }
.mk-sw--retro { background: linear-gradient(135deg, #1d2b12, #9fe35a); }
.mk-zh { margin: 14px 0 8px; font-size: 13px; color: #ffd34d; }
.mk-zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.mk-zc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.mk-zc span { font-size: 10.5px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-zc.is-no span { color: #6b5c86; }
.mk-zc.is-boss { border-color: rgba(255,211,77,.4); }
.mk-zdet { position: absolute; inset: 0; z-index: 3; background: rgba(5,2,12,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mk-zdet__in { width: 100%; max-width: 360px; max-height: 90%; overflow-y: auto; background: linear-gradient(#2c1b4b, #1b1030); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mk-zdet__in > b { font-size: 18px; font-weight: 900; margin-top: 8px; }
.mk-zdet__in > small { color: #ffb3dc; font-size: 12.5px; }
.mk-zdet dl { text-align: left; margin: 10px 0; width: 100%; font-size: 13px; line-height: 1.55; }
.mk-zdet dt { color: #ffd34d; font-weight: 900; font-size: 11.5px; margin-top: 8px; }
.mk-zdet dd { margin: 0; color: #efe6ff; }

/* ---------- 結果 ---------- */
.mk-over { position: fixed; inset: 0; z-index: 55; overflow-y: auto; background: rgba(8,3,16,.95); display: flex; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px 30px; animation: mkFade .4s; }
.mk-over[hidden] { display: none; }
.mk-res { width: 100%; max-width: 440px; text-align: center; margin: auto 0; }
.mk-res__k { margin: 0; font-size: 13px; letter-spacing: .35em; color: #ff7a8c; font-weight: 900; }
.mk-res.is-win .mk-res__k { color: #ffd34d; }
.mk-res h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 900; }
.mk-res__c { margin: 0 0 14px; color: #cbb8ff; font-size: 13.5px; }
.mk-res__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-res__nums div { background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px 2px; }
.mk-res__nums small { display: block; font-size: 10.5px; color: #cbb8ff; }
.mk-res__nums b { font-size: 18px; font-weight: 900; }
.mk-res__best { color: #ffd34d; font-weight: 900; margin: 10px 0 0; animation: mkPulse 1s infinite; }
.mk-res h3 { font-size: 14px; margin: 16px 0 8px; color: #ff9ad5; }
.mk-res__chk { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mk-res__chk figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; }
.mk-res__none { color: #8f80ad; font-size: 13px; }
.mk-res__srv { font-size: 12.5px; color: #e6dbff; line-height: 1.6; margin: 12px 0 6px; }
.mk-res__srv.is-bad { color: #ff8fa0; }
.mk-res__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mk-res__btns .mk-b--main { grid-column: 1 / 3; min-height: 54px; font-size: 17px; }
.mk-res__btns .mk-b--ghost { grid-column: 1 / 3; }

/* ---------- タイトル ---------- */
.mk-title { position: fixed; inset: 0; overflow-y: auto; z-index: 5; background: radial-gradient(ellipse at 50% 0%, #4a1f6e 0%, #1c0c30 45%, #0c0716 80%); }
.mk-title[hidden] { display: none; }
.mk-t__kv { display: block; width: 100%; height: clamp(150px, 30vh, 280px); margin: -4px 0 -6px; }
.mk-t { position: relative; min-height: 100%; justify-content: center; max-width: 480px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.mk-t__lights { position: absolute; left: 0; right: 0; top: 0; height: 240px; overflow: hidden; pointer-events: none; }
.mk-t__lights i { position: absolute; top: -40px; left: calc(8% + var(--i) * 13%); width: 16px; height: 300px; transform-origin: 50% 0; background: linear-gradient(rgba(255,255,255,.35), rgba(255,95,178,0)); filter: blur(4px); animation: mkBeam 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); opacity: .6; }
.mk-t__lights i:nth-child(2n) { background: linear-gradient(rgba(143,107,255,.45), rgba(143,107,255,0)); }
.mk-t__hero { width: 100%; border-radius: 16px; display: block; }
.mk-t__head { position: relative; text-align: center; padding-top: 34px; }
.mk-t__logo { max-width: 92%; }
.mk-t__title { margin: 0; line-height: 1.05; }
.mk-t__title small { display: block; font-size: 12px; letter-spacing: .5em; color: #ff9ad5; font-weight: 900; }
.mk-t__title span { display: block; font-size: 46px; font-weight: 900; color: #fff; text-shadow: 0 0 6px #ff5fb2, 0 0 22px #ff5fb2, 0 4px 0 #8d1b58; letter-spacing: .04em; }
.mk-t__title b { display: block; font-size: 25px; font-weight: 900; color: #ffd34d; text-shadow: 0 0 12px rgba(255,211,77,.55), 0 3px 0 #7a5400; margin-top: 4px; letter-spacing: .06em; }
.mk-t__sub { margin: 10px 0 0; font-size: 13px; color: #e6dbff; }
.mk-t__stats { display: flex; justify-content: center; gap: 12px; font-size: 12.5px; color: #cbb8ff; flex-wrap: wrap; }
.mk-t__stats b { color: #fff; font-size: 15px; }
.mk-t__btns { display: flex; flex-direction: column; gap: 10px; }
.mk-t__btns .mk-b { min-height: 58px; font-size: 18px; }
.mk-t__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-t__grid button { border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk-t__grid b { font-size: 14px; font-weight: 900; }
.mk-t__grid small { font-size: 10px; color: #cbb8ff; }
.mk-t__foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.mk-t__note { margin: 0; text-align: center; font-size: 10.5px; color: #8f80ad; }

/* 低い画面（ブラウザの帯で高さ 560〜680） */
@media (max-height: 640px) {
	.mk-hud { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); padding-bottom: 4px; }
	.mk-hud__fl b { font-size: 18px; }
	.mk-hud__menu { width: 36px; height: 36px; }
	.mk-log { font-size: 12px; line-height: 1.45; padding: 5px 9px; } /* VW1002 切らない */
	.mk-btn small { display: none; }
	.mk-acts { grid-template-rows: calc(var(--pb) * 1.5) calc(var(--pb) * 1.1); }
	.mk-t { gap: 10px; }
	.mk-t__head { padding-top: 16px; }
	.mk-t__title span { font-size: 38px; }
	.mk-t__btns .mk-b { min-height: 50px; }
}
@media (min-width: 700px) {
	.mk-ctl { justify-content: center; gap: 40px; }
}

@keyframes mkBlink { 50% { opacity: .35; } }
@keyframes mkPulse { 50% { transform: scale(1.05); } }
@keyframes mkPop { from { transform: scale(.7); opacity: 0; } }
@keyframes mkBan { from { transform: scaleY(.2); opacity: 0; } }
@keyframes mkCheki { from { transform: translateX(-50%) scale(.3) rotate(-20deg); opacity: 0; } }
@keyframes mkFade { from { opacity: 0; } }
@keyframes mkLogIn { from { transform: translateY(4px); opacity: .6; } }
@keyframes mkBeam { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .mk *, .mk *::before { animation: none !important; transition: none !important; } }

/* 10/02 図鑑（プロフィール）・レア度 */
.mk-rare { font-style: normal; font-size: 10px; font-weight: 900; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.mk-irow .mk-rare { background: transparent; }
.mk-rare--1 { color: #0b1a33 !important; background: #6fb8ff !important; }
.mk-rare--2 { color: #fff !important; background: linear-gradient(90deg, #8f4bff, #c47bff) !important; box-shadow: 0 0 8px rgba(196,123,255,.7); }
.mk-rare--3 { color: #3a2400 !important; background: linear-gradient(90deg, #ffd34d, #fff3b0, #ffd34d) !important; box-shadow: 0 0 10px rgba(255,211,77,.8); animation: mkShine 1.6s linear infinite; background-size: 200% 100% !important; }
@keyframes mkShine { from { background-position: 0 0; } to { background-position: 200% 0; } }
.mk-zc { position: relative; }
.mk-zc__n { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 9.5px; font-weight: 900; color: #ffd34d; }
.mk-zc__c { position: absolute; top: 2px; left: 5px; font-style: normal; font-size: 11px; color: #ff9ad5; }
.mk-zc.is-chk { border-color: rgba(255,154,213,.55); }
.mk-zi .mk-ichip.is-big { width: 40px; height: 40px; }
.mk-zi .mk-ichip b { color: #6b5c86; font-size: 18px; }
.mk-zi--1:not(.is-no) { border-color: rgba(111,184,255,.6); }
.mk-zi--2:not(.is-no) { border-color: rgba(196,123,255,.8); box-shadow: 0 0 10px rgba(196,123,255,.35) inset; }
.mk-zi--3:not(.is-no) { border-color: rgba(255,211,77,.9); box-shadow: 0 0 12px rgba(255,211,77,.45) inset; }
.mk-zdet__st { margin: 2px 0 0; font-size: 12px; color: #ffd34d; font-weight: 800; }
.mk-zdet dt.is-rare, .mk-zdet dd.is-rare { color: #ff9ad5; }
.mk-zdet.is-boss .mk-zdet__in { background: linear-gradient(#4a2a08, #24150a); border-color: #ffd34d; box-shadow: 0 0 30px rgba(255,211,77,.35); }
.mk-zdet--r3 { border-color: #ffd34d !important; box-shadow: 0 0 28px rgba(255,211,77,.4); }
.mk-zdet--r2 { border-color: #c47bff !important; }
.mk-nt.is-legend { background: linear-gradient(90deg, #5a3a00, #8a6000, #5a3a00); border-color: #ffd34d; box-shadow: 0 0 24px rgba(255,211,77,.7); }
.mk-nt.is-legend em { color: #fff3b0; letter-spacing: .2em; } .mk-nt.is-legend b { color: #ffe066; }
.mk-nt.is-sr { background: linear-gradient(90deg, #2a0e4a, #4a1f7a, #2a0e4a); border-color: #c47bff; box-shadow: 0 0 20px rgba(196,123,255,.6); }
.mk-nt.is-sr em { color: #e2c2ff; }

/* 10/02 ドットの絵はぼかさない */
.mk-av img, .mk-ichip img, .mk-cv { image-rendering: pixelated; image-rendering: crisp-edges; }
/* 10/02 低い画面の結果は詰めて、ボタンを画面内に */
.mk-over { background: rgba(8,3,16,.98); }
@media (max-height: 640px) {
	.mk-over { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-bottom: 10px; }
	.mk-res > :first-child:not(.mk-res__k) { display: none; }
	.mk-res h2 { font-size: 19px; margin: 2px 0; }
	.mk-res__c { margin: 0 0 6px; font-size: 12px; }
	.mk-res__nums div { padding: 4px 2px; }
	.mk-res__nums b { font-size: 15px; }
	.mk-res__best { margin: 4px 0 0; font-size: 13px; }
	.mk-res h3 { margin: 6px 0 4px; font-size: 12.5px; }
	.mk-res__none { margin: 2px 0; font-size: 12px; }
	.mk-res__srv { margin: 4px 0; font-size: 11.5px; line-height: 1.45; }
	.mk-res__btns { margin-top: 6px; gap: 6px; }
	.mk-res__btns .mk-b { min-height: 40px; padding: 5px 10px; }
	.mk-res__btns .mk-b--main { min-height: 46px; font-size: 16px; }
}
/* SGC1002 ガチャ（ランダム物販）の入口とレアの印 */
.mk-gcbar { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: 14px; border: 1px solid rgba(255,211,77,.6); background: linear-gradient(90deg, rgba(255,95,178,.26), rgba(143,107,255,.24) 55%, rgba(255,211,77,.22)); box-shadow: 0 0 16px rgba(255,95,178,.28); text-align: left; }
.mk-gcbar__i { font-size: 22px; line-height: 1; flex: none; }
.mk-gcbar b { flex: none; font-size: 15px; font-weight: 900; color: #ffe066; text-shadow: 0 0 8px rgba(255,211,77,.55); }
.mk-gcbar small { font-size: 10.5px; line-height: 1.35; color: #e6dbff; }
.mk-gcdot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px #12081f, 0 0 8px #ff3b5c; }
.mk-gcdot[hidden] { display: none; }
.mk-gcbar--in { margin-top: 16px; }
.mk-gtag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 1.5; color: #fff; background: #7a68a0; vertical-align: 1px; }
.mk-gtag--r { background: linear-gradient(90deg, #4aa8ff, #8f6bff); }
.mk-gtag--sr { background: linear-gradient(90deg, #b46bff, #ff5fb2); }
.mk-gtag--ur { background: linear-gradient(90deg, #ff7a7a, #ffd36e, #7ee08a, #6ec8ff, #b98bff); color: #2a1440; }
/* 10/02 届いたドットの顔絵 */
.mk-av--face { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, #4a3478, #1f1433); }
.mk-av--face img.is-face { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; left: 0; bottom: auto; image-rendering: pixelated; }
.mk-av--face.is-dark img.is-face { filter: brightness(0) opacity(.55); }
.mk-av--face b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
/* PT1002 一枚絵の会話の札（マップの上には描かない。ログ欄の上に短く出て、自動で消える・タップで閉じる） */
.mk-pt { position: absolute; left: 6px; right: 6px; z-index: 5; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; background: rgba(18,8,32,.95); border: 1.5px solid #ff9ad5; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.55), 0 0 14px rgba(255,154,213,.25); animation: mkPtIn .2s ease-out; transition: opacity .2s, transform .2s; cursor: pointer; }
.mk-pt.is-out { opacity: 0; transform: translateY(6px); }
.mk-pt__face { position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: radial-gradient(circle at 50% 35%, #5a3f8e, #1f1433); }
.mk-pt__dot { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity .2s; }
.mk-pt__art { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 250% auto; background-position: 50% 7%; opacity: 0; transition: opacity .2s; }
.mk-pt.is-art .mk-pt__art { opacity: 1; }
.mk-pt.is-art .mk-pt__dot { opacity: 0; }
.mk-pt__tx { min-width: 0; flex: 1 1 auto; text-align: left; line-height: 1.35; }
.mk-pt__tx em { display: inline-block; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #2a1440; background: #ff9ad5; border-radius: 5px; padding: 0 6px; margin-bottom: 2px; }
.mk-pt__tx b { display: block; font-size: 13.5px; font-weight: 900; color: #ffd6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pt__tx b small { font-size: 10.5px; font-weight: 700; color: #cbb8ff; margin-left: 6px; }
.mk-pt__tx p { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #fff; }
.mk-pt.is-in em { background: #ffd34d; }
.mk-pt.is-bye { border-color: #ffb3dc; }
.mk-pt.is-bye em { background: #9fe8ff; }
.mk-pt.is-me { flex-direction: row-reverse; padding: 7px 8px 7px 12px; border-color: #7fd8ff; box-shadow: 0 4px 18px rgba(0,0,0,.55), 0 0 14px rgba(127,216,255,.25); }
.mk-pt.is-me .mk-pt__face { border-color: #7fd8ff; }
.mk-pt.is-me .mk-pt__art { background-position: 50% 12%; }
.mk-pt.is-me .mk-pt__tx { text-align: right; }
.mk-pt.is-me .mk-pt__tx b { color: #bfeaff; }
.mk-pt.is-boss { border-color: #ffd34d; background: rgba(60,6,24,.96); box-shadow: 0 0 22px rgba(255,211,77,.4); }
.mk-pt.is-boss .mk-pt__face { width: 76px; height: 76px; border-radius: 14px; border-color: #ffd34d; }
.mk-pt.is-boss .mk-pt__art { background-size: 190% auto; background-position: 50% 4%; }
.mk-pt.is-boss em { background: #ff4d6d; color: #fff; }
@keyframes mkPtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) { .mk-pt { padding: 5px 10px 5px 6px; gap: 8px; } .mk-pt__face { width: 46px; height: 46px; } .mk-pt.is-boss .mk-pt__face { width: 58px; height: 58px; } .mk-pt__tx p { font-size: 12px; } .mk-pt__tx b { font-size: 12.5px; } }
.mk-pt-zk { position: relative; flex: 0 0 auto; width: min(100%, 240px); height: min(62vw, 240px); display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(circle at 50% 45%, rgba(255,154,213,.3), rgba(255,154,213,0) 70%); }
.mk-pt-zk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.mk-pt-zk.is-art img { opacity: 1; }
.mk-pt-zk.is-art .mk-av { opacity: 0; }
@media (max-height: 700px) { .mk-pt-zk { width: min(100%, 180px); height: 180px; } }
/* FX1003 品物の札・何が起きるか・遊び方の一覧 */
.mk-fxtag { display: inline-block; vertical-align: 2px; margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 900; line-height: 1; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; white-space: nowrap; }
.mk-fxtag--s { background: #ffe066; color: #3a2400; } .mk-fxtag--z { background: #6fb8ff; color: #06223f; } .mk-fxtag--d { background: #5fd3a8; color: #06281d; }
.mk-fxtag--w { background: #ff7ab8; color: #3a0620; } .mk-fxtag--a { background: #ffb347; color: #3a2000; } .mk-fxtag--b { background: #b18cff; color: #1c0b3f; }
.mk-fxtag--f { background: #9be15d; color: #142800; } .mk-fxtag--p { background: #f59e7a; color: #3a1300; } .mk-fxtag--t { background: #d9dde8; color: #1d2030; }
.mk-fxk { margin: -2px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 12.5px; line-height: 1.55; color: #efe6ff; }
.mk-fxk b { color: #ffd34d; margin-right: 4px; }
.mk-fxk small { display: block; margin-top: 2px; font-size: 12px; color: #cbb8ff; }
.mk-fxhow { margin: 8px 0 4px; font-size: 11.5px; line-height: 1.55; color: #b9a8e6; }
.mk-fxlist p { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; margin: 0 0 8px; }
.mk-fxlist .mk-fxtag { margin-left: 0; width: 3.9em; box-sizing: border-box; padding-left: 0; padding-right: 0; text-align: center; }
.mk-fxlist b { font-size: 13px; color: #fff; }
.mk-fxlist span { grid-column: 2; font-size: 12px; line-height: 1.55; color: #cbb8ff; }
.mk-nt.is-fxh { max-width: min(90%, 380px); padding: 7px 14px; border-color: #ffd34d; }
.mk-nt.is-fxh small { font-size: 12px; color: #efe6ff; }
/* MODE1005 効果の札・1タップで使う・気づき・最初の数階の案内 */
.mk-catag { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 1.5; padding: 0 7px; border-radius: 6px; margin-right: 4px; vertical-align: 1px; color: #1a0f2b; background: #cfd6e6; white-space: nowrap; }
.mk-catag.is-heal { background: #4be08a; } .mk-catag.is-bat { background: #b8f06a; } .mk-catag.is-atk { background: #ff7a8c; } .mk-catag.is-slp { background: #7cc4ff; }
.mk-catag.is-ctl { background: #c99bff; } .mk-catag.is-buf { background: #ffd34d; } .mk-catag.is-util { background: #cfd6e6; } .mk-catag.is-eq { background: #ffb15c; }
.mk-catag.is-bad { background: #5a4d6e; color: #fff; } .mk-catag.is-unk { background: #5a4d6e; color: #fff; }
.mk-caef { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: #d9c9ff; }
.mk-irow__n { min-width: 0; }
.mk-irow.is-cahelp { border-color: #4be08a; box-shadow: 0 0 0 1px rgba(75,224,138,.5) inset; }
.mk-idet small .mk-catag { margin-right: 6px; }
.mk-cabig { display: flex; width: 100%; margin: 12px 0 8px; padding: 10px 12px; min-height: 64px; }
.mk-cabig b { font-size: 19px; line-height: 1.25; }
.mk-cabig small { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.mk-casub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.mk-casub .mk-b { flex: 1 1 28%; min-height: 40px; padding: 6px 8px; font-size: 13px; flex-direction: column; line-height: 1.25; }
.mk-casub .mk-b small { display: block; font-size: 10px; font-weight: 600; opacity: .75; margin-top: 1px; }
.mk-nt.is-ca.is-tip { border-color: #7cc4ff; }
.mk-cadesc { font-size: 12px; color: #cbb8ff; margin: 6px 0; }
.mk-cadir { display: grid; grid-template-columns: repeat(3, 72px); grid-auto-rows: 56px; gap: 6px; justify-content: center; margin: 10px 0; }
.mk-cadir button { border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: #2b1c46; font-size: 22px; font-weight: 900; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mk-cadir button.is-on { border-color: #ffd34d; }
.mk-cadir button.is-foe { background: #5a1f3e; border-color: #ff7a8c; }
.mk-cadir button small { font-size: 9.5px; font-weight: 800; color: #ffb3c1; margin-top: 3px; }
.mk-cadir__me { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 18px; color: #ff9ad5; }
.mk-camode > div { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-camode .mk-chipbtn { flex: 1 1 40%; border-radius: 14px; }
.mk-camode__n { margin-top: 4px; }
.mk-tabs--ca button { font-size: 12px; }
.mk-nt.is-ca { border-color: #ffd34d; max-width: min(92%, 400px); }
.mk-nt.is-ca b { font-size: 14px; }
.mk-nt.is-ca small { font-size: 12px; color: #efe6ff; }
.mk-nt.is-ca.is-used { border-color: #4be08a; }
.mk-btn--inv.is-cahelp { border-color: #4be08a; animation: mkCaGlow .9s ease-in-out infinite alternate; }
.mk-btn--inv.is-cahelp small { color: #4be08a; font-weight: 900; }
.mk-btn--inv.is-catut { border-color: #ffd34d; animation: mkCaGlowY .9s ease-in-out infinite alternate; }
@keyframes mkCaGlow { from { box-shadow: 0 3px 0 #0b0614; } to { box-shadow: 0 3px 0 #0b0614, 0 0 16px rgba(75,224,138,.9); } }
@keyframes mkCaGlowY { from { box-shadow: 0 3px 0 #0b0614; } to { box-shadow: 0 3px 0 #0b0614, 0 0 16px rgba(255,211,77,.9); } }
.mk-catut { position: absolute; left: 6px; right: 6px; z-index: 3; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 6px 10px 7px; border-radius: 12px; border: 1px solid #ffd34d; background: rgba(20,10,35,.94); color: #efe6ff; font-size: 12.5px; line-height: 1.45; box-shadow: 0 2px 12px rgba(0,0,0,.5); }
.mk-catut__dots { grid-column: 1 / -1; margin: 0 0 2px; display: flex; gap: 4px; }
.mk-catut__dots i { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 7px; border-radius: 99px; background: rgba(255,255,255,.1); color: #b9a8e6; }
.mk-catut__dots i.is-now { background: #ffd34d; color: #3a2400; }
.mk-catut__dots i.is-done { background: #4be08a; color: #0d2a18; }
.mk-catut b { grid-column: 1; color: #ffd34d; font-size: 13px; }
.mk-catut span { grid-column: 1; }
.mk-catut button { grid-column: 2; grid-row: 2 / span 2; font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 99px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #cbb8ff; }

/* POLISH1006 低い画面（375×667・360×640 など）: ダンジョンの見える所を広げる */
@media (max-height: 720px) and (max-width: 699px) {
	.mk { --pb: clamp(36px, min(12vw, 7.4vh), 56px); }
	@supports (height: 1svh) { .mk { --pb: clamp(36px, min(12vw, 7.4svh), 56px); } }
	.mk-log { font-size: 12px; line-height: 1.4; padding: 4px 9px; min-height: 0; }
	.mk-log p.is-old { display: none; }
	.mk-catut { font-size: 11.5px; line-height: 1.35; padding: 4px 9px 5px; }
	.mk-catut b { font-size: 12px; }
	.mk-catut__dots { margin: 0; }
	.mk-catut__dots i { font-size: 9.5px; padding: 0 6px; }
	.mk-catut button { padding: 4px 8px; font-size: 10.5px; }
}
