/* MyGoal Signal — app.css: layout and components; colors and volume come only from tokens.css.
   Sizes are in rem and the root grows smoothly above 1600px, so wide and 4K screens get the same
   layout scaled up and the card grid fills the width (more columns), as on a phone it is one. */
* { box-sizing: border-box; }
html { font-size: clamp(16px, calc(16px + (100vw - 1600px) * 0.0045), 26px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 0.9375rem/1.45 "Onest", "Manrope", system-ui, sans-serif;
}
:lang(el) body { font-family: "Manrope", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 0.25rem; }
/* Content runs the full width of any screen, with the same side inset as the hero photo's edge. */
:root { --inset: clamp(16px, 1.6vw, 32px); }
.wrap { padding: 0 var(--inset); }

/* Header */
.top { border-bottom: 1px solid var(--border); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.top > .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
/* The logo is a theme token like the hero photo: only the active theme's file is downloaded. */
.logo { display: block; aspect-ratio: 1280 / 208; background: var(--logo) center / contain no-repeat; }
.brand .logo { width: clamp(10.5rem, 16vw, 14.5rem); }
.nav { display: flex; gap: 1.375rem; margin-left: auto; font-weight: 600; }
.nav a { color: var(--slate); padding: 0.375rem 0; border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--coral); }
.tools { display: flex; align-items: center; gap: 0.375rem; }
.lang a { font-size: 0.8125rem; font-weight: 600; color: var(--slate); padding: 0.25rem 0.375rem; border-radius: 0.375rem; }
.lang a[aria-current="true"] { color: var(--ink); background: var(--pale); }
.theme { width: 2.375rem; padding: 0; cursor: pointer; display: grid; place-items: center; }
.theme svg { width: 1.125rem; height: 1.125rem; }
.burger { display: none; }
/* Install the app: a raised cobalt pill, shown only where installing is possible. */
.install { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.375rem; padding: 0 0.875rem; cursor: pointer;
  border: 0; border-radius: 0.5625rem; color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  background: linear-gradient(180deg, #4a6cf0 0%, var(--cobalt) 60%, #2645b8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .25), 0 4px 10px rgba(49, 85, 217, .35); }
.install[hidden] { display: none; }
.install svg { width: 1rem; height: 1rem; }
@media (max-width: 480px) { .install span { display: none; } .install { width: 2.375rem; padding: 0; justify-content: center; } }
/* The narrowest phones: logo, install, menu and theme still fit one row. */
@media (max-width: 360px) { .brand .logo { width: 9.25rem; } .tools { gap: 0.25rem; } }
.lang-in-menu { display: none; }
@media (max-width: 480px) {
  .tools > .lang { display: none; }
  .lang-in-menu { display: flex; gap: 0.5rem; padding-top: 0.75rem; }
  .lang-in-menu a { padding: 0.375rem 0.75rem; }
}

/* «Where am I»: lives in the sticky header, so it never scrolls away. */
.crumbs { border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--slate); }
/* Always one line, so the sticky header never changes height; a long last step ends in «…». */
.crumbs .wrap { display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; white-space: nowrap; }
.crumbs .wrap > * { flex: none; }
.crumbs .wrap > span:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--ink); font-weight: 600; }
.crumbs span:last-child { color: var(--coral); font-weight: 600; }
.crumbs i { font-style: normal; opacity: .6; }
.back { margin-right: 0.375rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; cursor: pointer; font-weight: 800; line-height: 1;
  border: 1px solid var(--tile-edge); background: var(--tile); box-shadow: var(--tile-depth); }

/* Hero: the photo stays inside the page frame (same inset as the cards, rounded on the right)
   and dissolves into the page color towards the title. */
