*{
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html,
body,
.game-shell,
.game-area,
#gameCanvas,
.message-layer,
.message-panel,
button,
a,
label,
input{
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

img,
canvas{
	-webkit-user-drag: none;
	user-drag: none;
}

:root{
	color-scheme: dark;
	font-family:
		Inter,
		"Segoe UI",
		"Yu Gothic UI",
		"Yu Gothic",
		Meiryo,
		sans-serif;

	background: #050912;
	color: #f7f9ff;
}


html,
body{
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body{
	display: grid;
	place-items: center;
	padding: 4px;
	touch-action: none;
}

/*==================================================================================================
  初期描画待機用ローダー
==================================================================================================*/
.blockbreaker-initial-cover{
	position:fixed;
	z-index:2147483647;
	inset:0;
	display:grid;
	place-items:center;
	background:#000;
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity 0.22s linear,visibility 0.22s linear;
}

.blockbreaker-initial-cover-content{
	position:absolute;
	left:50%;
	top:50%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(48vw,259.2px);
	transform:translate(-50%,calc(-50% + min(6vw,32.4px)));
	pointer-events:none;
}

.blockbreaker-initial-cover-logo{
	display:block;
	width:100%;
	height:auto;
	margin:0;
	pointer-events:none;
	-webkit-user-drag:none;
	user-drag:none;
}

.blockbreaker-initial-cover-anime{
	display:block;
	flex:0 0 auto;
	width:128px;
	height:128px;
	margin:0.8em 0 0;
	object-fit:contain;
	image-rendering:pixelated;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

.blockbreaker-initial-cover-dots{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.42em;
	width:5.7em;
	min-height:1.55em;
	margin:0.55em 0 0;
	padding:0.22em 0.48em;
	border:2px solid rgba(255,255,255,0.96);
	border-radius:999px;
	box-shadow:0 0 0.5em rgba(255,255,255,0.34),inset 0 0 0.35em rgba(255,255,255,0.18);
	pointer-events:none;
}

.blockbreaker-initial-cover-dots > span{
	display:block;
	width:0.48em;
	height:0.48em;
	border-radius:50%;
	background:#fff;
	box-shadow:0 0 0.45em rgba(255,255,255,0.92),0 0.16em 0.18em rgba(0,0,0,0.42);
	opacity:0;
	transform:translateY(0.7em) scale(0.25);
	animation:blockBreakerInitialCoverDotPop 0.52s cubic-bezier(0.2,1.75,0.42,1) forwards;
}

.blockbreaker-initial-cover-dots > span:nth-child(1){animation-delay:0s;}
.blockbreaker-initial-cover-dots > span:nth-child(2){animation-delay:1s;}
.blockbreaker-initial-cover-dots > span:nth-child(3){animation-delay:2s;}
.blockbreaker-initial-cover-dots > span:nth-child(4){animation-delay:3s;}
.blockbreaker-initial-cover-dots > span:nth-child(5){animation-delay:4s;}

@keyframes blockBreakerInitialCoverDotPop{
	0%{opacity:0;transform:translateY(0.7em) scale(0.25);}
	58%{opacity:1;transform:translateY(-0.48em) scale(1.32);}
	78%{opacity:1;transform:translateY(0.1em) scale(0.9);}
	100%{opacity:1;transform:translateY(0) scale(1);}
}

.blockbreaker-initial-cover-loading{
	display:grid;
	place-items:center;
	margin:0.8em 0 0;
	font-family:"Arial Black","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:0.96rem;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.28em;
	pointer-events:none;
}

.blockbreaker-initial-cover-loading-text{
	display:inline-block;
	padding-left:0.28em;
	white-space:nowrap;
	color:transparent;
	background:
		linear-gradient(90deg,#ff5f78 0%,#ffad32 20%,#48c78e 40%,#3d9dff 60%,#9d6cff 80%,#ff62b0 100%);
	background-size:220% 100%;
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	filter:
		drop-shadow(0 0.12em 0 rgba(255,255,255,0.9))
		drop-shadow(0 0.2em 0.12em rgba(87,80,112,0.28));
	transform-origin:center bottom;
	animation:
		blockBreakerInitialCoverLoadingBounce 0.72s cubic-bezier(0.34,1.56,0.64,1) infinite alternate,
		blockBreakerInitialCoverLoadingColor 2.4s linear infinite;
}

@keyframes blockBreakerInitialCoverLoadingBounce{
	0%{transform:translateY(0) scale(1) rotate(-1deg);}
	100%{transform:translateY(-0.55em) scale(1.06) rotate(1deg);}
}

@keyframes blockBreakerInitialCoverLoadingColor{
	0%{background-position:0% 50%;}
	100%{background-position:220% 50%;}
}

.blockbreaker-initial-cover.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

button{
	font: inherit;
}

.game-shell{
	position: relative;

	width: min(
		calc(100vw - 8px),
		calc((100dvh - 8px) * 9 / 16)
	);

	height: min(
		calc(100dvh - 8px),
		calc((100vw - 8px) * 16 / 9)
	);

	aspect-ratio: 9 / 16;
	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
	background: #050912;

	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.38),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);

	contain: layout paint size;
}

.game-area{
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: none;
}

.background-effect-layer{
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	background: #050912;
	pointer-events: none;
}

.background-effect-layer canvas,
.background-effect-layer img{
	display: block;
	width: 100%;
	height: 100%;
}

.background-effect-layer.is-waiting-background{
	opacity:0;
}

.background-cover-layer{
	position:absolute;
	z-index:1;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	opacity:1;
	pointer-events:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	user-drag:none;
}

.background-cover-layer.is-waiting-background{
	opacity:0;
}

#gameCanvas{
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/*==================================================================================================
  画面中央システム画像
==================================================================================================*/
.system-text-image-layer{
	position:absolute;
	z-index:3;
	inset:0;
	display:grid;
	place-items:center;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.system-text-image-layer[hidden]{
	display:none;
}

.system-text-image-layer.is-visible,
.system-text-image-layer.is-mouse-out{
	opacity:1;
	visibility:visible;
}

.system-text-image-layer.is-fade-in{
	transition:opacity 0.2s linear;
}

.system-text-image-layer.is-mouse-out-fading{
	opacity:0;
	visibility:visible;
	transition:opacity 0.1s linear;
}

.system-text-image{
	display:block;
	width:70%;
	max-width:70%;
	max-height:70%;
	height:auto;
	object-fit:contain;
	transform-origin:center center;
	pointer-events:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	user-drag:none;
}

.system-text-image-layer.is-mouse-out .system-text-image{
	animation:blockBreakerSystemTextMouseOutIn 0.46s cubic-bezier(0.16,0.84,0.24,1) both;
}

@keyframes blockBreakerSystemTextMouseOutIn{
	0%{transform:scale(0.7);}
	62%{transform:scale(1);}
	69%{transform:translateX(-4px) translateY(1px) rotate(-0.8deg) scale(1);}
	76%{transform:translateX(4px) translateY(-1px) rotate(0.8deg) scale(1);}
	83%{transform:translateX(-3px) translateY(-1px) rotate(-0.55deg) scale(1);}
	90%{transform:translateX(2px) translateY(1px) rotate(0.4deg) scale(1);}
	100%{transform:none;}
}

@media (prefers-reduced-motion:reduce){
	.system-text-image-layer.is-fade-in,
	.system-text-image-layer.is-mouse-out-fading{
		transition:none;
	}

	.system-text-image-layer.is-mouse-out .system-text-image{
		animation:none;
	}
}

.art-viewer{
	position: absolute;
	z-index: 8;
	inset: 0;
	overflow: hidden;
	background: #050912;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	overscroll-behavior: none;
}

.art-viewer[hidden]{
	display: none;
}

.art-viewer-viewport{
	position: absolute;
	inset: 0;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}

.art-viewer-viewport.is-dragging{
	cursor: grabbing;
}

.art-viewer-image{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	transform-origin: center center;
	will-change: transform;
	pointer-events: none;
	-webkit-user-drag: none;
	user-drag: none;
}


.art-viewer-guide{
	position: absolute;
	z-index: 2;
	left: 2px;
	bottom: 2px;
	max-width: calc(100% - 310px);
	margin: 0;
	padding: 3px 5px;
	border-radius: 4px;
	background: rgba(3, 7, 18, 0.58);
	color: #ffffff;
	font-size: clamp(0.56rem, 1.2vmin, 0.7rem);
	font-weight: 800;
	line-height: 1.2;
	white-space: normal;
	overflow: visible;
	text-align: left;
	text-shadow:
		-1px -1px 0 rgba(0, 0, 0, 1),
		1px -1px 0 rgba(0, 0, 0, 1),
		-1px 1px 0 rgba(0, 0, 0, 1),
		1px 1px 0 rgba(0, 0, 0, 1);
	pointer-events: none;
}

.art-viewer-controls{
	position: absolute;
	z-index: 2;
	right: 2px;
	bottom: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
	max-width: calc(100% - 4px);
}

.art-viewer-button{
	padding: 5px 9px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background: rgba(3, 7, 18, 0.76);
	color: #ffffff;
	font-size: clamp(0.56rem, 1.2vmin, 0.7rem);
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow:
		-1px -1px 0 rgba(0, 0, 0, 1),
		1px -1px 0 rgba(0, 0, 0, 1),
		-1px 1px 0 rgba(0, 0, 0, 1),
		1px 1px 0 rgba(0, 0, 0, 1);
	cursor: pointer;
}

.art-viewer-button:disabled{
	opacity: 0.42;
	cursor: default;
}

@media (hover: hover) and (pointer: fine){
	.art-viewer-button:not(:disabled):hover{
		filter: brightness(1.18);
	}
}

@media (max-width: 520px){
	.art-viewer-controls{
		flex-wrap: nowrap;
	}
}

.message-layer{
	position: absolute;
	z-index: 4;
	inset: 0;

	display: grid;
	place-items: center;
	padding: clamp(12px, 2.6vmin, 22px);

	background: rgba(3, 7, 18, 0.55);

	transition:
		opacity 0.2s ease,
		visibility 0s linear 0s;
}

.message-layer.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:
		opacity 0.2s ease,
		visibility 0s linear 0.25s;
}

.message-panel{
	width: min(100%, 390px);
	padding: clamp(17px, 3.6vmin, 27px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: clamp(14px, 2.5vmin, 22px);
	background: rgba(15, 23, 42, 0.94);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
	text-align: center;
}

/*==================================================================================================
  通常システムメッセージ
==================================================================================================*/
#messageLayer.is-system-message #messageSub{
	margin:0 0 7px;
	color:#67e8f9;
	font-size:clamp(0.6rem,1.45vmin,0.76rem);
	font-weight:800;
	letter-spacing:0.14em;
}

#messageLayer.is-system-message #messageTitle{
	margin:0;
	color:#ffffff;
	font-size:clamp(1.5rem,4.8vmin,2.5rem);
	line-height:1.2;
}

#messageLayer.is-system-message #messageText{
	margin:13px 0;
	color:#cbd5e1;
	font-size:clamp(0.76rem,1.8vmin,0.95rem);
	line-height:1.7;
}

#messageLayer.is-system-message #messageButtons{
	display:flex;
	align-items:center;
	justify-content:center;
	width:min(247px,100%);
	margin-top:4px;
}

#messageLayer.is-system-message #startButton{
	width:min(247px,100%);
	min-width:0;
	margin:1em 0;
	padding:10px 22px;
	border:0;
	border-radius:999px;
	box-sizing:border-box;
	background:linear-gradient(135deg,#67e8f9,#60a5fa);
	color:#07111f;
	font-weight:800;
	line-height:1.45;
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

/*==================================================================================================
  年齢確認メッセージ
==================================================================================================*/
#messageLayer.is-age-confirm-message #messageSub{
	margin:0 0 0.55em;
	font-family:'derasukogo',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	color:#9d7053;
	font-size:clamp(0.62rem,1.45vmin,0.78rem);
	font-weight:900;
	letter-spacing:0.14em;
	text-shadow:0 1px 0 rgba(255,255,255,0.45);
}

#messageLayer.is-age-confirm-message .age-sound-note{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.42em;
	margin:1em 0 0;
	color:#84a92f;
	font-weight:900;
	text-shadow:0 1px 0 rgba(255,255,255,0.35);
	cursor:pointer;
}

#messageLayer.is-age-confirm-message #messageTitle{
	letter-spacing:0.05em;
	margin:0.35em 0 0.65em;
	font-family:'killgo',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	color:#ad795a;
	font-size:clamp(1.45rem,5.8vmin,2.35rem);
	line-height:1.2;
	text-shadow:0 1px 0 rgba(255,255,255,0.5);
}

#messageLayer.is-age-confirm-message #messageText{
	width:80%;
	margin:1em 0 1em;
	font-family:'cookie',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	color:#cd5252;
	font-size:clamp(1.1rem,1.8vmin,0.95rem);
	line-height:1.7;
	letter-spacing:-0.05em;
	text-shadow:0 1px 0 rgba(255,255,255,0.35);
}

#messageLayer.is-age-confirm-message .age-confirm-lead-text{
	white-space:nowrap;
}

/*
 * 中央揃えの説明文で、先頭・末尾記号を本文幅の計算へ含めない。
 * edgeを改行不可にすることで、折り返し時も記号だけが分離しない。
 */
#messageLayer .blockbreaker-message-punctuation-line{
	position:relative;
	display:inline-block;
}

#messageLayer .blockbreaker-message-punctuation-edge{
	white-space:nowrap;
}

#messageLayer .blockbreaker-message-punctuation-mark{
	display:inline-block;
	width:0;
	overflow:visible;
	pointer-events:none;
}

#messageLayer .blockbreaker-message-punctuation-mark.is-leading{
	position:relative;
	inset-inline-start:-1em;
}

#messageLayer.is-age-confirm-message .age-confirm-marker{
	display:inline-block;
	padding:0 0.08em;
	font-weight:900;
	background:
		linear-gradient(
			transparent 56%,
			rgba(255,222,80,0.92) 56%,
			rgba(255,146,74,0.82) 91%,
			transparent 91%
		);
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}

#messageLayer.is-age-confirm-message .age-sound-panel-button{
	flex:0 0 auto;
	width:clamp(40.8px,7.68vmin,52.8px);
	height:clamp(40.8px,7.68vmin,52.8px);
}

#messageLayer.is-age-confirm-message .age-sound-panel-text{
	letter-spacing:0;
	white-space:nowrap;
}

#messageLayer.is-age-confirm-message #messageButtons{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:0.65em;
	width:min(300px,100%);
	margin-top:0.5em;
	margin-bottom:1em;
}

#messageLayer.is-age-confirm-message #startButton,
#messageLayer.is-age-confirm-message #declineStartButton{
	width:fit-content;
	max-width:100%;
	min-width:0;
	height:100%;
	margin:0;
	padding:0 0.75em 0.08em;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	white-space:nowrap;
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

#messageLayer.is-age-confirm-message #startButton{
	border-image-source:var(--bb-ui-buttonb-aqua);
	color:#fff8df;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
}

#messageLayer.is-age-confirm-message #declineStartButton{
	border-image-source:var(--bb-ui-buttonb-black);
	color:#f8f0d7;
	text-shadow:-1px -1px 0 #2a1208,1px -1px 0 #2a1208,-1px 1px 0 #2a1208,1px 1px 0 #2a1208,0 2px 1px rgba(0,0,0,0.7);
}

.clear-restart-button,
.clear-view-button,
.sub-button{
	border:0;
	border-radius:999px;
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

.clear-restart-button{
	padding: 11px 18px;
	font-weight: 800;
	color: #07111f;
	background: linear-gradient(135deg, #67e8f9, #60a5fa);
}

.clear-view-button{
	padding: 11px 18px;
	font-weight: 800;
	color: #e0f2fe;
	background: rgba(14, 116, 144, 0.42);
	border: 1px solid rgba(103, 232, 249, 0.42);
}

.clear-restart-button[hidden],
.clear-view-button[hidden],
#startButton[hidden],
#declineStartButton[hidden]{
	display:none;
}


.stage-author{
	position: absolute;
	z-index: 3;
	left: 2px;
	bottom: 1px;

	max-width: calc(100% - 4px);
	margin: 0;

	color: rgba(226, 232, 240, 0.82);
	font-size: clamp(0.48rem, 0.92vmin, 0.6rem);
	line-height: 1.05;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	text-shadow:
		-1px -1px 0 rgba(0, 0, 0, 1),
		1px -1px 0 rgba(0, 0, 0, 1),
		-1px 1px 0 rgba(0, 0, 0, 1),
		1px 1px 0 rgba(0, 0, 0, 1);

	pointer-events: auto;
	user-select: text;
}

.stage-author[hidden]{
	display: none;
}

.stage-author a{
	color:inherit;
	text-decoration:none;
	font-weight:bold;
}

#stageAuthor a{
	text-decoration:none;
}

.stage-author a:hover{
	color:#ffffff;
	text-decoration:none;
}

.game-hud{
	position: absolute;
	z-index: 4;
	top: 2px;
	left: 2px;

	
	display: grid;
	gap: 1px;
	max-width: calc(100% - clamp(100px, 22vmin, 150px));

	color: #ffffff;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.02em;

	text-shadow:
		-1px -1px 0 rgba(0, 0, 0, 1),
		1px -1px 0 rgba(0, 0, 0, 1),
		-1px 1px 0 rgba(0, 0, 0, 1),
		1px 1px 0 rgba(0, 0, 0, 1),
		0 0 4px rgba(0, 0, 0, 0.9);

	filter:
		drop-shadow(0 0 1px #000)
		drop-shadow(0 0 1.2px #000);
	pointer-events: none;
}

.hud-stage-line,
.hud-score-line,
.hud-life-line,
.hud-block-remaining{
	margin: 0;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hud-stage-line{
	font-family:'ruika9',sans-serif;
	font-weight:normal;
	font-size: clamp(0.64rem, 1.45vmin, 0.82rem);
}

.hud-score-line{
	font-family:'ruika9',sans-serif;
	font-weight:normal;
	font-size: clamp(0.78rem, 1.75vmin, 1rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.hud-life-line{
	min-height: 1em;
	font-size: clamp(0.72rem, 1.65vmin, 0.94rem);
	letter-spacing: 0.05em;
}

.hud-block-remaining{
	display:grid;
	gap:0.16em;
	width:max-content;
	margin-top:0.8em;
	font-size:0.8rem;
}

.hud-block-remaining-row{
	display:grid;
	grid-template-columns:max-content max-content;
	align-items:center;
	column-gap:0.3em;
	min-height:1.2em;
}

.hud-block-remaining-label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:3.15em;
	padding:0.14em 0.9em;
	border-radius:0.22em;
	box-sizing:border-box;
	box-shadow:inset 0 0.08em 0 rgba(255,255,255,0.28),0 0.08em 0.16em rgba(0,0,0,0.58);
}

.hud-block-remaining-label-text{
	visibility:hidden;
}

.hud-block-remaining-label.is-blue{
	background:#238fd5;
}

.hud-block-remaining-label.is-yellow{
	background:#d6a90d;
}

.hud-block-remaining-label.is-red{
	background:#d43d61;
}

.hud-block-remaining-value{
	font-family:'tanuki';
	font-size:1.18em;
	font-variant-numeric:tabular-nums;
	line-height:1;
	text-align:right;
}

.sub-button{
	padding: 4px 8px;
	color: #dbeafe;
	background: rgba(3, 7, 18, 0.62);
	border: 1px solid rgba(96, 165, 250, 0.38);
	font-size: clamp(0.52rem, 1.1vmin, 0.64rem);
	line-height: 1.2;
	pointer-events: auto;
	flex: 0 0 auto;
}

.hud-restart-button-wrap{
	position:absolute;
	z-index:1200;
	right:2px;
	bottom:-2px;
	--button-edge-width:16px;
}

.hud-restart-button-wrap.is-button-a-black{
	--button-center-image:var(--bb-ui-buttonbg-buttona-black-center);
}

.hud-restart-button-wrap.is-button-b-pink{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-pink-center);
}

.hud-restart-button{
	width:max-content;
	min-width:7em;
	height:28px;
	margin:0;
	padding:0 0.45em 0.08em;
	overflow:hidden;
	border-style:solid;
	border-color:transparent;
	border-width:0 34px;
	border-image:var(--bb-ui-buttona-black) 0 45 fill / 0 16px / 0 stretch;
	border-radius:0;
	background:transparent;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	color:#f0f5ff;
	font:900 0.78em/1 sans-serif;
	font-family:ruika9,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	text-shadow:-1px -1px 0 #23150f,1px -1px 0 #23150f,-1px 1px 0 #23150f,1px 1px 0 #23150f,0 2px 1px rgba(0,0,0,0.7);
	white-space:nowrap;
	cursor:pointer;
}

.hud-restart-button-wrap.is-button-b-pink > .hud-restart-button{
	border-image-source:var(--bb-ui-buttonb-pink);
}

.hud-restart-button-wrap.is-button-a-blue > .hud-restart-button{
	border-image-source:var(--bb-ui-buttona-blue);
}

.hud-restart-button-wrap.is-outside-game{
	position:fixed;
	right:auto;
	bottom:auto;
}

.hud-restart-button-wrap.is-interface-hidden{
	display:none;
}

.game-area.is-clear-transition .game-hud,
.game-area.is-art-only .game-hud,
.game-area.is-clear-transition .hud-restart-button-wrap,
.game-area.is-art-only .hud-restart-button-wrap{
	display: none;
}

.game-area.is-art-only .stage-author{
	display: none;
}

#messageLayer.is-system-message #startButton:hover,
#messageLayer.is-age-confirm-message #startButton:hover,
#messageLayer.is-age-confirm-message #declineStartButton:hover,
.clear-restart-button:hover,
.clear-view-button:hover,
.sub-button:hover{
	transform:translateY(-1px);
	filter:brightness(1.06);
}


/*==================================================================================================
  年齢確認フレーム
==================================================================================================*/
#messageLayer.is-age-confirm-message #messagePanel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

#messageLayer.is-system-message #messagePanel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

#ageConfirmFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:none;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

#messageLayer.is-age-confirm-message #ageConfirmFrame,
#messageLayer.is-system-message #ageConfirmFrame{
	display:grid;
}

.age-confirm-frame-row{
	display:grid;
	min-width:0;
	min-height:0;
}

.age-confirm-frame-top,
.age-confirm-frame-bottom{
	grid-template-columns:57px minmax(0,1fr) 72px minmax(0,1fr) 57px;
}

.age-confirm-frame-middle{
	grid-template-columns:57px minmax(0,1fr) 57px;
}

.age-confirm-frame-image{
	display:block;
	width:100%;
	height:100%;
	min-width:0;
	min-height:0;
	object-fit:fill;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

/*
 * 13分割フレームは表示倍率によってセル境界が小数座標になり、
 * 背景が1px露出することがある。内側の境界だけ1px重ねて隙間を防ぐ。
 */
.age-confirm-frame-top,
.age-confirm-frame-middle{
	position:relative;
	z-index:1;
	height:calc(100% + 1px);
}

.age-confirm-frame-image:not(:last-child){
	position:relative;
	z-index:1;
	width:calc(100% + 1px);
}

/*==================================================================================================
  PAUSEフレーム
==================================================================================================*/
#messageLayer.is-pause-message{
	background:rgba(3,7,18,0.62);
}

#messageLayer.is-pause-message #messagePanel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

#pauseModalFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:none;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

#messageLayer.is-pause-message #pauseModalFrame{
	display:grid;
}

.pause-modal-frame-row{
	display:grid;
	min-width:0;
	min-height:0;
}

.pause-modal-frame-top,
.pause-modal-frame-bottom{
	grid-template-columns:57px minmax(0,1fr) 72px minmax(0,1fr) 57px;
}

.pause-modal-frame-middle{
	grid-template-columns:57px minmax(0,1fr) 57px;
}

.pause-modal-frame-image{
	display:block;
	width:100%;
	height:100%;
	min-width:0;
	min-height:0;
	object-fit:fill;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

.pause-modal-frame-top,
.pause-modal-frame-middle{
	position:relative;
	z-index:1;
	height:calc(100% + 1px);
}

.pause-modal-frame-image:not(:last-child){
	position:relative;
	z-index:1;
	width:calc(100% + 1px);
}

#messagePanel > #messageSub,
#messagePanel > #messageTitle,
#messagePanel > #messageText,
#messagePanel > #messageButtons,
#messagePanel > .pause-title-line{
	position:relative;
	z-index:1;
}

.pause-title-line{
	display:none;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

#parentResultTextHeader > #parentResultSub,
#parentResultTextHeader > #parentResultTitle,
#parentResultTextHeader > .blockbreaker-gameover-title-line{
	position:relative;
	z-index:1;
}

#messageLayer.is-pause-message #messageTitle{
	margin:0;
	color:#fff1ce;
	font-size:2.5em;
	line-height:1.12;
	letter-spacing:0;
	text-shadow:-2px -2px 0 #542014,2px -2px 0 #542014,-2px 2px 0 #542014,2px 2px 0 #542014,0 3px 2px rgba(0,0,0,0.55);
}

#messageLayer.is-pause-message .pause-title-line{
	display:block;
	width:80%;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 1px 0 rgba(255,220,195,0.2));
}

#messageLayer.is-pause-message .pause-title-line-top{
	margin:0.18em 0 0.18em;
}

#messageLayer.is-pause-message .pause-title-line-bottom{
	margin:0.18em 0 0.42em;
}

#messageLayer.is-pause-message #messageText{
	max-width:18em;
	margin:1.5em 0 1em;
	color:#efc9b0;
	font-size:1em;
	font-weight:800;
	line-height:1.7;
	text-shadow:none;
}

#messageLayer.is-pause-message #messageButtons{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	margin:0;
}

#messageLayer.is-pause-message #startButton{
	width:min(100%,162px);
	min-width:0;
	height:auto;
	aspect-ratio:162 / 60;
	margin:0.5em 0 2em;
	padding:0 0.8em 0.08em;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-source:var(--bb-ui-buttonb-green);
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	color:#fff8df;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

#messageLayer.is-pause-message #declineStartButton{
	display:none;
}

#messageLayer.is-pause-message #startButton:hover{
	transform:translateY(-1px);
	filter:brightness(1.1);
}

/*
 * R18と共用しているstartButtonラッパーを、PAUSE時だけbuttonB_greenへ切り替える。
 * ボタン本体のmarginをラッパーへ移し、underlayが余白部分へ伸びるのを防ぐ。
 */
#messageLayer.is-pause-message .blockbreaker-age-confirm-start-button-wrap{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-green-center);
	width:min(100%,162px);
	margin:0.5em 0 2em;
}

#messageLayer.is-pause-message .blockbreaker-age-confirm-start-button-wrap > #startButton{
	width:100%;
	margin:0;
}

@media (max-width:420px){
	#messageLayer.is-pause-message #messageButtons{
		margin-top:1em;
	}

	#messageLayer.is-age-confirm-message #messagePanel,
	#messageLayer.is-system-message #messagePanel,
	#messageLayer.is-pause-message #messagePanel{
		width:min(94%,360px);
		min-height:300px;
	}

	#messageLayer.is-age-confirm-message #messagePanel{
		justify-self:center;
		width:min(100%,360px);
		margin-inline:auto;
		padding-left:28px;
		padding-right:28px;
	}

	#messageLayer.is-age-confirm-message #messageButtons{
		width:min(100%,246px);
	}

	#messageLayer.is-age-confirm-message #startButton,
	#messageLayer.is-age-confirm-message #declineStartButton{
		width:fit-content;
		max-width:100%;
		font-size:0.86rem;
	}
}
/*==================================================================================================
  SYSTEM SE / BGM 音量パネル
==================================================================================================*/
.sound-panel-backdrop{
	position:absolute;
	z-index:21;
	inset:0;
	background:rgba(3,7,18,0.68);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.2s ease,visibility 0s linear 0.25s;
}

.sound-panel-backdrop.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity 0.2s ease,visibility 0s linear 0s;
}

.sound-panel{
	position:absolute;
	z-index:22;
	top:2px;
	right:2px;
	display:flex;
	align-items:flex-end;
	flex-direction:column;
	gap:7px;
	pointer-events:none;
}

.sound-panel-toggle{
	pointer-events:auto;
	display:block;
	width:clamp(42px,8.2vmin,54px);
	height:clamp(42px,8.2vmin,54px);
	margin:0;
	padding:0;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	cursor:pointer;
	transition:transform 0.15s ease,filter 0.15s ease,opacity 0.1s ease;
}

.sound-panel-toggle-image{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	filter:drop-shadow(0 5px 6px rgba(0,0,0,0.48));
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

@media (hover:hover) and (pointer:fine){
	.sound-panel-toggle:hover{
		transform:translateY(-1px);
		filter:brightness(1.12);
	}
}


/* ボールが近くを通る時は、HUDとSOUNDボタンをボール位置に合わせて上へ退避する。 */
.parent-page .game-hud,
.parent-page .sound-panel-toggle{
	--block-breaker-top-ui-offset-y:0px;
	transform:translateY(var(--block-breaker-top-ui-offset-y));
	will-change:transform;
}

.parent-page .game-hud{
	transition:none;
}

.parent-page .sound-panel-toggle{
	transition:filter 0.15s ease,opacity 0.1s ease;
}

.parent-page .game-hud.is-top-ui-returning,
.parent-page .sound-panel-toggle.is-top-ui-returning{
	transition:transform 0.32s cubic-bezier(0.2,0.82,0.22,1);
}

.parent-page .sound-panel-toggle:hover,
.parent-page .sound-panel-toggle:focus-visible{
	transform:translateY(calc(var(--block-breaker-top-ui-offset-y) - 1px));
}

/* 発射待機中は左上HUDだけを画面上へ退避する。右上の設定アイコンは常時表示する。 */
#parentGameShell.is-game-screen .sound-panel-toggle{
	opacity:1;
	transition:transform 0.32s cubic-bezier(0.2,0.82,0.22,1),filter 0.15s ease,opacity 0.22s ease;
}

