/* gallery.css — 投稿美术馆 (standalone 3D page, /misc/gallery)
   Chrome mirrors room.css: fixed back pill, title top-right, tooltip,
   loading veil. Always the dim-hall colourway. */

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0d0c12;
/* Same single face as the rest of the site. These are standalone 3D pages
   outside base.html, so they link fonts-975.css themselves — without it the
   name would resolve to nothing, which is exactly what the old declarations
   here did. */
  font-family: 'LXGW 975 Yuan SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-tap-highlight-color: transparent;
  color: #e9e4dc;
}

#gal-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#gal-canvas.dragging { cursor: grabbing; }
#gal-canvas.hovering { cursor: pointer; }

/* vignette, above canvas, below chrome */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 80% 74% at 50% 48%,
    transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── Loading ── */
#gal-loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: #0d0c12;
  z-index: 20;
  transition: opacity .7s ease;
}
#gal-loading.done { opacity: 0; pointer-events: none; }
.gal-loading-star { font-size: 34px; color: #f2d6a6; animation: gal-star 2.4s linear infinite; }
.gal-loading-text { font-size: 13px; color: #8a8290; letter-spacing: 3px; }
@keyframes gal-star {
  0%   { transform: rotate(0deg) scale(1); opacity: .6; }
  50%  { transform: rotate(180deg) scale(1.25); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: .6; }
}

/* ── Chrome ── */
.gal-back {
  position: fixed; top: 18px; left: 18px; z-index: 10;
  color: #d9cfc2; text-decoration: none;
  font-size: 13px; letter-spacing: 1px;
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid rgba(242, 214, 166, 0.25);
  border-radius: 999px;
  background: rgba(20, 17, 24, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast);
}
.gal-back:hover { background: rgba(242, 214, 166, 0.18); color: #fff5e6; }
.gal-back:active { transform: scale(.96); }
.gal-back:focus-visible, .gal-tools button:focus-visible { outline: 2px solid #f2d6a6; outline-offset: 2px; }

/* 标题行高取返回钮的高度，两者垂直中心一致；深色阴影保证白字落在射灯上时可读 */
.gal-title { position: fixed; top: 18px; right: 22px; z-index: 10; text-align: right; pointer-events: none; }
.gal-title h1 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: 'LXGW 975 Yuan SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 18px; font-weight: 700; color: #f4ecdf; letter-spacing: 2px; line-height: 34px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.gal-title p { margin-top: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); font-size: 11px; color: #8a8290; letter-spacing: 1px; }

.gal-tools { position: fixed; right: 18px; bottom: 18px; z-index: 10; display: flex; gap: 8px; }
.gal-tools button {
  height: 34px; padding: 0 14px;
  border: 1px solid rgba(242, 214, 166, 0.25); border-radius: 999px;
  background: rgba(20, 17, 24, 0.7); color: #d9cfc2;
  font-family: inherit; font-size: 13px; letter-spacing: 1px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast);
}
#gal-mute { width: 34px; padding: 0; }
.gal-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gal-tools button:active { transform: scale(.96); }
.gal-tools button:hover { background: rgba(242, 214, 166, 0.18); color: #fff5e6; }
.gal-tools button[aria-pressed="true"] { background: #f2d6a6; color: #1a1410; border-color: #f2d6a6; }
.gal-tools button.off { opacity: .55; }

/* 触屏：返回钮与工具钮取 40px 高，标题行高同步，使两者垂直中心仍一致 */
@media (pointer: coarse) {
  .gal-back, .gal-tools button { height: 40px; }
  #gal-mute { width: 40px; }
  .gal-title h1 { line-height: 40px; }
  .gc-close { width: 40px; height: 40px; top: 4px; right: 6px; }
}

/* ── Hover tooltip ── */
#gal-tip {
  position: fixed; z-index: 10; left: 0; top: 0;
  padding: 7px 13px;
  font-size: 13px; letter-spacing: 1px;
  color: #1a1410;
  background: linear-gradient(135deg, #f7e6c8, #e8c894);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.9);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-spring);
  white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis;
}
#gal-tip svg { vertical-align: -2px; margin-right: 6px; }
#gal-tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }

/* ── Caption card (focus mode) ── */
#gal-caption { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; justify-content: center; padding: 0 16px 22px; pointer-events: none; }
.gc-card {
  pointer-events: auto; position: relative;
  width: min(560px, 100%);
  padding: 16px 20px 14px;
  background: rgba(247, 240, 228, 0.96); color: #221c18;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  animation: gc-in .35s var(--ease-spring);
}
@keyframes gc-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gc-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #8a7a6a; cursor: pointer; }
.gc-close:hover { color: #221c18; }
.gc-kind { display: inline-block; font-size: 11px; letter-spacing: 2px; color: #8a7a6a; border: 1px solid #cdbfae; border-radius: 999px; padding: 2px 9px; margin-bottom: 8px; }
.gc-card h2 { font-family: 'LXGW 975 Yuan SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.gc-artist { margin-top: 4px; font-size: 13px; color: #5d5148; }
.gc-tags { margin-top: 4px; font-size: 12px; color: #8a7a6a; letter-spacing: 1px; }
.gc-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.gc-actions a, .gc-actions button {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; font-family: inherit; font-size: 13px; letter-spacing: 1px; text-decoration: none; cursor: pointer;
}
.gc-actions a { background: #221c18; color: #f7f0e4; }
.gc-actions button { border: 1px solid #cdbfae; background: transparent; color: #221c18; }
.gc-actions button:hover { background: #ece2d2; }
/* 说明卡为浅色底：焦点环取深色，与页面级的金色环区分 */
.gc-card :is(a, button):focus-visible { outline: 2px solid #221c18; outline-offset: 2px; }

/* 铺满全屏的空态层压在返回钮与工具钮之上（z-index 15 对 10），需让点击与焦点穿过，只保留链接可点 */
#gal-empty { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; color: #8a8290; font-size: 14px; letter-spacing: 1px; pointer-events: none; }
#gal-empty a { color: #f2d6a6; pointer-events: auto; }
#gal-empty a:focus-visible { outline: 2px solid #f2d6a6; outline-offset: 3px; border-radius: 3px; }

@media (max-width: 560px) {
  .gal-title h1 { font-size: 15px; }
  .gal-title p { display: none; }
  .gal-tools { bottom: 14px; right: 12px; }
  .gc-card { padding: 14px 16px 12px; }
  body.focused .gal-tools { opacity: 0; pointer-events: none; }
}
#gal-caption[hidden], #gal-empty[hidden] { display: none; }

/* 减少动态效果：加载星停止旋转，遮罩、提示、说明卡取消过渡与入场动画 */
@media (prefers-reduced-motion: reduce) {
  .gal-loading-star { animation: none; opacity: 1; }
  #gal-loading, #gal-tip, .gal-back, .gal-tools button { transition: none; }
  .gc-card { animation: none; }
  .gal-back:active, .gal-tools button:active { transform: none; }
}