/* RESULTADO FINAL — Estilos
   Colocar em: public_html/assets/app.css

   Pensado para um telemóvel, num campo, ao fim da tarde:
   alvos grandes, contraste alto, nada a depender de precisão. */

:root{
  --bg:#EDEBE2; --surface:#FFFFFF; --surface2:#F4F2E8; --sunk:#E4E1D4;
  --ink:#171A12; --ink2:#3E4436; --muted:#6E7563; --line:#D3D0C0; --line2:#BFBBA8;
  --accent:#8A6A10; --accent-ink:#FFFFFF; --accent-soft:#F2E7C4;
  --ok:#2F7D57; --warn:#A25C10; --crit:#A8341F;
  --ok-bg:#DCEDE3; --warn-bg:#F6E6CE; --crit-bg:#F5DDD7;
  --shadow:0 1px 2px rgba(23,26,18,.07), 0 8px 28px rgba(23,26,18,.09);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101309; --surface:#191D14; --surface2:#212619; --sunk:#0C0F07;
    --ink:#EBEDE2; --ink2:#C3C8B6; --muted:#8D9481; --line:#2C3324; --line2:#3C4431;
    --accent:#D2A63C; --accent-ink:#14170D; --accent-soft:#3A2F11;
    --ok:#6FC297; --warn:#E0A04A; --crit:#E2735C;
    --ok-bg:#16301F; --warn-bg:#332510; --crit-bg:#331A14;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; line-height:1.15; text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
input{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

main{max-width:560px; margin:0 auto; padding-bottom:56px}
main.bare{padding-top:24px}
.pad{padding:16px}
.stack{display:grid; gap:12px}
.row{display:flex; gap:10px}
.row>*{flex:1}
.center{text-align:center}
.divider{height:1px; background:var(--line); margin:20px 16px}
.hint{font-size:13.5px; color:var(--muted); line-height:1.5}
.label{
  display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:12.5px; font-weight:700; color:var(--muted);
  margin:0 0 8px; padding:0 16px;
}

/* ---------- barra de topo ---------- */
.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-top)) 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--line);
}
.appbar-t{flex:1; min-width:0}
.appbar h1{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.04em; font-size:20px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar p{font-size:12.5px; color:var(--muted); font-weight:500}
.back{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center; text-decoration:none;
  background:var(--surface2); color:var(--ink2); font-size:22px; line-height:1;
}
.brand-badge{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center; background:var(--ink); color:var(--bg);
  font-family:"Anton",sans-serif; font-size:16px; letter-spacing:.02em;
}
.brand-badge.big{width:60px; height:60px; font-size:24px; border-radius:15px; margin:0 auto 14px}
.who{
  width:34px; height:34px; border-radius:50%; flex:none; text-decoration:none;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
  font-weight:700; font-size:14px;
}

/* ---------- avisos ---------- */
.flash{
  margin:12px 16px 0; padding:11px 14px; border-radius:10px;
  font-size:14.5px; font-weight:600;
}
.flash.ok{background:var(--ok-bg); color:var(--ok)}
.flash.crit{background:var(--crit-bg); color:var(--crit)}
.sheetnote{
  background:var(--accent-soft); color:var(--accent);
  border-radius:10px; padding:11px 13px; font-size:13.5px; font-weight:500;
}

/* ---------- agenda ---------- */
.daygroup{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:12.5px; font-weight:700; color:var(--muted);
  padding:22px 16px 8px;
}
.match{
  display:grid; gap:7px; text-decoration:none;
  padding:14px 16px; background:var(--surface);
  border-top:1px solid var(--line);
}
.match:last-of-type{border-bottom:1px solid var(--line)}
.match:active{background:var(--surface2)}
.match-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.match .esc{
  font-family:"Barlow Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:14px;
}
.match .sc{font-family:"Anton",sans-serif; font-size:19px; letter-spacing:.03em; font-variant-numeric:tabular-nums}
.match .sc.muted{color:var(--muted); font-family:"Barlow",sans-serif; font-size:15px; font-weight:600}
.match .teams{font-size:15px; color:var(--ink2)}
.match .vs{color:var(--muted); font-size:13px; padding:0 3px}
.match .meta{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted)}

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-family:"Barlow Condensed",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; width:fit-content;
}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.flat{background:var(--surface2); color:var(--muted)}
.pill.flat i{display:none}

/* ---------- ecrã do resultado ---------- */
form{padding:16px}
.scorecard{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:20px 12px;
}
.side{display:grid; justify-items:center; gap:12px}
.side .nm{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:700;
  font-size:13.5px; letter-spacing:.05em; text-align:center; line-height:1.2;
  min-height:2.4em; color:var(--ink2); display:flex; align-items:center;
}
.side .val{
  font-family:"Anton",sans-serif; font-size:64px; line-height:.9; letter-spacing:.02em;
  width:100%; max-width:130px; text-align:center; background:transparent;
  border:none; color:var(--ink); padding:0; -moz-appearance:textfield;
}
.side .val::-webkit-outer-spin-button,
.side .val::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stepbtns{display:flex; gap:8px}
.stepbtns button{
  width:52px; height:52px; border-radius:14px;
  background:var(--surface2); border:1px solid var(--line2);
  font-size:26px; display:grid; place-items:center; line-height:1; color:var(--ink);
  touch-action:manipulation;
}
.stepbtns button:active{background:var(--ink); color:var(--bg)}
.vs-mid{
  font-family:"Barlow Condensed",sans-serif; color:var(--muted);
  font-size:13px; font-weight:700; letter-spacing:.1em; padding-top:44px;
}

/* ---------- botões ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; border-radius:12px; text-decoration:none;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:16px;
  touch-action:manipulation;
}
.btn.big{padding:19px; font-size:17.5px; margin-top:18px}
.btn.gold{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{background:var(--surface2); color:var(--ink); border:1px solid var(--line)}
.btn:active{opacity:.85}

/* ---------- factos ---------- */
.facts{margin:0; padding:0 16px; display:grid; gap:11px}
.facts div{display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:baseline}
.facts dt{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.08em; font-size:12px; font-weight:700; color:var(--muted);
}
.facts dd{margin:0; font-size:15px; color:var(--ink2)}

/* ---------- vazio / hero / público ---------- */
.empty{padding:56px 24px; text-align:center; display:grid; gap:12px; justify-items:center}
.empty h2{font-size:22px}
.empty p{color:var(--muted); max-width:34ch}
.empty .btn{max-width:280px; margin-top:8px}

.hero{padding:40px 20px; text-align:center}
.hero h1{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:30px; letter-spacing:.02em}
.hero .lede{color:var(--muted); max-width:32ch; margin:8px auto 26px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px; text-align:left; display:grid; gap:10px;
}
.card h2{font-size:17px}

.public{padding:24px 16px; display:grid; gap:14px}
.public .eyebrow{
  font-family:"Barlow Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:12px; font-weight:700; color:var(--accent);
}
.public h1{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:26px}
.public .lede{color:var(--muted)}
.card-img{
  display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--line); background:var(--sunk);
}
.caption{
  background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  padding:14px; font-size:14.5px; color:var(--ink2); white-space:pre-wrap;
}
.footnote{text-align:center; font-size:12.5px; color:var(--muted); margin-top:20px}