/* りんかのもぐもぐめいろ — mogumogu.css
 * 画面の外枠（DOM）。ゲーム内はドット絵、UIは今どきの見せ方（ネオレトロ）。--u＝ゲーム画面の1ドット。
 */
html.mogu-lock, html.mogu-lock body { overflow: hidden !important; overscroll-behavior: none; }
.mogu {
	--u: 1px; --ink: #2a1a10; --leaf: #3fa34d; --leaf2: #8fdc6a; --carrot: #ff8a2a; --carrot2: #ffc07a; --cream: #fffaf0; --gold: #ffd23a; --pink: #ff6f9e;
	--jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
	--dot: "DotGothic16", "M PLUS Rounded 1c", "Meiryo", sans-serif;
	--px: "Press Start 2P", "DotGothic16", ui-monospace, monospace;
	position: fixed; inset: 0; z-index: 2147483000;
	background: var(--mogu-page, radial-gradient(120% 90% at 50% 0%, #4f9a3e 0%, #25501f 60%, #132b10 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;
}
.mogu *, .mogu *::before, .mogu *::after { box-sizing: border-box; }
.mogu [hidden] { display: none !important; }
.mogu button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.mogu-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); }

.mogu-stage { position: absolute; overflow: hidden; overflow: clip; background: var(--mogu-stagebg, #25501f); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mogu-shake { position: absolute; inset: 0; }
.mogu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* HUD：上にスコア・ハイスコア、下に残機と季節 */
.mogu-hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; font-family: var(--px); text-shadow: 0 calc(var(--u) * 1) 0 var(--ink); }
.mogu.is-playing .mogu-hud { opacity: 1; }
.mogu-hud__top { position: absolute; left: 0; right: calc(var(--u) * 40); top: calc(var(--u) * 14); display: flex; justify-content: space-around; }
.mogu-hud__top span { display: grid; justify-items: center; gap: calc(var(--u) * 4); }
.mogu-hud__top small { font-size: calc(var(--u) * 7); color: var(--carrot2); }
.mogu-hud__top b { font-size: calc(var(--u) * 13); font-weight: 400; }
.mogu-hud__bot { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 548); display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 7.5); }
.mogu-hud__lives { display: inline-flex; gap: calc(var(--u) * 3); min-width: calc(var(--u) * 60); }
.mogu-hud__lives img { width: calc(var(--u) * 14); image-rendering: pixelated; }
.mogu-hud__season { font-family: var(--dot); font-size: calc(var(--u) * 11); flex: 1; text-align: center; }
.mogu-hud__fx i { font-style: normal; font-family: var(--jp); font-weight: 900; font-size: calc(var(--u) * 10); color: var(--gold); animation: mogu-pulse .5s ease-in-out infinite alternate; }
@keyframes mogu-pulse { to { transform: scale(1.12); } }
.mogu-pausebtn { position: absolute; top: calc(var(--u) * 10); right: calc(var(--u) * 8); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border: 0; border-radius: 50%; background: rgba(20, 50, 20, .55); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .5); display: none; align-items: center; justify-content: center; gap: calc(var(--u) * 3); z-index: 3; }
.mogu-pausebtn span { width: calc(var(--u) * 3); height: calc(var(--u) * 11); background: var(--cream); border-radius: 1px; }
.mogu.is-playing .mogu-pausebtn { display: flex; }

