/* =====================================================================
   Padel Tournament Creator – mobile-first stylesheet
   Base (no media query) = smartphones, works from 360 px and up, one column.
   Breakpoints (layout changes only where needed):
     768px  tablet        – two columns where it helps
     1024px desktop       – content side by side, live standings beside rounds
     1440px large desktop – wider max-width, more match columns, capped text widths
   ===================================================================== */

/* ---------- Tokens (light) ---------- */
:root{
  --backdrop:#302C7A;
  --card:#EEF0FD; --surface:#FFFFFF; --ink:#1E2033; --muted:#646A85; --faint:#9AA0BC;
  --line:#8F8CF0; --line-soft:#D5D8F5; --accent:#4F46E5; --accent-ink:#FFFFFF; --accent-soft:#CDD3FB; --accent-text:#3F37C9;
  --gold:#F6D365; --gold-ink:#6B4A00; --good:#1F9D62; --good-soft:#D6F3E5; --bad:#C8384B; --bad-soft:#FBE0E4;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r:10px;
  --gutter:16px;          /* side gutter, grows at breakpoints */
  --content-max:100%;     /* page width cap, set at breakpoints */
  --form-max:100%;        /* wizard width cap */
  --tap:44px;             /* minimum touch target */
}
/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --backdrop:#100F26; --card:#1B1A36; --surface:#25244A; --ink:#ECEDFA; --muted:#A6A9C8; --faint:#6E7196;
  --line:#5F5BD6; --line-soft:#34336A; --accent:#6D66FF; --accent-ink:#FFFFFF; --accent-soft:#33306E; --accent-text:#B9B5FF;
  --gold:#E2BC45; --gold-ink:#2B1F00; --good:#4CCB8E; --good-soft:#173D2D; --bad:#FF7A8B; --bad-soft:#47202A; color-scheme:dark }}
