/* ==========================================================================
   css/news.css — the "What's new" popup after logging in (DECISIONS 321)
   --------------------------------------------------------------------------
   js/ui/news.js builds it inside openModal (wide). One row per new thing: a
   picture in a small box, the title, two lines and "Read more in the Wiki".
   ========================================================================== */

.news-lead { margin: 0 0 10px; }
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* "New in v1.2" above a round's cards when more than one round is shown (DECISIONS 368). */
.news-round-label {
  margin: 6px 0 -2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-light);
}
.news-round-label:first-child { margin-top: 0; }
.news-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: var(--panel-border);
}
.news-art {
  flex: none;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  overflow: hidden;
}
/* A card without a picture (js/ui/news.js iconArt): a coloured tile with the line icon in white -
   the accent gradient, gold for money and prizes - a soft ring and a shadow, so it reads like a
   badge instead of a thin 44 px outline in the grey box (owner, 26 September). */
.news-art.is-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--accent-light, #f08c8c) 0%, var(--accent) 45%, var(--accent-strong, #b83232) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -10px 16px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.news-art.is-icon.tone-gold {
  color: #3a2a05;
  background: linear-gradient(145deg, #ffe9a6 0%, #ffd86b 45%, #d69a1f 100%);
}
.news-art.is-icon .news-icon { display: flex; }
.news-art.is-icon svg { width: 28px; height: 28px; stroke-width: 2.2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.news-img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.news-img.item { width: 40px; height: 40px; object-fit: contain; }   /* the 24-30 px item icons, scaled up */
.news-text { min-width: 0; }
.news-title { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.news-text p { margin: 0 0 4px; font-size: 0.85rem; line-height: 1.4; }
.news-more { font-size: 0.78rem; font-weight: 600; color: var(--accent-light); }

/* The six party places of the summary (DECISIONS 316), drawn small: the red one is "here". */
.news-places { display: grid; grid-template-columns: repeat(3, 16px); gap: 3px; }
.news-places span {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 9px; font-weight: 800; color: var(--muted);
}
.news-places span.on { background: var(--accent); border-color: #fff; color: #fff; }
/* The five language flags (DECISIONS 329), two to a row. */
.news-flags { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; justify-content: center; }
.news-flags .lang-flag { width: 24px; height: 16px; }

/* --------------------------------------------------------------------------
   The #whatsnew page (js/ui/whatsnew.js, DECISIONS 398): one panel per round,
   the popup's cards tiled in a responsive grid so the page fills its width
   (owner, 26 September: one narrow column looked empty). */
.whatsnew-round + .whatsnew-round { margin-top: 12px; }
.whatsnew-round h3 { display: flex; align-items: baseline; gap: 10px; margin-top: 0; }
.whatsnew-version {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-light);
}
.whatsnew-date { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
/* One column of thin rows (owner, 26 September: "dunnere cards onder elkaar, wel met icon en tekst,
   geen 3 cards naast elkaar" - the three-a-row grid of 398 made tall cards). The art is 48 px, the
   text sits beside it in two lines, the Wiki link after the text on the same line. */
.whatsnew-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.whatsnew-grid .news-item { align-items: center; padding: 6px 12px; gap: 12px; }
.whatsnew-grid .news-art { width: 48px; height: 48px; }
.whatsnew-grid .news-art.is-icon svg { width: 22px; height: 22px; }
.whatsnew-grid .news-img.item { width: 32px; height: 32px; }
.whatsnew-grid .news-title { font-size: 0.9rem; margin-bottom: 1px; }
.whatsnew-grid .news-text p { display: inline; margin: 0; font-size: 0.82rem; }
.whatsnew-grid .news-more { margin-left: 6px; white-space: nowrap; }

@media (max-width: 600px) {
  .news-item { gap: 10px; padding: 8px 10px; }
  .news-art { width: 48px; height: 48px; }
  .news-img.item { width: 32px; height: 32px; }
  .news-places { grid-template-columns: repeat(3, 12px); gap: 2px; }
  .news-places span { width: 12px; height: 12px; font-size: 7px; }
  .news-flags { gap: 2px; }
  .news-flags .lang-flag { width: 18px; height: 12px; }
}