/* =====================================================================
   responsive-fixes.css
   ---------------------------------------------------------------------
   本文件为「幻愘工作室 ACG」站点优化补丁样式表，统一追加在原有样式表
   (acg_style.css / ly_style.css / clock_style.css 等) 之后加载。

   设计原则：
   1. 只新增/覆盖存在缺陷或缺失响应式断点的规则，不删除、不修改原有
      颜色、字体、间距等视觉设定，确保网站整体视觉效果与改版前保持一致。
   2. 重点修复"语言设置"相关界面（index/en/ja 页面右上角"语言"按钮弹出的
      全屏语言选择层，以及 ly(留言) 页面顶部"语言"下拉菜单）在手机、
      平板、折叠屏、横屏、超宽屏等多种设备下的自适应显示问题。
   3. 兼顾页面加载性能：避免使用高开销选择器与多余的重排/重绘属性。
   ===================================================================== */

/* ---------- 全局基础：防止任意元素因固定宽度导致横向溢出 ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
img, video, canvas {
	max-width: 100%;
	height: auto;
}
/* 还原被全局 max-width 影响、需要保持固定像素尺寸的图标类小图 */
.menu-btn, .nav-item img, .hero-logo img, .navbar img {
	max-width: none;
}

/* =====================================================================
   一、首页 / 英文页 / 日文页 —— 右上角"语言设置"全屏菜单
   ===================================================================== */

/* 弹层内容整体增加左右内边距与安全区适配，避免在刘海屏/全面屏手机上
   贴边显示或被系统状态栏、手势条遮挡 */
.outer-wrapper .navbar-1 {
	padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
	box-sizing: border-box;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.outer-wrapper .close-outerwindow {
	right: max(3.5%, env(safe-area-inset-right, 0px));
	top: max(3.5%, env(safe-area-inset-top, 0px));
}

/* 语言选项文字使用流体字号，随视口宽度平滑缩放，彻底替代旧版
   “整宽/整高断层跳变”的问题，同时保证超小屏(<=320px)与超大屏(>=1920px)
   都有合理可读的显示效果 */
@media screen and (min-width: 1920px) {
	.navbar-nav .nav-link {
		font-size: 68px;
	}
	.logo-img {
		width: 14%;
	}
}

/* 极窄屏(如折叠屏主屏、旧款小屏手机 320px 宽)下确保菜单文字不换行错位 */
@media screen and (max-width: 340px) {
	.navbar-nav .nav-link {
		font-size: 20px;
		letter-spacing: -0.5px;
	}
}

/* 语言按钮(.menu-btn) 在极小屏幕上与右上角其它悬浮控件(返回顶部等)
   保持安全间距，避免重叠 */
@media screen and (max-width: 420px) {
	.menu-btn {
		right: max(1px, env(safe-area-inset-right, 0px));
	}
}

/* =====================================================================
   二、留言页 / 时钟页 —— 顶部导航"语言"下拉菜单 + 移动端汉堡菜单
   ===================================================================== */

/* 下拉菜单宽度随内容自适应，避免中/英/日文案长度不同导致的裁切或过宽 */
.navbar .dropdown ul,
.navbar-mobile .dropdown ul {
	min-width: max-content;
	max-width: 80vw;
}

.navbar .dropdown ul li,
.navbar-mobile .dropdown ul li {
	min-width: 100px;
	white-space: nowrap;
}

/* 中等宽度平板(768px-991px)下拉菜单与 Logo 的间距微调，防止拥挤 */
@media (min-width: 768px) and (max-width: 991px) {
	.navbar .dropdown ul {
		left: 0;
	}
}

/* 超小屏手机导航栏 Logo/图标尺寸等比缩小，避免挤压"语言"入口 */
@media (max-width: 400px) {
	.navbar img {
		width: 64px !important;
		height: 28px !important;
	}
	.navbar a, .navbar a:focus {
		font-size: 15px;
	}
}

/* 移动端语言下拉展开后允许滚动，避免选项过多时超出可视区域 */
.navbar-mobile ul {
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* =====================================================================
   三、时钟页数字时钟 —— 横屏/矮屏下避免文字溢出圆角卡片
   ===================================================================== */
@media screen and (max-height: 420px) {
	.clock {
		width: 86%;
		height: 70%;
		font-size: 24px;
		line-height: 1.4;
	}
}

/* =====================================================================
   四、通用悬浮按钮安全区适配（返回顶部 / 留言 / 时钟 / 侧边猫咪装饰等）
   不改变原有位置数值，仅在刘海屏/手势条设备上叠加安全距离
   ===================================================================== */
@media screen and (max-width: 991px) {
	.ly, .clock, .back-to-top, .db {
		right: max(1px, env(safe-area-inset-right, 0px));
	}
}