/* GeTennis – "שידור חי" (blue court). Shared by every page. */
:root {
  color-scheme: dark;
  --court: #0A2A6B;
  --court-2: #0E3380;
  --court-3: #1B4DB1;
  --line: #2A55B0;
  --line-2: #1E4598;
  --deep: #08214F;
  --ball: #E6F53A;
  --ball-2: #F4FB9C;
  --text: #FFFFFF;
  --soft: #D6E2FF;
  --muted: #B8C8EE;
  --up: #7CF2B0;
  --down: #FFA799;
  --streak: #FFC46B;
  --live: #FF5A4E;
  --radius: 16px;
  font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--court); color: var(--text); line-height: 1.6; font-size: 17px; }
a { color: var(--ball); }
a:hover { color: var(--ball-2); }
img { display: block; max-inline-size: 100%; }
.display { font-family: "Secular One", "Assistant", sans-serif; font-weight: 400; }
.wrap { max-inline-size: 1200px; margin-inline: auto; padding-inline: 16px; }

/* ---------- pilot banner ---------- */
.pilot { background: var(--deep); color: var(--soft); font-size: 15px; text-align: center; padding: 8px 16px;
  border-block-end: 1px solid var(--line-2); }
.pilot b { color: var(--text); }

/* ---------- ticker ---------- */
.ticker { background: var(--ball); color: var(--court); font-weight: 800; font-size: 15px; display: flex;
  overflow: hidden; white-space: nowrap; }
.ticker[hidden] { display: none; }
.ticker .label { flex: none; background: var(--court); color: var(--ball); padding: 10px 16px; display: flex;
  align-items: center; gap: 8px; z-index: 1; }