/* 大きな文字・得点ポップ・トースト */
.mogu-pop { position: absolute; left: 0; right: 0; top: 40%; text-align: center; pointer-events: none; opacity: 0; z-index: 2; font-family: var(--dot); }
.mogu-pop b { display: block; font-size: calc(var(--u) * 30); font-weight: 400; color: #fff; -webkit-text-stroke: calc(var(--u) * 1.5) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 3) 0 var(--ink); }
.mogu-pop small { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 11); color: var(--carrot2); }
.mogu-pop.is-on { animation: mogu-popin 1.2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.mogu-pop.is-ready b, .mogu-pop.is-go b, .mogu-pop.is-clear b, .mogu-pop.is-over b { font-family: var(--px); font-size: calc(var(--u) * 22); }
.mogu-pop.is-go b, .mogu-pop.is-gold b { color: var(--gold); }
.mogu-pop.is-big b { color: var(--carrot2); font-size: calc(var(--u) * 24); }
.mogu-pop.is-miss b { color: #ffb3cf; }
@keyframes mogu-popin { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1.12); } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--u) * -8)); } }
.mogu-pops { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mogu-scorepop { position: absolute; transform: translate(-50%, -100%); font-family: var(--px); font-size: calc(var(--u) * 8); color: #fff; text-shadow: 0 calc(var(--u) * 1) 0 var(--ink), 0 0 calc(var(--u) * 4) var(--pink); animation: mogu-score .9s ease-out forwards; }
@keyframes mogu-score { 0% { transform: translate(-50%, -60%) scale(.4); } 25% { transform: translate(-50%, -140%) scale(1.3); } 60% { transform: translate(-50%, -150%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -190%); opacity: 0; } }
.mogu-toast { position: absolute; left: 50%; top: calc(var(--u) * 64); transform: translate(-50%, calc(var(--u) * -8)); max-width: 90%; padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: 99px; background: rgba(30, 60, 20, .88); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .4); font-size: calc(var(--u) * 10.5); font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; z-index: 8; /* メニュー画面（z6）より上に出す */ }
.mogu-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mogu-swipe { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 5; background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); }
.mogu-swipe::after { content: "▲"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mogu-swipe[data-dir="r"]::after { transform: rotate(90deg); } .mogu-swipe[data-dir="d"]::after { transform: rotate(180deg); } .mogu-swipe[data-dir="l"]::after { transform: rotate(-90deg); }
.mogu-swipe.is-on { animation: mogu-swipe .35s ease-out; }
@keyframes mogu-swipe { from { opacity: 1; } to { opacity: 0; transform: scale(1.4); } }
.mogu-rotate { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10, 30, 10, .8); z-index: 10; pointer-events: none; }
.mogu.is-rotate .mogu-rotate { display: flex; }
.mogu-rotate div { text-align: center; font-weight: 900; font-size: 18px; }
.mogu-rotate b { display: block; font-size: 44px; }

/* 寸劇のせりふ */
.mogu-skit { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 40); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: rgba(255, 250, 240, .95); color: var(--ink); box-shadow: 0 calc(var(--u) * 3) 0 var(--ink); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 3; }
.mogu-skit.is-on { opacity: 1; }
.mogu-skit p { margin: 0; font-family: var(--dot); font-size: calc(var(--u) * 13); line-height: 1.5; }
.mogu-skit small { display: block; margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 8); opacity: .6; text-align: right; }

