.gameplay-page { overflow: clip; }
.gameplay-page .section { position: relative; }
.gameplay-page .container { min-width: 0; }
.gameplay-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8.333%; align-items: center; }
.gameplay-hero__copy { min-width: 0; }
.gameplay-hero__copy .lead { max-width: 36rem; }
.gameplay-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.gameplay-hero__figure, .gameplay-hero__figure figcaption { min-width: 0; }
.gameplay-hero__image { position: relative; aspect-ratio: 9 / 16; max-height: 43rem; margin-inline: auto; }
.gameplay-hero__image img { height: 100%; object-fit: cover; }
.gameplay-marker { position: absolute; border-inline-start: 1px solid var(--color-safety-orange); border-block-end: 1px solid var(--color-safety-orange); color: var(--color-graphite); background: rgb(241 240 235 / 88%); padding: 0.15rem 0.35rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gameplay-marker--color { top: 24%; left: 5%; }
.gameplay-marker--position { right: 4%; bottom: 28%; }
.gameplay-marker--analysis { top: 14%; right: 8%; }
.gameplay-process__intro { width: 58.333%; min-width: 0; }
.gameplay-process__intro p { max-width: 44rem; }
.gameplay-process__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); position: relative; }
.gameplay-step { min-width: 0; border: var(--border-default); background: var(--color-paper); padding: var(--space-5); position: relative; transition: border-color var(--transition-fast), background-color var(--transition-fast); }
.gameplay-step:hover, .gameplay-step:focus-within { border-color: var(--color-safety-orange); }
.gameplay-step__number { display: block; margin-bottom: var(--space-2); color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1; }
.gameplay-step p { max-width: 30rem; }
.gameplay-step--mist { background: var(--color-steel-mist); }
.gameplay-step--finish { border-color: var(--color-graphite); }
.gameplay-analysis__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 8.333%; align-items: start; }
.gameplay-analysis__figure { min-width: 0; }
.gameplay-analysis__image { position: relative; aspect-ratio: 4 / 3; }
.gameplay-analysis__image img { width: 100%; height: 100%; object-fit: cover; }
.gameplay-analysis__arguments { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.gameplay-analysis__arguments article { min-width: 0; border-inline-start: 2px solid var(--color-steel-mist); padding-inline-start: var(--space-4); }
.gameplay-analysis__arguments p { max-width: 33rem; }
.gameplay-color__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8.333%; align-items: start; }
.gameplay-color__copy, .gameplay-color__figure { min-width: 0; }
.gameplay-color__copy p { max-width: 40rem; }
.gameplay-color__figure .image-frame { aspect-ratio: 5 / 4; }
.gameplay-color__figure img { width: 100%; height: 100%; object-fit: cover; }
.gameplay-color__cards, .gameplay-next__grid, .gameplay-levels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.gameplay-color__cards > *, .gameplay-next__grid > *, .gameplay-levels__grid > * { min-width: 0; }
.gameplay-color__cards p, .gameplay-next__grid p, .gameplay-level p { max-width: 30rem; }
.gameplay-tools__intro { width: 66.667%; min-width: 0; }
.gameplay-tools__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 16.667%; }
.gameplay-tools__module { min-width: 0; border-inline-start: 2px solid var(--color-safety-orange); padding-inline-start: var(--space-4); }
.gameplay-tools__module p { max-width: 35rem; }
.gameplay-tools__callout { width: 83.333%; min-width: 0; margin-top: var(--space-6); border: var(--border-default); background: var(--color-paper); padding: var(--space-5); }
.gameplay-levels__intro { width: 58.333%; min-width: 0; }
.gameplay-levels__intro p { max-width: 43rem; }
.gameplay-level { min-width: 0; border: var(--border-default); background: var(--color-paper-warm); padding: var(--space-5); }
.gameplay-level > span { color: var(--color-steel-blue); font-size: var(--text-label); font-weight: 600; letter-spacing: .12em; }
.gameplay-level:nth-child(2) { transform: translateY(var(--space-3)); }
.gameplay-level:nth-child(3) { transform: translateY(var(--space-5)); }
.gameplay-rhythm__thesis { width: 66.667%; min-width: 0; }
.gameplay-rhythm__lead { max-width: 43rem; color: var(--color-graphite); font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: .03em; line-height: 1; text-transform: uppercase; }
.gameplay-rhythm__thesis > p:last-child { max-width: 40rem; }
.gameplay-rhythm__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: 16.667%; margin-top: var(--space-6); }
.gameplay-rhythm__grid article { min-width: 0; border-top: var(--border-default); padding-top: var(--space-4); }
.gameplay-rhythm__grid p { max-width: 32rem; }
.gameplay-case__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 8.333%; align-items: start; }
.gameplay-case__figure { min-width: 0; }
.gameplay-case__figure .image-frame { aspect-ratio: 9 / 16; max-height: 46rem; margin-inline: auto; }
.gameplay-case__figure img { width: 100%; height: 100%; object-fit: cover; }
.gameplay-case__index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.gameplay-case__index article { min-width: 0; border-bottom: var(--border-default); padding-bottom: var(--space-4); }
.gameplay-case__index p { max-width: 31rem; }
.gameplay-case__letter { display: block; color: var(--color-safety-orange); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1; }
@media (min-width: 61.25rem) and (min-height: 38.75rem) { .gameplay-case__index { position: sticky; top: var(--space-5); } }
.gameplay-next__cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 8.333%; align-items: center; margin-top: var(--space-6); border-top: 2px solid var(--color-safety-orange); padding: var(--space-6); }
.gameplay-next__cta > * { min-width: 0; }
.gameplay-next__cta p { max-width: 38rem; }
.gameplay-faq__intro { width: 66.667%; min-width: 0; }
.gameplay-faq__intro p { max-width: 42rem; }
.gameplay-faq__list { width: 75%; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.gameplay-faq__item { min-width: 0; border-bottom: var(--border-default); }
.gameplay-faq__button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-radius: 0; background: transparent; color: var(--color-steel-blue); padding: var(--space-4) 0; text-align: left; font-size: var(--text-lead); font-weight: 600; }
.gameplay-faq__button span:first-child { min-width: 0; }
.gameplay-faq__button span:last-child { flex: 0 0 2.75rem; color: var(--color-safety-orange); font-size: 1.5rem; text-align: right; }
.gameplay-faq__answer { max-width: 52rem; overflow: hidden; }
.gameplay-faq__answer[hidden] { display: none; }
.gameplay-faq__link { display: inline-block; margin-top: var(--space-5); }
@media (max-width: 65rem) { .gameplay-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .gameplay-analysis__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .gameplay-color__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .gameplay-color__figure { width: min(100%, 44rem); } .gameplay-level:nth-child(2), .gameplay-level:nth-child(3) { transform: none; } }
@media (max-width: 56.25rem) { .gameplay-process__intro, .gameplay-levels__intro, .gameplay-rhythm__thesis, .gameplay-faq__intro { width: 75%; } .gameplay-process__grid, .gameplay-color__cards, .gameplay-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gameplay-tools__grid, .gameplay-rhythm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .gameplay-tools__callout { width: 100%; } .gameplay-next__cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); } .gameplay-faq__list { width: 100%; } }
@media (max-width: 51.25rem) { .gameplay-hero__grid, .gameplay-analysis__grid, .gameplay-case__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .gameplay-hero__figure { width: min(100%, 32rem); } .gameplay-hero__image { max-height: none; } .gameplay-analysis__arguments { gap: var(--space-4); } .gameplay-case__index { position: static; } .gameplay-case__figure { width: min(100%, 32rem); } .gameplay-process__intro, .gameplay-levels__intro, .gameplay-rhythm__thesis, .gameplay-faq__intro { width: 100%; } .gameplay-process__grid, .gameplay-color__cards, .gameplay-levels__grid, .gameplay-next__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .gameplay-tools__grid, .gameplay-rhythm__grid, .gameplay-next__cta { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .gameplay-next__cta { padding: var(--space-5); } .gameplay-next__cta .button { width: min(100%, 22.5rem); } .gameplay-step { padding: var(--space-5); } }
@media (max-width: 30rem) { .gameplay-hero__actions { align-items: stretch; flex-direction: column; } .gameplay-hero__actions .button { width: min(100%, 22.5rem); } .gameplay-marker--position { display: none; } }
@media (prefers-reduced-motion: reduce) { .gameplay-step { transition: none; } }