/* CSS Document */

*{
	margin:0;padding:0;
	font-feature-settings: "palt";
	box-sizing: border-box;
}



img {border:0;}
address {font-style:normal;}
a{text-decoration:none;}

.m0auto{margin: 0 auto;}
.mb1{margin-bottom: 1em!important;}
.mb1-5{margin-bottom: 1.5em!important;}
.mb2{margin-bottom: 2em!important;}
.mb2-5{margin-bottom: 2.5em!important;}
.mb3{margin-bottom: 3em!important;}
.red {color: red;}
.yelllow {color: yellow;}
.white{color:white;}
.blue{color:blue;}
.green{color:green;}
.DechauOrange{color:#FF4200;}
.clear {clear:both;}
.copyright {font-size: 0.5em;margin: 20px 0;text-align: center;}

body{
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	background: #02050a;
	overflow-x: hidden;
}

body::before,
body::after {
	position: fixed;
	content: "";
	pointer-events: none;
}

body::before {
	inset: -5vmax;
	z-index: -2;
	background-image: linear-gradient(rgba(0, 5, 14, 0.16), rgba(0, 2, 8, 0.7)), url("../img/back.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, cover;
	transform: scale(1.06) translate3d(0, 0, 0);
	animation: bestnine-background-drift 22s ease-in-out infinite alternate;
	will-change: transform;
}

body::after {
	inset: -25%;
	z-index: -1;
	background:
		radial-gradient(ellipse at 25% 15%, rgba(255, 202, 50, 0.18), transparent 24%),
		radial-gradient(ellipse at 78% 34%, rgba(27, 112, 255, 0.15), transparent 27%),
		linear-gradient(115deg, transparent 36%, rgba(255, 255, 220, 0.12) 47%, transparent 58%);
	mix-blend-mode: screen;
	opacity: 0.72;
	transform: translate3d(-7%, -2%, 0);
	animation: bestnine-stadium-lights 18s ease-in-out infinite alternate;
	will-change: transform;
}
.body1 {
	width: calc(100% - 2em);
	max-width: 700px; /** デザインの最大幅 **/
	margin: 0 auto;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.img100per{
	width: 100%;
	display: flex;
	justify-content: center;
}
.img100per img{
	width: 100%;
}

.mainVisu{
	display: flex;
	justify-content: center;
}
.mainVisu img{
    width: 85%;
	max-width: 1000px;
}
.mainTitle{
	width: 100%;
	margin-bottom: 2em;
}
.mainTitle img{
	width: 100%;
}
.mainTitle h1{
	font-family: "M PLUS 1p", serif;
	letter-spacing: -0.06em;
	color: black;
	text-align: center;
	font-weight: 900;
	font-size: 1.8em;
	line-height: 1.15em;
}
.mainTitle p{
	color: black;
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
.embeddedWrap{
	display: flex;
	justify-content: center;
	background: white;
	border: 2px solid gray;
	border-radius: 10px;
	margin-bottom: 2em;
}
.embedded1{
	width: 100%;
	max-width: 812px;
	height: 85vh;
	border-radius: 10px;
}

.content {
  flex: 1;
}
footer {
	position: fixed;
  width: 100%;
  background: #44aa33;
}
/*
FlexBoxの設定
----------------------------------------------------------- */
/*コンテナ*/
.flexContainer{
	display:flex;
	justify-content: flex-start; /*水平方向の揃え設定*/
	align-items: stretch; /*垂直方向の揃え設定*/
}
/*アイテム*/
.flexItem{
	width: calc(100%/2 - 0.3em); /*分割数を指定*/
}
/*要素の真ん中に配置*/
.mannaka{
	display: flex;
	justify-content: center;
	align-items: center;
}
/*
 フェイドインクラス
----------------------------------------------------------- */
.fadeInUp {
  opacity : 0;
  transform: translateY(20px);
  transition: 5s;
}
/*
 メディアクエリ 
----------------------------------------------------------- */
@media (min-width:600px){
	.mainTitle h1{
	font-size: 2.8em;
}
	.mainTitle p{
	font-size: 1.5em;
}
}

@media (max-width:600px){
	
}

/*
 ベストナイン取材：ドーム電光掲示板
----------------------------------------------------------- */
.bestnine-hero {
	position: relative;
	width: 100%;
	padding: clamp(8px, 2vw, 20px) 16px clamp(34px, 7vw, 70px);
	color: #fff;
	overflow: hidden;
}

.bestnine-hero::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background: linear-gradient(90deg, rgba(0, 3, 12, 0.54), rgba(0, 3, 12, 0.08) 25%, rgba(0, 3, 12, 0.08) 75%, rgba(0, 3, 12, 0.54));
	pointer-events: none;
}

.bestnine-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

.bestnine-logo {
	width: 100%;
	margin: 0 auto clamp(14px, 3vw, 28px);
	text-align: center;
}

.bestnine-logo img {
	display: block;
	width: min(100%, 710px);
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.62));
}

.bestnine-message,
.bestnine-board {
	position: relative;
	border: 3px solid #89929d;
	background-color: #030a13;
	background-image:
		radial-gradient(circle, rgba(255, 232, 168, 0.065) 0 0.55px, transparent 0.8px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.12));
	background-size: 3px 3px, 100% 100%;
	box-shadow:
		0 0 0 2px #202832,
		0 0 0 5px #68727d,
		0 11px 20px rgba(0, 0, 0, 0.5),
		inset 0 0 18px rgba(0, 0, 0, 0.82);
}

.bestnine-message::before,
.bestnine-board::before {
	position: absolute;
	inset: 0;
	content: "";
	background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.1) 4px 5px);
	pointer-events: none;
}

.bestnine-message {
	margin: 5px 5px clamp(22px, 4vw, 38px);
	padding: clamp(16px, 3vw, 28px) clamp(14px, 4vw, 38px);
	color: #fff;
	font-family: "M PLUS 1p", "Hiragino Sans", Meiryo, sans-serif;
	font-size: clamp(16px, 2.6vw, 25px);
	font-weight: 800;
	line-height: 1.75;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow: 0 1px 1px #000, 0 0 2px rgba(255, 255, 255, 0.28);
}

.bestnine-board {
	margin: 5px 5px clamp(30px, 5vw, 52px);
	padding: clamp(17px, 3vw, 30px) clamp(10px, 3vw, 28px) clamp(20px, 4vw, 38px);
	text-align: center;
}