/* オーバーレイ画面 */
.mogu-screens { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.mogu-screens.is-open { pointer-events: auto; }
.mogu-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 14); animation: mogu-fade .25s ease-out; }
.mogu-screen--pause, .mogu-screen--result, .mogu-screen--reveal { background: rgba(20, 40, 16, .45); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); }
.mogu-screen--list { background: rgba(20, 40, 16, .4); }
@keyframes mogu-fade { from { opacity: 0; } }
.mogu-panel { width: 100%; max-height: 100%; padding: calc(var(--u) * 16) calc(var(--u) * 14); background: linear-gradient(180deg, rgba(58, 110, 44, .95), rgba(34, 72, 26, .96)); border-radius: calc(var(--u) * 14); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 230, 180, .55), 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, .35); }
.mogu-panel--center { text-align: center; }
.mogu-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.mogu-kicker { margin: 0; font-family: var(--px); font-size: calc(var(--u) * 7.5); color: var(--carrot2); letter-spacing: .12em; }
.mogu-panel h2 { margin: calc(var(--u) * 5) 0 calc(var(--u) * 10); font-family: var(--dot); font-weight: 400; font-size: calc(var(--u) * 20); }
.mogu-panel h3 { margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); font-family: var(--dot); font-weight: 400; font-size: calc(var(--u) * 13); color: var(--carrot2); }
.mogu-lead, .mogu-note { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 10); line-height: 1.6; opacity: .92; }
.mogu-note { font-size: calc(var(--u) * 9); margin-top: calc(var(--u) * 8); }
.mogu-menu { display: grid; gap: calc(var(--u) * 7); width: 100%; }
.mogu-menu--row { grid-template-columns: 1fr 1fr; margin-top: calc(var(--u) * 10); }
.mogu-menu--grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5); }
.mogu-menu--grid .is-main, .mogu-menu--grid .is-sub { grid-column: 1 / -1; }
.mogu-menu button { padding: calc(var(--u) * 9) calc(var(--u) * 6); border: 0; border-radius: 99px; background: linear-gradient(180deg, #fff, #ffe9cf); color: var(--ink); font-weight: 900; font-size: calc(var(--u) * 11.5); box-shadow: 0 calc(var(--u) * 3) 0 #c05a18; }
.mogu-menu button small { font-family: var(--px); font-size: .6em; color: #c05a18; }
.mogu-menu button.is-main { background: linear-gradient(180deg, #ffb870, #ff8a2a); color: #fff; text-shadow: 0 1px 0 #a4400c; font-size: calc(var(--u) * 13); }
.mogu-menu button:active { transform: translateY(calc(var(--u) * 2)); box-shadow: 0 calc(var(--u) * 1) 0 #c05a18; }
/* 背景（流れる迷路）の上でも読めるように、うすい色のボタンは濃い下地にする */
.mogu-menu button.is-sub { background: rgba(24, 52, 20, .82); color: var(--cream); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .5); }
.mogu-menu button.is-locked { background: rgba(24, 40, 30, .85); color: #d8e6d0; box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .35); }
.mogu-menu button:focus-visible, .mogu-card:focus-visible { outline: calc(var(--u) * 2) solid var(--gold); outline-offset: calc(var(--u) * 2); }

/* タイトル */
.mogu-screen--title { justify-content: flex-start; padding-top: calc(var(--u) * 12); }
.mogu-title { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
.mogu-title__logo { width: 92%; height: auto; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, .45)); animation: mogu-logo 2.6s ease-in-out infinite alternate; }
@keyframes mogu-logo { to { transform: translateY(calc(var(--u) * -3)) rotate(-.6deg); } }
.mogu-title__who { margin: calc(var(--u) * 2) 0 0; display: flex; gap: calc(var(--u) * 6); align-items: center; font-weight: 800; font-size: calc(var(--u) * 10.5); }
.mogu-title__who em { font-style: normal; padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--carrot2)); color: var(--ink); font-size: calc(var(--u) * 9); }
.mogu-title__hi { margin: calc(var(--u) * 3) 0 calc(var(--u) * 6); font-family: var(--px); font-size: calc(var(--u) * 7); color: var(--carrot2); }
.mogu-title__hi b { color: #fff; font-weight: 400; }
/* 2026-09-25 うすくて見えにくかったので、はっきり・ゆっくり点滅に（消えるほど暗くしない） */
.mogu-title__start { margin-top: calc(var(--u) * 26); border: 0; background: rgba(20, 50, 20, .6); border-radius: 999px; box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .55), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .35); outline: none; font-family: var(--px); font-size: calc(var(--u) * 14); color: #fff; letter-spacing: .06em; text-shadow: 0 calc(var(--u) * 2) 0 var(--ink), 0 0 calc(var(--u) * 6) var(--carrot), 0 0 calc(var(--u) * 14) var(--carrot); animation: mogu-tap-pulse 1.6s ease-in-out infinite; padding: calc(var(--u) * 10) calc(var(--u) * 20); }
@keyframes mogu-tap-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.97); } }
@keyframes mogu-blink { 50% { opacity: .15; } }
.mogu-title .mogu-menu { width: 86%; }
.mogu-title .mogu-menu button { padding: calc(var(--u) * 6) calc(var(--u) * 4); font-size: calc(var(--u) * 10); }

