/* Page 2 — Format & Rules */

/* ---------- SECTION 1: Format Overview — Ring Gallery ---------- */
.f-ring{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.ring-gallery{
  position: relative; display: grid; place-items: center; overflow: hidden;
  min-height: 340px;
}
.ring-item img{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
}
/* layered positions without overflow */
.ring-item.r-a{ transform: rotate(-3deg) translateY(6px); z-index: 2; }
.ring-item.r-b{ transform: rotate(2deg) translateY(-4px); z-index: 1; }
.ring-decor{
  position: absolute; inset: -10% -10% auto -10%;
  height: 200px;
  background:
    radial-gradient(closest-side, rgba(166,124,255,.22), transparent 70%),
    radial-gradient(closest-side, rgba(107,241,255,.18), transparent 70%);
  filter: blur(16px); pointer-events: none;
  border-radius: 50%;
}
@media (max-width: 920px){
  .f-ring{ grid-template-columns: 1fr; }
  .ring-item.r-a, .ring-item.r-b{ transform: none; }
  .ring-gallery{ min-height: 0; }
}

/* ---------- SECTION 2: BO1 Ruleset — Matrix Strip ---------- */
.rules-matrix{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.matrix-list{
  margin: 10px 0 0; padding-left: 1.15rem;
}
.matrix-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.m-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
.grid-lines{
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.12) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.12) 95%);
  background-size: 18px 18px;
}
@media (max-width: 960px){
  .rules-matrix{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .matrix-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 3: Sprint-Cup Mechanics — Reset Rail ---------- */
.sprint-rail{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.s-steps{
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 10px;
}
.s-steps li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.sprint-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.s-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
.orb{
  position: absolute; right: -20px; bottom: -40px; width: 160px; height: 160px;
  background: radial-gradient(closest-side, rgba(107,241,255,.22), transparent 70%),
              radial-gradient(closest-side, rgba(166,124,255,.18), transparent 70%);
  filter: blur(18px); border-radius: 50%; pointer-events: none;
}
@media (max-width: 980px){
  .sprint-rail{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .sprint-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 4: Device Parity ---------- */
.parity-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.parity-checklist{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.parity-checklist li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.parity-checklist strong{ color: #fff; }
.parity-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.p-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .parity-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .parity-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 5: Officiating Toolkit ---------- */
.officiating-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.off-points{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.off-points li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.off-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.o-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .officiating-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .off-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 6: Map & Mode Pools ---------- */
.pool-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.capsule-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.capsule-list li{
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.capsule-media{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.c-shot{
    margin: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 980px){
  .pool-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .capsule-media{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .capsule-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 7: Code of Play ---------- */
.code-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.conduct-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.conduct-list li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.c-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.c-item{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 920px){
  .code-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .c-gallery{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 8: Spectator UX ---------- */
.spect-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.ux-points{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.ux-points li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.ux-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.ux-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .spect-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .ux-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 9: Admin Dash ---------- */
.admin-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.dash-bullets{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.dash-bullets li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.a-media{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.a-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 980px){
  .admin-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .a-media{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .a-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 10: Venue Flow ---------- */
.flow-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.flow-points{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.flow-points li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.flow-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.flow-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .flow-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .flow-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 11: Player Care ---------- */
.care-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.care-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.care-list li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.care-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.care-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .care-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .care-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 12: Localization ---------- */
.locale-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.tag-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-list li{
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.locale-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.locale-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .locale-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .locale-media{ grid-template-columns: 1fr; }
}
/* ---------- SECTION 13: Disputes ---------- */
.disputes-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.disputes-points{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.disputes-points li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.disputes-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.d-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .disputes-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .disputes-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 14: Data & Privacy ---------- */
.privacy-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.privacy-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.privacy-list li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.privacy-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.pv-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .privacy-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .privacy-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 15: Equipment & Power ---------- */
.equip-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.equip-list{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px;
}
.equip-list li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.equip-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.eq-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .equip-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .equip-media{ grid-template-columns: 1fr; }
}

/* ---------- SECTION 16: Quick Reference ---------- */
.quickref-grid{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(20px,4vw,36px);
  align-items: start;
}
.qr-tags{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.qr-tags li{
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.quickref-media{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.qr-shot{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding: 10px;
}
@media (max-width: 960px){
  .quickref-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .quickref-media{ grid-template-columns: 1fr; }
}
figure {
    margin: 0;
}