page-play {
	display: grid;
	grid-template-rows: 10vh 1fr;
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--u-sm);
	gap: var(--u-sm);
	background-color: #333;
	box-sizing: border-box;
}

page-play > element-enhance {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	z-index: 6;
	background-color: #100;
}

page-play > element-enhance > button.icon-fill {
	font-size: 2rem;
	background-color: transparent;
}

page-play > element-enhance > a.logo {
	height: 100%;
	width: auto;
	aspect-ratio: 1;
	background-image: url(./logo.svg);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

page-play > element-enhance > div {
	cursor: pointer;
	width: 10%;
	height: var(--u-sm);
	border-radius: var(--u-lg);
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: white;
	gap: 0.4vw;
	background-color: #222;
}

page-play > element-enhance > i.close {
	height: 100%;
	width: auto;
	font-size: 2.5rem;
	color: white;
	aspect-ratio: 1;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(./SSEOL_But_X.svg);
	background-size: 30%;
}

page-play > element-enhance > output-i18n {
	color: white;
	word-break: keep-all;
}

page-play > element-enhance > output-i18n.invisible {
	color: transparent;
}

page-play > template-enhance {
	position: fixed;
	top: -40vh;
	left: 0;
	right: 0;
	transition: transform var(--transition-time);
	background-color: #222;
	font-size: 1.5rem;
	z-index: 5;
	transform: none;
	color: white;
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	grid-template-rows: max-content;
}

page-play > template-enhance.on {
	transform: translateY(50vh);
}

page-play > template-enhance > span.title {
	grid-row: 1;
	grid-column: 2;
	display: flex;
	justify-content: center;
	font-size: max(10px, 1.6vmin);
	padding: var(--u-2xs) 0;
}

page-play > template-enhance > i {
	width: 10vh;
	font-size: 3rem;
}

page-play > template-enhance > i.scrollLeft {
	background-image: url(./SSEOL_But_Previous.svg);
	grid-row: 1;
	grid-column: 1;
}

page-play > template-enhance > i.scrollRight {
	background-image: url(./SSEOL_But_Next.svg);
	grid-row: 1;
	grid-column: 3;
}

page-play > template-enhance > i.scrollLeft,
page-play > template-enhance > i.scrollRight {
	opacity: 0.5;
	cursor: auto;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
}

page-play > template-enhance > i.scrollLeft.on,
page-play > template-enhance > i.scrollRight.on {
	opacity: 1;
	cursor: pointer;
}

page-play > template-enhance > section {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	justify-content: flex-start;
	align-items: stretch;
	overflow-x: scroll;
	padding: var(--u-xs) 0;
	padding-top: var(--u)
}

page-play > template-enhance > section {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1rem;
}

page-play > template-enhance > section > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	opacity: 0.5;
	gap: 1rem;
	cursor: pointer;
	word-break: break-all;
	font-size: 1.5vmin;
}

/* I know this is stupid */
/* Let's change this when CSS 4 Selector is implemented in the future */
page-play > template-enhance[data-index="1"] div:nth-of-type(1),
page-play > template-enhance[data-index="2"] div:nth-of-type(2),
page-play > template-enhance[data-index="3"] div:nth-of-type(3),
page-play > template-enhance[data-index="4"] div:nth-of-type(4),
page-play > template-enhance[data-index="5"] div:nth-of-type(5),
page-play > template-enhance[data-index="6"] div:nth-of-type(6),
page-play > template-enhance[data-index="7"] div:nth-of-type(7),
page-play > template-enhance[data-index="8"] div:nth-of-type(8),
page-play > template-enhance[data-index="9"] div:nth-of-type(9),
page-play > template-enhance[data-index="10"] div:nth-of-type(10),
page-play > template-enhance[data-index="11"] div:nth-of-type(11),
page-play > template-enhance[data-index="12"] div:nth-of-type(12),
page-play > template-enhance[data-index="13"] div:nth-of-type(13),
page-play > template-enhance[data-index="14"] div:nth-of-type(14),
page-play > template-enhance[data-index="15"] div:nth-of-type(15),
page-play > template-enhance[data-index="16"] div:nth-of-type(16),
page-play > template-enhance[data-index="17"] div:nth-of-type(17),
page-play > template-enhance[data-index="18"] div:nth-of-type(18),
page-play > template-enhance[data-index="19"] div:nth-of-type(19),
page-play > template-enhance[data-index="20"] div:nth-of-type(20),
page-play > template-enhance[data-index="21"] div:nth-of-type(21),
page-play > template-enhance[data-index="22"] div:nth-of-type(22),
page-play > template-enhance[data-index="23"] div:nth-of-type(23),
page-play > template-enhance[data-index="24"] div:nth-of-type(24),
page-play > template-enhance[data-index="25"] div:nth-of-type(25),
page-play > template-enhance[data-index="26"] div:nth-of-type(26),
page-play > template-enhance[data-index="27"] div:nth-of-type(27),
page-play > template-enhance[data-index="28"] div:nth-of-type(28),
page-play > template-enhance[data-index="29"] div:nth-of-type(29),
page-play > template-enhance[data-index="30"] div:nth-of-type(30),
page-play > template-enhance[data-index="31"] div:nth-of-type(31),
page-play > template-enhance[data-index="32"] div:nth-of-type(32),
page-play > template-enhance[data-index="33"] div:nth-of-type(33),
page-play > template-enhance[data-index="34"] div:nth-of-type(34),
page-play > template-enhance[data-index="35"] div:nth-of-type(35),
page-play > template-enhance[data-index="36"] div:nth-of-type(36),
page-play > template-enhance[data-index="37"] div:nth-of-type(37),
page-play > template-enhance[data-index="38"] div:nth-of-type(38),
page-play > template-enhance[data-index="39"] div:nth-of-type(39),
page-play > template-enhance[data-index="40"] div:nth-of-type(40) {
	opacity: 1;
	color: orange;
}

page-play > template-enhance > section > div:hover {
	opacity: 1;
	color: orange;
}

page-play > template-enhance > section > div > img {
	height: 15vh;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
}

page-play.wide > template-enhance > section > div > img {
	width: 26.6667vh;
	height: auto;
	object-fit: contain;
	aspect-ratio: 16 / 9;
	background-color: #999;
}

page-play > template-enhance > section > div > span {
	width: 100%;
	word-break: break-all;
	justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

page-play > main {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--transition-time);
	transition-delay: var(--transition-time);
}

page-play.inited > main {
	opacity: 1;
}

page-play > main > i.prev,
page-play > main > i.next {
	flex-grow: 1;
	height: 100%;
	width: fit-content;
	min-width: 80px;
	font-size: 6rem;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
}

page-play > main > i.next {
	background-image: url(./SSEOL_But_Next.svg);
}

page-play > main > i.prev {
	opacity: 0.5;
	cursor: auto;
	background-image: url(./SSEOL_But_Previous.svg);
}

page-play > main > i.prev.on {
	opacity: 1;
	cursor: pointer;
}

page-play > main > div {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: auto;
	border-radius: var(--border-radius);
	overflow: hidden;
}

page-play > footer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--u);
	transition: transform var(--transition-time);
	transform: translateX(150vw);
}

page-play > footer.on {
	transform: none;
}

page-play > footer > div {
	font-size: 2rem;
	gap: 0;
    display: flex;
}

page-play > footer > div > output-i18n:first-of-type {
	padding-right: var(--u-4xs);
}

page-play > footer[data-next="in-class"] > div:nth-of-type(2) {
	display: none;
}

page-play > footer > footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

page-play > footer > footer > button.stay.link {
	color: var(--color-blue);
}