/* Padel Score — tablette, thème sombre lisible de loin */
@font-face { font-family: "Inter"; src: local("Inter"), local("Inter Regular"); }
:root {
  --bg: #0d1016; --panel: #161a22; --panel2: #1e232d; --line: #2a303b;
  --ink: #f2f3f5; --ink2: #b9c0cc; --muted: #7d8696;
  --accent: #e6ff00; --t1: #3987e5; --t2: #d95926; --good: #3fbf3f; --bad: #e66767;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input, select { font: inherit; color: var(--ink); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; width: 100%; font-size: 18px; }
input:focus, select:focus { outline: 2px solid var(--t1); outline-offset: 1px; }
h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.01em; }
h3 { margin: 18px 0 8px; font-size: 14px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--muted); font-size: 14px; }
.hidden { display: none !important; }
.screen { min-height: 100%; }

/* ---------- barres */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: #0b0e13; position: sticky; top: 0; z-index: 2; }
.bar-actions { display: flex; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.ball { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); position: relative; display: inline-block; }
.ball::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border-left: 2px solid #0d1016; border-right: 2px solid #0d1016; }
.ghost { background: transparent; padding: 10px 14px; border-radius: 10px; color: var(--ink2); font-weight: 600; }
.ghost:active { background: var(--panel2); }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--panel2); margin-left: 6px; }
.pill.ok { background: #183a1c; color: #8be08b; }

/* ---------- préparation */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card.narrow { max-width: 760px; margin: 18px auto; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.team { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.team legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.team.t1 { border-left: 4px solid var(--t1); } .team.t2 { border-left: 4px solid var(--t2); }
.round { width: 48px; height: 48px; border-radius: 50%; background: var(--panel2); font-size: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip .x { margin-left: 6px; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.seg button { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 6px; font-weight: 600; }
.seg button.on { background: var(--accent); color: #0d1016; border-color: var(--accent); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.rules label { display: grid; gap: 6px; font-size: 14px; color: var(--ink2); }
label.check { display: flex !important; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); padding: 6px 0; }
label.check input { width: 22px; height: 22px; }
label.inline { display: flex; align-items: center; gap: 12px; color: var(--ink2); margin-top: 8px; }
label.inline select { width: auto; }
.summary { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel2); color: var(--ink2); font-size: 14px; }
.start-row { display: flex; gap: 12px; justify-content: flex-end; align-items: center; padding: 0 20px 24px; flex-wrap: wrap; }
.primary { background: var(--accent); color: #0d1016; font-weight: 800; border-radius: 12px; padding: 14px 22px; }
.primary.big { font-size: 22px; padding: 18px 34px; }
.secondary { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; font-weight: 600; }
.danger { background: #3a1a1a; color: #ffb4b4; border-radius: 12px; padding: 14px 20px; font-weight: 600; }
.error { color: var(--bad); margin: 0 auto 0 0; }

/* ---------- télécommande */
.maprow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.maprow .keys { color: var(--ink2); font-family: ui-monospace, monospace; font-size: 14px; }
.maprow.learning { background: rgba(230, 255, 0, .06); }
.test { margin: 16px 0; }

/* ---------- match */
#match { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.mbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.2vh 2vw; gap: 2vw; }
.mtitle { font-weight: 700; color: var(--ink2); font-size: clamp(14px, 2.2vh, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mclock { display: flex; gap: 2.4vw; font-variant-numeric: tabular-nums; color: var(--ink2); }
.mclock .ck { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.mclock small { font-size: clamp(9px, 1.4vh, 14px); font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.mclock b { font-size: clamp(16px, 3.2vh, 32px); font-weight: 800; }
.mactions { display: flex; gap: 8px; justify-content: flex-end; }
.chip-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1vh 1.6vw;
  font-weight: 700; font-size: clamp(13px, 2vh, 20px); }
.chip-btn.done { border-color: var(--good); color: #8be08b; }
.board { touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; flex: 1; display: grid; grid-template-rows: 1fr auto 1fr; padding: 0 2vw; gap: 0; min-height: 0; }
.row { display: grid; grid-template-columns: 4vw 1fr auto 13vw 19vw; align-items: center; gap: 1.5vw;
  background: var(--panel); border: 2px solid var(--line); border-radius: 2.2vh; padding: 0 0 0 2vw;
  text-align: left; overflow: hidden; position: relative; transition: transform .08s; min-height: 0; }
.row:active { transform: scale(.995); }
.row:focus, .row:focus-visible { outline: none; }
.row.t1 { --team: var(--t1); } .row.t2 { --team: var(--t2); }
.row { border-left: 1.2vw solid var(--team); }
.row.enjeu { box-shadow: 0 0 0 3px var(--accent) inset; }
.row .srv { width: 7.5vh; height: 7.5vh; max-width: 4.6vw; max-height: 4.6vw; justify-self: center; opacity: 0;
  transform: scale(.4); transition: opacity .25s, transform .25s; }
.row .srv svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6vh 1.2vh rgba(0,0,0,.55)); }
.row .srv.on { opacity: 1; transform: none; animation: srvbounce 2.4s ease-in-out infinite; }
.row .srv.new { animation: srvin .7s cubic-bezier(.3,1.6,.5,1), srvbounce 2.4s ease-in-out .7s infinite; }
@keyframes srvbounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.9vh) rotate(25deg); } }
@keyframes srvin { 0% { transform: translateY(-6vh) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.row .names span.serving { color: var(--ink-strong); }
.row .names span.receiving { color: var(--ink2); }
.row .names .mini { display: inline-block; width: .62em; height: .62em; margin-left: .25em; vertical-align: .05em; }
.row .names .mini svg { width: 100%; height: 100%; display: block; }
.row.serve { background: linear-gradient(90deg, rgba(215, 242, 58, .10), var(--panel) 45%); }
.row .names { display: flex; flex-direction: column; justify-content: center; line-height: 1.04; min-width: 0; }
.row .names span { font-size: clamp(22px, 8.2vh, 110px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .prev { display: flex; gap: 1.2vw; font-size: clamp(18px, 6vh, 70px); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.row .prev .w { color: var(--ink); }
.row .games { font-size: clamp(30px, 13vh, 170px); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--panel2); height: 100%; display: flex; align-items: center; justify-content: center; }
.row .pts { font-size: clamp(34px, 16vh, 210px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--pts); height: 100%; display: flex; align-items: center; justify-content: center; letter-spacing: -.03em; }
.row.flash .pts { animation: flash 0.9s ease-out; }
.row.flash { animation: rowflash 0.9s ease-out; }
@keyframes flash { 0% { background: var(--accent); color: #0d1016; } 100% { background: var(--pts); color: var(--ink); } }
@keyframes rowflash { 0% { border-color: var(--accent); } 100% { border-color: var(--line); } }
.tagline { height: 9vh; display: flex; align-items: center; justify-content: center; }
.tagline span { background: var(--accent); color: #0d1016; font-weight: 900; letter-spacing: .06em;
  font-size: clamp(14px, 4.4vh, 48px); padding: .6vh 2.4vw; border-radius: 999px; }
.tagline span:empty { display: none; }
.mfoot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2vw; padding: 1.4vh 2vw 2vh; }
.undo { background: var(--panel2); border: 1px solid var(--line); border-radius: 1.6vh; padding: 1.6vh 3vw;
  font-weight: 800; font-size: clamp(16px, 3.2vh, 32px); }
#last, #sync-info { font-size: clamp(12px, 2vh, 18px); }
#sync-info { text-align: right; }

/* cartes (fin de jeu / set / match) */
.card-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 10, .55); z-index: 5; animation: fadein .25s ease-out; }
.card-overlay .box { background: var(--panel); border: 2px solid var(--accent); border-radius: 3vh; padding: 4vh 5vw;
  text-align: center; min-width: 50vw; }
.card-overlay .kicker { color: var(--accent); font-weight: 900; letter-spacing: .14em; font-size: clamp(16px, 4vh, 40px); }
.card-overlay .big { font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 9vh, 110px); margin: 1vh 0; line-height: 1.05; }
.card-overlay .sets { font-size: clamp(20px, 6vh, 70px); font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; }
.card-overlay .durs { margin-top: 1.4vh; color: var(--muted); font-weight: 700; font-size: clamp(13px, 2.6vh, 26px); white-space: pre-wrap; font-variant-numeric: tabular-nums; }
.card-overlay .actions { display: flex; gap: 12px; justify-content: center; margin-top: 3vh; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* menu */
.menu { position: fixed; inset: 0; background: rgba(5, 7, 10, .7); display: flex; align-items: center; justify-content: center; z-index: 6; }
.menu-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; width: min(520px, 92vw); }

/* historique */
.hitem { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.hitem b { font-size: 17px; }
.hitem .acts { display: flex; gap: 6px; }
.hitem .acts button { padding: 10px 12px; }

.toast { position: fixed; left: 50%; top: 9vh; transform: translateX(-50%); background: #222a36; border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 12px; z-index: 9; font-weight: 700; font-size: clamp(15px, 2.6vh, 26px); }

/* portrait : noms un peu plus petits */
@media (orientation: portrait) {
  .row { grid-template-columns: 6vw 1fr auto 16vw 22vw; }
  .row .names span { font-size: clamp(20px, 4.4vh, 70px); }
  .row .games { font-size: clamp(28px, 7vh, 110px); }
  .row .pts { font-size: clamp(30px, 8.5vh, 130px); }
  .row .prev { font-size: clamp(16px, 3.4vh, 50px); }
}

/* plateforme */
label.stack { display: block; margin: 12px 0; color: var(--muted); font-size: 14px; }
label.stack input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pill.wait { background: #3a2f12; color: #ffd36b; }
.pill.err { background: #3a1616; color: #ff8f8f; }
.sent { font-size: 12px; margin-left: 6px; }
.sent.ok { color: #8be08b; } .sent.wait { color: #ffd36b; }

/* glisser pour annuler / rétablir */
.swipe-hint { position: fixed; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: none; opacity: 0;
  font-weight: 900; font-size: clamp(16px, 3.6vh, 36px); padding: 1.6vh 2.4vw; border-radius: 999px;
  background: var(--panel2); border: 2px solid var(--line); color: var(--ink2); white-space: nowrap; }
.swipe-hint.left { right: 3vw; } .swipe-hint.right { left: 3vw; }
.swipe-hint.ready { background: var(--accent); border-color: var(--accent); color: #0d1016; }
.board.settle { transition: transform .22s ease-out; }

/* bandeau Annuler */
.snack { position: fixed; left: 50%; bottom: 2.2vh; transform: translateX(-50%); z-index: 7; display: flex; align-items: center;
  gap: 2vw; background: var(--snack); color: var(--ink); border: 1px solid var(--line); border-radius: 1.8vh; padding: .8vh .8vh .8vh 2.4vw;
  box-shadow: 0 1vh 3vh rgba(0,0,0,.45); animation: snackin .2s ease-out; overflow: hidden; }
.snack span { font-weight: 700; font-size: clamp(14px, 2.6vh, 26px); white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.snack button { background: var(--accent); color: #0d1016; font-weight: 900; border-radius: 1.3vh;
  padding: 1.4vh 2.6vw; font-size: clamp(15px, 2.8vh, 28px); white-space: nowrap; }
.snack::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent);
  animation: snackbar var(--snack-ms, 5s) linear forwards; }
@keyframes snackin { from { opacity: 0; transform: translate(-50%, 2vh); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes snackbar { from { width: 100%; } to { width: 0; } }
.undo.hidden { display: none; }

/* ================================================================ thèmes de couleurs (écran de match) */
#match { --pts: #2b3240; --snack: #222a36; --ink-strong: #fff; --accent-ink: var(--accent);
  --cond: "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "DejaVu Sans Condensed", sans-serif;
  background: var(--bg); color: var(--ink); }
#match.th-marine { --bg: #071230; --panel: #0e1e4a; --panel2: #13285e; --line: #1d3470; --pts: #182f6a; --snack: #112459;
  --ink: #f4f6fb; --ink2: #b9c5e2; --muted: #7c8bb3; --t1: #4b9ef2; --t2: #e8533b; }
#match.th-clair { color-scheme: light; --bg: #e8ecf1; --panel: #ffffff; --panel2: #f2f5f8; --line: #cdd5df; --pts: #e1e7ee;
  --snack: #ffffff; --ink: #0d1016; --ink2: #3a4350; --muted: #6a7482; --ink-strong: #000; --accent: #d8f000;
  --accent-ink: #5a6a00; --t1: #1f6fd1; --t2: #d0481a; }
#match.th-clair .chip-btn, #match.th-clair .undo { color: var(--ink); }
#match.th-clair .row.serve { background: linear-gradient(90deg, rgba(150, 180, 0, .16), var(--panel) 45%); }
.menu-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.seg.tpl button { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seg.tpl svg { width: 70px; height: 42px; }

/* ================================================================ modèle « Face à face » */
#match.tpl-face .board { grid-template-rows: 1fr; grid-template-columns: 1fr minmax(6vw, auto) 1fr; padding: 0; }
#match.tpl-face .row { grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "names names names" "pts pts pts" "prev games ."; gap: 0 2.4vw; padding: 3vh 3vw;
  border: 0; border-radius: 0; background: linear-gradient(165deg, var(--panel2), var(--panel)); align-items: stretch; }
#match.tpl-face .row.side-l { border-left: 4.5vw solid var(--team); }
#match.tpl-face .row.side-r { border-right: 4.5vw solid var(--team); grid-template-columns: 1fr auto auto;
  grid-template-areas: "names names names" "pts pts pts" ". prev games"; }
#match.tpl-face .row.serve.side-l { background: linear-gradient(100deg, rgba(215, 242, 58, .10), var(--panel) 40%); }
#match.tpl-face .row.serve.side-r { background: linear-gradient(260deg, rgba(215, 242, 58, .10), var(--panel) 40%); }
#match.tpl-face .row .names { grid-area: names; }
#match.tpl-face .row.side-r .names { align-items: flex-end; text-align: right; }
#match.tpl-face .row .names span { font-family: var(--cond); font-weight: 800; font-size: clamp(22px, 7.5vh, 90px); line-height: .98; letter-spacing: 0; }
#match.tpl-face .row .pts { grid-area: pts; background: transparent; font-family: var(--cond); font-style: italic; font-weight: 900;
  font-size: min(44vh, 21vw); color: var(--ink-strong); letter-spacing: -.02em; height: auto; transform: skewX(-4deg); }
#match.tpl-face .row .games, #match.tpl-face .row .prev { font-family: var(--cond); font-weight: 800; font-size: clamp(26px, 11vh, 130px);
  background: transparent; height: auto; align-self: end; line-height: 1; }
#match.tpl-face .row .games { grid-area: games; color: var(--accent-ink); justify-content: flex-start; }
#match.tpl-face .row .prev { grid-area: prev; color: var(--muted); gap: 2vw; }
#match.tpl-face .row .prev .w { color: var(--ink); }
#match.tpl-face .row .srv { position: absolute; top: 3vh; width: 8vh; height: 8vh; max-width: none; max-height: none; }
#match.tpl-face .row.side-l .srv { right: 2.4vw; } #match.tpl-face .row.side-r .srv { left: 2.4vw; }
#match.tpl-face .row.flash .pts { animation: flashtxt .9s ease-out; }
#match.tpl-face .row.flash { animation: none; }
@keyframes flashtxt { 0% { color: var(--accent-ink); transform: skewX(-4deg) scale(1.06); } 100% { color: var(--ink-strong); transform: skewX(-4deg); } }
#match.tpl-face .row.enjeu { box-shadow: 0 0 0 .5vh var(--accent) inset; }
#match.tpl-face .tagline { height: auto; padding: 0 .6vw; background: var(--bg); }
#match.tpl-face .tagline span { writing-mode: vertical-rl; transform: rotate(180deg); background: transparent; color: var(--accent-ink);
  font-family: var(--cond); font-size: clamp(16px, 5.4vh, 60px); letter-spacing: .14em; padding: 0; border-radius: 0; }
@media (orientation: portrait) {
  #match.tpl-face .board { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  #match.tpl-face .row { padding: 1.6vh 4vw; }
  #match.tpl-face .row .pts { font-size: min(17vh, 40vw); }
  #match.tpl-face .row .names span { font-size: clamp(18px, 4.4vh, 70px); }
  #match.tpl-face .row .games, #match.tpl-face .row .prev { font-size: clamp(22px, 6.5vh, 90px); }
  #match.tpl-face .row .srv { width: 6vh; height: 6vh; top: 1.6vh; }
  #match.tpl-face .tagline { height: 7vh; }
  #match.tpl-face .tagline span { writing-mode: horizontal-tb; transform: none; }
}

/* ================================================================ modèle « Géant » (lisible de loin) */
#match.tpl-geant .mtitle, #match.tpl-geant #last, #match.tpl-geant #sync-info { visibility: hidden; }
#match.tpl-geant .board { padding: 0 1.4vw; }
#match.tpl-geant .row { grid-template-columns: 7vh minmax(0, 1fr) 22vw 36vw; grid-template-rows: 1fr auto;
  grid-template-areas: "srv names games pts" "srv prev games pts"; gap: 0 1.2vw; padding-left: 1.2vw; }
#match.tpl-geant .row .srv { grid-area: srv; width: 6.5vh; height: 6.5vh; max-width: none; max-height: none; }
#match.tpl-geant .row .names { grid-area: names; justify-content: flex-end; }
#match.tpl-geant .row .names span { font-size: clamp(16px, 5.4vh, 64px); font-family: var(--cond); }
#match.tpl-geant .row .prev { grid-area: prev; font-size: clamp(16px, 5.4vh, 60px); padding-bottom: 2vh; font-family: var(--cond); }
#match.tpl-geant .row .games { grid-area: games; font-size: clamp(40px, 26vh, 300px); font-family: var(--cond); }
#match.tpl-geant .row .pts { grid-area: pts; font-size: clamp(50px, 34vh, 400px); font-family: var(--cond); letter-spacing: -.01em; }
#match.tpl-geant .tagline { height: 7vh; }

/* inversion gauche / droite (ou haut / bas) */
#match.swap #row0 { order: 3; } #match.swap .tagline { order: 2; } #match.swap #row1 { order: 1; }

/* scanner de QR code */
.scan-btn { width: 100%; margin: 10px 0 4px; padding: 16px; font-size: 18px; font-weight: 800; }
.scanner { position: fixed; inset: 0; background: #000; z-index: 20; display: flex; align-items: center; justify-content: center; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; width: min(60vw, 60vh); aspect-ratio: 1; border: 4px solid var(--accent); border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.scan-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 18px 22px; background: rgba(13, 16, 22, .85); color: #fff; font-weight: 700; }

/* annonce vocale */
.voice-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 6px 0; }
.voice-row label.inline select { width: auto; max-width: 280px; }
.voice-row button { padding: 10px 16px; border-radius: 10px; }

/* ================================================================ modèle « Blocs couleur » */
#match.tpl-blocs .board { grid-template-rows: 1fr 1fr; padding: 0 1.6vw; position: relative; gap: 0; }
#match.tpl-blocs .tagline { position: absolute; left: 3vw; top: 50%; transform: translateY(-50%); height: auto; z-index: 2; pointer-events: none; }
#match.tpl-blocs .tagline span { font-size: clamp(13px, 3vh, 30px); }
#match.tpl-blocs .row { grid-template-columns: minmax(0, 1fr) 15vw 38vw; gap: 0 1.6vw; padding: 0; border: 0; border-radius: 0;
  background: var(--panel); overflow: visible; }
#match.tpl-blocs .row.side-l { border-radius: 2.4vh 2.4vh 0 0; border-bottom: 1px solid var(--line); }
#match.tpl-blocs .row.side-r { border-radius: 0 0 2.4vh 2.4vh; }
#match.tpl-blocs .row.serve { background: var(--panel); }
#match.tpl-blocs .row .srv { display: none; }
#match.tpl-blocs .row .names { align-self: center; border-left: .7vw solid var(--team); margin-left: 2.4vw; padding-left: 2.4vw; }
#match.tpl-blocs .row .names span { font-size: clamp(20px, 7vh, 84px); letter-spacing: .02em; line-height: 1.25; }
.row .names u { text-decoration: none; }
#match.tpl-blocs .row .names span { font-weight: 900; }
#match.tpl-blocs .row .names span.serving u { text-decoration: underline; text-decoration-thickness: .5vh; text-underline-offset: .9vh;
  text-decoration-color: var(--muted); }
#match.tpl-blocs .row .names span.receiving { color: var(--ink); }
#match.tpl-blocs .row .names .mini { margin: 0 .35em 0 0; width: .6em; height: .6em; vertical-align: .1em; }
#match.tpl-blocs .row .prev { position: absolute; left: 4.2vw; bottom: 2vh; font-size: clamp(14px, 3.4vh, 34px); gap: 1.4vw; }
#match.tpl-blocs .row.side-l .prev { bottom: auto; top: 2vh; }
#match.tpl-blocs .row .games { background: var(--panel2); font-size: clamp(34px, 20vh, 240px); position: relative; }
#match.tpl-blocs .row.side-l .games { border-radius: 2.4vh 2.4vh 0 0; padding-top: 4vh; }
#match.tpl-blocs .row.side-r .games { border-radius: 0 0 2.4vh 2.4vh; }
#match.tpl-blocs .row.side-l .games::before { content: attr(data-set); position: absolute; top: 2vh; left: 0; right: 0; text-align: center;
  font-size: clamp(11px, 2.4vh, 24px); font-weight: 800; letter-spacing: .2em; color: var(--muted); }
#match.tpl-blocs .row .pts { background: var(--team); color: #fff; font-size: clamp(50px, 30vh, 360px); font-weight: 900; letter-spacing: -.01em; }
#match.tpl-blocs .row.side-l .pts { border-radius: 0 2.4vh 0 0; }
#match.tpl-blocs .row.side-r .pts { border-radius: 0 0 2.4vh 0; }
#match.tpl-blocs .row.flash { animation: none; }
#match.tpl-blocs .row.flash .pts { animation: flashblk .8s ease-out; }
@keyframes flashblk { 0% { filter: brightness(1.6); transform: scale(1.03); } 100% { filter: none; transform: none; } }
#match.tpl-blocs .row.enjeu { box-shadow: none; }
#match.tpl-blocs .row.enjeu .pts { box-shadow: 0 0 0 .6vh var(--accent) inset; }
@media (orientation: portrait) {
  #match.tpl-blocs .row { grid-template-columns: minmax(0, 1fr) 18vw 34vw; }
  #match.tpl-blocs .row .pts { font-size: clamp(40px, 13vh, 200px); }
  #match.tpl-blocs .row .games { font-size: clamp(30px, 10vh, 150px); }
  #match.tpl-blocs .row .names span { font-size: clamp(18px, 3.6vh, 50px); }
}