@charset "UTF-8";
.systems-page { --systems-accent: #a5e4ed; }
.systems-page .systems-hero { padding-block: 42px 45px; }
.systems-page .systems-hero h1 { line-height: 1.4; }
/* guides.css 全站共用，上限 56px；這頁在寬螢幕改成和新手入門、遊戲指南同樣的 54px */
@media (min-width: 1350px) { .systems-page .systems-hero h1 { font-size: 54px; } }
.systems-page .systems-hero .guide-lead { max-width: 610px; }
.systems-page .systems-hero-art { position: relative; }
.systems-page .systems-hero-art::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: #507dba16; filter: blur(35px); pointer-events: none; }
.systems-page .systems-hero-illustration::before { content: none; }
.systems-page .systems-hero-art svg { position: relative; filter: drop-shadow(0 0 30px #6daedb16); }
.systems-page .systems-hero-illustration { width: 100%; margin: 0; align-self: center; }
.systems-page .systems-hero-illustration img { display: block; width: min(100%,460px); height: auto; }
.systems-page .systems-hero-illustration figcaption { color: #8fa8bb; text-align: center; font-size: 11px; letter-spacing: .5px; margin-top: 0; }
.systems-page .systems-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.systems-page .systems-beginner-link { color: #aac0d1; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.systems-page .systems-beginner-link:hover { color: #e0f6ff; }
.systems-page .systems-hero-note { margin-top: 18px; }
.systems-page .systems-intro-note { margin-top: 15px; padding: 22px 27px; background: linear-gradient(100deg,#152339b3,#111d2c55); }
.systems-page #systems-list { scroll-margin-top: 100px; }
.systems-page .systems-filter-bar { margin-bottom: 12px; gap: 18px; }
.systems-page .system-filter-buttons { gap: 7px; }
.systems-page .system-filter-buttons button { display: inline-flex; align-items: center; gap: 11px; padding-inline: 15px; cursor: pointer; transition: border-color .2s,background .2s,color .2s; }
.systems-page [data-system-filter-count] { font-size: 11px; font-variant-numeric: tabular-nums; color: #8ca6bc; border-left: 1px solid #8da4b137; padding-left: 10px; }
.systems-page [aria-pressed="true"] [data-system-filter-count] { color: #c7f2fc; border-color: #a7e4f345; }
.systems-page .system-search { min-width: 270px; }
.systems-page .system-search kbd { color: #71889b; padding: 1px 6px; border: 1px solid #8ba9c234; border-radius: 3px; font: 12px Georgia,serif; }
.systems-page .system-search:focus-within kbd { visibility: hidden; }
.systems-page .systems-search-help { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; min-height: 36px; }
.systems-page .systems-motion-toggle { flex-shrink: 0; min-height: 36px; padding: 6px 12px; border: 1px solid #87a7bd40; background: transparent; color: #a9c5d6; font: inherit; font-size: 12px; cursor: pointer; }
.systems-page .systems-motion-toggle:hover { color: #dbf5ff; border-color: #9bcfe27a; background: #173044; }
.systems-page .systems-search-help { flex-wrap: wrap; }
.systems-page .systems-search-help > p { flex: 1 1 360px; }
.systems-page .systems-search-help p { color: #93a9bb; font-size: 12px; margin: 0; }
.systems-page .systems-reset { flex-shrink: 0; display: inline-flex; align-items: center; gap: 13px; border: 0; background: transparent; padding: 8px 0 8px 12px; color: #b6d5e4; font: inherit; font-size: 12px; cursor: pointer; min-height: 36px; }
.systems-page .systems-reset:hover { color: #e4f5ff; }
.systems-page .system-card-featured { display: flex; flex-direction: column; }
.systems-page .system-card-featured .system-card-body { display: flex; flex-direction: column; flex: 1; }
.systems-page .system-card-featured .system-link { margin-top: auto; align-self: flex-start; }
.systems-page .system-card { overflow: hidden; }
.systems-page .system-card:focus-within { border-color: #9bcae487; }
.systems-page .system-link .icon { flex-shrink: 0; transition: transform .2s; }
.systems-page .system-link:hover .icon { transform: translateX(4px); }
.systems-page .system-card p.system-tag { color: #b6acd8; font-size: 10px; letter-spacing: 1px; }
.systems-page .system-art { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; height: 204px; min-height: 204px; padding: 8px 18px 0; background: none; }
.systems-page .system-art-slot { display: flex; align-items: center; justify-content: center; flex: 0 0 160px; width: 100%; min-width: 0; height: 160px; min-height: 0; overflow: hidden; }
.systems-page .system-art-slot > img { display: block; width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.systems-page .art-poly .system-art-slot { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; }
.systems-page .art-poly .system-art-slot > img { width: 200%; max-width: none; max-height: none; }
.systems-page .system-art > span { position: static; height: 20px; line-height: 20px; flex-shrink: 0; }
.systems-page .other-systems { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.systems-page .other-systems .system-card { border-top-color: #a6bfd347; }
.systems-page .other-systems .system-card h3 { font-size: 20px; }
.systems-page .other-systems .system-card-illustrated { display: flex; flex-direction: column; }
.systems-page .system-card-illustration { display: flex; align-items: center; justify-content: center; flex: 0 0 176px; width: 100%; min-width: 0; height: 176px; min-height: 0; padding: 16px 20px 0; }
.systems-page .system-card-illustration > img { display: block; width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.systems-page .system-rate-illustration { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 8px; padding-inline: 12px; }
.systems-page .system-rate-item { display: grid; grid-template-rows: minmax(0,1fr) 20px; align-items: center; justify-items: center; gap: 6px; min-width: 0; min-height: 0; height: 100%; }
.systems-page .system-rate-item > img { display: block; width: 100%; min-width: 0; max-width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.systems-page .system-rate-item > span { color: #9eb5c6; font-size: 11px; line-height: 20px; letter-spacing: 1px; }
.systems-page .other-systems .system-card-illustrated .system-card-body { height: auto; flex: 1; padding-top: 20px; }
.systems-page .system-card-illustrated .system-card-body > p:not(.system-tag):not(.system-start) { min-height: 76px; }
.systems-page .system-start { color: #9fb8ca; padding-top: 13px; margin-top: 12px; }
.systems-page .system-start strong { color: #bacddd; font-size: 11px; letter-spacing: .5px; }
.systems-page #systems-empty { display: flex; flex-direction: column; align-items: center; padding: 38px 25px; background: #0e1a26; }
.systems-page #systems-empty > .icon { width: 27px; height: 27px; color: #9db7cc; margin-bottom: 15px; }
.systems-page #systems-empty p { margin-bottom: 15px; }
.systems-page #systems-empty strong { display: block; color: #d2e2ed; font-weight: 500; margin-bottom: 8px; }
.systems-page #systems-empty p > span { color: #91aabe; font-size: 13px; }
.systems-page #systems-empty button { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; background: #173045; border: 1px solid #87c8e05c; color: #bfebfa; padding: 10px 18px; font: inherit; font-size: 13px; cursor: pointer; }
.systems-page [data-system-card][hidden], .systems-page .featured-systems[hidden], .systems-page .other-systems[hidden], .systems-page #systems-empty[hidden], .systems-page .systems-reset[hidden] { display: none !important; }
.systems-page .systems-next-links { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; flex-shrink: 0; }
.systems-page .systems-next-links > a:last-child { color: #a6b8c9; font-size: 12px; padding-block: 5px; }
.systems-page button:focus-visible,.systems-page a:focus-visible { outline: 2px solid #b8eaf8; outline-offset: 4px; }
@media (min-width: 1180px) {
  .systems-page .featured-systems { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .systems-page .other-systems { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .systems-page .other-systems .system-card-body { padding-inline: 20px; }
  .systems-page .system-card-illustrated .system-card-body > p:not(.system-tag):not(.system-start) { min-height: 126px; }
  .systems-page .system-card-featured .system-card-body { padding: 20px; }
  .systems-page .system-card-featured h3 { font-size: 23px; }
  .systems-page .system-card-featured .system-card-body > p:not(.system-tag):not(.system-start) { min-height: 126px; }
  .systems-page .system-card-featured .system-link { font-size: 13px; }
}
@media (max-width: 960px) {
  .systems-page .systems-hero { padding-block: 30px; }
  .systems-page .systems-filter-bar { align-items: stretch; }
  .systems-page .system-filter-buttons,.systems-page .system-search { width: 100%; }
  .systems-page .system-filter-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .systems-page .system-filter-buttons button { justify-content: center; padding-inline: 8px; gap: 8px; }
  .systems-page [data-system-filter-count] { padding-left: 7px; }
}
@media (max-width: 640px) {
  .systems-page .systems-hero-art.systems-hero-illustration { width: min(78vw,310px); max-width: 310px; margin: 12px auto 0; }
  .systems-page .systems-hero { gap: 5px; padding-top: 15px; }
  .systems-page .systems-hero .guide-hero-copy { order: -1; }
  .systems-page .systems-hero-art { grid-row: auto; width: 55%; max-width: 220px; margin-block: 5px 0; }
  .systems-page .systems-hero-art > span { display: none; }
  .systems-page .systems-hero-actions { gap: 4px; flex-direction: column; align-items: flex-start; }
  .systems-page .systems-hero-note { font-size: 11px; margin-top: 10px; }
  .systems-page .systems-intro-note { padding: 20px; margin-top: 0; }
  .systems-page .system-filter-buttons { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .systems-page .system-filter-buttons button { justify-content: space-between; padding-inline: 13px; min-height: 46px; }
  .systems-page .systems-search-help { flex-wrap: wrap; gap: 3px; margin-bottom: 22px; }
  .systems-page .systems-search-help p { font-size: 11px; line-height: 1.9; }
  .systems-page .systems-reset { margin-left: auto; }
  .systems-page .system-card-featured { display: grid; grid-template-columns: 76px minmax(0,1fr); }
  .systems-page .system-card-featured .system-art { min-height: 64px; height: 64px; margin-top: 24px; padding: 0 6px; align-self: start; overflow: hidden; }
  .systems-page .system-art-slot { flex-basis: 64px; width: 64px; max-width: 100%; height: 64px; }
  .systems-page .art-poly .system-art-slot { width: 64px; }
  .systems-page .system-card-featured .system-art > span { display: none; }
  .systems-page .system-card-featured .system-card-body { padding: 22px 20px 20px 5px; }
  .systems-page .system-card-featured h3 { font-size: 22px; }
  .systems-page .system-card p { font-size: 13px; }
  .systems-page .featured-systems { gap: 14px; }
  .systems-page .other-systems { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .systems-page .other-systems .system-card-body { padding: 23px; }
  .systems-page .other-systems .system-card-illustrated { display: grid; grid-template-columns: 76px minmax(0,1fr); }
  .systems-page .system-card-illustration { width: 76px; height: 64px; padding: 0 6px; margin-top: 24px; align-self: start; }
  .systems-page .system-rate-illustration { gap: 2px; padding-inline: 3px; }
  .systems-page .system-rate-item { grid-template-rows: minmax(0,1fr); gap: 0; }
  .systems-page .system-rate-item > span { display: none; }
  .systems-page .other-systems .system-card-illustrated .system-card-body { padding: 22px 20px 20px 5px; }
  .systems-page .system-card-illustrated .system-card-body > p:not(.system-tag):not(.system-start) { min-height: 0; }
  .systems-page .systems-next-links { align-items: stretch; width: 100%; }
  .systems-page .systems-next-links > a:last-child { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .systems-page .system-link .icon,.systems-page .system-filter-buttons button { transition: none; } }