.palya-page {
  background: var(--color-cloud-white);
}

.palya-page section[id] {
  scroll-margin-top: 7rem;
}

.palya-hero,
.palya-map-section,
.palya-lanes,
.palya-jungle,
.palya-objectives,
.palya-rotations,
.palya-teamfight,
.palya-recap {
  padding-block: var(--space-18);
}

.palya-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 1.25rem;
}

.palya-hero__grid > * { min-width: 0; width: 100%; }

.palya-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-5);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-inline-start: 4px solid var(--color-cobalt-blue);
  clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%);
}

.palya-hero__copy > * { margin: 0; }
.palya-hero__copy .eyebrow span,
.palya-page .eyebrow span { color: var(--color-cobalt-blue); }
.palya-hero__copy h1 { width: 100%; font-size: clamp(3rem, 5.2vw, 4rem); }
.palya-hero__lead { max-width: 36.875rem; font-size: var(--text-intro); line-height: var(--line-intro); }
.palya-hero__cta { width: auto; }

.palya-hero__route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 2px solid var(--color-electric-cyan);
  list-style: none;
  gap: var(--space-3);
}

.palya-hero__route li { display: flex; flex-direction: column; min-width: 0; gap: var(--space-1); }
.palya-hero__route strong { font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.1; }
.palya-hero__route span { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.35; }

.palya-hero__media { position: relative; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--color-aluminium-line); border-radius: var(--radius-md); aspect-ratio: 16 / 10; background: var(--color-mist-blue); }
.palya-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.palya-hero__media::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(23,33,43,.18), transparent 48%); }
.palya-hero__line { position: absolute; z-index: 1; height: 2px; background: var(--color-electric-cyan); transform-origin: left center; opacity: .86; }
.palya-hero__line--one { top: 30%; left: 8%; width: 55%; transform: rotate(18deg); }
.palya-hero__line--two { top: 66%; left: 22%; width: 48%; transform: rotate(-25deg); background: var(--color-cobalt-blue); }

.palya-map-section { background: var(--color-mist-blue); }
.palya-map-section__intro { width: min(100%, 43.75rem); }
.palya-map-section__intro p:last-child { max-width: 43.75rem; }