#parentGameShell.is-game-screen.is-ball-launch-standby .game-hud{
	opacity:0;
	transform:translateY(calc(var(--block-breaker-top-ui-offset-y) - 120%));
	pointer-events:none;
}

/*
 * Metallic background adapted from:
 * "Metallic Backgrounds" by Anthony Orr
 * CodePen: https://codepen.io/anthorr/pen/NrJMex
 * Licensed under the MIT License.
 * See THIRD_PARTY_LICENSES.txt.
 */
.sound-panel-body{
	display:grid;
	gap:8px;
	width:min(270px,calc(100vw - 30px));
	padding:0 10px 10px;
	border:1px solid rgba(255,255,255,0.16);
	border-radius:14px;
	background-color:hsl(60,15%,15%);
	background-image:
		radial-gradient(circle farthest-side at 50% 50%,hsl(60,15%,15%) 0,hsl(60,15%,15%) 15%,transparent 15%,transparent 100%),
		radial-gradient(circle farthest-side at 50% 50%,hsl(60,15%,15%) 0,hsl(60,15%,15%) 15%,transparent 15%,transparent 100%),
		radial-gradient(circle farthest-side at 50% 50%,rgba(255,255,255,0.25) 0,rgba(255,255,255,0.25) 15%,transparent 15%,transparent 100%),
		radial-gradient(circle farthest-side at 50% 50%,rgba(255,255,255,0.25) 0,rgba(255,255,255,0.25) 15%,transparent 15%,transparent 100%),
		linear-gradient(
			145deg,
			hsla(60,15%,15%,0.5) 0%,
			hsla(75,10%,40%,0.5) 15%,
			hsla(60,35%,45%,0.5) 40%,
			hsla(55,0%,30%,0.5) 60%,
			hsla(65,5%,25%,0.5) 80%,
			hsla(55,30%,16%,0.5) 100%
		),
		linear-gradient(
			50deg,
			hsl(60,15%,15%) 0%,
			hsl(65,25%,20%) 10%,
			hsl(70,20%,30%) 25%,
			hsl(60,25%,15%) 40%,
			hsl(65,15%,30%) 60%,
			hsl(70,25%,15%) 70%,
			hsl(65,30%,20%) 90%,
			hsl(60,40%,15%) 100%
		);
	background-size:26.67px 26.67px,26.67px 26.67px,26.67px 26.67px,26.67px 26.67px,100% 100%,100% 100%;
	background-position:0 0,13.335px 13.335px,0 -1px,13.335px 14.335px,0 0,0 0;
	background-repeat:repeat,repeat,repeat,repeat,no-repeat,no-repeat;
	box-shadow:
		0 0 1px 0 #000,
		1px 2px 1px 0 rgba(255,255,255,0.3) inset,
		3px 5px 2px -2px rgba(255,255,255,0.1) inset,
		1px 3px 0 1px rgba(0,0,0,0.3),
		3px 6px 2px -2px rgba(0,0,0,0.2),
		0 12px 28px rgba(0,0,0,0.38);
	opacity:0;
	visibility:hidden;
	transform:translateX(calc(100% + clamp(5px,1.7vmin,10px)));
	pointer-events:none;
	will-change:transform,opacity;
	transition:transform 0.2s ease,opacity 0.2s ease,visibility 0s linear 0.25s;
}

.sound-panel.is-open .sound-panel-body{
	font-family:'bird';
	opacity:1;
	visibility:visible;
	transform:translateX(0);
	pointer-events:auto;
	transition:transform 0.2s ease,opacity 0.2s ease,visibility 0s linear 0s;
	animation:blockBreakerSoundPanelSettleShake 0.2s linear 0.2s 1;
}

@keyframes blockBreakerSoundPanelSettleShake{
	0%,100%{transform:translateX(0);}
	20%{transform:translateX(3px);}
	40%{transform:translateX(-3px);}
	60%{transform:translateX(2px);}
	80%{transform:translateX(-2px);}
}


.sound-panel-body .sound-bgm-credit{
	position:static;
	z-index:auto;
	display:block;
	width:100%;
	max-width:none;
	margin:1.5em 0 0 0;
	padding:0.75em 0.85em;
	overflow:visible;
	border:1px solid rgba(94,234,212,0.58);
	border-radius:0.8em;
	box-sizing:border-box;
	background-color:hsl(180,80%,18%);
	background-image:
		radial-gradient(ellipse 150% 150% at 80% 80%,transparent 40%,rgba(255,255,255,0.25) 60%,transparent 100%),
		radial-gradient(ellipse 150% 150% at 20% 20%,transparent 40%,rgba(0,0,0,0.25) 60%,transparent 100%),
		radial-gradient(ellipse 100% 100% at 50% 50%,transparent 25%,rgba(0,0,0,0.5) 75%),
		linear-gradient(100deg,hsla(0,50%,25%,0.25) 0%,hsla(5,75%,35%,0.25) 15%,hsla(10,75%,40%,0.25) 25%,hsla(15,75%,55%,0.25) 35%,hsla(20,65%,45%,0.25) 40%,hsla(10,55%,40%,0.25) 50%,hsla(5,55%,35%,0.25) 65%,hsla(5,55%,35%,0.25) 70%,hsla(0,65%,30%,0.25) 85%,hsla(0,75%,25%,0.25) 100%),
		linear-gradient(180deg,hsla(210,15%,20%,0.5) 0%,hsla(220,25%,10%,0.5) 35%,hsla(235,25%,5%,0.5) 65%,hsla(210,30%,0%,0.5) 100%),
		linear-gradient(180deg,hsl(200,80%,30%) 0%,hsl(195,70%,45%) 7%,hsl(180,80%,70%) 25%,hsl(180,100%,60%) 35%,hsl(190,70%,55%) 55%,hsl(195,100%,35%) 75%,hsl(200,85%,25%) 100%);
	background-repeat:no-repeat;
	color:#c8fbff;
	font-size:0.65rem;
	line-height:1.45;
	white-space:normal;
	overflow-wrap:anywhere;
	text-overflow:clip;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 5px rgba(34,211,238,0.7),0 0 12px rgba(6,182,212,0.42);
	user-select:text;
	box-shadow:
		1px 2px 1px 1px rgba(255,255,255,0.3) inset,
		1px -2px 1px 1px rgba(0,0,0,0.3) inset,
		2px 4px 1px 2px rgba(255,255,255,0.3) inset,
		2px -4px 1px 2px rgba(0,0,0,0.3) inset,
		0 4px 3px -2px rgba(0,0,0,0.4),
		2px 7px 2px -2px rgba(17,17,17,0.4),
		4px 8px 2px -2px rgba(17,17,17,0.4),
		5px 10px 8px -6px rgba(17,51,85,0.4),
		7px 16px 16px -16px #000,
		0 0 16px rgba(34,211,238,0.2);
}

.sound-panel-body .sound-bgm-credit.has-credit-image{
	padding:0 0.85em 0.75em 0.85em;
}

.sound-panel-body .stage-author-title{
	width:70%;
	margin-right:auto;
	margin-bottom:0.5em;
	margin-left:auto;
	border-radius:0 0 3px 3px;
	background-color:rgba(125,211,252,0.3);
	color:#e6fdff;
	font-family:tanuki;
	font-size:1em;
	letter-spacing:0.1em;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 4px #67e8f9,0 0 10px rgba(34,211,238,0.9),0 0 18px rgba(6,182,212,0.6);
	box-shadow:0 0 8px rgba(34,211,238,0.38),inset 0 -1px 0 rgba(207,250,254,0.42);
}

.sound-user-panel{
	justify-items:center;
	background-color:hsl(25,45%,15%);
	background-image:
		radial-gradient(ellipse 150% 80% at 25% 25%,rgba(255,255,255,0.25) 0%,transparent 50%),
		radial-gradient(ellipse 100% 100% at 50% 50%,transparent 25%,rgba(0,0,0,0.5) 75%),
		linear-gradient(180deg,hsl(25,30%,20%) 0%,hsl(30,25%,30%) 35%,hsl(35,35%,20%) 80%,hsl(25,45%,15%) 100%);
	background-size:100% 100%,100% 100%,100% 100%;
	background-position:0 0,0 0,0 0;
	background-repeat:no-repeat,no-repeat,no-repeat;
}

/*
 * soundUserPanel旧背景：row1 child6。
 * 直前の.sound-user-panel宣言は再利用用として残し、
 * 現行表示はこのrow2 child1宣言で上書きする。
 */
.sound-user-panel{
	background-color:hsl(220,5%,10%);
	background-image:
		linear-gradient(120deg,
			hsla(0,80%,20%,0.5) 0%,
			hsla(5,100%,30%,0.5) 15%,
			hsla(10,100%,35%,0.5) 25%,
			hsla(15,100%,50%,0.5) 35%,
			hsla(20,95%,40%,0.5) 40%,
			hsla(10,85%,35%,0.5) 50%,
			hsla(5,85%,30%,0.5) 65%,
			hsla(5,85%,30%,0.5) 70%,
			hsla(0,95%,25%,0.5) 85%,
			hsla(0,100%,20%,0.5) 100%),
		linear-gradient(60deg,
			hsla(0,70%,5%,0.5) 0%,
			hsla(5,80%,10%,0.5) 10%,
			hsla(10,75%,20%,0.5) 25%,
			hsla(0,80%,5%,0.5) 40%,
			hsla(5,70%,20%,0.5) 60%,
			hsla(10,80%,5%,0.5) 70%,
			hsla(5,85%,10%,0.5) 90%,
			hsla(0,95%,5%,0.5) 100%),
		linear-gradient(120deg,
			hsl(210,0%,20%) 0%,
			hsl(220,5%,10%) 35%,
			hsl(235,5%,5%) 65%,
			hsl(210,10%,0%) 100%);
	background-size:100% 100%,100% 100%,100% 100%;
	background-position:0 0,0 0,0 0;
	background-repeat:no-repeat,no-repeat,no-repeat;
}

.sound-user-name-button{
	width:80%;
	min-width:0;
	max-width:none;
	margin:0 auto;
}

.sound-stage-select-panel{
	position:relative;
	min-width:0;
	justify-items:center;
	padding-top:0;
	background-color:hsl(210,45%,35%);
	background-image:
		repeating-linear-gradient(-1deg,rgba(0,0,0,0.1) 0,rgba(0,0,0,0.1) 1px,rgba(255,255,255,0.1) 1px,rgba(255,255,255,0.1) 2px,transparent 2px,transparent 10px),
		repeating-linear-gradient(1deg,transparent 0,transparent 7px,rgba(255,255,255,0.1) 7px,rgba(255,255,255,0.1) 8px),
		repeating-linear-gradient(0deg,transparent 0,transparent 12px,rgba(255,255,255,0.2) 12px,rgba(255,255,255,0.1) 13px),
		repeating-linear-gradient(0deg,transparent 0,transparent 17px,rgba(0,0,0,0.25) 17px,rgba(0,0,0,0.3) 18px),
		linear-gradient(135deg,hsl(210,45%,35%) 0,hsl(215,65%,35%) 0%,hsl(210,55%,45%) 25%,hsl(215,45%,40%) 50%,hsl(205,60%,35%) 75%,hsl(210,45%,30%) 100%);
	background-size:auto;
	background-position:0 0;
	background-repeat:repeat,repeat,repeat,repeat,no-repeat;
}

.sound-stage-select-title{
	width:70%;
	padding:0.18em 0.5em 0.14em;
	border-radius:0 0 3px 3px;
	background-color:rgba(96,165,250,0.34);
	color:#eefcff;
	font-family:tanuki;
	justify-self:center;
	font-size:0.7em;
	margin-bottom:0.3em;
	line-height:1.1;
	letter-spacing:0.08em;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 4px #7dd3fc,0 0 10px rgba(56,189,248,0.95),0 0 18px rgba(37,99,235,0.68);
	box-shadow:0 0 8px rgba(56,189,248,0.44),inset 0 -1px 0 rgba(224,242,254,0.48);
}

.sound-stage-select-title.is-area-return-control{
	cursor:pointer;
	transition:filter 0.16s ease,transform 0.12s ease,box-shadow 0.16s ease;
}

.sound-stage-select-title.is-area-return-control:hover,
.sound-stage-select-title.is-area-return-control:focus-visible{
	filter:brightness(1.18);
	box-shadow:0 0 12px rgba(125,211,252,0.72),inset 0 -1px 0 rgba(224,242,254,0.7);
	outline:none;
}

.sound-stage-select-title.is-area-return-control:active{
	transform:translateY(1px) scale(0.98);
}

.sound-main-panel-title{
	background-color:rgba(190,242,100,0.24);
	color:#f7ffd9;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 4px #d9f99d,0 0 10px rgba(190,242,100,0.92),0 0 18px rgba(132,204,22,0.62);
	box-shadow:0 0 8px rgba(190,242,100,0.4),inset 0 -1px 0 rgba(236,252,203,0.5);
}

.sound-stage-select-viewport{
	position:relative;
	display:block;
	width:100%;
	min-width:0;
	max-width:100%;
	margin-block:-8px;
	margin-inline:0;
	overflow-x:auto;
	overflow-y:hidden;
	box-sizing:border-box;
	scroll-padding-inline:8px;
	touch-action:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	-ms-overflow-style:none;
	-webkit-user-select:none;
	user-select:none;
}

.sound-stage-select-viewport::-webkit-scrollbar{
	display:none;
	width:0;
	height:0;
}

.sound-stage-select-viewport.is-stage-select-overflowing{
	cursor:grab;
}

.sound-stage-select-viewport.is-stage-select-mouse-dragging{
	cursor:grabbing;
}

/*
 * trackは単なる横一列のflex。
 * translate3d／will-change／独自settleは使わず、スクロール位置はviewport.scrollLeftへ一本化する。
 */
.sound-stage-select-thumbnails,
.sound-stage-select-thumbnail-track{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:max-content;
	min-width:max-content;
	max-width:none;
	margin:0 auto;
	padding:8px;
	transform:none;
	transition:none;
}

.sound-stage-select-thumbnail{
	pointer-events:auto;
}

.sound-stage-select-thumbnail{
	position:relative;
	isolation:isolate;
	display:block;
	flex:0 0 70px;
	width:70px;
	min-width:70px;
	max-width:70px;
	height:auto;
	padding:0;
	overflow:hidden;
	border:1px solid rgba(226,250,255,0.78);
	border-radius:8px;
	background:linear-gradient(145deg,#dff8ff 0%,#6f9cac 28%,#233d48 72%,#0a151b 100%);
	margin:0 3px 3px 0;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.36),
		inset 0 2px 0 rgba(255,255,255,0.72),
		inset 2px 0 0 rgba(255,255,255,0.22),
		inset 0 -2px 0 rgba(3,12,17,0.68),
		inset -2px 0 0 rgba(3,12,17,0.38),
		3px 3px 0 rgba(17,24,32,0.7);
	line-height:0;
	appearance:none;
	-webkit-appearance:none;
	transition:filter 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease,border-color 0.14s ease;
}

.sound-stage-select-thumbnail::before{
	content:"";
	position:absolute;
	z-index:2;
	inset:0;
	border-radius:inherit;
	background:
		linear-gradient(to top left,rgba(255,255,255,0.38) 0%,rgba(255,255,255,0.18) 18%,rgba(255,255,255,0.08) 34%,rgba(255,255,255,0) 56%),
		linear-gradient(148deg,rgba(255,255,255,0.48) 0%,rgba(220,249,255,0.2) 19%,rgba(255,255,255,0) 39%),
		linear-gradient(to bottom,rgba(194,241,255,0.14) 0%,rgba(255,255,255,0) 48%,rgba(2,10,15,0.2) 100%);
	box-shadow:inset -1px -1px 3px rgba(255,255,255,0.18);
	mix-blend-mode:screen;
	opacity:0;
	transition:opacity 0.14s ease;
	pointer-events:none;
}

.sound-stage-select-thumbnail.is-current::before,
.sound-stage-select-thumbnail:hover::before,
.sound-stage-select-thumbnail:focus-visible::before,
.sound-stage-select-return-button::before{
	opacity:1;
}

/*
.sound-stage-select-thumbnail::after{
	content:"";
	position:absolute;
	z-index:3;
	left:5px;
	top:4px;
	width:54%;
	height:23%;
	border-radius:999px 7px 999px 7px;
	background:linear-gradient(110deg,rgba(255,255,255,0.72),rgba(255,255,255,0.08));
	opacity:0.78;
	pointer-events:none;
}
*/

.sound-stage-select-thumbnail img{
	position:relative;
	z-index:0;
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
	filter:none;
	transition:filter 0.14s ease;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

.sound-stage-select-thumbnail.is-current img,
.sound-stage-select-thumbnail:hover img,
.sound-stage-select-thumbnail:focus-visible img{
	filter:brightness(1.22) saturate(1.28) contrast(1.05);
}

/*
 * STAGE SELECTの発光はhover中だけ排他にする。
 * 現在ステージ以外のステージへhoverした間は、現在ステージの常時ハイライトを一時停止する。
 * エリア復帰ボタンは判定対象へ含めず、従来どおりの表示を維持する。
 */
.sound-stage-select-thumbnails:has(.sound-stage-select-thumbnail-button:hover)
	.sound-stage-select-thumbnail.is-current:not(:hover)::before{
	opacity:0;
}

.sound-stage-select-thumbnails:has(.sound-stage-select-thumbnail-button:hover)
	.sound-stage-select-thumbnail.is-current:not(:hover) img{
	filter:none;
}

.sound-stage-select-return-button{
	flex:0 0 70px;
	width:70px;
	min-width:70px;
	max-width:70px;
	margin-right:0;
}

.sound-stage-select-panel.is-stage-return-button-fixed
	> .sound-stage-select-return-button{
	position:absolute;
	left:auto;
	right:3px;
	top:auto;
	bottom:0;
	z-index:1;
	flex:0 0 41px;
	width:41px;
	min-width:41px;
	max-width:41px;
	margin:0;
}

/*
 * 3ステージ以上の場合だけ、最後のステージ右端が
 * 右端固定のエリア復帰ボタン左端で止まるようにする。
 * ステージ側の右マージン3pxとボタン側のright:3pxが相殺されるため、
 * 固定ボタンの幅と同じ41pxをスクロール末尾へ確保する。
 */
.sound-stage-select-panel.has-stage-return-button-scroll-margin
	.sound-stage-select-thumbnail-track{
	padding-right:41px;
}

.sound-stage-select-return-button[hidden]{
	display:none !important;
}

.sound-stage-select-return-button img{
	filter:none;
}

.sound-stage-select-thumbnail-stage-number{
	position:absolute;
	left:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:1.55em;
	padding:0.2em 0.1em 0.1em 0;
	background:#2b3f47;
	color:#fff6dc;
	font-family:'serifgoti';
	font-size:0.8em;
	font-weight:700;
	line-height:1;
	text-shadow:0 1px 2px rgba(0,0,0,0.95);
	border-top:1px solid rgba(255,240,204,0.28);
	border-right:1px solid rgba(255,240,204,0.28);
	border-top-right-radius:9px;
	box-shadow:0 0 0 1px rgba(0,0,0,0.28),0 -1px 4px rgba(0,0,0,0.26);
	pointer-events:none;
	z-index:4;
}

/* 現在プレイ中ステージの番号背景は、hover排他中も維持する。 */
.sound-stage-select-thumbnail.is-current .sound-stage-select-thumbnail-stage-number{
	background:#45f15c;
}

/* STAGE SELECTサムネイル：加算ハイライトは現在ステージ／ホバー時だけ。エリア復帰ボタンは常時維持。 */
.sound-stage-select-thumbnails .sound-stage-select-thumbnail:hover,
.sound-stage-select-thumbnails .sound-stage-select-thumbnail:focus-visible,
.sound-stage-select-panel.is-stage-return-button-fixed > .sound-stage-select-return-button:hover,
.sound-stage-select-panel.is-stage-return-button-fixed > .sound-stage-select-return-button:focus-visible{
	border-color:rgba(207,250,254,0.92);
	filter:drop-shadow(0 0 5px rgba(165,243,252,0.82));
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.36),
		inset 0 2px 0 rgba(255,255,255,0.72),
		inset 2px 0 0 rgba(255,255,255,0.22),
		inset 0 -2px 0 rgba(3,12,17,0.68),
		inset -2px 0 0 rgba(3,12,17,0.38),
		3px 3px 0 rgba(17,24,32,0.7),
		0 0 0 1px rgba(207,250,254,0.78),
		0 0 12px rgba(34,211,238,0.58);
	transform:translateZ(0) scale(1.025);
}

.sound-panel-body .stage-author-credit-grid{
	display:grid;
	grid-template-columns:65px minmax(0,1fr);
	column-gap:0.55em;
	align-items:stretch;
}

.sound-panel-body .stage-author-image-link{
	display:block;
	width:65px;
	height:65px;
	overflow:hidden;
}

.sound-panel-body .stage-author-image-link img{
	display:block;
	width:65px;
	height:65px;
	object-fit:cover;
}

.sound-panel-body .stage-author-text-link{
	display:flex;
	min-width:0;
	height:65px;
	flex-direction:column;
	justify-content:space-between;
	color:#9ff8ff;
	font-weight:900;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 4px rgba(103,232,249,0.9),0 0 10px rgba(34,211,238,0.55);
	line-height:1.35;
	text-decoration:none;
	transition:color 0.12s ease,text-shadow 0.12s ease,filter 0.12s ease;
}

.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:hover) .stage-author-text-link,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:focus-visible) .stage-author-text-link{
	color:#ffffff;
	text-shadow:0 0 5px #a5f3fc,0 0 12px #22d3ee,0 0 20px rgba(6,182,212,0.8);
}

.sound-panel-body .stage-author-music-info{
	display:flex;
	min-width:0;
	flex-direction:column;
	font-family:'ruika9';
}

.sound-panel-body .stage-author-album-title{
	display:block;
	min-width:0;
	margin-bottom:0.2em;
	white-space:normal;
	overflow-wrap:anywhere;
	word-break:normal;
}

.sound-panel-body .stage-author-track-title,
.sound-panel-body .stage-author-copyright{
	display:block;
	min-width:0;
	overflow:hidden;
	white-space:nowrap;
	overflow-wrap:normal;
	word-break:normal;
	text-overflow:clip;
}

.sound-panel-body .stage-author-copyright{
	font-size:0.85em;
	line-height:1.2;
}

.sound-panel-body .sound-bgm-credit[hidden]{
	display:none;
}

.sound-panel-body .sound-bgm-credit a{
	color:#9ff8ff;
	font-weight:900;
	text-decoration:underline;
	text-underline-offset:0.15em;
}

.sound-panel-body .sound-bgm-credit a:hover{
	color:#ffffff;
	text-shadow:0 0 5px #a5f3fc,0 0 12px #22d3ee,0 0 20px rgba(6,182,212,0.8);
}

.sound-slider-item{
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 9px;
}

.sound-slider-item.is-disabled{
	opacity: 0.42;
}

.sound-mute-button{
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background:
		linear-gradient(145deg, #52616d, #111923 58%, #8696a2);
	color: #eefaff;
	font-size: 0.62rem;
	font-weight: 900;
	cursor: pointer;
	filter:
		drop-shadow(0 2px 4px rgba(0,0,0,0.55))
		drop-shadow(0 0 2px rgba(255,255,255,0.10));
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.45),
		inset 1px 1px 2px rgba(255, 255, 255, 0.5),
		inset -2px -2px 3px rgba(0, 0, 0, 0.5);
}

