/* ========== AI-GalGame 样式 v3.1（淡蓝透明UI版） ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: "ZCOOL KuaiLe", "YouYuan", "幼圆", "Yuanti SC", "Varela Round", "PingFang SC", "Microsoft YaHei", sans-serif; background: #0a1628; }
/* ---- 全屏画布（APK锁定横屏，直接铺满；浏览器版同样全幅） ---- */
#game { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; background: #0b1e3a; }
button { font-family: inherit; cursor: pointer; }
/* ---- 背景层（剧情中随发展拉大） ---- */
#bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#bg-layer img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center center; will-change: transform; }
#bg-layer::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(20,40,80,.35) 100%); pointer-events: none; }
#bg-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background 1.5s ease; }
/* ---- 立绘层 ---- */
#char-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
#char-layer img { max-height: 70%; max-width: 90%; filter: drop-shadow(0 12px 26px rgba(20,40,80,.38)); }
#char-layer.anim-enter img { animation: charDrop .8s cubic-bezier(.34,1.56,.64,1); }
@keyframes charDrop {
  0% { opacity: 0; transform: translateY(-140px) scale(.92); }
  55% { opacity: 1; transform: translateY(10px) scale(1.02); }
  75% { transform: translateY(-4px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ---- 顶栏 ---- */
#top-bar { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#scene-name { min-width: 0; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(165,211,255,.30); color: #1f3d6b; padding: 6px 14px; border-radius: 16px; font-size: 14px; border: 1.5px solid #6fa3dc; box-shadow: 0 2px 8px rgba(31,61,107,.15); }
#affection { margin-left: auto; min-width: 0; white-space: nowrap; background: rgba(165,211,255,.30); color: #e07090; padding: 6px 14px; border-radius: 16px; font-size: 14px; border: 1.5px solid #6fa3dc; box-shadow: 0 2px 8px rgba(31,61,107,.15); }
#affection.bump { animation: bump .45s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
#save-btn { background: rgba(165,211,255,.30); border: 1.5px solid #6fa3dc; color: #1f3d6b; padding: 6px 12px; border-radius: 16px; font-size: 14px; box-shadow: 0 2px 8px rgba(31,61,107,.15); transition: transform .15s ease; }
#save-btn:active { background: rgba(165,211,255,.55); transform: scale(.9); }
/* ---- 顶栏功能按钮（统一class管理，媒体查询可覆盖） ---- */
.top-btn { flex:0 0 auto; margin-left:8px; background: url('https://www.zh01xinghai1.cn/assets/ui/btn_blue.png') no-repeat center; background-size: 100% 100%; color: #fff; border: none; padding: 7px 15px; font-size: 13px; text-shadow: 0 1px 2px rgba(15,50,95,.6); box-shadow: 0 2px 6px rgba(20,45,85,.30); flex-shrink:0; transition: transform .15s ease, filter .15s ease; }
.top-btn:active { transform: scale(.94); filter: brightness(.85); }
.top-btn.off { filter: grayscale(.55) brightness(.92); }
#skip-btn { color: #c05a5a; border-color: #d98a8a; }
/* ---- 对话框 ---- */
#dialogue-box { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 10; background: rgba(236,245,255,.94); border: 1.5px solid #6fa3dc; border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 18px rgba(31,61,107,.18); backdrop-filter: blur(4px); transition: opacity .4s ease; }
#dialogue-box.talk-in { animation: boxIn .32s ease; }
@keyframes boxIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
#speaker { display: inline-block; background: #6fa3dc; color: #fff; font-size: 13px; padding: 3px 12px; border-radius: 12px; margin-bottom: 6px; box-shadow: 0 2px 6px rgba(31,61,107,.25); }
#speaker.pop { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
#dialogue { color: #1f3d6b; font-size: 15px; line-height: 1.6; min-height: 48px; white-space: pre-wrap; word-break: break-word; }
.cursor { display: inline-block; width: 2px; height: 1.1em; background: #1f3d6b; margin-left: 2px; vertical-align: -2px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* ---- 选项 ---- */
#choices { position: absolute; right: 12px; bottom: 140px; z-index: 11; display: flex; flex-direction: column; gap: 8px; }
.choice-btn { background: rgba(165,211,255,.70); color: #1f3d6b; border: 1.5px solid #6fa3dc; border-radius: 12px; padding: 7px 14px; font-size: 13px; box-shadow: 0 2px 8px rgba(31,61,107,.10); opacity: 0; animation: choiceIn .35s ease forwards; transition: transform .12s ease, background .12s ease; }
@keyframes choiceIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.choice-btn:active { background: rgba(165,211,255,.88); transform: scale(.96); }
/* ====== 开始界面（标题画面） ====== */
#start-screen {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0b1e3a 0%, #16305c 45%, #2a4d85 100%);
  overflow: hidden;
  padding: 10px;
}
/* 界面背景图（用户提供） */
#start-screen .bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  z-index: 0;
}
#start-screen .bg-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,15,32,.30), rgba(6,15,32,.58)); pointer-events: none; }
/* 星光闪烁 */
#start-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 25%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 38% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 58% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 78% 48%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 90% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 48% 42%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 68%, rgba(255,255,255,.7), transparent);
  animation: twinkle 3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
/* 底部深海渐变 */
#start-screen::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(6,15,32,.85));
  pointer-events: none;
}
/* 标题 */
#start-screen h1 {
  position: relative; z-index: 2;
  font-size: 34px; margin-bottom: 2vh;
  background: linear-gradient(90deg, #fff, #bcd8ff, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleFlow 4s linear infinite;
  filter: drop-shadow(0 2px 12px rgba(140,190,255,.45));
}
@keyframes titleFlow { to { background-position: 200% center; } }
#start-screen .sub { position: relative; z-index: 2; font-size: 13px; color: rgba(255,255,255,.78); letter-spacing: 2px; margin-bottom: 2vh; text-align: center; }
/* 2026-08-30：标题页内容容器；章节增加到第五幕后，小屏也不会出现按钮跑出屏幕。 */
#start-content {
  position: relative; z-index: 2;
  width: min(92vw, 420px);
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 4px 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#start-content::-webkit-scrollbar { width: 5px; }
#start-content::-webkit-scrollbar-track { background: transparent; }
#start-content::-webkit-scrollbar-thumb { background: rgba(165,211,255,.28); border-radius: 8px; }
/* 按钮组（淡蓝毛玻璃卡片） */
#start-btns {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  margin-top: 2vh; padding: 16px 16px;
  background: rgba(165,211,255,.12);
  border: 1px solid rgba(111,163,220,.35);
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
#start-btns button {
  width: 100%;
  min-width: 0;
  background: rgba(165,211,255,.30);
  color: #eaf4ff;
  border: 1.5px solid #6fa3dc;
  border-radius: 22px;
  padding: 12px 28px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#start-btns button.primary {
  background: rgba(165,211,255,.45);
  color: #fff;
  border-color: #a5d3ff;
  box-shadow: 0 4px 18px rgba(111,163,220,.5);
}
#start-btns button:active { transform: scale(.94); background: rgba(165,211,255,.55); }
#start-btns .save-note { font-size: 12px; color: rgba(234,244,255,.85); margin-top: -2px; text-align: center; }
#act-select {
  width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.act-select-label {
  width: 100%; color: rgba(234,244,255,.78); font-size: 11px; letter-spacing: 2px;
  text-align: center; margin: 1px 0 -2px;
}
#act-select .act-btn { width: 100%; }

/* ---- 存档面板 ---- */
#save-panel { position: absolute; inset: 0; z-index: 90; background: rgba(31,61,107,.45); display: none; flex-direction: column; align-items: center; justify-content: center; }
#save-panel .box { width: 86%; max-width: 340px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.25); animation: boxIn .3s ease; }
#save-panel h3 { color: #1f3d6b; text-align: center; font-size: 17px; margin-bottom: 12px; }
.save-row { display: flex; align-items: center; gap: 8px; background: rgba(165,211,255,.12); border: 1.5px solid rgba(111,163,220,.35); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.save-row .info { flex: 1; color: #1f3d6b; font-size: 13px; line-height: 1.5; }
.save-row .info b { display: block; font-size: 14px; }
.save-row button { background: rgba(165,211,255,.30); border: 1.5px solid #6fa3dc; color: #1f3d6b; border-radius: 10px; padding: 6px 10px; font-size: 12px; white-space: nowrap; transition: transform .12s ease, background .12s ease; }
.save-row button:active { transform: scale(.92); background: rgba(165,211,255,.55); }

/* ---- 情景CG（2026-08-26 全屏适配版） ---- */
#cg-layer {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: #030a16;
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
#cg-layer.on { opacity: 1; }
#cg-layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  max-width: 100%; max-height: 100%;
}
/* CG上映时的沉浸模式：对话框/顶栏/选项全部先藏起来 */
#game.cg-show #dialogue-box, #game.cg-show #top-bar, #game.cg-show #choices { opacity: 0; pointer-events: none; }
#top-bar { transition: opacity .4s ease; }
#choices { transition: opacity .4s ease; }

/* ====== 手机横屏 16:9 适配（2026-08-26：群友反馈UI太大，缩小一档） ====== */
@media (max-width: 900px), (max-height: 520px) {
  /* 顶栏 */
  #top-bar { top: 7px; left: 8px; right: 8px; gap: 5px; align-content: flex-start; }
  #scene-name, #affection { font-size: 10.5px; padding: 4px 7px; border-radius: 13px; }
  #scene-name { max-width: 32%; }
  .top-btn { font-size: 11px; padding: 5px 11px; }
  /* 对话框 */
  #dialogue-box { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 12px; }
  #speaker { font-size: 12px; padding: 2px 10px; }
  #dialogue { font-size: 14px; min-height: 44px; }
  /* 选项 */
  #choices { right: 10px; bottom: 120px; gap: 6px; }
  .choice-btn { font-size: 12px; padding: 6px 12px; border-radius: 10px; }
  /* 立绘（矮屏防顶栏遮挡） */
  #char-layer img { max-height: 62%; }
  /* 标题界面 */
  #start-content { width: min(94vw, 360px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 6px 2px 10px; }
  #start-screen h1 { font-size: 26px; }
  #start-screen .sub { font-size: 11px; letter-spacing: 1px; }
  #start-btns { padding: 12px 12px; gap: 8px; margin-top: 1vh; }
  #start-btns button { min-width: 0; padding: 10px 14px; font-size: 14px; }
  #start-btns .save-note { font-size: 11px; }
  /* 存档面板 */
  #save-panel .box { width: 88%; padding: 14px; }
  .save-row { padding: 6px 8px; }
  .save-row .info { font-size: 12px; }
}
@media (max-width: 420px) and (orientation: portrait) {
  #act-select { grid-template-columns: 1fr; }
}
.save-row button.blue { background: rgba(111,163,220,.9); color: #fff; border: none; }
/* ===== 设置面板（2026-10-04）===== */
#settings-mask { position: fixed; inset: 0; z-index: 130; background: rgba(8,18,34,.42); display: none; }
#settings-mask.on { display: block; }
#settings-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50vw; min-width: 270px; max-width: 560px; background: rgba(255,255,255,.72); border: 2.5px solid #8fc3f2; border-radius: 20px; box-shadow: 0 12px 40px rgba(31,61,107,.35); padding: 20px 22px 16px; backdrop-filter: blur(6px); }
.set-title { font-size: 20px; color: #1f3d6b; text-align: center; letter-spacing: 6px; margin-bottom: 14px; }
.set-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.set-label { flex: 0 0 52px; font-size: 14px; color: #2c4f7c; letter-spacing: 2px; }
#settings-panel input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 3px; background: #d7e8f8; outline: none; }
#settings-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #6fa3dc; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(31,61,107,.3); }
.set-val { flex: 0 0 46px; text-align: right; font-size: 14px; color: #2c4f7c; }
.set-btn { flex: 0 0 64px; padding: 5px 0; border-radius: 14px; border: 1.5px solid #6fa3dc; background: rgba(165,211,255,.45); color: #1f3d6b; font-size: 14px; letter-spacing: 2px; }
.set-btn.off { background: rgba(200,200,200,.4); border-color: #bbb; color: #888; }
.set-tip { text-align: center; font-size: 11px; color: #7d95b5; margin-top: 8px; letter-spacing: 1px; }
.set-close { display: block; margin: 12px auto 0; padding: 7px 38px; border-radius: 16px; border: 1.5px solid #6fa3dc; background: rgba(165,211,255,.55); color: #1f3d6b; font-size: 15px; letter-spacing: 4px; }
.set-close:active { transform: scale(.94); }

/* ===== 『』装饰词块（2026-10-04）===== */
.baw { position: relative; display: inline-block; white-space: nowrap; }
.bar { position: absolute; top: -0.9em; left: 0; width: 100%; text-align: center; font-family: "Varela Round", "ZCOOL KuaiLe", sans-serif; font-size: 0.5em; line-height: 1; letter-spacing: 0.08em; opacity: 0.7; white-space: nowrap; pointer-events: none; }

/* ===== 主菜单扩展（2026-10-05）：资料库窗口（剧情/素材/CG/背景）+ 下载按钮 ===== */
#menu-squares { display: flex; gap: 8px; width: 100%; }
#menu-squares button {
  flex: 1 1 0; min-width: 0;
  background: rgba(165,211,255,.14);
  border: 1px solid rgba(165,211,255,.38);
  color: #dceaff;
  border-radius: 14px;
  padding: 9px 2px;
  font-size: 13px;
  letter-spacing: 1px;
  transition: transform .13s ease, background .13s ease;
}
#menu-squares button:active { transform: scale(.93); background: rgba(165,211,255,.32); }
#lib-panel { position: absolute; inset: 0; z-index: 120; display: none; background: rgba(6,15,32,.55); }
#lib-panel.on { display: block; }
#lib-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(94vw, 980px); height: min(92vh, 620px);
  background: rgba(12,28,54,.82);
  border: 1.5px solid rgba(143,195,242,.55);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.lib-head { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(143,195,242,.25); }
.lib-title { font-size: 15px; color: #dceaff; letter-spacing: 3px; }
.lib-close { margin-left: auto; background: rgba(165,211,255,.16); border: 1px solid rgba(165,211,255,.4); color: #dceaff; border-radius: 12px; padding: 5px 14px; font-size: 13px; }
.lib-close:active { transform: scale(.92); background: rgba(165,211,255,.34); }
.lib-body { flex: 1; overflow-y: auto; padding: 12px 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lib-body::-webkit-scrollbar { width: 5px; }
.lib-body::-webkit-scrollbar-thumb { background: rgba(165,211,255,.28); border-radius: 8px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.story-grid .act-btn { width: 100%; background: rgba(165,211,255,.14); border: 1px solid rgba(165,211,255,.35); color: #eaf4ff; border-radius: 12px; padding: 10px 8px; font-size: 13px; transition: transform .13s ease, background .13s ease; }
.story-grid .act-btn:active { transform: scale(.95); background: rgba(165,211,255,.3); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: 8px; }
.lib-thumb { background: rgba(165,211,255,.08); border: 1px solid rgba(165,211,255,.22); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .13s ease; }
.lib-thumb:active { transform: scale(.95); }
.lib-thumb img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.lib-thumb.chara img { aspect-ratio: 3 / 4; object-fit: contain; padding: 4px 4px 0; }
.lib-thumb .cap { font-size: 10px; color: rgba(234,244,255,.75); text-align: center; padding: 4px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-group { margin-bottom: 14px; }
.char-group h4 { color: #bcd8ff; font-size: 13px; letter-spacing: 2px; margin: 4px 0 8px; padding-left: 8px; border-left: 3px solid rgba(143,195,242,.6); }
#lib-viewer { position: absolute; inset: 0; z-index: 140; display: none; background: rgba(2,6,14,.93); }
#lib-viewer.on { display: block; }
#lib-viewer #v-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 100%; max-height: 100%; object-fit: contain; }
#lib-viewer .vcap { position: absolute; left: 14px; top: 10px; color: rgba(234,244,255,.8); font-size: 12px; background: rgba(12,28,54,.6); padding: 4px 10px; border-radius: 10px; }
.vuse { position: absolute; right: 70px; bottom: 16px; background: rgba(165,211,255,.16); border: 1px solid rgba(165,211,255,.45); color: #dceaff; border-radius: 14px; padding: 7px 14px; font-size: 12px; }
.vdl { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(165,211,255,.16); border: 1px solid rgba(165,211,255,.45); display: flex; align-items: center; justify-content: center; padding: 0; }
.vdl img { width: 22px; height: 22px; opacity: .9; }
#dl-btn { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 48px; height: 48px; border-radius: 50%; background: rgba(165,211,255,.16); border: 1px solid rgba(165,211,255,.42); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .14s ease, background .14s ease; }
#dl-btn img { width: 24px; height: 24px; opacity: .88; pointer-events: none; }
#dl-btn:active { transform: scale(.9); background: rgba(165,211,255,.34); }
#dl-panel { position: absolute; inset: 0; z-index: 130; display: none; background: rgba(6,15,32,.5); }
#dl-panel.on { display: block; }
#dl-panel .dl-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(88vw, 380px); background: rgba(12,28,54,.86); border: 1.5px solid rgba(143,195,242,.55); border-radius: 16px; padding: 18px; backdrop-filter: blur(8px); }
.dl-box h3 { color: #dceaff; text-align: center; font-size: 16px; letter-spacing: 6px; margin-bottom: 10px; }
.dl-line { color: rgba(234,244,255,.85); font-size: 13px; line-height: 1.9; text-align: center; }
.dl-line b { color: #fff; }
.dl-note { color: rgba(234,244,255,.55); font-size: 11px; text-align: center; margin-top: 8px; letter-spacing: 1px; }
.dl-act { text-align: center; margin-top: 12px; }
.dl-act .lib-close { margin-left: 0; }
@media (max-width: 900px), (max-height: 520px) {
  #lib-box { width: 96vw; height: 94vh; border-radius: 14px; }
  .lib-body { padding: 10px 10px; }
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
  .story-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; }
  .lib-thumb .cap { font-size: 9px; }
  #dl-btn { width: 42px; height: 42px; right: 12px; bottom: 12px; }
  #dl-btn img { width: 20px; height: 20px; }
}

/* ===== 触屏体验修复（2026-10-05 · 任务 #73）：去除 Android WebView 点击蓝框 / 焦点高亮 ===== */
* { -webkit-tap-highlight-color: transparent; }
*:focus { outline: none; }
*:focus-visible { outline: none; }
button:focus, button:active, a:focus, a:active { outline: none !important; }

/* ===== 更新公告弹窗（v2.0 · 2026-10-05）：版本低于最新时自动弹出 ===== */
#update-pop { position: absolute; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(4,10,22,.55); backdrop-filter: blur(3px); }
#update-pop .up-box { width: min(86vw, 420px); background: rgba(12,28,54,.92); border: 1.5px solid rgba(143,195,242,.55); border-radius: 18px; padding: 20px 22px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.45); color: #eaf4ff; }
#update-pop h3 { text-align: center; font-size: 18px; letter-spacing: 3px; margin-bottom: 10px; color: #fff; }
#update-pop .up-ver { text-align: center; font-size: 13px; color: rgba(234,244,255,.85); margin-bottom: 12px; }
#update-pop .up-ver b { color: #9fd8ff; }
#update-pop .up-notes { background: rgba(255,255,255,.06); border: 1px solid rgba(143,195,242,.25); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.9; color: rgba(234,244,255,.9); max-height: 34vh; overflow-y: auto; }
#update-pop .up-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
#update-pop .up-btns button { flex: 1; padding: 10px 0; font-size: 15px; border-radius: 12px; letter-spacing: 2px; }
#update-pop .up-cancel { background: transparent; color: rgba(234,244,255,.75); border: 1.5px solid rgba(143,195,242,.45); }
#update-pop .up-go { background: linear-gradient(135deg, #2f7fc1, #3a97d6); color: #fff; border: none; box-shadow: 0 4px 14px rgba(58,151,214,.4); }
@media (max-width: 900px), (max-height: 520px) {
  #update-pop .up-box { width: 90vw; padding: 16px 16px 14px; }
  #update-pop .up-btns button { font-size: 14px; }
}