/* News on the login screen (LoginNews, src/login-news.js). Wide screens: the whole area left of
   the login card, from the top down, ending just short of the 380px top bar (which is wider
   than the 320px card, so it is what the panel has to clear).
   Narrow screens: under the top bar instead. Either way it stays hidden until the newspaper
   button opens it. Same skin as the login card. */

.login-news {
  --news-update: #5cc27a;
  --news-announcement: #e6b94a;
  --news-fix: #6aaaf0;
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  bottom: 12px;
  right: calc(50% + 190px + 12px);
  width: min(560px, calc(50% - 190px - 12px - 16px));
  z-index: 2;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  color: #dedede;
  font: 11px Verdana, Arial, sans-serif;
  background: #333 url("../png/bg.png");
  border: 1px solid #111;
  box-shadow: inset 0 0 0 1px #72746d, 0 4px 14px #0009;
}

.login-news.open {
  display: flex;
}

.login-news-header {
  position: relative;
  flex: none;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  background-image: url("../png/bg2.png");
}

.login-news-close {
  display: block;
  position: absolute;
  right: 6px;
  top: 3px;
  background: none;
  border: 0;
  box-shadow: none;
  color: #ccc;
  font: 11px Verdana, Arial, sans-serif;
  text-decoration: underline;
  cursor: pointer;
}

.login-news-list.tibia-scroll-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  margin: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #000;
  box-shadow: inset 0 0 6px #000;
}

.login-news-list.tibia-scroll-content {
  padding: 0 4px 0 0;
}

.login-news-item {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.login-news-item:first-child {
  border-top: 0;
}

.login-news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.login-news-tag {
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bbb;
}

.login-news-tag-update { color: var(--news-update); }
.login-news-tag-announcement { color: var(--news-announcement); }
.login-news-tag-fix { color: var(--news-fix); }

.login-news-new {
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 9px;
  text-transform: uppercase;
  color: #fff;
  background: #c0392b;
}

.login-news-date {
  margin-left: auto;
  color: #8f8f8f;
  font-variant-numeric: tabular-nums;
}

.login-news-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: #f2f2f2;
  text-wrap: balance;
}

.login-news-image {
  display: block;
  max-width: 100%;
  margin: 0 0 8px;
  border: 1px solid #000;
}

.login-news-body {
  font-size: 12px;
  line-height: 1.6;
  color: #c8c8c8;
  overflow-wrap: anywhere;
}

.login-news-body p,
.login-news-body ul,
.login-news-body ol,
.login-news-body blockquote {
  margin: 0 0 8px;
}

.login-news-body h2,
.login-news-body h3 {
  margin: 10px 0 6px;
  font-size: 13px;
  color: #eee;
}

.login-news-body a,
.login-news-link,
.login-news-all {
  color: #d3d3cc;
}

.login-news-body .ql-align-center { text-align: center; }
.login-news-body .ql-align-right { text-align: right; }
.login-news-body .ql-align-justify { text-align: justify; }

.login-news-link {
  display: inline-block;
  margin-top: 2px;
}

.login-news-all {
  flex: none;
  margin: 0 8px 8px;
  text-align: right;
}

.login-news-empty {
  margin: 0;
  padding: 14px;
  color: #9a9a9a;
}

/* The newspaper button's unread dot */
#login-news-button {
  position: relative;
}

.login-news-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 0 2px #2a2a2a;
}

.login-news-badge[hidden] {
  display: none;
}

/* Narrow screens: no room beside the card, so the list drops down under the top bar */
@media (max-width: 899px) {
  .login-news {
    top: calc(max(12px, env(safe-area-inset-top)) + 56px);
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100% - 82px);
    z-index: 3;
  }

  .login-news-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .login-news-image,
  .login-news-link {
    display: none;
  }
}