.sound-mute-button::before{
	content: "";
	position: absolute;
	z-index: 4;
	top: 5px;
	left: 5px;
	width: 7px;
	height: 7px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: #22c55e;
	box-shadow:
		0 0 4px #22c55e,
		0 0 9px rgba(34, 197, 94, 0.95),
		0 0 15px rgba(34, 197, 94, 0.6);
	transition:
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.sound-slider-item.is-muted .sound-mute-button::before,
.sound-slider-item.is-disabled .sound-mute-button::before{
	background: #ef233c;
	box-shadow:
		0 0 4px #ef233c,
		0 0 9px rgba(239, 35, 60, 0.98),
		0 0 15px rgba(239, 35, 60, 0.68);
}

.sound-speaker-icon{
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.sound-forbidden-mark{
	position: absolute;
	z-index: 3;
	inset: -1px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 4px solid #ff243d;
	border-radius: 50%;
	background: rgba(22, 0, 4, 0.90);
	color: #ff243d;
	font-size: 0;
	line-height: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.sound-forbidden-mark::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 155%;
	border-radius: 999px;
	background: #ff243d;
	box-shadow:
		0 0 5px rgba(255, 36, 61, 0.95),
		0 0 10px rgba(255, 36, 61, 0.65);
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}

@media (hover: hover) and (pointer: fine){
	.sound-mute-button:hover .sound-forbidden-mark{
		opacity: 0.72;
	}
}

.sound-slider-item.is-muted .sound-forbidden-mark{
	opacity: 0.92;
}

.sound-slider-content{
	min-width: 0;
}

.sound-slider-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 2px;
	color: #dbeafe;
	font-size: 0.62rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.sound-volume-label{
	display: inline-block;
	min-width: 3ch;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: #ffffff;
	letter-spacing: 0;
	white-space: nowrap;
}

.sound-range{
	--progress: 0%;
	--volume-color-start: #00f5ff;
	--volume-color-middle: #00aaff;
	--volume-color-end: #3366ff;
	--volume-glow: rgba(0, 220, 255, 0.85);
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	background: linear-gradient(to bottom, #83909a, #26313a 52%, #99a6af);
	filter:
		drop-shadow(0 2px 4px rgba(0,0,0,0.52))
		drop-shadow(0 0 2px rgba(255,255,255,0.08));
	box-shadow:
		0 1px 1px rgba(255, 255, 255, 0.48),
		0 4px 7px rgba(0, 0, 0, 0.45);
}

.sound-range-voice{
	--volume-color-start: #ff8edb;
	--volume-color-middle: #ff3da8;
	--volume-color-end: #b52cff;
	--volume-glow: rgba(255, 60, 190, 0.85);
}

.sound-range-se{
	--volume-color-start: #fff000;
	--volume-color-middle: #ffae00;
	--volume-color-end: #ff5a00;
	--volume-glow: rgba(255, 150, 0, 0.85);
}

.sound-range-bgm{
	--volume-color-start: #38b6ff;
	--volume-color-middle: #486cff;
	--volume-color-end: #9b55ff;
	--volume-glow: rgba(100, 90, 255, 0.85);
}

.sound-range::before{
	content: "";
	position: absolute;
	inset: 5px 7px;
	border-radius: 999px;
	background: linear-gradient(to bottom, #06090c, #27333d 54%, #090d11);
	box-shadow:
		inset 0 3px 5px rgba(0, 0, 0, 0.95),
		inset 0 -1px 2px rgba(255, 255, 255, 0.16);
	pointer-events: none;
}

.inputVolumeSlider{
	--progress: 0%;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	outline: 0;
	background: transparent;
}

.inputVolumeSlider::-webkit-slider-runnable-track{
	-webkit-appearance: none;
	height: 12px;
	border-radius: 999px;
	background:
		linear-gradient(
			to right,
			var(--volume-color-start),
			var(--volume-color-middle) 50%,
			var(--volume-color-end)
		)
		0 0 / var(--progress) 100% no-repeat,
		linear-gradient(to bottom, #090d11, #202a33 48%, #0b1015);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.inputVolumeSlider::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 25px;
	height: 25px;
	margin-top: -6.5px;
	border: 1px solid #303943;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 25%, #fff 0 6%, transparent 7%),
		conic-gradient(
			from 45deg,
			#3c4750,
			#edf3f6 45deg,
			#77848e 90deg,
			#fff 140deg,
			#4d5962 190deg,
			#dce4e9 245deg,
			#6e7a84 300deg,
			#3c4750
		);
	box-shadow:
		0 0 0 2px rgba(35, 45, 55, 0.9),
		0 0 0 3px rgba(220, 235, 245, 0.58),
		0 3px 5px rgba(0, 0, 0, 0.7);
}

.inputVolumeSlider::-moz-range-track{
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(to bottom, #090d11, #202a33 48%, #0b1015);
}

.inputVolumeSlider::-moz-range-progress{
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--volume-color-start),
		var(--volume-color-middle) 50%,
		var(--volume-color-end)
	);
	box-shadow: 0 0 5px var(--volume-glow);
}

.inputVolumeSlider::-moz-range-thumb{
	width: 25px;
	height: 25px;
	border: 1px solid #303943;
	border-radius: 50%;
	background: #dce4e9;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.7);
}

.inputVolumeSlider:hover::-webkit-slider-thumb{
	filter: brightness(1.12) drop-shadow(0 0 5px var(--volume-glow));
}

.inputVolumeSlider:focus-visible{
	outline: 2px solid var(--volume-glow);
	outline-offset: 4px;
}




.game-area.is-clear-transition .sound-panel,
.game-area.is-art-only .sound-panel{
	display: none;
}


/*==================================================================================================
  親フレーム／子ゲーム分離
==================================================================================================*/
.parent-page .parent-game-shell{
	overflow: hidden;
}

.blockbreaker-frame{
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #050912;
}

.parent-page .game-hud,
.parent-page .hud-restart-button-wrap,
.parent-page .stage-author{
	z-index: 12;
}

.parent-page .sound-panel-backdrop{
	z-index:2147483643;
}

.parent-page .sound-panel{
	z-index:2147483644;
}

.parent-result-layer{
	z-index:30;
}

.parent-game-shell.is-clear-transition .game-hud,
.parent-game-shell.is-art-only .game-hud,
.parent-game-shell.is-clear-transition .hud-restart-button-wrap,
.parent-game-shell.is-art-only .hud-restart-button-wrap,
.parent-game-shell.is-clear-transition .sound-panel,
.parent-game-shell.is-art-only .sound-panel{
	display: none;
}

.parent-game-shell.is-art-only .stage-author,
.parent-game-shell.is-art-only .blockbreaker-bottom-menu{
	display:none;
}

.blockbreaker-page{
	display: block;
	padding: 0;
	background: transparent;
}

.blockbreaker-page .child-game-shell{
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border: 0;
	box-shadow: none;
}

.child-sound-control-host{
	position: fixed !important;
	left: -10000px !important;
	top: -10000px !important;
	right: auto !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/*==================================================================================================
  親画面：プレイヤー名入力／リザルト
==================================================================================================*/
.blockbreaker-bottom-menu{
	position:absolute;
	z-index:1200;
	left:2px;
	bottom:-2px;
	display:flex;
	align-items:center;
	gap:0.45em;
}

.blockbreaker-bottom-menu.is-outside-game{
	position:fixed;
	right:auto;
	bottom:auto;
}

.blockbreaker-bottom-menu.is-interface-hidden,
.blockbreaker-bottom-menu.is-result-overlap-hidden{
	display:none;
}

.blockbreaker-bottom-menu-button{
	flex:0 1 auto;
	width:max-content;
	min-width:7em;
	max-width:min(16em,calc((100vw - 3em) / 2));
	height:28px;
	padding:0 0.45em 0.08em;
	overflow:hidden;
	border-style:solid;
	border-color:transparent;
	border-width:0 34px;
	border-image:var(--bb-ui-buttona-black) 0 45 fill / 0 16px / 0 stretch;
	border-radius:0;
	background:transparent;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	color:#f0f5ff;
	font:900 0.78em/1 sans-serif;
	font-family:ruika9,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	text-shadow:-1px -1px 0 #23150f,1px -1px 0 #23150f,-1px 1px 0 #23150f,1px 1px 0 #23150f,0 2px 1px rgba(0,0,0,0.7);
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:pointer;
}

/* HUD下部／ゲームオーバー時の主要操作ボタンはbirdフォントへ統一する。 */
#rankingButton,
#pauseButton,
#restartButton,
#clearRestartButton,
#gameOverOtherStageButton{
	font-family:bird,ruika9,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

.blockbreaker-bottom-menu-button:hover{
	transform:translateY(-1px);
	filter:brightness(1.08);
}

.blockbreaker-bottom-menu-button:active{
	transform:translateY(1px);
	filter:brightness(0.94);
}

.blockbreaker-bottom-menu-underlay-wrap{
	--button-edge-width:16px;
	transition:transform 0.12s ease,filter 0.12s ease;
	will-change:transform,filter;
}

.blockbreaker-bottom-menu-underlay-wrap > .blockbreaker-bottom-menu-button:hover,
.blockbreaker-bottom-menu-underlay-wrap > .blockbreaker-bottom-menu-button:active{
	transform:none;
	filter:none;
}

@media (hover:hover) and (pointer:fine){
	.blockbreaker-bottom-menu-underlay-wrap:has(> .blockbreaker-bottom-menu-button:hover){
		transform:translateY(-1px);
		filter:brightness(1.08);
	}

	.blockbreaker-bottom-menu-underlay-wrap:has(> .blockbreaker-bottom-menu-button:active){
		transform:translateY(1px);
		filter:brightness(0.94);
	}
}


.blockbreaker-user-name-button{
	--button-a-purple-cap-width:21.4667px;
	position:relative;
	isolation:isolate;
	border:0;
	border-image:none;
	background:none;
	padding-left:0.8em;
	padding-right:0.8em;
}

/*
 * 中央タイルは左右端の内側だけへ描画する。
 * 端画像の透過した四隅から中央画像が見えないよう、ボタン全幅には敷かない。
 */
.blockbreaker-user-name-button::before{
	content:"";
	position:absolute;
	z-index:-2;
	top:0;
	bottom:0;
	left:calc(var(--button-a-purple-cap-width) - 1px);
	right:calc(var(--button-a-purple-cap-width) - 1px);
	background:var(--bb-ui-buttonbg-buttona-purple-center) left top / auto 100% repeat-x;
	pointer-events:none;
}

.blockbreaker-user-name-button::after{
	content:"";
	position:absolute;
	z-index:-1;
	inset:0;
	background-image:
		var(--bb-ui-buttonbg-buttona-purple-left),
		var(--bb-ui-buttonbg-buttona-purple-right);
	background-position:left top,right top;
	background-size:auto 100%,auto 100%;
	background-repeat:no-repeat,no-repeat;
	pointer-events:none;
}

.blockbreaker-ranking-button{
	border-image-source:var(--bb-ui-buttona-yellow);
}

.blockbreaker-pause-button{
	border-image-source:var(--bb-ui-buttona-black);
}

.blockbreaker-user-layer{
	position:absolute;
	z-index:20000;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1em;
	overflow:hidden;
	background:rgba(0,0,0,0.72);
	box-sizing:border-box;
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity 0.2s ease,visibility 0s linear 0s;
}

.blockbreaker-user-layer.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.2s ease,visibility 0s linear 0.25s;
}

.blockbreaker-user-panel{
	position:relative;
	top:0;
	width:min(90%,24em);
	padding:0.55em 1.15em 0.75em;
	border:30px solid transparent;
	border-image:var(--bb-ui-mainwindowh) 34 fill / 30px / 0 stretch;
	border-radius:0;
	background:transparent;
	color:#fff3df;
	box-shadow:0 0.8em 2.5em rgba(0,0,0,0.55);
	box-sizing:border-box;
	text-align:center;
	opacity:1;
	transform:translateY(0);
	will-change:transform,opacity;
	transition:top 0.12s ease,transform 0.2s ease,opacity 0.2s ease;
	animation:blockBreakerBottomModalSettleShake 0.2s linear 0.2s 1;
}

.blockbreaker-user-layer.is-hidden .blockbreaker-user-panel{
	opacity:0;
	transform:translateY(calc(100% + clamp(20px,5vmin,48px)));
	animation:none;
}

.blockbreaker-communication-loading-layer{
	z-index:50000;
	background:transparent;
	opacity:1;
	transition:opacity 0.2s ease,visibility 0s linear 0s;
}

/* 通信レイヤーを透過しても、対象の閉じるボタン以外は操作させない。 */
html.is-communication-close-only body,
html.is-communication-close-only body *{
	pointer-events:none!important;
}
html.is-communication-close-only .is-communication-close-allowed,
html.is-communication-close-only .is-communication-close-allowed *{
	pointer-events:auto!important;
}

.blockbreaker-user-panel.blockbreaker-communication-loading-panel{
	width:min(92vw,288px);
	min-height:342px;
	box-shadow:none;
	filter:drop-shadow(0 0 2px #473729);
	opacity:1;
	transform:scale(1);
	transform-origin:center center;
	animation:none;
	transition:opacity 0.2s ease,transform 0.2s ease;
}

/* 通信ローダー専用connect frame（190x189pxの9分割原寸）。
   panelが外寸を決め、frameはabsoluteで全面を覆い、contentは独立した前面層とする。 */
.blockbreaker-communication-loading-frame{
	position:absolute;
	z-index:0;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
}

/* 通信フレームは左右の各継ぎ目も2px重ね、拡縮時の細い隙間を防ぐ。 */
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-top-center,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-middle-center,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-bottom-center{
	margin-left:-2px;
	margin-right:-2px;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-top,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-bottom{
	flex:0 0 57px;
	height:57px;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-middle,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-middle-center{
	min-height:75px;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-middle{
	flex:1 1 auto;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-top > .blockbreaker-user-frame-corner,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-bottom > .blockbreaker-user-frame-corner{
	flex-basis:56px;
	width:56px;
	height:57px;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-top-center,
.blockbreaker-communication-loading-frame .blockbreaker-user-frame-bottom-center{
	height:57px;
}

.blockbreaker-communication-loading-frame .blockbreaker-user-frame-middle > .blockbreaker-user-frame-side{
	flex-basis:56px;
	width:56px;
}

.blockbreaker-communication-loading-layer.is-hidden{
	opacity:0;
	transition:opacity 0.2s ease,visibility 0s linear 0.2s;
}

.blockbreaker-communication-loading-layer.is-hidden .blockbreaker-communication-loading-panel{
	opacity:0;
	transform:scale(0.8);
	animation:none;
}

.blockbreaker-communication-loading-content{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:342px;
	padding:57px 56px;
	box-sizing:border-box;
}

.blockbreaker-communication-loading-content .blockbreaker-initial-cover-anime{
	margin-top:0;
}

.blockbreaker-communication-loading-content .blockbreaker-initial-cover-loading{
	color:#fff;
}

.blockbreaker-communication-loading-dots{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.42em;
	width:5.7em;
	min-height:1.55em;
	margin:0.55em 0 0;
	padding:0.22em 0.48em;
	border:2px solid rgba(255,255,255,0.96);
	border-radius:999px;
	box-shadow:0 0 0.5em rgba(255,255,255,0.34),inset 0 0 0.35em rgba(255,255,255,0.18);
	pointer-events:none;
}

.blockbreaker-communication-loading-dots > span{
	display:block;
	width:0.48em;
	height:0.48em;
	border-radius:50%;
	background:#fff;
	box-shadow:0 0 0.45em rgba(255,255,255,0.92),0 0.16em 0.18em rgba(0,0,0,0.42);
	opacity:0;
	transform:translateY(0.7em) scale(0.25);
	will-change:opacity,transform;
}

.blockbreaker-communication-loading-dots > span.is-filled{
	opacity:1;
	transform:translateY(0) scale(1);
	animation:blockBreakerInitialCoverDotPop 0.52s cubic-bezier(0.2,1.75,0.42,1) both;
}

.blockbreaker-user-panel h2{
	margin:0 0 0.55em;
	color:#fff8e8;
	font-size:1.25em;
	line-height:1.25;
	text-shadow:-1px -1px 0 #4a2115,1px -1px 0 #4a2115,-1px 1px 0 #4a2115,1px 1px 0 #4a2115,0 2px 2px rgba(0,0,0,0.65);
}

.blockbreaker-user-note{
	margin:0 0 0.55em;
	color:#ffd36d;
	font-size:0.78em;
	font-weight:900;
	line-height:1.25;
	text-shadow:-1px -1px 0 #5a2917,1px 1px 0 #5a2917;
}

.blockbreaker-user-input{
	display:block;
	width:100%;
	height:2.65em;
	padding:0 0.8em;
	border:2px solid #562818;
	border-radius:0.34em;
	outline:0;
	background:linear-gradient(#9c542f,#7c3e25);
	color:#fff3df;
	font:800 1em/1.2 "marugo",sans-serif;
	text-align:center;
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.5),inset 0 -1px 0 rgba(255,255,255,0.18),0 1px 0 rgba(255,230,196,0.25);
	box-sizing:border-box;
}

.blockbreaker-user-input::placeholder{
	color:#eab58f;
	opacity:1;
}

.blockbreaker-user-input:focus{
	border-color:#ffd277;
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.5),0 0 0 2px rgba(255,210,119,0.42);
}

.blockbreaker-user-status{
	min-height:1.35em;
	margin:0.3em 0 0;
	color:#ffe56c;
	font-size:0.76em;
	font-weight:900;
	line-height:1.35;
	text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.blockbreaker-user-buttons{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.55em;
	margin-top:0.45em;
}

.blockbreaker-user-buttons button,
:is(#parentResultLayer,#rankingLayer) .clear-restart-button,
:is(#parentResultLayer,#rankingLayer) .clear-view-button{
	width:100%;
	min-width:0;
	height:100%;
	aspect-ratio:auto;
	padding:0 0.8em 0.08em;
	font-size:1rem;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	background:transparent;
	color:#fff8df;
	font-weight:900;
	line-height:1;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

.blockbreaker-user-button-wrap,
.blockbreaker-result-button-wrap{
	width:fit-content;
	min-width:0;
	max-width:calc(50% - 0.275em);
}

.blockbreaker-user-button-wrap > button,
.blockbreaker-result-button-wrap > button{
	width:max-content;
	max-width:100%;
}

.blockbreaker-user-save-button{
	border-image-source:var(--bb-ui-buttonb-aqua);
}

.blockbreaker-user-close-button,
#rankingLayer .clear-view-button{
	border-image-source:var(--bb-ui-buttonb-black);
}

#parentResultLayer .clear-restart-button{
	border-image-source:var(--bb-ui-buttonb-pink);
}

#parentResultLayer .blockbreaker-result-button-wrap.is-button-b-blue > .clear-restart-button{
	border-image-source:var(--bb-ui-buttonb-blue);
}

#parentResultLayer .clear-view-button{
	border-image-source:var(--bb-ui-buttonb-red);
}

/*==================================================================================================
  画像ボタン共通：元文字を幅計算用に残し、全面オーバーレイへ中央表示
==================================================================================================*/
.blockbreaker-overlay-label-button{
	position:relative;
	white-space:nowrap;
}

.blockbreaker-overlay-label-button > .blockbreaker-overlay-label-source{
	visibility:hidden;
}

.blockbreaker-overlay-label-button::after{
	content:attr(aria-label);
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 0 0.08em;
	box-sizing:border-box;
	color:inherit;
	font:inherit;
	font-weight:inherit;
	line-height:1;
	text-align:center;
	text-shadow:inherit;
	white-space:nowrap;
	pointer-events:none;
}

#parentResultLayer.is-clear-result .message-buttons{
	flex-wrap:nowrap;
}


.blockbreaker-user-buttons button:focus-visible,
:is(#parentResultLayer,#rankingLayer) .clear-restart-button:focus-visible,
:is(#parentResultLayer,#rankingLayer) .clear-view-button:focus-visible{
	outline:2px solid #fff0a8;
	outline-offset:2px;
}

:is(#parentResultLayer,#rankingLayer){
	padding:clamp(8px,1.8vmin,16px);
	background:rgba(3,7,18,0.45);
}

#parentResultLayer{
	overflow-x:hidden;
	overflow-y:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

#parentResultLayer::-webkit-scrollbar{
	display:none;
	width:0;
	height:0;
}

#rankingLayer{
	overflow:hidden;
}

/*
 * ランキング／プレイヤー名モーダル：SOUNDパネル準拠の開閉演出。
 * 背景はフェードし、モーダル本体は画面下から上へ入る。
 */
#rankingLayer{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity 0.2s ease,visibility 0s linear 0s;
}

#rankingLayer.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.2s ease,visibility 0s linear 0.25s;
}

#rankingLayer .message-panel{
	opacity:1;
	transform:translateY(0);
	will-change:transform,opacity;
	transition:transform 0.2s ease,opacity 0.2s ease;
	animation:blockBreakerBottomModalSettleShake 0.2s linear 0.2s 1;
}

#rankingLayer.is-hidden .message-panel{
	opacity:0;
	transform:translateY(calc(100% + clamp(20px,5vmin,48px)));
	animation:none;
}

/* 登場アニメ中は、カーソル下を通過するボタンや入力欄へイベントを渡さない。 */
#rankingLayer.is-modal-entering .message-panel *,
.blockbreaker-user-layer.is-modal-entering .blockbreaker-user-panel *{
	pointer-events:none !important;
}

@keyframes blockBreakerBottomModalSettleShake{
	0%,100%{transform:translateY(0);}
	20%{transform:translateY(-3px);}
	40%{transform:translateY(3px);}
	60%{transform:translateY(-2px);}
	80%{transform:translateY(2px);}
}

@media (prefers-reduced-motion:reduce){
	#rankingLayer,
	#rankingLayer .message-panel,
	.blockbreaker-user-layer,
	.blockbreaker-user-panel,
	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow.is-guide-animating{
		transition-duration:0.01ms;
		animation:none;
	}
}

:is(#parentResultLayer,#rankingLayer) .message-panel{
	position:relative;
	width:min(86%,28.5em);
	max-height:94%;
	padding:0.9em 1.05em 1em;
	overflow:visible;
	border:18px solid transparent;
	border-image:none;
	border-radius:0;
	background:transparent;
	color:#4b2617;
	box-shadow:0 0.9em 2.6em rgba(0,0,0,0.5);
	box-sizing:border-box;
	text-align:center;
	scrollbar-color:#9f5a27 rgba(109,55,24,0.15);
	scrollbar-width:thin;
}

/*
 * ランキングのアローはパネル外へ張り出すため、
 * message-panel自体をスクロールコンテナにしない。
 * 外周の一時的なはみ出しは#rankingLayerのoverflow:hiddenで抑止する。
 */
#rankingLayer .message-panel{
	overflow:visible;
}

:is(#parentResultLayer,#rankingLayer) .message-panel-content{
	position:relative;
	z-index:1;
	top:0;
	width:100%;
	margin-top:0;
	box-sizing:border-box;
}

:is(#parentResultLayer,#rankingLayer) .message-panel::-webkit-scrollbar{
	width:7px;
}

:is(#parentResultLayer,#rankingLayer) .message-panel::-webkit-scrollbar-track{
	background:rgba(109,55,24,0.12);
}

:is(#parentResultLayer,#rankingLayer) .message-panel::-webkit-scrollbar-thumb{
	border-radius:999px;
	background:#9f5a27;
}

:is(#parentResultLayer,#rankingLayer) .message-sub{
	margin:0 0 0.35em;
	color:#8b451f;
	font-size:clamp(0.62rem,1.45vmin,0.78rem);
	font-weight:900;
	letter-spacing:0.14em;
	text-shadow:0 1px 0 rgba(255,255,255,0.65);
}

:is(#parentResultLayer,#rankingLayer) .message-panel h2{
	margin:0;
	font-size:clamp(1.45rem,4.8vmin,2.5rem);
	line-height:1.15;
}

#parentResultText{
	margin:0.45em 0;
}

.blockbreaker-clear-result{
	width:100%;
	color:#4b2617;
	font-family:system-ui,sans-serif;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-title{
	margin:0.7em 0 0.3em;
	font-size:0.82em;
	font-weight:900;
}

.blockbreaker-ranking-table{
	width:100%;
	border-collapse:collapse;
	color:#4b2617;
	font-size:0.7em;
	font-weight:700;
	line-height:1.25;
	table-layout:fixed;
}

.blockbreaker-ranking-table th,
.blockbreaker-ranking-table td{
	padding:0.18em 0.3em;
	overflow:hidden;
	border-bottom:1px solid rgba(99,48,23,0.28);
	text-overflow:ellipsis;
	white-space:nowrap;
}

.blockbreaker-ranking-table th{
	color:#6d351b;
	font-weight:900;
}

.blockbreaker-ranking-table th:nth-child(1),
.blockbreaker-ranking-table td:nth-child(1){
	width:3em;
	text-align:right;
}

.blockbreaker-ranking-table th:nth-child(2),
.blockbreaker-ranking-table td:nth-child(2){
	text-align:left;
}

.blockbreaker-ranking-table th:nth-child(3),
.blockbreaker-ranking-table td:nth-child(3){
	width:6.8em;
	font-variant-numeric:tabular-nums;
	text-align:right;
}

.blockbreaker-ranking-table tbody{
	background-color:#fff0c4;
}

.blockbreaker-ranking-table tbody.is-named-ranking{
	background-color:#f7d1f7;
}

.blockbreaker-ranking-table tr.is-current{
	background:rgba(235,174,49,0.48);
	color:#6d2d0e;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-current-rank{
	margin:0.55em 0 0.7em;
	font-size:0.72em;
	font-weight:900;
}

.blockbreaker-score-breakdown{
	margin:0.45em 0 0;
	padding-top:0.5em;
	border-top:1px solid rgba(92,43,20,0.58);
	color:#4b2617;
	font-size:0.76em;
}

.blockbreaker-score-row{
	display:flex;
	justify-content:space-between;
	gap:1em;
	padding:0.13em 0;
}

.blockbreaker-score-row span:last-child{
	font-variant-numeric:tabular-nums;
	font-weight:900;
}

.blockbreaker-score-row.is-total{
	margin-top:0.3em;
	padding-top:0.4em;
	border-top:1px solid rgba(92,43,20,0.58);
	color:#a74313;
	font-size:1.12em;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-time{
	margin:0.55em 0 0;
	font-size:0.7em;
	font-weight:700;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-status{
	min-height:1.3em;
	margin:0.45em 0 0;
	color:#8a3715;
	font-size:0.68em;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .message-buttons{
	gap:0.45em;
	margin-top:0.6em;
}

@media (max-width:420px){
	.blockbreaker-user-panel{
		width:96%;
		padding:0.45em 0.65em 0.65em;
		border-width:25px;
		border-image-width:25px;
	}

	:is(#parentResultLayer,#rankingLayer) .message-panel{
		width:94%;
		padding:0.72em 0.62em 0.82em;
		border-width:14px;
		border-image-width:14px;
	}
}

/*==================================================================================================
  RESULT画面：ロゴ・ランキング切り換え・成績表示
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer).is-clear-result .blockbreaker-result-text-header{
	display:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-result-logo{
	display:block;
	width:min(90%,320px);
	height:auto;
	margin:0 auto 0.65em;
	object-fit:contain;
	filter:drop-shadow(0 0.13em 0.08em rgba(83,31,13,0.28));
}

#parentResultLayer #parentResultLogo{
	position:relative;
	top:-0.35em;
	margin-bottom:0.3em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-result-logo[hidden]{
	display:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-mode-icon{
	display:block;
	width:6em;
	height:6em;
	object-fit:contain;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-mode-icon[hidden]{
	display:none;
}

#rankingLayer .blockbreaker-ranking-mode-icon-area{
	position:relative;
	width:100%;
	min-height:6em;
	margin:0 auto 0.5em;
}

#rankingLayer .blockbreaker-ranking-mode-icon{
	margin:0 auto;
}

#rankingLayer .blockbreaker-total-playing{
	position:absolute;
	z-index:2;
	top:26%;
	left:0.55em;
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	width:max-content;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	background:none;
	font-size:0.8em;
	font-weight:900;
	font-variant-numeric:tabular-nums;
	line-height:1.2;
	text-align:center;
	text-shadow:0 1px 0 rgba(255,255,255,0.65);
	white-space:nowrap;
	transform:translateY(-50%);
}

#rankingLayer .blockbreaker-total-playing-label{
	display:block;
	margin:0 0 0.22em;
}

#rankingLayer .blockbreaker-total-playing-value{
	display:inline-flex;
	align-items:baseline;
	justify-content:center;
	overflow:hidden;
	min-width:4.8em;
	padding:0.12em 0.5em;
	border:1px solid rgba(255,255,255,0.72);
	border-radius:3px;
	background:#000;
	color:#fff;
	text-shadow:none;
	box-sizing:border-box;
}

#rankingLayer .blockbreaker-total-playing-time{
	display:inline-flex;
	align-items:baseline;
	justify-content:center;
	gap:0.06em;
	min-width:6.7em;
	margin-top:0.2em;
	padding:0.3em 0.45em 0.08em;
	border:1px solid rgba(255,255,255,0.72);
	border-radius:3px;
	background:#000;
	color:#fff;
	font-size:0.94em;
	line-height:1;
	text-shadow:none;
	box-sizing:border-box;
}

#rankingLayer .blockbreaker-total-playing-time-number{
	font-family:dot,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	margin-right:0.2em;
	letter-spacing:0.1em;
}

#rankingLayer .blockbreaker-total-playing-time-unit{
	font-family:dot,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	margin-right:0.5em;
}

#rankingLayer .blockbreaker-total-playing-time-unit:last-child{
	margin-right:0;
}

#rankingLayer .blockbreaker-total-playing-time.is-loading{
	opacity:0.72;
}

#rankingLayer .blockbreaker-total-playing-digit{
	display:inline-block;
	opacity:0;
	transform:translateY(0.9em) scaleY(0.2);
	transform-origin:center bottom;
}

#rankingLayer .blockbreaker-ranking-title-build-up{
	--ranking-header-height:2.05em;
	--ranking-header-cap-width:1.774em;
	--ranking-header-left-image:var(--bb-ui-rankingheaderbg-yellow-left);
	--ranking-header-center-image:var(--bb-ui-rankingheaderbg-yellow-center);
	--ranking-header-right-image:var(--bb-ui-rankingheaderbg-yellow-right);
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:fit-content;
	max-width:min(calc(100% - 1.2em),20em);
	min-width:12.2em;
	height:var(--ranking-header-height);
	min-height:var(--ranking-header-height);
	margin:0.04em auto 0.22em;
	padding:0.14em 2.35em 0.18em;
	box-sizing:border-box;
	transform-origin:center center;
	will-change:transform,opacity;
	filter:drop-shadow(0 1px 0 rgba(255,255,255,0.75)) drop-shadow(0 1px 2px rgba(88,40,14,0.24));
}

/* 中央画像を左右端画像の下へ2pxずつ潜り込ませ、分割線を隠す。 */
#rankingLayer .blockbreaker-ranking-title-build-up::before{
	content:"";
	position:absolute;
	z-index:0;
	top:0;
	bottom:0;
	left:calc(var(--ranking-header-cap-width) - 2px);
	right:calc(var(--ranking-header-cap-width) - 2px);
	background:var(--ranking-header-center-image) center center / auto 100% repeat-x;
	pointer-events:none;
}

/* 左右端は中央画像より手前へ描画する。 */
#rankingLayer .blockbreaker-ranking-title-build-up::after{
	content:"";
	position:absolute;
	z-index:0;
	inset:0;
	background-image:var(--ranking-header-left-image),var(--ranking-header-right-image);
	background-position:left center,right center;
	background-size:auto 100%,auto 100%;
	background-repeat:no-repeat,no-repeat;
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-title-build-up.is-named-ranking{
	--ranking-header-left-image:var(--bb-ui-rankingheaderbg-purple-left);
	--ranking-header-center-image:var(--bb-ui-rankingheaderbg-purple-center);
	--ranking-header-right-image:var(--bb-ui-rankingheaderbg-purple-right);
}

#rankingLayer .blockbreaker-ranking-title-build-up > .blockbreaker-ranking-title{
	position:relative;
	z-index:1;
	width:auto;
	max-width:100%;
	margin:0;
	padding:0.2em 0 0;
	border-radius:0;
	background:none;
	color:#9c3f17;
	font-size:clamp(0.95rem,2.9vmin,1.04rem);
	font-weight:900;
	line-height:1.16;
	letter-spacing:0.03em;
	text-align:center;
	text-shadow:0 1px 0 rgba(255,255,255,0.7);
	word-break:keep-all;
}

#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating{
	animation:blockbreaker-ranking-header-build-up 0.42s cubic-bezier(0.18,0.88,0.26,1.16) both;
}

#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating::before,
#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating::after{
	animation:blockbreaker-ranking-header-frame-in 0.42s cubic-bezier(0.18,0.88,0.26,1.16) both;
}

#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating > .blockbreaker-ranking-title{
	animation:blockbreaker-ranking-header-text-in 0.34s cubic-bezier(0.18,0.88,0.26,1.1) 0.06s both;
}

@keyframes blockbreaker-ranking-header-build-up{
	0%{opacity:0;transform:translateY(-0.1em) scale(0.88);}
	68%{opacity:1;transform:translateY(0) scale(1.045);}
	100%{opacity:1;transform:none;}
}

@keyframes blockbreaker-ranking-header-frame-in{
	0%{opacity:0;transform:scaleX(0.18) scaleY(0.78);transform-origin:center center;}
	66%{opacity:1;transform:scaleX(1.06) scaleY(1.02);transform-origin:center center;}
	100%{opacity:1;transform:none;}
}

@keyframes blockbreaker-ranking-header-text-in{
	0%{opacity:0;transform:translateY(0.32em) scale(0.92);}
	70%{opacity:1;transform:translateY(-0.03em) scale(1.02);}
	100%{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
	#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating,
	#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating::before,
	#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating::after,
	#rankingLayer .blockbreaker-ranking-title-build-up.is-build-up-animating > .blockbreaker-ranking-title{
		animation:none;
	}
}

#rankingLayer .blockbreaker-total-playing-value.is-animating .blockbreaker-total-playing-digit{
	animation:blockbreaker-total-playing-digit-in 0.42s cubic-bezier(0.2,0.9,0.25,1.25) both;
	animation-delay:calc(var(--digit-index) * 0.065s);
}

@keyframes blockbreaker-total-playing-digit-in{
	0%{
		opacity:0;
		transform:translateY(0.9em) scaleY(0.2);
	}

	70%{
		opacity:1;
		transform:translateY(-0.08em) scaleY(1.08);
	}

	100%{
		opacity:1;
		transform:translateY(0) scaleY(1);
	}
}

@media (prefers-reduced-motion:reduce){
	#rankingLayer .blockbreaker-total-playing-digit{
		opacity:1;
		transform:none;
	}

	#rankingLayer .blockbreaker-total-playing-value.is-animating .blockbreaker-total-playing-digit{
		animation:none;
	}
}


#parentResultLayer .blockbreaker-result-ranking-heading{
	position:relative;
	isolation:isolate;
	display:grid;
	grid-template-columns:37% minmax(0,1fr);
	align-items:center;
	width:76%;
	margin:0 auto 0.35em;
}

#parentResultLayer .blockbreaker-result-ranking-heading-text{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-width:0;
	text-align:center;
}

#parentResultLayer .blockbreaker-ranking-mode-icon{
	position:relative;
	z-index:2;
	justify-self:end;
	width:4em;
	height:4em;
	margin:0 0.45em 0 0;
}

#parentResultLayer .blockbreaker-result-ranking-heading .blockbreaker-ranking-title{
	margin:0 0 0.2em;
}

#parentRankingModeLabel{
	white-space:nowrap;
}

#parentResultLayer .blockbreaker-result-ranking-heading .blockbreaker-current-rank{
	margin:0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-result{
	position:relative;
	display:flex;
	flex-direction:column;
	width:100%;
	min-height:0;
	color:#4b2617;
	font-family:system-ui,-apple-system,"Segoe UI","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-result[hidden]{
	display:none;
}

