table.collection {
  min-width: 100%;
}

.collection td, .collection th {
  max-width: 15vw;
}

.collection > tbody > tr {
  counter-increment: rownum;
}

.collection td.row-number:first-child::before {
  content: counter(rownum);
}

.collection td.viewer-link,
.collection td.upload-date {
  white-space: nowrap;
}

.clear-button-holder {
  text-align: center;
}

/* responsive card layout for mobile devices */
@media (max-width: 768px) {
  .collection, .collection tbody {
    display: block;
  }
  
  .collection thead {
    display: none;
  }
  
  .collection tr {
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  
  .collection td {
    display: block;
    border: none;
    padding: 0.25rem 0;
    text-align: left;
    max-width: 100%;
  }
  
  .collection td:not(.viewer-link):before {
    content: attr(data-label) ": ";
    font-weight: bold;
    display: inline-block;
    width: 40%;
  }

  /* labels */
  .collection td.col-title:before { content: "Title:"; }
  .collection td.col-description:before { content: "Description:"; }
  .collection td.col-timer:before { content: "Level timer:"; }
  .collection td.col-cleartime:before { content: "Clear check time:"; }
  .collection td.col-attempts:before { content: "Attempts:"; }
  .collection td.col-plays:before { content: "Plays:"; }
  .collection td.col-gamestyle:before { content: "Game style:"; }
  .collection td.col-themes:before { content: "Themes:"; }
  .collection td.col-tags:before { content: "Tags:"; }
  .collection td.col-modifiers:before { content: "Modifiers:"; }
  .collection td.upload-date:before { content: "Upload date:"; }
  .collection td.col-rank:before { content: "Rank/Count:"; }
  
  /* force some labels to span the entire line */
  .collection td.col-title:before,
  .collection td.col-description:before,
  .collection td.col-themes:before,
  .collection td.col-tags:before,
  .collection td.col-modifiers:before {
    display: block;
    width: 100%;
  }

  /* don't need row-number placeholder cell -- merged with clear button holder */
  .collection td.row-number { 
    display: none;
  }

  /* make viewer link bigger */
  .collection td.viewer-link {
    font-size: 2rem;
    font-weight: bold;
  }

  .cached-view-link {
    font-size: 1rem;
  }

  .collection td.viewer-link:before {
    content: "";
  }

  /* reorder fields to flow more naturally on the card layout */
  .collection td.clear-button-holder { order: -4; display: inline-block; }
  .collection td.clear-button-holder:before { content: "#" counter(rownum); }
  .collection td.clear-button-holder img { float: right; }
  .collection td.viewer-link { order: -3; display: inline-block; }
  .collection td.col-title { order: -2; }
  .collection td.col-description { order: -1; }
  /* default: order 0 */
  .collection td.col-themes { order: 1; }
  .collection td.col-tags { order: 2; }
  .collection td.col-modifiers { order: 3; }

  /* sort & filter */
  .sort-filter-form fieldset label {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
  }
  
  .sort-filter-form fieldset select {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    box-sizing: border-box;
  }
  
  .sort-filter-form fieldset input[type="submit"] {
    width: 100%;
    padding: 0.5rem;
    margin-top: 1rem;
    font-size: 1rem;
  }
  
  /* Radio buttons on their own lines */
  .sort-filter-form fieldset input[type="radio"] + label {
    display: inline;
    margin-right: 1rem;
  }
}