.hero { position: relative; overflow: hidden; }
.hero .photo {
  position: absolute; inset: 1rem var(--inset) 0.5rem auto; width: min(calc(100% - 2 * var(--inset)), 80rem); border-radius: 1.25rem;
  background: var(--hero) 78% 64% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 22%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .8) 60%, #000 75%);
  mask-image: linear-gradient(to right, transparent 0, transparent 22%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .8) 60%, #000 75%);
}
.hero .wrap { position: relative; padding-top: 2.25rem; padding-bottom: 2.25rem; min-height: 14.5rem; }
.kicker { margin: 0; font: 600 0.75rem/1 "Manrope", sans-serif; letter-spacing: .2em; color: var(--slate); text-transform: uppercase; }
/* Title and subtitle always hold two lines: another day or language never moves the page below. */
.hero h1 { margin: 0.75rem 0 0.5rem; font: 800 clamp(2.125rem, 4.6vw, 4rem)/1.04 "Manrope", sans-serif; letter-spacing: -.04em;
  max-width: 12ch; min-height: 2.08em; text-wrap: balance; }
.hero p.sub { margin: 0; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--slate); max-width: 28ch; min-height: 2.9em; }

/* Day tabs and filters */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.125rem; }
.filters { display: flex; gap: 0.625rem; margin-left: auto; padding: 0.5rem 0; flex-wrap: wrap; }
.filters select, .filters input, .theme {
  height: 2.375rem; border: 1px solid var(--tile-edge); border-radius: 0.5625rem; background: var(--tile); box-shadow: var(--tile-depth);
  padding: 0 0.75rem; font-size: 1rem; max-width: 100%;
}
.filters input { width: 13.75rem; }

/* Match cards: as many columns as the screen holds. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 0.875rem 1.125rem; padding-bottom: 2rem; }
.card {
  background: var(--tile); border: 1px solid var(--tile-edge); border-radius: 0.875rem; box-shadow: var(--tile-depth);
  padding: 0.875rem 1.125rem; transition: transform 140ms ease, box-shadow 140ms ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--tile-depth), var(--tile-hover); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
/* Card caption: tournament name on the left, its badge at the far right — never in the crests column. */
.meta { display: flex; gap: 0.625rem; align-items: center; justify-content: space-between; min-height: 1.375rem;
  font-size: 0.78rem; font-weight: 500; color: var(--slate); text-transform: uppercase; letter-spacing: .02em; }
.meta .lgn { min-width: 0; }
.meta .lgn b { font-weight: 700; color: var(--ink); }
/* Card body: the two teams, and beside them one column for kickoff, minute or the final word. */
.card .body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.875rem; }
.card .when { align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 0.25rem; min-width: 4.5rem; max-width: 6.5rem;
  margin-top: 0.5rem; padding-left: 0.875rem; border-left: 1px solid var(--tile-edge);
  font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--slate); }
.card .when.kick { font: 800 1.05rem "Manrope", sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .when.live { color: var(--live); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.card .when.live::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .card .when.live::before { animation: none; } }
.team { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; font-weight: 700; font-size: 1.03rem; text-shadow: var(--emboss); }
/* The crest sits on a small raised plate, like a badge on the tile. */
.team img {
  width: 2.125rem; height: 2.125rem; padding: 0.3125rem; flex: none; object-fit: contain;
  border-radius: 50%; background: var(--plate); box-shadow: var(--plate-depth);
}
.team span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.team b { font: 800 1.19rem/1 "Manrope", sans-serif; font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }

/* League emblem: the country flag fills a raised disc, the tournament logo sits whole on a white
   inner disc — every logo reads on both themes, flag and logo are one badge. */
.em { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  overflow: hidden; background: var(--plate); box-shadow: var(--plate-depth); }
.em .f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em .d { position: relative; display: grid; place-items: center; width: 68%; height: 68%; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.em .d img { width: 80%; height: 80%; object-fit: contain; }
.em.sm { width: 1.75rem; height: 1.75rem; }
.em.xs { width: 1.375rem; height: 1.375rem; }
.em.big { width: 4.5rem; height: 4.5rem; }
/* A day still loading keeps the previous cards, dimmed: the page height never collapses. */
.grid[aria-busy="true"] { opacity: .45; transition: opacity 120ms; }
.empty { color: var(--slate); padding: 2.5rem 0; text-align: center; grid-column: 1 / -1; }
.empty img { display: block; width: 12.5rem; height: auto; margin: 0 auto 0.75rem; }

/* Results menu in the header: the six played days drop down under it. */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--slate); padding: 0.375rem 0; border-bottom: 2px solid transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.4rem; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: translateY(-0.2rem) rotate(45deg); }
.menu summary[aria-current="page"] { color: var(--ink); border-bottom-color: var(--coral); }
.menu > div { position: absolute; top: calc(100% + 0.5rem); left: -0.75rem; z-index: 6; min-width: 15rem; padding: 0.375rem;
  border-radius: 0.75rem; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth), var(--tile-hover); }