/*--------------------------------------------------------------------------------------------------
  RESULT登場演出

  ・初期状態ではスコア欄上端と「最終スコア」だけを表示する。
  ・内訳を展開し、最終スコアをスタンプ表示して所定位置へ収める。
  ・DB保存とランキング取得が完了した場合だけ、スコア欄を下へ移動してランキングを展開する。
--------------------------------------------------------------------------------------------------*/
#parentResultLayer.is-clear-result #parentClearResultContent{
	position:relative;
	display:block;
	overflow:visible;
	width:100%;
	min-height:1px;
}

#parentResultLayer .blockbreaker-result-ranking-block,
#parentResultLayer .blockbreaker-result-score-block{
	position:absolute;
	left:0;
	width:100%;
	box-sizing:border-box;
}

#parentResultLayer .blockbreaker-result-ranking-block{
	top:0;
	z-index:1;
	font-family:marugo;
	transform-origin:center center;
	will-change:transform,opacity;
}

#rankingLayer .blockbreaker-clear-result{
	font-family:marugo;
}

#parentResultLayer .blockbreaker-result-score-block{
	top:0;
	bottom:auto;
	z-index:2;
	font-family:cookie;
	transform:none;
	will-change:auto;
}

#parentResultLayer.is-result-sequence-active .blockbreaker-result-ranking-block{
	opacity:0;
	transform:scaleX(0);
	pointer-events:none;
}

#parentResultLayer.is-result-sequence-active .blockbreaker-result-score-block{
	transform:none;
}

#parentResultLayer.is-result-intro-ready .blockbreaker-score-breakdown > :is(.blockbreaker-clear-time,.blockbreaker-score-row:not(.is-total)){
	opacity:0;
	transform:translateX(2.6em);
}

#parentResultLayer.is-result-intro-ready .blockbreaker-score-row.is-total{
	transform:translateY(calc(-1 * var(--result-total-row-shift,0px)));
	will-change:transform;
}

#parentResultLayer.is-result-intro-ready #parentFinalScore{
	position:relative;
	z-index:8;
	display:inline-block;
	font-size:1.3em;
	opacity:0;
	transform-origin:center center;
	will-change:transform,opacity,filter;
}

#parentResultLayer.is-result-intro-ready :is(#parentBestScore,#parentClearStatus){
	opacity:0;
	visibility:hidden;
	transform:translateY(0.45em);
	transition:opacity 0.22s ease,transform 0.22s ease,visibility 0s linear 0.22s;
}

#parentResultLayer.is-result-intro-active .blockbreaker-score-breakdown > :is(.blockbreaker-clear-time,.blockbreaker-score-row:not(.is-total)){
	animation:blockBreakerResultScoreRowIn 0.2s ease-out both;
	animation-delay:calc(0.08s + var(--result-score-row-index,0) * 0.09s);
}

#parentResultLayer.is-result-intro-active .blockbreaker-score-row.is-total{
	animation:blockBreakerResultTotalRowDown 0.72s cubic-bezier(0.18,0.78,0.2,1) both;
}

#parentResultLayer.is-result-detail-settled .blockbreaker-score-breakdown > :is(.blockbreaker-clear-time,.blockbreaker-score-row:not(.is-total)){
	animation:none;
	opacity:1;
	transform:none;
	will-change:auto;
}

#parentResultLayer.is-result-detail-settled .blockbreaker-score-row.is-total{
	animation:none;
	transform:none;
	will-change:auto;
}

@keyframes blockBreakerResultScoreRowIn{
	0%{opacity:0;transform:translateX(2.6em);}
	100%{opacity:1;transform:translateX(0);}
}

@keyframes blockBreakerResultTotalRowDown{
	0%{transform:translateY(calc(-1 * var(--result-total-row-shift,0px)));}
	100%{transform:translateY(0);}
}

#parentResultLayer.is-result-score-stamping #parentFinalScore{
	animation:blockBreakerResultScoreStamp 0.42s cubic-bezier(0.16,0.88,0.2,1.12) both;
}

@keyframes blockBreakerResultScoreStamp{
	0%{
		opacity:0;
		filter:blur(8px);
		transform:translate(calc(var(--result-score-stamp-x,0px) - 24px),calc(var(--result-score-stamp-y,0px) + 14px)) scale(var(--result-score-stamp-start-scale,4)) rotate(-10deg);
	}
	28%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) + 14px),calc(var(--result-score-stamp-y,0px) - 9px)) scale(var(--result-score-stamp-scale,2.8)) scale(1.15) rotate(6deg);
	}
	43%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) - 11px),calc(var(--result-score-stamp-y,0px) + 7px)) scale(var(--result-score-stamp-scale,2.8)) scale(0.95) rotate(-4.5deg);
	}
	58%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) + 8px),calc(var(--result-score-stamp-y,0px) - 5px)) scale(var(--result-score-stamp-scale,2.8)) scale(1.07) rotate(3deg);
	}
	72%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) - 5px),calc(var(--result-score-stamp-y,0px) + 3px)) scale(var(--result-score-stamp-scale,2.8)) scale(0.98) rotate(-2deg);
	}
	85%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) + 3px),calc(var(--result-score-stamp-y,0px) - 2px)) scale(var(--result-score-stamp-scale,2.8)) scale(1.02) rotate(1deg);
	}
	94%{
		opacity:1;
		filter:blur(0);
		transform:translate(calc(var(--result-score-stamp-x,0px) - 1px),calc(var(--result-score-stamp-y,0px) + 1px)) scale(var(--result-score-stamp-scale,2.8)) scale(0.995) rotate(-0.4deg);
	}
	100%{
		opacity:1;
		filter:blur(0);
		transform:translate(var(--result-score-stamp-x,0px),var(--result-score-stamp-y,0px)) scale(var(--result-score-stamp-scale,2.8)) rotate(0);
	}
}

#parentResultLayer.is-result-score-settling #parentFinalScore{
	animation:blockBreakerResultScoreSettle 0.48s cubic-bezier(0.22,0.72,0.24,1) both;
}

#parentResultLayer.is-result-score-settled #parentFinalScore{
	animation:none;
	opacity:1;
	filter:none;
	transform:none;
	will-change:auto;
}

@keyframes blockBreakerResultScoreSettle{
	0%{
		opacity:1;
		transform:translate(var(--result-score-stamp-x,0px),var(--result-score-stamp-y,0px)) scale(var(--result-score-stamp-scale,2.8));
	}
	100%{
		opacity:1;
		transform:translate(0,0) scale(1);
	}
}

#parentResultLayer.is-result-support-visible :is(#parentBestScore,#parentClearStatus){
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	transition:opacity 0.22s ease,transform 0.22s ease,visibility 0s linear 0s;
}

#parentResultLayer.is-result-support-settled :is(#parentBestScore,#parentClearStatus){
	opacity:1;
	visibility:visible;
	transform:none;
	transition:none;
	will-change:auto;
}

#parentResultLayer.is-clear-result #parentClearStatus{
	position:absolute;
	left:0;
	top:100%;
	width:100%;
	box-sizing:border-box;
}

#parentResultLayer.is-result-status-fading #parentClearStatus{
	opacity:0;
	transition:opacity 0.2s linear;
}

#parentResultLayer.is-result-score-sliding .blockbreaker-result-score-block{
	transform:translateY(var(--result-score-block-shift,0px));
	transition:transform 0.5s cubic-bezier(0.22,0.72,0.24,1);
	will-change:transform;
}

#parentResultLayer.is-result-score-block-settled .blockbreaker-result-score-block,
#parentResultLayer.is-result-sequence-complete .blockbreaker-result-score-block{
	top:auto;
	bottom:0;
	transform:none;
	transition:none;
	will-change:auto;
}

#parentResultLayer.is-result-sequence-complete #parentFinalScore{
	font-size:1.3em;
	animation:none;
	filter:none;
	transform:none;
	will-change:auto;
}

#parentResultLayer.is-result-ranking-revealing .blockbreaker-result-ranking-block,
#parentResultLayer.is-result-ranking-visible .blockbreaker-result-ranking-block{
	opacity:1;
	transform:scaleX(1);
	transition:opacity 0.5s ease,transform 0.5s cubic-bezier(0.2,0.82,0.22,1);
}

#parentResultLayer.is-result-ranking-visible .blockbreaker-result-ranking-block{
	pointer-events:auto;
}

#parentResultLayer.is-result-sequence-complete .blockbreaker-result-ranking-block{
	opacity:1;
	transform:none;
	transition:none;
	will-change:auto;
}

#parentResultLayer.is-result-arrow-guide-pending .blockbreaker-result-ranking-block .blockbreaker-ranking-arrow{
	opacity:0;
	pointer-events:none;
}

#parentResultLayer.is-result-layout-measuring .blockbreaker-score-breakdown > *,
#parentResultLayer.is-result-layout-measuring #parentFinalScore,
#parentResultLayer.is-result-layout-measuring :is(#parentBestScore,#parentClearStatus){
	animation:none !important;
	transition:none !important;
}

#parentResultLayer.is-result-layout-measuring .blockbreaker-score-breakdown > :is(.blockbreaker-clear-time,.blockbreaker-score-row:not(.is-total)){
	opacity:1 !important;
	transform:none !important;
}

#parentResultLayer.is-result-layout-measuring .blockbreaker-score-row.is-total,
#parentResultLayer.is-result-layout-measuring #parentFinalScore{
	opacity:1 !important;
	transform:none !important;
}

@media (prefers-reduced-motion:reduce){
	#parentResultLayer.is-result-sequence-active .blockbreaker-result-score-block,
	#parentResultLayer.is-result-sequence-active .blockbreaker-result-ranking-block,
	#parentResultLayer.is-result-intro-ready .blockbreaker-score-breakdown > *,
	#parentResultLayer.is-result-intro-ready #parentFinalScore,
	#parentResultLayer.is-result-intro-ready :is(#parentBestScore,#parentClearStatus){
		animation:none !important;
		transition:none !important;
	}

	#parentResultLayer.is-result-intro-active .blockbreaker-score-breakdown > *,
	#parentResultLayer.is-result-score-settling #parentFinalScore,
	#parentResultLayer.is-result-support-visible :is(#parentBestScore,#parentClearStatus){
		opacity:1;
		visibility:visible;
		transform:none;
	}
}


#rankingLayer .blockbreaker-ranking-navigation-area{
	position:relative;
	display:flex;
	align-items:flex-end;
	width:95%;
	min-height:2.85em;
	margin:0.12em auto 0.1em;
	padding-left:0.9em;
	box-sizing:border-box;
}

#rankingLayer .blockbreaker-ranking-named-toggle{
	position:absolute;
	right:0;
	bottom:0.3em;
	z-index:6;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.08em;
	min-width:0;
	padding:0;
	border:0;
	background:none;
	color:#5a2c16;
	font-family:system-ui,-apple-system,"Segoe UI","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:clamp(0.58rem,1.8vmin,0.72rem);
	font-weight:900;
	line-height:1;
	letter-spacing:0.02em;
	text-align:center;
	text-shadow:0 1px 0 rgba(255,255,255,0.72);
	cursor:pointer;
	user-select:none;
}

#rankingLayer .blockbreaker-ranking-named-toggle span{
	display:block;
	font-family:tanuki,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	white-space:nowrap;
}

#rankingLayer .blockbreaker-ranking-named-toggle img{
	display:block;
	width:auto;
	height:clamp(22.3px,4.87vmin,30px);
	object-fit:contain;
	filter:drop-shadow(0 1px 1px rgba(58,25,8,0.36));
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-named-toggle:hover{
	filter:brightness(1.08);
}

#rankingLayer .blockbreaker-ranking-named-toggle:active{
	transform:scale(0.96);
}

#rankingLayer .blockbreaker-ranking-named-toggle:focus-visible{
	outline:2px solid #32170d;
	outline-offset:2px;
	border-radius:0.4em;
}

@media (max-width:420px){
	#rankingLayer .blockbreaker-ranking-title-build-up{
		min-width:11.3em;
		padding-left:2.08em;
		padding-right:2.08em;
	}
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-title{
	width:fit-content;
	margin:0.08em auto 0.18em;
	padding:0.1em 0.5em;
	color:#9c3f17;
	font-size:clamp(0.9rem,2.8vmin,1rem);
	font-weight:900;
	line-height:1.25;
	letter-spacing:0.03em;
	border-radius:0.45em;
	background-color:#fff0c4;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-current-rank{
	margin:0.12em 0 0.45em;
	color:#32170d;
	font-size:clamp(0.88rem,2.65vmin,0.98rem);
	font-weight:900;
	line-height:1.3;
	text-shadow:0 1px 0 rgba(255,255,255,0.7);
}

#parentCurrentRank{
	white-space:nowrap;
}

:is(#parentCurrentRank,#rankingCurrentRank) .blockbreaker-current-rank-text{
	letter-spacing:-0.1em;
}

:is(#parentCurrentRank,#rankingCurrentRank) .blockbreaker-current-rank-badge{
	display:inline-block;
	margin-inline:0.5em;
	padding-inline:0.3em;
	border:1px solid #9b4d12;
	border-radius:0.42em;
	background:linear-gradient(180deg,#fff2a8 0%,#ffc94f 100%);
	color:#762b08;
	font-size:1.12em;
	font-variant-numeric:tabular-nums;
	line-height:1.25;
	text-shadow:0 1px 0 rgba(255,255,255,0.72);
	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset,0 1px 2px rgba(83,35,8,0.24);
}


#parentResultLayer .blockbreaker-ranking-pagination{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.5em;
	min-height:0.9em;
	margin:0.38em auto 0;
}

#parentResultLayer .blockbreaker-ranking-pagination-button{
	width:0.58em;
	height:0.58em;
	padding:0;
	border:1px solid #1f0c05;
	border-radius:50%;
	background:#e7b91d;
	box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
	opacity:0.62;
	cursor:pointer;
	transition:transform 0.12s ease,opacity 0.12s ease,filter 0.12s ease;
}

#parentResultLayer .blockbreaker-ranking-pagination-button.is-named-ranking{
	background:#b832c5;
}

#parentResultLayer .blockbreaker-ranking-pagination-button.is-current{
	opacity:1;
	transform:scale(1.38);
	filter:brightness(1.15);
}

#parentResultLayer .blockbreaker-ranking-pagination-button:hover{
	opacity:1;
}

#parentResultLayer .blockbreaker-ranking-pagination-button:focus-visible{
	outline:2px solid #32170d;
	outline-offset:2px;
}

#rankingLayer .blockbreaker-ranking-icon-navigation{
	position:static;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:calc(0.18em + 2px);
	width:fit-content;
	max-width:calc(100% - clamp(64px,13.8vmin,86px));
	margin:0 0 0.3em;
	padding:0;
	font-size:clamp(0.72rem,2.3vmin,0.9rem);
}

#rankingLayer .blockbreaker-ranking-icon-button{
	display:grid;
	flex:0 0 auto;
	place-items:center;
	width:2.25em;
	height:2.25em;
	padding:0.1em;
	border:1px solid #32170d;
	border-radius:0.42em;
	background:#fff0c4;
	box-shadow:0 1px 0 rgba(255,255,255,0.72) inset;
	opacity:0.66;
	cursor:pointer;
	transition:transform 0.12s ease,opacity 0.12s ease,filter 0.12s ease,box-shadow 0.12s ease;
}

#rankingLayer .blockbreaker-ranking-icon-button.is-named-ranking{
	background:#f7d1f7;
}

#rankingLayer .blockbreaker-ranking-icon-button img{
	display:block;
	width:2em;
	height:2em;
	object-fit:contain;
	filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-icon-button.is-current{
	opacity:1;
	transform:translateY(-0.08em) scale(1.08);
	box-shadow:0 0 0 2px #fff,0 0 0 4px #6d351b,0 1px 0 rgba(255,255,255,0.72) inset;
}

#rankingLayer .blockbreaker-ranking-icon-button:hover{
	opacity:1;
	filter:brightness(1.08);
}

#rankingLayer .blockbreaker-ranking-icon-button:active{
	transform:scale(0.95);
}

#rankingLayer .blockbreaker-ranking-icon-button:focus-visible{
	outline:2px solid #32170d;
	outline-offset:2px;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-switcher{
	--ranking-arrow-width:clamp(23px,4.9vmin,32px);
	position:relative;
	display:block;
	width:97%;
	min-height:0;
	margin-inline:auto;
	overflow:visible;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	min-width:0;
	width:100%;
	overflow:visible;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow{
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	display:grid;
	place-items:center;
	width:var(--ranking-arrow-width);
	height:auto;
	min-height:0;
	padding:0;
	border:0;
	background:transparent;
	visibility:hidden;
	cursor:pointer;
	transform:translateY(-50%);
	transition:transform 0.12s ease,filter 0.12s ease;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow-left{
	--ranking-arrow-guide-inward:20px;
	--ranking-arrow-guide-outward:-5px;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow-right{
	--ranking-arrow-guide-inward:-20px;
	--ranking-arrow-guide-outward:5px;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow.is-positioned{
	visibility:visible;
}

#rankingLayer.is-arrow-guide-pending .blockbreaker-ranking-arrow{
	opacity:0;
	pointer-events:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow.is-guide-animating{
	pointer-events:none;
	animation:blockBreakerRankingArrowGuide 1s ease-out 1 both;
}

@keyframes blockBreakerRankingArrowGuide{
	0%{opacity:0;transform:translateX(var(--ranking-arrow-guide-inward)) translateY(-50%);}
	32%{opacity:1;transform:translateX(0) translateY(-50%);}
	47%{opacity:1;transform:translateX(var(--ranking-arrow-guide-outward)) translateY(-50%);}
	57%{opacity:1;transform:translateX(0) translateY(-50%);}
	72%{opacity:1;transform:translateX(var(--ranking-arrow-guide-outward)) translateY(-50%);}
	82%,100%{opacity:1;transform:translateX(0) translateY(-50%);}
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow img{
	display:block;
	width:auto;
	height:clamp(56px,12vmin,72px);
	max-width:100%;
	object-fit:contain;
	filter:
		drop-shadow(1px 0 0 rgba(0,0,0,0.5))
		drop-shadow(-1px 0 0 rgba(0,0,0,0.5))
		drop-shadow(0 1px 0 rgba(0,0,0,0.5))
		drop-shadow(0 -1px 0 rgba(0,0,0,0.5))
		drop-shadow(1px 1px 0 rgba(0,0,0,0.5))
		drop-shadow(-1px 1px 0 rgba(0,0,0,0.5))
		drop-shadow(1px -1px 0 rgba(0,0,0,0.5))
		drop-shadow(-1px -1px 0 rgba(0,0,0,0.5));
	pointer-events:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow:hover{
	filter:brightness(1.1);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow:active{
	transform:translateY(-50%) scale(0.94);
	filter:brightness(0.95);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow:focus-visible{
	outline:2px solid #9d481b;
	outline-offset:-2px;
	border-radius:0.4em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table{
	width:100%;
	border-collapse:collapse;
	color:#4b2617;
	font-size:clamp(0.8rem,2.4vmin,0.9rem);
	font-weight:700;
	line-height:1.25;
	table-layout:auto;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td{
	padding:0.2em 0.32em;
	overflow:hidden;
	border-bottom:1px solid rgba(99,48,23,0.27);
	text-overflow:ellipsis;
	white-space:nowrap;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td:nth-child(1){
	width:3em;
	text-align:right;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td:nth-child(2){
	width:auto;
	text-align:left;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td:nth-child(3){
	width:1%;
	font-variant-numeric:tabular-nums;
	text-align:right;
	white-space:nowrap;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-rank-number,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-number{
	font-family:cookie,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-rank-unit,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit{
	font-family:marugo,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-content{
	display:inline-flex;
	align-items:baseline;
	justify-content:flex-end;
	line-height:1;
	vertical-align:baseline;
	transform:translateY(0.08em);
}

#rankingLayer .blockbreaker-ranking-value-content{
	font-size:1.5em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-number,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit{
	display:inline-block;
	line-height:1;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit{
	margin-left:0.15em;
	font-size:0.7em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit.has-right-margin{
	margin-right:0.15em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit.is-point-unit{
	font-family:killgo,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-value-unit.is-combo-unit{
	letter-spacing:-0.1em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:nth-child(-n+2){
	font-size:1.3em;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:nth-child(-n+2){
	color:red;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tr.is-current{
	background:rgba(235,174,49,0.42);
	color:#6d2d0e;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-user-clear-summary{
	margin:0.95em 0 0;
	padding:0.48em 0 0.46em;
	border-bottom:1px solid rgba(92,43,20,0.58);
	color:#32170d;
	font-size:clamp(0.9rem,2.65vmin,1rem);
	font-weight:900;
	line-height:1.35;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-score-breakdown{
	width:97%;
	margin:1.5em auto 0em auto;
	padding:0.42em 0 0;
	border-top:1px solid rgba(92,43,20,0.58);
	color:#4b2617;
	font-size:clamp(0.8rem,2.35vmin,0.9rem);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-time{
	display:flex;
	justify-content:space-between;
	gap:1em;
	margin:0 0 0.38em;
	padding:0.14em 0;
	color:#476a87;
	font-size:clamp(0.88rem,2.55vmin,0.98rem);
	font-weight:900;
	line-height:1.35;
	text-align:left;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-time-value{
	font-variant-numeric:tabular-nums;
	font-weight:900;
	text-align:right;
	white-space:nowrap;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-time-milliseconds{
	display:inline-block;
	font-size:0.7em;
	line-height:1;
	vertical-align:baseline;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-score-label-tight{
	letter-spacing:-0.05em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-score-row{
	display:flex;
	justify-content:space-between;
	gap:1em;
	padding:0.14em 0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-score-row span:last-child{
	font-variant-numeric:tabular-nums;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-score-row.is-total{
	margin-top:0.32em;
	padding-top:0.38em;
	border-top:1px solid rgba(92,43,20,0.58);
	color:#b44016;
	font-size:1.08em;
	font-weight:900;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-best-score{
	margin:0.45em 0 0;
	padding-inline:1.5%;
	box-sizing:border-box;
	color:#476a87;
	font-size:clamp(0.82rem,2.35vmin,0.92rem);
	font-weight:900;
	line-height:1.35;
	text-align:right;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-status{
	min-height:1.35em;
	margin:0.42em 0 0;
	color:#7c3316;
	font-size:clamp(0.8rem,2.3vmin,0.9rem);
	font-weight:900;
	line-height:1.35;
}

:is(#parentResultLayer,#rankingLayer).is-clear-result .message-buttons{
	gap:0.6em;
	margin-top:0.85em;
}

@media (max-width:420px){
	:is(#parentResultLayer,#rankingLayer) .blockbreaker-result-logo{
		width:min(90%,300px);
	}

	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-switcher{
		--ranking-arrow-width:29px;
		width:97%;
	}

	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow img{
		height:70px;
	}

	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td{
		padding:0.18em 0.2em;
	}

	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td:nth-child(1){
		width:3.15em;
	}

	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table td:nth-child(3){
		width:1%;
	}
	#rankingLayer .blockbreaker-ranking-navigation-area{
		width:97%;
	}

	#rankingLayer .blockbreaker-ranking-named-toggle{
		right:0;
		bottom:0.3em;
		font-size:0.54rem;
	}

	#rankingLayer .blockbreaker-ranking-named-toggle img{
		width:auto;
		height:20px;
	}
}



/*==================================================================================================
  左下メニュー／ランキング閲覧モーダル
==================================================================================================*/
.blockbreaker-ranking-layer{
	z-index:20000;
}

.blockbreaker-ranking-layer[aria-hidden="false"]{
	visibility:visible;
}

#rankingLayer .message-panel{
	width:min(86%,28.5em);
}

#rankingLayer .blockbreaker-result-logo{
	margin-bottom:0.5em;
}

#rankingLayer .blockbreaker-clear-status{
	min-height:1.35em;
	margin:0.2em 0 0.35em;
	text-align:center;
}

#rankingLayer #rankingStatus:empty{
	display:none;
}

#rankingLayer .blockbreaker-ranking-reload-area{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	margin-top:1.5em;
}

#rankingLayer .blockbreaker-ranking-reload-area[hidden],
#rankingLayer .blockbreaker-ranking-navigation-area[hidden],
#rankingLayer .blockbreaker-ranking-switcher[hidden]{
	display:none;
}

#rankingLayer .blockbreaker-ranking-reload-button{
	width:min(46%,162px);
	border-image-source:var(--bb-ui-buttonb-red);
}

#rankingLayer.is-ranking-communication-error .message-buttons{
	margin-top:0.9em;
}

#rankingLayer .clear-view-button{
	width:min(46%,162px);
}

#rankingLayer .blockbreaker-ranking-reload-button-wrap{
	width:min(46%,162px);
}

#rankingLayer .blockbreaker-ranking-reload-button-wrap > .clear-view-button{
	width:100%;
}

/*
 * ランキングモーダルの「閉じる」だけを試験的にunderlay方式へ変更する。
 * 完成済みbuttonB_black.webpはボタン本体で維持し、外側ラッパーの中央へ
 * buttonBG/buttonB_black/center.webpを敷いて接合部の背面を補強する。
 */
#rankingLayer .blockbreaker-ranking-close-button-wrap{
	width:min(46%,162px);
}

#rankingLayer .blockbreaker-ranking-close-button-wrap > .clear-view-button{
	width:100%;
}

/* R18確認モーダル：2ボタンをランキングの閉じると同じunderlay方式にする。 */
#messageLayer.is-age-confirm-message .blockbreaker-age-confirm-button-wrap{
	width:fit-content;
	max-width:100%;
}

#messageLayer.is-age-confirm-message .blockbreaker-age-confirm-button-wrap > :is(#startButton,#declineStartButton){
	width:100%;
}

#messageLayer.is-age-confirm-message .blockbreaker-age-confirm-start-button-wrap{
	margin-bottom:0.5em;
}

@media (max-width:420px){
	.hud-restart-button-wrap{
		--button-edge-width:14px;
	}

	.hud-restart-button{
		min-width:6.5em;
		height:25px;
		padding:0 0.3em 0.06em;
		border-width:0 25px;
		border-image-slice:0 53 fill;
		border-image-width:0 14px;
		border-image-repeat:stretch;
		font-size:0.68em;
	}

	.blockbreaker-bottom-menu{
		left:2px;
		bottom:-2px;
		gap:0.3em;
	}

	.blockbreaker-bottom-menu-button{
		width:max-content;
		min-width:6.5em;
		max-width:calc((100vw - 2em) / 2);
		height:25px;
		padding:0 0.3em 0.06em;
		border-width:0 30px;
		border-image-slice:0 45 fill;
		border-image-width:0 15px;
		border-image-repeat:stretch;
		font-size:0.68em;
	}

	.blockbreaker-user-name-button{
		--button-a-purple-cap-width:19.1667px;
	}
}


.blockbreaker-bottom-menu.is-ios:not(.is-outside-game){
	bottom:calc(-2px + clamp(0px,env(safe-area-inset-bottom,0px),calc(0.15em + 2px)));
}

.sound-panel-body .sound-bgm-credit .stage-author-text-link{
	text-decoration:none;
}

/*==================================================================================================
  クリア記録の再確認モーダル
==================================================================================================*/
.blockbreaker-record-recovery-layer{
	z-index:50000;
	background:rgba(3,7,18,0.62);
}

.blockbreaker-record-recovery-layer .message-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(90%,420px);
	min-height:328px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

#recordRecoveryPauseFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:grid;
	grid-template-rows:79px minmax(170px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

.blockbreaker-record-recovery-layer .message-panel-content{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100%;
	margin-bottom:1em;
	font-family:'cookie',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	text-align:center;
}

.blockbreaker-record-recovery-sub{
	margin:0 0 0.25em;
	color:#fff1ce;
}

.blockbreaker-record-recovery-layer h2{
	margin:0;
	color:#fff1ce;
	font-size:2.2em;
	line-height:1.15;
	letter-spacing:0;
	-webkit-text-stroke:7px #542014;
	paint-order:stroke;
}

.blockbreaker-record-recovery-title-line{
	width:79%;
}

.blockbreaker-record-recovery-title-line-top{
	margin:0.18em 0;
}

.blockbreaker-record-recovery-title-line-bottom{
	margin:0.18em 0 0.5em;
}

.blockbreaker-record-recovery-status{
	width:min(100%,17.8em);
	margin:1em auto 3em auto;
	padding:0.95em 1em;
	border:1px solid rgba(255,255,255,0.14);
	border-radius:0.8em;
	background:rgba(3,7,18,0.48);
	box-shadow:inset 0 0 0 1px rgba(255,240,214,0.06);
	text-align:left;
}

.blockbreaker-record-recovery-status p{
	margin:0;
	color:#f8fafc;
	font-size:clamp(0.84rem,2.55vmin,0.98rem);
	font-weight:900;
	line-height:1.52;
}

#recordRecoverySaveStatus{
	font-family:'marugo';
	text-align:center;
}

.blockbreaker-record-recovery-status .is-success{
	color:#86efac;
}

.blockbreaker-record-recovery-status .is-warning{
	color:#fde68a;
}

.blockbreaker-record-recovery-status .is-error{
	color:#fca5a5;
}

.blockbreaker-record-recovery-layer .message-buttons{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.55em;
	width:100%;
	margin:0;
}

.blockbreaker-record-recovery-buttons{
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	transform:translateY(1.35em);
	transition:transform 0.22s ease,opacity 0.18s ease,visibility 0s linear 0.22s;
	will-change:transform,opacity;
}

.blockbreaker-record-recovery-buttons.is-actions-visible{
	visibility:visible;
	opacity:1;
	pointer-events:auto;
	transform:translateY(0);
	transition:transform 0.22s ease,opacity 0.18s ease,visibility 0s linear 0s;
}

.blockbreaker-record-recovery-buttons .blockbreaker-retry-button-wrap{
	flex:0 0 auto;
}

/*
 * ボタン本体の寸法・端画像処理・文字・hoverは、既存リトライ確認モーダルと
 * 同じblockbreaker-retry-confirm/cancel-buttonをそのまま使用する。
 * 再接続だけ色指定をredへ差し替える。
 */
#recordRecoveryLayer .blockbreaker-retry-confirm-button.blockbreaker-record-recovery-reconnect-button{
	border-image-source:var(--bb-ui-buttonb-red);
}

#recordRecoveryLayer .blockbreaker-retry-cancel-button.blockbreaker-record-recovery-close-button{
	border-image-source:var(--bb-ui-buttonb-black);
}

@media (prefers-reduced-motion:reduce){
	.blockbreaker-record-recovery-buttons{
		transition:none;
	}
}

/* ランキング表：左右スワイプ／マウスドラッグ切り替え */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	touch-action:pan-y;
	cursor:grab;
	-webkit-user-select:none;
	user-select:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap.is-ranking-dragging{
	cursor:grabbing;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap.is-ranking-dragging .blockbreaker-ranking-table{
	will-change:transform,opacity;
}



/*==================================================================================================
  親PAUSEモーダル
==================================================================================================*/
.blockbreaker-pause-layer{
	z-index:39;
	background:rgba(3,7,18,0.62);
}

/*
 * PAUSEからリトライ確認へ移る場合は、PAUSE側の黒カバーを背景ホストとして維持する。
 * リトライ側ではモーダル本体だけを切り替え、黒カバーのフェードをやり直さない。
 */
.blockbreaker-pause-layer.is-retry-background-host.is-hidden{
	opacity:1;
	visibility:visible;
	pointer-events:none;
	transition:none;
}

.blockbreaker-pause-layer .message-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
	transition:opacity 0.2s ease;
}

.blockbreaker-pause-layer.is-retry-background-host .message-panel{
	opacity:0;
	pointer-events:none;
	transition:none;
}

/* リトライからPAUSEへ戻す時も、パネルとドロップシャドウを瞬時に復帰させる。 */
.blockbreaker-pause-layer.is-restoring-from-retry .message-panel{
	opacity:1;
	transition:none;
}

#blockBreakerPauseFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:grid;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

.blockbreaker-pause-layer .message-panel-content{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100%;
	font-family:'cookie',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

.blockbreaker-pause-layer h2{
	margin:0;
	color:#fff1ce;
	font-size:2.5em;
	line-height:1.12;
	letter-spacing:0;
	/* text-shadow:-2px -2px 0 #542014,2px -2px 0 #542014,-2px 2px 0 #542014,2px 2px 0 #542014,0 3px 2px rgba(0,0,0,0.55); */
	-webkit-text-stroke:7px #542014;
	paint-order:stroke;
}

.blockbreaker-pause-title-line{
	display:block;
	width:80%;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 1px 0 rgba(255,220,195,0.2));
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

.blockbreaker-pause-title-line-top{
	margin:0.18em 0;
}

.blockbreaker-pause-title-line-bottom{
	margin:0.18em 0 0.42em;
}

.blockbreaker-pause-layer p{
	max-width:18em;
	margin:1.5em 0 1em;
	color:#efc9b0;
	font-size:1em;
	font-weight:800;
	line-height:1.7;
	-webkit-text-stroke:4px #542014;
	paint-order:stroke;
	text-shadow:none;
}

.blockbreaker-pause-layer .message-buttons{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	margin:0;
}

.blockbreaker-pause-resume-button-wrap{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-green-center);
	width:min(100%,162px);
	margin:0.5em 0 2em;
}

.blockbreaker-pause-resume-button{
	width:100%;
	min-width:0;
	height:auto;
	aspect-ratio:162 / 60;
	margin:0;
	padding:0 0.8em 0.08em;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-source:var(--bb-ui-buttonb-green);
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	color:#fff8df;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

.blockbreaker-pause-resume-button:hover{
	transform:translateY(-1px);
	filter:brightness(1.1);
}

@media (max-width:420px){
	.blockbreaker-pause-layer .message-panel{
		width:min(94%,360px);
		min-height:300px;
		padding-left:28px;
		padding-right:28px;
	}

	.blockbreaker-pause-layer .message-buttons{
		margin-top:1em;
	}
}

/*==================================================================================================
  右下リトライ確認モーダル
==================================================================================================*/
.blockbreaker-retry-confirm-layer{
	z-index:40;
	background:rgba(3,7,18,0.62);
}

.blockbreaker-retry-confirm-layer.is-opened-from-pause{
	background:transparent;
	transition:none;
}

/* PAUSE経由ではレイヤー全体のフェードを行わず、モーダルを瞬時に切り替える。 */
.blockbreaker-retry-confirm-layer.is-opened-from-pause .message-panel{
	transition:none;
}

.blockbreaker-retry-confirm-layer .message-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

#blockBreakerRetryConfirmFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:grid;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

.blockbreaker-retry-confirm-layer .message-panel-content{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100%;
}

.blockbreaker-retry-confirm-layer h2{
	margin:0;
	color:#fff1ce;
	font-size:2.5em;
	line-height:1.12;
	letter-spacing:0;
	/* text-shadow:-2px -2px 0 #542014,2px -2px 0 #542014,-2px 2px 0 #542014,2px 2px 0 #542014,0 3px 2px rgba(0,0,0,0.55); */
	-webkit-text-stroke:7px #542014;
	paint-order:stroke;
}

.blockbreaker-retry-title-line{
	display:block;
	width:80%;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 1px 0 rgba(255,220,195,0.2));
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
}

.blockbreaker-retry-title-line-top{
	margin:0.18em 0;
}

.blockbreaker-retry-title-line-bottom{
	margin:0.18em 0 0.42em;
}

.blockbreaker-retry-confirm-layer p{
	max-width:18em;
	margin:1.5em 0 1em;
	color:#efc9b0;
	font-size:1em;
	font-weight:800;
	line-height:1.7;
	-webkit-text-stroke:4px #542014;
	paint-order:stroke;
	text-shadow:none;
}

.blockbreaker-retry-confirm-layer .message-buttons{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.65em;
	width:100%;
	margin:1em 0 1.5em;
}

.blockbreaker-retry-confirm-button,
.blockbreaker-retry-cancel-button{
	width:max-content;
	min-width:0;
	max-width:100%;
	height:100%;
	margin:0;
	padding:0 0.8em 0.08em;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	appearance:none;
	-webkit-appearance:none;
	background:transparent;
	color:#fff8df;
	font-size:1rem;
	font-weight:900;
	line-height:1;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
	cursor:pointer;
	transition:transform 0.12s ease,filter 0.12s ease;
}

.blockbreaker-retry-button-wrap{
	width:fit-content;
	min-width:0;
	max-width:100%;
}

.blockbreaker-retry-confirm-button{
	border-image-source:var(--bb-ui-buttonb-pink);
}

.blockbreaker-retry-cancel-button{
	border-image-source:var(--bb-ui-buttonb-black);
}


@media (max-width:420px){
	.blockbreaker-retry-confirm-layer .message-panel{
		width:min(94%,360px);
		min-height:300px;
		padding-left:28px;
		padding-right:28px;
	}
}

/*==================================================================================================
  モーダル専用フォント
==================================================================================================*/
.blockbreaker-retry-confirm-layer .message-panel-content,
#messageLayer.is-pause-message #messagePanel,
.blockbreaker-user-panel{
	font-family:'cookie',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}

.message-layer button,
.blockbreaker-user-layer button{
	font-family:'bird',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}


/*==================================================================================================
  GAME OVERモーダル：PAUSEフレーム仕様
==================================================================================================*/
#parentResultLayer.is-game-over-result{
	background:rgba(3,7,18,0.62);
}

#parentResultLayer.is-game-over-result .message-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:min(88%,420px);
	min-height:300px;
	padding:79px 57px;
	overflow:visible;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	filter:drop-shadow(0 12px 14px rgba(0,0,0,0.44));
	box-sizing:border-box;
	text-align:center;
}

.blockbreaker-ranking-frame{
	position:absolute;
	z-index:0;
	inset:-18px;
	display:flex;
	flex-direction:column;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

.blockbreaker-ranking-frame-row{
	display:flex;
	width:100%;
	overflow:hidden;
}

.blockbreaker-ranking-frame-img{
	display:block;
	pointer-events:none;
	user-select:none;
	-webkit-user-drag:none;
	-webkit-touch-callout:none;
}

.blockbreaker-ranking-frame-top{
	position:relative;
	z-index:1;
	height:56px;
	margin-bottom:-2px;
}

.blockbreaker-ranking-frame-top > .blockbreaker-ranking-frame-corner{
	flex:0 0 54px;
	width:54px;
	height:56px;
}

.blockbreaker-ranking-frame-top-center{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	height:56px;
}

.blockbreaker-ranking-frame-top-center > .blockbreaker-ranking-frame-img{
	width:100%;
	height:100%;
}

.blockbreaker-ranking-frame-middle{
	position:relative;
	z-index:0;
	min-height:69px;
	flex:1 1 auto;
	margin-top:-2px;
	margin-bottom:-2px;
}

.blockbreaker-ranking-frame-middle > .blockbreaker-ranking-frame-side{
	flex:0 0 54px;
	width:54px;
	height:auto;
	align-self:stretch;
}

.blockbreaker-ranking-frame-middle-center{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	min-height:69px;
}

.blockbreaker-ranking-frame-fill{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.blockbreaker-ranking-frame-bottom{
	position:relative;
	z-index:1;
	height:56px;
	margin-top:-2px;
}

.blockbreaker-ranking-frame-bottom > .blockbreaker-ranking-frame-corner{
	flex:0 0 54px;
	width:54px;
	height:56px;
}

.blockbreaker-ranking-frame-bottom-center{
	flex:1 1 auto;
	min-width:0;
	height:56px;
}

.blockbreaker-ranking-frame-bottom-center > .blockbreaker-ranking-frame-img{
	width:100%;
	height:100%;
}

#parentResultLayer.is-game-over-result .blockbreaker-ranking-frame{
	display:none;
}

#parentResultPauseFrame{
	position:absolute;
	z-index:0;
	inset:0;
	display:none;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

#parentResultLayer.is-game-over-result #parentResultPauseFrame{
	display:grid;
}

#parentResultLayer.is-game-over-result .message-panel-content{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100%;
	padding:0;
}

#parentResultLayer.is-game-over-result #parentResultSub{
	display:none;
}

#parentResultLayer.is-game-over-result #parentResultTextHeader{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
}

#parentResultLayer.is-game-over-result .blockbreaker-gameover-title-line{
	display:block;
	width:80%;
	height:auto;
	object-fit:contain;
	filter:drop-shadow(0 1px 0 rgba(255,220,195,0.2));
}

#parentResultLayer.is-game-over-result .blockbreaker-gameover-title-line-top{
	margin:0.18em 0 0.18em;
}

#parentResultLayer.is-game-over-result .blockbreaker-gameover-title-line-bottom{
	margin:0.18em 0 0.42em;
}

#parentResultLayer.is-game-over-result #parentResultTitle{
	margin:0;
	font-family:'derasukogo',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	color:#fff1ce;
	font-size:2.5em;
	line-height:1.05;
	letter-spacing:0;
	text-shadow:-2px -2px 0 #542014,2px -2px 0 #542014,-2px 2px 0 #542014,2px 2px 0 #542014,0 3px 2px rgba(0,0,0,0.55);
}

#parentResultLayer.is-game-over-result #parentResultText{
	max-width:18em;
	margin:1.5em 0 1em;
	font-family:'cookie',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	color:#efc9b0;
	font-size:1.5em;
	font-weight:800;
	line-height:1.7;
	text-shadow:none;
}

#parentResultLayer.is-game-over-result .message-buttons{
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:0.65em;
	width:100%;
	margin:0;
}

#parentResultLayer.is-game-over-result .blockbreaker-result-button-wrap{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-pink-center);
	width:max-content;
	max-width:100%;
	margin:0;
}

