/* Everfinal — deliberately minimal: ONE decision on screen at a time.
   Palette from arenafriends.com: orange / black / white. */
:root {
  --bg: #0A0A0F;          /* black */
  --fg: #FFFFFF;          /* white */
  --muted: #9b9ba4;
  --accent: #FF6B35;      /* arenafriends orange */
  --accent-hover: #E55A22;
  --on-accent: #FFFFFF;   /* text on orange */
  --card: #16161d;
  --line: #2a2a33;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) 1.25rem env(safe-area-inset-bottom);
}
#stage {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); margin: 0; line-height: 1.1; }
.prompt { font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 600; margin: 0; }
.sub { color: var(--muted); margin: 0; }

button, .btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  width: 100%;
}
button:hover, .btn:hover { border-color: var(--accent); }
button:active { transform: scale(.98); }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

input {
  width: 100%;
  font: inherit;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  text-align: center;
}
input:focus { outline: none; border-color: var(--accent); }

.options { display: flex; flex-direction: column; gap: .75rem; }
.match-stage { color: var(--muted); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-height: 60vh; overflow: auto; }
.teams button { padding: .85rem; }

.invite-progress { color: var(--muted); }
.badge { color: var(--accent); font-weight: 700; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast { color: var(--accent); font-weight: 600; }
.link { color: var(--muted); text-decoration: underline; font-size: .95rem; margin-top: .5rem; }
.link:hover { color: var(--accent); }
.or { color: var(--muted); margin: .25rem 0; font-size: .9rem; }
.gbtn { display: flex; justify-content: center; }

/* Match screen */
.match-status { font-size: 1.2rem; font-weight: 700; color: var(--accent); margin: .25rem 0 1rem; font-variant-numeric: tabular-nums; }
.your-bet { margin: 1rem 0 .25rem; }
.your-bet .lbl { color: var(--muted); }
.friends { text-align: left; margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.friends .lbl { color: var(--muted); font-size: .9rem; margin: 0 0 .25rem; }
.friend { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.friend .muted { color: var(--muted); font-size: .9rem; }

/* "What the world picked" stat bars */
.stats { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow: auto; text-align: left; }
.bar {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--line);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--accent) 22%, transparent) var(--pct, 0%), transparent var(--pct, 0%)),
    var(--card);
  overflow: hidden;
}
.bar.mine { border-color: var(--accent); }
.bar-label { font-weight: 600; z-index: 1; }
.bar-pct { color: var(--muted); font-variant-numeric: tabular-nums; z-index: 1; }
.bar.mine .bar-pct { color: var(--accent); }