/* pvp_promo.css - the time-boxed "Watch PvP" box, up on the top line beside the
 * Upload/Download box.
 *
 * THIS APP'S OWN UI (no Battle Brothers source), like the stepper and the old
 * save box: a bespoke, non-BB affordance, so the "cite BB" rule (BB-port CSS
 * only) does not apply; these values are bespoke.
 *
 * TIME-BOXED: only rendered while app.py `_pvp_promo()` returns times (through
 * 20:00 Europe/Berlin on 2026-07-05, the tournament night). After that the server
 * stops emitting the markup and this file is loaded but unused. Remove the whole
 * feature (this file, pvp_promo.js, the inventory.html block, the app.py helper)
 * once the event is over; see todos.md.
 *
 * PLACEMENT (layout-neutral, moves NOTHING else): an absolute overlay in the EMPTY
 * right margin, top-aligned with the stepper so it sits on the same line as the
 * Upload/Download box. The stepper is at .bng-stepper top: -10.75rem (stepper.css)
 * and ends at the container's right edge; this box is one step further right
 * (left: calc(100% + 0.8rem), the same right-margin column as .add-item-actions) at
 * the same top. That margin is empty at this height (.add-item-actions starts far
 * below at top: 5.0rem), so only the promo's own position is set; no other element
 * moves. */

.character-screen-container .pvp-promo {
  position: absolute;
  left:     calc(100% + 0.8rem);   /* same right-margin column as .add-item-actions */
  top:      -10.75rem;             /* same top as the stepper (Upload/Download box), up
                                      in the empty right margin beside it; layout-neutral,
                                      moves nothing (.add-item-actions stays at 5.0rem) */
  width:    13.5rem;
  z-index:  11;

  box-sizing: border-box;
  padding:    1.0rem 1.0rem 0.9rem;

  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.6rem;

  border:        0.15rem solid #9146ff;              /* Twitch purple accent */
  border-radius: 0.6rem;
  background:    rgba(18, 16, 12, 0.9);
  box-shadow:    0 0 1.1rem rgba(145, 70, 255, 0.45);
  text-align:    center;
}

/* The box and both links start with the `hidden` attribute; pvp_promo.js reveals the
 * box and the one correct link on load (Reddit before 4pm CET, Twitch from 4pm CET).
 * They set an explicit `display`, which would defeat the UA `[hidden]` rule, so
 * re-assert it here with enough specificity (3 classes) to win. */
.character-screen-container .pvp-promo[hidden],
.character-screen-container .pvp-promo [hidden] { display: none; }

.character-screen-container .pvp-promo-title {
  font-size:   1.3rem;
  line-height: 1.6rem;
  font-weight: bold;
  color:       #ffe9b0;
  text-shadow: 1px 1px 1px #000;
}

/* Twitch button: brand purple, white glyph + label. An <a>, so override the head
 * reset (.character-screen a { color: inherit }) with a higher-specificity color. */
.character-screen-container .pvp-promo-twitch {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5rem;
  width:         100%;
  box-sizing:    border-box;
  padding:       0.7rem 0.6rem;
  border-radius: 0.4rem;
  background:    #9146ff;
  color:         #ffffff;
  font-size:     1.4rem;
  line-height:   1;
  white-space:   nowrap;
  cursor:        pointer;
  text-decoration: none;
  transition:    background 0.12s;
}
.character-screen-container .pvp-promo-twitch:hover { background: #a970ff; }

.character-screen-container .pvp-promo-twitch-glyph {
  width:  1.6rem;
  height: 1.6rem;
  flex:   0 0 auto;
}
.character-screen-container .pvp-promo-twitch-label { font-size: inherit; }

/* The Reddit link ("Get the info"), shown before the stream goes live. Small gold
 * link, same size/tone as the stepper help links (.bng-help-link 1.2rem #e0b75a).
 * Higher specificity than the head `.character-screen a { color: inherit }` reset
 * so it stays gold. */
.character-screen-container .pvp-promo-reddit {
  font-size:       1.2rem;
  color:           #e0b75a;
  text-decoration: none;
  cursor:          pointer;
}
.character-screen-container .pvp-promo-reddit:hover { text-decoration: underline; }