.page-products{
  --p-gap: clamp(18px, 3vw, 32px);
  --p-aside: 240px;
  --p-card-pad: clamp(18px, 2.2vw, 26px);
  color: var(--c-text);
}

.page-products .breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: calc(var(--header-h) + 16px);
  font-size: .8125rem;
  color: var(--c-muted);
}
.page-products .breadcrumb__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-products .breadcrumb__item + .breadcrumb__item::before{
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--line);
}
.page-products .breadcrumb__item a{
  color: var(--c-muted);
  text-decoration: none;
}
.page-products .breadcrumb__item a:hover,
.page-products .breadcrumb__item a:focus-visible{
  color: var(--c-neon);
}
.page-products .breadcrumb__item[aria-current="page"]{
  color: var(--c-text);
}

/* ---------- 首屏 ---------- */
.page-products .p-hero{
  position: relative;
  margin-top: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--c-ink);
  box-shadow: var(--glow);
  overflow: hidden;
}
.page-products .p-hero__grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 92% at 76% 8%, #000 8%, transparent 74%);
  mask-image: radial-gradient(120% 92% at 76% 8%, #000 8%, transparent 74%);
}
.page-products .p-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--p-gap);
  padding: clamp(22px, 3.4vw, 46px);
}
.page-products .p-hero__copy{
  min-width: 0;
}
.page-products .p-hero__title{
  margin: 10px 0 0;
  max-width: 20ch;
  overflow-wrap: break-word;
}
.page-products .p-hero__lede{
  margin-top: 16px;
  max-width: 54ch;
  color: var(--c-muted);
}
.page-products .p-hero__chips{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.page-products .p-hero__chips li{
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--c-neon-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(18, 66, 55, .5);
}
.page-products .p-hero__media{
  margin: 0;
  min-width: 0;
}
.page-products .p-hero__media .media-frame__img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.page-products .media-frame__caption{
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.page-products .media-frame__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  object-fit: cover;
}

/* ---------- 状态条 ---------- */
.page-products .p-status{
  margin-top: 22px;
}
.page-products .status-strip{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.page-products .status-item{
  min-width: 0;
  background: var(--c-panel);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-products .status-item__v{
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--c-neon);
}
.page-products .status-item__k{
  font-size: .8125rem;
  color: var(--c-muted);
}

/* ---------- 主栅格 ---------- */
.page-products .dash{
  display: flex;
  flex-direction: column;
  gap: var(--p-gap);
  margin-top: clamp(26px, 4vw, 50px);
}
.page-products .dash__main{
  min-width: 0;
  display: grid;
  gap: clamp(6px, 1.4vw, 14px);
}
.page-products .dash__aside{
  order: -1;
  min-width: 0;
}
.page-products .index-card{
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  padding: 16px;
}
.page-products .index-card__title{
  margin: 0 0 12px;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--c-muted);
}
.page-products .index-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-products .index-link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: var(--c-muted);
  font-size: .9rem;
  text-decoration: none;
}
.page-products .index-link .num{
  font-size: .75rem;
  color: var(--c-neon);
}
.page-products .index-link:hover,
.page-products .index-link:focus-visible{
  color: var(--c-text);
  background: rgba(18, 66, 55, .6);
  border-left-color: var(--c-neon);
}

/* ---------- 通用小注 ---------- */
.page-products .p-note{
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--c-muted);
  font-size: .9375rem;
}

/* ---------- 总览卡 ---------- */
.page-products .overview-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.page-products .ov-card{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--p-card-pad);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18, 66, 55, .35), rgba(11, 48, 40, .92));
  transition: border-color .2s ease, transform .2s ease;
}
.page-products .ov-card:hover{
  border-color: var(--line);
  transform: translateY(-2px);
}
.page-products .ov-card__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.page-products .ov-card__title{
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.page-products .ov-card__meta{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--c-muted);
  white-space: nowrap;
}
.page-products .ov-card__body{
  margin: 0;
  font-size: .9375rem;
  color: var(--c-muted);
}
.page-products .ov-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.page-products .ov-card__tags span{
  font-size: .75rem;
  color: var(--c-neon-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ---------- 规则展开层 ---------- */
.page-products .rule-list{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.page-products .rule-item{
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  overflow: hidden;
}
.page-products .rule-item[data-open]{
  border-color: var(--line);
}
.page-products .rule-item__head{
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.page-products .rule-item__head:focus-visible{
  outline: 2px solid var(--c-neon);
  outline-offset: -2px;
}
.page-products .rule-item__index{
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--c-neon);
}
.page-products .rule-item__label{
  display: block;
  min-width: 0;
}
.page-products .rule-item__title{
  display: block;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.page-products .rule-item__note{
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--c-muted);
}
.page-products .rule-item__mark{
  justify-self: end;
}
.page-products .rule-item__inner{
  padding: 0 18px 18px 18px;
}
.page-products .rule-item__content{
  color: var(--c-muted);
  font-size: .9375rem;
}
.page-products .rule-item__content p{
  margin: 0;
}
.page-products .compare{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.page-products .compare__row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(4, 26, 21, .5);
}
.page-products .compare__row--now{
  border-color: rgba(79, 227, 193, .35);
  background: rgba(18, 66, 55, .45);
}
.page-products .compare__tag{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--c-muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}
.page-products .compare__row--now .compare__tag{
  color: var(--c-neon);
  border-color: rgba(79, 227, 193, .4);
}
.page-products .compare__text{
  margin: 0;
  font-size: .9rem;
}

/* ---------- 段位 ---------- */
.page-products .rank-layout{
  display: grid;
  gap: var(--p-gap);
  margin-top: 18px;
}
.page-products .rank-scale{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.page-products .rank-group{
  min-width: 0;
}
.page-products .rank-group__cells{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.page-products .rank-cell{
  display: block;
  height: 26px;
  border-radius: 4px;
  background: var(--c-float);
  border: 1px solid var(--line-soft);
}
.page-products .rank-group--top .rank-cell{
  background: linear-gradient(180deg, var(--c-gold), rgba(232, 176, 75, .32));
  border-color: rgba(232, 176, 75, .5);
}
.page-products .rank-group__label{
  display: block;
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--c-muted);
}
.page-products .rank-rows{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.page-products .rank-row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--c-panel);
  font-size: .9rem;
}
.page-products .rank-row__name{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.page-products .rank-row__stars{
  display: flex;
  gap: 4px;
}
.page-products .rank-row__stars i{
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(232, 176, 75, .28);
}
.page-products .rank-row__stars i.is-on{
  background: var(--c-gold);
}
.page-products .rank-row__range{
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--c-neon-soft);
  white-space: nowrap;
}

/* ---------- 残局 ---------- */
.page-products .chapter-strip{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.page-products .chapter-seg{
  position: relative;
  overflow: hidden;
  padding: 10px 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--c-panel);
}
.page-products .chapter-seg::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--c-neon);
  opacity: .85;
}
.page-products .chapter-seg__i{
  display: block;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--c-neon);
}
.page-products .chapter-seg__r{
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--c-muted);
}
.page-products .chapter-list{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .chapter-item{
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
}
.page-products .chapter-item__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.page-products .chapter-item__num{
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--c-neon);
}
.page-products .chapter-item__range{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--c-gold);
}
.page-products .chapter-item__desc{
  margin: 0;
  font-size: .9rem;
  color: var(--c-muted);
}
.page-products .endgame-media{
  margin: 20px 0 0;
}

