/* 模板按钮图片：public/assets/themes/{模板}/{模板}-button.webp
 * 极光幻境＝绿色玉石按钮，紫色模板/星空宇宙＝紫色宝石按钮，曜金旗舰＝金边按钮。
 *
 * 用“九宫格”画法（border-image）：两端的装饰按原比例缩放，只横向延长中间那段，
 * 不管按钮多宽都不会把两端装饰拉扁 / 拉长，也不会裁掉图片。
 *   --tpl-cap-slice  原图两端装饰各占多少像素（原图宽 480）
 *   --tpl-cap-ratio  装饰宽 ÷ 原图高，用来按按钮高度算出两端该画多宽
 *   --tpl-h          按钮高度（固定高度，两端装饰才能保持比例）
 */
html { --tpl-button-image: url("/public/assets/themes/arcade/arcade-button.webp"); --tpl-cap-slice: 140; --tpl-cap-ratio: 1.32; }
html[data-view-managed-skin="aurora"] { --tpl-button-image: url("/public/assets/themes/aurora/aurora-button.webp"); --tpl-cap-slice: 118; --tpl-cap-ratio: .975; }
html[data-view-managed-skin="gold"] { --tpl-button-image: url("/public/assets/themes/gold/gold-button.webp"); --tpl-cap-slice: 130; --tpl-cap-ratio: 1; }
html[data-view-managed-skin="arcade"] { --tpl-button-image: url("/public/assets/themes/arcade/arcade-button.webp"); --tpl-cap-slice: 140; --tpl-cap-ratio: 1.32; }

/* 最后一项 #tpl-x#tpl-x#tpl-x 不会匹配任何元素，只用来提高优先级，压过原模板里“整张图铺满”的规则 */
:is(
  #app #cardsScroll .card-grid > .card > .go,
  .view-community-button-primary,
  .view-account-guest-actions > button,
  .view-access-submit,
  .view-activity-submit-button,
  .view-home-overlay-action,
  .popup-footer > button,
  .view-site-share-action.view-primary,
  .view-community-submission-primary,
  .view-draw-shell .view-button.view-primary,
  .view-draw-shell .view-draw-refresh,
  .view-library-more,
  [data-run-diagnostics],
  .lc-root .lc-send,
  #tpl-x#tpl-x#tpl-x
) {
  --tpl-cap: calc(var(--tpl-h, 44px) * var(--tpl-cap-ratio));
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--tpl-h, 44px) !important;
  min-height: 0 !important;
  min-width: calc(var(--tpl-cap) * 2 + 24px) !important;
  padding: 0 calc(var(--tpl-cap) * .62) !important;
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-image-source: var(--tpl-button-image) !important;
  border-image-slice: 0 var(--tpl-cap-slice) fill !important;
  border-image-width: 0 var(--tpl-cap) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  font-weight: 700;
  line-height: 1.1 !important;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .16));
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
:is(#app #cardsScroll .card-grid > .card > .go, #tpl-x#tpl-x#tpl-x) { --tpl-h: 32px; font-size: 13px; }
:is(.view-library-more, [data-run-diagnostics], #tpl-x#tpl-x#tpl-x) { --tpl-h: 48px; }
:is(.lc-root .lc-send, #tpl-x#tpl-x#tpl-x) { --tpl-h: 42px; }

:is(.view-library-more, [data-run-diagnostics], .lc-root .lc-send, .view-draw-shell .view-draw-refresh, #tpl-x#tpl-x#tpl-x):hover { transform: translateY(-1px); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22)); }
:is(.view-library-more, [data-run-diagnostics], .lc-root .lc-send, #tpl-x#tpl-x#tpl-x):active { transform: translateY(1px); }
:is(.view-library-more, .lc-root .lc-send, .view-community-submission-primary, .view-draw-shell .view-draw-refresh, .view-access-submit, #tpl-x#tpl-x#tpl-x):disabled { opacity: .55 !important; cursor: default; transform: none; filter: none; }

/* 加载更多：居中、宽度适中（不再整行铺满） */
.view-library-more { display: flex !important; width: min(300px, 82%) !important; margin: 18px auto 8px !important; }
.view-library-more[hidden] { display: none !important; }
[data-run-diagnostics] { min-width: 180px !important; }

/* 音乐播放器：跟随模板颜色，不再是浏览器默认灰条 */
main audio {
  display: block;
  width: 100%;
  height: 46px;
  border-radius: 999px;
  accent-color: var(--ng-accent, #6550ce);
  color-scheme: light;
  background: color-mix(in srgb, var(--ng-accent, #6550ce) 16%, var(--ng-panel-solid, #fff));
  border: 1px solid color-mix(in srgb, var(--ng-accent, #6550ce) 35%, transparent);
}
html[data-view-palette="dark"] main audio { color-scheme: dark; }
main audio::-webkit-media-controls-panel { background: transparent; }

/* 星空宇宙模板的顶部星球插画是给深色背景画的：白底时只剩一条被裁剪的灰色色块，白底下不显示 */
html:not([data-view-palette="dark"]) .view-palette-hero-art { display: none !important; }

/* 加载更多：宽度适中居中（压过原模板的整行宽） */
:is(.view-library-more, #tpl-x#tpl-x#tpl-x) { width: min(300px, 82%) !important; }