.bestnine-date,
.bestnine-shop {
	position: relative;
	z-index: 1;
	font-family: "M PLUS 1p", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.bestnine-date {
	color: #ffd51f;
	font-size: clamp(42px, 8.8vw, 90px);
	letter-spacing: -0.055em;
	text-shadow: 0 1px 0 #6c3d00, 0 0 4px rgba(255, 148, 0, 0.4);
}

.bestnine-shop {
	margin-top: clamp(10px, 2vw, 18px);
	padding-top: clamp(10px, 2vw, 18px);
	border-top: 1px solid rgba(255, 213, 88, 0.52);
	color: #fff;
	font-size: clamp(25px, 5.2vw, 48px);
	letter-spacing: 0.025em;
	text-shadow: 0 1px 1px #00142f, 0 0 3px rgba(68, 151, 255, 0.5);
}

.bestnine-lineup {
	position: relative;
	margin: 5px;
	padding: clamp(8px, 1.5vw, 14px);
	border: 2px solid #162746;
	background: linear-gradient(180deg, #f7f8fa, #e4e8ed);
	box-shadow:
		0 0 0 3px rgba(196, 205, 215, 0.95),
		0 11px 22px rgba(0, 0, 0, 0.46),
		inset 0 0 12px rgba(17, 36, 66, 0.12);
}

.bestnine-lineup__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: clamp(11px, 2vw, 16px) 10px;
	border: 1px solid #6f0b15;
	background: linear-gradient(135deg, #d92331, #970f1b 54%, #5f0912);
	color: #ffdc65;
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(27px, 5vw, 50px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	text-shadow: 0 1px 1px rgba(63, 0, 5, 0.9);
}

.bestnine-lineup__title span {
	color: #fff;
}

.bestnine-lineup__header,
.bestnine-lineup-item {
	display: grid;
	grid-template-columns: clamp(46px, 8vw, 74px) clamp(46px, 8vw, 74px) minmax(0, 1fr);
	align-items: center;
}

.bestnine-lineup__header {
	position: relative;
	z-index: 1;
	min-height: 30px;
	border-right: 1px solid #162746;
	border-left: 1px solid #162746;
	background: #162746;
	color: #fff;
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(9px, 1.6vw, 13px);
	letter-spacing: 0.1em;
	text-align: center;
}

.bestnine-lineup__header span {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bestnine-lineup__header span:first-child {
	background: #bd1726;
}

.bestnine-lineup__header span:last-child {
	justify-content: flex-start;
	padding-left: 4px;
	text-align: left;
}

.bestnine-lineup__list {
	position: relative;
	z-index: 1;
	list-style: none;
}

.bestnine-lineup-item {
	position: relative;
	min-height: clamp(62px, 8.5vw, 80px);
	border-right: 1px solid #b8c0ca;
	border-bottom: 1px solid #c5cbd2;
	border-left: 1px solid #b8c0ca;
	background-color: #fff;
	background-image: linear-gradient(180deg, #fff, #f4f5f7);
	box-shadow: inset 0 -2px 4px rgba(12, 32, 57, 0.09), 0 1px 2px rgba(12, 32, 57, 0.18);
	overflow: hidden;
}

.bestnine-lineup-item:nth-child(even) {
	filter: none;
}

.bestnine-lineup-item::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(105deg, transparent 36%, rgba(221, 23, 39, 0.13) 49%, transparent 61%);
	transform: translateX(-140%);
	pointer-events: none;
}

.bestnine-lineup-item > span {
	position: relative;
	z-index: 1;
}

.bestnine-lineup-item__number {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 8%;
	background: linear-gradient(135deg, #ed2836, #b90e1d 70%);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	color: #fff;
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(34px, 6vw, 54px);
	line-height: 1;
	text-align: center;
	text-shadow: 0 1px 1px rgba(74, 0, 7, 0.72);
}

.bestnine-lineup-item__position {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 3px solid #dc1b2b;
	border-right: 1px solid #d9dde2;
	color: #14275e;
	font-size: clamp(19px, 3.3vw, 28px);
	font-weight: 900;
	text-align: center;
	text-shadow: none;
}

.bestnine-lineup-item__name {
	min-width: 0;
	padding: 8px clamp(8px, 2vw, 18px) 8px 4px;
	color: #111d32;
	font-family: "M PLUS 1p", "Hiragino Sans", Meiryo, sans-serif;
	font-size: clamp(14px, 2.5vw, 22px);
	font-weight: 800;
	line-height: 1.35;
	overflow-wrap: anywhere;
	text-shadow: none;
}

/* JSが起動した場合のみ、約1秒の点灯シーケンスを適用 */
.js.is-bestnine-booting .bestnine-message,
.js.is-bestnine-booting .bestnine-date,
.js.is-bestnine-booting .bestnine-shop,
.js.is-bestnine-booting .bestnine-lineup-item {
	opacity: 0;
}

.js.is-bestnine-booting .bestnine-lineup {
	animation: bestnine-panel-flash 100ms steps(2, end) 50ms both;
}

.js.is-bestnine-booting .bestnine-message {
	animation: bestnine-led-on 140ms ease-out 100ms both;
}

.js.is-bestnine-booting .bestnine-date {
	animation: bestnine-led-on 140ms ease-out 200ms both;
}

.js.is-bestnine-booting .bestnine-shop {
	animation: bestnine-led-on 140ms ease-out 300ms both;
}

.js.is-bestnine-booting .bestnine-lineup-item {
	animation: bestnine-row-on 150ms ease-out both;
}

.js.is-bestnine-booting .bestnine-lineup-item::after {
	animation: bestnine-row-scan 150ms ease-out both;
}

.js.is-bestnine-booting .bestnine-lineup-item:nth-child(1),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(1)::after { animation-delay: 350ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(2),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(2)::after { animation-delay: 410ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(3),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(3)::after { animation-delay: 470ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(4),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(4)::after { animation-delay: 530ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(5),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(5)::after { animation-delay: 590ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(6),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(6)::after { animation-delay: 650ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(7),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(7)::after { animation-delay: 710ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(8),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(8)::after { animation-delay: 770ms; }
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(9),
.js.is-bestnine-booting .bestnine-lineup-item:nth-child(9)::after { animation-delay: 830ms; }

.js.is-bestnine-booting .bestnine-hero__inner {
	animation: bestnine-final-glow 80ms ease-out 920ms both;
}

@keyframes bestnine-panel-flash {
	0% { filter: brightness(0.35); }
	50% { filter: brightness(1.18); }
	100% { filter: brightness(1); }
}

@keyframes bestnine-led-on {
	0% { opacity: 0; filter: brightness(0.25); }
	45% { opacity: 1; filter: brightness(1.25); }
	100% { opacity: 1; filter: brightness(1); }
}

@keyframes bestnine-row-on {
	0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(1.15); }
	70% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.06); }
	100% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); }
}

@keyframes bestnine-row-scan {
	from { transform: translateX(-140%); }
	to { transform: translateX(140%); }
}

@keyframes bestnine-final-glow {
	0% { filter: brightness(1); }
	50% { filter: brightness(1.1); }
	100% { filter: brightness(1); }
}

@keyframes bestnine-background-drift {
	0% { transform: scale(1.06) translate3d(0, -0.6%, 0); }
	100% { transform: scale(1.1) translate3d(0, 1.2%, 0); }
}

@keyframes bestnine-stadium-lights {
	0% { transform: translate3d(-7%, -2%, 0) rotate(-1deg); }
	100% { transform: translate3d(7%, 2%, 0) rotate(1deg); }
}

@media (max-width: 600px) {
	.bestnine-hero {
		padding-right: 12px;
		padding-left: 12px;
	}

	.bestnine-logo img {
		width: min(99%, 610px);
	}

	.bestnine-message {
		line-height: 1.65;
	}

	.bestnine-lineup {
		padding: 10px 7px;
	}
}

@media (max-width: 360px) {
	.bestnine-hero {
		padding-right: 8px;
		padding-left: 8px;
	}

	.bestnine-lineup__header,
	.bestnine-lineup-item {
		grid-template-columns: 43px 40px minmax(0, 1fr);
	}

	.bestnine-lineup-item {
		background-color: #fff;
		background-image: linear-gradient(180deg, #fff, #f4f5f7);
	}

	.bestnine-lineup-item__name {
		font-size: 13px;
		letter-spacing: -0.025em;
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after {
		animation: none;
		will-change: auto;
	}

	body::before {
		transform: scale(1.06);
	}

	body::after {
		transform: none;
	}

	.js.is-bestnine-booting .bestnine-message,
	.js.is-bestnine-booting .bestnine-date,
	.js.is-bestnine-booting .bestnine-shop,
	.js.is-bestnine-booting .bestnine-lineup-item,
	.js.is-bestnine-booting .bestnine-lineup-item::after,
	.js.is-bestnine-booting .bestnine-lineup,
	.js.is-bestnine-booting .bestnine-hero__inner {
		opacity: 1;
		animation: none;
		filter: none;
		clip-path: none;
		transform: none;
	}
}

/* 2026-09 cinematic stadium background redesign */
:root {
	--bestnine-bg-shift: 0px;
	--bestnine-night: #02050b;
	--bestnine-midnight: #071426;
	--bestnine-stadium-blue: #3f8ed8;
	--bestnine-stadium-gold: #ffce3a;
}

body {
	background:
		radial-gradient(ellipse at 50% 0%, #102846 0%, #050d19 42%, #010204 100%);
}

body::before {
	position: absolute;
	inset: -36px 0 -70px;
	z-index: -2;
	display: block;
	background-image: url("../img/back.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: max(100vw, 1580px) auto;
	filter: saturate(0.86) brightness(0.56) contrast(1.16);
	transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.035);
	transform-origin: center top;
	will-change: transform;
}

body::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	content: "";
	background:
		radial-gradient(ellipse at 50% 8%, rgba(255, 225, 130, 0.17), transparent 17%),
		radial-gradient(ellipse at 12% 24%, rgba(54, 139, 225, 0.2), transparent 25%),
		radial-gradient(ellipse at 88% 25%, rgba(54, 139, 225, 0.2), transparent 25%),
		radial-gradient(ellipse at 50% 63%, rgba(255, 193, 46, 0.09), transparent 29%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 23%, transparent 77%, rgba(0, 0, 0, 0.76)),
		linear-gradient(180deg, rgba(1, 4, 10, 0.02), rgba(2, 8, 17, 0.18) 30%, rgba(0, 2, 7, 0.5) 76%, rgba(0, 0, 0, 0.82));
	mix-blend-mode: normal;
	opacity: 0.94;
	pointer-events: none;
	animation: bestnine-ambient-color 18s ease-in-out infinite alternate;
}

.bestnine-hero {
	isolation: isolate;
	background:
		linear-gradient(180deg, rgba(0, 3, 9, 0.03), rgba(0, 5, 15, 0.16) 48%, rgba(0, 1, 5, 0.5));
}

.bestnine-hero::before {
	inset: 0;
	background:
		radial-gradient(ellipse at 50% -13%, transparent 0 31%, rgba(128, 177, 224, 0.22) 31.3% 31.8%, transparent 32.1% 38%, rgba(72, 111, 151, 0.15) 38.3% 38.7%, transparent 39%),
		repeating-conic-gradient(from 244deg at 50% -9%, transparent 0deg 8deg, rgba(116, 158, 201, 0.1) 8.25deg 8.7deg, transparent 8.95deg 17deg),
		radial-gradient(ellipse at 50% 13%, rgba(221, 237, 255, 0.12), transparent 30%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 21%, transparent 79%, rgba(0, 0, 0, 0.7)),
		linear-gradient(180deg, transparent 58%, rgba(0, 2, 8, 0.38) 78%, rgba(0, 0, 0, 0.68));
	opacity: 1;
}

.bestnine-hero::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	content: "";
	background-image:
		linear-gradient(90deg, transparent 0 10%, rgba(255, 214, 66, 0.7) 12%, transparent 14% 28%, rgba(116, 184, 255, 0.48) 30%, transparent 32% 48%, rgba(255, 214, 66, 0.68) 50%, transparent 52% 68%, rgba(116, 184, 255, 0.48) 70%, transparent 72% 86%, rgba(255, 214, 66, 0.7) 88%, transparent 90%),
		linear-gradient(110deg, transparent 38%, rgba(255, 240, 191, 0.08) 48%, transparent 58%);
	background-position: -100% 33%, -40% 0;
	background-repeat: repeat-x, no-repeat;
	background-size: 200% 2px, 180% 100%;
	filter: drop-shadow(0 0 7px rgba(255, 206, 58, 0.42));
	opacity: 0.52;
	pointer-events: none;
	animation: bestnine-led-ribbon 16s linear infinite;
}

.bestnine-atmosphere {
	inset: 0;
	z-index: 1;
	display: block;
	background:
		radial-gradient(ellipse at 50% 12%, rgba(255, 244, 207, 0.2), rgba(87, 153, 219, 0.09) 26%, transparent 51%),
		radial-gradient(ellipse at 50% 34%, rgba(255, 206, 58, 0.08), transparent 29%),
		radial-gradient(ellipse at 50% 72%, rgba(104, 176, 240, 0.09), transparent 38%);
	filter: brightness(1);
	transition: filter 1.3s ease-out;
}

.bestnine-atmosphere::before,
.bestnine-atmosphere::after {
	top: -15%;
	width: 56%;
	height: 88%;
	background:
		linear-gradient(180deg, rgba(234, 246, 255, 0.32), rgba(125, 183, 237, 0.12) 38%, rgba(54, 116, 176, 0.04) 68%, transparent 91%);
	clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
	filter: blur(17px);
	mix-blend-mode: screen;
}

.bestnine-atmosphere::before {
	left: -13%;
	animation: bestnine-cinematic-light-left 15s ease-in-out infinite alternate;
}

.bestnine-atmosphere::after {
	right: -13%;
	animation: bestnine-cinematic-light-right 17s ease-in-out infinite alternate;
}

.bestnine-logo::before {
	top: 50%;
	width: min(104vw, 980px);
	aspect-ratio: 1.7 / 1;
	background:
		radial-gradient(ellipse, rgba(255, 239, 177, 0.31), rgba(255, 192, 41, 0.11) 31%, rgba(61, 139, 213, 0.12) 48%, transparent 70%);
	filter: blur(18px);
	animation: bestnine-logo-halo 7s ease-in-out infinite alternate;
}

.bestnine-copy {
	position: relative;
	background:
		linear-gradient(90deg, transparent, rgba(0, 4, 12, 0.72) 16%, rgba(1, 8, 19, 0.9) 50%, rgba(0, 4, 12, 0.72) 84%, transparent);
	box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}

.bestnine-board {
	backdrop-filter: blur(2px);
}

.bestnine-hero.is-lineup-lighting .bestnine-atmosphere {
	filter: brightness(1.24);
}

@keyframes bestnine-ambient-color {
	0% { opacity: 0.86; filter: hue-rotate(-2deg); }
	100% { opacity: 0.98; filter: hue-rotate(3deg); }
}

@keyframes bestnine-led-ribbon {
	0% { background-position: -100% 33%, -40% 0; }
	100% { background-position: 100% 33%, 40% 0; }
}

@keyframes bestnine-cinematic-light-left {
	0% { opacity: 0.42; transform: rotate(-12deg) translate3d(-12px, 0, 0); }
	100% { opacity: 0.78; transform: rotate(-8deg) translate3d(18px, 9px, 0); }
}

@keyframes bestnine-cinematic-light-right {
	0% { opacity: 0.4; transform: rotate(12deg) translate3d(12px, 0, 0); }
	100% { opacity: 0.75; transform: rotate(8deg) translate3d(-18px, 9px, 0); }
}

@keyframes bestnine-logo-halo {
	0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.97); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@media (max-width: 600px) {
	body::before {
		inset: -24px 0 -60px;
		background-position: 50% top;
		background-size: auto max(205vh, 1840px);
		filter: saturate(0.88) brightness(0.58) contrast(1.12);
		transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.02);
	}

	body::after {
		background:
			radial-gradient(ellipse at 50% 7%, rgba(255, 225, 130, 0.16), transparent 16%),
			radial-gradient(ellipse at 50% 26%, rgba(54, 139, 225, 0.14), transparent 29%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.48)),
			linear-gradient(180deg, rgba(1, 4, 10, 0.03), rgba(0, 2, 8, 0.38) 62%, rgba(0, 0, 0, 0.78));
	}

	.bestnine-hero::before {
		background:
			radial-gradient(ellipse at 50% -8%, transparent 0 28%, rgba(128, 177, 224, 0.17) 28.4% 28.9%, transparent 29.2%),
			radial-gradient(ellipse at 50% 12%, rgba(221, 237, 255, 0.11), transparent 29%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.38)),
			linear-gradient(180deg, transparent 55%, rgba(0, 2, 8, 0.46) 82%, rgba(0, 0, 0, 0.68));
	}

	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after {
		width: 72%;
		height: 78%;
		opacity: 0.56;
	}

	.bestnine-copy {
		background: linear-gradient(90deg, transparent, rgba(0, 4, 12, 0.82) 9%, rgba(1, 8, 19, 0.92) 50%, rgba(0, 4, 12, 0.82) 91%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before {
		transform: none;
	}

	body::after,
	.bestnine-hero::after,
	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after,
	.bestnine-logo::before {
		animation: none;
	}
}

/*
 2026-09 scoreboard readability adjustments
----------------------------------------------------------- */
body::before {
	background-image: url("../img/back.jpg");
}

.bestnine-hero::before {
	background: none;
}

.bestnine-message {
	display: block;
	margin-bottom: clamp(26px, 4vw, 44px);
	padding: clamp(8px, 1.4vw, 13px);
	border: 2px solid #7f8b98;
	background-color: #020812;
	background-image:
		radial-gradient(circle, rgba(255, 223, 112, 0.08) 0 0.55px, transparent 0.75px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.13));
	background-size: 3px 3px, 100% 100%;
	box-shadow:
		0 0 0 2px #152132,
		0 0 0 5px #aab2ba,
		0 15px 30px rgba(0, 0, 0, 0.44),
		inset 0 0 24px rgba(0, 0, 0, 0.72);
	clip-path: none;
	text-align: center;
}

.bestnine-message::before {
	position: absolute;
	inset: 8px;
	width: auto;
	content: "";
	border: 1px solid rgba(255, 216, 77, 0.25);
	background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.13) 4px 5px);
}

.bestnine-message::after {
	inset: 8px;
	background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.045) 46%, transparent 68%);
}

.bestnine-message__lead,
.bestnine-message__sub {
	display: block;
	background: none;
	text-align: center;
}

.bestnine-message__lead {
	padding: clamp(20px, 3vw, 28px) clamp(15px, 3vw, 28px) 6px;
	color: #fff;
	font-size: clamp(19px, 3vw, 29px);
	font-weight: 900;
	line-height: 1.5;
	text-shadow: 0 1px 1px #000, 0 0 2px rgba(255, 255, 255, 0.28);
}

.bestnine-message__sub {
	padding: 6px clamp(15px, 3vw, 28px) clamp(20px, 3vw, 28px);
	color: #f5f7fb;
	font-size: clamp(14px, 2.1vw, 20px);
	font-weight: 800;
	line-height: 1.65;
	text-shadow: 0 1px 1px #000;
}

.bestnine-board {
	padding: clamp(22px, 4vw, 38px) clamp(16px, 4vw, 38px) clamp(24px, 4vw, 38px);
	border: 2px solid #7f8b98;
	background-color: #020812;
	background-image:
		radial-gradient(circle, rgba(255, 216, 77, 0.075) 0 0.55px, transparent 0.75px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.15));
	background-size: 3px 3px, 100% 100%;
	box-shadow:
		0 0 0 2px #152132,
		0 0 0 5px #aab2ba,
		0 18px 36px rgba(0, 0, 0, 0.46),
		inset 0 0 28px rgba(0, 0, 0, 0.76);
	clip-path: none;
}

.bestnine-board::before {
	inset: 8px;
	border-color: rgba(255, 216, 77, 0.24);
	background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.13) 4px 5px);
}

