/* ネコさがし（2026-09-30）— 全画面のさがし物ゲーム。接頭辞 nk- */
html, body.nkb { margin: 0; height: 100%; overflow: hidden; background: #3b2a1c; overscroll-behavior: none; }
body.nkb { font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif; color: #5a3b1c; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nk, .nk * { box-sizing: border-box; }
.nk { position: fixed; inset: 0; display: flex; justify-content: center; background: repeating-linear-gradient(45deg, #fbe7a6 0 18px, #f7df94 18px 36px); }
.nk button { font-family: inherit; cursor: pointer; touch-action: manipulation; color: inherit; }
.nk-boot { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.nk-boot b { font-size: 28px; font-weight: 900; color: #3b2a1c; text-shadow: 0 3px 0 #fff; }
.nk-boot span { font-size: 14px; color: #8a6a3a; line-height: 1.8; }
.nk-app { position: relative; width: 100%; max-width: 560px; height: 100%; overflow: hidden; background: #fff4d6; }
@media (min-width: 600px) { .nk-app { box-shadow: 0 0 0 4px #fff, 0 12px 40px rgba(80, 50, 20, .3); } }

/* ---- 遊ぶ画面 ---- */
.nk-play { position: absolute; inset: 0; display: flex; flex-direction: column; background: #3b2a1c; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.nk-play[hidden] { display: none; }
.nk-hud { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; background: linear-gradient(180deg, #ffe58a, #ffd35a); box-shadow: 0 2px 0 #d9a93a; position: relative; z-index: 3; }
.nk-ib { flex: none; width: 42px; height: 42px; border-radius: 13px; border: 0; background: #fff; box-shadow: 0 3px 0 #d9a93a; display: flex; align-items: center; justify-content: center; color: #8a5a22; }
.nk-ib:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9a93a; }
.nk-ib svg { width: 20px; height: 20px; }
.nk-tm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.nk-tmbar { flex: 1; height: 14px; border-radius: 99px; background: rgba(90, 59, 28, .18); overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); }
.nk-tmbar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #5fc46a, #8ee08a); transition: width .25s linear; }
.nk-tmbar i.is-mid { background: linear-gradient(90deg, #f0a92a, #ffd35a); }
.nk-tmbar i.is-low { background: linear-gradient(90deg, #e8394b, #ff7a7a); animation: nkBlink .6s infinite alternate; }
@keyframes nkBlink { to { opacity: .55; } }
.nk-tm b { flex: none; min-width: 44px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: #3b2a1c; text-align: right; }
.nk-cnt { flex: none; display: flex; align-items: baseline; gap: 2px; background: #3b2a1c; color: #fff; border-radius: 12px; padding: 5px 10px; }
.nk-cnt b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nk-cnt small { font-size: 10px; opacity: .8; }
.nk-row { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; background: #fff0c4; min-height: 24px; position: relative; z-index: 2; overflow: hidden; }
.nk-dot { width: 16px; height: 16px; opacity: .22; flex: none; }
.nk-dot { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M3 18V6l3-4 2 4h4l2-4 3 4v12z" fill="%233b2a1c"/></svg>') center/contain no-repeat; border-radius: 0; }
.nk-dot.is-on { opacity: 1; filter: drop-shadow(0 0 0 #fff) sepia(1) saturate(4) hue-rotate(-15deg); animation: nkPop .35s ease-out; }
@keyframes nkPop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
.nk-row.is-pls { justify-content: flex-start; gap: 6px; overflow-x: auto; }
.nk-pl { flex: none; display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 99px; padding: 2px 8px 2px 2px; box-shadow: inset 0 0 0 2px var(--c); max-width: 46%; }
.nk-pl img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.nk-pl b { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.nk-pl em { font-style: normal; font-size: 14px; font-weight: 900; color: var(--c); }
.nk-pl.is-me { background: var(--c); } .nk-pl.is-me b, .nk-pl.is-me em { color: #fff; }
.nk-stage { position: relative; flex: 1; min-height: 0; touch-action: none; overflow: hidden; }
.nk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nk-fab { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.nk-fb { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: #5a3b1c; box-shadow: 0 4px 0 #c49a4a, 0 6px 14px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
.nk-fb:active { transform: translateY(3px); box-shadow: 0 1px 0 #c49a4a; }
.nk-fb svg { width: 26px; height: 26px; }
.nk-fb--hint { background: linear-gradient(180deg, #ffe066, #ffc21a); }
.nk-fb--hint.is-empty { filter: grayscale(1); opacity: .6; }
.nk-fb em { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 99px; background: #e8394b; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.nk-fb[hidden] { display: none; }
.nk-cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40, 25, 10, .35); z-index: 6; pointer-events: none; }
.nk-cd[hidden] { display: none; }
.nk-cd b { font-size: 110px; font-weight: 900; color: #fff; -webkit-text-stroke: 10px #3b2a1c; paint-order: stroke fill; animation: nkCd .7s ease-out; }
.nk-cd b.is-go { font-size: 64px; -webkit-text-stroke-color: #e0662a; }
@keyframes nkCd { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }
.nk-ft { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 5; pointer-events: none; white-space: nowrap; font-size: 24px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px #3fae55; paint-order: stroke fill; animation: nkFt 1.3s ease-out forwards; }
.nk-ft.is-bad { -webkit-text-stroke-color: #e8394b; font-size: 20px; }
.nk-ft.is-other { -webkit-text-stroke-color: var(--c, #2f9be0); font-size: 18px; top: 22%; }
@keyframes nkFt { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -30px); opacity: 0; } }
.nk-msg { position: absolute; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; background: rgba(40, 25, 10, .9); color: #fff; font-size: 14px; font-weight: 800; padding: 10px 16px; border-radius: 14px; max-width: 88%; text-align: center; animation: nkIn .2s ease-out; pointer-events: none; }
.nk-msg.is-warn { background: #e8394b; }
.nk-peekbar { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; border: 0; border-radius: 99px; padding: 12px 22px; font-size: 15px; font-weight: 900; background: #fff; box-shadow: 0 4px 0 #c49a4a, 0 6px 16px rgba(0, 0, 0, .3); }

/* ---- 上に重ねる画面 ---- */
.nk-scr { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); animation: nkIn .22s ease-out; }
.nk-scr[hidden] { display: none; }
@keyframes nkIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.nk-scr.is-dim { background: rgba(40, 25, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nk-scr.is-paper { background: #fff4d6; }
.nk-scr.is-title { background: radial-gradient(circle at 50% 18%, #fffbe8 0, transparent 55%), repeating-linear-gradient(45deg, #fbe7a6 0 18px, #f7df94 18px 36px); }
.nk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nk-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.nk-hd { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.nk-hd h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 900; color: #3b2a1c; text-align: center; }
.nk-hd .nk-ib { width: 40px; height: 40px; }
.nk-sp { width: 40px; flex: none; }
.nk-b { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 52px; border: 0; border-radius: 18px; font-size: 17px; font-weight: 900; color: #fff !important; background: linear-gradient(180deg, #ff9a4a, #f0702a); box-shadow: 0 5px 0 #c4541a, 0 8px 16px rgba(196, 84, 26, .25); text-decoration: none; letter-spacing: .5px; line-height: 1.25; padding: 6px 12px; }
.nk-b:active { transform: translateY(3px); box-shadow: 0 2px 0 #c4541a; }
.nk-b small { font-size: 11.5px; font-weight: 800; opacity: .92; letter-spacing: 0; }
.nk-b--sub { color: #8a5a22 !important; background: #fff; box-shadow: 0 5px 0 #e2b866, 0 8px 16px rgba(120, 70, 20, .1); }
.nk-b--sub:active { box-shadow: 0 2px 0 #e2b866; }
.nk-b--green { background: linear-gradient(180deg, #6ad07a, #3fae55); box-shadow: 0 5px 0 #2f8a41, 0 8px 16px rgba(47, 138, 65, .25); }
.nk-b--blue { background: linear-gradient(180deg, #5ab8f0, #2f8fd8); box-shadow: 0 5px 0 #226ea8, 0 8px 16px rgba(34, 110, 168, .25); }
.nk-b--x { background: linear-gradient(180deg, #333, #111); box-shadow: 0 5px 0 #000; min-height: 44px; font-size: 15px; }
.nk-b--s { min-height: 40px; font-size: 14px; border-radius: 14px; }
.nk-b[disabled] { opacity: .5; filter: grayscale(.5); }
.nk-2 { display: flex; gap: 8px; } .nk-2 > * { flex: 1; }
.nk-link { display: block; margin: 10px auto 0; border: 0; background: none; font-size: 13px; font-weight: 800; color: #fff; text-decoration: underline; }
.is-paper .nk-link { color: #8a5a22; }
.nk-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 3px 0 #efd9a8; margin: 0 0 12px; }
.nk-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: #3b2a1c; }
.nk-card p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.7; }
.nk-card .nk-b + .nk-b { margin-top: 10px; }
.nk-center { text-align: center; }
.nk-note { font-size: 12px; color: #8a6a3a; line-height: 1.6; margin: 6px 0; }
.is-dim .nk-note { color: #ffe9b8; }
.nk-big { font-size: 22px; font-weight: 900; color: #e0662a; }

/* タイトル */
.nk-title { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
.nk-title__art { position: relative; width: min(64vw, 250px); height: min(40vw, 150px); flex: none; }
.nk-title__art img { position: absolute; width: 40%; filter: drop-shadow(0 4px 0 rgba(90, 59, 28, .18)); animation: nkBob 2.4s ease-in-out infinite; }
.nk-title__art .c1 { left: 0; bottom: 0; } .nk-title__art .c2 { left: 30%; bottom: 12%; width: 44%; animation-delay: .4s; } .nk-title__art .c3 { right: 0; bottom: 0; animation-delay: .8s; }
@keyframes nkBob { 50% { transform: translateY(-6px); } }
.nk-lens { position: absolute; right: -6%; top: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 8px solid #ffc21a; background: rgba(220, 245, 255, .45); box-shadow: 0 3px 0 #b8862a; animation: nkLens 3s ease-in-out infinite; }
.nk-lens::after { content: ''; position: absolute; right: -40%; bottom: -34%; width: 50%; height: 16px; background: #5a3b1c; border-radius: 8px; transform: rotate(45deg); }
@keyframes nkLens { 50% { transform: translate(-30%, 10%) rotate(-8deg); } }
.nk-logo { margin: 8px 0 2px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.nk-logo img { width: min(84vw, 380px); }
.nk-logo__a { font-size: 20px; font-weight: 900; color: #fff; background: #3b2a1c; border-radius: 99px; padding: 5px 16px 4px; letter-spacing: 2px; transform: rotate(-3deg); }
.nk-logo__b { margin-top: 6px; font-size: clamp(30px, 10.5vw, 46px); font-weight: 900; color: #ffd23f; -webkit-text-stroke: 7px #3b2a1c; paint-order: stroke fill; letter-spacing: 1px; white-space: nowrap; text-shadow: 0 4px 0 #3b2a1c; }
.nk-sub { margin: 10px 0 0; font-size: 13px; font-weight: 800; color: #6b4a2c; }
.nk-mebar { display: flex; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 800; }
.nk-mebar span { background: #fff; border-radius: 99px; padding: 4px 10px; box-shadow: 0 2px 0 #efd9a8; }
.nk-mebar b { color: #e0662a; }
/* SGC1002 ガチャの入口とレアの印 */
.nk-gcpill { position: relative; border: 0; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff8aa8, #ffb84d); box-shadow: 0 2px 0 #d9608a; cursor: pointer; }
.nk-gcpill .nk-gcdot { position: absolute; top: -4px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #e8394b; box-shadow: 0 0 0 2px #fff; }
.nk-gcpill .nk-gcdot[hidden] { display: none; }
.nk-gcbar { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; border: 0; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 12px; font-weight: 800; text-align: left; color: #8a5a22; background: linear-gradient(90deg, #fff4fa, #fff8e6); box-shadow: 0 3px 0 #f0a8c8; cursor: pointer; }
.nk-gcbar b { color: #d0408a; font-size: 13.5px; }
.nk-gtag { display: inline-block; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 9.5px; line-height: 1.5; color: #fff; background: #b3a08a; vertical-align: 1px; }
.nk-gtag--r { background: linear-gradient(90deg, #4aa8ff, #8f6bff); }
.nk-gtag--sr { background: linear-gradient(90deg, #b46bff, #ff5fb2); }
.nk-gtag--ur { background: linear-gradient(90deg, #ff7a7a, #ffd36e, #7ee08a, #6ec8ff, #b98bff); color: #4a2a10; }
/* SGC1002b ネコ図鑑のカード */
.nk-zksec { margin-top: 14px; }
.nk-zkn { font-size: 12px; color: #e0662a; margin-left: 4px; }
.nk-zk { position: relative; display: block; width: 46px; height: 58px; border-radius: 9px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 0 #e2b866, 0 0 0 1px rgba(138, 90, 34, .25); margin: 2px auto; font-style: normal; }
.nk-zk img { position: absolute; left: 50%; bottom: -2px; width: 118%; transform: translateX(-50%); }
.nk-zk em { position: absolute; right: 1px; bottom: 0; font-size: 16px; line-height: 1; font-style: normal; filter: drop-shadow(0 1px 0 #fff); }
.nk-zk--q { background: #f1e6cf; color: #c9b48a; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.nk-zk--none { background: repeating-linear-gradient(45deg, #fbf3e2 0 6px, #f1e6cf 6px 12px); }
.nk-item.is-lock { opacity: .55; cursor: default; }
.nk-zk.is-pv { width: 74%; height: 92%; margin: 4% auto 0; }
.nk-zk.is-pv em { font-size: 20px; }
.sgc-pv--zk { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fffaf0, #efe6d8); border-radius: 12px; }
.nk-menu { gap: 10px; }
.nk-icons { display: flex; justify-content: space-between; gap: 4px; margin-top: 2px; }
.nk-icons button { position: relative; flex: 1; border: 0; background: #fff; border-radius: 14px; box-shadow: 0 3px 0 #e2b866; padding: 6px 0 5px; font-size: 10.5px; font-weight: 900; color: #8a5a22; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nk-icons em { position: absolute; top: -5px; right: 2px; background: #e8394b; color: #fff; font-style: normal; font-size: 10px; border-radius: 99px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.nk-ic { display: block; width: 24px; height: 24px; background: center/contain no-repeat; }
.nk-ic--rank { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h14v4a7 7 0 0 1-14 0z" fill="%23ffc21a" stroke="%235a3b1c" stroke-width="1.6"/><path d="M9 14h6l1 4H8z" fill="%23ffc21a" stroke="%235a3b1c" stroke-width="1.6"/><rect x="6" y="18" width="12" height="3" rx="1" fill="%235a3b1c"/></svg>'); }
.nk-ic--quest { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="3" fill="%23fff" stroke="%235a3b1c" stroke-width="1.6"/><path d="M8 9l2 2 4-4M8 16h8" stroke="%233fae55" stroke-width="2" fill="none" stroke-linecap="round"/></svg>'); }
.nk-ic--shop { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20s-8-5-8-10a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 10c0 5-8 10-8 10z" fill="%23f28bb5" stroke="%235a3b1c" stroke-width="1.6"/></svg>'); }
.nk-ic--help { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="%235ab8f0" stroke="%235a3b1c" stroke-width="1.6"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.5v.7" stroke="%23fff" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="17" r="1.2" fill="%23fff"/></svg>'); }
.nk-ic--set { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%23c8b8a0" stroke="%235a3b1c" stroke-width="1.6" stroke-dasharray="4 2"/><circle cx="12" cy="12" r="3.5" fill="%23fff" stroke="%235a3b1c" stroke-width="1.6"/></svg>'); }
.nk-ic--pinch, .nk-ic--drag, .nk-ic--tap { width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 50%; background-color: #fff0c4; background-size: 70%; }
.nk-ic--pinch { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M8 8l8 8M32 32l-8-8M8 8h5M8 8v5M32 32h-5M32 32v-5" stroke="%235a3b1c" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="16" cy="16" r="3" fill="%23ff7a3d"/><circle cx="24" cy="24" r="3" fill="%23ff7a3d"/></svg>'); }
.nk-ic--drag { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M20 5v30M5 20h30M20 5l-4 4M20 5l4 4M20 35l-4-4M20 35l4-4M5 20l4-4M5 20l4 4M35 20l-4-4M35 20l-4 4" stroke="%235a3b1c" stroke-width="3" fill="none" stroke-linecap="round"/><circle cx="20" cy="20" r="4" fill="%23ff7a3d"/></svg>'); }
.nk-ic--tap { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M11 32V18l4-5 3 5h4l3-5 4 5v14z" fill="%233b2a1c"/><circle cx="20" cy="22" r="13" fill="none" stroke="%23ff7a3d" stroke-width="3"/></svg>'); }
.nk-back { display: block; text-align: center; font-size: 12.5px; font-weight: 800; color: #8a5a22; margin-top: 2px; }

/* 読み込み */
.nk-load { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nk-load__cat { width: 64px; height: 64px; border-radius: 50%; border: 7px solid #ffc21a; border-top-color: #3b2a1c; animation: nkSpin .9s linear infinite; }
@keyframes nkSpin { to { transform: rotate(360deg); } }
.nk-load b { font-size: 18px; font-weight: 900; } .nk-load span { font-size: 13px; color: #8a6a3a; }

/* はじまりの案内 */
.nk-intro { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nk-intro__tag { display: inline-block; background: #3b2a1c; color: #fff; font-weight: 900; font-size: 15px; border-radius: 99px; padding: 6px 16px; }
.nk-intro__cats { display: flex; justify-content: center; gap: 4px; margin: 12px 0 6px; }
.nk-intro__cats img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(90, 59, 28, .15)); }
.nk-intro p { margin: 4px 0; font-size: 15px; }
.nk-intro b { color: #e0662a; }
.nk-tut { display: flex; gap: 6px; margin: 12px 0 0; width: 100%; }
.nk-tut > div { flex: 1; background: #fff; border-radius: 16px; padding: 10px 4px; box-shadow: 0 3px 0 #efd9a8; }
.nk-tut b { font-size: 12px; font-weight: 900; display: block; text-align: center; }

/* 結果 */
.nk-res { display: flex; flex-direction: column; justify-content: center; }
.nk-res__hd { text-align: center; font-size: 30px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px #3fae55; paint-order: stroke fill; margin: 4px 0 10px; animation: nkCd .6s ease-out; }
.nk-res__hd.is-fail { -webkit-text-stroke-color: #8a5a22; }
.nk-stars { display: flex; justify-content: center; gap: 6px; margin: 0 0 10px; }
.nk-st { width: 54px; height: 54px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z" fill="%23ffffff" fill-opacity=".25" stroke="%23fff" stroke-width="1.2"/></svg>') center/contain no-repeat; }
.nk-st.is-on { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z" fill="%23ffd23f" stroke="%233b2a1c" stroke-width="1.2"/></svg>'); animation: nkStar .5s var(--d) ease-out both; }
.nk-st:nth-child(2) { transform: translateY(-10px); }
@keyframes nkStar { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.nk-res__nums { display: flex; gap: 8px; margin: 0 0 12px; }
.nk-res__nums > div { flex: 1; background: #fff; border-radius: 16px; padding: 10px 4px; text-align: center; box-shadow: 0 3px 0 #efd9a8; }
.nk-res__nums small { display: block; font-size: 11px; font-weight: 800; color: #8a6a3a; }
.nk-res__nums b { font-size: 22px; font-weight: 900; color: #3b2a1c; } .nk-res__nums i { font-style: normal; font-size: 13px; color: #8a6a3a; }
.nk-quest-cta { display: block; width: 100%; border: 0; font-size: 14px; font-weight: 900; color: #3fae55; }
.nk-board { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nk-board li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 7px 10px; box-shadow: 0 2px 0 #efd9a8, inset 4px 0 0 var(--c, transparent); position: relative; }
.nk-board li.is-me { background: #fff0c4; }
.nk-board img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: #fff4d6; }
.nk-board b { flex: 1; min-width: 0; font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-board em { font-style: normal; font-size: 14px; font-weight: 900; color: #e0662a; white-space: nowrap; }
.nk-no { width: 26px; text-align: center; font-size: 16px; font-weight: 900; color: #8a5a22; flex: none; }
.nk-crown { position: absolute; left: 34px; top: -8px; width: 22px; height: 16px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"><path d="M2 14V4l5 5 5-8 5 8 5-5v10z" fill="%23ffd23f" stroke="%233b2a1c" stroke-width="1.4"/></svg>') center/contain no-repeat; }

/* 面えらび */
.nk-lvsec { margin: 0 0 14px; }
.nk-lvsec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.nk-lvsec h3 i { width: 16px; height: 16px; border-radius: 5px; box-shadow: 0 0 0 2px #3b2a1c; }
.nk-lvgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nk-lv { border: 0; background: #fff; border-radius: 16px; min-height: 64px; box-shadow: 0 4px 0 #e2b866; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.nk-lv b { font-size: 20px; font-weight: 900; color: #3b2a1c; }
.nk-lv span { display: flex; gap: 1px; }
.nk-lv span i { width: 13px; height: 13px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z" fill="%23e8dcc4"/></svg>') center/contain no-repeat; }
.nk-lv span i.is-on { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7L12 17.6 5.7 21.1l1.5-7L2 9.3l7-.8z" fill="%23ffc21a" stroke="%235a3b1c" stroke-width="1.5"/></svg>'); }
.nk-lv.is-next { background: linear-gradient(180deg, #ff9a4a, #f0702a); box-shadow: 0 4px 0 #c4541a; animation: nkNext 1.4s ease-in-out infinite; }
.nk-lv.is-next b { color: #fff; }
@keyframes nkNext { 50% { transform: translateY(-3px); } }
.nk-lv.is-lock { opacity: .45; box-shadow: 0 4px 0 #d8c8a8; }

/* 友だちと・部屋 */
.nk-seg { display: flex; gap: 6px; margin: 0 0 12px; background: #f1dfae; border-radius: 16px; padding: 4px; }
.nk-seg button { flex: 1; border: 0; background: none; border-radius: 12px; padding: 8px 4px; font-size: 15px; font-weight: 900; color: #8a5a22; display: flex; flex-direction: column; align-items: center; }
.nk-seg button small { font-size: 10.5px; font-weight: 800; opacity: .8; }
.nk-seg button.is-on { background: #fff; color: #3b2a1c; box-shadow: 0 2px 0 #e2b866; }
.nk-seg button[disabled] { opacity: .7; }
.nk-join { display: flex; gap: 8px; margin-top: 10px; }
.nk-join input { flex: 1; min-width: 0; height: 44px; border: 2px solid #e2b866; border-radius: 14px; font-size: 18px; font-weight: 900; text-align: center; letter-spacing: 4px; text-transform: uppercase; font-family: inherit; color: #3b2a1c; -webkit-user-select: text; user-select: text; }
.nk-join .nk-b { width: auto; flex: none; padding: 0 18px; }
.nk-opts { display: flex; gap: 8px; margin: 0 0 10px; }
.nk-opts label, .nk-sel { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; color: #8a6a3a; }
.nk-opts select, .nk-sel select { height: 40px; border: 2px solid #e2b866; border-radius: 12px; font-size: 15px; font-weight: 800; font-family: inherit; color: #3b2a1c; background: #fff; padding: 0 8px; }
.nk-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin: 10px 0 4px; }
.nk-chk input { width: 20px; height: 20px; accent-color: #f0702a; }
.nk-code { text-align: center; }
.nk-code small { display: block; font-size: 12px; font-weight: 800; color: #8a6a3a; }
.nk-code b { display: block; font-size: 40px; font-weight: 900; letter-spacing: 8px; color: #3b2a1c; margin: 2px 0 8px; -webkit-user-select: text; user-select: text; }
.nk-peers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nk-peers li { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 14px; padding: 6px 8px; box-shadow: 0 2px 0 #efd9a8, inset 0 0 0 2px var(--c, transparent); min-width: 0; position: relative; }
.nk-peers img, .nk-peers li > i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: #f1dfae; }
.nk-peers b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-peers em { font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #e0662a; border-radius: 99px; padding: 1px 6px; }
.nk-peers small { position: absolute; right: 6px; bottom: -6px; font-size: 10px; font-weight: 900; background: #ffd23f; border-radius: 99px; padding: 0 5px; }
.nk-peers li.is-empty { opacity: .5; box-shadow: none; border: 2px dashed #e2b866; background: none; }

/* お題・きせかえ・設定 */
.nk-quests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nk-quests li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 3px 0 #efd9a8; }
.nk-quests li > div { flex: 1; min-width: 0; }
.nk-quests b { font-size: 14px; font-weight: 900; }
.nk-quests small { font-size: 11px; color: #8a6a3a; font-weight: 800; }
.nk-quests .nk-b { width: auto; flex: none; padding: 0 14px; }
.nk-prog { height: 8px; background: #f1dfae; border-radius: 99px; overflow: hidden; margin: 5px 0 3px; }
.nk-prog i { display: block; height: 100%; background: #3fae55; }
.nk-got { font-size: 12px; font-weight: 900; color: #3fae55; }
.nk-body > h3 { font-size: 15px; font-weight: 900; margin: 14px 0 8px; }
.nk-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nk-item { border: 0; background: #fff; border-radius: 16px; padding: 8px 4px; box-shadow: 0 3px 0 #efd9a8; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nk-item.is-on { box-shadow: 0 3px 0 #efd9a8, inset 0 0 0 3px #f0702a; }
.nk-item b { font-size: 12px; font-weight: 900; }
.nk-item small { font-size: 10.5px; font-weight: 800; color: #8a6a3a; }
.nk-pv { width: 44px; height: 44px; }
.nk-lensp { width: 40px; height: 40px; border-radius: 50%; border: 6px solid #ffc21a; background: rgba(220, 245, 255, .6); margin: 2px; }
.nk-lensp.is-pink { border-color: #f28bb5; } .nk-lensp.is-mint { border-color: #5ec6b0; } .nk-lensp.is-night { border-color: #3a3f86; }
.nk-set label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; margin: 6px 0; }
.nk-set input[type=range] { flex: 1; accent-color: #f0702a; }
.nk-help .nk-tut { margin: 0 0 12px; }

/* 低い画面（ブラウザの帯込みで 560〜640） */
@media (max-height: 640px) {
	.nk-hud { padding: 4px 8px 3px; } .nk-ib { width: 38px; height: 38px; }
	.nk-row { min-height: 20px; padding: 2px 8px; } .nk-dot { width: 13px; height: 13px; }
	.nk-fb { width: 46px; height: 46px; } .nk-fab { gap: 8px; }
	.nk-b { min-height: 46px; font-size: 16px; }
	.nk-title__art { height: min(30vw, 100px); width: min(50vw, 190px); }
	.nk-logo__b { font-size: clamp(26px, 9vw, 38px); }
	.nk-sub { font-size: 12px; margin-top: 6px; }
	.nk-menu { gap: 8px; }
	.nk-intro__cats img { width: 56px; height: 56px; }
	.nk-tut .nk-ic { width: 42px; height: 42px; }
	.nk-res__hd { font-size: 26px; margin: 0 0 6px; }
	.nk-st { width: 44px; height: 44px; }
}
@media (max-height: 580px) {
	.nk-title__art { display: none; }
	.nk-sub { display: none; }
	.nk-icons button { padding: 4px 0; }
}
/* 暗い重ね画面の文字 */
.is-dim .nk-hd h2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.is-dim .nk-card .nk-note { color: #8a6a3a; }
.is-dim .nk-link { display: inline-block; background: rgba(255, 255, 255, .16); border-radius: 99px; padding: 8px 16px; text-decoration: none; }
.nk-res .nk-link { align-self: center; }
.nk-logo__a.is-long { font-size: clamp(26px, 8.6vw, 36px); background: none; padding: 0; color: #fff; -webkit-text-stroke: 7px #3b2a1c; paint-order: stroke fill; letter-spacing: 1px; text-shadow: 0 4px 0 #3b2a1c; transform: rotate(-3deg); }
.nk-logo__a.is-long + .nk-logo__b { margin-top: 2px; }
.nk-lv small { font-size: 9.5px; font-weight: 800; color: #8a6a3a; line-height: 1; white-space: nowrap; }
.nk-lv.is-next small { color: #fff; }