/* リスト系 */
.mogu-cards { display: grid; gap: calc(var(--u) * 6); }
.mogu-card { display: grid; gap: calc(var(--u) * 2); text-align: left; padding: calc(var(--u) * 9) calc(var(--u) * 11); border: 0; border-radius: calc(var(--u) * 10); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .25); }
.mogu-card b { font-size: calc(var(--u) * 12); }
.mogu-card small { font-size: calc(var(--u) * 9); opacity: .8; }
.mogu-card.is-got { background: rgba(255, 210, 58, .14); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 210, 58, .6); }
.mogu-card.is-on { background: linear-gradient(90deg, var(--gold), var(--carrot2)); color: var(--ink); }
.mogu-card.is-special { box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--pink); }
.mogu-card:disabled { opacity: .55; cursor: default; }
.mogu-stats { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 5) calc(var(--u) * 12); margin: 0 0 calc(var(--u) * 8); text-align: left; font-size: calc(var(--u) * 11); }
.mogu-stats dt { opacity: .75; } .mogu-stats dd { margin: 0; text-align: right; font-weight: 800; }
.mogu-stats dd b { font-family: var(--px); font-size: calc(var(--u) * 12); color: var(--gold); font-weight: 400; }
.mogu-stats--small { font-size: calc(var(--u) * 9.5); margin-top: calc(var(--u) * 10); }
.mogu-new { font-style: normal; font-family: var(--px); font-size: calc(var(--u) * 7); color: var(--pink); animation: mogu-blink .6s steps(2) infinite; }
.mogu-got { margin: calc(var(--u) * 4) 0; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); background: rgba(255, 210, 58, .15); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 210, 58, .6); font-weight: 900; font-size: calc(var(--u) * 10); line-height: 1.6; }
.mogu-got--title { background: rgba(255, 111, 158, .15); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 143, 184, .7); }
.mogu-got--card { background: rgba(124, 156, 255, .18); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(160, 180, 255, .8); }
.mogu-medal-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: calc(var(--u) * 4); align-items: center; padding: calc(var(--u) * 7) 0; border-bottom: calc(var(--u) * 1) dashed rgba(255, 255, 255, .2); font-size: calc(var(--u) * 10); }
.mogu-medal-row b { font-family: var(--dot); font-weight: 400; font-size: calc(var(--u) * 11.5); }
.mogu-medal-row span { padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: 99px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .45); font-size: calc(var(--u) * 8.5); font-weight: 800; }
.mogu-medal-row span.on { background: linear-gradient(90deg, var(--gold), var(--carrot2)); color: var(--ink); }
.mogu-medal-row small { grid-column: 1 / -1; font-size: calc(var(--u) * 8.5); opacity: .7; }
.mogu-zukan { display: flex; gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) 0; border-bottom: calc(var(--u) * 1) dashed rgba(255, 255, 255, .2); }
.mogu-zukan img { width: calc(var(--u) * 56); height: calc(var(--u) * 56); object-fit: contain; image-rendering: pixelated; background: rgba(255, 250, 230, .9); border-radius: calc(var(--u) * 10); }
.mogu-zukan b { font-size: calc(var(--u) * 12); } .mogu-zukan small { display: block; font-size: calc(var(--u) * 8.5); opacity: .8; }
.mogu-zukan ul { margin: calc(var(--u) * 4) 0 0; padding-left: calc(var(--u) * 14); font-size: calc(var(--u) * 9.5); line-height: 1.55; }
.mogu-zukan li.is-lock { opacity: .5; }
.mogu-how__row { display: flex; gap: calc(var(--u) * 8); align-items: center; margin-bottom: calc(var(--u) * 7); }
.mogu-how__row img { flex: none; width: calc(var(--u) * 36); height: calc(var(--u) * 36); object-fit: contain; image-rendering: pixelated; background: rgba(255, 250, 230, .92); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 2); }
.mogu-how__row b { display: block; font-size: calc(var(--u) * 11); }
.mogu-how__row p, .mogu-how__p { margin: 0; font-size: calc(var(--u) * 9.5); line-height: 1.6; opacity: .92; }
.mogu-field { display: flex; align-items: center; gap: calc(var(--u) * 10); margin: 0 0 calc(var(--u) * 12); font-weight: 800; font-size: calc(var(--u) * 11); }
.mogu-field > span { min-width: calc(var(--u) * 60); }
.mogu-field input[type=range] { flex: 1; accent-color: var(--carrot); }
.mogu-field input[type=text] { flex: 1; min-width: 0; padding: calc(var(--u) * 6) calc(var(--u) * 10); border: 0; border-radius: 99px; font: inherit; font-size: 16px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.mogu-field--check input { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.mogu-field--check > span { min-width: 0; }

/* りんかカード（未入手は うっすら） */
.mogu-book { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 10); }
.mogu-book__card { position: relative; aspect-ratio: 5 / 7; border-radius: calc(var(--u) * 8); overflow: hidden; display: flex; align-items: center; justify-content: center; background: #2f5a24; box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 210, 58, .6); }
.mogu-book__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mogu-book__card.is-got { box-shadow: 0 0 0 calc(var(--u) * 2) var(--gold), 0 0 calc(var(--u) * 10) rgba(255, 210, 58, .6); }
.mogu-book__card span { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 3); background: linear-gradient(transparent, rgba(20, 30, 10, .9)); font-size: calc(var(--u) * 7.5); font-weight: 800; }
.mogu-book__tease { position: absolute; inset: -12%; width: 124% !important; height: 124% !important; filter: blur(calc(var(--u) * 5)) saturate(.8); opacity: .5; }
.mogu-book__card.is-hide::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(60, 110, 40, .55) 0 calc(var(--u) * 6), rgba(80, 140, 50, .6) calc(var(--u) * 6) calc(var(--u) * 7)); }
.mogu-book__card i { position: relative; z-index: 1; font-style: normal; font-family: var(--dot); font-size: calc(var(--u) * 24); color: rgba(255, 240, 200, .8); }
.mogu-reveal { width: 100%; text-align: center; }
.mogu-reveal__k { margin: 0; font-family: var(--px); font-size: calc(var(--u) * 9); color: var(--gold); animation: mogu-blink 1s steps(2) infinite; }
.mogu-reveal__card { position: relative; width: 62%; margin: calc(var(--u) * 12) auto calc(var(--u) * 8); aspect-ratio: 5 / 7; border-radius: calc(var(--u) * 10); overflow: hidden; box-shadow: 0 0 0 calc(var(--u) * 3) var(--gold), 0 0 calc(var(--u) * 30) rgba(255, 210, 58, .8); animation: mogu-cardin 1s cubic-bezier(.2, 1.4, .4, 1); }
.mogu-reveal__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mogu-reveal__card i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); background-size: 250% 100%; animation: mogu-sheen 2.2s ease-in-out infinite; }
@keyframes mogu-cardin { from { transform: rotateY(90deg) scale(.6); } }
@keyframes mogu-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.mogu-reveal h2 { font-family: var(--dot); font-weight: 400; font-size: calc(var(--u) * 18); margin: 0 0 calc(var(--u) * 6); }
.mogu-wait { text-align: center; font-weight: 800; font-size: calc(var(--u) * 12); font-family: var(--dot); }
.mogu-loading { display: flex; justify-content: center; padding: calc(var(--u) * 12); }
.mogu-loading i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; border: calc(var(--u) * 3) solid rgba(255, 230, 180, .25); border-top-color: var(--carrot); animation: mogu-spin .8s linear infinite; }
@keyframes mogu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mogu-title__logo, .mogu-title__start, .mogu-hud__fx i { animation: none; } }