.bestnine-date {
	position: relative;
	z-index: 2;
	color: #ffda32;
	text-shadow: 0 2px 0 #6b3b00, 0 0 3px rgba(255, 166, 0, 0.32);
}

.bestnine-shop {
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 1px #000;
}

@media (max-width: 600px) {
	.bestnine-message {
		clip-path: none;
	}

	.bestnine-message__lead {
		padding: 18px 13px 5px;
		font-size: clamp(17px, 5vw, 21px);
	}

	.bestnine-message__sub {
		padding: 5px 13px 18px;
	}

	.bestnine-board {
		clip-path: none;
	}
}

/*
 2026 RENEWAL — Stadium broadcast graphics
----------------------------------------------------------- */
:root {
	--bestnine-red: #e31527;
	--bestnine-red-dark: #760711;
	--bestnine-navy: #071a34;
	--bestnine-blue: #173a67;
	--bestnine-gold: #ffd84d;
	--bestnine-paper: #f7f8fa;
	--bestnine-ink: #0b1930;
	--bestnine-pointer-x: 0px;
	--bestnine-pointer-y: 0px;
}

body::before {
	inset: -7vmax;
	background-image:
		linear-gradient(180deg, rgba(1, 10, 27, 0.08), rgba(1, 8, 22, 0.3) 52%, rgba(1, 5, 14, 0.76)),
		url("../img/back.jpg");
	background-position: center top;
	background-size: cover;
	animation: bestnine-renewal-background 26s ease-in-out infinite alternate;
}

