:root {
  --accent: #16a34a;
  --bg: #f6f7f5; --surface: #ffffff; --ink: #111512; --muted: #5d665f; --line: #e1e5e0;
  --radius: 14px;
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1210; --surface: #171c19; --ink: #eef2ef; --muted: #9aa59d; --line: #2a322d; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
.ph { display: grid; place-items: center; background: var(--c, #64748b); color: #fff; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* Resultatstaplar */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; gap: 12px; align-items: center; }
.bar-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; font-size: 14px; }
.bar-main { flex: 1; min-width: 0; }
.bar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; margin-bottom: 5px; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bar-name small { font-weight: 500; color: var(--muted); font-size: inherit; }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-track { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 99px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.mine { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 99px; vertical-align: 2px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-right: 6px; vertical-align: 1px; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } .live-dot { animation: none; } }
[hidden] { display: none !important; }
.bar-val { flex: none; white-space: nowrap; }

/* ---------------------------------------------------------------- tävlingen
   Rutan under tacket pa rostsidan. Medvetet dov: rosten ar huvudsaken och
   utlottningen ar ett erbjudande, inte ett krav. En ruta som skriker tar
   uppmarksamhet fran det man just gjort. */
.tavling {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--linje, #e5e7eb);
  border-radius: 12px;
  background: var(--ruta, #fafafa);
}
.tavling h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.tav-villkor {
  margin: 0 0 .85rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--dov, #6b7280);
}
.tavling label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--dov, #6b7280);
  margin: .55rem 0 .2rem;
}
.tavling input {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .7rem;
  font: inherit;
  border: 1px solid var(--linje, #d1d5db);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}
.tavling input:focus-visible {
  outline: 2px solid var(--accent, #16a34a);
  outline-offset: 1px;
  border-color: transparent;
}
.tavling .btn { margin-top: .85rem; width: 100%; }