.gpp-sp .gpp-pic__fl-seg { fill: rgba(255, 255, 255, 0.25); }
.gpp-sp .gpp-pic__fl-fill, .gpp-sp .gpp-pic__fl-ghost { fill: var(--gpp-gold); }
.gpp-sp .gpp-pic__fl-fill { transform-box: fill-box; transform-origin: 0 50%; }
.gpp-sp .gpp-pic__fl-fill--1 { transform: scaleX(var(--gpp-fl-b1, 1)); }
.gpp-fl-run .gpp-sp .gpp-pic__fl-fill--1 { transform: scaleX(var(--gpp-fl-b1, 0)); }
.gpp-sp .gpp-pic__fl-fill--2 { transform: scaleX(var(--gpp-fl-b2, 0)); }
.gpp-sp .gpp-pic__fl-fill--3 { transform: scaleX(var(--gpp-fl-b3, 0)); }
.gpp-sp .gpp-pic__fl-ghost { opacity: var(--gpp-fl-g, 0); }
.gpp-sp .gpp-pic__fl-lbl { font-size: 15px; font-weight: 500; fill: var(--gpp-gold); letter-spacing: 0.14em; }
.gpp-sp .gpp-pic__fl-head { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.gpp-sp .gpp-pic__fl-c1 { opacity: var(--gpp-fl-o1, 1); }
.gpp-sp .gpp-pic__fl-c2 { opacity: var(--gpp-fl-o2, 0); }
.gpp-sp .gpp-pic__fl-c3 { opacity: var(--gpp-fl-o3, 0); }
.gpp-sp .gpp-pic__fl-mda { font-size: 13px; font-weight: 500; fill: var(--gpp-gold); letter-spacing: 0.16em; }
@media (max-width: 767px) { .gpp-sp .gpp-pic__fl-lbl { font-size: 18px; } .gpp-sp .gpp-pic__fl-mda { font-size: 16px; } }
.gpp-sp .gpp-pic--f4 .gpp-pic__val { font-size: 30px; }
.gpp-sp .gpp-floop { display: none; }
@media (max-width: 600px) {
	.gpp-sp .gpp-solb__shot--loop { --gpp-fl-band: calc(max(11px, 3.5vw) * 2.3 + 11px); }
	.gpp-sp .gpp-floop { display: block; position: absolute; inset: 0; font-family: var(--gpp-font); pointer-events: none; }
	.gpp-sp .gpp-solb__shot--loop .gpp-pic > * { display: none; }
	.gpp-sp .gpp-floop__segs { position: absolute; top: 7px; left: 12px; right: 12px; display: flex; gap: 4px; }
	.gpp-sp .gpp-floop__segs i { position: relative; display: block; flex: 1 1 0; height: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
	.gpp-sp .gpp-floop__segs i::before, .gpp-sp .gpp-floop__segs i::after { content: ''; position: absolute; inset: 0; background: var(--gpp-gold); }
	.gpp-sp .gpp-floop__segs i::before { transform-origin: left; }
	.gpp-sp .gpp-floop__segs i:nth-child(1)::before { transform: scaleX(var(--gpp-fl-b1, 1)); }
	.gpp-fl-run .gpp-sp .gpp-floop__segs i:nth-child(1)::before { transform: scaleX(var(--gpp-fl-b1, 0)); }
	.gpp-sp .gpp-floop__segs i:nth-child(2)::before { transform: scaleX(var(--gpp-fl-b2, 0)); }
	.gpp-sp .gpp-floop__segs i:nth-child(3)::before { transform: scaleX(var(--gpp-fl-b3, 0)); }
	.gpp-sp .gpp-floop__segs i::after { opacity: var(--gpp-fl-g, 0); }
	.gpp-sp .gpp-solb__shot--loop .gpp-pcard.gpp-pcard--fl { inset: 0 0 var(--gpp-fl-band) 0; padding: 20px 6.25% 12px; }
	.gpp-sp .gpp-pcard--fl .gpp-pcard__ttl { white-space: nowrap; }
	.gpp-sp .gpp-floop__c1 { opacity: var(--gpp-fl-o1, 1); }
	.gpp-sp .gpp-floop__c2 { opacity: var(--gpp-fl-o2, 0); }
	.gpp-sp .gpp-floop__c3 { opacity: var(--gpp-fl-o3, 0); }
	.gpp-sp .gpp-pcard--fl .gpp-pcard__zone { left: var(--gpp-zone-l); width: var(--gpp-zone-w); }
	.gpp-sp .gpp-pcard--fl .gpp-pcard__gto { left: calc(var(--gpp-gto) - 1px); }
	@media (max-width: 340px) { .gpp-sp .gpp-solb__shot--loop .gpp-pcard__bench { font-size: 13px; gap: 4px; } .gpp-sp .gpp-solb__shot--loop .gpp-pcard__bench .gpp-pcard__k { letter-spacing: 0.08em; } }
	.gpp-sp .gpp-floop__band { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gpp-fl-band); background: var(--gpp-navy); border-top: 1px solid var(--gpp-line); }
	.gpp-sp .gpp-floop__lbl {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		padding: 0 6.25%;
		color: var(--gpp-white);
		font-size: max(11px, 3.5vw);
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}
}
.gpp-sp .gpp-flctl { position: absolute; inset: 0; z-index: 3; }
.gpp-sp .gpp-flctl button {
	position: absolute;
	display: block;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.gpp-sp .gpp-flctl__play { inset: 0; width: 100%; height: 100%; }
.gpp-sp .gpp-flctl__play:focus-visible { outline-offset: -4px; }
.gpp-sp .gpp-flctl__bar { top: 0; width: 31.875%; height: max(24px, 6.4%); }
.gpp-sp .gpp-flctl__bar--1 { left: 2.1875%; }
.gpp-sp .gpp-flctl__bar--2 { left: 34.0625%; }
.gpp-sp .gpp-flctl__bar--3 { left: 65.9375%; }
.gpp-sp .gpp-flctl__bar:focus-visible { outline-offset: -2px; }
.gpp-sp .gpp-flctl__icon { display: none; position: absolute; top: 5.139%; right: 2.5%; width: 3.125%; aspect-ratio: 1; background: var(--gpp-gold); pointer-events: none; }
.gpp-sp .gpp-flctl__icon::before { content: ''; position: absolute; inset: 26% 24% 26% 34%; background: var(--gpp-navy-deepest); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gpp-sp .gpp-solb__shot--loop.is-paused .gpp-flctl__icon { display: block; }
@media (max-width: 600px) {
	.gpp-sp .gpp-flctl__bar { width: calc((100% - 20px) / 3); height: 24px; }
	.gpp-sp .gpp-flctl__bar--1 { left: 10px; }
	.gpp-sp .gpp-flctl__bar--2 { left: calc(10px + (100% - 20px) / 3); }
	.gpp-sp .gpp-flctl__bar--3 { left: calc(10px + (100% - 20px) * 2 / 3); }
	.gpp-sp .gpp-flctl__icon { top: auto; right: 6.25%; bottom: calc((var(--gpp-fl-band) - 22px) / 2); width: 22px; }
}