body::after {
	inset: -28%;
	background:
		radial-gradient(circle at 18% 14%, rgba(255, 225, 100, 0.28), transparent 17%),
		radial-gradient(circle at 80% 20%, rgba(54, 135, 255, 0.25), transparent 20%),
		linear-gradient(112deg, transparent 35%, rgba(255, 246, 199, 0.15) 46%, transparent 57%);
	opacity: 0.75;
	animation: bestnine-renewal-lights 15s ease-in-out infinite alternate;
}

.dechauheaderWrapper {
	z-index: 50;
	margin-bottom: 0;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
}

.bestnine-hero {
	position: relative;
	padding: clamp(8px, 1.5vw, 18px) 18px clamp(54px, 8vw, 94px);
	isolation: isolate;
	overflow: hidden;
}

.bestnine-hero::before {
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse at 50% 7%, rgba(255, 62, 26, 0.14), transparent 28%),
		linear-gradient(90deg, rgba(0, 8, 24, 0.58), rgba(0, 8, 24, 0.06) 28%, rgba(0, 8, 24, 0.06) 72%, rgba(0, 8, 24, 0.58));
}

.bestnine-hero::after {
	position: absolute;
	inset: -20% -70%;
	z-index: 0;
	content: "";
	background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 216, 77, 0.11) 50%, transparent 58%);
	transform: translate3d(-28%, 0, 0);
	animation: bestnine-hero-sweep 12s linear infinite;
	pointer-events: none;
}

.bestnine-atmosphere {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.bestnine-hero__inner {
	z-index: 2;
	max-width: 1000px;
}

.bestnine-logo {
	position: relative;
	margin: 0 auto clamp(8px, 1.7vw, 18px);
}

.bestnine-logo::before {
	position: absolute;
	top: 48%;
	left: 50%;
	z-index: -1;
	width: min(92vw, 820px);
	aspect-ratio: 2 / 1;
	content: "";
	background: radial-gradient(ellipse, rgba(255, 57, 22, 0.34), rgba(255, 202, 41, 0.1) 42%, transparent 70%);
	transform: translate(-50%, -50%);
	filter: blur(12px);
}

.bestnine-logo img {
	width: min(100%, 800px);
	filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.7));
	transform: translate3d(var(--bestnine-pointer-x), var(--bestnine-pointer-y), 0);
	transition: transform 260ms ease-out;
}

.bestnine-message {
	position: relative;
	display: grid;
	grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1.5fr);
	align-items: stretch;
	margin: 0 auto clamp(24px, 4vw, 42px);
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.36);
	background: rgba(3, 13, 31, 0.9);
	background-image: none;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
	text-align: left;
	text-shadow: none;
}

.bestnine-message::before {
	inset: 0 auto 0 0;
	width: 7px;
	background: linear-gradient(180deg, var(--bestnine-gold), var(--bestnine-red));
}

.bestnine-message::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(105deg, rgba(255, 255, 255, 0.08), transparent 33%);
	pointer-events: none;
}

.bestnine-message__lead,
.bestnine-message__sub {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	margin: 0;
}

.bestnine-message__lead {
	padding: clamp(17px, 3vw, 28px) clamp(16px, 3vw, 28px);
	background: linear-gradient(135deg, rgba(227, 21, 39, 0.95), rgba(118, 7, 17, 0.92));
	color: #fff;
	font-size: clamp(18px, 3vw, 29px);
	font-weight: 900;
	line-height: 1.42;
	letter-spacing: 0.025em;
}

.bestnine-message__sub {
	padding: clamp(17px, 3vw, 28px) clamp(18px, 3.5vw, 34px);
	color: rgba(255, 255, 255, 0.94);
	font-size: clamp(14px, 2.1vw, 20px);
	font-weight: 700;
	line-height: 1.65;
}

.bestnine-board {
	position: relative;
	margin: 0 auto clamp(34px, 5vw, 58px);
	padding: clamp(26px, 4vw, 44px) clamp(16px, 4vw, 38px) clamp(24px, 4vw, 38px);
	border: 1px solid rgba(255, 216, 77, 0.72);
	background: linear-gradient(145deg, rgba(3, 15, 37, 0.96), rgba(7, 28, 57, 0.92));
	background-image: none;
	box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(255, 255, 255, 0.035);
	clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
}

.bestnine-board::before {
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: none;
}

.bestnine-board__label {
	position: absolute;
	top: 0;
	left: 50%;
	min-width: 132px;
	padding: 6px 18px 7px;
	background: var(--bestnine-red);
	color: #fff;
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(12px, 1.7vw, 16px);
	line-height: 1;
	letter-spacing: 0.2em;
	transform: translate(-50%, -1px);
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.bestnine-date {
	color: var(--bestnine-gold);
	font-size: clamp(52px, 10vw, 104px);
	letter-spacing: -0.06em;
	white-space: nowrap;
	text-shadow: 0 3px 0 rgba(103, 42, 0, 0.75);
}

.bestnine-shop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 18px);
	margin: clamp(15px, 2.4vw, 24px) auto 0;
	padding: clamp(13px, 2vw, 18px) 10px 0;
	border-top: 1px solid rgba(255, 216, 77, 0.42);
	color: #fff;
	font-size: clamp(28px, 5.4vw, 54px);
	letter-spacing: 0.01em;
	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.8);
}

.bestnine-shop span {
	display: inline-block;
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.48);
	color: var(--bestnine-gold);
	font-family: Anton, Impact, sans-serif;
	font-size: 0.34em;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.18em;
}

.bestnine-lineup {
	position: relative;
	margin: 0 auto;
	padding: clamp(10px, 2vw, 18px);
	border: 1px solid rgba(255, 255, 255, 0.72);
	background: rgba(4, 18, 40, 0.94);
	box-shadow: 0 24px 54px rgba(0, 0, 0, 0.56), inset 0 0 0 5px rgba(255, 255, 255, 0.04);
	clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.bestnine-lineup::before {
	position: absolute;
	inset: 0;
	content: "";
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 24%),
		repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.018) 5px 6px);
	pointer-events: none;
}