#parentResultLayer.is-game-over-result .blockbreaker-result-button-wrap:has(> button[hidden]){
	display:none;
}

#parentResultLayer.is-game-over-result .blockbreaker-game-over-other-stage-button-wrap{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-black-center);
}

#parentResultLayer.is-game-over-result .blockbreaker-game-over-other-stage-button-wrap:not([hidden]){
	margin-top:0.5em;
}

#parentResultLayer.is-game-over-result .clear-restart-button,
#parentResultLayer.is-game-over-result #gameOverOtherStageButton{
	width:max-content;
	min-width:0;
	max-width:100%;
	height:100%;
	aspect-ratio:auto;
	margin:0;
	padding:0 0.8em 0.08em;
	border-width:0 28px;
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
}

#parentResultLayer.is-game-over-result .clear-restart-button{
	border-image-source:var(--bb-ui-buttonb-pink);
}

#parentResultLayer.is-game-over-result #gameOverOtherStageButton{
	border-image-source:var(--bb-ui-buttonb-black);
}

@media (max-width:420px){
	#parentResultLayer.is-game-over-result .message-panel{
		width:min(94%,360px);
		min-height:300px;
	}
}

/*==================================================================================================
  ランキング表装飾試作
  通常ランキングとリザルト内ランキングの双方へ適用する。
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	border:1px solid rgba(177,119,33,0.58);
	border-radius:0.72em;
	background:linear-gradient(180deg,rgba(255,250,224,0.98),rgba(255,238,187,0.96));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.9) inset,
		0 0 0 1px rgba(255,255,255,0.42) inset,
		0 2px 5px rgba(93,52,15,0.16);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table{
	border-collapse:separate;
	border-spacing:0;
	background:transparent;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody{
	background:transparent;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td{
	background:rgba(255,240,196,0.82);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody.is-named-ranking tr td{
	background:rgba(247,209,247,0.82);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td{
	position:relative;
	overflow:visible;
	border-top:2px solid var(--ranking-medal-border-light);
	border-bottom:2px solid var(--ranking-medal-border-dark);
	background:linear-gradient(90deg,var(--ranking-medal-bg-left),var(--ranking-medal-bg-center) 52%,var(--ranking-medal-bg-right));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.96) inset,
		0 -1px 0 rgba(113,60,13,0.12) inset,
		0 2px 4px rgba(82,42,6,0.13);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child{
	border-left:2px solid var(--ranking-medal-border-dark);
	border-radius:0.58em 0 0 0.58em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:last-child{
	border-right:2px solid var(--ranking-medal-border-dark);
	border-radius:0 0.58em 0.58em 0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	--ranking-medal-bg-left:#fff09a;
	--ranking-medal-bg-center:#fffdf0;
	--ranking-medal-bg-right:#fff2b9;
	--ranking-medal-border-light:#ffe47a;
	--ranking-medal-border-dark:#d79a18;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	--ranking-medal-bg-left:#dff8ff;
	--ranking-medal-bg-center:#f8ffff;
	--ranking-medal-bg-right:#e1f0f1;
	--ranking-medal-border-light:#b8f0ff;
	--ranking-medal-border-dark:#75aeb9;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	--ranking-medal-bg-left:#ffd0ad;
	--ranking-medal-bg-center:#fff5e8;
	--ranking-medal-bg-right:#ffd8bd;
	--ranking-medal-border-light:#ffbc8b;
	--ranking-medal-border-dark:#d87942;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:nth-child(-n+2){
	text-shadow:
		0 1px 0 rgba(255,255,255,0.95),
		0 2px 1px rgba(91,43,10,0.17);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:nth-child(-n+2){
	color:#bb2c13;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2 td:nth-child(-n+2){
	color:#176fa3;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3 td:nth-child(-n+2){
	color:#b44b28;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:first-child::before,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2 td:first-child::before,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3 td:first-child::before{
	content:"★";
	position:absolute;
	z-index:8;
	left:-0.38em;
	top:-0.28em;
	font-family:system-ui,sans-serif;
	font-size:0.72em;
	line-height:1;
	color:var(--ranking-medal-star);
	-webkit-text-stroke:1px #fff;
	text-shadow:0 0 3px var(--ranking-medal-star-glow);
	transform:rotate(-14deg);
	pointer-events:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	--ranking-medal-star:#ffc928;
	--ranking-medal-star-glow:#ff8b00;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	--ranking-medal-star:#74d9ff;
	--ranking-medal-star-glow:#3294dc;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	--ranking-medal-star:#ff8b5a;
	--ranking-medal-star-glow:#e34c20;
}

/*==================================================================================================
  ランキング表装飾調整
  ・縦方向のセル境界を見せない
  ・1～3位は独立したメダル行、4～10位は1つの一覧枠として見せる
  ・登場時は3位→2位→1位の順で下から0.2秒スライドイン
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td{
	border-left:0;
	border-right:0;
}

/* 横グラデーションを各tdへ別々に描くとセル境界に縦線が出るため、縦グラデーションへ統一する。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td{
	background:linear-gradient(180deg,var(--ranking-medal-bg-top),var(--ranking-medal-bg-bottom));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.96) inset,
		0 -1px 0 rgba(113,60,13,0.12) inset;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	--ranking-medal-bg-top:#fffdf0;
	--ranking-medal-bg-bottom:#fff0a6;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	--ranking-medal-bg-top:#f8ffff;
	--ranking-medal-bg-bottom:#dff5f8;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	--ranking-medal-bg-top:#fff5e8;
	--ranking-medal-bg-bottom:#ffd0ad;
}

/* 4～10位はここから1つの一覧枠。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4) td{
	background:rgba(255,240,196,0.9);
	border-bottom:1px solid rgba(99,48,23,0.23);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody.is-named-ranking tr:nth-child(n+4) td{
	background:rgba(247,209,247,0.88);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(4) td{
	padding-top:0.34em;
	border-top:1px solid rgba(177,119,33,0.58);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4) td:first-child{
	border-left:1px solid rgba(177,119,33,0.58);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4) td:last-child{
	border-right:1px solid rgba(177,119,33,0.58);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(4) td:first-child{
	border-top-left-radius:0.62em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(4) td:last-child{
	border-top-right-radius:0.62em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(10) td{
	border-bottom:1px solid rgba(177,119,33,0.58);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(10) td:first-child{
	border-bottom-left-radius:0.62em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(10) td:last-child{
	border-bottom-right-radius:0.62em;
}

/* ランキングを表示・再描画した時に、3位→2位→1位の順で積み上げる。 */
#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-3,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-2,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0.2s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-1,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0.4s both;
}

@keyframes blockBreakerRankingMedalRowIn{
	0%{
		opacity:0;
		transform:translateY(1.15em) scale(0.985);
	}
	100%{
		opacity:1;
		transform:none;
	}
}

@media (prefers-reduced-motion:reduce){
	#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row,
	#parentResultLayer:is(.is-result-ranking-revealing,.is-result-ranking-visible) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row{
		animation:none;
	}
}


/*==================================================================================================
  ランキング値の前面レイヤー化
  ・行レイアウトは「順位＋名前」の2列だけで確定する
  ・右端の値は行内absoluteで前面へ固定し、長い名前は値の下へ潜らせる
  ・名前は折り返さず、行外へ出る部分を非表示にして行高を変化させない
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table{
	display:block;
	width:100%;
	table-layout:fixed;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody{
	display:block;
	width:100%;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr{
	position:relative;
	display:grid;
	grid-template-columns:3em minmax(0,1fr);
	width:100%;
	min-width:0;
	isolation:isolate;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td:nth-child(1){
	grid-column:1;
	width:auto;
	min-width:0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td:nth-child(2){
	grid-column:2;
	width:auto;
	min-width:0;
	padding-right:0.25em;
	overflow:visible;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td:nth-child(3){
	position:absolute;
	z-index:5;
	top:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	width:max-content;
	min-width:max-content;
	max-width:calc(100% - 3em);
	padding-left:1.75em;
	padding-top:0.2em;
	box-sizing:border-box;
	overflow:visible;
	text-overflow:clip;
	white-space:nowrap;
	line-height:1;
	pointer-events:none;
	background:linear-gradient(
		90deg,
		rgba(var(--ranking-value-overlay-rgb,255,240,196),0) 0%,
		rgba(var(--ranking-value-overlay-rgb,255,240,196),0.78) 34%,
		rgba(var(--ranking-value-overlay-rgb,255,240,196),0.98) 58%,
		rgb(var(--ranking-value-overlay-rgb,255,240,196)) 100%
	);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4){
	--ranking-value-overlay-rgb:255,240,196;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody.is-named-ranking tr:nth-child(n+4){
	--ranking-value-overlay-rgb:247,209,247;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	--ranking-value-overlay-rgb:255,240,166;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	--ranking-value-overlay-rgb:223,245,248;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	--ranking-value-overlay-rgb:255,208,173;
}


/*==================================================================================================
  ランキング値・メダル星の位置調整
  ・右端の値は行高いっぱいの前面レイヤー内で縦中央に固定する
  ・星用の左ガターを確保し、1～3位パネルの左上ボーダーへ重ねて外側へ出す
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	padding-left:0.42em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr td:nth-child(3){
	display:flex;
	align-items:center;
	justify-content:flex-end;
	line-height:1;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
	z-index:8;
	left:-0.38em;
	top:-0.28em;
}

/*==================================================================================================
  ランキング上位3行：横グラデーション・角丸境界・短縮登場アニメ
  ・各tdではなくtr全体の疑似背景へ横グラデーションを描き、セル境界の縦線を出さない
  ・右端の値は従来どおり前面レイヤーのまま、背面色だけ各順位の右端色へなじませる
  ・3位→2位→1位を0.1秒、0.05秒間隔で重ねて登場させる
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row{
	position:relative;
	z-index:1;
	border-radius:0.64em;
	background:transparent;
	isolation:isolate;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row::before{
	content:"";
	position:absolute;
	z-index:-2;
	inset:0;
	border:2px solid var(--ranking-medal-border-dark);
	border-radius:0.64em;
	background:linear-gradient(90deg,var(--ranking-medal-bg-left) 0%,var(--ranking-medal-bg-center) 56%,var(--ranking-medal-bg-right) 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.98) inset,
		0 -1px 0 rgba(113,60,13,0.18) inset,
		0 2px 4px rgba(82,42,6,0.16);
	pointer-events:none;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td{
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:nth-child(3){
	border-radius:0 0.54em 0.54em 0;
	background:linear-gradient(
		90deg,
		rgba(var(--ranking-value-overlay-rgb),0) 0%,
		rgba(var(--ranking-value-overlay-rgb),0.72) 32%,
		rgba(var(--ranking-value-overlay-rgb),0.96) 58%,
		rgb(var(--ranking-value-overlay-rgb)) 100%
	) !important;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	--ranking-value-overlay-rgb:255,242,185;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	--ranking-value-overlay-rgb:225,240,241;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	--ranking-value-overlay-rgb:255,216,189;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-3,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-3{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-2,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-2{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0.1s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-1,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-1{
	animation:blockBreakerRankingMedalRowIn 0.2s cubic-bezier(0.2,0.9,0.25,1) 0.2s both;
}

@keyframes blockBreakerRankingMedalRowIn{
	0%{opacity:0;transform:translateY(0.9em) scale(0.99);}
	100%{opacity:1;transform:none;}
}

/* 星は従来比約1.5倍。白縁＋順位色の外光を重ねて境界を強くする。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	padding-left:0.58em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
	left:-0.48em;
	top:-0.38em;
	font-size:1.08em;
	-webkit-text-stroke:1.5px #fff;
	text-shadow:
		0 0 1px #fff,
		0 0 3px #fff,
		0 0 4px var(--ranking-medal-star-glow),
		0 0 8px var(--ranking-medal-star-glow),
		1px 2px 0 rgba(94,42,4,0.28);
	filter:drop-shadow(0 1px 0 rgba(255,255,255,0.95)) drop-shadow(0 0 2px var(--ranking-medal-star-glow));
	transform:rotate(-14deg);
}

/*==================================================================================================
  ランキング枠の最終整理
  ・上位3行は背景と外周線を別レイヤーに分離し、右端の値レイヤーが枠線を覆わないようにする
  ・4～10位はtd側の残存ボーダー／背景を全解除し、tr側だけで1つの一覧枠を構成する
  ・星は直前サイズの75%へ戻し、内側余白を確保してスワイプ用overflow:hidden内でも切れにくくする
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap{
	padding-top:0.2em;
	padding-left:0.9em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table{
	width:calc(100% + 0.9em);
	margin-left:-0.9em;
}

/* 上位3行：背景は下、ボーダーは最前面へ分離する。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row::before{
	inset:0;
	border:0;
	border-radius:0.64em;
	background:linear-gradient(90deg,var(--ranking-medal-bg-left) 0%,var(--ranking-medal-bg-center) 56%,var(--ranking-medal-bg-right) 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.98) inset,
		0 -1px 0 rgba(113,60,13,0.18) inset,
		0 2px 4px rgba(82,42,6,0.16);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row::after{
	content:"";
	position:absolute;
	z-index:20;
	inset:0;
	border:2px solid var(--ranking-medal-border-dark);
	border-radius:0.64em;
	box-sizing:border-box;
	pointer-events:none;
}

/* 値のフェード背景は外周線の内側だけを使用する。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:nth-child(3){
	top:2px;
	right:2px;
	bottom:2px;
	border-radius:0 0.48em 0.48em 0;
}

/* 4～10位：旧td枠・角丸・背景を完全に解除する。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4) td,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody.is-named-ranking tr:nth-child(n+4) td{
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
}

/* 4～10位はtr自体で一続きの一覧枠を作る。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4){
	background:rgba(255,240,196,0.9);
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(99,48,23,0.23) inset;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody.is-named-ranking tr:nth-child(n+4){
	background:rgba(247,209,247,0.88);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(4){
	border-radius:0.62em 0.62em 0 0;
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 1px 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(99,48,23,0.23) inset;
	overflow:hidden;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(10){
	border-radius:0 0 0.62em 0.62em;
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(177,119,33,0.58) inset;
	overflow:hidden;
}

/* 中間行は角丸を持たせず、左右枠と区切り線だけを描く。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+5):nth-child(-n+9){
	border-radius:0;
	overflow:hidden;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row{
	overflow:visible;
}

/* 4～10位の値レイヤーも行の角丸内へ収める。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(n+4) td:nth-child(3){
	top:0;
	right:1px;
	bottom:0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(4) td:nth-child(3){
	border-radius:0 0.56em 0 0;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr:nth-child(10) td:nth-child(3){
	border-radius:0 0 0.56em 0;
}

/* 星は直前の1.08emから75%相当へ縮小。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
	z-index:26;
	left:-0.34em;
	top:-0.08em;
	font-size:0.61em;
	-webkit-text-stroke:1.2px #fff;
	text-shadow:
		0 0 1px #fff,
		0 0 2px #fff,
		0 0 4px var(--ranking-medal-star-glow),
		0 0 6px var(--ranking-medal-star-glow),
		1px 1px 0 rgba(94,42,4,0.26);
	filter:drop-shadow(0 1px 0 rgba(255,255,255,0.95)) drop-shadow(0 0 2px var(--ranking-medal-star-glow));
}


/*==================================================================================================
  ランキング名のクリップと表スライドのクリップを分離
  ・通常時は表外の☆を見せるためtable-wrapをoverflow:visibleにする
  ・名前だけを専用DIV内でnowrap＋overflow:hiddenにする
  ・左右切替／ドラッグ中だけtable-wrapで画面外の表をクリップする
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-name-text{
	display:block;
	width:100%;
	min-width:0;
	overflow:hidden;
	text-overflow:clip;
	white-space:nowrap;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-name-text.has-profile-badge{
	display:flex;
	align-items:center;
	gap:0.3em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-display-name{
	min-width:0;
	overflow:hidden;
	text-overflow:clip;
	white-space:nowrap;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-name-text.has-profile-badge .blockbreaker-ranking-display-name{
	flex:0 1 auto;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge{
	flex:0 0 auto;
	max-width:45%;
	overflow:hidden;
	font-size:0.66em;
	text-overflow:ellipsis;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-user-thumbnail{
	position:relative;
	top:0.02em;
	display:block;
	flex:0 0 1em;
	width:1em;
	height:1em;
	aspect-ratio:1;
	overflow:hidden;
	border-radius:0.18em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-user-thumbnail img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap.is-ranking-sliding,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table-wrap.is-ranking-dragging{
	overflow:hidden;
}

/*
 * 上位行のスライド終了後に☆を0.2秒でポップ表示する。
 * 3位→2位→1位の行アニメ終了時刻へ合わせて0.2s／0.3s／0.4sから開始する。
 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
	opacity:0;
	transform:rotate(-14deg) scale(0);
	transform-origin:50% 50%;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-3 td:first-child::before,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-3 td:first-child::before,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-3 td:first-child::before{
	animation:blockBreakerRankingMedalStarPop 0.2s cubic-bezier(0.16,1.25,0.3,1) 0.2s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-2 td:first-child::before,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-2 td:first-child::before,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-2 td:first-child::before{
	animation:blockBreakerRankingMedalStarPop 0.2s cubic-bezier(0.16,1.25,0.3,1) 0.3s both;
}

#rankingLayer:not(.is-hidden) .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:first-child::before,
#parentResultLayer.is-result-ranking-revealing .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:first-child::before,
#parentResultLayer.is-result-ranking-visible .blockbreaker-ranking-table tbody tr.is-ranking-rank-1 td:first-child::before{
	animation:blockBreakerRankingMedalStarPop 0.2s cubic-bezier(0.16,1.25,0.3,1) 0.4s both;
}

@keyframes blockBreakerRankingMedalStarPop{
	0%{opacity:0;transform:rotate(-14deg) scale(0);}
	72%{opacity:1;transform:rotate(-14deg) scale(1.18);}
	100%{opacity:1;transform:rotate(-14deg) scale(1);}
}

@media (prefers-reduced-motion:reduce){
	:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
		opacity:1;
		animation:none;
		transform:rotate(-14deg) scale(1);
	}
}


/* SOUNDミュートボタン内ラベルの実描画領域中央補正 */
.sound-speaker-icon{
	position:absolute;
	z-index:1;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	pointer-events:none;
}