.palya-map-controls { display: flex; flex-wrap: wrap; width: 100%; margin-block: var(--space-6) var(--space-4); gap: var(--space-2); }
.palya-map-controls > * { flex: 0 1 auto; min-width: 5rem; }
.palya-filter { min-height: 2.75rem; padding: .625rem var(--space-4); border: 1px solid var(--color-cobalt-blue); border-radius: var(--radius-sm); background: rgba(255,255,255,.7); color: var(--color-cobalt-blue); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; }
.palya-filter.is-active { border-color: var(--color-cobalt-blue); background: var(--color-cobalt-blue); color: #fff; box-shadow: inset 0 -2px 0 var(--color-electric-cyan); }

.palya-map-scroll { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: var(--space-2); border: 1px solid var(--color-aluminium-line); background: #fff; }
.palya-map-board { position: relative; width: 100%; min-width: 700px; height: clamp(29rem, 56vw, 40rem); overflow: hidden; background: #eaf1fb; }
.palya-map-board__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,207,232,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(0,207,232,.22) 1px, transparent 1px); background-size: 32px 32px; }
.palya-map-board__river { position: absolute; top: -8%; left: 44%; width: 12%; height: 116%; transform: rotate(40deg); border-inline: 3px solid var(--color-electric-cyan); background: rgba(0,207,232,.15); }
.palya-map-board__river::after { position: absolute; top: 50%; left: -180%; width: 460%; height: 3px; content: ""; transform: rotate(-73deg); background: var(--color-cobalt-blue); opacity: .5; }

.palya-route { position: absolute; z-index: 2; height: 3px; transform-origin: left center; background: var(--color-cobalt-blue); transition: opacity var(--transition-fast), filter var(--transition-fast); }
.palya-route::after { position: absolute; top: 50%; right: -1px; width: 0; height: 0; content: ""; transform: translateY(-50%); border-block: 7px solid transparent; border-left: 11px solid currentColor; color: inherit; }
.palya-route span { position: absolute; top: -1.75rem; left: 0; min-width: max-content; color: var(--color-graphite); font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.palya-route--exp { top: 25%; left: 7%; width: 47%; transform: rotate(26deg); color: var(--color-cobalt-blue); }
.palya-route--gold { top: 75%; left: 10%; width: 45%; transform: rotate(-27deg); color: var(--color-tangerine-orange); }
.palya-route--mid { top: 50%; left: 12%; width: 76%; transform: rotate(0); background: var(--color-electric-cyan); color: var(--color-electric-cyan); }
.palya-route--jungle { top: 18%; left: 34%; width: 41%; transform: rotate(72deg); border-top: 3px dashed var(--color-cobalt-blue); background: transparent; color: var(--color-cobalt-blue); }
.palya-map-board[data-active-role="exp"] .palya-route:not(.palya-route--exp),
.palya-map-board[data-active-role="gold"] .palya-route:not(.palya-route--gold),
.palya-map-board[data-active-role="mid"] .palya-route:not(.palya-route--mid),
.palya-map-board[data-active-role="jungle"] .palya-route:not(.palya-route--jungle) { opacity: .16; filter: grayscale(1); }

.palya-marker { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 6.5rem; min-height: 3.5rem; padding: .3rem; border: 1px solid var(--color-graphite); border-radius: 0; background: rgba(247,249,252,.92); color: var(--color-graphite); font-size: .7rem; font-weight: 700; line-height: 1.1; text-align: center; }
.palya-marker > span:first-child { color: var(--color-cobalt-blue); font-size: 1.15rem; }
.palya-marker--base-a { bottom: 7%; left: 5%; }.palya-marker--base-b { top: 7%; right: 5%; }.palya-marker--tower-a { top: 32%; left: 22%; }.palya-marker--tower-b { bottom: 31%; right: 20%; }.palya-marker--river { top: 42%; left: 45%; }.palya-marker--buff-a { top: 16%; left: 35%; }.palya-marker--buff-b { bottom: 16%; right: 33%; }.palya-marker--boss { top: 36%; right: 34%; border: 2px solid var(--color-tangerine-orange); }.palya-marker--boss > span:first-child { color: var(--color-tangerine-orange); }.palya-marker--lane { bottom: 11%; left: 43%; }
.palya-map-scroll__cue { display: none; }

.palya-map-info { width: min(100%, 31.25rem); min-height: 8.5rem; margin-top: var(--space-4); padding: var(--space-4); border-inline-start: 4px solid var(--color-electric-cyan); background: #fff; }
.palya-map-info h3, .palya-map-info p { margin: 0; }.palya-map-info { display: grid; gap: var(--space-2); }.palya-map-info__panel { display: grid; gap: var(--space-2); }.palya-map-info__panel p, .palya-map-info__default p { max-width: 31.25rem; }
.palya-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: var(--space-5) 0 0; gap: var(--space-3); }
.palya-legend > div { min-width: 0; }.palya-legend dt { display: flex; align-items: center; gap: var(--space-2); font-size: .82rem; font-weight: 700; }.palya-legend dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: .75rem; line-height: 1.35; }.legend-line { width: 1.75rem; height: 3px; }.legend-line--cobalt { background: var(--color-cobalt-blue); }.legend-line--cyan { border-top: 3px dashed var(--color-electric-cyan); }.legend-objective { color: var(--color-tangerine-orange); font-size: 1.25rem; }.legend-shield { color: var(--color-graphite); }

.palya-lanes__intro { width: min(100%, 42.5rem); }.palya-lanes__intro p:last-child { max-width: 42.5rem; }
.palya-lane-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: var(--space-6); gap: 1.25rem; }
.palya-lane-grid > * { min-width: 0; width: 100%; }
.palya-lane-card { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-aluminium-line); border-top: 4px solid var(--color-electric-cyan); border-radius: var(--radius-md); background: #fff; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.palya-lane-card--gold { border-top-color: var(--color-tangerine-orange); }.palya-lane-card--mid { border-top-color: var(--color-cobalt-blue); }.palya-lane-card:hover, .palya-lane-card:focus-within { transform: translateY(-2px); border-color: var(--color-cobalt-blue); box-shadow: var(--shadow-card); }.palya-lane-card > * { margin: 0; }.palya-lane-card h3 { font-size: 1.75rem; }.palya-lane-card ol { display: flex; flex-direction: column; margin: 0; padding-left: 1.3rem; gap: var(--space-2); }.palya-lane-card li { font-size: .92rem; }.palya-map-jump { width: 100%; margin-top: auto; border: 1px solid var(--color-cobalt-blue); background: transparent; color: var(--color-cobalt-blue); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; }