.bestnine-lineup__title {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	gap: 0 clamp(9px, 2vw, 18px);
	margin: 0;
	padding: clamp(17px, 3vw, 27px) clamp(14px, 3vw, 28px);
	border: 0;
	background: linear-gradient(118deg, #ed1d32, #a60d1b 58%, #630710);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	text-align: left;
	text-shadow: none;
}

.bestnine-lineup__title span {
	grid-row: 1 / 3;
	align-self: center;
	padding-right: clamp(10px, 2vw, 20px);
	border-right: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(20px, 3.8vw, 39px);
	line-height: 1;
	letter-spacing: 0.05em;
}

.bestnine-lineup__title strong {
	color: var(--bestnine-gold);
	font-family: Anton, Impact, sans-serif;
	font-size: clamp(34px, 6.3vw, 66px);
	font-weight: 400;
	line-height: 0.85;
	letter-spacing: 0.04em;
}

.bestnine-lineup__title small {
	margin-top: 7px;
	color: rgba(255, 255, 255, 0.78);
	font-family: "M PLUS 1p", sans-serif;
	font-size: clamp(8px, 1.4vw, 12px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.22em;
}

.bestnine-lineup__header,
.bestnine-lineup-item {
	grid-template-columns: clamp(58px, 9vw, 92px) clamp(52px, 8vw, 82px) minmax(0, 1fr);
}

.bestnine-lineup__header {
	min-height: clamp(30px, 4vw, 40px);
	margin-top: 7px;
	border: 0;
	background: #102a50;
	font-size: clamp(9px, 1.5vw, 13px);
}

.bestnine-lineup__header span:first-child {
	background: var(--bestnine-red-dark);
}

.bestnine-lineup__list {
	display: grid;
	gap: clamp(4px, 0.8vw, 7px);
	margin-top: clamp(4px, 0.8vw, 7px);
}

.bestnine-lineup-item {
	min-height: clamp(67px, 9vw, 88px);
	border: 0;
	background: var(--bestnine-paper);
	box-shadow: 0 3px 0 #b8c0ca, 0 7px 13px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(7, 26, 52, 0.12);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.bestnine-lineup-item:nth-child(even) {
	background: #edf0f4;
}

.bestnine-lineup-item::after {
	background: linear-gradient(105deg, transparent 36%, rgba(255, 33, 51, 0.12) 49%, transparent 61%);
}

.bestnine-lineup-item__number {
	padding-right: 10%;
	background: linear-gradient(135deg, #f3283a, #d00f21 56%, #8b0712);
	clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
	font-size: clamp(39px, 6.8vw, 61px);
	font-style: italic;
	text-shadow: 0 2px 1px rgba(85, 0, 7, 0.72);
}

.bestnine-lineup-item__position {
	position: relative;
	border: 0;
	color: #10275a;
	font-size: clamp(23px, 3.8vw, 34px);
}

.bestnine-lineup-item__position::after {
	position: absolute;
	top: 22%;
	right: 0;
	bottom: 22%;
	width: 3px;
	content: "";
	background: var(--bestnine-red);
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.9);
}

.bestnine-lineup-item__name {
	padding: 9px clamp(10px, 2vw, 22px);
	color: var(--bestnine-ink);
	font-size: clamp(14px, 2.45vw, 22px);
	font-weight: 900;
	line-height: 1.32;
	letter-spacing: -0.015em;
}

@media (hover: hover) and (pointer: fine) {
	.bestnine-lineup-item:hover {
		transform: translateX(5px);
		box-shadow: -5px 3px 0 var(--bestnine-red), 0 8px 18px rgba(0, 0, 0, 0.28);
	}
}

/* First-view broadcast sequence: visual finish at 1 second */
.js.is-bestnine-booting .bestnine-logo {
	animation: bestnine-renewal-logo-in 420ms cubic-bezier(0.17, 0.84, 0.25, 1.15) both;
}

.js.is-bestnine-booting .bestnine-message {
	animation: bestnine-renewal-panel-in 170ms ease-out 90ms both;
}

.js.is-bestnine-booting .bestnine-date {
	animation: bestnine-renewal-type-in 150ms ease-out 190ms both;
}

.js.is-bestnine-booting .bestnine-shop {
	animation: bestnine-renewal-type-in 150ms ease-out 290ms both;
}

.js.is-bestnine-booting .bestnine-lineup-item {
	animation-name: bestnine-renewal-row-in;
	animation-duration: 150ms;
	animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes bestnine-renewal-logo-in {
	0% { opacity: 0; transform: scale(0.78) translateY(-18px); filter: brightness(1.8); }
	65% { opacity: 1; transform: scale(1.035) translateY(0); filter: brightness(1.18); }
	100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes bestnine-renewal-panel-in {
	0% { opacity: 0; clip-path: inset(0 50% 0 50%); }
	100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes bestnine-renewal-type-in {
	0% { opacity: 0; transform: translateY(8px); filter: brightness(1.4); }
	100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes bestnine-renewal-row-in {
	0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); }
	100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes bestnine-renewal-background {
	0% { transform: scale(1.07) translate3d(-0.5%, -0.7%, 0); }
	100% { transform: scale(1.12) translate3d(0.7%, 1.2%, 0); }
}

@keyframes bestnine-renewal-lights {
	0% { transform: translate3d(-8%, -3%, 0) rotate(-1.2deg); }
	100% { transform: translate3d(8%, 3%, 0) rotate(1.2deg); }
}

@keyframes bestnine-hero-sweep {
	0%, 15% { transform: translate3d(-30%, 0, 0); }
	65%, 100% { transform: translate3d(30%, 0, 0); }
}

@media (max-width: 600px) {
	.bestnine-hero {
		padding-right: 10px;
		padding-left: 10px;
	}

	.bestnine-logo img {
		width: min(100%, 720px);
	}

	.bestnine-message {
		grid-template-columns: 1fr;
		clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	}

	.bestnine-message__lead,
	.bestnine-message__sub {
		justify-content: center;
		text-align: center;
	}

	.bestnine-message__lead {
		padding: 14px 14px 11px;
		font-size: clamp(17px, 5vw, 22px);
	}

	.bestnine-message__sub {
		padding: 11px 14px 14px;
		font-size: clamp(13px, 3.8vw, 16px);
		line-height: 1.55;
	}

	.bestnine-board {
		clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
	}

	.bestnine-shop {
		flex-direction: column;
		gap: 7px;
	}

	.bestnine-shop span {
		font-size: 10px;
	}

	.bestnine-lineup {
		padding: 8px;
	}

	.bestnine-lineup__title {
		padding: 15px 12px;
	}

	.bestnine-lineup__header,
	.bestnine-lineup-item {
		grid-template-columns: 52px 46px minmax(0, 1fr);
	}

	.bestnine-lineup-item {
		min-height: 66px;
	}
}

@media (max-width: 360px) {
	.bestnine-hero {
		padding-right: 7px;
		padding-left: 7px;
	}

	.bestnine-lineup__title span {
		font-size: 18px;
	}

	.bestnine-date {
		font-size: clamp(38px, 13vw, 44px);
	}

	.bestnine-shop {
		font-size: 26px;
	}

	.bestnine-lineup__title strong {
		font-size: 31px;
	}

	.bestnine-lineup__header,
	.bestnine-lineup-item {
		grid-template-columns: 47px 41px minmax(0, 1fr);
	}

	.bestnine-lineup-item__name {
		padding-right: 7px;
		padding-left: 7px;
		font-size: 12.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.bestnine-hero::after,
	.js.is-bestnine-booting .bestnine-logo,
	.js.is-bestnine-booting .bestnine-message,
	.js.is-bestnine-booting .bestnine-date,
	.js.is-bestnine-booting .bestnine-shop,
	.js.is-bestnine-booting .bestnine-lineup-item {
		animation: none;
	}

	.bestnine-atmosphere {
		display: none;
	}

	.bestnine-logo img {
		transform: none;
		transition: none;
	}
}

/* Final cinematic background controls: keep these last in the cascade. */
body::before {
	inset: -36px 0;
	background-image: url("../img/back.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: max(100vw, 1680px) auto;
	filter: saturate(0.86) brightness(0.56) contrast(1.16);
	transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.035);
	transform-origin: center top;
	will-change: transform;
}

body::after {
	display: block;
	background:
		radial-gradient(ellipse at 13% 14%, rgba(82, 163, 255, 0.28), transparent 31%),
		radial-gradient(ellipse at 87% 21%, rgba(255, 183, 39, 0.2), transparent 27%),
		radial-gradient(ellipse at 50% 76%, rgba(0, 124, 214, 0.15), transparent 40%),
		linear-gradient(90deg, rgba(0, 2, 10, 0.48), transparent 22%, transparent 78%, rgba(0, 2, 10, 0.48));
	animation: bestnine-ambient-color 18s ease-in-out infinite alternate;
}

.bestnine-atmosphere::before {
	filter: blur(17px);
	animation: bestnine-cinematic-light-left 15s ease-in-out infinite alternate;
}

.bestnine-atmosphere::after {
	filter: blur(17px);
	animation: bestnine-cinematic-light-right 17s ease-in-out infinite alternate;
}

@media (max-width: 600px) {
	body::before {
		background-size: auto max(205vh, 1840px);
		filter: saturate(0.88) brightness(0.58) contrast(1.12);
		transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before {
		transform: scale(1.02);
		will-change: auto;
	}

	body::after,
	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after {
		animation: none;
	}
}

/* Cinematic stadium: final cascade layer */
body {
	background: radial-gradient(ellipse at 50% 0%, #102846 0%, #050d19 42%, #010204 100%);
}

body::before {
	position: absolute;
	inset: -36px 0 -70px;
	z-index: -2;
	display: block;
	background-image: url("../img/back.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: max(100vw, 1580px) auto;
	filter: saturate(0.86) brightness(0.56) contrast(1.16);
	transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.035);
	transform-origin: center top;
	animation: none;
	will-change: transform;
}

body::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	content: "";
	background:
		radial-gradient(ellipse at 50% 8%, rgba(255, 225, 130, 0.17), transparent 17%),
		radial-gradient(ellipse at 12% 24%, rgba(54, 139, 225, 0.2), transparent 25%),
		radial-gradient(ellipse at 88% 25%, rgba(54, 139, 225, 0.2), transparent 25%),
		radial-gradient(ellipse at 50% 63%, rgba(255, 193, 46, 0.09), transparent 29%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 23%, transparent 77%, rgba(0, 0, 0, 0.76)),
		linear-gradient(180deg, rgba(1, 4, 10, 0.02), rgba(2, 8, 17, 0.18) 30%, rgba(0, 2, 7, 0.5) 76%, rgba(0, 0, 0, 0.82));
	opacity: 0.94;
	pointer-events: none;
	animation: bestnine-ambient-color 18s ease-in-out infinite alternate;
}

.bestnine-hero {
	isolation: isolate;
	background: linear-gradient(180deg, rgba(0, 3, 9, 0.03), rgba(0, 5, 15, 0.16) 48%, rgba(0, 1, 5, 0.5));
}

.bestnine-hero::before {
	inset: 0;
	background:
		radial-gradient(ellipse at 50% -13%, transparent 0 31%, rgba(128, 177, 224, 0.22) 31.3% 31.8%, transparent 32.1% 38%, rgba(72, 111, 151, 0.15) 38.3% 38.7%, transparent 39%),
		repeating-conic-gradient(from 244deg at 50% -9%, transparent 0deg 8deg, rgba(116, 158, 201, 0.1) 8.25deg 8.7deg, transparent 8.95deg 17deg),
		radial-gradient(ellipse at 50% 13%, rgba(221, 237, 255, 0.12), transparent 30%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 21%, transparent 79%, rgba(0, 0, 0, 0.7)),
		linear-gradient(180deg, transparent 58%, rgba(0, 2, 8, 0.38) 78%, rgba(0, 0, 0, 0.68));
	opacity: 1;
}

.bestnine-hero::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	content: "";
	background-image:
		linear-gradient(90deg, transparent 0 10%, rgba(255, 214, 66, 0.7) 12%, transparent 14% 28%, rgba(116, 184, 255, 0.48) 30%, transparent 32% 48%, rgba(255, 214, 66, 0.68) 50%, transparent 52% 68%, rgba(116, 184, 255, 0.48) 70%, transparent 72% 86%, rgba(255, 214, 66, 0.7) 88%, transparent 90%),
		linear-gradient(110deg, transparent 38%, rgba(255, 240, 191, 0.08) 48%, transparent 58%);
	background-position: -100% 33%, -40% 0;
	background-repeat: repeat-x, no-repeat;
	background-size: 200% 2px, 180% 100%;
	filter: drop-shadow(0 0 7px rgba(255, 206, 58, 0.42));
	opacity: 0.52;
	pointer-events: none;
	animation: bestnine-led-ribbon 16s linear infinite;
}

.bestnine-atmosphere {
	inset: 0;
	z-index: 1;
	display: block;
	background:
		radial-gradient(ellipse at 50% 12%, rgba(255, 244, 207, 0.2), rgba(87, 153, 219, 0.09) 26%, transparent 51%),
		radial-gradient(ellipse at 50% 34%, rgba(255, 206, 58, 0.08), transparent 29%),
		radial-gradient(ellipse at 50% 72%, rgba(104, 176, 240, 0.09), transparent 38%);
	filter: brightness(1);
	transition: filter 1.3s ease-out;
}

.bestnine-atmosphere::before,
.bestnine-atmosphere::after {
	top: -15%;
	width: 56%;
	height: 88%;
	background: linear-gradient(180deg, rgba(234, 246, 255, 0.32), rgba(125, 183, 237, 0.12) 38%, rgba(54, 116, 176, 0.04) 68%, transparent 91%);
	clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
	filter: blur(17px);
	mix-blend-mode: screen;
}

.bestnine-atmosphere::before {
	left: -13%;
	animation: bestnine-cinematic-light-left 15s ease-in-out infinite alternate;
}

.bestnine-atmosphere::after {
	right: -13%;
	animation: bestnine-cinematic-light-right 17s ease-in-out infinite alternate;
}

.bestnine-logo::before {
	top: 50%;
	width: min(104vw, 980px);
	aspect-ratio: 1.7 / 1;
	background: radial-gradient(ellipse, rgba(255, 239, 177, 0.31), rgba(255, 192, 41, 0.11) 31%, rgba(61, 139, 213, 0.12) 48%, transparent 70%);
	filter: blur(18px);
	animation: bestnine-logo-halo 7s ease-in-out infinite alternate;
}

.bestnine-copy {
	background: linear-gradient(90deg, transparent, rgba(0, 4, 12, 0.72) 16%, rgba(1, 8, 19, 0.9) 50%, rgba(0, 4, 12, 0.72) 84%, transparent);
	box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}

.bestnine-hero.is-lineup-lighting .bestnine-atmosphere {
	filter: brightness(1.24);
}

@media (max-width: 600px) {
	body::before {
		inset: -24px 0 -60px;
		background-position: 50% top;
		background-size: auto max(205vh, 1840px);
		filter: saturate(0.88) brightness(0.58) contrast(1.12);
		transform: translate3d(0, var(--bestnine-bg-shift), 0) scale(1.02);
	}

	body::after {
		background:
			radial-gradient(ellipse at 50% 7%, rgba(255, 225, 130, 0.16), transparent 16%),
			radial-gradient(ellipse at 50% 26%, rgba(54, 139, 225, 0.14), transparent 29%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.48)),
			linear-gradient(180deg, rgba(1, 4, 10, 0.03), rgba(0, 2, 8, 0.38) 62%, rgba(0, 0, 0, 0.78));
	}

	.bestnine-hero::before {
		background:
			radial-gradient(ellipse at 50% -8%, transparent 0 28%, rgba(128, 177, 224, 0.17) 28.4% 28.9%, transparent 29.2%),
			radial-gradient(ellipse at 50% 12%, rgba(221, 237, 255, 0.11), transparent 29%),
			linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.38)),
			linear-gradient(180deg, transparent 55%, rgba(0, 2, 8, 0.46) 82%, rgba(0, 0, 0, 0.68));
	}

	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after {
		width: 72%;
		height: 78%;
	}

	.bestnine-copy {
		background: linear-gradient(90deg, transparent, rgba(0, 4, 12, 0.82) 9%, rgba(1, 8, 19, 0.92) 50%, rgba(0, 4, 12, 0.82) 91%, transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before {
		transform: none;
	}

	body::after,
	.bestnine-hero::after,
	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after,
	.bestnine-logo::before {
		animation: none;
	}
}

/* Final scoreboard treatment (kept last to override the renewal theme) */
body::before {
	background-image: url("../img/back.jpg");
}

.bestnine-hero::before {
	background: none;
}

.bestnine-message {
	display: block;
	margin-bottom: clamp(26px, 4vw, 44px);
	padding: clamp(8px, 1.4vw, 13px);
	border: 2px solid #7f8b98;
	background-color: #020812;
	background-image:
		radial-gradient(circle, rgba(255, 223, 112, 0.08) 0 0.55px, transparent 0.75px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.13));
	background-size: 3px 3px, 100% 100%;
	box-shadow: 0 0 0 2px #152132, 0 0 0 5px #aab2ba, 0 15px 30px rgba(0, 0, 0, 0.44), inset 0 0 24px rgba(0, 0, 0, 0.72);
	clip-path: none;
	text-align: center;
}

.bestnine-message::before {
	inset: 8px;
	width: auto;
	border: 1px solid rgba(255, 216, 77, 0.25);
	background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.13) 4px 5px);
}

.bestnine-message::after {
	inset: 8px;
	background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.045) 46%, transparent 68%);
}

