/* R4 operational layouts. Semantic foundation aliases are bound to the received TECHXV-RUGBY tokens by native-adapter.css. */
:root {
  color-scheme: dark light;
  --color-ink: #122d27;
  --color-ink-muted: #51645d;
  --color-canvas: #f4f0dd;
  --color-paper: #eae8d8;
  --color-white: #fff;
  --color-night: #102d24;
  --color-night-deep: #0a211b;
  --color-forest: #183c31;
  --color-grass: #285c3f;
  --color-lime: #e5a642;
  --color-accent: #e5a642;
  --color-border: #d3d9cc;
  --color-on-dark: #f4f6e9;
  --color-muted-dark: #b2c1b5;
  --color-warning: #785111;
  --color-danger: #943c37;
  --color-focus: #6e4dc5;
  --font-body: Inter, "Segoe UI", Arial, sans-serif;
  --font-display: "Arial Black", "Segoe UI", Arial, sans-serif;
  --font-number: "Segoe UI", Arial, sans-serif;
  --radius-sm: .45rem;
  --radius-card: 1.2rem;
  --space-section: clamp(3.5rem, 7vw, 6.25rem);
  --shadow-card: 0 8px 30px #07161a08;
  font-family: var(--font-body);
  font-size: 16px;
  font-synthesis: none;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-canvas);
  scroll-padding-top: 7rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-underline-offset: .22em; }