.palya-jungle { background: var(--color-mist-blue); }.palya-jungle__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 2.5rem; }.palya-jungle__grid > * { min-width: 0; width: 100%; }.palya-jungle__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }.palya-jungle__content > * { margin: 0; }.palya-jungle__lead { max-width: 37.5rem; }.palya-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; gap: var(--space-2); }.palya-timeline li { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 1.8rem; gap: var(--space-2); }.palya-timeline li::before { position: absolute; top: .5rem; left: 0; width: 100%; height: 2px; content: ""; background: var(--color-cobalt-blue); }.palya-timeline li:last-child::before { background: var(--color-tangerine-orange); }.palya-timeline strong { color: var(--color-cobalt-blue); font-family: var(--font-heading); font-size: 1rem; line-height: 1.1; }.palya-timeline span { font-size: .78rem; line-height: 1.38; }.palya-jungle__button { width: auto; }.palya-pressure { display: grid; width: 100%; padding: var(--space-5); border: 1px solid var(--color-graphite); border-radius: var(--radius-md); background: var(--color-graphite); color: #fff; gap: var(--space-3); }.palya-pressure h3, .palya-pressure p { margin: 0; color: inherit; }.palya-pressure::before { width: 100%; height: 1px; content: ""; background: repeating-linear-gradient(90deg, var(--color-electric-cyan) 0 8px, transparent 8px 14px); }.palya-jungle__media { width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--color-aluminium-line); border-radius: var(--radius-md); aspect-ratio: 4 / 3; }.palya-jungle__media img { width: 100%; height: 100%; object-fit: cover; }

.palya-objectives__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 1.25rem; }.palya-objectives__top > * { min-width: 0; width: 100%; }.palya-objectives__copy { width: min(100%, 40.625rem); }.palya-objectives__media { margin: 0; }.palya-objectives__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--color-aluminium-line); border-radius: var(--radius-md); }.palya-objectives__media figcaption { max-width: 100%; }.palya-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: var(--space-6); gap: 1.25rem; }.palya-decision-grid > * { min-width: 0; width: 100%; }.palya-decision-card { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-aluminium-line); border-top: 4px solid var(--color-tangerine-orange); border-radius: var(--radius-md); background: #fff; }.palya-decision-card > * { margin: 0; }.palya-decision-toggle { width: 100%; margin-top: auto; border: 1px solid var(--color-cobalt-blue); color: var(--color-cobalt-blue); font-family: var(--font-heading); font-weight: 700; }.palya-decision-detail { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-aluminium-line); }.palya-decision-detail p { margin: 0; font-size: .9rem; }.palya-objectives__note { display: grid; width: min(100%, 40.625rem); margin-top: var(--space-6); padding-left: var(--space-5); border-left: 3px solid var(--color-electric-cyan); gap: var(--space-2); }.palya-objectives__note > * { margin: 0; }