/* カードを見ている間（押せない1.5秒）は うすく */
.mogu-menu button:disabled { opacity: .45; cursor: default; transform: none; }

/* きょうのおだい（2026-09-24） */
.mogu-title__daily { margin: calc(var(--u) * 4) auto 0; max-width: 92%; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 999px; font-size: calc(var(--u) * 9); font-weight: 800; text-align: center; background: rgba(20, 40, 20, .72); border: 1px solid rgba(255, 210, 58, .5); }
.mogu-title__daily small { margin-left: .3em; opacity: .75; }
.mogu-title__daily.is-done { border-color: #7de08a; color: #b8f5c0; }

/* ことば（日本語・English・简体中文・繁體中文）2026-09-24 */
.mogu-field--lang { display: grid; gap: calc(var(--u) * 5); }
.mogu-langs { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); }
.mogu-lang { flex: 1 1 auto; min-width: 30%; padding: calc(var(--u) * 6) calc(var(--u) * 4); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: inherit; font: inherit; font-size: calc(var(--u) * 9.5); font-weight: 800; cursor: pointer; }
.mogu-lang.is-on { background: #ff6f9c; border-color: #ff6f9c; color: #fff; }
.mogu:lang(zh-CN) { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "M PLUS Rounded 1c", sans-serif; }
.mogu:lang(zh-TW) { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "M PLUS Rounded 1c", sans-serif; }

/* UIアイコン（img/ui/icons/。絵文字の代わり 2026-09-25） */
.mogu-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; }
.mogu-rotate .mogu-uic { width: 1.3em; height: 1.3em; vertical-align: middle; }
.mogu-hud__fx .mogu-uic { width: 1.3em; height: 1.3em; }