.sound-speaker-icon-svg{
	display:block;
	width:100%;
	height:100%;
	overflow:visible;
}

.sound-speaker-icon-svg-text{
	fill:currentColor;
	text-rendering:geometricPrecision;
}

/*==================================================================================================
  名前ボタン：元WebP＋外側DIV中央帯
  HUD名前ボタン本体はbuttonA_purple.webp／border-imageを維持する。
  外側DIVの中央だけへcenter.webpをrepeat-xし、継ぎ目の背面へ1px潜らせる。
==================================================================================================*/
.blockbreaker-button-center-underlay{
	--button-edge-width:16px;
	position:relative;
	display:inline-flex;
	align-items:stretch;
	justify-content:center;
	width:max-content;
	height:max-content;
	isolation:isolate;
}

.blockbreaker-button-center-underlay::before{
	content:"";
	position:absolute;
	z-index:0;
	top:0;
	bottom:0;
	left:calc(var(--button-edge-width) - 1px);
	right:calc(var(--button-edge-width) - 1px);
	background-image:var(--button-center-image);
	background-position:center center;
	background-repeat:repeat-x;
	background-size:auto 100%;
	pointer-events:none;
}

.blockbreaker-button-center-underlay > button{
	position:relative;
	z-index:1;
}

.blockbreaker-button-center-underlay:has(> button[hidden]){
	display:none;
}

.blockbreaker-button-center-underlay.is-button-a-purple{
	--button-center-image:var(--bb-ui-buttonbg-buttona-purple-center);
}

.blockbreaker-button-center-underlay.is-button-a-black{
	--button-center-image:var(--bb-ui-buttonbg-buttona-black-center);
}

.blockbreaker-button-center-underlay.is-button-a-blue{
	--button-center-image:var(--bb-ui-buttonbg-buttona-blue-center);
}

.blockbreaker-button-center-underlay.is-button-a-yellow{
	--button-center-image:var(--bb-ui-buttonbg-buttona-yellow-center);
}

.blockbreaker-button-center-underlay.is-button-a-green{
	--button-center-image:var(--bb-ui-buttonbg-buttona-green-center);
}

.blockbreaker-button-center-underlay.is-button-b-green{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-green-center);
}

.blockbreaker-button-center-underlay.is-button-b-black{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-black-center);
}

.blockbreaker-button-center-underlay.is-button-b-aqua{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-aqua-center);
}

.blockbreaker-button-center-underlay.is-button-b-blue{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-blue-center);
}

.blockbreaker-button-center-underlay.is-button-b-yellow{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-yellow-center);
}

.blockbreaker-button-center-underlay.is-button-b-red{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-red-center);
}

.blockbreaker-button-center-underlay.is-button-b-pink{
	--button-center-image:var(--bb-ui-buttonbg-buttonb-pink-center);
}

.blockbreaker-button-center-underlay[hidden]{
	display:none;
}

/*
 * underlay付きモーダルボタンは、ボタン本体だけでなくラッパー全体を浮かせる。
 * 子ボタン側の既存hover/active transformを停止し、中央帯の置き去りを防ぐ。
 */
.blockbreaker-modal-button-wrap{
	transition:transform 0.12s ease,filter 0.12s ease;
	will-change:transform,filter;
}

.blockbreaker-modal-button-wrap > button:hover,
.blockbreaker-modal-button-wrap > button:active{
	transform:none;
	filter:none;
}

@media (hover:hover) and (pointer:fine){
	.blockbreaker-modal-button-wrap:has(> button:not(:disabled):hover){
		transform:translateY(-1px);
		filter:brightness(1.08);
	}

	.blockbreaker-modal-button-wrap:has(> button:not(:disabled):active){
		transform:translateY(1px);
		filter:brightness(0.94);
	}
}

/*
 * 共通underlayのposition:relativeより後で指定し、
 * HUD右下リトライだけは従来どおり絶対配置／画面外ではfixed配置に戻す。
 */
.blockbreaker-button-center-underlay.hud-restart-button-wrap{
	position:absolute;
	z-index:1200;
	right:2px;
	bottom:-2px;
	--button-edge-width:16px;
}

.blockbreaker-button-center-underlay.hud-restart-button-wrap.is-outside-game{
	position:fixed;
	right:auto;
	bottom:auto;
}

.blockbreaker-button-center-underlay.hud-restart-button-wrap.is-interface-hidden{
	display:none;
}

.sound-user-name-button-wrap{
	width:80%;
	max-width:none;
	filter:drop-shadow(0 0 2px rgba(0,0,0,0.95));
}

.sound-user-name-button-wrap > .sound-user-name-button{
	width:100% !important;
	max-width:none !important;
}

@media (max-width:420px){
	.blockbreaker-bottom-menu .blockbreaker-button-center-underlay{
		--button-edge-width:15px;
	}
}


/* SOUND本体パネル上端とPLAYER見出し */
.sound-player-panel-title{
	background-color:rgba(248,113,113,0.28);
	color:#fff2f2;
	text-shadow:0 1px 2px rgba(0,0,0,0.95),0 0 4px #fca5a5,0 0 10px rgba(248,113,113,0.92),0 0 18px rgba(220,38,38,0.68);
	box-shadow:0 0 8px rgba(248,113,113,0.42),inset 0 -1px 0 rgba(254,226,226,0.5);
}


/*==================================================================================================
  ボトムボタン表示切替アニメーション
  名前・ランキング：下へOUT／下から上へIN
  PAUSE：左へOUT／左から右へIN
  リトライ：右へOUT／右から左へIN
==================================================================================================*/
.blockbreaker-bottom-menu{
	display:grid;
	align-items:end;
	justify-items:start;
}

.blockbreaker-bottom-menu-primary,
.blockbreaker-pause-button-wrap{
	grid-area:1 / 1;
}

.blockbreaker-bottom-menu-primary{
	display:flex;
	align-items:center;
	gap:0.45em;
}

.blockbreaker-bottom-menu-primary,
.blockbreaker-pause-button-wrap,
.hud-restart-button-wrap{
	transition:transform 0.24s cubic-bezier(0.22,0.8,0.28,1),opacity 0.18s ease,filter 0.12s ease;
	will-change:transform,opacity;
}

.blockbreaker-bottom-menu-primary.is-button-motion-hidden{
	transform:translateY(calc(100% + 10px));
	opacity:0;
	pointer-events:none;
}

.blockbreaker-pause-button-wrap.is-button-motion-hidden{
	transform:translateX(calc(-100% - 12px));
	opacity:0;
	pointer-events:none;
}

.hud-restart-button-wrap.is-button-motion-hidden{
	transform:translateX(calc(100% + 12px));
	opacity:0;
	pointer-events:none;
}

.is-button-motion-no-transition{
	transition:none !important;
}

@media (max-width:420px){
	.blockbreaker-bottom-menu-primary{gap:0.3em;}
}

@media (prefers-reduced-motion:reduce){
	.blockbreaker-bottom-menu-primary,
	.blockbreaker-pause-button-wrap,
	.hud-restart-button-wrap{transition-duration:0.01ms;}
}

/* 作者サムネイル：加算発光風ホバー */
.sound-panel-body .stage-author-image-link{
	position:relative;
	border-radius:6px;
	transition:filter 0.14s ease,box-shadow 0.14s ease,transform 0.14s ease;
}

.sound-panel-body .stage-author-image-link img{
	transition:filter 0.14s ease;
}

.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:hover) .stage-author-image-link,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:focus-visible) .stage-author-image-link,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-text-link:hover) .stage-author-image-link,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-text-link:focus-visible) .stage-author-image-link{
	filter:drop-shadow(0 0 1.5px rgba(165,243,252,0.72));
	box-shadow:0 0 0 1px rgba(207,250,254,0.72),0 0 3px rgba(34,211,238,0.32);
	transform:translateZ(0) scale(1.025);
}

.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:hover) .stage-author-image-link img,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-image-link:focus-visible) .stage-author-image-link img,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-text-link:hover) .stage-author-image-link img,
.sound-panel-body .stage-author-credit-grid:has(.stage-author-text-link:focus-visible) .stage-author-image-link img{
	filter:brightness(1.22) saturate(1.28) contrast(1.05);
}


/*==================================================================================================
  プレイヤー名モーダル：特殊3x3画像フレーム
==================================================================================================*/
.blockbreaker-user-panel{
	top:0;
	width:min(92vw,380px);
	max-width:380px;
	padding:0;
	border:0;
	border-image:none;
	background:transparent;
	box-shadow:0 0.8em 2.5em rgba(0,0,0,0.55);
	overflow:visible;
}

.blockbreaker-user-frame{
	display:flex;
	flex-direction:column;
	width:100%;
}

.blockbreaker-user-frame-row{
	display:flex;
	width:100%;
	overflow:hidden;
}

/* nameFrameの継ぎ目でサブピクセル由来の薄い隙間が出ることがあるため、
   中央パーツを左右へ1pxずつ潜らせて背面で重ねる。 */
.blockbreaker-user-frame-top-center,
.blockbreaker-user-frame-middle-center,
.blockbreaker-user-frame-bottom-center{
	position:relative;
	margin-left:-1px;
	margin-right:-1px;
	z-index:0;
}

.blockbreaker-user-frame-top > .blockbreaker-user-frame-corner,
.blockbreaker-user-frame-middle > .blockbreaker-user-frame-side,
.blockbreaker-user-frame-bottom > .blockbreaker-user-frame-corner{
	position:relative;
	z-index:1;
}

.blockbreaker-user-frame-img{
	display:block;
	pointer-events:none;
	user-select:none;
	-webkit-user-drag:none;
	-webkit-touch-callout:none;
}

.blockbreaker-user-frame-top{
	position:relative;
	z-index:1;
	height:57px;
	margin-bottom:-1px;
}

.blockbreaker-user-frame-middle{
	position:relative;
	z-index:0;
	min-height:113px;
	margin-top:-1px;
	margin-bottom:-1px;
}

.blockbreaker-user-frame-bottom{
	position:relative;
	z-index:1;
	height:25px;
	margin-top:-1px;
}

.blockbreaker-user-frame-top > .blockbreaker-user-frame-corner{
	flex:0 0 63px;
	width:63px;
	height:57px;
}

.blockbreaker-user-frame-top-center{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	height:57px;
}

.blockbreaker-user-frame-top-center > .blockbreaker-user-frame-img{
	width:100%;
	height:100%;
}

.blockbreaker-user-title-wrap{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 0.35em 0.05em;
	pointer-events:none;
}


.blockbreaker-user-frame-middle > .blockbreaker-user-frame-side{
	flex:0 0 11px;
	width:11px;
	height:auto;
	align-self:stretch;
}

.blockbreaker-user-frame-middle-center{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	min-height:113px;
}

.blockbreaker-user-frame-fill{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.blockbreaker-user-content{
	position:relative;
	z-index:1;
	min-height:113px;
	padding:0.28em 0.95em 0.72em;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
}


.blockbreaker-user-frame-bottom > .blockbreaker-user-frame-corner{
	flex:0 0 25px;
	width:25px;
	height:25px;
}

.blockbreaker-user-frame-bottom-center{
	flex:1 1 auto;
	min-width:0;
	height:25px;
}

.blockbreaker-user-frame-bottom-center > .blockbreaker-user-frame-img{
	width:100%;
	height:100%;
}

.blockbreaker-user-panel h2{
	margin:0;
	color:#ffe2b8;
	font-family:'bird',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:1.03em;
	line-height:1.05;
	letter-spacing:0.04em;
	text-shadow:-1px -1px 0 #5a2f1c,1px -1px 0 #5a2f1c,-1px 1px 0 #5a2f1c,1px 1px 0 #5a2f1c,0 2px 2px rgba(0,0,0,0.68);
}

.blockbreaker-user-note{
	margin:0 0 0.45em;
	color:#f2c388;
	font-size:0.75em;
	font-weight:900;
	line-height:1.25;
	text-shadow:-1px -1px 0 #5a2917,1px 1px 0 #5a2917;
}

.blockbreaker-user-input{
	margin:0;
}

.blockbreaker-user-status{
	min-height:1.35em;
	margin:0.24em 0 0;
}

.blockbreaker-user-buttons{
	margin-top:0.42em;
}

@media (max-width:420px){
	.blockbreaker-user-panel{
		width:min(96vw,360px);
	}

	.blockbreaker-user-content{
		padding:0.22em 0.7em 0.62em;
	}

	.blockbreaker-user-panel h2{
		font-size:0.94em;
	}

	.blockbreaker-user-note{
		font-size:0.7em;
	}
}


/*==================================================================================================
  全体のテキスト選択・画像ドラッグ抑止
  入力欄のみ文字選択を許可する。
==================================================================================================*/
html,
body,
body *{
	-webkit-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
}

input,
textarea,
.blockbreaker-user-input{
	-webkit-user-select:text;
	user-select:text;
}

img,
a img,
.stage-author-credit-grid,
.stage-author-credit-grid *{
	-webkit-user-drag:none;
	user-drag:none;
}

.stage-author,
.sound-panel-body .sound-bgm-credit,
.sound-stage-select-title,
.stage-author-title,
.blockbreaker-user-title-wrap,
.blockbreaker-user-title-wrap *{
	-webkit-user-select:none;
	user-select:none;
}

.stage-author-credit-grid a,
.stage-author-credit-grid img{
	-webkit-user-drag:none;
	user-drag:none;
}

.blockbreaker-user-title-wrap{
	padding:0 0.35em 0.5em 0.35em;
}

.blockbreaker-user-note{
	margin:0 0 1em 0;
}

.blockbreaker-user-input{
	font-size:1.2em;
}


/*==================================================================================================
  ランキング Total Playing：アイコンとの実重なり時のみ自動縮小
==================================================================================================*/
#rankingLayer .blockbreaker-total-playing{
	--blockbreaker-total-playing-scale:1;
	transform:translateY(-50%) scale(var(--blockbreaker-total-playing-scale));
	transform-origin:left center;
	/* 重なり補正は測定結果を即時反映し、再計算時の拡大・移動アニメを発生させない。 */
	transition:none;
}

#rankingLayer .blockbreaker-total-playing.is-overlap-left-aligned{
	left:0;
}

/* 左端へ寄せても収まらない場合だけ、JS計算値で追加縮小する。 */
#rankingLayer .blockbreaker-total-playing.is-overlap-scaled{
	transform:translateY(-50%) scale(var(--blockbreaker-total-playing-scale));
}


/* HUD下段：PAUSE／右下操作ボタンをbuttonA系の同一ボックス規格へ統一する。
 * PAUSEとリトライの実描画高さ、border-image条件、中央帯のメリコミ量を同一にし、
 * スマホでの見た目上の高さ差と接合部の隙間を抑える。
 */
.blockbreaker-pause-button-wrap,
.blockbreaker-button-center-underlay.hud-restart-button-wrap{
	--button-edge-width:16px;
	width:max-content;
	height:28px;
}

.blockbreaker-pause-button-wrap::before,
.blockbreaker-button-center-underlay.hud-restart-button-wrap::before{
	left:calc(var(--button-edge-width) - 3px);
	right:calc(var(--button-edge-width) - 3px);
}

.blockbreaker-pause-button-wrap > .blockbreaker-pause-button,
.blockbreaker-button-center-underlay.hud-restart-button-wrap > .hud-restart-button{
	height:28px;
	min-height:28px;
	max-height:28px;
	padding:0 0.45em 0.08em;
	border-width:0 34px;
	box-sizing:border-box;
	font-size:0.78em;
	line-height:1;
}

.blockbreaker-pause-button-wrap > .blockbreaker-pause-button,
.blockbreaker-button-center-underlay.hud-restart-button-wrap.is-button-a-black > .hud-restart-button{
	border-image:var(--bb-ui-buttona-black) 0 45 fill / 0 16px / 0 stretch;
}

/* リザルト時の「次のステージ」「ステージ選択」はともにbuttonA_blue。 */
.blockbreaker-button-center-underlay.hud-restart-button-wrap.is-button-a-blue{
	--button-center-image:var(--bb-ui-buttonbg-buttona-blue-center);
}

.blockbreaker-button-center-underlay.hud-restart-button-wrap.is-button-a-blue > .hud-restart-button{
	border-image:var(--bb-ui-buttona-blue) 0 45 fill / 0 16px / 0 stretch;
}


/*==================================================================================================
  R18モーダル内の設定アイコン：iPad長押し対策
==================================================================================================*/
#messageLayer.is-age-confirm-message .age-sound-note,
#messageLayer.is-age-confirm-message .age-sound-note *,
#messageLayer.is-age-confirm-message .age-sound-panel-button,
#messageLayer.is-age-confirm-message .age-sound-panel-button *{
	-webkit-user-select:none !important;
	user-select:none !important;
	-webkit-touch-callout:none !important;
	-webkit-user-drag:none !important;
	user-drag:none !important;
}

#messageLayer.is-age-confirm-message .age-sound-panel-button{
	-webkit-appearance:none;
	appearance:none;
	touch-action:manipulation;
	outline:none;
}

#messageLayer.is-age-confirm-message .age-sound-panel-button:focus,
#messageLayer.is-age-confirm-message .age-sound-panel-button:focus-visible,
#messageLayer.is-age-confirm-message .age-sound-panel-button:active{
	outline:none;
	-webkit-tap-highlight-color:transparent;
}

@media (hover:none), (pointer:coarse){
	#messageLayer.is-age-confirm-message .age-sound-panel-button:hover,
	#messageLayer.is-age-confirm-message .age-sound-panel-button:active{
		transform:none;
		filter:none;
	}

	#messageLayer.is-pause-message .blockbreaker-age-confirm-start-button-wrap:hover,
	#messageLayer.is-pause-message .blockbreaker-age-confirm-start-button-wrap:active{
		transform:none;
		filter:none;
	}
}


/*==================================================================================================
  iPad Safari：R18長押し時の疑似hover／合成崩れ対策
  border-imageへfilterをかけた状態で長押しすると、分割面が矩形状に浮く場合がある。
  タッチ／ペン操作中だけhover用transform・filterを停止し、マウスhoverは維持する。
==================================================================================================*/
#messageLayer.is-age-confirm-message #startButton,
#messageLayer.is-age-confirm-message #declineStartButton,
#messageLayer.is-age-confirm-message #startButton *,
#messageLayer.is-age-confirm-message #declineStartButton *,
#messageLayer.is-age-confirm-message .age-sound-note,
#messageLayer.is-age-confirm-message .age-sound-note *{
	-webkit-tap-highlight-color:rgba(0,0,0,0) !important;
	-webkit-touch-callout:none !important;
	-webkit-user-select:none !important;
	user-select:none !important;
	-webkit-user-drag:none !important;
	user-drag:none !important;
}

#messageLayer.is-age-confirm-message #startButton,
#messageLayer.is-age-confirm-message #declineStartButton,
#messageLayer.is-age-confirm-message .age-sound-panel-button{
	touch-action:manipulation;
}

#messageLayer.is-age-confirm-message #startButton.is-touch-press,
#messageLayer.is-age-confirm-message #declineStartButton.is-touch-press,
#messageLayer.is-age-confirm-message .age-sound-panel-button.is-touch-press,
#messageLayer.is-age-confirm-message #startButton.is-touch-press:hover,
#messageLayer.is-age-confirm-message #declineStartButton.is-touch-press:hover,
#messageLayer.is-age-confirm-message .age-sound-panel-button.is-touch-press:hover,
#messageLayer.is-age-confirm-message #startButton.is-touch-press:active,
#messageLayer.is-age-confirm-message #declineStartButton.is-touch-press:active,
#messageLayer.is-age-confirm-message .age-sound-panel-button.is-touch-press:active{
	transform:none !important;
	filter:none !important;
}

@media (hover:none), (pointer:coarse){
	#messageLayer.is-age-confirm-message #startButton:hover,
	#messageLayer.is-age-confirm-message #declineStartButton:hover,
	#messageLayer.is-age-confirm-message #startButton:active,
	#messageLayer.is-age-confirm-message #declineStartButton:active,
	#messageLayer.is-age-confirm-message .age-sound-panel-button:hover,
	#messageLayer.is-age-confirm-message .age-sound-panel-button:active{
		transform:none !important;
		filter:none !important;
	}
}


/*==================================================================================================
  R18モーダル「サウンドの設定」：アイコン＋文字を1つの操作ブロックへ統合
==================================================================================================*/
#messageLayer.is-age-confirm-message .age-sound-note{
	-webkit-appearance:none;
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.42em;
	width:auto;
	height:auto;
	margin:1em 0 0;
	padding:0.5em 1em;
	overflow:visible;
	border:2px dashed #9a5a344d;
	border-radius:1em;
	outline:0;
	background:transparent;
	box-shadow:none;
	color:#84a92f;
	font:inherit;
	font-weight:900;
	line-height:1;
	text-shadow:0 1px 0 rgba(255,255,255,0.35);
	cursor:pointer;
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
	-webkit-user-select:none;
	user-select:none;
	-webkit-touch-callout:none;
	transition:transform 0.15s ease,filter 0.15s ease,color 0.15s ease,text-shadow 0.15s ease;
}

#messageLayer.is-age-confirm-message .age-sound-panel-image{
	display:block;
	flex:0 0 auto;
	width:clamp(40.8px,7.68vmin,52.8px);
	height:clamp(40.8px,7.68vmin,52.8px);
	object-fit:contain;
	filter:drop-shadow(0 5px 6px rgba(0,0,0,0.48));
	pointer-events:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	transition:transform 0.15s ease,filter 0.15s ease;
}

#messageLayer.is-age-confirm-message .age-sound-panel-text{
	display:block;
	letter-spacing:0;
	white-space:nowrap;
	filter:drop-shadow(0 5px 6px rgba(0,0,0,0.48));
	pointer-events:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	transition:transform 0.15s ease,color 0.15s ease,text-shadow 0.15s ease,filter 0.15s ease;
}

@media (hover:hover) and (pointer:fine){
	#messageLayer.is-age-confirm-message .age-sound-note:hover,
	#messageLayer.is-age-confirm-message .age-sound-note:focus-visible{
		transform:translateY(-1px);
		color:#b5d84a;
		text-shadow:0 1px 0 rgba(255,255,255,0.45),0 0 5px rgba(182,224,66,0.6);
	}

	#messageLayer.is-age-confirm-message .age-sound-note:hover .age-sound-panel-image,
	#messageLayer.is-age-confirm-message .age-sound-note:focus-visible .age-sound-panel-image{
		transform:scale(1.035);
		filter:brightness(1.14) saturate(1.12) drop-shadow(0 5px 6px rgba(0,0,0,0.48));
	}

	#messageLayer.is-age-confirm-message .age-sound-note:hover .age-sound-panel-text,
	#messageLayer.is-age-confirm-message .age-sound-note:focus-visible .age-sound-panel-text{
		transform:translateX(1px);
	}
}

#messageLayer.is-age-confirm-message .age-sound-note:active{
	transform:translateY(1px);
}

/* 旧・内側アイコンボタン用指定を無効化する。 */
#messageLayer.is-age-confirm-message .age-sound-panel-button{
	display:none !important;
}

/*==================================================================================================
  R18「サウンドの設定」ブロック調整
  (38)の構造・ボタン背景を維持し、現在のテキスト装飾を残す。
  文字はmarugo、アイコンは通常時・ホバー時ともdrop-shadowなし。
==================================================================================================*/
#messageLayer.is-age-confirm-message .age-sound-panel-image{
	filter:none;
}

#messageLayer.is-age-confirm-message .age-sound-panel-text{
	display:block;
	color:#9fc83a;
	font-family:'marugo',sans-serif;
	-webkit-text-stroke:1px #496516;
	paint-order:stroke fill;
	text-shadow:-1px -1px 0 #496516,1px -1px 0 #496516,-1px 1px 0 #496516,1px 1px 0 #496516,0 1px 0 rgba(255,255,255,0.28);
	filter:none;
}

@media (hover:hover) and (pointer:fine){
	#messageLayer.is-age-confirm-message .age-sound-note:hover .age-sound-panel-image,
	#messageLayer.is-age-confirm-message .age-sound-note:focus-visible .age-sound-panel-image{
		transform:scale(1.035);
		filter:brightness(1.14) saturate(1.12);
	}

	#messageLayer.is-age-confirm-message .age-sound-note:hover .age-sound-panel-text,
	#messageLayer.is-age-confirm-message .age-sound-note:focus-visible .age-sound-panel-text{
		transform:translateX(1px);
		color:#c4e85a;
		-webkit-text-stroke-color:#36500d;
		text-shadow:-1px -1px 0 #36500d,1px -1px 0 #36500d,-1px 1px 0 #36500d,1px 1px 0 #36500d,0 1px 0 rgba(255,255,255,0.38);
		filter:none;
	}
}

#messageLayer.is-age-confirm-message .age-sound-panel-button{
	display:none !important;
}

/*==================================================================================================
  モーダル内 buttonB underlay：全モーダル共通
  高さ・端幅・hoverは .blockbreaker-modal-button-wrap だけで管理する。
  各モーダル側は幅と画像種別だけを指定する。
==================================================================================================*/
.blockbreaker-button-center-underlay.blockbreaker-modal-button-wrap{
	--button-edge-width:28px;
	height:60px;
}

.blockbreaker-button-center-underlay.blockbreaker-modal-button-wrap > button{
	height:100%;
}

@media (max-width:420px){
	.blockbreaker-button-center-underlay.blockbreaker-modal-button-wrap{
		height:54px;
	}
}


/*==================================================================================================
  親・子iframe共通カスタムカーソル
  PCのマウス操作時だけ、カーソル本体と2枚の残像を親document上へ描画する。
==================================================================================================*/
:root{
	--blockbreaker-cursor-img:var(--bb-ui-common-cursor);
	--blockbreaker-cursor-main:var(--blockbreaker-cursor-img) 15 3,pointer;
}

#divEdgeCustomCursor,
#divEdgeCustomCursorTrail1,
#divEdgeCustomCursorTrail2{
	display:none;
}

@media (hover:hover) and (pointer:fine){
	html,
	body,
	body *,
	body *::before,
	body *::after{
		cursor:var(--blockbreaker-cursor-main) !important;
	}

	html.use-edge-custom-cursor,
	html.use-edge-custom-cursor body,
	html.use-edge-custom-cursor body *,
	html.use-edge-custom-cursor body *::before,
	html.use-edge-custom-cursor body *::after{
		cursor:none !important;
	}

	#divEdgeCustomCursor,
	#divEdgeCustomCursorTrail1,
	#divEdgeCustomCursorTrail2{
		display:block;
		position:fixed;
		left:0;
		top:0;
		width:48px;
		height:48px;
		background-image:var(--blockbreaker-cursor-img);
		background-position:center;
		background-repeat:no-repeat;
		background-size:contain;
		pointer-events:none;
		user-select:none;
		transform:translate3d(-9999px,-9999px,0);
		will-change:transform,opacity;
	}

	#divEdgeCustomCursor{
		opacity:1;
		z-index:2147483647;
	}

	#divEdgeCustomCursorTrail1{
		opacity:0;
		z-index:2147483646;
		transition:transform 0.04s linear,opacity 0.08s linear;
	}

	#divEdgeCustomCursorTrail2{
		opacity:0;
		z-index:2147483645;
		transition:transform 0.08s linear,opacity 0.12s linear;
	}
}

/*==================================================================================================
  親R18モーダル
  ・通常の親UIより前面へ固定する。
  ・「サウンドの設定」から開いた時は、PLAYER／名前エリアとSOUND本体を表示する。
  ・年齢確認中はステージ移動を許可しないため、STAGE SELECTだけ非表示にする。
==================================================================================================*/
#messageLayer.parent-age-confirm-layer{
	z-index:30;
}

body.is-parent-age-confirm-open #blockBreakerSoundPanel{
	z-index:2147483644;
}

body.is-parent-age-sound-settings-open #soundPanelBackdrop{
	z-index:2147483643;
}

body.is-parent-age-sound-settings-open #blockBreakerSoundPanel{
	z-index:2147483644;
}

body.is-parent-age-sound-settings-open #soundUserPanel{
	display:grid !important;
}

body.is-parent-age-sound-settings-open #stageSelectPanel{
	display:none !important;
}



/*==================================================================================================
  エリア選択→ゲーム開始：画像ドットマトリクス遷移
==================================================================================================*/
.blockbreaker-dot-matrix-transition{
	position:fixed;
	/* ゲーム/HUDより前、右上設定UI（2147483644）より背面。 */
	z-index:2147483642;
	left:0;
	top:0;
	display:block;
	width:1px;
	height:1px;
	visibility:hidden;
	opacity:0;
	pointer-events:none;
	touch-action:none;
	transform:translateZ(0);
	-webkit-transform:translateZ(0);
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	isolation:isolate;
}

.blockbreaker-dot-matrix-transition.is-active{
	visibility:visible;
	opacity:1;
	pointer-events:auto;
}

#parentGameShell.is-instant-frame-switch #blockBreakerAreaFrame,
#parentGameShell.is-instant-frame-switch #blockBreakerFrame{
	transition:none !important;
	transform:none !important;
	will-change:auto !important;
}

#parentGameShell.is-instant-frame-switch.is-area-screen #blockBreakerAreaFrame,
#parentGameShell.is-instant-frame-switch.is-game-screen #blockBreakerFrame{
	visibility:visible;
	opacity:1;
}

#parentGameShell.is-instant-frame-switch.is-area-screen #blockBreakerFrame,
#parentGameShell.is-instant-frame-switch.is-game-screen #blockBreakerAreaFrame{
	visibility:hidden;
	opacity:0;
	pointer-events:none;
}

#parentGameShell.is-instant-frame-switch .game-hud{
	transition:none !important;
	will-change:auto !important;
}


