/* Games, layout only. The base element rules (table, button, input) are in site.css.
   Every selector starts with .gl so nothing here leans on the old theme. */

/* add box */
.gl-add__field { width: 100%; max-width: 400px; box-sizing: border-box; }
.gl-results { margin: 4px 0; padding: 0; list-style: none; }
.gl-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
.gl-result__img { flex: none; width: 80px; height: 30px; object-fit: cover; border: 1px solid #000000; }
.gl-result__name { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.gl-err { color: #cc0000; }
.gl-err[hidden] { display: none; }

/* past NO warning: a plain box in the flow */
.gl-warn { max-width: 480px; margin: 8px 0; padding: 8px; background: #ffffff; border: 2px solid #000000; }
.gl-warn p { margin: 0 0 8px; }
.gl-warn p:last-child { margin: 0; }
.gl-warn__title { font-weight: bold; }

/* filter and sort */
.gl-filter p { margin: 8px 0; }
.gl-filter button { margin: 2px 2px 2px 0; }
.gl-num { width: 64px; }

/* the table scrolls inside its own box on a phone */
.gl-scroll { overflow-x: auto; }
.gl-table { width: 100%; }
.gl-table td { vertical-align: top; }
.gl-group { text-align: left; }
.gl-nowrap { white-space: nowrap; }
.gl-name { min-width: 10em; overflow-wrap: anywhere; }
.gl-by, .gl-tools { margin: 4px 0 0; }
.gl-fix { margin-top: 8px; }
.gl-fix label { display: block; }
.gl-fix p { margin: 4px 0; }

/* a sort control in a header cell reads as a link */
.gl-sort {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #0000ee;
  font: inherit;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
.gl-sort:active { color: #ff0000; border: 0; }

/* pictures: a plain border, the same box for a picture and a tile */
.gl-piccell { width: 122px; }
.gl-pic { display: block; width: 120px; height: 45px; object-fit: cover; border: 1px solid #000000; }
/* Wiki covers are portrait in a landscape frame: keep the top third, where the title art sits. */
.gl-pic--wiki { object-position: 50% 30%; }
.gl-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 45px;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  font-weight: bold;
}
.gl-result__img.gl-tile { width: 80px; height: 30px; font-size: 11px; }

@media (max-width: 600px) {
  .gl-piccell { width: 82px; }
  .gl-pic, .gl-piccell .gl-tile { width: 80px; height: 30px; }
}