/* りんかのもふもふアイランド — mofu-island.css
 * 画面の外枠（DOM）だけのスタイル。ゲーム内はドット絵、UIは今どきの見せ方（ネオレトロ）。
 */
html.mofu-lock, html.mofu-lock body { overflow: hidden !important; overscroll-behavior: none; }

.mofu {
	--ink: #2a1a33;
	--night: #1d1433;
	--night2: #2c2050;
	--pink: #ff5c9a;
	--pink2: #ffb3cf;
	--mint: #5fe0c8;
	--gold: #ffd23a;
	--cream: #fff8ec;
	--jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
	--px: "Press Start 2P", "DotGothic16", ui-monospace, monospace;
	position: fixed; inset: 0; z-index: 2147483000;
	background: radial-gradient(120% 80% at 50% 0%, #2f2458 0%, var(--night) 55%, #120c22 100%);
	color: var(--cream);
	font-family: var(--jp);
	overflow: hidden;
	touch-action: none;
	-webkit-user-select: none; user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
.mofu *, .mofu *::before, .mofu *::after { box-sizing: border-box; }
.mofu [hidden] { display: none !important; }
.mofu button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.mofu-safe-probe {
	position: absolute; visibility: hidden; pointer-events: none; inset: 0;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------- ゲーム画面 ---------- */
.mofu-stage { position: absolute; overflow: hidden; background: #1a2a24; border-radius: 2px; }
.mofu.is-portrait .mofu-stage { box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.mofu-host, .mofu-host canvas { position: absolute; left: 0; top: 0; }
.mofu-host canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; max-width: none; max-height: none; } /* 2026-09-27 Cocoon 親テーマの canvas{max-width:100%} が幅0の .mofu-host に効いて canvas が幅0＝PCで真っ黒だった */

/* HUD：隅にすっきり小さく */
.mofu-hud {
	position: absolute; inset: 0; pointer-events: none;
	padding: calc(6px * var(--ui)) calc(8px * var(--ui));
	display: flex; justify-content: space-between; align-items: flex-start;
	font-family: var(--px); font-size: calc(8px * var(--ui));
	text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
	opacity: 0; transition: opacity .3s;
}
.mofu.is-playing .mofu-hud { opacity: 1; }
.mofu-hud__l { display: grid; gap: calc(4px * var(--ui)); }
.mofu-gauge {
	width: calc(120px * var(--ui)); height: calc(9px * var(--ui));
	background: rgba(20, 10, 30, .55); border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; overflow: hidden;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.mofu-gauge__fill {
	display: block; height: 100%; width: 100%;
	background: repeating-linear-gradient(90deg, #7dff9a 0 calc(100% / 16 - 1px), transparent calc(100% / 16 - 1px) calc(100% / 16)), linear-gradient(#b8ffc8, #3fd070);
	background: linear-gradient(90deg, #52e07a, #b8ff8a);
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(7.5px * var(--ui)), transparent calc(7.5px * var(--ui)) calc(7.5px * var(--ui) + 1px));
	mask: repeating-linear-gradient(90deg, #000 0 calc(7.5px * var(--ui)), transparent calc(7.5px * var(--ui)) calc(7.5px * var(--ui) + 1px));
	transition: width .18s ease-out;
}
.mofu-gauge.is-low .mofu-gauge__fill { background: linear-gradient(90deg, #ff4a6a, #ffa060); animation: mofu-blink .5s steps(2) infinite; }
.mofu-hud__score { letter-spacing: .05em; }
.mofu-hud__r { display: flex; gap: calc(8px * var(--ui)); align-items: center; margin-right: calc(30px * var(--ui) + 10px); }
.mofu-hud__item { display: inline-flex; align-items: center; gap: 2px; }
.mofu-hud__item img { width: calc(14px * var(--ui)); height: auto; image-rendering: pixelated; filter: drop-shadow(0 1px 0 var(--ink)); }
.mofu-hud__lives img { width: calc(12px * var(--ui)); }
.mofu-hud__baby img { width: calc(15px * var(--ui)); }
.mofu-hud__baby.is-pop { animation: mofu-pop .45s ease-out; }
.mofu-hud__weapon { padding: 1px 3px; border-radius: 4px; background: rgba(255, 92, 154, .35); }
.mofu-hud__weapon[data-lv="1"]::after { content: "×2"; }
.mofu-hud__weapon.is-pop { animation: mofu-pop .45s ease-out; }

.mofu-pausebtn {
	position: absolute; top: calc(4px * var(--ui)); right: calc(4px * var(--ui));
	width: calc(24px * var(--ui) + 8px); height: calc(24px * var(--ui) + 8px);
	border: 0; border-radius: 50%; background: rgba(20, 10, 30, .4);
	display: none; align-items: center; justify-content: center; gap: 4px;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mofu-pausebtn span { width: 4px; height: 40%; background: #fff; border-radius: 2px; }
.mofu.is-playing .mofu-pausebtn { display: flex; }
.mofu-pausebtn:active { transform: scale(.9); }

.mofu-toast {
	position: absolute; left: 50%; top: 16%; transform: translate(-50%, -8px);
	padding: .35em 1em; border-radius: 99px; background: rgba(29, 20, 51, .78); font-weight: 800;
	font-size: calc(11px * var(--ui)); white-space: nowrap; opacity: 0; pointer-events: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset;
}
.mofu-toast.is-gold { background: linear-gradient(90deg, #a86a10, #ffd23a, #a86a10); color: var(--ink); }
.mofu-toast.is-on { animation: mofu-toast 1.8s ease forwards; }

.mofu-banner {
	position: absolute; left: 0; right: 0; top: 36%; text-align: center; pointer-events: none; opacity: 0;
	text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(255, 92, 154, .7);
}
.mofu-banner small { display: block; font-family: var(--px); font-size: calc(10px * var(--ui)); color: var(--pink2); letter-spacing: .2em; }
.mofu-banner b { display: block; font-size: calc(26px * var(--ui)); font-weight: 900; margin-top: .2em; }
.mofu-banner em { display: block; font-style: normal; font-size: calc(10px * var(--ui)); margin-top: .3em; opacity: .9; }
.mofu-banner.is-on { animation: mofu-banner 2s ease forwards; }

.mofu-warning { position: absolute; inset: 0; pointer-events: none; display: grid; place-content: center; opacity: 0; text-align: center; }
.mofu-warning__band {
	width: 100vw; max-width: none; padding: .3em 0;
	background: repeating-linear-gradient(-45deg, rgba(255, 40, 70, .88) 0 14px, rgba(120, 0, 30, .88) 14px 28px);
	border-top: 2px solid #ffd0d8; border-bottom: 2px solid #ffd0d8;
}
.mofu-warning__band b { font-family: var(--px); font-size: calc(28px * var(--ui)); letter-spacing: .25em; text-shadow: 0 3px 0 #40001a; }
.mofu-warning p { margin: .6em 0 0; font-weight: 900; font-size: calc(13px * var(--ui)); text-shadow: 0 2px 0 var(--ink); }
.mofu-warning.is-on { animation: mofu-warning 1.8s ease forwards; }

/* 道中のヒント（画面の上に小さく・操作のじゃまにならない位置） */
.mofu-hint {
	position: absolute; left: 50%; top: calc(26px * var(--ui)); transform: translate(-50%, -6px);
	display: flex; align-items: center; gap: .5em; width: max-content; max-width: 86%;
	padding: .45em .9em .45em .55em; border-radius: 12px;
	background: rgba(255, 248, 236, .94); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 0 0 2px #ffd6e6;
	font-weight: 800; font-size: calc(10.5px * var(--ui)); line-height: 1.45; opacity: 0; pointer-events: none;
}
.mofu-hint p { margin: 0; }
.mofu-hint__icon { font-size: 1.5em; line-height: 1; }
.mofu-hint.is-on { animation: mofu-hint 4.2s ease forwards; }
@keyframes mofu-hint { 0% { opacity: 0; transform: translate(-50%, -10px); } 8%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* ボスの攻略カード */
.mofu-screen--brief { background: rgba(18, 12, 34, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mofu-brief { width: min(520px, 100%); }
.mofu-brief h2 { font-size: 1.2rem; }
.mofu-brief__tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mofu-brief__tips li { display: grid; grid-template-columns: 1.9em 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: .88rem; line-height: 1.5; font-weight: 700; }
.mofu-brief__ic { font-size: 1.35em; text-align: center; }
.mofu.is-landscape .mofu-brief__tips { grid-template-columns: 1fr 1fr; }
.mofu.is-landscape .mofu-brief { width: min(760px, 100%); }

.mofu-bossbar {
	position: absolute; left: 50%; bottom: calc(8px * var(--ui)); transform: translateX(-50%);
	width: 46%; font-size: calc(9px * var(--ui)); font-weight: 900; text-shadow: 0 1px 0 var(--ink); pointer-events: none;
}
.mofu-bossbar div { height: calc(7px * var(--ui)); border-radius: 99px; background: rgba(20, 10, 30, .6); border: 1px solid rgba(255, 255, 255, .6); overflow: hidden; margin-top: 2px; }
.mofu-bossbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a30, #ff4a6a); transition: width .25s; }

/* ---------- 操作ボタン ---------- */
.mofu-pad { position: absolute; pointer-events: none; }
.mofu-dpad, .mofu-btn { pointer-events: auto; touch-action: none; }
.mofu.is-portrait .mofu-pad {
	/* 縦長スマホでは操作エリアが広いので、親指の届く下寄りに置く */
	display: flex; justify-content: space-between; align-items: flex-end;
	padding: 0 max(18px, 6vw) calc(var(--pad-safe-b) + min(11vh, 110px));
	background:
		radial-gradient(circle at 20% 110%, rgba(95, 224, 200, .18), transparent 55%),
		radial-gradient(circle at 85% 0%, rgba(255, 92, 154, .16), transparent 50%),
		linear-gradient(180deg, #2a2050 0%, #1d1433 100%);
	border-top: 3px solid #3b2d6a;
}
.mofu-pad__deco { display: none; }
.mofu.is-portrait .mofu-pad__deco {
	display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; opacity: .5;
	background:
		radial-gradient(circle at 10% 100%, #2e7a58 0 22px, transparent 23px),
		radial-gradient(circle at 30% 100%, #245c46 0 30px, transparent 31px),
		radial-gradient(circle at 70% 100%, #2e7a58 0 26px, transparent 27px),
		radial-gradient(circle at 92% 100%, #245c46 0 34px, transparent 35px);
}
.mofu.is-landscape .mofu-pad { inset: 0; }
.mofu.is-landscape .mofu-dpad, .mofu.is-landscape .mofu-ab { position: absolute; bottom: calc(10px + var(--pad-safe-b)); opacity: .55; }
.mofu.is-landscape .mofu-dpad { left: calc(12px + var(--pad-safe-l)); }
.mofu.is-landscape .mofu-ab { right: calc(12px + var(--pad-safe-r)); }
.mofu:not(.is-playing) .mofu-pad .mofu-dpad, .mofu:not(.is-playing) .mofu-pad .mofu-ab { opacity: .25; }
.mofu.is-landscape:not(.is-playing) .mofu-dpad, .mofu.is-landscape:not(.is-playing) .mofu-ab { display: none; }

.mofu-dpad { position: relative; width: var(--pad); height: var(--pad); z-index: 1; }
.mofu-dpad i {
	position: absolute; background: linear-gradient(180deg, #4a3c80, #33285e); border-radius: 8px;
	box-shadow: 0 4px 0 #150e28, inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s, background .08s;
}
.mofu-dpad .u, .mofu-dpad .d { left: 34%; width: 32%; height: 36%; }
.mofu-dpad .u { top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mofu-dpad .d { bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.mofu-dpad .l, .mofu-dpad .r { top: 34%; width: 36%; height: 32%; }
.mofu-dpad .l { left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mofu-dpad .r { right: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mofu-dpad em { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; background: #33285e; border-radius: 4px; }
.mofu-dpad i::after { content: ""; position: absolute; left: 50%; top: 50%; border: 6px solid transparent; transform: translate(-50%, -50%); opacity: .55; }
.mofu-dpad .u::after { border-bottom-color: #fff; margin-top: -3px; }
.mofu-dpad .d::after { border-top-color: #fff; margin-top: 3px; }
.mofu-dpad .l::after { border-right-color: #fff; margin-left: -3px; }
.mofu-dpad .r::after { border-left-color: #fff; margin-left: 3px; }
.mofu-dpad[data-dir*="u"] .u, .mofu-dpad[data-dir*="d"] .d, .mofu-dpad[data-dir*="l"] .l, .mofu-dpad[data-dir*="r"] .r {
	background: linear-gradient(180deg, var(--pink), #d83a78); transform: translateY(2px); box-shadow: 0 2px 0 #150e28, 0 0 14px rgba(255, 92, 154, .6);
}

.mofu-ab { position: relative; width: calc(var(--pad) * 1.12); height: var(--pad); z-index: 1; }
.mofu-btn {
	position: absolute; width: 48%; aspect-ratio: 1; border: 0; border-radius: 50%;
	display: grid; place-content: center; text-align: center; line-height: 1.05;
	box-shadow: 0 5px 0 #150e28, inset 0 2px 0 rgba(255, 255, 255, .35);
	transition: transform .1s cubic-bezier(.3, 1.6, .5, 1), box-shadow .1s;
}
.mofu-btn b { font-family: var(--px); font-size: calc(var(--pad) * .13); }
.mofu-btn small { font-size: calc(var(--pad) * .075); font-weight: 800; opacity: .9; margin-top: .3em; }
.mofu-btn--a { right: 0; top: 4%; background: radial-gradient(circle at 35% 30%, #ff9ac0, var(--pink) 60%, #c8306a); }
.mofu-btn--b { left: 0; bottom: 4%; background: radial-gradient(circle at 35% 30%, #a8fff0, var(--mint) 60%, #2a9a88); color: var(--ink); }
.mofu-btn.is-down { transform: translateY(3px) scale(.94); box-shadow: 0 2px 0 #150e28, 0 0 18px rgba(255, 255, 255, .45); }

/* ---------- オーバーレイ画面 ---------- */
.mofu-screens { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.mofu-screens.is-open { pointer-events: auto; }
.mofu-screen {
	position: absolute; inset: 0; display: grid; place-items: center;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 16px);
	animation: mofu-fade .25s ease;
}
.mofu-screen--pause, .mofu-screen--continue, .mofu-screen--clear, .mofu-screen--select, .mofu-screen--settings, .mofu-screen--zukan, .mofu-screen--soon {
	background: rgba(18, 12, 34, .55); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.mofu-panel {
	width: min(440px, 100%); max-height: 100%; overflow: auto;
	background: linear-gradient(180deg, rgba(58, 44, 110, .96), rgba(33, 24, 64, .96));
	border: 2px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 18px 18px 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
	animation: mofu-rise .35s cubic-bezier(.2, 1.4, .4, 1);
}
.mofu-panel--center { text-align: center; }
.mofu-panel h2 { margin: .1em 0 .4em; font-size: 1.35rem; font-weight: 900; line-height: 1.3; }
.mofu-kicker { margin: 0; font-family: var(--px); font-size: .62rem; letter-spacing: .18em; color: var(--pink2); }
.mofu-lead { margin: 0 0 .9em; font-size: .88rem; opacity: .9; line-height: 1.6; }
.mofu-menu { display: grid; gap: 8px; margin-top: 12px; }
.mofu-menu button, .mofu-link {
	padding: .72em 1em; border-radius: 12px; border: 0; font-weight: 800; font-size: 1rem;
	background: linear-gradient(180deg, #ff7ab0, var(--pink)); color: #fff;
	box-shadow: 0 4px 0 #a82a60; transition: transform .1s;
}
.mofu-menu button.is-sub, .mofu-link { background: rgba(255, 255, 255, .12); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.mofu-link { display: block; width: 100%; margin-top: 10px; font-size: .88rem; }
.mofu-menu button:active, .mofu-link:active { transform: translateY(2px); }
.mofu button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* タイトル */
.mofu-screen--title { background: linear-gradient(180deg, rgba(18, 12, 34, .15) 0%, rgba(18, 12, 34, .55) 70%, rgba(18, 12, 34, .85) 100%); }
.mofu-title { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.mofu-title__logo { position: relative; width: min(88vw, 560px, 118vh); animation: mofu-logo 1.1s cubic-bezier(.2, 1.3, .35, 1) both; }
.mofu-title__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.mofu-title__logo::after {
	/* 光が走る */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 48%, transparent 60%) no-repeat;
	background-size: 250% 100%; background-position: 150% 0;
	-webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
	mix-blend-mode: screen; animation: mofu-shine 3.2s 1s ease-in-out infinite;
}
.mofu-title__text { display: none; }
.mofu-title__logo.is-text::after { display: none; }
.mofu-title__logo.is-text .mofu-title__text {
	display: block; text-align: center; font-weight: 900; font-size: min(7vw, 34px); line-height: 1.1; color: var(--pink2);
	text-shadow: 0 3px 0 var(--ink), 0 0 20px rgba(255, 92, 154, .6);
}
.mofu-title__text b { font-size: 1.6em; color: #fff; }
.mofu-title__art {
	position: absolute; right: 1%; bottom: 0; height: 80%; max-width: 45%; object-fit: contain; object-position: bottom right;
	animation: mofu-cutin .7s .9s cubic-bezier(.2, 1.2, .4, 1) both; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
}
.mofu-title__start {
	background: none; border: 0; font-family: var(--px); font-size: clamp(12px, 3.4vw, 18px); letter-spacing: .15em; color: #fff;
	text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(255, 92, 154, .9); padding: 1em 2em; animation: mofu-blink 1.1s steps(2) infinite, mofu-fade 1s 1.2s both;
}
.mofu-title .mofu-menu { width: min(300px, 80vw); animation: mofu-rise .35s ease both; position: relative; z-index: 1; }
.mofu-title__copy { position: absolute; bottom: 0; margin: 0; font-size: .65rem; opacity: .55; }
.mofu.is-landscape .mofu-title { flex-direction: row; gap: 4vw; }
.mofu.is-landscape .mofu-title__logo { width: min(52vw, 560px); }
.mofu.is-landscape .mofu-title .mofu-menu { width: min(260px, 34vw); }

/* オープニング（全画面の紙芝居） */
.mofu-screen--opening { background: #0c0818; padding: 0; }
.mofu-op { position: absolute; inset: 0; overflow: hidden; cursor: pointer; outline: none; }
.mofu-op__art { position: absolute; inset: 0; }
.mofu.is-portrait .mofu-op__art { bottom: auto; height: 62%; }
.mofu-op__layer { position: absolute; inset: 0; overflow: hidden; animation: mofu-fade .7s ease both; }
.mofu-op__layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: mofu-kb1 14s ease-out both; }
.mofu-op__layer--2 > img { animation-name: mofu-kb2; }
.mofu-op__layer--3 > img { animation-name: mofu-kb3; }
.mofu-op__layer--4 > img { animation-name: mofu-kb4; }
.mofu-op__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 4, 20, .75) 100%); }
.mofu.is-portrait .mofu-op__vignette { bottom: auto; height: 62%; }
.mofu-op__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mofu-op__flash.is-on { animation: mofu-flash .6s ease-out; }
.mofu-op.is-shake .mofu-op__art { animation: mofu-shake .5s ease-in-out 2; }
.mofu-op__box {
	position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh);
	width: min(880px, 92vw); padding: 16px 20px 22px; border-radius: 16px;
	background: rgba(255, 248, 236, .95); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 3px #ffd6e6;
}
.mofu.is-portrait .mofu-op__box { top: calc(62% + 14px); bottom: auto; }
.mofu-op__text { margin: 0; min-height: 3.4em; white-space: pre-line; font-weight: 800; line-height: 1.7; font-size: clamp(14px, 2.1vw + 6px, 21px); }
.mofu-op__more { position: absolute; right: 16px; bottom: 6px; color: var(--pink); opacity: 0; font-size: 14px; }
.mofu-op__more.is-on { opacity: 1; animation: mofu-hop .5s ease-in-out infinite alternate; }
.mofu-op__dots { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.mofu-op__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.mofu-op__dots i.on { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.mofu-op__skip { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 12px); border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .35); border-radius: 99px; padding: .4em 1.1em; font-size: .8rem; font-weight: 800; }

/* 絵が届くまでの代役（ドット絵で組んだ 640×360 の舞台） */
.mofu-ops { position: absolute; left: 50%; top: 50%; width: 640px; height: 360px; transform-origin: 50% 50%; }
.mofu-ops__bgwrap, .mofu-ops__bg { position: absolute; inset: 0; }
.mofu-ops__bg { background-size: 640px 360px; image-rendering: pixelated; }
.mofu-ops__ground { position: absolute; left: 0; right: 0; top: 300px; bottom: 0; background-size: 32px 32px; image-rendering: pixelated; }
.mofu-ops__spr { position: absolute; image-rendering: pixelated; transform-origin: 0 0; transform: scale(calc(var(--s) * var(--fx, 1)), var(--s)) translate(-50%, -100%); }
.mofu-ops__spr.is-hop { animation: mofu-ops-hop .7s ease-in-out infinite alternate; }
.mofu-ops__spr.d2 { animation-delay: -.25s; }
.mofu-ops__spr.d3 { animation-delay: -.5s; }
.mofu-ops__spr.is-villain { filter: grayscale(1) brightness(1.05) contrast(1.1); }
.mofu-ops__spr.is-shiver { animation: mofu-ops-shiver .12s linear infinite; }
.mofu-ops--night .mofu-ops__bgwrap { filter: brightness(.35) saturate(.6) hue-rotate(200deg); }
.mofu-ops--night .mofu-ops__spr { filter: brightness(.55) saturate(.7); }
.mofu-ops--night .mofu-ops__spr.is-villain { filter: brightness(.15); }
.mofu-ops__group { position: absolute; inset: 0; animation: mofu-ops-sneak 7s linear both; }
.mofu-ops__spr.is-carried { animation: mofu-ops-hop .3s ease-in-out infinite alternate; }
.mofu-ops__moon { position: absolute; left: 470px; top: 40px; width: 70px; height: 70px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 40px 10px rgba(255, 246, 200, .45); }
.mofu-ops__stars { position: absolute; inset: 0 0 50% 0; background-image: radial-gradient(1.5px 1.5px at 40px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 130px 80px, #fff, transparent), radial-gradient(1px 1px at 220px 40px, #fff, transparent), radial-gradient(1.5px 1.5px at 330px 100px, #fff, transparent), radial-gradient(1px 1px at 400px 20px, #fff, transparent), radial-gradient(1.5px 1.5px at 590px 130px, #fff, transparent); animation: mofu-blink 2.4s steps(2) infinite; }
.mofu-ops--castle .mofu-ops__bgwrap { filter: saturate(.3) brightness(1.2) hue-rotate(160deg); }
.mofu-ops__snow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(2px 2px at 20px 20px, #fff, transparent), radial-gradient(2px 2px at 90px 70px, #fff, transparent), radial-gradient(3px 3px at 160px 30px, #fff, transparent), radial-gradient(2px 2px at 240px 110px, #fff, transparent), radial-gradient(2px 2px at 300px 50px, #fff, transparent); background-size: 320px 160px; animation: mofu-ops-snow 6s linear infinite; }
.mofu-ops--morning .mofu-ops__bgwrap { filter: sepia(.35) saturate(1.4) brightness(1.05); }
.mofu-ops__sun { position: absolute; left: 80px; top: 30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff8d0, #ffc870 60%, transparent 70%); animation: mofu-blink 3s ease-in-out infinite; }
.mofu-ops__sparkle { position: absolute; left: 380px; top: 80px; width: 40px; height: 40px; background: radial-gradient(circle, #fff 0 2px, transparent 3px), conic-gradient(from 45deg, transparent 0 20%, rgba(255, 255, 255, .9) 25%, transparent 30% 45%, rgba(255, 255, 255, .9) 50%, transparent 55% 70%, rgba(255, 255, 255, .9) 75%, transparent 80%); border-radius: 50%; animation: mofu-pop 1.2s ease-in-out infinite; }
@keyframes mofu-kb1 { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1%); } }
@keyframes mofu-kb2 { from { transform: scale(1.14) translate(2%, 0); } to { transform: scale(1.04) translate(-1%, 1%); } }
@keyframes mofu-kb3 { from { transform: scale(1.04) translate(0, 2%); } to { transform: scale(1.16) translate(0, -1%); } }
@keyframes mofu-kb4 { from { transform: scale(1.18) translate(-2%, 1%); } to { transform: scale(1.05) translate(1%, 0); } }
@keyframes mofu-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes mofu-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 4px); } }
@keyframes mofu-ops-hop { to { margin-top: -10px; } }
@keyframes mofu-ops-shiver { 50% { margin-left: 2px; } }
@keyframes mofu-ops-sneak { from { transform: translateX(-160px); } to { transform: translateX(200px); } }
@keyframes mofu-ops-snow { from { background-position: 0 0; } to { background-position: -40px 160px; } }

/* うさぎ選択 */
.mofu-rabbits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mofu-rabbit {
	border: 2px solid rgba(255, 255, 255, .25); border-radius: 14px; padding: 10px 6px; background: rgba(255, 255, 255, .08);
	display: grid; justify-items: center; gap: 4px; text-align: center; transition: transform .12s;
}
.mofu-rabbit img { width: 72px; max-width: 100%; image-rendering: pixelated; }
.mofu-rabbit b { font-size: .9rem; }
.mofu-rabbit small { font-size: .66rem; opacity: .85; line-height: 1.4; }
.mofu-rabbit:not(:disabled):hover, .mofu-rabbit:focus-visible { transform: translateY(-3px); border-color: var(--pink); background: rgba(255, 92, 154, .18); }
.mofu-rabbit.is-locked { opacity: .45; cursor: default; }
.mofu-rabbit.is-locked img { filter: brightness(0) invert(.25); }

/* リザルト */
.mofu-rank {
	width: 88px; height: 88px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-content: center;
	font-family: var(--px); font-size: 40px; text-shadow: 0 4px 0 var(--ink);
	background: radial-gradient(circle at 35% 30%, #fff, #c8c8e0 60%, #8a8ab0); color: #fff;
	animation: mofu-stamp .5s .2s cubic-bezier(.2, 1.6, .4, 1) both;
}
.mofu-rank--S { background: radial-gradient(circle at 35% 30%, #fff8c8, var(--gold) 55%, #c88a10); box-shadow: 0 0 30px rgba(255, 210, 58, .6); }
.mofu-rank--A { background: radial-gradient(circle at 35% 30%, #ffe0ee, var(--pink) 60%, #b02a64); }
.mofu-rank--B { background: radial-gradient(circle at 35% 30%, #e0fff8, var(--mint) 60%, #2a9a88); }
.mofu-stats { display: grid; grid-template-columns: auto auto; gap: 4px 16px; justify-content: center; margin: 0 0 8px; font-size: .9rem; }
.mofu-stats dt { opacity: .75; text-align: right; }
.mofu-stats dd { margin: 0; font-weight: 800; text-align: left; font-variant-numeric: tabular-nums; }
.is-gold { color: var(--gold); }
.mofu-rescue { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; font-weight: 800; }
.mofu-rescue img { width: 54px; image-rendering: pixelated; animation: mofu-hop .6s ease infinite alternate; }

/* 設定 */
.mofu-field { display: grid; gap: 6px; margin: 10px 0; font-weight: 700; font-size: .9rem; }
.mofu-field input[type=range] { width: 100%; accent-color: var(--pink); }
.mofu-field--check { grid-template-columns: auto 1fr; align-items: center; }
.mofu-field--check input { width: 20px; height: 20px; accent-color: var(--pink); }
.mofu-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mofu-seg button { border: 0; border-radius: 10px; padding: .5em; background: rgba(255, 255, 255, .12); font-weight: 800; }
.mofu-seg button.on { background: var(--pink); }
.mofu-note { font-size: .74rem; line-height: 1.6; opacity: .85; background: rgba(0, 0, 0, .2); border-radius: 10px; padding: 8px 10px; }

/* カード図鑑 */
.mofu-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mofu-card { text-align: center; font-size: .72rem; }
.mofu-card p { margin: 4px 0 0; opacity: .85; line-height: 1.4; }
.mofu-card__face {
	aspect-ratio: 5 / 7; border-radius: 10px; display: grid; place-content: center;
	background: repeating-linear-gradient(45deg, #3a2c6e 0 8px, #33265f 8px 16px); border: 2px solid rgba(255, 255, 255, .2);
}
.mofu-card__face { position: relative; overflow: hidden; }
.mofu-card__face i { position: relative; font-style: normal; font-family: var(--px); font-size: 24px; opacity: .35; }
/* まだ持っていないカード：ぼかした絵が うっすら見えるだけ */
.mofu-card__tease { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(5px) saturate(.8); opacity: .45; pointer-events: none; }
.mofu-card.is-got .mofu-card__face { background: linear-gradient(160deg, #fff4dc, var(--pink2)); color: var(--ink); border-color: var(--gold); }

/* 読み込み */
.mofu-loading { text-align: center; font-weight: 800; }
.mofu-loading i { display: block; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--pink); animation: mofu-spin 1s linear infinite; }

/* ---------- アニメーション ---------- */
@keyframes mofu-blink { 50% { opacity: .25; } }
@keyframes mofu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mofu-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mofu-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes mofu-spin { to { transform: rotate(360deg); } }
@keyframes mofu-hop { to { transform: translateY(-8px); } }
@keyframes mofu-page { from { opacity: 0; transform: rotateY(-12deg) translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes mofu-logo {
	0% { opacity: 0; transform: perspective(600px) translateZ(-900px) scale(.2); filter: blur(6px); }
	70% { opacity: 1; transform: perspective(600px) translateZ(40px) scale(1.06); filter: blur(0); }
	100% { transform: none; }
}
@keyframes mofu-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
@keyframes mofu-cutin { from { opacity: 0; transform: translateX(40%) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes mofu-toast { 0% { opacity: 0; transform: translate(-50%, -8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
@keyframes mofu-banner { 0% { opacity: 0; transform: translateX(-30px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(30px); } }
@keyframes mofu-warning { 0% { opacity: 0; transform: scaleY(0); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mofu-stamp { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.mofu *, .mofu *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 特典カードをもらった演出（2026-09-24）：カードをしっかり見てから「やったー！」で閉じる */
.mofu-reveal .mofu-kicker { color: var(--gold); animation: mofu-reveal-blink 1s steps(2) infinite; }
.mofu-reveal__card { position: relative; width: min(62%, 240px); margin: 14px auto 10px; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(255, 210, 58, .75); animation: mofu-reveal-in 1s cubic-bezier(.2, 1.4, .4, 1); }
.mofu-reveal__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mofu-reveal__card i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); background-size: 250% 100%; animation: mofu-reveal-sheen 2.2s ease-in-out infinite; }
.mofu-reveal h2 { margin: 0 0 6px; }
.mofu-reveal button:disabled { opacity: .45; cursor: default; }
@keyframes mofu-reveal-in { from { transform: scale(.3) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mofu-reveal-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes mofu-reveal-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mofu-reveal__card, .mofu-reveal__card i, .mofu-reveal .mofu-kicker { animation: none; } }
/* 横持ち（高さが低い画面）：カードを左・文字とボタンを右に並べ、「やったー！」までスクロールせずに見える（2026-09-25 点検） */
@media (orientation: landscape) and (max-height: 560px) {
	.mofu-reveal { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "card kick" "card name" "card lead" "card menu"; column-gap: 20px; align-content: center; align-items: center; }
	.mofu-reveal > .mofu-kicker { grid-area: kick; margin: 0; }
	.mofu-reveal__card { grid-area: card; width: auto; height: min(74vh, 300px); margin: 0; }
	.mofu-reveal > h2 { grid-area: name; }
	.mofu-reveal > .mofu-lead { grid-area: lead; margin: 0 0 8px; }
	.mofu-reveal > .mofu-menu { grid-area: menu; }
}

/* ---------- やりこみ：勲章・称号・きょうのおだい・きろく（2026-09-24） ---------- */
.mofu-medals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0 6px; }
.mofu-medal { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .18); }
.mofu-medal i { font-style: normal; font-size: 20px; line-height: 1; opacity: .35; filter: grayscale(1); }
.mofu-medal small { font-size: 9px; line-height: 1.2; opacity: .6; text-align: center; }
.mofu-medal.is-got { background: linear-gradient(160deg, rgba(255, 210, 58, .22), rgba(255, 92, 154, .14)); border: 1px solid rgba(255, 210, 58, .55); }
.mofu-medal.is-got i { opacity: 1; filter: none; }
.mofu-medal.is-got small { opacity: .95; }
.mofu-medal.is-new { animation: mofu-medal-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 14px rgba(255, 210, 58, .7); }
.mofu-medal.is-new::after { content: "NEW"; font-family: var(--px); font-size: 7px; color: var(--gold); }
@keyframes mofu-medal-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mofu-got--daily { color: var(--mint); }
.mofu-title__who { margin: 6px 0 0; font-weight: 900; font-size: 13px; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.mofu-title__daily { margin: 6px auto 0; max-width: 92%; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(29, 20, 51, .72); border: 1px solid rgba(255, 179, 207, .45); }
.mofu-title__daily.is-done { border-color: var(--mint); color: var(--mint); }
.mofu-rec-tabs { display: flex; gap: 6px; margin: 8px 0 12px; }
.mofu-rec-tabs button { flex: 1; padding: 8px 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: inherit; font: 800 12px/1 var(--jp); cursor: pointer; }
.mofu-rec-tabs button.is-on { background: var(--pink); border-color: var(--pink); color: #fff; }
.mofu-rec-stage { margin: 0 0 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.mofu-rec-stage h3 { margin: 0; font-size: 12px; color: var(--pink2); }
.mofu-rec-list { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 4px; font-size: 11px; opacity: .85; }
.mofu-rec-list i { font-style: normal; margin-right: 6px; }
.mofu-rec-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.mofu-rec-title { position: relative; display: grid; gap: 3px; text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04); color: inherit; font-family: var(--jp); cursor: pointer; }
.mofu-rec-title b { font-size: 12px; }
.mofu-rec-title small { font-size: 10px; opacity: .7; line-height: 1.35; }
.mofu-rec-title:disabled { cursor: default; opacity: .55; }
.mofu-rec-title.is-got { border-color: rgba(255, 210, 58, .5); background: rgba(255, 210, 58, .1); }
.mofu-rec-title.is-on { box-shadow: inset 0 0 0 2px var(--gold); }
.mofu-rec-title em { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 9px; color: var(--gold); }
.mofu-rec-daily { display: grid; gap: 4px; text-align: center; margin-bottom: 12px; padding: 14px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(95, 224, 200, .14), rgba(255, 92, 154, .12)); border: 1px solid rgba(95, 224, 200, .4); }
.mofu-rec-daily small { font-size: 10px; opacity: .75; }
.mofu-rec-daily b { font-size: 15px; }
.mofu-rec-daily span { font-size: 11px; opacity: .85; }
.mofu-rec-daily.is-done { border-color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .mofu-medal.is-new { animation: none; } }
.mofu-title__side { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(320px, 86vw); }
.mofu.is-landscape .mofu-title__side { max-width: min(300px, 36vw); }
/* 縦持ち（2026-09-25）：メニューが りんかの立ち絵に重なっていたので、列を左に寄せて 立ち絵は右下に小さく */
.mofu.is-portrait .mofu-title__side { align-self: flex-start; margin-left: max(4vw, env(safe-area-inset-left, 0px)); max-width: min(300px, 58vw); }
.mofu.is-portrait .mofu-title .mofu-menu { width: 100%; }
.mofu.is-portrait .mofu-title__art { right: 0; height: 56%; max-width: 36%; }
.mofu-title__side .mofu-title__who, .mofu-title__side .mofu-title__daily { margin: 0; text-align: center; }

/* 中国語のとき（2026-09-24）：日本語フォントに無い字で形がくずれないよう、中国語のフォントを先に */
.mofu:lang(zh-CN) { --jp: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "M PLUS Rounded 1c", sans-serif; }
.mofu:lang(zh-TW) { --jp: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", "M PLUS Rounded 1c", sans-serif; }

/* UIアイコン（img/ui/icons/。絵文字の代わり 2026-09-25） */
.mofu-uic { display: inline-block; width: 1.45em; height: 1.45em; vertical-align: -0.36em; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.mofu-hint__icon .mofu-uic { width: 1.2em; height: 1.2em; vertical-align: middle; }

/* ---------- 2面・3面・エンディング（2026-09-26） ---------- */
/* うさぎ選択の「おすすめ」 */
.mofu-rabbit { position: relative; }
.mofu-rabbit.is-rec { border-color: var(--gold); }
.mofu-rabbit__rec { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 99px; background: var(--gold); color: var(--ink); font-style: normal; font-weight: 900; font-size: .62rem; white-space: nowrap; }
/* エンディングの場面（ドット絵） */
.mofu-ops__muffler { position: absolute; height: 12px; z-index: 3; border-radius: 6px; background: repeating-linear-gradient(90deg, #e8204c 0 8px, #ff9ab8 8px 14px); box-shadow: 0 2px 0 #a8123a; }
.mofu-ops__muffler::after { content: ""; position: absolute; left: 12px; top: 8px; width: 12px; height: 30px; border-radius: 0 0 4px 4px; background: repeating-linear-gradient(180deg, #e8204c 0 8px, #ff9ab8 8px 14px); transform: rotate(8deg); }
.mofu-ops__heart { position: absolute; width: 18px; height: 18px; z-index: 3; background: #ff5c9a; transform: rotate(45deg); animation: mofu-ops-heart 1.6s ease-in-out infinite; }
.mofu-ops__heart::before, .mofu-ops__heart::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: inherit; }
.mofu-ops__heart::before { left: -9px; top: 0; } .mofu-ops__heart::after { left: 0; top: -9px; }
.mofu-ops__spr.is-bow { animation: mofu-ops-bow 1.4s ease-in-out infinite; }
.mofu-ops--ed_muffler .mofu-ops__bgwrap, .mofu-ops--ed_friends .mofu-ops__bgwrap { filter: brightness(1.05); }
.mofu-ops__group--home { animation: mofu-ops-home 8s linear both; }
@keyframes mofu-ops-heart { 0%, 100% { margin-top: 0; opacity: .9; } 50% { margin-top: -10px; opacity: 1; } }
@keyframes mofu-ops-bow { 50% { margin-top: 6px; } }
@keyframes mofu-ops-home { from { transform: translateX(-120px); } to { transform: translateX(80px); } }
/* スタッフロール */
.mofu-screen--staff { background: #0c0818; padding: 0; }
.mofu-staff { position: absolute; inset: 0; overflow: hidden; outline: none; background: radial-gradient(120% 80% at 50% 0%, #2f2458 0%, #1d1433 60%, #0c0818 100%); }
.mofu-staff__roll { position: absolute; left: 0; right: 0; top: 0; bottom: 110px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.mofu-staff__inner { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: 0 16px; will-change: transform; }
.mofu-staff__title { margin: 0 0 48px; font-weight: 900; font-size: clamp(22px, 5vw, 36px); line-height: 1.25; color: var(--pink2); text-shadow: 0 3px 0 #150e28; }
.mofu-staff__row { margin: 0 0 30px; }
.mofu-staff__row small { display: block; font-size: .78rem; letter-spacing: .12em; color: var(--mint); margin-bottom: 4px; }
.mofu-staff__row b { font-size: clamp(16px, 3.2vw, 22px); font-weight: 900; }
.mofu-staff__end { margin: 70px 0 10px; font-family: var(--px); font-size: clamp(18px, 4vw, 28px); color: var(--gold); letter-spacing: .12em; }
.mofu-staff__thanks { margin: 0; font-weight: 800; opacity: .9; }
.mofu-staff__parade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(180deg, transparent, rgba(95, 224, 200, .12)); border-top: 2px solid rgba(255, 255, 255, .08); }
.mofu-staff__walker { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; height: var(--h); image-rendering: pixelated; transform: scaleX(var(--fx, 1)); animation: mofu-staff-walk 16s linear infinite; animation-delay: var(--d); }
@keyframes mofu-staff-walk { from { left: -140px; } to { left: calc(100% + 40px); } }
/* 総合リザルト */
.mofu-final__tbl { width: 100%; max-width: 360px; margin: 0 auto 10px; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.mofu-final__tbl th, .mofu-final__tbl td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mofu-final__tbl thead th { font-size: .7rem; opacity: .7; font-weight: 700; }
.mofu-final__rk { font-family: var(--px); font-size: .8rem; }
.mofu-final__rk--S { color: var(--gold); } .mofu-final__rk--A { color: var(--pink2); } .mofu-final__rk--B { color: var(--mint); }
.mofu-final .mofu-uic { width: 1.2em; height: 1.2em; vertical-align: -.25em; }
@media (prefers-reduced-motion: reduce) { .mofu-staff__walker, .mofu-ops__heart, .mofu-ops__group--home { animation: none; } }
@media (orientation: landscape) and (max-height: 560px) {
	.mofu-final { width: min(780px, 100%); }
	.mofu-final__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: center; }
	.mofu-final .mofu-rank { width: 64px; height: 64px; font-size: 30px; margin: 2px auto 6px; }
	.mofu-final h2 { font-size: 1.15rem; margin-bottom: .2em; }
	.mofu-final .mofu-lead { margin-bottom: .2em; }
}

/* =====================================================================
 * レトロゲームのUI（2026-09-26・制作者「フォントがださい」「メニューがださい」）
 * ・文字：日本語 DotGothic16（ドット）／英字の見出し Press Start 2P。中国語は中国語フォント。にせものの太字は作らない
 * ・窓：木の看板の9スライス枠（border-image）＋夜空色の中。ボタンは「▶カーソルが点滅する項目」
 * ・黄色い四角のフォーカス枠は出さない（キーボードで選んでいる項目は ▶ と 金色の文字で分かる）
 * ===================================================================== */
.mofu {
	--jp: "DotGothic16", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
	--px: "Press Start 2P", "DotGothic16", ui-monospace, monospace;
	--win: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='20' height='1' fill='%232a1a26'/%3E%3Crect x='2' y='23' width='20' height='1' fill='%232a1a26'/%3E%3Crect x='0' y='2' width='1' height='20' fill='%232a1a26'/%3E%3Crect x='23' y='2' width='1' height='20' fill='%232a1a26'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232a1a26'/%3E%3Crect x='22' y='1' width='1' height='1' fill='%232a1a26'/%3E%3Crect x='1' y='22' width='1' height='1' fill='%232a1a26'/%3E%3Crect x='22' y='22' width='1' height='1' fill='%232a1a26'/%3E%3Crect x='2' y='1' width='20' height='22' fill='%23b8743e'/%3E%3Crect x='1' y='2' width='22' height='20' fill='%23b8743e'/%3E%3Crect x='2' y='1' width='20' height='2' fill='%23e0a868'/%3E%3Crect x='1' y='2' width='2' height='18' fill='%23e0a868'/%3E%3Crect x='2' y='21' width='20' height='2' fill='%237a4424'/%3E%3Crect x='21' y='3' width='2' height='19' fill='%237a4424'/%3E%3Crect x='8' y='3' width='6' height='1' fill='%237a4424'/%3E%3Crect x='10' y='20' width='5' height='1' fill='%23e0a868'/%3E%3Crect x='3' y='9' width='1' height='5' fill='%237a4424'/%3E%3Crect x='20' y='11' width='1' height='4' fill='%23e0a868'/%3E%3Crect x='3' y='3' width='2' height='2' fill='%235a3018'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23f0d0a0'/%3E%3Crect x='19' y='3' width='2' height='2' fill='%235a3018'/%3E%3Crect x='19' y='3' width='1' height='1' fill='%23f0d0a0'/%3E%3Crect x='3' y='19' width='2' height='2' fill='%235a3018'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%23f0d0a0'/%3E%3Crect x='19' y='19' width='2' height='2' fill='%235a3018'/%3E%3Crect x='19' y='19' width='1' height='1' fill='%23f0d0a0'/%3E%3Crect x='5' y='5' width='14' height='14' fill='%234a2818'/%3E%3Crect x='6' y='6' width='12' height='12' fill='%232b2150'/%3E%3C/svg%3E");
	--tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='1' y='11' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='0' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='11' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23e0a868'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%232b2150'/%3E%3C/svg%3E");
	--tag-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='1' y='11' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='0' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='11' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23fff4c0'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23ffd23a'/%3E%3C/svg%3E");
	--tag-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='1' y='11' width='10' height='1' fill='%232a1a26'/%3E%3Crect x='0' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='11' y='1' width='1' height='10' fill='%232a1a26'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23e0a868'/%3E%3Crect x='2' y='2' width='8' height='8' fill='rgba(20,14,40,0.72)'/%3E%3C/svg%3E");
	font-synthesis: none;
}
.mofu:lang(zh-CN) { --jp: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "DotGothic16", sans-serif; font-synthesis: weight; }
.mofu:lang(zh-TW) { --jp: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", "DotGothic16", sans-serif; font-synthesis: weight; }
.mofu button:focus-visible, .mofu button:focus, .mofu *:focus { outline: none; }

/* 窓（パネル） */
.mofu-panel {
	background: none; border: 16px solid transparent; border-radius: 0; border-image: var(--win) 8 fill / 16px / 0 stretch;
	box-shadow: none; filter: drop-shadow(0 6px 0 rgba(10, 6, 20, .45)); padding: 6px 12px 8px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.mofu-panel::-webkit-scrollbar, .mofu-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.mofu-scroll { scrollbar-width: none; }
.mofu-panel h2 { font-weight: 400; font-size: 1.3rem; letter-spacing: .04em; text-shadow: 2px 2px 0 #140c24; }
.mofu-kicker { font-size: .5rem; letter-spacing: .2em; color: var(--gold); text-shadow: 1px 1px 0 #140c24; }
.mofu-lead { font-size: .9rem; line-height: 1.7; }
/* もっと下があるときの ▼（ブラウザのスクロールバーの代わり） */
.mofu-more { position: sticky; bottom: 0; display: block; height: 0; text-align: center; pointer-events: none; }
.mofu-more::after { content: "▼"; position: relative; top: -16px; font-size: 12px; color: var(--gold); text-shadow: 1px 1px 0 #140c24; animation: mofu-cur-bob .8s steps(2) infinite; }
.mofu-panel:not(.has-more) .mofu-more { display: none; }
@keyframes mofu-cur-bob { 50% { top: -12px; } }

/* メニュー項目（▶カーソル） */
.mofu-menu { display: grid; gap: 0; margin-top: 8px; justify-items: stretch; }
.mofu-menu button, .mofu-link {
	position: relative; display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px 10px 34px;
	background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--cream);
	font-family: var(--jp); font-weight: 400; font-size: 1.05rem; line-height: 1.4; letter-spacing: .06em; text-align: left;
	text-shadow: 2px 2px 0 #140c24; transition: none;
}
.mofu-menu button::before, .mofu-link::before {
	content: "▶"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: .8em; color: var(--gold); opacity: 0;
}
.mofu-menu button:focus::before, .mofu-menu button:hover::before, .mofu-link:focus::before, .mofu-link:hover::before { opacity: 1; animation: mofu-cur .9s steps(1) infinite; }
.mofu-menu button:focus, .mofu-menu button:hover, .mofu-link:focus, .mofu-link:hover { color: var(--gold); background: rgba(255, 210, 58, .08); }
.mofu-menu button:active, .mofu-link:active { transform: translateY(1px); }
.mofu-menu button:disabled { opacity: .45; }
.mofu-menu button.is-sub, .mofu-link { background: none; box-shadow: none; font-size: .85rem; color: rgba(255, 248, 236, .72); }
.mofu-menu button.is-sub { margin-top: 6px; border-top: 2px dashed rgba(224, 168, 104, .35); }
.mofu-link { margin-top: 2px; }
@keyframes mofu-cur { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* 札（タブ・切りかえ）：ドットの角のタグ */
.mofu-rec-tabs button, .mofu-seg button {
	border: 6px solid transparent; border-image: var(--tag) 3 fill / 6px / 0 stretch; border-radius: 0; background: none;
	color: var(--cream); font: 400 12px/1.2 var(--jp); padding: 4px 4px; min-height: 36px; text-shadow: 1px 1px 0 #140c24;
}
.mofu-rec-tabs button.is-on, .mofu-seg button.on { border-image: var(--tag-on) 3 fill / 6px / 0 stretch; background: none; color: #2a1a26; text-shadow: none; }
.mofu-rec-tabs button:focus-visible, .mofu-seg button:focus-visible { color: var(--gold); }
.mofu-rec-tabs button.is-on:focus-visible, .mofu-seg button.on:focus-visible { color: #2a1a26; }
.mofu-rec-tabs { gap: 4px; }
.mofu-seg { gap: 4px; }

/* うさぎ選択・称号・カード・おだいの箱もドットの札に */
.mofu-rabbit, .mofu-rec-title, .mofu-card, .mofu-rec-daily {
	border: 6px solid transparent; border-image: var(--tag) 3 fill / 6px / 0 stretch; border-radius: 0; background: none; box-shadow: none;
}
.mofu-rabbit:not(:disabled):hover, .mofu-rabbit:focus-visible, .mofu-rabbit:focus { border-image: var(--tag-on) 3 fill / 6px / 0 stretch; background: none; color: #2a1a26; transform: none; }
.mofu-rabbit.is-rec { border-color: transparent; }
.mofu-rabbit b, .mofu-rec-title b { font-weight: 400; }
.mofu-rec-title.is-on { border-image: var(--tag-on) 3 fill / 6px / 0 stretch; color: #2a1a26; }
.mofu-rec-title.is-on small, .mofu-rec-title.is-on em { color: #5a3018; }
.mofu-card.is-got { border-image: var(--tag-on) 3 fill / 6px / 0 stretch; }

/* 勲章：ドット絵のメダル（名前は下に1行・説明は えらぶと出る） */
.mofu-medals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 4px 0; }
.mofu-medal { position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; padding: 2px 0; border: 0; background: none; color: inherit; cursor: pointer; min-height: 44px; }
.mofu-medal img { width: 30px; height: 40px; image-rendering: pixelated; }
.mofu-medal small { font-size: 10px; line-height: 1.2; white-space: nowrap; letter-spacing: 0; }
.mofu-medal:not(.is-got) small { opacity: .5; }
.mofu-medal.is-got img { animation: mofu-medal-shine 2.4s steps(1) infinite; }
.mofu-medal.is-new img { animation: mofu-hop .45s ease-in-out 6 alternate; }
.mofu-medal.is-new::after { content: "NEW"; position: absolute; top: -2px; right: 0; font-family: var(--px); font-size: 7px; color: var(--gold); text-shadow: 1px 1px 0 #140c24; }
.mofu-medal.is-sel small { color: var(--gold); opacity: 1; }
.mofu-medal-desc { min-height: 1.5em; margin: 0 0 4px; font-size: .78rem; color: var(--gold); text-align: center; }
@keyframes mofu-medal-shine { 0%, 90% { filter: none; } 91%, 100% { filter: brightness(1.45); } }

/* 結果の数字・ランク */
.mofu-stats dd { font-weight: 400; }
.mofu-rank { border-radius: 0; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }

/* トースト・ヒント・バナーもドットの札 */
.mofu-toast, .mofu-hint { border-radius: 0; border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; background: none; box-shadow: none; }
.mofu-hint { color: var(--cream); }
.mofu-hint p { font-weight: 400; text-shadow: 1px 1px 0 #140c24; }

/* ---------- タイトル画面 ---------- */
.mofu-title { justify-content: flex-start; padding-top: max(48px, 7vh); gap: 0; }
.mofu-title__main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; }
.mofu-title__head { display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.mofu-title__start {
	position: relative; background: none; border: 0; min-height: 48px; min-width: 44px; padding: 14px 28px; cursor: pointer;
	font-family: var(--px); font-size: 16px; letter-spacing: .12em; color: #fff; line-height: 1;
	text-shadow: 2px 0 0 #2a1a26, -2px 0 0 #2a1a26, 0 2px 0 #2a1a26, 0 -2px 0 #2a1a26, 2px 2px 0 #2a1a26, -2px 2px 0 #2a1a26, 2px -2px 0 #2a1a26, -2px -2px 0 #2a1a26, 4px 4px 0 #ff5c9a, 5px 6px 0 #2a1a26;
	animation: mofu-fade 1s 1.2s both;
}
.mofu-title__start span { display: inline-block; animation: mofu-push 1.6s steps(1) infinite, mofu-push-bob 3.2s ease-in-out infinite; }
@keyframes mofu-push { 0%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes mofu-push-bob { 50% { transform: translateY(-3px); } }
.mofu-title .mofu-menu.mofu-win {
	width: min(280px, 86vw); margin: 0; padding: 4px 6px; border: 16px solid transparent; border-image: var(--win) 8 fill / 16px / 0 stretch;
	filter: drop-shadow(0 6px 0 rgba(10, 6, 20, .45)); animation: mofu-rise .3s ease both;
}
.mofu-title__tags { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; max-width: 100%; }
.mofu-title__tag {
	margin: 0; border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; padding: 0 6px 1px;
	font-size: clamp(11px, 2.9vw, 13px); line-height: 1.4; white-space: nowrap; color: var(--cream); text-shadow: 1px 1px 0 #140c24;
}
.mofu-title__tag small { display: block; font-family: var(--px); font-size: 7px; letter-spacing: .12em; color: var(--gold); line-height: 1.8; }
.mofu-title__tag.is-done b { color: var(--gold); }
.mofu-title__tag b { font-weight: 400; }
.mofu-title__who, .mofu-title__daily { display: none; }
.mofu-title__copy { font-size: .6rem; opacity: .6; left: 0; right: 0; text-align: center; }
/* 横持ち：［ロゴ＋PUSH START］｜［メニュー］｜りんか（絵の幅ぶん右をあける＝重ならない） */
.mofu.is-landscape .mofu-title { flex-direction: row; align-items: center; justify-content: center; padding: 30px calc(min(40vh, 42vw) + 1vw) 16px 1vw; gap: 0; }
.mofu.is-landscape .mofu-title__main { flex-direction: row; align-items: center; justify-content: center; gap: 2.5vw; width: 100%; }
.mofu.is-landscape .mofu-title__logo { width: min(46vw, 520px, 88vh); }
.mofu.is-landscape .mofu-title .mofu-menu.mofu-win { width: min(250px, 28vw); flex: none; }
.mofu.is-landscape .mofu-title__art { height: 84%; max-width: 42vw; }
.mofu.is-landscape.is-menu .mofu-title__logo { width: min(38vw, 470px, 78vh); }
/* 縦持ち：上にロゴ、その下に メニュー（左）｜りんか（右下） */
.mofu.is-portrait .mofu-title__logo { width: min(88vw, 520px); }
.mofu.is-portrait .mofu-title__art { height: 42%; max-width: 46vw; right: 0; }
.mofu.is-portrait .mofu-title__main { width: 100%; }
.mofu.is-portrait .mofu-title .mofu-menu.mofu-win { align-self: flex-start; width: min(52vw, 280px); margin-top: 1vh; }
.mofu.is-portrait .mofu-title__start { margin-top: 3vh; }

/* ---------- 2026-09-26 仕上げ（見た目と判定の直し） ---------- */
/* メニュー：「りんかワールドへもどる」は小さく1行（折れて「もど／る」にならない） */
.mofu-menu button.is-sub { white-space: nowrap; font-size: .78rem; letter-spacing: .02em; padding-left: 30px; min-height: 44px; }
.mofu-title .mofu-menu button { white-space: nowrap; }
/* きろく：ステージごとの勲章の札（ドットの枠）。メダルの名前は短く1行 */
.mofu-rec-stage { border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; border-radius: 0; background: none; padding: 4px 6px 0; margin: 0 0 6px; }
.mofu-rec-stage h3 { font-weight: 400; font-size: 12px; letter-spacing: .04em; text-shadow: 1px 1px 0 #140c24; }
.mofu-rec-stage .mofu-medal-desc { min-height: 1.4em; margin: 0 0 2px; font-size: .72rem; line-height: 1.4; }
.mofu-medal img { width: 30px; height: 40px; }
.mofu-medal small { max-width: 100%; overflow: hidden; text-overflow: clip; font-size: 10px; }
.mofu-rec-help { text-align: center; margin: 2px 0 6px; opacity: .8; }
.mofu-rec-list { display: none; }
/* 称号・記録の数字もドットの字（太字の まねを しない） */
.mofu-rec-title b, .mofu-rec-daily b, .mofu-stats dd { font-weight: 400; }
.mofu-rec-title small { line-height: 1.4; }
/* せってい：音量のつまみもドット風（四角いつまみ・木のみぞ） */
.mofu-field { font-weight: 400; }
.mofu-field input[type=range] { -webkit-appearance: none; appearance: none; height: 28px; background: none; cursor: pointer; }
.mofu-field input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #140c24; border: 2px solid #e0a868; box-shadow: inset 0 2px 0 #000; }
.mofu-field input[type=range]::-moz-range-track { height: 8px; background: #140c24; border: 2px solid #e0a868; }
.mofu-field input[type=range]::-moz-range-progress { height: 8px; background: var(--gold); }
.mofu-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -9px; background: var(--gold); border: 2px solid #2a1a26; box-shadow: inset -3px -3px 0 #c88a10, inset 2px 2px 0 #fff4c0; border-radius: 0; }
.mofu-field input[type=range]::-moz-range-thumb { width: 14px; height: 20px; background: var(--gold); border: 2px solid #2a1a26; border-radius: 0; }
.mofu-field--check input { accent-color: var(--gold); }
/* ▼（もっと下がある）の うしろを 少し暗く＝文字や札に かさなっても 読める */
/* 紙芝居のドット絵の場面（2026-09-26 作り直し）：位置と大きさは JS が 640×360 の座標で直接入れる（足元＝地面の線） */
.mofu-ops__spr { transform: scaleX(var(--fx, 1)); transform-origin: 50% 50%; }
.mofu-ops__prop { position: absolute; image-rendering: pixelated; z-index: 1; }
.mofu-ops__mouth { position: absolute; border-radius: 50%; background: #2a1a14; box-shadow: inset 0 3px 0 #140c0a; }
.mofu-ops__muffler.is-flip::after { left: auto; right: 12px; transform: rotate(-8deg); }
/* ぴょんぴょんは「ほとんど地面にいて、ときどき はねる」＝浮いて見えない */
@keyframes mofu-ops-hop { 0%, 50%, 100% { margin-top: 0; } 25% { margin-top: -9px; } }
.mofu-ops__spr.is-hop { animation: mofu-ops-hop 1.1s ease-in-out infinite; }
.mofu-ops__spr.is-carried { animation: mofu-ops-hop .5s ease-in-out infinite; }
/* 夜：まっ黒の かげ絵にしない（オオカミとキツネと ふくろのうさぎが 分かるように） */
.mofu-ops--night .mofu-ops__spr, .mofu-ops--night .mofu-ops__prop { filter: brightness(.62) saturate(.75); }
.mofu-ops--night .mofu-ops__spr.is-villain { filter: brightness(.42) saturate(.6) contrast(1.1); }
.mofu-ops--night .mofu-ops__spr.is-peek { filter: brightness(.85); }
.mofu-ops--castle .mofu-ops__bgwrap { filter: none; }
.mofu-ops__group--sneak { animation: mofu-ops-sneak 7s linear both; }
/* 紙芝居の文字の窓・スキップ・ページの点も ドットの部品に（ほかの画面と同じ 木の窓） */
.mofu-op__box { border-radius: 0; background: none; color: var(--cream); border: 16px solid transparent; border-image: var(--win) 8 fill / 16px / 0 stretch; box-shadow: none; filter: drop-shadow(0 6px 0 rgba(10, 6, 20, .45)); padding: 4px 12px 12px; }
.mofu-op__text { font-weight: 400; text-shadow: 2px 2px 0 #140c24; letter-spacing: .03em; }
.mofu-op__more { color: var(--gold); right: 8px; bottom: 0; }
.mofu-op__skip { border-radius: 0; border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; background: none; font-weight: 400; min-height: 44px; padding: 0 .9em; text-shadow: 1px 1px 0 #140c24; }
.mofu-op__dots i { border-radius: 0; width: 8px; height: 8px; }
.mofu-op__dots i.on { background: var(--gold); box-shadow: none; }
/* ボスの攻略カードの項目も ドットの札 */
.mofu-brief__tips li { border-radius: 0; border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; background: none; font-weight: 400; padding: 4px 6px; }
/* 読みこみ中：ドットの くるくる */
.mofu-loading { font-weight: 400; }
.mofu-loading i { border-radius: 0; animation: mofu-spin 1s steps(8) infinite; }
/* ▼（もっと下がある）は 右下の すみに小さく（文字に かぶらない） */
.mofu-more { text-align: right; }
.mofu-more::after { right: -4px; background: #2b2150; padding: 0 3px; box-shadow: 0 0 4px 3px #2b2150; }
/* メニューの ▶ と明るい帯は「えらんでいる項目」だけ（マウスを乗せると その項目が えらばれる）＝2つ光らない */
.mofu-menu button:hover:not(:focus), .mofu-link:hover:not(:focus) { background: none; color: var(--cream); }
.mofu-menu button:hover:not(:focus)::before, .mofu-link:hover:not(:focus)::before { opacity: 0; animation: none; }
.mofu-menu button.is-sub:hover:not(:focus), .mofu-link:hover:not(:focus) { color: rgba(255, 248, 236, .72); }
/* とった勲章・NEW の勲章に 古い四角い枠を出さない（メダルの絵だけ・きらり） */
.mofu-medal.is-got, .mofu-medal.is-new { background: none; border: 0; box-shadow: none; animation: none; }
/* 日本語は ことばの切れ目（スペース）で改行＝「すくっ／た」「ヒーロ／ー」のように切れない。中国語は ふつうに */
.mofu-screen { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.mofu:lang(zh-CN) .mofu-screen, .mofu:lang(zh-TW) .mofu-screen, .mofu:lang(en) .mofu-screen { word-break: normal; }
/* 空は上へ のばしておく（縦持ちで 舞台の上が あいても 空が つづく） */
.mofu-ops__bg--sky { top: -600px; background-position: 0 100%; background-repeat: no-repeat; }
/* 縦持ちの紙芝居：絵の枠を 横幅に合わせた高さに（空ばかり大きくならない）→ 文字の窓も その下へ */
.mofu.is-portrait .mofu-op__art, .mofu.is-portrait .mofu-op__vignette { height: min(62%, calc(78vw + 70px)); }
.mofu.is-portrait .mofu-op__box { top: calc(min(62%, calc(78vw + 70px)) + 14px); }
.mofu.is-portrait .mofu-op__art, .mofu.is-portrait .mofu-op__vignette { top: 8%; }
.mofu.is-portrait .mofu-op__box { top: calc(8% + min(62%, calc(78vw + 70px)) + 14px); }

/* ---------- 2026-09-26 横画面のおすすめ（縦持ちのスマホのタイトルだけ・押さなくても進める・横にすると自動で消える） ---------- */
.mofu-rotate-hint {
	position: absolute; z-index: 2; margin: 0; pointer-events: none;
	left: max(4vw, calc(env(safe-area-inset-left, 0px) + 8px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 9vh);
	max-width: min(56vw, 300px);
	display: flex; align-items: center; gap: 8px;
	border: 6px solid transparent; border-image: var(--tag-glass) 3 fill / 6px / 0 stretch; padding: 4px 8px 5px 4px;
	color: var(--cream); text-shadow: 1px 1px 0 #140c24; line-height: 1.35;
	animation: mofu-rise .4s ease both;
}
.mofu-rotate-hint span { display: grid; gap: 1px; }
.mofu-rotate-hint b { font-size: clamp(13px, 3.6vw, 15px); font-weight: 400; color: var(--gold); }
.mofu-rotate-hint small { font-size: clamp(11px, 3vw, 12.5px); opacity: .92; }
.mofu-rotate-hint__ic { flex: none; width: 38px; height: 38px; color: var(--mint); filter: drop-shadow(1px 1px 0 #140c24); }
.mofu-rotate-hint__phone { transform-box: fill-box; transform-origin: 50% 50%; animation: mofu-rotate-phone 2.6s ease-in-out infinite; }
@keyframes mofu-rotate-phone { 0%, 25% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
.mofu.is-landscape .mofu-rotate-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .mofu-rotate-hint__phone { animation: none; } }