/* ITZA Chess - Events (free arenas + leagues), TOURNAMENTS_SPEC.md Part A.
   Scoped to the events screen and the in-game arena bar.

   PALETTE: only the real app variables - --panel, --elev, --ink, --ink2,
   --line, --gold. Invented names fall through to their dark defaults and break
   light mode, which is the boot default; that is exactly how the Puzzles
   screen shipped dark-on-dark. */

.evwrap { max-width: 860px; margin: 0 auto; padding: 12px 14px 40px; }

/* one-human-one-identity: this is a place ITZA is genuinely better than the
   incumbents, so it is said in the product, not only in marketing copy */
.evnote {
  background: var(--elev); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; margin: 10px 0 16px;
  color: var(--ink2); font-size: 13px; line-height: 1.45;
}

/* ---- league standing ---- */
.evleaguecard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
.evleaguecard h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.evlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.evtier {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--elev); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; color: var(--ink);
}
.evtier .evtpts { color: var(--ink2); font-weight: 600; font-variant-numeric: tabular-nums; }
.evlnote { color: var(--ink2); font-size: 12.5px; }
.evleague { color: var(--ink2); font-size: 12.5px; margin-top: 6px; }

/* ---- arena list ---- */
.evrow {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.evrow:hover { border-color: var(--accent); }
.evrmain { min-width: 0; flex: 1 1 260px; }
.evrname { font-weight: 700; color: var(--ink); font-size: 15px; }
.evrmeta { color: var(--ink2); font-size: 12.5px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.evrside { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.evpill {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--line);
  background: var(--elev); color: var(--ink2);
}
.evpill.running { border-color: #2e7d5b; color: #2e7d5b; }
.evpill.pending { border-color: var(--accent); color: var(--accent); }
.evpill.finished { opacity: .75; }

/* A thin arena SAYS it is thin (A0): a countdown over an empty room makes the
   app feel more dead, not less, so the honest count is surfaced. */
.evviab { font-size: 12.5px; margin-top: 4px; }
.evviab.thin { color: #b5892f; }
.evviab.ok { color: #2e7d5b; }

.evempty { color: var(--ink2); text-align: center; padding: 26px 10px; }

/* ---- detail ---- */
.evdhead {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink2); font-size: 13px;
}
.evdhead b { color: var(--ink); }
.evdactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.evdsearch {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: var(--elev); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  color: var(--ink2); font-size: 13px;
}
.evdsub { color: var(--ink); font-size: 15px; margin: 14px 0 8px; }

/* berserk: the clock consequence is stated plainly, never just an icon */
.evberserk {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--elev); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px; color: var(--ink2); font-size: 12.5px;
}
.evberserk input { margin: 0; }
.evberserk.on { border-color: var(--accent); color: var(--ink); }

/* ---- standings table ---- */
.evtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.evtable th {
  text-align: left; color: var(--ink2); font-weight: 600; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.evtable td {
  padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.evtable tr.me td { background: var(--elev); font-weight: 700; }
.evtable td.num, .evtable th.num { text-align: right; }
.evtable .evwho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.evtable .evwho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evmedal { flex: 0 0 auto; }

/* ---- live pairings (A8) ---- */
.evlive {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); margin-bottom: 6px; font-size: 13.5px; color: var(--ink);
}
.evlive.mine { border-color: var(--accent); }
.evlivew { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.evlivevs { color: var(--ink2); font-size: 12px; }
.evlivetc { color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---- in-game arena bar ---- */
.arenabar {
  display: none; align-items: center; gap: 10px; margin-top: 8px;
  background: var(--elev); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 7px 12px; color: var(--ink2); font-size: 13px;
}
.arenabar.on { display: flex; }
.arenabar #arenaName { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arenabar #arenaPos { font-variant-numeric: tabular-nums; white-space: nowrap; }

.evcreate {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-top: 18px;
}
.evcreate h3 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }

@media (max-width: 560px) {
  .evrside { width: 100%; justify-content: flex-start; }
  .evtable th.hidesm, .evtable td.hidesm { display: none; }
}