@charset "UTF-8";

body { background: #333333; color: #FFFFFF; }
a { color: #FFFFFF; text-decoration: underline; }
a:hover { text-decoration: none; }
button { padding: 2px 4px; border: 1px solid #999999; background: #EEEEEE; border-radius: 4px; color: #333333; }
button:hover { background: #DDDDDD; }
button:disabled { opacity: 0.5; }
input[type="text"], select { padding: 2px 4px; border: 1px solid #999999; background: #FFFFFF; border-radius: 4px; color: #333333; }
#page-wrapper { width: 960px; max-width: 100%; margin: 0 auto; background: #331144; }

header { padding: 32px; background: #248899; }
header h1 { margin-bottom: 16px; font-size: 200%; text-align: center; word-break: keep-all; }
header p { margin: 4px auto 0; display: table; }
noscript p { padding: 24px 32px; background: #F5CCCC; color: #CC0000; }
#exacta-card-wrapper { width: 100%; }
#exacta-card { width: 100%; background: url("./transparent.png") center center repeat; background-size: 16px 16px; display: block; }

#exacta-editor { padding: 32px; position: relative; }
#exacta-input-field { display: grid; grid-template-rows: repeat(2, 1fr); grid-auto-flow: column; column-gap: 16px; }
#exacta-rank-button-field { margin-block: 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
#exacta-rank-button-field button { width: 100%; }
#exacta-controller { height: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.message-overray { padding: 8px 16px; top: 50%; left: 50%; border: 1px solid #004488; background: #FFFFFF; position: fixed; z-index: 3; translate: -50% -50%; font-size: 150%; font-weight: bold; color: #333333; white-space: nowrap; }

#video-entry-form { width: 640px; max-width: 100%; top: -32px; left: 50%; padding: 32px; border-radius: 16px; background: #FFFFFF; display: none; position: absolute; z-index: 2; translate: -50% 0; box-shadow: 0 0 4px #CCCCCC; color: #333333; }
#video-entry-form:not(.is-free-fill-mode) :is(label[for="video-title-input"], #video-title-input) { display: none; }
#video-entry-form.is-free-fill-mode :is(#video-information-get-button, #period-check, #obtained-video-information) { display: none; }
#video-entry-form h2 { margin-bottom: 24px; font-size: 150%; text-align: center; }
#video-entry-mode-select { margin: 16px auto; display: table; }
#video-information-input-field { margin-block: 16px; display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
#video-information-get-button { grid-column: 1 / 3; }

#period-check {
	padding: 4px; margin-block: 16px; background: #999999; font-weight: bold; text-align: center; color: #FFFFFF;
	&.is-out-period { background: var(--mimasenka-light-brown); color: var(--mimasenka-brown); }
	&.is-in-period { background: var(--mimasenka-green); }
}

#obtained-video-information { display: flex; gap: 16px; }
#obtained-video-thumbnail { width: 160px; height: 120px; background: #333333; display: block; object-fit: contain; }
#obtained-video-details { flex: 1; border: 1px solid #004488; align-self: flex-start; }
#obtained-video-details th { width: 96px; padding: 2px 4px; background: #004488; color: #FFFFFF; }
#obtained-video-details td { padding: 2px 4px; border: 1px solid #004488; }
#video-entry-form-button-field { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.page-section {
	padding: 32px; border-top: 1px solid #FFFFFF;
	h2 { margin: 0 auto 24px; padding: 8px 16px; background: #248899; display: table; font-size: 150%; }
	p { margin-block: 8px; }
	.twitter-tweet { margin: 16px auto 0 !important; display: table; }
	dd + dt { margin-top: 16px; }
	dd { margin-top: 8px; }
}

#links ul { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#links img { width: 200px; height: 40px; }
footer { padding: 32px; background: #248899; text-align: center; }
footer ul { margin-bottom: 16px; }

@media (width <= 640px) {
	#exacta-card-wrapper { overflow-x: scroll; }
	#exacta-card { min-width: 640px; }
	#exacta-editor { padding-inline: 16px; }
	#exacta-rank-button-field { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; }
	#obtained-video-information { flex-direction: column; }
	#obtained-video-thumbnail { align-self: center; }
	#obtained-video-details { align-self: normal; }
}