.bestnine-message__lead,
.bestnine-message__sub {
	display: block;
	background: none;
	text-align: center;
}

.bestnine-message__lead {
	padding: clamp(20px, 3vw, 28px) clamp(15px, 3vw, 28px) 6px;
	color: #fff;
	font-size: clamp(19px, 3vw, 29px);
	font-weight: 900;
	line-height: 1.5;
	text-shadow: 0 1px 1px #000, 0 0 2px rgba(255, 255, 255, 0.28);
}

.bestnine-message__sub {
	padding: 6px clamp(15px, 3vw, 28px) clamp(20px, 3vw, 28px);
	color: #f5f7fb;
	font-size: clamp(14px, 2.1vw, 20px);
	font-weight: 800;
	line-height: 1.65;
	text-shadow: 0 1px 1px #000;
}

.bestnine-board {
	padding: clamp(22px, 4vw, 38px) clamp(16px, 4vw, 38px) clamp(24px, 4vw, 38px);
	border: 2px solid #7f8b98;
	background-color: #020812;
	background-image:
		radial-gradient(circle, rgba(255, 216, 77, 0.075) 0 0.55px, transparent 0.75px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.15));
	background-size: 3px 3px, 100% 100%;
	box-shadow: 0 0 0 2px #152132, 0 0 0 5px #aab2ba, 0 18px 36px rgba(0, 0, 0, 0.46), inset 0 0 28px rgba(0, 0, 0, 0.76);
	clip-path: none;
}

