/* ==========================================================
   V4.8C
   1. Reaction hero square = party logo
   2. Mandatkampen outcome text is fully visible
   ========================================================== */

/* ---------- REACTION HERO PARTY BADGE ---------- */

.v3ReactionHero .v3HeroAvatar .v3Badge{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;

  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;

  background-color:#061426 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:40px 40px !important;

  border:3px solid #20e8ff !important;
  box-shadow:
    4px 4px 0 #000,
    inset 0 0 0 2px rgba(255,255,255,.08),
    0 0 13px rgba(32,232,255,.18) !important;

  image-rendering:pixelated !important;
}

/* Real party logo in the badge */
.v3ReactionHero .v3HeroAvatar[data-party="S"]  .v3Badge{background-image:url('/assets/v47m/parties/S.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="SD"] .v3Badge{background-image:url('/assets/v47m/parties/SD.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="M"]  .v3Badge{background-image:url('/assets/v47m/parties/M.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="C"]  .v3Badge{background-image:url('/assets/v47m/parties/C.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="V"]  .v3Badge{background-image:url('/assets/v47m/parties/V.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="MP"] .v3Badge{background-image:url('/assets/v47m/parties/MP.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="KD"] .v3Badge{background-image:url('/assets/v47m/parties/KD.png?v=48c1') !important;}
.v3ReactionHero .v3HeroAvatar[data-party="L"]  .v3Badge{background-image:url('/assets/v47m/parties/L.png?v=48c1') !important;}

/* State is represented by border/glow instead of a cryptic tiny glyph */
.v3ReactionHero .v3HeroAvatar.v3-positive .v3Badge,
.v3ReactionHero .v3HeroAvatar.v3-celebrate .v3Badge,
.v3ReactionHero .v3HeroAvatar.v3-victory .v3Badge{
  border-color:#36ff9b !important;
  box-shadow:4px 4px 0 #000,0 0 15px rgba(54,255,155,.32) !important;
}

.v3ReactionHero .v3HeroAvatar.v3-negative .v3Badge,
.v3ReactionHero .v3HeroAvatar.v3-panic .v3Badge,
.v3ReactionHero .v3HeroAvatar.v3-defeat .v3Badge{
  border-color:#ff4168 !important;
  box-shadow:4px 4px 0 #000,0 0 15px rgba(255,65,104,.32) !important;
}

.v3ReactionHero .v3HeroAvatar.v3-shock .v3Badge,
.v3ReactionHero .v3HeroAvatar.v3-threshold .v3Badge{
  border-color:#ffe33b !important;
  box-shadow:4px 4px 0 #000,0 0 15px rgba(255,227,59,.30) !important;
}


/* ---------- MANDATKAMPEN ---------- */

.majority{
  position:relative !important;
  overflow:hidden !important;
  padding-bottom:29px !important;
}

/* Move the actual red/blue track upward so the result label has room */
.majority .track{
  position:relative !important;
  transform:translateY(-8px) !important;
  margin-bottom:0 !important;
}

/* Outcome text: DÖTT LOPP / XXX LEDER */
.majority .majorityLabel{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:5px !important;
  z-index:30 !important;

  height:20px !important;
  min-height:20px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:2px 8px !important;

  background:#030b18 !important;
  border-top:2px solid #20e8ff !important;

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

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

  text-shadow:2px 2px 0 #000 !important;
  box-sizing:border-box !important;
}

/* Party-group labels should also remain legible */
.majority .sideALabel,
.majority .sideBLabel{
  color:#eef8ff !important;
  opacity:1 !important;
  font-weight:900 !important;
  text-shadow:2px 2px 0 #000 !important;
}

/* 9:16 */
body[data-pixel-layout="9"] .v3ReactionHero .v3HeroAvatar .v3Badge{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  background-size:47px 47px !important;
}

body[data-pixel-layout="9"] .majority .majorityLabel{
  height:24px !important;
  min-height:24px !important;
  font-size:12px !important;
}