.menu > div a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--ink); font-weight: 600; white-space: nowrap; }
.menu > div a:hover, .menu > div a[aria-current="page"] { background: var(--pale); color: var(--cobalt); }

/* Home: leagues by part of the world, each a raised tile with its logo on a plate. */
.region h2, .sect { font: 800 1.375rem/1.2 "Manrope", sans-serif; letter-spacing: -.02em; margin: 1.75rem 0 0.875rem; }
.lgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.lgi { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.75rem;
  background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth); transition: transform 140ms ease, box-shadow 140ms ease; }
.lgi:hover { transform: translateY(-2px); box-shadow: var(--tile-depth), var(--tile-hover); }
.plate { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--plate); box-shadow: var(--plate-depth); }
.plate img { width: 70%; height: 70%; object-fit: contain; }
.plate.big { width: 4.5rem; height: 4.5rem; }
.ln { display: flex; flex-direction: column; min-width: 0; font-weight: 700; text-shadow: var(--emboss); }
.ln small { font-weight: 500; color: var(--slate); font-size: 0.8rem; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lgi, .lgi:hover { transition: none; transform: none; } }
#regions { padding-bottom: 2rem; }

/* League page */
#league { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.lg-head { display: flex; align-items: center; gap: 1rem; }
.lg-head h1 { margin: 0; font: 800 clamp(1.75rem, 3.5vw, 2.75rem)/1.1 "Manrope", sans-serif; letter-spacing: -.03em; }
.lg-head small { color: var(--slate); font-weight: 500; }
.grp { font: 700 1rem "Manrope", sans-serif; margin: 1rem 0 0.5rem; color: var(--slate); }
.tbl { overflow-x: auto; border-radius: 0.875rem; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth); }
.tbl table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 0.5rem 0.625rem; text-align: center; white-space: nowrap; }
.tbl th { font-size: 0.75rem; font-weight: 600; color: var(--slate); text-transform: uppercase; }
.tbl tbody tr { border-top: 1px solid var(--tile-edge); }
.tbl .tn { text-align: left; width: 100%; }
.tbl td.tn { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; }
.tbl td.tn img { width: 1.375rem; height: 1.375rem; object-fit: contain; }
.tbl .pts { font-weight: 800; }
/* A phone keeps place, team, played, goal difference and points; won/drawn/lost need the width. */
@media (max-width: 560px) {
  .tbl th:nth-child(n+4):nth-child(-n+6), .tbl td:nth-child(n+4):nth-child(-n+6) { display: none; }
  .tbl th, .tbl td { padding: 0.5rem 0.375rem; }
  .tbl td.tn { white-space: normal; }
}

/* Team links: names lead on quietly, underline on hover. */
.team a, .tbl td.tn a { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.team a:hover, .tbl td.tn a:hover, .lg-head small a:hover { color: var(--cobalt); }

/* Team page */
#team { padding-top: 1.5rem; padding-bottom: 2.5rem; }
#team .lg-head { flex-wrap: wrap; }
.also { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--slate); }
.also a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 0.5625rem; font-weight: 700; color: var(--ink);
  background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.tile { padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth); }