.bestnine-board::before {
	inset: 8px;
	border-color: rgba(255, 216, 77, 0.24);
	background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.13) 4px 5px);
}

.bestnine-date {
	position: relative;
	z-index: 2;
	color: #ffda32;
	text-shadow: 0 2px 0 #6b3b00, 0 0 3px rgba(255, 166, 0, 0.32);
}

.bestnine-shop {
	position: relative;
	z-index: 2;
	text-shadow: 0 1px 1px #000;
}

@media (max-width: 600px) {
	.bestnine-message,
	.bestnine-board {
		clip-path: none;
	}

	.bestnine-message__lead {
		padding: 18px 13px 5px;
		font-size: clamp(17px, 5vw, 21px);
	}

	.bestnine-message__sub {
		padding: 5px 13px 18px;
	}
}

/* Final hero/message/date refinements */
.bestnine-logo img {
	width: min(100%, 950px);
}

.bestnine-message {
	display: block;
	margin: 0 auto clamp(27px, 4vw, 45px);
	padding: 0 clamp(7px, 2vw, 18px);
	border: 0;
	background: none;
	box-shadow: none;
	clip-path: none;
	color: #fff;
	font-family: "M PLUS 1p", "Hiragino Sans", Meiryo, sans-serif;
	font-size: clamp(17px, 2.4vw, 24px);
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: 0.02em;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.78);
}

.bestnine-message::before,
.bestnine-message::after {
	display: none;
}

.bestnine-board {
	padding: clamp(24px, 4vw, 42px) clamp(16px, 4vw, 40px) clamp(26px, 4vw, 40px);
	border: 3px solid #728092;
	background-color: #01060d;
	background-image:
		radial-gradient(circle, rgba(255, 218, 50, 0.09) 0 0.45px, transparent 0.7px),
		repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.18) 4px 5px),
		linear-gradient(180deg, #06111e, #01050b);
	background-size: 3px 3px, 100% 100%, 100% 100%;
	box-shadow:
		0 0 0 2px #101c29,
		0 0 0 6px #aeb6bf,
		0 0 0 8px #273545,
		0 18px 38px rgba(0, 0, 0, 0.5),
		inset 0 0 34px rgba(0, 0, 0, 0.92);
}

.bestnine-board::before {
	inset: 9px;
	z-index: 1;
	border: 1px solid rgba(255, 214, 65, 0.31);
	background: linear-gradient(90deg, rgba(255, 211, 57, 0.04), transparent 20%, transparent 80%, rgba(255, 211, 57, 0.04));
}

.bestnine-board::after {
	position: absolute;
	inset: 5px;
	z-index: 1;
	content: "";
	background:
		radial-gradient(circle at 5px 5px, #d6dde4 0 1.5px, #354352 1.7px 3px, transparent 3.2px),
		radial-gradient(circle at calc(100% - 5px) 5px, #d6dde4 0 1.5px, #354352 1.7px 3px, transparent 3.2px),
		radial-gradient(circle at 5px calc(100% - 5px), #d6dde4 0 1.5px, #354352 1.7px 3px, transparent 3.2px),
		radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #d6dde4 0 1.5px, #354352 1.7px 3px, transparent 3.2px);
	pointer-events: none;
}

.bestnine-date,
.bestnine-shop {
	position: relative;
	z-index: 2;
}

.bestnine-date time {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
}

.bestnine-date__weekday {
	display: inline-block;
	margin-left: -0.2em;
}

.bestnine-date {
	color: #ffdc37;
	font-weight: 900;
	text-shadow: 0 2px 0 #684000, 0 0 2px rgba(255, 226, 96, 0.78), 0 0 6px rgba(255, 153, 0, 0.28);
}

.bestnine-shop {
	display: block;
	color: #fff;
	text-shadow: 0 1px 0 #000, 0 0 2px rgba(255, 255, 255, 0.7), 0 0 5px rgba(48, 136, 255, 0.3);
}

@media (max-width: 600px) {
	.bestnine-hero {
		padding-right: 5px;
		padding-left: 5px;
	}

	.bestnine-logo img {
		width: 100%;
	}

	.bestnine-message {
		padding: 0 5px;
		font-size: clamp(15px, 4.35vw, 18px);
		line-height: 1.65;
	}
}

/* Logo width, editorial caption and stadium date display */
.bestnine-logo img {
	width: 100%;
	max-width: none;
}

.bestnine-message {
	position: relative;
	width: fit-content;
	max-width: 100%;
	padding: clamp(17px, 2.4vw, 23px) clamp(13px, 3vw, 32px);
	color: #fff;
	font-size: clamp(17px, 2.4vw, 24px);
	line-height: 1.65;
	letter-spacing: 0.035em;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.98), 0 0 7px rgba(0, 0, 0, 0.82);
}

.bestnine-message::before,
.bestnine-message::after {
	position: absolute;
	left: 50%;
	display: block;
	width: min(82%, 660px);
	height: 2px;
	content: "";
	background: linear-gradient(90deg, transparent, var(--bestnine-red) 18%, var(--bestnine-gold) 50%, var(--bestnine-red) 82%, transparent);
	transform: translateX(-50%);
	box-shadow: 0 0 5px rgba(255, 198, 45, 0.34);
}

.bestnine-message::before {
	top: 0;
	inset-block-end: auto;
}

.bestnine-message::after {
	top: auto;
	bottom: 0;
	inset-block-start: auto;
}

.bestnine-date {
	font-size: 1rem;
	letter-spacing: 0;
	white-space: nowrap;
	text-shadow: none;
}

.bestnine-date time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 2vw, 22px);
}

.bestnine-date__numbers {
	display: inline-block;
	color: #ffdb32;
	font-family: Anton, Impact, "Arial Narrow", sans-serif;
	font-size: clamp(76px, 13vw, 136px);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0.035em;
	text-shadow: 0 3px 0 #6a3e00, 0 0 3px rgba(255, 229, 94, 0.8), 0 0 7px rgba(255, 145, 0, 0.3);
}

.bestnine-date__weekday {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	padding: 0.3em 0.38em;
	border-top: 1px solid rgba(255, 218, 50, 0.42);
	border-bottom: 1px solid rgba(255, 218, 50, 0.42);
	background: rgba(181, 12, 27, 0.2);
	color: #fff;
	font-family: "M PLUS 1p", "Hiragino Sans", Meiryo, sans-serif;
	font-size: clamp(25px, 4vw, 44px);
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
	.bestnine-message {
		padding: 15px 6px;
		font-size: clamp(15px, 4.25vw, 18px);
		letter-spacing: 0;
	}

	.bestnine-date__numbers {
		font-size: clamp(61px, 19vw, 78px);
	}

	.bestnine-date__weekday {
		font-size: clamp(20px, 6.4vw, 27px);
	}
}

@media (max-width: 340px) {
	.bestnine-date time {
		gap: 5px;
	}

	.bestnine-date__numbers {
		font-size: 57px;
	}

	.bestnine-date__weekday {
		font-size: 19px;
	}
}

/* Stacked stadium date and large editorial copy */
.bestnine-shop {
	font-size: clamp(24px, 3.3vw, 38px);
}

.bestnine-copy {
	width: min(100%, 950px);
	margin: 0 auto clamp(30px, 8vw, 60px);
	padding: 10px 7px;
	color: #fff;
	font-size: clamp(1.1rem, 3.5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.55;
	text-align: center;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.95);
	filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.72));
}

.bestnine-date time {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: clamp(10px, 1.8vw, 18px);
}

.bestnine-date__numbers {
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-size: clamp(112px, 18vw, 188px);
	line-height: 0.78;
	letter-spacing: 0.025em;
}

.bestnine-date__digit {
	display: inline-block;
	min-width: 0.48em;
	text-align: center;
}

.bestnine-date__digit:nth-child(3) {
	min-width: 0.25em;
}

.bestnine-date__weekday {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: clamp(31px, 4.8vw, 54px);
	line-height: 1;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 1px #000, 0 0 3px rgba(255, 255, 255, 0.7);
}

.bestnine-date::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -28%;
	z-index: 3;
	width: 22%;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(255, 246, 180, 0.34), transparent);
	opacity: 0;
	transform: skewX(-12deg);
	pointer-events: none;
}

.is-scoreboard-energizing .bestnine-date__digit {
	animation: bestnine-led-digit-ignite 640ms steps(3, end) both;
	animation-delay: calc(var(--bestnine-digit-index) * 65ms);
}

.is-scoreboard-energizing .bestnine-date__weekday {
	animation: bestnine-led-weekday-ignite 380ms steps(2, end) 360ms both;
}

