/* ---------------------------------------------------------------------------
   Map thumbnails (cw_map_img) and the veto map grid.

   Images come from GameTracker's CDN at 64x48 or 160x120 — those are the only
   two sizes they publish, so every tile here is sized within that ceiling and
   never asks the browser to upscale past 160 wide except the deliberate 'lg'.
   --------------------------------------------------------------------------- */

.cw-mapimg {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--cw-mapimg-w);
  height: var(--cw-mapimg-h);
  border-radius: var(--cw-radius-sm);
  overflow: hidden;
  background: var(--cw-bg-3);
  box-shadow: inset 0 0 0 1px var(--cw-border);
  vertical-align: middle;
}

.cw-mapimg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* CS 1.6 map shots are muddy; a touch of contrast makes them read at 40px */
  filter: saturate(1.06) contrast(1.04);
}

/* Lettered tile shown only when GameTracker has no image for this map. */
.cw-mapimg > i {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: var(--cw-font-display), var(--cw-font-body), sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(9px, calc(var(--cw-mapimg-w) * .19), 20px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
  background: linear-gradient(150deg, var(--cw-bg-4), var(--cw-bg-2));
  text-align: center;
  overflow: hidden;
}

.cw-mapimg.is-missing > i { display: flex; }

/* --- inline label pairing -------------------------------------------------
   Used wherever a thumbnail sits next to the map name in a row or a badge. */
.cw-maprow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cw-maprow > .cw-mapname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- veto grid ------------------------------------------------------------
   Each map is a submit button. The picture is the button; the name sits on a
   scrim across the bottom so it stays legible over bright map shots. */
.cw-vetogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.cw-vetogrid form { margin: 0; min-width: 0; }

.cw-mapcard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  background: var(--cw-bg-3);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cw-mapcard .cw-mapimg {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  box-shadow: none;
}

.cw-mapcard .cw-mapimg img { transition: transform .3s ease, filter .16s ease; }

.cw-mapcard-nm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 10px 8px;
  font-family: var(--cw-font-mono), monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.88) 35%, rgba(0,0,0,0));
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

.cw-mapcard-nm > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* pickable */
.cw-mapcard:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--cw-accent);
  box-shadow: var(--cw-shadow);
}
.cw-mapcard:not(:disabled):hover .cw-mapimg img { transform: scale(1.05); }
.cw-mapcard:not(:disabled):focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 2px;
}

/* banned — drained of colour, with a struck-through name */
.cw-mapcard.is-banned {
  border-color: color-mix(in srgb, var(--cw-red) 45%, var(--cw-border));
  cursor: not-allowed;
}
.cw-mapcard.is-banned .cw-mapimg img { filter: grayscale(1) brightness(.42); }
.cw-mapcard.is-banned .cw-mapcard-nm { color: var(--cw-fg-dim); text-decoration: line-through; }

.cw-mapcard-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
  color: var(--cw-red);
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  pointer-events: none;
}

/* not your turn — still readable, just clearly inert */
.cw-mapcard:disabled:not(.is-banned) { opacity: .55; cursor: default; }

/* the map that survived the veto */
.cw-mappicked {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cw-good) 40%, var(--cw-border));
  border-radius: var(--cw-radius);
  background: color-mix(in srgb, var(--cw-good) 8%, transparent);
}
.cw-mappicked-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-mappicked-k {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
}
.cw-mappicked-v {
  font-family: var(--cw-font-mono), monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--cw-fg);
}

/* --- admin map pool strip -------------------------------------------------- */
.cw-mappool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.cw-mappool-i {
  position: relative;
  width: 104px;
  border-radius: var(--cw-radius-sm);
  overflow: hidden;
  border: 1px solid var(--cw-border);
  background: var(--cw-bg-3);
}
.cw-mappool-i .cw-mapimg { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: 0; box-shadow: none; }
.cw-mappool-i b {
  display: block;
  padding: 4px 6px;
  font-family: var(--cw-font-mono), monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cw-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-mappool-i.is-off { opacity: .42; }
.cw-mappool-i.is-off .cw-mapimg img { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  .cw-mapcard,
  .cw-mapcard .cw-mapimg img { transition: none; }
  .cw-mapcard:not(:disabled):hover { transform: none; }
  .cw-mapcard:not(:disabled):hover .cw-mapimg img { transform: none; }
}

/* --- host-layout integration ----------------------------------------------
   Small adjustments where a thumbnail joins an existing flex row. */

/* live.php: .cw-lm-top is space-between with two children; the thumbnail makes
   three, so pin the state pill right and let thumb + name sit together. */
.cw-lm-top > .cw-lm-map { margin-right: auto; }

/* index.php server rows are already a flex row with a gap — the thumbnail just
   needs to keep its size when the server name is long. */
.cw-home-server-thumb { flex: none; }

/* card headings that carry a thumbnail next to the map name */
.cw-card-h h2.cw-maprow { gap: 10px; }

@media (max-width: 560px) {
  /* two veto cards per row stays readable on a phone; three does not */
  .cw-vetogrid { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 9px; }
  .cw-mapcard-nm { font-size: 11.5px; padding: 14px 8px 7px; }
  .cw-mappool-i { width: 88px; }
}