:root {
  --bg: #f4f5f7;
  --board: #fbfbf8;
  --line: rgba(25, 32, 44, 0.13);
  --text: #14151a;
  --muted: #747984;
  --shadow: 0 18px 45px rgba(20, 24, 34, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top, #ffffff 0%, var(--bg) 48%, #eceef2 100%);
  color: var(--text);
  overflow-x: hidden;
}

.app {
  width: min(1180px, 100vw);
  height: 100vh;
  margin: 0 auto;
  padding: 22px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(20,20,20,0.08);
}

.team-mode .pill {
  box-shadow: none;
  padding: 10px 15px;
}

h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -0.04em;
  font-weight: 760;
}

p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.reset-btn,
.pill,
.ghost-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #17191f;
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  transition: transform 140ms ease, opacity 140ms ease;
}

.reset-btn:hover, .pill:hover, .ghost-btn:hover { transform: translateY(-1px); }
.reset-btn:active, .pill:active, .ghost-btn:active { transform: translateY(1px) scale(0.98); }

.pill {
  background: rgba(255,255,255,0.72);
  color: #17191f;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,0.10);
}

.pill.active {
  background: #17191f;
  color: white;
}

.editor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(20,20,20,0.06);
  color: var(--muted);
  font-size: 13px;
}

.editor label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #555b66;
  white-space: nowrap;
}

.editor input {
  width: 96px;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,0.10);
  outline: none;
}

.editor input:focus {
  box-shadow: inset 0 0 0 2px rgba(20,20,20,0.22);
}

.editor input:disabled { opacity: 0.55; }

.ghost-btn {
  background: rgba(255,255,255,0.65);
  color: #17191f;
  box-shadow: inset 0 0 0 1px rgba(20,20,20,0.10);
  padding: 10px 14px;
}

.ghost-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.magnet.team-hidden { display: none !important; }

.board-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
}

.board {
  position: relative;
  width: min(100%, 1080px);
  aspect-ratio: 16 / 10;
  max-height: 100%;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,246,241,0.96));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow-x: hidden;
  touch-action: none;
}

.pitch-lines > * { position: absolute; pointer-events: none; }

.pitch-lines::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 2px solid var(--line);
  border-radius: 18px;
}

.halfway {
  top: 32px;
  bottom: 32px;
  left: 50%;
  width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}

.center-circle {
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--line);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box {
  top: 27%;
  width: 15%;
  height: 46%;
  border: 2px solid var(--line);
}

.box-left { left: 32px; border-left: 0; border-radius: 0 16px 16px 0; }
.box-right { right: 32px; border-right: 0; border-radius: 16px 0 0 16px; }

.six {
  top: 39%;
  width: 6.5%;
  height: 22%;
  border: 2px solid var(--line);
}

.six-left { left: 32px; border-left: 0; border-radius: 0 12px 12px 0; }
.six-right { right: 32px; border-right: 0; border-radius: 12px 0 0 12px; }

.spot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  top: 50%;
}

.spot-left { left: 12.5%; }
.spot-right { right: 12.5%; }

.magnet {
  position: absolute;
  width: clamp(34px, 4.2vw, 54px);
  height: clamp(34px, 4.2vw, 54px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  cursor: grab;
  user-select: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 13px 18px rgba(0,0,0,0.20),
    inset 0 2px 4px rgba(255,255,255,0.72),
    inset 0 -7px 13px rgba(0,0,0,0.16);
  transition: box-shadow 120ms ease, scale 120ms ease;
  z-index: 5;
}


.magnet.selected {
  outline: 3px solid rgba(20, 24, 34, 0.28);
  outline-offset: 4px;
}

.magnet-number {
  position: relative;
  z-index: 2;
}

.name-tag {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 92px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  color: #1b1d24;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
  pointer-events: none;
}

.name-tag:empty { display: none; }

.magnet::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 20%;
  width: 36%;
  height: 24%;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  filter: blur(1px);
}

.magnet.dragging {
  cursor: grabbing;
  scale: 1.07;
  z-index: 20;
  box-shadow:
    0 22px 30px rgba(0,0,0,0.22),
    inset 0 2px 4px rgba(255,255,255,0.72),
    inset 0 -7px 13px rgba(0,0,0,0.16);
}

