/* ═══════════════════════════════════════════════════════════
   LIGUE 1 RANKER stylesheet
   Design brief: the printed league table.
   Hard rules, sharp corners, tabular figures.
   Banned: border-radius, gradients, blurred shadows.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/oswald-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/oswald-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  --paper:     #F2F2F0;
  --ink:       #121212;
  --rule:      #121212;
  --rule-soft: #CFCEC9;
  --grey:      #6E6D68;
  --accent:    #E2001A;
  --row-h:     clamp(46px, 8.2vw, 56px);

  /* readable top-to-bottom gradient: green = Champions League,
     blue = Europa/Conference, orange = playoff, red = relegation */
  --z-c1:      #0B7A3B;
  --z-c1q:     #4FA96F;
  --z-c3:      #1E5FBF;
  --z-c4:      #6BA8E8;
  --z-playoff: #E08000;
  --z-releg:   #C81020;
}

/* Dark theme, two ways in:
   1. the system preference, unless the user forced light
   2. an explicit choice via the button (data-theme="dark")     */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:     #131313;
    --ink:       #EDEDEA;
    --rule:      #EDEDEA;
    --rule-soft: #333330;
    --grey:      #97968F;
    --accent:    #FF3A2E;
  }
}
:root[data-theme='dark'] {
  --paper:     #131313;
  --ink:       #EDEDEA;
  --rule:      #EDEDEA;
  --rule-soft: #333330;
  --grey:      #97968F;
  --accent:    #FF3A2E;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plex', ui-monospace, Menlo, monospace;
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.wrap { max-width: 640px; margin: 0 auto; padding-inline: 16px; }

/* ─── Header ──────────────────────────────────────────────── */

.head {
  border-bottom: 3px solid var(--rule);
  padding: 22px 0 14px;
  margin-bottom: 18px;
}

.head-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 10vw, 52px);
  line-height: .92;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin: 0;
}

.season {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey);
}
.season .dot { color: var(--accent); }

.theme {
  font-family: 'Plex', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 9px;
  border: 2px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 4px;
  white-space: nowrap;
}
.theme:hover  { background: var(--ink); color: var(--paper); }
.theme:active { transform: translate(1px, 1px); }

.hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grey);
  margin: 0 0 14px;
}

.banner {
  border: 2px solid var(--rule);
  border-left: 8px solid var(--accent);
  padding: 10px 12px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  background: transparent;
}
.banner b { font-weight: 600; }

/* ─── The table ───────────────────────────────────────────── */

.table {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 3px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: 6px 3.4ch 30px 1fr;
  align-items: center;
  column-gap: 10px;
  height: var(--row-h);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;   /* finger scrolls; a long press switches to drag */
}
.row:hover:not(.grabbed) { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.table > .row:last-child { border-bottom: 0; }

/* qualification / relegation tick */
.zone { align-self: stretch; background: transparent; }
.zone-c1      { background: var(--z-c1); }
.zone-c1q     { background: var(--z-c1q); }
.zone-c3      { background: var(--z-c3); }
.zone-c4      { background: var(--z-c4); }
.zone-playoff { background: var(--z-playoff); }
.zone-releg   { background: var(--z-releg); }

.pos {
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--grey);
}
.row:nth-child(-n+3) .pos { color: var(--ink); }

.crest {
  width: 30px; height: 30px;
  object-fit: contain;
  display: block;
  /* Images are natively draggable; without this the browser's own image
     drag fires pointercancel and kills ours. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.name {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 4.2vw, 19px);
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: inherit;
}
/* short name on narrow screens, the convention on a real league table */
.name .name-short { display: none; }
@media (max-width: 430px) {
  .name .name-full  { display: none; }
  .name .name-short { display: inline; }
}

/* accessibility: the row is focusable, arrow keys move it */
.row:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  z-index: 4;
}

/* states */
.row.selected { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 3; }

/* Lifted, not toppled. The hard offset shadow suited the buttons but read
   as debris behind a moving row, and --rule flips to near-white in dark
   mode, so it became a glaring slab. A thin edge plus a slight scale
   (applied in JS, alongside the translate) is enough. */
.row.grabbed {
  z-index: 10;
  border-bottom-color: transparent;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.row.sliding { transition: transform .13s ease-out; }

body.dragging { cursor: grabbing; }
body.dragging .row:not(.grabbed) { cursor: grabbing; }

/* ─── Zone legend ─────────────────────────────────────────── */

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 11px; height: 11px; display: block; }

/* ─── Action bar ──────────────────────────────────────────── */

.actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top: 3px solid var(--rule);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
}
.actions .group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;          /* safety net: never overflow horizontally */
}

.btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 11px 14px;
  border: 2px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;             /* without this, nowrap sets a min width that pushes the page wider */
}
.btn:hover  { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); }

.btn.primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--accent);
}
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--rule); }

.btn.quiet {
  flex: 0 0 auto;
  border-color: var(--rule-soft);
  color: var(--grey);
  padding-inline: 11px;
}
.btn.quiet:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ─── Footer & toast ──────────────────────────────────────── */

.foot {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--grey);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--paper);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s linear, transform .12s ease-out;
  z-index: 40;
  white-space: nowrap;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .row.sliding, .toast { transition: none; }
}

@media (max-width: 470px) {
  .btn { font-size: 12px; padding: 10px 9px; letter-spacing: .04em; }
  .btn.quiet { padding-inline: 9px; }
}

@media (max-width: 380px) {
  .row { grid-template-columns: 6px 3.2ch 26px 1fr; column-gap: 8px; }
  .crest { width: 26px; height: 26px; }
}