@import url('style.css');
:root {
	--pixel-border-clip-path-outer: polygon(0px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 4px), 4px calc(100% - 2px), 6px calc(100% - 2px), 6px 100%, calc(100% - 6px) 100%, calc(100% - 6px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 6px, calc(100% - 2px) 6px, calc(100% - 2px) 4px, calc(100% - 4px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 0px, 6px 0px, 6px 2px, 4px 2px, 2px 4px, 2px 6px, 0px 6px);
	--pixel-border-clip-path-border: polygon(0px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 4px), 4px calc(100% - 2px), 6px calc(100% - 2px), 6px 100%, calc(100% - 6px) 100%, calc(100% - 6px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 6px), 100% calc(100% - 6px), 100% 6px, calc(100% - 2px) 6px, calc(100% - 2px) 4px, calc(100% - 4px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 0px, 6px 0px, 6px 2px, 4px 2px, 2px 4px, 2px 6px, 0px 6px, 0px 50%, 2px 50%, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px 50%, 0px 50%);
}
* {
    box-sizing: border-box;
}
body.subs-page {
    height: auto;
    min-height: 100vh;
}
#subs-main-container {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1400px;
    margin: 2rem auto;
    gap: 2rem;
    align-items: flex-start;
}
#subs-main-container > .pixel-border-wrapper:first-child {
    flex: 0 1 calc(30% - 1rem);
    position: sticky;
    top: 2rem;
}
#subs-main-container > .pixel-border-wrapper:nth-child(2) {
    flex: 0 1 calc(70% - 1rem);
}
#episode-list-container {
    max-height: 90vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.85); 
    padding: 1rem;
    backdrop-filter: blur(5px);
}
#content-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1.5rem;
    backdrop-filter: blur(5px);
}
.pixel-border-wrapper {
	position: relative;
	padding-bottom: 3px;
	padding-right: 3px;
}
.pixel-border-shadow {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; 
	background: var(--moe-tint5);
	transform: translate(3px, 3px);
	clip-path: var(--pixel-border-clip-path-outer);
}
.pixel-border-item {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2; 
	clip-path: var(--pixel-border-clip-path-outer);
}
.pixel-border-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: var(--moe-shade-max1);
	clip-path: var(--pixel-border-clip-path-border);
	pointer-events: none;
}
#content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.header-title { flex-grow: 1; }
#content-header h1 { font-size: 24pt; margin: 0; font-weight: 700; }
#content-header h3 { font-size: 14pt; margin: 0; font-weight: 400; color: var(--moe-shade-max1); }
.header-like { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.like-button { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease-in-out; }
.like-button:hover:not(:disabled) { transform: scale(1.1); }
.like-button:disabled { cursor: not-allowed; filter: grayscale(80%); }
.like-button img { width: 45px; height: 45px; }
.like-count { font-weight: bold; font-family: 'Space Mono', monospace; color: var(--moe); font-size: 1.2em; min-width: 2ch; text-align: center; }
#episode-list-container h4 {
    margin: 0 0 1rem 0;
    font-size: 14pt;
    font-weight: 700;
    border-bottom: 2px solid var(--moe-tint5);
    padding-bottom: 0.5rem;
}
#episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
.episode-item { position: relative; text-align: center; border: 3px solid var(--moe-tint5); background: white; padding-bottom: 5px; transition: all 0.2s ease-in-out; }
.episode-item:hover { border-color: var(--moe); transform: scale(1.05); }
.episode-item.active { border: 3px solid var(--moe-shade-max2); box-shadow: 0 0 10px var(--moe-tint1); }
.episode-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.episode-item span { font-size: 10pt; font-weight: 700; margin: 5px; display: block; }
.new-label { position: absolute; top: -1px; right: -1px; background-color: #ff4757; color: white; padding: 2px 6px; font-size: 9pt; font-weight: 700; border-radius: 0 0 0 5px; z-index: 2; line-height: 1.2; }
.episode-item.is-new { border-color: #ff4757; box-shadow: 0 0 9px 3px #ff4757; }
.episode-item.is-new.active { box-shadow: 0 0 10px var(--moe-tint1); }
#content-thumbnails .main-thumb { width: 100%; }
#content-thumbnails .small-thumbs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
#content-thumbnails .small-thumbs-grid.three-items { grid-template-columns: 1fr 1fr 1fr; }
.small-thumbs-grid img { width: 100%; cursor: pointer; }
.content-section { text-align: justify; }
.content-section h4 { margin: 0 0 1rem 0; border-bottom: 2px solid var(--moe-tint5); padding-bottom: 0.5rem; font-size: 14pt; font-weight: 700; }
#content-synopsis p { margin: 1rem 0 0 0; line-height: 1.6; font-size: 11pt; }
.info-list, .skits-list, .song-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.info-list li, .skits-list li, .song-list li { display: flex; align-items: center; gap: 10px; font-size: 11pt; }
.info-list .info-label { font-weight: 700; flex-basis: 160px; flex-shrink: 0; display: flex; align-items: center; }
.l-tv::before, .l-sk::before, .l-cd::before, .l-dt::before, .l-us::before, .l-se::before, .l-ar::before { content: ""; display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; margin-right: 8px; vertical-align: middle; }
.l-tv::before {  background-image: url('../sprite/element/tv.svg');}
.l-sk::before {  background-image: url('../sprite/element/tanjakan.svg');}
.l-cd::before {  background-image: url('../sprite/element/cd.svg');}
.l-dt::before {  background-image: url('../sprite/element/calendar.svg');}
.l-us::before {  background-image: url('../sprite/element/user.svg');}
.l-se::before {  background-image: url('../sprite/element/senpai.svg');}
.l-ar::before {  background-image: url('../sprite/element/artist.svg');}
.l-cp::before { content: ""; display: inline-block; width: 25px; height: 25px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; background-image: url('../sprite/element/copy.svg');}
.info-list .info-value a { text-decoration: none; font-weight: 400; }
.info-list .info-value a:hover { color: var(--moe-shade-max2); }
.song-list li { justify-content: space-between; }
#content-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
#content-buttons .full-width { grid-column: span 2; }
#content-buttons .dl-button-wrapper { display: block; }
#content-buttons .dl-button-wrapper .pixel-border-item { background-color: transparent; }
#content-buttons .dl-button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; text-decoration: none; font-weight: 700; font-size: 11pt; text-align: center; width: 100%; height: 100%; margin: 0; border: none; }
#content-buttons .dl-button-wrapper .pixel-border-item::after { background: var(--border-color, var(--moe-shade-max1)); }
.btn-sub { background-color: var(--moe); color: white; } .btn-sub:hover { background-color: white; color: var(--moe); }
.btn-trakteer { background-color: #961234; color: white; } .btn-trakteer:hover { background-color: white; color: #961234; }
.btn-extra { background-color: var(--moe-tint4); color: var(--moe-shade-min2); } .btn-extra:hover { background-color: white; color: var(--moe-tint4); }
.song-list .yt-button-wrapper { position: relative; }
.song-list .yt-button-wrapper .pixel-border-item { background-color: transparent; }
.song-list .Youtube-btn { border: none; color: var(--moe); height: 100%; width: 100%; background: none; cursor: pointer; padding: 4px 8px; }
.song-list .yt-button-wrapper .pixel-border-item:hover { background: var(--moe); }
.song-list .yt-button-wrapper .pixel-border-item:hover .Youtube-btn { color: white; }
.song-list .yt-button-wrapper .pixel-border-item::after { background: var(--moe); }
#password-section { margin-top: 1rem; }
#password-section .pixel-border-item { padding: 1rem; background-color: var(--moe-tint7); text-align: center; }
#password-box { display: flex; justify-content: center; align-items: center; gap: 10px; }
#password-display { background: white; padding: 8px 12px; border: 2px solid var(--moe-tint4); font-family: 'Space Mono', monospace; color: var(--moe); text-align: center; letter-spacing: 2px; flex-grow: 1; min-width: 0; width: 100pt; height: 35pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#password-box button { height: 35pt; padding: 8px 12px; border: 2px solid var(--moe-tint2); background-color: var(--moe-tint4); color: white; cursor: pointer; font-family: 'Space Mono', monospace; font-weight: 700; }
#password-box button:hover { background-color: white; color: var(--moe); }
#popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 1000; }
#popup-box { background: var(--moe-tint7); color: var(--moe); padding: 2rem; text-align: center; border: 5px solid var(--moe); }
#popup-box h2 { margin-top: 0; }
#popup-redirect-btn { background-color: var(--moe); color: white; border: 2px solid var(--moe); padding: 10px 20px; font-size: 12pt; cursor: pointer; }
#popup-redirect-btn:hover { background-color: white; color: var(--moe); }
#image-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
#image-popup-overlay.visible { opacity: 1; visibility: visible; }
#popup-image { max-width: 90%; max-height: 90vh; object-fit: contain; cursor: default; }
#faq-container-wrapper {
    width: 90%;
    max-width: 1400px;
}
#faq-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--moe-tint7);
    padding: 17pt 0pt;
    align-items: center;
}
div#faq-warning,
div#faq-softsub,
div#faq-hardsub,
div#faq-main {
    width: 95%;
}
.faq-item .pixel-border-item { display: flex; flex-direction: column; }
.faq-header { padding: 0.8rem 1.2rem; font-weight: 700; font-size: 1.2em; cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; transition: filter 0.2s ease; }
.faq-header:hover { filter: brightness(1.1); }
.faq-header.no-dropdown { cursor: default; }
.faq-header.no-dropdown:hover { filter: none; }
.faq-header::after { content: '▼'; font-size: 0.8em; transition: transform 0.3s ease; }
.faq-header.no-dropdown::after { content: ''; }
.faq-header.active::after { transform: rotate(180deg); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease; padding: 0 1.5rem; }
.faq-content.visible { padding: 1rem 1.5rem 1.5rem; max-height: 1000px; }
.faq-content ul, .faq-content ol { margin: 0; padding-left: 25px; display: flex; flex-direction: column; gap: 0.8rem; line-height: 1.6; }
#faq-warning .pixel-border-item {
    background-color: #d32f2f;
}
#faq-warning .faq-header, #faq-warning .faq-content { color: yellow; }
#faq-warning ul { list-style-type: none; padding-left: 0; }
#faq-warning li::before { content: '❌'; margin-right: 10px; }
#faq-softsub .pixel-border-item, #faq-hardsub .pixel-border-item { background-color: var(--moe-tint3); }
#faq-softsub .faq-header, #faq-hardsub .faq-header, #faq-softsub .faq-content, #faq-hardsub .faq-content { color: white; }
#faq-main .pixel-border-item { background-color: var(--moe); }
#faq-main .faq-header, #faq-main .faq-content { color: var(--moe-tint7); }
@media (max-width: 900px) {
	#subs-main-container {
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
	}
	#subs-main-container > .pixel-border-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	#episode-list-container {
		max-height: 250px;
		height: auto;
		overflow-y: auto;
		width: 100%;
	}
}
@media (max-width: 600px) {
    #content-header h1 { font-size: 18pt; }
    #content-header h3 { font-size: 12pt; }
    #content-thumbnails .small-thumbs-grid,
    #content-thumbnails .small-thumbs-grid.three-items { 
		grid-template-columns: 1fr; 
    }
    .info-list li { align-items: flex-start; }
    #content-buttons { grid-template-columns: 1fr; }
    #content-buttons .full-width { grid-column: span 1; }
}
.warning-box-wrapper {
    width: 100%;
}
.warning-box {
    padding: 1rem;
    color: white;
    text-align: center;
    font-size: 11pt;
    line-height: 1.6;
}
.warning-box p {
    margin: 0;
}
.warning-box a {
    color: #FFEB3B; 
    font-weight: 700;
    text-decoration: underline;
}
.warning-box a:hover {
    color: white;
}
.warning-box.type-warning {
	background: #8B0000; 
	background: -webkit-linear-gradient(to right, #ef473a, #cb2d3e);
	background: linear-gradient(to right, #ef473a, #cb2d3e);
}
.warning-box.type-info {
	background: #4682B4;
	background: -webkit-linear-gradient(to right, #182848, #4b6cb7);
	background: linear-gradient(to right, #182848, #4b6cb7);
}
.warning-box.type-request {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); 
}
.warning-box.type-stop {
	background: #d32f2f;
	background: -webkit-linear-gradient(to right, #e65245, #e43a15);
	background: linear-gradient(to right, #e65245, #e43a15);
}
.warning-box.type-notreq {
	background: #36454F;
	background: -webkit-linear-gradient(to right, #434343, #000000);
	background: linear-gradient(to right, #434343, #000000);
}