.blue {
  background: radial-gradient(circle at 32% 25%, #8ed5ff 0%, #1687e0 42%, #0750a3 100%);
}

.red {
  background: radial-gradient(circle at 32% 25%, #ffaaa5 0%, #ed3e36 42%, #9d1015 100%);
}



.ball {
  position: absolute;
  width: clamp(24px, 3vw, 36px);
  height: clamp(24px, 3vw, 36px);
  border: 1px solid #d5d5d0;
  border-radius: 50%;
  cursor: grab;
  user-select: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 20%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 48%, #ffffff 0%, #f8f8f5 52%, #eeeeea 78%, #dcdcd6 100%);
  box-shadow:
    0 9px 14px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(255,255,255,0.95),
    inset 0 -5px 9px rgba(0,0,0,0.12);
  z-index: 7;
  touch-action: none;
  transition: box-shadow 120ms ease, scale 120ms ease;
}

.ball::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,0.88), rgba(255,255,255,0) 58%);
  pointer-events: none;
}

.ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 -4px 7px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.55);
  pointer-events: none;
}

.ball.dragging {
  cursor: grabbing;
  scale: 1.08;
  z-index: 21;
  box-shadow:
    0 17px 24px rgba(0,0,0,0.22),
    inset 0 1px 2px rgba(255,255,255,0.95),
    inset 0 -5px 9px rgba(0,0,0,0.12);
}

.ball-toggle.active {
  background: #17191f;
  color: white;
}