/* 2026-09-27 ハート・たから・もぐもぐボーナス（迷路の上の段）＋時間のメダル */
.mogu-hud__mid { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 570); display: flex; align-items: center; gap: calc(var(--u) * 10); font-family: var(--jp); font-weight: 900; font-size: calc(var(--u) * 9.5); }
.mogu-hud__hp { display: inline-flex; gap: calc(var(--u) * 3); }
.mogu-hud__hp b { display: inline-flex; font-size: calc(var(--u) * 15); font-weight: 400; color: var(--pink); line-height: 1; }
.mogu-hud__hp .mogu-uic { width: 1.25em; height: 1.25em; vertical-align: middle; }
.mogu-hud__hp b.is-off { opacity: .28; filter: grayscale(1); }
.mogu-hud__hp b.is-lost { animation: mogu-hplost .6s ease-out; }
@keyframes mogu-hplost { 0% { transform: scale(1.6); opacity: 1; filter: none; } 100% { transform: scale(1); } }
.mogu-hud__tr { flex: 1; color: #eaf8ff; }
.mogu-hud__tr .mogu-uic, .mogu-hud__fx i.is-boost .mogu-uic { width: 1.3em; height: 1.3em; vertical-align: -0.35em; }
.mogu-hud__combo { color: var(--gold); font-size: calc(var(--u) * 11); animation: mogu-pulse .4s ease-in-out infinite alternate; }
.mogu-hud__fx i + i { margin-left: calc(var(--u) * 6); }
.mogu-hud__fx i.is-boost { color: #9fe8ff; }
.mogu-scorepop.is-combo { font-family: var(--jp); font-weight: 900; font-size: calc(var(--u) * 11); color: var(--gold); text-shadow: 0 calc(var(--u) * 1) 0 var(--ink), 0 0 calc(var(--u) * 5) var(--carrot); white-space: nowrap; }
.mogu-scorepop.is-heal { font-family: var(--jp); font-weight: 900; font-size: calc(var(--u) * 10); color: #ffd0dc; white-space: nowrap; }
.mogu-medal-ico.mogu-uic { width: 1.5em; height: 1.5em; vertical-align: middle; }
.mogu-medal-none { font-style: normal; opacity: .4; padding: 0 .3em; }
.mogu-tmedals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.mogu-tm-h { margin: calc(var(--u) * 12) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 11.5); }
.mogu-tm-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: calc(var(--u) * 4); align-items: center; padding: calc(var(--u) * 6) 0; border-bottom: calc(var(--u) * 1) dashed rgba(255, 255, 255, .2); font-size: calc(var(--u) * 10); }
.mogu-tm-row b { font-family: var(--dot); font-weight: 400; font-size: calc(var(--u) * 11); }
.mogu-tm-row span { display: grid; justify-items: center; min-width: calc(var(--u) * 44); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-radius: calc(var(--u) * 8); background: rgba(255, 255, 255, .08); }
.mogu-tm-row span small { font-size: calc(var(--u) * 7.5); opacity: .7; }
.mogu-tm-row span.on { background: rgba(255, 210, 58, .16); }
.mogu-tm-lim { grid-column: 1 / -1; font-size: calc(var(--u) * 8.5); opacity: .75; }
.mogu-tm-sum { text-align: center; }
@media (prefers-reduced-motion: reduce) { .mogu-hud__combo, .mogu-hud__hp b.is-lost { animation: none; } }