.palya-rotations { background: var(--color-cloud-white); }.palya-rotations__intro { width: min(100%, 42.5rem); }.palya-rotation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: var(--space-6); gap: 1.25rem; }.palya-rotation-grid > * { min-width: 0; width: 100%; }.palya-rotation-card { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-aluminium-line); border-radius: var(--radius-md); background: #fff; }.palya-rotation-card > * { margin: 0; }.palya-rotation-card--dark { border-color: var(--color-graphite); background: var(--color-graphite); color: #fff; }.palya-rotation-card--dark h3 { color: #fff; }.palya-arrow { display: flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-3); border-bottom: 3px solid currentColor; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }.palya-arrow--exp { color: var(--color-cobalt-blue); }.palya-arrow--gold { color: var(--color-tangerine-orange); }.palya-arrow--mid { color: #008ca0; }.palya-arrow--jungle { color: var(--color-electric-cyan); }.palya-rotation-card--dark .palya-map-jump { border-color: var(--color-electric-cyan); color: var(--color-electric-cyan); }.palya-retreat { display: grid; width: 100%; margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-graphite); background: var(--color-graphite); color: #fff; gap: var(--space-2); }.palya-retreat > * { width: min(100%, 42.5rem); margin: 0; }.palya-retreat h3 { color: #fff; }