/* ---------- 禁手 ---------- */
.page-products .foul-layout{
  display: grid;
  gap: var(--p-gap);
  margin-top: 18px;
}
.page-products .foul-media{
  margin: 0;
}
.page-products .foul-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .foul{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(226, 75, 63, .32);
  border-left: 3px solid var(--c-red);
  border-radius: var(--radius);
  background: rgba(226, 75, 63, .07);
}
.page-products .foul__code{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--c-red);
  border: 1px solid rgba(226, 75, 63, .45);
  border-radius: 6px;
  padding: 2px 7px;
  height: max-content;
}
.page-products .foul__text{
  margin: 0;
  font-size: .9375rem;
}
.page-products .foul__when{
  display: block;
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--c-muted);
}

/* ---------- 重连 ---------- */
.page-products .reconnect-layout{
  display: grid;
  gap: var(--p-gap);
  margin-top: 18px;
}
.page-products .rc-figure{
  margin: 0;
  padding: 18px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
}
.page-products .rc-svg{
  width: 100%;
  height: auto;
  display: block;
}
.page-products .rc-svg__axis{
  stroke: var(--line);
  stroke-width: 1;
}
.page-products .rc-svg__path{
  fill: none;
  stroke: var(--c-neon);
  stroke-width: 2;
  opacity: .85;
}
.page-products .rc-svg__nodes circle{
  fill: var(--c-neon);
}
.page-products .rc-svg__node--key{
  fill: var(--c-gold);
  stroke: rgba(232, 176, 75, .3);
  stroke-width: 6;
}
.page-products .steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .step{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
}
.page-products .step__index{
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--c-neon);
}
.page-products .step__body{
  margin: 0;
  font-size: .9375rem;
  color: var(--c-muted);
}
.page-products .step__body strong{
  color: var(--c-text);
  font-weight: 700;
}
.page-products .step--key{
  border-color: rgba(232, 176, 75, .4);
  background: rgba(232, 176, 75, .06);
}
.page-products .step--key .step__index{
  color: var(--c-gold);
}

/* ---------- 房间 ---------- */
.page-products .room-layout{
  display: grid;
  gap: var(--p-gap);
  margin-top: 18px;
}
.page-products .room-media{
  margin: 0;
}
.page-products .room-panel{
  display: grid;
  gap: 14px;
  padding: var(--p-card-pad);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
}
.page-products .room-panel__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.page-products .room-panel__row:last-of-type{
  padding-bottom: 0;
  border-bottom: 0;
}
.page-products .room-panel__k{
  font-size: .9rem;
  color: var(--c-muted);
}
.page-products .room-panel__v{
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--c-neon);
  text-align: right;
}
.page-products .seat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.page-products .seat{
  padding: 12px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--c-muted);
}
.page-products .seat--filled{
  border-style: solid;
  border-color: rgba(79, 227, 193, .4);
  color: var(--c-neon-soft);
  background: rgba(18, 66, 55, .5);
}

/* ---------- 收束 ---------- */
.page-products .closing{
  margin-top: clamp(22px, 4vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
}
.page-products .closing-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 断点 ---------- */
@media (min-width: 680px){
  .page-products .overview-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .ov-card--wide{
    grid-column: span 2;
  }
  .page-products .chapter-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px){
  .page-products .status-strip{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .chapter-strip{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .page-products .rank-scale{
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (min-width: 900px){
  .page-products .p-hero__inner{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }
  .page-products .rank-layout{
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
  .page-products .foul-layout{
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
  .page-products .reconnect-layout{
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: start;
  }
  .page-products .room-layout{
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1040px){
  .page-products .status-strip{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1080px){
  .page-products .dash{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--p-aside);
    align-items: start;
  }
  .page-products .dash__aside{
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }
  .page-products .overview-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .rule-item__inner{
    padding-left: 56px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .ov-card,
  .page-products .rule-item__body{
    transition: none;
  }
  .page-products .ov-card:hover{
    transform: none;
  }
}