/* ============================================================
   V4.8B — LAYOUT LOCK
   Fixes:
   1. Reaction Arena must NEVER grow with event feed
   2. Event cards become readable
   3. Mandatkampen labels become clearly visible
   ============================================================ */

/* ------------------------------------------------------------
   16:9 — LOCK REACTION ARENA HEIGHT
   ------------------------------------------------------------ */
body:not([data-pixel-layout="9"]) .showArea{
  height:292px !important;
  min-height:292px !important;
  max-height:292px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Stop internal content from changing parent geometry */
body:not([data-pixel-layout="9"]) .showArea > *{
  min-height:0 !important;
}

/* Keep the hero/reaction actor anchored */
body:not([data-pixel-layout="9"]) .showArea .heroStats{
  max-height:226px !important;
  overflow:hidden !important;
}

/* ------------------------------------------------------------
   EVENT FEED — FIXED 2x2 BROADCAST GRID
   ------------------------------------------------------------ */
.showArea .eventFeed{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;

  height:174px !important;
  min-height:174px !important;
  max-height:174px !important;

  overflow:hidden !important;
  align-content:stretch !important;
  align-items:stretch !important;
}

/* Only the newest four are allowed to occupy the visual feed */
.showArea .eventFeed > *{
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  margin:0 !important;
  padding:9px 11px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;

  background:
    linear-gradient(180deg,rgba(6,20,43,.97),rgba(3,12,28,.98)) !important;

  border:2px solid rgba(35,224,255,.62) !important;
  box-shadow:
    4px 4px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 4px 0 0 currentColor !important;

  overflow:hidden !important;
}

/* Keep older overflow events hidden visually if DOM contains > 4 */
.showArea .eventFeed > *:nth-child(n+5){
  display:none !important;
}

/* Main event line */
.showArea .eventFeed b,
.showArea .eventFeed strong{
  display:block !important;
  margin:0 !important;

  color:#ffffff !important;
  opacity:1 !important;

  font-family:"Courier New",monospace !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  letter-spacing:.015em !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;

  text-shadow:
    2px 2px 0 #000,
    0 0 5px rgba(255,255,255,.10) !important;
}

/* Secondary event text */
.showArea .eventFeed span,
.showArea .eventFeed small,
.showArea .eventFeed p{
  display:block !important;
  margin:0 !important;

  color:#d2e5f2 !important;
  opacity:1 !important;

  font-family:"Courier New",monospace !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  line-height:1.12 !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;

  text-shadow:1px 1px 0 #000 !important;
}

/* Event type/accent indicators */
.showArea .eventFeed .positive,
.showArea .eventFeed [data-state="positive"]{
  color:#3dff9d !important;
  border-color:#3dff9d !important;
}

.showArea .eventFeed .negative,
.showArea .eventFeed [data-state="negative"]{
  color:#ff456d !important;
  border-color:#ff456d !important;
}

/* ------------------------------------------------------------
   REACTION HERO TEXT
   ------------------------------------------------------------ */
.showArea .heroStats,
.showArea .heroStats *{
  opacity:1 !important;
}

.showArea .heroStats strong{
  color:#fff !important;
  text-shadow:3px 3px 0 #000 !important;
}

.showArea .heroStats small{
  color:#c8dfea !important;
  opacity:1 !important;
}

/* ------------------------------------------------------------
   MANDATKAMPEN — LABELS UNDER BAR
   ------------------------------------------------------------ */
.majority .majorityLabel,
.majority .sideALabel,
.majority .sideBLabel{
  opacity:1 !important;
  visibility:visible !important;

  color:#f6fbff !important;

  font-family:"Courier New",monospace !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  letter-spacing:.04em !important;

  text-shadow:
    2px 2px 0 #000,
    0 0 5px rgba(255,255,255,.16) !important;
}

.majority .majorityLabel{
  margin-top:5px !important;
  padding-top:2px !important;
}

.majority .sideALabel,
.majority .sideBLabel{
  color:#dbeaf4 !important;
}

/* Give labels their own dark separation strip */
.majority .majorityLabel{
  background:rgba(2,9,20,.74) !important;
  border-top:1px solid rgba(35,224,255,.20) !important;
  padding:4px 8px !important;
}

/* ------------------------------------------------------------
   175 BAR — slightly clearer
   ------------------------------------------------------------ */
.majority .track{
  margin-bottom:0 !important;
}

.majority .track::after{
  z-index:12 !important;
  color:#07101d !important;
  background:#fff !important;
  border-color:#07101d !important;
}

/* ------------------------------------------------------------
   9:16 — DON'T FORCE 16:9 HEIGHT, BUT STOP GROWTH
   ------------------------------------------------------------ */
body[data-pixel-layout="9"] .showArea{
  max-height:520px !important;
  overflow:hidden !important;
}

body[data-pixel-layout="9"] .showArea .eventFeed{
  grid-template-columns:1fr !important;
  grid-template-rows:repeat(4,minmax(0,1fr)) !important;
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
}

body[data-pixel-layout="9"] .showArea .eventFeed > *{
  padding:10px 12px !important;
}

body[data-pixel-layout="9"] .showArea .eventFeed b,
body[data-pixel-layout="9"] .showArea .eventFeed strong{
  font-size:14px !important;
}

body[data-pixel-layout="9"] .showArea .eventFeed span,
body[data-pixel-layout="9"] .showArea .eventFeed small,
body[data-pixel-layout="9"] .showArea .eventFeed p{
  font-size:11.5px !important;
}

body[data-pixel-layout="9"] .majority .majorityLabel,
body[data-pixel-layout="9"] .majority .sideALabel,
body[data-pixel-layout="9"] .majority .sideBLabel{
  font-size:12px !important;
}