:root[data-theme="dark"]{
  --backdrop:#100F26; --card:#1B1A36; --surface:#25244A; --ink:#ECEDFA; --muted:#A6A9C8; --faint:#6E7196;
  --line:#5F5BD6; --line-soft:#34336A; --accent:#6D66FF; --accent-ink:#FFFFFF; --accent-soft:#33306E; --accent-text:#B9B5FF;
  --gold:#E2BC45; --gold-ink:#2B1F00; --good:#4CCB8E; --good-soft:#173D2D; --bad:#FF7A8B; --bad-soft:#47202A; color-scheme:dark }

/* =====================================================================
   BASE = MOBILE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--backdrop);color:var(--ink);font-family:var(--font);
  font-size:1rem;line-height:1.5;min-height:100vh;overflow-x:hidden;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
  padding-block:0 3rem;
}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.2}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- Top bar ---------- */
.top{max-width:var(--content-max);margin:0 auto;display:grid;gap:.85rem;padding-block:1rem .9rem}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;background:none;border:0;cursor:pointer;padding:0;text-align:left;min-width:0}
.brand-mark{width:2.25rem;height:2.25rem;border-radius:50%;background:#C8F25A;position:relative;flex:none;box-shadow:inset -4px -4px 0 rgba(0,0,0,.12)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;inset:16% 34%;border:2px solid rgba(40,60,0,.45);border-radius:50%}
.brand-mark::after{inset:34% 16%}
.brand b{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;display:block}
.brand small{display:block;color:#C9C7F5;font-size:.78rem;font-weight:500}
.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.nav button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;min-height:var(--tap);padding:.4rem .6rem;font-weight:600;cursor:pointer;font-size:.875rem;line-height:1.15}
.nav button.on{background:#fff;color:#2B2670;border-color:#fff}
.nav button:hover:not(.on){background:rgba(255,255,255,.1)}
.lg-only{display:none}

/* ---------- Language switcher (flag + code text, so it works without seeing the flag) ---------- */
.top-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0}
.lang{display:flex;gap:.25rem;flex:none;background:rgba(255,255,255,.08);border-radius:999px;padding:.2rem}
.lang a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;min-width:var(--tap);justify-content:center;padding:.3rem .6rem;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.04em}
.lang a img{width:1.35rem;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.lang a[aria-current="page"]{background:#fff;color:#2B2670}
.lang a:hover:not([aria-current]){background:rgba(255,255,255,.14)}
.lang a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Page containers ---------- */
.wrap{max-width:var(--content-max);margin:0 auto}
.card{background:var(--card);border-radius:14px;padding:1.1rem}
.narrow{max-width:var(--form-max);margin:0 auto}
.banner{max-width:var(--content-max);margin:0 auto .9rem;background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:.65rem .9rem;font-size:.875rem}

/* ---------- Stepper ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:.6rem}
.step{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--faint);font-weight:500;font-size:.95rem;min-height:var(--tap);display:flex;flex-direction:column;justify-content:flex-end}
.step .lbl{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem;white-space:nowrap;overflow:hidden}
.step .t{display:none}
.step .n{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border:1.5px solid var(--line-soft);border-radius:4px;font-size:.75rem;font-weight:700;background:var(--surface);flex:none}
.step .bar{height:5px;border-radius:9px;background:var(--line-soft)}
.step.done{color:var(--ink)} .step.done .n{color:var(--accent-text);border-color:var(--accent-soft)} .step.done .bar{background:var(--accent)}
.step.cur{color:var(--ink)} .step.cur .n{background:var(--accent);border-color:var(--accent);color:#fff} .step.cur .bar{background:var(--accent)}
.step-now{margin:0 0 1.4rem;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}

/* ---------- Form ---------- */
.field{display:grid;gap:.5rem;margin-bottom:1.5rem;min-width:0}
.field>label,.flabel{font-weight:700;font-size:1.06rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.opt{font-style:italic;font-weight:400;color:var(--muted);font-size:.9rem}
.hint{color:var(--muted);font-size:.875rem;margin:0}
.input,.select,textarea.input{width:100%;min-width:0;min-height:var(--tap);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.7rem .9rem;font-size:1rem;outline:none}
.input:focus,.select:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.5rem;cursor:pointer}
textarea.input{min-height:7rem;resize:vertical}
input[type="datetime-local"].input{-webkit-appearance:none;appearance:none}

/* segmented controls: fluid, labels may wrap on narrow phones */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.3rem;gap:.25rem}
.seg button{border:0;background:transparent;border-radius:7px;min-height:var(--tap);padding:.45rem .3rem;font-size:.92rem;line-height:1.2;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.seg button:hover:not(.on){background:var(--card)}
.seg.seg-6{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}

.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chip{border:0;background:var(--accent-soft);color:var(--accent-text);font-weight:700;border-radius:999px;min-height:2.25rem;padding:.3rem .85rem;font-size:.9rem;cursor:pointer}
.chip.on{background:var(--accent);color:#fff}
.chip:disabled{opacity:.45;cursor:default}
.badge{background:var(--accent-soft);color:var(--accent-text);border-radius:999px;padding:.25rem .8rem;font-size:.875rem;font-weight:700;border:0;cursor:pointer}

.row2,.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem}
.inline{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.unit{position:relative;width:100%}
.unit .input{padding-right:5.5rem}
.unit span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--faint);font-weight:700;font-size:.8rem;letter-spacing:.06em;pointer-events:none}

/* toggle */
.toggle{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.15rem;cursor:pointer;background:none;border:0;padding:0;min-height:var(--tap)}
.sw{width:50px;height:28px;border-radius:99px;background:#6B7089;position:relative;transition:background .15s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle.on .sw{background:var(--accent)} .toggle.on .sw::after{transform:translateX(22px)}

/* name list */
.nlist{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.5rem .6rem .4rem;min-width:0}
.nrow{display:flex;align-items:center;gap:.4rem}
.nrow .idx{font-family:var(--mono);color:var(--faint);width:1.6rem;text-align:right;font-size:.85rem;flex:none}
.nrow input{flex:1;min-width:0;border:0;background:transparent;min-height:var(--tap);padding:.3rem .15rem;font-size:1rem;outline:none}
.nrow input::placeholder{color:var(--faint)}
.nrow .x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:1.2rem;line-height:1;width:var(--tap);height:var(--tap);border-radius:6px;flex:none}
.nrow .x:hover{color:var(--bad)}
.nadd{border:0;background:none;color:var(--faint);font-style:italic;cursor:pointer;min-height:var(--tap);padding:.3rem 0 .2rem 2rem;font-size:.9rem;text-align:left}
.sub{font-weight:700;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.35rem}
.linkbtn{border:0;background:none;padding:0;min-height:var(--tap);font-weight:700;font-size:1.06rem;cursor:pointer;color:var(--ink)}
.summary{background:var(--surface);border-radius:var(--r);padding:.75rem .9rem;color:var(--muted);font-size:.875rem;border:1px dashed var(--line-soft)}
.summary b{color:var(--ink)}
.err{color:var(--bad);font-weight:600;font-size:.875rem;margin:0 0 .9rem}

/* ---------- Buttons ---------- */
.actions{display:flex;gap:.75rem;margin-top:1.8rem}
.btn{border:0;border-radius:var(--r);min-height:3.25rem;padding:.8rem 1.2rem;font-weight:700;font-size:1.05rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-align:center;line-height:1.2}
.btn.primary{background:var(--accent);color:var(--accent-ink);flex:1}
.btn.primary:hover{filter:brightness(1.08)}
.btn.back{background:var(--accent-soft);color:var(--accent-text);width:4rem;flex:none;font-size:1.4rem}
.btn.sm{min-height:var(--tap);padding:.5rem .85rem;font-size:.875rem;border-radius:8px}
.btn.soft{background:var(--accent-soft);color:var(--accent-text)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-soft)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn.go{background:var(--accent);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn:focus-visible,.seg button:focus-visible,.chip:focus-visible,.step:focus-visible,.toggle:focus-visible,.nav button:focus-visible,.tab:focus-visible,.titem:focus-visible,.brand:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Home ---------- */
.hero .card{color:var(--ink)}
.hero{color:#fff;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start;margin-bottom:1.5rem}
.hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.7rem}
.hero p{color:#D9D7FA;font-size:1rem;margin:0 0 1rem;max-width:60ch}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.ticks li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.7rem;color:#C9C7F5;font-size:.9rem}
.ticks li b{display:block;color:#fff;font-size:.98rem}
.ticks li::before{content:"✓";display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#3FB96A;color:#fff;font-weight:800;font-size:.8rem;margin-top:2px}
.tlist{display:grid;gap:.6rem}
.titem{background:var(--surface);border-radius:var(--r);padding:.85rem .9rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;border:1.5px solid transparent;cursor:pointer}
.titem:hover{border-color:var(--line)}
.titem h3{font-size:1rem;font-weight:700;overflow-wrap:anywhere}
.titem .meta{color:var(--muted);font-size:.82rem}
.pill{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.03em}
.pill.live{background:var(--good-soft);color:var(--good)}
.pill.fin{background:var(--accent-soft);color:var(--accent-text)}
.empty{text-align:center;color:var(--muted);padding:1.5rem .5rem}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.sec-h h2{font-size:1.2rem;font-weight:800}

/* ---------- Tournament ---------- */
.thead{display:grid;gap:.9rem;margin-bottom:1rem}
.thead h1{font-size:1.4rem;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.thead .meta{color:var(--muted);font-size:.85rem;margin-top:.25rem}
.thead .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.thead .toolbar .btn.go,.thead .toolbar .btn.ghost{grid-column:1 / -1}
.tabs{display:flex;gap:.15rem;border-bottom:2px solid var(--line-soft);margin-bottom:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;min-height:var(--tap);padding:.5rem .75rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;font-size:.92rem;flex:none}
.tab.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.progress{height:6px;background:var(--line-soft);border-radius:9px;overflow:hidden;margin-top:.5rem;max-width:16rem}
.progress i{display:block;height:100%;background:var(--good);width:0}

.tlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.live-aside{display:none}

.rjump{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.1rem}
.rjump a{font-weight:700;font-size:.8rem;min-width:2.5rem;min-height:2.25rem;display:inline-grid;place-items:center;padding:0 .6rem;border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;border:1.5px solid var(--line-soft)}
.rjump a.full{background:var(--good-soft);border-color:transparent;color:var(--good)}
.round{margin-bottom:1.6rem;scroll-margin-top:1rem}
.round-h{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.round-h h3{font-size:1.1rem;font-weight:800}
.round-h .meta{color:var(--muted);font-size:.82rem}
.matches{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.match{background:var(--surface);border-radius:var(--r);padding:.75rem .85rem .85rem;border:1.5px solid var(--line-soft);display:grid;gap:.6rem;min-width:0}
.match.done{border-color:color-mix(in srgb,var(--good) 55%,transparent)}
.court{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:.5rem}
.court .ok{color:var(--good)}
.side{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem;gap:.6rem;align-items:center}
.side .names{font-weight:600;font-size:.98rem;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.side .names span{display:block}
.side.win .names{color:var(--good)}
.score{width:4.5rem;min-height:3rem;text-align:center;font-size:1.3rem;font-weight:800;padding:.4rem .2rem;border:1.5px solid var(--line);border-radius:8px;background:var(--card);font-variant-numeric:tabular-nums;outline:none}
.score:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.vs{font-size:.68rem;font-weight:700;color:var(--faint);letter-spacing:.1em;text-align:center}
.wbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.wbtns button{border:1.5px solid var(--line-soft);background:var(--card);border-radius:7px;min-height:var(--tap);padding:.3rem;font-weight:700;font-size:.8rem;cursor:pointer;line-height:1.15}
.wbtns button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sitout{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
.sitout b{color:var(--ink);font-weight:600}
.panel{background:var(--surface);border-radius:var(--r);padding:.9rem;border:1.5px dashed var(--line)}
.panel h3{font-size:1.05rem;font-weight:800;margin-bottom:.6rem}
.checks{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .75rem}
.checks label{display:inline-flex;align-items:center;gap:.4rem;background:var(--card);border-radius:999px;min-height:2.5rem;padding:.3rem .8rem;font-size:.875rem;cursor:pointer;border:1.5px solid var(--line-soft)}
.checks label.on{border-color:var(--accent);background:var(--accent-soft)}
.checks input{accent-color:var(--accent);width:1.1rem;height:1.1rem}

/* round timer: clock on top, 2×2 buttons on phones */
.timer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-items:center;background:var(--ink);color:var(--card);border-radius:var(--r);padding:.75rem;margin-bottom:1.1rem}
.timer .hint{grid-column:1 / -1}
.timer .clock{grid-column:1 / -1;font-family:var(--mono);font-size:2.6rem;font-weight:700;line-height:1;text-align:center;padding-block:.2rem .4rem}
.timer.over .clock{color:var(--bad)}
.timer .btn{background:rgba(255,255,255,.14);color:inherit;width:100%}

/* ---------- Tables (scroll inside their own box, never the page) ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border-radius:var(--r);max-width:100%}
table.st{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.st th,.st td{padding:.6rem .55rem;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.st th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.st th.sortable{cursor:pointer} .st th.sorted{color:var(--accent-text)}
.st td.l,.st th.l{text-align:left}
.st td.name{font-weight:700;white-space:normal;min-width:6.5rem}
.st tr:last-child td{border-bottom:0}
.st .key{font-weight:800;color:var(--accent-text)}
.rank{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;font-weight:800;font-size:.8rem;background:var(--card)}
.rank.r1{background:var(--gold);color:var(--gold-ink)} .rank.r2{background:#D9DCE6;color:#3B4050} .rank.r3{background:#E8C3A1;color:#5A3517}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-bottom:1.1rem}
.kpi{background:var(--surface);border-radius:var(--r);padding:.75rem .85rem;min-width:0}
.kpi b{display:block;font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:.8rem}
.dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;background:var(--surface);border-radius:var(--r);padding:.9rem;margin:0}
.dl dt{color:var(--muted);font-size:.8rem;margin-top:.6rem} .dl dt:first-child{margin-top:0}
.dl dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.prow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.5rem}
.prow .input{flex:1 1 12rem;padding:.55rem .75rem;font-size:.95rem}
.confirm{display:inline-flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.875rem;font-weight:600;color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 2rem);width:max-content;text-align:center;background:var(--ink);color:var(--card);padding:.65rem 1.1rem;border-radius:999px;font-weight:600;font-size:.875rem;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.note{font-size:.8rem;color:var(--muted);margin-top:.5rem}

/* utilities (instead of inline styles, so the Content-Security-Policy can forbid them) */
.u-dim{color:inherit;opacity:.75}
.u-lp{display:flex;align-items:center;gap:.5rem;font-weight:600;text-transform:capitalize}
.u-present{display:inline-flex;gap:.4rem;align-items:center;font-size:.875rem;min-height:var(--tap)}
.u-center{justify-content:center}
.u-mb12{margin-bottom:.75rem}.field.u-mb8{margin-bottom:.5rem}
.u-mt12{margin-top:.75rem}.u-mt14{margin-top:.9rem}.u-mt16{margin-top:1rem}.u-mt22{margin-top:1.4rem}
.u-m012{margin:0 0 .75rem}.u-m0{margin:0}
.u-w150{max-width:100%}.u-w220{max-width:100%}.u-w280{max-width:100%}
.u-min0{min-width:0}
.input.u-lpin{width:4.5rem;padding:.5rem .6rem}

/* =====================================================================
   BREAKPOINT 1 – TABLET (768px+)
   ===================================================================== */
@media (min-width: 768px){
  :root{--gutter:24px;--form-max:640px}
  body{padding-bottom:4rem}

  .top{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-block:1.4rem 1.1rem}
  .top-row{justify-content:flex-start;gap:1.25rem}
  .brand b{font-size:1.2rem}
  .nav{display:flex;gap:.4rem}
  .nav button{padding:.4rem 1rem}
  .lg-only{display:inline}

  .card{padding:1.75rem}

  .steps{gap:.9rem;margin-bottom:1.75rem}
  .step .t{display:inline}
  .step-now{display:none}

  .row2,.cols2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .seg button{font-size:1rem;padding:.5rem}
  .seg.seg-6{grid-auto-flow:column;grid-template-columns:none}
  .unit{width:12.5rem}
  .u-w150{max-width:150px}.u-w220{max-width:220px}.u-w280{max-width:280px}

  .btn.back{width:6.9rem}
  .actions{gap:1rem}

  .hero h1{font-size:2.5rem}
  .hero p{font-size:1.06rem}

  .titem{grid-template-columns:minmax(0,1fr) auto;align-items:center}

  .thead h1{font-size:1.7rem}
  .thead .toolbar{display:flex}
  .tab{padding:.6rem .9rem;font-size:.95rem}

  .matches{grid-template-columns:repeat(2,minmax(0,1fr))}

  .timer{display:flex;flex-wrap:wrap;gap:.75rem;padding:.65rem .9rem}
  .timer .hint{grid-column:auto}
  .timer .clock{font-size:1.8rem;text-align:left;padding:0;min-width:6.5rem}
  .timer .btn{width:auto}

  table.st{font-size:.92rem}
  .st th,.st td{padding:.65rem .75rem}

  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dl{grid-template-columns:max-content minmax(0,1fr);gap:.55rem 1.2rem;padding:1rem}
  .dl dt{margin-top:0;font-size:.875rem;padding-top:.15rem}
  .prow{flex-wrap:nowrap}
}

/* =====================================================================
   BREAKPOINT 2 – DESKTOP (1024px+)
   ===================================================================== */
@media (min-width: 1024px){
  :root{--gutter:32px;--content-max:1120px;--form-max:660px}

  .card{padding:2rem 2.1rem}

  /* home: intro text and saved tournaments side by side */
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.25rem;margin-bottom:2rem}
  .hero h1{font-size:3rem}

  /* tournament: live standings beside the rounds */
  .tlayout{grid-template-columns:minmax(0,1fr) 18rem;align-items:start}
  .live-aside{display:block;position:sticky;top:calc(1rem + env(safe-area-inset-top,0px))}
  .live-aside h3{font-size:1rem;font-weight:800;margin-bottom:.5rem}
  .live-aside .st th,.live-aside .st td{padding:.45rem .5rem}
  .live-aside .st td.name{min-width:0}

  .thead{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1.5rem}
  .thead .toolbar{justify-content:flex-end}
}

/* =====================================================================
   BREAKPOINT 3 – LARGE DESKTOP (1440px+)
   ===================================================================== */
@media (min-width: 1440px){
  :root{--content-max:1320px;--form-max:720px}

  .hero p{max-width:56ch}
  .tlayout{grid-template-columns:minmax(0,1fr) 21rem}
  .matches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tbl-wrap{max-width:68rem}
  .live-aside .tbl-wrap{max-width:none}
  .dl{max-width:56rem}
  .note,.hint{max-width:75ch}
}

/* =====================================================================
   SEO CONTENT (home page guide, footer, rules page) – mobile-first
   ===================================================================== */
.seo{max-width:var(--content-max);margin:1.5rem auto 0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;color:#E4E3FB}
.seo-block{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1.1rem}
.seo h2{color:#fff;font-size:1.3rem;font-weight:800;margin-bottom:.7rem}
.seo h3{color:#fff;font-size:1.02rem;font-weight:700;margin-bottom:.3rem}
.seo p{margin:0 0 .8rem;max-width:68ch;line-height:1.6}
.seo p:last-child{margin-bottom:0}
.seo a{color:#C8F25A;font-weight:700}
.seo-steps{margin:0 0 .9rem;padding-left:1.3rem;display:grid;gap:.55rem;max-width:68ch}
.seo-steps b{color:#fff}
.seo-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.seo-cards article{background:rgba(255,255,255,.06);border-radius:10px;padding:.9rem}
.seo-cards p{margin:0;font-size:.92rem}
.seo details{border-top:1px solid rgba(255,255,255,.14);padding-block:.25rem}
.seo details:first-of-type{border-top:0}
.seo summary{cursor:pointer;font-weight:700;color:#fff;min-height:var(--tap);display:flex;align-items:center;list-style-position:outside}
.seo details p{padding-bottom:.6rem}
.seo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:.9rem}
.seo-table{border-collapse:collapse;width:100%;font-size:.88rem;font-variant-numeric:tabular-nums;min-width:20rem}
.seo-table th,.seo-table td{padding:.5rem .55rem;text-align:right;border-bottom:1px solid rgba(255,255,255,.14);white-space:nowrap}
.seo-table th:first-child,.seo-table td:first-child{text-align:left}
.seo-table th{color:#C9C7F5;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em}
.seo-cta{display:inline-flex;align-items:center;min-height:3rem;padding:.7rem 1.2rem;border-radius:var(--r);background:#C8F25A;color:#1E2A00!important;text-decoration:none;font-weight:800}
.site-foot{max-width:var(--content-max);margin:1.5rem auto 0;color:#B9B7EC;font-size:.82rem;text-align:center}
.site-foot a{color:#fff}
.rules-page .top{grid-template-columns:minmax(0,1fr)}
.rules-page .top-row{justify-content:space-between}
.rules-hero{color:#fff;margin:.5rem auto 1rem;max-width:var(--content-max)}
.rules-hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.6rem}
.rules-hero p{color:#D9D7FA;margin:0 0 1rem;max-width:62ch}
.crumbs{font-size:.82rem;color:#C9C7F5;margin:0 0 .4rem}
.crumbs a{color:#fff}
.rules-grid > div{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:start}

@media (min-width: 768px){
  .seo{gap:1.25rem;margin-top:2rem}
  .seo-block{padding:1.6rem}
  .seo h2{font-size:1.5rem}
  .seo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rules-hero h1{font-size:2.5rem}
}
@media (min-width: 1024px){

  #guide{grid-template-columns:repeat(2,minmax(0,1fr))}
  #guide .seo-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  #guide > .seo-block:nth-child(2){grid-column:1 / -1;grid-row:1}
  .rules-hero h1{font-size:3rem}
  .rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}
  .rules-grid > div{gap:1.25rem}
}
@media print{ .seo,.site-foot{display:none!important} }

/* =====================================================================
   PRINT
   ===================================================================== */
#printArea{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff!important;color:#000!important;padding:0!important;min-height:0}
  #app,.toast,.banner{display:none!important}
  #printArea{display:block;font-family:Arial,Helvetica,sans-serif;color:#000;font-size:11pt}
  #printArea h1{font-size:20pt;margin:0 0 4pt}
  #printArea h2{font-size:13pt;margin:14pt 0 6pt;border-bottom:1.5pt solid #000;padding-bottom:2pt}
  #printArea .pm{color:#333;font-size:10pt;margin:0 0 3pt}
  #printArea table{width:100%;border-collapse:collapse;margin-bottom:6pt;table-layout:fixed}
  #printArea th,#printArea td{border:0.75pt solid #555;padding:5pt 7pt;text-align:left;vertical-align:middle}
  #printArea th{background:#eee;font-size:9pt;text-transform:uppercase;letter-spacing:.04em}
  #printArea td.n,#printArea th.n{text-align:right}
  #printArea td.sc{text-align:center;font-weight:700;width:90pt;font-size:12pt}
  #printArea .w50{width:50pt} #printArea .w70{width:70pt}
  #printArea .rb{break-inside:avoid;page-break-inside:avoid}
  #printArea .so{font-size:9.5pt;color:#333;margin:0 0 8pt}
  #printArea .foot{margin-top:16pt;font-size:8.5pt;color:#555}
  #printArea .pl{columns:3;font-size:10pt;margin:0;padding-left:16pt}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}