.tile span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .03em; }
.tile b { font: 800 1.6rem/1.2 "Manrope", sans-serif; font-variant-numeric: tabular-nums; text-shadow: var(--emboss); }
.tile small { font-size: 0.9rem; color: var(--slate); font-weight: 600; }
.tile em { font-style: normal; }
.form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 1rem; }
.form > span { margin-right: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--slate); text-transform: uppercase; }
.rs { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.375rem; font: 800 0.8rem "Manrope", sans-serif; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .25); }
.rs-w { background: var(--win); }
.rs-d { background: var(--draw); }
.rs-l { background: var(--loss); }
.c-w { color: var(--win); }
.c-d { color: var(--draw); }
.c-l { color: var(--loss); }

/* About */
.page { max-width: 68ch; padding: 1.75rem 0 3rem; font-size: 1rem; }
.page h1 { font: 800 2rem/1.1 "Manrope", sans-serif; letter-spacing: -.03em; }

/* Foot: brand and what the numbers are · the site's pages · facts to know; copyright line under. */
footer { margin-top: 2rem; border-top: 1px solid var(--border); color: var(--slate); font-size: 0.875rem; background: var(--pale); }
footer .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.5rem 3rem; padding-top: 2rem; padding-bottom: 1.25rem; }
footer p { margin: 0 0 0.5rem; }
footer h2 { margin: 0 0 0.75rem; font: 700 0.75rem "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.f-brand .logo { width: 12rem; margin-bottom: 0.75rem; }
.f-brand p { max-width: 42ch; }
.f-note { font-weight: 600; color: var(--ink); }
.f-col a { display: block; padding: 0.2rem 0; color: var(--ink); font-weight: 600; }
.f-col a:hover { color: var(--cobalt); }
.f-copy { grid-column: 1 / -1; margin: 0.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.8125rem; }
@media (max-width: 720px) { footer .wrap { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Narrow screens: the menu folds behind a button and opens as a raised panel. */
@media (max-width: 900px) {
  .tools { margin-left: auto; }
  .burger { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; padding: 0; cursor: pointer; border-radius: 0.5625rem;
    border: 1px solid var(--tile-edge); background: var(--tile); box-shadow: var(--tile-depth); }
  .burger span, .burger span::before, .burger span::after { display: block; width: 1.05rem; height: 2px; border-radius: 1px; background: currentColor; position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -0.35rem; }
  .burger span::after { top: 0.35rem; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 6; flex-direction: column; gap: 0; margin: 0;
    padding: 0.5rem var(--inset) 1rem; background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: var(--tile-hover); }
  .nav-open .nav { display: flex; }
  .nav > a, .menu summary { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
  .menu > div { position: static; min-width: 0; margin: 0.25rem 0 0.5rem; }
  .top > .wrap { position: relative; }
}
@media (max-width: 720px) {
  .top > .wrap { gap: 0.5rem 0.875rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  /* As on a wide screen, the photo sits behind the title, pressed to the right; the words keep to
     its faded left part, so the ball is never covered in any language. */
  .hero .photo {
    inset: 0.5rem var(--inset) 0.5rem auto; width: calc(100% - 2 * var(--inset)); border-radius: 1rem; background-position: 90% 70%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 28%, rgba(0, 0, 0, .55) 52%, #000 70%);
    mask-image: linear-gradient(to right, transparent 0, transparent 28%, rgba(0, 0, 0, .55) 52%, #000 70%);
  }
  .hero .wrap { min-height: 0; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .hero .kicker, .hero h1, .hero p.sub { max-width: 58%; }
  /* The narrow column holds the longest language: kicker 2 lines, title 3, subtitle 3 — no jumps. */
  .hero .kicker { letter-spacing: .12em; line-height: 1.3; min-height: 3.9em; }
  .hero h1 { font-size: clamp(1.4rem, 7vw, 1.75rem); min-height: 3.12em; }
  .hero p.sub { font-size: 0.9rem; min-height: 4.35em; }
  .filters { margin-left: 0; width: 100%; }
  .filters input, .filters select { flex: 1; width: auto; min-width: 0; }
}