/* もんすたぁ☆かけっこ — 画面（接頭辞 kk-）。2026-10-14。スマホ縦が先・文字は14px以上・押す所は44px以上 */
:root {
	--kk-sky: #2a8fd6; --kk-sky2: #1b6aa8; --kk-navy: #173454; --kk-cream: #fffaf0; --kk-cream2: #f3ead2; --kk-yellow: #ffd23f; --kk-mint: #4cc9a0; --kk-coral: #ff7a62;
	--kk-ink: #1f2a36; --kk-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: #0f2a44; overscroll-behavior: none; }
.kk-body { font-family: var(--kk-font); color: var(--kk-ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; font-size: 15px; }
.kk-app { position: relative; width: 100%; max-width: 520px; height: 100%; height: 100dvh; margin: 0 auto; overflow: hidden; background: #000; }
@media (min-width: 700px) {
	.kk-body { background: radial-gradient(circle at 30% 20%, #4aa7e6 0, #1b5b8f 50%, #0f2a44 100%); }
	.kk-app { box-shadow: 0 0 0 3px #0f2a44, 0 20px 60px rgba(0,0,0,.6); }
}
.kk-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kk-ui { position: absolute; inset: 0; pointer-events: none; }
.kk-ui > * { pointer-events: auto; }
.kk-ui.is-view > *, .kk-race.is-view .kk-rb, .kk-race.is-view .kk-rh__pause { pointer-events: none; }

/* 読み込み */
.kk-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #5fb8f0, #2a8fd6); color: #fff; z-index: 50; transition: opacity .4s; }
.kk-load.is-done { opacity: 0; pointer-events: none; }
.kk-load__in { text-align: center; font-weight: 800; }
.kk-load__run { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #ffd23f 19% 60%, #f2a20f 61%); animation: kkBob .6s ease-in-out infinite alternate; }
.kk-load__bar { width: 180px; height: 8px; margin: 10px auto 0; background: rgba(255,255,255,.3); border-radius: 8px; overflow: hidden; }
.kk-load__bar i { display: block; height: 100%; width: 0; background: var(--kk-yellow); transition: width .2s; }
@keyframes kkBob { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* タイトル */
.kk-title { position: absolute; inset: 0; background: #8fd3f5 center / cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 22px calc(20px + env(safe-area-inset-bottom)); }
.kk-title__logo { position: absolute; top: max(5%, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; }
.kk-title__logo b { display: inline-block; line-height: 1.08; font-size: clamp(40px, 13vw, 62px); font-weight: 800; letter-spacing: .01em; color: #fff; -webkit-text-stroke: 7px var(--kk-navy); paint-order: stroke fill; text-shadow: 0 6px 0 var(--kk-navy), 0 10px 18px rgba(0,0,0,.3); transform: rotate(-3deg); }
.kk-title__logo b i { font-style: normal; color: var(--kk-yellow); }
.kk-title__logo small { display: block; margin-top: 8px; font-size: clamp(15px, 4.4vw, 19px); font-weight: 800; color: #fff; -webkit-text-stroke: 4px var(--kk-sky2); paint-order: stroke fill; letter-spacing: .12em; }
.kk-title__btns { width: 100%; max-width: 330px; display: grid; gap: 9px; }
.kk-title__note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); text-align: center; }

/* ボタン */
.kk-btn { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 3px solid var(--kk-navy); border-radius: 16px; background: var(--kk-cream); color: var(--kk-navy); font: 800 17px/1.25 var(--kk-font); box-shadow: 0 4px 0 var(--kk-navy); cursor: pointer; text-align: center; text-decoration: none; }
.kk-btn small { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; opacity: .85; }
.kk-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kk-navy); }
.kk-btn--main { background: linear-gradient(180deg, #ffe27a, #ffc21a); }
.kk-btn--sub { background: #e6f4fb; }
.kk-btn[disabled] { opacity: .45; }
.kk-btn .kk-ico { vertical-align: middle; }

/* 地図の上の操作 */
.kk-pad { position: absolute; left: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 156px; height: 156px; }
.kk-pad button { position: absolute; width: 54px; height: 54px; border: 3px solid rgba(23,52,84,.85); border-radius: 14px; background: rgba(255,250,240,.86); color: var(--kk-navy); font: 800 20px/1 var(--kk-font); box-shadow: 0 3px 0 rgba(23,52,84,.85); touch-action: none; }
.kk-pad button.is-on { background: var(--kk-yellow); transform: translateY(2px); box-shadow: 0 1px 0 rgba(23,52,84,.85); }
.kk-pad .u { left: 51px; top: 0; } .kk-pad .d { left: 51px; bottom: 0; } .kk-pad .l { left: 0; top: 51px; } .kk-pad .r { right: 0; top: 51px; }
.kk-ab { position: absolute; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 140px; height: 124px; }
.kk-ab button { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(23,52,84,.85); font: 800 20px/1 var(--kk-font); box-shadow: 0 3px 0 rgba(23,52,84,.85); touch-action: none; }
.kk-ab .a { right: 0; top: 0; background: rgba(255,210,63,.95); color: var(--kk-navy); }
.kk-ab .b { left: 0; bottom: 0; background: rgba(230,244,251,.92); color: var(--kk-navy); }
.kk-ab button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(23,52,84,.85); }
.kk-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; gap: 8px; pointer-events: none; }
.kk-hud__l { flex: 1; min-width: 0; display: grid; gap: 6px; }
.kk-hud__place { justify-self: start; padding: 6px 12px; border-radius: 12px; background: rgba(23,52,84,.82); color: #fff; font-size: 14px; font-weight: 800; opacity: 0; transition: opacity .5s; }
.kk-hud__place.is-on { opacity: 1; }
.kk-hud__goal { justify-self: start; max-width: 100%; padding: 6px 10px; border-radius: 10px; background: rgba(23,52,84,.74); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.45; }
.kk-hud__menu { pointer-events: auto; flex: none; min-width: 84px; min-height: 46px; padding: 8px 14px; border: 3px solid var(--kk-navy); border-radius: 12px; background: var(--kk-cream); color: var(--kk-navy); font: 800 15px/1 var(--kk-font); box-shadow: 0 3px 0 var(--kk-navy); }
.kk-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 30; }
.kk-fade.is-on { opacity: 1; }
.kk-fade.is-white { background: #fff; }

/* 会話 */
.kk-talk { position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); min-height: 118px; padding: 16px 18px 18px; border: 4px solid var(--kk-navy); border-radius: 18px; background: var(--kk-cream); color: var(--kk-ink); box-shadow: 0 4px 0 var(--kk-navy); z-index: 40; cursor: pointer; }
.kk-ui:has(> .kk-talk) .kk-pad, .kk-ui:has(> .kk-talk) .kk-ab { visibility: hidden; }
.kk-talk__who { position: absolute; top: -16px; left: 14px; z-index: 1; padding: 3px 12px; border-radius: 10px; background: var(--kk-sky); color: #fff; font-size: 15px; font-weight: 800; border: 3px solid var(--kk-navy); }
.kk-talk__txt { font-size: 17px; line-height: 1.7; white-space: pre-wrap; min-height: 3.4em; }
.kk-talk__next { position: absolute; right: 16px; bottom: 6px; font-size: 14px; color: var(--kk-navy); animation: kkBlink 1s infinite; }
.kk-talk__log { position: absolute; top: -24px; right: 12px; width: 44px; height: 44px; border: 3px solid var(--kk-navy); border-radius: 50%; background: #fff; color: var(--kk-navy); font: 800 20px/1 var(--kk-font); padding: 0; box-shadow: 0 2px 0 var(--kk-navy); }
.kk-talk__por { position: absolute; left: 4px; bottom: calc(100% - 6px); height: min(28vh, 200px); width: calc(min(28vh, 200px) * .9); overflow: hidden; pointer-events: none; }
.kk-talk__por img { position: absolute; left: 50%; top: 0; height: 170%; transform: translateX(-50%); filter: drop-shadow(0 3px 0 rgba(23,52,84,.35)); }
.kk-ui:has(> .kk-choice) .kk-talk__por, .kk-ui:has(> .kk-sheet) .kk-talk__por, .kk-ui:has(> .kk-ov) .kk-talk__por { display: none; }
@keyframes kkBlink { 50% { opacity: .2; } }
.kk-choice { position: absolute; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); display: grid; gap: 8px; min-width: 60%; max-width: calc(100% - 24px); z-index: 41; }
.kk-choice button { min-height: 48px; padding: 10px 16px; border: 3px solid var(--kk-navy); border-radius: 14px; background: #fff; color: var(--kk-navy); font: 800 16px/1.3 var(--kk-font); box-shadow: 0 3px 0 var(--kk-navy); text-align: left; }
.kk-choice button:active { background: var(--kk-yellow); }
.kk-toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); max-width: 88%; padding: 10px 16px; border-radius: 14px; background: rgba(23,52,84,.92); color: #fff; font-size: 15px; font-weight: 800; z-index: 90; text-align: center; animation: kkToast 1.9s both; pointer-events: none; }
@keyframes kkToast { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* シート */
.kk-sheet { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--kk-cream); }
.kk-sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px; background: var(--kk-sky); color: #fff; border-bottom: 4px solid var(--kk-navy); }
.kk-sheet__head h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.kk-sheet__head button { min-width: 72px; min-height: 44px; border: 3px solid var(--kk-navy); border-radius: 12px; background: #fff; color: var(--kk-navy); font: 800 15px/1 var(--kk-font); box-shadow: 0 2px 0 var(--kk-navy); }
.kk-sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); touch-action: pan-y; }
.kk-sheet__body h3 { margin: 16px 0 8px; font-size: 16px; color: var(--kk-navy); }
.kk-info { margin: 10px 0; font-size: 14px; line-height: 1.6; color: #44546a; }
.kk-info a { color: var(--kk-sky2); font-weight: 800; display: inline-block; min-height: 44px; line-height: 44px; }
.kk-log { margin: 0; padding: 0; list-style: none; }
.kk-log li { padding: 8px 4px; border-bottom: 1px solid rgba(23,52,84,.12); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.kk-log b { display: block; font-size: 14px; color: var(--kk-sky2); }
.kk-menu { display: grid; gap: 10px; margin-top: 12px; }
.kk-menu--grid { grid-template-columns: 1fr 1fr; }
.kk-list { display: grid; gap: 8px; }
.kk-mon { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid var(--kk-cream2); border-radius: 14px; background: #fff; text-align: left; font-family: var(--kk-font); color: var(--kk-ink); }
.kk-mon.is-team { border-color: var(--kk-yellow); background: #fffbe7; }
.kk-mon--pick { width: 100%; min-height: 64px; cursor: pointer; }
.kk-mon--pick[disabled] { opacity: .4; }
.kk-mon__no { position: absolute; left: -6px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--kk-coral); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--kk-navy); }
.kk-mon__art { flex: none; width: 56px; height: 56px; border-radius: 12px; background: #e9f6fd; }
.kk-mon__art img { width: 100%; height: 100%; object-fit: contain; }
.kk-mon__info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.kk-mon__info b { font-size: 16px; }
.kk-mon__info small, .kk-mon__info em { font-size: 14px; font-style: normal; color: #44546a; }
.kk-mon__btns { display: grid; gap: 6px; }
.kk-mon__btns button, .kk-item button, .kk-quest button { min-height: 44px; min-width: 76px; padding: 6px 10px; border: 3px solid var(--kk-navy); border-radius: 12px; background: var(--kk-cream); color: var(--kk-navy); font: 800 14px/1.2 var(--kk-font); box-shadow: 0 2px 0 var(--kk-navy); }
.kk-mon__btns button[disabled], .kk-item button[disabled] { opacity: .45; }
.kk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 3px solid var(--kk-cream2); }
.kk-item > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kk-item b { font-size: 16px; } .kk-item small { font-size: 14px; color: #44546a; line-height: 1.45; }

/* しるし */
.kk-ico { display: inline-block; flex: none; width: 34px; height: 34px; background-repeat: no-repeat; vertical-align: middle; border-radius: 50%; }
.kk-ico--sm { width: 24px; height: 24px; }
.kk-ico--s { width: 26px; height: 26px; }
.kk-ico--it { width: 44px; height: 44px; border-radius: 10px; }
.kk-ico--cup { width: 48px; height: 48px; border-radius: 0; }
.kk-ico--big { width: 140px; height: 140px; border-radius: 0; }
.kk-apt { display: inline-block; min-width: 24px; padding: 0 4px; border-radius: 8px; font-size: 14px; font-weight: 800; text-align: center; color: #fff; }
.kk-apt--0 { background: #8c96a3; } .kk-apt--1 { background: #4aa3d8; } .kk-apt--2 { background: #f08a24; } .kk-apt--3 { background: linear-gradient(135deg, #ff5f8a, #ffb627); }
.kk-apts { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kk-apts span { display: grid; justify-items: center; gap: 2px; padding: 4px 0; background: #fff; border-radius: 10px; border: 2px solid var(--kk-cream2); }
.kk-stats { display: grid; gap: 6px; }
.kk-stats div { display: grid; grid-template-columns: 28px 5.5em 1fr 3em; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.kk-stats i { height: 10px; border-radius: 6px; background: #e6edf3; overflow: hidden; }
.kk-stats u { display: block; height: 100%; background: linear-gradient(90deg, #4cc9a0, #2a8fd6); }
.kk-stats b { text-align: right; font-size: 15px; }
.kk-sks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kk-sks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: #fff; border-radius: 12px; border: 2px solid var(--kk-cream2); }
.kk-sks li div { display: grid; gap: 2px; } .kk-sks b { font-size: 15px; } .kk-sks small { font-size: 14px; color: #44546a; line-height: 1.45; }
.kk-sks.is-past li { opacity: .7; }
.kk-detail { max-width: 460px; margin: 0 auto; }
.kk-detail__art { width: min(62vw, 240px); height: min(62vw, 240px); margin: 0 auto; border-radius: 24px; background: radial-gradient(circle, #ffffff 0, #dff1fb 70%); }
.kk-detail__art img { width: 100%; height: 100%; object-fit: contain; }
.kk-detail__art--p { width: 170px; height: 255px; border-radius: 18px; }
.kk-detail__lv { margin: 8px 0 4px; text-align: center; font-weight: 800; font-size: 15px; }
.kk-detail__d { margin: 14px 0; font-size: 15px; line-height: 1.7; }
.kk-exp { height: 8px; border-radius: 6px; background: #e6edf3; overflow: hidden; }
.kk-exp i { display: block; height: 100%; background: var(--kk-yellow); }
.kk-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kk-dex__c { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 120px; padding: 6px 4px; border: 3px solid var(--kk-cream2); border-radius: 14px; background: #fff; font-family: var(--kk-font); color: var(--kk-ink); }
.kk-dex__c img { width: 72px; height: 72px; object-fit: contain; filter: brightness(0) opacity(.25); }
.kk-dex__c.is-seen img { filter: grayscale(.7) opacity(.75); }
.kk-dex__c.is-got img { filter: none; }
.kk-dex__c.is-got { border-color: var(--kk-mint); }
.kk-dex__c small { font-size: 14px; color: #6b7a8c; } .kk-dex__c b { font-size: 14px; }
.kk-cuprow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 3px solid var(--kk-cream2); }
.kk-cuprow > div { flex: 1; display: grid; } .kk-cuprow small { font-size: 14px; color: #44546a; } .kk-cuprow em { font-style: normal; font-weight: 800; font-size: 14px; }
.kk-cuprow:not(.is-won) .kk-ico { filter: grayscale(1) opacity(.4); }
.kk-cuprow.is-won { border-color: var(--kk-yellow); } .kk-cuprow.is-won em { color: #c77a00; }
.kk-wmap { display: grid; gap: 0; }
.kk-wmap > i { display: block; width: 4px; height: 18px; margin-left: 28px; background: repeating-linear-gradient(180deg, #9fb3c8 0 4px, transparent 4px 8px); }
.kk-wmap__t { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; border: 3px solid var(--kk-cream2); opacity: .55; }
.kk-wmap__t.is-open { opacity: 1; } .kk-wmap__t.is-here { border-color: var(--kk-coral); box-shadow: 0 0 0 3px rgba(255,122,98,.25); }
.kk-wmap__t span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.kk-wmap__t b { font-size: 16px; } .kk-wmap__t small { display: block; font-size: 14px; color: #44546a; margin-left: auto; text-align: right; }
.kk-help { display: grid; gap: 8px; }
.kk-help > div { padding: 10px 12px; border-radius: 14px; background: #fff; border: 3px solid var(--kk-cream2); }
.kk-help b { font-size: 16px; color: var(--kk-sky2); } .kk-help p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; }
.kk-help--mini { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.kk-help--mini > div { padding: 8px; } .kk-help--mini b { font-size: 15px; } .kk-help--mini p { font-size: 14px; line-height: 1.45; }

/* お散歩 */
.kk-walk { text-align: center; }
.kk-walk__sky { position: relative; height: 200px; border-radius: 18px; overflow: hidden; background: #8fd3f5 0 0 / auto 100% repeat-x; animation: kkPan 18s linear infinite; border: 3px solid var(--kk-navy); }
.kk-walk__mon { position: absolute; left: 50%; bottom: 10px; width: 150px; height: 150px; margin-left: -75px; background: 0 0 / 400% 100% no-repeat; animation: kkRun .45s steps(4) infinite; cursor: pointer; }
.kk-walk__mon.is-hop { animation: kkRun .45s steps(4) infinite, kkHop .5s ease-out; }
.kk-walk p { font-size: 15px; line-height: 1.6; }
.kk-walk .kk-btn { margin-top: 10px; }
@keyframes kkRun { from { background-position: 0 0; } to { background-position: 133.333% 0; } }
@keyframes kkPan { from { background-position: 0 0; } to { background-position: -1024px 0; } }
@keyframes kkHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-60px); } }

/* 合体・進化 */
.kk-fuse { display: flex; align-items: center; justify-content: center; gap: 4px; }
.kk-fuse img { width: 28%; max-width: 110px; aspect-ratio: 1; object-fit: contain; }
.kk-fuse b { font-size: 22px; color: var(--kk-navy); }
.kk-fuse img.is-unknown { filter: brightness(0) opacity(.35); }
.kk-fuserow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; align-items: center; gap: 6px; padding: 8px; background: #fff; border-radius: 12px; border: 2px solid var(--kk-cream2); font-size: 14px; font-weight: 700; }
.kk-fuserow em { font-style: normal; display: flex; align-items: center; gap: 4px; } .kk-fuserow img { width: 36px; height: 36px; object-fit: contain; }
.kk-evo { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: radial-gradient(circle, #2f6ea3 0, #102a45 70%); color: #fff; text-align: center; }
.kk-evo__stage { position: relative; width: min(80vw, 320px); height: min(80vw, 320px); }
.kk-evo__stage img, .kk-evo__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: all .9s ease; }
.kk-evo__a { transform: translateX(-28%) scale(.62); } .kk-evo__b { transform: translateX(28%) scale(.62); }
.kk-evo.is-merge .kk-evo__a, .kk-evo.is-merge .kk-evo__b { transform: scale(.35); opacity: 0; }
.kk-evo__c { opacity: 0; transform: scale(.3); }
.kk-evo.is-born .kk-evo__c { opacity: 1; transform: scale(1); }
.kk-evo.is-glow .kk-evo__old { filter: brightness(2.2) saturate(0); animation: kkPulse .35s infinite alternate; }
.kk-evo.is-born .kk-evo__old { opacity: 0; transform: scale(1.3); }
.kk-evo__t { font-size: 18px; font-weight: 800; line-height: 1.6; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.kk-evo__t small { font-size: 15px; }
.kk-evo .kk-btn { max-width: 280px; }
@keyframes kkPulse { from { transform: scale(.95); } to { transform: scale(1.05); } }

/* 札（重ね） */
.kk-ov { position: absolute; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(15,42,68,.62); }
.kk-card { width: 100%; max-width: 420px; max-height: 92%; overflow-y: auto; padding: 16px 16px 14px; border: 4px solid var(--kk-navy); border-radius: 20px; background: var(--kk-cream); box-shadow: 0 5px 0 var(--kk-navy); text-align: center; touch-action: pan-y; }
.kk-card h2 { margin: 4px 0 10px; font-size: 21px; color: var(--kk-navy); line-height: 1.35; }
.kk-card p { font-size: 15px; line-height: 1.7; margin: 8px 0; }
.kk-card .kk-btn { margin-top: 12px; }
.kk-grow { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 6px 0; border-radius: 14px; background: #fff; border: 2px solid var(--kk-cream2); text-align: left; }
.kk-grow img { width: 56px; height: 56px; object-fit: contain; }
.kk-grow > div { display: grid; gap: 2px; } .kk-grow b { font-size: 16px; } .kk-grow small { font-size: 14px; } .kk-grow em { font-style: normal; color: #d65a00; font-weight: 800; } .kk-grow span { font-size: 14px; color: #2a8a5c; }
.kk-enc { position: absolute; inset: 0; z-index: 58; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(circle, #fff 0, #ffe27a 30%, #2a8fd6 75%); animation: kkEnc 1.3s both; }
.kk-enc img { width: min(60vw, 240px); animation: kkDash 1.3s both; }
.kk-enc b { padding: 8px 14px; border-radius: 14px; background: rgba(23,52,84,.88); color: #fff; font-size: 17px; text-align: center; margin: 0 16px; }
@keyframes kkEnc { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kkDash { 0% { transform: translateX(-80vw) scale(.6); } 35% { transform: translateX(0) scale(1); } 100% { transform: translateX(0) scale(1); } }
.kk-catch img { width: min(60vw, 230px); animation: kkPop .6s both; }
@keyframes kkPop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.kk-course { display: flex; height: 30px; border-radius: 10px; overflow: hidden; border: 3px solid var(--kk-navy); }
.kk-course span { display: flex; align-items: center; justify-content: center; min-width: 26px; }
.kk-tteam { margin-top: 10px; text-align: left; }
.kk-tteam small { font-size: 14px; color: #44546a; }
.kk-tteam > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.kk-tteam span { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: #fff; border: 2px solid var(--kk-cream2); text-align: center; }
.kk-tteam img { width: 54px; height: 54px; object-fit: contain; } .kk-tteam b { font-size: 14px; } .kk-tteam em { font-style: normal; font-size: 14px; color: #c45d00; }
.kk-foes { display: grid; gap: 6px; margin: 10px 0; text-align: left; }
.kk-foes div { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: #fff; border: 2px solid var(--kk-cream2); }
.kk-foes img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; } .kk-foes b { font-size: 15px; } .kk-foes small { font-size: 14px; color: #44546a; }
.kk-places { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 5px; text-align: left; }
.kk-places li { display: grid; grid-template-columns: 3em 40px 1fr auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; background: #fff; border: 2px solid var(--kk-cream2); font-size: 15px; }
.kk-places li.is-me { border-color: var(--kk-yellow); background: #fffbe7; }
.kk-places img { width: 40px; height: 40px; object-fit: contain; } .kk-places em { font-style: normal; font-size: 14px; color: #44546a; }
.kk-pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.kk-pts span { display: grid; gap: 2px; padding: 6px 2px; border-radius: 10px; background: #fff; border: 2px solid var(--kk-cream2); font-size: 14px; font-weight: 700; }
.kk-pts span.is-me { border-color: var(--kk-yellow); } .kk-pts b { font-size: 18px; color: var(--kk-navy); }
.kk-trophy { display: flex; justify-content: center; animation: kkPop .7s both; }
.kk-bigtime { font-size: 36px !important; font-weight: 800; color: var(--kk-navy); margin: 4px 0 !important; }
.kk-end { position: absolute; inset: 0; z-index: 62; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; background: var(--kk-cream); text-align: center; overflow-y: auto; }
.kk-end__img { width: 100%; max-width: 420px; aspect-ratio: 3 / 2; border-radius: 18px; background: center / cover no-repeat; border: 4px solid var(--kk-navy); }
.kk-end h2 { margin: 6px 0 0; font-size: 26px; color: var(--kk-navy); }
.kk-end p { margin: 0; font-size: 15px; line-height: 1.7; }
.kk-end .kk-btn { max-width: 300px; }
.kk-intro { position: absolute; inset: 0; z-index: 35; background: #0f2a44 center 30% / cover no-repeat; }
.kk-input { display: block; width: 100%; min-height: 48px; padding: 8px 12px; border: 3px solid var(--kk-navy); border-radius: 12px; font: 800 20px var(--kk-font); text-align: center; -webkit-user-select: text; user-select: text; }
.kk-daily h3 { margin-top: 14px; }
.kk-quest { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border-radius: 12px; background: #fff; border: 2px solid var(--kk-cream2); font-size: 14px; line-height: 1.45; }
.kk-quest.is-done { border-color: var(--kk-mint); }
.kk-quest b { font-size: 14px; color: #c45d00; } .kk-quest em { font-style: normal; font-size: 14px; color: #6b7a8c; }
.kk-rank { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.kk-rank li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--kk-cream2); font-size: 15px; }
.kk-rank li.is-me { border-color: var(--kk-yellow); background: #fffbe7; } .kk-rank b { color: var(--kk-sky2); } .kk-rank em { font-style: normal; font-weight: 800; }
.kk-skins { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-skins button { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 10px; border: 3px solid var(--kk-cream2); border-radius: 12px; background: #fff; font: 800 14px var(--kk-font); color: var(--kk-navy); }
.kk-skins button.is-on { border-color: var(--kk-coral); background: #fff2ee; }

/* ---------- レース ---------- */
.kk-race { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.kk-race > * { pointer-events: auto; }
.kk-rh { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; display: grid; gap: 6px; }
.kk-rh__bar { position: relative; height: 22px; }
.kk-rh__segs { position: absolute; left: 0; right: 0; top: 6px; height: 10px; display: flex; border-radius: 6px; overflow: hidden; border: 2px solid var(--kk-navy); }
.kk-rh__segs i { display: block; height: 100%; }
.kk-rh__dots { position: absolute; left: 6px; right: 6px; top: 0; height: 22px; }
.kk-rh__dots i { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--kk-navy); transition: left .09s linear; }
.kk-rh__dots i.is-me { background: var(--kk-yellow); z-index: 2; width: 20px; height: 20px; top: 1px; margin-left: -10px; }
.kk-rh__dots i.is-ghost { background: rgba(255,255,255,.5); border-style: dashed; }
.kk-rh__row { display: flex; align-items: center; gap: 6px; }
.kk-rh__place { min-width: 64px; padding: 4px 10px; border-radius: 12px; background: var(--kk-coral); color: #fff; font-size: 18px; text-align: center; border: 3px solid var(--kk-navy); white-space: nowrap; }
.kk-rh__time { padding: 4px 8px; border-radius: 10px; background: rgba(23,52,84,.82); color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kk-rh__ter { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 12px; background: rgba(255,250,240,.92); border: 2px solid var(--kk-navy); font-size: 14px; font-weight: 800; white-space: nowrap; }
.kk-rh__pause { margin-left: auto; width: 44px; height: 44px; border: 3px solid var(--kk-navy); border-radius: 12px; background: var(--kk-cream); color: var(--kk-navy); font: 800 16px/1 var(--kk-font); box-shadow: 0 2px 0 var(--kk-navy); }
.kk-rhint { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 84px); transform: translateX(-50%); max-width: 92%; padding: 6px 14px; border-radius: 14px; background: rgba(23,52,84,.86); color: #fff; font-size: 15px; font-weight: 800; text-align: center; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.kk-rhint.is-on { opacity: 1; }
.kk-rhint.is-jump { background: var(--kk-coral); animation: kkJumpHint .5s infinite alternate; }
@keyframes kkJumpHint { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -6px); } }
.kk-bal { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 124px); transform: translateX(-50%); width: min(80%, 300px); height: 54px; border-radius: 14px; background: rgba(255,250,240,.92); border: 3px solid var(--kk-navy); pointer-events: none; overflow: hidden; }
.kk-bal i { position: absolute; left: 50%; bottom: 8px; width: 6px; height: 34px; border-radius: 3px; background: var(--kk-navy); transform-origin: 50% 100%; }
.kk-bal b { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--kk-mint); border: 2px solid var(--kk-navy); }
.kk-bal span { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 14px; font-weight: 800; text-align: center; color: var(--kk-navy); opacity: .75; }
.kk-bal.is-danger { background: #ffe0d8; animation: kkShake .15s infinite; }
@keyframes kkShake { 50% { margin-left: 3px; } }
.kk-rb { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(15,42,68,0), rgba(15,42,68,.78) 30%); display: grid; gap: 6px; }
.kk-rb__sta { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; color: #fff; }
.kk-rb__nm { font-size: 15px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.kk-rb__bar { height: 14px; border-radius: 8px; background: rgba(255,255,255,.25); border: 2px solid #fff; overflow: hidden; }
.kk-rb__bar i { display: block; height: 100%; background: linear-gradient(90deg, #4cc9a0, #9be86a); transition: width .1s; }
.kk-rb__bar i.is-low { background: linear-gradient(90deg, #ffb627, #ffd23f); }
.kk-rb__bar i.is-exh { background: #ff5f5f; animation: kkBlink .6s infinite; }
.kk-rb__sta em { grid-column: 1 / -1; min-height: 1.3em; font-style: normal; font-size: 14px; font-weight: 800; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.kk-rb__row { display: flex; gap: 6px; align-items: stretch; }
.kk-rb__slots { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kk-rb__slots.is-one { grid-template-columns: 1fr; }
.kk-slot { position: relative; display: grid; justify-items: center; align-content: start; gap: 0; min-height: 76px; padding: 4px 2px 8px; border: 3px solid var(--kk-navy); border-radius: 14px; background: rgba(255,250,240,.95); font-family: var(--kk-font); color: var(--kk-navy); box-shadow: 0 3px 0 var(--kk-navy); touch-action: none; }
.kk-slot img { width: 44px; height: 44px; object-fit: contain; }
.kk-slot b { font-size: 14px; line-height: 1.1; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kk-slot__apt { position: absolute; top: 2px; right: 3px; }
.kk-slot i { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 5px; border-radius: 3px; background: #dfe6ee; overflow: hidden; }
.kk-slot u { display: block; height: 100%; background: var(--kk-mint); }
.kk-slot.is-on { background: #fff4c4; border-color: var(--kk-coral); box-shadow: 0 3px 0 var(--kk-coral); }
.kk-slot.is-on::before { content: '走っている'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: var(--kk-coral); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; line-height: 1.3; }
.kk-slot.is-exh img { filter: grayscale(1); }
.kk-slot.is-cd { opacity: .6; }
.kk-rb__skill { flex: none; width: 76px; display: grid; justify-items: center; align-content: center; gap: 2px; border: 3px solid var(--kk-navy); border-radius: 14px; background: linear-gradient(180deg, #ffe27a, #ffc21a); color: var(--kk-navy); font: 800 14px var(--kk-font); box-shadow: 0 3px 0 var(--kk-navy); touch-action: none; }
.kk-rb__skill.is-used, .kk-rb__skill[disabled] { background: #cfd8e2; filter: grayscale(.8); }
.kk-skp { position: absolute; right: 8px; bottom: calc(130px + env(safe-area-inset-bottom)); width: min(92%, 340px); max-height: 60%; overflow-y: auto; padding: 10px; border: 3px solid var(--kk-navy); border-radius: 16px; background: var(--kk-cream); box-shadow: 0 4px 0 var(--kk-navy); display: grid; gap: 6px; z-index: 5; }
.kk-skp p { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--kk-navy); }
.kk-skp button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 52px; padding: 6px 8px; border: 2px solid var(--kk-cream2); border-radius: 12px; background: #fff; text-align: left; font-family: var(--kk-font); color: var(--kk-ink); }
.kk-skp button .kk-ico { grid-row: span 2; } .kk-skp button b { font-size: 15px; } .kk-skp button small { font-size: 14px; color: #44546a; line-height: 1.35; }
.kk-skp .kk-skp__x { display: block; text-align: center; font-weight: 800; color: var(--kk-navy); min-height: 44px; }
.kk-skb { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 30px; background: linear-gradient(90deg, #ffd23f, #ff9e3d); border: 3px solid var(--kk-navy); color: var(--kk-navy); font-size: 18px; white-space: nowrap; animation: kkSkill 1.5s both; pointer-events: none; }
.kk-skb.is-foe { background: linear-gradient(90deg, #cfe3f5, #9fc7ea); top: 26%; font-size: 15px; }
@keyframes kkSkill { 0% { opacity: 0; transform: translate(-80%, 0) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-30%, 0); } }
.kk-pause { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,42,68,.6); }
.kk-pause .kk-btn { margin-top: 10px; }
.kk-cd { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 84px; font-weight: 800; color: #fff; -webkit-text-stroke: 8px var(--kk-navy); paint-order: stroke fill; pointer-events: none; animation: kkCount .7s both; }
.kk-cd.is-go { font-size: 54px; color: var(--kk-yellow); }
@keyframes kkCount { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .9; } }

@media (max-height: 680px) {
	.kk-slot { min-height: 64px; } .kk-slot img { width: 36px; height: 36px; }
	.kk-talk { min-height: 104px; padding: 12px 14px 14px; } .kk-talk__txt { font-size: 16px; }
	.kk-pad { transform: scale(.88); transform-origin: left bottom; } .kk-ab { transform: scale(.88); transform-origin: right bottom; }
	.kk-bal { top: calc(max(8px, env(safe-area-inset-top)) + 114px); height: 48px; }
}

/* 観戦の隅の表示（共通の watch.css）は、かけっこでは右下（A・B の上）へ。上の段（メニュー・目的・とじる・順位）を隠さない */
.kk-body .wtc--tr { top: auto; bottom: calc(176px + env(safe-area-inset-bottom)); flex-direction: column; }
html.kk-racing .wtc--tr { bottom: calc(190px + env(safe-area-inset-bottom)); }
.kk-rh__flag { width: 40px; height: 40px; border-radius: 8px; }
.kk-slot, .kk-rb__skill, .kk-skp button, .kk-dex__c, .kk-skins button, .kk-mon--pick { font-size: 14px; }
/* タイトルの「観戦する」（共通の部品）を、このゲームの文字の大きさに */
.kk-title .wtc-home { min-height: 48px; display: flex; align-items: center; gap: 8px; }
.kk-title .wtc-home b { font-size: 15px !important; }
.kk-title .wtc-home small { font-size: 14px !important; }

.kk-trophy { position: relative; margin: 4px auto 0; width: 190px; height: 170px; align-items: center; }
.kk-trophy::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,210,63,.55) 0 12deg, rgba(255,255,255,0) 12deg 24deg); animation: kkSpin 6s linear infinite; -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
.kk-trophy .kk-ico { position: relative; filter: drop-shadow(0 4px 0 rgba(23,52,84,.35)); }
@keyframes kkSpin { to { transform: rotate(360deg); } }
.kk-places em.is-left { color: #c45d00; }
.kk-ui.is-view .kk-hud__goal, .kk-ui.is-view .kk-hud__menu { display: none; }
html:has(.kk-end) .wtc-hint, html:has(.kk-ov) .wtc-hint, html:has(.kk-talk) .wtc-hint, html:has(.kk-sheet) .wtc-hint, html:has(.kk-evo) .wtc-hint { display: none; }

/* お散歩のおやつ拾い（10/15） */
.kk-walk__sky { cursor: pointer; }
.kk-walk__mon { pointer-events: none; }
.kk-walk__treat { position: absolute; bottom: 14px; left: 100%; width: 52px; height: 52px; background-repeat: no-repeat; pointer-events: none; }
.kk-walk__treat.is-roll { animation: kkTreat 2.8s linear both; }
.kk-walk__treat.is-got { animation: kkTreatGot .45s ease-out both; }
@keyframes kkTreat { from { left: 100%; transform: rotate(0); } to { left: -60px; transform: rotate(-720deg); } }
@keyframes kkTreatGot { to { transform: translateY(-90px) scale(.3); opacity: 0; } }
.kk-walk__pop { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: rgba(23,52,84,.85); color: #fff; font-size: 15px; white-space: nowrap; opacity: 0; pointer-events: none; }
.kk-walk__pop.is-on { animation: kkToast 1.6s both; }
.kk-walk__how { font-size: 15px; font-weight: 800; color: var(--kk-sky2); }

/* WIDE1015 PC・横に広い画面: 帯にせず画面の幅いっぱい（レースは横に長く見える）。読む物（会話・メニュー・札）だけ読みやすい幅に */
@media (min-width: 700px) {
	.kk-app { max-width: none; box-shadow: none; }
	.kk-talk { left: max(10px, calc(50% - 440px)); right: max(10px, calc(50% - 440px)); }
	.kk-choice { right: max(12px, calc(50% - 440px)); min-width: 0; width: min(420px, calc(100% - 24px)); }
	.kk-sheet__body { padding-left: max(14px, calc(50% - 390px)); padding-right: max(14px, calc(50% - 390px)); }
	.kk-sheet__head { padding-left: max(16px, calc(50% - 390px)); padding-right: max(12px, calc(50% - 390px)); }
	.kk-rb { padding-left: max(8px, calc(50% - 420px)); padding-right: max(8px, calc(50% - 420px)); }
	.kk-rh { left: max(8px, calc(50% - 520px)); right: max(8px, calc(50% - 520px)); }
	.kk-skp { right: max(8px, calc(50% - 420px)); }
	.kk-hud { left: max(10px, calc(50% - 560px)); right: max(10px, calc(50% - 560px)); }
	.kk-title { background-position: center 30%; }
	.kk-title__btns { max-width: 360px; }
}
/* タイトルの「観戦する」（共通の部品）が1字だけ次の行へ割れないように */
.kk-title .wtc-home { flex-wrap: wrap; justify-content: center; text-align: center; }
.kk-title .wtc-home b, .kk-title .wtc-home small { white-space: nowrap; }
.kk-title__note { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
/* WIDE1015 横長の画面のタイトル: 題字とボタンを右の列に（絵の顔に重ねない）。説明は帯の上で読める */
@media (min-width: 700px) and (min-aspect-ratio: 11/10) {
	.kk-title { align-items: flex-end; justify-content: center; padding: 0 5% 0 0; }
	.kk-title__logo { left: auto; right: 5%; width: 380px; top: 8%; }
	.kk-title__btns { width: 380px; max-width: 380px; margin-top: 150px; }
	.kk-title__note { width: 380px; padding: 8px 10px; border-radius: 12px; background: rgba(23,52,84,.62); }
}

/* V11 始めの3匹を選ぶ場面 */
.kk-st__wrap { max-width: 760px; margin: 0 auto; }
.kk-st__kv { border-radius: 18px; overflow: hidden; border: 3px solid var(--kk-navy); margin-bottom: 8px; }
.kk-st__kv img { display: block; width: 100%; }
.kk-st__lead { font-size: 16px; font-weight: 800; color: var(--kk-navy); line-height: 1.6; margin: 4px 0 10px; }
.kk-st__row { display: grid; gap: 10px; }
@media (min-width: 640px) { .kk-st__row { grid-template-columns: repeat(3, 1fr); } }
.kk-st { position: relative; display: grid; grid-template-columns: 96px 1fr; grid-template-areas: 'img name' 'img ters' 'img txt' 'evo evo'; column-gap: 10px; row-gap: 3px; align-items: center; min-height: 140px; padding: 10px 12px; border: 4px solid var(--st); border-radius: 18px; background: #fff; text-align: left; font-family: var(--kk-font); color: var(--kk-ink); box-shadow: 0 4px 0 var(--st); cursor: pointer; }
@media (min-width: 640px) { .kk-st { grid-template-columns: 1fr; grid-template-areas: 'img' 'name' 'ters' 'txt' 'evo'; text-align: center; } }
.kk-st:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--st); }
.kk-st img { grid-area: img; width: 96px; height: 96px; object-fit: contain; justify-self: center; animation: kkBob .8s ease-in-out infinite alternate; }
@media (min-width: 640px) { .kk-st img { width: 150px; height: 150px; } }
.kk-st b { grid-area: name; font-size: 19px; }
.kk-st__kind { position: absolute; top: -12px; left: 12px; padding: 1px 10px; border-radius: 10px; background: var(--st); color: #fff; font-size: 14px; font-weight: 800; }
.kk-st__ters { grid-area: ters; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
@media (min-width: 640px) { .kk-st__ters { justify-content: center; } }
.kk-st small { grid-area: txt; font-size: 14px; line-height: 1.5; color: #44546a; }
.kk-st em { grid-area: evo; font-style: normal; font-size: 14px; color: #6b7a8c; }
/* V11 進化先の絵が届くまでの代わり（元の種の絵を少し大きく・色を変える） */
img[src$="#fb"] { filter: hue-rotate(28deg) saturate(1.25); transform: scale(1.08); }
/* X4 進化の場面の代わりの絵: 大きく・向きを変え・光の輪と冠 */
.kk-evo.is-born .kk-evo__c.is-fb { transform: scale(1.22) scaleX(-1); filter: hue-rotate(28deg) saturate(1.35) drop-shadow(0 0 14px rgba(255, 214, 90, .9)); }
.kk-fbdeco { position: absolute; left: 50%; top: 2%; width: 46%; height: 16%; margin-left: -23%; border: 5px solid rgba(255, 224, 102, .95); border-radius: 50%; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.kk-evo.is-born .kk-fbdeco { opacity: 1; }
.kk-walk__mon.is-fb { filter: hue-rotate(28deg) saturate(1.3) drop-shadow(0 0 8px rgba(255, 214, 90, .9)); transform: scale(1.2); }
/* ===== V2 10/15 監督型のレース画面: 上の帯（順位・差・残り・今とつぎの地形・スタミナ・大差）と、光る交代の枠と特技 ===== */
.kk-rh { gap: 5px; }
.kk-rh__row { flex-wrap: nowrap; }
.kk-rh__gap, .kk-rh__left { padding: 4px 8px; border-radius: 10px; background: rgba(23,52,84,.86); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kk-rh__gap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kk-rh__segs i.is-up { background-image: linear-gradient(135deg, rgba(255,255,255,.45) 0 35%, transparent 35%) !important; }
.kk-rh__segs i.is-down { background-image: linear-gradient(225deg, rgba(255,255,255,.45) 0 35%, transparent 35%) !important; }
.kk-rh__now { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.kk-rh__ter, .kk-rh__next { display: flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; border-radius: 12px; background: rgba(255,250,240,.94); border: 2px solid var(--kk-navy); font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--kk-navy); }
.kk-rh__ter small, .kk-rh__next small { font-size: 14px; color: #44546a; }
.kk-rh__next em { font-style: normal; font-size: 14px; color: #44546a; }
.kk-rh__next.is-bad { background: #ffe0d8; border-color: #e2574c; animation: kkBlink 1s infinite; }
.kk-rh__sta { flex: 1 1 60px; min-width: 50px; height: 14px; border-radius: 8px; background: rgba(255,255,255,.35); border: 2px solid var(--kk-navy); overflow: hidden; }
.kk-rh__sta i { display: block; height: 100%; background: linear-gradient(90deg, #4cc9a0, #9be86a); transition: width .1s; }
.kk-rh__sta.is-low i { background: linear-gradient(90deg, #ffb627, #ffd23f); }
.kk-rh__sta.is-exh i { background: #ff5f5f; }
.kk-rh__sta.is-low, .kk-rh__sta.is-exh { animation: kkBlink .7s infinite; }
.kk-rh__big { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; background: rgba(23,52,84,.88); color: #ffe27a; font-size: 15px; font-weight: 800; }
.kk-rh__big[hidden] { display: none; }
.kk-rh__big span { height: 12px; border-radius: 7px; background: rgba(255,255,255,.25); overflow: hidden; }
.kk-rh__big i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #9be86a); }
.kk-rh__big.is-near { color: #9be86a; }
.kk-rhint { top: calc(max(8px, env(safe-area-inset-top)) + 118px); white-space: normal; width: max-content; line-height: 1.4; }   /* 長い手引きは折り返す（360 で切れない） */
.kk-rhint.is-tip { background: var(--kk-coral); }
.kk-slot__apt { display: flex; align-items: center; gap: 1px; padding: 0 4px 0 1px; }
.kk-slot__apt .kk-ico { width: 18px; height: 18px; }
.kk-slot.is-tip { border-color: #ffd23f; box-shadow: 0 0 0 3px #ffd23f, 0 0 18px 6px rgba(255,210,63,.85); animation: kkTip .7s infinite alternate; }
.kk-rb__skill small { font-size: 14px; }
.kk-rb__skill.is-tip { box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255,210,63,.95); animation: kkTip .7s infinite alternate; }
.kk-skp button.is-tip { border-color: #ffb627; background: #fff4c4; }
@keyframes kkTip { from { transform: translateY(0); } to { transform: translateY(-4px); } }
/* はじめての説明（4枚） */
.kk-ov--tut .kk-card { max-width: 420px; }
.kk-tut__no { display: block; font-size: 14px; color: #44546a; font-weight: 800; }
.kk-tut { position: relative; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 120px; margin: 6px 0; border-radius: 14px; background: linear-gradient(180deg, #cdeefe, #e9f8ff 60%, #8bd06a 60%, #6fb84f); overflow: hidden; }
.kk-tut__lane { position: absolute; inset: 0; }
.kk-tut--run img { position: absolute; bottom: 30px; width: 90px; height: 90px; object-fit: contain; animation: kkTutRun 2.4s linear infinite; }
@keyframes kkTutRun { from { left: -90px; } to { left: 100%; } }
.kk-tut--ter span { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.92); font-weight: 800; color: var(--kk-navy); }
.kk-tut--ter i { display: block; width: 70px; height: 8px; border-radius: 4px; background: #dfe6ee; overflow: hidden; position: relative; }
.kk-tut--ter i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--kk-mint); animation: kkTutBar 1.2s ease-out infinite; }
.kk-tut--ter i.is-slow::after { background: #8c96a3; animation-duration: 2.6s; }
@keyframes kkTutBar { from { width: 0; } to { width: 100%; } }
.kk-tut--swap span, .kk-tut--sk > span { position: relative; display: grid; justify-items: center; padding: 6px; border: 3px solid var(--kk-navy); border-radius: 14px; background: rgba(255,250,240,.95); }
.kk-tut--swap img { width: 64px; height: 64px; object-fit: contain; }
.kk-tut--swap .is-on { background: #fff4c4; }
.kk-tut--swap .is-tip { border-color: #ffd23f; box-shadow: 0 0 0 3px #ffd23f, 0 0 18px 6px rgba(255,210,63,.85); animation: kkTip .7s infinite alternate; }
.kk-tut--swap em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--kk-coral); }
.kk-tut--sk .kk-rb__skill { width: 84px; min-height: 76px; }
.kk-tut__big { display: grid; gap: 4px; width: 50%; padding: 6px 10px; border-radius: 12px; background: rgba(23,52,84,.9) !important; color: #ffe27a; font-size: 14px; border: none !important; }
.kk-tut__big i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #ffd23f, #9be86a); animation: kkTutBar 2s ease-out infinite; }
.kk-tut__btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 8px; }
@media (max-width: 380px) { .kk-rh__gap, .kk-rh__left { padding: 4px 6px; } .kk-rh__now { gap: 4px; } .kk-rh__ter, .kk-rh__next { padding: 2px 5px 2px 3px; gap: 2px; } .kk-rh__ter .kk-ico, .kk-rh__next .kk-ico { width: 20px; height: 20px; } .kk-rh__sta { min-width: 36px; } }   /* ✕C 360 でも「ゴール45m」「20m」を出す（隠さず詰める） */
.kk-skb { top: calc(max(8px, env(safe-area-inset-top)) + 168px); } .kk-skb.is-foe { top: calc(max(8px, env(safe-area-inset-top)) + 214px); }   /* ✕G 特技の札が名札に重ならないよう上へ */
.kk-slot.is-resv { border-color: #4cc9a0; box-shadow: 0 0 0 3px #4cc9a0; }
.kk-slot.is-resv::after { content: '予約'; position: absolute; left: 4px; top: 2px; white-space: nowrap; padding: 0 6px; border-radius: 8px; background: #4cc9a0; color: #fff; font-size: 14px; font-weight: 800; }   /* ✕6 交代の予約 */

/* Adventure notebook: current goal, active team, then destinations. */
.kk-journal{background:linear-gradient(160deg,#edf8f4,#faf5e9 70%)}
.kk-journal .kk-sheet__head{background:#213e46;border-bottom:1px solid #ffffff26;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px}
.kk-journal .kk-sheet__head button{border:1px solid #ffffff50;background:#ffffff14;color:#fff;box-shadow:none;font-weight:700}
.kk-journal .kk-sheet__body{padding:14px 14px max(16px,env(safe-area-inset-bottom))}
.kk-journal-hero{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;border-radius:18px;padding:16px;background:linear-gradient(125deg,#2e685d,#21434b);color:#fff;box-shadow:0 6px 18px #21434b1a}
.kk-journal-hero small{font-size:12px;color:#c7e9d6}.kk-journal-hero h3{font-size:18px!important;margin:4px 0!important;color:#fff!important;line-height:1.3}
.kk-journal-hero p{flex-basis:100%;font-size:14px;line-height:1.6;margin:3px 0 0;padding-top:10px;border-top:1px solid #ffffff30}
.kk-journal-money{font-size:20px;font-weight:800;color:#ffe4a0;white-space:nowrap}.kk-journal-money small{color:inherit}
.kk-journal-label{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;gap:8px}.kk-journal-label h3{margin:0!important;font-size:15px!important}.kk-journal-label button{min-height:36px;border:0;background:none;color:#32695d;font:700 13px var(--kk-font);padding:4px 0 4px 10px}
.kk-journal-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.kk-journal-roster button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;border:1px solid #c5dbcf;border-radius:15px;padding:5px 4px 9px;background:linear-gradient(#fff,#f4faf5);color:#213e46;font-family:var(--kk-font);box-shadow:0 3px 0 #d8e5da}
.kk-journal-roster img{height:70px;width:90%;object-fit:contain}.kk-journal-roster b{font-size:13px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kk-journal-roster small{font-size:12px;color:#56756a}.kk-journal-roster button>span{position:absolute;top:6px;left:7px;border-radius:50%;width:20px;height:20px;background:#e3efe6;color:#3f6959;font-size:12px;font-weight:800;line-height:20px}
.kk-journal .kk-menu{gap:8px;margin-top:18px}.kk-journal .kk-menu .kk-btn{min-height:62px;padding:10px 8px;border:1px solid #ccd9d0;border-radius:13px;box-shadow:0 2px 0 #d1ddd3;background:#ffffffdb;font-size:15px;text-align:left}
.kk-journal .kk-menu .kk-btn small{font-size:12px;color:#59756a;opacity:1;margin-top:4px}.kk-journal .kk-menu .kk-btn--main{background:#fbe9b4;border-color:#e6c979}
.kk-journal .kk-menu .kk-btn:nth-child(n+7){min-height:44px;font-size:14px;background:#f3f6ef}.kk-journal .kk-menu .kk-btn:nth-child(n+7) small{display:none}
.kk-journal-foot{text-align:center;font-size:12px;color:#637c70;margin:16px 0 0}
.kk-journal button:focus-visible{outline:3px solid #daac38;outline-offset:2px}.kk-journal button:active{transform:translateY(2px)}
@media(max-height:700px){.kk-journal-hero{padding:12px}.kk-journal-roster img{height:52px}.kk-journal .kk-menu{margin-top:14px}.kk-journal .kk-menu .kk-btn{min-height:56px}.kk-journal-label{margin-top:12px}}
/* A single readable race panel and a clear team-switching tray. */
.kk-hud__menu{border:1px solid #94b2a3;background:#f8fcf0f2;color:#23443b;box-shadow:0 3px 8px #21433b20;border-radius:13px;font-size:14px}
.kk-hud__goal,.kk-hud__place{background:#21483ce0;backdrop-filter:blur(5px);border:1px solid #ffffff40;border-radius:12px}
.kk-pad button{border:1px solid #537665c9;background:#f4faefe6;color:#2e5145;box-shadow:0 3px 6px #21443c30;border-radius:16px}
.kk-pad button.is-on{background:#f1d68e;box-shadow:0 1px 2px #21443c30}
.kk-ab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #779a87;box-shadow:0 4px 8px #21443b35;color:#23453c}
.kk-ab .a{background:#f3d78ff2}.kk-ab .b{background:#eff7eaf2}.kk-ab button b{font-size:21px;line-height:1.1}.kk-ab button small{font-size:10px;line-height:1.2;font-weight:700}
.kk-journal .kk-sheet__body{padding-left:max(14px,calc(50% - 390px));padding-right:max(14px,calc(50% - 390px))}
.kk-rh{left:10px;right:10px;padding:9px 10px;background:#163f46eb;border:1px solid #ffffff54;border-radius:17px;box-shadow:0 5px 16px #193b4126;gap:5px;backdrop-filter:blur(8px);color:#fff}
.kk-rh__row{display:grid;grid-template-columns:58px minmax(0,1fr) 44px;grid-template-rows:23px 21px;gap:0 9px}
.kk-rh__place{grid-column:1;grid-row:1/3;align-self:stretch;display:grid;place-items:center;min-width:0;padding:3px;border:0;border-radius:11px;background:#f2cc79;color:#253e40;font-size:19px}
.kk-rh__gap{grid-column:2;grid-row:1;padding:0;background:none;font-size:15px;align-self:end;line-height:1.5}
.kk-rh__left{grid-column:2;grid-row:2;padding:0;background:none;font-size:12px;align-self:center;color:#c7e3dd;line-height:1.5}
.kk-rh__pause{grid-column:3;grid-row:1/3;width:44px;height:44px;margin:0;border:1px solid #ffffff42;border-radius:11px;background:#ffffff15;color:#fff;box-shadow:none;font-size:17px}
.kk-rh__flag{display:block;grid-column:1;grid-row:1/3;width:30px;height:30px;align-self:center}
.kk-rh__row:has(.kk-rh__flag){grid-template-columns:30px 50px minmax(0,1fr) 44px;column-gap:7px}
.kk-rh__row:has(.kk-rh__flag) .kk-rh__place{grid-column:2}
.kk-rh__row:has(.kk-rh__flag) .kk-rh__gap,.kk-rh__row:has(.kk-rh__flag) .kk-rh__left{grid-column:3}
.kk-rh__row:has(.kk-rh__flag) .kk-rh__pause{grid-column:4}
.kk-rh__left{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kk-rh__bar{height:17px;margin:0 3px}.kk-rh__segs{top:5px;height:7px;border:0;border-radius:5px}.kk-rh__dots{height:17px;left:5px;right:5px}.kk-rh__dots i{width:12px;height:12px;border-width:2px;top:2px;margin-left:-6px}.kk-rh__dots i.is-me{width:16px;height:16px;top:0;margin-left:-8px;border-color:#fff9d0}
.kk-rh__now{gap:6px;justify-content:space-between}.kk-rh__ter,.kk-rh__next{border:0;border-radius:8px;padding:3px 6px;background:#f7faf0;min-width:0;font-size:13px;gap:3px}.kk-rh__ter small,.kk-rh__next small,.kk-rh__next em{font-size:12px}.kk-rh__now .kk-ico{width:22px;height:22px}.kk-rh__sta{display:none}.kk-rh__next.is-bad{background:#f8dac9;animation:none;box-shadow:inset 0 0 0 1px #e6a789}
.kk-rh__big{background:none;padding:1px 0 0;font-size:13px;gap:8px;border-top:1px solid #ffffff24;padding-top:6px}.kk-rh__big span{height:7px}.kk-rhint{top:calc(max(8px,env(safe-area-inset-top)) + 155px);font-size:14px;background:#173c42e8;max-width:92%;white-space:normal}
.kk-rb{left:9px;right:9px;bottom:max(9px,env(safe-area-inset-bottom));padding:9px;background:#173f46eb;backdrop-filter:blur(8px);border:1px solid #ffffff60;border-radius:19px;gap:8px;box-shadow:0 5px 20px #173f4633}
.kk-rb__label{display:flex;justify-content:space-between;align-items:center;gap:6px;color:#e1eee1;font-size:12px;line-height:1.4;padding:0 2px}.kk-rb__label small{font-size:10px;color:#bbd6cc}
.kk-rb__row{gap:7px}.kk-rb__slots{gap:6px}.kk-slot{min-height:85px;border:1px solid #d5e2d5;border-radius:12px;padding:4px 2px 10px;box-shadow:none;background:#f4f8ef}.kk-slot img{width:48px;height:48px}.kk-slot b{font-size:13px;line-height:1.3}.kk-slot.is-on{border:2px solid #e4ba59;background:#fff2c7;box-shadow:0 0 0 1px #ffe7a455}.kk-slot.is-on::before{font-size:10px;top:-7px;line-height:1.5;color:#23413a;background:#f5d987;padding:0 6px}.kk-slot i{height:4px;bottom:4px}.kk-slot__apt{top:2px;right:2px}.kk-slot__apt .kk-ico{width:17px;height:17px}.kk-slot__apt .kk-apt{font-size:11px}
.kk-rb__skill{width:65px;border:1px solid #e4ba59;border-radius:12px;box-shadow:none;background:linear-gradient(#ffebb1,#f2cc79)}.kk-rb__skill b{font-size:14px}.kk-rb__skill small{font-size:11px}.kk-rb__skill .kk-ico{width:32px;height:32px}.kk-skp{bottom:calc(155px + env(safe-area-inset-bottom));border:1px solid #9cb7a5;box-shadow:0 10px 35px #12363855}
@media(min-width:700px){.kk-rh{left:20px;right:auto;width:375px}.kk-rb{left:50%;right:auto;transform:translateX(-50%);width:440px}.kk-rhint{top:175px;left:20px;transform:none;width:375px}.kk-rhint.is-jump{animation:none}}
@media(max-width:350px){.kk-rh{padding:8px;left:6px;right:6px}.kk-rh__row{grid-template-columns:50px minmax(0,1fr) 44px;column-gap:7px}.kk-rh__next em{font-size:11px}.kk-rh__now{gap:4px}.kk-rh__ter,.kk-rh__next{padding:3px 4px;gap:2px}.kk-rb{left:6px;right:6px;padding:7px}.kk-rb__label small{display:none}.kk-rb__skill{width:59px}}
@media(orientation:landscape) and (max-height:520px){.kk-rh{left:8px;right:auto;width:285px;transform:none;transform-origin:top left}.kk-rb{left:auto;right:8px;transform:none;width:310px;padding:7px;bottom:8px}.kk-rb__label small{display:none}.kk-rhint{left:8px;top:145px;transform:none;font-size:12px;max-width:225px}.kk-slot{min-height:70px}.kk-slot img{height:34px;width:34px}.kk-rb__skill{width:59px}.kk-skp{bottom:118px}.kk-rh__now .kk-ico{width:20px;height:20px}.kk-bal{top:135px}}
@media(prefers-reduced-motion:reduce){.kk-rhint,.kk-slot,.kk-rb__skill{animation:none!important}}

/* Handheld roster and course briefing, 2026-10-18. */
.kk-rb__slots{display:flex!important;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:none;gap:6px;padding:4px 2px 7px}
.kk-rb__slots .kk-slot{flex:0 0 86px;min-width:86px;max-width:110px;touch-action:none}
.kk-rb__slots.is-one .kk-slot{flex:1;max-width:none}
.kk-rb__label{gap:5px;flex-wrap:wrap;align-items:center}
.kk-roster-nav{display:flex;gap:4px;margin-left:auto}
.kk-roster-nav button{font:800 24px/1 sans-serif;min-width:36px;min-height:32px;border:1px solid #94b5c8;border-radius:9px;background:#fff;color:#17445b;touch-action:manipulation}
.kk-prep-distance{display:flex;justify-content:space-between;font-size:20px;font-weight:800;color:#17445b;margin:8px 0}
.kk-prep-distance span{font-size:15px}
.kk-prep-course{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:10px 0 16px}
.kk-prep-course li{display:flex;align-items:center;gap:3px;font-size:14px;background:#eef5fa;border:1px solid #c8dce8;padding:5px;border-radius:8px}
.kk-prep-course li:not(:last-child):after{content:'›';margin-left:4px;color:#587285}
.kk-raceprep .kk-card{max-width:620px;padding:18px;scrollbar-gutter:stable}
.kk-raceprep h3{font-size:18px;margin:10px 0 5px}
.kk-prep-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kk-prep-mon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:112px;border:2px solid #b9ccd8;border-radius:14px;background:#fff;color:#17445b;padding:6px;font:inherit;cursor:pointer;touch-action:manipulation}
.kk-prep-mon img{width:54px;height:54px;object-fit:contain}
.kk-prep-mon b{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.kk-prep-mon small{font-size:12px;margin-top:3px}
.kk-prep-mon.is-selected{border-color:#14807b;background:#e7f8ef;box-shadow:0 0 0 2px #14807b}
.kk-prep-mon.is-selected:before{content:'先頭';position:absolute;top:3px;left:3px;background:#126c64;color:#fff;font-size:11px;border-radius:5px;padding:2px 5px}
.kk-prep-choice{font-size:15px;font-weight:800;color:#126c64;margin:12px 0}
.kk-prep-go{position:sticky;bottom:0;width:100%;box-shadow:0 3px 10px #1234}
.kk-prep-foes{margin-top:12px;font-size:14px}
.kk-raceprep button:focus-visible,.kk-rb button:focus-visible{outline:3px solid #e88613;outline-offset:3px}
@media(min-width:700px) and (min-height:600px){.kk-rb__slots .kk-slot{flex-basis:100px}}
@media(max-height:500px){.kk-raceprep .kk-card{max-width:720px}.kk-prep-team{grid-template-columns:repeat(6,minmax(0,1fr))}.kk-prep-mon{min-height:95px}.kk-prep-mon img{width:42px;height:42px}.kk-rb__slots .kk-slot{flex-basis:78px;min-width:78px}.kk-roster-nav button{min-height:28px}}

.kk-rb{grid-template-columns:minmax(0,1fr)}
.kk-rb__row,.kk-rb__label{min-width:0}
.kk-raceprep .kk-info{font-size:14px;line-height:1.5;margin:6px 0}
.kk-raceprep .kk-prep-choice{margin:8px 0}
.kk-raceprep .kk-prep-team{margin-bottom:6px}

.kk-hud__journal{pointer-events:auto;flex-shrink:0;background:#fff4d6;color:#51402d;border:1px solid #bda478;border-radius:12px;min-height:44px;padding:8px 11px;font:700 14px/1.3 inherit;cursor:pointer;box-shadow:0 2px 8px #0002}.kk-hud__l{min-width:0}.kk-adventures{display:flex;overflow-x:auto;gap:8px;padding:4px 0 12px;scrollbar-width:thin}.kk-adventures button{flex:0 0 165px;white-space:normal;min-height:48px;border:1px solid #bda982;border-radius:9px;background:#f8eed9;color:#4c402e;font:700 14px/1.5 sans-serif;padding:10px;text-align:left}.kk-adventures button[aria-pressed=true]{background:#42634c;color:#fff;border-color:#42634c}.kk-adventure{max-width:700px;margin:auto;color:#443c30}.kk-adventure h3{font-size:24px;margin:6px 0 14px}.kk-adventure__eyebrow{font-size:14px;color:#5e694c;margin:12px 0 0}.kk-adventure__map{border:3px solid #c0a778;border-radius:10px;overflow:hidden;background:#e3d7b8;max-width:460px;margin:auto}.kk-adventure__map svg{display:block;width:100%;height:auto}.kk-adventure__steps{padding:0 0 0 26px;margin:20px 0;counter-reset:step}.kk-adventure__steps li{padding:12px 12px 12px 8px;border-bottom:1px solid #cbbd9e;font-size:15px;line-height:1.65}.kk-adventure__steps li.is-current{background:#fff0bf;border-radius:10px}.kk-adventure__steps li.is-done{color:#47644e}.kk-adventure__steps b{font-size:16px}.kk-adventure__steps p{margin:6px 0}.kk-adventure__steps .kk-btn{min-height:44px;font-size:14px}.kk-hud{gap:5px}@media(max-width:420px){.kk-hud__journal{padding:6px;font-size:12px;max-width:52px}.kk-hud__goal{font-size:12px!important;line-height:1.5}.kk-adventure h3{font-size:21px}.kk-adventure__steps{padding-left:22px}}