.is-scoreboard-energizing .bestnine-date::after {
	animation: bestnine-led-date-scan 760ms ease-out 120ms both;
}

@keyframes bestnine-led-digit-ignite {
	0% { opacity: 0.12; color: #604d12; filter: brightness(0.4); transform: translateY(4px); }
	32% { opacity: 1; color: #fff5b0; filter: brightness(1.65); }
	58% { opacity: 0.62; color: #c09b21; filter: brightness(0.8); }
	100% { opacity: 1; color: #ffdb32; filter: brightness(1); transform: translateY(0); }
}

@keyframes bestnine-led-weekday-ignite {
	0% { opacity: 0; filter: brightness(0.35); }
	55% { opacity: 1; filter: brightness(1.4); }
	100% { opacity: 1; filter: brightness(1); }
}

@keyframes bestnine-led-date-scan {
	0% { left: -28%; opacity: 0; }
	20% { opacity: 1; }
	100% { left: 106%; opacity: 0; }
}

@media (max-width: 600px) {
	.bestnine-shop {
		font-size: clamp(22px, 6.4vw, 27px);
	}

	.bestnine-copy {
		font-size: clamp(1.1rem, 5.5vw, 1.4rem);
	}

	.bestnine-date__numbers {
		font-size: clamp(91px, 28vw, 112px);
	}

	.bestnine-date__weekday {
		font-size: clamp(27px, 8vw, 34px);
	}
}

@media (max-width: 340px) {
	.bestnine-date__numbers {
		font-size: 84px;
	}

	.bestnine-date__weekday {
		font-size: 25px;
	}
}

/* Store name matches the weekday LED styling */
.bestnine-shop {
	color: #ffdb32;
	font-size: clamp(31px, 4.8vw, 54px);
	text-shadow: 0 2px 0 #684000, 0 0 3px rgba(255, 226, 96, 0.72), 0 0 6px rgba(255, 153, 0, 0.26);
}

@media (max-width: 600px) {
	.bestnine-shop {
		font-size: clamp(27px, 8vw, 34px);
	}
}

@media (max-width: 340px) {
	.bestnine-shop {
		font-size: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-scoreboard-energizing .bestnine-date__digit,
	.is-scoreboard-energizing .bestnine-date__weekday,
	.is-scoreboard-energizing .bestnine-date::after {
		animation: none;
	}
}

/* 2026-09-02: night-game dome atmosphere and viewport reveal */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	background: #000;
}

body::before {
	--bestnine-bg-y: -520px;
	position: absolute;
	inset: -36px 0;
	background-image:
		radial-gradient(circle, rgba(0, 0, 0, 0.48) 0 1px, transparent 1.35px),
		url("../img/back.jpg");
	background-color: #000;
	background-position: 0 0, 36% var(--bestnine-bg-y);
	background-repeat: repeat, no-repeat;
	background-size: 4px 4px, max(145vw, 1900px) auto;
	background-blend-mode: normal;
	filter: saturate(0.92) brightness(0.72) contrast(1.08);
	transform: translateZ(0);
	transform-origin: center top;
	will-change: background-position;
	animation: bestnine-audience-pan 32s ease-in-out infinite alternate;
}

body::after {
	display: none;
}

.bestnine-camera-flashes {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: min(100vh, 920px);
	overflow: hidden;
	pointer-events: none;
}

.bestnine-camera-flash {
	position: absolute;
	top: var(--flash-y);
	left: var(--flash-x);
	width: var(--flash-size);
	height: var(--flash-size);
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 3px 1px rgba(255, 255, 255, 0.95),
		0 0 8px 3px rgba(205, 230, 255, 0.75),
		0 0 15px 5px rgba(126, 187, 255, 0.28);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.35);
	animation: bestnine-camera-flash var(--flash-duration) steps(1, end) var(--flash-delay) infinite;
}

@keyframes bestnine-camera-flash {
	0%, 87%, 90%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
	87.4% { opacity: 1; transform: translate(-50%, -50%) scale(1.45); }
	88% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.8); }
	88.5% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
	89.2% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

.bestnine-hero::before {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.28)),
		linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 2, 8, 0.16) 66%, rgba(0, 0, 0, 0.4));
	background-position: 0 0, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 100% 100%;
	opacity: 1;
}

.bestnine-hero::after {
	display: none;
}

.bestnine-atmosphere {
	display: none;
	background:
		radial-gradient(ellipse at 50% 12%, rgba(218, 236, 255, 0.24), rgba(117, 176, 234, 0.08) 22%, transparent 48%),
		radial-gradient(ellipse at 50% 43%, rgba(197, 224, 255, 0.1), transparent 34%),
		radial-gradient(ellipse at 50% 70%, rgba(222, 237, 255, 0.08), transparent 36%);
	filter: brightness(1);
	transition: filter 1.3s ease-out;
}

.bestnine-atmosphere::before,
.bestnine-atmosphere::after {
	position: absolute;
	top: -8%;
	width: 42%;
	height: 72%;
	content: "";
	background: linear-gradient(180deg, rgba(224, 239, 255, 0.28), rgba(142, 190, 238, 0.1) 42%, transparent 88%);
	clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
	filter: blur(11px);
	transform-origin: 50% 0;
	will-change: transform, opacity;
}

.bestnine-atmosphere::before {
	left: -5%;
	transform: rotate(-8deg) translate3d(0, 0, 0);
	filter: blur(17px);
	animation: bestnine-cinematic-light-left 15s ease-in-out infinite alternate;
}

.bestnine-atmosphere::after {
	right: -5%;
	transform: rotate(8deg) translate3d(0, 0, 0);
	filter: blur(17px);
	animation: bestnine-cinematic-light-right 17s ease-in-out infinite alternate;
}

.bestnine-hero.is-lineup-lighting .bestnine-atmosphere {
	filter: brightness(1.18);
}

.bestnine-copy {
	background: radial-gradient(ellipse at center, rgba(0, 3, 10, 0.76), rgba(1, 8, 19, 0.48) 48%, transparent 78%);
}

/* 表が画面内へ入った時に、従来の各行スキャンを順番に再生する。 */
.js.is-bestnine-booting .bestnine-lineup,
.js.is-bestnine-booting .bestnine-lineup-item,
.js.is-bestnine-booting .bestnine-lineup-item::after {
	animation: none;
}

.js .bestnine-lineup.is-lineup-pending,
.js .bestnine-lineup.is-lineup-visible {
	opacity: 1;
	transform: none;
	transition: none;
}

.js .bestnine-lineup.is-lineup-pending .bestnine-lineup-item {
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item {
	animation: bestnine-row-on 360ms ease-out both;
}

.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item::after {
	animation: bestnine-row-scan 360ms ease-out both;
}

.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(1),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(1)::after { animation-delay: 0ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(2),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(2)::after { animation-delay: 70ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(3),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(3)::after { animation-delay: 140ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(4),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(4)::after { animation-delay: 210ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(5),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(5)::after { animation-delay: 280ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(6),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(6)::after { animation-delay: 350ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(7),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(7)::after { animation-delay: 420ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(8),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(8)::after { animation-delay: 490ms; }
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(9),
.js .bestnine-lineup.is-lineup-visible .bestnine-lineup-item:nth-child(9)::after { animation-delay: 560ms; }

@keyframes bestnine-audience-pan {
	0% { background-position: 0 0, 36% var(--bestnine-bg-y); }
	100% { background-position: 0 0, 64% var(--bestnine-bg-y); }
}

@keyframes bestnine-spotlight-left {
	0% { opacity: 0.58; transform: rotate(-9deg) translate3d(-8px, 0, 0); }
	100% { opacity: 0.82; transform: rotate(-6deg) translate3d(12px, 5px, 0); }
}

@keyframes bestnine-spotlight-right {
	0% { opacity: 0.56; transform: rotate(9deg) translate3d(8px, 0, 0); }
	100% { opacity: 0.8; transform: rotate(6deg) translate3d(-12px, 5px, 0); }
}

@media (max-width: 600px) {
	body::before {
		--bestnine-bg-y: -700px;
		background-position: 0 0, 42% var(--bestnine-bg-y);
		background-size: 3px 3px, auto max(205vh, 1840px);
		filter: saturate(0.94) brightness(0.74) contrast(1.06);
	}

	.bestnine-hero::before {
		background-size: 100% 100%, 100% 100%;
	}

	.bestnine-camera-flashes {
		height: 760px;
	}
}

@media (min-width: 601px) {
	body::before {
		background-size: 4px 4px, max(145vw, 1900px) auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.bestnine-hero::after,
	.bestnine-atmosphere::before,
	.bestnine-atmosphere::after {
		animation: none;
	}

	.bestnine-camera-flashes {
		display: none;
	}

	body::before {
		background-position: 0 0, 50% var(--bestnine-bg-y);
		transform: none;
		will-change: auto;
	}

	.js .bestnine-lineup.is-lineup-pending,
	.js .bestnine-lineup.is-lineup-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}