/* ===================================================================
   AltekOT dark red/gold/lightning theme — overrides the tibiacom look.
   Loaded AFTER basic.css so these win. Reversible: remove the <link>
   in index.php + restore background-artwork.jpg.preAltekTheme.bak.
   =================================================================== */

/* Background reverted to the original template artwork (owner request) —
   we only keep the red/gold CONTENT theme below, not the custom bg. */

/* ---- main content parchment -> dark obsidian ---- */
.Content .BoxContent,
.Content .BoxContent td,
.Content .Box {
  background-color: #1a1210 !important;
  color: #e6dcc4 !important;
}
.Content .Box { background-color: #241a15 !important; }

/* generic content tables used across the pages */
.TableContent,
.TableContentContainer,
.InnerTableContainer,
table.Table1, table.Table2, table.Table3, table.Table4, table.Table5,
div.TableContainer {
  background-color: #150f0d !important;
  color: #e6dcc4 !important;
}

/* alternating table rows (template sets these inline light/dark) */
.Content tr[bgcolor],
.Content table td[bgcolor] {
  background-color: #1d1511 !important;
  color: #e6dcc4 !important;
}
.Content td, .Content p, .Content li, .Content span { color: #e6dcc4; }

/* label / header cells + table headline bars -> deep red with gold text */
.Content th,
.LabelV, .LabelV175, td.LabelV,
.CaptionInnerContainer .Text,
.Text {
  background-color: #4a1414 !important;
  color: #f0cf78 !important;
}

/* headings + captions in gold */
.Content h1, .Content h2, .Content h3,
.Content .Title, .CaptionContainer .Text {
  color: #f5d989 !important;
}

/* links -> gold */
.Content a, .Content a:link, .Content a:visited { color: #e8b84a !important; }
.Content a:hover { color: #ffdc70 !important; }

/* keep the AltekOT status colors readable on dark */
.Content .BoxContent td .white, .Content .BoxContent .white { color: #e9dfc7 !important; }
.Content .green, font[color="green"] { color: #58c06a !important; }
.Content .red,   font[color="red"]   { color: #e56a6a !important; }

/* news article body panels (the parchment blocks) */
.NewsHeadline, .NewsHeadlineText, .AuthorAndDate { color: #e6dcc4 !important; }

/* let the dragon banner show through the header container (no solid fill) */
#BackgroundHelper, #ArtworkHelper { background-color: transparent !important; }

/* recolor the blue Login / Download buttons -> warm red-gold (hue-shift the whole
   button incl. its text image so it stays cohesive) */
/* exactly ONE element per button so the hue-shift never stacks (stacking made it green) */
#LoginButton, #PlayNowContainer {
  filter: hue-rotate(150deg) saturate(1.35) brightness(1.06) !important;
}

/* the green "News" page-title bar -> red to match */
div[style*="title-background-green"] {
  filter: hue-rotate(-95deg) saturate(1.5) brightness(0.95) !important;
}

/* NEW-tab spotlight: freshly added menu tabs get the full treatment —
   pulsing golden row, sweeping shine streak, twinkling star, glowing text,
   shimmering NEW badge. Tabs are marked in index.php via $new_tab_links. */
.Submenuitem.NewTabGlow {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120, 80, 0, 0) 0%, rgba(255, 180, 40, 0.30) 50%, rgba(120, 80, 0, 0) 100%);
  animation: newTabRowPulse 2s ease-in-out infinite;
}
@keyframes newTabRowPulse {
  0%, 100% { box-shadow: inset 0 0 5px rgba(255, 190, 60, 0.25), 0 0 4px rgba(255, 170, 30, 0.30); }
  50%      { box-shadow: inset 0 0 9px rgba(255, 210, 90, 0.55), 0 0 10px rgba(255, 190, 60, 0.70); }
}
/* the shine streak sweeping across the row */
.Submenuitem.NewTabGlow::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -45%;
  width: 30%;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 244, 200, 0.65) 50%, transparent 85%);
  transform: skewX(-20deg);
  animation: newTabShine 2.6s linear infinite;
  pointer-events: none;
}
@keyframes newTabShine {
  0%   { left: -45%; }
  55%  { left: 115%; }
  100% { left: 115%; }
}
/* twinkling star on the left of the row */
.Submenuitem.NewTabGlow::before {
  content: "\2726";
  position: absolute;
  left: 15px;
  top: 0;
  font-size: 10px;
  line-height: 15px;
  color: #fff3c4;
  text-shadow: 0 0 4px #ffca4a;
  animation: newTabTwinkle 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes newTabTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.2) rotate(25deg); }
}
/* glowing golden label text */
.Submenuitem.NewTabGlow .SubmenuitemLabel {
  color: #ffe27a !important;
  font-weight: bold;
  animation: newTabTextPulse 1.7s ease-in-out infinite;
}
@keyframes newTabTextPulse {
  0%, 100% { text-shadow: 0 0 3px #ffb400, 0 0 8px rgba(255, 157, 0, 0.75); }
  50%      { text-shadow: 0 0 6px #ffe082, 0 0 14px #ffc233, 0 0 22px rgba(255, 160, 0, 0.9); }
}
/* shimmering NEW badge */
.NewTabBadge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  font-size: 8px;
  font-weight: bold;
  line-height: 10px;
  color: #2b1a00;
  background: linear-gradient(90deg, #ffe27a, #fff6c9, #d9a520, #ffe27a);
  background-size: 300% 100%;
  border: 1px solid #8a6a1a;
  border-radius: 3px;
  vertical-align: 2px;
  animation: newTabBadgeShimmer 2s linear infinite, newTabBadgeGlow 1.7s ease-in-out infinite;
}
@keyframes newTabBadgeShimmer {
  to { background-position: -300% 0; }
}
@keyframes newTabBadgeGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 200, 60, 0.9); }
  50%      { box-shadow: 0 0 11px rgba(255, 225, 110, 1); }
}