/*==================================================================================================
  ランキングヘッダー文脈タイトル／モーダル全体スワイプ
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-logo-block{
	position:relative;
	display:block;
	width:min(90%,320px);
	height:auto;
	margin:0 auto 0.5em;
	padding:0;
}

#rankingLayer .blockbreaker-ranking-logo-block .blockbreaker-result-logo{
	display:block;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}

#rankingLayer .blockbreaker-ranking-context-title{
	position:absolute;
	z-index:2;
	left:50%;
	bottom:-0.6cqw;
	max-width:94%;
	margin:0;
	padding:0.08em 0.45em 0.12em;
	transform:translateX(-50%);
	color:#fff4c9;
	font-family:'bird',"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:clamp(0.565rem,2.745vw,0.8rem);
	font-weight:900;
	line-height:1;
	letter-spacing:0.03em;
	text-align:center;
	text-shadow:-1px -1px 0 #4f210f,1px -1px 0 #4f210f,-1px 1px 0 #4f210f,1px 1px 0 #4f210f,0 2px 3px rgba(0,0,0,0.8);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	pointer-events:none;
}

#rankingLayer .message-panel{
	touch-action:pan-y;
}

/*==================================================================================================
  VISUAL設定サブパネル
==================================================================================================*/
.visual-panel-toggle-wrap{
	position:absolute;
	z-index:4;
	top:0;
	right:calc(clamp(42px,8.2vmin,54px) + 7px);
	display:block;
	width:clamp(42px,8.2vmin,54px);
	height:clamp(42px,8.2vmin,54px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateX(calc(clamp(42px,8.2vmin,54px) + 7px));
	transition:transform 0.2s ease,opacity 0.18s ease,visibility 0s linear 0.22s;
}

.sound-panel.is-open .visual-panel-toggle-wrap,
#parentGameShell.is-game-screen.is-parent-age-confirmed .visual-panel-toggle-wrap{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateX(0);
	transition:transform 0.2s ease,opacity 0.18s ease,visibility 0s linear 0s;
}

.visual-panel-toggle-wrap > .visual-panel-toggle{
	position:relative;
	inset:auto;
}

.visual-settings-panel{
	position:absolute;
	z-index:3;
	top:calc(clamp(42px,8.2vmin,54px) + 7px);
	right:0;
	display:grid;
	gap:7px;
	width:min(270px,calc(100vw - 30px));
	pointer-events:none;
}

/* 通常SOUNDパネルはVISUALへ入った時だけ同じ方向へ退避する。 */
.sound-panel.is-visual-open > .sound-panel-body{
	opacity:0;
	visibility:hidden;
	transform:translateX(calc(100% + clamp(5px,1.7vmin,10px)));
	pointer-events:none;
	animation:none;
	transition:transform 0.2s ease,opacity 0.2s ease,visibility 0s linear 0.25s;
}

/* sound-panel.is-open の汎用規則より優先して、VISUAL本体は明示的に開くまで隠す。 */
.sound-panel .visual-settings-panel .sound-panel-body{
	width:100%;
	opacity:0;
	visibility:hidden;
	transform:translateX(calc(100% + clamp(5px,1.7vmin,10px)));
	pointer-events:none;
	animation:none;
	transition:transform 0.2s ease,opacity 0.2s ease,visibility 0s linear 0.25s;
}

.sound-panel.is-open.is-visual-open .visual-settings-panel .sound-panel-body{
	opacity:1;
	visibility:visible;
	transform:translateX(0);
	pointer-events:auto;
	transition:transform 0.2s ease,opacity 0.2s ease,visibility 0s linear 0s;
	animation:blockBreakerSoundPanelSettleShake 0.2s linear 0.2s 1;
}

.visual-ball-panel{
	justify-items:stretch;
}

.visual-ball-preview-row{
	display:grid;
	grid-template-columns:clamp(72px,18%,88px) minmax(0,1fr);
	align-items:stretch;
	gap:9px;
}

.visual-ball-style-group{
	min-width:0;
	margin:0;
	padding:7px 6px 8px;
	border:1px solid rgba(174,205,221,0.34);
	border-radius:8px;
	background:linear-gradient(180deg,rgba(19,31,39,0.88),rgba(8,14,20,0.9));
	box-shadow:inset 0 1px 3px rgba(255,255,255,0.08),inset 0 -3px 8px rgba(0,0,0,0.38),0 2px 5px rgba(0,0,0,0.25);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:5px;
}

.visual-ball-style-group > legend{
	float:none;
	width:max-content;
	max-width:calc(100% - 12px);
	margin:0 auto;
	padding:0 5px;
	text-align:center;
	font-family:bird,sans-serif;
	font-size:0.62em;
	font-weight:900;
	line-height:1;
	letter-spacing:0.08em;
	color:#d8f3ff;
	text-shadow:0 1px 2px rgba(0,0,0,0.85);
}

.visual-ball-default-label{
	position:absolute;
	z-index:2;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-size:1.1em;
	font-weight:900;
	line-height:1;
	letter-spacing:0;
	text-align:center;
	transform:none;
	pointer-events:none;
}

.visual-ball-preview-stage{
	position:relative;
	display:grid;
	margin-top:0.5em;
	place-items:center;
	min-width:0;
	height:clamp(210px,28vh,270px);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:10px;
	background-color:rgba(4,10,18,0.92);
	background-image:var(--visual-ball-preview-background,none);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	box-shadow:inset 0 2px 7px rgba(0,0,0,0.74),0 1px 1px rgba(255,255,255,0.08);
	overflow:hidden;
}

.visual-ball-type-selector{
	display:grid;
	justify-items:center;
	gap:5px;
}

.visual-ball-type-button{
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	margin:0;
	padding:0;
	border:1px solid rgba(255,255,255,0.22);
	border-radius:50%;
	background:linear-gradient(145deg,rgba(82,97,109,0.96),rgba(17,25,35,0.97) 58%,rgba(134,150,162,0.94));
	box-shadow:0 4px 8px rgba(0,0,0,0.45),inset 1px 1px 2px rgba(255,255,255,0.42),inset -2px -2px 3px rgba(0,0,0,0.5);
	filter:drop-shadow(0 2px 4px rgba(0,0,0,0.55));
	cursor:pointer;
	transition:border-color 0.16s ease,box-shadow 0.16s ease,transform 0.16s ease;
}

.visual-ball-type-button.is-selected,
.visual-ball-border-button.is-selected{
	border-color:rgba(125,235,255,0.96);
	box-shadow:0 0 4px rgba(71,215,255,0.96),0 0 10px rgba(31,242,178,0.72),inset 1px 1px 2px rgba(255,255,255,0.5),inset -2px -2px 3px rgba(0,0,0,0.5);
}

@media (hover:hover) and (pointer:fine){
	.visual-ball-type-button:hover,
	.visual-ball-border-button:hover{
		transform:scale(1.05);
	}
}

.visual-ball-type-canvas{
	display:block;
	width:38px;
	height:38px;
	pointer-events:none;
}

.visual-ball-style-divider{
	width:78%;
	height:1px;
	margin:1px 0 0;
	background:linear-gradient(to right,transparent,rgba(185,220,234,0.42),transparent);
}

.visual-ball-border-title{
	font-family:bird,sans-serif;
	font-size:0.38em;
	font-weight:900;
	line-height:1;
	letter-spacing:0.04em;
	color:rgba(220,240,248,0.84);
	text-shadow:0 1px 2px rgba(0,0,0,0.86);
}

.visual-ball-border-selector{
	display:grid;
	justify-items:center;
	gap:3px;
}

.visual-ball-border-button{
	display:grid;
	grid-template-columns:30px auto;
	align-items:center;
	justify-content:center;
	column-gap:2px;
	min-width:54px;
	height:34px;
	margin:0;
	padding:0 3px;
	border:1px solid rgba(255,255,255,0.18);
	border-radius:17px;
	background:linear-gradient(145deg,rgba(69,83,94,0.94),rgba(16,24,33,0.96));
	box-shadow:0 2px 5px rgba(0,0,0,0.42),inset 1px 1px 1px rgba(255,255,255,0.24),inset -1px -1px 2px rgba(0,0,0,0.45);
	color:#d9edf5;
	font-family:roboto,sans-serif;
	font-size:0.68em;
	font-weight:700;
	line-height:1;
	cursor:pointer;
	transition:border-color 0.16s ease,box-shadow 0.16s ease,transform 0.16s ease;
}

.visual-ball-border-canvas{
	display:block;
	width:30px;
	height:30px;
	pointer-events:none;
}

.visual-ball-border-button > span{
	pointer-events:none;
}

.visual-ball-preview-canvas{
	display:block;
	width:120px;
	height:76px;
	max-width:100%;
	pointer-events:none;
}

@media (max-width:560px), (max-height:760px){
	.visual-ball-preview-row{
		grid-template-columns:68px minmax(0,1fr);
		gap:7px;
	}

	.visual-ball-style-group{
		padding:5px 4px 6px;
		gap:3px;
	}

	.visual-ball-type-button{
		width:36px;
		height:36px;
	}

	.visual-ball-type-canvas{
		width:31px;
		height:31px;
	}

	.visual-ball-border-selector{gap:2px;}
	.visual-ball-border-button{
		grid-template-columns:25px auto;
		min-width:50px;
		height:29px;
		border-radius:15px;
	}

	.visual-ball-border-canvas{
		width:25px;
		height:25px;
	}
}

.visual-track-default-button::before{
	background:#38bdf8;
	box-shadow:0 0 4px #38bdf8,0 0 9px rgba(56,189,248,0.95),0 0 15px rgba(14,165,233,0.62);
}

.visual-range{
	--visual-track-gradient:linear-gradient(to right,#000000,#808080 50%,#ffffff);
}

.visual-range-brightness{
	--visual-brightness-start:#000000;
	--visual-brightness-middle:#38bdf8;
	--visual-brightness-end:#ffffff;
	--visual-track-gradient:linear-gradient(to right,var(--visual-brightness-start) 0%,var(--visual-brightness-middle) 50%,var(--visual-brightness-end) 100%);
	--volume-glow:rgba(92,210,255,0.86);
}

.visual-range-hue{
	--visual-track-gradient:linear-gradient(
		to right,
		#ff5a36 0%,
		#f7f43a 16.666%,
		#37e878 33.333%,
		#38bdf8 50%,
		#7657ff 66.666%,
		#f04bd8 83.333%,
		#ff5a36 100%
	);
	--volume-glow:rgba(92,210,255,0.88);
}

.visual-range-saturation{
	--visual-saturation-middle:#63bfe8;
	--visual-saturation-end:#20b8ff;
	--visual-track-gradient:linear-gradient(
		to right,
		#8b9298 0%,
		var(--visual-saturation-middle) 50%,
		var(--visual-saturation-end) 100%
	);
	--volume-glow:rgba(56,189,248,0.84);
}

/* VISUAL用トラックは現在値までのゲージ塗りではなく、色マップ全体を常時表示する。 */
.visual-range .inputVolumeSlider::-webkit-slider-runnable-track{
	background:var(--visual-track-gradient);
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.62),0 0 5px var(--volume-glow);
}

.visual-range .inputVolumeSlider::-moz-range-track{
	background:var(--visual-track-gradient);
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.62),0 0 5px var(--volume-glow);
}

.visual-range .inputVolumeSlider::-moz-range-progress{
	background:transparent;
	box-shadow:none;
}

.visual-combo-panel{
	justify-items:stretch;
}

#visualComboBallFrontButton{
	display:none !important;
}

.visual-combo-options{
	display:grid;
	gap:7px;
	width:100%;
}

.visual-combo-option{
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	align-items:center;
	gap:9px;
	width:100%;
	min-height:42px;
	margin:0;
	padding:6px 9px;
	border:1px solid rgba(255,255,255,0.14);
	border-radius:9px;
	background:linear-gradient(180deg,rgba(42,17,15,0.72),rgba(15,7,8,0.82));
	color:#fff2f2;
	font-family:bird,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:0.64rem;
	line-height:1.35;
	text-align:left;
	text-shadow:0 1px 2px rgba(0,0,0,0.92);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 2px 5px rgba(0,0,0,0.24);
	cursor:pointer;
	transition:filter 0.15s ease,transform 0.12s ease,border-color 0.15s ease;
}

.visual-combo-option[aria-checked="true"]{
	border-color:rgba(248,113,113,0.62);
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 0 9px rgba(248,113,113,0.22),0 2px 5px rgba(0,0,0,0.24);
}

.visual-combo-option img{
	display:block;
	width:auto;
	height:30px;
	object-fit:contain;
	filter:drop-shadow(0 1px 1px rgba(58,25,8,0.36));
	pointer-events:none;
}

.visual-combo-option span{
	pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
	.visual-combo-option:hover{
		filter:brightness(1.1);
	}
}

.visual-combo-option:active{
	transform:scale(0.985);
}

.visual-combo-option:focus-visible{
	outline:2px solid rgba(254,202,202,0.95);
	outline-offset:2px;
}


/*==================================================================================================
  STAGE COMMENT modal
  ランキングモーダルのframe／下からの開閉演出を共有し、本文だけ縦スクロールする。
==================================================================================================*/
#stageCommentLayer{
	z-index:20500;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transition:opacity 0.2s ease,visibility 0s linear 0s;
}

#stageCommentLayer.is-hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.2s ease,visibility 0s linear 0.25s;
}

#stageCommentLayer .message-panel{
	position:relative;
	display:flex;
	width:min(92%,32em);
	height:min(91%,48em);
	max-height:94%;
	padding:0.9em 1.05em 1em;
	overflow:visible;
	border:18px solid transparent;
	border-radius:0;
	background:transparent;
	color:#4b2617;
	box-shadow:0 0.9em 2.6em rgba(0,0,0,0.5);
	box-sizing:border-box;
	opacity:1;
	transform:translateY(0);
	will-change:transform,opacity;
	transition:transform 0.2s ease,opacity 0.2s ease;
	animation:blockBreakerBottomModalSettleShake 0.2s linear 0.2s 1;
}

#stageCommentLayer.is-hidden .message-panel{
	opacity:0;
	transform:translateY(calc(100% + clamp(20px,5vmin,48px)));
	animation:none;
}

#stageCommentLayer.is-modal-entering .message-panel *{
	pointer-events:none !important;
}

#stageCommentLayer .blockbreaker-stage-comment-panel-content{
	position:relative;
	z-index:1;
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	width:100%;
	min-width:0;
	min-height:0;
}

#stageCommentLayer .blockbreaker-stage-comment-header{
	flex:0 0 auto;
	padding:0.15em 0 0em;
	text-align:center;
}

#stageCommentLayer .blockbreaker-stage-comment-logo-block{
	position:absolute;
	left:0;
	display:block;
	width:100%;
	height:auto;
	margin:0 auto 0.5em;
	padding:0;
	text-align:center;
}

#stageCommentLayer .blockbreaker-stage-comment-logo{
	display:block;
	width:min(90%,320px);
	height:auto;
	margin:0 auto;
	padding:0;
}

#stageCommentLayer .blockbreaker-stage-comment-stage-title{
	position:relative;
	top:-0.5em;
	margin:0;
	color:#8b451f;
	font-family:'serifgoti';
	font-size:clamp(0.68rem,1.7vmin,0.86rem);
	font-weight:900;
	line-height:1.25;
}

#stageCommentLayer .blockbreaker-stage-comment-scroll-shell{
	position:relative;
	display:block;
	flex:1 1 auto;
	width:100%;
	min-width:0;
	min-height:0;
	margin-top:2.5em;
}

#stageCommentLayer .blockbreaker-stage-comment-scroll{
	display:block;
	width:100%;
	height:100%;
	min-height:0;
	margin:0;
	padding:0.15em 0.2em 0.35em;
	border:2px solid #9f5a27;
	overflow-x:hidden;
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	touch-action:pan-y;
	cursor:grab;
	scrollbar-color:#9f5a27 rgba(109,55,24,0.15);
	scrollbar-width:thin;
	box-sizing:border-box;
}

#stageCommentLayer .blockbreaker-stage-comment-scroll.is-mouse-dragging{
	cursor:grabbing;
	user-select:none;
}

#stageCommentLayer .blockbreaker-stage-comment-scroll::-webkit-scrollbar{
	width:7px;
}

#stageCommentLayer .blockbreaker-stage-comment-scroll::-webkit-scrollbar-track{
	background:rgba(109,55,24,0.12);
}

#stageCommentLayer .blockbreaker-stage-comment-scroll::-webkit-scrollbar-thumb{
	border-radius:999px;
	background:#9f5a27;
}

#stageCommentLayer .blockbreaker-stage-comment-custom-scrollbar{
	display:none;
}

@media (hover:hover) and (pointer:fine){
	/*
	 * ブラウザUIのネイティブバーを掴むとOSカーソルへ戻るため、PCだけ完全に隠す。
	 * 代わりにDOM上のtrack/thumbを使い、画像カーソルのpointermoveを切らさない。
	 */
	#stageCommentLayer .blockbreaker-stage-comment-scroll{
		padding-right:0.78em;
		scrollbar-width:none;
	}

	#stageCommentLayer .blockbreaker-stage-comment-scroll::-webkit-scrollbar{
		display:none;
		width:0;
		height:0;
	}

	#stageCommentLayer .blockbreaker-stage-comment-custom-scrollbar{
		position:absolute;
		z-index:8;
		top:4px;
		right:4px;
		bottom:4px;
		display:block;
		width:7px;
		border-radius:999px;
		background:rgba(109,55,24,0.12);
		pointer-events:auto;
		touch-action:none;
		user-select:none;
	}

	#stageCommentLayer .blockbreaker-stage-comment-custom-scrollbar[hidden]{
		display:none !important;
	}

	#stageCommentLayer .blockbreaker-stage-comment-custom-scrollbar-thumb{
		position:absolute;
		left:0;
		top:0;
		display:block;
		width:100%;
		min-height:24px;
		border-radius:999px;
		background:#9f5a27;
		box-shadow:0 1px 2px rgba(62,24,9,0.28);
		will-change:transform,height;
		pointer-events:auto;
	}
}

#stageCommentLayer .blockbreaker-stage-comment-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 0.48em;
	color:#4b2617;
	font-family:system-ui,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	table-layout:fixed;
}

#stageCommentLayer .blockbreaker-stage-comment-table[hidden]{
	display:none;
}

#stageCommentLayer .blockbreaker-stage-comment-entry-cell{
	vertical-align:top;
	padding:0;
	border:1px solid rgba(99,48,23,0.28);
	border-radius:0.55em;
	background:rgba(255,240,196,0.9);
	overflow:hidden;
}

#stageCommentLayer .blockbreaker-stage-comment-entry{
	display:grid;
	grid-template-columns:3.2em minmax(0,1fr);
	grid-template-areas:
		"profile comment"
		"meta meta";
	column-gap:0.62em;
	row-gap:0.48em;
	min-width:0;
	padding:0.55em;
	box-sizing:border-box;
}

#stageCommentLayer .blockbreaker-stage-comment-profile{
	grid-area:profile;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	width:3.2em;
	min-width:0;
	gap:0.28em;
}

#stageCommentLayer button.blockbreaker-stage-comment-profile{
	margin:0;
	padding:0;
	border:0;
	color:inherit;
	font:inherit;
	text-align:inherit;
	background:none;
	-webkit-appearance:none;
	appearance:none;
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-public-profile-link{
	cursor:pointer;
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-public-profile-link:hover .blockbreaker-stage-comment-avatar-wrap,
#stageCommentLayer .blockbreaker-stage-comment-profile.is-public-profile-link:focus-visible .blockbreaker-stage-comment-avatar-wrap{
	filter:brightness(1.08);
	box-shadow:0 0 0 2px rgba(255,226,184,0.9);
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-public-profile-link:focus-visible{
	outline:2px solid rgba(255,226,184,0.95);
	outline-offset:0.18em;
	border-radius:0.45em;
}

#stageCommentLayer .blockbreaker-stage-comment-avatar-wrap{
	width:100%;
	aspect-ratio:1 / 1;
	margin:0;
	overflow:hidden;
	border:1px solid rgba(84,40,20,0.55);
	border-radius:0.5em;
	background:rgba(255,255,255,0.55);
	box-sizing:border-box;
}

#stageCommentLayer .blockbreaker-stage-comment-avatar{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	-webkit-user-drag:none;
	user-drag:none;
}

#stageCommentLayer .blockbreaker-stage-comment-name{
	font-family:'serifgoti';
	width:100%;
	min-width:0;
	overflow:hidden;
	color:#6d2d0e;
	font-size:0.72em;
	font-weight:900;
	line-height:1.2;
	text-align:center;
	overflow-wrap:anywhere;
	box-sizing:border-box;
}

#stageCommentLayer .blockbreaker-stage-comment-text{
	font-family:'marugo';
	grid-area:comment;
	min-width:0;
	color:#402518;
	font-size:0.78em;
	font-weight:650;
	line-height:1.55;
	text-align:left;
	white-space:pre-wrap;
	overflow-wrap:anywhere;
	word-break:break-word;
}

#stageCommentLayer .blockbreaker-stage-comment-meta{
	grid-area:meta;
	display:flex;
	align-items:center;
	gap:0.55em;
	min-width:0;
	padding-top:0.42em;
	border-top:1px solid rgba(99,48,23,0.22);
}

#stageCommentLayer .blockbreaker-stage-comment-date{
	font-family:'cookie';
	flex:1 1 auto;
	min-width:0;
	color:#79513d;
	font-size:0.55em;
	font-weight:700;
	line-height:1.25;
	text-align:left;
}

#stageCommentLayer .blockbreaker-stage-comment-x-link{
	font-family:'ruika9';
	display:inline-flex;
	flex:0 0 auto;
	align-items:center;
	justify-content:center;
	min-height:1.65em;
	padding:0.1em 0.48em;
	border:1px solid rgba(56,35,28,0.55);
	border-radius:999px;
	background:#171717;
	color:#fff;
	font-size:0.62em;
	font-weight:900;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
}

#stageCommentLayer .blockbreaker-stage-comment-x-link:hover{
	filter:brightness(1.16);
}

#stageCommentLayer .blockbreaker-stage-comment-x-link.is-disabled{
	opacity:0.38;
	pointer-events:none;
}

#stageCommentLayer .blockbreaker-stage-comment-empty{
	margin:2.2em 0;
	color:#7c3316;
	font-size:0.84em;
	font-weight:900;
	text-align:center;
}

#stageCommentLayer .blockbreaker-stage-comment-buttons{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:100%;
	gap:0.6em;
	margin-top:1.2em;
}

#stageCommentLayer .blockbreaker-stage-comment-post-button-wrap,
#stageCommentLayer .blockbreaker-stage-comment-close-button-wrap{
	flex:1 1 0;
	width:0;
	min-width:0;
	max-width:162px;
}

#stageCommentLayer .blockbreaker-stage-comment-post-button-wrap > .clear-view-button,
#stageCommentLayer .blockbreaker-stage-comment-close-button-wrap > .clear-view-button{
	width:100%;
	max-width:none;
}

#stageCommentPostButtonWrap[hidden]{
	display:none !important;
}

@media (max-width:420px){
	#stageCommentLayer .message-panel{
		width:96%;
		height:94%;
		padding:0.72em 0.58em 0.82em;
		border-width:14px;
	}

	#stageCommentLayer .blockbreaker-stage-comment-table{
		border-spacing:0 0.4em;
	}

	#stageCommentLayer .blockbreaker-stage-comment-entry{
		grid-template-columns:2.85em minmax(0,1fr);
		column-gap:0.5em;
		row-gap:0.4em;
		padding:0.46em;
	}

	#stageCommentLayer .blockbreaker-stage-comment-profile{
		width:2.85em;
	}

	#stageCommentLayer .blockbreaker-stage-comment-name{
		font-size:0.68em;
	}

	#stageCommentLayer .blockbreaker-stage-comment-text{
		font-size:0.72em;
		line-height:1.5;
	}
}

@media (prefers-reduced-motion:reduce){
	#stageCommentLayer,
	#stageCommentLayer .message-panel{
		transition-duration:0.01ms;
		animation:none;
	}
}

/* コメントモーダルの閉じるボタンはランキングのbuttonB_black仕様へ合わせる。 */
#stageCommentLayer .clear-view-button{
	width:100%;
	min-width:0;
	height:100%;
	aspect-ratio:auto;
	padding:0 0.8em 0.08em;
	font-size:1rem;
	border-style:solid;
	border-color:transparent;
	border-width:0 28px;
	border-image-source:var(--bb-ui-buttonb-black);
	border-image-slice:0 53 fill;
	border-image-width:0 28px;
	border-image-repeat:stretch;
	border-radius:0;
	box-sizing:border-box;
	background:transparent;
	color:#fff8df;
	font-weight:900;
	line-height:1;
	text-shadow:-1px -1px 0 #5a260e,1px -1px 0 #5a260e,-1px 1px 0 #5a260e,1px 1px 0 #5a260e,0 2px 1px rgba(64,20,5,0.8);
	cursor:pointer;
}

#stageCommentLayer .blockbreaker-stage-comment-post-button{
	border-image-source:var(--bb-ui-buttonb-red);
}

#stageCommentLayer .clear-view-button:focus-visible{
	outline:2px solid #fff0a8;
	outline-offset:2px;
}

/*==================================================================================================
  ステージコメント投稿モーダル
  名前入力モーダルのnameFrame構造を流用し、本文領域だけ縦スクロール対応にする。
==================================================================================================*/
#stageCommentWriteLayer{
	z-index:20700;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-panel{
	width:min(94vw,560px);
	max-width:560px;
	max-height:94%;
}

#stageCommentWriteLayer .blockbreaker-user-frame{
	max-height:calc(94dvh - 2em);
}

#stageCommentWriteLayer .blockbreaker-user-frame-middle{
	flex:1 1 auto;
	min-height:0;
}

#stageCommentWriteLayer .blockbreaker-user-frame-middle-center{
	min-height:0;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-content{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	width:100%;
	min-height:0;
	max-height:calc(94dvh - 82px);
	padding:0.55em 1.1em 0.8em;
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	touch-action:pan-y;
	scrollbar-gutter:stable;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-note{
	flex:0 0 auto;
	margin:0 0 0.7em;
	text-align:center;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-input{
	flex:0 0 auto;
	width:100%;
	height:auto;
	min-height:23.25em;
	max-height:52dvh;
	padding:0.72em 0.8em;
	resize:none;
	font-size:1.3em;
	line-height:1.45;
	text-align:left;
	white-space:pre-wrap;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	touch-action:pan-y;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-info{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	align-items:start;
	gap:0.5em;
	width:100%;
	min-height:1.35em;
	margin-top:0.24em;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-status{
	min-width:0;
	margin:0;
	text-align:left;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-character-count{
	margin:0;
	color:#f2c388;
	font-size:0.72em;
	font-weight:900;
	line-height:1.35;
	text-align:right;
	white-space:nowrap;
	text-shadow:-1px -1px 0 #5a2917,1px 1px 0 #5a2917;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-buttons{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:stretch;
	gap:0.65em;
	flex:0 0 auto;
	width:100%;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-content.is-mouse-dragging{
	cursor:grabbing;
}

/* 送信完了／未送信確認：PAUSEと同じフレーム・パネル構造。 */
.blockbreaker-stage-comment-prompt-layer{
	z-index:20900;
}

.blockbreaker-stage-comment-prompt-frame{
	position:absolute;
	z-index:0;
	inset:0;
	display:grid;
	grid-template-rows:79px minmax(142px,1fr) 79px;
	pointer-events:none;
	user-select:none;
	-webkit-user-select:none;
}

.blockbreaker-stage-comment-prompt-layer .message-buttons{
	gap:0.65em;
}

.blockbreaker-stage-comment-discard-layer .message-buttons{
	flex-direction:column;
	margin:1em 0 1.5em;
}

.blockbreaker-stage-comment-discard-button{
	border-image-source:var(--bb-ui-buttonb-red);
}

.blockbreaker-stage-comment-prompt-layer .blockbreaker-retry-button-wrap{
	max-width:100%;
}

@media (max-width:420px){
	#stageCommentWriteLayer .blockbreaker-stage-comment-write-panel{
		width:min(96vw,520px);
	}

	#stageCommentWriteLayer .blockbreaker-stage-comment-write-content{
		max-height:calc(94dvh - 78px);
		padding:0.42em 0.72em 0.68em;
	}

	#stageCommentWriteLayer .blockbreaker-stage-comment-input{
		min-height:40dvh;
		max-height:50dvh;
	}
}


/* ステージコメント投稿：送信／やめるを完全に同幅へ固定 */
#stageCommentWriteLayer .blockbreaker-stage-comment-write-buttons > .blockbreaker-user-button-wrap{
	width:100%;
	max-width:none;
	min-width:0;
}

#stageCommentWriteLayer .blockbreaker-stage-comment-write-buttons > .blockbreaker-user-button-wrap > button{
	width:100%;
	max-width:100%;
}
/*==================================================================================================
  ステージコメント：ユーザー別特殊表示
==================================================================================================*/
#stageCommentLayer .blockbreaker-stage-comment-entry.is-featured-profile{
	grid-template-areas:
		"profile comment"
		"social social"
		"meta meta";
	column-gap:0.72em;
	row-gap:0.44em;
	background:
		linear-gradient(135deg,rgba(255,255,255,0.16),transparent 38%),
		linear-gradient(315deg,rgba(222,120,183,0.08),transparent 42%);
	box-shadow:inset 0 0 0 1px rgba(170,75,128,0.08);
}

#stageCommentLayer .blockbreaker-stage-comment-entry.is-thumbnail-featured{
	grid-template-columns:4.15em minmax(0,1fr);
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-featured{
	gap:0.32em;
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-thumbnail-featured{
	width:4.15em;
	gap:0.32em;
}

#stageCommentLayer .blockbreaker-stage-comment-profile.is-thumbnail-featured .blockbreaker-stage-comment-avatar-wrap{
	position:relative;
	border:2px solid rgba(190,82,145,0.78);
	border-radius:0.68em;
	background:#fff4fb;
	box-shadow:
		0 0 0 2px rgba(255,255,255,0.72),
		0 0 0 3px rgba(115,55,91,0.18),
		0 0 0.7em rgba(199,79,151,0.18);
}