a, button, input, select, textarea, summary { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--color-focus); }
.site-header :focus-visible, .hero :focus-visible, .game-card :focus-visible, .site-footer :focus-visible { outline-color: var(--color-lime); }
[hidden] { display: none !important; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0 0 1rem; line-height: 1.13; letter-spacing: -.035em; }
h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 5.25vw, 4.9rem); font-weight: 900; }
h2 { font-size: clamp(2.05rem, 3.4vw, 3.15rem); font-weight: 800; }
h3 { font-size: 1.55rem; font-weight: 750; }
small { font-size: .8rem; }
.shell { width: min(1240px, calc(100% - 5rem)); margin-inline: auto; }
.section { padding-block: var(--space-section); scroll-margin-top: 1rem; }
.section-paper { background: var(--color-paper); border-block: 1px solid #d7ddcf; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.25rem; }
.section-heading h2 { margin-bottom: 0; max-width: 700px; }
.section-heading > p { max-width: 370px; margin-bottom: .2rem; color: var(--color-ink-muted); }
.eyebrow { margin-bottom: 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.small-note { color: var(--color-ink-muted); font-size: .81rem; line-height: 1.55; }
.button-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.button { min-height: 48px; padding: .8rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 750; line-height: 1.35; text-align: center; text-decoration: none; }
.button-lime { color: var(--color-night-deep); background: var(--color-lime); }
.button-lime:hover:not(:disabled) { background: #f3b858; }
.button-dark { color: var(--color-white); background: var(--color-forest); }
.button-dark:hover:not(:disabled) { background: #245a42; }
.button-outline { color: inherit; border-color: currentColor; background: transparent; }
.button-outline:hover:not(:disabled) { background: #70827212; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 1.2rem; font-size: .9rem; font-weight: 700; text-decoration: underline; }
.text-link:hover { text-decoration-thickness: 2px; }
.pill { display: inline-flex; align-items: center; padding: .35rem .65rem; border-radius: 99px; background: #e4e9db; font-size: .65rem; font-weight: 800; letter-spacing: .065em; line-height: 1.4; text-transform: uppercase; }
.pill-green { color: #21543a; background: #e5edd3; }
.pill-warning { color: #66450b; background: #f7e3b6; }
.skip-link { position: fixed; z-index: 20; left: 1rem; top: -100px; padding: .8rem 1.1rem; color: var(--color-night); background: var(--color-lime); }
.skip-link:focus { top: 1rem; }
.site-header { position: relative; z-index: 2; color: var(--color-on-dark); background: var(--color-night-deep); border-bottom: 1px solid #ffffff19; }
.header-inner { width: min(1360px, calc(100% - 5rem)); min-height: 94px; margin: auto; display: flex; justify-content: space-between; gap: 2rem; align-items: center; }
.brand { display: inline-flex; gap: .75rem; align-items: center; font-weight: 900; font-size: 1.17rem; letter-spacing: -.035em; line-height: 1.15; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 45px; color: var(--color-night-deep); background: var(--color-lime); border-radius: 4px 4px 12px 4px; font-size: 1.35rem; font-weight: 900; letter-spacing: -.08em; }
.brand small { display: block; padding-top: .28rem; color: var(--color-muted-dark); font-size: .65rem; font-weight: 500; letter-spacing: .04em; }
nav { display: flex; gap: 1.75rem; }
nav a { min-height: 44px; display: flex; align-items: center; font-size: .86rem; font-weight: 600; text-decoration: none; color: #d5dfd7; }
nav a:hover { color: var(--color-lime); }
.session-tag { padding: .5rem .75rem; border: 1px solid #ffffff24; border-radius: 99px; color: #d2ddcd; font-size: .7rem; white-space: nowrap; }
.hero { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 3.4rem max(2.5rem, calc((100% - 1240px) / 2)) 3.4rem; color: var(--color-on-dark); background: radial-gradient(ellipse at 90% 30%, #24523a55, transparent 60%), var(--color-night); overflow: hidden; }
.hero-visual { display: grid; gap: 1rem; }
.hero-art { display: block; width: 100%; overflow: hidden; border-radius: var(--radius-card); }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.hero-signature { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; }
.hero-signature .eyebrow { margin-bottom: 0; }
.rubric-icon { display: block; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.icon-tile { padding: 3px; margin-bottom: 1rem; border-radius: .65rem; background: var(--color-forest); }
.version-icon { float: right; margin: 0 0 1rem 1rem; }
.scrum-art { display: block; width: min(100%, 480px); margin: -1rem auto .5rem; }
.scrum-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.game-card .rugby-field { height: 120px; }
.game-card .beat-ring { width: 84px; height: 84px; font-size: 2rem; }
.hero-copy { position: relative; }
.hero .eyebrow { color: #c7d4b7; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .4rem; background: var(--color-lime); }
.hero-intro { max-width: 590px; margin-block: 1.5rem 1.75rem; color: #c2d0c2; font-size: 1rem; line-height: 1.8; }
.hero .text-link { color: #e7eedb; }
.hero-note { margin-top: 1.5rem; margin-bottom: 0; color: #9eafa3; font-size: .72rem; }
.match-card { position: relative; padding: 1.7rem; border: 1px solid #bdd79a36; border-radius: var(--radius-card); background: #19382e; box-shadow: 0 20px 60px #0002; }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .65rem; font-weight: 750; letter-spacing: .08em; }
.match-card .pill { background: #ffffff0d; color: #d3e3b8; border: 1px solid #ffffff1c; }
.case-flow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1.8rem; }
.case-flow > div { flex: 1; }
.case-flow strong { display: block; font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.065em; }
.case-flow > div:last-child strong { color: var(--color-lime); }
.case-flow div span { display: block; margin-top: .65rem; font-size: .7rem; color: #c1d1ba; }
.flow-arrow { color: #9bad8b; font-size: 1.4rem; }
.result-bar { display: flex; height: 9px; gap: 3px; border-radius: 9px; overflow: hidden; }
.bar-won { flex: 14; background: var(--color-lime); }.bar-lost { flex: 7; background: #91aa81; }.bar-unknown { flex: 1; background: #d8dbce; }
.case-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-block: .75rem 1.6rem; font-size: .63rem; color: #c8d6c1; }
.case-legend i { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; }.legend-won { background: var(--color-lime); }.legend-lost { background: #91aa81; }.legend-unknown { background: #d8dbce; }
.match-result { padding-top: 1.25rem; border-top: 1px solid #ffffff19; }
.match-result > span { display: block; color: #b8c9b2; font-size: .72rem; }
.match-result strong { display: block; padding-top: .35rem; font-size: 1.75rem; letter-spacing: -.04em; }
.match-result small { padding-left: .5rem; font-size: 1rem; font-weight: 500; color: var(--color-lime); }
.match-card > p { margin-block: .7rem 0; font-size: .72rem; color: #b0c2ab; }
.lesson-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; margin-bottom: 1.3rem; }
.lesson-tab { min-height: 66px; display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-ink-muted); font-size: .84rem; font-weight: 700; text-align: left; }
.lesson-tab span { font-size: .67rem; font-weight: 500; }
.lesson-tab.is-active { background: var(--color-forest); color: var(--color-white); border-color: var(--color-forest); }
.lesson-tab.is-active span { color: var(--color-lime); }
.lesson-tab:hover:not(.is-active) { background: #e1e6d6; }
.exercise-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.3rem; }
.exercise-main { min-width: 0; padding: 2.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); box-shadow: var(--shadow-card); }
.exercise-label { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: .73rem; color: var(--color-ink-muted); }
.lesson-panel > p { max-width: 680px; font-size: .91rem; color: var(--color-ink-muted); }
.sample-row { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; padding: 1rem; margin-block: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); font-size: .79rem; }
.sample-row strong { color: #1d5a38; }.sample-row span:last-child { color: var(--color-ink-muted); }
.practice-form { display: grid; gap: 1rem; margin-top: 1.6rem; }
.practice-form .button { justify-self: start; }
label { display: grid; gap: .45rem; font-size: .81rem; font-weight: 650; }
input, select, textarea { width: 100%; min-height: 46px; padding: .7rem .75rem; border: 1px solid #aebba8; border-radius: var(--radius-sm); color: var(--color-ink); background: #fff; font-size: .88rem; }
textarea { resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #76837a; opacity: 1; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.form-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-question { padding: 1.2rem; background: var(--color-paper); border-radius: var(--radius-sm); }
.control-question > p { font-size: .82rem; }
.feedback { min-height: 1.5em; margin-top: 1rem; margin-bottom: 0; font-size: .85rem; line-height: 1.65; }
.feedback[data-state="success"] { color: #23552e; }.feedback[data-state="error"] { color: var(--color-danger); }.feedback[data-state="warning"] { color: var(--color-warning); }
details { border-top: 1px solid var(--color-border); margin-top: 1.5rem; }
summary { min-height: 48px; padding-block: .8rem; cursor: pointer; font-size: .83rem; font-weight: 700; }
details > p { padding: .4rem 0 .7rem; font-size: .85rem; color: var(--color-ink-muted); }
.practice-aside { padding: 1.8rem; border-radius: var(--radius-card); background: #e1e7d6; }
.practice-aside .eyebrow { font-size: .62rem; }
.practice-aside h3 { margin-top: 1.5rem; font-size: 1.9rem; line-height: 1.2; }
.practice-aside ol { padding-left: 1.2rem; margin-block: 1.6rem; font-size: .81rem; line-height: 1.7; }
.practice-aside li { padding: .25rem 0 .4rem .2rem; }
.practice-aside li::marker { color: #467252; font-weight: 700; }
.practice-aside .small-note { margin-top: 1.5rem; font-size: .72rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: 1.4rem; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .8rem; }
caption { padding: .7rem 1rem; background: var(--color-paper); text-align: left; font-size: .72rem; font-weight: 600; }
th, td { padding: .65rem 1rem; border-top: 1px solid var(--color-border); }
thead { background: var(--color-canvas); font-size: .69rem; text-transform: uppercase; letter-spacing: .04em; }
.state-choices { display: grid; gap: .65rem; }
.state-choices label { display: grid; grid-template-columns: 1fr 185px; align-items: center; gap: 1rem; padding: .65rem .8rem; background: var(--color-paper); border-radius: var(--radius-sm); }
.version-board { margin-block: 1.5rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); }
.version-board > span:first-of-type { display: block; margin-bottom: .5rem; font-size: .65rem; letter-spacing: .12em; }
.version-board strong { font-size: 1.8rem; letter-spacing: -.04em; }.version-board p { margin-block: .5rem .9rem; font-size: .83rem; }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.support-card { display: flex; flex-direction: column; padding: 1.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); box-shadow: var(--shadow-card); }
.resource-type { margin-bottom: 1.5rem; font-size: .63rem; font-weight: 750; letter-spacing: .1em; color: #537045; }
.support-card h3 { max-width: 260px; font-size: 1.5rem; }
.support-card p { flex-grow: 1; font-size: .85rem; color: var(--color-ink-muted); }
.support-card a { align-self: start; margin-top: 1rem; }
.resource-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.download-list { margin-block: .4rem 0; padding-left: 1.2rem; }
.download-list li { margin-block: .45rem; font-size: .83rem; }
.download-list a { display: inline-flex; align-items: center; min-height: 44px; }
.coach-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.coach-intro > p:not(.eyebrow) { color: var(--color-ink-muted); font-size: .9rem; }
.coach-availability { margin-block: 2rem; padding: 1.2rem; border-left: 3px solid #89a16b; background: #e1e7d5; }
.coach-availability p { margin: .7rem 0 0; font-size: .82rem; }
.coach-card { padding: 2.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.coach-card > label { margin-bottom: .6rem; }
fieldset { margin: 1.5rem 0; padding: 0; border: 0; }
legend { margin-bottom: .7rem; font-size: .81rem; font-weight: 650; }
.radio-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.radio-options label { display: flex; gap: .6rem; align-items: center; min-height: 70px; padding: .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.radio-options label:has(input:checked) { border-color: #618247; background: #f1f6e8; }
.radio-options input { width: 17px; min-height: 17px; height: 17px; accent-color: #315835; flex-shrink: 0; }
.radio-options small { display: block; margin-top: .2rem; font-size: .66rem; font-weight: 400; color: var(--color-ink-muted); }
.question-meta { display: flex; justify-content: space-between; gap: 1rem; margin-block: .5rem 1.3rem; color: var(--color-ink-muted); font-size: .67rem; }
#question-count { flex-shrink: 0; }
.coach-answer { margin-top: 1.5rem; padding: 1.4rem; border: 1px solid #cbd9ba; border-radius: var(--radius-sm); background: #f3f7ec; }
.coach-answer h3 { font-size: 1rem; }.coach-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.game-card { padding: 1.8rem; border: 1px solid #315040; border-radius: var(--radius-card); color: var(--color-on-dark); background: var(--color-forest); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.game-card .pill { color: #d6e9bf; background: #ffffff0a; border: 1px solid #ffffff24; }
#game-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.rugby-field { position: relative; display: grid; place-items: center; height: 192px; overflow: hidden; border: 1px solid #9bb58c65; border-radius: .35rem; background: repeating-linear-gradient(90deg, #446e4519 0%, #446e4519 16.66%, #82a65a13 16.66%, #82a65a13 33.33%); }
.field-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #b0c39750; }.field-line-one { left: 22%; }.field-line-two { right: 22%; }
.field-center { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #b0c39775; }
.beat-ring { position: relative; display: grid; place-items: center; width: 100px; height: 100px; border: 2px solid #b5cf9350; border-radius: 50%; color: #bdd39d; background: var(--color-forest); font-size: 2.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color 80ms ease; }
.beat-ring.on-beat { border-color: var(--color-lime); color: var(--color-night); background: var(--color-lime); box-shadow: 0 0 0 11px #e5a64226; }
.game-progress { margin-top: 1.2rem; }.game-progress label { font-size: .67rem; color: #c2d0b7; margin-bottom: .35rem; }
progress { display: block; width: 100%; height: 5px; overflow: hidden; appearance: none; border: none; border-radius: 3px; background: #ffffff1b; accent-color: var(--color-lime); }
progress::-webkit-progress-bar { background: #ffffff1b; }progress::-webkit-progress-value { background: var(--color-lime); }progress::-moz-progress-bar { background: var(--color-lime); }
.game-readout { display: flex; gap: 1rem; justify-content: space-between; margin-top: .65rem; color: #c2d0b7; font-size: .72rem; }
.game-push { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 100%; min-height: 86px; margin-top: 1.4rem; border: 1px solid #c4dd97; border-radius: var(--radius-sm); color: var(--color-night); background: var(--color-lime); font-weight: 850; font-size: 1.4rem; user-select: none; }
.game-push small { font-size: .7rem; font-weight: 500; }.game-push:active:not(:disabled) { background: #f3b858; }
.game-card .small-note { color: #c1ceb4; font-size: .72rem; }.game-card #game-instructions { margin-block: .65rem 0; }
.game-card .feedback { color: #e3edce; }.game-card .feedback[data-state="error"] { color: #ffd8bb; }
.game-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .8rem; margin-top: 1.3rem; }
.game-start label { color: #dce7cd; font-size: .73rem; }.game-start input { border-color: #78946a; }
#nickname-help { margin-block: .6rem 0; }
.game-result { margin-block: 1rem 0; color: var(--color-lime); font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
#game-finish-retry { margin-top: 1rem; }
.leaderboard-card { padding: 1.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.leaderboard-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }.leaderboard-title h3 { margin-bottom: 0; font-size: 1.3rem; }
.icon-button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-canvas); font-size: 1.4rem; }
.leaderboard-card > .small-note { margin-top: .8rem; font-size: .7rem; }
.leaderboard-list { list-style: none; padding: 0; margin: 1.3rem 0; }
.leaderboard-list li { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: .6rem; align-items: center; min-height: 52px; border-top: 1px solid var(--color-border); font-size: .84rem; }
.leaderboard-list .rank { color: #748269; font-size: .7rem; }.leaderboard-list .nickname { overflow-wrap: anywhere; }.leaderboard-list strong { font-variant-numeric: tabular-nums; font-size: .95rem; }.leaderboard-list li:first-child strong { color: #3a6837; }
.score-note { margin-top: 2rem; padding: 1.2rem; border-radius: var(--radius-sm); background: var(--color-paper); font-size: .8rem; }.score-note p { margin: .5rem 0 0; font-size: .75rem; color: var(--color-ink-muted); }
.site-footer { padding-block: 2.5rem; color: var(--color-on-dark); background: var(--color-night-deep); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.footer-inner > p { margin: 0; font-size: .7rem; color: #aebbaf; }.footer-inner .text-link { font-size: .76rem; }
.noscript-message { padding: 1rem; text-align: center; background: var(--color-lime); color: var(--color-night); }
@media (min-width: 1600px) { :root { font-size: 18px; }.shell { width: min(1360px, calc(100% - 6rem)); }.hero { padding-inline: max(3rem, calc((100% - 1360px) / 2)); } }
@media (max-width: 1050px) { .shell { width: calc(100% - 3rem); }.header-inner { width: calc(100% - 3rem); gap: 1rem; }.session-tag { display: none; }.hero { padding-inline: 1.5rem; gap: 2rem; }.hero h1 { font-size: 3.3rem; }.exercise-layout { grid-template-columns: minmax(0, 1fr) 235px; }.exercise-main { padding: 1.5rem; }.practice-aside { padding: 1.3rem; }.lesson-tab { font-size: .75rem; gap: .5rem; }.game-start { grid-template-columns: 1fr; }.coach-card { padding: 1.5rem; }.support-card { padding: 1.4rem; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-block: 3.5rem; }.hero-copy { max-width: 680px; }.match-card { max-width: 550px; width: 100%; }.hero h1 { font-size: clamp(2.7rem, 7vw, 4.1rem); }.section-heading { align-items: start; flex-direction: column; gap: 1.25rem; }.section-heading > p { max-width: 600px; }.exercise-layout { grid-template-columns: 1fr; }.practice-aside { display: none; }.coach-layout { grid-template-columns: 1fr; gap: 1.6rem; }.coach-intro { max-width: 650px; }.coach-availability { margin-block: 1.4rem; }.game-layout { grid-template-columns: 1fr; }.game-start { grid-template-columns: minmax(0, 1fr) auto; }.resource-shelves { grid-template-columns: 1fr; gap: 0; }.support-grid { gap: .8rem; }.support-card { padding: 1.2rem; }.support-card h3 { font-size: 1.25rem; }.footer-inner { flex-wrap: wrap; }.footer-inner > p { max-width: 340px; } }
@media (max-width: 580px) { :root { scroll-padding-top: 1rem; }.shell { width: calc(100% - 2rem); }.header-inner { width: calc(100% - 2rem); min-height: 122px; flex-wrap: wrap; gap: .5rem; padding-block: 1rem .4rem; }.brand { font-size: 1rem; }.brand-mark { width: 35px; height: 38px; font-size: 1.1rem; }nav { width: 100%; gap: 0; justify-content: space-between; }nav a { font-size: .77rem; }.hero { padding: 2.75rem 1rem; gap: 2rem; }.hero h1 { font-size: 2.65rem; }.hero-intro { font-size: .91rem; }.hero .button-row { align-items: start; flex-direction: column; gap: .6rem; }.hero .eyebrow { font-size: .6rem; }.match-card { padding: 1.3rem; }.case-flow strong { font-size: 3.3rem; }.case-flow div span { font-size: .65rem; }.card-topline { font-size: .6rem; }.section-heading { margin-bottom: 1.5rem; }h2 { font-size: 2rem; }.lesson-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.lesson-tab { min-height: 58px; padding: .7rem; font-size: .72rem; }.exercise-main { padding: 1.25rem; border-radius: .8rem; }.exercise-label { gap: .5rem; margin-bottom: 1.1rem; }.exercise-label > span:last-child { font-size: .65rem; }.lesson-panel h3 { font-size: 1.6rem; }.form-grid, .form-grid:has(> :last-child:nth-child(2)) { grid-template-columns: 1fr; }.control-question { padding: .9rem; }.sample-row { gap: .6rem 1rem; font-size: .71rem; }.state-choices label { grid-template-columns: 1fr; gap: .5rem; }.support-grid { grid-template-columns: 1fr; }.support-card { padding: 1.6rem; }.support-card h3 { max-width: 100%; font-size: 1.5rem; }.support-card a { margin-top: .25rem; }.resource-type { margin-bottom: 1rem; }.coach-card { padding: 1.25rem; }.radio-options { grid-template-columns: 1fr; }.radio-options label { min-height: 64px; }.question-meta { align-items: start; }.question-meta > span:first-child { max-width: 190px; }.game-card { padding: 1.25rem; }.game-start { grid-template-columns: 1fr; }.game-start .button { width: 100%; }.rugby-field { height: 165px; }.leaderboard-card { padding: 1.25rem; }.game-readout { font-size: .65rem; }.footer-inner { flex-direction: column; align-items: start; gap: 1.5rem; }th, td { padding: .6rem .75rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .site-header nav, .hero .button-row, .lesson-tabs, .practice-aside, #coach, #melee, .site-footer, .button { display: none !important; }.shell { width: 100%; }.hero { display: block; padding: 1rem 0; color: #000; background: #fff; }.hero h1 { font-size: 2rem; }.hero p { color: #333; }.match-card { display: none; }.section { padding-block: 1.5rem; }.section-paper { background: #fff; }.lesson-panel[hidden] { display: block !important; margin-top: 2rem; }.exercise-main { border: none; padding: 0; }.exercise-layout { display: block; }.support-card { break-inside: avoid; } }


/* R3 components: meaningful images remain intact, controls retain priority. */
:root { --color-illustration-surface: #f8f5e8; --color-teaching-border: #c6d0bd; --space-component: clamp(1.1rem, 2vw, 1.8rem); --shadow-soft: 0 12px 36px #102d2408; }
.exercise-main, .coach-card, .support-card, .leaderboard-card { box-shadow: var(--shadow-soft); }
.exercise-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 30%); gap: var(--space-component); align-items: center; margin-bottom: 1.6rem; }
.exercise-heading-copy { min-width: 0; }
.exercise-heading-copy p { margin-bottom: 0; color: var(--color-ink-muted); font-size: .91rem; }
.exercise-heading .exercise-label { margin-bottom: 1rem; }
.case-illustration { display: block; width: 100%; border: 1px solid #d8ddcb; border-radius: .85rem; overflow: hidden; background: var(--color-illustration-surface); }
.case-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.function-icon { display: block; width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.lesson-tab { gap: .7rem; padding: .75rem; }
.lesson-tab-copy { display: grid; gap: .3rem; font-size: .82rem !important; font-weight: 700 !important; line-height: 1.35; }
.lesson-tab-copy small { display: block; font-size: .57rem; font-weight: 650; text-transform: uppercase; letter-spacing: .035em; }
.lesson-tab.is-active .lesson-tab-copy { color: var(--color-white); }
.lesson-tab.is-active .lesson-tab-copy small { color: var(--color-lime); }
.lesson-tab.is-active .function-icon { background: var(--color-canvas); border-radius: .5rem; }
.context-illustration { display: block; width: 180px; flex: 0 0 180px; }
.context-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.resource-heading-copy { display: flex; gap: 1.2rem; align-items: center; min-width: 0; }
.resource-heading { align-items: center; }
.resource-heading .context-illustration { width: 150px; flex-basis: 150px; }
.coach-intro > .context-illustration { float: right; width: 160px; margin: -.5rem 0 .75rem 1rem; }
.coach-intro .coach-availability { clear: both; }
.resource-tool { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; font-size: .7rem; font-weight: 700; color: var(--color-ink-muted); }
.teaching-details { margin-top: 1.75rem; border: 1px solid var(--color-teaching-border); border-radius: .65rem; background: #fbfbf5; }
.teaching-details > summary { padding: .9rem 1rem; color: var(--color-forest); }
.teaching-details[open] > summary { border-bottom: 1px solid var(--color-teaching-border); }
.diagram-instructions { margin: 0; padding: 1rem 1rem 0; color: var(--color-ink-muted); font-size: .8rem; }
.teaching-figure { margin: 0; padding: 1rem; }
.teaching-figure + .teaching-figure { border-top: 1px solid var(--color-teaching-border); }
.diagram-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--color-teaching-border); border-radius: .4rem; background: var(--color-canvas); }
.diagram-scroll picture, .diagram-scroll img { display: block; width: 100%; }
.diagram-scroll img { height: auto; object-fit: contain; }
.teaching-figure figcaption { margin-top: 1rem; font-size: .88rem; line-height: 1.7; color: var(--color-ink-muted); overflow-wrap: anywhere; }
.teaching-figure figcaption strong { color: var(--color-ink); }
.diagram-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .45rem; }
.diagram-links .text-link { font-size: .79rem; }
.diagram-mobile-link { display: none; }
@media (max-width: 1050px) { .lesson-tab { align-items: start; flex-direction: column; }.exercise-heading { grid-template-columns: minmax(0, 1fr) 170px; }.resource-heading .context-illustration { width: 120px; flex-basis: 120px; } }
@media (max-width: 800px) { .lesson-tab { align-items: center; flex-direction: row; }.resource-heading-copy { max-width: 650px; }.resource-heading .context-illustration { width: 140px; flex-basis: 140px; }.coach-intro > .context-illustration { width: 160px; }.exercise-heading { grid-template-columns: minmax(0, 1fr) 210px; } }
@media (max-width: 600px) { .exercise-heading { grid-template-columns: 1fr; gap: 1.2rem; }.case-illustration { width: min(100%, 240px); justify-self: center; }.lesson-tab { gap: .55rem; }.lesson-tab-copy { font-size: .7rem !important; }.lesson-tab-copy small { font-size: .5rem; }.resource-heading-copy { display: grid; grid-template-columns: 1fr; gap: .5rem; }.resource-heading .context-illustration { width: 128px; }.coach-intro > .context-illustration { width: 128px; margin-left: .7rem; }.teaching-figure { padding: .75rem; }.diagram-scroll picture { min-width: 720px; }.diagram-scroll img { width: 720px; }.diagram-desktop-link { display: none; }.diagram-mobile-link { display: inline-flex; }.teaching-figure figcaption { font-size: .88rem; }.diagram-instructions { padding-inline: .75rem; } }
@media print { .case-illustration, .context-illustration, .teaching-details { display: none; }.exercise-heading { display: block; } }