.ticker .track { overflow: hidden; flex: 1; }
.ticker .items { display: inline-flex; gap: 40px; padding: 10px 20px; animation: ticker 40s linear infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(50%); } }
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--live); display: inline-block;
  animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- nav: links on the right, the brand on the left ---------- */
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px; }
.nav .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 17px; font-weight: 600; }
.nav .links a { color: var(--soft); text-decoration: none; }
.nav .links a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand span { font-family: "Secular One", sans-serif; font-size: 22px; }
.brand img { inline-size: 40px; block-size: 40px; border-radius: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 0 20px;
  border-radius: 8px; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.btn.ball, .nav .links a.btn.ball { background: var(--ball); color: var(--court); }
.btn.dark { background: var(--court); color: var(--text); }
.btn.big { min-block-size: 54px; font-size: 19px; padding: 0 28px; border-radius: 10px; }

/* ---------- hero (the court) ---------- */
.hero { position: relative; background: var(--court-3); border-radius: 24px; overflow: hidden; padding: 56px 48px;
  min-block-size: 440px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hero svg.lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .35; }
.hero .ballfx { position: absolute; top: 90px; left: 320px; inline-size: 34px; block-size: 34px; border-radius: 50%;
  background: var(--ball); box-shadow: 0 0 24px rgb(230 245 58 / .6);
  animation: serve 2.6s cubic-bezier(.3, .6, .4, 1) infinite alternate; }
@keyframes serve { 45% { transform: translate(-120px, -60px); } 100% { transform: translate(-260px, 10px); } }
.hero > * { position: relative; }
.hero > svg.lines, .hero > .ballfx { position: absolute; }
.hero .badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgb(10 42 107 / .7);
  padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.hero h1 { margin: 0; font-size: clamp(42px, 7vw, 100px); line-height: 1.02; max-inline-size: 760px; }
.hero p { margin: 0; font-size: 20px; max-inline-size: 580px; color: #E3EBFF; }
.row-gap { display: flex; flex-wrap: wrap; gap: 12px; }

section { padding-block: 32px; }
h2.display { margin: 0 0 6px; font-size: clamp(36px, 5vw, 52px); line-height: 1.1; }
.sub { color: var(--muted); font-size: 15px; }

/* ---------- scoreboard ---------- */
.board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-block-end: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { min-block-size: 44px; min-inline-size: 52px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #3E64B8;
  background: transparent; color: var(--text); font: 600 16px "Assistant", sans-serif; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--ball); color: var(--court); border-color: var(--ball); font-weight: 800; }
.pill.city[aria-pressed="true"] { background: var(--text); border-color: var(--text); }
.filters { display: flex; flex-direction: column; gap: 8px; }
.filters[hidden], .legend[hidden] { display: none; }
.board { background: var(--court-2); border: 2px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.board .grid { min-inline-size: 640px; }
.board .r { display: grid; grid-template-columns: 76px minmax(0, 2fr) minmax(0, 1fr) 80px 110px 90px;
  align-items: center; padding: 12px 16px; border-block-start: 1px solid var(--line-2); }
.board .r.head { background: var(--court); color: var(--muted); font-weight: 800; font-size: 14px; border: 0; }
.board .meta { display: contents; }
.board .r:not(.head):hover { background: #163A86; }
.board .r.in { animation: flip .5s ease-out both; transform-origin: top; }
@keyframes flip { from { opacity: 0; transform: rotateX(70deg); } }
.rank { display: flex; align-items: center; gap: 6px; }
.rank b { font-family: "Secular One", sans-serif; font-size: 26px; font-weight: 400; color: var(--ball); }
.up { color: var(--up); font-size: 13px; font-weight: 800; }
.down { color: var(--down); font-size: 13px; font-weight: 800; }
.who { display: flex; align-items: center; gap: 12px; min-inline-size: 0; font-weight: 800; font-size: 18px; }
.av { inline-size: 38px; block-size: 38px; flex: none; border-radius: 8px; background: var(--court-3);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.tag { background: var(--ball); color: var(--court); font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.city-c { color: var(--soft); }
.streak { color: var(--streak); font-weight: 800; }
.pts { font-family: "Secular One", sans-serif; font-size: 22px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-block-start: 10px; color: var(--muted); font-size: 14px; }
.legend b { color: var(--text); }
.empty { padding: 28px; text-align: center; color: var(--soft); }
.soon { background: var(--court-2); border: 2px dashed var(--line); border-radius: var(--radius); padding: 36px 24px;
  text-align: center; }
.soon .big-num { font-family: "Secular One", sans-serif; font-size: 64px; color: var(--ball); line-height: 1; }
.soon p { color: var(--soft); max-inline-size: 560px; margin: 10px auto 0; }
.meter { block-size: 12px; background: var(--court); border-radius: 6px; overflow: hidden; max-inline-size: 420px;
  margin: 16px auto 0; }
.meter i { display: block; block-size: 100%; background: var(--ball); border-radius: 6px; transform-origin: right;
  animation: grow .8s ease-out both; }
@keyframes grow { from { transform: scaleX(0); } }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.card { background: var(--court-2); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card.solid { background: var(--court-3); border-color: var(--court-3); }
.card.white { background: #FFFFFF; color: var(--court); border-color: #FFFFFF; }
.card.white a { color: var(--court-3); }
.card.ball { background: var(--ball); color: var(--court); border-color: var(--ball); }
.card .kicker { font-family: "Secular One", sans-serif; font-size: 22px; color: var(--ball); }
.card h3 { margin: 6px 0; font-size: 20px; }
.card p { margin: 0; color: var(--soft); line-height: 1.6; }
.card.white p, .card.ball p { color: inherit; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 20px; align-items: flex-start; }
.step .n { flex: none; inline-size: 56px; block-size: 56px; border-radius: 12px; background: var(--ball); color: var(--court);
  display: flex; align-items: center; justify-content: center; font-family: "Secular One", sans-serif; font-size: 28px; }
.rise { animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- calculator (how.html) ---------- */
.split { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.split > .main { flex: 999 1 460px; min-inline-size: 0; }
.split > .side { flex: 1 1 300px; min-inline-size: 0; }
.calc .label { font-weight: 600; margin-block: 12px 6px; }
.calc .pill { border-color: #B8C8EE; color: var(--court); background: #FFFFFF; }
.calc .pill[aria-pressed="true"] { background: var(--court); color: var(--ball); border-color: var(--court); }
.res { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 16px; }
.res div { flex: 1 1 160px; border-radius: 12px; padding: 14px; font-weight: 600; }
.res .w { background: #E9F9EF; color: #0B6B3A; }
.res .l { background: #FDECEA; color: #9E2A1F; }
.res strong { display: block; font-family: "Secular One", sans-serif; font-size: 40px; font-weight: 400; }
.note { margin-block-start: 12px; font-size: 14px; color: #3A5A9E; }
.band { display: flex; align-items: center; gap: 12px; margin-block-end: 10px; }
.band b { inline-size: 70px; }
.band .bar { flex: 1; block-size: 12px; background: var(--court); border-radius: 6px; overflow: hidden; }
.band .bar i { display: block; block-size: 100%; background: var(--ball); border-radius: 6px; transform-origin: right;
  animation: grow .6s ease-out both; }
.band span { inline-size: 100px; text-align: left; color: var(--soft); font-size: 15px; }

/* ---------- documents (privacy / terms) and contact ---------- */
.doc { background: var(--court-2); border: 2px solid var(--line); border-radius: var(--radius); padding: 24px;
  margin-block: 24px; }
.doc h1 { margin-top: 0; font-family: "Secular One", sans-serif; font-weight: 400; font-size: 34px; }
.doc h2 { font-size: 21px; margin-block: 24px 8px; color: var(--ball); }
.doc .updated { color: var(--muted); font-size: 15px; }
.doc li { margin-block: 4px; }
.en { direction: ltr; text-align: left; }
.contact dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.contact dt { font-weight: 800; }
.contact dd { margin: 0; }

footer.site { background: var(--deep); color: var(--muted); font-size: 14px; margin-block-start: 32px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; padding-block: 24px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding-block: 24px; }

  /* header: "להתחיל בטלגרם" and the brand on one row, the three links as equal tabs below */
  .nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 12px 6px;
    padding-block: 14px; }
  .nav .links { display: contents; }
  .nav .links a.btn { grid-row: 1; grid-column: 1 / 4; justify-self: start; padding: 0 16px; }
  .nav .brand { grid-row: 1; grid-column: 4 / 7; justify-self: end; gap: 8px; }
  .brand span { font-size: 19px; }
  .brand img { inline-size: 34px; block-size: 34px; }
  .nav .links a:not(.btn) { grid-row: 2; grid-column: span 2; min-block-size: 44px; display: flex; align-items: center;
    justify-content: center; text-align: center; font-size: 15px; line-height: 1.2; padding: 4px;
    border: 1.5px solid var(--line); border-radius: 8px; }
  .nav .links a[aria-current="page"] { background: var(--court-2); border-color: var(--ball); text-decoration: none; }

  .hero { padding: 32px 20px; min-block-size: 0; border-radius: 18px; gap: 18px; }
  .hero .ballfx { display: none; }
  .hero h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .hero p { font-size: 17px; }
  .hero .row-gap .btn { flex: 1 1 100%; }

  /* the scoreboard: no sideways scrolling – each player is a compact row with the points always in view */
  .board { overflow: visible; }
  .board .grid { min-inline-size: 0; }
  .board .r.head { display: none; }
  .board .r { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "rank who pts" "rank meta pts";
    gap: 4px 10px; padding: 12px; }
  .board .r > .rank { grid-area: rank; flex-direction: column; gap: 0; }
  .board .r > .who { grid-area: who; font-size: 17px; gap: 10px; flex-wrap: wrap; }
  .board .r > .pts { grid-area: pts; text-align: center; line-height: 1.1; }
  .board .r > .pts::after { content: "נקודות"; display: block; font: 600 12px "Assistant", sans-serif; color: var(--muted); }
  .board .meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--soft);
    padding-inline-start: 48px; }
  .board .meta [data-label]::before { content: attr(data-label) " "; color: var(--muted); }
  .board .meta .streak.none { display: none; }
  .av { inline-size: 34px; block-size: 34px; font-size: 18px; }
  .board-head { margin-block-end: 14px; }
  .pill { min-inline-size: 44px; padding: 0 12px; }
  .soon { padding: 28px 16px; }
  .soon .big-num { font-size: 52px; }

  .card { padding: 18px; }
  .step { gap: 14px; }
  .step .n { inline-size: 48px; block-size: 48px; font-size: 24px; }
  .band span { inline-size: auto; min-inline-size: 64px; font-size: 14px; }
  .band b { inline-size: 56px; }
  .doc { padding: 18px 16px; }
  .doc h1 { font-size: 28px; }
  .contact dl { grid-template-columns: 1fr; }
  .contact dd { margin-block-end: 8px; }
}
@media (max-width: 360px) {
  .brand span { font-size: 17px; }
  .nav .links a.btn { padding: 0 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}