@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  color: #f4f4f2;
  background: #111111;
  font-family: "Manrope", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; min-width: 320px; }

.app-shell {
  width: 100%;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px) clamp(10px, 3vw, 22px) 28px;
}

.brand-lockup { align-items: baseline; display: flex; gap: 9px; }
.brand-name { color: #f4f4f2; font-size: 18px; font-weight: 800; letter-spacing: -.055em; }
.header-menu-wrap { position: relative; }
.menu-toggle { align-items: center; background: transparent; border: 1px solid rgb(255 255 255 / 26%); border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; height: 34px; justify-content: center; padding: 0; width: 38px; }
.menu-toggle span { background: #f4f4f2; border-radius: 9px; display: block; height: 1px; width: 16px; }
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: #f4f4f2; outline: none; }
.header-menu { background: #202020; border: 1px solid rgb(255 255 255 / 24%); border-radius: 12px; box-shadow: 0 12px 26px rgb(0 0 0 / 30%); padding: 10px; position: absolute; right: 0; top: calc(100% + 7px); width: 170px; z-index: 10; }
.menu-field { color: #aeb8b0; display: grid; font: 10px "DM Mono", monospace; gap: 5px; margin: 2px 2px 10px; }
.menu-field select { background: #111; border: 1px solid rgb(255 255 255 / 24%); border-radius: 7px; color: #f4f4f2; font: 700 12px "Manrope", sans-serif; min-height: 34px; padding: 6px 8px; width: 100%; }
.header-menu button { background: #f4f4f2; border: 0; border-radius: 8px; color: #111111; cursor: pointer; font: 800 11px "Manrope", sans-serif; padding: 9px 10px; width: 100%; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  padding-bottom: 20px;
}

.brand { color: inherit; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { align-items: center; background: #f4f4f2; border-radius: 8px; color: #111111; display: inline-flex; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; height: 30px; justify-content: center; letter-spacing: -.08em; width: 30px; }
.age-badge { border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; color: #f4f4f2; font-family: "DM Mono", monospace; font-size: 11px; padding: 7px 10px; }

.intro { max-width: 680px; padding: clamp(46px, 8vw, 82px) 0 clamp(34px, 5vw, 54px); }
.eyebrow { color: #d4d4d0; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; margin: 0 0 12px; text-transform: uppercase; }
h1, h2 { font-family: "Manrope", system-ui, sans-serif; letter-spacing: -.055em; }
h1 { font-size: clamp(42px, 7vw, 76px); line-height: .94; margin: 0; }
.intro > p:last-child { color: #b7c8bf; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; margin: 24px 0 0; max-width: 590px; }

.formation-board { overflow: hidden; }
.board-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 22px; }
.board-heading .eyebrow { margin-bottom: 7px; }
h2 { font-size: clamp(27px, 4vw, 42px); line-height: 1; margin: 0; }
.attack-direction { align-items: center; color: #f4f4f2; display: flex; font-family: "DM Mono", monospace; font-size: 10px; gap: 8px; letter-spacing: .06em; text-transform: uppercase; }
.arrow { align-items: center; border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; display: inline-flex; font-size: 17px; height: 30px; justify-content: center; width: 30px; }
.scenario-toolbar { align-items: center; display: flex; gap: 10px; margin-bottom: 8px; }
.toolbar-actions { align-items: center; display: flex; gap: 7px; margin-left: auto; }
.flow-options { align-items: center; display: flex; gap: 7px; }
.scenario-select { min-width: 0; }
.scenario-select select { appearance: none; background: #202020 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f4f4f2' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; color: #f4f4f2; cursor: pointer; font: 700 12px "Manrope", sans-serif; min-height: 36px; max-width: 220px; padding: 7px 32px 7px 12px; text-overflow: ellipsis; }
.scenario-select select:focus-visible { border-color: #f4f4f2; outline: none; }
.mode-switch { background: #202020; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; display: flex; padding: 3px; }
.mode-switch-option, .reset-button { background: transparent; border: 1px solid transparent; border-radius: 999px; color: #d8e6d9; cursor: pointer; font: 700 11px "Manrope", sans-serif; min-height: 30px; padding: 6px 10px; }
.mode-switch-option:hover, .mode-switch-option:focus-visible, .reset-button:hover, .reset-button:focus-visible { border-color: #f4f4f2; color: #f4f4f2; outline: none; }
.mode-switch-option[aria-pressed="true"] { background: #f4f4f2; color: #111111; }
.mode-switch-option.is-playing { background: #e6eee1; }
.reset-button { color: #f4f4f2; flex: 0 0 auto; }
.field-frame { background: #f4f4f2; border-radius: 18px; padding: 7px; }
.board-share { align-items: center; display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 42px; }
.share-button { background: transparent; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; color: #f4f4f2; cursor: pointer; font: 800 13px "Manrope", sans-serif; min-height: 42px; padding: 9px 15px; }
.share-button:hover, .share-button:focus-visible { border-color: #f4f4f2; outline: none; }
.feedback-link { color: #c9d8cc; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.feedback-link:hover, .feedback-link:focus-visible { color: #f4f4f2; outline: none; }
.share-status { color: #bcd0c1; font-size: 12px; min-width: 0; }
.pitch { --pitch-axis: portrait; aspect-ratio: 2 / 3; background-color: #197550; background-image: repeating-linear-gradient(90deg, transparent 0 9.9%, rgb(255 255 255 / 3%) 10% 10.2%), repeating-linear-gradient(0deg, transparent 0 9.9%, rgb(255 255 255 / 2%) 10% 10.2%); border: 2px solid rgb(250 255 244 / 93%); border-radius: 12px; contain: layout paint; min-height: 450px; overflow: hidden; position: relative; }
.pitch::before { border: 2px solid rgb(250 255 244 / 85%); border-radius: 50%; content: ""; height: 21%; left: 50%; position: absolute; top: 39.5%; transform: translateX(-50%); width: 31.5%; }
.pitch { background-image: linear-gradient(#0000 49.7%, rgb(250 255 244 / 85%) 49.8% 50.2%, #0000 50.3%), repeating-linear-gradient(90deg, transparent 0 9.9%, rgb(255 255 255 / 3%) 10% 10.2%), repeating-linear-gradient(0deg, transparent 0 9.9%, rgb(255 255 255 / 2%) 10% 10.2%); }
.penalty-area { border: 2px solid rgb(250 255 244 / 85%); height: 16%; left: 50%; position: absolute; transform: translateX(-50%); width: 55%; }
.penalty-area-top { border-top: 0; top: 0; }
.penalty-area-bottom { border-bottom: 0; bottom: 0; }
.goal { border: 2px solid #092424; height: 3.5%; left: 50%; position: absolute; transform: translateX(-50%); width: 23%; }
.goal-top { background: #f4f4f2; border-top: 0; top: 0; }
.goal-bottom { background: #ffbd3e; border-bottom: 0; bottom: 0; }

.player-marker { align-items: center; appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; left: var(--x); padding: 0; position: absolute; top: var(--y); touch-action: none; transform: translate(-50%, -50%); transition: left 90ms linear, top 90ms linear; width: max-content; z-index: 1; }
.player-marker.is-flowing { transition: left 1.2s cubic-bezier(.16, 1, .3, 1), top 1.2s cubic-bezier(.16, 1, .3, 1); will-change: left, top; }
.player-marker.is-dragging { transition: none; }
.player-marker.is-reacting { transition: none; }
.player-marker:active { cursor: grabbing; }
.player-marker.is-highlighted .shirt-number { box-shadow: 0 0 0 5px #f4f4f2, 0 3px 0 #092424; transform: scale(1.15); }
.player-marker.has-ball .shirt-number { background: #f4f4f2; box-shadow: 0 0 0 5px rgb(244 244 242 / 45%), 0 3px 0 #092424; transform: scale(1.14); }
.shirt-number { align-items: center; background: #fffdf5; border: 3px solid #092424; border-radius: 50%; box-shadow: 0 3px 0 #092424; color: #092424; display: flex; font-family: "DM Mono", monospace; font-size: clamp(10px, 2.2vw, 13px); font-weight: 500; height: clamp(37px, 7.6vw, 48px); justify-content: center; line-height: 1; min-width: clamp(37px, 7.6vw, 48px); padding: 0 4px; }
.role-label { background: rgb(6 27 27 / 92%); border-radius: 99px; color: #f7fff1; font-size: clamp(9px, 1.9vw, 12px); font-weight: 800; letter-spacing: -.03em; margin-top: 6px; padding: 4px 7px; white-space: nowrap; }
.player-marker.is-my-role .shirt-number { border-color: #ffbd3e; box-shadow: 0 0 0 3px #092424, 0 0 0 6px #ffbd3e, 0 3px 0 #092424; }
.goalkeeper-marker .shirt-number { background: #ffbd3e; }
.ball-marker { align-items: center; appearance: none; background: transparent; border: 0; cursor: grab; display: flex; height: 42px; justify-content: center; left: var(--x); padding: 0; position: absolute; top: var(--y); touch-action: none; transform: translate(-50%, -50%); transition: left 90ms linear, top 90ms linear; width: 42px; z-index: 4; }
.ball-marker.is-flowing { transition: left 1.35s cubic-bezier(.45, 0, .55, 1), top 1.35s cubic-bezier(.45, 0, .55, 1); will-change: left, top; }
.ball-marker.is-dragging { transition: none; }
.ball-emoji { filter: drop-shadow(0 3px 1px rgb(9 36 36 / 55%)); font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 34px; line-height: 1; }
.ball-marker:active { cursor: grabbing; }
.ball-marker:focus-visible { outline: 3px solid #f4f4f2; outline-offset: 3px; }
.opponent-marker { align-items: center; appearance: none; background: #ff6b5e; border: 2px solid #092424; border-radius: 50%; color: #092424; cursor: grab; display: flex; font: 800 19px/1 "DM Mono", monospace; height: 28px; justify-content: center; left: var(--x); padding: 0; position: absolute; top: var(--y); touch-action: none; transform: translate(-50%, -50%); transition: left 90ms linear, top 90ms linear; width: 28px; z-index: 3; }
.opponent-marker.is-flowing { transition: left 1.28s cubic-bezier(.16, 1, .3, 1), top 1.28s cubic-bezier(.16, 1, .3, 1); will-change: left, top; }
.opponent-marker.is-dragging { transition: none; }
.opponent-marker:active { cursor: grabbing; }
.opponent-marker:focus-visible { outline: 3px solid #f7fff1; outline-offset: 3px; }

.flow-overlay { align-items: center; background: rgb(17 17 17 / 88%); border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px; bottom: 14px; box-shadow: 0 8px 20px rgb(0 0 0 / 28%); display: flex; gap: 4px; left: 50%; padding: 4px; position: absolute; transform: translateX(-50%); z-index: 5; }
.flow-step-button, .flow-play-button { border: 0; border-radius: 999px; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 800; height: 34px; }
.flow-step-button { background: transparent; color: #f4f4f2; font-size: 25px; line-height: 1; width: 34px; }
.flow-step-button:disabled { color: #6f7771; cursor: default; }
.flow-play-button { background: #f4f4f2; color: #111111; font-size: 11px; padding: 0 16px; }
.flow-step-button:not(:disabled):hover, .flow-step-button:not(:disabled):focus-visible { background: rgb(255 255 255 / 14%); outline: none; }
.flow-play-button:hover, .flow-play-button:focus-visible { background: #ffffff; outline: none; }

.role-tooltip { background: #202020; border: 1px solid rgb(255 255 255 / 38%); border-radius: 16px; bottom: 14px; box-shadow: 0 10px 22px rgb(0 0 0 / 30%); color: #f4f4f2; left: 50%; max-height: calc(100% - 28px); max-width: calc(100% - 24px); overflow-y: auto; padding: 16px; position: absolute; transform: translateX(-50%); width: min(360px, calc(100% - 24px)); z-index: 6; }
.formation-board.is-sim-mode .role-tooltip { bottom: 62px; }
.role-tooltip h2 { font-size: clamp(21px, 5vw, 25px); line-height: 1.1; margin: 0 0 8px; }
.role-tooltip p { color: #dbe5de; font-size: 15px; line-height: 1.4; margin: 0; }
.role-kicker, .role-section-label { color: #ffca61 !important; font: 800 11px/1.2 "DM Mono", monospace !important; letter-spacing: .09em; text-transform: uppercase; }
.role-kicker { margin-bottom: 8px !important; }
.role-scheme { background: rgb(255 255 255 / 7%); border-left: 3px solid #ffbd3e; border-radius: 0 9px 9px 0; margin-top: 13px; padding: 9px 10px; }
.role-tooltip .role-why { color: #e4eee6; font-size: 14px; line-height: 1.42; }
.role-actions { align-items: center; display: flex; gap: 14px; margin-top: 14px; }
.my-role-button { background: #f4f4f2; border: 0; border-radius: 999px; color: #111111; cursor: pointer; font: 800 13px "Manrope", sans-serif; min-height: 42px; padding: 9px 14px; }
.learn-more-button { background: transparent; border: 0; color: #f4f4f2; cursor: pointer; font: 800 15px "Manrope", sans-serif; min-height: 42px; padding: 9px 2px; text-decoration: underline; text-underline-offset: 3px; }
.role-details { border-top: 1px solid rgb(255 255 255 / 16%); margin-top: 12px; padding-top: 12px; }
.role-details .role-section-label { margin-bottom: 9px; }
.role-details ul { color: #e7efe9; display: grid; font-size: 15px; gap: 9px; line-height: 1.4; margin: 0; padding-left: 22px; }
.role-details li::marker { color: #ffbd3e; }
.coverage-zone { background: rgb(255 189 62 / 18%); border: 2px solid rgb(255 213 106 / 88%); border-radius: 12px; height: var(--coverage-height); left: var(--coverage-x); pointer-events: none; position: absolute; top: var(--coverage-y); transition: all 220ms ease-out; width: var(--coverage-width); z-index: 0; }

/* A portrait pitch should fit within a desktop viewport, not grow to the full
   width of a wide monitor. Keep the player guide in view while the board is
   explored, rather than anchoring it several screens down the field. */
@media (min-width: 1025px) {
  .app-shell { min-height: 100svh; }
  .formation-board { margin: 0 auto; max-width: 1440px; }
  .field-frame { margin: 0 auto; width: min(100%, 52vh, 760px); }
  .pitch { min-height: 0; }
  .role-tooltip {
    bottom: 24px;
    left: 50%;
    max-height: min(510px, calc(100svh - 48px));
    position: fixed;
    transform: translateX(-50%);
    width: min(380px, calc(100vw - 40px));
  }
  .formation-board.is-sim-mode .role-tooltip { bottom: 24px; }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body { height: 100svh; overflow: hidden; }
  .app-shell { display: flex; flex-direction: column; height: 100svh; min-height: 100svh; padding-bottom: clamp(10px, 2vw, 20px); }
  .formation-board { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .field-frame { align-self: center; margin: clamp(12px, 2.5svh, 26px) 0 0; padding: 6px; width: min(100%, 52vh); width: min(100%, 52svh); }
  .pitch { aspect-ratio: 2 / 3; height: auto; min-height: 0; width: 100%; }
  .board-share { background: #202020; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; gap: 0; margin: 10px auto 0; min-height: 0; padding: 3px; position: relative; }
  .share-button { background: #f4f4f2; border: 0; color: #111111; font-size: 12px; min-height: 36px; padding: 7px 12px; }
  .feedback-link { color: #e2ece4; font-size: 12px; padding: 8px 12px; text-decoration: none; }
  .feedback-link:hover, .feedback-link:focus-visible { color: #ffffff; text-decoration: underline; }
  .share-status { color: #d7e3d8; font-size: 11px; left: 50%; position: absolute; top: calc(100% + 5px); transform: translateX(-50%); white-space: nowrap; }
}

@media (max-width: 1024px) and (orientation: landscape), (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .field-frame { margin-top: 0; width: min(100%, 120vh); width: min(100%, 120svh); }
  .pitch { --pitch-axis: landscape; aspect-ratio: 3 / 2; }
  .pitch::before { height: 31.5%; left: 39.5%; top: 50%; transform: translateY(-50%); width: 21%; }
  .pitch { background-image: linear-gradient(90deg, #0000 49.7%, rgb(250 255 244 / 85%) 49.8% 50.2%, #0000 50.3%), repeating-linear-gradient(90deg, transparent 0 9.9%, rgb(255 255 255 / 3%) 10% 10.2%), repeating-linear-gradient(0deg, transparent 0 9.9%, rgb(255 255 255 / 2%) 10% 10.2%); }
  .penalty-area { height: 55%; left: auto; top: 50%; transform: translateY(-50%); width: 16%; }
  .penalty-area-top { border-left: 0; border-top: 2px solid rgb(250 255 244 / 85%); left: 0; top: 50%; }
  .penalty-area-bottom { border-bottom: 2px solid rgb(250 255 244 / 85%); border-right: 0; bottom: auto; right: 0; }
  .goal { height: 23%; left: auto; top: 50%; transform: translateY(-50%); width: 3.5%; }
  .goal-top { border-left: 0; border-top: 2px solid #092424; right: 0; top: 50%; }
  .goal-bottom { border-bottom: 2px solid #092424; border-right: 0; bottom: auto; left: 0; }
}

@media (max-width: 460px) {
  .brand-name { font-size: 17px; }
  .scenario-toolbar { align-items: center; display: grid; gap: 8px 6px; grid-template-areas: "brand actions menu" "flow flow flow"; grid-template-columns: 1fr auto auto; margin-bottom: 10px; position: relative; }
  .brand-lockup { grid-area: brand; }
  .header-menu-wrap { grid-area: menu; position: static; }
  .header-menu { right: 0; top: calc(100% + 6px); width: min(250px, calc(100vw - 20px)); }
  .menu-field { align-items: stretch; display: flex; flex-direction: column; font-size: 12px; margin: 2px 0 12px; width: 100%; }
  .menu-field select { display: block; font-size: 16px; min-height: 42px; width: 100%; }
  .toolbar-actions { gap: 4px; grid-area: actions; margin-left: 0; }
  .mode-switch { flex: 0 0 auto; }
  .flow-options { grid-area: flow; }
  .scenario-select { width: 100%; }
  .scenario-select select { max-width: none; width: 100%; }
  .formation-board.is-sim-mode .field-frame { width: min(100%, 50vh); width: min(100%, 50svh); }
  .mode-switch-option, .reset-button { font-size: 10px; padding-left: 7px; padding-right: 7px; }
  .role-label { font-size: 9px; line-height: 1.15; text-align: center; white-space: normal; width: 80px; }
}

@media (max-width: 460px) and (orientation: landscape) {
  .formation-board.is-sim-mode .field-frame { width: min(100%, 95vh); width: min(100%, 95svh); }
}

/* Some mobile browsers request a desktop-sized viewport. The touch capability
   is the reliable signal for the compact board controls in that case. */
html.touch-layout body { height: 100svh; overflow: hidden; }
html.touch-layout .app-shell { display: flex; flex-direction: column; height: 100svh; min-height: 100svh; padding-bottom: clamp(10px, 2vw, 20px); }
html.touch-layout .formation-board { display: flex; flex: 1; flex-direction: column; min-height: 0; }
html.touch-layout .field-frame { align-self: center; margin: clamp(12px, 2.5svh, 26px) 0 0; padding: 6px; width: min(100%, 52svh); }
html.touch-layout .pitch { aspect-ratio: 2 / 3; height: auto; min-height: 0; width: 100%; }
html.touch-layout .board-share { background: #202020; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; gap: 0; margin: 10px auto 0; min-height: 0; padding: 3px; position: relative; }
html.touch-layout .share-button { background: #f4f4f2; border: 0; color: #111111; font-size: 12px; min-height: 36px; padding: 7px 12px; }
html.touch-layout .feedback-link { color: #e2ece4; font-size: 12px; padding: 8px 12px; text-decoration: none; }
html.touch-layout .share-status { color: #d7e3d8; font-size: 11px; left: 50%; position: absolute; top: calc(100% + 5px); transform: translateX(-50%); white-space: nowrap; }

.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }