/* ============================================================
 * 📢 rinka-notice.css — お知らせ帯（りんかワールド最上部）
 *   通常フロー（静的配置）でbody最上部に差し込む＝ページを自然に押し下げる。
 *   消すとレイアウトは元通り（「何もなかったように」）。
 * ========================================================== */
.rinka-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
	position: relative;
	z-index: 100000;
	font-family: inherit;
	text-align: left;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	animation: rinka-notice-in .28s ease-out;
}
@keyframes rinka-notice-in {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}
.rinka-notice.is-info { background: linear-gradient(90deg, #ff8ec2, #ff79b0); }
.rinka-notice.is-bug  { background: linear-gradient(90deg, #ffb15a, #ff6a6a); }

.rinka-notice__icon {
	flex: 0 0 auto;
	font-size: 17px;
	line-height: 1;
}
.rinka-notice__text {
	flex: 1 1 auto;
	font-weight: 600;
	letter-spacing: .01em;
	word-break: break-word;
}
.rinka-notice__close {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .25);
	border: 0;
	color: #fff;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
	padding: 0;
}
.rinka-notice__close:hover { background: rgba(255, 255, 255, .45); }
.rinka-notice__close:active { transform: scale(.92); }

@media (max-width: 600px) {
	.rinka-notice { font-size: 13px; padding: 9px 11px; gap: 8px; }
	.rinka-notice__close { width: 24px; height: 24px; font-size: 16px; }
}

/* ============================================================
 * 🐰 メンテナンス中オーバーレイ（画面ぜんぶをふさぐ）
 * ========================================================== */
html.rinka-maint-on, html.rinka-maint-on body { overflow: hidden !important; }
.rinka-maint {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* 何よりも前面 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: linear-gradient(160deg, #ffd9ec 0%, #ffb3d9 45%, #ff8ec2 100%);
	color: #7a2b56;
	text-align: center;
	font-family: inherit;
	animation: rinka-maint-fade .3s ease-out;
}
@keyframes rinka-maint-fade { from { opacity: 0; } to { opacity: 1; } }
.rinka-maint__inner {
	max-width: 440px;
	width: 100%;
	background: rgba(255, 255, 255, .78);
	border-radius: 28px;
	padding: 34px 26px 30px;
	box-shadow: 0 12px 40px rgba(214, 90, 150, .35);
	backdrop-filter: blur(2px);
}
.rinka-maint__bunny {
	font-size: 76px;
	line-height: 1;
	animation: rinka-maint-hop 1.4s ease-in-out infinite;
}
@keyframes rinka-maint-hop {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-14px) rotate(3deg); }
}
.rinka-maint__title {
	margin-top: 12px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: .06em;
	color: #e14b8f;
}
.rinka-maint__dots {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin: 16px 0 14px;
}
.rinka-maint__dots span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff79b0;
	animation: rinka-maint-bounce 1s ease-in-out infinite;
}
.rinka-maint__dots span:nth-child(2) { animation-delay: .16s; }
.rinka-maint__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes rinka-maint-bounce {
	0%, 80%, 100% { transform: scale(.5); opacity: .5; }
	40%           { transform: scale(1);  opacity: 1; }
}
.rinka-maint__text {
	font-size: 15px;
	line-height: 1.7;
	font-weight: 600;
	word-break: break-word;
	white-space: pre-wrap;
}
@media (max-width: 600px) {
	.rinka-maint__inner { padding: 28px 18px 24px; border-radius: 22px; }
	.rinka-maint__bunny { font-size: 62px; }
	.rinka-maint__title { font-size: 21px; }
	.rinka-maint__text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.rinka-maint__bunny, .rinka-maint__dots span, .rinka-maint { animation: none; }
}