.palya-teamfight { background: var(--color-mist-blue); }.palya-teamfight__intro { width: min(100%, 42.5rem); }.palya-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: var(--space-6); gap: 1.25rem; }.palya-check-grid > * { min-width: 0; width: 100%; }.palya-check-panel { display: flex; flex-direction: column; min-width: 0; padding: var(--space-5); border: 1px solid var(--color-aluminium-line); border-top: 4px solid var(--color-cobalt-blue); border-radius: var(--radius-md); background: #fff; gap: var(--space-3); }.palya-check-panel--fight { border-top-color: var(--color-electric-cyan); }.palya-check-panel > * { margin: 0; }.palya-check-panel__heading { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: var(--space-3); }.palya-check-panel__heading > * { min-width: 0; margin: 0; }.palya-clear-checks { min-height: 2.25rem; padding-inline: var(--space-3); border: 1px solid var(--color-aluminium-line); color: var(--color-cobalt-blue); font-size: .8rem; font-weight: 700; white-space: nowrap; }.palya-check-panel label { display: flex; align-items: center; min-height: 2.75rem; margin: 0; padding-block: var(--space-2); border-top: 1px solid var(--color-aluminium-line); color: var(--color-graphite); font-size: .93rem; font-weight: 500; gap: var(--space-3); }.palya-check-panel label:first-of-type { margin-top: var(--space-2); }

.palya-recap__intro { width: min(100%, 42.5rem); }.palya-recap-list { display: grid; width: 100%; margin: var(--space-6) 0 0; padding: 0; list-style: none; }.palya-recap-list li { display: grid; grid-template-columns: minmax(3rem, 2fr) minmax(0, 6fr) minmax(0, 4fr); min-width: 0; padding-block: var(--space-4); border-top: 1px solid var(--color-aluminium-line); cursor: default; }.palya-recap-list li:last-child { border-bottom: 1px solid var(--color-aluminium-line); }.palya-recap-list li > span { grid-column: 1; color: var(--color-graphite); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; }.palya-recap-list li > div { grid-column: 2; min-width: 0; }.palya-recap-list h3, .palya-recap-list p { margin: 0; }.palya-recap-list p { margin-top: var(--space-2); max-width: 35rem; }.palya-recap-list li:focus-visible { position: relative; outline: 3px solid var(--color-focus-outline); outline-offset: 2px; }.palya-related { margin-top: var(--space-8); }.palya-related > h3 { margin-bottom: var(--space-4); }.palya-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 1.25rem; }.palya-related__grid > * { min-width: 0; width: 100%; }.palya-related a { display: flex; flex-direction: column; min-height: 9rem; padding: var(--space-4); border: 1px solid var(--color-aluminium-line); border-radius: var(--radius-md); background: #fff; color: var(--color-graphite); text-decoration: none; gap: var(--space-2); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }.palya-related a:hover { transform: translateY(-2px); border-color: var(--color-cobalt-blue); box-shadow: var(--shadow-card); color: var(--color-graphite); }.palya-related strong { color: var(--color-cobalt-blue); font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.1; }.palya-related span { color: var(--color-text-muted); font-size: .87rem; line-height: 1.4; }

@media (max-width: 63.999rem) {
  .palya-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }.palya-hero__copy { max-width: 42.5rem; }.palya-hero__media { aspect-ratio: 16 / 10; }
  .palya-lane-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.palya-lane-card--mid { grid-column: 1 / span 1; }
  .palya-rotation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.palya-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 59.999rem) {
  .palya-jungle__grid { grid-template-columns: 1fr; gap: var(--space-6); }.palya-jungle__media { order: 2; }.palya-objectives__top { grid-template-columns: 1fr; gap: var(--space-5); }.palya-objectives__copy { width: min(100%, 40.625rem); }.palya-objectives__media { max-width: 40.625rem; }.palya-decision-grid { grid-template-columns: 1fr; }.palya-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 47.499rem) {
  .palya-hero,
  .palya-map-section,
  .palya-lanes,
  .palya-jungle,
  .palya-objectives,
  .palya-rotations,
  .palya-teamfight,
  .palya-recap { padding-block: 2.5rem; }
  .palya-hero__copy { padding: var(--space-4); gap: var(--space-4); }.palya-hero__copy h1 { font-size: 2rem; line-height: 1.04; }.palya-hero__lead { font-size: 1.125rem; }.palya-hero__cta { width: 100%; }.palya-hero__route { grid-template-columns: 1fr; gap: var(--space-3); }.palya-hero__route li { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); align-items: baseline; }.palya-hero__route strong, .palya-hero__route span { min-width: 0; }
  .palya-map-controls > * { flex: 1 1 calc(50% - var(--space-2)); }.palya-map-board { min-width: 700px; height: 29rem; }.palya-map-scroll__cue { display: block; position: sticky; left: 0; width: max-content; margin: 0; padding: var(--space-2) var(--space-3); background: linear-gradient(90deg, rgba(234,241,251,.96), rgba(234,241,251,.72)); color: var(--color-graphite); font-size: .75rem; font-weight: 700; }.palya-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palya-lane-grid { grid-template-columns: 1fr; }.palya-lane-card { padding: var(--space-4); }.palya-lane-card--mid { grid-column: auto; }.palya-map-jump { min-height: 2.75rem; }
  .palya-timeline { grid-template-columns: 1fr; gap: 0; }.palya-timeline li { min-height: 4.25rem; padding: 0 0 var(--space-4) 2.5rem; }.palya-timeline li::before { top: 0; left: .6rem; width: 2px; height: 100%; }.palya-timeline li:last-child::before { background: var(--color-tangerine-orange); }.palya-jungle__button { width: 100%; }
  .palya-rotation-grid { grid-template-columns: 1fr; }.palya-rotation-card { padding: var(--space-4); }.palya-check-panel { padding: var(--space-4); }.palya-check-panel__heading { align-items: flex-start; flex-direction: column; }.palya-clear-checks { width: 100%; }
  .palya-recap-list li { grid-template-columns: 1fr; gap: var(--space-2); }.palya-recap-list li > span, .palya-recap-list li > div { grid-column: 1; }.palya-related__grid { grid-template-columns: 1fr; }.palya-related a { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .palya-route,
  .palya-lane-card,
  .palya-related a { transition: none; }
}