:root { --paper: #f3f0e8; --ink: #172922; --muted: #677269; --red: #ba4f50; --green: #173d32; --line: #d3d6ca; --gold: #e6ce92; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 65px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; word-break: keep-all; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: rgb(223, 175, 87) solid 3px; outline-offset: 5px; }
.skip { position: fixed; top: -100px; z-index: 30; background: var(--paper); padding: 14px; }
.skip:focus { top: 0px; }
.reading-progress { position: fixed; top: 0px; left: 0px; width: 100%; height: 3px; z-index: 25; }
.reading-progress span { display: block; width: 0px; height: 100%; background: var(--red); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.5; margin-bottom: 24px; }
.space-section { background: var(--green); color: var(--paper); padding: 82px max(5vw, 20px) 40px; }
.section-intro { max-width: 1200px; margin: 0px auto 36px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px 50px; align-items: end; }
.section-intro .eyebrow { grid-column: 1 / -1; color: rgb(184, 201, 187); margin-bottom: 6px; }
.section-intro > p:last-child { font-size: 16px; color: rgb(203, 213, 200); }
.replay-console { max-width: 1200px; margin: auto; border: 1px solid rgb(96, 128, 112); background: rgb(16, 43, 35); border-radius: 13px; overflow: hidden; box-shadow: rgba(7, 19, 14, 0.19) 0px 30px 70px; }
.replay-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.12em; padding: 18px 23px; border-bottom: 1px solid rgb(56, 86, 73); color: rgb(190, 208, 192); }
.replay-top i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(219, 190, 129); margin-right: 8px; }
.lab-grid { display: grid; grid-template-columns: minmax(0px, 1.9fr) minmax(285px, 1fr); }
.replay-stage { padding: 20px 18px 8px; border-right: 1px solid rgb(56, 86, 73); min-width: 0px; }
#spaceBoard { display: block; width: 100%; height: auto; aspect-ratio: 920 / 560; overflow: visible; }
.pitch-legend { display: flex; gap: 15px; justify-content: center; font-size: 10px; color: rgb(180, 200, 184); margin: 12px 0px 18px; flex-wrap: wrap; }
.pitch-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.home-key { background: rgb(212, 119, 112); }
.away-key { background: rgb(108, 153, 179); }
.space-key { color: var(--gold); }
.transport { display: flex; align-items: center; gap: 10px; margin: 0px 6px; }
.transport button { border: 1px solid rgb(104, 132, 113); border-radius: 5px; color: var(--paper); background: rgb(39, 74, 58); min-height: 44px; padding: 7px 11px; font-size: 12px; min-width: 74px; }
.transport input { flex: 1 1 0%; min-width: 0px; accent-color: var(--gold); cursor: pointer; height: 35px; }
.transport .reset { min-width: 38px; font-size: 22px; padding: 2px; }
.timeline-label { position: absolute; clip-path: inset(100%); width: 1px; height: 1px; overflow: hidden; }
.transport output { font-size: 10px; font-variant-numeric: tabular-nums; min-width: 70px; color: rgb(180, 200, 184); }
.play-caption { padding: 16px 6px 8px; min-height: 74px; font-size: 13px; color: rgb(228, 232, 219); }
.replay-insight { padding: 25px 22px; }
.small-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6; color: rgb(174, 193, 177); }
.role-options { display: grid; gap: 8px; margin: 12px 0px 23px; }
.role-options button { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 52px; padding: 10px 13px; background: transparent; color: rgb(212, 223, 208); border: 1px solid rgb(69, 99, 82); border-radius: 5px; }
.role-options button > span { font-size: 10px; letter-spacing: 0.05em; color: rgb(148, 172, 153); }
.role-options b { font-size: 13px; font-weight: 600; flex: 1 1 0%; }
.role-options i { font-style: normal; opacity: 0.5; }
.role-options button[aria-pressed="true"] { background: rgb(231, 214, 159); color: rgb(27, 48, 36); border-color: rgb(231, 214, 159); }
.role-options button[aria-pressed="true"] > span { color: rgb(105, 116, 88); }
.role-options button:hover { border-color: rgb(223, 211, 161); }
.lens-story { min-height: 158px; }
.lens-story .small-label { color: rgb(215, 199, 144); }
.lens-story h3 { font-size: 25px; line-height: 1.38; margin: 8px 0px 12px; white-space: pre-line; }
.lens-story > p:last-child { font-size: 13px; color: rgb(191, 205, 189); min-height: 72px; line-height: 1.75; }
.defender-control { padding-top: 18px; margin-top: 16px; border-top: 1px solid rgb(69, 99, 82); }
.defender-control > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.defender-control button { background: transparent; border: 1px solid rgb(69, 99, 82); border-radius: 4px; min-height: 44px; color: rgb(193, 208, 191); font-size: 11px; padding: 8px 4px; }
.defender-control button[aria-pressed="true"] { border-color: rgb(191, 206, 163); color: rgb(243, 240, 232); background: rgb(41, 71, 53); }
.conditional-copy { font-size: 11px; color: rgb(169, 190, 169); line-height: 1.7; margin-top: 10px; min-height: 38px; }
.replay-takeaway { display: flex; gap: 22px; align-items: center; border-top: 1px solid rgb(56, 86, 73); padding: 20px 24px; }
.replay-takeaway > span { font-size: 11px; color: var(--gold); flex-shrink: 0; }
.replay-takeaway p { font-size: 14px; font-weight: 600; line-height: 1.6; }
.reconstruction-note { max-width: 1200px; margin: 15px auto 0px; color: rgb(167, 187, 168); font-size: 10px; line-height: 1.7; }
.no-script { margin: 20px; max-width: 700px; }
.promise-section { position: relative; background: rgb(18, 41, 33); color: rgb(233, 236, 225); overflow: hidden; }
.promise-inner { position: relative; max-width: 1140px; margin: auto; padding: 90px 35px 70px; }
.promise-inner > .eyebrow { color: rgb(186, 200, 181); }
.promise-deck { font-size: 15px; margin-top: 25px; color: rgb(193, 204, 189); max-width: 720px; }
.promise-deck a, .fixture-source a { font-size: 10px; color: rgb(172, 190, 172); white-space: nowrap; }
.watch-card { position: relative; max-width: 800px; border-top: 1px solid rgb(123, 143, 115); border-right: 1px solid rgb(123, 143, 115); border-bottom: 1px solid rgb(123, 143, 115); border-image: none; border-left: 3px solid var(--gold); padding: 25px 30px; background: rgba(22, 50, 37, 0.86); margin-top: 37px; }
.watch-card .small-label { color: var(--gold); }
.watch-card h3 { font-size: 25px; line-height: 1.5; margin: 11px 0px; min-height: 38px; }
.watch-card p { font-size: 13px; color: rgb(185, 201, 181); }
.watch-card a { display: inline-block; font-size: 11px; margin-top: 16px; text-decoration: none; border-bottom: 1px solid rgb(135, 155, 123); padding-bottom: 3px; }
.watch-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 45px; }
.watch-points > div { border-top: 1px solid rgb(96, 116, 90); padding-top: 14px; }
.watch-points span { font-size: 10px; color: rgb(201, 185, 127); }
.watch-points h3 { font-size: 20px; margin: 12px 0px; }
.watch-points p { font-size: 13px; color: rgb(185, 201, 181); }
.closing-section { max-width: 1140px; margin: auto; padding: 95px 35px 80px; }
.closing-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; }
.closing-grid .eyebrow { color: var(--muted); }
.closing-grid h2 { font-size: clamp(32px, 3.7vw, 50px); }
.closing-line { font-size: clamp(29px, 4.1vw, 53px); line-height: 1.55; letter-spacing: -0.05em; text-align: center; margin: 85px auto 20px; font-weight: 500; }
.closing-line strong { color: var(--red); font-weight: 800; }
@media (min-width: 1500px){
.replay-stage { padding-top: 38px; }
.play-caption { font-size: 14px; }
}
@media (max-width: 950px){
.space-section { padding-left: 25px; padding-right: 25px; }
.lab-grid { grid-template-columns: minmax(0px, 1.6fr) minmax(260px, 1fr); }
.replay-stage { padding: 18px 8px; }
.replay-insight { padding: 20px 16px; }
.role-options b { font-size: 12px; }
.lens-story h3 { font-size: 23px; }
.transport { gap: 6px; }
.transport output { min-width: 60px; font-size: 9px; }
.transport button { font-size: 11px; min-width: 65px; padding: 6px; }
.pitch-legend { gap: 10px; font-size: 9px; }
.space-key { display: none; }
.closing-grid { gap: 30px; }
}
@media (max-width: 700px){
html { scroll-padding-top: 15px; }
.space-section { padding: 55px 15px 30px; }
.section-intro { display: block; padding: 0px 10px; margin-bottom: 24px; }
.section-intro .eyebrow { margin-bottom: 15px; }
.section-intro h2 { font-size: 36px; }
.section-intro > p:last-child { font-size: 13px; margin-top: 18px; line-height: 1.7; }
.replay-top { padding: 13px 14px; font-size: 8px; }
.lab-grid { display: flex; flex-direction: column; }
.replay-stage { padding: 10px 7px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(56, 86, 73); border-image: none; }
.pitch-legend { margin: 8px 0px 7px; font-size: 9px; }
.transport { margin: 0px 6px; gap: 7px; }
.transport button { min-height: 44px; min-width: 68px; }
.transport .reset { min-width: 35px; min-height: 44px; }
.transport output { min-width: 60px; }
.play-caption { font-size: 11px; min-height: 60px; padding: 12px 9px 7px; line-height: 1.7; }
.replay-insight { padding: 16px 15px 18px; }
.role-options { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0px 17px; }
.role-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 7px; min-height: 75px; position: relative; }
.role-options b { font-size: 10px; line-height: 1.6; }
.role-options button > span { font-size: 9px; }
.role-options i { position: absolute; top: 8px; right: 7px; font-size: 13px; }
.lens-story { min-height: 108px; }
.lens-story h3 { font-size: 20px; line-height: 1.4; margin: 8px 0px; white-space: normal; }
.lens-story > p:last-child { font-size: 12px; min-height: 43px; line-height: 1.75; }
.defender-control { padding-top: 12px; margin-top: 12px; }
.defender-control button { font-size: 11px; min-height: 44px; }
.conditional-copy { min-height: 34px; font-size: 10px; margin-top: 9px; }
.replay-takeaway { padding: 15px; gap: 14px; align-items: flex-start; }
.replay-takeaway > span { font-size: 10px; }
.replay-takeaway p { font-size: 12px; }
.reconstruction-note { font-size: 9px; padding: 0px 7px; }
.small-label { font-size: 10px; }
.promise-inner { padding: 55px 25px 45px; }
.promise-inner h2 { font-size: 34px; }
.promise-deck { font-size: 13px; line-height: 1.9; }
.watch-card { padding: 21px 20px; margin-top: 27px; }
.watch-card h3 { font-size: 20px; line-height: 1.5; }
.watch-card p { font-size: 12px; }
.watch-points { gap: 14px; margin-top: 30px; }
.watch-points h3 { font-size: 14px; line-height: 1.5; margin: 10px 0px; }
.watch-points p { font-size: 10px; line-height: 1.9; }
.closing-section { padding: 55px 25px 50px; }
.closing-grid { display: block; }
.closing-grid h2 { font-size: 34px; }
.closing-line { font-size: 28px; margin-top: 40px; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce){
html { scroll-behavior: auto; }
*, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.opening-sequence { background: rgb(5, 12, 14); color: rgb(243, 247, 241); }
.opening-stage { position: relative; padding: 60px 6vw; overflow: hidden; isolation: isolate; --scene-photo: 0; }
.opening-stage::before { content: ""; position: absolute; inset: 0px; z-index: -2; background: linear-gradient(90deg, rgba(5, 12, 14, 0.5), rgba(5, 12, 14, 0.85)), url("../images/taegeukgi-crowd.jpg") center 54% / cover; opacity: var(--scene-photo); transition: opacity 0.6s; }
.opening-stage::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(0deg, rgb(5, 12, 14), transparent 50%, rgba(5, 12, 14, 0.4)); }
.opening-stage.is-photo-bright::before { filter: brightness(1.16) saturate(0.96) contrast(1); }
.opening-stage.is-photo-bright::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.055)), linear-gradient(0deg, rgb(5, 12, 14), transparent 50%, rgba(5, 12, 14, 0.333)); }
.opening-stage.is-photo-bright .opening-frame { text-shadow: rgba(0, 0, 0, 0.32) 0px 2px 14px; }
.opening-frame { padding: 10vh 0px; max-width: 1080px; margin: auto; }
.opening-count { font-size: clamp(110px, 16vw, 210px); font-weight: 800; letter-spacing: -0.07em; line-height: 1.1; color: rgb(158, 217, 200); }
.opening-count > span { font-size: 0.22em; margin-left: 0.15em; letter-spacing: -0.04em; }
.opening-question { font-size: clamp(27px, 3vw, 43px); line-height: 1.6; margin-top: 20px; letter-spacing: -0.045em; }
.opening-frame h1 { font-size: clamp(56px, 7.2vw, 112px); line-height: 1.24; font-weight: 800; letter-spacing: -0.065em; }
.opening-frame h1 .headline-line { display: block; }
.opening-frame h1 i { font-style: normal; color: rgb(162, 219, 203); }
.opening-frame h1 b { color: rgb(240, 217, 156); font-weight: inherit; }
.opening-frame h1 em { color: rgb(225, 138, 125); font-style: normal; }
.opening-final { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.4; font-weight: 800; letter-spacing: -0.055em; }
.opening-final em { color: rgb(240, 217, 156); }
.opening-frame .eyebrow { font-size: 14px; color: rgb(187, 207, 198); letter-spacing: 0.02em; margin-bottom: 25px; }
.opening-deck { font-size: 18px; line-height: 1.9; color: rgb(195, 209, 200); margin-top: 25px; }
.opening-deck strong { color: rgb(162, 219, 203); font-weight: 800; }
.opening-bottom { display: flex; justify-content: space-between; gap: 15px; color: rgb(175, 193, 184); font-size: 12px; }
.opening-bottom a { text-decoration: none; border-bottom: 1px solid rgb(101, 130, 120); padding-bottom: 3px; }
html:not(.story-ready) .opening-frame:not(:first-child) { display: none; }
.story-ready .opening-sequence { height: 260svh; }
.story-ready .opening-stage { position: sticky; top: 0px; height: 100svh; min-height: 560px; padding: 0px 6vw; }
.story-ready .opening-frame { position: absolute; inset: 0px; padding: 11vh 7vw 100px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.45s, transform 0.45s, visibility 0.45s; }
.story-ready .opening-frame.is-active { opacity: 1; visibility: visible; transform: none; }
.story-ready .opening-bottom { position: absolute; bottom: 27px; left: 7vw; right: 7vw; }
.space-section > .watch-card { margin: 38px auto 0px; max-width: 1200px; padding: 18px 22px; background: rgb(16, 43, 35); border-color: rgb(85, 120, 97) rgb(85, 120, 97) rgb(85, 120, 97) rgb(162, 219, 203); }
.space-section > .watch-card h3 { font-size: 18px; line-height: 1.55; min-height: 0px; margin: 0px; font-weight: 600; }
.eyebrow, .small-label, .replay-top, .pitch-legend, .reconstruction-note, .process-source, .fixture-heading, .fixture-source, .source-section, .related-links a, .source-photo { font-size: 12px; }
.section-intro > p:last-child, .section-deck, .text-column > p, .promise-deck, .closing-copy p, .watch-card p, .lens-story > p:last-child, .play-caption { font-size: 16px; }
.role-options b, .transport button, .defender-control button, .conditional-copy, .replay-takeaway > span, .new-faces, .process-middle, .selection-process p, .closing-small, .primary-link, .header-index { font-size: 14px; }
.role-options button { min-height: 52px; }
.lens-story { min-height: 185px; }
.lens-story > p:last-child { min-height: 96px; }
.transport output { font-size: 12px; min-width: 75px; }
.transport .reset { font-size: 23px; }
.replay-takeaway p { font-size: 16px; }
.new-faces span, .new-faces a, .section-deck a, .report-columns a, .process-source a, .promise-deck a, .fixture-source a, .closing-copy a { font-size: 12px; }
@media (max-width: 700px){
.opening-stage { padding: 30px 24px; }
.story-ready .opening-stage { min-height: 620px; }
.story-ready .opening-frame { padding: 55px 25px 115px; }
.opening-count { font-size: 140px; }
.opening-question { font-size: 25px; line-height: 1.75; }
.opening-frame h1 { font-size: clamp(42px, 10.8vw, 60px); line-height: 1.38; letter-spacing: -0.055em; }
.opening-final { font-size: clamp(29px, 7.4vw, 43px); line-height: 1.6; letter-spacing: -0.045em; }
.opening-frame .eyebrow { font-size: 12px; margin-bottom: 20px; }
.opening-deck { font-size: 16px; line-height: 1.9; margin-top: 23px; }
.story-ready .opening-bottom { left: 25px; right: 25px; bottom: 25px; font-size: 12px; line-height: 1.8; align-items: flex-end; }
.opening-bottom > a { max-width: 88px; text-align: right; }
.replay-insight { padding: 17px 14px; }
.role-options button { min-height: 60px; justify-content: center; align-items: center; padding: 8px 3px; }
.role-options b { font-size: 14px; line-height: 1.5; flex: 0 0 auto; }
.role-options i { display: none; }
.lens-story { min-height: 170px; }
.lens-story h3 { font-size: 23px; }
.lens-story > p:last-child { min-height: 80px; line-height: 1.8; }
.defender-control button { font-size: 14px; min-height: 50px; }
.conditional-copy { font-size: 14px; min-height: 65px; }
.pitch-legend { font-size: 12px; gap: 12px; }
.play-caption { font-size: 14px; min-height: 84px; }
.transport output { font-size: 12px; min-width: 72px; }
.transport button { font-size: 14px; min-width: 68px; }
.replay-takeaway { gap: 14px; }
.replay-takeaway > span { font-size: 12px; }
.replay-takeaway p { font-size: 15px; }
.section-intro > p:last-child, .section-deck, .text-column > p, .promise-deck, .closing-copy p, .watch-card p { font-size: 16px; line-height: 1.95; }
.closing-grid h2 { font-size: 29px; line-height: 1.6; }
.closing-line { font-size: 27px; }
.source-section, .related-links a, .reconstruction-note { font-size: 12px; line-height: 1.9; }
}
@media (max-height: 560px) and (min-width: 701px){
.story-ready .opening-stage { min-height: 440px; }
.opening-frame h1 { font-size: 42px; }
.opening-final { font-size: 36px; }
.opening-deck { font-size: 16px; margin-top: 12px; }
.opening-frame .eyebrow { margin-bottom: 12px; }
.opening-count { font-size: 120px; }
.opening-question { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce){
.story-ready .opening-frame { transform: none; transition: none; }
.opening-stage::before { transition: none; }
}
.photo-credit { position: absolute; right: max(22px, 3vw); bottom: 18px; z-index: 3; color: rgb(255, 255, 255); font-size: 10px; line-height: 1.35; letter-spacing: 0.02em; text-shadow: rgba(0, 0, 0, 0.72) 0px 1px 5px; }
.opening-photo-credit { right: 7vw; bottom: 27px; opacity: 0; transition: opacity 0.35s; }
.opening-stage.has-photo .opening-photo-credit { opacity: 1; }
.promise-photo-credit { top: calc(-34px + 100svh); bottom: auto; }
@media (max-width: 700px){
.photo-credit { right: 14px; bottom: 12px; font-size: 9px; }
.opening-photo-credit { right: 25px; bottom: 25px; }
.promise-photo-credit { top: calc(-28px + 100svh); bottom: auto; }
}
.skip { z-index: 10002; }
.skip:focus { top: 70px; }
.reading-progress { top: calc(64px + env(safe-area-inset-top,0px)); z-index: 9998; }
.article-byline { margin: 42px auto 0px; color: rgba(235, 240, 236, 0.68); font-size: 12px; letter-spacing: 0.02em; text-align: center; }
.article-byline b { margin-left: 5px; color: var(--paper); font-weight: 650; }
.article-footer { letter-spacing: 0px; background: rgb(9, 13, 16); border-top: 1px solid rgba(255, 255, 255, 0.125); min-height: 100px; padding: 20px 5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: rgb(244, 242, 236); }
.article-footer a { color: rgb(212, 221, 217); white-space: nowrap; align-items: center; min-height: 44px; display: inline-flex; text-decoration: none; }
.article-footer .footer-visual { justify-self: start; font-size: 18px; font-weight: 650; letter-spacing: 0.055em; }
.article-footer .footer-top { justify-self: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.article-footer .footer-top svg { width: 14px; height: 14px; }
.article-footer .footer-brand { justify-self: end; color: rgb(117, 243, 209); font-size: 14px; font-weight: 800; line-height: 1; letter-spacing: 0.1em; }
.article-footer .silent-i { color: rgba(237, 240, 234, 0.5); }
@media (max-width: 700px){
.article-byline { margin-top: 34px; font-size: 11px; }
.article-footer { min-height: 92px; padding: 16px 14px; grid-template-columns: 1fr auto 1fr; }
.article-footer .footer-visual { font-size: 18px; letter-spacing: 0px; }
.article-footer .footer-top { font-size: 10px; gap: 4px; letter-spacing: 0.06em; }
.article-footer { column-gap: 10px; }
.article-footer .footer-brand { font-size: 11px; letter-spacing: 0.04em; white-space: normal; text-align: right; line-height: 1.4; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.article-footer .footer-brand .fb-slash { display: none; }
.article-footer .footer-brand .fb-line1, .article-footer .footer-brand .fb-line2 { white-space: nowrap; }
}
.moreno-context, .selection-lab, .space-section, .promise-section, .closing-section { position: relative; isolation: isolate; overflow: hidden; }
.moreno-context::before, .selection-lab::before, .space-section::before, .promise-section::before, .closing-section::before { content: ""; position: absolute; z-index: -2; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.moreno-context::after, .selection-lab::after, .space-section::after, .promise-section::after, .closing-section::after { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; }
.moreno-context { background: rgb(233, 230, 220); }
.moreno-context::before { inset: 0px; background-image: url("../images/tactics-board-ai.webp"); opacity: 0.84; filter: saturate(0.82) contrast(1.05); background-position: center 62%; }
.moreno-context::after { background: linear-gradient(90deg, rgba(233, 230, 220, 0.97) 0%, rgba(233, 230, 220, 0.9) 38%, rgba(233, 230, 220, 0.56) 66%, rgba(233, 230, 220, 0.2) 100%), linear-gradient(0deg, rgba(233, 230, 220, 0.88), transparent 58%); }
.context-inner { max-width: 1160px; margin: auto; padding: 95px 35px 85px; }
.context-inner > .eyebrow { color: var(--muted); }
.context-heading { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: end; }
.context-heading h2 em, .selection-heading h2 em { color: var(--red); }
.context-heading > p { font-size: 16px; color: rgb(78, 95, 85); max-width: 550px; }
.context-heading a { font-size: 12px; color: var(--muted); white-space: nowrap; }
.appointment-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 55px; border-top: 1px solid rgb(135, 150, 139); border-bottom: 1px solid rgb(191, 197, 186); }
.appointment-facts > div { padding: 25px 24px 28px; border-right: 1px solid rgb(192, 198, 187); background: rgba(243, 240, 232, 0.52); min-height: 170px; }
.appointment-facts > div:first-child { padding-left: 0px; background: transparent; }
.appointment-facts > div:last-child { border-right: 0px; }
.appointment-facts span { display: block; color: rgb(104, 119, 109); font-size: 12px; margin-bottom: 17px; }
.appointment-facts strong { display: block; font-size: 22px; letter-spacing: -0.04em; }
.appointment-facts p { font-size: 14px; line-height: 1.75; color: rgb(91, 105, 95); margin-top: 12px; }
.context-verdict { max-width: 760px; margin-top: 27px; padding-left: 17px; border-left: 3px solid var(--red); font-size: 14px; color: rgb(81, 97, 87); line-height: 1.9; }
.context-verdict b { color: var(--ink); }
.selection-lab { background: rgb(17, 19, 18); color: rgb(237, 241, 232); }
.selection-lab::before { inset: 0px; background-image: none; opacity: 0; }
.selection-lab::after { background: radial-gradient(circle at 78% 26%, rgba(51, 76, 64, 0.18), transparent 28%), linear-gradient(rgb(17, 19, 18) 0%, rgb(11, 14, 12) 100%); }
.selection-lab.is-interview::before { background-image: url("../images/moreno-interview.webp"); background-position: 35% center; background-size: cover; opacity: 1; filter: saturate(0.92) contrast(1.04) brightness(0.86); transform: scale(1.01); }
.selection-lab.is-interview::after { background: linear-gradient(90deg, rgba(5, 10, 8, 0.96) 0%, rgba(5, 10, 8, 0.83) 39%, rgba(5, 10, 8, 0.28) 64%, rgba(5, 10, 8, 0.05) 100%), linear-gradient(0deg, rgba(5, 10, 8, 0.72), transparent 55%); }
.selection-lab.is-interview .selection-console { background: rgba(7, 11, 9, 0.24); border-color: rgba(198, 211, 202, 0.36); box-shadow: none; backdrop-filter: none; }
.selection-shell { max-width: 1200px; margin: auto; padding: 95px 35px 80px; }
.selection-heading { display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(330px, 0.95fr); grid-template-rows: auto auto auto; gap: 12px 70px; align-items: end; min-height: 310px; margin-bottom: 42px; }
.selection-heading .eyebrow { grid-column: 1 / -1; color: rgb(158, 183, 170); margin-bottom: 5px; }
.selection-heading h2 { grid-area: 2 / 1; }
.selection-heading > p:last-child { grid-area: 3 / 1; font-size: 16px; color: rgb(184, 200, 190); max-width: 620px; }
.selection-console { border: 1px solid rgb(89, 102, 95); background: rgba(8, 12, 10, 0.84); box-shadow: rgba(0, 0, 0, 0.34) 0px 35px 80px; backdrop-filter: blur(5px); }
.method-top { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 13px 21px; border-bottom: 1px solid rgb(70, 80, 75); color: rgb(185, 196, 189); font-size: 13px; letter-spacing: 0.02em; }
.method-top b { color: rgb(234, 215, 158); font-weight: 800; }
.method-top strong { color: rgb(234, 215, 158); font-size: 15px; }
#methodReset { width: 100%; min-height: 50px; border: 1px solid rgb(115, 129, 120); background: transparent; color: rgb(237, 241, 232); padding: 12px 15px; text-align: left; font-weight: 700; }
#methodReset span { float: right; }
.method-actions { display: grid; grid-template-columns: 1.45fr 1fr; gap: 9px; margin-top: 20px; }
#methodToTactics { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 12px 15px; background: rgb(231, 211, 154); color: rgb(23, 33, 25); font-size: 13px; font-weight: 800; text-decoration: none; border: 1px solid rgb(231, 211, 154); }
#methodToTactics:hover { background: rgb(240, 225, 180); }
.selection-console { overflow: hidden; }
.decision-view { min-height: 560px; padding: 34px 38px 38px; }
.decision-view[hidden], .interview-view[hidden], .decision-result[hidden] { display: none !important; }
.selection-situation { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding-bottom: 26px; border-bottom: 1px solid rgb(70, 80, 75); }
.selection-situation > div span { display: block; font-size: 13px; color: rgb(151, 170, 159); margin-bottom: 7px; }
.selection-situation > div strong { font-size: 30px; letter-spacing: -0.04em; }
.selection-situation ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; list-style: none; padding: 0px; margin: 0px; min-width: min(720px, 67%); }
.selection-situation li { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 62px; border: 1px solid rgb(67, 81, 73); font-size: 13px; }
.selection-situation li b { font-size: 15px; letter-spacing: 0.03em; }
.selection-situation li span { font-size: 11px; color: rgb(174, 189, 181); }
.selection-situation .is-fixed { background: rgb(36, 66, 55); color: rgb(237, 244, 239); }
.selection-situation .is-fixed span { color: rgb(170, 192, 180); }
.selection-situation .is-open { border-color: rgb(231, 211, 154); color: rgb(240, 221, 163); box-shadow: rgba(231, 211, 154, 0.18) 0px 0px 24px; }
.selection-situation .is-open span { color: rgb(231, 211, 154); }
.candidate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 27px; }
.candidate-card { position: relative; padding: 24px; border: 1px solid rgb(75, 87, 81); background: rgba(22, 29, 26, 0.9); }
.candidate-card.is-recommended { border-color: rgb(142, 159, 149); }
.candidate-card > span { font-size: 12px; color: rgb(216, 201, 135); }
.candidate-card h3 { font-size: 25px; margin: 11px 0px 20px; }
.candidate-card ul { list-style: none; margin: 0px; padding: 0px; border-top: 1px solid rgb(62, 74, 68); }
.candidate-card li { display: grid; grid-template-columns: 110px 1fr; gap: 15px; padding: 12px 0px; border-bottom: 1px solid rgb(53, 64, 59); font-size: 14px; }
.candidate-card li b { color: rgb(145, 164, 154); font-weight: 500; }
.candidate-card li em { font-style: normal; font-weight: 700; }
.machine-pick { display: grid; grid-template-columns: 130px 100px 1fr; gap: 20px; align-items: center; margin-top: 16px; padding: 17px 20px; border-left: 3px solid rgb(158, 217, 200); background: rgb(23, 36, 31); }
.machine-pick span { font-size: 12px; color: rgb(166, 187, 176); }
.machine-pick strong { font-size: 20px; color: rgb(162, 219, 203); }
.machine-pick p { font-size: 14px; color: rgb(187, 200, 192); line-height: 1.7; }
.decision-next { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; margin-top: 18px; padding: 15px 19px; border: 1px solid rgb(231, 211, 154); background: rgb(231, 211, 154); color: rgb(23, 33, 25); font-weight: 800; text-align: left; }
.decision-next:hover { background: rgb(241, 227, 185); }
.decision-next span { font-size: 20px; }
.interview-view { position: relative; min-height: 700px; background: linear-gradient(90deg, rgba(5, 10, 8, 0.86) 0%, rgba(5, 10, 8, 0.74) 46%, rgba(5, 10, 8, 0.08) 70%, rgba(5, 10, 8, 0.03) 100%), url("../images/moreno-interview.webp") center 42% / cover; overflow: hidden; }
.interview-copy { position: relative; width: 54%; max-width: 650px; margin-left: 0px; padding: 48px 32px 40px; min-height: 700px; display: flex; flex-direction: column; justify-content: center; }
.interview-status { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgb(61, 74, 67); }
.interview-status strong { font-size: 12px; color: rgb(216, 201, 135); }
.interview-back { align-self: flex-start; margin: 18px 0px 0px; padding: 8px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(130, 150, 139); border-image: none; background: transparent; color: rgb(194, 208, 200); font-size: 13px; }
.interview-back:hover { color: rgb(255, 255, 255); border-color: rgb(231, 211, 154); }
.interview-back[hidden] { display: none; }
.interview-copy h3 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.35; margin: 24px 0px 7px; max-width: 620px; }
.dialogue-guide { font-size: 14px; color: rgb(208, 218, 212); margin-bottom: 18px; }
.dialogue-options { display: grid; gap: 10px; }
.dialogue-options button { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; width: 100%; min-height: 76px; padding: 15px 17px; border: 1px solid rgb(107, 117, 111); background: rgba(13, 20, 17, 0.8); color: rgb(238, 242, 236); text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.2s; backdrop-filter: blur(2px); }
.dialogue-options button:hover { border-color: rgb(231, 211, 154); background: rgba(32, 39, 34, 0.9); transform: translateX(4px); }
.dialogue-options button[aria-pressed="true"] { border-color: rgb(231, 211, 154); background: rgb(231, 211, 154); color: rgb(22, 33, 25); }
.dialogue-options button.is-chosen { opacity: 1; border-color: rgb(231, 211, 154); background: rgb(231, 211, 154); color: rgb(22, 33, 25); }
.dialogue-options span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid; border-radius: 50%; font-size: 11px; }
.dialogue-options b { font-size: 15px; line-height: 1.6; }
.coach-note { margin-top: 14px; padding: 15px 17px 0px; border-top: 1px solid rgb(102, 113, 106); background: rgba(6, 11, 9, 0.8); }
.coach-note > span { font-size: 11px; color: rgb(216, 201, 135); }
.coach-note p { font-size: 14px; line-height: 1.7; margin: 6px 0px 0px; }
.coach-note .decision-next { min-height: 50px; margin-top: 12px; }
.coach-note .decision-next b { font-size: 20px; }
.selection-console.is-result .method-top { display: none; }
.decision-result { padding: 0px; background: linear-gradient(100deg, rgb(16, 21, 18), rgb(23, 29, 25)); }
.verdict-screen { min-height: calc(-65px + 100svh); display: grid; place-items: center; padding: 40px; background: radial-gradient(circle at 50% 48%, rgba(231, 211, 154, 0.12), transparent 42%); }
.verdict-screen strong { font-size: clamp(110px, 16vw, 220px); line-height: 1; letter-spacing: -0.075em; color: rgb(240, 221, 163); }
.decision-result.is-rejected .verdict-screen strong { font-size: clamp(54px, 7.5vw, 108px); letter-spacing: -0.055em; color: rgb(199, 208, 202); }
.verdict-details { padding: 70px 48px 58px; border-top: 1px solid rgb(70, 80, 75); }
.verdict-details > h3 { max-width: 800px; font-size: clamp(30px, 4vw, 52px); line-height: 1.38; white-space: pre-line; margin: 15px 0px; }
#decisionResultCopy { font-size: 16px; color: rgb(185, 200, 191); max-width: 760px; }
.experience-caveat { font-size: 13px !important; line-height: 1.85 !important; color: rgb(145, 161, 153) !important; max-width: 900px !important; }
.decision-result .method-actions { max-width: 700px; }
.interview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 28px 0px; }
.interview-summary > div { padding: 16px; border: 1px solid rgb(70, 83, 76); background: rgb(21, 28, 24); }
.interview-summary span { font-size: 11px; color: rgb(216, 201, 135); }
.interview-summary p { font-size: 13px; line-height: 1.7; color: rgb(195, 207, 199); margin-top: 8px; }
.space-section { background: rgb(16, 32, 25); }
.tactical-carry { position: relative; max-width: 1200px; margin: 0px auto 34px; padding: 20px 24px; display: grid; grid-template-columns: 220px minmax(230px, 0.8fr) minmax(320px, 1.4fr); gap: 18px; align-items: center; border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgba(225, 211, 154, 0.55) rgba(225, 211, 154, 0.55) rgba(225, 211, 154, 0.55) rgb(231, 211, 154); border-image: none; background: rgba(10, 31, 24, 0.9); box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 55px; transform: translateY(12px); opacity: 0; transition: opacity 0.4s, transform 0.4s; backdrop-filter: blur(8px); }
.tactical-carry[hidden] { display: none; }
.tactical-carry.is-visible { opacity: 1; transform: none; }
.tactical-carry > span { font-size: 10px; line-height: 1.5; letter-spacing: 0.08em; color: rgb(216, 201, 135); text-transform: uppercase; }
.tactical-carry strong { font-size: 22px; line-height: 1.4; color: rgb(243, 240, 232); }
.tactical-carry p { font-size: 13px; line-height: 1.75; color: rgb(189, 208, 194); }
.space-section::before { inset: 0px 0px auto; width: 100%; height: min(76vw, 860px); background-image: url("../images/football-training-ai.webp"); opacity: 0.76; background-position: center 61%; filter: saturate(0.88) contrast(1.08); }
.space-section::after { inset: 0px 0px auto; height: min(88vw, 980px); background: linear-gradient(rgba(8, 17, 14, 0.18) 0%, rgba(8, 20, 16, 0.38) 50%, rgb(16, 32, 25) 100%); }
.space-section .section-intro { position: relative; text-shadow: rgba(0, 0, 0, 0.55) 0px 2px 18px; }
.space-section .replay-console, .space-section .watch-card, .space-section .reconstruction-note, .space-section .narrative-bridge { position: relative; }
.promise-section::before { inset: 0px; background-image: url("../images/moreno-touchline.webp"); opacity: 0.88; background-position: center 38%; filter: saturate(0.88) contrast(1.06); }
.promise-section::after { background: linear-gradient(90deg, rgba(12, 22, 18, 0.94) 0%, rgba(12, 22, 18, 0.72) 48%, rgba(12, 22, 18, 0.2) 100%), linear-gradient(0deg, rgba(12, 22, 18, 0.82), transparent 58%); }
.closing-section { max-width: none; background: rgb(11, 21, 17); color: rgb(237, 241, 232); padding: 95px max(5vw, 35px) 80px; }
.closing-section::before { inset: 0px; background-image: url("../images/kfa-flag.jpg"); opacity: 0.9; filter: saturate(0.82) contrast(1.05) brightness(0.82); background-position: center 42%; }
.closing-section::after { background: linear-gradient(90deg, rgba(6, 13, 10, 0.96) 0%, rgba(6, 13, 10, 0.8) 48%, rgba(6, 13, 10, 0.24) 100%), linear-gradient(0deg, rgba(6, 13, 10, 0.86), transparent 55%); }
.closing-grid, .closing-line, .closing-small { position: relative; max-width: 1140px; margin-left: auto; margin-right: auto; }
.closing-grid .eyebrow { color: rgb(181, 200, 189); }
.closing-line { color: rgb(240, 244, 238); }
.closing-line strong { color: rgb(158, 217, 200); }
.selection-lab.is-interview .interview-view { background: transparent; }
.space-section::before { inset: 0px; width: 100%; height: 100%; background-image: url("../images/football-whistle-ai.webp"); opacity: 0.78; background-position: 76% center; filter: saturate(0.82) contrast(1.08) brightness(1.18) blur(1px); transform: scale(1.01); }
.space-section::after { inset: 0px; height: 100%; background: linear-gradient(90deg, rgba(8, 20, 16, 0.8) 0%, rgba(8, 20, 16, 0.34) 58%, rgba(8, 20, 16, 0.16) 100%), linear-gradient(rgba(8, 17, 14, 0.22) 0%, rgba(8, 20, 16, 0.38) 62%, rgb(16, 32, 25) 100%); }
@media (max-width: 950px){
.context-heading, .selection-heading { gap: 35px; }
.appointment-facts strong { font-size: 19px; }
.appointment-facts > div { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 950px){
.selection-lab::before { background-image: none; opacity: 0; }
.selection-lab.is-interview::before { background-image: url("../images/moreno-interview.webp"); background-size: auto 100%; background-position: 56% center; opacity: 1; filter: saturate(0.92) contrast(1.04) brightness(0.86); transform: none; }
.selection-lab.is-interview::after { background: linear-gradient(rgba(5, 10, 8, 0.12) 0%, rgba(5, 10, 8, 0.48) 31%, rgba(5, 10, 8, 0.94) 56%, rgb(5, 10, 8) 100%); }
.space-section::before { inset: 0px; width: 100%; height: 100%; opacity: 0.7; background-position: 70% center; }
.space-section::after { inset: 0px; height: 100%; background: linear-gradient(rgba(8, 17, 14, 0.26), rgba(8, 20, 16, 0.5) 60%, rgb(16, 32, 25) 100%); }
.verdict-screen { min-height: calc(-53px + 100svh); }
.verdict-screen strong { font-size: clamp(90px, 29vw, 150px); }
.decision-result.is-rejected .verdict-screen strong { font-size: clamp(42px, 12vw, 62px); }
.space-section > .watch-card { margin-top: 64px; }
}
@media (max-width: 700px){
.context-inner, .selection-shell { padding: 60px 20px; }
.moreno-context::before { inset: 0px; opacity: 0.72; background-position: 58% center; }
.moreno-context::after { background: linear-gradient(rgba(233, 230, 220, 0.96) 0%, rgba(233, 230, 220, 0.82) 54%, rgba(233, 230, 220, 0.46) 100%); }
.context-heading, .selection-heading { display: block; }
.context-heading h2, .selection-heading h2 { font-size: 34px; }
.context-heading > p, .selection-heading > p:last-child { font-size: 16px; line-height: 1.9; margin-top: 24px; }
.appointment-facts { grid-template-columns: 1fr 1fr; margin-top: 35px; }
.appointment-facts > div, .appointment-facts > div:first-child { padding: 20px 14px; min-height: 145px; border-bottom: 1px solid rgb(192, 198, 187); background: rgba(243, 240, 232, 0.4); }
.appointment-facts > div:nth-child(2) { border-right: 0px; }
.appointment-facts > div:nth-child(3), .appointment-facts > div:nth-child(4) { border-bottom: 0px; }
.appointment-facts strong { font-size: 19px; }
.appointment-facts p { font-size: 13px; }
.context-verdict { font-size: 15px; }
.method-actions { grid-template-columns: 1fr; }
.tactical-carry { margin: 0px 10px 28px; padding: 18px; display: block; }
.tactical-carry > span, .tactical-carry strong, .tactical-carry p { display: block; }
.tactical-carry strong { font-size: 20px; margin: 8px 0px; }
.tactical-carry p { font-size: 12px; }
.selection-heading { display: block; min-height: 365px; }
.selection-heading h2 { max-width: 330px; }
.selection-heading > p:last-child { max-width: 340px; }
.decision-view { min-height: 0px; padding: 22px 16px 20px; }
.selection-situation { display: block; }
.selection-situation ol { grid-template-columns: repeat(3, 1fr); min-width: 0px; margin-top: 18px; gap: 5px; }
.selection-situation li { min-height: 55px; font-size: 11px; padding: 5px; }
.selection-situation li b { font-size: 12px; }
.selection-situation li span { font-size: 9px; }
.selection-situation .is-open { line-height: 1.35; text-align: center; }
.candidate-grid { gap: 8px; }
.candidate-card { padding: 17px 13px; }
.candidate-card h3 { font-size: 19px; line-height: 1.45; min-height: 56px; }
.candidate-card li { display: block; font-size: 13px; }
.candidate-card li b, .candidate-card li em { display: block; }
.candidate-card li em { margin-top: 4px; }
.machine-pick { grid-template-columns: 1fr auto; gap: 6px 15px; padding: 14px; }
.machine-pick p { grid-column: 1 / -1; font-size: 13px; }
.decision-next { font-size: 14px; }
.interview-view { min-height: 0px; background-position: 58% top; }
.interview-copy { width: 100%; max-width: none; min-height: 0px; padding: 300px 16px 24px; background: linear-gradient(rgba(5, 10, 8, 0.08) 0%, rgba(5, 10, 8, 0.6) 32%, rgba(5, 10, 8, 0.96) 47%); }
.interview-status { padding-bottom: 15px; }
.interview-copy h3 { font-size: 25px; margin-top: 24px; }
.dialogue-guide { font-size: 13px; margin-bottom: 14px; }
.dialogue-options { gap: 8px; }
.dialogue-options button { min-height: 72px; padding: 13px 12px; grid-template-columns: 32px 1fr; gap: 10px; }
.dialogue-options span { width: 27px; height: 27px; }
.dialogue-options b { font-size: 13px; line-height: 1.6; }
.coach-note { padding: 14px 12px 0px; }
.coach-note p { font-size: 13px; }
.verdict-screen { min-height: 72svh; padding: 25px; }
.verdict-screen strong { font-size: clamp(60px, 19vw, 96px); }
.verdict-details { padding: 45px 19px; }
.verdict-details > h3 { font-size: 30px; }
.interview-summary { grid-template-columns: 1fr; gap: 6px; }
.experience-caveat { font-size: 13px !important; }
.selection-lab::before { inset: 0px; opacity: 0.86; background-size: 760px auto; background-position: 68% -170px; }
.selection-lab::after { background: linear-gradient(rgba(10, 13, 12, 0.88) 0%, rgba(10, 13, 12, 0.68) 36%, rgba(10, 13, 12, 0.38) 100%); }
.space-section::before { inset: 0px 0px auto; width: 100%; height: 620px; opacity: 0.66; background-position: 59% center; }
.space-section::after { inset: 0px 0px auto; height: 720px; background: linear-gradient(rgba(8, 17, 14, 0.22), rgba(8, 20, 16, 0.46) 58%, rgb(16, 32, 25) 100%); }
.promise-section::before { background-position: 55% center; opacity: 0.78; }
.promise-section::after { background: linear-gradient(rgba(12, 22, 18, 0.88), rgba(12, 22, 18, 0.6) 55%, rgba(12, 22, 18, 0.38)); }
.closing-section { padding: 60px 20px 55px; }
.closing-section::before { inset: 0px; opacity: 0.76; background-position: 42% center; }
.closing-section::after { background: linear-gradient(rgba(6, 13, 10, 0.9), rgba(6, 13, 10, 0.68) 52%, rgba(6, 13, 10, 0.4)); }
}
@media (max-width: 700px){
.selection-lab::before { inset: 0px; background-image: none; opacity: 0; }
.selection-lab.is-interview::before { background-image: url("../images/moreno-interview.webp"); background-size: auto 100%; background-position: 56% center; opacity: 1; filter: saturate(0.92) contrast(1.04) brightness(0.86); transform: none; }
.selection-lab.is-interview::after { background: linear-gradient(rgba(5, 10, 8, 0.12) 0%, rgba(5, 10, 8, 0.48) 31%, rgba(5, 10, 8, 0.94) 56%, rgb(5, 10, 8) 100%); }
.space-section::before { inset: 0px; width: 100%; height: 100%; opacity: 0.7; background-position: 70% center; }
.space-section::after { inset: 0px; height: 100%; background: linear-gradient(rgba(8, 17, 14, 0.26), rgba(8, 20, 16, 0.5) 60%, rgb(16, 32, 25) 100%); }
.verdict-screen { min-height: calc(-53px + 100svh); }
.verdict-screen strong { font-size: clamp(90px, 29vw, 150px); }
.decision-result.is-rejected .verdict-screen strong { font-size: clamp(42px, 12vw, 62px); }
.space-section > .watch-card { margin-top: 64px; }
}
.selection-heading, .context-heading, .section-intro { display: block; min-height: 0px; text-align: left; }
.selection-heading h2, .context-heading h2, .section-intro h2 { max-width: 780px; }
.selection-heading > p:last-child, .context-heading > p:last-child, .section-intro > p:last-child { max-width: 720px; margin-top: 22px; }
.selection-heading { margin-bottom: 34px; }
.context-heading > p { max-width: 720px; }
.context-inner { padding-top: 78px; padding-bottom: 72px; }
.criteria-strip { max-width: 900px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(83, 104, 93, 0.5); }
.criteria-strip > .small-label { color: rgb(104, 119, 109); margin-bottom: 15px; }
.criteria-strip ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; list-style: none; margin: 0px; padding: 0px; }
.criteria-strip li { display: grid; grid-template-columns: 32px 1fr; gap: 2px 10px; padding: 10px 22px 10px 0px; border-right: 1px solid rgba(83, 104, 93, 0.28); }
.criteria-strip li + li { padding-left: 22px; }
.criteria-strip li:last-child { border-right: 0px; }
.criteria-strip b { grid-row: 1 / 4; color: var(--red); font-size: 12px; padding-top: 4px; }
.criteria-strip strong { font-size: 20px; line-height: 1.4; margin: 5px 0px 2px; }
.criteria-strip li span { font-size: 13px; color: rgb(96, 112, 103); line-height: 1.65; }
.criteria-strip .criteria-question { font-size: 12px; font-weight: 700; color: rgb(49, 72, 61); }
.candidate-card h3 { min-height: 0px; }
.promise-inner, .closing-section { text-align: left; }
.promise-deck { max-width: 760px; }
.match-window { max-width: 900px; margin-top: 44px; padding: 22px 0px 24px; border-top: 1px solid rgba(190, 211, 194, 0.5); border-bottom: 1px solid rgba(190, 211, 194, 0.35); }
.match-window > .small-label { color: rgb(216, 201, 135); margin-bottom: 18px; }
.match-window ol { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0px; padding: 0px; }
.match-window li { display: block; padding: 0px 26px; border-right: 1px solid rgba(190, 211, 194, 0.32); }
.match-window li:first-child { padding-left: 0px; }
.match-window li:last-child { border-right: 0px; }
.match-window span { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.055em; color: rgb(241, 243, 236); }
.match-window b { display: block; margin-top: 9px; font-size: 13px; font-weight: 500; color: rgb(189, 203, 191); line-height: 1.55; }
.promise-section .watch-card { margin-top: 42px; background: rgba(16, 43, 34, 0.72); backdrop-filter: blur(3px); }
.promise-section .watch-points { max-width: 900px; }
.promise-followup { display: grid; grid-template-columns: 150px minmax(0px, 610px); gap: 24px; max-width: 800px; margin-top: 38px; padding-top: 24px; border-top: 1px solid rgba(190, 211, 194, 0.48); }
.promise-followup > span { font-size: 13px; color: rgb(226, 209, 152); }
.promise-followup p { font-size: 16px; line-height: 1.9; color: rgb(212, 223, 212); }
.promise-followup a { font-size: 12px; color: rgb(226, 209, 152); white-space: nowrap; }
.closing-grid { display: block; }
.closing-line { max-width: 1140px; margin: 54px auto 20px; text-align: left; font-size: clamp(25px, 3.2vw, 43px); }
.space-section > .watch-card { background: transparent; border: 0px; padding: 0px; text-shadow: rgba(0, 0, 0, 0.82) 0px 2px 14px; }
.space-section > .watch-card h3 { max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; min-height: 0px; margin: 0px; font-weight: 600; }
@media (max-width: 700px){
.space-section > .watch-card { padding: 0px; margin-top: 32px; }
.selection-heading > p:last-child, .context-heading > p:last-child, .section-intro > p:last-child { margin-top: 18px; }
.context-inner { padding-top: 55px; padding-bottom: 50px; }
.criteria-strip { margin-top: 32px; padding-top: 18px; }
.criteria-strip ol { grid-template-columns: 1fr; }
.criteria-strip li, .criteria-strip li + li { display: grid; grid-template-columns: 30px 1fr; padding: 15px 0px; border-right: 0px; border-bottom: 1px solid rgba(83, 104, 93, 0.24); }
.criteria-strip li:last-child { border-bottom: 0px; }
.criteria-strip b { grid-row: 1 / 4; padding: 2px 0px 0px; margin: 0px; }
.criteria-strip strong, .criteria-strip li span { display: block; }
.criteria-strip strong { font-size: 18px; margin: 3px 0px; }
.criteria-strip li span { font-size: 13px; line-height: 1.6; margin: 0px; }
.appointment-facts { margin-top: 34px; }
.appointment-facts > div, .appointment-facts > div:first-child { min-height: 168px; padding: 19px 13px; }
.appointment-facts strong { font-size: 18px; }
.appointment-facts p { font-size: 12px; line-height: 1.75; }
.context-verdict { margin-top: 25px; }
.match-window { margin-top: 34px; padding: 18px 0px 20px; }
.match-window ol { grid-template-columns: 1fr; }
.match-window li, .match-window li:first-child { display: grid; grid-template-columns: 72px 1fr; align-items: center; padding: 14px 0px; border-right: 0px; border-bottom: 1px solid rgba(190, 211, 194, 0.25); }
.match-window li:last-child { border-bottom: 0px; }
.match-window span { font-size: 25px; }
.match-window b { margin-top: 0px; font-size: 13px; }
.promise-section .watch-card { margin-top: 32px; }
.promise-section .watch-points { grid-template-columns: 1fr; gap: 0px; margin-top: 32px; }
.promise-section .watch-points > div { padding: 18px 0px 20px; }
.promise-section .watch-points h3 { font-size: 18px; margin: 8px 0px; }
.promise-section .watch-points p { font-size: 13px; line-height: 1.8; max-width: 390px; }
.promise-followup { display: block; margin-top: 30px; padding-top: 20px; }
.promise-followup > span { display: block; margin-bottom: 10px; }
.promise-followup p { font-size: 15px; }
.closing-line { font-size: 26px; margin-top: 34px; }
}
.role-options small { font-size: 10px; line-height: 1.35; color: rgb(137, 161, 148); white-space: nowrap; }
.role-options button[aria-pressed="true"] small { color: rgb(102, 114, 89); }
#homeMarkers g { transition: opacity 0.22s; }
#homeMarkers g.is-muted { opacity: 0.26; }
@media (max-width: 700px){
.role-options b { font-size: 13px; line-height: 1.45; flex: 0 0 auto; }
.role-options small { font-size: 10px; }
}
.verdict-screen strong, .decision-result.is-rejected .verdict-screen strong { white-space: pre-line; text-align: center; font-size: clamp(52px, 8.2vw, 118px); line-height: 1.2; letter-spacing: -0.07em; }
@media (max-width: 700px){
.verdict-screen strong, .decision-result.is-rejected .verdict-screen strong { font-size: clamp(34px, 10.5vw, 54px); line-height: 1.35; }
}
#awayMarkers g { transition: opacity 0.22s; }
#awayMarkers g.is-muted { opacity: 0.24; }
.decision-view { min-height: 0px; padding: 25px 28px 28px; }
.selection-situation { padding-bottom: 18px; }
.selection-situation ol { gap: 5px; }
.selection-situation li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 98px; padding: 0px; border: 0px; background: transparent !important; box-shadow: none !important; }
.selection-situation li::before { content: ""; display: block; width: 78px; height: 78px; background: url("../images/jersey-magnet-ai.png") center center / contain no-repeat; }
.selection-situation li b { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 22px; line-height: 1; color: rgb(255, 255, 255); text-shadow: rgba(75, 0, 0, 0.7) 0px 2px 4px; letter-spacing: -0.04em; }
.selection-situation li span { margin-top: 0px; font-size: 10px; color: rgb(174, 189, 181); }
.selection-situation .is-open::before { filter: grayscale(1); opacity: 0.27; }
.selection-situation .is-open b { color: rgb(240, 221, 163); text-shadow: none; }
.criteria-sequence ol { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; min-width: min(720px, 67%); }
.criteria-sequence li { position: relative; display: grid; grid-template-columns: 38px 1fr; place-items: center stretch; min-height: 78px; padding: 14px 16px; border: 1px solid rgb(75, 94, 84); text-align: left; background: rgb(24, 52, 42) !important; }
.criteria-sequence li::before { display: none; }
.criteria-sequence li b { position: static; transform: none; font-size: 22px; color: rgb(231, 211, 154); text-align: center; text-shadow: none; }
.criteria-sequence li span { margin: 0px; padding-left: 14px; border-left: 1px solid rgb(80, 101, 90); color: rgb(220, 231, 223); }
.criteria-sequence li span strong, .criteria-sequence li span small { display: block; }
.criteria-sequence li span strong { font-size: 15px; }
.criteria-sequence li span small { margin-top: 5px; font-size: 11px; line-height: 1.45; color: rgb(159, 178, 168); }
.criteria-sequence .is-open { border-color: rgb(139, 128, 94); box-shadow: rgba(231, 211, 154, 0.1) 0px 0px 24px !important; }
.candidate-grid { gap: 10px; margin-top: 14px; }
.candidate-card { padding: 15px 16px; }
.candidate-card h3 { font-size: 21px; margin: 5px 0px 10px; }
.candidate-card ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.candidate-card li { display: flex; flex-direction: column; gap: 3px; padding: 8px 5px; border-bottom: 0px; border-right: 1px solid rgb(53, 64, 59); text-align: center; font-size: 12px; }
.candidate-card li:last-child { border-right: 0px; }
.candidate-card li b { color: rgb(145, 164, 154); font-size: 10px; font-weight: 500; }
.candidate-card li em { font-size: 13px; font-weight: 800; }
.machine-pick { grid-template-columns: auto auto 1fr; gap: 10px; margin-top: 10px; padding: 10px 14px; }
.machine-pick p { font-size: 12px; line-height: 1.4; }
.decision-next { min-height: 50px; margin-top: 10px; padding: 11px 16px; }
@media (max-width: 700px){
.selection-shell { min-height: 100svh; padding: 18px 12px 20px; }
.selection-heading { display: block; min-height: 0px; margin-bottom: 11px; }
.selection-heading .eyebrow { margin-bottom: 6px; font-size: 9px; }
.selection-heading h2 { max-width: none; font-size: 29px; line-height: 1.12; }
.selection-heading > p:last-child { max-width: none; margin-top: 7px; font-size: 13px; line-height: 1.5; }
.method-top { min-height: 36px; padding: 7px 11px; font-size: 10px; }
.method-top strong { font-size: 11px; }
.decision-view { padding: 9px 10px 11px; }
.selection-situation { display: grid; grid-template-columns: 74px minmax(0px, 1fr); gap: 7px; padding-bottom: 8px; }
.selection-situation > div span { font-size: 9px; margin-bottom: 3px; }
.selection-situation > div strong { font-size: 15px; line-height: 1.3; }
.selection-situation ol { grid-template-columns: repeat(5, 1fr); gap: 1px; min-width: 0px; margin: 0px; }
.selection-situation li { min-height: 62px; padding: 0px; }
.selection-situation li::before { width: 50px; height: 50px; }
.selection-situation li b { top: 18px; font-size: 15px; }
.selection-situation li span { font-size: 8px; line-height: 1.2; }
.candidate-grid { gap: 6px; margin-top: 8px; }
.candidate-card { padding: 8px 7px; }
.candidate-card > span { font-size: 9px; }
.candidate-card h3 { min-height: 0px; font-size: 16px; line-height: 1.2; margin: 3px 0px 7px; }
.candidate-card li { display: flex; padding: 5px 2px; font-size: 10px; }
.candidate-card li b, .candidate-card li em { display: block; margin: 0px; }
.candidate-card li b { font-size: 8px; }
.candidate-card li em { font-size: 10px; }
.machine-pick { grid-template-columns: auto auto 1fr; gap: 5px 8px; margin-top: 7px; padding: 7px 9px; }
.machine-pick span { font-size: 9px; }
.machine-pick strong { font-size: 14px; }
.machine-pick p { grid-column: auto; font-size: 9px; white-space: nowrap; }
.decision-next { min-height: 42px; margin-top: 7px; padding: 8px 11px; font-size: 13px; }
.selection-lab.is-interview .selection-shell { display: grid; align-items: center; padding: 0px 10px 12px; }
.selection-lab.is-interview .selection-heading { display: none; }
.selection-lab.is-interview .selection-console { width: 100%; }
.selection-lab.is-interview .interview-copy { padding: 165px 10px 12px; }
.selection-lab.is-interview .interview-status { padding-bottom: 8px; }
.selection-lab.is-interview .interview-back { margin-top: 6px; padding: 4px 0px; font-size: 10px; }
.selection-lab.is-interview .interview-copy h3 { font-size: 21px; line-height: 1.28; margin: 9px 0px 3px; }
.selection-lab.is-interview .dialogue-guide { font-size: 10px; margin-bottom: 7px; }
.selection-lab.is-interview .dialogue-options { gap: 5px; }
.selection-lab.is-interview .dialogue-options button { min-height: 52px; padding: 8px 9px; grid-template-columns: 25px 1fr; gap: 7px; }
.selection-lab.is-interview .dialogue-options span { width: 23px; height: 23px; font-size: 9px; }
.selection-lab.is-interview .dialogue-options b { font-size: 12px; line-height: 1.45; }
.selection-lab.is-interview .coach-note { margin-top: 6px; padding: 7px 8px 0px; }
.selection-lab.is-interview .coach-note p { font-size: 11px; line-height: 1.45; margin-top: 2px; }
.selection-lab.is-interview .coach-note .decision-next { min-height: 38px; margin-top: 5px; }
}
@media (max-width: 700px){
.space-section { padding: 42px 10px 26px; }
.space-section .section-intro { padding: 0px 6px; margin-bottom: 18px; }
.space-section .section-intro .eyebrow { margin-bottom: 8px; }
.space-section .section-intro h2 { font-size: 31px; line-height: 1.15; }
.space-section .section-intro > p:last-child { margin-top: 9px; font-size: 13px; line-height: 1.55; }
.replay-console { height: calc(-16px + 100svh); min-height: 520px; max-height: 720px; display: flex; flex-direction: column; scroll-margin-top: 8px; }
.replay-top { flex: 0 0 31px; min-height: 31px; padding: 7px 10px; font-size: 8px; }
.lab-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0px, 1fr) auto; flex: 1 1 0%; min-height: 0px; }
.replay-stage { display: flex; flex-direction: column; min-height: 0px; padding: 5px 5px 0px; }
#spaceBoard { flex: 1 1 0%; width: 100%; height: auto; min-height: 135px; max-height: 220px; margin: auto; }
.pitch-legend { flex: 0 0 auto; margin: 2px 0px 3px; gap: 10px; font-size: 9px; line-height: 1.35; }
.pitch-legend .space-key { display: none; }
.transport { flex: 0 0 35px; gap: 5px; margin: 0px 3px; }
.transport button { min-width: 61px; min-height: 34px; padding: 4px 6px; font-size: 10px; }
.transport .reset { min-width: 31px; min-height: 34px; font-size: 18px; }
.transport output { min-width: 61px; font-size: 9px; }
.play-caption { height: 30px; min-height: 30px; padding: 5px 6px 3px; font-size: 10px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.replay-insight { display: grid; grid-template-areas: "roles" "defender" "story" "condition"; gap: 4px; padding: 7px 8px 8px; }
.replay-insight > .small-label { display: none; }
.role-options { grid-area: roles; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0px; }
.role-options button { min-height: 43px; padding: 5px 3px; gap: 1px; justify-content: center; align-items: center; text-align: center; }
.role-options b { font-size: 10px; line-height: 1.25; }
.role-options small { font-size: 8px; line-height: 1.15; }
.lens-story { grid-area: story; display: grid; grid-template-columns: minmax(92px, 0.75fr) minmax(0px, 1.25fr); align-items: center; gap: 8px; min-height: 48px; padding: 2px 4px; }
.lens-story .small-label { display: none; }
.lens-story h3 { margin: 0px; font-size: 15px; line-height: 1.3; white-space: pre-line; }
.lens-story > p:last-child { min-height: 0px; margin: 0px; font-size: 10px; line-height: 1.45; }
.defender-control { grid-area: defender; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 5px; margin: 0px; padding: 0px; border: 0px; }
.defender-control > .small-label { font-size: 9px; text-align: center; }
.defender-control > div { margin: 0px; gap: 4px; }
.defender-control button { min-height: 32px; padding: 3px; font-size: 10px; }
.conditional-copy { grid-area: condition; min-height: 17px; margin: 0px; text-align: center; font-size: 9px; line-height: 1.35; }
.replay-takeaway { display: none; }
.reconstruction-note { margin-top: 8px; text-align: center; font-size: 9px; }
}
@media (min-width: 701px){
.decision-view, .interview-view { height: 500px; min-height: 500px; }
.decision-view { display: flex; flex-direction: column; justify-content: flex-start; }
.decision-view .decision-next { margin-top: auto; }
.interview-copy { height: 500px; min-height: 500px; padding: 24px 32px; }
.interview-status { padding-bottom: 10px; }
.interview-back { margin-top: 8px; padding: 5px 0px; }
.interview-copy h3 { font-size: clamp(28px, 3vw, 38px); margin: 12px 0px 4px; }
.dialogue-guide { margin-bottom: 10px; }
.dialogue-options { gap: 6px; }
.dialogue-options button { min-height: 68px; padding: 10px 14px; }
}
.selection-lab.is-interview::before { background-image: none; opacity: 0; }
.selection-lab.is-interview::after { background: radial-gradient(circle at 78% 26%, rgba(51, 76, 64, 0.18), transparent 28%), linear-gradient(rgb(17, 19, 18) 0%, rgb(11, 14, 12) 100%); }
.selection-lab.is-interview .interview-view { background-color: rgb(5, 10, 8); background-image: linear-gradient(90deg, rgba(5, 10, 8, 0.96) 0%, rgba(5, 10, 8, 0.76) 45%, rgba(5, 10, 8, 0.18) 100%), url("../images/moreno-interview.webp"); background-size: 100% 100%, auto 100%; background-position: center center, right center; background-repeat: no-repeat; }
@media (max-width: 700px){
.selection-lab.is-interview .selection-shell { display: block; min-height: 100svh; padding: 18px 12px 20px; }
.selection-lab.is-interview .selection-heading { display: block; }
.selection-console { height: 420px; }
.decision-view, .interview-view { height: calc(100% - 36px); min-height: 0px; box-sizing: border-box; }
.decision-view { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px; }
.decision-view .candidate-grid, .decision-view .machine-pick, .decision-view .decision-next { margin-top: 0px; }
.decision-view .decision-next { margin-bottom: 0px; }
.interview-view, .selection-lab.is-interview .interview-view { background: rgb(11, 16, 13); }
.selection-lab.is-interview .interview-copy { height: 100%; min-height: 0px; padding: 10px 12px; justify-content: space-between; box-sizing: border-box; }
.selection-lab.is-interview .interview-status { min-height: 24px; padding-bottom: 5px; }
.selection-lab.is-interview .interview-back { height: 24px; margin: 0px; padding: 3px 0px; font-size: 10px; }
.selection-lab.is-interview .interview-back[hidden] { display: block; visibility: hidden; pointer-events: none; }
.selection-lab.is-interview .interview-copy h3 { font-size: 20px; line-height: 1.3; margin: 3px 0px; }
.selection-lab.is-interview .dialogue-guide { font-size: 10px; margin: 0px; }
.selection-lab.is-interview .dialogue-options { gap: 5px; }
.selection-lab.is-interview .dialogue-options button { height: auto; min-height: 62px; padding: 8px 9px; grid-template-columns: 25px 1fr; gap: 7px; }
.selection-lab.is-interview .dialogue-options span { width: 23px; height: 23px; font-size: 9px; }
.selection-lab.is-interview .dialogue-options b { font-size: 12px; line-height: 1.45; }
.space-section { overflow: visible; }
.space-section .section-intro { margin-bottom: 10px; }
.tactical-sticky-zone { position: relative; height: auto; min-height: 0px; padding-bottom: 8svh; }
.tactical-sticky-zone .replay-console { position: sticky; top: 4px; height: auto; min-height: 0px; max-height: none; }
.tactical-sticky-zone .lab-grid { flex: 0 0 auto; }
.tactical-sticky-zone #spaceBoard { flex: 0 0 auto; margin: 0px auto; }
.reconstruction-note { margin-top: 3px; }
}
.selection-console.is-result { overflow: visible; height: auto !important; }
@media (max-width: 700px){
.selection-lab.is-result .selection-shell { min-height: 0px; padding: 0px 12px 20px; }
.selection-lab.is-result .selection-heading { display: none; }
.selection-lab.is-result .selection-console { width: 100%; }
.selection-lab.is-result .verdict-screen { min-height: calc(-53px + 100svh); }
}
.selection-lab, .space-section { overflow: visible; }
.selection-lab:not(.is-result) .selection-shell { min-height: 145svh; }
.selection-lab:not(.is-result) .selection-heading { margin-bottom: 58px; }
.selection-lab:not(.is-result) .selection-console { position: sticky; top: 8px; height: clamp(590px, 78svh, 720px); }
.selection-lab:not(.is-result) .decision-view, .selection-lab:not(.is-result) .interview-view { height: calc(100% - 58px); min-height: 0px; }
.selection-lab:not(.is-result) .interview-copy { height: 100%; min-height: 0px; }
.tactical-sticky-zone { position: relative; min-height: 135svh; padding-bottom: 0px; }
.tactical-sticky-zone .replay-console { position: sticky; top: 8px; }
@media (min-width: 701px){
.tactical-sticky-zone .replay-console { height: min(78svh, 760px); display: flex; flex-direction: column; }
.tactical-sticky-zone .lab-grid { flex: 1 1 0%; min-height: 0px; }
}
@media (max-width: 700px){
.selection-lab:not(.is-result) .selection-shell, .selection-lab.is-interview:not(.is-result) .selection-shell { min-height: 145svh; padding: 18px 12px 20px; }
.selection-lab:not(.is-result) .selection-heading { margin-bottom: 28px; }
.selection-lab:not(.is-result) .selection-console { top: 4px; height: calc(-8px + 100svh); }
.selection-lab:not(.is-result) .decision-view, .selection-lab:not(.is-result) .interview-view { height: calc(100% - 36px); min-height: 0px; }
.tactical-sticky-zone { min-height: 145svh; padding-bottom: 0px; }
.tactical-sticky-zone .replay-console { top: 4px; height: calc(-8px + 100svh); min-height: 0px; max-height: none; display: flex; flex-direction: column; }
.tactical-sticky-zone .lab-grid { flex: 1 1 0%; min-height: 0px; }
.tactical-sticky-zone #spaceBoard { flex: 1 1 0%; min-height: 190px; max-height: 42svh; margin: auto; }
}
.candidate-grid { grid-template-columns: 1fr; gap: 8px; }
.candidate-card { display: grid; grid-template-columns: 150px minmax(0px, 1fr); grid-template-rows: auto auto; column-gap: 20px; align-items: center; }
.candidate-card > span { grid-area: 1 / 1; }
.candidate-card h3 { grid-area: 2 / 1; margin: 5px 0px 0px; }
.candidate-card ul { grid-area: 1 / 2 / 3; border-top: 0px; }
#enterInterview { min-height: 58px; border-color: rgb(240, 221, 163); box-shadow: rgba(240, 221, 163, 0.15) 0px 0px 0px 1px; }
#enterInterview span { font-size: 12px; letter-spacing: 0.01em; }
@media (min-width: 701px){
.candidate-grid { gap: 12px; }
.candidate-card { grid-template-columns: 210px minmax(0px, 1fr); column-gap: 28px; padding: 21px 24px; }
.candidate-card > span { font-size: 14px; }
.candidate-card h3 { font-size: 27px; line-height: 1.25; }
.candidate-card li { padding: 12px 9px; }
.candidate-card li b { font-size: 13px; }
.candidate-card li em { font-size: 17px; line-height: 1.35; }
.machine-pick span, .machine-pick p { font-size: 14px; }
.machine-pick strong { font-size: 22px; }
}
.interaction-guide { color: rgb(240, 217, 156) !important; font-weight: 700; }
@media (max-width: 700px){
.criteria-sequence { grid-template-columns: 76px minmax(0px, 1fr); }
.criteria-sequence ol { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 5px; min-width: 0px; }
.criteria-sequence li { display: grid; grid-template-columns: 22px 1fr; min-height: 62px; padding: 7px 6px; }
.criteria-sequence li b { font-size: 15px; }
.criteria-sequence li span { padding-left: 7px; }
.criteria-sequence li span strong { font-size: 10px; line-height: 1.25; }
.criteria-sequence li span small { margin-top: 3px; font-size: 8px; line-height: 1.35; }
.candidate-card { grid-template-columns: 92px minmax(0px, 1fr); grid-template-rows: auto auto; column-gap: 8px; padding: 8px 9px; }
.candidate-card h3 { font-size: 15px; margin-top: 3px; }
.candidate-card ul { grid-area: 1 / 2 / 3; }
#enterInterview { min-height: 50px; padding: 10px 12px; }
#enterInterview span { font-size: 10px; }
.tactical-sticky-zone .lab-grid { grid-template-rows: minmax(0px, 1fr) auto; align-content: stretch; }
.tactical-sticky-zone .replay-stage { justify-content: flex-start; }
.tactical-sticky-zone #spaceBoard { flex: 0 0 auto; width: 100%; height: auto; min-height: 0px; max-height: none; margin: 0px auto; }
.play-caption { height: 44px; min-height: 44px; padding: 9px 10px 7px; font-size: 12px; line-height: 1.45; border-bottom: 1px solid rgb(56, 86, 73); -webkit-line-clamp: 2; }
.pitch-legend { min-height: 34px; margin: 5px 0px 4px; gap: 14px; font-size: 12px; line-height: 1.4; }
.pitch-legend i { width: 9px; height: 9px; margin-right: 6px; }
.transport { min-height: 48px; flex-basis: 48px; gap: 7px; margin: 0px 5px; }
.transport button { min-width: 68px; min-height: 44px; padding: 6px 8px; font-size: 11px; }
.transport .reset { min-width: 42px; min-height: 44px; font-size: 20px; }
.transport output { min-width: 66px; font-size: 10px; }
.replay-insight { grid-template-areas: "guide" "roles" "defender" "story"; gap: 8px; padding: 10px 10px 12px; border-top: 1px solid rgb(56, 86, 73); }
.replay-insight > .interaction-guide { display: block; grid-area: guide; margin: 0px; font-size: 12px; line-height: 1.45; }
.role-options { grid-area: roles; gap: 6px; }
.role-options button { min-height: 60px; padding: 8px 5px; border-color: rgb(96, 122, 107); }
.role-options b { font-size: 11px; line-height: 1.35; }
.role-options small { font-size: 9px; line-height: 1.3; }
.defender-control { grid-area: defender; grid-template-columns: 76px 1fr; gap: 7px; }
.defender-control > .small-label { font-size: 11px; line-height: 1.35; }
.defender-control > div { gap: 6px; }
.defender-control button { min-height: 48px; padding: 6px 4px; font-size: 11px; line-height: 1.35; }
.lens-story { grid-area: story; display: block; min-height: 94px; padding: 10px 12px; background: rgba(7, 29, 22, 0.72); border-left: 3px solid rgb(216, 201, 135); }
.lens-story h3 { margin: 0px 0px 5px; font-size: 18px; line-height: 1.35; white-space: normal; }
.lens-story > p:last-child { font-size: 12px; line-height: 1.55; }
.conditional-copy { display: none; }
}
@media (min-width: 701px){
.tactical-sticky-zone .replay-console { height: min(86svh, 800px); min-height: 640px; max-height: none; }
.tactical-sticky-zone .replay-insight { display: grid; grid-template-areas: "guide" "roles" "defender" "story" "condition"; grid-template-rows: auto auto auto minmax(0px, 1fr) auto; align-content: stretch; gap: 12px; padding: 18px; }
.tactical-sticky-zone .replay-insight > .interaction-guide { grid-area: guide; margin: 0px; }
.tactical-sticky-zone .role-options { grid-area: roles; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 7px; margin: 0px; }
.tactical-sticky-zone .role-options button { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 86px; padding: 10px 7px; text-align: center; gap: 5px; }
.tactical-sticky-zone .role-options b { font-size: 14px; line-height: 1.35; }
.tactical-sticky-zone .role-options small { font-size: 10px; }
.tactical-sticky-zone .role-options i { display: none; }
.tactical-sticky-zone .defender-control { grid-area: defender; display: block; margin: 0px; padding: 0px; border: 0px; }
.tactical-sticky-zone .defender-control > div { margin: 0px; }
.tactical-sticky-zone .defender-control button { min-height: 48px; font-size: 13px; }
.tactical-sticky-zone .lens-story { grid-area: story; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0px; padding: 18px 22px; background: rgba(7, 29, 22, 0.68); border-left: 0px; border-top: 1px solid rgba(216, 201, 135, 0.4); text-align: center; }
.tactical-sticky-zone .lens-story h3 { margin: 0px 0px 8px; font-size: 23px; }
.tactical-sticky-zone .lens-story > p:last-child { min-height: 0px; max-width: 34ch; margin: 0px; font-size: 13px; }
.tactical-sticky-zone .conditional-copy { grid-area: condition; min-height: 0px; margin: 0px; text-align: center; font-size: 12px; }
}
@media (max-width: 700px) and (max-height: 700px){
.tactical-sticky-zone .replay-console { height: auto; min-height: calc(-8px + 100svh); }
.tactical-sticky-zone .lab-grid { flex: 0 0 auto; grid-template-rows: auto auto; }
.tactical-sticky-zone .replay-stage { min-height: 0px; }
.tactical-sticky-zone #spaceBoard { max-height: 215px; }
}
.promise-section::before { background-size: auto max(100svh, 900px); background-position: 55% top; }
@media (max-width: 700px){
.promise-section::before { background-size: auto max(100svh, 700px); background-position: 55% top; }
}
.closing-line span { display: block; font-size: 0.52em; line-height: 1.75; color: rgb(210, 221, 213); font-weight: 500; }
.closing-line strong { display: block; max-width: 19ch; margin: 78px auto 0px; padding-top: 34px; border-top: 1px solid rgba(240, 221, 163, 0.45); font-size: clamp(42px, 5.8vw, 78px); line-height: 1.25; letter-spacing: -0.065em; color: rgb(240, 221, 163); text-shadow: rgba(0, 0, 0, 0.35) 0px 8px 30px; }
.closing-section .closing-grid { display: block; text-align: center; }
.closing-section .closing-grid h2 { margin-left: auto; margin-right: auto; }
.closing-section .eyebrow { text-align: center; }
@media (max-width: 700px){
.closing-line strong { margin-top: 58px; padding-top: 28px; font-size: clamp(34px, 10vw, 47px); }
}
.month-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(190, 211, 194, 0.5); }
.month-tabs button { min-height: 92px; padding: 16px 20px; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgba(190, 211, 194, 0.32) currentcolor currentcolor; border-image: none; background: transparent; color: rgb(233, 236, 225); text-align: left; }
.month-tabs button:last-child { border-right: 0px; }
.month-tabs button span { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.055em; }
.month-tabs button b { display: block; margin-top: 7px; font-size: 13px; font-weight: 500; line-height: 1.45; color: rgb(189, 203, 191); }
.month-tabs button[aria-selected="true"] { background: rgb(231, 211, 154); color: rgb(23, 33, 25); }
.month-tabs button[aria-selected="true"] b { color: rgb(83, 97, 88); }
.match-banner { padding: 20px 22px; border: 1px solid rgba(231, 211, 154, 0.58); background: rgba(10, 34, 26, 0.78); box-shadow: rgba(0, 0, 0, 0.18) 0px 18px 45px; }
.match-banner.is-refreshing { animation: 0.24s ease-out 0s 1 normal none running matchReveal; }
@keyframes matchReveal {
  0% { opacity: 0.45; transform: translateY(-5px); }
  100% { opacity: 1; transform: none; }
}
.match-banner-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid rgba(190, 211, 194, 0.3); }
.match-banner-head strong { font-size: 20px; }
.match-banner-head span { font-size: 12px; color: rgb(216, 201, 135); }
.match-banner #matchFixtures { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0px; padding: 0px; }
.match-banner #matchFixtures li { display: grid; grid-template-columns: 110px 1fr; gap: 3px 14px; align-items: center; min-height: 78px; padding: 13px 18px; border-right: 1px solid rgba(190, 211, 194, 0.25); }
.match-banner #matchFixtures li:last-child { border-right: 0px; }
.match-banner #matchFixtures time { grid-row: 1 / 3; font-size: 20px; font-weight: 700; letter-spacing: -0.04em; }
.match-banner #matchFixtures time small { font-size: 10px; color: rgb(184, 200, 190); margin-left: 5px; }
.match-banner #matchFixtures b { font-size: 15px; }
.match-banner #matchFixtures li > span { font-size: 11px; color: rgb(170, 190, 159); }
.match-source { padding-top: 12px; border-top: 1px solid rgba(190, 211, 194, 0.3); font-size: 11px; color: rgb(172, 190, 172); line-height: 1.7; }
.match-source a { white-space: nowrap; color: rgb(216, 201, 135); }
@media (max-width: 700px){
.match-window { padding-bottom: 0px; }
.month-tabs button { min-height: 86px; padding: 12px 10px; text-align: center; }
.month-tabs button span { font-size: 23px; }
.month-tabs button b { font-size: 11px; line-height: 1.4; }
.match-banner { padding: 15px 14px; }
.match-banner-head strong { font-size: 18px; }
.match-banner-head span { font-size: 10px; }
.match-banner #matchFixtures { grid-template-columns: 1fr; }
.match-banner #matchFixtures li { grid-template-columns: 88px 1fr; min-height: 66px; padding: 10px 4px; border-right: 0px; border-bottom: 1px solid rgba(190, 211, 194, 0.22); }
.match-banner #matchFixtures li:last-child { border-bottom: 0px; }
.match-banner #matchFixtures time { font-size: 17px; }
.match-banner #matchFixtures b { font-size: 14px; }
.match-source { font-size: 10px; }
}
.attention-cta { position: relative; animation: 1.7s ease-in-out 0s infinite normal none running actionPulse; }
.attention-cta span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes actionPulse {
  0%, 100% { box-shadow: rgba(240, 221, 163, 0.08) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(240, 221, 163, 0.2) 0px 0px 0px 5px; }
}
.interaction-guide { align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(240, 217, 156, 0.55); background: rgba(240, 217, 156, 0.08); display: flex !important; padding: 10px 12px !important; }
.interaction-guide b { font-size: 13px; color: rgb(243, 221, 160); }
.interaction-guide span { font-size: 11px; color: rgb(199, 212, 201); text-align: right; }
.replay-insight:not(.has-role-choice) .role-options { border-radius: 7px; animation: 1.7s ease-in-out 0s infinite normal none running controlPulse; }
.replay-insight.has-role-choice:not(.has-response-choice) .defender-control { border-radius: 7px; animation: 1.7s ease-in-out 0s infinite normal none running controlPulse; }
@keyframes controlPulse {
  0%, 100% { box-shadow: rgba(240, 217, 156, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(240, 217, 156, 0.42) 0px 0px 0px 3px; }
}
.defender-control > .small-label b, .defender-control > .small-label span { display: block; }
.defender-control > .small-label span { margin-top: 3px; font-size: 9px; color: rgb(240, 217, 156); }
.month-guide { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0px 10px; padding: 12px 15px; border-left: 3px solid rgb(231, 211, 154); background: rgba(231, 211, 154, 0.1); }
.month-guide b { font-size: 15px; color: rgb(240, 221, 163); }
.month-guide span { font-size: 12px; color: rgb(189, 203, 191); text-align: right; }
.month-tabs { position: relative; }
.month-tabs:not(.has-selection) { animation: 1.7s ease-in-out 0s infinite normal none running controlPulse; }
.month-tabs button { position: relative; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; }
.month-tabs button:hover, .month-tabs button:focus-visible { background: rgba(231, 211, 154, 0.14); outline: rgb(231, 211, 154) solid 2px; outline-offset: -2px; }
.month-tabs button[aria-selected="false"]::after { content: "눌러보기"; display: inline-block; margin-top: 9px; padding: 3px 7px; border: 1px solid rgba(231, 211, 154, 0.55); border-radius: 999px; font-size: 9px; color: rgb(231, 211, 154); }
.month-tabs button[aria-selected="true"]::after { content: "일정 열림"; display: inline-block; margin-top: 9px; padding: 3px 7px; border: 1px solid rgba(23, 33, 25, 0.35); border-radius: 999px; font-size: 9px; color: rgb(23, 33, 25); }
.match-banner[hidden] { display: none !important; }
@media (max-width: 700px){
.selection-lab:not(.is-result) .decision-view { display: grid; grid-template-rows: auto minmax(290px, 1fr) auto auto; place-content: stretch; gap: 11px; padding: 12px 10px; }
.selection-lab:not(.is-result) .decision-view .candidate-grid, .selection-lab:not(.is-result) .decision-view .machine-pick, .selection-lab:not(.is-result) .decision-view .decision-next { margin-top: 0px; }
.candidate-grid { grid-template-rows: repeat(2, minmax(0px, 1fr)); gap: 9px; min-height: 0px; }
.candidate-card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0px, 1fr); align-content: stretch; min-height: 0px; padding: 12px 13px; column-gap: 0px; }
.candidate-card > span { grid-area: 1 / 1; font-size: 10px; }
.candidate-card h3 { grid-area: 2 / 1; min-height: 0px; margin: 3px 0px 9px; font-size: 18px; line-height: 1.25; }
.candidate-card ul { grid-area: 3 / 1; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; border-top: 1px solid rgb(53, 64, 59); }
.candidate-card li { min-height: 42px; padding: 7px 5px; border-right: 1px solid rgb(53, 64, 59); border-bottom: 1px solid rgb(53, 64, 59); }
.candidate-card li:nth-child(2n) { border-right: 0px; }
.candidate-card li:nth-last-child(-n+2) { border-bottom: 0px; }
.candidate-card li b { font-size: 9px; }
.candidate-card li em { font-size: 12px; }
.machine-pick { min-height: 46px; }
#enterInterview { min-height: 62px; padding: 12px 14px; font-size: 15px; }
#enterInterview span { max-width: 112px; font-size: 10px; line-height: 1.35; text-align: right; }
.interaction-guide { display: block !important; padding: 9px 10px !important; }
.interaction-guide b, .interaction-guide span { display: block; text-align: left; }
.interaction-guide b { font-size: 12px; }
.interaction-guide span { margin-top: 3px; font-size: 10px; }
.role-options button { position: relative; min-height: 68px; padding-top: 18px; }
.replay-insight:not(.has-role-choice) .role-options button::before { content: "먼저 누르기"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 8px; color: rgb(240, 217, 156); white-space: nowrap; }
.defender-control { grid-template-columns: 92px 1fr; }
.defender-control > .small-label { text-align: left; }
.defender-control > .small-label b { font-size: 11px; }
.defender-control > .small-label span { font-size: 8px; }
.defender-control button { min-height: 52px; font-size: 12px; }
.month-guide { display: block; margin: 12px 0px 8px; padding: 11px 12px; }
.month-guide b, .month-guide span { display: block; text-align: left; }
.month-guide b { font-size: 14px; }
.month-guide span { margin-top: 3px; font-size: 10px; }
.month-tabs button { min-height: 106px; padding: 12px 7px; }
.month-tabs button b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
.attention-cta, .replay-insight:not(.has-role-choice) .role-options, .replay-insight.has-role-choice:not(.has-response-choice) .defender-control, .month-tabs:not(.has-selection) { animation: auto ease 0s 1 normal none running none; }
}
.month-tabs button[aria-selected="true"]::after { content: "다시 눌러 접기"; }
@media (max-width: 700px){
.selection-lab.is-interview .interview-copy { display: grid; grid-template-rows: auto 26px auto auto minmax(0px, 1fr); place-content: stretch; gap: 10px; height: 100%; padding: 13px 12px 15px; }
.selection-lab.is-interview .interview-status { min-height: 32px; padding-bottom: 8px; }
.selection-lab.is-interview .interview-status .small-label { font-size: 12px; }
.selection-lab.is-interview .interview-status strong { font-size: 12px; }
.selection-lab.is-interview .interview-back { height: 26px; margin: 0px; padding: 4px 0px; font-size: 11px; }
.selection-lab.is-interview .interview-copy h3 { align-self: center; max-width: 18ch; margin: 0px; font-size: clamp(28px, 8.4vw, 36px); line-height: 1.3; letter-spacing: -0.045em; }
.selection-lab.is-interview .dialogue-guide { align-self: end; margin: 0px; font-size: 12px; line-height: 1.5; color: rgb(216, 201, 135); }
.selection-lab.is-interview .dialogue-options { display: grid; grid-template-rows: repeat(3, minmax(0px, 1fr)); gap: 9px; height: 100%; min-height: 0px; }
.selection-lab.is-interview .dialogue-options button { height: 100%; min-height: 0px; padding: 13px 14px; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; border-color: rgb(113, 128, 121); background: rgba(18, 27, 23, 0.88); }
.selection-lab.is-interview .dialogue-options span { width: 32px; height: 32px; font-size: 11px; }
.selection-lab.is-interview .dialogue-options b { font-size: 15px; line-height: 1.55; }
.tactical-sticky-zone .defender-control { display: block; grid-template-columns: none; }
.tactical-sticky-zone .defender-control > div { width: 100%; margin: 0px; }
}
.closing-line span { max-width: 40ch; margin-left: auto; margin-right: auto; text-align: center; }
.verdict-screen { position: relative; padding-bottom: 130px; }
.verdict-reset { position: absolute; left: 50%; bottom: 42px; transform: translate(-50%, 18px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s, transform 0.45s, visibility linear 0.45s; width: min(300px, 100% - 40px) !important; min-height: 54px !important; text-align: center !important; border-color: rgb(216, 201, 135) !important; background: rgba(15, 25, 20, 0.84) !important; }
.decision-result.is-actions-ready .verdict-reset { transform: translate(-50%, 0px); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.verdict-reset:disabled { cursor: default; }
.decision-result .method-actions { grid-template-columns: 1fr; }
@media (max-width: 700px){
.selection-lab:not(.is-result) .decision-view { grid-template-rows: auto minmax(260px, 1fr) auto auto; padding: 12px 10px 18px; }
#enterInterview { width: calc(100% - 8px); min-height: 62px; padding: 12px 14px; border-radius: 4px; font-size: 15px; box-shadow: rgba(0, 0, 0, 0.22) 0px 7px 18px; margin: 0px 4px 4px !important; }
.verdict-screen { padding-bottom: 118px; }
.verdict-reset { bottom: 34px; }
}
@media (prefers-reduced-motion: reduce){
.verdict-reset { transition: none; }
}
@media (min-width: 701px){
.candidate-card ul { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.candidate-card li { min-width: 0px; padding: 10px 6px; }
.candidate-card li b, .candidate-card li em { white-space: nowrap; }
}
.tactical-carry strong { white-space: pre-line; }
.closing-line strong { text-align: center; }
.share-story { position: relative; display: grid; justify-items: center; gap: 10px; max-width: 1140px; margin: 42px auto 0px; text-align: center; }
.share-story button { min-width: 180px; min-height: 52px; padding: 12px 22px; border: 1px solid rgba(240, 221, 163, 0.72); border-radius: 999px; background: rgba(8, 22, 17, 0.72); color: rgb(240, 221, 163); font-size: 15px; font-weight: 800; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; }
.share-story button:hover, .share-story button:focus-visible { background: rgb(240, 221, 163); color: rgb(19, 34, 26); transform: translateY(-2px); outline: none; }
.share-story button span { margin-left: 8px; }
.share-story p { min-height: 20px; font-size: 12px; line-height: 1.6; color: rgb(200, 215, 206); }
.share-story p:empty { visibility: hidden; }
@media (max-width: 700px){
.share-story { margin-top: 34px; }
.share-story button { min-width: 164px; min-height: 48px; font-size: 14px; }
}
@media (min-width: 701px){
.selection-lab, .selection-lab:not(.is-result) .selection-shell { overflow: visible !important; }
.selection-lab:not(.is-result) .selection-shell { padding-bottom: 38svh; }
.selection-lab:not(.is-result) .selection-console { width: 100%; height: clamp(660px, 86svh, 800px); overflow: hidden; position: sticky !important; top: 8px !important; }
.selection-lab:not(.is-result) .decision-view { width: 100%; height: calc(100% - 58px); min-height: 0px; display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-rows: auto minmax(0px, 1fr) auto auto; gap: 12px; padding: 24px 28px 26px; }
.selection-lab:not(.is-result) .decision-view > .selection-situation, .selection-lab:not(.is-result) .decision-view > .candidate-grid, .selection-lab:not(.is-result) .decision-view > .machine-pick, .selection-lab:not(.is-result) .decision-view > #enterInterview { grid-column: 1 / -1; width: 100%; min-width: 0px; }
.selection-lab:not(.is-result) .candidate-grid { grid-template-rows: repeat(2, minmax(0px, 1fr)); gap: 12px; min-height: 0px; margin-top: 0px; }
.selection-lab:not(.is-result) .candidate-card { height: 100%; min-height: 0px; padding: 18px 24px; }
.selection-lab:not(.is-result) .machine-pick, .selection-lab:not(.is-result) #enterInterview { margin-top: 0px; }
}
.metric-bar { width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: rgb(44, 60, 52); display: block !important; margin-top: 9px !important; }
.metric-bar i { display: block; width: var(--metric); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(131, 203, 183), rgb(231, 211, 154)); box-shadow: rgba(158, 217, 200, 0.28) 0px 0px 12px; }
.candidate-card:not(.is-recommended) .metric-bar i { background: linear-gradient(90deg, rgb(231, 211, 154), rgb(183, 213, 200)); }
#enterInterview { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 20px; min-height: 78px; padding: 13px 18px 13px 22px; overflow: hidden; border: 2px solid rgb(243, 221, 160); background: linear-gradient(100deg, rgb(240, 217, 149), rgb(246, 231, 183) 72%, rgb(236, 209, 138)); box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 28px, rgba(240, 221, 163, 0.12) 0px 0px 0px 4px; animation: 1.55s ease-in-out 0s infinite normal none running ctaBeacon; }
#enterInterview::before { content: ""; position: absolute; inset: 0px auto 0px -28%; width: 18%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent); transform: skewX(-18deg); animation: 2.5s ease-in-out 0s infinite normal none running ctaSweep; }
#enterInterview .cta-copy { position: relative; display: block; max-width: none; text-align: left; color: rgb(23, 33, 25); }
#enterInterview .cta-copy small, #enterInterview .cta-copy b { display: block; }
#enterInterview .cta-copy small { margin-bottom: 4px; font-size: 11px; line-height: 1.35; letter-spacing: 0.05em; color: rgb(105, 95, 63); }
#enterInterview .cta-copy b { font-size: 20px; line-height: 1.3; letter-spacing: -0.035em; }
#enterInterview .cta-action { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 180px; min-height: 50px; padding: 10px 14px; border-radius: 4px; background: rgb(23, 43, 34); color: rgb(255, 255, 255); font-weight: 800; text-align: center; font-size: 13px !important; }
#enterInterview .cta-action i { font-size: 22px; font-style: normal; animation: 1s ease-in-out 0s infinite normal none running ctaArrow; }
@keyframes ctaBeacon {
  0%, 100% { box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 28px, rgba(240, 221, 163, 0.12) 0px 0px 0px 2px; }
  50% { box-shadow: rgba(0, 0, 0, 0.38) 0px 14px 34px, rgba(240, 221, 163, 0.26) 0px 0px 0px 7px; }
}
@keyframes ctaSweep {
  0%, 48% { left: -28%; }
  78%, 100% { left: 118%; }
}
@keyframes ctaArrow {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(5px); }
}
.tactic-sequence { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 7px; width: 100%; max-width: 360px; margin-top: 24px; }
.tactic-sequence span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 68px; padding: 9px 5px; border: 1px solid rgba(145, 174, 157, 0.45); background: rgba(19, 52, 41, 0.74); font-size: 11px; line-height: 1.35; color: rgb(220, 231, 223); }
.tactic-sequence i { display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 6px; border: 1px solid rgb(216, 201, 135); border-radius: 50%; color: rgb(240, 217, 156); font-size: 10px; font-style: normal; font-weight: 800; }
@media (min-width: 701px){
.tactical-sticky-zone .replay-console { height: calc(-16px + 100svh); min-height: 760px; max-height: 900px; }
.tactical-sticky-zone .lab-grid { grid-template-columns: minmax(0px, 1.85fr) minmax(350px, 1fr); }
.tactical-sticky-zone .replay-stage { display: flex; flex-direction: column; padding: 18px 22px 12px; }
.tactical-sticky-zone #spaceBoard { flex: 1 1 0%; min-height: 0px; max-height: none; margin: auto; }
.tactical-sticky-zone .role-options button { min-height: 96px; }
.tactical-sticky-zone .defender-control button { min-height: 56px; }
.tactical-sticky-zone .lens-story { padding: 22px 24px; }
}
@media (max-width: 700px){
.selection-lab:not(.is-result) .selection-shell { padding-bottom: 30svh; }
.metric-bar { display: none !important; }
#enterInterview { min-height: 68px; grid-template-columns: minmax(0px, 1fr) 104px; gap: 8px; padding: 9px 9px 9px 13px; }
#enterInterview .cta-copy small { font-size: 8px; }
#enterInterview .cta-copy b { font-size: 14px; }
#enterInterview .cta-action { min-width: 0px; min-height: 46px; padding: 7px; font-size: 10px !important; }
.tactic-sequence { display: none; }
}
@media (prefers-reduced-motion: reduce){
#enterInterview, #enterInterview::before, #enterInterview .cta-action i { animation: auto ease 0s 1 normal none running none; }
}
@media (min-width: 701px){
.selection-lab.is-interview:not(.is-result) .interview-copy { display: grid; grid-template-rows: 52px 30px 112px 28px minmax(0px, 1fr); place-content: stretch; gap: 8px; width: 54%; max-width: 650px; height: 100%; min-height: 0px; padding: 18px 32px 22px; }
.selection-lab.is-interview:not(.is-result) .interview-status { grid-row: 1; height: 52px; padding-bottom: 10px; }
.selection-lab.is-interview:not(.is-result) .interview-back { grid-row: 2; height: 30px; margin: 0px; padding: 4px 0px; }
.selection-lab.is-interview:not(.is-result) .interview-back[hidden] { display: block; visibility: hidden; pointer-events: none; }
.selection-lab.is-interview:not(.is-result) .interview-copy h3 { grid-row: 3; display: flex; align-items: center; width: 100%; height: 112px; max-width: 19ch; margin: 0px; font-size: clamp(28px, 3vw, 38px); line-height: 1.35; }
.selection-lab.is-interview:not(.is-result) .dialogue-guide { grid-row: 4; display: flex; align-items: flex-end; height: 28px; margin: 0px; }
.selection-lab.is-interview:not(.is-result) .dialogue-options { grid-row: 5; display: grid; grid-template-rows: repeat(3, minmax(0px, 1fr)); gap: 8px; height: 100%; min-height: 0px; }
.selection-lab.is-interview:not(.is-result) .dialogue-options button { height: 100%; min-height: 0px; align-items: center; }
}
@media (max-width: 700px){
.selection-lab.is-interview:not(.is-result) .interview-copy { grid-template-rows: 32px 26px 92px 24px minmax(0px, 1fr); }
.selection-lab.is-interview:not(.is-result) .interview-status { grid-row: 1; height: 32px; }
.selection-lab.is-interview:not(.is-result) .interview-back { grid-row: 2; height: 26px; }
.selection-lab.is-interview:not(.is-result) .interview-copy h3 { grid-row: 3; display: flex; align-items: center; width: 100%; height: 92px; margin: 0px; }
.selection-lab.is-interview:not(.is-result) .dialogue-guide { grid-row: 4; display: flex; align-items: flex-end; height: 24px; margin: 0px; }
.selection-lab.is-interview:not(.is-result) .dialogue-options { grid-row: 5; }
}
.selection-lab.is-result { background: rgb(11, 14, 12); overflow: visible; }
.selection-lab.is-result::before, .selection-lab.is-result::after { display: none; }
.selection-lab.is-result .selection-shell { width: 100%; max-width: none; min-height: 100svh; margin: 0px; padding: 0px !important; }
.selection-lab.is-result .selection-heading, .selection-lab.is-result .method-top { display: none !important; }
.selection-lab.is-result .selection-console { width: 100%; border: 0px; background: transparent; box-shadow: none; backdrop-filter: none; overflow: visible; height: auto !important; }
.selection-lab.is-result .decision-result { min-height: 100svh; background: rgb(11, 14, 12); }
.selection-lab.is-result .verdict-screen { width: 100%; height: 100svh; min-height: 100svh; padding-top: 40px; padding-bottom: 130px; }
@media (max-width: 700px){
.selection-lab.is-result .verdict-screen { height: 100svh; min-height: 100svh; padding-top: 30px; padding-bottom: 118px; }
}
.selection-sticky-track { position: relative; width: 100%; min-width: 0px; }
.selection-lab.is-result .selection-sticky-track { min-height: 0px; }
@media (min-width: 701px){
.selection-lab:not(.is-result) .selection-shell { min-height: 0px; padding-bottom: 80px; }
.selection-lab:not(.is-result) .selection-sticky-track { min-height: 138svh; }
.selection-lab:not(.is-result) .selection-console { height: calc(-16px + 100svh); min-height: 0px; max-height: 900px; position: sticky !important; top: 8px !important; }
.selection-lab:not(.is-result) .decision-view, .selection-lab:not(.is-result) .interview-view { height: calc(100% - 58px); min-height: 0px; }
}
@media (max-width: 700px){
.selection-lab:not(.is-result) .selection-shell, .selection-lab.is-interview:not(.is-result) .selection-shell { min-height: 0px; padding-bottom: 20px; }
.selection-lab:not(.is-result) .selection-sticky-track { min-height: 135svh; }
.selection-lab:not(.is-result) .selection-console { height: calc(-8px + 100svh); min-height: 0px; max-height: none; position: sticky !important; top: 4px !important; }
}
@media (max-width: 700px){
:root { --visual-header-height: 64px; }
html { scroll-padding-top: calc(var(--visual-header-height) + 8px); }
.selection-lab:not(.is-result) .selection-console { height: calc(100svh - var(--visual-header-height) - 8px); scroll-margin-top: calc(var(--visual-header-height) + 4px); top: calc(var(--visual-header-height) + 4px) !important; }
.tactical-sticky-zone .replay-console { top: calc(var(--visual-header-height) + 4px); height: calc(100svh - var(--visual-header-height) - 8px); min-height: 0px; scroll-margin-top: calc(var(--visual-header-height) + 4px); }
.tactical-sticky-zone .lab-grid { grid-template-rows: auto auto; }
.tactical-sticky-zone .replay-stage { min-height: max-content; border-bottom: 0px; }
.tactical-sticky-zone #spaceBoard { max-height: 195px; }
.tactical-sticky-zone .transport { position: relative; z-index: 2; background: rgb(16, 43, 35); }
.tactical-sticky-zone .replay-insight { border-top: 0px; padding-top: 8px; }
}