/* ZQ STAGE4 効果音 — ミュートボタン v1.19.1（2026-08-25）
 *
 * ★会場で9〜20台が同時に鳴る。教員がすぐ切れる場所に置く＝右上に常設。
 * ★ミラボのパネル（z-index:60）より前に出す。ただし小さくして盤面を潰さない。
 * ★点滅は作らない（光過敏性発作の目安は1秒に3回以上）。このファイルに @keyframes は無い。
 */

.zqsnd-mute {
	position: fixed;
	top: 8px;
	right: 8px;
	z-index: 70;               /* ミラボ(60)より前 */

	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 10px;

	background: rgba(18, 14, 34, .78);
	color: #fff;
	font-size: 19px;
	line-height: 1;

	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45);

	/* 押し心地だけ。色や明るさは点滅させない */
	transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.zqsnd-mute:hover {
	background: rgba(34, 26, 60, .92);
	border-color: rgba(255, 255, 255, .6);
}

.zqsnd-mute:active {
	transform: scale(.93);
}

/* キーボードで辿れるように。教員が触ることを想定 */
.zqsnd-mute:focus-visible {
	outline: 2px solid #7fd4ff;
	outline-offset: 2px;
}

/* 消音中は見た目でわかるように（点滅ではなく、沈んだ色で示す） */
.zqsnd-mute.is-muted {
	background: rgba(90, 24, 24, .82);
	border-color: rgba(255, 150, 150, .55);
	color: #ffd9d9;
}

/* ★動きが苦手な人への配慮。押し込みの動きも止める */
@media (prefers-reduced-motion: reduce) {
	.zqsnd-mute {
		transition: none;
	}

	.zqsnd-mute:active {
		transform: none;
	}
}

/* 画面が狭いときは少し小さく（スマホ操作は Ryu 依頼の未着手項目にも入っている） */
@media (max-width: 480px) {
	.zqsnd-mute {
		width: 34px;
		height: 34px;
		font-size: 16px;
		top: 6px;
		right: 6px;
	}
}