/* watch.css - uzurea.net /vc/ {id}/watch/ 専用スタイル
 * 全クラス名・ID名はアンダースコア統一（ハイフン不使用）
 * アイコンは PNG background-image 方式（../images/ 参照）
 * style.css とは完全分離 - このファイルのみで完結すること
 */

*,*::before,*::after {box-sizing:border-box;margin:0;padding:0}

:root {
	--bg:#0a0a0f;
	--surface:#13131a;
	--surface2:#1c1c26;
	--border:#ffffff12;
	--text:#f0f0f5;
	--text-muted:#8888aa;
	--accent:#e8c96e;
	--radius:14px;
}

html {background:var(--bg);}
body {
	background:var(--bg);
	color:var(--text);
	font-family:'Noto Sans JP',sans-serif;
	min-height:100vh;
	overflow-x:hidden;
}

a:visited {
	color: #f7eeff;
}


/* ── レイアウト ── */
.wrap {
	max-width:520px;
	margin:0 auto;
	padding:36px 20px 72px;
	background-image:
		url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.012'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(ellipse 80% 50% at 50% -5%, #3a2a0a33 0%, transparent 65%),
		radial-gradient(ellipse 40% 40% at 85% 85%, #2a0a0a22 0%, transparent 55%);
}

/* ── サイトヘッダー ── */
.site_header {
	display:flex;align-items:center;justify-content:center;
	margin-bottom:44px;
}
.site_logo {
	color: #fff;
	font-family:'DM Mono',monospace;
	font-size:11px;letter-spacing:.18em;
	color:var(--text-muted);
	text-decoration:none;
	border:1px solid var(--border);
	padding:6px 16px;
	border-radius:100px;
	transition:border-color .2s,color .2s;
}
.site_logo:hover {color:var(--accent);border-color:var(--accent);}

.stream_disclaimer {
	font-size:11px;
	color:rgba(255,255,255,.4);
	text-align:center;
	margin:-36px 0 20px;
	padding:0 16px;
}

/* ── 作品カード ── */
.work_card {
	display:flex;gap:20px;align-items:flex-start;
	margin-bottom:30px;
	animation:fadeUp .45s ease both;
}
.work_poster {
	flex-shrink:0;
	width:88px;height:118px;
	border-radius:10px;
	object-fit:cover;
	box-shadow:0 8px 28px #00000077;
	border:1px solid var(--border);
}
.work_meta {flex:1;padding-top:2px;}
.work_category {
	font-family:'DM Mono',monospace;
	font-size:10px;letter-spacing:.12em;
	color:var(--accent);
	text-transform:uppercase;
	margin-bottom:7px;
}
.work_title {
	font-family:'Zen Kaku Gothic New',sans-serif;
	font-weight:900;
	font-size:17px;
	line-height:1.45;
	margin-bottom:5px;
}
.work_subtitle {font-size:12px;color:var(--text-muted);line-height:1.5;}
.work_tags {display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.work_tag {
	font-size:10px;padding:2px 8px;border-radius:100px;
	background:var(--surface2);color:var(--text-muted);
	border:1px solid var(--border);
}

/* ── セクションラベル ── */
.section_label {
	font-family:'DM Mono',monospace;
	font-size:10px;letter-spacing:.2em;
	color:var(--text-muted);
	text-transform:uppercase;
	margin-bottom:12px;
	display:flex;align-items:center;gap:10px;
}
.section_label::after {content:'';flex:1;height:1px;background:var(--border);}
.service_count {margin-left:4px;opacity:.6;}

/* ── 配信サービス一覧 ── */
.services {display:flex;flex-direction:column;gap:8px;margin-bottom:36px;}
.service_btn {
	display:flex;align-items:center;gap:14px;
	padding:13px 16px;
	border-radius:var(--radius);
	background:var(--surface);
	border:1px solid var(--border);
	text-decoration:none;
	color:var(--text);
	transition:transform .14s ease,background .14s,border-color .14s,box-shadow .14s;
	animation:fadeUp .5s ease both;
}
.service_btn:hover {
	transform:translateY(-2px) translateX(2px);
	background:var(--surface2);
	border-color:#ffffff1e;
	box-shadow:0 8px 20px #00000055;
}
.service_btn:active {transform:translateY(0);}

/* ── サービスアイコン（PNG background-image 方式） ── */
.service_icon {
	width:36px;height:36px;border-radius:8px;
	flex-shrink:0;
	background-size:36px 36px;
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}
.service_icon.amazon       {background-image:url(../images/icon_primevideo.png);}
.service_icon.amazon_dub   {background-image:url(../images/icon_primevideo.png);}
.service_icon.animetimes   {background-image:url(../images/icon_animetimes.png);}
.service_icon.abema        {background-image:url(../images/icon_abema.png);}
.service_icon.apple_tvplus {background-image:url(../images/icon_appletv.png);}
.service_icon.d            {background-image:url(../images/icon_danimestore.png);}
.service_icon.disneyplus   {background-image:url(../images/icon_disneyplus.png);}
.service_icon.dmmtv        {background-image:url(../images/icon_dmmtv.png);}
.service_icon.fod          {background-image:url(../images/icon_fod.png);}
.service_icon.hulu         {background-image:url(../images/icon_hulu.png);}
.service_icon.lemino       {background-image:url(../images/icon_lemino.png);}
.service_icon.netflix      {background-image:url(../images/icon_netflix.png);}
.service_icon.rakutentv    {background-image:url(../images/icon_rakutentv.png);}
.service_icon.telasa       {background-image:url(../images/icon_telasa.png);}
.service_icon.unext        {background-image:url(../images/icon_unext.png);}
.service_icon.wowow        {background-image:url(../images/icon_wowow.png);}
.service_icon.youtube      {background-image:url(../images/icon_youtube.png);}
.service_icon.animefesta   {background-image:url(../images/icon_animefesta.png);}
.service_icon.animehodai   {background-image:url(../images/icon_animehodai.png);}
.service_icon.niconico     {background-image:url(../images/icon_niconico.png);}
.service_icon.bandaichannel {background-image:url(../images/icon_b-ch.png);}

.service_info {flex:1;}
.service_name {font-size:14px;font-weight:700;margin-bottom:3px;}
.service_badge {font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}

/* バッジ */
.badge_free {
	display:inline-block;padding:1px 7px;border-radius:100px;
	font-size:9px;font-weight:700;letter-spacing:.04em;
	background:#0d2e0d;color:#4caf50;border:1px solid #4caf5040;
}
.badge_rent {
	display:inline-block;padding:1px 7px;border-radius:100px;
	font-size:9px;font-weight:700;letter-spacing:.04em;
	background:#2a1800;color:#ff9800;border:1px solid #ff980040;
}
.badge_buy {
	display:inline-block;padding:1px 7px;border-radius:100px;
	font-size:9px;font-weight:700;letter-spacing:.04em;
	background:#00102a;color:#5b9cf6;border:1px solid #5b9cf640;
}
.badge_original {
	display:inline-block;padding:1px 7px;border-radius:100px;
	font-size:9px;font-weight:700;letter-spacing:.04em;
	background:#1a0a2a;color:#b87fff;border:1px solid #b87fff40;
}
.badge_other {
	display:inline-block;padding:1px 7px;border-radius:100px;
	font-size:9px;font-weight:700;letter-spacing:.04em;
	background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);
}
.badge_date {font-size:10px;color:#55557799;}

.service_arrow {color:var(--text-muted);font-size:15px;transition:transform .14s,color .14s;flex-shrink:0;}
.service_btn:hover .service_arrow {transform:translateX(3px);color:var(--accent);}

/* ── 公式リンク ── */
.official_links {
	display:flex;flex-wrap:wrap;gap:8px;
	margin-bottom:32px;
}
.official_btn {
	display:flex;align-items:center;gap:8px;
	padding:9px 14px;
	border-radius:100px;
	background:var(--surface);
	border:1px solid var(--border);
	text-decoration:none;
	color:var(--text-muted);
	font-size:12px;font-weight:500;
	transition:background .14s,border-color .14s,color .14s,transform .14s;
	animation:fadeUp .45s ease both;
}
.official_btn:hover {
	background:var(--surface2);
	border-color:#ffffff1e;
	color:var(--text);
	transform:translateY(-1px);
}
.official_btn svg {width:14px;height:14px;flex-shrink:0;}
.official_btn.web {border-style:dashed;}
.official_btn.web:hover {color:var(--accent);border-color:var(--accent);}
.official_btn.instagram:hover {color:#e1306c;border-color:#e1306c55;}
.official_btn.tiktok:hover {color:#69c9d0;border-color:#69c9d055;}

/* ── シェア ── */
.share_row {
	display:flex;
	align-items: stretch;
	gap:8px;
}
.share_btn {
	flex:1;
	display:flex;align-items:center;justify-content:center;gap:7px;
	padding:12px;
	margin: 0 0 0 0;
	border-radius:var(--radius);
	background:var(--surface);
	border:1px solid var(--border);
	text-decoration:none;
	color:var(--text-muted);
	font-size:13px;font-weight:500;line-height:1.5;
	transition:background .14s,border-color .14s,color .14s;
	cursor:pointer;font-family:'Noto Sans JP',sans-serif;
	appearance:none;-webkit-appearance:none;
}
.share_btn:hover {background:var(--surface2);border-color:#ffffff1e;color:var(--text);}
.share_btn svg {width:15px;height:15px;flex-shrink:0;}

/* ── フッター ── */
.page_footer {margin-top:44px;text-align:center;}
.footer_link {
	font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;
	color:var(--text-muted);text-decoration:none;
}
.footer_link:hover {
	color: #fff;
}
.footer_copy {
	font-size:10px;color:#fff;
	margin-top:8px;
	font-family:'DM Mono',monospace;
}

/* ── アニメーション ── */
@keyframes fadeUp {
	from {opacity:0;transform:translateY(14px)}
	to {opacity:1;transform:translateY(0)}
}
.services .service_btn:nth-child(1) {animation-delay:.04s}
.services .service_btn:nth-child(2) {animation-delay:.08s}
.services .service_btn:nth-child(3) {animation-delay:.12s}
.services .service_btn:nth-child(4) {animation-delay:.16s}
.services .service_btn:nth-child(5) {animation-delay:.20s}
.services .service_btn:nth-child(6) {animation-delay:.24s}
.services .service_btn:nth-child(7) {animation-delay:.28s}
.services .service_btn:nth-child(8) {animation-delay:.32s}
.services .service_btn:nth-child(9) {animation-delay:.36s}
.services .service_btn:nth-child(10) {animation-delay:.40s}
.services .service_btn:nth-child(11) {animation-delay:.44s}
.services .service_btn:nth-child(12) {animation-delay:.48s}
.services .service_btn:nth-child(13) {animation-delay:.52s}

/* ── レスポンシブ ── */
@media(max-width:400px) {
	.work_title {font-size:15px}
	.work_poster {width:76px;height:102px}
}