/* Which is bigger: two cards facing each other, one word between them. */
.vs-head{text-align:center}
.vs-head .prompt{margin:6px 0 12px}
.vs-head .chips{justify-content:center}

.vs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch}
.vs-or{
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;
}
@media (min-width:640px){
  .vs-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px}
}

.vs-card{
  -webkit-appearance:none;appearance:none;font:inherit;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:190px;padding:22px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:box-shadow var(--med) var(--ease),border-color var(--med) var(--ease),transform var(--med) var(--ease);
}
@media (min-width:640px){.vs-card{min-height:260px}}
.vs-card:hover:not(:disabled){box-shadow:var(--e2);border-color:transparent;transform:translateY(-2px)}
.vs-card:active:not(:disabled){transform:translateY(0) scale(.995)}
.vs-card:disabled{cursor:default}
.vs-flag{width:64px;height:44px;border-radius:4px;object-fit:cover;box-shadow:0 1px 2px rgba(60,64,67,.3)}
.vs-name{font-size:20px;line-height:1.25;color:var(--text)}
@media (min-width:640px){.vs-name{font-size:24px}}
.vs-card .big-value{font-size:30px;min-height:36px;color:var(--text-2)}
.vs-card .vs-unit{opacity:.85}
.vs-card.won{border-color:var(--green);background:var(--green-bg)}
.vs-card.won .big-value{color:var(--green)}
.vs-card.lost{border-color:var(--red);background:var(--red-bg)}
.vs-card.lost .big-value{color:var(--red)}
.vs-status{display:flex;justify-content:center;min-height:38px;padding:14px 0 0}