#stageCommentLayer .blockbreaker-stage-comment-featured-identity{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.17em;
	min-width:0;
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	max-width:100%;
	min-height:1.55em;
	padding:0.12em 0.54em;
	border:1px solid rgba(121,44,87,0.34);
	border-radius:999px;
	background:linear-gradient(135deg,#c34f91 0%,#7855aa 100%);
	color:#fff;
	font-family:'ruika9';
	font-size:0.53em;
	font-weight:900;
	line-height:1;
	letter-spacing:0.04em;
	text-shadow:0 1px 1px rgba(54,16,42,0.55);
	white-space:nowrap;
	box-shadow:0 1px 2px rgba(78,34,63,0.2);
}


#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-purple,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-purple{
	border-color:rgba(121,44,87,0.34);
	background:linear-gradient(135deg,#c34f91 0%,#7855aa 100%);
	text-shadow:0 1px 1px rgba(54,16,42,0.55);
	box-shadow:0 1px 2px rgba(78,34,63,0.2);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-emerald,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-emerald{
	border-color:rgba(10,111,91,0.58);
	background:linear-gradient(135deg,#37d6a3 0%,#087f71 100%);
	text-shadow:0 1px 1px rgba(0,66,55,0.7);
	box-shadow:0 1px 3px rgba(17,132,105,0.28);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-blue,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-blue{
	border-color:rgba(46,78,157,0.58);
	background:linear-gradient(135deg,#54a8ff 0%,#3557b7 100%);
	text-shadow:0 1px 1px rgba(20,44,101,0.7);
	box-shadow:0 1px 3px rgba(55,93,183,0.28);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-red,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-red{
	border-color:rgba(151,38,60,0.58);
	background:linear-gradient(135deg,#f36a74 0%,#a72f4a 100%);
	text-shadow:0 1px 1px rgba(92,18,33,0.7);
	box-shadow:0 1px 3px rgba(161,48,67,0.28);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-gold,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-gold{
	border-color:rgba(143,91,13,0.62);
	background:linear-gradient(135deg,#f6cf62 0%,#ad761b 100%);
	text-shadow:0 1px 1px rgba(89,54,5,0.72);
	box-shadow:0 1px 3px rgba(166,111,24,0.3);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-orange,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-orange{
	border-color:rgba(157,67,20,0.58);
	background:linear-gradient(135deg,#ffad58 0%,#c45320 100%);
	text-shadow:0 1px 1px rgba(99,42,10,0.72);
	box-shadow:0 1px 3px rgba(176,77,26,0.28);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-pink,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-pink{
	border-color:rgba(171,50,109,0.52);
	background:linear-gradient(135deg,#ff8fc5 0%,#d84c8b 100%);
	text-shadow:0 1px 1px rgba(107,26,66,0.7);
	box-shadow:0 1px 3px rgba(191,68,128,0.26);
}

#stageCommentLayer .blockbreaker-stage-comment-profile-badge.is-badge-style-gray,
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge.is-badge-style-gray{
	border-color:rgba(65,74,85,0.68);
	background:linear-gradient(135deg,#89929f 0%,#4c5561 100%);
	text-shadow:0 1px 1px rgba(25,30,36,0.72);
	box-shadow:0 1px 3px rgba(55,64,75,0.28);
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-profile-badge{
	font-size:0.66em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table tbody tr.is-ranking-medal-row .blockbreaker-ranking-profile-badge{
	font-size:0.56em;
}

#stageCommentLayer .blockbreaker-stage-comment-name.is-featured{
	color:#7e295f;
	font-size:0.76em;
	text-shadow:0 1px 0 rgba(255,255,255,0.7);
}

#stageCommentLayer .blockbreaker-stage-comment-social-links{
	grid-area:social;
	display:block;
	min-width:0;
	margin:0.16em 0.08em 0.04em;
	padding:0.48em 0.58em 0.54em;
	border:1px solid rgba(126,41,95,0.34);
	border-radius:0.58em;
	background:
		linear-gradient(180deg,rgba(255,255,255,0.40),rgba(255,244,250,0.20));
	box-shadow:
		inset 0 1px 2px rgba(255,255,255,0.62),
		inset 0 -2px 5px rgba(91,28,67,0.08),
		0 1px 2px rgba(78,34,63,0.10);
}

#stageCommentLayer .blockbreaker-stage-comment-social-links-title{
	float:none;
	width:max-content;
	max-width:calc(100% - 1.5em);
	margin:0 auto;
	padding:0 0.62em;
	color:#7e295f;
	font-family:bird,sans-serif;
	font-size:0.56em;
	font-weight:900;
	line-height:1;
	letter-spacing:0.15em;
	text-align:center;
	text-shadow:
		0 1px 0 rgba(255,255,255,0.82),
		0 0 0.38em rgba(214,104,167,0.18);
	white-space:nowrap;
}

#stageCommentLayer .blockbreaker-stage-comment-social-links-title::before,
#stageCommentLayer .blockbreaker-stage-comment-social-links-title::after{
	display:inline-block;
	color:rgba(126,41,95,0.55);
	font-size:0.68em;
	line-height:1;
	vertical-align:0.08em;
}

#stageCommentLayer .blockbreaker-stage-comment-social-links-title::before{
	content:"◆";
	margin-right:0.55em;
}

#stageCommentLayer .blockbreaker-stage-comment-social-links-title::after{
	content:"◆";
	margin-left:0.40em;
}

#stageCommentLayer .blockbreaker-stage-comment-social-links-buttons{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:0.34em;
	min-width:0;
	width:100%;
	padding-top:0.04em;
}

#stageCommentLayer .blockbreaker-stage-comment-social-link{
	font-family:'ruika9';
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	min-height:1.82em;
	padding:0.14em 0.62em;
	border:1px solid rgba(40,24,28,0.26);
	border-radius:999px;
	color:#fff;
	font-size:0.61em;
	font-weight:900;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	text-shadow:0 1px 1px rgba(0,0,0,0.36);
	box-shadow:0 1px 2px rgba(65,35,31,0.14);
	transition:filter 0.12s ease,transform 0.12s ease;
}

#stageCommentLayer .blockbreaker-stage-comment-social-link:hover{
	filter:brightness(1.12);
	transform:translateY(-1px);
}

#stageCommentLayer .blockbreaker-stage-comment-social-link.is-x{background:#171717}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-twitch{background:#9146ff}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-withny{background:#e95a9f}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-cien{background:#3b9a62}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-fanbox{background:#178ee8}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-fantia{background:#e8872e}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-free1{background:#b8403f}
#stageCommentLayer .blockbreaker-stage-comment-social-link.is-free2{background:#168b8f}

/*--------------------------------------------------------------------------------------------------
  コメント背景スタイル
  JSONにはキーのみ保存し、JSで許可済みキーから対応クラスを付与する。
--------------------------------------------------------------------------------------------------*/
#stageCommentLayer .blockbreaker-stage-comment-entry.is-comment-bg-pattern15{
	background:
		repeating-linear-gradient(-45deg,
			transparent,
			transparent 1em,
			rgba(248,187,208,0.4) 0,
			rgba(248,187,208,0.1) 2em,
			rgba(248,187,208,0.3) 0,
			rgba(248,187,208,0.2) 4em,
			rgba(244,143,177,0.6) 0,
			rgba(244,143,177,0.2) 2em),
		repeating-linear-gradient(45deg,
			transparent,
			transparent 1em,
			rgba(248,187,208,0.4) 0,
			rgba(248,187,208,0.1) 2em,
			rgba(248,187,208,0.3) 0,
			rgba(248,187,208,0.2) 4em,
			rgba(244,143,177,0.4) 0,
			rgba(244,143,177,0.1) 2em);
	background-blend-mode:multiply;
}


/*==================================================================================================
  ランキング TOP100 ページ切り替え
  ・10件×最大10ページ
  ・左右はランキング種別、縦スワイプは順位ページ
  ・静止時は次順位1行を下端へ薄く見せ、ページ継続を示す
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-page-navigation{
	position:absolute;
	z-index:31;
	inset:0;
	display:block;
	overflow:visible;
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-page-navigation[hidden]{
	display:none;
}

#rankingLayer .blockbreaker-ranking-page-indicator{
	position:absolute;
	right:0.3em;
	bottom:-0.25em;
	display:block;
	padding:0.18em 0.45em 0.14em;
	border:1px solid rgba(125,68,31,0.45);
	border-radius:999px;
	background:rgba(255,248,222,0.92);
	box-shadow:0 1px 0 rgba(255,255,255,0.86) inset;
	color:#5c2e1c;
	font-family:cookie,ruika9,"Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	font-size:0.72em;
	line-height:1;
	pointer-events:none;
}

/*==================================================================================================
  TOP100ページUI最終調整
  ・ランキング表上の縦スワイプをJSが受ける
  ・1ページ目で測った「10行＋次順位約0.7行」の高さをtable-wrapへ固定する
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table-wrap{
	touch-action:none;
}

#rankingLayer .blockbreaker-ranking-page-indicator{
	top:0;
	left:0;
	right:auto;
	bottom:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	width:max-content;
	min-width:max-content;
	white-space:nowrap;
	word-break:keep-all;
	overflow-wrap:normal;
	transform:translateX(-100%);
}

/*==================================================================================================
  現在順位からTOP100ページへジャンプ
==================================================================================================*/
#rankingLayer #rankingCurrentRank .blockbreaker-current-rank-badge.is-page-link{
	cursor:pointer;
	transition:filter 0.12s ease,transform 0.12s ease;
}

#rankingLayer #rankingCurrentRank .blockbreaker-current-rank-badge.is-page-link:hover{
	filter:brightness(1.08);
}

#rankingLayer #rankingCurrentRank .blockbreaker-current-rank-badge.is-page-link:active{
	transform:translateY(1px);
	filter:brightness(0.96);
}

#rankingLayer #rankingCurrentRank .blockbreaker-current-rank-badge.is-page-link:focus-visible{
	outline:2px solid #9b4d12;
	outline-offset:2px;
}


/*==================================================================================================
  TOP100 地続きページ
  ・メダル判定は表示位置の先頭3行だけに is-ranking-medal-row / is-ranking-rank-1..3 を付与する
  ・静止時は現在10行の直後へ次順位1行だけ追加し、下方向へフェードさせる
  ・2ページ目以降は固定viewportのbottomへ寄せ、1ページ目とのモーダル高差を出さない
  ・11位以降はDOM位置に関係なく全行を通常ランキング行として描画する
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-secondary-page{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	overflow:hidden !important;
}

#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-secondary-page .blockbreaker-ranking-table{
	flex:0 0 auto;
}

/* 2ページ目以降は全て通常行。旧nth-child由来の枠・色・太字・メダル変数を完全に遮断する。 */
#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row{
	position:relative !important;
	z-index:auto !important;
	border:0 !important;
	border-radius:0 !important;
	background:rgba(255,240,196,0.9) !important;
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(99,48,23,0.23) inset !important;
	isolation:isolate !important;
	overflow:hidden !important;
	animation:none !important;
	--ranking-value-overlay-rgb:255,240,196;
	--ranking-medal-bg-left:transparent;
	--ranking-medal-bg-center:transparent;
	--ranking-medal-bg-right:transparent;
	--ranking-medal-bg-top:transparent;
	--ranking-medal-bg-bottom:transparent;
	--ranking-medal-border-light:transparent;
	--ranking-medal-border-dark:transparent;
	--ranking-medal-star:transparent;
	--ranking-medal-star-glow:transparent;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page.is-named-ranking tr.is-ranking-standard-row{
	background:rgba(247,209,247,0.88) !important;
	--ranking-value-overlay-rgb:247,209,247;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row::before,
#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row::after,
#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row td:first-child::before{
	content:none !important;
	display:none !important;
	border:0 !important;
	box-shadow:none !important;
	background:none !important;
	animation:none !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row td{
	padding-top:0.2em !important;
	padding-bottom:0.2em !important;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	color:inherit !important;
	font-size:inherit !important;
	font-weight:inherit !important;
	text-shadow:none !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row td:nth-child(2){
	padding-right:0.25em !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row td:nth-child(3){
	top:0 !important;
	right:1px !important;
	bottom:0 !important;
	padding-left:1.75em !important;
	padding-top:0.2em !important;
	border-radius:0 !important;
	background:linear-gradient(
		90deg,
		rgba(var(--ranking-value-overlay-rgb),0) 0%,
		rgba(var(--ranking-value-overlay-rgb),0.78) 34%,
		rgba(var(--ranking-value-overlay-rgb),0.98) 58%,
		rgb(var(--ranking-value-overlay-rgb)) 100%
	) !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row .blockbreaker-ranking-profile-badge{
	font-size:0.66em !important;
}

/* ページ境界の見切れ行。上下とも一覧の途中なので角丸を持たせない。 */
#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-page-peek-row{
	border-radius:0 !important;
}

/* 前ページ末尾：上へ向かって消える。 */
#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-page-previous-peek-row{
	-webkit-mask-image:linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0,0,0,0.18) 18%,
		rgba(0,0,0,0.58) 42%,
		rgba(0,0,0,0.9) 68%,
		#000 100%
	);
	mask-image:linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0,0,0,0.18) 18%,
		rgba(0,0,0,0.58) 42%,
		rgba(0,0,0,0.9) 68%,
		#000 100%
	);
}

/* 次ページ先頭：下へ向かって消える。 */
#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-page-next-peek-row{
	-webkit-mask-image:linear-gradient(
		to bottom,
		#000 0%,
		#000 18%,
		rgba(0,0,0,0.84) 32%,
		rgba(0,0,0,0.46) 46%,
		rgba(0,0,0,0.14) 58%,
		transparent 68%,
		transparent 100%
	);
	mask-image:linear-gradient(
		to bottom,
		#000 0%,
		#000 18%,
		rgba(0,0,0,0.84) 32%,
		rgba(0,0,0,0.46) 46%,
		rgba(0,0,0,0.14) 58%,
		transparent 68%,
		transparent 100%
	);
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-page-current-last-row{
	border-radius:0 0 0.62em 0.62em !important;
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(177,119,33,0.58) inset !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-page-current-last-row td:nth-child(3){
	border-radius:0 0 0.56em 0 !important;
}


/*==================================================================================================
  順位ページ移動SE／次順位プレビュー
  ・ページ切替SEはparent.jsがSYSTEM_SOUND_SEへ登録する
  ・静止中は前順位を上端フェード、次順位を下端フェードで表示する
  ・縦スワイプ開始後は一時stripへ切り替えるため、静止用peek maskは一時DOMへ影響しない
==================================================================================================*/

/*==================================================================================================
  動的縦スワイプ先読み
  ・静止中は前順位＋現在10行＋次順位の上下フェード表示を維持する
  ・縦スワイプ軸が確定した瞬間だけ前後各10位を一時DOMへ生成する
  ・ドラッグ中だけoverflow:hiddenで縦stripを見せ、終了時に一時DOMを破棄する
  ・静止レイアウトのtable-wrap高／位置は変更しない
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active{
	position:relative;
	overflow:hidden !important;
	-webkit-mask-image:none !important;
	mask-image:none !important;
}

#rankingLayer .blockbreaker-ranking-vertical-swipe-strip{
	position:absolute;
	z-index:30;
	left:0;
	top:0;
	width:100%;
	will-change:transform;
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-vertical-swipe-page{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}

#rankingLayer .blockbreaker-ranking-vertical-swipe-page .blockbreaker-ranking-table{
	margin-top:0;
	margin-bottom:0;
}

/* ランキングモーダルだけ、ページ途中の10/20/.../90位は地続きなので下角丸を持たせない。 */
#rankingLayer .blockbreaker-ranking-table tbody tr:nth-child(10),
#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-page-current-last-row{
	border-radius:0 !important;
}

#rankingLayer .blockbreaker-ranking-table tbody tr:nth-child(10) td:nth-child(3),
#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-page-current-last-row td:nth-child(3){
	border-radius:0 !important;
}

/* TOP100の終端だけは一覧の終わりとして下角丸を復活する。 */
#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-position="100"]{
	border-radius:0 0 0.62em 0.62em !important;
	overflow:hidden !important;
}

#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-position="100"] td:nth-child(3){
	border-radius:0 0 0.56em 0 !important;
}

/* 一時stripは既に完成済みの順位表として見せる。1～3位の登場演出を再発火しない。 */
#rankingLayer .blockbreaker-ranking-vertical-swipe-strip .blockbreaker-ranking-table tbody tr.is-ranking-medal-row{
	animation:none !important;
	opacity:1 !important;
	transform:none !important;
}

#rankingLayer .blockbreaker-ranking-vertical-swipe-strip .blockbreaker-ranking-table tbody tr.is-ranking-medal-row td:first-child::before{
	animation:none !important;
	opacity:1 !important;
	transform:rotate(-14deg) scale(1) !important;
}

/*==================================================================================================
  動的縦スワイプの横幅固定／TOP100終端radius
  ・一時stripはJSで通常tableの実測left/widthへ固定する
  ・一時tableはJSで通常表示中3列の実測幅をcolgroupへ複製する
  ・通常table由来の +0.9em / -0.9em 補正を一時tableへ二重適用しない
  ・100位だけ、secondary-page通常行のradius:0 !importantより高詳細度で終端radiusを復活する
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-vertical-swipe-strip{
	left:0;
	width:auto;
}

#rankingLayer .blockbreaker-ranking-vertical-swipe-strip .blockbreaker-ranking-vertical-swipe-page .blockbreaker-ranking-table{
	width:100% !important;
	margin-left:0 !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row[data-ranking-position="100"],
#rankingLayer .blockbreaker-ranking-vertical-swipe-strip .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row[data-ranking-position="100"]{
	border-radius:0 0 0.62em 0.62em !important;
	overflow:hidden !important;
	box-shadow:
		1px 0 0 rgba(177,119,33,0.58) inset,
		-1px 0 0 rgba(177,119,33,0.58) inset,
		0 -1px 0 rgba(177,119,33,0.58) inset !important;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row[data-ranking-position="100"] td:nth-child(3),
#rankingLayer .blockbreaker-ranking-vertical-swipe-strip .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row[data-ranking-position="100"] td:nth-child(3){
	border-radius:0 0 0.56em 0 !important;
}

/*==================================================================================================
  単独ランキングモーダルのトロフィー2段表示用レイアウト
  ・リザルトモーダル（#parentResultLayer）には適用しない
  ・ロゴを通常フローから外し、ランキング本体の縦領域を確保する
==================================================================================================*/
#rankingLayer .message-panel{
	width:100%;
	height:90%;
	max-height:90%;
	padding-bottom:0.5em;
	box-sizing:border-box;
}

#rankingLayer .message-panel-content{
	height:100%;
	min-height:0;
	display:flex;
	flex-direction:column;
}

#rankingLayer .blockbreaker-ranking-logo-block{
	position:absolute;
	z-index:4;
	bottom:0;
	left:50%;
	width:min(56%,320px);
	margin:0;
	padding-bottom:0.5em;
	transform:translateX(-50%);
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-context-title{
	position:relative;
	top:-0.05cqw;
}

#rankingLayer .blockbreaker-clear-result{
	flex:0 0 auto;
	box-sizing:border-box;
	padding-top:clamp(2.6em,8.5%,3.8em);
}

#rankingLayer .message-buttons{
	flex:0 0 auto;
	margin-top:auto;
}

#rankingLayer .blockbreaker-ranking-table tbody tr{
	min-height:2.55em;
}

#rankingLayer .blockbreaker-ranking-table tbody tr td{
	display:flex;
	align-items:center;
}

#rankingLayer .blockbreaker-ranking-table tbody tr td:nth-child(1){
	justify-content:flex-end;
}

#rankingLayer .blockbreaker-ranking-table tbody tr td:nth-child(2){
	min-height:2.55em;
	box-sizing:border-box;
}

/*==================================================================================================
  単独ランキングの順位ラベルを独立レイヤー化
  ・順位列はレイアウト幅を持たず、名前／ユーザーアイコンを左端から配置する
  ・順位ラベルは独立した透明レイヤーとして配置する
  ・1～3位のtr::before／tr::afterとtd:first-child::before（星）の座標系は維持する
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table tbody tr{
	grid-template-columns:minmax(0,1fr);
}

#rankingLayer .blockbreaker-ranking-table tbody tr td:nth-child(1){
	position:absolute;
	z-index:30;
	top:0;
	bottom:0;
	left:0;
	display:block;
	width:0;
	min-width:0;
	padding:0;
	overflow:visible;
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-table tbody tr td:nth-child(2){
	grid-column:1;
}

#rankingLayer .blockbreaker-ranking-table tbody tr td:nth-child(3){
	max-width:100%;
}

#rankingLayer .blockbreaker-ranking-rank-label-block{
	position:absolute;
	z-index:40;
	top:50%;
	bottom:auto;
	left:0.2em;
	display:block;
	width:max-content;
	height:max-content;
	transform:translateY(-50%);
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-rank-label{
	display:inline-flex;
	align-items:baseline;
	width:max-content;
}

/* ランキング順位ラベル：検証用。数字そのものへ文字境界線だけを適用する。 */
#rankingLayer .blockbreaker-ranking-rank-number{
	display:inline-block;
	background:none;
	-webkit-background-clip:border-box;
	background-clip:border-box;
	-webkit-text-fill-color:currentColor;
	-webkit-text-stroke:1.5px rgba(177,119,33,0.58);
	paint-order:stroke fill;
}

/* 1～3位：数字専用スタイル。境界線は各メダル枠色を使用する。 */
#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-medal-row .blockbreaker-ranking-rank-number{
	font-family:'killgo';
	padding-top:0.5em;
	-webkit-text-stroke-color:var(--ranking-medal-border-dark);
}

/* 1位は2・3位より数字幅が狭いため、目視位置を少し右へ補正する。 */
#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-rank="1"] .blockbreaker-ranking-rank-number{
	margin-left:0.1em;
}

#rankingLayer .blockbreaker-ranking-rank-unit{
	display:none;
}

#rankingLayer .blockbreaker-ranking-name-text{
	margin-left:1.5em;
}

#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-medal-row .blockbreaker-ranking-name-text{
	margin-left:1em;
}

#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-rank="100"] .blockbreaker-ranking-name-text{
	margin-left:2.125em;
}

/* サムネイルを持たないNO NAMEも、サムネイル列＋列間隔ぶんだけ名前を右へ揃える。 */
#rankingLayer .blockbreaker-ranking-name-text:not(.has-ranking-profile-layout){
	margin-left:calc(1.5em + 2.57em);
}

#rankingLayer .blockbreaker-ranking-table tbody tr.is-ranking-medal-row .blockbreaker-ranking-name-text:not(.has-ranking-profile-layout){
	margin-left:calc(1em + 2.57em);
}

#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-rank="100"] .blockbreaker-ranking-name-text:not(.has-ranking-profile-layout){
	margin-left:calc(1.5em + 2.57em);
}

/*==================================================================================================
  ランキング上下フェードの常設化
  ・静止中は従来のpeek行maskを使い、1～10位の下端フェード位置を維持する
  ・ドラッグ中だけ前面グラデーションへ切り替え、磨りガラスfilterは使用しない
  ・1～3位を含む先頭ページは上端なし、100位を含むページは下端なし
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table-wrap{
	position:relative;
	width:95%;
	margin-inline:auto;
	-webkit-mask-image:none !important;
	mask-image:none !important;
}

#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active{
	-webkit-mask-image:none !important;
	mask-image:none !important;
}

#rankingLayer .blockbreaker-ranking-table-wrap::before,
#rankingLayer .blockbreaker-ranking-table-wrap::after{
	content:"";
	position:absolute;
	z-index:80;
	left:0;
	right:0;
	display:none;
	height:9%;
	pointer-events:none;
}

#rankingLayer .blockbreaker-ranking-table-wrap::before{
	top:0;
	background:linear-gradient(
		to bottom,
		rgba(255,243,224,0.98) 0%,
		rgba(255,243,224,0.7) 38%,
		rgba(255,243,224,0.25) 72%,
		rgba(255,243,224,0) 100%
	);
}

#rankingLayer .blockbreaker-ranking-table-wrap::after{
	bottom:0;
	background:linear-gradient(
		to bottom,
		rgba(255,243,224,0) 0%,
		rgba(255,243,224,0.25) 28%,
		rgba(255,243,224,0.7) 62%,
		rgba(255,243,224,0.98) 100%
	);
}

#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active::before,
#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active::after{
	display:block;
}

#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active.is-ranking-first-page::before,
#rankingLayer .blockbreaker-ranking-table-wrap.is-ranking-vertical-swipe-active.has-ranking-rank-100::after{
	display:none;
}

/*==================================================================================================
  単独ランキングの寸法基準を横幅比例へ統一
  ・ランキングレイヤーの実幅 520px を従来PC表示の基準（16px）とする
  ・狭幅端末では同じ倍率でヘッダー、表、アイコン、矢印、外枠を縮小する
  ・UA／端末名／画面高による分岐やJS自動収まり補正は使用しない
==================================================================================================*/
:is(#parentResultLayer,#rankingLayer){
	container-type:inline-size;
}

:is(#parentResultLayer,#rankingLayer) .message-panel{
	font-size:clamp(11px,3.076923cqw,16px);
	border-width:1.125em;
}

/* 外枠画像もmessage-panelと同じ倍率に揃える。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame{
	inset:-1.125em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-top{
	height:3.5em;
	margin-bottom:-0.125em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-top > .blockbreaker-ranking-frame-corner{
	flex-basis:3.375em;
	width:3.375em;
	height:3.5em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-top-center{
	height:3.5em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-middle{
	min-height:4.3125em;
	margin-top:-0.125em;
	margin-bottom:-0.125em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-middle > .blockbreaker-ranking-frame-side{
	flex-basis:3.375em;
	width:3.375em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-middle-center{
	min-height:4.3125em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-bottom{
	height:3.5em;
	margin-top:-0.125em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-bottom > .blockbreaker-ranking-frame-corner{
	flex-basis:3.375em;
	width:3.375em;
	height:3.5em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-frame-bottom-center{
	height:3.5em;
}

/* 8.5%やrem/vminの混在を、message-panel基準のemへ集約する。 */
:is(#parentResultLayer,#rankingLayer) .blockbreaker-clear-result{
	padding-top:2.6em;
}

#rankingLayer .blockbreaker-ranking-context-title{
	font-size:0.8em;
}

#rankingLayer .blockbreaker-ranking-title-build-up > .blockbreaker-ranking-title{
	font-size:1.04em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-current-rank{
	font-size:0.98em;
}

#rankingLayer .blockbreaker-ranking-icon-navigation{
	max-width:calc(100% - 5.375em);
	font-size:0.9em;
}

#rankingLayer .blockbreaker-ranking-named-toggle{
	font-size:0.72em;
}

#rankingLayer .blockbreaker-ranking-named-toggle img{
	height:1.875em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-switcher{
	--ranking-arrow-width:2em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-arrow img{
	height:4.5em;
}

:is(#parentResultLayer,#rankingLayer) .blockbreaker-ranking-table{
	font-size:0.9em;
}

/*==================================================================================================
  ランキング順位ラベル：順位帯ごとの数字スタイル
  ・表示位置4～10行はserifgoti＋紫文字
  ・表示位置11行目以降は行背景色で中を抜き、境界線だけ元のランキング文字色 #4b2617 を使用する
==================================================================================================*/
#rankingLayer .blockbreaker-ranking-table tbody tr:is(
	[data-ranking-position="4"],
	[data-ranking-position="5"],
	[data-ranking-position="6"],
	[data-ranking-position="7"],
	[data-ranking-position="8"],
	[data-ranking-position="9"],
	[data-ranking-position="10"]
) .blockbreaker-ranking-rank-number{
	font-family:'serifgoti';
	padding-top:0.2em;
	color:#9d50b5;
	-webkit-text-fill-color:#9d50b5;
}

/* 表示位置4～10行で順位が1桁の場合は、数字の見た目を少し右へ寄せる。 */
#rankingLayer .blockbreaker-ranking-table tbody tr:is(
	[data-ranking-position="4"],
	[data-ranking-position="5"],
	[data-ranking-position="6"],
	[data-ranking-position="7"],
	[data-ranking-position="8"],
	[data-ranking-position="9"],
	[data-ranking-position="10"]
):is(
	[data-ranking-rank="1"],
	[data-ranking-rank="2"],
	[data-ranking-rank="3"],
	[data-ranking-rank="4"],
	[data-ranking-rank="5"],
	[data-ranking-rank="6"],
	[data-ranking-rank="7"],
	[data-ranking-rank="8"],
	[data-ranking-rank="9"]
) .blockbreaker-ranking-rank-number{
	padding-left:0.2em;
}

/* 4～10行用スタイル内の10位は2桁ぶんを詰め、1桁順位と同じ位置感へ寄せる。 */
#rankingLayer .blockbreaker-ranking-table tbody tr[data-ranking-position="10"][data-ranking-rank="10"] .blockbreaker-ranking-rank-number{
	margin-left:-0.15em;
	letter-spacing:-0.15em;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page tr.is-ranking-standard-row .blockbreaker-ranking-rank-number{
	color:rgba(255,240,196,0.9);
	-webkit-text-fill-color:rgba(255,240,196,0.9);
	-webkit-text-stroke-color:#4b2617;
}

#rankingLayer .blockbreaker-ranking-table tbody.is-ranking-secondary-page.is-named-ranking tr.is-ranking-standard-row .blockbreaker-ranking-rank-number{
	color:rgba(247,209,247,0.88);
	-webkit-text-fill-color:rgba(247,209,247,0.88);
	-webkit-text-stroke-color:#4b2617;
}