:root{
  --bg-top: #1C0F14;
  --bg-bottom: #241216;
  --text-main: #F4EDE7;
  --text-muted: rgba(244, 237, 231, 0.75);
  --card-bg: #151515;
  --input-bg: #1a1a1a;

  --accent: #E86A33;      /* arancio caldo */
  --secondary: #8E2F5B;   /* rosso/violetto */
}

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text-main);
}

.wrap{
  max-width:520px;
  margin:0 auto;
  padding:24px;
}

/* LOGO */
h1{
  margin:0 0 8px 0;
  font-size:2.4rem;
  font-weight:600;
}

/* PAYOFF */
p{
  margin:0 0 24px 0;
  color: var(--text-muted);
}

/* LABEL */
label{
  display:block;
  margin-bottom:6px;
  font-size:.9rem;
  opacity:.85;
}

/* INPUT */
input, select{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  background: var(--input-bg);
  color: var(--text-main);
  margin-bottom:16px;
  font-size:1rem;
}

/* CTA */
button{
  width:100%;
  padding:16px;
  border:none;
  border-radius:999px;
  background: var(--accent);
  color:#1C0F14;
  font-weight:600;
  font-size:1.05rem;
  cursor:pointer;
}

button:active{
  transform:scale(.98);
}

/* MATCH CARD */
.match{
  background: var(--card-bg);
  padding:14px;
  border-radius:14px;
  margin-bottom:12px;
}

/* SCORE */
.score{
  color: var(--accent);
  font-weight:bold;
}