@media (max-width: 720px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { overflow-y: auto; }

  .app {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 16px;
    gap: 14px;
    display: flex;
    flex-direction: column;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .topbar h1 { font-size: 32px; }
  .topbar p { font-size: 18px; max-width: 260px; }

  .actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: stretch;
  }

  .team-mode {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .team-mode .pill,
  .ball-toggle,
  .reset-btn {
    width: 100%;
    min-height: 52px;
    padding: 12px 10px;
    font-size: 16px;
  }

  .editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    overflow: visible;
  }

  #selectedHint { grid-column: 1 / -1; min-width: 0; }

  .editor label {
    display: grid;
    gap: 6px;
    font-size: 13px;
  }

  .editor input { width: 100%; }
  .ghost-btn { grid-column: 1 / -1; width: 100%; }

  .board-wrap {
    width: 100%;
    place-items: center;
    min-height: unset;
  }

  .board {
    width: min(100%, 430px);
    aspect-ratio: 10 / 14;
    max-height: none;
    border-radius: 24px;
  }

  .pitch-lines::before { inset: 22px; }
  .halfway { top: 50%; bottom: auto; left: 22px; right: 22px; width: auto; height: 2px; transform: none; }
  .center-circle { width: 30%; }
  .box { left: 27%; width: 46%; height: 15%; top: auto; }
  .box-left { top: 22px; border-left: 2px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; }
  .box-right { bottom: 22px; right: auto; border-right: 2px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
  .six { left: 39%; width: 22%; height: 7%; top: auto; }
  .six-left { top: 22px; border-left: 2px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
  .six-right { bottom: 22px; right: auto; border-right: 2px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
  .spot-left { left: 50%; top: 12.5%; }
  .spot-right { right: auto; left: 50%; top: 87.5%; }

  .magnet {
    width: clamp(38px, 9.5vw, 48px);
    height: clamp(38px, 9.5vw, 48px);
    font-size: 13px;
  }

  .ball {
    width: clamp(24px, 7vw, 34px);
    height: clamp(24px, 7vw, 34px);
  }
}

/* Hide old ad placeholders if a browser/cache still has one in the HTML. */
.ad-space, .ad-placeholder, .ad-slot, .ads-placeholder, [class*="ad-space"], [class*="ad-placeholder"] {
  display: none !important;
}



/* Site pages and SEO content */
.site-nav{max-width:1100px;margin:18px auto 0;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(15,23,42,.06)}
.site-nav a{color:#172033;text-decoration:none;font-weight:650;font-size:14px}
.site-nav .brand{font-size:16px}
.nav-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{opacity:.78}.nav-links a:hover{opacity:1}
.seo-content,.content-page{max-width:940px;margin:34px auto;padding:28px;background:rgba(255,255,255,.88);border:1px solid rgba(15,23,42,.08);border-radius:24px;box-shadow:0 18px 45px rgba(15,23,42,.06);line-height:1.7;color:#243044}
.seo-content h2,.content-page h1,.content-page h2{color:#111827;line-height:1.2}.seo-content h2{margin-top:28px}.seo-content h2:first-child{margin-top:0}
.content-page h1{font-size:34px;margin-top:0}.content-page a{color:#1d4ed8;font-weight:700}.site-footer{max-width:940px;margin:30px auto 60px;text-align:center;color:#64748b;font-size:14px}.site-footer a{color:#475569}
@media(max-width:720px){.site-nav{align-items:flex-start;flex-direction:column}.nav-links{justify-content:flex-start}.seo-content,.content-page{margin:22px 12px;padding:20px}.content-page h1{font-size:28px}}

@media (max-width: 720px) {
  .site-nav {
    width: calc(100% - 24px);
    margin: 10px 12px 0;
    padding: 10px 12px;
    border-radius: 18px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .nav-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .nav-links a {
    font-size: 13px;
    text-align: center;
    padding: 7px 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
  }
  .seo-content, .content-page {
    margin: 24px 12px;
    padding: 20px;
  }
}


/* Growth pages and scenarios */
[aria-current="page"]{opacity:1!important;text-decoration:underline;text-underline-offset:5px}
.eyebrow{margin:0 0 9px!important;text-transform:uppercase;letter-spacing:.12em;font-size:12px!important;font-weight:800;color:#667085!important}
.lead{font-size:18px!important;line-height:1.65;color:#475467!important;margin-bottom:28px!important}
.article-page h2{margin-top:32px}.article-page h3{margin:24px 0 5px;color:#182230}
.article-cta{margin-top:38px;padding:24px;border-radius:20px;background:#f4f7fb;border:1px solid rgba(15,23,42,.08)}
.primary-link,.primary-button,.reveal-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 18px;background:#17191f;color:#fff!important;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.discovery-section{max-width:1100px;margin:36px auto;padding:0 18px}.discovery-section>h2{font-size:32px;margin:0 0 18px;letter-spacing:-.03em}
.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.content-card{display:block;padding:22px;border-radius:22px;background:rgba(255,255,255,.88);border:1px solid rgba(15,23,42,.08);box-shadow:0 14px 34px rgba(15,23,42,.06);text-decoration:none;color:#243044;transition:transform .16s ease,box-shadow .16s ease}
a.content-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.10)}
.content-card h2,.content-card h3{margin:8px 0 8px;color:#111827;line-height:1.2}.content-card p{line-height:1.6}
.card-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#667085}
.card-link{display:inline-block;margin-top:15px;font-weight:800;color:#1d4ed8}
.featured-card{grid-column:1/-1;background:linear-gradient(135deg,#fff,#f1f5ff)}
.muted-card{opacity:.72}
.scenario-app{height:auto;min-height:0}
.scenario-intro{margin-bottom:10px}
.scenario-prompt{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.78);border:1px solid rgba(15,23,42,.08)}
.scenario-prompt h2{margin:5px 0 3px;font-size:21px}.scenario-prompt p{max-width:740px;line-height:1.5}
.reveal-btn{white-space:nowrap}
.scenario-explanation[hidden]{display:none}
.scenario-removed{display:none!important}
.scenario-grid{margin-top:24px}
.scenario-page .app{padding-top:10px}
.scenario-page .board-wrap{min-height:620px}

@media(max-width:720px){
  .nav-links{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr}
  .featured-card{grid-column:auto}
  .discovery-section{margin:28px auto;padding:0 12px}
  .discovery-section>h2{font-size:27px}
  .scenario-prompt{align-items:stretch;flex-direction:column}
  .reveal-btn{width:100%}
  .scenario-page .board-wrap{min-height:unset}
  .scenario-page .app{padding-top:6px}
}

.contact-card{max-width:680px;margin-top:24px;padding:24px;border-radius:20px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 14px 34px rgba(15,23,42,.06)}.contact-card a{font-size:20px;font-weight:800;color:#1d4ed8;word-break:break-word}