/* effects.css — the gift effects gallery at /misc/effects: catalogue grid +
   player. The page shell (gm-top / gm-back) is shared with the other 杂物间
   pages in lab.css. */

/* A class that sets display beats the browser's own [hidden]{display:none}, so these need it spelled out. */
.fxg-view[hidden], .fxg-more[hidden], .fxg-view-msg[hidden], .fxg-retry[hidden] { display: none !important; }

/* ── 工具条 ── */
.fxg-bar { max-width: var(--w-page); margin: 0 auto 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fxg-search { flex: 1 1 200px; min-width: 160px; display: flex; }
/* 搜索框为 .field-glass（ui.css），这里收小一档 */
#fxgSearch { flex: 1; --field-fs: 13px; --field-pad: 8px 16px; }
/* The native search field clear button and magnifier look different in every browser, so they are removed */
.fxg-search input::-webkit-search-cancel-button,
.fxg-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* 筛选与排序为 .pill-row + .pill-soft（aria-pressed） */
.fxg-bar > .pill-row { flex-wrap: nowrap; }
/* 排序组与筛选组之间加竖线分隔，两组的选中态不会读成同一组 */
.fxg-bar > .pill-row + .pill-row { margin-left: 6px; padding-left: 14px; border-left: var(--bw) solid var(--border); }
.fxg-count { font: 12px var(--font-sans); color: var(--text3); margin-left: auto; white-space: nowrap; }

/* ── 目录 ── */
.fxg-grid { max-width: var(--w-page); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: var(--s-2); }
.fxg-empty { grid-column: 1 / -1; margin: 30px 0 0; }
/* 目录加载骨架：高度取 .fxg-card 的实测值（桌面 145.5px，560px 以下图标缩小后 135.5px），灰条材质为 .skel-block（ui.css） */
.fxg-sk-card { height: 145.5px; --skel-r: var(--r-inner); }
.fxg-sk-count { display: inline-block; vertical-align: top; width: 66px; --skel-h: 10px; margin: 2px 0; }

.fxg-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 8px 10px; border-radius: var(--r-inner); border: var(--l1-border); background: var(--surface); box-shadow: var(--card-shadow); cursor: pointer; text-align: center; transition: transform var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }/* Scoped to real cursors: on a touch screen :hover latches onto the last
   thing tapped and stays there until you tap something else, so a card you
   opened and closed sat there still lifted and glowing. Only the rules that
   move or light something up are guarded — a colour-only :hover latching is
   invisible, and wrapping those too would be 100+ rules of noise. */
@media (hover: hover) {

  .fxg-card:hover { transform: translateY(-3px); border-color: var(--blue2, var(--blue)); box-shadow: 0 10px 22px rgba(46, 74, 102, .16); }
}
.fxg-card:active { transform: var(--ui-press, scale(.97)); }
.fxg-card:focus-visible { outline: 2px solid var(--blue2, var(--blue)); outline-offset: 2px; }
.fxg-card.playing { border-color: var(--blue2, var(--blue)); background: rgba(var(--blue-rgb), .07); }
.fxg-card img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(46, 74, 102, .18)); }
/* 图标加载失败后的占位图形（effects.html 中替换 src），不加投影、降低不透明度 */
.fxg-card img.broken { filter: none; opacity: .6; }
.fxg-card b { font: 700 12px/1.35 var(--font-sans); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxg-card i { font: 400 11px/1.3 var(--font-sans); font-style: normal; color: var(--text3); font-variant-numeric: tabular-nums; }
.fxg-card u { font: 400 10px/1.3 var(--font-sans); color: var(--text3); text-decoration: none; opacity: .7; font-variant-numeric: tabular-nums; }
.fxg-card em { position: absolute; top: 5px; right: 5px; font: 400 10px/1 var(--font-sans); font-style: normal; color: var(--text3); background: var(--surface-strong); border: var(--bw) solid var(--border); border-radius: var(--r-full); padding: 2px 6px; }
.fxg-more { height: 1px; }
.fxg-source { max-width: var(--w-page); margin: 18px auto 0; font: 11px/1.7 var(--font-sans); color: var(--text3); text-align: center; }

/* ── Player ──
   Fixed to the viewport: these effects are vertical compositions meant to
   cover a whole stream. z-index 与站内其他查看器（.scrim，/fanart 看图）相同，
   压过导航（9000）与皮肤外框。 */
.fxg-view { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fxg-fade .2s ease-out; }
.fxg-view-bd { position: absolute; inset: 0; background: rgba(8, 12, 22, .72); backdrop-filter: blur(3px); }
.fxg-stage { position: relative; z-index: 1; width: min(100%, 520px); flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
/* 画布给满靠 object-fit 保住比例；两头卡 max-width/height 会被拉变形。 */
.fxg-canvas { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fxg-view-msg { position: absolute; margin: 0; font: 13px var(--font-sans); color: #dfe7f2; }
.fxg-retry { position: absolute; top: calc(50% + 24px); z-index: 1; }

.fxg-view-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px 8px; max-width: 100%; }
.fxg-view-name { font: 700 14px var(--font-display); color: var(--on-dark-fg); text-align: center; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.fxg-view-tools { position: relative; z-index: 1; display: flex; gap: var(--s-1, 8px); padding: 4px 12px 24px; }
/* 翻页钮为 .btn-icon、工具为 .pill-soft（ui.css），在 .on-dark 下取深色底配色 */
/* 解码源而已，不给人看 */
.fxg-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@keyframes fxg-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 560px) {
  .fxg-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-1); }
  .fxg-card img { width: 46px; height: 46px; }
  .fxg-sk-card { height: 135.5px; }
  .fxg-count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fxg-card:hover, .fxg-card:active { transform: none; }
  .fxg-view { animation: none; }
}