/* 1X2IQ — app.css v0.4. Palette from the owner's mock-ups. Sizes in rem: the root
   size grows smoothly above 1600px, so 2K/4K screens get the same layout scaled up. */
:root {
  --bg: #14171b; --card: #202429; --card2: #1a1e22; --line: #2e333a;
  --text: #f7f8fa; --muted: #bbc2ce; --red: #e31845;
}
* { 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(--bg); color: var(--text);
  font: 0.9375rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.top { border-bottom: 1px solid var(--line); background: #111418; position: sticky; top: 0; z-index: 5; }
.top-in { max-width: 120rem; margin: 0 auto; padding: 0.875rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.logo { flex: none; }
.logo img { height: 3.25rem; width: auto; }
.nav { display: flex; gap: 0.25rem; margin-left: auto; }
.nav a { padding: 0.5rem 0.75rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); border-bottom-color: var(--red); }
.tools { display: flex; gap: 0.5rem; }
.sel { background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.5rem 0.625rem; font: inherit; max-width: 13.75rem; }
.sel-lang { width: 4.375rem; }
.burger { display: none; }

.crumbs { border-bottom: 1px solid var(--line); }
.crumbs-in { max-width: 120rem; margin: 0 auto; padding: 0.5rem 1.5rem; color: var(--muted); font-size: 0.8125rem; }
.crumbs-in a:hover { color: var(--text); }
.crumbs-in i { font-style: normal; margin: 0 0.5rem; opacity: .6; }
/* "Where am I": the current page in the accent colour, like the current menu item (owner 27.10). */
.crumbs-in span { color: var(--red); font-weight: 600; }

main { max-width: 120rem; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.125rem 0 1.625rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.hero h1 { font-size: clamp(1.875rem, 4.4vw, 3.625rem); line-height: 1.05; margin: 0; font-weight: 800; letter-spacing: -1px; }
.hero-r { display: flex; }
.hero-r div { text-align: center; padding: 0 1.625rem; border-left: 1px solid var(--line); }
.hero-r div:first-child { border-left: 0; }
.hero-r b { display: block; font-size: 3.5rem; line-height: 1; }
.hero-r span { color: var(--muted); }

.region h2, .head h2 { font-size: 1.5rem; margin: 1.125rem 0 0.75rem; }
.head h2 span { color: var(--muted); font-size: 1rem; font-weight: 400; margin-left: 0.75rem; }
.tz { color: var(--muted); font-size: 0.8125rem; margin: -0.375rem 0 0.875rem; }
.lgs, .tms { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 0.625rem; }
/* League and team tiles: no coloured rim (owner 27.10) — depth only: lit top bevel,
   faint side light, dark recessed bottom, layered shadow beneath. */
.lgi, .tm { display: flex; align-items: center; gap: 0.75rem; position: relative;
  border-radius: 0.625rem; padding: 0.7rem 0.95rem; border: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, #2b3037 0%, #22262c 40%, #1b1e23 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 1px 0 0 rgba(255, 255, 255, .04),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    inset 0 -3px 6px rgba(0, 0, 0, .55),
    0 1px 1px rgba(0, 0, 0, .80),
    0 4px 8px rgba(0, 0, 0, .45),
    0 12px 22px rgba(0, 0, 0, .40);
  transition: transform .15s ease, box-shadow .15s ease; }
.lgi:hover { transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 1px 0 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    inset 0 -3px 6px rgba(0, 0, 0, .55),
    0 2px 2px rgba(0, 0, 0, .80),
    0 8px 14px rgba(0, 0, 0, .50),
    0 18px 32px rgba(0, 0, 0, .45); }
/* Raised lettering: dark drop under the glyphs, faint light above. */
.lgi .ln, .tm .ln, .tm .rk, .lg-head h1 { flex: 1; min-width: 0; font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 2px 3px rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06); }
.lgi small { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
/* League emblem in the same depth style as the tile: faint light edge, lit
   top bevel, dark recessed bottom and a layered shadow — a raised badge on the
   tile, no coloured rim (owner, 27.10.2026). Bevel is drawn over the image. */
.em { --face: var(--card2); width: 2.5rem; height: 2.5rem; width: round(2.5rem, 2px); height: round(2.5rem, 2px);
  border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
  border: 1px solid rgba(255, 255, 255, .05); background: var(--face);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .80), 0 4px 8px rgba(0, 0, 0, .45), 0 10px 18px rgba(0, 0, 0, .40); }
.em::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 6px rgba(0, 0, 0, .55); }
.em img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.em-l img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.em-w { --face: #fff; }
.em-w img { width: 76%; height: 76%; object-fit: contain; }

/* League page: header, section title, team tiles (emblem · name · place). */
.lg-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.lg-head .em { width: 4rem; height: 4rem; width: round(4rem, 2px); height: round(4rem, 2px); }
.lg-head h1 { font-size: 1.875rem; line-height: 1.1; margin: 0; font-weight: 800; }
.lg-head small { color: var(--muted); }
.sect { font-size: 1.125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0.75rem; }
.grp { font-size: 1rem; margin: 1.125rem 0 0.625rem; }
.tm .ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm .rk { flex: none; font-size: 1.125rem; font-weight: 800; min-width: 1.75rem; text-align: right; }
.em-t img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

.empty { color: var(--muted); padding: 1.875rem 0; }

/* Bottom bar, a thin twin of the header: date on the left, the clock in the corner —
   a raised display in the tile style; the colon breathes once a second. */
body { padding-bottom: calc(2.75rem + env(safe-area-inset-bottom)); }
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #111418;
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bar-in { max-width: 120rem; margin: 0 auto; height: 2.75rem; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#today { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#today::first-letter { text-transform: uppercase; }
.clock { flex: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.65rem; border-radius: 0.4rem; border: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, #2b3037 0%, #22262c 40%, #1b1e23 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 6px rgba(0, 0, 0, .55), 0 1px 1px rgba(0, 0, 0, .80), 0 4px 8px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 2px 3px rgba(0, 0, 0, .45); }
.clock i { font-style: normal; animation: breathe 1s steps(1) infinite; }
@keyframes breathe { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .clock i { animation: none; } }

@media (max-width: 1100px) {
  .top-in { flex-wrap: wrap; gap: 0.625rem 1rem; }
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .tools { margin-left: auto; }
}
/* Phone: row 1 — logo · language · menu button; row 2 — league picker across the
   width (both always visible); the page links open as a drop-down panel. */
@media (max-width: 700px) {
  .top-in, main, .crumbs-in, .bar-in { padding-left: 0.875rem; padding-right: 0.875rem; }
  .top-in { gap: 0.625rem; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .logo { order: 1; }
  .logo img { height: 2.375rem; }
  .tools { display: contents; }
  .sel-lang { order: 2; margin-left: auto; height: 2.5rem; }
  .burger { order: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
    width: 2.75rem; height: 2.5rem; padding: 0 0.7rem; border-radius: 0.5rem; cursor: pointer;
    background: var(--card2); border: 1px solid var(--line); }
  .burger span { display: block; height: 2px; border-radius: 1px; background: var(--text); transition: transform .2s, opacity .2s; }
  .top.open .burger span:nth-child(1) { transform: translateY(calc(0.3rem + 2px)) rotate(45deg); }
  .top.open .burger span:nth-child(2) { opacity: 0; }
  .top.open .burger span:nth-child(3) { transform: translateY(calc(-0.3rem - 2px)) rotate(-45deg); }
  #league { order: 4; width: 100%; max-width: none; height: 2.5rem; }
  .nav { order: 5; display: none; width: 100%; flex-direction: column; gap: 0; overflow: visible;
    background: var(--card); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.25rem 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
  .top.open .nav { display: flex; }
  .nav a { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav a.on { border-bottom-color: var(--line); color: var(--text); box-shadow: inset 3px 0 0 var(--red); }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-r b { font-size: 2.5rem; }
  .hero-r div { padding: 0 1rem; }
}